/* =====================================================
   WORLD CUP EATS — drew nagda aesthetic
   Dark + neon green Drew brand, with Bourdain editorial
   italic-serif typography preserved for the caption pull-quote.
   ===================================================== */

:root {
  /* palette */
  --bg: #0A0A0A;
  --bg-elev: #131313;
  --bg-card: #0F0F0F;
  --ink: #FFFFFF;
  --ink-soft: #C8C8C8;
  --ink-muted: #7A7A7A;
  --ink-faded: #4A4A4A;
  --border: #1F1F1F;
  --border-bright: #2F2F2F;

  /* the brand accent */
  --neon: #C8FF00;
  --neon-soft: rgba(200, 255, 0, 0.15);
  --neon-glow: rgba(200, 255, 0, 0.45);

  /* status colors */
  --status-filmed: #C8FF00;       /* neon green */
  --status-production: #F4C430;   /* warm yellow */
  --status-planned: #5A5A5A;      /* gray */
  --status-homecook: #C8FF00;     /* neon green dot */
  --status-bench: #3A3A3A;        /* faded */

  /* typography */
  --font-display: 'Inter', -apple-system, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --font-editorial: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* layout */
  --header-h: 84px;
  --footer-h: 0px;
  --rail-w: 460px;
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
  /* Keep the app clear of the iOS status bar / notch and the home indicator
     (works with viewport-fit=cover; resolves to 0 on devices without insets). */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

button {
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============== HEADER ============== */
.site-header {
  height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-5);
  padding: 0 var(--s-6);
  flex-shrink: 0;
  z-index: 10;
}

/* ============== COUNTDOWN ============== */
.countdown {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  border: 1px solid var(--border-bright);
  background: var(--bg-elev);
  padding: 8px 14px;
  border-radius: 6px;
}

.countdown-pulse {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--neon);
  box-shadow: 0 0 0 0 var(--neon);
  animation: countdown-pulse 1.8s ease-out infinite;
}

@keyframes countdown-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(200, 255, 0, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(200, 255, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 255, 0, 0); }
}

.countdown-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--ink-muted);
  text-transform: uppercase;
}

.countdown-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--neon);
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
}

/* ============== VIEW TABS ============== */
.view-tabs {
  display: flex;
  gap: 6px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 12px var(--s-6);
  flex-shrink: 0;
}

.view-tab {
  position: relative;
  background: transparent;
  border: 1.5px solid transparent;
  color: var(--ink-soft);
  padding: 11px 26px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 140ms ease;
}

.view-tab:hover {
  color: var(--ink);
  border-color: var(--border-bright);
}

.view-tab.active {
  color: var(--neon);
  border-color: var(--neon);
  background: rgba(200, 255, 0, 0.08);
}

/* Pulsing red dot when at least one match is in progress. Set by JS via
   updateLiveIndicator(). Sits as a satellite on the Fixtures tab. */
.view-tab--live::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ff3d3d;
  box-shadow: 0 0 8px rgba(255, 61, 61, 0.7);
  animation: live-pulse 1.4s ease-in-out infinite;
}

/* ============== SEARCH BAR ============== */
.search-bar {
  padding: var(--s-4) var(--s-5) 0;
  position: relative;
}

.search-input {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: border-color 140ms ease;
}

.search-input::placeholder {
  color: var(--ink-faded);
}

.search-input:focus {
  border-color: var(--neon);
}

.search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: var(--s-5);
  right: var(--s-5);
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 100ms ease;
}

.search-result:last-child {
  border-bottom: none;
}

.search-result:hover,
.search-result.active {
  background: rgba(200, 255, 0, 0.08);
}

.search-result-flag {
  font-size: 20px;
}

.search-result-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  flex: 1;
}

.search-result-status {
  font-size: 9px;
  letter-spacing: 2px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.search-result-status.filmed { color: var(--neon); }

/* ============== BRACKET VIEW ============== */
#bracket-view {
  overflow-y: auto;
  background: var(--bg);
}

.bracket-shell {
  max-width: 1500px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-5);
}

.bracket-head {
  text-align: center;
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
}

.bracket-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--neon);
  font-weight: 600;
}

.bracket-title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.05;
  color: var(--ink);
  margin: var(--s-3) 0 var(--s-2);
}

.bracket-subtitle {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.bracket-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}

.group-card {
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  padding: var(--s-4);
}

.group-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}

.group-card-letter {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--neon);
  letter-spacing: 2px;
}

.group-card-label {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--ink-muted);
  text-transform: uppercase;
}

.group-team {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(31, 31, 31, 0.6);
  cursor: pointer;
  transition: background 120ms ease;
  margin: 0 calc(-1 * var(--s-3));
  padding-left: var(--s-3);
  padding-right: var(--s-3);
}

.group-team:last-child {
  border-bottom: none;
}

.group-team:hover {
  background: rgba(200, 255, 0, 0.06);
}

.group-team-flag {
  font-size: 22px;
  line-height: 1;
}

