/* Black Peter: the look of an antique card-game box (docs/ART_DIRECTION.md).
   Dark wood, green baize, aged ivory paper, burgundy, muted brass; classical serif type; restrained motion.
   No external fonts or images beyond the card art in /art/. Colours match art/source/palette.js. */

:root {
  --serif: 'Palatino Linotype', 'Book Antiqua', Palatino, 'URW Palladio L', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --paper: #f2e8d0;
  --paper-light: #f8f1df;
  --paper-2: #e8dbbb;
  --paper-edge: #cdb78c;
  --ink: #2a1f18;
  --ink-soft: #5b4a3b;
  --burgundy: #6d2430;
  --burgundy-2: #84303d;
  --gold: #b8924a;
  --gold-2: #d8bd7f;
  --brass: linear-gradient(180deg, #e2c98d, #b8924a 55%, #8f6c33);
  --felt: #1f4a34;
  --felt-light: #2b5e44;
  --felt-dark: #12301f;
  --wood: #4a2b18;
  --wood-dark: #21130a;
  --danger: #8b2e2e;
  --ok: #3d6b3a;
  --shadow: 0 10px 28px rgba(15, 8, 4, 0.5);
  --card-shadow: 0 1px 1px rgba(20, 10, 5, 0.35), 0 4px 10px rgba(20, 10, 5, 0.28);
  --card-ratio: 5 / 7;
  /* Card sizes follow the width AND the height of the window, so the table keeps its room on short screens. */
  --hand-card: clamp(78px, min(9.4vw, 13.6vh), 128px);
  --tray-card: clamp(54px, min(5.6vw, 8vh), 82px);
  --mini-card: 24px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

/* The room: an Edwardian card room by lamplight. Damask-striped wallpaper above a brass-capped chair rail, dark
   panelled wainscot below, a warm pool of light from the lamp over the table and shadowy corners. All gradients and
   one tiny inline pattern (no image files, nothing animated), drawn once. */
body {
  --rail: 60%;
  font-family: var(--serif);
  color: var(--ink);
  background-color: #1b0f09;
  background-image:
    /* the lamp over the table, and the dark corners of the room */
    radial-gradient(ellipse 62% 58% at 50% 2%, rgba(255, 199, 126, 0.2), rgba(255, 199, 126, 0.06) 55%, transparent 75%),
    radial-gradient(ellipse 125% 95% at 50% 42%, transparent 52%, rgba(6, 3, 1, 0.62) 100%),
    /* chair rail: a brass edge on a wooden moulding */
    linear-gradient(180deg, transparent calc(var(--rail) - 9px), #5a3520 calc(var(--rail) - 9px), #3a2010 calc(var(--rail) - 3px), rgba(216, 189, 127, 0.45) calc(var(--rail) - 3px), rgba(216, 189, 127, 0.45) calc(var(--rail) - 2px), rgba(0, 0, 0, 0.55) calc(var(--rail) - 2px), transparent var(--rail)),
    /* wainscot panels below the rail: stiles with a lit edge, rails at top and bottom */
    linear-gradient(180deg, transparent var(--rail), rgba(0, 0, 0, 0.35) calc(var(--rail) + 16px), transparent calc(var(--rail) + 18px), transparent calc(100% - 26px), rgba(0, 0, 0, 0.4) calc(100% - 24px)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0 3px, rgba(216, 189, 127, 0.07) 3px 4px, transparent 4px 172px, rgba(255, 220, 170, 0.035) 172px 176px),
    linear-gradient(180deg, transparent var(--rail), #3b2213 var(--rail), #2c180c 75%, #1c0f07),
    /* wallpaper above the rail: a faint damask on deep oxblood stripes */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='84' viewBox='0 0 60 84'%3E%3Cg fill='none' stroke='%23d8bd7f' stroke-opacity='.075' stroke-width='1.1'%3E%3Cpath d='M30 8c9 11 9 19 0 30-9-11-9-19 0-30z'/%3E%3Cpath d='M30 38c11 8 12 18 0 32-12-14-11-24 0-32z'/%3E%3Cpath d='M30 38c-6-4-12-4-18 1m18-1c6-4 12-4 18 1'/%3E%3C/g%3E%3Ccircle cx='30' cy='38' r='1.8' fill='%23d8bd7f' fill-opacity='.09'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.016) 0 30px, transparent 30px 60px),
    linear-gradient(180deg, #3a1c17, #2b1410 var(--rail));
  min-height: 100dvh;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.noscript { color: var(--paper); text-align: center; padding: 2rem; }
.muted { color: var(--ink-soft); }
:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; }

/* --- Paper boxes: ivory stock with a printed double rule and small corner diamonds ------------------------------ */

.screen { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 1.5rem 1rem; }

.box {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 35%, var(--paper-light), var(--paper) 58%, var(--paper-2));
  border: 1px solid var(--paper-edge);
  border-radius: 5px;
  box-shadow: var(--shadow), inset 0 0 50px rgba(122, 88, 40, 0.16);
  padding: 2rem clamp(1.1rem, 4vw, 2.4rem);
  width: min(100%, 34rem);
}
.box::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(42, 31, 24, 0.55);
  outline: 1px solid rgba(109, 36, 48, 0.35);
  outline-offset: 3px;
  border-radius: 3px;
  pointer-events: none;
}
.box::after {
  /* a little diamond in the middle of the top rule, as on the cards */
  content: '';
  position: absolute;
  left: 50%;
  top: 4px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--burgundy);
  transform: rotate(45deg);
  opacity: 0.7;
  pointer-events: none;
}
.box h2 { font-weight: normal; font-variant: small-caps; letter-spacing: 0.06em; font-size: 1.5rem; margin: 0.5rem 0 0.75rem; color: var(--burgundy); text-align: center; }
.box h3, .section-title { font-weight: normal; font-variant: small-caps; letter-spacing: 0.08em; font-size: 1.1rem; margin: 1.4rem 0 0.5rem; color: var(--ink-soft); }
.box p { line-height: 1.5; }
.box--form h2 + .muted { text-align: center; }
.box--loading { text-align: center; }
.box--dialog { width: min(100%, 30rem); }

