:root {
  --skill-1: #d1fae5;
  --skill-2: #a7f3d0;
  --skill-3: #6ee7b7;
  --skill-4: #34d399;
  --skill-5: #10b981;
  --skill-6: #059669;
  --skill-7: #047857;
  --skill-8: #065f46;

  --bg-primary: #041800ef;
}

/* ── Dark themes ──────────────────────────────────────────────────────────────
   Design rationale:
   - Surfaces: dark but not pure black — avoids halation on OLED, eases eye strain
   - Borders: 15–18% opacity so structure is visible without glare
   - Accents: mid-range saturation (not neon) for AA contrast on dark surfaces
   - Text: #f1f5f9 primary (near-white, softer than #fff), #94a3b8 secondary
   - btn-text: always dark enough to read on the accent background
────────────────────────────────────────────────────────────────────────────── */
[data-theme="green"]  {
  --t-bg:#0a0f0a;       --t-surface:#111a12;  --t-surface2:#0d130e;
  --t-border:rgba(134,239,172,.15); --t-accent:#4ade80;  --t-accent2:#86efac;
  --t-grid:rgba(134,239,172,.04);   --t-text:#f1f5f9;    --t-text2:#94a3b8;
  --t-text-dim:#64748b;             --t-btn-text:#052e16;
}
[data-theme="blue"]   {
  --t-bg:#090c14;       --t-surface:#0f1623;  --t-surface2:#0b101c;
  --t-border:rgba(147,197,253,.15); --t-accent:#60a5fa;  --t-accent2:#93c5fd;
  --t-grid:rgba(147,197,253,.04);   --t-text:#f1f5f9;    --t-text2:#94a3b8;
  --t-text-dim:#64748b;             --t-btn-text:#0c1a3a;
}
[data-theme="purple"] {
  --t-bg:#0c0a14;       --t-surface:#13101f;  --t-surface2:#0e0b18;
  --t-border:rgba(196,181,253,.15); --t-accent:#a78bfa;  --t-accent2:#c4b5fd;
  --t-grid:rgba(196,181,253,.04);   --t-text:#f1f5f9;    --t-text2:#94a3b8;
  --t-text-dim:#64748b;             --t-btn-text:#1e1040;
}
[data-theme="amber"]  {
  --t-bg:#0f0c06;       --t-surface:#1a1508;  --t-surface2:#130f05;
  --t-border:rgba(253,230,138,.15); --t-accent:#fbbf24;  --t-accent2:#fde68a;
  --t-grid:rgba(253,230,138,.04);   --t-text:#f1f5f9;    --t-text2:#94a3b8;
  --t-text-dim:#64748b;             --t-btn-text:#1c1200;
}
[data-theme="rose"]   {
  --t-bg:#0f0a0b;       --t-surface:#1c1013;  --t-surface2:#150b0d;
  --t-border:rgba(253,164,175,.15); --t-accent:#fb7185;  --t-accent2:#fda4af;
  --t-grid:rgba(253,164,175,.04);   --t-text:#f1f5f9;    --t-text2:#94a3b8;
  --t-text-dim:#64748b;             --t-btn-text:#1f0a0d;
}
/* Picklebwag Club — black + burnt gold + fire red, straight from the logo */
[data-theme="swag"]   {
  --t-bg:#0a0906;       --t-surface:#161209;  --t-surface2:#100d06;
  --t-border:rgba(201,125,32,.2);   --t-accent:#e09030;  --t-accent2:#f0aa44;
  --t-grid:rgba(201,125,32,.05);    --t-text:#f5f0e8;    --t-text2:#a89070;
  --t-text-dim:#6b5a3e;             --t-btn-text:#0a0906;
}