.group-team-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  flex: 1;
}

.group-team-status {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--status-planned);
  flex-shrink: 0;
}

.group-team-status.filmed { background: var(--status-filmed); box-shadow: 0 0 8px var(--status-filmed); }
.group-team-status.in_production { background: var(--status-production); }
.group-team-status.bench { background: var(--status-bench); }
.group-team-status.playoff_pending { background: var(--ink-faded); }

.group-team.is-filmed .group-team-name { color: var(--ink); }
.group-team.is-planned .group-team-name { color: var(--ink-soft); }
.group-team.is-playoff_pending .group-team-name {
  color: var(--ink-muted);
  font-style: italic;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: opacity 140ms ease;
}

.brand:hover .brand-text {
  color: var(--neon);
}

.brand:active {
  opacity: 0.8;
}

.brand-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--ink);
}

.brand-tag {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--ink-muted);
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-tag .dot {
  margin: 0 8px;
  color: var(--ink-faded);
}

.brand-mark, .view-switch, .meta-label, .meta-num { display: none; }

.counter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  line-height: 1;
}

.counter-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  color: var(--neon);
  line-height: 1;
}

.counter-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--ink-soft);
  margin-top: 4px;
  text-transform: uppercase;
}

/* ============== MAIN ============== */
main {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.view {
  position: absolute;
  inset: 0;
  display: none;
}

.view.active {
  display: flex;
}

/* ============== MAP VIEW ============== */
#map-view {
  display: none;
}

#map-view.active {
  display: flex;
}

#map {
  flex: 1;
  height: 100%;
  background: var(--bg);
}

/* Map zoom controls — fully neon, custom +/- glyphs */
.maplibregl-ctrl-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.maplibregl-ctrl-group button {
  background: var(--bg-elev) !important;
  border: 2px solid var(--neon) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;
  position: relative !important;
  transition: background 140ms ease !important;
}

/* Hide MapLibre's default dark +/- icon images entirely */
.maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  background-image: none !important;
  opacity: 0 !important;
}

/* Draw our own neon + and − glyphs */
.maplibregl-ctrl-zoom-in::after,
.maplibregl-ctrl-zoom-out::after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--neon);
  pointer-events: none;
}

.maplibregl-ctrl-zoom-in::after  { content: '+'; }
.maplibregl-ctrl-zoom-out::after { content: '\2212'; } /* true minus sign */

.maplibregl-ctrl-group button:hover,
.maplibregl-ctrl-group button:active {
  background: var(--neon) !important;
}

.maplibregl-ctrl-group button:hover::after,
.maplibregl-ctrl-group button:active::after {
  color: var(--bg);
}

.maplibregl-ctrl-attrib {
  background: rgba(0,0,0,0.6) !important;
  color: var(--ink-muted) !important;
}

.maplibregl-ctrl-attrib a {
  color: var(--ink-soft) !important;
}

/* ============== CARD ACTIONS — reel + share ============== */
.card-actions {
  display: flex;
  gap: 8px;
  margin-top: var(--s-5);
}

.card-actions .reel-button {
  flex: 1;
  margin-top: 0;
}

.share-button {
  width: 48px;
  flex-shrink: 0;
  background: transparent;
  border: 1.5px solid var(--border-bright);
  border-radius: 3px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 140ms ease;
}

.share-button:hover,
.share-button:active {
  border-color: var(--neon);
  color: var(--neon);
  background: var(--neon-soft);
}

.share-icon {
  font-size: 18px;
  font-weight: 700;
}

.share-button.copied {
  border-color: var(--neon);
  color: var(--neon);
}

/* ============== PIN DROP ANIMATION ============== */
@keyframes pin-drop {
  0%   { transform: translateY(-340px) scale(0.4); opacity: 0; }
  60%  { opacity: 1; }
  80%  { transform: translateY(0) scale(1.12); }
  100% { transform: translateY(0) scale(1); }
}

.episode-marker.dropping {
  animation: pin-drop 620ms cubic-bezier(0.34, 1.30, 0.64, 1) backwards;
}

.maplibregl-ctrl-attrib {
  background: rgba(0,0,0,0.6) !important;
  color: var(--ink-muted) !important;
}

.maplibregl-ctrl-attrib a {
  color: var(--ink-soft) !important;
}

/* ============== FLAG PINS ============== */
/* .pin-anchor is the OUTER element passed to MapLibre — it owns positioning.
   Never style its position/transform. .episode-marker is the INNER element,
   free to animate (pin-drop, hover, etc.) without fighting MapLibre. */
.pin-anchor {
  cursor: pointer;
  line-height: 0;
}

.episode-marker {
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  background: var(--bg-elev);
  border: 2px solid var(--status-planned);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: box-shadow 160ms ease, border-width 120ms ease;
}

.episode-marker.status-filmed {
  border-color: var(--status-filmed);
}

.episode-marker.status-in_production {
  border-color: var(--status-production);
}

