/* Ten Tables
   Layout: a card room at night. Dark green walls, each game a felt table with a
   walnut rail and brass trim; controls sit on a dark shelf under the table.
   One look on purpose (no light theme): the felt is the brand. */

:root {
  color-scheme: dark;

  /* room and tables */
  --room: #0b2219;
  --room-2: #0f2c21;
  --room-3: #143628;
  --felt: #134a36;
  --felt-hi: #1b6247;
  --felt-lo: #0d3526;
  --rail: #3a2414;
  --rail-hi: #5e3d24;
  --rail-lo: #22150b;

  /* metal, paper, ink */
  --brass: #d9b45a;
  --brass-hi: #ecd08a;
  --brass-lo: #9c7c36;
  --ivory: #f3eddf;
  --ivory-2: #cfc7b2;
  --ink: #17130a;
  --card: #fbf8f0;
  --card-edge: #d9d0bb;
  --court-bg: #f3ead3;

  /* signals */
  --red: #b8202c;
  --red-deep: #8f1420;
  --black: #16181c;
  --blue: #2f5f9e;
  --pocket-green: #17673f;
  --player: #9ec0f0;
  --reel-edge: #e2d9c2;
  --leaf: #3f7a35;
  --lemon: #f0c63e;
  --lemon-edge: #b88d1a;
  --grape: #6a3d9a;
  --grape-edge: #4a2670;
  --clover: #2f8a4a;
  --clover-edge: #1e5e31;
  --gem: #4fb3d9;
  --gem-edge: #1f6f8f;
  --gem-hi: #8fd3ee;
  --gem-top: #c5ecf9;
  --banker: #f4a39b;
  --win: #92e3b0;
  --loss: #ff9a8f;
  --focus: #ffe08a;
  --shadow: rgb(0 0 0 / 0.45);
  --line: rgb(217 180 90 / 0.28);
  --line-strong: rgb(217 180 90 / 0.6);

  --grid-line: rgb(243 237 223 / 0.62);
  --veil: rgb(0 0 0 / 0.28);

  /* type */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-ui: "Barlow Semi Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --font-body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: 1.75rem;
  --step-4: 2.25rem;
  --step-5: 3rem;

  --radius: 4px;
  --gutter: 16px;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--room);
  background-image:
    radial-gradient(90% 60% at 50% -10%, rgb(217 180 90 / 0.09), transparent 65%),
    url("../img/felt.png");
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  font-variant-numeric: lining-nums;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--brass-hi); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ivory); }
strong { font-weight: 600; }
img, svg { max-width: 100%; }
button, input, select { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

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

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); top: -100px; z-index: 50;
  background: var(--brass); color: var(--ink); padding: 0.6rem 1rem; font-family: var(--font-ui); font-weight: 600;
  text-decoration: none; border-radius: var(--radius);
}
.skip:focus { top: calc(8px + env(safe-area-inset-top, 0px)); }

.boot-hint {
  max-width: 34rem; margin: 2rem auto 0; padding: 1rem 1.25rem; border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ivory-2); background: var(--room-2);
  opacity: 0; animation: hint-in 0.2s 4s forwards;
  margin-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
}
.boot-hint.is-shown { opacity: 1; animation: none; }
.js-ready .boot-hint { display: none; }
@keyframes hint-in { to { opacity: 1; } }

.label {
  display: block;
  font-family: var(--font-ui); font-weight: 600; font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ivory-2);
}

.field-help { font-size: var(--step--1); color: var(--ivory-2); margin-top: 0.35rem; }
.form-error, .notice { color: var(--loss); font-weight: 500; min-height: 1.55em; }
.notice:empty { min-height: 0; }

/* ---------- Buttons and inputs ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 44px; padding: 0.55rem 1.1rem;
  font-family: var(--font-ui); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ivory); background: var(--room-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover:not(:disabled) { border-color: var(--brass); background: var(--felt-lo); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { background: var(--brass); color: var(--ink); border-color: var(--brass-hi); }
.btn-primary:hover:not(:disabled) { background: var(--brass-hi); border-color: var(--brass-hi); color: var(--ink); }

.btn-quiet { background: transparent; border-color: var(--line); }
.btn-small { min-height: 36px; padding: 0.35rem 0.75rem; font-size: 0.85rem; }
.btn-wide { width: 100%; }
.btn-step { min-width: 44px; padding-inline: 0; font-size: 1.3rem; line-height: 1; }

.btn[aria-pressed="true"] { background: var(--felt); border-color: var(--brass); }

.linklike {
  background: none; border: 0; padding: 0; color: var(--brass-hi); cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px;
}
.linklike:hover { color: var(--ivory); }

input[type="number"], input[type="password"], input[type="text"], select {
  min-height: 44px; padding: 0.45rem 0.7rem; border-radius: var(--radius);
  background: var(--ink); color: var(--ivory); border: 1px solid var(--line-strong);
  font-family: var(--font-ui); font-weight: 600; font-size: 1.1rem; font-variant-numeric: tabular-nums;
}
input:hover, select:hover { border-color: var(--brass); }
input[aria-invalid="true"] { border-color: var(--loss); }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.check { display: flex; gap: 0.7rem; align-items: flex-start; }
.check input { width: 22px; height: 22px; margin: 0.15rem 0 0; flex: none; accent-color: var(--brass); }

/* ---------- Sign-in card ---------- */

.gate {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding-block: 2rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.gate-card {
  width: min(100%, 27rem);
  padding: 2.25rem 2rem 1.75rem;
  border-radius: 14px;
  background:
    url("../img/felt.png"),
    radial-gradient(120% 80% at 50% 0%, var(--felt-hi), var(--felt) 55%, var(--felt-lo));
  box-shadow: 0 0 0 1px var(--line-strong), 0 0 0 9px var(--rail), 0 0 0 10px var(--rail-hi), 0 30px 60px var(--shadow);
  display: grid; gap: 1.1rem; text-align: center;
}
.gate-chip { width: 64px; height: 64px; margin: 0 auto -0.25rem; }
.gate-title { font-size: var(--step-5); letter-spacing: -0.02em; font-weight: 600; }
.gate-kicker {
  font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--brass-hi); font-size: 0.9rem; margin-top: -0.6rem;
}
.gate-form { display: grid; gap: 1rem; text-align: left; margin-top: 0.4rem; }
.gate-form .field { display: grid; gap: 0.35rem; }
.code-row { display: flex; gap: 0.5rem; }
.code-row input {
  flex: 1; min-width: 0; font-size: 1.6rem; letter-spacing: 0.35em; text-align: center;
  padding-inline: 0.5rem 0.2rem;
}
.gate-form .check label { font-size: 0.95rem; }
.gate-note { font-size: 0.9rem; color: var(--ivory-2); }
.gate-lead { color: var(--ivory); max-width: 34ch; margin-inline: auto; }
#welcome-error { min-height: 0; }
.gate-title:focus { outline: none; }
.gate-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.2rem; font-size: 0.9rem; }

/* ---------- App shell ---------- */

.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30;
  background: var(--room-2);
}

.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: rgb(15 44 33 / 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 76rem; margin: 0 auto;
  padding-block: 0.55rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem;
}

