/* ── 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;
}

/* A national team's real flag (National Teams league only) — same 80x80
   footprint as .team-logo so the layout doesn't shift, but centered text
   rather than a background image, since it's an emoji glyph, not a crest. */
.team-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  font-size: 48px;
  line-height: 1;
  flex: none;
  vertical-align: middle;
}

/* 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;
}

/* Current league button */
.league-current {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 12px 6px 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.league-current:hover { background: rgba(255,255,255,0.06); }

.league-current-label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text);
  text-transform: uppercase;
}

.league-current-icon {
  font-size: 1rem;
}

.league-current-arrow {
  /* A real tap target: the 10px grey triangle was easy to miss, and someone
     using the app for the first time didn't find how to change league. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 15px;
  line-height: 1;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 50%;
  margin-right: 2px;
  transition: transform 0.2s;
}

.league-current-arrow.open { transform: rotate(180deg); }

.league-date {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.5px;
}

/* ── League Dropdown Panel ─────────────────────────────────────── */
.league-dropdown {
  position: fixed;
  top: 153px; /* header(58px) + screen-nav(51px) + league-bar(44px) — desktop */
  right: 0; left: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Mobile: no screen-nav at top, so dropdown opens just below header + league-bar */
@media (max-width: 480px) {
  .league-dropdown {
    top: 102px; /* header(58px) + league-bar(44px) */
  }
}

.league-dropdown.open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.league-dropdown-panel {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  width: 100%;
  max-width: var(--app-max-width);
  overflow: hidden;
  /* 6 leagues stacked one-per-row ran the panel past a comfortable height —
     two columns keeps it compact. Grid item order still follows DOM order
     under the panel's inherited RTL direction, same as the flex-column
     stack it replaces: first button = top-right, not top-left. */
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.league-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: start;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border);
}

/* Vertical divider between the two columns, only on rows that have a
   second column — the border-bottom rule above already separates rows. */
.league-option:nth-child(odd) { border-inline-end: 1px solid var(--border); }
.league-option:last-child,
.league-option:nth-last-child(2):nth-child(odd) { border-bottom: none; }

@media (max-width: 420px) {
  .league-dropdown-panel { grid-template-columns: 1fr; }
  .league-option:nth-child(odd) { border-inline-end: none; }
}
.league-option:hover { background: rgba(255,255,255,0.05); }

.league-option.active {
  background: rgba(255,255,255,0.07);
}

.league-option-icon { font-size: 1.6rem; }

.league-option-info { flex: 1; text-align: start; }

.league-option-name {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.5px;
  display: block;
}

.league-option-sub {
  font-size: 12px;
  /* NOT var(--muted). Each row carries its own [data-league] so the row can
     show that league's identity, and that attribute drags the league's whole
     palette in with it — including a --muted chosen against ITS background,
     not the one this panel actually has. EuroLeague's grey landed at 4.05 on
     the NBA-themed panel behind it. The panel is always the app's own
     surface, so this text is pinned to the app's own secondary colour. */
  color: #a5b1c9;
  display: block;
  margin-top: 2px;
}
html[data-theme="light"] .league-option-sub { color: #57637e; }

.league-option-check {
  font-size: 1rem;
  color: var(--accent-ink);
  opacity: 0;
  transition: opacity 0.2s;
}

.league-option.active .league-option-check { opacity: 1; }

/* Backdrop to close dropdown */
.league-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  display: none;
}
.league-backdrop.open { display: block; }

/* ── 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;
}

.date-nav-label {
  flex: 0 1 auto;
  text-align: center;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text);
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  padding: 6px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.date-nav-label:hover {
  background: rgba(var(--accent1-rgb), 0.10);
  border-color: rgba(var(--accent1-rgb), 0.30);
}

.date-nav-label .today-badge {
  display: inline-block;
  background: var(--accent1);
  color: var(--accent-fg, #fff);
  font-size: 9px;
  letter-spacing: 1px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: middle;
  transition: background var(--transition);
}

/* Pulses when there's a live game on today's date */
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(var(--accent1-rgb), 0.7); }
  50%       { box-shadow: 0 0 0 5px rgba(var(--accent1-rgb), 0);   }
}
.date-nav-label .today-badge--live {
  animation: livePulse 1.8s ease-in-out infinite;
}

/* ── 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);
}

/* ── Game Cards ────────────────────────────────────────────────── */
.games-list { display: flex; flex-direction: column; gap: 10px; }