.episode-marker.status-planned {
  border-color: var(--status-planned);
}

.episode-marker.status-home_cook {
  border-color: var(--status-filmed);
}

/* home_cook indicator removed — pseudo-element required position:relative on
   parent which fights MapLibre's marker positioning. If home_cook returns,
   use a sibling element or box-shadow trick instead. */

.episode-marker.status-bench {
  border-style: dashed;
  border-color: var(--status-bench);
  opacity: 0.55;
}

.episode-marker:hover {
  box-shadow: 0 0 0 5px var(--neon-soft);
  border-width: 3px;
}

.episode-marker.active {
  box-shadow: 0 0 0 6px var(--neon-soft), 0 0 24px var(--neon-glow);
  border-width: 3px;
}

/* ============== TOOLTIP ============== */
.maplibregl-popup-content {
  background: var(--bg-elev) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.maplibregl-popup-tip {
  border-top-color: var(--bg-elev) !important;
  border-bottom-color: var(--bg-elev) !important;
}

/* ============== MAP LEGEND (bottom-left of map) ============== */
.map-legend {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  padding: 8px 16px;
  display: flex;
  gap: 16px;
  z-index: 5;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--ink-soft);
  align-items: center;
  text-transform: uppercase;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid;
  background: var(--bg-elev);
}

.legend-dot.filmed       { border-color: var(--status-filmed); }
.legend-dot.in-production { border-color: var(--status-production); }
.legend-dot.planned      { border-color: var(--status-planned); }
.legend-dot.home-cook    { border-color: var(--status-filmed); position: relative; }
.legend-dot.home-cook::after {
  content: ''; position: absolute; top: -2px; right: -2px;
  width: 6px; height: 6px; background: var(--neon); border-radius: 999px;
}

/* ============== CARD RAIL ============== */
#card-rail {
  width: var(--rail-w);
  flex-shrink: 0;
  background: var(--bg);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  position: relative;
}

/* ============== FILTER CHIPS ============== */
.filter-bar {
  padding: var(--s-5) var(--s-5) var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  background: transparent;
  border: 1px solid var(--border-bright);
  color: var(--ink-soft);
  padding: 7px 14px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 140ms ease;
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.filter-chip:hover {
  border-color: var(--neon);
  color: var(--ink);
}

.filter-chip.active {
  border-color: var(--neon);
  color: var(--neon);
}

.filter-chip-icon {
  font-size: 13px;
}

/* ============== EMPTY STATE ============== */
.card-empty {
  padding: var(--s-7) var(--s-5);
  text-align: center;
}

.card-empty-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 96px;
  color: var(--neon);
  line-height: 1;
  margin-bottom: var(--s-4);
}

.card-empty h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s-3);
  line-height: 1.2;
}

.card-empty p {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: var(--s-3);
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.empty-hint {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ink-faded);
  text-transform: uppercase;
}

/* ============== EPISODE CARD ============== */
.episode-card {
  padding: 0 var(--s-5) var(--s-7);
  position: relative;
}

.card-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1.5px solid var(--neon);
  color: var(--neon);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 0 14px rgba(200, 255, 0, 0.3);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease,
    box-shadow 140ms ease;
}

.card-close-btn:hover,
.card-close-btn:active {
  background: var(--neon);
  color: var(--bg);
  border-color: var(--neon);
  box-shadow: 0 0 18px rgba(200, 255, 0, 0.5);
}

.card-hero, .card-hero-bg, .card-hero-content, .card-hero-flag, .card-hero-wordmark { display: none; }

/* Episode + Filmed stamp row */
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--s-4);
  margin-top: var(--s-2);
}

.card-ep {
  display: inline-flex;
  align-items: center;
}

.card-ep-label, .card-ep-num {
  display: inline-block;
}

.card-ep-tag {
  background: transparent;
  border: 1px solid var(--neon);
  color: var(--neon);
  padding: 4px 12px;
  border-radius: 3px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
}

.card-filmed-stamp {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 600;
  color: var(--neon);
  font-size: 18px;
  border: 1.5px solid var(--neon);
  padding: 6px 14px 4px;
  transform: rotate(-4deg);
  text-align: center;
  line-height: 1;
  position: relative;
}

.card-filmed-stamp .stamp-sub {
  display: block;
  font-style: normal;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--neon);
  margin-top: 2px;
}

.card-filmed-stamp.status-in_production {
  color: var(--status-production);
  border-color: var(--status-production);
}

.card-filmed-stamp.status-in_production .stamp-sub {
  color: var(--status-production);
}

.card-filmed-stamp.status-planned,
.card-filmed-stamp.status-bench {
  color: var(--ink-muted);
  border-color: var(--ink-muted);
  font-style: normal;
}

.card-filmed-stamp.status-planned .stamp-sub,
.card-filmed-stamp.status-bench .stamp-sub {
  color: var(--ink-muted);
}

.card-nav {
  display: none;
}

