:root{--accent:#ffb627;--ink:#2b1d4a;--paper:#fff8ea;--pink:#ff5d73}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#2b1d4a;overflow:hidden;overscroll-behavior:none}
body{font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}
#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#4a3577,#1d1333)}
#stage{position:relative;width:min(100vw,calc(100dvh * 9 / 16));height:min(100dvh,calc(100vw * 16 / 9));max-height:100dvh;overflow:hidden;box-shadow:0 0 40px rgba(0,0,0,.45);container-type:size;font-size:clamp(12px,4.4cqw,22px)}
@supports not (height:100dvh){#stage{width:min(100vw,calc(100vh * 9 / 16));height:min(100vh,calc(100vw * 16 / 9))}}
canvas{display:block;width:100%;height:100%;touch-action:none}
.hidden{display:none!important}
.panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;padding:1.2em 1.2em 4.2em;text-align:center;background:linear-gradient(180deg,rgba(43,29,74,.15),rgba(43,29,74,.55));animation:fade .25s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wordmark{display:flex;flex-direction:column;line-height:.86;font-weight:900;text-transform:uppercase;letter-spacing:.02em;filter:drop-shadow(0 .18em 0 #2b1d4a)}
.wordmark span{font-size:3.4em;-webkit-text-stroke:.07em #2b1d4a;paint-order:stroke fill}
.wm-1{color:#fff;transform:rotate(-4deg)}
.wm-2{color:var(--accent);transform:rotate(3deg) translateX(.4em);animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:rotate(3deg) translate(.4em,-.12em)}}
.tagline{margin:.4em 0 0;color:#fff;font-size:.95em;text-shadow:0 2px 0 #2b1d4a;max-width:18em}
.today{margin:0;font-weight:700;color:#2b1d4a;background:var(--paper);padding:.25em .8em;border-radius:99px;font-size:.85em}
.btns{display:flex;flex-direction:column;gap:.5em;width:min(15em,80%)}
.btn{font:inherit;font-weight:800;font-size:1.05em;padding:.7em 1em;border-radius:.9em;border:.14em solid #2b1d4a;background:var(--paper);color:#2b1d4a;box-shadow:0 .22em 0 #2b1d4a;cursor:pointer;transition:transform .08s}
.btn:active{transform:translateY(.15em);box-shadow:0 .07em 0 #2b1d4a}
.btn.primary{background:var(--accent)}
.btn.ghost{background:rgba(255,248,234,.75);font-size:.9em;padding:.5em 1em}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn:focus-visible,.icon-btn:focus-visible{outline:.18em solid #fff;outline-offset:.15em}
.status{margin:0;color:#fff;font-size:.85em;text-shadow:0 1px 0 #2b1d4a;max-width:19em}
.howto{background:rgba(255,248,234,.92);border-radius:.8em;padding:.4em .8em;max-width:19em;font-size:.8em;text-align:left;border:.12em solid #2b1d4a}
.howto summary{cursor:pointer;font-weight:800;text-align:center}
.howto p{margin:.4em 0}
kbd{background:#2b1d4a;color:#fff;border-radius:.3em;padding:0 .3em;font-size:.9em}
.fineprint{margin:0;color:#fff;opacity:.85;font-size:.7em}
#hud{position:absolute;top:calc(env(safe-area-inset-top,0px) + .5em);left:0;right:0;text-align:center;pointer-events:none}
#hud-score{font-size:3em;font-weight:900;color:#fff;-webkit-text-stroke:.06em #2b1d4a;paint-order:stroke fill;text-shadow:0 .08em 0 #2b1d4a}
#hud-tag{display:inline-block;font-size:.75em;font-weight:800;background:rgba(43,29,74,.75);color:#fff;padding:.15em .7em;border-radius:99px}
#ready-hint{position:absolute;left:0;right:0;top:58%;display:flex;flex-direction:column;align-items:center;gap:.3em;pointer-events:none}
.hint-pill{background:var(--paper);border:.12em solid #2b1d4a;border-radius:99px;padding:.35em 1em;font-weight:900;font-size:1.2em;animation:pulse 1s ease-in-out infinite}
#ready-hint small{color:#fff;text-shadow:0 1px 0 #2b1d4a;font-weight:700}
@keyframes pulse{50%{transform:scale(1.08)}}
.icon-btn{position:absolute;top:calc(env(safe-area-inset-top,0px) + .5em);right:.5em;z-index:5;width:2.4em;height:2.4em;border-radius:50%;border:.12em solid #2b1d4a;background:rgba(255,248,234,.9);font-size:1em;cursor:pointer;line-height:1}
#paused h2,#over h2{margin:0;font-size:2.2em;color:#fff;-webkit-text-stroke:.05em #2b1d4a;paint-order:stroke fill;text-shadow:0 .08em 0 #2b1d4a;font-weight:900}
.scorebox{display:flex;gap:.6em}
.scorebox>div{background:var(--paper);border:.14em solid #2b1d4a;border-radius:.9em;padding:.4em 1em;min-width:6em;box-shadow:0 .2em 0 #2b1d4a}
.lbl{display:block;font-size:.7em;font-weight:800;text-transform:uppercase;opacity:.75}
.big{display:block;font-size:2.2em;font-weight:900}
.newbest{margin:0;font-weight:900;color:var(--accent);text-shadow:0 2px 0 #2b1d4a;font-size:1.1em}
.quip{display:flex;align-items:center;gap:.5em;background:rgba(255,248,234,.94);border-radius:.9em;padding:.35em .7em;border:.12em solid #2b1d4a;max-width:19em;text-align:left}
.quip img{width:2.6em;height:auto;flex:none}
.quip p{margin:0;font-size:.85em;font-weight:700}
.station{position:absolute;left:.6em;right:.6em;bottom:calc(env(safe-area-inset-bottom,0px) + .6em);z-index:4;display:flex;align-items:center;justify-content:center;gap:.5em;background:rgba(255,248,234,.95);border:.12em solid #2b1d4a;border-radius:.8em;padding:.35em .6em;color:#2b1d4a;text-decoration:none;font-weight:800;font-size:.78em;box-shadow:0 .18em 0 #2b1d4a}
.station img{height:2.2em;width:auto;border-radius:.3em}
.station .tag{background:var(--pink);color:#fff;border-radius:99px;padding:0 .5em;font-size:.8em}
span.station{cursor:default}
.toast{position:absolute;left:50%;top:22%;transform:translateX(-50%);background:var(--paper);border:.12em solid #2b1d4a;border-radius:.8em;padding:.4em .9em;font-weight:800;font-size:.85em;z-index:6;max-width:85%;text-align:center;box-shadow:0 .18em 0 #2b1d4a;animation:fade .2s ease-out;pointer-events:none;display:flex;align-items:center;gap:.5em}
.toast img{width:2em;height:auto}
@media (prefers-reduced-motion:reduce){.wm-2,.hint-pill,.panel{animation:none}}
.levels{display:flex;gap:.3em;background:rgba(43,29,74,.75);padding:.25em;border-radius:99px}
.lvl{font:inherit;font-weight:800;font-size:.8em;padding:.35em .7em;border-radius:99px;border:0;background:transparent;color:#fff;cursor:pointer}
.lvl[aria-checked="true"]{background:var(--accent);color:#2b1d4a;box-shadow:inset 0 -.12em 0 rgba(43,29,74,.4)}
.lvl:focus-visible{outline:.15em solid #fff}
/* Challenge a Friend */
#title .friend-btns{gap:.15em}
#title .cta-friend,#over .cta-friend{font-family:inherit;font-size:1.05em;min-height:0;padding:.6em .8em;border:.14em solid #2b1d4a;box-shadow:0 .22em 0 #2b1d4a;border-radius:.9em;background:var(--pink)}
#title .cta-friend b,#over .cta-friend b{font-size:1.1em;font-weight:900;text-shadow:0 1px 0 rgba(43,29,74,.5)}
#title .cta-friend small,#over .cta-friend small{font-size:.72em}
.cta-code{color:#fff;font-family:inherit;font-size:.85em;background:rgba(43,29,74,.78);border-radius:99px;padding:.35em 1em;min-height:0;align-self:center}
.chal-line{margin:0;font-weight:900;color:#fff;background:var(--pink);border:.12em solid #2b1d4a;border-radius:.8em;padding:.25em .8em;font-size:1em}
.chal-img{width:4.5em;height:auto;filter:drop-shadow(0 .15em 0 #2b1d4a)}
#chal h2,#codein h2{margin:0;font-size:1.9em;color:#fff;-webkit-text-stroke:.05em #2b1d4a;paint-order:stroke fill;text-shadow:0 .08em 0 #2b1d4a;font-weight:900;line-height:1.05}
.chal-card{margin:0;background:var(--paper);border:.14em solid #2b1d4a;border-radius:.9em;padding:.6em .9em;font-weight:700;max-width:18em;box-shadow:0 .2em 0 #2b1d4a}
.code-input{font:900 1.5em ui-monospace,Menlo,Consolas,monospace;text-transform:uppercase;letter-spacing:.08em;text-align:center;width:min(11em,85%);padding:.35em .4em;border:.12em solid #2b1d4a;border-radius:.6em;background:#fff;color:#2b1d4a;-webkit-user-select:text;user-select:text}
.code-err{margin:0;background:#ffe1e6;color:#8a1530;border-radius:.6em;padding:.3em .7em;font-weight:700;font-size:.85em;max-width:19em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fs-link{-webkit-user-select:text;user-select:text}