:root {
  --bg: #0a0d14;
  --panel: #11151f;
  --panel-2: #161b28;
  --border: #232838;
  --text: #e6e9f0;
  --text-dim: #8b93a7;
  --green: #22c55e;
  --red: #ef4444;
  --orange: #f59e0b;
  --blue: #3b82f6;
  --purple: #a78bfa;
  --pink: #ec4899;
  --cyan: #22d3ee;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-system: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Liquid Glass surfaces — a translucent panel over the page background,
     blurred so whatever scrolls under it reads as depth, not just a flat
     color swap. Panel/panel-2 stay as solid fallbacks for anywhere
     backdrop-filter isn't supported. */
  --glass: rgba(22, 27, 40, .58);
  --glass-strong: rgba(17, 21, 31, .72);
  --glass-border: rgba(255, 255, 255, .09);
  --glass-highlight: rgba(255, 255, 255, .05);
  --glass-blur: blur(20px) saturate(160%);

  /* Elevation scale — every card/panel pulls from one of these three instead
     of a one-off shadow, so depth reads consistently across the app. Redefined
     per-theme below (light mode needs a much softer, cooler shadow than a
     flat opacity-adjusted rgba(0,0,0) would give against a white surface). */
  --shadow-sm: 0 8px 20px -12px rgba(0,0,0,.5);
  --shadow-md: 0 20px 40px -24px rgba(0,0,0,.6);
  --shadow-lg: 0 24px 48px -32px rgba(0,0,0,.7);

  /* iOS-style spring/deceleration easing — used everywhere something moves,
     so the whole app shares one motion signature instead of a different
     curve per component. */
  --ease-ios: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* 8pt spacing scale — new components should pull from here rather than
     inventing one-off pixel values. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px;
}

/* ---------- Light theme ---------- */
/* Not just an inverted palette — off-white (not pure white) surfaces, darker
   accent tones for real contrast against light backgrounds, and shadows tinted
   toward slate instead of pure black (flat black shadows on a white surface
   read as dirty/muddy rather than "depth"). */
:root[data-theme="light"] {
  --bg: #fbfbfd;
  --panel: #ffffff;
  --panel-2: #f4f6fa;
  --border: #e2e7f0;
  --text: #12141c;
  --text-dim: #626b80;
  --green: #15803d;
  --red: #dc2626;
  --orange: #b45309;
  --blue: #2563eb;
  --purple: #7c3aed;
  --pink: #be185d;
  --cyan: #0e7490;

  /* Bumped opacity vs. the original .68/.82 -- at those levels the body's
     radial gradients (green/blue tints) showed through select/topbar/filterbar
     surfaces enough to read as flat gray instead of white, per live review
     2026-08-02. Near-solid here still keeps the blur-based depth on scroll. */
  --glass: rgba(255, 255, 255, .88);
  --glass-strong: rgba(255, 255, 255, .94);
  --glass-border: rgba(18, 20, 28, .08);
  --glass-highlight: rgba(255, 255, 255, .96);

  --shadow-sm: 0 8px 20px -12px rgba(30,41,59,.14);
  --shadow-md: 0 20px 40px -24px rgba(30,41,59,.16);
  --shadow-lg: 0 24px 48px -32px rgba(30,41,59,.18);
}

* { box-sizing: border-box; }

/* overflow-x: hidden as a site-wide safety net -- the custom .fs-select
   dropdown panel (position: absolute, up to 320px wide for a long option
   label) still counts toward its ancestors' scrollWidth even while
   invisible (opacity/visibility hidden, not display:none), so on a narrow
   viewport a trigger as small as 61px could drag the whole page into
   horizontal scroll just by having a long option in its (closed, unseen)
   panel -- confirmed live on /ajustes ("Partidos por página": 61px trigger,
   185px including its own closed panel). Every legitimate horizontal-scroll
   case in this app (table-scroll, tier-tabs, .team-form-strip) already
   scopes its own overflow-x: auto locally, so this is safe globally. */
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  background:
    radial-gradient(80% 60% at 15% 0%, rgba(34,197,94,.06), transparent 60%),
    radial-gradient(60% 50% at 90% 10%, rgba(59,130,246,.05), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-system);
  font-size: 14px;
  animation: page-in .45s var(--ease-ios);
  /* Safe-area lives here, not on the sticky topbar/match-header themselves
     (moved 2026-08-03 -- the per-element `calc(Npx + env(safe-area-inset-top))`
     approach kept reappearing as a gap on real iOS Safari: `position: sticky`
     elements recompute their stuck offset against the *visual* viewport as
     the dynamic toolbar collapses/expands on scroll, so an env() baked into
     that element's own padding could redraw with a stale/zero inset for a
     frame, reading as a "cut" gap above the header. Applying the inset once,
     here, on body -- a plain block that isn't repositioned on scroll --
     pushes the whole page down by a fixed amount up front; the sticky bar
     below it then just sticks to `top: 0` of that already-shifted flow with
     no per-scroll recalculation of its own. Needs viewport-fit=cover on
     <meta name="viewport"> to report anything but 0, same requirement as
     before.) */
  padding-top: env(safe-area-inset-top, 0px);
}
/* Light theme drops the color-tint radials above -- against a near-white
   --bg they don't read as "depth" the way they do on the dark surface,
   they read as a dirty/gray cast (reported repeatedly as "blanco gris").
   Flat --bg only, so the page reads as clean white. */
:root[data-theme="light"] body { background: var(--bg); }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
body.page-out { opacity: 0; transform: translateY(-4px); transition: opacity .18s var(--ease-ios), transform .18s var(--ease-ios); }

.nav-progress {
  position: fixed; top: 0; left: 0; width: 40%; height: 3px; z-index: 9999;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  transform: translateX(-100%); opacity: 0;
  transition: opacity .18s var(--ease-ios);
}
/* A single fixed-duration transition reads as frozen once a slow cold fetch
   (a fresh match/team page hitting ESPN/Understat/Transfermarkt for the
   first time, up to several real seconds) outlasts it — the bar would reach
   its end position and just sit there, which looks exactly like the hang
   this is meant to rule out. Looping the slide instead means "still
   working" stays visibly true for as long as the navigation actually takes. */
.nav-progress-active { opacity: 1; animation: nav-progress-slide 1.1s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes nav-progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

/* A much harder-to-miss "still working" signal than the thin top bar alone —
   only appears if a navigation is still in flight ~250ms after the click
   (nothing flashes on fast/cached loads), and stays up for however long the
   real fetch takes, however long that is. */
.nav-loading-badge {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(-8px);
  z-index: 9999; display: flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 12px; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color: var(--text); font-size: 12.5px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease-ios) .25s, transform .18s var(--ease-ios) .25s;
}
.nav-loading-badge-active { opacity: 1; transform: translateX(-50%) translateY(0); }
.nav-loading-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--green);
  animation: nav-loading-spin .7s linear infinite;
}
@keyframes nav-loading-spin { to { transform: rotate(360deg); } }

/* Buttons/links get a consistent press feel across the whole app — a small
   scale-down on :active reads as "responsive" even before anything else
   happens, and costs nothing since it's pure CSS. */
