/* ============================================================
   THE COLD FRONT — Chicago Bears Fan Hub
   Independent fan site. Navy / orange / steel / frost palette.
   All-in-one: news · games · stats · odds · injuries · practice · roster
   ============================================================ */

:root {
  --navy: #060d18;
  --navy-2: #0a1524;
  --navy-3: #12233a;
  --navy-4: #1a304c;
  --orange: #d13a02;
  --orange-hot: #ff5a1f;
  --orange-glow: rgba(255, 90, 31, 0.72);
  --steel: #6a88a8;
  --ice: #a8c0d4;
  --frost: #e2ecf6;
  --snow: #f7fafc;
  --ink: #040a14;
  --text: #d0dce8;
  --text-dim: #8fa3b8;
  --ok: #4caf7d;
  --warn: #e0a437;
  --line: rgba(159, 184, 204, 0.16);
  --line-2: rgba(159, 184, 204, 0.32);
  --card: rgba(8, 18, 32, 0.82);
  --card-solid: #0e1c30;
  --glass: rgba(8, 18, 34, 0.68);
  --glass-deep: rgba(4, 10, 20, 0.82);
  --glass-border: rgba(159, 184, 204, 0.22);
  --glass-border-hot: rgba(255, 90, 31, 0.72);
  --shadow: 0 22px 56px rgba(0, 4, 12, 0.78);
  --shadow-lift: 0 28px 64px rgba(0, 4, 12, 0.72);
  --shadow-glow: 0 0 64px rgba(209, 58, 2, 0.32);
  --rim-glow: 0 0 0 1px rgba(255, 90, 31, 0.55), 0 0 36px rgba(209, 58, 2, 0.42), 0 0 72px rgba(209, 58, 2, 0.18);
  --radius: 16px;
  --radius-sm: 11px;
  --display: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Code", "SF Mono", Consolas, monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background-color: var(--navy);
  background-image:
    /* stadium floodlights + night depth — hotter orange, deeper navy */
    radial-gradient(ellipse 1200px 720px at 6% -14%, rgba(255, 90, 31, 0.38), transparent 54%),
    radial-gradient(ellipse 980px 560px at 92% -6%, rgba(255, 140, 60, 0.18), transparent 52%),
    radial-gradient(ellipse 700px 480px at 50% -8%, rgba(209, 58, 2, 0.16), transparent 60%),
    radial-gradient(ellipse 1200px 700px at 98% 20%, rgba(92, 122, 153, 0.28), transparent 56%),
    radial-gradient(ellipse 900px 620px at 48% 110%, rgba(209, 58, 2, 0.28), transparent 50%),
    radial-gradient(ellipse 600px 420px at 62% 42%, rgba(6, 13, 24, 0.7), transparent 68%),
    radial-gradient(ellipse 480px 320px at 22% 55%, rgba(4, 10, 20, 0.55), transparent 70%),
    /* deep navy-black base */
    linear-gradient(168deg, #02060e 0%, #040a14 16%, var(--navy) 40%, #071222 68%, var(--navy-2) 100%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  line-height: 1.55;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* ---------- Cinematic atmosphere layers (injected by common.js) ---------- */
.cf-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Soft aurora / frost haze */
.cf-atmosphere .cf-aurora {
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(ellipse 48% 38% at 18% 28%, rgba(159, 184, 204, 0.16), transparent 62%),
    radial-gradient(ellipse 44% 34% at 82% 48%, rgba(255, 90, 31, 0.18), transparent 58%),
    radial-gradient(ellipse 55% 42% at 48% 82%, rgba(92, 122, 153, 0.14), transparent 62%),
    radial-gradient(ellipse 34% 26% at 55% 14%, rgba(209, 58, 2, 0.12), transparent 70%);
  filter: blur(44px);
  animation: auroraDrift 28s ease-in-out infinite alternate;
  opacity: 0.88;
}

@keyframes auroraDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(2%, -1.5%) scale(1.04); }
  100% { transform: translate(-1.5%, 2%) scale(1.02); }
}

/* Animated cold-front diagonal bands */
.cf-atmosphere .cf-bands {
  position: absolute;
  inset: -10%;
  background:
    repeating-linear-gradient(
      -28deg,
      transparent 0 42px,
      rgba(255, 90, 31, 0.045) 42px 45px,
      transparent 45px 88px,
      rgba(159, 184, 204, 0.032) 88px 91px
    ),
    repeating-linear-gradient(
      -32deg,
      transparent 0 110px,
      rgba(255, 90, 31, 0.02) 110px 112px
    );
  animation: bandSlide 48s linear infinite;
  opacity: 0.85;
  mix-blend-mode: screen;
  will-change: background-position;
}

@keyframes bandSlide {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 320px 160px, -180px 90px; }
}

/* Fine noise / frost grain */
.cf-atmosphere .cf-noise {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

/* Original geometric Chicago skyline + stadium silhouette (not a trademark) */
.cf-atmosphere .cf-skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(38vh, 380px);
  opacity: 0.55;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 280' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%237a9ab8' stop-opacity='0.72'/%3E%3Cstop offset='100%25' stop-color='%230b1626' stop-opacity='0.95'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0 280V168h28v-40h18v40h22V90h14v-22h10v22h14v78h36V120h12V72h8V48h6v24h8v48h12v48h40V140h20v-30h16v30h14v40h30V100h10V60h8V36h6v24h8v40h10v80h26V155h18v25h22V80h14v-18h10v18h14v100h34V130h40v-50h16v-28h12v28h16v50h28v50h50V175h60v-45h80v45h40v35h70V200h40v-20h30v20h50v80H0z'/%3E%3C!-- stylized stadium bowl (original geometry) --%3E%3Cellipse cx='720' cy='248' rx='160' ry='22' fill='%230b1626' opacity='0.7'/%3E%3Cpath fill='%23c83803' opacity='0.5' d='M580 230 Q720 200 860 230 L850 248 Q720 225 590 248 Z'/%3E%3Cpath fill='none' stroke='%23e8541e' stroke-opacity='0.65' stroke-width='1.5' d='M600 238 Q720 215 840 238'/%3E%3C/svg%3E");
}

/* Soft vignette */
.cf-atmosphere .cf-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 68% 54% at 50% 34%, transparent 36%, rgba(2, 6, 14, 0.72) 100%),
    linear-gradient(180deg, rgba(2, 6, 14, 0.35) 0%, transparent 16%, transparent 68%, rgba(2, 6, 14, 0.7) 100%),
    linear-gradient(90deg, rgba(2, 6, 14, 0.35) 0%, transparent 18%, transparent 82%, rgba(2, 6, 14, 0.35) 100%);
}

/* Snow canvas sits with atmosphere — clearly visible, never blocks UI */
#snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.76;
}

main, header.site-head, footer.site-foot, .weather-strip { position: relative; z-index: 2; }

a { color: var(--ice); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--snow); }
code, .mono { font-family: var(--mono); font-size: 0.86em; }
img { max-width: 100%; display: block; }
::selection { background: var(--orange); color: #fff; }

.wrap { width: min(1200px, 94%); margin: 0 auto; }
.mono { font-family: var(--mono); }
.dim { color: var(--text-dim); }
.orange { color: var(--orange-hot); }
.hidden { display: none !important; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--snow);
  text-transform: uppercase;
}

.section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 64px 0 24px;
  flex-wrap: wrap;
}
.section-head h2 {
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 0 48px rgba(255, 90, 31, 0.28), 0 2px 12px rgba(0,0,0,0.4);
}
.section-head .rule {
  flex: 1;
  height: 4px;
  min-width: 40px;
  background: linear-gradient(90deg, var(--orange-hot) 0 18%, var(--orange) 18% 34%, rgba(159,184,204,0.35) 34%, transparent 100%);
  border-radius: 3px;
  box-shadow: 0 0 18px rgba(255, 90, 31, 0.45), 0 0 4px rgba(255, 90, 31, 0.35);
}
.section-head .tag {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--frost);
  border: 1px solid rgba(255, 90, 31, 0.35);
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(8, 16, 28, 0.65);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 16px rgba(209, 58, 2, 0.12);
}
.eyebrow {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--orange-hot);
  text-transform: uppercase;
  margin-bottom: 8px;
  text-shadow: 0 0 28px rgba(255, 90, 31, 0.55), 0 0 8px rgba(255, 90, 31, 0.35);
}

/* ---------- Weather strip ---------- */
.weather-strip {
  background: linear-gradient(90deg, rgba(7, 14, 26, 0.92), rgba(16, 31, 51, 0.88) 50%, rgba(7, 14, 26, 0.92));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 13px;
}
.weather-strip .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 9px 0;
  flex-wrap: wrap;
}
.weather-strip .wx-brand {
  font-family: var(--display);
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--orange-hot);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.wx-icon { font-style: normal; line-height: 1; }

/* v1.46.0 — weather strip glow-up: the family identity thread now runs across
   the top of the page's first band (dim at rest — the strip carries no hover
   surface), tying the signature strip into the site's orange/ice language. */
