:root {
  --table: #2a211a;
  --panel: #211a14;
  --ink: #f3e9dc;
  --soft: rgba(243, 233, 220, 0.62);
  --line: rgba(243, 233, 220, 0.14);
  --chip: rgba(243, 233, 220, 0.08);
  --on: #f3e9dc;
  --on-ink: #211a14;
  --accent: #ffc23d;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, serif;
  --sab: var(--random-nav-h, env(safe-area-inset-bottom, 0px));
  --sat: env(safe-area-inset-top, 0px);
  /* a phone on its side: the camera and its island sit at one end */
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--panel); color: var(--ink); overflow: hidden; }
body { font: 15px/1.35 var(--serif); -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.sprite { position: absolute; width: 0; height: 0; }
svg { width: 22px; height: 22px; flex: none; }
button {
  font: inherit; color: inherit; border: 0; background: var(--chip); cursor: pointer;
  min-width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background 0.15s, color 0.15s, opacity 0.15s;
}
button:disabled { opacity: 0.4; cursor: default; box-shadow: inset 0 0 0 1px var(--line); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.icon { width: 44px; padding: 0; }

/* ---------------------------------------------------------------- game */

#game {
  position: fixed; inset: 0 0 var(--sab) 0;
  display: grid; grid-template-rows: auto 1fr auto; grid-template-areas: "top" "board" "bottom";
  background: radial-gradient(120% 80% at 50% 50%, #3a2e24 0%, var(--table) 60%, #1c1611 100%);
}
/* (stretched to its grid area, not height: 100%: Safari resolves a
   canvas's percentage height against the whole grid, and the board then
   runs down over the panel below it) */
#board { grid-area: board; align-self: stretch; justify-self: stretch; width: auto; height: auto; min-height: 0; min-width: 0; display: block; touch-action: none; contain: size; }
#side1 { grid-area: top; transform: rotate(180deg); }
#side0 { grid-area: bottom; }
/* Solo: the bot's panel reads your way, shows no tray (it moves on the
   board) and no result (yours says it); with the bot on Light the ends swap */
#game.solo #side1 { transform: none; }
#game.solo.flip #side0 { grid-area: top; }
#game.solo.flip #side1 { grid-area: bottom; }
#game.solo .side.bot .tray, #game.solo .side.bot.over .result { display: none; }

.side {
  background: var(--panel); padding: 10px 14px 12px; display: grid; gap: 10px; touch-action: manipulation;
  transition: box-shadow .2s;
  container-type: inline-size;
}
#side1 { padding-bottom: calc(12px + var(--sat)); }
/* (Solo: whichever panel is at the top keeps clear of the notch, unturned) */
@media not all and (min-aspect-ratio: 4/3) {
  #game.solo:not(.flip) #side1, #game.solo.flip #side0 { padding-top: calc(10px + var(--sat)); padding-bottom: 12px; }
}
#game.solo.flip #side1 { padding-top: 10px; padding-bottom: 12px; }
/* whose turn, readable across the table: a line on the board side of their panel */
.side.active { box-shadow: inset 0 3px 0 var(--accent); }
.who { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 4px 10px; min-height: 44px; }
.chip { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), 0 0 0 1.5px rgba(243,233,220,.4); }
.name { font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.turn { grid-column: 2; grid-row: 2; font: 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); visibility: hidden; }
.side.active .turn { visibility: visible; }
.reserve { grid-row: 1 / 3; grid-column: 3; display: flex; align-items: center; gap: 4px; font: 600 16px/1 var(--mono); color: var(--soft); }
.reserve svg { width: 18px; height: 18px; }
.reserve b { min-width: 2ch; font-weight: 600; }
.reserve .capi { margin-left: 6px; }
.menu { grid-row: 1 / 3; grid-column: 4; background: transparent; }

.tray { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; min-height: 48px; }
.side:not(.active) .kinds, .side:not(.active) .lift { visibility: hidden; }
.undo[hidden] { display: inline-flex; visibility: hidden; }
.kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kinds[hidden], .kinds button[hidden] { display: none; }
.kinds button { height: 48px; font: 600 13px/1 var(--mono); letter-spacing: .04em; }
.kinds button[aria-checked="true"] { background: var(--on); color: var(--on-ink); }
.lift { display: grid; grid-template-columns: auto auto 3ch auto auto; gap: 8px; align-items: center; justify-content: start; }
.lift[hidden] { display: none; }
.lift button[hidden] { display: inline-flex; visibility: hidden; }
.lift .lbl { font: 600 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.lift .carry { font: 700 22px/1 var(--mono); text-align: center; }
.lift .drop { margin-left: 8px; }
.side.over .say { display: none; }
.say { min-height: 1.35em; font-size: 14px; color: var(--soft); text-align: center; }
/* a move refused: marked, warmer, and a small shake (not with reduced motion) */
.say.nope { color: #ffb08a; animation: nope .28s ease; }
.say .nopei { width: 1em; height: 1em; vertical-align: -.15em; margin-right: .3em; }
@keyframes nope { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .say.nope { animation: none; } }



/* ---------------------------------------------------------------- shared controls */

.go { background: var(--accent); color: #2a1d08; font: 700 17px/1 var(--serif); padding: 0 20px; height: 52px; border-radius: 14px; }
.go.danger { background: #e2735a; color: #2a0f08; }
.ghost { background: var(--chip); padding: 0 14px; box-shadow: inset 0 0 0 1px var(--line); }
.ghost.small { height: 44px; min-width: 0; font-size: 14px; padding: 0 10px; }
.ghost.small svg { width: 18px; height: 18px; }
.ghost.danger { color: #f0a08c; }
.link { background: none; height: auto; min-height: 44px; padding: 0 4px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.link.small { min-height: 44px; font-size: 14px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: rgba(0,0,0,.25); border-radius: 12px; padding: 4px; }
.seg button { height: 44px; min-width: 0; padding: 0 4px; font: 600 14px/1 var(--mono); background: transparent; }
.seg button[aria-checked="true"] { background: var(--on); color: var(--on-ink); }
/* Solo's bots: a card each, its name, how strong (dots), a line, your record */
.levels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.level { display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 4px 8px; height: auto; min-height: 76px; padding: 10px 12px; text-align: left; background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; }
.level[aria-checked="true"] { background: var(--on); color: var(--on-ink); box-shadow: none; }
.lv-name { font-weight: 700; font-size: 16px; }
.lv-dots { display: flex; gap: 3px; align-self: center; }
.lv-dots span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .25; }
.lv-dots span.on { opacity: .9; }
.lv-blurb { grid-column: 1 / -1; font-size: 13px; line-height: 1.3; opacity: .8; }
.lv-rec { grid-column: 1 / -1; font: 500 12px/1.2 var(--mono); opacity: .75; }
.stepper { display: inline-grid; grid-template-columns: 44px 6ch 44px; align-items: center; }
.stepper output { font: 700 18px/1 var(--mono); text-align: center; }
.toggle { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; min-height: 48px; }
.switch { width: 52px; min-width: 52px; height: 32px; border-radius: 16px; padding: 3px; justify-content: flex-start; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px var(--line); }
.switch span { width: 26px; height: 26px; border-radius: 50%; background: var(--soft); transition: transform .15s; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"] span { transform: translateX(20px); background: #2a1d08; }
.stone { width: 18px; height: 18px; border-radius: 5px; flex: none; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), 0 0 0 1.5px rgba(243,233,220,.4); }
input[type="text"] { font: inherit; font-size: 16px; color: var(--ink); background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 12px; height: 44px; padding: 0 12px; min-width: 0; -webkit-user-select: text; user-select: text; }
input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.note { font-size: 13px; color: var(--soft); }

/* ---------------------------------------------------------------- setup */

#setup { position: fixed; inset: 0 0 var(--sab) 0; overflow-y: auto; background: var(--panel); z-index: 5; -webkit-overflow-scrolling: touch; }
#setup[hidden] { display: none; }
.setup-in { max-width: 480px; margin: 0 auto; padding: calc(20px + var(--sat)) 16px 28px; display: grid; gap: 14px; }
.brand h1 { font: 700 44px/1 var(--serif); letter-spacing: .01em; }
.brand p { color: var(--soft); margin-top: 6px; }
.seat { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: grid; gap: 10px; }
.seat-head { display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
.seat-label { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.seat-name { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600; min-height: 32px; }
.seat-name .stone { width: 24px; height: 24px; border-radius: 6px; }
.seat-name .empty { color: var(--soft); font-weight: 400; font-size: 17px; font-style: italic; }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip { height: 44px; padding: 0 12px 0 8px; font-size: 15px; box-shadow: inset 0 0 0 1px var(--line); }
.pchip .dot { width: 14px; height: 14px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(243,233,220,.35); }
.pchip[aria-pressed="true"] { background: var(--on); color: var(--on-ink); }
.addrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.swapseats { justify-self: center; height: 40px; font-size: 14px; }
.field { display: grid; gap: 8px; }
.flabel { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.rules { border: 1px solid var(--line); border-radius: 16px; padding: 0 12px; }
.rules summary { min-height: 48px; display: flex; align-items: center; font: 600 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); cursor: pointer; }
.rules[open] { padding-bottom: 12px; display: grid; }
.rules[open] > .field, .rules[open] > .toggle { margin-top: 10px; }
.rules .field { grid-template-columns: 1fr auto; align-items: center; }
.rules .field .note { grid-column: 1 / -1; margin-top: -4px; }
.warn { background: rgba(255,194,61,.12); border: 1px solid rgba(255,194,61,.4); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.record { text-align: center; font: 16px/1.4 var(--mono); color: var(--soft); }
.record b { color: var(--ink); font-family: var(--serif); }
.start { width: 100%; }
.links { display: flex; justify-content: center; gap: 18px; }

/* ---------------------------------------------------------------- sheets */

.scrim { position: fixed; inset: 0 0 var(--sab) 0; z-index: 20; background: rgba(10,7,5,.55); display: grid; align-items: end; justify-items: center; opacity: 0; transition: opacity .15s; }
.scrim.in { opacity: 1; }
.scrim.far { transform: rotate(180deg); }
.sheet { width: min(100%, 520px); max-height: 88%; overflow: auto; background: #2b221b; border-radius: 20px 20px 0 0; padding: 6px 16px 20px; box-shadow: 0 -10px 40px rgba(0,0,0,.4); }
.scrim.far .sheet { padding-bottom: calc(20px + var(--sat)); }
.sheet.wide { height: 88%; }
.sheet header { display: flex; align-items: center; justify-content: space-between; min-height: 52px; position: sticky; top: -6px; background: #2b221b; z-index: 1; }
.sheet h2 { font: 700 20px/1.2 var(--serif); }
.sheet .body { display: grid; gap: 12px; }
.lede { font-size: 17px; }
.actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.actions button { flex: 1 1 auto; }
.menu-list { display: grid; gap: 6px; }
.menu-list > button { justify-content: flex-start; height: 50px; padding: 0 14px; font-size: 16px; }
.menu-list > button svg { width: 20px; height: 20px; opacity: .8; }
.menu-list hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.ptn { font: 13px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,.3); border-radius: 10px; padding: 10px 12px; -webkit-user-select: text; user-select: text; max-height: 50vh; overflow: auto; }

/* records */
.list { list-style: none; padding: 0; display: grid; gap: 8px; }
.empty { color: var(--soft); text-align: center; padding: 24px 0; }
.pair { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 6px; }
.pair .score { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: baseline; gap: 8px; }
.pair .score .n:first-child { text-align: right; }
.pair .big { font: 700 28px/1 var(--mono); }
.pair .dash { color: var(--soft); }
.pair .meta { text-align: center; font: 13px/1.4 var(--mono); color: var(--soft); }
.pair .link { justify-self: center; }
.game .row { width: 100%; height: auto; min-height: 56px; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "date who size" "res res res"; gap: 2px 10px; text-align: left; padding: 8px 12px; }
.game .date { grid-area: date; font: 13px/1.4 var(--mono); color: var(--soft); }
.game .who { grid-area: who; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game .size { grid-area: size; font: 13px/1.4 var(--mono); color: var(--soft); }
.game .res { grid-area: res; font-size: 14px; color: var(--soft); }
.game .ptn, .game > button.ghost { margin-top: 6px; }
.prow { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; }
.data { display: grid; gap: 12px; }

/* the result, in each player's panel */
.result { display: none; gap: 10px; }
.side.over .result { display: grid; }
.side.over .tray { display: none; }
.result .headline { font: 700 20px/1.25 var(--serif); text-align: center; }
.result .sub { text-align: center; font: 13px/1.4 var(--mono); color: var(--soft); }
.result .actions button { height: 46px; }

/* the stack inspector */
.inspect { display: grid; gap: 4px; }
.inspect .pc { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-height: 34px; padding: 0 6px; border-radius: 8px; }
.inspect .pc:first-child { background: rgba(255,255,255,.06); }
.inspect .pc svg { width: 20px; height: 20px; }
.inspect .kind { font: 12px/1 var(--mono); color: var(--soft); text-transform: uppercase; letter-spacing: .06em; }

/* ---------------------------------------------------------------- looks editor */

.preview3d { width: 100%; height: 190px; display: block; border-radius: 14px; background: radial-gradient(90% 90% at 50% 45%, #3a2e24, #1c1611); touch-action: none; }
.editor { display: grid; gap: 14px; }
.matgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mat { height: 44px; justify-content: flex-start; padding: 0 10px; font-size: 15px; box-shadow: inset 0 0 0 1px var(--line); }
.mat[aria-pressed="true"], .boardsw[aria-pressed="true"] { background: var(--on); color: var(--on-ink); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatch { width: 44px; min-width: 44px; border-radius: 12px; background: var(--sw); box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 0 0 0 1px rgba(243,233,220,.3); }
.swatch[aria-pressed="true"] { box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 0 0 0 3px var(--accent); }
.customwrap { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 10px 0 4px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); font: 600 13px/1 var(--mono); color: var(--soft); cursor: pointer; }
.custom { width: 36px; height: 36px; border: 0; padding: 0; background: none; border-radius: 8px; cursor: pointer; }
/* board options laid out like the stone options above them */
.boardsw { height: 44px; justify-content: flex-start; gap: 8px; padding: 0 10px; font-size: 15px; box-shadow: inset 0 0 0 1px var(--line); }
.boardsw span { width: 22px; height: 22px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }

/* ---------------------------------------------------------------- lessons */

#coach { grid-area: top; background: var(--panel); padding: calc(12px + var(--sat)) 16px 14px; display: grid; gap: 10px; }
#coach[hidden], .side[hidden] { display: none; }
.coach-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.coach-top > button { flex: none; min-height: 44px; padding: 0 16px; }
.step { font: 600 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.goal { font-size: 18px; line-height: 1.4; min-height: 4.2em; }
.wrong { font-size: 14px; color: #f0a08c; }
#coach .actions button { flex: 0 1 auto; min-width: 88px; }
#coach .actions .go { margin-left: auto; height: 46px; }
.offer { background: rgba(255,194,61,.1); border: 1px solid rgba(255,194,61,.35); border-radius: 16px; padding: 12px; display: grid; gap: 10px; }
.offer p { font-size: 16px; }

/* ---------------------------------------------------------------- review pass 2 */

.seat-name .none { color: var(--soft); font-weight: 400; font-size: 17px; font-style: italic; }
.pchip[aria-pressed="true"] .dot { box-shadow: 0 0 0 1.5px var(--on-ink); }
.rules summary { justify-content: space-between; list-style: none; }
.rules summary::-webkit-details-marker { display: none; }
.rules .chev { width: 18px; height: 18px; transition: transform .15s; }
.rules[open] .chev { transform: rotate(45deg); }
.rules[open] > .field:first-of-type { margin-top: 0; }
.sheet .actions button { height: 52px; font: 600 15px/1 var(--mono); }
.sheet.wide { height: auto; min-height: 50%; }
.menu-list { gap: 2px; }
.menu-list > button { height: 44px; }
.menu-list .toggle { padding: 0 4px 0 14px; min-height: 44px; }
.menu-list .danger, .link.quiet { color: #f0a08c; }
.link.quiet { color: var(--soft); }
.result .headline.won { color: var(--accent); font-size: 24px; }
.result .actions .go { height: 46px; }


.setgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.set { height: 52px; flex-direction: column; gap: 2px; padding: 0 6px; box-shadow: inset 0 0 0 1px var(--line); }
.set b { font-size: 15px; font-weight: 600; }
.set .by { font: 11px/1 var(--mono); color: var(--soft); letter-spacing: .03em; }
.set[aria-pressed="true"] { background: var(--on); color: var(--on-ink); }
.set[aria-pressed="true"] .by { color: rgba(33,26,20,.7); }

/* A board square in text (b2, e5): a small tile in the board's wood. */
.sq { display: inline-block; font: 600 .86em/1.25 var(--mono); letter-spacing: .02em; padding: 0 .34em; margin: 0 .05em; border-radius: 5px; color: #f6d8a8; background: rgba(214,170,110,.2); box-shadow: inset 0 0 0 1px rgba(214,170,110,.5); white-space: nowrap; vertical-align: .04em; }
.kits { display: inline-flex; gap: 3px; }

/* On a wide screen the panels keep a phone's measure, centred. */
.side > *, #coach > * { width: 100%; max-width: 520px; justify-self: center; }

/* The mini stack: a front view of the stack in hand (or tapped), in the
   moving player's right-hand corner, turned to face them. */
#mini { grid-area: board; align-self: end; justify-self: end; margin: 6px; width: 70px; display: grid; gap: 2px; justify-items: center; pointer-events: none; background: rgba(33,26,20,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border-radius: 10px; padding: 3px 3px 5px; z-index: 2; }
#mini[hidden] { display: none; }
/* back to the resting view: only there once the view has moved */
#reset-view { grid-area: board; align-self: end; justify-self: start; margin: 8px; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 20px; z-index: 2; background: rgba(33,26,20,.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: inset 0 0 0 1px var(--line); }
#reset-view[hidden] { display: none; }
#reset-view svg { width: 22px; height: 22px; }
/* (side by side, the bottom-left corner is the stack view's) */
@media (min-aspect-ratio: 4/3) { #reset-view { align-self: start; justify-self: end; } }
#mini.far { align-self: start; justify-self: start; transform: rotate(180deg); }
#mini canvas { width: 64px; height: 116px; display: block; }
#mini figcaption { font: 11px/1.3 var(--mono); color: var(--soft); text-align: center; display: grid; }
#mini .lifting { color: var(--accent); }

a.link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); text-underline-offset: 3px; font-size: 15px; }


/* a switch keeps its size wherever its row stretches */
.switch { height: 32px; min-height: 32px; max-height: 32px; align-self: center; flex: none; }

/* ---------------------------------------------------------------- landscape: side by side
   Portrait is a diner booth: the two players face each other across the
   phone. Landscape is an airplane row: they sit side by side and both look
   from the bottom edge, so nothing turns. Light's panel is on the left,
   Dark's on the right. */
@media (min-aspect-ratio: 4/3) {
  #game { grid-template-rows: 1fr; grid-template-columns: minmax(160px, 210px) 1fr minmax(160px, 210px); grid-template-areas: "bottom board top"; }
  #side1, #side0 { transform: none; padding: calc(10px + var(--sat)) 10px 10px; align-content: start; overflow-y: auto; }
  /* (rows keep their content's height: a tall result scrolls the panel
     rather than squeezing the name rows under it) */
  .side { grid-auto-rows: max-content; }
  .side.active { box-shadow: inset 0 3px 0 var(--accent); }
  .who { grid-template-columns: auto 1fr auto; }
  .reserve { grid-row: 3; grid-column: 1 / -1; }
  .menu { grid-row: 1; grid-column: 3; }
  .tray { grid-template-columns: 1fr; }
  .kinds button { height: 46px; padding: 0; }
  .kinds button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lift { grid-template-columns: auto auto 3ch auto; }
  .lift .drop { grid-column: 1 / -1; margin: 0; justify-self: start; }
  .undo { justify-self: start; }
  .say { font-size: 13px; text-align: left; }
  .result .actions { flex-direction: column; }
  /* the mini stack sits at the mover's side of the board, upright */
  #mini { align-self: end; justify-self: start; }
  #mini.far { align-self: end; justify-self: end; transform: none; }
  /* a lesson's coach takes Dark's column */
  #coach { width: auto; padding: calc(12px + var(--sat)) 12px 12px; gap: 8px; align-content: start; overflow-y: auto; }
  #coach .goal { font-size: 15px; min-height: 0; }
  #coach .actions { flex-wrap: wrap; }
  #coach .actions button { min-width: 0; flex: 1 1 auto; height: 44px; }
  .setup-in { max-width: 880px; grid-template-columns: 1fr 1fr; align-items: start; }
  .setup-in > .swapseats { order: 1; }
  .setup-in > .field, .setup-in > .rules, .setup-in > .record, .setup-in > .start, .setup-in > .links { order: 2; }
  .setup-in > .brand, .setup-in > .offer, .setup-in > .swapseats, .setup-in > .warn, .setup-in > .field, .setup-in > .rules, .setup-in > .record, .setup-in > .start, .setup-in > .links { grid-column: 1 / -1; }
  /* side by side, every sheet faces the same way: nothing turns */
  .scrim.far { transform: none; }
}
/* With the navbar tucked, its handle sits at the bottom centre: the board
   stops short of that strip, so a tap on the board never brings the bar back. */
@media (min-aspect-ratio: 4/3) {
  .tak-tucked #board { margin-bottom: 30px; }
}

/* ---------------------------------------------------------------- tablets (and desktops)
   The same seating as a phone, with the room spent on a bigger board, a
   move log in each panel, the stack view docked in the mover's panel, and
   larger type and targets for reading across a table. */
.log, .dock { display: none; }
@media (min-width: 700px) and (min-height: 600px) {
  body { font-size: 17px; }
  button { min-width: 52px; height: 52px; border-radius: 14px; }
  button.icon { width: 52px; }
  svg { width: 26px; height: 26px; }
  .name { font-size: 22px; }
  .turn { font-size: 13px; }
  .reserve { font-size: 19px; }
  .reserve svg { width: 21px; height: 21px; }
  .kinds button { height: 58px; font-size: 15px; }
  .lift .carry { font-size: 26px; }
  .say { font-size: 16px; }
  .chip { width: 26px; height: 26px; }

  .log { display: block; list-style: none; margin: 0; padding: 8px 10px; overflow-y: auto; font: 15px/1.6 var(--mono); color: var(--soft); background: rgba(0,0,0,.18); border-radius: 12px; min-height: 0; }
  .log[hidden] { display: none; }
  .log li { display: grid; grid-template-columns: 3.2ch 1fr 1fr; gap: 6px; }
  .log .n { color: rgba(243,233,220,.4); }
  .log .last { color: var(--accent); }
  .log .none { display: block; font-family: var(--serif); font-style: italic; }
  .dock { display: grid; place-items: center; min-height: 0; }
  #mini.docked { position: static; margin: 0; transform: none; width: 120px; padding: 6px 6px 8px; background: rgba(0,0,0,.18); border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  #mini.docked canvas { width: 108px; height: 190px; }
  #mini.docked figcaption { font-size: 13px; }
  #mini.docked.empty canvas { display: none; }
  #mini.docked.empty { height: 100%; min-height: 120px; align-content: center; }
  #mini.docked.empty figcaption { font-family: var(--serif); font-style: italic; }
  .side.over .log, .side.over .dock { display: none; }
}
/* Upright (the booth): each panel is a wide band; the controls on the
   left, the log and the stack view beside them. */
@media (min-width: 700px) and (min-height: 600px) and (max-aspect-ratio: 1023/768) {
  .side { grid-template-columns: minmax(280px, 1fr) minmax(190px, 250px) auto; grid-template-areas: "who log dock" "tray log dock" "result log dock" "say log dock"; column-gap: 16px; max-height: 34vh; }
  .side > * { max-width: none; justify-self: stretch; }
  /* over: no log or stack view, so one column, the result in the middle */
  .side.over { grid-template-columns: 1fr; grid-template-areas: "who" "result" "say"; }
  .side.over > .result { justify-self: center; width: min(560px, 100%); }
  .who { grid-area: who; } .tray { grid-area: tray; } .result { grid-area: result; } .say { grid-area: say; text-align: left; }
  .log { grid-area: log; max-height: 30vh; }
  .dock { grid-area: dock; }
}
/* On its side (the airplane row): tall columns; the controls, then the
   stack view, then the log filling the rest. */
@media (min-width: 700px) and (min-height: 600px) and (min-aspect-ratio: 4/3) {
  #game { grid-template-columns: minmax(220px, 260px) 1fr minmax(220px, 260px); }
  .side { grid-template-rows: auto auto auto auto auto 1fr; height: 100%; }
  .side > * { max-width: none; }
  .dock { justify-items: start; }
  .log { align-self: stretch; }
}
@media (min-width: 700px) and (min-height: 600px) {
  .setup-in { max-width: 600px; gap: 16px; }
  .brand h1 { font-size: 56px; }
  .brand p, .offer p { font-size: 19px; }
  .seat-name { font-size: 26px; }
  .seat-label, .flabel, .rules summary { font-size: 14px; }
  .pchip { height: 44px; font-size: 17px; }
  input[type="text"] { height: 52px; font-size: 18px; }
  .seg button { height: 48px; font-size: 16px; }
  .go { height: 58px; font-size: 18px; }
  .note { font-size: 15px; }
}

/* ---------------------------------------------------------------- home, quick play, settings */
.backhome { justify-self: start; }
.continue { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "k v" "k s"; gap: 2px 14px; align-items: center; text-align: left; height: auto; min-height: 64px; padding: 10px 16px; border-radius: 16px; background: rgba(255,194,61,.12); box-shadow: inset 0 0 0 1px rgba(255,194,61,.45); }
.continue .k { grid-area: k; font: 700 15px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.continue .v { grid-area: v; font-size: 18px; font-weight: 600; }
.continue .s { grid-area: s; font: 13px/1.3 var(--mono); color: var(--soft); }
.pchips.big .pchip { height: 48px; font-size: 18px; padding: 0 16px 0 10px; }
.set-group { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.set-group h2 { font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin: 0; }
.set-group .field.row { grid-template-columns: 1fr auto; align-items: center; }
.set-group .actions { justify-content: flex-start; }
/* each kind of sound, under the switch for all of them */
.set-sub { display: grid; gap: 10px; padding-left: 14px; border-left: 2px solid var(--line); }
.switch:disabled { opacity: .4; }
/* a kind of sound's volume: name, slider, how loud */
.mix { display: grid; grid-template-columns: 6.5em 1fr 3em; align-items: center; gap: 12px; min-height: 48px; }
.vol-val { font: 500 13px/1 var(--mono); color: var(--soft); text-align: right; }
.vol { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: none; margin: 0; touch-action: pan-y; }
.vol::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--p, 70%), rgba(0,0,0,.35) var(--p, 70%)); box-shadow: inset 0 0 0 1px var(--line); }
.vol::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px var(--line); }
.vol::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
.vol::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--accent); border: 3px solid #2a1d08; }
.vol::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid #2a1d08; }
.vol:disabled { opacity: .4; }
.set-group .actions button { flex: 0 1 auto; }

/* the replay bar, over the top of the board */
/* A replay has no players at the table: the panels give way to the bar. */
#game.replaying #side0, #game.replaying #side1 { display: none; }
#replay { grid-area: top; display: grid; gap: 6px; padding: calc(10px + var(--sat)) 14px 12px; background: var(--panel); align-content: start; }
#replay > * { width: 100%; max-width: 560px; justify-self: center; }
#replay[hidden] { display: none; }
.rp-top { display: flex; justify-content: space-between; align-items: center; }
.rp-ctl { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 6px; }
.rp-n { text-align: center; font: 700 17px/1 var(--mono); }
.rp-n span { color: var(--accent); font-weight: 600; }
.rp-res { font-size: 15px; text-align: center; color: var(--ink); margin: 0; }

/* ---------------------------------------------------------------- home
   A faint board grid behind it all; a drawn corner of a board up top; Quick
   Play as the one big tile, the rest as smaller ones. */
#setup.is-home {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 194, 61, .08), transparent 60%),
    linear-gradient(rgba(243, 233, 220, .035) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(90deg, rgba(243, 233, 220, .035) 1px, transparent 1px) 0 0 / 52px 52px,
    var(--panel);
}
.home { display: grid; gap: 18px; }
.hero { display: grid; justify-items: center; text-align: center; gap: 4px; }
.hero img { width: min(240px, 66vw); height: auto; margin: 4px 0 2px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.hero h1 { font: 700 46px/1.05 var(--serif); letter-spacing: .01em; margin: 0; }
.hero p { color: var(--soft); max-width: 30em; margin: 6px 0 0; font-size: 16px; }
.home-main { display: grid; gap: 12px; }
.homemenu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "i t" "i s"; align-items: center; column-gap: 12px; row-gap: 2px; text-align: left; height: auto; min-height: 76px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; }
.tile svg { grid-area: i; width: 26px; height: 26px; color: var(--accent); }
.tile .t { grid-area: t; font: 600 18px/1.15 var(--serif); }
.tile .s { grid-area: s; font: 12.5px/1.3 var(--mono); color: var(--soft); }
.tile:active { transform: translateY(1px); }
.tile.quick { grid-column: 1 / -1; min-height: 96px; background: var(--accent); box-shadow: 0 8px 22px rgba(255,194,61,.18); color: #2a1d08; }
.tile.quick svg { width: 34px; height: 34px; color: #2a1d08; }
.tile.quick .t { font-size: 24px; font-weight: 700; }
.tile.quick .s { color: rgba(42,29,8,.75); font-size: 13.5px; }
.tile.settings { grid-column: 1 / -1; }
/* settings and credits sit side by side under Custom Game */
.home .links { justify-content: center; }

/* an iPad held upright: a bigger hero, the three smaller tiles in a row */
@media (min-width: 700px) and (min-height: 600px) and (max-aspect-ratio: 1023/768) {
  #setup.is-home .setup-in { max-width: 680px; padding-top: calc(40px + var(--sat)); }
  .hero img { width: 360px; }
  .hero h1 { font-size: 64px; }
  .hero p { font-size: 19px; }
  .homemenu { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .tile.settings { grid-column: auto; }
  .tile { grid-template-columns: 1fr; grid-template-areas: "i" "t" "s"; row-gap: 6px; min-height: 140px; align-content: center; padding: 18px; }
  .tile.quick { grid-template-columns: auto 1fr; grid-template-areas: "i t" "i s"; min-height: 120px; padding: 20px 24px; }
  .tile.quick svg { width: 44px; height: 44px; }
  .tile.quick .t { font-size: 30px; }
  .tile .t { font-size: 21px; }
  .tile .s { font-size: 14px; }
}
/* side by side (an iPad on its side, a desktop): the hero on the left,
   the menu on the right */
@media (min-width: 700px) and (min-height: 600px) and (min-aspect-ratio: 4/3) {
  #setup.is-home .setup-in { max-width: 1040px; min-height: 100%; align-content: center; }
  .home { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
  .hero { justify-items: start; text-align: left; }
  .hero img { width: 380px; }
  .hero h1 { font-size: 64px; }
  .hero p { font-size: 19px; }
  .tile { min-height: 92px; }
  .tile.quick { min-height: 116px; }
  .tile.quick .t { font-size: 28px; }
  .tile .t { font-size: 20px; }
}
/* a phone on its side: the hero shrinks beside the menu */
@media (max-height: 599px) and (min-aspect-ratio: 4/3) {
  #setup.is-home .setup-in { max-width: 860px; }
  .home { grid-template-columns: 1fr 1.2fr; align-items: start; gap: 24px; }
  .hero { justify-items: start; text-align: left; }
  .hero img { width: 200px; }
  .hero h1 { font-size: 38px; }
  .home-main { gap: 8px; }
  .homemenu { gap: 8px; }
  .continue { min-height: 52px; padding: 6px 14px; }
  .tile { min-height: 58px; padding: 8px 12px; }
  .tile.quick { min-height: 68px; }
  .tile.quick .t { font-size: 21px; }
  .tile .t { font-size: 16px; }
  .tile .s { font-size: 11.5px; }
}
/* home is one block: the setup screen's two columns don't apply */
#setup.is-home .setup-in { grid-template-columns: minmax(0, 1fr); }
/* the replay bar in a side column (landscape): controls on two rows */
@media (min-aspect-ratio: 4/3) {
  #replay { grid-area: bottom; padding: calc(10px + var(--sat)) 10px 10px; }
  #game.replaying { grid-template-columns: minmax(200px, 260px) 1fr 0; }
  .rp-ctl { grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .rp-ctl .rp-n { grid-column: 1 / -1; grid-row: 1; padding: 4px 0; }
  .rp-top { flex-wrap: wrap; gap: 6px; }
}
.savewarn { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); top: calc(8px + var(--sat)); width: min(92vw, 460px); margin: 0; padding: 8px 12px; border-radius: 12px; background: #3a2416; border: 1px solid #e2735a; color: #f6d0c4; font-size: 14px; text-align: center; pointer-events: none; }
.nogl { grid-area: board; align-self: center; justify-self: center; max-width: 30em; padding: 16px; text-align: center; color: var(--soft); }
.result .sub { display: grid; gap: 2px; }
.result .sub .next { color: var(--accent); }
/* read out, not shown */
.live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#board:focus { outline: none; }
#board:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.reserve .flatn { margin-left: 8px; font: 600 13px/1 var(--mono); letter-spacing: .02em; color: var(--soft); }
.who-first { display: grid; gap: 2px; }

/* ---------------------------------------------------------------- review polish */
/* touch targets: nothing under 44px */
.ghost.small { height: 44px; }
.link.small { min-height: 44px; }
/* a disabled primary button reads as waiting, not broken */
.go:disabled { background: transparent; color: var(--soft); box-shadow: inset 0 0 0 1px var(--line); opacity: 1; }
/* home tiles: title and line held together, icons level */
.tile { align-content: center; }
@media (min-width: 700px) and (min-height: 600px) and (max-aspect-ratio: 1023/768) {
  .tile:not(.quick) { align-content: start; }
  #setup.is-home .setup-in { min-height: 100%; align-content: center; }
}
/* the move log's numbers, readable */
.log .n { color: rgba(243, 233, 220, .55); }
/* the docked stack view sits in the middle of its space */
.dock { align-items: center; }
#mini.docked { align-content: center; }
/* the archive's written-out moves, tucked away */
.ptnbox summary { min-height: 44px; display: flex; align-items: center; color: var(--soft); cursor: pointer; font-size: 14px; }
@media (min-aspect-ratio: 4/3) { .turn { grid-column: 1 / -1; } }
.rsgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rs { height: auto; min-height: 48px; padding: 8px 10px; font-size: 15px; line-height: 1.2; box-shadow: inset 0 0 0 1px var(--line); }
.rs[aria-checked="true"] { background: var(--on); color: var(--on-ink); }
.rules .field.rulesets { grid-template-columns: 1fr; }

/* ---------------------------------------------------------------- four players (experimental)
   A tablet flat in the middle: a panel on each edge, turned to face its
   player (seat 1 at the bottom, then round: right, top, left). A phone,
   passed round: one upright panel for whoever's turn it is, and a strip
   of everyone at the top. */
#game.four > #side0, #game.four > #side1, #game.four > #coach, #game.four > #replay { display: none; }
#four { display: contents; }
.strip4 { display: none; }
#game.four:not(.four-tablet) { grid-template-rows: auto 1fr auto; grid-template-columns: 1fr; grid-template-areas: "top" "board" "bottom"; }
#game.four:not(.four-tablet) .strip4 { grid-area: top; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; padding: calc(10px + var(--sat)) 12px 8px; background: var(--panel); font-size: 15px; }
.strip4 .who4 { display: inline-flex; align-items: center; gap: 6px; color: var(--soft); padding: 2px 8px; border-radius: 999px; }
.strip4 .who4.now { color: var(--on-ink); background: var(--accent); }
#game.four:not(.four-tablet) .p4 { grid-area: bottom; transform: none; writing-mode: horizontal-tb; }
#game.four:not(.four-tablet) .p4[hidden] { display: none; }
/* Round a tablet every panel is the same slim row, as long as its edge:
   who, pieces left, the move tray. The side ones are turned whole (icons
   too) to face their player, so the board keeps the middle. */
#game.four.four-tablet { --t4: 92px; container-type: size; grid-template-rows: var(--t4) 1fr var(--t4); grid-template-columns: var(--t4) 1fr var(--t4); grid-template-areas: ". . ." ". board ." ". . ."; }
#game.four.four-tablet #board { grid-area: board; }
#game.four.four-tablet .p4 {
  position: absolute; box-sizing: border-box; height: var(--t4); max-height: none; overflow: hidden;
  padding: 6px 14px; gap: 0 14px; align-content: center;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "who tray" "say say";
}
#game.four.four-tablet .p4 > * { max-width: none; }
#game.four.four-tablet .seat0 { left: 0; right: 0; bottom: 0; }
#game.four.four-tablet .seat2 { left: 0; right: 0; top: 0; transform: rotate(180deg); }
#game.four.four-tablet .seat1, #game.four.four-tablet .seat3 { top: 50%; width: calc(100cqh - 2 * var(--t4)); }
#game.four.four-tablet .seat3 { left: 0; transform-origin: 0 0; transform: rotate(90deg) translate(-50%, -100%); }
#game.four.four-tablet .seat1 { right: 0; transform-origin: 100% 0; transform: rotate(-90deg) translate(50%, -100%); }
#game.four.four-tablet .p4 .who { grid-area: who; grid-template-columns: auto minmax(0, max-content) auto auto; justify-content: start; column-gap: 14px; min-height: 0; }
#game.four.four-tablet .p4 .turn { grid-column: 2; grid-row: 2; }
#game.four.four-tablet .p4 .reserve { grid-column: 3; grid-row: 1 / 3; }
#game.four.four-tablet .p4 .menu { grid-column: 4; grid-row: 1 / 3; }
#game.four.four-tablet .p4 .tray { grid-area: tray; grid-template-columns: auto auto; min-height: 0; }
#game.four.four-tablet .p4 .kinds { grid-template-columns: repeat(3, 56px); }
#game.four.four-tablet .p4 .kinds button { height: 46px; padding: 0; }
#game.four.four-tablet .p4 .kinds button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#game.four.four-tablet .p4 .lift { grid-template-columns: auto auto 3ch auto auto; }
#game.four.four-tablet .p4 .lift .drop { grid-column: auto; margin-left: 8px; }
#game.four.four-tablet .p4 .say { grid-area: say; min-height: 0; font-size: 13px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#game.four.four-tablet .p4 .say:empty { display: none; }
#game.four.four-tablet .p4 .result { grid-area: tray; grid-template-columns: auto auto; align-items: center; gap: 4px 14px; }
#game.four.four-tablet .p4 .result .headline { grid-column: 1; font-size: 18px; text-align: left; }
#game.four.four-tablet .p4 .result .sub { grid-column: 1; text-align: left; }
#game.four.four-tablet .p4 .result .sub span:not(:first-child) { display: none; }
#game.four.four-tablet .p4 .result .actions { grid-column: 2; grid-row: 1 / 3; flex-direction: row; }
#game.four.four-tablet .p4.over { grid-template-columns: auto minmax(0, 1fr); }
#game.four.four-tablet .p4.over .result { justify-content: end; }
#game.four.four-tablet .p4.over .reserve { display: none; }
/* the short side panels keep Rematch; Home is on the long ones */
#game.four.four-tablet .seat1 .result .actions .ghost, #game.four.four-tablet .seat3 .result .actions .ghost { display: none; }
#game.four.four-tablet .p4 .result .headline, #game.four.four-tablet .p4 .result .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#game.four.four-tablet .p4 .log, #game.four.four-tablet .p4 .dock { display: none; }
/* a short side (a 1024×768 iPad's): the flats word and the points line go,
   so the name keeps its room and a result fits in two lines */
@container (max-width: 640px) {
  #game.four.four-tablet .p4 .reserve .flatn, #game.four.four-tablet .p4 .result .sub { display: none; }
  #game.four.four-tablet .p4 .who { column-gap: 10px; }
  #game.four.four-tablet .p4 .name { min-width: 4ch; }
  #game.four.four-tablet .p4 .result .headline { white-space: normal; font-size: 15px; line-height: 1.2; }
}
#game.four .p4 .tray { grid-template-columns: 1fr auto; }
#game.four.four-tablet .side.active { box-shadow: inset 0 3px 0 var(--accent); }
.pair.four .wins4 { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.pair.four .wins4 b { font: 700 22px/1 var(--mono); }

/* A phone on its side: the board on the left, the strip and the panel of
   whoever's turn it is in a column on the right. */
@media (min-aspect-ratio: 4/3) {
  #game.four:not(.four-tablet) { grid-template-rows: auto 1fr; grid-template-columns: 1fr minmax(240px, 300px); grid-template-areas: "board top" "board bottom"; }
  #game.four:not(.four-tablet) .p4 { align-content: start; overflow-y: auto; padding-top: 10px; }
  #game.four:not(.four-tablet) .strip4 { padding-top: calc(8px + var(--sat)); font-size: 14px; gap: 4px 6px; }
}

/* a phone changing hands: whose it is now, over the board for a moment */
.pass4 { grid-area: board; position: relative; align-self: center; justify-self: center; z-index: 3; pointer-events: none; margin: 0; padding: 10px 20px; border-radius: 999px; background: rgba(33,26,20,.82); color: var(--ink); font: 700 20px/1.2 var(--serif); box-shadow: 0 0 0 1.5px var(--accent); animation: pass4 1.6s ease forwards; }
.pass4[hidden] { display: none; }
#game.four-tablet .pass4 { display: none; }
@keyframes pass4 { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pass4 { animation: none; } }

/* a sheet turned to a side edge (four players round a tablet) */
.scrim.side-left, .scrim.side-right { inset: auto; left: 50%; top: 50%; width: 100dvh; height: 100dvw; }
.scrim.side-left { transform: translate(-50%, -50%) rotate(90deg); }
.scrim.far.top { transform: rotate(180deg); }
.scrim.side-right { transform: translate(-50%, -50%) rotate(-90deg); }
/* Quick Play: each player's kit for this game */
.kits4q { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
.kits4q .dot { width: 14px; height: 14px; border-radius: 4px; display: inline-block; box-shadow: 0 0 0 1px var(--line); }

/* first visit: the lessons' button is the gold one; Quick Play waits as a tile */
.homemenu.offering .tile.quick { background: var(--chip); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.homemenu.offering .tile.quick svg { color: var(--accent); }
.homemenu.offering .tile.quick .s { color: var(--soft); }

/* type: buttons in one face (the serif), data in mono */
.result .sub { text-wrap: balance; }
.result .sub .next { color: var(--ink); }
.reserve .flatn { text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.tile .s { font: 14px/1.3 var(--serif); }
/* the four-player experiment: a row of its own under the rule sets */
.rs[data-k="rs:four"], .rs[data-k="rs:house"] { grid-column: 1 / -1; }
/* a refusal in a lesson, marked as at the table */
.wrong.nope { color: #ffb08a; }
.wrong .nopei { width: 1em; height: 1em; vertical-align: -.15em; margin-right: .3em; }
/* the message lines keep two lines' room whether or not they say anything,
   so the board above them never changes size as they come and go */
.side .say { min-height: 2.7em; line-height: 1.35; }
/* (the lesson's hint line too, where there's height to spare) */
@media (min-height: 760px) { #coach .wrong { min-height: 2.7em; line-height: 1.35; } }
#coach .wrong:empty { display: none; }
@media (min-height: 760px) { #coach .wrong:empty { display: block; } }
#game.four.four-tablet .p4 .say { min-height: 0; }
/* a long seat label wraps beside its Look button rather than into it; the
   four-player colour note takes the setup's full width */
.seat-head { flex-wrap: wrap; gap: 6px 10px; }
.seat-head .seat-label { flex: 1 1 12em; line-height: 1.4; }
.setup-in > .four-note { grid-column: 1 / -1; }
/* the rules always lead Custom Game (side by side, fields otherwise follow the seats) */
.setup-in > .field.rulesets { order: 0; }

/* Phones upright: a panel's message floats over the board's edge beside it
   (a small label) instead of keeping two lines of room in the panel, so the
   panels stay compact and the board still never changes size. */
@media (max-width: 699px) and (max-aspect-ratio: 1023/768) {
  .side { position: relative; }
  .side .say { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 6px); min-height: 0; z-index: 3; pointer-events: none; }
  .side .say:not(:empty) { background: rgba(33, 26, 20, .9); border-radius: 10px; padding: 6px 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
}
/* ...and the panel of whoever isn't moving keeps no empty tray: just Undo,
   small, when their last move can be taken back. (The panels swap sizes as
   the turn passes; nothing moves while a move is made.) */
@media (max-width: 699px) and (max-aspect-ratio: 1023/768) {
  .side:not(.active):not(.over) .kinds, .side:not(.active):not(.over) .lift { display: none; }
  .side:not(.active):not(.over) .tray { min-height: 0; grid-template-columns: auto; justify-content: start; }
  .side:not(.active):not(.over) .tray:not(:has(.undo:not([hidden]))) { display: none; }
  .side:not(.active):not(.over) .undo { height: 36px; width: 44px; }
}

/* Clear of a landscape phone's camera island (and the home bar's sides):
   the game, the screens and the sheets keep inside the safe area left and
   right. (Upright, the insets are 0.) */
#game { left: var(--sal); right: var(--sar); }
#setup { padding-left: var(--sal); padding-right: var(--sar); }
.scrim:not(.side-left):not(.side-right) { padding-left: var(--sal); padding-right: var(--sar); }