/* FB27 "Sideline Slate" (STYLE.md Phase 1). Tokens first; every colour below comes from them.
   No framework, no gradients, no blur, no drop shadows. 8px spacing grid. */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter_latin_400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500 600; font-display: swap; src: url("../fonts/inter_latin_600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../fonts/inter_latin_700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("../fonts/barlow_condensed_latin_700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url("../fonts/barlow_condensed_latin_800.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --bg: #11151C; --panel: #1A2029; --panel-raised: #232B36; --border: #334050;
  --text: #F2F4F7; --text-2: #A3AEBD; --accent: #FF7A1A; --accent-hover: #FF8F3D; --on-accent: #11151C;
  --success: #3DDC84; --loss: #FF5A5F; --warning: #FFC233; --focus: #FF7A1A;
  --turf-a: #2E6B3A; --turf-b: #357A42; --turf-edge: #1F4A28; --los: #2F7BFF; --first-down: #FFD23F;
  --gain: #3DDC84; --loss-bar: #FF5A5F; --ball: #8B4A22;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px;
  --r-ctl: 6px; --r-panel: 10px;
  --font-ui: "Inter", system-ui, sans-serif; --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  /* Legacy aliases so the mockup's component layer resolves to STYLE.md tokens. */
  --app-bg: var(--bg); --app-bg-2: var(--bg); --surface: var(--panel); --surface-2: var(--panel-raised); --surface-3: var(--panel-raised);
  --ink: var(--text); --ink-2: var(--text); --muted: var(--text-2); --border-strong: var(--border);
  --accent-strong: var(--accent-hover); --accent-soft: rgba(255,122,26,.15);
  --red: var(--loss); --red-strong: var(--loss); --red-soft: rgba(255,90,95,.15);
  --green: var(--success); --green-soft: rgba(61,220,132,.15); --amber: var(--warning); --amber-soft: rgba(255,194,51,.15);
  --shadow-sm: none; --shadow-md: none; --hero-glow: transparent; --field-card: var(--panel); --field-card-text: var(--text);
  --stripe: rgba(255,255,255,.02); --scrollbar: var(--border); --gold: var(--accent);
  --rating-elite: var(--accent); --rating-great: var(--success); --rating-good: #6FA8FF; --rating-solid: var(--text-2); --rating-avg: var(--warning); --rating-low: var(--loss);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/24px var(--font-ui); }
img, svg { vertical-align: middle; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, h4, h5, h6, .h3, .h4, .h5, .h6 { margin: 0 0 var(--s2); line-height: 1.25; font-weight: 600; color: var(--text); }
h1 { font: 700 28px/32px var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
h2, .h4 { font-size: 20px; line-height: 28px; } h3, .h5 { font-size: 16px; } .h6, h4, h5, h6 { font-size: 14px; }
p { margin: 0 0 var(--s3); }
table { border-collapse: collapse; }
button, input, select, textarea { font: inherit; color: inherit; }
.num, td.num, th.num, .tabular { font-variant-numeric: tabular-nums; text-align: right; }
.display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Layout */
.container-xxl, .wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--s3); }
@media (min-width: 768px) { .container-xxl, .wrap { padding: 0 var(--s4); } }
.row { display: flex; flex-wrap: wrap; margin: calc(var(--gy, 0px) * -1) calc(var(--gx, 0px) / -2) 0; }
.row > * { flex: 0 0 100%; max-width: 100%; padding: 0 calc(var(--gx, 0px) / 2); margin-top: var(--gy, 0px); min-width: 0; }
.g-2 { --gx: 8px; --gy: 8px; } .g-3 { --gx: 16px; --gy: 16px; } .g-4 { --gx: 24px; --gy: 24px; }
.col, .col-12 { flex: 0 0 100%; } .col-6 { flex: 0 0 50%; max-width: 50%; }
@media (min-width: 576px) { .col-sm-2 { flex: 0 0 16.666%; max-width: 16.666%; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { flex: 0 0 33.333%; max-width: 33.333%; } .col-sm-5 { flex: 0 0 41.666%; max-width: 41.666%; } .col-sm-12 { flex: 0 0 100%; max-width: 100%; } .d-sm-inline { display: inline !important; } }
@media (min-width: 768px) { .col-md-2 { flex: 0 0 16.666%; max-width: 16.666%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; } .col-md-5 { flex: 0 0 41.666%; max-width: 41.666%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; } .text-md-end { text-align: right !important; } }
@media (min-width: 992px) { .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; } .col-lg-5 { flex: 0 0 41.666%; max-width: 41.666%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-lg-7 { flex: 0 0 58.333%; max-width: 58.333%; } .col-lg-8 { flex: 0 0 66.666%; max-width: 66.666%; } .text-lg-end { text-align: right !important; } }
@media (min-width: 1200px) { .col-xl-3 { flex: 0 0 25%; max-width: 25%; } .col-xl-4 { flex: 0 0 33.333%; max-width: 33.333%; } .col-xl-5 { flex: 0 0 41.666%; max-width: 41.666%; } .col-xl-6 { flex: 0 0 50%; max-width: 50%; } .col-xl-7 { flex: 0 0 58.333%; max-width: 58.333%; } .col-xl-8 { flex: 0 0 66.666%; max-width: 66.666%; } }

/* Utilities (only the ones the pages use) */
.d-flex { display: flex !important; } .d-block { display: block !important; } .d-inline-block { display: inline-block !important; } .d-grid { display: grid !important; } .d-none { display: none !important; }
.flex-wrap { flex-wrap: wrap; } .flex-grow-1 { flex-grow: 1; } .align-items-center { align-items: center; } .align-items-end { align-items: flex-end; } .align-items-start { align-items: flex-start; } .align-middle { vertical-align: middle; }
.justify-content-between { justify-content: space-between; } .justify-content-center { justify-content: center; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 16px; }
.m-0, .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 4px !important; } .mb-2 { margin-bottom: 8px !important; } .mb-3 { margin-bottom: 16px !important; } .mb-4 { margin-bottom: 24px !important; }
.mt-1 { margin-top: 4px !important; } .mt-2 { margin-top: 8px !important; } .mt-3 { margin-top: 16px !important; } .mt-4 { margin-top: 24px !important; }
.ms-auto { margin-left: auto !important; } .me-auto { margin-right: auto !important; } .mx-auto { margin-left: auto; margin-right: auto; } .ms-2 { margin-left: 8px; } .me-1 { margin-right: 4px; }
.p-2 { padding: 8px !important; } .p-3 { padding: 16px !important; } .px-2 { padding-left: 8px !important; padding-right: 8px !important; } .py-1 { padding-top: 4px !important; padding-bottom: 4px !important; } .py-2 { padding-top: 8px !important; padding-bottom: 8px !important; } .py-4 { padding-top: 24px !important; padding-bottom: 24px !important; } .pt-1 { padding-top: 4px; } .pt-3 { padding-top: 16px; } .ps-1 { padding-left: 4px; } .ps-3 { padding-left: 16px; }
.w-100 { width: 100% !important; } .h-100 { height: 100% !important; }
.text-center { text-align: center !important; } .text-end { text-align: right !important; } .text-start { text-align: left !important; } .text-uppercase { text-transform: uppercase; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-decoration-none { text-decoration: none; }
.text-body-secondary { color: var(--text-2) !important; } .text-body { color: var(--text) !important; }
.small, small { font-size: 14px; line-height: 20px; } .fw-bold { font-weight: 700 !important; } .fw-normal { font-weight: 400 !important; } .fs-6 { font-size: 16px !important; }
.border { border: 1px solid var(--border) !important; } .border-top { border-top: 1px solid var(--border) !important; } .border-bottom { border-bottom: 1px solid var(--border) !important; } .border-start { border-left: 1px solid var(--border) !important; } .border-3 { border-width: 3px !important; } .rounded { border-radius: var(--r-ctl) !important; }
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
.link-quiet { color: var(--text); text-decoration: none; } .link-quiet:hover { color: var(--accent); }
.skip-link { position: absolute; left: 16px; top: 8px; z-index: 50; background: var(--accent); color: var(--on-accent); padding: 8px 16px; border-radius: var(--r-ctl); }

/* Buttons: 40px, Inter 600 14px */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-ctl); border: 1px solid var(--border); background: transparent; color: var(--text); font: 600 14px/20px var(--font-ui); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--panel-raised); color: var(--text); }
.btn-sm, .btn-xs { min-height: 32px; padding: 0 12px; } .btn-xs { font-size: 12px; padding: 0 8px; }
.btn-accent, .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-accent:hover, .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn-ghost, .btn-soft, .btn-success-soft { background: transparent; }
.btn-red, .btn-danger-soft { background: transparent; border-color: var(--loss); color: var(--loss); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.btn-close { width: 32px; height: 32px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; }
.btn-close::before { content: "\00D7"; font-size: 20px; }

/* Forms */
.form-label { display: block; margin-bottom: 4px; font: 500 12px/16px var(--font-ui); color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.form-control, .form-select { display: block; width: 100%; min-height: 40px; padding: 8px 12px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-ctl); }
.form-control-sm, .form-select-sm { min-height: 32px; padding: 4px 8px; font-size: 14px; }
.form-control:focus, .form-select:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--accent); }
.form-hint { font-size: 12px; color: var(--text-2); }

/* Tables */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; margin: 0; font-size: 14px; line-height: 20px; color: var(--text); }
.table th { position: sticky; top: 0; background: var(--panel-raised); color: var(--text-2); font: 600 12px/16px var(--font-ui); text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 12px 8px; white-space: nowrap; z-index: 1; }
.table td { height: 40px; padding: 4px 8px; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); }
.table tbody tr:hover td { background: var(--panel-raised); }
.table-sm td { height: 32px; }

/* Alerts, tags */
.alert { position: relative; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--border); border-left: 4px solid var(--text-2); border-radius: var(--r-ctl); background: var(--panel); }
.alert-success { border-left-color: var(--success); } .alert-danger { border-left-color: var(--loss); } .alert-warning { border-left-color: var(--warning); } .alert-info { border-left-color: var(--accent); }
.alert .btn-close { position: absolute; right: 4px; top: 4px; }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; font: 600 11px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .04em; background: rgba(163,174,189,.15); color: var(--text-2); }
.tag-accent { background: rgba(255,122,26,.15); color: var(--accent); } .tag-success { background: rgba(61,220,132,.15); color: var(--success); }
.tag-loss { background: rgba(255,90,95,.15); color: var(--loss); } .tag-warning { background: rgba(255,194,51,.15); color: var(--warning); }
.pos-badge, [class*="pos-"].pos-badge { background: rgba(163,174,189,.15) !important; color: var(--text) !important; border-color: transparent !important; }

/* Panels */
.panel, .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); box-shadow: none; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 16px 16px 8px; border: 0; background: transparent; }
.panel-title { margin: 0; font: 600 20px/28px var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--text); }
.panel-sub { font-size: 12px; color: var(--text-2); }
.panel-body { padding: 8px 16px 16px; }