button, a.btn-detail, .fav-star, .a11y-toggle, .tier-tabs button, .tabs button {
  transition: transform .18s var(--ease-spring), background-color .2s var(--ease-ios), color .2s var(--ease-ios), border-color .2s var(--ease-ios), box-shadow .2s var(--ease-ios);
}
button:active, a.btn-detail:active { transform: scale(0.96); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Every numeric readout (scores, percentages, stat counts) uses tabular
   monospace — the pattern confirmed in research/epl-prediction-lab's
   component library, which reads noticeably more "analytics-grade" than
   proportional digits for anything the user is meant to compare at a glance. */
.pct-num, .hero-score, .stat-row .nums, .header-clock, .timeline-goals,
.pred-row .value, .player-avatar {
  font-family: var(--font-mono);
}

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

/* Team/player names that link to their own page (team.html/player.html) —
   keeps the surrounding text's color so it doesn't read as a random blue
   link, just underlines on hover as the "this is clickable" cue. */
a.entity-link { cursor: pointer; }
a.entity-link:hover { text-decoration: underline; text-decoration-color: var(--text-dim); }

.page-shell { max-width: 1400px; margin: 0 auto; padding: 0 24px 40px; }

/* ---------- Shared icon system ---------- */
/* Every icon rendered via _icons.html's macro sits in a .icon wrapper that
   sizes it off font-size/currentColor — one place to change stroke weight or
   size instead of touching every call site. */
.icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex-shrink: 0; }
.icon-svg { width: 1em; height: 1em; display: block; }
.badge-league .icon, .badge-location .icon { font-size: 13px; margin-right: 6px; color: var(--text-dim); }
#themeToggle .icon-moon, #themeToggle .icon-sun { display: none; font-size: 14px; line-height: 0; }
:root:not([data-theme="light"]) #themeToggle .icon-moon { display: inline-flex; }
:root[data-theme="light"] #themeToggle .icon-sun { display: inline-flex; }
#settingsBtn .icon { font-size: 14px; }

/* ---------- App shell (sidebar + content) ---------- */
.app-shell { display: flex; align-items: flex-start; min-height: 100vh; }
.sidebar {
  width: 232px; flex-shrink: 0; height: 100vh; position: sticky; top: 0;
  display: flex; flex-direction: column; gap: 4px; padding: 20px 14px;
  border-right: 1px solid var(--glass-border);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 20px; }
.sidebar-brand .brand-mark { width: 30px; height: 30px; border-radius: 10px; font-size: 12px; }
.sidebar-brand span { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  color: var(--text-dim); font-size: 13.5px; font-weight: 600; position: relative;
  border: 1px solid transparent;
  transition: background .25s var(--ease-ios), color .2s var(--ease-ios), transform .25s var(--ease-spring),
    border-color .25s var(--ease-ios), box-shadow .25s var(--ease-ios);
}
.sidebar-link .icon { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; transition: transform .25s var(--ease-spring); }
.sidebar-link:hover {
  background: var(--glass); border-color: var(--glass-border); color: var(--text);
  transform: translateX(3px);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-highlight);
}
.sidebar-link:hover .icon { transform: scale(1.12); }
.sidebar-link:active { transform: scale(.97); }
.sidebar-link.active {
  background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.25); color: var(--green);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-highlight);
}
.sidebar-link .badge-soon {
  margin-left: auto; font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 6px; font-weight: 700;
}
.sidebar-account {
  margin-top: auto; padding: 10px 12px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; border-top: 1px solid var(--border);
}
.sidebar-account-name { font-size: 12px; color: var(--text-dim); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-logout-form { flex-shrink: 0; }
.sidebar-logout-btn {
  background: none; border: 1px solid var(--border); color: var(--text-dim); font-size: 11px;
  padding: 4px 10px; border-radius: 999px; cursor: pointer; font-family: inherit;
}
.sidebar-logout-btn:hover { border-color: var(--red); color: var(--red); }
.sidebar-foot { padding: 10px 12px; color: var(--text-dim); font-size: 11px; line-height: 1.5; }
.app-main { flex: 1; min-width: 0; }

/* ---------- Bottom tab bar (phone widths only — see the 640px media query
   below, which hides .sidebar entirely in favor of this) ---------- */
.bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  justify-content: space-between; align-items: stretch;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--glass-strong);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -8px 24px -12px rgba(0,0,0,.25);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.bottom-nav-link {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px; border-radius: 12px; color: var(--text-dim);
  font-size: 10px; font-weight: 600; letter-spacing: -.01em;
  transition: color .2s var(--ease-ios), transform .18s var(--ease-spring);
  /* .bottom-nav-link is also used on the <button id="bottomNavMoreToggle">
     -- reset button chrome so it reads identically to the <a> siblings. */
  background: none; border: none; font-family: inherit; cursor: pointer;
  min-height: 44px;
}
.bottom-nav-link .icon { font-size: 20px; line-height: 1; display: flex; }
.bottom-nav-link:active { transform: scale(.92); }
.bottom-nav-link.active { color: var(--green); }
/* Inicio reads as the primary tab — same "centered, slightly lifted" idiom
   as WhatsApp/Instagram's own middle tab, without needing a real floating
   action button. */
.bottom-nav-home .icon { font-size: 23px; }
.bottom-nav-home.active { color: var(--green); }

/* "Más" overflow sheet — Tablas/Modelo/Ranking/Comparador/Ajustes/Cuenta
   don't fit in the 6-slot bottom bar (see _sidebar.html's comment: the old
   8-item bar left 3 of these completely unreachable on mobile). Toggled by
   app-shell.js; hidden via the `hidden` attribute by default so it's inert
   (no tab stops, no layout space) until opened. */
.bottom-nav-more-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 499;
  background: rgba(0,0,0,.35);
  animation: bottom-sheet-fade .18s var(--ease-ios);
}
.bottom-nav-more-sheet {
  display: none;
  position: fixed; left: 8px; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 501;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: 0 -12px 32px -12px rgba(0,0,0,.35), var(--shadow-md);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  padding: 8px;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  animation: bottom-sheet-up .22s var(--ease-spring);
}
@keyframes bottom-sheet-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bottom-sheet-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.bottom-nav-more-sheet:not([hidden]) { display: grid; }
.bottom-nav-more-backdrop:not([hidden]) { display: block; }
.bottom-nav-more-link {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px; border-radius: 14px; color: var(--text);
  font-size: 11px; font-weight: 600; text-align: center;
  min-height: 44px; justify-content: center;
}
.bottom-nav-more-link:active { transform: scale(.95); }
.bottom-nav-more-link.active { color: var(--green); }
.bottom-nav-more-link .icon { font-size: 20px; }

@media (max-width: 900px) {
  .app-shell { flex-direction: column; align-items: stretch; }
  .sidebar {
    width: 100%; height: auto; position: static; flex-direction: row; overflow-x: auto;
    padding: 10px 12px; gap: 2px; -webkit-overflow-scrolling: touch;
  }
  .sidebar-brand { display: none; }
  .sidebar-nav { flex-direction: row; gap: 4px; }
  .sidebar-link { flex-direction: column; gap: 4px; padding: 8px 12px; font-size: 10.5px; white-space: nowrap; }
  .sidebar-foot { display: none; }
}

/* ---------- Home hero (next/live featured match, or an honest empty state) ---------- */
.home-hero {
  margin-top: 20px; border-radius: 24px; padding: 28px;
  background: radial-gradient(120% 160% at 20% -20%, rgba(34,197,94,.14), transparent 60%), var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.home-hero-label {
  display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 700; color: var(--text-dim); margin-bottom: 16px;
}
.home-hero-empty { text-align: center; padding: 20px 12px; }
.home-hero-empty .headline { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.home-hero-empty .sub { color: var(--text-dim); font-size: 13.5px; line-height: 1.6; max-width: 480px; margin: 0 auto; }
.home-hero-empty a.btn-detail { display: inline-block; margin-top: 18px; }
.home-hero-match {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px;
}
.home-hero-team { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.home-hero-team .name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-hero-team:first-child { justify-self: end; }
.home-hero-team:last-child { justify-self: start; }
@media (max-width: 640px) {
  .home-hero-match { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
  .home-hero-team:first-child, .home-hero-team:last-child { justify-self: center; }
}
.home-hero-team .flag { font-size: 40px; }
.home-hero-team .name { font-weight: 700; font-size: 16px; }
.home-hero-center { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.home-hero-score { font-family: var(--font-mono); font-size: 40px; font-weight: 800; }
.home-hero-when { color: var(--text-dim); font-size: 12.5px; }
.home-hero-cta { margin-top: 18px; text-align: center; }

/* ---------- General stats strip ---------- */
.stats-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;
  margin-top: 24px;
}
.stat-tile {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 16px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-ios), border-color .3s var(--ease-ios);
}
.stat-tile:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--glass-highlight);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight);
}
.stat-tile-value { font-family: var(--font-mono); font-size: 24px; font-weight: 800; color: var(--text); }
.stat-tile-label { font-size: 11px; color: var(--text-dim); letter-spacing: .01em; }
.stat-tile-conf .stat-tile-value { display: flex; gap: 6px; align-items: baseline; }
.stat-tile-conf .pill { font-size: 13px; padding: 2px 9px; }

