/* Silly Point. Flat colour only: outfield green, scoreboard green, chalk and brass. No gradients, no glows. */
@font-face { font-family: "Bitter"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/bitter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Bitter"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/bitter-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Bitter"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/bitter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bitter"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/bitter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

:root {
  --outfield: #14261d;   --stripe: #172c22;   --inset: #0f1c15;
  --board: #1c3528;      --board-hi: #244233;
  --rule: #37563f;       --line: #6f8c78;
  --chalk: #ece6d3;      --dim: #a9b9aa;
  --brass: #c6a85c;      --brass-hi: #d1b469;  --brass-dim: #8f7a43;  --on-brass: #17200f;
  --brick: #d4897d;
  --serif: "Bitter", Georgia, "Times New Roman", serif;
  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", "Barlow", sans-serif;
  --radius: 6px;
  --gutter: clamp(16px, 4vw, 32px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  color: var(--chalk); font: 400 1rem/1.5 var(--sans); -webkit-font-smoothing: antialiased;
  background-color: var(--outfield);
  /* mown-grass stripes: hard-edged SVG rectangles, not a gradient */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='8'%3E%3Crect x='80' width='80' height='8' fill='%23172c22'/%3E%3C/svg%3E");
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
}
button, input { font: inherit; color: inherit; }
h1, h2, p, ol, ul, dl, dd { margin: 0; }
.wrap { width: min(100% - 2 * var(--gutter), 1120px); margin-inline: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 20; padding: 10px 14px; background: var(--brass); color: var(--on-brass); font-weight: 600; border-radius: var(--radius); }
.skip:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
.stage:focus, h1:focus, h2:focus { outline: none; }          /* headings are focused by code for screen readers; they are not controls */

/* ---------- masthead ---------- */
.masthead { background: var(--outfield); border-bottom: 1px solid var(--rule); padding-top: env(safe-area-inset-top); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.logo { width: 26px; height: 34px; flex: none; color: var(--brass); }
.brand-text { display: grid; min-width: 0; }
.brand-name { font: 700 clamp(1.15rem, 0.95rem + 1vw, 1.5rem)/1.1 var(--serif); }
.brand-sub { font-size: 0.8125rem; color: var(--dim); }
.tools { display: flex; align-items: center; gap: 10px; flex: none; }
.streak { display: flex; align-items: baseline; gap: 6px; padding: 5px 12px; border: 1px solid var(--rule); border-radius: var(--radius); }
.streak-n { font: 700 1.5rem/1 var(--cond); color: var(--brass); }
.streak-l { font-size: 0.8125rem; color: var(--dim); }

/* ---------- buttons ---------- */
.btn { min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--chalk); font-weight: 600; cursor: pointer; }
.btn:hover { background: var(--board-hi); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-primary { background: var(--brass); border-color: var(--brass); color: var(--on-brass); }
.btn-primary:hover { background: var(--brass-hi); border-color: var(--brass-hi); }
.btn-quiet { border-color: transparent; color: var(--dim); text-decoration: underline; text-underline-offset: 4px; padding-inline: 0; margin-right: 10px; }
.btn-quiet:hover { background: transparent; color: var(--chalk); }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; flex: 1 0 auto; align-content: start; }
.scorebook { display: none; }
.stage { min-width: 0; padding-block: 18px 56px; }
@media (min-width: 900px) {
  .layout { grid-template-columns: 300px minmax(0, 1fr); column-gap: clamp(28px, 4vw, 56px); padding-top: 26px; }
  .tracker { display: none; }
  .scorebook { display: block; position: sticky; top: 16px; align-self: start; }
  .stage { padding-top: 4px; max-width: 760px; }
}

/* ---------- the over on the pitch (phones and tablets) ---------- */
.tracker { padding-block: 18px 0; }
.tr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.tr-date { font-weight: 600; }
.tr-over { color: var(--dim); font-size: 0.9375rem; }
.tr-right { display: flex; align-items: baseline; gap: 14px; }
.tr-streak { display: none; font-size: 0.9375rem; color: var(--brass); font-weight: 600; }
.pitch { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.pitch .stumps { width: 18px; height: 24px; color: var(--brass); }
.strip { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background: var(--board); border-block: 1px solid var(--brass-dim); }
.strip::before, .strip::after { content: ""; position: absolute; top: -1px; bottom: -1px; border-left: 1px solid var(--brass-dim); }
.strip::before { left: 12px; } .strip::after { right: 12px; }
.ball {
  --d: clamp(30px, calc((100vw - 140px) / 8.4), 50px);
  display: inline-grid; place-items: center; width: var(--d); height: var(--d); padding: 0; border-radius: 50%;
  border: 1.5px solid var(--line); background: transparent; color: var(--chalk);
  font: 700 calc(var(--d) * 0.44)/1 var(--cond); cursor: pointer;
}
.ball:hover { background: var(--board-hi); }
.ball.solved { background: var(--brass); border-color: var(--brass); color: var(--on-brass); }
.ball.gaveup { border-color: var(--brick); color: var(--brick); }
.ball[aria-current="step"] { box-shadow: 0 0 0 2px var(--board), 0 0 0 4px var(--chalk); }
.ball.sample { --d: 40px; cursor: default; }
.tr-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; min-height: 40px; }
.tr-runs { font-size: 0.9375rem; color: var(--dim); }
.tr-runs b { font: 700 1.5rem/1 var(--cond); color: var(--brass); margin-left: 6px; }

/* ---------- scorebook page (laptops) ---------- */
.sb-title { font: 700 1.25rem/1.2 var(--serif); }
.sb-date { color: var(--dim); font-size: 0.9375rem; margin: 2px 0 14px; }
.deliveries { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: 2.2ch minmax(0, 1fr) auto; gap: 1px 12px; align-items: center; width: 100%; padding: 11px 10px 11px 12px; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-left: 3px solid transparent; cursor: pointer; }
.row:hover { background: var(--board); }
.row[aria-current="step"] { background: var(--board); border-left-color: var(--brass); }
.row .no { font: 600 1.125rem/1 var(--cond); color: var(--dim); grid-row: 1 / 3; }
.row .what { font-weight: 600; }
.row .tag { grid-column: 2; font-size: 0.8125rem; color: var(--dim); }
.row .res { grid-column: 3; grid-row: 1 / 3; min-width: 2.4ch; text-align: right; font: 700 1.625rem/1 var(--cond); }
.res.is-runs { color: var(--brass); } .res.is-w { color: var(--brick); } .res.is-open { color: var(--dim); font-weight: 600; }
.totals { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 14px; padding: 12px 14px; background: var(--board); border-radius: var(--radius); }
.totals-label { font-weight: 600; }
.totals-meta { font-size: 0.875rem; color: var(--dim); }
.totals-meta:empty { display: none; }
.totals-num { font: 700 3.25rem/1 var(--cond); color: var(--brass); }

/* ---------- a delivery ---------- */
.d-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.d-where { font-weight: 600; }
.d-kind { color: var(--dim); }
.pill { display: inline-block; padding: 1px 9px; border: 1px solid var(--rule); border-radius: 3px; font-size: 0.8125rem; color: var(--dim); }
.ask { margin: 12px 0 8px; font: 600 clamp(1.4rem, 1.05rem + 1.7vw, 2.05rem)/1.28 var(--serif); max-width: 36em; text-wrap: balance; }
.pool { color: var(--dim); }
.guess { display: flex; gap: 10px; margin-top: 22px; }
.combo { position: relative; flex: 1 1 auto; min-width: 0; }
.combo input { width: 100%; min-height: 52px; padding: 0 14px; background: var(--board); border: 1px solid var(--line); border-radius: var(--radius); font-size: 1.0625rem; }
.combo input::placeholder { color: var(--dim); }
.suggest { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 6; padding: 4px; list-style: none; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); max-height: min(320px, 46vh); overflow-y: auto; }
.suggest[hidden] { display: none; }
.suggest li { padding: 11px 12px; border-radius: 4px; cursor: pointer; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--board-hi); box-shadow: inset 3px 0 0 var(--brass); }
.guess .btn { flex: none; min-width: 88px; min-height: 52px; }
.feedback { margin-top: 12px; }
.feedback:empty { margin-top: 0; }
.note { padding: 10px 14px; background: var(--board); border-left: 3px solid var(--brass-dim); }
.note.dot { border-left-color: var(--brick); }
.note p + .chips { margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; font-weight: 500; cursor: pointer; }
.chip:hover { background: var(--board-hi); }
.misses { margin-top: 14px; color: var(--dim); font-size: 0.9375rem; }
.misses[hidden] { display: none; }
.misses .chips { margin-top: 6px; }
.miss { padding: 3px 10px; border: 1px solid var(--rule); border-radius: 3px; text-decoration: line-through; text-decoration-color: var(--brick); }
.actions { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.confirm p { color: var(--dim); }

/* ---------- verdict and ledger ---------- */
.verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 20px; align-items: center; margin-top: 22px; padding: 16px 20px; background: var(--board); border-left: 4px solid var(--brass); }
.verdict.gave { border-left-color: var(--brick); }
.v-runs { grid-row: 1 / 4; font: 700 clamp(3.25rem, 2rem + 5vw, 5rem)/0.9 var(--cond); color: var(--brass); }
.verdict.gave .v-runs { color: var(--brick); }
.v-head { font-weight: 600; color: var(--dim); }
.v-who { font: 600 1.375rem/1.25 var(--serif); }
.v-remark { font: italic 400 1rem/1.4 var(--serif); color: var(--dim); }
.ledger-wrap { margin-top: 24px; }
.ledger { width: 100%; border-collapse: collapse; }
.ledger caption { text-align: left; padding-bottom: 8px; color: var(--dim); }
.ledger th { padding: 6px 8px; text-align: left; font-size: 0.875rem; font-weight: 500; color: var(--dim); border-bottom: 1px solid var(--line); }
.ledger th.r, .ledger td.r { text-align: right; }
.ledger td { padding: 9px 8px; border-bottom: 1px solid var(--rule); }
.ledger td.n { width: 3.2ch; color: var(--dim); font: 600 1.0625rem var(--cond); }
.ledger td.r { font: 700 1.375rem/1 var(--cond); color: var(--brass); }
.ledger tr.you td { background: var(--board); }
.ledger tr.you td:first-child { box-shadow: inset 3px 0 0 var(--brass); }
.ledger tr.gap td { color: var(--dim); text-align: center; border-bottom: 0; }
.step-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ---------- innings summary ---------- */
.sum-title { font: 700 clamp(1.6rem, 1.2rem + 1.8vw, 2.25rem)/1.2 var(--serif); }
.board { display: inline-flex; gap: 6px; margin: 18px 0 6px; padding: 12px; background: var(--inset); border: 1px solid var(--rule); border-radius: var(--radius); }
.tile { position: relative; display: grid; place-items: center; width: clamp(54px, 15vw, 88px); height: clamp(76px, 21vw, 118px); background: var(--board); border-top: 3px solid var(--brass-dim); font: 700 clamp(3.25rem, 11vw, 5.75rem)/1 var(--cond); color: var(--chalk); }
.tile::after { content: ""; position: absolute; inset-inline: 0; top: 52%; border-top: 2px solid var(--inset); }
.board-label { color: var(--dim); margin-bottom: 18px; }
.standing { font: 600 1.25rem/1.35 var(--serif); max-width: 30em; }
.standing-sub { color: var(--dim); margin-top: 4px; }
.over { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.over .ball { cursor: default; }
.over .ball:hover { background: transparent; }
.over .ball.solved:hover { background: var(--brass); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-top: 22px; max-width: 460px; }
.fact { padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius); }
.fact dt { color: var(--dim); font-size: 0.875rem; }
.fact dd { font: 700 1.75rem/1.1 var(--cond); color: var(--brass); }
.next-over { margin-top: 22px; color: var(--dim); }
.next-over b { font: 600 1.125rem var(--cond); color: var(--chalk); letter-spacing: 0.03em; }

