/* Horseshoes.  One page, no framework, no external font, no external anything.
   The palette is the court's: wet clay, concrete, cut grass and a painted stake. */
:root {
  --ink: #f2ece4;
  --ink-dim: #b9ada0;
  --bg: #221a15;
  --bg-2: #2e231c;
  --bg-3: #3a2c23;
  --edge: #4b382c;
  --clay: #7a5140;
  --a: #7f8fa6;
  --b: #a1503f;
  --go: #b7893f;
  --good: #94b96a;
  --warn: #d08a4a;
  --shadow: 0 1px 0 rgba(255, 255, 255, .05), 0 8px 22px rgba(0, 0, 0, .30);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(1200px 700px at 50% -10%, #33261e 0%, var(--bg) 62%) fixed;
  color: var(--ink);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--bg-3); color: var(--ink);
  padding: 8px 14px; z-index: 20; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ---- the bar ---------------------------------------------------------------------------- */
.bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 18px; background: linear-gradient(180deg, #372a21, #2b211a);
  border-bottom: 1px solid var(--edge);
}
.bar h1 {
  margin: 0; font-size: 20px; letter-spacing: .10em; text-transform: uppercase;
  font-weight: 700;
}
.scores { display: flex; align-items: center; gap: 18px; margin-left: 4px; }
.side {
  display: flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 999px;
  border: 1px solid transparent; background: rgba(0, 0, 0, .18);
}
.side.is-turn { border-color: var(--go); background: rgba(183, 137, 63, .16); }
.side b { font-size: 19px; font-variant-numeric: tabular-nums; }
.side .who { color: var(--ink-dim); font-size: 13px; }
.dot { width: 12px; height: 12px; border-radius: 999px; display: inline-block; flex: none; }
.dot-a { background: var(--a); }
.dot-b { background: var(--b); }
.bar-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.btn {
  font: inherit; font-size: 13px; color: var(--ink); background: var(--bg-3);
  border: 1px solid var(--edge); border-radius: 8px; padding: 6px 12px; cursor: pointer;
}
.btn:hover { background: #46362b; }
.btn:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }
.btn.is-on { background: var(--go); border-color: var(--go); color: #241a10; font-weight: 600; }
.btn:disabled { opacity: .42; cursor: default; }
.btn-go {
  width: 100%; padding: 11px; font-size: 16px; font-weight: 700; background: var(--go);
  border-color: #8f6a2d; color: #241a10; letter-spacing: .04em;
}
.btn-go:hover { background: #c9974a; }
.btn-x {
  position: absolute; top: 10px; right: 10px; padding: 2px 10px; font-size: 20px; line-height: 1.2;
}

/* ---- the layout ------------------------------------------------------------------------- */
main {
  display: grid; grid-template-columns: minmax(0, 1fr) 322px; gap: 18px;
  padding: 18px; align-items: start; max-width: 1500px; margin: 0 auto;
}
.stage { position: relative; min-width: 0; }
canvas {
  display: block; width: 100%; border-radius: 12px; border: 1px solid var(--edge);
  background: #4a5f70; box-shadow: var(--shadow);
}
.hud {
  position: absolute; left: 12px; top: 10px; margin: 0; font-size: 12px;
  color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.nogl {
  padding: 26px; border: 1px dashed var(--edge); border-radius: 12px; color: var(--ink-dim);
}
.panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.turn { margin: 0; font-weight: 600; }
.msg { margin: 0; color: var(--ink-dim); min-height: 2.6em; font-size: 14px; }
.card {
  background: linear-gradient(180deg, var(--bg-2), #291f19);
  border: 1px solid var(--edge); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow);
}
.card h2 {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: 700;
}
.fld { display: block; margin: 0 0 12px; font-size: 13px; color: var(--ink-dim); }
.fld output { float: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.fld.chk { display: flex; align-items: center; gap: 8px; color: var(--ink); }
select, input[type="range"] { width: 100%; margin-top: 5px; }
select {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--bg-3);
  border: 1px solid var(--edge); border-radius: 8px; padding: 7px 9px;
}
input[type="range"] { accent-color: var(--go); }
.preview {
  margin: 2px 0 12px; font-size: 13px; color: var(--warn); min-height: 2.8em;
  border-left: 2px solid var(--edge); padding-left: 9px;
}
.preview.is-good { color: var(--good); border-left-color: var(--good); }
.board { width: 100%; border-collapse: collapse; font-size: 13px; }
.board th {
  text-align: left; font-weight: 600; color: var(--ink-dim); font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em; padding-bottom: 5px;
}
.board td { padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.board td:nth-child(2), .board th:nth-child(2) { text-align: right; padding-right: 10px; }
.board td:nth-child(3) { text-align: right; color: var(--ink-dim); }
.board tr.is-ringer td:nth-child(3) { color: var(--good); font-weight: 700; }
.board tr.is-foul td { color: #8c7f74; text-decoration: line-through; }
.dim { color: var(--ink-dim); }
.call { margin: 9px 0 0; font-size: 13px; color: var(--go); font-weight: 600; }
.stats { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.stats dt { color: var(--ink-dim); }
.stats dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- modals -----------------------------------------------------------------------------
   `hidden` is honoured FIRST and absolutely.  Any rule that sets `display` on .modal without
   this guard would beat the attribute and leave an invisible sheet swallowing every click -
   a fault this fleet has shipped three times, so the page harness checks for it. */
.modal[hidden] { display: none !important; }
.modal {
  position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-start;
  justify-content: center; padding: 4vh 16px; overflow: auto;
  background: rgba(10, 7, 5, .68);
}
.sheet {
  position: relative; max-width: 720px; width: 100%;
  background: linear-gradient(180deg, #33271f, var(--bg-2));
  border: 1px solid var(--edge); border-radius: 14px; padding: 22px 26px 26px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}
.sheet h2 { margin: 0 0 12px; font-size: 21px; }
.sheet h3 {
  margin: 20px 0 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--go);
}
.sheet p { margin: 0 0 10px; font-size: 14px; }
.sheet a { color: var(--go); }
.foot {
  padding: 16px 18px 30px; text-align: center; color: var(--ink-dim); font-size: 12px;
}
.foot a { color: var(--ink-dim); }

@media (max-width: 900px) {
  main { grid-template-columns: minmax(0, 1fr); }
  .bar { gap: 10px; }
  .bar h1 { font-size: 17px; }
}
@media (max-width: 520px) {
  html { background: var(--bg); }
  .bar { padding: 8px 12px; gap: 8px; }
  .bar h1 { font-size: 16px; }
  .scores { gap: 10px; margin-left: 0; }
  .bar-actions { gap: 6px; margin-left: 0; }
  .bar-actions .btn { padding: 6px 9px; }
  main { padding: 12px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }