/* =============================================================
   Birdies Live Scorer — digital chalkboard for cricket
   Design brief: docs/superpowers/specs/2026-06-01-birdies-live-scorer-brief.md
   Model: full game state always on screen, mark darts on the grid.
   Two type scales coexist: oche-readable (scores/turn) + never-miss (taps).
   ============================================================= */

:root {
  /* --- palette: deep slate-green near-black (chalkboard), brand hue ~150 ---
     accent = scoreboard amber-red (action); chalk-green = closed (shared
     "live language" with the viewer wall). Neutrals tinted toward the green. */
  --surface-0: oklch(16% 0.012 158);   /* page / chalkboard field */
  --surface-1: oklch(20% 0.014 158);   /* resting side panel */
  --surface-2: oklch(25% 0.016 158);   /* raised: number tap target, controls */
  --surface-3: oklch(31% 0.018 158);   /* pressed / hover lift */
  --line:      oklch(34% 0.014 158);   /* hairline dividers */

  --ink:       oklch(95% 0.006 158);   /* primary light text */
  --ink-dim:   oklch(72% 0.010 158);   /* secondary */
  --ink-faint: oklch(56% 0.012 158);   /* tertiary / placeholders */

  --accent:     oklch(64% 0.20 35);    /* amber-red: action, throwing field */
  --accent-ink: oklch(20% 0.05 35);    /* text on accent */
  --accent-dim: oklch(50% 0.16 35);

  --chalk:      oklch(82% 0.17 152);    /* fresh chalk-green: open marks */
  --closed:     oklch(72% 0.20 150);    /* closed number (3 marks) */
  --closed-bg:  oklch(30% 0.06 152);    /* closed row tint behind marks */

  --warn:       oklch(78% 0.15 85);     /* sync: catching up */
  --bad:        oklch(62% 0.20 27);     /* sync: offline */

  /* --- space (4pt scale, semantic) --- */
  --s-2: 2px; --s-1: 4px; --s-sm: 8px; --s-md: 12px; --s-lg: 16px;
  --s-xl: 24px; --s-2xl: 32px; --s-3xl: 48px;

  /* --- type --- */
  --font-num: 'Saira Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-ui:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* --- motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-press: cubic-bezier(0.25, 1, 0.5, 1);

  --radius: 14px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--surface-0);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 450;
  -webkit-text-size-adjust: 100%;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  font-kerning: normal;
}
[hidden] { display: none !important; }
button { font-family: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* tabular numerals everywhere a number lives */
.side-pts, .num, .leg-badge, .mark, .side-legs { font-variant-numeric: tabular-nums; }

/* =============================================================
   BOARD — the chalkboard, full viewport, three vertical regions:
   scoreline (header) · chalk (grid, flexes) · rail (footer)
   ============================================================= */
.board {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- scoreline: the distance-readable tier ---------- */
.scoreline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--s-sm);
  padding: var(--s-sm) var(--s-md) 0;
}
.side {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  padding: var(--s-md) var(--s-lg);
  border-radius: var(--radius);
  background: var(--surface-1);
  transition: background 180ms var(--ease-out);
  min-width: 0;
}
.side--right { text-align: right; }

.side-turn {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--accent-ink);
  opacity: 0;
  height: 0.85rem;
  transition: opacity 160ms var(--ease-out);
}
.side-name {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: clamp(1.1rem, 3.4vw, 2rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 180ms var(--ease-out);
}
.side-pts {
  font-family: var(--font-num);
  font-weight: 900;
  /* the single biggest element on screen — readable from the oche */
  font-size: clamp(3.4rem, 13vw, 8rem);
  line-height: 0.84;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: var(--s-1);
  transition: color 180ms var(--ease-out);
  font-variant-numeric: tabular-nums;
}
/* foot row: legs pips on the inner edge, MPR stats on the outer */
.side-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  margin-top: var(--s-sm);
  min-height: 30px;
}
.side-legs {
  display: flex;
  gap: 5px;
  min-height: 12px;
  flex-shrink: 0;
}
.side-legs .pip {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--line);
}
.side-legs .pip.won { background: var(--chalk); }