/* Country flag + name */
.card-country-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}

.card-flag {
  font-size: 50px;
  line-height: 1;
}

.card-flag-plus {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink-muted);
}

.card-flag-secondary {
  font-size: 50px;
  line-height: 1;
}

.card-bench-tag {
  background: var(--ink);
  color: var(--bg);
  padding: 3px 9px;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3px;
  margin-left: auto;
}

.card-country-name {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: var(--s-3);
  text-transform: uppercase;
}

.card-bench-reason {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: var(--s-4);
}

/* Status row under country name */
.card-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--ink-muted);
  text-transform: uppercase;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}

.status-pill::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--neon);
}

.status-pill.status-in_production::before {
  background: var(--status-production);
}

.status-pill.status-planned::before {
  background: var(--status-planned);
}

.status-pill.status-home_cook::before {
  background: var(--neon);
}

.status-pill.status-bench::before {
  background: var(--status-bench);
}

.status-location {
  font-weight: 500;
  color: var(--ink-soft);
}

/* Venue ("EATEN AT") */
.card-venue {
  margin-bottom: var(--s-5);
}

.card-venue-label,
.card-section-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 3px;
  font-weight: 500;
  color: var(--ink-muted);
  margin-bottom: var(--s-2);
  text-transform: uppercase;
}

.card-venue-name {
  font-family: var(--font-editorial);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 4px;
}

.card-venue-meta {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.card-venue-address {
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-venue-address::before {
  content: '↗';
  color: var(--neon);
  font-weight: 700;
}

/* "What I ordered" */
.card-section {
  margin-bottom: var(--s-5);
}

.card-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 3px;
  font-weight: 500;
  color: var(--ink-muted);
  margin-bottom: var(--s-2);
  text-transform: uppercase;
}

.card-ordered {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.card-ordered.pending {
  color: var(--ink-faded);
}

/* highlight (the pull quote) — keep Bourdain editorial DNA */
.card-highlight {
  border-left: 2px solid var(--neon);
  padding-left: var(--s-3);
}

.card-highlight blockquote {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
}

/* Watch the reel button */
.reel-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--neon);
  color: var(--neon);
  padding: 14px 16px;
  border-radius: 3px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: background 140ms ease;
  margin-top: var(--s-5);
}

.reel-button:hover {
  background: var(--neon-soft);
}

.reel-button .reel-arrow {
  font-size: 13px;
}

.reel-button .reel-play {
  margin-right: 8px;
}

/* ============== FROM THE CAPTION (Bourdain DNA) ============== */
.card-caption {
  margin-top: var(--s-6);
}

.caption-divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--ink-muted);
  text-transform: uppercase;
}

.caption-divider::before,
.caption-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-bright);
}

.caption-body {
  position: relative;
  padding-left: 28px;
}

.caption-body::before {
  content: '"';
  position: absolute;
  left: 0;
  top: -8px;
  font-family: var(--font-editorial);
  font-size: 48px;
  font-style: italic;
  color: var(--neon);
  line-height: 1;
}

.caption-body p {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
}

.caption-body p:last-child {
  margin-bottom: 0;
}

/* ============== COUNTRY PROFILE ============== */
.card-country-profile {
  margin-bottom: var(--s-5);
  border-top: 1px solid var(--border);
  padding-top: var(--s-4);
}

.profile-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}

.profile-cell-label {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.profile-cell-value {
  font-family: var(--font-editorial);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.2;
}

.profile-dishes {
  margin-bottom: var(--s-3);
}

.profile-dish-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.profile-dish-chip {
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  color: var(--ink-soft);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-family: var(--font-editorial);
}

.profile-lore {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
  border-left: 2px solid var(--neon);
  padding-left: var(--s-3);
  margin-top: var(--s-3);
}

/* ============== PLAYERS ============== */
.card-players {
  margin-bottom: var(--s-5);
}

.player-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.player-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  border-radius: 3px;
  padding: 6px 10px;
}

.player-chip-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.2;
}

.player-chip-position {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--ink-muted);
  margin-top: 1px;
  text-transform: uppercase;
}

.player-chip-club {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 10px;
  color: var(--ink-faded);
  margin-top: 1px;
}

/* ============== COUNTRY MVP ============== */
.card-mvp {
  margin-bottom: var(--s-5);
  border: 1px solid var(--neon);
  border-radius: 4px;
  padding: var(--s-4);
  background: rgba(200, 255, 0, 0.04);
  position: relative;
}

.mvp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--s-2);
}

.mvp-trophy {
  font-size: 18px;
}

.card-mvp .card-label {
  margin-bottom: 0;
  color: var(--neon);
}

.mvp-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.5px;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}