/* ── Light themes ──────────────────────────────────────────────────────────────
   Design rationale:
   - Background: very light tint of the accent hue (not pure white — reduces glare)
   - Surface: white cards on tinted bg for clear depth separation
   - Surface2: slightly deeper tint for inputs and nested areas
   - Borders: 20–25% opacity accent — visible but not heavy
   - Accent buttons: saturated enough for AA on white (≥4.5:1 contrast)
   - Text primary: near-black neutral (#1e293b) — NOT the accent hue, avoids eye fatigue
   - Text secondary: #64748b — readable mid-gray
────────────────────────────────────────────────────────────────────────────── */
[data-theme="green-light"]  {
  --t-bg:#f0fdf4;       --t-surface:#ffffff;  --t-surface2:#dcfce7;
  --t-border:rgba(34,197,94,.22);   --t-accent:#16a34a;  --t-accent2:#15803d;
  --t-grid:rgba(34,197,94,.07);     --t-text:#1e293b;    --t-text2:#64748b;
  --t-text-dim:#94a3b8;             --t-btn-text:#ffffff;
}
[data-theme="blue-light"]   {
  --t-bg:#eff6ff;       --t-surface:#ffffff;  --t-surface2:#dbeafe;
  --t-border:rgba(59,130,246,.22);  --t-accent:#2563eb;  --t-accent2:#1d4ed8;
  --t-grid:rgba(59,130,246,.07);    --t-text:#1e293b;    --t-text2:#64748b;
  --t-text-dim:#94a3b8;             --t-btn-text:#ffffff;
}
[data-theme="purple-light"] {
  --t-bg:#faf5ff;       --t-surface:#ffffff;  --t-surface2:#ede9fe;
  --t-border:rgba(139,92,246,.22);  --t-accent:#7c3aed;  --t-accent2:#6d28d9;
  --t-grid:rgba(139,92,246,.07);    --t-text:#1e293b;    --t-text2:#64748b;
  --t-text-dim:#94a3b8;             --t-btn-text:#ffffff;
}
[data-theme="amber-light"]  {
  --t-bg:#fffbeb;       --t-surface:#ffffff;  --t-surface2:#fef3c7;
  --t-border:rgba(245,158,11,.22);  --t-accent:#b45309;  --t-accent2:#92400e;
  --t-grid:rgba(245,158,11,.07);    --t-text:#1e293b;    --t-text2:#64748b;
  --t-text-dim:#94a3b8;             --t-btn-text:#ffffff;
}
[data-theme="rose-light"]   {
  --t-bg:#fff1f2;       --t-surface:#ffffff;  --t-surface2:#ffe4e6;
  --t-border:rgba(244,63,94,.22);   --t-accent:#e11d48;  --t-accent2:#be123c;
  --t-grid:rgba(244,63,94,.07);     --t-text:#1e293b;    --t-text2:#64748b;
  --t-text-dim:#94a3b8;             --t-btn-text:#ffffff;
}
/* Picklebwag Club light — warm parchment + gold, logo-inspired */
[data-theme="swag-light"] {
  --t-bg:#fdf6ec;       --t-surface:#ffffff;  --t-surface2:#faecd6;
  --t-border:rgba(180,100,20,.22);  --t-accent:#b45a10;  --t-accent2:#923f08;
  --t-grid:rgba(180,100,20,.07);    --t-text:#1e1206;    --t-text2:#6b4c24;
  --t-text-dim:#a08050;             --t-btn-text:#ffffff;
}

/* ── Shared theme rules ── */
body[data-theme] { background:var(--t-bg); color:var(--t-text); }
body[data-theme] .court-grid-bg { background-color:var(--t-bg); background-image:linear-gradient(var(--t-grid) 1px,transparent 1px),linear-gradient(90deg,var(--t-grid) 1px,transparent 1px); background-size:28px 28px; }
body[data-theme] .panel { background:var(--t-surface); border-color:var(--t-border); }
body[data-theme] .modal { background:var(--t-surface); border-color:var(--t-border); color:var(--t-text); }
body[data-theme] .btn-lime { background:var(--t-accent); color:var(--t-btn-text); }
body[data-theme] .btn-lime:hover:not(:disabled) { background:var(--t-accent2); }
body[data-theme] .btn-lime:disabled { background:color-mix(in srgb,var(--t-accent) 20%,transparent); color:var(--t-text-dim); cursor:not-allowed; }
body[data-theme] .btn-ghost { border-color:color-mix(in srgb,var(--t-accent) 30%,transparent); color:var(--t-accent); }
body[data-theme] .btn-ghost:hover { background:color-mix(in srgb,var(--t-accent) 10%,transparent); border-color:color-mix(in srgb,var(--t-accent) 55%,transparent); }
body[data-theme] .input-field { background:var(--t-surface2); border-color:var(--t-border); color:var(--t-text); }
body[data-theme] .input-field:focus { border-color:color-mix(in srgb,var(--t-accent) 60%,transparent); }
body[data-theme] .input-field::placeholder { color:var(--t-text-dim); }
body[data-theme] .court-card { background:var(--t-surface); }
body[data-theme] .player-row:hover { background:color-mix(in srgb,var(--t-accent) 5%,transparent); }
body[data-theme] .tab.active { color:var(--t-accent); border-bottom-color:var(--t-accent); }
body[data-theme] .score-btn { background:color-mix(in srgb,var(--t-accent) 12%,transparent); border-color:color-mix(in srgb,var(--t-accent) 25%,transparent); color:var(--t-accent); }
body[data-theme] .score-btn:hover { background:color-mix(in srgb,var(--t-accent) 22%,transparent); }
body[data-theme] .stat-chip { background:color-mix(in srgb,var(--t-accent) 7%,transparent); border-color:color-mix(in srgb,var(--t-accent) 14%,transparent); }
body[data-theme] .stat-chip .val { color:var(--t-accent); }
body[data-theme] .vs-divider { color:color-mix(in srgb,var(--t-accent) 30%,transparent); }
body[data-theme] .mset-player.selected { background:color-mix(in srgb,var(--t-accent) 12%,transparent); border-color:color-mix(in srgb,var(--t-accent) 35%,transparent); }

