/* Shared cross-game components for Media.
   Design tokens now come from the media house brand layer, vendored as
   brand-tokens.css (synced from the media-brand repo via its sync.sh).
   Edit tokens there, not here. Game/page CSS loads AFTER this file. */

@import url("brand-tokens.css");

/* ---------- Token compatibility aliases ----------
   Two token names were renamed in the brand layer; these keep existing game
   CSS working. They reference the brand vars so they track light/dark. New
   code should use the canonical names (--paper, --surface-sunken, --ink). */
:root {
  --bg: var(--paper);
  --surface-hover: var(--surface-sunken);
  --accent: var(--ink);
}

/* ---------- Display slab font ----------
   Self-hosted Roboto Slab ExtraBold (Apache-2.0), subset to the glyphs used in
   game titles. Shipped so the bold tile titles render the same on every device;
   the system fallback (Rockwell) only exists on some desktops. License in
   shared/fonts/LICENSE.txt. */
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/roboto-slab-800-subset.woff2") format("woff2");
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 200ms ease, color 200ms ease;
}

button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* ---------- Topbar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: relative;
  z-index: 60;
}

.brand { display: flex; align-items: center; gap: 10px; }

.topbar h1 {
  margin: 0;
  font-family: "Roboto Slab", "Rockwell", var(--font-serif);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Branded topbar mark: a small color chip holding the game's icon, mirroring
   the game's hub tile. Each page sets its signature color via inline --game. */
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--game, var(--gold));
  color: #1a1817;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.brand-mark svg { width: 22px; height: 22px; display: block; }

.date {
  font-size: 13px;
  color: var(--ink-muted);
  text-transform: capitalize;
  font-variant-numeric: tabular-nums;
}

.back-link {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.back-link:hover { background: var(--surface-hover); color: var(--ink); }
.back-link.with-label {
  width: auto;
  padding: 0 12px 0 10px;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}
.back-link.with-label svg { flex-shrink: 0; }

.topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.theme-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, transform 80ms ease, border-color 120ms ease;
}
.theme-btn:hover { background: var(--surface-hover); }
.theme-btn:active { transform: scale(0.94); }
.theme-icon { width: 18px; height: 18px; display: inline-flex; }
.theme-icon svg { width: 100%; height: 100%; }

/* ---------- Status row (timer + state) ---------- */

.status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
  min-height: 28px;
}

.timer-row { display: flex; align-items: center; gap: 10px; }

.timer {
  font-family: var(--font-num);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.icon-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--ink); border-color: var(--ink-faint); }
.icon-btn:active { transform: scale(0.92); }

.state {
  font-size: 13px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

.state.done {
  color: var(--positive);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 120ms ease;
}
.state.done.lost { color: var(--warn); }
.state.done:hover { text-decoration-color: currentColor; }

/* ---------- Modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 16, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade 200ms ease;
}

.modal-card {
  position: relative;
  background: var(--surface-elev);
  border-radius: var(--radius-lg);
  padding: 28px 28px 22px;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  animation: rise 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modal-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 6px;
}

.modal-card h2 {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.modal-desc {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.modal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 10px;
  padding: 14px 4px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat { text-align: center; }
.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 4px;
  font-weight: 600;
}
.stat-value {
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 18px;
}
.modal-actions--center { justify-content: center; }

/* ---------- Action button ---------- */

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.action-btn:hover { background: var(--surface-hover); }
.action-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.action-btn.primary {
  background: var(--game, var(--ink));
  color: var(--game-ink, var(--bg));
  border-color: transparent;
}
.action-btn.primary:hover { opacity: 0.92; }
.action-btn svg { display: block; }
.action-btn .kbd {
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-hover);
  font-size: 11px;
  color: var(--ink-muted);
  font-family: var(--font-num);
  letter-spacing: 0;
}
.action-btn[aria-pressed="true"] .kbd {
  background: rgba(255, 255, 255, 0.15);
  color: var(--bg);
}

/* ---------- Stats panel (history strip) ---------- */

.history-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.history-dow {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  text-align: center;
  padding-bottom: 2px;
}
.history-pad { min-height: 54px; }

.history-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 54px;
  padding: 6px 4px;
  background: var(--surface-hover);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
  min-width: 0;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
a.history-cell { cursor: pointer; }
a.history-cell:hover { transform: scale(1.04); }
.history-cell.done    { background: var(--positive);  border-color: var(--positive);  color: #ffffff; }
.history-cell.ongoing { background: var(--warn);      border-color: var(--warn);      color: #ffffff; }
.history-cell.lost    { background: var(--ink-faint); border-color: var(--ink-faint); color: #ffffff; }
.history-cell.today   { box-shadow: 0 0 0 2px var(--ink); }

.history-cell-date {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.history-cell-value {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  opacity: 0.92;
}
.history-cell-value:empty { display: none; }

.history-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
  margin: 18px 0 8px;
}

#stats-body .modal-stats {
  border: none;
  padding: 0 0 14px;
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  top: 80px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  z-index: 1200;
  animation: rise 200ms ease;
}

/* ---------- Animations ---------- */

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Responsive ---------- */

@media (max-width: 480px) {
  .topbar { padding: 14px 16px; }
  .topbar h1 { font-size: 22px; }
}

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

/* ===================== Help / how-to-play modal ===================== */

.help-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.help-list li {
  padding: 10px 14px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.help-list li strong {
  font-weight: 700;
}

/* ===================== Carousel (per-game landing) ===================== */

body.carousel-page main {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.carousel-intro { padding: 0; }
.carousel-sub {
  margin: 0;
  font-size: 14px;
  color: var(--ink-muted);
  max-width: 560px;
}

/* Wrapper provides a non-scrolling positioning context for the right-edge
   fade overlay and the prev/next arrow buttons, which signal scrollability
   on first paint (macOS hides native scrollbars by default). */
.puzzle-slider-wrap {
  position: relative;
  margin: 0 -20px;
  padding: 0 44px;
}
.puzzle-slider-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 64px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--bg) 80%);
  z-index: 2;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
}
.slider-arrow:hover {
  background: var(--surface-hover);
  transform: translateY(-50%) scale(1.06);
}
.slider-arrow:active { transform: translateY(-50%) scale(0.98); }
.slider-arrow-prev { left: 4px; }
.slider-arrow-next { right: 4px; }
.slider-arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* On phones the arrows take screen space; native swipe is the affordance. */
@media (hover: none) and (pointer: coarse) {
  .slider-arrow { display: none; }
}

/* Slider breaks out of main's 20px side-padding so the scroll edge can
   reach the container edge, but its own padding keeps the first card
   aligned with surrounding page content. Native scrollbar hidden in favor
   of the prev/next arrow buttons. */
.puzzle-slider {
  display: flex;
  gap: 14px;
  padding: 8px 0 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.puzzle-slider::-webkit-scrollbar { display: none; }

.puzzle-card {
  flex: 0 0 auto;
  width: 280px;
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: box-shadow 160ms ease, transform 120ms ease, border-color 160ms ease;
}
a.puzzle-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.puzzle-card.today {
  border-color: color-mix(in srgb, var(--ink) 30%, var(--line));
  box-shadow: var(--shadow-md);
}

.puzzle-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--bg);
  padding: 4px 9px;
  border-radius: 999px;
}

.puzzle-card-date {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: capitalize;
  padding-right: 72px;
}
.puzzle-card:not(.today) .puzzle-card-date { padding-right: 0; }

.puzzle-card-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 104px;
  padding: 12px;
  margin-bottom: 2px;
  border-radius: 12px;
  background: var(--game, var(--gold));
  color: #1a1817;
}
/* Neutral game glyph shown in the preview box instead of the real puzzle. */
.puzzle-card-glyph { width: 56px; height: 56px; }
/* Per-game signature color, mirroring the hub tiles. Cascades from the slider
   down into each card's preview via the --game custom property. */
