:root {
  --bg: #0f3a4a;
  --bg-2: #0b2b37;
  --panel: #124857;
  --panel-2: #0e3947;
  --accent: #f5b301;
  --accent-2: #ffd166;
  --text: #f4f1e6;
  --muted: #a9b7bf;
  --danger: #ff6b6b;
  --success: #5ccf93;
  --live: #ff8a3d;
  --border: rgba(255,255,255,0.08);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(ellipse at top, #14586f 0%, var(--bg) 55%, var(--bg-2) 100%);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--accent-2); }

.hero {
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0) 60%);
  border-bottom: 1px solid var(--border);
  padding: 24px 16px 8px;
}
.hero-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.hero h1 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: 1px;
  color: var(--accent);
  text-shadow: 0 2px 0 rgba(0,0,0,0.35);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.pb-paddle {
  width: 1.1em;
  height: 1.1em;
  transform: rotate(-18deg);
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.hero-meta { margin: 6px 0; color: var(--muted); font-size: 0.95rem; letter-spacing: 1px; text-transform: uppercase; }
.connection { font-size: 0.8rem; color: var(--muted); margin: 4px 0 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.viewer-tournament-picker {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.viewer-tournament-picker select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.9rem;
  max-width: 100%;
}

.readonly-banner {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  color: var(--muted);
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.status-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--muted);
}
.status-badge.live { background: rgba(255,138,61,0.18); color: var(--live); }
.status-badge.upcoming { background: rgba(110,179,255,0.15); color: #6eb3ff; }
.status-badge.completed { background: rgba(92,207,147,0.18); color: var(--success); }
.status-badge.archived { background: rgba(255,255,255,0.06); color: var(--muted); }
.connection.live { color: var(--success); }
.connection.offline { color: var(--danger); }

/* ---------- Dashboard ---------- */

.dashboard-capture {
  background: linear-gradient(180deg, rgba(20, 88, 111, 0.35) 0%, rgba(15, 58, 74, 0.15) 100%);
  border-radius: 16px;
  padding: 14px 14px 18px;
  border: 1px solid var(--border);
}
.dash-title {
  text-align: center;
  padding: 4px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 14px;
}
.dash-title-name {
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.5px;
  line-height: 1.2;
}
.dash-title-meta {
  margin-top: 6px;
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.dash-capture-footer {
  margin-top: 14px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.65;
}
.dash-export-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.dash-export-bar .export-btn {
  background: var(--accent);
  color: #1a1a1a;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 800;
  cursor: pointer;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  transition: transform 0.08s ease, background 0.15s ease;
}
.dash-export-bar .export-btn:hover:not([disabled]) { background: var(--accent-2); transform: translateY(-1px); }
.dash-export-bar .export-btn[disabled] { opacity: 0.6; cursor: wait; }

.dash-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .dash-grid {
    grid-template-columns: 1.3fr 1fr;
    grid-template-areas:
      "focus     focus"
      "stats     stats"
      "standings bracket"
      "leader    leader";
  }
  #dash-focus      { grid-area: focus; }
  #dash-stats      { grid-area: stats; }
  #dash-standings  { grid-area: standings; }
  #dash-bracket    { grid-area: bracket; }
  #dash-leaderboard{ grid-area: leader; }
}

.dash-focus-card {
  background: linear-gradient(145deg, rgba(245,179,1,0.08) 0%, rgba(110,179,255,0.05) 60%, rgba(92,207,147,0.06) 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 20px 22px;
  position: relative;
  overflow: hidden;
}
.dash-focus-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 240px at 90% -20%, rgba(245,179,1,0.2), transparent 60%);
  pointer-events: none;
}
.dash-focus-card.live {
  border-color: rgba(255,138,61,0.55);
  box-shadow: 0 10px 44px rgba(255,138,61,0.2);
}
.dash-focus-card.completed { border-color: rgba(245,179,1,0.5); }
.dash-focus-card.upcoming { border-color: rgba(110,179,255,0.35); }
.dash-focus-card.between { border-color: var(--border); }

.focus-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 2.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.live-dot-inline {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ff3b30;
  animation: livepulse 1.4s infinite;
}

.dash-live-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.dash-live-grid.multi {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.dash-live-card {
  background: linear-gradient(135deg, #ff8a3d 0%, #f5b301 100%);
  color: #1a1a1a;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 28px rgba(255,138,61,0.25);
}
.dash-live-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.dash-live-timer {
  font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,0.3);
  color: #fff;
  padding: 2px 10px;
  border-radius: 999px;
}
.dash-live-body {
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  align-items: center;
  gap: 10px;
}
.dash-live-team {
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  font-weight: 800;
  line-height: 1.2;
  word-break: break-word;
}
.dash-live-team:last-child { text-align: right; }
.dash-live-team.leading { text-shadow: 0 1px 0 rgba(255,255,255,0.3); }
.dash-live-score {
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  background: rgba(0,0,0,0.3);
  color: #fff;
  padding: 2px 16px;
  border-radius: 10px;
  min-width: 60px;
  text-align: center;
  line-height: 1;
}
.dash-live-score.leading { color: #fff176; }
.dash-live-dash { color: rgba(0,0,0,0.55); font-size: 1.4rem; font-weight: 800; }
.dash-live-foot {
  margin-top: 8px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.85;
}

.dash-podium-big {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 12px;
  align-items: end;
  position: relative;
  z-index: 1;
}
.dash-podium-big .pod {
  text-align: center;
  padding: 14px 10px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  position: relative;
}
.dash-podium-big .pod.gold {
  background: linear-gradient(180deg, #f5b301 0%, #c78f00 100%);
  border-color: #f5b301;
  color: #1a1a1a;
  padding-top: 26px;
  padding-bottom: 28px;
  transform: translateY(-16px);
  box-shadow: 0 14px 36px rgba(245,179,1,0.4);
}
.dash-podium-big .pod.silver {
  background: linear-gradient(180deg, #d9dee5 0%, #9099a5 100%);
  border-color: #cdd3da;
  color: #1a1a1a;
}
.dash-podium-big .pod.bronze {
  background: linear-gradient(180deg, #d28558 0%, #8e5a35 100%);
  border-color: #cf7d4a;
  color: #1a1a1a;
}
.dash-podium-big .crown-big {
  position: absolute;
  top: -26px; left: 50%;
  transform: translateX(-50%);
  font-size: 2.2rem;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
  animation: crown-bob 2.4s ease-in-out infinite;
}
.dash-podium-big .medal-big { font-size: clamp(2rem, 6vw, 3rem); line-height: 1; margin-bottom: 4px; }
.dash-podium-big .place-big {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 6px;
}
.dash-podium-big .pod.gold .place-big { font-size: 0.85rem; }
.dash-podium-big .team-big {
  font-weight: 800;
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  line-height: 1.2;
  word-break: break-word;
}
.dash-podium-big .pod.gold .team-big { font-size: clamp(1.1rem, 2.8vw, 1.55rem); }
.dash-podium-big .champion-score {
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.75;
  letter-spacing: 1px;
}
.dash-podium-big .prize-big {
  margin-top: 8px;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
  color: inherit;
  display: inline-block;
  letter-spacing: 0.5px;
}
.dash-podium-big .pod.gold .prize-big {
  background: rgba(0,0,0,0.28);
  font-size: clamp(1rem, 2.3vw, 1.15rem);
}

.dash-prize-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin: 10px 0 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(245,179,1,0.15) 0%, rgba(245,179,1,0.06) 50%, rgba(245,179,1,0) 100%);
  border: 1px solid rgba(245,179,1,0.3);
  position: relative;
  z-index: 1;
}
.dash-prize-banner .prize-banner-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  padding-right: 4px;
  border-right: 1px solid rgba(245,179,1,0.3);
  margin-right: 4px;
}
.dash-prize-banner .prize-pill {
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}
.dash-prize-banner .prize-pill.gold { background: rgba(245,179,1,0.25); color: var(--accent-2); border: 1px solid rgba(245,179,1,0.55); }
.dash-prize-banner .prize-pill.silver { background: rgba(200,200,210,0.16); color: #d9dee5; border: 1px solid rgba(200,200,210,0.35); }
.dash-prize-banner .prize-pill.bronze { background: rgba(208,133,88,0.22); color: #f0bd96; border: 1px solid rgba(208,133,88,0.5); }

.dash-upcoming-name {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.dash-upcoming-meta { color: var(--muted); font-size: 0.95rem; }
.dash-countdown {
  margin-top: 12px;
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 800;
  background: rgba(110,179,255,0.15);
  color: #6eb3ff;
  padding: 8px 16px;
  border-radius: 10px;
  letter-spacing: 1px;
}
.dash-upcoming-teams { margin-top: 10px; color: var(--muted); font-size: 0.9rem; }
.dash-next-label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 4px; }
.dash-next-match {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.dash-next-team { font-size: clamp(1.1rem, 2.8vw, 1.6rem); font-weight: 800; }
.dash-vs { color: var(--muted); font-size: 0.9rem; letter-spacing: 2px; text-transform: uppercase; }
.dash-next-sub { margin-top: 8px; color: var(--muted); font-size: 0.85rem; text-align: center; }

.dash-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.stat-chip {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  flex: 1 1 120px;
}
.stat-chip .stat-label {
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.stat-chip .stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent-2);
}

.dash-pane {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
}
.dash-pane-title {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--accent);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 800;
}

.dash-standings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.dash-standings-grid.one-pool { grid-template-columns: 1fr; }
.dash-pool-label {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0 0 6px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.dash-standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.dash-standings-table th {
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 1px;
  text-align: left;
  padding: 4px 6px;
}
.dash-standings-table td {
  padding: 5px 6px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.dash-standings-table td.rank { color: var(--accent); font-weight: 700; width: 22px; }
.dash-standings-table td.name { font-weight: 600; }
.dash-standings-table tr.qualifier td.name { color: var(--accent-2); }
.dash-standings-table tr.qualifier td.rank::before { content: "✦ "; color: var(--accent); }
.dash-standings-table td.pts { font-weight: 800; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.dash-standings-table td.pos { color: var(--success); }
.dash-standings-table td.neg { color: var(--danger); }

.dash-bracket-tree {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.dash-bracket-stage {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
  margin-top: 0;
}
.dash-bracket-col > .dash-bracket-stage:nth-of-type(2) { margin-top: 12px; }
.mini-match {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.mini-match.live { border-color: rgba(255,138,61,0.55); }
.mini-match.completed { border-color: rgba(92,207,147,0.35); }
.mini-match.gold.completed { border-color: rgba(245,179,1,0.55); background: linear-gradient(135deg, rgba(245,179,1,0.12), rgba(245,179,1,0.03)); }
.mini-match.bronze.completed { border-color: rgba(208,133,88,0.45); }
.mini-match.placeholder { text-align: center; color: var(--muted); }
.mini-label {
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.mini-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  gap: 10px;
}
.mini-row .mini-team {
  flex: 1 1 auto;
  font-weight: 600;
  font-size: 0.9rem;
  word-break: break-word;
}
.mini-row .mini-score {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 0.95rem;
  min-width: 24px;
  text-align: right;
}
.mini-row.win .mini-team, .mini-row.win .mini-score { color: var(--accent-2); }
.mini-row.lose .mini-team, .mini-row.lose .mini-score { color: var(--muted); opacity: 0.7; }

.dash-leader-rows { display: flex; flex-direction: column; gap: 6px; }
.dash-leader-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.dash-leader-row .medal {
  font-size: 1.3rem;
  text-align: center;
  font-weight: 800;
  color: var(--accent);
}
.dash-leader-row .predictor { font-weight: 700; word-break: break-word; }
.dash-leader-row .pts {
  font-variant-numeric: tabular-nums;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent-2);
}
.dash-leader-row .pts-label { font-size: 0.7rem; color: var(--muted); font-weight: 600; }
.dash-leader-row .acc { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }

.podium {
  max-width: 1100px;
  margin: 16px auto 0;
  padding: 0 12px;
}
/* Hide the standalone podium banner while the Dashboard tab is active
   (the dashboard's focus card already shows a big podium). */
body:has(#tab-dashboard.active) #podium,
body:has(#tab-dashboard.active) #live-banner { display: none; }
.podium-inner {
  background: linear-gradient(135deg, rgba(245,179,1,0.18) 0%, rgba(255,209,102,0.08) 50%, rgba(92,207,147,0.12) 100%);
  border: 1px solid rgba(245,179,1,0.4);
  border-radius: 16px;
  padding: 16px 16px 20px;
  box-shadow: 0 8px 32px rgba(245,179,1,0.15);
}
.podium-title {
  text-align: center;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.podium-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 8px;
  align-items: end;
}
.podium-spot {
  text-align: center;
  border-radius: 12px;
  padding: 10px 8px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  position: relative;
}
.podium-spot.gold {
  background: linear-gradient(180deg, #f5b301 0%, #c78f00 100%);
  border-color: #f5b301;
  color: #1a1a1a;
  padding-top: 18px;
  padding-bottom: 22px;
  transform: translateY(-14px);
  box-shadow: 0 10px 30px rgba(245,179,1,0.35);
}
.podium-spot.silver {
  background: linear-gradient(180deg, #d9dee5 0%, #9099a5 100%);
  border-color: #cdd3da;
  color: #1a1a1a;
}
.podium-spot.bronze {
  background: linear-gradient(180deg, #d28558 0%, #8e5a35 100%);
  border-color: #cf7d4a;
  color: #1a1a1a;
}
.podium-spot .crown {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.8rem;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
  animation: crown-bob 2.4s ease-in-out infinite;
}
@keyframes crown-bob {
  0%, 100% { transform: translate(-50%, 0) rotate(-4deg); }
  50%      { transform: translate(-50%, -3px) rotate(4deg); }
}
.podium-spot .medal {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  line-height: 1;
  margin-bottom: 4px;
}
.podium-spot .place {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 4px;
}
.podium-spot.gold .place { font-size: 0.8rem; }
.podium-spot .team {
  font-weight: 800;
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  line-height: 1.2;
  word-break: break-word;
}
.podium-spot.gold .team { font-size: clamp(0.95rem, 2.3vw, 1.2rem); }
.podium-spot .prize {
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  color: inherit;
  display: inline-block;
  opacity: 0.92;
}

.live-banner {
  max-width: 1100px;
  margin: 12px auto 0;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 780px) {
  .live-banner.cols-2 { grid-template-columns: 1fr 1fr; }
  .live-banner.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .live-banner.cols-many { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}
.live-card {
  background: linear-gradient(135deg, #ff8a3d 0%, #f5b301 100%);
  color: #1a1a1a;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 8px 32px rgba(255,138,61,0.35), 0 0 0 2px rgba(0,0,0,0.2);
  position: relative;
  overflow: hidden;
  font-weight: 600;
}
.live-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.25), transparent 60%);
  pointer-events: none;
}
.live-card .live-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.live-card .live-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
}
.live-card .live-dot::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #d83a1a;
  box-shadow: 0 0 0 0 rgba(216,58,26,0.7);
  animation: livepulse 1.4s infinite;
}
@keyframes livepulse {
  0% { box-shadow: 0 0 0 0 rgba(216,58,26,0.7); }
  70% { box-shadow: 0 0 0 10px rgba(216,58,26,0); }
  100% { box-shadow: 0 0 0 0 rgba(216,58,26,0); }
}
.live-card .live-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  background: rgba(0,0,0,0.25);
  color: #fff;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 1px;
}
.live-card .live-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}
.live-card .live-team {
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  font-weight: 800;
  line-height: 1.2;
  word-break: break-word;
}
.live-card .live-team.right { text-align: right; }
.live-card .live-team.leading { text-shadow: 0 1px 0 rgba(255,255,255,0.35); }
.live-card .live-scores {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 6px;
  align-items: center;
}
.live-card .live-score {
  font-size: clamp(2.2rem, 6vw, 3rem);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  background: rgba(0,0,0,0.35);
  color: #fff;
  padding: 4px 14px;
  border-radius: 10px;
  min-width: 56px;
  text-align: center;
  line-height: 1;
}
.live-card .live-score.leading { color: #fff176; }
.live-card .dash { color: rgba(0,0,0,0.55); font-weight: 800; font-size: 1.2rem; }
.live-card .live-foot {
  margin-top: 6px;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.8;
}

.tabs {
  max-width: 1100px;
  margin: 12px auto 0;
  padding: 0 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.tabs button {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease;
}
.tabs button:hover { background: var(--panel); }
.tabs button.active { background: var(--accent); color: #1a1a1a; border-color: var(--accent); }

main {
  max-width: 1100px;
  margin: 16px auto;
  padding: 0 16px 48px;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

h2 {
  color: var(--accent);
  margin: 18px 0 10px;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
}

.pool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 900px) {
  .pool-grid { grid-template-columns: 1fr 1fr; }
}

.pool-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 14px 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}

.match-list { display: flex; flex-direction: column; gap: 10px; }

.match {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 30px 12px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.match.completed { border-color: rgba(92,207,147,0.4); }
.match.live { border-color: rgba(255,138,61,0.55); box-shadow: 0 0 0 1px rgba(255,138,61,0.25); }

.match .num {
  position: absolute;
  top: 6px;
  left: 10px;
  color: var(--accent);
  font-weight: 700;
  background: rgba(245,179,1,0.12);
  border: 1px solid rgba(245,179,1,0.35);
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.match .match-team {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.match .match-team .name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  line-height: 1.25;
  word-break: break-word;
  font-size: 0.95rem;
}
.match .match-team .name.winner { color: var(--accent-2); }
.match .match-team .name.loser { color: var(--muted); }
.match .match-team .score {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.35rem;
  background: rgba(0,0,0,0.3);
  padding: 4px 12px;
  border-radius: 8px;
  min-width: 44px;
  text-align: center;
  line-height: 1.2;
}
.match .match-team .score.win { color: var(--success); }
.match .match-team .score.lose { color: var(--muted); }

.match .badge {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.match .badge.live { background: var(--live); color: #1a1a1a; animation: pulse 1.3s infinite; }
.match .badge.completed { background: rgba(92,207,147,0.2); color: var(--success); }
.match .badge.scheduled { background: rgba(255,255,255,0.08); color: var(--muted); }

.match .target {
  position: absolute;
  bottom: 4px;
  right: 10px;
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.5px;
}
.match .sitting-out {
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  align-self: flex-start;
}

/* 🥒 Pickled! Shutout-loss badge */
.pickle-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.95em;
  cursor: help;
  animation: pickle-wiggle 2.4s ease-in-out infinite;
  transform-origin: bottom center;
  filter: drop-shadow(0 0 3px rgba(92, 207, 147, 0.55));
  vertical-align: baseline;
  font-weight: 800;
  color: var(--success);
  font-variant-numeric: tabular-nums;
}
@keyframes pickle-wiggle {
  0%, 100%  { transform: rotate(-8deg) translateY(0); }
  25%       { transform: rotate(8deg) translateY(-1px); }
  50%       { transform: rotate(-5deg) translateY(1px); }
  75%       { transform: rotate(5deg) translateY(-1px); }
}
.match.pickled-match .name .pickle-badge { font-size: 1.1em; }
table.standings .pickle-badge { font-size: 0.9em; margin-left: 4px; }
.dash-standings-table .pickle-badge { font-size: 0.85em; margin-left: 3px; }

.players-table { font-size: 0.88rem; }
.players-table th, .players-table td { white-space: nowrap; padding: 8px 10px; }
.players-table td.name { white-space: normal; }
.players-table td.mmr-cell { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-2); }
@media (max-width: 700px) {
  .players-table th, .players-table td { padding: 6px 6px; font-size: 0.82rem; }
}

.rank-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rank-color) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--rank-color) 55%, transparent);
  color: var(--rank-color);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.3px;
  cursor: help;
  outline: none;
}
.rank-badge:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--rank-color) 60%, transparent); }
.rank-badge .rank-paddle {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--rank-color);
  transform: rotate(-18deg);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}
.rank-badge .rank-text { line-height: 1; }
.rank-legend-note {
  margin-top: 12px;
  font-size: 0.78rem;
  line-height: 1.5;
}

/* ---------- PKR ladder hover popover ---------- */
.pkr-popover {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 280px;
  max-width: 320px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  text-align: left;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text);
}
.pkr-popover::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: var(--panel);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.rank-badge:hover .pkr-popover,
.rank-badge:focus .pkr-popover,
.rank-badge:focus-within .pkr-popover {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.pkr-popover-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  margin: -4px -4px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--rank-color) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--rank-color) 45%, transparent);
  color: var(--rank-color);
}
.pkr-popover-paddle {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  color: var(--rank-color);
  transform: rotate(-12deg);
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.45));
}
.pkr-popover-hero-text { line-height: 1.25; }
.pkr-popover-tier {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.3px;
}
.pkr-popover-tagline {
  font-size: 0.78rem;
  opacity: 0.85;
  margin-top: 2px;
  font-style: italic;
}
.pkr-popover-head {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 6px;
}
.pkr-popover-tiers { display: flex; flex-direction: column; gap: 2px; }
.pkr-tier-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 0.84rem;
}
.pkr-tier-row.is-current {
  background: color-mix(in srgb, var(--rank-color) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--rank-color) 55%, transparent);
  padding: 2px 5px;
  font-weight: 800;
}
.pkr-tier-paddle {
  width: 20px;
  height: 20px;
  color: var(--rank-color);
  transform: rotate(-12deg);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.pkr-tier-name { color: var(--rank-color); }
.pkr-tier-row.is-current .pkr-tier-name { color: var(--rank-color); }
.pkr-tier-range {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.78rem;
}
.pkr-tier-row.is-current .pkr-tier-range { color: var(--rank-color); }
.rank-badge.in-promotion {
  background: color-mix(in srgb, var(--rank-color) 25%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rank-color) 75%, transparent), 0 0 14px color-mix(in srgb, var(--rank-color) 45%, transparent);
}
.rank-promo-mark {
  margin-left: 4px;
  color: var(--rank-color);
  font-weight: 900;
  animation: promo-pulse 1.4s ease-in-out infinite;
}
@keyframes promo-pulse {
  0%, 100% { opacity: 0.6; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-1px); }
}

.pkr-promotion {
  margin: 8px -4px 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--target-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--target-color) 55%, transparent);
  color: var(--target-color);
  font-size: 0.82rem;
}
.pkr-promotion-head {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}
.pkr-promo-target { color: var(--target-color); }
.pkr-promotion-pips {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.74rem;
}
.pkr-pip-label {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  color: color-mix(in srgb, var(--text) 70%, transparent);
}
.pkr-pip-row { display: inline-flex; gap: 3px; }
.pkr-pip {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--text) 40%, transparent);
  background: transparent;
  display: inline-block;
}
.pkr-pip-win.filled   { background: var(--success); border-color: var(--success); }
.pkr-pip-loss.filled  { background: var(--danger);  border-color: var(--danger); }
.pkr-pip-sep { color: var(--muted); }
.pkr-promotion-status {
  margin-top: 6px;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--text) 80%, transparent);
  font-style: italic;
}

.pkr-popover-rules,
.pkr-popover-next {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}
.pkr-popover-next { color: var(--accent-2); font-weight: 700; border-top: none; padding-top: 2px; margin-top: 2px; }

/* Keep the popover from being clipped by the last row: flip above when near bottom. */
tr:nth-last-child(-n+3) .pkr-popover { top: auto; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); }
tr:nth-last-child(-n+3) .pkr-popover::before { top: auto; bottom: -6px; border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
tr:nth-last-child(-n+3) .rank-badge:hover .pkr-popover,
tr:nth-last-child(-n+3) .rank-badge:focus .pkr-popover,
tr:nth-last-child(-n+3) .rank-badge:focus-within .pkr-popover {
  transform: translateX(-50%) translateY(0);
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.bracket {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  position: relative;
}
@media (min-width: 780px) {
  .bracket { grid-template-columns: 1fr 1.1fr; align-items: start; gap: 80px; }
}
.bracket-col h3 { color: var(--muted); font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 8px; }
.bracket-col h3.sub-head { margin-top: 18px; }
.bracket-col { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px; position: relative; z-index: 1; }
.bracket .match .num { display: none; }
.bracket .match { padding-top: 22px; }

.bracket-with-flow { margin-bottom: 10px; }
.bracket-with-flow:last-child { margin-bottom: 0; }
.bracket-flow {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-left: 2px;
}
.bracket-flow .flow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.bracket-flow .flow.winner { background: rgba(245,179,1,0.18); color: var(--accent-2); border-color: rgba(245,179,1,0.45); }
.bracket-flow .flow.loser  { background: rgba(169,183,191,0.12); color: var(--muted); border-color: rgba(169,183,191,0.35); }

.bracket-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
@media (max-width: 779px) {
  .bracket-connectors { display: none; }
}

/* Generic bracket layout (multi-round single-elim, double-elim) */
.bracket-gen {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bracket-gen-head {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 2px;
  border-bottom: 1px solid var(--border);
}
.bracket-gen-head-losers { color: var(--muted); }
.bracket-gen-head-bronze { color: #d28558; margin-top: 6px; }
.bracket-gen-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  align-items: start;
}
.bracket-col-gen {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bracket-col-label {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 2px;
}
.bracket-col-gen .match { padding-top: 22px; }
.bracket-col-gen .match .num { display: none; }

table.leaderboard {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}
table.leaderboard th, table.leaderboard td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
table.leaderboard th { background: var(--panel-2); color: var(--accent); font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; }
table.leaderboard tr:last-child td { border-bottom: none; }
table.leaderboard td.rank { color: var(--accent); font-weight: 700; }
table.leaderboard td.points { font-variant-numeric: tabular-nums; font-weight: 700; }

table.standings {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
}
table.standings th, table.standings td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  font-size: 0.9rem;
}
table.standings th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 1px; }
table.standings td.name { text-align: left; font-weight: 600; }
table.standings tr.qualifier td.name { color: var(--accent-2); }
table.standings tr.qualifier td.rank::before { content: "✦ "; color: var(--accent); }
table.standings td.pts-col, table.standings th.pts-col {
  background: rgba(245,179,1,0.08);
  color: var(--accent-2);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
table.standings th.pts-col { color: var(--accent); }

.predict-setup {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.predict-setup label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; }

.name-warning {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255,138,61,0.12);
  border: 1px solid rgba(255,138,61,0.45);
  border-radius: 10px;
  color: #ffe4b5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.name-warning .name-warning-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.88rem;
  line-height: 1.35;
}
.name-warning .name-warning-body strong { color: var(--live); }
.name-warning .name-warning-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.name-warning button {
  appearance: none;
  border-radius: 8px;
  padding: 7px 12px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.85rem;
  border: 1px solid transparent;
}
.name-warning button.confirm-name {
  background: var(--accent);
  color: #1a1a1a;
  border-color: var(--accent);
}
.name-warning button.confirm-name:hover { background: var(--accent-2); }
.name-warning button.pick-different {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.name-warning button.pick-different:hover { border-color: var(--accent); }

input[type="text"], input[type="password"], input[type="number"], .predict-setup input {
  width: 100%;
  max-width: 320px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 1rem;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.predict-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.predict-card .title { font-size: 0.8rem; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.predict-card .title .status { float: right; }
.predict-card .choices {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}
.predict-card button.pick {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
  transition: all 0.12s ease;
  text-align: left;
  word-break: break-word;
}
.predict-card button.pick:hover:not([disabled]) { border-color: var(--accent); }
.predict-card button.pick.selected { background: var(--accent); color: #1a1a1a; border-color: var(--accent); }
.predict-card button.pick[disabled] { opacity: 0.55; cursor: not-allowed; }
.predict-card .vs { color: var(--muted); font-size: 0.8rem; text-align: center; }
.predict-card .result { margin-top: 6px; font-size: 0.8rem; color: var(--muted); }
.predict-card .result.correct { color: var(--success); }
.predict-card .result.wrong { color: var(--danger); }

/* Coin banner on the Predict tab */
.coin-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(245,179,1,0.18) 0%, rgba(245,179,1,0.06) 100%);
  border: 1px solid rgba(245,179,1,0.4);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.coin-banner .coin-balance {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 700;
}
.coin-banner .coin-icon { font-size: 1.4rem; line-height: 1; }
.coin-banner .coin-amount {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-variant-numeric: tabular-nums;
  color: var(--accent-2);
  font-weight: 900;
}
.coin-banner .coin-label {
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.coin-banner .coin-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Odds tag inside pick button */
.predict-card .pick { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.predict-card .pick-team { font-weight: 700; line-height: 1.15; }
.predict-card .odds-tag {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  color: inherit;
  opacity: 0.85;
  letter-spacing: 0.5px;
}
.predict-card .pick.selected .odds-tag { background: rgba(0,0,0,0.25); }

/* Wager row */
.predict-card .wager-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.predict-card .wager-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}
.predict-card .wager-input {
  width: 80px;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: right;
}

/* Leaderboard coin column */
#leaderboard-table .coin-cell {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
#leaderboard-table .coin-cell .coin-amount { color: var(--accent-2); }
.coin-delta {
  font-size: 0.75rem;
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 4px;
}
.coin-delta.pos { background: rgba(92,207,147,0.2); color: var(--success); }
.coin-delta.neg { background: rgba(255,107,107,0.2); color: var(--danger); }

/* Admin-only styles */
.admin-login {
  max-width: 360px;
  margin: 24px auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  text-align: left;
}
.admin-login label { display: block; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.admin-login button {
  width: 100%;
  margin-top: 10px;
  background: var(--accent);
  color: #1a1a1a;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-weight: 700;
  cursor: pointer;
}
.admin-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.admin-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}
.admin-actions button.primary {
  background: var(--accent);
  color: #1a1a1a;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 14px rgba(245,179,1,0.25);
}
.admin-actions button.primary:hover { background: var(--accent-2); }

button.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
button.danger {
  background: var(--danger);
  color: #1a1a1a;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 700;
  cursor: pointer;
}
.admin-actions button.dimmed {
  opacity: 0.5;
  cursor: help;
}
.admin-actions button.dimmed:hover { opacity: 0.75; }

.admin-tournament-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-tournament-picker label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.admin-tournament-picker select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.88rem;
  max-width: 260px;
}

.tournaments-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.tournaments-panel .teams-panel-head h2 { margin: 0 0 4px; font-size: 1.1rem; }
.tournaments-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.tournament-prize-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.tournament-prize-display {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}
.tournament-prize-display .prize-chips {
  color: var(--accent-2);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
}
.tournament-prize-display button.edit-prizes {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.8rem;
}
.tournament-prize-display button.edit-prizes:hover { border-color: var(--accent); color: var(--text); }
.tournament-prize-edit {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}
.tournament-prize-edit input {
  flex: 1 1 140px;
  min-width: 0;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.88rem;
}
.tournament-prize-edit input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.tournament-prize-edit button.save-prizes {
  background: var(--accent); color: #1a1a1a; border: none;
  border-radius: 8px; padding: 6px 12px; font-weight: 700; cursor: pointer;
  font-size: 0.85rem;
}
.tournament-prize-edit button.cancel-prizes {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 12px; cursor: pointer;
  font-size: 0.85rem;
}

.tournament-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.tournament-info { flex: 1 1 220px; min-width: 0; }
.tournament-name {
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tournament-name button.edit-name {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  opacity: 0.55;
  padding: 0 2px;
  line-height: 1;
}
.tournament-name button.edit-name:hover { opacity: 1; }
.tournament-meta { color: var(--muted); font-size: 0.82rem; margin-top: 2px; }
.schedule-display button.edit-schedule {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  opacity: 0.55;
  padding: 0 2px;
  margin-left: 4px;
  line-height: 1;
}
.schedule-display button.edit-schedule:hover { opacity: 1; }
.tournament-schedule-edit {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 6px;
  padding: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.tournament-schedule-edit label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.tournament-schedule-edit input[type="date"],
.tournament-schedule-edit input[type="time"] {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.88rem;
}
.tournament-schedule-edit button.save-schedule {
  background: var(--accent);
  color: #1a1a1a;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.85rem;
}
.tournament-schedule-edit button.cancel-schedule {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.85rem;
}
.tournament-location {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.tournament-location .location-pill {
  color: var(--accent-2);
  font-weight: 600;
  font-size: 0.85rem;
}
.tournament-location button.edit-location {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 0.78rem;
}
.tournament-location button.edit-location:hover { color: var(--text); border-color: var(--accent); }
.tournament-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tournament-actions button {
  background: var(--accent);
  color: #1a1a1a;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.tournament-actions button.ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border); font-weight: 600;
}
.tournament-actions button.danger { background: var(--danger); color: #1a1a1a; }

.tournament-create {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.tournament-create summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
  user-select: none;
}
.create-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.form-row { display: flex; flex-direction: column; gap: 4px; }
.form-row label {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-row-inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
.form-row-inline > label { flex: 1 1 200px; min-width: 0; }
.form-row input[type="text"],
.form-row input[type="date"],
.form-row input[type="time"],
.form-row select,
.form-row textarea {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.95rem;
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
}
.form-row textarea { resize: vertical; min-height: 100px; }
.form-actions { flex-direction: row; align-items: center; gap: 10px; }
.form-actions button.primary {
  background: var(--accent);
  color: #1a1a1a;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-weight: 700;
  cursor: pointer;
}
#create-tournament-msg.error { color: var(--danger); }

.teams-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.teams-panel-head { margin-bottom: 10px; }
.teams-panel-head h2 { margin: 0 0 4px; font-size: 1.1rem; }
.teams-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) {
  .teams-grid { grid-template-columns: 1fr 1fr; }
}
.teams-col h3 {
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 8px;
}
.team-edit-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.team-edit-row .team-name-input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.95rem;
}
.team-edit-row .team-name-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.team-edit-row button.save-team {
  flex: 0 0 auto;
  background: var(--accent);
  color: #1a1a1a;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.85rem;
}
.team-edit-row .save-indicator {
  color: var(--success);
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  flex: 0 0 auto;
}
.team-edit-row .save-indicator.show { opacity: 1; }

.team-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  flex-wrap: wrap;
}
.team-add-row .team-add-input {
  flex: 1 1 140px;
  min-width: 0;
  background: var(--panel-2);
  color: var(--text);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.95rem;
}
.team-add-row .team-add-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-style: solid; }
.team-add-row button.add-team {
  background: var(--success);
  color: #0b2b37;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.85rem;
}
.team-add-row button.add-team:hover:not([disabled]) { filter: brightness(1.1); }
.team-add-row button.add-team[disabled] { opacity: 0.5; cursor: not-allowed; }

.team-rebuild-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}
.team-rebuild-row button.rebuild-schedule {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}
.team-rebuild-row button.rebuild-schedule:hover { border-color: var(--accent); }

.admin-pools {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}
@media (min-width: 860px) {
  .admin-pools { grid-template-columns: 1fr 1fr; }
  /* Also put the knockout list into two columns so single_elim / double_elim
     don't stretch to a tall single-column scroll on desktop. */
  #admin-bracket {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
  }
}
.admin-pool-col { min-width: 0; }
.admin-pool-col h2 { margin-top: 8px; }

.admin-empty-state {
  text-align: center;
  padding: 48px 20px;
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: 14px;
  margin-top: 16px;
}
.admin-empty-state .empty-icon {
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: 12px;
  opacity: 0.6;
}
.admin-empty-state h2 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 1.3rem;
  letter-spacing: 0;
  text-transform: none;
}
.admin-empty-state p { max-width: 480px; margin: 0 auto; }

.admin-match {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.admin-match .title {
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-match .title .status { color: var(--text); }
.admin-match .team-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  min-width: 0;
}
.admin-match .team-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  word-break: break-word;
  font-size: 0.95rem;
  line-height: 1.25;
}
.admin-match .score-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  padding: 4px;
}
.admin-match .score-controls button.tick {
  appearance: none;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}
.admin-match .score-controls button.tick:hover:not([disabled]) { border-color: var(--accent); }
.admin-match .score-controls button.tick[disabled] { opacity: 0.4; cursor: not-allowed; }
.admin-match input[type="number"] {
  width: 54px;
  font-size: 1.25rem;
  text-align: center;
  font-weight: 800;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 4px 0;
  -moz-appearance: textfield;
}
.admin-match input[type="number"]::-webkit-outer-spin-button,
.admin-match input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.admin-match input[type="number"]:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.admin-match .actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.admin-match .actions button {
  background: var(--accent);
  color: #1a1a1a;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.85rem;
}
.admin-match .actions button.start-match {
  background: var(--success);
  color: #0b2b37;
  font-weight: 800;
}
.admin-match .actions button.reset { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.admin-match .status .admin-timer {
  font-variant-numeric: tabular-nums;
  background: rgba(255,138,61,0.18);
  color: var(--live);
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 4px;
}
.admin-match .status .admin-timer.final {
  background: rgba(92,207,147,0.18);
  color: var(--success);
}
.admin-match .save-indicator { color: var(--success); font-size: 0.8rem; opacity: 0; transition: opacity 0.2s ease; }
.admin-match .save-indicator.show { opacity: 1; }

.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.error { color: var(--danger); }
.hidden { display: none !important; }

footer {
  text-align: center;
  padding: 16px;
  color: var(--muted);
  font-size: 0.85rem;
}