/* Cujo's — Direction A, "Sunday Night Lights"
 *
 * Built to the token set in the league's own concept pack
 * (2026-08-15-fantasy-football-watermelon-ui-concept-pack.md, §4 recommends A
 * as the base system with B — "The Clubhouse" — scoped to collectible surfaces
 * only). The two rules that shape everything below:
 *
 *   1. Elevation is LIGHT-based, not shadow-based. Panels lift by border
 *      luminance and a thin luminous top edge. Drop shadows belong to the
 *      Collectible sub-language and appear on exactly one surface here, the
 *      record book. §8: "They are different scales and must not be mixed on
 *      one surface."
 *   2. Energy comes from hierarchy and motion, not decoration — so turning
 *      motion off leaves a legible dark interface rather than a dead one.
 */

:root {
  /* Colour */
  --bg-base: #0b1020;
  --bg-raised: #121933;
  --bg-overlay: #1a2344;
  --fg-primary: #eef2ff;
  --fg-muted: #8e9ac4;
  --accent-league: #3ddc84;      /* electric green; league-configurable */
  --accent-ink: #04160c;         /* text ON accent — 13.9:1 */
  --signal-live: #ff4d4d;
  --signal-win: #3ddc84;
  --signal-loss: #ff7a7a;

  /* Border luminance steps 0–3 — the elevation scale */
  --edge-0: rgba(142, 154, 196, 0.14);
  --edge-1: rgba(142, 154, 196, 0.24);
  --edge-2: rgba(142, 154, 196, 0.38);
  --edge-3: rgba(142, 154, 196, 0.55);

  /* Type */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, sans-serif;

  /* Space — 4px base */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px;

  /* Radius — 4/8, 12 reserved for Collectible */
  --r-sm: 4px; --r-md: 8px; --r-collect: 12px;

  /* Motion */
  --d1: 80ms; --d2: 140ms; --d3: 220ms; --d4: 360ms; --d6: 600ms;
  --e-standard: cubic-bezier(.2, 0, 0, 1);
  --e-entrance: cubic-bezier(.05, .7, .1, 1);
  --e-overshoot: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  /* "a subtle vertical light gradient like a field under lights" */
  background-image:
    radial-gradient(120% 60% at 50% -10%, rgba(61, 220, 132, .10), transparent 60%),
    linear-gradient(180deg, #0d1326 0%, var(--bg-base) 40%);
  background-attachment: fixed;
}

.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;
}

/* ── score bug ─────────────────────────────────────────────────────────── */

.bug {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s6);
  background: rgba(11, 16, 32, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--edge-1);
}
.bug__brand { display: flex; align-items: center; gap: var(--s3); }
.bug__mark { color: var(--accent-league); display: flex; }
.bug__name {
  font-family: var(--font-display);
  font-weight: 700; font-size: 26px; letter-spacing: .02em;
  text-transform: uppercase; line-height: 1;
}
.bug__nav { display: flex; gap: var(--s4); flex-wrap: wrap; }
.bug__nav a {
  color: var(--fg-muted); text-decoration: none;
  font-size: 14px; font-weight: 500;
  padding: var(--s1) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--d2) var(--e-standard), border-color var(--d2) var(--e-standard);
}
.bug__nav a:hover, .bug__nav a:focus-visible {
  color: var(--fg-primary); border-bottom-color: var(--accent-league);
}

/* Broadcast chip — rectangular, uppercase, high contrast */
.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px var(--s2);
  border-radius: var(--r-sm);
  background: var(--bg-overlay);
  border: 1px solid var(--edge-2);
  color: var(--fg-primary);
}
.chip--live { border-color: rgba(255, 77, 77, .5); }
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal-live);
  animation: pulse 1.8s var(--e-standard) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ── hero / opening graphic ────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; padding: var(--s16) var(--s6) var(--s12); }
.hero__lights {
  position: absolute; inset: 0;
  background:
    conic-gradient(from 200deg at 20% 0%, rgba(61,220,132,.16), transparent 25%),
    conic-gradient(from 140deg at 80% 0%, rgba(90,140,255,.14), transparent 25%);
  pointer-events: none;
}
.hero__inner { position: relative; max-width: 1100px; margin: 0 auto; }

