:root{--bg0:#030806;--bg1:#06140f;--neon:#39ff8a;--cyan:#5ef0ff;--text:#e8fff2;--muted:#7a9a88;--danger:#ff3d5a;--font-display:"Orbitron", sans-serif;--font-body:"Zen Kaku Gothic New", sans-serif;color:var(--text);font-family:var(--font-body);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#root{background:var(--bg0);height:100%;min-height:100%;margin:0;overflow:hidden}body{background:radial-gradient(ellipse 80% 60% at 50% 20%, #0a2a1c 0%, transparent 55%), radial-gradient(ellipse 70% 50% at 80% 80%, #062a33 0%, transparent 50%), linear-gradient(165deg, var(--bg0), var(--bg1) 45%, #020403)}.app{isolation:isolate;width:100%;height:100%;transition:filter .4s;position:relative}.app.hue-1{filter:hue-rotate(8deg)saturate(1.1)}.app.hue-2{filter:hue-rotate(28deg)saturate(1.2)}.app.hue-3{filter:hue-rotate(50deg)saturate(1.3)}.app.hue-4{filter:hue-rotate(72deg)saturate(1.4)brightness(1.05)}.effects-host{z-index:0;pointer-events:none;position:absolute;inset:0}.screen{z-index:2;text-align:center;place-content:center;width:100%;height:100%;padding:2rem;display:grid;position:relative}.title-glow{pointer-events:none;background:radial-gradient(circle,#39ff8a2e,#0000 65%);animation:2.4s ease-in-out infinite pulse;position:absolute;inset:10% 20%}@keyframes pulse{0%,to{opacity:.6;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}.eyebrow{font-family:var(--font-display);letter-spacing:.35em;color:var(--cyan);margin:0;font-size:.75rem}.brand{font-family:var(--font-display);letter-spacing:.06em;color:var(--neon);text-shadow:0 0 24px #39ff8a8c,0 0 60px #5ef0ff40,2px 2px #02150c;margin:.4rem 0 .6rem;font-size:clamp(3.2rem,12vw,7rem);font-weight:900;line-height:.95}.tagline{max-width:28rem;color:var(--muted);margin:0 auto 1.6rem;font-size:1.05rem}.cta-row{flex-wrap:wrap;justify-content:center;gap:.8rem;display:flex}.btn{font-family:var(--font-display);letter-spacing:.12em;cursor:pointer;border:1px solid #0000;padding:.85rem 1.6rem;transition:transform .15s,background .15s,box-shadow .15s}.btn:hover{transform:translateY(-2px)}.btn.primary{background:var(--neon);color:#02150c;box-shadow:0 0 24px #39ff8a73}.btn.ghost{color:var(--cyan);background:0 0;border-color:#5ef0ff73}.btn.tiny{padding:.35rem .7rem;font-size:.7rem}.rules{color:var(--muted);margin:2rem auto 0;padding:0;font-size:.92rem;line-height:1.7;list-style:none}.play-screen{will-change:transform;place-content:center;place-items:center;padding:1.2rem 1.5rem 2rem;display:grid}.play-stage{z-index:4;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1.4rem;width:min(920px,100%);display:flex;position:relative}.time-gauge{z-index:7;background:#ffffff14;height:6px;position:absolute;top:0;left:0;right:0;overflow:hidden}.time-gauge-fill{height:100%;transition:width 80ms linear,background .25s;box-shadow:0 0 12px}.time-gauge-ok{color:#5ef0ff;background:linear-gradient(90deg,#1dff7a,#5ef0ff)}.time-gauge-warn{color:#ffb020;background:linear-gradient(90deg,#ffb020,#ff7a1a)}.time-gauge-critical{color:#ff3d5a;background:linear-gradient(90deg,#ff3d5a,#ff1744);animation:.45s ease-in-out infinite gauge-pulse}@keyframes gauge-pulse{0%,to{filter:brightness()}50%{filter:brightness(1.35)}}.hud{z-index:4;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.4rem;margin-top:0;display:flex}.hud-item{min-width:5.5rem}.hud-item .label,.result-stats .label,.hint-label{font-family:var(--font-display);letter-spacing:.18em;color:var(--muted);font-size:.65rem;display:block}.hud-item strong{font-family:var(--font-display);font-size:1.6rem}.hud-time.time-warn strong{color:#ffb020}.hud-time.time-critical strong{color:var(--danger);animation:.5s step-end infinite time-blink}@keyframes time-blink{0%,to{opacity:1}50%{opacity:.45}}.time-alert{z-index:6;font-family:var(--font-display);letter-spacing:.28em;pointer-events:none;text-shadow:0 0 16px;min-height:1.2em;font-weight:900;position:relative;top:auto;left:auto;transform:none}.time-alert.warn{color:#ffb020;font-size:.85rem;animation:1.2s ease-in-out infinite alert-fade}.time-alert.critical{color:var(--danger);font-size:1.15rem;animation:.35s ease-in-out infinite alert-shake}@keyframes alert-fade{0%,to{opacity:.55}50%{opacity:1}}@keyframes alert-shake{0%,to{opacity:1;transform:scale(1)}50%{opacity:.75;transform:translate(3px)scale(1.04)}}.time-frame{z-index:5;pointer-events:none;border:0 solid #0000;transition:border-color .2s,box-shadow .2s;position:absolute;inset:0}.time-frame.time-warn{border-width:2px;border-color:#ffb02059;box-shadow:inset 0 0 48px #ffb02038}.time-frame.time-critical{border-width:3px;border-color:#ff3d5a8c;animation:.55s ease-in-out infinite frame-critical;box-shadow:inset 0 0 72px #ff3d5a59}@keyframes frame-critical{0%,to{box-shadow:inset 0 0 56px #ff3d5a47}50%{box-shadow:inset 0 0 90px #ff3d5a80}}.vignette.time-warn{background:radial-gradient(circle,#0000 38%,#50280059 100%)}.vignette.time-critical{background:radial-gradient(circle,#0000 32%,#5a00148c 100%)}.combo strong{color:var(--neon);transition:transform .12s}.combo-t1 strong{color:#7dff9a}.combo-t2 strong{color:var(--cyan)}.combo-t3 strong,.combo-t4 strong{color:#fff;text-shadow:0 0 16px var(--cyan);animation:.35s combo-bounce}@keyframes combo-bounce{0%{transform:scale(1)}40%{transform:scale(1.35)}to{transform:scale(1)}}.prompt{z-index:3;place-content:center;gap:1rem;display:grid}.kana{letter-spacing:.06em;text-shadow:0 0 2px #000,0 0 8px #000,2px 2px #000,-2px -2px #000,2px -2px #000,-2px 2px #000;margin:0;font-size:clamp(2.2rem,7vw,4.2rem);font-weight:900;line-height:1.55}.phrase-prompt{text-align:center;ruby-align:center;ruby-position:over;display:block}.phrase-part{ruby-position:over}.phrase-part rt{letter-spacing:.04em;text-shadow:0 0 2px #000,1px 1px #000,-1px -1px #000;font-size:.38em;font-weight:700;line-height:1.1}.glyph-done{color:#39ff8a66}.glyph-current{color:#fff;text-shadow:0 0 10px #5ef0ffd9,0 0 2px #000,2px 2px #000,-2px -2px #000}.glyph-rest{color:#f4fff8}.phrase-done,.phrase-done .glyph-done{color:#39ff8a66}rt .glyph-done{color:#39ff8a59}rt .glyph-current{color:#fff;text-shadow:0 0 8px #5ef0ffe6}rt .glyph-rest{color:var(--cyan)}.kana-done{color:#39ff8a73}.kana-rest{color:#f4fff8}.romaji-hint{font-family:var(--font-display);letter-spacing:.18em;color:var(--cyan);text-shadow:0 0 2px #000,0 0 10px #000000e6;margin:0;font-size:clamp(1.1rem,3vw,1.7rem)}.hint-label{margin-right:.8rem;display:inline}.overlay-layer{pointer-events:none;z-index:5;position:absolute;inset:0;overflow:hidden}.float-text{font-family:var(--font-display);text-shadow:0 0 8px #000;font-size:1.3rem;animation:.7s ease-out forwards float-up;position:absolute;top:42%;left:50%}.float-text.score{color:var(--neon)}.float-text.bonus{color:var(--cyan);font-size:1.6rem}.float-text.penalty{color:var(--danger);font-size:1.6rem}@keyframes float-up{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-80px)}}.judgement{font-family:var(--font-display);letter-spacing:.12em;text-shadow:0 0 20px;font-size:clamp(2rem,6vw,3.5rem);font-weight:900;animation:.5s ease-out forwards judge-pop;position:absolute;top:28%;left:50%;transform:translate(-50%)}.j-nice{color:#9dffb8}.j-great{color:var(--cyan)}.j-perfect,.j-clear{color:#fff}.j-miss{color:var(--danger)}@keyframes judge-pop{0%{opacity:0;transform:translate(-50%)scale(.6)}30%{opacity:1;transform:translate(-50%)scale(1.15)}to{opacity:0;transform:translate(-50%)scale(1)translateY(-20px)}}.flash{z-index:6;pointer-events:none;mix-blend-mode:soft-light;position:absolute;inset:0}.vignette{z-index:1;pointer-events:none;background:radial-gradient(circle,#0000 40%,#0000008c 100%);position:absolute;inset:0}.vignette.tier-3,.vignette.tier-4{box-shadow:inset 0 0 80px #5ef0ff40}.play-screen.tier-0 .vignette{box-shadow:none}.result-screen .rank{font-family:var(--font-display);color:var(--cyan);text-shadow:0 0 30px #5ef0ff80;margin:.2rem 0 1.2rem;font-size:clamp(3rem,10vw,5rem)}.result-brand{font-size:clamp(2rem,6vw,3.2rem)}.result-stats{grid-template-columns:repeat(3,minmax(7rem,11rem));justify-content:center;gap:1rem 1.5rem;margin-bottom:1.8rem;display:grid}.result-stats strong{font-family:var(--font-display);font-size:1.8rem}@media (width<=640px){.hud{gap:.8rem}.hud-item strong{font-size:1.25rem}.rules{font-size:.85rem}}