@font-face{font-family:Cinzel;font-weight:400;src:url(assets/fonts/cinzel-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Cinzel;font-weight:700;src:url(assets/fonts/cinzel-latin-700-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Cormorant;font-weight:500;src:url(assets/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Cormorant;font-weight:500;font-style:italic;src:url(assets/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:Cormorant;font-weight:600;src:url(assets/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2");font-display:swap}
:root{--p:#9b5cff;--p2:#cdb0ff;--ink:#efe8ff;--bg:#07040d;--panel:rgba(12,7,24,.86)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#000;color:var(--ink);overflow:hidden;font-family:Cormorant,Georgia,serif}
.stage{position:fixed;inset:0;background:var(--bg);overflow:hidden;user-select:none;-webkit-user-select:none;cursor:pointer}
.bg{position:absolute;inset:-2%;background-size:cover;background-position:center;opacity:0;transition:opacity 1.3s ease;transform-origin:var(--o,50% 50%)}
.bg.show{opacity:1}
.kb-in.show{animation:kbin 34s ease-out forwards}.kb-out.show{animation:kbout 34s ease-out forwards}
.kb-l.show{animation:kbl 34s linear forwards}.kb-r.show{animation:kbr 34s linear forwards}
@keyframes kbin{from{transform:scale(1)}to{transform:scale(1.16)}}
@keyframes kbout{from{transform:scale(1.18)}to{transform:scale(1)}}
@keyframes kbl{from{transform:scale(1.12) translateX(2%)}to{transform:scale(1.12) translateX(-2%)}}
@keyframes kbr{from{transform:scale(1.12) translateX(-2%)}to{transform:scale(1.12) translateX(2%)}}
#embers{z-index:3;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.vig{z-index:3;position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,transparent 35%,rgba(5,2,12,.75) 100%),linear-gradient(to top,rgba(5,2,12,.92) 0,rgba(5,2,12,0) 38%)}
.flash{z-index:7;position:absolute;inset:0;background:#e9dcff;opacity:0;pointer-events:none}
.flash.go{animation:fl .7s ease-out}@keyframes fl{0%{opacity:.85}100%{opacity:0}}
.darkfx{z-index:7;position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .45s}.darkfx.on{opacity:1}
.stage.shake{animation:sh .5s}@keyframes sh{20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-5px,3px)}80%{transform:translate(3px,-2px)}}
.hidden{display:none!important}
.hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:6px;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));z-index:5;background:linear-gradient(rgba(5,2,12,.7),transparent)}
.hud .sp{flex:1}
.chap-label{font:400 12px Cinzel,serif;letter-spacing:.14em;color:var(--p2);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50vw}
.hbtn{font:700 11px Cinzel,serif;letter-spacing:.12em;color:var(--p2);background:rgba(20,10,40,.6);border:1px solid rgba(155,92,255,.45);border-radius:4px;padding:6px 9px;cursor:pointer}
.hbtn:hover,.hbtn.on{background:var(--p);color:#fff}
.textbox{position:absolute;left:50%;bottom:max(3vh,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(980px,94vw);min-height:150px;padding:30px 30px 24px;background:var(--panel);border:1px solid rgba(155,92,255,.5);border-radius:6px;box-shadow:0 0 40px rgba(115,50,220,.28),inset 0 0 30px rgba(0,0,0,.5);z-index:4;backdrop-filter:blur(3px)}
.speaker{position:absolute;top:-15px;left:22px;font:700 15px Cinzel,serif;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,#5a2bb0,#8a4dff);padding:4px 16px;border-radius:3px;box-shadow:0 0 14px rgba(140,80,255,.5)}
#text{font:500 clamp(19px,2.5vw,26px)/1.5 Cormorant,Georgia,serif;min-height:4.5em}
#text.narr{font-style:italic;color:#e3d9f7}
#text.say{font-weight:600;color:#fff}
.more{position:absolute;right:18px;bottom:8px;color:var(--p);opacity:0;font-size:14px}
.more.on{opacity:1;animation:bl 1.1s infinite}@keyframes bl{50%{opacity:.15}}
.choices{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,92vw);display:none;flex-direction:column;gap:12px;z-index:6}
.choices.on{display:flex}
.choice{display:flex;gap:14px;align-items:center;text-align:left;font:600 clamp(18px,2.3vw,23px)/1.3 Cormorant,Georgia,serif;color:#fff;background:rgba(14,8,30,.9);border:1px solid rgba(155,92,255,.6);border-radius:6px;padding:15px 20px;cursor:pointer;box-shadow:0 0 22px rgba(100,40,200,.25);transition:.15s}
.choice:hover{background:#2a1456;border-color:#c9a0ff;transform:translateX(5px)}
.choice .num{font:700 14px Cinzel,serif;color:var(--p);border:1px solid var(--p);border-radius:50%;min-width:26px;height:26px;display:grid;place-items:center}
.choice.locked{opacity:.45;cursor:not-allowed;font-style:italic}.choice.locked:hover{transform:none;background:rgba(14,8,30,.9)}
.overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:8;background:rgba(5,2,12,.86);text-align:center;padding:20px;overflow:auto}
.overlay.on{display:flex;animation:fi .6s}@keyframes fi{from{opacity:0}}
#card{background:radial-gradient(circle,rgba(40,15,80,.8),#05020c 75%)}
#card2{background:rgba(5,2,12,.93)}
.title{background:linear-gradient(rgba(5,2,12,.55),rgba(5,2,12,.8));z-index:9}
.cc,.tbox{max-width:640px;width:100%;margin:auto}
.kicker{font:400 13px Cinzel,serif;letter-spacing:.35em;color:var(--p2);margin-bottom:14px}
h1,h2{font-family:Cinzel,serif;font-weight:700;margin:0 0 12px;text-shadow:0 0 24px rgba(155,92,255,.7);line-height:1.15}
h1{font-size:clamp(34px,7vw,64px)}h2{font-size:clamp(26px,5vw,44px)}
.sub,.song{font:italic 500 20px Cormorant,serif;color:var(--p2);margin-bottom:26px}
.hint{margin-top:22px;font:500 15px Cormorant,serif;opacity:.65}
.btn{display:block;width:min(360px,100%);margin:10px auto;padding:13px 18px;font:700 14px Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#fff;background:linear-gradient(90deg,#4a1fa0,#7b3df0);border:1px solid #b58cff;border-radius:5px;cursor:pointer;box-shadow:0 0 20px rgba(120,60,240,.4)}
.btn:hover{filter:brightness(1.25)}
.btn.ghost{background:transparent;color:var(--p2);box-shadow:none;border-color:rgba(155,92,255,.5)}
.btn.big{font-size:16px;padding:17px 18px;background:linear-gradient(90deg,#7b3df0,#c13fe0)}
.cta p,.end .q{font:500 21px/1.45 Cormorant,serif;margin:0 auto 22px;max-width:520px}
.end .q{font-style:italic}.stats,.found{font:400 13px Cinzel,serif;letter-spacing:.2em;color:var(--p2);margin:6px 0}.found{margin-bottom:22px}
.letter{max-width:560px;margin:auto;background:#d8cdb0;color:#2a1f12;padding:34px 30px 24px;border-radius:3px;box-shadow:0 0 60px #000;transform:rotate(-.6deg)}
.letter pre{white-space:pre-wrap;text-align:left;margin:0 0 18px;font:600 clamp(17px,2.2vw,21px)/1.45 Cormorant,serif}
.letter .btn{color:#2a1f12;border-color:#2a1f12;background:transparent;box-shadow:none}
.menu{z-index:12}
.mbox{width:min(440px,100%);margin:auto;background:#0d0720;border:1px solid var(--p);border-radius:8px;padding:24px;box-shadow:0 0 50px rgba(110,50,220,.4);cursor:default}
.mbox h3{font:700 20px Cinzel,serif;letter-spacing:.2em;margin:0 0 16px;text-align:center;color:var(--p2)}
.row{display:flex;justify-content:space-between;align-items:center;margin:12px 4px;font:600 19px Cormorant,serif}
.row select,.row input[type=range]{background:#1b0f35;color:#fff;border:1px solid var(--p);border-radius:4px;padding:5px;font:inherit}
.row input[type=checkbox]{width:20px;height:20px;accent-color:#8a4dff}
.chl{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;max-height:55vh;overflow:auto}
.chap{text-align:left;font:600 19px Cormorant,serif;color:#fff;background:#1b0f35;border:1px solid rgba(155,92,255,.5);border-radius:5px;padding:10px 14px;cursor:pointer}
.chap b{font-family:Cinzel,serif;color:var(--p);margin-right:8px}.chap:hover:not(:disabled){background:#33196b}
.chap:disabled,.chap.dim{opacity:.4;cursor:default}
@media (max-width:640px){.textbox{padding:26px 18px 20px;min-height:140px}.hbtn{padding:6px 7px;font-size:10px}.chap-label{font-size:10px}.choices{top:44%}}
@media (max-height:520px){#text{font-size:17px;min-height:3.4em}.textbox{min-height:100px;padding:22px 20px 14px}}
@media (prefers-reduced-motion:reduce){.bg{animation:none!important}}