:root {
  --bg: #090909;
  --glass: rgba(255, 255, 255, 0.06);
  --glass-strong: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.12);
  --accent: #00cc82;
  --accent-dim: rgba(0, 204, 130, 0.15);
  --text-sec: #a0a0a0;
  --gold: #f0b429;
  --silver: #c9d2da;
  --bronze: #d98d5f;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overscroll-behavior-x: none; }
body {
  background: var(--bg);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, sans-serif;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
body::before, body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -1;
  pointer-events: none;
}
body::before { width: 560px; height: 560px; top: -180px; left: -120px;
  background: radial-gradient(circle, rgba(0,204,130,0.28), transparent 70%); }
body::after { width: 640px; height: 640px; bottom: -220px; right: -160px;
  background: radial-gradient(circle, rgba(0,204,130,0.16), transparent 70%); }

a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #04170a; }

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
h1 { font-size: clamp(26px, 2.6vw, 34px); }
h2 { font-size: clamp(20px, 1.8vw, 24px); }
h3 { font-size: 15px; }
p { line-height: 1.6; }

/* ============================================================
   Homepage dashboard widgets (Top Scorers / Latest Transfers)
   ============================================================ */
.dash-row { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.dash-widget { padding: 22px; }
/* Homepage "Most Read" widget: kept on mobile, dropped on desktop so the
   remaining three (Top Scorers / Latest Transfers / League Leaders) sit
   evenly in one row instead of an awkward 3+1 wrap. Same 900px breakpoint
   the rest of the site already uses for its mobile/desktop switch. */
@media (min-width: 901px) {
  .dash-widget-mobile-only { display: none; }
}
.dash-widget-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dash-widget-head h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; color: var(--accent); }
.dash-widget-head a { font-size: 12px; font-weight: 600; color: var(--text-sec); }
.dash-widget-head a:hover { color: #fff; }
.dash-row-item { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-radius: 12px; transition: background .15s ease; }
.dash-row-link:hover { background: rgba(255,255,255,0.05); }
.dash-rank { width: 18px; flex-shrink: 0; text-align: center; font-size: 12px; font-weight: 800; color: var(--text-sec); }
.dash-rank.rank-1 { color: var(--gold); }
.dash-rank.rank-2 { color: var(--silver); }
.dash-rank.rank-3 { color: var(--bronze); }
.dash-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.06); }
.dash-avatar-square { border-radius: 10px; object-fit: cover; }
.dash-avatar-fallback { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--accent); background: rgba(0,204,130,0.12); }
.dash-row-info { flex: 1; min-width: 0; }
.dash-row-title { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row-sub { font-size: 11.5px; color: var(--text-sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row-value { font-size: 15px; font-weight: 800; color: var(--accent); flex-shrink: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

.glass {
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.glass:hover { background: var(--glass-strong); }
a.glass:hover, .glass-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,204,130,0.15);
}
.glass-strong {
  background: var(--glass-strong);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--glass-border);
}
.glass-pill {
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  transition: all .25s ease;
}
.glass-pill:hover { background: var(--glass-strong); transform: translateY(-1px); }
/* Filter pills (Today/Next Week/Past Week/Past Month, Yesterday/Today/
   Tomorrow, All/Live/Upcoming/Finished, All Matches/Major Leagues Only on
   today-matches.php) all rely on an "active" class to show which filter is
   currently selected, but no .glass-pill.active rule existed at all - every
   pill looked identical regardless of selection, so clicking e.g. "Major
   Leagues Only" DID filter the results correctly server-side, but gave zero
   visual confirmation it had worked. The color override needs !important
   because these pills also carry an inline color:#fff style in the markup,
   which otherwise wins over any class-based color here. */
.glass-pill.active {
  background: var(--accent) !important;
  border-color: var(--accent);
  color: #04170a !important;
  font-weight: 700;
}
.glass-pill.active .live-dot { background: #04170a; box-shadow: none; }

.container { max-width: clamp(1120px, 88vw, 1560px); margin: 0 auto; padding: 0 clamp(20px, 3vw, 40px) 80px; }
header.site {
  position: sticky; top: 14px; z-index: 50;
  margin: 14px 16px 0;
  padding: 12px 24px;
  border-radius: 28px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}
.header-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: nowrap;
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; flex-shrink: 0; }
.logo-mark { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 0 16px rgba(0,204,130,0.35); }

.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ============================================================
   Full-page branded loader (shown briefly on every navigation)
   ============================================================ */
.page-loader {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg, #090909);
  transition: opacity .35s ease;
}
.page-loader-mark {
  width: 56px; height: 56px; border-radius: 16px;
  animation: page-loader-pulse 1.1s ease-in-out infinite;
}
@keyframes page-loader-pulse {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(0,204,130,0.45); }
  50% { transform: scale(1.08); opacity: .85; box-shadow: 0 0 24px 6px rgba(0,204,130,0.25); }
}
.page-loader.is-hidden { opacity: 0; pointer-events: none; }

.nav-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
nav.links { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; background: rgba(255,255,255,0.04); padding: 5px; border-radius: 100px; }
nav.links a, nav.links button.nav-more-btn { font-size: 13px; font-weight: 500; color: var(--text-sec); padding: 9px 13px; border-radius: 100px; transition: .2s; white-space: nowrap; background: none; border: none; cursor: pointer; font-family: inherit; }
nav.links a:hover, nav.links button.nav-more-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
nav.links a.active, nav.links button.nav-more-btn.active { color: #04170a; background: var(--accent); font-weight: 700; }

.nav-more-wrap { position: relative; }
.nav-more-btn { display: inline-flex; align-items: center; gap: 5px; }
.nav-more-btn svg { transition: transform .2s ease; }
.nav-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-more-panel {
  display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 190px; padding: 8px; border-radius: 18px;
  border: 1px solid var(--glass-border); box-shadow: 0 14px 34px rgba(0,0,0,0.5);
}
.nav-more-panel.open { display: block; }
.nav-more-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 500; color: var(--text-sec); white-space: nowrap; }
.nav-more-link:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav-more-link.active { color: var(--accent); font-weight: 700; }

.nav-search-btn {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.04); color: var(--text-sec); transition: .2s;
}
.nav-search-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
.nav-search-btn.active { color: #04170a; background: var(--accent); }

.header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.back-btn {
  display: none; /* mobile only, see media query below */
  align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.04); color: var(--text-sec);
  border: none; cursor: pointer; transition: .2s;
  -webkit-tap-highlight-color: transparent;
}
.back-btn:active { background: rgba(255,255,255,0.1); color: #fff; }
@media (max-width: 900px) {
  .back-btn { display: inline-flex; }
}
/* Article page (desktop only): the logo makes way for a back button instead,
   since desktop visitors arriving via an article are more likely to want a
   quick way back than a home-link they can already reach via the nav. Mobile
   is untouched here - it already shows the back button via the rule above. */
@media (min-width: 901px) {
  header.site.show-back-desktop .logo-mark { display: none; }
  header.site.show-back-desktop .back-btn { display: inline-flex; }
}

.nav-discover-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 100px;
  background: var(--accent-dim); color: var(--accent);
  font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: .2s;
  flex-shrink: 0;
}
.nav-discover-btn:hover { background: var(--accent); color: #04170a; }
/* Small red pulse badge, only rendered when a match is live right now - see
   $hasLiveMatchesNow in includes/header.php. Sits on the outer corner with a
   ring matching the page background so it reads as a badge, not a stray dot.
   Uses the descendant form (.nav-discover-btn .live-dot) rather than relying
   on the .nav-discover-live-dot class alone, so its position:absolute always
   wins over .live-dot's own position:relative regardless of stylesheet
   order - two classes of equal specificity would otherwise let whichever
   rule happens to be declared later silently win. */
.nav-discover-btn .live-dot {
  position: absolute; top: -2px; right: -2px;
  box-shadow: 0 0 0 2px var(--bg, #090909);
}
@media (max-width: 640px) {
  /* Icon-only on mobile - this is the round icon next to the logo in the
     top bar. Previously relied on padding alone to look circular, which
     shifted with icon/label changes; now a fixed square + border-radius:50%
     guarantees a clean, perfectly round button at every screen size. */
  .nav-discover-label { display: none; }
  .nav-discover-btn {
    width: 38px; height: 38px; padding: 0;
    justify-content: center; border-radius: 50%;
  }
}

.hero {
  margin-top: 24px; border-radius: 24px; overflow: hidden;
  aspect-ratio: 21 / 8; min-height: 320px; max-height: 480px;
  position: relative; display: flex; align-items: flex-end;
}
.hero .scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,9,9,0.95), rgba(9,9,9,0.3) 60%, transparent); }
.hero-content { position: relative; padding: clamp(24px, 4vw, 48px); max-width: 640px; }
.hero-content h1 { font-size: clamp(24px, 3vw, 38px); line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; }
.tag-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 6px 14px; color: var(--accent); }

.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card-img { height: 170px; position: relative; border-radius: 24px 24px 0 0; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.glass-card:hover .card-img img { transform: scale(1.04); }
.card-body { padding: 18px 20px 20px; }
.card-body-fill { display: flex; flex-direction: column; height: 100%; }
.card-footer { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; font-size: 11px; color: var(--text-sec); }
.cat-tag { position: absolute; top: 12px; left: 12px; background: rgba(9,9,9,0.55); backdrop-filter: blur(10px); color: var(--accent); font-size: 10.5px; font-weight: 700; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; }

/* On very wide monitors, cap the grid at 4 columns instead of letting 3 large
   cards stretch edge to edge with oversized images. */
@media (min-width: 1400px) {
  .grid-3 { grid-template-columns: repeat(4, 1fr); }
}

.btn-primary { padding: 12px 24px; border-radius: 100px; background: var(--accent); color: #04170a; font-weight: 700; font-size: 13px; border: none; cursor: pointer; display: inline-block; }
.btn-primary:hover { filter: brightness(1.08); }

input[type=text], input[type=email], input[type=password], input[type=datetime-local], select, textarea {
  width: 100%; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,0.1);
  border: 1px solid var(--glass-border); color: #fff; font-size: 13px; outline: none;
}

.status-live { background: rgba(255,59,48,0.15); color: #ff6259; }
.status-upcoming { background: var(--glass); color: var(--text-sec); }
.status-finished { background: rgba(160,160,160,0.12); color: var(--text-sec); }
/* Postponed / cancelled / time-TBD - deliberately distinct from both a
   normal upcoming fixture (status-upcoming) and a real result
   (status-finished), so neither is ever mistaken for the other. */
.status-postponed { background: rgba(232,195,74,0.14); color: #e8c34a; }
.match-card.match-muted { opacity: .72; }
.pill { padding: 4px 10px; border-radius: 100px; font-size: 10px; font-weight: 800; text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; }
/* display:inline-block was missing here - a plain <span> defaults to
   display:inline, which makes the browser ignore width/height entirely and
   fall back to sizing the dot off its (empty) text content instead. That's
   why this rendered as a squashed dark bar/blob everywhere it's used (the
   "Live Now" filter pill, live match status badges, the header's Discover
   live-badge) instead of a clean small red dot. */
/* GPU-friendly "live" dot: a small solid circle plus an expanding RING drawn
   with a ::after pseudo-element that animates only transform+opacity (both
   compositor-only properties). This replaces the old approach of animating
   box-shadow directly on the dot, which - combined with a parent that has
   backdrop-filter (every .glass-pill, e.g. the "Live Now" filter button) -
   forced a repaint every animation frame and visually corrupted into a
   stretched, discolored bar on some mobile browsers instead of a dot. The
   header's live badge (.nav-discover-live-dot) never had this problem
   because its parent has no backdrop-filter, which is what pointed at
   backdrop-filter + box-shadow-animation as the actual combination at fault. */
.live-dot { position: relative; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ff453a; flex-shrink: 0; }
.live-dot::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid #ff453a; animation: live-pulse-ring 1.6s infinite; }
@keyframes live-pulse-ring { 0% { transform: scale(.6); opacity: .8; } 70%, 100% { transform: scale(2.2); opacity: 0; } }
.accent-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse-green 1.6s infinite; display: inline-block; }
@keyframes pulse-green { 0%{box-shadow:0 0 0 0 rgba(0,204,130,.6);} 70%{box-shadow:0 0 0 8px rgba(0,204,130,0);} 100%{box-shadow:0 0 0 0 rgba(0,204,130,0);} }

.match-just-went-live {
  animation: match-live-flash 1.5s ease;
}
@keyframes match-live-flash {
  0% { box-shadow: 0 0 0 0 rgba(255,69,58,0.7); }
  50% { box-shadow: 0 0 0 14px rgba(255,69,58,0); background: rgba(255,69,58,0.06); }
  100% { box-shadow: 0 0 0 0 rgba(255,69,58,0); }
}
.match-score { letter-spacing: 0.5px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin-bottom: 24px; }
.stat-card { padding: 20px; }
.stat-card .val { font-size: 26px; font-weight: 800; }
.stat-card .lbl { font-size: 12px; color: var(--text-sec); margin-top: 4px; }

table.admin-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.admin-table th { text-align: left; color: var(--text-sec); font-weight: 600; padding: 8px 10px; font-size: 10.5px; text-transform: uppercase; }
table.admin-table td { padding: 12px 10px; border-top: 1px solid rgba(255,255,255,0.06); }
table.admin-table tbody tr { transition: background .15s ease; }
table.admin-table tbody tr:hover { background: rgba(255,255,255,0.04); }
table.admin-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.015); }