.balance { display: flex; align-items: center; gap: 0.6rem; justify-self: start; }
.balance-chip { width: 34px; height: 34px; flex: none; }
.balance-text { display: grid; line-height: 1.1; }
.balance-text .label { font-size: 0.72rem; }
.balance-amount {
  font-family: var(--font-ui); font-weight: 700; font-size: 1.45rem; font-variant-numeric: tabular-nums;
  color: var(--ivory); transition: color 0.4s;
}
.balance-amount.is-up { color: var(--win); }
.balance-amount.is-down { color: var(--ivory-2); }

.brand {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); color: var(--ivory);
  text-decoration: none; letter-spacing: -0.01em; white-space: nowrap;
}
.brand:hover { color: var(--brass-hi); }
.top-actions { justify-self: end; display: flex; gap: 0.5rem; }

.mini-base { fill: var(--brass); stroke: var(--rail-lo); stroke-width: 2; }
.mini-insert { fill: var(--ivory); }
.mini-face { fill: var(--felt); stroke: var(--ivory); stroke-width: 2; }
.mini-mark { fill: var(--brass); }

.main { flex: 1; outline: none; }
.view {
  max-width: 76rem; margin: 0 auto;
  padding-block: 1.75rem 3rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.site-foot { border-top: 1px solid var(--line); background: var(--room-2); }
.foot-inner {
  max-width: 76rem; margin: 0 auto; display: grid; gap: 0.6rem;
  padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  color: var(--ivory-2); font-size: 0.95rem; max-inline-size: 76rem;
}
.foot-inner p { max-width: 70ch; }
.foot-links { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }

/* ---------- Toasts ---------- */

.toasts {
  position: fixed; z-index: 45; left: 50%; transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 0.5rem; width: min(30rem, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  padding: 0.75rem 1rem; border-radius: var(--radius); background: var(--room-3);
  border: 1px solid var(--line-strong); box-shadow: 0 10px 24px var(--shadow);
  transition: opacity 0.4s, transform 0.4s;
}
.toast-win { border-color: var(--win); }
.toast.is-leaving { opacity: 0; transform: translateY(6px); }

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

.lobby { display: grid; gap: 1.75rem; }
.lobby-head { display: grid; gap: 0.6rem; max-width: 46rem; }
.lobby-title { font-size: var(--step-4); letter-spacing: -0.015em; outline: none; }
.lobby-intro { color: var(--ivory-2); font-size: var(--step-1); }

.tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1040px) { .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.tile {
  position: relative; height: 100%;
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border-radius: 10px; background: var(--room-2);
  border: 1px solid var(--line);
  transition: border-color 0.15s, transform 0.15s;
}
.tile:hover, .tile:focus-within { border-color: var(--brass); }
.tile:hover { transform: translateY(-2px); }
.tile:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.tile-art {
  aspect-ratio: 16 / 11; display: grid; place-items: center;
  background:
    url("../img/felt.png"),
    radial-gradient(110% 90% at 50% 25%, var(--felt-hi), var(--felt) 60%, var(--felt-lo));
  border-bottom: 3px solid var(--rail);
}
.tile-art svg { width: 100%; height: 100%; }
.tile-text { padding: 0.85rem 0.95rem 1rem; display: grid; gap: 0.3rem; align-content: start; }
.tile-name { font-size: var(--step-2); }
.tile-link { color: var(--ivory); text-decoration: none; }
.tile-link::after { content: ""; position: absolute; inset: 0; }
.tile-link:focus-visible { outline: none; }
.tile-desc { color: var(--ivory-2); font-size: 0.95rem; line-height: 1.45; }
.tile-meta {
  font-family: var(--font-ui); font-weight: 600; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--brass-hi); margin-top: 0.15rem;
}

/* tile art parts */
.art-felt-line { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.art-brass { fill: var(--brass); }
.art-brass-line { fill: none; stroke: var(--brass); stroke-width: 2; }
.art-ivory { fill: var(--ivory); }
.art-ivory-line { fill: none; stroke: var(--ivory); stroke-width: 2; }
.art-red { fill: var(--red); }
.art-black { fill: var(--black); }
.art-dark { fill: var(--felt-lo); }
.art-shadow { fill: rgb(0 0 0 / 0.3); }
.art-text { font-family: var(--font-ui); font-weight: 700; fill: var(--ivory); }
.art-text-ink { font-family: var(--font-ui); font-weight: 700; fill: var(--ink); }
.art-num { font-family: var(--font-display); font-weight: 600; fill: var(--brass-hi); }

/* ---------- Game page frame ---------- */

.game { display: grid; gap: 1.25rem; }
.game-head { display: grid; gap: 0.5rem; }
.back {
  justify-self: start; font-family: var(--font-ui); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.85rem; text-decoration: none; padding-block: 0.25rem;
}
.back:hover { text-decoration: underline; }
.game-head-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; }
.game-title { font-size: var(--step-4); letter-spacing: -0.015em; outline: none; }
.game-sub { color: var(--ivory-2); font-size: var(--step-1); }

/* the table: walnut rail around felt */
.table {
  border-radius: 26px; padding: 12px;
  background: linear-gradient(180deg, var(--rail-hi), var(--rail) 35%, var(--rail-lo));
  box-shadow: 0 22px 44px var(--shadow), inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 -2px 0 rgb(0 0 0 / 0.45);
}
.felt {
  position: relative; border-radius: 16px; overflow: hidden;
  background:
    url("../img/felt.png"),
    radial-gradient(120% 90% at 50% 30%, var(--felt-hi), var(--felt) 55%, var(--felt-lo));
  box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 0 50px rgb(0 0 0 / 0.45);
  padding: clamp(14px, 3vw, 28px);
}
.felt-print {
  font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgb(243 237 223 / 0.72); font-size: 0.8rem; text-align: center;
}

/* controls shelf under each table */
.shelf {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end;
  padding: 1rem 1.1rem; border-radius: 10px; background: var(--room-2); border: 1px solid var(--line);
}
.shelf-group { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.shelf-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.shelf .notice { flex-basis: 100%; }
.shelf .notice:empty { display: none; }

.stat { display: grid; gap: 0.1rem; }
.stat-value { font-family: var(--font-ui); font-weight: 700; font-size: 1.3rem; font-variant-numeric: tabular-nums; }

.result {
  min-height: 2.2rem; text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-2);
}
.result-win { color: var(--win); }
.result-loss { color: var(--loss); }
.result-push, .result-info { color: var(--ivory); }

/* bet amount field */
.bet-field { display: grid; gap: 0.35rem; }
.bet-field .field-help { margin: 0; }
.stepper { display: flex; gap: 0.35rem; }
.stepper input { width: 7.5rem; text-align: center; }
.quick { display: flex; gap: 0.35rem; }
.quick .btn { min-height: 34px; padding: 0.25rem 0.6rem; font-size: 0.8rem; }

/* chips */
.chip { display: block; }
.chip-base { fill: var(--c-base); stroke: rgb(0 0 0 / 0.35); stroke-width: 1.5; }
.chip-inserts rect { fill: var(--c-insert); }
.chip-ring { fill: none; stroke: var(--c-insert); stroke-width: 2.5; stroke-dasharray: 5 3.5; opacity: 0.85; }
.chip-face { fill: var(--c-base); stroke: rgb(0 0 0 / 0.2); stroke-width: 1; }
.chip-label { fill: var(--c-text); font-family: var(--font-ui); font-weight: 700; font-size: 32px; }
.chip-label.len3, .chip-label.len2 { font-size: 30px; }
.chip-label.len3 { font-size: 27px; }
.chip-v10 { --c-base: var(--ivory); --c-insert: var(--blue); --c-text: var(--ink); }
.chip-v50 { --c-base: var(--red); --c-insert: var(--ivory); --c-text: var(--ivory); }
.chip-v100 { --c-base: var(--black); --c-insert: var(--ivory); --c-text: var(--ivory); }
.chip-v500 { --c-base: var(--blue); --c-insert: var(--ivory); --c-text: var(--ivory); }
.chip-v1000 { --c-base: var(--brass); --c-insert: var(--ink); --c-text: var(--ink); }

.chip-picker { border: 0; margin: 0; padding: 0; display: grid; gap: 0.4rem; min-width: 0; }
.chip-row { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.chip-option {
  display: block; width: 50px; height: 50px; border-radius: 50%; cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  box-shadow: 0 3px 6px var(--shadow);
}
.chip-option .chip { width: 100%; height: 100%; }
.chip-option:hover { transform: translateY(-2px); }
.chip-picker input:checked + .chip-option { box-shadow: 0 0 0 3px var(--room-2), 0 0 0 6px var(--brass-hi); transform: translateY(-3px); }
.chip-picker input:focus-visible + .chip-option { outline: 3px solid var(--focus); outline-offset: 6px; }

.stack {
  display: inline-flex; align-items: center; gap: 0.25rem; pointer-events: none;
  font-family: var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums;
}
.stack .chip { width: 26px; height: 26px; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.5)); }
.stack-amt {
  background: var(--ink); color: var(--ivory); border-radius: 3px; padding: 0 0.3rem; font-size: 0.85rem; line-height: 1.4;
}

