/* Sixty-Six's table, on the card room's felt (../cards/cards.css) and its
   table styles (../cards/themes.css): only what the card room doesn't
   already draw. No colors of its own; everything comes from the style's
   tokens, so it reads in all nine.

   Steadiness first, as in Euchre: the table fills the window, the bottom
   panel and your hand never change size, and everything that comes and goes
   (moves, banners, tags) appears in space already set aside for it or floats
   over the table, so nothing you might be about to click moves. */

.felt.sixtysix { position: relative; height: calc(100dvh - 2 * var(--frame)); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.felt.sixtysix.docked { grid-template-columns: minmax(0, 1fr) 300px; }
.sixtysix .tablemain { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.sixtysix .logdock { min-height: 0; display: flex; flex-direction: column; }
.sixtysix .logdock:empty { display: none; }
.sixtysix .logdock .gamelog { flex: 1; }
.sixtysix .gamelog.drawer {
  position: absolute; z-index: 30; right: 14px; top: 64px; bottom: 230px; width: min(340px, calc(100% - 28px));
  box-shadow: -10px 10px 30px rgba(0, 0, 0, .35);
}
.sixtysix .logbtn.on { background: var(--pick-tint); box-shadow: var(--pick-ring); }

/* suits on a little card face, so their color reads in every table style */
.sixtysix .sg, .sixtysix .roundel, .sx-result .sg, .sx-result .roundel { background: var(--card); border-radius: 6px; font-weight: 800; line-height: 1; }
/* (a block trimmed to the cap height and baseline, centered, so a suit sits in the middle of its face in any face; house.css, "fine details") */
.sixtysix .sg, .sx-result .sg { display: inline-block; align-content: center; text-align: center; text-box: trim-both cap alphabetic; min-width: 1.45em; height: 1.45em; margin-right: .1em; font-size: .95em; vertical-align: -.2em; }
.su-s, .su-c { color: var(--suit-s); }
.su-h, .su-d { color: var(--suit-h); }
.sixtysix .roundel, .sx-result .roundel { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; border: var(--card-edge); font-size: 28px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
/* (a suit in a roundel is a drawing, in the middle by its own outline: cards/kit/suits.js) */
.sixtysix .roundel .suiticon, .sx-result .roundel .suiticon { display: block; width: .72em; height: .72em; fill: currentColor; }

/* ── the stage: the rail, and the table beside it ───────────────────── */
.sixtysix .stage { flex: 1; min-height: 0; display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 12px; }
.sixtysix .rail { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: hidden auto; scrollbar-width: thin; padding: 2px; }
.sixtysix .rail > section { background: var(--panel); border: var(--panel-edge); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; flex: none; }
.sixtysix .rail .rtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: var(--t-note); }
.sixtysix .rail .rtext .soft { line-height: 1.3; }

/* the game score, for both */
.sixtysix .srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; }
.sixtysix .srow .steam { display: flex; align-items: baseline; gap: 8px; min-width: 0; line-height: 1.2; }
.sixtysix .srow .steam b { font-size: var(--t-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sixtysix .srow .spts { line-height: 1; }
.sixtysix .srow .spts small { font: 600 13px var(--ui-font); color: var(--soft); margin-left: 1px; }
.sixtysix .srow .meter { grid-column: 1 / -1; }
.sixtysix .meter, .sx-result .meter { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 18%, transparent); overflow: hidden; }
.sixtysix .meter i, .sx-result .meter i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }

/* trump, and what's become of the stock */
.sixtysix .rail .rtrump { flex-direction: row; align-items: center; gap: 10px; border-color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, var(--panel)); }
.sixtysix .rtrump .tname { font: var(--display-weight) 20px/1.15 var(--display); }

.sixtysix .rtricks .trow { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; font-size: var(--t-note); }
.sixtysix .rtricks .trow b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sixtysix .rtricks .tcount { flex: none; }
.sixtysix .rtricks .thead { display: flex; justify-content: space-between; align-items: baseline; }

/* ── the table: your opponent across, the stock beside the trick ────── */
.sixtysix .sxtable {
  --tw: calc(var(--cw) * .95);
  position: relative; min-height: 0; min-width: 0; display: grid; align-items: center; justify-items: center; gap: 6px 16px;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; padding: 4px;
}
.sxseat {
  --seat: var(--ink); position: relative; width: clamp(160px, 100%, 260px); min-height: 66px; padding: 6px 10px 6px 12px; display: flex; flex-direction: column; gap: 4px;
  border-radius: 12px; background: var(--panel); border: var(--panel-edge); border-left: 5px solid var(--seat);
}
.sxseat.top { grid-column: 2; grid-row: 1; }
.sxseat.bottom { grid-column: 2; grid-row: 3; }
.sxseat.me { background: color-mix(in srgb, var(--ink) 9%, var(--panel)); }
.sxseat.turn { outline: 3px solid var(--turn); outline-offset: 2px; }
.sxseat.away .ehead { opacity: .6; }
.sxseat .ehead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sxseat .face { position: relative; flex: none; width: 26px; height: 26px; display: block; }
.sxseat .face > .seatmark { display: block; width: 100%; height: 100%; overflow: visible; }
.sxseat .dealer { position: absolute; right: -7px; bottom: -5px; width: 15px; height: 15px; border-radius: 50%; background: var(--ink); color: var(--room); font: 800 12px/15px var(--ui-font); text-align: center; box-shadow: 0 0 0 2px var(--room); }
.sxseat .ename { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.sxseat .youmark { font-weight: 400; color: var(--soft); font-size: 13px; }
.sxseat .ecards { display: flex; height: 18px; padding-left: 4px; margin-left: auto; flex: none; }
.sixtysix .miniback { width: 12px; height: 18px; margin-left: -4px; border-radius: 3px; background: var(--back-pattern), var(--back); border: 1.5px solid var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.sxseat .etags { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; min-height: 22px; align-content: flex-start; }
.sixtysix .etag { font: 700 12px/1.2 var(--ui-font); letter-spacing: .03em; padding: 2px 7px; border-radius: 99px; border: 1px solid currentColor; white-space: nowrap; }
.sixtysix .etag.closer { background: var(--turn); color: var(--turn-ink); border-color: var(--turn); }
.sixtysix .etag.out { color: var(--soft); }
.sixtysix .etag.ready { color: var(--good); }
/* what everyone knows they hold (the helper): a marriage shown, the trump card taken */
.sxseat .known { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; }
.sxseat .known .sg.chip { padding: 0 4px; min-width: 0; height: 1.5em; font-size: 12px; margin: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.sxspacer { grid-column: 3; grid-row: 2; }

/* the stock: a pile of backs across the trump card, which lies on its side
   under it, face up (face down once it's closed) */
.stockarea {
  grid-column: 1; grid-row: 2; justify-self: end; position: relative; width: calc(var(--tw) * 2); height: calc(var(--tw) * 1.4 + 26px);
  border-radius: 10px;
}
.stockarea .trumpcard { position: absolute; left: 0; top: calc(var(--tw) * .2); width: calc(var(--tw) * 1.4); height: var(--tw); }
.stockarea .trumpcard .card { --cw: var(--tw); position: absolute; left: calc(var(--tw) * .2); top: calc(var(--tw) * -.2); transform: rotate(-90deg); }
.stockarea .pile { position: absolute; right: 9px; top: 0; width: var(--tw); height: calc(var(--tw) * 1.4); }
.stockarea .pile .card { --cw: var(--tw); position: absolute; left: calc(var(--k) * 1.5px); top: calc(var(--k) * -1.5px); }
.stockarea .stocknote { position: absolute; right: 0; bottom: 0; width: var(--tw); text-align: center; font: 700 12px/1.2 var(--ui-font); color: var(--soft); white-space: nowrap; }
.stockarea .stocknote .house-figure { line-height: 1; }
.stockarea.isclosed .stocknote { color: var(--turn); }
.stockarea .stockgone { position: absolute; right: 0; top: 0; width: var(--tw); height: calc(var(--tw) * 1.4); border: 1.5px dashed color-mix(in srgb, var(--ink) 35%, transparent); border-radius: var(--card-radius); }

/* the trick: the card led a little up and to the left, the one played to it over it */
.trickbox { position: relative; grid-column: 2; grid-row: 2; width: calc(var(--tw) * 2.3); height: calc(var(--tw) * 1.4 * 1.55); }
.trickbox .card { --cw: var(--tw); }
.tslot { position: absolute; display: flex; align-items: center; justify-content: center; z-index: 2; }
.tslot.lead { z-index: 1; }
.tslot.top { top: 0; left: 50%; transform: translateX(-72%); }
.tslot.bottom { bottom: 0; left: 50%; transform: translateX(-28%); }
.tslot .tcard { box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.tslot.won .tcard { outline: 3px solid var(--turn); outline-offset: 2px; }
/* a card on its way keeps its place, unseen, until it lands (table.js
   playCue); a new hand's cards and the trump card, until the deal's done */
.tcard.landing, .felt.dealing .stockarea .card, .felt.dealing .hand .card { visibility: hidden; }

/* ── banners: the house's, over the middle of the table, never in the
   way; Sixty-Six's words and colors on them ─────────────────────────── */
.house-banner .sxbanner { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.house-banner .sxbanner .splashtitle { font: var(--display-weight) 44px/1.05 var(--display); color: var(--turn); }
.house-banner .sxbanner .splashsub { font: var(--t-note)/1.35 var(--ui-font); color: var(--ink); white-space: normal; max-width: 24em; }
.house-banner.sx-marriage, .house-banner.sx-close, .house-banner.sx-claim, .house-banner.sx-win { border: 3px solid var(--turn); }
.house-banner.sx-short { border: 3px solid var(--bad); }
.house-banner.sx-short .splashtitle { color: var(--bad); }
.house-banner.sx-win .splashtitle { font-size: 54px; }

/* ── your hand ──────────────────────────────────────────────────────── */
.sixtysix .handwrap { flex: none; min-width: 0; }
/* the card room's hand (cards/kit/hand.js): snapped together, trump first;
   once the rules are strict, the cards you can play lift and the rest dim */
.sixtysix .hand { padding: 24px 8px 8px; min-height: calc(var(--cw) * 1.4 + 36px); border-radius: 12px; transition: box-shadow var(--m-quick, 150ms), background-color var(--m-quick, 150ms); }
.sixtysix .hand.active .card.pick { cursor: pointer; }
.sixtysix .hand .card.legal { transform: translateY(-10px); }
.sixtysix .hand .card.legal:hover { transform: translateY(-16px); }
.sixtysix .hand .card.illegal { filter: brightness(.62) saturate(.6); }
/* a card on its way from the stock holds its place, unseen, until it lands */
.sixtysix .hand .card.held { visibility: hidden; }
.sixtysix .hand.active .card.illegal { cursor: not-allowed; }
.felt.sixtysix.mineturn .hand.active { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--turn) 75%, transparent); background-color: color-mix(in srgb, var(--turn) 8%, transparent); }

/* ── the bottom panel: status, and the moves, always the same size ──── */
.sixtysix .dock {
  flex: none; display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 10px; container-type: inline-size;
  border-radius: 14px; background: var(--panel); border: 2px solid transparent; transition: border-color .2s, background-color .2s;
}
.sixtysix .dock.yours { border-color: var(--turn); background: color-mix(in srgb, var(--turn) 9%, var(--panel)); }
.sixtysix .status { min-width: 0; }
.sixtysix .saybox { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sixtysix .sayline { min-height: 2.9em; display: flex; align-items: flex-start; gap: 10px; }
.sixtysix .say { margin: 0; font-size: var(--t-body); line-height: 1.45; min-width: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sixtysix .say b { color: var(--turn); }
.sixtysix .partnercue { flex: none; margin-top: 2px; padding: 1px 10px; border-radius: 99px; border: 1.5px solid var(--good); color: var(--good); font: 700 var(--t-note)/1.4 var(--ui-font); white-space: nowrap; }
.sixtysix .controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
/* (after the moves in the page, for the keyboard; drawn before them) */
.sixtysix .toolrow { display: flex; gap: 14px; align-items: center; min-width: 0; order: -1; min-height: var(--tool-h); }
.sixtysix .tgroup { display: flex; align-items: center; gap: var(--s2, 8px); }
.sixtysix .sortlabel { font-size: var(--t-note); }
@media (max-width: 400px) { .sixtysix .sortlabel { display: none; } }
/* five places for moves, Claim 66 always last: a hidden one keeps its place */
.sixtysix .actions { display: grid; grid-template-columns: repeat(5, 184px); gap: 8px; margin-left: auto; flex: none; }
.sixtysix .act { width: 100%; min-width: 0; padding-inline: 10px; }
.sixtysix .act .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sixtysix .act .sg { min-width: 1.4em; height: 1.4em; border-radius: 5px; margin-inline: .15em; }
.sixtysix .btn.slot.act.confirm, .sixtysix .btn.slot.act.confirm.alt { background: var(--btn2); color: var(--btn2-ink); border: 2.5px solid var(--confirm, var(--bad)); }
@container (max-width: 1180px) { .sixtysix .actions { grid-template-columns: repeat(5, 160px); } .sixtysix .act { font-size: var(--t-small); padding-inline: 6px; } }
/* (narrower still, a marriage is its suit and points: "♠ 20") */
@container (max-width: 1000px) { .sixtysix .actions { grid-template-columns: repeat(5, 128px); } .sixtysix .act { padding-inline: 6px; } .sixtysix .act.suitbtn .sname:first-child { display: none; } }

/* ── sheets: the hand's summary, the scores ─────────────────────────── */
.house-scrim-result .house-sheet.sx-result { --house-sheet-width: 560px; }
.house-result .scoresheet { align-self: stretch; text-align: left; min-width: 0; }
.house-result .house-post:empty { display: none; }
.scoresheet .scroll { overflow-x: auto; }
.scoresheet .legend { font-size: var(--t-note); margin: 0 0 8px; }
.scoresheet .handsum { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border: var(--panel-edge); border-radius: 12px; background: var(--panel); }
.handsum .hs-called { display: flex; align-items: center; gap: 12px; }
.handsum .hs-called > div:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.handsum .hs-tricks { display: flex; flex-direction: column; gap: 6px; }
.handsum .trow { display: grid; grid-template-columns: minmax(0, 6em) 2.6em minmax(0, 1fr); align-items: baseline; gap: 10px; }
.handsum .trow b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.handsum .trow .cpts { font: 800 22px/1 var(--ui-font); font-variant-numeric: tabular-nums; text-align: right; }
.handsum .trow .soft { font-size: var(--t-note); }
.handsum .hs-points { margin: 0; font-size: var(--t-body); }
.scoresheet .bigscore { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 4px; }
.bigscore .bs { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 8px; }
.bigscore .bs > .soft { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bigscore .bs b { font: 800 40px/1 var(--ui-font); font-variant-numeric: tabular-nums; }
.bigscore .bs .meter { grid-column: 1 / -1; }
.bigscore .bs.them b { color: var(--soft); }
.scoresheet table.scores, .rulesheet table.scores { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums lining-nums; }
:is(.scoresheet, .rulesheet) table.scores :is(th, td) { padding: 6px 7px; text-align: right; border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent); white-space: nowrap; }
.scoresheet table.scores .left { text-align: left; white-space: normal; }
.scoresheet table.scores .now { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.scoresheet table.scores tfoot :is(th, td) { font-weight: 800; border-bottom: 0; }
.rulesheet table.values { margin: 10px 0 4px; }
.rulesheet table.values :is(th, td) { text-align: center; }
.rulesheet table.contracts :is(td, th):first-child { text-align: left; white-space: normal; }
.rulesheet table.contracts :is(td, th):nth-child(2) { text-align: left; white-space: normal; }
.rulesheet ul { padding-left: 1.2em; }
/* the host's "Start without waiting" waits a moment before it can be pressed */
.later { animation: later 0s 1s both; }
@keyframes later { from { visibility: hidden; } to { visibility: visible; } }

/* ── smaller windows ────────────────────────────────────────────────── */
@media (max-width: 1000px), (max-height: 640px) {
  .sixtysix .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
  .sixtysix .rail { flex-direction: row; overflow: visible; padding: 0; }
  .sixtysix .rail > section { flex: 1 1 0; min-width: 0; padding: 6px 8px; }
  .sixtysix .rail .rtrump { gap: 8px; }
  .sixtysix .roundel { width: 40px; height: 40px; font-size: 24px; }
  .sixtysix .rtrump .tname { font-size: 18px; }
  .sixtysix .rtext .soft { display: none; }
  .sixtysix .rtricks .thead { display: none; }
}
@media (max-width: 760px) {
  .sixtysix .sxtable { gap: 4px 8px; grid-template-columns: minmax(0, 1fr) auto minmax(0, .4fr); }
  .sxseat { padding: 4px 6px 4px 8px; gap: 2px; border-left-width: 4px; }
  .sxseat .ename { font-size: 13px; }
  .sxseat .face { width: 22px; height: 22px; }
  .sixtysix .etag { padding: 1px 5px; }
  .sixtysix .actions { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .felt.sixtysix { height: 100dvh; gap: 0; }
  .sixtysix .tablemain { gap: 6px; }
  .felt.sixtysix .bar .tools { display: none; }
  .felt.sixtysix .bar .more { display: inline-flex; min-width: 44px; min-height: 44px; }
  /* the rail is small panels in a row: the suit says trump, so its words go */
  .sixtysix .rail { gap: 4px; }
  .sixtysix .rail .rtrump .rtext, .sixtysix .rail .rtricks { display: none; }
  .sixtysix .rail .rtrump { flex: 0 0 auto; justify-content: center; }
  .sixtysix .rail > section { justify-content: center; }
  .sixtysix .srow .steam b { font-size: 14px; }
  .sixtysix .sxtable { --tw: calc(var(--cw) * .85); grid-template-columns: auto auto; justify-content: center; }
  .sxseat.top, .sxseat.bottom { grid-column: 1 / -1; }
  .stockarea { grid-column: 1; }
  .trickbox { grid-column: 2; }
  .sxspacer { display: none; }
  .sxseat .ecards .miniback:not(:first-child) { display: none; }
  .sxseat .ecards::after { content: '×' attr(data-count); font: 700 12px/18px var(--ui-font); margin-left: 3px; }
  .sixtysix .hand { padding: 20px 2px 6px; min-height: calc(var(--cw) * 1.4 + 30px); }
  .sixtysix .dock { padding: 8px; gap: 6px; }
  .sixtysix .controls { flex-direction: column; align-items: stretch; gap: 6px; }
  .sixtysix .toolrow { order: 0; }
  /* (it keeps the height of a move when there are none, so the hand doesn't jump) */
  .sixtysix .actions { width: 100%; margin-left: 0; display: flex; flex-wrap: wrap; gap: 6px; min-height: 44px; }
  .sixtysix .actions .btn.slot { flex: 1 1 0; padding-inline: 3px; font-size: 14px; }
  /* (all five at once: Claim 66, the one that matters, gets the room its words need) */
  .sixtysix .actions .btn.slot:last-child { flex-grow: 1.5; }
  .sixtysix .actions .btn.slot.hide { display: none; }
  .sixtysix .actions .btn.slot.suitbtn .sname:first-child { display: none; }
  .sixtysix .say { font-size: 14px; }
  .sixtysix .sayline { flex-direction: column; gap: 4px; min-height: calc(2 * 1.45 * 14px + 28px); }
  .sixtysix .partnercue { align-self: flex-start; margin: 0; font-size: 13px; }
  .sixtysix .gamelog.drawer { right: 10px; width: calc(100% - 20px); }
  .bigscore .bs b { font-size: 32px; }
  .house-banner .sxbanner .splashtitle { font-size: 34px; }
  .house-banner.sx-win .splashtitle { font-size: 40px; }
  :is(.scoresheet, .rulesheet) table.scores :is(th, td) { padding: 6px 4px; font-size: 13px; }
}
@media (max-width: 340px) {
  .sixtysix .actions { gap: 3px; }
  .sixtysix .actions .btn.slot { font-size: 13px; padding-inline: 2px; }
  .sixtysix .actions .act .sg { min-width: 1.2em; height: 1.2em; margin-inline: .05em; }
}
/* short phones (an iPhone SE, 320×568): smaller cards */
@media (max-width: 640px) and (max-height: 700px) {
  body { --cw: 40px; }
  .sixtysix .sayline { min-height: calc(2 * 1.45 * 14px + 26px); }
  .sxseat { min-height: 0; padding-block: 3px; }
  .sxseat .etags { min-height: 0; }
  .sxseat .etags:empty { display: none; }
  .sixtysix .hand { padding-top: 14px; min-height: calc(var(--cw) * 1.4 + 22px); }
  .sixtysix .rail > section { padding-block: 4px; }
  .sixtysix .roundel { width: 34px; height: 34px; font-size: 20px; }
  /* (the stock's count goes on the stock, as a tag at its foot, so the stock and the trump card fit the row between the seats) */
  .stockarea { height: calc(var(--tw) * 1.4); }
  /* (the D on a seat's mark says who deals: its Dealer tag goes, so a seat stays one line high) */
  .sxseat .etag.isdealer { display: none; }
  .sxseat .etags:not(:has(.etag:not(.isdealer))) { display: none; }
  /* (and the trick's two cards stagger less, so the trick fits there too: each still shows its corner) */
  .trickbox { height: calc(var(--tw) * 1.4 * 1.15); }
  /* (no wider than the stock, so it never covers the trump card's corner
     beside it: the figure over its noun) */
  .stockarea .stocknote {
    bottom: 3px; z-index: 2; right: 9px; width: var(--tw); padding: 2px 0 3px; border-radius: 8px; background: var(--room); font-size: 10px; color: var(--ink);
    display: flex; flex-direction: column; align-items: center; line-height: 1;
  }
  .stockarea .stocknote .house-figure { font-size: var(--t-figure); }
  .stockarea .stocknote .house-figure-noun { margin-left: 0; font-size: 10px; line-height: 1.1; }
}
/* phones on their side: everything one line high, so the table, your
   hand and your moves all fit; the log is in the menu */
@media (max-height: 520px) {
  body { --cw: 40px; }
  #app { padding: 0; }
  .felt.sixtysix { height: 100dvh; padding: 4px 8px; border: 0; border-radius: 0; gap: 0; }
  .sixtysix .tablemain { gap: 3px; }
  .felt.sixtysix .bar .tools { display: none; }
  .felt.sixtysix .bar .more { display: inline-flex; min-height: 30px; }
  .sixtysix .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 3px; }
  .sixtysix .rail { flex-direction: row; overflow: visible; padding: 0; gap: 4px; }
  .sixtysix .rail > section { flex: 1 1 auto; flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 1px 8px; min-height: 0; }
  .sixtysix .rscore .meter, .sixtysix .rtricks .thead, .sixtysix .rtrump .rtext { display: none; }
  .sixtysix .rscore .srow { display: flex; align-items: baseline; gap: 6px; }
  .sixtysix .roundel { width: 26px; height: 26px; font-size: 16px; box-shadow: none; }
  .sixtysix .sxtable { --tw: calc(var(--cw) * .7); gap: 2px 8px; padding: 0; }
  .sxseat { width: auto; max-width: 100%; min-height: 0; padding: 2px 8px; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 2px 8px; border-left-width: 4px; }
  .sxseat .ecards, .sxseat .youmark { display: none; }
  .sxseat .etags { min-height: 0; }
  .sixtysix .hand { padding: 12px 4px 4px; min-height: calc(var(--cw) * 1.4 + 18px); }
  .sixtysix .toolrow .sorters { display: none; }
  .sixtysix .dock { padding: 3px 8px 4px; gap: 2px; }
  .sixtysix .sayline { min-height: 1.45em; gap: 8px; }
  .sixtysix .say { -webkit-line-clamp: 1; font-size: 13px; }
  .sixtysix .partnercue { margin: 0; font-size: 12px; padding: 0 8px; }
  .sixtysix .actions { grid-template-columns: repeat(5, 112px); gap: 4px; }
  .sixtysix .act { min-height: 34px; font-size: 13px; padding-block: 2px; }
  .sixtysix .toolrow { min-height: 34px; }
  .sixtysix .dock kbd { display: none; }
  .house-banner .sxbanner .splashtitle { font-size: 28px; }
  .house-banner.sx-win .splashtitle { font-size: 32px; }
}
@media (pointer: coarse) {
  .sixtysix .act, .sixtysix .toolrow { min-height: 44px; }
  .felt.sixtysix .bar .btn { min-height: 44px; }
}
@media (pointer: coarse) and (max-height: 520px) {
  .sixtysix .act, .sixtysix .toolrow { min-height: 36px; }
  .felt.sixtysix .bar .btn { min-height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .card.arrive { animation: none; }
  .sixtysix .dock, .sixtysix .hand, .sixtysix .hand .card { transition: none; }
}

/* ── the front door: five table settings still fit 1280×800 ─────────── */
@media (min-width: 900px) {
  .lobby:has(.choices) .choices { grid-template-columns: 2fr 1fr; }
}
/* Three to a row, each a label and hint over its choice, so the lobby needs
   no scrolling (docs/design-system.md, "The lobby fits 1280×800"); one to a
   row on a phone. */
.lobby .choice > .bots > .bots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2) var(--s3); }
.lobby .choice > .bots > .bots > .setting { flex-direction: column; align-items: stretch; gap: var(--s1); }
.lobby .choice > .bots > .bots > .setting > div:first-child { flex: none; }
.lobby .choice > .bots > .bots > .setting .seg { display: grid; }
.lobby .choice > .bots > .bots > .setting .seg button { min-width: 0; min-height: 32px; padding-block: 3px; }
@media (pointer: coarse) { .lobby .choice > .bots > .bots > .setting .seg button { min-height: 44px; } }
/* (one to a row wherever the bots' panel is half a window: under 900px it shares the row with the friends', so three would be cramped) */
@media (max-width: 899px) {
  .lobby .choice > .bots > .bots { grid-template-columns: 1fr; }
}
/* (the narrowest phones: "Hand 3 · ♦ trump", so the bar's title isn't cut short) */
@media (max-width: 360px) { .sixtysix .title .suitword { display: none; } }