:root {
  color-scheme: light dark;
  /* Sept 24 2026: matched to the RealTimeFam shop's own palette (build_site.py BRANDS["rtf"]["palette"]) */
  --bg: #0d0f12;
  --card: #151920;
  --card-2: #1c222b;
  --border: #252c36;
  --text: #f2f4f7;
  --muted: #96a0ad;
  --accent: #2ee650; /* brand green, matched to the shop's --accent */
  --live: #2ee650;

  /* RealTimeFam brand trio (same hues as the wordmark and the merch) — used for the
     "premium" treatment across the app: card borders/glows, buttons, active states.
     Introduced to replace an earlier off-brand gold accent. */
  --brand-green: #2ee650;
  --brand-blue: #1ea0ff;
  --brand-orange: #ff5a00;

  /* Layered shadow for real depth instead of a flat 1px border — a soft ambient shadow plus
     a tighter contact shadow underneath, the way a physical card sitting slightly above the
     page would actually look. */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.45);
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

/* The `hidden` attribute only carries UA-stylesheet weight (display:none at zero
   specificity), so any class rule that sets display:flex/grid silently un-hides the element
   — the language panel and merch teaser both shipped visible because of exactly this.
   One global guard beats patching it per component (.modal-overlay[hidden] below was the
   first such patch). */
[hidden] { display: none !important; }

/* --- Hero cover (homepage only) ---------------------------------------------------------
   A handful of the sport's most recognizable players as the site's "cover" — see
   home.js COVER_PLAYERS for how each photo was verified before shipping. */
/* No object-fit/max-height cropping here on purpose — this banner packs in flags, crests
   and trophy labels that need to stay fully visible; width:100%/height:auto just scales the
   whole image down proportionally on narrow screens rather than cutting any of it off. */
.brand-banner {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--border);
}

.hero {
  position: relative;
  padding: 2.5rem 1.5rem 2rem;
  /* Soft glow blended from all three RealTimeFam brand colors (matching the wordmark: Real
     green, Time blue, Fam orange), not just blue — this is the very first thing visible on
     the homepage, so it sets the brand tone for the rest of the page. */
  background: radial-gradient(ellipse at top, rgba(57, 255, 20, 0.08), transparent 55%),
    radial-gradient(ellipse at 30% 0%, rgba(0, 174, 255, 0.14), transparent 60%),
    radial-gradient(ellipse at 70% 0%, rgba(255, 90, 0, 0.1), transparent 60%),
    linear-gradient(180deg, #0b0d11, var(--bg));
  border-bottom: 1px solid var(--border);
  text-align: center;
  overflow: hidden;
}

.hero-overlay {
  max-width: 640px;
  margin: 0 auto 1.8rem;
}

.hero-title {
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  /* Green -> blue -> orange, the same three colors as the RealTimeFam wordmark and the
     merch itself, instead of a plain white/blue gradient that didn't match the brand. */
  background: linear-gradient(90deg, #39ff14, #00aeff, #ff5a00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-subtitle {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
}

.hero-cover {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.4rem;
  max-width: 900px;
  margin: 0 auto;
}

.hero-cover-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease;
}

.hero-cover-player:hover {
  transform: translateY(-4px);
}

.hero-cover-player img {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--card);
  border: 2px solid var(--border);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  transition: border-color 0.2s ease;
}

.hero-cover-player:hover img {
  border-color: var(--accent);
}

.hero-cover-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .hero {
    padding: 1.8rem 1rem 1.5rem;
  }
  .hero-cover {
    gap: 0.9rem;
  }
  .hero-cover-player img {
    width: 68px;
    height: 68px;
  }
  .hero-cover-name {
    font-size: 0.65rem;
  }
}

/* Stacks above .topbar (also position:sticky, top:0) — with both stuck at the same offset
   and this one first in the DOM, the browser naturally sticks the topbar right below it
   rather than overlapping, no manual height coordination needed. */
.deadline-banner {
  position: sticky;
  top: 0;
  z-index: 15;
  background: linear-gradient(90deg, #b91c1c, #e05555, #b91c1c);
  background-size: 200% 100%;
  color: white;
  text-align: center;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 0.5rem 1rem;
  animation: deadline-banner-shift 3s linear infinite;
}

@keyframes deadline-banner-shift {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

.topbar-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The source file's solid black backdrop isn't transparent — "screen" blend mode makes pure
   black contribute nothing to the (already near-black) topbar behind it, so only the bright
   fire-colored letters read as visible, instead of a hard rectangular box around the logo.
   Sized well above the wordmark next to it — top-left, first thing in the header, as
   requested — since it's a partner/parent-brand mark rather than the site's own identity. */
.fire-empire-logo {
  height: 60px;
  width: auto;
  mix-blend-mode: screen;
  flex-shrink: 0;
}

.realtimefam-logo {
  height: 44px;
  width: auto;
  flex-shrink: 0;
}

.page-label {
  color: var(--muted);
  font-weight: 600;
  font-size: 1rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--border);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .page-label {
    display: none;
  }
}

@media (max-width: 640px) {
  .fire-empire-logo {
    height: 36px;
  }
  .realtimefam-logo {
    height: 30px;
  }
}

/* Below this width there just isn't room for two logos plus the notification button without
   overlapping — Fire Empire (the secondary/partner mark) drops first so RealTimeFam's own
   identity and the primary action both stay fully legible. */
@media (max-width: 460px) {
  .fire-empire-logo {
    display: none;
  }
  /* Even the wordmark alone doesn't fit next to "Enable notifications" at this width — crop
     to just its icon mark (the logo's leftmost square) via object-fit, the same "full
     logo on desktop, mark-only on mobile" pattern most app headers use. */
  .realtimefam-logo {
    width: 30px;
    height: 30px;
    object-fit: cover;
    object-position: left center;
  }
}

.topbar-title h1 {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* On narrow phones the title + notify button used to wrap onto two cramped lines — shrink
   and truncate instead so the header always stays one clean row. */
@media (max-width: 480px) {
  .topbar {
    padding: 0.8rem 1rem;
    gap: 0.5rem;
  }
  .topbar-title h1 {
    font-size: 0.92rem;
  }
  .notify-btn {
    padding: 0.5rem 0.8rem;
    font-size: 0.78rem;
    white-space: nowrap;
  }
  .topbar-actions {
    gap: 0.4rem;
  }
}

.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(62, 207, 110, 0.6);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(62, 207, 110, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(62, 207, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(62, 207, 110, 0); }
}

.notify-btn {
  background: linear-gradient(90deg, var(--brand-green), var(--brand-blue) 50%, var(--brand-orange));
  color: #0b0d12;
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 174, 255, 0.35);
  transition: transform 0.2s var(--ease-lux), box-shadow 0.2s var(--ease-lux);
}

.notify-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 174, 255, 0.5);
}

