/* ── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --p1: #00C9A7;
  --p1-dark: #009980;
  --p1-glow: rgba(0,201,167,0.35);
  --p2: #FF6B6B;
  --p2-dark: #cc4444;
  --p2-glow: rgba(255,107,107,0.35);
  --bg: #0d0f14;
  --bg2: #13161d;
  --bg3: #1a1e28;
  --surface: #1e2330;
  --border: rgba(255,255,255,0.08);
  --text: #f0f2f5;
  --muted: rgba(240,242,245,0.45);
  --net: rgba(255,255,255,0.12);
  --font-display: 'Bebas Neue', sans-serif;
  --font-ui: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── Screens ─────────────────────────────────────── */
.screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.3s ease;
}
.screen.active { opacity: 1; pointer-events: all; }
.screen.hidden { opacity: 0; pointer-events: none; }

/* ── SETUP SCREEN ────────────────────────────────── */
#screen-setup {
  background: var(--bg);
  flex-direction: column;
}

.setup-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-ball {
  position: absolute;
  border-radius: 50%;
  opacity: 0.04;
}
.ball-1 { width: 500px; height: 500px; background: var(--p1); top: -200px; left: -150px; animation: float 8s ease-in-out infinite; }
.ball-2 { width: 400px; height: 400px; background: var(--p2); bottom: -150px; right: -100px; animation: float 10s ease-in-out infinite reverse; }
.ball-3 { width: 200px; height: 200px; background: white; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: float 6s ease-in-out infinite 2s; }

@keyframes float {
  0%, 100% { transform: translate(0,0); }
  50% { transform: translate(20px, -30px); }
}
.ball-3 {
  transform: translate(-50%,-50%);
}
@keyframes float3 {
  0%, 100% { transform: translate(-50%,-50%); }
  50% { transform: translate(calc(-50% + 20px), calc(-50% - 30px)); }
}
.ball-3 { animation: float3 6s ease-in-out infinite 2s; }

.setup-container {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 24px;
  width: 100%; max-width: 480px;
  padding: 20px;
}

.logo {
  text-align: center;
  line-height: 1;
}
.logo-ping {
  font-family: var(--font-display);
  font-size: 52px;
  color: var(--p1);
  letter-spacing: 4px;
}
.logo-score {
  font-family: var(--font-display);
  font-size: 52px;
  color: var(--p2);
  letter-spacing: 4px;
}
.logo-sub {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 4px;
}

.setup-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 28px 24px;
  width: 100%;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.setup-card.hidden {
  display: none;
}

.step-title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
  text-align: center;
}

/* Player inputs */
.player-inputs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.player-input-group {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.player-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-p1 { background: var(--p1); box-shadow: 0 0 8px var(--p1-glow); }
.dot-p2 { background: var(--p2); box-shadow: 0 0 8px var(--p2-glow); }

.player-input-group input {
  flex: 1;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.player-input-group.p1 input:focus { border-color: var(--p1); box-shadow: 0 0 0 3px var(--p1-glow); }
.player-input-group.p2 input:focus { border-color: var(--p2); box-shadow: 0 0 0 3px var(--p2-glow); }
.player-input-group input::placeholder { color: rgba(240,242,245,0.2); }

.vs-divider {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--muted);
  letter-spacing: 2px;
}

/* Format options */
.format-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.format-row {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.format-label {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 1px;
  white-space: nowrap;
}

/* Scroll picker */
.scroll-picker {
  position: relative;
  width: 72px; height: 56px;
  overflow: hidden;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.scroll-picker::before,
.scroll-picker::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 14px;
  z-index: 2;
  pointer-events: none;
}
.scroll-picker::before { top: 0; background: linear-gradient(to bottom, var(--bg2), transparent); }
.scroll-picker::after  { bottom: 0; background: linear-gradient(to top, var(--bg2), transparent); }

.picker-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.2s cubic-bezier(0.25,0.46,0.45,0.94);
}

.picker-item {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--muted);
  transition: color 0.2s, transform 0.2s;
  user-select: none;
}
.picker-item.selected {
  color: var(--text);
  transform: scale(1.1);
}

/* Serve options */
.serve-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.serve-btn {
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  text-align: center;
}
.serve-btn:active { transform: scale(0.97); }
#serve-p1:hover { border-color: var(--p1); background: rgba(0,201,167,0.08); }
#serve-p2:hover { border-color: var(--p2); background: rgba(255,107,107,0.08); }

