/* ================================================================
   PCFL NETWORK — design system
   ESPN-style broadcast presentation for the Pure College Football League
   ================================================================ */
:root {
  --ink: #0b0d12;
  --ink-2: #15181d;
  --ink-3: #1d2127;
  --bg: #edeff2;
  --panel: #ffffff;
  --line: #e2e5e9;
  --line-dark: rgba(255,255,255,.08);
  --red: #d6001c;
  --red-dark: #9e0015;
  --gold: #f1be48;
  --text: #16181c;
  --muted: #5d6571;
  --muted-2: #99a0aa;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-head: 'Oswald', 'Arial Narrow', sans-serif;
  --font-display: 'Bebas Neue', 'Oswald', sans-serif;
  --shadow-1: 0 1px 2px rgba(10,12,16,.06), 0 4px 14px rgba(10,12,16,.06);
  --shadow-2: 0 4px 10px rgba(10,12,16,.12), 0 18px 44px rgba(10,12,16,.16);
  --radius: 10px;
  --maxw: 1280px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-ui); font-size: 14.5px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
button { font-family: inherit; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

h1,h2,h3,h4 { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .02em; margin: 0; }

/* ---------------------------------------------------------------- */
/* Header                                                            */
/* ---------------------------------------------------------------- */
.topbar {
  background: #000; color: #b9bec6; font-size: 11.5px;
  border-bottom: 1px solid #17191d;
}
.topbar .wrap { display: flex; align-items: center; gap: 18px; height: 30px; }
.topbar .spacer { flex: 1; }
.topbar a { color: #b9bec6; display: inline-flex; align-items: center; gap: 6px; }
.topbar a:hover { color: #fff; }
.topbar .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(214,0,28,.55);} 50%{ box-shadow:0 0 0 6px rgba(214,0,28,0);} }

header.main {
  background: linear-gradient(180deg, #181b21, #101317);
  position: sticky; top: 0; z-index: 90;
  border-bottom: 3px solid var(--red);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
/* Header uses full viewport width so nav doesn't get squeezed by .wrap's 1280px cap */
header.main .wrap { display: flex; align-items: center; height: 62px; gap: 18px; max-width: none; padding: 0 24px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { height: 44px; width: 44px; border-radius: 8px; object-fit: cover; }
.brand .word { line-height: 1; }
.brand .word b {
  font-family: var(--font-display); font-size: 27px; color: #fff;
  letter-spacing: .04em; font-weight: 400; display: block;
}
.brand .word span { font-size: 9px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .22em; }
.brand .word b em { color: var(--red); font-style: normal; }

nav.primary { display: flex; align-items: stretch; height: 100%; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; padding-right: 14px; }
nav.primary::-webkit-scrollbar { display: none; }
nav.primary a {
  display: flex; align-items: center; padding: 0 7px; color: #c9ced6;
  font-family: var(--font-head); font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; position: relative; white-space: nowrap; transition: color .15s;
}
nav.primary a:hover { color: #fff; }
nav.primary a.active { color: #fff; }
nav.primary a.active::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 0;
  height: 3px; background: var(--red); border-radius: 2px 2px 0 0;
}

.wk-select { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; padding-left: 8px; }
.wk-select label { font-size: 9px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .12em; }
.wk-select select {
  appearance: none; background: var(--ink-3); color: #fff; border: 1px solid #2c323b;
  border-radius: 6px; padding: 6px 24px 6px 10px; font-family: var(--font-head);
  font-size: 12px; letter-spacing: .04em; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23d6001c'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.wk-select select:hover { border-color: var(--red); }

/* ---------------------------------------------------------------- */
/* Hamburger + mobile drawer                                         */
/* ---------------------------------------------------------------- */
.hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 10px; flex-shrink: 0;
  background: var(--ink-3); border: 1px solid #2c323b; border-radius: 8px; cursor: pointer;
}
.hamburger span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: transform .25s, opacity .2s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer-overlay {
  position: fixed; inset: 0; background: rgba(5,6,8,.62); backdrop-filter: blur(3px);
  z-index: 190; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 86vw); z-index: 200;
  background: linear-gradient(180deg, #15181d, #0b0d12); color: #fff;
  transform: translateX(-105%); transition: transform .34s cubic-bezier(.16,.84,.3,1);
  display: flex; flex-direction: column; box-shadow: 10px 0 44px rgba(0,0,0,.55);
}
.drawer.open { transform: none; }
.drawer-hd { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #23272e; }
.drawer-hd img { width: 42px; height: 42px; border-radius: 8px; }
.drawer-hd b { font-family: var(--font-display); font-size: 24px; font-weight: 400; letter-spacing: .04em; display: block; line-height: 1; }
.drawer-hd span { display: block; font-size: 8.5px; color: var(--muted-2); letter-spacing: .2em; text-transform: uppercase; }
.drawer-close { margin-left: auto; background: none; border: 0; color: #9aa1ab; font-size: 30px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.drawer-close:hover { color: #fff; }
.drawer-sel { display: flex; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #23272e; }
.drawer-sel label { flex: 1; font-size: 9.5px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .14em; display: flex; flex-direction: column; gap: 5px; }
.drawer-sel select, .wk-select select {
  appearance: none; background: var(--ink-3); color: #fff; border: 1px solid #2c323b;
  border-radius: 7px; padding: 8px 28px 8px 12px; font-family: var(--font-head);
  font-size: 13px; letter-spacing: .05em; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23d6001c'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.drawer-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.drawer-nav a {
  display: flex; align-items: center; padding: 13px 22px; color: #c9ced6;
  font-family: var(--font-head); font-size: 15px; text-transform: uppercase; letter-spacing: .08em;
  border-left: 3px solid transparent; transition: background .15s, color .15s;
}
.drawer-nav a:hover { color: #fff; background: rgba(255,255,255,.04); }
.drawer-nav a.active { color: #fff; border-left-color: var(--red); background: rgba(214,0,28,.1); }
.drawer-yt { margin: 0 18px 22px; justify-content: center; }

/* ---------------------------------------------------------------- */
/* Score ticker                                                      */
/* ---------------------------------------------------------------- */
.ticker {
  background: var(--ink-2); border-bottom: 1px solid #23272e;
  overflow: hidden; position: relative; height: 84px;
}
.ticker::before, .ticker::after {
  content:''; position:absolute; top:0; bottom:0; width:70px; z-index:2; pointer-events:none;
}
.ticker::before { left:0; background: linear-gradient(90deg, var(--ink-2), transparent); }
.ticker::after { right:0; background: linear-gradient(270deg, var(--ink-2), transparent); }
.ticker-track {
  display: flex; align-items: center; height: 100%; width: max-content;
  animation: ticker 60s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tick {
  display: flex; align-items: center; gap: 10px; padding: 0 24px; height: 100%;
  border-right: 1px solid #23272e; color: #fff; transition: background .15s;
}
.tick:hover { background: #1c2026; }
.tick .tag { font-size: 9px; color: var(--muted-2); letter-spacing: .12em; text-transform: uppercase; line-height: 1; margin-bottom: 6px; }
.tick .tag b { color: var(--red); font-weight: 700; }
.tick .row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1; padding: 3px 0; }
.tick img { width: 20px; height: 20px; flex-shrink: 0; }
.tick .ab { font-weight: 600; width: 38px; color: #e6e9ed; }
.tick .rec { color: var(--muted-2); font-size: 10px; width: 26px; }
.tick .sc { font-family: var(--font-head); font-size: 14px; font-weight: 600; width: 22px; text-align: right; }
.tick .win .ab, .tick .win .sc { color: #fff; }
.tick .lose .ab, .tick .lose .sc { color: #8b929c; }
.tick .win .sc { color: var(--gold); }

/* ---------------------------------------------------------------- */
/* Page scaffolding + transitions                                    */
/* ---------------------------------------------------------------- */
main { min-height: 70vh; }
.view { animation: viewin .42s cubic-bezier(.16,.84,.3,1); }
@keyframes viewin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.section-h {
  display: flex; align-items: center; gap: 12px; margin: 34px 0 16px;
}
.section-h .bar { width: 5px; height: 24px; background: var(--red); border-radius: 3px; }
.section-h h2 { font-size: 21px; }
.section-h .sub { color: var(--muted); font-size: 12px; margin-left: 4px; text-transform: none; font-family: var(--font-ui); }
.section-h .more { margin-left: auto; color: var(--red); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.section-h .more:hover { text-decoration: underline; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,.84,.3,1); }
.reveal.in { opacity: 1; transform: none; }

.card {
  background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow-1);
  overflow: hidden; border: 1px solid var(--line);
}

/* ---------------------------------------------------------------- */
/* Hero — Game of the Week                                           */
/* ---------------------------------------------------------------- */
.hero {
  position: relative; border-radius: 14px; overflow: hidden; margin-top: 22px;
  color: #fff; box-shadow: var(--shadow-2); isolation: isolate;
}
.hero .bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(1100px 480px at 18% -10%, var(--hero-a, #333) 0%, transparent 60%),
    radial-gradient(1100px 480px at 86% 115%, var(--hero-b, #555) 0%, transparent 60%),
    linear-gradient(120deg, #0d0f13 35%, #14171c 65%);
}
.hero .grid-lines {
  position: absolute; inset: 0; z-index: -1; opacity: .14;
  background-image: repeating-linear-gradient(90deg, transparent 0 119px, rgba(255,255,255,.5) 119px 120px);
  mask-image: linear-gradient(180deg, transparent, #000 35%, #000 70%, transparent);
}
.hero .sheen {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 45%, transparent 60%);
  background-size: 280% 100%; animation: sheen 6.5s ease-in-out infinite;
}
@keyframes sheen { 0%,55% { background-position: 130% 0; } 95%,100% { background-position: -60% 0; } }
.hero .chyron {
  display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0 26px;
  background: var(--red); padding: 6px 14px; font-family: var(--font-head);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.hero .chyron .dot { width: 7px; height: 7px; background: #fff; border-radius: 50%; animation: pulse 1.6s infinite; }
.hero-inner { display: flex; align-items: center; justify-content: space-between; padding: 26px 40px 30px; gap: 18px; }
.hero .side { display: flex; align-items: center; gap: 22px; min-width: 0; }
.hero .side.right { flex-direction: row-reverse; text-align: right; }
.hero .side img { width: 132px; height: 132px; filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)); animation: logofloat 5.2s ease-in-out infinite; }
.hero .side.right img { animation-delay: 2.6s; }
@keyframes logofloat { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-9px);} }
.hero .tname { font-family: var(--font-display); font-size: 44px; line-height: .95; letter-spacing: .02em; }
.hero .tsub { color: rgba(255,255,255,.62); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; margin-top: 6px; }
.hero .score { font-family: var(--font-display); font-size: 86px; line-height: 1; text-shadow: 0 8px 30px rgba(0,0,0,.5); }
.hero .mid { text-align: center; flex-shrink: 0; }
.hero .mid .status { font-family: var(--font-head); color: var(--gold); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 6px; }
.hero .mid .scores { display: flex; align-items: center; gap: 26px; }
.hero .mid .dash { font-family: var(--font-display); font-size: 40px; color: rgba(255,255,255,.35); }
.hero-actions { display: flex; gap: 10px; justify-content: center; padding: 0 26px 26px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px;
  font-family: var(--font-head); text-transform: uppercase; font-size: 13px; letter-spacing: .09em;
  border-radius: 7px; border: 1px solid rgba(255,255,255,.22); color: #fff;
  background: rgba(255,255,255,.07); backdrop-filter: blur(6px);
  cursor: pointer; transition: all .18s;
}
.btn:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.btn.primary { background: var(--red); border-color: var(--red); }
.btn.primary:hover { background: #ee1130; box-shadow: 0 8px 22px rgba(214,0,28,.4); }
.btn.dark { background: var(--ink-2); border-color: var(--ink-2); }
.btn.dark:hover { background: var(--ink-3); }

/* ---------------------------------------------------------------- */
/* Player of the Week — centered showcase                            */
/* ---------------------------------------------------------------- */
.potw-wrap { display: flex; justify-content: center; margin: 30px 0 6px; }
.potw {
  position: relative; width: min(760px, 100%); border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, #14171d 0%, #1c2027 55%, #14171d 100%);
  color: #fff; text-align: center; padding: 34px 28px 30px; box-shadow: var(--shadow-2);
}
.potw::before {
  content: ''; position: absolute; inset: 0; border-radius: 16px; padding: 2px;
  background: linear-gradient(120deg, var(--gold), #8a6a14, var(--gold), #fff2c9, var(--gold));
  background-size: 300% 300%; animation: goldshift 5s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
@keyframes goldshift { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.potw .wm {
  position: absolute; right: -48px; bottom: -58px; width: 290px; height: 290px;
  opacity: .09; pointer-events: none;
}
.potw .badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.potw .badge::before, .potw .badge::after { content: '★'; font-size: 10px; animation: starspin 3.4s ease-in-out infinite; }
@keyframes starspin { 0%,100% { transform: scale(1); opacity:.9; } 50% { transform: scale(1.45); opacity:1; } }
.potw .p-logo { width: 84px; height: 84px; margin: 0 auto 12px; filter: drop-shadow(0 10px 22px rgba(0,0,0,.5)); }
.potw .p-name { font-family: var(--font-display); font-size: 52px; line-height: 1; letter-spacing: .02em; }
.potw .p-sub { color: var(--muted-2); text-transform: uppercase; font-size: 12.5px; letter-spacing: .2em; margin-top: 8px; }
.potw .p-line {
  display: inline-block; margin-top: 16px; background: rgba(241,190,72,.12);
  border: 1px solid rgba(241,190,72,.35); color: #ffd97a; border-radius: 999px;
  padding: 8px 22px; font-family: var(--font-head); font-size: 15px; letter-spacing: .04em;
}
.potw .p-week { position: absolute; top: 16px; left: 18px; font-family: var(--font-head); font-size: 11px; letter-spacing: .16em; color: rgba(255,255,255,.45); text-transform: uppercase; }

/* ---------------------------------------------------------------- */
/* Home grid                                                         */
/* ---------------------------------------------------------------- */
.home-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 22px; margin-top: 8px; }
.stories { display: flex; flex-direction: column; gap: 14px; }
.story {
  display: flex; gap: 16px; padding: 16px; transition: transform .18s, box-shadow .18s; cursor: pointer;
}
.story:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.story .thumb {
  width: 148px; height: 100px; border-radius: 8px; flex-shrink: 0; position: relative;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.story .thumb img.yt { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.story .thumb .logos { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
.story .thumb .logos img { width: 44px; height: 44px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.story .thumb .vs { color: rgba(255,255,255,.85); font-family: var(--font-display); font-size: 16px; }
.story .cat { color: var(--red); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.story h3 { font-size: 18px; margin: 4px 0 6px; line-height: 1.2; }
.story p { margin: 0; color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.story .meta { margin-top: 8px; font-size: 11px; color: var(--muted-2); display: flex; gap: 12px; }

.rail { display: flex; flex-direction: column; gap: 18px; }
.rail .card { padding: 0; }
.rail .card .hd {
  background: var(--ink-2); color: #fff; padding: 11px 16px; display: flex; align-items: center; justify-content: space-between;
}
.rail .card .hd h3 { font-size: 14px; letter-spacing: .08em; }
.rail .card .hd a { font-size: 11px; color: var(--gold); }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); transition: background .14s; }
.rank-row:hover { background: #f6f7f9; }
.rank-row:last-child { border-bottom: 0; }
.rank-row .num { font-family: var(--font-head); width: 22px; font-size: 15px; color: var(--muted); font-weight: 600; text-align: center; }
.rank-row img { width: 26px; height: 26px; }
.rank-row .nm { font-weight: 600; font-size: 13.5px; flex: 1; }
.rank-row .rec { color: var(--muted); font-size: 12px; }
.mov { font-size: 10px; font-weight: 700; width: 28px; text-align: right; }
.mov.up { color: #0a8f3c; } .mov.dn { color: var(--red); } .mov.even { color: var(--muted-2); }

.minirow { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.minirow:last-child { border-bottom: 0; }
.minirow img { width: 24px; height: 24px; }
.minirow b { font-size: 13px; }
.minirow .sub { color: var(--muted); font-size: 11.5px; }

/* ---------------------------------------------------------------- */
/* Leaders                                                           */
/* ---------------------------------------------------------------- */
.lead-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.lead-card .hd {
  background: linear-gradient(120deg, var(--ink-2), var(--ink-3)); color: #fff; padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center;
}
.lead-card .hd h3 { font-size: 14px; letter-spacing: .1em; }
.lead-card .hd span { font-size: 10px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .1em; }
.lead-first { display: flex; align-items: center; gap: 14px; padding: 16px; background: linear-gradient(180deg, #fafbfc, #fff); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.lead-first .big-logo { width: 54px; height: 54px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.18)); }
.lead-first .nm { font-family: var(--font-head); font-size: 19px; text-transform: none; }
.lead-first .pos { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; }
.lead-first .val { margin-left: auto; text-align: right; }
.lead-first .val b { font-family: var(--font-display); font-size: 38px; color: var(--red); line-height: 1; display: block; }
.lead-first .val span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.lead-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.lead-row:last-child { border-bottom: 0; }
.lead-row .num { width: 16px; color: var(--muted-2); font-size: 12px; font-weight: 600; }
.lead-row img { width: 22px; height: 22px; }
.lead-row .nm { flex: 1; font-weight: 500; }
.lead-row .v { font-family: var(--font-head); font-weight: 600; font-size: 14px; }

/* ---------------------------------------------------------------- */
/* Scoreboard cards                                                  */
/* ---------------------------------------------------------------- */
.score-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; }
.gcard { transition: transform .18s, box-shadow .18s; }
.gcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.gcard .top { display:flex; justify-content: space-between; align-items:center; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.gcard .top .final { color: var(--red); font-weight: 700; }
.gcard .teams { padding: 6px 0; }
.gcard .trow { display: flex; align-items: center; gap: 11px; padding: 8px 16px; }
.gcard .trow img { width: 30px; height: 30px; }
.gcard .trow .nm { font-weight: 600; font-size: 14.5px; flex: 1; }
.gcard .trow .rec { color: var(--muted-2); font-size: 11px; }
.gcard .trow .sc { font-family: var(--font-head); font-size: 21px; font-weight: 600; width: 34px; text-align: right; }
.gcard .trow.lose { opacity: .55; }
.gcard .trow.win .sc { color: var(--red); }
.gcard .foot { display: flex; border-top: 1px solid var(--line); }
.gcard .foot a, .gcard .foot span.na {
  flex: 1; text-align: center; padding: 9px 0; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--red); transition: background .15s;
}
.gcard .foot a:hover { background: #fbf3f4; }
.gcard .foot a + a { border-left: 1px solid var(--line); }
.gcard .foot span.na { color: var(--muted-2); border-left: 1px solid var(--line); }
.gcard .foot a.log-dl { color: #0a8f3c; }
.gcard .foot a.log-dl:hover { background: #ecf7f0; }

/* ---------------------------------------------------------------- */
/* Game Logs page                                                    */
/* ---------------------------------------------------------------- */
.logs-list { display: flex; flex-direction: column; gap: 8px; }
.log-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px;
  align-items: center; padding: 14px 18px; background: var(--panel);
  border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.log-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: #0a8f3c; }
.log-row-game { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; }
.log-row-game img { width: 28px; height: 28px; flex-shrink: 0; }
.log-row-game .vs { color: var(--muted-2); font-family: var(--font-head); font-size: 13px; }
.log-row-game .win { font-weight: 700; }
.log-row-game b { font-family: var(--font-head); font-size: 16px; margin-left: 4px; }
.log-row-meta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.log-fname { font-family: Consolas, monospace; font-size: 11px; color: var(--muted-2); }
.log-dl-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #34d399, #10b981);
  color: #fff; padding: 7px 14px; border-radius: 999px;
  font-family: var(--font-head); font-size: 11.5px; letter-spacing: .08em; font-weight: 600;
}
.log-row:hover .log-dl-pill { box-shadow: 0 6px 14px rgba(16,185,129,.35); }

@media (max-width: 640px){
  .log-row { grid-template-columns: 1fr; gap: 8px; }
  .log-row-game { font-size: 13px; }
  .log-fname { display: none; }
}

/* ---------------------------------------------------------------- */
/* Game center                                                       */
/* ---------------------------------------------------------------- */
.gc-hero { margin-top: 22px; }
.gc-body { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 22px; margin-top: 22px; }
.video-shell { position: relative; padding-top: 56.25%; background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-2); }
.video-shell iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.statbar { padding: 11px 18px; border-bottom: 1px solid var(--line); }
.statbar .lbl { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; }
.statbar .lbl b { color: var(--text); font-size: 13px; font-family: var(--font-head); }
.statbar .track { display: flex; height: 7px; gap: 3px; }
.statbar .track i { display: block; height: 100%; border-radius: 4px; width: 0; transition: width 1s cubic-bezier(.16,.84,.3,1); }
.box-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.box-table caption { text-align: left; font-family: var(--font-head); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; padding: 12px 16px 6px; color: var(--text); }
.box-table th { text-align: right; font-size: 10px; color: var(--muted-2); text-transform: uppercase; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.box-table th:first-child { text-align: left; padding-left: 16px; }
.box-table td { padding: 5px 8px; text-align: right; border-bottom: 1px solid #f0f2f4; font-variant-numeric: tabular-nums; }
.box-table td:first-child { text-align: left; padding-left: 16px; font-weight: 500; }
.box-table tr.total td { font-weight: 700; background: #f7f8fa; }
.box-table tr:last-child td { border-bottom: 0; }
.gc-tabs { display: flex; gap: 4px; background: var(--panel); border-radius: 9px; padding: 5px; border: 1px solid var(--line); width: max-content; margin: 22px 0 14px; }
.gc-tabs button {
  border: 0; background: transparent; padding: 8px 20px; border-radius: 7px; cursor: pointer;
  font-family: var(--font-head); text-transform: uppercase; font-size: 12.5px; letter-spacing: .07em; color: var(--muted);
}
.gc-tabs button.on { background: var(--ink-2); color: #fff; }
.recap-card { padding: 24px 28px; }
.recap-card h2 { font-size: 24px; margin-bottom: 12px; text-transform: none; }
.recap-card p { color: #2c323a; font-size: 14.5px; line-height: 1.75; }
.recap-cut { margin-top: 18px; padding: 14px 16px; background: linear-gradient(135deg, rgba(241,190,72,.08), rgba(214,0,28,.04)); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; }
.recap-cut .lbl { font-family: var(--font-head); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #8a6a14; margin-bottom: 4px; }
.recap-cut p { font-size: 13.5px; color: var(--text); margin: 0; line-height: 1.6; }

/* ---------------------------------------------------------------- */
/* Weekly wrap-up on the home page                                   */
/* ---------------------------------------------------------------- */
.weekly-wrap { padding: 22px 26px; border-left: 4px solid var(--accent); }
.weekly-wrap .ww-sub { font-size: 14.5px; color: var(--muted); margin-bottom: 12px; font-style: italic; }
.weekly-wrap p { font-size: 14.5px; color: #2c323a; line-height: 1.75; margin: 0 0 10px; }
.weekly-wrap p:last-child { margin-bottom: 0; }

/* v2 — structured segments */
.weekly-wrap-v2 { padding: 26px 30px; }
.weekly-wrap-v2 .ww-sub { font-style: normal; font-family: var(--font-head); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; }
.weekly-wrap-v2 .ww-lead { font-size: 16px; line-height: 1.7; color: var(--text); margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); font-weight: 500; }
.weekly-wrap-v2 .ww-closer { margin: 22px 0 0; padding: 14px 16px; background: linear-gradient(120deg, rgba(214,0,28,.05), rgba(241,190,72,.04)); border-radius: 8px; font-style: italic; color: var(--muted); font-size: 13.5px; line-height: 1.6; }

.ww-segments { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px){ .ww-segments { grid-template-columns: 1fr; } }

.ww-segment {
  position: relative; padding: 14px 16px 16px 18px;
  background: #fafbfc; border-radius: 10px; border: 1px solid var(--line);
  border-left: 4px solid var(--seg-accent, var(--accent));
  transition: transform .15s, box-shadow .15s;
}
.ww-segment:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }

.ww-seg-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.ww-seg-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--seg-accent, var(--accent)); color: #fff;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-head); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}
.ww-seg-icon { font-style: normal; font-size: 11px; line-height: 1; }
.ww-seg-teams { display: flex; gap: 6px; align-items: center; }
.ww-seg-team { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--text); transition: border-color .15s, transform .12s; }
.ww-seg-team:hover { border-color: var(--seg-accent, var(--accent)); transform: scale(1.04); }
.ww-seg-team img { width: 18px; height: 18px; }
.ww-seg-team span { font-family: var(--font-head); letter-spacing: .04em; }

.ww-seg-title {
  font-family: var(--font-head); font-size: 15px; line-height: 1.3;
  text-transform: none; letter-spacing: 0;
  margin: 4px 0 6px; color: var(--text);
}
.ww-seg-body { font-size: 13px; line-height: 1.65; color: var(--muted); margin: 0; }

/* ---------------------------------------------------------------- */
/* Preview page                                                      */
/* ---------------------------------------------------------------- */
.preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.preview-card { padding: 18px 20px; }
.prev-top { display: grid; grid-template-columns: 1fr 30px 1fr; align-items: center; gap: 10px; margin-bottom: 14px; }
.prev-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.prev-team.right { flex-direction: row-reverse; text-align: right; }
.prev-team img { width: 28px; height: 28px; flex-shrink: 0; }
.prev-team b { font-family: var(--font-head); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prev-team span { font-size: 10.5px; color: var(--muted-2); margin-left: 6px; }
.prev-team.right span { margin-left: 0; margin-right: 6px; }
.prev-at { text-align: center; font-family: var(--font-display); color: var(--muted-2); font-size: 18px; }
.prev-head { font-family: var(--font-head); font-size: 17px; line-height: 1.3; text-transform: none; margin-bottom: 4px; }
.prev-sub { color: var(--muted); font-size: 12.5px; margin-bottom: 12px; font-style: italic; }
.prev-body p { font-size: 13.5px; line-height: 1.65; color: #2c323a; margin: 0 0 8px; }
.prev-meta { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.prev-meta .lbl { display: inline-block; font-family: var(--font-head); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-right: 6px; }
.prev-pred b { font-family: var(--font-head); color: var(--accent); }
.prev-pred .conf { color: var(--muted); font-size: 11px; }

/* ---------------------------------------------------------------- */
/* Playoff bracket                                                   */
/* ---------------------------------------------------------------- */
.bracket-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 6px; }
.bracket-conf { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.bracket-conf-hd { background: var(--ink-2); color: #fff; padding: 12px 16px; font-family: var(--font-head); font-size: 13px; letter-spacing: .08em; }
.bracket-stage { padding: 12px 14px 8px; border-bottom: 1px solid var(--line); }
.bracket-stage .stage-lbl { font-family: var(--font-head); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 6px; }
.bracket-match { background: #fafbfc; border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; margin-bottom: 8px; }
.bracket-match .bm-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.bracket-match .bm-row + .bm-row { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 3px; }
.bracket-match .bm-seed { font-family: var(--font-head); font-size: 11px; color: var(--muted-2); width: 20px; }
.bracket-match .bm-row img { width: 20px; height: 20px; }
.bracket-match .bm-rec { margin-left: auto; font-family: var(--font-head); color: var(--muted); font-size: 12px; }
.bracket-seeds { padding: 8px 14px 14px; }
.seed-row { display: grid; grid-template-columns: 26px 1fr auto auto auto; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid #f0f2f4; font-size: 12.5px; }
.seed-row:last-child { border-bottom: 0; }
.seed-row .seed-num { font-family: var(--font-display); font-size: 22px; color: var(--ink); text-align: center; }
.seed-row .seed-nm { font-weight: 600; }
.seed-row .seed-rec { font-family: var(--font-head); color: var(--text); }
.seed-row .seed-pf { color: var(--muted-2); font-size: 11px; }
.seed-row .seed-badge { font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .05em; }
.seed-row .seed-badge.dw { background: #e3f5ea; color: #0a8f3c; }
.seed-row .seed-badge.wc { background: #fef3da; color: #8a6a14; }
.bowl-row { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); gap: 18px; }
.bowl-row:last-child { border-bottom: 0; }
.bowl-name { font-family: var(--font-head); font-size: 14px; flex: 1; }
.bowl-teams { display: flex; align-items: center; gap: 10px; }
.bowl-vs { color: var(--muted-2); font-family: var(--font-head); font-size: 11px; }
.hunt-row { display: flex; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--line); gap: 14px; }
.hunt-row:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------- */
/* Team comparison page                                              */
/* ---------------------------------------------------------------- */
.cmp-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0 18px; }
.cmp-pickers label { display: block; font-size: 10px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 4px; }
.cmp-pickers select { width: 100%; appearance: none; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 9px 12px; font-family: var(--font-head); font-size: 14px; cursor: pointer; }
.cmp-pickers select:hover { border-color: var(--accent); }
.cmp-hero { display: grid; grid-template-columns: 1fr 48px 1fr; align-items: stretch; gap: 0; margin-bottom: 20px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-2); }
.cmp-side { display: flex; align-items: center; gap: 14px; padding: 22px 24px; color: #fff; }
.cmp-side.right { flex-direction: row-reverse; }
.cmp-side img { width: 60px; height: 60px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.4)); }
.cmp-name { font-family: var(--font-display); font-size: 26px; line-height: 1; }
.cmp-nick { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin-top: 4px; }
.cmp-vs { background: var(--ink); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; letter-spacing: .06em; }
.cmp-card { padding: 0; margin-bottom: 14px; }
.cmp-section { background: var(--ink-2); color: #fff; padding: 10px 16px; font-family: var(--font-head); font-size: 13px; letter-spacing: .08em; }
.cmp-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 10px 18px; border-bottom: 1px solid #f0f2f4; font-size: 13.5px; }
.cmp-row:last-child { border-bottom: 0; }
.cmp-val { font-family: var(--font-head); font-size: 17px; font-variant-numeric: tabular-nums; }
.cmp-val.right { text-align: right; }
.cmp-val.win { color: var(--accent); }
.cmp-lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-head); text-align: center; min-width: 120px; }
.h2h-row { display: flex; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid #f0f2f4; font-size: 13px; }
.h2h-row:last-child { border-bottom: 0; }

/* Roster comparison (Offense / Defense tabs) */
.rcmp-toplabel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 20px; background: var(--ink-2); color: #fff; font-family: var(--font-head); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.rcmp-toplabel span:last-child { text-align: right; }
.rcmp-toplabel span:nth-child(2) { color: var(--gold); }

.rcmp-unit { border-bottom: 1px solid var(--line); padding: 0 0 8px; }
.rcmp-unit:last-of-type { border-bottom: 0; }
.rcmp-uhead { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; padding: 14px 18px; background: #f7f8fa; }
.rcmp-uscore { font-family: var(--font-display); font-size: 26px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rcmp-uscore.right { text-align: right; }
.rcmp-uscore.win { color: var(--accent); }
.rcmp-uname { text-align: center; font-family: var(--font-head); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.rcmp-check { color: #0a8f3c; font-weight: 700; margin-left: 6px; }
.rcmp-check.right { margin-left: 0; margin-right: 6px; }
.rcmp-tie { color: var(--muted-2); }

.rcmp-prow { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 0; padding: 10px 18px; border-top: 1px solid #f0f2f4; }
.rcmp-pside { padding: 8px 14px; border-radius: 8px; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.rcmp-pside.right { text-align: right; }
.rcmp-pside.win { background: rgba(214,0,28,.04); border-color: rgba(214,0,28,.18); }
.rcmp-pmid { display: flex; align-items: center; justify-content: center; }
.rcmp-phead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; font-family: var(--font-head); }
.rcmp-pside.right .rcmp-phead { justify-content: flex-end; }
.rcmp-phead b { font-size: 13px; letter-spacing: .08em; color: var(--text); }
.rcmp-pscore { font-family: var(--font-display); font-size: 20px; color: var(--accent); margin-left: auto; }
.rcmp-pside.right .rcmp-pscore { margin-left: 0; margin-right: auto; }
.rcmp-player { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; }
.rcmp-pside.right .rcmp-player { flex-direction: row-reverse; }
.rcmp-tag { font-family: var(--font-head); font-size: 9.5px; letter-spacing: .08em; background: var(--ink-2); color: #fff; padding: 1px 6px; border-radius: 4px; min-width: 24px; text-align: center; }
.rcmp-pname { flex: 1; color: var(--text); font-weight: 500; }
.rcmp-ovr { font-family: var(--font-head); font-size: 13px; min-width: 26px; text-align: center; border-radius: 4px; padding: 1px 5px; }
.rcmp-ovr.r4 { background: #11823b; color: #fff; }
.rcmp-ovr.r3 { background: #cfe9d8; color: #0a5f2a; }
.rcmp-ovr.r2 { background: #eef0f3; color: var(--muted); }
.rcmp-ovr.r1 { background: #fde9ec; color: var(--accent); }
.rcmp-pwhy { margin-top: 6px; font-size: 10.5px; color: var(--muted); line-height: 1.4; font-style: italic; }
.rcmp-pside.right .rcmp-pwhy { text-align: right; }
.rcmp-empty { font-size: 11.5px; color: var(--accent); font-style: italic; padding: 4px 0; }

.rcmp-sidetotal { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; padding: 16px 18px; background: var(--ink); color: #fff; }
.rcmp-stscore { font-family: var(--font-display); font-size: 32px; color: var(--muted); }
.rcmp-stscore.right { text-align: right; }
.rcmp-stscore.win { color: var(--gold); }
.rcmp-stname { text-align: center; font-family: var(--font-head); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }

.rcmp-overall { margin-top: 18px; }
.rcmp-othead { background: linear-gradient(120deg, var(--accent), var(--accent-dark)); color: #fff; padding: 14px 22px; font-family: var(--font-head); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.rcmp-otgrid { display: grid; grid-template-columns: 1fr 100px 1fr; align-items: center; padding: 22px; gap: 14px; }
.rcmp-otside { padding: 16px 20px; border-radius: 10px; }
.rcmp-otside.right { text-align: right; }
.rcmp-otside.win { background: rgba(241,190,72,.1); border: 1px solid rgba(241,190,72,.4); }
.rcmp-otname { font-family: var(--font-head); font-size: 13px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.rcmp-ottot { font-family: var(--font-display); font-size: 54px; color: var(--text); line-height: 1; margin: 4px 0; }
.rcmp-otside.win .rcmp-ottot { color: var(--accent); }
.rcmp-otsub { font-size: 12px; color: var(--muted-2); font-family: var(--font-head); letter-spacing: .04em; }
.rcmp-otvs { text-align: center; font-family: var(--font-head); font-size: 14px; color: var(--gold); letter-spacing: .1em; }
.rcmp-otnote { padding: 12px 22px 18px; font-size: 11px; color: var(--muted); line-height: 1.5; border-top: 1px solid var(--line); margin-top: 4px; }

@media (max-width: 760px){
  .rcmp-otgrid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- */
/* Compare — new full-roster position rows with attribute tables    */
/* ---------------------------------------------------------------- */
.rcmp-prow { display: block; padding: 0; border-top: 1px solid var(--line); }
.rcmp-prow:first-of-type { border-top: 0; }

.rcmp-phead-row {
  display: grid; grid-template-columns: 90px 1fr 90px;
  align-items: center; gap: 12px;
  padding: 14px 20px; background: linear-gradient(135deg, #fafbfc 0%, #f3f5f8 100%);
  border-bottom: 1px solid var(--line);
}
.rcmp-pscoreA, .rcmp-pscoreB {
  font-family: var(--font-display); font-size: 30px; color: var(--muted);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.rcmp-pscoreB { text-align: right; }
.rcmp-pscoreA.win, .rcmp-pscoreB.win { color: var(--accent); }

.rcmp-pname-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.rcmp-poslabel { font-family: var(--font-head); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.rcmp-poslabel code { font-family: Consolas, monospace; background: var(--ink-2); color: #fff; padding: 2px 7px; border-radius: 4px; font-size: 10.5px; letter-spacing: .04em; margin-left: 4px; }
.rcmp-depth { font-size: 10.5px; color: var(--muted-2); font-family: var(--font-ui); }
.rcmp-check.left, .rcmp-check.right { color: #0a8f3c; font-weight: 700; font-size: 14px; }

.cmp-team-block { padding: 12px 18px 8px; border-bottom: 1px solid #f0f2f4; }
.cmp-team-head { display: flex; align-items: center; gap: 10px; padding: 4px 0 10px; font-family: var(--font-head); }
.cmp-team-head img { width: 22px; height: 22px; }
.cmp-team-head b { font-size: 13px; letter-spacing: .04em; }
.cmp-team-table-wrap { overflow-x: auto; }
.cmp-roster { width: 100%; }
.cmp-roster th { font-size: 10px; padding: 6px 8px; background: var(--ink-2); color: #cfd4db; }
.cmp-roster th.attr-h { text-align: center; }
.cmp-roster td { font-size: 12px; padding: 5px 8px; border-bottom: 1px solid #f4f5f7; }
.cmp-roster td.attr { padding: 4px 4px; }
.cmp-empty { padding: 10px 0; color: var(--accent); font-style: italic; font-size: 12px; }

.rcmp-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 10px 20px 14px; font-size: 11.5px; color: var(--muted); border-top: 1px dashed var(--line); }
.rcmp-rcol .rcmp-rlbl { font-family: var(--font-head); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 4px; }
.rcmp-rcol div { line-height: 1.6; }
.rcmp-empty-r { color: var(--muted-2); }

.rcmp-winner-strip { padding: 8px 20px; background: #f7f8fa; font-family: var(--font-head); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }
.rcmp-pwin { color: var(--accent); font-weight: 700; }
.rcmp-ptie { color: var(--muted-2); }

/* ---------------------------------------------------------------- */
/* Compare — configuration flyout panel                              */
/* ---------------------------------------------------------------- */
/* Inline Configure button — sits in the tab row right after the Defense pill */
.cmp-tab-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cmp-cfg-inline {
  margin-left: auto;
  background: var(--ink-2); color: #fff; border: 1px solid var(--ink-3); border-radius: 999px;
  padding: 7px 16px; font-family: var(--font-head); font-size: 12.5px; letter-spacing: .07em;
  text-transform: uppercase; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.cmp-cfg-inline:hover { background: var(--accent); border-color: var(--accent); }

.cfg-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
  z-index: 200; opacity: 0; pointer-events: none; transition: opacity .25s;
}
.cfg-overlay.open { opacity: 1; pointer-events: auto; }
.cfg-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); z-index: 201;
  background: var(--panel); color: var(--text);
  transform: translateX(105%); transition: transform .32s cubic-bezier(.16,.84,.3,1);
  display: flex; flex-direction: column;
  box-shadow: -10px 0 38px rgba(0,0,0,.32);
}
.cfg-panel.open { transform: none; }
.cfg-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--line); background: var(--ink); color: #fff; }
.cfg-head h3 { font-size: 16px; font-family: var(--font-head); letter-spacing: .06em; margin: 0; color: #fff; }
.cfg-close { background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; padding: 4px 10px; }
.cfg-close:hover { color: #fff; }
.cfg-body { flex: 1; overflow-y: auto; padding: 14px 22px 30px; }
.cfg-section { margin-bottom: 22px; }
.cfg-section-head { font-family: var(--font-head); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); padding: 8px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.cfg-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.cfg-row-lbl { font-size: 13px; color: var(--text); }
.cfg-row-lbl code { font-family: Consolas, monospace; background: var(--ink-2); color: var(--gold); padding: 1px 7px; border-radius: 4px; font-size: 10px; letter-spacing: .03em; margin-left: 4px; }
.cfg-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cfg-stepper button { background: var(--panel); border: 0; width: 30px; height: 30px; font-size: 16px; font-weight: 700; color: var(--text); cursor: pointer; transition: background .15s; }
.cfg-stepper button:hover { background: var(--accent); color: #fff; }
.cfg-val { width: 36px; text-align: center; font-family: var(--font-head); font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding: 4px 0; }
.cfg-toggle-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; cursor: pointer; }
.cfg-toggle-row input { width: 16px; height: 16px; accent-color: var(--accent); }
.cfg-note { font-size: 11px; color: var(--muted-2); margin-top: 4px; line-height: 1.5; }
.cfg-actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cfg-reset { width: 100%; padding: 10px 16px; background: var(--ink-2); color: #fff; border: 0; border-radius: 8px; font-family: var(--font-head); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .15s; }
.cfg-reset:hover { background: var(--accent); }

@media (max-width: 640px){
  .rcmp-phead-row { grid-template-columns: 60px 1fr 60px; padding: 10px 14px; }
  .rcmp-pscoreA, .rcmp-pscoreB { font-size: 22px; }
  .rcmp-reasons { grid-template-columns: 1fr; }
  .cmp-cfg-inline { margin-left: 0; }
}

@media (max-width: 760px){
  .bracket-grid { grid-template-columns: 1fr; }
  .cmp-pickers { grid-template-columns: 1fr; }
  .cmp-hero { grid-template-columns: 1fr; }
  .cmp-vs { padding: 6px; }
  .cmp-row { grid-template-columns: 1fr; text-align: center; gap: 4px; padding: 12px 14px; }
  .cmp-val.right { text-align: center; }
}
.pog-strip {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: linear-gradient(120deg, rgba(241,190,72,.13), rgba(214,0,28,.07));
  border: 1px solid rgba(241,190,72,.45); border-radius: var(--radius);
}
.pog-strip img { width: 44px; height: 44px; }
.pog-strip .t { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: #8a6a14; font-weight: 700; }
.pog-strip b { font-family: var(--font-head); font-size: 17px; }
.pog-strip .line { color: var(--muted); font-size: 12.5px; }

/* ---------------------------------------------------------------- */
/* Standings / rankings tables                                       */
/* ---------------------------------------------------------------- */
.stand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.div-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.div-table th { font-size: 10px; text-transform: uppercase; color: var(--muted-2); text-align: right; padding: 8px 8px; border-bottom: 2px solid var(--line); }
.div-table th:first-child { text-align: left; padding-left: 16px; }
.div-table td { padding: 9px 8px; text-align: right; border-bottom: 1px solid #f0f2f4; font-variant-numeric: tabular-nums; }
.div-table td:first-child { text-align: left; padding-left: 16px; }
.div-table .tm { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.div-table .tm img { width: 24px; height: 24px; }
.chip { display: inline-block; font-size: 10px; font-weight: 700; border-radius: 4px; padding: 2px 7px; }
.chip.w { background: #e3f5ea; color: #0a8f3c; }
.chip.l { background: #fde9ec; color: var(--red); }

.pp-row { display: grid; grid-template-columns: 44px 34px minmax(0,1fr) 70px 90px minmax(0,1.1fr); align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); transition: background .15s; }
.pp-row:hover { background: #f7f8fa; }
.pp-row .rk { font-family: var(--font-display); font-size: 30px; color: var(--ink); text-align: center; }
.pp-row img.lg { width: 32px; height: 32px; }
.pp-row .nm { font-weight: 700; font-size: 15px; }
.pp-row .nm .nick { display:block; font-weight: 400; color: var(--muted-2); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.pp-row .ptsbar { height: 6px; background: #eef0f3; border-radius: 4px; overflow: hidden; }
.pp-row .ptsbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), #ff5a4e); width: 0; transition: width 1.1s cubic-bezier(.16,.84,.3,1); }
.pp-row .beat { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.pp-row .beat img { width: 20px; height: 20px; opacity: .85; }
.pp-row .beat .none { color: var(--muted-2); font-size: 11px; }

/* ---------------------------------------------------------------- */
/* Teams                                                             */
/* ---------------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 16px; }
.tcard { position: relative; color: #fff; padding: 22px 18px 18px; min-height: 150px; display:flex; flex-direction: column; justify-content: flex-end; transition: transform .18s, box-shadow .18s; border: 0; }
.tcard:hover { transform: translateY(-4px) scale(1.015); box-shadow: var(--shadow-2); }
.tcard img.lg { position: absolute; top: 16px; right: 14px; width: 64px; height: 64px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); transition: transform .25s; }
.tcard:hover img.lg { transform: scale(1.12) rotate(-3deg); }
.tcard .nm { font-family: var(--font-display); font-size: 28px; line-height: 1; }
.tcard .nick { font-size: 11px; text-transform: uppercase; letter-spacing: .16em; opacity: .8; }
.tcard .rec { margin-top: 8px; font-family: var(--font-head); font-size: 14px; opacity: .95; }

.team-hero { position: relative; border-radius: 14px; color: #fff; padding: 36px 38px; overflow: hidden; margin-top: 22px; box-shadow: var(--shadow-2); display: flex; align-items: center; gap: 26px; }

/* Fight-song player chip in the team hero */
.fightsong-chip {
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.08); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18); color: #fff;
  border-radius: 999px; padding: 9px 18px 9px 14px; cursor: pointer;
  font-family: var(--font-ui); transition: all .18s; flex-shrink: 0;
}
.fightsong-chip:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
.fightsong-chip.playing { background: rgba(241,190,72,.18); border-color: rgba(241,190,72,.5); }
.fightsong-chip.muted { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); opacity: .85; }
.fightsong-chip .fs-bars {
  display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; width: 22px;
}
.fightsong-chip .fs-bars i {
  display: block; width: 3px; background: var(--gold); border-radius: 1px;
  height: 6px; transition: height .15s;
}
.fightsong-chip.playing .fs-bars i {
  animation: fs-eq 1.1s ease-in-out infinite;
}
.fightsong-chip.playing .fs-bars i:nth-child(1) { animation-delay: 0s; }
.fightsong-chip.playing .fs-bars i:nth-child(2) { animation-delay: .18s; }
.fightsong-chip.playing .fs-bars i:nth-child(3) { animation-delay: .36s; }
.fightsong-chip.playing .fs-bars i:nth-child(4) { animation-delay: .54s; }
@keyframes fs-eq {
  0%, 100% { height: 4px; }
  50%      { height: 18px; }
}
.fightsong-chip.muted .fs-bars i { background: rgba(255,255,255,.35); }
.fightsong-chip.muted .fs-bars::after {
  content: ''; position: relative; width: 22px; left: -22px; top: -2px; display: block;
  border-top: 2px solid #fff; transform: rotate(-22deg); transform-origin: left;
}
.fightsong-chip .fs-lbl { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.fightsong-chip .fs-title { font-family: var(--font-head); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.fightsong-chip .fs-state { font-size: 9.5px; color: rgba(255,255,255,.7); letter-spacing: .08em; text-transform: uppercase; margin-top: 1px; }

@media (max-width: 640px){
  .fightsong-chip { padding: 7px 14px 7px 12px; }
  .fightsong-chip .fs-title { font-size: 11px; }
}
.team-hero img.lg { width: 110px; height: 110px; filter: drop-shadow(0 12px 24px rgba(0,0,0,.5)); }
.team-hero .nm { font-family: var(--font-display); font-size: 54px; line-height: .95; }
.team-hero .meta { display: flex; gap: 22px; margin-top: 12px; font-family: var(--font-head); font-size: 14px; letter-spacing: .04em; flex-wrap: wrap; }
.team-hero .meta span b { color: var(--gold); }
.team-cols { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 22px; margin-top: 22px; }

.roster-card { overflow: visible; }
.roster-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.roster-table th { position: sticky; top: 65px; z-index: 2; background: var(--ink-2); color: #cfd4db; font-size: 10px; text-transform: uppercase; padding: 8px 10px; text-align: left; white-space: nowrap; }
.roster-table td { padding: 6px 10px; border-bottom: 1px solid #f0f2f4; }
.roster-table tr:hover td { background: #f7f8fa; }
.roster-table th.attr-h { text-align: center; padding: 8px 4px; cursor: help; border-left: 1px solid rgba(255,255,255,.07); }
/* Compare-page rosters are short and live in a horizontally scrollable wrap;
   sticky headers there end up pinned to the bottom of the table as the page
   scrolls past, which looks like the header is "upside down". Force static. */
.cmp-team-table-wrap .roster-table th { position: static !important; top: auto !important; }
.roster-table td.attr { text-align: center; padding: 4px 4px; line-height: 1.2; border-left: 1px solid #f4f5f7; font-variant-numeric: tabular-nums; }
.roster-table td.attr b { display: block; font-size: 12.5px; font-weight: 700; }
.roster-table td.attr span { display: block; font-size: 10px; color: var(--muted-2); }
.r4 { color: #0a8f3c; }      /* 90+  elite      */
.r3 { color: #16181c; }      /* 80s  starter    */
.r2 { color: #5d6571; }      /* 70s  rotational */
.r1 { color: #b3543e; }      /* <70  developmental */
.attr-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  margin: -6px 0 12px; font-size: 11px; color: var(--muted);
}
.attr-legend b { color: var(--text); font-weight: 700; }
.attr-legend .key { margin-left: auto; background: #e8eaee; border-radius: 999px; padding: 3px 12px; color: var(--muted); }
.st-chip {
  display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; border-radius: 4px; padding: 2px 8px;
}
.st-a  { background: #e3f5ea; color: #0a8f3c; }
.st-i  { background: #fdf3e0; color: #9a6b0a; }
.st-o  { background: #eef0f3; color: #5d6571; }
.st-ir { background: #fde9ec; color: var(--red); }
@media (max-width: 900px){
  .roster-card { overflow-x: auto; }
  .roster-table { min-width: 880px; }
  .roster-table th { top: 0; }
}
.ovr { display: inline-block; min-width: 30px; text-align: center; border-radius: 5px; font-weight: 700; font-size: 11.5px; padding: 2px 4px; }
.ovr.elite { background: #11823b; color: #fff; }
.ovr.good { background: #cfe9d8; color: #0a5f2a; }
.ovr.avg { background: #eef0f3; color: var(--muted); }

/* ---------------------------------------------------------------- */
/* Awards                                                            */
/* ---------------------------------------------------------------- */
.award-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 16px; }
.heisman-row { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.heisman-row:last-child { border-bottom: 0; }
.heisman-row .rk { font-family: var(--font-display); font-size: 26px; width: 28px; color: var(--muted); }
.heisman-row img { width: 34px; height: 34px; }
.heisman-row .nm { font-weight: 700; flex: 1; }
.heisman-row .nm span { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.heisman-row .pts { font-family: var(--font-head); color: var(--red); font-weight: 600; }
.heis-pow { display: inline-block; margin-left: 4px; font-size: 9px; letter-spacing: .04em; padding: 1px 6px; border-radius: 3px; background: var(--ink-2); color: #fff; font-weight: 700; vertical-align: 1px; }
/* Heisman v2 — record-weighted, with cumulative stat line below the name */
.heisman-row-v2 { align-items: flex-start; padding: 14px 18px; }
.heisman-row-v2 .nm { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; font-weight: 400; }
.heisman-row-v2 .heis-name-line { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.heisman-row-v2 .heis-meta { font-size: 11px; color: var(--muted); }
.heisman-row-v2 .heis-meta .heis-rec { font-style: normal; font-weight: 700; color: var(--text); }
.heisman-row-v2 .heis-statline { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.heisman-row-v2 .heis-stat { white-space: nowrap; }
.heisman-row-v2 .heis-stat b { color: var(--text); font-weight: 700; }
.heisman-row-v2 .heis-bar { flex: 0 0 180px; align-self: center; }
.heisman-row-v2 .pts { align-self: center; min-width: 38px; text-align: right; font-size: 16px; }
@media (max-width: 640px){
  .heisman-row-v2 .heis-bar { display: none; }
  .heisman-row-v2 .heis-statline { font-size: 10px; gap: 4px 8px; }
}

/* ---------------------------------------------------------------- */
/* Media                                                             */
/* ---------------------------------------------------------------- */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 16px; }
.vcard { cursor: pointer; transition: transform .18s, box-shadow .18s; }
.vcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.vcard .th { position: relative; padding-top: 56.25%; background: #000; }
.vcard .th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vcard .th .play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.18); transition: background .2s;
}
.vcard:hover .th .play { background: rgba(0,0,0,.05); }
.vcard .th .play i {
  width: 52px; height: 52px; border-radius: 50%; background: rgba(214,0,28,.92);
  display: flex; align-items: center; justify-content: center; transition: transform .2s;
}
.vcard:hover .th .play i { transform: scale(1.15); }
.vcard .th .play i::after { content:''; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.vcard .info { padding: 12px 14px; }
.vcard .info b { font-size: 14px; font-family: var(--font-head); }
.vcard .info .sub { color: var(--muted); font-size: 11.5px; margin-top: 3px; }

/* ---------------------------------------------------------------- */
/* Schedule page                                                     */
/* ---------------------------------------------------------------- */
.sched-week { margin-bottom: 26px; }
.sched-row { display: grid; grid-template-columns: minmax(0,1fr) 80px minmax(0,1fr); align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.sched-row:last-child { border-bottom: 0; }
.sched-row .t { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.sched-row .t.right { justify-content: flex-end; text-align: right; }
.sched-row .t img { width: 24px; height: 24px; }
.sched-row .mid { text-align: center; font-family: var(--font-head); color: var(--muted); font-size: 12px; }
.sched-row .mid b { color: var(--text); font-size: 15px; }
.sched-row .t .sc { font-family: var(--font-head); font-size: 16px; }
.sched-row .winner { color: var(--red); }

/* ---------------------------------------------------------------- */
/* Footer                                                            */
/* ---------------------------------------------------------------- */
footer {
  margin-top: 60px; background: linear-gradient(180deg, #101317, #000); color: #8b929c;
  padding: 40px 0 30px; font-size: 12.5px;
}
footer .wrap { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
footer .fbrand { display: flex; align-items: center; gap: 12px; }
footer .fbrand img { height: 52px; width: 52px; border-radius: 10px; }
footer .fbrand b { font-family: var(--font-display); font-size: 26px; color: #fff; letter-spacing: .04em; font-weight: 400; }
footer .fbrand span { display: block; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
footer nav { display: grid; grid-template-columns: repeat(3, auto); gap: 8px 28px; }
footer nav a:hover { color: #fff; }
footer .copy { width: 100%; border-top: 1px solid #1d2127; margin-top: 26px; padding-top: 18px; font-size: 11px; color: #5d6571; }

/* ---------------------------------------------------------------- */
/* Misc + responsive                                                 */
/* ---------------------------------------------------------------- */
.empty { padding: 50px 20px; text-align: center; color: var(--muted); }
.empty b { font-family: var(--font-head); display: block; font-size: 18px; margin-bottom: 6px; color: var(--text); }
.pill-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; }
.pill-tabs button {
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 7px 18px;
  font-family: var(--font-head); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); cursor: pointer; transition: all .15s;
}
.pill-tabs button.on { background: var(--ink-2); color: #fff; border-color: var(--ink-2); }
.pill-tabs button:hover:not(.on) { border-color: var(--muted-2); color: var(--text); }

/* staging environment indicators */
.staging-ribbon {
  position: fixed; top: 22px; right: -46px; z-index: 999; transform: rotate(45deg);
  background: var(--gold); color: #1a1402; font-family: var(--font-head);
  font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  padding: 7px 56px; box-shadow: var(--shadow-2); pointer-events: none;
}
.staging-note {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 999;
  background: rgba(20,18,2,.92); color: var(--gold); border: 1px solid var(--gold);
  border-radius: 999px; padding: 8px 20px; font-size: 12px; font-weight: 600;
  backdrop-filter: blur(6px); box-shadow: var(--shadow-2);
}
.staging-note:hover { background: var(--gold); color: #1a1402; }

.box-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.box-2col > div:first-child { border-right: 1px solid var(--line); }

@media (max-width: 1020px){
  .home-grid, .gc-body, .team-cols { grid-template-columns: 1fr; }
  .stand-grid { grid-template-columns: 1fr; }
  .hero .tname { font-size: 30px; } .hero .score { font-size: 56px; } .hero .side img { width: 84px; height: 84px; }
  .hero-inner { padding: 22px; flex-wrap: wrap; justify-content: center; }
  .pp-row { grid-template-columns: 36px 28px minmax(0,1fr) 60px; }
  .pp-row .ptsbar, .pp-row .beat { display: none; }
  .home-grid aside.rail { margin-top: 10px !important; }
}
/* Below 1499px the hamburger drawer takes over (covers every laptop screen,
   most basic monitors). Above that, the header spans the full viewport
   (max-width: none) so nav and selectors have room without clipping. */
@media (max-width: 1499px){
  nav.primary, header.main .wk-select { display: none; }
  .hamburger { display: flex; }
  header.main .wrap { gap: 14px; padding: 0 20px; }
  .topbar .wrap > span:first-child { display: none; }
}
@media (max-width: 760px){
  .box-2col { grid-template-columns: 1fr; }
  .box-2col > div:first-child { border-right: 0; border-bottom: 2px solid var(--line); padding-bottom: 10px; }
}
@media (max-width: 640px){
  .wrap { padding: 0 14px; }
  .brand .word span { display: none; }
  .story { flex-direction: column; } .story .thumb { width: 100%; height: 150px; }
  .hero .mid .scores { gap: 12px; }
  .hero .side { flex-direction: column !important; text-align: center !important; gap: 10px; }
  .hero .side.right { flex-direction: column !important; }
  .hero .tname { font-size: 24px; } .hero .score { font-size: 46px; } .hero .side img { width: 64px; height: 64px; }
  .hero .chyron { margin-left: 14px; font-size: 10px; letter-spacing: .12em; }
  .hero-actions .btn { padding: 9px 14px; font-size: 11.5px; }
  .potw { padding: 26px 16px 24px; }
  .potw .p-name { font-size: 34px; }
  .potw .p-line { font-size: 12.5px; padding: 7px 14px; }
  .sched-row { font-size: 11.5px; padding: 9px 10px; grid-template-columns: minmax(0,1fr) 46px minmax(0,1fr); }
  .sched-row .t { gap: 6px; } .sched-row .t img { width: 20px; height: 20px; }
  .section-h h2 { font-size: 17px; }
  .section-h .sub { display: none; }
  .team-hero { padding: 22px 18px; gap: 16px; flex-wrap: wrap; }
  .team-hero img.lg { width: 70px; height: 70px; }
  .team-hero .nm { font-size: 32px; }
  .team-hero .meta { gap: 12px; font-size: 12px; }
  .gc-tabs { width: 100%; overflow-x: auto; }
  .gc-tabs button { padding: 8px 14px; white-space: nowrap; }
  .pill-tabs button { padding: 6px 13px; font-size: 11.5px; }
  .div-table { font-size: 11.5px; }
  .div-table th, .div-table td { padding: 7px 5px; }
  .div-table td:first-child, .div-table th:first-child { padding-left: 10px; }
  .card { overflow-x: auto; }
  .box-table { min-width: 460px; }
  .stand-grid .div-table { min-width: 520px; }
  .lead-grid { grid-template-columns: 1fr; }
  .score-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); }
  .tcard { min-height: 120px; padding: 14px; } .tcard .nm { font-size: 20px; } .tcard img.lg { width: 44px; height: 44px; }
  .attr-legend .key { margin-left: 0; }
  footer nav { grid-template-columns: repeat(2, auto); }
}

/* ---------------------------------------------------------------- */
/* Championship presentation (home page, title-game week)            */
/* ---------------------------------------------------------------- */
.champ { position: relative; border-radius: 16px; overflow: hidden; margin-top: 22px; color: #fff; box-shadow: var(--shadow-2); isolation: isolate; }
.champ-bg { position: absolute; inset: 0; z-index: -3; background: radial-gradient(1200px 520px at 18% -10%, var(--c1) 0%, transparent 62%), radial-gradient(900px 480px at 88% 115%, var(--c2) 0%, transparent 55%), linear-gradient(120deg, #0b0d12 30%, #15181d 70%); }
.champ-rays { position: absolute; inset: -40%; z-index: -2; background: conic-gradient(from 0deg, transparent 0 8deg, rgba(241,190,72,.09) 8deg 12deg, transparent 12deg 30deg); animation: champ-spin 60s linear infinite; opacity: .9; mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 62%); }
@keyframes champ-spin { to { transform: rotate(360deg); } }
.champ-confetti { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.champ-confetti i { position: absolute; top: -20px; left: var(--x); width: var(--w); height: calc(var(--w) * 1.6); background: linear-gradient(180deg, #f1be48, #d6a012); opacity: .75; border-radius: 2px; animation: champ-fall var(--d) linear infinite; animation-delay: calc(var(--i) * -0.7s); }
.champ-confetti i:nth-child(3n) { background: var(--c2); } .champ-confetti i:nth-child(4n) { background: #fff; opacity: .45; }
@keyframes champ-fall { 0% { transform: translateY(-20px) rotate(0deg); } 100% { transform: translateY(560px) rotate(540deg); opacity: 0; } }
.champ-chyron { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0 26px; background: var(--gold); color: var(--ink); padding: 6px 16px; font-family: var(--font-head); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.champ-chyron .dot { width: 7px; height: 7px; background: var(--red); border-radius: 50%; animation: pulse 1.6s infinite; }
.champ-grid { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: center; padding: 10px 34px 30px; }
.champ-trophy { display: grid; place-items: center; }
.trophy-svg { width: 100%; max-width: 300px; filter: drop-shadow(0 26px 40px rgba(0,0,0,.6)); animation: trophy-float 5.5s ease-in-out infinite; }
@keyframes trophy-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.champ-k { font-family: var(--font-head); color: var(--gold); font-size: 13px; letter-spacing: .34em; text-transform: uppercase; margin-bottom: 8px; }
.champ-name { display: flex; align-items: center; gap: 16px; margin: 0; font-family: var(--font-display); font-size: clamp(44px, 6vw, 82px); line-height: .92; letter-spacing: .02em; text-shadow: 0 10px 40px rgba(0,0,0,.55); }
.champ-name img { width: 92px; height: 92px; filter: drop-shadow(0 12px 22px rgba(0,0,0,.55)); }
.champ-name span { color: rgba(255,255,255,.55); font-size: .55em; }
.champ-score { display: flex; align-items: center; gap: 18px; margin: 18px 0 8px; }
.champ-score .t { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 16px; letter-spacing: .1em; }
.champ-score .t img { width: 40px; height: 40px; } .champ-score .t.r { flex-direction: row-reverse; }
.champ-score .s { font-family: var(--font-display); font-size: 74px; line-height: 1; text-shadow: 0 8px 30px rgba(0,0,0,.5); } .champ-score .s.dim { color: rgba(255,255,255,.45); }
.champ-score .dash { font-family: var(--font-display); font-size: 40px; color: rgba(255,255,255,.35); }
.champ-sub { font-size: 14px; color: rgba(255,255,255,.78); letter-spacing: .04em; }
.champ-stats { display: flex; gap: 22px; flex-wrap: wrap; margin: 20px 0 6px; }
.champ-stat b { display: block; font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.champ-stat span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.champ-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.champ-perf { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 16px; }
.champ-mvp { position: relative; padding: 26px 24px; background: linear-gradient(135deg, var(--c1), #0d0f13 130%); color: #fff; overflow: hidden; }
.champ-mvp .mvp-k { font-family: var(--font-head); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.champ-mvp .mvp-name { font-family: var(--font-display); font-size: 42px; line-height: .95; margin: 10px 0 6px; }
.champ-mvp .mvp-line { font-size: 13px; color: rgba(255,255,255,.8); }
.champ-mvp img { position: absolute; right: -18px; bottom: -22px; width: 140px; height: 140px; opacity: .18; }
.champ-lrow { display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; padding: 9px 16px; border-bottom: 1px solid #f0f2f4; font-size: 13px; align-items: baseline; }
.champ-lrow:last-child { border-bottom: 0; }
.champ-lrow .lbl { font-family: var(--font-head); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.champ-lrow b { font-weight: 700; } .champ-lrow .ln { grid-column: 2; font-size: 11.5px; color: var(--muted); }
.champ-road { overflow: hidden; }
.road-row { display: grid; grid-template-columns: 120px 96px 210px 1fr; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid #f0f2f4; border-left: 4px solid transparent; transition: background .15s; }
.road-row:last-child { border-bottom: 0; } .road-row:hover { background: #f7f8fa; }
.road-row.w { border-left-color: #0a8f3c; } .road-row.l { border-left-color: var(--red); } .road-row.po { background: linear-gradient(90deg, rgba(241,190,72,.08), transparent 40%); }
.road-row.bye { grid-template-columns: 120px 1fr; color: var(--muted-2); }
.road-wk { font-family: var(--font-head); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.road-wk i { display: block; font-style: normal; font-size: 9.5px; color: var(--gold); letter-spacing: .16em; }
.road-res { display: flex; align-items: center; gap: 8px; }
.road-res .wl { font-family: var(--font-display); font-size: 26px; line-height: 1; width: 22px; } .road-row.w .wl { color: #0a8f3c; } .road-row.l .wl { color: var(--red); }
.road-res .sc { font-family: var(--font-display); font-size: 22px; font-variant-numeric: tabular-nums; }
.road-opp { display: flex; align-items: center; gap: 10px; min-width: 0; }
.road-opp img { width: 34px; height: 34px; } .road-opp b { display: block; font-family: var(--font-head); font-size: 14px; letter-spacing: .02em; text-transform: uppercase; } .road-opp span { font-size: 11px; color: var(--muted); }
.road-body h4 { margin: 0 0 2px; font-family: var(--font-head); font-size: 14.5px; letter-spacing: .01em; } .road-body p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.road-meta { display: flex; gap: 12px; font-size: 11px; color: var(--muted-2); margin-top: 4px; }
.road-byelbl { font-family: var(--font-head); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 1000px){ .champ-perf { grid-template-columns: 1fr; } .road-row { grid-template-columns: 96px 88px 1fr; } .road-row .road-body { grid-column: 1 / -1; } }
@media (max-width: 760px){ .champ-grid { grid-template-columns: 1fr; padding: 6px 20px 24px; text-align: center; } .champ-trophy .trophy-svg { max-width: 220px; } .champ-name { justify-content: center; font-size: 44px; } .champ-name img { width: 60px; height: 60px; } .champ-score { justify-content: center; gap: 12px; } .champ-score .s { font-size: 54px; } .champ-stats { justify-content: center; gap: 14px; } .champ-actions { justify-content: center; } .road-row { grid-template-columns: 1fr; gap: 6px; } .road-row.bye { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce){ .champ-rays, .champ-confetti i, .trophy-svg { animation: none !important; } }

/* real trophy photo + engraved PCFL plate */
.champ-grid { grid-template-columns: 400px 1fr; }
.trophy-real { position: relative; width: 100%; max-width: 390px; margin: 0 auto; animation: trophy-float 6s ease-in-out infinite; }
.trophy-real > img { width: 100%; height: auto; display: block; position: relative; z-index: 1; filter: drop-shadow(0 30px 44px rgba(0,0,0,.65)) drop-shadow(0 0 28px rgba(241,190,72,.18)); }
.trophy-glow { position: absolute; left: 50%; top: 30%; width: 120%; height: 60%; transform: translate(-50%, -30%); background: radial-gradient(closest-side, rgba(241,190,72,.42), rgba(241,190,72,0)); z-index: 0; filter: blur(6px); }
/* plate covers the base's original branding: image is 935×1400; base spans ~x 32–68%, y 63–95% */
.trophy-plate { position: absolute; z-index: 2; left: 35.2%; top: 64.4%; width: 30.4%; height: 20.6%; padding: 4% 3% 3%;
  background: linear-gradient(180deg, #1c2026 0%, #0e1014 55%, #16191e 100%); border: 1px solid rgba(241,190,72,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 18px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.5);
  border-radius: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.5%; color: #f1be48; container-type: inline-size; }
.trophy-plate::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(241,190,72,.28); border-radius: 2px; pointer-events: none; }
.trophy-plate::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c1); opacity: .9; }
.trophy-plate .tp-logo { width: 22%; height: auto; margin-bottom: 2%; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.trophy-plate .tp-k { font-family: var(--font-head); font-size: 6.2cqw; letter-spacing: .16em; text-transform: uppercase; color: #f1be48; line-height: 1.1; }
.trophy-plate .tp-team { font-family: var(--font-display); font-size: 10.5cqw; letter-spacing: .04em; color: #fff6d5; line-height: 1; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,.8); }
.trophy-plate .tp-year { font-family: var(--font-display); font-size: 12cqw; color: #f1be48; line-height: 1; letter-spacing: .08em; }
.trophy-plate .tp-score { font-family: var(--font-head); font-size: 5.6cqw; letter-spacing: .12em; text-transform: uppercase; color: #cfd4db; }
.trophy-plate .tp-mvp { font-family: var(--font-head); font-size: 5.4cqw; letter-spacing: .14em; text-transform: uppercase; color: #f1be48; margin-top: 1%; }
@media (max-width: 760px){ .champ-grid { grid-template-columns: 1fr; } .trophy-real { max-width: 240px; } }
@media (prefers-reduced-motion: reduce){ .trophy-real { animation: none !important; } }

/* ---------------------------------------------------------------- */
/* Offseason — Recruiting Period home                                */
/* ---------------------------------------------------------------- */
.offseason-note { display: flex; align-items: center; gap: 10px; margin: 18px 0 -6px; padding: 9px 14px; border-radius: 8px; background: var(--ink-2); color: #cfd4db; font-size: 12px; letter-spacing: .04em; }
.offseason-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: pulse 1.6s infinite; }
.offseason-note a { margin-left: auto; color: var(--gold); font-weight: 600; }
.rp-hero { position: relative; border-radius: 16px; overflow: hidden; margin-top: 22px; min-height: 440px; color: #fff; box-shadow: var(--shadow-2); isolation: isolate; background: linear-gradient(120deg, #0b0d12 30%, #15181d 70%); display: flex; align-items: flex-end; }
.rp-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; z-index: -3; filter: saturate(.9) contrast(1.05); }
.rp-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(8,10,14,.92) 0%, rgba(8,10,14,.72) 45%, rgba(8,10,14,.25) 100%), linear-gradient(180deg, rgba(8,10,14,.1) 0%, rgba(8,10,14,.75) 100%); }
.rp-grid-lines { position: absolute; inset: 0; z-index: -1; opacity: .10; background-image: repeating-linear-gradient(90deg, transparent 0 119px, rgba(255,255,255,.5) 119px 120px); mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent); }
.rp-chyron { position: absolute; top: 22px; left: 26px; display: inline-flex; align-items: center; gap: 10px; background: var(--gold); color: var(--ink); padding: 6px 16px; font-family: var(--font-head); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.rp-chyron .dot { width: 7px; height: 7px; background: var(--red); border-radius: 50%; animation: pulse 1.6s infinite; }
.rp-inner { position: relative; padding: 80px 34px 32px; max-width: 720px; }
.rp-k { font-family: var(--font-head); color: var(--gold); font-size: 13px; letter-spacing: .34em; text-transform: uppercase; margin-bottom: 8px; }
.rp-title { margin: 0; font-family: var(--font-display); font-size: clamp(52px, 7vw, 96px); line-height: .88; letter-spacing: .02em; text-shadow: 0 10px 40px rgba(0,0,0,.6); }
.rp-title span { color: var(--gold); }
.rp-lead { margin: 16px 0 14px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 560px; }
.rp-status { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); font-family: var(--font-head); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.rp-status .rp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.rp-status.live .rp-dot { background: #ff3b52; animation: pulse 1.6s infinite; }
.rp-stats { display: flex; gap: 22px; flex-wrap: wrap; margin: 18px 0 18px; }
.rp-stat b { display: block; font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.rp-stat span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.rp-rank { font-family: var(--font-display); font-size: 22px; color: var(--muted); width: 30px; text-align: center; flex-shrink: 0; }
.rp-champ { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: center; padding: 16px 18px; background: linear-gradient(135deg, var(--c1), #0d0f13 130%); color: #fff; position: relative; overflow: hidden; }
.rp-champ .rp-trophy { width: 74px; height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.rp-champ .cat { font-family: var(--font-head); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.rp-champ h3 { margin: 4px 0 4px; font-family: var(--font-display); font-size: 26px; line-height: 1; }
.rp-champ p { margin: 0 0 6px; font-size: 12px; color: rgba(255,255,255,.8); }
.rp-champ .more { font-family: var(--font-head); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.rp-champ .rp-champ-logo { position: absolute; right: -14px; bottom: -18px; width: 110px; height: 110px; opacity: .16; }
@media (max-width: 760px){ .rp-hero { min-height: 420px; } .rp-inner { padding: 74px 20px 24px; } .rp-title { font-size: 56px; } .rp-stats { gap: 14px; } }
@media (prefers-reduced-motion: reduce){ .rp-status .rp-dot, .rp-chyron .dot, .offseason-note .dot { animation: none !important; } }

/* ---- "new build available" bar (see checkBuild in app.js) */
.update-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 16px; background: #15181d; color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.35); font-size: 13px; max-width: calc(100vw - 32px); }
.update-bar button { background: var(--gold, #f1be48); color: #15181d; border: 0; border-radius: 6px; padding: 7px 12px; font-family: var(--font-head); letter-spacing: .06em; font-size: 12px; cursor: pointer; }
.update-bar button:hover { filter: brightness(1.08); }

/* ---- AI recap v2: subhead, by-the-numbers, play-by-play scoring summary */
.recap-dek { font-size: 15px; color: var(--muted, #5b6370); margin: -4px 0 14px; font-style: italic; }
.recap-numbers ul { margin: 6px 0 0; padding-left: 18px; }
.recap-numbers li { margin: 4px 0; line-height: 1.5; }
.recap-flow .flow-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; }
.recap-flow .flow-table td { padding: 7px 8px; border-top: 1px solid var(--line, #e6e8eb); vertical-align: top; }
.recap-flow .flow-table td.q { white-space: nowrap; font-family: var(--font-head); color: var(--red, #d6001c); width: 1%; }
.recap-flow .flow-table td.q span { display: block; color: var(--muted-2, #99a0aa); font-family: inherit; font-size: 11px; }
.recap-flow .flow-table td.k { white-space: nowrap; font-weight: 600; width: 1%; }
.recap-flow .flow-table td.s { white-space: nowrap; text-align: right; font-weight: 600; width: 1%; }
@media (max-width: 640px) {
  .recap-flow .flow-table td.p { display: none; }
}

/* ---- game highlights (broadcast clips matched to the play-by-play) */
.gc-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--red, #d6001c); color: #fff; font-size: 10px; line-height: 16px; text-align: center; vertical-align: 1px; }
.hl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hl-card { padding: 0; overflow: hidden; }
.hl-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.hl-head img { width: 30px; height: 30px; margin-left: auto; }
.hl-num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ink-2, #15181d); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-size: 14px; }
.hl-title { font-family: var(--font-head); font-size: 15px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2; }
.hl-meta { font-size: 12px; color: var(--muted, #5b6370); margin-top: 2px; }
.hl-video { margin: 0; border-radius: 0; }
.hl-play { font-size: 13px; color: var(--muted, #5b6370); padding: 10px 14px 14px; margin: 0; line-height: 1.5; }
.hl-note { font-size: 11.5px; color: var(--muted-2, #99a0aa); margin: 12px 2px 0; }
@media (max-width: 760px) { .hl-grid { grid-template-columns: 1fr; } }