footer.site { border-top: 1px solid var(--glass-border); margin-top: 60px; padding: 30px; text-align: center; color: var(--text-sec); font-size: 11.5px; }

/* ============================================================
   Tournament page: Schedule/Standings/Results/Teams/News tab strip.
   Previously had no distinct .active style at all (every tab looked
   identical regardless of selection) and no scrollbar hiding, so an
   overflow-x:auto strip showed the browser's default horizontal
   scrollbar as a stray gray bar under the tabs on touch devices.
   ============================================================ */
.t-tabs-strip, .tm-tabs-strip {
  display: flex; gap: 8px; padding: 0 8px; margin-bottom: 20px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.t-tabs-strip::-webkit-scrollbar, .tm-tabs-strip::-webkit-scrollbar { display: none; height: 0; width: 0; }
.t-tab, .tm-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0;
  padding: 8px 16px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  min-width: 108px; box-sizing: border-box;
  color: var(--text-sec); transition: background .15s ease, color .15s ease;
}
/* Fixed min-width (sized to fit the longest label, "Statistics", plus its
   icon) so every tab renders at the same size whether it's active or not,
   and regardless of how long its own label is - clicking between tabs used
   to visibly grow/shrink the clicked pill because longer labels (and the
   active state's heavier font-weight) made the button's own content wider,
   and each button sized itself to fit only its own content. font-weight is
   also now the SAME (600) for active/inactive - it used to jump to 700 on
   activation, which was the other half of that per-click size change. */
.t-tab.active, .tm-tab.active { background: var(--accent); color: #04170a; }

/* Generic utility for any other horizontal-scroll wrapper that shouldn't
   show the browser's default scrollbar (e.g. scorers.php's table wrapper). */
.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; height: 0; width: 0; }

.t-empty {
  padding: 40px 24px; text-align: center; color: var(--text-sec); font-size: 13.5px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.t-empty svg { opacity: 0.5; }
.t-empty-title { color: #fff; font-weight: 700; font-size: 14px; }
.t-empty-sub { max-width: 340px; line-height: 1.6; }

.scroll-fab {
  display: none;
  align-items: center; justify-content: center;
  position: fixed; right: 18px; bottom: 26px; z-index: 55;
  width: 46px; height: 46px; border-radius: 50%;
  padding: 0; cursor: pointer; overflow: hidden;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 10px 26px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
  opacity: 0; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.scroll-fab-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(180deg, #33e0a0 0%, var(--accent) 100%);
  transition: height .12s linear;
  z-index: 0;
}
/* a soft "waterline" highlight right at the top edge of the fill */
.scroll-fab-fill::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: rgba(255,255,255,0.55); filter: blur(1px);
}
.scroll-fab-icon {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.scroll-fab:active { transform: scale(0.94); }
.scroll-fab.visible { display: flex; opacity: 1; transform: translateY(0); }
.scroll-fab.visible:active { transform: scale(0.94); }


@media (max-width: 900px) {
  .scroll-fab { bottom: 110px; } /* just clears the raised "Today's Matches" pill + bottom-nav's safe-area padding, instead of floating disconnected higher up the page */
}

/* ============================================================
   Article image lightbox
   ============================================================ */
.lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  align-items: center; justify-content: center;
  background: rgba(5,5,5,0.94); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease;
}
.lightbox.open { display: flex; opacity: 1; }
.lightbox img { max-width: min(92vw, 1100px); max-height: 82vh; border-radius: 12px; object-fit: contain; }
.lightbox-btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: #fff; border: none; cursor: pointer;
  transition: background .2s; -webkit-tap-highlight-color: transparent;
}
.lightbox-btn:hover, .lightbox-btn:active { background: rgba(255,255,255,0.18); }
.lightbox-close { top: 18px; right: 18px; }
.lightbox-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox-counter {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  font-size: 12.5px; font-weight: 600; color: var(--text-sec);
  background: rgba(255,255,255,0.08); padding: 5px 14px; border-radius: 100px;
}
@media (max-width: 640px) {
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-btn { width: 38px; height: 38px; }
}

@media (max-width: 1220px) and (min-width: 901px) {
  nav.links a, nav.links button.nav-more-btn { padding: 8px 9px; font-size: 12.3px; }
  .nav-wrap { gap: 6px; }
}

@media (max-width: 900px) {
  nav.links { display: none; }
  .nav-wrap > .nav-search-btn { display: none; }
  .hero-content { padding: 24px; }
  .hero { height: auto; }
}

/* ============================================================
   Top loading bar
   ============================================================ */
#loading-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #6dffcf);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 12px rgba(0,204,130,0.75), 0 0 3px rgba(0,204,130,0.9);
  z-index: 9999;
  opacity: 1;
  pointer-events: none;
}

