/* you know chess? -- monochrome slapstick skin. ink #1a1714, paper #fbf7ec, one red accent. */
:root {
  --ink: #1a1714; --paper: #fbf7ec; --paper2: #f1ebdb; --red: #d6261c;
  --type: 'Special Elite', 'Courier New', Courier, monospace;
  --hand: 'Gochi Hand', 'Patrick Hand', 'Comic Sans MS', cursive;
  --scrawl: 'Rock Salt', 'Gochi Hand', cursive;
  --wob: 7px 11px 8px 12px / 11px 7px 12px 8px;
  --wob2: 11px 7px 12px 8px / 7px 12px 8px 11px;
  /* type scale: ~1.25 ratio, rem-based. phones shrink via the media query at the bottom of this block */
  --fs-small: .85rem; --fs-body: 1.0625rem; --fs-group: 1.33rem; --fs-h: 1.66rem;
  --hand-scale: 1.3; /* the hand font has a tiny x-height: scale it so it looks as big as mono at the same step */
  --fs-small-hand: calc(var(--fs-small) * var(--hand-scale)); --fs-body-hand: calc(var(--fs-body) * var(--hand-scale));
  --fs-group-hand: calc(var(--fs-group) * var(--hand-scale)); --fs-h-hand: calc(var(--fs-h) * var(--hand-scale));
  --fs-display: clamp(1.5rem, 6vw, 2.4rem);
  /* spacing scale: sp-1 label<->control<->helper, sp-2 between fields, sp-3 between groups, sp-4 between cards */
  --sp-1: .25rem; --sp-2: .75rem; --sp-3: 1.25rem; --sp-4: 1.75rem;
  --hatchbg: repeating-linear-gradient(45deg, rgba(26,23,20,.16) 0 1px, transparent 1px 6px);
}
@media (max-width: 600px) {
  :root { --fs-small: .8rem; --fs-body: 1rem; --fs-group: 1.2rem; --fs-h: 1.5rem; --sp-2: .625rem; --sp-3: 1rem; --sp-4: 1.25rem; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: hidden; }
body { overflow-x: clip; } /* clip (not hidden) so sticky bars inside still work */
body { margin: 0; font-family: var(--type); font-size: var(--fs-body); background: #ece5d2; color: var(--ink);
  background-image: radial-gradient(rgba(26,23,20,.16) 1px, transparent 1.3px), radial-gradient(rgba(26,23,20,.09) .8px, transparent 1.1px);
  background-size: 23px 23px, 11px 11px; background-position: 0 0, 5px 7px; }
header { padding: 14px 16px 2px; text-align: center; }
h1 { margin: 0; font-family: var(--scrawl); font-weight: 400; font-size: var(--fs-display); display: inline-block; transform: rotate(-1.5deg); }
h1 em { font-style: normal; color: var(--red); }
h2 { margin: 0 0 var(--sp-2); font-family: var(--hand); font-weight: 400; font-size: var(--fs-h-hand); text-transform: lowercase; transform: rotate(-.6deg); transform-origin: left; }
h3 { margin: 0 0 var(--sp-2); font-family: var(--hand); font-weight: 400; font-size: var(--fs-group-hand); line-height: 1.15; text-transform: lowercase; color: var(--ink); }
.sub { margin: 4px 0 0; font-size: var(--fs-small); opacity: .6; }
#settings-screen { max-width: 900px; }
main { max-width: 1100px; margin: 0 auto; padding: 12px; }

/* wobbly boxes: irregular radii, one plain border, no shadows */
.panel { position: relative; background: var(--paper); border: 2.6px solid var(--ink); border-radius: var(--wob); padding: 12px 16px; margin-bottom: var(--sp-3); }
.panel:nth-of-type(even) { border-radius: var(--wob2); }
button { position: relative; font: inherit; font-family: var(--hand); font-size: var(--fs-body-hand); line-height: 1.1; text-transform: lowercase; color: var(--ink);
  padding: 6px 14px; border: 2.6px solid var(--ink); background: var(--paper); border-radius: var(--wob); cursor: pointer;
  transition: transform .08s; }
button:hover:not(:disabled) { transform: rotate(-1deg) translate(-1px, -1px); }
button:active:not(:disabled) { transform: translate(1px, 1px) scale(.97); }
button:disabled { opacity: .45; cursor: default; }
button.primary { color: var(--ink); }
button.primary:hover:not(:disabled) { color: var(--red); }
input[type=text], input[type=number], select { font-family: var(--type); font-size: var(--fs-body); color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--wob); padding: 3px 7px; }
input:focus-visible, select:focus-visible, button:focus-visible { outline: 2px dashed var(--red); outline-offset: 2px; }
#counts-table { border-collapse: collapse; width: 100%; max-width: 420px; }
#counts-table th, #counts-table td { text-align: left; padding: 3px 8px; border-bottom: 1px dashed rgba(26,23,20,.4); }
#counts-table th { font-family: var(--hand); font-weight: 400; font-size: var(--fs-small-hand); }
#counts-table input { width: 54px; padding: 3px; }
.note { opacity: .7; font-size: var(--fs-small); }
.error { color: var(--red); font-size: var(--fs-small); min-height: 1.2em; margin: var(--sp-1) 0; }

/* mini cards (inline svg) */
.mini { display: inline-block; width: 30px; vertical-align: middle; line-height: 0; }
.mini .cardsvg { width: 100%; height: auto; }
.cardsvg { display: block; width: 100%; height: auto; overflow: visible; }
#counts-table .mini { width: 34px; transform: rotate(-3deg); }
.pile-line .mini { width: 24px; margin: 0 2px; }

.game-layout { display: flex; gap: 18px; align-items: flex-start; }
.game-layout { --bs: min(92vw, 76vh, 600px); }
.board-col { flex: 0 0 auto; width: var(--bs); }
.side-col { flex: 1 1 280px; min-width: 0; }

/* board: wobbly svg grid under transparent squares */
.board { position: relative; width: var(--bs); height: var(--bs); display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); user-select: none; }
.bsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.bsvg .gl { fill: none; stroke: var(--ink); stroke-width: 1.1; opacity: .75; stroke-linecap: round; }
.sq { position: relative; display: flex; align-items: center; justify-content: center; cursor: default; }
.sq.last { background: var(--hatchbg); background-color: rgba(26,23,20,.08); }
.sq.sel { background: repeating-linear-gradient(45deg, rgba(26,23,20,.28) 0 1.5px, transparent 1.5px 6px); box-shadow: inset 0 0 0 3px var(--red); }
.sq.checked { background: rgba(214,38,28,.5); box-shadow: inset 0 0 0 3px var(--red); }
.sq.target::after { content: ""; position: absolute; width: 26%; height: 26%; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--paper); z-index: 3; }
.sq.target.occupied::after { width: 90%; height: 90%; background: transparent; border: 3px dashed var(--red); box-shadow: none; }
.sq.target, .sq.mine { cursor: pointer; }
.sq .coord { position: absolute; left: 7px; top: 4px; font-family: var(--hand); font-size: 16px; line-height: 1; color: var(--ink); opacity: .95; z-index: 2; pointer-events: none; text-shadow: 0 0 2px var(--paper), 0 0 2px var(--paper); }
.sq .coord.file { left: auto; right: 7px; top: auto; bottom: 4px; }
body.f2f .sq .coord { font-size: 13px; left: 5px; top: 3px; }
body.f2f .sq .coord.file { left: auto; right: 5px; top: auto; bottom: 3px; }