.mvp-context {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ============== MATCH SCHEDULE ============== */
.card-schedule {
  margin-bottom: var(--s-5);
}

.card-schedule .card-label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.schedule-group-pill {
  background: var(--neon);
  color: var(--bg);
  padding: 3px 8px;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}

.schedule-match {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--s-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.schedule-match:last-child {
  border-bottom: none;
}

.schedule-date {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--neon);
}

.schedule-opponent {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
}

.schedule-opponent .vs {
  color: var(--ink-muted);
  font-style: italic;
  margin-right: 4px;
}

.schedule-time {
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 1px;
}

.schedule-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.schedule-city {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--neon);
  letter-spacing: 1px;
  white-space: nowrap;
}


/* ============== HIDE old footer / score blocks ============== */
.site-footer, .card-scores, .card-pending { display: none !important; }

/* ============== LIST VIEW — THE FIXTURES ============== */
#list-view {
  overflow-y: auto;
  background: var(--bg);
}

.list-shell {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-5);
}

.list-head {
  text-align: center;
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
}

.list-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--neon);
  font-weight: 600;
}

.list-title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.05;
  color: var(--ink);
  margin: var(--s-3) 0 var(--s-2);
}

.list-subtitle {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fixtures {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.fixture-day-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: 2px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border-bright);
}

.fixture-day-weekday {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: var(--neon);
}

.fixture-day-date {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-soft);
}

.fixture-day-count {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fixture-row {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: 11px 8px;
  border-bottom: 1px solid rgba(31, 31, 31, 0.7);
}

.fixture-row:last-child {
  border-bottom: none;
}

/* Scorers strip beneath FINISHED fixture rows */
.fixture-goals {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 0 2px;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--ink-soft);
}
.goal-icon {
  font-size: 12px;
  opacity: 0.7;
}
.goal-entry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.goal-min {
  font-weight: 800;
  color: var(--neon);
  font-feature-settings: "tnum";
  font-size: 10px;
  letter-spacing: 0.5px;
}
.goal-scorer {
  color: var(--ink);
  font-weight: 600;
}
.goal-sep {
  color: var(--ink-faded);
}

/* Moneyline strip beneath upcoming fixture rows */
.fixture-odds {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 0 2px;
  margin-top: 4px;
}

.odd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.015);
  font-family: var(--font-display);
  font-size: 10px;
}

.odd-pill.is-favorite {
  border-color: var(--neon);
  background: rgba(200, 255, 0, 0.06);
}

.odd-label {
  color: var(--ink-muted);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.odd-price {
  font-weight: 800;
  color: var(--ink);
  font-feature-settings: "tnum";
  letter-spacing: 0.5px;
}

.odd-pill.is-favorite .odd-price {
  color: var(--neon);
}

/* Divider between today/upcoming days and the "Recent Results" section */
.fixture-results-divider {
  margin: var(--s-7) 0 var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border-bright);
  text-align: center;
}
.fixture-results-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--neon);
  text-transform: uppercase;
}

.fixture-time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}

.fixture-tz {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--ink-faded);
  margin-left: 4px;
}

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

.fixture-team {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 6px;
  margin: -3px -6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease;
}

.fixture-team:hover {
  background: rgba(200, 255, 0, 0.08);
}

.fixture-team:hover .fixture-team-name {
  color: var(--neon);
}

.fixture-team.is-static {
  cursor: default;
}

.fixture-team.is-static:hover {
  background: transparent;
}

.fixture-team.is-static:hover .fixture-team-name {
  color: var(--ink);
}

/* TBD knockout placeholder team */
.fixture-team--tbd .fixture-team-name {
  color: var(--ink-faded);
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 12px;
}

/* Distinguish knockout-stage pill from group-letter pill */
.fixture-group--ko {
  border-color: var(--neon);
  color: var(--neon);
  background: rgba(200, 255, 0, 0.06);
}

.fixture-team-flag {
  font-size: 19px;
  line-height: 1;
}

.fixture-team-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  transition: color 120ms ease;
}

.fixture-vs {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-faded);
}

.fixture-end {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  justify-self: end;
}

.fixture-group {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--neon);
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}

.fixture-city {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  white-space: nowrap;
  min-width: 90px;
  text-align: right;
}

@media (max-width: 600px) {
  .list-shell {
    padding: var(--s-6) var(--s-4);
  }

  .list-title {
    font-size: 30px;
  }

  .fixture-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "time end"
      "teams teams";
    gap: 6px var(--s-3);
    padding: 13px 4px;
  }

  .fixture-time {
    grid-area: time;
  }

  .fixture-teams {
    grid-area: teams;
  }

  .fixture-end {
    grid-area: end;
    justify-self: end;
  }

  .fixture-city {
    min-width: 0;
  }
}

/* ============== LIVE SCORES — fixture row states ============== */
/* When a match is finished, the kickoff-time slot becomes "FT" and the
   "v" between the teams becomes the result. */
.fixture-row--final .fixture-time {
  color: var(--ink);
  font-weight: 800;
}
.fixture-row--final .fixture-tz {
  color: var(--neon);
  font-weight: 700;
  letter-spacing: 1px;
}
.fixture-row--final .fixture-vs {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: 0;
}