.weather-strip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--orange-hot) 45%, rgba(159,184,204,0.35) 80%, transparent);
  opacity: 0.5;
  pointer-events: none;
}
.wx-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wx-item b { color: var(--snow); font-weight: 600; }
.wx-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--steel); display: inline-block; }
.wx-gauge {
  margin-left: auto;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--ice);
  white-space: nowrap;
  background: rgba(11, 22, 38, 0.5);
}
.wx-gauge.blizzard { color: #fff; background: rgba(200, 56, 3, 0.32); border-color: var(--orange); box-shadow: 0 0 16px rgba(200, 56, 3, 0.25); }
.wx-gauge.cruncher { color: var(--frost); background: rgba(92, 122, 153, 0.35); }
.wx-gauge.mild { color: #b9e3c6; background: rgba(76, 175, 125, 0.18); border-color: rgba(76, 175, 125, 0.5); }
.wx-offline { color: var(--warn); }

/* v1.17.0 — Cold Front Index frost dial: the strip's signature instrument. */
.wx-gauge.cfi-dial-wrap {
  padding: 3px 10px 2px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.cfi-dial { display: block; }
.cfi-track { stroke: rgba(157, 180, 204, 0.22); stroke-width: 7; stroke-linecap: round; }
.cfi-value {
  stroke-width: 7;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(159, 216, 255, 0.35));
}
.cfi-ticks line { stroke: rgba(157, 180, 204, 0.55); stroke-width: 1.5; stroke-linecap: round; }
.cfi-needle line { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.cfi-needle circle { fill: #fff; }
.cfi-num {
  fill: var(--snow);
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cfi-cap {
  fill: var(--steel);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
@media (prefers-reduced-motion: reduce) {
  .cfi-value { filter: none; }
}
@media (max-width: 700px) {
  .wx-gauge.cfi-dial-wrap { margin-left: 0; }
}

/* Cold Front Index sparkline (weather strip) */
.wx-cfi {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}
.cfi-spark-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(157, 180, 204, 0.28);
  background: rgba(10, 22, 40, 0.45);
}
.cfi-spark { display: block; color: var(--frost); opacity: 0.95; }
.cfi-spark.blizzard { color: #ffb089; }
.cfi-spark.cruncher { color: var(--frost); }
.cfi-spark.mild { color: #9ad7b0; }
.cfi-spark-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--steel);
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .wx-cfi { margin-left: 0; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .cfi-spark-wrap { margin-left: 0; }
}

/* ---------- Nav ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(2, 6, 14, 0.88);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  border-bottom: 1px solid rgba(255, 90, 31, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 90, 31, 0.12);
  transition: background-color 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 11px 0;
  transition: padding 0.28s ease;
}
/* v1.26.0 — condensed chrome: once the page scrolls, the sticky header
   tightens so more content stays in view. */
body.is-scrolled .site-head {
  background: rgba(2, 6, 14, 0.96);
  border-bottom-color: rgba(255, 90, 31, 0.32);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.62), 0 1px 0 rgba(255, 90, 31, 0.2);
}
body.is-scrolled .site-head .wrap { padding: 5px 0; }
body.is-scrolled .brand .mark { width: 30px; height: 30px; }
body.is-scrolled .brand .name { font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
  .site-head, .site-head .wrap, .brand .mark, .brand .name { transition: none; }
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--snow); }
.brand:hover { color: var(--snow); }
.brand .mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 10px rgba(200, 56, 3, 0.35));
  transition: filter 0.2s ease, transform 0.2s ease, width 0.28s ease, height 0.28s ease;
}
.brand:hover .mark {
  filter: drop-shadow(0 0 14px rgba(232, 84, 30, 0.55));
  transform: translateY(-1px);
}
.brand .name {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.1em;
  line-height: 1.05;
  text-transform: uppercase;
  transition: font-size 0.28s ease;
}
.brand .name small {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--ice);
  font-weight: 500;
}
.nav { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.nav a {
  position: relative;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ice);
  padding: 9px 13px;
  border-radius: 10px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.18s var(--ease-out), background 0.18s var(--ease-out), border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange-hot);
  box-shadow: 0 0 10px rgba(232, 84, 30, 0.55);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s var(--ease-out);
  opacity: 0.95;
}
.nav a:hover {
  color: var(--snow);
  background: rgba(92, 122, 153, 0.14);
  border-color: rgba(159, 184, 204, 0.1);
}
.nav a:hover::after { transform: scaleX(1); }
.nav a.active {
  color: var(--snow);
  border-color: rgba(255, 90, 31, 0.7);
  background: linear-gradient(180deg, rgba(209, 58, 2, 0.38), rgba(209, 58, 2, 0.16));
  box-shadow: 0 0 28px rgba(209, 58, 2, 0.4), 0 0 8px rgba(255, 90, 31, 0.25), inset 0 1px 0 rgba(255, 180, 140, 0.14);
}
.nav a.active::after {
  transform: scaleX(1);
  bottom: 3px;
  left: 10px;
  right: 10px;
}
.nav a.nav-x {
  color: var(--orange-hot);
  border-color: rgba(200, 56, 3, 0.45);
  background: rgba(200, 56, 3, 0.08);
}
.nav a.nav-x::after { display: none; }
.nav a.nav-x:hover {
  background: rgba(200, 56, 3, 0.22);
  color: var(--snow);
}
.nav-toggle {
  display: none;
  margin-left: auto;
  background: linear-gradient(135deg, rgba(27, 75, 143, 0.75), rgba(11, 22, 42, 0.85));
  border: 1px solid rgba(232, 84, 30, 0.45);
  color: var(--orange);
  border-radius: 10px;
  padding: 8px 13px;
  font-size: 18px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 12px rgba(232, 84, 30, 0.12);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.nav-toggle:hover {
  border-color: rgba(232, 84, 30, 0.75);
  background: linear-gradient(135deg, rgba(36, 96, 180, 0.85), rgba(13, 28, 54, 0.9));
  box-shadow: 0 0 20px rgba(200, 56, 3, 0.35);
}

@media (max-width: 960px) {
  .nav-toggle { display: block; position: relative; z-index: 70; }
  .site-head { overflow: visible; }
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* sit just under the sticky header — JS can refine via --cf-head-h */
    margin-top: var(--cf-head-h, 64px);
    max-height: calc(100dvh - var(--cf-head-h, 64px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: rgba(5, 11, 22, 0.98);
    backdrop-filter: blur(20px) saturate(1.15);
    -webkit-backdrop-filter: blur(20px) saturate(1.15);
    border-bottom: 1px solid var(--line);
    padding: 14px 4% 16px;
    display: none;
    margin-left: 0;
    margin-right: 0;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
    z-index: 65;
  }
  .nav.open { display: flex; }
  .nav a {
    padding: 14px 16px;
    border-radius: 11px;
    text-align: left;
  }
  .nav a::after {
    left: 16px;
    right: auto;
    width: 28px;
    bottom: 10px;
    transform: scaleX(0);
  }
  .nav a:hover::after,
  .nav a.active::after { transform: scaleX(1); }
}

/* Mobile nav overlay + scroll lock */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: rgba(2, 6, 14, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.nav-backdrop[hidden] { display: none !important; }
body.nav-open {
  overflow: hidden;
  touch-action: none;
}
body.nav-open .site-head {
  z-index: 70;
}

/* ---------- Hero ---------- */
.hero {
  padding: 88px 0 56px;
  position: relative;
  overflow: hidden;
  min-height: min(72vh, 720px);
}
/* Photographic Chicago night layer */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2,6,14,0.55) 0%, rgba(2,6,14,0.35) 28%, rgba(2,6,14,0.78) 78%, rgba(2,6,14,0.96) 100%),
    linear-gradient(90deg, rgba(2,6,14,0.55) 0%, transparent 30%, transparent 70%, rgba(2,6,14,0.45) 100%),
    radial-gradient(ellipse 70% 55% at 70% 40%, rgba(255,90,31,0.22), transparent 62%),
    url("../img/hero-chicago-night.webp") center 35% / cover no-repeat;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 18% 70%, rgba(255,90,31,0.12), transparent 70%),
    linear-gradient(180deg, transparent 55%, rgba(2,6,14,0.85) 100%);
}
.hero::before {
  content: "";
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 120%);
  height: 520px;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 90, 31, 0.28), transparent 68%);
  pointer-events: none;
  z-index: 0;
  animation: heroFlood 5.5s ease-in-out infinite;
}
@keyframes heroFlood {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 160px;
  background: linear-gradient(180deg, transparent, rgba(2, 6, 14, 0.55));
  pointer-events: none;
  z-index: 0;
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(48px, 8.5vw, 92px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.01em;
  max-width: 14ch;
  margin-top: 10px;
  color: var(--snow);
  text-shadow:
    0 3px 36px rgba(0, 0, 0, 0.75),
    0 0 100px rgba(209, 58, 2, 0.28),
    0 1px 0 rgba(255,255,255,0.04);
}
.hero h1 .hot {
  color: var(--orange-hot);
  position: relative;
  display: inline-block;
  text-shadow:
    0 0 22px rgba(255, 90, 31, 0.75),
    0 0 56px rgba(209, 58, 2, 0.55),
    0 0 96px rgba(209, 58, 2, 0.3),
    0 3px 20px rgba(0, 0, 0, 0.55);
  animation: hotGlow 3.2s ease-in-out infinite;
}
@keyframes hotGlow {
  0%, 100% {
    text-shadow:
      0 0 18px rgba(255, 90, 31, 0.55),
      0 0 42px rgba(209, 58, 2, 0.38),
      0 0 80px rgba(209, 58, 2, 0.18),
      0 3px 20px rgba(0, 0, 0, 0.55);
    filter: brightness(1);
  }
  50% {
    text-shadow:
      0 0 34px rgba(255, 90, 31, 0.95),
      0 0 72px rgba(209, 58, 2, 0.65),
      0 0 120px rgba(209, 58, 2, 0.35),
      0 3px 20px rgba(0, 0, 0, 0.55);
    filter: brightness(1.12);
  }
}
.hero .sub {
  max-width: 640px;
  margin-top: 26px;
  color: var(--frost);
  font-size: 17px;
  line-height: 1.65;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.28fr 1fr;
  gap: 24px;
  align-items: stretch;
  margin-top: 36px;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

/* Fan-hub feature pitch strip under hero sub */
.hub-pitch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.hub-pitch span {
  font-family: var(--display);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(159, 184, 204, 0.28);
  background: rgba(4, 10, 20, 0.7);
  color: var(--frost);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.hub-pitch span:hover {
  border-color: rgba(255, 90, 31, 0.65);
  box-shadow: 0 0 22px rgba(209, 58, 2, 0.3);
  transform: translateY(-2px);
  background: rgba(209, 58, 2, 0.14);
}
.hub-pitch span b { color: var(--orange-hot); font-weight: 600; }

/* ---------- Cards (glassmorphism) ---------- */
.card {
  background:
    linear-gradient(165deg, rgba(255,255,255,0.055) 0%, transparent 42%),
    var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 22px;
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: border-color 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), transform 0.22s var(--ease-out), background 0.22s ease;
}
.card:hover {
  border-color: var(--glass-border-hot);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift), var(--rim-glow), inset 0 1px 0 rgba(255, 200, 160, 0.1);
  background:
    linear-gradient(165deg, rgba(255,90,31,0.06) 0%, transparent 45%),
    var(--glass-deep);
}
.card.pad-lg { padding: 28px; }
.card h3 { font-size: 16px; letter-spacing: 0.1em; margin-bottom: 12px; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
@media (max-width: 860px) { #news-grid, #injury-grid { grid-template-columns: 1fr !important; } }

/* Next game card */
.game-card { position: relative; overflow: hidden; }
.game-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--orange-hot) 40%, rgba(159,184,204,0.35) 75%, transparent 100%);
  box-shadow: 0 0 16px rgba(232, 84, 30, 0.5);
}
.game-card .vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
}
.game-card .side { text-align: center; }
.game-card .side .abbr {
  font-family: var(--display);
  font-size: 44px;
  font-weight: 700;
  color: var(--snow);
  line-height: 1;
  text-shadow: 0 0 28px rgba(159, 184, 204, 0.28), 0 2px 12px rgba(0,0,0,0.35);
}
.game-card .side .score {
  font-family: var(--display);
  font-size: 30px;
  color: var(--orange-hot);
  margin-top: 6px;
  min-height: 34px;
  text-shadow: 0 0 18px rgba(232, 84, 30, 0.35);
}
.game-card .mid {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-align: center;
  text-transform: uppercase;
  line-height: 1.7;
}

/* Final-score winner treatment — winner glows, loser recedes. */
.game-card.final-w .side.winner .abbr {
  color: var(--orange-hot);
  text-shadow:
    0 0 26px rgba(255, 90, 31, 0.75),
    0 0 60px rgba(209, 58, 2, 0.5),
    0 2px 12px rgba(0, 0, 0, 0.4);
}
.game-card.final-w .side.winner .score {
  color: var(--snow);
  text-shadow: 0 0 22px rgba(255, 90, 31, 0.65), 0 2px 10px rgba(0, 0, 0, 0.4);
}
.game-card.final-w .side.loser { opacity: 0.52; }
.game-card.final-w .side.loser .score { color: var(--ice); text-shadow: none; }
/* Bears victory: full orange flood on the card's top thread + bright status pill. */
.game-card.bears-won::before {
  background: linear-gradient(90deg, var(--orange-hot), var(--orange-hot) 60%, rgba(255, 180, 140, 0.4) 100%);
  box-shadow: 0 0 26px rgba(255, 90, 31, 0.7);
  height: 4px;
}
.game-card.bears-won {
  border-color: rgba(255, 90, 31, 0.45);
  box-shadow: var(--shadow), 0 0 44px rgba(209, 58, 2, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* Bears loss: cooler, dimmer thread so the board reads at a glance. */
.game-card.bears-lost::before {
  background: linear-gradient(90deg, rgba(92, 122, 153, 0.8), rgba(92, 122, 153, 0.35) 60%, transparent 100%);
  box-shadow: none;
}
.game-card.bears-lost { opacity: 0.88; }
.pill.won {
  color: #fff;
  font-weight: 700;
  border-color: rgba(255, 120, 60, 0.9);
  background: linear-gradient(180deg, rgba(232, 84, 30, 0.85), rgba(200, 56, 3, 0.65));
  box-shadow: 0 0 22px rgba(232, 84, 30, 0.45), inset 0 1px 0 rgba(255, 220, 200, 0.25);
}
.game-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 13px; color: var(--ice); }
.game-meta b { color: var(--snow); font-weight: 600; }
.countdown {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.countdown .unit {
  flex: 1;
  text-align: center;
  background: rgba(5, 11, 22, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  backdrop-filter: blur(8px);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.countdown .unit:hover {
  border-color: rgba(232, 84, 30, 0.35);
  box-shadow: 0 0 14px rgba(200, 56, 3, 0.12);
}
.countdown .unit b {
  display: block;
  font-family: var(--display);
  font-size: 24px;
  color: var(--snow);
  line-height: 1.1;
}
.countdown .unit span {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---------- Pills & badges ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--ice);
  white-space: nowrap;
  background: rgba(4, 10, 20, 0.7);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.pill.live { color: #ffc4ae; border-color: rgba(255, 90, 31, 0.85); background: rgba(209, 58, 2, 0.4); box-shadow: 0 0 20px rgba(209, 58, 2, 0.4), 0 0 6px rgba(255, 90, 31, 0.35); }
.pill.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange-hot); animation: pulse 1.4s ease-in-out infinite; }
.pill.cache { color: var(--ice); }
.pill.sample { color: var(--warn); border-color: rgba(224, 164, 55, 0.6); }
.pill.ok { color: #b9e3c6; border-color: rgba(76, 175, 125, 0.5); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.badge-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.src-note { font-size: 12px; color: var(--text-dim); margin-top: 10px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--snow);
  background: rgba(92, 122, 153, 0.2);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  padding: 11px 18px;
  cursor: pointer;
  transition: background 0.18s var(--ease-out), border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.btn:hover {
  background: rgba(92, 122, 153, 0.35);
  color: var(--snow);
  border-color: rgba(255, 90, 31, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 4, 12, 0.45), 0 0 22px rgba(209, 58, 2, 0.22);
}
.btn.primary {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-hot) 100%);
  border-color: transparent;
  box-shadow: 0 6px 26px rgba(209, 58, 2, 0.55), 0 0 18px rgba(255, 90, 31, 0.25);
}
.btn.primary:hover {
  background: linear-gradient(135deg, var(--orange-hot) 0%, #ff7340 100%);
  border-color: transparent;
  box-shadow: 0 10px 34px rgba(255, 90, 31, 0.65), 0 0 28px rgba(255, 90, 31, 0.35);
}
.btn.small { padding: 7px 12px; font-size: 11px; }

/* ---------- News ---------- */
.news-list { display: grid; gap: 10px; }
.news-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  background:
    linear-gradient(165deg, rgba(255,255,255,0.03) 0%, transparent 40%),
    var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.news-item a { color: var(--snow); }
.news-item .headline { font-size: 15px; font-weight: 600; line-height: 1.35; }
.news-item .meta { font-size: 12px; color: var(--text-dim); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.news-item .thumb {
  width: 118px;
  height: 74px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
  flex: 0 0 auto;
}
.news-item .thumb-fallback {
  width: 118px;
  height: 74px;
  border-radius: 8px;
  border: 1px dashed var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  color: var(--steel);
  font-size: 22px;
  flex: 0 0 auto;
  background: rgba(11, 22, 38, 0.4);
}
@media (max-width: 560px) {
  .news-item { grid-template-columns: 1fr; }
  .news-item .thumb, .news-item .thumb-fallback { width: 100%; height: 120px; }
}
.rail {
  border-left: 3px solid var(--orange);
  padding-left: 14px;
}
.rail h3 { font-size: 14px; }

/* ============================================================
   v1.36.0 — wire story-card glow-up.
   The league/wide/injury wire cards (.news-item, used on
   news.html and the injuries page rail) get the family
   treatment: an orange identity thread across the top that
   ignites on hover or keyboard focus, :focus-within parity for
   the hover lift so keyboard users get the same response, the
   headline warms under attention, the source becomes a proper
   chip, the thumb edge warms under attention, and a staggered
   frost-fade entrance on first paint only (the wire re-renders
   on a 5-minute clock and those refreshes stay instant).
   Reduced motion snaps the entrance and every transition.
   ============================================================ */
.news-item { position: relative; overflow: hidden; }
.news-item::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange-hot), var(--orange) 55%, rgba(159, 184, 204, 0.35) 85%, transparent);
  box-shadow: 0 0 14px rgba(255, 90, 31, 0.55);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.news-item:hover::before,
.news-item:focus-within::before { opacity: 1; }
.news-item:hover,
.news-item:focus-within {
  border-color: var(--glass-border-hot);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift), var(--rim-glow);
}
.news-item .headline { transition: color 0.2s ease; }
.news-item a:hover { color: var(--orange-hot); }
.news-item:hover .headline,
.news-item:focus-within .headline { color: var(--orange-hot); }
.news-item .headline:focus-visible {
  outline: 2px solid var(--orange-hot);
  outline-offset: 2px;
  border-radius: 4px;
}
.news-item .meta { align-items: center; }
.news-item .meta span:first-child {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ice);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 2px 9px;
  background: rgba(11, 22, 38, 0.5);
}
.news-item .thumb, .news-item .thumb-fallback { transition: border-color 0.2s ease; }
.news-item:hover .thumb,
.news-item:focus-within .thumb,
.news-item:hover .thumb-fallback,
.news-item:focus-within .thumb-fallback { border-color: rgba(255, 90, 31, 0.45); }
.news-item.cf-enter {
  animation: cfRosterIn 0.55s var(--ease-out) backwards;
  animation-delay: calc(var(--ni, 0) * 35ms);
}
@media (prefers-reduced-motion: reduce) {
  .news-item.cf-enter { animation: none; }
  .news-item, .news-item::before, .news-item .headline,
  .news-item .thumb, .news-item .thumb-fallback { transition: none; }
}

/* ---------- Tables ---------- */
.tbl-wrap {
  overflow-x: auto;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: rgba(5, 11, 22, 0.55);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.tbl th {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ice);
  text-align: left;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(28, 48, 72, 0.85), rgba(18, 34, 54, 0.75));
  white-space: nowrap;
}
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: rgba(92, 122, 153, 0.11); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .strong { color: var(--snow); font-weight: 600; }
.tbl tr.me td { background: rgba(200, 56, 3, 0.1); }
.tbl tr.me:hover td { background: rgba(200, 56, 3, 0.15); }

