/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

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

/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  --bg:           #07090F;
  --surface:      #0C1018;
  --surface-2:    #111827;
  --surface-3:    #182030;
  --border:       #1A2235;
  --border-hi:    #273045;

  --orange:       #FF5C00;
  --orange-2:     #FF7A2B;
  --orange-dim:   rgba(255,92,0,.1);
  --orange-glow:  0 0 24px rgba(255,92,0,.35);

  --white:        #F0F4FF;
  --text-1:       #E8EDF8;
  --text-2:       #8896B0;
  --text-3:       #4A5568;

  --green:        #00D68A;
  --green-dim:    rgba(0,214,138,.1);
  --red:          #FF3B5C;
  --red-dim:      rgba(255,59,92,.1);
  --gold:         #FFB800;
  --blue:         #3B9EFF;
  --blue-dim:     rgba(59,158,255,.1);
  --purple:       #A855F7;
  --purple-dim:   rgba(168,85,247,.1);

  --font-display: 'Barlow Condensed', sans-serif;
  --font-ui:      'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  --radius:       6px;
  --radius-sm:    4px;
  --radius-lg:    10px;

  --shadow-sm:    0 1px 3px rgba(0,0,0,.4);
  --shadow:       0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:    0 8px 40px rgba(0,0,0,.6);

  --header-h:     52px;
  --scoreboard-h: 72px;
  --nav-h:        58px;
  --transition:   .15s ease;
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
html { font-size: 16px; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text-1);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Grain overlay */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: .6;
}

/* ── Auth Screen ───────────────────────────────────────────────────────────── */
#auth-screen {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg);
  overflow: hidden;
}

/* Decorative court half-circle */
#auth-screen::after {
  content: '';
  position: absolute;
  bottom: -180px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 360px;
  border: 2px solid rgba(255,92,0,.08);
  border-radius: 300px 300px 0 0;
  pointer-events: none;
}
#auth-screen::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,92,0,.06) 0%, transparent 70%);
  pointer-events: none;
}

.auth-card {
  position: relative; z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  width: 100%; max-width: 420px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,92,0,.05);
}

/* Orange top bar */
.auth-card::before {
  content: '';
  position: absolute;
  top: 0; left: 36px; right: 36px; height: 2px;
  background: var(--orange);
  border-radius: 0 0 2px 2px;
}

.auth-logo {
  margin-bottom: 32px;
}

.auth-logo .logo-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.auth-logo .ball-icon {
  width: 40px; height: 40px;
  background: var(--orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: var(--orange-glow);
}

.auth-logo h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--white);
  letter-spacing: .5px;
}

.auth-logo p {
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-top: 2px;
}
.auth-logo .slogan {
  font-size: 14px;
  font-style: italic;
  color: var(--text-2);
  letter-spacing: .3px;
  text-transform: none;
}

.form-group { margin-bottom: 14px; }

.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

input, select, textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: var(--font-ui);
  color: var(--text-1);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-dim);
}

input::placeholder { color: var(--text-3); }

select option { background: var(--surface-2); }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 13px;
  font-family: var(--font-ui);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  min-height: 40px;
  white-space: nowrap;
  user-select: none;
  letter-spacing: .2px;
  position: relative;
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .35; pointer-events: none; }

