:root{color-scheme:dark;--bg: #07060b;--ink: #f4f1ea;--muted: #b7b0c4;--panel: #16131f;font-family:Avenir Next,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);overflow:hidden;overscroll-behavior:none}button,input{font:inherit}#app{height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.menu,.results{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;gap:14px;padding:24px 20px 28px;overflow:auto;background:radial-gradient(120% 70% at 50% 0%,#2a2140 0%,transparent 55%),var(--bg)}.menu h1,.results h1{margin:0;font-size:2.6rem;letter-spacing:-.04em}.menu p,.results p{margin:0;color:var(--muted);line-height:1.4}.action,.file{display:flex;align-items:center;justify-content:center;min-height:56px;border:0;border-radius:14px;background:#f4f1ea;color:#16131f;font-weight:700}.file{background:transparent;color:var(--ink);border:1px solid rgba(244,241,234,.35)}.file input{position:absolute;width:1px;height:1px;opacity:0}.notice{color:#ffd0d0}.hint{color:var(--muted);margin-top:-8px}.meter{height:6px;border-radius:999px;background:#f4f1ea29;overflow:hidden}.meter span{display:block;height:100%;width:0;border-radius:inherit;background:#ffe14a;transition:width .16s linear}.setting{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:8px}.setting legend{color:var(--muted);font-size:.85rem;padding:0}.choices{display:grid;grid-auto-flow:column;gap:8px}.choices button,.choice{min-height:48px;border-radius:12px;border:1px solid rgba(244,241,234,.35);background:transparent;color:var(--ink)}.choices button[aria-pressed=true]{background:#f4f1ea;color:#16131f;border-color:#f4f1ea;font-weight:700}.switch{display:flex;align-items:center;gap:12px;min-height:48px;color:var(--ink)}.switch input{width:22px;height:22px;accent-color:#f4f1ea}.prompt{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;background:var(--panel)}.prompt p{color:var(--ink)}.prompt-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.choice.ghost{color:var(--muted)}.stage{flex:1;min-height:0;display:flex;flex-direction:column;touch-action:none;user-select:none;-webkit-user-select:none}.hud{display:grid;grid-template-columns:72px 1fr auto;align-items:center;padding:8px 12px 0;min-height:48px}.tally{display:flex;flex-direction:column;align-items:flex-end}.hud strong{font-size:1.4rem;font-variant-numeric:tabular-nums}.judgement{min-height:1.2em;text-align:center;font-weight:800;letter-spacing:.08em;font-size:1.15rem}.judgement.pop{animation:pop .18s ease-out}.judgement.perfect{color:#fff6c2}.judgement.great{color:#9dffc4}.judgement.good{color:#9ec8ff}.judgement.miss{color:#ff8d8d}canvas{flex:1;width:100%;min-height:0;display:block;touch-action:none}.lanes{display:grid;grid-template-columns:repeat(var(--lanes, 5),1fr);gap:8px;padding:8px 10px 10px;height:104px}.lane{position:relative;border:0;border-radius:16px;background:color-mix(in srgb,var(--lane) 78%,#000);color:#140e08;touch-action:none;padding:0}.lane [data-haptic]{position:absolute;inset:0;z-index:1;border-radius:inherit;touch-action:manipulation}.lane [data-haptic] input{position:absolute;width:1px;height:1px;margin:0;padding:0;visibility:hidden;pointer-events:none}.lane.held{transform:translateY(2px);filter:brightness(1.25)}.lane.pulse{animation:lane-pulse .18s ease-out}.stage.flash-hit{animation:hit-flash .22s ease-out}.stage.flash-miss{animation:miss-flash .28s ease-out}.back{background:transparent;color:var(--muted);border:0;padding:8px 0;text-align:left}.stage{position:relative}.ready{position:absolute;left:0;right:0;top:22%;height:18%;z-index:2;display:flex;align-items:center;justify-content:center;margin:0;font-size:clamp(2.1rem,8vw,3.5rem);font-weight:800;letter-spacing:-.04em;pointer-events:none;text-shadow:0 10px 28px rgba(0,0,0,.55);animation:ready-in .35s ease-out}.ready[hidden]{display:none}@media(orientation:landscape){.stage{flex-direction:row}.hud{position:absolute;z-index:1;top:0;left:12px;right:30vw}.lanes{width:28vw;height:auto;grid-template-columns:1fr;grid-template-rows:repeat(var(--lanes, 5),1fr)}.ready{right:28vw}}@keyframes ready-in{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes pop{0%{transform:scale(1.45)}}@keyframes lane-pulse{0%{filter:brightness(1.8)}to{filter:brightness(1)}}@keyframes hit-flash{0%{box-shadow:inset 0 0 90px #fff6c261}}@keyframes miss-flash{0%{box-shadow:inset 0 0 110px #ff3c3c8c}}