/* piece wrappers: a bit bigger than the cell (characters stand on the square, plinth inside it) */
.sq > .pc { position: absolute; left: 3%; top: 3%; width: 94%; height: 94%; pointer-events: none; z-index: 1; }
.sq > .pc.inv { transform: rotate(180deg); }  /* far player's pieces face them in face-to-face mode */
.pc svg.pz { width: 100%; height: 100%; display: block; overflow: visible; transform-origin: 50% 90%; }

/* piece characters (mockup css; svg class is .pz so it doesn't collide with the .pc wrapper) */
.pz { --pf: #fffdf4; --ps: var(--ink); --fc: var(--ink); --wf: var(--ink); --wc: #fffdf4; }
.pz.b { --pf: var(--ink); --ps: var(--ink); --fc: #fbf7ec; --wf: #fbf7ec; --wc: var(--ink); }
.pz .gs { fill: var(--ink); opacity: .2; }
.pz .bd path { fill: var(--pf); stroke: var(--ps); stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; }
.pz .sh path { pointer-events: none; opacity: .8; }
.pz .hl path { fill: none; stroke: #fbf7ec; stroke-width: 1.5; stroke-dasharray: 5 4; stroke-linecap: round; }
.pz .dt path { fill: none; stroke: var(--fc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pz .dt path.win { fill: var(--wf); stroke: var(--ps); stroke-width: 2.2; }
.pz .dt path.fl { fill: var(--fc); stroke-width: .8; }
.pz .alw path { fill: var(--fc); stroke: var(--fc); stroke-width: 1; stroke-linejoin: round; }
.pz .e path, .pz .e circle, .pz .e ellipse { fill: none; stroke: var(--fc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pz .e .f { fill: var(--fc); }
.pz .e .bg { fill: var(--rf, var(--pf)); }
.pz .e .drp { fill: #fffdf4; stroke: var(--ink); stroke-width: 1.6; }
.pz .e .bmp { fill: var(--pf); stroke: var(--ps); stroke-width: 2.2; }
.pz .e .bl { stroke: var(--ink); stroke-width: 1.6; }
.pz .spn { transform-box: fill-box; transform-origin: center; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* captured pieces row */
.captured { min-height: 44px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px; padding: 0; font-size: var(--fs-small); }
.captured .label, .fp-caps .label { margin-right: 6px; font-family: var(--hand); font-size: var(--fs-body-hand); opacity: .75; }
.cap-pc { width: 44px; height: 44px; padding: 2px; border: 2px solid transparent; border-radius: var(--wob); background: transparent; box-shadow: none; line-height: 0; }
.cap-pc::after { display: none; }
.cap-pc:disabled, .cap-pc:active:not(:disabled) { opacity: 1; box-shadow: none; }
.cap-pc.clickable { cursor: pointer; border: 2px dashed var(--red); background: var(--paper); }
.cap-pc.picked { background: var(--hatchbg), var(--paper); border-style: solid; transform: translateY(-3px); }
.cap-pc:hover:not(:disabled) { transform: translateY(-2px); }
.cap-pc.pc { position: static; }

.status { font-family: var(--hand); font-size: var(--fs-group-hand); line-height: 1.1; margin-bottom: 8px; }
.card-area { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.card { width: 90px; flex: 0 0 auto; transform: rotate(-3deg); line-height: 0; }
.card.empty { height: 120px; display: flex; align-items: center; justify-content: center; line-height: 1.2; font-family: var(--hand); font-size: var(--fs-body-hand); opacity: .6;
  border: 2.6px dashed var(--ink); border-radius: var(--wob); transform: none; }
.card.sm.empty { height: 71px; }
.moves-left { font-family: var(--hand); font-size: var(--fs-group-hand); margin-top: 6px; color: var(--red); }
.buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.hint { margin-top: 10px; opacity: .8; font-size: var(--fs-small); min-height: 1.3em; line-height: 1.35; }
.hint.red { color: var(--red); opacity: 1; }
.piles { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; font-size: var(--fs-small); }
#log, #log2 { margin: 0; padding-left: 2.7em; font-size: var(--fs-small); line-height: 1.4; }
#log { max-height: 190px; overflow-y: auto; }
#log li { margin-bottom: 2px; }
.banner { position: relative; background: var(--paper); border: 2.6px solid var(--ink); border-radius: var(--wob); padding: 10px 16px; margin-bottom: var(--sp-3); font-family: var(--hand); font-size: var(--fs-group-hand); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* wide: grid so the side panel spans exactly the board's row (top edge to bottom edge), whatever the captured rows above/below do */
@media (min-width: 761px) {
  .game-layout { display: grid; grid-template-columns: var(--bs) minmax(280px, 1fr); column-gap: 18px; align-items: start; }
  .board-col { display: contents; }
  #cap-b { grid-column: 1; grid-row: 1; }
  #board { grid-column: 1; grid-row: 2; }
  #cap-w { grid-column: 1; grid-row: 3; }
  .side-col { grid-column: 2; grid-row: 2; position: relative; height: var(--bs); }
  .side-panel { position: absolute; inset: 0; display: flex; flex-direction: column; }
  .side-panel > .sp-sec { flex: 0 0 auto; }
  .side-panel > .sp-sec:last-child { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .side-panel #log { flex: 1 1 0; min-height: 0; max-height: none; overflow-y: auto; }
}
@media (max-width: 760px) {
  .game-layout { flex-direction: column; align-items: stretch; }
  .board-col { margin: 0 auto; }
  .side-col { flex: none; width: 100%; }
  main { padding: 8px 16px; }
  #game-screen { padding: 8px; }
}

.board.flip { animation: boardflip .5s ease-in-out; }
@keyframes boardflip { from { transform: rotate(180deg); } to { transform: rotate(0); } }
.board.flip.flipfx { animation: boardspin .95s cubic-bezier(.45,0,.25,1); }
@keyframes boardspin {
  0% { transform: rotate(180deg) scale(.97); }
  16% { transform: rotate(194deg) scale(.95); }
  74% { transform: rotate(-18deg) scale(1); }
  90% { transform: rotate(6deg) scale(1); }
  100% { transform: rotate(0) scale(1); }
}

/* slapstick reactions: overlay layer above the board (never inside it, render() replaces the board DOM) */
#fx { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.fxi { position: absolute; pointer-events: none; }
.fxi svg { overflow: visible; }
.fxi > svg { width: 100%; height: 100%; display: block; }
.fxi > .pc { display: block; width: 100%; height: 100%; }
.fxi > .pc.inv { transform: rotate(180deg); }
.fx-st { position: absolute; overflow: visible; }
.fx-zz { position: absolute; font-family: var(--hand); color: var(--ink); pointer-events: none;
  text-shadow: 1px 1px 0 var(--paper), -1px -1px 0 var(--paper), 1px -1px 0 var(--paper), -1px 1px 0 var(--paper); }
.fx-rev { position: absolute; left: 0; top: 50%; margin-top: -.65em; width: 100%; text-align: center; font-family: var(--scrawl); color: var(--red); white-space: nowrap;
  text-shadow: 2px 2px 0 var(--paper), -2px 2px 0 var(--paper), 2px -2px 0 var(--paper), -2px -2px 0 var(--paper), 0 3px 0 var(--paper); }
.fx-capw { position: absolute; width: max-content; max-width: 88vw; transform: translate(-50%, -100%); pointer-events: none; }
.fx-capw.far { transform: translate(-50%, 0) rotate(180deg); }
.fx-cap { background: var(--paper); border: 2.6px solid var(--ink); border-radius: var(--wob); padding: 5px 14px;
  font-family: var(--hand); font-size: var(--fs-body-hand); line-height: 1.25; text-align: center; color: var(--ink); }
.pc.fxh { opacity: 0; }
.sq > .pc.tip svg.pz { transform: rotate(80deg); }

/* hands (Hold 2) */
.hand { margin-bottom: 8px; }
.hand-title { font-family: var(--hand); font-size: var(--fs-body-hand); opacity: .75; margin-bottom: 4px; }
.hand.active .hand-title { opacity: 1; font-size: var(--fs-group-hand); }
.hand-cards { display: flex; gap: 12px; }
.hcard { width: 70px; padding: 0; border: 0; background: transparent; box-shadow: none; line-height: 0; border-radius: 0; }
.hcard::after { display: none; }
.hcard:nth-child(odd) .cardsvg { transform: rotate(-2.5deg); }
.hcard:nth-child(even) .cardsvg { transform: rotate(2deg); }
.hcard.pickable { cursor: pointer; outline: 2px dashed var(--red); outline-offset: 4px; }
.hcard.pickable:hover { transform: translateY(-4px) rotate(-1deg); }
.hcard:disabled { opacity: .8; }
.hand.small .hcard { width: 38px; }

/* ---------- touch comfort ---------- */
button, input, select, label, .sq { touch-action: manipulation; }
.stepper { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.stepper button.step { width: 36px; height: 36px; padding: 0; font-size: var(--fs-group-hand); line-height: 1; }
.stepper input { text-align: center; }

/* overlays (announcement / menu / confirm) */
.overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; }
.overlay.dim { background: rgba(26,23,20,.6); background-image: radial-gradient(rgba(251,247,236,.15) 1px, transparent 1.2px); background-size: 7px 7px; }
.ann-box { position: relative; background: var(--paper); border: 3.4px solid var(--ink); border-radius: var(--wob); padding: 18px 30px; text-align: center; max-width: 90vw; transform: rotate(-2deg); }
.ann-box::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(26,23,20,.55); border-radius: var(--wob2); pointer-events: none; }
.ann-box.special, .ann-box.special4, .ann-box.skip, .ann-box.rev { color: var(--red); }
.ann-box.special::after, .ann-box.special4::after, .ann-box.skip::after, .ann-box.rev::after { border: 1.9px solid var(--red); opacity: 1; }
.ann-big { font-family: var(--scrawl); font-size: var(--fs-display); line-height: 1.2; }
.ann-sub { font-family: var(--hand); font-size: var(--fs-group-hand); color: var(--ink); opacity: .85; }
.flip180 { transform: rotate(180deg); }
.ann-box.flip180 { transform: rotate(178deg); }
.sheet-box { position: relative; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--wob); padding: 16px; width: min(88vw, 380px); max-height: 80dvh; display: flex; flex-direction: column; gap: 10px; }
.sheet-box h3 { margin: 0; }
.sheet-box button { min-height: 48px; font-size: var(--fs-body-hand); }
#log2 { overflow-y: auto; min-height: 60px; max-height: 38dvh; }
.confirm-text { font-family: var(--hand); font-size: var(--fs-group-hand); margin: 6px 0; text-align: center; }
.confirm-btns { display: flex; gap: 12px; }
.confirm-btns button { flex: 1; }

/* ---------- face-to-face game screen ---------- */
body.f2f { overflow: hidden; overscroll-behavior: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body.f2f > header { display: none; }
body.f2f #game-screen { max-width: none; padding: 0; }
#f2f { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; background: transparent;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.f2f-board { flex: 0 0 auto; overflow: hidden; align-self: center; --bs: min(100vw, calc(100vh - 290px)); --bs: min(100vw, calc(100dvh - 290px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); width: var(--bs); height: var(--bs); padding: 3px; }
.f2f-board .board { touch-action: none; --bs: calc(100% - 0px); width: 100%; height: 100%; }
.fpanel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 6px 12px; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--wob); margin: 3px 4px; overflow: hidden; }
.fpanel.top { transform: rotate(180deg); }
.fpanel.active { border-color: var(--red); }
.fpanel.inactive { flex: 0 0 auto; background: var(--paper); border-width: 2px; padding-top: 2px; padding-bottom: 2px; opacity: .85; } /* waiting: short, single light frame */
.fpanel.done { background: var(--paper); }
.fp-head { display: flex; align-items: center; gap: 8px; min-height: 28px; flex: 0 0 auto; }
.fp-name { font-family: var(--hand); font-weight: 400; font-size: var(--fs-body-hand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.fp-pile { margin-left: auto; font-size: calc(var(--fs-small) * .85); opacity: .8; white-space: nowrap; display: flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; flex: 0 1 auto; }
.fp-pile .mini { width: 18px; }
.menu-btn { width: 44px; height: 44px; margin: -8px -8px -8px 0; padding: 0; font-size: var(--fs-group-hand); border: 0; background: transparent; box-shadow: none; flex: 0 0 auto; text-transform: none; }
.menu-btn::after { display: none; }
.fp-mid { display: flex; gap: 8px; align-items: center; flex: 1 1 auto; min-height: 70px; }
.card.sm { width: 50px; }
.fp-hand { display: flex; gap: 6px; flex: 0 0 auto; }
.hcard.sm { width: 48px; }
.fp-text { font-size: var(--fs-small); line-height: 1.25; min-width: 0; flex: 1; align-self: stretch; overflow-y: auto; }
.fp-ml { font-family: var(--hand); font-size: var(--fs-group-hand); color: var(--red); }
.fp-caps { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 44px; flex: 0 0 auto; font-size: var(--fs-small); }
.fp-caps .cap-pc { width: 44px; height: 44px; }
.fp-btns { display: flex; gap: 10px; flex: 0 0 auto; padding-right: 3px; }
.fp-btns button { flex: 1; min-width: 0; min-height: 46px; font-size: var(--fs-body-hand); padding: 6px 6px; white-space: nowrap; }
.fp-over { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.fp-over-msg { font-family: var(--scrawl); font-size: var(--fs-h); line-height: 1.3; }
.fp-over-btns { display: flex; gap: 12px; }
.fp-over-btns button { min-height: 46px; padding: 0 22px; font-size: var(--fs-body-hand); }
.fp-deckbtn { min-height: 0 !important; padding: 2px 8px !important; margin: -4px 0; font-size: var(--fs-small-hand) !important; border-width: 2px; }

/* ---------- settings ---------- */
.field { margin: 0 0 var(--sp-2); }
.field > label, .field > .lab, .row > label:not(.chk) { display: block; font-family: var(--hand); font-size: var(--fs-body-hand); margin-bottom: var(--sp-1); }
.field input[type=text] { width: 100%; min-height: 44px; font-size: var(--fs-body); padding: 6px 10px; }
#settings-screen .note { display: block; margin: var(--sp-1) 0 0; line-height: 1.35; }
.seg { display: flex; gap: 10px; flex-wrap: wrap; }
.seg button { flex: 1 1 0; min-height: 44px; min-width: 90px; }
.quick .seg button { font-size: var(--fs-group-hand); }
button.big { display: block; width: 100%; min-height: 58px; font-size: var(--fs-h-hand); margin-top: var(--sp-2); }
.quick .error { margin: 4px 0 0; min-height: 0; }
.quick .error:empty { display: none; }
.rules-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3) 28px; margin-top: var(--sp-2); }
.group { margin: 0 0 var(--sp-3); padding-bottom: var(--sp-1); border-bottom: 1px dashed rgba(26,23,20,.4); }
.row { display: block; margin: 0 0 var(--sp-2); }
.row .inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) 14px; }
.row .inline .stepper { margin-left: 0; } /* sits on the label line; if it wraps on a narrow screen it lines up with the note below */
.rules-col { min-width: 0; }
.row select { width: 100%; }
.group.reset, .group:last-child { border-bottom: none; } /* no divider under the last section of a column */
.group.reset button { min-height: 44px; }
#counts-table { border-collapse: collapse; width: 100%; table-layout: fixed; }
#counts-table th:nth-child(2), #counts-table td:nth-child(2) { width: 132px; }
#counts-table th:nth-child(3), #counts-table td:nth-child(3) { width: 64px; }
#counts-table .stepper { gap: 3px; }
#counts-table .stepper button.step { width: 34px; height: 34px; }
#counts-table .stepper input { width: 42px; height: 34px; }
#counts-table th, #counts-table td { text-align: left; padding: 1px 6px; border-bottom: 1px dashed rgba(26,23,20,.4); vertical-align: middle; }
#counts-table th { font-family: var(--hand); font-weight: 400; font-size: var(--fs-small-hand); }
#counts-table .cname { display: flex; align-items: center; gap: 8px; }
#counts-table .cname b { font-family: var(--hand); font-weight: 400; font-size: var(--fs-body-hand); }
#counts-table .cname small { display: block; font-size: var(--fs-small); opacity: .75; line-height: 1.2; }
#counts-table tfoot td { font-family: var(--hand); font-size: var(--fs-body-hand); border-bottom: none; }
.stepper input, .row .stepper input[type=number] { width: 52px; height: 44px; text-align: center; font-size: var(--fs-body); padding: 3px; }
#counts-table input { width: 52px; height: 38px; text-align: center; font-size: var(--fs-body); padding: 3px; }
.stepper button.step { width: 44px; height: 44px; }
/* hand-drawn checkbox: real input stays focusable (visually hidden), .box is the drawing */
label.chk { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-family: var(--hand); font-size: var(--fs-body-hand); }
label.chk input { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; }
label.chk .box { position: relative; flex: 0 0 auto; width: 28px; height: 28px; margin: 0 2px; border: 2.6px solid var(--ink); border-radius: var(--wob); background: var(--paper); }
label.chk .box::after { content: ""; position: absolute; left: 6px; top: -4px; width: 9px; height: 18px; border: solid var(--red); border-width: 0 4px 4px 0; border-radius: 1px 2px 2px 1px; transform: rotate(40deg) scale(0); transition: transform .1s; }
label.chk input:checked + .box::after { transform: rotate(40deg) scale(1); }
label.chk input:focus-visible + .box { outline: 2px dashed var(--red); outline-offset: 3px; }
select { -webkit-appearance: none; appearance: none; min-height: 44px; padding: 6px 34px 6px 10px; font-size: var(--fs-body);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.6 6.8 L10.2 13.4 L16.6 6.4' fill='none' stroke='%231a1714' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center / 18px 18px; }
@media (min-width: 760px) {
  .rules-grid { grid-template-columns: minmax(340px, 1.15fr) minmax(280px, 1fr); grid-template-areas: "deck right" "extra right"; align-items: start; column-gap: 36px; }
  .rules-grid > .rules-col:nth-child(1) { grid-area: deck; }
  .rules-grid > .rules-col:nth-child(2) { grid-area: right; }
  .rules-grid > .rules-col.extra { grid-area: extra; }
}
@media (max-width: 600px) {
  main { padding: 8px 16px; }
  #game-screen { padding: 8px; }
  .panel { padding: 12px 14px; }
  .quick { padding-top: 8px; padding-bottom: 10px; }
  button.big { min-height: 52px; }
  .quick .seg button { font-size: var(--fs-body-hand); min-width: 0; padding: 6px 6px; white-space: nowrap; }
  #counts-table th:nth-child(2), #counts-table td:nth-child(2) { width: 112px; }
  #counts-table th:nth-child(3), #counts-table td:nth-child(3) { width: 52px; }
  #counts-table .stepper { gap: 2px; }
  #counts-table .stepper button.step { width: 30px; height: 30px; min-height: 0; font-size: var(--fs-body); }
  #counts-table .stepper button.step::before { content: ""; position: absolute; inset: -6px -3px; } /* keeps a ~38px tap area */
  #counts-table .stepper input { width: 34px; height: 30px; font-size: var(--fs-small); }
  #counts-table th, #counts-table td { padding: 4px 3px; }
  button { min-height: 44px; }
}

@media (max-height: 740px) {
  .fpanel { padding: 4px 10px; gap: 3px; }
  .card.sm { width: 40px; }
  .hcard.sm { width: 40px; }
  .fp-mid { min-height: 58px; }
  .fp-ml { font-size: var(--fs-body-hand); }
  .fp-caps { min-height: 40px; }
  .fp-caps .cap-pc { width: 40px; height: 40px; }
  .fp-caps.none { display: none; }
  .fp-btns button { min-height: 42px; }
  .fp-head { min-height: 26px; }
}

/* ---------- card tracker ---------- */
.tracker + .tracker { margin-top: 10px; }
.trk-head { font-family: var(--hand); font-size: var(--fs-body-hand); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.trk-flash { display: none; font-size: var(--fs-small); color: var(--paper); background: var(--red); border-radius: var(--wob); padding: 0 8px; }
.tracker.flash .trk-flash { display: inline-block; animation: trkflash 1.8s ease-out forwards; }
.tracker.flash .trk-strip { animation: trkglow 1.8s ease-out; }
@keyframes trkflash { 0% { transform: scale(.6); opacity: 0; } 15% { transform: scale(1.15); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes trkglow { 0% { background: rgba(214,38,28,.2); } 100% { background: transparent; } }
.trk-strip { display: flex; flex-wrap: wrap; gap: 6px 8px; border-radius: var(--wob); }
.trk-col { color: var(--ink); display: flex; flex-direction: column; align-items: center; min-width: 36px; }
.trk-col.special, .trk-col.special4, .trk-col.skip, .trk-col.rev { color: var(--red); }
.trk-col .mini { width: 36px; }
.trk-pips { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 3px; max-width: 52px; } /* wraps after 4 pips */
.pip { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-block; }
.pip.full { background: currentColor; }
.pip.half { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
#tracker-box { overflow-y: auto; }

/* ---------- line boil: art layers only (board + cards), never the page ---------- */
body.boil .board, body.boil .card .cardsvg, body.boil .hcard .cardsvg, body.boil .mini .cardsvg, body.boil .cap-pc svg { filter: url(#boil); }

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

@media (max-width: 430px) { .fp-btns { gap: 7px; } .fp-btns button { padding: 6px 3px; } .fp-head { gap: 6px; } }

/* ---------- end screen ---------- */
.overlay.end { background: rgba(26,23,20,.3); animation: endFade .22s ease-out; }
.end-card { position: relative; background: var(--paper); border: 3.2px solid var(--ink); border-radius: var(--wob);
  padding: 20px 24px 14px; width: min(92vw, 430px); max-height: 92dvh; overflow-y: auto; text-align: center; display: flex; flex-direction: column; gap: 8px;
  animation: endIn .22s ease-out; }
.end-head { font-family: var(--scrawl); font-size: var(--fs-display); line-height: 1.2; overflow-wrap: anywhere; }
.end-how { font-family: var(--hand); font-size: var(--fs-group-hand); line-height: 1.2; }
.end-how .mw { color: var(--red); font-size: 1.15em; }
.end-how .end-card-ico { display: inline-block; height: 1.3em; width: .95em; margin: -.3em .15em 0; line-height: 0; vertical-align: -.32em; transform: rotate(-6deg); } /* sits on the baseline, cap-height tall: line height unchanged */
.end-how .end-card-ico .cardsvg { width: 100%; height: 100%; display: block; }
#f2f.ended .fpanel { visibility: hidden; }
.end-stats { font-size: var(--fs-small); opacity: .65; line-height: 1.3; }
.end-fun { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
.end-vote { display: flex; align-items: center; justify-content: center; gap: 12px; }
.end-q { font-family: var(--hand); font-size: var(--fs-group-hand); margin-right: 4px; }
.thumb { width: 64px; min-height: 52px; padding: 0; font-size: var(--fs-h); line-height: 1; }
.thumb.on { border-color: var(--red); }
.end-note { display: flex; gap: 8px; align-items: center; }
.end-note input { flex: 1; min-width: 0; min-height: 44px; font-size: var(--fs-body); } /* phone body = 16px, stops iOS zoom */
.end-note button { min-height: 44px; padding: 4px 14px; }
.end-thanks { font-family: var(--hand); font-size: var(--fs-group-hand); color: var(--red); min-height: 44px; display: flex; align-items: center; justify-content: center; }
.end-btns { display: flex; gap: 10px; margin-top: 2px; }
.end-btns button { min-height: 52px; font-size: var(--fs-body-hand); flex: 1; }
.end-btns .end-rematch { flex: 2; font-size: var(--fs-group-hand); color: var(--red); }
.end-btns .end-rematch:hover:not(:disabled) { color: var(--ink); }
.end-link, .end-link:hover:not(:disabled), .end-link:active:not(:disabled) { align-self: center; border: 0; background: none; box-shadow: none; transform: none; padding: 6px 10px; font-size: var(--fs-body-hand); text-decoration: underline; opacity: .75; }
.end-link::after { display: none; }
.end-link:active:not(:disabled) { opacity: 1; }
.banner-btns { display: flex; gap: 10px; flex-wrap: wrap; }
#endscreen.f2f { flex-direction: column; justify-content: space-between; align-items: stretch; padding: 10px 12px; }
.end-half { flex: 0 1 auto; display: flex; justify-content: center; }
.f2f .end-half { max-height: 47dvh; }
.end-half.top { transform: rotate(180deg); }
.f2f .end-card { width: 100%; max-width: 430px; padding: 12px 16px 10px; gap: 5px; max-height: 100%; }
.f2f .end-head { font-size: var(--fs-h); line-height: 1.15; }
.f2f .end-how { font-size: var(--fs-body-hand); }
.f2f .end-fun { gap: 5px; margin: 2px 0 0; }
.f2f .thumb { min-height: 46px; width: 58px; }
.f2f .end-note input, .f2f .end-note button, .f2f .end-thanks { min-height: 40px; }
.f2f .end-btns button { min-height: 48px; }
@keyframes endFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes endIn { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- settings slides ---------- */
.slides { display: grid; position: relative; overflow-x: clip; padding: 0 6px 0 4px; margin: 0 -6px 0 -4px; } /* clip to the card width */
.slides > .panel { grid-area: 1 / 1; min-width: 0; align-self: start; position: relative; }
.slides > [hidden] { display: none !important; }
.pair { display: grid; grid-template-columns: 1fr; }
@media (min-width: 700px) { .pair { grid-template-columns: 1fr 1fr; gap: 0 16px; } }
.quick button.big { margin-top: var(--sp-3); min-height: 48px; background: var(--ink); color: var(--paper); }
.quick button.big:hover:not(:disabled) { color: var(--paper); background: #2e2924; }
.quick button.big:focus-visible { outline-color: var(--ink); }
.slide-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.slide-head h2 { margin: 0; }
.slide-head h2:focus { outline: none; }
.slide-head h2:focus-visible { outline: 2px dashed var(--red); outline-offset: 4px; }
.slide-bar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: var(--sp-2); margin: var(--sp-3) -16px -12px; padding: var(--sp-2) 16px; background: var(--paper); border-top: 1px dashed rgba(26,23,20,.4); }
.slide-bar button { flex: 1; min-height: 48px; }
.slide-bar .primary { flex: 2; font-size: var(--fs-group-hand); }
.slide-in-r, .slide-in-l, .slide-out-l, .slide-out-r { animation: .3s cubic-bezier(.2,.8,.2,1) both; will-change: transform, opacity; }
.slide-in-r { animation-name: sInR; z-index: 2; }   /* rules pushes in from the right, on top */
.slide-out-r { animation-name: sOutR; z-index: 2; } /* rules pushes back out to the right, on top */
.slide-out-l { animation-name: sOutL; z-index: 1; } /* quick start slides back and fades */
.slide-in-l { animation-name: sInL; z-index: 1; }
@keyframes sInR { from { transform: translateX(calc(100% + 24px)); } to { transform: none; } }
@keyframes sOutR { from { transform: none; } to { transform: translateX(calc(100% + 24px)); } }
@keyframes sOutL { from { transform: none; opacity: 1; } to { transform: translateX(-30%); opacity: 0; } }
@keyframes sInL { from { transform: translateX(-30%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sFadeOut { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { /* short crossfade, no movement */
  .slide-in-r, .slide-in-l { animation: sFadeIn .12s linear both !important; }
  .slide-out-l, .slide-out-r { animation: sFadeOut .12s linear both !important; }
}

/* phones */
@media (max-width: 699px) {
  .quick { display: flex; flex-direction: column; }
  .quick .error { order: 1; }
  .quick .start-row { order: 2; margin-top: var(--sp-2); }
    }

/* ---------- player chips + layout icons ---------- */
.players { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.players > .vs { align-self: start; margin-top: 14px; }
.vs { font-family: var(--hand); font-size: var(--fs-h-hand); opacity: .85; transform: rotate(-6deg); }
.chip { position: relative; display: flex; align-items: center; gap: var(--sp-1); min-width: 0; min-height: 56px; padding: 4px 8px 4px 6px; cursor: pointer;
  border: 0; }
.chip-pawn { flex: 0 0 auto; width: 48px; height: 52px; }
.chip-pawn svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chip-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.chip-line { display: block; min-width: 0; height: 1.3em; font-family: var(--hand); font-size: var(--fs-body-hand); line-height: 1.3; }
.chip-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.chip .chip-in { display: block; width: 100%; height: 1.3em; margin: 0; padding: 0; border: 0; border-bottom: 2px solid var(--red); border-radius: 0; background: transparent; box-shadow: none; font-family: var(--hand); font-size: inherit; line-height: 1.3; color: var(--ink); text-overflow: clip; }
.chip-in:focus-visible { outline: none; }
.chip-col { font-size: calc(var(--fs-small) * .85); opacity: .65; line-height: 1.2; }
.chip-edit { flex: 0 0 auto; width: 28px; height: 28px; min-height: 0; padding: 0; font-size: var(--fs-small); border-width: 2px; box-shadow: none; background: transparent; }
.chip-edit::after { display: none; }
.chip-edit::before { content: ""; position: absolute; inset: -8px; }
.seg button .ico { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.seg button .ico.wide { width: 36px; }
.seg button { white-space: nowrap; }
.seg button:has(.ico) { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); }
.pair .field { display: flex; flex-direction: column; }
.pair .seg { flex: 1; } /* both rows stretch to the taller one */
/* chips are vertical everywhere: pawn on top, name centred, colour under, edit badge in the corner */
.chip { flex-direction: column; justify-content: center; text-align: center; padding: 6px 6px 8px; gap: 2px; min-height: 0; }
.chip-pawn { width: 46px; height: 50px; }
.chip-txt { flex: 0 0 auto; width: 100%; align-items: center; }
.chip-line { width: 100%; text-align: center; display: flex; align-items: center; justify-content: center; gap: 4px; height: auto; min-height: 26px; }
.chip-line .chip-name { flex: 0 1 auto; min-width: 0; }
.chip-line:has(.chip-in:not([hidden])) .chip-edit { display: none; }
.chip .chip-in { text-align: center; }
.chip-edit { position: relative; flex: 0 0 auto; width: 24px; height: 24px; }
@media (max-width: 699px) {
  .players { gap: 6px; }
  .chip-pawn { width: 40px; height: 44px; }
}

/* in-game options: quiet, compact */
.opts { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 8px; }
.opts label.chk { min-height: 32px; gap: 6px; font-size: var(--fs-small); opacity: .85; }
.opts label.chk .box { width: 18px; height: 18px; margin: 0; border-width: 2px; }
.opts label.chk .box::after { left: 3px; top: -3px; width: 6px; height: 12px; border-width: 0 3px 3px 0; }
.opts label.chk input { width: 100%; height: 32px; }
.sheet-box .opts { margin-top: 0; }

/* ---------- desktop side panel: one frame, quiet sections, one loud thing (the current turn) ---------- */
.side-panel { padding: var(--sp-2) var(--sp-3) var(--sp-3); margin-bottom: 0; }
.side-panel::after { display: none; } /* one plain border, no inner second outline */
.sp-sec ~ .sp-sec { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed rgba(26,23,20,.4); }
.sp-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.sp-players { flex: 1; min-width: 0; }
.players-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: var(--sp-1) var(--sp-2); font-family: var(--type); font-size: var(--fs-small); }
.players-line .p { padding: 1px 4px; border-bottom: 2px solid transparent; opacity: .6; }
.players-line .p.active { border-bottom-color: var(--ink); opacity: 1; }
.players-line .vs { font-family: var(--hand); font-size: var(--fs-small-hand); opacity: .5; }
.sp-top { container-type: inline-size; }
.sp-deck { flex: 0 0 auto; width: auto; min-height: 0; padding: 0 2px; border: 0; background: transparent; box-shadow: none; text-transform: none; font-family: var(--hand); font-size: var(--fs-small-hand); color: var(--ink); opacity: .55; white-space: nowrap; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sp-deck::after { display: none; }
.sp-deck:hover, .sp-deck:focus-visible { opacity: .9; }
@container (max-width: 359px) { .sp-deck { display: none; } } /* narrow side panel: hide rather than crowd the player tabs */
.sp-menu { width: 34px; height: 34px; min-height: 0; padding: 0; font-size: var(--fs-body); border: 0; background: transparent; box-shadow: none; flex: 0 0 auto; text-transform: none; }
.sp-menu::after { display: none; }
.sp-menu::before { content: ""; position: absolute; inset: -5px; }
.side-pop { position: absolute; top: 46px; right: 14px; z-index: 20; display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1); min-width: 210px; padding: var(--sp-2);
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--wob); }
.side-pop .opts { flex-direction: column; margin: 0 0 var(--sp-1); }
.side-pop button { min-height: 36px; font-size: var(--fs-body-hand); text-align: left; border-width: 2px; }
.side-pop button::after { display: none; }
.side-pop[hidden] { display: none; }
/* current turn = the loud section */
.sp-label { font-family: var(--type); font-size: var(--fs-small); opacity: .6; margin-bottom: var(--sp-1); }
.turn-panel .buttons { gap: var(--sp-2); align-items: center; }
.turn-panel .buttons button:not(.primary) { min-height: 34px; padding: 3px 12px; font-size: var(--fs-small-hand); border-width: 2px; }
.turn-panel .buttons button:not(.primary)::after { display: none; }
.turn-panel .buttons button:disabled { opacity: .35; }
.turn-panel .hint { margin-top: var(--sp-2); }
/* deck: quiet header with the discard folded in */
.side-panel .tracker + .tracker { margin-top: var(--sp-2); }
.side-panel .trk-head { font-family: var(--type); font-size: var(--fs-small); opacity: .75; margin-bottom: var(--sp-1); justify-content: space-between; }
.side-panel .trk-head .mini { width: 20px; margin: 0 2px; }
.side-panel .piles { opacity: .8; }
#log { max-height: 150px; padding-left: 2.7em; opacity: .85; } /* room for 3-digit turn numbers */
@media (max-width: 600px) { .turn-panel .buttons button:not(.primary) { min-height: 44px; } }

/* compact header while a game is on (setup keeps the full title + pitch) */
body.ingame > header { padding: 6px 16px 0; }
body.ingame h1 { font-size: calc(var(--fs-display) * .6); }
body.ingame .sub { display: none; }

/* ---------- face-to-face: active panel is the loud one, waiting panel is a quiet header line ---------- */
.fp-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.15; }
.fp-who .fp-name { display: block; }
.fp-colr { font-family: var(--type); font-size: var(--fs-small); opacity: .65; }
.fp-wait { font-size: var(--fs-small); opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-pile { margin-left: 0; }
.fpanel.inactive .fp-head { min-height: 40px; }
.fp-mid-wait { flex: 0 0 auto; min-height: 0; }
.fp-desc { font-size: var(--fs-body); line-height: 1.2; margin-bottom: var(--sp-1); }
.fp-hint.red { color: var(--red); }
.fp-btns .primary.big { min-height: 52px; font-size: var(--fs-group-hand); margin: 0; }
.fp-btns.quiet { justify-content: flex-start; }
.fp-btns.quiet button { flex: 0 1 auto; min-height: 44px; padding: 3px 16px; font-size: var(--fs-small-hand); border-width: 2px; }
.fp-btns.quiet button::after { display: none; }
.fp-btns.quiet button:disabled { opacity: .35; }

/* ---------- gary (the bot opponent): chip toggle, mood picker, avatar ---------- */
.chip-edit[hidden] { display: none; }
.chip.gary { cursor: default; }
.chip-note { font-size: calc(var(--fs-small) * .85); opacity: .6; line-height: 1.2; margin-top: 2px; }
.gary-av { display: inline-block; width: 28px; height: 28px; margin-right: 4px; vertical-align: middle; }
.gary-av svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gary-av.hard svg, .chip-pawn.hard svg { animation: gjit .22s steps(2) infinite alternate; }
@keyframes gjit { from { transform: translate(-.6px, .4px); } to { transform: translate(.6px, -.4px); } }
@media (prefers-reduced-motion: reduce) { .gary-av.hard svg, .chip-pawn.hard svg { animation: none; } }
.hcard.gpick { outline: 2px dashed var(--red); outline-offset: 4px; transform: translateY(-6px) rotate(-2deg); }

/* game speed: compact 3-way choice (house rules, side popover, f2f sheet) */
.spd { display: inline-flex; gap: 4px; flex-wrap: nowrap; }
.spd button { position: relative; flex: 0 1 auto; min-width: 0; min-height: 28px; padding: 1px 10px; font-size: var(--fs-small-hand); border-width: 2px; text-align: center; }
.spd button::after { display: none; }
.spd button::before { content: ""; position: absolute; inset: -6px -2px; }
.spd-lab { display: block; font-family: var(--hand); font-size: var(--fs-body-hand); margin-bottom: var(--sp-1); }
.spd-line { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); opacity: .85; width: 100%; }
.sheet-box .opts .spd-line { margin-top: 4px; }
.side-pop .spd button { min-height: 28px; text-align: center; font-size: var(--fs-small-hand); }
.kh { margin-left: 6px; font-family: var(--type); font-size: .6em; text-transform: lowercase; letter-spacing: 0; opacity: .6; }
@media (pointer: coarse) { .kh { display: none; } }

/* ---------- setup screen proportions: start game > player cards > everything else small ---------- */

/* even rhythm: one gap between player cards / chaos / house rules / start game; panel capped and centred */
.slides > .quick { width: 100%; max-width: 620px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: var(--sp-2); }
.quick .players, .quick .setup-grid, .quick .error { margin: 0; }
.quick button.big { margin-top: var(--sp-1); }
.quick .start-row { order: 0; }
.quick .error { order: 0; }
@media (max-width: 699px) { .quick .error { order: 1; } .quick .start-row { order: 2; } }

/* drag and drop: the piece you're carrying */
.sq.mine, .cap-pc.clickable { touch-action: none; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; transform-origin: 50% 50%; filter: drop-shadow(3px 5px 0 rgba(26,23,20,.35)); }
.drag-ghost svg.pz { width: 100%; height: 100%; display: block; overflow: visible; }
.sq > .pc.dragging, .cap-pc.dragging { opacity: .3; }
body.dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
body.dragging .sq, body.dragging .cap-pc { cursor: grabbing; }

/* ---------- setup screen: one centred column. header (you vs opponent), a label|control grid, then gear + start ---------- */
.slides > .quick { --col: 440px; --lab: 6.6em; --pawn-h: 50px; gap: var(--sp-3); padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.quick > .players, .quick > .setup-grid, .quick > .start-row, .quick > .error { width: 100%; max-width: var(--col); margin-left: auto; margin-right: auto; }
.quick .players { grid-template-columns: 1fr auto 1fr; align-items: center; }
.quick .chip { padding: 0 6px; } /* no extra air: card padding is the only spacing above the avatars */
.quick .chip-pawn { height: var(--pawn-h); }
.quick .players > .vs { align-self: center; margin: 0; line-height: 1; } /* centred on the avatar + name blocks */
.setup-grid { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); align-items: center; gap: var(--sp-2) var(--sp-3); }
.srow { display: contents; } /* label + control drop straight into the grid columns */
.setup-grid .lab { margin: 0; font-family: var(--hand); font-size: var(--fs-small-hand); line-height: 1.1; text-align: left; opacity: .8; white-space: nowrap; }
.setup-grid .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; flex-wrap: nowrap; }
.quick .setup-grid .seg button { min-width: 0; min-height: 40px; padding: 2px 6px; font-size: var(--fs-small-hand); border-width: 2px; white-space: nowrap; }
.setup-grid .seg button::after { display: none; }
.setup-grid .chip-opp { cursor: default; }
#rules-body .presets { margin: 0 0 var(--sp-2); } /* deck preset sits above the copies table */
/* bottom row: quiet gear + start game side by side, filling the control column exactly like the toggle rows above */
.start-row { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); align-items: stretch; gap: var(--sp-3); margin-top: 0; }
.quick .start-row { margin-top: 0; padding-top: var(--sp-3); border-top: 1px dashed rgba(26,23,20,.4); }
.start-row .start-pair { grid-column: 2; display: flex; gap: var(--sp-2); }
.start-row button.big { flex: 1 1 auto; min-width: 0; width: auto; margin-top: 0; padding: 6px 20px; font-size: var(--fs-body-hand); }
.quick .start-row button.big { margin-top: 0; }
.gear-btn { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 48px; min-height: 48px; padding: 0; border-width: 2px; border-color: rgba(26,23,20,.45); background: transparent; }
.gear-btn:hover:not(:disabled) { border-color: var(--ink); }
.gear-btn svg { display: block; width: 24px; height: 24px; overflow: visible; opacity: .8; transition: transform .2s cubic-bezier(.23,1,.32,1); }
.gear-btn:hover:not(:disabled) svg { transform: rotate(30deg); }
@media (max-width: 600px) {
  .slides > .quick { --lab: 5.4em; --pawn-h: 44px; gap: var(--sp-2); padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
  .setup-grid { gap: var(--sp-2) var(--sp-2); }
  .start-row { gap: var(--sp-2); }
  .quick .start-row { padding-top: var(--sp-2); }
  .quick .setup-grid .seg button { min-height: 44px; padding: 2px 3px; }
}

/* selected toggle / segmented buttons, game-wide: warm tint + heavier ink + thicker letters. never a solid fill (that's start game's job) */
:root { --tint: #efdcae; }
button[aria-pressed=true] { background: var(--tint); color: var(--ink); border-color: var(--ink); -webkit-text-stroke: .5px currentColor; }
button[aria-pressed=false] { border-color: rgba(26,23,20,.4); }
button[aria-pressed=true]::after { display: none; }
button[aria-pressed=true]:hover:not(:disabled) { background: var(--tint); color: var(--ink); }
button[aria-pressed=false]:hover:not(:disabled) { border-color: var(--ink); }
button[aria-pressed=true]:focus-visible { outline-color: var(--red); }
.quick .setup-grid .seg button[aria-pressed=true], .spd button[aria-pressed=true] { border-width: 2.6px; }
.spd button[aria-pressed=true] { padding-left: 9.4px; padding-right: 9.4px; } /* keep the width steady as the border thickens */

/* ---------- polish batch: in-game menu popover, setup row/avatars, house rules hierarchy ---------- */

/* in-game menu popover: bigger toggle labels, tighter rows, small action pills under a dashed rule */
.side-pop .opts { gap: 0 14px; margin: 0 0 var(--sp-1); }
.side-pop .opts label.chk { min-height: 28px; gap: 8px; font-size: calc(var(--fs-small-hand) * 1.12); opacity: 1; }
.side-pop .opts label.chk input { height: 28px; }
.side-pop .spd-line { font-family: var(--hand); font-size: calc(var(--fs-small-hand) * 1.12); opacity: 1; margin-top: 2px; }
.side-pop .spd-line > span:first-child { font-family: var(--hand); font-size: calc(var(--fs-small-hand) * 1.12); }
.side-pop .pop-actions { display: flex; gap: 6px; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed rgba(26,23,20,.4); }
.side-pop .pop-actions button { flex: 1 1 0; min-width: 0; min-height: 28px; padding: 1px 8px; font-size: var(--fs-small-hand); text-align: center; white-space: nowrap; }

/* setup: gear sits under the label column, start game takes the rest of the row */
.start-row .start-pair { grid-column: 1 / -1; }

/* setup: pencil floats beside the name (3-col grid keeps the name dead centre under the avatar) */
.chip-line { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.chip-line .chip-name { grid-column: 2; text-align: center; }
.chip-line .chip-in { grid-column: 1 / -1; }
.chip-line .chip-edit { grid-column: 3; justify-self: start; margin-left: 4px; }
/* setup: pawn and gary share one box height; the svgs are cropped to their drawn bounds (see fitAvatar) so tops and bottoms line up */
.chip-pawn { width: 72px; height: var(--pawn-h, 50px); }
.chip-pawn svg { width: 100%; height: 100%; }

/* house rules: loud (start game) > medium (headings) > quiet (options, controls) */
.slide-bar .primary { flex: 0 1 380px; margin-left: auto; font-size: var(--fs-body-hand); background: var(--ink); color: var(--paper); } /* fixed width, right-aligned: same size as the setup screen start */
.slide-bar .primary:hover:not(:disabled) { color: var(--paper); background: #2e2924; }
.slide-bar .primary:focus-visible { outline-color: var(--ink); }
.slide-bar #rules-back2 { flex: 0 0 auto; min-height: 0; padding: 4px 6px; border: 0; background: transparent; font-size: var(--fs-small-hand); opacity: .6; text-decoration: underline; text-underline-offset: 3px; }
.slide-bar #rules-back2:hover:not(:disabled) { opacity: 1; }
#rules-body .row > label:not(.chk), #rules-body .spd-lab, #rules-body label.chk { font-size: var(--fs-small-hand); opacity: .8; text-transform: lowercase; }
#rules-body label.chk { gap: 10px; }
#rules-body th, #rules-body tfoot td, #rules-body .cname b, #rules-body .cname small, #rules-body select { text-transform: lowercase; }
#rules-body select { font-family: var(--hand); font-size: var(--fs-small-hand); min-height: 40px; }
#rules-body .stepper button.step, #rules-body .stepper input, #rules-body select, #rules-body label.chk .box { border-width: 1.5px; border-color: rgba(26,23,20,.35); }
#rules-body .stepper button.step:hover:not(:disabled), #rules-body select:hover { border-color: var(--ink); }
#counts-table tr.zero .mini, #counts-table tr.zero .cname > span, #counts-table tr.zero .pct { opacity: .35; }
/* one pill size for deck presets and game speed */
#rules-body .presets { gap: 6px; flex-wrap: wrap; }
#rules-body .presets button, #rules-body .spd button { flex: 0 0 auto; min-width: 0; min-height: 36px; padding: 2px 14px; font-size: calc(var(--fs-small-hand) * 1.12); }
#rules-body .spd button[aria-pressed=true] { padding-left: 13.4px; padding-right: 13.4px; }
#rules-body .spd button::before { inset: -4px -2px; }
/* max moves stepper sits on the same line as its checkbox, so keep it compact */
#rules-body .row .inline { flex-wrap: wrap; column-gap: 16px; }
#rules-body .row .inline .stepper button.step { width: 36px; height: 36px; min-height: 0; }
#rules-body .row .inline .stepper input { width: 44px; height: 36px; }
/* rules spacing ladder: inside a setting (name > control > help) 6px, between settings 22px, between sections 28px + dashed divider + 28px */
#rules-body { --in: 6px; --between: 22px; --section: 28px; }
#rules-body .group { margin: 0 0 var(--section); padding-bottom: var(--section); }
#rules-body .group:last-child { margin-bottom: 0; padding-bottom: 0; }
#rules-body .row { margin: 0 0 var(--between); }
#rules-body .group > .row:last-child, #rules-body .group > .note:last-child { margin-bottom: 0; }
#rules-body h3 { margin: 0 0 14px; }
#rules-body h3 + .note.sub { margin: -10px 0 14px; line-height: 1.35; } /* flavor line hugs its section title */
/* one name style: checkbox labels, field labels and speed labels all match */
#rules-body .row > label:not(.chk), #rules-body .spd-lab, #rules-body label.chk { display: flex; align-items: center; min-height: 32px; margin: 0 0 var(--in); font-size: var(--fs-small-hand); line-height: 1.2; }
#rules-body .row > label:not(.chk), #rules-body .spd-lab { min-height: 0; }
#rules-body .row .inline { gap: 0 16px; }
#rules-body .row .inline label.chk { margin-bottom: var(--in); }
#rules-body .row .inline .stepper { margin-bottom: var(--in); }
#rules-body .note { display: block; margin: var(--in) 0 0; line-height: 1.35; }
#rules-body .note:empty { display: none; }
#rules-body .row > .inline + .note, #rules-body .row > .chk + .note { margin-top: 0; }
#rules-body .row > :is(select, .spd) + .note { margin-top: 10px; } /* boxed controls need a little more air than a checkbox label */
#rules-body .group > .row > :last-child:not(.note) { margin-bottom: 0; }
#rules-body .group.reset button { margin-bottom: 0; }

/* card tooltips: a small hand-drawn note, no shadow */
#card-tip { position: fixed; z-index: 300; left: 0; top: 0; max-width: min(240px, calc(100vw - 12px)); box-sizing: border-box; padding: 6px 10px 7px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--wob); font-family: var(--type); font-size: var(--fs-small); line-height: 1.35; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s; }
#card-tip.on { opacity: 1; visibility: visible; }
#card-tip .tip-name { display: block; font-family: var(--hand); font-size: var(--fs-body-hand); font-weight: bold; line-height: 1.15; }
#card-tip .tip-name.red { color: var(--red); }
#card-tip .tip-left { color: #8a8478; }
[data-tip] { cursor: help; }
[data-tip]:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: var(--wob); }
@media (prefers-reduced-motion: reduce) { #card-tip { transition: none; } }


/* ---------- how-to column on the first screen: quiet, no box. side by side on wide screens, stacked below on narrow ---------- */
#settings-screen { max-width: 1100px; }
.setup-wrap { display: flex; flex-direction: column; align-items: center; }
.setup-wrap .slides { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: none; } /* the start card caps itself at 620; the house-rules panel may use the full width so nothing is clipped */
.howto { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 620px; margin-top: 6px; padding: 14px 4px 4px; border-top: 1.5px dashed rgba(26,23,20,.35); }
.howto h4 { margin: 0; font-family: var(--type); font-weight: 400; font-size: var(--fs-small); opacity: .55; letter-spacing: .04em; }
.hrow { display: flex; flex-direction: column; gap: 2px; }
.hline { display: flex; align-items: center; gap: 10px; }
.hcard { flex: 0 0 auto; width: 52px; line-height: 0; transform: rotate(-3deg); }
.hrow:nth-of-type(even) .hcard { transform: rotate(3deg); }
.hcard .cardsvg { width: 100%; }
.harr { flex: 0 0 auto; width: 26px; height: 16px; opacity: .55; }
.hpicslot { display: block; line-height: 0; }
.hpic { display: block; height: 74px; width: auto; overflow: visible; }
.hcap { font-family: var(--hand); font-size: calc(var(--fs-body) * 1.1); line-height: 1.1; opacity: .8; }
.hcap b { font-weight: 400; color: var(--ink); -webkit-text-stroke: .5px var(--ink); }
@media (min-width: 1040px) {
  .rules.grow-edge::after { content: ''; position: absolute; inset: -2.6px; border: 2.6px solid var(--ink); border-radius: inherit; pointer-events: none; } /* anim=grow: ink edge that follows the widening clip (offsets animated in ui.js) */
  /* grid: card | how-to. the slides box dissolves so the house-rules panel can span both columns (same left edge and top as the card, right edge = how-to's) */
  .setup-wrap { display: grid; grid-template-columns: 620px 338px; justify-content: center; align-items: start; }
  .setup-wrap .slides { display: contents; }
  .slides > .quick { grid-area: 1 / 1; }
  .slides > .rules { grid-area: 1 / 1 / 2 / -1; z-index: 2; }
  .howto { grid-area: 1 / 2; width: 310px; margin: 0 0 0 28px; padding: 0 0 0 26px; border-top: 0; border-left: 1.5px dashed rgba(26,23,20,.35); }
}
/* first screen: tagline hugs the title, more air before the setup box (the scrawl font's tall line box left a big gap above the tagline) */
body:not(.ingame) h1 { line-height: 1.15; white-space: nowrap; }
body:not(.ingame) header { padding-top: 26px; padding-bottom: 20px; }
body:not(.ingame) .sub { margin-top: 12px; }
body:not(.ingame) h1 em { margin-right: -.87em; } /* optical centering: center the words, let the big red ? hang off the end */

/* menu buttons: same hand-drawn gear as the start screen */
.sp-menu svg, .menu-btn svg { display: block; width: 22px; height: 22px; margin: auto; overflow: visible; opacity: .8; transition: transform .2s cubic-bezier(.23,1,.32,1); }
.sp-menu:hover svg, .menu-btn:hover svg { transform: rotate(30deg); }