/* playing cards */
.card { width: var(--card-w, 92px); aspect-ratio: 5 / 7; perspective: 900px; flex: none; }
.card-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.42s cubic-bezier(.3,.7,.3,1); }
.card.is-down .card-flip { transform: rotateY(180deg); }
.card-face, .card-back {
  position: absolute; inset: 0; width: 100%; height: 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.4));
}
.card-back { transform: rotateY(180deg); }
.card-bg { fill: var(--card); stroke: var(--card-edge); stroke-width: 2; }
.card-rank { font-family: var(--font-ui); font-weight: 700; font-size: 44px; letter-spacing: -0.04em; }
.is-red .card-rank, .is-red use, .is-red .court-letter { fill: var(--red); }
.is-black .card-rank, .is-black use, .is-black .court-letter { fill: var(--black); }
.court-frame { fill: var(--court-bg); stroke: var(--brass-lo); stroke-width: 3; }
.court-line { fill: none; stroke: var(--brass-lo); stroke-width: 1.2; }
.court-letter { font-family: var(--font-display); font-weight: 600; font-size: 118px; }
.card-back-edge { fill: var(--card); stroke: var(--card-edge); stroke-width: 2; }
.card-back-line { fill: none; stroke: var(--brass); stroke-width: 2; }
.card-back-medal { fill: var(--felt-lo); stroke: var(--brass); stroke-width: 3; }
.card-back-mark { fill: var(--brass); }
.pat-bg { fill: var(--felt); }
.pat-line { stroke: var(--brass); stroke-opacity: 0.4; stroke-width: 1.2; }
.pat-dot { fill: var(--brass); fill-opacity: 0.55; }
.card.is-held { transform: translateY(-10px); }

/* dice */
.die { width: 64px; height: 64px; display: block; filter: drop-shadow(0 6px 6px rgb(0 0 0 / 0.45)); }
.die-body { fill: var(--red); stroke: var(--red-deep); stroke-width: 3; }
.die-shine { fill: rgb(255 255 255 / 0.12); }
.die-pips circle { fill: var(--ivory); }

/* help panel */
.howto { border: 1px solid var(--line); border-radius: 10px; background: var(--room-2); }
.howto summary {
  cursor: pointer; padding: 0.85rem 1.1rem; font-family: var(--font-ui); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; color: var(--brass-hi);
  list-style-position: inside;
}
.howto[open] summary { border-bottom: 1px solid var(--line); }
.howto-body { padding: 1rem 1.1rem 1.25rem; display: grid; gap: 0.8rem; max-width: 75ch; color: var(--ivory-2); }
.howto-body ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.howto-body strong { color: var(--ivory); }

.table-scroll { overflow-x: auto; max-width: 100%; }
.paytable { border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 16rem; }
.paytable caption { text-align: left; font-family: var(--font-ui); font-weight: 600; color: var(--ivory); padding-bottom: 0.4rem; }
.paytable th, .paytable td { padding: 0.35rem 0.8rem 0.35rem 0; text-align: left; border-bottom: 1px solid var(--line); }
.paytable th[scope="col"] { font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; color: var(--ivory-2); }
.paytable th[scope="row"] { color: var(--ivory); font-weight: 500; }

kbd {
  font-family: var(--font-ui); font-weight: 600; font-size: 0.8em; padding: 0.05em 0.35em;
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 3px; color: var(--ivory);
}

/* ---------- Roulette ---------- */

.rl-layout {
  display: grid; align-items: center; gap: clamp(16px, 3vw, 40px);
  grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
}
.rl-wheel-wrap { min-width: 0; }
.rl-wheel { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 22px rgb(0 0 0 / 0.5)); }
.rl-rim { fill: var(--rail); stroke: var(--rail-lo); stroke-width: 4; }
.rl-rim-line { fill: none; stroke: var(--rail-hi); stroke-width: 3; }
.rl-track { fill: var(--rail-lo); stroke: var(--brass-lo); stroke-width: 1.5; }
.deflector { fill: var(--brass); }
.rl-pocket-bed { fill: var(--black); }
.pk-red { fill: var(--red); }
.pk-black { fill: var(--black); }
.pk-green { fill: var(--pocket-green); }
.pk-num { fill: var(--ivory); font-family: var(--font-ui); font-weight: 700; font-size: 15px; }
.fret { stroke: var(--brass); stroke-width: 1.4; }
.rl-ring { fill: none; stroke: var(--brass); stroke-width: 2.5; }
.rl-cone { fill: var(--rail-hi); stroke: var(--rail-lo); stroke-width: 2; }
.rl-cone-ring { fill: var(--rail); stroke: var(--brass-lo); stroke-width: 2; }
.turret-arm { fill: var(--brass); stroke: var(--brass-lo); stroke-width: 1; }
.turret-hub { fill: var(--brass-hi); stroke: var(--brass-lo); stroke-width: 2; }
.turret-knob { fill: var(--brass); }
.rl-ball { fill: var(--card); }
.rl-ball-shadow { fill: rgb(0 0 0 / 0.45); }
.rl-ball-shine { fill: var(--card); opacity: 0.9; }
.rl-badge-disc { fill: var(--black); stroke: var(--brass-hi); stroke-width: 4; }
.rl-badge-red .rl-badge-disc { fill: var(--red); }
.rl-badge-green .rl-badge-disc { fill: var(--pocket-green); }
.rl-badge-num { fill: var(--ivory); font-family: var(--font-display); font-weight: 600; font-size: 46px; }