/* When a match is in play, the row turns red and gently pulses. */
.fixture-row--live .fixture-time {
  color: #ff3d3d;
  font-weight: 800;
  animation: live-pulse 1.6s ease-in-out infinite;
}
.fixture-row--live .fixture-tz {
  color: #ff3d3d;
  font-weight: 700;
}
.fixture-row--live .fixture-vs {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-size: 17px;
  color: #ff3d3d;
  letter-spacing: 0;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ============== RESTAURANTS VIEW — THE GUIDE ============== */
#restaurants-view {
  overflow-y: auto;
  background: var(--bg);
}

.resto-shell {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-5);
}

.resto-head {
  text-align: center;
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
}

.resto-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--neon);
  font-weight: 600;
}

.resto-title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.05;
  color: var(--ink);
  margin: var(--s-3) 0 var(--s-2);
}

.resto-subtitle {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.resto-section {
  margin-bottom: var(--s-6);
}

.resto-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border-bright);
}

.resto-section-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
}

.resto-section-count {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--ink-muted);
}

.resto-row {
  display: grid;
  align-items: center;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(31, 31, 31, 0.7);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background 120ms ease;
}

.resto-row:last-child {
  border-bottom: none;
}

.resto-row:hover {
  background: rgba(200, 255, 0, 0.05);
}

.resto-row--filmed {
  grid-template-columns: 54px 1fr 22px;
  gap: var(--s-3);
  padding: 16px 8px;
}

.resto-row--tbd {
  grid-template-columns: 1fr auto 22px;
  gap: var(--s-3);
  padding: 13px 8px;
}

/* Recommended rows: same layout as filmed, with a "REC" tag instead of "EP" */
.resto-row--rec {
  grid-template-columns: 54px 1fr 22px;
  gap: var(--s-3);
  padding: 14px 8px;
}
.resto-rec-tag {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--ink-muted);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  padding: 3px 6px;
  text-align: center;
  align-self: start;
  margin-top: 2px;
  width: fit-content;
}

.resto-ep {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--neon);
  align-self: start;
  padding-top: 4px;
}

.resto-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.resto-country {
  display: flex;
  align-items: center;
  gap: 8px;
}

.resto-flag {
  font-size: 17px;
  line-height: 1;
}

.resto-country-name {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.resto-name {
  font-family: var(--font-editorial);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  transition: color 120ms ease;
}

.resto-row:hover .resto-name {
  color: var(--neon);
}

.resto-meta {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
}

.resto-row--tbd .resto-flag {
  font-size: 19px;
}

.resto-row--tbd .resto-country-name {
  font-family: var(--font-editorial);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}

.resto-tbd {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-faded);
}

.resto-arrow {
  font-size: 13px;
  color: var(--ink-faded);
  justify-self: end;
  transition: color 120ms ease, transform 120ms ease;
}

.resto-row:hover .resto-arrow {
  color: var(--neon);
  transform: translate(2px, -2px);
}

@media (max-width: 600px) {
  .resto-shell {
    padding: var(--s-6) var(--s-4);
  }

  .resto-title {
    font-size: 30px;
  }

  .resto-name {
    font-size: 18px;
  }

  .resto-row--filmed {
    grid-template-columns: 46px 1fr 20px;
  }
}

/* ============== MOBILE ============== */
@media (max-width: 800px) {
  :root {
    --header-h: 68px;
  }

  body { overflow: hidden; }

  #map-view { flex-direction: column; }

  .site-header {
    padding: 0 var(--s-4);
  }

  .brand-text { font-size: 16px; letter-spacing: 2px; }
  .brand-tag { font-size: 9px; letter-spacing: 2px; }
  .counter-num { font-size: 28px; }
  .counter-label { font-size: 9px; letter-spacing: 2px; }

  /* Hide map legend on mobile — it conflicts with bottom sheet */
  .map-legend { display: none; }

  /* Bottom sheet card rail */
  #card-rail {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    width: 100%;
    max-height: 78vh;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    transform: translateY(calc(100% - 110px));
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.5);
    padding-top: 20px;
  }

  #card-rail.expanded {
    transform: translateY(0);
  }

  /* The grab handle */
  #card-rail::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 5px;
    background: var(--ink-muted);
    border-radius: 999px;
  }

  /* Filter chips — bigger tap targets, no overflow */
  .filter-bar {
    padding: var(--s-3) var(--s-4) var(--s-3);
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }

  .filter-chip {
    padding: 8px 14px;
    font-size: 11px;
    flex-shrink: 0;
  }

  /* Card content — tighter for mobile */
  .episode-card {
    padding: 0 var(--s-4) var(--s-6);
  }

  .card-country-name { font-size: 36px; letter-spacing: -1px; }
  .card-flag, .card-flag-secondary { font-size: 42px; }

  .card-status-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 9px;
  }

  .card-venue-name { font-size: 22px; }

  .profile-row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }

  .schedule-match {
    grid-template-columns: 64px 1fr auto;
    gap: var(--s-2);
    font-size: 12px;
  }

  /* MVP block scales down */
  .mvp-name { font-size: 24px; }

  /* Marker / pin slightly smaller on mobile so they don't dominate */
  .episode-marker {
    width: 38px;
    height: 38px;
    font-size: 19px;
  }
}