/* ============================================================
   Floating bottom nav (mobile primary navigation)
   ============================================================ */
.bottom-nav {
  display: none; /* shown on mobile only, see media query below */
}
.bn-more { display: none; }

@media (max-width: 900px) {
  body { padding-bottom: 140px; } /* keep content clear of the floating bar */

  .bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 6px;
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: 16px;
    z-index: 60;
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    border-radius: 28px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
    touch-action: pan-y;
    overscroll-behavior-x: none;
  }

  .bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    border-radius: 20px;
    background: none;
    border: none;
    color: var(--text-sec);
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .bn-item svg { width: 21px; height: 21px; color: inherit; }
  .bn-item.active,
  .bn-item:active { color: #fff; background: rgba(255,255,255,0.08); }

  /* The "مباريات اليوم" button is the hero action in the middle: raised & accented */
  .bn-matches {
    flex: 1.3;
    color: #04170a;
    background: var(--accent);
    margin-top: -22px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 22px;
    box-shadow: 0 10px 24px rgba(0,204,130,0.45), 0 0 0 6px var(--bg);
    font-size: 11px;
  }
  .bn-matches.active { background: #33e0a0; }
  .bn-matches-icon svg { width: 22px; height: 22px; }

  .bn-more {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: 92px;
    z-index: 59;
    border-radius: 24px;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    pointer-events: none;
    transition: all .22s cubic-bezier(.2,.8,.2,1);
  }
  .bn-more.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
  }
  .bn-more a {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-sec);
    padding: 12px 10px;
    border-radius: 16px;
    text-align: center;
    background: rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .bn-more a:hover, .bn-more a:active { color: #fff; background: rgba(255,255,255,0.12); }
  .bn-more a.bn-more-featured { font-weight: 800; color: var(--accent); background: rgba(0,204,130,0.1); }
  .bn-more a.bn-more-featured:hover { color: #04170a; background: var(--accent); }
}

/* ============================================================
   Match cards: crests / logos + clickable read-more preview
   ============================================================ */
/* Same-league matches now share ONE header block (logo, name, match count)
   instead of each match card repeating its own league row - see the
   $matchGroups grouping in today-matches.php. .match-league/.match-league
   img below are kept only because match.php's single-match page still uses
   that per-card league row (there's only ever one match there, so grouping
   doesn't apply). */
.league-group-block { margin-bottom: 30px; }
.league-group-block:last-child { margin-bottom: 0; }
.league-group-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  padding: 10px 16px; border-radius: 16px;
  /* Sticky per-section header (iOS-Contacts style): each league's own
     header sticks to the top of the viewport while its matches scroll
     underneath, then gets pushed off by the NEXT league's header once you
     scroll past this group - position:sticky handles that hand-off on its
     own, no JS needed for the sticking itself. --sticky-header-offset is
     computed once on load (see includes/footer.php) from the real height
     of header.site, which is itself sticky at top:14px - hardcoding a
     fixed px here would drift out of sync the moment that header's height
     changes (font scaling, a longer nav label, etc). The glass background
     is required, not cosmetic: without it, match cards would visibly
     scroll "through" the sticky text underneath as translucent as the
     page background, exactly like the login/floating-pill look already
     used for header.site itself. */
  position: sticky; top: var(--sticky-header-offset, 88px); z-index: 20;
  background: var(--glass-strong); backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.league-group-header img { width: 26px; height: 26px; object-fit: contain; border-radius: 50%; background: rgba(255,255,255,0.06); flex-shrink: 0; }
.league-group-name { font-weight: 800; font-size: 15px; color: #fff; }
.league-group-count {
  margin-inline-start: auto; font-size: 11px; font-weight: 700; color: var(--text-sec);
  background: rgba(255,255,255,0.06); padding: 4px 11px; border-radius: 100px; white-space: nowrap;
}
.match-league { display: flex; align-items: center; gap: 6px; }
.match-league img { width: 16px; height: 16px; object-fit: contain; border-radius: 4px; }
.team-col { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 38%; }
.team-crest {
  width: 44px; height: 44px; object-fit: contain;
  background: rgba(255,255,255,0.06); border-radius: 50%; padding: 6px;
}
.team-crest-fallback {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--accent);
}

.match-card { cursor: default; }

.ai-preview-box {
  background: rgba(255,255,255,0.04); border-radius: 16px; padding: 14px;
  font-size: 12px; color: #d8d8d8; line-height: 1.55; cursor: pointer;
}
.ai-preview-text {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.match-card.expanded .ai-preview-text { -webkit-line-clamp: unset; overflow: visible; }
.read-more-toggle {
  margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--accent);
  display: inline-flex; align-items: center; gap: 4px;
}
.match-card.expanded .read-more-toggle .chevron { transform: rotate(180deg); }
.read-more-toggle .chevron { display: inline-block; transition: transform .2s ease; }
.read-more-toggle .rm-label::before { content: "Read more"; }
.match-card.expanded .read-more-toggle .rm-label::before { content: "Show less"; }

/* ============================================================
   Win probability (match.php)
   ============================================================ */
.win-prob-card { margin-top: 18px; background: rgba(255,255,255,0.04); border-radius: 16px; padding: 14px 16px; }
.win-prob-heading {
  display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--accent); margin-bottom: 10px;
}
.win-prob-bar {
  display: flex; width: 100%; height: 10px; border-radius: 100px; overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.win-prob-seg { height: 100%; min-width: 2px; }
.win-prob-home { background: var(--accent); }
.win-prob-draw { background: rgba(255,255,255,0.28); }
.win-prob-away { background: #4d8dff; }
.win-prob-labels {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 9px;
  font-size: 11px; color: var(--text-sec); flex-wrap: wrap;
}
.win-prob-labels b { color: #fff; font-size: 12px; }

/* ============================================================
   Team news: coach + injuries (match.php)
   ============================================================ */
.team-news-card { padding: 24px; margin-bottom: 24px; }
.team-news-title { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.team-news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) {
  .team-news-grid { grid-template-columns: 1fr; }
  .team-news-col:first-child { padding-bottom: 18px; border-bottom: 1px solid var(--glass-border); }
}
.team-news-col:not(:first-child) { border-inline-start: 1px solid var(--glass-border); padding-inline-start: 20px; }
@media (max-width: 640px) { .team-news-col:not(:first-child) { border-inline-start: none; padding-inline-start: 0; } }
.team-news-team-name { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13.5px; margin-bottom: 14px; }
.team-news-empty { font-size: 11.5px; color: var(--text-sec); font-style: italic; }

.coach-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.coach-photo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--glass-strong); }
.coach-photo-fallback {
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: var(--accent); border: 1px solid var(--glass-border);
}
.coach-label { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-sec); }
.coach-name { font-size: 13px; font-weight: 700; color: #fff; }
.coach-nat { font-size: 11px; font-weight: 500; color: var(--text-sec); }

.injury-label {
  display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; color: #ffb84d; margin-bottom: 8px;
}
.injury-list { display: flex; flex-direction: column; gap: 6px; }
.injury-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: rgba(255,184,77,0.07); border-radius: 10px; padding: 7px 10px; font-size: 12px;
}
.injury-name { color: #fff; font-weight: 600; }
.injury-reason { color: var(--text-sec); font-size: 11px; text-align: end; }

/* ============================================================
   Broken / missing image fallback
   ============================================================ */
img.img-broken { visibility: hidden; }
.card-img.no-img, .hero.no-img {
  background: linear-gradient(135deg, rgba(0,204,130,0.18), rgba(255,255,255,0.03)) !important;
  display: flex; align-items: center; justify-content: center;
}
.card-img.no-img::after {
  content: "⚽"; font-size: 32px; opacity: 0.5;
}

/* ============================================================
   Ad slots (AdSense) - dashboard-togglable, see admin/ads.php
   ============================================================ */
.ad-slot {
  position: relative; margin: 20px 0; padding: 22px 16px 16px;
  border-radius: 20px; background: var(--glass); border: 1px dashed var(--glass-border);
  min-height: 90px; overflow: hidden; text-align: center;
}
.ad-slot-label {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-sec); opacity: .7;
}
.ad-slot.ad-infeed { grid-column: 1 / -1; }

.ad-slot-placeholder { border-style: dashed; }
.ad-slot-placeholder-body {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-sec); font-size: 12.5px; font-weight: 600; padding: 10px 0 4px;
}
.ad-slot-placeholder-body svg { opacity: 0.5; }
.ad-slot-placeholder-dims { font-size: 10.5px; font-weight: 500; opacity: 0.7; }