.game-card {
  background: linear-gradient(135deg, var(--bg-card2), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s;
}

.game-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent1);
}

/* National teams: schedule and final scores exist, the Film Room behind them
   doesn't — so these cards are read-only and shouldn't advertise a tap. */
.games-list--flat .game-card { cursor: default; }
.games-list--flat .game-card:hover {
  transform: none;
  border-color: var(--border);
}

/* Status top bar */
.game-top-bar {
  padding: 5px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.game-top-bar.live          { background: var(--accent2); }
.game-top-bar.final         { background: #374151; }
.game-top-bar.upcoming      { background: var(--accent1); }
/* Scheduled games: just a thin 3px accent line at the top */
.game-top-bar.upcoming-thin {
  padding: 0;
  height: 3px;
  background: var(--accent1);
  min-height: unset;
}

.game-status-text {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #fff;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Bigger time for scheduled games */
.game-top-bar.upcoming .game-status-text {
  font-size: 16px;
  letter-spacing: 2px;
}

.blink-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: blink 1s infinite;
}

/* The venue note sits beside the competition badge, quieter than it. */
.game-phase--neutral {
  font-weight: 600;
  opacity: 0.85;
  margin-inline-end: 8px;
}

.game-phase {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-fg, #fff);
}

/* Teams + score */
.game-body { padding: 18px 16px 14px; }

.teams-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.team-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Team logo */
/* The crest sits on a card, not on a photo, so the shadow is there to lift it
   a little — not to be seen. It was 50% black at 8px, which reads as a halo of
   its own (Ofri's note) and, on the dark theme, does nothing useful at all: a
   black shadow on a navy ground has nothing to separate. That is why clubs
   whose crest carries black lettering — Miami's wordmark, Brooklyn, San
   Antonio — dissolved into the card at normal zoom.
   So the two themes get opposite treatments. Light: the same soft dark
   shadow, weaker. Dark: a thin light halo, which is the only thing that can
   separate a dark shape from a dark ground, plus a much weaker dark shadow to
   keep some depth. */
.team-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  /* Halo only — no dark shadow under it. Keeping one "for depth" was the
     inconsistency: the argument for the halo is that a dark shadow cannot
     separate anything on a dark ground, and what it does instead is darken
     the pixels ringing the crest. On Toronto, which IS a black circle, that
     read as a smudge around the edge.
     Wide and faint rather than tight and bright. At 2px/.55 the halo traced
     the outline and read as a drawn white keyline on any crest with a hard
     dark edge — Toronto again. Spreading the same light over 3px at .32
     stops it describing an edge while still putting something behind the
     black lettering inside a crest like Miami's, which is the case that
     needs it. */
  filter: drop-shadow(0 0 3px rgba(255,255,255,.32));
  transition: transform 0.2s ease;
}
html[data-theme="light"] .team-logo {
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.22));
}
.game-card:hover .team-logo {
  transform: scale(1.06);
}
.game-card--final .team-logo {
  filter: grayscale(50%) drop-shadow(0 0 3px rgba(255,255,255,.26));
}
html[data-theme="light"] .game-card--final .team-logo {
  filter: grayscale(50%) drop-shadow(0 1px 3px rgba(0,0,0,.2));
}

/* ── Crests on a near-black card ────────────────────────────────────────
   EuroLeague and National Teams put their cards on #141410 / #121e1c, and
   their crest set is not the NBA's: measured across all twenty clubs, ASVEL
   loses 100% of its visible pixels to below 3:1 on that ground — the whole
   badge, nothing left to read — with Baskonia, Efes and Paris between 64 and
   70%. A halo cannot fix that: it lights the outline, and what is missing is
   the inside.

   A light disc behind the crest can, and it goes on EVERY crest in these
   leagues rather than only the dark ones, so no badge looks singled out. Not
   applied to the NBA: its cards sit on navy, and the crests the app serves
   there carry white — Brooklyn's is literally the white version, 14:1 —
   so it would be a change with nothing to fix. Which also answers the
   obvious worry about two different looks: a reader is only ever in one
   league at a time, and switching already repaints the whole palette.

   88px against the block's 99px, with the badge inset to 72 — nine pixels
   smaller than it is now, and no layout to re-check. */
