/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── League Themes (CSS variables) ────────────────────────────── */
:root {
  /* NBA (default) */
  --accent1:      #1d428a;
  --accent1-rgb:  29,66,138;
  --accent2:      #c8102e;
  /* Filled controls and accent text ask for these three by name. --accent is
     the fill; --accent-fg is whatever text stays readable ON that fill; and
     --accent-ink is the same color adjusted to be readable AS text on this
     theme's card (navy on a navy card is invisible, so the dark theme opens
     it up). A chosen favorite team overwrites all three from auth.js. */
  --accent:           #1d428a;
  --accent-fg:        #ffffff;
  --accent-ink-dark:  #90a2c6;
  --accent2-ink-dark: #e28392;
  --bg:           #102346;
  --bg-nav:       #15284c;
  --bg-card:      #172b50;
  --bg-card2:     #1e3660;
  --border:       #27406d;
  --text:         #e8edf8;
  /* Was #8a99b8. Fine on the page ground, but this colour also carries the
     secondary text on the app's LIGHTER dark surfaces — the raised card
     (#1e3660) and the open league row (#2e446b) — where it measured 4.18 and
     3.40. Opened up until the worst of those clears 4.5; on the base ground
     it now reads 7.20. */
  --muted:        #a5b1c9;

  /* Status colors (same across all leagues) */
  --green:        #16a34a;
  --yellow:       #ca8a04;
  --orange:       #f97316;
  --red:          #ef4444;

  --radius:       10px;
  --transition:   0.35s ease;
}

/* EuroLeague theme */
[data-league="EuroLeague"] {
  --accent1:      #ff6b00;
  --accent1-rgb:  255,107,0;
  --accent2:      #ff9a3c;
  --accent:           #ff6b00;
  --accent-fg:        #111a2b;   /* white on this orange is 2.86 — dark is 6.10 */
  --accent-ink-dark:  #ff8a36;
  --accent2-ink-dark: #ff9a3c;
  --bg:           #0b0907;
  --bg-nav:       #111111;
  --bg-card:      #141410;
  --bg-card2:     #1c1c16;
  --border:       #2a2820;
  --muted:        #969696;
}

/* EuroLeague — warm orange bleeds through the dark like embers */
body[data-league="EuroLeague"]::before {
  background:
    radial-gradient(ellipse 160% 70% at 50% -10%,
      rgba(255,100,0, 0.55) 0%,
      rgba(220,70,0,  0.28) 40%,
      rgba(150,40,0,  0.10) 65%,
      transparent 80%),
    radial-gradient(ellipse 80% 40% at 50% 0%,
      rgba(255,150,40, 0.25) 0%,
      transparent 60%);
}

/* National Teams theme */
[data-league="NationalTeams"] {
  --accent1:      #d4a843;
  --accent1-rgb:  212,168,67;
  --accent2:      #f0d080;
  --accent:           #d4a843;
  --accent-fg:        #111a2b;   /* white on this gold is 2.21 — dark is 7.86 */
  --accent-ink-dark:  #d5ab49;
  --accent2-ink-dark: #f0d080;
  --bg:           #09100f;
  --bg-nav:       #0f1a18;
  --bg-card:      #121e1c;
  --bg-card2:     #1a2a27;
  --border:       #1e3530;
  --muted:        #87a39d;
}

/* ── Names the stylesheets ask for that nothing ever defined ──────────────
   Six variable names are read 60 times across auth/chat/rate-limit/game-detail
   but were never declared anywhere, so every one of those rules silently fell
   through to the hardcoded fallback written beside it — a fixed light grey, a
   fixed white, a fixed navy. That is why a handful of controls stayed light on
   the dark theme no matter what the theme did. Four of them are plain aliases
   onto the tokens that DO exist.

   Declared on `body` as well as `:root` on purpose: the EuroLeague and
   NationalTeams palettes are declared as bare [data-league="..."] blocks, and
   home.js puts that attribute on <body>. A var() resolved once on :root would
   keep reading :root's copy of --bg-card forever; repeating the declaration on
   body makes it resolve again there, against whichever league's value body
   actually carries. */
:root, body {
  --bg-base:     var(--bg);
  --bg-surface:  var(--bg-card);
  --bg-elevated: var(--bg-nav);
  --text-muted:  var(--muted);
  --accent-soft: rgba(var(--accent1-rgb), .09);
}

/* --accent-ink is the accent color made readable AS TEXT, which depends on
   which theme is behind it. Both variants are computed up front (statically
   per league above, or by auth.js for a chosen team) and this picks one.
   Same :root+body doubling, same reason. */