/* ============================================================
   Top-slide ad banner - slides down after 10s on-page, dismissible,
   never covers the main content (avoids Google's intrusive-interstitial
   penalty since it's a compact bar, not a full-screen overlay).
   ============================================================ */
.header-notice {
  position: relative;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .4s ease, opacity .3s ease, margin-top .4s ease;
  margin-top: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.header-notice.show {
  max-height: 160px; opacity: 1; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--glass-border);
}
.header-notice-text { font-size: 12.5px; color: var(--text-sec); line-height: 1.5; flex: 1 1 240px; }
.header-notice-text a { color: var(--accent); text-decoration: underline; }
.header-notice-accept {
  flex-shrink: 0; padding: 9px 20px; border-radius: 100px; border: none; cursor: pointer;
  background: var(--accent); color: #04170a; font-weight: 700; font-size: 12.5px;
}
.header-notice-accept:hover { filter: brightness(1.08); }

/* ============================================================
   Today's Matches: custom competition filter dropdown
   (replaces a native <select> - full-screen native pickers on
   mobile can't be themed, this can)
   ============================================================ */
.league-filter { position: relative; }
.league-filter-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 600; color: #fff;
  border: none; cursor: pointer; font-family: inherit;
}
.league-filter-trigger:hover { background: var(--glass-strong); }
.league-filter.open .league-filter-trigger { background: var(--glass-strong); border-color: var(--accent); }
.league-filter-flag { width: 20px; height: 20px; border-radius: 50%; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; opacity: 0.9; flex-shrink: 0; background: rgba(255,255,255,0.06); overflow: hidden; }
/* League logo sits right after the (now circular) flag, before the league
   name - confirmed available straight from API-Football's fixtures/leagues
   responses (league.logo) and already mirrored locally per match as
   matches_table.competition_logo, so no extra API call was needed here. */
