/* CRIBBAGE — category stylesheet.
 *
 * Built to the Cribbage brief. Section numbers are that brief's own.
 *
 * THE CATEGORY (§4). Cribbage is two people, a small handful of cards and a
 * board that is doing the scoring out loud. So the board is a real band of
 * the layout rather than a panel at the edge, and the composition is a
 * narrow two-player table rather than a four-seat one. Warm and crafted:
 * aged paper and walnut rather than green felt, because this is a pub-table
 * game and not a casino one. Restrained with it — no carving, no grain
 * photographs, no drop shadows pretending to be wood.
 *
 * THE SHARED DNA (§5). Card faces, court illustrations, backs, the gold
 * action token, typography, buttons, overlays and focus states are the
 * catalogue's and are referenced, not redefined.
 *
 * The composition is a six-row grid on #cribbageGame — header, table,
 * board, instruction, hand, action — so §9's "the board must not intersect
 * the hand / the pegging area / the instruction" holds by construction, and
 * §34's stability requirements are a property of the layout rather than
 * something to measure and hope for.
 */

*,*::before,*::after{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; height:100%; overflow:hidden;
  background:var(--table-deep);
}
body{
  font-family:var(--font-ui);
  color:var(--text-primary);
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

:root{
  /* --- Cribbage category environment (§4). Warm, not green. --- */
  --table-bg:#7A4A2B;
  --table-deep:#3A2317;
  --table-highlight:#96603A;
  --board-face:#E8D9BE;
  --board-edge:#C6AF8B;
  --board-hole:#9C825F;
  --board-hole-filled:#7E6544;

  /* --- Shared product tokens (§5), same values as the catalogue. --- */
  --text-primary:#F8F4EC;
  --text-secondary:#E0D3BE;
  --text-muted:#BFAE96;

  /* Ronan, 2026-09-21, from the phone: "on mobile font hard to read too
     similar to felt". The zone captions sat in --text-muted directly on the
     walnut, and the walnut is a RADIAL GRADIENT — #96603A at its lightest.
     #BFAE96 on #96603A is 2.6:1, and on the mid tone 3.4:1, at 9.5px. Two
     changes, because either alone is a half-measure: a lighter ink, and a
     plate behind it so the background under a caption is a known quantity
     instead of wherever the gradient happens to be. Over the lightest felt
     the pair reads 8.2:1. */
  --text-on-felt:#E9DAC2;
  --felt-plate:rgba(26,15,8,.55);

  --action:#F0B84B;
  --action-text:#1A1F1D;

  --you:#2F6F9F;            /* the two peg identities */
  --opp:#A8452F;
  --success:#62C58B;
  --danger:#E45B64;
  --active:#62C4FF;

  --card-bg:#FAFAF7;
  --card-black:#202322;
  /* #D84A52 on the card face is 4.0:1 — under the WCAG floor for normal
     text, in every game in the catalogue that shows a red card. Found by
     contrast-sweep.js on 2026-09-21, after Ronan reported the Cribbage
     captions from his phone. #CB343E is 4.9:1 and still plainly red. */
  --card-red:#CB343E;

  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.08);
  /* .22 was not a plate, it was a tint: over the light middle of the felt
     it composites to rgb(117,75,45), and --text-muted on that is 3.5:1. A
     plate has to make the ground a known quantity, which means it has to be
     mostly opaque. */
  --panel:rgba(0,0,0,.46);

  --space-1:4px;  --space-2:8px;  --space-3:12px;
  --space-4:16px; --space-5:24px; --space-6:32px;
  --radius:10px;

  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Playfair Display',Georgia,serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --back-red:#A6142B;
  --back-white:#F7F1E6;

  /* CARD GEOMETRY. Ratio 0.70. Six cards at the deal, four in the play, so
     they can run large — this is a game where you study your hand. */
  --card-w:clamp(48px, min(6.4vw, 10.4dvh), 82px);
  --card-h:calc(var(--card-w) / 0.70);
  --back-w:clamp(20px, 2.4vw, 32px);
  --back-h:calc(var(--back-w) / 0.70);

  /* §18.1 recognition, §18.2 travel, §26.3 peg movement. Declared once. */
  --dur-select:150ms;
  --dur-travel:220ms;
  --dur-peg:300ms;
}

/* ------------------------------------------------------------- shell --- */