/* ---------- Statuses ---------- */
.st { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.st.out { background: rgba(232, 84, 30, 0.2); color: #ffb49a; }
.st.questionable { background: rgba(224, 164, 55, 0.18); color: #ecc06a; }
.st.doubtful { background: rgba(224, 164, 55, 0.28); color: #ecc06a; }
.st.day-to-day { background: rgba(92, 122, 153, 0.25); color: var(--ice); }
.st.active { background: rgba(76, 175, 125, 0.18); color: #b9e3c6; }
.st.live { background: rgba(200, 56, 3, 0.25); color: #ffb49a; animation: pulse 1.4s ease-in-out infinite; }
.st.final { background: rgba(92, 122, 153, 0.25); color: var(--ice); }

/* Season log result treatment (games.html): wins carry the orange
   thread and a brightened score; losses recede until hovered. */
.tbl tr.result-w td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.tbl tr.result-w .log-score { color: #ffa76b; font-weight: 700; }
.tbl tr.result-l td { opacity: 0.62; transition: opacity 0.18s ease; }
.tbl tr.result-l:hover td { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tbl tr.result-l td { transition: none; }
}

/* Injury report severity treatment (injuries.html + home preview):
   rows carry a severity leading-edge, status pills get a severity dot,
   and the availability snapshot strip counts the report at a glance. */
.tbl tr.inj-sev-out td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.tbl tr.inj-sev-questionable td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.tbl tr.inj-sev-day-to-day td:first-child { box-shadow: inset 3px 0 0 var(--ice); }
.tbl tr.inj-sev-active td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
#report-table .st,
#home-injuries .st { position: relative; padding-left: 22px; }
#report-table .st::before,
#home-injuries .st::before {
  content: ""; position: absolute; left: 9px; top: 50%; width: 8px; height: 8px;
  border-radius: 50%; transform: translateY(-50%); background: currentColor;
}
.inj-snap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; min-height: 0; }
.inj-snap-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px;
  border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
  border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.03);
  animation: cfSnapIn 0.3s ease;
}
.inj-snap-chip b { font-size: 15px; font-variant-numeric: tabular-nums; }
.inj-snap-chip.sev-out { color: #ffb49a; border-color: rgba(209, 58, 2, 0.55); }
.inj-snap-chip.sev-questionable { color: var(--warn); border-color: rgba(224, 164, 55, 0.45); }
.inj-snap-chip.sev-day-to-day { color: var(--ice); border-color: rgba(92, 122, 153, 0.5); }
.inj-snap-chip.sev-active { color: #b9e3c6; border-color: rgba(76, 175, 125, 0.45); }
.inj-snap-total { font-size: 12px; color: var(--text-dim); margin-left: 2px; }
.inj-snap-clear {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #b9e3c6;
  border: 1px solid rgba(76, 175, 125, 0.45); background: rgba(76, 175, 125, 0.1);
  animation: cfSnapIn 0.3s ease;
}
@keyframes cfSnapIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .inj-snap-chip, .inj-snap-clear { animation: none; }
}

/* ---------- Quick links (fan toolkit) ---------- */
.quick a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 18px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.045) 0%, transparent 45%),
    var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--snow);
  font-family: var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 13.5px;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transition: border-color 0.22s var(--ease-out), transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), background 0.22s ease;
}
.quick a::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232, 84, 30, 0.0), transparent);
  opacity: 0;
  transition: opacity 0.22s ease, background 0.22s ease;
}
.quick a:hover {
  border-color: var(--glass-border-hot);
  transform: translateY(-5px) scale(1.01);
  box-shadow: var(--shadow-lift), var(--rim-glow);
  background:
    linear-gradient(160deg, rgba(232, 84, 30, 0.08) 0%, transparent 50%),
    rgba(18, 34, 54, 0.72);
}
.quick a:hover::before {
  opacity: 1;
  background: linear-gradient(90deg, var(--orange), var(--orange-hot) 45%, rgba(159,184,204,0.35) 80%, transparent);
  box-shadow: 0 0 14px rgba(232, 84, 30, 0.55);
}
.quick a .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 22px;
  line-height: 1;
  border-radius: 12px;
  background: rgba(5, 11, 22, 0.55);
  border: 1px solid rgba(159, 184, 204, 0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 14px rgba(0,0,0,0.25);
  transition: transform 0.22s var(--ease-out), border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.quick a:hover .ico {
  transform: translateY(-2px) scale(1.06);
  border-color: rgba(232, 84, 30, 0.45);
  background: rgba(200, 56, 3, 0.14);
  box-shadow: inset 0 1px 0 rgba(255,200,160,0.08), 0 0 18px rgba(200, 56, 3, 0.25);
}
.quick a .desc {
  font-family: var(--body);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dim);
  line-height: 1.45;
}

/* ---------- Odds ---------- */
.odds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.odds-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background:
    linear-gradient(165deg, rgba(255,255,255,0.03) 0%, transparent 40%),
    var(--glass);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.odds-card:hover {
  border-color: var(--glass-border-hot);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift), var(--rim-glow);
}
.odds-card .book {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--orange-hot);
  text-transform: uppercase;
}
.odds-row { display: flex; justify-content: space-between; font-size: 13.5px; gap: 8px; }
.odds-row b { font-variant-numeric: tabular-nums; color: var(--snow); }
.odds-row .neg { color: var(--orange-hot); }
.odds-row .pos { color: #b9e3c6; }

/* Best-price finder: summary strip + winning-cell badges on the odds board */
.best-strip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  border: 1px solid rgba(255, 90, 31, 0.35);
  background: linear-gradient(120deg, rgba(255, 90, 31, 0.10), rgba(255, 90, 31, 0.02));
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px; color: var(--text-dim);
  margin-bottom: 14px;
}
.best-strip-hed {
  font-family: var(--display); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--orange-hot);
}
.best-strip b { color: var(--snow); font-variant-numeric: tabular-nums; }
.best-chip {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em;
  color: #1a0e04; background: linear-gradient(180deg, #ffb066, var(--orange-hot));
  border-radius: 999px; padding: 2px 7px; margin-left: 8px; vertical-align: 2px;
  box-shadow: 0 0 10px rgba(255, 90, 31, 0.35);
}
.odds-row b.best { color: #ffa76b; text-shadow: 0 0 14px rgba(255, 90, 31, 0.5); }
.tbl td.best { color: #ffa76b; font-weight: 700; }
.tbl .mlx.best { color: #ffa76b; font-weight: 700; }

.poly-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background:
    linear-gradient(165deg, rgba(255,255,255,0.03) 0%, transparent 40%),
    var(--glass);
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  align-items: center;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.poly-card:hover {
  border-color: var(--glass-border-hot);
  transform: translateY(-2px);
  box-shadow: var(--rim-glow);
}
.poly-card .q { font-weight: 600; color: var(--snow); font-size: 14px; }
.poly-card .pr { display: flex; gap: 8px; align-items: center; }
.poly-price {
  font-family: var(--display);
  font-size: 15px;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  color: var(--snow);
  min-width: 64px;
  text-align: center;
  background: rgba(11, 22, 38, 0.45);
}
.poly-price.yes { border-color: rgba(76, 175, 125, 0.6); color: #b9e3c6; }
.poly-price.no { border-color: rgba(232, 84, 30, 0.6); color: #ffb49a; }
/* v1.49.0 — Polymarket line-movement chips (▲/▼ vs the previous render) */
.mv {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mv.up { color: #8fe3ae; border-color: rgba(127, 214, 164, 0.55); background: rgba(76, 175, 125, 0.12); }
.mv.down { color: #a9cdf5; border-color: rgba(140, 180, 230, 0.5); background: rgba(120, 160, 220, 0.1); }
.poly-price .mv { margin-left: 6px; animation: mv-flash 0.7s var(--ease-out); }
@keyframes mv-flash {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .poly-price .mv { animation: none; }
}
.poly-card .sub { grid-column: 1 / -1; font-size: 12px; color: var(--text-dim); display: flex; gap: 12px; flex-wrap: wrap; }
.key-box { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.key-box input {
  flex: 1;
  min-width: 220px;
  background: rgba(7, 14, 26, 0.75);
  border: 1px solid var(--line-2);
  border-radius: 9px;
  color: var(--snow);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 13px;
}
.key-box input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(200, 56, 3, 0.15); }

/* ---------- Donations / projects (about) ---------- */
.don-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(12px);
}
.don-card .top { display: flex; align-items: center; gap: 10px; }
.don-card .coin {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 16px;
  color: #fff;
  flex: 0 0 auto;
}
.don-card .lbl { font-family: var(--display); letter-spacing: 0.1em; text-transform: uppercase; font-size: 12.5px; color: var(--snow); }
.don-card .addr {
  font-family: var(--mono);
  font-size: 12px;
  word-break: break-all;
  background: rgba(7, 14, 26, 0.75);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--ice);
  cursor: pointer;
  user-select: all;
}
.don-card .addr:hover { color: var(--snow); border-color: var(--line-2); }
.don-card .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.don-card .qr { width: 100%; border-radius: 8px; border: 1px solid var(--line); background: #fff; padding: 6px; }

/* ============================================================
   v1.48.0 — donation card glow-up (about).
   The crypto donation cards get the family treatment: an
   orange identity thread across the top that ignites on hover
   or keyboard focus, :focus-within parity for the hover lift so
   keyboard users get the same response, the coin chip warming
   under attention, and a staggered frost-fade entrance on
   first paint. The click-to-copy address strip was mouse-only;
   it is now a keyboard-operable button (Enter/Space copies)
   with a visible :focus-visible ring. Reduced motion snaps the
   entrance and every transition.
   ============================================================ */
.don-card { position: relative; overflow: hidden; }
.don-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange-hot), var(--orange) 55%, rgba(159, 184, 204, 0.35) 85%, transparent);
  box-shadow: 0 0 14px rgba(255, 90, 31, 0.55);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.don-card:hover::before,
.don-card:focus-within::before { opacity: 1; }
.don-card:hover,
.don-card:focus-within {
  border-color: var(--glass-border-hot);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift), var(--rim-glow);
}
.don-card { transition: border-color 0.2s ease, transform 0.22s ease, box-shadow 0.25s ease; }
.don-card .lbl { transition: color 0.2s ease, text-shadow 0.2s ease; }
.don-card:hover .lbl,
.don-card:focus-within .lbl { color: var(--orange-hot); text-shadow: 0 0 14px rgba(255, 122, 40, 0.4); }
.don-card .coin { transition: box-shadow 0.22s ease, filter 0.22s ease; }
.don-card:hover .coin,
.don-card:focus-within .coin { box-shadow: 0 0 16px rgba(255, 122, 40, 0.55); filter: saturate(1.2); }
.don-card .addr:focus-visible {
  outline: 2px solid var(--orange-hot);
  outline-offset: 2px;
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(209, 58, 2, 0.28);
}
.don-card.cf-enter {
  animation: cfRosterIn 0.55s var(--ease-out) backwards;
  animation-delay: calc(var(--ni, 0) * 35ms);
}
@media (prefers-reduced-motion: reduce) {
  .don-card.cf-enter { animation: none; }
  .don-card, .don-card::before, .don-card .lbl, .don-card .coin { transition: none; }
}

.proj-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  color: var(--snow);
  backdrop-filter: blur(12px);
}
.proj-card:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
  color: var(--snow);
  box-shadow: 0 10px 28px rgba(4, 10, 20, 0.4);
}
.proj-card .p-ico { font-size: 26px; line-height: 1; }
.proj-card h3 { font-size: 16px; margin: 0; }
.proj-card p { font-size: 13px; color: var(--text); flex: 1; }
.proj-card .go { font-family: var(--display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-hot); }

.social-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }

/* ============================================================
   v1.18.0 — balanced social grid: the grid previously auto-filled
   6 columns, orphaning the last 2 links on a half-empty row.
   8 links now sit in full rows at every breakpoint (4/2/1 cols).
   ============================================================ */
@media (min-width: 1024px) {
  .social-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 560px) and (max-width: 1023px) {
  .social-grid { grid-template-columns: repeat(2, 1fr); }
}
.social-grid a {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background:
    linear-gradient(165deg, rgba(255,255,255,0.03) 0%, transparent 40%),
    var(--glass);
  padding: 14px 16px;
  color: var(--snow);
  font-size: 13.5px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.social-grid a:hover {
  border-color: var(--glass-border-hot);
  color: var(--snow);
  transform: translateY(-2px);
  box-shadow: var(--rim-glow);
}
.social-grid a .ico { font-size: 17px; }

/* ---------- Team / roster ---------- */
.roster-controls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.roster-controls input, .roster-controls select {
  background: rgba(7, 14, 26, 0.7);
  border: 1px solid var(--line-2);
  border-radius: 9px;
  color: var(--snow);
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: var(--body);
}
.roster-controls input { flex: 1; min-width: 180px; }
.roster-controls input:focus, .roster-controls select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(200, 56, 3, 0.15);
}

/* ---------- Stats ---------- */
.stat-tile {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background:
    linear-gradient(165deg, rgba(255,255,255,0.03) 0%, transparent 40%),
    var(--glass);
  padding: 18px 16px;
  text-align: center;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.stat-tile:hover {
  border-color: var(--glass-border-hot);
  transform: translateY(-3px);
  box-shadow: var(--rim-glow);
}
.stat-tile b { display: block; font-family: var(--display); font-size: 30px; color: var(--snow); line-height: 1.1; }
.stat-tile span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }

/* ---------- Callouts ---------- */
.callout {
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--orange);
  border-radius: 10px;
  background: rgba(200, 56, 3, 0.08);
  padding: 14px 16px;
  font-size: 13.5px;
  margin: 14px 0;
  backdrop-filter: blur(8px);
}
.callout.warn { border-left-color: var(--warn); background: rgba(224, 164, 55, 0.08); }
.callout.info { border-left-color: var(--steel); background: rgba(92, 122, 153, 0.1); }

/* ---------- Empty / offline ---------- */
.empty {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  color: var(--text-dim);
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(232, 84, 30, 0.06), transparent 70%),
    rgba(5, 11, 22, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.empty .big {
  font-size: 40px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 16px rgba(232, 84, 30, 0.25));
}
.empty .btn { margin-top: 16px; }

/* ---------- Toast ---------- */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(22, 40, 63, 0.95);
  border: 1px solid var(--orange);
  color: var(--snow);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
  max-width: 90%;
  text-align: center;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(200, 56, 3, 0.2);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Footer ---------- */
.site-foot {
  margin-top: 64px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(7, 14, 26, 0.7), rgba(7, 14, 26, 0.92));
  backdrop-filter: blur(14px);
  padding: 36px 0 44px;
  position: relative;
}
.site-foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 84, 30, 0.4), transparent);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 26px;
}
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr; } }
.site-foot h4 {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ice);
  margin-bottom: 10px;
}
.site-foot ul { list-style: none; display: grid; gap: 6px; font-size: 13px; }
.foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; color: var(--snow); }
.foot-brand .mark { width: 34px; height: 34px; filter: drop-shadow(0 0 8px rgba(200, 56, 3, 0.3)); }
.foot-brand .name { font-family: var(--display); font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; }
.foot-note { font-size: 12px; color: var(--text-dim); margin-top: 14px; max-width: 420px; line-height: 1.55; }
.foot-credit { margin-top: 16px; font-size: 12.5px; color: var(--text-dim); }
.foot-credit a { color: var(--orange-hot); }