.puzzle-slider[data-game="sudoku"]     { --game: #E7C25E; }
.puzzle-slider[data-game="ordet"]      { --game: #E2897E; }
.puzzle-slider[data-game="fyror"]      { --game: #C29DC6; }
.puzzle-slider[data-game="ordkunskap"] { --game: #DDA08C; }
.puzzle-slider[data-game="krysset"]    { --game: #C9B86A; }
.puzzle-slider[data-game="plats"]      { --game: #A4C49A; }
.puzzle-slider[data-game="logik"]      { --game: #9FB4D6; }
.puzzle-slider[data-game="spalten"]    { --game: #ABA9DC; }
.puzzle-slider[data-game="flow"]       { --game: #8FC9C2; }
.puzzle-slider[data-game="flaggan"]    { --game: #D0685A; }
.puzzle-slider[data-game="flaggan-latt"] { --game: #DD8C5C; }
.puzzle-slider[data-game="konturen"]   { --game: #84BEB6; }

.puzzle-card-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-muted);
}
.puzzle-card-status .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ink-faint);
  flex-shrink: 0;
}
.puzzle-card-status.state-ongoing .dot { background: var(--warn); }
.puzzle-card-status.state-done .dot { background: var(--positive); }

.puzzle-card-cta {
  margin-top: auto;
  display: inline-flex;
  justify-content: center;
  padding: 11px 14px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* Default treatment (used by cta-done, "Visa resultat") = neutral ink fill
   on today, neutral outline on older cards. Result viewing is informational,
   so it sits quietly. Play and Continue states override below. */

/* Today card: play and continue get color, done stays neutral. */
.puzzle-card.today .puzzle-card-cta.cta-idle {
  background: var(--positive);
  color: #ffffff;
}
.puzzle-card.today .puzzle-card-cta.cta-ongoing {
  background: var(--warn);
  color: #1a1817;
}

/* Older cards: outlined treatment, with play/continue still color-coded. */
.puzzle-card:not(.today) .puzzle-card-cta {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.puzzle-card:not(.today) .puzzle-card-cta.cta-idle {
  color: var(--positive);
  border-color: color-mix(in srgb, var(--positive) 40%, transparent);
  background: color-mix(in srgb, var(--positive) 6%, transparent);
}
.puzzle-card:not(.today) .puzzle-card-cta.cta-ongoing {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 50%, transparent);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}

@media (max-width: 480px) {
  body.carousel-page main { padding: 18px 14px 40px; gap: 14px; }
  .puzzle-slider-wrap { margin: 0 -14px; padding: 0; }
  .puzzle-slider-wrap::after { width: 40px; }
  .puzzle-slider { padding: 6px 14px 8px; gap: 12px; }
  .puzzle-card { width: 248px; padding: 16px; }
}

/* ===================== Geo guess input + autocomplete ===================== */
/* Shared by the geography games (Flaggan, Konturen): a text field that
   resolves typed country names against a filtered suggestion list. */

.geo-guess {
  position: relative;
  display: flex;
  gap: 8px;
}

.geo-guess-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 16px; /* >=16px so iOS doesn't zoom the page on focus */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.geo-guess-input::placeholder { color: var(--ink-faint); }
.geo-guess-input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent);
}
.geo-guess-input:disabled { opacity: 0.5; cursor: not-allowed; }

.ac-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 80;
  max-height: 264px;
  overflow-y: auto;
}
.ac-item {
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 15px;
  cursor: pointer;
  transition: background 100ms ease;
}
.ac-item.active { background: var(--surface-hover); }

/* Wrong-guess chips */
.geo-guesses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 4px;
}
.geo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  color: var(--ink);
}
.geo-chip::before {
  content: '✕';
  font-size: 11px;
  color: var(--warn);
  font-weight: 700;
}

/* Progressively revealed hint rows */
.geo-hints {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.geo-hint {
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  animation: rise 200ms ease;
}
.geo-hint strong { font-weight: 700; }
.geo-hint-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
  margin-right: 6px;
}

/* ===================== Round-quiz UI (Flaggan, Konturen) ===================== */
/* Ten rounds a day, one guess each, then reveal + advance. */

.quiz-round {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.quiz-feedback {
  text-align: center;
  font-size: 15px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.quiz-feedback strong { font-weight: 700; }
.quiz-feedback.correct {
  color: var(--positive);
  background: color-mix(in srgb, var(--positive) 10%, transparent);
  border-color: color-mix(in srgb, var(--positive) 35%, transparent);
}
.quiz-feedback.wrong {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-color: color-mix(in srgb, var(--ink) 8%, transparent);
}

.quiz-actions { display: flex; justify-content: center; }
.quiz-actions .action-btn { min-width: 160px; justify-content: center; }

.quiz-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  padding: 14px 4px 4px;
  text-align: left;
}
.quiz-bd-row { display: flex; align-items: baseline; gap: 7px; font-size: 13px; }
.quiz-bd-mark {
  flex-shrink: 0;
  align-self: center;
  width: 11px;
  height: 11px;
  border-radius: 999px;
}
.quiz-bd-mark--ok { background: var(--positive); }              /* correct */
.quiz-bd-mark--no { box-shadow: inset 0 0 0 1.5px var(--ink-faint); } /* missed — hollow */
.quiz-bd-name { font-weight: 600; }
.quiz-bd-guess { color: var(--ink-muted); font-size: 12px; }
@media (max-width: 420px) { .quiz-breakdown { grid-template-columns: 1fr; } }

/* Live match indicator (sport pages): a solid dot with an expanding, fading
   ring. Used in the match-row tag column for in-progress games. */
.live-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--danger); font-weight: 600; }
.match-min { color: var(--danger); font-weight: 700; font-variant-numeric: tabular-nums; }
.live-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: none; }
.live-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--danger); animation: live-ring 1.6s ease-out infinite; }
@keyframes live-ring { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(2.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-pulse::after { animation: none; } }

/* Clickable match rows (link through to the match-detail page). */
.match[data-href] { cursor: pointer; }
.match[data-href]:hover { background: var(--surface-sunken); }

/* Shared "Matcher" component (shared/js/matchlist.js). */
.day-head--today { color: var(--gold-deep); font-weight: 800; }
.ml-live { border-bottom: 1px solid var(--line); margin-bottom: 6px; padding-bottom: 4px; }
.ml-toggle { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--gold-deep); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.ml-toggle:hover { text-decoration: underline; }