/* ── Game setup ────────────────────────────────────────────────── */

.setup {
  /* the dynamic viewport, so on a phone the sheet ends above the browser's
     toolbar rather than behind it */
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100dvh;
  z-index: 40;
  /* a column with the panel's auto margins: centred when it is short,
     scrollable from its top when it is tall (a centred grid item taller
     than the screen has an unreachable top) */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px max(20px, env(safe-area-inset-bottom, 0px));
  /* The table behind stays legible: on a first visit the felt is already
     dealt, and the point of it is that you can see it. */
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(7px) saturate(1.05);
  -webkit-backdrop-filter: blur(7px) saturate(1.05);
  opacity: 0;
  transition: opacity var(--med) var(--ease);
  overflow: auto;
}
.setup[data-open="true"] { opacity: 1; }
.setup[hidden] { display: none; }

.setup-panel {
  /* the panel's own side padding, as a number the sticky bars can read:
     they pull out by exactly this much to reach the panel's edges, and a
     hard-coded copy of it goes wrong the moment the padding changes */
  --pad-x: 26px;
  margin: auto 0;
  flex: none;
  /* the sticky foot reaches past the bottom edge; nothing shows outside the corners */
  overflow: clip;
  width: min(100%, 560px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 26px 26px 22px;
  border-radius: var(--r-xl);
  background: var(--bg);
  box-shadow: var(--ring-strong), var(--lift-lg);
  transform: translateY(10px) scale(.98);
  transition: transform var(--slow) var(--spring);
}
.setup[data-open="true"] .setup-panel { transform: none; }

/* ── head ──────────────────────────────────────────────────────── */

.setup-head {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
}
/* the mark spans the title and its line; with the line gone it sits on
   the title alone, so no empty row opens under it */
.setup-mark { grid-row: 1; width: 34px; height: 46px; padding: 0; align-self: center; }
.setup-head:has(.setup-sub:not([hidden])) .setup-mark { grid-row: 1 / 3; }
.setup-sub { grid-column: 2; }

.setup-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.7px;
  line-height: 1.1;
}
.setup-sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}

/* ── fields ────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }

.field-label {
  margin: 0;
  font-family: var(--font-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Two fields side by side only when both get room to breathe; six
   numbers and four words do not share one line in a sheet this wide. */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  align-items: start;
}

/* ── variant tiles ─────────────────────────────────────────────── */

.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 13px 14px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: var(--ring);
  text-align: left;
  transition:
    transform var(--fast) var(--spring),
    background-color var(--med) var(--ease),
    box-shadow var(--med) var(--ease);
}
.tile:hover { background: var(--surface-3); }
.tile:active { transform: scale(.985); }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The ring sits outside the tile at a whole two pixels: an inset ring at
   a pixel and a half came out thick on one edge and thin on the next,
   depending on where the tile happened to land on the screen. */
.tile[data-on="true"] {
  background: var(--bg);
  box-shadow: 0 0 0 2px var(--accent), var(--lift);
}

.tile-cards { display: flex; height: 26px; }
.mini-card {
  width: 17px;
  height: 24px;
  border-radius: 4px;
  background: var(--card-back-a);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(0, 0, 0, .09);
  transform: rotate(calc((var(--i) - 1.5) * 4deg)) translateY(calc(var(--i) * .4px));
}
.mini-card + .mini-card { margin-left: -5px; }
.tile[data-on="true"] .mini-card { background: var(--accent); }

.tile-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--ink);
}
.tile-blurb {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-3);
}

/* ── segmented pickers ─────────────────────────────────────────── */

.segment {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: var(--ring);
}

.seg-btn {
  min-width: 38px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.1px;
  color: var(--ink-3);
  transition:
    background-color var(--med) var(--ease),
    color var(--med) var(--ease),
    box-shadow var(--med) var(--ease),
    transform var(--fast) var(--spring);
}
.seg-btn:hover { color: var(--ink); }
.seg-btn:active { transform: scale(.94); }
.seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg-btn[data-on="true"] {
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--ring), var(--lift);
}
/* Inside the sheet a segment spans its field, and its buttons share the
   width evenly, so a hidden button (solo has no "1 player") does not
   leave a bare stretch at the end. */
.setup .field .segment { display: flex; width: 100%; box-sizing: border-box; }
.setup .field .seg-btn { flex: 1 1 0; min-width: 0; padding: 0 6px; }

/* ── note and actions ──────────────────────────────────────────── */

.setup-note {
  margin: -4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}

.setup-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.setup-go { min-width: 160px; }
.setup-cancel[hidden] { display: none; }

@media (max-width: 560px) {
  /* start from the top, not from the left: see the note below */
  .setup { padding: 14px; justify-content: flex-start; }
  .setup > .setup-panel { margin-block: 0; }
  .setup-panel { --pad-x: 18px; gap: 16px; padding: 20px var(--pad-x) 18px; border-radius: var(--r-lg); }
  .setup-title { font-size: 23px; }
  .setup-mark { width: 30px; height: 41px; }
  .tiles { gap: 8px; }
  .tile { padding: 11px 12px 12px; gap: 6px; }
  .tile-name { font-size: 14px; }
  .tile-blurb { font-size: 11px; }
  .field-row { grid-template-columns: 1fr; gap: 14px; }
  .setup-actions { flex-direction: column-reverse; }
  .setup-go, .setup-cancel { width: 100%; }
}

/* A short window - which is every laptop once the browser's own chrome is
   off the top, and certainly every laptop running at 125% or 150% - wants
   the panel to start at the top rather than float in the middle where a
   tall one cannot be scrolled back up to.
   `.setup` is a flex COLUMN, so its cross axis is the horizontal one:
   `align-items: start` here did not move the panel up, it moved it left,
   and that is the dialog that has been shoved against the left edge all
   along. The main axis is the one to start. */
@media (max-height: 700px) {
  .setup { justify-content: flex-start; }
  .setup > .setup-panel { margin-block: 0; }
  .setup-panel { --pad-x: 18px; gap: 14px; padding: 18px var(--pad-x) 16px; }
  .setup-sub { display: none; }
  .tile { padding: 10px 12px 11px; }
  .tile-cards { height: 22px; }
  .mini-card { width: 15px; height: 21px; }
}

/* ── Rooms ─────────────────────────────────────────────────────── */

.setup-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 4px 10px 14px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: var(--ring);
}
.setup-summary[hidden] { display: none; }
.setup-summary-text { font-size: 13px; font-weight: 500; color: var(--ink-2); line-height: 1.35; }
.setup-summary .quick-btn { flex: none; }
.setup-options { display: flex; flex-direction: column; gap: 20px; }
.setup-options[hidden] { display: none; }
.tiles-format .tile { padding: 12px 14px 13px; }
.tiles-format .tile-name { font-size: 15px; }
.field-help { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.field-help:empty { display: none; }

.room { display: flex; flex-direction: column; gap: 12px; }
.room[hidden] { display: none; }

.room-join { display: flex; flex-direction: column; gap: 8px; }
.room-row { display: flex; gap: 8px; }
.room-row .btn { min-width: 0; flex: none; }

/* Creating a table and joining one are two jobs on one screen, and with a
   button each they read as one job with two answers. A tab picks the job;
   the row below only ever holds the one button that does it. */
.setup-tabs { width: 100%; min-width: 0; }
.setup-tabs .seg-btn { flex: 1; min-width: 0; padding: 0 6px; }
@media (max-width: 420px) {
  .setup-tabs .seg-btn { font-size: 12.5px; letter-spacing: -.1px; }
}
.room-do .btn { flex: 1; }

.input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: var(--ring);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.input::placeholder { color: var(--ink-4); }
.input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* a name the table will not wear says so before you press anything */
.input[data-bad="true"] { box-shadow: 0 0 0 1.5px var(--card-red); }

.input-code {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.room-live { display: flex; flex-direction: column; gap: 12px; }
.room-live[hidden] { display: none; }

.room-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.room-head-actions { display: flex; gap: 6px;
  flex-wrap: wrap; justify-content: flex-end;
}
.room-head-actions .quick-btn { white-space: nowrap; }

.room-code {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 5px;
  line-height: 1.1;
  color: var(--ink);
}

/* under the code: the same table as a link, and how long it lasts */
.room-address { margin: -6px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink-3); overflow-wrap: anywhere; }
.room-address[hidden] { display: none; }

.room-seats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: var(--ring);
}

.room-seat {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px 0 6px;
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: var(--ring);
  font-size: 13px;
}
.room-seat[data-you="true"] { box-shadow: inset 0 0 0 1.5px var(--accent); }
.room-seat[data-gone="true"] { opacity: .45; }

.room-seat .avatar { width: 28px; height: 28px; font-size: 11px; }
.room-seat-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-text);
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-seat-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.room-seat-stack {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

/* how the night has gone for them, up or down on where they started */
.room-seat-net {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.room-seat-net[data-tone="up"] { color: var(--accent); }
.room-seat .quick-btn { flex: none; }

.room-empty {
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--ink-3);
}

.seg-btn[hidden] { display: none; }

.room-join[hidden],
.room-row[hidden],
.room-create[hidden] { display: none; }

/* ── Settings ──────────────────────────────────────────────────── */

.settings-panel {
  width: min(100%, 460px);
  gap: 18px;
  max-height: min(88vh, 880px);
}

.opts {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* the list scrolls, but never looks like it has been cut off */
  mask-image: linear-gradient(to bottom, transparent, #000 10px,
              #000 calc(100% - 10px), transparent);
  padding-block: 4px;
}

/* a heading in the list: it rules off a group rather than setting anything */
.opt-head {
  padding-top: 20px;
  padding-bottom: 6px;
  border-top: 1px solid var(--line);
}
.opt-head + .opt { border-top: none; }
.opt-head .opt-label {
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.opt-head .opt-note { max-width: 34ch; }

.opt[data-locked="true"] { opacity: .5; }
.opt[data-locked="true"] .switch { pointer-events: none; }

.opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
}
.opt + .opt { border-top: 1px solid var(--line); }

.opt-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.opt-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.2px;
  color: var(--ink);
}
.opt-note {
  font-family: var(--font-text);
  font-size: 12px;
  color: var(--ink-3);
}

.opt-seg { flex: none; }
.opt-seg .seg-btn { min-width: 62px; font-size: 12px; }

/* the switch: a pill with a disc in it, like everything else here */
.switch {
  position: relative;
  flex: none;
  width: 50px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  box-shadow: var(--ring);
  transition: background-color var(--med) var(--ease);
}
.switch[data-on="true"] { background: var(--accent); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.switch-knob {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .22);
  transition: transform var(--med) var(--spring);
}
.switch[data-on="true"] .switch-knob { transform: translateX(20px); }

/* ── Hand history ──────────────────────────────────────────────── */

.history-panel {
  width: min(100%, 560px);
  max-height: min(86vh, 820px);
  gap: 14px;
}

.career {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: var(--ring);
  font-family: var(--font-text);
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}
.career b {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}
.career span[data-tone="up"] b { color: var(--accent); }

.hands {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
}

.hand-empty {
  padding: 22px 4px;
  text-align: center;
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--ink-3);
}

.hand {
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: var(--ring);
  cursor: pointer;
  transition: background-color var(--fast) var(--ease);
}
.hand:hover { background: var(--surface-3); }

.hand-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
}

.hand-when {
  flex: none;
  width: 74px;
  font-family: var(--font-text);
  font-size: 11px;
  color: var(--ink-3);
}
.hand-cards, .hand-board { display: inline-flex; gap: 3px; }

/* the link to this one hand, kept quiet until you go looking for it */
.hand-share {
  flex: none;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: var(--ring);
  font-family: var(--font-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity var(--med) var(--ease), color var(--med) var(--ease);
}
.hand:hover .hand-share,
.hand[data-open="true"] .hand-share,
.hand-share:focus-visible { opacity: 1; }
.hand-share:hover { color: var(--ink); }
@media (hover: none) { .hand-share { opacity: 1; } }
html[data-links="off"] .hand-share { display: none; }
.hand-board { flex: 1 1 auto; opacity: .8; }
.hand-board.hand-noboard { font-size: 11px; color: var(--ink-3, #8a8f98); opacity: 1; letter-spacing: .02em; }
.hand-cards { padding-right: 6px; border-right: 1px solid var(--line); margin-right: 3px; }

.hand-net {
  flex: none;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.hand[data-tone="up"] .hand-net { color: var(--accent); }
.hand[data-tone="down"] .hand-net { color: var(--ink); }

.hand-more { display: none; padding: 0 13px 12px; }
.hand[data-open="true"] .hand-more { display: block; }

.hand-line {
  font-family: var(--font-text);
  font-size: 12px;
  color: var(--ink-2);
  padding: 2px 0 8px;
  border-top: 1px solid var(--line);
  margin-top: 2px;
  padding-top: 8px;
}
.hand-line b { color: var(--ink); }

.hand-acts {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  /* columns, not a grid: a hand reads down the first column and then
     down the second, which is the order it was played in */
  columns: 2;
  column-gap: 18px;
  font-family: var(--font-text);
  font-size: 11.5px;
  color: var(--ink-2);
}
@media (max-width: 520px) { .hand-acts { columns: 1; } }
.hand-acts li {
  display: flex;
  align-items: baseline;
  gap: 5px;
  break-inside: avoid;
}
.hand-acts span { color: var(--ink); font-weight: 600; }
.hand-acts b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.hand-acts i {
  margin-left: auto;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink-4);
}

.hand-shown { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.hand-seat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-text);
  font-size: 11.5px;
  color: var(--ink-2);
}
.hand-seat b { color: var(--ink); font-weight: 600; }

/* the id this device keeps its record under */
.opt-id {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.opt-id-value {
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  box-shadow: var(--ring);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  color: var(--ink-2);
}


/* ── An invitation ─────────────────────────────────────────────────
   Somebody who opened a link is not choosing a game, they are joining
   one. Everything that is not their name gets out of the way. */

#setup[data-invited="true"] .mode-switch,
#setup[data-invited="true"] #field-game,
#setup[data-invited="true"] .field-row { display: none; }

.invite { display: flex; flex-direction: column; gap: 2px; }
.invite[hidden] { display: none; }
.invite-code {
  font-size: 30px;
  letter-spacing: 6px;
}
.room-go { flex: none; }

/* a locked table says so, quietly, next to its code */
.room-code[data-locked="true"]::after {
  content: "locked";
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: var(--ring);
  font-family: var(--font-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  vertical-align: middle;
}
#room-pass-row[hidden] { display: none; }


/* ── The pass ──────────────────────────────────────────────────────
   Off by default; this is what it would look like. */

.pass-panel { width: min(100%, 460px); gap: 16px; }

.pass-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pass-item { display: flex; flex-direction: column; gap: 1px; }
.pass-item b {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
.pass-item span {
  font-family: var(--font-text);
  font-size: 12px;
  color: var(--ink-3);
}
#pass[data-has="true"] .pass-item::before { content: "✓ "; color: var(--accent); }

/* a game you cannot have yet says so rather than simply not working */
.tile[data-locked="true"] { opacity: .55; }
.tile[data-locked="true"] .tile-name::after {
  content: " · pass";
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}


/* The stakes segment carries the blinds under the name, so the button has
   to be a stack rather than a line of text: a `.seg-btn` is a button, and
   a button is not a flex box until it is told to be one, which is how
   "Friendly" and "10/20" ended up printed against each other. */
#pick-stakes,
#pick-clock,
#pick-keep,
#now-stakes { display: flex; width: 100%; }
#pick-keep[hidden], #keep-label[hidden] { display: none; }
#pick-stakes .seg-btn,
#pick-pace .seg-btn,
#pick-clock .seg-btn,
#pick-keep .seg-btn,
#now-stakes .seg-btn {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: auto;
  padding: 7px 10px;
}
#pick-stakes .seg-btn i,
#pick-pace .seg-btn i,
#pick-clock .seg-btn i,
#pick-keep .seg-btn i,
#now-stakes .seg-btn i {
  font-style: normal;
  font-family: var(--font-text);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-4);
}
#pick-stakes .seg-btn[data-on="true"] i,
#pick-clock .seg-btn[data-on="true"] i,
#pick-keep .seg-btn[data-on="true"] i,
#now-stakes .seg-btn[data-on="true"] i { color: var(--ink-3); }
#pick-stakes .seg-btn[data-locked="true"] { opacity: .5; }
#setup[data-invited="true"] #field-stakes { display: none; }


/* the deck receipt on a hand in the record */
.hand-deal {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-3);
}
.hand-deal[data-ok="false"] { color: var(--card-red); }
.hand-deal code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px;
  color: var(--ink-4);
}