/* ---------- Top 5 most-confident predictions ---------- */
.top-picks-list { display: flex; flex-direction: column; gap: 6px; }
.top-pick-row {
  display: grid; grid-template-columns: 24px 1.4fr 1fr auto auto 100px; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: transform .2s var(--ease-spring), border-color .2s var(--ease-ios);
}
.top-pick-row:hover { border-color: var(--green); transform: translateX(3px); }
.top-pick-rank {
  font-family: var(--font-mono); font-weight: 800; color: var(--text-dim); font-size: 14px; text-align: center;
}
.top-pick-teams { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; min-width: 0; }
.top-pick-teams .vs { color: var(--text-dim); font-weight: 400; font-size: 11px; margin: 0 2px; }
.top-pick-league { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.top-pick-call { font-size: 12.5px; font-weight: 700; color: var(--green); white-space: nowrap; }
.top-pick-pct-wrap { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.top-pick-pct { font-family: var(--font-mono); font-weight: 800; font-size: 15px; }
.top-pick-pct-wrap .pct-bar-track { width: 100%; }
@media (max-width: 720px) {
  .top-pick-row { grid-template-columns: 20px 1fr; grid-template-areas: "rank teams" "league league" "pill pill" "call pct"; }
  .top-pick-league { grid-area: league; }
  .top-pick-row .pill { grid-area: pill; justify-self: start; }
}

/* ---------- Collapsible sections (native <details>, styled) ---------- */
.collapsible { margin-top: 28px; }
.collapsible-summary {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  list-style: none; padding: 6px 2px; user-select: none;
}
.collapsible-summary::-webkit-details-marker { display: none; }
.collapsible-title {
  font-size: 13px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em;
}
.collapsible-title .count { color: var(--text-dim); font-weight: 500; text-transform: none; letter-spacing: 0; }
.collapsible-chevron {
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); background: var(--glass); border: 1px solid var(--glass-border);
  transition: transform .25s var(--ease-spring), color .2s var(--ease-ios);
  font-size: 12px;
}
.collapsible[open] > .collapsible-summary .collapsible-chevron { transform: rotate(180deg); color: var(--green); }
.collapsible-body { animation: tab-fade-in .3s var(--ease-ios); }
.collapsible.nested { margin-top: 10px; margin-left: 4px; padding-left: 10px; border-left: 2px solid var(--glass-border); }
.collapsible.nested .collapsible-title { font-size: 11px; }
.collapsible.nested .collapsible-chevron { width: 18px; height: 18px; font-size: 10px; }

/* ---------- Competition sections (grouped match cards) ---------- */
.comp-section { margin-top: 28px; }
.comp-section-title {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-size: 13px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em;
}
.comp-section-title .count { color: var(--text-dim); font-weight: 500; text-transform: none; letter-spacing: 0; }
.match-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.card-grid-more {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 12px; padding: 10px; color: var(--text-dim); font-size: 12px;
}
.card-grid-more-label { font-family: var(--font-mono); }
.card-grid-more-btn { font-size: 12.5px; padding: 8px 16px; }
.tables-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px 28px; margin-top: 8px; }
.tables-grid .comp-section { margin-top: 0; }
.match-card {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px;
  background: var(--glass); border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: transform .22s var(--ease-spring), border-color .2s var(--ease-ios);
}
.match-card:hover { border-color: var(--green); transform: translateY(-2px); }
.match-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.match-card-team { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; min-width: 0; }
.match-card-team span.name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-card-score { font-family: var(--font-mono); font-weight: 800; font-size: 14px; color: var(--text-dim); flex-shrink: 0; }
.match-card-foot { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-dim); }
.match-card .pill { font-size: 10px; padding: 2px 8px; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  /* Safe-area inset is handled once on body now (see its comment) -- do not
     re-add a per-element env() calc here, that's the pattern that kept
     reappearing as a gap on real iOS Safari. */
  margin: 0 -24px;
  border-bottom: 1px solid var(--glass-border);
  position: sticky; top: 0; z-index: 40;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #04140a; letter-spacing: -.02em;
  box-shadow: 0 8px 20px -8px rgba(34,197,94,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.topbar h1 { font-size: 18px; margin: 0; font-weight: 700; letter-spacing: -.01em; }
.topbar .meta { display: flex; align-items: center; gap: 14px; color: var(--text-dim); font-size: 13px; }
.badge-league {
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px;
  padding: 5px 12px; font-size: 12px; color: var(--text-dim);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.badge-location { color: var(--text-dim); font-size: 13px; }

/* ---------- Filter bar ---------- */
.filterbar {
  display: flex; align-items: center; gap: 10px; padding: 16px 0;
  flex-wrap: wrap;
}
.search-wrap { position: relative; min-width: 240px; }
.search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-dim); pointer-events: none;
}
.filterbar input[type="search"] {
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 14px;
  padding: 9px 12px 9px 32px; color: var(--text); width: 100%;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: border-color .2s var(--ease-ios), box-shadow .2s var(--ease-ios);
}
.filterbar input[type="search"]:focus { outline: none; border-color: var(--green); box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 0 0 3px rgba(34,197,94,.18); }
.filterbar select {
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 14px;
  padding: 9px 12px; color: var(--text); font-size: 13px; cursor: pointer;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}

/* ---------- Custom select (replaces the native <select> chrome, see
   app-shell.js's buildOne) ---------- */
.fs-select { position: relative; display: inline-flex; }
.fs-select-native {
  /* Kept in the DOM (not display:none removed) so the form still submits
     its value and any onchange="" attribute still fires -- just invisible
     and unreachable, the custom trigger below is what the user sees/clicks. */
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; border: none;
}
.fs-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 14px;
  padding: 9px 12px; color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: border-color .2s var(--ease-ios), box-shadow .2s var(--ease-ios);
  min-width: 0; width: 100%;
}
.fs-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-select-chevron { flex-shrink: 0; display: flex; color: var(--text-dim); transition: transform .2s var(--ease-ios); }
.fs-select.open .fs-select-chevron { transform: rotate(180deg); }
.fs-select.open .fs-select-trigger { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); }
.fs-select-disabled .fs-select-trigger { opacity: .5; cursor: not-allowed; }
.fs-select-panel {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; max-width: 320px;
  max-height: 280px; overflow-y: auto; z-index: 200;
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 14px;
  padding: 6px; box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98); transform-origin: top left;
  transition: opacity .18s var(--ease-ios), transform .18s var(--ease-ios), visibility .18s;
}
.fs-select.open .fs-select-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.fs-select-option {
  padding: 9px 10px; border-radius: 9px; font-size: 13px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s var(--ease-ios);
}
.fs-select-option:hover { background: var(--panel-2); }
.fs-select-option.selected { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); font-weight: 700; }

