:root{--ink:#0b0e1a;--paper:#f3ead8;--dim:#c3b9a4;--accent:#ffb3d1;--accent2:#7fe3d6;--edge:rgba(243,234,216,.22);--serif:"Iowan Old Style",Palatino,Georgia,serif;--sans:"Inter",system-ui,sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);overflow:hidden}#app{position:relative;height:100dvh;overflow:hidden}#stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(120% 90% at 50% 45%,transparent 50%,rgba(4,6,12,.55) 100%)}.hud{position:absolute;inset:0;z-index:4;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top)) clamp(12px,3vw,36px) 14px}.hud[hidden]{display:none}.hud-row{display:flex;gap:8px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}.hud-row--b{align-items:flex-end}.chip{background:#080b14c7;border:1px solid var(--edge);border-radius:10px;padding:6px 12px;min-width:72px;text-align:center}.chip b{display:block;font-size:1.05rem}.lab{display:block;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}.bar-wrap{display:flex;align-items:center;gap:10px;background:#080b14c7;border:1px solid var(--edge);border-radius:10px;padding:8px 12px}.bar{width:150px;height:10px;background:#ffffff24;border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .2s}.bar-wrap.low{border-color:#ff7a7a}.bar-wrap.low .bar i{background:#ff7a7a}.boons{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.boons span{font-size:.72rem;background:#080b14c7;border:1px solid var(--edge);border-radius:99px;padding:6px 10px}.boons span.ready{border-color:var(--accent2);color:var(--accent2)}#mute-btn{pointer-events:auto;padding:6px 12px;border-radius:99px;border:1px solid var(--accent2);background:#080b14c7;color:var(--accent2);cursor:pointer;font-size:.75rem}.banner{position:absolute;left:50%;top:18%;transform:translate(-50%);z-index:5;font-family:var(--serif);font-size:clamp(1.3rem,4.5vw,2.2rem);text-shadow:0 2px 18px #000,0 0 3px #000;opacity:0;transition:opacity .3s;pointer-events:none;text-align:center;width:min(90vw,40rem);margin:0}.banner.show{opacity:1}.warn-banner{position:absolute;left:50%;top:26%;transform:translate(-50%);z-index:5;margin:0;padding:6px 14px;border-radius:99px;background:#961818eb;border:1px solid #ffd45a;color:#fff;font-weight:700;font-size:.82rem;pointer-events:none;white-space:nowrap;animation:pulse .6s ease-in-out infinite alternate}.warn-banner[hidden]{display:none}@keyframes pulse{to{transform:translate(-50%) scale(1.05)}}.screen{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;background:linear-gradient(180deg,#04070ec7,#04070eed)}.screen[hidden]{display:none}.card{max-width:36rem;width:100%;margin:auto;background:#0c101cf0;border:1px solid var(--edge);border-radius:16px;padding:clamp(16px,4vw,30px);box-shadow:0 24px 60px #00000080;text-align:center}.eyebrow{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}h1,h2{font-family:var(--serif);margin:0 0 10px;font-size:clamp(2rem,7vw,3.4rem);line-height:1}.lede{color:var(--dim);line-height:1.55;margin:0 0 14px}.hint{margin:6px 0 12px;font-size:.78rem;color:var(--dim);line-height:1.45}.keys{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 16px;text-align:left}.keys div{background:#ffffff0f;border-radius:8px;padding:7px 10px}.keys dt{font-size:.72rem;font-weight:700}.keys dd{margin:2px 0 0;font-size:.72rem;color:var(--dim)}.primary{background:linear-gradient(135deg,var(--accent),#ff8fb5);color:#1a0b12;border:0;border-radius:99px;padding:13px 26px;font-weight:800;cursor:pointer;min-height:48px;font-size:1rem}.ghost{padding:13px 22px;border-radius:99px;border:1px solid #9a8e7a;background:transparent;color:var(--paper);font-weight:600;cursor:pointer;min-height:48px;font-size:1rem}#levels{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 6px}#levels button{display:grid;gap:2px;min-width:7.6rem;flex:1 1 7.6rem;padding:9px 10px;border-radius:12px;border:1px solid var(--edge);background:#ffffff0d;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:.72rem;color:var(--dim)}.stars{margin:0 0 8px;font-size:2rem;letter-spacing:.25em;color:#ffc46a}.score-line{margin:0 0 14px;font-weight:700}.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.touch{position:absolute;inset:auto 0 0;z-index:5;display:flex;justify-content:space-between;align-items:flex-end;padding:0 12px calc(12px + env(safe-area-inset-bottom));pointer-events:none}.touch[hidden]{display:none}.pad{display:flex;gap:8px;pointer-events:auto;align-items:center}.pad-col{display:grid;gap:8px}.pad-act{flex-wrap:wrap;justify-content:flex-end;max-width:150px}.pad button{width:52px;height:52px;border-radius:50%;background:#0a0e18d1;color:var(--paper);border:1px solid var(--edge);font-size:.82rem;touch-action:none;user-select:none;-webkit-user-select:none}.pad button.big{width:76px;height:76px;border-color:var(--accent);background:#ffb3d133;font-weight:700}.pad button:active,.pad button.on{background:#ffb3d166}.pad button:disabled{opacity:.4}button:focus-visible{outline:2px solid #ffd45a;outline-offset:3px}@media(max-width:640px){.keys{grid-template-columns:1fr}.bar{width:96px}.hud-row .chip{min-width:60px;padding:5px 8px}}@media(max-height:520px){.keys{display:none}.lede{margin-bottom:8px}}@media(prefers-reduced-motion:reduce){.warn-banner{animation:none}.banner,.bar i{transition:none}}@media(pointer:coarse){.hud{padding-bottom:150px}}