:root{--ink: #0b0e1a;--paper: #f3ead8;--dim: #cfc5b0;--accent: #ffb3d1;--accent2: #7fe3d6;--gold: #ffd27a;--warn: #ff8f8f;--panel: rgba(11, 14, 26, .88);--edge: rgba(243, 234, 216, .3)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--ink);color:var(--paper);font-family:Inter,system-ui,sans-serif;overflow:hidden}#app{position:relative;height:100dvh;overflow:hidden}#stage{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}.screen{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:1rem;background:radial-gradient(ellipse at center,#0b0e1a8c,#05070ee6);overflow-y:auto}.screen[hidden]{display:none}.card{width:min(34rem,100%);max-height:100%;display:grid;gap:.7rem;text-align:center;padding:1.4rem 1.2rem;border-radius:1.2rem;background:var(--panel);border:1px solid var(--edge);box-shadow:0 20px 60px #00000080}.eyebrow{margin:0;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}h1{margin:0;font-family:Iowan Old Style,Palatino,Georgia,serif;font-size:clamp(2.6rem,10vw,4.6rem);line-height:1;letter-spacing:.02em}h2{margin:0;font-family:Iowan Old Style,Palatino,Georgia,serif;font-size:clamp(1.8rem,6vw,2.8rem);line-height:1.1}.lede{margin:0 auto;max-width:30rem;color:var(--paper)}.how{margin:0;padding:0;list-style:none;display:grid;gap:.3rem;text-align:left;font-size:.86rem;color:var(--dim)}.how b{color:var(--gold);font-weight:600}.hint{margin:0;font-size:.8rem;color:var(--dim)}.primary{justify-self:center;padding:.75rem 1.7rem;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}.primary:hover{background:#ffc8de}.ghost{padding:.75rem 1.4rem;border-radius:999px;border:1px solid var(--edge);background:transparent;color:var(--paper);font:inherit;font-weight:600;cursor:pointer}.ghost:hover{border-color:var(--paper)}.row{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}#levels{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}#levels button{display:grid;gap:.15rem;min-width:7.4rem;padding:.55rem .8rem;border-radius:.9rem;border:1px solid var(--edge);background:#f3ead80f;color:var(--paper);cursor:pointer;font:inherit}#levels button[aria-checked=true]{border-color:var(--accent);background:#ffb3d129;box-shadow:0 0 0 1px var(--accent) inset}.lv-name{font-weight:700}.lv-meta{font-size:.74rem;color:var(--dim)}.stars{margin:0;font-size:2rem;letter-spacing:.25em;color:var(--gold)}.score-line{margin:0;font-weight:700}#hud{position:absolute;inset:0;z-index:4;pointer-events:none;padding:.7rem clamp(.7rem,3vw,2rem);display:flex;flex-direction:column;gap:.5rem}#hud[hidden]{display:none}.hud-top{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.chip{background:var(--panel);border:1px solid var(--edge);border-radius:999px;padding:.25rem .7rem;font-size:.82rem;font-variant-numeric:tabular-nums}.chip.hot{color:var(--gold);border-color:var(--gold)}#mute-btn{pointer-events:auto;padding:.3rem .8rem;border-radius:999px;border:1px solid var(--accent2);background:var(--panel);color:var(--accent2);cursor:pointer;font:inherit;font-size:.8rem}.meters{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;max-width:30rem}.meter{display:grid;gap:.15rem}.mlab{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);text-shadow:0 1px 3px #000}.mtrack{height:10px;border-radius:6px;background:#05070ecc;border:1px solid var(--edge);overflow:hidden}.mtrack i{display:block;height:100%;width:100%;background:var(--gold);transition:width .15s}#string-fill{background:var(--accent2)}.mtrack i.low{background:var(--warn)}#banner{margin:.3rem auto 0;padding:.45rem 1rem;border-radius:999px;background:#781428eb;border:1px solid #ffb0b0;color:#fff;font-weight:700;font-size:.9rem;text-align:center;max-width:92vw;animation:pulse .7s ease-in-out infinite alternate}#banner[hidden]{display:none}#banner.gust{background:#14465aeb;border-color:var(--accent2)}@keyframes pulse{to{transform:scale(1.04)}}#touch{position:absolute;z-index:5;left:0;right:0;bottom:0;padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}#touch[hidden]{display:none}#touch button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;border:1px solid var(--accent);background:#0b0e1ab8;color:var(--paper);font:inherit;font-weight:700;border-radius:16px}.pad{display:grid;grid-template-columns:repeat(3,3.7rem);grid-template-rows:repeat(2,3.7rem);gap:.4rem}.pad button{font-size:1.2rem}.pad [data-k=up]{grid-column:2;grid-row:1}.pad [data-k=left]{grid-column:1;grid-row:2}.pad [data-k=down]{grid-column:2;grid-row:2}.pad [data-k=right]{grid-column:3;grid-row:2}#tug-btn{width:6rem;height:6rem;border-radius:50%;border-color:var(--gold);color:var(--gold);font-size:1.1rem}#tug-btn:disabled{opacity:.45}#touch button.on{background:var(--accent);color:var(--ink)}body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(120% 90% at 50% 40%,transparent 50%,rgba(4,6,12,.6))}@media(prefers-reduced-motion:reduce){#banner{animation:none}.mtrack i{transition:none}}@media(max-width:520px){.meters{grid-template-columns:1fr}.card{padding:1rem .9rem}.how{font-size:.8rem}}