/* ---------- Ranking (personal Elo leaderboard) ---------- */
.rank-list { display: flex; flex-direction: column; gap: 10px; }
.rank-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease-ios), transform .2s var(--ease-ios), box-shadow .2s var(--ease-ios);
}
.rank-row:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.rank-row-top { background: linear-gradient(135deg, color-mix(in srgb, var(--orange) 6%, var(--panel)), var(--panel)); }
.rank-row-me { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent); }
.rank-position { width: 30px; flex-shrink: 0; text-align: center; font-family: var(--font-mono); font-weight: 800; font-size: 15px; color: var(--text-dim); }
.rank-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #04140a; font-weight: 800; font-size: 14px;
}
.rank-identity { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.rank-username { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.rank-elo-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; width: 90px; flex-shrink: 0; }
.rank-elo { font-family: var(--font-mono); font-weight: 800; font-size: 15px; }
.rank-elo-track { width: 100%; }

.tier-tabs {
  display: flex; gap: 6px; margin-left: auto; background: var(--glass); padding: 4px;
  border-radius: 14px; border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}

.pagination-bar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 0; flex-wrap: wrap;
}
.pagination-bar button {
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--text);
  border-radius: 10px; padding: 7px 12px; cursor: pointer; font-size: 13px; font-weight: 700;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: border-color .2s var(--ease-ios), color .2s var(--ease-ios);
}
.pagination-bar button:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.pagination-bar button:disabled { opacity: .35; cursor: default; }
.pagination-bar .pager-label { font-size: 12px; color: var(--text-dim); margin: 0 4px; white-space: nowrap; }
.tier-tabs button {
  background: none; border: none; color: var(--text-dim);
  border-radius: 10px; padding: 7px 14px; cursor: pointer; font-size: 13px;
}
.tier-tabs button:hover { color: var(--text); }
.tier-tabs button.active {
  background: var(--green); color: #04140a; font-weight: 700;
  box-shadow: 0 6px 16px -8px rgba(34,197,94,.7), inset 0 1px 0 rgba(255,255,255,.35);
}
.match-count { color: var(--text-dim); font-size: 13px; white-space: nowrap; }

/* ---------- Table ---------- */
.table-card {
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px;
  overflow: hidden; box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.table-scroll { overflow-x: auto; }
table.matches { width: 100%; border-collapse: collapse; }
table.matches thead th {
  text-align: left; padding: 12px 16px; font-size: 10.5px; letter-spacing: .06em;
  color: var(--text-dim); text-transform: uppercase; font-weight: 700;
  border-bottom: 1px solid var(--border); background: var(--panel-2);
  cursor: pointer; user-select: none; white-space: nowrap;
}
table.matches thead th:hover { color: var(--text); }
table.matches thead th .sort-arrow { opacity: .5; margin-left: 2px; }
table.matches tbody tr { border-bottom: 1px solid var(--border); transition: background .2s var(--ease-ios), opacity .2s var(--ease-ios); }
table.matches tbody tr:last-child { border-bottom: none; }
table.matches tbody tr:hover { background: var(--panel-2); }
table.matches td { padding: 12px 16px; white-space: nowrap; }
.conf-bar { border-left: 3px solid transparent; }
.conf-bar.ALTA { border-left-color: var(--green); }
.conf-bar.MEDIA { border-left-color: var(--orange); }
.conf-bar.BAJA { border-left-color: var(--red); }
.pill { border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; letter-spacing: .02em; transition: transform .18s var(--ease-spring); }
.pill.ALTA { background: rgba(34,197,94,.15); color: var(--green); }
.pill.MEDIA { background: rgba(245,158,11,.15); color: var(--orange); }
.pill.BAJA { background: rgba(239,68,68,.15); color: var(--red); }
.matchup { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.matchup-team { display: flex; align-items: center; gap: 6px; }
.matchup-flag { font-size: 16px; }
.matchup .vs { color: var(--text-dim); font-weight: 400; margin: 0 4px; font-size: 12px; }
.fav-star {
  background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1;
  color: var(--text-dim); padding: 0 2px; flex-shrink: 0;
}
.fav-star:hover { color: var(--orange); }
.fav-star.is-fav { color: var(--orange); }

.pct-cell { min-width: 74px; }
.pct-num { display: block; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.pct-bar-track { display: block; height: 4px; width: 56px; border-radius: 2px; background: var(--border); overflow: hidden; }
.pct-bar-fill { display: block; height: 100%; border-radius: 2px; }
.pct-cell.pct-local .pct-num { color: var(--blue); } .pct-cell.pct-local .pct-bar-fill { background: var(--blue); }
.pct-cell.pct-draw .pct-num { color: var(--text-dim); } .pct-cell.pct-draw .pct-bar-fill { background: var(--text-dim); }
.pct-cell.pct-away .pct-num { color: var(--purple); } .pct-cell.pct-away .pct-bar-fill { background: var(--purple); }
.pct-cell.pct-over .pct-num { color: var(--green); } .pct-cell.pct-over .pct-bar-fill { background: var(--green); }
.pct-cell.pct-under .pct-num { color: var(--text-dim); } .pct-cell.pct-under .pct-bar-fill { background: var(--text-dim); }
.pct-cell.pct-btts .pct-num { color: var(--orange); } .pct-cell.pct-btts .pct-bar-fill { background: var(--orange); }
.pct-cell.pct-corner .pct-num { color: var(--cyan); } .pct-cell.pct-corner .pct-bar-fill { background: var(--cyan); }
.pct-cell.pct-card .pct-num { color: var(--pink); } .pct-cell.pct-card .pct-bar-fill { background: var(--pink); }
.no-pred { color: var(--text-dim); font-style: italic; }

.modelo-market-row { display: grid; grid-template-columns: 160px 1fr 90px; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.modelo-market-row:last-child { border-bottom: none; }
.modelo-market-label { font-size: 13.5px; font-weight: 600; }
.modelo-bar-track { display: block; height: 10px; width: 100%; border-radius: 5px; background: var(--border); overflow: hidden; }
.modelo-bar-fill { display: block; height: 100%; border-radius: 5px; background: var(--green); }
.modelo-bar-fill.low { background: var(--red); }
.modelo-bar-fill.mid { background: var(--orange); }
.modelo-market-pct { font-family: var(--font-mono); font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.modelo-market-n { font-size: 11px; color: var(--text-dim); text-align: right; display: block; }
/* --surface was never a defined variable anywhere in this file -- the
   background silently fell back to transparent, which read as "duller than
   the page" against --panel-2/--glass surfaces everywhere else. Swapped
   for a real card (var(--panel) + shadow) matching the rest of the app's
   iOS card language, with a proper hover lift. */
.modelo-match-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--border);
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease-ios), transform .2s var(--ease-ios), box-shadow .2s var(--ease-ios);
}
.modelo-match-row:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.modelo-match-teams { font-size: 13.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modelo-match-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.modelo-match-score { font-family: var(--font-mono); font-weight: 800; font-size: 15px; flex-shrink: 0; }
.modelo-hit-badge { flex-shrink: 0; font-family: var(--font-mono); font-weight: 800; font-size: 13px; padding: 4px 11px; border-radius: 999px; background: var(--border); display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.modelo-hit-badge.good { background: color-mix(in srgb, var(--green) 22%, transparent); color: var(--green); }
.modelo-hit-badge.bad { background: color-mix(in srgb, var(--red) 22%, transparent); color: var(--red); }
.modelo-hit-badge.pending { color: var(--text-dim); }
.modelo-hit-badge .icon-svg { width: 14px; height: 14px; }

/* ---------- Interactive precision tooltip -- hover a market/match bar to
   see the exact breakdown, instead of just the flat percentage. Positioned
   above the trigger by default; .fs-tooltip-below flips it under (used
   where the trigger sits near the top of the viewport). ---------- */
.fs-tooltip-trigger { position: relative; cursor: help; }
.modelo-market-row .fs-tooltip-trigger { display: block; width: 100%; }
.fs-tooltip {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
  min-width: 180px; max-width: 260px; background: var(--glass-strong); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color: var(--text); font-size: 12px; font-weight: 600; padding: 10px 12px; border-radius: 12px;
  box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; pointer-events: none; z-index: 60;
  transition: opacity .16s var(--ease-ios), transform .16s var(--ease-ios), visibility .16s;
}
.fs-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--glass-strong);
}
.fs-tooltip-below { bottom: auto; top: calc(100% + 10px); transform: translateX(-50%) translateY(-4px); }
.fs-tooltip-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--glass-strong); }
.fs-tooltip-trigger:hover .fs-tooltip, .fs-tooltip-trigger:focus .fs-tooltip, .fs-tooltip-trigger:focus-visible .fs-tooltip {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.fs-tooltip-title { display: block; font-weight: 800; margin-bottom: 4px; color: var(--text-dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.fs-tooltip-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; }
.fs-tooltip-row + .fs-tooltip-row { border-top: 1px solid var(--glass-border); }
.fs-tooltip-row-market { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); font-weight: 600; }
.fs-tooltip-row-hit { flex-shrink: 0; font-weight: 800; }
.fs-tooltip-row-hit.good { color: var(--green); }
.fs-tooltip-row-hit.bad { color: var(--red); }
.fs-tooltip-row-hit.pending { color: var(--text-dim); }

.modelo-match-bar-track { display: block; height: 6px; width: 100%; border-radius: 4px; background: var(--border); overflow: hidden; margin-top: 6px; }
.modelo-match-bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--green); }
.modelo-match-bar-fill.low { background: var(--red); }
.modelo-match-bar-fill.mid { background: var(--orange); }