/* ---------- v1.24.0 — footer glow-up ---------- */
.site-foot::before {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(232, 84, 30, 0.06) 20%, rgba(232, 84, 30, 0.85) 50%, rgba(232, 84, 30, 0.06) 80%, transparent 100%);
  box-shadow: 0 1px 16px rgba(232, 84, 30, 0.35);
}
.site-foot h4 { display: flex; align-items: center; gap: 8px; }
.site-foot h4::before {
  content: "";
  flex: none;
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--orange-hot), rgba(232, 84, 30, 0.2));
  box-shadow: 0 0 8px rgba(232, 84, 30, 0.5);
}
.site-foot .foot-grid ul a {
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
  transition: color 0.2s var(--ease-out), background-size 0.24s var(--ease-out);
}
.site-foot .foot-grid ul a:hover,
.site-foot .foot-grid ul a:focus-visible {
  color: var(--snow);
  background-size: 100% 1px;
}
.site-foot .foot-grid ul a .dim { transition: color 0.2s var(--ease-out); }
.site-foot .foot-grid ul a:hover .dim,
.site-foot .foot-grid ul a:focus-visible .dim { color: var(--orange-hot); }
.foot-bottom {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(159, 184, 204, 0.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 22px;
  flex-wrap: wrap;
}
.foot-credit { margin: 0; }
.prl-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ice);
  background: rgba(200, 56, 3, 0.10);
  border: 1px solid rgba(232, 84, 30, 0.45);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.prl-chip:hover {
  background: rgba(200, 56, 3, 0.24);
  border-color: var(--orange-hot);
  color: var(--snow);
  box-shadow: 0 0 20px rgba(232, 84, 30, 0.35), inset 0 1px 0 rgba(255, 180, 140, 0.18);
  transform: translateY(-1px);
}
.prl-chip:active { transform: translateY(0); }
.prl-gem { color: var(--orange-hot); font-size: 11px; line-height: 1; }
.prl-chip .prl-label { white-space: nowrap; }
.prl-chip .prl-addr {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
}
.prl-chip:hover .prl-addr { color: var(--ice); }
.prl-chip .prl-status {
  min-width: 52px;
  text-align: center;
  color: var(--orange-hot);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.12em;
}
.prl-chip.copied { border-color: rgba(110, 220, 150, 0.65); box-shadow: 0 0 20px rgba(110, 220, 150, 0.25); }
.prl-chip.copied .prl-status,
.prl-chip.copied .prl-gem { color: #7ee2a0; }

/* ---------- Form controls (games day picker etc.) ---------- */
input[type="date"] {
  background: rgba(5, 11, 22, 0.7);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--snow);
  padding: 7px 12px;
  font-family: var(--body);
  font-size: 13px;
  color-scheme: dark;
}
input[type="date"]:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(200, 56, 3, 0.15);
}

/* ---------- Misc ---------- */
.kicker-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.kicker-line .front-mark { width: 46px; height: 14px; flex: 0 0 auto; filter: drop-shadow(0 0 6px rgba(232, 84, 30, 0.5)); }
.page-intro { padding: 52px 0 12px; max-width: 740px; }
.page-intro h1 {
  font-size: clamp(36px, 5.5vw, 58px);
  line-height: 1.02;
  font-weight: 700;
  text-shadow:
    0 3px 28px rgba(0, 0, 0, 0.6),
    0 0 64px rgba(209, 58, 2, 0.2);
}
.page-intro p { margin-top: 14px; color: var(--text); font-size: 15.5px; line-height: 1.65; max-width: 58ch; }
.page-intro h1 .hot {
  color: var(--orange-hot);
  text-shadow: 0 0 32px rgba(255, 90, 31, 0.6), 0 0 64px rgba(209, 58, 2, 0.35), 0 2px 12px rgba(0,0,0,0.4);
}
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); margin: 34px 0; border: none; }


/* ---------- Photographic city / stadium bands ---------- */
.photo-band {
  position: relative;
  margin: 48px 0 8px;
  min-height: 220px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,90,31,0.08);
}
.photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2,6,14,0.88) 0%, rgba(2,6,14,0.55) 42%, rgba(2,6,14,0.35) 100%),
    linear-gradient(180deg, rgba(2,6,14,0.25) 0%, rgba(2,6,14,0.75) 100%),
    radial-gradient(ellipse 50% 70% at 80% 50%, rgba(255,90,31,0.18), transparent 70%);
  z-index: 1;
}
.photo-band .photo-band-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  filter: saturate(0.95) brightness(0.78);
}
.photo-band .photo-band-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 36px 28px;
  flex-wrap: wrap;
  min-height: 220px;
}
.photo-band .photo-band-copy {
  flex: 1 1 280px;
  max-width: 560px;
}
.photo-band .photo-band-copy h3 {
  font-size: clamp(22px, 3vw, 30px);
  margin-bottom: 8px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6), 0 0 40px rgba(255,90,31,0.2);
}
.photo-band .photo-band-copy p {
  color: var(--frost);
  font-size: 14.5px;
  line-height: 1.55;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}
.photo-band .photo-band-art {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.photo-band .photo-band-art img,
.photo-band .photo-band-art svg,
.art-mark {
  width: 88px;
  height: 88px;
  filter: drop-shadow(0 0 18px rgba(255,90,31,0.45));
}
.photo-band .art-mark.lg { width: 110px; height: 110px; }
.photo-band.soldier .photo-band-bg {
  background-image: url("../img/soldier-field-dark.webp");
  background-position: center 40%;
}
.photo-band.river .photo-band-bg {
  background-image: url("../img/chicago-river-night.webp");
  background-position: center 45%;
}
.photo-band.winter .photo-band-bg {
  background-image: url("../img/chicago-winter-lakefront.webp");
  background-position: center 60%;
}
.photo-band.theatre .photo-band-bg {
  background-image: url("../img/chicago-night-alt.webp");
  background-position: center 30%;
  filter: saturate(1.05) brightness(0.65);
}
.photo-band.skyline .photo-band-bg {
  background-image: url("../img/chicago-skyline-night.webp");
  background-position: center 40%;
}
.photo-band.bean .photo-band-bg {
  background-image: url("../img/chicago-downtown-night.webp");
  background-position: center 45%;
  filter: saturate(0.9) brightness(0.62);
}

.city-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 28px 0 8px;
}
@media (max-width: 800px) {
  .city-strip { grid-template-columns: 1fr; }
}
.city-tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 140px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), border-color 0.22s ease;
}
.city-tile:hover {
  transform: translateY(-3px);
  border-color: var(--glass-border-hot);
  box-shadow: var(--shadow-lift), var(--rim-glow);
}
.city-tile .city-tile-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.7) saturate(0.95);
  transition: transform 0.4s var(--ease-out), filter 0.3s ease;
}
.city-tile:hover .city-tile-bg {
  transform: scale(1.06);
  filter: brightness(0.78) saturate(1.05);
}
.city-tile .city-tile-label {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 28px 14px 12px;
  background: linear-gradient(180deg, transparent, rgba(2,6,14,0.92));
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--snow);
  text-shadow: 0 0 16px rgba(255,90,31,0.35);
}

/* ============================================================
   v1.50.0 — city-tile glow-up.
   The Chicago photo tiles (.city-tile, the homepage explore
   strip and the about page city band) get the family treatment:
   an orange identity thread across the top that ignites on
   hover or keyboard focus; :focus-within/:focus-visible parity
   for the hover background zoom (it was mouse-only before, so
   keyboard users get the same slow-zoom response); a visible
   :focus-visible ring on the tile itself; and the label's call
   to action warms to orange-hot under attention. Reduced motion
   snaps the zoom and every transition.
   ============================================================ */
.city-tile::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange-hot), var(--orange) 55%, rgba(159, 184, 204, 0.35) 85%, transparent);
  box-shadow: 0 0 14px rgba(255, 90, 31, 0.55);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.city-tile:hover::before,
.city-tile:focus-within::before { opacity: 1; }
.city-tile:focus-within .city-tile-bg,
.city-tile:focus-visible .city-tile-bg {
  transform: scale(1.06);
  filter: brightness(0.78) saturate(1.05);
}
.city-tile:focus-visible {
  outline: 2px solid var(--orange-hot);
  outline-offset: 2px;
}
.city-tile .city-tile-label strong { transition: color 0.2s ease; }
.city-tile:hover .city-tile-label strong,
.city-tile:focus-within .city-tile-label strong { color: var(--orange-hot); }
@media (prefers-reduced-motion: reduce) {
  .city-tile,
  .city-tile::before,
  .city-tile .city-tile-bg,
  .city-tile .city-tile-label strong { transition: none; }
}
.city-tile.t-river .city-tile-bg { background-image: url("../img/chicago-river-night.webp"); }
.city-tile.t-soldier .city-tile-bg { background-image: url("../img/soldier-field.webp"); background-position: center 30%; }
.city-tile.t-winter .city-tile-bg { background-image: url("../img/chicago-winter-lakefront.webp"); }
.city-tile.t-theatre .city-tile-bg { background-image: url("../img/chicago-night-alt.webp"); }
.city-tile.t-skyline .city-tile-bg { background-image: url("../img/chicago-skyline-night.webp"); }
.city-tile.t-bean .city-tile-bg { background-image: url("../img/chicago-downtown-night.webp"); }

.art-rail {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.art-rail .art-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.art-rail .art-card img {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 0 12px rgba(255,90,31,0.4));
}
.art-rail .art-card span {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--frost);
}

.photo-credit {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 10px;
  opacity: 0.85;
}
.photo-credit a { color: var(--ice); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
  #snow { display: none; }
  .cf-atmosphere .cf-aurora,
  .cf-atmosphere .cf-bands { animation: none !important; }
  .hero h1 .hot { animation: none !important; filter: none !important; }
  .hero::before { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Overnight upgrade pass — mobile polish · skeletons · empty
   states · perceived performance (v1.2)
   ============================================================ */

/* Safe areas (notched phones) */
@supports (padding: max(0px)) {
  .weather-strip .wrap {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  .site-head .wrap {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  #toast {
    bottom: max(24px, calc(16px + env(safe-area-inset-bottom)));
  }
  .nav.open {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* Skeleton shimmer — sharper perceived loading */
@keyframes skelShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.skel {
  display: block;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(159, 184, 204, 0.08) 0%,
    rgba(255, 90, 31, 0.12) 42%,
    rgba(159, 184, 204, 0.1) 78%,
    rgba(159, 184, 204, 0.08) 100%
  );
  background-size: 220% 100%;
  animation: skelShimmer 1.35s var(--ease-out) infinite;
  min-height: 12px;
}
.skel.lg { min-height: 18px; }
.skel.xl { min-height: 28px; border-radius: 10px; }
.skel.thumb {
  width: 72px;
  height: 54px;
  border-radius: 8px;
  flex: 0 0 auto;
}
.skel-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.skel-row:last-child { border-bottom: none; }
.skel-col { flex: 1; display: grid; gap: 8px; }
.skel-table td { padding: 12px 10px; }
.skel-table .skel { width: 100%; }

/* Visually hidden — screen-reader-only text for loading states */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skeleton card mirroring .story-card (homepage + wire sections) */
.skel-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid #e3f2ff18; border-radius: 13px; background: #0c1b2df2;
}
.skel-card .skel-art { height: 164px; border-radius: 0; }
.skel-card .skel-copy { padding: 18px; display: grid; gap: 10px; }

/* Skeleton row mirroring .mini-game (NFC North matchups) */
.skel-game {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px;
  padding: 16px 18px; border: 1px solid #d4eaff19; border-radius: 10px; background: #0a192acc;
}
.skel-game .skel-col { gap: 8px; }
.skel-game .skel-status { width: 74px; min-height: 26px; }

/* Frost tint on skeleton borders while content is still frozen in */
.skel-card, .skel-game { box-shadow: inset 0 0 0 1px rgba(159, 184, 204, 0.06); }

.pill.is-loading,
.pill.loading {
  position: relative;
  overflow: hidden;
  color: var(--frost);
}
.pill.is-loading::after,
.pill.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,90,31,0.28), transparent);
  animation: skelShimmer 1.2s linear infinite;
  background-size: 200% 100%;
}

/* Sharper empty / offline states */
.empty {
  position: relative;
  overflow: hidden;
}
.empty::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--orange-hot), transparent);
  opacity: 0.55;
}
.empty.is-loading::before {
  animation: skelShimmer 1.4s linear infinite;
  background: linear-gradient(90deg, transparent 0%, var(--orange-hot) 50%, transparent 100%);
  background-size: 200% 100%;
  opacity: 0.85;
}
.empty-title {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--frost);
  margin: 4px 0 8px;
}
.empty-sub {
  font-size: 13.5px;
  color: var(--text-dim);
  max-width: 42ch;
  margin: 0 auto;
  line-height: 1.55;
}
.empty .big {
  animation: emptyPulse 2.4s ease-in-out infinite;
}
.empty.is-loading .big { animation: emptyPulse 1.4s ease-in-out infinite; }
@keyframes emptyPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* Perceived performance — skip paint work for offscreen blocks */
main > section,
.page-intro + *,
.photo-band,
.city-strip,
.news-list,
.tbl-wrap {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}
.hero,
.hero-photo,
.site-head,
.weather-strip {
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

/* New photo-band / city-tile moments */
.photo-band.bean-dusk .photo-band-bg {
  background-image: url("../img/chicago-bean-dusk.webp");
  background-position: center 45%;
  filter: saturate(0.95) brightness(0.72);
}
.photo-band.cta-night .photo-band-bg {
  background-image: url("../img/chicago-cta-night.webp");
  background-position: center 40%;
  filter: saturate(1.05) brightness(0.7);
}
.photo-band.buckingham .photo-band-bg {
  background-image: url("../img/chicago-buckingham-fountain.webp");
  background-position: center 40%;
  filter: saturate(0.9) brightness(0.75);
}
.city-tile.t-bean-dusk .city-tile-bg { background-image: url("../img/chicago-bean-dusk.webp"); background-position: center 40%; }
.city-tile.t-cta .city-tile-bg { background-image: url("../img/chicago-cta-night.webp"); background-position: center 35%; }
.city-tile.t-buckingham .city-tile-bg { background-image: url("../img/chicago-buckingham-fountain.webp"); background-position: center 45%; }

/* Storytelling beat strip on home */
.story-beats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 8px 0 22px;
}
.story-beat {
  background:
    linear-gradient(165deg, rgba(255,255,255,0.04) 0%, transparent 42%),
    var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 18px 16px;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s ease;
}
.story-beat:hover {
  border-color: var(--glass-border-hot);
  transform: translateY(-2px);
  box-shadow: var(--rim-glow);
}
.story-beat .beat-num {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--orange-hot);
  text-transform: uppercase;
  margin-bottom: 8px;
  text-shadow: 0 0 16px rgba(255,90,31,0.4);
}
.story-beat h3 {
  font-size: 16px;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.story-beat p {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.55;
}

.city-strip.city-strip-5 {
  grid-template-columns: repeat(5, 1fr);
}

/* ---------- Mobile polish ---------- */
@media (max-width: 960px) {
  .brand .name small { display: none; }
  .weather-strip .wrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding: 8px 0;
  }
  .weather-strip .wrap::-webkit-scrollbar { display: none; }
  .wx-gauge { margin-left: 0; flex: 0 0 auto; }
  .nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 900px) {
  .story-beats { grid-template-columns: 1fr; }
  .city-strip.city-strip-5 { grid-template-columns: repeat(2, 1fr); }
  .city-strip.city-strip-5 .city-tile:last-child { grid-column: 1 / -1; }
  .hero {
    padding: 56px 0 40px;
    min-height: 0;
  }
  .hero h1 {
    font-size: clamp(36px, 11vw, 64px);
    max-width: 12ch;
  }
  .hero .sub { font-size: 15.5px; margin-top: 18px; }
  .hub-pitch { gap: 6px; margin-top: 16px; }
  .hub-pitch span { padding: 6px 12px; font-size: 10.5px; }
  .section-head { margin: 42px 0 18px; gap: 10px; }
  .page-intro { padding: 36px 0 8px; }
  .photo-band .photo-band-inner { padding: 28px 18px; gap: 16px; }
  .photo-band .photo-band-art { margin-left: 0; }
  .photo-band .art-mark.lg { width: 84px; height: 84px; }
  .photo-band .photo-band-art img,
  .photo-band .photo-band-art svg,
  .art-mark { width: 64px; height: 64px; }
}