.game{
  position:relative;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto auto auto;
  grid-template-areas:'header' 'table' 'board' 'instruction' 'hand' 'action';
  height:100dvh; max-height:100dvh; width:100%;
  padding:
    max(var(--space-2), env(safe-area-inset-top)) max(var(--space-3), env(safe-area-inset-right))
    max(var(--space-2), env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left));
  gap:var(--space-2);
  background:
    radial-gradient(ellipse at 50% 26%, var(--table-highlight) 0%, var(--table-bg) 48%, var(--table-deep) 100%);
}

/* ------------------------------------------------------------ header --- */

.zone-header{
  grid-area:header;
  display:flex; align-items:center; gap:var(--space-3);
  flex-wrap:nowrap; min-width:0;
  padding-bottom:var(--space-1);
  border-bottom:1px solid var(--line-soft);
}
.wordmark .title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(15px,1.9vw,23px); white-space:nowrap;
}
.scoreboard{ display:flex; align-items:stretch; gap:var(--space-2); margin-left:auto; min-width:0; }
.score-box{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:2px var(--space-2); border-radius:var(--radius);
  background:var(--panel); border:1px solid var(--line-soft);
  border-left-width:3px;
  min-width:96px;
  transition:border-color .16s ease, background .16s ease;
}
.score-box.you{ border-left-color:var(--you); }
.score-box.opp{ border-left-color:var(--opp); }
/* A darker plate when acting, not a lighter wash: the wash put "121 to go" at 3.4:1. */
.score-box.is-acting{ background:rgba(18,40,72,.72); border-color:var(--active); }
.hand-label-row{ display:none; }
.score-box.is-acting .score-label{ font-weight:800; color:var(--text-primary); }
.score-label{ font-size:12px; font-weight:600; color:var(--text-primary); white-space:nowrap; }
.score-value{ font-family:var(--font-mono); font-weight:700; font-size:17px; line-height:1.1; }
.score-togo{ font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--text-secondary); white-space:nowrap; }

.secondary-controls{ display:flex; align-items:center; gap:var(--space-2); }
.hand-label{ font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--text-primary); white-space:nowrap; }

.ctrl-btn{
  font-family:var(--font-ui); font-size:clamp(13px,1.2vw,15px); font-weight:700;
  color:var(--text-primary); background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--space-2) var(--space-3); cursor:pointer;
  transition:border-color .16s ease, background .16s ease, filter .16s ease;
}
.ctrl-btn:hover:not(:disabled){ border-color:var(--action); }
.ctrl-btn:disabled{ opacity:.42; cursor:not-allowed; }
.ctrl-btn:focus-visible{ outline:2px solid var(--active); outline-offset:2px; }
.ctrl-btn.primary{
  background:var(--action); color:var(--action-text); border-color:var(--action);
  font-weight:800; padding:var(--space-2) var(--space-5);
}
.ctrl-btn.primary:hover:not(:disabled){ filter:brightness(1.07); }
.ctrl-btn[hidden]{ display:none; }
/* Icon-only buttons carry a text label underneath — standing rule. */
.icon-btn{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:var(--space-1) var(--space-2); line-height:1; }
.icon-glyph{ font-size:15px; }
.icon-label{ font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--text-primary); }

/* ------------------------------------------------------------- table --- */

.zone-table{ grid-area:table; min-height:0; display:flex; }
.table{
  position:relative; flex:1; min-height:0;
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:
    'opp   opp     opp      opp'
    'crib  starter pegging  count';
  align-items:center; justify-items:center;
  gap:var(--space-3);
  padding:var(--space-2);
  border-radius:calc(var(--radius) * 1.4);
  border:1px solid var(--line-soft);
}

/* ---- opponent (§8) ---- */
.opponent{
  grid-area:opp; align-self:start; justify-self:center;
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius); border:1px solid transparent;
  transition:border-color .16s ease, background .16s ease;
}
.opponent.is-acting{ border-color:var(--active); background:rgba(98,196,255,.12); }
.opp-head{ display:flex; align-items:center; gap:var(--space-1); }
.opp-dot{ width:7px; height:7px; border-radius:50%; background:var(--opp); }
.opp-name{ font-size:13px; font-weight:700; color:var(--text-primary); }
/* No pale type: the name sat straight on the walnut (1.3:1 at its lightest). */
.opp-head{ background:var(--felt-plate); border-radius:4px; padding:1px 6px; }
/* §11: who is dealing is said in words, not implied by position. */
.opp-badge{
  display:none;
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:.04em; padding:1px 5px; border-radius:4px;
  background:var(--action); color:var(--action-text);
}
.opponent.is-dealer .opp-badge[data-role='dealer']{ display:inline-block; }
.opp-cards{ display:flex; }
.opp-cards .card-back{ margin-left:calc(var(--back-w) * -0.55); }
.opp-cards .card-back:first-child{ margin-left:0; }
.opp-count{ font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--text-primary); white-space:nowrap; }