/* MPR readout: a quiet two-stat block (leg + match), tabular */
.mpr {
  display: flex;
  gap: var(--s-lg);
  margin: 0;
}
.mpr > div { display: flex; flex-direction: column; line-height: 1; }
.mpr dt {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 3px;
}
.mpr dd {
  margin: 0;
  font-family: var(--font-num);
  font-weight: 800;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.side--right .side-foot { flex-direction: row; }
.side--right .mpr { justify-content: flex-end; }

/* active player's side — the dominant "your turn" signal */
.side.is-throwing {
  background: var(--accent);
}
.side.is-throwing .side-name { color: var(--accent-ink); }
.side.is-throwing .side-pts { color: var(--accent-ink); }
.side.is-throwing .side-turn { opacity: 0.85; }
.side.is-throwing .side-legs .pip { background: color-mix(in oklch, var(--accent-ink) 35%, transparent); }
.side.is-throwing .side-legs .pip.won { background: var(--accent-ink); }
.side.is-throwing .mpr dt { color: color-mix(in oklch, var(--accent-ink) 70%, transparent); }
.side.is-throwing .mpr dd { color: var(--accent-ink); }

/* ---------- scoreline middle column ---------- */
.scoreline-mid {
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-content: space-between;
  gap: var(--s-sm);
  padding: var(--s-sm) 0;
}
.leg-meta { display: grid; justify-items: center; gap: 2px; }
/* the match leg score — prominent, the standing at a glance */
.leg-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-num);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.leg-score-sep { color: var(--ink-faint); font-weight: 700; }
.leg-badge {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  text-transform: uppercase;
  white-space: nowrap;
}
.turn-dots { display: flex; gap: var(--s-sm); align-self: center; }
.turn-dots .dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 2px var(--line);
  transition: background 140ms var(--ease-press), box-shadow 140ms var(--ease-press), transform 140ms var(--ease-press);
}
.turn-dots .dot.lit {
  background: var(--accent);
  box-shadow: inset 0 0 0 2px transparent;
  transform: scale(1.08);
}
.turn-dots .dot.miss {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 2px var(--ink-faint);
}
.sync {
  font-size: 0.8rem; line-height: 1;
  color: var(--chalk);
  transition: color 200ms var(--ease-out);
}
.sync[data-state="catch"] { color: var(--warn); animation: pulse 1.1s ease-in-out infinite; }
.sync[data-state="offline"] { color: var(--bad); }
@keyframes pulse { 50% { opacity: 0.35; } }

/* =============================================================
   CHALK — the grid. 7 rows. Each: [marks L][NUMBER tap][marks R]
   The number cell is the never-miss tap target.
   ============================================================= */
.chalk {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: var(--s-1);
  padding: var(--s-sm) var(--s-md) var(--s-md);
  min-height: 0;
}
.crow {
  display: grid;
  grid-template-columns: 1fr minmax(96px, 0.6fr) 1fr;
  gap: var(--s-sm);
  align-items: stretch;
  min-height: 0;
}

/* the number: a real, generous tap target that marks for the active player */
.num {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-num);
  font-weight: 800;
  font-size: clamp(1.8rem, 5.2vh, 3rem);
  color: var(--ink);
  letter-spacing: 0.01em;
  position: relative;
  transition: transform 90ms var(--ease-press), background 120ms var(--ease-out);
  touch-action: manipulation;
}
.num:active { transform: scale(0.96); background: var(--surface-3); }
/* armed-multiplier hint sits under the number so you know what a tap will mark */
.num::after {
  content: attr(data-arm);
  position: absolute;
  bottom: 6px;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent);
  opacity: 0;
  transition: opacity 140ms var(--ease-out);
}
body[data-arm="D"] .num::after,
body[data-arm="T"] .num::after { opacity: 0.9; }
.num.dead { opacity: 0.32; pointer-events: none; }

