:root {
  --bg: #0a0a0a;
  --card: #161616;
  --border: #2a2a2a;
  --red: #e60000;
  --red-dim: #8f0000;
  --white: #f5f5f5;
  --muted: #8a8a8a;
  --green: #2ecc71;
  --amber: #f5a623;
  --ball: #e8732c;
  --gold: #ffd24d;
  --font-d: "Teko", sans-serif;
  --font-b: "Inter", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--white);font-family:var(--font-b);-webkit-tap-highlight-color:transparent;overflow:hidden}
.app{display:flex;align-items:center;justify-content:center;height:100vh;height:100dvh}
.card{
  position:relative;width:100%;height:100%;max-width:760px;margin:0 auto;
  background:linear-gradient(180deg,#161616,#0f0f0f);
  border-left:1px solid var(--border);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  transition:box-shadow .3s;
}
.card.fx-make{box-shadow:inset 0 0 60px rgba(46,204,113,.25)}
.card.fx-brick{animation:shake .3s ease}
@keyframes shake{25%{transform:translateX(3px)}50%{transform:translateX(-3px)}75%{transform:translateX(2px)}}

.scoreboard{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 6px}
.stat{display:flex;flex-direction:column;align-items:center;min-width:56px}
.stat-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.stat-value{font-family:var(--font-d);font-weight:600;font-size:36px;line-height:1;font-variant-numeric:tabular-nums;color:var(--white);transition:color .2s}
.stat-value.time-danger{color:var(--red);animation:pulse-time .6s ease infinite}
@keyframes pulse-time{50%{opacity:.5}}
.brand{font-family:var(--font-d);font-size:20px;letter-spacing:.04em}
.brand-mark{color:var(--white);font-weight:600}
.brand-mark-accent{color:var(--red);font-weight:700}
.accent{color:var(--red)}

.streak-row{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 20px 6px;flex-wrap:wrap}
.level-label{font-family:var(--font-d);font-size:13px;letter-spacing:.08em;font-weight:600;color:var(--red)}
.streak-label{font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:600}
.defender-tag{font-size:10px;letter-spacing:.1em;font-weight:700;color:var(--red);border:1px solid var(--red-dim);background:rgba(230,0,0,.12);padding:2px 8px;border-radius:100px;animation:pulse-tag 1s ease-in-out infinite}
@keyframes pulse-tag{50%{opacity:.55}}
.hidden{display:none!important}

.level-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.06);margin:0 18px 4px;overflow:hidden}
.level-bar-fill{height:100%;background:linear-gradient(90deg,var(--red-dim),var(--red));border-radius:4px;width:0%;transition:width .3s ease}
.level-target{text-align:center;font-size:11px;letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:10px}

.meter-wrap{position:relative;padding:0 18px;margin:4px 0 12px}
.meter-track{position:relative;height:48px;border-radius:100px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 14px),linear-gradient(180deg,#1d1d1d,#101010);border:1px solid var(--border);overflow:hidden}
.zone-group{position:absolute;inset:0;will-change:transform}
.zone{position:absolute;top:0;bottom:0}
.zone-sweet{background:linear-gradient(180deg,rgba(46,204,113,.85),rgba(46,204,113,.55));box-shadow:0 0 16px rgba(46,204,113,.45) inset}
.zone-nearmiss{background:rgba(245,166,35,.32)}
.meter-marker{position:absolute;top:50%;left:0;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffb37a,var(--ball) 60%,#b5530f);box-shadow:0 2px 6px rgba(0,0,0,.5);will-change:transform}
.meter-marker::before{content:"";position:absolute;inset:2px;border-radius:50%;border:1px solid rgba(0,0,0,.35)}
.defender-shadow{position:absolute;inset:-10px -40% -10px -40%;background:linear-gradient(100deg,transparent 40%,rgba(0,0,0,.65) 50%,transparent 60%);opacity:0;pointer-events:none}
.meter-wrap.defender-active .defender-shadow{opacity:1;animation:sweep 1.6s ease-in-out infinite}
.meter-wrap.defender-active .meter-track{animation:shake .5s ease-in-out infinite}
@keyframes sweep{0%,100%{transform:translateX(-12%)}50%{transform:translateX(12%)}}

.result-toast{text-align:center;font-family:var(--font-d);font-size:24px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;min-height:28px;opacity:0;transform:scale(.9);color:var(--muted)}
.result-toast.is-visible{opacity:1}
.result-toast.is-animating{transition:transform .25s cubic-bezier(.2,1.4,.4,1);transform:scale(1.05)}
.result-toast--make{color:var(--green)}
.result-toast--nearmiss{color:var(--amber)}
.result-toast--brick{color:var(--red)}
.result-toast--levelup{color:var(--gold);font-size:28px}
.result-toast--champion{color:var(--gold);font-size:32px;text-shadow:0 0 20px rgba(255,210,77,.6)}

.tap-zone{flex:1;margin:0 18px 16px;border-radius:20px;border:1px solid var(--border);background:radial-gradient(circle at 50% 120%,rgba(230,0,0,.08),transparent 60%),repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0 2px,transparent 2px 18px),#121212;color:var(--muted);font-family:var(--font-d);font-size:20px;letter-spacing:.1em;cursor:pointer;transition:background .15s,border-color .15s}
.tap-zone.is-charging{border-color:var(--red-dim);background:radial-gradient(circle at 50% 120%,rgba(230,0,0,.22),transparent 65%),#121212;color:var(--white)}

.overlay{position:absolute;inset:0;background:rgba(10,10,10,.94);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 24px;text-align:center;gap:12px}
.overlay-title{font-family:var(--font-d);font-size:44px;font-weight:700;letter-spacing:.03em;margin:0;color:var(--white)}
.overlay-title.is-champion{color:var(--gold);text-shadow:0 0 24px rgba(255,210,77,.5)}
@media(max-width:420px){.overlay-title{font-size:36px}}
.overlay-copy{font-size:14px;line-height:1.5;color:var(--muted);max-width:340px;margin:0}
.btn-primary{font-family:var(--font-d);font-size:18px;letter-spacing:.08em;font-weight:600;padding:12px 44px;border-radius:100px;cursor:pointer;min-width:180px;background:var(--red);border:1px solid var(--red);color:var(--white)}
.best-label{font-family:var(--font-d);font-size:14px;letter-spacing:.08em;color:var(--muted);margin-top:4px}

.countdown-number{font-family:var(--font-d);font-size:100px;font-weight:700;color:var(--white);opacity:0;transform:scale(2);transition:all .3s cubic-bezier(.2,1.4,.4,1)}
.countdown-number.is-pop{opacity:1;transform:scale(1)}
.countdown-number.is-go{color:var(--red)}

.final-score{margin:0}
.final-score span{font-family:var(--font-d);font-size:72px;font-weight:700;color:var(--red);line-height:1}
.end-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:280px;margin:6px 0 10px}
.es-item{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:14px;padding:12px 8px;text-align:center}
.es-val{display:block;font-family:var(--font-d);font-size:24px;font-weight:700;line-height:1}
.es-lbl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.best-badge{font-family:var(--font-d);font-size:14px;letter-spacing:.1em;font-weight:700;color:var(--gold);border:1px solid var(--gold);padding:4px 14px;border-radius:100px;animation:pulse-tag 1.2s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}