.rl-board-wrap { display: grid; gap: 0.75rem; min-width: 0; }
.rl-board {
  display: grid; gap: 2px; padding: 1px;
  grid-template-columns: 0.9fr repeat(12, minmax(0, 1fr)) 1.05fr;
  grid-template-rows: repeat(3, 54px) 46px 46px;
}
.rl-spot {
  grid-column: var(--c) / span var(--cs, 1);
  grid-row: var(--r) / span var(--rs, 1);
  position: relative; display: grid; place-items: center; min-width: 0; padding: 0;
  border: 0; border-radius: 0; cursor: pointer;
  background: var(--felt); color: var(--ivory);
  font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1px var(--grid-line);
}
.rl-spot:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.rl-num.rl-red { background: var(--red); }
.rl-num.rl-black { background: var(--black); }
.rl-num.rl-green { background: var(--pocket-green); }
.rl-out { font-size: 0.9rem; letter-spacing: 0.02em; }
.rl-spot:hover { box-shadow: 0 0 0 1px var(--grid-line), inset 0 0 0 3px var(--brass-hi); }
.rl-spot:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 0; z-index: 2; }
.rl-spot.is-hit { box-shadow: 0 0 0 1px var(--grid-line), inset 0 0 0 3px var(--brass-hi), 0 0 16px 2px var(--brass); z-index: 1; animation: hit-pulse 1.2s ease-in-out 3; }
@keyframes hit-pulse { 50% { box-shadow: 0 0 0 1px var(--grid-line), inset 0 0 0 3px var(--ivory), 0 0 22px 6px var(--brass); } }
.rl-board.is-locked .rl-spot { cursor: default; }
.rl-board.is-locked .rl-spot:hover { box-shadow: 0 0 0 1px var(--grid-line); }
.rl-spot-bet { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.rl-diamond { width: 44px; height: 26px; }
.rl-diamond path { stroke: var(--ivory); stroke-width: 1.5; }
.rl-diamond-red path { fill: var(--red); }
.rl-diamond-black path { fill: var(--black); }

.mark {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-base); color: var(--c-text);
  border: 3px dashed var(--c-insert);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.35), 0 3px 5px rgb(0 0 0 / 0.5);
  font-family: var(--font-ui); font-weight: 700; font-size: 0.72rem; letter-spacing: -0.02em; line-height: 1;
}