/* ---------- states, dialog, toast ---------- */
.state { display: grid; justify-items: start; gap: 10px; padding: 32px 0; max-width: 34em; }
.state h1 { font: 700 1.5rem/1.25 var(--serif); }
.state p { color: var(--dim); }
.ball-icon { width: 44px; height: 44px; }
.spin { animation: roll 1.6s linear infinite; }
@keyframes roll { to { transform: rotate(360deg); } }
.foot { padding-block: 18px 28px; border-top: 1px solid var(--rule); color: var(--dim); font-size: 0.8125rem; }

dialog { width: min(560px, calc(100% - 2 * var(--gutter))); max-height: min(88vh, 760px); padding: 0; background: var(--board); color: var(--chalk); border: 1px solid var(--line); border-radius: var(--radius); }
dialog::backdrop { background: rgb(8 16 11 / 0.8); }
.dlg-body { padding: 22px 24px 24px; }
.dlg-body h2 { font: 700 1.5rem/1.2 var(--serif); margin-bottom: 12px; }
.dlg-body p { margin-bottom: 12px; max-width: 34em; }
.legend { display: grid; gap: 8px; margin: 14px 0 16px; padding: 12px 14px; background: var(--inset); border-radius: var(--radius); }
.legend div { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; }
.legend dt { display: flex; }
.legend-text { font-weight: 600; }
.legend dd { color: var(--dim); }
.dlg-actions { margin-top: 18px; }
.toast { position: fixed; inset-inline: 0; bottom: max(16px, env(safe-area-inset-bottom)); display: grid; place-items: center; pointer-events: none; z-index: 30; }
.toast span { padding: 10px 16px; background: var(--chalk); color: var(--outfield); font-weight: 600; border-radius: var(--radius); opacity: 0; transition: opacity 0.15s; }
.toast.on span { opacity: 1; }

/* ---------- small phones ---------- */
@media (max-width: 420px) {
  .brand-sub { display: none; }
  .streak { display: none; }
  .tr-streak { display: inline; }
  .tools { gap: 8px; }
  .btn:not(.btn-quiet) { padding-inline: 14px; }
  .verdict { grid-template-columns: minmax(0, 1fr); }
  .v-runs { grid-row: auto; }
  .guess { gap: 8px; }
  .guess .btn { min-width: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; }
  .toast span { transition: none; }
}