/* Layout concept: a card room. The table is drawn like a real casino table (padded leather rail,
   felt with a white betting line, chair-back seats, chips and a dealer tray) sitting on carpet.
   Around it, a calm app frame: top bar, action dock under the table, coach/chat column on the side. */
:root {
  --bg: #e8ecea;
  --surface: #ffffff;
  --surface-2: #f3f6f4;
  --fg: #15201c;
  --muted: #56645f;
  --line: #cdd8d3;
  --accent: #0b6d63;
  --accent-fg: #ffffff;
  --brass: #b9892c;
  --gold: #e9c46a;
  --good: #1f7a3f;
  --bad: #b3261e;
  --card: #fbf8f1;
  --card-ink: #1b1d22;
  --suit-red: #c0282d;
  --suit-blue: #1f5fbf;
  --suit-green: #1d7a43;
  --back-1: #233a6b;
  --back-2: #31508f;
  /* Table theme (personal preference) */
  --felt: #129383;
  --felt-hi: #22b5a2;
  --felt-lo: #0b6a5f;
  --line-on-felt: rgb(255 255 255 / .78);
  --rail-hi: #6b3f2b;
  --rail: #43261a;
  --rail-lo: #24130c;
  --carpet: #5c1517;
  --carpet-ink: rgb(222 170 80 / .16);
  --seat: #231d1a;
  --seat-2: #120e0c;
  --piping: #e7e1d7;
  --on-felt: #f2f7f5;
  --on-felt-muted: #cfe6e1;
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 10px;
  --shadow: 0 1px 2px rgb(0 0 0 / .08), 0 6px 20px rgb(0 0 0 / .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1312; --surface: #151d1b; --surface-2: #1b2522; --fg: #e5edea; --muted: #9caaa5; --line: #2b3734;
    --accent: #4cc2b3; --accent-fg: #06201d; --brass: #d8ae55; --good: #5cc283; --bad: #f08a80;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1312; --surface: #151d1b; --surface-2: #1b2522; --fg: #e5edea; --muted: #9caaa5; --line: #2b3734;
  --accent: #4cc2b3; --accent-fg: #06201d; --brass: #d8ae55; --good: #5cc283; --bad: #f08a80;
  color-scheme: dark;
}

/* Table themes */
.table-green { --felt: #1d7346; --felt-hi: #2b8f5a; --felt-lo: #12512f; --carpet: #2b2118; --carpet-ink: rgb(214 170 90 / .12); }
.table-blue { --felt: #1c4f7c; --felt-hi: #2b6aa0; --felt-lo: #12355a; --carpet: #16171f; --carpet-ink: rgb(150 170 220 / .10); }
.table-burgundy { --felt: #7a2333; --felt-hi: #983244; --felt-lo: #561522; --carpet: #1d1714; --carpet-ink: rgb(214 170 90 / .12); }

/* Personal card preferences (only change this device's view) */
.style-cb { --suit-red: #d55e00; --suit-blue: #0072b2; --suit-green: #009e73; }
.back-crimson { --back-1: #6b2330; --back-2: #8f3143; }
.back-forest { --back-1: #234d33; --back-2: #2f6a45; }

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* "hidden" must win over display: grid/flex below */
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  padding-inline: 16px;
}
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; line-height: 1.15; }
p { margin: 0; }

.app { max-width: 1320px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; padding-block: 10px 16px; gap: 12px; }

/* ---------- Top bar ---------- */
.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.brand { display: flex; align-items: baseline; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.brand .name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.brand .tag { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.toolbar { display: flex; flex-wrap: wrap; gap: 6px; }

.btn {
  border: 1px solid var(--line); background: var(--surface); border-radius: 8px;
  padding: .5rem .85rem; cursor: pointer; min-height: 44px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn.gold { background: linear-gradient(#f0d48a, #d7a948); color: #2b1d05; border-color: #b48a2c; }
.btn.ghost { background: transparent; }
.btn.small { min-height: 36px; padding: .3rem .65rem; font-size: .9rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.linkish { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font-size: inherit; font-weight: inherit; }

/* ---------- Home ---------- */
.home { display: grid; gap: 18px; padding-block: 8px 24px; }
.home h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.015em; }
.home .lead { color: var(--muted); max-width: 60ch; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.tile {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); min-width: 0;
}
.tile:hover { border-color: var(--accent); }
.tile h3 { font-size: 1.2rem; }
.tile p { color: var(--muted); font-size: .95rem; }
.tile .go { font-weight: 700; color: var(--accent); }
.tile .art {
  height: 92px; border-radius: 12px; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, var(--felt-hi), var(--felt) 55%, var(--felt-lo));
  box-shadow: inset 0 0 0 5px var(--rail), inset 0 0 0 7px var(--rail-lo);
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.tile .art .card { --card-w: 2.3rem; }
.tile .art .chip { position: static; width: 1.6rem; height: 1.6rem; }
.tile.continue { border-color: var(--brass); }
.home .note { font-size: .9rem; color: var(--muted); }

/* ---------- Game screen ---------- */
.main { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
.main.no-side { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 960px) { .main { grid-template-columns: minmax(0, 1fr); } }
.table-wrap { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* The room: carpet around the table */
.stage {
  container-type: inline-size;
  position: relative; width: 100%; aspect-ratio: 16 / 9.4; max-width: 100%;
  border-radius: 18px; overflow: hidden;
  background-color: var(--carpet);
  background-image:
    radial-gradient(circle at 25% 25%, var(--carpet-ink) 0 7%, transparent 8%),
    radial-gradient(circle at 75% 75%, var(--carpet-ink) 0 7%, transparent 8%),
    repeating-conic-gradient(from 45deg, rgb(0 0 0 / .16) 0 25%, transparent 0 50%);
  background-size: 56px 56px, 56px 56px, 28px 28px;
  box-shadow: inset 0 0 80px rgb(0 0 0 / .55);
  color: var(--on-felt);
  font-size: clamp(10px, 1.42cqw, 15px);
  --seat-card: 3.5cqw; --board-card: 6.2cqw; --me-card: 6.4cqw;
}
.stage.narrow { aspect-ratio: 3 / 4.15; font-size: clamp(10px, 3.2cqw, 14px); --seat-card: 6.6cqw; --board-card: 12.4cqw; --me-card: 12cqw; }
.pref-large .stage { --seat-card: 4.3cqw; --board-card: 7.2cqw; --me-card: 7.6cqw; }
.pref-large .stage.narrow { --seat-card: 8cqw; --board-card: 14.2cqw; --me-card: 14.5cqw; }
.table-layer { position: absolute; inset: 0; }
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 20; }

/* Padded leather rail and felt */
.rail {
  position: absolute; left: 7%; right: 7%; top: 12%; bottom: 17%;
  border-radius: 999px; padding: 2.1cqw;
  background: linear-gradient(170deg, var(--rail-hi), var(--rail) 45%, var(--rail-lo));
  box-shadow: 0 1.6cqw 3cqw rgb(0 0 0 / .55), inset 0 .3cqw .4cqw rgb(255 255 255 / .18), inset 0 -.4cqw .8cqw rgb(0 0 0 / .45);
}
.stage.narrow .rail { left: 5%; right: 5%; top: 15%; bottom: 17%; padding: 3.6cqw; }
.rail::after { content: ""; position: absolute; inset: .9cqw; border-radius: 999px; border: 1px dashed rgb(255 255 255 / .16); pointer-events: none; }
.felt {
  position: relative; width: 100%; height: 100%; border-radius: 999px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, var(--felt-hi) 0%, var(--felt) 55%, var(--felt-lo) 100%);
  box-shadow: inset 0 .8cqw 2.2cqw rgb(0 0 0 / .45), inset 0 0 0 .25cqw rgb(0 0 0 / .25);
}
.felt::before { /* the white betting line */
  content: ""; position: absolute; inset: 16% 11%; border-radius: 999px; border: .28cqw solid var(--line-on-felt);
}
.stage.narrow .felt::before { inset: 9% 13%; border-width: .55cqw; }
.felt .logo {
  position: absolute; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-weight: 800;
  font-size: 1.5cqw; letter-spacing: .02em; color: rgb(255 255 255 / .2); white-space: nowrap; font-style: italic;
}
.stage.narrow .felt .logo { display: none; }

/* Anything placed on the table by coordinates */
.at { position: absolute; transform: translate(-50%, -50%); }

/* Seats look like chair backs with white piping, as in a card room */
.seat {
  width: 15.5cqw; min-width: 0; z-index: 3;
  background: linear-gradient(180deg, var(--seat), var(--seat-2));
  border: .3cqw solid var(--piping); border-radius: 2.4cqw 2.4cqw 1.2cqw 1.2cqw;
  padding: .7cqw .9cqw; display: grid; gap: .35cqw; color: #f4f1ec;
  box-shadow: 0 .8cqw 1.6cqw rgb(0 0 0 / .45);
  transition: box-shadow .25s, border-color .25s, opacity .25s;
}
.stage.narrow .wide-only, .stage:not(.narrow) .narrow-only { display: none; }
.stage.narrow .seat { width: 23.5cqw; padding: 1.2cqw 1.4cqw; border-width: .55cqw; border-radius: 4cqw 4cqw 2cqw 2cqw; gap: .6cqw; }
.seat.acting { border-color: var(--gold); box-shadow: 0 0 0 .5cqw rgb(233 196 106 / .45), 0 .8cqw 1.6cqw rgb(0 0 0 / .45); }
.seat.folded, .seat.out { opacity: .5; }
.seat.winner { border-color: var(--gold); box-shadow: 0 0 0 .6cqw rgb(233 196 106 / .7), 0 0 3cqw rgb(233 196 106 / .55); }
.seat .row { display: flex; align-items: center; justify-content: space-between; gap: .5em; min-width: 0; }
.seat .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.seat .stackline { font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: .35em; }
.seat .stackline .chip { width: 1em; height: 1em; position: static; }
.seat .sub { font-size: .78em; color: #c9c3ba; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1.2em; }
.seat .cards { display: flex; gap: .4cqw; min-height: calc(var(--seat-card) * 1.4); }
.seat .cards .card { --card-w: var(--seat-card); }
.seat .tagline { font-size: .7em; text-transform: uppercase; letter-spacing: .1em; color: #b8b0a5; }
.badge { font-size: .68em; font-weight: 800; border-radius: 999px; padding: .05em .55em; background: var(--gold); color: #2b1d05; white-space: nowrap; }
.timer { height: .45cqw; min-height: 3px; border-radius: 99px; background: rgb(255 255 255 / .15); overflow: hidden; }
.timer i { display: block; height: 100%; background: var(--gold); transform-origin: left; }
.timer.low i { background: #f08a80; }

/* Your seat (bottom center) */
.me { width: 36cqw; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1.2cqw; }
.stage.narrow .me { width: 84cqw; column-gap: 2.5cqw; }
.me .cards { min-height: calc(var(--me-card) * 1.4); }
.me .cards .card { --card-w: var(--me-card); }
.me .info { display: grid; gap: .3cqw; min-width: 0; }
.odds { display: grid; gap: .25em; font-size: .92em; }
.odds .bar { height: .6em; border-radius: 99px; background: rgb(255 255 255 / .15); overflow: hidden; }
.odds .fill { height: 100%; background: var(--gold); width: 0; transition: width .4s ease; }
.odds .note { font-size: .82em; color: #c9c3ba; }

/* Dealer button and blinds */
.dealer-btn {
  width: 2.6cqw; height: 2.6cqw; border-radius: 50%; display: grid; place-items: center; z-index: 4;
  background: radial-gradient(circle at 35% 30%, #fff, #e6e1d6); color: #1b1b1b; font-weight: 800; font-size: 1.15cqw;
  box-shadow: 0 .3cqw .6cqw rgb(0 0 0 / .45), inset 0 0 0 .2cqw #cbbf9f; transition: left .5s ease, top .5s ease;
}
.stage.narrow .dealer-btn { width: 5.2cqw; height: 5.2cqw; font-size: 2.4cqw; }

/* Board, pot, deck */
.board { display: flex; gap: .7cqw; z-index: 2; }
.board .card, .board .slot { --card-w: var(--board-card); }
.board .slot { width: var(--card-w); aspect-ratio: 5 / 7; border-radius: calc(var(--card-w) * .12); border: .2cqw solid rgb(255 255 255 / .28); }
.street-label { font-size: .78em; text-transform: uppercase; letter-spacing: .14em; color: var(--on-felt-muted); white-space: nowrap; text-shadow: 0 1px 2px rgb(0 0 0 / .4); }
.pot { display: flex; align-items: center; gap: .5em; font-family: var(--font-display); font-weight: 800; font-size: 1.15em; white-space: nowrap; z-index: 2;
  background: rgb(0 0 0 / .32); border-radius: 999px; padding: .25em .8em .25em .5em; }
.table-msg { font-size: .95em; text-align: center; max-width: 46cqw; text-shadow: 0 1px 2px rgb(0 0 0 / .5); z-index: 2; }
.stage.narrow .table-msg { max-width: 80cqw; }
.tray { display: flex; gap: .4cqw; z-index: 1; }
.tray .deck { --card-w: 3cqw; position: relative; box-shadow: .2cqw .2cqw 0 #ddd, .4cqw .4cqw 0 #bbb, .6cqw .6cqw .2cqw rgb(0 0 0 / .4); }
.stage.narrow .tray .deck { --card-w: 6cqw; }
.rack { display: flex; gap: .25cqw; padding: .3cqw .4cqw; border-radius: .6cqw; background: rgb(0 0 0 / .35); box-shadow: inset 0 .2cqw .4cqw rgb(0 0 0 / .5); }
.rack .chip { position: static; width: 1.5cqw; height: 1.5cqw; }
.stage.narrow .rack { display: none; }

/* Chips */
.chip {
  --c: #e9e6df; --e: #b33;
  width: 1.9cqw; height: 1.9cqw; border-radius: 50%; display: inline-block; position: absolute; left: 0;
  background:
    radial-gradient(circle, var(--c) 0 46%, transparent 47%),
    repeating-conic-gradient(var(--c) 0 18deg, #fff 18deg 30deg, var(--c) 30deg 45deg);
  box-shadow: 0 .15cqw 0 rgb(0 0 0 / .35), inset 0 0 0 .18cqw rgb(0 0 0 / .18);
}
.stage.narrow .chip { width: 3.8cqw; height: 3.8cqw; }
.chip.white { --c: #ece9e2; } .chip.white { background: radial-gradient(circle, #ece9e2 0 46%, transparent 47%), repeating-conic-gradient(#ece9e2 0 18deg, #3b6fb6 18deg 30deg, #ece9e2 30deg 45deg); }
.chip.red { --c: #c23a33; } .chip.green { --c: #2e8a4c; } .chip.black { --c: #26221f; } .chip.purple { --c: #6b3fa0; }
.stack { position: relative; display: inline-block; width: 1.9cqw; height: calc(1.9cqw + 2.4cqw); }
.stage.narrow .stack { width: 3.8cqw; height: calc(3.8cqw + 4cqw); }
.stack .chip { bottom: calc(var(--i) * .5cqw); }
.stage.narrow .stack .chip { bottom: calc(var(--i) * .9cqw); }
.bet { display: flex; align-items: flex-end; gap: .35em; z-index: 5; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgb(0 0 0 / .6); }
.bet:empty { width: 1px; height: 1px; }
.chip.fly { position: absolute; z-index: 30; box-shadow: 0 .6cqw 1cqw rgb(0 0 0 / .45); }

/* ---------- Cards ---------- */
.card {
  --card-w: 3.1rem;
  width: var(--card-w); aspect-ratio: 5 / 7; max-width: 100%;
  background: var(--card); color: var(--card-ink); border-radius: calc(var(--card-w) * .12);
  box-shadow: 0 1px 0 rgb(0 0 0 / .25), 0 3px 8px rgb(0 0 0 / .3);
  display: grid; grid-template-rows: auto 1fr; padding: calc(var(--card-w) * .07) calc(var(--card-w) * .09);
  font-weight: 700; position: relative; user-select: none; flex: none; backface-visibility: hidden;
}
.card .rk { font-size: calc(var(--card-w) * .36); line-height: 1; font-family: var(--font-display); }
.card .st { font-size: calc(var(--card-w) * .5); line-height: 1; align-self: center; justify-self: center; }
.card .sl { position: absolute; right: calc(var(--card-w) * .08); top: calc(var(--card-w) * .07); font-size: calc(var(--card-w) * .2); opacity: .85; display: none; }
.style-cb .card .sl { display: block; }
.card.h, .card.d { color: var(--suit-red); }
.style-four .card.d, .style-cb .card.d { color: var(--suit-blue); }
.style-four .card.c, .style-cb .card.c { color: var(--suit-green); }
.style-cb .card.d { background: color-mix(in srgb, var(--card) 90%, var(--suit-blue)); }
.style-cb .card.c { background: color-mix(in srgb, var(--card) 90%, var(--suit-green)); }
.style-cb .card.h { background: color-mix(in srgb, var(--card) 92%, var(--suit-red)); }
.card.back {
  background: repeating-linear-gradient(45deg, var(--back-1) 0 calc(var(--card-w) * .1), var(--back-2) calc(var(--card-w) * .1) calc(var(--card-w) * .2));
  border: calc(var(--card-w) * .06) solid #f4efe3;
}
.card.hl { box-shadow: 0 0 0 calc(var(--card-w) * .06) var(--gold), 0 4px 12px rgb(0 0 0 / .4); transform: translateY(-6%); }
.card.dim { filter: saturate(.35) brightness(.78); }

/* ---------- Action dock and result ---------- */
.dock { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.act { flex: 1 1 120px; display: grid; gap: 2px; text-align: center; min-height: 54px; }
.act .sub { font-size: .75rem; font-weight: 400; opacity: .85; }
.act.fold { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); }
.raise-panel { display: grid; gap: 8px; margin-top: 10px; }
.raise-panel .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.raise-panel input[type=range] { flex: 1 1 200px; accent-color: var(--brass); min-height: 44px; }
.raise-panel input[type=number] { width: 7.5rem; padding: .45rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.waiting { color: var(--muted); padding: 6px 2px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; }
.result h2 { font-size: 1.15rem; }
.result .lines { max-height: 34vh; overflow: auto; margin: 8px 0; padding-left: 1.1rem; display: grid; gap: 4px; }
.result .pot-label { font-weight: 700; margin-top: 4px; }
.result .btns, .btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.help-line { font-size: .85rem; color: var(--muted); }
.error { color: var(--bad); font-weight: 700; }

/* ---------- Side column: coach and chat ---------- */
.side { display: grid; gap: 12px; min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; box-shadow: var(--shadow); }
.panel h2 { font-size: 1.05rem; }
.panel .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.panel section { display: grid; gap: 6px; }
.eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.hint { border-left: 3px solid var(--brass); padding-left: 10px; }
.log { font-size: .85rem; color: var(--muted); max-height: 220px; overflow: auto; display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.log b { color: var(--fg); font-weight: 700; }
.chat-list { max-height: 260px; min-height: 120px; overflow: auto; display: grid; gap: 4px; align-content: start; font-size: .92rem; overflow-wrap: anywhere; }
.chat-list .sys { color: var(--muted); font-style: italic; }
.chat-list b { font-weight: 700; }
.chat-form { display: flex; gap: 6px; }
.chat-form input { flex: 1; width: 0; min-width: 0; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); min-height: 44px; }
.conn { font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); display: inline-block; flex: none; }
.dot.off { background: var(--bad); }
.dot.wait { background: var(--brass); }

/* ---------- Online lobby ---------- */
.lobby { position: absolute; inset: 14% 10% 19%; display: grid; place-items: center; z-index: 6; }
.stage.narrow .lobby { inset: 17% 8% 19%; }
.lobby-card { background: rgb(10 20 18 / .82); border: 1px solid rgb(255 255 255 / .18); border-radius: 16px; padding: 1.4em; display: grid; gap: .8em; text-align: center; max-width: 100%; max-height: 100%; overflow: auto; }
.room-code { font-family: var(--font-display); font-weight: 800; font-size: 2.6em; letter-spacing: .14em; color: var(--gold); line-height: 1; }
.lobby-card .members { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em; }
.pill { display: inline-flex; align-items: center; gap: .35em; padding: .2em .7em; border-radius: 999px; background: rgb(255 255 255 / .12); font-size: .9em; }
.share { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.share input { flex: 1 1 200px; min-width: 0; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font-size: .9rem; }

/* ---------- Pass-and-play hand-off screen ---------- */
.handoff {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 40%, #12463e, #060e0c);
  color: #f2f7f5; text-align: center;
}
.handoff .box { display: grid; gap: 14px; max-width: 440px; justify-items: center; }
.handoff h2 { font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 800; }
.handoff p { color: #cfe6e1; }

/* ---------- Quiz ---------- */
.quiz { display: grid; gap: 14px; }
.quiz-top { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.quiz-opts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.quiz-opts { min-width: 0; max-width: 100%; }
.quiz-opts select { max-width: 100%; min-width: 0; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); min-height: 40px; }
.score { display: flex; gap: 14px; flex-wrap: wrap; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .92rem; }
.score b { color: var(--fg); }
.quiz-table {
  border-radius: 28px; padding: 14px; background: linear-gradient(170deg, var(--rail-hi), var(--rail) 45%, var(--rail-lo));
  box-shadow: 0 10px 24px rgb(0 0 0 / .35);
}
.quiz-felt {
  border-radius: 18px; padding: 16px; color: var(--on-felt); display: grid; gap: 14px;
  background: radial-gradient(ellipse at 50% 40%, var(--felt-hi), var(--felt) 60%, var(--felt-lo));
  box-shadow: inset 0 6px 18px rgb(0 0 0 / .4);
}
.quiz-felt .label { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--on-felt-muted); }
.quiz-felt .cards { display: flex; gap: 6px; flex-wrap: wrap; }
.quiz-felt .card { --card-w: clamp(2.6rem, 9vw, 4rem); }
.qrow { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.qblock { display: grid; gap: 8px; min-width: 0; }
.qhands { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.qhand { background: rgb(0 0 0 / .25); border: 2px solid transparent; border-radius: 12px; padding: 8px 10px; display: grid; gap: 6px; }
.qhand.win { border-color: var(--gold); background: rgb(233 196 106 / .14); }
.qhand .hname { font-size: .9rem; min-height: 1.3em; }
.answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.answers .btn { justify-content: flex-start; text-align: left; min-height: 52px; }
.answers .btn kbd { font: inherit; font-size: .75rem; border: 1px solid var(--line); border-radius: 4px; padding: 0 .35em; color: var(--muted); }
.answers .btn.right { background: color-mix(in srgb, var(--good) 22%, var(--surface)); border-color: var(--good); }
.answers .btn.wrong { background: color-mix(in srgb, var(--bad) 18%, var(--surface)); border-color: var(--bad); }
.feedback { display: grid; gap: 8px; }
.feedback h3 { font-size: 1.15rem; }
.feedback .ok { color: var(--good); } .feedback .no { color: var(--bad); }
.feedback ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 4px; }

/* ---------- Dialogs ---------- */
dialog {
  border: 1px solid var(--line); border-radius: 16px; padding: 0; background: var(--surface); color: var(--fg);
  width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 32px); box-shadow: 0 20px 60px rgb(0 0 0 / .35);
}
dialog::backdrop { background: rgb(5 15 13 / .55); }
.dlg { display: flex; flex-direction: column; max-height: calc(100vh - 34px); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.dlg-head h2 { font-size: 1.25rem; }
.dlg-body { padding: 14px 16px; overflow: auto; display: grid; grid-auto-rows: max-content; gap: 14px; }
.dlg-foot { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dlg-body p, .dlg-body li { max-width: 68ch; }
.dlg-body h3 { font-size: 1.05rem; margin-top: 4px; }
.dlg-body .card { --card-w: 2.3rem; }

.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 16px; }
.field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.field label { font-weight: 700; font-size: .92rem; }
.field .help { font-size: .8rem; color: var(--muted); }
.field input[type=text], .field input[type=number], .field input[type=password], .field select {
  padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); min-height: 44px; width: 100%;
}
.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); margin-top: 2px; flex: none; }
.check .help { display: block; font-size: .8rem; color: var(--muted); }
fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0; display: grid; gap: 12px; min-width: 0; }
legend { font-family: var(--font-display); font-weight: 700; padding: 0 6px; }
.names { display: grid; gap: 8px; }
.names .row { display: flex; gap: 8px; }
.names input { flex: 1; min-width: 0; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); min-height: 44px; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab { border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: .35rem .85rem; cursor: pointer; min-height: 40px; font-weight: 700; }
.tab[aria-selected="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

.rank-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rank-item { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.rank-item .num { grid-row: span 2; font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: var(--accent); text-align: center; }
.rank-item .title { font-weight: 700; }
.rank-item .desc { font-size: .9rem; color: var(--muted); }
.rank-item .cards { grid-column: 2; display: flex; gap: 4px; flex-wrap: wrap; }
.rank-item .card.dim { opacity: .55; filter: none; }
.pref-large .dlg-body .card { --card-w: 3rem; }

.history-list { display: grid; gap: 6px; }
.history-row { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); cursor: pointer; }
.history-row .net { font-variant-numeric: tabular-nums; font-weight: 700; }
.pos { color: var(--good); } .neg { color: var(--bad); }
.hist-cards { display: flex; gap: 4px; flex-wrap: wrap; }
.hist-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.hist-table td, .hist-table th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.scroll-x { overflow-x: auto; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
  .brand .tag { display: none; }
  .toolbar .btn.small { padding: .3rem .5rem; }
}

/* Reduced motion: from the setting or from the device */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .motion-system *, .motion-system *::before, .motion-system *::after { animation: none !important; transition: none !important; }
}

/* ---------- Game picker (menu) ---------- */
.game-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.game-tab { text-align: left; border: 2px solid var(--line); background: var(--surface); border-radius: 14px; padding: 14px 16px; display: grid; gap: 2px; cursor: pointer; min-width: 0; }
.game-tab:hover { border-color: var(--accent); }
.game-tab[aria-selected="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.game-tab .gname { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.game-tab .gdesc { color: var(--muted); font-size: .92rem; }

/* ---------- Blackjack table: a half-moon with the dealer on the flat side ---------- */
.stage { --bj-dealer: 5cqw; --bj-mine: 5cqw; --bj-other: 3.8cqw; }
.stage.narrow { --bj-dealer: 9.5cqw; --bj-mine: 8.6cqw; --bj-other: 6cqw; }
.pref-large .stage { --bj-dealer: 6cqw; --bj-mine: 6cqw; --bj-other: 4.5cqw; }
.pref-large .stage.narrow { --bj-dealer: 11cqw; --bj-mine: 10cqw; --bj-other: 7cqw; }
.bj-rail {
  position: absolute; left: 3%; right: 3%; top: 6%; bottom: 4%;
  padding: 0 2.1cqw 2.1cqw; border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(170deg, var(--rail-hi), var(--rail) 45%, var(--rail-lo));
  box-shadow: 0 1.6cqw 3cqw rgb(0 0 0 / .55), inset 0 -.4cqw .8cqw rgb(0 0 0 / .45);
}
.stage.narrow.bj { aspect-ratio: 3 / 3.75; }
.stage.narrow .bj-rail { left: 1.5%; right: 1.5%; top: 5%; bottom: 3%; padding: 0 3.4cqw 3.4cqw; border-radius: 0 0 50% 50% / 0 0 62% 62%; }
/* The dealer's straight side: a wooden edge (no padded rail, the dealer stands here) */
.bj-edge { position: absolute; left: 3%; right: 3%; top: 6%; height: 1.3cqw; z-index: 1;
  background: linear-gradient(#5a3424, #2c170e); box-shadow: 0 .3cqw .6cqw rgb(0 0 0 / .45); }
.stage.narrow .bj-edge { left: 1.5%; right: 1.5%; top: 5%; height: 2.2cqw; }
/* The dealer's chip tray: columns of chips seen from above */
.bj-rack { display: flex; gap: .25cqw; padding: .4cqw .5cqw; z-index: 2; border-radius: .5cqw;
  background: linear-gradient(#1c1c1c, #3a3a3a); box-shadow: inset 0 .2cqw .5cqw rgb(0 0 0 / .8), 0 .2cqw .4cqw rgb(0 0 0 / .4); }
.bj-rack i { width: 2.1cqw; height: 4.4cqw; border-radius: .5cqw; --c: #c23a33;
  background: repeating-linear-gradient(to bottom, var(--c) 0 .45cqw, color-mix(in srgb, var(--c) 60%, #000) .45cqw .55cqw); box-shadow: inset 0 0 0 .1cqw rgb(255 255 255 / .2); }
.bj-rack i.white { --c: #ece9e2; } .bj-rack i.red { --c: #c23a33; } .bj-rack i.green { --c: #2e8a4c; } .bj-rack i.black { --c: #2a2623; } .bj-rack i.purple { --c: #6b3fa0; }
.stage.narrow .bj-rack i { width: 3.6cqw; height: 6.5cqw; border-radius: .8cqw; }
/* Discard holder: a clear box filling up with used cards */
.bj-discard { width: 4.2cqw; height: 6cqw; z-index: 2; border-radius: .4cqw; border: .2cqw solid rgb(255 255 255 / .35); background: rgb(255 255 255 / .08); }
.bj-discard i { position: absolute; left: .35cqw; right: .35cqw; bottom: calc(.3cqw + var(--i) * .5cqw); height: .45cqw; background: #f4efe3; border-bottom: .12cqw solid var(--back-1); border-radius: .1cqw; }
.stage.narrow .bj-discard { width: 7.5cqw; height: 10.5cqw; }
.stage.narrow .bj-discard i { bottom: calc(.5cqw + var(--i) * .9cqw); height: .8cqw; }
.bj-felt {
  width: 100%; height: 100%; border-radius: inherit;
  background: radial-gradient(ellipse at 50% 18%, var(--felt-hi) 0%, var(--felt) 55%, var(--felt-lo) 100%);
  box-shadow: inset 0 .8cqw 2.2cqw rgb(0 0 0 / .45);
}
.bj-print { position: absolute; height: auto; pointer-events: none; z-index: 1; }
.bj-dealer { display: grid; justify-items: center; gap: .4cqw; z-index: 3; }
.bj-dealer .bj-hand { --bj-card: var(--bj-dealer); }
.bj-shoe { display: grid; justify-items: center; gap: .2em; z-index: 2; padding: .5cqw .7cqw; border-radius: .8cqw; background: rgb(0 0 0 / .4); box-shadow: inset 0 .2cqw .5cqw rgb(0 0 0 / .6); font-size: .75em; color: var(--on-felt-muted); }
.bj-shoe .deck { --card-w: 3cqw; box-shadow: .2cqw .2cqw 0 #ddd, .4cqw .4cqw 0 #bbb; }
.stage.narrow .bj-shoe .deck { --card-w: 6cqw; }
.bj-hand { position: relative; display: grid; justify-items: center; gap: .3em; --bj-card: var(--bj-other); }
.bj-hand .cards { display: flex; }
.bj-hand .card { --card-w: var(--bj-card); }
.bj-hand .card + .card { margin-left: calc(var(--card-w) * -.42); }
.bj-hand.small .card { --card-w: calc(var(--bj-card) * .78); }
.bj-hand.active .card { box-shadow: 0 0 0 calc(var(--card-w) * .05) var(--gold), 0 3px 8px rgb(0 0 0 / .35); }
.bj-hand.bust .card, .bj-hand.lose .card { filter: saturate(.5) brightness(.85); }
.slot-card { --card-w: var(--bj-dealer); background: transparent; border: .25cqw dashed rgb(255 255 255 / .3); box-shadow: none; }
.slot-card + .slot-card { margin-left: .6cqw; }
.bj-total { background: rgb(0 0 0 / .6); color: #fff; border-radius: 999px; padding: .05em .6em; font-weight: 700; font-size: .85em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bj-badge { position: absolute; top: -.7em; right: -.4em; z-index: 4; font-size: .75em; font-weight: 800; border-radius: 999px; padding: .1em .55em; white-space: nowrap; box-shadow: 0 2px 6px rgb(0 0 0 / .35); }
.bj-badge.win, .bj-badge.blackjack { background: var(--gold); color: #2b1d05; }
.bj-badge.lose, .bj-badge.bust { background: #b3261e; color: #fff; }
.bj-badge.push { background: #e6e1d6; color: #222; }
.bj-hands { display: flex; gap: .8cqw; align-items: flex-end; justify-content: center; min-height: calc(var(--bj-other) * 1.4); }
.bj-spot { display: grid; justify-items: center; gap: .45cqw; z-index: 3; width: 16cqw; min-width: 0; }
.stage.narrow .bj-spot { width: 19cqw; }
.bj-spot.mine { width: 20cqw; z-index: 4; }
.stage.narrow .bj-spot.mine { width: 26cqw; }
.bj-spot .tagline { font-size: .75em; color: var(--on-felt-muted); text-transform: uppercase; letter-spacing: .08em; }
.bj-spot.mine .bj-hand { --bj-card: var(--bj-mine); }
.bj-spot.mine .bj-hands { min-height: calc(var(--bj-mine) * 1.4); }
.bj-circle { width: 5.6cqw; aspect-ratio: 1; border-radius: 50%; border: .3cqw solid rgb(255 255 255 / .65); display: grid; place-items: center; font-weight: 700; font-size: .85em; }
.stage.narrow .bj-circle { width: 10cqw; border-width: .5cqw; }
.bj-circle:has(.stack) { display: flex; align-items: flex-end; justify-content: center; gap: .3em; padding-bottom: .6cqw; }
.bj-spot.mine .bj-circle { width: 6.6cqw; border-color: var(--gold); }
.stage.narrow .bj-spot.mine .bj-circle { width: 12cqw; }
.bj-spot.acting .bj-circle { box-shadow: 0 0 0 .5cqw rgb(233 196 106 / .45); }
.bj-name { font-size: .88em; white-space: nowrap; display: flex; align-items: center; gap: .4em; background: rgb(0 0 0 / .4); border-radius: 999px; padding: .1em .7em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bj-name .chip { position: static; width: 1em; height: 1em; }
.bj-spot .sub { font-size: .8em; color: var(--on-felt-muted); text-shadow: 0 1px 2px rgb(0 0 0 / .5); }
.bj-spot .timer { width: 80%; }

/* Betting chips in the dock */
.bj-bet { display: grid; gap: 8px; }
.bj-betline { font-size: 1.05rem; display: inline-flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 2px 0 6px; }
.chip-btn {
  --c: #c23a33; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; font-weight: 800; font-size: .9rem; color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / .6);
  background: radial-gradient(circle, var(--c) 0 52%, transparent 53%), repeating-conic-gradient(var(--c) 0 18deg, #fff 18deg 30deg, var(--c) 30deg 45deg);
  box-shadow: 0 3px 0 rgb(0 0 0 / .35), inset 0 0 0 3px rgb(0 0 0 / .15);
}
.chip-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgb(0 0 0 / .35); }
.chip-btn.white { --c: #ece9e2; color: #1b1b1b; text-shadow: none; background: radial-gradient(circle, #ece9e2 0 52%, transparent 53%), repeating-conic-gradient(#ece9e2 0 18deg, #3b6fb6 18deg 30deg, #ece9e2 30deg 45deg); }
.chip-btn.red { --c: #c23a33; } .chip-btn.green { --c: #2e8a4c; } .chip-btn.black { --c: #26221f; } .chip-btn.purple { --c: #6b3fa0; }


.stage.narrow .bj-spot .bj-name { flex-direction: column; gap: 0; border-radius: 8px; padding: .15em .5em; }

/* ---------- Fold-away room chat ---------- */
.chat-fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-weight: 800; cursor: pointer;
  box-shadow: 0 6px 20px rgb(0 0 0 / .25);
}
.chat-fab:hover { border-color: var(--accent); }
.chat-fab .count { min-width: 1.5em; height: 1.5em; padding: 0 .4em; border-radius: 999px; display: inline-grid; place-items: center; background: var(--bad); color: #fff; font-size: .85rem; font-variant-numeric: tabular-nums; }
.chat-drawer {
  position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 41;
  width: min(360px, calc(100vw - 32px)); max-height: min(70vh, 560px); grid-template-rows: auto minmax(0, 1fr) auto;
  box-shadow: 0 16px 48px rgb(0 0 0 / .35);
}
.chat-drawer .head { gap: 8px; }
.chat-drawer .head h2 { margin-right: auto; }
.chat-drawer .chat-list { max-height: none; min-height: 160px; }
@media (max-width: 640px) {
  .chat-drawer { left: 12px; right: 12px; width: auto; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); max-height: 62vh; }
}
.has-chat .app { padding-bottom: 84px; }

/* ---------- Liar's Dice: a weathered wooden tavern table by candlelight ---------- */
:root { --font-tavern: "IM Fell English SC", "Iowan Old Style", Georgia, serif; --bone: #f3ead3; --bone-2: #d8c8a4; --pip: #2a1a10; --leather: #5a3320; --leather-2: #2e190e; --brass-2: #c9a24a; }
.stage.ld { aspect-ratio: 16 / 10.5; background: #070b16; box-shadow: none; color: #f1e6cc; }
.stage.narrow.ld { aspect-ratio: 3 / 4.4; }
.stage.ld .rail { display: none; }
.stage:not(.ld) .ld-scene { display: none; }

/* The table from above, on a ship's deck, under a lantern */
.ld-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ld-scene svg { display: block; width: 100%; height: 100%; }
.ld-ship { position: absolute; inset: 0; }
/* Lantern light from overhead: warm in the middle, falling off toward the deck. It sways a little. */
.ld-light { position: absolute; inset: -6%;
  background:
    radial-gradient(ellipse 46% 50% at 50% 47%, rgb(255 196 120 / .22), rgb(255 170 90 / .06) 55%, transparent 75%),
    radial-gradient(ellipse 70% 72% at 50% 48%, transparent 45%, rgb(8 4 0 / .5) 82%, rgb(0 0 0 / .78) 100%);
  animation: ld-sway 7s ease-in-out infinite alternate; }
@keyframes ld-sway { from { transform: translate(-1.2%, -.6%); } to { transform: translate(1.2%, .8%); } }
.ld-candleglow { position: absolute; width: 0; height: 0; }
.ld-candleglow i { position: absolute; left: 0; top: 0; width: 26cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 250 225) 0 1.6%, rgb(255 210 110 / .8) 2.6%, rgb(255 180 80 / .45) 4.5%, rgb(255 160 60 / .16) 18%, transparent 55%);
  mix-blend-mode: screen; animation: ld-candle 1.7s ease-in-out infinite alternate; }
.stage.narrow .ld-candleglow i { width: 44cqw; }
@keyframes ld-candle { 0% { opacity: .85; transform: scale(1); } 40% { opacity: 1; transform: scale(1.04) translate(.3%, -.2%); } 100% { opacity: .8; transform: scale(.97); } }

/* ---------- Liar's Dice pieces, seen from above ---------- */
/* Seats: a brass name plate at the table edge, the cup, the dice */
.ld-seat { z-index: 3; width: 18cqw; display: grid; justify-items: center; gap: .45cqw; }
.stage.narrow .ld-seat { width: 24cqw; gap: .9cqw; }
.ld-seat.across { position: absolute; translate: -50% 0; width: 20cqw; }
.stage.narrow .ld-seat.across { width: 23.5cqw; }
.ld-seat.mine { width: 40cqw; }
.stage.narrow .ld-seat.mine { width: 86cqw; }
.ld-seat.out .ld-cupzone, .ld-seat.out .ld-left { opacity: .45; }
.ld-mebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3em .8em; }
.ld-mebar .sub { font-weight: 700; }

.ld-cupzone { position: relative; height: 9.5cqw; width: 100%; display: grid; place-items: center; }
.stage.narrow .ld-cupzone { height: 16cqw; }
.ld-seat.mine .ld-cupzone { height: 9cqw; }
.stage.narrow .ld-seat.mine .ld-cupzone { height: 17cqw; }

/* A leather dice cup turned upside down: the round, stitched base faces up */
.ld-cup {
  position: absolute; left: 50%; top: 50%; width: 8cqw; aspect-ratio: 1; translate: -50% -50%; z-index: 2; border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, rgb(255 220 180 / .28), transparent 34%),
    radial-gradient(circle at 50% 50%, #6c3d21 0, #5a3119 48%, #43230f 70%, #2a1508 84%, #3a1f0d 88%, #1c0d04 100%);
  box-shadow: .7cqw 1.1cqw 1.4cqw rgb(0 0 0 / .7), .2cqw .3cqw .3cqw rgb(0 0 0 / .5), inset -.3cqw -.4cqw .7cqw rgb(0 0 0 / .45), inset .2cqw .2cqw .4cqw rgb(255 220 180 / .18);
  transition: transform .5s ease, opacity .5s ease;
}
.ld-cup::before { content: ""; position: absolute; inset: 17%; border-radius: 50%; border: max(1px, .2cqw) dashed rgb(232 196 140 / .6); box-shadow: 0 0 0 max(1px, .1cqw) rgb(0 0 0 / .25); }
.ld-cup::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle at 46% 44%, transparent 0 .45cqw, rgb(0 0 0 / .07) .45cqw .55cqw), conic-gradient(from 30deg, rgb(255 255 255 / .06), transparent 25%, rgb(0 0 0 / .14) 55%, transparent 80%, rgb(255 255 255 / .05)); }
.stage.narrow .ld-cup { width: 13.5cqw; }
.ld-seat.mine .ld-cup { width: 8cqw; }
.stage.narrow .ld-seat.mine .ld-cup { width: 13cqw; }
.ld-cup.peek { transform: translate(-230%, 6%); }                    /* lifted off and set down beside your dice */
.stage.narrow .ld-cup.peek { transform: translate(-235%, -6%); }
.ld-cup.lifted { transform: scale(1.4); opacity: 0; }                /* lifted toward you for the reveal, then put away */
.ld-cup.mini { position: relative; display: inline-block; left: auto; top: auto; translate: none; transform: none; width: 2.8rem; }
.ld-dice { position: relative; z-index: 3; display: flex; gap: .55cqw .4cqw; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.ld-seat.across .ld-dice { max-width: 12cqw; }
.stage.narrow .ld-seat.across .ld-dice { max-width: 21cqw; gap: .9cqw .6cqw; }
.ld-seat.mine .ld-dice { flex-wrap: nowrap; gap: .8cqw; }
.ld-left { display: flex; gap: .3cqw; }
.ld-left i { width: .9cqw; height: .9cqw; border-radius: .2cqw; background: rgb(0 0 0 / .5); box-shadow: inset 0 0 0 .1cqw rgb(255 255 255 / .15); }
.ld-left i.on { background: var(--bone); box-shadow: 0 .1cqw .2cqw rgb(0 0 0 / .6); }
.stage.narrow .ld-left i { width: 1.8cqw; height: 1.8cqw; }

/* Engraved brass name plates */
.ld-name {
  font-size: .88em; white-space: nowrap; display: flex; align-items: center; gap: .45em; max-width: 100%; overflow: hidden;
  padding: .12em 1.15em; border-radius: .3em; color: #2a1708; font-family: var(--font-tavern);
  background:
    radial-gradient(circle at .5em 50%, #5a3c12 0 .13em, rgb(255 240 200 / .6) .14em .18em, transparent .19em),
    radial-gradient(circle at calc(100% - .5em) 50%, #5a3c12 0 .13em, rgb(255 240 200 / .6) .14em .18em, transparent .19em),
    linear-gradient(180deg, #ecd08a, #c49a4a 42%, #9a7030 58%, #b88d42);
  border: 1px solid #4a300c;
  box-shadow: .15cqw .35cqw .6cqw rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 248 220 / .7), inset 0 -1px 0 rgb(60 35 5 / .5);
  text-shadow: 0 1px 0 rgb(255 238 190 / .6);
}
.ld-name b { font-weight: 400; letter-spacing: .02em; }
.ld-name .chip { position: static; width: 1em; height: 1em; }
.ld-seat .tagline { font-size: .72em; color: #4a300c; text-transform: uppercase; letter-spacing: .08em; text-shadow: none; }
.stage.narrow .ld-seat.across .ld-name { flex-direction: column; gap: 0; padding: .15em .9em; font-size: .85em; line-height: 1.15; }
.stage.narrow .ld-seat.across .tagline { display: none; }
.ld-seat.acting .ld-name { box-shadow: 0 0 0 .35cqw rgb(255 210 120 / .55), 0 0 1.8cqw rgb(255 190 90 / .6), inset 0 1px 0 rgb(255 248 220 / .7); }
.ld-seat.winner .ld-name { background: linear-gradient(180deg, #fff0b8, #e6c060 45%, #c8962c); }
.ld-seat .sub { font-size: .82em; color: #f6e6c4; text-shadow: 0 1px 2px #000, 0 0 6px rgb(0 0 0 / .8); text-align: center; }
.ld-seat .timer { width: 70%; }

/* Bone dice: rounded edges catch the lantern light, the pips are drilled in */
.die {
  --die: 3cqw; width: var(--die); aspect-ratio: 1; flex: none; display: inline-grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: calc(var(--die) * .14); gap: calc(var(--die) * .04); border-radius: 21%;
  background: radial-gradient(circle at 30% 26%, #fffef8 0, #f6eedb 32%, #e8dcbd 72%, #cdb98f 100%);
  box-shadow:
    inset calc(var(--die) * -.05) calc(var(--die) * -.07) calc(var(--die) * .09) rgb(110 80 30 / .4),
    inset calc(var(--die) * .04) calc(var(--die) * .05) calc(var(--die) * .06) rgb(255 255 255 / .9),
    calc(var(--die) * .07) calc(var(--die) * .14) calc(var(--die) * .16) rgb(0 0 0 / .55),
    calc(var(--die) * .02) calc(var(--die) * .04) calc(var(--die) * .03) rgb(0 0 0 / .35);
}
.die i { width: 100%; aspect-ratio: 1; border-radius: 50%; align-self: center;
  background: radial-gradient(circle at 62% 66%, #5a3c26 0, #24150b 45%, #0e0804 100%);
  box-shadow: inset calc(var(--die) * .02) calc(var(--die) * .03) calc(var(--die) * .03) rgb(0 0 0 / .9), 0 calc(var(--die) * .015) 0 rgb(255 255 255 / .75); }
.stage.narrow .die { --die: 5.8cqw; }
.ld-seat.across .die { --die: 3cqw; }
.stage.narrow .ld-seat.across .die { --die: 5.6cqw; }
.ld-seat.mine .die { --die: 4.8cqw; }
.stage.narrow .ld-seat.mine .die { --die: 10.5cqw; }
.pref-large .ld-seat.mine .die { --die: 5.8cqw; }
.pref-large .stage.narrow .ld-seat.mine .die { --die: 12.5cqw; }
.die.match { box-shadow: 0 0 0 calc(var(--die) * .09) var(--brass-2), 0 0 calc(var(--die) * .45) rgb(255 200 90 / .75), calc(var(--die) * .07) calc(var(--die) * .14) calc(var(--die) * .16) rgb(0 0 0 / .55); }
.die.other { filter: brightness(.6) saturate(.55); }
.die.lost { opacity: .35; transform: translateY(30%) rotate(25deg); }
.style-cb .die.match { box-shadow: 0 0 0 calc(var(--die) * .1) #0072b2, 0 0 calc(var(--die) * .4) rgb(0 114 178 / .7); }

/* The bid: a scrap of parchment lying on the table */
.ld-placard {
  z-index: 4; display: grid; justify-items: center; gap: .2em; padding: .7em 1.4em; min-width: 22cqw; transform: translate(-50%, -50%) rotate(-2deg);
  background:
    radial-gradient(ellipse at 20% 15%, rgb(255 250 230 / .6), transparent 45%),
    radial-gradient(ellipse at 85% 90%, rgb(140 90 30 / .28), transparent 50%),
    radial-gradient(circle at 78% 22%, rgb(120 70 20 / .14) 0 6%, transparent 7%),
    linear-gradient(170deg, #f1dfb2, #dcc28a);
  color: #3a2414; border-radius: .25cqw .5cqw .3cqw .6cqw;
  box-shadow: .5cqw 1cqw 1.6cqw rgb(0 0 0 / .6), .1cqw .2cqw .3cqw rgb(0 0 0 / .4), inset 0 0 1.8cqw rgb(120 75 25 / .45);
  font-family: var(--font-tavern);
}
.stage.narrow .ld-placard { min-width: 50cqw; }
.ld-placard .ld-label { font-size: .85em; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.ld-bid { display: flex; align-items: center; gap: .4em; }
.ld-bid .qty { font-size: 2.6em; line-height: 1; }
.ld-bid .times, .times { font-size: 1.4em; opacity: .7; }
.ld-bid .die { --die: 4.4cqw; }
.stage.narrow .ld-bid .die { --die: 9cqw; }
.ld-by { font-size: .95em; }
.ld-count { font-size: 1.05em; }

/* The pot: a pile of gold coins */
.ld-pot { z-index: 3; display: grid; justify-items: center; gap: .3cqw; }
.coinpile { position: relative; width: 9cqw; height: 6.5cqw; display: block; }
.stage.narrow .coinpile { width: 20cqw; height: 13cqw; }
.coin { position: absolute; width: 2.6cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff4c2 0, #e8bd55 30%, #b88a2a 62%, #7a5414 100%);
  box-shadow: inset 0 0 0 .22cqw rgb(122 84 20 / .55), inset 0 0 0 .32cqw rgb(255 235 170 / .35), .15cqw .3cqw .4cqw rgb(0 0 0 / .6); }
.coin::after { content: ""; position: absolute; inset: 32%; border: max(1px, .12cqw) solid rgb(122 84 20 / .55); rotate: 45deg; }
.stage.narrow .coin { width: 5.6cqw; }
.ld-potlabel, .ld-total { font-family: var(--font-tavern); }
.ld-potlabel { font-size: 1.1em; color: #f6e6c4; text-shadow: 0 1px 2px #000, 0 0 8px rgb(0 0 0 / .7); }
.ld-total { z-index: 3; font-size: .82em; color: #f0dcb4; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 2px #000, 0 0 6px rgb(0 0 0 / .8); }
.chip.gold { --c: #d4a63a; background: radial-gradient(circle at 36% 30%, #fff4c2 0, #e8bd55 30%, #b88a2a 62%, #7a5414 100%); box-shadow: inset 0 0 0 .12em rgb(122 84 20 / .5); }
.chip.fly.gold { box-shadow: 0 0 1cqw rgb(255 200 90 / .7); }
.stage.ld .ld-placard { font-size: .95em; }

/* Bid controls under the table */
.ld-bidbox { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: center; }
.ld-qty { display: inline-flex; align-items: center; gap: 6px; }
.ld-qty .btn { min-width: 48px; font-size: 1.3rem; }
.ld-qnum { min-width: 2.2ch; text-align: center; font-family: var(--font-tavern); font-size: 2rem; font-variant-numeric: tabular-nums; }
.ld-faces { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.face-btn { border: 2px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 5px; cursor: pointer; min-width: 48px; min-height: 48px; display: grid; place-items: center; }
.face-btn .die { --die: 30px; }
.face-btn.on { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 18%, var(--surface)); }
.hist-dice { display: flex; gap: 4px; flex-wrap: wrap; }
.hist-dice .die { --die: 26px; }
.dlg-body .die { --die: 26px; }
.tile .art.tavern { background: linear-gradient(170deg, #7a4d2f, #4a2c18); box-shadow: inset 0 0 0 5px #2a170c; gap: 8px; }
.tile .art.tavern .die { --die: 30px; }

/* The ship's wheel on the 1 face */
.die.w { display: inline-grid; place-items: center; padding: calc(var(--die) * .1); color: #8f2a1a; }
.die.w .wheel { width: 100%; height: 100%; grid-area: 1 / 1 / 4 / 4; }
.style-cb .die.w { color: #0b4f8a; }

/* ---------- Liar's Dice bid board: a sea chart with a numbered track ---------- */
.ld-board {
  z-index: 3; rotate: -.6deg; border-radius: .8cqw;
  background:
    radial-gradient(ellipse at 30% 25%, rgb(255 248 220 / .55), transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgb(120 70 20 / .25), transparent 50%),
    linear-gradient(160deg, #ecd6a3, #dcbd7f 55%, #caa465);
  box-shadow: 0 1.4cqw 2.4cqw rgb(0 0 0 / .6), 0 .3cqw .5cqw rgb(0 0 0 / .45), inset 0 0 2.4cqw rgb(110 60 15 / .55), inset 0 0 .4cqw rgb(80 40 10 / .6);
  color: #3a2414; font-family: var(--font-tavern);
}
.ld-chart { position: absolute; border-radius: .4cqw; overflow: hidden; background: rgb(140 170 170 / .22); box-shadow: inset 0 0 1.2cqw rgb(90 60 20 / .35); }
.ld-chart svg { width: 100%; height: 100%; display: block; }
.ld-space {
  position: absolute; translate: -50% -50%; padding: 0; margin: 0; font: inherit; color: inherit; border-radius: 18%;
  background: linear-gradient(160deg, rgb(255 250 230 / .7), rgb(225 200 150 / .7));
  border: max(1px, .15cqw) solid rgb(80 50 20 / .6); box-shadow: inset 0 0 .5cqw rgb(120 80 30 / .3);
}
.ld-space.five { background: linear-gradient(160deg, rgb(205 222 196 / .85), rgb(160 185 150 / .85)); }
.ld-space .num { position: absolute; left: 9%; top: 3%; font-size: max(9px, 1.05cqw); line-height: 1; font-variant-numeric: tabular-nums; }
.stage.narrow .ld-space .num { font-size: max(10px, 2.3cqw); }
.ld-space.passed { opacity: .45; }
.ld-space.current { border-color: #b8862c; box-shadow: 0 0 0 .3cqw rgb(201 162 74 / .8), 0 0 1.4cqw rgb(255 200 90 / .6); }
.ld-space.counted { outline: .35cqw solid #2f6b3a; outline-offset: .15cqw; }
.ld-space.chosen { border-style: dashed; border-color: #8f2a1a; }
button.ld-space { cursor: pointer; }
button.ld-space:hover { background: linear-gradient(160deg, rgb(255 252 238 / .95), rgb(240 220 170 / .95)); }
button.ld-space:focus-visible { outline: 3px solid #8f2a1a; outline-offset: 2px; }
.ld-space .ld-token { display: inline-grid; margin: 0 -22% 0 0; position: relative; top: 12%; }
.ld-space .ld-token:last-child { margin-right: 0; }
.ld-space .ld-token .die { --die: calc(var(--cell, 1) * 1cqw); }
.ld-space .ld-token { --cell: 2.4; }
.stage.narrow .ld-space .ld-token { --cell: 3.9; }
.ld-space .ld-token:not(.latest):not(.ghost) .die { filter: brightness(.82) saturate(.7); }
.ld-space .ld-token.latest .die { box-shadow: 0 0 0 .2cqw #b8862c, 0 .3cqw .6cqw rgb(0 0 0 / .45); }
.ld-space .ld-token.ghost .die { opacity: .55; outline: .2cqw dashed #8f2a1a; }
.ld-space { display: flex; align-items: center; justify-content: center; }
.ld-boardinfo { position: absolute; display: grid; align-content: center; justify-items: center; gap: .3em; pointer-events: none; text-align: center; }
.ld-bidline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .2em .7em; background: rgb(245 230 195 / .82); border-radius: .6cqw; padding: .15em .9em; box-shadow: 0 .2cqw .6cqw rgb(80 50 20 / .3); }
.ld-bidline .ld-label { font-size: .85em; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.ld-bidline .qty { font-size: 1.9em; line-height: 1; }
.stage.narrow .ld-bidline { flex-direction: column; gap: .1em; padding: .4em 1.2em; }
.stage.narrow .ld-bidline .qty { font-size: 2.6em; }
.ld-boardinfo .ld-bid .die { --die: 3.2cqw; }
.stage.narrow .ld-boardinfo .ld-bid .die { --die: 9cqw; }
.ld-boardfoot { display: flex; gap: .4em 1.2em; flex-wrap: wrap; justify-content: center; font-size: .9em; background: rgb(245 230 195 / .7); border-radius: 999px; padding: .05em .8em; }
.ld-potline { display: inline-flex; align-items: center; gap: .35em; }
.ld-potline .chip { position: static; width: 1.1em; height: 1.1em; }
.stage.ld .ld-board .die.match { box-shadow: 0 0 0 .3cqw var(--brass-2); }

/* ---------- Last Card ---------- */
.stage.lc {
  aspect-ratio: 16 / 10.2; color: #eef1fb;
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%, rgb(120 150 230 / .22), transparent 70%),
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / .05) 1px, transparent 1.5px) 0 0 / 14px 14px,
    radial-gradient(ellipse at 50% 40%, #2c3f70, #1a2546 58%, #0d1429);
  box-shadow: inset 0 0 0 .6cqw #0b1022, inset 0 0 80px rgb(0 0 0 / .6);
}
.stage.narrow.lc { aspect-ratio: 3 / 4.7; }
.stage.lc .rail { display: none; }
:root { --lc-r: #d8433a; --lc-y: #efb21c; --lc-g: #2f9e57; --lc-b: #2b6cc9; --lc-w: #22222c; }

/* The cards: our own design. A white diamond in the middle, the number in the card's colour. */
.lc-card {
  --lcw: 6.6cqw; --c: var(--lc-w);
  position: relative; display: inline-block; width: var(--lcw); aspect-ratio: 2 / 3; border-radius: 10%; flex: none;
  background:
    radial-gradient(ellipse at 28% 18%, rgb(255 255 255 / .28), transparent 50%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / .07) 0 7%, transparent 7% 14%),
    var(--c);
  border: calc(var(--lcw) * .05) solid #fbfaf6;
  box-shadow: 0 calc(var(--lcw) * .05) calc(var(--lcw) * .12) rgb(0 0 0 / .45), inset 0 0 0 calc(var(--lcw) * .012) rgb(0 0 0 / .25);
  color: #fff; font-family: var(--font-display); line-height: 1; user-select: none;
}
.lc-card.lc-r { --c: var(--lc-r); } .lc-card.lc-y { --c: var(--lc-y); } .lc-card.lc-g { --c: var(--lc-g); } .lc-card.lc-b { --c: var(--lc-b); }
.lc-card.lc-w { --c: #24242e; background: radial-gradient(ellipse at 28% 18%, rgb(255 255 255 / .2), transparent 50%), repeating-linear-gradient(135deg, rgb(255 255 255 / .05) 0 7%, transparent 7% 14%), #24242e; }
.lc-card .mid { position: absolute; inset: 0; display: grid; place-items: center; }
.lc-card .mid::before { content: ""; position: absolute; width: 56%; aspect-ratio: 1; border-radius: 16%; rotate: 45deg; background: #fbfaf6; box-shadow: inset 0 0 0 calc(var(--lcw) * .02) rgb(0 0 0 / .12), 0 calc(var(--lcw) * .02) calc(var(--lcw) * .05) rgb(0 0 0 / .3); }
.lc-card.lc-w .mid::before { background: #111118; box-shadow: inset 0 0 0 calc(var(--lcw) * .025) rgb(255 255 255 / .55); }
.lc-card .mid b { position: relative; font-size: calc(var(--lcw) * .46); font-weight: 900; color: var(--c); -webkit-text-stroke: calc(var(--lcw) * .012) rgb(0 0 0 / .35); letter-spacing: -.04em; }
.lc-card.lc-w .mid b { color: #fff; font-size: calc(var(--lcw) * .32); text-shadow: 0 0 calc(var(--lcw) * .05) #000; }
.lc-card .mid svg { position: relative; width: 44%; color: var(--c); }
.lc-card .mid b svg { width: calc(var(--lcw) * .42); display: block; }
.lc-card .mid .lc-star { position: absolute; width: 52%; }
.lc-card.lc-w .mid b:not(:empty) { position: absolute; }
.lc-card .corner { position: absolute; font-size: calc(var(--lcw) * .17); font-weight: 900; text-shadow: 0 .05em 0 rgb(0 0 0 / .35); }
.lc-card .corner svg { width: calc(var(--lcw) * .17); display: block; }
.lc-card .corner.tl { left: 7%; top: 5%; }
.lc-card .corner.br { right: 7%; bottom: 5%; rotate: 180deg; }
.lc-card .shape { position: absolute; right: 7%; top: 6%; width: calc(var(--lcw) * .12); color: rgb(255 255 255 / .8); }
.lc-card .shape svg { display: block; width: 100%; }
.lc-card.tiny .corner, .lc-card.tiny .shape { display: none; }
/* The back */
.lc-card.lc-back {
  background:
    radial-gradient(ellipse at 50% 50%, rgb(255 255 255 / .1), transparent 60%),
    repeating-linear-gradient(45deg, #ffcf5a22 0 4%, transparent 4% 12%),
    repeating-linear-gradient(-45deg, #ffcf5a18 0 4%, transparent 4% 12%),
    #1c2148;
  display: grid; place-items: center;
}
.lc-card.lc-back .logo { rotate: -24deg; text-align: center; font-weight: 900; font-style: italic; color: #ffcf5a; font-size: calc(var(--lcw) * .17); line-height: .95; letter-spacing: .02em; text-shadow: 0 .06em 0 #7a4e00; padding: .2em .3em; border: calc(var(--lcw) * .02) solid #ffcf5a; border-radius: .4em; }
.lc-card.tiny { --lcw: 2.6cqw; border-width: calc(var(--lcw) * .06); }
.lc-card.tiny .logo { font-size: calc(var(--lcw) * .14); border: 0; }
.stage.narrow .lc-card { --lcw: 14.5cqw; }
.stage.narrow .lc-card.tiny { --lcw: 5.2cqw; }
.pref-large .stage .lc-hand .lc-card { --lcw: 7.6cqw; }
.pref-large .stage.narrow .lc-hand .lc-card { --lcw: 16cqw; }
.lc-card.fly { position: absolute; --lcw: 3.4cqw; z-index: 30; pointer-events: none; }
.stage.narrow .lc-card.fly { --lcw: 7cqw; }
.style-cb .lc-card .shape { color: #fff; width: calc(var(--lcw) * .16); }

/* Other players: a fan of face-down cards and a name */
.lc-seat { z-index: 3; display: grid; justify-items: center; gap: .35cqw; width: 18cqw; }
.stage.narrow .lc-seat { width: 24cqw; gap: .8cqw; }
.lc-seat.out { opacity: .5; }
.lc-fan { position: relative; height: calc(2.6cqw * 1.6); width: 100%; }
.stage.narrow .lc-fan { height: calc(5.2cqw * 1.55); }
.lc-fan .lc-card { position: absolute; left: 50%; bottom: 0; translate: -50% 0; transform-origin: 50% 120%; transform: rotate(calc(var(--i) * 7deg)); }
.stage .lc-fan.open { display: flex; flex-wrap: nowrap; justify-content: center; height: auto; width: auto; max-width: none; }
.lc-fan.open .lc-card + .lc-card { margin-left: calc(var(--lcw) * -.58); }
.lc-fan.open .lc-card { position: relative; left: auto; bottom: auto; translate: none; transform: none; }
.lc-name { display: flex; align-items: center; gap: .45em; padding: .12em .8em; border-radius: 999px; background: rgb(8 12 30 / .7); border: 1px solid rgb(255 255 255 / .18); font-size: .9em; white-space: nowrap; max-width: 100%; overflow: hidden; }
.lc-name .pts { font-size: .82em; opacity: .8; }
.lc-name .tagline { font-size: .72em; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.stage.narrow .lc-seat .lc-name { flex-direction: column; gap: 0; border-radius: 8px; padding: .1em .6em; font-size: .85em; }
.stage.narrow .lc-seat .tagline { display: none; }
.lc-seat .sub { font-size: .8em; opacity: .85; text-shadow: 0 1px 2px #000; }
.lc-seat.acting .lc-name, .lc-me.acting .lc-name { border-color: #ffd36a; box-shadow: 0 0 0 .3cqw rgb(255 211 106 / .45), 0 0 1.6cqw rgb(255 211 106 / .5); }
.lc-seat.winner .lc-name { background: #e8b844; color: #2a1b00; }
.lc-seat .badges { display: flex; gap: .3em; flex-wrap: wrap; justify-content: center; }
.lc-badge { font-size: .72em; font-weight: 800; padding: .1em .6em; border-radius: 999px; white-space: nowrap; }
.lc-badge.call { background: #2f9e57; color: #fff; }
.lc-badge.forgot { background: #d8433a; color: #fff; animation: lc-blink 1s ease-in-out infinite alternate; }
.lc-badge.win { background: #e8b844; color: #2a1b00; }
@keyframes lc-blink { from { opacity: 1; } to { opacity: .55; } }

/* The middle: draw pile, played cards, colour, direction */
.lc-ring { width: 30cqw; aspect-ratio: 1; color: rgb(255 255 255 / .16); z-index: 1; pointer-events: none; }
.stage.narrow .lc-ring { width: 64cqw; }
.lc-ring svg { width: 100%; height: 100%; }
.lc-ring.ccw svg { transform: scaleX(-1); }
.lc-deck, .lc-pile { z-index: 2; display: grid; justify-items: center; }
.lc-deck .lc-card.pile, .lc-pile .lc-card.pile { --lcw: 7.2cqw; }
.stage.narrow .lc-deck .lc-card.pile, .stage.narrow .lc-pile .lc-card.pile { --lcw: 17cqw; }
.lc-deck .lc-card.pile { grid-area: 1 / 1; translate: calc(var(--d) * -.3cqw) calc(var(--d) * -.3cqw); }
.lc-pile .lc-card.top, .lc-pile .lc-under { grid-area: 1 / 1; }
.lc-under { width: 7.2cqw; aspect-ratio: 2 / 3; border-radius: 10%; background: #fbfaf6; box-shadow: 0 .2cqw .5cqw rgb(0 0 0 / .4); }
.stage.narrow .lc-under { width: 17cqw; }
.lc-under.u1 { rotate: 9deg; } .lc-under.u2 { rotate: -14deg; }
.lc-pile.lc-glow-r .lc-card.top { box-shadow: 0 0 0 .35cqw var(--lc-r), 0 0 2.4cqw var(--lc-r); }
.lc-pile.lc-glow-y .lc-card.top { box-shadow: 0 0 0 .35cqw var(--lc-y), 0 0 2.4cqw var(--lc-y); }
.lc-pile.lc-glow-g .lc-card.top { box-shadow: 0 0 0 .35cqw var(--lc-g), 0 0 2.4cqw var(--lc-g); }
.lc-pile.lc-glow-b .lc-card.top { box-shadow: 0 0 0 .35cqw var(--lc-b), 0 0 2.4cqw var(--lc-b); }
.lc-count, .lc-colour { margin-top: .6cqw; font-size: .82em; opacity: .85; display: inline-flex; align-items: center; gap: .4em; text-transform: capitalize; }
.stage.narrow .lc-count, .stage.narrow .lc-colour { margin-top: 1.4cqw; }
.dot { width: .9em; height: .9em; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px rgb(255 255 255 / .7); }
.lc-dot-r { background: var(--lc-r); } .lc-dot-y { background: var(--lc-y); } .lc-dot-g { background: var(--lc-g); } .lc-dot-b { background: var(--lc-b); }
.lc-stack { z-index: 4; background: #d8433a; color: #fff; font-weight: 800; padding: .2em .9em; border-radius: 999px; box-shadow: 0 .3cqw .8cqw rgb(0 0 0 / .5); }
.lc-lastmove { z-index: 2; font-size: .85em; opacity: .85; white-space: nowrap; text-shadow: 0 1px 2px #000; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }

/* Your hand */
.lc-me { z-index: 4; display: flex; gap: .5em; align-items: center; }
.lc-hand { position: absolute; left: 0; right: 0; bottom: 3%; height: calc(6.6cqw * 1.5 + 1cqw); z-index: 5; }
.stage.narrow .lc-hand { height: calc(14.5cqw * 1.5 + 2cqw); }
.lc-hand.two { height: calc(6.6cqw * 2.6); }
.stage.narrow .lc-hand.two { height: calc(14.5cqw * 2.55); }
.lc-cardbtn { position: absolute; bottom: calc(var(--row) * 6.6cqw * 1.05); padding: 0; margin: 0; border: 0; background: none; transition: transform .15s ease, filter .15s ease; border-radius: 10%; }
.stage.narrow .lc-cardbtn { bottom: calc(var(--row) * 14.5cqw * 1.05); }
.lc-cardbtn .lc-card { display: block; }
.lc-cardbtn.can { transform: translateY(-14%); cursor: pointer; filter: drop-shadow(0 0 .9cqw rgb(255 225 140 / .65)); }
.lc-cardbtn.can:hover, .lc-cardbtn.can:focus-visible { transform: translateY(-24%); z-index: 50; }
.lc-cardbtn.can:focus-visible { outline: 3px solid #ffd36a; outline-offset: 2px; }
.lc-cardbtn.dim { filter: brightness(.62) saturate(.7); }
.lc-cardbtn.jump { animation: lc-jump 0.9s ease-in-out infinite alternate; }
.lc-cardbtn.picked { transform: translateY(-30%); filter: drop-shadow(0 0 1.2cqw #fff); }
@keyframes lc-jump { from { filter: drop-shadow(0 0 .5cqw #ffd36a); } to { filter: drop-shadow(0 0 1.8cqw #ffd36a); } }
.lc-hidden { position: absolute; left: 50%; bottom: 0; translate: -50% 0; display: flex; }
.lc-hidden .lc-card { margin-left: -4cqw; }
.stage.narrow .lc-hidden .lc-card { margin-left: -9cqw; }

/* Under the table */
.lc-pickbox { display: grid; gap: 8px; justify-items: center; text-align: center; }
.lc-pickbox p { margin: 0; }
.lc-colours { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lc-colbtn { min-width: 76px; min-height: 64px; border-radius: 14px; border: 3px solid rgb(255 255 255 / .8); color: #fff; font-weight: 800; display: grid; place-items: center; gap: 2px; cursor: pointer; padding: 6px 10px; text-transform: capitalize; box-shadow: 0 2px 6px rgb(0 0 0 / .3); }
.lc-colbtn svg { width: 18px; }
.lc-colbtn:hover { transform: translateY(-2px); }
.lc-colbtn:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.lc-colbtn.lc-dot-y { color: #2b1d00; }
.lc-quick { margin-bottom: 8px; }
.btn.pulse { animation: lc-blink .8s ease-in-out infinite alternate; }
.lc-scores { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 2px 0 6px; }
.lc-scores span.lead { color: var(--accent); font-weight: 800; }
.lc-histcards { display: flex; flex-wrap: wrap; gap: 4px; }
.lc-histcards .lc-card, .dlg-body .lc-card { --lcw: 30px; }
.tile .art.lcart { background: linear-gradient(160deg, #2c3f70, #141d38); gap: 6px; }
.tile .art.lcart .lc-card { --lcw: 34px; }
.tile .art.lcart .lc-card:nth-child(1) { rotate: -10deg; } .tile .art.lcart .lc-card:nth-child(3) { rotate: 10deg; }

/* Light graphics: for slower phones and computers. No looping animations, glows, blurs or moving light. */
.lite *, .lite *::before, .lite *::after { animation: none !important; transition: none !important; }
.lite .stage, .lite .stage.lc, .lite .stage.ld { box-shadow: none; }
.lite .ld-light, .lite .ld-candleglow, .lite .ld-lantern .ld-glow { display: none; }
.lite .lc-cardbtn.can, .lite .lc-cardbtn.dim, .lite .lc-cardbtn.picked, .lite .lc-cardbtn.jump { filter: none; }
.lite .lc-cardbtn.can .lc-card { outline: 3px solid #ffd36a; outline-offset: 1px; }
.lite .lc-cardbtn.dim { opacity: .6; }
.lite .lc-card { box-shadow: 0 1px 2px rgb(0 0 0 / .4); }
.lite .lc-pile .lc-card.top { box-shadow: 0 0 0 .35cqw rgb(255 255 255 / .6) !important; }
.lite .lc-pile.lc-glow-r .lc-card.top { box-shadow: 0 0 0 .4cqw var(--lc-r) !important; }
.lite .lc-pile.lc-glow-y .lc-card.top { box-shadow: 0 0 0 .4cqw var(--lc-y) !important; }
.lite .lc-pile.lc-glow-g .lc-card.top { box-shadow: 0 0 0 .4cqw var(--lc-g) !important; }
.lite .lc-pile.lc-glow-b .lc-card.top { box-shadow: 0 0 0 .4cqw var(--lc-b) !important; }
.lite .die { box-shadow: 0 1px 2px rgb(0 0 0 / .5); }
.lite .die i { box-shadow: none; }
.lite .die.other { filter: none; opacity: .55; }
.lite .ld-cup { box-shadow: 0 2px 4px rgb(0 0 0 / .6); }
.lite .ld-cup::after { display: none; }
.lite .ld-name, .lite .ld-placard, .lite .ld-board, .lite .coin, .lite .card, .lite .seat { box-shadow: none; }
#handoff .btn.catch, .btn.catch { background: #d8433a; color: #fff; border-color: #a52b23; }

/* ---------- Last Card effects ---------- */
.fx-pop { position: absolute; translate: -50% -50%; z-index: 40; pointer-events: none; font-family: var(--font-display); font-weight: 900; white-space: nowrap;
  font-size: clamp(22px, 5cqw, 64px); color: #fff; text-shadow: 0 .06em 0 rgb(0 0 0 / .45), 0 0 .4em rgb(0 0 0 / .5);
  opacity: 0; animation: fx-pop 1.25s cubic-bezier(.2,.9,.3,1.2) forwards; }
.fx-pop svg { width: clamp(46px, 9cqw, 120px); display: block; filter: drop-shadow(0 0 .25em rgb(0 0 0 / .5)); }
@keyframes fx-pop {
  0% { opacity: 0; transform: scale(.2) rotate(-12deg); }
  22% { opacity: 1; transform: scale(1.3) rotate(4deg); }
  38% { transform: scale(1) rotate(0); }
  78% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(1.15) translateY(-40%); }
}
.fx-pop.skip { color: #ff5a4e; }
.fx-pop.rev { color: #8fd3ff; animation-name: fx-spin; }
@keyframes fx-spin { 0% { opacity: 0; transform: scale(.3) rotate(-180deg); } 30% { opacity: 1; transform: scale(1.25) rotate(0); } 75% { opacity: 1; transform: scale(1) rotate(180deg); } 100% { opacity: 0; transform: scale(.8) rotate(360deg); } }
.fx-pop.plus { background: linear-gradient(#fff4a8, #ffb21c 55%, #ff6a2a); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .03em #5a2400; text-shadow: none; filter: drop-shadow(0 .05em .1em rgb(0 0 0 / .6)); }
.fx-pop.plus.big { font-size: clamp(30px, 8cqw, 96px); }
.fx-pop.jump { color: #ffe066; font-style: italic; }
.fx-pop.caught { color: #fff; background: #d8433a; padding: .1em .5em; border-radius: .2em; border: .08em solid #fff; font-size: clamp(16px, 3.4cqw, 40px); animation-name: fx-stamp; }
@keyframes fx-stamp { 0% { opacity: 0; transform: scale(2.4) rotate(-14deg); } 18% { opacity: 1; transform: scale(.95) rotate(-8deg); } 26% { transform: scale(1) rotate(-8deg); } 80% { opacity: 1; transform: scale(1) rotate(-8deg); } 100% { opacity: 0; transform: scale(1) rotate(-8deg); } }
.fx-pop.swap { color: #c9a7ff; }
.fx-pop.round { font-size: clamp(18px, 3.6cqw, 44px); color: #fff; letter-spacing: .04em; }
.fx-pop.win { color: #ffe066; font-size: clamp(26px, 6cqw, 80px); animation-duration: 2.4s; }
.fx-bubble { position: absolute; z-index: 41; pointer-events: none; translate: -50% -140%; background: #fff; color: #1a1a2a; font-weight: 900; font-family: var(--font-display);
  padding: .35em .8em; border-radius: 1em; font-size: clamp(13px, 2.2cqw, 24px); box-shadow: 0 .2em .6em rgb(0 0 0 / .4); white-space: nowrap;
  opacity: 0; animation: fx-bubble 1.8s ease-out forwards; }
.fx-bubble::after { content: ""; position: absolute; left: 50%; bottom: -.45em; translate: -50% 0; border: .5em solid transparent; border-top-color: #fff; border-bottom: 0; }
.fx-bubble.call { background: #2f9e57; color: #fff; } .fx-bubble.call::after { border-top-color: #2f9e57; }
.fx-bubble.forgot { background: #d8433a; color: #fff; } .fx-bubble.forgot::after { border-top-color: #d8433a; }
@keyframes fx-bubble { 0% { opacity: 0; transform: scale(.4); } 15% { opacity: 1; transform: scale(1.12); } 25% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20%); } }
.fx-wave { position: absolute; translate: -50% -50%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, transparent 50%, var(--wave) 62%, transparent 72%); mix-blend-mode: screen; }
.lite .fx-wave { mix-blend-mode: normal; opacity: .5; }
.fx-confetti { position: absolute; width: 9px; height: 14px; z-index: 45; pointer-events: none; border-radius: 2px; }

/* ---------- Last Card backgrounds (your own choice, only on your screen) ---------- */
.stage.lc.lcbg-sunset { background: radial-gradient(ellipse 70% 60% at 50% 46%, rgb(255 210 150 / .25), transparent 70%), radial-gradient(circle at 1px 1px, rgb(255 255 255 / .06) 1px, transparent 1.5px) 0 0 / 14px 14px, linear-gradient(170deg, #ff8a5c, #c2456f 45%, #4a1f5c); }
.stage.lc.lcbg-ocean { background: radial-gradient(ellipse 70% 60% at 50% 46%, rgb(160 240 255 / .22), transparent 70%), repeating-radial-gradient(circle at 50% 120%, rgb(255 255 255 / .04) 0 14px, transparent 14px 34px), linear-gradient(180deg, #0f8fb0, #0b4f7a 55%, #072a49); }
.stage.lc.lcbg-forest { background: radial-gradient(ellipse 70% 60% at 50% 46%, rgb(200 255 170 / .18), transparent 70%), radial-gradient(circle at 1px 1px, rgb(255 255 255 / .05) 1px, transparent 1.5px) 0 0 / 14px 14px, radial-gradient(ellipse at 50% 40%, #2f7a3e, #1a4a26 60%, #0c2614); }
.stage.lc.lcbg-candy { background: radial-gradient(ellipse 70% 60% at 50% 46%, rgb(255 255 255 / .25), transparent 70%), repeating-linear-gradient(45deg, rgb(255 255 255 / .08) 0 18px, transparent 18px 36px), linear-gradient(160deg, #ff8fc8, #b46cf0 55%, #6a4bd8); }
.stage.lc.lcbg-space { background:
  radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 72% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 75%, #fff, transparent),
  radial-gradient(1px 1px at 88% 82%, #fff, transparent), radial-gradient(1px 1px at 25% 55%, #cfe, transparent), radial-gradient(2px 2px at 60% 12%, #fff, transparent),
  radial-gradient(1px 1px at 8% 88%, #fff, transparent), radial-gradient(1.5px 1.5px at 93% 8%, #fdf, transparent),
  radial-gradient(ellipse at 25% 30%, rgb(140 80 255 / .35), transparent 50%), radial-gradient(ellipse at 80% 75%, rgb(40 160 255 / .3), transparent 55%), #070818; }
.stage.lc.lcbg-wood { background: radial-gradient(ellipse 70% 60% at 50% 46%, rgb(255 210 150 / .2), transparent 70%), repeating-linear-gradient(90deg, rgb(0 0 0 / .1) 0 2px, transparent 2px 22%), repeating-linear-gradient(0deg, rgb(255 255 255 / .03) 0 3px, transparent 3px 9px), linear-gradient(90deg, #7a4a28, #8e5a32 30%, #6e4224 60%, #835230); }
.stage.lc.lcbg-felt { background: radial-gradient(ellipse 70% 60% at 50% 46%, rgb(255 255 255 / .12), transparent 70%), radial-gradient(circle at 1px 1px, rgb(0 0 0 / .12) 1px, transparent 1.5px) 0 0 / 6px 6px, radial-gradient(ellipse at 50% 45%, #1f8a5a, #116041 65%, #08381f); }
.stage.lc.lcbg-neon { background: linear-gradient(rgb(255 60 200 / .14) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgb(60 200 255 / .14) 1px, transparent 1px) 0 0 / 40px 40px, radial-gradient(ellipse at 50% 45%, #251040, #0d0420 70%); }
.stage.lc.lcbg-neon .lc-ring { color: rgb(255 80 220 / .45); filter: drop-shadow(0 0 4px #ff4fd8); }
.lite .stage.lc.lcbg-neon .lc-ring { filter: none; }
.lc-bgswatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; vertical-align: -4px; margin-right: 6px; }
/* The draw pile is tappable on your turn */
button.lc-deck { padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: 1cqw; }
button.lc-deck .lc-card.pile[style*="--d:0"] { box-shadow: 0 0 0 .35cqw #ffd36a, 0 0 1.8cqw rgb(255 211 106 / .7); }
button.lc-deck:hover .lc-card.pile[style*="--d:0"], button.lc-deck:focus-visible .lc-card.pile[style*="--d:0"] { translate: calc(var(--d) * -.3cqw) -6%; }
button.lc-deck:focus-visible { outline: 3px solid #ffd36a; outline-offset: 4px; }
button.lc-deck .lc-count b { color: #ffd36a; }
button.lc-deck { animation: lc-deckpulse 1.4s ease-in-out infinite alternate; }
@keyframes lc-deckpulse { from { filter: none; } to { filter: drop-shadow(0 0 .8cqw rgb(255 211 106 / .55)); } }
button.lc-deck .lc-count { text-transform: none; }