/* modelo_match.html's market table -- "Mercado"/"Llamada del modelo" read
   left-aligned prose, not tabular numbers, so their header needs to match
   the data's left alignment instead of group-table's default centered th
   (was a real misalignment: header centered over left-aligned cell text). */
.modelo-market-table th:nth-child(1), .modelo-market-table td:nth-child(1),
.modelo-market-table th:nth-child(2), .modelo-market-table td:nth-child(2) { text-align: left; }
.modelo-match-list { display: flex; flex-direction: column; gap: 8px; }
.modelo-row-table { width: 100%; border-collapse: collapse; }
.modelo-row-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.modelo-row-table td { padding: 10px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.modelo-row-table tr:last-child td { border-bottom: none; }
.modelo-row-table td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.btn-detail {
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 12px;
  padding: 6px 12px; font-size: 12px; color: var(--text); font-weight: 600;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.btn-detail:hover { border-color: var(--green); color: var(--green); }
.status-tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.status-tag.complete { background: rgba(139,147,167,.15); color: var(--text-dim); }
.status-tag.incomplete { background: rgba(59,130,246,.15); color: var(--blue); }
.status-tag.live { background: rgba(239,68,68,.15); color: var(--red); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

.goal-flash { animation: goal-flash 0.6s ease-in-out 2; }
@keyframes goal-flash {
  0%, 100% { color: inherit; text-shadow: none; }
  50% { color: var(--green); text-shadow: 0 0 24px rgba(34,197,94,.8); }
}

/* ---------- Match view ---------- */
.match-header {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 24px; border-bottom: 1px solid var(--glass-border);
  /* Safe-area inset is handled once on body -- see its comment. */
  background: var(--glass-strong);
  position: sticky; top: 0; z-index: 40;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.back-link {
  font-size: 18px; color: var(--text-dim); width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--glass-border);
  background: var(--glass); flex-shrink: 0;
}
.back-link:hover { color: var(--text); border-color: var(--text-dim); }
.back-link:active { transform: scale(.9); }
.match-header-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.match-header .league-label {
  font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
}
.match-header-score {
  display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.match-header-score .header-score-value {
  font-family: var(--font-mono); color: var(--green); font-weight: 800; margin: 0 2px;
}
.header-clock { margin-left: auto; color: var(--text-dim); font-size: 13px; font-variant-numeric: tabular-nums; flex-shrink: 0; }

.match-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; min-height: 70vh; }
/* Same grid min-width:auto overflow as .bet-layout above -- a wide child
   here pushes the whole page into horizontal scroll on mobile instead of
   scrolling only its own content (confirmed live: 401px doc width on a
   375px viewport). */
.match-layout > * { min-width: 0; }
@media (max-width: 900px) { .match-layout { grid-template-columns: 1fr; } }

/* ---------- Armar apuesta: manual builder left, auto-combinada right ---------- */
.bet-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; margin-top: 4px; }
/* Grid items default to min-width: auto, so a wide child (the "Agregar
   partido" table below) sizes the whole 1fr track to its content instead of
   shrinking to the column and scrolling internally via .table-scroll's own
   overflow-x -- on mobile that pushed the *entire page* into horizontal
   scroll (confirmed live: 621px doc width on a 375px viewport). */
.bet-layout > * { min-width: 0; }
@media (max-width: 900px) { .bet-layout { grid-template-columns: 1fr; } }
.bet-auto-col { position: sticky; top: 84px; }
@media (max-width: 900px) { .bet-auto-col { position: static; } }
.bet-auto-form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.bet-auto-field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
.bet-auto-field select { width: 100%; }
.bet-auto-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.bet-auto-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; }
.bet-auto-check input { accent-color: var(--purple); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }

.pagination-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.pagination-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pagination-size { display: flex; align-items: center; gap: 6px; }
.pagination-size-link { font-size: 12.5px; font-weight: 700; color: var(--text-dim); padding: 3px 7px; border-radius: 6px; text-decoration: none; }
.pagination-size-link:hover { background: var(--panel-2); color: var(--text); }
.pagination-size-link.active { background: var(--purple); color: #fff; }

/* ---------- Shared combinada "ticket" (/apuesta/s/<code>) ---------- */
/* Deliberately its own read-only receipt-style layout, not a reuse of the
   editable /apuesta list -- the reference was Betano's own shared-bet
   screenshot (a real physical-ticket look: a header with the headline
   number, a torn/perforated seam, then each leg stacked below), which the
   plain editable picker never looked like even with matches pre-selected. */
.bet-ticket-wrap { max-width: 460px; margin: 24px auto 0; display: flex; flex-direction: column; gap: 16px; }
.bet-ticket {
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.bet-ticket-head {
  padding: 26px 24px 20px; text-align: center;
  background: radial-gradient(120% 160% at 50% -20%, rgba(34,197,94,.14), transparent 60%);
}
.bet-ticket-head-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--text-dim); text-transform: uppercase; }
.bet-ticket-prob { font-family: var(--font-mono); font-size: 44px; font-weight: 800; color: var(--green); line-height: 1.15; margin-top: 6px; }
.bet-ticket-head-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.bet-ticket-odds-row {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px;
  font-size: 13px; color: var(--text-dim);
}
.bet-ticket-odds-value { font-family: var(--font-mono); font-weight: 700; color: var(--text); font-size: 15px; }
/* The perforated "tear" seam -- a dashed rule plus two notches cut into the
   card's own edges via radial-gradient masks, the same trick a physical
   ticket stub uses so the two halves read as torn apart, not just divided
   by a plain line. */
.bet-ticket-tear {
  position: relative; height: 0;
  border-top: 2px dashed var(--glass-border);
  margin: 0 -1px;
}
.bet-ticket-tear::before, .bet-ticket-tear::after {
  content: ""; position: absolute; top: -10px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--glass-border);
}
.bet-ticket-tear::before { left: -10px; }
.bet-ticket-tear::after { right: -10px; }
.bet-ticket-body { padding: 18px 20px 6px; }
.bet-ticket-match { padding-bottom: 16px; }
.bet-ticket-league { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-dim); text-align: center; margin-bottom: 8px; }
.bet-ticket-teams {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  font-size: 15px; margin-bottom: 12px; text-align: center;
}
.bet-ticket-team-name { font-weight: 700; }
.bet-ticket-teams .matchup-flag { font-size: 20px; }
.bet-ticket-leg {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 12px;
  padding: 10px 14px; margin-top: 8px;
}
.bet-ticket-leg-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bet-ticket-leg-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--purple); }
.bet-ticket-leg-label { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bet-ticket-leg-nums { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; font-family: var(--font-mono); }
.bet-ticket-leg-odds { font-size: 12px; color: var(--text-dim); }
.bet-ticket-leg-prob { font-size: 15px; font-weight: 800; color: var(--green); }
.bet-ticket-divider { border-top: 1px dashed var(--glass-border); margin: 4px 0 16px; }
.bet-ticket-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 520px) {
  .bet-ticket-wrap { margin-top: 16px; }
  .bet-ticket-prob { font-size: 36px; }
  .bet-ticket-teams { font-size: 14px; }
}