/* ── Light mode text overrides ── */
/* Override hardcoded dark-palette inline colors so light mode stays readable  */
body[data-theme$="-light"] { color:var(--t-text); }
body[data-theme$="-light"] * { color:inherit; }

/* Primary — #e2e8f0 (light on dark) → near-black */
body[data-theme$="-light"] [style*="color:#e2e8f0"],
body[data-theme$="-light"] [style*="color: #e2e8f0"] { color:var(--t-text) !important; }

/* Secondary — #6b7280, #9ca3af, #4b5563 → readable mid-gray */
body[data-theme$="-light"] [style*="color:#6b7280"],
body[data-theme$="-light"] [style*="color:#9ca3af"],
body[data-theme$="-light"] [style*="color:#4b5563"] { color:#64748b !important; }

/* Dim — #3d5244, #2d3f31 (dark green muted) → neutral slate */
body[data-theme$="-light"] [style*="color:#3d5244"],
body[data-theme$="-light"] [style*="color:#2d3f31"] { color:#94a3b8 !important; }

/* Stat labels — #94a3b8, #cbd5e1 → mid-slate */
body[data-theme$="-light"] [style*="color:#94a3b8"],
body[data-theme$="-light"] [style*="color:#cbd5e1"] { color:#64748b !important; }

/* Score number */
body[data-theme$="-light"] .score-num { color:var(--t-text); }

/* Overlay */
body[data-theme$="-light"] .overlay { background:rgba(0,0,0,.4); }

/* Cards and rows */
body[data-theme$="-light"] .player-row { border-radius:8px; }
body[data-theme$="-light"] .court-card.free { border-color:rgba(0,0,0,.08); opacity:.85; }
body[data-theme$="-light"] .court-card.active { border-color:color-mix(in srgb,var(--t-accent) 45%,transparent); box-shadow:0 0 20px color-mix(in srgb,var(--t-accent) 10%,transparent); }

/* Scrollbar */
body[data-theme$="-light"] ::-webkit-scrollbar-thumb { background:color-mix(in srgb,var(--t-accent) 25%,transparent); }

/* Toast */
body[data-theme$="-light"] .toast { background:var(--t-surface); color:var(--t-text); border-color:var(--t-border); box-shadow:0 4px 20px rgba(0,0,0,.12); }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

*,*::before,*::after{box-sizing:border-box;}
body{font-family:'DM Sans',sans-serif;background:var(--bg-primary);color:#e2e8f0;min-height:100vh;margin:0;}
.court-grid-bg{background-color:#080f0a;background-image:linear-gradient(rgba(132,204,22,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(132,204,22,.03) 1px,transparent 1px);background-size:28px 28px;min-height:100vh;}
.panel{background:#0d1a10;border:1px solid rgba(132,204,22,.1);border-radius:14px;}
.input-field{background:#060d08;border:1px solid #1a2b1d;border-radius:8px;padding:9px 13px;color:#e2e8f0;font-family:'DM Sans',sans-serif;font-size:14px;outline:none;transition:border-color .15s;width:100%;}
.input-field:focus{border-color:rgba(132,204,22,.5);}
.input-field::placeholder{color:#2d3f31;}
.btn-lime{background:#84cc16;color:#070e05;font-weight:700;border:none;cursor:pointer;transition:all .15s;outline:none;font-family:'DM Sans',sans-serif;}
.btn-lime:hover:not(:disabled){background:#a3e635;transform:translateY(-1px);}
.btn-lime:active:not(:disabled){transform:translateY(0);}
.btn-lime:disabled{background:#1a2b1d;color:#3d5244;cursor:not-allowed;}
.btn-ghost{background:transparent;border:1px solid rgba(132,204,22,.25);color:#84cc16;font-weight:600;cursor:pointer;transition:all .15s;outline:none;font-family:'DM Sans',sans-serif;}
.btn-ghost:hover{background:rgba(132,204,22,.08);border-color:rgba(132,204,22,.5);}
.btn-red{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);color:#f87171;font-weight:600;cursor:pointer;transition:all .15s;outline:none;font-family:'DM Sans',sans-serif;}
.btn-red:hover{background:rgba(239,68,68,.2);}
.btn-amber{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.25);color:#fbbf24;font-weight:600;cursor:pointer;transition:all .15s;outline:none;font-family:'DM Sans',sans-serif;}
.btn-amber:hover{background:rgba(251,191,36,.2);}
.court-card{background:#0d1a10;border-radius:14px;transition:all .2s;overflow:hidden;}
.court-card.active{border:1px solid rgba(132,204,22,.4);box-shadow:0 0 24px rgba(132,204,22,.04),inset 0 1px 0 rgba(132,204,22,.1);}
.court-card.free{border:1px solid rgba(255,255,255,.05);opacity:.55;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.fade-up{animation:fadeUp .25s ease;}
@keyframes timerTick{0%,100%{opacity:1;}50%{opacity:.55;}}
.timer-anim{animation:timerTick 2s ease infinite;}
@keyframes toastIn{from{opacity:0;transform:translateX(110%);}to{opacity:1;transform:translateX(0);}}
.toast-in{animation:toastIn .3s cubic-bezier(.22,.68,0,1.2);}
@keyframes spin{to{transform:rotate(360deg);}}
.spin{animation:spin .7s linear infinite;}
@keyframes winPulse{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.4);}50%{box-shadow:0 0 0 6px rgba(251,191,36,0);}}
.win-pulse{animation:winPulse 2s ease infinite;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#1a2b1d;border-radius:2px;}
.skill-pill{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap;}
.tab{padding:8px 16px;cursor:pointer;font-weight:600;font-size:13px;border-bottom:2px solid transparent;transition:all .15s;letter-spacing:.02em;}
.tab.active{color:#84cc16;border-bottom-color:#84cc16;}
.tab.inactive{color:#3d5244;}
.tab.inactive:hover{color:#6b7280;}
.player-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;transition:background .15s;}
.player-row:hover{background:rgba(132,204,22,.04);}
.vs-divider{font-family:'Bebas Neue',sans-serif;font-size:28px;color:rgba(132,204,22,.3);line-height:1;}
.stat-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(132,204,22,.06);border:1px solid rgba(132,204,22,.12);border-radius:8px;padding:5px 12px;font-size:13px;font-weight:600;white-space:nowrap;}
.stat-chip .val{color:#84cc16;font-size:15px;font-family:'Bebas Neue',sans-serif;letter-spacing:.05em;}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(6px);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;}
.modal{background:#0d1a10;border:1px solid rgba(132,204,22,.2);border-radius:18px;padding:28px;width:100%;max-width:480px;box-shadow:0 24px 60px rgba(0,0,0,.6);}
.score-box{background:#060d08;border:2px solid #1a2b1d;border-radius:14px;padding:16px;flex:1;display:flex;flex-direction:column;align-items:center;gap:12px;transition:border-color .2s;}
.score-box.winner-glow{border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.04);}
.score-num{font-family:'Bebas Neue',sans-serif;font-size:52px;color:#e2e8f0;line-height:1;letter-spacing:.02em;}
.score-btn{background:rgba(132,204,22,.1);border:1px solid rgba(132,204,22,.2);color:#84cc16;border-radius:8px;width:36px;height:36px;font-size:18px;font-weight:700;cursor:pointer;outline:none;transition:all .12s;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;}
.score-btn:hover{background:rgba(132,204,22,.2);}
/* leaderboard */
.lb-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;transition:background .15s;border:1px solid transparent;}
.lb-row:hover{background:rgba(132,204,22,.04);}
.lb-rank{font-family:'Bebas Neue',sans-serif;font-size:20px;width:28px;text-align:center;flex-shrink:0;}
/* manual set modal */
.mset-player{padding:7px 10px;border-radius:8px;cursor:pointer;transition:all .12s;border:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:8px;}
.mset-player.selected{background:rgba(132,204,22,.1);border-color:rgba(132,204,22,.3);}
/* ── Header icon buttons ──
   The display launchers and the lock/theme controls. Square and uniform, with
   the name carried by the tooltip so the header stays compact at any width. */
.icon-btn {
  width:34px; height:34px; padding:0;
  border-radius:8px; font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ── Settings modal ──
   Grouped rows, each group labelled with whether it is shared across devices or
   local to this browser — the distinction matters and is easy to get wrong. */
.set-group { margin-top:22px; }
.set-group-head { display:flex; align-items:baseline; gap:9px; margin-bottom:9px; }
.set-group-title {
  font-family:'Bebas Neue',sans-serif; font-size:16px; letter-spacing:.12em;
  color:var(--t-accent,#84cc16);
}
.set-scope { font-size:10px; color:var(--t-text-dim,#3d5244); letter-spacing:.04em; }

.set-block {
  background:var(--t-surface2,#060d08); border:1px solid var(--t-border,#1a2b1d);
  border-radius:10px; padding:12px 13px; margin-bottom:7px;
}
.set-row {
  display:flex; align-items:center; gap:12px; cursor:pointer;
  background:var(--t-surface2,#060d08); border:1px solid var(--t-border,#1a2b1d);
  border-radius:10px; padding:12px 13px; margin-bottom:7px; transition:all .15s;
}
.set-row:hover { border-color:color-mix(in srgb,var(--t-accent,#84cc16) 35%,transparent); }
.set-row.on { border-color:color-mix(in srgb,var(--t-accent,#84cc16) 45%,transparent);
              background:color-mix(in srgb,var(--t-accent,#84cc16) 6%,transparent); }
.set-row-main { flex:1; min-width:0; }
.set-row-label { font-size:13.5px; font-weight:700; color:var(--t-text,#e2e8f0); }
.set-row-hint { font-size:11px; color:var(--t-text-dim,#3d5244); line-height:1.5; margin-top:3px; }

.set-choice {
  display:flex; align-items:center; gap:10px; cursor:pointer;
  border:1px solid var(--t-border,#1a2b1d); border-radius:9px;
  padding:10px 12px; transition:all .15s;
}
.set-choice:hover { border-color:color-mix(in srgb,var(--t-accent,#84cc16) 35%,transparent); }
.set-choice.on { border-color:color-mix(in srgb,var(--t-accent,#84cc16) 50%,transparent);
                 background:color-mix(in srgb,var(--t-accent,#84cc16) 8%,transparent); }
.set-choice-label { font-size:13px; font-weight:700; color:var(--t-text,#e2e8f0); }

.set-pill {
  padding:9px 0; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer;
  outline:none; transition:all .12s; font-family:'DM Sans',sans-serif;
  border:1px solid var(--t-border,#1a2b1d); background:transparent; color:var(--t-text2,#6b7280);
}
.set-pill.on {
  border-color:color-mix(in srgb,var(--t-accent,#84cc16) 55%,transparent);
  background:color-mix(in srgb,var(--t-accent,#84cc16) 14%,transparent);
  color:var(--t-accent,#84cc16);
}

.toggle {
  width:38px; height:21px; border-radius:999px; flex-shrink:0; position:relative;
  background:var(--t-border,#1a2b1d); transition:background .15s;
}
.toggle.on { background:var(--t-accent,#84cc16); }
.toggle .knob {
  width:15px; height:15px; border-radius:50%; position:absolute; top:3px; left:3px;
  background:var(--t-text-dim,#3d5244); transition:left .15s,background .15s;
}
.toggle.on .knob { left:20px; background:var(--t-btn-text,#070e05); }

/* ── Header responsive ── */
@media (max-width:599px) {
  header .stat-chip span:not(.val) { display:none; }
}

/* ── Main grid layout ── */
.main-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 13px;
  padding: 13px;
}

/* Tablet portrait / large phone landscape (600–1023px): 2 columns, right panel below */
@media (max-width:1023px) and (min-width:600px) {
  .main-grid { grid-template-columns: 1fr 1fr; }
  .main-grid > div:nth-child(3) { grid-column: 1 / -1; }
}

/* Mobile (<600px): single column, all panels stacked */
@media (max-width:599px) {
  .main-grid { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
}

/* Remove sticky positioning on non-desktop so panels scroll naturally */
@media (max-width:1023px) {
  .main-grid > div { position: static !important; max-height: none !important; overflow-y: visible !important; }
}
@keyframes shake{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-8px);}40%,80%{transform:translateX(8px);}}
.shake{animation:shake .5s ease;}