/* Concept F — Velocity
   High-energy, motion-forward (NFL / NBA promo energy): white base, jet black and
   electric orange, everything leaning forward — italic heads, slanted buttons and
   tabs, cut-corner cards, speed lines. */
:root[data-mode="light"] {
  --bg: #f4f4f2; --surface: #ffffff; --surface-2: #f0f0ed; --line: #e2e2dd; --ink: #0a0a0a; --ink-2: #6b6b66;
  --header-bg: #ffffff; --header-ink: #0a0a0a; --ribbon-bg: #0a0a0a; --ribbon-ink: #ffffff;
  --jet: #0a0a0a; --row-alt: #fafaf8;
  --shadow: 0 16px 30px -22px rgba(0, 0, 0, .45);
  --cut: 14px;
}
:root[data-mode="dark"] {
  --bg: #080808; --surface: #141414; --surface-2: #1d1d1d; --line: #2a2a2a; --ink: #f6f6f4; --ink-2: #9a9a94;
  --header-bg: #0f0f0f; --header-ink: #f6f6f4; --ribbon-bg: #000; --ribbon-ink: #fff; --jet: #000; --row-alt: #171717; --cut: 14px;
}

/* type: heavy italic caps */
h1, h2, h3, .gc-name a, .brand-text b, .tab, .nav a[data-nav], .btn, .gh-name, .sp-copy h2, .nc-body h3, .ll-top b { font-style: italic; }
h1, h2, h3 { text-transform: uppercase; font-weight: 900; letter-spacing: -.01em; }
.sec-head h2 { font-size: 28px; display: flex; align-items: center; gap: 12px; }
.sec-head h2::before { content: ""; width: 26px; height: 10px; background: var(--accent); transform: skewX(-24deg); flex: none; }
.sec-head h2 small { font-style: normal; text-transform: none; }
.sec-head::after { content: ""; order: 1; flex: 1 1 30px; min-width: 30px; height: 10px; background: repeating-linear-gradient(115deg, transparent 0 6px, var(--line) 6px 8px); }
.sec-head .presented { order: 2; } .sec-head .more { order: 3; margin-left: 0; }
.eyebrow { font-style: italic; }