.btn-primary {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.btn-primary:hover { background: var(--orange-2); border-color: var(--orange-2); }

.btn-secondary {
  background: var(--surface-3);
  color: var(--text-1);
  border-color: var(--border-hi);
}
.btn-secondary:hover { border-color: var(--orange); color: var(--orange); }

.btn-danger  { background: var(--red-dim); color: var(--red); border-color: rgba(255,59,92,.25); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-success { background: var(--green-dim); color: var(--green); border-color: rgba(0,214,138,.25); }
.btn-success:hover { background: var(--green); color: #000; }

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border-hi);
}
.btn-ghost:hover { color: var(--text-1); border-color: var(--border-hi); background: var(--surface-2); }

.btn-full  { width: 100%; }
.btn-sm    { padding: 6px 12px; font-size: 12px; min-height: 32px; }
.btn-xs    { padding: 3px 8px; font-size: 11px; min-height: 26px; border-radius: 4px; }

.auth-switch {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-3);
}
.auth-switch a {
  color: var(--orange);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

/* ── App Shell ─────────────────────────────────────────────────────────────── */
#app-screen { display: none; flex-direction: column; min-height: 100vh; }
#app-screen.visible { display: flex; }

/* ── Header ────────────────────────────────────────────────────────────────── */
.app-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 16px; gap: 12px;
}

.app-header .logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--orange);
  letter-spacing: .5px;
  white-space: nowrap;
}

.app-header .spacer { flex: 1; }
.app-header .help-link { text-decoration: none; }
@media (max-width: 480px) {
  .app-header .help-link .help-label { display: none; }
}

.user-badge { display: flex; align-items: center; gap: 8px; }
.user-badge .name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: .2px;
}

.role-chip {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  background: var(--orange);
  color: #fff;
}
.role-chip.viewer  { background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border-hi); }
.role-chip.scorer  { background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(59,158,255,.25); }
.role-chip.admin   { background: var(--orange-dim); color: var(--orange); border: 1px solid rgba(255,92,0,.3); }

/* ── Scoreboard ────────────────────────────────────────────────────────────── */
.scoreboard {
  position: fixed;
  top: var(--header-h); left: 0; right: 0; z-index: 99;
  height: var(--scoreboard-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 16px; gap: 6px;
}

/* Orange accent line */
.scoreboard::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  opacity: .5;
}

.score-team {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
}

.score-team .team-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 1px;
  text-transform: uppercase;
  max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.score-team .score {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}

.score-divider {
  text-align: center;
  padding: 0 12px;
  min-width: 80px;
}
.score-divider .quarter {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.scoreboard.hidden { display: none; }

/* ── Bottom Navigation ─────────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
}

.nav-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; border: none; background: none; cursor: pointer;
  color: var(--text-3);
  transition: color var(--transition);
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
}

.nav-tab::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%; height: 2px;
  background: var(--orange);
  border-radius: 0 0 2px 2px;
  transform: scaleX(0);
  transition: transform var(--transition);
}

.nav-tab.active { color: var(--orange); }
.nav-tab.active::before { transform: scaleX(1); }

.nav-tab .icon { font-size: 18px; }
.nav-tab .label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}

/* ── Main content ──────────────────────────────────────────────────────────── */
.main-content {
  margin-top: calc(var(--header-h) + var(--scoreboard-h));
  margin-bottom: var(--nav-h);
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative; z-index: 1;
}
.main-content.no-scoreboard { margin-top: var(--header-h); }

/* ── Views ─────────────────────────────────────────────────────────────────── */
.view { display: none; padding: 12px; }
.view.active { display: block; }

.view-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 16px; gap: 8px;
}

.view-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .5px;
}
#detail-game-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
  .view-header .btn-label { display: none; }
}

/* ── Game Cards ────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 8px;
}

.game-card {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.game-card:hover { border-color: var(--border-hi); background: var(--surface-2); }
.game-card:active { transform: scale(.99); }

.game-card .teams { flex: 1; min-width: 0; }
.game-card .game-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: .3px;
}
.game-card .game-title .comp { color: var(--text-3); font-weight: 500; }
.game-card .matchup {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
  margin: 4px 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--white);
  overflow-wrap: anywhere;
}
.game-card .matchup .vs {
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.game-card .game-date { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }

.game-card .score-display { text-align: center; min-width: 64px; }
.game-card .score-display .pts {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.game-card .score-display .vs { font-size: 10px; color: var(--text-3); letter-spacing: 1px; }

/* Status badges */
.status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.status-badge.live {
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid rgba(255,59,92,.2);
}
.status-badge.live::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--red);
  animation: pulse-dot 1.2s infinite;
}
.status-badge.scheduled {
  background: var(--surface-3);
  color: var(--text-3);
  border: 1px solid var(--border-hi);
}
.status-badge.finished {
  background: var(--green-dim);
  color: var(--green);
  border: 1px solid rgba(0,214,138,.2);
}

