/* ============================================================================
 * League module stylesheet — scorekeeper PWA, live board, league portal.
 *
 * Inherits the `:root` tokens from styles.css (--bg, --card, --line,
 * --accent, --display, --ui, --mono). Self-contained otherwise so the
 * module is portable.
 * ============================================================================ */

/* ─── Shared primitives ────────────────────────────────────────────────────── */

/* The `hidden` attribute must always win over component display rules
 * (e.g. .sk-panel{display:flex}, .sk-grid{display:grid}), otherwise toggling
 * el.hidden never actually hides the element. */
[hidden] { display: none !important; }

.sk-card,
.lg-table {
  background: var(--card, #141414);
  border: 1px solid var(--line, rgba(255,255,255,.08));
  border-radius: 10px;
}

button {
  font-family: inherit;
}

.sk-btn-primary, .sk-btn-secondary, .sk-btn-warn {
  border: none;
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
}
.sk-btn-primary  { background: var(--accent, #E8FF4F); color: #000; }
.sk-btn-secondary { background: #2a2c30; color: var(--text, #e6e8eb); border: 1px solid var(--line, rgba(255,255,255,.08)); }
.sk-btn-warn     { background: #6e1d1d; color: #fff; }
.sk-le-back { width: auto; padding: 6px 12px; margin-bottom: 8px; font-size: 14px; }

.sk-msg { margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.sk-msg.ok { background: #14351a; color: #b6ffc8; }
.sk-msg.err { background: #4a1a1a; color: #ffb6b6; }
.sk-muted { color: #9aa0a6; font-size: 13px; }

.sk-toast {
  position: fixed;
  bottom: 80px; left: 50%;
  transform: translateX(-50%);
  background: #1a1c20;
  color: #fff;
  padding: 10px 16px;
  border-radius: 24px;
  font-size: 14px;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

/* ─── Scorekeeper PWA ──────────────────────────────────────────────────────── */

.sk-body {
  background: var(--bg, #0a0a0a);
  color: var(--text, #e6e8eb);
  font-family: var(--ui, system-ui, -apple-system, sans-serif);
  margin: 0;
  min-height: 100vh;
  padding: 0;
}

.sk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.08));
  position: sticky;
  top: 0;
  background: var(--bg, #0a0a0a);
  z-index: 10;
}
.sk-title {
  font-family: var(--display, 'Anton', sans-serif);
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sk-sync {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #14351a;
  color: #b6ffc8;
}

.sk-main {
  padding: 16px;
  max-width: 600px;
  margin: 0 auto;
}

.sk-loading { color: #9aa0a6; text-align: center; padding: 40px 0; }

.sk-card {
  padding: 16px;
  margin-bottom: 16px;
}
.sk-card h2 { font-family: var(--display, 'Anton', sans-serif); margin: 0 0 12px 0; font-size: 18px; }
.sk-card label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 12px; color: #9aa0a6; }
.sk-card input, .sk-card select {
  background: #0a0c10; color: var(--text, #e6e8eb);
  border: 1px solid var(--line, rgba(255,255,255,.08));
  padding: 10px 12px; border-radius: 6px; font: inherit;
}
.sk-card-narrow { max-width: 360px; margin: 32px auto; }
.sk-offline-banner { background: #4a3a14; color: #ffe9b0; border-radius: 6px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; text-align: center; }

/* "Reprendre le match en cours" — prominent so a non-technical scorekeeper
   coming back after a restart cannot miss how to continue. */
.sk-resume { margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.sk-resume-btn { display: flex; flex-direction: column; gap: 2px; background: #14351a; border: 1px solid #2f7d44; border-radius: 10px; padding: 14px 16px; text-decoration: none; color: #e6e8eb; }
.sk-resume-btn:active { background: #1a4322; }
.sk-resume-lead { font-weight: 700; color: #8ff0a8; font-size: 15px; }
.sk-resume-teams { font-size: 14px; color: #cfd3d7; }
#sk-prep { margin-bottom: 0; }
.sk-games-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sk-games-actions button { flex: 1; min-width: 140px; }

.sk-backup { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line, rgba(255,255,255,.08)); }
.sk-backup button { flex: 1; min-width: 140px; font-size: 14px; padding: 10px 14px; }
.sk-backup-msg { flex-basis: 100%; margin: 4px 0 0; }
.sk-backup-msg.err { color: #ffb6b6; }

/* Sync inspector overlay (tap the sync chip) */
.sk-sync-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px 16px; z-index: 1000; }
.sk-sync-modal { background: #1c1e22; border: 1px solid var(--line, rgba(255,255,255,.08)); border-radius: 12px; width: 100%; max-width: 460px; max-height: 80vh; overflow-y: auto; padding: 16px; }
.sk-sync-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sk-sync-x { background: none; border: none; color: #9aa0a6; font-size: 18px; cursor: pointer; padding: 4px 8px; }
.sk-sync-status { margin: 4px 0 12px; font-size: 14px; color: #cfd3d7; }
.sk-sync-list { list-style: none; padding: 0; margin: 0 0 12px; }
.sk-sync-list li { padding: 8px 0; border-top: 1px solid var(--line, rgba(255,255,255,.06)); font-size: 14px; }
.sk-sync-list .ssr-top { display: flex; justify-content: space-between; gap: 12px; }
.sk-sync-list .ssr-name { color: #e6e8eb; }
.sk-sync-list .ssr-counts { color: #9aa0a6; white-space: nowrap; }
.sk-sync-list .ssr-counts .err, .sk-sync-list .ssr-err { color: #ffb6b6; }
.sk-sync-list .ssr-err { font-size: 12px; margin-top: 2px; opacity: .85; }
.sk-sync-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sk-sync-actions button { flex: 1; min-width: 130px; }
.sk-sync-actions button[disabled] { opacity: .5; cursor: default; }

.sk-games { list-style: none; padding: 0; margin: 0; }
.sk-games li a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.08));
  color: var(--text, #e6e8eb);
  text-decoration: none;
  align-items: center;
}
.sk-game-when { font-family: var(--mono, ui-monospace, monospace); font-size: 13px; color: #9aa0a6; }
.sk-game-teams { font-weight: 600; }
.sk-game-status { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #2a2c30; }

/* Lineup confirm screen */
.sk-lineups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (min-width: 600px) {
  .sk-lineups { grid-template-columns: 1fr 1fr; }
}
.sk-lineup h3 { font-family: var(--display, 'Anton', sans-serif); font-size: 16px; margin: 0 0 8px 0; }
.sk-lineup ol { list-style: none; padding: 0; margin: 0 0 12px 0; }
.sk-lineup li {
  display: grid;
  grid-template-columns: 28px 1fr 40px;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.08));
  font-size: 14px;
}
.sk-lineup .sk-bo { color: var(--accent, #E8FF4F); font-weight: 700; }
.sk-lineup .sk-pos { color: #9aa0a6; font-family: var(--mono, ui-monospace, monospace); text-align: right; }
.sk-empty { color: #9aa0a6; font-style: italic; }

/* In-game scoreboard */
.sk-game { display: flex; flex-direction: column; gap: 12px; }
.sk-board {
  background: var(--card, #141414);
  border-radius: 10px;
  padding: 12px;
  border: 1px solid var(--line, rgba(255,255,255,.08));
}
.sk-board-teams {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 8px;
}
.sk-board-team {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
}
.sk-board-team-name { font-size: 12px; color: #9aa0a6; text-transform: uppercase; letter-spacing: 1px; }
.sk-board-team-score { font-family: var(--display, 'Anton', sans-serif); font-size: 40px; line-height: 1; }
.sk-board-state {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--line, rgba(255,255,255,.08));
}
.sk-half { font-family: var(--display, 'Anton', sans-serif); font-size: 18px; }
.sk-count { font-family: var(--mono, ui-monospace, monospace); font-size: 14px; }

.sk-bases {
  position: relative;
  width: 60px; height: 60px;
  display: grid;
  grid-template-columns: 20px 20px 20px;
  grid-template-rows: 20px 20px 20px;
  place-items: center;
}
.sk-base { width: 14px; height: 14px; transform: rotate(45deg); background: #2a2c30; border: 1px solid #444; }
.sk-base.occupied { background: var(--accent, #E8FF4F); border-color: var(--accent, #E8FF4F); }
.sk-base-2 { grid-column: 2; grid-row: 1; }
.sk-base-3 { grid-column: 1; grid-row: 2; }
.sk-base-1 { grid-column: 3; grid-row: 2; }
.sk-base-home { grid-column: 2; grid-row: 3; transform: none; border-radius: 2px 2px 6px 6px; }

.sk-now {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.sk-now-card {
  background: var(--card, #141414);
  border: 1px solid var(--line, rgba(255,255,255,.08));
  padding: 8px 12px;
  border-radius: 8px;
}
.sk-now-label { font-size: 11px; color: #9aa0a6; text-transform: uppercase; letter-spacing: 1px; }
.sk-now-name { font-weight: 600; font-size: 15px; margin-top: 2px; }

.sk-grid {
  display: grid;
  gap: 8px;
}
.sk-grid-pitch { grid-template-columns: repeat(3, 1fr); }
.sk-grid-ab    { grid-template-columns: repeat(3, 1fr); }
.sk-grid button {
  min-height: 56px;
  border: 1px solid var(--line, rgba(255,255,255,.08));
  background: #1a1c20;
  color: var(--text, #e6e8eb);
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.sk-pitch-ball   { background: #143524; border-color: #1f5a3b; }
.sk-pitch-strike { background: #4a2a14; border-color: #7a4720; }
.sk-pitch-foul   { background: #2a2c30; }
.sk-pitch-out    { background: #4a1a1a; border-color: #7a2a2a; }
.sk-pitch-inplay { background: var(--accent, #E8FF4F); color: #000; border-color: var(--accent, #E8FF4F); grid-column: span 3; }

.sk-row-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 8px;
}
.sk-row-actions button { min-height: 48px; }

.sk-runners {
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
  margin: 4px 0 12px; font-size: 13px; min-height: 18px;
}
.sk-runner { font-weight: 600; }
.sk-runner::before { content: '●'; margin-right: 5px; }
.sk-stat {
  display: inline-block; font-size: 10px; font-weight: 700; color: #0a0a0a;
  background: #cfd3d8; border-radius: 4px; padding: 1px 5px; margin-left: 4px;
  vertical-align: middle; font-family: var(--mono, ui-monospace, monospace);
}

.sk-panel {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--card, #141414);
  border-top: 1px solid var(--line, rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  z-index: 100;
}
/* Fixed header so the close button is always reachable; only the body scrolls */
.sk-panel-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line, rgba(255,255,255,.08));
}
.sk-panel-head h3 { margin: 0; font-family: var(--display, 'Anton', sans-serif); font-size: 16px; }
.sk-panel-close {
  background: transparent; border: none; color: var(--text, #e6e8eb);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 10px;
}
.sk-panel-body { flex: 1 1 auto; overflow: auto; padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.sk-panel-body > button {
  min-height: 48px;
  background: #1a1c20;
  color: var(--text, #e6e8eb);
  border: 1px solid var(--line, rgba(255,255,255,.08));
  border-radius: 8px;
  cursor: pointer;
}

/* Collapsible history tree: Manche → Visiteurs/Locaux → at-bats → pitches */
.hist-inning, .hist-half, .hist-ab { border: 0; }
.hist-inning > summary, .hist-half > summary, .hist-ab > summary {
  cursor: pointer; list-style: none; user-select: none; display: flex;
  align-items: center; gap: 8px; padding: 8px 4px; font-size: 13px;
}
.hist-inning > summary::-webkit-details-marker,
.hist-half > summary::-webkit-details-marker,
.hist-ab > summary::-webkit-details-marker { display: none; }
.hist-inning > summary::before,
.hist-half > summary::before,
.hist-ab > summary::before { content: '▸'; color: #9aa0a6; transition: transform .1s; }
.hist-inning[open] > summary::before,
.hist-half[open] > summary::before,
.hist-ab[open] > summary::before { content: '▾'; }
.hist-inning > summary {
  font-family: var(--display, 'Anton', sans-serif); letter-spacing: .03em;
  color: var(--accent, #E8FF4F); border-bottom: 1px solid var(--line, #2a2a2a);
}
.hist-half { margin-left: 10px; }
.hist-half > summary { color: #c9cdd2; font-weight: 600; }
.hist-ab { margin-left: 18px; }
.hist-ab > summary { border-bottom: 1px solid rgba(255,255,255,.04); }
.hist-ab-title { flex: 1; }
.hist-ab-meta { margin-left: 32px; padding: 2px 0 6px; font-size: 12px; color: var(--accent, #E8FF4F); font-family: var(--mono, ui-monospace, monospace); }
.hist-pitches { list-style: none; margin: 0 0 4px; padding: 0 0 0 32px; }
.hist-pitch { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 12px; color: #9aa0a6; }
.hist-event {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-left: 28px; padding: 6px 4px; font-size: 13px;
}
.hist-rollback {
  background: transparent; border: 1px solid var(--line, #2a2a2a); color: #9aa0a6;
  border-radius: 6px; font-size: 13px; cursor: pointer; padding: 2px 8px; min-height: auto;
}
.hist-rollback:hover, .hist-rollback:active { color: var(--accent, #E8FF4F); border-color: var(--accent, #E8FF4F); }
.hist-undone { opacity: .45; text-decoration: line-through; }
.hist-hint { font-size: 12px; text-align: center; margin: 8px 0 0; }

/* ─── Live board (/live/) ──────────────────────────────────────────────────── */

.live-body {
  background: var(--bg, #0a0a0a);
  color: var(--text, #e6e8eb);
  font-family: var(--ui, system-ui, sans-serif);
  margin: 0;
}
.live-header {
  padding: 24px;
  text-align: center;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.08));
}
.live-header h1 {
  font-family: var(--display, 'Anton', sans-serif);
  font-size: 36px;
  letter-spacing: 4px;
  margin: 0;
  color: var(--accent, #E8FF4F);
}
.live-meta { color: #9aa0a6; font-size: 13px; margin-top: 6px; }
.live-main { padding: 24px; max-width: 1100px; margin: 0 auto; }
.live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.live-card {
  background: var(--card, #141414);
  border: 1px solid var(--line, rgba(255,255,255,.08));
  border-radius: 12px;
  padding: 16px;
}
.live-card-po {
  color: #c9a227; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}
.live-card-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.live-card-team {
  font-weight: 600;
  padding: 4px 10px;
  border-left: 4px solid var(--team-color);
}
.live-card-score {
  font-family: var(--display, 'Anton', sans-serif);
  font-size: 30px;
}
.live-card-state {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  color: #9aa0a6;
}
.live-diamond { width: 40px; height: 40px; }
.live-base { fill: #2a2c30; stroke: #444; }
.live-base.occupied { fill: var(--accent, #E8FF4F); stroke: var(--accent, #E8FF4F); }
.live-footer { text-align: center; padding: 24px; color: #9aa0a6; font-size: 13px; }
.live-footer a { color: var(--accent, #E8FF4F); }
.live-empty { color: #9aa0a6; text-align: center; padding: 40px 0; }
.live-loading { color: #9aa0a6; text-align: center; }

/* Live widget on / */
.live-widget {
  background: var(--card, #141414);
  border-top: 1px solid var(--accent, #E8FF4F);
  border-bottom: 1px solid var(--accent, #E8FF4F);
  padding: 12px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}
.live-widget-title {
  font-family: var(--display, 'Anton', sans-serif);
  color: var(--accent, #E8FF4F);
  letter-spacing: 2px;
}
.live-widget-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; overflow-x: auto; }
.live-widget-list li { display: flex; gap: 8px; font-size: 14px; align-items: center; white-space: nowrap; }
.live-widget-team { color: var(--text, #e6e8eb); }
.live-widget-score { font-family: var(--display, 'Anton', sans-serif); font-size: 18px; color: var(--accent, #E8FF4F); }
.live-widget-half { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: #9aa0a6; padding: 2px 6px; background: rgba(255,255,255,.05); border-radius: 4px; }
.live-widget-link { font-size: 13px; color: var(--accent, #E8FF4F); text-decoration: none; }

/* ─── League portal (/league/) ─────────────────────────────────────────────── */

.lg-body {
  background: var(--bg, #0a0a0a);
  color: var(--text, #e6e8eb);
  font-family: var(--ui, system-ui, sans-serif);
  margin: 0;
}
.lg-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.08));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lg-header-top { display: flex; align-items: center; gap: 12px; }
.lg-header h1 { font-family: var(--display, 'Anton', sans-serif); margin: 0; }
.lg-controls { display: flex; align-items: center; gap: 12px; }
.lg-controls select {
  background: #0a0c10;
  color: var(--text, #e6e8eb);
  border: 1px solid var(--line, rgba(255,255,255,.08));
  padding: 6px 10px;
  border-radius: 6px;
}
/* Hamburger toggle — hidden on desktop, shown in the mobile media query below. */
.lg-nav-toggle {
  display: none;
  background: #1a1c20;
  color: var(--text, #e6e8eb);
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.lg-nav {
  display: flex;
  gap: 4px;
  padding: 8px 24px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.08));
}
.lg-nav a {
  padding: 6px 14px;
  border-radius: 6px;
  color: var(--text, #e6e8eb);
  text-decoration: none;
  font-size: 14px;
}
.lg-nav a.active { background: var(--accent, #E8FF4F); color: #000; }

/* Mobile / vertical layout — stack the header, fit the controls, collapse the
   nav behind the hamburger toggle. */
@media (max-width: 640px) {
  .lg-header { flex-direction: column; align-items: stretch; padding: 14px 16px; gap: 10px; }
  .lg-header-top { justify-content: space-between; }
  .lg-header h1 { font-size: 22px; }
  .lg-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .lg-controls { flex-wrap: wrap; gap: 8px; }
  .lg-controls > label { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; }
  .lg-controls select { flex: 1 1 auto; min-width: 0; }
  .lg-account { flex: 1 1 100%; justify-content: flex-start; }
  .lg-nav { display: none; flex-direction: column; gap: 2px; padding: 6px 12px; }
  .lg-nav.lg-nav-open { display: flex; }
  .lg-nav a { padding: 10px 12px; font-size: 15px; }
  .lg-main { padding: 16px 12px; }
}
.lg-main { padding: 24px; max-width: 1100px; margin: 0 auto; }
/* Scroll wrapper (auto-injected around every .lg-table in league.js). It owns the
   horizontal scroll so the table itself can stay display:table and fill the width
   on desktop; on narrow screens the columns scroll inside this box while the first
   column(s) stay frozen (position:sticky below). */
.lg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; }
.lg-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 12px 0 4px; }
.lg-pager[hidden] { display: none; }
.lg-pager-info { color: #9aa0a6; font-size: 13px; font-family: var(--mono, ui-monospace, monospace); }
.lg-cal-btn[disabled] { opacity: .4; cursor: default; }
.lg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.lg-table th, .lg-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.08));
  text-align: left;
}
.lg-table th { background: rgba(255,255,255,.04); color: #9aa0a6; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
/* Frozen first column — keeps the row label (team / player) visible while the
   stats scroll horizontally. Solid backgrounds so scrolled cells don't show
   through; the header cell keeps its own (slightly lighter) bg. */
.lg-table th:first-child, .lg-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card, #141414);
  box-shadow: 1px 0 0 var(--line, rgba(255,255,255,.08));
}
.lg-table th:first-child { background: #1c1d1f; z-index: 2; }
/* Two-key tables (rank/# + name): freeze BOTH columns. The first column gets a
   fixed width so the second column's sticky offset is deterministic. */
.lg-freeze2 th:first-child, .lg-freeze2 td:first-child { width: 2.6rem; min-width: 2.6rem; box-shadow: none; }
.lg-freeze2 th:nth-child(2), .lg-freeze2 td:nth-child(2) {
  position: sticky;
  left: 2.6rem;
  z-index: 1;
  background: var(--card, #141414);
  box-shadow: 1px 0 0 var(--line, rgba(255,255,255,.08));
}
.lg-freeze2 th:nth-child(2) { background: #1c1d1f; z-index: 2; }
.lg-table a { color: var(--accent, #E8FF4F); }
/* Sortable column headers — click to order asc/desc (delegated sorter in league.js) */
.lg-table:not([data-nosort]) thead th { cursor: pointer; user-select: none; -webkit-user-select: none; white-space: nowrap; }
.lg-table:not([data-nosort]) thead th[data-nosort] { cursor: default; }
.lg-table:not([data-nosort]) thead th:not([data-nosort]):hover { color: var(--text, #e6e8eb); background: rgba(255,255,255,.08); }
.lg-table thead th[aria-sort] { color: var(--accent, #E8FF4F); }
.lg-table thead th[aria-sort]::after { margin-left: 5px; font-size: 9px; opacity: .9; }
.lg-table thead th[aria-sort="ascending"]::after { content: '▲'; }
.lg-table thead th[aria-sort="descending"]::after { content: '▼'; }
.lg-cat-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.lg-cat-tabs a {
  padding: 4px 10px;
  border: 1px solid var(--line, rgba(255,255,255,.08));
  border-radius: 4px;
  color: var(--text, #e6e8eb);
  text-decoration: none;
  font-size: 12px;
}
.lg-cat-tabs a.active { background: var(--accent, #E8FF4F); color: #000; border-color: var(--accent, #E8FF4F); }
.lg-footer { text-align: center; padding: 24px; color: #9aa0a6; font-size: 13px; }
.lg-footer a { color: var(--accent, #E8FF4F); }

/* Standings streak */
.lg-streak-w { color: #6ee7a0; font-weight: 700; }
.lg-streak-l { color: #ff8a8a; font-weight: 700; }
.lg-streak-t { color: #9aa0a6; }

/* Leaders — batters/pitchers toggle + filter bar */
.lg-toggle { display: inline-flex; gap: 0; margin: 4px 0 12px; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 8px; overflow: hidden; }
.lg-toggle a { padding: 8px 18px; color: var(--text, #e6e8eb); text-decoration: none; font-size: 14px; font-weight: 600; }
.lg-toggle a + a { border-left: 1px solid var(--line, rgba(255,255,255,.12)); }
.lg-toggle a.active { background: var(--accent, #E8FF4F); color: #000; }
.lg-filters { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 14px; }
.lg-filter { display: flex; flex-direction: column; gap: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #9aa0a6; }
.lg-filter select, .lg-filter input {
  background: #0a0c10; color: var(--text, #e6e8eb);
  border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 6px; padding: 7px 10px; font: inherit; font-size: 14px;
}
.lg-filter input { width: 90px; }

/* Calendar — week-paged window with next-game highlight */
.lg-cal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.lg-cal-head h2 { margin: 0; }
.lg-cal-nav { display: flex; align-items: center; gap: 10px; }
.lg-cal-btn { background: #1a1c20; color: var(--text, #e6e8eb); border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.lg-cal-btn:hover { border-color: var(--accent, #E8FF4F); color: var(--accent, #E8FF4F); }
.lg-cal-range { font-family: var(--mono, ui-monospace, monospace); font-size: 13px; color: #9aa0a6; min-width: 120px; text-align: center; }
.lg-cal-week { margin-top: 18px; }
.lg-cal-week-h { font-family: var(--display, 'Anton', sans-serif); letter-spacing: .04em; font-size: 16px; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line, rgba(255,255,255,.1)); color: var(--accent, #E8FF4F); }
.lg-cal-noweek { margin: 4px 0 8px; font-style: italic; }
.lg-cal-day { margin: 10px 0; }
.lg-cal-day-h { font-size: 12px; text-transform: capitalize; color: #9aa0a6; margin-bottom: 4px; }
.lg-cal-game { display: block; padding: 10px 14px; margin: 6px 0; background: rgba(255,255,255,.03); border: 1px solid transparent; border-radius: 8px; text-decoration: none; color: inherit; }
a.lg-cal-game:hover { background: rgba(255,255,255,.06); }
.lg-cal-game--next { border-color: var(--accent, #E8FF4F); background: rgba(232,255,79,.06); }
.lg-cal-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.lg-cal-side { font-weight: 600; }
.lg-cal-away { text-align: right; }
.lg-cal-home { text-align: left; }
.lg-cal-mid { min-width: 72px; text-align: center; font-size: 16px; }
.lg-cal-clock { color: #cfd3d7; font-family: var(--mono, ui-monospace, monospace); }
.lg-cal-live { color: #ff6b6b; font-weight: 700; font-size: 13px; }
.lg-cal-meta { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; font-size: 12px; color: #9aa0a6; }
.lg-cal-tag { background: var(--accent, #E8FF4F); color: #000; font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.lg-cal-tag--po { background: #c9a227; }
.lg-cal-postponed { margin-top: 4px; text-align: center; font-size: 12px; font-weight: 600; color: #d9a441; }
td .lg-cal-postponed { text-align: left; margin-top: 2px; font-weight: 500; }

/* Playoffs — rounds of series */
.lg-po-rounds { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.lg-po-round { flex: 1 1 260px; max-width: 360px; }
.lg-po-round h3 { margin: 0 0 10px; }
.lg-po-card {
  background: var(--card, #141414);
  border: 1px solid var(--line, rgba(255,255,255,.08));
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.lg-po-card--final { border-color: #c9a227; }
.lg-po-card--bye { border-style: dashed; opacity: .9; }
.lg-po-team--tbd { opacity: .6; font-style: italic; }
.lg-po-team { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.lg-po-team a { text-decoration: none; font-weight: 600; }
.lg-po-team .lg-po-w { margin-left: auto; font-family: var(--mono, ui-monospace, monospace); font-weight: 700; font-size: 16px; color: #9aa0a6; }
.lg-po-team--win .lg-po-w { color: #6ee7a0; }
.lg-po-meta { color: #9aa0a6; font-size: 12px; margin: 6px 0 4px; }
.lg-po-games { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lg-po-chip {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line, rgba(255,255,255,.1));
  color: var(--text, #e6e8eb); text-decoration: none; font-family: var(--mono, ui-monospace, monospace);
}
a.lg-po-chip:hover { background: rgba(255,255,255,.12); }
.lg-po-chip--live { color: #ff6b6b; border-color: rgba(255,107,107,.4); }
.lg-po-chip--sched { color: #9aa0a6; }
.lg-po-chip--off { color: #9aa0a6; text-decoration: line-through; }
.lg-po-champion {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, rgba(201,162,39,.16), rgba(201,162,39,.04));
  border: 1px solid #c9a227; border-radius: 12px;
  padding: 14px 18px; margin-bottom: 20px;
}
.lg-po-champion a { font-size: 20px; font-weight: 800; text-decoration: none; }
.lg-po-champ-label { color: #c9a227; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.lg-mcal-chip.is-po { border-color: rgba(201,162,39,.55); }

/* CSV export / print buttons + header rows that host them */
.lg-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lg-head-row h2 { margin: 0; }
.lg-export {
  background: transparent; color: var(--text, #e6e8eb);
  border: 1px solid var(--line, rgba(255,255,255,.18)); border-radius: 6px;
  padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.lg-export:hover { border-color: var(--accent, #E8FF4F); color: var(--accent, #E8FF4F); }

/* Print — white background, hide chrome; box scores and tables print clean */
@media print {
  body.lg-body { background: #fff !important; color: #000 !important; }
  .lg-header, .lg-nav, .lg-footer, .lg-export, .lg-pager, .lg-cal-controls,
  .lg-filters, .lg-toggle, .lg-cat-tabs { display: none !important; }
  .lg-main { padding: 0 !important; max-width: none !important; }
  .lg-table, .lg-table th, .lg-table td {
    color: #000 !important; background: #fff !important;
    border-color: #999 !important;
  }
  .lg-table a, .lg-main a { color: #000 !important; text-decoration: none !important; }
  .lg-muted { color: #444 !important; }
  .lg-avatar, .lg-tlogo { display: none !important; }
}

/* Calendar view controls (List / Month toggle) */
.lg-cal-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lg-cal-toggle { display: inline-flex; background: #1a1c20; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 8px; padding: 2px; }
.lg-cal-tgl { background: transparent; color: #9aa0a6; border: 0; border-radius: 6px; padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.lg-cal-tgl:hover { color: var(--text, #e6e8eb); }
.lg-cal-tgl.is-active { background: var(--accent, #E8FF4F); color: #000; font-weight: 700; }

/* Month grid */
.lg-mcal { margin-top: 16px; }
.lg-mcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.lg-mcal-dows { margin-bottom: 4px; }
.lg-mcal-dow { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #9aa0a6; text-align: center; padding: 2px 0; }
.lg-mcal-cell { min-height: 84px; background: rgba(255,255,255,.03); border: 1px solid var(--line, rgba(255,255,255,.08)); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.lg-mcal-cell.is-out { background: transparent; opacity: .4; }
.lg-mcal-cell.is-today { border-color: var(--accent, #E8FF4F); }
.lg-mcal-num { font-size: 12px; color: #9aa0a6; font-family: var(--mono, ui-monospace, monospace); }
.lg-mcal-cell.is-today .lg-mcal-num { color: var(--accent, #E8FF4F); font-weight: 700; }
.lg-mcal-chip { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 3px 4px; border-radius: 5px; background: rgba(255,255,255,.05); border: 1px solid transparent; font-size: 11px; line-height: 1.2; text-decoration: none; color: inherit; white-space: nowrap; }
a.lg-mcal-chip:hover { background: rgba(255,255,255,.1); }
.lg-mcal-chip.is-next { border-color: var(--accent, #E8FF4F); background: rgba(232,255,79,.08); }
.lg-mcal-chip.is-live .lg-mcal-s { color: #ff6b6b; }
.lg-mcal-t { font-weight: 700; }
.lg-mcal-s { color: #cfd3d7; font-family: var(--mono, ui-monospace, monospace); font-size: 10px; }
.lg-mcal-chip.is-done .lg-mcal-s { color: var(--text, #e6e8eb); font-weight: 700; }
@media (max-width: 640px) {
  .lg-mcal-grid { gap: 2px; }
  .lg-mcal-cell { min-height: 60px; padding: 2px; }
  .lg-mcal-chip { gap: 2px; padding: 2px; font-size: 9px; }
  .lg-mcal-s { font-size: 8px; }
  .lg-mcal-dow { font-size: 9px; }
}

/* Account widget (header) + single login + captain management */
.lg-account { display: inline-flex; align-items: center; gap: 8px; }
.lg-acct-login, .lg-acct-name { color: var(--accent, #E8FF4F); text-decoration: none; font-size: 14px; font-weight: 600; }
.lg-acct-name { color: var(--text, #e6e8eb); }
.lg-acct-logout { background: transparent; border: 1px solid var(--line, rgba(255,255,255,.12)); color: #9aa0a6; border-radius: 6px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.lg-acct-logout:hover { color: var(--accent, #E8FF4F); border-color: var(--accent, #E8FF4F); }
.lg-login { max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.lg-login label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #9aa0a6; }
.lg-login input { background: #0a0c10; color: var(--text, #e6e8eb); border: 1px solid var(--line, rgba(255,255,255,.12)); padding: 10px 12px; border-radius: 6px; font: inherit; }
.lg-manage-list { list-style: none; padding: 0; margin: 0; }
.lg-manage-game { width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line, rgba(255,255,255,.08)); border-radius: 8px; padding: 12px 14px; margin: 6px 0; cursor: pointer; color: inherit; }
.lg-manage-game:hover { background: rgba(255,255,255,.06); border-color: var(--accent, #E8FF4F); }
.lg-manage-when { color: #9aa0a6; font-size: 12px; }
.lg-manage-teams { font-weight: 600; grid-column: 1; }
.lg-manage-status { color: var(--accent, #E8FF4F); font-size: 12px; align-self: center; grid-column: 2; justify-self: end; white-space: nowrap; }
.lg-manage-status.lg-flag-ok { color: #6ee7a0; }
.lg-manage-status.lg-flag-warn { color: #f6c454; }
.lg-manage-status.lg-flag-bad { color: #ff8a8a; }
.lg-manage-lock { grid-column: 2; justify-self: end; font-size: 11px; color: #c9a227; white-space: nowrap; }
/* Profile role action cards (captain / scorekeeper launchpad) */
.lg-acct-card { border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 10px; padding: 14px 16px; margin: 14px 0; background: rgba(255,255,255,.02); }
.lg-acct-card h3 { margin: 0 0 4px; font-family: var(--display, 'Anton', sans-serif); }
.lg-acct-card p { margin: 0 0 10px; }
.lg-acct-links { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-acct-btn { display: inline-block; text-decoration: none; text-align: center; }
.lg-role-group { margin: 10px 0; }
.lg-role-group > strong { display: block; margin-bottom: 6px; }
.lg-role-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lg-role-row select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line, rgba(255,255,255,.14)); background: rgba(255,255,255,.04); color: inherit; }
.lg-role-have { color: #6ad08a; margin: 0; }
.lg-role-pending { margin: 6px 0 0; padding-left: 18px; }
.lg-pref-row { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.lg-pref-row input { width: 18px; height: 18px; }
/* Existing-player picker (Effectif card) — filterable, scrollable checklist */
.lg-eff-pick-filter { width: 100%; box-sizing: border-box; margin-bottom: 6px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line, rgba(255,255,255,.14)); background: #0a0c10; color: inherit; font: inherit; font-size: 14px; }
.lg-eff-pick { max-height: 240px; overflow-y: auto; border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 8px; padding: 4px; margin-bottom: 10px; }
.lg-eff-pick-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.lg-eff-pick-row:hover { background: rgba(255,255,255,.05); }
.lg-eff-pick-row input { margin: 0; }
.lg-roster-links { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 18px; }
.lg-roster-link { color: var(--accent, #E8FF4F); text-decoration: none; font-weight: 600; }
.lg-inv-email { background: #0a0c10; color: var(--text, #e6e8eb); border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; width: 100%; max-width: 240px; }
.lg-inv-email:disabled { opacity: .5; }

/* Player photos (avatars) */
.lg-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; object-fit: cover; vertical-align: middle; background: #2a2c30; flex: 0 0 auto; }
.lg-avatar-ini { color: #0a0a0a; font-weight: 700; font-family: var(--ui, system-ui, sans-serif); }
.lg-avatar-sm { width: 26px; height: 26px; font-size: 11px; margin-right: 8px; }
.lg-avatar-md { width: 44px; height: 44px; font-size: 16px; }
.lg-avatar-lg { width: 72px; height: 72px; font-size: 26px; }
/* Team / franchise logos (square, rounded) */
.lg-tlogo { display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; object-fit: cover; vertical-align: middle; background: #2a2c30; flex: 0 0 auto; }
.lg-tlogo-ini { color: #0a0a0a; font-weight: 700; font-family: var(--ui, system-ui, sans-serif); }
.lg-tlogo-xs { width: 18px; height: 18px; font-size: 9px; border-radius: 4px; }
.lg-tlogo-sm { width: 24px; height: 24px; font-size: 11px; margin-right: 8px; }
.lg-tlogo-md { width: 40px; height: 40px; font-size: 16px; }
.lg-tlogo-lg { width: 64px; height: 64px; font-size: 24px; border-radius: 10px; }
.lg-team-head { display: flex; align-items: center; gap: 12px; }
.lg-brand-card { background: rgba(255,255,255,.03); border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 10px; padding: 14px; margin: 14px 0; }
.lg-brand-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.lg-brand-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #9aa0a6; }
.lg-brand-row input[type="color"] { width: 48px; height: 34px; padding: 2px; }
.lg-asst-list { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.lg-asst-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.lg-asst-list .lg-asst-rm { margin-left: auto; }
.lg-ac-wrap { position: relative; max-width: 360px; }
.lg-ac-wrap input { width: 100%; box-sizing: border-box; }
.lg-ac-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: #16181c; border: 1px solid var(--line, rgba(255,255,255,.15)); border-radius: 8px; margin-top: 2px; max-height: 240px; overflow: auto; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.lg-ac-item { padding: 8px 12px; cursor: pointer; font-size: 14px; }
.lg-ac-item[data-id]:hover { background: rgba(255,255,255,.07); }
.lg-name-cell { display: inline-flex; align-items: center; }
.lg-player-head { display: flex; align-items: center; gap: 12px; }
.lg-profile-head { display: flex; align-items: center; gap: 16px; margin: 8px 0 16px; }
.lg-profile-id { display: flex; flex-direction: column; gap: 2px; }
.lg-photo-upload { color: var(--accent, #E8FF4F); cursor: pointer; font-size: 13px; margin-top: 4px; }
.lg-photo-upload:hover { text-decoration: underline; }

/* ─── Shared lineup editor (captain page + scorekeeper PWA) ─────────────────── */

.le-editor { font-size: 14px; }
.le-team { font-family: var(--display, 'Anton', sans-serif); font-size: 16px; margin: 0 0 10px 0; }
.le-rows { list-style: none; padding: 0; margin: 0 0 10px 0; display: flex; flex-direction: column; gap: 6px; }
.le-row {
  display: grid; grid-template-columns: 36px 1fr 82px 30px; gap: 8px; align-items: center;
}
.le-row .le-bo { color: var(--accent, #E8FF4F); font-weight: 700; text-align: center; }
.le-row select {
  width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--line, #2a2a2a);
  background: var(--bg, #0a0a0a); color: inherit; font-size: 13px;
}
.le-remove {
  background: transparent; border: 1px solid var(--line, #2a2a2a); color: #ff9b9b;
  border-radius: 6px; cursor: pointer; padding: 6px 0;
}
/* Drag handle (the batting-order cell) — reorder by mouse or touch */
.le-bo.le-drag {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.le-bo.le-drag:active { cursor: grabbing; }
.le-grip { color: #5a5a5a; font-size: 12px; line-height: 1; }
.le-row.le-dragging { opacity: 0.6; outline: 2px dashed var(--accent, #E8FF4F); border-radius: 6px; }
/* Duplicate player — make the offending select obvious */
.le-player.le-dup {
  border-color: #ff5a5a !important; background: #3a1414; color: #ffd6d6;
}
.le-row-dup .le-bo { color: #ff8a8a; }
.le-actions { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.le-actions button, .le-np-actions button {
  background: var(--card, #141414); border: 1px solid var(--line, #2a2a2a); color: inherit;
  border-radius: 6px; padding: 8px 12px; cursor: pointer; font-size: 13px;
}
.le-pitcher-label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 12px; color: #9aa0a6; }
.le-pitcher { padding: 8px; border-radius: 6px; border: 1px solid var(--line, #2a2a2a); background: var(--bg, #0a0a0a); color: inherit; }
.le-newplayer, .le-external { border: 1px solid var(--line, #2a2a2a); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.le-ext-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #9aa0a6; }
.le-ext-select { padding: 8px; border-radius: 6px; border: 1px solid var(--line, #2a2a2a); background: var(--bg, #0a0a0a); color: inherit; }
.le-ext-msg { margin-top: 10px; padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.le-ext-msg.ok { background: #14351a; color: #b6ffc8; }
.le-ext-msg.err { background: #4a1a1a; color: #ffb6b6; }
.le-np-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.le-np-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #9aa0a6; }
.le-np-grid input, .le-np-grid select { padding: 8px; border-radius: 6px; border: 1px solid var(--line, #2a2a2a); background: var(--bg, #0a0a0a); color: inherit; }
.le-np-actions { display: flex; gap: 8px; margin-top: 10px; }
.le-save { width: 100%; margin-top: 4px; padding: 12px; border-radius: 8px; border: none; cursor: pointer; font-weight: 700; }
.le-save.primary { background: var(--accent, #E8FF4F); color: #000; }
.le-msg { margin-top: 10px; padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.le-msg.ok { background: #14351a; color: #b6ffc8; }
.le-msg.err { background: #4a1a1a; color: #ffb6b6; }

.sk-lineup-tag {
  font-family: var(--display, 'Anton', sans-serif); font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase; color: #9aa0a6; margin-bottom: 8px;
}

/* ─── Captain portal ────────────────────────────────────────────────────────── */

.cap-main { max-width: 760px; margin: 0 auto; padding: 16px; }
.cap-card { background: var(--card, #141414); border: 1px solid var(--line, #2a2a2a); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.cap-card h2 { font-family: var(--display, 'Anton', sans-serif); margin: 0 0 12px 0; }
.cap-card label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 12px; color: #9aa0a6; }
.cap-card input { padding: 10px; border-radius: 6px; border: 1px solid var(--line, #2a2a2a); background: var(--bg, #0a0a0a); color: inherit; }
.cap-card .primary { background: var(--accent, #E8FF4F); color: #000; border: none; border-radius: 8px; padding: 12px 16px; cursor: pointer; font-weight: 700; }
.cap-games { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cap-game-btn {
  width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  background: var(--bg, #0a0a0a); border: 1px solid var(--line, #2a2a2a); border-radius: 8px;
  padding: 12px 14px; cursor: pointer; color: inherit;
}
.cap-game-when { color: #9aa0a6; font-size: 12px; }
.cap-game-teams { font-weight: 600; grid-column: 1; }
.cap-game-status { color: var(--accent, #E8FF4F); font-size: 12px; align-self: center; }
.cap-back { background: transparent; border: none; color: var(--accent, #E8FF4F); cursor: pointer; padding: 0 0 12px 0; font-size: 14px; }
.cap-logout { background: transparent; border: 1px solid var(--line, #2a2a2a); color: inherit; border-radius: 6px; padding: 6px 12px; cursor: pointer; }

/* ─── Play resolver (place every runner) ───────────────────────────────────── */

.sk-play { margin: 12px 0; }
.pl-resolver { background: var(--card, #141414); border: 1px solid var(--line, #2a2a2a); border-radius: 12px; padding: 14px; }
.pl-title { font-family: var(--display, 'Anton', sans-serif); font-size: 15px; margin: 0 0 12px 0; }
.pl-diamond { position: relative; width: 116px; height: 116px; margin: 0 auto 16px; }
.pl-bag {
  position: absolute; width: 22px; height: 22px; transform: rotate(45deg);
  border: 2px solid var(--line, #2a2a2a); background: var(--bg, #0a0a0a); border-radius: 3px;
}
.pl-bag-2 { top: 0; left: 50%; margin-left: -11px; }
.pl-bag-3 { top: 50%; left: 0; margin-top: -11px; }
.pl-bag-1 { top: 50%; right: 0; margin-top: -11px; }
.pl-bag-home { bottom: 0; left: 50%; margin-left: -11px; border-radius: 3px 3px 8px 8px; }
.pl-hr { background: #241733; }
.pl-chip.pl-hr.active { background: #C77DFF; color: #000; border-color: #C77DFF; }
.pl-rows { list-style: none; padding: 0; margin: 0 0 12px 0; display: flex; flex-direction: column; gap: 12px; }
.pl-row { border-bottom: 1px solid var(--line, #2a2a2a); padding-bottom: 10px; }
.pl-who { display: block; font-size: 13px; color: #9aa0a6; margin-bottom: 6px; }
.pl-chips, .pl-sub { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-sub { margin-top: 6px; align-items: center; }
.pl-sub-label { font-size: 11px; color: #9aa0a6; text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.sk-finish-reasons { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sk-finish-reasons button { width: 100%; text-align: left; }

/* Lineup order panel (#3) */
.sk-lineup-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sk-lineup-nav button { min-width: 44px; }
.sk-lineup-team { flex: 1; text-align: center; font-weight: 700; font-size: 15px; }
.sk-lineup-order { list-style: none; margin: 0; padding: 0; }
.sk-lineup-order li { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); }
.sk-lineup-order .skl-ord { width: 1.4em; text-align: right; color: #9aa0a6; font-variant-numeric: tabular-nums; }
.sk-lineup-order .skl-pos { width: 2.4em; color: #9aa0a6; font-size: 12px; }
.sk-lineup-order .skl-name { flex: 1; }
.sk-lineup-order .skl-tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.1); color: #cfd3d7; }
.sk-lineup-order li.is-current { background: rgba(232,255,79,.12); border-radius: 8px; }
.sk-lineup-order li.is-current .skl-name { color: var(--accent, #E8FF4F); font-weight: 700; }
.sk-lineup-order li.is-current .skl-tag { background: var(--accent, #E8FF4F); color: #000; font-weight: 700; }
.sk-lineup-order li.is-ondeck .skl-tag { background: #3a4020; color: var(--accent, #E8FF4F); }

/* Scorekeeper lineup-editor lock/status header */
.sk-le-status { margin: 8px 0 12px; }
.sk-le-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; }
.sk-le-team { font-weight: 700; min-width: 8em; }
.sk-le-flag { font-size: 13px; color: #cfd3d7; }
.sk-le-lock { font-size: 12px; color: #f0c64a; }
.sk-le-control { color: #6ee7a0; font-weight: 600; margin: 6px 0 0; }
/* Games-list per-team flags + lock badge */
.sk-game-flags { letter-spacing: 1px; margin-left: 6px; }
.sk-game-lock { font-size: 11px; color: #f0c64a; margin-left: 6px; }
.pl-chip {
  flex: 1 1 auto; min-width: 56px; padding: 10px 8px; border-radius: 8px;
  border: 1px solid var(--line, #2a2a2a); background: var(--bg, #0a0a0a); color: inherit;
  font-size: 13px; cursor: pointer;
}
.pl-chip.active { background: var(--accent, #E8FF4F); color: #000; border-color: var(--accent, #E8FF4F); font-weight: 700; }
.pl-chip.pl-out { color: #ff9b9b; }
.pl-chip.pl-out.active { background: #b3261e; color: #fff; border-color: #b3261e; }
.pl-mini {
  padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line, #2a2a2a);
  background: var(--bg, #0a0a0a); color: #9aa0a6; font-size: 12px; cursor: pointer;
}
.pl-mini.active { background: #2a2f1a; color: var(--accent, #E8FF4F); border-color: var(--accent, #E8FF4F); }
.pl-summary { font-size: 13px; color: var(--accent, #E8FF4F); min-height: 18px; margin-bottom: 12px; font-family: var(--mono, ui-monospace, monospace); }
.pl-actions { display: flex; gap: 8px; }
.pl-actions button { flex: 1; }

/* ─── Substitution / position-change view (ui-sub.js) ──────────────────────── */
.sk-sub-teams { display: flex; gap: 8px; margin-bottom: 10px; }
.sk-sub-team { flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line, #2a2a2a); background: rgba(255,255,255,.04); color: inherit; font: inherit; cursor: pointer; }
.sk-sub-team.active { background: var(--accent, #E8FF4F); color: #000; font-weight: 700; border-color: var(--accent, #E8FF4F); }
.sk-sub-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sk-sub-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 6px; border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); }
.sk-sub-who { font-size: 14px; }
.sk-sub-who strong { color: #9aa0a6; font-weight: 600; margin: 0 2px; }
.sk-sub-badge { background: rgba(255,255,255,.12); color: #cfd3d7; font-size: 10px; padding: 1px 5px; border-radius: 4px; letter-spacing: .04em; }
.sk-sub-acts { display: flex; gap: 6px; }
.sk-sub-btn { padding: 5px 10px; border-radius: 7px; border: 1px solid var(--line, #2a2a2a); background: rgba(255,255,255,.04); color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.sk-sub-btn.active { border-color: var(--accent, #E8FF4F); color: var(--accent, #E8FF4F); }
.sk-sub-picker { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sk-sub-pick, .sk-sub-pos { padding: 6px 10px; border-radius: 7px; border: 1px solid var(--line, #2a2a2a); background: #0a0c10; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.sk-sub-pos.active { background: var(--accent, #E8FF4F); color: #000; border-color: var(--accent, #E8FF4F); }
.sk-sub-pick:hover, .sk-sub-pos:hover { border-color: var(--accent, #E8FF4F); }

/* ─── Collapsible "Actions supplémentaires" groups ─────────────────────────── */

.sk-group { border: 1px solid var(--line, #2a2a2a); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.sk-group > summary {
  cursor: pointer; padding: 10px 12px; font-size: 13px; font-weight: 600;
  list-style: none; background: var(--bg, #0a0a0a); user-select: none;
}
.sk-group > summary::-webkit-details-marker { display: none; }
.sk-group > summary::after { content: '▸'; float: right; color: #9aa0a6; }
.sk-group[open] > summary::after { content: '▾'; }
.sk-group > button { display: block; width: 100%; text-align: left; margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--line, #2a2a2a); }
.sk-field { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; font-size: 13px; font-weight: 600; border-top: 1px solid var(--line, #2a2a2a); }
.sk-field select { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line, #2a2a2a); background: var(--bg, #0a0a0a); color: inherit; }
.sk-group > .sk-muted { padding: 0 12px 10px; margin: 6px 0 0; }

.hist-list { list-style: none; padding: 0; margin: 0; }

/* ─── Print stylesheet (paper scorecard) ───────────────────────────────────── */

@media print {
  body { background: #fff; color: #000; }
  .noprint { display: none !important; }
}