:root{color-scheme:dark;--accent-a: #4dd8ff;--accent-b: #ff5edb;--hot: #4dffb0;--bg: #07070d;--text: #e8e8f0;--muted: #b9b9cf;--dim: #7c7c96}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif}.app{position:relative;width:100vw;height:100vh}.game-canvas{display:block;width:100vw;height:100vh;touch-action:none}.overlay{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;background:radial-gradient(ellipse at 50% 40%,#171733 0%,var(--bg) 70%)}.logo{image-rendering:pixelated;filter:drop-shadow(0 6px 18px rgba(255,94,219,.35))}.logo--small{opacity:.85}.best-score{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 26px;border:1px solid #2c2c48;border-radius:14px;background:#14142299}.best-score-label{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim)}.best-score-value{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent-a)}.best-score-detail{font-size:13px;color:var(--muted)}.result-record{margin:0;font-size:14px;color:var(--muted)}.title{margin:0;font-size:clamp(32px,7vw,64px);letter-spacing:2px;background:linear-gradient(90deg,var(--accent-a),var(--accent-b));-webkit-background-clip:text;background-clip:text;color:transparent}.subtitle{max-width:620px;margin:0;font-size:15px;line-height:1.55;color:var(--muted)}.tips{max-width:620px;text-align:left;font-size:14px;line-height:1.7;color:#9a9ab5}button{font:inherit;font-size:18px;font-weight:600;padding:14px 30px;border:none;border-radius:999px;cursor:pointer;color:#06060c;background:linear-gradient(90deg,var(--accent-a),var(--accent-b));transition:transform .12s ease,filter .12s ease}button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.1)}button:disabled{opacity:.5;cursor:progress}.error{max-width:620px;font-size:15px;line-height:1.6;color:#ff7a7a}.error-detail{max-width:620px;overflow-x:auto;padding:10px 14px;border-radius:8px;background:#14141f;font-size:12px;color:var(--dim)}.small{font-size:13px;line-height:1.6;color:var(--dim)}kbd{padding:1px 6px;border:1px solid #3a3a5c;border-radius:5px;background:#22223a;font-size:12px}.results{display:flex;flex-direction:column;gap:12px;align-items:center}.result-main{display:flex;flex-direction:column;gap:4px}.result-score{font-size:52px;font-weight:800;line-height:1}.result-accuracy{font-size:18px;color:var(--muted)}.result-combo{font-size:15px;color:var(--dim)}.result-grades{display:flex;gap:18px;font-size:15px;font-weight:600}.hud{position:fixed;inset:0;z-index:5;pointer-events:none;user-select:none}.hud-score{position:absolute;top:18px;right:24px;text-align:right}.hud-score-value{font-size:40px;font-weight:700;font-variant-numeric:tabular-nums;text-shadow:0 2px 12px rgba(0,0,0,.6)}.hud-accuracy{font-size:18px;font-weight:600;color:var(--muted)}.hud-combo{position:absolute;left:24px;bottom:22px;font-size:44px;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.6);animation:combo-pop .18s ease-out}.hud-combo--hot{color:var(--hot)}@keyframes combo-pop{0%{transform:scale(1.25)}to{transform:scale(1)}}.hud-grade{position:absolute;top:22px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;animation:grade-fade .8s ease-out forwards}.hud-grade-label{font-size:34px;font-weight:800;letter-spacing:1px;text-shadow:0 2px 14px rgba(0,0,0,.7)}.hud-grade-offset{font-size:15px;font-weight:600;color:#ffffffbf}@keyframes grade-fade{0%{opacity:1;transform:translate(-50%) translateY(-6px)}70%{opacity:1}to{opacity:0;transform:translate(-50%) translateY(0)}}.hud-warning{position:absolute;top:45%;left:50%;transform:translate(-50%);font-size:20px;font-weight:600;color:#ff9c5e;text-shadow:0 2px 12px rgba(0,0,0,.7)}.hud-countdown{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}.hud-countdown-number{font-size:120px;font-weight:800;color:#ffffffe6;animation:countdown-pop .9s ease-out}.hud-countdown-hint{font-size:20px;font-weight:600;color:var(--muted)}@keyframes countdown-pop{0%{transform:scale(1.4);opacity:.2}to{transform:scale(1);opacity:1}}.hud-phase-banner{position:absolute;top:30%;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;animation:phase-banner 3s ease-out forwards}.hud-phase-name{font-size:clamp(24px,4vw,40px);font-weight:800;letter-spacing:1px;background:linear-gradient(90deg,var(--accent-a),var(--accent-b));-webkit-background-clip:text;background-clip:text;color:transparent}.hud-phase-hint{max-width:520px;font-size:16px;font-weight:600;color:#ffffffd9;text-shadow:0 2px 12px rgba(0,0,0,.8)}@keyframes phase-banner{0%{opacity:0;transform:translate(-50%) translateY(14px)}12%{opacity:1;transform:translate(-50%) translateY(0)}80%{opacity:1}to{opacity:0}}.hud-status{position:absolute;left:24px;top:20px;display:flex;flex-direction:column;gap:2px;font-size:14px;font-weight:600;color:#ffffffb3;text-shadow:0 2px 10px rgba(0,0,0,.7)}.hud-hands--duo{color:var(--hot)}.hud-progress{position:absolute;left:0;right:0;bottom:0;height:5px;background:#ffffff26}.hud-progress-fill{height:100%;background:var(--accent-a);transition:width .1s linear}