/* ===========================================================================
   Stadence app — screen components.
   Layered on stadence.css, which owns the tokens. Every block here maps to a
   SwiftUI view so the two builds stay recognisably the same product.
   =========================================================================== */

/* This is a website, not the app in a phone frame: full-width responsive
   layouts, a masthead instead of a tab bar, multi-column grids instead of the
   iPhone's single scrolling column. Only the visual language is shared. */

.screen { min-height: 60vh; padding-block: var(--s-xxl) var(--s-xxxl); }
.stack { margin-bottom: var(--s-xxxl); }

/* ---------- Masthead ------------------------------------------------------- */

.masthead { display: flex; align-items: center; gap: var(--s-lg); min-height: var(--nav-h); }
.masthead .site-nav { margin-left: var(--s-xl); margin-right: auto; gap: .125rem; }
.masthead .site-nav a { font-size: .875rem; }

/* The active item is the mesh wash with black text — the same "on" cue the rest
   of the app uses. It previously set black text with NO background, which on the
   dark chrome made the current page's label almost invisible. */
.masthead .site-nav a.is-on { color: rgba(0,0,0,.85); font-weight: 800; }
.masthead .site-nav a.is-on::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: var(--r-pill);
  background-color: #DCCFD4;
  background-image:
    radial-gradient(90% 90% at   0%   0%, #E8DCCB 0%, rgba(232,220,203,0) 70%),
    radial-gradient(80% 80% at  50%   0%, #E4D3D3 0%, rgba(228,211,211,0) 70%),
    radial-gradient(90% 90% at 100%   0%, #DCCBD8 0%, rgba(220,203,216,0) 70%),
    radial-gradient(80% 90% at   0%  50%, #EDE0CD 0%, rgba(237,224,205,0) 70%),
    radial-gradient(70% 70% at  55%  42%, #DCCFD4 0%, rgba(220,207,212,0) 70%),
    radial-gradient(80% 90% at 100%  50%, #CBC6D9 0%, rgba(203,198,217,0) 70%),
    radial-gradient(90% 90% at   0% 100%, #E0D2BE 0%, rgba(224,210,190,0) 70%),
    radial-gradient(80% 80% at  45% 100%, #D2C4CC 0%, rgba(210,196,204,0) 70%),
    radial-gradient(90% 90% at 100% 100%, #C4C2D6 0%, rgba(196,194,214,0) 70%);
}

/* Reserve each label's BOLD width up front so promoting one to the active
   (800-weight) state doesn't widen it and shove every sibling sideways — that
   sideways jump on navigation was the nav "moving" between pages. The ghost
   copy is laid out in the same grid cell, sized but never painted. */
.masthead .site-nav a { position: relative; z-index: 0; display: grid; align-items: center; }
.masthead .site-nav a > span { grid-area: 1 / 1; }
.masthead .site-nav a::after {
  content: attr(data-label);
  grid-area: 1 / 1;
  font-weight: 800;
  visibility: hidden;
  pointer-events: none;
}

.masthead-actions { display: flex; gap: var(--s-sm); align-items: center; flex: none; }
.account-link { padding: .45rem .8rem; border-radius: var(--r-pill); background: var(--fill); color: var(--text); font-size: .8125rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.account-link:hover { background: rgba(255,255,255,.12); color: var(--text); text-decoration: none; }

/* ---------- Page header ---------------------------------------------------- */

.screen-head { display: flex; align-items: flex-end; gap: var(--s-lg); margin-bottom: var(--s-xl); }
.screen-title { font-size: clamp(1.75rem, 5vw, 2.75rem); letter-spacing: .03em; }
.screen-actions { margin-left: auto; display: flex; gap: var(--s-sm); align-items: center; }
.screen-lead { display: flex; align-items: center; min-width: 0; }
.app-wordmark { height: 1.6rem; width: auto; }

.round-btn {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; background: var(--fill); color: var(--text);
  font-size: 1.05rem; line-height: 1; text-decoration: none; flex: none;
}
.round-btn:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.round-btn.star { color: var(--text-3); }
.round-btn.star.is-on { color: var(--gold); }
.round-btn-spacer { width: 2.25rem; flex: none; }

/* ---------- Web layouts ---------------------------------------------------- */

/* Editorial split: a wide main column with a rail, the shape a scoreboard site
   wants and a phone can't offer. */
.split { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); grid-template-columns: 1fr; align-items: start; }
.rail { display: flex; flex-direction: column; gap: var(--s-xxl); }

/* Games as a responsive card grid rather than one phone-width list. */
.game-grid { display: grid; gap: var(--s-md); grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.team-grid { display: grid; gap: var(--s-sm); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.news-grid { display: grid; gap: var(--s-lg); grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }

@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1fr) 20rem; }
  .split.is-narrow-rail { grid-template-columns: minmax(0, 1fr) 17rem; }
}

/* ---------- Section header (app variant) ---------------------------------- */

.app-section-head { align-items: center; gap: var(--s-sm); margin-bottom: var(--s-sm); }
.app-section-head .section-head-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.app-section-head .title { font-size: 1rem; }
.app-section-head .sub { font-size: .625rem; font-weight: 600; color: var(--text-3);
                         text-transform: none; letter-spacing: .01em; }
.app-section-head .count { font-family: ui-monospace, Menlo, monospace; font-size: .8125rem; }
.app-section-head .count.live { color: var(--live); }

/* ---------- Chips and rails ----------------------------------------------- */

.chip-select {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; border-radius: var(--r-pill);
  background: var(--fill); font-weight: 700; font-size: .95rem;
  margin-bottom: var(--s-lg);
}
.chip-select .caret { font-size: .6rem; color: var(--text-3); letter-spacing: -.15em; }

.week-head { margin-bottom: var(--s-lg); }
.week-title { font-size: clamp(1.6rem, 6vw, 2rem); display: inline-flex; align-items: center; gap: .4rem; }
.week-title .caret-down { font-size: .9rem; color: var(--text-3); }
.week-meta { margin: .15rem 0 0; font-size: .8125rem; color: var(--text-3); }

.date-rail {
  display: flex; gap: .125rem; padding: .25rem; margin-bottom: var(--s-lg);
  background: var(--fill); border-radius: var(--r-md);
  overflow-x: auto; scrollbar-width: none;
}
.date-rail::-webkit-scrollbar { display: none; }
.date-pill {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: .45rem .7rem; border-radius: var(--r-sm);
  font-size: .6875rem; font-weight: 700; color: var(--text-2); line-height: 1.25;
  min-width: 3.4rem;
}
.date-pill.is-on { color: rgba(0,0,0,.85); font-weight: 800; }

.filter-row { display: flex; gap: var(--s-lg); margin-bottom: var(--s-xl); }
.filter { font-size: .9375rem; font-weight: 600; color: var(--text-3); padding: 0; }
.filter.is-on { color: var(--brand); }
.filter-count { font-size: .75rem; color: var(--text-3); }

.filter-pill {
  padding: .4rem .8rem; border-radius: var(--r-pill); background: var(--fill);
  font-size: .8125rem; font-weight: 600; color: var(--text-2);
}
.filter-pill.is-on { color: rgba(0,0,0,.85); font-weight: 800; }
.chip-row, .wire-tabs { display: flex; gap: .375rem; flex-wrap: wrap; margin-bottom: var(--s-lg); }

/* ---------- Segmented control — CapsuleSegmentedControl -------------------- */

.segmented {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.seg-item {
  padding: .35rem .9rem; border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 600; color: var(--text-2);
}
.seg-item.is-on { color: rgba(0,0,0,.85); font-weight: 800; }

/* ---------- Team marks — TeamLogoView -------------------------------------- */

/* No platter. TeamLogoView draws the crest straight onto the dark ground — the
   `logoPlatter` token exists in Theme.swift but the view never applies it, and
   a white puck behind every mark reads as a sticker, not a scoreboard. */
.team-logo {
  flex: none; display: grid; place-items: center;
  width: var(--sz); height: var(--sz);
  background: transparent;
}
.team-logo img { width: 100%; height: 100%; object-fit: contain; }
/* Only the monogram fallback needs a ground, so the initials stay legible. */
.team-logo.is-text {
  background: var(--fill); border-radius: 50%; color: var(--text-2);
  font-size: calc(var(--sz) * .34); font-weight: 800;
}
.rank { font-size: .6875rem; font-weight: 800; color: var(--brand); flex: none; }
.fav-dot { width: .3rem; height: .3rem; border-radius: 50%; background: var(--gold); flex: none; }

/* ---------- List cards and game rows — CompactGameRow ---------------------- */

.list-card { padding: 0; overflow: hidden; }
.list-card > * + * { border-top: 1px solid var(--separator); }

.game-row {
  display: flex; align-items: center; gap: var(--s-md);
  padding: var(--s-md) var(--s-lg); color: inherit; text-decoration: none;
}
.game-row:hover { text-decoration: none; background: rgba(255,255,255,.03); }
.game-row-time {
  flex: none; width: 4.6rem; font-size: .75rem; font-weight: 600; color: var(--text-3);
  display: flex; align-items: center; gap: .3rem;
}
.game-row-time.live { color: var(--live); }
.live-pip { width: .4rem; height: .4rem; border-radius: 50%; background: var(--live); flex: none; }
.game-row-teams { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.grow-line { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.grow-line.is-dim { opacity: .55; }
.grow-name { flex: 1; min-width: 0; font-size: .9375rem; font-weight: 600;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grow-rec, .grow-score { flex: none; font-size: .875rem; color: var(--text-3);
                          font-variant-numeric: tabular-nums; }
.grow-score { font-weight: 700; color: var(--text-2); }
.grow-score.is-win { color: var(--text); }
.rz { flex: none; font-size: .625rem; font-weight: 800; color: var(--live);
      border: 1px solid var(--live); border-radius: 4px; padding: 0 .25rem; }

/* ---------- Game card (grid unit) ------------------------------------------ */

.game-card {
  display: block; padding: var(--s-md) var(--s-lg); border-radius: var(--r-md);
  background: var(--card); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  color: var(--text); text-decoration: none;
}
.game-card:hover { background: var(--card-elev); text-decoration: none; }
.gc-head { display: flex; align-items: baseline; justify-content: space-between;
           gap: var(--s-sm); margin-bottom: var(--s-sm); }
.gc-status { font-size: .6875rem; font-weight: 800; letter-spacing: .06em;
             text-transform: uppercase; color: var(--text-3);
             display: inline-flex; align-items: center; gap: .3rem; }
.gc-status.live { color: var(--live); }
.gc-net { font-size: .6875rem; color: var(--text-3); }
.gc-side { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; }
.gc-side.is-dim { opacity: .55; }
.gc-name { flex: 1; min-width: 0; font-size: .9375rem; font-weight: 600;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-val { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-2); }

/* ---------- Game of the Day ------------------------------------------------ */

/* The featured card reuses the game-detail TopGlow mesh: away color pools on
   the left, home color on the right, and their blend keeps the seam luminous. */
.featured {
  display: block; border-radius: var(--r-lg); padding: var(--s-lg);
  color: var(--text); text-decoration: none; position: relative; overflow: hidden;
  background:
    radial-gradient(62% 120% at 24% -12%, rgba(var(--away-rgb), .62) 0%, rgba(var(--away-rgb), 0) 100%),
    radial-gradient(64% 120% at 78% -10%, rgba(var(--home-rgb), .62) 0%, rgba(var(--home-rgb), 0) 100%),
    radial-gradient(50% 110% at 50% -14%, rgba(var(--blend-rgb), .30) 0%, rgba(var(--blend-rgb), 0) 100%),
    radial-gradient(120% 90% at 10% 0%, rgba(255,255,255,.10), transparent 58%),
    var(--card);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.featured:hover { text-decoration: none; filter: brightness(1.04); }
.featured-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-md); }
.featured-label { display: block; font-size: .9375rem; font-weight: 700; }
.featured-sub { display: block; font-size: .8125rem; opacity: .75; }
.featured-kick { text-align: right; font-size: .9375rem; }
.featured-kick .k { opacity: .75; font-size: .8125rem; }
.featured-body { display: flex; align-items: center; justify-content: space-between;
                 gap: var(--s-md); margin: var(--s-xl) 0; }
.featured-team { display: flex; flex-direction: column; align-items: center; gap: .35rem;
                 flex: 1; min-width: 0; text-align: center; }
.ft-name { font-weight: 700; font-size: .9375rem; }
.ft-rec { font-size: .8125rem; opacity: .75; font-variant-numeric: tabular-nums; }
.featured-vs { font-weight: 700; opacity: .6; font-size: .9375rem; }
.featured-foot { font-size: .8125rem; opacity: .78; }

/* ---------- Empty / error / skeleton -------------------------------------- */

.empty-state { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-sm); }
.empty-msg { margin: 0; color: var(--text-2); font-size: .9375rem; }
.empty-detail { margin: 0; color: var(--text-3); font-size: .8125rem; line-height: 1.5; }
.empty-state.is-error .empty-msg { color: var(--text); }
.card-note { margin: var(--s-md) 0 0; font-size: .75rem; color: var(--text-3); }

/* SkeletonCard/List — flat blocks. No shimmer, no looping animation, ever. */
.skeleton-list { display: flex; flex-direction: column; gap: var(--s-sm); }
.skeleton-row { height: 3.5rem; border-radius: var(--r-md); background: var(--card); }

/* ---------- Sheets --------------------------------------------------------- */

.sheet-host { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.sheet {
  position: relative; width: min(30rem, 100%); max-height: 78vh; display: flex; flex-direction: column;
  background: var(--surface-elev); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.sheet-head { display: flex; align-items: center; justify-content: space-between;
              padding: var(--s-lg); border-bottom: 1px solid var(--separator); }
.sheet-head .display { font-size: 1rem; }
.sheet-done { color: var(--brand); font-weight: 600; }
.sheet-body { overflow-y: auto; padding: var(--s-sm) 0 var(--s-xl); }
.sheet-row { display: flex; align-items: center; gap: var(--s-md); width: 100%; text-align: left;
             padding: var(--s-md) var(--s-lg); }
.sheet-row:hover { background: rgba(255,255,255,.04); }
.sheet-row-label { font-weight: 600; }
.sheet-row-detail { color: var(--text-3); font-size: .8125rem; margin-left: auto; }
.sheet-check { color: var(--brand); margin-left: var(--s-sm); }
.sheet-row.is-on .sheet-row-label { color: var(--brand); }

/* ---------- Game screen ---------------------------------------------------- */

/* Same rule as the team hero: lead with the primary, fade to ground. Running
   both jersey colors at full strength turns LSU into a purple-and-gold poster
   that the app never shows. */
/* Ported from AppBackground.swift's TopGlow, not a web invention: away color
   pools upper-left (behind its own logo), home pools upper-right, and a
   50/50 blend glows between them so the seam where they meet stays luminous
   instead of sinking into a muddy dead zone. `mix-blend-mode: screen` on the
   glow layer is the same treatment SwiftUI's `.blendMode(.screen)` gives
   those circles — it LIGHTENS the dark ground rather than painting a flat
   color card over it, which is why the app never reads as a colored poster.

   `.hero-glow` is a separate absolutely-positioned layer (z-index: -1, so it
   paints behind the header content) rather than `.game-hero`'s own
   background, because `mask-image` masks everything an element paints,
   including its children — putting the mask on `.game-hero` directly would
   fade the back button and team names along with the color.

   The mask below is the app's exact multi-stop curve (TopGlow's `.mask`):
   held at full strength through 14%, then eased down to fully clear by 94%
   — a long, gradual dissolve across nearly the whole header, not a hard
   edge. Every stop keeps the mask's RGB at (255,255,255) and only varies
   alpha, same as the `--*-rgb` custom properties below: fading a color's
   alpha to zero, rather than interpolating "color → transparent", is what
   keeps the fade from visibly darkening through black partway through. */
/* The game screen's backdrop is NOT a header band — it is the whole page's
   background. In the app this is `appBackground(fullBleed: true)` with
   `.ignoresSafeArea()`, so the color pools stay pinned to the *viewport* while
   the content scrolls underneath them: scroll down and the glow is still up at
   the top of the screen, just with different cards passing through it.
   `position: fixed` is the web equivalent of that. */
.game-screen { position: relative; }
.game-screen > .game-hero,
.game-screen > .game-body { position: relative; z-index: 1; }

.game-hero { padding: var(--s-md) var(--s-lg) var(--s-xxl); }

.hero-glow {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  /* SwiftUI's `.blendMode(.screen)` on the glow circles — it LIGHTENS the dark
     ground rather than painting a colored card over it, which is why the app
     reads as ambient light and never as a poster. */
  mix-blend-mode: screen;
  /* Circle geometry from TopGlow: away pooled at ~24% across, home at ~78%,
     both centred ABOVE the top edge so only their lower glow bleeds in, plus a
     dimmer 50/50 blend between them so the seam stays luminous instead of
     sinking into a muddy dead zone. Alphas match the .62/.62/.30 in the app. */
  background-image:
    radial-gradient(62% 52% at 24% -12%, rgba(var(--away-rgb),  .62) 0%, rgba(var(--away-rgb),  0) 100%),
    radial-gradient(64% 54% at 78% -10%, rgba(var(--home-rgb),  .62) 0%, rgba(var(--home-rgb),  0) 100%),
    radial-gradient(50% 44% at 50% -14%, rgba(var(--blend-rgb), .30) 0%, rgba(var(--blend-rgb), 0) 100%);
  /* TopGlow's mask, stop for stop: full strength through 14%, then a long even
     ramp that isn't fully clear until 94% of the VIEWPORT. Only alpha varies —
     interpolating a color toward the `transparent` keyword instead would run
     it through black and show a muddy band partway down. */
  --fade:
    linear-gradient(to bottom,
      rgba(255,255,255,1)   0%,
      rgba(255,255,255,1)   14%,
      rgba(255,255,255,.78) 30%,
      rgba(255,255,255,.50) 46%,
      rgba(255,255,255,.26) 62%,
      rgba(255,255,255,.10) 78%,
      rgba(255,255,255,0)   94%);
  mask-image: var(--fade);
  -webkit-mask-image: var(--fade);
}
.game-hero-bar { display: flex; align-items: center; justify-content: space-between;
                 gap: var(--s-md); max-width: 44rem; margin-inline: auto; }
.game-seg { margin-inline: auto; }
.game-hero-teams { display: flex; align-items: flex-start; justify-content: space-between;
                   gap: var(--s-md); max-width: 44rem; margin: var(--s-xl) auto 0; }
.ght { display: flex; flex-direction: column; align-items: center; gap: .3rem; flex: 1; min-width: 0; }
.ght-link { color: inherit; text-decoration: none; border-radius: var(--r-md); padding: .35rem .65rem; cursor: pointer; }
.ght-link:hover { color: inherit; text-decoration: none; }
.ght-link:focus-visible { color: inherit; text-decoration: none; outline: 2px solid rgba(255,255,255,.72); outline-offset: 3px; }
.ght-name { font-weight: 700; font-size: 1rem; text-align: center; }
.ght-rec { font-size: .875rem; opacity: .75; font-variant-numeric: tabular-nums; }
.ght-mid { display: flex; flex-direction: column; align-items: center; gap: .15rem; flex: none; padding-top: .6rem; }
.ght-date, .ght-net { font-size: .8125rem; opacity: .8; }
.ght-time { font-size: 1.15rem; }
.game-body { padding-top: var(--s-xl); }

.wp-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-md); }
.wp-side { display: flex; flex-direction: column; }
.wp-side.is-end { align-items: flex-end; }
.wp-abbr { font-size: .75rem; font-weight: 700; color: var(--text-3); }
.wp-pct { font-size: 1.35rem; font-weight: 700; }
.wp-label { font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
            text-transform: uppercase; color: var(--text-3); }
/* Two team-colored segments with a hairline gap, not one bar with a fill —
   both sides are somebody's share, so both get their own color. */
.wp-split { display: flex; gap: 3px; height: .5rem; margin: var(--s-md) 0 0; }
.wp-seg { display: block; height: 100%; border-radius: var(--r-pill); min-width: 2px; }

.kick-card { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-md);
             margin-bottom: var(--s-xxl); }
.kick-label { font-size: .6875rem; font-weight: 800; letter-spacing: .12em;
              text-transform: uppercase; color: var(--text-3); }
.kick-value { font-size: 1.5rem; }

.info-row { display: flex; align-items: baseline; gap: var(--s-md);
            padding: var(--s-md) var(--s-lg); color: inherit; text-decoration: none; }
.info-row.is-link:hover { background: rgba(255,255,255,.03); text-decoration: none; }
.info-k { flex: none; width: 6.5rem; font-size: .8125rem; color: var(--text-3); }
.info-v { flex: 1; font-size: .9375rem; }
.info-note { font-size: .875rem; color: var(--text-3); }
.unfollow { margin-left: auto; font-size: .8125rem; color: var(--live); }

.stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
            gap: var(--s-md); padding: var(--s-md) var(--s-lg); }
.stat-a { text-align: left; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-h { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-label { font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
              text-transform: uppercase; color: var(--text-3); }

.leader-row, .player-row, .search-row, .rank-row, .sched-row, .odds-row,
.news-row, .wire-article, .drive-row, .lounge-row {
  display: flex; align-items: center; gap: var(--s-md);
  padding: var(--s-md) var(--s-lg); color: inherit; text-decoration: none;
}
.leader-row:hover, .player-row:hover, .search-row:hover, .rank-row:hover,
.sched-row:hover, .news-row:hover, .wire-article:hover, .lounge-row:hover {
  background: rgba(255,255,255,.03); text-decoration: none;
}
.leader-main, .player-main, .search-main, .rank-main, .news-main, .wire-main, .lounge-main, .drive-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem;
}
.leader-main strong, .player-main strong, .search-main strong, .rank-main strong,
.news-main strong, .wire-main strong, .lounge-main strong, .drive-main strong {
  font-size: .9375rem; font-weight: 600;
}
.leader-main small, .player-main small, .search-main small, .rank-main small,
.news-main small, .wire-main small, .lounge-main small, .drive-main small {
  font-size: .8125rem; color: var(--text-3);
}
.leader-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.headshot { width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover;
            background: var(--fill); flex: none; }
.headshot.is-blank { display: block; }
.jersey { font-family: "Graduate", serif; color: var(--text-3); flex: none; }
.arrow { color: var(--text-3); flex: none; }
.drive-team { font-family: "Graduate", serif; font-size: .8125rem; color: var(--text-3);
              width: 3rem; flex: none; }

/* ---------- Team screen ---------------------------------------------------- */

/* The hero leads with the PRIMARY color and fades to the app ground. Running
   it through the secondary at full strength blew Ohio State's silver out to a
   white sheet that swallowed the type. */
.team-hero {
  padding: var(--s-md) var(--s-lg) var(--s-lg);
}
.team-screen { position: relative; background: var(--bg); isolation: isolate; }
.team-screen > .team-hero,
.team-screen > .team-body { position: relative; z-index: 1; }
.team-hero-glow {
  position: absolute; inset: 0 0 auto; z-index: 0; height: 34rem; pointer-events: none;
  mix-blend-mode: screen;
  background-image: radial-gradient(96% 84% at 50% -16%, rgba(var(--team-rgb), .96) 0%, rgba(var(--team-rgb), .54) 48%, rgba(var(--team-rgb), 0) 100%);
  --fade:
    linear-gradient(to bottom,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 14%,
      rgba(255,255,255,.78) 30%,
      rgba(255,255,255,.50) 46%,
      rgba(255,255,255,.26) 62%,
      rgba(255,255,255,.10) 78%,
      rgba(255,255,255,0) 94%);
  mask-image: var(--fade);
  -webkit-mask-image: var(--fade);
}
.team-hero-bar { display: flex; justify-content: space-between; max-width: 44rem; margin-inline: auto; }
.team-hero-main { display: flex; flex-direction: column; align-items: center; gap: .3rem;
                  max-width: 44rem; margin: var(--s-md) auto var(--s-lg); }
.team-name { font-size: clamp(1.6rem, 6vw, 2.2rem); text-align: center; }
.team-nick { margin: 0; opacity: .8; }
.team-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
              width: min(100%, 25rem); margin: var(--s-md) auto 0;
              background: rgba(0,0,0,.35); border-radius: var(--r-md); padding: var(--s-md) var(--s-sm); }
.team-stats div { display: flex; min-width: 0; flex-direction: column; align-items: center;
                  justify-content: center; gap: .18rem; padding-inline: var(--s-sm); }
.team-stats strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                     font-size: 1.05rem; }
.team-stats span { font-size: .5625rem; letter-spacing: .06em; text-transform: uppercase;
                   opacity: .75; white-space: nowrap; text-align: center; }
.team-stats div + div { border-left: 1px solid rgba(255,255,255,.12); }
.team-seg { display: flex; width: fit-content; max-width: 100%; margin-inline: auto; justify-content: center; }
.team-body { padding-top: var(--s-xl); }

/* Anchors that are cards must not inherit the global link color. */
a.card, a.featured, a.stakes-card, a.team-tile, a.lounge-row, a.next-card { color: var(--text); }
a.card:hover, a.next-card:hover { text-decoration: none; background: var(--card-elev); }

.lounge-row { border-radius: var(--r-lg); margin-bottom: var(--s-xxl); }

.next-card { display: block; padding: var(--s-lg); text-decoration: none; }
.next-top { display: flex; align-items: baseline; justify-content: space-between;
            gap: var(--s-md); margin-bottom: var(--s-md); }
.next-where { font-size: .6875rem; font-weight: 800; letter-spacing: .08em;
              text-transform: uppercase; color: var(--live); }
.next-count { font-size: .75rem; font-weight: 700; color: var(--text-3);
              font-variant-numeric: tabular-nums; }
.next-main { display: flex; align-items: center; gap: var(--s-md); }
.next-opp { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.next-opp strong { font-size: 1.05rem; font-weight: 700; }
.next-opp small { font-size: .8125rem; color: var(--text-3); }

.sched-row { gap: var(--s-md); }
.sched-date { width: 3.6rem; flex: none; font-size: .8125rem; color: var(--text-3); }
.sched-opp { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem;
             font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-result { flex: none; font-variant-numeric: tabular-nums; font-size: .875rem; }
.wl { font-weight: 800; }
.wl.is-w { color: var(--accent); }
.wl.is-l { color: var(--live); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--s-lg); }
.stat-grid div { display: flex; flex-direction: column; gap: .1rem; }
.stat-grid strong { font-size: 1.15rem; }
.stat-grid span { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }

/* ---------- Following ------------------------------------------------------ */

.team-rail { display: flex; gap: var(--s-md); overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.team-rail::-webkit-scrollbar { display: none; }
.team-tile {
  flex: none; width: 6.4rem; display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: var(--s-lg) var(--s-md); border-radius: var(--r-md); color: var(--text); text-decoration: none;
  background: linear-gradient(160deg, var(--t1), var(--t2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.team-tile:hover { text-decoration: none; filter: brightness(1.05); }
.team-tile strong { font-size: .8125rem; }
.team-tile small { font-size: .75rem; opacity: .8; }

.stakes-card {
  display: block; border-radius: var(--r-lg); padding: var(--s-lg); margin-bottom: var(--s-xxl);
  color: var(--text); text-decoration: none;
  background:
    radial-gradient(110% 80% at 8% 0%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(140deg, var(--t1), var(--t2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.stakes-card:hover { text-decoration: none; filter: brightness(1.04); }
.stakes-top { display: flex; align-items: center; gap: var(--s-md); }
.stakes-name { display: flex; flex-direction: column; }
.stakes-name small { opacity: .8; font-size: .8125rem; }
.stakes-line { margin: var(--s-md) 0 0; color: inherit; font-weight: 600; }
.follow-cta { margin-top: var(--s-lg); }

/* ---------- Wire ----------------------------------------------------------- */

.wire-thumb { width: 3.4rem; height: 3.4rem; border-radius: var(--r-sm);
              object-fit: cover; background: var(--fill); flex: none; }
.wire-thumb.is-blank { display: block; }
.wire-src { font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
            text-transform: uppercase; color: var(--text-3); }
.wire-article { align-items: flex-start; }
.take-row { display: flex; gap: var(--s-md); padding: var(--s-lg); }
.take-avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none;
               display: grid; place-items: center; font-size: .75rem; font-weight: 800;
               background: linear-gradient(150deg, #E06A5A, #8d2f28); }
.take-main { flex: 1; min-width: 0; }
.take-who { font-weight: 700; font-size: .875rem; }
.take-body { margin: .15rem 0 0; color: var(--text-2); }

/* ---------- Play ----------------------------------------------------------- */

.fan-card {
  position: relative; display: grid; gap: .35rem var(--s-md);
  grid-template-columns: auto 1fr auto; align-items: center;
  border-radius: var(--r-lg); padding: var(--s-lg); margin-bottom: var(--s-xxl);
  background:
    radial-gradient(110% 90% at 8% 0%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(120deg, var(--t1), var(--t2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.fan-avatar { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
              font-weight: 800; background: rgba(255,255,255,.35); }
.fan-main { display: flex; flex-direction: column; min-width: 0; }
.fan-tier { font-size: 1.4rem; }
.fan-team { font-size: .8125rem; opacity: .8; }
.fan-pts { text-align: right; }
.fan-pts strong { display: block; font-size: 1.5rem; line-height: 1; }
.fan-pts span { font-size: .625rem; letter-spacing: .08em; opacity: .8; }
.fan-progress { grid-column: 1 / -1; height: .3rem; border-radius: var(--r-pill);
                background: rgba(0,0,0,.3); overflow: hidden; }
.fan-progress span { display: block; height: 100%; background: rgba(255,255,255,.85); }
.fan-next { grid-column: 1 / -1; font-size: .75rem; opacity: .82; text-align: right; }

.play-row { display: flex; align-items: center; gap: var(--s-md); padding: var(--s-md) var(--s-lg); }
.play-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.play-main strong { font-size: .9375rem; }
.play-main small { font-size: .8125rem; color: var(--text-3); }
.play-tile { gap: var(--s-sm); }

.pickem { display: flex; flex-direction: column; gap: var(--s-md); }
.pick-card { padding: var(--s-md) var(--s-lg); }
.pick-head { display: flex; justify-content: space-between; font-size: .75rem;
             font-weight: 700; color: var(--text-3); margin-bottom: var(--s-sm); }
.pick-sides { display: flex; align-items: center; gap: var(--s-sm); }
.pick-at { font-size: .6875rem; color: var(--text-3); font-weight: 700; flex: none; }
.pick-side {
  flex: 1; min-width: 0; position: relative;
  display: flex; align-items: center; gap: .45rem;
  padding: .6rem .7rem; border-radius: var(--r-md);
  background: var(--fill); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  text-align: left;
}
.pick-side.is-on {
  background: linear-gradient(135deg, var(--t1), var(--t2));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5);
}
.pick-name { flex: 1; min-width: 0; font-weight: 700; font-size: .875rem;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-rec { font-size: .75rem; color: var(--text-3); flex: none; }
.pick-side.is-on .pick-rec { color: rgba(255,255,255,.8); }
.pick-check { flex: none; font-weight: 800; }

/* ---------- Rankings / odds / search -------------------------------------- */

.rank-n { width: 1.9rem; flex: none; font-family: "Graduate", serif;
          font-size: .9375rem; color: var(--text-3); }
.rank-pts { font-size: .8125rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.odds-row { justify-content: space-between; }
.odds-teams { font-size: .9375rem; font-weight: 600; }
.odds-line { font-size: .875rem; color: var(--text-2); font-variant-numeric: tabular-nums; }

.search-field { margin-bottom: var(--s-lg); }
.search-input {
  width: 100%; padding: .8rem 1rem; border-radius: var(--r-md);
  background: var(--fill); border: 0; color: var(--text); font-size: 1rem;
}
.search-input::placeholder { color: var(--text-3); }

.conf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--s-sm); }
.conf-tile {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm);
  padding: var(--s-md) var(--s-lg); border-radius: var(--r-md);
  background: var(--card); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  font-weight: 700; font-size: .9375rem; text-align: left;
  /* ESPN returns conference abbreviations as lowercase slugs ("big10", "sec"). */
  text-transform: uppercase;
}
.conf-tile:hover { background: var(--card-elev); }
.conf-count { color: var(--text-3); font-weight: 600; font-size: .8125rem; }

/* ---------- Player --------------------------------------------------------- */

.player-head { display: flex; flex-direction: column; align-items: center; gap: .35rem;
               padding-top: var(--s-md); padding-bottom: var(--s-xl); }
.player-head .round-btn { align-self: flex-start; }
.player-photo { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; background: var(--fill); }
.player-photo.is-blank { display: block; }
.player-name { font-size: 1.6rem; text-align: center; }
.player-meta { margin: 0; color: var(--text-3); font-size: .875rem; }

/* ---------- Chat ----------------------------------------------------------- */

.room-bar { display: flex; align-items: center; justify-content: space-between;
            gap: var(--s-md); padding: var(--s-md) var(--s-lg);
            max-width: 44rem; margin-inline: auto; }
.room-title { font-size: 1.05rem; }
.chat { display: flex; flex-direction: column; gap: var(--s-md); }
.chat-log { min-height: 40vh; max-height: 60vh; overflow-y: auto;
            display: flex; flex-direction: column; gap: var(--s-md); }
.chat-msg { display: flex; flex-direction: column; gap: .1rem; }
.chat-who { font-size: .8125rem; font-weight: 700; color: var(--live); }
.chat-body { color: var(--text-2); }
.chat-composer { display: flex; gap: var(--s-sm); align-items: center;
                 background: var(--fill); border-radius: var(--r-pill); padding: .3rem .3rem .3rem 1rem; }
.chat-input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font-size: 1rem; padding: .5rem 0; }
.chat-input::placeholder { color: var(--text-3); }
.chat-send { width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none;
             display: grid; place-items: center; background: rgba(255,255,255,.12); }

/* ---------- Account -------------------------------------------------------- */

.account-card { margin-bottom: var(--s-xxl); }
.account-card h3 { margin-bottom: var(--s-sm); }
.account-email { font-family: "Graduate", serif; font-size: 1.1rem; margin-bottom: var(--s-md); }
.account-actions { margin-top: var(--s-lg); }

/* AccountAuthView's three doors: Apple, Google, Email. */
.auth-providers { display: flex; flex-direction: column; gap: var(--s-sm); margin-top: var(--s-lg); }
.auth-provider {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.25rem; border-radius: var(--r-pill);
  background: var(--fill); color: var(--text);
  font-size: .9375rem; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.auth-provider:hover { background: rgba(255,255,255,.11); }
.ap-mark { font-weight: 800; }

.auth-email { margin-top: var(--s-lg); }
.auth-form { display: flex; flex-direction: column; gap: var(--s-sm); }
.auth-label { font-size: .6875rem; font-weight: 800; letter-spacing: .1em;
              text-transform: uppercase; color: var(--text-3); margin-top: var(--s-sm); }
.auth-input {
  width: 100%; padding: .75rem 1rem; border-radius: var(--r-md);
  background: var(--fill); border: 0; color: var(--text); font-size: 1rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.auth-input::placeholder { color: var(--text-3); }
.auth-input:disabled { opacity: .5; }
.auth-at { display: flex; align-items: center; gap: .4rem; }
.auth-at > span { color: var(--text-3); font-weight: 800; font-size: 1.05rem; }
.auth-actions { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-top: var(--s-md); }
.auth-actions .btn { flex: 1 1 10rem; }
.auth-error { margin: 0; color: var(--live); font-size: .8125rem; }
.auth-note  { margin: 0; color: var(--accent); font-size: .8125rem; }

/* ---------- Home ----------------------------------------------------------- */

.home-hero { padding-block: clamp(1.5rem, 5vw, 3.5rem) clamp(2rem, 5vw, 3rem); max-width: 42rem; }
.home-hero h1 { font-size: clamp(2.25rem, 7vw, 4rem); letter-spacing: -.02em; }
.hero-count { color: var(--text-3); }
.see-all { margin: var(--s-lg) 0 0; font-size: .875rem; }

/* ---------- Team + news cards ---------------------------------------------- */

.team-card {
  display: flex; align-items: center; gap: var(--s-md);
  padding: var(--s-md) var(--s-lg); border-radius: var(--r-md);
  color: var(--text); text-decoration: none;
  /* SoftTeamCard: a light team wash from the leading edge over the card fill,
     with the same neutral hairline every other card uses. Dozens share a
     screen here, so the loud slab treatment would fight itself. */
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--t1) 16%, transparent) 0%,
      color-mix(in srgb, var(--t1) 5%, transparent) 50%,
      transparent 100%),
    var(--card);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.team-card:hover { text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.tc-main { display: flex; flex-direction: column; min-width: 0; }
.tc-main strong { font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-main small { font-size: .75rem; color: var(--text-3); }

.lead-story {
  display: block; border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s-xxxl);
  background: var(--card); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  color: var(--text); text-decoration: none;
}
.lead-story:hover { text-decoration: none; background: var(--card-elev); }
.lead-story img { width: 100%; max-height: 22rem; object-fit: cover; }
.lead-body { padding: var(--s-xl); }
.lead-body h2 { margin: .35rem 0 var(--s-sm); }
.lead-body p { margin: 0; color: var(--text-3); }

.news-card {
  display: flex; flex-direction: column; gap: .35rem;
  padding: var(--s-lg); border-radius: var(--r-md);
  background: var(--card); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  color: var(--text); text-decoration: none;
}
.news-card:hover { text-decoration: none; background: var(--card-elev); }
.news-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover;
                 border-radius: var(--r-sm); margin-bottom: var(--s-sm); }
.news-card strong { font-size: .9375rem; line-height: 1.35; }

@media (max-width: 48rem) {
  .masthead { flex-wrap: wrap; padding-block: var(--s-md); }
  .masthead .site-nav { order: 3; width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none;
                        mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent); }
  .masthead .site-nav::-webkit-scrollbar { display: none; }
  .masthead .site-nav a { flex: none; }
  .masthead-actions { margin-left: auto; }
}