@media (max-width: 800px) {
  .city-strip { grid-template-columns: repeat(2, 1fr); }
  .city-strip .city-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .wrap { width: min(1200px, 92%); }
  body {
    background-attachment: scroll; /* fixed BG is expensive on mobile GPUs */
    font-size: 14.5px;
  }
  .cf-atmosphere .cf-aurora { filter: blur(28px); opacity: 0.7; }
  .cf-atmosphere .cf-bands { opacity: 0.55; }
  .cf-atmosphere .cf-skyline { height: min(28vh, 220px); opacity: 0.4; }
  .hero-photo {
    background-position: center 30%;
  }
  .card { padding: 16px; border-radius: 14px; }
  .game-card .vs { gap: 8px; }
  .game-card .side .abbr { font-size: clamp(28px, 10vw, 40px); }
  .countdown { gap: 6px; }
  .countdown .unit { min-width: 56px; padding: 8px 6px; }
  .tbl { font-size: 12.5px; }
  .tbl th, .tbl td { padding: 9px 8px; }
  .btn, .btn.small { min-height: 40px; }
  .empty { padding: 28px 16px; }
  .empty .big { font-size: 34px; }
  .city-strip,
  .city-strip.city-strip-5 { grid-template-columns: 1fr; }
  .city-strip.city-strip-5 .city-tile:last-child { grid-column: auto; }
  .city-tile { min-height: 120px; }
  .site-foot { padding: 28px 0 36px; margin-top: 48px; }
  .section-head h2 { font-size: clamp(20px, 6vw, 28px); }
  .badge-row { gap: 8px !important; }
  /* Avoid horizontal table blowouts */
  .tbl-wrap { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 380px) {
  .brand .name { font-size: 15px; letter-spacing: 0.06em; }
  .hero h1 { font-size: clamp(32px, 12vw, 48px); }
  .hub-pitch span { letter-spacing: 0.08em; }
}

/* Touch devices: no hover-only lifts that feel sticky */
@media (hover: none) {
  .city-tile:hover { transform: none; }
  .story-beat:hover { transform: none; }
  .card:hover { transform: none; }
  .hub-pitch span:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .skel, .pill.is-loading::after, .pill.loading::after,
  .empty::before, .empty.is-loading::before, .empty .big {
    animation: none !important;
  }
  .skel {
    background: rgba(159, 184, 204, 0.12);
  }
}


/* ============================================================
   v1.3.1 bugfix — mobile nav drawer + visible theme snow
   ============================================================ */
#snow.is-active,
body:not(.prefers-reduced-motion) #snow {
  opacity: 0.78;
}


/* ============================================================
   v1.4.0 — a11y focus · skip-link · week clock · responsive photos
   ============================================================ */

/* Skip link — first focusable, Bears-orange rim */
.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 10000;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--rim-glow);
  transform: translateY(-160%);
  transition: transform 0.18s var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--snow);
  outline-offset: 3px;
  color: #fff;
}

/* Visible focus rings — navy + orange, theme-fit, not browser default */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--orange-hot);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(209, 58, 2, 0.28);
  border-radius: 8px;
}
.nav a:focus-visible,
.nav-toggle:focus-visible,
.btn:focus-visible,
.brand:focus-visible {
  outline: 2px solid var(--orange-hot);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.32), 0 0 18px rgba(209, 58, 2, 0.35);
}
.nav-toggle:focus-visible { border-radius: 10px; }

/* ============================================================
   v1.38.0 — week-clock glow-up.
   The four week phases get the family treatment: each phase
   carries a top identity thread (dim steel at rest, igniting
   orange on hover or keyboard focus, full orange on the active
   phase), the active phase reveals a NOW chip and warms its
   label, hover lift gains :focus-visible keyboard parity with a
   visible focus ring, and the strip enters with a staggered
   frost-fade on first paint (the 60-second refresh only toggles
   .is-active, so re-paints stay instant). aria-current="step"
   stays on the active phase. Reduced motion snaps the entrance
   and every transition.
   ============================================================ */
.week-clock {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 8px 0 0;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(8,18,34,0.72), rgba(4,10,20,0.55));
  box-shadow: var(--shadow);
}
.week-clock-phase {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 12px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--ice);
  text-decoration: none;
  background: rgba(10, 20, 36, 0.45);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
  min-height: 88px;
  animation: cfRosterIn 0.5s var(--ease-out) backwards;
  animation-delay: calc(var(--ni, 0) * 40ms);
}
.week-clock-phase:nth-child(2) { --ni: 1; }
.week-clock-phase:nth-child(3) { --ni: 2; }
.week-clock-phase:nth-child(4) { --ni: 3; }
.week-clock-phase::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(159,184,204,0.30), rgba(159,184,204,0.10) 60%, transparent);
  transition: background 0.22s ease, box-shadow 0.22s ease, height 0.22s ease;
  pointer-events: none;
}
.week-clock-phase:hover::before,
.week-clock-phase:focus-visible::before {
  background: linear-gradient(90deg, var(--orange-hot), var(--orange) 55%, rgba(159,184,204,0.35) 85%, transparent);
  box-shadow: 0 0 14px rgba(255, 90, 31, 0.55);
}
.week-clock-phase::after {
  content: "NOW";
  position: absolute;
  top: 9px; right: 10px;
  font-family: var(--display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #0a101c;
  background: linear-gradient(180deg, var(--orange-hot), var(--orange));
  border-radius: 999px;
  padding: 2px 8px 1px;
  box-shadow: 0 0 12px rgba(255, 90, 31, 0.6);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}
.week-clock-phase:hover,
.week-clock-phase:focus-visible {
  border-color: rgba(255, 90, 31, 0.35);
  background: rgba(200, 56, 3, 0.1);
  color: var(--snow);
  transform: translateY(-1px);
}
.week-clock-phase:focus-visible {
  outline: 2px solid var(--orange-hot);
  outline-offset: 2px;
  box-shadow: 0 0 18px rgba(209, 58, 2, 0.35);
}
.week-clock-phase:hover .phase-label,
.week-clock-phase:focus-visible .phase-label { color: var(--orange-hot); }
.week-clock-phase .phase-label {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--snow);
  transition: color 0.18s ease, text-shadow 0.18s ease;
}
.week-clock-phase .phase-hint {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.35;
}
.week-clock-phase .phase-meta {
  margin-top: auto;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
}
.week-clock-phase.is-active {
  border-color: rgba(255, 90, 31, 0.7);
  background: rgba(200, 56, 3, 0.16);
  box-shadow: 0 0 24px rgba(209, 58, 2, 0.22);
}
.week-clock-phase.is-active::before {
  height: 3px;
  background: linear-gradient(90deg, var(--orange-hot), var(--orange-hot) 60%, rgba(255, 180, 140, 0.4) 100%);
  box-shadow: 0 0 20px rgba(255, 90, 31, 0.65);
}
.week-clock-phase.is-active::after { opacity: 1; transform: none; }
.week-clock-phase.is-active .phase-label {
  color: var(--orange-hot);
  text-shadow: 0 0 14px rgba(255, 90, 31, 0.45);
}
.week-clock-phase.is-active .phase-hint { color: var(--ice); }
.week-clock-phase.is-active .phase-meta { color: var(--orange-hot); }
@media (prefers-reduced-motion: reduce) {
  .week-clock-phase { animation: none; }
  .week-clock-phase,
  .week-clock-phase::before,
  .week-clock-phase::after,
  .week-clock-phase .phase-label { transition: none; }
}
.week-clock-note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.week-clock-note b { color: var(--frost); }

@media (max-width: 700px) {
  .week-clock {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 10px;
  }
  .week-clock-phase { min-height: 78px; padding: 10px; }
}

/* Responsive photo swaps — smaller webps on narrow viewports */
@media (max-width: 700px) {
  .photo-band.soldier .photo-band-bg {
    background-image: url("../img/soldier-field-dark-sm.webp");
  }
  .city-tile.t-soldier .city-tile-bg {
    background-image: url("../img/soldier-field-sm.webp");
  }
  .city-tile.t-skyline .city-tile-bg {
    background-image: url("../img/chicago-skyline-night-sm.webp");
  }
  .city-tile.t-theatre .city-tile-bg {
    background-image: url("../img/chicago-night-alt-sm.webp");
  }
  .city-tile.t-cta .city-tile-bg {
    background-image: url("../img/chicago-cta-night-sm.webp");
  }
  .hero-photo {
    background:
      linear-gradient(180deg, rgba(2,6,14,0.55) 0%, rgba(2,6,14,0.35) 28%, rgba(2,6,14,0.78) 78%, rgba(2,6,14,0.96) 100%),
      linear-gradient(90deg, rgba(2,6,14,0.55) 0%, transparent 30%, transparent 70%, rgba(2,6,14,0.45) 100%),
      radial-gradient(ellipse 70% 55% at 70% 40%, rgba(255,90,31,0.22), transparent 62%),
      url("../img/hero-chicago-night-sm.webp") center 35% / cover no-repeat;
  }
}

.city-strip.city-strip-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .city-strip.city-strip-4 { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   v1.5.0 — picture/srcset city tiles · deep-link scroll · empty polish
   ============================================================ */

/* Sticky-header offset for week-clock deep links */
#tracker,
#news-list,
#board,
#lastbox,
#leaders,
#why-cold-front,
#gn-section,
#wire-list,
#report-table {
  scroll-margin-top: calc(var(--cf-head-h, 72px) + 12px);
}

/* City tiles: <picture>/<img> srcset (mobile -sm) — keep old bg as fallback */
.city-tile .city-tile-pic {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
}
.city-tile .city-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.7) saturate(0.95);
  transition: transform 0.4s var(--ease-out), filter 0.3s ease;
  max-width: none;
}
.city-tile:hover .city-tile-img {
  transform: scale(1.06);
  filter: brightness(0.78) saturate(1.05);
}
.city-tile.t-soldier .city-tile-img { object-position: center 30%; }
.city-tile.t-bean-dusk .city-tile-img { object-position: center 40%; }
.city-tile.t-cta .city-tile-img { object-position: center 35%; }
.city-tile.t-buckingham .city-tile-img { object-position: center 45%; }

/* Prefer picture when present — hide legacy bg layer */
.city-tile:has(.city-tile-pic) .city-tile-bg { display: none; }

/* Empty states nested in table cells stay tidy */
.tbl td > .empty {
  margin: 4px 0;
  padding: 16px 12px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.tbl td > .empty .big { font-size: 28px; }

/* Keep hamburger rock-solid: toggle stays above drawer + snow */
@media (max-width: 960px) {
  .nav-toggle {
    position: relative;
    z-index: 70;
  }
  body.nav-open #snow {
    /* snow stays visible under the drawer; never steal taps */
    pointer-events: none;
  }
}

/* Mobile CSS fallbacks for any remaining bg-based tiles */
@media (max-width: 700px) {
  .city-tile.t-river .city-tile-bg {
    background-image: url("../img/chicago-river-night-sm.webp");
  }
  .city-tile.t-winter .city-tile-bg {
    background-image: url("../img/chicago-winter-lakefront-sm.webp");
  }
  .city-tile.t-bean-dusk .city-tile-bg {
    background-image: url("../img/chicago-bean-dusk-sm.webp");
  }
  .city-tile.t-bean .city-tile-bg {
    background-image: url("../img/chicago-downtown-night-sm.webp");
  }
  .city-tile.t-buckingham .city-tile-bg {
    background-image: url("../img/chicago-buckingham-fountain-sm.webp");
  }
}

/* ============================================================
   v1.6.0 — odds pulse · next opponent · division race · visual craft
   ============================================================ */

/* Division race bars (real W-L from standings only) */
.race-bars {
  margin: 14px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 10px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(8,18,34,0.55), rgba(4,10,20,0.35));
}
.race-caption {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 2px;
}
.race-row {
  display: grid;
  grid-template-columns: 36px 1fr 48px;
  gap: 10px;
  align-items: center;
}
.race-abbr {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ice);
}
.race-row.me .race-abbr { color: var(--orange-hot); }
.race-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(92, 122, 153, 0.22);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
}
.race-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(92,122,153,0.55), rgba(200,56,3,0.85));
  box-shadow: 0 0 12px rgba(232, 84, 30, 0.35);
  min-width: 4px;
  transition: width 0.45s var(--ease-out);
}
.race-row.me .race-fill {
  background: linear-gradient(90deg, rgba(232,84,30,0.55), rgba(255,140,66,0.95));
}
.race-wl {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--snow);
  text-align: right;
}