/* --- Title ----------------------------------------------------------------------------------------------------- */

.title-block { text-align: center; }
.title {
  margin: 0;
  font-size: clamp(2.6rem, 9vw, 4.2rem);
  font-weight: normal;
  font-variant: small-caps;
  letter-spacing: 0.07em;
  line-height: 1;
  color: var(--burgundy);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(42, 31, 24, 0.12);
}
.title-cat { width: 50px; height: 50px; margin: 0 auto 0.2rem; }
.title-cat svg { width: 100%; height: 100%; }
.title-block--small .title { font-size: 2rem; }
.subtitle { margin: 0.5rem auto 0; font-style: italic; color: var(--ink-soft); max-width: 24rem; }
.ornament { color: var(--gold); width: 220px; max-width: 70%; margin: 0.45rem auto; }
.ornament svg { display: block; width: 100%; height: 18px; }

/* --- Buttons and forms ----------------------------------------------------------------------------------------- */

.btn {
  font: inherit;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  border-radius: 3px;
  padding: 0.65rem 1.4rem;
  min-height: 44px;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.btn:disabled { cursor: not-allowed; opacity: 0.55; }
.btn--primary {
  color: var(--paper-light);
  background: linear-gradient(180deg, var(--burgundy-2), var(--burgundy));
  border: 1px solid #3f1219;
  box-shadow: inset 0 0 0 1px rgba(216, 189, 127, 0.55), inset 0 0 0 3px var(--burgundy), inset 0 0 0 4px rgba(216, 189, 127, 0.35), 0 3px 8px rgba(0, 0, 0, 0.3);
  font-variant: small-caps;
}
.btn--primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(226, 201, 141, 0.8), inset 0 0 0 3px var(--burgundy), inset 0 0 0 4px rgba(216, 189, 127, 0.5), 0 5px 12px rgba(0, 0, 0, 0.35); }
.btn--secondary { color: var(--ink); background: var(--paper-light); border: 1px solid var(--ink-soft); font-variant: small-caps; box-shadow: inset 0 0 0 3px var(--paper-light), inset 0 0 0 4px rgba(91, 74, 59, 0.3); }
.btn--secondary:not(:disabled):hover { background: #fffaf0; }
.btn--danger { color: var(--paper); background: var(--danger); border: 1px solid #4d1414; padding: 0.4rem 1rem; min-height: 40px; box-shadow: inset 0 0 0 1px rgba(216, 189, 127, 0.5); }
.btn--link { background: none; border: none; color: var(--burgundy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; padding: 0.5rem 0.6rem; }
.btn--tool { font-size: 0.92rem; padding: 0.35rem 0.85rem; min-height: 40px; background: var(--paper); color: var(--ink); border: 1px solid #8f6c33; font-variant: small-caps; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.btn--tool:not(:disabled):hover { background: var(--paper-light); }
.btn--tool:disabled { background: #b9a888; color: #5b4a3b; opacity: 0.7; }
.is-busy { opacity: 0.75; }

.form { display: grid; gap: 0.9rem; margin-top: 1rem; }
.field { display: grid; gap: 0.3rem; }
.field-label { font-variant: small-caps; letter-spacing: 0.05em; color: var(--ink-soft); }
input {
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  background: #fffbf2;
  border: 1px solid var(--paper-edge);
  border-radius: 3px;
  padding: 0.6rem 0.75rem;
  min-height: 44px;
  width: 100%;
  box-shadow: inset 0 1px 2px rgba(42, 31, 24, 0.12);
}
input:focus { border-color: var(--gold); outline: 2px solid rgba(184, 146, 74, 0.5); outline-offset: 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: center; margin-top: 0.6rem; }
.form-error { color: var(--danger); margin: 0; font-style: italic; text-align: center; }

/* --- Welcome: the lid of the card box -------------------------------------------------------------------------- */

.screen--home { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 1.6rem; padding-top: 2.2rem; }
.lid {
  position: relative;
  width: min(100%, 31rem);
  padding: 9.4rem 1.2rem 1.2rem;
  border-radius: 6px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 5px),
    radial-gradient(ellipse at 50% 30%, #3a6a50, var(--felt) 55%, var(--felt-dark));
  box-shadow: inset 0 0 0 2px #0e2417, inset 0 0 0 5px var(--gold), inset 0 0 0 6px #0e2417, inset 0 0 60px rgba(0, 0, 0, 0.5), var(--shadow);
}
.hero-fan { position: absolute; left: 50%; top: 1.3rem; width: 0; height: 9rem; }
.hero-card { position: absolute; bottom: 0; width: 92px; aspect-ratio: var(--card-ratio); transform-origin: 50% 120%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.hero-card img { display: block; width: 100%; height: 100%; }
.hero-card--left { left: -112px; transform: rotate(-13deg); }
.hero-card--right { left: 20px; transform: rotate(13deg); }
.hero-card--middle { left: -46px; bottom: 10px; transform: scale(1.06); z-index: 1; }
.box--welcome { width: 100%; padding-top: 1.8rem; }
.welcome-actions { display: grid; justify-items: center; gap: 0.35rem; margin: 1.4rem 0 0.4rem; }
.welcome-actions .btn { font-size: 1.2rem; padding: 0.8rem 2.4rem; }
.welcome-note { margin: 0; font-size: 0.9rem; font-style: italic; color: var(--ink-soft); }
.or-rule { display: flex; align-items: center; gap: 0.8rem; margin: 0.9rem 0 0.7rem; color: var(--ink-soft); font-style: italic; }
.or-rule::before, .or-rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(91, 74, 59, 0.45), transparent); }
.join-inline { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: end; }
.join-inline .field { min-width: 0; }
.box--rules { width: min(100%, 25rem); padding-top: 1.5rem; padding-bottom: 1.5rem; background: radial-gradient(ellipse at 50% 30%, #fbf5e6, #f1e6cb 70%, #e6d6b0); }
.rules-kicker { margin: 0; text-align: center; font-variant: small-caps; letter-spacing: 0.1em; color: var(--gold); font-size: 0.9rem; }
.box--rules h2 { margin-top: 0.1rem; }
.rules-list { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.5rem; line-height: 1.45; }
.rules-list strong { font-variant: small-caps; color: var(--burgundy); font-weight: normal; letter-spacing: 0.04em; }
.rules-tip { font-style: italic; color: var(--ink-soft); margin: 0.9rem 0 0; padding-top: 0.7rem; border-top: 1px solid rgba(91, 74, 59, 0.25); }

/* --- Lobby ----------------------------------------------------------------------------------------------------- */

.box--lobby { width: min(100%, 42rem); }
.ticket {
  position: relative;
  display: grid;
  gap: 0.6rem;
  margin: 1rem 0;
  padding: 0.9rem 1.2rem;
  background: repeating-linear-gradient(135deg, rgba(109, 36, 48, 0.035) 0 6px, transparent 6px 12px), #fbf4e2;
  border: 1px dashed rgba(109, 36, 48, 0.7);
  border-radius: 4px;
  box-shadow: inset 0 0 0 4px #fbf4e2, inset 0 0 0 5px rgba(184, 146, 74, 0.45);
}
.ticket-code { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.ticket-label { font-variant: small-caps; letter-spacing: 0.08em; color: var(--ink-soft); font-size: 0.95rem; }
.ticket-value { font-size: 1.7rem; letter-spacing: 0.14em; color: var(--burgundy); font-variant-numeric: lining-nums tabular-nums; }
.ticket-row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
.ticket-row input { font-size: 0.92rem; }

.seat-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0.55rem; counter-reset: seat; }
.seat-row {
  position: relative;
  counter-increment: seat;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'num name' 'num badges' 'num status' 'num tally';
  align-items: center;
  column-gap: 0.6rem;
  row-gap: 0.1rem;
  min-height: 4.6rem;
  padding: 0.55rem 0.7rem;
  background: linear-gradient(180deg, #fffaf0, #f4ead2);
  border: 1px solid rgba(91, 74, 59, 0.3);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(42, 31, 24, 0.15);
}
.seat-row::before { grid-area: num; content: counter(seat, upper-roman); color: var(--gold); font-size: 1.3rem; min-width: 1.7rem; text-align: center; align-self: start; font-variant: small-caps; }
.seat-row.is-you { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(184, 146, 74, 0.5), 0 1px 3px rgba(42, 31, 24, 0.2); }
.seat-row.is-away .seat-name { color: var(--ink-soft); font-style: italic; }
.seat-row--empty { background: transparent; border-style: dashed; color: var(--ink-soft); font-style: italic; box-shadow: none; }
.seat-name { grid-area: name; font-size: 1.12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-badges { grid-area: badges; display: flex; gap: 0.3rem; flex-wrap: wrap; }
.seat-badges:empty { display: none; }
.seat-status { grid-area: status; display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-style: italic; color: var(--ink-soft); }
.seat-row .tally { grid-area: tally; margin-left: 0; }
.seat-row .btn--link { grid-column: 2; justify-self: start; padding: 0.2rem 0; font-size: 0.9rem; }
.seat-list--compact { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.seat-list--compact .seat-row { min-height: 0; grid-template-areas: 'num name' 'num status' 'num badges' 'num tally'; padding: 0.4rem 0.55rem; }
.badge { font-size: 0.72rem; font-variant: small-caps; letter-spacing: 0.06em; border: 1px solid var(--ink-soft); border-radius: 999px; padding: 0 0.5rem; color: var(--ink-soft); line-height: 1.4; }
.badge--host { border-color: var(--burgundy); color: var(--burgundy); background: rgba(109, 36, 48, 0.06); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.dot--on { background: var(--ok); box-shadow: 0 0 0 2px rgba(61, 107, 58, 0.22); }
.dot--off { background: #a1876a; }
.spectators { margin: 0.7rem 0 0; font-size: 0.95rem; }
.spectators .is-away { font-style: italic; color: var(--ink-soft); }
.lobby-controls { display: grid; justify-items: center; gap: 0.6rem; margin-top: 1.3rem; text-align: center; }
.lobby-status { margin: 0; font-style: italic; color: var(--ink-soft); }
.lobby-status.is-ready { color: var(--ok); }
.lobby-controls .btn--primary { font-size: 1.15rem; padding: 0.75rem 2.2rem; }
.lobby-footer { display: flex; justify-content: center; margin-top: 0.8rem; }

.tally { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; color: var(--ink); }
.tally-paw { width: 14px; height: 14px; fill: currentColor; }
.tally-more { font-size: 0.85rem; margin-left: 2px; }

/* --- Cards ------------------------------------------------------------------------------------------------------- */

.card { position: relative; aspect-ratio: var(--card-ratio); border-radius: 5.6% / 4%; box-shadow: var(--card-shadow); background: var(--paper); flex: none; }
.card-art { display: block; width: 100%; height: 100%; border-radius: inherit; user-select: none; -webkit-user-drag: none; }
.card--back { background: var(--burgundy); }
.card--hand { width: var(--hand-card); }
.card--tray { width: var(--tray-card); }
.card--mini { width: var(--mini-card); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.card--reveal { width: clamp(132px, 32vw, 170px); }

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

.screen--table {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.45rem;
  height: 100dvh;
  padding: 0.6rem clamp(0.4rem, 2vw, 1.4rem) max(0.6rem, env(safe-area-inset-bottom));
}
.screen--table > * { flex: none; }
.screen--table > .table-area { flex: 1 1 auto; }
.screen--table > .draw-tray, .screen--table > .hand, .screen--table > .banner--paused { align-self: center; }
.table-bar { display: flex; align-items: center; gap: 0.9rem; color: var(--paper); padding: 0 0.4rem; flex-wrap: wrap; }
.table-title { font-variant: small-caps; letter-spacing: 0.1em; color: var(--gold-2); font-size: 1.2rem; }
.table-round { font-style: italic; color: var(--paper-2); }
.table-pairs { font-size: 0.85rem; font-variant: small-caps; letter-spacing: 0.06em; color: var(--paper-2); opacity: 0.85; }
.table-bar .badge { color: var(--paper-2); border-color: var(--paper-2); }
.table-bar .btn--link { color: var(--gold-2); margin-left: auto; }

.turn-line {
  margin: 0 auto;
  text-align: center;
  color: var(--gold-2);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-style: italic;
  min-height: 1.5em;
  padding: 0.05rem 1.6rem;
  background: linear-gradient(90deg, transparent, rgba(184, 146, 74, 0.16) 20%, rgba(184, 146, 74, 0.16) 80%, transparent);
}
.turn-line:empty { display: none; }
.turn-line.is-you { color: #fff3cf; }

.table-area { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 22px; }
.felt {
  position: relative;
  width: min(100%, 1000px);
  height: 100%;
  min-height: 260px;
  max-height: 640px;
  border-radius: 48% / 44%;
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(255, 224, 160, 0.11), transparent 70%),
    repeating-radial-gradient(circle at 30% 40%, rgba(0, 0, 0, 0.03) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, var(--felt-light), var(--felt) 55%, var(--felt-dark));
  box-shadow:
    inset 0 0 0 2px rgba(184, 146, 74, 0.45),
    inset 0 0 0 5px rgba(10, 20, 12, 0.35),
    inset 0 5px 42px rgba(0, 0, 0, 0.62),
    0 0 0 3px #24120a,
    0 0 0 4px rgba(216, 189, 127, 0.55);
}
/* The mahogany rim of the table, lit from above, with its shadow on the floor. */
.felt::before {
  content: '';
  position: absolute;
  inset: -20px;
  z-index: -1;
  border-radius: 49% / 46%;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 214, 160, 0.22), transparent 70%),
    repeating-linear-gradient(97deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 9px, rgba(255, 220, 170, 0.035) 9px 10px, transparent 10px 17px),
    linear-gradient(180deg, #6e3d21, #4a2512 55%, #2e160a);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 170, 0.28),
    inset 0 -8px 14px rgba(0, 0, 0, 0.5),
    0 0 0 1px #160a04,
    0 26px 52px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.seat { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; z-index: 2; max-width: 34%; }
.seat-fan { position: relative; height: calc(var(--mini-card) * 1.4 + 6px); width: calc(var(--mini-card) * 3.4); }
.seat-fan .card--mini { position: absolute; left: 50%; bottom: 0; margin-left: calc(var(--mini-card) / -2); transform-origin: 50% 120%; transform: translateX(calc(var(--shift) * 100%)) rotate(var(--rot)); }
.seat--me .seat-fan { display: none; }
.plaque {
  position: relative;
  min-width: 7.6rem;
  max-width: 11rem;
  text-align: center;
  padding: 0.28rem 0.75rem 0.32rem;
  background: linear-gradient(180deg, #f8f0dc, #e8dbbb);
  border: 1px solid #8f6c33;
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45), inset 0 0 0 3px rgba(184, 146, 74, 0.5), 0 3px 7px rgba(0, 0, 0, 0.45);
  transition: box-shadow 220ms ease, transform 220ms ease;
}
.plaque-name { font-size: 1.02rem; font-variant: small-caps; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plaque-info { font-size: 0.8rem; color: var(--ink-soft); font-style: italic; }
.plaque .tally { margin: 2px auto 0; justify-content: center; }
.plaque-flag { position: absolute; left: 50%; bottom: -0.92rem; transform: translateX(-50%); white-space: nowrap; font-size: 0.72rem; font-variant: small-caps; letter-spacing: 0.06em; background: var(--brass); color: var(--ink); border: 1px solid #6e5226; border-radius: 2px; padding: 0 0.55rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.plaque-flag--target { background: linear-gradient(180deg, var(--burgundy-2), var(--burgundy)); color: var(--paper); border-color: #3f1219; }
.host-mark { color: var(--burgundy); margin-right: 0.25rem; }
.seat.is-current .plaque { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45), inset 0 0 0 3px rgba(184, 146, 74, 0.6), 0 0 0 2px var(--gold-2), 0 0 16px rgba(216, 189, 127, 0.45), 0 3px 7px rgba(0, 0, 0, 0.45); transform: translateY(-2px); }
.seat.is-target .plaque { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45), inset 0 0 0 3px rgba(184, 146, 74, 0.5), 0 0 0 2px var(--burgundy-2), 0 3px 7px rgba(0, 0, 0, 0.45); }
.seat.is-target .seat-fan { animation: target-breathe 2.6s ease-in-out infinite; }
.seat.is-out .plaque { opacity: 0.75; }
.seat.is-out .plaque-info { color: var(--ok); font-weight: bold; font-style: normal; }
.seat.is-loser .plaque-info { color: var(--burgundy); }
.seat.is-away .plaque { filter: grayscale(0.7); }
.plaque-away { color: var(--danger); font-style: normal; }
@keyframes target-breathe { 50% { transform: translateY(-3px); } }

/* The middle of the table: every pair laid down, as large as the free space allows. The space between the seats is a
   size container; --pair-w is the largest card width for which the pairs fit in it with the best number of columns
   (1–8). screens.js gives --r1…--r8 = the rows needed with that many columns (pairGridRows). A pair is 1.34 card
   widths wide (the second card overlaps the first) plus a gap: --pair-k per column; 1.4 card widths tall plus a gap
   and the tilt: --pair-m per row. */
/* On wide tables the free space is a band: below the nameplates at the top (seats at 2 to 6 players reach about 32%
   down), above your own nameplate (from about 78%), between the side seats (to about 21% from each edge). */
.table-center { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); width: 58%; height: 44%; z-index: 1; }
.discards { width: 100%; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 0.3rem; }
.discards-space { container-type: size; width: 100%; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.discards-grid {
  --pair-k: 1.5;
  --pair-m: 1.6;
  --pair-w: clamp(20px, max(
    min(100cqw / (1 * var(--pair-k)), 100cqh / (var(--r1) * var(--pair-m))),
    min(100cqw / (2 * var(--pair-k)), 100cqh / (var(--r2) * var(--pair-m))),
    min(100cqw / (3 * var(--pair-k)), 100cqh / (var(--r3) * var(--pair-m))),
    min(100cqw / (4 * var(--pair-k)), 100cqh / (var(--r4) * var(--pair-m))),
    min(100cqw / (5 * var(--pair-k)), 100cqh / (var(--r5) * var(--pair-m))),
    min(100cqw / (6 * var(--pair-k)), 100cqh / (var(--r6) * var(--pair-m))),
    min(100cqw / (7 * var(--pair-k)), 100cqh / (var(--r7) * var(--pair-m))),
    min(100cqw / (8 * var(--pair-k)), 100cqh / (var(--r8) * var(--pair-m)))), var(--pair-max));
  --pair-max: 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: calc(var(--pair-w) * 0.16);
  width: 100%;
}
.card--pair { width: var(--pair-w); box-shadow: 0 1px 1px rgba(10, 5, 2, 0.45), 0 3px 9px rgba(10, 5, 2, 0.4); }
.pair { position: relative; display: flex; transition: transform 300ms ease; }
.pair .card:first-child { transform: rotate(-3deg); }
.pair .card + .card { margin-left: calc(var(--pair-w) * -0.66); transform: rotate(3.5deg) translateY(2%); }
/* The pair laid down by the latest draw: a little larger and lit, where it will stay. */
.pair.is-new { z-index: 2; transform: scale(1.05); animation: pair-arrive 560ms cubic-bezier(.3,.7,.25,1) both; }
.pair.is-new .card { box-shadow: 0 0 0 2px var(--gold-2), 0 0 18px rgba(216, 189, 127, 0.55), 0 7px 16px rgba(0, 0, 0, 0.5); }
@keyframes pair-arrive { from { transform: scale(0.88); opacity: 0.4; } }
.reveal .card { box-shadow: 0 0 0 2px var(--burgundy-2), 0 0 18px rgba(132, 48, 61, 0.7), 0 7px 16px rgba(0, 0, 0, 0.5); }
.pair-caption {
  margin: 0;
  min-height: 1.35em;
  max-width: 100%;
  color: var(--gold-2);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  text-align: center;
  opacity: 0.85;
}
.pair-caption.is-news { color: var(--paper); font-variant: normal; letter-spacing: 0; font-style: italic; font-size: 0.95rem; opacity: 1; }

/* --- Draw tray ------------------------------------------------------------------------------------------------- */

/* Wooden panels with a brass stud in each corner (the paper boxes have printed diamonds; the wood has brass). */
.draw-tray, .hand {
  --stud: radial-gradient(circle, #f0dca4 0 1.2px, #c49a52 1.8px, #6e5226 2.8px, transparent 3.4px);
  background-repeat: no-repeat;
}
.draw-tray {
  width: min(100%, 900px);
  background-image:
    var(--stud), var(--stud), var(--stud), var(--stud),
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.1) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, rgba(62, 35, 18, 0.95), rgba(33, 19, 10, 0.96));
  background-size: 9px 9px, 9px 9px, 9px 9px, 9px 9px, auto, auto;
  background-position: 5px 5px, calc(100% - 5px) 5px, 5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), 0 0, 0 0;
  border: 1px solid rgba(184, 146, 74, 0.7);
  border-radius: 6px;
  padding: 0.3rem 0.8rem 0.45rem;
  box-shadow: inset 0 0 0 4px rgba(33, 19, 10, 0.85), inset 0 0 0 5px rgba(184, 146, 74, 0.3), inset 0 1px 0 6px rgba(255, 220, 170, 0.04), 0 8px 20px rgba(0, 0, 0, 0.45);
}
.tray-title { margin: 0; text-align: center; color: var(--gold-2); font-style: italic; font-size: 0.95rem; }
.tray-cards { display: flex; gap: clamp(4px, 1vw, 12px); justify-content: safe center; overflow-x: auto; padding: 14px 6px 6px; scroll-snap-type: x proximity; }
.tray-cards.is-crowded { gap: 0; }
.tray-cards.is-crowded .tray-card + .tray-card { margin-left: calc(var(--tray-card) * -0.3); }
.tray-card { background: none; border: none; padding: 0; cursor: pointer; border-radius: 6px; transform: translateY(var(--lift, 0)) rotate(var(--rot, 0deg)); transform-origin: 50% 110%; transition: transform 160ms ease; scroll-snap-align: center; touch-action: manipulation; }
.tray-card:not(:disabled):hover, .tray-card:focus-visible { transform: translateY(calc(var(--lift, 0px) - 9px)) rotate(var(--rot, 0deg)); z-index: 2; }
.tray-card:disabled { cursor: wait; opacity: 0.7; }

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

/* Your hand rests on the near edge of the table: polished wood, a brass-lined lip, warm light from the lamp. */
.hand {
  width: min(100%, 1100px);
  background-image:
    var(--stud), var(--stud),
    radial-gradient(ellipse 60% 120% at 50% 0%, rgba(255, 214, 160, 0.12), transparent 70%),
    repeating-linear-gradient(94deg, rgba(0, 0, 0, 0.11) 0 2px, transparent 2px 10px, rgba(255, 220, 170, 0.03) 10px 11px, transparent 11px 19px),
    linear-gradient(180deg, rgba(92, 52, 28, 0.97), rgba(52, 29, 15, 0.98) 45%, rgba(30, 17, 9, 0.98));
  background-size: 9px 9px, 9px 9px, auto, auto, auto;
  background-position: 7px 7px, calc(100% - 7px) 7px, 0 0, 0 0, 0 0;
  border: 1px solid rgba(20, 10, 4, 0.9);
  border-top: 2px solid rgba(216, 189, 127, 0.55);
  border-radius: 10px 10px 4px 4px;
  padding: 0.5rem 0.9rem 0.6rem;
  color: var(--paper);
  box-shadow: inset 0 1px 0 rgba(255, 230, 190, 0.18), inset 0 0 0 3px rgba(20, 10, 4, 0.35), inset 0 0 0 4px rgba(184, 146, 74, 0.18), 0 -2px 18px rgba(0, 0, 0, 0.4);
}
.hand-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.hand-title { font-variant: small-caps; letter-spacing: 0.08em; color: var(--gold-2); }
.hand-tools { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.hand-cards { display: flex; gap: clamp(4px, 0.7vw, 10px); overflow-x: auto; padding: 20px 8px 10px; scroll-snap-type: x proximity; justify-content: safe center; }
.hand-cards.is-crowded { gap: 0; }
.hand-cards.is-crowded .hand-card + .hand-card { margin-left: calc(var(--hand-card) * -0.24); }
.hand-cards.is-crowded .hand-card:hover, .hand-cards.is-crowded .hand-card:focus-visible, .hand-cards.is-crowded .hand-card.is-selected { z-index: 2; }
.hand-card {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 7px;
  transform: translateY(var(--lift, 0)) rotate(var(--rot, 0deg));
  transform-origin: 50% 120%;
  transition: transform 170ms ease;
  scroll-snap-align: center;
  touch-action: manipulation;
}
.hand-card:hover { transform: translateY(calc(var(--lift, 0px) - 5px)) rotate(var(--rot, 0deg)); }
.hand-card.is-selected { transform: translateY(calc(var(--lift, 0px) - 16px)) rotate(var(--rot, 0deg)); }
.hand-card.is-selected .card { box-shadow: 0 0 0 2.5px var(--gold-2), 0 10px 20px rgba(0, 0, 0, 0.5); }
.hand-card.is-new .card { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(216, 189, 127, 0.75); }
.new-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--brass); color: var(--ink); font-size: 0.7rem; font-variant: small-caps; letter-spacing: 0.08em; padding: 0 0.5rem; border-radius: 2px; border: 1px solid #6e5226; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); z-index: 1; }
.hand-hint { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--paper-2); font-style: italic; text-align: center; }
.hand--empty, .hand--spectator { text-align: center; }
.hand-safe { font-size: 1.15rem; color: var(--gold-2); font-style: italic; margin: 0.6rem 0; }
.hand--spectator p { margin: 0.4rem 0; }
.hand--spectator .muted { color: var(--paper-2); }

/* --- Banners, toasts, dialogs ----------------------------------------------------------------------------------- */

.banner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.55rem 1rem; text-align: center; border-radius: 4px; }
.banner--offline { position: fixed; top: 0; left: 0; right: 0; z-index: 50; border-radius: 0; background: var(--danger); color: var(--paper); box-shadow: var(--shadow); }
.banner--paused { background: linear-gradient(180deg, #faefcf, #efdcaa); color: var(--ink); border: 1px solid #8f6c33; width: min(100%, 900px); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4); }
.banner-note { font-style: italic; }
.spinner { width: 14px; height: 14px; border: 2px solid rgba(242, 232, 208, 0.4); border-top-color: var(--paper); border-radius: 50%; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.toast { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--paper); border: 1px solid var(--gold); padding: 0.6rem 1.1rem; border-radius: 4px; box-shadow: var(--shadow); max-width: calc(100% - 2rem); animation: toast-in 240ms ease-out both; }
.toast--error { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }

.overlay { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(18, 10, 5, 0.74); overflow-y: auto; }
.overlay--results { align-items: flex-start; padding-top: max(1rem, 4vh); }
/* The quick check before a public room is created (challenge.js): Turnstile's widget is 300 × 65 px. */
.overlay--challenge { z-index: 50; }
.box--challenge { text-align: center; }
.challenge-widget { display: flex; justify-content: center; min-height: 65px; margin: 0.75rem 0 0.25rem; }
.challenge-status { min-height: 1.5em; margin: 0.25rem 0; }

/* --- End of round ------------------------------------------------------------------------------------------------- */

.box--results { width: min(100%, 37rem); text-align: center; animation: results-in 420ms ease-out both; }
@keyframes results-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.results-round { margin: 0; font-variant: small-caps; letter-spacing: 0.12em; color: var(--ink-soft); }
.results-title { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
.results-reveal { position: relative; margin: 0.4rem auto 0.4rem; }
.reveal-flip { position: relative; width: clamp(132px, 32vw, 170px); margin: 0 auto; perspective: 900px; }
.reveal-inner { position: relative; aspect-ratio: var(--card-ratio); transform-style: preserve-3d; animation: reveal-turn 900ms 250ms cubic-bezier(.4,.1,.2,1) both; }
.reveal-side { position: absolute; inset: 0; backface-visibility: hidden; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); }
.reveal-front { transform: rotateY(180deg); }
@keyframes reveal-turn { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
.paw-trail { position: absolute; left: 0; right: 0; top: 30%; height: 70px; pointer-events: none; }
.trail-paw { position: absolute; left: var(--x); top: var(--y); width: 22px; height: 22px; fill: #211c1c; opacity: 0; transform: rotate(var(--r)); animation: paw-step 2.8s var(--d) ease-out both; }
@keyframes paw-step { 0% { opacity: 0; transform: rotate(var(--r)) scale(1.3); } 12% { opacity: 0.85; transform: rotate(var(--r)) scale(1); } 75% { opacity: 0.85; } 100% { opacity: 0.25; } }
.stamp { position: absolute; right: -22px; bottom: -10px; width: 70px; height: 70px; pointer-events: none; }
.stamp-paw { width: 100%; height: 100%; fill: #211c1c; opacity: 0.9; transform: rotate(-18deg); animation: stamp 520ms 2.05s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes stamp { from { opacity: 0; transform: rotate(-18deg) scale(2.6); } to { opacity: 0.9; transform: rotate(-18deg) scale(1); } }
.results-quip { font-style: italic; color: var(--ink-soft); margin: 0.8rem 0 0; }
.tally-table { width: 100%; border-collapse: collapse; margin: 1.1rem 0 0.2rem; }
.tally-table caption { font-variant: small-caps; letter-spacing: 0.1em; color: var(--burgundy); margin-bottom: 0.35rem; font-size: 1.05rem; }
.tally-table th, .tally-table td { padding: 0.35rem 0.5rem; border-bottom: 1px dotted rgba(91, 74, 59, 0.45); text-align: left; }
.tally-table thead th { font-weight: normal; font-variant: small-caps; color: var(--ink-soft); border-bottom: 1px solid rgba(91, 74, 59, 0.5); }
.tally-table td:nth-child(2) { text-align: center; width: 4.5rem; font-variant-numeric: lining-nums; }
.tally-table tr.is-loser th { color: var(--burgundy); }
.box--results .seat-list { text-align: left; }

/* A plain sheet of cards (used for design review screenshots). */
.contact-sheet { position: fixed; left: 0; top: 0; z-index: 100; display: flex; flex-wrap: wrap; gap: 14px; padding: 16px; background: var(--felt); width: max-content; max-width: 100vw; }
.contact-sheet img { display: block; height: auto; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45)); }
.contact-sheet .sheet-pair { display: flex; gap: 4px; padding: 6px; border: 1px solid rgba(216, 189, 127, 0.45); border-radius: 8px; }

/* --- Card flights -------------------------------------------------------------------------------------------------- */

.ghost { position: fixed; z-index: 30; pointer-events: none; perspective: 700px; }
.ghost-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.ghost-side { position: absolute; inset: 0; width: 100%; backface-visibility: hidden; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45); }
.ghost-front { transform: rotateY(180deg); }
.is-arriving { visibility: hidden; }

/* --- Phones and small windows ---------------------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .screen--home { flex-direction: column; align-items: center; }
  .box--rules { width: min(100%, 31rem); }
}

@media (max-width: 720px) {
  :root { --hand-card: 74px; --tray-card: 58px; --mini-card: 15px; }
  .screen { padding: 1rem 0.75rem; justify-content: flex-start; }
  .box { padding: 1.5rem 1.1rem; }
  .lid { padding: 8rem 0.8rem 0.8rem; }
  .hero-fan { top: 1rem; height: 7.8rem; }
  .hero-card { width: 78px; }
  .hero-card--left { left: -96px; }
  .hero-card--right { left: 18px; }
  .hero-card--middle { left: -39px; }
  .join-inline { grid-template-columns: 1fr; }
  .ticket-row { grid-template-columns: 1fr; }
  .seat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seat-row { min-height: 0; }
  .screen--table { gap: 0.35rem; padding: 0.4rem 0.3rem max(0.4rem, env(safe-area-inset-bottom)); }
  .table-bar { gap: 0.5rem; font-size: 0.9rem; }
  .table-title { font-size: 1rem; }
  .table-area { padding: 11px 9px; }
  .felt { border-radius: 42% / 30%; min-height: 230px; box-shadow: inset 0 0 0 2px rgba(184, 146, 74, 0.35), inset 0 3px 30px rgba(0, 0, 0, 0.6), 0 0 0 2px #24120a, 0 0 0 3px rgba(216, 189, 127, 0.5); }
  .felt::before { inset: -9px; border-radius: 43% / 31%; box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.25), inset 0 -4px 8px rgba(0, 0, 0, 0.5), 0 12px 26px rgba(0, 0, 0, 0.65); }
  .seat { max-width: 30%; }
  .plaque { min-width: 0; max-width: 6.6rem; padding: 0.18rem 0.4rem; }
  .plaque-name { font-size: 0.85rem; }
  .plaque-info { font-size: 0.68rem; }
  .plaque-flag { font-size: 0.62rem; bottom: -0.85rem; padding: 0 0.35rem; }
  .turn-line { font-size: 0.95rem; padding: 0 0.5rem; }
  /* Tall phone tables: a narrower, taller middle that stays clear of the nameplates on both sides. */
  .table-center { top: 50%; width: 42%; height: 56%; }
  .discards-grid { --pair-max: 64px; }
  /* Two lines kept free for "A pair! … lays down …", so the cards do not change size when it appears; the plain
     count is already in the bar above the table. */
  .pair-caption { min-height: 2.6em; line-height: 1.3; font-size: 0.8rem; }
  .pair-caption:not(.is-news) { visibility: hidden; }
  .hand { padding: 0.35rem 0.4rem 0.4rem; }
  .hand-cards { justify-content: flex-start; padding-top: 16px; gap: 0; }
  /* The cards overlap by a hair, so five of the larger cards still fit a phone without scrolling. */
  .hand-cards .hand-card + .hand-card { margin-left: -4px; }
  .hand-card, .hand-card:hover { transform: none; }
  /* On small cards the printed corner numeral is too small to read: a clear tab repeats it. */
  .hand-card::after {
    content: attr(data-numeral);
    position: absolute;
    left: 3px;
    top: 3px;
    min-width: 1.35rem;
    padding: 0 0.2rem;
    font-size: 0.78rem;
    font-weight: bold;
    line-height: 1.25rem;
    text-align: center;
    color: var(--ink);
    background: rgba(248, 241, 223, 0.94);
    border: 1px solid rgba(42, 31, 24, 0.55);
    border-radius: 3px;
    pointer-events: none;
  }
  .hand-card.is-selected { transform: translateY(-12px); }
  .hand-hint { display: none; }
  .btn--tool { padding: 0.3rem 0.6rem; font-size: 0.85rem; }
  .draw-tray { padding: 0.3rem 0.4rem 0.4rem; }
  .tray-card { transform: none; }
}

@media (max-width: 370px) {
  :root { --hand-card: 66px; --tray-card: 54px; }
  .title { font-size: 2.4rem; }
  .plaque { max-width: 5.8rem; }
  .hand-tools { gap: 0.3rem; }
  .btn--tool { padding: 0.3rem 0.5rem; }
}

/* Short desktop windows (laptops): give the table the room, keep the hand and tray compact. */
@media (min-width: 721px) and (max-height: 900px) {
  :root { --hand-card: clamp(76px, min(9vw, 12.4vh), 112px); --tray-card: clamp(50px, min(5vw, 6.8vh), 70px); }
  .hand { padding: 0.35rem 0.9rem 0.4rem; }
  .hand-cards { padding: 18px 8px 8px; }
  .hand-hint { display: none; }
  .tray-cards { padding: 10px 6px 4px; }
  .turn-line { font-size: 1.1rem; }
}

@media (max-height: 560px) and (orientation: landscape) {
  :root { --hand-card: 58px; --tray-card: 50px; --mini-card: 15px; }
  .table-bar { display: none; }
  .hand-hint { display: none; }
  .felt { min-height: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .trail-paw { opacity: 0.85; }
}