:root{--night: #060A22;--navy: #0E1440;--gold: #FFC94D;--cream: #FFF4DD;--soft: #CDD1F2;--cyan: #3FD9E8}*{box-sizing:border-box}html,body{margin:0;background:var(--night);color:var(--cream);font-family:Nuni,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}html,body{height:100%;overflow:hidden;overscroll-behavior:none}.app{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 30%,#121a52,var(--night) 72%)}.app.hidden{display:none}.stagecell{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;place-content:center;overflow:hidden}.app:not(.wide) .stagecell{place-content:start center;padding-top:env(safe-area-inset-top,0px)}.frame{position:relative;flex:none;overflow:hidden;background:var(--night);touch-action:none}.topbar{position:absolute;left:50%;transform:translate(-50%);top:calc(env(safe-area-inset-top,0px) + 10px);width:min(92vw,580px);z-index:3;display:grid;gap:6px;padding:8px 10px;border-radius:14px;background:#060a228c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.chapters{display:flex;gap:6px}.chap{flex:1;height:7px;padding:0;border:0;border-radius:4px;background:#cdd1f240;position:relative;overflow:hidden}.chap i{position:absolute;left:0;top:0;bottom:0;background:var(--gold)}.chap.on{box-shadow:0 0 0 2px #ffc94d8c}.chap:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.chaptitle{font:900 11px Nuni;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);text-align:center}.bubble{position:absolute;left:50%;transform:translate(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 72px);width:min(92vw,580px);z-index:3;background:#fff;color:#1b2050;border-radius:24px;padding:14px 18px 16px;box-shadow:0 18px 50px #00000073;font:800 clamp(18px,4.6vw,24px)/1.42 Nuni;max-height:34vh;overflow-y:auto;animation:bin .35s ease}.bubble:before{content:"";position:absolute;left:22%;top:-15px;border:16px solid transparent;border-bottom-color:#fff;border-top:0}.bubble .who{display:block;font:900 11px Nuni;letter-spacing:.14em;color:#8e95c8;margin-bottom:2px}@keyframes bin{0%{opacity:0;transform:translate(-50%,10px)}}.w{border-radius:7px;padding:0 2px;margin:0 -2px;color:#b7bad6;transition:color .12s,background .12s}.w.done{color:#1b2050}.w.now{color:#1b2050;background:linear-gradient(transparent 8%,var(--gold) 8%,var(--gold) 94%,transparent 94%)}.bubble.turn{background:#fff8e1;box-shadow:0 0 0 4px var(--gold),0 18px 50px #00000073;animation:turnp 1.6s ease-in-out infinite}.bubble.turn:before{border-bottom-color:#fff8e1}.bubble.turn .who{color:#c27c00}.bubble.turn b{color:#9a5b00}@keyframes turnp{50%{box-shadow:0 0 0 8px #ffc94d8c,0 18px 50px #00000073}}.skipg{display:block;margin-top:4px;border:0;background:none;padding:0;font:800 13px Nuni;color:#8e95c8;text-decoration:underline}.frame .gatehint{display:none}.ctl{position:absolute;left:50%;transform:translate(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 14px);display:flex;gap:8px;z-index:3}.cb{background:#0a0f30e6;border:1px solid rgba(205,209,242,.25);color:var(--soft);font:900 14px Nuni;padding:11px 15px;border-radius:999px;white-space:nowrap}.cb:disabled{opacity:.4}.cb.on{color:var(--gold);border-color:#ffc94d99}.cb.off{opacity:.75}.cb.next{background:var(--gold);color:var(--night);border-color:var(--gold);min-width:112px}.cb.next.ready{animation:nudge 1.6s ease-in-out infinite}@keyframes nudge{0%,to{box-shadow:0 0 #ffc94d99}50%{box-shadow:0 0 0 9px #ffc94d00}}.cb:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}@media(max-width:380px){.cb{padding:10px 11px;font-size:13px}.cb.next{min-width:92px}}@media(prefers-reduced-motion:reduce){.bubble,.bubble.turn,.cb.next.ready{animation:none}}.gate{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer}.ring{position:absolute;width:0;height:0}.ring i{position:absolute;left:-46px;top:-46px;width:92px;height:92px;border-radius:50%;border:4px solid var(--gold);animation:ring 1.4s ease-out infinite}.ring i+i{animation-delay:.7s}@keyframes ring{0%{transform:scale(.5);opacity:1}to{transform:scale(2.2);opacity:0}}.glow{position:absolute;border-radius:16px;box-shadow:0 0 0 3px var(--gold),0 0 40px 10px #ffc94d8c;animation:glow 1.2s ease-in-out infinite alternate;pointer-events:none}@keyframes glow{0%{opacity:.45}to{opacity:1}}.foil{position:absolute;border-radius:50%;touch-action:none;cursor:grab;transition:opacity .18s;box-shadow:0 0 0 4px #ffeca0e6,0 0 50px #ffc94d99}.gatehint{position:absolute;left:50%;bottom:4%;transform:translate(-50%);width:min(88%,380px);padding:12px 16px 14px;border-radius:18px;background:#060a22e0;border:2px solid var(--gold);text-align:center;animation:rise .35s ease-out}.gatehint.top{bottom:auto;top:4%}.gatehint b{display:block;font:800 22px Bric;color:var(--gold)}.gatehint span{display:block;font:800 14px Nuni;color:var(--soft);margin-top:2px}.gatehint .skip{display:block;margin:6px auto 0;border:0;background:none;color:#cdd1f28c;font:800 12px Nuni;text-decoration:underline}@keyframes rise{0%{transform:translate(-50%,12px);opacity:0}}.hotspot{position:absolute;border:0;background:transparent;border-radius:16px}.hotspot:focus-visible{outline:3px solid var(--gold)}.start{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:grid;place-items:center;padding:20px 16px;background:linear-gradient(#060a228c,#060a22eb 55%);overflow-y:auto}.startin{width:min(100%,420px);text-align:center}.kicker{font:900 12px Nuni;letter-spacing:.18em;color:var(--gold)}.start h1,.read h1{font:800 clamp(28px,7.5vw,40px)/1.08 Bric;margin:10px 0;color:var(--cream)}.sub{font:700 16px/1.4 Nuni;color:var(--soft);margin:0 0 20px}.pick{display:block;width:100%;margin:10px 0;padding:14px 18px;border-radius:18px;border:2px solid rgba(255,201,77,.45);background:#0e1440d9;text-align:left}.pick b{display:block;font:800 22px Bric;color:var(--cream)}.pick span{display:block;font:700 14px Nuni;color:var(--soft);margin-top:2px}.pick.main{background:var(--gold);border-color:var(--gold)}.pick.main b,.pick.main span{color:var(--night)}.end{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;background:#060a22e6;animation:fade .5s}.end>img{width:46%;border-radius:14px;box-shadow:0 0 0 4px #f5c95a,0 20px 40px #0009;transform:rotate(-3deg)}.endt{font:800 24px Bric;color:var(--gold);margin-top:8px}@keyframes fade{0%{opacity:0}}.cta{width:min(100%,360px);padding:15px;border:0;border-radius:16px;background:var(--gold);color:var(--night);font:900 17px Nuni}.ghost{width:min(100%,360px);padding:13px;border-radius:16px;border:2px solid rgba(255,201,77,.45);background:transparent;color:var(--cream);font:800 15px Nuni}.link{border:0;background:none;color:var(--soft);font:800 14px Nuni;text-decoration:underline}.read{position:fixed;top:0;right:0;bottom:0;left:0;overflow-y:auto;padding:32px max(16px,calc(50% - 320px)) 80px}.read h2{font:800 24px Bric;color:var(--gold);margin:34px 0 8px}.read p{font:600 19px/1.6 Nuni;color:var(--cream);margin:0 0 14px}.read .ghost,.read .cta{display:block;margin:14px auto}.readcard{display:block;width:60%;margin:36px auto 10px}.readcard>img{display:block;width:100%;border-radius:14px;box-shadow:0 0 0 4px #f5c95a}.readcard .endpiece{display:flex;justify-content:center}.sheetbg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#0000008c;display:flex;align-items:flex-end;justify-content:center}.sheet{position:relative;width:min(100%,520px);max-height:90vh;overflow:auto;padding:26px 18px 30px;border-radius:24px 24px 0 0;background:var(--navy);border-top:3px solid var(--gold);text-align:center;animation:up .3s ease-out}@keyframes up{0%{transform:translateY(40px);opacity:0}}.sheett{font:800 28px/1.1 Bric;color:var(--cream)}.sheett span{color:var(--gold)}.sheet p{font:700 15px Nuni;color:var(--soft);margin:8px 0 14px}.sheet .x{position:absolute;right:10px;top:8px;width:36px;height:36px;border:0;background:none;font-size:28px;color:var(--soft)}.bh{min-height:120px}.bhnote{font:700 14px Nuni;color:var(--soft);margin:0}.dbg{position:fixed;left:8px;right:8px;top:90px;z-index:50;padding:8px;background:#000c;color:#0f0;font:12px/1.3 ui-monospace,monospace;border-radius:8px}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:3}.hud>*{pointer-events:auto}.app.wide{background:var(--night)}.ambient{position:absolute;top:-80px;right:-80px;bottom:-80px;left:-80px;background:center / cover no-repeat;filter:blur(44px) brightness(.34) saturate(1.2);transition:background-image .8s}.app.wide .frame{border-radius:18px;box-shadow:0 30px 80px #0009,0 0 0 1px #ffc94d2e;transform:translate(calc(-1 * (var(--pw) + var(--gap)) / 2))}.app.wide .hud{inset:24px auto 24px calc(50% - (var(--fw) + var(--gap) + var(--pw)) / 2 + var(--fw) + var(--gap));width:var(--pw);display:flex;flex-direction:column;justify-content:center;gap:22px}.app.wide .topbar,.app.wide .bubble,.app.wide .ctl{position:relative;inset:auto;transform:none;width:100%}.app.wide .bubble{font-size:clamp(20px,1.5vw + 6px,27px);max-height:52vh;padding:20px 24px 22px;animation:binw .35s ease}.app.wide .bubble:before{left:-15px;top:34px;border:16px solid transparent;border-right-color:#fff;border-left:0}.app.wide .bubble.turn:before{border-right-color:#fff8e1;border-bottom-color:transparent}.app.wide .ctl{justify-content:flex-start;flex-wrap:wrap}@keyframes binw{0%{opacity:0;transform:translate(10px)}}.face{width:132px;height:132px;margin:0 auto 18px;border-radius:50%;padding:5px;background:linear-gradient(135deg,#FFE08A,var(--gold) 50%,#C98A12);box-shadow:0 14px 40px #00000080,0 0 60px #ffc94d40;animation:facebob 3.2s ease-in-out infinite}.face img{display:block;width:100%;height:100%;border-radius:50%}@keyframes facebob{50%{transform:translateY(-6px) rotate(-2deg)}}@media(min-width:900px){.face{width:160px;height:160px}.startin{width:min(100%,520px)}}@media(prefers-reduced-motion:reduce){.face{animation:none}}.choice{position:absolute;border:0;border-radius:18px;background:#ffc94d14;box-shadow:0 0 0 3px #ffc94dd9,0 0 30px #ffc94d80;cursor:pointer;animation:choicePulse 1.4s ease-in-out infinite}.choice:focus-visible{outline:3px solid #fff;outline-offset:3px}@keyframes choicePulse{50%{box-shadow:0 0 0 5px #ffc94d,0 0 44px #ffc94db3}}@media(prefers-reduced-motion:reduce){.choice{animation:none}}.makebg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;background:#0305128c;display:flex;align-items:flex-end;justify-content:center;padding:0 12px calc(env(safe-area-inset-bottom,0px) + 12px)}.make{position:relative;width:min(100%,560px);max-height:80vh;overflow:auto;background:#0a0d24f7;border:2px solid rgba(255,201,77,.6);border-radius:22px;padding:16px 16px 12px;color:#f3f1ff;font-family:Nuni,system-ui,sans-serif;box-shadow:0 20px 50px #0009}.mkcard{font:800 18px/1.3 Bric,system-ui,sans-serif;text-align:center;padding:10px 12px;border-radius:14px;background:#151a3e;margin-bottom:10px}.mkcard b{color:#ffc94d}.mkrow{margin-top:8px}.mklabel{font-weight:900;font-size:14px;letter-spacing:.04em;color:#cdd1f2;margin-bottom:6px}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{font:800 14px Nuni,system-ui,sans-serif;color:#f3f1ff;background:#232a5e;border:1px solid rgba(205,209,242,.3);border-radius:999px;padding:7px 12px;cursor:pointer}.chip.on{background:#ffc94d;color:#1b1606;border-color:#ffc94d}.chip.own{background:transparent;border-style:dashed}.owninput{display:flex;gap:6px;margin-top:8px}.owninput input{flex:1;min-width:0;font:700 15px Nuni,system-ui,sans-serif;padding:8px 12px;border-radius:12px;border:1px solid rgba(205,209,242,.4);background:#0b0f2c;color:#fff}.make .skip{display:block;margin:10px auto 0;background:none;border:0;color:#9aa0c8;font:700 13px Nuni,system-ui,sans-serif;text-decoration:underline;cursor:pointer}.endpiece{display:flex;justify-content:center;margin:0 auto 6px}.peel{position:absolute;z-index:5;border-radius:16px;cursor:grab;touch-action:none;transform-origin:0% 50%;background:linear-gradient(105deg,#e8eaee,#9ea3ac 30%,#d9dce2,#8a8f99 80%,#c9ccd3);box-shadow:0 10px 24px #00000059;display:flex;align-items:center;justify-content:center;text-align:center;font:800 18px/1.15 Bric,system-ui,sans-serif;color:#3a3f4a;transition:opacity .25s}.peel i{position:absolute;right:0;top:0;width:34px;height:34px;border-radius:0 16px;background:linear-gradient(225deg,#fff 0 45%,#7A808C 50%,transparent 52%);animation:lift 1.3s ease-in-out infinite}@keyframes lift{50%{width:46px;height:46px}}@media(prefers-reduced-motion:reduce){.peel i{animation:none}}
