@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap');
:root{--ink:#3c3553;--paper:#faf7f1;--muted:#827990;--edge:#e5ddeb;--selected:#e5d5fa;--accent:#7856ae;--row:63px}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Zen Maru Gothic','Yu Gothic',sans-serif}main{max-width:780px;padding:20px 26px 30px;position:relative}button{font-family:inherit;border:1px solid var(--edge);border-radius:15px;background:#ffffffbb;color:var(--ink);cursor:pointer;min-height:44px;padding:10px 18px;transition:transform .18s,background .18s}button:hover{transform:translateY(-2px);background:#f0e8fc}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible{outline:3px solid #bd9dda;outline-offset:4px}.primary{background:var(--accent)!important;color:white!important;font-weight:700;border:0;box-shadow:0 6px 0 #49396922;padding:15px 24px}.text-button{background:transparent;border:0;font-size:12px;box-shadow:none}a{color:var(--accent)}h1{font-size:clamp(32px,5vw,51px);line-height:1.4;letter-spacing:.025em;margin:15px 0 22px}h1 span{color:var(--accent)}h2{font-size:21px}p{line-height:1.85}.brand{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.brand>a{font-size:18px;letter-spacing:.16em;font-weight:900;text-decoration:none;color:var(--ink)}.brand small{display:block;font-size:9px;letter-spacing:.06em;font-weight:500}.brand button{padding:6px 10px;font-size:11px;min-height:36px}.eyebrow{font-size:11px;letter-spacing:.13em;color:var(--accent);font-weight:700}.lead{font-size:16px}.small{font-size:12px;color:var(--muted);line-height:1.8}.panel{animation:arrive .35s ease both}.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 10% 0%,#e9e2f8aa,transparent 55%),radial-gradient(ellipse at 100% 65%,#e4eee4aa,transparent 60%)}.ambient i{position:absolute;width:9px;height:9px;border-radius:50%;background:#b49bd15a;left:15%;top:32%;animation:float 8s ease-in-out infinite}.ambient i:nth-child(2){left:86%;top:15%;animation-delay:-3s}.ambient i:nth-child(3){left:80%;top:70%;animation-delay:-5s}.beast{object-fit:contain;mix-blend-mode:multiply}.welcome-art{position:relative;height:265px;margin:-6px auto 10px;width:min(100%,360px)}.hero-beast{height:245px;width:245px;position:relative;z-index:1;animation:float 5s ease-in-out infinite}.orbit{position:absolute;inset:20px 40px 0;border:1px solid #b9a3d266;border-radius:50%;transform:rotate(-20deg);background:radial-gradient(#e8ddfbaa,transparent 67%)}.orbit:after{content:'';position:absolute;inset:20px -15px;border:1px dashed #c8b5d777;border-radius:50%;transform:rotate(40deg)}.float-word{position:absolute;background:#ffffffda;border:1px solid #e9dfef;border-radius:20px;padding:9px 16px;font-size:12px;z-index:2;box-shadow:0 8px 25px #76648d10}.word-a{top:32px;left:0;transform:rotate(-8deg)}.word-b{right:0;bottom:45px;transform:rotate(7deg)}.spark{position:absolute;right:50px;top:0;color:#c6a56b;font-size:40px}#welcome{text-align:center}.welcome-actions{display:grid;gap:7px;max-width:370px;margin:0 auto}.storage-note{margin-top:25px}details{text-align:left;border-top:1px solid var(--edge);padding:18px 0;margin:20px 0}summary{cursor:pointer;font-size:13px}.history-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--edge);padding:10px;font-size:12px}#chapterMap{display:grid;gap:16px;margin:30px 0}.chapter-card{display:flex;text-align:left;gap:15px;align-items:center;padding:16px 22px;background:#ffffffbb;border:1px solid var(--edge);border-radius:23px;position:relative}.chapter-card img{width:95px;height:95px}.chapter-card h2{margin:5px 0}.chapter-card p{margin:3px 0;font-size:12px}.chapter-card.locked{opacity:.48}.chapter-card.done{border-color:#adbfad;background:#edf3eb}.chapter-card .seal{margin-left:auto;font-size:22px;color:var(--accent)}.chapter-heading{display:flex;align-items:center;gap:14px}.chapter-heading .beast{width:72px;height:72px}.chapter-heading p{font-size:12px;line-height:1.5;margin:5px 0}.chapter-heading #progress{margin-left:auto;white-space:nowrap;font-size:12px}.progress-track{height:4px;border-radius:5px;background:#e9e2ed;margin:14px 0 25px}.progress-track div{height:100%;background:var(--accent);transition:width .4s}#question,#dialogQuestion{font-weight:900;font-size:clamp(27px,4.5vw,39px);color:#643d99;line-height:1.45;margin:12px 0 14px}#context{font-size:13px;color:var(--muted);margin:8px 0 18px}.guide{font-size:12px;margin:8px 0}.wide{width:100%;margin-top:7px}:is(#board,.hero-comfort-board){background:#ded3e8;padding:9px;gap:8px;border-radius:20px;box-shadow:0 8px 0 #c9bcd6,0 20px 45px #53416512}.cell{border-radius:13px;border:0;--tone:#efe6f7;background:var(--tone);overflow:hidden}.cell:nth-child(3n+2){--tone:#f8e8df}.cell:nth-child(3n){--tone:#e4eee7}.cell h2{background:transparent;color:#746081;font-size:12px;height:30px;min-height:30px;font-weight:700;padding:8px 3px}.reel{background:var(--tone);border-radius:0!important;padding:0;transform:none!important}.band{background:#ffffffa8;border-color:#c4b3d255}.option{color:#917f9e;font-size:13px;line-height:1.4}.option.center{color:#40344d;font-weight:700}.veil{background:linear-gradient(var(--tone),transparent 25%,transparent 75%,var(--tone))}.state-label{color:#80738c;background:transparent;font-size:9px;height:18px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px 4px}.cell.landed{animation:land .32s ease}.toolbar{margin:21px 0 9px;display:flex;align-items:center;justify-content:space-between;font-size:11px}.toolbar button{font-size:11px}.clear-art{height:240px;position:relative}.clear-art img{width:230px;height:230px;animation:float 4s ease-in-out infinite}.clear-art span{position:absolute;color:#bf9d5c;font-size:50px;top:10px;right:25%}#interlude{text-align:center;padding-top:25px}#collected{display:flex;gap:10px;justify-content:center;margin:25px 0}.gem{padding:9px 15px;background:#f0e8fa;border-radius:25px;font-size:12px}.gem.empty{opacity:.3}#pause{display:block;margin:12px auto}dialog{background:#fcfaf6;color:var(--ink);border:1px solid #dccde8;border-radius:24px;width:min(710px,calc(100% - 24px));max-height:92dvh;padding:26px;box-shadow:0 25px 90px #40304b30;overflow:auto}dialog::backdrop{background:#32244080;backdrop-filter:blur(5px)}#dialogQuestion{border-bottom:3px solid #decef0;padding-bottom:16px}#quote{white-space:normal;font-size:16px;line-height:1.9;margin:15px 0 22px}.dialog-actions{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.dialog-actions button{font-size:14px}.mask-card{background:#fffdf9;border:1px solid var(--edge);border-radius:24px;padding:24px;text-align:center;animation:arrive .6s both}.mask-card img{height:140px;width:140px}.mask-card h2{font-size:32px;margin:9px 0}.mask-card small{color:var(--accent)}#maskCards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:25px 0}.inner-symbol{height:140px;display:grid;place-items:center;color:#a083be;font-size:85px}.result-block{margin:28px 0;padding:20px;background:#ffffff8a;border-radius:20px;border:1px solid var(--edge)}.scene-row{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center;border-bottom:1px solid var(--edge);padding:13px 0}.scene-row strong{font-size:13px}.scene-row p{font-size:12px;margin:4px 0}.scene-row button{font-size:11px;min-height:35px;padding:6px 10px}.axis-row{margin:14px 0;font-size:12px}.axis-caption{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.axis-line{height:8px;background:linear-gradient(90deg,#aec9c8,#e2dce5,#c9a7d5);border-radius:8px;position:relative;margin:9px 0}.axis-line:before{content:'';position:absolute;left:50%;top:-2px;height:12px;border-left:1px solid white}.axis-dot{position:absolute;top:-3px;width:14px;height:14px;background:#715795;border:2px solid white;border-radius:50%;transform:translateX(-50%)}#insights{display:grid;gap:9px}#insights label{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--edge);border-radius:12px;cursor:pointer;font-size:13px}#insights label:has(input:checked){background:#eee4f8;border-color:#b295cd}input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px}select{font:inherit;max-width:100%;margin:8px;padding:8px;border:1px solid var(--edge);border-radius:8px}#rankings{display:grid;grid-template-columns:1fr 1fr;gap:15px;font-size:12px}#rankings p{display:flex;justify-content:space-between;border-bottom:1px solid var(--edge)}.result-actions{display:grid;gap:10px;margin:25px 0}#notice{font-size:12px;color:#916537}footer{display:flex;justify-content:space-between;align-items:center;font-size:10px;margin-top:30px;color:var(--muted)}#effects{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}#partial{margin-top:12px}@keyframes float{50%{transform:translateY(-8px)}}@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes land{50%{transform:translateY(3px);filter:brightness(1.1)}}@media(max-width:550px){main{padding:15px 14px 25px}.brand{margin-bottom:24px}.welcome-art{height:240px}.hero-beast{height:230px;width:230px}.chapter-heading{gap:8px}.chapter-heading .beast{width:56px;height:56px}:is(#board,.hero-comfort-board){gap:5px;padding:6px}.cell h2{font-size:10px}.option{font-size:11px;padding:0 5px}:root{--row:65px}#question,#dialogQuestion{font-size:28px}#quote{font-size:14px;line-height:1.8}dialog{padding:19px}.dialog-actions{gap:6px}.dialog-actions button{padding:12px;font-size:12px}.mask-card{padding:16px 10px}.mask-card h2{font-size:25px}.mask-card img{width:110px;height:110px}.inner-symbol{height:110px}.result-block{padding:15px}.chapter-card{padding:13px}.chapter-card img{width:77px;height:77px}.chapter-card h2{font-size:19px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:550px){:root{--row:49px}.cell h2{height:25px;min-height:25px;padding:6px 2px}.state-label{height:14px;min-height:14px;font-size:8px;line-height:10px}.toolbar{margin-top:17px}.chapter-heading p{font-size:11px}.progress-track{margin:10px 0 18px}#context{margin-bottom:10px}.brand{margin-bottom:18px}}
.brand>div{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.brand .chat-entry{padding:7px 10px;border:1px solid var(--edge);border-radius:13px;background:#ffffffbb;font-size:11px;font-weight:700;letter-spacing:0;text-decoration:none}

.mirror-group>h2{margin-bottom:0}.mirror-group>h2 small,#heroCards h2 small{font-size:11px;letter-spacing:.12em;color:var(--accent)}.mirror-group>.small{margin:6px 0 15px}.mirror-pick{position:relative;margin:12px 0;padding:17px}.mirror-pick img,.mirror-pick .inner-symbol{height:95px;width:95px;margin:auto}.mirror-pick .inner-symbol{font-size:60px}.mirror-pick h3{font-size:24px;margin:5px 0}.rank-label{position:absolute;top:12px;left:14px;color:var(--accent);font-size:13px;font-weight:700}.four-mirrors{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:20px 0}.four-mirrors span{background:#ede5f5;border-radius:12px;padding:10px;text-align:center;font-size:10px}.four-mirrors strong{display:block;font-size:13px;margin-top:5px}.hero-pick{background:linear-gradient(135deg,#f4edf9,#fff9ec);border:1px solid #dfd1e8;border-radius:18px;padding:22px;margin:16px 0}.hero-pick h3{font-size:28px;margin:10px 0}.hero-pick p{font-size:14px}.hero-pick blockquote{margin:20px 0 5px;padding-left:15px;border-left:3px solid #baa0d1;font-size:17px;font-weight:700}.hero-pick details{margin-bottom:0;padding-bottom:0}@media(max-width:550px){.mirror-pick{padding:14px 8px}.mirror-pick h3{font-size:22px}.four-mirrors{grid-template-columns:repeat(2,1fr)}.hero-pick{padding:17px}.hero-pick h3{font-size:25px}}

.bat-creature{font-size:100px;text-align:center;animation:batArrival 900ms ease-out}.bat-answer{background:#fffaf4;border:1px solid #d7c5e8;border-radius:20px;padding:20px;margin:18px 0}.bat-answer h2{font-size:1.35rem;color:#694390}.bat-answer p{line-height:1.8}#bat fieldset{border:0;margin:20px 0;padding:0}#bat legend{font-weight:700;margin-bottom:12px}#bat label{display:block;padding:14px;border:1px solid #d7c5e8;border-radius:12px;margin:8px 0;cursor:pointer}#bat label:has(input:checked){background:#eee2fa;border-color:#7856ae}#bat input{margin-right:10px}#bat h1{font-size:clamp(2rem,7vw,3.4rem)}@keyframes batArrival{from{transform:translateY(-100px) scale(.3);opacity:0}to{transform:none;opacity:1}}@media(prefers-reduced-motion:reduce){.bat-creature{animation:none}}

#chapterMap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.area-card{display:flex!important;flex-direction:column;text-align:center;position:relative;padding:20px 12px!important;margin:0!important;min-width:0}.area-card .beast{width:100px;height:100px;object-fit:contain}.area-card h2{font-size:1.65rem;margin:8px 0}.area-card p{margin:5px 0}.area-card .seal{position:absolute;right:12px;top:10px}.area-card.selected{border:2px solid #7856ae;background:#f3eafa}.area-card:disabled{opacity:.45}.area-card.done{border-color:#ae7040}#areaCount{font-weight:bold;color:#7856ae}@media(max-width:650px){#chapterMap{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.area-card .beast{width:74px;height:74px}.area-card .eyebrow{font-size:.66rem}.area-card .small{font-size:.76rem}}

.account-actions,#shareLinks{display:flex;gap:14px;flex-wrap:wrap;align-items:center}#shareLinks[hidden]{display:none}#shareLinks a{padding:12px 20px;border-radius:24px;background:#eee2fa;color:#423057}#shareUrl{width:100%;min-width:0}#shareDialog{max-height:90dvh;overflow:auto}#sharePreview{line-height:1.8}

/* Original transparent animal artwork: keep its paper colors intact. */
.beast{mix-blend-mode:normal}
.bat-creature img{display:block;width:clamp(160px,38vw,240px);height:auto;aspect-ratio:1;object-fit:contain;margin:0 auto}
/* Keep every scene prompt and its confirmation prompt prominent and consistent. */
#question,#dialogQuestion{font-size:clamp(31px,5.2vw,45px);font-weight:900}
@media(max-width:550px){#question,#dialogQuestion{font-size:32px;font-weight:900}}
.scene-context{font-size:13px;color:var(--muted);line-height:1.85;margin:8px 0 18px}