/* ---------- Team view: two columns (identity/history left, aggregated
   form stats right) ---------- */
.team-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .team-layout { grid-template-columns: 1fr; } }
.team-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.team-col-side { position: sticky; top: 84px; }
@media (max-width: 900px) { .team-col-side { position: static; } }
.team-position-badge {
  font-family: var(--font-mono); font-size: 11px; font-weight: 800; color: var(--green);
  background: rgba(34,197,94,.14); border-radius: 999px; padding: 2px 9px; margin-left: 6px;
  vertical-align: middle;
}
.team-form-strip { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin-top: 14px; margin-bottom: 6px; }

/* ---------- Player view: stats left, real per-match event timeline right ---------- */
.player-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .player-grid { grid-template-columns: 1fr; } }
.player-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.player-event-feed { max-height: none; }

/* ---------- Tablas: vigentes/finalizadas segmented toggle + chip selector ---------- */
.comp-status-toggle { display: flex; gap: 10px; margin: 20px 0 16px; }
.comp-status-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease-ios), color .2s var(--ease-ios), background .2s var(--ease-ios), transform .18s var(--ease-spring);
}
.comp-status-btn:hover:not(:disabled) { border-color: var(--cyan); color: var(--text); }
.comp-status-btn:active:not(:disabled) { transform: scale(.98); }
.comp-status-btn:disabled { opacity: .4; cursor: default; }
.comp-status-btn.active { background: var(--cyan); border-color: var(--cyan); color: #04222c; box-shadow: 0 10px 24px -12px rgba(34,211,238,.55), inset 0 1px 0 rgba(255,255,255,.35); }
.comp-status-count {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--panel-2); color: inherit;
}
.comp-status-btn.active .comp-status-count { background: rgba(4,34,44,.18); }
.comp-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.comp-chip {
  display: flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--text-dim);
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: border-color .2s var(--ease-ios), color .2s var(--ease-ios), background .2s var(--ease-ios), transform .18s var(--ease-spring);
}
.comp-chip:hover { border-color: var(--cyan); color: var(--text); }
.comp-chip:active { transform: scale(.96); }
.comp-chip.active { background: var(--cyan); border-color: var(--cyan); color: #04222c; box-shadow: 0 6px 16px -8px rgba(34,211,238,.6), inset 0 1px 0 rgba(255,255,255,.35); }
.comp-chip-badge {
  font-size: 9px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  background: rgba(255,255,255,.16); border-radius: 999px; padding: 2px 6px;
}
.comp-chip.active .comp-chip-badge { background: rgba(4,34,44,.18); }
.comp-panel { animation: tab-fade-in .3s var(--ease-ios); }
.group-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.group-tab {
  padding: 6px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.group-tab:hover { color: var(--text); }
.group-tab.active { background: var(--green); border-color: var(--green); color: #04140a; }

/* ---------- Ajustes: two-column grid + icon-led section headers ---------- */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-top: 20px; }
@media (max-width: 720px) { .settings-grid { grid-template-columns: 1fr; } }
.settings-grid .prediction-card h3 { display: flex; align-items: center; gap: 8px; }
.settings-grid .prediction-card h3 .icon { font-size: 16px; color: var(--green); }

.live-panel { padding: 24px; border-right: 1px solid var(--border); }

.video-score-bar {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 16px; margin-bottom: 10px; font-weight: 700; font-size: 15px;
}
.video-team { display: flex; align-items: center; gap: 6px; }
.video-score { font-family: var(--font-mono); color: var(--text-dim); font-weight: 800; }
.live-chip.inline { position: static; margin-left: 8px; }
.video-box {
  background: #000; border-radius: 20px; overflow: hidden; aspect-ratio: 16/9;
  box-shadow: 0 20px 40px -24px rgba(0,0,0,.7);
}
.video-box video { width: 100%; height: 100%; display: block; }

.hero-card {
  background:
    radial-gradient(120% 160% at 50% -20%, rgba(34,197,94,.18), transparent 60%),
    var(--glass);
  border: 1px solid var(--glass-border); border-radius: 24px; padding: 36px 24px 28px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.live-chip {
  position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 6px;
  background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.25); color: var(--red); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; padding: 4px 10px; border-radius: 999px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
/* iOS-style "recording" dot — a soft ring expands and fades outward instead
   of just blinking opacity, which reads calmer at a glance over long
   match-day sessions. */
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); position: relative; }
.live-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: var(--red); opacity: .55; animation: live-ring 1.6s var(--ease-ios) infinite;
}
@keyframes live-ring { 0% { transform: scale(.4); opacity: .55; } 100% { transform: scale(1.8); opacity: 0; } }
.live-prediction-card { border-color: rgba(239,68,68,.35); box-shadow: 0 0 0 1px rgba(239,68,68,.12), var(--shadow-sm); }
.live-prediction-card h3 { display: flex; align-items: center; gap: 8px; }
.live-prediction-card h3 .live-dot { display: inline-block; }
.hero-row { display: flex; align-items: center; justify-content: center; gap: 36px; }
.hero-team { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; max-width: 160px; }
.crest {
  width: 72px; height: 72px; border-radius: 50%; font-size: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass); border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm);
  transition: transform .3s var(--ease-spring);
}
.hero-team:hover .crest { transform: scale(1.05); }
.crest .crest-img { width: 68%; height: 68%; object-fit: contain; }
.flag .crest-img, .matchup-flag .crest-img { width: 1.15em; height: 1.15em; object-fit: contain; vertical-align: -0.2em; border-radius: 3px; }
.match-card-team .crest-img { width: 16px; height: 16px; object-fit: contain; vertical-align: -2px; border-radius: 3px; }
/* Lineup column headers (Alineación tab) reuse the bare crest() macro output
   with no sizing wrapper around it, so .crest-img's percentage-based sizing
   (which needs a .crest ancestor box) never applied and the raw ESPN CDN
   image rendered at its full intrinsic size -- the exact "escudo gigante"
   the user flagged. Scoped small size here instead of wrapping every call
   site in a .crest div. */
.lineup-col h4 .crest-img { width: 20px; height: 20px; object-fit: contain; vertical-align: -4px; border-radius: 4px; margin-right: 2px; }
.hero-team .team-name { font-weight: 700; font-size: 15px; text-align: center; }
.hero-score {
  font-size: 56px; font-weight: 800; letter-spacing: 1px; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 10px; color: var(--text);
}
.hero-score .dash { color: var(--text-dim); font-weight: 400; font-size: 32px; }
.hero-score .vs-label { font-size: 22px; color: var(--text-dim); font-weight: 700; letter-spacing: .1em; }
.hero-status {
  text-align: center; margin-top: 18px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-dim);
}

.no-data-note { color: var(--text-dim); font-size: 13px; margin-top: 14px; text-align: center; }

.timeline-block {
  margin-top: 20px; background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 18px; padding: 18px 20px;
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.timeline-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  color: var(--text-dim); margin-bottom: 14px;
}
.timeline-clock { width: 13px; height: 13px; }
.timeline-source {
  margin-left: auto; text-transform: none; font-weight: 500; letter-spacing: 0;
  color: var(--text-dim); font-size: 10px; opacity: .7;
}