.rl-board-hint { color: var(--ivory); font-size: 0.9rem; opacity: 0.85; }
.rl-felt .result { margin-top: 1.1rem; }
.rl-history-wrap { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.rl-history { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.rl-hist {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 4px;
  font-family: var(--font-ui); font-weight: 700; color: var(--ivory);
  border: 1px solid rgb(243 237 223 / 0.45); font-variant-numeric: tabular-nums;
}
.rl-hist-red { background: var(--red); }
.rl-hist-black { background: var(--black); }
.rl-hist-green { background: var(--pocket-green); }
.rl-hist:first-child { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
.rl-hist-empty { color: var(--ivory); opacity: 0.8; font-size: 0.9rem; }

.art-rail { fill: var(--rail); stroke: var(--rail-hi); stroke-width: 2; }
.art-cone { fill: var(--rail-hi); }
.art-green-pocket { fill: var(--pocket-green); }

@media (max-width: 900px) {
  .rl-layout { grid-template-columns: 1fr; }
  .rl-wheel-wrap { width: min(100%, 300px); margin: 0 auto; }
}

@media (max-width: 640px) {
  .rl-board {
    grid-template-columns: 1fr 1fr repeat(3, 1.2fr);
    grid-template-rows: 42px repeat(12, 38px) 40px;
  }
  .rl-spot { grid-column: var(--vc) / span var(--vcs, 1); grid-row: var(--vr) / span var(--vrs, 1); }
  .rl-spot:first-child { border-radius: 6px 6px 0 0; }
  .rl-out { font-size: 0.82rem; }
  .mark { width: 28px; height: 28px; font-size: 0.66rem; }
}

/* ---------- Card tables (shared) ---------- */

.felt-arc { width: min(100%, 560px); height: auto; display: block; }
.felt-arc-text { fill: var(--brass-hi); font-family: var(--font-display); font-weight: 600; font-size: 25px; letter-spacing: 0.07em; }
.felt-arc-small { fill: var(--ivory); opacity: 0.8; font-family: var(--font-ui); font-weight: 600; font-size: 15px; letter-spacing: 0.16em; }
.hand-cards { display: flex; min-height: calc(var(--card-w) * 1.4); }
.hand-cards .card + .card { margin-left: calc(var(--card-w) * -0.5); }
.hand-total {
  font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums;
  background: var(--veil); border: 1px solid var(--line-strong); padding: 0.05rem 0.6rem; border-radius: var(--radius);
}
.hand-total:empty { display: none; }
.tag {
  font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.85rem; padding: 0.1rem 0.5rem; border-radius: var(--radius); color: var(--ink);
}
.tag:empty { display: none; }
.tag-win { background: var(--win); }
.tag-loss { background: var(--loss); }
.tag-push { background: var(--ivory-2); }

/* ---------- Blackjack ---------- */

.bj-felt { --card-w: clamp(60px, 8vw, 94px); display: grid; justify-items: center; gap: 0.4rem; padding-top: 1.5rem; }
.bj-dealer, .bj-player { display: grid; justify-items: center; gap: 0.55rem; width: 100%; }
.bj-cards { display: flex; min-height: calc(var(--card-w) * 1.4); }
.bj-cards .card + .card { margin-left: calc(var(--card-w) * -0.5); }
.bj-label { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; min-height: 34px; }
.bj-total {
  font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums;
  background: var(--veil); border: 1px solid var(--line-strong); padding: 0.05rem 0.6rem; border-radius: var(--radius);
}
.bj-total:empty { display: none; }
.bj-hands { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.5rem; }
.bj-hand { display: grid; justify-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; border-radius: 10px; border: 2px solid transparent; }
.bj-hand.is-active { border-color: var(--brass-hi); background: rgb(0 0 0 / 0.16); }
.bj-tag {
  font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.85rem; padding: 0.1rem 0.5rem; border-radius: var(--radius); color: var(--ink);
}
.bj-tag:empty { display: none; }
.bj-tag-win, .bj-tag-blackjack { background: var(--win); }
.bj-tag-lose, .bj-tag-bust { background: var(--loss); }
.bj-tag-push { background: var(--ivory-2); }
.bj-empty { min-height: calc(var(--card-w) * 1.4 + 1.2rem); display: grid; place-items: center; color: var(--ivory); opacity: 0.85; }
.bj-shoe { position: absolute; top: 14px; right: 16px; }
.bj-shoe-box {
  width: 74px; height: 64px; border-radius: 8px 8px 8px 22px; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(160deg, var(--rail-hi), var(--rail-lo));
  box-shadow: 0 6px 12px var(--shadow), inset 0 1px 0 rgb(255 255 255 / 0.15);
}
.bj-shoe-card { --card-w: 46px; transform: rotate(-62deg) translate(4px, 10px); }
.bj-shoe-note { font-size: 0.85rem; color: var(--ivory); opacity: 0.85; }
.bj-felt .result { margin-top: 0.5rem; }

.art-card { fill: var(--card); stroke: var(--card-edge); stroke-width: 1; }
.art-card-red { fill: var(--red); font-family: var(--font-ui); font-weight: 700; font-size: 15px; }
.art-card-black { fill: var(--black); font-family: var(--font-ui); font-weight: 700; font-size: 15px; }
.art-suit-red { fill: var(--red); }
.art-suit-black { fill: var(--black); }
.art-chip-red { fill: var(--red); stroke: var(--ivory); stroke-width: 3; stroke-dasharray: 4 3; }
.art-chip-ring { fill: none; stroke: var(--ivory); stroke-width: 1; }

@media (max-width: 640px) {
  .bj-shoe { top: 10px; right: 10px; transform: scale(0.75); transform-origin: top right; }
  .bj-felt { padding-top: 2.6rem; }
}

/* ---------- Baccarat ---------- */

.bac-felt { --card-w: clamp(56px, 7vw, 86px); display: grid; gap: 1.1rem; }
.bac-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.bac-top .felt-print { text-align: left; }
.bac-shoe { position: static; flex: none; }
.bac-hands { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.bac-side {
  display: grid; justify-items: center; align-content: start; gap: 0.6rem; padding: 0.8rem 0.6rem 1rem;
  border-radius: 12px; border: 2px solid var(--line); background: rgb(0 0 0 / 0.1);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.bac-side.is-winner { border-color: var(--brass-hi); box-shadow: 0 0 24px rgb(217 180 90 / 0.35); }
.bac-side-head { display: flex; align-items: center; gap: 0.6rem; }
.bac-side-name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); }
.bac-side-player .bac-side-name { color: var(--player); }
.bac-side-banker .bac-side-name { color: var(--banker); }
.bac-total {
  min-width: 2.4rem; text-align: center; font-family: var(--font-ui); font-weight: 700; font-size: 1.25rem;
  background: var(--veil); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.bac-total:empty { visibility: hidden; }
.bac-total:empty::before { content: "0"; }
.bac-cards { display: flex; align-items: center; min-height: calc(var(--card-w) * 1.4); }
.bac-cards > * + * { margin-left: calc(var(--card-w) * -0.25); }
.bac-third { transform: rotate(90deg); margin-inline: calc(var(--card-w) * 0.12) calc(var(--card-w) * 0.2) !important; }

.bac-spots { display: grid; grid-template-columns: 1fr 0.8fr 1fr; gap: 10px; }
.bac-spot {
  position: relative; min-height: 100px; display: grid; place-content: center; gap: 0.2rem; padding: 0.7rem;
  border-radius: 12px; border: 2px solid var(--grid-line); background: rgb(0 0 0 / 0.1);
  color: var(--ivory); cursor: pointer; text-align: center;
}
.bac-spot-player { border-color: var(--player); }
.bac-spot-banker { border-color: var(--banker); }
.bac-spot-tie { border-color: var(--brass); }
.bac-spot:hover { background: rgb(0 0 0 / 0.2); box-shadow: inset 0 0 0 2px var(--brass-hi); }
.bac-spot:focus-visible { outline-offset: 3px; }
.bac-spot.is-hit { box-shadow: 0 0 0 3px var(--brass-hi), 0 0 26px var(--brass); }
.bac-spots.is-locked .bac-spot { cursor: default; }
.bac-spot-name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); }
.bac-spot-pays { font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; }
.bac-spot-bet { position: absolute; top: 8px; right: 10px; }

.bac-road-wrap { display: grid; gap: 0.5rem; justify-items: center; }
.bac-road {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, 22px); grid-auto-columns: 22px; gap: 3px;
  padding: 6px; border-radius: 6px; border: 1px solid var(--line); background: rgb(0 0 0 / 0.22);
  max-width: 100%; overflow-x: auto;
}
.bead {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.72rem; color: var(--ivory);
}
.bead-player { background: var(--blue); }
.bead-banker { background: var(--red); }
.bead-tie { background: var(--pocket-green); box-shadow: inset 0 0 0 1px var(--ivory); }
.bead-empty { box-shadow: inset 0 0 0 1px rgb(243 237 223 / 0.14); }
.bac-tally { font-size: 0.9rem; color: var(--ivory); opacity: 0.85; }

.art-label { font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; fill: var(--ivory); }

@media (max-width: 560px) {
  .bac-hands { grid-template-columns: 1fr; }
  .bac-spots { grid-template-columns: 1fr 1fr; }
  .bac-spot-tie { grid-column: 1 / -1; grid-row: 2; min-height: 70px; }
  .bac-spot { min-height: 86px; }
}

/* ---------- Video poker ---------- */

.vp-felt { padding: clamp(10px, 2vw, 22px); }
.vp-screen {
  display: grid; gap: 0.9rem; padding: clamp(12px, 2.4vw, 24px); border-radius: 12px;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.42), rgb(0 0 0 / 0.25));
  box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 10px 30px rgb(0 0 0 / 0.35);
}
.vp-pays { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-weight: 600; font-variant-numeric: tabular-nums; }
.vp-pays th, .vp-pays td { padding: 0.22rem 0.6rem; text-align: right; white-space: nowrap; }
.vp-pays th:first-child { text-align: left; }
.vp-pays thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ivory-2); border-bottom: 1px solid var(--line); }
.vp-pays tbody th { color: var(--brass-hi); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.92rem; }
.vp-pays tbody td { color: var(--ivory); }
.vp-pays .is-col { background: rgb(217 180 90 / 0.16); }
.vp-pays tr.is-hint th, .vp-pays tr.is-hint td { color: var(--ivory); text-decoration: underline; text-underline-offset: 0.2em; }
.vp-pays tr.is-win th, .vp-pays tr.is-win td { background: var(--brass); color: var(--ink); }
.vp-hand-name { text-align: center; font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); color: var(--brass-hi); min-height: 1.5em; }

.vp-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(6px, 1.6vw, 18px); max-width: 720px; width: 100%; margin: 0 auto; }
.vp-card {
  position: relative; display: grid; justify-items: center; gap: 0.35rem; padding: 1.7rem 0 0.2rem;
  background: none; border: 0; border-radius: 8px; color: var(--ivory); cursor: pointer;
}
.vp-card:disabled { cursor: default; }
.vp-card-holder { width: 100%; }
.vp-card .card { width: 100%; transition: transform 0.15s; }
.vp-card.is-held .card { transform: translateY(-6px); }
.vp-card:not(:disabled):hover .card { transform: translateY(-3px); }
.vp-card.is-held:not(:disabled):hover .card { transform: translateY(-6px); }
.vp-held {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem;
  background: var(--brass); color: var(--ink); padding: 0.05rem 0.45rem; border-radius: 3px; visibility: hidden;
}
.vp-card.is-held .vp-held { visibility: visible; }
.vp-key { font-family: var(--font-ui); font-weight: 600; font-size: 0.75rem; color: var(--ivory-2); }
.vp-card:focus-visible { outline-offset: 4px; }

.vp-coins { display: flex; gap: 4px; }
.vp-coin-opt {
  min-width: 44px; min-height: 44px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; background: var(--room-3);
}
.vp-coins input:checked + .vp-coin-opt { background: var(--brass); color: var(--ink); border-color: var(--brass-hi); }
.vp-coins input:focus-visible + .vp-coin-opt { outline: 3px solid var(--focus); outline-offset: 2px; }
.vp-coins input:disabled + .vp-coin-opt { opacity: 0.45; cursor: not-allowed; }
.vp-deal { min-width: 8rem; }

