/* Low Stakes
   Landing: a goldenrod game-box lid, printed in deep green ink.
   Table: a lamp-lit card room, walnut rail, green felt. */

:root {
  --box: #F0B23E;
  --box-deep: #DE9B22;
  --ink: #10302A;
  --ink-soft: #35554C;
  --felt: #1F6150;
  --felt-deep: #123F33;
  --felt-line: rgba(242, 226, 190, .18);
  --rail: #3A2216;
  --rail-hi: #6B4128;
  --room: #1F150E;
  --room-2: #2C1E14;
  --paper: #FFFDF7;
  --card-red: #C8312A;
  --card-black: #1B1C20;
  --cream: #F5EBDD;
  --cream-dim: rgba(245, 235, 221, .68);
  --cream-faint: rgba(245, 235, 221, .12);
  --vermilion: #E0472F;
  --vermilion-deep: #A93220;
  --cobalt: #2A55C9;
  --mustard: #F2BE45;
  --g-holdem: #1F6150;
  --g-bj: #1C4D6B;
  --g-roulette: #74232F;
  --g-crash: #2B2A6B;
  --font: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cw: clamp(38px, 5.4vmin, 62px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-variation-settings: 'opsz' 14;
  color: var(--ink);
  background: var(--box);
  -webkit-font-smoothing: antialiased;
}
body.on-table { background: var(--room); color: var(--cream); overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; border-radius: 6px; }
.on-table :focus-visible { outline-color: var(--mustard); }
h1, h2, h3 { margin: 0; line-height: 1.05; }
p { margin: 0; }
kbd {
  font: inherit; font-size: 11px; font-weight: 600; line-height: 1;
  padding: 3px 5px; margin-left: 8px; border-radius: 4px;
  background: rgba(0, 0, 0, .18); opacity: .75;
}
@media (pointer: coarse) { kbd { display: none; } }

/* ------------------------------------------------------------ buttons */
.btn {
  --bg: var(--paper); --fg: var(--ink); --edge: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 0 20px;
  font-size: 16px; font-weight: 700; font-variation-settings: 'wdth' 90;
  color: var(--fg); background: var(--bg);
  border: 2px solid var(--edge); border-radius: 14px;
  box-shadow: 0 4px 0 var(--edge);
  transition: transform .08s, box-shadow .08s, background .15s;
  text-decoration: none; white-space: nowrap;
  user-select: none; -webkit-user-select: none;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 0 var(--edge); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.btn:disabled { opacity: .45; box-shadow: 0 2px 0 var(--edge); }
.btn-primary { --bg: var(--vermilion); --fg: var(--paper); }
.btn-dark { --bg: var(--ink); --fg: var(--cream); --edge: #061612; }
.btn-quiet { --bg: transparent; box-shadow: none; }
.btn-quiet:hover:not(:disabled) { background: rgba(16, 48, 42, .08); box-shadow: none; transform: none; }
.btn-quiet:active:not(:disabled) { box-shadow: none; transform: translateY(1px); }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 11px; }
.btn-wide { width: 100%; }
.btn b { font-variant-numeric: tabular-nums; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent;
  font-size: 22px; line-height: 1; display: inline-grid; place-items: center; opacity: .7;
}
.icon-btn:hover { opacity: 1; background: rgba(0, 0, 0, .08); }
.link-btn { border: 0; background: none; padding: 4px 6px; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ wordmark */
.wordmark {
  display: inline-flex; align-items: center; gap: .18em;
  font-weight: 800; font-variation-settings: 'wdth' 75, 'opsz' 96;
  font-size: 30px; letter-spacing: -.01em; line-height: 1;
  text-decoration: none; color: var(--ink);
}
.wordmark::before {
  content: ''; width: .82em; height: .82em; border-radius: 50%; margin-right: .2em;
  background:
    radial-gradient(circle, var(--paper) 0 34%, transparent 35%),
    radial-gradient(circle, var(--vermilion) 0 58%, transparent 59%),
    repeating-conic-gradient(var(--vermilion) 0 30deg, var(--paper) 30deg 45deg);
  box-shadow: 0 2px 0 var(--ink);
}
.wordmark.sm { font-size: 22px; color: var(--mustard); }
.wordmark.sm::before { box-shadow: none; }

/* ------------------------------------------------------------ landing */
.landing {
  background-image: radial-gradient(rgba(16, 48, 42, .07) 1px, transparent 1.4px);
  background-size: 7px 7px;
}
.l-top {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1240px; margin: 0 auto; padding: 22px 28px;
}
.l-nav { display: flex; gap: 22px; font-weight: 600; font-size: 15px; }
.l-nav a { text-decoration: none; border-bottom: 2px solid transparent; }
.l-nav a:hover { border-color: var(--ink); }

.hero {
  max-width: 1240px; margin: 0 auto; padding: 24px 28px 80px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 48px; align-items: center;
}
.hero h1 {
  font-size: clamp(54px, 7.6vw, 112px);
  font-weight: 800; font-variation-settings: 'wdth' 75, 'opsz' 96;
  letter-spacing: -.025em; line-height: .88;
  max-width: 10ch;
}
.lede { font-size: 19px; line-height: 1.5; max-width: 36ch; margin-top: 24px; color: var(--ink); }

.sit { margin-top: 34px; max-width: 460px; display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 14px; font-weight: 700; }
.field input, .field select {
  height: 52px; padding: 0 16px; font-size: 17px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 14px;
}
.field input::placeholder { color: rgba(16, 48, 42, .45); }
.field.sm input, .field.sm select { height: 42px; font-size: 15px; border-radius: 11px; padding: 0 12px; }

.swatches { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.swatches legend { font-size: 14px; font-weight: 700; margin-bottom: 6px; padding: 0; }
.swatch { position: relative; width: 34px; height: 34px; cursor: pointer; }
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch span {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background:
    radial-gradient(circle, var(--c) 0 50%, transparent 51%),
    repeating-conic-gradient(var(--c) 0 30deg, rgba(255, 255, 255, .92) 30deg 45deg);
  box-shadow: 0 2px 0 rgba(16, 48, 42, .55);
  transition: transform .12s;
}
.swatch input:checked + span { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--box), 0 0 0 5px var(--ink); }
.swatch input:focus-visible + span { outline: 3px solid var(--cobalt); outline-offset: 3px; }

.form-error { min-height: 0; font-size: 14px; font-weight: 700; color: #8C1D10; }
.form-error:empty { display: none; }
.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.sit-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.join-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 18px; border-top: 2px dashed rgba(16, 48, 42, .3); margin-top: 6px; }
.join-line label { font-weight: 700; font-size: 15px; }
.code-input { display: flex; gap: 8px; }
.code-input input {
  width: 128px; height: 46px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper);
  font-size: 19px; font-weight: 800; letter-spacing: .14em; font-variation-settings: 'wdth' 80; text-transform: uppercase;
}
.code-input input::placeholder { color: rgba(16, 48, 42, .3); }

/* hero table */
.hero-table { position: relative; min-height: 460px; }
.on-landing { overflow-x: hidden; }
.hero-felt {
  position: absolute; inset: 0 min(-60px, calc((1240px - 100vw) / 2 - 40px)) 0 0;
  border-radius: 260px 0 0 260px;
  background: radial-gradient(ellipse at 40% 45%, #2A7560 0%, var(--felt) 45%, var(--felt-deep) 100%);
  box-shadow: 0 0 0 16px var(--rail), 0 0 0 18px #160c06, 0 34px 60px -18px rgba(70, 35, 0, .55), inset 0 0 90px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.hero-felt::before {
  content: ''; position: absolute; inset: 30px 0 30px 30px; border: 2px solid var(--felt-line); border-right: 0;
  border-radius: 230px 0 0 230px;
}
.hero-print {
  position: absolute; left: 90px; bottom: 44px;
  font-weight: 800; font-variation-settings: 'wdth' 75; font-size: 30px; letter-spacing: .02em;
  color: rgba(242, 226, 190, .22);
}
.hero-hand { position: absolute; left: 50%; top: 40%; --cw: clamp(70px, 9vw, 116px); }
.hero-hand .hero-card {
  position: absolute; left: 0; top: 0;
  transform-origin: 50% 210%;
  transform: translate(-50%, -50%) rotate(calc((var(--i) - 2) * 11deg));
  animation: hero-deal .7s var(--ease) backwards;
  animation-delay: calc(250ms + var(--i) * 110ms);
}
@keyframes hero-deal {
  from { transform: translate(-50%, 120%) rotate(-30deg) scale(.6); opacity: 0; }
}
.hero-hand .hero-card:hover .card-in { transform: translateY(-14px); }
.hero-card .card-in { transition: transform .25s var(--ease); }
.hero-chips { position: absolute; left: 22%; right: 8%; bottom: 25%; display: flex; justify-content: space-between; align-items: flex-end; }
.hero-stack .stack { --chip: 30px; }
.hero-stack { animation: rise .5s var(--ease) backwards; animation-delay: calc(900ms + var(--d) * 90ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* game placards */
.games, .how { max-width: 1240px; margin: 0 auto; padding: 40px 28px 72px; }
.games h2, .how h2 {
  font-size: clamp(34px, 4.2vw, 54px); font-weight: 800; font-variation-settings: 'wdth' 75, 'opsz' 72; letter-spacing: -.02em;
  margin-bottom: 30px;
}
.game-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.placard {
  --g: var(--g-holdem);
  position: relative; padding: 0 0 26px; border-radius: 22px; overflow: hidden;
  background: var(--paper); border: 2px solid var(--ink);
}
.placard.p-bj { --g: var(--g-bj); }
.placard.p-roulette { --g: var(--g-roulette); }
.placard.p-crash { --g: var(--g-crash); }
.placard-art {
  height: 170px; display: flex; align-items: center; justify-content: center; gap: 0;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--g) 75%, white 12%), var(--g) 70%);
  border-bottom: 2px solid var(--ink); --cw: 78px;
}
.placard-art .card { transform: rotate(calc((var(--i) - .5) * 14deg)) translateY(calc(var(--i) * 4px)); margin: 0 -10px; }
.placard h3 { font-size: 27px; font-weight: 800; font-variation-settings: 'wdth' 80; margin: 22px 24px 8px; }
.placard p { margin: 0 24px; font-size: 16px; color: var(--ink-soft); max-width: 38ch; }

.mini-wheel {
  width: 120px; height: 120px; border-radius: 50%;
  background:
    radial-gradient(circle, #E8A825 0 8%, #6b3f22 9% 40%, transparent 41%),
    repeating-conic-gradient(from -4.86deg, var(--card-red) 0 9.73deg, var(--card-black) 9.73deg 19.46deg);
  box-shadow: 0 0 0 8px #3b2014, 0 0 0 10px #160c06, 0 10px 20px rgba(0, 0, 0, .35);
  animation: idle-spin 30s linear infinite;
}
@keyframes idle-spin { to { transform: rotate(360deg); } }

.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.steps li { counter-increment: s; font-size: 17px; line-height: 1.5; padding-top: 8px; border-top: 2px solid var(--ink); max-width: 34ch; }
.steps li::before {
  content: counter(s); display: block; font-size: 64px; font-weight: 800; font-variation-settings: 'wdth' 75, 'opsz' 96;
  line-height: 1; margin: 8px 0 10px; color: var(--vermilion);
}
.steps b { display: block; font-size: 21px; margin-bottom: 4px; }
.how-note { margin-top: 34px; font-size: 17px; font-weight: 600; }

.l-foot { background: var(--ink); color: var(--cream); padding: 34px 28px 40px; }
.l-foot p { max-width: 1184px; margin: 0 auto; font-size: 15px; }
.l-foot p + p { margin-top: 6px; color: var(--cream-dim); }

/* ------------------------------------------------------------ gate */
.on-gate { min-height: 100vh; }
.gate { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 28px; padding: 32px 18px; }
.gate-card {
  width: min(440px, 100%); display: grid; gap: 16px; padding: 30px 28px 26px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 22px; box-shadow: 0 8px 0 var(--ink);
}
.gate-kicker { font-weight: 700; font-size: 15px; }
.gate-code {
  font-size: 64px; font-weight: 800; letter-spacing: .1em; font-variation-settings: 'wdth' 75, 'opsz' 96;
  line-height: .9; color: var(--g-holdem); margin-top: -8px;
}
.gate-foot { font-size: 14px; color: var(--ink-soft); text-align: center; }
.gate .swatch input:checked + span { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }

/* ------------------------------------------------------------ cards */
.card {
  position: relative; flex: none;
  width: var(--cw); aspect-ratio: 5 / 7;
  perspective: 600px;
  animation: deal .42s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 85ms);
}
@keyframes deal {
  from { transform: translate(var(--dx, 0), var(--dy, -20vmin)) rotate(-16deg) scale(.7); opacity: 0; }
  30% { opacity: 1; }
}
.instant .card, .instant .card * { animation: none !important; transition: none !important; }
.card-in {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .55s var(--ease);
}
.card.down .card-in { transform: rotateY(180deg); }
.card-face, .card-back {
  position: absolute; inset: 0; border-radius: calc(var(--cw) * .085);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.card-face {
  background: var(--paper);
  color: var(--card-black); fill: currentColor;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .12), 0 calc(var(--cw) * .05) calc(var(--cw) * .12) rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(0, 0, 0, .08);
  overflow: hidden;
}
.card.red .card-face { color: var(--card-red); }
.card-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 50%, var(--paper) 0 9%, var(--vermilion-deep) 9.5% 13%, transparent 13.5%),
    repeating-linear-gradient(45deg, rgba(255, 253, 247, .16) 0 1.5px, transparent 1.5px 6px),
    repeating-linear-gradient(-45deg, rgba(255, 253, 247, .16) 0 1.5px, transparent 1.5px 6px),
    var(--vermilion-deep);
  border: calc(var(--cw) * .055) solid var(--paper);
  box-shadow: 0 calc(var(--cw) * .05) calc(var(--cw) * .12) rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .12);
}
.ix {
  position: absolute; left: 6%; top: 4%; width: 22%;
  display: flex; flex-direction: column; align-items: center;
  font-size: calc(var(--cw) * .28); font-weight: 700; line-height: 1;
  font-variation-settings: 'wdth' 75, 'opsz' 24; letter-spacing: -.05em;
}
.ix svg { width: calc(var(--cw) * .17); height: calc(var(--cw) * .17); margin-top: calc(var(--cw) * .03); }
.ix-b { left: auto; top: auto; right: 6%; bottom: 4%; transform: rotate(180deg); }
.pips { position: absolute; inset: 12% 25%; }
.pips i { position: absolute; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); display: block; }
.pips i.flip { transform: translate(-50%, -50%) rotate(180deg); }
.pips svg, .ace svg { width: 100%; height: 100%; display: block; }
.ace { position: absolute; left: 50%; top: 50%; width: 44%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.court {
  position: absolute; inset: 13% 19%; border-radius: calc(var(--cw) * .05);
  border: max(1px, calc(var(--cw) * .02)) solid currentColor;
  background:
    linear-gradient(135deg, transparent 47%, color-mix(in srgb, currentColor 10%, transparent) 47% 53%, transparent 53%) 0 0 / 8px 8px,
    color-mix(in srgb, var(--mustard) 22%, var(--paper));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.court b {
  font-size: calc(var(--cw) * .44); font-weight: 800; line-height: .9;
  font-variation-settings: 'wdth' 75, 'opsz' 72;
}
.court svg { width: 34%; aspect-ratio: 1; }
/* tiny cards: keep the index, drop the busy middle */
.seat:not(.me) .card .pips, .seat:not(.me) .card .court b { }

.card.hi { transform: translateY(-10%); z-index: 2; }
.card.hi .card-face { box-shadow: 0 0 0 2px var(--mustard), 0 0 18px rgba(242, 190, 69, .6); }
.card.lo .card-face { filter: brightness(.6) saturate(.7); }
.card { transition: transform .3s var(--ease); }

/* ------------------------------------------------------------ chips */
.stack { display: inline-flex; align-items: flex-end; gap: 1px; --chip: 18px; vertical-align: middle; }
.tower { position: relative; width: var(--chip); }
.chip {
  --cc: #F3EDE2; --cs: var(--ink);
  display: block; width: var(--chip); height: var(--chip); border-radius: 50%;
  background:
    radial-gradient(circle, var(--cc) 0 48%, var(--cs) 49% 54%, var(--cc) 55% 62%, transparent 63%),
    repeating-conic-gradient(var(--cc) 0 30deg, var(--cs) 30deg 45deg);
  box-shadow: 0 1.5px 0 color-mix(in srgb, var(--cc) 55%, black), 0 2px 3px rgba(0, 0, 0, .35);
}
.tower .chip { position: relative; margin-top: calc(var(--chip) * -.82); }
.tower .chip:first-child { margin-top: 0; }
.tower { display: flex; flex-direction: column-reverse; }
.c1 { --cc: #F3EDE2; --cs: #3a5bb5; }
.c5 { --cc: var(--vermilion); --cs: var(--paper); }
.c25 { --cc: #2F7D57; --cs: var(--paper); }
.c100 { --cc: #1B1C20; --cs: #E7DCC9; }
.c500 { --cc: #7A3B78; --cs: #F6D4EF; }
.k1 { --cc: #E8A825; --cs: #4A2A0A; }
.k5 { --cc: var(--cobalt); --cs: var(--paper); }
.chip.big {
  --chip: 52px; display: grid; place-items: center;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--cc) 50%, black), 0 6px 10px rgba(0, 0, 0, .35);
}
.chip.big b {
  width: 56%; height: 56%; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 800; font-variation-settings: 'wdth' 75;
}

/* ------------------------------------------------------------ avatars */
.avatar {
  --s: 36px;
  width: var(--s); height: var(--s); border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  background:
    radial-gradient(circle, var(--c) 0 55%, rgba(255, 255, 255, .9) 56% 59%, var(--c) 60% 66%, transparent 67%),
    repeating-conic-gradient(var(--c) 0 30deg, rgba(255, 255, 255, .9) 30deg 45deg);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.avatar b { color: #fff; font-weight: 800; font-size: calc(var(--s) * .42); line-height: 1; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.avatar.xs { --s: 24px; vertical-align: middle; }
.avatar.bot b::after { content: ''; }

/* ------------------------------------------------------------ room */
.room {
  height: 100vh; height: 100dvh; width: 100%; overflow: hidden;
  display: grid; grid-template-rows: var(--header) minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255, 196, 120, .16), transparent 70%),
    radial-gradient(ellipse at 50% 120%, var(--room-2), var(--room) 60%);
}
.r-top {
  display: flex; align-items: center; gap: 16px; padding: 0 16px 0 20px; min-width: 0; overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.code-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 12px;
  border: 0; border-radius: 999px; background: var(--box); color: var(--ink);
  font-size: 13px; font-weight: 700;
}
.code-pill b { font-size: 16px; letter-spacing: .1em; font-weight: 800; }
.code-pill em { font-style: normal; font-size: 12px; background: var(--ink); color: var(--cream); padding: 4px 9px; border-radius: 999px; }
.code-pill:hover em { background: var(--vermilion); }
.r-title { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.r-title span { font-weight: 500; color: var(--cream-dim); margin-left: 10px; font-size: 14px; }
.r-tools { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }
.my-stack { display: inline-flex; align-items: center; gap: 7px; margin-right: 8px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mustard); }
.tool {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 11px;
  border: 0; border-radius: 10px; background: transparent; color: var(--cream); font-size: 14px; font-weight: 600;
}
.tool:hover { background: var(--cream-faint); }
.tool svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 0; }
.tool svg .wave { stroke-width: 1.8; stroke-linecap: round; }
.tool-leave { border: 1.5px solid rgba(245, 235, 221, .3); }
.badge {
  position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--vermilion); color: #fff; font-style: normal; font-size: 11px; font-weight: 800; line-height: 17px; text-align: center;
}

.r-main { display: grid; grid-template-columns: minmax(0, 1fr) 0; min-height: 0; transition: grid-template-columns .25s var(--ease); }
.chat-open .r-main { grid-template-columns: minmax(0, 1fr) 320px; }
.stage { position: relative; min-height: 0; min-width: 0; overflow: hidden; display: grid; place-items: center; }
.stage[data-game="lobby"] { overflow-y: auto; place-items: start center; }

/* ------------------------------------------------------------ chat */
.chat {
  min-width: 0; overflow: hidden; display: flex; flex-direction: column;
  background: rgba(14, 9, 6, .72); border-left: 1px solid rgba(255, 255, 255, .06);
}
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 8px 18px; }
.chat-head h2 { font-size: 16px; font-weight: 700; }
.chat-head .icon-btn { color: var(--cream); }
.chat-list { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 4px 18px 10px; display: flex; flex-direction: column; gap: 7px; font-size: 14px; line-height: 1.4; }
.msg b { color: color-mix(in srgb, var(--c) 70%, white); font-weight: 700; }
.msg.sys { color: var(--cream-dim); font-size: 13px; }
.reacts { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; border-top: 1px solid rgba(255, 255, 255, .06); }
.reacts button {
  border: 1px solid rgba(245, 235, 221, .22); background: transparent; color: var(--cream);
  border-radius: 999px; padding: 5px 11px; font-size: 13px; font-weight: 600;
}
.reacts button:hover { background: var(--mustard); color: var(--ink); border-color: var(--mustard); }
.chat-form { display: flex; gap: 8px; padding: 10px 14px 14px; }
.chat-form input {
  flex: 1; min-width: 0; height: 40px; border-radius: 11px; padding: 0 12px;
  border: 1px solid rgba(245, 235, 221, .2); background: rgba(255, 255, 255, .06); color: var(--cream); font-size: 15px;
}
.chat-form .btn-dark { --bg: var(--cream); --fg: var(--ink); --edge: #b9a98f; }

/* ------------------------------------------------------------ dock */
.dock {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px;
  min-height: 84px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(10, 6, 4, .95), rgba(16, 10, 6, .82));
  border-top: 1px solid rgba(255, 255, 255, .07);
  position: relative; z-index: 5;
}
.dock.my-turn { box-shadow: 0 -1px 0 var(--mustard), 0 -18px 40px -20px rgba(242, 190, 69, .45); animation: dock-in .3s var(--ease); }
@keyframes dock-in { from { transform: translateY(14px); opacity: .4; } }
.dock-hand { display: flex; flex-direction: column; min-width: 0; }
.dock-hand span { font-size: 13px; color: var(--cream-dim); }
.dock-hand b { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dock-hand small { font-size: 12px; color: var(--cream-dim); }
.dock-mid { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.dock-side { display: flex; justify-content: flex-end; }
.dock-note { color: var(--cream-dim); font-size: 15px; }
.dock-tip { color: var(--cream-dim); font-size: 13px; text-align: right; }
.dock-msg { grid-column: 1 / -1; text-align: center; color: var(--cream-dim); }
.dock .btn-dark { --bg: var(--cream); --fg: var(--ink); --edge: #A89A82; }
.dock .btn-quiet { --fg: var(--cream); --edge: rgba(245, 235, 221, .4); border-color: rgba(245, 235, 221, .35); }
.dock .btn-quiet:hover:not(:disabled) { background: var(--cream-faint); }
.dock .btn-primary { --edge: #5b170d; }
.btn-fold { --bg: transparent; --fg: var(--cream); --edge: rgba(245, 235, 221, .45); box-shadow: none; }
.btn-fold:hover:not(:disabled) { box-shadow: none; background: rgba(224, 71, 47, .18); }
.btn-fold:active:not(:disabled) { box-shadow: none; }
.btn.coached { position: relative; outline: 3px solid var(--mustard); outline-offset: 3px; }
.btn.coached::after {
  content: 'Coach'; position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 800; color: var(--ink); background: var(--mustard); padding: 2px 7px; border-radius: 6px;
}
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cream-dim); cursor: pointer; user-select: none; }
.toggle input { appearance: none; -webkit-appearance: none; width: 36px; height: 21px; border-radius: 11px; background: rgba(245, 235, 221, .2); position: relative; margin: 0; cursor: pointer; transition: background .15s; }
.toggle input::after { content: ''; position: absolute; left: 3px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--cream); transition: transform .15s; }
.toggle input:checked { background: var(--mustard); }
.toggle input:checked::after { transform: translateX(15px); background: var(--ink); }

.raise { display: flex; flex-direction: column; gap: 8px; }
.presets { display: flex; gap: 6px; }
.chip-btn {
  border: 1px solid rgba(245, 235, 221, .28); background: transparent; color: var(--cream);
  padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
}
.chip-btn:hover { background: var(--cream-faint); }
.raise-row { display: flex; gap: 12px; align-items: center; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 180px; height: 28px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: rgba(245, 235, 221, .25); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(245, 235, 221, .25); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  background: radial-gradient(circle, var(--paper) 0 34%, var(--vermilion) 35% 60%, transparent 61%), repeating-conic-gradient(var(--vermilion) 0 30deg, var(--paper) 30deg 45deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: radial-gradient(circle, var(--paper) 0 34%, var(--vermilion) 35% 60%, transparent 61%), repeating-conic-gradient(var(--vermilion) 0 30deg, var(--paper) 30deg 45deg);
}
#raise-btn { min-width: 150px; }

.tray { display: flex; gap: 8px; }
.tray-chip { border: 0; background: none; padding: 0; transition: transform .12s; border-radius: 50%; }
.tray-chip:hover:not(:disabled) { transform: translateY(-4px); }
.tray-chip:active:not(:disabled) { transform: translateY(1px); }
.tray-chip:disabled { opacity: .3; }
.tray-chip.sel { transform: translateY(-6px); }
.tray-chip.sel .chip { box-shadow: 0 0 0 3px var(--mustard), 0 6px 12px rgba(0, 0, 0, .4); }
.bets { gap: 18px; }
.bet-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------------------ tables (shared) */
.tbl-wrap { width: 100%; height: 100%; display: grid; place-items: center; padding: 64px 90px 70px; }
.tbl { position: relative; }
.felt {
  position: absolute; inset: 0; border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, .08), transparent 60%),
    radial-gradient(ellipse at 50% 50%, var(--felt) 30%, var(--felt-deep) 100%);
  box-shadow:
    0 0 0 clamp(10px, 1.6vmin, 18px) var(--rail),
    0 0 0 calc(clamp(10px, 1.6vmin, 18px) + 2px) #120904,
    0 40px 80px -20px rgba(0, 0, 0, .8),
    inset 0 0 0 1px rgba(0, 0, 0, .4),
    inset 0 0 70px rgba(0, 0, 0, .45);
}
.felt::before {
  content: ''; position: absolute; inset: -14px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(170deg, rgba(255, 220, 180, .22), transparent 30%, transparent 70%, rgba(0, 0, 0, .3));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 14px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 14px));
  opacity: .8;
}
.felt::after {
  content: ''; position: absolute; inset: 8%; border-radius: inherit; border: 2px solid var(--felt-line); pointer-events: none;
}
.felt-print {
  position: absolute; left: 50%; top: 77%; transform: translate(-50%, -50%);
  font-weight: 800; font-variation-settings: 'wdth' 75, 'opsz' 96; font-size: clamp(18px, 3vmin, 34px); letter-spacing: .04em;
  color: rgba(0, 0, 0, .16); text-shadow: 0 1px 0 rgba(255, 255, 255, .05); white-space: nowrap; pointer-events: none;
}
.center-msg {
  position: absolute; left: 50%; top: 68%; transform: translateX(-50%); width: 80%;
  text-align: center; font-size: 15px; color: var(--cream); display: grid; gap: 2px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.center-msg b { color: var(--mustard); font-variant-numeric: tabular-nums; }
.center-msg p { animation: rise .35s var(--ease); }

/* seats */
.seat {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; z-index: 2;
  --cw: clamp(30px, 4.4vmin, 50px);
}
.seat.me { --cw: clamp(52px, 8vmin, 92px); z-index: 3; }
.seat-cards { display: flex; height: calc(var(--cw) * 1.4); margin-bottom: -10px; position: relative; z-index: 1; }
.seat .card + .card { margin-left: calc(var(--cw) * -.42); }
.seat .card:nth-child(1) { rotate: -5deg; }
.seat .card:nth-child(2) { rotate: 5deg; translate: 0 2px; }
.seat.me .card + .card { margin-left: calc(var(--cw) * -.2); }
.seat.me .seat-cards { margin-bottom: -4px; }
.seat-cards { transition: transform .75s var(--ease), opacity .6s ease .2s, filter .5s; }
/* Other players' folded cards get tossed toward the middle; yours just dim. */
.seat.folded:not(.me) .seat-cards {
  opacity: 0;
  transform: translate(calc(var(--mx) * 1cqw), calc(var(--my) * 1cqw / var(--ar))) rotate(28deg) scale(.7);
}
.seat.me.folded .seat-cards { opacity: .35; filter: grayscale(.6); transform: translateY(8px) scale(.94); }
.seat.out .seat-cards { visibility: hidden; }
.plate {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 9px; padding: 4px 16px 4px 4px; min-width: 120px;
  border-radius: 999px; background: rgba(18, 11, 7, .9); border: 1.5px solid rgba(245, 235, 221, .12);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
  transition: border-color .2s, background .2s;
}
.plate-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pname { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11ch; }
.pchips { font-size: 13px; color: var(--mustard); font-variant-numeric: tabular-nums; font-weight: 600; }
.av-wrap { position: relative; display: inline-grid; }
.ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); pointer-events: none; }
.ring circle {
  fill: none; stroke: var(--mustard); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0;
  animation-name: ring; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes ring { 0% { stroke-dashoffset: 0; } 70% { stroke: var(--mustard); } 100% { stroke-dashoffset: 100; stroke: var(--vermilion); } }
.seat.acting .plate, .spot.acting .plate { border-color: var(--mustard); background: rgba(40, 26, 10, .95); box-shadow: 0 0 0 3px rgba(242, 190, 69, .25), 0 8px 22px rgba(0, 0, 0, .5); }
.seat.won .plate { background: var(--mustard); color: var(--ink); border-color: var(--mustard); }
.seat.won .pchips { color: var(--ink); }
.seat.away .plate, .spot.away .plate { opacity: .55; }
.seat.away .pname::after, .spot.away .pname::after { content: ' (away)'; font-weight: 500; }
.tag {
  position: absolute; top: 100%; margin-top: 5px; z-index: 3;
  font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(245, 235, 221, .92); color: var(--ink);
  animation: tag-in .25s var(--ease);
}
.seat.top .tag { top: auto; bottom: 100%; margin: 0 0 5px; }
.tag-hand { background: var(--ink); color: var(--mustard); box-shadow: 0 0 0 1.5px var(--mustard); }
.tag-win { background: var(--mustard); color: var(--ink); }
.tag-allin { background: var(--vermilion); color: #fff; }
.tag-ready { background: var(--mustard); }
@keyframes tag-in { from { opacity: 0; transform: translateY(-4px) scale(.9); } }

.bet {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 1;
  display: flex; align-items: center; gap: 5px;
}
/* Chips slide out from the player's seat to where the bet sits. */
@keyframes bet-in {
  from { transform: translate(calc(-50% + var(--bx, 0) * 1cqw), calc(-50% + var(--by, 0) * 1cqw / var(--ar))) scale(.85); opacity: 0; }
  25% { opacity: 1; }
}
.bet b { font-size: 12.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, .55); font-variant-numeric: tabular-nums; }
.dealer-btn {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 1;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); color: var(--ink); font-weight: 800; font-size: 13px;
  box-shadow: 0 2px 0 #bdb3a3, 0 4px 8px rgba(0, 0, 0, .45);
  transition: left 1s var(--ease), top 1s var(--ease);
}