.event-feed {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 260px; overflow-y: auto;
}
.event-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px;
  border-radius: 10px; font-size: 13px; border-left: 2px solid transparent;
  transition: background .2s var(--ease-ios);
}
.event-row:hover { background: var(--panel-2); }
.event-row.side-home { border-left-color: var(--red); }
.event-row.side-away { border-left-color: var(--text-dim); }
.event-minute {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-dim);
  min-width: 44px; flex-shrink: 0;
}
.event-icon { flex-shrink: 0; font-size: 14px; }
.event-team { flex-shrink: 0; font-size: 14px; }
.event-player { color: var(--text); font-weight: 500; }
.timeline-track { display: flex; align-items: center; gap: 10px; }
.timeline-side { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.timeline-team-tag { font-size: 18px; }
.timeline-goals {
  font-size: 11px; font-weight: 700; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px;
}
.timeline-bar {
  flex: 1; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--green), var(--border) 40%, var(--border) 60%, var(--purple));
  opacity: .55;
}
.timeline-mid {
  font-size: 10px; font-weight: 700; color: var(--text-dim); background: var(--bg);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; flex-shrink: 0;
}
.timeline-note { font-size: 11px; color: var(--text-dim); font-style: italic; margin-top: 14px; text-align: center; }

.prediction-card {
  margin-top: 20px; background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 18px; padding: 18px;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.prediction-card h3 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; color: var(--text-dim); letter-spacing: .04em; }
.pred-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.pred-row:last-child { border-bottom: none; }
.pred-row .label { color: var(--text-dim); }
.pred-row .value { font-weight: 700; }
.pred-row.official-pick { margin-top: 2px; }
.pred-row.official-pick .label, .pred-row.official-pick .value { color: var(--green); font-weight: 800; }
.odds-chip {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: rgba(34,211,238,.14); color: var(--cyan); font-weight: 800;
  font-size: 12px; letter-spacing: .01em;
}

/* Modo compacto (Ajustes > Apariencia) -- tighter spacing for users who want
   to see more per screen, opt-in via html.compact set by app-shell.js. */
html.compact .prediction-card { padding: 12px; margin-top: 12px; }
html.compact .pred-row { padding: 4px 0; font-size: 12px; }
html.compact .match-card { padding: 10px 12px; gap: 6px; }
html.compact .match-card-grid { gap: 8px; }
.basis-card .pred-row { font-size: 12.5px; }
.basis-card .pred-row .value { font-weight: 500; text-align: right; max-width: 60%; }
.basis-hash { font-family: monospace; font-size: 10px; word-break: break-all; text-align: left; }
.basis-card .pred-row .value a { color: var(--blue); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .15s; }
.basis-card .pred-row .value a:hover { text-decoration-color: currentColor; }

.cert-card { border: 1px solid var(--green); box-shadow: inset 0 1px 0 var(--glass-highlight), 0 0 0 1px rgba(34,197,94,.08); }

/* ---------- Bet builder (armar apuesta) market toggles ---------- */
.market-category { margin-top: 14px; }
.market-category:first-of-type { margin-top: 12px; }
.market-toggle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 12px; }
.market-toggle {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  font-size: 12.5px; transition: border-color .18s var(--ease-ios), background .18s var(--ease-ios), transform .18s var(--ease-spring);
}
.market-toggle:hover { border-color: var(--green); }
.market-toggle:active { transform: scale(.97); }
.market-toggle.checked { background: rgba(34,197,94,.14); border-color: var(--green); }
.market-toggle-check {
  width: 16px; height: 16px; flex-shrink: 0; border-radius: 5px; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--green);
}
.market-toggle.checked .market-toggle-check { border-color: var(--green); background: var(--green); color: var(--bg); }
.market-toggle-label { flex: 1; min-width: 0; }
.market-toggle-pct { font-family: var(--font-mono); font-weight: 700; color: var(--text-dim); }
.market-toggle.checked .market-toggle-pct { color: var(--green); }
.cert-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.cert-sample { font-size: 12px; color: var(--text-dim); }