html[data-theme="dark"] body[data-league="EuroLeague"] .team-logo,
html[data-theme="dark"] body[data-league="NationalTeams"] .team-logo {
  width: 88px;
  height: 88px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(255, 255, 255, .93);
  filter: none;          /* the disc replaces the halo — both would be noise */
}
html[data-theme="dark"] body[data-league="EuroLeague"] .game-card--final .team-logo,
html[data-theme="dark"] body[data-league="NationalTeams"] .game-card--final .team-logo {
  filter: grayscale(50%);
  background: rgba(255, 255, 255, .78);
}

/* The same crests, everywhere else they appear. Measured on the live screens:
   the standings rows sit on #0b0907, the profile's recent-form strip on
   #141410, the game drawer's header on #0b0907 — all darker than the game
   card that started this — and the profile's own title band on #666666,
   which is mid-grey and no better for a near-black badge. Fixing only the
   game card would have left ASVEL invisible on four screens out of five.
   Padding scales with the badge: 2px at 22-26px, 4px at 42-56px. */
html[data-theme="dark"] body[data-league="EuroLeague"] .st-logo,
html[data-theme="dark"] body[data-league="EuroLeague"] .team-row-logo,
html[data-theme="dark"] body[data-league="NationalTeams"] .st-logo,
html[data-theme="dark"] body[data-league="NationalTeams"] .team-row-logo {
  padding: 2px;
  box-sizing: content-box;
  border-radius: 50%;
  background: rgba(255, 255, 255, .93);
}

.team-name {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

.team-record {
  font-size: 10px;
  color: var(--muted);
}

.score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 96px;
}

.score-display {
  font-family: "Anton", sans-serif;
  font-size: 42px;
  color: var(--text-muted);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -1px;
}

.score-date {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 4px;
}

.score-winner {
  color: #4ade80; /* ירוק — ניצחון */
}

.score-loser {
  color: #f87171; /* אדום — הפסד */
}

.score-sep {
  font-size: 28px;
  color: rgba(255,255,255,0.55);
  font-weight: 300;
}

.game-time-text {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  letter-spacing: 2px;
}

/* ── Scheduled game — big central time ───────────────────── */
.game-time-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.game-time-big {
  font-family: "Anton", sans-serif;
  font-size: 40px;
  line-height: 1;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(59,130,246,0.4);
}

/* Countdown: ticking HH:MM:SS below the tip-off time */
.game-countdown {
  font-family: "Barlow Condensed", monospace;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--text);
  text-shadow: 0 0 12px rgba(59,130,246,0.35);
  /* The countdown is usually a clock ("02:14:33"), which must stay LTR. Two
     days out it becomes words instead — and this very rule was what kept
     "53 ימים" rendering as "ימים 53": author CSS overrides the dir attribute
     the markup sets, so the Hebrew form needs its own rule. */
  direction: ltr;
}
.game-countdown[dir="rtl"] { direction: rtl; letter-spacing: 1px; }

/* ── Card status variants ──────────────────────────────── */
/* Scheduled: dashed border, slightly dimmed */
.game-card--scheduled {
  border-style: dashed;
  border-color: rgba(255,255,255,0.08);
}
.game-card--scheduled .team-name {
  color: var(--text);
}

/* Starting soon (<1h): pulsing inner glow + red ticking clock */
.game-card--soon {
  position: relative;
  border-style: solid;
  border-color: rgba(239,68,68,0.40);
}
.game-card--soon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(239,68,68,0.55);
  box-shadow: inset 0 0 18px rgba(239,68,68,0.10);
  animation: soonPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes soonPulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}
.game-card--soon .game-countdown {
  color: var(--red);
  font-weight: 700;
}
.game-card--soon .game-countdown::after {
  /* Hebrew is the default here; the English page gets its own line below,
     otherwise an English reader is shown a Hebrew label. */
  content: "מתחיל בקרוב";
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--red);
  margin-top: 3px;
}
html[dir="rtl"] .game-card--soon .game-countdown::after { direction: rtl; }
html[dir="ltr"] .game-card--soon .game-countdown::after { content: "Starting soon"; }

/* Live: accent glow border */
.game-card--live {
  border-color: rgba(var(--accent1-rgb), 0.5);
  box-shadow: 0 0 0 1px rgba(var(--accent1-rgb), 0.2), inset 0 0 20px rgba(var(--accent1-rgb), 0.04);
}