.notify-btn:disabled {
  background: var(--border);
  color: var(--muted);
  cursor: default;
}

.mode-banner {
  background: #3a2f10;
  color: #f0c766;
  padding: 0.6rem 1.5rem;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/* --- Main section tabs (Scores / News / Store) -----------------------------------------
   The site's primary navigation — three real destinations, not a hidden menu. Sticky right
   below the topbar (see the .deadline-banner comment above for why stacking two top:0 sticky
   siblings in DOM order just works without manual height math). Gold is used nowhere else in
   the UI, so the active tab's underline reads as a clear "you are here" without competing
   with the blue accent used for links/buttons everywhere else. */
.main-tabs {
  position: sticky;
  top: 0;
  z-index: 9;
  display: flex;
  background: linear-gradient(180deg, var(--card), var(--bg));
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem;
}

.main-tab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.25rem;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.main-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
}

.main-tab.active {
  color: #ff5a00;
  border-bottom-color: #ff5a00;
}

@media (max-width: 480px) {
  .main-tabs {
    padding: 0 0.5rem;
  }
  .main-tab {
    flex: 1;
    justify-content: center;
    padding: 0.7rem 0.5rem;
    font-size: 0.82rem;
  }
}

/* .page-layout / .feed once shared a two-column layout with .sidebar (news feed + dashboard
   side by side); the homepage is dashboard-only now and the feed lives standalone on
   news.html, so each gets its own single-column centering wrapper instead. */
.page-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.feed {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.feed-standalone {
  max-width: 700px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

.dashboard-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0.5rem 1rem 4rem;
}

.sidebar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem;
}

.mobile-view-switcher {
  display: none;
}

@media (max-width: 880px) {
  .page-layout {
    flex-direction: column;
  }
  .feed,
  .sidebar {
    max-width: 100%;
    width: 100%;
  }
  .sidebar {
    position: static;
    max-height: none;
  }

  .mobile-view-switcher {
    display: flex;
    gap: 0.5rem;
    margin: 0 auto 1rem;
    max-width: 640px;
    padding: 0 1rem;
  }
  .mobile-view-btn {
    flex: 1;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--muted);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
  }
  .mobile-view-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  .page-layout[data-mobile-view="feed"] .sidebar {
    display: none;
  }
  .page-layout[data-mobile-view="sidebar"] .feed {
    display: none;
  }

  /* Full-screen feel for the sidebar on mobile: drop the boxed card look and let it
     use the whole viewport width instead of looking like a widget squeezed into a panel. */
  .page-layout[data-mobile-view="sidebar"] .sidebar {
    border: none;
    border-radius: 0;
    padding: 0.75rem 0.5rem;
    background: transparent;
  }

  /* Collapse the multi-column tables into stacked cards — a 5-6 column table forced into
     a narrow phone screen otherwise requires horizontal scrolling to read every field. */
  .transfers-table thead {
    display: none;
  }
  .transfers-table,
  .transfers-table tbody,
  .transfers-table tr,
  .transfers-table td {
    display: block;
    width: 100%;
  }
  .transfers-table tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
    margin-bottom: 0.6rem;
    background: var(--card);
  }
  .transfers-table td {
    border-bottom: none;
    padding: 0.3rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
  }
  .transfers-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
  }
  .transfers-table td[data-label="Player"] {
    font-weight: 700;
    font-size: 1rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
    margin-bottom: 0.3rem;
  }
}

.empty-state {
  color: var(--muted);
  text-align: center;
  margin-top: 3rem;
}

.post-card {
  background: linear-gradient(165deg, var(--card-2), var(--card) 55%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-card);
  animation: fade-in 0.45s var(--ease-lux);
  transition: transform 0.22s var(--ease-lux), border-color 0.22s var(--ease-lux), box-shadow 0.22s var(--ease-lux);
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(0, 174, 255, 0.35);
}

.post-card:hover {
  transform: translateY(-2px);
  border-color: #3a3f4a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.post-card-summary {
  border-left: 3px solid var(--accent);
  background: linear-gradient(180deg, rgba(29, 155, 240, 0.07), transparent 40%), var(--card);
}

/* Confirmed/"here we go" deals: a one-time light sweep on arrival plus a lasting gold
   glow, so completed transfers read as bigger news than rumors without animating forever. */
.post-card-confirmed {
  border: 1px solid #f0c766;
  background: linear-gradient(180deg, rgba(240, 199, 102, 0.12), transparent 45%), var(--card);
  box-shadow: 0 0 24px rgba(240, 199, 102, 0.22);
  position: relative;
  overflow: hidden;
}

/* Overrides the generic .post-card:hover shadow so hovering a confirmed deal intensifies
   its gold glow instead of replacing it with the plain hover shadow. */
.post-card-confirmed:hover {
  box-shadow: 0 8px 28px rgba(240, 199, 102, 0.32);
}

/* A brand new confirmed deal streaming in live (see app.js renderPost's `prepend` param)
   gets a bigger, one-time moment than a confirmed card simply scrolled past on page load —
   a quick scale pop plus a wider gold ring pulse that settles into the normal steady glow. */
.post-card-confirmed-live {
  animation: confirmed-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes confirmed-pop {
  0% { transform: scale(0.97); box-shadow: 0 0 0 rgba(240, 199, 102, 0); }
  40% { transform: scale(1.015); box-shadow: 0 0 42px rgba(240, 199, 102, 0.55); }
  100% { transform: scale(1); box-shadow: 0 0 24px rgba(240, 199, 102, 0.22); }
}

.post-card-confirmed::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: shine-sweep 1.6s ease-in-out 1;
  pointer-events: none;
}

@keyframes shine-sweep {
  0% { left: -150%; }
  100% { left: 150%; }
}