.card-back{
  width:var(--back-w); height:var(--back-h);
  border-radius:4px; flex:none;
  background:var(--back-red);
  background-image:
    repeating-linear-gradient(45deg, var(--back-white) 0, var(--back-white) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(-45deg, var(--back-white) 0, var(--back-white) 1px, transparent 1px, transparent 5px);
  border:1px solid var(--back-white);
  box-shadow:0 2px 5px rgba(0,0,0,.4);
}

/* ---- crib and starter (§14) ---- */
.crib, .starter{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  width:var(--pile-cell);
}
.crib{ grid-area:crib; width:auto; min-width:var(--pile-cell); }
/* The crib turned face up for its count is wider than its cell was: the
   column grows to it, and on phones the cards overlap a little more. */
.starter{ grid-area:starter; }
/* ---- anything that sits DIRECTLY on the walnut (Ronan, 2026-09-21) ----
   The felt is a radial gradient running to #96603A in the middle, and small
   warm type on it measured between 2.4:1 and 3.5:1 — "too similar to felt".
   Lifting the ink alone does not fix it, because at the light end even
   --text-primary is marginal at this size. So text on the felt gets a plate,
   which turns the background from "wherever the gradient happens to be" into
   one known colour, and 8:1 at the worst stop. contrast-sweep.js is what
   holds this. */
.pile-label, .opp-count, .hand-label, .crib-owner{
  background:var(--felt-plate); border-radius:4px;
  padding:1px 5px; white-space:nowrap;
}
.pile-label{
  font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-primary);
}
.crib-owner{
  font-family:var(--font-ui); font-size:12px; font-weight:700; color:#FFD27A;
  border:1px solid rgba(240,184,75,.4);
}
.crib-stack, .starter-slot{
  min-height:var(--card-h); display:flex; align-items:center; justify-content:center;
}
.crib-stack .card-back{ margin-left:calc(var(--back-w) * -0.6); }
.crib-stack .card-back:first-child{ margin-left:0; }
.crib-stack .card{ margin-left:calc(var(--card-w) * -0.62); }
.crib-stack .card:first-child{ margin-left:0; }
.starter-empty{
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--text-primary);
  text-align:center; max-width:var(--pile-cell); line-height:1.3;
  background:var(--felt-plate); border-radius:4px; padding:2px 4px;
}
/* The starter is the shared card and reads as one: ringed, never in a hand. */
.starter-card{ outline:2px dashed rgba(240,184,75,.65); outline-offset:2px; }

/* ---- the play (§15) ---- */
.pegging{
  grid-area:pegging; justify-self:stretch;
  display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0;
}
.pegging-row{
  display:flex; align-items:center; justify-content:center;
  min-height:var(--card-h); width:100%;
  gap:2px; flex-wrap:nowrap;
}
.cribbage-pegging-card{ flex:none; }
.pegging-row .cribbage-pegging-card + .cribbage-pegging-card{
  margin-left:calc(var(--card-w) * -0.42);
}

/* ---- the running count (§17) ---- */
.running-count{
  grid-area:count;
  display:flex; flex-direction:column; align-items:center; gap:0;
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius);
  background:var(--panel); border:1px solid var(--line);
  width:var(--count-cell);
}
.rc-caption{
  font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-secondary);
}
.rc-value{
  font-family:var(--font-mono); font-weight:800;
  font-size:clamp(24px,3.4vw,40px); line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.rc-limit{ font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--text-secondary); }

/* ---- the scoring breakdown (§20, §25) ---- */
.breakdown{
  position:absolute; left:50%; bottom:var(--space-2); transform:translateX(-50%);
  z-index:5;
  display:flex; flex-direction:column; align-items:stretch; gap:2px;
  min-width:190px; max-width:min(92%, 320px);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius);
  background:rgba(26,14,8,.92);
  border:1px solid var(--action);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
}
.breakdown[hidden]{ display:none; }
/* During the count the play is over and its row is empty: the count's
   breakdown takes that place rather than sitting over an empty label. */