/* Buttons */
.btn-next {
  width: 100%;
  margin-top: 20px;
  background: var(--p1);
  border: none;
  border-radius: 10px;
  padding: 14px;
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 3px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.btn-next:active { transform: scale(0.98); background: var(--p1-dark); }

.btn-back {
  width: 100%;
  margin-top: 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.btn-back:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }

/* ── GAME SCREEN ─────────────────────────────────── */
#screen-game {
  background: var(--bg);
  overflow: hidden;
  padding: 0;
  flex-direction: column;
}

/* Serving overlay */
.serve-overlay {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: background 0.5s ease, transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.serve-overlay.left {
  background: linear-gradient(to right, var(--p1-glow) 0%, transparent 55%);
}
.serve-overlay.right {
  background: linear-gradient(to left, var(--p2-glow) 0%, transparent 55%);
}

/* Round tracker */
.round-tracker {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: rgba(13,15,20,0.8);
  border-bottom: 1px solid var(--border);
  border-radius: 0 0 12px 12px;
  min-width: 140px;
}
.round-tracker.hidden { display: none; }

.round-info {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
}

.round-pips {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pip {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  transition: background 0.3s, border-color 0.3s;
}
.pip.win-p1 { background: var(--p1); border-color: var(--p1); }
.pip.win-p2 { background: var(--p2); border-color: var(--p2); }
.pip.current { border-color: rgba(255,255,255,0.4); }

/* Game field */
.game-field {
  position: relative; z-index: 2;
  display: flex;
  width: 100%; height: 100%;
  flex: 1;
}

/* Player sides */
.player-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.player-side::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, transparent 60%, rgba(0,0,0,0.3) 100%);
  pointer-events: none;
}

.side-left { background: linear-gradient(135deg, rgba(0,201,167,0.04) 0%, transparent 60%); }
.side-right { background: linear-gradient(225deg, rgba(255,107,107,0.04) 0%, transparent 60%); }

.score-display {
  font-family: var(--font-display);
  font-size: clamp(100px, 22vw, 180px);
  line-height: 0.9;
  color: var(--text);
  transition: transform 0.12s cubic-bezier(0.34,1.56,0.64,1), color 0.2s;
  position: relative; z-index: 1;
  letter-spacing: -2px;
}
.side-left .score-display { color: rgba(240,242,245,0.92); }
.side-right .score-display { color: rgba(240,242,245,0.92); }

.score-display.pop {
  animation: score-pop 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes score-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.player-name-banner {
  font-family: var(--font-ui);
  font-size: clamp(14px, 2.5vw, 22px);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  position: absolute;
  top: 16px;
}
.side-left .player-name-banner { left: 20px; }
.side-right .player-name-banner { right: 20px; }

.tap-hint {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  color: rgba(240,242,245,0.12);
  text-transform: uppercase;
  position: absolute;
  bottom: 20px;
}
.tap-hint.right { right: 20px; }

/* Tap pulse effect */
.score-pulse {
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: scale(0);
}
.side-left .score-pulse { background: radial-gradient(circle, var(--p1-glow), transparent 70%); }
.side-right .score-pulse { background: radial-gradient(circle, var(--p2-glow), transparent 70%); }
.score-pulse.flash {
  animation: pulse-flash 0.4s ease-out forwards;
}
@keyframes pulse-flash {
  0% { opacity: 1; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(2); }
}

/* Center divider */
.center-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  flex-shrink: 0;
  position: relative; z-index: 5;
  gap: 8px;
}

.net-line {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: repeating-linear-gradient(
    to bottom,
    var(--net) 0px,
    var(--net) 8px,
    transparent 8px,
    transparent 14px
  );
}

.center-badge {
  width: 32px; height: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}

.serve-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  transition: background 0.4s, box-shadow 0.4s, transform 0.4s;
}
.serve-dot.left-serve {
  background: var(--p1);
  box-shadow: 0 0 8px var(--p1-glow);
  transform: translateX(-2px);
}
.serve-dot.right-serve {
  background: var(--p2);
  box-shadow: 0 0 8px var(--p2-glow);
  transform: translateX(2px);
}

.serve-dot.serving {
  animation: serve-pulse 1.2s ease-in-out infinite;
}
@keyframes serve-pulse {
  0%, 100% { transform: scale(1) translateX(-2px); }
  50% { transform: scale(1.4) translateX(-2px); }
}
.serve-dot.right-serve.serving {
  animation: serve-pulse-r 1.2s ease-in-out infinite;
}
@keyframes serve-pulse-r {
  0%, 100% { transform: scale(1) translateX(2px); }
  50% { transform: scale(1.4) translateX(2px); }
}

