/* =============================================
   FOOTBALL MANAGER - COMPLETE STYLESHEET
   ============================================= */

/* Inter was always first in the font stack but never actually shipped — every
   machine silently fell back to its system font. Vendored variable file covers
   every weight in one request. */
@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: dark;
  /* Neutral slate palette — desaturated from the old navy for a calmer,
     more professional read; only tokens changed, selectors untouched. */
  --bg0: #050506;
  --bg1: #0a0b0d;
  --bg2: #0e0f12;
  --bg3: #171a20;
  --bg4: #1d2129;
  --bg-card: #101319;
  --bg-hover: #171b22;
  --bg-active: #1f242e;

  /* Surface aliases — used throughout for component backgrounds */
  --surface2:   #0e1117;
  --surface-2:  #171a20;
  --surface-3:  #1d2129;

  --accent: #00d084;
  --accent2: #00b8d9;
  --accent-gold: #f5a623;
  --accent-red: #ff4d4d;
  --accent-blue: #4e9eff;
  --accent-purple: #a855f7;

  /* Club-identity brand color — overridden per-club at game start (applyClubTheme
     in start.js) from the real club's colour. Used only for pure UI chrome (sidebar
     active state, primary buttons, active tab pills); win/loss/finance/table-zone
     colors stay on the fixed --accent/--accent-red/--accent-gold tokens so their
     meaning never depends on which club you're managing. Defaults to --accent so
     the start screen (no club chosen yet) looks unchanged. */
  --brand: var(--accent);
  --brand-text: #04140d;

  --text: #e9ecf1;
  --text-primary: #e9ecf1;
  --text-muted: #8a919e;
  --text-dim: #4c525d;
  --text-neg: #ff6b6b;
  --border: #1e222a;
  --border-light: #2c323c;

  --sidebar-w: 236px;
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
  --shadow: 0 4px 16px rgba(0,0,0,0.32);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.5);
  --card-hi: inset 0 1px 0 rgba(255,255,255,0.03);
  --transition: 0.16s ease;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;

  /* League colors */
  --pl-purple: #38003c;
  --la-liga-orange: #ef7d00;
  --bundesliga-red: #d20515;
  --serie-a-blue: #003087;
  --ligue1-white: #091c3e;
}

html, body {
  height: 100%;
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: radial-gradient(1100px 420px at 75% -8%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%), var(--bg0);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Stats, tables and money read better with lining tabular figures */
table, .stat-big, .sb-mini-val, .sb-budget-val { font-variant-numeric: tabular-nums; }

/* ---- Shared flat "stat tile" look ----
   Every small filled chip/row across the app (budget breakdowns, bench/scout
   rows, wage items, knockout ties, cup group tiles) used a bare var(--bg3)
   fill with no border, which read as a flatter, disconnected surface next to
   the bordered cards around it. One shared hairline border unifies them. */
.cstat, .bench-player, .scout-player, .budget-item, .transfer-log-item,
.knockout-tie, .wage-item, .club-card-stat {
  border: 1px solid var(--border);
}

select, input, button, textarea { font-family: inherit; }

/* Keyboard focus, disabled state and text selection — consistent everywhere */
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); }
button:disabled, button.btn-disabled { opacity: 0.45; cursor: not-allowed; }
::selection { background: rgba(0,208,132,0.28); }

#app { width: 100%; height: 100dvh; overflow: hidden; position: relative; }

/* =============================================
   SCREENS
   ============================================= */
.screen {
  position: absolute;
  inset: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.screen.hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }
.screen.active { opacity: 1; pointer-events: all; transform: translateY(0); }

/* =============================================
   START SCREEN
   ============================================= */
#screen-start {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg0);
  overflow: hidden;
}
.start-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, #0d1f3c 0%, #080c14 60%),
              radial-gradient(ellipse at 70% 50%, #001a12 0%, transparent 60%);
}
.start-bg-overlay {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.floating-balls { position: absolute; inset: 0; pointer-events: none; }
.ball {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  opacity: 0.04;
  animation: floatBall 12s ease-in-out infinite;
}
.ball.b1 { top: 15%; left: 10%; animation-delay: 0s; }
.ball.b2 { top: 60%; right: 8%; animation-delay: 4s; width: 60px; height: 60px; }
.ball.b3 { top: 35%; left: 55%; animation-delay: 8s; width: 25px; height: 25px; }
@keyframes floatBall {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(180deg); }
}

.start-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  padding: 24px;
  height: 100dvh;
}

/* Home view — logo + menu buttons */
.home-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  gap: 40px;
}
.home-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 300px;
}
.home-btn {
  text-align: center;
  justify-content: center;
}

.game-logo {
  text-align: center;
  margin-bottom: 0;
}
.logo-emblem {
  width: 64px;
  height: 64px;
  margin: 0 auto 8px;
  filter: drop-shadow(0 0 20px rgba(0,208,132,0.5));
  animation: pulse 3s ease-in-out infinite;
}
.logo-emblem svg { width: 100%; height: 100%; display: block; }
@keyframes pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(0,208,132,0.5)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 30px rgba(0,208,132,0.8)); }
}
.game-title {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}
.game-title span {
  color: var(--accent);
  display: block;
  font-size: 48px;
}
.game-subtitle {
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 4px;
  margin-top: 6px;
}

/* Club selector */
.club-selector-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  width: 100%;
  max-width: 900px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.selector-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.selector-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.country-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.league-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
/* ---- Shared tab / filter pills ----
   One look for every tab strip in the game: league & country tabs, squad
   filters, transfer tabs, European sub-tabs, scout/facilities/player-modal/
   tactics tabs. Size modifiers follow the shared block. */
.ltab, .squad-filter-btn, .transfer-tab, .euro-sub-btn,
.scout-tab-btn, .fac-tab-btn, .pm-tab-btn, .tac-inner-tab-btn, .tac-squad-filter-btn {
  padding: 6px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  white-space: nowrap;
}
.ltab:hover, .squad-filter-btn:hover, .transfer-tab:hover, .euro-sub-btn:hover,
.scout-tab-btn:hover, .fac-tab-btn:hover, .pm-tab-btn:hover, .tac-inner-tab-btn:hover, .tac-squad-filter-btn:hover {
  background: var(--bg-hover); color: var(--text); border-color: var(--border-light);
}
.ltab.active, .squad-filter-btn.active, .transfer-tab.active, .euro-sub-btn.active,
.scout-tab-btn.active, .fac-tab-btn.active, .pm-tab-btn.active, .tac-inner-tab-btn.active, .tac-squad-filter-btn.active {
  background: var(--brand); color: var(--brand-text); border-color: var(--brand); font-weight: 700;
}
/* Size modifiers: view-level tab strips are a step bigger, dense toolbars a step smaller */
.scout-tab-btn, .fac-tab-btn { padding: 7px 18px; font-size: 13px; }
.tac-squad-filter-btn { padding: 4px 10px; font-size: 11px; }

.search-bar {
  position: relative;
  margin-bottom: 14px;
}
.search-bar input {
  width: 100%;
  padding: 9px 14px 9px 36px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: inherit;
  transition: var(--transition);
}
.search-bar input:focus { border-color: var(--accent); }
.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.clubs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  align-content: start;
}

.club-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 8px;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.club-card:hover { background: var(--bg-hover); border-color: var(--border-light); transform: translateY(-1px); }
.club-card.selected { border-color: var(--accent); background: rgba(0,208,132,0.08); }
.club-card-badge {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}
.club-card-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.club-card-rep {
  display: flex;
  gap: 2px;
}
.rep-star { font-size: 8px; color: var(--text-dim); }
.rep-star.lit { color: var(--accent-gold); }
.club-card-stats { display: flex; gap: 6px; margin-top: 5px; width: 100%; }
.club-card-stat { display: flex; flex-direction: column; align-items: center; flex: 1; background: var(--surface2); border-radius: 4px; padding: 3px 4px; }
.ccs-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.ccs-val { font-size: 11px; font-weight: 600; color: var(--text); }
.rep-star.half { background: linear-gradient(90deg, var(--accent-gold) 50%, var(--text-dim) 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Scenario picker — shares .club-selector-panel's chrome (border/radius/padding/
   max-width) but shouldn't stretch to fill the screen like the club grid does:
   with only a handful of cards that leaves a large empty void beneath them, so
   it shrink-wraps to content and centers itself the same way .club-confirm-panel
   does (margin: auto in a column flex parent), instead of flex:1. */
#scenario-picker-panel {
  flex: 0 1 auto;
  max-height: 85dvh;
  margin: auto;
}
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  flex: 0 1 auto;
  overflow-y: auto;
  padding-right: 4px;
  align-content: start;
}
.scenario-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scenario-card:hover { background: var(--bg-hover); border-color: var(--border-light); transform: translateY(-1px); }
.scenario-card-icon { font-size: 24px; line-height: 1; }
.scenario-card-name { font-size: 14px; font-weight: 700; color: var(--text); }
.scenario-card-tagline { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.scenario-active-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,208,132,0.08);
  border: 1px solid rgba(0,208,132,0.25);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text);
  margin-bottom: 10px;
}
.confirm-scenario-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,208,132,0.1);
  border: 1px solid rgba(0,208,132,0.3);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 14px;
}

/* Club confirm panel */
.club-confirm-panel {
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  width: 100%;
  max-width: 500px;
  text-align: center;
  animation: slideUp 0.3s ease;
  margin: auto;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.confirm-badge {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 900;
  color: #fff;
}
.confirm-info h2 { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.confirm-info p { color: var(--text-muted); font-size: 13px; }
.confirm-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}
.cstat {
  background: var(--bg3);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cstat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.cstat-val { font-size: 16px; font-weight: 700; color: var(--accent); }
.confirm-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.confirm-actions button { flex: 1; }

/* =============================================
   GAME LAYOUT
   ============================================= */
#screen-game {
  display: flex;
  height: 100dvh;
  overflow: hidden;
}

#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg1);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

.sidebar-club {
  padding: 20px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, transparent), transparent 85%), var(--bg1);
  text-align: center;
  position: relative;
}
.sb-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}
.sb-stat-sep {
  width: 1px;
  height: 24px;
  background: var(--border);
}
.sb-mini-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
}
.sb-mini-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.sb-mini-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 3px;
}
.sb-badge {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent), 0 6px 18px -6px color-mix(in srgb, var(--brand) 55%, transparent);
}
.sb-name { font-size: 14px; font-weight: 700; color: var(--text); display: block; }
.sb-league { font-size: 10px; color: var(--text-muted); display: block; margin-top: 1px; }

.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.snav-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.snav-btn:hover { background: var(--bg-hover); color: var(--text); }
.snav-btn.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 16%, transparent), color-mix(in srgb, var(--brand) 5%, transparent));
  color: var(--brand);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--brand);
}
.snav-icon { width: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.snav-icon svg { display: block; }

.sidebar-bottom {
  padding: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sb-budget-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sb-budget-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sb-budget-val { font-size: 13px; font-weight: 700; color: var(--accent); }
.sb-pos-val { color: var(--accent-gold); }
.sb-fin { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.sb-actions { display: flex; gap: 6px; margin-top: 4px; }
.sb-actions .btn-secondary { flex: 1; padding: 7px 4px; font-size: 11px; }

#main-content {
  flex: 1;
  overflow-y: auto;
  padding: 26px 30px 34px;
  background:
    radial-gradient(1100px 420px at 85% -10%, rgba(0,208,132,0.035), transparent 65%),
    var(--bg2);
}

/* =============================================
   DASHBOARD VIEW
   ============================================= */
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.view-title { font-size: 27px; font-weight: 800; color: var(--text); letter-spacing: -0.6px; }
.view-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.tac-summary-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tac-summary-pill {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 12px;
}
.view-rep-stars { margin-top: 4px; font-size: 15px; }
.confirm-rep-stars { margin-top: 6px; font-size: 20px; letter-spacing: 2px; }
.pm-prestige-stars { margin-top: 5px; font-size: 14px; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.dashboard-grid-2 {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--card-hi), 0 1px 2px rgba(0,0,0,0.25);
}
.card:hover { border-color: var(--border-light); }
.card-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 14px;
  font-weight: 700;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.card-header .card-title { margin-bottom: 0; }
.stat-big { font-size: 32px; font-weight: 800; color: var(--text); line-height: 1; letter-spacing: -0.5px; }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* Next Match card */
.next-match-card {
  background:
radial-gradient(600px 220px at 12% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 60%),
    linear-gradient(135deg, var(--bg3), var(--bg4));
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding: 22px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--card-hi), 0 1px 2px rgba(0,0,0,0.3), 0 14px 32px -18px rgba(0,0,0,0.6);
}
.next-match-card::before {
  content: '';
  position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 50%, transparent), transparent);
}

/* Pre-season dashboard: squad needs + quick actions */
.ps-need-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.ps-need-row:last-child { border-bottom: none; padding-bottom: 0; }
.ps-need-label { color: var(--text); font-weight: 600; }
.ps-need-count { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ps-need-count.thin { color: var(--accent-gold); }
.ps-need-ovr { color: var(--text-muted); font-size: 12px; min-width: 78px; text-align: right; }
.ps-quick-actions { display: flex; flex-direction: column; gap: 8px; }
.ps-quick-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: var(--transition);
}
.ps-quick-action:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.ps-qa-label { font-size: 13px; font-weight: 700; color: var(--text); }
.ps-qa-desc { font-size: 11px; color: var(--text-muted); }

/* Arrange-a-friendly modal */
.fr-select {
  width: 100%;
  margin-top: 6px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}
.fr-select:focus { outline: none; border-color: color-mix(in srgb, var(--brand) 55%, transparent); }
.fr-venue { display: flex; gap: 8px; margin-top: 6px; }
.fr-venue-btn.active {
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
  color: var(--text);
}
.next-match-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.next-match-comp {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-gold);
  font-weight: 700;
}
.next-match-date {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg3);
  padding: 3px 8px;
  border-radius: 4px;
}
.next-match-teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nm-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.nm-badge {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  color: #fff;
}
.nm-name { font-size: 15px; font-weight: 700; color: var(--text); text-align: center; }
.nm-rating { font-size: 11px; color: var(--text-muted); }
.nm-vs { font-size: 20px; font-weight: 800; color: var(--text-dim); }

/* Coach role monogram — replaces the old emoji icons */
.coach-mono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--bg3);
  border: 1px solid var(--border-light);
  font-size: 9px; font-weight: 800; letter-spacing: 0.03em; color: var(--text);
  vertical-align: -6px; margin-right: 4px;
}
.nm-venue { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 2px; }
.nm-finance {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
}
.nm-finance b { color: var(--accent); font-weight: 700; }

.nm-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* Form guide */
.form-guide {
  display: flex;
  gap: 4px;
  align-items: center;
}
.form-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.form-dot.W { background: var(--accent); color: #000; }
.form-dot.D { background: var(--accent-gold); color: #000; }
.form-dot.L { background: var(--accent-red); color: #fff; }
.form-dot.empty { background: var(--bg3); color: var(--text-dim); }

/* Recent results */
.results-list { display: flex; flex-direction: column; gap: 8px; }
.result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--bg3);
  border-radius: var(--r-sm);
  font-size: 12px;
}
.result-teams-mini { display: flex; align-items: center; gap: 6px; flex: 1; }
.result-score-mini {
  font-weight: 700;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 4px;
  min-width: 50px;
  text-align: center;
}
.result-score-mini.W { background: rgba(0,208,132,0.15); color: var(--accent); }
.result-score-mini.D { background: rgba(245,166,35,0.15); color: var(--accent-gold); }
.result-score-mini.L { background: rgba(255,77,77,0.15); color: var(--accent-red); }

/* =============================================
   SQUAD VIEW
   ============================================= */
.squad-summary-bar {
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, #151b28, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 20px;
  margin-bottom: 16px;
  box-shadow: var(--card-hi);
}
.ssb-stat { flex: 1; text-align: center; }
.ssb-val { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ssb-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; font-weight: 600; }
.ssb-sep { width: 1px; height: 30px; background: var(--border); flex-shrink: 0; }

.squad-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.squad-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.squad-table thead th {
  padding: 8px 12px;
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.squad-table thead th.sortable { cursor: pointer; }
.squad-table thead th.sortable:hover { color: var(--text); }
.squad-table thead th.th-c { text-align: center; }
.squad-table tbody tr {
  background: transparent;
  cursor: pointer;
  transition: var(--transition);
}
.squad-table tbody tr:hover { background: var(--bg-hover); }
.squad-table tbody td {
  padding: 10px 12px;
  font-size: 13px;
}
.squad-table tbody td { border-bottom: 1px solid var(--border); }
.squad-table tbody td:nth-child(4),
.squad-table tbody td:nth-child(9) { text-align: center; }

.player-num { color: var(--text-muted); font-size: 11px; width: 30px; }
.player-name-cell { font-weight: 600; }
.player-name-cell .player-nat { font-size: 10px; color: var(--text-muted); display: block; }
.pos-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Secondary positions shown after the primary badge, e.g. [LB] LW·LM */
.alt-pos {
  margin-left: 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  white-space: nowrap;
}
.pos-GK { background: rgba(255,193,7,0.15); color: #ffc107; }
.pos-DEF { background: rgba(33,150,243,0.15); color: var(--accent-blue); }
.pos-MID { background: rgba(76,175,80,0.15); color: #4caf50; }
.pos-ATT { background: rgba(255,77,77,0.15); color: var(--accent-red); }
.pos-RB, .pos-CB, .pos-LB { background: rgba(33,150,243,0.15); color: var(--accent-blue); }
.pos-CDM, .pos-CM, .pos-CAM, .pos-RM, .pos-LM { background: rgba(76,175,80,0.15); color: #4caf50; }
.pos-RW, .pos-LW, .pos-ST, .pos-CF { background: rgba(255,77,77,0.15); color: var(--accent-red); }

.ovr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 22px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
}
.ovr-90plus { background: rgba(0,208,132,0.2); color: var(--accent); }
.ovr-80plus { background: rgba(78,158,255,0.2); color: var(--accent-blue); }
.ovr-70plus { background: rgba(245,166,35,0.2); color: var(--accent-gold); }
.ovr-below70 { background: rgba(255,77,77,0.15); color: var(--accent-red); }

.stat-mini {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.value-cell { font-weight: 600; color: var(--accent-gold); }
.wage-cell { color: var(--text-muted); font-size: 12px; }
.contract-cell { font-size: 11px; color: var(--text-muted); }

/* =============================================
   TACTICS VIEW
   ============================================= */
.tactics-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
  height: calc(100dvh - 144px);
  overflow: hidden;
  align-items: stretch;
}
.tactics-pitch-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Portrait twin of #match-pitch-box: the pitch fills the card's leftover space,
   and its markings are fixed real-world sizes */
.tactics-pitch-box {
  flex: 1;
  min-height: 0;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tactics-pitch {
  position: relative;
  aspect-ratio: 68 / 105;                     /* only used when the height is free */
  /* Fill the box on BOTH axes. The only clamp is the geometric floor: below a
     56m playing length the two penalty areas (16.5m each) and the centre circle
     (18.3m) would collide, so a very wide box stops widening at 68/56 = 1.2143. */
  width:  min(100cqw, calc(100cqh * 1.2143));
  height: 100cqh;
  flex: none;
  /* Own container so the markings can be sized off the pitch's short axis (width) */
  container-type: inline-size;
  /* Same turf palette as the live match pitch (rotated 90° for portrait) */
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.030) 0 10%,
      rgba(0,0,0,0.055) 10% 20%),
    linear-gradient(180deg, #2a4d14 0%, #1e3d0d 25%, #183509 50%, #1e3d0d 75%, #2a4d14 100%);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1);
}
.tactics-pitch-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tp-center-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,0.25);
}
.tp-center-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26.91cqw;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
}
.tp-center-spot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
}
/* Fixed real-world sizes off the short axis (the 68m width): 1m = 1.47059cqw.
   Penalty area 40.32m × 16.5m, six-yard box 18.32m × 5.5m, centre circle 18.3m. */
.tp-penalty-top, .tp-penalty-bottom {
  position: absolute;
  left: 20.35%;
  right: 20.35%;
  height: 24.26cqw;
  border: 1px solid rgba(255,255,255,0.25);
}
.tp-penalty-top { top: 0; border-top: none; }
.tp-penalty-bottom { bottom: 0; border-bottom: none; }
.tp-six-top, .tp-six-bottom {
  position: absolute;
  left: 36.53%;
  right: 36.53%;
  height: 8.09cqw;
  border: 1px solid rgba(255,255,255,0.25);
}
.tp-six-top { top: 0; border-top: none; }
.tp-six-bottom { bottom: 0; border-bottom: none; }

.pitch-player { will-change: left, top;
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  z-index: 10;
}
.pitch-player-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #141821;
  border: 2px solid var(--brand);
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  transition: var(--transition);
}
.pitch-player-circle.gk { background: #141821; border-color: var(--accent-gold); color: #fff; }
.pitch-player-circle:hover { transform: scale(1.15); border-color: #fff; }
.pitch-player-name {
  font-size: 8px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  white-space: nowrap;
  background: rgba(0,0,0,0.6);
  padding: 1px 4px;
  border-radius: 2px;
}

/* ---- Out-of-position: circle border + bg shifts by severity ---- */
.pitch-player-circle.oop-minor   { border: 3px solid #f59e0b; }
.pitch-player-circle.oop-moderate{ border: 3px solid #f97316; background: #92400e; color: #fff; box-shadow: 0 0 8px rgba(249,115,22,0.55); }
.pitch-player-circle.oop-severe  { border: 3px solid #ef4444; background: #7f1d1d; color: #fca5a5; box-shadow: 0 0 10px rgba(239,68,68,0.65); }
.pitch-player-circle.oop-extreme { border: 3px solid #fca5a5; background: #450a0a; color: #fca5a5; box-shadow: 0 0 14px rgba(220,38,38,0.80); }
/* OOP label pill below the player name */
.pitch-player-oop {
  font-size: 7px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  white-space: nowrap;
  background: rgba(0,0,0,0.75);
  letter-spacing: 0.2px;
}
.pitch-player-oop.oop-minor   { color: #fbbf24; }
.pitch-player-oop.oop-moderate{ color: #fb923c; }
.pitch-player-oop.oop-severe  { color: #f87171; }
.pitch-player-oop.oop-extreme { color: #fca5a5; }

.pitch-player-circle.empty-slot { background: rgba(255,255,255,0.08); border: 2px dashed rgba(255,255,255,0.3); color: rgba(255,255,255,0.5); font-size: 8px; }
.pitch-player.swap-sel .pitch-player-circle { border-color: #fff; box-shadow: 0 0 0 3px var(--accent); transform: scale(1.15); }
.pitch-player.swap-dim { opacity: 0.4; }

/* ---- Fitness bar shown under each player on the substitution pitch ---- */
.pitch-fit-bar { width: 30px; height: 4px; margin-top: 1px; }
.pitch-player.sent-off { opacity: 0.55; }
.pitch-player.sent-off .pitch-player-circle { background: #3a1414; color: #fca5a5; border-color: #ef4444; }
.pitch-player-status {
  font-size: 7px; font-weight: 800; letter-spacing: 0.3px;
  padding: 1px 4px; border-radius: 2px; white-space: nowrap;
}
.pitch-player-status.status-red { background: rgba(239,68,68,0.85); color: #fff; }
.pitch-player-status.status-inj { background: rgba(234,179,8,0.85); color: #000; }

.pitch-swap-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 4px 8px; min-height: 32px;
}
.pitch-swap-hint { font-size: 11px; color: var(--accent-gold); font-weight: 600; }
.bench-chip {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 4px 8px; cursor: pointer;
  transition: var(--transition); font-size: 11px;
}
.bench-chip:hover { border-color: var(--text-muted); }
.bench-chip.swap-sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.bench-chip.swap-dim { opacity: 0.4; }
.bench-chip-name { font-weight: 600; }
.bench-chip-ovr { color: var(--text-muted); margin-left: 2px; }

.tactics-options-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  height: 100%;
  padding-right: 4px;
}

/* Inner tabs (Tactics / Squad) inside the options panel */
.tac-inner-tab-row { display: flex; gap: 6px; margin-bottom: 2px; flex-shrink: 0; }
.tactics-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
}
.tactics-section h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.formation-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.formation-btn {
  padding: 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.formation-btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-light); }
.formation-btn.selected { background: rgba(0,208,132,0.15); color: var(--accent); border-color: var(--accent); }

.mentality-btns {
  display: flex;
  gap: 6px;
}
.mentality-btn {
  flex: 1;
  padding: 8px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.mentality-btn:hover { background: var(--bg-hover); color: var(--text); }
.mentality-btn.selected { background: rgba(0,208,132,0.15); color: var(--accent); border-color: var(--accent); }

/* ---- Tactic option buttons (pressing / style) ---- */
.tac-btn-row { display: flex; gap: 6px; }
.tac-btn-col { display: flex; flex-direction: column; gap: 6px; }
.tac-opt-btn {
  padding: 8px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--bg3);
  color: var(--text-muted); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: var(--transition); font-family: inherit;
  flex: 1; min-width: 0; text-align: center;
}
.tac-opt-btn:hover { background: var(--bg-hover); color: var(--text); }
.tac-opt-btn.selected { background: rgba(0,208,132,0.15); color: var(--accent); border-color: var(--accent); }
.tac-opt-btn.wide { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.tac-opt-label { font-size: 12px; font-weight: 700; color: inherit; }
.tac-opt-desc { font-size: 10px; color: var(--text-muted); font-weight: 400; }
.tac-opt-btn.selected .tac-opt-desc { color: rgba(0,208,132,0.7); }

/* ---- Compact segmented tactic controls (Tactics screen) — a button row plus a single
   description line for whichever option is selected, instead of one per option ---- */
.tac-approach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 12px; }
@media (max-width: 1100px) { .tac-approach-grid { grid-template-columns: 1fr; } }
.tac-approach-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 12px; }
@media (max-width: 1100px) { .tac-approach-cols { grid-template-columns: 1fr; } }
.tac-approach-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tac-approach-col-title { font-size: 10px; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: -2px; }
.tac-style-group { border-top: 1px solid var(--border); padding-top: 12px; }

/* ---- Tactical Balance meters ---- */
.tac-balance-row { display: grid; grid-template-columns: 130px 1fr 28px; align-items: center; gap: 10px; margin-bottom: 10px; }
.tac-balance-row:last-child { margin-bottom: 0; }
.tac-balance-label { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.tac-balance-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; }
.tac-balance-fill { height: 100%; border-radius: 4px; transition: width 0.25s ease; }
.tac-balance-fill.atk { background: var(--accent); }
.tac-balance-fill.def { background: var(--accent-blue); }
.tac-balance-fill.risk { background: var(--accent-red); }
.tac-balance-val { font-size: 11px; font-weight: 700; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.tac-seg-group { min-width: 0; }
.tac-seg-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 6px; }
.tac-seg-row { display: flex; gap: 5px; flex-wrap: wrap; }
/* Style row has 6 options incl. long labels ("Gegenpressing") — a grid keeps each
   button a fixed 1/3-width cell so long text ellipsizes instead of blowing out the pill. */
.tac-seg-row-wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 6px; }
.tac-seg-btn {
  padding: 7px 8px; border-radius: 20px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.03);
  color: var(--text-muted); font-size: 11.5px; font-weight: 600;
  cursor: pointer; transition: var(--transition); font-family: inherit;
  flex: 1 1 0; min-width: 0; text-align: center;
}
.tac-seg-row-wrap .tac-seg-btn {
  font-size: 10.5px; padding: 7px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 480px) { .tac-seg-row-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tac-seg-btn:hover { background: var(--bg-hover); color: var(--text); }
.tac-seg-btn.selected { background: rgba(0,208,132,0.15); color: var(--accent); border-color: var(--accent); font-weight: 700; }
.tac-seg-desc { font-size: 10.5px; color: var(--text-muted); margin-top: 5px; line-height: 1.4; min-height: 14px; }

/* ---- Set pieces: attack/defence side by side ---- */
.tac-sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 1100px) { .tac-sp-grid { grid-template-columns: 1fr; } }
.tac-sp-col { display: flex; flex-direction: column; gap: 12px; }
.tac-sp-col-title { font-size: 10px; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }

/* ---- Tactical instruction toggles ---- */
.tac-toggle-row { display: flex; flex-direction: column; gap: 6px; }
.tac-toggle-btn {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 8px;
  padding: 10px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.tac-toggle-btn:hover { background: var(--bg-hover); }
.tac-toggle-btn.active { background: rgba(0,208,132,0.08); border-color: var(--accent); }
.tac-toggle-name { font-size: 12px; font-weight: 700; color: var(--text); grid-column: 1; grid-row: 1; }
.tac-toggle-desc { font-size: 10px; color: var(--text-muted); grid-column: 1; grid-row: 2; }
.tac-toggle-state {
  grid-column: 2; grid-row: 1 / 3;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--text-dim); padding: 3px 7px; border-radius: 4px;
  background: var(--bg3); border: 1px solid var(--border);
}
.tac-toggle-btn.active .tac-toggle-state { background: rgba(0,208,132,0.15); color: var(--accent); border-color: var(--accent); }

/* ---- Custom formation builder ---- */
.cf-builder { display: flex; flex-direction: column; gap: 8px; }
.cf-row { display: flex; align-items: center; gap: 8px; }
.cf-label { font-size: 11px; color: var(--text-muted); width: 32px; flex-shrink: 0; }
.cf-saved-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cf-saved-item { display: flex; align-items: center; gap: 2px; }
.cf-delete-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 10px; padding: 2px 4px; line-height: 1; border-radius: var(--r-sm); font-family: inherit;
}
.cf-delete-btn:hover { color: var(--accent-red); }
.cf-lines-toggle { display: flex; gap: 4px; margin-bottom: 10px; }
.cf-lines-btn {
  flex: 1; padding: 5px 0; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--bg3);
  color: var(--text-muted); font-size: 11px; font-weight: 700;
  cursor: pointer; transition: var(--transition); font-family: inherit;
}
.cf-lines-btn:hover { background: var(--bg-hover); color: var(--text); }
.cf-lines-btn.selected { background: rgba(0,208,132,0.15); color: var(--accent); border-color: var(--accent); }
.cf-stepper { display: flex; align-items: center; gap: 6px; }
.cf-step-btn {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--bg3);
  color: var(--text); font-size: 16px; font-weight: 700; line-height: 1;
  cursor: pointer; transition: var(--transition); font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.cf-step-btn:hover:not([disabled]) { background: var(--bg-hover); border-color: var(--border-light); }
.cf-step-btn[disabled] { opacity: 0.3; cursor: not-allowed; }
.cf-step-val { font-size: 15px; font-weight: 700; width: 20px; text-align: center; }
.cf-footer { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.cf-total { font-size: 11px; font-weight: 700; flex: 1; color: var(--text-muted); }
.cf-save { padding: 6px 14px; font-size: 11px; }
.cf-save[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---- Tactical matchup info in scout panel ---- */
.tac-matchup { margin: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.tac-matchup-row { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.tac-label { color: var(--text-muted); min-width: 70px; }
.tac-good { color: var(--accent); font-weight: 700; }
.tac-bad  { color: var(--accent-red); font-weight: 700; }
.tac-neutral { color: var(--text-muted); }
.tac-info { color: var(--text); font-weight: 500; }

/* Bench list */
.bench-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.bench-player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg3);
  border-radius: var(--r-sm);
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
}
.bench-player:hover { background: var(--bg-hover); }
.bench-pos { width: 32px; }
.bench-name { flex: 1; font-weight: 500; }
.bench-ovr { color: var(--text-muted); }

/* ---- Scout Panel ---- */
.scout-panel { border-top: 1px solid var(--border); margin-top: 4px; }
.scout-panel h3 { display: none; }
.scout-top { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.scout-venue {
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  padding: 2px 7px; border-radius: 10px;
}
.scout-venue.home { background: rgba(0,208,132,0.15); color: var(--accent); }
.scout-venue.away { background: rgba(78,158,255,0.15); color: var(--accent-blue); }
.scout-comp { font-size: 11px; color: var(--text-muted); flex: 1; }
.scout-dt { font-size: 11px; color: var(--text-muted); }
.scout-opp-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.scout-badge {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: #fff; flex-shrink: 0;
}
.scout-opp-info { flex: 1; min-width: 0; }
.scout-opp-name { font-size: 13px; font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scout-form { display: flex; gap: 3px; margin-top: 4px; }
.scout-ovr-block { text-align: center; flex-shrink: 0; }
.scout-ovr-val { display: block; font-size: 16px; font-weight: 800; color: var(--text); }
.scout-ovr-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
/* ---- Live xG preview strip at top of tactics options ---- */
.tac-xg-preview {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-bottom: 2px;
}
.tac-xg-you  { font-size: 20px; font-weight: 800; color: var(--accent); grid-column: 1; grid-row: 1; min-width: 40px; text-align: center; }
.tac-xg-opp  { font-size: 20px; font-weight: 800; color: var(--text-muted); grid-column: 3; grid-row: 1; min-width: 40px; text-align: center; }
.tac-xg-bar-wrap { grid-column: 2; grid-row: 1; height: 7px; background: rgba(255,77,77,0.25); border-radius: 4px; overflow: hidden; }
.tac-xg-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.25s ease; }
.tac-xg-label { grid-column: 1 / 4; grid-row: 2; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); text-align: center; }

.scout-xg-block { margin-bottom: 10px; }
.scout-xg-row { display: flex; align-items: center; gap: 8px; }
.scout-xg-num { font-size: 13px; font-weight: 700; color: var(--text-muted); min-width: 32px; text-align: center; }
.scout-xg-num.good { color: var(--accent); }
.scout-xg-num.bad  { color: var(--accent-red); }
.scout-xg-bar {
  flex: 1; height: 6px;
  background: rgba(255,77,77,0.25); border-radius: 3px; overflow: hidden;
}
.scout-xg-mine {
  height: 100%; background: var(--accent); border-radius: 3px;
  transition: width 0.3s ease;
}
.scout-xg-sub {
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--text-muted); margin-top: 4px; padding: 0 2px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.scout-key { display: flex; flex-direction: column; gap: 4px; }
.scout-key-label {
  font-size: 10px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.5px; font-weight: 600; margin-bottom: 2px;
}
.scout-player {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; background: var(--bg3); border-radius: var(--r-sm);
}
.scout-player-name { flex: 1; font-size: 12px; font-weight: 500; }

/* =============================================
   FIXTURES VIEW
   ============================================= */
.fixtures-list { width: 100%; }
.fixtures-month { margin-bottom: 20px; }
.fixtures-month-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.fixture-row {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-card);
  border-radius: var(--r-sm);
  margin-bottom: 4px;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
}
.fixture-row:hover { background: var(--bg-hover); border-color: var(--border); }
.fixture-row.next-fixture { border-color: var(--accent); background: rgba(0,208,132,0.06); }
.fixture-row.played { opacity: 0.75; }
.fixture-row.euro-fixture { border-left: 3px solid #c9a227; }
.fixture-row.euro-fixture .fixture-comp { color: #c9a227; }
.fixture-date { font-size: 11px; color: var(--text-muted); width: 80px; flex-shrink: 0; }
.fixture-comp { font-size: 10px; color: var(--text-dim); width: 100px; flex-shrink: 0; }
.fixture-teams {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.fixture-team-name { font-size: 13px; font-weight: 600; }
.fixture-score {
  font-size: 15px;
  font-weight: 800;
  min-width: 60px;
  text-align: center;
  padding: 3px 10px;
  border-radius: 5px;
}
.fixture-score.played.W { background: rgba(0,208,132,0.15); color: var(--accent); }
.fixture-score.played.D { background: rgba(245,166,35,0.15); color: var(--accent-gold); }
.fixture-score.played.L { background: rgba(255,77,77,0.15); color: var(--accent-red); }
.fixture-score.upcoming { color: var(--text-muted); background: var(--bg3); }
.fixture-venue {
  font-size: 10px;
  color: var(--text-dim);
  width: 180px;
  text-align: right;
}

/* =============================================
   TABLE VIEW
   ============================================= */
.table-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.ltab.tt-pinned {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}
.ltab.tt-pinned.active {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: #000;
}
.league-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 3px;
}
.league-table thead th {
  padding: 8px 10px;
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 600;
}
.league-table thead th:nth-child(2) { text-align: left; }
.league-table tbody tr {
  background: var(--bg-card);
  transition: var(--transition);
}
.league-table tbody tr:hover { background: var(--bg-hover); }
.league-table tbody tr.my-club { background: rgba(0,208,132,0.07); border: 1px solid rgba(0,208,132,0.2); }
.league-table tbody td {
  padding: 9px 10px;
  font-size: 12px;
  text-align: center;
}
.league-table tbody td:nth-child(2) { text-align: left; }
.league-table tbody td:first-child { border-radius: 5px 0 0 5px; padding-left: 11px; position: relative; }
.league-table tbody td:last-child { border-radius: 0 5px 5px 0; }

.table-pos { font-weight: 700; color: var(--text-muted); font-size: 13px; }
.table-pos-cell { border-left: 3px solid transparent; }
.table-pos-cell.championsleague { border-left-color: var(--accent-blue); }
/* A play-off spot is a place in that competition you still have to win, so it takes
   the competition's own colour lightened rather than one of its own: pale blue under
   the Champions League, pale orange under the Europa League gold. */
.table-pos-cell.clplayoff { border-left-color: #a9c6ff; }
.table-pos-cell.elplayoff { border-left-color: #f7b978; }
.table-pos-cell.europe { border-left-color: var(--accent-gold); }
.table-pos-cell.conference { border-left-color: var(--accent); }
.table-pos-cell.promotion { border-left-color: #22c55e; }
.table-pos-cell.playoff   { border-left-color: #86efac; }
.table-pos-cell.promoplayoff { border-left-color: #86efac; }
.table-pos-cell.relplayoff { border-left-color: #fca5a5; }
.table-pos-cell.relegation { border-left-color: var(--accent-red); }

.table-club { display: flex; align-items: center; gap: 8px; }
.table-badge { width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; color: #fff; flex-shrink: 0; }
.table-club-name { font-weight: 600; font-size: 13px; }
.pts-cell { font-weight: 800; font-size: 14px; }

.table-zone-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.tz { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); }
.tz-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.tz-dot.cl   { background: var(--accent-blue); }
.tz-dot.clpo { background: #a9c6ff; }
.tz-dot.elpo { background: #f7b978; }
.tz-dot.el   { background: var(--accent-gold); }
.tz-dot.conf { background: var(--accent); }
.tz-dot.prom { background: #22c55e; }
.tz-dot.po   { background: #86efac; }
.tz-dot.promoplayoff { background: #86efac; }
.tz-dot.relplayoff { background: #fca5a5; }
.tz-dot.rel  { background: var(--accent-red); }
/* Scotland's split: the halves are sealed, so the table gets a real dividing line
   rather than looking like it has sorted itself wrong. */
.league-table tbody tr.split-line td { box-shadow: inset 0 -2px 0 var(--border-light); }
.tz-split-mark { width: 14px; height: 0; border-top: 2px solid var(--border-light); flex-shrink: 0; }
/* The split explanation takes the full width of the zone strip — it reads as a
   sentence, not as another colour key alongside the dots. What each half is playing
   for stays with the dots themselves rather than being spelled out again here. */
.tz-split-note {
  flex-basis: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: rgba(127,127,127,0.06);
}
.tz-split-note .tz { align-items: flex-start; line-height: 1.5; }

/* =============================================
   TRANSFERS VIEW
   ============================================= */
.transfers-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
}
.transfer-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.transfer-search {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.transfer-search input {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.transfer-search input:focus { border-color: var(--accent); }
.transfer-search select {
  padding: 8px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 12px;
  outline: none;
  font-family: inherit;
  cursor: pointer;
}

/* ---- Market filter bar ----
   The market lists every player in the game, so these do the narrowing: value and
   rating bars that each read under-or-over, plus availability chips. */
.mkt-filters { margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.mkt-avail { display: flex; gap: 6px; flex-wrap: wrap; }
.mkt-avail .squad-filter-btn { padding: 4px 12px; font-size: 11px; }
.mkt-range-row { display: flex; gap: 12px; }
.mkt-range-block {
  flex: 1;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 12px 10px;
}
.mkt-range-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mkt-range-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); font-weight: 600; }
.mkt-range-val { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.mkt-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.mkt-seg-btn {
  padding: 2px 9px;
  border: none;
  background: var(--bg2);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
}
.mkt-seg-btn:hover { background: var(--bg-hover); color: var(--text); }
.mkt-seg-btn.active { background: var(--brand); color: var(--brand-text); }
.mkt-range { width: 100%; accent-color: var(--accent); cursor: pointer; height: 4px; }

.transfer-player-list { display: flex; flex-direction: column; gap: 6px; max-height: 500px; overflow-y: auto; }
.transfer-player-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: var(--transition);
}
.transfer-player-item:hover { background: var(--bg-hover); border-color: var(--border-light); }
.tp-pos { flex-shrink: 0; }
.tp-info { flex: 1; }
.tp-name { font-size: 13px; font-weight: 600; }
.tp-club { font-size: 11px; color: var(--text-muted); }
.tp-value { font-size: 13px; font-weight: 700; color: var(--accent-gold); }
.tp-ovr { font-size: 13px; font-weight: 700; color: var(--accent); }

/* Budget panel */
.budget-panel {
  background: linear-gradient(180deg, #151b28, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px;
  box-shadow: var(--card-hi);
}
.transfers-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.budget-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.budget-item { background: var(--bg3); border-radius: var(--r-sm); padding: 10px 12px; }
.budget-item-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.budget-item-val { font-size: 16px; font-weight: 700; color: var(--accent); margin-top: 4px; }
.budget-item-val.red { color: var(--accent-red); }

/* Transfer log */
.transfer-log { display: flex; flex-direction: column; gap: 6px; }
.transfer-log-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg3);
  border-radius: var(--r-sm);
  font-size: 12px;
}
.tlog-icon { font-size: 14px; }
.tlog-info { flex: 1; }
.tlog-fee { font-weight: 700; color: var(--accent-gold); }

/* =============================================
   EUROPEAN VIEW
   ============================================= */
.european-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.group-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.group-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px;
}
.group-title { font-size: 13px; font-weight: 700; color: var(--accent-gold); margin-bottom: 10px; }
.group-table { width: 100%; font-size: 11px; }
.group-table th { color: var(--text-muted); padding: 2px 4px; text-align: center; font-weight: 600; }
.group-table th:nth-child(2) { text-align: left; }
.group-table td { padding: 3px 4px; text-align: center; border-top: 1px solid var(--border); }
.group-table td:nth-child(2) { text-align: left; font-weight: 600; }
.group-table tr.my-club td { color: var(--accent); }

/* League phase (new UEFA format) — single standings table */
.lp-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12px; color: var(--text-muted); }
.lp-key { display: flex; align-items: center; gap: 6px; }
.lp-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.lp-dot.ko-direct { background: var(--accent); }
.lp-dot.ko-playoff { background: var(--accent-blue); }
.lp-table { width: 100%; font-size: 13px; border-collapse: separate; border-spacing: 0 2px; }
.lp-table th { color: var(--text-muted); padding: 6px 8px; text-align: center; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.lp-table th:nth-child(2) { text-align: left; }
.lp-table td { padding: 7px 8px; text-align: center; background: var(--bg-card); }
.lp-table tbody tr.my-club td { background: rgba(0,208,132,0.08); }
.lp-pos { font-weight: 700; color: var(--text-muted); width: 34px; padding-left: 11px !important; border-radius: 5px 0 0 5px; border-left: 3px solid transparent; }
.lp-pos.ko-direct { border-left-color: var(--accent); }
.lp-pos.ko-playoff { border-left-color: var(--accent-blue); }
.lp-club { text-align: left !important; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.lp-badge { width: 20px; height: 20px; border-radius: 3px; font-size: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.lp-badge img { width: 100%; height: 100%; object-fit: contain; }
.lp-table td:last-child { border-radius: 0 5px 5px 0; }

/* European sub-tabs (Table / Knockout) */
.euro-sub-tabs { display: flex; gap: 6px; margin: 10px 0 8px; }
.euro-sub-btn.disabled { opacity: 0.35; cursor: not-allowed; }

.knockout-bracket { display: flex; flex-direction: column; gap: 14px; }
.knockout-round { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 14px; }
.knockout-round-title { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.knockout-ties { display: flex; flex-direction: column; gap: 6px; }
.knockout-tie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--bg3);
  border-radius: var(--r-sm);
  font-size: 12px;
  gap: 8px;
}
.knockout-tie.my-match { border: 1px solid var(--accent); background: rgba(0,208,132,0.07); }
.knockout-tie.two-leg { align-items: center; }
.ko-team { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.ko-team:last-child { flex-direction: row-reverse; text-align: right; }
.ko-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ko-team.ko-winner span { font-weight: 700; color: var(--accent); }
.ko-badge { width: 22px; height: 22px; border-radius: 3px; font-size: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ko-badge img { width: 100%; height: 100%; object-fit: contain; }
.ko-badge-lg { width: 32px; height: 32px; border-radius: 4px; font-size: 10px; display: flex; align-items: center; justify-content: center; }
.ko-badge-lg img { width: 100%; height: 100%; object-fit: contain; }
.ko-score { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.ko-two-leg-scores { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ko-agg { font-size: 13px; font-weight: 700; color: var(--text); }
.ko-legs { font-size: 10px; color: var(--text-muted); letter-spacing: 0.3px; }
.ko-pens { font-size: 9px; color: var(--text-muted); font-weight: 400; }
.knockout-tie.pending { opacity: 0.85; }
.knockout-tie.pending .ko-score, .knockout-tie.pending .ko-agg { color: var(--text-muted); font-weight: 600; }
.ko-inprogress { font-size: 10px; font-weight: 600; color: var(--accent-gold); text-transform: none; letter-spacing: 0; margin-left: 6px; }

/* =============================================
   FINANCES VIEW
   ============================================= */
.finances-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.finances-grid.fin-3col { grid-template-columns: 1fr 1fr 1fr; }

/* Cash flow panel */
.fin-cashflow { display: flex; flex-direction: column; gap: 5px; }
.fin-cf-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.fin-cf-label { color: var(--text-muted); }
.fin-cf-pos { color: var(--accent); font-weight: 600; }
.fin-cf-neg { color: var(--accent-red); font-weight: 600; }
.fin-cf-divider { height: 1px; background: var(--border); margin: 4px 0; }
.fin-cf-total { font-size: 13px; padding-top: 2px; }

/* Wage cap bar */
.fin-wage-cap { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.fin-wage-bar-track { height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; }
.fin-wage-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s; }
.fin-wage-cap-labels { display: flex; justify-content: space-between; font-size: 11px; }

/* Sponsor block */
.fin-sponsor-block { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.fin-sponsor-tier { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; padding: 2px 7px; border-radius: 10px; margin-bottom: 4px; width: fit-content; }
.fin-sponsor-tier.tier-1 { background: rgba(139,92,246,0.15); color: #a78bfa; }
.fin-sponsor-tier.tier-2 { background: rgba(245,166,35,0.15); color: var(--accent-gold); }
.fin-sponsor-tier.tier-3 { background: rgba(0,208,132,0.15); color: var(--accent); }
.fin-sponsor-name { font-size: 15px; font-weight: 700; }
.fin-sponsor-value { font-size: 13px; color: var(--accent); font-weight: 600; }
.fin-sponsor-left { font-size: 11px; color: var(--text-muted); }

/* Balance-history chart hover layer */
.bal-chart-wrap { position: relative; }
.bal-chart-capture { pointer-events: all; cursor: crosshair; }
.bal-chart-crosshair, .bal-chart-dot { pointer-events: none; }
.bal-chart-tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: none;
  background: var(--bg4);
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 11px;
  white-space: nowrap;
  box-shadow: var(--shadow);
  z-index: 5;
}
.bal-tt-date { color: var(--text-muted); margin-bottom: 2px; }
.bal-tt-val { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Board confidence meter */
.fin-board-meter { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.fin-board-track { height: 10px; background: var(--bg3); border-radius: 5px; overflow: hidden; }
.fin-board-fill { height: 100%; border-radius: 5px; transition: width 0.5s; }
.fin-board-vals { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }
.finances-chart-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fin-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.fin-bar-label { width: 100px; color: var(--text-muted); flex-shrink: 0; text-align: right; }
.fin-bar-track { flex: 1; height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; }
.fin-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.fin-bar-fill.income { background: var(--accent); }
.fin-bar-fill.expense { background: var(--accent-red); }
.fin-bar-val { width: 70px; font-weight: 700; }
.fin-bar-val.pos { color: var(--accent); }
.fin-bar-val.neg { color: var(--accent-red); }

.wage-breakdown { display: flex; flex-direction: column; gap: 6px; }
.wage-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--bg3);
  border-radius: var(--r-sm);
  font-size: 12px;
}
.wage-item-name { font-weight: 600; }
.wage-item-amount { color: var(--accent-red); font-weight: 700; }

/* =============================================
   MATCH SCREEN
   ============================================= */
#screen-match {
  background: var(--bg0);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#match-wrapper {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}
#match-header {
  background: var(--bg1);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.btn-exit-match {
  padding: 6px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
}
.btn-exit-match:hover { background: var(--accent-red); color: #fff; border-color: var(--accent-red); }

.match-teams {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.match-team {
  display: flex;
  align-items: center;
  gap: 12px;
}
.match-team.away { flex-direction: row-reverse; }
.match-badge {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
}
.match-team span { font-size: 18px; font-weight: 800; }

.match-scoreboard { text-align: center; }
.match-score { font-size: 42px; font-weight: 900; color: #fff; line-height: 1; min-width: 120px; }
.match-time { font-size: 14px; color: var(--accent); font-weight: 700; text-align: center; }
.match-agg { font-size: 11px; font-weight: 700; color: var(--accent-gold); letter-spacing: 0.5px; margin-top: 1px; }
.match-status { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

#match-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 320px;
  overflow: hidden;
  padding: 16px;
  gap: 16px;
  min-height: 0;
}
#match-pitch-side { display: flex; flex-direction: column; gap: 12px; position: relative; }
/* The tilted pitch is a stacking context that would otherwise paint over its
   in-flow siblings — keep the stats bar above it */
#match-stats-bar { position: relative; z-index: 2; }
/* The pitch fills the space it is given rather than being letterboxed — the
   markings inside are fixed real-world sizes, so a wider box just means a longer
   pitch. Nothing is clamped except the 56m collision floor. */
#match-pitch-box {
  flex: 1;
  min-height: 0;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
}
#match-pitch-frame {
  position: relative;
  perspective: 1500px;
  aspect-ratio: 105 / 68;                     /* only used when the height is free */
  /* Fill the box on BOTH axes — a wider box just means a longer pitch. The only
     clamp is the geometric floor: below a 56m playing length the two penalty
     areas (16.5m each) and the centre circle (18.3m) would collide, so a tall
     box stops growing at 68/56 = 1.2143. */
  width:  100cqw;
  height: min(100cqh, calc(100cqw * 1.2143));
}
#match-pitch {
  position: absolute;
  inset: 0;
  /* Own container so the markings can be sized off the pitch's short axis */
  container-type: size;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.030) 0 10%,
      rgba(0,0,0,0.055) 10% 20%),
    linear-gradient(90deg, #2a4d14 0%, #1e3d0d 25%, #183509 50%, #1e3d0d 75%, #2a4d14 100%);
  border-radius: var(--r);
  overflow: hidden;
  /* Drawn as an inset ring, not a border: a border would shrink the box the
     markings are laid out against and knock them off true scale */
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- 3D ANGLED CAMERA VIEW ---- */
/* scaleY compensates the vertical foreshortening of the tilt; slight scaleX pull-in
   keeps the perspective-widened near edge inside the column */
#match-pitch.view-3d {
  transform: rotateX(30deg) scaleY(1.17) scaleX(0.94);
  transform-origin: 50% 55%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1), 0 24px 40px -18px rgba(0,0,0,0.65);
}
/* Depth haze: far edge of the pitch fades slightly, like a TV camera shot */
#match-pitch.view-3d::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, rgba(8,14,6,0.38) 0%, rgba(8,14,6,0.06) 32%, transparent 55%);
}

.pitch-view-toggle {
  position: absolute; top: 8px; right: 8px; z-index: 40;
  background: rgba(10,16,10,0.72); color: #fff;
  border: 1px solid rgba(255,255,255,0.22); border-radius: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
  padding: 5px 10px; cursor: pointer; font-family: inherit;
  transition: background 0.2s, border-color 0.2s;
}
.pitch-view-toggle:hover { background: rgba(20,32,20,0.9); border-color: rgba(255,255,255,0.45); }

/* ---- HORIZONTAL PITCH MARKINGS ---- */
/* The turf stretches to fill whatever space it gets (a real pitch is anywhere from
   90m to 120m long), but every marking is a FIXED real-world size, so they are all
   measured off the SHORT axis — the 68m width, i.e. the container height minus the
   3cqh run-off at each touchline. That makes 1m = 1.38235cqh, horizontally and
   vertically, so boxes, circles and goals keep their true shape at any width. */
.pitch-markings { position: absolute; inset: 0; pointer-events: none; }
.pm-border { position:absolute; inset:3cqh; border:2px solid rgba(255,255,255,0.22); border-radius:2px; }
.pm-halfway { position:absolute; left:50%; top:3cqh; bottom:3cqh; width:1px; background:rgba(255,255,255,0.22); transform:translateX(-50%); }
/* Centre circle, 9.15m radius */
.pm-center-circle { position:absolute; left:50%; top:50%; width:25.3cqh; aspect-ratio:1; border:1px solid rgba(255,255,255,0.22); border-radius:50%; transform:translate(-50%,-50%); }
.pm-center-dot { position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.5); transform:translate(-50%,-50%); }
/* Penalty area 40.32m × 16.5m */
.pm-penalty-left  { position:absolute; left:3cqh;  top:22.13cqh; height:55.74cqh; width:22.81cqh; border:1px solid rgba(255,255,255,0.22); border-left:none; }
.pm-penalty-right { position:absolute; right:3cqh; top:22.13cqh; height:55.74cqh; width:22.81cqh; border:1px solid rgba(255,255,255,0.22); border-right:none; }
/* Goal area (six-yard box) 18.32m × 5.5m */
.pm-six-left  { position:absolute; left:3cqh;  top:37.34cqh; height:25.32cqh; width:7.6cqh; border:1px solid rgba(255,255,255,0.22); border-left:none; }
.pm-six-right { position:absolute; right:3cqh; top:37.34cqh; height:25.32cqh; width:7.6cqh; border:1px solid rgba(255,255,255,0.22); border-right:none; }
/* Penalty spot 11m out */
.pm-spot-left,.pm-spot-right { position:absolute; top:50%; width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,0.45); transform:translate(-50%,-50%); }
.pm-spot-left  { left:18.21cqh; }
.pm-spot-right { right:18.21cqh; transform:translate(50%,-50%); }
/* Penalty arc: 9.15m radius from the spot, only the part outside the box */
.pm-arc-left,.pm-arc-right { position:absolute; top:50%; width:25.3cqh; aspect-ratio:1; border:1px solid rgba(255,255,255,0.22); border-radius:50%; transform:translateY(-50%); }
.pm-arc-left  { left:5.56cqh;  clip-path:inset(0 0 0 80%); }
.pm-arc-right { right:5.56cqh; clip-path:inset(0 80% 0 0); }
/* Goals: 7.32m mouth, ~2m deep, behind the goal line */
.pm-goal-left,.pm-goal-right {
  position:absolute; top:44.94cqh; height:10.12cqh; width:2.76cqh;
  border:2px solid rgba(255,255,255,0.55);
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 4px);
}
.pm-goal-left  { left:0.24cqh;  border-right:none; }
.pm-goal-right { right:0.24cqh; border-left:none; }
/* Corner arcs, 1m radius */
.pm-corner { position:absolute; width:2.76cqh; aspect-ratio:1; border:1px solid rgba(255,255,255,0.22); border-radius:50%; }
.pm-corner.tl { left:3cqh; top:3cqh; clip-path:inset(50% 0 0 50%); transform:translate(-50%,-50%); }
.pm-corner.tr { right:3cqh; top:3cqh; clip-path:inset(50% 50% 0 0); transform:translate(50%,-50%); }
.pm-corner.bl { left:3cqh; bottom:3cqh; clip-path:inset(0 0 50% 50%); transform:translate(-50%,50%); }
.pm-corner.br { right:3cqh; bottom:3cqh; clip-path:inset(0 50% 50% 0); transform:translate(50%,50%); }

/* ---- PITCH LAYERS ---- */
#pitch-events  { position: absolute; inset: 0; pointer-events: none; }
#pitch-card {
  position: absolute; width: 22px; height: 30px; border-radius: 3px;
  display: none; z-index: 20; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.7); transform: translate(-50%,-130%);
}
#pitch-card.card-visible { display: block; animation: cardPop 0.45s cubic-bezier(0.34,1.56,0.64,1); }
#pitch-card.card-yellow { background: #f5c518; }
#pitch-card.card-red    { background: #ff3b30; }
@keyframes cardPop {
  0%   { transform: translate(-50%,-50%) scale(0.1); opacity:0; }
  70%  { transform: translate(-50%,-145%) scale(1.15); opacity:1; }
  100% { transform: translate(-50%,-130%) scale(1); opacity:1; }
}

.team-color-swatch {
  display: inline-block; flex-shrink: 0;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.75);
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
}
.pitch-event-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: popIn 0.5s ease;
}
@keyframes popIn {
  0% { transform: translate(-50%, -50%) scale(0); }
  60% { transform: translate(-50%, -50%) scale(1.4); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.pitch-event-dot.goal   { background: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,0.8); }
.pitch-event-dot.yellow { background: var(--accent-gold); box-shadow: 0 0 8px rgba(245,166,35,0.7); }
.pitch-event-dot.red    { background: var(--accent-red);  box-shadow: 0 0 8px rgba(255,77,77,0.7); }
.pitch-event-dot.shot   { background: var(--accent-blue); box-shadow: 0 0 8px rgba(78,158,255,0.7); }
.pitch-event-dot.foul   { background: #ff7c00; box-shadow: 0 0 8px rgba(255,124,0,0.7); }
.pitch-event-dot.penalty { background: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,0.8); }

#match-stats-bar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat-row {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.stat-row span { text-align: center; font-weight: 700; transition: color 0.3s; }
.stat-row label { display: none; }
.stat-bar-wrap { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
#momentum-box { flex-shrink: 0; margin-top: 10px; }
#momentum-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
#momentum-graph {
  display: block;
  width: 100%;
  height: 44px;
  color: var(--text-muted);
  background: var(--surface-3);
  border-radius: 3px;
}
.ht-momentum { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.ht-momentum b { color: var(--text-primary); }
.stat-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s ease; }

#match-events-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#match-events-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
#match-events-panel h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 10px;
  flex-shrink: 0;
}
#match-events-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.match-event {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: 12px;
  animation: slideIn 0.3s ease;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
.match-event.goal { background: rgba(0,208,132,0.1); border-left: 2px solid var(--accent); }
.match-event.yellow { background: rgba(245,166,35,0.1); border-left: 2px solid var(--accent-gold); }
.match-event.red { background: rgba(255,77,77,0.1); border-left: 2px solid var(--accent-red); }
.match-event.sub { background: rgba(78,158,255,0.1); border-left: 2px solid var(--accent-blue); }
.match-event.commentary { background: transparent; border-left: 2px solid var(--border); color: var(--text-muted); font-style: italic; }
.match-event.commentary .event-min { color: var(--text-dim); }
.match-event.commentary.summary { background: rgba(255,255,255,0.04); border-left: 2px solid var(--text-dim); color: var(--text); font-style: normal; font-weight: 600; }
.cmnt-score { opacity: 0.6; font-size: 0.92em; font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* League player-stat leaderboards */
.table-mode-tabs { display: flex; gap: 6px; margin: 10px 0 2px; }
.ls-note { color: var(--text-dim); font-size: 0.85em; margin-top: 10px; }
/* Fixed 2×2: Scorers | Assists on top, Best Rated | Top Saves below — minmax(0,1fr)
   lets the columns actually shrink so nothing overflows the view. */
.league-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.ls-panel { min-width: 0; overflow: hidden; }
.ls-table { width: 100%; table-layout: auto; }
@media (max-width: 900px) { .league-stats-grid { grid-template-columns: 1fr; } }
.ls-panel { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; }
.ls-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; }
.ls-table { margin: 0; }
.ls-table th, .ls-table td { padding: 5px 8px; }
.ls-club-cell { color: var(--text-muted); font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.ls-empty { color: var(--text-dim); font-style: italic; padding: 8px 2px; font-size: 0.9em; }
.ls-yc { color: #f5a623; font-weight: 700; }
.ls-rc { color: #ff4d4d; font-weight: 700; margin-left: 2px; }

/* News article pop-ups + clickable inbox stories */
.inbox-msg.has-article { cursor: pointer; }
.inbox-msg.has-article:hover { background: var(--bg-hover); }
.news-modal { max-width: 560px; }
.news-article .news-headline { font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -0.3px; margin-bottom: 6px; }
.news-article .news-meta { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 12px; }
.news-article p { font-size: 13.5px; line-height: 1.65; color: var(--text); margin: 0 0 12px; }
.news-article p:last-child { margin-bottom: 0; }
.news-modal-actions { text-align: right; margin-top: 14px; }
.inbox-msg.award .inbox-msg-icon { color: var(--accent-gold); }
.event-min { color: var(--text-muted); font-weight: 600; min-width: 28px; }
.event-icon { display: flex; align-items: center; min-width: 14px; flex-shrink: 0; }
.event-desc { flex: 1; }
.event-team { font-size: 10px; color: var(--text-dim); }
.match-event.sub .event-icon { min-width: 0; width: 0; overflow: hidden; }

/* ---- HALFTIME PANEL ---- */
#halftime-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.ht-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  flex-shrink: 0;
}
.ht-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 700;
}
.ht-halfscore {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
}
.ht-body {
  flex: 1;
  overflow-y: auto;
}
.ht-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.ht-tac-section {
  margin-bottom: 12px;
}
.ht-tac-section h4 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.ht-talk-flavor {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--bg3);
  border: 1px solid var(--border);
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
}
/* In-match subs modal */
.subs-modal { min-width: 360px; max-width: 480px; width: 100%; }
.subs-modal-header { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.subs-used-badge { font-size: 11px; font-weight: 500; color: var(--text-muted); background: var(--surface2); border-radius: 10px; padding: 2px 8px; }
.subs-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.subs-hint.active { color: var(--accent); }
.subs-pitch-wrap { border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
/* In the subs modal the pitch has no fixed height to fit into — it takes the
   modal's width and derives its height from the same 68:105 aspect */
.subs-pitch-wrap .tactics-pitch-box { display: block; container-type: inline-size; }
.subs-pitch-wrap .tactics-pitch { width: 100%; height: auto; }
.subs-bench-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.bench-chip-dim { opacity: 0.4; pointer-events: none; }
.sub-sel-circle { outline: 3px solid var(--accent-red) !important; outline-offset: 2px; }

#match-controls {
  padding: 14px 24px;
  display: flex;
  gap: 12px;
  justify-content: center;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ---- Penalty Shootout Overlay ---- */
#penalty-shootout-overlay {
  position: absolute; inset: 0;
  background: rgba(8,12,20,0.95);
  display: flex; align-items: center; justify-content: center;
  z-index: 110; backdrop-filter: blur(6px);
  animation: fadeIn 0.3s ease;
}
.pen-box {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); width: min(460px, 96vw); padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
  max-height: 92vh; overflow-y: auto;
}
.pen-header { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.pen-scoreboard { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pen-team { font-size: 13px; font-weight: 700; color: var(--text); flex: 1; }
.pen-team:last-child { text-align: right; }
.pen-score { font-size: 28px; font-weight: 800; color: var(--accent); text-align: center; min-width: 80px; }
.pen-dots-area { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.pen-dots-row { display: flex; align-items: center; gap: 6px; }
.pen-dot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--bg3);
  transition: background 0.3s, border-color 0.3s, transform 0.2s;
}
.pen-dot.scored  { background: #22c55e; border-color: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.6); }
.pen-dot.missed  { background: #ef4444; border-color: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.6); }
.pen-dot.current { border-color: var(--accent); animation: pen-pulse 0.8s ease-in-out infinite; }
@keyframes pen-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.pen-dot-label { font-size: 10px; color: var(--text-muted); min-width: 60px; }
.pen-dot-label.right { text-align: right; min-width: 60px; }
.pen-commentary {
  min-height: 48px; font-size: 13px; color: var(--text); text-align: center;
  padding: 10px; background: var(--bg2); border-radius: var(--r-sm);
  border: 1px solid var(--border); line-height: 1.5;
}
.pen-picker-title { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.pen-picker-lists { display: flex; gap: 10px; }
.pen-squad-list { flex: 1; display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.pen-squad-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r-sm); cursor: pointer; font-size: 12px;
  transition: border-color 0.15s, background 0.15s;
}
.pen-squad-item:hover { background: var(--bg-hover); border-color: var(--accent); }
.pen-squad-item.picked { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.pen-squad-ovr { font-size: 10px; color: var(--text-muted); }
.pen-selected-area { width: 100px; flex-shrink: 0; }
.pen-selected-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.pen-selected-list { display: flex; flex-direction: column; gap: 4px; }
.pen-selected-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; background: rgba(0,208,132,0.1); border: 1px solid var(--accent);
  border-radius: var(--r-sm); cursor: pointer; font-size: 11px;
}
.pen-selected-item:hover { background: rgba(239,68,68,0.15); border-color: #ef4444; }
.pen-sel-num { font-size: 10px; color: var(--accent); font-weight: 700; min-width: 14px; }
.pen-sd-banner { text-align: center; font-size: 12px; font-weight: 700; color: var(--accent-gold); letter-spacing: 2px; text-transform: uppercase; padding: 4px 0; }

#match-result-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8,12,20,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.4s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.result-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: center;
  max-width: 500px;
  width: 100%;
  animation: slideUp 0.4s ease;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.result-scroll-content {
  padding: 32px 32px 0;
  overflow-y: auto;
  flex: 1;
}
.result-footer {
  padding: 16px 32px 24px;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}
.result-box h2 { font-size: 16px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; }
.result-score-big { font-size: 56px; font-weight: 900; color: #fff; line-height: 1; margin-bottom: 6px; }
.result-aet { font-size: 16px; font-weight: 700; color: var(--text-muted); letter-spacing: 1px; vertical-align: middle; }
.result-teams { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; }
.result-scorers { margin-bottom: 16px; text-align: left; }
.result-scorer-item { font-size: 12px; padding: 3px 0; color: var(--text-muted); display: flex; gap: 6px; }
.result-scorer-item .scorer-name { color: var(--text); font-weight: 600; }
.result-scorer-item .scorer-team { color: var(--accent); }

.player-ratings-section { margin-top: 16px; text-align: left; }
.player-ratings-section h4 { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.player-rating-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  font-size: 12px;
  margin-bottom: 2px;
}
.pr-name { flex: 1; font-weight: 500; }
.pr-sub {
  display: inline-block; margin-left: 6px; padding: 1px 5px;
  border-radius: var(--r-sm); background: var(--surface-3);
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-muted);
  vertical-align: middle;
}
.pr-rating {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.pr-rating.excellent { background: rgba(0,208,132,0.2); color: var(--accent); }
.pr-rating.good { background: rgba(78,158,255,0.2); color: var(--accent-blue); }
.pr-rating.average { background: rgba(245,166,35,0.2); color: var(--accent-gold); }
.pr-rating.poor { background: rgba(255,77,77,0.15); color: var(--accent-red); }

/* =============================================
   PLAYER MODAL
   ============================================= */
.player-modal {
  padding: 4px;
}
.pm-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.pm-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}
.pm-info h2 { font-size: 18px; font-weight: 800; }
.pm-info p { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.pm-badges { display: flex; gap: 6px; margin-top: 8px; }

.pm-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.pm-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg3);
  border-radius: var(--r-sm);
  font-size: 13px;
}
.pm-stat-name { color: var(--text-muted); }
.pm-stat-val { font-weight: 700; color: var(--text); }

.pm-tab-row { display: flex; gap: 6px; margin-bottom: 14px; }

.pm-pot-tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,0.07); }

.pm-attr-bar-list { margin-bottom: 4px; }
.pm-attr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.pm-attr-label { font-size: 11px; color: var(--text-muted); width: 76px; flex-shrink: 0; }
.pm-attr-track { flex: 1; height: 8px; background: var(--bg3); border-radius: 3px; overflow: hidden; position: relative; }
.pm-attr-pot-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 3px; background: rgba(255,255,255,0.16); }
.pm-attr-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 3px; }
.pm-attr-val { font-size: 11px; font-weight: 700; width: 22px; text-align: right; flex-shrink: 0; }
.pm-pot-stat-val { font-size: 10px; color: var(--text-muted); width: 22px; text-align: right; font-weight: 600; flex-shrink: 0; }

.pm-spider-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 10px; padding: 10px 8px 8px; background: var(--bg3); border-radius: var(--r); }
.pm-spider-legend { display: flex; gap: 14px; margin-top: 6px; font-size: 11px; color: var(--text-muted); }
.pm-legend-item { display: flex; align-items: center; gap: 5px; }
.pm-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.pm-legend-dot.current { background: #00d084; }
.pm-legend-dot.potential { background: transparent; border: 1.5px dashed rgba(255,255,255,0.3); }

.pm-actions { display: flex; gap: 8px; }

/* Squad potential tag */
.squad-pot-tag { font-size: 10px; color: var(--accent-gold); margin-left: 4px; font-weight: 600; vertical-align: middle; }

/* =============================================
   BUTTONS
   ============================================= */
.btn-primary {
  padding: 9px 20px;
  border-radius: var(--r-sm);
  border: none;
  background: var(--brand);
  color: var(--brand-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  white-space: nowrap;
}
.btn-primary:hover { background: color-mix(in srgb, var(--brand) 86%, white); }
.btn-primary:active { transform: none; box-shadow: none; }

.btn-warning { padding: 9px 20px; border-radius: var(--r-sm); border: 1px solid var(--accent-gold); background: rgba(245,166,35,0.12); color: var(--accent-gold); font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition); white-space: nowrap; }
.btn-warning:hover { background: rgba(245,166,35,0.22); }
.btn-secondary {
  padding: 9px 20px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  white-space: nowrap;
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-light); }

.btn-danger {
  padding: 9px 20px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,77,77,0.3);
  background: rgba(255,77,77,0.1);
  color: var(--accent-red);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  white-space: nowrap;
}
.btn-danger:hover { background: var(--accent-red); color: #fff; }

.btn-gold {
  padding: 9px 20px;
  border-radius: var(--r-sm);
  border: none;
  background: var(--accent-gold);
  color: #000;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  white-space: nowrap;
}
.btn-gold:hover { background: #ffb830; }

/* Size modifiers shared by every button variant. Declared after the variants
   so they win the equal-specificity cascade (btn-sm/btn-xs used to sit before
   .btn-secondary and silently lost their padding). */
.btn-lg { padding: 11px 28px; font-size: 14px; }
.btn-sm { padding: 5px 12px; font-size: 12px; flex-shrink: 0; }
.btn-xs { padding: 3px 9px; font-size: 11px; flex-shrink: 0; }

/* =============================================
   MODAL
   ============================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2,5,10,0.72);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(7px);
  animation: fadeIn 0.2s ease;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px 32px;
  max-width: 600px;
  width: calc(100% - 32px);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: slideUp 0.25s ease;
  margin: 16px;
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--bg3);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.modal-close:hover { background: var(--accent-red); color: #fff; }

/* =============================================
   TOAST
   ============================================= */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(31,41,64,0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-light);
  border-radius: var(--r);
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 500;
  z-index: 2000;
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.25s ease;
  max-width: 320px;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.toast.hidden { display: none; }
.toast.success { border-color: var(--accent); color: var(--accent); background-image: linear-gradient(rgba(0,208,132,0.08), rgba(0,208,132,0.08)); }
.toast.error { border-color: var(--accent-red); color: var(--accent-red); background-image: linear-gradient(rgba(255,77,77,0.08), rgba(255,77,77,0.08)); }
.toast.info { border-color: var(--accent-blue); color: var(--accent-blue); background-image: linear-gradient(rgba(78,158,255,0.08), rgba(78,158,255,0.08)); }
.toast.warning { border-color: var(--accent-gold); color: var(--accent-gold); background-image: linear-gradient(rgba(245,166,35,0.08), rgba(245,166,35,0.08)); }

/* =============================================
   UTILITY
   ============================================= */
.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-gold { color: var(--accent-gold); }
.text-red { color: var(--accent-red); }
.text-blue { color: var(--accent-blue); }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--text-muted);
  gap: 8px;
  text-align: center;
}
/* Card variant for whole-view empties — reads as a deliberate state, not a blank page */
.empty-state-card {
  border: 1px dashed var(--border);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.015);
  padding: 48px 32px;
}
.empty-state-icon { font-size: 36px; filter: grayscale(0.4); opacity: 0.85; }
.empty-state-text { font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.empty-state-hint { font-size: 12.5px; max-width: 420px; line-height: 1.5; }
.stat-mini.zero { opacity: 0.35; }

/* Scrollbar global (one rule — no per-panel overrides) */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* Notification badge */
.notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  margin-left: auto;
}

/* Transfer window banner */
.tw-banner {
  background: linear-gradient(90deg, rgba(0,208,132,0.1), rgba(0,208,132,0.05));
  border: 1px solid rgba(0,208,132,0.3);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tw-banner.closed {
  background: rgba(255,77,77,0.05);
  border-color: rgba(255,77,77,0.3);
  color: var(--accent-red);
}
.tw-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.tw-dot.open-dot { background: var(--accent); }
.tw-dot.closed-dot { background: var(--accent-red); }
.tlog-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Transfer negotiation modal */
.negotiation { width: 100%; max-width: 460px; text-align: left; }
.neg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.neg-head .neg-id { flex: 1; }
.neg-head .neg-id h2 { font-size: 19px; font-weight: 800; margin: 0; }
.neg-head .neg-id p { font-size: 12px; color: var(--text-muted); margin: 2px 0 0; }
.neg-ovr {
  width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800; color: #000; background: var(--accent);
}
.neg-steps { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 11px; }
.neg-step { color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.neg-step.active { color: var(--accent); }
.neg-step.done { color: var(--text-muted); }
.neg-arrow { color: var(--text-dim); }
.neg-log {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 180px; overflow-y: auto; margin-bottom: 16px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.neg-msg {
  background: var(--bg3); border-left: 3px solid var(--text-dim);
  border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; line-height: 1.4;
  opacity: 0.55;
}
.neg-msg.latest { opacity: 1; }
.neg-msg.good { border-left-color: var(--accent); background: rgba(0,208,132,0.08); }
.neg-msg.bad { border-left-color: var(--accent-red); background: rgba(255,77,77,0.07); }
.neg-msg.info { border-left-color: var(--accent-gold); background: rgba(245,166,35,0.06); }
.neg-msg.you { border-left-color: var(--text-dim); background: transparent; color: var(--text-muted); font-style: italic; }
.neg-msg.you.latest { opacity: 0.85; }
.neg-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
.neg-row span:first-child { color: var(--text-muted); }
.neg-row .red { color: var(--accent-red); }
.neg-field { margin: 14px 0; }
.neg-field label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.neg-field input {
  width: 100%; padding: 10px 12px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: var(--r); color: var(--text);
  font-size: 16px; font-weight: 700; font-family: inherit; outline: none;
}
.neg-field input:focus { border-color: var(--accent); }
.neg-field select { width: 100%; padding: 10px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r); color: var(--text); font-size: 14px; font-weight: 600; font-family: inherit; outline: none; cursor: pointer; }
.neg-field select:focus { border-color: var(--accent); }
.neg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.neg-waiting { text-align: center; padding: 18px 0 10px; }
.neg-waiting-icon { font-size: 28px; margin-bottom: 8px; }
.neg-waiting-text { font-size: 14px; font-weight: 600; color: var(--text); }
.neg-waiting-sub { font-size: 11px; color: var(--text-muted); display: block; margin-top: 4px; }

/* Progress bar */
.progress-track { height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.5s ease; }

/* Inbox items */
.inbox-item {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 6px;
  cursor: pointer;
  transition: var(--transition);
}
.inbox-item:hover { background: var(--bg-hover); }
.inbox-item.unread { border-color: var(--accent-blue); }
.inbox-icon { font-size: 18px; flex-shrink: 0; }
.inbox-content { flex: 1; }
.inbox-subject { font-size: 13px; font-weight: 600; }
.inbox-preview { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* =============================================
   SAVE / LOAD CARDS
   ============================================= */
.sv-modal { min-width: min(440px, 100%); }
.sv-modal-hdr {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.sv-modal-hdr h2 { font-size: 20px; font-weight: 800; margin: 0; }
.sv-used-count { font-size: 11px; color: var(--text-muted); }

.sv-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 8px;
  transition: var(--transition);
  min-height: 76px;
}
.sv-card.sv-occ:last-child,
.sv-card.sv-empty:last-child { margin-bottom: 0; }
.sv-card.sv-empty { opacity: 0.55; }
.sv-card.sv-save-here { cursor: pointer; }
.sv-card.sv-save-here:hover { background: var(--bg-hover); border-color: var(--border-light); opacity: 1; }
.sv-card.sv-pick-card { cursor: pointer; }
.sv-card.sv-pick-card.sv-occ:hover { background: var(--bg-hover); border-color: var(--accent-gold); }
.sv-card.sv-pick-card.sv-empty:hover { background: var(--bg-hover); border-color: var(--accent); opacity: 1; }

/* Overwrite warning tag (slot picker) */
.sv-overwrite-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(245,166,35,0.12);
  color: var(--accent-gold);
  border: 1px solid rgba(245,166,35,0.25);
  white-space: nowrap;
}

/* Slot number chip */
.sv-slot-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

/* Club colour badge */
.sv-badge {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Text info column */
.sv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sv-club-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-empty-label { color: var(--text-muted); font-weight: 600; }
.sv-meta { font-size: 11px; color: var(--text-muted); }
.sv-saved-at { font-size: 10px; color: var(--text-dim); margin-top: 2px; }

/* Autosave tag */
.sv-autosave-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,184,217,0.15);
  color: var(--accent2);
  flex-shrink: 0;
}

/* Action buttons column */
.sv-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.sv-btn {
  padding: 6px 16px !important;
  font-size: 12px !important;
  min-width: 88px;
  text-align: center;
}

/* Attributes color scale */
.attr-low { background: #e74c3c; }
.attr-mid-low { background: #e67e22; }
.attr-mid { background: #f39c12; }
.attr-good { background: #27ae60; }
.attr-high { background: var(--accent); }
.attr-elite { background: #3498db; }

/* Club crest badges */
.crest { background: transparent !important; padding: 2px; }
.crest-img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* =========================================================
   SCOUT SECTION
   ========================================================= */
.scout-tab-row { display: flex; gap: 8px; margin-bottom: 16px; }
.scout-count-badge { display: inline-block; background: var(--surface-3); color: var(--text-muted); border-radius: 10px; padding: 0 6px; font-size: 11px; margin-left: 4px; }

/* Opponent tab layout */
.scout-opp-layout { display: grid; grid-template-columns: 1fr 260px; gap: 16px; }
@media (max-width: 800px) { .scout-opp-layout { grid-template-columns: 1fr; } }

.scout-opp-card { padding: 16px; }
.scout-opp-hdr { display: flex; align-items: center; gap: 12px; }
.scout-opp-badge { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.scout-opp-name { font-size: 18px; font-weight: 700; color: var(--text); }
.scout-opp-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.scout-opp-ovr-pill { margin-left: auto; background: var(--surface-3); border-radius: 8px; padding: 6px 12px; text-align: center; font-weight: 700; font-size: 20px; color: var(--text); }
.scout-opp-ovr-pill span { display: block; font-size: 10px; font-weight: 500; color: var(--text-muted); }

.scout-tac-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.scout-tac-pill { background: var(--surface-3); border-radius: 8px; padding: 6px 12px; }
.scout-tac-label { display: block; font-size: 10px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.scout-tac-val { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-top: 2px; }

.scout-squad-row { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-bottom: 1px solid var(--border); border-radius: 6px; transition: background 0.1s; }
.scout-squad-row:last-child { border-bottom: none; }
.scout-squad-row-clickable { cursor: pointer; }
.scout-squad-row-clickable:hover { background: rgba(255,255,255,0.04); }
.scout-squad-name { flex: 1; font-size: 13px; font-weight: 500; }
.scout-click-hint { font-size: 10px; font-weight: 400; color: var(--text-muted); font-style: italic; margin-left: 6px; }

/* Mini pitch */
/* Shares the .tp-* markings with the tactics pitch, so it needs to be their
   sizing container too */
.scout-mini-pitch { position: relative; width: 100%; aspect-ratio: 68/105; container-type: inline-size; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.030) 0 10%, rgba(0,0,0,0.055) 10% 20%), linear-gradient(180deg, #2a4d14 0%, #1e3d0d 25%, #183509 50%, #1e3d0d 75%, #2a4d14 100%); border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12); margin-top: 8px; }
.scout-mini-dot { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; background: rgba(13,19,33,0.85); border: 2px solid var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.1s, border-color 0.1s; }
.scout-mini-dot span { font-size: 10px; font-weight: 700; color: var(--accent); }
.scout-mini-dot-clickable { cursor: pointer; }
.scout-mini-dot-clickable:hover { background: rgba(0,208,132,0.25); border-color: #00ff9f; }
.scout-mini-dot-clickable:hover span { color: #fff; }

/* My Scouts tab layout */
.scout-players-layout { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .scout-players-layout { grid-template-columns: 1fr; } }
.scout-hired-list { display: flex; flex-direction: column; gap: 12px; }

.scout-card { background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 12px; padding: 14px; }
.scout-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.scout-card-name { font-size: 14px; font-weight: 600; flex: 1; }
.scout-fire-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px; }
.scout-fire-btn:hover { color: var(--accent-red); background: rgba(231,76,60,0.1); }

.scout-level-badge { display: inline-block; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
.scout-level-badge.lv1, .scout-level-badge.lv4, .scout-level-badge.lv5 { background: rgba(100,116,139,0.3); color: #94a3b8; }
.scout-level-badge.lv2 { background: rgba(0,208,132,0.2); color: var(--accent); }
.scout-level-badge.lv3 { background: rgba(245,158,11,0.25); color: #f59e0b; }

.scout-status-chip { display: inline-block; border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 600; margin-bottom: 8px; }
.scout-status-chip.pending { background: rgba(59,130,246,0.15); color: #60a5fa; }
.scout-status-chip.ready { background: rgba(0,208,132,0.15); color: var(--accent); }
.scout-status-chip.scouting { background: rgba(245,158,11,0.15); color: #f59e0b; }
.scout-status-chip.idle { background: var(--surface-3); color: var(--text-muted); }

.scout-assignment-section { margin-bottom: 8px; }
.scout-filter-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* Seven filters need room to breathe — let them wrap onto further rows rather than
   squeezing every dropdown down to its ellipsis. */
.scout-filter-sel { background: var(--surface-3); border: 1.5px solid var(--border); border-radius: 6px; color: var(--text); font-size: 12px; padding: 5px 8px; cursor: pointer; flex: 1 1 120px; min-width: 120px; }
.scout-filter-sel:focus { border-color: var(--accent); outline: none; }
.scout-assign-btn { padding: 5px 14px !important; font-size: 12px !important; white-space: nowrap; flex-shrink: 0; }

.scout-report-section { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.scout-report-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.scout-report-title { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; }
.scout-clear-btn { padding: 3px 10px !important; font-size: 11px !important; }
.scout-report-list { display: flex; flex-direction: column; gap: 2px; }
.scout-report-player { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 6px; cursor: pointer; transition: background 0.1s; }
.scout-report-player:hover { background: rgba(255,255,255,0.04); }
.scout-rp-info { flex: 1; min-width: 0; }
.scout-rp-name { display: block; font-size: 13px; font-weight: 500; }
.scout-rp-conf { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 10px; white-space: nowrap; }
.scout-conf-high { background: rgba(0,208,132,0.15); color: var(--accent); }
.scout-conf-medium { background: rgba(245,158,11,0.15); color: #f59e0b; }
.scout-conf-low { background: rgba(100,116,139,0.2); color: #94a3b8; }
.scout-rp-ovr { font-size: 13px; font-weight: 700; min-width: 28px; text-align: center; }
.scout-rp-pot { font-size: 11px; font-weight: 600; color: #a78bfa; min-width: 36px; text-align: center; }
.scout-rp-val { font-size: 12px; color: var(--text-muted); min-width: 50px; text-align: right; }
.scout-rp-blocked { font-size: 11px; color: var(--accent-red); padding: 2px 8px; }
.scout-rp-bid { padding: 3px 10px !important; font-size: 11px !important; }

/* Hire panel */
.scout-hire-card { padding: 16px; }
.scout-hire-tiers { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.scout-tier-card { background: var(--surface-3); border: 1.5px solid var(--border); border-radius: 10px; padding: 12px; cursor: pointer; transition: all 0.15s; }
.scout-tier-card:hover { border-color: var(--accent); }
.scout-tier-card.selected { border-color: var(--accent); background: rgba(0,208,132,0.08); }
.scout-tier-name { font-size: 14px; font-weight: 700; color: var(--text); }
.scout-tier-cost { font-size: 13px; font-weight: 600; color: #f59e0b; margin-top: 2px; }
.scout-tier-wage { font-size: 11px; color: var(--text-muted); }
.scout-tier-desc { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.scout-tier-report { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-style: italic; }

/* =========================================================
   TACTICS SQUAD TAB
   ========================================================= */
.tac-squad-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.tac-swap-hint { display: block; font-size: 11px; color: var(--accent); font-weight: 600; margin-bottom: 8px; }
.tac-swap-hint.muted { color: var(--text-muted); font-weight: 400; }
.tac-squad-filters { display: flex; gap: 4px; flex: 1; }

/* Tactics squad table (same look as squad view) */
.tac-squad-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tac-squad-table thead th { color: var(--text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 0 6px 8px; text-align: left; border-bottom: 1px solid var(--border); }
.tac-squad-table thead th.sortable { cursor: pointer; }
.tac-squad-table thead th.sortable:hover { color: var(--text); }
.tac-squad-table thead th.th-cb { width: 28px; }
.tac-squad-table thead th.th-oop { width: 36px; }
.tac-squad-table tbody tr { border-radius: var(--r-sm); transition: background 0.1s; cursor: pointer; }
.tac-squad-table tbody tr:hover { background: var(--bg-hover); }
.tac-squad-table tbody tr.in-xi { opacity: 0.45; }
.tac-squad-table tbody tr.in-xi:hover { opacity: 0.7; }
.tac-squad-table tbody tr.swap-sel-row { opacity: 1 !important; background: rgba(0,208,132,0.12); outline: 1.5px solid var(--accent); outline-offset: -1px; border-radius: var(--r-sm); }
.tac-squad-table tbody tr.excluded { opacity: 0.25; }
.tac-squad-table tbody td { padding: 5px 6px; vertical-align: middle; }
.tac-squad-table tbody td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.tac-squad-table tbody td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* Checkbox cell */
.tac-cb { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--border); background: var(--surface-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: all 0.1s; }
.tac-cb.checked { background: var(--accent); border-color: var(--accent); }
.tac-cb.checked::after { content: '✓'; font-size: 11px; color: #0d1321; font-weight: 900; line-height: 1; }
.tac-cb.excluded-mark { background: transparent; border-color: var(--accent-red); }
.tac-cb.excluded-mark::after { content: '–'; font-size: 12px; color: var(--accent-red); font-weight: 700; line-height: 1; }

/* OOP badge — base + severity variants */
.oop-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.oop-badge.oop-badge-minor    { background: rgba(245,158,11,0.18); color: #f59e0b; }
.oop-badge.oop-badge-moderate { background: rgba(249,115,22,0.18); color: #f97316; }
.oop-badge.oop-badge-severe   { background: rgba(239,68,68,0.18);  color: #ef4444; }
.oop-badge.oop-badge-extreme  { background: rgba(220,38,38,0.22);  color: #fca5a5; }

/* Potential (pot) shown next to OVR */
.squad-pot { font-size: 10px; color: var(--text-muted); margin-left: 3px; }

/* Auto XI button in squad toolbar */
.auto-xi-btn { padding: 4px 12px; font-size: 11px; white-space: nowrap; }

/* Transfer market status tags (in player list rows) */
.tp-tag { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; vertical-align: middle; margin-left: 5px; text-transform: uppercase; letter-spacing: 0.3px; }
.tp-tag.exp { background: rgba(245,166,35,0.15); color: var(--accent-gold); }
.tp-tag.listed { background: rgba(255,77,77,0.12); color: var(--accent-red); }
.tp-tag.wants { background: rgba(0,208,132,0.14); color: var(--accent); }

/* Player modal market status tag (in modal header) */
.market-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.4px; }
.market-tag.expiring { background: rgba(245,166,35,0.15); color: var(--accent-gold); }
.market-tag.transfer-listed { background: rgba(255,77,77,0.12); color: var(--accent-red); }
.market-tag.wants-move { background: rgba(0,208,132,0.14); color: var(--accent); }

/* Market player modal: offer footer */
.pm-offer-footer { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.pm-value-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-muted); }
.pm-offer-btn { width: 100%; }
.pm-not-interested { text-align: center; font-size: 13px; color: var(--accent-red); padding: 10px 14px; background: rgba(255,77,77,0.08); border-radius: var(--r-sm); border: 1px solid rgba(255,77,77,0.2); }
.pm-prestige-warn { font-size: 12px; color: var(--accent-red); background: rgba(255,77,77,0.08); border: 1px solid rgba(255,77,77,0.2); border-radius: var(--r-sm); padding: 6px 10px; }
.pm-prestige-warn.pm-prestige-mild { color: var(--accent-gold); background: rgba(245,166,35,0.08); border-color: rgba(245,166,35,0.2); }

/* Board objective — dashboard card */
.board-obj-card { margin-top: 10px; }
.obj-label { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.obj-status { font-size: 12px; font-weight: 600; }
.obj-on-track { color: var(--accent); }
.obj-off-track { color: var(--accent-red); }

/* Board objective — season end / sacking modal */
.board-verdict-box { border-radius: var(--r); padding: 14px 16px; text-align: left; }
.board-verdict-box.success { background: rgba(0,208,132,0.08); border: 1px solid rgba(0,208,132,0.25); }
.board-verdict-box.budget_cut { background: rgba(245,166,35,0.08); border: 1px solid rgba(245,166,35,0.25); }
.board-verdict-box.sacked { background: rgba(255,77,77,0.08); border: 1px solid rgba(255,77,77,0.25); }
.bv-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 4px; }
.bv-target { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.bv-msg { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* Offer badge on Offers tab */
.offer-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-red); color: #fff; font-size: 9px; font-weight: 700; border-radius: 8px; padding: 1px 5px; margin-left: 5px; min-width: 16px; line-height: 1.4; }

/* Offer action buttons */
.offer-item { cursor: default; }
.offer-item:hover { background: var(--bg-card); border-color: var(--border); }
.offer-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* List/Delist button in My Squad tab */
.list-btn, .delist-btn { flex-shrink: 0; font-size: 11px; padding: 4px 10px; }
.list-btn { background: var(--accent-gold); color: #000; border-color: var(--accent-gold); }
.list-btn:hover { background: #d4a000; }
.tp-hint { font-size: 12px; color: var(--text-muted); padding: 8px 0 4px; }
.tp-more { font-size: 12px; color: var(--text-muted); text-align: center; padding: 12px 0 6px; }

/* Season review */
.season-review-hero { text-align: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 28px 20px; margin-bottom: 14px; }
.srh-pos { font-size: 56px; font-weight: 900; line-height: 1; color: var(--accent-gold); margin-bottom: 6px; }
.srh-outcome { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.srh-record { font-size: 12px; color: var(--text-muted); }
.review-actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; padding-bottom: 16px; }
.pr-team-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.pr-team-row:last-child { border-bottom: none; }

/* Sacked banner */
.sacked-banner { display: flex; align-items: center; gap: 14px; background: rgba(255,77,77,0.10); border: 1px solid rgba(255,77,77,0.30); border-radius: var(--r); padding: 14px 18px; margin-bottom: 14px; }
.sacked-banner-icon { font-size: 22px; color: var(--accent-red); flex-shrink: 0; }
.sacked-banner-title { font-size: 15px; font-weight: 700; color: var(--accent-red); margin-bottom: 2px; }
.sacked-banner-msg { font-size: 12px; color: var(--text-muted); }
.fin-embargo-banner { display: flex; align-items: center; gap: 14px; background: rgba(255,77,77,0.10); border: 1px solid rgba(255,77,77,0.30); border-radius: var(--r); padding: 14px 18px; margin-bottom: 14px; }
.fin-embargo-icon { font-size: 22px; color: var(--accent-red); flex-shrink: 0; }
.fin-embargo-title { font-size: 15px; font-weight: 700; color: var(--accent-red); margin-bottom: 2px; }
.fin-embargo-msg { font-size: 12px; color: var(--text-muted); }

/* ── Fitness bars ── */
.fit-bar-wrap { width: 72px; height: 6px; background: var(--bg-hover); border-radius: 3px; overflow: hidden; }
.fit-bar { height: 100%; border-radius: 3px; transition: width 0.3s; }
.fit-bar.fit-high     { background: #22c55e; }
.fit-bar.fit-mid      { background: #eab308; }
.fit-bar.fit-low      { background: #f97316; }
.fit-bar.fit-critical { background: #ef4444; }

/* ── Injury badges ── */
.inj-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.inj-badge.inj-minor    { background: rgba(234,179,8,0.18);  color: #eab308; border: 1px solid rgba(234,179,8,0.35); }
.inj-badge.inj-moderate { background: rgba(249,115,22,0.18); color: #f97316; border: 1px solid rgba(249,115,22,0.35); }
.inj-badge.inj-serious  { background: rgba(239,68,68,0.18);  color: #ef4444; border: 1px solid rgba(239,68,68,0.35); }
.inj-badge.inj-career   { background: rgba(185,28,28,0.22);  color: #fca5a5; border: 1px solid rgba(185,28,28,0.50); }

/* Injured row tint */
tr.row-injured { opacity: 0.7; }
tr.row-injured .player-name-cell { color: #ef4444; }

/* ── Sub event arrows ── */
.sub-on  { color: var(--text); }
.sub-off { color: var(--text-muted); }
.sub-arrow-up   { color: #22c55e; font-size: 10px; }
.sub-arrow-down { color: #ef4444; font-size: 10px; }
.sub-event-rows { display: flex; flex-direction: column; gap: 1px; line-height: 1.4; }
.sub-row-on  { color: var(--text); font-weight: 500; }
.sub-row-off { color: var(--text-muted); }
.sub-arrow-on  { color: #22c55e; font-weight: 700; margin-right: 3px; }
.sub-arrow-off { color: #ef4444; font-weight: 700; margin-right: 3px; }
.btn-sub-icon { display: inline-flex; flex-direction: column; line-height: 1; font-size: 10px; gap: 0; vertical-align: middle; margin-right: 2px; }
.btn-sub-icon .sub-on-arrow  { color: #22c55e; font-weight: 700; }
.btn-sub-icon .sub-off-arrow { color: #ef4444; font-weight: 700; }

/* ── Match event SVG icons ── */
.ev-icon { width: 12px; height: 14px; flex-shrink: 0; }
.ev-icon-goal   { color: rgba(255,255,255,0.9); }
.ev-icon-yellow { /* color set via fill attr */ }
.ev-icon-red    { /* color set via fill attr */ }
.ev-icon-injury { color: #f97316; }
.ev-icon-penalty { color: rgba(255,255,255,0.8); }

/* ── Button icon (small inline SVG) ── */
.btn-icon { width: 10px; height: 10px; vertical-align: middle; margin-right: 4px; flex-shrink: 0; }

/* Injury event chip */
.match-event.injury .event-icon { color: #f97316; font-weight: 900; }
.match-event.injury { border-left-color: #f97316; }

/* ── Inbox ── */
.inbox-card { padding: 14px 16px; }
.inbox-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.inbox-unread-badge { background: var(--accent-red); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; }
.inbox-msg { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: default; }
.inbox-msg:last-child { border-bottom: none; padding-bottom: 0; }
.inbox-msg-icon { font-size: 18px; flex-shrink: 0; width: 26px; text-align: center; margin-top: 1px; }
.inbox-msg.transfer_request .inbox-msg-icon { color: #f59e0b; }
.inbox-msg.contract_expiry  .inbox-msg-icon { color: #ef4444; }
.inbox-msg.club_news        .inbox-msg-icon { color: #ffffff; }
.inbox-msg-body { flex: 1; min-width: 0; }
.inbox-msg-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.inbox-msg.unread .inbox-msg-title { color: #fff; }
.inbox-msg-sub { font-size: 11px; color: var(--text-muted); line-height: 1.4; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inbox-msg-date { font-size: 10px; color: var(--text-muted); opacity: 0.7; }
.inbox-msg-actions { display: flex; gap: 5px; flex-shrink: 0; align-items: flex-start; }
.inbox-view-btn  { font-size: 10px; padding: 3px 9px; }
.inbox-dismiss-btn { font-size: 10px; padding: 3px 7px; opacity: 0.55; }
.inbox-dismiss-btn:hover { opacity: 1; }
.inbox-empty { font-size: 12px; color: var(--text-muted); text-align: center; padding: 10px 0 4px; }
.inbox-more { font-size: 11px; color: var(--text-muted); text-align: center; padding: 8px 0 0; }

/* =========================================
   FACILITIES
   ========================================= */
.fac-tab-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
#fac-body { display: flex; flex-direction: column; gap: 16px; }
.fac-main-card { display: flex; flex-direction: column; gap: 14px; }
.fac-icon-header { display: flex; align-items: center; gap: 14px; }
.fac-facility-name { font-size: 18px; font-weight: 700; color: var(--text); }
.fac-level-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.fac-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.btn-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.fac-benefit-list { display: flex; flex-direction: column; }
.fac-benefit-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.fac-benefit-row:last-child { border-bottom: none; }
.fac-benefit-label { color: var(--text-muted); }
.fac-benefit-val { font-weight: 600; text-align: right; }
.text-neg { color: var(--accent-red); }
/* Coach panel */
.coach-role-section { padding: 12px 0; border-bottom: 1px solid var(--border); }
.coach-role-section:last-child { border-bottom: none; padding-bottom: 0; }
.coach-role-label { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.coach-slots-used { font-size: 11px; font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.coach-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0 6px 12px; background: var(--surface-3); border-radius: 6px; margin-bottom: 5px; }
.coach-row-info { display: flex; flex-direction: column; gap: 1px; }
.coach-row-name { font-size: 13px; font-weight: 600; }
.coach-row-meta { font-size: 11px; color: var(--text-muted); }
.coach-hire-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0 5px 12px; border-radius: 6px; margin-bottom: 4px; border: 1px dashed var(--border); }
.coach-hire-info { display: flex; flex-direction: column; gap: 1px; }
.coach-hire-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.coach-hire-meta { font-size: 11px; color: var(--text-muted); }
/* Renovations */
.fac-renovations-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 700px) { .fac-renovations-grid { grid-template-columns: 1fr; } }
.fac-reno-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.fac-reno-done { border-color: var(--accent); opacity: 0.7; }
.fac-reno-label { font-size: 13px; font-weight: 700; }
.fac-reno-desc { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.fac-reno-status { font-size: 11px; color: var(--accent); font-weight: 700; }
/* Ticket row (shared with finances) */
.fin-ticket-row { display: flex; gap: 8px; flex-wrap: wrap; }
/* Misc */
.fac-youth-pot { font-weight: 700; color: var(--accent-gold); }
.text-center { text-align: center; }

/* Stadium bird's-eye */
.stadium-layout { display: grid; grid-template-columns: 1fr 260px; gap: 16px; align-items: start; }
@media (max-width: 800px) { .stadium-layout { grid-template-columns: 1fr; } }
.stadium-svg-wrap { background: #2a6b35; border-radius: 10px; padding: 8px; }
.stadium-svg { width: 100%; height: auto; display: block; border-radius: 6px; }
.sz-zone { transition: filter 0.1s; }
.sz-zone:hover { filter: brightness(1.25); }
/* Stadium zone panel */
.stadium-zone-panel { display: flex; flex-direction: column; }
.sz-legend { display: flex; flex-direction: column; gap: 5px; }
.sz-legend-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.sz-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }
.sz-swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.sz-legend-name { flex: 1; color: var(--text-muted); }
.sz-legend-price { font-weight: 600; color: var(--text-primary); }
.sz-legend-divider { border-top: 1px solid var(--border); margin: 6px 0; }
.sz-hint { font-size: 11px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
/* Zone pricing panel */
.sz-panel { display: flex; flex-direction: column; gap: 6px; }
.sz-panel-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.sz-panel-desc { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.sz-panel-section-title { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 6px 0 2px; }
.sz-price-btn { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface-2); cursor: pointer; text-align: left; transition: all 0.12s; width: 100%; }
.sz-price-btn:hover { border-color: var(--accent); background: rgba(0,208,132,0.05); }
.sz-price-btn.active { border-color: var(--accent); background: rgba(0,208,132,0.1); }
.sz-price-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; margin-top: 3px; }
.sz-price-info { display: flex; flex-direction: column; gap: 2px; }
.sz-price-label { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.sz-price-meta { font-size: 10px; color: var(--text-muted); line-height: 1.4; }
.sz-price-income { font-size: 10px; color: var(--accent); font-weight: 600; }
/* Stand management table */
.stand-act-btn { white-space: nowrap; }
/* Training ground SVG */
.training-svg { width: 100%; height: auto; display: block; border-radius: 8px; }
.fac-reno-3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .fac-reno-3col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fac-reno-3col { grid-template-columns: 1fr; } }

/* =============================================
   FACILITIES CUSTOMISATION & YOUTH SCOUTING NETWORK
   ============================================= */
.fac-setup-group { margin-bottom: 14px; }
.fac-setup-group:last-child { margin-bottom: 0; }
.fac-setup-label { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.fac-setup-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.fac-setup-desc { font-size: 11.5px; color: var(--text-muted); margin-top: 7px; line-height: 1.5; }

/* Academy funding slider — --fill is the current spend, --unlocked the cap; the tail
   past the cap gets a faint red tint so the locked range reads at a glance */
.ac-fund-slider-wrap { margin: 8px 0 2px; }
#ac-fund-slider {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 8px; border-radius: 4px; outline: none; cursor: pointer;
  background:
    linear-gradient(90deg, var(--accent) 0 var(--fill, 0%), transparent var(--fill, 0%)),
    linear-gradient(90deg, var(--surface2) 0 var(--unlocked, 100%), rgba(255, 77, 77, 0.14) var(--unlocked, 100%));
}
#ac-fund-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
#ac-fund-slider::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.ac-fund-scale { position: relative; display: flex; justify-content: space-between; margin-top: 5px; font-size: 10.5px; color: var(--text-muted); }
.ac-fund-cap { position: absolute; transform: translateX(-50%); white-space: nowrap; color: var(--text-secondary); font-weight: 600; }

.fac-project-row { display: flex; align-items: center; gap: 14px; padding: 9px 0; }
.fac-project-row + .fac-project-row { border-top: 1px solid var(--border); }
.fac-reno-building { border-color: rgba(245,166,35,0.35); background: rgba(245,166,35,0.05); }

.ys-region-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.ys-region-chip {
  font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 14px;
  background: rgba(0,208,132,0.1); color: var(--accent); border: 1px solid rgba(0,208,132,0.25);
}
.ys-region-locked { background: rgba(255,255,255,0.03); color: var(--text-dim); border-color: var(--border); }

.ys-scout-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 8px; }
.ys-scout-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.ys-scout-name { font-size: 13px; font-weight: 700; }
.ys-scout-tier { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--accent); background: rgba(0,208,132,0.1); padding: 2px 8px; border-radius: 10px; }
.ys-scout-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.ys-assign-row { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; align-items: center; }
.ys-sel {
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  font-size: 12px; padding: 6px 8px; border-radius: var(--r-sm); font-family: inherit; cursor: pointer;
}
.ys-sel:focus { border-color: var(--accent); outline: none; }

.ys-hire-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
@media (max-width: 900px) { .ys-hire-strip { grid-template-columns: 1fr; } }
.ys-hire-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 11px 12px; }

/* =============================================
   MATCH REPORT MODAL & PENALTY EVENT ICONS
   ============================================= */
.ev-icon-pen-goal { color: var(--accent); }
.ev-icon-pen-miss { color: var(--accent-red); }
.fixture-row.clickable { cursor: pointer; }
.fixture-row.clickable:hover { background: var(--bg-hover); }

.match-report { padding: 2px 0; }
.rep-comp { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 10px; }
.rep-scoreline { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 16px; }
.rep-team { font-size: 15px; font-weight: 700; flex: 1; }
.rep-team:first-child { text-align: right; }
.rep-score { font-size: 26px; font-weight: 800; letter-spacing: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.rep-stats { margin: 0 auto 16px; max-width: 420px; }
.rep-stat-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rep-stat-val { font-size: 12px; font-weight: 700; min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.rep-stat-bars { flex: 1; }
.rep-stat-label { text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 3px; }
.rep-stat-track { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface2); }
.rep-stat-fill-h { background: var(--accent); }
.rep-stat-fill-a { background: var(--accent-blue); }

.rep-timeline { border-top: 1px solid var(--border); padding-top: 10px; max-height: 46vh; overflow-y: auto; }
.rep-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 12.5px; }
.rep-row.rep-away { flex-direction: row-reverse; text-align: right; }
.rep-row + .rep-row { border-top: 1px solid rgba(255,255,255,0.03); }
.rep-icon { display: flex; align-items: center; min-width: 14px; }
.rep-min { font-size: 11px; color: var(--text-muted); min-width: 30px; font-variant-numeric: tabular-nums; }
.rep-row.rep-away .rep-min { text-align: left; }
.rep-desc { flex: 1; }
.rep-tag { font-size: 9px; font-weight: 800; letter-spacing: 0.5px; padding: 1px 5px; border-radius: 4px; vertical-align: 1px; }
.rep-tag-pen  { background: rgba(0,208,132,0.15); color: var(--accent); }
.rep-tag-miss { background: rgba(255,77,77,0.15); color: var(--accent-red); }
.rep-row.rep-sub .rep-desc { font-size: 11.5px; }

/* =============================================
   3D MENU BACKDROP + GLASS START SCREEN (2026-07-06)
   menu3d.js adds .has-3d to #screen-start when WebGL is up;
   without it the old CSS background remains as the fallback.
   ============================================= */
#menu3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#screen-start.has-3d .floating-balls { display: none; }
#screen-start.has-3d .start-bg { background: #04070d; }
#screen-start.has-3d .start-bg-overlay {
  background:
    radial-gradient(ellipse at 50% 44%, transparent 28%, rgba(3,6,11,0.55) 100%),
    linear-gradient(180deg, rgba(3,6,11,0.45) 0%, transparent 22%, transparent 68%, rgba(3,6,11,0.72) 100%);
}

/* Glass panels floating over the stadium */
#screen-start.has-3d .club-selector-panel,
#screen-start.has-3d .club-confirm-panel {
  background: rgba(13, 18, 28, 0.66);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
#screen-start.has-3d .club-confirm-panel { border-color: rgba(0, 208, 132, 0.45); }

/* Home menu — glassy over the scene, glowing primary CTA */
.home-btn.btn-secondary {
  background: rgba(10, 15, 24, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.12);
  letter-spacing: 0.4px;
}
.home-btn.btn-secondary:hover {
  background: rgba(0, 208, 132, 0.08);
  border-color: rgba(0, 208, 132, 0.55);
  box-shadow: 0 0 24px rgba(0, 208, 132, 0.15);
}
.home-btn.btn-primary { box-shadow: 0 6px 30px rgba(0, 208, 132, 0.35); }
.has-3d .game-title { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85); }
.has-3d .game-title span { text-shadow: 0 0 34px rgba(0, 208, 132, 0.5); }
.has-3d .game-subtitle { color: #aab6c9; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85); }

/* In-game polish to match the new menu */
#sidebar { background: var(--bg1); }
.sidebar-nav .snav-btn.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 14%, transparent), color-mix(in srgb, var(--brand) 3%, transparent));
}
.toast {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* =============================================
   TABLE SCROLLERS
   js/mobile.js wraps every rendered <table> in one of these. On desktop it is a
   plain block and changes nothing; on a phone the table scrolls inside its own
   box rather than being clipped at the edge of the column.
   ============================================= */
.table-scroll { display: block; }

/* Nav labels: the long form is the desktop sidebar's, the short one is swapped
   in by the phone media query where a sixth of the screen is all a label gets. */
.snav-label-short { display: none; }

/* =============================================
   "MORE" NAV SHEET (phone only, built by js/mobile.js)
   ============================================= */
.more-sheet {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(2, 5, 10, 0.6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  align-items: flex-end;
  animation: fadeIn 0.16s ease;
}
/* Both only exist below the phone breakpoint — the desktop sidebar has room for
   all ten destinations, so the extra slot would just be a dead button. */
.snav-more, .more-sheet { display: none; }
@media (max-width: 760px) {
  .snav-more { display: flex; }
  .more-sheet:not(.hidden) { display: flex; }
}
.more-sheet-panel {
  width: 100%;
  background: var(--bg-card);
  border-top: 1px solid var(--border-light);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
  /* clears the nav bar it springs from */
  margin-bottom: calc(58px + env(safe-area-inset-bottom));
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.6);
  animation: slideUp 0.2s ease;
  max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain;
}
.more-sheet-grab {
  width: 38px; height: 4px; border-radius: 999px;
  background: var(--border-light); margin: 4px auto 10px;
}
.more-sheet-title {
  font-size: 10px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-muted); padding: 0 4px 8px;
}
.more-sheet-list { display: flex; flex-direction: column; gap: 2px; }
.more-sheet-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 50px; padding: 0 10px;
  background: transparent; border: none; border-radius: var(--r-sm);
  color: var(--text); font-size: 15px; font-weight: 600; font-family: inherit;
  text-align: left; cursor: pointer;
}
.more-sheet-row.active { background: var(--bg-active); }
.more-row-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--bg3); color: var(--text-secondary);
}
.more-sheet-row.active .more-row-icon { color: var(--brand); }
.more-row-label { flex: 1; min-width: 0; }
.more-row-chev { color: var(--text-muted); font-size: 20px; line-height: 1; }
body.sheet-open { overflow: hidden; }

/* =============================================
   PHONE LAYOUT (<=760px)
   ============================================= */
@media (max-width: 760px) {
  /* Never let a stray wide child turn the whole page into a sideways scroll —
     individual offenders get their own scroller instead. */
  html, body { overflow-x: hidden; }
  /* iOS inflates text in rotated/landscape layouts unless told not to. */
  html { -webkit-text-size-adjust: 100%; }

  /* ---- in-game chrome: sidebar becomes a compact top identity bar + fixed bottom nav ---- */
  #screen-game { flex-direction: column; }
  #sidebar {
    width: 100%; height: auto; flex-shrink: 0;
    border-right: none; border-bottom: 1px solid var(--border);
    padding-top: env(safe-area-inset-top);
  }
  .sidebar-club {
    flex-direction: row; align-items: center; text-align: left;
    padding: 7px 12px; gap: 9px; border-bottom: none;
  }
  .sb-badge { width: 30px; height: 30px; border-radius: 8px; font-size: 13px; }
  .sb-text { display: flex; flex-direction: column; min-width: 0; }
  .sb-name { font-size: 14px; }
  .sb-league { font-size: 10px; }
  .sb-stats-row { margin-left: auto; margin-top: 0; gap: 10px; flex-shrink: 0; }
  .sb-mini-val { font-size: 12px; }
  .sb-mini-label { font-size: 8.5px; }
  .sidebar-bottom {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 10px; padding: 5px 12px 7px; border-top: 1px solid var(--border);
  }
  .sb-fin { flex-direction: row; gap: 14px; margin-bottom: 0; min-width: 0; }
  .sb-budget-block { flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
  .sb-budget-label { font-size: 8.5px; }
  .sb-budget-val { font-size: 13px; }
  .sb-actions { margin-top: 0; gap: 6px; flex-shrink: 0; }
  .sb-actions .btn-secondary { min-height: 34px; padding: 0 12px; font-size: 12px; }

  /* Five fixed slots + More (js/mobile.js) — no horizontal scrolling, so no
     destination can hide off the edge of the bar. */
  .sidebar-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: repeat(6, 1fr);
    flex-wrap: nowrap; overflow: visible;
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom)); gap: 0; height: auto;
    background: var(--bg1); border-top: 1px solid var(--border);
  }
  .sidebar-nav .snav-secondary { display: none; }
  .snav-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 5px 2px; min-height: 50px;
    width: auto; white-space: nowrap; font-size: 9.5px; text-align: center;
    overflow: hidden;
  }
  .snav-btn > span:not(.snav-icon) {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
  .snav-label-long { display: none; }
  .snav-label-short { display: inline; }
  .snav-btn.active { box-shadow: none; border-radius: var(--r-sm); }

  #main-content {
    padding: 16px 14px calc(76px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
    /* the view is its own scroller, so a flick at the end of it shouldn't hand
       the gesture to the browser's pull-to-refresh */
    overscroll-behavior-y: contain;
  }

  /* ---- tables: scroll sideways in place instead of being clipped ---- */
  .table-scroll {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    /* the scrollbar shouldn't steal a row of height on a small screen */
    scrollbar-width: none;
  }
  .table-scroll::-webkit-scrollbar { height: 0; }
  .table-scroll > table { min-width: 100%; }
  /* Column trims so the two tables read at a glance without any scrolling at all:
     the squad table drops per-match counters, the league table drops GF/GA
     (goal difference and points, the columns people actually scan, stay). */
  .squad-table thead th:nth-child(6), .squad-table tbody td:nth-child(6),
  .squad-table thead th:nth-child(7), .squad-table tbody td:nth-child(7),
  .squad-table thead th:nth-child(8), .squad-table tbody td:nth-child(8) { display: none; }
  .league-table thead th:nth-child(7), .league-table tbody td:nth-child(7),
  .league-table thead th:nth-child(8), .league-table tbody td:nth-child(8) { display: none; }
  .squad-table thead th, .league-table thead th { padding: 8px 6px; }
  .squad-table tbody td, .league-table tbody td { padding: 9px 6px; font-size: 12.5px; }
  .fit-bar-wrap { min-width: 46px; }

  /* ---- touch targets: nothing interactive smaller than a fingertip ---- */
  .btn-primary, .btn-secondary, .btn-danger,
  .squad-filter-btn, .tac-squad-filter-btn, .ltab, .transfer-tab, .euro-sub-btn,
  .scout-tab-btn, .fac-tab-btn, .pm-tab-btn, .tac-inner-tab-btn, .tac-seg-btn,
  .formation-btn, .tac-style-btn, .cf-lines-btn, .mkt-seg-btn, .sp-chip,
  .tac-opt-btn, .modal-actions button {
    min-height: 40px;
  }
  .btn-sm, .btn-xs, .fac-hire-btn, .fac-fire-btn, .aca-build-btn, .sv-btn { min-height: 38px; }
  .cf-step-btn { min-width: 38px; min-height: 38px; }
  .modal-close { width: 38px; height: 38px; font-size: 14px; top: 10px; right: 10px; }
  /* Anything under 16px makes iOS zoom the viewport the moment it gets focus. */
  input[type="text"], input[type="search"], input[type="number"], select, textarea {
    font-size: 16px; min-height: 42px;
  }
  /* A 4px-tall track is unhittable with a thumb — grow the hit area, not the look. */
  input[type="range"] {
    height: 30px; padding: 0; background: transparent; cursor: pointer;
  }
  .mkt-range { height: 30px; }
  #ac-fund-slider { height: 30px; border-radius: 0;
    background:
      linear-gradient(90deg, transparent 0 calc(50% - 4px), var(--accent) calc(50% - 4px) calc(50% + 4px), transparent calc(50% + 4px)) no-repeat,
      linear-gradient(90deg, var(--accent) 0 var(--fill, 0%), transparent var(--fill, 0%)) 0 50% / 100% 8px no-repeat,
      linear-gradient(90deg, var(--surface2) 0 var(--unlocked, 100%), rgba(255, 77, 77, 0.14) var(--unlocked, 100%)) 0 50% / 100% 8px no-repeat;
  }
  #ac-fund-slider::-webkit-slider-thumb { width: 24px; height: 24px; }
  #ac-fund-slider::-moz-range-thumb { width: 18px; height: 18px; }

  /* ---- page-level grids that need to stack on a phone-width column ----
     minmax(0, 1fr), not plain 1fr: grid tracks default to a min size of their
     content's min-content, so a bare 1fr still refuses to shrink below the
     widest nowrap child (e.g. the transfer tab strip) and blows out the column
     instead of stacking it. minmax(0, ...) removes that floor. */
  .dashboard-grid,
  .dashboard-grid-2,
  .tactics-layout,
  .transfers-layout,
  .european-layout,
  .finances-grid,
  .finances-grid.fin-3col,
  .budget-grid,
  .group-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .formation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ---- tactics: stacked column needs to scroll the page, not clip at the
     desktop two-column fixed height ---- */
  .tactics-layout { height: auto; overflow: visible; }
  .tactics-pitch-container { overflow: visible; }
  /* No fixed column height to letterbox against — width drives the pitch */
  .tactics-pitch-box { flex: none; display: block; container-type: inline-size; }
  .tactics-pitch { width: 100%; height: auto; }
  /* 360px of hard minimum ran the subs pitch off the side of a phone screen */
  .subs-modal { min-width: 0; }
  /* Pitch dots are dragged and tapped, so they need finger-sized hit areas and
     names that don't collide once eleven of them share a phone-width pitch. */
  .pitch-player { min-width: 44px; }
  .pitch-player-circle { width: 40px; height: 40px; font-size: 13px; }
  .pitch-player-name { font-size: 9.5px; max-width: 62px; overflow: hidden;
                       text-overflow: ellipsis; white-space: nowrap; }

  .squad-summary-bar { flex-wrap: wrap; gap: 10px 4px; padding: 12px 14px; }
  .ssb-stat { flex: 1 1 30%; }
  .ssb-sep { display: none; }
  .ssb-val { font-size: 16px; }

  /* ---- horizontally-scrolling tab strips instead of overflowing ---- */
  .transfer-tabs, .euro-sub-tabs, .scout-tab-row, .fac-tab-row,
  .pm-tab-row, .tac-inner-tab-row, .country-tabs, .league-tabs, .table-tabs,
  .squad-filters, .tac-squad-filters {
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scrollbar-width: none;
    /* bleed to the screen edge so a half-cut chip reads as "there's more" */
    margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px;
    /* without this the snap target is the scrollport edge, which scrolls the
       gutter away and leaves the first chip glued to the side of the screen */
    scroll-padding-left: 14px;
  }
  .transfer-tabs::-webkit-scrollbar, .euro-sub-tabs::-webkit-scrollbar,
  .scout-tab-row::-webkit-scrollbar, .fac-tab-row::-webkit-scrollbar,
  .pm-tab-row::-webkit-scrollbar, .tac-inner-tab-row::-webkit-scrollbar,
  .country-tabs::-webkit-scrollbar, .league-tabs::-webkit-scrollbar,
  .table-tabs::-webkit-scrollbar, .squad-filters::-webkit-scrollbar,
  .tac-squad-filters::-webkit-scrollbar { height: 0; }
  .transfer-tabs > *, .euro-sub-tabs > *, .scout-tab-row > *, .fac-tab-row > *,
  .pm-tab-row > *, .tac-inner-tab-row > *, .country-tabs > *, .league-tabs > *,
  .table-tabs > *, .squad-filters > *, .tac-squad-filters > * {
    flex-shrink: 0; scroll-snap-align: start;
  }

  /* ---- list rows: let the label column shrink/ellipsis instead of pushing
     the trailing value off-screen ---- */
  .transfer-search { flex-wrap: wrap; }
  .transfer-search input { min-width: 0; flex: 1 1 100%; }
  .transfer-search select { flex: 1 1 100%; }
  .tp-info { min-width: 0; }
  .tp-name, .tp-club { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tp-pos, .tp-ovr, .tp-value { flex-shrink: 0; }
  /* The market's two range cards were squeezed side by side into ~170px each,
     which collapsed the Under/Over toggle onto its own readout. */
  .mkt-range-row { flex-direction: column; gap: 10px; }
  .mkt-range-head { flex-wrap: wrap; }

  /* ---- modals become bottom sheets ---- */
  .modal-overlay { align-items: flex-end; }
  .modal-box {
    width: 100%; max-width: none; margin: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-left: none; border-right: none; border-bottom: none;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
    max-height: 88dvh; overscroll-behavior: contain;
    transition: transform 0.2s ease;
  }
  .news-modal, .rep-timeline { max-height: none; }
  /* Says "this can be swiped away" — js/mobile.js does the swiping. */
  .modal-box::before {
    content: ''; display: block; width: 38px; height: 4px; border-radius: 999px;
    background: var(--border-light); margin: -10px auto 12px;
  }
  .subs-modal, .negotiation, .news-modal { max-width: none; }
  /* Two shooter lists plus a 100px sidebar don't survive a phone-width row. */
  .pen-picker-lists { flex-direction: column; }
  .pen-selected-area { width: 100%; }
  .pen-box { padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); }

  /* The toast lived at the bottom-right corner, i.e. on top of the nav bar. */
  .toast {
    left: 12px; right: 12px; bottom: calc(74px + env(safe-area-inset-bottom));
    max-width: none; text-align: center;
  }

  /* ---- match screen ---- */
  #match-header { padding: 10px 12px; gap: 8px; padding-top: calc(10px + env(safe-area-inset-top)); }
  .match-teams { gap: 10px; }
  .match-team { gap: 6px; min-width: 0; }
  .match-team span {
    font-size: 12px;
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .match-badge { width: 32px; height: 32px; font-size: 13px; flex-shrink: 0; }
  .match-score { font-size: 24px; min-width: 0; padding: 0 4px; }
  .match-status { font-size: 9.5px; }
  #match-body { grid-template-columns: 1fr; overflow-y: auto; padding: 12px; align-content: start; }
  /* Stacked layout has no fixed height to letterbox against — size the pitch off
     the column width instead */
  #match-pitch-box { flex: none; container-type: inline-size; }
  #match-pitch-frame { width: 100%; height: auto; }
  #match-pitch.view-3d { transform: none; }
  /* Match controls are the one row that must never wrap or scroll — a second row
     pushed "Tactics" clean off the bottom of the screen. Equal flex shares with
     min-width:0 keep all four on one line at 390px. */
  #match-controls {
    flex-wrap: nowrap; gap: 6px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }
  #match-controls button {
    flex: 1 1 0; min-width: 0; min-height: 46px;
    padding: 0 8px; font-size: 13px; white-space: nowrap;
  }
  #match-controls .btn-icon, #match-controls .btn-sub-icon { flex-shrink: 0; }
  .pitch-view-toggle { min-width: 40px; min-height: 34px; }

  /* ---- start screen / career setup ---- */
  #screen-start { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .clubs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .club-card { min-height: 96px; }
  .club-card-name { font-size: 12.5px; }
  .scenario-grid { grid-template-columns: minmax(0, 1fr); }
  .sv-pick-card { min-height: 64px; }
  .confirm-actions { flex-direction: column; }
  .confirm-actions button { width: 100%; min-height: 46px; }
}

/* Touch devices get no hover state — a tapped row would otherwise keep the
   highlight until something else was tapped, reading as a stuck selection. */
@media (hover: none) {
  .squad-table tbody tr:hover, .league-table tbody tr:hover,
  .tac-squad-table tbody tr:hover, .fixture-row:hover, .tr-row:hover,
  .inbox-msg:hover, .table-club:hover { background: inherit; }
  .squad-table thead th.sortable:hover, .tac-squad-table thead th.sortable:hover { color: var(--text-muted); }
}

/* Very narrow phones (<=380px): the two-up grids stop paying for themselves. */
@media (max-width: 380px) {
  .clubs-grid { grid-template-columns: minmax(0, 1fr); }
  .formation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ssb-stat { flex: 1 1 45%; }
  .snav-btn { font-size: 8.5px; }
  /* Buy back the ~20px that pushes the last column off a 360px screen. */
  .squad-table thead th, .league-table thead th { padding: 8px 4px; letter-spacing: 0.3px; }
  .squad-table tbody td, .league-table tbody td { padding: 9px 4px; }
  .fit-bar-wrap { min-width: 40px; }
}

/* =============================================
   PHONE IN LANDSCAPE
   A phone turned sideways is wider than 760px, so the block above doesn't fire —
   but 390px of height is nowhere near enough for the desktop sidebar: the club
   badge alone ate 290px of it and the nav collapsed to a 154px scroller showing
   two and a half destinations. The chrome (and only the chrome) is rebuilt here
   the same way the portrait block does it. Layout rules stay width-driven: at
   844px wide the two-column match and tactics views are still the right call.
   ============================================= */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 761px) {
  #screen-game { flex-direction: column; }
  #sidebar {
    width: 100%; height: auto; flex-shrink: 0;
    border-right: none; border-bottom: 1px solid var(--border);
    padding-top: env(safe-area-inset-top);
  }
  .sidebar-club {
    flex-direction: row; align-items: center; text-align: left;
    padding: 4px 14px; gap: 9px; border-bottom: none;
  }
  .sb-badge { width: 26px; height: 26px; border-radius: 7px; font-size: 12px; }
  .sb-text { display: flex; flex-direction: column; min-width: 0; }
  .sb-name { font-size: 13px; }
  .sb-league { font-size: 9.5px; }
  .sb-stats-row { margin-left: auto; margin-top: 0; gap: 12px; flex-shrink: 0; }
  .sidebar-bottom {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 10px; padding: 3px 14px 5px; border-top: 1px solid var(--border);
  }
  .sb-fin { flex-direction: row; gap: 16px; margin-bottom: 0; }
  .sb-budget-block { flex-direction: row; align-items: baseline; gap: 6px; }
  .sb-actions { margin-top: 0; gap: 6px; flex-shrink: 0; }
  .sb-actions .btn-secondary { min-height: 30px; padding: 0 12px; font-size: 12px; }

  .sidebar-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: repeat(6, 1fr);
    overflow: visible; height: auto; gap: 0;
    padding: 2px 2px calc(2px + env(safe-area-inset-bottom));
    background: var(--bg1); border-top: 1px solid var(--border);
  }
  .sidebar-nav .snav-secondary { display: none; }
  .snav-more { display: flex; }
  .more-sheet:not(.hidden) { display: flex; }
  .more-sheet-panel { margin-bottom: calc(46px + env(safe-area-inset-bottom)); max-height: 62dvh; }
  .snav-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 3px 2px; min-height: 42px; width: auto;
    white-space: nowrap; font-size: 9px; text-align: center; overflow: hidden;
  }
  .snav-btn.active { box-shadow: none; border-radius: var(--r-sm); }
  .snav-label-long { display: none; }
  .snav-label-short { display: inline; }

  #main-content { padding: 12px 16px calc(58px + env(safe-area-inset-bottom)); }
  /* The fixed desktop height assumed no top bar; let the page scroll instead. */
  .tactics-layout { height: auto; overflow: visible; }

  .toast { bottom: calc(58px + env(safe-area-inset-bottom)); }
  #match-header { padding: 5px 12px; padding-top: calc(5px + env(safe-area-inset-top)); }
  .match-score { font-size: 20px; }
  #match-controls { padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); }
  #match-controls button { min-height: 38px; }
  .modal-box { max-height: 92dvh; padding-top: 14px; }
  input[type="text"], input[type="search"], input[type="number"], select, textarea { font-size: 16px; }
}

/* Narrow phone held sideways (<=760px wide, e.g. a small phone): the portrait
   block already applies — just claw back the vertical padding. */
@media (max-width: 760px) and (orientation: landscape) and (max-height: 500px) {
  .sidebar-club { padding: 4px 12px; }
  .sidebar-bottom { padding: 3px 12px 4px; }
  .snav-btn { min-height: 42px; font-size: 8.5px; }
  #main-content { padding: 12px 14px calc(60px + env(safe-area-inset-bottom)); }
  #match-header { padding: 5px 12px; }
  .match-score { font-size: 20px; }
  #match-controls { padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); }
  #match-controls button { min-height: 38px; }
  .modal-box { max-height: 92dvh; padding-top: 14px; }
}

/* Center the fitness bar under its centered column heading */
.squad-table tbody td:nth-child(9) .fit-bar-wrap { margin: 0 auto; }
.squad-table tbody td:nth-child(5),
.squad-table tbody td:nth-child(6),
.squad-table tbody td:nth-child(7),
.squad-table tbody td:nth-child(8) { text-align: center; }

/* ---- Set pieces (tactics) ---- */
.sp-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.sp-row { display: flex; align-items: center; gap: 8px; }
.sp-order { flex-shrink: 0; width: 52px; font-size: 10px; font-weight: 800; letter-spacing: 0.6px;
            text-transform: uppercase; color: var(--text-muted); }
.sp-select { flex: 1; min-width: 0; padding: 5px 8px; background: var(--bg3); border: 1px solid var(--border);
             border-radius: var(--r-sm); color: var(--text); font-size: 12px; font-weight: 600; outline: none; cursor: pointer; }
.sp-select:focus { border-color: var(--accent); }
.sp-stats { flex-shrink: 0; display: flex; gap: 4px; min-width: 0; }
.sp-stat { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px;
           font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-stat.good { color: var(--accent); background: rgba(0, 208, 132, 0.12); }
.sp-stat.ok   { color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
.sp-stat.poor { color: var(--accent-red); background: rgba(239, 68, 68, 0.12); }
.sp-note { font-size: 11.5px; color: var(--text); margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---- Set piece designer ----
   The box you are attacking (or defending) drawn as zones you drop men into. Same
   turf palette as the tactics pitch so it reads as part of the same pitch, not a
   separate widget. */
.sp-designer { margin-top: 12px; }
.sp-designer-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.sp-designer-title { font-size: 11px; font-weight: 800; letter-spacing: 0.6px;
                     text-transform: uppercase; color: var(--text-muted); }
.sp-designer-hint { flex: 1; min-width: 0; font-size: 11px; color: var(--text-muted); }
.sp-pitch-box {
  position: relative;
  padding: 7px 8px 8px;
  /* Same turf as the tactics pitch, but darkened — this block is mostly text and
     chips, and full-strength turf drowns them. */
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.022) 0 12%,
      rgba(0,0,0,0.055) 12% 24%),
    linear-gradient(180deg, #1c3410 0%, #152a0b 40%, #112207 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.sp-taker-note { margin-top: 6px; font-size: 11.5px; color: var(--text-muted); }
/* The goal you are attacking, along the top edge. */
.sp-goal-line { height: 16px; display: flex; align-items: flex-start; justify-content: center;
                border-bottom: 2px solid rgba(255,255,255,0.28); margin: 0 -8px 8px; }
.sp-goal { width: 84px; height: 7px; border: 2px solid rgba(255,255,255,0.75); border-top: none;
           border-radius: 0 0 3px 3px; background: rgba(255,255,255,0.10); }
.sp-zone-grid { display: grid; gap: 6px; }
.sp-grid-atk {
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "near six far" "short edge edge" "back back back";
}
.sp-grid-atk > .sp-zone:nth-child(1) { grid-area: near; }
.sp-grid-atk > .sp-zone:nth-child(2) { grid-area: six; }
.sp-grid-atk > .sp-zone:nth-child(3) { grid-area: far; }
.sp-grid-atk > .sp-zone:nth-child(4) { grid-area: short; }
.sp-grid-atk > .sp-zone:nth-child(5) { grid-area: edge; }
.sp-grid-atk > .sp-zone:nth-child(6) { grid-area: back; }
.sp-grid-def {
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "post zone" "mark mark" "edge up";
}
.sp-grid-def > .sp-zone:nth-child(1) { grid-area: post; }
.sp-grid-def > .sp-zone:nth-child(2) { grid-area: zone; }
.sp-grid-def > .sp-zone:nth-child(3) { grid-area: mark; }
.sp-grid-def > .sp-zone:nth-child(4) { grid-area: edge; }
.sp-grid-def > .sp-zone:nth-child(5) { grid-area: up; }
.sp-zone {
  min-height: 52px; padding: 6px 7px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: var(--r-sm);
  transition: border-color 0.12s, background 0.12s;
}
/* Only light the zones up while a man is actually picked up. */
.sp-zone.droppable { cursor: pointer; border-color: rgba(255,255,255,0.34); }
.sp-zone.droppable:hover { border-color: var(--accent); background: rgba(0, 208, 132, 0.14); }
.sp-zone-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.sp-zone-label { font-size: 9.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
                 color: rgba(255,255,255,0.72); }
.sp-zone-count { font-size: 10px; font-weight: 800; color: rgba(255,255,255,0.55);
                 font-variant-numeric: tabular-nums; }
.sp-zone-men { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-zone-empty { font-size: 10.5px; color: rgba(255,255,255,0.40); font-style: italic; }
.sp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 7px 3px 4px;
  background: rgba(10, 14, 22, 0.82);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-sm);
  color: var(--text); font-size: 11px; font-weight: 600; cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.sp-chip:hover { border-color: rgba(255,255,255,0.42); }
.sp-chip.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sp-chip-pos { font-size: 8.5px; font-weight: 800; padding: 1px 4px; border-radius: 4px; }
.sp-chip-name { white-space: nowrap; }
.sp-chip-stat { font-size: 9.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-chip-stat.good { color: var(--accent); }
.sp-chip-stat.ok   { color: #f59e0b; }
.sp-chip-stat.poor { color: var(--accent-red); }
.sp-readout { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 11.5px;
              color: var(--text-muted); }
.sp-readout b { color: var(--text); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .sp-grid-atk { grid-template-areas: "near six far" "short edge edge" "back back back"; }
}

/* ---- Tactical familiarity ---- */
/* Every style/formation button carries how well the squad is actually drilled in
   it, so switching systems reads as a project rather than a free upgrade. */
.tac-style-btn { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.tac-style-name { display: block; }
.tac-fam-bar { display: block; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.13); overflow: hidden; }
.formation-btn .tac-fam-bar { margin-top: 5px; }
.tac-fam-fill { display: block; height: 100%; border-radius: 999px; background: currentColor; }
.tac-fam-bar.fluent  .tac-fam-fill { background: var(--accent); }
.tac-fam-bar.learning .tac-fam-fill { background: #f59e0b; }
.tac-fam-bar.raw     .tac-fam-fill { background: var(--accent-red); }
.tac-fam-bar.free    .tac-fam-fill { background: rgba(255, 255, 255, 0.30); }
.tac-fam-note { font-size: 11.5px; margin-top: 6px; font-weight: 600; }
.tac-fam-note.fluent   { color: var(--accent); }
.tac-fam-note.learning { color: #f59e0b; }
.tac-fam-note.raw      { color: var(--accent-red); }
.tac-fam-note.free     { color: var(--text-muted); font-weight: 500; }

/* ---- Player move assessment & richer negotiations ---- */
/* How the player himself sees a move: the factors that decided it, the role he'd
   have, and what he'd want to be talked into it. */
.pm-move-factors { margin-top: 6px; padding: 8px 10px; background: rgba(255,255,255,0.03);
                   border: 1px solid var(--border); border-radius: var(--r-sm); }
.pm-move-factor { display: flex; justify-content: space-between; align-items: center;
                  font-size: 11.5px; padding: 2px 0; color: var(--text-muted); }
.pm-move-factor span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.pm-move-factor .good { color: var(--accent); }
.pm-move-factor .bad  { color: var(--accent-red); }
.pm-move-role { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--border);
                font-size: 11.5px; color: var(--text); }
.pm-prestige-warn.pm-move-keen { color: var(--accent); }
.pm-clause-row span:last-child { color: var(--accent-gold); }
.neg-demands { margin: 8px 0; padding: 8px 10px; border-radius: var(--r-sm);
               background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.25); }
.neg-demands-title { font-size: 10px; font-weight: 800; letter-spacing: 0.6px;
                     text-transform: uppercase; color: #f59e0b; margin-bottom: 4px; }
.neg-demand { font-size: 12px; color: var(--text); padding: 1px 0; }
.neg-demand::before { content: '· '; color: #f59e0b; }
.neg-hint { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.35; }

/* ---- News articles: sub-heads, stat tables, pull quotes ---- */
.news-article .news-sub { font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-muted); margin: 16px 0 8px; }
.news-article .news-quote { border-left: 3px solid var(--border-light); padding: 2px 0 2px 12px;
  margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; color: var(--text); font-style: italic; }
.news-article .news-quote-who { display: block; font-style: normal; font-size: 11px;
  color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.news-article .news-dim { color: var(--text-muted); font-size: 11px; }
.news-rows { margin: 0 0 12px; }
.news-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0;
  border-bottom: 1px solid var(--border); font-size: 12.5px; }
.news-row:last-child { border-bottom: none; }
.news-row-k { color: var(--text-muted); }
.news-row-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.news-table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 12.5px; }
.news-table th { text-align: right; font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted); padding: 0 0 6px; border-bottom: 1px solid var(--border); }
.news-table th:first-child { text-align: left; }
.news-table td { text-align: right; padding: 6px 0; border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums; }
.news-table td.nt-first { text-align: left; }
.news-table tr:last-child td { border-bottom: none; }
/* Wide tables (odds boards) scroll rather than pushing the modal sideways */
.news-modal { max-height: 78vh; overflow-y: auto; }

/* ---- Instant press feedback ----
   Buttons must acknowledge a press on pointer-down, not when the handler finishes.
   `touch-action: manipulation` also kills the 300ms double-tap delay mobile browsers
   add by default, which on its own made every tap feel like it hadn't registered. */
button,
.snav-btn, .ltab, .squad-filter-btn, .tac-seg-btn, .tac-inner-tab-btn, .transfer-tab,
.euro-sub-btn, .scout-tab-btn, .fac-tab-btn, .pm-tab-btn, .tac-squad-filter-btn,
.sv-pick-card, .scenario-card, .club-card, .inbox-msg, .sp-chip, .sp-zone,
.pitch-player, .table-club, .tr-row, .fixture-row {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:active,
.snav-btn:active, .ltab:active, .squad-filter-btn:active, .tac-seg-btn:active,
.tac-inner-tab-btn:active, .transfer-tab:active, .euro-sub-btn:active,
.scout-tab-btn:active, .fac-tab-btn:active, .pm-tab-btn:active,
.tac-squad-filter-btn:active, .sp-chip:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(1.12);
  /* No transition on the pressed state — it must appear on the same frame as the
     press. The release still eases back via the element's own transition. */
  transition: none;
}
.sv-pick-card:active, .scenario-card:active, .club-card:active, .inbox-msg:active {
  transform: scale(0.995);
  transition: none;
}
button:disabled:active { transform: none; filter: none; }
/* A button mid-work says so rather than looking dead. */
button[data-busy="1"] { opacity: 0.65; cursor: progress; }