/* Home odds / Polymarket pulse */
.odds-pulse {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}
@media (max-width: 720px) {
  .odds-pulse { grid-template-columns: 1fr; }
}
.pulse-block {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background:
    linear-gradient(165deg, rgba(255,255,255,0.04) 0%, transparent 42%),
    var(--glass);
  padding: 14px 16px;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.pulse-label {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-hot);
  margin-bottom: 8px;
}
.pulse-q {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--snow);
  line-height: 1.35;
  margin-bottom: 10px;
}
.pulse-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pulse-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: rgba(11, 22, 38, 0.5);
  font-size: 13px;
  color: var(--snow);
}
.pulse-chip .k {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
}
.pulse-chip.yes { border-color: rgba(76, 175, 125, 0.55); }
.pulse-chip.yes b { color: #b9e3c6; }
.pulse-chip.no { border-color: rgba(232, 84, 30, 0.55); }
.pulse-chip.no b { color: #ffb49a; }
.pulse-sub {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-dim);
}
.pulse-empty {
  grid-column: 1 / -1;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px dashed rgba(92, 122, 153, 0.35);
  text-align: center;
  font-size: 13px;
}

/* Next opponent card */
.next-opp-card {
  margin: 8px 0 22px;
  padding: 16px 18px;
}
.next-opp-body {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: flex-start;
  justify-content: space-between;
}
.next-opp-vs {
  font-family: var(--display);
  font-size: clamp(22px, 3.2vw, 30px);
  letter-spacing: 0.04em;
  color: var(--snow);
  line-height: 1.15;
}
.next-opp-meta {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.45;
}
.next-opp-meta b { color: var(--frost); }
.opp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(8, 18, 34, 0.65);
  font-size: 12.5px;
  color: var(--ice);
  max-width: 100%;
}
.opp-chip.home {
  border-color: rgba(120, 180, 255, 0.45);
  box-shadow: 0 0 18px rgba(100, 160, 255, 0.12);
}
.opp-chip.away {
  border-color: rgba(232, 84, 30, 0.45);
  box-shadow: 0 0 18px rgba(232, 84, 30, 0.12);
}
.opp-chip b { color: var(--snow); }

/* New cinematic bands from unused assets */
.photo-band.grant-park .photo-band-bg {
  background-image: url("../img/chicago-grant-park-night.webp");
  background-position: center 45%;
  filter: saturate(1.05) brightness(0.62);
}
.photo-band.river-skyline .photo-band-bg {
  background-image: url("../img/chicago-river-skyline-night.webp");
  background-position: center 40%;
  filter: saturate(1.02) brightness(0.6);
}

/* Hero craft: richer vignette + frost rim */
.hero {
  position: relative;
}
.hero .wrap > h1 {
  text-shadow: 0 2px 28px rgba(0,0,0,0.55), 0 0 40px rgba(200,56,3,0.18);
}
.hero-grid .card {
  box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,0.05);
}
.page-intro h1 {
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.photo-band {
  border-color: rgba(92, 122, 153, 0.28);
}
.photo-band .photo-band-copy h3 {
  letter-spacing: 0.02em;
}

/* Keep hamburger rock-solid across all pages (incl. 404) */
@media (max-width: 960px) {
  .nav-toggle {
    position: relative;
    z-index: 70;
  }
  body.nav-open #snow {
    pointer-events: none;
  }
}

#odds-pulse,
#next-opp,
#div-race,
#div-race-2 {
  scroll-margin-top: calc(var(--cf-head-h, 72px) + 12px);
}

.photo-band.lakefront-night .photo-band-bg {
  background-image: url("../img/chicago-lakefront-night.webp");
  background-position: center 42%;
  filter: saturate(1.08) brightness(0.58);
}
.photo-band.north-ave .photo-band-bg {
  background-image: url("../img/chicago-north-ave-skyline.webp");
  background-position: center 40%;
  filter: saturate(1.05) brightness(0.6);
}
@media (max-width: 700px) {
  .photo-band.grant-park .photo-band-bg {
    background-image: url("../img/chicago-grant-park-night-sm.webp");
  }
  .photo-band.river-skyline .photo-band-bg {
    background-image: url("../img/chicago-river-skyline-night-sm.webp");
  }
  .photo-band.lakefront-night .photo-band-bg {
    background-image: url("../img/chicago-lakefront-night-sm.webp");
  }
  .photo-band.north-ave .photo-band-bg {
    background-image: url("../img/chicago-north-ave-skyline-sm.webp");
  }
}

.city-strip.city-strip-6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .city-strip.city-strip-6 { grid-template-columns: repeat(2, 1fr); }
}
.city-tile.t-lakefront-night .city-tile-bg,
.city-tile.t-lakefront-night .city-tile-img { object-position: center 40%; }


/* v1.6 craft — page intro + card glass depth */
.page-intro {
  margin-bottom: 6px;
}
.page-intro p {
  max-width: 62ch;
  line-height: 1.55;
}
.card.game-card,
.next-opp-card {
  border-color: rgba(92, 122, 153, 0.32);
}
.hero .hub-pitch {
  letter-spacing: 0.01em;
}


/* ============================================================
   v1.7.0 — imagery craft · gameday mode · matchup preview · rhythm
   ============================================================ */

/* Hero: deeper vignette, readable left stack, frost rim */
.hero-photo {
  background:
    linear-gradient(180deg, rgba(2,6,14,0.62) 0%, rgba(2,6,14,0.28) 22%, rgba(2,6,14,0.55) 58%, rgba(2,6,14,0.94) 88%, rgba(2,6,14,0.99) 100%),
    linear-gradient(105deg, rgba(2,6,14,0.72) 0%, rgba(2,6,14,0.42) 28%, transparent 52%, rgba(2,6,14,0.35) 100%),
    radial-gradient(ellipse 58% 48% at 72% 38%, rgba(255,90,31,0.28), transparent 64%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(2,6,14,0.9), transparent 55%),
    url("../img/hero-chicago-night.webp") center 35% / cover no-repeat;
}
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 120px rgba(2,6,14,0.55),
    inset 0 -80px 100px rgba(2,6,14,0.65),
    inset 0 0 0 1px rgba(159,184,204,0.12);
  background:
    radial-gradient(ellipse 45% 35% at 16% 68%, rgba(255,90,31,0.14), transparent 72%);
}
.hero-photo::after {
  background:
    radial-gradient(ellipse 55% 42% at 18% 72%, rgba(255,90,31,0.1), transparent 70%),
    linear-gradient(180deg, transparent 48%, rgba(2,6,14,0.88) 100%);
}
.hero h1 {
  text-shadow:
    0 2px 4px rgba(0,0,0,0.55),
    0 8px 42px rgba(0,0,0,0.72),
    0 0 100px rgba(209,58,2,0.22),
    0 1px 0 rgba(255,255,255,0.05);
}
.hero .sub {
  text-shadow: 0 2px 22px rgba(0,0,0,0.75), 0 1px 2px rgba(0,0,0,0.5);
  max-width: 58ch;
}
.hero .hub-pitch {
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45));
}
.hero .hub-pitch span {
  background: rgba(4, 10, 20, 0.78);
  border-color: rgba(159, 184, 204, 0.34);
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}

/* Unified photo-band treatment sitewide */
.photo-band {
  margin: 40px 0 12px;
  min-height: 236px;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid rgba(159,184,204,0.28);
  box-shadow:
    var(--shadow),
    inset 0 0 0 1px rgba(255,90,31,0.1),
    0 0 48px rgba(209,58,2,0.08);
}
.photo-band::before {
  background:
    linear-gradient(100deg, rgba(2,6,14,0.92) 0%, rgba(2,6,14,0.68) 38%, rgba(2,6,14,0.38) 68%, rgba(2,6,14,0.55) 100%),
    linear-gradient(180deg, rgba(2,6,14,0.2) 0%, rgba(2,6,14,0.72) 100%),
    radial-gradient(ellipse 48% 70% at 86% 48%, rgba(255,90,31,0.22), transparent 68%);
}
.photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 80px rgba(2,6,14,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}
.photo-band .photo-band-bg {
  transform: scale(1.05);
  filter: saturate(1.02) brightness(0.62) contrast(1.05);
}
.photo-band .photo-band-inner {
  padding: 40px 32px;
  min-height: 236px;
  gap: 24px;
}
.photo-band .photo-band-copy h3 {
  font-size: clamp(22px, 3.1vw, 32px);
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.7), 0 0 48px rgba(255,90,31,0.22);
}
.photo-band .photo-band-copy p {
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 52ch;
  color: var(--frost);
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}
.photo-band .eyebrow {
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}

/* New cinematic bands */
.photo-band.navy-pier .photo-band-bg {
  background-image: url("../img/chicago-navy-pier-night.webp");
  background-position: center 42%;
  filter: saturate(1.08) brightness(0.58);
}
.photo-band.lincoln-park .photo-band-bg {
  background-image: url("../img/chicago-lincoln-park-night.webp");
  background-position: center 48%;
  filter: saturate(1.05) brightness(0.6);
}
.photo-band.marina-city .photo-band-bg {
  background-image: url("../img/chicago-marina-city-night.webp");
  background-position: center 35%;
  filter: saturate(0.95) brightness(0.68) contrast(1.08);
}
@media (max-width: 700px) {
  .photo-band.navy-pier .photo-band-bg {
    background-image: url("../img/chicago-navy-pier-night-sm.webp");
  }
  .photo-band.lincoln-park .photo-band-bg {
    background-image: url("../img/chicago-lincoln-park-night-sm.webp");
  }
  .photo-band.marina-city .photo-band-bg {
    background-image: url("../img/chicago-marina-city-night-sm.webp");
  }
  .hero-photo {
    background:
      linear-gradient(180deg, rgba(2,6,14,0.62) 0%, rgba(2,6,14,0.28) 22%, rgba(2,6,14,0.55) 58%, rgba(2,6,14,0.94) 88%, rgba(2,6,14,0.99) 100%),
      linear-gradient(105deg, rgba(2,6,14,0.72) 0%, rgba(2,6,14,0.42) 28%, transparent 52%, rgba(2,6,14,0.35) 100%),
      radial-gradient(ellipse 58% 48% at 72% 38%, rgba(255,90,31,0.28), transparent 64%),
      url("../img/hero-chicago-night-sm.webp") center 35% / cover no-repeat;
  }
  .photo-band .photo-band-inner { padding: 30px 18px; gap: 16px; }
}

/* City tiles for new photos */
.city-tile.t-navy-pier .city-tile-img,
.city-tile.t-navy-pier .city-tile-bg { object-position: center 40%; }
.city-tile.t-lincoln-park .city-tile-img,
.city-tile.t-lincoln-park .city-tile-bg { object-position: center 45%; }
.city-tile.t-marina-city .city-tile-img,
.city-tile.t-marina-city .city-tile-bg { object-position: center 32%; }
.city-tile.t-navy-pier .city-tile-bg {
  background-image: url("../img/chicago-navy-pier-night.webp");
}
.city-tile.t-lincoln-park .city-tile-bg {
  background-image: url("../img/chicago-lincoln-park-night.webp");
}
.city-tile.t-marina-city .city-tile-bg {
  background-image: url("../img/chicago-marina-city-night.webp");
}
@media (max-width: 700px) {
  .city-tile.t-navy-pier .city-tile-bg {
    background-image: url("../img/chicago-navy-pier-night-sm.webp");
  }
  .city-tile.t-lincoln-park .city-tile-bg {
    background-image: url("../img/chicago-lincoln-park-night-sm.webp");
  }
  .city-tile.t-marina-city .city-tile-bg {
    background-image: url("../img/chicago-marina-city-night-sm.webp");
  }
}

/* Spacing rhythm + card elevation + type scale */
.section-head {
  margin: 56px 0 22px;
}
.section-head h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: 0.04em;
}
.page-intro {
  margin: 8px 0 18px;
  padding-bottom: 4px;
}
.page-intro h1 {
  font-size: clamp(32px, 5.2vw, 48px);
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.page-intro p {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 60ch;
}
.card {
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), border-color 0.22s ease;
}
.card:hover {
  border-color: rgba(159,184,204,0.38);
  box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,0.08);
}
.story-beats {
  gap: 16px;
  margin-bottom: 8px;
}
.story-beat {
  padding: 20px 18px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.05);
}
.grid.quick a {
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.04);
}
main > section {
  padding-bottom: 8px;
}
.divider {
  margin: 40px 0;
}

/* Matchup preview (last meeting + rest) */
.matchup-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 640px) {
  .matchup-preview { grid-template-columns: 1fr; }
}
.matchup-stat {
  border: 1px solid rgba(92,122,153,0.28);
  border-radius: var(--radius-sm);
  background: linear-gradient(165deg, rgba(255,255,255,0.04), transparent 50%), rgba(4,10,20,0.45);
  padding: 12px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.matchup-stat .k {
  display: block;
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 4px;
}
.matchup-stat .v {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.03em;
  color: var(--snow);
  line-height: 1.2;
}
.matchup-stat .s {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.4;
}
.next-opp-card {
  border-color: rgba(92,122,153,0.36);
  box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Gameday mode — denser snow + hotter orange rim (live / gameday window) */
body.cf-gameday {
  --rim-glow: 0 0 0 1px rgba(255,110,40,0.78), 0 0 42px rgba(255,90,31,0.55), 0 0 88px rgba(209,58,2,0.32);
  --glass-border-hot: rgba(255,110,40,0.85);
  --shadow-glow: 0 0 72px rgba(255,90,31,0.42);
}
body.cf-gameday #snow {
  opacity: 0.92;
}
body.cf-gameday .cf-atmosphere .cf-aurora {
  opacity: 1;
  filter: blur(40px) saturate(1.15);
}
body.cf-gameday .site-head {
  box-shadow: 0 1px 0 rgba(255,90,31,0.35), 0 12px 40px rgba(209,58,2,0.18);
  border-bottom-color: rgba(255,90,31,0.35);
}
body.cf-gameday .card.game-card,
body.cf-gameday .next-opp-card,
body.cf-gameday .week-clock-phase.is-active {
  box-shadow: var(--shadow-lift), var(--rim-glow), inset 0 1px 0 rgba(255,200,160,0.12);
  border-color: rgba(255,90,31,0.55);
}
body.cf-gameday .hero::before {
  opacity: 1;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,110,40,0.38), transparent 68%);
}
body.cf-gameday .weather-strip {
  border-bottom-color: rgba(255,90,31,0.28);
}
@media (prefers-reduced-motion: reduce) {
  body.cf-gameday #snow { opacity: 0; }
}

/* Hamburger / snow stay rock-solid after craft pass */
@media (max-width: 960px) {
  .nav-toggle { position: relative; z-index: 70; }
  body.nav-open #snow { pointer-events: none; }
}


/* ============================================================
   v1.7.1 — feed hotfix · matchup W/L chips (minimal)
   ============================================================ */