/* Says the scores have stopped moving, without taking the scores away. */
.stale-banner {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--watch-bg, rgba(202, 138, 4, 0.12));
  border: 1px solid rgba(202, 138, 4, 0.35);
  color: var(--text);
  font-family: "Heebo", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

/* ── Card entrance animation ───────────────────────────── */
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.game-card {
  animation: cardEnter 0.35s ease both;
  animation-play-state: paused;
}
.game-card.animate {
  animation-play-state: running;
}

/* 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; }

/* Skeleton */
.game-card.skeleton {
  height: 120px;
  cursor: default;
  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;
  border: none;
}

@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 */
.after-midnight-hint {
  max-width: 420px;
  margin: 0 auto 30px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--card-bg, rgba(255,255,255,.06));
  border: 1px solid var(--border, rgba(255,255,255,.12));
  font-size: .92rem;
  color: var(--text);
  text-align: center;
  line-height: 1.6;
}
.after-midnight-hint { position: relative; }
.after-midnight-hint .amh-dismiss {
  position: absolute;
  inset-inline-end: 6px;
  top: 4px;
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 6px;
  color: var(--muted, #6b7280);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.after-midnight-hint .amh-dismiss:hover { color: var(--text); }

.after-midnight-hint button {
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  color: var(--accent-ink, #ef4444);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  text-decoration: underline;
}

.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 {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  opacity: 0.5;
}

.lab-mode-btn:hover {
  opacity: 1;
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(96, 165, 250, 0.08);
}

.lab-mode-btn--on {
  opacity: 1;
  border-color: #60a5fa;
  background: rgba(96, 165, 250, 0.15);
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
}

/* ── 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) {
  .team-name   { font-size: 13px; }
  .score-display { font-size: 32px; }
  .professor-bubble { bottom: 74px; }
}

/* ══════════════════════════════════════════════════════════════════
   CALENDAR PICKER
   ══════════════════════════════════════════════════════════════════ */

/* Date label — make it obviously tappable */
.date-nav-label {
  cursor: pointer;
  user-select: none;
}
.date-nav-label:active {
  opacity: 0.7;
}

/* Overlay */
.cal-overlay {
  position: fixed;
  inset: 0;
  z-index: 350;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.cal-overlay.open {
  pointer-events: all;
  opacity: 1;
}

.cal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.60);
}

/* Panel — compact popup */
.cal-panel {
  position: relative;
  width: min(340px, 92vw);
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 16px 14px 20px;
  transform: scale(0.92);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.cal-overlay.open .cal-panel {
  transform: scale(1);
}

/* Hide the drag handle — not needed for popup */
.cal-handle { display: none; }

/* Header row */
.cal-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
.cal-month-label {
  flex: 1;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
}
.cal-nav-btn {
  background: none;
  border: none;
  color: var(--accent-ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}
.cal-nav-btn:hover { background: rgba(255,255,255,0.07); }

.cal-today-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: rgba(var(--accent1-rgb), 0.12);
  border: 1px solid rgba(var(--accent1-rgb), 0.35);
  border-radius: 6px;
  padding: 5px 11px;
  cursor: pointer;
  transition: background 0.15s;
}
.cal-today-btn:hover { background: rgba(var(--accent1-rgb), 0.22); }

.cal-close-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 17px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 0.15s;
}
.cal-close-btn:hover { color: var(--text); }

/* Weekday row */
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 6px;
}
.cal-weekdays span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--muted);
  text-transform: uppercase;
  padding: 3px 0;
}

/* Day grid */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 2px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.14s;
  min-height: 44px;
}
.cal-day:hover { background: rgba(255,255,255,0.07); }
.cal-day.other-month { cursor: default; pointer-events: none; }
.cal-day.other-month .cal-day-num { color: rgba(255,255,255,0.15); }
/* Days before season start / after season end — dimmed, not clickable */
.cal-day.out-of-season { cursor: default; pointer-events: none; opacity: 0.25; }

