/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* ===== AFM DESIGN SYSTEM v2 "Floodlit" (designer tokens) ===== */
  /* Ground: deep, cool, stadium-at-night. Surfaces are top-lit panels catching floodlight. */
  --afm-bg-base:#0A0E13; --afm-bg-deep:#05070A; --afm-surface:#111721;
  --afm-surface-elevated:#161D28; --afm-surface-highlight:#1C2531;
  --afm-border-subtle:#212C38; --afm-border-strong:#33414F;
  --afm-text-primary:#F5F8F6; --afm-text-secondary:#C4D0CB; --afm-text-muted:#7E8C88; --afm-text-disabled:#54615C;
  --afm-green:#2EA043; --afm-green-bright:#3FE07D; --afm-green-deep:#17692F;
  --afm-gold:#F5C043; --afm-red:#F87171; --afm-blue:#4DA3FF; --afm-purple:#A78BFA; --afm-teal:#2DD4BF;
  --afm-chart-track:#263238; --afm-chart-grid:#1F2A30;
  --afm-area-start:rgba(46,160,67,.45); --afm-area-end:rgba(46,160,67,.02);
  /* Signature gradients + light edges — the "catch the floodlight" treatment reused across primitives */
  --grad-surface:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 42%);
  --grad-primary:linear-gradient(180deg, #34B84D, #23913C);
  --grad-primary-hover:linear-gradient(180deg, #46E084, #2AA648);
  --grad-topbar:linear-gradient(180deg, #131A24, #0C1119);
  --grad-gold:linear-gradient(180deg, #FFD86B, #E0A420);
  --edge-top:inset 0 1px 0 rgba(255,255,255,.06);
  --edge-top-strong:inset 0 1px 0 rgba(255,255,255,.10);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-pill:999px;
  --shadow-card:0 10px 30px rgba(0,0,0,.35), var(--edge-top); --shadow-elevated:0 20px 52px rgba(0,0,0,.46), var(--edge-top-strong);
  --glow-green:0 0 0 1px rgba(63,224,125,.45), 0 0 24px rgba(46,160,67,.20);
  --glow-gold:0 0 0 1px rgba(245,192,67,.55), 0 0 30px rgba(245,192,67,.20);
  --font-ui:'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:'Archivo', 'Inter', system-ui, sans-serif;
  --font-numeric:'Saira Condensed', 'Archivo', system-ui, sans-serif;

  /* ===== legacy variable names remapped onto the new palette (keeps existing rules working) ===== */
  --bg: var(--afm-bg-base);
  --bg2: var(--afm-surface);
  --bg3: var(--afm-surface-elevated);
  --green: var(--afm-green);
  --green2: var(--afm-green);
  --green-pitch: var(--afm-green-deep);
  --green-pitch2: #19692e;
  --accent: var(--afm-blue);
  --accent2: #388bfd;
  --red: var(--afm-red);
  --yellow: var(--afm-gold);
  --text: var(--afm-text-primary);
  --text2: var(--afm-text-muted);
  --border: var(--afm-border-subtle);
  --home: var(--afm-blue);
  --away: #ef4444;
  --gold: var(--afm-gold);
}
html, body { height: 100%; font-family: var(--font-ui); background: var(--afm-bg-base); color: var(--afm-text-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
#app { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
button { cursor: pointer; border: none; font-family: inherit; }
.loading { display: flex; align-items: center; justify-content: center; height: 100vh; font-size: 1.5rem; color: var(--text2); }

/* ===== SHARED COMPONENTS ===== */
.screen { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--bg2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.topbar h2 { font-size: 1rem; font-weight: 600; flex: 1; }
.topbar-team { font-size: 0.8rem; color: var(--text2); }
.btn { padding: 7px 16px; border-radius: 6px; font-size: 0.85rem; font-weight: 500; transition: all 0.15s; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green2); }
.btn-secondary { background: var(--bg3); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--border); }
.btn-danger { background: #da3633; color: #fff; }
.btn-danger:hover { background: var(--red); }
.btn-sm { padding: 4px 10px; font-size: 0.78rem; }
.btn-icon { background: none; color: var(--text2); font-size: 1.1rem; padding: 4px 8px; border-radius: 4px; }
.btn-icon:hover { background: var(--bg3); color: var(--text); }
.badge { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 0.72rem; font-weight: 600; }
.badge-green { background: #1a4731; color: var(--green2); }
.badge-red { background: #3d1f1e; color: var(--red); }
.badge-yellow { background: #2e2205; color: var(--yellow); }
.badge-blue { background: #1b2d47; color: var(--accent); }
.badge-gray { background: var(--bg3); color: var(--text2); }
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
.section-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text2); margin-bottom: 10px; }
.scroll-y { overflow-y: auto; }
.scroll-y::-webkit-scrollbar { width: 6px; } .scroll-y::-webkit-scrollbar-track { background: transparent; } .scroll-y::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ===== TEAM SELECT ===== */
.ts-screen { height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.ts-header { padding: 24px; text-align: center; border-bottom: 1px solid var(--border); position: relative;
  background: linear-gradient(rgba(13,17,23,0.62), rgba(13,17,23,0.92)), url('assets/bg-titlescreen.png') center/cover no-repeat; }
.ts-header h1 { text-shadow: 0 2px 12px rgba(0,0,0,0.8); }
.ts-header h1 { font-size: 1.8rem; font-weight: 700; color: var(--green2); }
/* Official AFM logo on the title screen (white/black/red lockup — pops on the dark bg) */
.ts-logo { display:block; margin:0 auto 6px; width:min(340px, 78vw); height:auto; filter: drop-shadow(0 4px 18px rgba(0,0,0,0.55)); }
.ts-header p { color: var(--text2); margin-top: 6px; }
.ts-search { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.ts-search input { width: 100%; padding: 8px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 0.9rem; outline: none; }
.ts-search input:focus { border-color: var(--accent); }
.ts-grid { flex: 1; overflow-y: auto; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ts-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 14px; cursor: pointer; transition: all 0.15s; }
.ts-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.ts-card-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; }
.ts-card-meta { font-size: 0.78rem; color: var(--text2); display: flex; gap: 10px; }
.ts-card-strength { margin-top: 8px; height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.ts-card-strength-bar { height: 100%; background: var(--green2); border-radius: 2px; }

/* ===== HUB ===== */
.hub-body { flex: 1; overflow-y: auto; padding: 16px; display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.hub-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hub-nav-btn { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 18px 14px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 12px; }
.hub-nav-btn:hover { border-color: var(--accent); background: var(--bg3); }
.hub-nav-icon { font-size: 1.5rem; }
.hub-nav-label { font-weight: 600; font-size: 0.9rem; }
.hub-nav-sub { font-size: 0.75rem; color: var(--text2); margin-top: 2px; }
.hub-right { display: flex; flex-direction: column; gap: 14px; }
.hub-match-preview { }
.hub-match-teams { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hub-match-team { text-align: center; flex: 1; }
.hub-match-team-name { font-weight: 600; font-size: 0.85rem; }
.hub-match-vs { font-size: 1.2rem; color: var(--text2); font-weight: 300; }
.hub-finances { display: flex; gap: 8px; }
.hub-finance-item { flex: 1; text-align: center; }
.hub-finance-label { font-size: 0.7rem; color: var(--text2); }
.hub-finance-value { font-size: 1.1rem; font-weight: 700; color: var(--green2); }
.form-dots { display: flex; gap: 4px; margin-top: 6px; }
.form-dot { width: 18px; height: 18px; border-radius: 50%; font-size: 0.62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.form-dot-W { background: #1a4731; color: var(--green2); }
.form-dot-D { background: #2e2205; color: var(--yellow); }
.form-dot-L { background: #3d1f1e; color: var(--red); }
.hub-news { }
.news-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.news-item:last-child { border-bottom: none; }
.news-label { font-size: 0.7rem; color: var(--text2); margin-bottom: 2px; }

/* ===== SQUAD ===== */
.squad-body { flex: 1; overflow-y: auto; padding: 16px; }
.squad-filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.filter-btn { padding: 5px 12px; border-radius: 20px; font-size: 0.78rem; cursor: pointer; background: var(--bg3); border: 1px solid var(--border); color: var(--text2); transition: all 0.1s; }
.filter-btn.active { background: var(--accent2); border-color: var(--accent); color: #fff; }
.squad-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.squad-table th { padding: 8px 10px; text-align: left; color: var(--text2); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); }
.squad-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.squad-table tr:last-child td { border-bottom: none; }
.squad-table tr:hover td { background: var(--bg2); }
.player-name-cell { font-weight: 500; }
/* Compact mobile squad list — hidden on desktop (the full table shows instead); see the <=640px block. */
.squad-mlist { display: none; }
.pos-badge { display: inline-block; width: 28px; text-align: center; padding: 2px 0; border-radius: 4px; font-size: 0.72rem; font-weight: 700; }
.pos-GK { background: #1f2d1a; color: #4ade80; }
.pos-DF { background: #1b2d47; color: var(--accent); }
.pos-DM { background: #1b2535; color: #60a5fa; }
.pos-MF { background: #2d2522; color: #fb923c; }
.pos-AM { background: #2d1f32; color: #c084fc; }
.pos-FW { background: #3d1f1e; color: var(--red); }
.stat-bar { display: flex; align-items: center; gap: 6px; }
.stat-bar-fill { height: 6px; border-radius: 3px; background: var(--green2); min-width: 4px; }
.stat-num { font-size: 0.78rem; color: var(--text2); width: 20px; }
.injury-tag { color: var(--red); font-size: 0.72rem; }
.sus-tag { color: var(--yellow); font-size: 0.72rem; }
.rating-num { font-weight: 700; }

/* ===== TACTICS ===== */
.tactics-body { flex: 1; overflow-y: auto; display: grid; grid-template-columns: 1fr 260px; height: calc(100vh - 45px); }
.tactics-pitch-zone { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.tactics-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tactic-select, .formation-select { background: var(--bg2); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 6px; font-size: 0.85rem; outline: none; cursor: pointer; }
.formation-pitch { position: relative; background: var(--green-pitch); border-radius: 8px; flex: 1; min-height: 380px; overflow: hidden; border: 2px solid rgba(255,255,255,0.15); }
.pitch-lines { position: absolute; inset: 0; }
.pitch-player-slot { position: absolute; transform: translate(-50%, -50%); text-align: center; cursor: pointer; }
.pitch-player-dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; text-align: center; line-height: 1.1; border: 2px solid rgba(255,255,255,0.3); transition: all 0.2s; overflow: hidden; color: #fff; }
.pitch-player-dot:hover { transform: scale(1.1); border-color: rgba(255,255,255,0.8); }
.pitch-player-dot.home-dot { background: var(--home); }
.pitch-player-dot.empty-dot { background: rgba(255,255,255,0.1); border-style: dashed; color: rgba(255,255,255,0.4); }
.pitch-player-name { font-size: 0.6rem; color: rgba(255,255,255,0.9); margin-top: 2px; white-space: nowrap; max-width: 60px; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
/* Formation-pitch drag-and-drop (Phase 6): avatar tokens, drag ghost, drop highlight, OVR/Balance */
.pitch-player-dot .pdot-face, .pitch-player-dot .pav { width: 100%; height: 100%; display: block; }
.pitch-player-dot .pdot-face { border-radius: 50%; overflow: hidden; }
.pitch-player-dot[data-drag-player] { cursor: grab; touch-action: none; }
.pitch-player-slot.drop-hover .pitch-player-dot { box-shadow: 0 0 0 3px var(--accent, #36D27D), 0 0 14px rgba(54,210,125,0.7); transform: scale(1.14); border-color: #fff; }
.pitch-player-dot.dragging-src { opacity: 0.35; }
.avail-player[data-drag-player] { touch-action: none; }
.pitch-drag-ghost { position: fixed; z-index: 9999; width: 44px; height: 44px; margin-left: -22px; margin-top: -22px; border-radius: 50%; overflow: hidden; pointer-events: none; box-shadow: 0 8px 20px rgba(0,0,0,0.55); border: 2px solid #fff; display: flex; align-items: center; justify-content: center; background: var(--home, #3b82f6); color: #fff; font-weight: 800; font-size: 0.8rem; }
.pitch-drag-ghost .pdot-face, .pitch-drag-ghost .pav, .pitch-drag-ghost svg, .pitch-drag-ghost img { width: 100%; height: 100%; display: block; }
.pitch-meters { display: flex; gap: 18px; justify-content: center; margin: 6px 0 2px; font-size: 0.8rem; color: var(--text2); }
.pitch-meters b { color: var(--text); font-size: 1rem; font-variant-numeric: tabular-nums; }
.tactics-panel { background: var(--bg2); border-left: 1px solid var(--border); padding: 14px; overflow-y: auto; }
.sub-rule { background: var(--bg3); border-radius: 6px; padding: 10px; margin-bottom: 8px; font-size: 0.78rem; }
.sub-rule select { background: var(--bg2); border: 1px solid var(--border); color: var(--text); padding: 3px 6px; border-radius: 4px; font-size: 0.75rem; outline: none; width: 100%; margin-top: 4px; }
.available-players { margin-top: 8px; }
.avail-player { padding: 6px 8px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 0.8rem; transition: background 0.1s; }
.avail-player:hover { background: var(--bg3); }

/* ===== MATCH SCREEN ===== */
.match-screen { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg); position: relative; }
.match-topbar { display: flex; align-items: center; flex-wrap: wrap; padding: 10px 16px; background: var(--bg2); border-bottom: 1px solid var(--border); gap: 12px; flex-shrink: 0; }
.match-score-block { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; }
/* In-match style band: HOME playing-style vs AWAY playing-style (icon+colour+label) on its own row. */
.match-style-band { flex-basis:100%; order:5; display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:0.82rem; font-weight:600; padding-top:6px; margin-top:2px; border-top:1px solid var(--border); }
.match-style-band .msb-side { display:inline-flex; align-items:center; gap:5px; min-width:120px; }
.match-style-band .msb-right { justify-content:flex-end; }
.match-style-band .msb-mid { color:var(--text2); font-size:0.66rem; font-weight:500; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.match-team-name { font-weight: 600; font-size: 0.9rem; text-align: center; max-width: 160px; }
.match-score { font-size: 1.8rem; font-weight: 700; min-width: 60px; text-align: center; }
.match-minute { font-size: 0.8rem; color: var(--text2); min-width: 50px; text-align: center; }
.match-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* Pinned controls + tactic card (always visible); the views below flick between Feed/Pitch/Stats/Table. */
.match-fixed { flex-shrink: 0; display: flex; flex-direction: column; gap: 7px; padding: 9px 12px 0; }
.match-view-tabs { display: flex; gap: 5px; padding: 9px 12px 0; flex-shrink: 0; }
.mv-tab { flex: 1; padding: 8px 3px; border-radius: 8px 8px 0 0; background: var(--bg2); border: 1px solid var(--border); border-bottom: none; color: var(--text2); font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mv-tab.active { background: var(--bg3); color: var(--text); border-color: var(--border-strong, #33414A); }
.match-views { flex: 1; min-height: 0; display: flex; padding: 0 12px 10px; }
.mv-pane { display: none; flex: 1; min-height: 0; border: 1px solid var(--border-strong, #33414A); border-radius: 0 0 8px 8px; }
.mv-pane.active { display: flex; flex-direction: column; }
.mv-pane[data-mv="feed"].active, .mv-pane[data-mv="table"].active { overflow-y: auto; }
.mv-pane[data-mv="pitch"] { border: none; }
.mv-pane[data-mv="pitch"].active > .live-pitch { flex: 1; min-height: 0; }
.mv-pane[data-mv="stats"] { padding: 10px; }
.mv-pane[data-mv="table"] { padding: 8px 10px; }
.mv-livetable { display: flex; flex-direction: column; }
.mv-trow { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.mv-trow.me { background: rgba(77,163,255,0.12); border-radius: 6px; }
.mv-tpos { min-width: 20px; color: var(--text2); font-weight: 700; text-align: center; }
.mv-tname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-tpts { font-weight: 800; min-width: 26px; text-align: right; }
.match-pitch-side { display: flex; flex-direction: column; padding: 12px; gap: 8px; min-height: 0; overflow: hidden; }
.match-controls { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.speed-btn { padding: 4px 12px; border-radius: 4px; font-size: 0.78rem; background: var(--bg3); border: 1px solid var(--border); color: var(--text2); cursor: pointer; }
.speed-btn.active { background: var(--accent2); color: #fff; border-color: var(--accent); }
/* Merged in-match tactic card (Option A): one source of truth — your picker, the opponent, and the
   counter status, in a fixed layout that never reflows as the badges/text change. */
.match-tactic-bar { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; }
.mtb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mtb-lab { color: var(--text2); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.mtb-your { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 0.82rem; }
.mtb-opprow { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.mtb-opp { display: inline-flex; align-items: center; gap: 7px; }
.mtb-k { color: var(--text2); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; }
.tactic-badge { display:inline-flex; align-items:center; background: transparent; color: var(--text); border:1px solid var(--border); border-radius: 4px; padding: 2px 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; }
.mtb-counter { display:flex; align-items:center; gap:4px; font-size:0.72rem; font-weight:600; color:#7fe0a0; }
.mtb-counter:empty { display:none; }
/* Compact in-match squad-fit meter (same component as pre-match, tightened) */
.mtb-fit .squad-fit { margin:0; }
.mtb-fit .fit-label { font-size:0.68rem; }
.mtb-fit .fit-detail { font-size:0.66rem; }

/* In-match substitution sheet */
#sub-modal { position:absolute; inset:0; z-index:40; background:rgba(3,8,12,0.78); display:flex; align-items:center; justify-content:center; padding:14px; }
.sub-sheet { background:var(--bg2); border:1px solid var(--border-strong,#33414A); border-radius:12px; padding:14px; width:100%; max-width:560px; max-height:86%; display:flex; flex-direction:column; }
.sub-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.sub-cols { flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; overflow-y:auto; }
.sub-row { display:flex; align-items:center; gap:7px; padding:7px 8px; border-radius:7px; border:1px solid transparent; cursor:pointer; font-size:0.84rem; }
.sub-row:hover { background:var(--bg3); }
.sub-row.sel { background:rgba(77,163,255,0.14); border-color:var(--accent); }
.sub-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sub-rate { font-weight:700; min-width:24px; text-align:right; }
.sub-confirm { width:100%; margin-top:12px; padding:12px; }
.sub-confirm:disabled { opacity:0.45; cursor:not-allowed; }
.sub-formrow { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sub-formrow .formation-select { flex:1; }
.sub-row.oop { border-left:3px solid var(--gold); border-radius:0 7px 7px 0; opacity:0.75; }
.sub-oop-note { min-height:1em; font-size:0.74rem; color:var(--gold); margin-top:8px; }
.sub-oop-note:empty { display:none; }
.fit-chip { font-size:0.72rem; font-weight:700; min-width:32px; text-align:right; font-variant-numeric:tabular-nums; }
/* Tactic-picker icon buttons (in-match): one coloured style icon per tactic, spread full-width, active highlighted. */
.tactic-icon-row { display:flex; gap:5px; }
.tactic-icon-btn { flex:1; display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0; border-radius:7px; background:transparent; border:1px solid var(--border); cursor:pointer; opacity:.62; }
.tactic-icon-btn:hover { opacity:1; border-color:var(--tc,#888); }
.tactic-icon-btn.active { opacity:1; border-color:var(--tc,#888); background:rgba(255,255,255,0.07); box-shadow:0 0 0 1px var(--tc,#888) inset; }
.live-pitch { position: relative; flex: 1; min-height: 0; border-radius: 8px; overflow: hidden; border: 2px solid rgba(255,255,255,0.15);
  background: linear-gradient(rgba(8,40,16,0.18), rgba(8,40,16,0.18)), url('assets/pitch-texture.png') center/cover no-repeat, var(--green-pitch); }
.pitch-lines { position: absolute; inset: 0; pointer-events: none; }
.pitch-lines svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.live-pitch svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pitch-team { position: absolute; inset: 0; pointer-events: none; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }
.pitch-dot { position: absolute; transform: translate(-50%, -50%); transition: left 0.4s ease, top 0.4s ease; }
.pitch-dot-circle { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.58rem; font-weight: 700; color: #fff; border: 2px solid rgba(255,255,255,0.4); }
.pitch-dot.home .pitch-dot-circle { background: var(--home); }
.pitch-dot.away .pitch-dot-circle { background: var(--away); }
.pitch-dot.active .pitch-dot-circle { box-shadow: 0 0 10px rgba(255,255,100,0.8); border-color: #ffff00; transform: scale(1.2); animation: dot-pulse 1.1s ease-in-out infinite; }
@keyframes dot-pulse { 0%,100% { box-shadow: 0 0 8px rgba(255,255,100,0.7); } 50% { box-shadow: 0 0 16px rgba(255,255,100,1); } }
/* Readability: dim the off-ball players so the ball-carrier (the .active dot) reads clearly. */
.pitch-dot:not(.active) .pitch-dot-circle { opacity: 0.7; transition: opacity 0.3s ease; }
/* Pass/shot trails: fading vectors so ball movement reads as passes and strikes. */
.trail-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9; }
.ball-trail { stroke: rgba(255,255,255,0.75); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: trail-fade 0.5s ease-out forwards; }
.ball-trail.shot-trail { stroke: rgba(255,238,0,0.9); stroke-width: 3.5; animation-duration: 0.7s; }
@keyframes trail-fade { from { opacity: 1; } to { opacity: 0; } }
/* Goalmouth flash when a strike arrives */
.goal-flash { position: absolute; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; pointer-events: none; z-index: 11;
  background: radial-gradient(circle, rgba(255,238,0,0.85) 0%, rgba(255,238,0,0.25) 45%, transparent 70%); animation: gflash 0.6s ease-out forwards; }
@keyframes gflash { from { opacity: 1; transform: scale(0.4); } to { opacity: 0; transform: scale(1.8); } }
/* Danger tint over the attacked third while a chance is staged */
.zone-tint { position: absolute; top: 0; bottom: 0; width: 34%; pointer-events: none; z-index: 5; animation: zone-breathe 1.6s ease-in-out forwards; }
.zone-tint.zone-right { right: 0; background: linear-gradient(to right, transparent, rgba(255,90,60,0.16)); }
.zone-tint.zone-left  { left: 0;  background: linear-gradient(to left,  transparent, rgba(255,90,60,0.16)); }
@keyframes zone-breathe { 0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
.pitch-ball { position: absolute; transform: translate(-50%, -50%); transition: left 0.35s ease, top 0.35s ease; z-index: 10; }
.pitch-ball-inner { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.pitch-ball.flying .pitch-ball-inner { background: #ffee00; box-shadow: 0 0 12px rgba(255,238,0,0.8); }
.match-events-side { background: var(--bg2); border-left: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.events-header { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.events-scroll { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px); mask-image: linear-gradient(to bottom, transparent 0, #000 30px); }
/* CM-style beats: newest = highlighted `.current` at the bottom; older beats fade above. */
.cm-group { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; }
.cm-group + .cm-group { border-top: 1px solid var(--border); }
.cm-group:not(.current) { opacity: 0.4; }
.cm-group .event-line.min-line { border-top: none; margin-top: 0; padding-top: 0; }
.cm-group.current .event-line.min-line { background: rgba(77,163,255,0.12); border-left: 3px solid var(--accent); padding: 6px 9px; border-radius: 0 6px 6px 0; }
/* Championship-Manager-style commentary feed: readable proportional text, bold minute headers,
   indented build-up beats, and prominent key events. */
.event-line { font-size: 0.86rem; color: var(--afm-text-secondary); line-height: 1.5; font-family: var(--font-ui); }
.event-line.min-line { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--afm-border-subtle); font-weight: 700; color: var(--afm-text-primary); }
.events-scroll .event-line.min-line:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.event-line.cont-line { padding-left: 18px; position: relative; color: var(--afm-text-muted); }
.event-line.cont-line::before { content: '›'; position: absolute; left: 4px; color: var(--afm-border-strong); font-weight: 700; }
.event-line.goal-line { color: var(--afm-green-bright); font-weight: 800; font-size: 0.95rem; padding-left: 0; }
.event-line.goal-line::before { content: none; }
.event-line.card-line { color: var(--afm-gold); }
.event-line.sub-line { color: var(--afm-blue); font-weight: 700; }
.event-line.red-line { color: var(--afm-red); font-weight: 700; }
.event-line.score-line { color: var(--afm-blue); font-weight: 700; }
.event-line.scout-line { color: var(--afm-purple); font-style: italic; padding-left: 18px; }
.event-line.system-line { color: var(--afm-blue); font-weight: 700; text-align: center; margin: 9px 0; padding: 6px 0; border-top: 1px solid var(--afm-border-subtle); border-bottom: 1px solid var(--afm-border-subtle); }
.event-line.new { animation: fadein 0.3s ease; }
@keyframes fadein { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
.match-stats-bar { padding: 8px 12px; border-top: 1px solid var(--border); display: flex; gap: 12px; font-size: 0.75rem; color: var(--text2); flex-shrink: 0; }
.match-stat-item { display: flex; align-items: center; gap: 4px; }

/* ===== TABLE ===== */
.table-body { flex: 1; overflow-y: auto; padding: 16px; }
.league-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.league-table th { padding: 8px 10px; text-align: left; color: var(--text2); font-size: 0.72rem; text-transform: uppercase; border-bottom: 1px solid var(--border); }
.league-table th:not(:first-child):not(:nth-child(2)) { text-align: center; }
.league-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.league-table td:not(:first-child):not(:nth-child(2)) { text-align: center; }
.league-table tr.player-row td { background: #1b2d1a; }
.league-table tr:hover td { background: var(--bg2); }
.league-table tr.player-row:hover td { background: #223d20; }
.pos-num { color: var(--text2); width: 30px; display: inline-block; }
.pts-cell { font-weight: 700; color: var(--text); }
.form-mini { display: flex; gap: 3px; justify-content: center; }
.form-mini-dot { width: 14px; height: 14px; border-radius: 50%; font-size: 0.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ===== FIXTURES ===== */
.fixtures-body { flex: 1; overflow-y: auto; padding: 16px; }
.week-header { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; color: var(--text2); padding: 10px 0 6px; margin-top: 8px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.week-header:first-child { margin-top: 0; }
.fixture-row { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(48,54,61,0.5); font-size: 0.82rem; gap: 8px; }
.fixture-row.player-match { background: rgba(88,166,255,0.05); border-radius: 4px; }
.fixture-team { flex: 1; }
.fixture-team.right { text-align: right; }
.fixture-score { min-width: 60px; text-align: center; font-weight: 700; }
.fixture-score.pending { color: var(--text2); font-weight: 400; }
.simulate-week-btn { padding: 5px 14px; background: var(--green); border-radius: 6px; color: #fff; font-size: 0.78rem; cursor: pointer; border: none; }
.simulate-week-btn:hover { background: var(--green2); }
.simulate-week-btn:disabled { background: var(--bg3); color: var(--text2); cursor: not-allowed; }

/* ===== POST MATCH ===== */
.postmatch-body { flex: 1; overflow-y: auto; padding: 16px; }
.postmatch-score-card { text-align: center; padding: 20px; background: var(--bg2); border-radius: 10px; margin-bottom: 16px; border: 1px solid var(--border); }
.postmatch-teams { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 8px; }
.postmatch-team { font-size: 1rem; font-weight: 600; }
.postmatch-score { font-size: 2.5rem; font-weight: 700; }
.postmatch-result { font-size: 0.85rem; font-weight: 600; margin-top: 6px; padding: 4px 12px; border-radius: 12px; display: inline-block; }
.postmatch-result.win { background: #1a4731; color: var(--green2); }
.postmatch-result.draw { background: #2e2205; color: var(--yellow); }
.postmatch-result.loss { background: #3d1f1e; color: var(--red); }
.postmatch-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.postmatch-stat-row { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; margin-bottom: 6px; }
.postmatch-stat-label { flex: 1; text-align: center; color: var(--text2); font-size: 0.78rem; }
.postmatch-stat-val { font-weight: 600; min-width: 30px; text-align: center; }
.player-ratings-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.player-ratings-table th { padding: 6px 8px; text-align: left; color: var(--text2); font-size: 0.7rem; text-transform: uppercase; border-bottom: 1px solid var(--border); }
.player-ratings-table td { padding: 6px 8px; border-bottom: 1px solid rgba(48,54,61,0.5); }
.rating-bar { display: flex; align-items: center; gap: 6px; }
.rating-fill { height: 5px; border-radius: 3px; }

/* ===== SCROLLBARS ===== */
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ===== MODAL ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 20px; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; }
.modal h3 { margin-bottom: 12px; }

/* ===== PRE-MATCH ===== */
.prematch-body { flex: 1; display: grid; grid-template-columns: 270px 1fr; overflow: hidden; }
.prematch-sidebar { padding: 14px; overflow-y: auto; border-right: 1px solid var(--border); }
.prematch-players { padding: 14px; overflow-y: auto; }

/* ===== PRE-MATCH v2 — single-scroll, icon-first ===== */
.match-prematch .prematch-body { display:block; overflow-y:auto; padding:12px; max-width:520px; margin:0 auto; width:100%; }
.pm-card { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:12px; margin-bottom:10px; }
.pm-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.pm-title { font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text2); }
.pm-tactic-name { display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:0.9rem; }
.pm-matchup { display:flex; gap:16px; align-items:center; margin:10px 0 4px; font-size:0.8rem; }
.pm-mu { display:inline-flex; align-items:center; gap:5px; }
.pm-setup-row { display:flex; gap:10px; align-items:flex-end; }
.pm-setup-item { flex:1; }
.pm-mini-lab { display:block; font-size:0.68rem; color:var(--text2); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:3px; }
.pm-count-box { text-align:center; }
.pm-count-box .prematch-count { font-size:1.9rem; }
.pm-kick { width:100%; margin-top:8px; padding:13px; font-size:1rem; font-weight:700; }
.pm-opp-tac { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.pm-opp-chips { display:inline-flex; gap:4px; }
.pm-opp-row { display:flex; align-items:center; gap:7px; padding:4px 0; font-size:0.82rem; }
.pm-opp-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm-opp-rate { font-weight:700; min-width:26px; text-align:right; }
.pm-squad .pm-head { position:sticky; top:0; }
.pm-sq-row { display:flex; align-items:center; gap:9px; padding:9px 8px; border-radius:7px; margin-bottom:3px; border:1px solid transparent; font-size:0.86rem; cursor:pointer; }
.pm-sq-row.starting { background:#15281a; border-color:rgba(46,160,67,0.4); }
.pm-sq-row.unavailable { opacity:0.42; pointer-events:none; }
.pm-sq-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.pm-tag { font-size:0.62rem; font-weight:700; padding:1px 4px; border-radius:3px; vertical-align:middle; }
.pm-tag.inj { background:rgba(248,113,113,.2); color:var(--red); }
.pm-tag.sus { background:rgba(240,180,41,.2); color:var(--gold); }
.pm-sq-rate { font-weight:700; min-width:26px; text-align:right; }
.pm-sq-toggle { width:28px; height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--border); color:var(--text2); font-weight:700; font-size:0.95rem; }
.pm-sq-row.starting .pm-sq-toggle.on { background:var(--green2); border-color:var(--green2); color:#fff; }
.prematch-counter { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.prematch-count { font-size: 2.8rem; font-weight: 700; color: var(--text2); line-height: 1; transition: color 0.2s; }
.prematch-count.ready { color: var(--green2); }
.prematch-count-label { font-size: 0.88rem; color: var(--text2); }
.prematch-player-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; margin-bottom: 4px; border: 1px solid transparent; font-size: 0.82rem; transition: background 0.1s, border-color 0.1s; }
.prematch-player-row:not(.unavailable):hover { background: var(--bg2); }
.prematch-player-row.starting { background: #1a2d1a; border-color: rgba(46,160,67,0.4); }
.prematch-player-row.unavailable { opacity: 0.4; pointer-events: none; }
.prematch-player-info { flex: 1; min-width: 0; }
.prematch-player-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prematch-player-meta { font-size: 0.72rem; color: var(--text2); margin-top: 2px; }
.prematch-rating { font-weight: 700; font-size: 0.95rem; min-width: 28px; text-align: center; }
.prematch-toggle-btn { padding: 5px 13px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; cursor: pointer; background: var(--bg3); border: 1px solid var(--border); color: var(--text2); white-space: nowrap; transition: all 0.15s; }
.prematch-toggle-btn.start { background: #1a4731; border-color: var(--green2); color: var(--green2); }
.prematch-toggle-btn.unavail { background: transparent; border: none; color: var(--text2); cursor: not-allowed; font-size: 0.75rem; }
.prematch-toggle-btn:not(.start):not(.unavail):hover { border-color: var(--accent); color: var(--text); }

/* ===== TRANSFERS ===== */
.transfers-body { flex: 1; overflow-y: auto; padding: 16px; }
.transfer-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; margin-bottom: 4px; background: var(--bg2); border: 1px solid var(--border); font-size: 0.82rem; transition: border-color 0.1s; }
.transfer-row:hover { border-color: var(--accent2); }
.transfer-row.listed { border-color: var(--yellow); background: #1e1a0a; }
.transfer-info { flex: 1; min-width: 0; }
.transfer-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transfer-meta { font-size: 0.72rem; color: var(--text2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transfer-rating { font-weight: 700; font-size: 0.9rem; min-width: 28px; text-align: center; }
.transfer-price { font-size: 0.78rem; color: var(--green2); font-weight: 600; min-width: 58px; text-align: right; white-space: nowrap; }

/* ===== UTILITIES ===== */
.text-green { color: var(--green2); }
.text-red { color: var(--red); }
.text-yellow { color: var(--yellow); }
.text-blue { color: var(--accent); }
.text-muted { color: var(--text2); }
.flex { display: flex; }
.flex-1 { flex: 1; }
.gap-8 { gap: 8px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.fw-600 { font-weight: 600; }
.fs-sm { font-size: 0.8rem; }

/* ===== PLAYER STYLE CHIPS ===== */
.style-chip { display:inline-block; min-width:18px; padding:1px 5px; border-radius:4px; font-size:0.68rem; font-weight:700; text-align:center; color:#fff; background:var(--sc, #555); }
.style-A { --sc:#c0392b; } .style-L { --sc:#8d6e3f; } .style-E { --sc:#7d3fa8; }
.style-N { --sc:#5a6772; } .style-P { --sc:#d07c1f; } .style-C { --sc:#1f8f86; } .style-D { --sc:#2e5fa3; }
.cohesion-box { font-size:0.78rem; padding:6px 10px; border-radius:6px; background:var(--bg3); border:1px solid var(--border); }
.scout-line { color:#7fb2e5; font-style:italic; }
.tactic-history-chips { display:flex; gap:4px; margin-top:4px; }
.counter-hint { font-size:0.72rem; color:#7fe0a0; font-weight:600; margin-left:6px; }
.tactic-status { font-size:0.72rem; font-weight:700; margin-left:8px; padding:1px 7px; border-radius:4px; }
.tactic-status.status-bad { color:#fff; background:#c0392b; }
.tactic-status.status-good { color:#fff; background:#1f8f5f; }
/* ===== LIVE MATCHDAY HUB ===== */
.md-tabs { display:flex; gap:4px; margin-left:12px; }
.md-tab { padding:4px 12px; border-radius:5px; font-size:0.78rem; background:var(--bg3); border:1px solid var(--border); color:var(--text2); }
.md-tab.active { background:var(--accent2); color:#fff; border-color:var(--accent); }
.md-all { display:grid; grid-template-columns:1fr 300px; gap:12px; padding:12px; min-height:0; overflow:hidden; }
.md-tiles-wrap, .md-table-wrap { min-height:0; overflow-y:auto; }
.md-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px; align-content:start; }
.md-tile { display:flex; align-items:center; gap:8px; background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:10px 12px; transition:background .25s, border-color .25s; }
.md-tile.flash { background:#15301d; border-color:var(--green2); }
.md-tile-team { flex:1; font-size:0.82rem; font-weight:600; }
.md-tile-team.right { text-align:right; }
.md-tile-score { font-weight:800; font-size:0.95rem; min-width:46px; text-align:center; }
.md-table-wrap { background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:10px 12px; }
.md-trow { display:flex; align-items:center; gap:8px; padding:3px 4px; font-size:0.8rem; border-bottom:1px solid var(--border); }
.md-trow:last-child { border-bottom:none; }
.md-trow.me { background:rgba(46,160,67,0.14); font-weight:700; border-radius:4px; }
.md-tpos { width:20px; color:var(--text2); text-align:right; }
.md-tname { flex:1; }
.md-tpts { font-weight:700; }
.other-goal-line { color:#9fe0b5; font-size:0.78rem; }
.clickable-row { cursor:pointer; }
.league-table tr.clickable-row:hover td { background:var(--bg3); }
/* ===== CUP BRACKET ===== */
.cup-tie { display:flex; align-items:center; gap:8px; padding:7px 10px; border-bottom:1px solid var(--border); font-size:0.82rem; }
.cup-tie.player { background:rgba(240,180,41,0.10); border-radius:6px; }
.cup-team { flex:1; }
.cup-team.right { text-align:right; }
.cup-team.win { font-weight:700; color:var(--text); }
.cup-team.lose { color:var(--text2); }
.cup-score { min-width:72px; text-align:center; font-weight:700; }
.cl-bracket .cup-tie.player { background:rgba(96,165,250,0.12); }
.cl-banner { border-color:#3b82f6; box-shadow:0 0 0 1px rgba(59,130,246,0.25), 0 2px 14px rgba(37,99,235,0.18); }
.cl-seed { font-size:0.66rem; color:var(--text2); font-weight:600; }
.cl-legs { font-size:0.66rem; color:var(--text2); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.cl-pens { color:var(--text2); font-size:0.7rem; }
/* ===== FACILITIES ===== */
.fac-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.fac-card { background:var(--afm-surface-elevated); border:1px solid var(--afm-border-subtle); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:7px; box-shadow:var(--shadow-card); }
.fac-head { display:flex; align-items:center; gap:10px; }
.fac-icon { font-size:1.7rem; line-height:1; }
.fac-headtext { display:flex; flex-direction:column; }
.fac-name { font-weight:800; font-size:1rem; }
.fac-dots { display:flex; gap:3px; margin-top:5px; }
.fac-dot { width:18px; height:5px; border-radius:2px; background:var(--afm-chart-track); }
.fac-dot.on { background:var(--afm-green); box-shadow:0 0 6px rgba(46,160,67,0.35); }
.fac-blurb { font-size:0.75rem; color:var(--text2); line-height:1.4; }
.fac-effect { font-size:0.86rem; font-weight:700; color:var(--text); }
.fac-next { font-size:0.76rem; color:var(--green2); }
.fac-btn { margin-top:auto; width:100%; }
.fac-btn:disabled { opacity:0.55; cursor:default; }
/* ===== TROPHIES + CRESTS (generated PNGs) ===== */
.trophy-card { text-align:center; }
.trophy-img { display:block; margin:4px auto 8px; max-height:150px; max-width:55%; object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,0.55)); }
.trophy-img-sm { max-height:78px; max-width:70%; }
.club-crest { display:inline-block; flex-shrink:0; background-color:var(--crest-color,#888);
  -webkit-mask:url('assets/crest-template.png?2') center/contain no-repeat;
  mask:url('assets/crest-template.png?2') center/contain no-repeat;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
/* ===== BOARD / CAREER ===== */
.board-card { border-color:rgba(96,165,250,0.35); }
.conf-bar { height:8px; border-radius:5px; background:var(--bg); overflow:hidden; margin-top:4px; }
.conf-fill { height:100%; border-radius:5px; transition:width .3s; }
.conf-good { color:#4ade80; } .conf-fill.conf-good { background:#2ea043; }
.conf-ok   { color:#86d96b; } .conf-fill.conf-ok   { background:#6cae3f; }
.conf-warn { color:#f0b429; } .conf-fill.conf-warn { background:#f0b429; }
.conf-bad  { color:#f87171; } .conf-fill.conf-bad  { background:#dc2626; }
.career-trophies { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.career-trophy { background:var(--bg3); border:1px solid var(--border); border-radius:999px; padding:5px 12px; font-weight:700; font-size:0.82rem; }
.career-club { padding:7px 0; border-bottom:1px solid var(--border); }
.ach-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:8px; }
.ach { background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:10px; text-align:center; }
.ach.locked { opacity:0.42; }
.ach.got { border-color:var(--gold); box-shadow:0 0 0 1px rgba(240,180,41,0.3); }
.ach-icon { font-size:1.6rem; line-height:1.1; }
.ach-name { font-weight:700; font-size:0.82rem; margin-top:3px; }
.ach-desc { font-size:0.68rem; color:var(--text2); margin-top:2px; line-height:1.3; }
.hist-list { margin-top:6px; }
.hist-row { padding:7px 0; border-bottom:1px solid var(--border); font-size:0.85rem; }
.hist-season { display:inline-block; min-width:34px; color:var(--text2); font-weight:700; font-size:0.75rem; margin-right:6px; }
.derby-tag { display:inline-block; background:linear-gradient(135deg,#dc2626,#f0b429); color:#fff; font-weight:800; font-size:0.72rem; letter-spacing:0.08em; padding:3px 12px; border-radius:999px; box-shadow:0 1px 6px rgba(220,38,38,0.4); }
/* ===== MATCH JUICE ===== */
.momentum-bar { width:150px; height:7px; border-radius:4px; overflow:hidden; align-self:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18); }
.momentum-fill { height:100%; transition:width .5s ease; }
.sc-flash { position:absolute; inset:0; z-index:5; pointer-events:none;
  background:radial-gradient(circle at 50% 42%, rgba(74,222,128,0.55), transparent 62%); opacity:0;
  animation:sc-goal-flash var(--cam-ms,1200ms) ease-out forwards; }
@keyframes sc-goal-flash { 0%,55%{opacity:0;} 62%{opacity:1;} 78%{opacity:0.5;} 100%{opacity:0;} }
.outcome-goal .sc-result { font-size:2.8rem; text-shadow:0 0 20px rgba(74,222,128,0.75), 0 2px 8px #000; }
.tactic-matchup { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:0.75rem; font-weight:600; }
.matchup-good { color:#4ade80; }
.matchup-bad { color:#f0a04b; }
/* ===== TACTIC INFO PANEL (squad fit + matchups) ===== */
/* Lifted out of the cramped controls row onto its own full-width line (renderTactics) so the
   squad-fit + counter-matchup readout — the strategic heart of the screen — gets real prominence. */
.tactic-info { background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:8px 10px; display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.squad-fit { display:flex; flex-direction:column; gap:4px; }
.fit-label { font-size:0.78rem; font-weight:700; }
.fit-excellent .fit-label { color:#4ade80; } .fit-good .fit-label { color:#86d96b; }
.fit-balanced .fit-label { color:var(--text2); } .fit-poor .fit-label { color:#f0a04b; }
.fit-bar { height:7px; border-radius:4px; background:var(--bg); overflow:hidden; }
.fit-bar-fill { height:100%; border-radius:4px; transition:width .2s; }
.fit-excellent .fit-bar-fill { background:#4ade80; } .fit-good .fit-bar-fill { background:#86d96b; }
.fit-balanced .fit-bar-fill { background:#8b949e; } .fit-poor .fit-bar-fill { background:#f0a04b; }
.fit-detail { font-size:0.72rem; color:var(--text2); }
.fit-detail b { color:var(--text); }
/* per-player fit rings on the style chip */
.style-chip.chip-thrive { box-shadow:0 0 0 2px #4ade80; }
.style-chip.chip-clash { box-shadow:0 0 0 2px #f0a04b; }
/* Icon+letter style badge — an OUTLINE chip (transparent fill, coloured border/icon/letter via inline
   color) so each tactical style reads by shape AND colour. Overrides the filled .style-chip base. */
.style-badge { display:inline-flex; align-items:center; gap:3px; background:transparent; border:1px solid currentColor;
  padding:1px 6px 1px 4px; line-height:1; vertical-align:middle; }
.style-badge .sc-letter { font-weight:800; font-size:0.72rem; }
.style-badge svg { flex:0 0 auto; }

/* ===== SHOT-CAM ===== */
.shot-cam { position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(rgba(5,12,8,0.5), rgba(5,12,8,0.78)), url('assets/bg-shotcam.png') center/cover no-repeat,
            radial-gradient(ellipse at 50% 38%, rgba(10,30,15,0.55), rgba(5,12,8,0.92)); }
/* Real goal proportions are ~3:1 wide-to-tall — keep the mouth wide and shallow. */
.sc-goal { position:absolute; top:15%; left:50%; transform:translateX(-50%); width:78%; height:23%;
  border:3px solid rgba(255,255,255,0.85); border-bottom:none; border-radius:2px 2px 0 0; }
.sc-net { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.085) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.085) 1px,transparent 1px); background-size:7px 7px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent); mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent); }
.sc-bar { position:absolute; top:-3px; left:-3px; right:-3px; height:3px; background:rgba(255,255,255,0.9); }
.sc-post { position:absolute; top:-3px; width:3px; height:calc(100% + 3px); background:rgba(255,255,255,0.9); }
.sc-post-l { left:-3px; } .sc-post-r { right:-3px; }
/* keeper lives in the shot-cam box (not the goal) so it shares the ball's coordinate space.
   Sized realistically: ~75% of the goal height, feet on the goal line (goal y 15%–38%). */
.sc-keeper { position:absolute; left:50%; top:21%; width:13%; height:17%; transform:translateX(-50%); z-index:2; }
.sc-gk { width:100%; height:100%; overflow:visible; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.55)); }
/* Keeper rendered as a dark silhouette (reads as a real figure, not a cartoon stick man). */
.sc-gk-body { fill:#0c1610; }
.sc-gk-head { fill:#0c1610; }
.sc-gk-arm { stroke:#0c1610; stroke-width:8.5; stroke-linecap:round; }
.sc-gk-leg { stroke:#0c1610; stroke-width:8.5; stroke-linecap:round; }
.sc-gk-glove { fill:#d3dae1; stroke:#9aa3ad; stroke-width:1.2; }
.sc-ball { position:absolute; left:50%; top:82%; width:4.6%; aspect-ratio:1; z-index:3;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #ffffff 0%, #eef1f4 40%, #c2c9d1 73%, #949ca6 100%);
  box-shadow:inset -1.5px -2px 3px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.55); }
.sc-team { position:absolute; top:4%; left:0; right:0; text-align:center; z-index:3; animation:sc-team-in 260ms ease-out both; }
.sc-team .sc-team-tag { display:inline-block; padding:6px 20px; border-radius:999px; font-weight:800; font-size:1.15rem;
  letter-spacing:0.06em; text-transform:uppercase; color:#fff;
  border:2px solid rgba(255,255,255,0.65); box-shadow:0 2px 12px rgba(0,0,0,0.6); text-shadow:0 1px 3px rgba(0,0,0,0.8); }
.sc-team.you .sc-team-tag { background:#16a34a; border-color:#bbf7d0; box-shadow:0 0 0 3px rgba(34,197,94,0.3), 0 2px 14px rgba(0,0,0,0.6); }
.sc-team.them .sc-team-tag { background:#dc2626; border-color:#fecaca; box-shadow:0 0 0 3px rgba(220,38,38,0.3), 0 2px 14px rgba(0,0,0,0.6); }
.shot-cam.chance-you { box-shadow:inset 0 0 0 4px rgba(34,197,94,0.55), inset 0 0 36px rgba(34,197,94,0.22); }
.shot-cam.chance-them { box-shadow:inset 0 0 0 4px rgba(220,38,38,0.5), inset 0 0 36px rgba(220,38,38,0.2); }
@keyframes sc-team-in { 0%{opacity:0; transform:translateY(-8px) scale(0.92);} 100%{opacity:1; transform:translateY(0) scale(1);} }
.sc-label { position:absolute; bottom:6%; left:0; right:0; text-align:center; color:#fff; font-weight:700; font-size:0.95rem; text-shadow:0 1px 4px #000; }
.sc-result { position:absolute; top:46%; left:0; right:0; text-align:center; font-size:2.2rem; font-weight:800; letter-spacing:0.04em;
  opacity:0; transform:scale(0.6); text-shadow:0 2px 8px #000; animation:sc-result-pop var(--cam-ms) ease-out forwards; }
.sc-result-goal { color:#4ade80; } .sc-result-save { color:#60a5fa; } .sc-result-post { color:#f0b429; } .sc-result-wide { color:#f87171; }
/* ball + keeper motion are driven per-shot by the Web Animations API (see animateShot) */
@keyframes sc-result-pop { 0%,55%{opacity:0;transform:scale(0.6);} 70%{opacity:1;transform:scale(1.1);} 100%{opacity:1;transform:scale(1);} }

/* ===== SHOT-CAM v2: comet, set-piece framing, build-up tension, punchier payoff ===== */
/* Motion-blur comet: faint blurred ghost balls chasing the ball along its path. */
.sc-ghost { position:absolute; left:50%; top:82%; width:4.6%; aspect-ratio:1; z-index:2; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle at 36% 30%, #ffffff, #c2c9d1); filter:blur(2px); pointer-events:none; }

/* Defensive wall for free kicks — a row of stylised figures between ball and goal that jumps. */
.sc-wall { position:absolute; left:50%; top:45%; transform:translateX(-50%); display:flex; gap:5px; z-index:1; }
.sc-wall span { width:13px; height:40px; border-radius:7px 7px 3px 3px; background:linear-gradient(#3b4654,#1d242c);
  box-shadow:0 3px 7px rgba(0,0,0,0.55); opacity:0.94; }
.setpiece-freekick .sc-wall { animation:sc-wall-jump var(--cam-ms) ease-out both; }
@keyframes sc-wall-jump { 0%,50%{transform:translateX(-50%) translateY(0);} 60%{transform:translateX(-50%) translateY(-11px);} 82%,100%{transform:translateX(-50%) translateY(0);} }

/* Penalty spot. */
.sc-penspot { position:absolute; left:50%; top:62%; width:7px; height:7px; border-radius:50%; transform:translate(-50%,-50%);
  background:rgba(255,255,255,0.92); box-shadow:0 0 7px rgba(255,255,255,0.55); z-index:1; }

/* Build-up tension bar — fills through the suspense, then releases at the reveal. */
.sc-buildup { position:absolute; bottom:13%; left:19%; right:19%; height:5px; border-radius:3px; z-index:3; overflow:hidden;
  background:rgba(255,255,255,0.13); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12); }
.sc-buildup-fill { height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,#f0b429,#f87171);
  animation:sc-buildup-grow var(--cam-ms) cubic-bezier(.4,0,.9,.6) forwards; }
.chance-you .sc-buildup-fill { background:linear-gradient(90deg,#4ade80,#16a34a); }
@keyframes sc-buildup-grow { 0%{width:0;opacity:0.85;} 56%{width:100%;opacity:1;} 66%{opacity:0;} 100%{width:100%;opacity:0;} }

/* PUNCHIER PAYOFF — on a goal the whole cam jolts (zoom-punch) and a shock ring bursts out. */
.shot-cam.outcome-goal { animation:sc-punch var(--cam-ms) ease-out both; }
@keyframes sc-punch { 0%,58%{transform:scale(1);} 62%{transform:scale(1.055);} 66%{transform:scale(0.985) translate(4px,-2px);}
  70%{transform:scale(1.02) translate(-4px,2px);} 74%{transform:scale(1) translate(2px,0);} 100%{transform:scale(1);} }
.sc-shock { position:absolute; left:50%; top:30%; width:10px; height:10px; border-radius:50%; z-index:6; pointer-events:none;
  border:3px solid rgba(255,255,255,0.85); transform:translate(-50%,-50%) scale(0); opacity:0;
  animation:sc-shock-ring var(--cam-ms) ease-out forwards; }
@keyframes sc-shock-ring { 0%,58%{transform:translate(-50%,-50%) scale(0);opacity:0;} 63%{opacity:0.9;} 100%{transform:translate(-50%,-50%) scale(36);opacity:0;} }
/* Bigger flash + a slammed-in GOAL!. */
.outcome-goal .sc-flash { background:radial-gradient(circle at 50% 32%, rgba(74,222,128,0.72), transparent 66%); }
.outcome-goal .sc-result { animation:sc-goal-slam var(--cam-ms) cubic-bezier(.2,1.4,.3,1) forwards; }
@keyframes sc-goal-slam { 0%,55%{opacity:0;transform:scale(2.7);} 62%{opacity:1;transform:scale(0.9);} 70%{transform:scale(1.14);} 100%{opacity:1;transform:scale(1);} }
/* Slow-mo late goals: deeper vignette for gravitas (the longer cam time is set in JS). */
.sc-slowmo { box-shadow:inset 0 0 90px rgba(0,0,0,0.6); }

/* ============================================================
   AFM DESIGN SYSTEM v1 — component layer
   (appended last so equal-specificity rules win by source order)
   ============================================================ */

/* --- icon helper: <svg class="afm-icon"><use href="#icon-hub"/></svg> --- */
.afm-icon { width:1.15em; height:1.15em; display:inline-block; vertical-align:-0.18em; fill:none;
  stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.afm-icon-lg { width:1.5em; height:1.5em; }

/* --- typography polish (Inter) --- */
body { letter-spacing:-0.004em; }
.section-title { color:var(--afm-text-muted); letter-spacing:0.09em; font-weight:600; }

/* --- buttons --- */
.btn { border-radius:8px; font-weight:700; letter-spacing:.01em; transition:all .15s ease; }
.btn-primary { background:var(--afm-green); color:#fff; }
.btn-primary:hover { background:var(--afm-green-bright); box-shadow:var(--glow-green); }
.btn-primary:active { background:var(--afm-green-deep); }
.btn-secondary { background:rgba(255,255,255,.02); border:1px solid var(--afm-border-strong); color:var(--afm-text-primary); }
.btn-secondary:hover { border-color:var(--afm-green); background:rgba(46,160,67,.08); }
.btn-danger { background:transparent; border:1px solid var(--afm-red); color:var(--afm-red); }
.btn-danger:hover { background:rgba(248,113,113,.12); }
.btn:focus-visible { outline:2px solid var(--afm-green-bright); outline-offset:2px; }

/* --- cards --- */
.card { background:var(--afm-surface); border:1px solid var(--afm-border-subtle); border-radius:12px; box-shadow:var(--shadow-card); }
.card-elevated { background:var(--afm-surface-elevated); box-shadow:var(--shadow-elevated); }
.card-highlight { background:var(--afm-surface-elevated); border-color:rgba(240,180,41,.4); box-shadow:var(--glow-gold); }

/* --- badges --- */
.badge { border-radius:999px; font-weight:600; padding:2px 9px; }
.badge-green { background:rgba(46,160,67,.16); color:var(--afm-green-bright); }
.badge-red { background:rgba(248,113,113,.15); color:var(--afm-red); }
.badge-yellow { background:rgba(240,180,41,.16); color:var(--afm-gold); }
.badge-blue { background:rgba(77,163,255,.16); color:var(--afm-blue); }
.badge-gray { background:rgba(127,139,134,.16); color:var(--afm-text-secondary); }

/* --- scrollbar --- */
.scroll-y::-webkit-scrollbar-thumb { background:var(--afm-border-strong); }

/* --- rating badge (by threshold: elite/strong/solid/dev/weak) --- */
.rating-badge { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:24px; padding:0 7px;
  border-radius:6px; font-weight:800; font-size:.8rem; font-variant-numeric:tabular-nums; line-height:1; }
.rating-elite  { background:rgba(240,180,41,.16); color:var(--afm-gold);        box-shadow:inset 0 0 0 1px rgba(240,180,41,.45); }
.rating-strong { background:rgba(46,160,67,.16);  color:var(--afm-green-bright); box-shadow:inset 0 0 0 1px rgba(46,160,67,.45); }
.rating-solid  { background:rgba(77,163,255,.16); color:var(--afm-blue);        box-shadow:inset 0 0 0 1px rgba(77,163,255,.35); }
.rating-dev    { background:rgba(127,139,134,.16);color:var(--afm-text-secondary);box-shadow:inset 0 0 0 1px rgba(127,139,134,.3); }
.rating-weak   { background:rgba(248,113,113,.14);color:var(--afm-red);         box-shadow:inset 0 0 0 1px rgba(248,113,113,.3); }

/* --- position badge --- */
.pos-badge { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:20px; padding:0 6px;
  border-radius:5px; font-weight:700; font-size:.68rem; letter-spacing:.03em; line-height:1; }
.pos-GK{ background:rgba(46,160,67,.18); color:var(--afm-green-bright); }
.pos-DF{ background:rgba(77,163,255,.18);color:var(--afm-blue); }
.pos-DM{ background:rgba(45,212,191,.18);color:var(--afm-teal); }
.pos-MF{ background:rgba(54,210,125,.18);color:var(--afm-green-bright); }
.pos-AM{ background:rgba(240,180,41,.18);color:var(--afm-gold); }
.pos-FW{ background:rgba(248,113,113,.18);color:var(--afm-red); }

/* --- trait chips (dot signals meaning) --- */
.trait-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:.72rem;
  background:var(--afm-surface-highlight); border:1px solid var(--afm-border-subtle); color:var(--afm-text-secondary); }
.trait-chip::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--afm-text-muted); flex-shrink:0; }
.trait-strength::before    { background:var(--afm-green-bright); }
.trait-tactical::before    { background:var(--afm-gold); }
.trait-personality::before { background:var(--afm-purple); }
.trait-info::before        { background:var(--afm-blue); }
.trait-flaw::before        { background:var(--afm-red); }

/* --- form pills (W/D/L; letter always present) --- */
.form-pill { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:5px;
  font-size:.66rem; font-weight:800; color:#0b0f13; }
.form-pill.W{ background:var(--afm-green); }
.form-pill.D{ background:var(--afm-gold); }
.form-pill.L{ background:var(--afm-red); }

/* --- money tile --- */
.money-tile { background:var(--afm-surface-elevated); border:1px solid var(--afm-border-subtle); border-radius:10px; padding:10px 12px; }
.money-tile .mt-label { font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--afm-text-muted); }
.money-tile .mt-value { font-size:1.1rem; font-weight:800; font-variant-numeric:tabular-nums; margin-top:2px; }
.mt-pos{ color:var(--afm-green-bright); } .mt-neg{ color:var(--afm-red); } .mt-neutral{ color:var(--afm-text-secondary); }
.money-tile.mt-net-pos{ box-shadow:var(--glow-green); border-color:rgba(46,160,67,.4); }
.money-tile.mt-net-neg{ border-color:rgba(248,113,113,.4); }

/* --- crest --- */
.afm-crest { display:inline-block; vertical-align:middle; line-height:0; }

/* --- topbar / nav refinement --- */
.topbar { background:var(--afm-surface); border-bottom:1px solid var(--afm-border-subtle); }
.hub-topbar { gap:10px; padding:8px 16px; }
.hub-topbar .afm-badge { height:34px; width:auto; flex-shrink:0; }
.hub-topbar h2 { font-size:1.05rem; font-weight:700; letter-spacing:-0.01em; }
.topbar-nav { display:flex; gap:4px; margin-left:auto; }
.topnav-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:8px; background:transparent;
  color:var(--afm-text-muted); font-size:.82rem; font-weight:600; transition:all .14s ease; }
.topnav-btn:hover { color:var(--afm-text-primary); background:var(--afm-surface-highlight); }
.topnav-btn .afm-icon { width:1.05em; height:1.05em; }

/* --- hub scroll wrapper + club-header banner --- */
.hub-scroll { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:16px; }
.hub-scroll .hub-body { padding:0; overflow:visible; flex:none; }   /* scoped to the hub — must NOT disable scroll on other screens reusing .hub-body */
.hub-header { display:flex; align-items:center; justify-content:space-between; gap:24px 32px; flex-wrap:wrap; flex-shrink:0;
  background:linear-gradient(135deg, var(--afm-surface-elevated), var(--afm-surface)); padding:18px 22px; position:relative; overflow:hidden; }
.hub-header::after { content:''; position:absolute; right:-40px; top:-60px; width:240px; height:240px;
  background:radial-gradient(circle, rgba(46,160,67,.10), transparent 70%); pointer-events:none; }
.hub-header-id { display:flex; align-items:center; gap:16px; }
.hub-header-name { font-size:1.6rem; font-weight:800; letter-spacing:-0.02em; line-height:1.1; }
.hub-header-sub { color:var(--afm-text-muted); font-size:.82rem; margin-top:3px; }
.hub-header-stats { display:flex; gap:26px; align-items:center; }
.hstat { text-align:center; }
.hstat-label { font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:var(--afm-text-muted); }
.hstat-val { font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.2; margin-top:2px; }
.hstat-form { display:flex; gap:4px; margin-top:6px; }

/* --- hub nav icon sizing + accent cards --- */
.hub-nav-icon { display:inline-flex; align-items:center; justify-content:center; color:var(--afm-text-secondary); }
.hub-nav-icon .afm-icon { width:1.45em; height:1.45em; }
.hub-nav-btn:hover .hub-nav-icon { color:var(--afm-green-bright); }
.hub-nav-accent-green { background:linear-gradient(135deg, var(--afm-surface), rgba(46,160,67,.10)) !important; border-color:rgba(46,160,67,.3) !important; }
.hub-nav-accent-green:hover { border-color:var(--afm-green) !important; }
.hub-nav-accent-gold { background:linear-gradient(135deg, var(--afm-surface), rgba(240,180,41,.10)) !important; border-color:rgba(240,180,41,.3) !important; }
.hub-nav-accent-gold:hover { border-color:var(--afm-gold) !important; }

/* --- hub finances grid of money tiles --- */
.hub-finances { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hub-finances .mt-value { display:flex; align-items:center; gap:5px; }
.hub-finances .mt-value .afm-icon { width:.9em; height:.9em; }

/* --- league table: zone accents + compact form pills --- */
.league-table tr.zone-cl  td:first-child { box-shadow:inset 3px 0 0 var(--afm-green); }
.league-table tr.zone-el  td:first-child { box-shadow:inset 3px 0 0 var(--afm-blue); }
.league-table tr.zone-rel td:first-child { box-shadow:inset 3px 0 0 var(--afm-red); }
.form-mini .form-pill { width:17px; height:17px; font-size:.6rem; border-radius:4px; }

/* --- transfer market: rating badge stack + potential chip --- */
.transfer-rating { display:flex; flex-direction:column; align-items:center; gap:3px; }
.pot-chip { font-size:.55rem; font-weight:800; color:var(--afm-gold); background:rgba(240,180,41,.14); border-radius:4px; padding:1px 5px; line-height:1.3; }

/* --- finances: hero money-tile summary row --- */
.fin-tiles { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.fin-tiles .mt-value { display:flex; align-items:center; gap:5px; font-size:1.25rem; }
.fin-tiles .mt-value .afm-icon { width:.85em; height:.85em; }
@media (max-width:640px){ .fin-tiles { grid-template-columns:1fr 1fr; } }
/* finance breakdown rows — higher contrast + clearer separation than before */
.fin-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 2px; border-bottom:1px solid var(--afm-border-subtle); font-size:.92rem; }
.fin-row:last-child { border-bottom:none; }
.fin-row-label { color:var(--afm-text-secondary); }
.fin-row-amt { font-weight:700; font-variant-numeric:tabular-nums; color:var(--afm-text-primary); }
.fin-row-total { margin-top:4px; border-top:1px solid var(--afm-border-strong); border-bottom:none; font-weight:800; font-size:1rem; padding-top:10px; }
.fin-row-total span:last-child { font-weight:800; }
/* season/career toggle */
.fin-toggle { display:inline-flex; gap:2px; background:var(--afm-surface); border:1px solid var(--afm-border-subtle); border-radius:10px; padding:3px; align-self:flex-start; }
.fin-toggle button { padding:7px 16px; border-radius:7px; background:none; color:var(--afm-text-muted); font-weight:700; font-size:.84rem; }
.fin-toggle button.active { background:var(--afm-green); color:#fff; }
/* season-by-season table */
.fin-table { width:100%; border-collapse:collapse; font-size:.86rem; }
.fin-table th { text-align:right; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--afm-text-muted); font-weight:600; padding:4px 8px; border-bottom:1px solid var(--afm-border-strong); }
.fin-table th:first-child { text-align:left; }
.fin-table td { text-align:right; padding:7px 8px; border-bottom:1px solid var(--afm-border-subtle); font-variant-numeric:tabular-nums; }
.fin-table td:first-child { text-align:left; font-weight:700; }
.fin-table tbody tr:hover { background:var(--afm-surface-highlight); }

/* fixtures: fixed action bar (Play / Simulate) that doesn't move as weeks reflow */
.fixtures-action { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px;
  background:var(--afm-surface); border-bottom:1px solid var(--afm-border-subtle); flex-shrink:0; }
.fixtures-action-wk { font-weight:700; font-size:.95rem; }
.fixtures-action-btns { display:flex; gap:8px; }
.week-header.week-current { color:var(--afm-green-bright); }

/* --- match: broadcast scoreboard crests --- */
.match-crest { line-height:0; flex-shrink:0; display:inline-flex; }
.match-score { font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.postmatch-teams { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.postmatch-team { font-weight:700; font-size:1rem; }

/* ============================================================
   AFM — MOBILE (bottom tab bar + responsive layouts, <=640px)
   ============================================================ */
.mobile-tabbar { display:none; }   /* desktop: hidden; shown inside the media query below */
.mobile-tabbar.tb-hidden { display:none !important; }
.mobile-tabbar button { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:none; color:var(--afm-text-muted); font-size:.62rem; font-weight:600; padding:0; min-height:44px; }
.mobile-tabbar button .afm-icon { width:1.4em; height:1.4em; }
.mobile-tabbar button.active { color:var(--afm-green-bright); }
.mobile-tabbar button.active .afm-icon { filter:drop-shadow(0 0 6px rgba(54,210,125,.4)); }

/* Tablet / small-laptop: stack the fixed-sidebar layouts (Tactics, Pre-Match) so the 260–270px side
   panels don't cramp mid-size screens before the phone breakpoint kicks in. */
@media (max-width:820px) {
  .tactics-body, .prematch-body { grid-template-columns:1fr; height:auto; }
  .tactics-panel { border-left:none; border-top:1px solid var(--border); }
  .prematch-sidebar { border-right:none; border-bottom:1px solid var(--border); }
}

@media (max-width:640px) {
  /* bottom tab bar */
  .mobile-tabbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:200; height:58px;
    justify-content:space-around; align-items:stretch;
    background:var(--afm-surface); border-top:1px solid var(--afm-border-subtle);
    box-shadow:0 -8px 24px rgba(0,0,0,.3); padding-bottom:env(safe-area-inset-bottom,0); }
  /* Use the dynamic viewport height so a mobile browser's collapsing toolbar never clips the app. */
  #app { height:100dvh; }
  /* When the tab bar is showing, shrink the whole app to sit ABOVE it: the content area ends at the
     top of the bar and the bar occupies its own 58px below — instead of the bar overlaying/masking
     the bottom of the screen. Screen-agnostic, so it can't miss a scroll container like the old
     per-class padding hack did. */
  body.tabbar-on #app { height: calc(100dvh - 58px - env(safe-area-inset-bottom,0)); }
  /* small breathing room so the last row isn't flush against the bar's top edge */
  .hub-scroll, .scroll-y, .squad-body, .table-body, .fixtures-body, .postmatch-body, .events-scroll { padding-bottom:10px; }

  /* hub: single column, hide the desktop top-nav, compact header */
  .hub-body { grid-template-columns:1fr; }
  .hub-topbar .topbar-nav, .topbar-nav { display:none; }
  .hub-topbar h2, .topbar h2 { font-size:.95rem; }
  .hub-header { gap:14px 18px; padding:14px 16px; }
  .hub-header-name { font-size:1.3rem; }
  .hub-header-stats { gap:0; width:100%; justify-content:space-between; }
  .hstat { min-width:0; flex:1; }
  .hstat-val { font-size:1.15rem; }
  .hub-nav { grid-template-columns:1fr 1fr; }

  /* finances + facilities: two-up tiles, single-column cards */
  .fin-tiles { grid-template-columns:1fr 1fr; }
  .fac-grid { grid-template-columns:1fr; }

  /* CARD-ROW TABLES (.mtable): on phones each row becomes a stacked mini-card and every cell a
     label:value row (label from data-label). Shows all the data without sideways scrolling.
     Tables not yet converted keep the small-font + horizontal-scroll fallback below. */
  .mtable thead { display:none; }
  .mtable, .mtable tbody, .mtable td { display:block; width:auto; }
  .mtable tr { display:flex; flex-direction:column; background:var(--bg2); border:1px solid var(--border); border-radius:10px; margin-bottom:8px; padding:6px 12px 8px; }
  .mtable td { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:4px 0; border:none !important; text-align:right; font-size:.86rem; }
  .mtable td::before { content:attr(data-label); color:var(--text2); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.02em; text-align:left; white-space:nowrap; }
  /* the header cell (player-name-cell) is floated to the top of the card and shown full-width, bold, label-less — regardless of its column position in the source table */
  .mtable td.player-name-cell { order:-1; justify-content:flex-start; font-size:1.02rem; font-weight:700; padding:0 0 6px; margin-bottom:4px; border-bottom:1px solid var(--border) !important; }
  .mtable td.player-name-cell::before { content:none; }

  /* LEAGUE TABLE on phones: a COMPACT real table (not card-rows) — like the season-complete table,
     which fits all 20 clubs cleanly. Drop the Form column (pills don't fit) and tighten everything. */
  .league-table.compact-table { font-size:.76rem; }
  .league-table.compact-table th, .league-table.compact-table td { padding:5px 4px; }
  .league-table.compact-table th:first-child, .league-table.compact-table td:first-child { padding-left:8px; }
  .league-table.compact-table .col-form { display:none; }   /* recent-form pills are too wide for a phone column */
  .table-body { overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* SQUAD on phones: hide the dense 15-column table, show a compact one-row-per-player tap list that
     opens the full player profile — instead of a full-screen card per player. */
  .squad-desktop { display:none; }
  .squad-mlist { display:flex; flex-direction:column; gap:7px; }
  .mlist-row { display:flex; align-items:center; gap:11px; width:100%; text-align:left;
    background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:9px 12px; color:var(--text); cursor:pointer; }
  .mlist-row:active { background:var(--bg3); }
  .mlist-main { flex:1; display:flex; flex-direction:column; min-width:0; }
  .mlist-name { font-weight:600; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mlist-meta { color:var(--text2); font-size:.72rem; margin-top:1px; }
  .mlist-right { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; }

  /* transfer rows: let the name+meta take a full line and the rating/price/Buy wrap below,
     so nothing gets truncated on a narrow screen */
  .transfer-row { flex-wrap:wrap; row-gap:6px; }
  .transfer-info { flex:1 1 100%; min-width:0; }
  .transfer-name { white-space:normal; }

  /* live match: stack the pitch and the commentary feed (it's a GRID, so stack via columns/rows —
     the old flex-direction:column was a no-op on a grid and never actually stacked it on phones). */
  .match-body { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }
  .match-events-side { max-height:42vh; border-left:none; border-top:1px solid var(--border); }
  .match-team-name { max-width:90px; font-size:.8rem; }
  .match-score { font-size:1.5rem; }

  /* misc: let crowded flex headers wrap rather than clip */
  .topbar { flex-wrap:wrap; row-gap:6px; }

  /* ── phone polish: tap targets, no iOS zoom-on-focus, legibility floor ── */
  .btn, .btn-sm, .filter-btn, .topnav-btn, .speed-btn, .btn-icon { min-height:40px; }
  .hub-nav-btn { min-height:54px; }
  button { touch-action:manipulation; }
  /* 16px on form controls stops iOS Safari auto-zooming the whole page when you tap a field */
  select, input { font-size:16px; min-height:42px; }
  /* lift the very smallest helper text so it's readable held at arm's length */
  .fs-sm { font-size:0.82rem; }
}

/* ============================================================
   AFM — CHANCE STYLES B & C (switchable via the in-match selector)
   'cm'   = Championship-Manager text-tension (no goalmouth)
   'card' = "Big chance" moment card over a blurred pitch
   ============================================================ */
.chance-overlay { position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; }

/* ---- B: CM text-tension ---- */
.style-cm .cm-dim { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 44%, rgba(5,12,8,0.84), rgba(3,6,4,0.96)); animation:cm-dim-in 220ms ease-out both; }
/* Whose chance — make it unmistakable: green wash + frame for YOU, red for THEM. */
.style-cm.chance-you  .cm-dim { background:radial-gradient(ellipse at 50% 44%, rgba(10,46,23,0.84), rgba(3,9,5,0.96)); }
.style-cm.chance-them .cm-dim { background:radial-gradient(ellipse at 50% 44%, rgba(50,12,12,0.84), rgba(9,3,3,0.96)); }
.style-cm.chance-you  { box-shadow:inset 0 0 0 4px rgba(46,160,67,0.5),  inset 0 0 80px rgba(46,160,67,0.18); }
.style-cm.chance-them { box-shadow:inset 0 0 0 4px rgba(248,113,113,0.46), inset 0 0 80px rgba(248,113,113,0.16); }
.style-cm .cm-stack { position:relative; z-index:2; text-align:center; max-width:84%; padding:0 16px;
  animation:cm-pulse calc(var(--cam-ms) * 0.7) ease-in-out; }
.cm-tag { display:inline-block; padding:6px 20px; border-radius:999px; font-weight:800; font-size:1rem; letter-spacing:0.06em; margin-bottom:16px; text-transform:uppercase; }
.cm-tag.you  { background:rgba(46,160,67,0.30);  color:#bbf7d0; box-shadow:0 0 0 1.5px rgba(46,160,67,0.7),  0 4px 16px rgba(0,0,0,0.5); }
.cm-tag.them { background:rgba(248,113,113,0.26); color:#fecaca; box-shadow:0 0 0 1.5px rgba(248,113,113,0.7), 0 4px 16px rgba(0,0,0,0.5); }
.cm-shooter { font-size:2rem; font-weight:800; color:#fff; text-shadow:0 2px 12px #000; letter-spacing:-0.01em; line-height:1.15; }
.style-cm.chance-you  .cm-shooter { text-shadow:0 0 18px rgba(46,160,67,0.45), 0 2px 12px #000; }
.style-cm.chance-them .cm-shooter { text-shadow:0 0 18px rgba(248,113,113,0.4), 0 2px 12px #000; }
.cm-tension { width:240px; max-width:70vw; height:6px; border-radius:3px; margin:18px auto 0; background:rgba(255,255,255,0.12); overflow:hidden; }
.cm-tension span { display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,#f0b429,#f87171);
  animation:cm-fill calc(var(--cam-ms) * 0.56) linear forwards; }
.chance-you.style-cm .cm-tension span { background:linear-gradient(90deg,#4ade80,#16a34a); }
.cm-result { margin-top:18px; font-size:2.6rem; font-weight:900; letter-spacing:0.03em; opacity:0; transform:scale(0.6);
  text-shadow:0 2px 14px #000; animation:sc-result-pop var(--cam-ms) ease-out forwards; }
.cm-result-goal { color:#4ade80; } .cm-result-save { color:#60a5fa; } .cm-result-post { color:#f0b429; } .cm-result-wide { color:#f87171; }
@keyframes cm-dim-in { from { opacity:0; } to { opacity:1; } }
@keyframes cm-pulse { 0%,40%{ transform:scale(1); } 50%{ transform:scale(1.035); } 62%{ transform:scale(1); } 100%{ transform:scale(1); } }
@keyframes cm-fill { from { width:0; } to { width:100%; } }

/* ---- C: moment card ---- */
.style-card .cc-backdrop { position:absolute; inset:0; background:rgba(3,8,5,0.80); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:cm-dim-in 200ms ease-out both; }
.chance-card { position:relative; z-index:2; min-width:260px; max-width:80%; padding:22px 26px; border-radius:16px; text-align:center;
  background:linear-gradient(160deg, rgba(22,27,34,0.97), rgba(13,17,23,0.97)); border:1px solid var(--afm-border-strong);
  box-shadow:0 24px 60px rgba(0,0,0,0.6); animation:cc-in 320ms cubic-bezier(.2,1.3,.3,1) both; }
.chance-card.you  { box-shadow:0 0 0 1px rgba(46,160,67,0.5),  0 24px 60px rgba(0,0,0,0.6); }
.chance-card.them { box-shadow:0 0 0 1px rgba(248,113,113,0.45), 0 24px 60px rgba(0,0,0,0.6); }
.cc-head { font-size:0.8rem; font-weight:800; letter-spacing:0.12em; color:var(--afm-gold); }
.chance-card.you .cc-head { color:#86efac; }
.cc-shooter { font-size:1.8rem; font-weight:800; color:#fff; margin:6px 0 14px; line-height:1.1; }
.cc-meter { height:8px; border-radius:4px; background:rgba(255,255,255,0.1); overflow:hidden; }
.cc-meter span { display:block; height:100%; width:0; border-radius:4px; background:linear-gradient(90deg,#f0b429,#f87171);
  animation:cm-fill calc(var(--cam-ms) * 0.56) linear forwards; }
.chance-card.you .cc-meter span { background:linear-gradient(90deg,#4ade80,#16a34a); }
.cc-result { margin-top:14px; font-size:2.2rem; font-weight:900; opacity:0; transform:scale(0.6); animation:sc-result-pop var(--cam-ms) ease-out forwards; }
.cc-result-goal { color:#4ade80; } .cc-result-save { color:#60a5fa; } .cc-result-post { color:#f0b429; } .cc-result-wide { color:#f87171; }
@keyframes cc-in { from { opacity:0; transform:translateY(20px) scale(0.94); } to { opacity:1; transform:translateY(0) scale(1); } }

/* ===== LIVE IN-MATCH STATS PANEL (home vs away, updates each event) ===== */
.live-stats { background:var(--afm-surface); border:1px solid var(--afm-border-subtle); border-radius:10px;
  padding:9px 14px; margin-top:8px; display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
.ls-poss-row { display:flex; align-items:center; gap:10px; }
.ls-poss-val { font-weight:800; font-size:.85rem; min-width:40px; font-variant-numeric:tabular-nums; }
#ls-poss-h { text-align:right; color:var(--home); }
#ls-poss-a { color:var(--away); }
.ls-poss-bar { flex:1; height:8px; border-radius:4px; background:var(--away); overflow:hidden; }
.ls-poss-fill { height:100%; background:var(--home); border-radius:4px 0 0 4px; transition:width .45s ease; }
.ls-poss-label { text-align:center; font-size:.58rem; letter-spacing:.1em; color:var(--afm-text-muted); margin:1px 0 4px; }
.ls-row { display:flex; align-items:center; gap:8px; font-size:.82rem; }
.ls-num { font-weight:700; font-variant-numeric:tabular-nums; min-width:28px; color:var(--afm-text-primary); }
#ls-shots-h, #ls-sot-h, #ls-corners-h, #ls-fouls-h, #ls-yel-h { text-align:right; }
.ls-stat-label { flex:1; text-align:center; color:var(--afm-text-muted); font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; }

/* ===== Wave 2: the result-reveal moment (the one juice pass, Nijman) ===== */
@keyframes olFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes olScorePop {
  0%   { opacity: 0; transform: scale(.3); }
  55%  { opacity: 1; transform: scale(1.18); }
  75%  { transform: scale(.96); }
  100% { transform: scale(1); }
}
.ol-reveal-line  { animation: olFadeUp .5s ease both; }
.ol-reveal-score { animation: olScorePop .9s cubic-bezier(.2,1.4,.4,1) .6s both; }
.ol-reveal-head  { animation: olFadeUp .5s ease 1.35s both; }
.ol-reveal-sub   { animation: olFadeUp .5s ease 1.6s both; }
.ol-reveal-btn   { animation: olFadeUp .45s ease 1.9s both; }
@media (prefers-reduced-motion: reduce) {
  .ol-reveal-line, .ol-reveal-score, .ol-reveal-head, .ol-reveal-sub, .ol-reveal-btn { animation: none; }
}

/* =============================================================================
   FLOODLIT v2 — visual overhaul (Stage 1: foundation + primitive reskin)
   Appended last so it wins the cascade over earlier flat definitions. Token-level
   + primitive-level, so every screen lifts at once. — design pass, 4 Jul
   ============================================================================= */

/* --- Ground: cool near-black with a faint top vignette for stadium depth --- */
body {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(46,160,67,.06), rgba(46,160,67,0) 60%),
    radial-gradient(100% 60% at 50% 0%, #0E141C, #0A0E13 55%, #05070A 100%);
  background-attachment: fixed;
}

/* ---------------------------------------------------------------------------
   DESKTOP WIDTH CAP — the UI is built mobile-first. Without a cap, list rows and
   tables stretch across the whole monitor on a desktop browser: a huge empty gap
   opens in the middle of every row and the text looks tiny and lost (mobile is
   fine because the column is naturally narrow). On wide viewports we centre the
   entire app in a fixed-width column — like an oversized phone — so every screen
   keeps mobile-like density. One rule, all screens. Tune --app-max to taste.
   --------------------------------------------------------------------------- */
:root { --app-max: 960px; }
@media (min-width: 980px) {
  #app {
    max-width: var(--app-max);
    margin-inline: auto;
    /* crisp side edges + depth so the gutters read as an intentional frame,
       not dead space (box-shadow renders outside #app's own overflow:hidden). */
    box-shadow: 0 0 0 1px var(--border), 0 24px 90px rgba(0,0,0,.55);
  }
}

/* --- Type: Archivo for display, Saira Condensed for scoreboard numbers --- */
h1, h2, h3, .section-title, .topbar h2, .ts-card-name, .hub-nav-label {
  font-family: var(--font-display); letter-spacing: -0.01em;
}
.section-title { letter-spacing: 0.10em; }
.num, .ol-reveal-score, .hub-finance-value, .rating-badge, .form-dot,
.hub-match-vs, .stat-block-num { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }
table { font-variant-numeric: tabular-nums; }

/* --- Top bar: floodlit gradient, blurred, sticky, crisp bottom edge --- */
.topbar {
  background: var(--grad-topbar);
  border-bottom: 1px solid var(--afm-border-strong);
  box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 6px 20px rgba(0,0,0,.30);
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20;
  padding: 12px 16px;
}
.topbar h2 { font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em; }

/* --- Cards: top-lit panel, light top edge, real shadow, generous radius --- */
.card {
  background: var(--grad-surface), var(--afm-surface);
  border: 1px solid var(--afm-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.card-elevated { background: var(--grad-surface), var(--afm-surface-elevated); box-shadow: var(--shadow-elevated); }

/* --- Buttons: gradient primary with inset highlight + lift on hover --- */
.btn {
  border-radius: 9px; font-weight: 600; letter-spacing: .01em;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--grad-primary); color: #04140A;
  box-shadow: var(--edge-top-strong), 0 6px 16px rgba(23,105,47,.35);
  text-shadow: 0 1px 0 rgba(255,255,255,.14);
}
.btn-primary:hover { background: var(--grad-primary-hover); box-shadow: var(--edge-top-strong), 0 8px 22px rgba(46,160,67,.42); transform: translateY(-1px); }
.btn-primary:active { background: var(--grad-primary); transform: translateY(0); }
.btn-secondary, .btn:not(.btn-primary):not(.btn-danger):not(.btn-icon):not(.filter-btn) {
  background: rgba(255,255,255,.03); border: 1px solid var(--afm-border-strong); color: var(--afm-text-primary);
  box-shadow: var(--edge-top);
}
.btn-secondary:hover, .btn:not(.btn-primary):not(.btn-danger):not(.btn-icon):not(.filter-btn):hover {
  border-color: var(--afm-green); background: rgba(46,160,67,.10); transform: translateY(-1px);
}

/* --- Filter/segmented pills: quieter idle, glowing active --- */
.filter-btn {
  background: rgba(255,255,255,.03); border: 1px solid var(--afm-border-subtle); color: var(--afm-text-secondary);
  border-radius: var(--radius-pill); font-weight: 600; transition: all .14s ease;
}
.filter-btn:hover { border-color: var(--afm-border-strong); color: var(--afm-text-primary); }
.filter-btn.active {
  background: linear-gradient(180deg, rgba(63,224,125,.20), rgba(46,160,67,.10));
  border-color: var(--afm-green-bright); color: var(--afm-green-bright); box-shadow: var(--glow-green);
}

/* --- Inputs: consistent, focus ring --- */
input[type="text"], input:not([type]), .ts-search input {
  background: rgba(255,255,255,.03); border: 1px solid var(--afm-border-strong);
  border-radius: 9px; color: var(--afm-text-primary); transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:focus, input:not([type]):focus, .ts-search input:focus {
  border-color: var(--afm-green); box-shadow: 0 0 0 3px rgba(46,160,67,.18); outline: none;
}

/* --- Tables: broadcast standings — zebra, hover, condensed numerics --- */
.screen table thead tr, .squad-table th { color: var(--afm-text-muted); }
.screen .card table tbody tr:nth-child(even) { background: rgba(255,255,255,.014); }
.screen .card table tbody tr:hover { background: rgba(77,163,255,.07); }

/* --- Front screen: floodlit hero + premium club cards --- */
.ts-header {
  background: linear-gradient(rgba(8,11,16,0.55), rgba(8,11,16,0.94)), url('assets/bg-titlescreen.png') center/cover no-repeat;
  border-bottom: 1px solid var(--afm-border-strong);
}
.ts-card {
  background: var(--grad-surface), var(--afm-surface);
  border: 1px solid var(--afm-border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ts-card:hover { border-color: var(--afm-green); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.5), var(--glow-green); }
.ts-card-name { font-weight: 700; font-size: 1rem; }

/* --- Scrollbar --- */
.scroll-y::-webkit-scrollbar { width: 8px; }
.scroll-y::-webkit-scrollbar-thumb { background: var(--afm-border-strong); border-radius: 4px; }
.scroll-y::-webkit-scrollbar-thumb:hover { background: var(--afm-text-muted); }

/* =============================================================================
   FLOODLIT v2 — Stage 2: front-screen hero + entry points + club grid
   ============================================================================= */

/* --- Hero: taller, floodlit, with a soft pitch-glow floor and a fade into the grid --- */
.ts-header {
  padding: 40px 24px 30px;
  background:
    radial-gradient(90% 120% at 50% -20%, rgba(46,160,67,.14), rgba(46,160,67,0) 55%),
    linear-gradient(rgba(8,11,16,0.52), rgba(8,11,16,0.90) 78%, var(--afm-bg-base)),
    url('assets/bg-titlescreen.png') center 30%/cover no-repeat;
  border-bottom: none;
  box-shadow: inset 0 -1px 0 var(--afm-border-subtle);
}
.ts-logo { width: min(360px, 74vw); margin-bottom: 10px; filter: drop-shadow(0 6px 22px rgba(0,0,0,0.6)); }
.ts-header p {
  color: var(--afm-text-secondary); font-family: var(--font-display); font-weight: 600;
  letter-spacing: .01em; font-size: 1rem; margin-top: 8px;
}
.ts-header p + p, .ts-header .text-muted { font-family: var(--font-ui); font-weight: 400; }

/* --- Mode entry points: big, inviting, one glowing primary CTA --- */
.ts-modes { gap: 12px; }
.ts-mode-btn {
  padding: 12px 22px; font-size: .95rem; font-weight: 700; border-radius: 12px;
  min-width: 150px; letter-spacing: .005em;
}
.ts-mode-primary {
  min-width: 220px; font-size: 1.02rem;
  box-shadow: var(--edge-top-strong), 0 8px 26px rgba(46,160,67,.45);
}
.ts-mode-primary:hover { box-shadow: var(--edge-top-strong), 0 10px 32px rgba(63,224,125,.55); }

/* --- Club grid: sit rows at the top (fixes stretched empty cards), tighter cards --- */
.ts-grid { align-content: start; gap: 12px; padding: 18px 16px 40px; }
.ts-card { padding: 13px 15px; }
.ts-card-meta { gap: 12px; margin-top: 2px; font-family: var(--font-numeric); font-size: .8rem; letter-spacing: .01em; }
.ts-card-strength { height: 5px; border-radius: var(--radius-pill); background: rgba(255,255,255,.06); margin-top: 10px; }
.ts-card-strength-bar { background: linear-gradient(90deg, var(--afm-green-deep), var(--afm-green-bright)); border-radius: var(--radius-pill); }
.ts-search input { max-width: 640px; margin: 0 auto; display: block; }

/* Gentle entrance so the hero doesn't just pop in */
@keyframes tsHeroIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.ts-header > * { animation: tsHeroIn .5s ease both; }
.ts-header > *:nth-child(2) { animation-delay: .06s; }
.ts-header > *:nth-child(3) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) { .ts-header > * { animation: none; } }

/* =============================================================================
   FLOODLIT v2 — Stage 3: signature online screens (identity, ladder, store)
   Club colour flows in via an inline --club custom property on the container.
   ============================================================================= */

/* --- Manager profile: a club-coloured identity banner --- */
.ol-hero {
  position: relative; text-align: center; padding: 30px 20px 24px;
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--club) 42%, transparent), transparent 66%),
    linear-gradient(180deg, color-mix(in srgb, var(--club) 12%, transparent), transparent 60%),
    var(--afm-surface);
  border-bottom: 1px solid var(--afm-border-subtle);
}
.ol-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--club); box-shadow: 0 0 20px 1px color-mix(in srgb, var(--club) 60%, transparent); }
.ol-hero-crest { transform: scale(1.55); margin: 8px 0 16px; }
.ol-hero-name { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.01em; }
.ol-hero-sub { color: var(--afm-text-secondary); font-size: .92rem; margin-top: 5px; }
.ol-flair { display: inline-block; font-size: .68rem; font-weight: 700; background: rgba(77,163,255,.16); color: var(--afm-blue); padding: 2px 9px; border-radius: var(--radius-pill); vertical-align: middle; }

/* --- Career stat strip --- */
.ol-stat-row { display: flex; justify-content: space-around; padding: 18px 12px; }
.ol-stat { text-align: center; }
.ol-stat-num { font-family: var(--font-numeric); font-size: 1.8rem; font-weight: 700; line-height: 1; }
.ol-stat-lbl { color: var(--afm-text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; margin-top: 5px; }

/* --- Badge case: earned tiles glow gold, locked tiles dim --- */
.ol-badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.ol-badge-tile { text-align: center; padding: 15px 8px; border-radius: 13px; border: 1px solid var(--afm-border-subtle); background: rgba(255,255,255,.02); }
.ol-badge-tile.earned { background: linear-gradient(180deg, rgba(245,192,67,.16), rgba(245,192,67,.02)); border-color: rgba(245,192,67,.42); box-shadow: var(--edge-top), 0 4px 14px rgba(245,192,67,.10); }
.ol-badge-tile.locked { opacity: .38; }
.ol-badge-ico { font-size: 1.95rem; line-height: 1; }
.ol-badge-tile.locked .ol-badge-ico { filter: grayscale(1); }
.ol-badge-name { font-size: .72rem; margin-top: 7px; font-weight: 600; }
.ol-badge-tile.earned .ol-badge-name { color: var(--afm-gold); }

/* --- Leaderboard podium: silver · gold · bronze --- */
.ol-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; align-items: end; margin-top: 16px; }
.ol-pod { text-align: center; padding: 12px 8px; border-radius: 14px 14px 10px 10px; cursor: pointer; background: var(--grad-surface), var(--afm-surface); border: 1px solid var(--afm-border-subtle); box-shadow: var(--shadow-card); transition: transform .15s ease; }
.ol-pod:hover { transform: translateY(-2px); }
.ol-pod.me { outline: 2px solid var(--afm-blue); outline-offset: -1px; }
.ol-pod-gold { border-color: rgba(245,192,67,.5); background: linear-gradient(180deg, rgba(245,192,67,.14), rgba(245,192,67,.02)), var(--afm-surface); padding-top: 18px; }
.ol-pod-silver { border-color: rgba(203,213,225,.4); }
.ol-pod-bronze { border-color: rgba(205,127,50,.42); }
.ol-pod-medal { font-size: 1.7rem; line-height: 1; }
.ol-pod-gold .ol-pod-medal { font-size: 2.1rem; }
.ol-pod-name { font-family: var(--font-display); font-weight: 700; font-size: .9rem; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-pod-club { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-pod-step { margin-top: 8px; }
.ol-pod-titles { font-family: var(--font-numeric); font-weight: 700; font-size: 1.5rem; color: var(--afm-gold); }
.ol-pod-lbl { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--afm-text-muted); }

/* --- Store tiles: tinted icon well, featured sub highlighted --- */
.ol-store-tile { display: flex; gap: 14px; align-items: center; padding: 14px; margin-top: 10px; }
.ol-store-tile.featured { border-color: rgba(77,163,255,.4); box-shadow: var(--edge-top), 0 6px 18px rgba(77,163,255,.10); }
.ol-store-icon { flex-shrink: 0; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--afm-border-subtle); }
.ol-store-price { font-family: var(--font-numeric); font-weight: 700; color: var(--afm-green-bright); font-size: .95rem; }
.ol-owned { flex-shrink: 0; font-size: .78rem; font-weight: 700; color: var(--afm-green-bright); background: rgba(46,160,67,.14); border: 1px solid rgba(46,160,67,.4); padding: 6px 12px; border-radius: var(--radius-pill); }

/* =============================================================================
   FLOODLIT v2 — Stage 4: motion + juice (transitions, reveal, promotion night)
   ============================================================================= */

/* --- Screen transition: online screens fade-slide in on navigation --- */
@keyframes olScreenIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.ol-enter { animation: olScreenIn .22s ease both; }

/* --- Result reveal: full-bleed outcome glow + big scoreboard --- */
.ol-reveal-screen { position: relative; overflow: hidden; }
.ol-reveal-screen::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(78% 54% at 50% 42%, color-mix(in srgb, var(--res) 28%, transparent), transparent 70%);
  animation: olResGlow 2.4s ease-in-out infinite alternate;
}
@keyframes olResGlow { from { opacity: .62; } to { opacity: 1; } }
.ol-reveal-score { font-size: 4.8rem; font-weight: 900; letter-spacing: 2px; margin: 14px 0 4px; line-height: 1; }

/* --- Confetti: win burst (fans out + falls) --- */
.ol-confetti { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.ol-confetti i {
  position: absolute; top: 40%; left: 50%; width: 9px; height: 14px; background: var(--h);
  border-radius: 2px; opacity: 0; animation: olBurst 1.15s ease-out calc(.55s + var(--i) * .022s) forwards;
}
@keyframes olBurst {
  0% { opacity: 1; transform: translate(0,0) rotate(0) scale(.5); }
  100% { opacity: 0; transform: translate(calc((var(--i) - 7) * 27px), calc(50px + (var(--i) * 11px))) rotate(340deg) scale(1); }
}
/* --- Confetti: promotion-night rain (falls full-width, loops) --- */
.ol-confetti-rain i {
  top: -18px; left: calc(var(--i) * 4.5%); width: 8px; height: 13px;
  animation: olRain calc(2.3s + (var(--i) * 90ms)) linear calc(var(--i) * 110ms) infinite;
}
@keyframes olRain {
  0% { opacity: 0; transform: translateY(-12px) rotate(0); }
  8% { opacity: 1; }
  100% { opacity: .85; transform: translateY(108vh) rotate(560deg); }
}

/* --- Promotion night: gold/green ceiling glow + a bouncing trophy --- */
.ol-promo::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(95% 62% at 50% -6%, color-mix(in srgb, var(--res) 24%, transparent), transparent 62%);
}
.ol-promo-trophy { display: inline-block; animation: olTrophy 1.7s ease-in-out infinite; }
@keyframes olTrophy { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-9px) rotate(5deg); } }
.ol-promo-title { animation: olScorePop .85s cubic-bezier(.2,1.4,.4,1) both; }

@media (prefers-reduced-motion: reduce) {
  .ol-enter, .ol-reveal-screen::before, .ol-confetti i, .ol-promo-trophy, .ol-promo-title { animation: none; }
  .ol-confetti { display: none; }
}

/* =============================================================================
   Pre-match "Match odds" card (Living World / private live modes) — tactic-agnostic
   W/D/L bar + stadium-scaled home edge. Reads the real engine model.
   ============================================================================= */
.pm-odds .pm-odds-bar {
  display: flex; height: 24px; border-radius: var(--radius-pill); overflow: hidden;
  margin: 6px 0 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(0,0,0,.25);
}
.pm-odds-seg { display: flex; align-items: center; justify-content: center; font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums; font-size: .78rem; font-weight: 800; letter-spacing: .02em; min-width: 0; transition: width .3s ease; }
.pm-odds-seg.win  { background: linear-gradient(180deg, #3FE07D, #2EA043); color: #04140A; }
.pm-odds-seg.draw { background: linear-gradient(180deg, #F5C043, #D99A1E); color: #241a02; }
.pm-odds-seg.loss { background: linear-gradient(180deg, #F87171, #D64545); color: #fff; }
.pm-odds-key { display: flex; gap: 16px; font-size: .82rem; color: var(--afm-text-secondary, #C4D0CB); }
.pm-odds-key b { color: var(--afm-text-primary, #F5F8F6); font-family: var(--font-numeric); }
.pm-odds-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.pm-odds-key .k-win  { background: #3FE07D; }
.pm-odds-key .k-draw { background: #F5C043; }
.pm-odds-key .k-loss { background: #F87171; }
.pm-home-edge { margin-top: 11px; font-size: .88rem; padding-top: 10px; border-top: 1px solid var(--afm-border-subtle, #212C38); }
.pm-home-edge .pm-boost { color: var(--afm-green-bright, #3FE07D); font-family: var(--font-numeric); }

/* =============================================================================
   Youth Academy cards (Living World) — reveal model, Fire-Up-style cards
   ============================================================================= */
.yth-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.yth-card {
  background: var(--grad-surface), var(--afm-surface-elevated, #161D28);
  border: 1px solid var(--afm-border-subtle, #212C38); border-radius: 13px; padding: 12px;
  box-shadow: var(--shadow-card); display: flex; flex-direction: column;
}
.yth-card.yth-trial { border-style: dashed; border-color: var(--afm-border-strong, #33414F); }
.yth-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.yth-av { flex: none; width: 44px; height: 44px; border-radius: 11px; overflow: hidden; box-shadow: var(--edge-top), 0 2px 8px rgba(0,0,0,.3); background: #10161f; }
.yth-av svg, .yth-av img { display: block; }
/* Procedural-fallback → composited-art avatar wrapper (fills its container) */
.pav { display: block; width: 100%; height: 100%; }
.pav > svg, .pav > img { display: block; width: 100%; height: 100%; }
/* Reusable player-face frame — one look for the same avatar everywhere (squad, transfers, profile,
   draft). A fixed-size rounded well; the .pav inside fills it. Sizes: sm 28 / md 40 / lg 72. */
.face { flex: none; border-radius: 9px; overflow: hidden; background: #10161f; box-shadow: var(--edge-top), 0 2px 8px rgba(0,0,0,.32); }
.face.sm { width: 28px; height: 28px; border-radius: 7px; }
.face.md { width: 40px; height: 40px; border-radius: 10px; }
.face.lg { width: 72px; height: 72px; border-radius: 16px; }
.face > .pav { width: 100%; height: 100%; }
/* Inline face + name pairing used inside table cells / rows */
.name-face { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
/* Training drill reveal — players "develop" in one at a time (staggered by inline animation-delay) */
@keyframes drillpop { from { opacity: 0; transform: translateY(9px) scale(.95); } to { opacity: 1; transform: none; } }
.drill-pop { animation: drillpop .4s cubic-bezier(.2,.7,.3,1) both; }
.yth-name { flex: 1; min-width: 0; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yth-row { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; font-size: .85rem; }
.yth-row .num { font-family: var(--font-numeric); font-size: 1.05rem; }
.yth-scout { margin: 8px 0 6px; }
.yth-scout-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; margin-bottom: 3px; }
.yth-scout-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4DA3FF, #3FE07D); transition: width .3s ease; }
.yth-traits { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; min-height: 22px; }
.yth-trait { font-size: .68rem; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  background: rgba(63,224,125,.12); color: var(--afm-green-bright, #3FE07D); border: 1px solid rgba(63,224,125,.3); }
.yth-trait.bad { background: rgba(248,113,113,.12); color: var(--afm-red, #F87171); border-color: rgba(248,113,113,.3); }
.yth-trait.myst { background: rgba(255,255,255,.04); color: var(--afm-text-muted, #7E8C88); border-color: var(--afm-border-subtle, #212C38); letter-spacing: 1px; }