.art-screen { fill: var(--room); stroke: var(--brass-lo); stroke-width: 2; }
.art-held { font-family: var(--font-ui); font-weight: 700; font-size: 7px; letter-spacing: 0.08em; fill: var(--brass-hi); }
.art-screen-text { font-family: var(--font-ui); font-weight: 700; font-size: 9px; letter-spacing: 0.12em; fill: var(--brass-hi); }

@media (max-width: 560px) {
  .vp-pays th:not(:first-child):not(.is-col), .vp-pays td:not(.is-col) { display: none; }
  .vp-held { font-size: 0.66rem; letter-spacing: 0.04em; padding: 0 0.25rem; }
  .vp-key { display: none; }
}

/* ---------- Craps ---------- */

.cr-felt { display: grid; gap: 1rem; }
.cr-top { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.cr-dice-box {
  height: 150px; border-radius: 12px; display: grid; place-items: center; overflow: hidden;
  background: rgb(0 0 0 / 0.2); box-shadow: inset 0 0 0 3px var(--rail), inset 0 10px 22px rgb(0 0 0 / 0.45);
}
.cr-dice { display: flex; gap: 20px; }
.cr-dice .die { width: 62px; height: 62px; }
.cr-point-area { position: relative; display: grid; gap: 0.6rem; padding-top: 30px; }
.cr-points { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 2px solid var(--grid-line); border-radius: 8px; overflow: hidden; }
.cr-point-box {
  display: grid; place-items: center; min-height: 64px; border-right: 2px solid var(--grid-line);
  font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; color: var(--ivory);
  transition: background-color 0.3s;
}
.cr-point-box:last-child { border-right: 0; }
.cr-point-box.is-point { background: rgb(217 180 90 / 0.2); }
.cr-puck {
  position: absolute; top: 0; left: calc((var(--slot) + 0.5) * (100% / 6)); transform: translateX(-50%);
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; z-index: 1;
  font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.82rem;
  background: var(--black); color: var(--ivory); border: 3px solid var(--ivory);
  box-shadow: 0 4px 8px var(--shadow);
  transition: left 0.45s cubic-bezier(.3,.7,.3,1), background-color 0.2s, color 0.2s;
}
.cr-puck:not(.is-on) { left: 0; transform: translateX(-12%); }
.cr-puck.is-on { background: var(--card); color: var(--ink); border-color: var(--black); }
.cr-point-text { font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; color: var(--ivory); }

.cr-layout {
  display: grid; gap: 8px;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  grid-template-areas: "field props" "dontpass props" "pass props" "odds props";
}
.cr-spot-field { grid-area: field; }
.cr-spot-dontpass { grid-area: dontpass; }
.cr-spot-pass { grid-area: pass; }
.cr-spot-odds { grid-area: odds; }
.cr-props { grid-area: props; display: grid; gap: 8px; }
.cr-spot {
  position: relative; width: 100%; min-height: 66px; display: grid; justify-items: center; align-content: center; gap: 0.15rem;
  padding: 0.6rem 4.5rem; border: 2px solid var(--grid-line); border-radius: 10px; background: rgb(0 0 0 / 0.08);
  color: var(--ivory); cursor: pointer; text-align: center;
}
.cr-props .cr-spot { padding-inline: 0.75rem; padding-top: 1.6rem; padding-bottom: 1.6rem; }
.cr-spot-btn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: inherit; }
.cr-spot-btn::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
.cr-spot-btn:focus-visible { outline: none; }
.cr-spot-btn:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.cr-info { display: grid; justify-items: center; gap: 0.15rem; pointer-events: none; }
.cr-spot:hover { box-shadow: inset 0 0 0 2px var(--brass-hi); }
.cr-spot.is-closed { cursor: not-allowed; opacity: 0.72; }
.cr-spot.is-closed:hover { box-shadow: none; }
.cr-name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); }
.cr-name-big { font-size: var(--step-3); letter-spacing: 0.04em; }
.cr-pays { font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.76rem; }
.cr-field-nums { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--brass-hi); }
.cr-ring { display: inline-grid; place-items: center; width: 1.65em; height: 1.65em; margin-inline: 0.15em; border: 1.5px solid currentColor; border-radius: 50%; }
.cr-spot-bet { position: absolute; top: 8px; right: 10px; pointer-events: none; }
.cr-remove {
  position: absolute; z-index: 1; bottom: 7px; right: 8px; min-height: 26px; padding: 0.1rem 0.5rem; cursor: pointer;
  font-family: var(--font-ui); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--ink); color: var(--ivory); border: 1px solid var(--line-strong); border-radius: 3px;
}
.cr-remove:hover { border-color: var(--brass); }
.cr-history { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cr-hist {
  padding: 0.1rem 0.5rem; border-radius: 4px; background: var(--veil); border: 1px solid var(--line-strong);
  font-family: var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ivory);
}
.cr-hist:first-child { outline: 2px solid var(--brass-hi); outline-offset: 1px; }
.cr-hist-dice { font-size: 0.85em; }

.art-die { fill: var(--red); stroke: var(--red-deep); stroke-width: 2; }
.art-puck { fill: var(--card); stroke: var(--black); stroke-width: 2; }
.art-puck-text { font-family: var(--font-ui); font-weight: 700; font-size: 8px; fill: var(--ink); }

@media (max-width: 760px) {
  .cr-top { grid-template-columns: 1fr; }
  .cr-dice-box { height: 120px; }
  .cr-layout { grid-template-columns: 1fr; grid-template-areas: "field" "dontpass" "pass" "odds" "props"; }
  .cr-props { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cr-props .cr-spot { padding: 1.9rem 0.4rem 2rem; }
  .cr-props .cr-name { font-size: var(--step-0); }
  .cr-point-box { min-height: 52px; font-size: 1.15rem; }
  .cr-spot { padding-inline: 1rem; padding-bottom: 2.1rem; }
}

/* ---------- Slots ---------- */

.sl-felt { display: grid; gap: 1rem; justify-items: center; }
.sl-cabinet {
  width: min(100%, 640px); display: grid; gap: 0.9rem; padding: clamp(10px, 2.4vw, 22px); border-radius: 18px;
  background: linear-gradient(180deg, var(--rail-hi), var(--rail) 40%, var(--rail-lo));
  box-shadow: 0 16px 30px var(--shadow), inset 0 1px 0 rgb(255 255 255 / 0.15);
}
.sl-marquee { text-align: center; font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); color: var(--brass-hi); }
.sl-window {
  position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 7px;
  border-radius: 10px; background: var(--ink); box-shadow: inset 0 0 0 2px var(--brass-lo), inset 0 6px 16px rgb(0 0 0 / 0.6);
}
.sl-reel {
  position: relative; aspect-ratio: 1 / 3; overflow: hidden; border-radius: 6px; container-type: inline-size;
  background: linear-gradient(90deg, var(--reel-edge), var(--card) 28%, var(--card) 72%, var(--reel-edge));
}
.sl-reel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.38), transparent 22%, transparent 78%, rgb(0 0 0 / 0.38));
}
.sl-strip { display: grid; will-change: transform; }
.sl-cell { height: 33.333cqh; height: 100cqw; display: grid; place-items: center; padding: 11%; transition: background-color 0.2s; }
.sl-sym { width: 100%; height: 100%; overflow: visible; }
.sl-cell.is-win { background: rgb(217 180 90 / 0.4); animation: sl-win 0.8s ease-in-out 3; }
@keyframes sl-win { 50% { transform: scale(1.08); } }
.sl-window.has-win .sl-cell:not(.is-win) .sl-sym { opacity: 0.5; }
.sl-lines { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); pointer-events: none; overflow: visible; }
.sl-line { fill: none; stroke: var(--red); stroke-width: 4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; opacity: 0.9; }
.sl-readout {
  display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.9rem; border-radius: 8px;
  background: var(--ink); box-shadow: inset 0 0 0 1px var(--brass-lo);
}
.sl-readout .stat-value { color: var(--brass-hi); }
.sl-spin { min-width: 10rem; min-height: 52px; font-size: 1.1rem; }

