*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── Color schemes ──
Dark is the default (also what paints before JS runs). js/theme.js stamps
data-theme="dark"|"light" on — "system" is resolved to one of the two
in JS via prefers-color-scheme, so CSS only ever knows these two blocks.
--overlay-1/2/3 are the "faint tint over the background" fills (weak →
strong); they're white-based on dark and black-based on light, so any rule
needing that effect must use them, never a raw rgba(255,255,255,…). */
:root {
color-scheme: dark;
--bg: #0d0f14;
--surface: #161a22;
--card: #1e2330;
--card-hover: #252c3d;
--card-live: #1d2e23; /* in-progress: muted forest green */
--card-live-h: #25382c;
--card-done: #1a1c22; /* finished today: drained neutral */
--card-done-h: #20232a;
--th-bg: rgba(255,255,255,0.04); /* table header row fill */
--border: #2a3045;
--border-live: #2d5a3c;
--border-done: #23262d;
--edge-inner: rgba(0,0,0,0.50); /* darker inner hairline for the header's letterpress seam */
--edge-line: #37373a; /* neutral (non-blue) lit hairline of the seam — avoids --border's blue tint */
--accent: #3d7eff;
--accent2: #7b4fff;
--logo-blue: #2f6fed; /* fixed brand blue, constant across both themes — SB crest + wordmark */
--logo-gold: #ffc94d; /* brand gold — reserved for the parked SVG wordmark; not currently rendered */
--text: #e8eaf2;
--muted: #7a8099;
--tab-active: #ffffff;
--overlay-1: rgba(255,255,255,0.04);
--overlay-2: rgba(255,255,255,0.06);
--overlay-3: rgba(255,255,255,0.1);
--backdrop: rgba(0,0,0,0.7);
/* Subtle film-grain texture for section backgrounds (inline SVG feTurbulence
noise, desaturated). Layer it ABOVE a base: `background: var(--texture),
;`. The tile is an intrinsic 140px stitch-tiled square, so consumers
need no background-size. The noise is grayscale, so how much it shows
depends on the ground: this (dark) value stays faint, while the light theme
overrides --texture below with a STRONGER opacity — a flat grey speckle is
otherwise near-invisible on the near-white light surface. Tune per theme:
strength → the rect `opacity`; coarseness → `baseFrequency` (lower =
chunkier), which is kept in sync across both themes. */
--texture: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.4'%20numOctaves='1'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'%20opacity='0.09'/%3E%3C/svg%3E");
}
:root[data-theme="light"] {
color-scheme: light;
--bg: #eef1f6;
--surface: #ffffff;
--card: #ffffff;
--card-hover: #f2f4f9;
--card-live: #e9f5ec;
--card-live-h: #ddefe2;
--card-done: #e9ebf0;
--card-done-h: #e0e3ea;
--th-bg: #e2e7f0; /* table header row fill: distinct from white rows */
--logo-chip-bg: #1e2330; /* dark tile behind mostly-white league logos (light mode) */
--border: #d4dae5;
--border-live: #a8d5b4;
--border-done: #dcdfe6;
--edge-inner: rgba(0,0,0,0.06); /* darker inner hairline for the header's letterpress seam */
--edge-line: #d4dae5; /* matches --border here: the light seam already reads clean */
--accent: #2b66d9;
--accent2: #6a43d4;
--text: #1b1f2a;
--muted: #5c6478;
--tab-active: #0d0f14;
--overlay-1: rgba(0,0,0,0.05);
--overlay-2: rgba(0,0,0,0.07);
--overlay-3: rgba(0,0,0,0.12);
--backdrop: rgba(15,20,30,0.45);
/* Grain override — grey noise barely registers on the near-white light
ground, so this carries a much stronger rect opacity than the dark default
above (only the opacity differs; baseFrequency stays in sync). */
--texture: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.4'%20numOctaves='1'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'%20opacity='0.28'/%3E%3C/svg%3E");
}
body {
background: var(--bg);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
min-height: 100vh;
}
/* ── Header ── */
header {
background: var(--texture), linear-gradient(135deg, var(--bg) 0%, var(--surface) 100%);
/* Letterpress seam: a darker inner hairline (--edge-inner) stacked just above
the visible --edge-line, so the bottom edge reads as a subtle pressed/raised
groove (≈2px total) rather than a flat rule. Both tokens are theme-tuned and
kept neutral (no blue) so the seam doesn't compete with the accent. */
border-bottom: 1px solid var(--edge-line);
box-shadow: inset 0 -1px 0 var(--edge-inner);
padding: 1.25rem 2rem;
display: flex;
align-items: center;
gap: 0.75rem;
position: sticky;
top: 0;
z-index: 100;
}
.logo-crest {
width: 40px;
height: 40px;
color: var(--logo-blue);
flex-shrink: 0;
}
.logo-crest-mono {
font-family: Georgia, 'Times New Roman', serif;
font-weight: 700;
}
header h1 {
font-family: Georgia, 'Times New Roman', serif;
font-size: 1.75rem;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--logo-blue);
}
.tz-select {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.3rem 0.5rem;
font-size: 0.75rem;
max-width: 16rem;
cursor: pointer;
}
.tz-select:hover { border-color: var(--accent); }
.tz-select:focus { outline: none; border-color: var(--accent); }
@media (max-width: 640px) {
.tz-select { max-width: 9rem; }
}
/* ── Header account menu ── */
/* No display property on .user-menu itself, so the [hidden] attribute (set
until /api/me confirms a session) still works. */
.user-menu { margin-left: auto; position: relative; }
.user-menu-btn {
background: var(--surface);
color: var(--muted);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.5rem 0.85rem;
font-size: 0.9rem;
cursor: pointer;
white-space: nowrap;
max-width: 12rem;
overflow: hidden;
text-overflow: ellipsis;
}
.user-menu-btn:hover { border-color: var(--accent); color: var(--text); }
.user-menu-dropdown {
display: none;
position: absolute;
right: 0;
top: calc(100% + 8px);
min-width: 190px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.3rem;
flex-direction: column;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.user-menu-dropdown.open { display: flex; }
.user-menu-item {
background: transparent;
border: none;
color: var(--text);
font-size: 0.9rem;
text-align: left;
padding: 0.6rem 0.8rem;
border-radius: 8px;
cursor: pointer;
white-space: nowrap;
}
.user-menu-item:hover { background: var(--overlay-2); }
/* ── Tabs ── */
.tabs-wrapper {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 0 2rem;
overflow-x: auto;
white-space: nowrap;
}
.tabs {
display: inline-flex;
gap: 0;
}
.tab {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.9rem 1.25rem;
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
color: var(--muted);
border-bottom: 2px solid transparent;
transition: color 0.2s, border-color 0.2s;
user-select: none;
}
.tab:hover { color: var(--text); }
.tab.active {
color: var(--tab-active);
border-bottom-color: var(--accent);
}
/* League badges fetched from TheSportsDB's r2 CDN. URLs are stable static
assets — see lookupleague.php?id={leagueId}.strBadge. Height is tuned
to read at roughly the same size as the emoji icons they replaced. */
.tab-icon {
height: 1.45rem;
width: auto;
object-fit: contain;
flex-shrink: 0;
}
/* ── Main content ── */
main {
padding: 2rem;
max-width: 1400px;
margin: 0 auto;
}
.league-panel { display: none; }
.league-panel.active { display: block; }
.panel-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.panel-title {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-size: 1.1rem;
font-weight: 600;
color: var(--text);
}
.panel-icon {
height: 2.25rem;
width: auto;
object-fit: contain;
flex-shrink: 0;
}
/* Some league badges are mostly-white artwork on transparency (e.g. Champions
League) and wash out against the light theme's white surfaces. Flag such a
league by adding `logo-chip` to BOTH its ![]()
tags in index.html (the
.tab-icon in the tab strip and the .panel-icon in the panel header): in
light mode the logo then sits on a small dark rounded tile so it reads.
Light-scoped, so dark mode (already a dark surface) is untouched. */
:root[data-theme="light"] .logo-chip {
background: var(--logo-chip-bg);
padding: 0.15rem;
border-radius: 0.3rem;
}
.panel-meta {
font-size: 0.75rem;
color: var(--muted);
}
/* ── Sub-tabs (per-league) ── */
.subtabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border);
margin-bottom: 1.25rem;
}
.subtab {
padding: 0.55rem 1rem;
cursor: pointer;
font-size: 0.8rem;
font-weight: 500;
color: var(--muted);
border-bottom: 2px solid transparent;
transition: color 0.15s, border-color 0.15s;
user-select: none;
}
.subtab:hover { color: var(--text); }
.subtab.active { color: var(--tab-active); border-bottom-color: var(--accent); }
/* ── Standings table ── */
.standings-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
background: var(--card);
border-radius: 12px;
overflow: hidden;
}
.standings-table thead {
background: var(--th-bg);
}
.standings-table th {
text-align: left;
padding: 0.6rem 0.75rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
border-bottom: 1px solid var(--border);
}
.standings-table th.numeric,
.standings-table td.numeric {
text-align: right;
font-variant-numeric: tabular-nums;
}
.standings-table td {
padding: 0.55rem 0.75rem;
border-bottom: 1px solid var(--border);
color: var(--text);
}
.standings-table tbody tr:last-child td { border-bottom: none; }
.standings-table tbody tr:hover { background: var(--card-hover); }
.standings-rank {
width: 2.5rem;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.standings-team {
display: flex;
align-items: center;
gap: 0.6rem;
}
.standings-team-logo {
width: 22px;
height: 22px;
object-fit: contain;
flex-shrink: 0;
}
.standings-points {
font-weight: 700;
color: var(--text);
}
/* Recent-form pills: one square per match (W/D/L), oldest → newest L→R. */
.standings-form {
display: inline-flex;
gap: 3px;
align-items: center;
justify-content: flex-end;
}
.standings-form-pill {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 3px;
font-size: 0.62rem;
font-weight: 700;
color: #fff;
font-family: ui-monospace, SFMono-Regular, monospace;
line-height: 1;
}
.standings-form-pill.form-w { background: #43a047; }
.standings-form-pill.form-d { background: #757575; }
.standings-form-pill.form-l { background: #e53935; }
.standings-form-empty { color: var(--muted); }
/* ── Standings zones ──
Left-border colour identifies the zone; row gets a 6% tint of the
same colour. PL uses zone-cl/el/cnl/rel for European qualification +
relegation; UCL uses zone-ucl-* for league-phase advancement; EFL
Championship uses zone-efl-auto / zone-efl-playoff / zone-rel for
promotion + relegation. */
.standings-table tbody tr.zone-cl td:first-child { box-shadow: inset 4px 0 0 #1e88e5; }
.standings-table tbody tr.zone-el td:first-child { box-shadow: inset 4px 0 0 #fb8c00; }
.standings-table tbody tr.zone-cnl td:first-child { box-shadow: inset 4px 0 0 #43a047; }
.standings-table tbody tr.zone-rel td:first-child { box-shadow: inset 4px 0 0 #e53935; }
.standings-table tbody tr.zone-ucl-r16 td:first-child { box-shadow: inset 4px 0 0 #66bb6a; }
.standings-table tbody tr.zone-ucl-ko td:first-child { box-shadow: inset 4px 0 0 #fbc02d; }
.standings-table tbody tr.zone-ucl-elim td:first-child { box-shadow: inset 4px 0 0 #ef5350; }
.standings-table tbody tr.zone-efl-auto td:first-child { box-shadow: inset 4px 0 0 #66bb6a; }
.standings-table tbody tr.zone-efl-playoff td:first-child { box-shadow: inset 4px 0 0 #fbc02d; }
.standings-table tbody tr.zone-cl { background: rgba( 30, 136, 229, 0.06); }
.standings-table tbody tr.zone-el { background: rgba(251, 140, 0, 0.06); }
.standings-table tbody tr.zone-cnl { background: rgba( 67, 160, 71, 0.06); }
.standings-table tbody tr.zone-rel { background: rgba(229, 57, 53, 0.06); }
.standings-table tbody tr.zone-ucl-r16 { background: rgba(102, 187, 106, 0.06); }
.standings-table tbody tr.zone-ucl-ko { background: rgba(251, 192, 45, 0.08); }
.standings-table tbody tr.zone-ucl-elim { background: rgba(239, 83, 80, 0.06); }
.standings-table tbody tr.zone-efl-auto { background: rgba(102, 187, 106, 0.06); }
.standings-table tbody tr.zone-efl-playoff { background: rgba(251, 192, 45, 0.08); }
.standings-legend {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 0.75rem;
font-size: 0.72rem;
color: var(--muted);
}
.standings-legend-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.standings-legend-swatch {
width: 10px;
height: 10px;
border-radius: 2px;
flex-shrink: 0;
}
.standings-legend-swatch.zone-cl { background: #1e88e5; }
.standings-legend-swatch.zone-el { background: #fb8c00; }
.standings-legend-swatch.zone-cnl { background: #43a047; }
.standings-legend-swatch.zone-rel { background: #e53935; }
.standings-legend-swatch.zone-ucl-r16 { background: #66bb6a; }
.standings-legend-swatch.zone-ucl-ko { background: #fbc02d; }
.standings-legend-swatch.zone-ucl-elim { background: #ef5350; }
.standings-legend-swatch.zone-efl-auto { background: #66bb6a; }
.standings-legend-swatch.zone-efl-playoff { background: #fbc02d; }
.standings-table tbody tr.zone-nhl-div td:first-child { box-shadow: inset 4px 0 0 #66bb6a; }
.standings-table tbody tr.zone-nhl-wc td:first-child { box-shadow: inset 4px 0 0 #fbc02d; }
.standings-table tbody tr.zone-nhl-div { background: rgba(102, 187, 106, 0.06); }
.standings-table tbody tr.zone-nhl-wc { background: rgba(251, 192, 45, 0.08); }
.standings-legend-swatch.zone-nhl-div { background: #66bb6a; }
.standings-legend-swatch.zone-nhl-wc { background: #fbc02d; }
.standings-table tbody tr.zone-nfl-div td:first-child { box-shadow: inset 4px 0 0 #66bb6a; }
.standings-table tbody tr.zone-nfl-wc td:first-child { box-shadow: inset 4px 0 0 #fbc02d; }
.standings-table tbody tr.zone-nfl-div { background: rgba(102, 187, 106, 0.06); }
.standings-table tbody tr.zone-nfl-wc { background: rgba(251, 192, 45, 0.08); }
.standings-legend-swatch.zone-nfl-div { background: #66bb6a; }
.standings-legend-swatch.zone-nfl-wc { background: #fbc02d; }
.standings-table tbody tr.zone-mls-po td:first-child { box-shadow: inset 4px 0 0 #66bb6a; }
.standings-table tbody tr.zone-mls-wc td:first-child { box-shadow: inset 4px 0 0 #fbc02d; }
.standings-table tbody tr.zone-mls-po { background: rgba(102, 187, 106, 0.06); }
.standings-table tbody tr.zone-mls-wc { background: rgba(251, 192, 45, 0.08); }
.standings-legend-swatch.zone-mls-po { background: #66bb6a; }
.standings-legend-swatch.zone-mls-wc { background: #fbc02d; }
.standings-updated {
font-size: 0.7rem;
color: var(--muted);
margin-top: 0.75rem;
text-align: right;
}
/* ── F1 standings (two stacked tables: drivers, constructors) ── */
.f1-standings-season {
font-size: 0.75rem;
color: var(--muted);
margin-bottom: 0.5rem;
}
.f1-standings-heading {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
margin: 1.25rem 0 0.5rem;
}
.f1-standings-heading:first-of-type { margin-top: 0; }
.f1-driver {
display: flex;
align-items: center;
gap: 0.6rem;
}
.f1-driver-code {
display: inline-block;
min-width: 2.6rem;
padding: 0.1rem 0.35rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-align: center;
color: var(--text);
background: var(--card-hover);
border-radius: 4px;
font-variant-numeric: tabular-nums;
}
/* ── NHL standings (4 division tables OR 2 conference+wildcard tables) ──
The NFL standings view is the same shape (8 division tables OR 2
conference-by-seed tables), so it shares these rules rather than
duplicating them. */
.nhl-standings-toggle,
.nfl-standings-toggle {
display: inline-flex;
gap: 0;
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
margin-bottom: 1rem;
}
.nhl-standings-toggle button,
.nfl-standings-toggle button {
padding: 0.4rem 0.85rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--muted);
background: var(--card);
border: none;
cursor: pointer;
transition: color 0.15s, background 0.15s;
}
.nhl-standings-toggle button:hover,
.nfl-standings-toggle button:hover { color: var(--text); }
.nhl-standings-toggle button.active,
.nfl-standings-toggle button.active {
color: var(--text);
background: var(--card-hover);
}
.nhl-standings-section,
.nfl-standings-section {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
margin: 1.25rem 0 0.5rem;
}
.nhl-standings-section:first-of-type,
.nfl-standings-section:first-of-type { margin-top: 0; }
.nhl-clinch,
.nfl-clinch {
display: inline-block;
min-width: 1.1rem;
padding: 0.05rem 0.3rem;
margin-left: 0.4rem;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.04em;
text-align: center;
color: var(--card);
background: var(--muted);
border-radius: 3px;
vertical-align: middle;
}
/* Clinch codes. The two leagues' letters don't agree (NHL y = division title,
NFL y = wild card), so each gets its own set. Unknown letters keep the
neutral --muted default above. */
.nhl-clinch.clinch-p { background: #ffd54f; color: #4e342e; } /* Presidents' Trophy */
.nhl-clinch.clinch-z { background: #1e88e5; color: #fff; } /* clinched conference */
.nhl-clinch.clinch-y { background: #43a047; color: #fff; } /* clinched division */
.nhl-clinch.clinch-x { background: #66bb6a; color: #fff; } /* clinched playoffs */
.nhl-clinch.clinch-e { background: #757575; color: #fff; } /* eliminated */
.nfl-clinch.nfl-clinch-bye { background: #ffd54f; color: #4e342e; } /* division + first-round bye */
.nfl-clinch.nfl-clinch-div { background: #43a047; color: #fff; } /* clinched division */
.nfl-clinch.nfl-clinch-wc { background: #fb8c00; color: #fff; } /* clinched wild card */
.nfl-clinch.nfl-clinch-berth { background: #66bb6a; color: #fff; } /* clinched a berth */
.nfl-clinch.nfl-clinch-out { background: #757575; color: #fff; } /* eliminated */
.nhl-streak,
.nfl-streak { font-weight: 600; font-variant-numeric: tabular-nums; }
.nhl-streak.streak-w,
.nfl-streak.streak-w { color: #43a047; }
.nhl-streak.streak-l,
.nfl-streak.streak-l { color: #e53935; }
.nhl-streak.streak-ot,
.nfl-streak.streak-ot { color: #fb8c00; }
/* ── MLS standings (2 conference tables stacked) ── */
.mls-conf-name {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
margin: 1.25rem 0 0.5rem;
}
.mls-conf-name:first-of-type { margin-top: 0; }
/* ── World Cup grouped standings (12 small tables) ── */
.wc-groups-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1rem;
}
.wc-group-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.75rem 0.85rem;
}
.wc-group-name {
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.04em;
color: var(--muted);
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.wc-group-card .standings-table { font-size: 0.85rem; }
.wc-group-card .standings-table th,
.wc-group-card .standings-table td { padding: 0.35rem 0.4rem; }
.wc-group-card .standings-team-logo { width: 18px; height: 18px; }
/* Top-2 advance from each group; rows 3-4 are eliminated (no third-place
playoff path applies here — TheSportsDB's strDescription disambiguates). */
.wc-group-card .standings-table tbody tr.zone-wc-adv td:first-child {
box-shadow: inset 4px 0 0 #43a047;
}
.wc-group-card .standings-table tbody tr.zone-wc-adv { background: rgba(67, 160, 71, 0.06); }
.wc-group-card .standings-table tbody tr.zone-wc-third td:first-child {
box-shadow: inset 4px 0 0 #fbc02d;
}
.wc-group-card .standings-table tbody tr.zone-wc-third { background: rgba(251, 192, 45, 0.08); }
/* ── World Cup bracket (R32 → Final) — reuses .bracket-svg styling ── */
.wc-bracket-svg .br-round-label {
fill: var(--muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wc-bracket-svg .br-tbd {
fill: var(--muted);
font-size: 10px;
font-style: italic;
}
/* Group blocks: 4 rows per block, ranked, with advancing-team tints. */
.wc-bracket-svg .br-grp-rank { fill: var(--muted); font-size: 9px; font-weight: 700; }
.wc-bracket-svg .br-grp-team { fill: var(--text); font-size: 10px; font-weight: 600; }
.wc-bracket-svg .br-grp-pts { fill: var(--text); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wc-bracket-svg .br-grp-row-bg { fill: transparent; }
.wc-bracket-svg .br-grp-row-adv .br-grp-row-bg { fill: rgba(67, 160, 71, 0.10); }
.wc-bracket-svg .br-grp-row-third .br-grp-row-bg { fill: rgba(251, 192, 45, 0.10); }
/* Group-to-R32 connectors are subtler than knockout-round connectors so the
deeper rounds remain visually dominant. */
.wc-bracket-svg .br-conn-grp {
stroke: var(--border);
stroke-width: 1;
opacity: 0.5;
}
/* Trophy glyph above the Final card — gives the rightmost column visual
weight so the L-to-R flow reads as "this is the destination". */
.wc-bracket-svg .wc-trophy { font-size: 28px; }
/* WC bracket is narrower than the Stanley Cup one — drop the inherited
900px floor so it fits laptop viewports without horizontal scroll. */
.wc-bracket-svg { min-width: 600px; }
/* ── Stanley Cup playoff bracket ── */
.bracket-banner {
display: block;
max-width: 100%;
height: auto;
max-height: 70px;
margin: 0 auto 1rem;
}
.bracket-scroll {
overflow-x: auto;
padding-bottom: 0.5rem;
}
.bracket-svg {
width: 100%;
min-width: 900px;
height: auto;
display: block;
font-family: inherit;
}
/* SVG-internal classes — keep colors here so theme tweaks are local. */
.bracket-svg .br-card-bg {
fill: var(--card);
stroke: var(--border);
stroke-width: 1;
}
.bracket-svg .br-card-divider {
stroke: var(--border);
stroke-width: 1;
}
.bracket-svg .br-conn {
fill: none;
stroke: var(--border);
stroke-width: 1.5;
}
.bracket-svg .br-conn-win {
stroke: var(--accent);
stroke-width: 2;
}
.bracket-svg .br-row-loser { opacity: 0.4; }
.bracket-svg .br-team-abbrev { fill: var(--text); font-size: 13px; font-weight: 700; }
.bracket-svg .br-team-seed { fill: var(--muted); font-size: 8px; letter-spacing: 0.04em; }
.bracket-svg .br-team-wins { fill: var(--text); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* WC knockout rows reuse the .br-team-* classes but should match the
group-stage row scale (.br-grp-team/.br-grp-pts, 10px) feeding them —
the Stanley Cup bracket keeps the larger defaults above. Must follow the
base .bracket-svg rules so equal-specificity source order wins. */
.wc-bracket-svg .br-team-abbrev { font-size: 10px; }
.wc-bracket-svg .br-team-wins { font-size: 10px; }
/* "PENS" marker on a knockout card decided by a shootout — small, muted, and
between the two row-scores so the numbers don't read as a plain scoreline. */
.wc-bracket-svg .wc-pens-tag {
fill: var(--muted);
font-size: 7px;
font-weight: 700;
letter-spacing: 0.08em;
}
.bracket-svg .br-series-label {
fill: var(--muted);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ── Grid ── */
.events-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
}
/* ── Event Card ── */
.event-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.25rem 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
cursor: pointer;
}
.event-card:hover {
background: var(--card-hover);
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(61, 126, 255, 0.1);
}
.event-card.in-progress {
background: var(--card-live);
border-color: var(--border-live);
}
.event-card.in-progress:hover {
background: var(--card-live-h);
box-shadow: 0 8px 32px rgba(102, 187, 106, 0.18);
}
.event-card.finished {
background: var(--card-done);
border-color: var(--border-done);
opacity: 0.65;
}
.event-card.finished:hover {
background: var(--card-done-h);
opacity: 1;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.card-date-strip {
display: flex;
align-items: center;
justify-content: space-between;
}
.card-date {
font-size: 0.72rem;
font-weight: 600;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.card-time {
font-size: 0.72rem;
color: var(--muted);
background: var(--overlay-1);
border-radius: 6px;
padding: 0.2rem 0.5rem;
}
.matchup {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.team {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
flex: 1;
min-width: 0;
}
.team-logo {
width: 56px;
height: 56px;
object-fit: contain;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.team-logo-placeholder {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 700;
color: #fff;
flex-shrink: 0;
}
.team-name {
font-size: 0.75rem;
font-weight: 600;
text-align: center;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.vs-badge {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.65rem;
font-weight: 700;
color: var(--muted);
letter-spacing: 0.04em;
}
/* ── States ── */
.state-box {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 4rem 2rem;
color: var(--muted);
}
.spinner {
width: 40px;
height: 40px;
border: 3px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.state-icon { font-size: 2.5rem; }
.state-msg { font-size: 0.9rem; }
/* ── Date group header ── */
.date-header {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0;
margin-top: 0.5rem;
}
.date-header:first-child { margin-top: 0; }
.date-header-label {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
white-space: nowrap;
}
.date-header-line {
flex: 1;
height: 1px;
background: var(--border);
}
/* ── Modals (shared: auth gate, match detail, invaders) ── */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: var(--backdrop);
z-index: 500;
align-items: center;
justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 2rem;
width: 340px;
display: flex;
flex-direction: column;
gap: 1rem;
}
.modal-box h2 { font-size: 1rem; font-weight: 700; }
.modal-box label { font-size: 0.75rem; color: var(--muted); display: block; margin-bottom: 0.25rem; }
.modal-box input {
width: 100%;
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.55rem 0.75rem;
color: var(--text);
font-size: 0.85rem;
}
.modal-box input:focus { outline: none; border-color: var(--accent); }
.modal-error { font-size: 0.75rem; color: #f44336; min-height: 1em; }
.modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.btn-submit {
padding: 0.45rem 0.9rem; font-size: 0.8rem; font-weight: 600; border-radius: 8px;
border: none; background: var(--accent); color: #fff; cursor: pointer;
}
.btn-submit:disabled { opacity: 0.5; cursor: default; }
/* ── Race card (F1, single-event layout) ── */
.race-hero {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
text-align: center;
padding: 0.25rem 0;
}
.race-icon {
font-size: 2.25rem;
line-height: 1;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.race-logo {
width: 100%;
max-width: 180px;
height: 80px;
object-fit: contain;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.race-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--text);
line-height: 1.25;
}
.race-venue {
font-size: 0.72rem;
color: var(--muted);
}
/* ── Match detail overlay ── */
.match-detail-box {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 2rem;
width: 90%;
max-width: 560px;
max-height: 85vh;
overflow-y: auto;
position: relative;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.match-detail-close {
position: absolute;
top: 0.75rem;
right: 1rem;
background: transparent;
border: none;
color: var(--muted);
font-size: 1.5rem;
cursor: pointer;
line-height: 1;
padding: 0.2rem 0.5rem;
border-radius: 6px;
transition: color 0.15s;
}
.match-detail-close:hover { color: var(--text); }
.match-detail-header {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding-right: 2rem;
}
.match-detail-league {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
}
.match-detail-date {
font-size: 0.82rem;
color: var(--muted);
}
.match-detail-scoreboard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 1.25rem 0;
}
.match-detail-team {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
min-width: 0;
}
.match-detail-team-logo {
width: 72px;
height: 72px;
object-fit: contain;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.match-detail-team-name {
font-size: 0.82rem;
font-weight: 600;
text-align: center;
color: var(--text);
line-height: 1.3;
}
.match-detail-score-center {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.match-detail-score {
font-size: 2.75rem;
font-weight: 800;
color: var(--text);
letter-spacing: -0.03em;
line-height: 1;
}
.match-detail-vs {
font-size: 1.1rem;
font-weight: 600;
color: var(--muted);
}
.match-status-pill {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.2rem 0.6rem;
border-radius: 20px;
}
.match-status-pill.live {
background: rgba(76, 175, 80, 0.15);
color: #66bb6a;
border: 1px solid rgba(76, 175, 80, 0.3);
}
.match-status-pill.final {
background: var(--overlay-1);
color: var(--muted);
border: 1px solid var(--border);
}
.match-status-pill.upcoming {
background: rgba(61, 126, 255, 0.1);
color: var(--accent);
border: 1px solid rgba(61, 126, 255, 0.3);
}
.match-detail-loading-row {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.7rem;
color: var(--muted);
justify-content: center;
}
.match-detail-spinner {
width: 12px;
height: 12px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.8s linear infinite;
flex-shrink: 0;
}
.match-detail-info {
display: flex;
flex-direction: column;
gap: 0.6rem;
border-top: 1px solid var(--border);
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.match-detail-info-row {
display: flex;
gap: 0.75rem;
font-size: 0.78rem;
}
.match-detail-info-label {
color: var(--muted);
min-width: 88px;
flex-shrink: 0;
}
.match-detail-info-value { color: var(--text); }
/* ── Match detail: live timeline + stats ── */
.md-section {
border-top: 1px solid var(--border);
padding-top: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.md-section-title {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
}
/* Stats */
.md-stat { display: flex; flex-direction: column; gap: 0.3rem; }
.md-stat-head {
display: flex;
align-items: baseline;
font-size: 0.75rem;
}
.md-stat-name { flex: 1; text-align: center; color: var(--muted); }
.md-stat-home, .md-stat-away {
font-weight: 700;
color: var(--text);
min-width: 2.5rem;
}
.md-stat-away { text-align: right; }
.md-stat-bar {
display: flex;
height: 6px;
border-radius: 3px;
overflow: hidden;
background: var(--overlay-2);
}
.md-stat-fill.home { background: var(--accent); }
.md-stat-fill.away { background: #66bb6a; }
/* Timeline */
.md-timeline { display: flex; flex-direction: column; gap: 0.55rem; }
.md-tl-row {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
}
.md-tl-row.away { flex-direction: row-reverse; text-align: right; }
.md-tl-min {
font-weight: 700;
color: var(--accent);
min-width: 2.4rem;
flex-shrink: 0;
}
.md-tl-row.away .md-tl-min { text-align: right; }
.md-tl-icon { flex-shrink: 0; }
.md-tl-text { color: var(--text); min-width: 0; }
.md-tl-text em {
font-style: normal;
color: var(--muted);
font-size: 0.72rem;
}
/* Goals: highlighted row with scorer headshot + assist */
.md-tl-row.goal {
background: rgba(102, 187, 106, 0.1);
border: 1px solid rgba(102, 187, 106, 0.28);
border-radius: 10px;
padding: 0.5rem 0.6rem;
}
.md-tl-row.goal .md-tl-icon { font-size: 1.15rem; }
.md-tl-row.goal .md-tl-text {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.md-tl-row.goal.away .md-tl-text { align-items: flex-end; }
.md-tl-cutout {
width: 34px;
height: 34px;
border-radius: 50%;
object-fit: cover;
object-position: top center;
background: var(--overlay-2);
flex-shrink: 0;
}
.md-tl-scorer {
font-weight: 700;
color: var(--text);
font-size: 0.85rem;
}
.md-tl-assist {
font-size: 0.7rem;
color: var(--muted);
}
/* ── Match detail: squads drill-down ── */
.md-squads-btn {
width: 100%;
margin-top: 1.25rem;
background: rgba(61,126,255,0.1);
border: 1px solid rgba(61,126,255,0.3);
color: var(--accent);
font-size: 0.8rem;
font-weight: 700;
padding: 0.65rem;
border-radius: 10px;
cursor: pointer;
letter-spacing: 0.03em;
transition: background 0.15s;
}
.md-squads-btn:hover { background: rgba(61,126,255,0.18); }
.md-back-btn {
position: absolute; /* mirror the × so both share the top toolbar row */
top: 0.7rem;
left: 1rem;
z-index: 1;
background: var(--overlay-1);
border: 1px solid var(--border);
color: var(--text);
font-size: 0.75rem;
padding: 0.35rem 0.7rem;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s;
}
.md-back-btn:hover { background: var(--overlay-3); }
.md-squads { display: flex; gap: 1rem; align-items: flex-start; }
.md-squad-col {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.md-squad-team {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
font-size: 0.82rem;
color: var(--text);
padding-bottom: 0.3rem;
}
.md-squad-team img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.md-squad-team span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-squad-group-title {
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin-top: 0.5rem;
}
.md-player { display: flex; align-items: center; gap: 0.45rem; }
.md-player.sub { opacity: 0.7; }
.md-player-photo {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
object-position: top center;
background: var(--overlay-2);
flex-shrink: 0;
}
.md-player-num {
font-weight: 700;
color: var(--muted);
font-size: 0.7rem;
min-width: 1.4rem;
text-align: center;
flex-shrink: 0;
}
.md-player-body { min-width: 0; display: flex; flex-direction: column; }
.md-player-name {
font-size: 0.76rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.md-player-meta {
font-size: 0.64rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.md-squad-note { font-size: 0.7rem; color: var(--muted); font-style: italic; padding: 0.25rem 0; }
/* ── Match detail: player profile drill-down ── */
/* Sections stack several deep in this view, so each carries its own bottom
padding — content ends 1.25rem above the next section's border, mirroring
the 1.25rem the border sits above the next title. */
.md-player-section { padding-bottom: 1.25rem; }
.md-player.clickable {
cursor: pointer;
margin: 0 -0.35rem;
padding: 0.15rem 0.35rem;
border-radius: 8px;
transition: background 0.15s;
}
.md-player.clickable:hover { background: var(--overlay-2); }
.md-player-hero { display: flex; align-items: center; gap: 0.9rem; }
.md-player-hero-photo {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
object-position: top center;
background: var(--overlay-2);
flex-shrink: 0;
}
.md-player-hero-body { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.md-player-hero-name { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.md-player-hero-meta { font-size: 0.76rem; color: var(--muted); }
.md-player-desc { font-size: 0.78rem; line-height: 1.55; color: var(--text); margin: 0; }
.md-career { display: flex; flex-direction: column; gap: 0.45rem; }
.md-career-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--text); }
.md-career-row img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.md-career-badge-gap { width: 20px; flex-shrink: 0; }
.md-career-team { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-career-type {
font-size: 0.66rem;
color: var(--muted);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.05rem 0.35rem;
flex-shrink: 0;
}
.md-career-years { color: var(--muted); font-size: 0.72rem; flex-shrink: 0; }
.md-honours { display: flex; flex-direction: column; gap: 0.45rem; }
.md-honour-row { display: flex; flex-direction: column; gap: 0.1rem; }
.md-honour-name { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.md-honour-seasons { font-size: 0.68rem; color: var(--muted); padding-left: 1.35rem; }
.md-table-wrap { overflow-x: auto; }
.md-stats-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; white-space: nowrap; }
.md-stats-table th {
text-align: right;
font-weight: 600;
color: var(--muted);
font-size: 0.64rem;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 0.3rem 0.45rem;
border-bottom: 1px solid var(--border);
}
.md-stats-table td { text-align: right; padding: 0.3rem 0.45rem; color: var(--text); }
.md-stats-table th:first-child, .md-stats-table td:first-child { text-align: left; padding-left: 0; }
.md-stats-table th:nth-child(2), .md-stats-table td:nth-child(2) {
text-align: left;
max-width: 9rem;
overflow: hidden;
text-overflow: ellipsis;
}
.md-stats-table tr.md-stats-career td { border-top: 1px solid var(--border); font-weight: 700; }
/* ── Preferences page (#prefs) ── */
.prefs-layout {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.prefs-nav {
flex-shrink: 0;
width: 180px;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.prefs-cat {
padding: 0.55rem 0.8rem;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 500;
color: var(--muted);
cursor: pointer;
user-select: none;
transition: color 0.15s, background 0.15s;
}
.prefs-cat:hover { color: var(--text); background: var(--overlay-1); }
.prefs-cat.active { color: var(--tab-active); background: var(--overlay-2); }
.prefs-content {
flex: 1;
min-width: 0;
max-width: 640px;
}
.prefs-section {
display: flex;
flex-direction: column;
gap: 1rem;
}
.pref-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem 1rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 0.9rem 1rem;
}
.pref-row-text { min-width: 0; }
.pref-label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--text);
}
.pref-help {
font-size: 0.72rem;
color: var(--muted);
margin-top: 0.15rem;
}
/* Sub-section heading inside a prefs category (e.g. Other → Easter Eggs). */
.pref-subhead {
margin: 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.prefs-section > .pref-subhead:not(:first-child) { margin-top: 0.5rem; }
/* On/off switch — the boolean counterpart to the pref-row selects. */
.pref-switch {
flex-shrink: 0;
display: inline-flex;
align-items: center;
cursor: pointer;
}
.pref-switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.pref-switch-track {
position: relative;
width: 42px;
height: 24px;
border-radius: 999px;
background: var(--overlay-2);
border: 1px solid var(--border);
transition: background 0.15s, border-color 0.15s;
}
.pref-switch-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--muted);
transition: transform 0.15s, background 0.15s;
}
.pref-switch input:checked + .pref-switch-track {
background: var(--accent);
border-color: var(--accent);
}
.pref-switch input:checked + .pref-switch-track .pref-switch-thumb {
transform: translateX(18px);
background: #fff;
}
.pref-switch input:focus-visible + .pref-switch-track {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Spoiler reveal: a full-width block that drops below its row's controls
(the row is a wrapping flex line, so 100% basis forces its own line). */
.pref-secrets {
flex-basis: 100%;
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-top: 0.2rem;
padding-top: 0.8rem;
border-top: 1px solid var(--border);
}
.pref-secrets[hidden] { display: none; }
.pref-secret-keys {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
margin-bottom: 0.35rem;
}
.pref-secret-keys kbd {
min-width: 1.5rem;
padding: 0.15rem 0.3rem;
border: 1px solid var(--border);
border-bottom-width: 2px;
border-radius: 5px;
background: var(--overlay-1);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.72rem;
line-height: 1.3;
text-align: center;
color: var(--text);
}
.pref-secret-name {
font-size: 0.8rem;
font-weight: 600;
color: var(--text);
}
.pref-league-list {
display: flex;
flex-direction: column;
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.pref-league-row {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.9rem;
border-bottom: 1px solid var(--border);
}
.pref-league-row:last-child { border-bottom: none; }
/* Drag-to-reorder: the grip is the only draggable element, and the insertion
line marks where the dragged row will land (see prefs-page.js). */
.pref-drag-handle {
display: flex;
align-items: center;
flex-shrink: 0;
padding: 0 0.15rem;
color: var(--muted);
opacity: 0.55;
cursor: grab;
touch-action: none;
}
.pref-drag-handle:active { cursor: grabbing; }
.pref-league-row:hover .pref-drag-handle { opacity: 1; }
.pref-drag-handle svg { display: block; fill: currentColor; }
.pref-league-row.is-dragging { opacity: 0.4; }
.pref-league-row.drop-above { box-shadow: inset 0 2px 0 0 var(--accent); }
.pref-league-row.drop-below { box-shadow: inset 0 -2px 0 0 var(--accent); }
.pref-league-row.is-hidden .pref-league-icon,
.pref-league-row.is-hidden .pref-league-name { opacity: 0.45; }
.pref-league-icon {
height: 1.25rem;
width: 1.5rem;
object-fit: contain;
flex-shrink: 0;
}
.pref-league-name {
flex: 1;
min-width: 0;
font-size: 0.85rem;
font-weight: 500;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pref-move-btn {
width: 26px;
height: 26px;
border: 1px solid var(--border);
background: transparent;
color: var(--muted);
border-radius: 6px;
cursor: pointer;
font-size: 0.8rem;
line-height: 1;
flex-shrink: 0;
}
.pref-move-btn:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.pref-move-btn:disabled { opacity: 0.3; cursor: default; }
.pref-show-toggle {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-left: 0.4rem;
font-size: 0.72rem;
color: var(--muted);
cursor: pointer;
user-select: none;
flex-shrink: 0;
}
.pref-show-toggle input { accent-color: var(--accent); cursor: pointer; }
.pref-show-toggle input:disabled { cursor: default; }
.pref-reset-btn {
align-self: flex-start;
padding: 0.45rem 0.9rem;
font-size: 0.78rem;
border-radius: 8px;
border: 1px solid var(--border);
background: transparent;
color: var(--muted);
cursor: pointer;
}
.pref-reset-btn:hover { color: var(--text); border-color: var(--accent); }
.pref-reset-btn.danger { color: #f44336; border-color: rgba(244, 67, 54, 0.4); }
.pref-reset-btn.danger:hover { color: #fff; background: #f44336; border-color: #f44336; }
/* ── Calendar sync (prefs Calendar category) ── */
.cal-feed-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0 1.25rem; }
.cal-feed-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.6rem 0.75rem;
}
.cal-feed-main { flex: 1 1 12rem; min-width: 0; }
.cal-feed-title { font-weight: 600; }
.cal-feed-sub { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
.cal-feed-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cal-feed-actions .pref-reset-btn { align-self: auto; }
/* The Apple/Google subscribe links wear the button class. */
a.pref-reset-btn { text-decoration: none; display: inline-block; }
.cal-add-grid {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.6rem 0.9rem;
align-items: center;
justify-items: start;
max-width: 30rem;
margin: 0.5rem 0 0.9rem;
}
.cal-add-grid .tz-select { max-width: none; width: 100%; }
#calAddError { color: #f44336; }
/* ── Dashboard (user-assembled widgets, #dashboard) ── */
/* The dashboard tab and panel header carry the inline SB crest in the icon
slots; unlike ![]()
, an