.game[data-phase='counting'] .pegging{ visibility:hidden; }
.bd-who{
  font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:#FFD27A;
}
.bd-list{ list-style:none; margin:0; padding:0; }
.cribbage-score-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3);
  font-size:13px; font-weight:600; padding:1px 0;
}
.bd-label{ font-family:var(--font-mono); letter-spacing:.03em; }
.bd-points{ font-family:var(--font-mono); font-weight:700; color:var(--success); }
.bd-total{
  align-self:flex-end;
  font-family:var(--font-mono); font-weight:800; font-size:13px;
  color:var(--action); border-top:1px solid var(--line-soft);
  padding-top:2px; margin-top:1px;
}

/* ------------------------------------------------------------- board --- */
/* §10: a real 121-hole track, not a progress bar. Four streets of thirty
   running alternately left and right, then the game hole. */

.zone-board{ grid-area:board; display:flex; justify-content:center; }
.board{
  width:100%;
  display:flex; flex-direction:column; gap:3px;
  padding:var(--space-2) var(--space-3);
  border-radius:calc(var(--radius) * 1.2);
  background:linear-gradient(180deg, var(--board-face), var(--board-edge));
  border:1px solid rgba(0,0,0,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.street{ display:flex; align-items:center; gap:0; width:100%; }
.hole-col{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
/* Cribbage boards group their holes in fives, and so does this one — it is
   how you read a position without counting from the start. */
.hole-col.is-fifth{ margin-right:3px; }
.hole{
  position:relative;
  width:100%; max-width:9px; aspect-ratio:1;
  border-radius:50%;
  background:var(--board-hole);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.4);
}
.hole.is-filled.lane-you{ background:color-mix(in srgb, var(--you) 55%, var(--board-hole)); }
.hole.is-filled.lane-opp{ background:color-mix(in srgb, var(--opp) 55%, var(--board-hole)); }

.cribbage-peg{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:15px; height:15px; border-radius:50%;
  z-index:2;
  box-shadow:0 1px 3px rgba(0,0,0,.5);
  transition:none;
}
.cribbage-peg[data-seat='0']{ background:var(--you); }
.cribbage-peg[data-seat='1']{ background:var(--opp); }
/* §10/§42: leading and trailing pegs differ by SHAPE as well as colour, so
   which is which does not depend on seeing the difference between two
   similar browns. */
.peg-front{ border:2px solid #fff; }
.peg-back{ border:2px dashed rgba(255,255,255,.75); opacity:.72; border-radius:3px; }

.street.finish{ justify-content:flex-end; gap:var(--space-2); }
.hole-col.is-finish{ flex:0 0 auto; width:11px; }
.finish-label{
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  color:#2E200F; letter-spacing:.04em;
}

/* ------------------------------------------------------- instruction --- */

.zone-instruction{ grid-area:instruction; display:flex; justify-content:center; }
.instruction{
  font-family:var(--font-mono); font-weight:700;
  font-size:clamp(13px,1.4vw,15px); letter-spacing:.08em;
  color:var(--text-primary); text-align:center;
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius);
  background:var(--panel); border:1px solid var(--line-soft);
  min-height:26px; display:flex; align-items:center; justify-content:center;
}
/* §30: the same line in the alarm colour. One instruction, never two. */
.instruction.is-warning{
  color:#FFC9CD; border-color:rgba(228,91,100,.5); background:rgba(228,91,100,.17);
}

/* -------------------------------------------------------------- hand --- */

.zone-hand{ grid-area:hand; display:flex; justify-content:center; align-items:flex-end; }
.player-hand{
  display:flex; justify-content:center; align-items:flex-end;
  gap:var(--space-2);
  /* §34: the cards recompose inside the box; the box itself does not move. */
  width:100%;
  min-height:calc(var(--card-h) + 14px);
  padding-top:12px;
  flex-wrap:nowrap;
}
.cribbage-player-card{ cursor:pointer; flex:none; }

/* ------------------------------------------------------------ action --- */

.zone-action{
  grid-area:action;
  display:flex; align-items:center; justify-content:center; gap:var(--space-3);
  flex-wrap:wrap;
}
.secondary-play{ display:flex; gap:var(--space-2); }

/* -------------------------------------------------------------- card --- */

.card{
  position:relative;
  width:var(--card-w); height:var(--card-h);
  background:linear-gradient(155deg,#FFFFFF,var(--card-bg));
  border-radius:8px;
  box-shadow:
    0 5px 12px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.9);
  color:var(--card-black);
  font-family:var(--font-ui); font-weight:800;
  overflow:hidden;
  outline:2px solid transparent;
  transition:transform var(--dur-select) ease, box-shadow var(--dur-select) ease,
             outline-color var(--dur-select) ease, filter var(--dur-select) ease;
}
.card.red{ color:var(--card-red); }
.court-figure{
  position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%);
  width:70%; height:60%; display:block;
}
.card-corner{
  position:absolute; z-index:1; text-align:center;
  font-size:clamp(9px, calc(var(--card-w) * 0.21), 15px); line-height:1.06;
}
.card-corner-top{ top:4px; left:4px; }
.card-corner-bottom{ right:4px; bottom:4px; transform:rotate(180deg); }
.corner-suit-upright{ display:inline-block; transform:rotate(180deg); }
.card-centre-suit{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--card-w) * 0.52); opacity:.9;
}
/* §16: legal cards emphasised without covering the face; illegal ones
   muted and still readable, never hidden. */