.undo-btn {
  font-size: 20px;
  color: var(--muted);
  cursor: pointer;
  z-index: 1;
  padding: 8px;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}
.undo-btn:active { color: var(--text); background: var(--surface); }

/* Deuce badge */
.deuce-badge {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: var(--surface);
  border: 1px solid rgba(255,200,0,0.4);
  color: #ffc800;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 4px;
  padding: 4px 16px;
  border-radius: 20px;
  animation: deuce-appear 0.3s ease;
}
.deuce-badge.hidden { display: none; }
@keyframes deuce-appear {
  from { transform: translateX(-50%) scale(0.8); opacity: 0; }
  to { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* ── ROUND WIN SCREEN ────────────────────────────── */
#screen-round-win {
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  padding: max(24px, 6vh) 20px 40px;
}
.result-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(30,35,48,0.95) 0%, rgba(13,15,20,0.98) 100%);
}
.result-card {
  position: relative; z-index: 2;
  text-align: center;
  animation: card-rise 0.5s cubic-bezier(0.34,1.2,0.64,1);
}
@keyframes card-rise {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.result-round-label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 5px;
  color: var(--muted);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.result-winner-name {
  font-family: var(--font-display);
  font-size: clamp(52px, 10vw, 88px);
  line-height: 1;
  letter-spacing: 2px;
  background: linear-gradient(135deg, var(--p1), #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}
.result-winner-name.p2-win {
  background: linear-gradient(135deg, var(--p2), #fff);
  -webkit-background-clip: text;
  background-clip: text;
}

.result-score-line {
  font-family: var(--font-ui);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 4px;
  color: var(--muted);
  margin-bottom: 16px;
}

.result-series {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
  min-height: 24px;
}

.series-pip {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
}
.series-pip.p1 { background: var(--p1); border-color: var(--p1); }
.series-pip.p2 { background: var(--p2); border-color: var(--p2); }

.btn-continue {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 14px 36px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.btn-continue:hover { background: var(--bg3); border-color: rgba(255,255,255,0.25); }
.btn-continue:active { transform: scale(0.97); }

/* ── TOURNAMENT WIN SCREEN ───────────────────────── */
#screen-tournament-win {
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  padding: max(24px, 6vh) 20px 40px;
}

.tournament-bg {
  position: absolute; inset: 0;
  background: var(--bg);
  overflow: hidden;
}

.trophy-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,0,0.08) 0%, transparent 70%);
  animation: glow-pulse 2s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%,-50%) scale(1.2); opacity: 0.7; }
}

.tournament-card {
  position: relative; z-index: 2;
  text-align: center;
  animation: card-rise 0.6s cubic-bezier(0.34,1.2,0.64,1);
}

