/* ══ Design tokens ═══════════════════════════════════════════ */
:root {
  --team:        #9d2235;
  --team-dark:   #711826;
  --team-soft:   rgba(157,34,53,0.10);
  --ink:         #0f1923;
  --ink-2:       #3a4856;
  --muted:       #6b7885;
  --line:        #e0e5ea;
  --line-soft:   #f0f3f5;
  --paper:       #f4f6f8;
  --panel:       #ffffff;
  --turf:        #1f7a52;     /* field hockey blue-turf alt below */
  --turf-dark:   #185f40;
  --turf-line:   rgba(255,255,255,0.85);
  --circle:      rgba(255,255,255,0.92);
  --green-field: #2a6e45;
  --gold:        #c4942f;
  --gold-soft:   rgba(196,148,47,0.15);
  --blue:        #1d4e89;
  --blue-soft:   rgba(29,78,137,0.12);
  --red:         #c0392b;
  --shadow-sm:   0 1px 3px rgba(15,25,35,0.08);
  --shadow-md:   0 4px 16px rgba(15,25,35,0.10);
  --shadow-lg:   0 12px 40px rgba(15,25,35,0.14);
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
}
[data-theme="dark"] {
  --ink:#e8edf2; --ink-2:#a8b4c0; --muted:#6b8096;
  --line:#2a3340; --line-soft:#1e2830; --paper:#131c26; --panel:#1a2535;
  --turf:#15694a; --turf-dark:#0f4d36;
  --shadow-sm:0 1px 3px rgba(0,0,0,.25); --shadow-md:0 4px 16px rgba(0,0,0,.30); --shadow-lg:0 12px 40px rgba(0,0,0,.40);
}

*,*::before,*::after { box-sizing:border-box; }
h1,h2,h3,h4,p { margin:0; }
button,input,select { font:inherit; }
button { cursor:pointer; }
body {
  margin:0; min-height:100vh; background:var(--paper); color:var(--ink);
  transition:background .2s,color .2s;
}
:focus-visible { outline:2px solid var(--team); outline-offset:2px; border-radius:4px; }