.sym-red { fill: var(--red); stroke: var(--red-deep); stroke-width: 1.5; }
.sym-shine { fill: var(--card); opacity: 0.55; }
.sym-stem { fill: none; stroke: var(--leaf); stroke-width: 5; stroke-linecap: round; }
.sym-leaf { fill: var(--leaf); }
.sym-yellow { fill: var(--lemon); stroke: var(--lemon-edge); stroke-width: 2; }
.sym-grape { fill: var(--grape); stroke: var(--grape-edge); stroke-width: 1.5; }
.sym-gold { fill: var(--brass); stroke: var(--brass-lo); stroke-width: 2; }
.sym-gold-dark { fill: var(--brass-lo); }
.sym-green { fill: var(--clover); stroke: var(--clover-edge); stroke-width: 1.5; }
.sym-bar { fill: var(--black); }
.sym-bar-line { fill: none; stroke: var(--brass); stroke-width: 2; }
.sym-bar-text { fill: var(--ivory); font-family: var(--font-ui); font-weight: 700; font-size: 26px; letter-spacing: 0.06em; }
.sym-seven { fill: var(--red); stroke: var(--red-deep); stroke-width: 4; paint-order: stroke; font-family: var(--font-display); font-weight: 800; font-size: 100px; }
.sym-gem { fill: var(--gem); stroke: var(--gem-edge); stroke-width: 2; }
.sym-gem-face { fill: var(--gem-hi); }
.sym-gem-top { fill: var(--gem-top); }
.sym-wild-text { fill: var(--ink); font-family: var(--font-ui); font-weight: 700; font-size: 17px; letter-spacing: 0.1em; }
.sym-star { fill: var(--brass); stroke: var(--brass-lo); stroke-width: 2; }
.sym-star-in { fill: var(--brass-hi); }

.sl-diagrams { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 0.75rem; max-width: 40rem; }
.sl-diagram { margin: 0; display: grid; gap: 0.25rem; justify-items: center; }
.sl-diagram svg { width: 80px; height: 48px; }
.sl-diagram .off { fill: rgb(243 237 223 / 0.14); }
.sl-diagram .on { fill: var(--brass); }
.sl-diagram figcaption { font-size: 0.85rem; color: var(--ivory-2); }

.art-cabinet { fill: var(--rail); stroke: var(--brass-lo); stroke-width: 2; }
.art-reel { fill: var(--card); }
.art-seven { fill: var(--red); font-family: var(--font-display); font-weight: 800; font-size: 34px; }
.art-payline { stroke: var(--red); stroke-width: 2; opacity: 0.8; }

/* ---------- Keno ---------- */

.kn-felt { display: grid; gap: 1rem; }
.kn-layout { display: grid; grid-template-columns: minmax(0, 620px) minmax(260px, 1fr); gap: 1.5rem; align-items: start; justify-content: center; }
.kn-board { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.kn-num {
  aspect-ratio: 1; min-width: 0; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1.5px solid var(--grid-line); background: rgb(0 0 0 / 0.14); color: var(--ivory);
  font-family: var(--font-ui); font-weight: 700; font-size: clamp(0.78rem, 1.5vw, 1.05rem); font-variant-numeric: tabular-nums;
  transition: background-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.kn-num:hover { border-color: var(--brass-hi); }
.kn-num.is-picked { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.kn-num.is-drawn { background: var(--felt-lo); border-color: var(--brass); color: var(--brass-hi); box-shadow: inset 0 0 0 2px var(--brass-lo); }
.kn-num.is-hit { background: var(--brass); color: var(--ink); border-color: var(--brass-hi); box-shadow: 0 0 14px var(--brass); transform: scale(1.06); }
.kn-board.is-locked .kn-num { cursor: default; }
.kn-side { display: grid; gap: 0.6rem; padding: 0.9rem; border-radius: 10px; background: rgb(0 0 0 / 0.25); border: 1px solid var(--line); }
.kn-pays { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.kn-pays caption { text-align: left; font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--ivory); padding-bottom: 0.4rem; }
.kn-pays th, .kn-pays td { padding: 0.3rem 0.4rem; text-align: left; border-bottom: 1px solid var(--line); }
.kn-pays thead th { font-family: var(--font-ui); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ivory-2); }
.kn-pays tbody th { font-family: var(--font-ui); font-weight: 700; }
.kn-pays td { white-space: nowrap; }
.kn-pays td:last-child { color: var(--ivory-2); font-size: 0.9rem; }
.kn-mult { font-size: 0.8rem; color: var(--ivory-2); }
.kn-pays tr.is-win .kn-mult, .kn-pays tr.is-win td:last-child { color: var(--ink); }
.kn-pays tr.is-win th, .kn-pays tr.is-win td { background: var(--brass); color: var(--ink); }
.kn-return { font-size: 0.85rem; color: var(--ivory-2); }
.kn-tray-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; min-height: 40px; }
.kn-tray { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.kn-ball {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--card), var(--ivory-2)); color: var(--ink);
  font-family: var(--font-ui); font-weight: 700; font-size: 0.85rem; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 4px var(--shadow); animation: ball-in 0.25s ease-out;
}
.kn-ball.is-hit { background: radial-gradient(circle at 35% 30%, var(--brass-hi), var(--brass)); }
@keyframes ball-in { from { transform: scale(0.4); opacity: 0; } }

.art-ball { fill: var(--brass); }
.art-slot { fill: none; stroke: var(--grid-line); stroke-width: 1.2; }