.tournament-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 6px;
  color: #ffc800;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.tournament-winner {
  font-family: var(--font-display);
  font-size: clamp(56px, 12vw, 100px);
  line-height: 0.95;
  letter-spacing: 2px;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #ffd700, #fff, #ffa500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
  background-size: 200% auto;
}
@keyframes shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.trophy-icon {
  font-size: 52px;
  margin: 8px 0;
  animation: trophy-bounce 1s cubic-bezier(0.34,1.56,0.64,1) 0.4s both;
}
@keyframes trophy-bounce {
  from { transform: scale(0) rotate(-10deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}

.tournament-rounds {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 12px 0;
  flex-wrap: wrap;
}

.round-result-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 14px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
}
.round-result-pill.win-p1 { border-color: var(--p1); color: var(--p1); }
.round-result-pill.win-p2 { border-color: var(--p2); color: var(--p2); }

.tournament-score-summary {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 4px;
  color: var(--muted);
  margin-bottom: 24px;
}

.btn-row {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.btn-new-game, .btn-rematch {
  border-radius: 10px;
  padding: 12px 28px;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 3px;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
}
.btn-new-game:active, .btn-rematch:active { transform: scale(0.97); }

.btn-rematch {
  background: var(--p1);
  border: none;
  color: var(--bg);
}
.btn-new-game {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-new-game:hover { border-color: rgba(255,255,255,0.25); }

/* ── Game controls (exit + voice) ────────────────── */
.game-controls {
  position: absolute;
  bottom: max(14px, env(safe-area-inset-bottom));
  right: max(14px, env(safe-area-inset-right));
  z-index: 20;
  display: flex;
  gap: 10px;
  align-items: center;
}

.ctrl-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(13,15,20,0.75);
  color: var(--muted);
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  line-height: 1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  user-select: none;
  -webkit-user-select: none;
}
.ctrl-btn:active { transform: scale(0.92); }
.exit-btn:hover { color: var(--p2); border-color: var(--p2); }

.voice-btn.active {
  background: rgba(0,201,167,0.18);
  border-color: var(--p1);
  color: var(--p1);
  animation: voice-ring 1.5s ease-in-out infinite;
}
@keyframes voice-ring {
  0%, 100% { box-shadow: 0 0 0 0 var(--p1-glow); }
  50% { box-shadow: 0 0 0 6px transparent; }
}
.voice-btn.listening {
  background: rgba(0,201,167,0.25);
  border-color: var(--p1);
  animation: voice-ring 0.8s ease-in-out infinite;
}

/* Voice toast */
.voice-toast {
  position: absolute;
  bottom: 62px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(30,35,48,0.92);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 18px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text);
  white-space: nowrap;
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  backdrop-filter: blur(4px);
}
.voice-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.voice-toast.heard-p1 { border-color: var(--p1); color: var(--p1); }
.voice-toast.heard-p2 { border-color: var(--p2); color: var(--p2); }
.voice-toast.heard-error { border-color: rgba(255,200,0,0.4); color: #ffc800; }

/* Exit dialog */
.exit-dialog {
  position: absolute; inset: 0;
  z-index: 50;
  background: rgba(13,15,20,0.85);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.exit-dialog.hidden { display: none; }

.exit-dialog-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 32px 24px;
  text-align: center;
  animation: card-rise 0.2s ease;
  min-width: 220px;
}
.exit-dialog-title {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 6px;
}
.exit-dialog-sub {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.exit-dialog-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.exit-dialog-btns button {
  border-radius: 8px;
  padding: 10px 22px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
}
.exit-dialog-btns button:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }
.exit-dialog-btns button:active { transform: scale(0.96); }
.exit-confirm-btn {
  background: rgba(255,107,107,0.15) !important;
  border-color: var(--p2) !important;
  color: var(--p2) !important;
}

/* ── Confetti ─────────────────────────────────────── */
.confetti-container {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 1px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0.3; }
}

/* ── Made by ──────────────────────────────────────── */
.made-by {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(240,242,245,0.18);
  letter-spacing: 0.5px;
  z-index: 10;
}
.made-by strong { font-weight: 600; color: rgba(240,242,245,0.28); }

/* ── Utilities ───────────────────────────────────── */
.hidden { display: none !important; }

/* ── Streak pill ──────────────────────────────────── */
.streak-pill {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 20px;
  z-index: 1;
  transition: opacity 0.2s, transform 0.2s;
  animation: streak-pop 0.25s cubic-bezier(0.34,1.56,0.64,1);
  white-space: nowrap;
}
.streak-p1 { color: var(--p1); border: 1px solid var(--p1); background: rgba(0,201,167,0.1); }
.streak-p2 { color: var(--p2); border: 1px solid var(--p2); background: rgba(255,107,107,0.1); }
@keyframes streak-pop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── Point history trail ──────────────────────────── */
.point-history {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  flex-wrap: nowrap;
  align-items: center;
  z-index: 10;
  pointer-events: none;
  max-width: 90vw;
  overflow: hidden;
}
.ph-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.7;
  animation: ph-appear 0.2s ease;
}
.ph-p1 { background: var(--p1); }
.ph-p2 { background: var(--p2); }
@keyframes ph-appear {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 0.7; }
}

/* ── Win screen stats ─────────────────────────────── */
.tw-stats {
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 5px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
}
.stat-label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
}
.stat-value {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text);
  white-space: nowrap;
}

/* ── Landscape lock ───────────────────────────────── */
@media (orientation: portrait) and (max-width: 768px) {
  /* Only show the rotate overlay when on the game screen */
  body[data-screen="screen-game"]::before {
    content: 'Rotate your device to landscape 📱';
    position: fixed; inset: 0;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    font-family: var(--font-ui);
    font-size: 18px;
    letter-spacing: 1px;
    color: var(--muted);
    text-align: center;
    padding: 20px;
  }
}

/* Setup: allow portrait scrolling on small screens */
@media (max-width: 600px) {
  #screen-setup {
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .setup-container {
    max-width: 100%;
    padding: 24px 16px 32px;
  }
  .logo-ping, .logo-score { font-size: 42px; }
}