@keyframes pulse-dot { 0%,100% { opacity:1; transform:scale(1) } 50% { opacity:.4; transform:scale(.6) } }

/* ── Filter Bar ────────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}

.filter-bar select,
.filter-bar input[type=date] {
  flex: 1; min-width: 120px; max-width: 180px;
  padding: 7px 10px; font-size: 12px;
}

/* ── Live View ─────────────────────────────────────────────────────────────── */

/* Quarter controls */
.quarter-controls {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.quarter-display {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Team tabs */
.team-tabs { display: flex; gap: 0; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

.team-tab {
  flex: 1; padding: 10px;
  background: var(--surface);
  border: none; cursor: pointer;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  letter-spacing: .5px;
  text-align: center;
  text-transform: uppercase;
  transition: all var(--transition);
  color: var(--text-3);
}
.team-tab + .team-tab { border-left: 1px solid var(--border); }
.team-tab.active { background: var(--orange-dim); color: var(--orange); }

/* ── Player Cards ──────────────────────────────────────────────────────────── */
.player-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: border-left-color var(--transition);
  position: relative;
}

.player-card.on-court  { border-left-color: var(--green); }
.player-card.off-court { opacity: .6; }
.player-card.fouled-out {
  border-left-color: var(--red);
  background: rgba(255,59,92,.04);
}

.player-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}

.jersey {
  width: 34px; height: 34px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 900;
  flex-shrink: 0;
  color: #fff;
}

.player-info { flex: 1; min-width: 0; }
.player-info .name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-info .stats-line {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

.court-toggle {
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  border: 1px solid;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.court-toggle.on  { background: var(--green-dim); color: var(--green); border-color: rgba(0,214,138,.3); }
.court-toggle.off { background: var(--surface-3); color: var(--text-3); border-color: var(--border-hi); }

/* ── Fouls ─────────────────────────────────────────────────────────────────── */
.fouls-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.fouls-row .label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: .8px;
  text-transform: uppercase;
  min-width: 48px;
}

.foul-circles { display: flex; gap: 4px; }

.foul-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border-hi);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text-3);
  background: var(--surface-2);
}
.foul-dot.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 0 8px rgba(255,59,92,.4);
}
.foul-dot:nth-child(5).active { animation: foul-shake .35s ease; }

@keyframes foul-shake {
  0%,100% { transform: translateX(0) }
  25% { transform: translateX(-3px) rotate(-5deg) }
  75% { transform: translateX(3px) rotate(5deg) }
}

/* ── Stat counters ─────────────────────────────────────────────────────────── */
.stat-row {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px; flex-wrap: wrap;
}
.stat-row .label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: .8px;
  text-transform: uppercase;
  min-width: 66px;
}

.counter { display: flex; align-items: center; gap: 4px; }
/* Read-only (finished game): same footprint as the editable counter, no buttons */
.counter.readonly { min-width: 82px; justify-content: center; }
.foul-circles.readonly .foul-dot { cursor: default; }
.readonly-note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-2);
}

.counter-btn {
  width: 26px; height: 26px;
  border-radius: 4px;
  border: 1px solid var(--border-hi);
  background: var(--surface-2);
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
  transition: all var(--transition);
}
.counter-btn:active { transform: scale(.88); }
.counter-btn.plus { border-color: rgba(255,92,0,.3); color: var(--orange); background: var(--orange-dim); }
.counter-btn.minus { border-color: var(--border-hi); color: var(--text-3); }

