/* Functional, not finished: crit 8's spec explicitly defers visual
   polish, and the visual identity itself (product decision 5 in
   PLAN.md) is the student's own design call, not this MVP's. This is a
   plain, readable, accessible baseline to build on top of. */

:root {
  color-scheme: light dark;
  --bg: #0b1021;
  --panel: #161c33;
  --fg: #f4f4f8;
  --muted: #a7acc4;
  --accent: #e8b339;
  --border: #2a3356;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 1.25rem;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

h1,
h2,
h3 {
  margin: 0 0 0.5rem;
}

a {
  color: var(--accent);
}

main,
.entry,
.table,
.readme {
  max-width: 40rem;
  margin: 0 auto;
}

.readme {
  max-width: 48rem;
}

.note {
  color: var(--muted);
  font-size: 0.9rem;
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1rem;
}

input,
button {
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--border);
}

input {
  background: var(--bg);
  color: var(--fg);
}

button {
  background: var(--accent);
  color: #1a1206;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button.secondary {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
}

button.danger {
  background: #d1495b;
  color: var(--fg);
}

button + button {
  margin-left: 0.5rem;
}

.colors {
  display: flex;
  gap: 0.5rem;
}

.color-swatch,
.swatch {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  display: inline-block;
}

.swatch {
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.color-swatch.selected {
  border-color: var(--fg);
}

.color-swatch.taken {
  opacity: 0.3;
  cursor: not-allowed;
}

.color-swatch.red,
.swatch.red {
  background: #d1495b;
}
.color-swatch.blue,
.swatch.blue {
  background: #3a86ff;
}
.color-swatch.green,
.swatch.green {
  background: #2a9d8f;
}
.color-swatch.yellow,
.swatch.yellow {
  background: #e9c46a;
}
/* Bar-identity colours: a separate, larger palette from the Vegas
   table's 4 (PLAN.md decision — the bar isn't capped at 4 patrons). */
.color-swatch.purple,
.swatch.purple {
  background: #9b5de5;
}
.color-swatch.teal,
.swatch.teal {
  background: #2ec4b6;
}
.color-swatch.orange,
.swatch.orange {
  background: #f4895f;
}
.color-swatch.pink,
.swatch.pink {
  background: #f06ba8;
}

.error {
  color: #ff8a8a;
}

.players {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.players li {
  padding: 0.4rem 0.6rem;
  border-radius: 0.375rem;
  background: var(--panel);
}

.players li.current-turn {
  outline: 2px solid var(--accent);
}

.casinos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.5rem;
  margin: 1rem 0;
}

.casino {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}

.casino ul {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.bills {
  color: var(--accent);
  font-weight: 600;
}

.value-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.turn-note {
  color: var(--muted);
}

.notes {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.return-banner {
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.invite-link {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0.5rem 0 1rem;
  flex-wrap: wrap;
}

.invite-link-field {
  flex: 1;
  min-width: 10rem;
  font-size: 0.85rem;
}

.copy-status {
  color: var(--muted);
  font-size: 0.85rem;
}

.join-by-code {
  flex-direction: row;
}

.join-by-code input {
  flex: 1;
}

header + .players {
  margin-top: 0;
}

.build-version {
  position: fixed;
  bottom: 0.4rem;
  right: 0.6rem;
  margin: 0;
  font-size: 0.7rem;
  color: var(--muted);
  opacity: 0.7;
  font-family: monospace;
}

.bar-page {
  max-width: 48rem;
  margin: 0 auto;
}

.bar-canvas-wrap {
  background: #1a120b;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin: 0.75rem 0;
  line-height: 0;
}

.bar-canvas-wrap canvas {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
  cursor: pointer;
  touch-action: manipulation;
}

.bar-status {
  color: var(--muted);
  font-size: 0.85rem;
  min-height: 1.2em;
}

.classic-entry {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* Full-screen world: the viewport is a camera, never a scaled whole map. */
body.world-mode { padding:0; overflow:hidden; background:#3e3036; }
.tavern-world { position:fixed; inset:0; overflow:hidden; }
.seat-layer { position:absolute; inset:0; pointer-events:none; }
.seat-layer button.seat-target { position:absolute; top:0; left:0; display:none; width:64px; height:64px; margin:0; padding:0; border:2px solid transparent; border-radius:8px; background:transparent; pointer-events:auto; cursor:pointer; touch-action:manipulation; }
.seat-layer button.seat-target:hover,.seat-layer button.seat-target:focus-visible { border-color:#ffe0a1; background:#ffe0a125; box-shadow:0 0 10px #ffd48680; outline:none; }
.seat-layer button.seat-target:hover::after,.seat-layer button.seat-target:focus-visible::after { content:attr(data-hint); position:absolute; bottom:66px; left:50%; transform:translateX(-50%); padding:5px 8px; white-space:nowrap; border-radius:5px; color:#fff1cf; background:#30242a; font-size:11px; pointer-events:none; }
.tavern-world > canvas { display:block; width:100%; height:100%; image-rendering:pixelated; touch-action:none; outline:none; }
/* The overhead holding/eat/drink prompt (CLAUDE.md's seated-eating
   section) — a real seat-target-style button so it's reachable the same
   way every other in-world hotspot already is (tab, tap, no hover
   requirement), but styled as a small pill rather than a square hotspot
   since it carries real text, not just a silent hover hint. */
.eat-prompt-target { width:auto!important; height:auto!important; display:none; padding:4px 10px!important; border-radius:999px!important; background:#3f4a33e6!important; color:#e9f0d8; font-size:11px; font-weight:600; letter-spacing:.3px; border:1px solid #6b7d4f80!important; box-shadow:0 4px 12px #0005; }
.eat-prompt-target:hover,.eat-prompt-target:focus-visible { background:#4c5a3de6!important; border-color:#9fb56f!important; }
.eat-prompt-target:disabled { cursor:default; opacity:.85; }
.eat-prompt-target.eat-prompt-passive { background:#3f4a3399!important; }
/* The seated eating/drinking cutscene — a second full-screen layer above
   everything else in the scene (HUD included), shown only while an
   eating action is actually in progress for this viewer. */
.eating-cutscene { position:absolute; inset:0; z-index:30; display:none; image-rendering:pixelated; }
.world-hud { position:absolute; top:22px; left:24px; right:24px; display:flex; justify-content:space-between; gap:16px; align-items:center; pointer-events:none; }
.world-brand { display:flex; align-items:center; gap:12px; color:#fae9cd; padding:12px 18px; border:1px solid #d9b27b40; background:#272531e8; border-radius:14px; box-shadow:0 5px 24px #0003; }
.brand-mark { color:#e9b86a; font-size:28px; }
.world-brand strong { font-size:14px; letter-spacing:2px; display:block; }
.world-brand small { display:block; color:#c0af9d; font-size:11px; margin-top:3px; }
.hud-actions { display:flex; gap:10px; align-items:center; pointer-events:auto; }
.online-count { background:#272531e8; color:#e6d6bd; padding:11px 15px; border-radius:12px; font-size:12px; }
.online-count::before { content:'●'; color:#9cc9a3; margin-right:8px; }
button.hud-button { background:#272531ed; color:#f3e2c7; border:1px solid #d9b27b40; padding:11px 16px; border-radius:12px; font-size:12px; margin:0; }
/* Compact, read-only stamina chip beside "Your character" — a server-
   computed status display, not a control; clicking it opens the same
   character panel "Your character" does (CLAUDE.md's "Stamina" section:
   one combined entry point, never a second place to look). */
button.stamina-chip { display:flex; align-items:center; gap:7px; padding:9px 12px; }
.stamina-track { position:relative; width:46px; height:8px; background:#1d1a22; border-radius:5px; overflow:hidden; border:1px solid #00000040; }
.stamina-fill { position:absolute; inset:0; width:0; background:linear-gradient(90deg,#8cb87a,#c7d98f); border-radius:5px 0 0 5px; transition:width .3s ease; }
.stamina-chip.stamina-low .stamina-fill { background:linear-gradient(90deg,#c97a52,#dba35f); }
.stamina-pct { font-size:11px; min-width:30px; text-align:left; }
/* The fuller panel inside the character dialog, below the clothing/skin
   pickers — same read-only principle, just room for a one-line note. */
.stamina-panel { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.stamina-track-large { width:140px; height:12px; }
.stamina-panel-pct { font-size:13px; font-weight:650; color:#453b3f; }
.stamina-note { flex-basis:100%; margin:4px 0 0; font-size:11px; color:#877568; }
/* Account status block inside the character panel, and the floating
   Log in / Sign up / Continue as guest entry overlay — same visual
   language as the stamina panel just above (a small bordered block
   under its own .option-label), nothing new introduced. */
.account-panel { display:flex; flex-direction:column; gap:8px; }
.account-panel p { margin:0; font-size:12px; color:#453b3f; }
.account-panel-actions { display:flex; gap:8px; flex-wrap:wrap; }
.auth-dialog .auth-menu { display:flex; flex-direction:column; gap:10px; margin:18px 0; }
.auth-dialog label { font-size:11px; font-weight:650; color:#776765; display:block; margin:10px 0 4px; }
.auth-dialog input { background:#fffaf3; border:1px solid #d9cec0; color:#453b3f; padding:12px; width:100%; font-size:14px; box-sizing:border-box; }
/* The password input + its own show/hide eye (2026-11-04) — the input
   keeps its own full-width styling above, with its right padding
   widened here so real text/dots never sit underneath the button; the
   button is sized well past the 44px touch-target minimum and placed
   with its own padding so a finger on mobile can't miss it or clip the
   input's own right edge. */
.password-field { position:relative; width:100%; }
.password-field input { padding-right:46px; margin:0; }
.password-toggle { position:absolute; top:0; right:0; bottom:0; width:44px; min-width:44px; padding:0; margin:0; display:grid; place-items:center; background:transparent; border:none; border-radius:0 4px 4px 0; color:#8a7a68; font-size:18px; cursor:pointer; }
.password-toggle:hover,.password-toggle:focus-visible { color:#453b3f; background:#00000008; outline:none; }
.password-toggle-active { color:#6b5a8a; }
.auth-migrate-row { display:flex; align-items:center; gap:8px; margin:12px 0; }
.auth-migrate-row label { margin:0; font-weight:400; color:#453b3f; }
.auth-migrate-row input { width:auto; padding:0; }
.auth-forgot-link { background:transparent; border:none; color:#6b5a8a; font-size:12px; text-decoration:underline; padding:4px 0; margin:4px 0 0; width:auto; display:block; }
.auth-forgot-link:hover,.auth-forgot-link:focus-visible { color:#453b3f; }
/* The one-time recovery-code display (2026-11-04) — a plain monospace
   grid so every code is easy to read/copy by hand, each in its own list
   item for screen-reader navigation. */
.recovery-code-list { list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:18px 0; padding:0; }
.recovery-code-list li { background:#fffaf3; border:1px solid #d9cec0; border-radius:6px; padding:10px; text-align:center; }
.recovery-code-list code { font-family:'Courier New',monospace; font-size:15px; font-weight:700; color:#453b3f; letter-spacing:1px; }
@media (max-width:480px) { .recovery-code-list { grid-template-columns:1fr; } }
.world-toast { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); max-width:calc(100% - 40px); text-align:center; color:#e8d7c1; padding:11px 22px; border:1px solid #d9b27b30; background:#272531ed; border-radius:30px; font-size:12px; pointer-events:none; }
.world-overlay { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; padding:24px; }
.world-overlay:has(> *) { background:#18151d65; backdrop-filter:blur(2px); pointer-events:auto; }
/* A real bug, not just cosmetic (2026-11-04): the chat toggle/bubble and
   the on-screen d-pad have no z-index/stacking context of their own, so
   with no rule hiding them they painted on top of any open dialog
   (first caught with the login/signup form, but true of every world
   dialog this file renders) even though the dpad's own click handlers
   were already correctly refusing to act (overlay.childElementCount).
   `.tavern-world:has(>.world-overlay>*)` reaches the dialog's siblings
   from their shared parent, the same reasoning world-overlay's own
   :has() rule above already uses one level up. */
.tavern-world:has(>.world-overlay>*) .speech-toggle,
.tavern-world:has(>.world-overlay>*) .speech-bar { display:none; }
.tavern-world:has(>.world-overlay>*) .world-dpad { visibility:hidden; }
.world-dialog { pointer-events:auto; width:min(590px,100%); max-height:calc(100dvh - 48px); overflow-y:auto; padding:32px; border-radius:22px; background:#faf3e7; border:1px solid #fff7e2; color:#40383f; box-shadow:0 24px 90px #110c1760; position:relative; }
.world-dialog h1 { font-family:Georgia,serif; font-size:36px; font-weight:normal; letter-spacing:-1px; margin:0; }
.eyebrow { color:#917357; letter-spacing:2px; font-size:10px; font-weight:700; margin:0 0 10px; }
.dialog-subtitle { color:#847b79; font-size:13px; margin:3px 0 16px; }
.avatar-editor { display:grid; grid-template-columns:160px 1fr; gap:24px; align-items:center; }
.avatar-preview { background:#e7ddcf; border-radius:16px; text-align:center; border:1px solid #d7c8b4; overflow:hidden; }
.avatar-preview canvas { width:160px; height:160px; image-rendering:pixelated; display:block; }
.avatar-preview span { display:block; font-size:9px; letter-spacing:1.5px; color:#9b846d; padding:0 0 14px; }
.avatar-options { display:flex; flex-direction:column; gap:8px; }
.avatar-options label,.option-label { font-size:11px; font-weight:650; color:#776765; }
.avatar-options input { background:#fffaf3; border:1px solid #d9cec0; color:#453b3f; padding:12px; width:100%; font-size:14px; }
.avatar-swatches { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:8px; }
button.avatar-swatch { background:var(--swatch); width:26px; height:26px; min-width:26px; padding:0; border:3px solid #faf3e7; box-shadow:0 0 0 1px #d9cec0; border-radius:7px; margin:0; }
button.avatar-swatch[aria-pressed=true] { box-shadow:0 0 0 2px #5b5068; }
/* The NPC player-count row reuses the same swatch button shape, but shows
   a number (2-5) rather than a colour — no --swatch variable, so it needs
   its own background/text styling instead of inheriting one. */
button.avatar-swatch.count-swatch { background:#eee5d8; color:#453b3f; font-size:13px; font-weight:700; width:30px; height:30px; }
button.avatar-swatch.count-swatch[aria-pressed=true] { background:#62506e; color:#fff6e6; }
button.enter-world { background:#62506e; color:#fff6e6; border-radius:10px; padding:13px; font-size:14px; letter-spacing:.2px; }
.dialog-footnote { text-align:center; color:#968783; font-size:10px; margin:0; }
.world-dialog .error { margin:0; font-size:12px; color:#aa4242; }
.world-dpad { position:absolute; bottom:80px; right:24px; display:grid; grid-template-columns:repeat(3,42px); grid-template-rows:repeat(2,42px); gap:4px; }
.world-dpad button { margin:0; background:#272531df; color:#f3e2c7; border:1px solid #d9b27b40; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.world-dpad button:active { background:#62506e; }
.world-dpad button:first-child { grid-column:2; }
.world-dpad button:nth-child(2) { grid-column:1; grid-row:2; }
.world-dpad button:nth-child(3) { grid-column:2; grid-row:2; }
.world-dpad button:nth-child(4) { grid-column:3; grid-row:2; }
.world-mode .build-version { z-index:5; color:#eddfc9; font-size:9px; bottom:4px; right:8px; }
.dialog-close { position:absolute; top:14px; right:14px; background:transparent; color:#756575; font-size:24px; }
.game-dialog .classic-entry { margin:0; padding:0; border:0; }
.game-dialog form,.game-dialog .return-banner { background:#eee5d8; border-color:#dac7ad; }
.game-dialog input { background:#fffaf3; color:#453b3f; border-color:#d9cec0; }
.game-dialog .note { color:#877568; }
/* Public tavern speech (product-direction-update, part 3's replacement
 * for private 1:1 chat, after the student's own acceptance testing) — a
 * compact always-visible input, never a dialog; the bubble itself is
 * drawn on the canvas (public/tavern.js's drawSpeechBubble), not DOM, so
 * it can never intercept a click. */
.speech-bar { position:absolute; bottom:80px; left:24px; right:184px; display:flex; gap:8px; pointer-events:auto; }
.speech-bar[hidden] { display:none; }
.speech-toggle { position:absolute; bottom:184px; right:70px; width:44px; height:40px; padding:0; margin:0; display:grid; place-items:center; border:1px solid #d9b27b80; border-radius:13px; background:#302b2aee; color:#f3e2c7; font:bold 14px/1 Arial,sans-serif; letter-spacing:2px; box-shadow:0 3px 8px #0004; }
.speech-toggle::after { content:''; position:absolute; right:8px; bottom:-6px; width:9px; height:9px; background:#302b2a; border-right:1px solid #d9b27b80; border-bottom:1px solid #d9b27b80; transform:skewY(-35deg); }
.speech-toggle:hover,.speech-toggle[aria-expanded=true] { background:#64503c; }
.speech-input { flex:1; background:#272531ed; color:#f3e2c7; border:1px solid #d9b27b40; border-radius:12px; padding:11px 14px; font-size:13px; }
.speech-input::placeholder { color:#c0af9d; }
button.speech-send { padding:11px 18px; margin:0; }
@media(max-width:600px) {
  .world-hud { top:12px; left:12px; right:12px; align-items:flex-start; }
  .world-brand { padding:9px 11px; gap:6px; }
  .world-brand strong { font-size:10px; letter-spacing:1px; }
  .world-brand small { display:none; }
  .brand-mark { font-size:18px; }
  .hud-actions { flex-wrap:wrap; justify-content:flex-end; gap:4px; max-width:155px; }
  .online-count,button.hud-button { padding:9px 10px; font-size:10px; }
  .stamina-track { width:30px; height:6px; }
  .stamina-pct { font-size:9px; min-width:22px; }
  button.stamina-chip { padding:7px 8px; gap:5px; }
  .world-overlay { padding:16px; }
  .world-dialog { padding:24px; border-radius:16px; }
  .world-dialog h1 { font-size:29px; }
  .avatar-editor { grid-template-columns:1fr; gap:14px; }
  .avatar-preview { display:flex; align-items:center; justify-content:center; height:120px; }
  .avatar-preview canvas { width:128px; height:128px; }
  .avatar-preview span { padding:0; max-width:70px; }
  .speech-bar { left:12px; right:12px; bottom:238px; }
  button.avatar-swatch { width:32px; height:32px; }
  .world-toast { bottom:20px; font-size:10px; padding:9px 15px; }
}

/* Physical tabletop, original artwork; the tavern palette stays scoped to game pages. */
body.table-mode { --bg:#50372a; --panel:#49372f; --fg:#f5e7ca; --muted:#d0b997; --border:#9b7850; --accent:#e4b969; --dice-red:#bf5554; --dice-blue:#567fac; --dice-green:#509b7d; --dice-yellow:#d7ad4f; --dice-purple:#9476af; color-scheme:dark; padding:20px 24px; background-color:#79533d; background-image:linear-gradient(90deg,#25180d35 2px,transparent 2px),repeating-linear-gradient(0deg,#2f201b60 0 2px,transparent 2px 88px),repeating-linear-gradient(90deg,#76513e 0 144px,#805a42 144px 288px); background-size:144px 100%,288px 176px,auto; background-attachment:fixed; }
.table-mode .table { max-width:1060px; padding:0 28px 24px; border:1px solid #b78b5744; border-radius:16px; background:#2b231c48; box-shadow:0 20px 80px #20140e40; }
.table-mode .table>header { display:flex; align-items:center; gap:12px 28px; flex-wrap:wrap; padding:20px 0 16px; border-bottom:1px solid #e6c28e40; }
.table-mode h1 { font-family:Georgia,serif; font-size:27px; color:#ffebc7; text-shadow:0 2px #3b251d; letter-spacing:3px; margin:0; }
.table-mode .table>header>p { margin:0; color:#ddc39a; font-size:12px; letter-spacing:1px; }
.table-mode .table>header>div { margin-left:auto; max-width:430px; }
.table-mode input { background:#3a2922; color:#f4e2c4; border-color:#b9976755; }
.table-mode button { background:#e4bb79; color:#3a291f; box-shadow:inset 0 1px #fff3ce60,0 3px #33201555; border-radius:6px; }
.table-mode button.secondary,.table-mode .notes { color:#e8d1ae; }
.table-mode .notes { font-size:12px; margin:22px 0 10px; }
.table-mode .build-version { color:#d5b896; }
.table-mode .players li,.table-mode .pending-requests { background:#392c26; border-color:#cda26555; }
.hex-board-wrap { --dice-red:#bf5554; --dice-blue:#567fac; --dice-green:#509b7d; --dice-yellow:#d7ad4f; --dice-purple:#9476af; display:flex; flex-direction:column; align-items:center; gap:18px; margin:14px 0; }
.board-caption { width:100%; display:flex; justify-content:space-between; gap:12px; color:#e2c59e; letter-spacing:2px; font:10px monospace; }
.hex-board { container-type:inline-size; position:relative; width:min(100%,740px); aspect-ratio:1; margin:0 auto; }
.casino-ring { position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 12px 9px #221b1a80); }
.hex-casino { position:absolute; transform:translate(-50%,-50%); width:20%; height:16%; padding:3px; text-align:center; color:#e6d4af; }
.hex-casino h3 { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; margin:0; font:600 clamp(7px,1.3cqw,11px) Georgia,serif; letter-spacing:1px; }
.casino-number { display:grid; place-items:center; width:clamp(16px,3.6cqw,29px); height:clamp(16px,3.6cqw,29px); border:2px solid #d0ac69; border-radius:50%; background:#252b28; color:#efce88; font:bold clamp(11px,2.6cqw,20px) Georgia,serif; box-shadow:0 2px 3px #0006; }
.casino-skyline { display:flex; height:35px; gap:4px; justify-content:center; align-items:flex-end; margin:5px auto; opacity:.65; }
.casino-skyline i { display:block; width:9px; background:repeating-linear-gradient(0deg,#a4ba9a 0 1px,transparent 1px 6px),repeating-linear-gradient(90deg,#a4ba9a 0 1px,#314a3c 1px 4px); border:1px solid #a4ba9a; }
.hex-casino-dice { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px; list-style:none; margin:5px 0 0; padding:0; }
.placed-dice { display:inline-flex; align-items:center; gap:2px; font:clamp(8px,1.5cqw,12px) monospace; }
.board-die { --die:#f1e1bb; display:inline-grid; flex:none; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:2px; width:27px; height:27px; padding:5px; border:1px solid #fff5; border-radius:5px; background:var(--die); box-shadow:inset 0 2px 1px #fff5,inset 0 -3px 1px #0003,0 2px 1px #0004; }
.die-red { --die:var(--dice-red); }.die-blue { --die:var(--dice-blue); }.die-green { --die:var(--dice-green); }.die-yellow { --die:var(--dice-yellow); }.die-purple { --die:var(--dice-purple); }
.pip { display:block; border-radius:50%; background:#fff4d7; }.die-ivory .pip { background:#503e2d; }.pip.empty { visibility:hidden; }
.hex-casino .board-die { width:clamp(13px,2.7cqw,22px); height:clamp(13px,2.7cqw,22px); padding:3px; gap:1px; border-radius:3px; }
.banknotes { position:absolute; transform:translate(-50%,-50%); width:15%; max-height:19%; overflow:auto; scrollbar-width:thin; display:flex; flex-direction:column; gap:4px; padding:3px; }
.banknote { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none; min-height:38px; border:3px double #d6ccb0; background:#37645c; color:#fff3d1; box-shadow:0 2px 3px #201911aa; transform:rotate(-3deg); }
.banknote:nth-child(even) { transform:rotate(3deg); }.banknote.note-1 { background:#68536b; }.banknote.note-2 { background:#7d6944; }
.banknote strong { font:600 clamp(9px,2cqw,16px) Georgia,serif; white-space:nowrap; text-shadow:0 1px #0007; }
.banknote small { font:5px monospace; letter-spacing:1px; opacity:.8; }
.dice-bowl { position:absolute; left:50%; top:50%; width:35%; height:34%; transform:translate(-50%,-50%); clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px; color:#cfce9a; background:radial-gradient(ellipse,#2d6350,#143c30); box-shadow:inset 0 0 30px #08231a; }
.tray-label { font:clamp(9px,2.2cqw,17px) Georgia,serif; letter-spacing:3px; opacity:.75; }
.tray-caption { font:clamp(5px,1cqw,8px) monospace; letter-spacing:1px; text-align:center; }
.rolled-dice { display:grid; grid-template-columns:repeat(4,auto); gap:7px; justify-content:center; }
.table-controls { width:100%; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; background:#332b24ec; border:1px solid #d3ac6d77; border-radius:10px; padding:16px 20px; box-shadow:0 5px 15px #35211830; }
.turn-heading { display:flex; flex-direction:column; gap:3px; }.turn-heading .eyebrow { margin:0; color:#e3bc7b; font-size:9px; letter-spacing:2px; }.turn-heading strong { font:20px Georgia,serif; color:#f5e4c5; }.turn-help { color:#c5b394; font-size:11px; }
.table-controls .roll-action { padding:13px 40px; font-size:16px; }.table-controls .value-buttons { display:flex; flex-wrap:wrap; gap:7px; margin:0; }
.table-controls button.place-action { display:flex; align-items:center; gap:8px; min-height:46px; padding:8px 12px; font-size:12px; }.table-controls .board-die { width:23px; height:23px; padding:4px; }
.hex-players { list-style:none; width:100%; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:8px; }
.hex-players li { min-width:0; display:flex; gap:9px; align-items:center; padding:12px 10px; border:1px solid #bf956044; border-radius:7px; background:#392c26e8; }
.hex-players li.current-turn { border-color:#edcb83; box-shadow:0 0 0 1px #edcb83,inset 0 0 18px #edcb8315; }
.player-token { position:relative; width:24px; height:36px; flex:none; font-size:0; }.player-token::before { content:''; position:absolute; top:1px; left:6px; width:13px; height:13px; background:#dcb58a; border-top:4px solid #493127; }.player-token::after { content:''; position:absolute; top:14px; left:3px; width:19px; height:15px; background:var(--player-color); box-shadow:0 6px #363342; }
.player-identity { display:flex; flex-direction:column; min-width:0; }.player-identity strong { font-size:12px; overflow-wrap:anywhere; }.player-identity small { font:8px monospace; color:#c6b394; letter-spacing:1px; }.player-totals { margin-left:auto; display:flex; flex-direction:column; text-align:right; white-space:nowrap; }.player-totals span { color:#c4b598; font-size:10px; }.player-totals strong { color:#eaca8a; font-size:12px; }
@media(max-width:650px) {
 body.table-mode { padding:10px 8px; }.table-mode .table { padding:0 10px 16px; border-radius:10px; }.table-mode .table>header { gap:8px; padding:13px 0; }.table-mode h1 { font-size:23px; }.table-mode .table>header>div { margin-left:0; width:100%; max-width:none; }.board-caption { font-size:8px; letter-spacing:1px; }.hex-board-wrap { gap:12px; margin-top:12px; }.hex-casino { width:21%; height:16%; }.casino-skyline { display:none; }.hex-casino h3 { gap:2px; font-size:6px; letter-spacing:.5px; }.hex-casino-dice { gap:2px; margin-top:3px; }.placed-dice { gap:1px; font-size:8px; }.banknotes { width:16%; gap:3px; }.banknote { min-height:22px; border-width:2px; }.banknote small { display:none; }.banknote strong { font-size:9px; }.dice-bowl { padding:9px; gap:7px; }.rolled-dice { gap:3px; }.rolled-dice .board-die { width:18px; height:18px; padding:3px; gap:1px; border-radius:3px; }.tray-label { font-size:8px; letter-spacing:1px; }.tray-caption { font-size:5px; }.table-controls { padding:12px; gap:12px; }.turn-heading strong { font-size:18px; }.turn-help { font-size:10px; }.table-controls .value-buttons { display:grid; grid-template-columns:repeat(2,1fr); width:100%; }.table-controls .roll-action { width:100%; }.table-controls button.place-action { font-size:11px; padding:8px; }.hex-players { grid-template-columns:repeat(2,minmax(0,1fr)); }.hex-players li { padding:10px 8px; }.player-identity strong { font-size:11px; }
}

.hex-casino { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.table-mode button.secondary { background:#392c26; color:#f4dfb7; border:1px solid #bc985a80; }
.rules-button { padding:7px 10px; margin:0; font-size:22px; line-height:1; }
.rules-dialog { width:min(560px,calc(100vw - 36px)); max-height:80vh; overflow-y:auto; box-sizing:border-box; color:#f5e7ca; background:#48352b; border:2px solid #b9925e; border-radius:12px; padding:22px; box-shadow:0 20px 80px #0008; }
.rules-dialog::backdrop { background:#1c1518b8; }
.rules-dialog h2,.rules-dialog h3 { color:#e4bb79; }
.rules-dialog li { margin-bottom:10px; }
.rules-dialog a { color:#e4bb79; display:block; margin:14px 0; }
.table-mode .round-marker { flex-basis:100%; color:#e5c48e; font:12px monospace; padding:9px 0 0; }
.table-mode .game-results h2 { color:#f5d18b; font-family:Georgia,serif; font-size:clamp(22px,4vw,34px); overflow-wrap:anywhere; }
.table-mode .final-standings { width:100%; border-collapse:collapse; margin:18px 0 24px; font-size:14px; }
.table-mode .final-standings th,.table-mode .final-standings td { padding:12px 8px; border-bottom:1px solid #c59a5c55; text-align:left; overflow-wrap:anywhere; }
.table-mode .winner-row { background:#b1843540; color:#ffe3a2; }
.table-mode .next-round-button { padding:14px 24px; font-weight:bold; margin:10px 0 20px; }
.table-mode .round-payouts { display:flex; flex-wrap:wrap; gap:8px 22px; padding-left:20px; color:#ead4ae; }

/* Phone-style room voice calls (CLAUDE.md's voice-call section). Kept
   compact and anchored in the header row, never a full-screen overlay —
   must never cover the board, dice, rules scroll or exit controls. */
.voice-call-widget { position:relative; display:flex; flex-direction:column; align-items:flex-start; }
.voice-call-icon { position:relative; display:flex; align-items:center; gap:6px; padding:7px 10px; margin:0; font-size:20px; line-height:1; background:#392c26; color:#f4dfb7; border:1px solid #bc985a80; border-radius:8px; }
.voice-call-count { font:600 12px monospace; color:#e4bb79; }
.voice-link-summary{font-size:11px;color:#d8c7ad;margin-top:4px}.voice-network-note{font-size:11px;color:#d8c7ad;margin:0}.voice-call-participants li{flex-wrap:wrap}.voice-call-participants small{flex-basis:100%;font-size:11px;color:#c2b69f}
.voice-call-panel { position:absolute; top:100%; left:0; z-index:5; margin-top:6px; min-width:200px; max-width:min(280px,calc(100vw - 32px)); padding:12px; display:flex; flex-direction:column; gap:10px; background:#2e2219; border:1px solid #bc985a80; border-radius:10px; box-shadow:0 12px 30px #0007; }
.voice-call-participants { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:13px; color:#f1e2c2; }
.voice-call-participants li { display:flex; align-items:center; gap:6px; }
.voice-muted-tag { opacity:.8; }
.voice-call-actions { display:flex; gap:8px; }
.voice-call-actions button { flex:1; padding:7px 10px; font-size:12px; }
.voice-call-error { margin-top:6px; max-width:260px; padding:8px 10px; font-size:12px; color:#ffd9d9; background:#4a2420; border:1px solid #9b4a4a; border-radius:8px; display:flex; flex-direction:column; gap:6px; }
.voice-call-error button { align-self:flex-start; padding:5px 9px; font-size:11px; }

/* The incoming-call prompt: a compact corner toast, not a modal that
   blocks the board — deliberately styled closer to a notification than a
   dialog, and sized to never cover the table. */
.voice-invite-toast { position:fixed; right:16px; bottom:16px; z-index:20; width:min(280px,calc(100vw - 32px)); padding:14px; display:flex; flex-direction:column; gap:10px; color:#f5e7ca; background:#48352b; border:2px solid #b9925e; border-radius:12px; box-shadow:0 20px 60px #0008; }
.voice-invite-toast p { margin:0; font-size:13px; }
.voice-invite-actions { display:flex; gap:8px; }
.voice-invite-actions button { flex:1; padding:8px 10px; font-size:12px; }
@media(max-width:650px) {
  .voice-invite-toast { right:8px; bottom:8px; left:8px; width:auto; }
  .voice-call-panel { max-width:calc(100vw - 24px); }
}
/* Hold’em shares the tavern’s wooden backdrop and warm brass palette. */
.poker-page{max-width:1050px;margin:1rem auto;padding:1.2rem;color:#f3e5c9;background:rgba(76,45,29,.96);border:1px solid #b48a54;border-radius:14px;box-shadow:0 15px 50px #0005;min-height:92vh}
.poker-header{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;border-bottom:1px solid #b48a5455;padding-bottom:.7rem}.poker-header h1{margin:0;flex:1}.poker-page button{background:#dfba79;color:#302318;border:1px solid #c39a59;padding:.6rem .9rem;border-radius:6px;cursor:pointer}.poker-page button:disabled{opacity:.4;cursor:default}.poker-page input{padding:.6rem;background:#352a24;color:#f3e5c9;border:1px solid #ac895d;border-radius:5px;max-width:100%}
/* The five avatars and their hands share one round, table-top scene. */
.poker-table-scene{position:relative;isolation:isolate;container-type:inline-size;width:100%;max-width:800px;aspect-ratio:1;margin:0 auto}
.poker-round-felt{position:absolute;inset:9%;border:clamp(9px,2cqw,18px) solid #946342;border-radius:50%;background:repeating-linear-gradient(36deg,#ffffff02 0 1px,transparent 1px 4px),radial-gradient(circle at 45% 35%,#347561,#184b3d 65%,#10372e);box-shadow:0 9px 0 #3c291d,0 18px 25px #140d0860,inset 0 0 0 3px #cfab6a,inset 0 0 28px #051d1990;outline:2px solid #c69c60}
.poker-round-felt:after{content:'';position:absolute;inset:7%;border:1px solid #ddc88c44;border-radius:50%}
.poker-table-center{position:absolute;left:50%;top:49%;width:39%;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:clamp(4px,1.2cqw,12px);text-align:center}
.poker-table-brand{font:700 clamp(9px,1.8cqw,16px) Georgia,serif;letter-spacing:.2em;color:#dbce9d9c}
.poker-pot{margin:0;color:#ffe0a2;font-weight:700;font-size:clamp(12px,2.2cqw,20px)}
.poker-street{font-size:clamp(8px,1.5cqw,12px);letter-spacing:.14em;color:#d1ddc6}
.poker-community,.poker-cards{display:flex;gap:clamp(2px,.6cqw,6px);justify-content:center}
.poker-card{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:none;width:clamp(19px,4.6cqw,44px);height:clamp(29px,6.5cqw,62px);color:#242a27;background:#fbf0d9;border:1px solid #b99a69;border-radius:4px;box-shadow:1px 3px 3px #0005;font:700 clamp(11px,2.5cqw,23px) Georgia,serif}
.poker-card.red{color:#ab363a}.poker-card.card-back{color:#ead296;border:2px solid #d8bf87;background:repeating-linear-gradient(45deg,#873f3b 0 3px,#763330 3px 6px);font-size:clamp(10px,2cqw,18px)}
.poker-card.empty{color:#bcc8ac6b;background:#123e3266;border:1px dashed #d7d4a24a;box-shadow:none}
.poker-seat{position:absolute;z-index:2;width:clamp(76px,17cqw,142px);transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;text-align:center;gap:3px}
.poker-chair{position:relative;display:flex;align-items:flex-start;justify-content:center;width:clamp(29px,6.3cqw,54px);height:clamp(30px,6.5cqw,58px);border:3px solid #b08a55;border-radius:10px 10px 5px 5px;background:linear-gradient(#7e3c36 65%,#512c25 65%);box-shadow:0 4px 0 #31211b,0 4px 9px #0004}
.poker-avatar{position:relative;width:100%;height:100%;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #17171477)}
.poker-avatar i{display:block;position:absolute;left:50%;transform:translateX(-50%);box-sizing:border-box}
.poker-avatar .avatar-head{top:-9%;width:40%;height:40%;background:#e4b485;border-top:5px solid #49392d;box-shadow:-3px 0 #49392d,3px 0 #49392d}
.poker-avatar .avatar-head:after{content:'';position:absolute;left:18%;top:45%;width:2px;height:2px;background:#423127;box-shadow:9px 0 #423127}
.poker-avatar .avatar-shirt{top:31%;width:68%;height:43%;background:var(--shirt);border-left:4px solid #deb084;border-right:4px solid #deb084;box-shadow:inset 0 -4px #0002}
.poker-avatar .avatar-legs{top:74%;width:42%;height:30%;background:linear-gradient(90deg,#283038 42%,transparent 42% 58%,#283038 58%);border-bottom:4px solid #211f22}
.poker-seat-label{padding:4px 7px;max-width:100%;box-sizing:border-box;border:1px solid #a581535e;border-radius:6px;color:#f2e5c7;background:#35271fe8;box-shadow:0 3px 6px #0003}
.poker-seat-north .poker-seat-label{order:-1}
.poker-seat-label strong{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(10px,1.8cqw,15px)}
.poker-stack{display:block;font-size:clamp(10px,1.7cqw,14px);color:#f0ca7c}.poker-seat small{display:block;font-size:clamp(8px,1.3cqw,11px);color:#dbcaa6}
.poker-seat.current-turn .poker-chair{outline:3px solid #f2cb71;box-shadow:0 0 17px #f7cd6880}.poker-seat.current-turn .poker-seat-label{border-color:#f2cb71}
.poker-seat.vacant{opacity:.55}.poker-seat.vacant strong{font-size:clamp(8px,1.4cqw,12px)}
.poker-hand-zone{position:absolute;transform:translate(-50%,-50%);z-index:1;display:flex;align-items:center;flex-direction:column;gap:clamp(3px,.6cqw,7px)}
.poker-hand-north{padding-bottom:clamp(22px,3cqw,28px)}.poker-hand-north .poker-wager{position:absolute;bottom:calc(100% + 3px)}
.poker-hand-zone .poker-card:first-child{transform:rotate(-6deg)}.poker-hand-zone .poker-card:last-child{transform:rotate(6deg)}
.poker-hand-zone.folded .poker-cards{opacity:.45}.poker-wager{background:#12382fba;border-radius:12px;padding:2px 6px;font-size:clamp(10px,1.8cqw,15px);color:#f9e3ac;font-weight:700}.poker-wager i{color:#deba75;font-style:normal;text-shadow:0 2px #8e653a}
.poker-result{min-height:1.5rem;margin:.4rem 0;text-align:center;font-weight:bold;color:#ffdf98}
.poker-bankruptcy button{padding:.75rem 1rem;background:#dfba79;color:#302318;border:1px solid #c39a59;border-radius:6px;font-weight:700;cursor:pointer}.poker-bankruptcy button:disabled{opacity:.5;cursor:wait}
/* A practical recipe book at the tavern counter. All glass art is CSS. */
.world-overlay:has(>.mixology-book){background:transparent;backdrop-filter:none}
.mixology-book{color-scheme:light;position:fixed;inset:0;margin:auto;width:min(1080px,calc(100vw - 40px));height:min(850px,92dvh);max-height:92dvh;max-width:none;padding:0;display:flex;flex-direction:column;overflow:hidden;border:2px solid #b18a58;border-radius:18px;color:#413324;background:#f6eddd;box-shadow:0 24px 100px #160e0bb3;font-size:14px;line-height:1.5}
.mixology-book:not([open]){display:none}.mixology-book::backdrop{background:#150f0c9c;backdrop-filter:blur(3px)}.mixology-book [hidden]{display:none!important}
.mixology-book h1,.mixology-book h2,.mixology-book h3{font-family:Georgia,serif;font-weight:normal;color:#4a3223;letter-spacing:0}.mixology-book h1{font-size:28px;margin:0}.mixology-book h2{font-size:32px;line-height:1.2;margin:0 0 12px}.mixology-book h3{font-size:22px;margin:0 0 8px}
.mixology-book p{margin:0 0 12px}.mixology-book button{margin:0;padding:9px 13px;border:1px solid #cbb89a;border-radius:7px;background:#fffbf2;color:#59422c;font:600 13px system-ui;cursor:pointer;box-shadow:none}.mixology-book button:hover{background:#eee0c9}.mixology-book button:disabled{opacity:.5;cursor:default}.mixology-book :focus-visible{outline:3px solid #ac713e;outline-offset:3px}
.mixology-book input,.mixology-book select,.mixology-book textarea{font:inherit;border:1px solid #ccbca4;border-radius:7px;background:#fffdf7;color:#453525;padding:10px;max-width:100%;box-sizing:border-box}.mixology-book input[type=checkbox]{width:18px;height:18px;flex:none;margin:0;accent-color:#856243;cursor:pointer}.mixology-book input[type=number]{width:75px}.mixology-book textarea{display:block;width:100%;resize:vertical}
.mix-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex:none;background:#493425;padding:20px 28px;border-bottom:1px solid #c6a16b}.mix-header h1{color:#f5e3c5}.mix-eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#927046;margin:0 0 6px!important}.mix-header .mix-eyebrow{color:#cfaf7c}.mixology-book .mix-close{font-size:27px;line-height:1;width:40px;height:40px;padding:0;border-color:#8b6f50;background:#ffffff08;color:#f5e3c5}
.mixology-book nav{display:flex;gap:6px;padding:10px 28px;background:#e8dbc4;border-bottom:1px solid #d7c6ab;flex:none}.mixology-book nav button{background:transparent;border-color:transparent}.mixology-book nav button.selected{background:#493425;color:#fff1d5;border-color:#493425}
.mix-main{padding:26px 28px;overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0}.mix-storage{margin:0!important;flex:none;padding:8px 28px;background:#eee1cb;border-top:1px solid #d8c9ae;font-size:11px;color:#796649}
.mix-intro{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:18px;padding:16px 22px;background:#ede0c7;border:1px solid #dacaab;border-radius:12px}.mix-intro>div:first-child{max-width:640px}.mix-intro>.drink-art{height:90px;transform:scale(.75);transform-origin:center top}.mix-intro h2{font-size:30px}.mix-intro p:last-child{max-width:520px;color:#7c674d;margin:0}
.mix-pantry-callout{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px;color:#7b674d;font-size:12px}.mix-filters{display:grid;grid-template-columns:minmax(0,1fr) 160px 210px;gap:10px}.mix-result-count{margin:13px 0!important;font-size:12px;color:#92785a}
.mix-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.mix-card{border:1px solid #ddcdb4;border-radius:11px;background:#fffaf0;overflow:hidden;box-shadow:0 3px 7px #5b3b1c05}.mix-card-art{height:105px;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(ellipse at center,#f9f0d8,#eee2cd)}.mix-card-art>.drink-art{transform:scale(.8)}.mix-badge{position:absolute;top:11px;left:11px;padding:3px 7px;border-radius:4px;background:#e2cfb1;color:#735a3d;font-size:10px;letter-spacing:.3px}.mix-badge.free{background:#d8e3d0;color:#506849}.mix-card-copy{padding:17px}.mix-card h3{font-size:23px}.mix-flavour{font-size:12px;color:#977d5e;margin-bottom:10px!important}.mix-match{min-height:40px;font-size:12px;color:#6e7853}.mix-card button{width:100%;margin-top:5px}
.drink-art{position:relative;width:110px;height:120px;flex:none;filter:drop-shadow(0 6px 2px #5c392522)}.drink-vessel{position:absolute;left:31px;top:20px;width:50px;height:87px;background:linear-gradient(0deg,var(--drink-tone) 0 73%,#ffffff60 73%);border:3px solid #d7bc8c;border-radius:3px 3px 8px 8px;box-shadow:inset 7px 0 #ffffff30}.drink-vessel:after{content:'';position:absolute;left:8px;top:25px;width:13px;height:15px;border:1px solid #fff8;background:#fffc;opacity:.5;box-shadow:14px 16px #ffffff9e}.drink-garnish{position:absolute;width:25px;height:25px;left:65px;top:12px;background:#d9c681;border:4px solid #92a36f;border-radius:50%;box-shadow:inset 0 0 0 2px #f6efb4}.drink-garnish:after{content:'';position:absolute;left:7px;top:0;width:1px;height:17px;background:#fff7}
.drink-coupe .drink-vessel{top:30px;left:18px;width:78px;height:45px;border-radius:3px 3px 42px 42px;background:var(--drink-tone)}.drink-coupe .drink-stem,.drink-wine .drink-stem{position:absolute;left:54px;top:76px;width:4px;height:31px;background:#c4a87c}.drink-stem:after{content:'';position:absolute;bottom:-3px;left:-18px;width:40px;height:4px;background:#c4a87c;border-radius:50%}.drink-coupe .drink-garnish{left:74px;top:19px}.drink-coupe .drink-vessel:after{display:none}
.drink-rocks .drink-vessel,.drink-mug .drink-vessel{top:43px;left:25px;width:66px;height:64px;border-radius:4px 4px 10px 10px}.drink-rocks .drink-garnish,.drink-mug .drink-garnish{top:34px;left:74px}.drink-mug .drink-vessel{border-color:#b27d4d;box-shadow:inset 6px 0 #aa6c3940}.drink-mug:after{content:'';position:absolute;left:88px;top:57px;width:19px;height:30px;border:5px solid #b27d4d;border-left:0;border-radius:0 14px 14px 0}
.drink-wine .drink-vessel{top:13px;left:24px;width:65px;height:68px;border-radius:8px 8px 50% 50%}.drink-wine .drink-stem{top:80px;height:26px}.drink-wine .drink-garnish{left:73px;top:8px}
.drink-art:not(.drink-coupe):not(.drink-wine) .drink-stem{display:none}
.mix-subtitle{color:#846d50}.mix-pantry-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:20px 0}.mix-pantry-tools input{flex:1;min-width:150px}.mix-pantry-group{margin:24px 0}.mix-pantry-group h3{font-size:20px}.mix-ingredients{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.mix-ingredient{display:flex;align-items:center;gap:10px;min-height:47px;padding:11px;border:1px solid #deceb7;border-radius:7px;background:#fffaf1;cursor:pointer;font-size:13px}.mix-ingredient:has(input:checked){background:#e6ebdc;border-color:#b1bc99}
.mixology-book .mix-primary{background:#93653c;color:#fff4df;border-color:#93653c}.mixology-book .mix-primary:hover{background:#794f2e}.mix-empty{grid-column:1/-1;padding:40px 18px;text-align:center;border:1px dashed #cdbb9e;border-radius:12px;color:#8c7659}.mix-empty h2,.mix-empty h3{color:#6c5136}.mix-empty button{margin-top:10px}.mix-back{margin-bottom:20px!important}
.mix-detail-hero{display:flex;align-items:center;gap:25px;padding:20px;background:#eee1cb;border:1px solid #dfcdb0;border-radius:12px;margin-bottom:28px}.mix-detail-hero h2{font-size:37px}.mix-detail-hero p{color:#927252}.mix-detail-hero small{color:#80684c}.mix-detail-columns{display:grid;grid-template-columns:1fr 1fr;gap:35px}.mix-servings{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:12px 0}.mix-measures{list-style:none;padding:0;margin:15px 0}.mix-measures li{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:10px 0;border-bottom:1px solid #ddcdb6}.mix-measures strong{color:#6d4c2e}.mix-measures small{grid-column:1/-1;font-size:11px}.on-hand{color:#647d50}.missing{color:#ad7549}.mix-small{font-size:11px;color:#897455}.mix-method li{margin-bottom:15px;padding-left:5px}.mix-method ol{padding-left:20px}.mix-source{margin-top:24px;padding-top:16px;border-top:1px solid #ddcdb6;font-size:11px;color:#897455}.mix-source a{color:#86603c;overflow-wrap:anywhere}.mix-feedback{min-height:20px;color:#61774a;font-size:12px;margin:12px 0!important}
.mix-planned{margin:23px 0}.mix-planned>div{display:flex;gap:15px;align-items:center;flex-wrap:wrap;padding:13px;background:#fffaf0;border:1px solid #ddcdb6;border-radius:8px;margin-bottom:8px}.mix-planned strong{flex:1;min-width:130px}.mix-planned label{display:flex;align-items:center;gap:8px}.mix-shopping-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}.mix-shopping-heading label{display:flex;align-items:center;gap:7px;font-size:12px}.mix-shopping{list-style:none;padding:0;margin:20px 0}.mix-shopping li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:13px 0;border-bottom:1px solid #ddcdb6}.mix-shopping label{display:flex;align-items:center;gap:10px;cursor:pointer}.mix-shopping small{grid-column:1/-1;padding-left:28px;font-size:11px;color:#907958}.mix-shopping li:has(input:checked){opacity:.55}.mix-copy-actions{display:flex;gap:10px;flex-wrap:wrap}
/* Front-of-house Meals/Drinks menu (public/orders.js) — reuses the
   .mixology-book chrome above; these rules only cover the shapes that
   are specific to ordering (item cards, variant radios, held-item list). */
.order-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:18px 0}
.order-card{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid #ddcdb6;border-radius:10px;background:#fffaf0}
.order-card h3{font-size:18px;margin:0}
.order-desc{color:#846d50;font-size:13px}
.order-note{font-size:12px;color:#8c7659}
.order-restore{font-size:12px;color:#61774a;font-weight:600}
.order-card button{margin-top:auto}
.order-variants{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.order-variants label{display:flex;align-items:center;gap:8px;cursor:pointer}

/* The counter's physical menu book (public/menuBook.js) — the single
   in-scene entry point replacing the old "Mixology book"/"Meals/Drinks"
   HUD buttons. A real two-page spread (not a dialog card with a header
   bar): dark leather cover frame, a spine gutter between cream pages,
   bookmark tabs down the side for the three chapters plus "Holding".
   Turning a page is a real click on that page's own outer-25% edge
   (never a transparent overlay — see the edge-click comment below),
   with the bottom Prev/Next row and keyboard arrows as auxiliary
   entries into the identical flip logic; every entry triggers an
   actual 3D hinge flip (public/menuBook.js's .book-leaf elements)
   rather than a crossfade. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.menu-book-target{width:52px;height:40px}
.world-overlay:has(>.book-dialog){background:transparent;backdrop-filter:none}
.book-dialog{color-scheme:light;position:fixed;inset:0;margin:auto;width:min(1200px,calc(100vw - 32px));height:min(820px,92dvh);max-height:92dvh;max-width:none;padding:0;border:none;background:transparent;overflow:visible}
.book-dialog:not([open]){display:none}.book-dialog::backdrop{background:#150f0c9c;backdrop-filter:blur(3px)}
@keyframes menu-book-open{from{transform:translate(var(--book-from-x,0px),var(--book-from-y,0px)) scale(var(--book-from-scale,.12));opacity:.3}to{transform:translate(0,0) scale(1);opacity:1}}
@keyframes book-unfold-left{from{transform:rotateY(78deg)}to{transform:rotateY(0)}}
@keyframes book-unfold-right{from{transform:rotateY(-78deg)}to{transform:rotateY(0)}}
.book-dialog.menu-book-opening .book{animation:menu-book-open .65s cubic-bezier(.2,.7,.25,1) both}
.menu-book-opening .book-slot--left{transform-origin:right center;animation:book-unfold-left .65s ease-out both}
.menu-book-opening .book-slot--right{transform-origin:left center;animation:book-unfold-right .65s ease-out both}
@media(prefers-reduced-motion:reduce){.book-dialog.menu-book-opening .book{animation:none}}

.book{position:relative;width:100%;height:100%;display:flex;flex-direction:column;color:#413324;font-size:14px;line-height:1.5}
.book button{font:600 13px system-ui;cursor:pointer}
.book :focus-visible{outline:3px solid #ac713e;outline-offset:2px}
.book-close{position:absolute;top:-14px;right:-14px;z-index:20;width:38px;height:38px;border-radius:50%;border:2px solid #b18a58;background:#493425;color:#f5e3c5;font-size:22px;line-height:1;box-shadow:0 6px 18px #160e0bb3}
.book-close:hover{background:#5c4531}
.book-cover-link{position:absolute;top:-14px;left:-14px;z-index:20;width:38px;height:38px;border-radius:50%;border:2px solid #b18a58;background:#493425;font-size:17px;line-height:1;box-shadow:0 6px 18px #160e0bb3}
.book-cover-link:hover{background:#5c4531}

/* Bookmark tabs hang off the right edge of the book, like real paper
   tabs glued to a page edge — clicking one is the chapter jump. They
   live in a reserved margin outside the page content (never absolutely
   floated *over* it) so a page's own text can never run underneath and
   get clipped — a real bug an earlier version of this had, caught by
   screenshot review: an ingredient amount ("1 (≈52 g)") was cut off
   behind the tabs. */
.book-pages-wrap{position:relative;flex:1;min-height:0;perspective:none;margin-right:92px}
.book-bookmarks{position:absolute;left:100%;top:68px;z-index:15;display:flex;flex-direction:column;gap:6px;width:92px}
.book-bookmark{background:#8a5f3b;color:#fbe9c9;border:1px solid #5c3d23;border-left:none;border-radius:0 6px 6px 0;padding:9px 12px;font-size:11px;letter-spacing:.2px;box-shadow:3px 3px 6px #0004;text-align:left;transition:background .15s ease,color .15s ease}
.book-bookmark:hover{background:#9c6c42}
.book-bookmark.is-active{background:#f6ecd4;color:#4a3223;font-weight:700}

.book-pages{position:relative;display:flex;height:100%;background:#4a3223;border:14px solid #3a2a1c;border-radius:10px;box-shadow:0 28px 90px #0b0704cc,inset 0 0 0 2px #6d4e32;overflow:hidden;perspective:none}
/* Perspective is opening-only: internal turns must never magnify the paper. */
.menu-book-opening .book-pages{perspective:6000px}
.book-pages.book-pages--wide{display:block}
.book-slot{position:relative;flex:1 1 0;min-width:0;background:#f6ecd4;overflow-y:auto;overscroll-behavior:contain;padding:26px 30px}
.book-slot--left{border-radius:3px 0 0 3px;box-shadow:inset -14px 0 18px -16px #0005}
.book-slot--right{border-radius:0 3px 3px 0;box-shadow:inset 14px 0 18px -16px #0005}
.book-spine{flex:none;width:18px;background:linear-gradient(90deg,#00000030,#00000000 30%,#00000000 70%,#00000030),#e7d9b8;box-shadow:inset 0 0 14px #00000040}
.book-pages--wide .book-page.book-wide{height:100%;background:#f6ecd4;padding:26px 30px;overflow-y:auto;overscroll-behavior:contain}

.book-page{display:flex;flex-direction:column;gap:10px;min-height:100%}
.book-running-head{margin:0 0 4px!important;font-size:10px;font-weight:700;letter-spacing:2px;color:#a98657;text-transform:uppercase}
.book-eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#927046;margin:0}
.book-page h1,.book-page h2,.book-page h3{font-family:Georgia,serif;font-weight:normal;color:#4a3223;letter-spacing:0;margin:0}
.book-page h2{font-size:28px;line-height:1.2}.book-page h3{font-size:19px;margin-top:10px}
.book-page p{margin:0}
.book-page button{margin:0;padding:9px 13px;border:1px solid #cbb89a;border-radius:7px;background:#fffbf2;color:#59422c;box-shadow:none}
.book-page button:hover{background:#eee0c9}.book-page button:disabled{opacity:.5;cursor:default}
.book-page input,.book-page select,.book-page textarea{font:inherit;border:1px solid #ccbca4;border-radius:7px;background:#fffdf7;color:#453525;padding:10px;max-width:100%;box-sizing:border-box}
.book-page .mix-primary{background:#93653c;color:#fff4df;border-color:#93653c}.book-page .mix-primary:hover{background:#794f2e}
.book-page a{color:#86603c}

.book-cover-face{align-items:flex-start;justify-content:center}
.book-title{font-size:38px!important}
.book-cover-note{color:#846d50;max-width:420px}
.book-cover-mark{margin-top:auto;align-self:center;font-size:72px;opacity:.5;filter:grayscale(.3)}
.book-toc{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:12px}
.book-toc-entry{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:16px 18px;text-align:left;background:#fffaf0;border:1px solid #ddcdb6;border-radius:10px}
.book-toc-entry strong{font:400 20px Georgia,serif;color:#4a3223}
.book-toc-entry span{font-size:12px;color:#846d50}
.book-toc-entry:hover{background:#f3e6c8}
.book-blank{align-items:center;justify-content:center}
.book-blank-mark{font-size:40px;color:#d8c6a4}

.book-details-btn{margin-top:auto!important;align-self:flex-start}
.book-backlink{background:transparent!important;border-color:transparent!important;padding:0!important;color:#86603c!important;margin-bottom:6px!important;align-self:flex-start}
.book-backlink:hover{text-decoration:underline;background:transparent!important}

.book-nav{display:flex;align-items:center;justify-content:center;gap:16px;flex:none;padding:10px 0 2px}
.menu-page-number{font-size:12px;color:#796649}

/* Edge-click page turning lives directly on each real page's own outer
   25% — never a transparent div layered over the content (the old
   .book-corner strips were exactly that, and are gone). The only visual
   trace is a soft directional glow hugging that page's own outer edge,
   drawn as a ::before so it never intercepts a click of its own
   (pointer-events:none) and never blocks the real content beneath it;
   public/menuBook.js toggles these two classes from real pointer
   coordinates checked against the hovered page's own getBoundingClientRect
   width, and sets the hand/resize cursor directly on .book-pages itself. */
.book-page{position:relative}
.book-page--edge-prev::before,.book-page--edge-next::before{content:'';position:absolute;top:0;bottom:0;width:25%;pointer-events:none;opacity:.55;transition:opacity .12s ease}
.book-page--edge-prev::before{left:0;background:linear-gradient(90deg,#00000014,transparent)}
.book-page--edge-next::before{right:0;background:linear-gradient(270deg,#00000014,transparent)}

/* The flipping leaf: a two-sided card absolutely positioned over the
   slot it starts on, hinged at its own spine-side edge, rotating a full
   180deg so it ends up exactly covering the slot it lands on. Each face
   hides the other via backface-visibility, so at every moment exactly
   one face (front, then back past the halfway point) is actually seen —
   never a crossfade, never an opacity change. */
.book-leaf{transform-style:preserve-3d;pointer-events:none;box-shadow:0 10px 30px #00000055}
.book-leaf-face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;background:#f6ecd4}
.book-leaf-face>*{height:100%}
.book-leaf .book-slot{width:100%;height:100%;box-sizing:border-box;overflow:hidden;flex:none}
.book-leaf-face>.book-page{padding:26px 30px;box-sizing:border-box}
.book-leaf-back{transform:rotateY(180deg)}
.book-leaf--forward{transform-origin:left center;animation:book-flip-forward var(--flip-ms,360ms) linear forwards}
.book-leaf--backward{transform-origin:right center;animation:book-flip-backward var(--flip-ms,360ms) linear forwards}
.book-leaf--full{box-shadow:0 20px 60px #000000a0}
@keyframes book-flip-forward{from{transform:translateX(0) rotateY(0)}to{transform:translateX(var(--flip-land-x,0px)) rotateY(-180deg)}}
@keyframes book-flip-backward{from{transform:translateX(0) rotateY(0)}to{transform:translateX(var(--flip-land-x,0px)) rotateY(180deg)}}
.book.is-flipping .book-slot{overflow:hidden}
.book-leaf-spread{display:flex;height:100%}
.book-leaf-spread .book-slot{flex:1 1 0}

@media(prefers-reduced-motion:reduce){.book-leaf{display:none}.menu-book-opening .book-slot{animation:none}}

@media(max-width:820px){
  .book-pages{overflow:visible}
  .book-slot--right,.book-spine{display:none}
  .book-slot--left{border-radius:3px}
  .book-pages-wrap{margin-right:72px}
  .book-bookmarks{top:56px;width:72px}
  .book-bookmark{font-size:10px;padding:7px 9px}
}
@media(max-width:500px){
  .book-dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px)}
  .book-close,.book-cover-link{width:34px;height:34px;top:-10px}
  .book-close{right:-10px;font-size:19px}.book-cover-link{left:-10px;font-size:14px}
  .book-pages-wrap{margin-right:64px}
  .book-bookmarks{top:44px;gap:4px;width:64px}
  .book-bookmark{font-size:8.5px;padding:6px 5px;letter-spacing:0;line-height:1.2}
  .book-pages{border-width:9px}
  .book-slot{padding:18px 16px 44px}
  .book-leaf-face>.book-page{padding:18px 16px 44px}
  .book-title{font-size:28px!important}
  .book-page h2{font-size:22px}
  .menu-img,.menu-img-fallback{aspect-ratio:16/9}
}

.mix-embed{display:flex;flex-direction:column;gap:0;height:100%}
.mix-embed nav{display:flex;gap:6px;margin:-26px -30px 18px;padding:10px 30px;background:#e8dbc4;border-bottom:1px solid #d7c6ab;flex:none}
.mix-embed nav button{background:transparent;border-color:transparent}
.mix-embed nav button.selected{background:#493425;color:#fff1d5;border-color:#493425}
.mix-embed .mix-main{flex:1;min-height:0;overflow-y:auto}
@media(max-width:500px){.mix-embed nav{margin:-18px -16px 14px;padding:8px 16px}}

.menu-img,.menu-img-fallback{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid #ddcdb6;background:#eee2cd}
.menu-img-fallback{display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;color:#977d5e;font-size:13px;box-sizing:border-box}
.menu-item-desc{color:#846d50;font-size:13px;margin:0}
.menu-item-kcal{font-size:12px;color:#61774a;font-weight:600;margin:0}
.menu-item-kcal small{display:block;font-weight:400;color:#8c7659;margin-top:2px}
.menu-item-allergens{font-size:11px;color:#8c7659;margin:0}

@media(max-width:750px){.mix-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mix-filters{grid-template-columns:1fr 1fr}.mix-filters>input{grid-column:1/-1}.mix-ingredients{grid-template-columns:repeat(2,minmax(0,1fr))}.mix-intro{padding:18px}.mix-intro h2{font-size:28px}.mix-detail-columns{gap:20px}.hud-actions{flex-wrap:wrap;justify-content:flex-end}}
@media(max-width:500px){.mixology-book{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);border-radius:12px}.mix-header{padding:15px}.mix-header h1{font-size:23px}.mixology-book nav{padding:8px;gap:0}.mixology-book nav button{flex:1;font-size:11px;padding:10px 6px}.mix-main{padding:18px 15px}.mix-storage{padding:8px 15px;font-size:10px}.mix-intro{gap:4px;padding:15px}.mix-intro h2{font-size:25px}.mix-intro p:last-child{font-size:12px}.mix-intro>.drink-art{display:none}.mix-grid{gap:10px}.mix-card-art{height:113px}.mix-card-copy{padding:12px}.mix-card h3{font-size:20px}.mix-card button{font-size:11px;padding:10px 6px}.mix-flavour{min-height:36px}.mix-match{min-height:55px}.mix-ingredients{grid-template-columns:1fr}.mixology-book h2{font-size:27px}.mix-detail-hero{gap:10px;padding:14px}.mix-detail-hero>.drink-art{transform:scale(.85);margin-left:-12px;width:95px}.mix-detail-hero h2{font-size:28px}.mix-detail-columns{grid-template-columns:1fr}.mix-detail-hero small{font-size:11px}.mix-planned>div{gap:8px}.mix-pantry-tools button{font-size:11px}.mix-pantry-callout{font-size:11px}.mix-shopping{font-size:12px}.mix-shopping strong{font-size:11px}.order-grid{grid-template-columns:1fr}}
.poker-controls{margin-top:1rem;padding:1rem;background:#281e18;border-radius:8px;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.poker-controls p{flex-basis:100%;margin:.2rem 0}.poker-controls input{width:95px}.poker-search{margin-top:1rem}.poker-search ul{list-style:none;padding:0}.poker-search li{padding:.5rem;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}.poker-rules{margin:.8rem 0}.poker-rules a{color:#efd08f}.poker-invite,.poker-resume{position:fixed;right:1rem;top:90px;z-index:120;background:#33271f;color:#f5e7c9;padding:1rem;max-width:min(360px,calc(100vw - 2rem));border:1px solid #d2aa68;border-radius:10px;box-shadow:0 8px 24px #0007}.poker-invite[hidden],.poker-resume[hidden]{display:none}.poker-invite button,.poker-resume button{margin:.3rem;padding:.5rem .8rem}.poker-resume{top:auto;bottom:1rem;right:auto;left:1rem}
@media(max-width:520px){.poker-page{margin:.3rem;padding:.65rem}.poker-header h1{font-size:1.4rem;flex-basis:100%}.poker-seat-label{padding:3px 4px}.poker-seat small{max-width:78px}.poker-table-scene{margin:.6rem auto}.poker-controls{padding:.65rem}}

/* All Fives: a private hand near the viewer, opponent across the felt. */
.domino-page{max-width:1100px;margin:0 auto;padding:24px;color:#f5e6c8;background:#33251dd9;border:2px solid #9f7850;border-radius:20px;box-shadow:0 16px 60px #21150d77}
.domino-header{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.domino-header>div{flex:1}.domino-header h1{font-family:Georgia,serif;font-size:36px;margin:6px 0}.domino-meta{color:#e1bf8c}
.domino-board{display:flex;box-sizing:border-box;width:min(100%,70vh);aspect-ratio:1;overflow:auto;border:14px solid #795333;border-radius:42px;background:radial-gradient(ellipse,#356c57,#1c4439);box-shadow:inset 0 4px 20px #102a21;margin:18px auto}.domino-layout{position:relative;flex:none;margin:auto}.domino-played{position:absolute;display:grid;justify-items:center;gap:5px}.domino-played .domino-bone{position:absolute;width:74px;height:40px;box-sizing:border-box}.domino-empty{margin:auto}.domino-played small{font-size:10px;color:#fff2c2}.domino-played.spinner .domino-bone{outline:3px solid #d7b875}.domino-empty{text-align:center;padding:70px 15px;color:#f0dfb6}
.domino-bone{display:inline-flex!important;flex-direction:row;align-items:center;justify-content:center;gap:0;padding:4px!important;background:#fff3d5!important;color:#342c26!important;border:2px solid #c8b793!important;border-radius:7px!important;box-shadow:0 4px 0 #ac9576!important;min-width:62px;min-height:40px;font-size:26px!important;line-height:1}.domino-bone>span{width:27px;text-align:center}.domino-bone>span+span{border-left:1px solid #b5a383}.domino-bone.selected{outline:3px solid #f1bd51;transform:translateY(-5px)}.domino-bone:disabled{opacity:.55}
.domino-hand{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:20px 0}.domino-player{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;padding:10px;border:1px solid #88633f;border-radius:8px}.domino-player.active{border-color:#efc16a;box-shadow:0 0 0 1px #efc16a}.domino-opponent{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin:10px}.domino-back{display:inline-block;background:#886345;color:#e2c494;border:2px solid #c4a074;border-radius:4px;padding:8px 3px}.domino-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.domino-controls p{width:100%}.domino-request{padding:12px;background:#55422e;display:flex;gap:10px;align-items:center}.domino-resume{position:fixed;bottom:28px;left:20px;z-index:60;display:flex;gap:8px}.domino-resume[hidden]{display:none}.domino-rules{max-height:85vh;overflow:auto}
@media(max-width:600px){body.table-mode:has(.domino-page){padding:8px}.domino-page{padding:12px;border-radius:12px}.domino-header h1{font-size:26px}.domino-board{border-width:8px;border-radius:22px}.domino-header button{font-size:12px}.domino-resume{bottom:14px;left:10px}}
.domino-bone .domino-pips{display:grid;grid-template-columns:repeat(3,5px);grid-template-rows:repeat(3,5px);gap:2px;padding:3px;width:25px;box-sizing:content-box}.domino-pips i{display:block;width:5px;height:5px}.domino-pips i.pip{background:#342c26;border-radius:50%}
/* The straight rail belongs to the dealer. The four nameplates follow the arc. */
.bj-room {min-height:calc(100dvh - 4rem)}
.bj-actions {display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.bj-header strong {color:#f4d084}
.bj-felt {
  container-type:inline-size; position:relative; width:min(94%,840px);aspect-ratio:2; margin:3rem auto clamp(50px,8vw,88px);
  border-radius:4px 4px 50% 50% / 4px 4px 100% 100%;border:clamp(5px,1vw,13px) solid #936b42;
  box-shadow:inset 0 0 0 2px #c9ae73, inset 0 2px 20px #182e23,0 6px 0 #302019;
  background:repeating-linear-gradient(36deg,#ffffff02 0 1px,transparent 1px 4px),radial-gradient(ellipse at top,#347561,#184b3d 72%,#10372e);
}
.bj-dealer,.bj-seat {position:absolute;transform:translateX(-50%);text-align:center}
.bj-dealer {left:50%;top:-1.2rem}
.bj-seat {width:24%}
.bj-seat-0 {left:11%;top:47%}.bj-seat-1 {left:36%;top:81%}
.bj-seat-2 {left:64%;top:81%}.bj-seat-3 {left:89%;top:47%}
.bj-seat strong,.bj-dealer strong {display:inline-block;border-radius:8px;background:#38271e;color:#fff2d4;
  border:1px solid #ad8557;padding:3px 7px;font:600 clamp(10px,2cqw,16px) Georgia,serif}
.bj-seat.own strong {background:#684727;border-color:#f2c578}
.bj-card-row {display:flex;align-items:center;justify-content:center;gap:clamp(6px,1cqw,10px);margin:3px 0}
.bj-seat small,.bj-dealer small {display:block;font-size:clamp(10px,1.8cqw,14px);color:#fff0cf;text-shadow:0 1px 3px #20180f}
.bj-active {outline:1px solid #eec778;border-radius:5px}
.bj-personality {order:2;color:#d9bd8b;font-size:10px}
.bj-new-card {animation:bj-reveal 650ms ease-out both}
@keyframes bj-reveal {
  0% {transform:perspective(500px) translateY(-20px) rotateY(90deg);opacity:0}
  30% {transform:perspective(500px) translateY(-8px) rotateY(90deg);opacity:1}
  100% {transform:perspective(500px) translateY(0) rotateY(0);opacity:1}
}
@media (prefers-reduced-motion:reduce) {.bj-new-card {animation:none}}
.bj-room details {margin-top:1em;color:#e6d1ad}
.bj-room [role=status] {color:#f7dfad}
@media(max-width:600px){
  .bj-felt {margin-top:2rem;margin-bottom:5rem}
  .bj-seat strong {padding:2px 3px}
  .bj-card-row .poker-card {width:clamp(15px,4.7cqw,23px);height:26px;font-size:11px}
}
.bj-seat .bj-nameplate,.bj-dealer .bj-nameplate {display:inline-flex;align-items:center;gap:3px;max-width:100%}
.bj-nameplate .poker-avatar {width:clamp(15px,2.5cqw,25px);height:clamp(18px,3cqw,30px);flex:none}
.bj-seat {display:flex;flex-direction:column;align-items:center}
.bj-seat .bj-nameplate {order:1}
.bj-seat .bj-card-row {flex-wrap:wrap}

/* End markers sit on the felt just outside playable ports in screen coordinates. */
.domino-edge {position:absolute;width:7px;height:7px;border-radius:50%;background:#ffdb86;pointer-events:none}
.domino-played {width:var(--bone-width);height:var(--bone-height)}
.domino-edge.edge-left {right:calc(100% + 2px);top:calc(50% - 3.5px)}
.domino-edge.edge-right {left:calc(100% + 2px);top:calc(50% - 3.5px)}
.domino-edge.edge-top {bottom:calc(100% + 2px);left:calc(50% - 3.5px)}
.domino-edge.edge-bottom {top:calc(100% + 2px);left:calc(50% - 3.5px)}
.domino-played .domino-bone {left:50%;top:50%}