.pick-form { display: flex; flex-direction: column; gap: 10px; }
.pick-options { display: flex; gap: 8px; flex-wrap: wrap; }
.pick-option {
  flex: 1; min-width: 100px; display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 10px; font-size: 13px; cursor: pointer;
  transition: border-color .15s var(--ease-ios), background .15s var(--ease-ios);
}
.pick-option:has(input:checked) { border-color: var(--green); background: rgba(34,197,94,.08); color: var(--green); font-weight: 700; }
.pick-option input { accent-color: var(--green); }
.pick-submit {
  align-self: flex-start; background: var(--green); color: var(--bg); border: none; border-radius: 10px;
  padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.pick-submit:hover { filter: brightness(1.08); }

.stats-panel { padding: 24px; }
.tabs { display: flex; gap: 4px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.tabs button {
  background: none; border: none; color: var(--text-dim); padding: 8px 16px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; cursor: pointer; border-bottom: 2px solid transparent;
}
.tabs button.active { color: var(--green); border-bottom-color: var(--green); }
.tab-fade-in { animation: tab-fade-in .3s var(--ease-ios); }
@keyframes tab-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.possession-row { display: flex; align-items: center; justify-content: center; gap: 32px; margin-bottom: 28px; }
.possession-side { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.possession-side .flag { font-size: 26px; }
.possession-side .pct { font-size: 22px; font-weight: 800; }
.possession-donut {
  width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-highlight);
  background: var(--text-dim); transition: background .7s var(--ease-ios);
}
.possession-donut-hole {
  background: var(--glass); width: 70px; height: 70px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.possession-donut span { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }

.stat-row { margin-bottom: 18px; }
.stat-row .nums { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.stat-row .bar-track { display: flex; height: 7px; border-radius: 999px; overflow: hidden; background: var(--border); }
.stat-row .bar-home { background: linear-gradient(90deg, #b91c1c, var(--red)); }
.stat-row .bar-away { background: var(--text-dim); }
.bar-anim { width: 0%; transition: width .7s cubic-bezier(.16,1,.3,1); }
.stat-row .stat-label {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; margin-top: 6px;
}
.stat-icon svg { width: 13px; height: 13px; display: block; }
.stat-na { text-align: center; color: var(--text-dim); font-style: italic; font-size: 12px; padding: 20px 0; }

.pressure-row { margin-bottom: 24px; }
.pressure-row .nums { font-size: 15px; }
.pressure-row .bar-track { height: 10px; }
.pressure-caption {
  text-align: center; font-size: 10px; color: var(--text-dim); font-style: italic;
  margin-top: 6px; text-transform: none; letter-spacing: normal;
}

.lineup-cols { display: flex; gap: 24px; }
.lineup-col { flex: 1; position: relative; }
.lineup-col:first-child { padding-right: 24px; border-right: 1px solid var(--glass-border); }
.lineup-col h4 { font-size: 12px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 12px; letter-spacing: .04em; }
.lineup-grid { display: flex; flex-direction: column; gap: 8px; }
.player-card {
  display: flex; align-items: center; gap: 10px; background: var(--glass);
  border: 1px solid var(--glass-border); border-radius: 14px; padding: 8px 12px;
  transition: border-color .2s var(--ease-ios), transform .25s var(--ease-spring);
}
.player-card:hover { border-color: var(--green); transform: translateX(3px); }
.player-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(160deg, var(--panel-2), var(--border));
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--text-dim);
}
.player-name { font-size: 13px; font-weight: 500; }
.player-position { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.empty-tab { color: var(--text-dim); font-size: 13px; text-align: center; padding: 40px 0; }

.group-table-title { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 0 0 10px; }
/* Every .group-table (standings in /tablas, market breakdown in /match,
   modelo_match.html) used to sit directly on the page background with no
   card of its own -- flat/plain per live review 2026-08-02 ("las tablas
   están desordenadas ... no las veo tan interactivas"). Giving the
   scroll wrapper the same glass-card treatment as .table-card everywhere
   a .group-table appears, without having to touch every template that
   renders one. */
.table-scroll:has(.group-table) {
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 18px;
  overflow: hidden; box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.table-scroll:has(.group-table) > .group-table { margin: 0; }
.group-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.group-table th {
  text-align: center; padding: 10px 12px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); border-bottom: 1px solid var(--border); background: var(--glass-strong);
  position: sticky; top: 0;
}
.group-table th:first-child, .group-table td:first-child { text-align: left; }
.group-table td { text-align: center; padding: 10px 12px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.group-table tr:last-child td { border-bottom: none; }
.group-table tr { transition: background .2s var(--ease-ios); }
.group-table tr:hover { background: var(--panel-2); }
.group-table-team { font-weight: 600; }
.group-table-pts { font-weight: 800; color: var(--green); }
.group-table tr.is-current-match { background: color-mix(in srgb, var(--green) 8%, transparent); }

.scorers-list { display: flex; flex-direction: column; gap: 2px; }
.scorer-row { display: flex; align-items: center; gap: 12px; padding: 7px 4px; font-size: 13px; border-radius: 10px; transition: background .2s var(--ease-ios); }
.scorer-row:hover { background: var(--panel-2); }
.scorer-rank { width: 18px; flex-shrink: 0; color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; }
/* Highlights a scorer who's actually on the pitch today, in the tournament-wide
   top-scorers list -- real request from live review 2026-08-02: "resaltar
   la posición de esos jugadores" instead of leaving them unmarked in a long list. */
.scorer-row.is-in-match { background: color-mix(in srgb, var(--green) 12%, transparent); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); }
.scorer-row.is-in-match .scorer-rank { color: var(--green); font-weight: 800; }
.scorer-row.is-in-match .scorer-name { font-weight: 700; }
.scorer-name { flex: 1; font-weight: 600; }
.scorer-team { color: var(--text-dim); font-size: 12px; }
.scorer-goals { font-family: var(--font-mono); font-weight: 800; color: var(--green); min-width: 20px; text-align: right; }

/* ---------- Accessible mode ---------- */
.a11y-toggle {
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--text-dim);
  border-radius: 10px; padding: 5px 9px; font-size: 12px; font-weight: 700; cursor: pointer;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  display: inline-flex; align-items: center; justify-content: center;
}
.a11y-toggle:hover { color: var(--text); border-color: var(--text-dim); }
html.a11y .a11y-toggle { background: var(--green); color: #04140a; border-color: var(--green); }

/* ---------- Settings modal ---------- */
.settings-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: overlay-in .2s var(--ease-ios);
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
.settings-card {
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 24px;
  padding: 20px; width: 100%; max-width: 320px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  animation: sheet-in .3s var(--ease-spring);
}
@keyframes sheet-in { from { opacity: 0; transform: scale(.92) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.settings-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.settings-header h3 { margin: 0; font-size: 15px; }
.settings-close { background: none; border: none; color: var(--text-dim); font-size: 16px; cursor: pointer; padding: 4px; }
.settings-close:hover { color: var(--text); }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; cursor: pointer;
}
.settings-row select {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 5px 8px; font-size: 12px;
}
.settings-note { font-size: 11px; color: var(--text-dim); margin: 14px 0 0; line-height: 1.5; }

html.a11y body { font-size: 17px; line-height: 1.6; }
html.a11y { --text-dim: #b7bfd1; }
html.a11y .pct-num, html.a11y .hero-score, html.a11y .stat-row .nums { font-size: 1.15em; }
html.a11y table.matches thead th, html.a11y table.matches td { padding-top: 14px; padding-bottom: 14px; }
html.a11y .btn-detail, html.a11y .tier-tabs button, html.a11y .fav-star { font-size: 1.1em; }
html.a11y .border, html.a11y .table-card, html.a11y .player-card, html.a11y .stat-row .bar-track { border-width: 1.5px; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .page-shell { padding: 0 12px 24px; }
  .topbar { padding: 14px 12px; margin: 0 -12px; flex-wrap: wrap; gap: 8px; }
  .topbar h1 { font-size: 15px; }
  .topbar .meta { gap: 8px; font-size: 11px; flex-wrap: wrap; row-gap: 6px; }
  .badge-league, .badge-location { font-size: 11px; padding: 3px 8px; }
  .badge-league { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; }

  .filterbar { padding: 10px 0; gap: 8px; }
  .search-wrap { min-width: 0; flex: 1 1 100%; order: 1; }
  .filterbar select, .filterbar .fs-select { flex: 1 1 auto; }
  .filterbar .fs-select-trigger { font-size: 12px; padding: 8px; }
  .tier-tabs { order: 2; flex: 1 1 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tier-tabs button { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  .match-count { order: 3; flex: 1 1 100%; text-align: right; }

  table.matches thead th, table.matches td { padding: 9px 10px; font-size: 12px; }
  .col-secondary { display: none; }
  .matchup-team { font-size: 13px; }

  .match-header { padding: 10px 12px; gap: 10px; }
  .live-panel, .stats-panel { padding: 14px; }
  .hero-score { font-size: 40px; }
  .crest { width: 52px; height: 52px; font-size: 24px; }
  .lineup-cols { flex-direction: column; gap: 20px; }
  .lineup-col:first-child { padding-right: 0; border-right: none; border-bottom: 1px solid var(--glass-border); padding-bottom: 20px; }

  /* Bottom tab bar takes over from the horizontal-scrolling sidebar at this
     width — .app-shell/.page-shell get bottom padding so the last card on
     any page isn't hidden underneath the fixed bar. */
  .sidebar { display: none; }
  .bottom-nav { display: flex; }
  .app-main { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

  /* Expanded invisible hit-area (Apple HIG / Material's ~44px touch-target
     minimum) on the two controls whose visible size stays intentionally
     small (a star glyph, a compact icon pill) so the dense table/topbar
     layout doesn't get visually bloated just to satisfy tap-accuracy. */
  .fav-star, .a11y-toggle { position: relative; }
  .fav-star::before, .a11y-toggle::before { content: ''; position: absolute; inset: -13px; }

  /* Settings modal becomes a native-feeling bottom sheet on phone widths
     instead of a centered desktop dialog — edge to edge, slides up from
     the bottom, rounded only on top, with a grabber affordance and clearance
     for the home indicator on notched phones. */
  .settings-overlay { align-items: flex-end; padding: 0; }
  .settings-card {
    max-width: 100%; border-radius: 20px 20px 0 0; position: relative;
    padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    animation: sheet-up-in .32s var(--ease-ios);
  }
  .settings-card::before {
    content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 999px; background: var(--border);
  }
}
@keyframes sheet-up-in { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---------- Error pages ---------- */
.error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.error-card {
  text-align: center; max-width: 380px; padding: 36px 32px; border-radius: 24px;
  background: var(--glass); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  animation: page-in .45s var(--ease-ios);
}
.error-brand-mark { margin: 0 auto 20px; width: 48px; height: 48px; border-radius: 16px; font-size: 17px; }
.error-code { font-family: var(--font-mono); font-size: 56px; font-weight: 800; color: var(--text-dim); line-height: 1; }
.error-title { font-size: 18px; font-weight: 700; margin-top: 10px; }
.error-message { color: var(--text-dim); font-size: 14px; margin-top: 10px; line-height: 1.5; }
.error-home-link { display: inline-block; margin-top: 22px; }

/* ---------- Auth pages (login/register) ---------- */
.auth-title { font-size: 20px; font-weight: 800; margin-top: 4px; }
.auth-subtitle { color: var(--text-dim); font-size: 13px; margin: 6px 0 22px; line-height: 1.5; }
.auth-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.auth-field label {
  display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .04em;
}
.auth-field input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--glass-border); background: var(--panel-2);
  color: var(--text); font-size: 15px; font-family: inherit;
  transition: border-color .2s var(--ease-ios), box-shadow .2s var(--ease-ios);
}
.auth-field input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.auth-submit {
  margin-top: 6px; padding: 13px; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--green), var(--cyan)); color: #04140a;
  font-weight: 800; font-size: 15px; box-shadow: 0 8px 20px -8px rgba(34,197,94,.45);
  font-family: inherit;
}
.auth-submit:active { transform: scale(.97); }
.auth-error {
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: var(--red);
  padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; text-align: left;
}
.auth-switch { margin-top: 20px; font-size: 13px; color: var(--text-dim); }
.auth-switch a { color: var(--green); font-weight: 700; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }