/* =====================================================================
   Live Scoreboard — shared styles (all pages)
   ===================================================================== */
:root {
  --accent: #4f63d8;           /* replaced by the colour chosen in Admin → Branding */
  --bg: #f3f5f8;
  --panel: #ffffff;
  --panel-2: #eef1f5;
  --ink: #142033;
  --ink-2: #3b4a60;
  --muted: #6b7a90;
  --line: #dde3eb;
  --ok: #23845a;
  --ok-bg: #e4f4ec;
  --err: #b42318;
  --err-bg: #fdecea;
  --warn: #8a5a00;
  --warn-bg: #fff3d6;
  --gold: #e3a92a;
  --silver: #9aa8b8;
  --bronze: #b97a4b;
  --up: #23845a;
  --down: #c2412d;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --font: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1828; --panel: #16233a; --panel-2: #1d2c46; --ink: #eef2f8; --ink-2: #c4cedd;
    --muted: #8d9bb2; --line: #26364f; --ok: #5cc795; --ok-bg: #143429; --err: #f39b90; --err-bg: #3a1c1a;
    --warn: #f0c46a; --warn-bg: #3a2e12; --up: #5cc795; --down: #f0846f; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1828; --panel: #16233a; --panel-2: #1d2c46; --ink: #eef2f8; --ink-2: #c4cedd;
  --muted: #8d9bb2; --line: #26364f; --ok: #5cc795; --ok-bg: #143429; --err: #f39b90; --err-bg: #3a1c1a;
  --warn: #f0c46a; --warn-bg: #3a2e12; --up: #5cc795; --down: #f0846f; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font); font-size: 16px; line-height: 1.45; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--r-sm); padding: 11px 16px; font-weight: 600; font-size: 15px;
  background: var(--accent); color: #fff; transition: filter .15s, transform .05s;
}
a.btn { text-decoration: none; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .55; cursor: progress; }
.btn-quiet { background: var(--panel-2); color: var(--ink); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-danger { background: var(--err); color: #fff; }
.btn-sm { padding: 7px 11px; font-size: 14px; }

/* Rank badge: gold / silver / bronze for the top three */
.rank {
  display: grid; place-items: center; font-family: var(--font-num); font-weight: 800;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.rank[data-rank="1"] { color: var(--gold); }
.rank[data-rank="2"] { color: var(--silver); }
.rank[data-rank="3"] { color: var(--bronze); }

.move { font-family: var(--font-num); font-weight: 700; font-size: 13px; line-height: 1; white-space: nowrap; }
.move.up { color: var(--up); }
.move.down { color: var(--down); }

/* Live dot */
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.live::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: beat 2s infinite;
}
.live.stale::before { background: var(--warn); animation: none; }
@keyframes beat { 70% { box-shadow: 0 0 0 7px transparent; } }

.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 99px; font-weight: 600; font-size: 14px;
  z-index: 50; max-width: 90vw; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}