.kicker {
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .16em;
  font-size: 14px; color: var(--accent-league); margin: 0 0 var(--s3);
}

.hero__title { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: .92; }
.hero__line {
  display: block;
  font-size: clamp(56px, 13vw, 148px);
  letter-spacing: -.01em;
  text-transform: uppercase;
  /* the "graphic whips on then locks" feel */
  animation: whip var(--d6) var(--e-entrance) both;
}
.hero__line--accent { color: var(--accent-league); animation-delay: 90ms; }
@keyframes whip {
  from { opacity: 0; transform: translateX(-3%) skewX(6deg); }
  to   { opacity: 1; transform: none; }
}

.hero__sub {
  max-width: 58ch; margin: var(--s6) 0 0;
  color: var(--fg-muted); font-size: 18px;
  animation: rise var(--d6) var(--e-entrance) 180ms both;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.hero__cta { display: flex; gap: var(--s3); margin-top: var(--s8); flex-wrap: wrap;
  animation: rise var(--d6) var(--e-entrance) 260ms both; }

.btn {
  display: inline-flex; align-items: center;
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: 16px;
  padding: var(--s3) var(--s6);
  border-radius: var(--r-sm);
  border: 1px solid var(--edge-2);
  color: var(--fg-primary); text-decoration: none;
  transition: border-color var(--d2) var(--e-standard), transform var(--d2) var(--e-standard);
}
.btn:hover { border-color: var(--edge-3); transform: translateY(-1px); }
.btn--primary {
  background: var(--accent-league); color: var(--accent-ink); border-color: transparent;
}

/* ── ticker ────────────────────────────────────────────────────────────── */

.ticker {
  overflow: hidden; white-space: nowrap;
  border-block: 1px solid var(--edge-1);
  background: rgba(18, 25, 51, .6);
  padding: var(--s3) 0;
}
.ticker__track { display: inline-flex; gap: var(--s12); animation: slide 42s linear infinite; }
.ticker__item {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .06em; font-size: 15px; color: var(--fg-muted);
}
.ticker__item b { color: var(--accent-league); font-weight: 600; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ── sections ──────────────────────────────────────────────────────────── */

.section { max-width: 1100px; margin: 0 auto; padding: var(--s16) var(--s6); }
.section__head { margin-bottom: var(--s8); }
.section__head h2 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(30px, 5vw, 46px); margin: 0; letter-spacing: .01em;
}
.section__note { color: var(--fg-muted); margin: var(--s2) 0 0; font-size: 15px; }

/* ── table ─────────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--edge-1);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(142,154,196,.07), transparent 2px), var(--bg-raised);
}
.table { width: 100%; border-collapse: collapse; min-width: 560px; }
.table th, .table td { padding: var(--s3) var(--s4); text-align: left; }
.table thead th {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .1em; font-size: 13px; color: var(--fg-muted);
  border-bottom: 1px solid var(--edge-1);
}
.table tbody tr { border-bottom: 1px solid var(--edge-0); }
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover { background: rgba(142,154,196,.05); }
/* Numerals tabular, always. */
.num, .table .num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
}
.rank { color: var(--fg-muted); }
.streak--w { color: var(--signal-win); }
.streak--l { color: var(--signal-loss); }

/* ── grids and cards ───────────────────────────────────────────────────── */

.grid { display: grid; gap: var(--s4); }
.grid--matchups { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--record   { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  border: 1px solid var(--edge-1);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(142,154,196,.08), transparent 2px), var(--bg-raised);
  padding: var(--s6);
  transition: border-color var(--d3) var(--e-standard);
}
.card:hover { border-color: var(--edge-2); }

.card__label {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .1em; font-size: 12px; color: var(--fg-muted); margin: 0 0 var(--s2);
}
.card__stat {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: clamp(40px, 7vw, 64px); line-height: 1; margin: 0; font-weight: 700;
}
.card__meta { color: var(--fg-muted); font-size: 14px; margin: var(--s3) 0 0; }

/* Collectible sub-language — record book ONLY. Shadow-based elevation and the
 * 12px radius live here and nowhere else in this file. */
.card--collect {
  border-radius: var(--r-collect);
  border-color: var(--edge-2);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 30px -12px rgba(0,0,0,.9);
  background:
    linear-gradient(145deg, rgba(61,220,132,.10), transparent 42%),
    var(--bg-overlay);
}
.card--collect .card__stat { color: var(--accent-league); }