/* Even tighter for phones < 380px */
@media (max-width: 380px) {
  .brand-text { font-size: 14px; letter-spacing: 1px; }
  .brand-tag { display: none; }
  .card-country-name { font-size: 30px; }
}

/* Mobile-specific overrides for new features */
@media (max-width: 800px) {
  .site-header {
    grid-template-columns: 1fr auto;
    gap: var(--s-3);
  }
  .countdown { display: none; }
  .view-tabs {
    padding: 6px var(--s-4);
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .view-tabs::-webkit-scrollbar { display: none; }
  .view-tab {
    padding: 9px 16px;
    font-size: 12px;
    letter-spacing: 1.2px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .bracket-grid {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  .bracket-title { font-size: 28px; }
  .search-bar {
    padding: var(--s-3) var(--s-4) 0;
  }
  .search-input {
    font-size: 14px;
    padding: 10px 12px;
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .bracket-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============== BRACKET — STAGE TABS + KNOCKOUT LIST ============== */
.bracket-stages {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.bracket-stage {
  background: transparent;
  border: 1px solid var(--border-bright);
  color: var(--ink-muted);
  padding: 8px 22px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 140ms ease;
}
.bracket-stage:hover {
  color: var(--ink);
  border-color: var(--neon);
}
.bracket-stage.active {
  color: var(--neon);
  border-color: var(--neon);
  background: rgba(200, 255, 0, 0.06);
}

/* ============== GS GROUP CARDS — expanded standings table ============== */
.bracket-grid--gs {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--s-4);
  max-width: 1500px;
  margin: 0 auto;
}

.group-table-head,
.group-team {
  display: grid !important;
  grid-template-columns: 20px 22px minmax(0, 1fr) 26px 26px 26px 26px 26px 26px 30px 34px 68px;
  align-items: center;
  gap: 5px;
  padding: 8px 4px;
  font-family: var(--font-display);
  font-size: 12px;
}

.group-table-head {
  color: var(--ink-muted);
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 9px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-bright);
  padding-bottom: 8px;
}

.group-team {
  border-bottom: 1px solid rgba(31, 31, 31, 0.6);
  cursor: pointer;
  transition: background 120ms ease;
}
.group-team:hover { background: rgba(200, 255, 0, 0.05); }
.group-team:last-child { border-bottom: none; }

.gt-pos {
  font-weight: 700;
  color: var(--ink-muted);
  text-align: center;
}
.gt-flag {
  font-size: 18px;
  line-height: 1;
}
.gt-team-name {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gt-stat {
  text-align: center;
  color: var(--ink-soft);
  font-weight: 500;
  font-feature-settings: "tnum";
}
.gt-gd { color: var(--ink); font-weight: 600; }
.gt-pts {
  font-weight: 800;
  color: var(--ink);
  font-size: 14px;
}
.gt-form {
  display: flex;
  gap: 3px;
  justify-content: flex-end;
  align-items: center;
}
.gt-form-chip {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
}
.gt-form-chip--w { background: rgba(200, 255, 0, 0.22); color: var(--neon); }
.gt-form-chip--d { background: rgba(122, 122, 122, 0.22); color: var(--ink-muted); }
.gt-form-chip--l { background: rgba(255, 61, 61, 0.22); color: #ff3d3d; }

/* "As it stands" — projected R32 matchups for each group's top 3 */
.as-it-stands {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: var(--s-3) var(--s-2) 0;
  border-top: 1px solid var(--border-bright);
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.ais-line {
  padding-left: 4px;
  position: relative;
}
.ais-line::before {
  content: '•';
  margin-right: 6px;
  color: var(--ink-faded);
}
.ais-line strong {
  color: var(--ink);
  font-weight: 700;
}
.ais-line em {
  color: var(--neon);
  font-style: normal;
  font-weight: 600;
}

/* Mobile / narrow: stack one group per row, drop the W/D/L/F/A columns */
@media (max-width: 800px) {
  .bracket-grid--gs {
    grid-template-columns: 1fr !important;
  }
  .group-table-head,
  .group-team {
    grid-template-columns: 20px 22px minmax(0, 1fr) 32px 32px 60px;
  }
  .group-table-head .gt-stat--narrow,
  .group-team .gt-stat--narrow {
    display: none;
  }
}

/* When the grid is in KO mode, one column, comfortable max-width */
.bracket-grid--ko {
  grid-template-columns: 1fr !important;
  max-width: 720px;
  margin: 0 auto;
  gap: var(--s-3);
}

.ko-row {
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  border-radius: 10px;
  padding: var(--s-4);
  position: relative;
}
.ko-row--live { border-color: rgba(255, 61, 61, 0.55); }
.ko-row--final { border-color: var(--neon); }

.ko-stage-badge {
  position: absolute;
  top: -10px;
  left: var(--s-4);
  background: var(--bg);
  padding: 0 8px;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 2px;
  font-weight: 800;
  color: var(--neon);
}

.ko-row-when {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

.ko-row-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-3);
}

.ko-team {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: 6px;
  transition: background 120ms ease;
}
.ko-team[data-country] { cursor: pointer; }
.ko-team[data-country]:hover { background: rgba(200, 255, 0, 0.06); }
.ko-team[data-country]:hover .ko-team-name { color: var(--neon); }
.ko-team-flag { font-size: 22px; line-height: 1; }
.ko-team-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  transition: color 120ms ease;
}
.ko-row-pair > .ko-team:last-child { justify-content: flex-end; text-align: right; }

.ko-team--tbd .ko-team-name {
  color: var(--ink-faded);
  font-size: 12px;
  letter-spacing: 2px;
}

/* Projected teams (resolved from current standings, not yet locked). */
.ko-team--projected .ko-team-name {
  font-style: italic;
  color: var(--ink-soft);
}
.ko-team-proj {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--ink-muted);
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

.ko-vs {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-faded);
}

.ko-score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.ko-score .ko-sep { font-weight: 400; color: var(--ink-faded); }
.ko-score--live {
  color: #ff3d3d;
  animation: live-pulse 1.6s ease-in-out infinite;
}
.ko-min {
  font-size: 10px;
  letter-spacing: 1px;
  margin-left: 6px;
  color: #ff3d3d;
}

.bracket-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--s-7);
  color: var(--ink-muted);
}
.bracket-empty-mark {
  font-size: 40px;
  opacity: 0.4;
  margin-bottom: var(--s-3);
}

/* ============== BRACKET — FULL TREE VIEW ============== */
/* `space-around` per column gives perfect bracket alignment: each round's
   cells naturally land at the midpoint of their two feeders in the previous
   round, so the tree reads correctly without explicit connector lines. */
.bracket-grid--tree {
  grid-template-columns: 1fr !important;
  max-width: none !important;
  margin: 0 !important;
}

.bracket-tree {
  display: flex;
  gap: var(--s-2);
  min-height: 920px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: var(--s-3);
}

.bracket-tree::-webkit-scrollbar { height: 6px; }
.bracket-tree::-webkit-scrollbar-thumb {
  background: var(--border-bright);
  border-radius: 3px;
}

.bracket-column {
  display: flex;
  flex-direction: column;
  flex: 0 0 200px;
  min-width: 200px;
}

.bracket-column-head {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--neon);
  font-weight: 800;
  text-align: center;
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--border-bright);
  margin-bottom: 8px;
}

