/* Croquet - one stylesheet, no framework, no external font.  The palette is the lawn: a mown
   green, white line paint, and the four ball colours the Laws name. */
:root {
  --turf: #2c4a2c; --turf-lo: #22391f; --turf-hi: #3a5c37;
  --ink: #f2f4ef; --ink-dim: #b9c4b4; --ink-fade: #8b9a86;
  --panel: #1b2c1b; --panel-hi: #263c25; --edge: #3d5a3b;
  --blue: #1b51a9; --red: #bd2121; --black: #1b1b1d; --yellow: #edc725;
  --warm: #f0d247; --bad: #e08a5a; --good: #8fd08a;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
/* [hidden] MUST WIN.  Any class rule that sets `display` beats the attribute, and the symptom is
   not a visible element - it is an INVISIBLE one that still covers the canvas and swallows every
   click.  The no-WebGL notice below is `position:absolute; inset:0; display:grid`, so without this
   line it sat over the whole court while hidden and the game could not be played at all.  The
   browser smoke test asserts the canvas is the topmost element at its own centre. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--turf-lo); color: var(--ink);
  font: 15px/1.5 var(--font); overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 40; background: var(--panel); padding: 8px 12px; border-radius: 6px; }

.bar {
  display: flex; align-items: center; gap: 14px; padding: 8px 14px;
  background: var(--panel); border-bottom: 1px solid var(--edge); position: relative; z-index: 5;
}
.bar h1 { font-size: 18px; letter-spacing: .04em; margin: 0; font-weight: 650; }
.scores { display: flex; gap: 14px; align-items: center; margin-left: 6px; }
.side { display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid transparent; font-variant-numeric: tabular-nums; }
.side b { font-size: 16px; }
.side.is-turn { border-color: var(--warm); background: #ffffff12; }
.bar-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.btn {
  font: inherit; font-size: 13px; color: var(--ink); background: var(--panel-hi);
  border: 1px solid var(--edge); border-radius: 7px; padding: 6px 11px; cursor: pointer;
}
.btn:hover { background: #31492f; }
.btn:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }
.btn.is-on { background: var(--warm); color: #20301f; border-color: var(--warm); font-weight: 600; }
.btn.primary { background: var(--warm); color: #20301f; font-weight: 650; width: 100%; padding: 10px; font-size: 15px; }
.btn.primary:disabled { background: #46543f; color: #8f9a8b; cursor: default; }
.btn.ball-blue { background: var(--blue); border-color: #3f74cc; }
.btn.ball-black { background: var(--black); border-color: #4a4a50; }

main { display: flex; height: calc(100% - 49px); }
.stage { position: relative; flex: 1 1 auto; min-width: 0; background: var(--turf-lo); }
#court { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.nogl { position: absolute; inset: 0; display: grid; place-content: center; padding: 24px; text-align: center; }

.panel {
  flex: 0 0 300px; background: var(--panel); border-left: 1px solid var(--edge);
  padding: 12px 14px 18px; overflow-y: auto;
}
.turn { margin: 0 0 4px; font-weight: 620; }
.lift { margin: 0 0 6px; color: var(--warm); font-size: 13px; }
.msg { margin: 0 0 10px; color: var(--ink-dim); font-size: 13px; min-height: 2.6em; }
.hint { margin: 8px 0 0; color: var(--warm); font-size: 13px; }
.picker { display: flex; gap: 8px; margin-bottom: 12px; }
.picker .btn { flex: 1; }

.board { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 13px; }
.board caption { text-align: left; color: var(--ink-fade); font-size: 12px;
  text-transform: uppercase; letter-spacing: .07em; padding-bottom: 4px; }
.board th { text-align: left; font-weight: 500; padding: 4px 0; }
.board td { text-align: right; font-variant-numeric: tabular-nums; padding: 4px 0; }
.board tr { border-bottom: 1px solid #ffffff10; }
.board tr.is-striker { color: var(--warm); font-weight: 640; }
.board tr.is-dead td::after { content: " · dead"; color: var(--ink-fade); font-size: 11px; }
.board tr.is-out { opacity: .45; }
.board tr.is-waiting td::after { content: " · to come"; color: var(--ink-fade); font-size: 11px; }

.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  margin-right: 6px; vertical-align: -1px; border: 1px solid #00000055; }
.dot-blue { background: var(--blue); } .dot-red { background: var(--red); }
.dot-black { background: var(--black); } .dot-yellow { background: var(--yellow); }

.card { background: var(--panel-hi); border: 1px solid var(--edge); border-radius: 9px;
  padding: 9px 11px; margin: 0 0 12px; }
.card h2 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-fade); font-weight: 600; }
.card dl { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin: 0; font-size: 13px; }
.card dt { color: var(--ink-dim); }
.card dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12px; }
.verdict { margin: 7px 0 0; font-size: 12px; color: var(--ink-dim); }
.card.is-on .verdict { color: var(--good); font-weight: 600; }
.card.is-bad .verdict { color: var(--bad); }

.row { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 13px; }
.row span { flex: 0 0 82px; color: var(--ink-dim); }
.row input[type=range] { flex: 1; accent-color: var(--warm); }
.row select { flex: 1; min-width: 0; width: 0; font: inherit; font-size: 13px; background: var(--panel-hi);
  color: var(--ink); border: 1px solid var(--edge); border-radius: 6px; padding: 5px 7px; }
.seed { color: var(--ink-fade); font-size: 11px; margin: 10px 0 0; font-family: var(--mono); }

.dialog { position: fixed; inset: 0; background: #06120699; display: grid; place-items: center;
  padding: 18px; z-index: 30; overflow-y: auto; }
.dialog[hidden] { display: none; }
.dialog-box { background: var(--panel); border: 1px solid var(--edge); border-radius: 12px;
  padding: 20px 24px; max-width: 700px; max-height: 88vh; overflow-y: auto; }
.dialog-box h2 { margin: 0 0 10px; font-size: 20px; }
.dialog-box h3 { margin: 18px 0 6px; font-size: 14px; color: var(--warm);
  text-transform: uppercase; letter-spacing: .06em; }
.dialog-box p { margin: 0 0 9px; color: var(--ink-dim); }
.dialog-box a { color: var(--warm); }
.formula { font-family: var(--mono); background: #ffffff0d; padding: 8px 10px;
  border-radius: 7px; color: var(--ink) !important; overflow-x: auto; }
.fine { font-size: 12.5px; color: var(--ink-fade) !important; }
kbd { font-family: var(--mono); font-size: 11px; background: #ffffff18;
  border: 1px solid var(--edge); border-radius: 4px; padding: 1px 5px; }

.foot { position: fixed; bottom: 0; left: 0; right: 300px; padding: 5px 14px;
  font-size: 11px; color: var(--ink-fade); background: #00000055; pointer-events: none; }
.foot a { color: var(--ink-fade); pointer-events: auto; }

@media (max-width: 860px) {
  body { overflow: auto; }
  main { flex-direction: column; height: auto; }
  .stage { height: 58vh; }
  .panel { flex: 1 1 auto; border-left: 0; border-top: 1px solid var(--edge); }
  .foot { position: static; right: 0; }
  /* phones: the title, both scores and five buttons do not fit one 320-390px row */
  .bar { flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px; }
  .bar-actions { margin-left: 0; width: 100%; }
  .bar-actions .btn { flex: 1 1 auto; padding: 6px 8px; }
  .dialog { padding: 10px; }
  .dialog-box { padding: 16px 16px; max-height: 92vh; }
}