.confirmed-tag {
  display: inline-block;
  background: linear-gradient(90deg, #f0c766, #ffe27a);
  color: #1a1508;
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-right: 0.4rem;
  box-shadow: 0 0 10px rgba(240, 199, 102, 0.5);
}

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

.post-meta {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.78rem;
  margin-bottom: 0.5rem;
}

.mock-tag {
  background: #4a3b12;
  color: #f0c766;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  margin-right: 0.4rem;
}

.romano-tag {
  background: #1d3a2f;
  color: #3ecf6e;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  margin-right: 0.4rem;
}

.romano-tag-exclusive {
  background: #3a2f10;
  color: #f0c766;
}

.romano-tag-newsletter {
  background: #1d2f3a;
  color: #66b8f0;
}

.source-tag {
  color: var(--text);
  font-weight: 600;
}

.post-title {
  margin: 0 0 0.35rem;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.38;
}

.post-text {
  margin: 0;
  line-height: 1.48;
  color: var(--muted);
}

.summary-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
  margin-bottom: 0.3rem;
}

.post-summary {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text);
}

.player-name {
  color: var(--live);
  font-weight: 700;
}

.team-name {
  font-weight: 600;
}

.team-name-a {
  color: #f0a15c;
}

.team-name-b {
  color: #b98cf0;
}

.amount {
  color: #5ce1e6;
  font-weight: 600;
}

.enrichment-line {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
  font-size: 0.8rem;
  color: var(--muted);
}

.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.post-link {
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.85rem;
}

.post-share-btn {
  flex: 0 0 auto;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.post-share-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.share-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 12px);
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
}

.share-toast-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.shared-post-marker {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: -0.4rem;
}

.post-card-shared-highlight {
  animation: shared-highlight-fade 2.4s ease;
}

@keyframes shared-highlight-fade {
  0% { box-shadow: 0 0 0 3px var(--accent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* --- Sports sidebar --------------------------------------------------------------- */

.sidebar-notice {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}

.sidebar-notice strong {
  color: var(--text);
}

.sidebar-notice code {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  font-size: 0.82em;
}

.sidebar-loading,
.sidebar-empty {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem 0;
}

.sidebar-muted {
  color: var(--muted);
  font-size: 0.85em;
}

.league-chips {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.6rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.league-chip {
  flex: 0 0 auto;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.league-chip:hover {
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-1px);
}

.league-chip.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.league-chip.active:hover {
  transform: none;
}

.sidebar-tabs,
.fixture-range-tabs {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
}

.sidebar-tab,
.range-tab {
  flex: 1;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.3rem;
  font-size: 0.76rem;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.sidebar-tab:hover,
.range-tab:hover {
  color: var(--text);
}

.sidebar-tab.active,
.range-tab.active {
  background: var(--card);
  color: var(--text);
  border-color: var(--accent);
}

.standings-table,
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.standings-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  padding: 0.3rem 0.25rem;
  border-bottom: 1px solid var(--border);
}

.standings-table td {
  padding: 0.35rem 0.25rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s ease;
}

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

.standings-form {
  white-space: nowrap;
}

.form-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 800;
  margin-right: 2px;
  color: white;
}

.form-w { background: #2e9e5b; }
.form-d { background: #6b7280; }
.form-l { background: #c0392b; }
.form-x { background: var(--border); color: var(--muted); }

@media (max-width: 640px) {
  /* The full 6-column table (with GD + Form both spelled out) doesn't fit a phone screen —
     drop GD first since points/form tell the more useful story at a glance. */
  .standings-table th:nth-child(4),
  .standings-table td:nth-child(4) {
    display: none;
  }
}

.standings-team {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scorers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: scorer;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.scorers-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  counter-increment: scorer;
}

.scorers-list li::before {
  content: counter(scorer);
  color: var(--muted);
  width: 1.2rem;
  flex: 0 0 auto;
}

.scorer-name {
  flex: 1;
  font-weight: 600;
}

.scorer-team {
  color: var(--muted);
  font-size: 0.85em;
}

.scorer-goals {
  font-weight: 700;
  color: var(--live);
}

.fixtures-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fixture-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  width: 100%;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.fixture-card:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: #1e2836;
}

.fixture-live {
  border-color: #e05555;
}

.fixture-live:hover {
  border-color: #e05555;
  background: #2a1c1c;
}

.fixture-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.live-dot-small {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e05555;
  animation: pulse 1.5s infinite;
}

.fixture-teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  gap: 0.4rem;
}

.fixture-teams span:first-child,
.fixture-teams span:last-child {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fixture-score {
  font-weight: 700;
  flex: 0 0 auto;
  display: inline-block;
}

/* Applied for one refresh cycle (see sports.js refreshLiveNow's lastKnownScores tracking)
   when a live fixture's score changes since the previous poll, so a goal is noticeable
   without having to stare at the sidebar waiting for a number to update silently. */
.fixture-score-flash {
  animation: score-flash 1.1s ease;
}

@keyframes score-flash {
  0% { transform: scale(1); color: inherit; text-shadow: none; }
  25% { transform: scale(1.4); color: var(--live); text-shadow: 0 0 14px rgba(62, 207, 110, 0.8); }
  100% { transform: scale(1); color: inherit; text-shadow: none; }
}

.fixture-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fixture-modal.hidden {
  display: none;
}

.fixture-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.fixture-modal-panel {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 560px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.25rem;
}

.fixture-modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.fixture-modal-body h3 {
  margin: 0 0 0.75rem;
}

.fixture-modal-body h4 {
  font-size: 0.85rem;
  color: var(--accent);
  margin: 1.1rem 0 0.5rem;
}

.highlight-embed iframe {
  border-radius: 8px;
  display: block;
}

.events-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
}

.event-minute {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-right: 0.3rem;
}

.lineups-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.lineup-team h4 {
  margin: 0 0 0.4rem;
}

.lineup-players {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  line-height: 1.6;
}

.stats-table td {
  padding: 0.3rem 0.4rem;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--border);
}

.stat-type {
  color: var(--muted);
  text-align: center;
}

/* --- Sidebar mode switcher (Live Scores / Here We Go) ------------------------------ */

.mode-switcher {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.mode-btn {
  flex: 1;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-lux), color 0.2s var(--ease-lux), background 0.2s var(--ease-lux);
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.mode-btn:hover {
  color: var(--text);
  border-color: #3a3f4a;
}

.mode-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.mode-btn.active:hover {
  color: white;
}

/* --- Here We Go transfers table ----------------------------------------------------- */

.transfer-filters {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.transfer-filters select,
.transfer-filters input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  font-size: 0.8rem;
  font-family: inherit;
}

#transfers-summary {
  font-size: 0.78rem;
  margin-bottom: 0.6rem;
}

.transfers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
}

.transfers-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  padding: 0.3rem 0.3rem;
  border-bottom: 1px solid var(--border);
}

.transfers-table td {
  padding: 0.4rem 0.3rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  transition: background 0.12s ease;
}

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

.transfers-table a {
  color: var(--accent);
  text-decoration: none;
}

.uncertain-flag {
  cursor: help;
  color: #f0c766;
}

.deal-type-tag {
  display: inline-block;
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
}

.deal-type-permanent {
  background: #1d3a2f;
  color: #3ecf6e;
}

.deal-type-loan {
  background: #1d2f3a;
  color: #66b8f0;
}

.deal-type-contract {
  background: #3a2f10;
  color: #f0c766;
}

/* --- Highlights discoverability hint on finished fixture cards ---------------------- */

.highlights-hint {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
}

.friendly-tag {
  display: inline-block;
  margin-top: 0.25rem;
  background: var(--border);
  color: var(--muted);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  font-size: 0.68rem;
}

/* --- Matches screen (day-by-day) --------------------------------------------------------- */

.live-count-badge,
.date-chip-live {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(224, 85, 85, 0.18);
  color: #ff6b6b;
  font-size: 0.68rem;
  font-weight: 800;
  vertical-align: middle;
}

.date-strip {
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  padding: 0.2rem 0 0.7rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}

.date-strip::-webkit-scrollbar {
  display: none;
}

.date-chip {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s ease, background 0.12s ease;
}

.date-chip:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.date-chip.active {
  color: var(--text);
  background: rgba(255, 90, 0, 0.14);
  box-shadow: inset 0 -2px 0 #ff5a00;
}

.league-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 0.8rem;
  overflow: hidden;
}

.league-group-following {
  border-color: #ff5a00;
}

.league-group-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.league-group.collapsed .league-group-header {
  border-bottom: none;
}

.league-group.collapsed .league-group-body {
  display: none;
}

.league-flag {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}

.league-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 0;
  background: white;
  padding: 1px;
}

.league-flag-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  font-size: 0.9rem;
}

.league-group-name {
  flex: 1;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

.league-group-toggle {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
}

/* A match row: [status] [home name + crest] [score / time] [crest + away name]. Reuses
   .fixture-card so the existing click-to-open-detail wiring works unchanged. */
.match-row {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  margin: 0;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}

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

.match-row:hover {
  background: rgba(255, 255, 255, 0.035);
  transform: none;
}

.match-row.fixture-live {
  box-shadow: inset 3px 0 0 #e05555;
}

.match-status {
  display: flex;
  justify-content: center;
}

.match-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.match-pill-live {
  background: rgba(224, 85, 85, 0.18);
  color: #ff6b6b;
}

.match-team {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.92rem;
}

.match-home {
  justify-content: flex-end;
  text-align: right;
}

.match-away {
  justify-content: flex-start;
}

.match-team-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-winner {
  font-weight: 800;
}

.match-team .team-logo-sm {
  width: 22px;
  height: 22px;
  margin: 0;
}

.match-center {
  min-width: 3.4rem;
  text-align: center;
}

.match-score {
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.match-time {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--muted);
}

@media (max-width: 480px) {
  .match-row {
    grid-template-columns: 2.2rem 1fr auto 1fr;
    padding: 0.7rem 0.6rem;
  }
  .match-team {
    font-size: 0.85rem;
  }
}

/* --- Bottom tab bar (mobile, FotMob-style) ------------------------------------------------ */

.bottom-tabs {
  display: none;
}

@media (max-width: 880px) {
  .main-tabs {
    display: none;
  }
  body {
    padding-bottom: 92px;
  }
  .bottom-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(15, 17, 21, 0), rgba(15, 17, 21, 0.92) 40%);
    pointer-events: none;
  }
  .bottom-tabs-pill,
  .bottom-tab-store {
    pointer-events: auto;
    background: rgba(30, 33, 40, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
  .bottom-tabs-pill {
    flex: 1;
    max-width: 440px;
    display: flex;
    justify-content: space-around;
    border-radius: 999px;
    padding: 0.3rem;
  }
  .bottom-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    flex: 1;
    padding: 0.45rem 0.2rem;
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 700;
  }
  .bottom-tab-icon {
    font-size: 1.15rem;
    line-height: 1;
  }
  .bottom-tab.active {
    color: #ff5a00;
    background: rgba(255, 90, 0, 0.12);
  }
  .bottom-tab-store {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    text-decoration: none;
    flex-shrink: 0;
  }
}

/* --- Club page: Table + Stats tabs -------------------------------------------------------- */

.standings-table tr.standings-row-me td {
  background: rgba(255, 90, 0, 0.12);
  font-weight: 700;
}

.club-table-league {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0 0.7rem;
}

.club-table-league-link {
  width: auto;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}

.club-stats-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.2rem 0 0.9rem;
  font-size: 0.92rem;
  color: var(--muted);
}

.club-stats-rank {
  font-size: 1.6rem;
  font-weight: 900;
  color: #ff5a00;
}

.club-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 0.5rem;
}

.club-stat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.6rem 0.4rem;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
}

.club-stat-value {
  font-size: 1.15rem;
  font-weight: 900;
}

.club-stat-label {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
}

/* --- News screen: tabs, hero cards, top transfers ------------------------------------------ */

.news-tabs {
  display: flex;
  gap: 0.2rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.2rem 1.5rem 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.news-tabs::-webkit-scrollbar {
  display: none;
}

.news-tab {
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  font-size: 1rem;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.news-tab.active {
  color: var(--text);
  box-shadow: inset 0 -3px 0 #ff5a00;
  border-radius: 0;
}

.post-hero {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  background: var(--bg);
  border-radius: 14px;
  overflow: hidden;
}

.post-hero-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.08), transparent 70%), #1d2027;
  padding: 14%;
}

.post-hero-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

.post-hero-photo-tile {
  padding: 0;
}

.post-hero-photo-tile img {
  object-fit: cover;
  filter: none;
}

/* Lead story: big hero on top. Compact stories: thumbnail on the left, text on the right. */
.post-card-lead .post-hero {
  margin-bottom: 0.9rem;
  max-height: 340px;
}

.post-card-lead .post-hero-tile {
  aspect-ratio: auto;
  height: 240px;
}

.post-card-compact {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0.9rem;
  align-items: start;
}

.post-card-compact .post-hero {
  width: 96px;
  border-radius: 10px;
}

.post-card-compact .post-hero-tile {
  padding: 12%;
}

.post-card-compact .post-title {
  font-size: 0.98rem;
}

.post-card-compact .post-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-meta time {
  color: var(--muted);
}

.top-transfers {
  max-width: 1100px;
  margin: 0 auto 0.5rem;
  padding: 0 1.5rem;
}

.top-transfers-strip {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}

.top-transfers-strip::-webkit-scrollbar {
  display: none;
}

.top-transfer-card {
  flex: 0 0 auto;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.85rem;
  border-radius: 14px;
  background: linear-gradient(165deg, var(--card-2), var(--card) 60%);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: border-color 0.22s var(--ease-lux), transform 0.22s var(--ease-lux), box-shadow 0.22s var(--ease-lux);
}

.top-transfer-card:hover {
  border-color: #ff5a00;
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.top-transfer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.4rem;
}

.top-transfer-name {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-size: 0.95rem;
}

.top-transfer-name strong {
  font-size: 1.05rem;
}

.top-transfer-date {
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
}

.top-transfer-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.top-transfer-clubs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.top-transfer-clubs img,
.top-transfer-unknown {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.top-transfer-unknown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  font-weight: 800;
}

.top-transfer-arrow {
  color: #2ecc71;
  font-weight: 900;
}

.top-transfer-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
}

@media (max-width: 640px) {
  .news-tabs,
  .top-transfers {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .post-card-lead .post-hero-tile {
    height: 170px;
  }
  .post-card-compact {
    grid-template-columns: 76px 1fr;
    gap: 0.7rem;
  }
  .post-card-compact .post-hero {
    width: 76px;
  }
}

/* --- Leagues screen (list, league page, stat cards) --------------------------------------- */

.league-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.4rem 0 1rem;
}

.league-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: linear-gradient(165deg, var(--card-2), var(--card) 60%);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s var(--ease-lux), background 0.2s var(--ease-lux), transform 0.2s var(--ease-lux), box-shadow 0.2s var(--ease-lux);
}

.league-row:hover {
  border-color: #ff5a00;
  transform: translateX(3px);
  box-shadow: var(--shadow-card-hover);
}

.league-row.active {
  border-color: #ff5a00;
  background: rgba(255, 90, 0, 0.08);
}

.league-row-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  background: white;
  border-radius: 50%;
  padding: 3px;
  flex-shrink: 0;
}

.league-row-name {
  flex: 1;
}

.league-row-arrow {
  color: var(--muted);
}

.league-logo-sm {
  width: 18px;
  height: 18px;
  object-fit: contain;
  background: white;
  border-radius: 50%;
  padding: 2px;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.picked-league-panel {
  margin-bottom: 1.2rem;
  padding: 1rem;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
}

.picked-league-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.8rem;
}

.picked-league-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: white;
  border-radius: 50%;
  padding: 5px;
}

.picked-league-title strong {
  font-size: 1.35rem;
  font-weight: 900;
}

.table-mode-toggle {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.2rem;
  margin: 0.2rem 0 0.7rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.table-mode-btn {
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
}

.table-mode-btn.active {
  background: rgba(255, 90, 0, 0.16);
  color: #ff5a00;
}

/* Zone bars (Champions League / Europa / Conference / relegation) on the table's left edge */
.standings-table tbody tr td:first-child {
  border-left: 3px solid transparent;
  padding-left: 0.45rem;
}

.standings-table tr.zone-ucl td:first-child { border-left-color: #2ecc71; }
.standings-table tr.zone-uel td:first-child { border-left-color: #3b82f6; }
.standings-table tr.zone-uecl td:first-child { border-left-color: #14b8a6; }
.standings-table tr.zone-promo td:first-child { border-left-color: #f59e0b; }
.standings-table tr.zone-rel td:first-child { border-left-color: #ef4444; }

.standings-table-full {
  font-size: 0.78rem;
}

@media (max-width: 640px) {
  /* Full view has too many columns for a phone: drop W/D/L, keep +/- GD PTS */
  .standings-table-full th:nth-child(4),
  .standings-table-full td:nth-child(4),
  .standings-table-full th:nth-child(5),
  .standings-table-full td:nth-child(5),
  .standings-table-full th:nth-child(6),
  .standings-table-full td:nth-child(6) {
    display: none;
  }
}

.day-group {
  margin-bottom: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  overflow: hidden;
}

.day-group-title {
  padding: 0.7rem 0.9rem;
  font-weight: 800;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border);
}

.stat-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(165deg, var(--card-2), var(--bg) 60%);
  padding: 0.8rem 0.9rem;
  margin-bottom: 0.8rem;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s var(--ease-lux), box-shadow 0.2s var(--ease-lux);
}

.stat-card:hover {
  border-color: rgba(0, 174, 255, 0.3);
}

.stat-card-title {
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

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

.stat-row-photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--card);
  flex-shrink: 0;
}

.stat-row-photo-empty {
  display: inline-block;
}

.stat-row-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stat-row-label strong {
  font-size: 0.92rem;
}

.stat-row-sub {
  font-size: 0.74rem;
  color: var(--muted);
}

.stat-row-value {
  font-weight: 800;
  font-size: 0.95rem;
  min-width: 2.4rem;
  text-align: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}

.stat-row-value-top {
  background: #c0392b;
  color: white;
}

.stat-card-toggle {
  margin-top: 0.4rem;
  background: none;
  border: none;
  color: #ff5a00;
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.3rem 0;
}

/* --- Following cards (FotMob-style colored team cards) ---------------------------------- */

.following-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.follow-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 168px;
  padding: 0.9rem;
  border-radius: 16px;
  color: white;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* Glossy diagonal sheen over whichever solid brand shade the JS sets as
     background-color, plus a soft ambient shadow — a flat color card read as cheap;
     this reads as an actual physical trading-card surface catching light. */
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 45%, rgba(0, 0, 0, 0.18));
  box-shadow: var(--shadow-card);
  transition: transform 0.25s var(--ease-lux), box-shadow 0.25s var(--ease-lux);
  text-align: left;
}

.follow-card:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: var(--shadow-card-hover);
}

.follow-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.follow-card-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.follow-card-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.follow-card-btn {
  background: rgba(0, 0, 0, 0.28);
  border: none;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.12s ease, background 0.12s ease;
}

.follow-card-btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.45);
}

.follow-bell.on {
  background: rgba(255, 90, 0, 0.9);
  color: #1a1400;
  opacity: 1;
}

.follow-card-primary {
  color: #ffd75e;
  font-size: 1rem;
  padding: 0 0.25rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.follow-card-name {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.follow-card-next {
  margin-top: auto;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0.95;
}

.follow-card-venue {
  margin-right: 0.2rem;
}

.follow-card-time {
  font-weight: 500;
  opacity: 0.85;
}

.follow-card-add {
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  background: var(--card);
  border: 1px dashed var(--border);
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  box-shadow: none;
}

.follow-card-add:hover {
  color: #ff5a00;
  border-color: #ff5a00;
}

.follow-card-add-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.following-picker {
  margin-bottom: 1rem;
  padding: 0.9rem;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.myclub-primary-tag {
  font-size: 0.7rem;
  font-weight: 800;
  color: #ff5a00;
  margin-left: 0.4rem;
  vertical-align: middle;
}

@media (max-width: 480px) {
  .following-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
  .follow-card {
    min-height: 150px;
    padding: 0.75rem;
  }
  .follow-card-name {
    font-size: 1.05rem;
  }
}

/* --- My Club ------------------------------------------------------------------------------ */

.myclub-section {
  border: 1px solid #ff5a00;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.2rem;
  background: linear-gradient(135deg, rgba(255, 90, 0, 0.08), transparent 55%), var(--card);
}

.myclub-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.myclub-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.myclub-title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 140px;
}

.myclub-title strong {
  font-size: 1.1rem;
}

.myclub-position {
  font-size: 0.8rem;
  color: #ff5a00;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.myclub-reminder {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
}

/* .mode-btn defaults to flex:1 (from the old mode switcher) — as a compact "Change" button
   inside the header row it should hug its label, not stretch across the remaining width. */
.myclub-header .mode-btn {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
}

.myclub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

@media (max-width: 640px) {
  .myclub-grid {
    grid-template-columns: 1fr;
  }
}

.myclub-news-row {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--text);
}

.myclub-news-row:hover {
  color: #ff5a00;
}

.myclub-news-time {
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

/* --- Injuries tab ---------------------------------------------------------------------- */

.injury-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

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

.injury-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
}

.injury-reason {
  font-size: 0.78rem;
  color: var(--muted);
}

.injury-date {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}

/* --- Head-to-head (Compare) tab --------------------------------------------------------- */

.h2h-tally {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.h2h-tally-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
}

.h2h-tally-item strong {
  font-size: 1.6rem;
  color: #ff5a00;
}

.h2h-tally-item span {
  font-size: 0.72rem;
  color: var(--muted);
  max-width: 90px;
}

/* --- Clubs mode ---------------------------------------------------------------------- */

.club-search-input {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  font-size: 0.8rem;
  font-family: inherit;
  margin: 0.6rem 0;
}

#club-search-results {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}

.club-search-result {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.club-detail-title {
  margin: 0.8rem 0 0.6rem;
  font-size: 1rem;
}

/* --- Logos / photos (licensed API-Football media, not scraped) ---------------------- */

.team-logo-sm {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: -3px;
  margin-right: 0.35rem;
}

.player-photo-sm {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 0.4rem;
  vertical-align: -6px;
  background: var(--border);
}

.post-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.player-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  margin-top: 0.1rem;
  background: var(--border);
  border: 1px solid var(--border);
}

/* --- Featured highlights strip (main page) ------------------------------------------ */

.featured-highlights {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem 0;
}

.featured-highlights-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 0.8rem;
  color: var(--text);
}

/* Grouped by competition (server tags each highlight with its league) instead of one flat
   strip — reads as distinct collections rather than an undifferentiated mix once the
   big-clubs list spans 10+ leagues. */
.highlights-collection {
  margin-bottom: 1.3rem;
}

.highlights-collection-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin: 0 0 0.6rem;
}

.featured-highlights-strip {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.highlight-card {
  position: relative;
  flex: 0 0 auto;
  width: 320px;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

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

.highlight-card-playing {
  cursor: default;
}

.highlight-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.highlight-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.highlight-teams {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.88), transparent);
  color: white;
  font-size: 0.82rem;
  padding: 0.5rem 0.6rem;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.live-now-league {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0.6rem 0 0.2rem;
}

.live-now-league:first-child {
  margin-top: 0;
}

/* Clickable league header (Live Now / Upcoming — Big Clubs) — jumps to that league's table.
   Gold on hover for a small VIP touch without re-theming the whole accent color. */
.live-now-league-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: color 0.15s ease;
}

.live-now-league-link:hover,
.live-now-league-link:focus-visible {
  color: #ff5a00;
}

.live-now-league-arrow {
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform: translateX(-2px);
}

.live-now-league-link:hover .live-now-league-arrow,
.live-now-league-link:focus-visible .live-now-league-arrow {
  opacity: 1;
  transform: translateX(0);
}

.nationality-text {
  color: #66d9c9;
  font-weight: 600;
}

/* --- Language switcher ------------------------------------------------------------------ */

.lang-switcher {
  position: relative;
  display: flex;
  align-items: center;
}

.lang-switcher-btn {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lang-switcher-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 160px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.4rem;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: var(--text);
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.lang-option:hover {
  background: rgba(255, 255, 255, 0.05);
}

.lang-option.active {
  color: #ff5a00;
  font-weight: 700;
}

/* --- Notification club preferences ---------------------------------------------------- */

.notify-area {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.notify-prefs-btn {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1rem;
  cursor: pointer;
}

.notify-prefs-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 260px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.notify-prefs-title {
  margin: 0 0 0.5rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--muted);
}

.notify-club-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  padding: 0.25rem 0;
  cursor: pointer;
}

.notify-clubs-list {
  max-height: 220px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  margin-top: 0.4rem;
  padding-top: 0.4rem;
}

.notify-prefs-save {
  width: 100%;
  margin-top: 0.6rem;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.5rem;
  font-weight: 600;
  cursor: pointer;
}

/* --- Search ---------------------------------------------------------------------------- */

.search-row {
  max-width: 1100px;
  margin: 1rem auto 0;
  padding: 0 1rem;
  display: flex;
  gap: 0.5rem;
}

.search-input {
  flex: 1;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  font-family: inherit;
}

.search-clear {
  background: var(--card);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 0.9rem;
  cursor: pointer;
}

/* --- Player profile modal --------------------------------------------------------------- */

.player-name,
.player-avatar,
.player-photo-sm,
.player-photo-lazy,
.player-name-link {
  cursor: pointer;
}

.player-name-link {
  color: inherit;
  text-decoration: none;
}

.player-name-link:hover,
.player-name:hover {
  text-decoration: underline;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 100;
}

/* A plain class selector ties in specificity with the UA default `[hidden] { display:
   none }` rule, and ours loads later — so without this, the overlay stays visible (and
   blocks every click on the page) even while marked hidden. */
.modal-overlay[hidden] {
  display: none;
}

.modal-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}

.player-modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.player-modal-photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
  border: 2px solid var(--border);
}

.player-modal-name {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.player-modal-meta {
  color: var(--muted);
  font-size: 0.85rem;
}

.player-modal-club {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
  font-size: 0.85rem;
}

.player-modal-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 1rem 0;
}

.player-modal-stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.3rem;
  text-align: center;
}

.player-modal-stat strong {
  display: block;
  font-size: 1.15rem;
}

.player-modal-stat span {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.player-modal-section-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 1rem 0 0.4rem;
}

.player-modal-transfer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.player-modal-transfer-row:last-child {
  border-bottom: none;
}

.player-modal-bio {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.player-modal-injured {
  color: #e05555;
}

.player-modal-career-row {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}

.player-modal-career-row:last-child {
  border-bottom: none;
}

.player-modal-career-season {
  color: var(--muted);
  font-weight: 600;
}

.player-modal-career-club {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-modal-career-stats {
  color: var(--muted);
  white-space: nowrap;
  font-size: 0.78rem;
}

/* --- Skeleton loading states ------------------------------------------------------------
   Replaces plain "Loading…" text with placeholder shapes matching the real content's
   layout, so the page has something to look at (and doesn't visually jump as much once
   real content swaps in) during the gap before the first fetch resolves. */

.skeleton-line {
  height: 0.85rem;
  border-radius: 4px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}

.skeleton-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.skeleton-post {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.skeleton-post .skeleton-line:nth-child(1) { width: 30%; height: 0.7rem; }
.skeleton-post .skeleton-line:nth-child(2) { width: 85%; height: 1.05rem; margin-top: 0.2rem; }
.skeleton-post .skeleton-line:nth-child(3) { width: 95%; }
.skeleton-post .skeleton-line:nth-child(4) { width: 60%; }

.skeleton-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.skeleton-row .skeleton-line {
  flex: 1;
}

.skeleton-row .skeleton-line:first-child {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
}

/* --- Pinned Fabrizio Romano section (main page, above the general feed) ---------------- */

.romano-pinned {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem 0;
}

.romano-pinned-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 0.8rem;
  color: #f0c766;
}

.romano-pinned-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.romano-pinned-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(29, 155, 240, 0.09), transparent 30%), var(--card);
  border: 1px solid var(--accent);
  border-radius: 12px;
  animation: fade-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.romano-pinned-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(29, 155, 240, 0.18);
}

.romano-pinned-card-confirmed {
  border-color: #f0c766;
  background: linear-gradient(180deg, rgba(240, 199, 102, 0.16), transparent 30%), var(--card);
  box-shadow: 0 0 24px rgba(240, 199, 102, 0.22);
}

.romano-pinned-card-confirmed:hover {
  box-shadow: 0 10px 30px rgba(240, 199, 102, 0.3);
}

/* Small inline avatar next to the headline — a safely-resolved player photo (see
   loadPlayerPhoto's nationality cross-check), never a generic or guessed image. Absent
   entirely (see wireRomanoPinnedPhotos in home.js) rather than risk showing the wrong
   person, so cards without one just skip straight to the text. Sized to match the regular
   news feed's .player-avatar — a wall of big block photos ate far more space than the
   actual story text did, so this reads as a small badge, not a headline image. */
.romano-pinned-photo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  margin-top: 0.1rem;
  background: var(--border);
  border: 1px solid var(--border);
  display: block;
}

/* Fallback when no player photo could be safely resolved — a club crest instead, at the
   same small size. */
.romano-pinned-photo-crest {
  object-fit: contain;
  padding: 3px;
  background: var(--bg);
}

.romano-pinned-content {
  padding: 0.8rem 1rem 0.9rem;
}

.romano-pinned-content .post-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.3rem;
}

.romano-pinned-content .post-title {
  font-size: 1rem;
}

/* --- Sports dashboard (always-visible sections, no tab-hiding) ------------------------- */

.dashboard-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 0.4rem;
  background: var(--card);
  padding: 0.5rem;
  margin: -1rem -1rem 1rem;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.dashboard-nav-link {
  flex: 0 0 auto;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.12s ease, background 0.12s ease;
}

.dashboard-nav-link:hover {
  color: var(--text);
  background: var(--bg);
}

.dashboard-section {
  margin-bottom: 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 3rem;
}

.dashboard-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.dashboard-section-title {
  font-size: 0.95rem;
  margin: 0 0 0.7rem;
}

.dashboard-section-title-sub {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}

.on-this-day-section {
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.on-this-day-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0;
  font-size: 0.85rem;
  cursor: pointer;
}

.on-this-day-year {
  font-weight: 800;
  color: #ff5a00;
  flex-shrink: 0;
}

.dashboard-subtitle {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
  margin: 1rem 0 0.5rem;
}

/* --- Top Performers strip -------------------------------------------------------------- */

.performers-strip {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.performer-card {
  position: relative;
  flex: 0 0 auto;
  width: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  padding: 1.1rem 0.7rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(165deg, var(--card-2), var(--card) 60%);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform 0.22s var(--ease-lux), border-color 0.22s var(--ease-lux), box-shadow 0.22s var(--ease-lux);
}

.performer-card:hover {
  transform: translateY(-4px);
  border-color: #ff5a00;
  box-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(255, 90, 0, 0.25);
}

.performer-rank {
  position: absolute;
  top: -8px;
  left: -8px;
  background: #ff5a00;
  color: #1a1400;
  font-weight: 800;
  font-size: 0.72rem;
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.performer-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
}

.performer-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.performer-name {
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.2;
}

.performer-club {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.performer-league {
  font-size: 0.66rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.performer-goals {
  font-weight: 800;
  color: #ff5a00;
  font-size: 0.95rem;
}

.performer-goals small {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.62rem;
  text-transform: uppercase;
}

/* --- Merch teaser (Store cross-promo) ---------------------------------------------------- */

.merch-teaser {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  border: 1px solid #ff5a00;
  background: linear-gradient(90deg, rgba(255, 90, 0, 0.12), transparent 60%), var(--card);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.merch-teaser:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 90, 0, 0.18);
}

.merch-teaser-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.merch-teaser-photo {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 90, 0, 0.4);
}

.merch-teaser-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.merch-teaser-text strong {
  color: #ff5a00;
  font-size: 0.95rem;
}

.merch-teaser-text span {
  font-size: 0.8rem;
  color: var(--muted);
}

.tables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7rem;
}