.matchup-history {
  grid-column: 1 / -1;
  border: 1px solid rgba(92,122,153,0.28);
  border-radius: var(--radius-sm);
  background: linear-gradient(165deg, rgba(255,255,255,0.04), transparent 50%), rgba(4,10,20,0.45);
  padding: 12px 14px;
}
.matchup-history .k {
  display: block;
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 8px;
}
.wl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wl-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.06em;
  border: 1px solid rgba(159,184,204,0.35);
  color: var(--snow);
  background: rgba(8,16,28,0.7);
}
.wl-chip.wl-w { border-color: rgba(64,200,120,0.55); color: #7dffb0; background: rgba(20,60,40,0.55); }
.wl-chip.wl-l { border-color: rgba(255,90,90,0.5); color: #ff9a9a; background: rgba(60,20,24,0.55); }
.wl-chip.wl-t { border-color: rgba(159,184,204,0.45); color: var(--frost); }
.matchup-history .s { margin-top: 8px; font-size: 12px; color: var(--text-dim); }


/* ============================================================
   v1.8.0 — stadium cinematic hero · Ken Burns · kickoff banner · reveal
   ============================================================ */

/* Hero photo: layered <picture> over fail-soft stadium CSS */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(2,6,14,0.55) 0%, rgba(2,6,14,0.25) 28%, rgba(2,6,14,0.72) 78%, rgba(2,6,14,0.97) 100%),
    linear-gradient(105deg, rgba(2,6,14,0.7) 0%, rgba(2,6,14,0.35) 32%, transparent 55%),
    radial-gradient(ellipse 58% 48% at 72% 38%, rgba(255,90,31,0.26), transparent 64%),
    linear-gradient(165deg, #0a1628 0%, #101F33 42%, #060d18 100%);
}
.hero-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 70% 40%, rgba(255,90,31,0.22), transparent 62%),
    radial-gradient(ellipse 40% 30% at 20% 70%, rgba(200,56,3,0.18), transparent 70%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 48px,
      rgba(159,184,204,0.05) 48px,
      rgba(159,184,204,0.05) 49px
    ),
    linear-gradient(180deg, #0c1a2e 0%, #081018 100%);
}
.hero-fallback-gridiron {
  position: absolute;
  inset: 18% 8% 22% 8%;
  border: 1px solid rgba(159,184,204,0.18);
  border-radius: 4px;
  box-shadow: inset 0 0 40px rgba(255,90,31,0.08);
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 11%,
      rgba(232,84,30,0.12) 11% 12%
    );
  opacity: 0.55;
}
.hero-fallback-marks {
  position: absolute;
  right: 8%;
  bottom: 18%;
  width: min(280px, 42vw);
  opacity: 0.55;
  filter: drop-shadow(0 0 24px rgba(255,90,31,0.35));
}
.hero-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.hero-layer.is-active { opacity: 1; z-index: 2; }
.hero-layer.is-failed { display: none; }
.hero-photo.is-fallback-only .hero-fallback { opacity: 1; }
.hero-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  display: block;
  transform: scale(1.06);
  filter: saturate(1.05) brightness(0.72) contrast(1.06);
}
/* Art-directed crop focus */
@media (max-width: 700px) {
  .hero-photo-img { object-position: center 28%; }
}
/* Ken Burns — subtle pan/zoom; honor reduced motion */
@keyframes cfHeroKenBurns {
  0%   { transform: scale(1.06) translate(0, 0); }
  100% { transform: scale(1.14) translate(-1.6%, -1.1%); }
}
.hero-layer.is-active .hero-photo-img {
  animation: cfHeroKenBurns 28s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .hero-layer.is-active .hero-photo-img {
    animation: none !important;
    transform: scale(1.04);
  }
  .hero-layer { transition: none; }
}

/* Keep frost overlays above photo layers */
.hero-photo::before,
.hero-photo::after {
  z-index: 3;
}