@media (max-width: 860px) { .kn-layout { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .kn-board { gap: 3px; } }

/* ---------- Mines ---------- */

.mn-felt { display: grid; gap: 1rem; }
.mn-layout { display: grid; grid-template-columns: minmax(0, 460px) minmax(190px, 240px); gap: 1.5rem; justify-content: center; align-items: center; }
.mn-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.mn-tile {
  aspect-ratio: 1; min-width: 0; padding: 14%; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 10px; background: linear-gradient(180deg, var(--felt-hi), var(--felt-lo));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 -3px 0 rgb(0 0 0 / 0.35), 0 4px 8px rgb(0 0 0 / 0.35), 0 0 0 1px var(--line);
  transition: transform 0.12s, box-shadow 0.12s;
}
.mn-grid.is-live .mn-tile:not(:disabled):hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 -3px 0 rgb(0 0 0 / 0.35), 0 6px 12px rgb(0 0 0 / 0.4), 0 0 0 2px var(--brass-hi); }
.mn-tile:disabled { cursor: default; }
.mn-grid:not(.is-live) .mn-tile:not(.is-gem):not(.is-mine) { opacity: 0.8; }
.mn-tile.is-gem, .mn-tile.is-mine { background: rgb(0 0 0 / 0.32); box-shadow: inset 0 0 0 1px var(--line); }
.mn-tile.is-gem:not(.is-faded) { box-shadow: inset 0 0 0 2px var(--gem-edge), 0 0 12px rgb(79 179 217 / 0.35); }
.mn-tile.is-boom { background: var(--red); box-shadow: 0 0 24px var(--red); }
.mn-tile.is-faded .mn-icon { opacity: 0.42; }
.mn-tile.is-mine.is-faded .mn-icon { opacity: 0.8; }
.mn-tile.is-boom .mn-icon { opacity: 1; }
.mn-tile.is-new .mn-icon { animation: pop 0.3s ease-out; }
@keyframes pop { from { transform: scale(0.3); opacity: 0; } }
.mn-icon { width: 100%; height: 100%; }
.mn-spike { fill: var(--black); }
.mn-body { fill: var(--black); stroke: var(--ivory-2); stroke-width: 2; }
.mn-light { fill: var(--red); }
.mn-shine { fill: var(--card); opacity: 0.35; }
.mn-grid.is-shake { animation: shake 0.45s; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.mn-side { display: grid; gap: 0.9rem; padding: 1rem; border-radius: 10px; background: rgb(0 0 0 / 0.25); border: 1px solid var(--line); }
.mn-side .stat-value { font-size: 1.6rem; color: var(--brass-hi); }

.art-tile { fill: var(--felt-hi); stroke: var(--line-strong); stroke-width: 1; }
.art-tile-open { fill: rgb(0 0 0 / 0.3); stroke: var(--gem-edge); stroke-width: 1.5; }
.art-gem { fill: var(--gem); }
.art-mine { fill: var(--black); stroke: var(--red); stroke-width: 2.5; }

@media (max-width: 760px) {
  .mn-layout { grid-template-columns: 1fr; }
  .mn-side { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; padding: 0.75rem; }
  .mn-side .stat-value { font-size: 1.1rem; }
  .mn-side .label { font-size: 0.7rem; }
  .mn-grid { gap: 6px; }
}

/* ---------- Crash ---------- */

.cx-felt { display: grid; gap: 1rem; }
.cx-stage {
  position: relative; height: clamp(260px, 40vw, 420px); border-radius: 12px; overflow: hidden;
  background: rgb(0 0 0 / 0.28); box-shadow: inset 0 0 0 1px var(--line), inset 0 10px 30px rgb(0 0 0 / 0.35);
}
.cx-canvas { width: 100%; height: 100%; display: block; }
.cx-readout { position: absolute; top: 12%; left: 0; right: 0; text-align: center; pointer-events: none; }
.cx-big {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ivory); text-shadow: 0 4px 18px rgb(0 0 0 / 0.5);
}
.cx-big.is-cashed { color: var(--win); }
.cx-big.is-crash { color: var(--loss); }
.cx-sub { margin-top: 0.45rem; font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; color: var(--ivory); }
.cx-main { min-width: 11rem; min-height: 52px; font-size: 1.05rem; }
.cx-main.is-cash { background: var(--win); border-color: var(--win); color: var(--ink); }
.cx-main.is-cash:hover:not(:disabled) { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
.cx-history { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cx-pill { padding: 0.1rem 0.5rem; border-radius: 4px; font-family: var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.9rem; color: var(--ink); }
.cx-pill.is-low { background: var(--loss); }
.cx-pill.is-mid { background: var(--ivory-2); }
.cx-pill.is-high { background: var(--brass); }
#cr2-auto { width: 7.5rem; }

.art-grid { stroke: var(--grid-line); stroke-width: 0.8; opacity: 0.5; }
.art-curve { fill: none; stroke: var(--brass); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Peg Drop ---------- */

.pd-felt { display: grid; gap: 1rem; }
.pd-stage { width: min(100%, 760px); margin: 0 auto; aspect-ratio: 1 / 0.8; }
.pd-canvas { width: 100%; height: 100%; display: block; }
.pd-drop { min-width: 10rem; min-height: 52px; font-size: 1.05rem; }
.pd-return { margin-top: 0.15rem; }
.art-ball-peg { fill: var(--brass-hi); stroke: var(--brass-lo); stroke-width: 1.5; }

@media (max-width: 640px) { .pd-stage { aspect-ratio: 1 / 0.95; } }

/* ---------- Legal pages ---------- */

.legal-top { background: var(--room-2); border-bottom: 1px solid var(--line); }
.legal-top-inner {
  max-width: 76rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem;
  padding-block: 0.9rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.legal-top .brand { display: inline; }
.legal {
  max-width: 48rem; margin: 0 auto; outline: none;
  padding-block: 2.5rem 4rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.legal h1 { font-size: var(--step-4); letter-spacing: -0.015em; }
.legal h2 { font-size: var(--step-2); margin-top: 2.2rem; margin-bottom: 0.6rem; }
.legal p, .legal li { max-width: 68ch; }
.legal p + p { margin-top: 0.8rem; }
.legal ul { margin: 0.4rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.45rem; }
.legal code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9em; background: var(--veil); padding: 0.05em 0.3em; border-radius: 3px; }
.updated { color: var(--ivory-2); margin-top: 0.5rem; }
.legal-summary { margin-top: 1.5rem; padding: 1rem 1.2rem; border-radius: 10px; background: var(--room-2); border: 1px solid var(--line-strong); }
.storage-table { border-collapse: collapse; min-width: 40rem; font-size: 0.95rem; }
.storage-table th, .storage-table td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--line); }
.storage-table thead th { font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; color: var(--ivory-2); }
.legal-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.legal-status { margin-top: 0.75rem; color: var(--win); min-height: 1.55em; }

/* single-column grids: never let wide content stretch the column past the screen */
.gate, .gate-card, .gate-form, .game, .lobby, .lobby-head, .howto-body, .bet-field, .chip-picker, .vp-screen,
.bj-felt, .bac-felt, .cr-felt, .kn-felt, .mn-felt, .cx-felt, .pd-felt, .sl-felt, .sl-cabinet { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 640px) {
  .storage-table { min-width: 0; width: 100%; }
  .storage-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .storage-table tr { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
  .storage-table th, .storage-table td { display: block; border: 0; padding: 0.2rem 0; }
  .storage-table td::before {
    content: attr(data-label); display: block; font-family: var(--font-ui); font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; font-size: 0.75rem; color: var(--ivory-2);
  }
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
  .gate-card { padding: 1.75rem 1.25rem 1.5rem; }
  .gate-title { font-size: 2.4rem; }
  .topbar-inner { grid-template-columns: 1fr auto; }
  .brand { display: none; }
  .balance-amount { font-size: 1.3rem; }
  .lobby-title, .game-title { font-size: var(--step-3); }
  .tile-text { padding: 0.7rem 0.75rem 0.85rem; }
  .tile-name { font-size: var(--step-1); }
  .tile-desc { font-size: 0.875rem; }
  .table { padding: 8px; border-radius: 20px; }
  .felt { border-radius: 13px; }
  .shelf { padding: 0.85rem; }
  .shelf-actions { margin-left: 0; width: 100%; }
  .shelf-actions .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; scroll-behavior: auto !important; }
  .tile:hover { transform: none; }
  .boot-hint:not(.is-shown) { animation-delay: 4s !important; }
}