:root {
  --bg: #0c2136;
  --panel: rgba(15, 36, 58, .95);
  --panel2: #16324f;
  --text: #f4edde;
  --muted: #9fb1c6;
  --accent: #efe6d0;
  --line: rgba(244,237,222,.13);
  --danger: #e5484d;
  --gold: #e2b866;
  --red: #c0343b;
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-text-size-adjust:100%; }
body { min-height:100vh; overflow-x:hidden; touch-action:manipulation; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
/* Kill double-tap-to-zoom on every element (game surfaces override with touch-action:none). */
* { touch-action: manipulation; }
.stadium-glow { position:fixed; inset:-20vh -20vw auto; height:60vh; background:radial-gradient(circle, rgba(192,52,59,.18), transparent 65%); pointer-events:none; }
.shell { width:min(720px, 100%); margin:auto; padding:calc(18px + env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom)); position:relative; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.eyebrow { color:var(--red); font-size:11px; letter-spacing:.16em; font-weight:900; }
h1 { font-size:clamp(22px, 6vw, 34px); margin:4px 0 0; line-height:1; }
h2 { font-size:24px; margin:0 0 8px; }
h3 { margin:0; }
p { color:var(--muted); line-height:1.5; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:18px; box-shadow:0 24px 70px rgba(0,0,0,.35); min-height:520px; }
.hero { text-align:center; padding:24px 4px 8px; }
.logo-ball { font-size:62px; filter:drop-shadow(0 8px 20px rgba(0,0,0,.4)); }
.grid { display:grid; gap:12px; }
.grid.two { grid-template-columns:1fr 1fr; }
.btn, button.primary, button.secondary, button.ghost { border:none; border-radius:16px; min-height:52px; padding:12px 16px; font-weight:900; cursor:pointer; }
.primary { background:var(--red); color:var(--text); width:100%; }
.secondary { background:#213451; color:white; width:100%; }
.ghost { background:transparent; color:white; border:1px solid var(--line); }
.small { min-height:40px !important; padding:8px 12px !important; width:auto !important; font-size:13px; }
.danger { background:var(--danger) !important; color:#111 !important; }
input { width:100%; min-height:52px; border-radius:14px; border:1px solid var(--line); background:#0b1728; color:white; padding:0 14px; outline:none; font-size:18px; }
.section-title { display:flex; justify-content:space-between; align-items:center; margin:10px 0 12px; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; background:#14243a; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:12px; font-weight:800; }
.pill.accent { color:var(--bg); background:var(--accent); border-color:transparent; }
.event-list { display:grid; gap:10px; margin:14px 0; }
.event-row { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px; background:var(--panel2); padding:12px; border:1px solid var(--line); border-radius:16px; }
.event-icon { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:#0c1728; font-size:22px; }
.event-name { font-weight:900; }
.event-desc { font-size:12px; color:var(--muted); margin-top:2px; }
.score { font-weight:950; font-variant-numeric:tabular-nums; }
.rule { height:1px; background:var(--line); margin:16px 0; }
.instructions { display:grid; gap:10px; margin:16px 0; }
.instruction { background:#0d1a2b; border:1px solid var(--line); border-radius:15px; padding:12px; }
.instruction b { color:white; }
.game-area { position:relative; width:100%; height:390px; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(#1a3757 0 38%, #214d30 38% 100%); touch-action:none; user-select:none; }
.game-hud { display:flex; justify-content:space-between; gap:6px; margin:10px 0 12px; font-weight:900; }
.hud-box { flex:1 1 0; min-width:0; background:#0d1a2b; border:1px solid var(--line); border-radius:13px; padding:7px 4px; text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap; font-size:clamp(10px, 3vw, 13px); }
.hud-box span { font-variant-numeric:tabular-nums; }
.target { position:absolute; width:74px; height:74px; border-radius:50%; border:9px solid rgba(255,255,255,.88); background:rgba(239,230,208,.65); box-shadow:inset 0 0 0 10px rgba(0,0,0,.16), 0 8px 20px rgba(0,0,0,.25); transform:translate(-50%,-50%); }
.target::after { content:""; position:absolute; width:12px; height:12px; background:white; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); }
.reaction-pad { height:360px; border-radius:22px; display:grid; place-items:center; text-align:center; padding:24px; background:#b12d36; touch-action:none; }
.reaction-pad.ready { background:#b58924; }
.reaction-pad.go { background:#198754; }
.big-number { font-size:52px; font-weight:1000; letter-spacing:-.04em; }
.kick-field { position:relative; height:390px; border-radius:20px; overflow:hidden; background:linear-gradient(#204d77 0 44%, #1f6a38 44%); border:1px solid var(--line); }
.upright { position:absolute; left:50%; top:46px; transform:translateX(-50%); width:190px; height:160px; border-left:8px solid var(--gold); border-right:8px solid var(--gold); border-bottom:8px solid var(--gold); border-radius:0 0 3px 3px; }
.upright::after { content:""; position:absolute; left:50%; bottom:-74px; width:8px; height:74px; background:var(--gold); transform:translateX(-50%); }
.aim-line { position:absolute; left:50%; bottom:12%; width:7px; height:74%; background:rgba(255,255,255,.9); transform-origin:50% 100%; border-radius:8px; }
.goalpost { position:absolute; transform:translateX(-50%); border-left:7px solid var(--gold); border-right:7px solid var(--gold); border-bottom:7px solid var(--gold); border-radius:0 0 3px 3px; box-sizing:border-box; z-index:2; }
.goal-pole { position:absolute; width:7px; background:var(--gold); transform:translateX(-50%); z-index:1; border-radius:0 0 3px 3px; }
.fg-arc { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
#arcPath { stroke-width:4; stroke-linecap:round; stroke-dasharray:2 9; }
.goal-yd { position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-size:12px; font-weight:900; color:var(--gold); white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.7); }
.fg-tee { position:absolute; left:50%; top:90%; width:14px; height:5px; background:rgba(255,255,255,.5); border-radius:3px; transform:translate(-50%,-50%); }
.fg-ball { position:absolute; font-size:24px; z-index:5; transform:translate(-50%,-50%) scale(1); filter:drop-shadow(0 3px 5px rgba(0,0,0,.55)); will-change:left,top,transform; }
.power-need { position:absolute; top:0; bottom:0; width:3px; background:#fff; box-shadow:0 0 6px rgba(255,255,255,.85); transform:translateX(-50%); z-index:2; }
.power-zone { position:absolute; top:0; bottom:0; border-left:2px solid var(--gold); border-right:2px solid var(--gold); background:rgba(255,209,102,.20); z-index:3; }
.acc-meter { position:relative; height:22px; border-radius:999px; background:#132239; border:1px solid var(--line); margin-top:8px; opacity:.45; transition:opacity .2s; }
.acc-center { position:absolute; left:50%; top:3px; bottom:3px; width:2px; background:rgba(255,255,255,.4); transform:translateX(-50%); }
.acc-zone { position:absolute; top:0; bottom:0; background:rgba(239,230,208,.20); border-left:1px solid rgba(239,230,208,.6); border-right:1px solid rgba(239,230,208,.6); }
.acc-aim { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--gold); transform:translateX(-50%); }
.acc-mark { position:absolute; top:-2px; bottom:-2px; width:5px; background:var(--accent); border-radius:3px; transform:translateX(-50%); box-shadow:0 0 8px rgba(239,230,208,.9); z-index:2; }
.meter { height:18px; border-radius:999px; background:#132239; border:1px solid var(--line); overflow:hidden; position:relative; }
.meter-fill { height:100%; background:var(--accent); width:0%; }
.ball { position:absolute; width:48px; height:32px; background:#9a572c; border-radius:50%; border:3px solid #e7c8a6; transform:translate(-50%,-50%) rotate(-20deg); display:grid; place-items:center; font-size:12px; font-weight:900; }
.ball::after { content:""; width:18px; height:3px; background:white; box-shadow:0 -5px 0 white, 0 5px 0 white; }
/* --- Catching drill: grow-into-hands --- */
.catch-hands { position:absolute; transform:translate(-50%,-50%); border:4px dashed rgba(255,255,255,.7); border-radius:50%; box-sizing:border-box; z-index:2; transition:border-color .05s, box-shadow .05s; animation:handsPulse 1.1s ease-in-out infinite; }
@keyframes handsPulse { 0%,100%{ box-shadow:0 0 0 rgba(255,255,255,0); } 50%{ box-shadow:0 0 14px rgba(255,255,255,.2); } }
.catch-hands.live { border-color:rgba(239,230,208,.95); box-shadow:0 0 20px rgba(239,230,208,.55); animation:none; }
.hands-ico { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:24px; opacity:.4; pointer-events:none; }
.catch-ball { position:absolute; transform:translate(-50%,-50%); line-height:1; z-index:4; pointer-events:none; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); will-change:left,top,font-size; }
.catch-ball.bullet { filter:drop-shadow(0 0 12px rgba(255,107,107,.85)); }
.catch-btn { width:100%; margin-top:10px; transition:background .05s, color .05s, box-shadow .05s, transform .05s; }
.catch-btn.ready { background:var(--accent); color:#0b1020; box-shadow:0 0 24px rgba(239,230,208,.65); transform:scale(1.02); }
/* --- Catching blitz: slider to catch --- */
.catch-blitz { touch-action:none; }
.catch-slider { position:relative; height:46px; margin-top:12px; border-radius:999px; background:#132239; border:1px solid var(--line); touch-action:none; cursor:grab; user-select:none; }
.catch-knob { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:76px; height:38px; border-radius:999px; background:var(--accent); color:#0b1020; display:grid; place-items:center; font-weight:1000; font-size:20px; box-shadow:0 4px 14px rgba(239,230,208,.4); }
.catch-slider:active { cursor:grabbing; }
.catch-slider:active .catch-knob { box-shadow:0 4px 22px rgba(239,230,208,.65); }
.catch-line { position:absolute; left:0; right:0; height:2px; background:rgba(255,255,255,.25); transform:translateY(-50%); }
.drag-hands { position:absolute; transform:translate(-50%,-50%); line-height:1; z-index:5; pointer-events:none; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.drop-ball { position:absolute; transform:translate(-50%,-50%); line-height:1; z-index:3; pointer-events:none; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.drop-ball.snag { animation:snagPop .26s ease forwards; }
.drop-ball.drop { animation:dropFade .26s ease forwards; }
@keyframes snagPop { 0%{ transform:translate(-50%,-50%) scale(1);} 100%{ transform:translate(-50%,-90%) scale(1.5); opacity:0; } }
@keyframes dropFade { 0%{ opacity:1;} 100%{ transform:translate(-50%,10%) scale(.7); opacity:0; filter:grayscale(1); } }
.quiz-options { display:grid; gap:10px; margin-top:16px; }
.quiz-option { background:#172942; color:white; border:1px solid var(--line); border-radius:14px; padding:16px; text-align:left; font-weight:800; min-height:54px; }
.leader-row { display:grid; grid-template-columns:34px 1fr auto; gap:12px; align-items:center; padding:13px 14px; border-bottom:1px solid var(--line); cursor:pointer; border-radius:12px; }
.leader-row:active { background:rgba(244,237,222,.06); }
.leader-chev { color:var(--muted); font-size:24px; font-weight:900; opacity:.5; line-height:1; }
.leader-body { min-width:0; }
.leader-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.leader-top .event-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leader-top .score { flex:0 0 auto; white-space:nowrap; padding-left:4px; }
.leader-row:last-child { border-bottom:none; }
.leader-row.me { background:rgba(239,230,208,.08); border-radius:12px; }
.admin-row { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }
.admin-main { min-width:0; }
.admin-scores { font-size:12px; color:var(--muted); margin-top:4px; font-variant-numeric:tabular-nums; }
.admin-actions { display:flex; flex-direction:column; gap:6px; flex:0 0 auto; }
.ghost.danger, .a-del { color:var(--danger) !important; border-color:rgba(255,107,107,.4); background:transparent !important; }
.rank { font-size:18px; font-weight:1000; text-align:center; }
.label { color:var(--red); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.result-card { text-align:center; padding:20px 2px; }
.ovr { width:112px; height:112px; margin:10px auto 16px; border-radius:24px; background:var(--red); color:var(--text); display:grid; place-items:center; font-size:48px; font-weight:1000; box-shadow:0 15px 40px rgba(192,52,59,.28); }
.note { color:var(--muted); font-size:13px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); opacity:0; pointer-events:none; background:#0b1728; border:1px solid var(--line); color:white; padding:11px 14px; border-radius:12px; transition:.2s; z-index:50; max-width:90vw; text-align:center; }
.toast.show { opacity:1; transform:translate(-50%, 0); }
@media (max-width:480px) {
  .card { padding:15px; border-radius:20px; min-height:500px; }
  .game-area, .kick-field, .bench-lane, .dance-field { height:360px; }
  .grid.two { grid-template-columns:1fr; }
}

/* --- Game juice: countdown, flashes, shake --- */
#app { position:relative; }
.countdown-overlay { position:absolute; inset:0; display:grid; place-items:center; background:rgba(7,16,29,.72); border-radius:inherit; z-index:20; }
.count-num { font-size:96px; font-weight:1000; letter-spacing:-.05em; color:white; animation:pop .5s ease; }
.count-num.go { color:var(--accent); }
@keyframes pop { 0%{ transform:scale(.4); opacity:0; } 40%{ transform:scale(1.15); opacity:1; } 100%{ transform:scale(1); opacity:1; } }
.fx-flash { position:fixed; inset:0; pointer-events:none; z-index:40; opacity:0; transition:opacity .12s ease; }
.fx-flash.on { opacity:1; }
.fx-flash.good { background:radial-gradient(circle, rgba(239,230,208,.22), transparent 60%); }
.fx-flash.bad { background:radial-gradient(circle, rgba(255,107,107,.22), transparent 60%); }
.shake { animation:shake .32s ease; }
@keyframes shake { 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-7px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(3px); } }

/* --- IQ answer feedback --- */
.quiz-option.correct { background:#1c7a3f; border-color:#2fd06e; color:white; }
.quiz-option.wrong { background:#7a2230; border-color:var(--danger); color:white; }

/* Tap-guard: disables result buttons briefly so a stray fast-tap can't skip the score */
.actions-lock { pointer-events:none; opacity:.45; transition:opacity .25s ease; }

/* --- QB pre-snap play call --- */
.playcall { display:grid; gap:10px; margin-top:4px; }
.play-card { background:var(--panel2); border:1px solid var(--line); border-radius:16px; padding:10px 12px; display:grid; grid-template-columns:34px 1fr 88px; align-items:center; gap:12px; text-align:left; color:white; min-height:78px; }
.play-card:active { border-color:var(--accent); background:#16283f; }
.play-ico { font-size:26px; text-align:center; }
.play-name { font-weight:900; font-size:16px; }
.play-diagram { width:88px; height:64px; }
.rsvg { width:100%; height:100%; background:#173a24; border-radius:10px; border:1px solid var(--line); display:block; }

/* --- QB Accuracy: Read & Lead --- */
.qb-field { background:repeating-linear-gradient(#1c5233 0 38px, #18492d 38px 76px); }
.qb-endzone { position:absolute; left:0; right:0; top:0; height:12%; background:repeating-linear-gradient(45deg, rgba(239,230,208,.12) 0 12px, rgba(239,230,208,.04) 12px 24px); border-bottom:2px dashed rgba(239,230,208,.5); display:grid; place-items:center; color:rgba(239,230,208,.75); font-weight:900; font-size:11px; letter-spacing:.3em; }
.qb-los { position:absolute; left:0; right:0; top:82%; height:2px; background:rgba(255,255,255,.4); }
.qb-marker { position:absolute; transform:translate(-50%,-50%); font-size:26px; z-index:2; }
.wr { position:absolute; width:30px; height:30px; border-radius:50%; transform:translate(-50%,-50%); display:grid; place-items:center; font-weight:900; font-size:14px; color:#08210f; border:2px solid rgba(255,255,255,.85); transition:background .1s, box-shadow .1s; z-index:4; }
.wr.covered { background:#93a7bb; }
.wr.open { background:var(--accent); box-shadow:0 0 16px rgba(239,230,208,.85); }
.db { position:absolute; width:24px; height:24px; border-radius:7px; transform:translate(-50%,-50%); display:grid; place-items:center; font-weight:900; font-size:12px; color:#fff; background:#c0392b; opacity:.92; z-index:3; }
.lead-zone { position:absolute; width:64px; height:64px; border-radius:50%; transform:translate(-50%,-50%); background:rgba(239,230,208,.16); border:2px dashed rgba(239,230,208,.85); animation:leadpulse .7s infinite; pointer-events:none; z-index:3; }
@keyframes leadpulse { 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.75; } 50%{ transform:translate(-50%,-50%) scale(1.14); opacity:1; } }
.qb-ball { position:absolute; width:22px; height:22px; transform:translate(-50%,-50%); border-radius:50%; background:#9a572c; border:2px solid #e7c8a6; transition-property:left, top; transition-timing-function:linear; z-index:6; }
.qb-ball.caught { box-shadow:0 0 18px rgba(239,230,208,.95); }
.qb-ball.bad { box-shadow:0 0 18px rgba(255,107,107,.95); }
.qb-result-overlay { position:absolute; inset:0; display:grid; place-items:center; background:rgba(7,16,29,.8); border-radius:inherit; z-index:30; padding:18px; }
.qb-result-card { background:var(--panel2); border:1px solid var(--line); border-radius:20px; padding:22px 20px; text-align:center; width:min(360px,94%); box-shadow:0 24px 70px rgba(0,0,0,.55); animation:pop .28s ease; }
.qb-result-card.comp { border-color:rgba(239,230,208,.55); }
.qb-result-card.int, .qb-result-card.sack, .qb-result-card.incomplete { border-color:rgba(255,107,107,.45); }
.qb-result-head { font-size:24px; font-weight:1000; }
.qb-result-pts { font-size:30px; font-weight:1000; margin:6px 0 2px; font-variant-numeric:tabular-nums; }
.qb-result-card.comp .qb-result-pts { color:var(--accent); }
.qb-result-card.int .qb-result-pts { color:var(--danger); }
.qb-result-card.sack .qb-result-pts, .qb-result-card.incomplete .qb-result-pts { color:var(--muted); }
.qb-result-reason { color:var(--muted); margin:6px 0 18px; line-height:1.4; }
.qb-next { width:100%; }

/* --- 40-Yard Dash --- */
.dash-track { position:relative; height:200px; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(#1a3757 0 28%, #214d30 28% 100%); margin-bottom:12px; touch-action:none; user-select:none; }
.yard-mark { position:absolute; top:0; bottom:0; width:2px; background:rgba(255,255,255,.22); transform:translateX(-50%); }
.yard-mark span { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:900; color:rgba(255,255,255,.6); }
.dash-finish { position:absolute; top:0; bottom:0; width:8px; margin-left:-4px; background:repeating-linear-gradient(45deg,#fff 0 7px,#111 7px 14px); }
.dash-runner { position:absolute; top:52%; transform:translate(-50%,-50%) scaleX(-1); font-size:56px; transition:left .1s linear; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.dash-runner.running { animation:dashbob .16s infinite; }
@keyframes dashbob { 0%,100%{ top:52%; } 50%{ top:47%; } }
.dash-tap { height:120px; border-radius:20px; display:grid; place-items:center; text-align:center; font-size:22px; font-weight:1000; color:#0b1020; background:var(--accent); user-select:none; touch-action:none; cursor:pointer; box-shadow:0 12px 30px rgba(239,230,208,.18); }
.dash-tap:active { filter:brightness(.9); transform:translateY(1px); }

/* --- Bench Press --- */
/* --- Bench press: flick to failure --- */
.bench-lane { position:relative; height:390px; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(#14263e, #0c1826); touch-action:none; user-select:none; }
.bench-line { position:absolute; left:0; right:0; height:2px; background:rgba(255,255,255,.16); }
.bench-line span { position:absolute; right:10px; top:-15px; font-size:10px; font-weight:900; letter-spacing:.12em; color:rgba(255,255,255,.4); }
.bench-line.lockout { background:rgba(239,230,208,.5); } .bench-line.lockout span { color:rgba(239,230,208,.85); }
.bench-line.stick { background:rgba(255,209,102,.5); } .bench-line.stick span { color:rgba(255,209,102,.9); }
.press-bar { position:absolute; left:10%; right:10%; height:16px; bottom:8%; border-radius:8px; background:linear-gradient(#eef2f6,#b9c2cc); box-shadow:0 3px 12px rgba(0,0,0,.55); transition:bottom .15s ease-out; z-index:2; }
.press-bar::before, .press-bar::after { content:""; position:absolute; top:50%; width:26px; height:48px; border-radius:6px; background:#2b3646; border:2px solid #4a5a70; transform:translateY(-50%); }
.press-bar::before { left:-16px; } .press-bar::after { right:-16px; }

/* --- Footwork (DDR-style) --- */
.dance-field { position:relative; height:390px; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(#0e1c2e,#0a1421); touch-action:none;
  background-image:linear-gradient(#0e1c2e,#0a1421), linear-gradient(90deg, transparent 24.8%, rgba(255,255,255,.05) 25%, transparent 25.2%, transparent 49.8%, rgba(255,255,255,.05) 50%, transparent 50.2%, transparent 74.8%, rgba(255,255,255,.05) 75%, transparent 75.2%); }
.dance-hitline { position:absolute; left:0; right:0; top:82%; height:3px; background:rgba(239,230,208,.55); box-shadow:0 0 14px rgba(239,230,208,.4); }
.dance-target { position:absolute; top:82%; transform:translate(-50%,-50%); font-size:30px; opacity:.3; }
.dance-arrow { position:absolute; transform:translate(-50%,-50%); font-size:33px; line-height:1; filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)); will-change:top; }
.dance-arrow.good { animation:dancePop .18s ease forwards; }
@keyframes dancePop { to { transform:translate(-50%,-50%) scale(1.7); opacity:0; } }
.dance-arrow.miss { animation:danceMiss .18s ease forwards; }
@keyframes danceMiss { to { opacity:0; filter:grayscale(1) brightness(.6); } }
.dance-pads { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px; }
.dance-pad { min-height:66px; border-radius:14px; background:#213451; color:#fff; border:1px solid var(--line); font-size:30px; font-weight:900; touch-action:none; }
.dance-pad:active { background:var(--accent); color:#0b1020; box-shadow:0 0 16px rgba(239,230,208,.4); }