/* mark cells: the chalk. Big enough to count at a glance. */
.marks {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.4vw, 12px);
  padding: 0 var(--s-md);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  transition: background 160ms var(--ease-out);
  overflow: hidden;
}
.marks.right { justify-content: flex-end; }
.marks.closed { background: var(--closed-bg); }
/* closed AND still scoring on the opp's open number — reads as "hot" */
.marks.live { box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--accent) 60%, transparent); }

/* one evolving chalk mark per number: / → ╳ → ╳ circled */
.mark {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(2.2rem, 7vh, 3.6rem);
  height: clamp(2.2rem, 7vh, 3.6rem);
  font-family: var(--font-num);
  font-weight: 800;
  font-size: clamp(1.6rem, 5vh, 2.8rem);
  line-height: 1;
  color: var(--chalk);
  animation: chalk-in 180ms var(--ease-out);
}
/* the slash leans like a hand-drawn stroke */
.mark.stage-1 { transform: rotate(-4deg); }
/* closed: a circle drawn around the X */
.mark.close { color: var(--closed); }
.mark.close::before {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 3px solid var(--closed);
  animation: ring-in 220ms var(--ease-out);
}
@keyframes chalk-in { from { opacity: 0; transform: translateY(3px) scale(0.9); } to { opacity: 1; } }
@keyframes ring-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

/* overflow points indicator: closed-but-still-scoring (a DC weak spot) */
.marks .overflow {
  font-family: var(--font-num);
  font-weight: 900;
  font-size: clamp(1.1rem, 3.2vh, 1.7rem);
  color: var(--accent);
  margin-inline-start: auto;
  padding-inline: var(--s-sm);
}
.marks.right .overflow { margin-inline: 0 auto; order: -1; }

/* =============================================================
   RAIL — modifier + actions. Thumb zone, always reachable.
   ============================================================= */
.rail {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: var(--s-md);
  padding: var(--s-sm) var(--s-md) var(--s-md);
  border-top: 1px solid var(--line);
  background: var(--surface-0);
}
.mult { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-1); }
.mult-btn {
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-dim);
  font-weight: 700;
  font-size: clamp(0.85rem, 2.2vw, 1.05rem);
  padding: var(--s-md) var(--s-1);
  min-height: 60px;
  letter-spacing: 0.01em;
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out), transform 90ms var(--ease-press);
  touch-action: manipulation;
}
.mult-btn:active { transform: scale(0.97); }
.mult-btn.is-on {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
}
.mult-btn[data-mult="S"].is-on { /* single is the resting default — quieter */
  background: var(--surface-3);
  color: var(--ink);
}

.acts { display: grid; grid-template-columns: 0.85fr 0.85fr 1.3fr; gap: var(--s-1); }
.act {
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: clamp(0.85rem, 2.2vw, 1.1rem);
  min-height: 60px;
  padding: var(--s-md) var(--s-1);
  transition: background 120ms var(--ease-out), transform 90ms var(--ease-press), opacity 120ms;
  touch-action: manipulation;
}
.act:active { transform: scale(0.97); }
.act--undo { background: var(--surface-2); color: var(--ink); }
.act--miss { background: var(--surface-2); color: var(--ink-dim); }
.act--enter {
  background: var(--chalk);
  color: oklch(22% 0.06 152);
  font-weight: 800;
  font-family: var(--font-num);
  letter-spacing: 0.01em;
}
.act:disabled { opacity: 0.35; pointer-events: none; }

/* =============================================================
   FINIS — quiet win takeover (no celebration, per brief)
   ============================================================= */
/* Quiet win bar pinned to the bottom — the closed-out board stays visible
   above it for review (per brief: no celebration, review the board). */