.league-filter-logo { width: 18px; height: 18px; border-radius: 50%; object-fit: contain; background: rgba(255,255,255,0.06); flex-shrink: 0; }
.league-filter-panel {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  background: #0f1712; border: 1px solid var(--glass-border); border-radius: 16px;
  padding: 6px; min-width: 260px; max-width: 320px; max-height: 340px; overflow-y: auto;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.league-filter.open .league-filter-panel { display: block; }
.league-filter-item {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; color: #e8e8e8; text-decoration: none;
}
.league-filter-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.league-filter-item.active { background: rgba(0,204,130,0.14); color: var(--accent); }
.league-filter-item .icon { flex-shrink: 0; opacity: 0.85; }
.league-filter-count { margin-inline-start: auto; font-size: 10.5px; font-weight: 700; color: var(--text-sec); }
.league-filter-item.active .league-filter-count { color: var(--accent); }

/* Panel chrome only shown on the mobile bottom-sheet layout below. */
.league-filter-backdrop { display: none; }
.league-filter-panel-handle,
.league-filter-panel-title,
.league-filter-close { display: none; }

/* Category tabs - a pure client-side filter over the list below (see the
   script in today-matches.php), so switching tabs never reloads the page
   or fetches anything extra. */
.league-cat-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.league-cat-tabs::-webkit-scrollbar { display: none; }
.league-cat-tab {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: 100px; font-size: 11.5px; font-weight: 700;
  white-space: nowrap; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
  color: var(--text-sec); cursor: pointer; font-family: inherit; transition: .15s;
}
.league-cat-tab .icon { opacity: 0.85; }
.league-cat-tab.active .icon { opacity: 1; }
.league-cat-tab:hover { color: #fff; background: rgba(255,255,255,0.09); }
.league-cat-tab.active { background: rgba(0,204,130,0.16); border-color: var(--accent); color: var(--accent); }

.league-filter-list { overflow-y: auto; }
.league-cat-heading {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-sec); padding: 12px 12px 6px; display: flex; align-items: center; justify-content: space-between;
}
.league-cat-heading-label { display: inline-flex; align-items: center; gap: 6px; }
.league-cat-heading-label .icon { opacity: 0.8; }
.league-more-toggle {
  width: 100%; background: none; border: none; cursor: pointer; font-family: inherit; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-sec);
}
.league-more-toggle svg { transition: transform .15s; }
.league-cat-group.expanded .league-more-toggle svg { transform: rotate(180deg); }
.league-more-list { display: none; }
.league-cat-group.expanded .league-more-list { display: block; }

/* ============================================================
   Mobile: the competition filter becomes a full bottom sheet
   instead of a small anchored dropdown - a dropdown positioned
   near the top of a long mobile page would either get clipped by
   the viewport or need to sit z-above the floating bottom-nav,
   covering its buttons while open. A bottom sheet avoids both:
   it owns the whole screen height (safely scrollable on its own)
   and sits ABOVE the bottom-nav in stacking order only while
   open, never overlapping it during normal scrolling.
   ============================================================ */
@media (max-width: 900px) {
  .league-filter.open .league-filter-backdrop {
    display: block; position: fixed; inset: 0; z-index: 150;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);
  }
  body.league-filter-open { overflow: hidden; }

  .league-filter.open .league-filter-panel {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    z-index: 200; max-width: none; min-width: 0;
    max-height: 82vh;
    border-radius: 22px 22px 0 0;
    padding: 10px 0 0;
    box-shadow: 0 -16px 50px rgba(0,0,0,0.55);
    animation: league-sheet-up .22s ease-out;
  }
  @keyframes league-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

  .league-filter-panel-handle {
    display: block; width: 36px; height: 4px; border-radius: 100px;
    background: rgba(255,255,255,0.25); margin: 0 auto 10px;
  }
  .league-filter-panel-title {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 18px 10px; font-size: 15px; font-weight: 800; color: #fff;
    border-bottom: 1px solid var(--glass-border); margin-bottom: 10px;
  }
  .league-filter-close {
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08); border: none; color: #fff;
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  }
  .league-cat-tabs { padding: 0 14px 10px; }
  /* The floating bottom-nav clearance has to live on the SCROLLING list's own
     padding-bottom, not on the outer sheet - padding on the outer panel adds
     that space unconditionally even when the league list is short enough to
     not need it, which is exactly what left a large permanent empty gap at
     the bottom of the sheet regardless of how many leagues were in it.
     Putting it on the list instead only ever shows up once you've actually
     scrolled to the last item, and flex:1 1 auto + min-height:0 is what lets
     this list shrink to fit a short list AND scroll internally for a long
     one, instead of forcing the sheet open to a fixed height either way. */
  .league-filter-list {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 0 8px calc(150px + env(safe-area-inset-bottom));
  }
  .league-filter-item { padding: 12px 12px; font-size: 13.5px; }
}

/* ============================================================
   Match Center (match.php / match-tab.php) — 2026-08-15 upgrade
   ============================================================ */

/* --- Header team columns / crest fallback (shared by match.php) --- */
/* Score/crests row used to be a plain flex-wrap row with per-column
   min-widths (120/140/120 + gaps = ~400px minimum). Below ~400px CSS width
   - i.e. MOST phones in portrait - the browser's wrap point landed
   differently depending on the exact viewport width (412px vs 390px vs
   360px etc all wrapped at slightly different combinations), so the header
   looked inconsistent from phone to phone instead of reliably matching one
   layout. Replaced with an explicit two-mode layout instead of relying on
   organic wrapping: a normal row above the phone breakpoint, and a fully
   deterministic vertical stack (team / score / team, matching DOM order)
   below it - see the media query further down. Crest size itself (64px,
   set inline) was never actually shrinking - the WRAP BEHAVIOR reflowing
   unpredictably was what read as "the design changes/shrinks". */