/* Soft kickoff-window banner (no sound) */
.cf-kickoff-banner {
  position: relative;
  z-index: 55;
  background: linear-gradient(90deg, rgba(200,56,3,0.22), rgba(16,31,51,0.92) 40%, rgba(8,14,24,0.95));
  border-bottom: 1px solid rgba(255,90,31,0.4);
  box-shadow: 0 8px 28px rgba(209,58,2,0.18);
  animation: cfKickIn 0.45s var(--ease-out);
}
@keyframes cfKickIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-kickoff-banner { animation: none; }
}
.cf-kickoff-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0;
  font-size: 13.5px;
  color: var(--frost);
}
.cf-kickoff-mark { font-size: 16px; }
.cf-kickoff-copy { flex: 1 1 200px; line-height: 1.35; }
.cf-kickoff-copy b { color: var(--orange-hot); letter-spacing: 0.02em; }
.cf-kickoff-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cf-kickoff-dismiss {
  appearance: none;
  border: 1px solid rgba(159,184,204,0.35);
  background: rgba(4,10,20,0.5);
  color: var(--snow);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.cf-kickoff-dismiss:hover { border-color: rgba(255,90,31,0.55); }

/* Photo-band reveal + deferred BG when JS is on */
.cf-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.cf-reveal.is-in {
  opacity: 1;
  transform: none;
}
html.cf-js .photo-band.cf-reveal:not(.is-in) .photo-band-bg {
  background-image: none !important;
  background-color: rgba(6, 12, 22, 0.92);
}
@media (prefers-reduced-motion: reduce) {
  .cf-reveal { opacity: 1; transform: none; transition: none; }
}

/* Hamburger / snow stay rock-solid */
@media (max-width: 960px) {
  .nav-toggle { position: relative; z-index: 70; }
  body.nav-open #snow { pointer-events: none; }
  body.nav-open .cf-kickoff-banner { z-index: 50; }
}

@media (max-width: 700px) {
  .hero-photo {
    background:
      linear-gradient(180deg, rgba(2,6,14,0.55) 0%, rgba(2,6,14,0.25) 28%, rgba(2,6,14,0.72) 78%, rgba(2,6,14,0.97) 100%),
      linear-gradient(105deg, rgba(2,6,14,0.7) 0%, rgba(2,6,14,0.35) 32%, transparent 55%),
      radial-gradient(ellipse 58% 48% at 72% 38%, rgba(255,90,31,0.26), transparent 64%),
      linear-gradient(165deg, #0a1628 0%, #101F33 42%, #060d18 100%);
  }
}

/* ============================================================
   v1.10.0 — Sunday desk · practice heat · snapshot META
   ============================================================ */

/* Sunday desk fusion (home + games) */
.sunday-desk-card {
  border-color: rgba(92,122,153,0.4);
  box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,0.05);
  padding: 16px 18px;
}
.sunday-desk.desk-title,
.desk-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.desk-title .k {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange, #E8541E);
}
.desk-title .s { font-size: 12px; color: var(--text-dim); }
.matchup-preview.sunday-desk {
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 900px) {
  .matchup-preview.sunday-desk {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.desk-chips,
.desk-line,
.desk-poly-row,
.desk-hist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.desk-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(92,122,153,0.35);
  background: rgba(4,10,20,0.55);
  font-size: 13px;
}
.desk-chip .k {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
}
.desk-chip b { color: var(--snow); font-family: var(--display); letter-spacing: 0.02em; }
.desk-chip.yes { border-color: rgba(64,180,120,0.45); }
.desk-chip.no { border-color: rgba(200,80,80,0.45); }
.desk-book { font-size: 12px; margin-left: 4px; }
.desk-head { margin-bottom: 12px; }
.desk-match {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.03em;
  color: var(--snow);
  line-height: 1.15;
}
.desk-when { margin-top: 4px; font-size: 13.5px; }
.desk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 560px) {
  .desk-grid { grid-template-columns: 1fr; }
}
.desk-hist-wrap {
  margin-top: 12px;
}
.desk-hist-wrap > .k,
.desk-mkt > .k {
  display: block;
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 4px;
}
.desk-markets {
  margin-top: 14px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 700px) {
  .desk-markets { grid-template-columns: 1fr; }
}
.matchup-stat.desk-odds,
.matchup-stat.desk-poly {
  grid-column: span 1;
}
@media (min-width: 900px) {
  .matchup-preview.sunday-desk .matchup-history {
    grid-column: span 1;
  }
}

/* Practice participation heat strip */
.practice-heat { margin-bottom: 8px; }
.heat-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-dim);
}
.heat-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.heat-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.12);
}
.heat-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 640px) {
  .heat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.heat-cell {
  position: relative;
  border: 1px solid rgba(92,122,153,0.3);
  border-radius: var(--radius-sm);
  background: rgba(4,10,20,0.5);
  padding: 10px 8px 12px;
  text-align: center;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.heat-cell.is-today {
  border-color: rgba(232,84,30,0.7);
  box-shadow: 0 0 0 1px rgba(232,84,30,0.35), inset 0 1px 0 rgba(255,200,160,0.1);
}
.heat-day {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
}
.heat-bar {
  width: 70%;
  height: 8px;
  border-radius: 999px;
  background: rgba(92,122,153,0.35);
}
.heat-label {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--snow);
}
.heat-today {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange, #E8541E);
}
.heat-note { margin: 12px 0 0; font-size: 12.5px; }
.heat-inline {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(92,122,153,0.35);
  vertical-align: middle;
}
tr.is-today-row td { background: rgba(232,84,30,0.07); }
.heat-swatch.lv-0, .heat-cell.lv-0 .heat-bar, .heat-inline.lv-0 { background: rgba(92,122,153,0.35); }
.heat-swatch.lv-1, .heat-cell.lv-1 .heat-bar, .heat-inline.lv-1 { background: rgba(120,160,200,0.55); }
.heat-swatch.lv-2, .heat-cell.lv-2 .heat-bar, .heat-inline.lv-2 { background: rgba(232,160,60,0.7); }
.heat-swatch.lv-3, .heat-cell.lv-3 .heat-bar, .heat-inline.lv-3 { background: rgba(232,84,30,0.85); }
.heat-swatch.lv-4, .heat-cell.lv-4 .heat-bar, .heat-inline.lv-4 { background: linear-gradient(90deg, #C83803, #E8541E); }
.heat-cell.lv-4 { border-color: rgba(232,84,30,0.45); }
.heat-inline.lv-0 { color: var(--text-dim); }
.heat-inline.lv-1 { color: #b8d4ee; }
.heat-inline.lv-2 { color: #ffd090; }
.heat-inline.lv-3, .heat-inline.lv-4 { color: #ffc8a8; }

/* Snapshot META freshness chip (about / optional) */
.snap-meta {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.45;
}
.snap-meta b { color: var(--snow); }


/* ============================================================
   v1.11.0 — injury movement · film room · kickoff wx · desk/heat polish
   ============================================================ */

/* Injury report movement chips */
.inj-move-host { margin: 0 0 12px; }
.inj-move {
  border: 1px solid rgba(92,122,153,0.35);
  border-radius: var(--radius-sm, 10px);
  background:
    linear-gradient(135deg, rgba(232,84,30,0.08), transparent 42%),
    rgba(4,10,20,0.55);
  padding: 10px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.inj-move.quiet { padding: 8px 12px; background: rgba(4,10,20,0.35); }
.inj-move-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.inj-move-head .k {
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange, #E8541E);
}
.inj-move-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.move-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(92,122,153,0.4);
  background: rgba(2,6,14,0.55);
  font-size: 12.5px;
  line-height: 1.3;
}
.move-chip .k {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
}
.move-chip b { color: var(--snow); font-weight: 600; }
.move-chip.new { border-color: rgba(232,160,60,0.55); box-shadow: 0 0 0 1px rgba(232,160,60,0.12); }
.move-chip.new .k { color: #ffd090; }
.move-chip.up { border-color: rgba(232,84,30,0.6); box-shadow: 0 0 0 1px rgba(232,84,30,0.15); }
.move-chip.up .k { color: var(--orange-hot, #ff5a1f); }
.move-chip.rem { border-color: rgba(64,180,120,0.5); }
.move-chip.rem .k { color: #7dcea0; }

/* Film-room teaser (home, after a final) */
.film-room { margin-top: 4px; }
.film-room-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(92,122,153,0.4);
  border-radius: var(--radius, 14px);
  padding: 16px 18px 14px;
  background:
    linear-gradient(145deg, rgba(16,31,51,0.95), rgba(4,10,20,0.88)),
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(232,84,30,0.18), transparent 55%);
  box-shadow: var(--shadow-lift, 0 12px 40px rgba(0,0,0,0.35)), inset 0 1px 0 rgba(255,255,255,0.05);
}
.film-room-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #E8541E, #5C7A99);
}
.film-kicker .k,
.desk-kicker .k,
.heat-head .k {
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange, #E8541E);
}
.film-match {
  margin-top: 4px;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--snow);
  line-height: 1.25;
}
.film-match b { color: var(--orange-hot, #ff5a1f); }
.film-leaders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
@media (max-width: 560px) {
  .film-leaders { grid-template-columns: 1fr; }
}
.film-leader {
  border: 1px solid rgba(92,122,153,0.3);
  border-radius: var(--radius-sm, 10px);
  background: rgba(2,6,14,0.45);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.film-leader .k {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
}
.film-who { font-size: 13.5px; color: var(--snow); }
.film-line {
  font-family: var(--display);
  font-size: 15px;
  color: var(--frost, #c8d8e8);
  letter-spacing: 0.02em;
}
.film-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* Kickoff weather note (Sunday desk / next-opp when home) */
.kickoff-wx {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin: 10px 0 4px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(92,122,153,0.4);
  background:
    linear-gradient(90deg, rgba(92,122,153,0.18), rgba(232,84,30,0.08)),
    rgba(4,10,20,0.5);
  font-size: 13px;
}
.kickoff-wx .k {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}
.kickoff-wx-body { color: var(--snow); }
.kickoff-wx-body b { color: var(--frost, #c8d8e8); }
.kickoff-wx.in-desk {
  margin: 6px 0 0;
  border-radius: var(--radius-sm, 10px);
}
.matchup-stat.desk-wx { grid-column: 1 / -1; }

/* Sunday desk premium polish */
.sunday-desk-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(155deg, rgba(16,31,51,0.92), rgba(4,10,20,0.88)),
    radial-gradient(ellipse 55% 45% at 0% 0%, rgba(232,84,30,0.14), transparent 60%);
  border-color: rgba(92,122,153,0.48);
  box-shadow:
    var(--shadow-lift, 0 12px 40px rgba(0,0,0,0.35)),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(232,84,30,0.06);
}
.sunday-desk-card .desk-accent {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #E8541E 0%, #C83803 45%, #5C7A99 100%);
}
.desk-kicker { margin-bottom: 2px; }
.desk-match {
  background: linear-gradient(90deg, var(--snow), var(--frost, #c8d8e8));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* fallback if clip unsupported */
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .desk-match { color: var(--snow); -webkit-text-fill-color: unset; background: none; }
}
.sunday-desk-card .matchup-stat,
.matchup-preview.sunday-desk .matchup-stat {
  border: 1px solid rgba(92,122,153,0.28);
  border-radius: var(--radius-sm, 10px);
  background: rgba(2,6,14,0.4);
  padding: 10px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.sunday-desk-card .desk-chip,
.matchup-preview.sunday-desk .desk-chip {
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}
.desk-hist-wrap,
.desk-markets {
  padding-top: 2px;
}
.matchup-preview.sunday-desk {
  border-color: rgba(92,122,153,0.42);
  background:
    linear-gradient(160deg, rgba(16,31,51,0.75), rgba(4,10,20,0.7)),
    radial-gradient(ellipse 50% 40% at 100% 0%, rgba(232,84,30,0.12), transparent 55%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Practice heat premium polish */
.practice-heat {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(92,122,153,0.45);
  border-radius: var(--radius, 14px);
  background:
    linear-gradient(150deg, rgba(16,31,51,0.92), rgba(4,10,20,0.9)),
    radial-gradient(ellipse 60% 50% at 80% 0%, rgba(232,84,30,0.16), transparent 55%);
  box-shadow:
    var(--shadow-lift, 0 12px 40px rgba(0,0,0,0.35)),
    inset 0 1px 0 rgba(255,255,255,0.05);
  padding: 16px 18px 14px;
}
.practice-heat .heat-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #5C7A99, #E8541E);
}
.heat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.heat-cell {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.heat-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}
.heat-cell.lv-3 {
  box-shadow: inset 0 0 16px rgba(232,84,30,0.12);
}
.heat-cell.lv-4 {
  box-shadow: inset 0 0 20px rgba(232,84,30,0.22), 0 0 0 1px rgba(232,84,30,0.2);
}
.heat-cell.is-today {
  box-shadow:
    0 0 0 1px rgba(232,84,30,0.45),
    inset 0 1px 0 rgba(255,200,160,0.12),
    0 0 18px rgba(232,84,30,0.18);
}
.heat-bar {
  box-shadow: 0 0 8px rgba(255,255,255,0.06);
}
.heat-cell.lv-3 .heat-bar,
.heat-cell.lv-4 .heat-bar {
  box-shadow: 0 0 10px rgba(232,84,30,0.45);
}


/* ============================================================
   v1.13.0 — visual polish pass · scroll thread · back-to-top ·
   countdown tick · motion-safe chrome
   ============================================================ */

/* Scroll progress — a thin orange thread pinned over the sticky header */
.cf-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 90;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--orange), var(--orange-hot) 55%, rgba(159, 184, 204, 0.55));
  box-shadow: 0 0 12px rgba(255, 90, 31, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cf-progress.is-on { opacity: 1; }

/* Back-to-top — bottom-left (snow control keeps bottom-right) */
.cf-top {
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(201, 234, 255, 0.28);
  background: rgba(11, 26, 44, 0.9);
  color: var(--frost);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45), 0 0 18px rgba(209, 58, 2, 0.18);
  opacity: 0;
  transform: translateY(14px) scale(0.92);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s var(--ease-out),
              border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.cf-top.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.cf-top:hover {
  border-color: rgba(255, 90, 31, 0.65);
  color: #fff;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45), 0 0 24px rgba(209, 58, 2, 0.35);
}
@media (max-width: 760px) {
  .cf-top { left: 12px; bottom: 12px; width: 44px; height: 44px; }
}

/* Countdown digit tick — changed units (days/hours/min) pop gently */
@keyframes cfTick {
  0%   { transform: scale(1.1); border-color: rgba(255, 90, 31, 0.55); }
  100% { transform: scale(1); }
}
.countdown .unit.tick { animation: cfTick 0.45s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .cf-progress { display: none; }
  .countdown .unit.tick { animation: none !important; }
}

/* ---------- v1.28.0 — mobile drawer recomposition ----------
   The drawer graduates from a full-bleed drop panel to a floating
   frosted card: rounded, inset, staggered link entrance, an orange
   leading-edge thread on the active page, and a hamburger→✕ morph
   on the toggle. Gated on prefers-reduced-motion. */
@media (max-width: 960px) {
  .nav {
    left: 10px;
    right: 10px;
    top: calc(var(--cf-head-h, 64px) + 8px);
    margin-top: 0;
    max-height: calc(100dvh - var(--cf-head-h, 64px) - 32px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(11, 18, 32, 0.98), rgba(6, 10, 20, 0.98));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    padding: 12px;
  }
  .nav-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(232, 84, 30, 0.55);
    background: radial-gradient(circle at 35% 30%, rgba(36, 96, 180, 0.9), rgba(11, 22, 42, 0.95));
    color: var(--orange);
    font-size: 19px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 14px rgba(232, 84, 30, 0.18);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.3s ease, box-shadow 0.25s ease;
  }
  body.nav-open .nav-toggle {
    background: radial-gradient(circle at 35% 30%, rgba(200, 56, 3, 0.85), rgba(120, 32, 2, 0.9));
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    transform: rotate(90deg);
  }
  .nav.open a {
    min-height: 48px;
    padding: 13px 14px;
    border-radius: 12px;
    font-weight: 600;
    animation: cf-nav-in 0.38s cubic-bezier(0.22, 0.9, 0.3, 1) both;
    animation-delay: calc(var(--ni, 0) * 45ms);
    transition: background 0.2s ease, color 0.2s ease;
  }
  .nav.open a::after { display: none; }
  .nav.open a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
  }
  .nav.open a.active {
    background: rgba(200, 56, 3, 0.13);
    box-shadow: inset 3px 0 0 var(--orange);
    color: #fff;
  }
  .nav.open a.nav-x {
    justify-content: center;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    margin-top: 4px;
  }
}
@keyframes cf-nav-in {
  from { opacity: 0; transform: translateY(-10px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav.open a { animation: none; }
  body.nav-open .nav-toggle { transform: none; }
}

/* ============================================================
   v1.30.0 — NFC North matchup mini-game glow-up
   ============================================================ */

/* Variable-driven glass, hover lift with keyboard parity, tabular scores.
   Scoped to #north-games so it outranks the legacy flat rules in
   experience.css. Reduced-motion users get a snap via the site's global
   reduced-motion rule, which flattens every transition here. */
#north-games .mini-game {
  background: linear-gradient(180deg, rgba(10, 25, 42, 0.78), rgba(6, 14, 26, 0.68));
  border-color: var(--glass-border);
  border-radius: 14px;
  text-decoration: none;
  transition: transform 0.2s var(--ease-out), border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
#north-games .mini-game:hover,
#north-games .mini-game:focus-visible {
  transform: translateY(-2px);
  border-color: var(--glass-border-hot);
  background: linear-gradient(180deg, rgba(15, 33, 54, 0.88), rgba(8, 17, 30, 0.78));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 22px rgba(255, 90, 31, 0.14);
  outline: none;
}
#north-games .mini-game strong { color: var(--frost); }
#north-games .mini-game span { color: var(--text-dim); }
#north-games .mini-game .mini-status { text-align: right; }
#north-games .mini-status strong {
  font-variant-numeric: tabular-nums;
  font-size: 19px;
}

/* The Bears game carries the front's orange thread, a warm aura, and an
   identity chip. A final result tints the score: warm for a Bears win,
   receded for a Bears loss (until hovered, mirroring the game cards). */
#north-games .mini-game.our-game {
  border-left: 3px solid var(--orange);
  background: linear-gradient(180deg, rgba(33, 21, 12, 0.66), rgba(8, 15, 28, 0.72));
  box-shadow: 0 0 22px rgba(209, 58, 2, 0.18);
}
#north-games .mini-game.our-game:hover,
#north-games .mini-game.our-game:focus-visible {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 30px rgba(209, 58, 2, 0.32);
}
#north-games .mini-game .our-chip {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 10px;
  border: 1px solid rgba(255, 148, 95, 0.42);
  border-radius: 999px;
  background: rgba(255, 122, 65, 0.12);
  color: var(--orange-hot);
  font: 600 10px/1.7 var(--body);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
#north-games .mini-game.bears-win .mini-status strong { color: var(--orange-hot); font-weight: 700; }
#north-games .mini-game.bears-loss { opacity: 0.62; }
#north-games .mini-game.bears-loss:hover,
#north-games .mini-game.bears-loss:focus-visible { opacity: 1; }

/* ============================================================
   v1.31.0 — roster player-card glow-up.
   Group identity thread (inset leading edge, mirroring the injury
   severity and mini-game treatments), hover lift with
   :focus-within keyboard parity, group-tinted position chip, a
   jersey watermark that warms under attention, a glowing saved
   favorite star, a staggered frost-fade entrance on first paint,
   and skeleton player cards while the roster loads. The global
   reduced-motion rule snaps every transition and the entrance.
   ============================================================ */
.player-card {
  --group-accent: transparent;
  box-shadow: inset 3px 0 0 var(--group-accent);
  transition: transform 0.28s var(--ease-out), border-color 0.28s ease, box-shadow 0.28s ease;
}
.player-card[data-group="offense"] { --group-accent: var(--orange-hot); }
.player-card[data-group="defense"] { --group-accent: #6fa8d8; }
.player-card[data-group="special"] { --group-accent: var(--warn); }
.player-card:hover,
.player-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(255, 121, 65, 0.48);
  box-shadow: inset 3px 0 0 var(--group-accent),
    0 18px 38px -18px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 121, 65, 0.18);
}
.player-card .player-number { transition: color 0.28s ease; }
.player-card:hover .player-number,
.player-card:focus-within .player-number { color: rgba(255, 90, 31, 0.22); }
.player-card .player-info h3 { transition: color 0.22s ease; }
.player-card:hover .player-info h3,
.player-card:focus-within .player-info h3 { color: var(--orange-hot); }
.roster-grid .st { border: 1px solid transparent; }
.player-card[data-group="offense"] .st { border-color: rgba(255, 90, 31, 0.45); color: #ffb49a; }
.player-card[data-group="defense"] .st { border-color: rgba(111, 168, 216, 0.45); color: #bcd9f2; }
.player-card[data-group="special"] .st { border-color: rgba(224, 164, 55, 0.45); color: #ecc06a; }
.favorite-button {
  transition: transform 0.2s var(--ease-out), color 0.2s ease,
    border-color 0.2s ease, box-shadow 0.2s ease;
}
.favorite-button:hover { transform: scale(1.12); }
.favorite-button:focus-visible { outline: 2px solid var(--orange-hot); outline-offset: 2px; }
.favorite-button[aria-pressed="true"] {
  color: #ffb49a;
  border-color: var(--orange-hot);
  box-shadow: 0 0 14px rgba(255, 90, 31, 0.5);
}
@keyframes cfRosterIn {
  from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
}
.player-card.cf-enter {
  animation: cfRosterIn 0.5s var(--ease-out) backwards;
  animation-delay: calc(var(--ni, 0) * 35ms);
}
/* Skeleton player card mirroring .player-card while the roster loads. */
.skel-player {
  overflow: hidden;
  border: 1px solid #d6eaff22;
  border-radius: 13px;
  background: linear-gradient(140deg, #192e44, #0a1729);
  box-shadow: inset 0 0 0 1px rgba(159, 184, 204, 0.06);
}
.skel-player .skel-art { height: 170px; border-radius: 0; }
.skel-player .skel-copy { padding: 18px; display: grid; gap: 10px; }

/* ============================================================
   v1.51.0 — display-ad slots (AdSense-ready)
   ============================================================ */
/* Slots are removed from the DOM entirely until a publisher ID is set,
   so these styles only ever apply to live, filled ad units. Kept quiet:
   a hairline frame and a small "Advertisement" label, never a big box. */
.ad-slot {
  margin: 26px auto;
  max-width: 970px;
  padding: 0 12px;
}
.ad-slot.is-live::before {
  content: "Advertisement";
  display: block;
  text-align: center;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(159, 184, 204, 0.45);
  margin-bottom: 6px;
}
.ad-slot.is-live {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 10px;
  padding-bottom: 12px;
  min-height: 90px;
}
.ad-slot .adsbygoogle { background: rgba(255, 255, 255, 0.015); }

/* ============================================================
   v1.52.0 — Whiteout 404 glow-up.
   The 404 page was the last fully inline-styled surface: a flat
   oversized headline, an unstyled snowflake emoji, and buttons
   with only the default hover. It now arrives as a frosted
   whiteout card carrying the orange identity leading-edge
   thread across the top (dim at rest, igniting on hover or
   keyboard focus), a giant frost-gradient 404 numeral in
   display type, a softly swaying snowflake row, and action
   buttons that lift and warm under attention — the card enters
   with a frost-fade on first paint, and reduced-motion users
   get every transition snapped off.
   ============================================================ */
.whiteout-card {
  position: relative;
  overflow: hidden;
  max-width: 620px;
  margin: 26px auto 0;
  padding: 44px 30px 38px;
  text-align: center;
  border: 1px solid rgba(92,122,153,0.42);
  border-radius: var(--radius, 16px);
  background:
    linear-gradient(160deg, rgba(16,31,51,0.92), rgba(4,10,20,0.9)),
    radial-gradient(ellipse 60% 50% at 50% -10%, rgba(232,84,30,0.14), transparent 60%);
  box-shadow:
    var(--shadow-lift, 0 12px 40px rgba(0,0,0,0.35)),
    inset 0 1px 0 rgba(255,255,255,0.05);
  animation: cfSnapIn 0.5s var(--ease-out, ease) both;
}
.whiteout-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange-hot), var(--orange) 55%, rgba(159,184,204,0.35) 85%, transparent);
  opacity: 0.45;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.whiteout-card:hover::before,
.whiteout-card:focus-within::before { opacity: 1; }
.whiteout-num {
  font-family: var(--display, 'Oswald', sans-serif);
  font-weight: 700;
  font-size: clamp(84px, 18vw, 150px);
  line-height: 1;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #f2f7fb 30%, #a9c3d8 62%, #5c7a99 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(169,195,216,0.25));
  margin: 0 0 4px;
}
.whiteout-snow {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 8px;
  font-size: 22px;
  color: rgba(169,195,216,0.85);
}
.whiteout-snow span {
  display: inline-block;
  animation: cfWhiteoutSway 4.2s ease-in-out infinite;
}
.whiteout-snow span:nth-child(2) { animation-delay: -1.4s; }
.whiteout-snow span:nth-child(3) { animation-delay: -2.8s; }
@keyframes cfWhiteoutSway {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.75; }
  50% { transform: translateY(-7px) rotate(14deg); opacity: 1; }
}
.whiteout-card h1 {
  font-size: clamp(30px, 5vw, 44px);
  margin: 10px 0;
}
.whiteout-copy { max-width: 460px; margin: 0 auto; }
.whiteout-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}
.whiteout-actions .btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255,90,31,0.5);
  box-shadow: 0 10px 22px rgba(0,0,0,0.3);
}
.whiteout-actions .btn.primary:hover { box-shadow: 0 10px 24px rgba(209,58,2,0.35); }
.whiteout-foot { margin-top: 26px; }
@media (prefers-reduced-motion: reduce) {
  .whiteout-card,
  .whiteout-snow span { animation: none; }
  .whiteout-card::before,
  .whiteout-actions .btn { transition: none; }
}