[data-coach="on"] .card.is-legal{ box-shadow:0 5px 12px rgba(0,0,0,.4), 0 0 0 2px var(--action); }
[data-coach="on"] .card.is-legal:hover{ transform:translateY(-6px); }
[data-coach="on"] .card.is-illegal{ filter:grayscale(.6) brightness(.7); cursor:not-allowed; }   /* ring, lift and greying are Coach's (2026-10-10 / 2026-10-11) */
.card.is-selected{
  transform:translateY(-14px);
  outline-color:var(--active);
  box-shadow:0 12px 22px rgba(0,0,0,.5), 0 0 0 2px var(--active);
}

/* ----------------------------------------------------------- overlays --- */

.overlay{
  position:absolute; inset:0; z-index:40;
  display:none; align-items:center; justify-content:center;
  background:rgba(24,13,6,.78); backdrop-filter:blur(3px);
  padding:var(--space-4);
}
.overlay.open{ display:flex; }
.overlay-panel{
  width:min(92vw, 460px); max-height:86dvh; overflow-y:auto;
  padding:var(--space-5);
  border-radius:calc(var(--radius) * 1.6);
  background:linear-gradient(180deg, #3D2415, #2A1810);
  border:1px solid var(--line);
  box-shadow:0 26px 70px rgba(0,0,0,.6);
  text-align:center;
}
.overlay-panel h2{
  font-family:var(--font-display); color:var(--action);
  margin:0 0 var(--space-2); font-size:clamp(19px,2.4vw,24px);
}
.overlay-panel p.sub{
  font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--text-primary);
  margin:0 0 var(--space-4);
}
.result-table{ width:100%; border-collapse:collapse; margin-bottom:var(--space-3); font-size:13px; }
.result-table th{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-secondary); font-weight:700; padding:var(--space-1) var(--space-2);
  border-bottom:1px solid var(--line); text-align:left;
}
.result-table td{ font-weight:600; padding:var(--space-1) var(--space-2); border-bottom:1px solid var(--line-soft); text-align:left; }
.rules-panel{ text-align:left; }
.rules-panel h2, .rules-panel p.sub{ text-align:center; }
.rules-list{ list-style:none; margin:0 0 var(--space-4); padding:0; }
.rules-list li{
  font-size:13px; font-weight:600; line-height:1.55; color:var(--text-primary);
  padding:var(--space-2) 0; border-bottom:1px solid var(--line-soft);
}
.rules-list li:last-child{ border-bottom:none; }

footer{ display:none; }

/* ---------------------------------------------- Q6/Q7 board additions --- */
.hole-col.is-start-last{ margin-right:6px; }
.hole.is-start-hole{ box-shadow:inset 0 1px 1px rgba(0,0,0,.4), 0 0 0 1px rgba(46,32,15,.35); }
.board-key{ display:flex; gap:var(--space-3); margin-right:auto; align-items:center; }
.bk-item{ display:flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:#2E200F; }
.bk-peg{ width:12px; height:12px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,.45); }
.bk-peg[data-seat='0']{ background:var(--you); }
.bk-peg[data-seat='1']{ background:var(--opp); }
.street.finish{ align-items:center; }

/* ------------------------------------------------------------ Coach --- */
.coach-btn{ min-width:84px; }
.coach-btn.is-on{ border-color:var(--action); }
.zone-instruction{ flex-wrap:wrap; align-items:center; gap:var(--space-2); }
.coach-tip{
  font-size:13px; font-weight:600; line-height:1.3; color:var(--text-primary);
  padding:3px var(--space-3); border-radius:var(--radius);
  background:var(--felt-plate); border:1px solid rgba(240,184,75,.55); max-width:100%;
}
.coach-tip[hidden]{ display:none; }
.start-choices{ display:flex; gap:var(--space-2); justify-content:center; flex-wrap:wrap; }
.start-choice{ min-height:48px; padding:var(--space-2) var(--space-4); font-size:15px; }
.start-choice.is-remembered{ background:var(--action); color:var(--action-text); border-color:var(--action); }
.start-note{ font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.45; margin:var(--space-3) 0 0; }

/* ---------------------------------------------- sideways and short --- */
/* Q9 (Ronan, 2026-10-08). Held sideways the table had about 90px under the
   board and its two rows needed over 200: the board was drawn over the crib,
   the starter, the play and the count. Here the table is ONE row (opponent,
   crib, starter, the play, the count), the cards smaller, the board a compact
   strip in its own band, never over the table. */
@media (min-width:641px) and (max-height:500px){
  :root{ --card-w:40px; --back-w:18px; --pile-cell:76px; --count-cell:76px; }
  .game{ gap:var(--space-1); padding-top:4px; padding-bottom:4px; }
  .zone-header{ padding-bottom:2px; }
  .table{
    grid-template-columns:auto auto auto minmax(0,1fr) auto;
    grid-template-rows:minmax(0,1fr);
    grid-template-areas:'opp crib starter pegging count';
    gap:var(--space-2); padding:2px var(--space-2);
  }
  .opponent{ align-self:center; flex-direction:column; gap:2px; padding:2px var(--space-2); }
  .opp-cards{ display:none; }
  .running-count{ padding:2px var(--space-2); }
  .rc-value{ font-size:24px; }
  .breakdown{ top:50%; bottom:auto; transform:translate(-50%,-50%); max-height:calc(100% - 4px); overflow-y:auto; }
  .board{ padding:3px var(--space-2); gap:1px; }
  .hole{ max-width:6px; }
  .hole-col{ gap:1px; }
  .cribbage-peg{ width:12px; height:12px; border-width:2px; }
  .player-hand{ padding-top:8px; min-height:calc(var(--card-h) + 8px); }
  .cribbage-player-card + .cribbage-player-card{ margin-left:0; }
}
/* The iPhone SE frame (345x504, may scroll vertically: Q1). Below 540px tall
   the page grows past the frame and scrolls instead of squeezing the table,
   so nothing is drawn over anything. */
@media (max-width:640px) and (max-height:540px){
  html, body{ height:auto; overflow-y:auto; }
  .game{ height:auto; max-height:none; min-height:100dvh; }
  .table{ min-height:max-content; }
}

/* Q8 on a touch screen held sideways too: 44px targets. */
@media (pointer:coarse){
  .zone-header .icon-btn, .zone-action .ctrl-btn{ min-height:44px; }
}

/* --------------------------------------------------- sizing tokens --- */
:root{
  --pile-cell:clamp(72px, 9vw, 108px);
  --count-cell:clamp(78px, 9vw, 104px);
}

/* ------------------------------------------------------------ mobile --- */

@media (max-width:640px){
  :root{
    --card-w:clamp(40px, 11.5vw, 60px);
    --back-w:clamp(15px, 4vw, 22px);
    --pile-cell:clamp(58px, 17vw, 84px);
    --count-cell:clamp(56px, 16vw, 78px);
  }
  .game{ gap:var(--space-1); }
  .zone-header{ flex-wrap:wrap; gap:var(--space-2); }
  .wordmark .title{ font-size:15px; }
  .scoreboard{ order:3; width:100%; margin-left:0; align-items:center; }
  /* Two lines per score box on phones: the name and score, then how far to go. */
  .score-box{ flex:1; min-width:0; display:grid; grid-template-columns:auto 1fr; column-gap:6px; align-items:baseline; padding:2px var(--space-2); }
  .score-box .score-togo{ grid-column:1 / -1; }
  .score-value{ font-size:16px; }
  #handLabel{ display:none; }
  .hand-label-row{ display:inline-block; }
  .zone-header .icon-btn{ padding:var(--space-1) 6px; }
  .zone-header .secondary-controls{ gap:6px; }
  .coach-btn{ min-width:78px; }
  .table{
    grid-template-columns:auto auto minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr);
    grid-template-areas:
      'opp   opp     opp'
      'crib  starter count'
      'pegging pegging pegging';
    gap:var(--space-2);
  }
  .opp-cards{ display:none; }   /* the count is the information */
  .crib-stack .card{ margin-left:calc(var(--card-w) * -0.72); }
  .running-count{ padding:var(--space-1) var(--space-2); }
  .rc-value{ font-size:26px; }
  /* §33: the board is never hidden on mobile. The holes shrink and the
     score-to-hole mapping is untouched, so both pegs stay where they
     belong; the numeric scores in the header carry the reading. */
  .board{ padding:var(--space-1) var(--space-2); gap:2px; }
  .hole{ max-width:6px; }
  .hole-col{ gap:1px; }
  /* Q6: pegs 12px, drawn over the 6px holes; no letters (whose they are is the key's job). */
  .cribbage-peg{ width:12px; height:12px; border-width:2px; }
  .zone-header .icon-btn, .zone-action .ctrl-btn{ min-height:44px; }
  .hole-col.is-fifth{ margin-right:2px; }
  .player-hand{ gap:0; }
  .cribbage-player-card + .cribbage-player-card{ margin-left:calc(var(--card-w) * -0.18); }
  .instruction{ font-size:13px; letter-spacing:.03em; padding:2px var(--space-2); }
  /* The phone is where this was reported, and small type on a warm ground
     is harder there than the same type on a desk monitor. */
  .pile-label{ font-size:12px; letter-spacing:.05em; padding:1px 6px; }
  /* The UI face is narrower than the mono: two lines, not four running into "The play". */
  .starter-empty{ font-family:var(--font-ui); font-size:12px; padding:3px 5px; line-height:1.25; }
  .breakdown{ min-width:0; max-width:96%; }
  .cribbage-score-row{ font-size:13px; }
}

/* --------------------------------------------------- reduced motion --- */
/* §37: every duration is SHORTENED, never removed. A removed transition
   stops transitionend firing and a controller awaiting it deadlocks — the
   reason is recorded once in conventions §8. Stated in this game's own
   stylesheet, not inherited only from the shared sheet. */
@media (prefers-reduced-motion: reduce){
  :root{
    --dur-select:1ms;
    --dur-travel:1ms;
    --dur-peg:1ms;
  }
  .card, .ctrl-btn, .opponent, .score-box{
    transition-duration:1ms !important;
  }
}

/* R3 (Ronan 2026-10-11, "recommendation"): on phones the instruction line keeps 6px from
   your hand below it. It moves up 2px into the room above it (11px at 330, 26px on the
   iPhone 15), which still leaves at least 6px there; nothing else moves. Sideways keeps
   its old place (a listed known-issue size). */
@media (max-width:640px) and (min-height:481px){
  .zone-instruction{ position:relative; top:-2px; }
}

/* R6a (2026-10-11): the Resume button and where the saved game was */
#btnResume{ display:block; width:min(100%, 320px); min-height:44px; margin:0 auto var(--space-2); }
#btnResume[hidden], #resumeContext[hidden]{ display:none; }
.resume-context{ font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.4; margin:0 0 var(--space-3); }
@media (max-height:520px){
  #btnResume{ margin-bottom:4px; }
  .resume-context{ margin-bottom:8px; line-height:1.3; }
  #modeSelectOverlay .start-note{ margin-top:8px; line-height:1.35; }
}

/* UX standard 2026-10-26: "Or start a new game:" above the start choices when
   something is saved; the ask-first panel. */
.start-or{ margin:4px 0 8px; font-size:14px; font-weight:700; color:#F6F7F4; }
#confirmOverlay{ z-index:45; }
.confirm-panel{ text-align:center; max-width:min(420px, 94vw); }
.confirm-panel h2{ margin:0 0 6px; }
.confirm-panel p.sub{ margin:0; }
.confirm-actions{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
.confirm-actions .ctrl-btn{ min-width:140px; min-height:44px; }