:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --muted:#6b7280; /* gray-500 */
  --text:#111827;  /* gray-900 */
  --accent:#2563eb; /* blue-600 */
  --accent-2:#059669; /* emerald-600 */
  --danger:#dc2626; /* red-600 */
  --warn:#b45309;   /* amber-700 */
  --border:#e5e7eb; /* gray-200 */
  --focus:#2563eb;  /* blue-600 */
}
/* Ensure hidden attribute truly hides on all browsers */
[hidden]{ display:none !important }
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:
    radial-gradient(1200px 820px at 12% 18%, rgba(99,102,241,0.12) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(900px 700px at 78% 10%, rgba(14,165,233,0.10) 0%, rgba(255,255,255,0) 52%),
    radial-gradient(720px 520px at 70% 80%, rgba(16,185,129,0.08) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #fbfbfd 0%, #f8f9fc 48%, #fdf8ff 100%);
  background-attachment: fixed;
  color:var(--text);
  display:flex; flex-direction:column; min-height:100svh;
  overflow-x:hidden;
}
header{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:12px; padding:18px 20px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
  backdrop-filter: blur(6px);
  position:sticky; top:0; z-index:2;
}
header h1{margin:0; font-size:20px; letter-spacing:.2px}
.btn{
  appearance:none; border:1px solid #d1d5db; background:#ffffff; color:#111827;
  padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600; letter-spacing:.2px;
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
  min-height:44px; font-size:16px; line-height:1.2;
  touch-action: manipulation;
}
.btn:hover{border-color:#9ca3af; background:#f9fafb}
.btn[disabled]{opacity:.6; cursor:not-allowed}
.btn.primary{background:linear-gradient(180deg, #3b82f6, #2563eb); border-color:#2563eb; color:#fff}
.btn.danger{background:linear-gradient(180deg, #ef4444, #dc2626); border-color:#b91c1c; color:#fff}
.btn.secondary{background:#f3f4f6}
/* Active styling for All-Time header button to match tab active */
#btnAllTimeHeader.active{ border-color:#2563eb; color:#0b3aa8; box-shadow: inset 0 0 0 1px #2563eb }

main{padding:18px 20px; max-width:1100px; margin:0 auto; flex:1; display:flex; flex-direction:column; min-height:0}
/* Ensure consistent top spacing across all tabs */
main > section{ margin-top: 8px }
#playersSection{ display:flex; flex-direction:column; min-height:0 }

/* Tabs */
.tabs{
  position:sticky; top:var(--header-height, 62px); z-index:2; /* under header */
  display:flex; gap:8px; padding:8px 12px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));
  backdrop-filter: blur(6px);
}
.tab{
  flex:1; min-height:44px; padding:10px 12px; border-radius:999px; border:1px solid var(--border);
  background:#fff; color:#111827; font-weight:600; cursor:pointer;
}
.tab.active{ border-color:#2563eb; color:#0b3aa8; box-shadow: inset 0 0 0 1px #2563eb }
.tab[disabled]{ opacity:.5; cursor:not-allowed }

.picker{
  display:grid; grid-template-columns:1fr; gap:16px; align-items:start;
}
@media (min-width: 900px){
  .picker{grid-template-columns:1fr 1fr}
}
#playersSection{
  display:flex;
  flex-direction:column;
  min-height:0;
}
#playersSection .panel{
  flex:1 1 auto;
}
#playersSection .lists{
  max-height:unset;
  flex:1 1 auto;
}
#playersSection .actions{
  margin-top:auto;
  padding-top:12px;
}
.panel{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px}
.panel h2{margin:0 0 8px 0; font-size:14px; color:var(--muted); font-weight:700; text-transform:uppercase}
.counts{font-size:12px; color:var(--muted)}

.search{
  width:100%; margin:8px 0 10px 0; padding:12px 12px; border-radius:10px; border:1px solid #d1d5db;
  background:#ffffff; color:var(--text); font-size:16px; min-height:44px;
}
.lists{display:flex; flex-direction:column; gap:8px; max-height:360px; overflow:auto; padding:2px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:#ffffff; min-height:44px}
.item.selected{ background:#ECFDF5; border-color:#A7F3D0 }
.item button{background:transparent; color:#6b7280; border:none; padding:6px; cursor:pointer; font-size:18px}
.item button:hover{color:#111827}
.item .item-delete{ font-size:12px; font-weight:700; border:1px solid var(--border); border-radius:8px; padding:4px 8px; color:var(--danger); background:#fff; cursor:pointer }
.item .item-delete:hover{ background:#fff1f2; border-color:#fecdd3; color:#b91c1c }
.item[draggable="true"]{cursor:grab}
.item:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.droptarget{outline:2px dashed var(--accent); outline-offset:-4px}

.notice{margin-top:6px; color:var(--muted); font-size:12px}
.error{color:var(--danger)}

.actions{display:flex; gap:8px; align-items:center; justify-content:flex-end; margin:12px 0; box-sizing:border-box}
.actions#playersActions{
  position:sticky;
  bottom:0;
  left:0;
  right:0;
  padding:12px 14px;
  margin:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.95) 40%, rgba(255,255,255,1));
  z-index:2;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
.picker .actions{ margin-top:auto; padding-top:12px }

.teams{margin-top:0}
.teams header{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:0; border:0; background:transparent; position:static}
table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  overflow:hidden;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
}
th, td{
  padding:10px 12px;
  vertical-align:top;
  border:0;
}
th{font-size:12px; color:var(--muted); text-transform:uppercase; text-align:left}
thead tr{ border-bottom:1px solid var(--border); }
tbody tr{ border-bottom:1px solid var(--border); }
tbody tr:last-child{ border-bottom:none; }
.table-wrap{ overflow:auto; border-radius:12px; }
.table-wrap thead th{ position:sticky; top:0; background:#fff; z-index:1; box-shadow:0 1px 0 var(--border); }
.table-wrap table{ min-width:680px; }
.table-wrap table.wide-table{ min-width:900px; }
.swatch{width:16px; height:16px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.15)}
.team-name[contenteditable="true"]{padding:2px 6px; border-radius:6px}
.team-name[contenteditable="true"]:focus{outline:2px solid var(--focus)}
.label-full{ display:inline; }
.label-short{ display:none; }
@media(max-width: 640px){
  .label-full{ display:none; }
  .label-short{ display:inline; }
}
.live-score{
  margin:4px 0 15px 0;
  padding:0;
  border-radius:14px;
  background:linear-gradient(120deg, #eef2ff, #f0fdfa);
  color:#111827;
  font-weight:600;
  border:1px solid rgba(17,24,39,0.08);
  position:relative;
  box-shadow:0 10px 30px rgba(15,23,42,0.08);
}
.live-score-toggle{
  width:100%;
  padding:14px 14px;
  background:transparent;
  border:none;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  font-size:13px;
  letter-spacing:.4px;
  text-transform:uppercase;
  cursor:pointer;
}
.live-score-toggle span:first-child{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  font-size:14px;
  line-height:1;
  letter-spacing:0;
  text-align:center;
  text-transform:none;
  flex:0 0 16px;
}
.live-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ef4444;
  box-shadow:0 0 0 4px rgba(239,68,68,0.18);
  margin-left:6px;
  animation: pulseDot 1.2s ease-in-out infinite;
}
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(239,68,68,0.35); opacity:1; }
  70%{ box-shadow:0 0 0 8px rgba(239,68,68,0); opacity:0.8; }
  100%{ box-shadow:0 0 0 0 rgba(239,68,68,0); opacity:1; }
}
.live-score-body{
  background:rgba(255,255,255,0.8);
  border:1px solid rgba(17,24,39,0.06);
  border-radius:0 0 12px 12px;
  padding:10px 14px 12px 14px;
  box-shadow:inset 0 1px 2px rgba(15,23,42,0.06);
}
.live-score-table{
  width:100%;
  border-collapse:collapse;
}
.live-score-table th,
.live-score-table td{
  font-size:12px;
  padding:6px 6px;
  text-align:left;
}
.live-score-table th{
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.3px;
}
.live-score-delta{
  display:inline-flex;
  align-items:center;
  gap:2px;
  margin-left:6px;
  padding:2px 6px;
  border-radius:999px;
  background:#ecfdf3;
  color:#047857;
  font-weight:800;
  font-size:11px;
  border:1px solid rgba(4,120,87,0.25);
}
.live-score-delta.neg{
  background:#fef2f2;
  color:#b91c1c;
  border-color:rgba(185,28,28,0.25);
}
.live-score-pos-up{
  color: var(--accent-2);
  font-weight: 800;
  margin-left: 4px;
}
.live-score-pos-down{
  color: #dc2626;
  font-weight: 800;
  margin-left: 4px;
}
.live-report-line strong{ font-weight:800; }
.team-pill{ display:inline-flex; align-items:center; gap:8px; padding:4px 8px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; align-self:flex-start }
.team-pill .pill-swatch{ width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.15); display:inline-block }
.team-sub{ display:block; margin-top:4px; font-size:11px; color:var(--muted); }
.team-pill.winner{ color:#fff; }
.gd-pos{ color: var(--accent-2); }
.gd-neg{ color: var(--danger); }
/* Small badge used in All-Time table */
.mini-pill{ display:inline-flex; align-items:center; gap:4px; padding:2px 6px; border-radius:999px; border:1px solid var(--border); background:#fff; font-size:12px; font-weight:700; color:var(--muted) }
/* All-Time header stat cards */
/* Generic stat cards grid (used in All-Time and Player modal) */
.stat-cards{ display:grid; grid-template-columns:1fr; gap:8px; margin:8px 0 }
@media(min-width: 600px){ .stat-cards{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
/* All-Time page keeps its own 4-col layout on large screens */
#allTimeSection .stat-cards{ display:grid; grid-template-columns:1fr; gap:8px; margin:8px 0 }
@media(min-width: 700px){ #allTimeSection .stat-cards{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(min-width: 1000px){ #allTimeSection .stat-cards{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.stat-card{ display:flex; align-items:center; justify-content:flex-start; gap:10px; border:1px solid var(--border); background:#fff; border-radius:12px; padding:10px 12px; cursor:pointer; user-select:none; box-shadow: 0 1px 1px rgba(0,0,0,.04) }
.stat-card:hover{ border-color:#d1d5db }
.stat-card:focus-visible{ outline:2px solid var(--focus); outline-offset:2px }
.stat-emoji{ font-size:18px; line-height:1; opacity:.9; filter:grayscale(20%); flex:0 0 auto }
/* On small screens, keep emojis but shrink slightly to avoid wrapping */
@media(max-width: 420px){ #allTimeSection .stat-emoji{ font-size:14px; opacity:.85 } }
.stat-meta{ display:flex; flex-direction:column; min-width:0 }
.stat-title{ font-size:12px; letter-spacing:.3px; text-transform:uppercase; color:var(--muted); font-weight:800 }
.stat-value{ font-weight:800; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.stat-sub{ font-size:12px; color:var(--muted) }
.delta-pos{ color: var(--accent-2) }
.delta-neg{ color: var(--danger) }
/* Pts/Session coloring */
.ppm-good{ color: var(--accent-2) }
.ppm-avg{ color: var(--warn) }
.ppm-low{ color: var(--danger) }
.ppm-neutral{ color: var(--muted) }
/* Compact colored badges for values */
.badge{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-weight:800; font-size:12px }
.badge-good{ background: var(--accent-2); color: #fff }
.badge-avg{ background: #facc15; color: #111827 }
.badge-low{ background: var(--danger); color: #fff }
.badge-neutral{ background: #e5e7eb; color: var(--muted); border: 1px solid var(--border) }
.player-badges{ display:inline-flex; flex-wrap:wrap; gap:4px; margin-left:6px }
.player-badge{ display:inline-flex; align-items:center; gap:4px; padding:1px 6px; border-radius:12px; font-size:11px; font-weight:600; border:1px solid var(--border); color:var(--muted); background:#f9fafb }
.player-badge-premium{
  background: linear-gradient(130deg, #fef9c3, #fcd34d 35%, #f59e0b);
  border-color:#b45309;
  color:#7a2e0a;
  box-shadow:0 0 0 1px rgba(250, 204, 21, 0.4), 0 2px 6px rgba(180, 83, 9, 0.25);
}
.player-badge strong{ font-size:12px }
.player-name-line{ display:inline-flex; align-items:center; gap:6px }
@media (max-width:600px){
  .player-row-name{ display:flex; flex-direction:column; gap:4px }
  .player-row-name > .player-badges{ margin-left:0 }
}
/* Podium row tints removed */
/* Teams: vertically center cells */
#teamsSection table th,
#teamsSection table td{ vertical-align: middle }
/* Leaderboard: vertically center stats cells */
#leaderboardSection table th,
#leaderboardSection table td{ vertical-align: middle }
.badges-col{ text-align: left; padding-right:12px }
.badges-cell{
  text-align:left;
  white-space:normal;
}
.badges-cell .player-badges{
  margin-left:0;
  flex-wrap:wrap;
  justify-content:flex-start;
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
}
.alltime-table th,
.alltime-table td{
  vertical-align: middle;
}
.alltime-table .badges-cell{
  text-align: left;
  white-space: normal;
}
.alltime-table .player-badges{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap:4px;
  max-width:100%;
  overflow:hidden;
}
@media(max-width: 700px){
  .alltime-table .badges-cell{ text-align:left; }
  .alltime-table .player-badges{ justify-content:flex-start; }
}
@media(max-width: 760px){
  /* Keep the session Leaderboard fully visible on mobile */
  #leaderboardSection .table-wrap{ overflow:visible; }
  #leaderboardSection table{ table-layout:fixed; }
  #leaderboardSection th:first-child,
  #leaderboardSection td:first-child{ width:40%; }
  #leaderboardSection .table-wrap table{ min-width:0; width:100%; }
  #leaderboardSection th,
  #leaderboardSection td{ padding:8px 10px; }
  #leaderboardSection .team-pill{ flex-wrap:wrap; gap:6px; }
  #leaderboardSection .team-sub{ white-space:normal; }
}

.schedule{margin-top:0}
.pair{padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:#ffffff; margin-top:8px}
.pair.played{ opacity:.6 }
/* Future (after the next match) is slightly dimmed to highlight current */
.pair.future{ opacity:.5 }
.match-score{ text-align:right; margin-left:auto; display:flex; align-items:center; justify-content:flex-end; gap:8px }
/* Next match highlighting */
.pair.next{ border-color:#2563eb; border-width:2px }
.next-heading{ color:#2563eb; font-weight:800; letter-spacing:.2px; margin:8px 0 4px 0 }
/* Matches: show players by default; stacked layout handled in JS */
@media (max-width:600px){ .match-score{ flex-direction:column; gap:4px } }
/* Breathing room under panel headers in Players tab */
#playersSection .panel > div:first-child{ margin-bottom: 10px }

footer{margin:24px 0; color:var(--muted); font-size:12px}

/* Mobile optimizations */
@media (max-width: 899px){
  header{padding:14px 12px}
  .tabs{ top:54px; padding:6px 8px }
  main{padding:14px 8px; max-width:none; width:100%; margin:0}
  .panel{padding:8px}
  .lists{max-height:40vh}
  .actions{
    position: sticky; bottom: env(safe-area-inset-bottom, 0px);
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.95));
    border-top:1px solid var(--border);
    padding:10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    width: 100%;
  }
  .actions .btn.primary{flex:1}
  .panel{border-radius:12px}
  .item{border-radius:12px}
  /* Compact steppers on mobile */
  .btn.step{ min-width:32px; min-height:32px; font-size:18px }
  .score-input{ width:48px !important; min-height:32px; font-size:16px }
  .modal .score-stepper{ gap:6px; margin:0 6px }
}

/* Tablet enhancements */
@media (min-width: 768px){
  /* Global container + header/tabs spacing */
  header{ padding:18px 24px }
  .tabs{ justify-content:flex-start; padding:8px 16px }
  .tab{ flex:0 0 auto; padding:10px 16px }
  main{ padding:18px 24px; max-width:1200px; width:min(96vw, 1200px) }

  /* Players: two-column grid list */
  #playersSection .panel .lists{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px }
  #playersSection .item{ width:100% }

  /* Teams: readable fixed layout and column sizing */
  #teamsSection table{ table-layout:fixed }
  #teamsSection th:nth-child(1){ width:160px }
  #teamsSection th:nth-child(3),
  #teamsSection td:nth-child(3){ width:64px; text-align:left }
  #teamsSection td:nth-child(2){ word-break:break-word }

  /* Matches: single full-width column per match on tablet */
  #matchesSection #matchesList{ display:grid; grid-template-columns:1fr; gap:12px }
  #matchesSection #matchesList > :not(.pair){ grid-column:1 / -1 }
  #matchesSection .pair{ margin-top:0; display:grid !important; grid-template-columns:1fr auto; align-items:stretch; width:100% }
  #matchesSection .match-score{ margin-left:0 }
  #matchesSection .match-label{ display:grid !important; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:12px; min-width:0 }
  #matchesSection .team-card{ border:1px solid var(--border); border-radius:12px; padding:8px; background:#fff; min-width:0 }
  #matchesSection .team-card{ border:1px solid var(--border); border-radius:12px; padding:8px; background:#fff }
  #matchesSection .vs{ align-self:center; color:var(--muted); font-weight:800; letter-spacing:.2px }

  /* Leaderboard: fixed, right-aligned numeric columns */
  #leaderboardSection table{ table-layout:auto }
  #leaderboardSection th:nth-child(n+2),
  #leaderboardSection td:nth-child(n+2){ text-align:right }
  #leaderboardSection .table-wrap{ overflow:auto; }

  /* All-Time: fixed layout, numeric columns right-aligned */
  #allTimeSection table{ table-layout:fixed }
  #allTimeSection th:nth-child(1){ width:56px; text-align:left }
  #allTimeSection th:nth-child(2){ width:32%; text-align:left }
  #allTimeSection th:nth-child(3){ width:24%; text-align:left; white-space:nowrap }
  #allTimeSection th:nth-child(4),
  #allTimeSection th:nth-child(5),
  #allTimeSection th:nth-child(6),
  #allTimeSection th:nth-child(7),
  #allTimeSection th:nth-child(8){ width:110px; text-align:right }
  #allTimeSection td:nth-child(1){ text-align:left }
  #allTimeSection td:nth-child(3){ text-align:left }
  #allTimeSection td:nth-child(4),
  #allTimeSection td:nth-child(5),
  #allTimeSection td:nth-child(6),
  #allTimeSection td:nth-child(7),
  #allTimeSection td:nth-child(8){ text-align:right }

  /* Modals: wider and two-column fields */
  .modal{ width:min(92vw, 640px) }
  .modal .modal-fields{ grid-template-columns:1fr 1fr }
}

@media (max-width: 767px){
  #matchesSection .vs{ display:none }
}

/* Large screens: optional small bumps without changing layout paradigms */
@media (min-width: 1200px){
  main{ max-width:1200px }
}

/* Modal */
.modal-overlay[hidden], .modal[hidden]{ display:none }
.modal-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 50;
  backdrop-filter: blur(2px);
}
.modal{
  position: fixed; z-index: 51; left:50%; top: 10vh; transform: translateX(-50%);
  width: min(92vw, 480px); background: #fff; border:1px solid var(--border); border-radius:12px;
  box-shadow: 0 20px 40px rgba(0,0,0,.12);
  display:flex; flex-direction:column; max-height:85vh; overflow:hidden;
}
.modal .modal-header{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  background:#fff;
  z-index:1;
  display:flex;
  align-items:center;
  gap:8px;
}
.modal .modal-body{ padding:14px 16px; flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action: pan-y }
.modal .modal-actions{ display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--border); position:sticky; bottom:0; background:#fff; z-index:1 }
.modal .modal-fields{ display:grid; grid-template-columns:1fr; gap:12px }
.modal .modal-fields label{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 6px }
/* In modals, keep numeric inputs compact but text inputs full-width */
.modal .modal-fields input[type="number"]{ width:100px }
.modal .modal-fields input[type="text"],
.modal .modal-fields input[type="search"]{ width:100% }
.modal .score-row{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px }
.modal .score-stepper{ display:flex; align-items:center; gap:8px; margin:0 6px }
.btn.step{ min-width:36px; min-height:36px; border-radius:10px; font-size:20px; padding:0; line-height:1; display:inline-flex; align-items:center; justify-content:center }
.score-input{ width:56px !important; min-height:36px; text-align:center; font-size:18px; border:1px solid #d1d5db; border-radius:8px; background:#fff; color:#111827 }
/* Big toggle switch */
.switch{ display:flex; align-items:center; gap:10px; padding:0 6px }
.switch input{ position:absolute; opacity:0; width:1px; height:1px; overflow:hidden }
.switch .slider{ position:relative; width:54px; height:30px; background:#e5e7eb; border-radius:9999px; box-shadow: inset 0 0 0 1px #d1d5db; flex:0 0 auto }
.switch .slider::after{ content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; background:#fff; border-radius:50%; box-shadow: 0 1px 2px rgba(0,0,0,.2) }
.switch input:focus-visible + .slider{ outline:2px solid var(--focus); outline-offset:2px }
.switch input:checked + .slider{ background:#2563eb; box-shadow: inset 0 0 0 1px #2563eb }
.switch input:checked + .slider::after{ transform: translateX(24px) }
.switch .switch-text{ font-size:14px }
.scorers{ margin-top:8px; display:grid; grid-template-columns:1fr; gap:12px }
.scorer-card{ border:1px solid var(--border); border-radius:8px; padding:8px }
.scorer-title{ font-size:12px; font-weight:700; color:var(--muted); margin-bottom:6px; text-transform:uppercase }
.scorer-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:4px 0 }
.scorer-input{ width:44px; min-height:28px; text-align:center; font-size:14px; border:1px solid #d1d5db; border-radius:6px }
.btn.mini-step{ min-width:28px; min-height:28px; border-radius:8px; font-size:16px; padding:0; line-height:1; display:inline-flex; align-items:center; justify-content:center }
.top-scorer-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#f3f4f6;
  color:#111827;
  border:1px solid rgba(17,24,39,0.15);
  font-weight:800;
  font-size:12px;
  letter-spacing:.2px;
  box-shadow:0 6px 20px rgba(217,119,6,0.15);
  margin-left:auto;
  position:relative;
  overflow:hidden;
}
.top-scorer-badge.pop{ animation: badge-pop 240ms ease-out; }
.top-scorer-badge.fade-out{ animation: badge-fade 180ms ease-in forwards; }
.top-scorer-badge::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background: linear-gradient(90deg, rgba(59,130,246,0) 0%, rgba(59,130,246,0.45) 30%, rgba(59,130,246,0.45) 70%, rgba(59,130,246,0) 100%);
  opacity:0;
  pointer-events:none;
}
.top-scorer-badge.pop::after{
  animation: badge-sweep 820ms ease-out forwards;
}
.top-scorer-badge.woosh:not(.pop)::after{
  animation: badge-sweep-loop 4s ease-out infinite;
}
.top-scorer-badge.pop.woosh::after{
  animation:
    badge-sweep 820ms ease-out forwards,
    badge-sweep-loop 4s ease-out 4s infinite;
}
@keyframes badge-pop{
  0%{ transform: scale(.92); opacity:0; }
  60%{ transform: scale(1.05); opacity:1; }
  100%{ transform: scale(1); opacity:1; }
}
@keyframes badge-fade{
  0%{ opacity:1; transform: translateY(0); }
  100%{ opacity:0; transform: translateY(-4px); }
}
@keyframes badge-sweep{
  0%{ transform: translateX(-60%); opacity:.85; }
  100%{ transform: translateX(120%); opacity:0; }
}
@keyframes badge-sweep-loop{
  0%{ transform: translateX(-80%); opacity:0; }
  70%{ transform: translateX(-80%); opacity:0; }
  80%{ transform: translateX(-60%); opacity:.85; }
  92%{ transform: translateX(120%); opacity:.4; }
  100%{ transform: translateX(140%); opacity:0; }
}
.ball-spin{
  display:inline-block;
  animation: ball-spin 2.2s ease-in-out infinite;
}
@keyframes ball-spin{
  0%{ transform: rotate(0deg); }
  50%{ transform: rotate(180deg); }
  100%{ transform: rotate(360deg); }
}

/* Toast & Confetti */
.toast{
  position: fixed; left:50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: #fff; color:#111827; border:1px solid #e5e7eb; border-radius:14px; padding:12px 16px; z-index:60;
  box-shadow: 0 10px 30px rgba(0,0,0,.15); font-weight:700; display:flex; gap:10px; align-items:center;
}
.toast .emoji{ font-size:22px }
.toast.winner{ font-size:22px; padding:16px 20px; border-width:2px }
.winner-banner{ font-size:28px; font-weight:800; text-align:center; color:#111827; letter-spacing:.5px; margin:0 0 12px }
.confetti{ position: fixed; top:-10px; width:8px; height:14px; opacity:.9; z-index:55; pointer-events:none }
@keyframes confetti-fall{ from{ transform: translateY(-10vh) rotate(0deg)} to{ transform: translateY(110vh) rotate(360deg)} }

/* Players tab locked state (no banner) */
#playersSection.locked .panel{ opacity:.5; pointer-events:none }
/* Make Players tab fill height and scroll its list nicely */
#playersSection{ flex:1; display:flex; flex-direction:column; min-height:0 }
#playersSection .panel{ flex:1; display:flex; flex-direction:column; min-height:0; margin-bottom:12px; padding:8px; width:100%; box-sizing:border-box }
#playersSection .panel .lists{ flex:1; max-height:none; min-height:0; overflow:auto; padding:0; width:100%; box-sizing:border-box }
/* Reserve space so bottom items aren't covered by sticky actions */
#playersSection .lists{ padding-bottom: 140px }
#playersSection .item{ padding:10px 10px; width:100%; box-sizing:border-box }
#playersSection .actions{
  position: sticky;
  bottom: env(safe-area-inset-bottom, 0px);
  /* Make the bar span the full viewport width like header/tabs */
  left: 0; right: 0; width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background:linear-gradient(180deg, rgba(255,255,255,0.92), #fff);
  border-top:1px solid var(--border);
  padding:10px max(8px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  margin-top:8px;
  box-sizing:border-box;
  z-index: 3;
}