/* Gameday - a sports-broadcast look for the Sports section, layered on top of
 * sports.css (from the Theme Preview site, http://192.168.1.8:8104/#gameday-dark).
 * Loaded only by this site's sports.html; sports.css itself is unchanged and
 * still shared with NAS Gateway.
 *
 * Covers the Sports header, ticker and page content. The portal's own top bar
 * (.topnav) is left alone so it matches the rest of Gooberlink.
 *
 * Colours: gold "flair" stripes and fills on navy (dark) or white (light).
 * A member's own accent colour (theme-init.js, inline on <html>) still wins
 * for links and highlights; gold is only the default.
 *
 * Cheap to paint without hardware acceleration: the slants are static skew
 * transforms, the stripes plain gradients, and the live dot no longer pulses. */

@font-face { font-family: "Saira"; src: url("fonts/saira.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Saira"; src: url("fonts/saira-italic.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 125%; font-style: italic; font-display: swap; }

/* ---------- palette (Sports area only) ---------- */

.sx-body :is(.sx-header, .sx-main, .sx-toasts) {
  --gd-flair: #ffb81c;          /* gold: stripes and solid fills, never text on the page */
  --gd-on-flair: #0a0f1c;
  --gd-live: #ff4757;
  --gd-slant: skewX(-12deg);
  --text: #f1f4fa;
  --muted: #9eabc4;
  --line: rgba(241, 244, 250, .10);
  --good: #3ddc84;
  --warn: #ff9a3c;
  --bad: #ff5a68;
  --sx-panel: #111a2e;
  --sx-surface: #111a2e;
  --sx-panel-2: #16203a;
  --sx-hover: rgba(255, 184, 28, .08);
  --sx-header-bg: #0d1424;
  --sx-ticker-bg: #0a0f1c;
  --sx-radius: 6px;
  font-family: "Saira", system-ui, sans-serif;
}
:root:not([style*="--accent"]) .sx-body :is(.sx-header, .sx-main, .sx-toasts) {
  --accent: #ffb81c;
  --accent-strong: #ffd36b;
}

:root[data-theme="light"] .sx-body :is(.sx-header, .sx-main, .sx-toasts) {
  --gd-live: #c8102e;
  --text: #0c1426;
  --muted: #4d5872;
  --line: rgba(12, 20, 38, .14);
  --good: #0c7a43;
  --warn: #a14b00;
  --bad: #c8102e;
  --sx-panel: #ffffff;
  --sx-surface: #ffffff;
  --sx-panel-2: #f3f5f9;
  --sx-hover: rgba(28, 63, 148, .06);
  --sx-header-bg: #ffffff;
  --sx-ticker-bg: #eef1f6;
}
:root[data-theme="light"]:not([style*="--accent"]) .sx-body :is(.sx-header, .sx-main, .sx-toasts) {
  --accent: #1c3f94;
  --accent-strong: #142f73;
}

/* ---------- shared type helpers ---------- */

.sx-body :is(.sx-page-title, .sx-section-title, .sx-card-head h2, .sx-fold > summary, .sx-hero-id h1,
  .sx-mc-id strong, .sx-wc-team strong, .sx-spot-text strong) {
  font-style: italic;
  font-weight: 800;
  font-stretch: 75%;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.sx-body :is(.sx-mc-rec strong, .sx-spot-score strong, .sx-hero-stat strong, .sx-tile strong,
  .sx-sb-score, .sx-tick-team .score, .sx-gr-side strong, .sx-leader-value) {
  font-style: italic;
  font-weight: 800;
  font-stretch: 80%;
}

/* Slanted gold marker before section headings */
.sx-body :is(.sx-page-title, .sx-section-title, .sx-card-head h2)::before {
  content: "";
  display: inline-block;
  width: .45em;
  height: .8em;
  margin-right: .45em;
  background: var(--gd-flair);
  transform: var(--gd-slant);
}

/* ---------- header: Sports bar + ticker ---------- */

.sx-body .sx-header { border-bottom: 3px solid var(--gd-flair); }
.sx-body .sx-brand {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--text) !important;
  font-style: italic;
  font-weight: 900;
  font-stretch: 70%;
  font-size: 28px;
  letter-spacing: .02em;
}
.sx-body .sx-brand::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 20px;
  margin-right: 8px;
  vertical-align: -2px;
  background: var(--gd-flair);
  transform: var(--gd-slant);
}
.sx-body .sx-nav { gap: 3px; }
.sx-body .sx-nav-item {
  transform: var(--gd-slant);
  border-radius: 2px;
  border: 0;
  font-size: 13.5px;
  font-weight: 700;
  font-stretch: 85%;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.sx-body .sx-nav-item.active { background: var(--gd-flair); color: var(--gd-on-flair) !important; }
.sx-body .sx-nav-sep { transform: var(--gd-slant); width: 2px; }
.sx-body .sx-nav-search-input { border-radius: 3px; }

.sx-body .sx-tick { border-radius: 3px; border-left: 4px solid var(--gd-flair); background: var(--sx-panel); }
.sx-body .sx-tick.live { border-color: var(--line); border-left-color: var(--gd-live); }
.sx-body .sx-tick-status { font-style: italic; letter-spacing: .06em; }
.sx-body .sx-tick-team { font-size: 13.5px; }
.sx-body .sx-tick-team .abbr { font-weight: 700; font-style: italic; font-stretch: 85%; }
.sx-body .sx-tick-team .score { font-size: 15px; }

/* Live = broadcast red, and a steady dot instead of the endless pulse */
.sx-body .sx-dot { background: var(--gd-live); animation: none; box-shadow: none; }
.sx-body :is(.sx-tick.live .sx-tick-status, .sx-mc-game.live .sx-tag, .sx-gr-side.live span, .sx-gr-side.live strong,
  .sx-spot-score.live strong, .sx-spot-score.live span, .sx-wc-live, .sx-sb.live .sx-sb-status,
  .sx-tv-tile.live .sx-tv-status, .sx-live-text) { color: var(--gd-live); }
.sx-body :is(.sx-mc-game.live, .sx-gr.live, .sx-wc.live, .sx-sb.live, .sx-series.live, .sx-evt.live, .sx-pick.live, .sx-tv-tile.live) {
  border-color: color-mix(in srgb, var(--gd-live) 55%, transparent);
}
.sx-body .sx-table tr.live td { background: color-mix(in srgb, var(--gd-live) 8%, transparent); }
.sx-body .sx-countdown.live { background: color-mix(in srgb, var(--gd-live) 16%, transparent); color: var(--gd-live); }

/* ---------- page frame, cards, buttons ---------- */

.sx-body .sx-page-title { font-size: 40px; line-height: 1; }
.sx-body .sx-section-title { font-size: 22px; }
.sx-body .sx-card-head h2 { font-size: 17px; color: var(--text); }
.sx-body .sx-more, .sx-body .sx-ext { font-weight: 700; font-style: italic; text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; }
.sx-body :is(.sx-day, .sx-sub, .sx-mini-label, .sx-eyebrow, .sx-tag) { font-style: italic; letter-spacing: .07em; }
.sx-body .sx-day { color: var(--text); font-weight: 800; }

.sx-body .sx-button {
  transform: var(--gd-slant);
  border-radius: 3px;
  font-weight: 700;
  font-stretch: 85%;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-color: var(--line);
  background: var(--sx-panel-2);
}
.sx-body .sx-button:hover:not(:disabled) { border-color: var(--gd-flair); }
.sx-body .sx-button.primary { background: var(--gd-flair); border-color: var(--gd-flair); color: var(--gd-on-flair); }
.sx-body .sx-button.ghost { background: none; }
.sx-body .sx-filter { transform: var(--gd-slant); border-radius: 2px; font-weight: 700; text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; }
.sx-body .sx-filter.active { background: var(--gd-flair); border-color: var(--gd-flair); color: var(--gd-on-flair); }
.sx-body .sx-select { border-radius: 3px; }

/* Win / loss / tie chips: solid slanted blocks */
.sx-body .sx-chip { transform: var(--gd-slant); border-radius: 2px; font-style: italic; }
.sx-body .sx-chip.w { background: var(--good); border-color: var(--good); color: var(--sx-panel); }
.sx-body .sx-chip.l { background: var(--bad); border-color: var(--bad); color: var(--sx-panel); }
.sx-body .sx-chip.t { background: var(--warn); border-color: var(--warn); color: var(--sx-panel); }
.sx-body :is(.sx-extra, .sx-injury, .sx-countdown) { transform: var(--gd-slant); border-radius: 2px; }

/* ---------- home: team cards ---------- */

.sx-body .sx-mc::before { height: 6px; }
.sx-body .sx-mc-id strong { font-size: 23px; line-height: 1.05; }
.sx-body .sx-mc-rec strong { font-size: 34px; }
.sx-body .sx-mc-game { border-radius: 4px; border-left: 4px solid var(--gd-flair); }
.sx-body .sx-mc-game.live { border-left-color: var(--gd-live); }
.sx-body .sx-mc-game-text strong { font-weight: 700; font-style: italic; text-transform: uppercase; font-stretch: 85%; }
.sx-body .sx-mc-links a { font-weight: 700; font-style: italic; text-transform: uppercase; font-stretch: 85%; letter-spacing: .04em; }

/* ---------- game lists ---------- */

.sx-body .sx-gr { border-radius: 4px; border-left: 3px solid transparent; }
.sx-body .sx-gr:hover { border-color: transparent; border-left-color: var(--gd-flair); }
.sx-body .sx-gr.live { border-left-color: var(--gd-live); }
.sx-body .sx-gr-text strong { font-size: 15px; font-weight: 700; font-style: italic; text-transform: uppercase; font-stretch: 82%; letter-spacing: .01em; }
.sx-body .sx-gr-side strong { font-size: 15px; }

/* ---------- Scores page: score-bug cards ---------- */

.sx-body .sx-sb { border-radius: 4px; border-left: 5px solid var(--gd-flair); background: var(--sx-panel); }
.sx-body .sx-sb:hover { background: var(--sx-panel-2); }
.sx-body .sx-sb.live { border-left-color: var(--gd-live); }
.sx-body .sx-sb-status { font-style: italic; letter-spacing: .06em; }
.sx-body .sx-sb-name { font-weight: 700; font-style: italic; text-transform: uppercase; font-stretch: 82%; font-size: 15.5px; }
.sx-body .sx-sb-team.lost .sx-sb-name { font-weight: 500; }
.sx-body .sx-sb-score { font-size: 22px; }

/* ---------- tables ---------- */

.sx-body .sx-table th {
  background: var(--sx-panel-2);
  border-bottom: 2px solid var(--gd-flair);
  font-style: italic;
  letter-spacing: .07em;
}
.sx-body .sx-table tr.me td:first-child,
.sx-body .sx-table tr.next td:first-child { box-shadow: inset 4px 0 0 var(--gd-flair); }

/* ---------- next-game / watch cards, team overview ---------- */

.sx-body .sx-wc { border-radius: 6px; border-left: 5px solid var(--gd-flair); }
.sx-body .sx-wc-team strong { font-size: 19px; }
.sx-body .sx-wc-match, .sx-body .sx-spot-match { border-radius: 4px; }
.sx-body .sx-spot-text strong { font-size: 21px; }
.sx-body .sx-spot-score strong { font-size: 32px; }
.sx-body .sx-tile { border-radius: 4px; border-top: 3px solid var(--gd-flair); }
.sx-body .sx-tile strong { font-size: 26px; }
.sx-body .sx-tile-label { font-style: italic; }
.sx-body .sx-leader-name .sx-leader-line { font-size: 15px; font-weight: 800; font-style: italic; font-stretch: 80%; }

/* ---------- team / player header ---------- */

.sx-body .sx-hero { border-radius: 6px; }
.sx-body .sx-hero::after { height: 6px; }
.sx-body .sx-hero-id h1 { font-size: 60px; line-height: .95; }
.sx-body .sx-hero-id h1 .loc { font-style: italic; font-weight: 700; letter-spacing: .06em; }
.sx-body .sx-hero-stat { transform: var(--gd-slant); border-radius: 3px; border-top: 3px solid var(--gd-flair); }
.sx-body .sx-hero-stat strong { font-size: 26px; }
.sx-body .sx-hero-stat:first-child strong { font-size: 34px; }
.sx-body .sx-hero-stat span { font-style: italic; }

.sx-body .sx-tabs { border-bottom: 2px solid var(--line); gap: 4px; padding-bottom: 6px; }
.sx-body .sx-tabs a {
  transform: var(--gd-slant);
  border-radius: 2px;
  border-bottom: 0;
  margin: 0;
  padding: 7px 14px;
  font-weight: 700;
  font-stretch: 85%;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sx-body .sx-tabs a.active { background: var(--gd-flair); color: var(--gd-on-flair) !important; }

/* ---------- toasts ---------- */

.sx-body .sx-toast { border-radius: 4px; border-left: 5px solid var(--gd-flair); }