.cal-day-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* Today — accent ring */
.cal-day.today .cal-day-num {
  background: var(--accent1);
  color: var(--accent-fg, #fff);
}

/* Selected date — subtle highlight */
.cal-day.selected {
  background: rgba(var(--accent1-rgb), 0.15);
  border: 1px solid rgba(var(--accent1-rgb), 0.4);
}
.cal-day.selected .cal-day-num {
  color: var(--accent-ink);
}
/* If today is also selected */
.cal-day.today.selected .cal-day-num {
  background: var(--accent1);
  color: var(--accent-fg, #fff);
}

/* Dots */
.cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
}
.cal-dot.green   { background: #22c55e; }
.cal-dot.red     { background: #ef4444; opacity: 0.7; }
.cal-dot.loading {
  background: rgba(255,255,255,0.2);
  animation: calDotPulse 1.1s ease-in-out infinite;
}
@keyframes calDotPulse {
  0%, 100% { opacity: 0.25; }
  50%       { opacity: 0.8; }
}

/* Legend */
.cal-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.cal-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cal-legend-dot.green { background: #22c55e; }
.cal-legend-dot.red   { background: #ef4444; opacity: 0.7; }

/* ═══════════════════════════════════════════════════════════════
   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;
}

/* League dropdown: the shared --border var is intentionally near-invisible
   against light backgrounds elsewhere in the app, but that made row dividers
   here only look visible when they happened to coincide with the active
   row's background tint ending (inconsistent depending on which league is
   selected). A dedicated, more visible divider color keeps every row
   boundary equally readable regardless of which row is active. */
html[data-theme="light"] .league-option {
  border-bottom-color: rgba(20, 30, 60, 0.16);
}

/* 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"] .score-sep         { color: var(--muted); }
html[data-theme="light"] .game-time-text    { color: var(--accent-ink); }
/* The tip-off time was #fff from the days when every card was dark. On the
   light card that is white on near-white — the single most important number
   on the main screen, legible only because of the glow behind it. Measured at
   1.16:1 against the card. The glow goes too; it was there to lift white off
   a dark card and does nothing on a pale one. */
html[data-theme="light"] .game-time-big {
  color: var(--accent-ink);
  text-shadow: none;
}
html[data-theme="light"] .cal-day.other-month .cal-day-num { color: rgba(20,26,40,0.28); }
/* 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, dashboard (not in nav), game detail. ── */
html[data-theme="light"] :is(#screen-dashboard) {
  --bg:        #102346;
  --bg-nav:    #15284c;
  --bg-card:   #172b50;
  --bg-card2:  #1e3660;
  --border:    #27406d;
  --text:      #e8edf8;
  --muted:     #8a99b8;
}
html[data-theme="light"] body[data-league="EuroLeague"] :is(#screen-dashboard) {
  --bg:        #0b0907;
  --bg-nav:    #111111;
  --bg-card:   #141410;
  --bg-card2:  #1c1c16;
  --border:    #2a2820;
  --text:      #ece9e3;
  --muted:     #969696;
}
html[data-theme="light"] body[data-league="NationalTeams"] :is(#screen-dashboard) {
  --bg:        #09100f;
  --bg-nav:    #0f1a18;
  --bg-card:   #121e1c;
  --bg-card2:  #1a2a27;
  --border:    #1e3530;
  --text:      #e7efe9;
  --muted:     #87a39d;
}

/* ═══════════════════════════════════════════════════════════════
   HOME LAYOUT + ALL-TEAMS SIDE COLUMNS (Games screen) — permanent
   East/West team list, independent of today's schedule. Click a team →
   Team Hub.

   home.js's _layoutTeamsForViewport() moves the two <aside> team
   columns out of their default markup position (inside main-content)
   to become direct children of #home-layout, flanking <main>, at EVERY
   viewport size — real DOM nodes in normal flex flow, not
   position:fixed/absolute, so they always scroll together with the
   page. Only the visual size changes by breakpoint: a slim icon-only
   rail on narrow phones (no room for team names next to the game
   cards), full logo+name columns from 1024px up.
   ═══════════════════════════════════════════════════════════════ */

.teams-panel-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}

.teams-col-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 4px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.team-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.team-row:hover {
  background: rgba(255,255,255,0.03);
}

.team-row-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

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

/* Once JS has moved the two <aside>s out to be direct children of
   #home-layout, the leftover shell inside main-content (heading +
   now-empty body) shouldn't render — each column carries its own
   מזרח/מערב title instead (shown again once there's room, ≥1024px). */
.teams-detached .teams-panel-head,
.teams-detached #teams-panel-body {
  display: none;
}

.home-layout.teams-detached {
  display: flex;
  align-items: flex-start;
}

.home-layout.teams-detached .main-content {
  flex: 1;
  min-width: 0;
}

/* Narrow phones (default): icon-only rail, just wide enough for a logo,
   flush to each screen edge. */
.home-layout.teams-detached .teams-side {
  flex: 0 0 auto;
  padding: 12px 2px;
}
.home-layout.teams-detached .teams-side-east { padding-right: 4px; }
.home-layout.teams-detached .teams-side-west { padding-left: 4px; }

.home-layout.teams-detached .teams-col-title { display: none; }

.home-layout.teams-detached .team-row {
  flex-direction: column;
  padding: 8px 2px;
  gap: 0;
  border-radius: 6px;
}

.home-layout.teams-detached .team-row-name { display: none; }

.home-layout.teams-detached .team-row-logo {
  width: 26px;
  height: 26px;
}

/* Phones under 560px: hide the rails entirely — reported live (2026-08-20)
   with a screenshot of game cards whose team names were being clipped.
   The breakpoint is derived, not guessed: .main-content is capped at
   --app-max-width (480px here), so at 552px and up the two 36px rails sit in
   dead gutter space and cost the cards nothing. Below that they come straight
   out of the card width — measured 72px of a 375px screen, 19% of the
   viewport, which is what squeezed the names.
   Nothing becomes unreachable: every team still opens its Team Hub from the
   Standings tab (טבלה), which is always in the bottom nav and already has
   row-click-through for both NBA and EuroLeague. The rails are a shortcut on
   wide screens, not the only path.
   Chosen over moving the asides back inside main-content (their pre-detach
   position) because that variant pushes the chat section further down the
   page — the exact problem the detach was introduced to solve. */
@media (max-width: 559px) {
  .home-layout.teams-detached .teams-side { display: none; }
}

/* Desktop (≥1024px): full logo+name columns — there's a wide empty
   gutter on both sides at this width (.main-content never grows past
   480px), so this fills real dead space instead of a small stacked
   block that pushed the chat further down. */
@media (min-width: 1024px) {
  .home-layout.teams-detached {
    max-width: 1800px;
    margin: 0 auto;
  }

  .home-layout.teams-detached .teams-side {
    flex-basis: 280px;
    padding: 24px 20px;
  }
  .home-layout.teams-detached .teams-side-east { padding-right: 24px; }
  .home-layout.teams-detached .teams-side-west { padding-left: 24px; }

  .home-layout.teams-detached .teams-col-title {
    display: block;
    font-size: 14px;
    padding: 0 4px 10px;
    margin-bottom: 10px;
  }

  .home-layout.teams-detached .team-row {
    flex-direction: row;
    gap: 12px;
    padding: 12px 6px;
  }

  .home-layout.teams-detached .team-row-logo {
    width: 34px;
    height: 34px;
  }

  .home-layout.teams-detached .team-row-name {
    display: block;
    font-size: 16px;
    white-space: normal;
  }
}

/* Who hosts. The card showed two logos, two names and a tip-off time, and
   nothing said which floor it is played on — in a sport where home teams win
   about 60% of the time and Real Madrid went 18-1 at home and 6-13 away. */
/* A pill, not a line of small text. It started at 9.5px in plain type, which
   is a smudge under a club name — Hebrew has no ascenders or descenders to
   carry a word that small. Growing the type was the obvious answer and the
   wrong one: the club name itself is only 13px (the slot is 99px wide and
   already wraps "טורונטו ראפטורס" onto two lines), so the most the label could
   grow to without competing with the name was 13px — a pixel and a half, which
   nobody would notice. The background is what makes it register at a glance.
   Costs 6px of card height; that is the price of the label being legible at
   all, which is the only reason it exists.

   `width: fit-content` on a block keeps it shrink-wrapped AND on its own line;
   `display: inline-block` would let it flow up beside the club name. */
.team-venue {
  display: block;
  width: fit-content;
  margin: 4px auto 0;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.3;
  color: var(--text-muted, #8894ac);
  background: rgba(128, 128, 128, .13);
}
/* Was --accent2, which a chosen favorite team overwrites with its own color:
   with Maccabi picked, "בית" rendered in their yellow on a white card at
   1.49:1 — the word he could barely find on the screen. --accent-ink is the
   same accent adjusted to stay readable on whichever theme is behind it. */
.team-venue--home {
  color: var(--accent-ink, #c8102e);
  background: rgba(var(--accent1-rgb, 29,66,138), .13);
}

/* ══ 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; }