/* matchup card */
.matchup__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.matchup__row + .matchup__row { margin-top: var(--s3); }
.matchup__team { font-weight: 500; }
.matchup__score {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 700; line-height: 1;
}
.matchup__row--win .matchup__team { color: var(--fg-primary); }
.matchup__row--win .matchup__score { color: var(--signal-win); }
.matchup__row--lose .matchup__team,
.matchup__row--lose .matchup__score { color: var(--fg-muted); }
.matchup__foot {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--edge-0);
  font-size: 13px; color: var(--fg-muted);
}

/* ── panel ─────────────────────────────────────────────────────────────── */

.panel {
  border: 1px solid var(--edge-1); border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(142,154,196,.08), transparent 2px), var(--bg-raised);
  padding: var(--s8);
}
.panel__row { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.panel__big { font-family: var(--font-display); font-size: 28px; margin: 0; line-height: 1.1; }
.panel__note { color: var(--fg-muted); margin: var(--s6) 0 0; max-width: 62ch; }

/* ── footer ────────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--edge-1);
  padding: var(--s8) var(--s6);
  color: var(--fg-muted); font-size: 14px;
  max-width: 1100px; margin: 0 auto;
}
.foot p { margin: 0 0 var(--s2); }
.foot__note { color: #64709a; }

/* ── reduced motion ────────────────────────────────────────────────────────
 * §10.3: every duration has a reduced-motion counterpart. The ticker stops
 * rather than slowing — a moving strip of text is the thing being opted out
 * of, and a slow one is worse than none. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ticker__track { animation: none; transform: none; }
  .ticker { white-space: normal; }
  .ticker__track { flex-wrap: wrap; gap: var(--s4); padding: 0 var(--s6); }
}

@media (max-width: 640px) {
  .bug { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .section, .hero { padding-left: var(--s4); padding-right: var(--s4); }
}

/* ── museum surfaces ───────────────────────────────────────────────────────
 * Added when the page stopped being a generic league template and became a
 * record of this specific league. The Wall reuses the Collectible treatment,
 * which is legitimate under the concept pack: §4.3 scopes that sub-language to
 * "manager cards, badges/pins, the trophy case, the record book" — and a wall
 * of self-appointed titles is the trophy case. */

.namelist { list-style: none; margin: 0; padding: 0; }
.namelist li {
  font-family: var(--font-display);
  font-size: 19px; letter-spacing: .01em; line-height: 1.45;
  color: var(--fg-primary);
  padding-left: var(--s4);
  position: relative;
}
.namelist li::before {
  content: ""; position: absolute; left: 0; top: .7em;
  width: 7px; height: 1px; background: var(--accent-league);
}

.card__stat--empty { color: var(--fg-muted); opacity: .5; }

.panel__quote {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.4vw, 32px); line-height: 1.25;
  margin: 0; color: var(--fg-primary);
}
.panel__attrib {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .12em; font-size: 12px; color: var(--accent-league);
  margin: var(--s3) 0 var(--s6);
}
.mark { color: var(--fg-muted); font-variant-numeric: tabular-nums; font-size: .92em; }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item {
  display: grid; grid-template-columns: 110px 1fr; gap: var(--s4);
  padding: var(--s4) 0;
  border-top: 1px solid var(--edge-0);
}
.timeline__item:first-child { border-top: 0; }
.timeline__date {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  color: var(--accent-league); font-size: 15px; letter-spacing: .04em;
}
.timeline__who {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .1em; font-size: 12px; color: var(--fg-muted);
}
.timeline__text { margin: var(--s1) 0 0; color: var(--fg-primary); line-height: 1.6; }

/* constitution */
.rules { margin: 0; }
.rules dt {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .1em; font-size: 13px; color: var(--accent-league);
  margin-top: var(--s6);
}
.rules dt:first-child { margin-top: 0; }
.rules dd { margin: var(--s2) 0 0; color: var(--fg-primary); line-height: 1.6; }
.src { display: block; color: var(--fg-muted); font-size: 13px; margin-top: 2px; }

.muted { color: var(--fg-muted); }

@media (max-width: 560px) {
  .timeline__item { grid-template-columns: 1fr; gap: var(--s1); }
}