.mini-table {
  min-width: 0;
}

.mini-table-title {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 0.4rem;
  font-weight: 600;
}

.standings-table-mini {
  font-size: 0.72rem;
}

.standings-table-mini td {
  padding: 0.25rem 0.15rem;
}

.standings-table-mini .standings-team {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 90px;
}

@media (max-width: 480px) {
  .tables-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Squad / roster list ----------------------------------------------------------------- */

.squad-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.squad-position-heading {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0.7rem 0 0.2rem;
}

.squad-position-heading:first-child {
  margin-top: 0;
}

.squad-player-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 0.35rem 0.4rem;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.squad-player-row:hover {
  background: var(--bg);
}

.squad-player-number {
  flex: 0 0 auto;
  width: 1.6rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.squad-player-name {
  flex: 1;
  font-size: 0.85rem;
}

/* --- Enhanced lineups: coach, bench, injuries ------------------------------------------- */

.lineup-coach {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  margin: 0.3rem 0 0.6rem;
}

.lineup-subheading {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin: 0.7rem 0 0.3rem;
}

.lineup-bench li {
  opacity: 0.75;
}

.lineup-player-link {
  cursor: pointer;
}

.injuries-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* --- Here We Go: Romano's own reporting highlighted within the table ------------------- */

.here-we-go-romano-row {
  background: linear-gradient(90deg, rgba(29, 155, 240, 0.08), transparent 60%);
}


/* ---- Live minute: stoppage / extra time counters (Sept 2026) ---- */
.match-pill-live { display: inline-flex; align-items: center; gap: 0.3rem; font-variant-numeric: tabular-nums; }
.match-pill-live .added { color: var(--brand-orange); font-weight: 800; }
.match-pill-live .et-tag { background: var(--brand-orange); color: #0b0d12; border-radius: 4px; padding: 0 0.3rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; }
.match-pill-live .announced { color: var(--muted); font-weight: 600; font-size: 0.7rem; }

/* ---- Richer at-a-glance tables ---- */
.standings-table-mini th { color: var(--muted); font-weight: 600; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.15rem 0.3rem; text-align: center; }
.standings-table-mini th.standings-team, .standings-table-mini td.standings-team { text-align: left; }
.standings-table-mini td { text-align: center; padding: 0.22rem 0.3rem; }
.standings-table-mini td.standings-form { white-space: nowrap; }
.standings-table-mini tr[class^="zone-"] td:first-child { border-left: 3px solid var(--zone, transparent); }
.standings-table-mini tr.zone-ucl { --zone: var(--brand-blue); }
.standings-table-mini tr.zone-uel { --zone: var(--brand-orange); }
.standings-table-mini tr.zone-uecl { --zone: var(--brand-green); }
.standings-table-mini tr.zone-rel { --zone: #ef4444; }
.standings-table-mini tr.zone-promo { --zone: var(--brand-green); }
.mini-table-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.4rem; font-size: 0.72rem; color: var(--muted); flex-wrap: wrap; }
.mini-table-foot button { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.72rem; cursor: pointer; }
.mini-table-foot button:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.zone-legend span { display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 0.5rem; }
.zone-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }

/* ---- Top scorers by league ---- */
.scorers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; }
.scorers-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem 0.8rem; box-shadow: var(--shadow-card); }
.scorers-card h4 { margin: 0 0 0.45rem; font-size: 0.85rem; display: flex; align-items: center; gap: 0.4rem; }
.scorer-row { display: grid; grid-template-columns: 1.2rem 34px 1fr auto; align-items: center; gap: 0.5rem; padding: 0.28rem 0; border-top: 1px solid var(--border); cursor: pointer; }
.scorer-row:first-of-type { border-top: 0; }
.scorer-row:hover { background: var(--card-2); }
.scorer-rank { color: var(--muted); font-size: 0.75rem; text-align: right; }
.scorer-row:first-of-type .scorer-rank { color: var(--brand-orange); font-weight: 800; }
.scorer-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.scorer-photo-empty { display: inline-block; }
.scorer-name { font-size: 0.82rem; font-weight: 600; line-height: 1.15; }
.scorer-club { display: block; font-size: 0.7rem; color: var(--muted); font-weight: 500; }
.scorer-goals { font-weight: 800; font-size: 0.95rem; color: var(--brand-green); font-variant-numeric: tabular-nums; }
.scorer-goals small { color: var(--muted); font-weight: 600; font-size: 0.68rem; margin-left: 0.2rem; }

/* Shorts page — grid of embedded YouTube Shorts pulled from @RealTimeFamOfficial */
.shorts-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1rem 4rem;
}
.shorts-intro {
  color: var(--text-muted, #9aa0a6);
  text-align: center;
  margin: 0.5rem 0 1.25rem;
  font-size: 0.95rem;
}
.shorts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.shorts-card {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.shorts-card iframe {
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
  display: block;
  background: #000;
}
.shorts-card-title {
  font-size: 0.82rem;
  padding: 0.5rem 0.6rem;
  margin: 0;
  line-height: 1.3;
  color: var(--text, #eee);
}
.shorts-skeleton {
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  background-size: 200% 100%;
  animation: shorts-shimmer 1.4s infinite;
}
@keyframes shorts-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.shorts-empty {
  text-align: center;
  color: var(--text-muted, #9aa0a6);
  margin-top: 2rem;
}
.shorts-subscribe {
  text-align: center;
  margin-top: 2rem;
}
.shorts-subscribe a {
  color: #ff4d4d;
  font-weight: 600;
  text-decoration: none;
}
@media (max-width: 480px) {
  .shorts-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.6rem;
  }
}