.counter-val {
  min-width: 22px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-1);
}

/* ── Points allowed ────────────────────────────────────────────────────────── */
.pts-allowed-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}

.pts-allowed-btn {
  background: var(--orange-dim);
  border: 1px solid rgba(255,92,0,.3);
  color: var(--orange);
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  transition: all var(--transition);
}
.pts-allowed-btn:active { background: var(--orange); color: #fff; }

/* ── Shoot buttons ─────────────────────────────────────────────────────────── */
.shoot-row {
  display: flex; gap: 5px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
}

.shoot-btn {
  padding: 7px 12px;
  border-radius: 4px;
  border: 1px solid;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  transition: all var(--transition);
  display: flex; align-items: center; gap: 4px;
}
.shoot-btn:active { transform: scale(.92); }

.shoot-btn.made {
  border-color: rgba(0,214,138,.3);
  color: var(--green);
  background: var(--green-dim);
}
.shoot-btn.made:active { background: var(--green); color: #000; }

.shoot-btn.miss {
  border-color: rgba(255,59,92,.3);
  color: var(--red);
  background: var(--red-dim);
}
.shoot-btn.miss:active { background: var(--red); color: #fff; }

.shoot-btn.ft {
  border-color: rgba(59,158,255,.3);
  color: var(--blue);
  background: var(--blue-dim);
}
.shoot-btn.ft:active { background: var(--blue); color: #fff; }

.shoot-btn[style*="purple"] {
  border-color: rgba(168,85,247,.3) !important;
  color: var(--purple) !important;
  background: var(--purple-dim) !important;
}

/* ── Timeout section ───────────────────────────────────────────────────────── */
.timeouts-section, .team-fouls-section, .quarter-accordion {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
}

.timeouts-section h4, .team-fouls-section h4, .quarter-accordion h4 {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.quarter-accordion h4 { cursor: pointer; }

.timeout-row, .team-foul-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.timeout-row .team-label, .team-foul-row .team-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  min-width: 80px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.timeout-btn {
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  border: 1px solid rgba(59,158,255,.3);
  color: var(--blue);
  background: var(--blue-dim);
  cursor: pointer;
  transition: all var(--transition);
}
.timeout-btn.used {
  border-color: var(--border);
  color: var(--text-3);
  background: transparent;
}

/* Team fouls */
.team-foul-quarters { display: flex; flex-wrap: wrap; row-gap: 6px; flex: 1; }
.team-foul-q { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; }
.team-foul-dots { display: flex; gap: 4px; }
.team-foul-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border-hi);
  background: var(--surface-2);
  cursor: pointer;
  transition: all var(--transition);
}
.team-foul-dot.active { background: var(--orange); border-color: var(--orange); }

/* Quarter scores */
.q-grid {
  display: grid;
  grid-template-columns: 36px 1fr 1fr;
  gap: 4px 8px; font-size: 12px;
}
.q-grid .q-header { font-weight: 700; color: var(--text-3); font-size: 11px; }
.q-grid input[type=number] {
  width: 100%; padding: 4px 6px;
  font-size: 12px; text-align: center;
}

/* ── FAB Undo ──────────────────────────────────────────────────────────────── */
.fab-undo {
  position: fixed;
  right: 14px;
  bottom: calc(var(--nav-h) + 14px);
  z-index: 90;
  background: var(--surface-3);
  color: var(--text-2);
  border: 1px solid var(--border-hi);
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 6px;
  transition: all var(--transition);
}
.fab-undo:hover { background: var(--orange-dim); color: var(--orange); border-color: rgba(255,92,0,.3); }
.fab-undo:active { transform: scale(.95); }

/* ── Undo Panel ────────────────────────────────────────────────────────────── */
.undo-panel {
  position: fixed;
  bottom: var(--nav-h); left: 0; right: 0; z-index: 89;
  background: var(--surface);
  border-top: 1px solid var(--border-hi);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.5);
  max-height: 55vh; overflow-y: auto;
  transform: translateY(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.undo-panel.open { transform: translateY(0); }

.undo-panel-header {
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--surface);
}
.undo-panel-header h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.undo-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.undo-item .event-label { flex: 1; font-size: 13px; color: var(--text-1); }
.undo-item .event-time  { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); }
.undo-item.undone { opacity: .35; }
.undo-item.undone .event-label { text-decoration: line-through; }

/* ── Box Score ─────────────────────────────────────────────────────────────── */
.boxscore-tabs {
  display: flex; gap: 0;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.bs-tab {
  flex: 1;
  padding: 9px 16px;
  background: var(--surface);
  border: none;
  font-size: 12px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  cursor: pointer;
  color: var(--text-3);
  transition: all var(--transition);
  white-space: nowrap;
}
.bs-tab + .bs-tab { border-left: 1px solid var(--border); }
.bs-tab.active { background: var(--orange-dim); color: var(--orange); }

.boxscore-actions {
  display: flex; gap: 8px;
  margin-bottom: 14px; flex-wrap: wrap;
}

/* Table */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table {
  width: 100%; border-collapse: collapse;
  font-size: 12px; min-width: 700px;
  font-family: var(--font-mono);
}

th {
  background: var(--surface-2);
  color: var(--text-3);
  padding: 8px 8px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-ui);
  letter-spacing: .8px;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
th:first-child, td:first-child { text-align: left; padding-left: 12px; }

td {
  padding: 7px 8px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

tr:last-child td {
  border-bottom: none;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-1);
}

tr:hover:not(:last-child) td { background: var(--surface-2); }

/* ── Shot Chart ─────────────────────────────────────────────────────────────── */
.shotchart-container { position: relative; max-width: 500px; margin: 0 auto; }

#shot-chart-svg {
  width: 100%; height: auto;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
}

/* Court theme: dark parquet */
.court-bg  { fill: #1A1408; }
.paint-fill { fill: rgba(255,92,0,.06); }
.court-line { fill: none; stroke: rgba(255,138,50,.5); stroke-width: 1.5; }
.court-line-thin { fill: none; stroke: rgba(255,138,50,.3); stroke-width: 1; }

.heatmap-canvas {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: var(--radius);
  pointer-events: none; opacity: .65;
}

.shot-marker { cursor: pointer; transition: all .1s; }
.shot-marker:hover { filter: brightness(1.3) drop-shadow(0 0 4px currentColor); }

.shotchart-filters {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 10px;
}

.filter-chip {
  padding: 5px 12px;
  border-radius: 3px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  border: 1px solid var(--border-hi);
  background: var(--surface);
  cursor: pointer;
  color: var(--text-3);
  transition: all var(--transition);
}
.filter-chip.active {
  border-color: rgba(255,92,0,.4);
  color: var(--orange);
  background: var(--orange-dim);
}

.player-chips {
  display: flex; gap: 6px;
  overflow-x: auto; padding-bottom: 4px;
  margin-bottom: 10px;
}

.player-chip {
  padding: 5px 12px;
  border-radius: 3px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .3px;
  border: 1px solid var(--border-hi);
  background: var(--surface);
  cursor: pointer; white-space: nowrap;
  color: var(--text-3);
  transition: all var(--transition);
}
.player-chip.active { color: #fff; border-color: transparent; }

/* ── Bottom Sheet ──────────────────────────────────────────────────────────── */
.bottom-sheet-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  display: none; align-items: flex-end;
}
.bottom-sheet-overlay.open { display: flex; }

.bottom-sheet {
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 16px;
  width: 100%;
  max-height: 92vh; overflow-y: auto;
  animation: slideUp .25s cubic-bezier(.4,0,.2,1);
}

@keyframes slideUp { from { transform: translateY(100%); opacity:0 } to { transform: translateY(0); opacity:1 } }

.sheet-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.sheet-title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}

/* Defender chips */
.defender-select { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

.defender-chip {
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border-hi);
  background: var(--surface-2);
  cursor: pointer;
  font-size: 13px; font-weight: 600;
  color: var(--text-2);
  transition: all var(--transition);
}
.defender-chip.selected {
  border-color: rgba(255,92,0,.4);
  background: var(--orange-dim);
  color: var(--orange);
}

/* Pts allowed buttons */
.pts-allowed-btn#pa-1,
.pts-allowed-btn#pa-2,
.pts-allowed-btn#pa-3 {
  font-size: 14px; padding: 10px 20px;
}

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
  animation: modal-in .2s ease;
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal h2 {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.modal-footer {
  display: flex; gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ── Management ────────────────────────────────────────────────────────────── */
.mgmt-tabs {
  display: flex; gap: 0;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.mgmt-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  transition: border-color var(--transition);
}
.mgmt-item:hover { border-color: var(--border-hi); }

.mgmt-item .info { flex: 1; min-width: 0; }
.mgmt-item .info h4 {
  font-size: 14px; font-weight: 600;
  color: var(--text-1);
}
.mgmt-item .info p { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.mgmt-item .actions { display: flex; gap: 6px; }

.color-swatch {
  width: 18px; height: 18px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.1);
}

/* ── Toast ─────────────────────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  top: calc(var(--header-h) + 8px);
  right: 12px; z-index: 500;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}

.toast {
  background: var(--surface-3);
  color: var(--text-1);
  padding: 10px 14px 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border-hi);
  border-left: 3px solid var(--text-3);
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow);
  animation: toast-in .2s ease;
  max-width: 260px;
}
.toast.success { border-left-color: var(--green); }
.toast.error   { border-left-color: var(--red); }
.toast.warning { border-left-color: var(--gold); }

@keyframes toast-in { from { opacity:0; transform:translateX(12px) } to { opacity:1; transform:translateX(0) } }

/* ── Loader ─────────────────────────────────────────────────────────────────── */
.loader { text-align: center; padding: 48px; color: var(--text-3); font-size: 13px; }
.spinner {
  width: 28px; height: 28px;
  border: 2px solid var(--border-hi);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty state ───────────────────────────────────────────────────────────── */
.empty {
  text-align: center; padding: 48px 16px;
  color: var(--text-3);
}
.empty .icon { font-size: 40px; margin-bottom: 12px; opacity: .5; }
.empty p { font-size: 13px; letter-spacing: .2px; }

/* ── Marking button ─────────────────────────────────────────────────────────── */
.marking-pick-btn {
  flex: 1;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-ui);
}
.marking-pick-btn:hover { border-color: var(--orange); color: var(--text-1); }
.marking-pick-btn.assigned {
  background: var(--orange-dim);
  border-color: rgba(255,92,0,.35);
  color: var(--orange);
}

/* ── Print-only elements ────────────────────────────────────────────────────── */
.print-only { display: none; }
@media print { .print-only { display: block; } }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .view { max-width: 720px; margin: 0 auto; }
  #view-game-detail { max-width: none; margin: 0; }
}

/* ── PWA safe areas ─────────────────────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  }
  .main-content {
    margin-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  }
}

/* ── Print ─────────────────────────────────────────────────────────────────── */
@media print {
  .app-header, .scoreboard, .bottom-nav,
  .fab-undo, .undo-panel, .boxscore-actions, .boxscore-tabs,
  #btn-back-game, #btn-edit-game, #game-status-select { display: none !important; }
  .main-content { margin: 0 !important; }
  body { background: white; color: black; }
  .card, .player-card, table, th, td { border-color: #ccc; background: white !important; color: black; }
  .table-wrapper { overflow: visible !important; width: 100% !important; }
  table { min-width: unset !important; width: 100% !important; font-size: 10px !important; }
  th, td { padding: 4px 5px !important; }
}