/* ── Picking your mark ─────────────────────────────────────────────
   Eight colours and twenty-eight marks: enough that a table of six never
   has two the same, and small enough to choose from at a glance. */

.opt-ava {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 240px;
  min-width: 0;
  max-width: 244px;
}

.ava-tones { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; place-items: center; }
.ava-tone {
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--tone);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
  transition: transform var(--med) var(--spring), box-shadow var(--med) var(--ease);
}
.ava-tone[data-on="true"] {
  transform: scale(1.14);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink);
}
.ava-tone:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ava-marks {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
}
.ava-mark-btn {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--r-sm, 9px);
  background: var(--surface-2);
  color: var(--ink-2);
  transition: background-color var(--med) var(--ease), color var(--med) var(--ease);
}
.ava-mark-btn svg { width: 62%; height: 62%; fill: currentColor; }
.ava-mark-btn[data-on="true"] svg { fill: #fff; }
.ava-mark-btn:hover { background: var(--surface-3); color: var(--ink-2); }
.ava-mark-btn[data-on="true"] {
  background: var(--tone, var(--accent));
  color: #fff;
}
.ava-mark-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the mark in a lobby seat, at the size the initials were */
.room-seat .avatar.is-mark {
  background: var(--tone, var(--accent));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.room-seat .avatar.is-mark svg { width: 60%; height: 60%; fill: #fff; }

@media (max-width: 560px) {
  .opt-ava { max-width: none; }
}


/* ── The panel: account, appearance, settings, feedback ────────── */

/* A screen, not a sheet. Sections down the left on a wide window, tabs
   across the top on a phone, and each one fits without scrolling the
   whole thing - the list inside a section scrolls, the frame never does. */
.screen .setup-panel.panel-frame {
  width: min(100%, 940px);
  height: min(100%, 680px);
  padding: 0;
  gap: 0;
  display: grid;
  grid-template-columns: 196px 1fr;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}
.panel-nav {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 12px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}
.panel-tab {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-3);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.panel-tab:hover { background: var(--surface-2); color: var(--ink-2); }
.panel-tab[data-on="true"] { background: var(--bg); color: var(--ink); box-shadow: var(--ring); }
.panel-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.panel-body {
  min-height: 0;
  padding: 26px 30px 6px;
  display: flex;
  flex-direction: column;
}
.pane { display: flex; flex-direction: column; min-height: 0; gap: 14px; flex: 1; }
.pane[hidden] { display: none; }
.pane-head { display: flex; flex-direction: column; gap: 4px; }
.pane .setup-title { font-size: 26px; }
.pane .opts { flex: 1; min-height: 0; }
/* The mark picker gets the row to itself, and room to be a picker: in
   the old sheet it was squeezed into a 244px column beside its label, and
   given the whole row it kept that column's flex-basis as a height. */
.opt-wide { flex-direction: column; align-items: stretch; gap: 14px; }
.opt-wide .opt-ava { flex: none; width: 100%; max-width: 620px; gap: 14px; }
.opt-wide .ava-tones { grid-template-columns: repeat(8, 30px); justify-content: start; gap: 10px; }
.opt-wide .ava-tone { width: 28px; height: 28px; }
.opt-wide .ava-marks { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.opt-wide .ava-mark-btn svg { width: 56%; height: 56%; }

.panel-foot {
  grid-column: 2;
  display: flex;
  justify-content: flex-end;
  padding: 10px 30px 20px;
}

/* account */
.acct, .fb { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.acct[data-busy="true"] button, .fb[data-busy="true"] button { opacity: .6; pointer-events: none; }
.acct-lead { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.acct-help { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.acct-muted { color: var(--ink-4); }
.acct-field { display: flex; flex-direction: column; gap: 6px; }
.acct-code { font-family: var(--font-display); font-size: 24px; letter-spacing: .3em; text-align: center; height: 52px; }
.acct-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acct-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: var(--ring);
}
.acct-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.acct-email { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); word-break: break-all; }
.acct-record { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.acct-record b { color: var(--ink); font-variant-numeric: tabular-nums; }
.acct-id { font-size: 11px; color: var(--ink-4); }
.acct-note { margin: 0; }

/* feedback */
/* a box, not a pill: a pill's corners eat the first word of the placeholder */
.fb-text { height: auto; padding: 12px 16px; border-radius: 18px; line-height: 1.5; resize: vertical; font-family: var(--font-text); font-size: 14px; }
.fb-count { font-size: 12px; }

/* ── standing tables ───────────────────────────────────────────── */

.room-nick { align-items: center; gap: 0; }
.room-nick-prefix {
  flex: none;
  height: 46px;
  display: inline-flex; align-items: center;
  padding: 0 4px 0 16px;
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  background: var(--surface-2);
  box-shadow: var(--ring);
  font-family: var(--font-text); font-size: 14px; font-weight: 500; color: var(--ink-4);
  white-space: nowrap;
}
/* width 0 so the box's own size does not count: with the prefix beside it,
   an input's built-in width pushed the whole panel past a phone's edge */
.room-nick .input { border-radius: 0 var(--r-pill) var(--r-pill) 0; padding-left: 2px; width: 0; }
.room-nick .input[data-bad="true"] { box-shadow: 0 0 0 1.5px var(--card-red); }
.room-code[data-named="true"] { font-size: 18px; letter-spacing: 0; text-transform: none; }

.my-tables { display: flex; flex-direction: column; gap: 8px; }
.my-tables[hidden] { display: none; }
.my-tables-row { display: flex; flex-wrap: wrap; gap: 8px; }
.my-table {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-width: 96px; padding: 8px 30px 8px 12px;
  border: 0; border-radius: var(--r-lg);
  background: var(--surface-2); box-shadow: var(--ring);
  color: var(--ink); text-align: left; cursor: pointer;
}
.my-table:hover { background: var(--surface-3); }
.my-table b { font-family: var(--font-display); font-size: 14px; font-weight: 700; }
.my-table[data-named="false"] b { letter-spacing: 2px; }
.my-table span { font-size: 11px; color: var(--ink-3); min-height: 13px; }
.my-table[data-live="true"] span { color: var(--accent); font-weight: 600; }
.my-table i {
  position: absolute; right: 6px; top: 6px;
  width: 18px; height: 18px; display: grid; place-items: center;
  border-radius: 99px; font-style: normal; font-size: 13px; line-height: 1; color: var(--ink-4);
}
.my-table i:hover { background: var(--surface); color: var(--ink); }

/* ── the recap ─────────────────────────────────────────────────── */

.recap-panel { width: min(100%, 520px); gap: 14px; padding-top: 14px; }
/* the top of the card is the table: green, railed, and the headline on it */
.recap-felt {
  --felt-line: rgba(255, 255, 255, .15);
  position: relative;
  margin: 0 -12px;
  padding: 18px 22px 16px;
  border-radius: var(--r-xl);
  color: #fff;
  background: radial-gradient(96% 128% at 50% -22%, #2b7c5c 0%, #1d6047 46%, #124534 100%);
  box-shadow: inset 0 0 0 7px #1a2621, inset 0 0 0 8px rgba(255, 255, 255, .07), inset 0 14px 26px -14px rgba(0, 0, 0, .55);
}
.recap-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.recap-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 2px; color: rgba(255, 255, 255, .7); }
.recap-brand .setup-mark { width: 20px; height: 28px; padding: 0; }
.recap-brand .setup-mark svg { width: 100%; height: 100%; display: block; }
.recap-when { font-size: 11.5px; color: rgba(255, 255, 255, .6); text-align: right; }
.recap-title { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -.9px; line-height: 1.05; }
.recap-sub { margin: 6px 0 0; font-size: 13px; color: rgba(255, 255, 255, .65); }
.recap-chart-box { margin-top: 12px; }
.recap-chart-box:empty { display: none; }
.recap-chart { display: block; width: 100%; height: auto; color: #fff; }

.recap-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.recap-row {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 14px 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: var(--ring);
}
/* a line along the bottom says how far up or down, against the night's biggest swing */
.recap-row::after {
  content: ""; position: absolute; left: 12px; bottom: 5px; height: 3px; border-radius: 2px;
  width: calc(var(--bar, 0%) - 24px); max-width: calc(100% - 24px);
  background: var(--ink-4); opacity: .6;
}
.recap-row[data-tone="up"]::after { background: var(--accent); opacity: 1; }
.recap-row[data-tone="flat"]::after { display: none; }
.recap-row[data-you="true"] { background: var(--ink); color: var(--bg); }
.recap-row[data-you="true"]::after { background: color-mix(in srgb, var(--bg) 40%, transparent); }
.recap-row[data-you="true"][data-tone="up"]::after { background: #ff6b81; }
/* the place, as a medal for the first three */
.recap-rank {
  display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700; color: var(--ink-3); background: var(--surface-3);
  font-variant-numeric: tabular-nums;
}
.recap-rank[data-place="1"], .recap-rank[data-place="1st"] { background: #f2c14e; color: #3b2a00; }
.recap-rank[data-place="2"], .recap-rank[data-place="2nd"] { background: #d8dde4; color: #303338; }
.recap-rank[data-place="3"], .recap-rank[data-place="3rd"] { background: #d59b6b; color: #3a1f0a; }
.recap-row[data-you="true"] .recap-rank:not([data-place="1"], [data-place="1st"], [data-place="2"], [data-place="2nd"], [data-place="3"], [data-place="3rd"]) { color: color-mix(in srgb, var(--bg) 55%, transparent); background: color-mix(in srgb, var(--bg) 14%, transparent); }
.recap-row .avatar { width: 28px; height: 28px; font-size: 11px; --size: 28px; background: var(--tone, var(--surface-3)); color: #fff; }
.recap-row .avatar.is-mark { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.recap-row .avatar.is-mark svg { width: 60%; height: 60%; fill: #fff; }
.recap-row[data-you="true"] .avatar:not(.is-mark) { background: #e6e6e6; color: #555; }
.recap-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-size: 15px; font-weight: 600; overflow: hidden; white-space: nowrap; }
.recap-name i { font-style: normal; font-family: var(--font-text); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .5; }
.recap-name small { font-family: var(--font-text); font-size: 11px; font-weight: 500; opacity: .55; }
.recap-net { font-family: var(--font-display); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.recap-row[data-tone="up"] .recap-net { color: var(--accent); }
.recap-row[data-you="true"][data-tone="up"] .recap-net { color: #ff6b81; }

.recap-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.recap-fact { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--ring); font-size: 12.5px; color: var(--ink-3); }
.recap-fact b { font-family: var(--font-display); font-size: 18px; color: var(--ink); letter-spacing: -.3px; }
.recap-cards { display: flex; align-items: center; gap: 3px; margin-top: 6px; }
.recap-cards i { width: 8px; }
.recap-card {
  display: inline-flex; align-items: center; gap: 1px;
  height: 22px; padding: 0 5px;
  border-radius: 4px; background: var(--card-bg, #fff); box-shadow: var(--ring);
  font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--ink);
}
.recap-card[data-color="red"] { color: var(--card-red); }
.recap-suit { width: 9px; height: 9px; fill: currentColor; }
.recap-cards i + .recap-card { height: 19px; font-size: 10.5px; padding: 0 4px; opacity: .85; }
.recap-cards i ~ .recap-card { height: 19px; font-size: 10.5px; padding: 0 4px; opacity: .85; }

.recap-pic { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.recap-pic img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--ring), var(--lift); }
.recap-pic[hidden] { display: none; }


@media (max-width: 560px) {
  .recap-felt { margin: 0 -6px; padding: 16px 16px 14px; }
  .recap-title { font-size: 26px; }
}

/* ── the felt shop ─────────────────────────────────────────────── */

.opt-felts { gap: 12px; }
.opt-felts .opt-note { max-width: 62ch; }
.shop { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 14px 12px;
}
.shop-item { display: grid; grid-template-columns: 1fr auto; gap: 1px 6px; align-items: baseline; }
.shop-item .swatch { grid-column: 1 / 3; }

/* A swatch is the table at a tenth of the size: the same rule that
   dresses the felt dresses this, with a thinner rail, three cards on the
   board and a plate at the bottom so you can see what white looks like
   on it before you buy it. */
.swatch {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 15 / 9.2;
  --rail-w: 4px;
  --felt-line: var(--line);
  --felt-slot: rgba(0, 0, 0, .022);
  border: 0;
  border-radius: 11px;
  background: var(--surface);
  box-shadow:
    inset 0 0 0 var(--rail-w) var(--surface-2),
    inset 0 0 0 calc(var(--rail-w) + 1px) var(--line),
    var(--ring);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.swatch:hover { transform: translateY(-1px); }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.swatch-grain { border-radius: 7px; }
.swatch-slots {
  position: absolute;
  left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 3px;
}
.swatch-slots i {
  width: 12px;
  aspect-ratio: 5 / 7;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.swatch-plate {
  position: absolute;
  left: 50%; bottom: 9px;
  transform: translateX(-50%);
  width: 38%;
  height: 8px;
  border-radius: 99px;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
/* the one on the table, and the ones that are not yet yours */
.swatch[data-on="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.swatch[data-owned="false"]::after {
  content: "";
  position: absolute;
  right: 6px; top: 6px;
  width: 14px; height: 14px;
  border-radius: 99px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M17 9h-1V7a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2zm-7-2a2 2 0 0 1 4 0v2h-4V7z'/%3E%3C/svg%3E") center / 9px no-repeat,
    rgba(0, 0, 0, .55);
}
.felt-name { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.felt-tag {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.shop-item:has(.swatch[data-owned="false"]) .felt-tag { color: var(--accent); }

/* what a felt is, before you pay for it */
.shop-buy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: var(--ring);
  max-width: 560px;
}
.shop-buy[hidden] { display: none; }
.shop-buy-text { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.shop-buy-head { display: flex; align-items: baseline; gap: 8px; }
.shop-buy-text b { font-family: var(--font-display); font-size: 16px; color: var(--ink); }
.shop-buy-text i { font-style: normal; font-weight: 700; color: var(--accent); }
.shop-buy-text .acct-muted { font-size: 12px; }
.shop-buy-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shop-buy-row:empty { display: none; }
.shop-soon { font-size: 12.5px; }
.shop-code .input { height: 40px; }
.shop-code .btn { height: 40px; min-width: 0; flex: none; }
.shop-note:empty { display: none; }

@media (max-width: 700px) {
  .screen { padding: 0; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px 10px; }
  .screen .setup-panel.panel-frame {
    width: 100%;
    height: 100%;
    border-radius: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  .panel-nav {
    grid-row: auto;
    flex-direction: row;
    gap: 2px;
    padding: 10px 10px 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }
  .panel-tab { flex: 1; justify-content: center; height: 36px; padding: 0 8px; font-size: 13px; }
  .panel-body { padding: 18px 16px 4px; }
  .pane .setup-title { font-size: 22px; }
  .opt-wide .ava-marks { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
  .panel-foot { grid-column: 1; padding: 8px 16px 16px; }
  .panel-foot .btn { width: 100%; }
}

/* ── the review, on the recap ─────────────────────────────────── */
.recap-review { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.recap-review-sub { margin: -4px 0 0; font-size: 12.5px; color: var(--ink-3); }
.recap-spots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.recap-spot { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--ring); }
.recap-spot-cards { flex: none; }
.recap-spot-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.recap-spot-text b { font-size: 13.5px; color: var(--ink); font-weight: 600; letter-spacing: -.1px; }
.recap-spot-text small { font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 480px) { .recap-spot { flex-direction: column; align-items: flex-start; gap: 6px; } }

/* ── settling up, on the recap ────────────────────────────────────
   One line a player - what they have, and what the night did to them -
   then the shortest list of who hands what to whom. */
.recap-settle { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.recap-settle[hidden] { display: none; }
.settle-rows, .settle-pays { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.settle-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 12px;
  padding: 7px 12px; border-radius: var(--r-md, 10px);
}
.settle-row[data-you="true"] { background: var(--surface-2); }
.settle-name { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settle-chips { font-family: var(--font-display); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.settle-net {
  min-width: 62px; text-align: right;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-3);
}
.settle-net[data-up="true"] { color: var(--accent); }
.settle-net[data-down="true"] { color: var(--ink-2); }
.settle-pays { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); gap: 4px; }
.settle-pays li { font-size: 13px; color: var(--ink-2); display: flex; gap: 6px; align-items: baseline; }
.settle-pays li b { color: var(--ink); font-weight: 600; }
.settle-pays li span { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.settle-clear { color: var(--ink-3); }
#recap-settle-copy { align-self: flex-start; margin-top: 2px; }

/* the rating, wherever a name is */
.room-seat-rating { margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: .2px; vertical-align: 1px; }

/* ── the home screen and the steps ────────────────────────────── */
.home { display: flex; flex-direction: column; gap: 14px; }
.home[hidden] { display: none; }
.home-choices { display: flex; flex-direction: column; gap: 8px; }
.home-choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  box-sizing: border-box; width: 100%; padding: 14px 16px;
  border: 0; border-radius: var(--r-lg);
  background: var(--surface-2); box-shadow: var(--ring);
  color: var(--ink); text-align: left; cursor: pointer; font: inherit;
  transition: background .15s var(--ease), box-shadow .15s var(--ease);
}
.home-choice:hover { background: var(--surface-3); }
.home-choice:active { box-shadow: var(--ring), inset 0 0 0 2px var(--line-2); }
.home-choice b { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.home-choice span { font-size: 12.5px; color: var(--ink-3); }
.home-choice[data-choice="solo"] { background: var(--ink); color: var(--surface); }
.home-choice[data-choice="solo"] span { color: var(--surface); opacity: .75; }
.home-choice[data-choice="solo"]:hover { background: var(--ink-2); }
.link-btn {
  align-self: flex-start; padding: 0; border: 0; background: none;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.link-btn:hover { color: var(--ink); }
.step-head { display: flex; flex-direction: column; gap: 4px; }
.step-head[hidden] { display: none; }
.step-title { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: var(--ink); }
.step-sub { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
/* Back and Next stay in reach however long the question above them runs:
   the footer sticks to the bottom of the sheet as it scrolls */
.setup-foot {
  display: flex; flex-direction: column; gap: 10px;
  position: sticky; bottom: -22px; z-index: 2;
  padding: 12px 0 22px; margin-bottom: -22px;
  background: linear-gradient(to bottom, transparent, var(--bg) 14px);
}
.step-nav { display: flex; justify-content: space-between; gap: 10px; }
.step-nav[hidden] { display: none; }
/* where you are in the questions */
.step-dots { display: flex; gap: 5px; margin: 6px 0 0; }
.step-dots[hidden] { display: none; }
.step-dots i { width: 18px; height: 3px; border-radius: 2px; background: var(--line-2); }
.step-dots i[data-on="true"] { background: var(--ink); }
.step-dots i[data-here="true"] { background: var(--accent); }
.step-nav .btn { min-width: 120px; }
.step-nav #step-next { flex: 1; }
.setup-sub[hidden] { display: none; }

/* On the home screen the way back is the first and biggest thing: a
   table you were at, who is there, one tap. */
/* The resume screen: the tables you were at, one per row. The name is
   the big thing; who is there and what you have there sit under it. */
#my-tables .my-tables-row { flex-direction: column; }
#my-tables .my-table { box-sizing: border-box; width: 100%; padding: 12px 40px 12px 16px; border-radius: var(--r-lg); }
#my-tables .my-table[data-live="true"] { box-shadow: var(--ring), inset 0 0 0 2px var(--accent); }
#my-tables .my-table b { font-size: 16px; }
#my-tables .my-table span { font-size: 12px; }
#my-tables .my-table i { top: 12px; }

/* ── the way back into the last game, and where the chips live ──── */
.home-again {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  box-sizing: border-box; width: 100%; padding: 12px 16px;
  border: 0; border-radius: var(--r-lg);
  background: var(--surface-2); box-shadow: var(--ring), inset 0 0 0 2px var(--line-2);
  color: var(--ink); text-align: left; cursor: pointer; font: inherit;
}
.home-again[hidden] { display: none; }
.home-again:hover { background: var(--surface-3); }
.home-again b { font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.home-again span { font-size: 12px; color: var(--ink-3); }
.home-chips { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.home-chips:empty { display: none; }

/* a new question slides in from the right; the same one repainting stays put */
/* ── On a computer ─────────────────────────────────────────────────
   The sheet was drawn for a phone, and pasted into the middle of a
   desktop screen it read as a narrow strip with its content jammed down
   the left and its foot running off the bottom of the window. On a wide
   screen it gets the room to be a dialog: wider, roomier, and never
   taller than the window - the middle scrolls inside it, so the question
   at the top and the buttons at the bottom are always both in view. */
/* On a computer the sheet is a dialog. It is always centred in the
   window; what made it read as shoved to the left was one width for
   every screen - a menu of three lines sitting in a box built for a
   four-column grid of games, with half of every row empty. So the width
   follows what is in it: narrow for the questions, wide only where
   something wide is being shown. */
/* A laptop is not 900 pixels wide. Windows defaults to 125% or 150%
   scaling and a scaled Mac display does the same, so a 1280 panel reports
   1024 or 853 CSS pixels and a 1440 reports 1152 - every one of those was
   getting the phone layout. The test is not "is this screen big" but "is
   there room, and is there a mouse": a phone or tablet held sideways is
   wide but has a coarse pointer, and keeps the layout built for a thumb. */
@media (min-width: 640px) and (pointer: fine) {
  .setup-panel {
    /* a dialog, so it keeps air on both sides even in a narrow window */
    width: min(100% - 40px, 520px);
    max-height: calc(100dvh - 56px);
    overflow-y: auto;
    overflow-x: clip;
    --pad-x: 32px;
    padding: 30px var(--pad-x) 24px;
    gap: 22px;
  }
  /* the game list, the builder and the lobby carry grids and want the room */
  .setup[data-screen="game"] .setup-panel,
  .setup[data-screen="quick"] .setup-panel,
  .setup[data-screen="lobby"] .setup-panel,
  .setup[data-screen^="custom"] .setup-panel,
  .now-panel,
  .panel-frame,
  .history-panel { width: min(100% - 40px, 720px); }
  /* keyboard scrolling stops above the sticky foot, not under it */
  .setup-panel { scroll-padding-bottom: 96px; }

  /* On a computer the dialog is a thing you look at head on, so it reads
     down the middle rather than ragged along its left edge: the mark and
     the title stack centred, the questions and their answers centre, the
     tiles centre in their own boxes. Form rows that pair a label with a
     control keep their two columns - centring those would break the line
     the controls make down the panel. */
  .setup-panel { text-align: center; }
  .setup-head { grid-template-columns: 1fr; justify-items: center; row-gap: 2px; }
  .setup-mark { grid-row: 1; grid-column: 1; }
  .setup-head:has(.setup-sub:not([hidden])) .setup-mark { grid-row: 1; }
  .setup-sub { grid-column: 1; }
  .step-dots { justify-content: center; }
  .home-choice { align-items: center; text-align: center; }
  .link-btn, .custom-more, .home-link { align-self: center; }
  .tile, .game-tile { align-items: center; text-align: center; }
  .game-art, .tile-cards { justify-content: center; margin-left: 0; margin-right: 0; }
  .setup-note, .field-help, .field-label { text-align: center; }
  .step-nav { justify-content: center; }
  .setup-summary, .setup-summary-text { text-align: center; justify-content: center; }
  /* a row is a label and its control: those stay a pair, read left to right */
  .custom-row, .opt, .rule-row { text-align: left; }
  .custom-row .field-label, .opt .opt-label { text-align: left; }
  .custom-row-wide .custom-chips { justify-content: center; }
  /* a list of games, a search box and typed text all read from the left */
  .game-search, .input, .room-name, textarea { text-align: left; }
  .game-row { text-align: left; }
  .game-row .game-text { align-items: flex-start; }
  .settle-row, .settle-pays li { text-align: left; }
}

.setup-panel.is-stepping > :not(.setup-head) { animation: step-in .22s var(--ease) both; }
@keyframes step-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .setup-panel.is-stepping > :not(.setup-head) { animation: none; } }

/* how a table works, under the seats */
.room-how { margin: 4px 0 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.room-how[hidden] { display: none; }
.room-nick-help[hidden] { display: none; }

/* ── the ask: the sign-in, small enough to sit inside a moment ──── */
.ask {
  display: flex; flex-direction: column; gap: 8px;
  box-sizing: border-box; width: 100%; padding: 12px 14px;
  border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--ring);
  text-align: left;
}
.ask[hidden] { display: none; }
.ask[data-busy="true"] button { opacity: .6; pointer-events: none; }
.ask-why { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.ask-why b { color: var(--ink); }
/* the box, then the button under it, full width: one thing at a time */
.ask-row { display: flex; flex-direction: column; gap: 8px; }
.ask-row .input, .acct-field .input { flex: none; width: 100%; box-sizing: border-box; height: 46px; }
.ask-row .btn { width: 100%; height: 48px; }
.acct .acct-row .btn { flex: 1 1 100%; height: 48px; }
.ask-code { font-family: var(--font-display); font-size: 20px; letter-spacing: .25em; text-align: center; }
.ask-note { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.rating-tip .ask { margin-top: 10px; }
.recap-ask, .name-ask, .rating-ask { display: block; }
.recap-ask[hidden], .name-ask[hidden], .rating-ask[hidden] { display: none; }


/* ── hosting: the kind, the account step, and the Tables screen ─── */
.tiles-kind { grid-template-columns: 1fr; }
.tiles-kind .tile { align-items: flex-start; text-align: left; }
.tiles-kind .tile-blurb { line-height: 1.45; }
#field-kind[hidden] { display: none; }
.acct-step { display: flex; flex-direction: column; gap: 10px; }
.acct-step[hidden] { display: none; }
.acct-step-state { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.acct-step-state:empty { display: none; }
#door-help[hidden] { display: none; }

.tables { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.tables[data-busy="true"] button { opacity: .6; pointer-events: none; }
.tbl-list { display: flex; flex-direction: column; gap: 8px; }
.tbl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  box-sizing: border-box; width: 100%; padding: 12px 14px 12px 16px;
  border: 0; border-radius: var(--r-lg);
  background: var(--surface-2); box-shadow: var(--ring);
  color: var(--ink); text-align: left; cursor: pointer; font: inherit;
}
.tbl-row:hover { background: var(--surface-3); }
.tbl-row[data-gone="true"] b { color: var(--ink-4); }
.tbl-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tbl-row-text b { font-family: var(--font-display); font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.tbl-row-text b[data-named="false"] { letter-spacing: 2px; }
.tbl-row-text span { font-size: 12px; color: var(--ink-3); }
.tbl-row i { font-style: normal; font-size: 22px; line-height: 1; color: var(--ink-4); }
.tbl-title { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); overflow-wrap: anywhere; }
.tbl-title[data-named="false"] { letter-spacing: 4px; }
.tbl-sub { margin: -6px 0 0; font-size: 13px; color: var(--ink-3); }
.tbl-actions { display: flex; gap: 10px; }
.tbl-actions .btn { flex: 1; }
.tbl-opt-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tbl-danger { color: var(--card-red); }
.tables .opts, .pane .tables .opts { flex: none; min-height: 0; max-height: none; overflow: visible; mask-image: none; -webkit-mask-image: none; border-top: 1px solid var(--line); }
.tables .link-btn { margin-bottom: 2px; }
.step-sub[hidden] { display: none; }

/* ── learn mode ──────────────────────────────────────────────────── */
#field-learn[hidden] { display: none; }
.coach {
  margin: 0; padding: 8px 12px;
  border-radius: var(--r-md); background: var(--surface-2); box-shadow: var(--ring);
  font-size: 13px; line-height: 1.45; color: var(--ink-2);
}
.coach[hidden] { display: none; }
.coach b { color: var(--ink); }

/* ── the board of a standing table ───────────────────────────────── */
.board { display: flex; flex-direction: column; gap: 6px; }
.board[hidden] { display: none; }
.board-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.board-row {
  display: grid; grid-template-columns: 22px 1fr auto auto; align-items: baseline; gap: 10px;
  padding: 7px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: 13px;
}
.board-row[data-you="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.board-place { font-family: var(--font-display); font-weight: 800; color: var(--ink-3); }
.board-name { font-weight: 600; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.board-name small { margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--ink-3); }
.board-hands { font-size: 11.5px; color: var(--ink-4); }
.board-net { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-3); }
.board-row[data-tone="up"] .board-net { color: var(--accent); }
/* on a phone the board runs to the panel's edges and drops the hand count */
@media (max-width: 480px) {
  #room-board { margin-left: -18px; margin-right: -18px; }
  #room-board .field-label { padding-left: 18px; }
  #room-board .board-row { border-radius: 0; padding: 9px 18px; }
  .board-row { grid-template-columns: 20px 1fr auto; gap: 8px; font-size: 14px; }
  .board-hands { display: none; }
  .board-name small { margin-left: 8px; }
}

/* The way out of the card is always in view: a cross on the felt, and
   Keep playing pinned to the bottom of the screen while the card scrolls. */
.recap-close {
  width: 30px; height: 30px; margin-left: 6px; flex: none;
  border: 0; border-radius: 99px; background: rgba(255, 255, 255, .16); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.recap-close:hover { background: rgba(255, 255, 255, .28); }
/* The buttons stay in reach and the recap scrolls under them, so the bar
   has to cover what passes beneath it: opaque from just below its top
   edge, and pulled out to the panel's own edges. Written once - there
   were two of these rules and the second, which reached neither edge and
   was mostly transparent, was the one winning. */
.recap-panel .setup-actions {
  position: sticky; bottom: -22px; z-index: 2;
  margin: 0 calc(var(--pad-x) * -1) -22px;
  padding: 14px var(--pad-x) 22px;
  background: linear-gradient(to bottom, transparent, var(--bg) 14px);
}
.recap-panel .setup-actions .btn-accent { flex: 1; }
@media (max-width: 640px) {
  .recap-panel .setup-actions { bottom: -18px; margin: 0 calc(var(--pad-x) * -1) -18px; padding: 10px var(--pad-x) 18px; }
}


/* ── house rules: one row per rule, on the way in and on the sheet ──
   The rows are the settings `.opt` look: name and blurb on the left, the
   control on the right. A rule that is on lets its sub-option out under
   it, indented, so the list only ever shows what applies. Segments here
   size to their buttons rather than spanning the field, and on a narrow
   screen a long one drops under the text instead of squeezing it. */
.rule-list { display: flex; flex-direction: column; min-width: 0; }
.rule-list[hidden] { display: none; }
.rule-rows { display: flex; flex-direction: column; min-width: 0; }
.rule-row { flex-wrap: wrap; row-gap: 10px; padding: 12px 0; }
.rule-row .opt-text { flex: 1 1 200px; }
.rule-row .opt-note { line-height: 1.4; }
.rule-row[data-on="true"] .opt-label { color: var(--ink); }
.rule-row[data-on="false"] .opt-label { color: var(--ink-2); }
.setup .rule-row .segment,
.setup .rule-sub .segment {
  display: inline-flex;
  width: auto;
  flex: none;
  max-width: 100%;
  margin-left: auto;
}
.setup .rule-row .seg-btn,
.setup .rule-sub .seg-btn {
  flex: none;
  min-width: 42px;
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
}
.rule-row .switch { margin-left: auto; }
/* the sub-option hangs off its rule: no rule between them, a step in */
.rule-sub {
  padding: 0 0 12px 18px;
  margin-top: -6px;
  border-top: none !important;
  flex-wrap: wrap;
  row-gap: 8px;
}
.rule-sub .opt-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.rule-sub .seg-btn[disabled] { cursor: default; }
.rule-sub + .rule-row { border-top: 1px solid var(--line); }
#field-rules[hidden] { display: none; }
#field-rules .field-label[hidden] { display: none; }
/* the sheet: the stand-up call sits with the heading */
.now-rules-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.now-rules-head .field-label { margin: 0; }
.now-rules-head .quick-btn { flex: none; white-space: nowrap; }
.now-rules-head .quick-btn[hidden] { display: none; }
#now-rules .field-help { margin-top: 2px; }

@media (max-width: 560px) {
  .rule-row { padding: 11px 0; }
  .rule-row .opt-text { flex-basis: 100%; }
  .rule-row .opt-text:has(+ .switch) { flex-basis: 0; flex-grow: 1; }
  /* the control takes the whole line under its words, with no hole to its
     left, and its buttons share the width */
  .setup .rule-row .segment { display: flex; width: 100%; margin-left: 0; }
  .setup .rule-row .seg-btn { flex: 1 1 0; min-width: 0; padding: 0 6px; }
  /* the sub-option: its word on the left, the control filling the line */
  .rule-sub { flex-wrap: nowrap; align-items: center; gap: 12px; padding-left: 12px; }
  .rule-sub .opt-text { flex: none; }
  .setup .rule-sub .segment { display: flex; flex: 1 1 auto; width: auto; margin-left: auto; }
  .setup .rule-sub .seg-btn { flex: 1 1 0; min-width: 0; padding: 0 6px; }
  /* the dealer's-choice games are many: they wrap rather than squeeze */
  .setup .rule-sub .segment[role="group"] { flex-wrap: wrap; row-gap: 4px; }
  .setup .rule-sub .segment[role="group"] .seg-btn { flex: 1 1 auto; min-width: 58px; }
}

/* ── The table sheet: a hub and one screen per thing ───────────────
   The hub is six rows that say what the table is set to. A row opens
   its own screen, with room for names and a line of explanation; Back
   returns to the hub, Done closes from anywhere. */
.now-panel { gap: 14px; }
.now-head { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.now-panel:not([data-screen="hub"]) .now-hub { display: none; }
.now-back {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 0 6px; padding: 0;
  border: 0; background: none;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2);
  cursor: pointer;
}
.now-back[hidden] { display: none; }
.now-back span { font-size: 20px; line-height: 1; }
.now-hub { display: flex; flex-direction: column; }
.now-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 52px; padding: 10px 0;
  border: 0; border-top: 1px solid var(--line); background: none;
  font: inherit; text-align: left; cursor: pointer;
}
.now-item:first-child { border-top: 0; }
.now-item[hidden] { display: none; }
.now-item-label { flex: none; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.2px; color: var(--ink); }
.now-item-value {
  flex: 1 1 0; width: 0; min-width: 0;
  font-size: 14px; font-weight: 500; color: var(--ink-3); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.now-item .fold-chevron { transform: rotate(-45deg); margin: 0 4px 0 0; }
@media (hover: hover) { .now-item:hover .now-item-label { color: var(--accent); } }
.now-screen { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.now-screen[hidden] { display: none; }
.now-screen .tiles { grid-template-columns: 1fr; }
.now-screen .field-help { margin: 0; }
.now-rules-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.now-rules-head .field-help { margin: 0; }
.now-panel:not([data-screen="hub"]) .setup-note { display: none; }
.fold-chevron {
  flex: none; width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
}
.opts.opts-flat, .pane .opts.opts-flat, .now-screen .opts.opts-flat {
  flex: none; height: auto; min-height: 0; max-height: none;
  overflow: visible; mask-image: none; -webkit-mask-image: none;
}
/* the record row: the id and its buttons drop under the label on a phone */
.opt:has(.opt-id) { flex-wrap: wrap; }
.opt:has(.opt-id) .opt-id { flex: 1 1 100%; justify-content: flex-start; }

/* ── The panel, three screens ───────────────────────────────────── */
.pane-scroll { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.pane-section {
  margin: 10px 0 0;
  font-family: var(--font-text); font-size: 11px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase; color: var(--ink-3);
}

/* ── A game of your own ──────────────────────────────────────────────
   One screen: a game you know to start from, the name, then every knob
   that kind of game has. Rows come and go with the shape — a draw game
   has no board to pitch a card after — so the screen stays short. */
.custom-box { margin-top: 10px; }
.custom-box[hidden] { display: none; }
.custom { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 10px; border-radius: var(--r-lg); background: var(--surface); }
.custom-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; align-items: center; min-width: 0; }
.custom-row[hidden] { display: none; }
.custom-row .field-label { margin: 0; }
.custom-row .segment { width: 100%; min-width: 0; }
.custom-row .segment .seg-btn { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; }
.custom-name { height: 40px; }
.custom-help { margin: 2px 0 0; }
/* in the setup the game's line is the question's subtitle, always in
   view above the knobs; in the table sheet it lives under them */
#pick-custom .custom-help { display: none; }
/* the wrapping rows: the games to start from, and a mix's list */
.custom-row-wide { align-items: start; }
.custom-row-wide .field-label { padding-top: 7px; }
.custom-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.custom-chip {
  padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--bg); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  cursor: pointer; white-space: nowrap;
}
.custom-chip:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); }
.custom-chip[data-on="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.custom-chip:disabled { opacity: .55; cursor: default; }
/* the start row is a shortcut, not a setting: quieter when one is lit */
.custom-starts .custom-chip[data-on="true"] { background: var(--surface-2, var(--bg)); color: var(--ink); border-color: var(--accent); }
.rule-text-row { flex-wrap: wrap; }
.rule-text-row .rule-text { flex: 1 1 100%; height: 40px; }
@media (max-width: 420px) {
  .custom-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
}

/* the quiet second way in on the home screen */
.home-link {
  align-self: center; margin-top: 2px; padding: 8px 12px;
  border: 0; background: none;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2, var(--line));
  cursor: pointer;
}
.home-link:hover { color: var(--ink); }
.setup[data-screen]:not([data-screen="home"]) .home-link { display: none; }
/* ── The games as a list ────────────────────────────────────────────
   One row a game, the fan of backs on the left, the name and its line
   beside it. Eight fit a phone with the search box above them. */
.game-search { height: 42px; margin-bottom: 8px; }
.tiles.game-list { grid-template-columns: 1fr; gap: 6px; }
.game-row {
  flex-direction: row; align-items: center; gap: 12px;
  min-height: 58px; padding: 9px 12px 9px 10px;
}
.game-row[hidden] { display: none; }
.game-row .tile-cards { flex: none; width: 54px; height: 26px; }
.game-row .mini-card.is-up { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.game-row .game-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.game-row .tile-blurb {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.game-row .game-plus {
  display: grid; place-items: center; width: 54px; height: 26px;
  font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink-3);
}

/* New game: the deal as it will be, in the hub's rows, checked before it
   is dealt. A row opens the step that sets it. */
.setup-check { border: 1px solid var(--line-2); border-radius: 14px; padding: 0 14px; margin-bottom: 8px; }
.setup-check[hidden] { display: none; }
/* sixteen pixels keeps iOS from zooming the page when the box is focused */
.game-search { font-size: 16px; }

/* ── the game list's two halves ──────────────────────────────────── */
.game-section {
  padding: 12px 2px 4px; font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3);
}
.game-section:first-child { padding-top: 2px; }
.game-section[hidden], .game-empty[hidden] { display: none; }
.game-empty { padding: 8px 2px 4px; font-size: 13px; color: var(--ink-3); }
/* a published game's fan is the community's colour, so the two halves read apart */
.game-row-community .mini-card { background: linear-gradient(160deg, #f6efe4, #e9dcc7); }

/* publishing, under the builder */
.custom-publish { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--line); }
.custom-publish[hidden], .custom-ask[hidden] { display: none; }
.custom-publish-note { font-size: 12px; line-height: 1.35; color: var(--ink-3); flex: 1 1 160px; }
.custom-publish[data-state="done"] .custom-publish-note { color: var(--accent); font-weight: 600; }

.ask[hidden] { display: none; }

/* ── The game picker: two tabs, a search, a grid of tiles ─────────── */
.game-picker { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.game-tabs { display: flex; gap: 4px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: var(--ring); }
.game-tab {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer;
  font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: -.1px; color: var(--ink-2);
  transition: background-color var(--med) var(--ease), color var(--med) var(--ease);
}
.game-tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--lift); }
/* how many are there: a quiet number, not an alert */
.game-tab-count { font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 7px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.game-tab[aria-selected="true"] .game-tab-count { background: var(--surface-2); }
.game-tab-count[hidden] { display: none; }
.game-picker .game-search { margin: 0; }   /* the rest of its look is at the end of the file */
.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.game-grid[hidden] { display: none; }
@media (min-width: 640px) { .setup .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .setup .game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.game-tile { gap: 4px; padding: 12px 12px 12px; min-height: 124px; min-width: 0; }
.game-tile[hidden] { display: none; }
.game-name { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -.2px; color: var(--ink); line-height: 1.15; }
.game-meta { font-size: 12px; line-height: 1.3; color: var(--ink-3); }
.game-tile[data-on="true"] .game-meta { color: var(--ink-2); }
/* the fan: cards overlap and lean a touch more the further from the middle */
.game-art { display: flex; align-items: flex-end; height: 44px; margin: 2px 0 6px 4px; }
.art-card {
  position: relative; display: grid; place-items: center; align-content: center;
  width: 27px; height: 37px; border-radius: 4px; background: #fff; color: #1c1c1c;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(0, 0, 0, .08);
  font-family: var(--font-display); font-weight: 700; font-style: normal; line-height: 1;
  transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 7deg)) translateY(calc((var(--i) - (var(--n) - 1) / 2) * (var(--i) - (var(--n) - 1) / 2) * 1.2px));
  transform-origin: 50% 120%;
}
.art-card + .art-card { margin-left: -9px; }
.art-card b { font-size: 11px; letter-spacing: -.4px; }
.art-card small { font-size: 10px; margin-top: -1px; }
.art-card[data-red="true"] { color: #b3122e; }
.art-card.is-back { background: repeating-linear-gradient(45deg, #2a5f8a 0 3px, #234f74 3px 6px); box-shadow: 0 1px 2px rgba(0, 0, 0, .28), inset 0 0 0 2px #fff; }
.game-tile-community .art-card { background: linear-gradient(160deg, #fbf6ec, #efe4d0); }
.game-art-plus { align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 0; border-radius: 50%; background: var(--surface-3); font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--ink-2); }
.game-empty { grid-column: 1 / -1; margin: 6px 2px; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.game-empty[hidden] { display: none; }
@media (max-width: 360px) { .game-tile { padding: 10px; min-height: 116px; } .game-name { font-size: 14px; } }

/* on its own step the question is the heading; the field label is noise */
.setup:not([data-screen="lobby"]) #field-game > .field-label { display: none; }

/* the search box carries its weight: as tall as a tile row, a magnifier
   on the left, and the words big enough to tap into */
.game-picker .game-search {
  /* .input carries flex: 1 for the rows it usually sits in; in this column
     that would let the box collapse to its text, so it keeps its height */
  flex: none; width: 100%; box-sizing: border-box;
  height: 50px; min-height: 50px; padding-left: 44px; font-size: 16px; font-weight: 600;
  background-color: var(--surface-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e6e' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 20px 20px; background-position: 16px 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.game-picker .game-search:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); outline: 0; }
.game-picker .game-search::placeholder { font-weight: 500; }

/* ── the recap, restyled ─────────────────────────────────────────── */
/* the card's top is the felt you play on: the same rules that dress the
   table dress this, with a thinner rail */
.recap-felt {
  --rail-w: 8px;
  overflow: hidden; isolation: isolate;
  box-shadow: inset 0 0 0 var(--rail-w) #1a2621, inset 0 0 0 calc(var(--rail-w) + 1px) rgba(255, 255, 255, .08), var(--lift);
  padding: 22px 24px 20px;
}
.recap-felt > * { position: relative; z-index: 1; }
.recap-felt > .recap-grain { z-index: 0; border-radius: calc(var(--r-xl) - 7px); }
.recap-felt .recap-title, .recap-felt .recap-sub, .recap-felt .recap-you, .recap-felt .recap-brand, .recap-felt .recap-when { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.recap-felt .recap-chart { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
/* your night, in one block on the felt */
.recap-you {
  display: grid; grid-template-columns: auto auto; column-gap: 12px; row-gap: 2px; align-items: center;
  width: fit-content; max-width: 100%; margin-top: 14px; padding: 10px 14px 10px 10px;
  border-radius: var(--r-lg); background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  color: #fff;
}
.recap-you[hidden] { display: none; }
.recap-you .avatar { grid-row: 1 / 3; width: 36px; height: 36px; --size: 36px; font-size: 12px; background: var(--tone, #f2f2f2); color: #333; }
.recap-you .avatar.is-mark svg { width: 60%; height: 60%; fill: #fff; }
.recap-you-net { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -1.2px; line-height: 1; }
.recap-you-net[data-tone="up"] { color: #ffd87a; }
.recap-you-net[data-tone="down"] { color: #ffb8b8; }
.recap-you-line { font-size: 12px; line-height: 1.3; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recap-you-line b { font-weight: 700; opacity: 1; }
@media (max-width: 560px) {
  .recap-felt { padding: 18px 18px 16px; }
  .recap-you-net { font-size: 26px; }
}

/* Dealer's choice offers many games: loose chips on their own line, not
   one long pill, on every screen size */
.rule-sub:has(.segment[role="group"]) { flex-wrap: wrap; row-gap: 8px; }
.rule-sub:has(.segment[role="group"]) .opt-text { flex-basis: 100%; }
.setup .rule-sub .segment[role="group"] {
  display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-left: 0; padding: 0;
  background: none; box-shadow: none; border-radius: 0;
}
.setup .rule-sub .segment[role="group"] .seg-btn {
  flex: 0 0 auto; min-width: 0; height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--surface-2); box-shadow: var(--ring);
}
.setup .rule-sub .segment[role="group"] .seg-btn[data-on="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }

/* the two links under the home choices sit side by side */
.home-links { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; }
.home-links .home-link[hidden] { display: none; }
.setup[data-screen]:not([data-screen="home"]) .home-links { display: none; }