:root, body {
  --accent-ink:  var(--accent-ink-dark,  #90a2c6);
  --accent2-ink: var(--accent2-ink-dark, #e28392);
}
html[data-theme="light"], html[data-theme="light"] body {
  --accent-ink:  var(--accent-ink-light,  #1d428a);
  --accent2-ink: var(--accent2-ink-light, #c8102e);
}

/* ── Team crests ─────────────────────────────────────────────────────────
   A disc in the club's colour, replacing the badges the app used to fetch
   from the leagues' own CDNs. See frontend/js/crest.js for why.

   The ring is on every disc, not only the dark ones. Measured: ASVEL's black
   against the EuroLeague card is edgeless, and so is Maccabi's yellow against
   a white one at 1.49 — the same problem, one per theme. Grey at 40% is the
   one ring colour that holds against both a near-black and a white ground
   without tinting the club colour it surrounds. */
:root, body            { --crest-ring: rgba(90, 100, 120, .40); }
html[data-theme="dark"], html[data-theme="dark"] body
                       { --crest-ring: rgba(255, 255, 255, .30); }

.team-crest {
  display: inline-block;
  border-radius: 50%;
  flex: none;
  vertical-align: middle;
  box-sizing: border-box;
}

/* Visible only to a keyboard: off-screen until it takes focus, then it lands
   in the top corner where the reader is already looking. */
.skip-link {
  position: absolute;
  right: 8px;
  top: -60px;
  z-index: 10000;
  padding: 10px 18px;
  border-radius: 0 0 10px 10px;
  background: var(--accent1, #1d428a);
  color: var(--accent-fg, #fff);
  font-family: "Heebo", sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: -3px;
}

/* Two token names the stylesheets have been using for a long time and that
   were never defined anywhere: --text-primary and --text-secondary. Every one
   of the 55 uses fell through to its hardcoded fallback, so those elements
   showed one fixed colour whatever the theme — which is why the run headline
   inside a game rendered #111 on a navy panel, 1.58:1, in the dark theme.
   Aliasing them onto the real tokens makes all 55 follow the theme at once. */
:root {
  --text-primary:   var(--text);
  --text-secondary: var(--muted);
}

/* ── Base ──────────────────────────────────────────────────────── */
html { font-size: 16px; overflow-x: hidden; }

/* While a full-screen panel (Team Hub, Standings, Chat, ...) is open, fully
   block background scroll — otherwise html/body's overflow-x:hidden (which
   the CSS spec auto-computes to overflow-y:auto on the axis you didn't set)
   makes them their own independent scroll containers. The stub overlay is
   position:fixed so it never physically moves, but nothing was stopping
   wheel/touch input from bubbling past it and scrolling the hidden page
   underneath — invisible until you scrolled far enough to notice content
   shifting. `overflow:hidden` on both axes cancels that outright. */
html.screen-locked, body.screen-locked {
  overflow: hidden !important;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Heebo", "Arial Hebrew", Arial, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
  overflow-x: hidden;
}
html[dir="rtl"] body { direction: rtl; }

/* Subtle radial glow from top (matches HTML files) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 90% 50% at 50% 0%,
    rgba(var(--accent1-rgb, 29,66,138), 0.25) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transition: background var(--transition);
}

/* ── Header ────────────────────────────────────────────────────── */
.app-header {
  background: linear-gradient(135deg, var(--accent1) 0%, var(--bg-nav) 60%, var(--bg) 100%);
  border-bottom: 3px solid var(--accent2);
  box-shadow: 0 4px 40px rgba(0,0,0,0.4);
  position: sticky;
  top: 0;
  /* Same z-index as .stub-screen (team-hub, player-profile, etc.) would let
     a later-in-DOM stub visually win the tie and sit over the header —
     .profile-menu's own z-index:9999 can't rescue it, since stacking only
     competes within a shared parent context. One point above .stub-screen
     keeps the header (and its dropdown) on top of any open screen, same
     fix already used for .league-bar's identical trap. Reported live
     2026-09-20: opening the profile menu from Team Hub, it rendered
     hidden behind the team-colored header banner. */
  z-index: 101;
  transition: background var(--transition), border-color var(--transition);
}

/* When a favorite team's colors are active, the header goes flat/solid
   instead of fading into the league's own --bg-nav/--bg — otherwise the
   team color only ever showed on one edge of the gradient. */
body.team-themed .app-header {
  background: var(--accent1);
}

.header-inner {
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: 0 66px 0 16px; /* right padding makes room for the absolute circular logo (46px + margins) */
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Settings gear — top-left in RTL header */
.header-settings-btn,
.header-search-btn {
  background: none;
  border: none;
  color: var(--text-muted, #6b7fa8);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.header-settings-btn:hover,
.header-settings-btn:active,
.header-search-btn:hover,
.header-search-btn:active {
  /* The app header is the dark team-coloured bar in BOTH themes, so this one
     stays light rather than following --text-primary like the other 54. */
  color: #f0f4ff;
  background: rgba(255,255,255,0.07);
}

/* Logo: absolute in the true top-right corner of the full-width header */
.logo-icon {
  position: absolute;
  right: 10px;
  top: 6px;
  height: 46px;
  width: 46px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  z-index: 2;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

@keyframes prof-talk-img {
  0%, 100% { transform: translateY(0); }
  40%       { transform: translateY(-6px); }
  70%       { transform: translateY(-2px); }
}

@keyframes prof-grade-a {
  0%        { transform: scale(1) rotate(0deg); }
  20%       { transform: scale(1.18) rotate(-6deg); }
  40%       { transform: scale(1.18) rotate(6deg); }
  60%       { transform: scale(1.1) rotate(-3deg); }
  80%       { transform: scale(1.05) rotate(2deg); }
  100%      { transform: scale(1) rotate(0deg); }
}

/* Talking animation on last professor avatar in chat */
#chat-thread.prof-talking .chat-msg--professor:last-child .chat-prof-img {
  animation: prof-talk-img 0.65s ease-in-out infinite;
}

.prof-grade-a-anim {
  animation: prof-grade-a 0.7s ease-in-out forwards !important;
}

.logo-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #f5f5f5;
  text-transform: uppercase;
  /* Warm glow matching the logo's orange halo in the corner */
  text-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 0 16px rgba(255,120,30,0.30);
}

/* Live indicator */
.live-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Was 0.25, which is not enough wash to make the ground predictable: over
     Maccabi's yellow header the pill came out a mid gold, and white on it is
     2.66. At 0.5 the darkest club colour in the app still clears 4.5 with
     white (Maccabi, the lightest, is the binding case at 6.4) — so the pill
     can keep fixed white text instead of guessing per club. */
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 5px 12px;
}

/* Fixed white + a colored glow, not a direct var(--accent2) fill — a
   favorited team's color can be black (Nets) or very light (Spurs' silver,
   Maccabi's yellow), which made the dot/text disappear against the pill's
   own dark semi-transparent background. The glow still carries the team's
   color without risking full invisibility. */
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px var(--accent2);
  animation: blink 1.4s infinite;
}

@keyframes blink {
  0%,100% { opacity:1; }
  50%      { opacity:0.3; }
}

.live-text {
  font-family: "Barlow Condensed", sans-serif;
  /* Today's date. Was 11px with 1.5px of tracking, which on three characters
     ("1.9") reads as sparse rather than deliberate and made the smallest
     thing in the header the one carrying the date. */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  /* NOT --accent-fg: unlike everything else painted on the club colour, this
     sits on the pill's own half-black wash, which is dark whatever the club
     is. The club-derived colour is computed for the UNwashed header and comes
     out dark-on-dark here. */
  color: #fff;
  text-transform: uppercase;
  transition: color var(--transition);
}

/* ── League Selector (header bar) ─────────────────────────────── */
.league-bar {
  background: var(--bg-nav);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 109px; /* header(58px) + screen-nav(51px) — desktop only */
  z-index: 99;
  transition: background var(--transition);
}

/* Mobile: screen-nav moves to bottom, so league-bar sits just below header */
@media (max-width: 480px) {
  .league-bar {
    top: 58px;
  }
}

.league-bar-inner {
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: 0 16px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Date Navigator ────────────────────────────────────────────── */
.date-nav {
  background: var(--bg-nav);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

.date-nav-inner {
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.date-nav-arrow {
  background: none;
  border: none;
  color: var(--accent-ink);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 10px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
  line-height: 1;
  opacity: 0.85;
}

.date-nav-arrow:hover:not(:disabled) {
  opacity: 1;
  background: rgba(var(--accent1-rgb), 0.10);
}

.date-nav-arrow:disabled {
  opacity: 0.2;
  cursor: default;
}

/* ── Main content ──────────────────────────────────────────────── */
.main-content {
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: 14px 14px 80px;
  position: relative;
  z-index: 1;
}

/* ── Section heading (matches HTML files) ──────────────────────── */
.section-head {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}

.section-bar {
  width: 5px;
  height: 26px;
  background: var(--accent2);
  border-radius: 2px;
  /* Logical, not physical: with margin-left the gap sat between the bar and
     the edge of the card in English, and the bar pressed against the heading. */
  margin-inline-end: 10px;
  flex-shrink: 0;
  transition: background var(--transition);
}

.section-head h2 {
  /* Anton has no Hebrew glyphs at all, so this heading was silently
     falling through to whatever Hebrew face the device happens to ship —
     a different one on every phone, with no say in it. Heebo is already
     loaded for the app (same <link> as Anton) and carries the weight this
     needs. Anton stays first: where the content is Latin or numeric it is
     still the right face, and it keeps rendering there.
     The 2px of tracking was chosen for Anton's narrow caps; Hebrew has no
     ascenders or descenders to hold a word together across that gap. */
  font-family: "Anton", "Heebo", sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .5px;
  color: #f5f5f5;
  text-transform: uppercase;
  flex: 1;
}

.games-count {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-card2);
  color: var(--accent-ink);
  border-radius: 10px;
  padding: 2px 10px;
  letter-spacing: 0.5px;
  transition: color var(--transition);
}

/* Fuel bar row */
.fuel-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fuel-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  font-family: "Barlow Condensed", sans-serif;
}

.fuel-bar-wrap {
  width: 55px;
  height: 4px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.fuel-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}

.fuel-green  { background: #22c55e; }
.fuel-yellow { background: #eab308; }
.fuel-orange { background: #f97316; }
.fuel-red    { background: #ef4444; }

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Empty / Error ─────────────────────────────────────────────── */
.no-games, .error-msg {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

.no-games-icon { font-size: 2.5rem; display: block; margin-bottom: 12px; }
.no-games p, .error-msg p { font-size: 1.15rem; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.no-games small, .error-msg small { font-size: 1rem; font-weight: 600; color: #b8c6e0; }

/* "Games after midnight" hint — see _checkAfterMidnightHint in home.js.
   A quiet note at the foot of the games card (redesign): the text colour,
   a line above it, the link underlined, a 44px dismiss button. */
.after-midnight-hint {
  position: relative;
  margin: 0;
  /* Room for the dismiss button on its own side (inline-end) in both
     directions — the physical padding left it on the other side, so in
     Hebrew the ✕ sat on top of the text. */
  padding: 12px 4px;
  padding-inline-end: 44px;
  border-top: 1px solid var(--ds-line);
  font: 500 var(--ds-fs-14)/1.55 var(--ds-font);
  color: var(--ds-ink2);
  text-wrap: pretty;
}
.after-midnight-hint button {
  font: 800 var(--ds-fs-14)/1.55 var(--ds-font);
  color: var(--ds-ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.after-midnight-hint .amh-dismiss {
  position: absolute;
  inset-inline-end: 0;
  top: 2px;
  width: var(--ds-h-btn);
  height: var(--ds-h-btn);
  display: grid;
  place-items: center;
  padding: 0;
  font: 400 22px/1 var(--ds-font);
  text-decoration: none;
  color: var(--ds-ink2);
}
.after-midnight-hint .amh-dismiss:hover { color: var(--ds-ink); background: var(--ds-soft); }

.retry-btn {
  margin-top: 14px;
  background: var(--accent1);
  color: var(--accent-fg, #fff);
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
}

.hidden { display: none !important; }

/* ── Ask the Professor ─────────────────────────────────────────── */
.ask-section { margin-top: 24px; }

/* ── New chat button ──────────────────────────────────────── */
.new-chat-btn {
  margin-right: auto;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  color: var(--muted);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.new-chat-btn:hover { border-color: var(--accent1); color: var(--accent-ink); }

/* ── Chat header actions row ─────────────────────────────── */
.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}

/* ── Lab Mode button ─────────────────────────────────────── */
.lab-mode-btn {
  /* A 44px target and a drawn flask instead of the 🔬 emoji (24.10). */
  inline-size: var(--ds-h-btn, 44px);
  block-size: var(--ds-h-btn, 44px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid var(--ds-line);
  border-radius: 0;
  background: transparent;
  color: var(--ds-ink2);
  cursor: pointer;
  transition: color var(--ds-t-ctrl, 150ms) ease, background-color var(--ds-t-ctrl, 150ms) ease;
}
.lab-mode-btn:hover { color: var(--ds-ink); background: var(--ds-soft); }
.lab-mode-btn--on { color: var(--ds-card); background: var(--ds-ink); border-color: var(--ds-ink); }
.lab-mode-btn:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }

/* ── Chat body layout: professor panel + messages ────────────── */
.chat-body {
  display: flex;
  align-items: flex-end;
  gap: 0;
}

.chat-prof-panel {
  width: 112px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  position: relative; /* for blink overlay */
  transition: align-items 0s;
}

/* After professor responds — anchor avatar to the TOP of the chat area */
.chat-body.has-prof-msg {
  align-items: flex-start;
}

.chat-body.has-prof-msg .chat-prof-panel {
  align-items: flex-start;
  padding-bottom: 0;
  padding-top: 6px;
}

.chat-prof-large {
  width: 112px;
  height: 190px;
  display: block;
  object-fit: cover;
  object-position: center top;
  border-radius: 14px 14px 6px 6px;
}

/* Blink animation removed (2026-07-23): the base and blink source images
   turned out to be two independently-rendered images, not pixel-aligned
   copies with only the eyelids redrawn — revealing even a small clip-path
   window over them made the eyes visibly jump sideways on every blink (real
   user report). No aligned replacement asset available, so the avatar now
   just shows the static open-eyes image permanently. See home.js for the
   full history (this went through a stuck-animation bug fix first, then
   this alignment issue, before landing on removing the effect outright). */

/* Speaking-video mouth animation removed (2026-07-23) — same class of
   problem as the blink effect above: the mouth-flap video wasn't properly
   matched to the base avatar and looked disconnected from the face rather
   than a natural talking animation (real user report). Revisit with a real
   designer once there's a team for it. */

/* Bob the open-eyes image when talking */
.chat-body.prof-talking .chat-prof-large {
  animation: prof-talk-img 0.55s ease-in-out infinite;
}

.chat-main {
  flex: 1;
  min-width: 0;
}

/* Hide per-message small avatar — large panel handles presence */
.chat-msg--professor .chat-avatar {
  display: none;
}

/* ── Chat thread ──────────────────────────────────────────── */
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px 0 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.chat-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  animation: fadeSlideUp 0.25s ease;
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* User message — right side */
.chat-msg--user {
  flex-direction: row-reverse;
}
.chat-msg--user .chat-bubble {
  background: var(--accent1);
  color: var(--accent-fg, #fff);
  border-radius: 16px 16px 4px 16px;
  max-width: 78%;
}

/* Professor message — left side */
.chat-msg--professor {
  flex-direction: row;
}
.chat-msg--professor .chat-bubble {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-right: 3px solid var(--accent1);
  color: var(--text);
  border-radius: 16px 16px 16px 4px;
  max-width: 88%;
}

.chat-avatar {
  font-size: 20px;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.chat-prof-img {
  width: 72px;
  height: 72px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.chat-bubble {
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* "Continue in full chat screen" nudge — shown once after a few exchanges */
.chat-full-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}
.chat-full-nudge button {
  flex-shrink: 0;
  background: var(--accent1, #1a3a6b);
  color: var(--accent-fg, #fff);
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.chat-full-nudge button:hover { opacity: .85; }

/* Typing indicator */
.chat-typing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 14px 18px;
}
.chat-typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: typingDot 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-5px); opacity: 1; }
}
/* Appended by the reassurance timer (askProfessor in home.js) after 12s if
   the answer is still generating. flex-basis:100% on a flex-wrap row puts it
   on its own line below the three dots without touching their layout. */
.chat-thinking-note {
  flex-basis: 100%;
  font-size: .8rem;
  color: var(--muted);
}

/* ── Chat empty-state suggestion chips ───────────────────────── */
.chat-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 12px 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chat-chips::-webkit-scrollbar { display: none; }

.chat-chips.hidden { display: none; }

.chat-chip {
  flex: 0 0 auto;
  font-family: "Heebo", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
  text-align: center;
  white-space: nowrap;
}
html[dir="rtl"] .chat-chip { direction: rtl; }

.chat-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

/* Not a chat prompt — it OPENS the Trade Machine. Styled as a filled brand
   button (not a tinted ghost chip) so it reads as a feature entry, with a
   leading icon and a trailing arrow that signal "tap to open". */
.chat-chip--trade {
  color: var(--accent-fg, #fff);
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.18);
  /* The far stop used to be a fixed navy, which only made sense while the
     near stop was also navy. With a club colour selected the chip became
     half yellow and half navy, and no single text colour is readable across
     that span — the dark text that works on the yellow measured 1.38 on the
     navy end. Ending on a slightly deeper shade of the SAME colour keeps the
     depth the gradient was for and keeps one text colour valid across it;
     8% is the most it can travel before the darkest end starts failing. */
  background: linear-gradient(135deg,
              var(--accent) 0%,
              color-mix(in srgb, var(--accent) 92%, #000) 100%);
  box-shadow: 0 2px 10px rgba(var(--accent1-rgb, 29,66,138), 0.45);
}

.chat-chip--trade:hover {
  filter: brightness(1.12);
  border-color: rgba(255,255,255,0.32);
  box-shadow: 0 4px 14px rgba(var(--accent1-rgb, 29,66,138), 0.6);
}

.ask-bar {
  display: flex;
  gap: 10px;
}

.ask-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--text);
  font-size: 14px;
  font-family: "Barlow", "Heebo", sans-serif;
  outline: none;
  transition: border-color 0.2s;
  resize: none;
  overflow: hidden;
  line-height: 1.5;
  max-height: 160px;
  overflow-y: auto;
}
html[dir="rtl"] .ask-input { direction: rtl; }

.ask-input:focus { border-color: var(--accent1); }
.ask-input::placeholder { color: var(--muted); }

.ask-btn {
  background: var(--accent1);
  color: var(--accent-fg, #fff);
  border: none;
  border-radius: var(--radius);
  padding: 12px 22px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
  letter-spacing: 1px;
}

.ask-btn:hover    { background: var(--accent2); }
.ask-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.spinner { display: inline-block; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.professor-answer {
  margin-top: 14px;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-right: 3px solid var(--accent1);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  animation: fadeUp 0.3s ease;
  transition: border-color var(--transition);
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:none; }
}

/* ── Professor Bubble ──────────────────────────────────────────── */
.professor-bubble {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: var(--app-max-width);
  background: var(--bg-card2);
  border: 1px solid var(--accent1);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  z-index: 200;
  animation: slideUp 0.35s ease;
  transition: border-color var(--transition);
}

@keyframes slideUp {
  from { opacity:0; transform:translateX(-50%) translateY(20px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

.bubble-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.bubble-icon  { font-size: 1.2rem; }

.bubble-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-ink);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  flex: 1;
  transition: color var(--transition);
}

.bubble-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
}

.bubble-close:hover { color: var(--text); }

.bubble-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

/* ── Footer ────────────────────────────────────────────────────── */
.app-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 10px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  color: var(--muted);
  z-index: 100;
  letter-spacing: 0.5px;
  transition: background var(--transition);
}

.footer-sep { margin: 0 8px; }

/* Underline AND accent color, always on — not just on :hover, which doesn't
   exist on touch. One signal (underline alone, still on --muted grey) reads
   too close to the plain copyright/data-source text beside it. Same
   treatment as .term-link, the app's other clickable-text convention. */
#footer-accessibility {
  color: var(--accent-ink, var(--accent1));
  text-decoration: underline;
  cursor: pointer;
}
#footer-accessibility:hover { opacity: .75; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .professor-bubble { bottom: 74px; }
}

/* The month calendar lives in css/screens/calendar.css (redesign). */

/* ═══════════════════════════════════════════════════════════════
   TOP SCREEN NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.screen-nav {
  background: var(--bg-nav);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 58px; /* below app-header */
  z-index: 99;
}

.sn-inner {
  display: flex;
  max-width: var(--app-max-width);
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
  height: 56px;
}
.sn-inner::-webkit-scrollbar { display: none; }

.sn-tab {
  flex: 1;
  min-width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 8px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.sn-tab svg {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.sn-tab:hover:not(.active) {
  color: var(--text);
}

.sn-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent2);
}

.sn-tab.active svg {
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════
   STANDINGS SCREEN
   ═══════════════════════════════════════════════════════════════ */

.standings-wrap {
  width: 100%;
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: 12px 0 24px;
}

/* Reverted 2026-07-30: user's "teams side by side" request was actually
   about the Games/home screen's game cards (which already show away/home
   side by side — see .teams-row in home.js), not the Standings screen. Kept
   ONLY the wider desktop max-width from that attempt (480px was clamping
   the table on desktop too, forcing horizontal scroll on a wide screen even
   though there was room) — the toggle/one-at-a-time behavior is back to
   exactly how it was before. */
@media (min-width: 1024px) {
  .standings-wrap { max-width: 900px; }
}

.st-filter-bar {
  display: flex;
  gap: 8px;
  padding: 14px 16px 10px;
}

.st-filter {
  flex: 1;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
}

.st-filter.active {
  background: rgba(var(--accent1-rgb), 0.15);
  border-color: var(--accent1);
  color: var(--text);
}

/* Winner League / Cup toggle — same visual language as .st-filter above,
   its own class so it doesn't accidentally get swept up by an
   .st-filter-bar display:none rule written for the NBA east/west bar. */
.st-wl-comp-bar {
  display: flex;
  gap: 8px;
  padding: 14px 16px 10px;
}

.st-wl-comp-btn {
  flex: 1;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
}

.st-wl-comp-btn.active {
  background: rgba(var(--accent1-rgb), 0.15);
  border-color: var(--accent1);
  color: var(--text);
}

.st-table-wrap {
  overflow-x: auto;
  padding: 0 16px;
}

.st-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
}

.st-table thead th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 4px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.st-team-col { text-align: start !important; }

.st-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}

.st-table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}

.st-row-clickable {
  cursor: pointer;
}

/* קו אחרי מקום 6 — כאן מתחיל ה-Play-In */
.st-playin-line td {
  border-bottom: 1px dashed rgba(202,138,4,0.5) !important;
}

/* קו אחרי מקום 10 — כאן מתחילים הנפולים */
.st-out-line td {
  border-bottom: 1px dashed rgba(107,127,168,0.4) !important;
}

.st-rank-cell {
  color: var(--muted);
  font-size: 11px;
  padding: 10px 6px;
  text-align: center;
  width: 20px;
}

.st-team-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  text-align: start;
}

/* Windows browsers draw a flag emoji as two letters ("IL"). This font holds only
   the country flags and only answers for those code points, so every other
   character — and every device that already draws flags — is unaffected. */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("../../assets/fonts/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F;
  font-display: swap;
}
.team-crest--flag,
.team-flag,
.flag-emoji {
  font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.team-crest--flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: none;
  background: none;
  box-shadow: none !important;
}
.st-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.st-team-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.st-num {
  text-align: center;
  padding: 10px 4px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.st-muted { color: var(--muted) !important; font-weight: 400 !important; }

.st-streak {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
}

.st-streak-w {
  background: rgba(22,163,74,0.15);
  color: #22c55e;
}

.st-streak-l {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
}

/* The clinch badges and the legend beneath them, in one place. These used to
   be inline styles in the JS, which no stylesheet can override — so on the
   light theme they stayed the bright shades picked for a dark one. */
.st-clinch--good { color: #22c55e; }
.st-clinch--warn { color: #ca8a04; }
.st-clinch--out  { color: #6b7fa8; }
.st-clinch--east { color: #c8102e; }
.st-clinch--west { color: #4a7fe0; }

/* Darker of the same hue on a pale background: the meaning survives, the
   contrast passes. Measured against the table row, not guessed. */
html[data-theme="light"] .st-clinch--good { color: #137438; }
html[data-theme="light"] .st-clinch--warn { color: #7e6009; }
html[data-theme="light"] .st-clinch--out  { color: #4a5568; }
html[data-theme="light"] .st-clinch--east { color: #a20d25; }
html[data-theme="light"] .st-clinch--west { color: #1d428a; }

html[data-theme="light"] .st-streak-w { color: #116932; }
html[data-theme="light"] .st-streak-l { color: #b91c1c; }

/* Clinch badge */
.st-clinch {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  margin-right: 5px;
  opacity: 0.9;
}

/* The table scrolls sideways and nothing said so, which on a phone meant half
   the columns did not exist for anyone who didn't guess to drag. A fade over
   the scrolling edge plus one line of real text — read aloud by a screen
   reader, unlike a decorative arrow. */
.st-table-wrap { position: relative; }

.st-edge-fade {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 34px;
  pointer-events: none;
  background: linear-gradient(to left, rgba(0,0,0,0), var(--bg-card));
}

.st-swipe-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 0;
  font-family: "Heebo", sans-serif;
  font-size: 11.5px;
  color: var(--muted);
}

.st-swipe-arrow { animation: stNudge 1.8s ease-in-out infinite; }

@keyframes stNudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .st-swipe-arrow { animation: none; }
}

/* On a screen wide enough to show every column there is nothing to swipe to. */
@media (min-width: 900px) {
  .st-swipe-hint, .st-edge-fade { display: none; }
}

/* What a tapped column header says. Sits above the bottom nav so it never
   hides the thing the reader just touched. */
.st-header-tip {
  position: fixed;
  inset-inline: 16px;
  bottom: 84px;
  z-index: 9000;
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100% - 32px);
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg-card);
  font-family: "Heebo", sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  animation: stTipIn 0.16s ease-out;
}

@keyframes stTipIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .st-header-tip { animation: none; }
}

/* A header you can tap should look like one. */
#screen-standings th[title] { cursor: help; }

/* Legend */
.st-legend {
  display: flex;
  gap: 14px;
  padding: 10px 16px 20px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
}

.st-leg-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* BCL / EuroCup / NationalTeams grouped standings — one mini-table per
   group. Real bug found 2026-09-24: the sticky .league-bar renders taller
   than the .stub-screen's top offset accounts for, so without extra
   clearance here the first group's heading (and, for NationalTeams, the
   competition-name label above it) renders hidden underneath the bar. */
#st-groups {
  padding: 36px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.st-group-block { overflow-x: auto; }
.st-group-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  padding: 0 2px;
}
/* Each group is its own <table>, so with automatic layout every group sized its
   columns to its own longest club name — one group with "בוסניה והרצגובינה" pushed
   its number columns sideways while the next group's stayed put. Fixed layout with
   set widths makes every group line up with every other. */
.st-group-table { min-width: 280px; table-layout: fixed; }
.st-group-table th:nth-child(1), .st-group-table td:nth-child(1) { width: 34px; }
.st-group-table th:nth-child(n+3), .st-group-table td:nth-child(n+3) { width: 64px; }
.st-group-table .st-team-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── FIBA Windows Tracker (National Teams standings screen) ── */
.st-wt-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  overflow-x: hidden;
}
.st-wt-standing { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.st-wt-standing-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.st-wt-comp { font-weight: 700; color: var(--text); font-size: 13px; }
.st-wt-promo {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.st-wt-promo-yes { background: color-mix(in srgb, #16a34a 18%, transparent); color: #16a34a; }
.st-wt-promo-no  { background: color-mix(in srgb, #dc2626 14%, transparent); color: #dc2626; }
.st-wt-record { color: var(--muted); font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.st-wt-left { color: var(--muted); font-size: 12px; margin-top: 4px; }
.st-wt-details { padding: 10px 12px; }
.st-wt-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; cursor: pointer; list-style: none; min-height: 32px; }
.st-wt-summary::-webkit-details-marker { display: none; }
.st-wt-summary::after { content: "▾"; margin-inline-start: auto; color: var(--muted); transition: transform .2s; }
.st-wt-details[open] > .st-wt-summary::after { transform: rotate(180deg); }
.st-wt-sum-team { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); font-size: 14px; }
.st-wt-sum-pos { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.st-wt-details .st-wt-window:first-of-type { margin-top: 10px; }
.st-wt-window { margin-bottom: 10px; }
.st-wt-window:last-child { margin-bottom: 0; }
.st-wt-window-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}
.st-wt-window-rec { font-weight: 500; }
.st-wt-game {
  display: flex;
  justify-content: space-between;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 2px;
}
.st-wt-win  { background: color-mix(in srgb, #16a34a 10%, transparent); }
.st-wt-loss { background: color-mix(in srgb, #dc2626 8%, transparent); }
.st-wt-score { font-weight: 700; font-variant-numeric: tabular-nums; }

.st-empty {
  text-align: center;
  color: var(--muted);
  padding: 24px 16px;
  font-family: 'Barlow Condensed', sans-serif;
}

.st-leg-item span {
  font-weight: 700;
  font-size: 11px;
}

.st-skeleton td {
  height: 40px;
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card2) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

/* ── מובייל: ניווט למטה ────────────────────────────────────────── */
@media (max-width: 480px) {
  .screen-nav {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--border);
    border-bottom: none;
    z-index: 200;
  }
  .sn-inner {
    width: 100%;
    max-width: none;
  }

  /* הפוך את הקו האדום — עכשיו למעלה של הטאב */
  .sn-tab {
    border-bottom: none;
    border-top: 3px solid transparent;
    min-width: 0;
    flex: 1;
    padding: 10px 2px 12px;
    font-size: 12px;
    letter-spacing: 0.3px;
    gap: 5px;
  }
  .sn-tab svg {
    width: 24px;
    height: 24px;
  }
  .sn-inner {
    height: 64px;
  }

  .sn-tab.active {
    border-bottom: none;
    border-top-color: var(--accent2);
  }

  /* תוכן שלא ייחסם מאחורי הניווט */
  body {
    padding-bottom: calc(66px + env(safe-area-inset-bottom));
  }

  /* stub screens לא ייחסמו */
  .stub-screen {
    top: 58px;
    bottom: calc(66px + env(safe-area-inset-bottom));
  }
  /* mobile: header(58px) only at top, so push stub down by the league bar (44px).
     NOTE: this rule never applied — an equally specific one later in the file
     always beat it. The one that works is in the re-assert block near the end;
     keep them together rather than adding a third. */

  /* פוטר מקובע ממש מעל הניווט התחתון */
  .app-footer {
    position: fixed;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    z-index: 98;
    border-top: 1px solid var(--border);
  }

  /* גוף — ריפוד לפוטר + ניווט ביחד */
  body {
    padding-bottom: calc(66px + 8px + env(safe-area-inset-bottom, 0px));
  }

  /* פרופסור/צ'אט — צף לתחתית כשיש מעט תוכן */
  .main-content {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 160px);
  }
  .ask-section {
    margin-top: auto;
    padding-top: 16px;
  }
}

/* ── Stub Screens ──────────────────────────────────────────────── */
.stub-screen {
  position: fixed;
  inset: 0;
  top: calc(58px + 51px); /* header 58px + screen-nav 51px */
  background: var(--bg);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
}

/* League bar shown over a stub overlay: lift it above (z-100) and start the
   stub content below it so they don't overlap. */
body.lbar-over-stub .league-bar { z-index: 101; }
body.lbar-over-stub .stub-screen { top: var(--stub-top, calc(58px + 51px + 44px)); }
/* A modal inside a stub can't rise above the lifted bar — hide the bar while open. */
body.cmp-picker-open .league-bar { display: none; }
body.fantasy-modal-open .league-bar { display: none; }

.stub-screen.hidden {
  display: none;
}

/* Mobile: re-assert that stub screens stop above the bottom nav.
   The base rule above uses `inset:0` (bottom:0); because it appears AFTER the
   earlier mobile @media block, it would otherwise win the cascade and let the
   screen extend behind the fixed bottom nav, hiding the last table rows. */
@media (max-width: 480px) {
  .stub-screen {
    top: 58px;
    bottom: calc(66px + env(safe-area-inset-bottom));
  }

  /* Same trap, one selector further along, and it had been costing every
     screen 51 pixels. There IS a mobile rule for this earlier in the file
     (58px header + 44px league bar = 102px), but the general rule below it
     has equal specificity and comes later, so it always won: screens started
     at 153px and the top 51 were empty. The +51 is the DESKTOP top nav, which
     doesn't exist on a phone — the nav is at the bottom here. */
  body.lbar-over-stub .stub-screen { top: var(--stub-top, calc(58px + 44px)); }
}

.stub-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 40px 24px;
}

.stub-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(var(--accent1-rgb), 0.1);
  border: 1px solid rgba(var(--accent1-rgb), 0.2);
  border-radius: 20px;
  color: var(--accent-ink);
}

.stub-icon svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.stub-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text);
}

.stub-sub {
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.5px;
}

/* ── Trade Analyzer CTA in chat ────────────────────────────── */
.chat-trade-cta {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}
.trade-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(29, 66, 138, 0.25);
  border: 1px solid rgba(29, 66, 138, 0.6);
  color: #7eb3ff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.trade-cta-pill:hover,
.trade-cta-pill:active {
  background: rgba(29, 66, 138, 0.45);
  border-color: rgba(29, 66, 138, 0.9);
  color: #aed0ff;
}

/* ════════════════════════════════════════════════════════════════════════
   LIGHT THEME LAYER  (additive — the dark theme above is untouched)
   Activated by html[data-theme="light"] (set in index.html <head>, default).
   League stays identifiable: accent colors are kept, only the canvas turns
   light and text turns near-black for readability.
   ════════════════════════════════════════════════════════════════════════ */

/* NBA light (default league) */
html[data-theme="light"] {
  --bg:        #eaeef6;
  --bg-nav:    #ffffff;
  --bg-card:   #ffffff;
  --bg-card2:  #f3f6fb;
  --border:    #d9e0ee;
  --text:      #141a28;
  /* #5a6783 until the home/away pill put a 13% wash behind it: 4.28 there. */
  --muted:     #57637e;
  --accent1:   #1d428a;
  --accent1-rgb: 29,66,138;
  --accent2:   #c8102e;
  --accent:            #1d428a;
  --accent-fg:         #ffffff;
  --accent-ink-light:  #1d428a;
  --accent2-ink-light: #bb0f2b;
}

/* EuroLeague light — darker orange so accents stay legible on white.
   Not anchored to body on purpose: the dark palette above is written as a bare
   [data-league="..."], so it also lands on any ELEMENT carrying the attribute
   — and the league dropdown's option buttons carry it. Anchored here, the
   light theme never reached those buttons, so each option rendered its
   league's DARK muted grey on a white panel: 2.7:1 and 2.5:1 where the
   standard asks 4.5. Matching the same breadth fixes it wherever it leaks. */
html[data-theme="light"] [data-league="EuroLeague"] {
  --bg:        #f6f1e9;
  --bg-nav:    #ffffff;
  --bg-card:   #ffffff;
  --bg-card2:  #faf4ec;
  --border:    #ecdfce;
  --text:      #1c160f;
  --muted:     #6a5c47;
  --accent1:   #d4540a;
  --accent1-rgb: 212,84,10;
  --accent2:   #e07b1a;
  /* This orange clears 4.5 with neither white nor dark text on it (4.14 /
     4.20), so the fill alone is nudged 4.5% darker — the one league color
     that has to move at all. */
  --accent:            #ca500a;
  --accent-fg:         #ffffff;
  --accent-ink-light:  #a64208;
  --accent2-ink-light: #965211;
}

/* National Teams light — darker gold for legible accents on white.
   Bare attribute selector for the same reason as EuroLeague above. */
html[data-theme="light"] [data-league="NationalTeams"] {
  --bg:        #f5f2e9;
  --bg-nav:    #ffffff;
  --bg-card:   #ffffff;
  --bg-card2:  #faf6ec;
  --border:    #e7e0cc;
  --text:      #171510;
  --muted:     #6b6246;
  --accent1:   #a8801f;
  --accent1-rgb: 168,128,31;
  --accent2:   #c8a23a;
  --accent:            #a8801f;
  --accent-fg:         #111a2b;   /* white on this gold is 3.64 — dark is 4.78 */
  --accent-ink-light:  #7d5f17;
  --accent2-ink-light: #7a6323;
}

/* Header keeps the league color (white text stays readable) instead of the
   accent→bg gradient that would fade into the now-light canvas. */
html[data-theme="light"] .app-header {
  background: linear-gradient(135deg, var(--accent1) 0%, var(--accent1) 60%,
              rgba(var(--accent1-rgb), 0.82) 100%);
  box-shadow: 0 2px 16px rgba(20,30,60,0.12);
}

/* Same specificity as the rule above + later in source, so this wins: when a
   favorite team is active, go fully solid instead of fading to 82% opacity —
   the user asked for one uniform color, not even a subtle fade. */
html[data-theme="light"] body.team-themed .app-header {
  background: var(--accent1);
}

/* Once the header IS the club's colour, its own text has to follow it. The
   fixed near-white is fine on every navy and maroon in the league and
   measures 1.37 on Maccabi's yellow — which is exactly what --accent-fg
   exists to decide. Not scoped to a theme: the header goes solid club colour
   in both, so the text has the same problem in both. */
body.team-themed .app-header .logo-title,
body.team-themed .app-header .header-settings-btn,
body.team-themed .app-header .header-search-btn {
  color: var(--accent-fg, #f5f5f5);
}

/* Soften the top glow on the light canvas; replace the heavy EuroLeague /
   National-Teams ember with the same gentle accent wash. */
html[data-theme="light"] body::before { opacity: 0.4; }
html[data-theme="light"] body[data-league="EuroLeague"]::before,
html[data-theme="light"] body[data-league="NationalTeams"]::before {
  background: radial-gradient(ellipse 90% 50% at 50% 0%,
    rgba(var(--accent1-rgb), 0.16) 0%, transparent 70%);
}

/* ── Readability on the light canvas: colors that were near-white for the dark
   theme wash out on white, so pin them to the themed dark text / muted / accent.
   (.logo-title stays white — it sits on the colored header.) ── */
html[data-theme="light"] .section-head h2 { color: var(--text); }
html[data-theme="light"] .no-games small,
html[data-theme="light"] .error-msg small  { color: var(--muted); }
html[data-theme="light"] .game-time-text    { color: var(--accent-ink); }
/* Injuries screen (light): faded blue text → readable */
html[data-theme="light"] .inj-reason-text { color: #2563eb; }
html[data-theme="light"] .inj-explain-box { color: var(--text); }
/* Chat (home ask-section): white-alpha surfaces → themed/dark-alpha */
html[data-theme="light"] .chat-msg--professor .chat-bubble { border-color: var(--border); }
html[data-theme="light"] .chat-chip:hover {
  background: rgba(20,26,40,0.06);
  border-color: var(--border);
}

/* ── Dark-lock: screens not yet converted to light keep their dark canvas so
   their hardcoded light text stays readable. Removed per-screen as each is
   converted. Remaining: trades. ── */

/* ══ Dark theme: text that vanished into the dark ═══════════════
   Measured on the live app, first pass over the dark theme. The brand blue
   (#1d428a) is the repeat offender: excellent on white, and on the dark
   theme it sits on a navy ground — blue on blue, 1.26:1 for the games
   counter and 1.53 for the date arrows. Lightened toward white until each
   clears 5:1 against the surface it actually sits on, hue kept. */
html[data-theme="dark"] .date-nav-arrow { color: #8599c0; }
html[data-theme="dark"] .games-count    { color: #97a8c9; }

html[data-theme="dark"] .st-streak-l     { color: #f47272; }
html[data-theme="dark"] .st-clinch--east { color: #f06b7f; }
html[data-theme="dark"] .st-clinch--west { color: #7fa4e8; }
html[data-theme="dark"] .st-clinch--out  { color: #97a3bb; }

.st-wt-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.st-wt-select { min-height: 36px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--border, rgba(128,128,128,.35)); background: var(--card, transparent); color: inherit; font: inherit; max-width: 100%; }
.st-wt-chip { min-height: 32px; padding: 2px 10px; border-radius: 16px; border: 1px solid var(--border, rgba(128,128,128,.35)); background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }