*{box-sizing:border-box}html,body{margin:0;height:100%;background:#1c3a1a;color:#f4f8ea;font-family:system-ui,-apple-system,Segoe UI,sans-serif}#app{position:relative;height:100%;overflow:hidden}#stage{display:block;width:100%;height:100%;touch-action:none}.screen{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;padding:1rem;text-align:center;overflow-y:auto;background:radial-gradient(ellipse at center,#08180a1f,#06120880)}.screen[hidden]{display:none}.card{display:grid;gap:.7rem;justify-items:center;max-width:38rem;padding:1.4rem 1.5rem;background:#0a1a0ce0;border:1px solid rgba(184,224,90,.35);border-radius:1.2rem;box-shadow:0 18px 60px #00000073}.eyebrow{margin:0;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:#c9ea78}h1{margin:0;font-size:clamp(2.4rem,9vw,4.6rem);line-height:1;letter-spacing:-.02em}h2{margin:0;font-size:clamp(1.8rem,6vw,2.8rem);line-height:1.1}.lede{margin:0;max-width:34rem;color:#e1edcf}.hint{margin:0;font-size:.82rem;color:#bcd0a4;max-width:34rem;line-height:1.45}.primary,.ghost{padding:.7rem 1.6rem;border-radius:999px;font:inherit;font-weight:700;cursor:pointer}.primary{border:1px solid #c9ea78;background:#c9ea78;color:#14260a}.ghost{border:1px solid #a9c28f;background:transparent;color:#e8f2d6}.row{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}.stars{margin:0;font-size:2rem;letter-spacing:.25em;color:#ffd266}.score-line{margin:0;font-weight:700}#levels{display:flex;gap:.55rem;flex-wrap:wrap;justify-content:center}#levels button{display:grid;gap:.15rem;min-width:7.6rem;padding:.55rem .9rem;border-radius:.9rem;border:1px solid #4c6a3a;background:#142c16cc;color:#f4f8ea;cursor:pointer;font:inherit}#levels button[aria-checked=true]{border-color:#c9ea78;background:#c9ea782e;box-shadow:0 0 0 1px #c9ea78 inset}.lv-name{font-weight:700}.lv-meta{font-size:.74rem;color:#d3e3bc}#hud{position:absolute;inset:0;z-index:4;pointer-events:none;display:flex;flex-direction:column;gap:.4rem;padding:.6rem .7rem}#hud[hidden]{display:none}.hud-top{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;align-items:center}.hud-top span,#sound-btn{background:#08160ad1;border:1px solid rgba(184,224,90,.4);border-radius:999px;padding:.22rem .7rem;font-size:.8rem;color:#f4f8ea}.hud-top span.warn{color:#ffc27a;border-color:#ffb060;font-weight:700}.hud-top span.good{color:#d9f58a;border-color:#c9ea78}#sound-btn{pointer-events:auto;cursor:pointer;font-family:inherit}#bar{height:8px;background:#00000080;border-radius:999px;overflow:hidden}#bar-fill{height:100%;width:0;background:linear-gradient(90deg,#d9c25a,#f5e9b8);transition:width .2s}#banner{align-self:center;margin:0;padding:.4rem 1rem;border-radius:999px;font-size:.86rem;font-weight:700;text-align:center;background:#243c78f0;border:1px solid #a8c8ff;color:#fff;max-width:94vw}#banner.rock{background:#8c3214f0;border-color:#ffd45a}#banner[hidden]{display:none}#banner.pulse{animation:pulse .7s ease-in-out infinite alternate}@keyframes pulse{to{transform:scale(1.04)}}#hud-status{margin:0;align-self:center;text-align:center;font-size:.82rem;color:#f4f8ea;background:#08160a99;border-radius:999px;padding:0 .7rem;min-height:1.2em}#hud-status:empty{display:none}.touch-controls{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px));pointer-events:none}.touch-controls[hidden]{display:none}#stick{position:relative;width:132px;height:132px;border-radius:50%;background:#08160a8c;border:2px solid rgba(201,234,120,.7);pointer-events:auto;touch-action:none}#knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#c9ea78d9}#tarp-btn{pointer-events:auto;touch-action:manipulation;width:84px;height:84px;border-radius:50%;border:2px solid #a8c8ff;background:#243c78d9;color:#fff;font:inherit;font-weight:800;cursor:pointer}#tarp-btn:disabled{opacity:.45}button:focus-visible{outline:2px solid #ffd45a;outline-offset:3px}@media(prefers-reduced-motion:reduce){#banner.pulse{animation:none}#bar-fill{transition:none}}@media(max-width:480px){.card{padding:1.1rem 1rem}#levels button{min-width:6.4rem}}