/* ══ Top bar ═════════════════════════════════════════════════ */
.topbar {
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:18px;
  padding:10px 18px; background:var(--panel);
  border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.brand { display:flex; align-items:center; gap:10px; min-width:0; }
.brand-mark {
  width:40px; height:40px; flex:none; border-radius:10px;
  display:grid; place-items:center; font-weight:900; letter-spacing:.5px;
  color:#fff; background:linear-gradient(135deg,var(--team),var(--team-dark));
  box-shadow:var(--shadow-sm);
}
.brand-text h1 { font-size:1.02rem; font-weight:800; line-height:1.1; }
.brand-text p { font-size:.7rem; color:var(--muted); font-weight:600; letter-spacing:.3px; text-transform:uppercase; }

.tabbar { display:flex; gap:4px; margin:0 auto; background:var(--line-soft); padding:4px; border-radius:12px; }
.tab {
  border:none; background:transparent; color:var(--ink-2);
  padding:8px 18px; border-radius:9px; font-weight:700; font-size:.9rem;
  transition:all .15s;
}
.tab[aria-selected="true"] { background:var(--panel); color:var(--team); box-shadow:var(--shadow-sm); }
.tab:hover:not([aria-selected="true"]) { color:var(--ink); }

.topbar-actions { display:flex; align-items:center; gap:12px; }
.scoreboard {
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono',monospace; font-size:1.05rem; font-weight:700;
  padding:5px 12px; border-radius:9px; background:var(--team-soft); color:var(--team);
}
.scoreboard span { color:var(--muted); }

.icon-button {
  width:38px; height:38px; border:1px solid var(--line); background:var(--panel);
  border-radius:9px; display:grid; place-items:center; font-size:1rem; color:var(--ink-2);
  transition:all .15s;
}
.icon-button:hover { border-color:var(--team); color:var(--team); }
.icon-button.danger:hover { border-color:var(--red); color:var(--red); }

/* ══ Main / panels ═══════════════════════════════════════════ */
.app-main { max-width:1320px; margin:0 auto; padding:18px; }
.tab-panel { animation:fade .18s ease; }
.tab-panel[hidden] { display:none; }
@keyframes fade { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

.panel-head {
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
  margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.panel-head > div:first-child { margin-right:auto; }
.eyebrow { font-size:.7rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--team); }
.panel-title { font-size:1.5rem; font-weight:800; }

/* ══ Cards ═══════════════════════════════════════════════════ */
.card {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:16px; box-shadow:var(--shadow-sm); margin-bottom:16px;
}
.card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.card-head h2 { font-size:1rem; font-weight:800; }
.card h3 { font-size:.82rem; font-weight:700; color:var(--ink-2); }
.muted-count { font-size:.78rem; font-weight:700; color:var(--muted); }
.muted { color:var(--muted); font-weight:500; }

/* ══ Buttons / inputs ════════════════════════════════════════ */
.primary-button {
  border:none; border-radius:10px; padding:10px 16px; font-weight:700; font-size:.9rem;
  color:#fff; background:linear-gradient(135deg,var(--team),var(--team-dark));
  box-shadow:var(--shadow-sm); transition:transform .1s,filter .15s;
}
.primary-button:hover { filter:brightness(1.06); }
.primary-button:active { transform:translateY(1px); }
.ghost-button {
  border:1px solid var(--line); background:var(--panel); color:var(--ink-2);
  border-radius:10px; padding:9px 14px; font-weight:600; font-size:.86rem; transition:all .15s;
}
.ghost-button:hover { border-color:var(--team); color:var(--team); }
.ghost-button.danger:hover { border-color:var(--red); color:var(--red); }
.ghost-button:disabled { opacity:.45; cursor:not-allowed; }
.full-button { width:100%; }
.text-button { border:none; background:transparent; color:var(--team); font-weight:700; font-size:.82rem; padding:4px 6px; }
.text-button:hover { text-decoration:underline; }
.file-button { position:relative; overflow:hidden; display:inline-flex; align-items:center; }
.file-button input { position:absolute; inset:0; opacity:0; cursor:pointer; }

.field-label { display:flex; flex-direction:column; gap:4px; font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.field-label.compact { font-size:.68rem; }
.field-label input, .field-label select, .inline-form input, .score-edit input {
  font:inherit; font-size:.88rem; font-weight:500; color:var(--ink); text-transform:none; letter-spacing:0;
  padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel);
}
.field-label input:focus, .field-label select:focus { border-color:var(--team); }
.setting-label { font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.field-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.inline-form { display:flex; gap:6px; align-items:flex-end; }
.inline-form input { flex:1; }
.status-line { font-size:.84rem; color:var(--muted); margin:8px 0 16px; font-weight:600; }
.hint-text { font-size:.78rem; color:var(--muted); }

/* ══ Team toggle ═════════════════════════════════════════════ */
.team-toggle { display:inline-flex; gap:4px; background:var(--line-soft); padding:4px; border-radius:10px; }
.team-toggle.big { padding:5px; }
.team-btn {
  border:none; background:transparent; color:var(--ink-2);
  padding:7px 14px; border-radius:7px; font-weight:700; font-size:.82rem; transition:all .15s;
}
.team-btn.is-active { background:var(--panel); color:var(--team); box-shadow:var(--shadow-sm); }
.team-toggle.big .team-btn { padding:9px 18px; font-size:.9rem; }

/* ══ Game strip: clock + meta ════════════════════════════════ */
.game-strip { display:flex; gap:16px; flex-wrap:wrap; align-items:stretch; margin-bottom:6px; }
.clock-block {
  background:linear-gradient(160deg,var(--ink),#10222e); color:#fff;
  border-radius:var(--radius-lg); padding:14px 18px; min-width:230px;
  display:flex; flex-direction:column; gap:8px; align-items:center; box-shadow:var(--shadow-md);
}
[data-theme="dark"] .clock-block { background:linear-gradient(160deg,#0a141c,#102530); }
.game-clock { font-family:'JetBrains Mono',monospace; font-size:2.6rem; font-weight:700; line-height:1; letter-spacing:1px; }
.game-clock.running { color:#7ee0a8; }
.clock-controls { display:flex; gap:6px; }
.clock-controls .primary-button { padding:7px 12px; font-size:.82rem; }
.clock-controls .ghost-button { padding:7px 10px; font-size:.78rem; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#dfe7ee; }
.clock-controls .ghost-button:hover { background:rgba(255,255,255,.16); color:#fff; }
.quarter-readout { font-size:.74rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#9fb3c2; }

.game-meta { flex:1; min-width:300px; display:flex; flex-direction:column; gap:10px; justify-content:center;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px; }
.game-meta-row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.game-meta-row .field-label { flex:1; min-width:90px; }
.score-edit { display:flex; gap:8px; }
.score-edit .field-label { width:64px; }

/* ══ Game grid ═══════════════════════════════════════════════ */
.game-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px; }
.game-col { display:flex; flex-direction:column; }

/* ══ FIELD HOCKEY PITCH ══════════════════════════════════════ */
.pitch-card .card-head { margin-bottom:10px; }
.pitch {
  position:relative; width:100%; aspect-ratio:6/9; border-radius:12px; overflow:hidden;
  background:
    repeating-linear-gradient(0deg, var(--turf) 0 28px, var(--turf-dark) 28px 56px);
  box-shadow:inset 0 0 0 3px var(--turf-line), var(--shadow-sm);
  touch-action:none; user-select:none;
}
.pitch.big { aspect-ratio:7/9; max-width:560px; margin:0 auto; }
.pitch::before, .pitch::after { content:""; position:absolute; left:6px; right:6px; height:2px; background:var(--turf-line); opacity:.55; }
/* 25-yard lines */
.pitch::before { top:25%; }
.pitch::after  { top:75%; }
/* center line + circles via SVG overlay */
.pitch-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.pitch-dots { position:absolute; inset:0; }

.dot {
  position:absolute; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--panel); border:2.5px solid var(--team); color:var(--team);
  box-shadow:var(--shadow-md); cursor:grab; touch-action:none;
  font-weight:800; transition:box-shadow .12s, transform .04s;
}
.dot:active { cursor:grabbing; }
.dot.dragging { box-shadow:var(--shadow-lg); z-index:5; opacity:.94; }
.dot.dot-gk { border-color:var(--gold); color:var(--gold); }
.dot.dot-oop { border-color:var(--gold); background:var(--gold-soft); }
.dot.dot-empty { border-style:dashed; color:var(--muted); border-color:var(--muted); background:transparent; }
.dot-role { font-size:.62rem; font-weight:800; letter-spacing:.3px; }
.dot-jersey { font-family:'JetBrains Mono',monospace; font-size:.92rem; line-height:1; }
.dot-name { font-size:.54rem; font-weight:700; max-width:60px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); margin-top:1px; }
.dot.drop-hover { border-color:var(--green-field); box-shadow:0 0 0 4px rgba(42,110,69,.3); }
.pitch-hint { font-size:.74rem; color:var(--muted); margin-top:8px; text-align:center; }

.field-shift-nav { display:flex; align-items:center; gap:8px; }
.field-nav-btn { width:30px; height:30px; border:1px solid var(--line); background:var(--panel); border-radius:8px; font-size:1.1rem; color:var(--ink-2); display:grid; place-items:center; }
.field-nav-btn:hover { border-color:var(--team); color:var(--team); }
#shiftNavLabel { font-family:'JetBrains Mono',monospace; font-size:.78rem; font-weight:700; color:var(--ink-2); }

/* ══ Game day builder ════════════════════════════════════════ */
.gameday-builder { display:flex; flex-direction:column; gap:6px; max-height:340px; overflow-y:auto; }
.gd-row {
  display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:9px;
  border:1px solid var(--line); background:var(--panel); transition:all .12s;
}
.gd-row.is-dressed { border-color:var(--team); background:var(--team-soft); }
.gd-row .gd-jersey { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.8rem; color:var(--muted); min-width:26px; }
.gd-row .gd-name { font-weight:700; font-size:.88rem; flex:1; }
.gd-row .gd-pos { font-size:.68rem; color:var(--muted); font-weight:600; }
.gd-row .callup-flag { font-size:.62rem; font-weight:800; color:var(--blue); background:var(--blue-soft); padding:2px 6px; border-radius:5px; }
.gd-toggle { width:36px; height:22px; }
.gd-callup-add { margin-top:8px; }
.gd-callup-add summary { font-size:.78rem; font-weight:700; color:var(--blue); cursor:pointer; padding:6px; }
.gd-callup-list { display:flex; flex-direction:column; gap:4px; padding:6px 0; }

/* ══ Starters / subs chips ═══════════════════════════════════ */
.lineup-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lineup-col h3 { margin-bottom:8px; }
.chip-list { display:flex; flex-direction:column; gap:6px; min-height:60px; }
.lineup-chip {
  display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:9px;
  border:1px solid var(--line); background:var(--panel); font-size:.84rem; font-weight:600;
  cursor:grab; touch-action:none;
}
.lineup-chip .chip-jersey { font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--muted); font-size:.76rem; }
.lineup-chip.is-starter { border-color:var(--team); }
.lineup-chip .chip-move { margin-left:auto; color:var(--muted); font-size:.9rem; }
.lineup-chip:hover .chip-move { color:var(--team); }
.empty-mini { font-size:.76rem; color:var(--muted); padding:10px; text-align:center; border:1px dashed var(--line); border-radius:9px; }

.action-card { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.action-card .primary-button:first-child, .action-card .primary-button:last-child { grid-column:1/-1; }

/* ══ Minute summary ══════════════════════════════════════════ */
.minute-summary { display:flex; flex-direction:column; gap:8px; max-height:360px; overflow-y:auto; }
.minute-row { display:grid; grid-template-columns:1fr 90px 44px; align-items:center; gap:10px; }
.minute-row strong { font-size:.84rem; font-weight:700; }
.minute-row .bar { height:8px; background:var(--line-soft); border-radius:99px; overflow:hidden; }
.minute-row .bar span { display:block; height:100%; background:var(--team); border-radius:99px; }
.minute-row .bar.bar-low span { background:var(--blue); }
.minute-row .bar.bar-warn span { background:var(--gold); }
.minute-total { font-family:'JetBrains Mono',monospace; font-size:.78rem; font-weight:700; text-align:right; color:var(--ink-2); }
.fairness-badge { font-size:.6rem; font-weight:800; padding:1px 5px; border-radius:5px; margin-left:6px; }
.badge-low { background:var(--blue-soft); color:var(--blue); }
.badge-warn { background:var(--gold-soft); color:var(--gold); }
.empty-state { font-size:.82rem; color:var(--muted); text-align:center; padding:18px; }

/* ══ Schedule table ══════════════════════════════════════════ */
.schedule-card { margin-top:4px; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
table { width:100%; border-collapse:collapse; font-size:.82rem; }
thead th { background:var(--line-soft); padding:9px 8px; text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:800; position:sticky; top:0; }
tbody td { padding:8px; border-top:1px solid var(--line); vertical-align:top; }
tbody tr { transition:background .12s; cursor:pointer; }
tbody tr:hover { background:var(--team-soft); }
tbody tr.is-active-shift { background:var(--team-soft); box-shadow:inset 3px 0 0 var(--team); }
.time-cell strong { font-family:'JetBrains Mono',monospace; font-size:.8rem; }
.quarter-badge { display:inline-block; font-size:.6rem; font-weight:800; color:var(--green-field); background:rgba(42,110,69,.12); padding:1px 5px; border-radius:5px; margin-left:6px; }
td.warning-cell { background:var(--gold-soft); }
.out-of-pos { display:block; font-size:.6rem; color:var(--gold); font-weight:800; }
.schedule-slot strong { display:block; font-weight:700; }
.schedule-slot span { font-size:.7rem; color:var(--muted); }
.bench-cell { font-size:.74rem; color:var(--ink-2); }
.slot-cell { position:relative; }
.slot-cell.droppable.drop-hover { outline:2px dashed var(--green-field); outline-offset:-2px; }
.slot-player { cursor:grab; }
.stint-btns { display:flex; gap:3px; margin-top:3px; }
.stint-btn { border:1px solid var(--line); background:var(--panel); border-radius:5px; font-size:.62rem; padding:1px 5px; color:var(--ink-2); font-weight:700; }
.stint-btn:hover { border-color:var(--team); color:var(--team); }

/* ══ Stat Book ═══════════════════════════════════════════════ */
.statbook-card { border-color:var(--team); }
.statbook-actions { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin-bottom:14px; }
.stat-action {
  border:1px solid var(--line); background:var(--panel); border-radius:10px; padding:12px 10px;
  font-weight:700; font-size:.84rem; color:var(--ink); display:flex; flex-direction:column; align-items:center; gap:4px;
  transition:all .12s;
}
.stat-action:hover { border-color:var(--team); background:var(--team-soft); transform:translateY(-1px); }
.stat-action .sa-icon { font-size:1.2rem; }
.stat-action .sa-sub { font-size:.64rem; color:var(--muted); font-weight:600; }
.statlog-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.statlog-head h3 { font-size:.82rem; }
.stat-log { display:flex; flex-direction:column; gap:5px; max-height:220px; overflow-y:auto; margin-bottom:14px; }
.stat-entry { display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:8px; background:var(--line-soft); font-size:.8rem; }
.stat-entry .se-time { font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--muted); min-width:42px; }
.stat-entry .se-team { font-size:.6rem; font-weight:800; padding:1px 5px; border-radius:5px; }
.se-team.home { background:var(--team-soft); color:var(--team); }
.se-team.away { background:var(--blue-soft); color:var(--blue); }
.stat-entry .se-label { font-weight:700; }
.stat-entry .se-who { color:var(--ink-2); margin-left:auto; font-weight:600; }
.statbox-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
.statbox { border:1px solid var(--line); border-radius:9px; padding:8px 10px; text-align:center; }
.statbox b { display:block; font-size:1.3rem; font-weight:800; font-family:'JetBrains Mono',monospace; }
.statbox span { font-size:.64rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.4px; }

/* ══ Roster ══════════════════════════════════════════════════ */
.roster-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; }
.player-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px; box-shadow:var(--shadow-sm); transition:opacity .15s,border-color .15s; }
.player-card.is-inactive { opacity:.5; }
.player-card-top { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.player-jersey { width:48px; text-align:center; padding:7px 4px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); font-family:'JetBrains Mono',monospace; font-weight:700; }
.player-name { flex:1; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); font-weight:600; }
.toggle-row { display:flex; align-items:center; gap:4px; font-size:.7rem; font-weight:700; color:var(--muted); }
.position-checks { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.chip { position:relative; }
.chip input { position:absolute; opacity:0; }
.chip span { display:inline-block; padding:5px 11px; border:1px solid var(--line); border-radius:99px; font-size:.74rem; font-weight:700; color:var(--muted); transition:all .12s; }
.chip input:checked + span { background:var(--team); border-color:var(--team); color:#fff; }
.player-note { width:100%; padding:6px 9px; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--ink); font-size:.78rem; }
.coverage-warning { background:var(--gold-soft); border:1px solid var(--gold); border-radius:var(--radius); padding:10px 14px; font-size:.82rem; font-weight:600; color:var(--ink); margin-bottom:14px; }
.coverage-warning small { color:var(--muted); font-weight:500; }

/* ══ Formations editor ═══════════════════════════════════════ */
.formation-layout { display:grid; grid-template-columns:1fr 300px; gap:18px; align-items:start; }
.formation-side { display:flex; flex-direction:column; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-sm); }
.add-dot-row { display:flex; flex-direction:column; gap:8px; }
.role-add-buttons { display:flex; gap:6px; }
.role-add-btn { flex:1; border:1px solid var(--line); background:var(--panel); border-radius:8px; padding:9px 0; font-weight:800; color:var(--ink-2); }
.role-add-btn:hover { border-color:var(--team); color:var(--team); }
.formation-counts { display:flex; gap:8px; flex-wrap:wrap; }
.fc-pill { font-size:.74rem; font-weight:700; color:var(--ink-2); background:var(--line-soft); padding:5px 10px; border-radius:8px; }

/* ══ Season ══════════════════════════════════════════════════ */
.season-schedule-head { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:8px; }
.season-schedule-head .field-grid { flex:1; min-width:280px; }
.season-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px; }
.season-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-sm); }
.season-card.wide { grid-column:1/-1; }
.season-card h3 { font-size:.92rem; font-weight:800; margin-bottom:12px; }
.saved-games-list { display:flex; flex-direction:column; gap:8px; max-height:420px; overflow-y:auto; }
.saved-game { display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius); transition:all .12s; }
.saved-game.is-selected { border-color:var(--team); background:var(--team-soft); }
.saved-game strong { display:block; font-size:.88rem; font-weight:800; }
.saved-game span { font-size:.72rem; color:var(--muted); }
.game-result { display:inline-block; margin-top:4px; font-size:.66rem; font-weight:800; padding:2px 7px; border-radius:6px; font-family:'JetBrains Mono',monospace; }
.result-w { background:rgba(42,110,69,.14); color:var(--green-field); }
.result-l { background:rgba(192,57,43,.14); color:var(--red); }
.result-d { background:var(--line-soft); color:var(--ink-2); }
.saved-game-actions { display:flex; flex-direction:column; gap:2px; align-items:flex-end; }

/* heatmap */
.heatmap-wrap { overflow-x:auto; }
.heatmap-table { font-size:.74rem; }
.heatmap-table th { font-size:.62rem; text-align:center; padding:5px 6px; }
.heatmap-table td { text-align:center; padding:6px; font-weight:700; font-family:'JetBrains Mono',monospace; border:1px solid var(--panel); }
.hm-name { text-align:left !important; font-family:inherit !important; font-weight:700; white-space:nowrap; }
.hm-0 { background:var(--line-soft); color:var(--muted); }
.hm-1 { background:rgba(42,110,69,.12); } .hm-2 { background:rgba(42,110,69,.28); }
.hm-3 { background:rgba(42,110,69,.45); } .hm-4 { background:rgba(42,110,69,.62); color:#fff; }
.hm-5 { background:rgba(42,110,69,.85); color:#fff; }

/* stat leaders */
.stat-leaders { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.leader-col h4 { font-size:.7rem; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin-bottom:6px; font-weight:800; }
.leader-row { display:flex; justify-content:space-between; font-size:.8rem; padding:3px 0; border-bottom:1px solid var(--line-soft); }
.leader-row b { font-family:'JetBrains Mono',monospace; }

.utility-panel { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-top:16px; }

/* ══ Sub warning popup ═══════════════════════════════════════ */
.sub-warning { position:fixed; top:74px; left:50%; transform:translateX(-50%); z-index:60; animation:pop .25s ease; }
@keyframes pop { from{opacity:0;transform:translate(-50%,-12px)} to{opacity:1;transform:translateX(-50%)} }
.sub-warning-inner { background:var(--gold); color:#3a2c08; border-radius:var(--radius-lg); padding:16px 20px; box-shadow:var(--shadow-lg); min-width:280px; text-align:center; }
.sub-warning-head { font-weight:900; font-size:.96rem; margin-bottom:8px; }
.sub-warning-body { font-size:.86rem; font-weight:600; margin-bottom:12px; }
.sub-warning-body .sw-on { color:var(--green-dark); font-weight:800; }
.sub-warning-inner .primary-button { background:#3a2c08; }

/* ══ Modal ═══════════════════════════════════════════════════ */
.modal-backdrop { position:fixed; inset:0; z-index:70; background:rgba(8,14,20,.55); display:grid; place-items:center; padding:18px; animation:fade .15s; }
.modal { background:var(--panel); border-radius:var(--radius-lg); width:100%; max-width:420px; box-shadow:var(--shadow-lg); overflow:hidden; }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); }
.modal-head h3 { font-size:1rem; font-weight:800; }
.modal-body { padding:16px; display:flex; flex-direction:column; gap:10px; }
.modal-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.modal-choice { border:1px solid var(--line); background:var(--panel); border-radius:10px; padding:14px; font-weight:700; font-size:.9rem; color:var(--ink); transition:all .12s; }
.modal-choice:hover { border-color:var(--team); background:var(--team-soft); }
.modal-choice .mc-sub { display:block; font-size:.66rem; color:var(--muted); font-weight:600; margin-top:2px; }
.modal-player-list { display:flex; flex-direction:column; gap:5px; max-height:300px; overflow-y:auto; }
.modal-player { display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:9px; font-weight:600; font-size:.86rem; }
.modal-player:hover { border-color:var(--team); background:var(--team-soft); }
.modal-player .mp-jersey { font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--muted); min-width:28px; }
.modal-jersey-input { display:flex; gap:8px; }
.modal-jersey-input input { flex:1; padding:10px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--ink); font-size:1rem; }

/* ══ Toast ═══════════════════════════════════════════════════ */
.toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,20px); z-index:90; background:var(--ink); color:var(--paper); padding:11px 20px; border-radius:99px; font-size:.86rem; font-weight:600; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:all .25s; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }

/* ══ Print card ══════════════════════════════════════════════ */
.print-card { display:none; }
@media print {
  body * { visibility:hidden; }
  .print-card, .print-card * { visibility:visible; }
  .print-card { display:block; position:absolute; inset:0; padding:0; color:#000; background:#fff; font-size:11px; }
  .pc-header { display:flex; justify-content:space-between; border-bottom:2px solid #000; padding-bottom:6px; margin-bottom:8px; }
  .pc-team { font-size:16px; font-weight:800; }
  .pc-meta { font-size:10px; color:#444; }
  .pc-table { width:100%; border-collapse:collapse; }
  .pc-table th, .pc-table td { border:1px solid #999; padding:3px 4px; text-align:left; font-size:9.5px; }
  .pc-table th { background:#eee; }
  .pc-time { font-weight:700; }
  .pc-oop { color:#a06000; font-weight:700; }
  .pc-summary { margin-top:10px; }
  .pc-min-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
  .pc-min-item { display:flex; justify-content:space-between; border:1px solid #ccc; padding:2px 5px; font-size:9px; }
  .pc-footer { margin-top:10px; font-size:8px; color:#666; text-align:center; }
}

/* ══ Responsive ══════════════════════════════════════════════ */
@media (max-width:920px) {
  .game-grid { grid-template-columns:1fr; }
  .formation-layout { grid-template-columns:1fr; }
  .season-grid { grid-template-columns:1fr; }
  .tabbar { margin:0; order:3; width:100%; justify-content:space-between; }
  .topbar { flex-wrap:wrap; }
}
@media (max-width:540px) {
  .app-main { padding:12px; }
  .lineup-cols { grid-template-columns:1fr; }
  .field-grid { grid-template-columns:1fr 1fr; }
  .game-clock { font-size:2.1rem; }
  .action-card { grid-template-columns:1fr; }
  .brand-text p { display:none; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }

/* ── Overtime row ──────────────────────────────────────────── */
.ot-row { padding-top:8px; border-top:1px dashed var(--line); align-items:center; }
.ot-toggle { font-size:.78rem; font-weight:700; color:var(--ink-2); gap:7px; flex:1; min-width:200px; }
.ot-toggle input { width:16px; height:16px; }
.ot-row .field-label { width:78px; }
.quarter-badge.ot { color:var(--gold); background:var(--gold-soft); }

/* ── Hidden-attribute override (must beat display:grid/flex) ── */
.modal-backdrop[hidden], .sub-warning[hidden] { display:none !important; }

/* ══ THEMES: Sunlight (max contrast) ════════════════════════ */
[data-theme="sunlight"]{
  --ink:#000; --ink-2:#141414; --muted:#3a3a3a; --line:#000; --line-soft:#cfcfcf;
  --paper:#ffffff; --panel:#ffffff;
  --team:#8a0010; --team-dark:#5a000a; --team-soft:#ffe1e4;
  --turf:#0a6536; --turf-dark:#074d29; --turf-line:#ffffff; --circle:#ffffff;
  --green-field:#0a5d2a; --gold:#7a4f00; --blue:#00367a; --red:#8a0007;
  --shadow-sm:0 0 0 1.5px #000; --shadow-md:0 0 0 1.5px #000; --shadow-lg:0 3px 0 1.5px #000;
}
[data-theme="sunlight"] body{ font-weight:500; }
[data-theme="sunlight"] .card,[data-theme="sunlight"] .season-card,[data-theme="sunlight"] .formation-side,[data-theme="sunlight"] .game-meta,[data-theme="sunlight"] .pitch{ border-width:2px; }
[data-theme="sunlight"] .tab[aria-selected="true"]{ outline:2px solid #000; }

/* ══ THEMES: Colorblind (blue/orange, no red-green) ═════════ */
[data-theme="colorblind"]{
  --team:#0072B2; --team-dark:#005488; --team-soft:rgba(0,114,178,.12);
  --green-field:#0072B2; --gold:#E69F00; --blue:#0072B2; --red:#D55E00;
  --turf:#3f6f9f; --turf-dark:#345c84; --turf-line:#ffffff; --circle:#ffffff;
}
[data-theme="colorblind"] .result-w{ background:rgba(0,114,178,.16); color:#0072B2; }
[data-theme="colorblind"] .result-l{ background:rgba(213,94,0,.16); color:#D55E00; }
[data-theme="colorblind"] .hm-1{background:rgba(0,114,178,.14)} [data-theme="colorblind"] .hm-2{background:rgba(0,114,178,.30)}
[data-theme="colorblind"] .hm-3{background:rgba(0,114,178,.48)} [data-theme="colorblind"] .hm-4{background:rgba(0,114,178,.66);color:#fff} [data-theme="colorblind"] .hm-5{background:rgba(0,114,178,.85);color:#fff}

/* ══ Quarter stepper (on dark clock) ════════════════════════ */
.quarter-stepper{ display:flex; align-items:center; gap:8px; }
.quarter-stepper .field-nav-btn{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); color:#dfe7ee; }
.quarter-stepper .field-nav-btn:hover{ background:rgba(255,255,255,.2); color:#fff; }
.quarter-stepper .quarter-readout{ min-width:96px; text-align:center; }

/* ══ Sub Sheet (position × minute grid) ═════════════════════ */
.subsheet-quarters{ display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.ssq-btn{ border:1px solid var(--line); background:var(--panel); border-radius:8px; padding:7px 15px; font-weight:800; color:var(--ink-2); }
.ssq-btn.is-active{ background:var(--team); border-color:var(--team); color:#fff; }
.ssq-btn.ot{ border-style:dashed; }
.subsheet-wrap{ overflow-x:auto; }
.subsheet-table{ border-collapse:collapse; width:100%; min-width:560px; }
.subsheet-table th,.subsheet-table td{ border:1px solid var(--line); padding:6px 3px; text-align:center; font-size:.78rem; }
.subsheet-table thead th{ background:var(--line-soft); font-family:'JetBrains Mono',monospace; font-weight:700; width:30px; }
.subsheet-table .ss-corner{ text-align:left; padding-left:10px; min-width:96px; font-weight:900; background:var(--ink); color:var(--paper); font-family:inherit; }
.ss-pos{ text-align:left !important; font-weight:800; white-space:nowrap; padding-left:14px !important; min-width:96px; }
.ss-line-head td{ background:var(--ink); color:var(--paper); text-align:left; font-weight:900; letter-spacing:.6px; padding:6px 10px; text-transform:uppercase; font-size:.72rem; }
.ss-block{ font-weight:700; }
.ss-block.shade{ background:var(--line-soft); }
.ss-block.tap{ cursor:pointer; }
.ss-block.tap:hover{ outline:2px solid var(--team); outline-offset:-2px; }
.ss-block.oop{ background:var(--gold-soft); }
.ssb-name{ font-size:.74rem; display:block; line-height:1.1; }
.ssb-jersey{ font-family:'JetBrains Mono',monospace; color:var(--muted); font-size:.64rem; }
.ss-empty{ color:var(--muted); font-weight:600; }
.ss-legend{ display:flex; gap:14px; margin-top:10px; font-size:.72rem; color:var(--muted); flex-wrap:wrap; }
.ss-legend span{ display:inline-flex; align-items:center; gap:5px; }
.ss-swatch{ width:14px; height:14px; border:1px solid var(--line); border-radius:3px; }
.ss-swatch.shade{ background:var(--line-soft); }

/* ══ Formation dot remove (×) — iPad friendly ═══════════════ */
.dot{ position:absolute; } /* ensure positioning for badge */
.dot-x{ position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%; background:var(--red); color:#fff; font-size:.74rem; font-weight:900; display:flex; align-items:center; justify-content:center; line-height:1; border:2px solid var(--panel); box-shadow:var(--shadow-sm); touch-action:manipulation; }
.dot-x:active{ transform:scale(.9); }

/* ══ Roster team selector ═══════════════════════════════════ */
.player-team-row{ display:flex; align-items:center; gap:8px; margin:8px 0; }
.player-team-row select{ flex:1; padding:6px 9px; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--ink); font-size:.8rem; font-weight:600; }

/* ══ Stat compare (Us vs Opponent) ══════════════════════════ */
.stat-compare{ width:100%; border-collapse:collapse; margin-top:6px; }
.stat-compare th,.stat-compare td{ padding:8px 10px; border-bottom:1px solid var(--line-soft); font-size:.86rem; }
.stat-compare thead th{ font-size:.64rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.stat-compare thead th.h-us{ text-align:right; color:var(--team); }
.stat-compare thead th.h-them{ text-align:left; color:var(--blue); }
.sc-us{ text-align:right; font-weight:800; font-family:'JetBrains Mono',monospace; color:var(--team); width:60px; }
.sc-stat{ text-align:center; font-weight:700; color:var(--ink-2); }
.sc-them{ text-align:left; font-weight:800; font-family:'JetBrains Mono',monospace; color:var(--blue); width:60px; }
.sc-row.lead .sc-us, .sc-row.lead .sc-them{ font-size:1rem; }

/* sub-pick modal reuse: highlight bench players */
.modal-player.on-field{ border-color:var(--team); }
.modal-player .mp-tag{ margin-left:auto; font-size:.62rem; font-weight:800; padding:1px 6px; border-radius:5px; background:var(--line-soft); color:var(--muted); }

/* ══ Roster: grouped by primary line + role selectors ═══════ */
.roster-list{ display:flex; flex-direction:column; gap:22px; }
.roster-group-head{ display:flex; align-items:center; gap:10px; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin:0 0 10px; padding-bottom:7px; border-bottom:2px solid var(--line-soft); }
.roster-group-head .rg-count{ font-family:'JetBrains Mono',monospace; font-weight:700; background:var(--team-soft); color:var(--team); border-radius:20px; padding:1px 9px; font-size:.7rem; }
.player-roles{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:10px 0; }
.role-pick{ display:flex; flex-direction:column; gap:3px; }
.role-pick>span{ font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.role-pick select{ width:100%; padding:6px 7px; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--ink); font-size:.78rem; font-weight:600; }
.role-pick select:focus{ outline:2px solid var(--team); outline-offset:1px; }

/* ══ Help panel (scrollable modal) ══════════════════════════ */
.modal.help-modal{ max-width:680px; }
.modal.help-modal .modal-body{ max-height:74vh; overflow:auto; }
.help-body h4{ margin:18px 0 6px; font-size:.95rem; color:var(--team); }
.help-body h4:first-child{ margin-top:0; }
.help-body p, .help-body li{ font-size:.86rem; line-height:1.5; color:var(--ink-2); }
.help-body ul{ margin:4px 0 4px 18px; }
.help-body li{ margin-bottom:4px; }
.help-body .help-callout{ background:var(--team-soft); border-left:3px solid var(--team); border-radius:8px; padding:10px 14px; margin:12px 0; }
.help-body code{ background:var(--line-soft); padding:1px 6px; border-radius:5px; font-size:.8rem; }
.help-body kbd{ background:var(--ink); color:var(--paper); padding:1px 7px; border-radius:5px; font-size:.74rem; font-family:'JetBrains Mono',monospace; }

/* ══ Team Info tab ══════════════════════════════════════════ */
.team-info-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width:760px){ .team-info-grid{ grid-template-columns:1fr; } }
.team-info-grid .field-label{ display:flex; flex-direction:column; gap:5px; margin-bottom:14px; font-weight:700; font-size:.8rem; color:var(--ink-2); }
.team-info-grid .field-label input[type=text]{ padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--ink); font-size:.95rem; }
.team-preview{ display:flex; flex-direction:column; gap:16px; }
.tp-brand{ display:flex; align-items:center; gap:12px; }
.tp-crest{ width:54px; height:54px; border-radius:14px; background:var(--team); color:#fff; display:grid; place-items:center; font-weight:900; font-size:1.2rem; letter-spacing:.5px; box-shadow:var(--shadow-md); }
.tp-brand-text strong{ display:block; font-size:1.1rem; }
.tp-brand-text span{ font-size:.8rem; color:var(--muted); }
.tp-line{ font-size:.82rem; color:var(--ink-2); }
.tp-line b{ color:var(--team); }
.tp-score{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line-soft); border-radius:12px; }
.tp-score .tp-team{ font-weight:800; }
.tp-score .tp-num{ font-family:'JetBrains Mono',monospace; font-size:1.6rem; font-weight:800; }
.tp-score .tp-vs{ color:var(--muted); font-size:.8rem; }

/* ══ Formations: quick-switch strip + role menu ═════════════ */
.formation-switch{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.fsw-btn{ border:1px solid var(--line); background:var(--panel); color:var(--ink-2); border-radius:20px; padding:6px 14px; font-weight:700; font-size:.82rem; }
.fsw-btn.is-active{ background:var(--team); border-color:var(--team); color:#fff; }
.role-menu{ display:flex; flex-direction:column; gap:14px; }
.rm-line h5{ margin:0 0 6px; font-size:.7rem; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); }
.rm-roles{ display:flex; flex-wrap:wrap; gap:7px; }
.rm-role{ border:1px solid var(--line); background:var(--panel); color:var(--ink-2); border-radius:8px; padding:7px 12px; font-weight:600; font-size:.82rem; }
.rm-role.on{ background:var(--team); border-color:var(--team); color:#fff; }
.rm-role:active{ transform:scale(.96); }

/* sub-picker section headers */
.mp-section{ font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin:12px 4px 5px; }
.mp-section:first-child{ margin-top:2px; }

/* minute-balance goalie subsection */
.minute-subhead{ margin:16px 0 8px; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-2); padding-top:12px; border-top:1px dashed var(--line-soft); }
.minute-subhead .muted{ font-weight:600; text-transform:none; letter-spacing:0; }

/* sub-sheet print layout */
.print-card .print-q{ margin:0 0 16px; break-inside:avoid; }
.print-card .subsheet-table{ width:100%; }
@media print {
  .print-card .subsheet-table th, .print-card .subsheet-table td{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .print-card .ss-line-head td{ background:#000 !important; color:#fff !important; }
  .print-card .ss-block.shade{ background:#d9d9d9 !important; }
  .print-card .ss-corner{ background:#000 !important; color:#fff !important; }
}

/* ══ Stat log: editable entries + spacing/overlap fix ═══════ */
.stat-entry{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--line-soft); padding:8px 6px; cursor:pointer; font:inherit; color:inherit; }
.stat-entry:hover{ background:var(--team-soft); }
.se-edit{ margin-left:auto; opacity:.35; font-size:.8rem; }
.stat-entry:hover .se-edit{ opacity:.9; }
.modal-player.mp-special{ justify-content:center; color:var(--muted); font-weight:700; border-style:dashed; }
.statbook-card{ overflow:hidden; }
.statbook-card .stat-log{ margin:0 0 14px; }
.statbook-card .statbox-grid{ margin-top:6px; clear:both; }
.statbook-card .hint-text{ position:static; clear:both; }

/* ══ Stats tab ══════════════════════════════════════════════ */
.stats-export{ display:flex; gap:8px; flex-wrap:wrap; }
.team-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
.tsg-cell{ border:1px solid var(--line-soft); border-radius:10px; padding:10px 12px; }
.tsg-cell .v{ font-family:'JetBrains Mono',monospace; font-size:1.35rem; font-weight:800; color:var(--team); }
.tsg-cell .k{ font-size:.64rem; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin-top:2px; }
.stat-table{ width:100%; border-collapse:collapse; font-size:.84rem; min-width:520px; }
.stat-table th,.stat-table td{ padding:7px 9px; border-bottom:1px solid var(--line-soft); text-align:right; white-space:nowrap; }
.stat-table th:first-child,.stat-table td:first-child,.stat-table th:nth-child(2),.stat-table td:nth-child(2){ text-align:left; }
.stat-table thead th{ font-size:.62rem; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.stat-table tbody tr:hover{ background:var(--team-soft); }
.stat-table .num{ font-family:'JetBrains Mono',monospace; }