/* hold'em */
.tbl.holdem { container-type: inline-size; --ar: 2.1; width: min(100%, calc((100dvh - var(--header) - 84px - 150px) * 2.1)); aspect-ratio: 2.1 / 1; }
.board {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  --cw: clamp(40px, 6.4vmin, 74px); --gap: calc(var(--cw) * .14);
  display: flex; gap: var(--gap);
}
.slot { width: var(--cw); aspect-ratio: 5 / 7; border-radius: calc(var(--cw) * .085); border: 2px dashed rgba(242, 226, 190, .14); }
.slot .card { margin: -2px; }
.pot { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; }
.pot span { font-size: 14px; padding: 3px 11px; border-radius: 999px; background: rgba(0, 0, 0, .4); }
.pot b { color: var(--mustard); font-variant-numeric: tabular-nums; }

/* ---- hold'em motion ---- */
/* Hole cards leave the dealer one at a time and spin onto each seat. */
.tbl.holdem .seat .card {
  animation: deal-seat .66s cubic-bezier(.2, .75, .25, 1) backwards;
  animation-delay: var(--dd, 0ms);
}
/* Same arc and tilt as the blackjack shoe deal: lift off, travel, set down. */
@keyframes deal-seat {
  from { transform: translate(calc(var(--ox) * 1cqw), calc(var(--oy) * 1cqw / var(--ar))) rotate(-22deg) scale(.8); opacity: 0; animation-timing-function: cubic-bezier(.3, .1, .4, 1); }
  38% { transform: translate(calc(var(--ox) * .36cqw), calc(var(--oy) * .36cqw / var(--ar) - 16px)) rotate(-8deg) scale(.96); opacity: 1; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  to { transform: none; opacity: 1; }
}
/* Your cards land face down, then you peek. */
.tbl.holdem .seat.me .card-in {
  animation: turnover .55s var(--ease) backwards;
  animation-delay: calc(var(--dd, 0ms) + 1000ms);
}
@keyframes turnover { from { transform: rotateY(180deg); } }
/* Showdown: hands turn over one seat at a time. */
.tbl.holdem .seat:not(.me) .card-in { transition: transform .6s var(--ease) var(--fd, 0ms); }
.tbl.holdem .seat .tag-hand { animation: tag-in .35s var(--ease) backwards; animation-delay: calc(var(--fd, 0ms) + 650ms); }
.tbl.holdem .card.lo .card-face { transition: filter .6s ease 1.4s; }

/* The flop lands as a face-down stack, spreads, then turns over card by card. */
.slot .card { animation: none; }
.slot .card.flop { animation: flop-spread 1.1s var(--ease) backwards; }
@keyframes flop-spread {
  0% { transform: translate(calc(var(--i) * (var(--cw) + var(--gap)) * -1), -28px) rotate(-8deg); opacity: 0; }
  28% { transform: translate(calc(var(--i) * (var(--cw) + var(--gap)) * -1), 0); opacity: 1; }
  45% { transform: translate(calc(var(--i) * (var(--cw) + var(--gap)) * -1), 0); }
  100% { transform: none; }
}
.slot .card.flop .card-in { animation: turnover .55s var(--ease) backwards; animation-delay: calc(1150ms + var(--i) * 260ms); }
.slot .card.late { animation: late-in 1.5s cubic-bezier(.2, .75, .25, 1) backwards; }
/* Lands face down, holds a beat, then rises as it turns over. */
@keyframes late-in {
  from { transform: translateY(-46px) rotate(-10deg) scale(.88); opacity: 0; }
  26% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  46% { transform: translateY(0) rotate(0deg) scale(1); }
  62% { transform: translateY(-14px) rotate(0deg) scale(1.08); }
  to { transform: none; }
}
.slot .card.late .card-in { animation: turnover .7s cubic-bezier(.3, .7, .2, 1) backwards; animation-delay: .8s; }

/* Winner's plate glows as the pot arrives. */
.tbl.holdem .seat.won .plate { animation: won-glow 1.6s ease-out var(--wd, 1.2s) backwards; }
.tbl.holdem .seat .tag-win { animation: tag-in .4s var(--ease) backwards; animation-delay: var(--wd, 0ms); }
.tbl.holdem .center-msg p { animation: rise .5s var(--ease) backwards; animation-delay: calc(var(--wd, 0ms) - 500ms); }
@keyframes won-glow {
  0% { background: rgba(18, 11, 7, .9); color: var(--cream); box-shadow: 0 0 0 0 rgba(242, 190, 69, .8); }
  40% { box-shadow: 0 0 0 10px rgba(242, 190, 69, 0); }
}
.seat.acting .plate { animation: acting 1.8s ease-in-out infinite; }
@keyframes acting { 50% { box-shadow: 0 0 0 6px rgba(242, 190, 69, .12), 0 8px 22px rgba(0, 0, 0, .5); } }

/* blackjack */
.bj-wrap { padding-top: 24px; }
.tbl.blackjack { width: min(100%, calc((100dvh - var(--header) - 84px - 120px) * 1.9)); aspect-ratio: 1.9 / 1; }
.bj-felt { border-radius: 30px 30px 50% 50% / 30px 30px 100% 100%; }
.bj-felt::after { inset: 10% 6% 12%; border-radius: 20px 20px 50% 50% / 20px 20px 100% 100%; border-top-color: transparent; }
.felt-arc { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.felt-arc text { text-anchor: middle; fill: rgba(242, 226, 190, .34); font-family: var(--font); font-weight: 800; font-size: 34px; letter-spacing: .14em; text-transform: uppercase; font-variation-settings: 'wdth' 75; }
.felt-arc text.small { font-size: 17px; letter-spacing: .1em; fill: rgba(242, 226, 190, .26); font-weight: 600; }
.dealer { position: absolute; left: 50%; top: 5%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; --cw: clamp(42px, 6.6vmin, 76px); }
.dealer-cards { display: flex; min-height: calc(var(--cw) * 1.4); min-width: calc(var(--cw) * 1.4); }
.dealer-cards .card + .card { margin-left: calc(var(--cw) * -.35); }
.shoe {
  position: absolute; right: calc(100% + 26px); top: 8px; width: 44px; height: 58px; border-radius: 8px 8px 6px 6px;
  background: linear-gradient(#2b1a10, #160d07); box-shadow: 0 4px 10px rgba(0, 0, 0, .5), inset 0 0 0 1.5px rgba(255, 255, 255, .08);
  overflow: hidden;
}
.shoe span { position: absolute; left: 6px; right: 6px; bottom: 6px; height: calc(var(--fill) * .8); background: repeating-linear-gradient(var(--vermilion-deep) 0 2px, var(--paper) 2px 3px); border-radius: 2px; transition: height .4s; }
.total {
  font-size: 13px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--ink); color: var(--cream);
  box-shadow: 0 0 0 1.5px rgba(245, 235, 221, .25); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.dealer-total { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
.blackjack .center-msg { top: 31%; }
.spot {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 2;
  --cw: clamp(34px, 6.4vmin, 72px);
}
.spot.me { z-index: 3; }
.hands { display: flex; gap: 10px; align-items: flex-end; position: absolute; bottom: calc(100% - 2px); left: 50%; transform: translateX(-50%); }
.hands.h2, .hands.h3, .hands.h4 { --cw: clamp(28px, 4.6vmin, 54px); }
.hand { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border-radius: 10px; transition: background .2s; }
.hand.on { background: rgba(242, 190, 69, .18); box-shadow: 0 0 0 2px var(--mustard); }
.hand-cards { display: flex; }
.hand-cards .card { animation-delay: 0s; }
.hand-cards .card + .card { margin-left: calc(var(--cw) * -.6); translate: 0 calc(var(--k) * -6px); }
.hand.bust .hand-cards { filter: grayscale(.5) brightness(.75); }
.hand .total { position: absolute; top: -10px; right: -12px; z-index: 3; }
.hand-bet { display: none; }
.res {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%) rotate(-6deg); z-index: 4;
  font-size: 14px; font-weight: 800; padding: 3px 10px; border-radius: 8px; white-space: nowrap; font-variation-settings: 'wdth' 80;
  animation: stamp .3s var(--ease); box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
}
@keyframes stamp { from { transform: translate(-50%, -50%) rotate(-6deg) scale(1.8); opacity: 0; } }
.res-win { background: var(--mustard); color: var(--ink); }
.res-blackjack { background: var(--vermilion); color: #fff; }
.res-push { background: var(--cream); color: var(--ink); }
.res-lose { background: rgba(20, 12, 8, .9); color: var(--cream-dim); }
.res-bust { background: #5b170d; color: #ffd9cf; }
.circle {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; position: relative;
  border: 2px solid rgba(242, 226, 190, .35); background: rgba(0, 0, 0, .08);
}
.spot.me .circle { border-color: var(--mustard); border-style: dashed; }
.circle .stack { --chip: 22px; }
.circle b { position: absolute; bottom: -8px; font-size: 11.5px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: rgba(0, 0, 0, .6); font-variant-numeric: tabular-nums; }
.spot .plate { min-width: 0; padding-right: 12px; }
.spot .pname { max-width: 9ch; }
.spot .tag { top: auto; bottom: -24px; }

/* roulette */
.rl { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 32px; align-items: center; padding: 24px 32px; max-width: 1400px; }
.rl-wheel { display: grid; justify-items: center; gap: 18px; }
.wheel-box { position: relative; width: min(100%, 44vh, 420px); aspect-ratio: 1; }
.wheel-box.away { visibility: hidden; }
/* A baked, static shadow under the wheel: no filter, so nothing repaints while it spins. */
.wheel-box::before, .spin-cam::before {
  content: ''; position: absolute; left: -4%; right: -4%; top: 8%; bottom: -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, .22) 62%, transparent 100%);
}
.wheel { position: relative; width: 100%; height: 100%; container-type: inline-size; }
.wl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
/* The spinning part is a plain div around the SVG: rotating an <svg> element makes the browser re-lay-out its
   37 labels every frame, rotating a div is a compositor-only change. */
.wl-rotor { transform-origin: 50% 50%; will-change: transform; }
.wl-rotor > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pk-red { fill: #c32b24; }
.pk-black { fill: #17181c; }
.pk-green { fill: #1b7a4e; }
.pk { stroke: #d6b062; stroke-width: .55; }
.pk-n { fill: #fff8e8; font-family: var(--font); font-size: 7.1px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; font-variation-settings: 'wdth' 75; text-rendering: geometricPrecision; pointer-events: none; }
.ring-shade { pointer-events: none; }
.stud { fill: #e9c875; stroke: #7a5418; stroke-width: .5; }
.cone-line { stroke: rgba(255, 224, 150, .2); stroke-width: .6; }
.arm { stroke: #e7bb61; stroke-width: 2.6; stroke-linecap: round; }
.turret { fill: #c9922f; stroke: #6f4a17; stroke-width: 1; }
.pocket-hit { fill: rgba(255, 226, 140, .28); stroke: #ffe08a; stroke-width: 1.5; stroke-linejoin: round; animation: pocket-pulse 1s ease-in-out infinite; }
@keyframes pocket-pulse { 50% { fill: rgba(255, 226, 140, .5); stroke-width: 2.2; } }
/* The ball is HTML, not SVG: moving an SVG child forces a layout pass every frame, a transform on a plain
   element does not. One wheel unit is .5cqw, so these sizes and offsets match the SVG's coordinates. */
.wl-ball { pointer-events: none; }
.wl-ball i { position: absolute; left: 50%; top: 50%; border-radius: 50%; will-change: transform; }
.trail { width: 2.7cqw; height: 2.7cqw; margin: -1.35cqw 0 0 -1.35cqw; background: #fbfaf6; }
.ball-shadow { width: 2.9cqw; height: 2.9cqw; margin: -1.45cqw 0 0 -1.45cqw; background: rgba(0, 0, 0, .45); }
.ball { width: 2.9cqw; height: 2.9cqw; margin: -1.45cqw 0 0 -1.45cqw; background: radial-gradient(circle at 36% 30%, #fff, #ece8dc 58%, #bcb7a6); box-shadow: 0 0 0 .08cqw rgba(0, 0, 0, .3); }
.history { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: 420px; }
.history li { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.history li:first-child { width: 36px; height: 36px; font-size: 15px; }
.history .fresh { animation: tag-in .4s var(--ease); box-shadow: 0 0 0 2px var(--mustard); }
.h-red { background: var(--card-red); }
.h-black { background: var(--card-black); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.h-green { background: #1E7A50; }
.rl-board { display: grid; gap: 14px; min-width: 0; }
.rl-msg { font-size: 18px; min-height: 40px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rl-msg b { color: var(--mustard); }
.big-n { display: inline-grid; place-items: center; min-width: 44px; height: 40px; padding: 0 8px; border-radius: 10px; font-size: 22px; font-weight: 800; color: #fff; animation: stamp .4s var(--ease); }
.n-red { background: var(--card-red); }
.n-black { background: var(--card-black); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.n-green { background: #1E7A50; }
.rl-layout {
  display: grid; gap: 3px; padding: 10px; border-radius: 16px;
  grid-template-columns: 1.1fr repeat(12, minmax(0, 1fr)) 1.3fr;
  grid-template-rows: repeat(3, minmax(44px, 7vh)) 46px 46px;
  background: radial-gradient(ellipse at 50% 40%, var(--felt), var(--felt-deep));
  box-shadow: 0 0 0 10px var(--rail), 0 0 0 12px #120904, 0 30px 50px -16px rgba(0, 0, 0, .7);
}
.rc {
  position: relative; grid-column: var(--c) / span var(--cs); grid-row: var(--r) / span var(--rs);
  border: 1.5px solid rgba(242, 226, 190, .35); border-radius: 6px; background: transparent; color: var(--cream);
  font-weight: 700; font-size: 15px; display: grid; place-items: center; padding: 0; min-width: 0;
  transition: transform .08s, box-shadow .15s;
}
.rc:hover { box-shadow: inset 0 0 0 2px var(--mustard); }
.rc:active { transform: scale(.97); }
.rc.num.red { background: var(--card-red); }
.rc.num.black { background: var(--card-black); }
.rc.num.green { background: #1E7A50; }
.rc.num { border-color: rgba(0, 0, 0, .25); font-size: 16px; font-variant-numeric: tabular-nums; }
.rc.out { font-size: 14px; }
.rc.o-red .rc-l { width: 26px; height: 26px; font-size: 0; transform: rotate(45deg); background: var(--card-red); border-radius: 3px; }
.rc.o-black .rc-l { width: 26px; height: 26px; font-size: 0; transform: rotate(45deg); background: var(--card-black); border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.rc.hit { box-shadow: 0 0 0 3px var(--mustard), 0 0 24px rgba(242, 190, 69, .7); z-index: 2; animation: pulse 1s ease-in-out 3; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px var(--mustard), 0 0 34px rgba(242, 190, 69, .9); } }
.mine {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  min-width: 30px; height: 30px; padding: 0 4px; border-radius: 15px; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; font-variation-settings: 'wdth' 75;
  background: radial-gradient(circle, var(--paper) 0 52%, var(--vermilion) 53%);
  box-shadow: 0 2px 0 #5b170d, 0 3px 6px rgba(0, 0, 0, .5);
  animation: drop .22s var(--ease);
}
@keyframes drop { from { transform: translate(-50%, -90%) scale(1.3); opacity: 0; } }
.marks { position: absolute; right: 2px; top: 2px; display: flex; gap: 1px; }
.marks i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); }
.rl-totals { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--cream-dim); }
.rl-totals li { display: flex; align-items: center; gap: 6px; }
.rl-totals i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.rl-totals b { color: var(--cream); font-variant-numeric: tabular-nums; }
.rl-totals em { font-style: normal; font-size: 12px; color: var(--mustard); }

/* ------------------------------------------------------------ baccarat */
.bcrt { width: 100%; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 18px; padding: 20px 28px; max-width: 980px; place-content: center; }
.bcrt-felt {
  position: relative; border-radius: 28px; padding: 28px 24px 22px;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .07), transparent 60%), radial-gradient(ellipse at 50% 50%, var(--g-roulette) 10%, #4a151d 100%);
  box-shadow: 0 0 0 10px var(--rail), 0 0 0 12px #120904, 0 30px 60px -16px rgba(0, 0, 0, .7);
}
.bb-msg { text-align: center; font-size: 16px; min-height: 24px; margin-bottom: 8px; }
.bb-msg b { color: var(--mustard); }
.bb-table { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; --cw: clamp(44px, 6.6vmin, 70px); }
.bb-side { display: grid; justify-items: center; gap: 8px; padding: 10px; border-radius: 16px; transition: background .3s, box-shadow .3s; }
.bb-side.won { background: rgba(242, 190, 69, .1); box-shadow: 0 0 0 2px var(--mustard), 0 0 30px rgba(242, 190, 69, .25); }
.bb-label { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--cream-dim); }
.bb-side.won .bb-label { color: var(--mustard); }
.bb-cards { display: flex; min-height: calc(var(--cw) * 1.4); align-items: center; }
.bb-cards .card + .card { margin-left: calc(var(--cw) * -.3); }
.bb-total { font-size: 15px; font-weight: 800; padding: 2px 11px; border-radius: 999px; background: var(--ink); color: var(--cream); box-shadow: 0 0 0 1.5px rgba(245, 235, 221, .25); font-variant-numeric: tabular-nums; min-height: 1.6em; }
.bb-vs { font-size: 13px; font-weight: 800; color: rgba(245, 235, 221, .3); letter-spacing: .08em; }
.bb-marks { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; min-height: 20px; }
.bb-mark { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--c); display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .3); }
.bb-mark.mine { box-shadow: 0 0 0 2px var(--mustard); }
.bc-history { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); }
.bh-player { background: var(--cobalt); }
.bh-banker { background: var(--card-red); }
.bh-tie { background: #1E7A50; }
.bc-tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bc { position: relative; --bg: var(--ink); padding: 12px 10px 10px; border-radius: 14px; border: 1.5px solid rgba(245, 235, 221, .14); background: var(--bg); color: var(--cream); text-align: center; transition: box-shadow .15s, transform .1s; }
.bc.player { --bg: #1c3f6b; }
.bc.banker { --bg: #5e1c1c; }
.bc.tie { --bg: #1b5a3c; }
.bc:hover { box-shadow: inset 0 0 0 2px rgba(245, 235, 221, .3); }
.bc:active { transform: scale(.98); }
.bc-l { display: block; font-weight: 800; font-size: 16px; font-variation-settings: 'wdth' 80; }
.bc-pay { display: block; font-size: 11.5px; color: var(--cream-dim); margin-top: 2px; }
.bc.hit { box-shadow: 0 0 0 3px var(--mustard), 0 0 24px rgba(242, 190, 69, .6); animation: pulse 1s ease-in-out 3; }
.bc .marks { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; }
.bc .mine {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); min-width: 30px; height: 24px; padding: 0 6px; border-radius: 12px;
  background: radial-gradient(circle, var(--paper) 0 52%, var(--vermilion) 53%); color: var(--ink); font-size: 11px; font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 2px 0 #5b170d; font-variant-numeric: tabular-nums;
}
.bc-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: -4px; }
.bc.pair { padding: 8px 10px; }
.bc.pair .bc-l { font-size: 13px; }
.bc.pair .bc-pay { margin-top: 1px; }

/* ------------------------------------------------------------ craps + dice */
.mini-dice { display: flex; gap: 10px; --d: 44px; }
.mini-dice i {
  width: var(--d); height: var(--d); border-radius: 8px; background: var(--paper);
  box-shadow: 0 3px 0 #c7bca6, 0 6px 12px rgba(0, 0, 0, .35); position: relative;
  background-image: radial-gradient(circle, var(--ink) 0 17%, transparent 18%);
  background-size: 33% 33%;
}
.mini-dice i:first-child { background-position: 50% 50%; transform: rotate(-8deg); }
.mini-dice i:last-child { background-position: 17% 17%, 83% 17%, 17% 83%, 83% 83%, 50% 50%; background-image: radial-gradient(circle, var(--ink) 0 17%, transparent 18%); transform: rotate(6deg) translateY(4px); box-shadow: 0 3px 0 #c7bca6, 0 6px 12px rgba(0, 0, 0, .35), 17px -17px 0 -14px var(--ink), -17px -17px 0 -14px var(--ink), 17px 17px 0 -14px var(--ink), -17px 17px 0 -14px var(--ink); }

/* a real 3D cube with pip faces */
.die { --d: clamp(46px, 8vmin, 72px); width: var(--d); height: var(--d); perspective: 400px; }
.die-in { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: var(--rot, rotateX(0deg) rotateY(0deg)); }
.f {
  position: absolute; inset: 0; border-radius: calc(var(--d) * .16);
  background: linear-gradient(155deg, #fffdf7, #e7e0cf);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), inset 0 -3px 6px rgba(0, 0, 0, .08);
}
.f i { position: absolute; width: 15%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 35% 30%, #3a2a1c, var(--ink)); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .4); }
.f1 { transform: translateZ(calc(var(--d) / 2)); }
.f6 { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.f2 { transform: rotateY(90deg) translateZ(calc(var(--d) / 2)); }
.f5 { transform: rotateY(-90deg) translateZ(calc(var(--d) / 2)); }
.f3 { transform: rotateX(90deg) translateZ(calc(var(--d) / 2)); }
.f4 { transform: rotateX(-90deg) translateZ(calc(var(--d) / 2)); }

.craps { width: 100%; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); max-width: 1100px; padding: 16px 24px; gap: 14px; }
.cr-felt {
  position: relative; border-radius: 22px; padding: 22px 20px 16px; display: grid; justify-items: center; gap: 10px;
  background: radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, .06), transparent 55%), radial-gradient(ellipse at 50% 50%, var(--felt), var(--felt-deep));
  box-shadow: 0 0 0 9px var(--rail), 0 0 0 11px #120904, 0 24px 50px -14px rgba(0, 0, 0, .7);
}
.cr-shooter { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--cream-dim); position: absolute; left: 20px; top: 16px; }
.cr-dice { display: flex; align-items: flex-end; gap: 18px; min-height: calc(clamp(46px, 8vmin, 72px) * 1.5); perspective: 600px; }
.die.landed { animation: none; }
.cr-sum {
  min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; background: var(--ink); color: var(--mustard);
  display: grid; place-items: center; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1.5px rgba(245, 235, 221, .22); margin-bottom: 8px;
}
.cr-msg { font-size: 15px; text-align: center; min-height: 22px; }
.cr-msg b { color: var(--mustard); }
.cr-history { position: static; }
.ch-n { background: var(--ink); }
.ch-seven { background: var(--vermilion-deep); }

.cr-layout { display: grid; gap: 8px; }
.cr-lines { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.cr-line {
  position: relative; padding: 10px 14px; border-radius: 12px; text-align: left;
  border: 1.5px solid rgba(245, 235, 221, .16); background: rgba(255, 255, 255, .03); color: var(--cream);
  transition: box-shadow .15s, opacity .2s;
}
.cr-line:hover:not(:disabled) { box-shadow: inset 0 0 0 2px rgba(245, 235, 221, .3); }
.cr-line.locked { opacity: .45; }
.cr-line .cr-l { font-weight: 800; font-size: 15px; display: block; }
.cr-line .cr-odds { font-size: 11.5px; color: var(--cream-dim); }
.cr-line.win { box-shadow: 0 0 0 3px var(--mustard), 0 0 20px rgba(242, 190, 69, .5); }
.cr-line.lose { box-shadow: inset 0 0 0 2px rgba(224, 71, 47, .5); }
.cr-line.push { box-shadow: inset 0 0 0 2px rgba(245, 235, 221, .4); }
.cr-line .marks, .cr-line .mine { position: absolute; }
.cr-line .marks { top: 6px; right: 8px; display: flex; gap: 2px; }
.cr-line .mine { right: 10px; bottom: 7px; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 11px; background: radial-gradient(circle, var(--paper) 0 52%, var(--vermilion) 53%); color: var(--ink); font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 0 #5b170d; }

.cr-nums { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.cr-num { display: grid; gap: 4px; position: relative; }
.cr-place {
  position: relative; padding: 8px 6px 20px; border-radius: 11px; text-align: center;
  border: 1.5px solid rgba(245, 235, 221, .16); background: rgba(255, 255, 255, .03); color: var(--cream);
}
.cr-place:hover { box-shadow: inset 0 0 0 2px rgba(245, 235, 221, .3); }
.cr-n { display: block; font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums; }
.cr-odds { display: block; font-size: 10.5px; color: var(--cream-dim); margin-top: 1px; }
.cr-place.hit { box-shadow: 0 0 0 3px var(--mustard), 0 0 18px rgba(242, 190, 69, .55); }
.cr-place.lose { box-shadow: inset 0 0 0 2px rgba(224, 71, 47, .45); }
.cr-num .marks { position: absolute; top: 5px; right: 5px; display: flex; gap: 2px; }
.cr-num .mine {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); min-width: 26px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: radial-gradient(circle, var(--paper) 0 52%, var(--vermilion) 53%); color: var(--ink); font-size: 10px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 0 #5b170d;
}
.puck {
  position: absolute; left: 50%; top: -11px; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%;
  background: var(--mustard); color: var(--ink); font-size: 9px; font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 2px 0 #b5861f, 0 0 0 2px var(--ink); z-index: 2; animation: tag-in .3s var(--ease);
}
.cr-hard {
  padding: 6px 4px; border-radius: 9px; text-align: center; border: 1.5px solid rgba(245, 235, 221, .14);
  background: rgba(0, 0, 0, .12); color: var(--cream); --d: 18px; position: relative;
}
.cr-hard:hover { box-shadow: inset 0 0 0 2px rgba(245, 235, 221, .3); }
.cr-hard .die { pointer-events: none; }
.cr-hard-dice { display: flex; justify-content: center; gap: 3px; margin-bottom: 2px; }
.cr-hard .cr-odds { font-size: 9.5px; }
.cr-hard.hit { box-shadow: 0 0 0 2px var(--mustard), 0 0 14px rgba(242, 190, 69, .5); }
.cr-hard.lose { box-shadow: inset 0 0 0 2px rgba(224, 71, 47, .4); }
.cr-hard .marks, .cr-hard .mine { position: absolute; }
.cr-hard .marks { top: 3px; right: 3px; display: flex; gap: 1px; }
.cr-hard .mine { right: 3px; bottom: 3px; font-size: 9px; min-width: 20px; height: 16px; padding: 0 4px; border-radius: 8px; background: radial-gradient(circle, var(--paper) 0 52%, var(--vermilion) 53%); color: var(--ink); font-weight: 800; display: grid; place-items: center; }
.cr-hard-gap { visibility: hidden; }

.cr-field {
  position: relative; padding: 10px 14px; border-radius: 12px; text-align: center;
  border: 1.5px solid rgba(245, 235, 221, .16); background: rgba(255, 255, 255, .03); color: var(--cream);
}
.cr-field:hover { box-shadow: inset 0 0 0 2px rgba(245, 235, 221, .3); }
.cr-field .cr-l { font-weight: 800; font-size: 14px; }
.cr-field-nums { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.cr-field-nums i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--cream-dim); font-variant-numeric: tabular-nums; }
.cr-field-nums i.big { color: var(--mustard); }
.cr-field.hit { box-shadow: 0 0 0 3px var(--mustard), 0 0 20px rgba(242, 190, 69, .5); }
.cr-field .marks { position: absolute; top: 6px; right: 8px; display: flex; gap: 2px; }
.cr-field .mine {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); min-width: 30px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: radial-gradient(circle, var(--paper) 0 52%, var(--vermilion) 53%); color: var(--ink); font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 0 #5b170d;
}

/* ------------------------------------------------------------ lobby */
.lobby {
  width: 100%; max-width: 1180px; padding: 40px 32px 60px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: 'invite games' 'seats games'; gap: 36px 56px; align-content: start;
}
.lobby-invite { grid-area: invite; }
.lobby-seats { grid-area: seats; }
.lobby-games { grid-area: games; }
.lobby-kicker { color: var(--cream-dim); font-weight: 600; }
.lobby-code {
  font-size: clamp(64px, 9vw, 118px); font-weight: 800; letter-spacing: .08em; line-height: .9; margin: 4px 0 16px -4px;
  font-variation-settings: 'wdth' 75, 'opsz' 96; color: var(--box);
}
.lobby-invite > p { color: var(--cream-dim); max-width: 40ch; }
.invite { display: flex; gap: 8px; margin-top: 14px; }
.invite input {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 14px; border: 1.5px solid rgba(245, 235, 221, .25);
  background: rgba(255, 255, 255, .05); color: var(--cream); font-size: 14px;
}
.lobby .btn-dark { --bg: var(--cream); --fg: var(--ink); --edge: #A89A82; }
.lobby .btn-quiet { --fg: var(--cream); border-color: rgba(245, 235, 221, .35); }
.lobby .btn-quiet:hover:not(:disabled) { background: var(--cream-faint); }
.lobby-warn { color: #ffc9b8 !important; font-weight: 600; }
.lobby-wait { margin-top: 10px; font-size: 14px; color: var(--mustard) !important; }
.lobby h2 { font-size: 22px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: baseline; gap: 10px; }
.count { font-size: 14px; font-weight: 500; color: var(--cream-dim); }
.lp-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 2px; }
.lp { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.lp.away { opacity: .55; }
.lp-name { flex: 1; min-width: 0; font-weight: 700; }
.lp-name em { font-style: normal; font-weight: 500; font-size: 13px; color: var(--cream-dim); margin-left: 4px; }
.lp-chips { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--mustard); }
.lp-chips small { font-size: 12px; font-weight: 500; color: var(--cream-dim); }
.up { color: #8fd18a !important; }
.down { color: #ff9c87 !important; }
.lp .icon-btn { color: var(--cream); }
.pick-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.pick {
  --g: var(--g-holdem);
  display: grid; grid-template-rows: 116px auto auto; text-align: left; padding: 0; overflow: hidden;
  border-radius: 18px; border: 2px solid rgba(245, 235, 221, .14); background: rgba(255, 255, 255, .03); color: var(--cream);
  transition: border-color .15s, transform .15s;
}
.pick.pk-blackjack { --g: var(--g-bj); }
.pick.pk-roulette { --g: var(--g-roulette); }
.pick:hover:not(:disabled) { transform: translateY(-2px); }
.pick.on { border-color: var(--mustard); box-shadow: 0 0 0 1px var(--mustard); }
.pick:disabled { cursor: default; opacity: .9; }
.pick-art { display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--g) 80%, white 10%), var(--g) 70%); --cw: 50px; }
.pick-art .card { transform: rotate(calc((var(--i) - .5) * 14deg)); margin: 0 -6px; animation: none; }
.pick-art .mini-wheel { width: 76px; height: 76px; box-shadow: 0 0 0 5px #3b2014, 0 6px 14px rgba(0, 0, 0, .4); }
.pick-name { font-weight: 800; font-size: 17px; padding: 12px 14px 0; }
.pick-blurb { font-size: 13px; color: var(--cream-dim); padding: 2px 14px 14px; }
.settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.lobby .field > span { font-size: 13px; color: var(--cream-dim); font-weight: 600; }
.lobby .field select { background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(245, 235, 221, .25); color: var(--cream); }
.lobby .field select option { color: var(--ink); }
.lobby-hint { margin-top: 12px; color: var(--cream-dim); font-size: 14px; }

/* ------------------------------------------------------------ overlays */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.flyer { position: fixed; z-index: 41; }
.bubble {
  position: fixed; transform: translate(-50%, calc(-100% - 8px)); max-width: 220px;
  padding: 7px 12px; border-radius: 14px; background: var(--paper); color: var(--ink);
  font-size: 14px; font-weight: 600; line-height: 1.3; box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
  animation: bubble-in .25s var(--ease); transition: opacity .4s, transform .4s;
}
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.bubble.react { background: var(--mustard); font-weight: 800; font-size: 17px; font-variation-settings: 'wdth' 85; }
.bubble.out { opacity: 0; transform: translate(-50%, calc(-100% - 22px)); }
@keyframes bubble-in { from { opacity: 0; transform: translate(-50%, calc(-100% + 6px)) scale(.85); } }

.banner {
  position: fixed; top: calc(var(--header) + 10px); left: 50%; transform: translate(-50%, -20px); z-index: 30;
  padding: 10px 16px; border-radius: 12px; background: var(--vermilion); color: #fff; font-weight: 600; font-size: 14px;
  opacity: 0; pointer-events: none; transition: all .25s var(--ease); display: flex; gap: 12px; align-items: center; max-width: calc(100vw - 32px);
}
.banner.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.banner.closed { background: var(--ink); top: 40%; padding: 18px 22px; font-size: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }

#toast {
  position: fixed; left: 50%; bottom: 110px; transform: translate(-50%, 20px); z-index: 60;
  padding: 11px 18px; border-radius: 12px; background: var(--ink); color: var(--cream); font-weight: 600; font-size: 15px;
  opacity: 0; pointer-events: none; transition: all .25s var(--ease); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); max-width: calc(100vw - 32px);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

.pop-scrim { position: fixed; inset: 0; z-index: 49; background: rgba(0, 0, 0, .3); }
.pop {
  position: fixed; z-index: 50; right: 16px; top: calc(var(--header) + 6px); width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - var(--header) - 30px); overflow-y: auto;
  padding: 22px 22px 18px; border-radius: 18px; background: var(--paper); color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55); animation: pop-in .2s var(--ease);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-8px); } }
.pop h2 { font-size: 24px; font-weight: 800; font-variation-settings: 'wdth' 80; margin-bottom: 14px; }
.pop h3 { font-size: 15px; margin: 20px 0 8px; }
.pop-x { position: absolute; right: 12px; top: 12px; }
.pop-note { margin-top: 14px; font-size: 13px; color: var(--ink-soft); }
.scores { width: 100%; border-collapse: collapse; font-size: 15px; }
.scores th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-soft); padding: 0 6px 6px; }
.scores td { padding: 8px 6px; border-top: 1px solid rgba(16, 48, 42, .1); }
.scores .num { text-align: right; font-variant-numeric: tabular-nums; }
.scores .rank { color: var(--ink-soft); width: 20px; }
.scores tr.me td { font-weight: 700; }
.scores em, .menu-players em { font-style: normal; font-size: 12px; color: var(--ink-soft); }
.scores .up { color: #1f7a3a !important; }
.scores .down { color: #b3301c !important; }
.menu-list { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-list .btn-quiet { border-color: rgba(16, 48, 42, .3); }
.menu-players { list-style: none; margin: 0; padding: 0; }
.menu-players li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(16, 48, 42, .1); }
.menu-players span { flex: 1; font-weight: 600; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .chat { position: fixed; right: 0; top: var(--header); bottom: 0; width: min(360px, 100vw); z-index: 20; transform: translateX(100%); transition: transform .25s var(--ease); background: #150e09; box-shadow: -20px 0 50px rgba(0, 0, 0, .5); }
  .chat-open .chat { transform: none; }
  .chat-open .r-main { grid-template-columns: minmax(0, 1fr) 0; }
}

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 20px; padding-bottom: 50px; }
  .hero-table { min-height: 300px; order: -1; margin: 0 -28px 0 0; }
  .hero-felt { inset: 0 -40px 0 30px; }
  .hero-hand { --cw: clamp(58px, 13vw, 96px); top: 46%; }
  .game-row, .steps { grid-template-columns: 1fr; }
  .lobby { grid-template-columns: 1fr; grid-template-areas: 'invite' 'games' 'seats'; }
  .rl { grid-template-columns: 1fr; gap: 16px; align-content: start; overflow-y: auto; padding: 16px; }
  .rl-wheel { grid-template-columns: auto 1fr; align-items: center; justify-items: start; }
  .wheel-box { width: 180px; }
  .history { justify-content: flex-start; }
  .r-title span { display: none; }
  .tool span { display: none; }
  .tool-leave span { display: inline; }
}

@media (max-width: 700px) {
  :root { --header: 54px; }
  .l-top { padding: 16px 18px; }
  .l-nav { display: none; }
  .hero { padding: 0 18px 40px; }
  .hero h1 { font-size: clamp(50px, 15vw, 76px); }
  .lede { font-size: 17px; }
  .hero-table { margin: 6px -18px 0 0; min-height: 250px; }
  .games, .how { padding: 30px 18px 50px; }
  .r-top { gap: 8px; padding: 0 8px 0 12px; }
  .wordmark.sm span { display: none; }
  .wordmark.sm::before { margin-right: 0; }
  .code-pill em, .code-pill > span { display: none; }
  .code-pill { padding: 0 12px; }
  .my-stack .avatar { display: none; }
  .tool-leave { padding: 0 10px; }
  .hero-print { display: none; }
  .hero-chips { bottom: 7%; left: 12%; right: 12%; }
  .hero-stack .stack { --chip: 22px; }
  .r-title { display: none; }
  .my-stack { margin-right: 2px; }
  .tool { padding: 0 8px; }
  .dock { grid-template-columns: 1fr; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); min-height: 0; }
  .dock-hand { flex-direction: row; gap: 8px; align-items: baseline; justify-content: center; }
  .dock-hand:empty { display: none; }
  .dock-hand b { font-size: 16px; }
  .dock-side { justify-content: center; }
  .dock-side:empty { display: none; }
  .dock-tip { display: none; }
  .dock-mid.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .dock-mid.acts .raise { grid-column: 1 / -1; }
  .dock-mid.acts > .btn { width: 100%; }
  .raise-row { display: grid; grid-template-columns: 1fr auto; }
  input[type=range] { width: 100%; }
  #raise-btn { min-width: 0; }
  .presets { justify-content: space-between; }
  .chip-btn { padding: 4px 8px; }
  .tray { justify-content: center; }
  .chip.big { --chip: 46px; }
  .bets { flex-direction: column; gap: 10px; }
  .bet-acts { justify-content: center; }

  .tbl-wrap { padding: 46px 30px 56px; }
  .tbl.holdem { --ar: .78; aspect-ratio: .78 / 1; width: min(100%, calc((100dvh - var(--header) - 190px - 100px) * .78)); }
  .tbl.holdem .felt { border-radius: 46% / 32%; }
  .felt::after { inset: 7%; }
  .board { top: 41%; --cw: clamp(32px, 9.4vw, 48px); --gap: 3px; }
  .pot { top: 57%; }
  .pot .stack { display: none; }
  .center-msg { top: 63%; font-size: 13.5px; }
  .felt-print { top: 80%; }
  .seat { --cw: 30px; }
  .seat.me { --cw: 54px; }
  .plate { min-width: 0; padding: 3px 10px 3px 3px; gap: 6px; }
  .avatar { --s: 28px; }
  .pname { font-size: 12px; max-width: 8ch; }
  .pchips { font-size: 12px; }
  .seat.side .plate-text { display: none; }
  .seat.side .plate { padding-right: 3px; }
  .tag { font-size: 11px; padding: 1px 7px; }

  .bj-wrap { padding: 10px 6px 30px; }
  .tbl.blackjack { aspect-ratio: .9 / 1; width: min(100%, calc((100dvh - var(--header) - 190px - 40px) * .9)); }
  .bj-felt { border-radius: 20px 20px 50% 50% / 20px 20px 60% 60%; }
  .felt-arc { display: none; }
  .dealer { --cw: 44px; top: 4%; }
  .shoe { display: none; }
  .spot { --cw: 34px; }
  .spot .plate-text { display: none; }
  .spot .plate { padding: 3px; }
  .circle { width: 44px; height: 44px; }
  .circle .stack { --chip: 16px; }

  .rl-layout { grid-template-columns: 1fr 1fr repeat(3, minmax(0, 1.3fr)); grid-template-rows: 40px repeat(12, 34px) 38px; padding: 8px; }
  .rc { grid-column: var(--mc) / span var(--mcs); grid-row: var(--mr) / span var(--mrs); font-size: 14px; }
  .rc.out { font-size: 12px; }
  .rc.dozen .rc-l, .rc.even-money .rc-l { writing-mode: vertical-rl; transform: rotate(180deg); }
  .rc.o-red .rc-l, .rc.o-black .rc-l { writing-mode: horizontal-tb; transform: rotate(45deg); width: 20px; height: 20px; }
  .wheel-box { width: 140px; }
  .rl-msg { font-size: 15px; min-height: 0; }
  .lobby { padding: 24px 18px 40px; }
  .pick-row { grid-template-columns: 1fr; }
  .pick { grid-template-columns: 96px 1fr; grid-template-rows: auto auto; }
  .pick-art { grid-row: 1 / span 2; --cw: 34px; }
  .pick-art .mini-wheel { width: 54px; height: 54px; }
  .pick-art .mini-dice { --d: 30px; gap: 6px; }
  .pick-name { padding-top: 12px; }
  .settings { grid-template-columns: 1fr 1fr; }
  .pop { right: 8px; left: 8px; width: auto; top: auto; bottom: 8px; max-height: 75dvh; }

  .bcrt { padding: 10px 10px 30px; }
  .bb-table { --cw: 44px; gap: 8px; }
  .bb-side { padding: 6px; }
  .bc-tray, .bc-pairs { gap: 7px; }
  .bc { padding: 9px 6px 8px; }
  .bc-l { font-size: 14px; }

  .craps { padding: 10px 10px 30px; gap: 10px; }
  .cr-felt { padding: 16px 12px 12px; }
  .die { --d: 42px; }
  .cr-shooter { position: static; margin-bottom: -4px; }
  .cr-lines { grid-template-columns: 1fr; }
  .cr-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cr-place { padding: 6px 4px 16px; }
  .cr-n { font-size: 17px; }
}

@media (max-height: 640px) and (min-width: 701px) {
  .tbl-wrap { padding-top: 46px; padding-bottom: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  *:not(circle), *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.rl-word { font-weight: 700; }
.rl-net { margin-right: 6px; }
.rl-net b { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ full-screen roulette spin
   A flat, true-circle wheel (no 3D tilt, so nothing is stretched) under a soft spotlight.
   Nothing here uses blur or filters; the only animated properties are transform and opacity. */
.spin-ov {
  position: fixed; inset: 0; z-index: 45; cursor: pointer; overflow: hidden;
  display: grid; grid-template-rows: minmax(56px, 13dvh) auto minmax(44px, 9dvh); place-content: center; justify-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.spin-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 58% at 50% 50%, rgba(66, 36, 17, .93), rgba(9, 4, 2, .985) 80%);
  animation: sv-bg .55s ease both;
}
@keyframes sv-bg { from { opacity: 0; } }
.spin-ov.closing .spin-bg { animation: sv-bg .5s ease reverse forwards; }
.spin-title {
  align-self: end; padding-bottom: 10px; position: relative; text-align: center; pointer-events: none; min-height: 1.2em;
  font-weight: 800; font-variation-settings: 'wdth' 75, 'opsz' 72; font-size: clamp(28px, 6vmin, 52px); line-height: 1; letter-spacing: -.01em; color: var(--mustard);
}
.spin-title span { display: inline-block; }
.spin-title .tt-in { animation: tt-in .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tt-in { from { opacity: 0; transform: translateY(10px); } }
.spin-title b { color: var(--cream); font-variant-numeric: tabular-nums; }
.spin-title .up { color: var(--mustard); }
.spin-cam { position: relative; z-index: 1; width: min(88vw, calc(100dvh - 22dvh - 12px), 720px); aspect-ratio: 1; }
.spin-cam .wheel { position: absolute; inset: 0; }
.spin-skip { align-self: start; padding-top: 12px; position: relative; font-size: 13px; color: rgba(245, 235, 221, .5); pointer-events: none; animation: sv-bg 1s ease 1.6s both; }

/* The result sits inside the wheel's brass hub, so the whole wheel stays visible. */
.spin-medal {
  position: absolute; left: 50%; top: 50%; width: 33%; aspect-ratio: 1; margin: -16.5% 0 0 -16.5%; z-index: 3; pointer-events: none;
  display: grid; place-content: center; justify-items: center; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .28), transparent 46%), var(--md, #c32b24);
  box-shadow: 0 0 0 .9vmin rgba(255, 250, 238, .96), 0 0 0 1.35vmin var(--md, #c32b24), 0 1.2vmin 3vmin rgba(0, 0, 0, .55);
}
.spin-ov.landed .spin-medal { animation: medal-in .6s cubic-bezier(.2, 1.15, .3, 1) both; }
@keyframes medal-in { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
.spin-medal.m-red { --md: #c32b24; }
.spin-medal.m-black { --md: #1c1d22; }
.spin-medal.m-green { --md: #1b7a4e; }
.spin-medal b { font-weight: 800; font-variation-settings: 'wdth' 75, 'opsz' 96; font-size: clamp(34px, 11vmin, 92px); line-height: .95; color: #fff; font-variant-numeric: tabular-nums; }
.spin-medal i { font-style: normal; font-weight: 700; font-size: clamp(11px, 2.2vmin, 18px); color: rgba(255, 250, 238, .85); margin-top: .4vmin; }
.spin-medal::after {
  content: ''; position: absolute; inset: -1.4vmin; border-radius: 50%; border: 2px solid var(--mustard); opacity: 0; pointer-events: none;
}
.spin-ov.landed .spin-medal::after { animation: medal-ring 1.1s cubic-bezier(.1, .6, .3, 1) .15s 1 both; }
@keyframes medal-ring { from { opacity: .9; transform: scale(.95); } to { opacity: 0; transform: scale(1.7); } }
.chip.rain { position: fixed; --chip: 30px; z-index: 4; pointer-events: none; }

/* ------------------------------------------------------------ blackjack: premium motion
   Cards are flown in by js/ui/motion.js (transform + opacity only), so the old keyframe
   entrance is switched off for this table. */
.tbl.blackjack .card { animation: none; }
.dealer-cards .card-in { transition: transform .95s cubic-bezier(.3, .7, .2, 1); }
.hand-cards .card { transition: none; }

.hand { animation: lane-in .42s var(--ease) backwards; }
@keyframes lane-in { from { opacity: 0; transform: translateY(8px); } }
.hands.h2, .hands.h3, .hands.h4 { gap: 16px; }
/* Split hands: each lane is a separate, labelled pocket with its own stake. */
.hands.h2 .hand, .hands.h3 .hand, .hands.h4 .hand { background: rgba(0, 0, 0, .16); padding: 6px 6px 8px; }
.hands.h2 .hand.on, .hands.h3 .hand.on, .hands.h4 .hand.on { background: rgba(242, 190, 69, .2); }
.hands.h2 .hand-bet, .hands.h3 .hand-bet, .hands.h4 .hand-bet { display: inline-flex; }
.hand-bet .stack { display: none; }
.hand-bet b { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, .55); font-variant-numeric: tabular-nums; }
.hand-bet em { font-style: normal; font-size: 10px; font-weight: 800; color: var(--mustard); margin-left: 4px; }
.hand.held:not(.on) .total { background: var(--mustard); color: var(--ink); box-shadow: none; }

/* A natural gets one slow glint across the cards. */
.hand.natural .hand-cards { position: relative; overflow: hidden; border-radius: 6px; }
.hand.natural .hand-cards::after {
  content: ''; position: absolute; inset: -20% -60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 236, 170, .55) 50%, transparent 58%);
  animation: glint 1.6s ease-out .9s 1 backwards; transform: translateX(-60%);
}
@keyframes glint { from { transform: translateX(-60%); } to { transform: translateX(60%); } }

/* Settle: a ring pulses where the winnings land; a lost stake fades as it's swept away. */
.circle.won::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--mustard); pointer-events: none;
  animation: win-ring 1.1s ease-out 1.15s 2 backwards;
}
@keyframes win-ring { from { transform: scale(.85); opacity: .95; } to { transform: scale(1.55); opacity: 0; } }
.circle.swept .stack, .circle.swept b { opacity: 0; transition: opacity .35s ease .45s; }
.hand.bust .hand-cards { transition: filter .5s ease .2s; }

/* Winning hand: one slow glint across each of the five cards. */
.card.hi .card-face::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 170, .55) 50%, transparent 62%);
  transform: translateX(-110%); animation: card-glint 1.1s ease-out .35s 1 both;
}
@keyframes card-glint { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

/* ------------------------------------------------------------ mobile + touch */
.tool-more { display: none; }
.more-list { display: grid; gap: 8px; }
.more-list .btn { justify-content: flex-start; width: 100%; border-color: rgba(16, 48, 42, .3); }
.more-list .btn.danger { color: #a3281a; border-color: rgba(163, 40, 26, .45); }

/* Compact header: phones in portrait, and phones on their side. Everything it hides lives in the More menu. */
@media (max-width: 760px), (max-height: 520px) {
  .tool-scores, .tool-sound, .tool-menu, .tool-leave, .r-title { display: none; }
  .tool-more { display: inline-flex; }
  .code-pill > span, .code-pill em { display: none; }
  .code-pill { padding: 0 14px; }
  .wordmark.sm span { display: none; }
  .wordmark.sm::before { margin-right: 0; }
  .my-stack .avatar { display: none; }
  .r-top { gap: 8px; padding: 0 8px 0 12px; }
}

/* Touch devices: every control is at least 44px, and nothing relies on hover. */
@media (pointer: coarse) {
  .btn { min-height: 48px; }
  .btn-sm { min-height: 44px; }
  .tool, .icon-btn { min-width: 44px; min-height: 44px; justify-content: center; }
  .code-pill { min-height: 44px; }
  .wordmark { min-height: 44px; }
  .wordmark.sm { min-width: 44px; justify-content: center; }
  .chip-btn { min-height: 44px; padding: 0 12px; }
  .reacts button { min-height: 44px; padding: 0 14px; }
  .toggle { min-height: 44px; }
  .toggle input { width: 48px; height: 28px; border-radius: 14px; }
  .toggle input::after { width: 22px; height: 22px; left: 3px; top: 3px; }
  .toggle input:checked::after { transform: translateX(20px); }
  input[type=range] { height: 44px; }
  .swatches { gap: 0; }
  .swatch { width: 44px; height: 44px; display: grid; place-items: center; }
  .swatch span { width: 34px; height: 34px; }
  .field input, .field select, .field.sm input, .field.sm select { min-height: 48px; }
  .gate-foot a, .l-foot a { display: inline-block; padding: 12px 6px; }
  .l-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  .link-btn { min-height: 44px; padding: 0 10px; }
  .chat-form input { height: 44px; }
  .tray-chip { min-width: 46px; min-height: 46px; }
  .btn:active:not(:disabled), .tray-chip:active:not(:disabled), .rc:active, .chip-btn:active { filter: brightness(.9); }
}

@media (max-width: 700px) {
  /* Roulette: tall enough cells to hit with a thumb; the board scrolls above the chip tray. */
  .rl-layout { grid-template-rows: 44px repeat(12, 44px) 44px; }
  /* Blackjack: card size follows the table width and how many are seated, so a lone player
     gets big, readable cards and a full table still fits. */
  .tbl.blackjack { container-type: inline-size; }
  .spot { --cwb: clamp(34px, calc(100cqw / (var(--n, 1) + 3.2)), 64px); --cw: var(--cwb); }
  .hands.h2, .hands.h3, .hands.h4 { --cw: calc(var(--cwb) * .74); }
  .dealer { --cw: clamp(44px, 15cqw, 62px); }
  .tbl-wrap { padding-left: 40px; padding-right: 40px; }
  .bj-wrap { padding-left: 6px; padding-right: 6px; }
}

/* ------------------------------------------------------------ landscape phones
   The table formulas above assume a tall viewport. On a screen under ~520px tall they are
   rebuilt from the height that is actually left once the header and dock are in place. */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --header: 44px; }
  .dock { min-height: 0; padding: 6px 16px calc(6px + env(safe-area-inset-bottom)); gap: 12px; }
  .dock-hand b { font-size: 16px; }
  .dock-note { font-size: 14px; }
  .dock-tip { display: none; }
  .tbl-wrap { padding: 6px 12px; }

  /* Blackjack: a wide, shallow table sized from the space that is left. */
  .bj-wrap { padding: 4px 10px; }
  .tbl.blackjack { width: min(100%, calc((100dvh - var(--header) - 60px - 30px) * 2)); aspect-ratio: 2 / 1; container-type: inline-size; }
  .spot { --cwb: clamp(34px, calc(100cqw / (var(--n, 1) + 4.4)), 54px); --cw: var(--cwb); }
  .hands.h2, .hands.h3, .hands.h4 { --cw: calc(var(--cwb) * .74); }
  .dealer { --cw: clamp(40px, 8cqw, 54px); }
  .felt-arc { display: none; }
  .shoe { width: 30px; height: 40px; }

  /* Hold'em: a wider, flatter oval, with room above and below for the seats. */
  .tbl-wrap:has(.tbl.holdem) { padding: 64px 56px 52px; }
  .tbl.holdem { aspect-ratio: 2.7 / 1; width: min(100%, calc((100dvh - var(--header) - 60px - 116px) * 2.7)); }
  /* On your turn the raise controls share one row with Fold and Call, so the dock stays one row tall. */
  .dock[data-game=holdem].my-turn .dock-hand, .dock[data-game=holdem].my-turn .dock-side { display: none; }
  .dock[data-game=holdem].my-turn { grid-template-columns: 1fr; }
  .dock[data-game=holdem] .dock-mid.acts { flex-wrap: nowrap; }
  .dock[data-game=holdem] .raise { flex-direction: row; align-items: center; gap: 8px; }
  .dock[data-game=holdem] .presets { gap: 4px; }
  .dock[data-game=holdem] .chip-btn { padding: 0 9px; font-size: 12px; min-width: 44px; }
  .dock[data-game=holdem] input[type=range] { width: 96px; }
  .dock[data-game=holdem] #raise-btn { min-width: 0; padding: 0 14px; }
  .seat { --cw: 28px; }
  .seat.me { --cw: 44px; }
  .pname { font-size: 12px; max-width: 8ch; }
  .pchips { font-size: 11.5px; }
  .plate { min-width: 0; padding: 3px 12px 3px 3px; }
  .avatar { --s: 30px; }
  .board { --cw: clamp(30px, 8.4vh, 46px); }
  .center-msg { font-size: 12.5px; }

  /* Roulette: wheel and board side by side instead of stacked. */
  .rl { grid-template-columns: 104px minmax(0, 1fr); align-items: start; gap: 8px; padding: 8px 6px; overflow-y: auto; }
  .rl-wheel { grid-template-columns: 1fr; justify-items: center; gap: 8px; }
  .wheel-box { width: 100px; }
  .history { justify-content: center; max-width: 112px; gap: 3px; }
  .history li { width: 22px; height: 22px; font-size: 10.5px; }
  .history li:first-child { width: 28px; height: 28px; font-size: 12px; }
  .rl-layout { grid-template-rows: repeat(3, 44px) 44px 44px; grid-template-columns: repeat(14, minmax(0, 1fr)); padding: 4px; gap: 2px; }
  .rl-msg { font-size: 14px; min-height: 0; }
  .rl-totals { font-size: 12px; }

  /* Lobby and gate scroll comfortably; keep the lists tight. */
  .lobby { padding: 16px 20px 24px; gap: 18px 32px; }
  .lobby-code { font-size: 56px; margin-bottom: 8px; }
}

/* Hold'em: the seats, bets and dealer button each sit in their own stable layer, so adding or removing a bet
   can never reorder (and so restart the animations of) the seats. The layers themselves draw nothing. */
.tbl.holdem > .seats, .tbl.holdem > .bets, .tbl.holdem > .btn-layer { display: contents; }
/* A card whose entrance has finished never plays it again. */
.tbl.holdem .card.played, .tbl.holdem .slot .card.played { animation: none; }
.tbl.holdem .card.played-in .card-in { animation: none; }

/* ------------------------------------------------------------ full tables on phones
   Blackjack seats seven and hold'em nine. Every seated player stays on screen, and the compact panel keeps
   the one thing you need at a glance (the balance) instead of hiding it. */
.seat.out .plate { opacity: .5; filter: grayscale(.7); border-style: dashed; }
.seat.folded .plate { opacity: .62; }
.spot { z-index: 2; }
.spot.acting, .spot:has(.hand.on) { z-index: 4; }

@media (max-width: 700px) {
  /* A narrower arc keeps the outer seats and their hands inside the screen. */
  .tbl.blackjack .spot { left: calc(50% + var(--ax) * 37%); top: calc(9% + var(--ay) * 71%); }
  .spot { --cwb: clamp(30px, calc(100cqw / (var(--n, 1) + 4.1)), 62px); }
  .spot .plate { flex-direction: column; gap: 1px; padding: 3px 6px 2px; border-radius: 13px; align-items: center; }
  .spot .plate-text { display: flex; }
  .spot .pname { display: none; }
  .spot .pchips { font-size: 10.5px; line-height: 1.1; }
  .spot .avatar { --s: 26px; }
  .seat.side .plate-text { display: flex; }
  .seat.side .pname { display: none; }
  .seat.side .plate { padding: 3px 9px 3px 3px; }
  .seat .pchips { font-size: 11px; }
}

/* Roulette roster: every participant (up to 12), never hidden. */
.rl-totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.rl-totals li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto auto; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); font-size: 13px; }
.rl-totals li.me { border-color: var(--mustard); }
.rl-totals li.idle { opacity: .7; }
.rl-totals .rn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cream); }
.rl-totals .rc2 { color: var(--cream-dim); font-variant-numeric: tabular-nums; font-size: 12px; }
.rl-totals em.up { color: #7fd99a; } .rl-totals em.down { color: #ef8a80; }
@media (max-width: 700px) {
  .rl-totals { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .rl-totals li { flex: 0 0 auto; grid-template-columns: 10px auto auto auto auto; scroll-snap-align: start; max-width: 70vw; }
  .rl-totals .rn { max-width: 84px; }
  .rl-msg { order: -2; } .rl-totals { order: -1; margin: 0; }
}

/* Blackjack: hands of the outer seats lean toward the table centre so they clear the neighbouring plate. */
.tbl.blackjack .hands { transform: translateX(calc(-50% - var(--ax, 0) * var(--ax, 0) * var(--ax, 0) * 84px)); }

/* Narrow phones, full tables: slightly smaller opponent cards so neighbours don't touch. */
@media (max-width: 440px) {
  .tbl.holdem .seat:not(.me) { --cw: 26px; }
  .tbl.holdem .seat.me { --cw: 42px; }
  .tbl.holdem .seat.me .card + .card { margin-left: calc(var(--cw) * -.4); }
  .tbl.blackjack .hands { transform: translateX(calc(-50% - var(--ax, 0) * var(--ax, 0) * var(--ax, 0) * 46px)); }
  .tbl.blackjack .spot { --cwb: clamp(28px, calc(100cqw / (var(--n, 1) + 4.9)), 54px); }
}

/* Blackjack insurance status under a seat */
.tag-ins { background: var(--cream); color: var(--ink); }
.tag-ins.wait { opacity: .75; }
.tag-ins.up { background: #7fd99a; }
.tag-ins.down { background: #ef8a80; }

/* Dealer's check for blackjack: announced to everyone, card stays hidden unless it is one. */
.dealer-check { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); z-index: 6; white-space: nowrap; text-align: center; padding: 7px 16px 8px; border-radius: 999px; font-weight: 700; font-size: 15px; background: rgba(15, 28, 22, .92); color: var(--cream); border: 1px solid rgba(242, 226, 190, .35); box-shadow: 0 6px 20px rgba(0, 0, 0, .4); animation: dc-in .4s var(--ease) both; pointer-events: none; }
.dealer-check small { display: block; font-size: 11px; font-weight: 500; opacity: .75; }
.dealer-check.none { border-color: #7fd99a; color: #bff0cc; }
.dealer-check.bj { border-color: #ef8a80; color: #ffd0ca; background: rgba(60, 14, 12, .92); }
@keyframes dc-in { from { opacity: 0; transform: translate(-50%, -6px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@media (max-width: 700px) { .dealer-check { font-size: 13px; padding: 5px 12px 6px; } }

/* ------------------------------------------------------------ crash */
.mini-crash { width: 124px; height: 124px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); }
.pick-art .mini-crash { width: 66px; height: 66px; }
.p-crash .mini-crash { animation: rk-bob 3.2s ease-in-out infinite; }
@keyframes rk-bob { 50% { transform: translateY(-6px) rotate(2deg); } }
.pk-crash { --g: var(--g-crash); }
.cr { width: 100%; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; padding: 14px 24px 16px; max-width: 1100px; min-height: 0; }
.cr-hist { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-height: 28px; }
.cr-hist li { flex: 0 0 auto; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-variant-numeric: tabular-nums; }
.cr-hist li.ch-lo { color: #ef8a80; } .cr-hist li.ch-mid { color: #7fd99a; } .cr-hist li.ch-hi { color: var(--mustard); }
.cr-hist li.fresh { animation: tag-in .4s var(--ease) both; background: rgba(255, 255, 255, .14); }
.cr-hist li.none { color: var(--cream-dim); font-weight: 500; }
.cr-graph { position: relative; min-height: 180px; border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse at 30% 100%, rgba(43, 42, 107, .55), rgba(16, 14, 30, .92) 70%); border: 1px solid rgba(245, 235, 221, .14); box-shadow: inset 0 0 40px rgba(0, 0, 0, .35); }
.cr-graph canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cr-read { position: absolute; left: 0; right: 0; top: 14%; text-align: center; pointer-events: none; }
.cr-mult { font-size: clamp(48px, 11vw, 112px); font-weight: 800; line-height: 1; font-variation-settings: 'wdth' 80; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-shadow: 0 4px 24px rgba(0, 0, 0, .5); }
.cr-sub { margin-top: 6px; font-size: 14px; color: var(--cream-dim); }
.cr-graph.is-running .cr-mult { color: var(--mustard); }
.cr-graph.is-running.t-mid .cr-mult { color: #7fd99a; }
.cr-graph.is-running.t-hi .cr-mult { color: #ffd976; text-shadow: 0 0 30px rgba(242, 190, 69, .6); }
.cr-graph.is-crashed .cr-mult { color: var(--vermilion); animation: cr-shake .5s ease both; }
.cr-graph.is-crashed .cr-sub { color: #ffb4aa; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.cr-graph.is-betting .cr-mult { color: var(--cream); }
@keyframes cr-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.cr-roster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.cr-p { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; font-size: 13px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.cr-p i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.cr-p .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-p .b { font-variant-numeric: tabular-nums; color: var(--cream-dim); }
.cr-p .s { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 82px; text-align: right; }
.cr-p.idle { opacity: .62; } .cr-p.me { border-color: var(--mustard); }
.cr-p.in .s { color: var(--cream); } .cr-p.won { background: rgba(127, 217, 154, .14); } .cr-p.won .s { color: #7fd99a; }
.cr-p.bust { background: rgba(224, 71, 47, .12); } .cr-p.bust .s { color: #ef8a80; }
.cr-cash { min-width: min(100%, 320px); min-height: 56px; display: inline-flex; gap: 10px; align-items: baseline; justify-content: center; font-size: 18px; }
.cr-cash b { font-size: 22px; font-variant-numeric: tabular-nums; }
.cr-cash small { opacity: .8; font-variant-numeric: tabular-nums; }
.cr-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cream-dim); }
.cr-auto select { min-height: 44px; border-radius: 10px; padding: 0 8px; background: rgba(255, 255, 255, .08); color: var(--cream); border: 1px solid rgba(255, 255, 255, .16); font: inherit; }
@media (max-width: 700px) {
  .cr { padding: 8px 12px 10px; gap: 8px; }
  .cr-graph { min-height: 170px; }
  .cr { overflow-y: auto; grid-template-rows: auto minmax(190px, 36vh) auto; align-content: start; }
  .cr-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .cr-p { grid-template-columns: 8px minmax(0, 1fr) auto; grid-template-areas: "dot name bet" "dot stat stat"; gap: 0 6px; padding: 4px 8px; font-size: 12px; }
  .cr-p i { grid-area: dot; align-self: center; width: 8px; height: 8px; }
  .cr-p .n { grid-area: name; } .cr-p .b { grid-area: bet; font-size: 11px; }
  .cr-p .s { grid-area: stat; min-width: 0; text-align: left; font-size: 11.5px; }
  .cr-auto span { display: none; }
}