/* slanted controls */
.btn { border-radius: 0; text-transform: uppercase; font-weight: 800; letter-spacing: .02em; padding: 0 24px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transition: transform .2s var(--ease), background .2s, filter .2s; }
.btn:hover { transform: translateX(3px); }
.btn.ghost { box-shadow: none; background: color-mix(in srgb, currentColor 12%, transparent); }
.seg { border-radius: 0; background: transparent; gap: 4px; padding: 0; }
.seg a { border-radius: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); padding: 8px 16px; font-style: italic; text-transform: uppercase; font-weight: 800; font-size: 12px; }
.seg a.on { background: var(--jet); color: #fff; box-shadow: none; }
.combo-btn, .dp-btn, .ds-arrow, .sel { border-radius: 0; }

/* tabs: parallelograms, active one filled */
.tabs { border-bottom: 0; gap: 6px; padding-bottom: 2px; }
.tab { text-transform: uppercase; font-weight: 800; font-size: 14px; letter-spacing: .02em; padding: 10px 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); transition: background .2s, color .2s; }
.tab:hover { color: var(--ink); background: var(--surface-2); }
.tab.on { background: var(--jet); color: #fff; box-shadow: none; }
.tab-ink { display: none; }
.tabs-row { border-bottom: 0; align-items: center; } .tabs-row .tabs { flex: 0 1 auto; } .tabs-row .row-switch { margin: 0 0 0 auto; }
@media (max-width: 720px) { .tabs-row { align-items: stretch; } .tabs-row .row-switch { margin: 0; } }
.mod-leaders .tabs, .mod-standings .tabs { gap: 4px; } .mod-leaders .tab, .mod-standings .tab { padding: 7px 12px; font-size: 12px; }
.game-sticky .tabs { background: var(--bg); padding: 6px 0; }

/* header: black slanted slab behind the crest */
.site-header.bar:not(.floating) { box-shadow: 0 3px 0 var(--accent) !important; }
.site-header.bar:not(.floating) .brand { position: relative; isolation: isolate; color: #fff; padding-right: 22px; align-self: stretch; }
.site-header.bar:not(.floating) .brand::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; left: -100vw; background: var(--jet); clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%); }
.site-header.bar:not(.floating) .brand-text small { opacity: .7; }
.nav a[data-nav] { text-transform: uppercase; font-weight: 800; font-size: 15px; }
.nav a[data-nav]::after { height: 4px; bottom: 6px; transform: scaleX(0) skewX(-24deg); }
.nav a[data-nav]:hover::after, .nav a[data-nav].on::after { transform: scaleX(1) skewX(-24deg); }
.nav a.on { color: var(--ink); }
.cta { background: var(--accent); color: var(--accent-ink); }
:root { --util-bg: #0a0a0a; --util-ink: #f4f4f2; }
.utility { font-style: italic; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.util-cta { border-radius: 0; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); padding: 0 14px; }
@media (max-width: 980px) { .site-header.bar:not(.floating) .brand { padding-right: 34px; } }

/* ribbon: slanted score tiles on black */
.rb-cards { border-bottom: 0; }
.rb-cards .rb-scroll { gap: 4px; padding: 8px 10px; }
.rb-cards .rb-game { background: #1a1a1a; color: #fff; box-shadow: none; border-radius: 0; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding: 8px 22px; }
.rb-cards .rb-game:hover { transform: none; background: #262626; box-shadow: none; }
.rb-cards .rb-game.live { background: linear-gradient(110deg, color-mix(in srgb, var(--live) 45%, #1a1a1a), #1a1a1a 60%); box-shadow: none; }
.rb-cards .rb-team.lose { opacity: .5; }
.rb-cards .rb-day { color: var(--accent); font-style: italic; font-weight: 900; }
.rb-sponsor { border-right-color: #262626; } .rb-all { border-left-color: #262626; }

/* cut-corner cards */
.game-card, .news-card, .ll, .sp-card, .team-compare, .pv-team, .tcard, .tl-card, .ccard, .quotes figure, .person {
  border-radius: 0; box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.game-card { position: relative; }
.game-card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.game-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line); }
.game-card:hover::after { transform: scaleX(1); }
.game-card.live { box-shadow: inset 0 0 0 2px var(--live); }
.gc-head { background: var(--jet); color: #fff; border-bottom: 0; } .gc-head .final-tag, .gc-head .time-tag { color: #fff; } .gc-head .gc-meta { color: #a3a3a0; }
.gc-name a { text-transform: uppercase; font-weight: 800; font-size: 17px; }
.gc-score { font-style: italic; font-weight: 900; }
.gc-foot a { font-style: italic; }
.news-card:hover, .tcard:hover { transform: translateX(4px); box-shadow: inset 0 0 0 1px var(--line); }
.nc-body h3 { text-transform: uppercase; font-weight: 800; }
.ll-top { clip-path: polygon(0 0, 100% 0, 100% 78%, calc(100% - 30px) 100%, 0 100%); }
.ll-top strong { font-style: italic; font-weight: 900; }

/* tables */
.tbl th { background: var(--jet); color: #fff; font-style: italic; letter-spacing: .04em; }
.tbl th.sorted { color: var(--accent); }
.tbl td.pts, .tbl .pts { color: var(--accent); font-weight: 900; }
.tbl-wrap, .mod .tbl.mini, .up-list, .sch-day ul, .team-sched, .series, .facts, .form-list, .per-block, .tstat-grid { border-radius: 0; }

/* hero: speed lines + slanted edge */
.hero { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(255, 255, 255, .045) 46px 48px); }
.hero-copy h1 { font-size: clamp(36px, 5.4vw, 74px); line-height: .98; }
.hero-copy .eyebrow { border-radius: 0; background: var(--accent); color: var(--accent-ink); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); padding: 6px 16px; }
.hero-dots button::before, .hero-dots button i { border-radius: 0; height: 4px; } .hero-dots button i { background: var(--accent); }
.hero-arrows button { border-radius: 0; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); width: 46px; }
.auto-badge { border-radius: 0; }
.hero-vs { background: linear-gradient(110deg, #0a0a0a 0%, #0a0a0a 38%, color-mix(in srgb, var(--ca) 75%, #000) 38.2%, color-mix(in srgb, var(--ca) 45%, #000) 64%, var(--accent) 64.2%, var(--accent) 65.4%, color-mix(in srgb, var(--ch) 45%, #000) 65.6%, color-mix(in srgb, var(--ch) 80%, #000)); }

.page-head h1 { font-size: clamp(44px, 8vw, 62px); line-height: .9; text-shadow: 5px 5px 0 color-mix(in srgb, var(--accent) 40%, transparent); }
.page-head { border-bottom: 0; }
.team-hero, .player-hero { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); }
.team-hero::before, .player-hero::before { background: repeating-linear-gradient(115deg, transparent 0 34px, rgba(255, 255, 255, .06) 34px 36px); }
.team-hero::after { border-radius: 0; border: 0; width: 46%; height: 140%; top: -20%; right: -8%; background: color-mix(in srgb, var(--tc2) 18%, transparent); transform: skewX(-24deg); }
.th-text h1, .ph-info h1 { font-weight: 900; }
.game-hero { border-radius: 0; } .gh-line { border-radius: 0; }
.gh-score { font-style: italic; }
.gsb-inner { border-radius: 0; }

.ds { border-radius: 0; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); box-shadow: inset 0 0 0 1px var(--line); }
.ds.on { background: var(--jet); color: #fff; transform: none; }
.ds-n { font-style: italic; }
.mod-title-sponsor .ts-inner { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.mod-watch .w-inner { border-radius: 0; background: var(--jet); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.mod-watch .w-inner::before { background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--accent) 35%, transparent) 40%, transparent 70%); width: 100%; height: 100%; right: 0; top: 0; border-radius: 0; }
.sp-photo { background: linear-gradient(115deg, var(--c) 0 55%, color-mix(in srgb, var(--c) 70%, #000) 55%); }
.sp-copy h2 { font-size: 46px; line-height: .92; }
.teams-grid a { border-radius: 0; } .teams-grid a::before { width: 5px; transform: skewX(-12deg); }
.quick-grid a, .sp-tile, .div-chips a, .cms-dl a, .cms-acc details, .ranks div { border-radius: 0; }
.cms-cta, .cms-countdown { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.str.s-GW { background: var(--accent); color: var(--accent-ink); }
.foot-sponsors { background: var(--surface); }
.site-footer { background: var(--jet); position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--accent) 0 30%, transparent 30%); }
.mega-inner { border-radius: 0; box-shadow: inset 0 3px 0 var(--accent), 0 0 0 1px var(--line), 0 30px 60px -20px rgba(0, 0, 0, .4); }
@media (max-width: 1240px) {
  .nav a[data-nav] { font-size: 13px; padding: 0 8px; }
  .site-header.bar:not(.floating) .brand-text small { display: none; }
  .hdr { gap: 14px; }
}