/* Header + nav (no JS: checkbox toggle on mobile; a closed <details> never renders its content, whatever the CSS) */
.app-header { background: var(--panel); border-bottom: 1px solid var(--border); position: static; }
.topbar { display: flex; align-items: center; gap: 16px; min-height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font: 800 24px/1 var(--font-display); letter-spacing: .02em; }
.brand b { color: #7A1E22; font-weight: 800; }
.brand-sub { font: 600 12px/16px var(--font-ui); color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.nav-main { margin-left: auto; }
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nav-toggle-btn { cursor: pointer; }
@media (max-width: 1099px) { .topbar { position: relative; gap: 8px; padding-right: 96px; } .brand-sub { display: none; } .nav-main { flex: none; margin-left: auto; } .nav-toggle-btn { position: absolute; right: var(--s3); top: 50%; transform: translateY(-50%); z-index: 50; display: inline-flex !important; visibility: visible; opacity: 1; align-items: center; flex: none; white-space: nowrap; } }
.nav-toggle:focus-visible + .nav-toggle-btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list a, .nav-list button { display: flex; align-items: center; min-height: 40px; padding: 0 12px; color: var(--text-2); text-decoration: none; font: 600 14px/20px var(--font-ui); border-radius: var(--r-ctl); border: 0; background: none; cursor: pointer; width: 100%; }
.nav-list a:hover, .nav-list button:hover { color: var(--text); background: var(--panel-raised); }
.nav-list a, .nav-list button { color: #E8E1D3; }
.nav-list a[aria-current="page"] { color: #E8E1D3; background: #7A1E22; box-shadow: inset 0 -2px 0 #7A1E22; }
.nav-panel { display: none; position: absolute; left: 0; right: 0; top: 56px; z-index: 40; background: var(--panel); border-bottom: 1px solid var(--border); padding: 8px 16px 16px; }
.nav-toggle:checked ~ .nav-panel { display: block; }
.nav-panel form { margin: 0; }
.nav-sep { border-top: 1px solid var(--border); margin: 8px 0; }
.nav-user { font-size: 12px; color: var(--text-2); padding: 4px 12px; }
@media (min-width: 1100px) {
  .nav-toggle-btn { display: none; }
  .nav-main > .nav-panel { display: flex; position: static; padding: 0; border: 0; background: none; align-items: center; gap: 16px; }
  .nav-list { display: flex; gap: 2px; align-items: center; }
  .nav-sep { display: none; }
  .nav-list a { width: auto; }
}
.app-footer { margin-top: 48px; background: #7A1E22; color: #E8E1D3; font-size: 14px; }
.app-footer .wrap.footer_rows { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; padding-bottom: 24px; }
.footer_row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.footer_legal { border-top: 1px solid rgba(232,225,211,.25); padding-top: 14px; font-size: 13px; }
.footer_marks, .footer_connect, .footer_links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.footer_mark { font-weight: 700; letter-spacing: .04em; }
.footer_sep { opacity: .5; }
.footer_label { opacity: .85; }
.app-footer a { color: #E8E1D3; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(232,225,211,.4); }
.app-footer a:hover, .app-footer a:focus-visible { color: #FFFFFF; text-decoration-color: #FFFFFF; }
.app-footer a:focus-visible { outline: 2px solid #E8E1D3; outline-offset: 2px; }
.footer-brand { font: 800 18px/1 var(--font-display); color: #E8E1D3; }
@media (max-width: 640px) { .footer_row { flex-direction: column; align-items: flex-start; } }
main#main { padding-top: 24px; padding-bottom: 24px; }

/* Score ticker */
.ticker { border-top: 1px solid var(--border); background: var(--bg); }
.ticker-list { display: flex; gap: 8px; overflow-x: auto; list-style: none; margin: 0 auto; padding: 8px 16px; max-width: 1440px; scrollbar-width: thin; }
.ticker-item a { display: grid; grid-template-columns: auto auto; gap: 0 12px; min-width: 128px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--panel); color: var(--text); text-decoration: none; font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.ticker-item a:hover { border-color: var(--accent); }
.ticker-item .t-score { text-align: right; font-weight: 700; } .ticker-item .t-meta { grid-column: 1 / -1; color: var(--text-2); }
.ticker-item .t-win { color: var(--text); } .ticker-item .t-lose { color: var(--text-2); font-weight: 400; }

/* Page header */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-eyebrow { font: 600 12px/16px var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: 4px; }
.page-sub { color: var(--text-2); margin: 4px 0 0; }

/* Team badge (STYLE.md section 3) */
.team-mark { flex: none; }
.team-mark text { font-family: var(--font-display); font-weight: 800; }
.team-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.bye-label { display: inline-flex; align-items: center; min-height: 24px; } /* same height as a team-chip with its 24px logo */

/* Live game */
.lg { display: grid; gap: 16px; }
.sb { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 72px; padding: 8px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); }
.sb-team { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sb-team.home { flex-direction: row-reverse; text-align: right; }
.sb-name { font: 700 20px/24px var(--font-display); text-transform: uppercase; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-rec { font-size: 12px; color: var(--text-2); }
.sb-score { font: 800 48px/48px var(--font-display); font-variant-numeric: tabular-nums; min-width: 56px; text-align: center; }
.sb-mid { text-align: center; }
.sb-clock { font: 700 22px/24px var(--font-display); font-variant-numeric: tabular-nums; }
.sb-state { font: 600 11px/16px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.sb-state.live { color: var(--loss); }
.poss { display: inline-block; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; visibility: hidden; }
.sb-team.away .poss { border-left: 8px solid var(--accent); } .sb-team.home .poss { border-right: 8px solid var(--accent); }
.poss.on { visibility: visible; }
@media (max-width: 640px) { .sb-name, .sb-rec { display: none; } .sb-score { font-size: 36px; line-height: 40px; min-width: 40px; } .sb { padding: 8px; } }
/* Field capped at 640px (about 1/8 of its old 1080p area), true 1200:520 ratio, centred. */
.field-wrap { width: 100%; max-width: 640px; margin: 0 auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-panel); overflow: hidden; }
.field-svg { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 520; }
.endzone:not([fill]) { fill: #5A6472; } .endzone { fill-opacity: .9; }
.field-svg .fl { stroke: #F2F4F7; stroke-opacity: .85; fill: none; } .field-svg .goalpost { fill: none; }
.field-svg .num-arrow { fill: #F2F4F7; fill-opacity: .85; }
.field-svg .num { font-family: var(--font-display); font-weight: 700; fill: #F2F4F7; fill-opacity: .85; text-anchor: middle; dominant-baseline: middle; }
.ez-text { font: 800 56px var(--font-display); fill: #fff; fill-opacity: .8; text-anchor: middle; dominant-baseline: middle; letter-spacing: .02em; }
.fx-los, .fx-fd { stroke-width: 3; } .fx-los { stroke: var(--los); } .fx-fd { stroke: var(--first-down); }
.fx-fd.fourth { stroke: #E5484D; }
.fx-bar { fill: var(--gain); fill-opacity: .75; } .fx-bar.loss { fill: #8E2A2A; }
.fx-bar-label { font: 700 18px var(--font-display); fill: var(--text); text-anchor: middle; }
.fx-shadow { fill: #000; fill-opacity: .35; filter: blur(1.5px); }
.fx-ball { fill: #8B5A2B; stroke: #0B0E13; stroke-width: 1; } .fx-lace { stroke: #FFFFFF; stroke-width: 1; fill: none; }
.fx-flash { fill: transparent; opacity: 0; pointer-events: none; }
.fx-flash.go { animation: fxflash 800ms ease-out; }
@keyframes fxflash { 0% { opacity: 0; } 40% { opacity: .35; } 100% { opacity: 0; } }
.hidden-fx { display: none; }
.field-stage { position: relative; }
.carrier-tag { position: absolute; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--panel-raised); border: 1px solid var(--border); border-radius: 6px; font: 600 12px/16px var(--font-ui); white-space: nowrap; pointer-events: none; transition: left 600ms cubic-bezier(.16,1,.3,1), top 600ms cubic-bezier(.16,1,.3,1); }
.carrier-tag .chip { width: 10px; height: 10px; border-radius: 2px; background: var(--chip, var(--text-2)); }
.chip-home { --chip: var(--home-color); } .chip-away { --chip: var(--away-color); }
.downbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 48px; padding: 8px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); }
.down-text { font: 700 22px/24px var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.drive-sum { font: 600 13px/20px var(--font-ui); color: var(--text-2); font-variant-numeric: tabular-nums; }
.chip-los, .chip-fd { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.chip-los::before, .chip-fd::before { content: ""; width: 16px; height: 3px; border-radius: 2px; }
.chip-los::before { background: var(--los); } .chip-fd::before { background: var(--first-down); } .chip-fd.fourth::before { background: #E5484D; }
/* .carrier-tag sets display after .hidden-fx, so restate the hide with higher specificity. */
.carrier-tag.hidden-fx { display: none; }
.lg-bottom { display: grid; gap: 16px; }
@media (min-width: 992px) { .lg-bottom { grid-template-columns: 2fr 1fr; } .tabs-mobile { display: none !important; } .lg-bottom > [hidden] { display: block !important; } }
.feed { list-style: none; margin: 0; padding: 0; max-height: 480px; overflow-y: auto; }
.feed li { display: grid; grid-template-columns: 64px 1fr auto; grid-template-areas: "tag sit when" "tag text text" "tag next next"; align-items: center; column-gap: 8px; row-gap: 2px; min-height: 40px; padding: 6px 12px; border-bottom: 1px solid rgba(255,255,255,.08); border-left: 3px solid transparent; font-size: 14px; line-height: 20px; }
.feed li:first-child { border-left-color: var(--accent); background: var(--panel-raised); }
.f-big { display: block; margin-top: 2px; color: #F5B942; font-size: 10px; font-weight: 800; font-variant: normal; line-height: 12px; letter-spacing: .02em; white-space: nowrap; }
.feed .f-gain { grid-area: tag; align-self: start; width: 64px; font-size: 12px; font-weight: 700; font-variant: small-caps; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.feed .f-sit { grid-area: sit; font-size: 13px; font-weight: 700; font-variant: small-caps; color: var(--text); }
.feed .f-when { grid-area: when; font-size: 12px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; text-align: right; }
.feed .f-text { grid-area: text; color: rgba(255,255,255,.85); }
.feed .f-next { grid-area: next; font-size: 12px; font-weight: 700; font-variant: small-caps; color: rgba(255,255,255,.6); }
:root {
  --fb-tag-gain-bg: #2E7D32; --fb-tag-gain-fg: #FFFFFF;
  --fb-tag-loss-bg: #C62828; --fb-tag-loss-fg: #FFFFFF;
  --fb-tag-zero-bg: #4A4F57; --fb-tag-zero-fg: #FFFFFF;
  --fb-tag-pen-bg: #F2C230; --fb-tag-pen-fg: #1A1714;
  --fb-tag-to-bg: #E09F3E; --fb-tag-to-fg: #1A1714;
  --fb-tag-fg-bg: #E8E1D3; --fb-tag-fg-fg: #1A1714;
  --fb-tag-td-bg: #0B0E13; --fb-tag-td-fg: #E8E1D3; --fb-tag-td-line: #E8E1D3;
  --fb-bone: #E8E1D3; --fb-charcoal: #1A1714; --fb-black: #0B0E13; --fb-white: #FFFFFF;
  --fb-turf: #2F5A34; --fb-turf-alt: #34613A; --fb-fd-line: #F2C230;
}
.feed .tag-gain, .feed .tag-loss, .feed .tag-zero, .feed .tag-pen, .feed .tag-to, .feed .tag-fg, .feed .tag-score { white-space: nowrap; display: inline-block; justify-self: start; padding: 0 6px; border-radius: 3px; font-size: 11px; line-height: 18px; width: auto; }
.feed .tag-gain { background: var(--fb-tag-gain-bg); color: var(--fb-tag-gain-fg); }
.feed .tag-loss { background: var(--fb-tag-loss-bg); color: var(--fb-tag-loss-fg); }
.feed .tag-zero { background: var(--fb-tag-zero-bg); color: var(--fb-tag-zero-fg); }
.feed .tag-pen { background: var(--fb-tag-pen-bg); color: var(--fb-tag-pen-fg); }
.feed .tag-to { background: var(--fb-tag-to-bg); color: var(--fb-tag-to-fg); }
.feed .tag-fg { background: var(--fb-tag-fg-bg); color: var(--fb-tag-fg-fg); }
.feed .tag-score { background: var(--fb-tag-td-bg); color: var(--fb-tag-td-fg); box-shadow: inset 0 0 0 1px var(--fb-tag-td-line); }
.feed li.fg { border-left-color: var(--fb-bone); }
.feed li.scored { border-left-color: var(--fb-black); } .feed li.scored .f-text { font-weight: 600; } .feed li.turnover .f-text { color: var(--fb-tag-to-bg); }
@media (max-width: 640px) { .feed li { grid-template-columns: 56px 1fr auto; padding: 6px 8px; } .feed .f-gain { width: 56px; } .feed .f-sit { font-size: 12px; } }
.tabs-mobile { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.tab-btn, .tablist button, .tablist a { min-height: 40px; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-2); font: 600 14px/20px var(--font-ui); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.tab-btn[aria-selected="true"], .tablist [aria-selected="true"], .tablist [aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.tablist { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.chat-log { list-style: none; margin: 0; padding: 8px 12px; height: 360px; overflow-y: auto; font-size: 14px; line-height: 20px; }
.chat-log li { padding: 4px 0; overflow-wrap: anywhere; } .chat-log .c-user { font-weight: 600; margin-right: 6px; } .chat-log .c-team { color: var(--accent); font-size: 12px; margin-right: 4px; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.chat-rooms { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--border); }
.pregame { padding: 24px; text-align: center; color: var(--text-2); }
.field-note { padding: 8px 16px; font-size: 12px; color: var(--text-2); }

/* Depth chart */
.depth-table td { height: 44px; }
.drag-handle { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--bg); color: var(--text-2); cursor: grab; }
.drag-handle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.depth-row.moving td { background: var(--panel-raised); }

/* Coordinator cards */
.coach-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 992px) { .coach-grid { grid-template-columns: repeat(3, 1fr); } }
.coach-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); }
.coach-card h3 { margin: 0; font-size: 16px; }
.bar { display: grid; grid-template-columns: 96px 1fr 32px; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.bar-track { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); }
.w0{width:0}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}
.staff-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.network-badge.net-featured { background: var(--accent); color: var(--on-accent); } .network-badge.net-runner { background: var(--panel-raised); color: var(--text); }
/* Rating pills (STYLE): neutral raised chip, tier by text colour only. */
.rating.p-hi, .rating.p-mid, .rating.p-lo { background: var(--panel-raised); border: 1px solid var(--border); font-family: var(--font-display); font-weight: 700; min-width: 32px; text-align: center; }
.rating.p-hi { color: var(--accent); }
.rating.p-mid { color: var(--text); }
.rating.p-lo { color: var(--text-2); }
/* Depth chart: headers align with their numbers. */
.depth-table th, .depth-table td { text-align: left; }
.depth-table th.num, .depth-table td.num { text-align: right; padding-right: 16px; }
/* Season leaders: quiet rows, one orange action per panel. */
.leaders-panel .leader-row, .leaders-panel .leader-row:hover { color: var(--text); text-decoration: none; }
.leaders-panel .leader-row:hover .leader-name { text-decoration: underline; text-underline-offset: 2px; }
.leaders-panel .leader-name { color: var(--text); font-weight: 600; }
.leaders-panel .leader-value { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text); }
.leaders-panel .leader-sub { color: var(--text-2); }
.panel-action { color: var(--accent); font-weight: 600; text-decoration: none; }
.panel-action:hover { color: var(--accent-hover); text-decoration: underline; }

/* Scores bar: instant score update. Only the number flashes league gold (1.5 s); the cell background never changes. */
.score-ticker-abbr { display: inline-flex; align-items: center; gap: .25rem; }
.score-ticker-score { transition: color .2s; }
.score-ticker-score.is-scored { animation: fb27-score-tick 1.5s ease-out; }
@keyframes fb27-score-tick {
  0% { color: #F2C14E; transform: translateY(-2px); }
  15% { color: #F2C14E; transform: none; }
  75% { color: #F2C14E; }
  100% { color: #fff; }
}
.score-ticker-tag {
  padding: 0 .28rem; border-radius: 3px; background: var(--tag-bg, #1E3557); color: #EDE6D6;
  font-size: .52rem; font-weight: 900; letter-spacing: .05em; line-height: 1.35; transition: opacity .4s;
}
.score-ticker-tag.is-fading { opacity: 0; }
.score-ticker-game[data-live-game] { position: relative; overflow: hidden; }
.score-ticker-band { position: absolute; top: 0; left: 0; right: 0; height: 18px; padding: 0 8px; display: flex; align-items: center;
  font-size: 11px; line-height: 18px; font-weight: 700; font-variant: small-caps; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform: translateY(-100%); transition: transform .2s ease; pointer-events: none; z-index: 2; }
.score-ticker-band.is-on { transform: translateY(0); }
.score-ticker-band.k-gain { background: var(--band-team, var(--fb-charcoal)); color: var(--fb-white); }
.score-ticker-band.k-score { background: var(--fb-tag-fg-bg); color: var(--fb-charcoal); }
.score-ticker-band.k-to { background: var(--fb-tag-to-bg); color: var(--fb-charcoal); }
.score-ticker-band.k-pen { background: var(--fb-tag-pen-bg); color: var(--fb-charcoal); }
@media (prefers-reduced-motion: reduce) { .score-ticker-band { transition: none; } }
.score-ticker-hide { flex: 0 0 24px; border: 0; padding: 0; background: var(--fb-charcoal); color: rgba(255,255,255,.6); font-size: 11px; font-weight: 700; font-variant: small-caps; letter-spacing: .04em; writing-mode: vertical-rl; transform: rotate(180deg); cursor: pointer; }
.score-ticker-hide:hover { color: var(--fb-white); }
.app-ticker .score-ticker-shell { transition: min-height .2s; }
.app-ticker.is-collapsed .score-ticker-shell { min-height: 24px; }
.app-ticker.is-collapsed .score-ticker-shell > :not(.score-ticker-hide) { display: none; }
.app-ticker.is-collapsed .score-ticker-hide { writing-mode: horizontal-tb; transform: none; flex: 0 0 auto; padding: 0 10px; }
.score-ticker-tag[hidden], .score-ticker-poss[hidden] { display: none; }
.score-ticker-poss { width: 6px; height: 6px; border-radius: 50%; background: #EDE6D6; flex: none; }
.score-ticker-poss.is-rz { background: #d23b3b; }
@media (prefers-reduced-motion: reduce) {
  .score-ticker-score.is-scored { animation: none; }
  .score-ticker-tag { transition: none; }
}

.game-card-clock { margin-left: .4rem; font-variant-numeric: tabular-nums; color: var(--bs-warning, #f5b942); }

/* Scoreboard order groups: finals dimmed with bone label + bold winner; live red bar; 12% rule between groups. */
.score-ticker-game.is-final, .game-card.is-final { opacity: .7; }
.score-ticker-time.is-final-label { color: #E8E1D3; }
.score-ticker-score.is-winner, .game-card.is-final .game-card-team.winner .game-card-score { font-weight: 700; }
.score-ticker-game.is-live, .game-card.is-live { box-shadow: inset 2px 0 0 #E5484D; }
.score-ticker-game.is-group-start { border-left: 1px solid rgba(242, 244, 247, .12); }
img.team-logo { border-radius: 0; object-fit: contain; display: inline-block; }

/* Small field v2 (spec 14.x) */
:root { --fb-mf-num: rgba(255,255,255,.5); }
.mini-field { margin: 8px 0; height: 72px; border-radius: 4px; overflow: hidden; }
.mini-field svg { display: block; width: 100%; height: 100%; }
.mini-field .mf-num { fill: var(--fb-mf-num); font-size: 10px; font-weight: 700; }
.mini-field .mf-ez { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 400px) { .mini-field { height: 56px; } }

/* Gamecast layout (display only). Colours via tokens; team fills arrive as custom properties. */
:root { --fb-gold: #D4A72C; --fb-rz: rgba(198,40,40,.12); --fb-cap: rgba(255,255,255,.6); --fb-divider: rgba(255,255,255,.08); --hero-logo-bg-opacity: 0.2; }
.gc-head { position: relative; overflow: hidden; height: 98px; display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 16px; padding: 0 24px; background: var(--hero-bg); color: #FFFFFF; border-radius: 0; border-bottom: 1px solid #2A3140; }
.gc-bg { position: absolute; z-index: 0; top: 50%; left: 50%; height: var(--shadow-mark-size); aspect-ratio: 1; width: var(--shadow-mark-size); object-fit: contain; transform: translate(-50%, -50%); opacity: var(--hero-logo-bg-opacity); pointer-events: none; }
.gc-bg svg { width: 100%; height: 100%; }
.gc-state { text-transform: lowercase; }
.gc-team { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; }
.gc-team.away { flex-direction: row-reverse; justify-self: end; text-align: right; }
.gc-team.home { justify-self: start; }
.gc-logo { flex: 0 0 56px; display: grid; place-items: center; } .gc-logo img, .gc-logo svg { width: 56px; height: 56px; }
.gc-names { display: flex; flex-direction: column; min-width: 0; }
.gc-city { font: 700 11px/14px var(--font-ui); font-variant: small-caps; text-transform: lowercase; letter-spacing: .06em; }
.gc-nick { font: 900 22px/24px var(--font-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-rec { font-size: 11px; opacity: .8; }
.gc-score { position: relative; font: 700 48px/52px var(--font-display); font-variant-numeric: tabular-nums; min-width: 64px; text-align: center; border-radius: 6px; }
.gc-score.is-flash { animation: gc-flash .4s ease-out; }
@keyframes gc-flash { 0% { background: var(--fb-bone); color: var(--fb-charcoal); } 100% { background: transparent; } }
.gc-mid { position: relative; text-align: center; min-width: 140px; padding: 0 22px; }
.gc-clock { font: 700 18px/22px var(--font-display); font-variant-numeric: tabular-nums; }
.gc-state { font: 700 11px/14px var(--font-ui); font-variant: small-caps; text-transform: lowercase; letter-spacing: .06em; }
.gc-down { font: 700 12px/16px var(--font-ui); font-variant: small-caps; letter-spacing: .04em; min-height: 16px; }
.gc-ball { position: absolute; top: 50%; left: 0; width: 14px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--fb-bone); transition: left .3s ease; }
.gc-ball.is-home { left: calc(100% - 14px); }
.gc-mid .poss { display: none; }
.gc-grid { display: grid; gap: 16px; }
@media (min-width: 1024px) { .gc-grid { grid-template-columns: 320px minmax(0, 1fr); align-items: start; } }
.gc-left, .gc-main { display: grid; gap: 12px; min-width: 0; }
.gc-card, .gc-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 10px 12px; min-width: 0; }
.gc-cap { display: flex; justify-content: space-between; font: 700 12px/16px var(--font-ui); font-variant: small-caps; text-transform: lowercase; letter-spacing: .06em; color: var(--fb-cap); margin-bottom: 6px; }
.gc-tabs { display: flex; gap: 4px; }
.gc-tab { flex: 1; padding: 8px 4px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: inherit; font: 700 12px/16px var(--font-ui); text-transform: uppercase; letter-spacing: .04em; }
.gc-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--fb-white); }
.gc-last-head { display: flex; justify-content: space-between; font-weight: 700; font-size: 13px; }
.gc-last-clock { color: var(--text-2); font-variant-numeric: tabular-nums; }
.gc-last-body { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; font-size: 13px; }
.gc-drive { display: flex; gap: 8px; align-items: center; font: 700 12px/16px var(--font-ui); padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--fb-divider); }
.gc-drive-time { margin-left: auto; color: var(--text-2); font-variant-numeric: tabular-nums; }
.gc-left .mini-field { margin: 0; }
.gc-left .feed { max-height: 70vh; overflow: auto; }
.gc-line { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.gc-line th { font: 700 12px/16px var(--font-ui); color: var(--fb-cap); text-align: center; }
.gc-line td { padding: 6px 4px; text-align: center; border-top: 1px solid var(--fb-divider); }
.gc-line td.gc-line-team { text-align: left; white-space: nowrap; }
.gc-line-team img, .gc-line-team svg { width: 24px; height: 24px; vertical-align: middle; }
.gc-venue { margin-top: 8px; padding: 6px 8px; font-size: 12px; border-top: 1px solid var(--fb-divider); color: var(--text-2); }
.gc-bar-row { display: grid; grid-template-columns: 1fr 44px 84px 44px 1fr; align-items: center; gap: 8px; padding: 4px 0; font-variant-numeric: tabular-nums; }
.gc-bar { height: 8px; border-radius: 4px; background: var(--fb-divider); display: flex; overflow: hidden; }
.gc-bar.away { justify-content: flex-end; }
.gc-bar i { display: block; height: 100%; border-radius: 4px; }
.gc-bar.away i { background: var(--away-color); } .gc-bar.home i { background: var(--home-color); }
.gc-bar-n { font-weight: 700; text-align: center; }
.gc-bar-l { font: 700 11px/14px var(--font-ui); font-variant: small-caps; text-transform: lowercase; color: var(--fb-cap); text-align: center; }
.gc-leaders { display: grid; gap: 16px; }
@media (min-width: 640px) { .gc-leaders { grid-template-columns: 1fr 1fr; } }
.gc-lead { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.gc-lead th { font: 700 12px/16px var(--font-ui); font-variant: small-caps; text-transform: lowercase; color: var(--fb-cap); text-align: left; padding: 4px; }
.gc-lead td { padding: 5px 4px; border-top: 1px solid var(--fb-divider); }
.gc-lead .num { text-align: right; }
.gc-none { color: var(--text-2); }
.mini-field .mf-move { transition: transform .9s ease; }
@media (prefers-reduced-motion: reduce) { .mini-field .mf-move, .gc-ball { transition: none; } .gc-score.is-flash { animation: none; } }
@media (max-width: 1023px) {
  .gc-head { height: auto; min-height: 98px; grid-template-columns: 1fr auto 1fr; grid-template-areas: "at mid ht" "as mid hs"; gap: 4px 8px; padding: 8px; }
  .gc-team.away { grid-area: at; justify-self: center; flex-direction: column; text-align: center; } .gc-team.home { grid-area: ht; justify-self: center; flex-direction: column; text-align: center; }
  #sb_away { grid-area: as; } #sb_home { grid-area: hs; } .gc-mid { grid-area: mid; min-width: 0; padding: 0 16px; }
  .gc-logo, .gc-logo img, .gc-logo svg { width: 36px; height: 36px; flex-basis: 36px; }
  .gc-nick { font-size: 14px; line-height: 16px; max-width: 30vw; } .gc-score { font-size: 32px; line-height: 36px; min-width: 0; }
  .gc-rec { display: none; }
}
@media (max-width: 480px) { .mini-field { height: 56px; } }

/* Gamecast pieces: home-colour tab pill, 36px drive band in the driving team's primary, play-row text colours. */
#live_game .gc-tab[aria-selected="true"] { background: var(--home-color); border-color: var(--home-color); }
.gc-drive.is-home, .gc-drive.is-away { height: 36px; margin: -10px -12px 6px; padding: 0 12px; border-bottom: 0; border-radius: var(--r-panel) var(--r-panel) 0 0; color: var(--fb-white); background: var(--home-color); }
.gc-drive.is-away { background: var(--away-color); }
.gc-drive.is-home .gc-drive-time, .gc-drive.is-away .gc-drive-time { color: inherit; opacity: .8; }
.gc-drive .gc-drive-team { background: transparent; }
.feed .tag-gain { background: transparent; color: #4CAF50; padding-left: 0; }
.feed .tag-loss { background: transparent; color: #E5534B; padding-left: 0; }
.feed .tag-zero { background: transparent; color: rgba(255,255,255,.5); padding-left: 0; }
.gc-q { font: 700 11px/14px var(--font-ui); font-variant: small-caps; text-transform: lowercase; letter-spacing: .06em; }
.gc-drive-city { font: 700 12px/16px var(--font-ui); text-transform: uppercase; }
.feed .gc-qdiv { height: 24px; min-height: 24px; padding: 0 12px; background: transparent; border-left: 0; display: flex; align-items: center; justify-content: center; font: 700 11px/14px var(--font-ui); letter-spacing: .08em; color: var(--fb-cap); border-top: 1px solid var(--fb-divider); border-bottom: 1px solid var(--fb-divider); list-style: none; }
/* Gamecast chat column (local-only post tonight). */
@media (min-width: 1280px) { .gc-grid { grid-template-columns: 320px minmax(0, 1fr) 300px; } }
.gc-chat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); display: flex; flex-direction: column; min-width: 0; align-self: stretch; }
.gc-chat-form { padding: 12px; border-bottom: 1px solid var(--fb-divider); }
.gc-chat-form textarea { width: 100%; resize: none; background: var(--panel-raised); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px; font: 14px/20px var(--font-ui); }
.gc-chat-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.gc-chat-count { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.gc-chat-post { border: 0; border-radius: 999px; padding: 6px 16px; background: var(--home-color); color: var(--fb-white); font: 700 13px/16px var(--font-ui); }
.gc-chat-log { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; }
.gc-post { display: flex; gap: 10px; padding: 12px; border-bottom: 1px solid var(--fb-divider); }
.gc-av { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; object-fit: contain; background: var(--panel-raised); }
.gc-av-shield { display: grid; place-items: center; font: 700 10px/1 var(--font-ui); color: var(--fb-white); background: var(--border); }
.gc-post-body { min-width: 0; }
.gc-post-head { display: flex; gap: 6px; font-size: 13px; white-space: nowrap; overflow: hidden; }
.gc-post-name { overflow: hidden; text-overflow: ellipsis; }
.gc-post-meta { color: var(--text-2); }
.gc-post-text { margin: 2px 0 0; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.gc-chat-empty { padding: 12px; color: var(--text-2); font-size: 13px; margin: 0; }
/* Flat gamecast panels: 1px #2A3140 rules, square stat bars, tags at most 2px radius. */
#live_game .gc-card, #live_game .gc-panel, #live_game .gc-chat { background: transparent; border: 0; border-top: 1px solid #2A3140; border-radius: 0; }
#live_game .gc-bar, #live_game .gc-bar i { border-radius: 0; }
#live_game .feed .tag-gain, #live_game .feed .tag-loss, #live_game .feed .tag-zero, #live_game .feed .tag-pen, #live_game .feed .tag-to, #live_game .feed .tag-fg, #live_game .feed .tag-score { border-radius: 2px; }
#live_game .gc-lead th, #live_game .gc-line th { background: rgba(255,255,255,.04); }
#live_game .gc-lead td, #live_game .gc-line td { border-top-color: #2A3140; }
/* Box tables: fixed layout, no overflow, 36px stat columns, stack under 720px centre width. */
.gc-main { container-type: inline-size; }
/* Team leaders: mobile-first, 1 column (max 420px) on phones; DET left / PHI right from 900px viewport, 420px max each, 24px gap. */
#live_game .gc-leaders { grid-template-columns: minmax(0, 420px); gap: 24px; justify-content: start; }
@media (min-width: 900px) { #live_game .gc-leaders { grid-template-columns: repeat(2, minmax(0, 420px)); } }
#live_game .gc-lead { table-layout: fixed; width: 100%; font-size: 12px; }
#live_game .gc-lead th, #live_game .gc-lead td { height: 24px; padding: 0 6px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#live_game .gc-lead th { font-size: 10px; }
#live_game .gc-lead th.num, #live_game .gc-lead td.num { width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
#live_game .gc-lead th:not(.num) { width: auto; }
#live_game .gc-lead-passing th:nth-child(2), #live_game .gc-lead-passing td:nth-child(2) { width: 48px; }
#live_game .gc-lead-punting th:nth-child(4), #live_game .gc-lead-punting td:nth-child(4) { width: 46px; }
@media (max-width: 480px) { #live_game .feed li > span[class*="tag-"] { font-size: 10px; padding: 0 3px; letter-spacing: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } }
#live_game .gc-st-row td, #live_game .gc-st-row th { white-space: nowrap; } #live_game .table-app { border-radius: 0; }
/* Full-bleed hero band; 300px left column with DRIVE CHART strip. */
#live_game .gc-head { width: 100vw; margin-left: calc(50% - 50vw); margin-top: -24px; border-radius: 0; padding-left: max(24px, calc(50vw - 696px)); padding-right: max(24px, calc(50vw - 696px)); }
body:has(#live_game) { overflow-x: clip; }
.gc-drive-city, .gc-drive-sum { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) { #live_game .gc-grid { grid-template-columns: 300px minmax(0, 1fr); } }
@media (min-width: 1280px) { #live_game .gc-grid { grid-template-columns: 300px minmax(0, 1fr) 300px; } }
.gc-strip { font: 700 11px/24px var(--font-ui); font-variant: small-caps; text-transform: lowercase; letter-spacing: .08em; color: var(--fb-cap); background: rgba(255,255,255,.05); padding: 0 12px; }
#live_game .gc-chat-log { overflow-y: auto; flex: none; scrollbar-width: thin; }
.gc-post-name { font-size: 13px; font-weight: 700; }
.gc-post-meta { font-size: 11px; }
.gc-chat-more { background: none; border: 0; color: var(--text-2); font: 700 12px/16px var(--font-ui); padding: 12px; text-align: left; text-decoration: underline; }
.gc-av-letter { display: grid; place-items: center; font: 900 14px/1 var(--font-ui); color: var(--fb-bone); background: var(--border); }
/* Drive strip: one flat neutral row (ref. Danny 8:46) */
.gc-drive.is-home, .gc-drive.is-away { height: 32px; margin: -10px -12px 6px; padding: 0 8px; gap: 7px; border: 0; border-radius: 0; background: var(--panel-raised); color: var(--text); align-items: center; }
.gc-drive-logo { width: 20px; height: 20px; object-fit: contain; flex: none; }
.gc-drive .gc-drive-city { font: 900 11px/1 var(--font-ui); text-transform: uppercase; letter-spacing: 0; color: var(--text); margin-right: 2px; min-width: 0; flex: 0 1 auto; }
.gc-drive-stat { display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; flex: none; }
.gc-drive-num { font: 700 14px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--drive-num, var(--text)); }
.gc-drive-lab { font: 600 10px/1 var(--font-ui); font-variant: all-small-caps; letter-spacing: .04em; color: var(--text-2); }
.gc-drive .gc-drive-time { margin-left: auto; opacity: 1; color: inherit; }
/* Mini field red zone + flat ball tag (8:49 call) */
.mini-field { border-radius: 0; }
.mini-field .mf-rz { fill: #8A0A0F; fill-opacity: .55; } .mini-field .mf-rz-edge { fill: #D0202A; }
/* Drive marker (Danny 9:35 PM; start mark dropped 9:53 PM): 16px trail bar + 9x16 inline SVG triangle flush on the bar end, solid #0B0E13 inside one .85 wrapper. CSS only, no images. */
.mini-field { position: relative; }
.mf-layer { position: absolute; left: 0; height: 0; width: 100%; pointer-events: none; }
.mf-layer i { position: absolute; left: 0; display: block; transform-origin: 0 50%; }
.mf-ptr { position: absolute; left: 0; top: 0; width: 100%; opacity: .85; }
.mf-bar { height: 16px; top: -8px; background: #0B0E13; transition: left .9s ease, width .9s ease; }
@media (prefers-reduced-motion: reduce) { .mf-bar { transition: none; } }
.mf-layer .mf-tri { position: absolute; left: 0; top: -8px; display: block; width: 9px; height: 16px; overflow: visible; transform-origin: 50% 50%; }
/* Hero band: one fixed deep red on every game (#7A1E22 vs white = 9.9:1), watermark logo behind each team's own lettering. */
:root { --hero-bg: #7A1E22; --hero-h: 98px; --hero-bone: #E8E1D3; }
.gc-head .gc-names { position: relative; }
.gc-head .gc-names > :not(.gc-bg) { position: relative; z-index: 1; }
.gc-head .gc-rec, .gc-head .gc-state, .gc-head .gc-city { color: var(--hero-bone); opacity: 1; }
@media (max-width: 1023px) { :root { --hero-h: 96px; } }

/* Play rows + layout batch (2026-10-23): 360px left column, fixed 64px tag slot, red TURNOVER, square tabs. */
@media (min-width: 1024px) { #live_game .gc-grid { grid-template-columns: 360px minmax(0, 1fr); } }
@media (min-width: 1280px) { #live_game .gc-grid { grid-template-columns: 360px minmax(0, 1fr) 300px; } }
#live_game { --fb-tag-to-bg: #B3261E; --fb-tag-to-fg: #FFFFFF; }
#live_game .feed li { column-gap: 8px; }
#live_game .feed li.turnover .f-text { color: var(--fb-bone); }
#live_game .feed .f-gain, #live_game .gc-last-body > span:first-child { flex: 0 0 64px; width: 64px; min-width: 64px; max-width: 64px; box-sizing: border-box; white-space: nowrap; text-align: left; justify-self: start; font-variant-numeric: tabular-nums; overflow: visible; }
#live_game .feed .f-gain[class*="tag-"], #live_game .gc-last-body > span[class*="tag-"] { padding: 0 4px; font-size: 11px; letter-spacing: 0; border-radius: 0; }
#live_game .feed .tag-pen, #live_game .gc-last-body .tag-pen { background: #E09F3E; color: #1A1714; }
#live_game .gc-last-body { gap: 8px; }
#live_game .gc-tab { border-radius: 0; font-size: clamp(9px, 0.85vw, 12px); letter-spacing: 0; padding: 8px 2px; white-space: nowrap; min-width: 0; }
/* Possession football: 22x14, #7A4A2B with #0B0E13 outline and white laces; JS places it 8px off the possessing score. */
#live_game .gc-mid { position: static; }
#live_game .gc-head .gc-ball { position: absolute; left: 0; top: 0; margin: 0; width: 22px; height: 14px; box-sizing: border-box; border-radius: 50%; background: #7A4A2B; border: 1px solid #0B0E13; transition: none; z-index: 2; }
#live_game .gc-head .gc-ball::before { content: ""; position: absolute; left: 6px; right: 6px; top: 5.5px; height: 1px; background: #FFFFFF; }
#live_game .gc-head .gc-ball::after { content: ""; position: absolute; left: 7px; width: 6px; top: 4px; height: 4px; background: repeating-linear-gradient(90deg, #FFFFFF 0 1px, transparent 1px 2.5px); }
#live_game .gc-head .gc-ball[hidden] { display: none; }
#live_game .gc-head .gc-ball.is-home { left: 0; }
/* Hero timeout dots (Danny 9:59 PM): three 6px dots, 6px gaps, centred 6px under each score; used = 25%. */
.gc-tos { position: absolute; left: 50%; top: 100%; margin-top: 6px; transform: translateX(-50%); display: flex; gap: 6px; pointer-events: none; }
.gc-tos i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #E8E1D3; }
.gc-tos i.is-used { opacity: .25; }

/* Gamecast scores ticker (game page only; Danny's reference shots, 100% scale, Research's px as CSS px).
   Rows: 24px HIDE tab, 61px #101010 bar with a 1px #484848 line, 15px #212121 blank strip.
   Columns: 135px league block, 148px game cells with a 2px divider. Play tile #7A1E22, possession dot bone #E8E1D3. */
.app-ticker.app-ticker--gc { background: transparent; border: 0; color: #FFFFFF; }
.app-ticker--gc .score-ticker-shell { position: relative; isolation: isolate; display: grid; grid-template-columns: 135px 26px minmax(0, 1fr) 26px; grid-template-rows: 24px 61px 15px; min-height: 0; max-width: none; padding: 0; transition: none; }
.app-ticker--gc .score-ticker-shell::before { content: ""; grid-row: 2; grid-column: 1 / -1; z-index: -1; background: #101010; border-bottom: 1px solid #484848; box-sizing: border-box; }
.app-ticker--gc .score-ticker-shell::after { content: ""; grid-row: 3; grid-column: 1 / -1; background: #212121; }
.app-ticker--gc .score-ticker-hide { grid-row: 1; grid-column: 1; align-self: end; height: 24px; width: 135px; writing-mode: horizontal-tb; transform: none; background: #0B0E13; color: #FFFFFF; font: 700 12px/24px var(--font-ui); font-variant: normal; letter-spacing: .08em; text-transform: uppercase; border-radius: 4px 4px 0 0; border: 1px solid #484848; border-bottom: 0; }
.app-ticker--gc .score-ticker-league { grid-row: 2; grid-column: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 14px; border-bottom: 1px solid #484848; }
.app-ticker--gc .score-ticker-league b { font: 800 20px/22px var(--font-display); letter-spacing: .02em; color: #FFFFFF; }
.app-ticker--gc .score-ticker-league span { font: 600 12px/14px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: #E8E1D3; }
.app-ticker--gc .score-ticker-arrow { grid-row: 2; border: 0; border-bottom: 1px solid #484848; color: #FFFFFF; }
.app-ticker--gc [data-ticker-prev] { grid-column: 2; }
.app-ticker--gc [data-ticker-next] { grid-column: 4; }
.app-ticker--gc .score-ticker-track { grid-row: 2; grid-column: 3; height: 60px; gap: 2px; background: #212121; }
.app-ticker--gc .score-ticker-game { position: relative; overflow: hidden; flex: 0 0 148px; height: 60px; box-sizing: border-box; padding: 6px 10px 5px; border: 0; gap: 0; justify-content: space-between; background: #101010; box-shadow: none; opacity: 1; }
.app-ticker--gc .score-ticker-game.is-group-start { border: 0; }
.app-ticker--gc .score-ticker-game:hover { background: #1A1A1A; }
.app-ticker--gc .score-ticker-team { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px; height: 18px; font: 700 13px/18px var(--font-ui); }
.app-ticker--gc .score-ticker-rec { display: none; }
.app-ticker--gc .score-ticker-abbr { display: flex; align-items: center; gap: 0; font-weight: 700; letter-spacing: .02em; }
.app-ticker--gc .score-ticker-poss { margin-left: auto; width: 6px; height: 6px; background: #E8E1D3; }
.app-ticker--gc .score-ticker-poss.is-rz { background: #E8E1D3; box-shadow: 0 0 0 2px #7A1E22; }
.app-ticker--gc .score-ticker-score { min-width: 3ch; font: 700 13px/18px var(--font-ui); font-variant-numeric: tabular-nums; text-align: right; }
.app-ticker--gc .score-ticker-game.is-final .score-ticker-team { color: rgba(255, 255, 255, .62); }
.app-ticker--gc .score-ticker-game.is-final .score-ticker-score.is-winner, .app-ticker--gc .score-ticker-game.is-final .score-ticker-team:has(.is-winner) { color: #FFFFFF; }
.app-ticker--gc .score-ticker-meta { justify-content: flex-end; padding: 0; height: 14px; }
.app-ticker--gc .score-ticker-time { font: 600 11px/14px var(--font-ui); letter-spacing: .02em; color: #FFFFFF; }
.app-ticker--gc .score-ticker-time.is-final-label { color: #E8E1D3; }
/* Play tile: covers the whole cell, slides down from the top, holds 3 s (app.js HOLD_GC), slides back up. */
.app-ticker--gc .score-ticker-band, .app-ticker--gc .score-ticker-band.k-gain, .app-ticker--gc .score-ticker-band.k-score, .app-ticker--gc .score-ticker-band.k-to, .app-ticker--gc .score-ticker-band.k-pen { height: 100%; z-index: 2; justify-content: center; padding: 0 8px; background: #7A1E22; color: #FFFFFF; font: 700 13px/18px var(--font-ui); text-align: center; transform: translateY(-100%); transition: transform .25s ease-out; }
.app-ticker--gc .score-ticker-band.is-on { transform: translateY(0); }
.app-ticker--gc.is-collapsed .score-ticker-shell { grid-template-rows: 24px; }
.app-ticker--gc.is-collapsed .score-ticker-shell::before, .app-ticker--gc.is-collapsed .score-ticker-shell::after { display: none; }
.app-ticker--gc.is-collapsed .score-ticker-hide { padding: 0; flex: none; }
@media (prefers-reduced-motion: reduce) { .app-ticker--gc .score-ticker-band { transition: none; } }
/* "PAT NO GOOD" is the one tag wider than the 64px slot in Inter 11px: set it in the condensed display face so it fits whole. */
#live_game .feed .f-gain.tag-long, #live_game .gc-last-body > span.tag-long { font: 700 12px/18px var(--font-display); letter-spacing: 0; overflow: visible; text-overflow: clip; }

/* Hero band layout lock (Danny's reference, 100% scale): fixed-width blocks so nothing shifts as scores/clock/downs change.
   Team name blocks 220px (long nicknames shrink to fit, live.js fitText), score columns fit "888" (76px; "888" measures 72px), centre 150px (longest line "4th & GOAL at XXX 10" = 135px). */
@media (min-width: 1024px) { #live_game .gc-head { grid-template-columns: minmax(0, 1fr) 76px 150px 76px minmax(0, 1fr); column-gap: 20px; } }
#live_game .gc-head .gc-score { width: 76px; min-width: 0; box-sizing: border-box; font-variant-numeric: tabular-nums; }
#live_game .gc-head .gc-names { width: 220px; flex: 0 0 220px; overflow: hidden; }
#live_game .gc-head .gc-nick { overflow: visible; text-overflow: clip; }
#live_game .gc-head .gc-mid { width: 150px; min-width: 0; padding: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; }
#live_game .gc-head .gc-down { width: 150px; height: 16px; white-space: nowrap; overflow: hidden; text-align: center; }
#live_game .gc-head .gc-odds { width: 150px; margin-top: 4px; font: 600 11px/14px var(--font-ui); letter-spacing: .02em; color: var(--hero-bone); white-space: nowrap; text-align: center; }
@media (min-width: 1024px) { #live_game .gc-head .gc-team { align-self: start; margin-top: 6px; } }
.gc-picks { position: absolute; top: calc(100% + 2px); display: flex; gap: 10px; }
.gc-team.away .gc-picks { right: 0; } .gc-team.home .gc-picks { left: 0; }
.gc-pick { display: inline-flex; align-items: center; gap: 4px; font: 600 10px/12px var(--font-ui); color: var(--hero-bone); }
.gc-pick-c { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #E8E1D3; color: #7A1E22; font: 800 11px/1 var(--font-ui); }
@media (max-width: 1023px) { #live_game .gc-head .gc-names { width: auto; flex: 1 1 auto; } #live_game .gc-head .gc-mid, #live_game .gc-head .gc-down, #live_game .gc-head .gc-odds { width: auto; } .gc-picks { display: none; } }
/* Portrait art bakes in its own 2px bone ring and #7A1E22 disc: no CSS ring, border or background here (avoids a double ring). */
.gc-pick-c.gc-pick-img { object-fit: cover; padding: 0; border: 0; box-shadow: none; outline: 0; background: none; }
/* Halftime label (display only): bone, same font and size as the clock it replaces; amber stays for a running clock. */
.score-ticker-time.is-half, .game-card-clock.is-half, .app-ticker--gc .score-ticker-time.is-half, #sb_clock.is-half, .gc-clock.is-half { color: #E8E1D3; }

/* Ticker r2 (Game Art Director, 10:39 PM; columns measured from Danny's 100% shot 6521ab70, cell-relative ink x):
   logo 10-19, abbr from 24, possession dot 115-119 (5px), score right edge 137, time right edge 137. Bar 61px + 1px #484848 line. No left arrow. */
.app-ticker--gc .score-ticker-shell { grid-template-columns: 135px minmax(0, 1fr) 26px; grid-template-rows: 24px 62px 15px; }
.app-ticker--gc .score-ticker-track { grid-column: 2; height: 61px; }
.app-ticker--gc [data-ticker-next] { grid-column: 3; }
.app-ticker--gc .score-ticker-game { height: 61px; padding: 6px 10px 4px; }
.app-ticker--gc .score-ticker-logo { margin-left: -1px; }
.app-ticker--gc .score-ticker-team { grid-template-columns: 14px minmax(0, 1fr) auto; gap: 0; height: 18px; }
.app-ticker--gc .score-ticker-logo { width: 12px; height: 12px; display: flex; align-items: center; }
.app-ticker--gc .score-ticker-logo svg, .app-ticker--gc .score-ticker-logo img { width: 12px; height: 12px; }
.app-ticker--gc .score-ticker-poss { width: 5px; height: 5px; margin-right: 1px; }
.app-ticker--gc .score-ticker-score { min-width: 0; }
.app-ticker--gc .score-ticker-logo .team-mark { width: 12px; height: 12px; }

/* Hero band r2 (Danny's reference d574611b, 100% scale; offsets from band centre C, ink px):
   band 122px; score ink centres C-/+107.5, digit ink 39px tall from y16; logo 60px, outer edge C-/+224;
   names inner edge C-/+251 (27px from logo), city cap y25, nickname to y53; timeout dots y68-72; centre text from y14; odds y90-97. */
@media (min-width: 1024px) {
  #live_game .gc-head { height: 122px; min-height: 122px; align-items: start; grid-template-columns: minmax(0, 1fr) 91px 116px 91px minmax(0, 1fr); column-gap: 4px; }
  #live_game .gc-head .gc-score { width: 91px; margin-top: 5px; font-size: 56px; line-height: 56px; }
  #live_game .gc-head .gc-team { margin-top: 6px; gap: 27px; }
  #live_game .gc-head .gc-team.away { margin-right: 7px; } #live_game .gc-head .gc-team.home { margin-left: 7px; }
  #live_game .gc-head .gc-logo, #live_game .gc-head .gc-logo svg, #live_game .gc-head .gc-logo img { width: 60px; height: 60px; }
  #live_game .gc-head .gc-names { margin-top: 15px; }
  #live_game .gc-head .gc-logo { align-self: flex-start; margin-top: 0; }
  #live_game .gc-head .gc-mid { width: 116px; margin-top: 10px; overflow: visible; }
  #live_game .gc-head .gc-down, #live_game .gc-head .gc-odds { width: 150px; margin-left: -17px; margin-right: -17px; }
  #live_game .gc-head .gc-odds { position: absolute; top: 86px; left: 50%; margin: 0; transform: translateX(-50%); }
  .gc-picks { top: calc(100% + 10px); }
}

/* Hero band r3 (Senior FB Designer, 10:49 PM): pixel match to Danny's shot. Band is 122px of solid red (no 1px border).
   Columns unchanged from r2: scores 91px at C-/+107.5, centre 116px, names 220px (logo outer C-/+224, name inner C-/+251).
   The down line ("4TH & GOAL \00B7 NOR 10") is held to the 116px centre: never wraps, clipped, and live.js fitDown shrinks it (floor 10px). */
@media (min-width: 1024px) {
  #live_game .gc-head { border-bottom: 0; }
  #live_game .gc-head .gc-down { width: 116px; margin-left: 0; margin-right: 0; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: clip; }
}

/* Site-wide bottom scores bar (Danny, Oct 23 2026): fixed to the viewport bottom on every public page, not admin.
   61 px bar, HIDE tab on its top edge; the page gets 61 px of bottom padding so the bar never covers content. */
body.has-score-dock { padding-bottom: 61px; }
.app-ticker--dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; pointer-events: none; }
.app-ticker--dock .score-ticker-shell { pointer-events: auto; grid-template-rows: 24px 61px; margin: 0; width: 100%; }
.app-ticker--dock .score-ticker-shell::after { display: none; }
.app-ticker--dock .score-ticker-shell::before { border-bottom: 0; border-top: 1px solid #484848; }
.app-ticker--dock .score-ticker-league, .app-ticker--dock .score-ticker-arrow { border-bottom: 0; }
.app-ticker--dock .score-ticker-hide { pointer-events: auto; background: #0B0E13; } /* r29.1: HIDE rides the black strip, never the wine footer */
/* Ticker r3 (Danny's jr1 score bug reference, 2026-11-01): 148 x 60 cells on body gray, 18px logos, 16px bold abbr, record right,
   darker meta bar with the tip left and the SIM / TTV tag right. Twitch purple marks the game of the week. */
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url("../fonts/SourceSans3-Regular.woff2") format("woff2"); }
.app-ticker--gc .score-ticker-shell::before { background: #242424; }
.app-ticker--gc .score-ticker-track { gap: 0; height: 60px; background: #242424; }
.app-ticker--gc .score-ticker-game { height: 60px; padding: 6px 10px 5px; background: #242424; border-left: 1px solid rgba(255, 255, 255, .1); }
.app-ticker--gc .score-ticker-game.is-group-start { border-left: 1px solid rgba(242, 244, 247, .22); }
.app-ticker--gc .score-ticker-game:hover, .app-ticker--gc .score-ticker-game:hover .score-ticker-meta { background: #2E2E2E; }
.app-ticker--gc .score-ticker-team { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px; font: 400 16px/18px "Source Sans 3", var(--font-ui); }
.app-ticker--gc .score-ticker-logo { width: 18px; height: 18px; margin-left: 0; }
.app-ticker--gc .score-ticker-logo svg, .app-ticker--gc .score-ticker-logo img, .app-ticker--gc .score-ticker-logo .team-mark { width: 18px; height: 18px; object-fit: contain; }
.app-ticker--gc .score-ticker-abbr { font-weight: 800; letter-spacing: .02em; }
.app-ticker--gc .score-ticker-rec { display: block; min-width: 3ch; font: 500 11px/14px "Source Sans 3", var(--font-ui); letter-spacing: .02em; color: #A8A8A8; text-align: right; }
.app-ticker--gc .score-ticker-score { min-width: 3ch; font: 800 16px/18px "Source Sans 3", var(--font-ui); font-variant-numeric: tabular-nums; }
.app-ticker--gc .score-ticker-meta { justify-content: space-between; gap: 6px; height: auto; margin: 0 -10px -5px; padding: 2px 10px 3px; background: #1A1A1A; font: 500 11px/14px "Source Sans 3", var(--font-ui); letter-spacing: .02em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: #A8A8A8; }
.app-ticker--gc .score-ticker-time, .app-ticker--gc .score-ticker-time.is-final-label, .app-ticker--gc .score-ticker-time.is-half { font: inherit; letter-spacing: inherit; color: #A8A8A8; }
.app-ticker--gc .score-ticker-game.is-live .score-ticker-time:not(.is-half) { color: #F5B942; }
.score-ticker-net { white-space: nowrap; }
.score-ticker-net.is-ttv { color: #9146FF; font-weight: 800; }
/* Red play tile (gamecast only): slides up into view and back down. */
/* r23: scoring plays (TD of any kind, XP, 2PT, FG, safety = feed kind 'score') get a green tile, bone text; all else stays red. */
.app-ticker--gc .score-ticker-band.k-score { background: #1E6B3A; color: #E8E1D3; }
.app-ticker--game .score-ticker-band, .app-ticker--game .score-ticker-band.k-gain, .app-ticker--game .score-ticker-band.k-score, .app-ticker--game .score-ticker-band.k-to, .app-ticker--game .score-ticker-band.k-pen { transform: translateY(100%); }
.app-ticker--game .score-ticker-band.is-on { transform: translateY(0); }
/* Hero watermark: whole logo, 110px tall (6px inset in the 122px band), centred on the band, 20% opacity, same horizontal centre. */
#live_game .gc-head .gc-names { position: static; }
#live_game .gc-head .gc-bg { height: var(--shadow-mark-size); width: var(--shadow-mark-size); aspect-ratio: 1; object-fit: contain; top: 55px; left: 50%; transform: translate(-50%, -50%); opacity: var(--hero-logo-bg-opacity); }
@media (min-width: 1024px) {
  #live_game .gc-head .gc-team.away .gc-bg { left: 110px; }
  #live_game .gc-head .gc-team.home .gc-bg { left: calc(100% - 110px); }
}
@media (max-width: 1023px) { #live_game .gc-head .gc-bg { top: 59.5px; } }

/* Player page (player_page_spec.md): ESPN PlayerHeader geometry measured at 1440 and 390, FB27 colours. Hero band #7A1E22, bone #E8E1D3. */
.pp-hero { width: 100vw; margin-left: calc(50% - 50vw); margin-top: -24px; background: #7A1E22; color: #E8E1D3; }
.pp-hero-in { position: relative; display: grid; grid-template-columns: 150px 1fr; grid-template-areas: "photo id" "photo bio" "stats stats"; column-gap: 5px; min-height: 327px; padding-bottom: 12px; }
.pp-photo { grid-area: photo; width: 150px; height: 196px; display: flex; align-items: center; justify-content: center; }
.pp-photo img, .pp-photo svg { display: block; width: 150px; height: 150px; object-fit: contain; opacity: 1; }
.pp-id { grid-area: id; padding-top: 4px; min-width: 0; }
.pp-name { margin: 0; padding-right: 12px; color: #E8E1D3; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0; }
.pp-first { display: block; font: 200 18px/24px var(--font-ui); }
.pp-last { display: block; font: 700 18px/24px var(--font-ui); }
.pp-team-info { display: flex; flex-wrap: wrap; gap: 0; margin: 8px 0 0; padding: 2px 12px 0 20px; list-style: none; font: 400 12px/18px var(--font-ui); }
.pp-team-info li + li::before { content: "•"; margin: 0 6px; opacity: .6; }
.pp-team-link { color: inherit; text-decoration: none; }
.pp-team-link:hover, .pp-team-link:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.pp-pos-long { display: none; }
.pp-bio { grid-area: bio; margin: 12px 0 0; font: 400 12px/18px var(--font-ui); }
.pp-bio div { display: flex; gap: 8px; margin-bottom: 5px; }
.pp-bio dt { width: 80px; flex: none; font-weight: 400; text-transform: uppercase; color: rgba(232, 225, 211, .75); }
.pp-bio dd { margin: 0; font-weight: 700; }
.pp-bio-x { display: none !important; }
.pp-dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #E8E1D3; }
.pp-stats { grid-area: stats; margin: 13px 10px 0 12px; height: 107px; border: 1px solid rgba(232, 225, 211, .35); border-radius: 8px; overflow: hidden; background: rgba(11, 14, 19, .18); }
.pp-stats-h { margin: 0; height: 16px; background: rgba(232, 225, 211, .16); color: #E8E1D3; font: 700 11px/16px var(--font-ui); text-align: center; text-transform: uppercase; letter-spacing: 0; }
.pp-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 13px 16px 0; list-style: none; }
.pp-stat { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.pp-stat-l { font: 400 11px/13px var(--font-ui); text-transform: uppercase; color: rgba(232, 225, 211, .85); }
.pp-stat-l abbr { text-decoration: none; }
.pp-stat-link { color: inherit; text-decoration: none; }
.pp-stat-link:hover, .pp-stat-link:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: #E8E1D3; text-underline-offset: 2px; }
.pp-stat-v { padding: 4px 0; font: 600 28px/34px var(--font-ui); color: #E8E1D3; font-variant-numeric: tabular-nums; }
.pp-stat-r { font: 400 11px/13px var(--font-ui); color: rgba(232, 225, 211, .75); white-space: nowrap; }
.pp-na { color: rgba(232, 225, 211, .4); font-weight: inherit; }
.pp-stat-v.pp-na { color: rgba(232, 225, 211, .4); }
.pp-na-note { font: 400 10px/13px var(--font-ui); color: var(--text-muted, rgba(232, 225, 211, .6)); }
.pp-tabs { background: var(--surface, #14171C); border-bottom: 1px solid rgba(232, 225, 211, .12); overflow-x: auto; }
.pp-tabs ul { display: flex; margin: 0 auto; padding: 0 0 0 8px; list-style: none; max-width: 1240px; }
.pp-tabs a { display: block; padding: 0 8px; height: 44px; font: 400 16px/44px var(--font-ui); color: var(--text, #E8E1D3); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.pp-tabs a.is-active, .pp-tabs a.is-active:hover, .pp-tabs a.is-active:focus-visible { border-bottom-color: #7A1E22; color: var(--text, #E8E1D3); font-weight: 600; }
.pp-tabs a:hover, .pp-tabs a:focus-visible { border-bottom-color: rgba(232, 225, 211, .5); }
.pp-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 10px 0; margin: 0 calc(-1 * var(--s3)); }
.pp-card { background: var(--surface, #14171C); border-radius: 8px; margin-bottom: 20px; overflow: hidden; }
.pp-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.pp-card-h h2 { margin: 0; font: 500 14px/20px var(--font-ui); text-transform: none; letter-spacing: 0; }
.pp-card-more { font: 400 14px/20px var(--font-ui); color: rgba(232, 225, 211, .6); text-decoration: none; }
.pp-card-more:hover, .pp-card-more:focus-visible { color: rgba(232, 225, 211, .6); text-decoration: underline; text-decoration-color: #E8E1D3; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pp-card-b { padding: 0 16px 16px; }
.pp-rt-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(232, 225, 211, .15); }
.pp-rt-top div { display: flex; flex-direction: column; }
.pp-rt-l { font: 400 12px/18px var(--font-ui); color: rgba(232, 225, 211, .6); text-transform: uppercase; }
.pp-rt-v { font: 600 28px/34px var(--font-ui); color: #E8E1D3; font-variant-numeric: tabular-nums; }
.pp-rt-g { margin: 0; padding: 12px 0 6px; font: 500 13px/18px var(--font-ui); color: #E8E1D3; text-transform: none; letter-spacing: 0; border-top: 1px solid rgba(232, 225, 211, .15); }
.pp-rt-top + .pp-rt-g { border-top: 0; }
.pp-rt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 24px; margin: 0 0 8px; padding: 0; list-style: none; }
.pp-rt-list li { display: grid; grid-template-columns: 160px 1fr 28px; align-items: center; gap: 8px; min-height: 24px; }
.pp-rt-list .pp-rt-l { text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-rt-bar { height: 4px; border-radius: 2px; background: rgba(232, 225, 211, .15); overflow: hidden; }
.pp-rt-bar i { display: block; height: 100%; background: #E8E1D3; }
@media (max-width: 1023px) { .pp-rt-list li { grid-template-columns: 120px 1fr 28px; padding: 3px 0; } .pp-rt-list .pp-rt-l { white-space: normal; overflow: visible; text-overflow: clip; line-height: 16px; overflow-wrap: anywhere; } }
.pp-rt-list b { font: 600 12px/18px var(--font-ui); color: #E8E1D3; text-align: right; font-variant-numeric: tabular-nums; }
.pp-table-wrap { overflow-x: auto; }
.pp-table { width: 100%; border-collapse: collapse; font: 400 13px/18px var(--font-ui); font-variant-numeric: tabular-nums; }
.pp-table th, .pp-table td { padding: 7px 8px; border-top: 1px solid rgba(232, 225, 211, .1); white-space: nowrap; text-align: left; }
.pp-table thead th { font: 600 11px/14px var(--font-ui); text-transform: uppercase; color: rgba(232, 225, 211, .7); }
.pp-table th abbr { text-decoration: none; }
.pp-table .num { text-align: right; }
.pp-table tbody th { font-weight: 400; padding-left: 16px; }
.pp-log-wk { color: rgba(232, 225, 211, .6); margin-right: 4px; }
.pp-log-opp { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.pp-res-w, .pp-res-l, .pp-res-t { color: #E8E1D3; font-weight: 700; } /* W/L/T bone, no result chrome (AD r26) */
.pp-empty { color: rgba(232, 225, 211, .6); font-size: 13px; padding: 12px 16px; margin: 0; }
.pp-next { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; color: inherit; text-decoration: none; text-align: center; }
.pp-next-team { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pp-next-when { display: flex; flex-direction: column; font-size: 12px; }
.pp-biolist { margin: 0; padding: 0 16px 12px; font: 400 13px/18px var(--font-ui); }
.pp-biolist div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(232, 225, 211, .1); }
.pp-biolist dt { font-weight: 400; color: rgba(232, 225, 211, .7); }
.pp-biolist dd { margin: 0; font-weight: 600; text-align: right; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
.pp-actions:empty { display: none; }
.pp-sign { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pp-cat { margin: 16px 16px 6px; font: 600 13px/18px var(--font-ui); text-transform: uppercase; }
.pp-filter select { background: transparent; color: inherit; border: 1px solid rgba(232, 225, 211, .3); border-radius: 4px; font: 400 13px/18px var(--font-ui); padding: 4px 8px; }
.pp-na-legend { margin: 8px 16px 0; font-size: 11px; color: rgba(232, 225, 211, .6); }
.pp-glossary { margin: 16px; padding: 12px 16px; border: 1px solid rgba(232, 225, 211, .15); border-radius: 6px; color: rgba(232, 225, 211, .6); }
.pp-glossary h3 { margin: 0 0 8px; font: 700 13px/18px var(--font-ui); text-transform: none; color: rgba(232, 225, 211, .6); }
.pp-glossary dl { margin: 0; columns: 1; font: 400 12px/18px var(--font-ui); }
.pp-glossary div { display: flex; gap: 4px; break-inside: avoid; }
.pp-glossary dt { font-weight: 700; } .pp-glossary dd { margin: 0; }
.pp-gloss-link { color: inherit; }
@media (min-width: 768px) {
  .pp-glossary dl { columns: 3; }
  .pp-layout { margin: 0; }
}
@media (min-width: 1024px) {
  .pp-hero-in { display: block; max-width: 1440px; height: 160px; min-height: 0; margin: 0 auto; padding: 0; border-bottom: 1px solid rgba(232, 225, 211, .15); }
  .pp-photo { position: absolute; left: 70px; top: 0; width: 220px; height: 160px; }
  .pp-photo img, .pp-photo svg { width: 150px; height: 150px; }
  .pp-id { position: absolute; left: 295px; top: 26px; width: 330px; padding: 0; }
  .pp-first { font: 200 28px/34px var(--font-ui); }
  .pp-last { font: 700 32px/34px var(--font-ui); }
  .pp-team-info { margin-top: 8px; }
  .pp-pos-long { display: inline; } .pp-pos-short { display: none; }
  .pp-bio { position: absolute; left: 625px; top: 0; height: 160px; margin: 0; padding: 7px 0 7px 13px; border-left: 1px solid rgba(232, 225, 211, .3); }
  .pp-bio div { margin: 0; height: 21px; }
  .pp-bio-x { display: flex !important; }
  .pp-bio dt { width: 66px; font-size: 10px; white-space: nowrap; }
  .pp-bio dd { white-space: nowrap; }
  .pp-stats { position: absolute; left: 964px; top: 26.5px; width: 354px; margin: 0; }
  .pp-layout { max-width: 1240px; margin: 0 auto; padding: 10px; grid-template-columns: minmax(0, 900px) 300px; }
}
/* Player name links sitewide (GAD): same colour and weight, no underline at rest, 1px bone underline on hover / keyboard focus. */
a.player-link, .leader-row .leader-name, .roster-card-name, a.link-quiet.player-link { color: inherit; font-weight: inherit; text-decoration: none; }
a.player-link:hover, a.player-link:focus-visible, .leader-row:hover .leader-name, .leader-row:focus-visible .leader-name, a.roster-card-name:hover, a.roster-card-name:focus-visible {
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: #E8E1D3; text-underline-offset: 2px; color: inherit;
}

/* Expert pick leader crown (art/experts/manifest.json "crown"): rotate(-45deg) at 10:30 on the portrait circle.
   Centre distance = R + crownH/2 - overlap; spec 28px -> 15.5px, 96px -> 53px. Band portraits are 18px, so the 28px values scale by 18/28:
   crown 6.43x4.5, overlap 1.29, distance 9.96px. */
.gc-pick-face { position: relative; display: inline-flex; width: 18px; height: 18px; flex: none; }
.gc-crown { position: absolute; z-index: 1; width: 6.43px; height: 4.5px; left: calc(9px - 9.96px * .7071 - 3.215px); top: calc(9px - 9.96px * .7071 - 2.25px); transform: rotate(-45deg); transform-origin: center; pointer-events: none; }
.expert_portrait { position: relative; width: 96px; height: 96px; }
.expert_crown { position: absolute; width: 34px; height: 24px; left: calc(48px - 53px * .7071 - 17px); top: calc(48px - 53px * .7071 - 12px); transform: rotate(-45deg); }
.expert_portrait_sm { position: relative; width: 28px; height: 28px; }
.expert_crown_sm { position: absolute; width: 10px; height: 7px; left: calc(14px - 15.5px * .7071 - 5px); top: calc(14px - 15.5px * .7071 - 3.5px); transform: rotate(-45deg); }

/* Team pages + Transactions (team_page_spec; player page look: #7A1E22 hero, dark cards, bone See All, no team-colour fills). Mobile first. */
.tp-hero-in { display: flex; align-items: center; gap: 12px; max-width: 1240px; margin: 0 auto; padding: 16px 12px; border-bottom: 1px solid rgba(232, 225, 211, .15); }
.tp-logo { flex: none; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.tp-logo img, .tp-logo svg { width: 64px; height: 64px; object-fit: contain; }
.tp-id { min-width: 0; }
.tp-name { margin: 0; color: #E8E1D3; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0; }
.tp-hero .pp-team-info { padding-left: 0; align-items: baseline; }
.tp-hero .pp-tabs { background: var(--surface, #14171C); }
.tp-layout .pp-main { min-width: 0; }
.tp-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-filters select { max-width: 100%; }
.tp-go { background: transparent; color: #E8E1D3; border: 1px solid rgba(232, 225, 211, .3); border-radius: 4px; font: 600 12px/18px var(--font-ui); padding: 4px 10px; }
.tp-go:hover, .tp-go:focus-visible { border-color: #E8E1D3; }
.tp-layout .pp-card-h { flex-wrap: wrap; }
.tp-freeze { position: relative; }
.tp-freeze tbody th, .tp-freeze thead th:first-child, .tp-freeze tfoot th { position: sticky; left: 0; z-index: 1; background: var(--surface, #14171C); }
.tp-freeze tbody th { min-width: 150px; }
.pp-table tfoot th, .pp-table tfoot td { font-weight: 700; border-top: 1px solid rgba(232, 225, 211, .3); }
.pp-table tfoot th { padding-left: 16px; }
.tp-pos { font-size: 11px; color: rgba(232, 225, 211, .6); }
.tp-team { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.tp-team:hover span, .tp-team:focus-visible span { text-decoration: underline; }
.tp-at { color: rgba(232, 225, 211, .6); min-width: 18px; }
.bye-row td, .bye-row th { color: rgba(232, 225, 211, .6); font-weight: 600; }
.tp-count { font: 400 13px/20px var(--font-ui); color: rgba(232, 225, 211, .6); }
.tp-inj { display: inline-block; padding: 0 4px; border-radius: 3px; background: rgba(232, 225, 211, .15); color: #E8E1D3; font: 700 10px/16px var(--font-ui); }
.tp-desc { white-space: normal !important; min-width: 220px; }
.tp-desc .team-logo { vertical-align: -4px; margin-right: 4px; }
.tp-date { color: rgba(232, 225, 211, .7); }
.tp-type { font: 600 11px/16px var(--font-ui); text-transform: uppercase; color: rgba(232, 225, 211, .7); }
.tp-pager { display: flex; justify-content: center; gap: 16px; padding: 12px 16px; font-size: 13px; color: rgba(232, 225, 211, .6); }
.tp-more { margin: 0 0 20px; padding: 0 16px; text-align: right; }
@media (min-width: 1024px) {
  .tp-hero-in { height: 160px; padding: 0 70px; gap: 24px; }
  .tp-logo, .tp-logo img, .tp-logo svg { width: 100px; height: 100px; }
  .tp-name .pp-first { font: 200 28px/34px var(--font-ui); }
  .tp-name .pp-last { font: 700 32px/34px var(--font-ui); }
  .tp-layout { grid-template-columns: minmax(0, 1fr); }
}
.bar-lead span:first-child { color: var(--text, inherit); }
.staff-meta { margin-top: 4px; }

/* Staff hire cards (AD hold, r27): locked tokens only — primary #7A1E22, bone #E8E1D3. No #FF7A1A on this page. */
.staff-page .bar-fill { background: #7A1E22; }
.staff-page .bar > span:first-child, .staff-page .staff-meta, .staff-page .staff-sliders-label, .staff-page .panel-sub { color: rgba(232, 225, 211, .6) !important; }
.staff-page .bar-lead span:first-child, .staff-page .num { color: #E8E1D3; }
.staff-page .staff-role { background: transparent; color: rgba(232, 225, 211, .6); border: 1px solid rgba(232, 225, 211, .3); }
.staff-page .staff-hire { background: #7A1E22; border-color: #7A1E22; color: #E8E1D3; }
.staff-page .staff-hire:hover, .staff-page .staff-hire:focus-visible { background: #8E262B; border-color: #8E262B; color: #E8E1D3; }
.staff-page .staff-hire:focus-visible, .staff-page .staff-tabs a:focus-visible { outline: 2px solid #E8E1D3; outline-offset: 2px; }
.staff-page .staff-tabs a { color: rgba(232, 225, 211, .6); border-bottom: 2px solid transparent; }
.staff-page .staff-tabs a:hover { color: #E8E1D3; }
.staff-page .staff-tabs [aria-current="page"] { color: #E8E1D3; border-bottom: 2px solid #7A1E22; box-shadow: none; }
/* Transactions linked names: bone like other name links (AD). */
.tp-desc a, .tp-desc .tx-name, .tp-desc .player-link { color: #E8E1D3; }
.tp-desc a:hover, .tp-desc a:focus-visible { color: #E8E1D3; text-decoration: underline; }

/* Phase 3 Front Office (GAD lock: #7A1E22 + bone #E8E1D3 on dark cards; no teal, no team fills) */
.fo-tabs { border-top: 1px solid rgba(232, 225, 211, .12); }
.fo-tabs .fo-tabs-l { padding: 0 12px 0 0; font: 600 12px/44px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: rgba(232, 225, 211, .6); white-space: nowrap; }
.fo-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.fo-card { background: var(--surface, #14171C); border-radius: 8px; padding: 14px 16px; border-top: 3px solid #7A1E22; display: flex; flex-direction: column; gap: 2px; }
.fo-k { font: 500 12px/16px var(--font-ui); color: rgba(232, 225, 211, .7); text-transform: uppercase; letter-spacing: .05em; }
.fo-v { font: 700 24px/30px var(--font-ui); color: #E8E1D3; font-variant-numeric: tabular-nums; }
.fo-s { font: 400 12px/16px var(--font-ui); color: rgba(232, 225, 211, .6); }
.fo-pos { color: #6FBF7F; } .fo-neg { color: #E08A80; }
.fo-v.fo-pos { color: #6FBF7F; } .fo-v.fo-neg { color: #E08A80; }
.fo-body { padding: 4px 16px 16px; }
.fo-meter { display: grid; grid-template-columns: 120px 1fr 80px; align-items: center; gap: 12px; margin: 8px 0; font: 400 14px/20px var(--font-ui); }
.fo-meter-track { height: 8px; background: rgba(232, 225, 211, .12); border-radius: 4px; overflow: hidden; }
.fo-meter-fill { display: block; height: 100%; background: #7A1E22; }
.fo-meter-v { text-align: right; color: rgba(232, 225, 211, .8); }
.fo-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fo-scout-row { display: grid; grid-template-columns: 100px 160px 60px; align-items: center; gap: 12px; margin: 6px 0; }
.fo-scout input { background: #0B0E13; color: #E8E1D3; border: 1px solid rgba(232, 225, 211, .25); border-radius: 4px; padding: 4px 8px; font-variant-numeric: tabular-nums; }
.fo-scout input:disabled { opacity: .7; }
.fo-note { margin: 8px 16px 12px; font: 400 13px/18px var(--font-ui); color: rgba(232, 225, 211, .6); }
.fo-scout .fo-note { margin: 8px 0 0; }
.fo-owner-name { font: 700 20px/26px var(--font-ui); margin: 0 0 8px; }
.fo-traits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }
.fo-traits dt { font: 500 12px/16px var(--font-ui); color: rgba(232, 225, 211, .6); text-transform: uppercase; letter-spacing: .05em; }
.fo-traits dd { margin: 0; font: 600 15px/22px var(--font-ui); }
.fo-mood { padding: 2px 10px; border-radius: 12px; font: 600 12px/20px var(--font-ui); background: rgba(232, 225, 211, .12); color: #E8E1D3; }
.fo-mood-furious, .fo-mood-unhappy { background: #7A1E22; }
.fo-mood-pleased, .fo-mood-ecstatic { background: #E8E1D3; color: #1A1714; }
.fo-warn { margin: 12px 0 0; padding: 8px 12px; border-left: 3px solid #7A1E22; background: rgba(122, 30, 34, .25); }
.fo-status-met { color: #6FBF7F; } .fo-status-missed { color: #E08A80; } .fo-status-open { color: rgba(232, 225, 211, .8); }
.fo-acc .fo-row-total th, .fo-acc .fo-row-total td { font-weight: 700; border-top: 1px solid rgba(232, 225, 211, .2); }
.fo-acc .fo-row-head th, .fo-acc .fo-row-head td { font-weight: 600; }
.staff-book { font: 500 12px/18px var(--font-ui); color: #E8E1D3; }
.staff-book select { background: #0B0E13; color: #E8E1D3; border: 1px solid rgba(232, 225, 211, .25); border-radius: 4px; padding: 2px 6px; max-width: 100%; }
.tp-books { padding: 8px 16px; font: 400 14px/20px var(--font-ui); display: flex; flex-wrap: wrap; gap: 4px 20px; }
.tp-books b { font-weight: 600; }
@media (max-width: 720px) {
  .fo-cards { grid-template-columns: 1fr 1fr; }
  .fo-two { grid-template-columns: 1fr; }
  .fo-traits { grid-template-columns: 1fr 1fr; }
  .fo-meter { grid-template-columns: 96px 1fr 72px; }
  .fo-scout-row { grid-template-columns: 80px 1fr 44px; }
}
.pp-scheme-fit { color: #E8E1D3; border-left: 3px solid #7A1E22; padding-left: .5rem; margin: .25rem 0 .75rem; }
.staff-book .form-select { display: inline-block; width: auto; margin: 0 .35rem; }
.fo-owner-set .fo-s { color: #E8E1D3; opacity: .7; }
.fo-focus { color: #E8E1D3; font-weight: 600; }
.fo-ticket { display: inline-flex; gap: .25rem; align-items: center; justify-content: flex-end; }
.fo-ticket input { width: 6rem; background: #14161b; color: #E8E1D3; border: 1px solid #7A1E22; border-radius: 4px; padding: .1rem .3rem; text-align: right; }

/* Division standings cards (spec: specs/standings_table_spec.md). Team names one line, never wrap.
   Numeric cols sized to their max value (tabular nums, tight padding); TEAM gets leftover; ellipsis only as last resort. */
/* Schedule body (Danny's NFL.com reference, 2026-11-01): seven-week strip, games grouped by day, whole row links to game.php. */
.sched-weeks { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.sched-arrow { flex: 0 0 32px; height: 32px; border: 1px solid var(--border); border-radius: 50%; background: var(--panel); color: var(--text); font-size: 18px; line-height: 28px; text-align: center; text-decoration: none; }
.sched-arrow:hover { background: var(--panel-raised); color: var(--text); }
.sched-arrow.is-off { opacity: .3; }
.sched-week-list { display: flex; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sched-week-list::-webkit-scrollbar { display: none; }
.sched-week { position: relative; flex: 1 0 104px; padding: 4px 6px 12px; color: var(--text-2); text-align: center; text-decoration: none; }
.sched-week + .sched-week { border-left: 1px solid var(--border); }
.sched-week b { display: block; font: italic 800 22px/26px var(--font-display); text-transform: uppercase; white-space: nowrap; }
.sched-week span { display: block; font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.sched-week:hover, .sched-week.is-active { color: var(--text); }
.sched-week.is-active { background: var(--panel-raised); }
.sched-week.is-active b { color: var(--accent); }
.sched-week.is-current::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--text); }
.sched-note { margin: 0 0 16px; font-size: 13px; line-height: 18px; color: var(--text-2); }
.sched-note b { color: var(--text); }
.sched-day { margin-bottom: 24px; }
.sched-day-title { margin: 0 0 12px; font: 700 20px/28px var(--font-ui); color: var(--text); }
.sched-byes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sched-bye { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); color: var(--text); text-decoration: none; }
.sched-bye:hover { background: var(--panel-raised); border-color: var(--text-2); color: var(--text); }
.sched-bye .team-mark { flex: none; width: 40px; height: 40px; object-fit: contain; }
.sched-bye-name { min-width: 0; overflow: hidden; padding-right: 3px; font: italic 800 22px/26px var(--font-display); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
/* Columns as % of the row, measured from Danny's NFL row: record ends 42.5, divider 46, date starts 50.5, tag centred 70.6, buttons 84-98. */
.sched-game { position: relative; display: grid; grid-template-columns: 46% 18% 13.2% 6.8% 14% 2%; align-items: center; margin-bottom: 12px; padding: 12px 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); transition: border-color .12s, background .12s; }
.sched-game:hover { background: var(--panel-raised); border-color: var(--text-2); }
.sched-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.sched-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sched-teams { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-right: 7.6%; padding-left: 4px; border-right: 1px solid var(--border); }
.sched-team { display: flex; align-items: center; gap: 16px; min-width: 0; min-height: 46px; }
.sched-bar { flex: none; }
.sched-team .team-mark { flex: none; width: 46px; height: 46px; object-fit: contain; }
.sched-name { flex: 0 1 auto; min-width: 0; overflow: hidden; padding-right: 3px; font: italic 800 28px/32px var(--font-display); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.sched-rec { margin-left: auto; color: var(--text-2); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sched-game.is-final .sched-rec, .sched-game.is-live .sched-rec { margin-left: 0; font-size: 12px; font-weight: 500; }
.sched-score { position: relative; min-width: 56px; margin-left: auto; font: 800 32px/32px var(--font-display); font-variant-numeric: tabular-nums; text-align: right; }
.sched-game.is-final .sched-team:not(.is-winner) .sched-name, .sched-game.is-final .sched-team:not(.is-winner) .sched-score { color: var(--text-2); }
.sched-game.is-final .sched-team.is-winner .sched-score::before { content: "\25B8"; margin-right: 6px; font-size: 14px; vertical-align: 3px; }
.sched-when { display: flex; flex-direction: column; gap: 2px; padding-left: 25%; font-size: 14px; line-height: 20px; color: var(--text-2); white-space: nowrap; }
.sched-when b, .sched-when .score-ticker-time, .sched-when .score-ticker-time.is-final-label { font: 700 14px/20px var(--font-ui); letter-spacing: 0; color: var(--text); }
.sched-game.is-live .sched-when b { color: #F5B942; }
.sched-net { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--text-2); text-align: center; }
.sched-net.is-ttv { color: #9146FF; font-weight: 800; }
.sched-actions { grid-column: 5; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; }
.sched-actions form { margin: 0; }
.sched-btn { display: block; width: 100%; min-height: 40px; padding: 9px 8px; border: 1px solid var(--text-2); border-radius: var(--r-ctl); background: transparent; color: var(--text); font: 700 14px/20px var(--font-ui); text-align: center; text-decoration: none; cursor: pointer; }
.sched-btn:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
.sched-btn.is-voted { background: #9146FF; border-color: #9146FF; color: #FFFFFF; }
@media (max-width: 900px) {
  .sched-game { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 12px; padding: 14px 12px 14px 0; }
  .sched-teams { grid-column: 1 / -1; padding-right: 0; border-right: 0; }
  .sched-when { flex-direction: row; gap: 8px; padding-left: 12px; }
  .sched-net { text-align: right; }
  .sched-actions { grid-column: 1 / -1; flex-direction: row; padding-left: 12px; }
  .sched-actions > * { flex: 1 1 0; }
  .sched-name { font-size: 22px; line-height: 26px; }
  .sched-team { gap: 10px; }
  .sched-score { min-width: 44px; font-size: 26px; }
}
/* Live and final rows (Danny's reference, 2026-11-01): same row, plus quarter lines, drive chart or recap, and leaders. Upcoming rows do not change. */
.sched-id { display: contents; }
.sched-qs, .sched-qhead { display: none; }
.sched-game.is-live .sched-id, .sched-game.is-final .sched-id { display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; }
.sched-game.is-live .sched-name, .sched-game.is-final .sched-name { font-size: 26px; line-height: 28px; }
.sched-game.is-live .sched-score, .sched-game.is-final .sched-score { margin-left: 0; min-width: 52px; }
.sched-game.is-live .sched-qs, .sched-game.is-final .sched-qs { display: flex; flex: none; color: var(--text-2); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sched-qs span, .sched-qhead span { width: 24px; text-align: center; }
.sched-game.is-live .sched-qhead, .sched-game.is-final .sched-qhead { display: flex; justify-content: flex-end; margin-bottom: -4px; color: var(--text); font-size: 12px; font-weight: 700; line-height: 16px; }
.sched-qhead .sched-qhead-t { width: 52px; text-align: right; }
.sched-play { min-width: 0; font-size: 13px; line-height: 18px; color: var(--text-2); }
.sched-field { display: block; width: 100%; height: auto; }
.sched-field-track { fill: var(--border); }
.sched-field-tick { fill: var(--text-2); }
.sched-field-tick.is-hot { fill: #FF6B6B; }
.sched-field-bar { fill: var(--text); }
.sched-field-dir { fill: var(--text); }
.sched-field-txt { fill: var(--text-2); font: 600 10px var(--font-ui); }
.sched-sit { margin: 2px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 700; line-height: 18px; text-align: center; }
.sched-sit.is-rz { color: #FF6B6B; }
.sched-last { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.sched-last b { color: var(--text); }
.sched-recap-title { display: -webkit-box; margin: 0 0 6px; overflow: hidden; color: var(--text); font: 700 15px/20px var(--font-ui); -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.sched-recap-dek { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.sched-leaders { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sched-leader { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--text-2); }
.sched-leader-cat { flex: none; width: 34px; font-size: 11px; font-weight: 700; }
.sched-leader .team-mark { flex: none; width: 28px; height: 28px; object-fit: contain; }
.sched-leader-txt { display: flex; flex-direction: column; min-width: 0; }
.sched-leader-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-leader-txt b { color: var(--text); }
.sched-leader-txt small { font-size: 11px; }
@media (min-width: 901px) {
  .sched-game.is-live, .sched-game.is-final { grid-template-columns: 37% minmax(0, 1fr) 21% 13%; grid-template-rows: auto auto 1fr; grid-template-areas: "teams play leaders when" "teams play leaders net" "teams play leaders actions"; padding: 12px 12px 12px 0; }
  .sched-game.is-live .sched-teams, .sched-game.is-final .sched-teams { grid-area: teams; padding-right: 12px; }
  .sched-game.is-live .sched-play, .sched-game.is-final .sched-play { grid-area: play; align-self: start; padding: 0 14px; }
  .sched-game.is-live .sched-leaders, .sched-game.is-final .sched-leaders { grid-area: leaders; align-self: center; padding: 0 12px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
  .sched-game.is-live .sched-when, .sched-game.is-final .sched-when { grid-area: when; align-items: center; padding-left: 12px; }
  .sched-game.is-live .sched-net, .sched-game.is-final .sched-net { grid-area: net; margin: 2px 0 6px; padding-left: 12px; }
  .sched-game.is-live .sched-actions, .sched-game.is-final .sched-actions { grid-area: actions; align-self: start; padding-left: 12px; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .sched-game.is-live, .sched-game.is-final { grid-template-columns: 46% minmax(0, 1fr) 130px; grid-template-rows: auto auto auto auto; grid-template-areas: "teams play when" "teams play net" "teams play actions" "leaders leaders leaders"; row-gap: 0; }
  .sched-game.is-live .sched-leaders, .sched-game.is-final .sched-leaders { flex-direction: row; margin-top: 12px; padding: 12px 12px 0; border: 0; border-top: 1px solid var(--border); }
  .sched-leaders .sched-leader { flex: 1 1 0; }
}
@media (max-width: 900px) {
  .sched-play, .sched-leaders { grid-column: 1 / -1; padding-left: 12px; }
  .sched-game.is-live .sched-name, .sched-game.is-final .sched-name { font-size: 20px; line-height: 24px; }
  .sched-game.is-live .sched-score, .sched-game.is-final .sched-score { min-width: 38px; }
  .sched-qs span, .sched-qhead span { width: 19px; font-size: 12px; }
  .sched-qhead .sched-qhead-t { width: 38px; }
}
/* Standings body (Danny's NFL.com reference, 2026-11-01): a conference band over one full-width detailed table per division. */
.standings_glossary { margin-top: 16px; }
.standings_glossary dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px 32px; margin: 0; }
.standings_glossary dl > div { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.standings_glossary dt { flex: 0 0 104px; font-size: 13px; font-weight: 700; color: var(--text); }
.standings_glossary dd { margin: 0; font-size: 13px; line-height: 18px; color: var(--text-2); }
.standings_key { margin: 0 0 16px; font-size: 13px; line-height: 18px; color: var(--text-2); }
.standings_conf { margin-bottom: 24px; }
.standings_conf_name { margin: 0 0 8px; font: 700 16px/24px var(--font-ui); color: var(--text); }
.standings_panel { margin-bottom: 16px; overflow: hidden; }
.standings_full .table { min-width: 1080px; }
.standings_full th, .standings_full td { padding: 4px 10px; white-space: nowrap; }
.standings_full th { padding-top: 10px; padding-bottom: 10px; }
.standings_full .num { width: 1%; font-variant-numeric: tabular-nums; text-align: right; }
.standings_full .st-sep { border-left: 1px solid var(--border); }
.standings_full .team-cell { position: sticky; left: 0; z-index: 2; width: auto; min-width: 230px; background: var(--panel); text-align: left; }
.standings_full th.team-cell { z-index: 3; background: var(--panel-raised); }
.standings_full tbody tr:hover .team-cell { background: var(--panel-raised); }
.standings_full .team-chip { display: flex; align-items: center; font-weight: 600; }
.standings_full .team-chip .st-rank { flex: 0 0 24px; overflow: visible; color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; }
.standings_div .table { width: 100%; }
.standings_div th, .standings_div td { padding-left: 3px; padding-right: 3px; }
.standings_div .num, .standings_div .rank-cell { white-space: nowrap; width: 1%; font-variant-numeric: tabular-nums; text-align: right; }
.standings_div th:first-child, .standings_div .rank-cell { padding-left: 6px; }
.standings_div th:last-child, .standings_div td:last-child { padding-right: 6px; }
.standings_div .team-cell { width: auto; max-width: 0; white-space: nowrap; }
.standings_div .team-chip { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.standings_div .team-chip img, .standings_div .team-chip svg { flex: 0 0 auto; }
.standings_div .team-chip span { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1200px) { .standings_div { overflow-x: hidden; } }

/* ===== r30: Phase 4 Game Center on the r29 gamecast (gc-head/gc-grid untouched; master's clashing .gc-grid/.gc-head/.gc-panel/.gc-bar* rules omitted) ===== */
.pbp-drives { margin: 0; padding: 0; }
.pbp-drive { border-top: 1px solid var(--border); }
.pbp-head { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 8px 12px; border: 0; border-left: 3px solid var(--accent); background: var(--panel-raised); color: inherit; font: inherit; font-size: 13px; text-align: left; font-variant-numeric: tabular-nums; }
button.pbp-head { cursor: pointer; background: transparent; }
button.pbp-head:hover, button.pbp-head:focus-visible { background: var(--panel-raised); }
.pbp-team { font-weight: 700; min-width: 40px; }
.pbp-stats { color: var(--text-2); flex: 1 1 auto; }
.pbp-poss { color: var(--text-2); }
.pbp-res { font-size: 11px; font-weight: 700; padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px; }
.pbp-caret { color: var(--text-2); transition: transform .15s; }
.pbp-drive.open .pbp-caret { transform: rotate(90deg); }
.pbp-drive:not(.current) .feed li:first-child { border-left-color: transparent; background: transparent; }
/* ===== Phase 4 thin Game Center (art/STYLE_game_page_phase4.md) ===== */
:root { --gc-wine: #7A1E22; --gc-bone: #E8E1D3; --gc-dock: #0B0E13; --gc-panel: #1A2029; --gc-edge: #334050; --gc-text2: #A3AEBD; }
.tnum { font-variant-numeric: tabular-nums; }
.gc-title { font-size: 12px; font-variant: small-caps; text-transform: lowercase; letter-spacing: .04em; color: var(--gc-text2); font-weight: 700; }
.gc-sub { font-size: 10px; color: var(--gc-text2); }
/* Hero experts 3+3 */
.gc-hero-experts { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; background: var(--gc-wine); color: var(--gc-bone); padding: 8px 12px; }
.gc-experts { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: nowrap; }
.gc-experts-right { justify-content: flex-end; }
.gc-xchip { display: flex; gap: 6px; align-items: center; min-width: 0; }
/* Letter circles: classes, not inline style (CSP style-src 'self' drops style="") */
.gc-xav-h { background-color: #3D5A80; } .gc-xav-d { background-color: #6B4E71; } .gc-xav-i { background-color: #2F6F5E; } .gc-xav-r { background-color: #8B5A2B; } .gc-xav-g { background-color: #5C3D6E; } .gc-xav-s { background-color: #4A5568; } .gc-xav.gc-xav-riley { background-color: #1E4D6B; }
.gc-xav { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 13px Inter, system-ui, sans-serif; color: var(--gc-bone); box-shadow: 0 0 0 2px var(--gc-dock); flex: none; }
.gc-xbody { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.gc-xname { font-size: 11px; color: var(--gc-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-xpick { font-size: 12px; color: var(--gc-bone); }
.gc-xproj { font-variant-numeric: tabular-nums; }
.gc-xres.hit { color: var(--gc-bone); } .gc-xres.miss { color: rgba(255,255,255,.5); }
.gc-consensus { font-size: 12px; font-weight: 700; white-space: nowrap; text-align: center; }
@media (max-width: 720px) {
  .gc-hero-experts { display: flex; overflow-x: auto; }
  .gc-experts { flex-wrap: nowrap; } .gc-consensus { order: -1; }
}
/* Pregame ring */
.gc-ring-wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gc-ring { width: 110px; height: 110px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.gc-ring-in { width: 84px; height: 84px; border-radius: 50%; background: var(--gc-panel); display: flex; align-items: center; justify-content: center; gap: 4px; }
.gc-ring-pct { font-size: 12px; } .gc-ring-pct b { display: block; font-size: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* WP panel */
.gc-wp-top { display: flex; justify-content: space-between; align-items: center; }
.gc-wp-team { display: flex; align-items: center; gap: 8px; } .gc-wp-team b { font-size: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; transition: color 300ms ease; }
.gc-wp-team b.trail { color: rgba(255,255,255,.7); }
.gc-split { display: flex; height: 8px; margin: 6px 0 8px; border-radius: 0; }
.gc-split span { display: block; height: 8px; transition: width 300ms ease; }
.gc-chart-wrap { position: relative; }
.gc-chart { width: 100%; height: 170px; display: block; touch-action: none; }
.gc-chart-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 26px; margin-top: 8px; }
.gc-chart-y { display: flex; flex-direction: column; justify-content: space-between; padding-left: 6px; color: var(--gc-text2); font-size: 11px; line-height: 12px; font-variant-numeric: tabular-nums; }
.gc-chart-x { display: flex; color: var(--gc-text2); font-size: 11px; line-height: 16px; text-align: center; }
.gc-chart-x span { flex: 1 1 0; min-width: 0; }
.gc-chart .gc-seg { stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.gc-chart .gc-mid { stroke: rgba(255,255,255,.2); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.gc-chart .gc-qtick { stroke: rgba(255,255,255,.22); stroke-dasharray: 1 4; vector-effect: non-scaling-stroke; }
.gc-chart .gc-swing { fill: none; stroke: var(--gc-bone); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.gc-chart .gc-otlbl { fill: var(--gc-text2); font-size: 10px; }
.gc-tip { font-size: 11px; color: var(--gc-text2); min-height: 16px; }
.gc-ot-note { font-size: 10px; color: rgba(255,255,255,.6); }
.gc-lp-text { font-size: 13px; } .gc-lp-wp { font-size: 12px; color: var(--gc-bone); margin-top: 6px; }
.gc-rz { background: var(--gc-wine); color: var(--gc-bone); font-size: 10px; font-weight: 700; padding: 1px 6px; margin-left: 6px; }
/* Game preview + Riley Kade (STYLE_game_page_phase4 §6) — pregame only */
.gc-byline { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.gc-by-name { font-size: 12px; font-weight: 700; color: var(--gc-bone); } .gc-by-role { font-size: 10px; color: rgba(255,255,255,.6); }
.gc-stub { font-size: 10px; color: rgba(255,255,255,.5); margin-bottom: 6px; }
.gc-preview-p { font-size: 14px; color: var(--gc-bone); margin: 0 0 6px; }

/* Pregame expert band (sidebar, under Riley preview): consensus on top, 3 left / 3 right */
.gc-experts-band { grid-template-columns: 1fr 1fr; margin-bottom: 12px; border-radius: 6px; }
.gc-experts-band .gc-consensus { grid-column: 1 / -1; order: -1; }
.gc-right .gc-experts-band { margin: 12px 0; }

/* Pregame rail locks to 300 like Final (bootstrap col-lg-4 was ~469) */
@media (min-width: 992px) { .gc-pre-row > .gc-pre-main { flex: 1 1 0; width: auto; max-width: none; min-width: 0; } .gc-pre-row > .gc-pre-rail { flex: 0 0 300px; width: 300px; max-width: 300px; } }
/* Experts off-hero in rail: panel chrome, no wine wash */
.gc-right .gc-hero-experts { background: var(--gc-panel); border: 1px solid var(--gc-edge); color: var(--gc-bone); }
.gc-phead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gc-pre-row .gc-panel { background: var(--gc-panel); border: 1px solid var(--gc-edge); padding: 10px 12px; margin-bottom: 12px; color: #fff; }
/* Right rail: WP above chat, nothing else */
.gc-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; align-self: stretch; }
.gc-right > .gc-chat { flex: none; align-self: auto; }
.gc-final-info .d-flex { gap: 12px; }
.gc-final-info .fw-bold { text-align: right; }
.gc-right > .gc-wp { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 10px 12px; color: #fff; }
.gc-chart .gc-wpmid { stroke: rgba(255,255,255,.4); vector-effect: non-scaling-stroke; }
/* Hero 3+3 band sits flush under the r29 hero */
#live_game > .gc-hero-experts, .gc-hero-experts#gc_experts { margin: 0 0 12px; }
@media (max-width: 1023px) { #live_game > .gc-hero-experts { display: flex; overflow-x: auto; } }
/* PBP drive accordion: no inner scroll, CSS caret, panel-colour heads (no wine) */
.gc-left .pbp-drives .feed, .gc-left .pbp-plays { max-height: none; overflow: visible; }
.pbp-head { background: var(--panel); color: var(--text); font-size: 12px; text-align: left; }
.pbp-caret { width: 8px; height: 8px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(-45deg); flex: none; }
.pbp-drive.open .pbp-caret { transform: rotate(45deg); }
/* r30.1 (GAD): expert band on --panel, not a wine strip; centre consensus/Final label; ✗ at 50% white */
#gc_experts.gc-hero-experts { background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 10px 16px; grid-template-columns: 1fr minmax(140px, auto) 1fr; }
#gc_experts.gc-hero-experts .gc-consensus { color: var(--gc-bone); font: 700 13px/1.2 var(--font-ui); letter-spacing: .02em; padding: 4px 12px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
#gc_experts.gc-hero-experts .gc-xpick { color: var(--text); }
#gc_experts .gc-consensus-line { display: block; margin-top: 3px; font: 600 11px/14px var(--font-ui); letter-spacing: .02em; white-space: nowrap; }
.gc-xres.miss { color: rgba(255,255,255,.5); }
.pbp-res { color: var(--text-2); }

/* ===== Pregame deps (ported from wt_deploy for section 15) ===== */
.card-dk { background: var(--panel); border: 1px solid var(--line10, rgba(255,255,255,.10)); border-radius: var(--r-panel); padding: var(--s2) var(--s3); position: relative; }
.dk-title { font: 700 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin: 0 0 var(--s2); }
.pdisc { grid-area: disc; width: 40px; height: 40px; border-radius: 50%; background: var(--c1); color: var(--c2); font: 800 16px var(--font-display); display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.ts, .dct { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ts th, .ts td, .dct th, .dct td { padding: 5px 6px; border-bottom: 1px solid var(--line10, rgba(255,255,255,.10)); text-align: right; }
.ts tbody th, .dct .dct-team { text-align: left; font-weight: 500; }
/* ===== Pregame view (spec section 15) ===== */
.pg { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
.pg-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: var(--s2); }
.pg-head .dk-title { margin: 0; text-align: center; }
.pg-team { display: flex; align-items: center; gap: var(--s1); font-size: 14px; }
.pg-team-home { justify-content: flex-end; }
.pg-row { display: grid; grid-template-columns: 1fr; gap: var(--s1); padding: var(--s2) 0; border-top: 1px solid rgba(255,255,255,.1); }
.pg-cat { order: -1; text-align: center; font-size: 11px; font-variant: small-caps; text-transform: lowercase; letter-spacing: .05em; color: rgba(255,255,255,.6); }
.pg-p { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: var(--s2); min-width: 0; }
.pg-p.is-empty { display: block; font-size: 13px; }
.pg-disc { background: var(--c1, #333); color: var(--c2, #fff); }
.pg-who { display: flex; flex-direction: column; min-width: 0; }
.pg-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-pos, .pg-line { font-size: 12px; color: rgba(255,255,255,.6); }
.pg-val { font: 800 24px var(--font-display); color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.pg-val.is-lead { color: #fff; }
.pg-more { display: inline-block; margin-top: var(--s2); font-size: 13px; }
.pg-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: 14px; }
.pg-facts li { display: flex; align-items: center; gap: var(--s2); }
.pg-icon { flex: none; color: rgba(255,255,255,.6); }
.pg-table .pg-tname { text-align: left; }
.pg-table tr.is-me th, .pg-table tr.is-me td { font-weight: 700; color: #fff; }
.pg-admin { margin-top: var(--s2); max-width: 320px; }
.pg-after { margin-top: var(--s2); }
.pg-after > summary { cursor: pointer; font-weight: 600; padding: var(--s2) 0; }
@media (min-width: 640px) {
  .pg-row { grid-template-columns: 1fr 120px 1fr; align-items: center; }
  .pg-cat { order: 0; }
  .pg-home { grid-template-columns: auto 1fr 40px; text-align: right; }
  .pg-home .pg-disc { order: 3; } .pg-home .pg-who { order: 2; align-items: flex-end; } .pg-home .pg-val { order: 1; }
}
/* section 9: five cards stack vertically in the left column (GAD FAIL fix) */
.pg { grid-template-columns: minmax(0, 1fr); } .pg-leaders { grid-row: auto; }
.gp-main { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.pg-p .pg-disc, .pg-p .pg-who, .pg-p .pg-val { grid-area: auto; }
.pg-who { text-align: left; }
.pg-table th, .pg-table td { white-space: nowrap; } .pg-table .pg-tname { white-space: normal; }


/* r30.1.3 wine hero lock (Senior + GAD + Danny): #7A1E22 fill, bone type, 98px on pregame AND live (overrides r2/r3 122px). */
:root { --hero: #7A1E22; --hero-bg: #7A1E22; --hero-h: 98px; --hero-bone: #E8E1D3; }
.gc-head { background: var(--hero-bg); color: var(--hero-bone); }
.gc-head .gc-city, .gc-head .gc-nick, .gc-head .gc-rec, .gc-head .gc-mid, .gc-head .gc-score, .gc-head .gc-clock, .gc-head .gc-state { color: var(--hero-bone); }
.gc-head a.gc-city { text-decoration: none; } .gc-head a.gc-city:hover { text-decoration: underline; }
.gc-bg { opacity: .09; }
#gc_pre .gc-head { width: 100vw; margin-left: calc(50% - 50vw); margin-top: -24px; border-radius: 0; border-bottom: 0; padding-left: max(24px, calc(50vw - 696px)); padding-right: max(24px, calc(50vw - 696px)); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
#gc_pre .gc-names { width: 220px; }
.gc-mid-pre { display: flex; flex-direction: column; align-items: center; min-width: 140px; }
.gc-date { font: 700 11px/14px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.gc-kick { font: 800 20px/24px var(--font-display); font-variant-numeric: tabular-nums; }
#gc_pre .gc-odds { margin-top: 4px; font: 600 11px/14px var(--font-ui); letter-spacing: .02em; color: var(--hero-bone); white-space: nowrap; text-align: center; }
@media (max-width: 1023px) { #gc_pre .gc-names { width: auto; } #gc_pre .gc-head { height: auto; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "at mid ht"; } #gc_pre .gc-mid-pre { min-width: 0; padding: 0 6px; } }
@media (min-width: 1024px) {
  #live_game .gc-head, #gc_pre .gc-head { height: 98px; min-height: 98px; }
  #live_game .gc-head .gc-odds { top: 76px; }
}


/* Game Preview story shell (CBS 2-col, left only; no images). */
.gp-shell { display: grid; grid-template-columns: 1fr; gap: var(--s3); margin: var(--s3) 0; }
@media (min-width: 1024px) { .gp-shell { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.gp-story { background: var(--panel, #1A2029); color: var(--hero-bone, #E8E1D3); }
.gp-headline { font: 800 26px/1.2 var(--font-display); color: var(--hero-bone, #E8E1D3); margin: 0 0 var(--s1); }
.gp-byline { font: 600 12px/16px var(--font-ui); letter-spacing: .04em; color: var(--text-2); margin: 0 0 var(--s2); }
.gp-body p { font-size: 16px; line-height: 1.6; color: var(--hero-bone, #E8E1D3); margin: 0 0 var(--s2); }
.gp-rail:empty { min-height: 1px; }

.gp-byline { display: flex; align-items: center; gap: 10px; }
.gp-av { width: 32px; height: 32px; overflow: hidden; font-size: 14px; color: var(--hero-bone, #E8E1D3); box-shadow: none; }
.gp-av img { width: 32px; height: 32px; object-fit: cover; border-radius: 50%; display: block; }


/* Pregame preview 50/50 + right rail (Experts -> Team stats -> Weekly vote -> Predictor). */
@media (min-width: 1024px) { .gp-shell { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } /* r43 60/40 */ }
.gp-rail { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.gp-rail .card-dk { background: var(--panel, #1A2029); color: var(--hero-bone, #E8E1D3); }
.gp-xlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gp-x { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.gp-xav { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; font-size: 15px; }
.gp-xav img { width: 40px; height: 40px; object-fit: contain; display: block; border-radius: 50%; background: transparent; box-shadow: none; border: 0; }
/* r35.2 GAD: experts = disc busts, never square chrome */
.gp-xav, .gp-x .gp-xav:not(.gc-xav) { background: transparent !important; border: 0; box-shadow: none !important; padding: 0; flex: none; }
.gp-x .gp-xav.gc-xav { box-shadow: none; }
.gp-xname { font: 600 13px/16px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-xpick { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; }
.gp-xwin { font: 800 14px var(--font-display); }
.gp-xtag { padding: 1px 6px; border: 1px solid var(--line10, rgba(255,255,255,.10)); border-radius: 3px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.gp-xcons { margin-top: var(--s2); font: 700 12px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.gp-ts-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; font: 800 13px var(--font-display); margin-bottom: var(--s1); }
.gp-ts-head .dk-title { margin: 0; text-align: center; }
.gp-ts-row { margin: 0 0 10px; }
.gp-ts-lab { display: grid; grid-template-columns: 56px 1fr 56px; font-size: 12px; font-variant-numeric: tabular-nums; }
.gp-ts-lab span { text-align: center; color: var(--text-2); } .gp-ts-lab b:last-child { text-align: right; }
.gp-ts-bar { display: flex; gap: 2px; height: 6px; margin-top: 3px; }
.gp-ts-a, .gp-ts-h { display: block; height: 100%; width: 50%; background: var(--c1, #5A6475); }
.gp-ts-a { border-radius: 3px 0 0 3px; } .gp-ts-h { border-radius: 0 3px 3px 0; }
.gp-vote-copy { font-size: 13px; color: var(--text-2); margin: 0 0 var(--s2); }
.gp-vote-form { display: flex; align-items: center; gap: 8px; }
.gp-sub { font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.gp-pred-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.gp-pred-row span { display: inline-flex; align-items: center; gap: 6px; }
.gp-pred-bar { height: 10px; margin-top: 8px; }


/* Predictor donut (away left / home right, team primaries). */
.gp-donut-wrap { display: grid; grid-template-columns: 1fr 140px 1fr; align-items: center; gap: 12px; }
.gp-dpct { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; color: var(--hero-bone, #E8E1D3); }
.gp-dpct b { font: 800 24px/1 var(--font-display); } .gp-dpct span { font: 700 11px var(--font-ui); letter-spacing: .06em; color: var(--text-2); margin-top: 4px; }
.gp-dpct-away { align-items: flex-start; } .gp-dpct-home { align-items: flex-end; }
.gp-donut { width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from 180deg, var(--gp-away, #5A6475) 0 calc(100% - var(--gp-ph, 50%)), var(--gp-home, #8A93A3) 0 100%); }
.gp-donut-in { width: 104px; height: 104px; border-radius: 50%; background: var(--panel, #1A2029); display: flex; align-items: center; justify-content: center; gap: 6px; }
.gp-attr { margin: var(--s2) 0 0; font-size: 11px; color: var(--text-2); text-align: center; }


/* r31.2 pregame left stack: Last Five + Injury Report (STYLE phase4 section 9) */
.pg-two { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 576px) { .pg-two { grid-template-columns: 1fr 1fr; } }
.pg-col .pg-team { margin-bottom: 6px; }
.pg-l5, .pg-inj { list-style: none; margin: 0; padding: 0; }
.pg-l5 li, .pg-inj li { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-top: 1px solid #334050; font-size: .875rem; }
.pg-res { display: inline-block; width: 1.4em; text-align: center; font-weight: 700; }
.pg-res-w { color: #3FA34D; } .pg-res-l { color: #C0504D; } .pg-res-t { color: #9AA4B2; }
.pg-inj-st { margin-left: auto; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.pg-inj-out { color: #C0504D; } .pg-inj-q { color: #E0A33A; }


/* r31.3 League Social (STYLE_game_page_phase4.md section 10) */
.gc-social-who { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; }
.gc-social-who img { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.gc-social-who b { color: var(--bone, #EDE6D6); }
.gc-social-who span { color: var(--text-2, #9AA4B2); font-size: .8125rem; }
.gc-social-log { list-style: none; margin: 0; padding: 0; }
.gc-social-log li { padding: 6px 0; border-top: 1px solid #334050; color: var(--bone, #EDE6D6); font-size: .875rem; line-height: 1.35; }
.gc-social-beat { display: inline-block; margin-right: 6px; padding: 0 6px; border: 1px solid #334050; border-radius: 4px; color: var(--text-2, #9AA4B2); font-size: .6875rem; font-variant: small-caps; letter-spacing: .04em; text-transform: lowercase; }


/* Shadow marks (Senior lock Oct 25): art is 300x300 on disk, painted at 275x275; the parent panel clips (overflow: hidden). */
:root { --shadow-mark-size: 275px; }
.panel-shadow-mark { width: var(--shadow-mark-size); height: var(--shadow-mark-size); max-width: none; max-height: none; object-fit: contain; background-size: var(--shadow-mark-size) var(--shadow-mark-size); pointer-events: none; }
.gc-head, .panel-has-shadow-mark { overflow: hidden; }

/* r36 expert cards (CBS-shaped, dark panel; keeps r35.2 disc clip) */
.gp-xcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gp-xcard { border: 1px solid var(--line10, rgba(255,255,255,.10)); border-radius: 6px; padding: 10px; background: var(--panel, #1A2029); }
.gp-xhead { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.gp-xwho { display: flex; flex-direction: column; min-width: 0; }
.gp-xtitle { font-size: 12px; color: var(--text-2); }
.gp-xrec { font: 700 13px var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-xrec small { font-size: 10px; color: var(--text-2); letter-spacing: .06em; }
.gp-xbody { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 0; }
.gp-xbody div { border-top: 1px solid var(--line10, rgba(255,255,255,.10)); padding-top: 6px; }
.gp-xbody dt { font: 700 10px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.gp-xbody dd { margin: 2px 0 0; font: 800 14px var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* r38: matchup rows in pregame Standings (STYLE §9): panel-2 fill + 3px bone left bar */
.pg-table tr.is-matchup th, .pg-table tr.is-matchup td { background: var(--panel-2, #1c2733); }
.pg-table tr.is-matchup th:first-child { box-shadow: inset 3px 0 0 var(--bone, #EDE6D6); }

/* r45c: Senior lock — no link underlines anywhere (incl. hover/focus); links inherit surrounding colour. */
a, a:link, a:visited, a:hover, a:focus, a:focus-visible, a:active,
a *, a:hover *, a:focus * { text-decoration: none !important; }
.pg-tname a, .team-cell a, .team-chip { color: inherit; }
/* r46: new name links inherit surrounding colour (gamecast hero/linescore, pregame leaders, Wire body, social). */
a.gc-city, .gc-line-team a, .pg-name a, .gp-story p a.player-link, .gc-social a.player-link, .gc-social li a { color: inherit; }

/* r58: playoff-seed row tint (specs/standings_table_spec.md, STYLE 9). Week <= 1: PHP emits no class -> flat panel. */
:root { --seed-top: #1E4D3A; --seed-in: #2A5A40; }
.table-app tr.seed_top > td { background-color: var(--seed-top); }
.table-app tr.seed_in > td { background-color: var(--seed-in); }
.table-app tr.seed_red > td { background-color: rgba(229, 72, 77, .18); }
.st-swatch { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 1px solid var(--border); border-radius: 3px; }
.st-swatch-top { background: var(--seed-top); } .st-swatch-in { background: var(--seed-in); } .st-swatch-red { background: rgba(229, 72, 77, .35); }
.gp-xtable { width: 100%; border-collapse: collapse; }
.gp-xtable thead th { padding: 0 2px 6px; color: var(--text-2); font: 700 10px var(--font-ui); letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.gp-xtable tbody tr { border-top: 1px solid var(--line10, rgba(255,255,255,.10)); }
.gp-xtable tbody th { padding: 5px 4px 5px 0; font-weight: 400; text-align: left; }
.gp-xtable td { width: 44px; padding: 2px; text-align: center; vertical-align: middle; }
.gp-xtable td .team-mark { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; }
.gp-xline { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gp-xtop { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.gp-xtable .gp-xrec { font: 600 11px/14px var(--font-ui); color: var(--text-2); }
.gp-xtable .gp-xtitle { display: block; font-size: 11px; line-height: 14px; }
.gp-xou { font: 800 16px var(--font-display); }
.gp-stlist { display: grid; gap: 0; margin: 0; }
.gp-stlist > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--line10, rgba(255,255,255,.10)); font-size: 13px; line-height: 18px; }
.gp-stlist > div:first-child { border-top: 0; }
.gp-stlist dt { color: var(--text-2); font-weight: 600; white-space: nowrap; }
.gp-stlist dd { margin: 0; font-weight: 700; text-align: right; }

/* r61 X-style post row, house chrome (league_social_post_layout_spec.md, STYLE section 10). League Social + game chat. */
.fb-check { flex: none; width: 14px; height: 14px; align-self: center; }
.fb-check--blue { fill: #3B82F6; }
.fb-check--gray { fill: #8B93A1; }
.gc-social-log li.fb-post { display: flex; gap: 10px; padding: 10px 0; }
.fb-post-av { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.fb-post-body { min-width: 0; flex: 1; }
.fb-post-head { display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; font-size: .875rem; }
.fb-post-name { color: var(--bone, #EDE6D6); overflow: hidden; text-overflow: ellipsis; }
.fb-post-meta, .gc-post-meta { color: var(--text-2, #9AA4B2); overflow: hidden; text-overflow: ellipsis; margin-left: 2px; }
.fb-post-text { margin: 2px 0 0; overflow-wrap: anywhere; }
.gc-av { flex-basis: 40px; width: 40px; height: 40px; }
.gc-post-head { align-items: center; gap: 4px; }
.fb-check + .fb-post-meta, .fb-check + .gc-post-meta { margin-left: 2px; }
/* hero chip busts (gc_experts) */
.gc-xchip .gp-xav, .gc-xchip .gp-xav img { width: 28px; height: 28px; border-radius: 50%; }


/* r64 hscroll (Danny, Oct 25 2026): game page must not widen. (1) full-bleed 100vw hero counts the vertical scrollbar, so clip x at the root on pages that carry one (clip, not hidden: no scroll container, sticky intact). (2) #live_game grid items get min-width:0 so the experts strip / gc-grid shrink to the column instead of forcing it wider. */
html:has(#live_game .gc-head), html:has(#gc_pre .gc-head) { overflow-x: clip; }
#live_game > * { min-width: 0; }

/* r65 final PBP drive boxes (play_by_play_drive_boxes_spec 2-5): native details accordion, CSS caret only, no inner scroll. */
details.drive-block > summary.drive-head { cursor: pointer; list-style: none; }
details.drive-block > summary.drive-head::-webkit-details-marker { display: none; }
details.drive-block:not([open]) > summary.drive-head { border-bottom: 0; }
.drive-caret { width: 8px; height: 8px; margin-left: 8px; border-right: 2px solid var(--text-2, currentColor); border-bottom: 2px solid var(--text-2, currentColor); transform: rotate(-45deg); flex: none; transition: transform .15s; }
details.drive-block[open] .drive-caret { transform: rotate(45deg); }
.drive-head .drive-result { margin-left: auto; }

/* r66 collapsed drive bar (spec 4): CITY · N PASS · N RUSH · N YDS · M:SS POSS. CSS/type only. */
details.drive-block > summary.drive-bar { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; padding: 6px 12px; background: var(--panel-raised, #1b1d22); color: var(--text, #e8e8ea); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--border); }
.drive-bar .drive-team, .drive-bar .drive-stat { padding: 0 10px; border-left: 1px solid var(--border); white-space: nowrap; }
.drive-bar .drive-team { padding-left: 0; border-left: 0; }
.drive-bar .drive-stat { color: var(--text-2, #a9abb2); font-weight: 600; }
.drive-bar .drive-result { margin-left: auto; font-size: 11px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px; }
details.drive-block:first-of-type > summary.drive-bar { cursor: default; }
details.drive-block:first-of-type > summary.drive-bar .drive-caret { visibility: hidden; }

/* r72 drive bar (spec 11): numbers bone/bold, labels muted, POSS owns right edge. CSS/type only. */
.drive-bar .db-city, .pbp-head .pbp-team { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text, #e8e3d6); min-width: 0; }
.drive-bar .db-stat, .drive-bar .db-poss, .pbp-head .pbp-stat, .pbp-head .pbp-poss { color: var(--text-2, #9a9ca3); font-size: 11px; font-weight: 600; letter-spacing: .05em; white-space: nowrap; padding: 0 10px; border-left: 1px solid var(--border); }
.drive-bar b, .pbp-head .pbp-stat b, .pbp-head .pbp-poss b { color: var(--text, #e8e3d6); font-size: 13px; font-weight: 800; }
.drive-bar .db-poss, .pbp-head .pbp-poss { margin-left: auto; border-left: 0; }
.pbp-head { gap: 0; }
.drive-bar .drive-caret, .pbp-head .pbp-caret { margin-left: 8px; }

/* r74 �11a: drive bars single-line at ~336px. nowrap flex; CITY ellipsis; POSS pinned right, never shrinks. FINAL + LIVE. */
.gc-drive[hidden] { display: none !important; }
details.drive-block > summary.drive-bar, .pbp-head { display: flex; flex-wrap: nowrap; align-items: center; gap: 0; min-width: 0; overflow: hidden; white-space: nowrap; }
.drive-bar .db-city, .pbp-head .pbp-team { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 6px; }
.drive-bar .db-stat, .pbp-head .pbp-stat { flex: 0 0 auto; padding: 0 6px; }
.drive-bar .db-poss, .pbp-head .pbp-poss { flex: 0 0 auto; flex-shrink: 0; margin-left: auto; padding: 0 0 0 8px; }
.drive-bar .drive-caret, .pbp-head .pbp-caret { flex: 0 0 auto; margin-left: 6px; }
/* r75 (Senior lock): drive stack is square. Radius 0 on drive boxes/bars only (legacy .drive-block was rounding the r73 left stack). */
.gc-left details.drive-block, .gc-left details.drive-block > summary.drive-bar, .gc-left .pbp-drive, .gc-left .pbp-head { border-radius: 0; }
/* r76 (Senior lock, flips r74 ellipsis): full CITY, never truncated. Stats tighten instead. Radius 0 (r75) unchanged. */
.gc-left details.drive-block > summary.drive-bar, .gc-left .pbp-head { padding-left: 8px; padding-right: 8px; letter-spacing: 0; }
.gc-left .drive-bar .db-city, .gc-left .pbp-head .pbp-team { flex: 0 0 auto; overflow: visible; text-overflow: clip; letter-spacing: .02em; padding-right: 4px; }
.gc-left .drive-bar .db-stat, .gc-left .pbp-head .pbp-stat { padding: 0 4px; font-size: 9px; letter-spacing: .02em; }
.gc-left .drive-bar .db-poss, .gc-left .pbp-head .pbp-poss { flex-shrink: 0; padding-left: 4px; font-size: 9px; letter-spacing: .02em; }
.gc-left .drive-bar b, .gc-left .pbp-head .pbp-stat b, .gc-left .pbp-head .pbp-poss b { font-size: 12px; }
.gc-left .drive-bar .drive-caret, .gc-left .pbp-head .pbp-caret { margin-left: 4px; }
/* r78 FINAL: Game Recap spans left + center; right column stays beside it */
.gc-grid-final > .gc-recap-wide { grid-column: 1 / -1; min-width: 0; }
.gc-grid-final > .gc-recap-wide > .recap-story { margin-bottom: 0 !important; }
@media (min-width: 1280px) {
  .gc-grid-final > .gc-recap-wide { grid-column: 1 / 3; grid-row: 1; }
  .gc-grid-final > .gc-right { grid-column: 3; grid-row: 1 / span 2; }
  .gc-grid-final { grid-template-rows: auto 1fr; } /* extra right-column height stays below the plays, never under the recap */
}

/* r81 Game Recap: 24px inner padding + Riley bust byline */
.recap-story { padding: 24px !important; }
.recap-story > .panel-head { padding: 0 0 8px !important; }
.recap-story .recap-bust { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--gc-panel, #14202b); }

/* r82 crown on 40px rail discs: same 10:30 math scaled 40/28 (crown 14.3x10, distance 22.1px). */
.gp-xface { position: relative; display: inline-flex; width: 40px; height: 40px; flex: none; }
.gp-xcrown { position: absolute; z-index: 1; width: 14.3px; height: 10px; left: calc(20px - 22.1px * .7071 - 7.15px); top: calc(20px - 22.1px * .7071 - 5px); transform: rotate(-45deg); pointer-events: none; }
.expert_portrait_sm { display: inline-flex; flex: none; } .expert_crown_sm { z-index: 1; pointer-events: none; }

/* r86 spec 11d: drive that just ended slides down into the collapsed priors; new current pops in under the single outer bar */
.pbp-drive.is-arrived { animation: pbp-arrive .45s ease-out; }
.pbp-drive.current.is-new { animation: pbp-pop .3s ease-out; }
@keyframes pbp-arrive { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes pbp-pop { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pbp-drive.is-arrived, .pbp-drive.current.is-new { animation: none; } }

/* r87 spec 11f: Plays stack (current cards + prior headers) flush L/R with #gc_drive (same -12px bleed past the panel padding), no inset */
.gc-left #panel_plays .pbp-drives { margin-left: -12px; margin-right: -12px; }
.gc-left #panel_plays .pbp-drive, .gc-left #panel_plays .pbp-head { margin-left: 0; margin-right: 0; width: 100%; }

/* r93 League Social row chrome (Jules merge, r89): #chat_log is .gc-chat-log, not .gc-social-log, so the r61 fb-post row lost flex. Locked anatomy: 40px avatar | name+check / body / meta column; per-post pad + divider. */
#chat_log { list-style: none; margin: 0; padding: 0; }
#chat_log > li.fb-post { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid #334050; color: var(--bone, #EDE6D6); font-size: .875rem; line-height: 1.35; }
#chat_log > li.fb-post:first-child { border-top: 0; }
#chat_log > li.fb-post[hidden] { display: none; }
#chat_log .fb-post-av { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; }
#chat_log .fb-post-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#chat_log .fb-post-meta { display: block; margin: 2px 0 0; font-size: .8125rem; }

/* r95 hero expert chips */
.gc-xchips { white-space: nowrap; font-size: 11px; font-variant-numeric: tabular-nums; }


/* r95c: people spread full width; season record never clips */
#gc_experts .gc-experts { width: 100%; gap: 12px; justify-content: space-between; }
#gc_experts .gc-xchip { flex: 0 1 auto; min-width: 0; gap: 8px; }
#gc_experts .gc-xbody { min-width: 0; }
#gc_experts .gc-xtop { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
#gc_experts .gc-xname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gc_experts .gc-xrec { flex-shrink: 0; white-space: nowrap; color: var(--muted, #8a93a0); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 768px) { #gc_experts .gc-experts { gap: 8px; } }

/* Club draft review page */
.ladder_league { margin-bottom: 24px; }
.ladder_divisions { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.ladder_clubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; margin: 0; padding: 12px; list-style: none; }
.ladder_clubs li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 0; }
.ladder_clubs img { flex: none; object-fit: contain; }
.ladder_clubs b { display: block; font: 600 14px/20px var(--font-ui); color: var(--text); }
.ladder_clubs small { display: block; font: 600 11px/14px var(--font-ui); color: var(--text-2); }

/* Home page (Danny 2026-11-02): wine bar, lead story, headline stack, story rows. Story art is the one place this site uses glow and blur. */
.art { position: relative; overflow: hidden; isolation: isolate; background: color-mix(in srgb, var(--c1, #334050) 62%, #0B0E13); }
.art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 74% 42%, color-mix(in srgb, var(--c2, #FF7A1A) 70%, transparent), transparent 52%); }
.art::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, transparent 45%, rgba(11, 14, 19, .72)); pointer-events: none; }
.art-blur { position: absolute; z-index: -1; right: -6%; top: -22%; width: 72%; height: 144%; object-fit: contain; filter: blur(34px) saturate(1.4); opacity: .6; }
.art-ghost { position: absolute; z-index: 0; left: 2%; bottom: -.14em; max-width: 100%; font: 800 clamp(64px, 15vw, 210px)/1 var(--font-display); text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, .13); pointer-events: none; }
.art-logos { position: absolute; z-index: 1; right: 9%; top: 50%; display: flex; align-items: center; gap: 4%; height: 76%; transform: translateY(-50%); }
.art-logo { height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)); transition: transform .25s ease; }
.art-at { font: 800 18px/1 var(--font-display); text-transform: uppercase; color: #FFFFFF; opacity: .85; }
a:hover .art-logo { transform: scale(1.05); }
.art-row { height: 100%; min-height: 148px; }
.art-row .art-ghost { font-size: 76px; }
.art-row .art-logos { right: 50%; transform: translate(50%, -50%); height: 68%; }
.art-row .art-at { font-size: 13px; }
.art-row .art-blur { right: 0; width: 100%; }
.art-lead { height: clamp(260px, 30vw, 420px); }
.art-year { position: absolute; z-index: 1; left: 20px; top: 14px; font: 800 26px/30px var(--font-display); color: #FFFFFF; opacity: .85; }
.art-line { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 16px; margin: 0; font: 800 clamp(26px, 4vw, 52px)/1.05 var(--font-display); text-transform: uppercase; color: #FFFFFF; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.art-line em { font-style: normal; color: var(--accent); }
.art-chip { position: absolute; z-index: 1; right: 0; bottom: 8px; padding: 4px 10px; background: var(--gc-wine); font: 700 13px/18px var(--font-ui); color: #FFFFFF; white-space: nowrap; }

.home-top { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 8px; margin-bottom: 24px; }
.home-lead { display: block; background: var(--panel); color: var(--text); text-decoration: none; }
.home-lead:hover { color: var(--text); }
.home-lead-text { padding: 16px 20px 20px; border-left: 6px solid var(--gc-wine); }
.home-kicker { display: block; font: 700 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.home-lead h2 { margin: 4px 0 8px; font: 800 clamp(28px, 3vw, 40px)/1.08 var(--font-display); text-transform: uppercase; color: var(--text); }
.home-lead p { margin: 0; color: var(--text-2); }
.home-stack { display: grid; grid-auto-rows: 1fr; gap: 8px; }
.home-card { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 96px; padding: 14px 16px; background: var(--panel); color: var(--text); text-decoration: none; }
.home-card:hover { background: var(--panel-raised); color: var(--text); }
.home-card b { font: 800 20px/23px var(--font-display); text-transform: uppercase; }
.home-card small { font: 600 11px/14px var(--font-ui); color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.home-card.is-first { background: var(--gc-wine); }
.home-card.is-first .home-kicker, .home-card.is-first small { color: var(--gc-bone); }

.home-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.home-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding: 6px 12px; background: var(--panel); border-left: 6px solid var(--gc-wine); }
.home-head h2 { margin: 0; font: 800 22px/28px var(--font-display); text-transform: uppercase; color: var(--text); }
.home-head a { font: 700 12px/16px var(--font-ui); text-transform: uppercase; color: var(--accent); text-decoration: none; }
.home-section { margin-bottom: 24px; }
.home-story { display: grid; grid-template-columns: 300px minmax(0, 1fr); margin-bottom: 8px; background: var(--panel); color: var(--text); text-decoration: none; }
.home-story:hover { background: var(--panel-raised); color: var(--text); }
.home-story-text { align-self: center; padding: 12px 20px; }
.home-story h3 { margin: 2px 0 4px; font: 800 24px/27px var(--font-display); text-transform: uppercase; color: var(--text); }
.home-story small { display: block; margin-bottom: 4px; font: 600 11px/14px var(--font-ui); color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.home-story p { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-2); }

.home-scores { display: grid; }
.home-score { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 10px 14px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.home-score:hover { background: var(--panel-raised); color: var(--text); }
.home-score-state { grid-column: 1 / -1; font: 600 11px/14px var(--font-ui); color: var(--text-2); text-transform: uppercase; }
.home-score-state.is-live { color: var(--loss); }
.home-score-team { display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 14px/22px var(--font-ui); }
.home-score-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-score-num { font: 700 15px/22px var(--font-ui); font-variant-numeric: tabular-nums; text-align: right; }
.home-score .is-win { font-weight: 800; }
.home-score .is-loss { color: var(--text-2); }

@media (max-width: 1099px) {
  .home-top, .home-main { grid-template-columns: minmax(0, 1fr); }
  .home-stack { grid-auto-rows: auto; }
}
@media (max-width: 767px) {
  .home-story { grid-template-columns: minmax(0, 1fr); }
  .art-row { min-height: 150px; height: 150px; }
  .home-card { min-height: 0; }
}

/* Site header (Danny 2026-11-02): thick wine bar with the league ladder, then the page links, like ESPN's two rows. */
.league-plf { --m1: #FFF4D6; --m2: #FF7A1A; } .league-dlf { --m1: #D7F5FF; --m2: #39B8E8; } .league-glf { --m1: #FFE27A; --m2: #C9971C; }
.league-slf { --m1: #F1F4F7; --m2: #9AA6B2; } .league-ilf { --m1: #8B95A1; --m2: #4A525C; } .league-rlf { --m1: #BFF0B0; --m2: #3DAA55; }
.hdr-plf { --glow: #FF7A1A; } .hdr-dlf { --glow: #39B8E8; } .hdr-glf { --glow: #C9971C; } .hdr-slf { --glow: #9AA6B2; } .hdr-ilf { --glow: #6B7580; } .hdr-rlf { --glow: #3DAA55; }
.hdr-wine { position: relative; overflow: hidden; isolation: isolate; background: var(--gc-wine); color: var(--gc-bone); border-bottom: 1px solid #0B0E13; }
.hdr-wine::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 45% 180% at 96% 50%, color-mix(in srgb, var(--glow) 42%, transparent), transparent 70%), linear-gradient(90deg, rgba(11, 14, 19, .34), transparent 34%); }
.hdr-ghost { position: absolute; z-index: -1; right: 12px; top: 50%; transform: translateY(-50%); font: 800 118px/1 var(--font-display); text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, .07); pointer-events: none; }
.hdr-wine-in { display: flex; align-items: stretch; gap: 24px; min-height: 76px; }
.hdr-wine .brand { display: grid; align-content: center; gap: 2px; flex: none; color: #FFFFFF; }
.hdr-brand { font: 800 30px/28px var(--font-display); letter-spacing: .02em; }
.hdr-wine .brand b { color: var(--gc-bone); opacity: .72; }
.hdr-wine .brand-sub { display: block; font: 700 10px/12px var(--font-ui); letter-spacing: .08em; color: var(--gc-bone); }
.league-nav { display: flex; align-items: stretch; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.league-nav::-webkit-scrollbar { display: none; }
.league-tab { position: relative; display: flex; align-items: center; gap: 9px; flex: none; padding: 0 16px; color: var(--gc-bone); text-decoration: none; isolation: isolate; }
.league-tab::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-12deg); background: transparent; transition: background .15s ease; }
.league-tab:hover { color: #FFFFFF; }
.league-tab:hover::before { background: rgba(0, 0, 0, .2); }
.league-tab[aria-current="true"] { color: #FFFFFF; }
.league-tab[aria-current="true"]::before { background: rgba(11, 14, 19, .5); box-shadow: inset 0 -5px 0 var(--m2); }
.league-gem { flex: none; width: 20px; height: 22px; clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%); background: linear-gradient(145deg, var(--m1) 18%, var(--m2) 62%, color-mix(in srgb, var(--m2) 55%, #0B0E13)); }
.league-tab:hover .league-gem, .league-tab[aria-current="true"] .league-gem { filter: drop-shadow(0 0 7px var(--m2)); }
.league-tab-text { display: grid; }
.league-tab b { font: 800 21px/22px var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.league-tab small { font: 700 10px/12px var(--font-ui); letter-spacing: .08em; opacity: .75; }
.hdr-league { display: inline-flex; align-items: center; gap: 8px; flex: none; font: 800 19px/24px var(--font-display); text-transform: uppercase; color: var(--text); white-space: nowrap; }
.hdr-league .league-gem { width: 15px; height: 17px; }
@media (max-width: 1099px) {
  .hdr-wine-in { gap: 12px; min-height: 66px; }
  .hdr-wine .brand-sub { display: none; }
  .hdr-ghost { font-size: 88px; }
  .league-tab { padding: 0 10px; }
  .league-tab b { font-size: 18px; }
}

.next-card { display: grid; gap: 8px; padding: 12px 14px; background: linear-gradient(120deg, #E0B94A, #C2901F); color: #15110A; }
.next-card a { color: inherit; text-decoration: none; }
.next-game { display: grid; gap: 2px; min-width: 0; }
.next-eyebrow { font: 700 11px/14px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.next-teams { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; }
.next-teams b { font: 800 22px/26px var(--font-display); text-transform: uppercase; }
.next-teams i { font: 700 13px/18px var(--font-display); font-style: normal; text-transform: uppercase; opacity: .7; }
.next-time { font: 600 12px/16px var(--font-ui); }
.next-clock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.next-unit { display: grid; justify-items: center; padding: 5px 2px 3px; background: rgba(21, 17, 10, .16); border-radius: 6px; }
.next-unit b { font: 800 26px/26px var(--font-display); font-variant-numeric: tabular-nums; }
.next-unit small { font: 700 9px/11px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.next-live { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(21, 17, 10, .16); border-radius: 6px; font: 800 20px/24px var(--font-display); text-transform: uppercase; }
.next-dot { width: 10px; height: 10px; border-radius: 50%; background: #B3121A; }
.home-empty { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 8px; margin-bottom: 24px; }
@media (max-width: 767px) { .home-empty { grid-template-columns: minmax(0, 1fr); } }
.hdr-wine .brand { width: max-content; min-width: max-content; grid-template-columns: max-content; }
.hdr-wine .brand-sub { width: max-content; max-width: none; overflow: visible; }
@media (max-width: 767px) {
  .art-lead { height: 300px; }
  .art-lead .art-logos { top: 8%; right: 6%; height: 58%; transform: none; }
  .art-line { font-size: 24px; bottom: 12px; }
}

/* Teams page (Danny 2026-11-02): logo art with record and point diff, then GM and a one-colour cap gauge. */
.club-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.club-count { font: 600 13px/20px var(--font-ui); color: var(--text-2); }
.club-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); transition: border-color .15s ease; }
.club-card:hover, .club-card:focus-within { border-color: color-mix(in srgb, var(--c1, #334050) 45%, var(--gc-bone)); }
.club-card:hover .art-logo { transform: scale(1.05); }
.art-club { height: 136px; }
.art-club .art-ghost { font-size: 84px; left: 8px; bottom: auto; top: -10px; }
.art-club .art-logos { right: 12px; height: 78%; }
.art-club .art-logo { max-width: 124px; }
.club-score { position: absolute; z-index: 1; left: 14px; bottom: 10px; display: grid; color: #FFFFFF; text-shadow: 0 2px 8px rgba(0, 0, 0, .65); }
.club-score b { font: 800 42px/42px var(--font-display); font-variant-numeric: tabular-nums; }
.club-score span { font: 800 16px/20px var(--font-display); font-variant-numeric: tabular-nums; }
.club-score small { font: 700 10px/20px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.club-body { display: grid; gap: 12px; padding: 12px 14px 14px; }
.club-body h3 { margin: 0; font: 800 26px/26px var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.club-link { display: block; color: var(--text); text-decoration: none; }
.club-link::after { content: ""; position: absolute; inset: 0; }
.club-link:hover { color: var(--text); }
.club-link small { display: block; font: 700 11px/16px var(--font-ui); letter-spacing: .08em; color: var(--text-2); }
.club-label { font: 700 10px/16px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.club-gm { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 14px; line-height: 20px; }
.club-gm b { font-weight: 600; }
.club-gm small { flex-basis: 100%; font-size: 12px; line-height: 16px; color: var(--text-2); }
.club-cap { display: grid; gap: 5px; }
.club-cap-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.club-cap-top b { font: 800 22px/22px var(--font-display); font-variant-numeric: tabular-nums; }
.club-cap > small { font-size: 12px; line-height: 16px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.club-gauge { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; padding: 0 2px; }
.club-gauge i { height: 8px; transform: skewX(-14deg); background: rgba(255, 255, 255, .09); }
.club-gauge i.on { background: color-mix(in srgb, var(--c1, #A3AEBD) 45%, var(--gc-bone)); }
.club-action { position: relative; z-index: 1; justify-self: start; }

/* Team page header (Danny 2026-11-02): the home page logo art across the top, one row of tabs under it. */
.tp-hero-art { background: var(--bg); }
.art-team { min-height: 268px; }
.art-team .art-ghost { font-size: clamp(96px, 17vw, 250px); left: max(8px, calc(50% - 628px)); bottom: auto; top: -.1em; }
.art-team .art-blur { width: 56%; }
.art-team .art-logos { right: max(16px, calc(50% - 604px)); height: 216px; }
.art-team .art-logo { max-width: 300px; }
.tp-art-in { position: relative; z-index: 1; display: grid; align-content: end; gap: 14px; box-sizing: border-box; max-width: 1240px; min-height: 268px; margin: 0 auto; padding: 24px 340px 20px 16px; color: #FFFFFF; text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 2px 10px rgba(0, 0, 0, .55); }
.tp-art-name { margin: 0; color: #FFFFFF; font: 800 clamp(44px, 6vw, 72px)/.95 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.tp-art-name small { display: block; margin-bottom: 2px; font: 700 14px/18px var(--font-ui); letter-spacing: .1em; opacity: .9; }
.tp-facts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 28px; }
.tp-fact { display: grid; gap: 2px; min-width: 0; }
.tp-fact b { display: flex; align-items: center; gap: 6px; font: 800 22px/26px var(--font-display); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.tp-fact > span { font: 700 11px/14px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; opacity: .88; font-variant-numeric: tabular-nums; }
.tp-fact-rec b { font-size: 44px; line-height: 44px; }
.tp-fact .pill { flex: none; padding: 0 7px; font: 700 11px/18px var(--font-ui); text-shadow: none; }
.tp-art-note { margin: 0; font-size: 14px; line-height: 20px; }
.tp-art-note a { color: #FFFFFF; font-weight: 700; }
.tp-tabs ul { flex-wrap: wrap; }
.tp-tabs .fo-tabs-l { font: 600 12px/44px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: rgba(232, 225, 211, .6); white-space: nowrap; margin-left: 16px; padding-left: 16px; border-left: 1px solid rgba(232, 225, 211, .18); }
.tp-hero-art .pp-tabs a.is-active, .tp-hero-art .pp-tabs a.is-active:hover, .tp-hero-art .pp-tabs a.is-active:focus-visible { border-bottom-color: color-mix(in srgb, var(--c1, #7A1E22) 45%, var(--gc-bone)); }
.tp-stlist { padding: 0 16px 8px; }
@media (max-width: 767px) {
  .art-team .art-ghost { font-size: 92px; left: 8px; top: -8px; }
  .art-team .art-logos { top: 12px; right: 12px; height: 96px; transform: none; }
  .art-team .art-logo { max-width: 120px; }
  .tp-art-in { min-height: 0; padding: 20px 16px 16px; }
  .tp-art-name { min-height: 88px; padding-right: 128px; font-size: 40px; display: flex; flex-direction: column; justify-content: flex-end; }
  .tp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; align-items: end; }
  .tp-fact-gm { grid-column: 1 / -1; }
  .tp-tabs a { height: 38px; padding: 0 6px; font-size: 14px; line-height: 38px; }
  .tp-tabs .fo-tabs-l { flex-basis: 100%; margin-left: 0; padding-left: 6px; border-left: 0; line-height: 26px; border-top: 1px solid rgba(232, 225, 211, .12); }
}

/* Personnel page (Danny 2026-11-02): one list like OOTP's, word grades, full ratings when a row opens. */
.st-budget { margin: 16px 0 24px; padding: 12px 14px; }
.st-list { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); overflow: hidden; }
.st-line { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr) 44px 92px minmax(0, 1.6fr) 84px 68px 18px; align-items: center; gap: 12px; padding: 9px 14px; font-size: 14px; line-height: 20px; }
summary.st-line { cursor: pointer; list-style: none; }
summary.st-line::-webkit-details-marker { display: none; }
.st-row { border-top: 1px solid var(--border); }
.st-row summary:hover, .st-row[open] > summary { background: var(--panel-raised); }
.st-head { background: var(--panel-raised); font: 700 11px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.st-pos { color: var(--text-2); }
.st-name { font-weight: 600; min-width: 0; }
.st-type { color: var(--text-2); font-size: 13px; }
.st-age, .st-pay, .st-thru { font-variant-numeric: tabular-nums; text-align: right; }
.st-chev { width: 8px; height: 8px; justify-self: end; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(-45deg); transition: transform .15s ease; }
.st-row[open] .st-chev { transform: rotate(45deg); }
.grade { font-weight: 700; }
.grade-poor { color: var(--loss); } .grade-fair { color: #FF9A4D; } .grade-average { color: var(--warning); } .grade-good { color: var(--success); } .grade-excellent { color: #4FD8D0; }
.st-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 32px; padding: 14px 14px 16px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--c1, #334050) 10%, var(--bg)); }
.st-detail h4 { margin: 0 0 6px; font: 700 11px/16px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.st-detail p { margin: 0 0 10px; font-size: 14px; line-height: 20px; }
.st-grades { display: grid; gap: 0; margin: 0; }
.st-grades > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 13px; line-height: 18px; }
.st-grades > div:first-child { border-top: 0; }
.st-grades dt { font-weight: 500; color: var(--text-2); }
.st-grades dd { display: flex; gap: 8px; margin: 0; }
.st-grades small { min-width: 20px; font-size: 12px; line-height: 18px; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.st-grades small.st-plain { font-size: 13px; font-weight: 700; color: var(--text); }
.st-side form + form { margin-top: 10px; }
.st-side .staff-book { margin-bottom: 10px; }
.staff-page .staff-tabs { flex-wrap: wrap; margin-bottom: 12px; }
@media (max-width: 767px) {
  .st-line { grid-template-columns: minmax(0, 1fr) 76px 66px 14px; gap: 2px 8px; padding: 9px 12px; }
  .st-pos { grid-column: 1 / -1; font-size: 12px; line-height: 16px; }
  .st-age, .st-type, .st-thru { display: none; }
  .st-head .st-pos { display: none; }
  .st-pay { text-align: left; }
}
.st-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 16px 0 24px; }
.st-top .st-budget { margin: 0; }
.st-line { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) 36px 78px 104px minmax(0, 1.1fr) minmax(0, 1.1fr) 72px 58px 14px; gap: 10px; }
.st-pers, .st-with { font-size: 13px; }
.st-with i { font-style: normal; color: var(--text-2); font-variant-numeric: tabular-nums; }
.st-mood-united { color: #4FD8D0; } .st-mood-content { color: var(--success); } .st-mood-uneasy { color: var(--warning); } .st-mood-tense { color: var(--loss); }
@media (max-width: 1099px) {
  .st-line { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) 78px 104px 72px 14px; }
  .st-age, .st-with, .st-thru { display: none; }
}
@media (max-width: 767px) {
  .st-line { grid-template-columns: minmax(0, 1fr) 76px 66px 14px; gap: 2px 8px; }
  .st-pers { display: none; }
}
.st-head .st-pers, .st-head .st-with { font-size: 11px; }
.st-line { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) 36px 78px 104px minmax(0, 1.1fr) minmax(0, 1.1fr) 72px 78px 14px; }
.st-chem-link { position: relative; z-index: 1; color: inherit; }
.chem-card { padding-bottom: 14px; }
.chem-card .pp-card-h b { font: 800 24px/24px var(--font-display); text-transform: uppercase; }
.chem-gauge { display: grid; margin: 4px 16px 10px; }
.chem-parts { padding: 0 16px; }
.chem-note { margin: 10px 16px 0; font-size: 12px; line-height: 16px; color: var(--text-2); }
@media (max-width: 1099px) {
  .st-line { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) 78px 104px 72px 78px 14px; }
}
@media (max-width: 767px) {
  .st-line { grid-template-columns: minmax(0, 1fr) 76px 66px 14px; }
  .st-rel { display: none; }
}

/* Player contract tab (Danny 2026-11-02): banner like Spotrac's in our logo art, then tiles and the year-by-year terms. */
.ct-banner { margin-bottom: 12px; overflow: hidden; border-radius: var(--r-panel); }
.art-contract { min-height: 196px; }
.art-contract .art-ghost { font-size: 110px; left: 8px; bottom: auto; top: -14px; }
.art-contract .art-logos { left: 18px; right: auto; height: 104px; }
.art-contract .art-logo { max-width: 124px; }
.art-contract .art-blur { left: -10%; right: auto; width: 60%; }
.ct-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 16px; min-height: 196px; box-sizing: border-box; padding: 16px 18px 16px 156px; color: #FFFFFF; text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 2px 10px rgba(0, 0, 0, .55); }
.ct-lead { align-self: center; }
.ct-kicker { font: 700 11px/16px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.ct-lead h2 { margin: 2px 0 6px; color: #FFFFFF; font: 800 34px/36px var(--font-display); text-transform: uppercase; }
.ct-lead p { margin: 0; font-size: 14px; line-height: 20px; }
.ct-stats { display: grid; align-content: center; gap: 8px; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .3); }
.ct-stat { display: grid; }
.ct-stat span, .ct-tiles span { font: 700 10px/14px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.ct-stat b { font: 800 24px/26px var(--font-display); font-variant-numeric: tabular-nums; }
.ct-stat small { font-size: 11px; line-height: 14px; }
.ct-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
.ct-tiles > div { display: grid; gap: 2px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); }
.ct-tiles span { color: var(--text-2); }
.ct-tiles b { font: 800 22px/24px var(--font-display); font-variant-numeric: tabular-nums; }
.ct-table .is-now th, .ct-table .is-now td { background: rgba(255, 255, 255, .05); }
.ct-fa-tag { display: inline-block; padding: 1px 8px; border: 1px solid var(--border); border-radius: 4px; font: 700 11px/18px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
@media (max-width: 767px) {
  .art-contract .art-logos { left: auto; right: 12px; top: 12px; height: 60px; transform: none; }
  .art-contract .art-ghost { font-size: 72px; top: -8px; }
  .ct-in { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .ct-lead { padding-right: 76px; }
  .ct-lead h2 { font-size: 28px; line-height: 30px; }
  .ct-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .3); }
  .ct-stat b { font-size: 20px; line-height: 22px; }
  .ct-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ct-out td { padding: 6px 8px; background: color-mix(in srgb, var(--accent) 14%, transparent); font: 700 11px/16px var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--text); text-align: center; }

/* Player profile (Danny 2026-11-02): Spotrac-style header in our logo art, then six tabs. */
.art-profile { min-height: 256px; }
.art-profile .art-ghost { font-size: clamp(96px, 15vw, 210px); left: max(8px, calc(50% - 628px)); bottom: auto; top: -.1em; }
.art-profile .art-logos { left: max(16px, calc(50% - 604px)); right: auto; height: 170px; }
.art-profile .art-logo { max-width: 190px; }
.art-profile .art-blur { left: 0; right: auto; width: 50%; }
.pf-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 24px; box-sizing: border-box; max-width: 1240px; min-height: 256px; margin: 0 auto; padding: 20px 16px 16px 226px; color: #FFFFFF; text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 2px 10px rgba(0, 0, 0, .55); }
.pf-main { display: grid; align-content: center; gap: 8px; min-width: 0; }
.pf-main h1 { margin: 0; color: #FFFFFF; font: 800 clamp(40px, 5vw, 60px)/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.pf-role { margin: 0; font: 600 15px/22px var(--font-ui); }
.pf-role a { color: #FFFFFF; }
.pf-line { margin: 0; font-size: 14px; line-height: 20px; }
.pf-bio { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 4px 0 0; padding: 10px 0; background: rgba(11, 14, 19, .34); border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; }
.pf-bio > div { padding: 0 14px; border-left: 1px solid rgba(255, 255, 255, .18); }
.pf-bio > div:first-child { border-left: 0; }
.pf-bio dt { font: 700 10px/14px var(--font-ui); letter-spacing: .07em; text-transform: uppercase; opacity: .85; }
.pf-bio dd { margin: 0; font-size: 13px; font-weight: 600; line-height: 18px; }
.pf-stats { display: grid; align-content: center; gap: 8px; padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .28); }
.pf-stats h2 { margin: 0; color: #FFFFFF; font: 700 10px/14px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.pf-stat { display: grid; }
.pf-stat span { font: 700 10px/14px var(--font-ui); letter-spacing: .07em; text-transform: uppercase; }
.pf-stat span a { color: #FFFFFF; }
.pf-stat b { font: 800 26px/27px var(--font-display); font-variant-numeric: tabular-nums; }
.pf-stat small { font-size: 11px; line-height: 14px; }
.pf-hero .pp-tabs ul { flex-wrap: wrap; }
.pf-hero .pp-tabs a.is-active, .pf-hero .pp-tabs a.is-active:hover, .pf-hero .pp-tabs a.is-active:focus-visible { border-bottom-color: color-mix(in srgb, var(--c1, #7A1E22) 45%, var(--gc-bone)); }
.pf-sub { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pf-sub a { padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; font: 600 13px/20px var(--font-ui); color: var(--text-2); text-decoration: none; }
.pf-sub a:hover { color: var(--text); }
.pf-sub a[aria-current="page"] { background: var(--panel-raised); color: var(--text); }
.ct-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ct-tiles small { font-size: 11px; line-height: 14px; color: var(--text-2); }
.pf-timeline { margin: 0; padding: 4px 16px 14px; list-style: none; }
.pf-timeline li { display: grid; gap: 2px; padding: 8px 0 8px 16px; border-left: 2px solid var(--border); font-size: 14px; line-height: 20px; }
.pf-timeline b { font-size: 13px; }
.trade-tag { display: inline-block; padding: 0 7px; border: 1px solid rgba(232, 225, 211, .3); border-radius: 4px; font: 700 10px/18px var(--font-ui); letter-spacing: .05em; text-transform: uppercase; text-shadow: none; white-space: nowrap; }
.pf-role .trade-tag { background: rgba(11, 14, 19, .5); }
.trade-untouchable { color: #4FD8D0; border-color: #4FD8D0; }
.trade-on_block { color: var(--accent); border-color: var(--accent); }
.pf-trade { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 16px; font-size: 12px; }
.pf-trade select { background: #0B0E13; color: #E8E1D3; border: 1px solid rgba(232, 225, 211, .25); border-radius: 4px; padding: 2px 6px; }
@media (max-width: 1099px) {
  .pf-in { padding-left: 170px; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; }
  .art-profile .art-logos { height: 120px; }
  .art-profile .art-logo { max-width: 140px; }
  .pf-stats { padding-left: 12px; }
}
@media (max-width: 767px) {
  .art-profile .art-ghost { font-size: 76px; left: 8px; top: -6px; }
  .art-profile .art-logos { left: auto; right: 12px; top: 12px; height: 76px; transform: none; }
  .art-profile .art-logo { max-width: 90px; }
  .pf-in { display: block; min-height: 0; padding: 16px; }
  .pf-main h1 { font-size: 36px; padding-right: 96px; }
  .pf-role { padding-right: 96px; }
  .pf-bio { display: grid; grid-template-columns: 1fr 1fr; padding: 10px 12px; gap: 8px 12px; }
  .pf-bio > div { padding: 0; border-left: 0; }
  .pf-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; padding: 10px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .28); }
  .pf-stats h2 { flex-basis: 100%; }
  .pf-stat b { font-size: 22px; line-height: 24px; }
  .ct-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.art-profile .art-logos { display: none; }
.pf-in { grid-template-columns: 176px minmax(0, 1fr) 190px; padding-left: 16px; }
.pf-avatar { position: relative; align-self: center; width: 164px; height: 164px; border-radius: 50%; background: linear-gradient(145deg, color-mix(in srgb, var(--c1, #334050) 80%, #FFFFFF) 0%, var(--c1, #334050) 45%, color-mix(in srgb, var(--c2, #11151C) 70%, #0B0E13) 100%); border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
.pf-avatar img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .55)); }
.pf-avatar-pos { position: absolute; inset: 0; display: grid; place-items: center; font: 800 44px/1 var(--font-display); color: #FFFFFF; }
.pf-rating { position: absolute; right: -4px; bottom: 2px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #0B0E13; border: 3px solid #FFFFFF; font: 800 26px/1 var(--font-display); color: #FFFFFF; text-shadow: none; font-variant-numeric: tabular-nums; }
@media (max-width: 1099px) {
  .pf-in { grid-template-columns: 124px minmax(0, 1fr) 150px; padding-left: 12px; }
  .pf-avatar { width: 116px; height: 116px; }
  .pf-rating { width: 42px; height: 42px; font-size: 21px; }
}
@media (max-width: 767px) {
  .pf-in { display: block; padding: 16px; }
  .pf-avatar { float: right; width: 84px; height: 84px; margin: 0 2px 6px 8px; }
  .pf-rating { width: 34px; height: 34px; font-size: 17px; border-width: 2px; right: -6px; bottom: -2px; }
  .pf-main h1, .pf-role { padding-right: 0; }
  .pf-bio { clear: both; }
  .pf-avatar-pos { font-size: 28px; }
}
.pf-in { grid-template-columns: 176px minmax(0, 1fr); }
.pf-stats { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px 0; padding: 10px 0; background: rgba(11, 14, 19, .34); border: 1px solid rgba(255, 255, 255, .16); border-left: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; }
.pf-stats h2 { display: flex; align-items: center; padding: 0 14px; opacity: 1; }
.pf-stat { display: block; padding: 0 16px; border-left: 1px solid rgba(255, 255, 255, .18); }
.pf-stat span { display: block; opacity: .85; white-space: nowrap; }
.pf-stat p { margin: 0; white-space: nowrap; }
.pf-stat b { font: 800 24px/26px var(--font-display); }
.pf-stat small { font-size: 12px; font-weight: 600; line-height: 26px; }
@media (max-width: 1099px) {
  .pf-in { grid-template-columns: 124px minmax(0, 1fr); }
  .pf-stats { padding-left: 0; }
}
@media (max-width: 767px) {
  .pf-in { display: block; }
  .pf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 8px; padding: 10px 12px; }
  .pf-stats h2 { grid-column: 1 / -1; padding: 0; }
  .pf-stat { padding: 0; border-left: 0; }
  .pf-stat b { font-size: 22px; line-height: 24px; }
}
.pf-stat small { font-size: 11px; font-weight: 500; line-height: 26px; opacity: .85; }
.pf-in { grid-template-columns: 176px minmax(0, 1fr) max-content; }
.pf-stats { display: grid; align-content: center; gap: 10px; padding: 0 0 0 20px; background: none; border: 0; border-left: 1px solid rgba(255, 255, 255, .28); border-radius: 0; }
.pf-stats h2 { display: block; padding: 0; opacity: .85; }
.pf-stat { padding: 0; border-left: 0; }
@media (max-width: 1099px) {
  .pf-in { grid-template-columns: 124px minmax(0, 1fr) max-content; }
  .pf-stats { padding-left: 12px; }
}
@media (max-width: 767px) {
  .pf-in { display: block; }
  .pf-stats { grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 8px; padding: 10px 12px; background: rgba(11, 14, 19, .34); border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; }
  .pf-stats h2 { grid-column: 1 / -1; }
}
/* Header stats line up with the side panel below (300px, same gap). */
@media (min-width: 1100px) {
  .pf-in { grid-template-columns: 176px minmax(0, 1fr) 300px; gap: 20px; padding-right: 10px; }
  .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 14px 12px; padding: 0 0 0 20px; }
  .pf-stats h2 { grid-column: 1 / -1; }
}
/* Bigger header stats, sized to fit 88,888 (Tied 11th) on one line. */
@media (min-width: 1100px) {
  .pf-stats { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pf-stats h2 { font-size: 13px; line-height: 16px; }
  .pf-stat span { font-size: 13px; line-height: 16px; }
  .pf-stat b { font-size: 36px; line-height: 36px; }
  .pf-stat small { font-size: 15px; line-height: 36px; }
}
/* Side by side: stats in two columns, each ranking under its number. */
@media (min-width: 1100px) {
  .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 12px; }
  .pf-stat p { white-space: normal; }
  .pf-stat b { display: block; }
  .pf-stat small { display: block; line-height: 18px; }
}
@media (max-width: 767px) {
  .pf-stat b { display: block; }
  .pf-stat small { display: block; line-height: 16px; }
}
.admin-brand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 12px; }
@media (max-width: 767px) { .admin-brand { grid-template-columns: minmax(0, 1fr); } }
.next-now { display: flex; align-items: center; gap: 6px; }
.next-score { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 8px 10px; background: rgba(21, 17, 10, .16); border-radius: 6px; }
.next-score-team { display: flex; align-items: center; gap: 6px; min-width: 0; }
.next-score-team b { font: 800 22px/28px var(--font-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-score-num { font: 800 28px/28px var(--font-display); font-variant-numeric: tabular-nums; text-align: right; }
.next-score-time { grid-column: 1 / -1; font: 700 12px/16px var(--font-ui); letter-spacing: .04em; text-transform: uppercase; }
.next-card .next-score, .next-card .next-score-num, .next-card .next-score-time { color: #15110A; }
.next-card .next-score-time { opacity: .8; }
.next-clock { display: flex; align-items: flex-end; gap: 22px; }
.next-unit { display: grid; justify-items: start; padding: 0; background: none; border-radius: 0; }
.next-unit[hidden] { display: none; }
.next-unit b { font-size: 38px; line-height: 38px; }
.next-unit small { font-size: 11px; line-height: 14px; }
.next-clock { justify-content: flex-end; padding-right: 8px; }
.next-unit { transition: opacity 3s linear; }
.next-unit.is-fading { opacity: 0; }
/* Each unit keeps a fixed slot against the right edge, so no number shifts when another changes or drops off. */
.next-unit { justify-items: end; }
.next-unit b { min-width: 2ch; text-align: right; }
.next-eyebrow { font-size: 14px; line-height: 18px; }
.next-teams { gap: 4px 8px; margin-top: 2px; }
.next-teams b { font-size: 32px; line-height: 40px; }
.next-teams i { font-size: 16px; }
.next-time { font-size: 15px; line-height: 20px; margin-top: 2px; }
.next-matchup { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin: 4px 0; }
.next-side { display: grid; justify-items: center; gap: 4px; min-width: 0; text-align: center; }
.next-side b { font-size: 26px; line-height: 28px; overflow-wrap: anywhere; }
.next-matchup i { font-size: 18px; }
.next-side b { overflow-wrap: normal; }
.next-side.is-long b { font-size: 21px; line-height: 24px; }
/* Logos lead the card; the week and kickoff sit under them. */
.next-game { justify-items: center; text-align: center; }
.next-matchup { order: -1; width: 100%; }
.next-side { gap: 2px; }
.next-side b { font-size: 20px; line-height: 22px; letter-spacing: .03em; }
.next-side.is-long b { font-size: 17px; line-height: 20px; }
.next-matchup { gap: 4px; margin: 0; }
.next-matchup i { font-size: 15px; }
.bug-form { max-width: 680px; }
/* Lead story grows with the column beside it, so a tall gold card leaves no empty panel. */
@media (min-width: 992px) {
  .home-lead { display: flex; flex-direction: column; }
  .home-lead .art-lead { flex: 1 1 auto; height: auto; min-height: clamp(260px, 30vw, 420px); }
  .home-stack { grid-auto-rows: auto; align-content: start; }
}