/* The Slate - dark, high-contrast, thumb-friendly (coaches score on phones) */
:root {
  --bg:#0b0e13; --panel:#141922; --panel2:#1b2230; --line:#2a3342;
  --fg:#e8eef7; --dim:#93a1b5; --accent:#2f81f7; --accent2:#1f6feb;
  --ok:#3fb950; --warn:#d29922; --bad:#f85149; --gold:#e3b341;
  --radius:12px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; }
body {
  background:var(--bg); color:var(--fg);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
}
a { color:var(--accent); text-decoration:none; }
h1,h2,h3 { margin:0 0 10px; font-weight:650; }
h2 { font-size:17px; }
h3 { font-size:14px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }
.hidden { display:none !important; }
.muted, .hint { color:var(--dim); font-size:13px; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; word-break:break-all; }
.msg { min-height:18px; }
button:disabled { opacity:.5; cursor:not-allowed; }
.video-wrap video { background:#000; }
.row { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.row.center { justify-content:center; }
.spread { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:start; }

/* ---------- buttons / inputs ---------- */
button {
  background:var(--accent); color:#fff; border:0; border-radius:10px;
  padding:11px 16px; font-size:15px; font-weight:600; cursor:pointer;
}
button:active { transform:translateY(1px); }
button.ghost { background:transparent; border:1px solid var(--line); color:var(--fg); }
button.small { padding:7px 11px; font-size:13px; border-radius:8px; }
button.big { padding:14px 22px; font-size:16px; }
button.ok { background:var(--ok); }
button.warn { background:var(--warn); color:#1b1500; }
button.bad { background:var(--bad); }
button[disabled] { opacity:.45; cursor:default; }
input, select, textarea {
  width:100%; background:#0e131b; border:1px solid var(--line); color:var(--fg);
  border-radius:9px; padding:11px 12px; font-size:15px; font-family:inherit;
}
label.fld { display:block; margin:10px 0; }
label.fld > span { display:block; font-size:12px; color:var(--dim); margin-bottom:5px; }
.badge { background:var(--bad); color:#fff; border-radius:20px; padding:1px 7px; font-size:11px;
         margin-left:4px; vertical-align:1px; }

/* ---------- splash ---------- */
.overlay { position:fixed; inset:0; z-index:1200; overflow:auto;
  background:radial-gradient(1100px 560px at 50% -8%, #14365e 0%, #0d1117 58%, #080b0f 100%); }
.overlay:not(.hidden) { display:flex; align-items:center; justify-content:center; padding:26px; }
.splash-inner { max-width:660px; text-align:center; }
.diamond { position:relative; width:78px; height:78px; margin:0 auto 22px;
  transform:rotate(45deg); border:2px solid var(--line); border-radius:10px; }
.base { position:absolute; width:14px; height:14px; background:var(--panel); border:2px solid var(--dim);
        border-radius:3px; }
.base.b1 { top:-8px; right:-8px; } .base.b2 { bottom:-8px; right:-8px; }
.base.b3 { top:-8px; left:-8px; }
.base.home { bottom:-8px; left:-8px; background:var(--accent); border-color:var(--accent); }
.wordmark { font-size:42px; letter-spacing:.16em; font-weight:800; margin:0 0 6px;
  background:linear-gradient(180deg,#fff,#9fc4f5); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.tagline { color:var(--dim); font-size:15px; margin:0 0 20px; }
.features { list-style:none; padding:0; margin:0 0 22px; display:grid; gap:8px; text-align:left; }
.features li { border:1px solid var(--line); background:rgba(20,25,34,.72); border-radius:10px;
  padding:11px 13px; font-size:13px; color:var(--dim); }
.features b { display:block; color:var(--fg); font-size:13.5px; margin-bottom:2px; }
.auth-card { background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:22px; width:min(420px,100%); }

/* ---------- header ---------- */
#topbar { display:flex; align-items:center; gap:16px; padding:12px 16px; flex-wrap:wrap;
  background:rgba(11,14,19,.94); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:1100;
  backdrop-filter:blur(8px); }
#topbar .brand { font-size:17px; cursor:pointer; margin:0; white-space:nowrap; }
#topbar nav { display:flex; gap:14px; font-size:14px; }
#topbar nav a { color:var(--dim); }
#topbar nav a.active { color:var(--fg); font-weight:600; }
#topbar .right { margin-left:auto; display:flex; align-items:center; gap:9px; }
.chip { background:var(--panel2); border:1px solid var(--line); border-radius:20px;
        padding:4px 11px; font-size:12.5px; color:var(--dim); }

main { padding:16px; max-width:1240px; margin:0 auto; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:15px; }
.card + .card { margin-top:14px; }
.pill { display:inline-block; border:1px solid var(--line); background:var(--panel2); border-radius:20px;
  padding:3px 10px; font-size:12px; color:var(--dim); }
.pill.live { color:#fff; background:var(--bad); border-color:var(--bad); font-weight:700; }
.pill.ok { color:var(--ok); border-color:var(--ok); }
.pill.warn { color:var(--warn); border-color:var(--warn); }

/* ---------- team cards ---------- */
.team-card { display:flex; flex-direction:column; gap:8px; }
.team-card .name { font-size:17px; font-weight:650; }
.team-card .meta { color:var(--dim); font-size:13px; }

/* ---------- scoreboard ---------- */
.board { background:linear-gradient(180deg,#101722,#0d121a); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px; text-align:center; }
.board .score { font-size:42px; font-weight:800; letter-spacing:.02em; }
.board .sub { color:var(--dim); font-size:14px; }
.board .speed { color:var(--gold); font-weight:700; }

.diamond-live { position:relative; width:104px; height:104px; margin:12px auto; transform:rotate(45deg);
  border:2px solid var(--line); border-radius:8px; }
.diamond-live .b { position:absolute; width:22px; height:22px; border-radius:4px;
  background:#1a2230; border:2px solid var(--line); }
.diamond-live .b.on { background:var(--gold); border-color:var(--gold); }
.diamond-live .b1 { top:-11px; right:-11px; } .diamond-live .b2 { bottom:-11px; right:-11px; }
.diamond-live .b3 { top:-11px; left:-11px; } .diamond-live .home { bottom:-11px; left:-11px; }

/* ---------- scoring pad ---------- */
.pad { display:grid; gap:9px; }
.pad .btn-row { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.pad button { padding:16px 10px; font-size:16px; border-radius:12px; }
.pad .huge { padding:20px 10px; font-size:18px; }
.count { font-size:30px; font-weight:800; letter-spacing:.08em; }
.outs { display:flex; gap:6px; justify-content:center; }
.outs i { width:13px; height:13px; border-radius:50%; background:#243040; display:inline-block; }
.outs i.on { background:var(--warn); }

/* ---------- chat ---------- */
.threads { display:flex; flex-direction:column; gap:8px; }
.thread { border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--panel2);
  cursor:pointer; }
.thread.unread { border-color:var(--accent); }
.thread .t { font-weight:600; }
.thread .p { color:var(--dim); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.messages { display:flex; flex-direction:column; gap:10px; max-height:62vh; overflow:auto; padding:4px; }
.msg { max-width:78%; padding:9px 12px; border-radius:14px; background:var(--panel2);
  border:1px solid var(--line); }
.msg.mine { align-self:flex-end; background:#17395f; border-color:#1f4f83; }
.msg .who { font-size:12px; color:var(--dim); margin-bottom:3px; }
.msg.sys { align-self:center; background:transparent; border-style:dashed; color:var(--dim); font-size:13px; }
.msg .radar { color:var(--gold); font-weight:700; }
.composer { display:flex; gap:8px; margin-top:10px; }

/* ---------- watch ---------- */
.video-wrap { position:relative; background:#000; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:16/9; border:1px solid var(--line); }
.video-wrap video { width:100%; height:100%; display:block; background:#000; }
.overlay-score { position:absolute; left:12px; top:12px; right:12px; pointer-events:none;
  font-size:clamp(12px,2.2vw,20px); font-weight:700; line-height:1.35;
  text-shadow:0 2px 6px #000; white-space:pre-line; }
.overlay-score span { background:rgba(0,0,0,.55); padding:2px 7px; border-radius:6px;
  display:inline-block; }

/* ---------- tables ---------- */
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); }
th { color:var(--dim); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- toast ---------- */
.toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:1300;
  background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:11px 15px;
  font-size:14px; box-shadow:0 8px 28px rgba(0,0,0,.5); max-width:92vw; }
.toast.err { border-color:var(--bad); color:#ffd7d5; }
.toast.ok { border-color:var(--ok); }

.spin { display:inline-block; width:12px; height:12px; border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite; vertical-align:-1px; }
@keyframes sp { to { transform:rotate(360deg); } }

@media (max-width:620px) {
  .board .score { font-size:34px; }
  main { padding:12px; }
  #topbar { gap:10px; padding:10px 12px; }
  #topbar nav { order:3; width:100%; justify-content:space-between; }
  .msg { max-width:88%; }
}

/* ---------- KC metro tournaments (free map + team tools) ---------- */
.filterbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.filterbar input, .filterbar select { flex:1 1 170px; min-width:130px; }
.kcwrap { margin-top:12px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.kcmap { display:block; width:100%; height:auto; }
.kcpin { cursor:pointer; }
.kcpin:hover circle { r: 12; stroke:#e6edf3; }
.maplist { margin-top:12px; }
.pinrow { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  padding:7px 0; border-bottom:1px solid var(--line); font-size:14px; }
.pinrow:last-child { border-bottom:0; }
.pinrow a { color:var(--fg); text-decoration:none; }
.pinrow a:hover { color:var(--accent, #2f81f7); text-decoration:underline; }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.sponsor { display:flex; justify-content:space-between; align-items:center; gap:12px;
  border:1px dashed #f9731655; background:#f9731610; border-radius:10px;
  padding:10px 12px; margin-top:12px; }
.card.free { border-color:#2f81f755; background:linear-gradient(180deg, #2f81f710, transparent); }
.card.free h2 { border-bottom:0; }
/* the ask: warm and quiet, never a pop-up or a wall */
.card.donate { border-color:#e3b34155; background:linear-gradient(180deg, #e3b3410e, transparent); }
.card.weather { border-color:#2f81f755; background:linear-gradient(180deg, #2f81f70d, transparent); }
.card.weather h2 { border-bottom:0; }
/* the area picker: six big touch targets, one per state */
.areagrid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px;
  margin-top:14px; }
@media (max-width:760px) { .areagrid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.areatile { display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:14px 16px; text-align:left; background:var(--panel); color:inherit;
  border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.areatile:hover { border-color:#2f81f7; background:#2f81f714; }
.areatile b { font-size:17px; }
.areatile .areago { margin-top:6px; font-size:12px; color:#4c8dff; }
/* long lists (complexes, forecasts, rainout lines) scroll inside their card instead of
   stretching the page to five regions' worth of rows */
.maplist { max-height:340px; overflow-y:auto; }
.card.donate h2 { border-bottom:0; }
.card.donate .hint { margin:8px 0 0; }
.donatebtn { border-color:#e3b34166; color:#e3b341; }
.chip[style*="f97316"] { color:#f97316; }
@media (max-width:620px) { .filterbar input, .filterbar select { flex:1 1 100%; } }

/* ---------- the KC map: projection, labels, legend ---------- */
.kcmap { display:block; width:100%; height:auto; }
.kcmetro { fill:#2f81f70f; stroke:#2f81f766; stroke-dasharray:7 6; stroke-width:1.5; }
.kcmetrotext { fill:#8b949e; font-size:12.5px; letter-spacing:.02em; }
.kccity circle { fill:#6e7681; }
.kccity text { fill:#8b949e; font-size:12.5px; opacity:.9; }
.kccity.major circle { fill:#c9d1d9; r:4; }
.kccity.major text { fill:#c9d1d9; font-size:13.5px; font-weight:600; }
.kccenter circle { fill:#e6edf3; }
.kcpin { cursor:pointer; }
.kcpin .kcpinlabel { fill:#e6edf3; font-size:12.5px;
  paint-order:stroke; stroke:#0b1220; stroke-width:3.5px; stroke-linejoin:round; }
.kcpin.hot circle:not(.kchit), .kcpin:hover circle:not(.kchit) { stroke:#e6edf3; stroke-width:3; }
.kcpin.hot .kcpinlabel, .kcpin:hover .kcpinlabel { fill:#fff; }
.kcscale line { stroke:#8b949e; stroke-width:1.5; }
.kcscale text { fill:#8b949e; font-size:11.5px; }
.kcnorth path { fill:#c9d1d9; }
.kcnorth text { fill:#c9d1d9; font-size:12px; font-weight:600; }
.kclegend { display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:10px; font-size:13px;
  color:#8b949e; }
.kclegend .lg { display:inline-flex; align-items:center; gap:6px; }
.dot.exact { background:#c9d1d9; }
.dot.approx { background:transparent; border:2.5px solid #c9d1d9; box-sizing:border-box; }
.dot.metro { background:transparent; border:1.5px dashed #2f81f7; box-sizing:border-box; }
.pinrow { cursor:pointer; }

/* ---------- past events & results ---------- */
.card.past { border-color:#8b949e44; }
.resultsbox { margin-top:10px; border:1px solid var(--line); border-radius:10px;
  padding:9px 11px; font-size:13.5px; background:#8b949e0f; }
.resultsbox b { color:#e6edf3; }
.resultdiv { margin-top:10px; }
.resultdiv .resulthead { font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--dim); margin-bottom:2px; }
.place { min-width:34px; font-variant-numeric:tabular-nums; color:#f0b429; font-weight:700; }

/* score lines in past results */
.pinrow.game { gap:6px; }
.pinrow.game .runs { min-width:26px; text-align:right; font-variant-numeric:tabular-nums;
  font-weight:700; color:#8b949e; }
.pinrow.game .won { color:#3fb950; }

/* ---------- real map (Leaflet + OpenStreetMap tiles) ---------- */
.tqmap { height: 460px; width: 100%; background:#0b1220; position:relative; z-index:0; }
@media (max-width:620px) { .tqmap { height: 320px; } }
.leaflet-container { background:#0b1220; font:inherit; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background:#161b22; color:#e6edf3;
  border:1px solid var(--line); }
.leaflet-popup-content { margin:10px 12px; font-size:13.5px; line-height:1.45; }
.leaflet-container a { color:#2f81f7; }
.leaflet-control-attribution { background:#161b22cc !important; color:#8b949e !important;
  font-size:10.5px; }
.leaflet-control-attribution a { color:#8b949e !important; }
.pop-events { margin-top:6px; }
.pop-event { border-top:1px solid var(--line); padding-top:4px; margin-top:4px; }
.pop-links { margin-top:8px; display:flex; gap:10px; }
.pop-status { margin-top:4px; font-weight:600; }
.pop-status.open { color:#3fb950; } .pop-status.closed { color:#f85149; }
.pop-status.partial, .pop-status.delayed { color:#f0b429; }

/* ---------- field-status board + chips ---------- */
.card.fields { border-color:#3fb95055; }
.statuschip { display:inline-flex; align-items:center; gap:5px; font-size:12.5px;
  border:1px solid var(--line); border-radius:999px; padding:3px 9px; }
.statuschip.open { border-color:#3fb95055; color:#3fb950; }
.statuschip.partial, .statuschip.delayed { border-color:#f0b42955; color:#f0b429; }
.statuschip.closed { border-color:#f8514955; color:#f85149; }
.statuschip.weather { border-color:#2f81f755; color:#2f81f7; }
.statusrow { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.dot.open { background:#3fb950; } .dot.closed { background:#f85149; }
.dot.partial, .dot.delayed { background:#f0b429; }
.dot.unknown { background:#8b949e; }

/* ---------- pool standings + live game rows ---------- */
table.standings { width:100%; border-collapse:collapse; margin-top:6px; font-size:14px; }
table.standings th { text-align:left; color:var(--dim); font-weight:600; padding:5px 6px;
  border-bottom:1px solid var(--line); }
table.standings td { padding:5px 6px; border-bottom:1px solid #1b2029; }
table.standings th.num, table.standings td.num { text-align:right;
  font-variant-numeric:tabular-nums; }
.pinrow.game.live { border-left:3px solid #f85149; padding-left:8px;
  background:#f8514910; }
.pill.live { border-color:#f85149; color:#f85149; }
button.small.on { border-color:var(--accent); color:var(--accent); }
/* one standings table per age group + division + pool, never one merged table */
.poollist { display:grid; gap:12px; margin-top:6px; }
.poolblock { border:1px solid var(--line); border-radius:10px; padding:8px 10px 4px;
  background:#12172244; }
.poolhead { font-size:12px; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  color:var(--dim); }
.poolblock table.standings { margin-top:2px; }
table.standings tr.pending td { color:var(--dim); }
table.standings tr.pending td b { font-weight:600; }
.gamediv { font-size:12px; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  color:var(--dim); margin:10px 0 2px; }
/* ---------- add to home screen ---------- */
.addhome { position:fixed; left:10px; right:10px; bottom:10px; z-index:60; max-width:640px;
  margin:0 auto; display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  justify-content:space-between; border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; background:#161c28; box-shadow:0 10px 30px #00000099; }
.addhome .addhome-body { flex:1 1 230px; }
.addhome b { display:block; margin-bottom:3px; }

/* ---------- traffic dashboard ---------- */
.kpis { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.kpi { flex:1 1 130px; border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  background:#12172244; }
.kval { font-size:24px; font-weight:700; color:var(--accent);
  font-variant-numeric:tabular-nums; }
.klab { font-size:12px; color:var(--dim); margin-top:2px; }
.ksub { font-size:11px; color:#6e7681; margin-top:3px; }
.chart { display:flex; align-items:flex-end; gap:3px; height:110px; margin-top:10px;
  border-bottom:1px solid var(--line); }
.chart .bar { flex:1 1 0; background:linear-gradient(180deg,#2f81f7,#1f6feb);
  border-radius:3px 3px 0 0; min-height:2px; opacity:.85; }
.chart .bar:hover { opacity:1; }
.pill.live { border-color:#f85149; color:#f85149; }