.match-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.mh-team { flex: 1; min-width: 120px; }
.mh-center { text-align: center; min-width: 140px; margin: 0 auto; }
@media (max-width: 600px) {
  .match-header-row { flex-direction: column; gap: 18px; }
  .mh-team, .mh-center { width: 100%; min-width: 0; }
}
.team-crest { object-fit: contain; }
.team-crest-fallback {
  border-radius: 50%; background: var(--glass); border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center; font-weight: 800;
  color: var(--text-sec); margin: 0 auto;
}
.team-col { display: flex; flex-direction: column; align-items: center; }
.match-status-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 11px; letter-spacing: 0.02em; }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #ff3b30;
  box-shadow: 0 0 0 0 rgba(255,59,48,0.6); animation: liveDotPulse 1.6s infinite;
}
@keyframes liveDotPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,59,48,0.55); }
  70% { box-shadow: 0 0 0 6px rgba(255,59,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); }
}

/* --- Loading skeletons (item: Loading States) ---
   A shared shimmer used by every lazy-loaded Match Center tab while its
   match-tab.php fragment is in flight, so a slow connection sees a
   shaped placeholder instead of a blank gap. */
@keyframes skeletonShimmer {
  0% { background-position: -300px 0; }
  100% { background-position: 300px 0; }
}
.tab-skeleton { padding: 20px; }
.skeleton-line, .skeleton-bar, .skeleton-row, .skeleton-grid {
  background: linear-gradient(90deg, var(--glass) 25%, var(--glass-strong) 37%, var(--glass) 63%);
  background-size: 600px 100%; animation: skeletonShimmer 1.4s ease infinite;
  border-radius: 8px;
}
.skeleton-line { height: 14px; margin: 0 0 14px; }
.skeleton-bar { height: 34px; margin-bottom: 14px; }
.skeleton-row { height: 46px; margin-bottom: 8px; border-radius: 10px; }
.skeleton-grid { height: 220px; margin-top: 10px; }

/* --- Match timeline (Summary tab) --- */
.match-timeline { display: flex; flex-direction: column; gap: 2px; }
.timeline-row {
  display: grid; grid-template-columns: 38px 20px 22px 1fr; align-items: center;
  gap: 8px; padding: 7px 4px; border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 12.5px;
}
.timeline-row:last-child { border-bottom: none; }
.timeline-minute { color: var(--text-sec); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.timeline-crest { display: flex; align-items: center; justify-content: center; }
.timeline-icon { display: flex; align-items: center; justify-content: center; }
.timeline-detail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.timeline-player { font-weight: 600; color: #fff; }
.timeline-tag { font-size: 11px; color: var(--text-sec); }
.timeline-sub-in { color: var(--accent); font-weight: 600; }
.timeline-sub-out { color: var(--text-sec); }
.timeline-away { text-align: right; }
.timeline-away .timeline-detail { justify-content: flex-end; }

.timeline-half-filter { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.half-filter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  cursor: pointer; color: var(--text-sec); transition: background .15s ease, color .15s ease;
}
.half-filter-btn.active { background: var(--accent) !important; color: #04170a !important; border-color: var(--accent); font-weight: 700; }
.timeline-half-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4px 8px; margin-top: 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.3px;
  color: var(--text-sec); text-transform: uppercase;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.timeline-half-group:first-child .timeline-half-header { margin-top: 0; border-top: none; padding-top: 0; }
.timeline-half-tally { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; color: #fff; }
.timeline-half-tally .icon { vertical-align: -2px; }

/* --- Statistics tab bars (match-tab.php) --- */
.stat-teams-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; font-weight: 700; margin-bottom: 18px; color: #fff;
}
.stat-teams-head img { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; margin: 0 4px; }
.stat-row { margin-bottom: 16px; }
.stat-row-vals { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; }
.stat-row-val { font-weight: 700; color: #fff; min-width: 40px; }
.stat-row-label { color: var(--text-sec); text-align: center; flex: 1; }
.stat-bar { display: flex; height: 6px; border-radius: 4px; overflow: hidden; background: var(--glass); }
.stat-bar-home { background: var(--accent); }
.stat-bar-away { background: rgba(255,255,255,0.35); }

/* --- Lineups tab (match-tab.php) ---
   Desktop: visual pitch per team (GK row nearest the team's own crest).
   Mobile: clean list fallback (item: "list-based fallback"). Toggled with
   a media query rather than JS so both render server-side with no
   layout-shift once CSS applies. */
/* Pitch/formation view used to be hidden below 860px (a plain text list
   was shown instead on every phone, regardless of size) - both now always
   render together (pitch first, list below) on every screen, and every
   player in either one links to player.php when a local profile can be
   matched (see $buildPlayerMap in match-tab.php) instead of being plain
   unclickable text. */
.lineup-team-filter { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.team-filter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  cursor: pointer; color: var(--text-sec); transition: background .15s ease, color .15s ease;
}
.team-filter-btn.active { background: var(--accent) !important; color: #04170a !important; border-color: var(--accent); font-weight: 700; }
.lineup-pitch-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.lineup-pitch-wrap-single { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
  /* Two team pitches side-by-side got too cramped on a phone-width single
     column - full width, one above the other, reads far better than
     shrinking both to fit half the screen each. */
  .lineup-pitch-wrap { grid-template-columns: 1fr; }
}
.lineup-list-wrap { display: block; }
.lineup-pitch-team {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(0,140,70,0.25), rgba(0,80,40,0.35));
}
.lineup-pitch-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  background: rgba(0,0,0,0.25); font-size: 12.5px;
}
.lineup-pitch-head img { width: 18px; height: 18px; object-fit: contain; }
.lineup-formation { margin-left: auto; color: var(--text-sec); font-size: 11px; }
.lineup-pitch { display: flex; flex-direction: column-reverse; padding: 14px 8px; gap: 14px; min-height: 320px; justify-content: space-between; }
.lineup-pitch-row { display: flex; justify-content: space-evenly; gap: 6px; flex-wrap: wrap; }
.lineup-dot { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px; text-decoration: none; }
.lineup-dot.is-linked { cursor: pointer; }
.lineup-dot.is-linked:hover .lineup-dot-num,
.lineup-dot.is-linked:hover .lineup-dot-photo { box-shadow: 0 0 0 2px var(--accent); }
.lineup-dot-photo-wrap { position: relative; display: block; width: 32px; height: 32px; }
.lineup-dot-photo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,0.9); display: block; }
.lineup-dot-badge {
  position: absolute; bottom: -3px; right: -3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,0.95); color: #111;
  display: flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 800; line-height: 1;
  border: 1.5px solid var(--bg);
}
.lineup-dot-num {
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.92); color: #111;
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800;
}
.lineup-dot-name { font-size: 9.5px; color: #fff; text-align: center; line-height: 1.2; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.lineup-pitch-empty { padding: 30px; text-align: center; color: var(--text-sec); font-size: 12.5px; }

.lineup-list-team { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.lineup-list-team:last-child { border-bottom: none; }
.lineup-list-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 8px; }
.lineup-coach-row { font-size: 12px; color: var(--text-sec); margin-bottom: 10px; }
.lineup-section-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-sec); margin: 10px 0 6px; }
.lineup-list-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 4px; font-size: 12.5px;
  border-radius: 8px; text-decoration: none; transition: background .15s ease;
}
/* Rows resolved to a real player.php profile (see $buildPlayerMap in
   match-tab.php) render as an <a> instead of a <div> and get a subtle
   "this is tappable" card treatment - background on hover/tap, and a photo
   instead of a bare number badge when one's on file, so a lineup actually
   looks like a roster of people rather than a numbered text list. */
