/* Concept A — Broadcast
   TV-graphics language: dark arena, sharp edges, condensed caps, glowing accent edges. */
:root[data-mode="dark"] {
  --bg: #06090f; --surface: #0d131d; --surface-2: #141c29; --line: #1c2534; --ink: #f1f5fb; --ink-2: #8794a8;
  --header-bg: rgba(6, 9, 15, .86); --ribbon-bg: #000;
}
:root[data-mode="light"] { --header-bg: #0b111b; --header-ink: #f1f5fb; --bg: #eef1f6; }
:root[data-mode="light"] .site-header { --line: #1c2534; }

body { letter-spacing: .005em; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(1200px 500px at 80% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%); }
h1, h2, h3, .sec-head h2, .gc-score, .brand-text b { text-transform: uppercase; }
.sec-head h2 { font-size: 26px; letter-spacing: .02em; display: flex; align-items: center; gap: 10px; }
.sec-head h2::before { content: ""; width: 4px; height: 22px; background: var(--accent); box-shadow: 0 0 14px var(--accent); }

.site-header { backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.nav a[data-nav] { text-transform: uppercase; font-family: var(--font-display); font-size: 17px; letter-spacing: .04em; font-weight: 700; }
.nav a[data-nav]::after { bottom: 0; height: 3px; box-shadow: 0 0 10px var(--accent); }
.hdr-sponsor .smark, .util-sponsor .smark { color: var(--header-ink); }
:root { --util-bg: #000; --util-ink: #c9d3e2; }
.utility { border-bottom: 1px solid #111a27; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.cta { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 24px -6px var(--accent); }

/* ribbon: broadcast lower-third */
.rb-compact { border-bottom: 1px solid #111a27; }
.rb-compact .rb-game { font-family: var(--font-display); }
.rb-compact .rb-team { font-size: 15px; letter-spacing: .03em; }
.rb-compact .rb-game.live { background: linear-gradient(180deg, color-mix(in srgb, var(--live) 18%, transparent), transparent); box-shadow: inset 0 2px 0 var(--live); }
.rb-compact .rb-day { background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-size: 13px; }

/* hero */
.hero { border-radius: 0; margin-top: 0; --vw: calc(100vw - var(--sbw, 0px)); width: var(--vw); margin-left: calc(50% - var(--vw) / 2); margin-right: calc(50% - var(--vw) / 2); min-height: 520px; box-shadow: inset 0 -1px 0 var(--line); }
.hero-track { min-height: 520px; }
.hero-copy h1 { font-size: clamp(36px, 5.6vw, 76px); line-height: 1; letter-spacing: 0; }
/* indent to line up with page content, but keep the full text width on top of the indent */
.hero-copy { --pl: max(var(--gut), calc((var(--vw, 100vw) - var(--wrap)) / 2 + var(--gut))); padding-left: var(--pl); max-width: calc(var(--pl) + 700px); }
.hero-nav { left: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); right: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); }
.hero-copy .eyebrow { border-radius: 0; background: var(--accent); color: var(--accent-ink); }
.k-live .hero-copy .eyebrow { background: var(--live); color: #fff; }
.k-live .hero-copy .eyebrow .dot { background: #fff; }
.hero-dots button::before, .hero-dots button i { border-radius: 0; }
.hero-dots button i { background: var(--accent); }
.hero-arrows button { border-radius: 0; }
.auto-badge { border-radius: 0; }

/* cards: glowing top edge */
.game-card, .news-card, .ll, .tbl-wrap, .up-list, .team-compare, .per-block, .pv-team, .stars li, .facts, .form-list, .tl-card, .sp-tile, .quick-grid a, .teams-grid a, .series, .team-sched, .sch-day ul, .ranks div, .tstat-grid, .mod .tbl.mini { box-shadow: 0 0 0 1px var(--line); }
.game-card { position: relative; }
.game-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transition: opacity .3s; }
.game-card:hover::before { opacity: 1; }
.game-card.live::before { opacity: 1; background: var(--live); }
.gc-head { background: var(--surface-2); text-transform: uppercase; }
.gc-name a { text-transform: uppercase; font-family: var(--font-display); font-size: 18px; letter-spacing: .02em; }
.gc-score { font-size: 32px; }
.ll-top { clip-path: polygon(0 0, 100% 0, 100% 82%, 96% 100%, 0 100%); }
.ll-top strong { text-shadow: 0 0 24px rgba(255, 255, 255, .35); }

.tbl th { background: var(--surface-2); font-family: var(--font-display); font-size: 14px; letter-spacing: .06em; }
.tbl { --row-hover: color-mix(in srgb, var(--accent) 9%, var(--surface)); --row-alt: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.tbl td.pts, .tbl .pts { color: var(--accent); }

.tabs { border-bottom-color: var(--line); }
.tab { text-transform: uppercase; font-family: var(--font-display); font-size: 17px; letter-spacing: .04em; }
.tab-ink { box-shadow: 0 0 12px var(--accent); border-radius: 0; }
.seg a { text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.seg a.on { background: var(--accent); color: var(--accent-ink); }
.ds.on { box-shadow: 0 0 24px -6px var(--accent); }

.page-head h1 { font-size: clamp(42px, 7vw, 58px); line-height: .9; }
.page-head { border-bottom: 1px solid var(--line); margin-bottom: 18px; }

.game-hero, .team-hero, .player-hero { border-radius: 0; }
.gh-line { border-radius: 0; }
.team-hero::after { border-radius: 0; transform: rotate(20deg); }
.th-text h1, .ph-info h1 { line-height: .9; }

.sp-card { border-radius: 0; background: linear-gradient(90deg, var(--surface), var(--surface-2)); }
.sp-copy h2 { font-size: 48px; line-height: .95; }
.mod-watch .w-inner { border-radius: 0; background: linear-gradient(110deg, #000 0%, #0a1422 100%); box-shadow: 0 0 0 1px var(--line); }
.foot-sponsors { background: #000; } .fs-row { color: #9aa6b8; } .fs-row a:hover { color: #fff; }
.site-footer { background: #000; border-top: 1px solid var(--line); }
.presented { border-radius: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.presented .smark text, .presented .smark path { fill: var(--ink); }
.btn { text-transform: uppercase; font-family: var(--font-display); font-size: 16px; letter-spacing: .05em; }
.btn.sm { font-size: 15px; }
.str.s-PP { background: #422006; color: #fcd34d; } .str.s-SH { background: #172554; color: #93c5fd; } .str.s-EN { background: #27272a; color: #d4d4d8; }
:root[data-mode="light"] .str.s-PP { background: #fef3c7; color: #92400e; } :root[data-mode="light"] .str.s-SH { background: #dbeafe; color: #1e40af; }