.finis {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--surface-2);
  border-top: 2px solid var(--chalk);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--s-lg);
  padding: var(--s-lg) var(--s-xl) max(var(--s-lg), env(safe-area-inset-bottom));
  animation: rise-in 280ms var(--ease-out);
}
.finis-label {
  grid-column: 1;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  align-self: end;
}
.finis-name {
  grid-column: 1; grid-row: 2;
  font-family: var(--font-num);
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 0.9;
  color: var(--chalk);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.finis-next, .finis-review {
  grid-row: 1 / 3;
  min-width: 160px; min-height: 72px;
  border-radius: var(--radius-sm);
  font-weight: 800; font-size: 1.1rem;
}
.finis-next { background: var(--chalk); color: oklch(22% 0.06 152); font-family: var(--font-num); letter-spacing: 0.02em; }
.finis-review { background: var(--surface-1); color: var(--ink-dim); font-size: 0.95rem; min-width: 130px; }
@keyframes rise-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }

/* =============================================================
   SETUP — full picker + cork
   ============================================================= */
.setup {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: var(--s-lg);
  padding: max(var(--s-xl), env(safe-area-inset-top)) var(--s-lg) var(--s-lg);
}
.setup-head { display: flex; flex-direction: column; gap: var(--s-1); }
.board-tag {
  font-family: var(--font-num);
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.setup-head h1 {
  font-family: var(--font-num);
  font-weight: 800; font-size: clamp(1.8rem, 6vw, 2.6rem);
  letter-spacing: 0.005em; color: var(--ink);
}
.setup-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); min-height: 0; }
.picker {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-md);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--s-sm);
  min-height: 0;
  background: var(--surface-1);
}
.picker legend {
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 0 var(--s-1);
}
.picker-chosen {
  font-family: var(--font-num);
  font-weight: 700; font-size: clamp(1.3rem, 4vw, 2rem);
  color: var(--ink-faint); line-height: 1.05;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.picker.has .picker-chosen { color: var(--accent); }
.roster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--s-1); align-content: start;
  overflow-y: auto; min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.roster button {
  text-align: left;
  padding: var(--s-md) var(--s-md);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-dim);
  font-weight: 600; font-size: 0.98rem;
  min-height: 52px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out);
}
.roster button.sel { background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.roster button.taken { opacity: 0.3; pointer-events: none; }

.cork { display: grid; gap: var(--s-sm); animation: fade-in 220ms var(--ease-out); }
.cork-q {
  font-weight: 700; font-size: 1rem; color: var(--ink-dim);
  letter-spacing: 0.02em;
}
.cork-choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); }
.cork-btn {
  padding: var(--s-lg); border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink);
  font-weight: 700; font-size: 1.05rem; min-height: 68px;
  transition: background 120ms var(--ease-out), transform 90ms var(--ease-press);
}
.cork-btn:active { transform: scale(0.98); }
.cork-btn.sel { background: var(--accent); color: var(--accent-ink); font-weight: 800; }

.start-btn {
  min-height: 72px; border-radius: var(--radius);
  background: var(--chalk); color: oklch(22% 0.06 152);
  font-family: var(--font-num);
  font-weight: 900; font-size: 1.4rem; letter-spacing: 0.02em;
  transition: opacity 140ms, transform 90ms var(--ease-press);
}
.start-btn:active { transform: scale(0.99); }
.start-btn:disabled { opacity: 0.3; pointer-events: none; }

/* =============================================================
   Portrait / narrow: keep the chalkboard whole, never amputate.
   The grid stays; type scales via vh/vw clamps above.
   ============================================================= */
@media (max-width: 560px) {
  .crow { grid-template-columns: 1fr minmax(72px, 0.5fr) 1fr; }
  .setup-pickers { grid-template-columns: 1fr; }
  .rail { grid-template-columns: 1fr; }
  .acts { grid-template-columns: 0.8fr 0.8fr 1.2fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}