.lineup-list-row.is-linked { cursor: pointer; }
.lineup-list-row.is-linked:hover, .lineup-list-row.is-linked:active { background: var(--glass); }
.lineup-list-row.is-linked .lineup-list-name { color: var(--accent); }
.lineup-list-photo { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.08); }
.lineup-list-num {
  width: 22px; height: 22px; border-radius: 50%; background: var(--glass); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: var(--text-sec);
}
.lineup-list-name { flex: 1; color: #fff; font-weight: 600; }
.lineup-list-pos { font-size: 10px; color: var(--text-sec); }
.lineup-sub-badge { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 6px; }
.lineup-sub-off { color: #ff6259; background: rgba(255,98,89,0.12); }
.lineup-sub-in { color: var(--accent); background: var(--accent-dim); }
.lineup-unused { opacity: 0.55; }
.lineup-list-empty { padding: 16px 0; color: var(--text-sec); font-size: 12.5px; }

/* --- H2H tab --- */
.h2h-summary { display: flex; justify-content: space-around; text-align: center; margin-bottom: 10px; }
.h2h-summary-num { font-size: 24px; font-weight: 800; color: #fff; }
.h2h-summary-lbl { font-size: 11px; color: var(--text-sec); margin-top: 2px; }
.h2h-goals-lbl { text-align: center; font-size: 11.5px; color: var(--text-sec); border-top: 1px solid rgba(255,255,255,0.08); padding-top: 10px; }
.h2h-row {
  display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 14px; font-size: 12px; color: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.h2h-row:last-child { border-bottom: none; }
.h2h-row-date { color: var(--text-sec); font-size: 11px; }
.h2h-row-teams { font-weight: 600; }
.h2h-row-comp { color: var(--text-sec); font-size: 10.5px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.h2h-row-link:hover { background: var(--glass); }

/* --- Form tab --- */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 22px; padding: 20px; }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-team-block { }
.form-team-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 10px; }
.form-team-head img { width: 20px; height: 20px; object-fit: contain; }
.form-strip { display: flex; gap: 5px; margin-bottom: 12px; }
.form-badge {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #04170a; text-decoration: none;
}
.form-badge-w { background: var(--accent); }
.form-badge-d { background: var(--silver); color: #333; }
.form-badge-l { background: #ff6259; color: #fff; }
.form-matches-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.form-match-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 11.5px;
  border-radius: 8px; color: #fff; text-decoration: none;
}
.form-match-row-link:hover { background: var(--glass); }
.form-match-vs { flex: 1; color: var(--text-sec); }
.form-match-score { font-weight: 700; }
.form-match-comp { color: var(--text-sec); font-size: 10px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-empty { font-size: 12px; color: var(--text-sec); padding: 6px 0 12px; }
.form-np-row { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 10px; }
.form-np-item { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: #fff; text-decoration: none; }
.form-np-lbl { font-size: 9.5px; text-transform: uppercase; color: var(--text-sec); letter-spacing: 0.04em; }

/* --- Standings tab table --- */
.standings-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 480px; }
.standings-table th {
  text-align: center; color: var(--text-sec); font-weight: 600; font-size: 10.5px;
  text-transform: uppercase; padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.standings-table td { text-align: center; padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,0.04); color: #fff; }
.standings-table .std-pos { font-weight: 700; }
.standings-table .std-team { text-align: left; display: table-cell; white-space: nowrap; }
.standings-table .std-team img { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; margin-right: 6px; }
.standings-table .std-pts { font-weight: 800; }
.std-row-highlight { background: var(--accent-dim); }
.std-row-highlight td { color: #fff; font-weight: 700; }

/* --- Mobile: keep the Match Center tab strip and stat/H2H/form rows
   comfortably usable down to 320px (item: Mobile Optimization) --- */
@media (max-width: 480px) {
  .stat-row-vals { font-size: 11.5px; }
  .h2h-row { grid-template-columns: 56px 1fr; }
  .h2h-row-comp { display: none; }
  .form-grid { padding: 14px; gap: 16px; }
  .lineup-dot { width: 46px; }
  .lineup-dot-name { font-size: 8.5px; }
}