.bracket-column-body {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
  gap: 4px;
}

.tree-match {
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tree-match--live {
  border-color: rgba(255, 61, 61, 0.6);
}
.tree-match--final {
  border-color: var(--neon);
}
.tree-match--empty {
  opacity: 0.4;
  text-align: center;
}

.tree-match-meta {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--ink-muted);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}
.tree-match--live .tree-match-meta { color: #ff3d3d; }

.tree-team {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 3px 4px;
  border-radius: 4px;
  transition: background 120ms ease;
}
.tree-team[data-country] { cursor: pointer; }
.tree-team[data-country]:hover { background: rgba(200, 255, 0, 0.08); }
.tree-team[data-country]:hover .tree-team-name { color: var(--neon); }

.tree-team-flag {
  font-size: 14px;
  line-height: 1;
}

.tree-team-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 120ms ease;
}

.tree-team-name--tbd {
  color: var(--ink-faded);
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
}

/* TBD rows: the inner span is the only child, so collapse the 3-column grid */
.tree-team.tree-team--tbd {
  grid-template-columns: 1fr;
  justify-items: center;
}
.tree-team.tree-team--tbd .tree-team-name--tbd {
  text-align: center;
}

.tree-team-score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
  min-width: 14px;
  text-align: right;
}

.tree-match--live .tree-team-score { color: #ff3d3d; }
.tree-match--final .tree-team-score { color: var(--neon); }

@media (max-width: 800px) {
  .bracket-stage { padding: 6px 14px; font-size: 10px; letter-spacing: 1.5px; }
  .ko-row-pair { grid-template-columns: 1fr; gap: var(--s-2); text-align: center; }
  .ko-row-pair > .ko-team,
  .ko-row-pair > .ko-team:last-child {
    justify-content: center !important;
    text-align: center !important;
  }
  .ko-team-name { font-size: 16px; }
  .ko-score { font-size: 26px; justify-content: center; }
  .ko-vs { font-size: 20px; }

  /* Tree on mobile: narrower columns, horizontal scroll already handled */
  .bracket-column { flex: 0 0 168px; min-width: 168px; }
  .bracket-tree { min-height: 760px; }
}