:root{color:#e2e8f0;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#050816;font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:radial-gradient(circle at 50% -20%,#38bdf83d,#0000 34rem),#050816;min-height:100%}body{min-width:320px;min-height:100svh;margin:0}button,input{-webkit-tap-highlight-color:transparent}.game-shell{grid-template-rows:auto 1fr auto auto;gap:12px;width:min(100%,540px);min-height:100svh;margin:0 auto;padding:14px;display:grid;position:relative;overflow:hidden}.top-bar{grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;min-height:68px;display:grid}.top-bar h1{color:#f8fafc;text-align:center;letter-spacing:0;margin:0;font-size:1.45rem;line-height:1}.top-bar div,.readouts div,.result-grid div{background:#080d19bd;border:1px solid #94a3b829;border-radius:8px;min-width:0}.top-bar div{align-content:center;place-items:center;min-height:58px;display:grid}.top-bar span,.readouts span,.result-grid span{color:#93a4ba;text-transform:uppercase;font-size:.72rem;font-weight:800}.top-bar strong{color:#f8fafc;font-size:1.2rem;line-height:1.1}.stage{background:linear-gradient(#0f172ae6,#070a16f5),repeating-linear-gradient(90deg,#94a3b814 0 1px,#0000 1px 44px);border:1px solid #6366f13d;border-radius:8px;grid-template-rows:auto 92px 1fr 96px;gap:16px;min-height:440px;padding:16px;display:grid;position:relative;overflow:hidden;box-shadow:0 18px 48px #00000052}.progress-track{background:#1e293be6;border-radius:999px;height:8px;overflow:hidden}.progress-track span{border-radius:inherit;background:linear-gradient(90deg,#22c55e,#38bdf8);height:100%;display:block}.note-road{background:#0206178f;border:1px solid #94a3b829;border-radius:8px;position:relative;overflow:hidden}.target-note{color:#dbeafe;background:#2563eb8a;border-radius:8px;place-items:center;min-width:32px;height:40px;font-size:.78rem;font-weight:900;display:grid;position:absolute;top:24px;transform:translate(-50%)}.target-note.active{color:#04111f;background:#facc15;box-shadow:0 0 22px #facc1585}.playhead{background:#f8fafc;border-radius:999px;width:3px;position:absolute;top:0;bottom:0;box-shadow:0 0 16px #f8fafccc}.target-display{text-align:center;align-content:center;place-items:center;gap:6px;display:grid}.target-display span,.target-display em{color:#93a4ba;font-style:normal;font-weight:800}.target-display strong{color:#f8fafc;letter-spacing:0;font-size:5.3rem;line-height:.92}.target-display em{color:#facc15;min-height:24px;font-size:1.05rem}.pitch-lane{place-items:center;height:96px;display:grid;position:relative}.lane-line{background:linear-gradient(90deg,#38bdf8,#22c55e 50%,#ef4444);border-radius:999px;width:100%;height:4px}.voice-cursor{color:#04111f;background:#38bdf8;border:3px solid #f8fafc;border-radius:999px;place-items:center;width:56px;height:56px;transition:transform .11s;display:grid;position:absolute;left:50%;box-shadow:0 0 22px #38bdf885}.voice-cursor span{font-size:.72rem;font-weight:900}.judgement-zone{pointer-events:none;place-items:center;display:grid;position:absolute;inset:42% 0 auto}.judgement{letter-spacing:0;text-shadow:0 8px 22px #0000006b;font-size:2.6rem;line-height:1;animation:.52s both pop-judge}.judgement-perfect{color:#22c55e}.judgement-good{color:#38bdf8}.judgement-ok{color:#facc15}.judgement-miss{color:#ef4444}.readout-panel{gap:10px;display:grid}.status-line{color:#f8fafc;background:#0f172ac2;border:1px solid #94a3b829;border-radius:8px;place-items:center;min-height:44px;font-weight:900;display:grid}.readouts,.result-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.readouts div,.result-grid div{align-content:center;place-items:center;gap:3px;min-height:70px;display:grid}.readouts strong,.result-grid strong{color:#f8fafc;font-size:1rem;line-height:1.1}.overlay-panel{z-index:3;background:#080d19f5;border:1px solid #94a3b833;border-radius:8px;gap:12px;padding:18px;display:grid;position:absolute;inset:auto 14px 18px;box-shadow:0 20px 70px #0000007a}.overlay-panel h2{color:#f8fafc;letter-spacing:0;margin:0;font-size:2rem;line-height:1.05}.overlay-panel p{color:#cbd5e1;margin:0}.overlay-panel .eyebrow{color:#38bdf8;text-transform:uppercase;font-size:.78rem;font-weight:900}.warning,.mic-error{color:#fca5a5;font-size:.9rem}.primary-action,.stop-button{min-height:58px;font:inherit;cursor:pointer;border:0;border-radius:8px;padding:0 18px;font-weight:900}.primary-action{color:#04111f;background:#facc15}.stop-button{color:#f8fafc;background:#334155}.result-grid{grid-template-columns:repeat(2,1fr)}@keyframes pop-judge{0%{opacity:0;transform:translateY(18px)scale(.86)}24%{opacity:1;transform:translateY(0)scale(1.08)}to{opacity:0;transform:translateY(-18px)scale(1)}}@media (height<=760px){.stage{grid-template-rows:auto 82px 1fr 82px;min-height:390px}.target-display strong{font-size:4.4rem}.overlay-panel{position:static}}