/* Concept B — Rinkside
   Light, airy, rounded. Floating cards on a soft canvas; colour comes from team marks
   and one accent. Grows out of the score_concepts ribbon. */
:root[data-mode="light"] {
  --bg: #f5f6f8; --surface: #fff; --surface-2: #f1f3f6; --line: #e7eaef; --ink: #101623; --ink-2: #667085;
  --header-bg: rgba(255, 255, 255, .88); --ribbon-bg: #f5f6f8;
  --shadow: 0 1px 2px rgba(16, 22, 35, .04), 0 12px 32px -12px rgba(16, 22, 35, .14);
}
:root[data-mode="dark"] { --ribbon-bg: #070b12; }

body { font-feature-settings: "ss01"; }
h1, h2, h3 { letter-spacing: -.02em; font-weight: 800; }
.sec-head h2 { font-size: 26px; }

/* softer card borders: shadow instead of hairlines */
.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, .mod .tbl.mini, .person, .cms-acc details, .cms-dl a, .quotes figure, .ccard, .ds, .sel, .rb-cards .rb-game, .tstat-grid { box-shadow: var(--shadow); }
.game-card:hover, .news-card:hover { box-shadow: 0 2px 4px rgba(16, 22, 35, .05), 0 22px 44px -14px rgba(16, 22, 35, .22); }

.site-header { backdrop-filter: saturate(1.6) blur(16px); box-shadow: 0 1px 0 var(--line); }
.hdr { height: 76px; }
.nav ul { justify-content: center; }
.nav a[data-nav] { font-weight: 600; font-size: 15px; border-radius: 99px; }
.nav a[data-nav]::after { display: none; }
.nav a[data-nav]:hover { background: var(--surface-2); }
.nav a.on { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cta { border-radius: 99px; background: var(--ink); color: var(--bg); }
.brand-text b { font-size: 20px; }
:root { --util-bg: #101623; --util-ink: #eef1f6; }

/* ribbon: floating cards like the score_concepts page */
.rb-cards { border-bottom: 0; padding: 4px 0 0; }
.rb-cards .rb-game { border-radius: 16px; }
.rb-cards .rb-game.live { background: #fff; box-shadow: 0 0 0 1.5px var(--live), var(--shadow); }
:root[data-mode="dark"] .rb-cards .rb-game.live { background: var(--surface); }
.rb-cards .rb-live { background: color-mix(in srgb, var(--live) 10%, transparent); padding: 2px 7px; border-radius: 99px; }
.rb-cards .rb-day { writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 2px; font-size: 10px; }
.rb-cards .rb-day small { display: none; }
.rb-all { border-left: 0; }

.hero { margin-top: 18px; border-radius: 28px; min-height: 480px; box-shadow: var(--shadow); }
.hero-track { min-height: 480px; }
.hero-copy .eyebrow { background: rgba(255, 255, 255, .16); }
.hero .btn { border-radius: 99px; }
.btn { border-radius: 99px; }

.ll-top { margin: 8px; border-radius: calc(var(--r) - 4px); }
.ll { padding-bottom: 4px; }
.tabs { border-bottom: 0; gap: 6px; background: var(--surface-2); padding: 4px; border-radius: 99px; display: inline-flex; max-width: 100%; }
.tab { border-radius: 99px; padding: 8px 16px; z-index: 1; }
.tab.on { color: var(--ink); }
.tab-ink { top: 4px; bottom: 4px; height: auto; background: var(--surface); border-radius: 99px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); z-index: 0; }
.mod-leaders .tabs, .mod-standings .tabs { display: flex; margin-bottom: 12px; }
.mod-leaders .tab, .mod-standings .tab { flex: 1; padding: 7px 8px; font-size: 13px; }

.page-head h1 { font-size: clamp(34px, 5vw, 44px); }
.seg { border-radius: 99px; } .seg a { border-radius: 99px; }
.sel { border-radius: 99px; }

.tbl th { background: var(--surface); }
.tbl { --row-alt: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.combo-btn, .dp-btn { border-radius: 99px; box-shadow: var(--shadow); } .ds-arrow { box-shadow: var(--shadow); }

.mod-title-sponsor .ts-inner { border-radius: 28px; }
.mod-sponsors .sp-tier.premier .sp-tile { padding: 28px 12px; }
.team-hero, .player-hero, .game-hero, .cms-hero { border-radius: 28px; }
.game-hero { border-radius: 28px 28px 0 0; } .gh-line { border-radius: 0 0 28px 28px; }
.team-hero { background: linear-gradient(120deg, var(--tc), color-mix(in srgb, var(--tc) 55%, #000)); }

.quick-grid a { background: linear-gradient(160deg, var(--surface), var(--surface-2)); }
.site-footer { background: #0b1220; border-radius: 28px 28px 0 0; margin-top: 24px; }
.foot-sponsors { border-top: 0; background: transparent; }
.tabs-row { border-bottom: 0; align-items: center; }
.tabs-row .tabs { flex: 0 1 auto; padding: 4px; }
.tabs-row .row-switch { margin: 0 0 0 auto; }
@media (max-width: 720px) { .tabs-row { align-items: stretch; } .tabs-row .row-switch { margin: 0; } .tabs-row .tabs { align-self: flex-start; } }