:root{
  --bg:#0b1f14;
  --panel:#10291c;
  --line:rgba(232,240,228,.12);
  --ink:#e8f0e4;
  --muted:rgba(232,240,228,.62);
  --accent:#3dd68c;
  --head:#163526;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  background:
    radial-gradient(900px 420px at 20% -10%, rgba(61,214,140,.16), transparent 55%),
    var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1640px;margin:0 auto;padding:28px 18px 48px}
header{margin-bottom:22px}
.eyebrow{
  margin:0 0 8px;
  font-size:.72rem;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--accent);
}
h1{margin:0;font-size:clamp(2rem,5vw,2.8rem);letter-spacing:-.03em;line-height:1}
.sub{margin:10px 0 0;color:var(--muted);font-size:.98rem}
.table-scroller{
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
table{width:100%;border-collapse:collapse;min-width:1780px;table-layout:auto}
th,td{
  padding:14px 16px;
  text-align:left;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
  font-size:.95rem;
  white-space:nowrap;
}
th{
  position:sticky;top:0;z-index:1;
  background:var(--head);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
}
tr:last-child td{border-bottom:none}
.when{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.88rem;min-width:11.5rem}
.away,.home{font-weight:600;min-width:11rem}
.pick{
  min-width:7.5rem;
  background:rgba(61,214,140,.06);
  outline:none;
  cursor:text;
}
.pick:focus{background:rgba(61,214,140,.14);box-shadow:inset 0 0 0 1px var(--accent)}
.hint{margin:16px 4px 0;color:var(--muted);font-size:.85rem}
@media (max-width:640px){
  th,td{padding:12px 10px;font-size:.9rem}
  .pick{min-width:6.5rem}
  table{min-width:1600px}
}

.pick.locked{
  background:rgba(232,240,228,.04);
  color:transparent;
  position:relative;
}
.pick.locked::after{
  content:"••••";
  color:rgba(232,240,228,.35);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  letter-spacing:.2em;font-size:.8rem;
  pointer-events:none;
}

.pick.closer{
  background:rgba(61,214,140,.16);
  box-shadow:inset 3px 0 0 var(--accent);
}
.score-strip{
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  padding:16px 18px 18px;
}
.score-title{
  font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;
}
.score-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:14px;
  align-items:center;
}
.score-card{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  background:rgba(61,214,140,.04);
}
.score-card.lead{
  border-color:rgba(61,214,140,.45);
  background:rgba(61,214,140,.12);
}
.score-name{font-weight:700;font-size:1.05rem;margin-bottom:4px}
.score-wins{font-variant-numeric:tabular-nums}
.score-err{color:var(--muted);font-size:.9rem;margin-top:2px;font-variant-numeric:tabular-nums}
.score-mid{text-align:center;padding:0 8px}
.score-ties{color:var(--muted);font-size:.9rem}
.score-leader{
  margin-top:6px;font-weight:700;color:var(--accent);
  letter-spacing:.02em;
}
@media (max-width:640px){
  .score-grid{grid-template-columns:1fr;gap:10px}
  .score-mid{order:3}
}

.notes{
  min-width:9rem;
  max-width:14rem;
  white-space:normal;
  background:rgba(232,240,228,.03);
  outline:none;
  cursor:text;
  color:var(--muted);
}
.notes:focus{background:rgba(61,214,140,.10);box-shadow:inset 0 0 0 1px var(--accent);color:var(--ink)}
.notes:empty::before{content:" ";}