/* Table 21 · Copyright (C) 2026 abel0x
   SPDX-License-Identifier: AGPL-3.0-or-later
   Free software with ABSOLUTELY NO WARRANTY; see LICENSE for the terms. */
@font-face {
  font-family: "Table21 Sans";
  src: url("../assets/fonts/table21-sans-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Table21 Sans";
  src: url("../assets/fonts/table21-sans-semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
}

/* =========================================================
   Table 21 — polished offline blackjack
   ========================================================= */
:root {
  --page-highlight: #143226;
  --page-mid: #0a1d15;
  --page-edge: #05110c;
  --ambient-glow: rgba(255, 240, 200, .10);
  --felt-highlight: #207653;
  --felt-1: #1b6b4a;
  --felt-2: #0c3d2a;
  --felt-edge: #06251a;
  --topbar-top: rgba(6, 18, 13, .92);
  --topbar-bottom: rgba(6, 18, 13, .55);
  --surface-top: rgba(18, 42, 31, .96);
  --surface-bottom: rgba(8, 26, 18, .96);
  --tray-top: rgba(10, 25, 18, .9);
  --tray-bottom: rgba(4, 14, 10, .92);
  --action-top: rgba(15, 50, 36, .95);
  --action-bottom: rgba(8, 32, 22, .95);
  --action-hover-top: rgba(22, 70, 50, .95);
  --action-hover-bottom: rgba(12, 44, 30, .95);
  --modal-top: #12251c;
  --modal-bottom: #0a1812;
  --card-pattern-light: rgba(255,255,255,.07);
  --card-pattern-dark: rgba(24,3,8,.2);
  --card-back-top: #982c34;
  --card-back-mid: #68151d;
  --card-back-bottom: #4b0d14;
  --card-back-inset: rgba(50,7,13,.72);
  --card-back-line: rgba(67,8,15,.62);
  --card-back-line-soft: rgba(67,8,15,.4);
  --card-medallion-top: #9e3039;
  --card-medallion-bottom: #5d1119;
  --card-medallion-inset: rgba(64,9,16,.42);
  --shoe-card-back: #781821;
  --shoe-mouth-card: #6d151d;
  --gold: #d9b65f;
  --gold-soft: #c9a24b;
  --gold-bright: #f4e2a6;
  --ink: #0b1310;
  --cream: #f4efe2;
  --red: #c8302a;
  --shadow: rgba(0, 0, 0, .45);
  --rim: #3a2a12;
  --panel: rgba(8, 22, 16, .72);
  --panel-line: rgba(217, 182, 95, .22);
  --good: #41d18a;
  --bad: #e2685f;
  --font-display: "Table21 Sans", "Segoe UI", sans-serif;
  --font-ui: "Table21 Sans", "Segoe UI", system-ui, sans-serif;
}

body[data-theme="midnight"] {
  --page-highlight: #1a304b;
  --page-mid: #091827;
  --page-edge: #030a12;
  --ambient-glow: rgba(183, 219, 255, .11);
  --felt-highlight: #2b6288;
  --felt-1: #174a70;
  --felt-2: #0b2b47;
  --felt-edge: #041722;
  --topbar-top: rgba(5, 14, 25, .94);
  --topbar-bottom: rgba(5, 14, 25, .58);
  --surface-top: rgba(15, 36, 57, .96);
  --surface-bottom: rgba(6, 20, 34, .96);
  --tray-top: rgba(10, 29, 47, .92);
  --tray-bottom: rgba(3, 13, 23, .94);
  --action-top: rgba(21, 59, 88, .95);
  --action-bottom: rgba(10, 34, 56, .95);
  --action-hover-top: rgba(31, 79, 114, .95);
  --action-hover-bottom: rgba(15, 47, 75, .95);
  --modal-top: #11263a;
  --modal-bottom: #071522;
  --card-pattern-dark: rgba(2,5,20,.26);
  --card-back-top: #465ea8;
  --card-back-mid: #293d7d;
  --card-back-bottom: #111b46;
  --card-back-inset: rgba(5,9,34,.76);
  --card-back-line: rgba(8,14,52,.66);
  --card-back-line-soft: rgba(8,14,52,.44);
  --card-medallion-top: #4c64ae;
  --card-medallion-bottom: #1b2c65;
  --card-medallion-inset: rgba(7,12,44,.5);
  --shoe-card-back: #293d7d;
  --shoe-mouth-card: #22366f;
}

body[data-theme="bordeaux"] {
  --page-highlight: #3b1a20;
  --page-mid: #1b090e;
  --page-edge: #090305;
  --ambient-glow: rgba(255, 218, 178, .1);
  --felt-highlight: #8e3a49;
  --felt-1: #6e2635;
  --felt-2: #3e111c;
  --felt-edge: #1c070e;
  --topbar-top: rgba(27, 8, 13, .94);
  --topbar-bottom: rgba(27, 8, 13, .58);
  --surface-top: rgba(63, 27, 36, .96);
  --surface-bottom: rgba(33, 10, 17, .96);
  --tray-top: rgba(50, 19, 27, .92);
  --tray-bottom: rgba(24, 8, 13, .94);
  --action-top: rgba(84, 32, 45, .95);
  --action-bottom: rgba(51, 16, 27, .95);
  --action-hover-top: rgba(111, 42, 57, .95);
  --action-hover-bottom: rgba(69, 21, 35, .95);
  --modal-top: #371721;
  --modal-bottom: #1b090f;
  --card-pattern-light: rgba(255,246,217,.065);
  --card-pattern-dark: rgba(0,0,0,.28);
  --card-back-top: #555147;
  --card-back-mid: #292a25;
  --card-back-bottom: #0c0f0d;
  --card-back-inset: rgba(0,0,0,.78);
  --card-back-line: rgba(19,17,11,.74);
  --card-back-line-soft: rgba(19,17,11,.48);
  --card-medallion-top: #5b4c2d;
  --card-medallion-bottom: #201b11;
  --card-medallion-inset: rgba(0,0,0,.5);
  --shoe-card-back: #25251f;
  --shoe-mouth-card: #1c1d18;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
}

html, body { height: 100%; }

html { height: 100%; }
body {
  font-family: var(--font-ui);
  color: var(--cream);
  background:
    radial-gradient(120% 120% at 50% -10%, var(--page-highlight) 0%, var(--page-mid) 45%, var(--page-edge) 100%);
  height: 100vh;        /* fallback */
  height: 100dvh;       /* compact layouts below allow scrolling when needed */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 50% at 50% 22%, var(--ambient-glow), transparent 70%),
    radial-gradient(40% 40% at 12% 90%, rgba(0,0,0,.5), transparent 60%),
    radial-gradient(40% 40% at 88% 90%, rgba(0,0,0,.5), transparent 60%);
}

/* ----------------------- Top bar ----------------------- */
.topbar {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(8px, 1.5vh, 14px) clamp(14px, 3vw, 34px);
  background: linear-gradient(180deg, var(--topbar-top), var(--topbar-bottom));
  border-bottom: 1px solid var(--panel-line);
  backdrop-filter: blur(6px);
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  display: inline-flex;
  flex: 0 0 auto;
  line-height: 0;
  filter: drop-shadow(0 3px 8px rgba(217, 182, 95, .35));
}
.brand-mark svg { display: block; }
.brand-text { display: grid; gap: 4px; min-width: 0; }
.brand-text h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.8vw, 20px);
  line-height: 1;
  letter-spacing: 3.2px;
  font-weight: 650;
  color: rgba(244, 239, 226, .92);
  white-space: nowrap;
}
.brand-word { text-shadow: 0 1px 8px rgba(244, 226, 166, .12); }
.brand-number {
  min-width: 32px;
  display: inline-grid;
  place-items: center;
  padding: 2px 7px 3px;
  border: 1px solid rgba(217, 182, 95, .46);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(217,182,95,.14), rgba(217,182,95,.035));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 3px 10px rgba(0,0,0,.2);
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: 1.04em;
  font-weight: 700;
  letter-spacing: 0;
}
.subtitle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(244, 239, 226, .55);
}
.subtitle::before {
  content: "";
  width: 16px;
  height: 1px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--gold), rgba(217,182,95,.2));
}

.topbar-actions { display: flex; align-items: center; gap: 10px; }

.balance-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 6px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(217,182,95,.14), rgba(217,182,95,.04));
  border: 1px solid var(--panel-line);
  min-width: 116px;
}
.balance-label {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(244, 239, 226, .55);
}
.balance-value {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}
.currency { opacity: .7; margin-right: 1px; }

.lang-switch {
  display: flex;
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  overflow: hidden;
}
.lang-btn {
  background: transparent;
  color: rgba(244, 239, 226, .6);
  border: none;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: .18s;
}
.lang-btn:not(:disabled):hover { color: var(--cream); }
.lang-btn:disabled,
.icon-btn:disabled { opacity: .38; cursor: not-allowed; }
.lang-btn.active {
  background: linear-gradient(180deg, var(--gold), var(--gold-soft));
  color: #2a1d05;
}

.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--panel-line);
  background: rgba(217,182,95,.06);
  color: var(--cream);
  font-size: 18px;
  cursor: pointer;
  transition: .18s;
}
.icon-btn:not(:disabled):hover { background: rgba(217,182,95,.16); }
#soundToggle.sound-control {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 50%;
  color: var(--gold-bright);
  background:
    radial-gradient(circle at 35% 27%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(145deg, rgba(217,182,95,.14), rgba(5,14,10,.72));
  border-color: rgba(217, 182, 95, .34);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 5px 12px rgba(0,0,0,.25);
}
#soundToggle.sound-control::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border: 1px solid rgba(217,182,95,.15);
  border-radius: inherit;
}
#soundToggle.sound-control:not(:disabled):hover {
  color: #fff4c9;
  border-color: rgba(244,226,166,.58);
  background:
    radial-gradient(circle at 35% 27%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(145deg, rgba(217,182,95,.22), rgba(8,24,17,.8));
}
.sound-glyph {
  position: relative;
  z-index: 1;
  display: block;
  width: 24px;
  height: 24px;
  overflow: visible;
  transition: transform .16s ease;
}
.sound-cone {
  fill: rgba(217,182,95,.13);
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linejoin: round;
}
.sound-wave,
.sound-slash {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.sound-wave {
  stroke-width: 1.55;
  transition: opacity .18s ease, transform .18s ease;
  transform-origin: 14px 14px;
}
.sound-wave-near { opacity: .9; }
.sound-wave-far { opacity: .62; }
.sound-slash {
  opacity: 0;
  stroke: var(--bad);
  stroke-width: 1.9;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.55));
  transition: opacity .18s ease;
}
.sound-led {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 2;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(4,16,10,.82);
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 6px rgba(65,209,138,.65);
  transition: background .18s ease, box-shadow .18s ease;
}
#soundToggle[aria-pressed="false"] {
  color: rgba(244,239,226,.55);
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(5,14,10,.72));
}
#soundToggle[aria-pressed="false"] .sound-wave {
  opacity: 0;
  transform: translateX(-1.5px) scale(.9);
}
#soundToggle[aria-pressed="false"] .sound-slash { opacity: .92; }
#soundToggle[aria-pressed="false"] .sound-led {
  background: var(--bad);
  box-shadow: 0 0 5px rgba(226,104,95,.45);
}
#soundToggle:active .sound-glyph { transform: scale(.9); }
#soundToggle[aria-pressed="true"]:hover .sound-wave-far {
  animation: soundSignal 1.1s ease-in-out infinite;
}
@keyframes soundSignal {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

/* ----------------------- Table ----------------------- */
.table-wrap {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;               /* allow the area to shrink within the viewport */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vh, 18px);
  padding: clamp(8px, 1.6vh, 26px) clamp(12px, 2.4vw, 30px);
  overflow: hidden;
}

.table {
  width: min(1080px, 100%);
  flex: 0 1 auto;
  min-height: 0;
  perspective: 1400px;
}

.table-felt {
  position: relative;
  border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
  background:
    radial-gradient(ellipse 72% 50% at 48% -4%, rgba(255, 247, 218, .12), transparent 66%) padding-box,
    repeating-linear-gradient(4deg, rgba(255,255,255,.016) 0 1px, transparent 1px 4px) padding-box,
    repeating-linear-gradient(94deg, rgba(0,0,0,.024) 0 1px, transparent 1px 5px) padding-box,
    radial-gradient(120% 92% at 50% 8%, var(--felt-highlight) 0%, var(--felt-1) 24%, var(--felt-2) 61%, var(--felt-edge) 100%) padding-box,
    linear-gradient(142deg, rgba(255,232,164,.3), transparent 24%, rgba(0,0,0,.42) 72%, rgba(255,214,117,.2)) border-box,
    repeating-linear-gradient(102deg, #25160b 0 10px, #52371a 10px 18px, #30200f 18px 29px, #694821 29px 34px) border-box;
  /* extra bottom room reserves the betting-circle zone below the player's cards */
  padding: clamp(18px, 3.6vh, 44px) clamp(18px, 4vw, 54px) clamp(74px, 13vh, 112px);
  box-shadow:
    inset 0 0 0 1px rgba(241, 211, 130, .18),
    inset 0 0 105px rgba(0, 0, 0, .58),
    inset 0 9px 34px rgba(255, 255, 255, .055),
    0 0 0 1px #0b0704,
    0 0 0 4px rgba(105, 72, 31, .58),
    0 34px 68px rgba(0, 0, 0, .64);
  border: clamp(8px, 1.25vh, 12px) solid transparent;
  /* Viewport-relative height: constant during play, always fits one screen.
     The cap (640) is sized to comfortably hold the capped inner zones + padding. */
  height: clamp(330px, 64vh, 640px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(4px, 1vh, 10px);
  overflow: hidden;
}

.table-rim {
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  border: 2px solid rgba(225, 190, 99, .58);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.52),
    inset 0 0 0 clamp(6px, .9vh, 9px) rgba(0,0,0,.15),
    0 1px 0 rgba(255,244,205,.18);
  z-index: 3;
}
.table-rim::after {
  content: "";
  position: absolute;
  inset: clamp(7px, 1.15vh, 11px);
  border-radius: inherit;
  border: 1px solid rgba(9, 36, 25, .7);
  box-shadow: 0 1px 0 rgba(244,226,166,.1);
}

/* Felt monogram watermark */
.felt-monogram {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(180px, 34vw, 360px);
  line-height: 1;
  color: rgba(255, 255, 255, .035);
  text-shadow: 0 2px 1px rgba(0,0,0,.12);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* Screen-printed (serigraphy) felt layout: faint, champagne-gold curved
   lines and text — like ink printed into real felt. Always below the cards
   and chips (z-index 0); cards/chips are painted on top, never covered. */
.felt-print {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  color: var(--gold-bright);
  overflow: visible;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.14));
}
.felt-print .print-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: .11;
}
.felt-print .print-line.thin  { stroke-width: 1;   opacity: .075; }
.felt-print .print-line.sweep { stroke-width: 2.2; opacity: .17; }
.felt-print .print-label {
  fill: currentColor;
  font-family: var(--font-display);
  text-transform: uppercase;
  text-anchor: middle;
  /* the printed-into-felt look: faint, slightly debossed */
  paint-order: stroke;
}
.felt-print .print-label.ins  { font-size: 21px; letter-spacing: 7px;  opacity: .20; }
.felt-print .print-label.rule { font-size: 30px; letter-spacing: 8px;  opacity: .26; }
.felt-print .print-label.sub  { font-size: 16px; letter-spacing: 4.5px; opacity: .16; }

/* Seats */
.seat { position: relative; z-index: 2; }
.dealer-seat { text-align: center; }
.player-seat { text-align: center; }

/* Dealer nameplate */
.dealer-plate {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 14px;
  border-radius: 4px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.22));
  border: 1px solid rgba(217, 182, 95, .35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.dealer-plate-tag {
  font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(244, 226, 166, .6);
}
.dealer-plate-name {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600; letter-spacing: 1.8px;
  color: var(--gold-bright);
}
.dealer-line {
  min-height: 18px;
  margin-top: 6px;
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(244, 239, 226, .62);
  opacity: 0;
  transition: opacity .35s ease;
}
.dealer-line.show { opacity: 1; }

.seat-header {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(217, 182, 95, .25);
  margin-bottom: 12px;
}
.player-header { margin-top: 0; margin-bottom: 12px; }
.seat-name {
  font-family: var(--font-display);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--gold-bright);
}
.score-chip {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(0,0,0,.35);
  color: var(--cream);
}
.score-chip.bust { color: #fff; background: var(--red); }
.score-chip.bj { color: #2a1d05; background: linear-gradient(180deg,var(--gold-bright),var(--gold-soft)); }
.score-chip:empty { display: none; }

/* Hands — viewport-relative reserved heights + nowrap so the felt never resizes */
.hand, .hands-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  min-height: clamp(66px, 11.5vh, 122px);
  flex-wrap: nowrap;
}
/* Reserve the full player block height even when empty (betting phase) */
.hands-row { gap: clamp(12px, 2.4vw, 26px); align-items: flex-start; min-height: clamp(84px, 14vh, 150px); }

.player-hand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
  transition: .2s;
}
.player-hand .hand { min-height: clamp(62px, 10.5vh, 115px); }
.player-hand.active {
  background: radial-gradient(70% 100% at 50% 0%, rgba(217,182,95,.18), transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(217,182,95,.35);
}
.hand-footer {
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.hand-wager {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 34px;
  isolation: isolate;
}
.hand-wager::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 1px;
  height: 18px;
  border: 1px solid rgba(226,194,109,.25);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.24), transparent 68%);
}
.hand-wager .hand-bet-stack,
.hand-wager .bet-stack.hand-payout-stack {
  --stack-w: 38px;
  --stack-t: 5px;
  --stack-face: 18px;
  bottom: 3px;
  z-index: 2;
  filter: drop-shadow(0 5px 4px rgba(0,0,0,.48));
}
.hand-wager .hand-bet-stack.pile-medium,
.hand-wager .hand-payout-stack.pile-medium {
  --stack-w: 28px;
  --stack-t: 3px;
  --stack-face: 15px;
}
.hand-wager .pile-medium .pile-row { gap: 2px; }
.hand-wager .hand-bet-stack.pile-dense,
.hand-wager .hand-payout-stack.pile-dense {
  --stack-w: 24px;
  --stack-t: 2px;
  --stack-face: 13px;
}
.hand-wager .pile-dense .pile-row {
  gap: 2px;
}
.hand-wager .pile-dense .pile-row + .pile-row {
  margin-top: calc(0px - var(--stack-face) - 6px);
}
.hand-wager.wager-enter .hand-bet-stack { animation: wagerEnter .38s cubic-bezier(.2,.74,.24,1) both; }
.hand-wager.wager-split-left .hand-bet-stack { animation: wagerSplitLeft .4s cubic-bezier(.2,.74,.24,1) both; }
.hand-wager.wager-split-right .hand-bet-stack { animation: wagerSplitRight .4s cubic-bezier(.2,.74,.24,1) both; }
.hand-wager.wager-double .hand-bet-stack { animation: wagerDouble .38s cubic-bezier(.18,.76,.22,1) both; }
@keyframes wagerEnter {
  0% { opacity: 0; transform: translateX(-50%) translateY(42px) scale(.82); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes wagerSplitLeft {
  0% { opacity: .45; transform: translateX(calc(-50% + 30px)) scale(.9); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes wagerSplitRight {
  0% { opacity: 0; transform: translateX(calc(-50% - 38px)) translateY(24px) scale(.82); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes wagerDouble {
  0% { opacity: .55; transform: translateX(-50%) translateY(28px) scale(.86); }
  72% { transform: translateX(-50%) translateY(-2px) scale(1.03); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.hand-tag {
  font-size: 11px;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(217,182,95,.25);
  display: flex; gap: 8px; align-items: center;
  white-space: nowrap;
}
.hand-tag .htag-bet { color: var(--gold-bright); font-weight: 700; }
.hand-tag .htag-score.bust { color: var(--bad); }
/* Split hands: total and stake on one line, the hand's net result below. A
   grid (not a wrapping flexbox) keeps the tag only as wide as its longest line. */
.hands-row:not(.hand-count-1) .hand-tag {
  display: grid;
  grid-template-columns: auto auto;
  justify-items: center;
  column-gap: 6px;
  row-gap: 0;
  padding: 2px 8px;
  line-height: 1.3;
}
.hands-row:not(.hand-count-1) .htag-res { grid-column: 1 / -1; }
.hands-row:not(.hand-count-1) .htag-hand,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hand-tag .htag-res { font-weight: 700; }
.hand-tag .htag-res.win { color: var(--good); }
.hand-tag .htag-res.lose { color: var(--bad); }

/* ----------------------- Cards ----------------------- */
.card {
  --w: clamp(46px, min(8.4vw, 7.4vh), 82px);
  --card-turn: 0deg;
  --card-lift: 0px;
  width: var(--w);
  height: calc(var(--w) * 1.4);
  border-radius: calc(var(--w) * .105);
  position: relative;
  color: #1a1a1a;
  flex: 0 0 auto;
  transform-origin: bottom center;
  transform: translateY(var(--card-lift)) rotate(var(--card-turn));
  perspective: 760px;
  user-select: none;
}
.card:not(:first-child) { margin-left: -38px; }
.hand .card, .player-hand .hand .card { margin-left: 0; }
.hand .card:not(:first-child) { margin-left: -20px; }
/* Rotated about its centre, a sideways card is .4w wider than its layout box;
   the margins give that overhang back so it neither collides nor clips. */
.player-hand .hand .card.double-card {
  transform-origin: center center;
  margin-left: calc(var(--w) * .02);
  margin-right: calc(var(--w) * .2);
}
/* Three or four hands (and two on the narrowest phones) cannot afford the
   extra width, so the double card lies across the lower half of the first two
   cards, centred on them, leaving their corner indices readable. With the
   usual 20px fan the centring margin is -(3w - 20px) / 2. */
.hand-count-3 .hand .card.double-card,
.hand-count-4 .hand .card.double-card {
  --double-lift: calc(var(--w) * .26);
  margin-left: calc((var(--w) * -3 + 20px) / 2);
  margin-right: calc(var(--w) * .2);
}
#dealerHand .card { transition: margin-left .28s ease, z-index 0s; }
#dealerHand .card:first-child { z-index: 2; }
#dealerHand .card.hole-card {
  z-index: 1;
  margin-left: -31px;
}
#dealerHand .card.hole-card.hole-reveal-motion {
  z-index: 3;
  animation: exposeHoleCard .58s cubic-bezier(.22, .75, .25, 1) both;
}
@keyframes exposeHoleCard {
  0%   { transform: translateY(var(--card-lift)) rotate(var(--card-turn)); }
  46%  { transform: translate(18px, -5px) rotate(2deg); }
  100% { transform: translateY(var(--card-lift)) rotate(var(--card-turn)); }
}

/* A soft landing shadow that grows as the card settles */
.card::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: -8px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.52), transparent 72%);
  z-index: -1;
  opacity: 1;
  transform: scaleX(1);
}

/* The flipping body: front + back on a 3D inner element */
.card-inner {
  position: relative;
  width: 100%; height: 100%;
  border-radius: inherit;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.3, .9, .25, 1);
  box-shadow:
    0 1px 0 #d8d5cb,
    0 2px 0 #b9b5aa,
    0 10px 22px rgba(0, 0, 0, .46),
    -2px 2px 5px rgba(0,0,0,.14);
}
.card-inner.facedown { transform: rotateY(180deg); }
.card-face {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card-face.front {
  background:
    radial-gradient(circle at 18% 9%, rgba(255,255,255,.9), transparent 32%),
    repeating-linear-gradient(112deg, rgba(77,62,31,.018) 0 1px, transparent 1px 4px),
    linear-gradient(155deg, #fffefa 0%, #f7f5ed 52%, #e9e7df 100%);
  box-shadow:
    inset 0 0 0 1px rgba(32,27,18,.13),
    inset 2px 2px 2px rgba(255,255,255,.75),
    inset -2px -2px 3px rgba(72,61,42,.09);
}
.card-face.front::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .34;
  background:
    repeating-linear-gradient(7deg, rgba(74,61,35,.022) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 72% 83%, rgba(122,103,67,.08) 0 1px, transparent 1.2px);
  background-size: auto, 8px 8px;
  mix-blend-mode: multiply;
}
.card-face.back {
  transform: rotateY(180deg);
  background:
    linear-gradient(45deg, var(--card-pattern-light) 25%, transparent 25% 75%, var(--card-pattern-light) 75%) 0 0 / 8px 8px,
    linear-gradient(-45deg, var(--card-pattern-dark) 25%, transparent 25% 75%, var(--card-pattern-dark) 75%) 4px 4px / 8px 8px,
    linear-gradient(145deg, var(--card-back-top), var(--card-back-mid) 58%, var(--card-back-bottom));
  box-shadow:
    inset 0 0 0 3px #f4efe3,
    inset 0 0 0 5px #9d7a35,
    inset 0 0 0 7px #f4efe3,
    inset 0 0 0 8px var(--card-back-inset);
}
.card-face.back::after {
  content: "♠";
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--w) * .48);
  height: calc(var(--w) * .48);
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(244,226,166,.75);
  background: radial-gradient(circle at 35% 30%, var(--card-medallion-top), var(--card-medallion-bottom) 72%);
  box-shadow: 0 2px 5px rgba(0,0,0,.35), inset 0 0 0 2px var(--card-medallion-inset);
  font-size: calc(var(--w) * .29);
  line-height: 1;
  color: rgba(248, 226, 158, .93);
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.card-face.back::before {
  content: "";
  position: absolute; inset: 9px;
  border: 1px solid rgba(244, 226, 166, .68);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--card-back-line), 0 0 0 1px var(--card-back-line-soft);
}

/* Fresh cards use JS-measured vectors, so their first frame is inside the
   actual shoe mouth at every table size instead of at an arbitrary offset. */
.card.deal-ready,
.card.deal-ready::after { opacity: 0; }
.card.dealing {
  z-index: 4;
  will-change: transform, opacity;
  animation: dealFromShoe .56s cubic-bezier(.18, .76, .2, 1) both;
}
.card.dealing::after {
  animation: landShadow .56s cubic-bezier(.18, .76, .2, 1) both;
}
@keyframes dealFromShoe {
  0% {
    opacity: .62;
    transform: translate3d(var(--deal-x), var(--deal-y), 0) rotate(-7deg) scale(.5);
  }
  14% { opacity: 1; }
  58% {
    transform: translate3d(var(--deal-mid-x), var(--deal-mid-y), 0) rotate(-3.2deg) scale(.86);
  }
  84% { transform: translate3d(0, -5px, 0) rotate(1.2deg) scale(1.025); }
  100% {
    opacity: 1;
    transform: translate3d(0, var(--card-lift), 0) rotate(var(--card-turn)) scale(1);
  }
}
@keyframes landShadow {
  0%, 55% { opacity: 0; transform: scaleX(.5); }
  100%    { opacity: 1; transform: scaleX(1); }
}
/* Re-rendered (already-dealt) cards stay put — no replayed deal-in */
.card.no-deal { animation: none; }
.card.no-deal::after { animation: none; opacity: 1; transform: scaleX(1); }

/* Dealer gathers the cards into the dedicated discard tray. */
.card.collecting {
  z-index: 8;
  animation: collect .62s cubic-bezier(.4, 0, .7, .35) forwards;
}
.card.collecting::after { animation: none; opacity: 0; }
@keyframes collect {
  0%   { transform: translateY(var(--card-lift)) rotate(var(--card-turn)); opacity: 1; }
  32%  { transform: translate3d(var(--discard-mid-x), var(--discard-mid-y), 0) rotate(-2deg) scale(.9); }
  100% {
    transform: translate3d(var(--discard-x, -220px), var(--discard-y, -190px), 0) rotate(var(--discard-turn, 3deg)) scale(.48);
    opacity: 0;
  }
}

.card .corner {
  position: absolute;
  z-index: 3;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  text-shadow: 0 .5px 0 rgba(0,0,0,.08);
}
.card .corner .r { font-size: calc(var(--w) * .225); letter-spacing: -.055em; }
.card .tl { top: 5px; left: 6px; }
.card .br { bottom: 5px; right: 6px; transform: rotate(180deg); }
.card.red { color: #c3262d; }
.card.black { color: #111319; }

/* Full pip field: authentic mirrored layouts for ace through ten. */
.pip-layout {
  position: absolute;
  inset: 13% 18%;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
}
.pip-mark {
  display: grid;
  place-items: center;
  font-size: calc(var(--w) * .205);
  line-height: 1;
}
.pip-mark.inverted { transform: rotate(180deg); }
.p1  { grid-area: 1 / 1; } .p2  { grid-area: 1 / 2; } .p3  { grid-area: 1 / 3; }
.p4  { grid-area: 2 / 1; } .p5  { grid-area: 2 / 2; } .p6  { grid-area: 2 / 3; }
.p7  { grid-area: 3 / 1; } .p8  { grid-area: 3 / 2; } .p9  { grid-area: 3 / 3; }
.p10 { grid-area: 4 / 1; } .p11 { grid-area: 4 / 2; } .p12 { grid-area: 4 / 3; }
.p13 { grid-area: 5 / 1; } .p14 { grid-area: 5 / 2; } .p15 { grid-area: 5 / 3; }
.rank-2 .pip-mark,
.rank-3 .pip-mark { font-size: calc(var(--w) * .25); }
.rank-4 .pip-mark,
.rank-5 .pip-mark { font-size: calc(var(--w) * .225); }
.rank-7 .pip-mark,
.rank-8 .pip-mark { font-size: calc(var(--w) * .19); }
.rank-9 .pip-mark,
.rank-10 .pip-mark { font-size: calc(var(--w) * .18); }
.rank-a .pip-mark {
  position: relative;
  z-index: 1;
  font-size: calc(var(--w) * .59);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.12));
}
.rank-a .pip-layout::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--w) * .47);
  height: calc(var(--w) * .47);
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: .12;
  box-shadow: 0 0 0 3px rgba(128,105,55,.08);
}

/* Locally drawn, mirrored court artwork. Each rank has its own headwear and
   implement while sharing one restrained casino-print palette. */
.court {
  --court-blue: #254875;
  --court-red: #a72d39;
  --court-gold: #b48932;
  --court-ink: #35291d;
  position: absolute;
  z-index: 2;
  inset: 12% 19%;
  overflow: hidden;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(91,60,18,.7),
    0 1px 2px rgba(0,0,0,.16);
}
.card.red .court { --court-blue: #a92f3d; --court-red: #294c78; }
.court-art { display: block; width: 100%; height: 100%; overflow: hidden; }
.court-paper { fill: #eee4c6; }
.court-diagonal-a { fill: var(--court-blue); opacity: .24; }
.court-diagonal-b { fill: var(--court-red); opacity: .25; }
.court-frame { fill: none; stroke: var(--court-gold); stroke-width: 1.4; }
.court-robe { stroke: var(--court-ink); stroke-width: .75; stroke-linejoin: round; }
.court-robe-back { fill: var(--court-blue); }
.court-robe-front { fill: var(--court-red); }
.court-person-j .court-robe-front { fill: #365785; }
.court-person-q .court-robe-front { fill: #9e3447; }
.court-person-k .court-robe-front { fill: #8c2732; }
.court-collar { fill: #e8d598; stroke: var(--court-ink); stroke-width: .7; }
.court-face-shape { fill: #e8bd8b; stroke: var(--court-ink); stroke-width: .7; }
.court-hair { fill: #493525; stroke: var(--court-ink); stroke-width: .55; }
.court-feature {
  fill: none;
  stroke: #3b291c;
  stroke-width: .8;
  stroke-linecap: round;
}
.court-headwear, .court-crown { fill: var(--court-gold); stroke: var(--court-ink); stroke-width: .75; }
.court-feather { fill: var(--court-red); stroke: var(--court-ink); stroke-width: .6; }
.court-weapon, .court-guard, .court-flower {
  fill: none;
  stroke: #6c5427;
  stroke-width: 1.4;
  stroke-linecap: round;
}
.court-jewel { fill: #d8b85b; stroke: var(--court-ink); stroke-width: .6; }
.court-suit-glyph {
  fill: currentColor;
  font-family: Georgia, serif;
  font-size: 10px;
  font-weight: 700;
}
.court-center-band { fill: #d2ac51; stroke: #6b501d; stroke-width: .7; }
.court-center-rank {
  fill: #2e2418;
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 700;
  text-anchor: middle;
}

/* Subtle sheen sweep as the hole card is revealed */
.card-inner.revealing .card-face.front::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 4;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: sheen .6s ease .15s 1;
}
@keyframes sheen { to { transform: translateX(120%); } }

.card.win-glow .card-inner {
  box-shadow: 0 0 0 1px rgba(226,194,109,.72), 0 10px 22px rgba(0,0,0,.42);
}

/* ----------------------- Result badge ----------------------- */
.result-badge {
  position: absolute;
  top: 43%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
  padding: clamp(7px, 1.15vh, 11px) clamp(16px, 2.5vw, 28px);
  border: 1px solid rgba(236, 219, 170, .42);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(7, 15, 12, .9), rgba(3, 8, 6, .82));
  box-shadow: 0 12px 30px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.05);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(20px, 3.1vw, 38px);
  letter-spacing: clamp(1.8px, .34vw, 4px);
  text-align: center;
  white-space: nowrap;
  color: var(--cream);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .65);
  opacity: 0;
}
.result-badge[hidden] { display: none; }
.result-word, .result-amount { display: block; }
.result-amount {
  margin-top: 2px;
  font-size: .5em;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  opacity: .9;
}
/* The badge is the one visual verdict; the banner keeps announcing the full
   sentence to assistive technology but steps out of the way visually. */
.result-badge.show ~ .table-center .banner { opacity: 0; }
.result-badge.show { animation: badgePop .5s cubic-bezier(.2, 1.25, .3, 1) both; }
@keyframes badgePop {
  0%   { opacity: 0; transform: translate(-50%, -46%) scale(.94); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.result-badge.fade { animation: badgeFade .45s ease forwards; }
@keyframes badgeFade { to { opacity: 0; transform: translate(-50%, -54%) scale(.98); } }

.result-badge.win  { color: #d8f4e5; border-color: rgba(111,190,148,.56); }
.result-badge.lose { color: #f3d8d5; border-color: rgba(201,112,104,.5); }
.result-badge.push { color: var(--cream); }
.result-badge.bj {
  color: var(--gold-bright);
  border-color: rgba(226,194,109,.68);
}
html[lang="tr"] .result-badge.lose {
  font-size: clamp(19px, 3vw, 36px);
  letter-spacing: 1.5px;
}

/* ----------------------- Center ----------------------- */
.table-center {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2vh, 12px);
  min-height: clamp(44px, 7.5vh, 82px);   /* reserve space so long banners don't resize the felt */
  pointer-events: none;
}
.arc-text {
  font-family: var(--font-display);
  font-size: clamp(9px, 1.3vw, 13px);
  letter-spacing: clamp(1px, .25vw, 3px);
  color: rgba(244, 226, 166, .55);
  text-transform: uppercase;
}
/* Used cards enter a separate acrylic discard tray, never the live shoe. */
.discard-tray {
  --discard-depth: 0px;
  position: absolute;
  top: clamp(38px, 14%, 88px);
  left: clamp(58px, 12%, 132px);
  width: 52px;
  height: 70px;
  z-index: 4;
  pointer-events: none;
  transform: perspective(180px) rotateX(-4deg) rotateZ(6deg);
  border: 1px solid rgba(224,231,226,.32);
  border-top-color: rgba(255,255,255,.5);
  border-radius: 5px 5px 9px 9px;
  background: linear-gradient(145deg, rgba(225,238,231,.13), rgba(5,12,9,.28));
  box-shadow: 0 10px 17px rgba(0,0,0,.45), inset 2px 1px rgba(255,255,255,.12);
}
.discard-tray::before,
.discard-tray::after {
  content: "";
  position: absolute;
  z-index: 3;
  bottom: -3px;
  width: 7px;
  height: 43px;
  border-radius: 2px;
  border: 1px solid rgba(231,238,234,.24);
  background: rgba(7,13,10,.28);
}
.discard-tray::before { left: -4px; }
.discard-tray::after { right: -4px; }
.discard-stack {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 7px;
  height: 53px;
  opacity: 0;
  transform: translateY(calc(8px - var(--discard-depth)));
  transition: opacity .25s ease, transform .35s ease;
}
.discard-tray.has-cards .discard-stack { opacity: 1; }
.discard-stack span {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  border: 1px solid rgba(244,239,226,.72);
  background:
    linear-gradient(45deg, rgba(255,255,255,.07) 25%, transparent 25% 75%, rgba(255,255,255,.07) 75%) 0 0 / 6px 6px,
    var(--shoe-card-back);
  box-shadow: 0 1px 2px rgba(0,0,0,.42);
}
.discard-stack span:nth-child(1) { transform: translate(-2px, 3px) rotate(-1deg); }
.discard-stack span:nth-child(2) { transform: translate(2px, 1px) rotate(.7deg); }
.discard-stack span:nth-child(3) { transform: translate(-1px, -1px) rotate(-.4deg); }
.discard-stack span:nth-child(4) { transform: translate(1px, -3px) rotate(.25deg); }
.discard-count,
.shoe-count {
  position: absolute;
  z-index: 5;
  min-width: 20px;
  padding: 2px 5px;
  border-radius: 8px;
  background: rgba(2,7,5,.78);
  border: 1px solid rgba(226,194,109,.34);
  color: rgba(244,239,226,.78);
  font: 600 8px/1 var(--font-ui);
  letter-spacing: .3px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.discard-count { left: 50%; bottom: -12px; transform: translateX(-50%); }
.discard-tray.returning .discard-stack { animation: returnDiscard .62s ease both; }
@keyframes returnDiscard {
  55% { opacity: 1; transform: translate(105px, -18px) rotate(-6deg) scale(.78); }
  100% { opacity: 0; transform: translate(230px, -4px) rotate(-9deg) scale(.5); }
}

/* The dealing shoe sits in the felt's top-right corner (where cards deal from). */
.shoe {
  --shoe-depletion: 0px;
  position: absolute;
  top: clamp(38px, 14%, 88px);
  right: clamp(110px, 23%, 245px);
  width: 58px; height: 72px;
  border-radius: 7px 7px 10px 10px;
  background:
    linear-gradient(105deg, rgba(255,255,255,.12), transparent 24% 68%, rgba(255,255,255,.04)),
    linear-gradient(160deg, rgba(28,31,30,.96), rgba(7,9,8,.98));
  border: 1px solid rgba(209,178,98,.44);
  border-bottom-width: 4px;
  box-shadow:
    0 11px 18px rgba(0,0,0,.58),
    inset 2px 1px 2px rgba(255,255,255,.1),
    inset -3px -4px 7px rgba(0,0,0,.6);
  transform: perspective(180px) rotateX(-4deg) rotateZ(-7deg);
  z-index: 4;
  isolation: isolate;
  pointer-events: none;
}
.shoe::before {
  content: "";
  position: absolute;
  left: 5px; right: 5px; top: -5px;
  height: 13px;
  border-radius: 6px 6px 2px 2px;
  border: 1px solid rgba(229,203,139,.34);
  background: linear-gradient(180deg, #282a29, #090b0a 72%);
  box-shadow: 0 2px 3px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.1);
  z-index: 0;
}
.shoe::after {
  content: "";
  position: absolute;
  left: -1px; right: -1px; bottom: -1px;
  height: 29px;
  clip-path: polygon(0 34%, 100% 2%, 100% 100%, 0 100%);
  border-radius: 0 0 8px 8px;
  background: linear-gradient(155deg, rgba(40,43,41,.96), #080a09 72%);
  box-shadow: inset 0 1px rgba(255,255,255,.13);
  z-index: 2;
}
.shoe-cards {
  position: absolute;
  left: 8px; top: 7px; right: calc(8px + var(--shoe-depletion)); bottom: 13px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.72) 0 1px, rgba(183,177,163,.72) 1px 2px),
    #d8d2c5;
  box-shadow: inset 0 0 0 1px rgba(54,39,25,.4), 0 2px 3px rgba(0,0,0,.38);
  overflow: hidden;
  z-index: 1;
  transition: right .3s ease;
}
.shoe-cards::before {
  content: "♠";
  position: absolute;
  inset: 2px 2px 8px;
  display: grid;
  place-items: center;
  border: 2px solid #eee6d2;
  border-radius: 2px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 3px, transparent 3px 6px),
    var(--shoe-card-back);
  color: rgba(241,214,143,.82);
  font-size: 17px;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.cut-card {
  position: absolute;
  z-index: 2;
  top: 3px;
  bottom: 8px;
  right: 5px;
  width: 4px;
  border-radius: 1px;
  background: #df6940;
  box-shadow: -1px 0 rgba(255,220,183,.45), 1px 0 rgba(63,15,6,.42);
  opacity: 0;
  transition: opacity .2s ease, transform .3s ease;
}
.shoe.cut-near .cut-card { opacity: 1; transform: translateX(-3px); }
.shoe-count { right: 4px; bottom: -13px; }
.shoe.shuffling { animation: shoeShuffle .58s ease both; }
@keyframes shoeShuffle {
  0%, 100% { margin-right: 0; }
  25% { margin-right: -3px; }
  50% { margin-right: 3px; }
  75% { margin-right: -2px; }
}
.shoe-mouth {
  position: absolute;
  left: 3px;
  right: 9px;
  bottom: 7px;
  height: 15px;
  z-index: 3;
  overflow: hidden;
  border: 1px solid rgba(216,188,119,.2);
  border-radius: 3px 3px 6px 6px;
  transform: skewY(-4deg);
  background: linear-gradient(180deg, #010202 0 42%, #171a18 48% 100%);
  box-shadow:
    inset 0 4px 5px rgba(0,0,0,.92),
    inset 0 -1px rgba(255,255,255,.1),
    0 1px 2px rgba(0,0,0,.6);
}
.shoe-mouth::after {
  content: "";
  position: absolute;
  left: 8px;
  right: -5px;
  top: 4px;
  height: 8px;
  border: 1px solid rgba(242,235,219,.72);
  border-radius: 2px;
  background:
    linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25% 75%, rgba(255,255,255,.08) 75%) 0 0 / 6px 6px,
    var(--shoe-mouth-card);
  box-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.banner {
  pointer-events: none;
  padding: 10px 26px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .42);
  border: 1px solid rgba(217, 182, 95, .35);
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 1.2px;
  font-size: clamp(11px, 1.45vw, 14px);
  text-transform: uppercase;
  color: var(--gold-bright);
  min-height: 20px;
  transition: .25s;
  max-width: 90%;
}
.banner.flash-win { background: rgba(33, 110, 70, .55); border-color: var(--good); color: #d6ffe9; }
.banner.flash-lose { background: rgba(120, 30, 26, .5); border-color: var(--bad); color: #ffd9d6; }

/* Quiet engraved table plate: limits, shoe size and dealer rule remain visible. */
.table-specs {
  position: absolute;
  left: clamp(68px, 9%, 96px);
  bottom: clamp(88px, 13%, 104px);
  z-index: 2;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(205,169,82,.46);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(18,24,20,.78), rgba(5,10,8,.78));
  box-shadow: 0 5px 12px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.05);
  pointer-events: none;
}
.table-spec {
  min-width: 62px;
  padding: 6px 10px 7px;
  text-align: left;
}
.table-spec + .table-spec { border-left: 1px solid rgba(205,169,82,.24); }
.table-spec small,
.table-spec strong { display: block; white-space: nowrap; }
.table-spec small {
  margin-bottom: 2px;
  color: rgba(226,194,109,.58);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1.2px;
}
.table-spec strong {
  color: rgba(244,239,226,.84);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .55px;
  font-variant-numeric: tabular-nums;
}
.table-profile-spec strong { color: rgba(232,202,125,.95); }
/* Split hands need the whole lower felt; the plaque returns with the next round
   and the full rules stay in settings. */
.table-specs { transition: opacity .25s ease, visibility .25s; }
body[data-hands="2"] .table-specs,
body[data-hands="3"] .table-specs,
body[data-hands="4"] .table-specs { opacity: 0; visibility: hidden; }

/* ----------------------- Bet spot ----------------------- */
.bet-spot {
  position: absolute;
  bottom: clamp(8px, 1.8vh, 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.bet-circle {
  width: clamp(74px, 11vh, 94px); height: clamp(74px, 11vh, 94px);
  border-radius: 50%;
  border: 1px solid rgba(226, 194, 109, .58);
  display: grid;
  place-items: center;
  position: relative;
  background:
    radial-gradient(circle at 48% 42%, rgba(255,255,255,.025), transparent 55%),
    radial-gradient(circle, rgba(0,0,0,.22), rgba(0,0,0,.04) 68%, rgba(0,0,0,.28));
  box-shadow:
    inset 0 0 0 4px rgba(4,33,22,.32),
    0 1px 0 rgba(255,239,192,.08);
}
.bet-circle::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(226,194,109,.44);
  pointer-events: none;
}
.bet-circle-label {
  position: absolute; top: 12%; left: 0; right: 0;
  text-align: center;
  font-size: 9px; letter-spacing: 3px;
  color: rgba(244, 226, 166, .55);
}
/* Player total is shown on the per-hand tag; the chip element stays in the DOM only for logic */
#playerScore { display: none; }
/* The bet amount sits at the foot of the circle so chips can pile in the middle */
.bet-circle-value {
  position: absolute; bottom: 11%; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  z-index: 5;
}
/* Placed bet = complete vector cylinders stacked with deterministic offsets.
   Each chip owns its curved wall and perspective face, so mixed piles keep
   their physical layers without the rectangular/banded look of CSS blocks. */
.bet-stack {
  --stack-w: clamp(44px, 6.2vh, 56px);
  --stack-t: clamp(6px, .85vh, 8px);
  --stack-face: clamp(20px, 2.85vh, 26px);
  position: absolute;
  bottom: 32%;                 /* chips pile up out of the betting circle */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 8px 7px rgba(0, 0, 0, .5));
  isolation: isolate;
  pointer-events: none;
}
#betStack,
.bet-circle-value { transition: opacity .22s ease; }
body:not([data-phase="betting"]) #betStack,
body:not([data-phase="betting"]) .bet-circle-value { opacity: 0; }
.bet-stack.pile-medium {
  --stack-w: clamp(40px, 5.65vh, 51px);
  --stack-t: clamp(5px, .72vh, 7px);
  --stack-face: clamp(19px, 2.6vh, 24px);
}
.bet-stack.pile-dense {
  --stack-w: clamp(33px, 4.7vh, 42px);
  --stack-t: clamp(3px, .42vh, 4px);
  --stack-face: clamp(17px, 2vh, 19px);
}
.bet-stack .pile-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(3px, .5vw, 6px);
  min-height: 1px;
}
.bet-stack .pile-row + .pile-row {
  margin-top: -13px;
}
.bet-stack.pile-dense .pile-row + .pile-row {
  margin-top: calc(0px - var(--stack-face) - 9px);
}
.bet-stack .pile-row:first-child:not(:last-child) {
  transform: scale(.95);
  transform-origin: 50% 100%;
}
.bet-stack::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: -8px;
  height: 15px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.72), transparent 70%);
  transform: scaleY(.55);
  filter: blur(1.5px);
}
.bet-stack .chip-col {
  position: relative;
  z-index: 1;
  width: var(--stack-w);
  height: calc(var(--stack-face) + var(--stack-t));
  transform: translateY(var(--stack-nudge-y, 0)) rotate(var(--stack-turn, 0deg));
  transform-origin: 50% 100%;
}
.bet-stack .chip-col:only-child { --stack-turn: .4deg; }
.bet-stack .chip-col:nth-child(4n + 1):not(:only-child) { --stack-turn: -.72deg; --stack-nudge-y: 1px; }
.bet-stack .chip-col:nth-child(4n + 2) { --stack-turn: .58deg; --stack-nudge-y: -1px; }
.bet-stack .chip-col:nth-child(4n + 3) { --stack-turn: -.38deg; --stack-nudge-y: 1px; }
.bet-stack .chip-col:nth-child(4n) { --stack-turn: .3deg; --stack-nudge-y: 0; }
.bet-stack .chip-col.stack-count-2 { height: calc(var(--stack-face) + var(--stack-t) + var(--stack-t)); }
.bet-stack .chip-col.stack-count-3 { height: calc(var(--stack-face) + var(--stack-t) + var(--stack-t) + var(--stack-t)); }
.bet-stack .chip-col.stack-count-4 { height: calc(var(--stack-face) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t)); }
.bet-stack .chip-col.stack-count-5 { height: calc(var(--stack-face) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t)); }
.bet-stack .chip-col.stack-count-6 { height: calc(var(--stack-face) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t)); }
.bet-stack .chip-col.stack-count-7 { height: calc(var(--stack-face) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t)); }
.bet-stack .chip-col.stack-count-8 { height: calc(var(--stack-face) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t)); }
.bet-stack .stack-chip {
  --body: #23232b; --spot: #ececf2; --ring: #cbb069; --inlay: #30303a;
  --w: var(--stack-w);
  --t: var(--stack-t);
  --stack-shift: 0px;
  --stack-chip-turn: 0deg;
  position: absolute;
  left: calc(50% + var(--stack-shift));
  bottom: 0;
  width: var(--w);
  height: calc(var(--stack-face) + var(--stack-t));
  transform: translateX(-50%) rotate(var(--stack-chip-turn));
  transform-origin: 50% 72%;
  pointer-events: none;
}
.bet-stack .stack-level-1 { bottom: var(--stack-t); }
.bet-stack .stack-level-2 { bottom: calc(var(--stack-t) + var(--stack-t)); }
.bet-stack .stack-level-3 { bottom: calc(var(--stack-t) + var(--stack-t) + var(--stack-t)); }
.bet-stack .stack-level-4 { bottom: calc(var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t)); }
.bet-stack .stack-level-5 { bottom: calc(var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t)); }
.bet-stack .stack-level-6 { bottom: calc(var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t)); }
.bet-stack .stack-level-7 { bottom: calc(var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t) + var(--stack-t)); }
.bet-stack.payout-stack {
  --stack-w: clamp(38px, 5.3vh, 48px);
  --stack-t: clamp(5px, .68vh, 7px);
  --stack-face: clamp(18px, 2.45vh, 22px);
  z-index: 7;
  opacity: 0;
  transform: translateX(-50%) translateY(-165px) scale(.62);
}
.bet-stack.payout-stack:empty { display: none; }
.bet-stack.payout-stack.arriving {
  animation: payoutArrive .68s cubic-bezier(.18,.76,.22,1) both;
}
@keyframes payoutArrive {
  0% { opacity: 0; transform: translateX(-50%) translateY(-165px) scale(.62); }
  18% { opacity: 1; }
  76% { transform: translateX(calc(-50% + 28px)) translateY(-12px) scale(1); }
  100% { opacity: 1; transform: translateX(calc(-50% + 22px)) translateY(-3px) scale(.92); }
}
.bet-stack.payout-stack.to-player {
  animation: payoutToPlayer .67s cubic-bezier(.22,.7,.3,1) both;
}
@keyframes payoutToPlayer {
  0% { opacity: 1; transform: translateX(calc(-50% + 22px)) translateY(-3px) scale(.92); }
  100% { opacity: 0; transform: translateX(calc(-50% + 18px)) translateY(120px) scale(.98); }
}
.stack-chip-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  shape-rendering: geometricPrecision;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.34));
}
.stack-chip.cap .stack-chip-art { filter: drop-shadow(0 2px 1.5px rgba(0,0,0,.38)); }
.stack-svg-side {
  fill: var(--body);
  stroke: rgba(0,0,0,.58);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.stack-svg-side-spot { fill: var(--spot); }
.stack-svg-side-spot.spot-b { fill: var(--spot-alt, var(--spot)); }
.stack-svg-side-shade { fill: rgba(0,0,0,.24); }
.stack-svg-side-glint {
  fill: none;
  stroke: rgba(255,255,255,.18);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.stack-svg-bottom-rim {
  fill: none;
  stroke: rgba(0,0,0,.62);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.stack-svg-top {
  fill: var(--body);
  stroke: rgba(0,0,0,.56);
  stroke-width: 1.8;
}
.stack-svg-spots {
  fill: none;
  stroke-width: 17;
  stroke-dasharray: 6.25 18.75;
}
.stack-svg-spots.spot-a { stroke: var(--spot); }
.stack-svg-spots.spot-b { stroke: var(--spot-alt, var(--spot)); stroke-dashoffset: -12.5; }
.stack-svg-body-ring {
  fill: var(--body);
  stroke: rgba(0,0,0,.22);
  stroke-width: 1;
}
.stack-svg-groove { fill: var(--ring); }
.stack-svg-inlay {
  fill: var(--inlay);
  stroke: rgba(255,255,255,.16);
  stroke-width: .8;
}
.stack-svg-innerline {
  fill: none;
  stroke: rgba(0,0,0,.34);
  stroke-width: 1;
}
.stack-svg-face-shade { fill: rgba(0,0,0,.14); }
.stack-svg-face-shine { fill: rgba(255,255,255,.11); }
.stack-svg-value { font-size: 20px; letter-spacing: -.15px; }

/* Shared anti-aliased vector anatomy for the circular tray chips. */
.chip-art,
.stack-chip-art {
  shape-rendering: geometricPrecision;
}
.chip-svg-base {
  fill: var(--body);
  stroke: rgba(0,0,0,.48);
  stroke-width: 1.5;
}
.chip-svg-spots {
  fill: none;
  stroke-width: 17;
  stroke-dasharray: 15.32 45.94;
  transform: rotate(-7.5deg);
  transform-origin: 50% 50%;
}
.chip-svg-spots.spot-a { stroke: var(--spot); }
.chip-svg-spots.spot-b {
  stroke: var(--spot-alt, var(--spot));
  stroke-dashoffset: -30.63;
}
.chip-svg-body-ring {
  fill: var(--body);
  stroke: rgba(0,0,0,.2);
  stroke-width: 1;
}
.chip-svg-groove { fill: var(--ringline, var(--ring)); }
.chip-svg-inlay {
  fill: var(--inlay);
  stroke: rgba(255,255,255,.16);
  stroke-width: .8;
}
.chip-svg-innerline {
  fill: none;
  stroke: rgba(0,0,0,.32);
  stroke-width: 1;
}
.chip-svg-shade { fill: rgba(0,0,0,.11); }
.chip-svg-shine { fill: rgba(255,255,255,.13); }
.chip-svg-value {
  fill: var(--ink, #f4efe2);
  stroke: rgba(0,0,0,.26);
  stroke-width: .8;
  paint-order: stroke fill;
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .15px;
}
/* Settled wagers are pushed to the player without arcade-like scaling or glow. */
.bet-stack.to-player { animation: toPlayer .72s cubic-bezier(.22, .7, .3, 1) forwards; }
@keyframes toPlayer {
  0%   { transform: translateX(-50%) scale(1); }
  22%  { transform: translateX(-50%) translateY(-4px) scale(1.02); }
  100% { transform: translateX(-50%) translateY(120px) scale(1); opacity: 0; }
}
/* Loss: chips are swept up to the dealer */
.bet-stack.to-dealer { animation: toDealer .58s cubic-bezier(.5, 0, .75, .4) forwards; }
@keyframes toDealer {
  100% { transform: translateX(-50%) translateY(-230px) scale(.66); opacity: 0; }
}
/* Kept for legacy states; real pushes now use the same physical return path. */
.bet-stack.to-push { animation: toPlayer .72s cubic-bezier(.22, .7, .3, 1) forwards; }

/* Balance pill pulses gold when a win is paid */
.balance-pill.win-flash { animation: balanceFlash .8s ease; }
@keyframes balanceFlash {
  0%, 100% { box-shadow: none; }
  35%      { box-shadow: 0 0 0 1px rgba(226,194,109,.68), 0 5px 16px rgba(0,0,0,.28); }
}

/* ----------------------- Strategy coach ----------------------- */
/* Hints mode marks the basic-strategy play with a quiet brass ring and dot. */
.btn.coach-pick:not(:disabled) {
  position: relative;
  box-shadow: 0 0 0 2px var(--gold-bright), 0 0 14px rgba(226, 194, 109, .35);
}
.btn.coach-pick:not(:disabled)::after {
  content: "";
  position: absolute;
  top: 5px; right: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-bright);
}
.toast.coach { border-color: var(--gold-bright); color: var(--cream); }
.coach-seg .seg-btn { padding-inline: 11px; font-size: 12px; }

/* ----------------------- Insurance prompt ----------------------- */
/* The offer covers the (inactive) controls instead of the felt, so the player
   can still read both hands while deciding. It is anchored to the bottom of
   the controls box and never changes its size, so the table does not reflow. */
.ins-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  min-height: 100%;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .25s ease both;
}
.ins-overlay[hidden] { display: none; }
/* Not visibility: .btn transitions "all", so visibility would return a frame
   late and swallow the first click after the offer closes. */
body[data-phase="insurance"] .controls > :not(.ins-overlay) { opacity: 0; pointer-events: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.ins-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 24px;
  width: min(640px, 100%);
  text-align: left;
  padding: 14px 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--surface-top), var(--surface-bottom));
  border: 1px solid rgba(217, 182, 95, .45);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255,255,255,.04);
  animation: insRise .35s cubic-bezier(.2, .8, .25, 1) both;
}
.ins-panel > :not(.ins-actions) { grid-column: 1; }
.ins-panel > .ins-actions { grid-column: 2; grid-row: 1 / span 3; }
@keyframes insRise { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.ins-line {
  font-size: 10px; letter-spacing: 5px; color: rgba(244, 226, 166, .55);
  margin-bottom: 4px;
}
.ins-panel h3 {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: 1px; color: var(--gold-bright); margin-bottom: 4px;
}
.ins-panel p { font-size: 13px; color: rgba(244, 239, 226, .75); line-height: 1.45; }
.ins-actions { display: flex; gap: 12px; justify-content: center; }

/* ----------------------- Controls ----------------------- */
.controls {
  position: relative;
  width: min(1080px, 100%);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vh, 16px);
}

.chips-tray {
  display: flex;
  gap: clamp(8px, 1.4vw, 16px);
  flex-wrap: wrap;
  justify-content: center;
  padding: clamp(8px, 1.4vh, 14px) clamp(12px, 2vw, 22px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 36%),
    linear-gradient(180deg, var(--tray-top), var(--tray-bottom));
  border: 1px solid rgba(217,182,95,.25);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -8px 16px rgba(0,0,0,.24),
    0 12px 25px rgba(0,0,0,.24);
}

/* Realistic clay casino chip: solid body, 8 edge spots, centre inlay, bevel.
   Per-denomination colours are set via the variables below. */
.chip {
  --size: clamp(46px, min(7vw, 8vh), 66px);
  --body: #23232b;
  --spot: #ececf2;
  --spot-alt: var(--spot);
  --inlay: #30303a;
  --ringline: #cbb069;
  --ink: #f4efe2;
  --edge: #101015;
  --edge-dark: #050507;
  --chip-turn: 0deg;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.42);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  background: var(--body);
  box-shadow:
    0 6px 0 var(--edge),
    0 7px 0 var(--edge-dark),
    0 12px 18px rgba(0,0,0,.48);
  color: var(--ink);
  font-weight: 800;
  transform: rotate(var(--chip-turn));
  transition: transform .14s ease, box-shadow .14s ease;
  display: grid;
  place-items: center;
}
.chip-art {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
.chip::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  opacity: .72;
  background:
    radial-gradient(ellipse 72% 52% at 38% 18%, rgba(255,255,255,.15), transparent 62%),
    radial-gradient(ellipse 78% 54% at 56% 96%, rgba(0,0,0,.16), transparent 68%);
  mix-blend-mode: soft-light;
}
.chip::after {            /* crisp thin outer edge ring framing the spots */
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  z-index: 2;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.11),
    inset 0 -5px 8px rgba(0,0,0,.13);
  pointer-events: none;
}
.chip .denom {
  position: relative;
  z-index: 3;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: calc(var(--size) * .235);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .05px;
  text-shadow: 0 1px 1px rgba(0,0,0,.42), 0 -1px rgba(255,255,255,.1);
}
.chip:hover {
  transform: translateY(-7px) rotate(var(--chip-turn));
  box-shadow:
    0 6px 0 var(--edge),
    0 7px 0 var(--edge-dark),
    0 20px 26px rgba(0,0,0,.55);
}
.chip:active { transform: translateY(-1px) rotate(var(--chip-turn)) scale(.96); }
.chip:disabled { opacity: .32; cursor: not-allowed; transform: rotate(var(--chip-turn)); filter: saturate(.6); }
.chip:nth-child(1) { --chip-turn: -4deg; }
.chip:nth-child(2) { --chip-turn: 2.5deg; }
.chip:nth-child(3) { --chip-turn: -1.5deg; }
.chip:nth-child(4) { --chip-turn: 3.5deg; }
.chip:nth-child(5) { --chip-turn: -2.5deg; }
.chip:nth-child(6) { --chip-turn: 1.5deg; }

/* ---- Per-denomination colours — casino convention; mirrored in CHIP_COLORS (game.js) ----
   body=clay · spot=edge blocks · inlay=matte centre · ringline=groove · ink=value · edge*=side */
.chip-100  { --body:#23232b; --spot:#ececf2; --inlay:#30303a; --ringline:#cbb069; --ink:#f4efe2; --edge:#0d0d11; --edge-dark:#040406; }  /* black / white   */
.chip-500  { --body:#5e2a90; --spot:#f0cf63; --inlay:#6e36a6; --ringline:#f0dca8; --ink:#fbf4ff; --edge:#3a1a5c; --edge-dark:#260f3e; }  /* purple / gold   */
.chip-1k   { --body:#c9a23a; --spot:#2a1510; --inlay:#ddb24e; --ringline:#5a3a10; --ink:#2a1c04; --edge:#8a6c1c; --edge-dark:#5e4910; }  /* gold / dark     */
.chip-5k   { --body:#1a4775; --spot:#edf4f8; --spot-alt:#78b8d8; --inlay:#245987; --ringline:#c2d4df; --ink:#f8fbfd; --edge:#0d3152; --edge-dark:#071d31; } /* sapphire / ice */
.chip-25k  { --body:#0d674a; --spot:#ecd28a; --spot-alt:#f4efe1; --inlay:#176e53; --ringline:#e0c36d; --ink:#fff4cb; --edge:#064735; --edge-dark:#032b21; } /* emerald / champagne */
/* ALL-IN: deep-bordo royal chip with a metallic gold + cream edge (its own visual language) */
.chip-allin {
  --body:#6f1622; --spot:#f4d77a; --spot-alt:#f7ecc0; --inlay:#8a1f2c; --ringline:#f4e2a6; --ink:#fff4cf;
  --edge:#440d15; --edge-dark:#2c080d;
}
/* Two compact lines keep the royal label inside the centre inlay at every size. */
.chip-allin .denom {
  width: 42%;
  height: 42%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: clamp(7.5px, calc(var(--size) * .145), 9.5px);
  line-height: .82;
  letter-spacing: .55px;
  white-space: normal;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.chip-allin .denom span { display: block; }

.action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.action-sep {
  width: 1px; height: 30px;
  background: rgba(217,182,95,.25);
  margin: 0 4px;
}

.btn {
  font-family: var(--font-ui);
  font-size: clamp(12px, 1.5vh, 14px);
  font-weight: 700;
  letter-spacing: .5px;
  padding: clamp(8px, 1.4vh, 12px) clamp(14px, 1.8vw, 22px);
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: .16s;
  white-space: nowrap;
}
.btn:disabled { opacity: .32; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-soft));
  color: #2a1d05;
  box-shadow: 0 6px 16px rgba(217,182,95,.35);
}
.btn-primary:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(217,182,95,.45); }
.btn-ghost {
  background: rgba(255,255,255,.05);
  border-color: rgba(217,182,95,.3);
  color: var(--cream);
}
.btn-ghost:not(:disabled):hover { background: rgba(217,182,95,.16); }
.btn-action {
  background: linear-gradient(180deg, var(--action-top), var(--action-bottom));
  border-color: rgba(217,182,95,.4);
  color: var(--gold-bright);
  min-width: 92px;
}
.btn-action:not(:disabled):hover { transform: translateY(-2px); border-color: var(--gold); background: linear-gradient(180deg, var(--action-hover-top), var(--action-hover-bottom)); }
.btn-small { padding: 8px 16px; font-size: 13px; }

/* ----------------------- Modal ----------------------- */
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2, 8, 5, .7); backdrop-filter: blur(4px); }
.modal-card {
  position: relative;
  width: min(480px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--modal-top), var(--modal-bottom));
  border: 1px solid var(--panel-line);
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(0,0,0,.6);
  scrollbar-width: thin;
  scrollbar-color: rgba(217,182,95,.62) rgba(0,0,0,.22);
}
.modal-card::-webkit-scrollbar { width: 7px; }
.modal-card::-webkit-scrollbar-track { background: rgba(0,0,0,.22); border-radius: 0 18px 18px 0; }
.modal-card::-webkit-scrollbar-thumb { background: rgba(217,182,95,.62); border-radius: 999px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--panel-line);
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--modal-top);
  backdrop-filter: blur(8px);
}
.modal-head h2 { font-family: var(--font-display); letter-spacing: 1.5px; color: var(--gold-bright); font-size: 20px; }
.modal-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.setting-row > label,
.setting-row > .setting-label { font-size: 14px; color: rgba(244,239,226,.85); }

.theme-setting { display: flex; flex-direction: column; gap: 9px; }
.setting-section-label { font-size: 14px; color: rgba(244,239,226,.85); }
.theme-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.theme-option {
  --preview-felt-top: #207653;
  --preview-felt-bottom: #0c3d2a;
  --preview-card-top: #982c34;
  --preview-card-bottom: #4b0d14;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: stretch;
  padding: 6px 6px 8px;
  border: 1px solid rgba(217,182,95,.22);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  color: rgba(244,239,226,.7);
  cursor: pointer;
  font-family: var(--font-ui);
  transition: border-color .18s ease, background .18s ease, transform .18s ease, color .18s ease;
}
.theme-option:hover {
  transform: translateY(-1px);
  border-color: rgba(217,182,95,.48);
  background: rgba(255,255,255,.065);
  color: var(--cream);
}
.theme-option.active {
  border-color: var(--gold);
  background: rgba(217,182,95,.11);
  color: var(--gold-bright);
  box-shadow: inset 0 0 0 1px rgba(244,226,166,.08), 0 4px 14px rgba(0,0,0,.2);
}
.theme-preview {
  position: relative;
  display: block;
  width: 100%;
  height: 48px;
  overflow: hidden;
  border-radius: 8px;
  background:
    repeating-linear-gradient(5deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    radial-gradient(110% 100% at 45% 0%, var(--preview-felt-top), var(--preview-felt-bottom) 72%);
  box-shadow: inset 0 0 17px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.06);
}
.theme-preview::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: -9px;
  height: 17px;
  border-top: 2px solid rgba(228,191,98,.72);
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, #543718, #211309);
  box-shadow: 0 -2px 6px rgba(0,0,0,.28);
}
.theme-preview::after {
  content: "♠";
  position: absolute;
  right: 10%;
  top: 5px;
  width: 24px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px double #efe5c9;
  border-radius: 3px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 3px, transparent 3px 6px),
    linear-gradient(145deg, var(--preview-card-top), var(--preview-card-bottom));
  color: #efd683;
  font-family: Georgia, serif;
  font-size: 13px;
  text-shadow: 0 1px 2px #000;
  box-shadow: 0 4px 7px rgba(0,0,0,.45);
  transform: rotate(5deg);
}
.theme-option[data-set-theme="midnight"] {
  --preview-felt-top: #2b6288;
  --preview-felt-bottom: #0b2b47;
  --preview-card-top: #465ea8;
  --preview-card-bottom: #111b46;
}
.theme-option[data-set-theme="bordeaux"] {
  --preview-felt-top: #8e3a49;
  --preview-felt-bottom: #3e111c;
  --preview-card-top: #555147;
  --preview-card-bottom: #0c0f0d;
}
.theme-name {
  min-height: 26px;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
}

.rule-profile-setting {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 14px;
  border-top: 1px solid var(--panel-line);
}
.rule-profile-picker {
  display: grid;
  gap: 7px;
}
.rule-profile {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid rgba(217,182,95,.2);
  border-radius: 8px;
  background: rgba(255,255,255,.028);
  color: rgba(244,239,226,.72);
  text-align: left;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.rule-profile:hover:not(:disabled) {
  border-color: rgba(217,182,95,.48);
  background: rgba(255,255,255,.055);
  color: var(--cream);
}
.rule-profile.active {
  border-color: rgba(217,182,95,.78);
  background: rgba(217,182,95,.09);
  color: var(--gold-bright);
  box-shadow: inset 3px 0 0 var(--gold-soft);
}
.rule-profile:disabled { opacity: .4; cursor: not-allowed; }
.rule-profile-code {
  flex: 0 0 34px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(217,182,95,.34);
  border-radius: 4px;
  background: rgba(0,0,0,.26);
  color: var(--gold-bright);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}
.rule-profile-copy { min-width: 0; display: grid; gap: 3px; }
.rule-profile-copy strong { font-size: 12px; font-weight: 600; letter-spacing: .35px; }
.rule-profile-copy small { color: rgba(244,239,226,.5); font-size: 10px; line-height: 1.35; }
.rule-profile.active .rule-profile-copy small { color: rgba(244,239,226,.68); }
.active-rules {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-left: 2px solid rgba(217,182,95,.48);
  background: rgba(0,0,0,.16);
}
.active-rules > span {
  color: rgba(217,182,95,.66);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.active-rules strong {
  color: rgba(244,239,226,.72);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.45;
}

.animation-seg .seg-btn { padding-inline: 11px; font-size: 12px; }

.seg { display: flex; border: 1px solid var(--panel-line); border-radius: 10px; overflow: hidden; }
.seg-btn {
  background: transparent; border: none; color: rgba(244,239,226,.6);
  padding: 8px 14px; cursor: pointer; font-size: 13px; font-weight: 600; transition: .16s;
}
.seg-btn:hover { color: var(--cream); }
.seg-btn.active { background: linear-gradient(180deg, var(--gold), var(--gold-soft)); color: #2a1d05; }
.seg-btn:disabled { opacity: .38; cursor: not-allowed; }

.switch { position: relative; width: 48px; height: 26px; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(255,255,255,.15); border-radius: 999px; transition: .2s;
}
.slider::before {
  content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px;
  background: var(--cream); border-radius: 50%; transition: .2s;
}
.switch input:checked + .slider { background: var(--gold-soft); }
.switch input:checked + .slider::before { transform: translateX(22px); }
.switch input:disabled + .slider { opacity: .38; cursor: not-allowed; }
.switch input:focus-visible + .slider { outline: 3px solid var(--gold-bright); outline-offset: 3px; }

.sound-settings {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-top: 14px;
  border-top: 1px solid var(--panel-line);
}
.audio-mixer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  padding: 12px 14px;
  border: 1px solid rgba(217,182,95,.18);
  border-radius: 12px;
  background: rgba(0,0,0,.2);
  transition: opacity .2s ease;
}
.audio-mixer.muted { opacity: .52; }
.volume-control {
  min-width: 0;
  display: grid;
  gap: 7px;
  cursor: pointer;
}
.volume-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgba(244,239,226,.72);
  font-size: 11px;
  line-height: 1.2;
}
.volume-head output {
  flex: 0 0 auto;
  color: var(--gold-bright);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.volume-slider {
  --fill: 100%;
  width: 100%;
  height: 16px;
  margin: 0;
  border: 0;
  outline-offset: 2px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.volume-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-soft) 0 var(--fill), rgba(255,255,255,.14) var(--fill) 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.volume-slider::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 2px solid var(--cream);
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--gold-soft);
  box-shadow: 0 2px 5px rgba(0,0,0,.45);
}
.volume-slider::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.volume-slider::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--gold-soft);
}
.volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid var(--cream);
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 2px 5px rgba(0,0,0,.45);
}

.settings-hint {
  margin-top: -8px;
  padding-left: 10px;
  border-left: 2px solid rgba(217, 182, 95, .45);
  color: rgba(244, 239, 226, .58);
  font-size: 12px;
  line-height: 1.45;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--panel-line);
}
.stats-grid h3 {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: 15px; letter-spacing: 1px; color: var(--gold-bright);
}
.stat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: 9px; background: rgba(0,0,0,.25);
  font-size: 13px;
}
.stat b { font-variant-numeric: tabular-nums; color: var(--gold-bright); }
/* Deposit / add-funds */
.deposit-field {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  padding: 4px 4px 4px 12px;
  background: rgba(0,0,0,.28);
}
.deposit-currency { color: var(--gold-bright); font-family: var(--font-display); font-size: 15px; }
.deposit-input {
  width: 96px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--cream);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
  -moz-appearance: textfield;
}
.deposit-input::-webkit-outer-spin-button,
.deposit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.deposit-input::placeholder { color: rgba(244,239,226,.35); }
.deposit-input:disabled { color: rgba(244,239,226,.42); cursor: not-allowed; }
.deposit-btn { padding: 7px 16px; font-size: 13px; }
.deposit-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: -6px;
}
.preset-btn {
  flex: 1 1 0;
  min-width: 64px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(217,182,95,.3);
  color: var(--gold-bright);
  border-radius: 9px;
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
  transition: .16s;
}
.preset-btn:not(:disabled):hover { background: rgba(217,182,95,.16); border-color: var(--gold); transform: translateY(-1px); }
.preset-btn:disabled { opacity: .42; cursor: not-allowed; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding-top: 6px; }

/* About: disclaimer, version, license and source link */
.about {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--panel-line);
}
.about h3 {
  font-family: var(--font-display);
  font-size: 15px; letter-spacing: 1px; color: var(--gold-bright);
}
.about p {
  color: rgba(244, 239, 226, .62);
  font-size: 12px;
  line-height: 1.5;
}
.about .about-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding-top: 2px;
  color: rgba(217, 182, 95, .78);
  font-size: 11px;
  letter-spacing: .3px;
}
.about-meta a { color: var(--gold-bright); text-underline-offset: 2px; }
.about-meta a:hover { color: var(--cream); }

/* ----------------------- Toast ----------------------- */
.toast {
  position: fixed;
  top: 84px; left: 50%;
  transform: translateX(-50%) translateY(-14px);
  z-index: 30;
  padding: 12px 26px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 18px; letter-spacing: 1px;
  background: rgba(0,0,0,.78);
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  opacity: 0;
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.toast[hidden] { display: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.win { border-color: var(--good); color: #d6ffe9; }
.toast.lose { border-color: var(--bad); color: #ffd9d6; }

/* Animation pace changes the physical table motion; hover feedback stays snappy. */
body[data-animation-speed="fast"] .dealer-line { transition-duration: .23s; }
body[data-animation-speed="fast"] .player-hand { transition-duration: .13s; }
body[data-animation-speed="fast"] .card-inner { transition-duration: .4s; }
body[data-animation-speed="fast"] .card.dealing,
body[data-animation-speed="fast"] .card.dealing::after { animation-duration: .36s; }
body[data-animation-speed="fast"] .card.collecting { animation-duration: .4s; }
body[data-animation-speed="fast"] .bet-stack.payout-stack.arriving { animation-duration: .36s; }
body[data-animation-speed="fast"] .bet-stack.payout-stack.to-player { animation-duration: .44s; }
body[data-animation-speed="fast"] .card-inner.revealing .card-face.front::before { animation-duration: .39s; animation-delay: .1s; }
body[data-animation-speed="fast"] .result-badge.show { animation-duration: .33s; }
body[data-animation-speed="fast"] .result-badge.fade { animation-duration: .29s; }
body[data-animation-speed="fast"] .bet-stack.to-player { animation-duration: .47s; }
body[data-animation-speed="fast"] .bet-stack.to-dealer { animation-duration: .38s; }
body[data-animation-speed="fast"] .bet-stack.to-push { animation-duration: .33s; }
body[data-animation-speed="fast"] .balance-pill.win-flash { animation-duration: .52s; }
body[data-animation-speed="fast"] .ins-overlay { animation-duration: .16s; }
body[data-animation-speed="fast"] .ins-panel { animation-duration: .23s; }

body[data-animation-speed="cinematic"] .dealer-line { transition-duration: .47s; }
body[data-animation-speed="cinematic"] .player-hand { transition-duration: .27s; }
body[data-animation-speed="cinematic"] .card-inner { transition-duration: .84s; }
body[data-animation-speed="cinematic"] .card.dealing,
body[data-animation-speed="cinematic"] .card.dealing::after { animation-duration: .76s; }
body[data-animation-speed="cinematic"] .card.collecting { animation-duration: .84s; }
body[data-animation-speed="cinematic"] .bet-stack.payout-stack.arriving { animation-duration: .76s; }
body[data-animation-speed="cinematic"] .bet-stack.payout-stack.to-player { animation-duration: .9s; }
body[data-animation-speed="cinematic"] .card-inner.revealing .card-face.front::before { animation-duration: .81s; animation-delay: .2s; }
body[data-animation-speed="cinematic"] .result-badge.show { animation-duration: .68s; }
body[data-animation-speed="cinematic"] .result-badge.fade { animation-duration: .61s; }
body[data-animation-speed="cinematic"] .bet-stack.to-player { animation-duration: .97s; }
body[data-animation-speed="cinematic"] .bet-stack.to-dealer { animation-duration: .78s; }
body[data-animation-speed="cinematic"] .bet-stack.to-push { animation-duration: .68s; }
body[data-animation-speed="cinematic"] .balance-pill.win-flash { animation-duration: 1.08s; }
body[data-animation-speed="cinematic"] .ins-overlay { animation-duration: .34s; }
body[data-animation-speed="cinematic"] .ins-panel { animation-duration: .47s; }

/* ----------------------- Responsive ----------------------- */
@media (max-width: 640px) {
  .subtitle { display: none; }
  .topbar { gap: 8px; padding-inline: 12px; }
  .topbar .lang-switch { display: none; }
  .topbar-actions { gap: 7px; }
  .brand { gap: 9px; min-width: 0; }
  .brand-mark svg { width: 38px; height: 38px; }
  .brand-text h1 { font-size: clamp(17px, 5vw, 21px); letter-spacing: 1.2px; }
  .balance-pill { min-width: 92px; padding: 5px 12px; }
  .table-felt { padding: clamp(12px, 2vh, 22px) 12px clamp(58px, 11vh, 82px); }
  .arc-text { display: none; }
  /* Curved felt text gets cramped on phones — keep the printed arcs, drop the labels. */
  .felt-print .print-label { display: none; }
  .shoe {
    display: block;
    top: clamp(30px, 13%, 54px);
    right: clamp(52px, 18%, 76px);
    transform: perspective(180px) rotateX(-4deg) rotateZ(-7deg) scale(.72);
    transform-origin: top right;
  }
  .discard-tray {
    top: clamp(30px, 13%, 54px);
    left: clamp(40px, 14%, 68px);
    transform: perspective(180px) rotateX(-4deg) rotateZ(6deg) scale(.72);
    transform-origin: top left;
  }
  .table-specs {
    left: 20px;
    bottom: 62px;
    transform: scale(.78);
    transform-origin: bottom left;
  }
  .btn { min-height: 44px; }
  .btn-action { min-width: 0; flex: 1 1 28%; }
  .action-sep { display: none; }
  .bet-spot { bottom: 8px; }
  .bet-circle { width: 72px; height: 72px; }
  .bet-stack.pile-medium {
    --stack-w: 34px;
    --stack-t: 5px;
    --stack-face: 18px;
  }
  .bet-stack.pile-dense {
    --stack-w: 32px;
    --stack-t: 3px;
    --stack-face: 15px;
  }
  .bet-stack.pile-dense .pile-row + .pile-row { margin-top: -18px; }
  .result-badge { font-size: clamp(20px, 7.5vw, 34px); }
  .ins-panel { grid-template-columns: 1fr; row-gap: 8px; text-align: center; padding: 10px 14px; }
  .ins-panel > .ins-actions { grid-column: 1; grid-row: auto; }
  .ins-line { display: none; }
  .ins-panel h3 { font-size: 19px; margin-bottom: 0; }
  .ins-panel p { font-size: 12px; }
  body[data-phase="betting"] .btn-action { display: none; }
  body:not([data-phase="betting"]) .btn-bet-control { display: none; }
  body:not([data-phase="betting"]) .chips-tray { display: none; }
  /* Once play starts, each hand owns the wager. Retire the staging circle and
     leave the lower felt clear for split-hand labels and the rules plaque. */
  body:not([data-phase="betting"]) .bet-spot {
    opacity: 0;
    visibility: hidden;
  }
  body:not([data-phase="betting"]) .table-specs { bottom: 18px; }
  .hand-count-3,
  .hand-count-4 { gap: 2px; }
  .hand-count-3 .player-hand,
  .hand-count-4 .player-hand { padding: 3px; gap: 2px; min-width: 0; }
  .hand-count-3 .card,
  .hand-count-4 .card { --w: 40px; }
  .hand-count-3 .hand .card:not(:first-child),
  .hand-count-4 .hand .card:not(:first-child) { margin-left: -34px; }
  .hand-count-3 .hand .card.double-card,
  .hand-count-4 .hand .card.double-card { margin-left: calc((var(--w) * -3 + 34px) / 2); }
  /* Narrow rows keep tags to two short lines: once settled, the net result
     takes the stake's place. */
  .hands-row.hand-count-3 .hand-tag:has(.htag-res) .htag-bet,
  .hands-row.hand-count-4 .hand-tag:has(.htag-res) .htag-bet { display: none; }
  .hands-row.hand-count-3 .hand-tag,
  .hands-row.hand-count-4 .hand-tag {
    grid-template-columns: auto;
    gap: 0;
    padding: 2px 4px;
    font-size: 9px;
    line-height: 1.05;
    letter-spacing: .3px;
  }
  .hand-count-3 .hand-footer,
  .hand-count-4 .hand-footer {
    min-height: 48px;
    flex-direction: column;
    gap: 0;
  }
  .hand-count-3 .hand-wager,
  .hand-count-4 .hand-wager {
    flex-basis: 26px;
    width: 42px;
    height: 26px;
  }
  .hand-count-3 .hand-wager .hand-bet-stack,
  .hand-count-3 .hand-wager .hand-payout-stack,
  .hand-count-4 .hand-wager .hand-bet-stack,
  .hand-count-4 .hand-wager .hand-payout-stack {
    --stack-w: 28px;
    --stack-t: 3px;
    --stack-face: 14px;
  }
  .hand-count-3 .hand-wager .pile-medium,
  .hand-count-4 .hand-wager .pile-medium {
    --stack-w: 22px;
    --stack-t: 2px;
    --stack-face: 12px;
  }
  .hand-count-3 .hand-wager .pile-dense,
  .hand-count-4 .hand-wager .pile-dense {
    --stack-w: 20px;
    --stack-t: 2px;
    --stack-face: 11px;
  }
  .hand-count-3 .hand-wager .pile-row,
  .hand-count-4 .hand-wager .pile-row { gap: 2px; }
}

/* Portrait tablets: a centred hand reaches the full plaque, so keep the two
   cells that matter during play; limits and shoe size remain in settings. */
@media (max-width: 900px) {
  .table-spec:nth-child(1),
  .table-spec:nth-child(3) { display: none; }
}

@media (max-width: 420px) {
  .topbar { padding: 7px 8px; }
  .brand-mark svg { width: 34px; height: 34px; }
  .brand-text h1 { font-size: 16px; }
  .balance-pill { min-width: 76px; padding: 5px 8px; }
  .balance-label { display: none; }
  .balance-value { font-size: 17px; }
  .icon-btn { width: 36px; height: 36px; }
  .modal-body { padding-inline: 16px; }
  .theme-picker { gap: 6px; }
  .theme-option { padding-inline: 5px; }
  .animation-setting, .coach-setting { align-items: stretch; flex-direction: column; gap: 8px; }
  .animation-seg, .coach-seg { width: 100%; }
  .animation-seg .seg-btn, .coach-seg .seg-btn { flex: 1 1 0; padding-inline: 6px; }
  .deposit-row { align-items: stretch; flex-direction: column; gap: 8px; }
  .deposit-field { width: 100%; }
  .deposit-input { flex: 1 1 auto; width: auto; min-width: 0; }
  .table-spec:nth-child(1),
  .table-spec:nth-child(3) { display: none; }
  .table-specs {
    left: 24px;
    bottom: 70px;
    transform: scale(.74);
  }
  /* The oval narrows at the bottom corners; during play the retired bet circle
     leaves the bottom centre free, which keeps the plaque inside the rail. */
  body:not([data-phase="betting"]) .table-specs {
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%) scale(.74);
    transform-origin: bottom center;
  }
  /* The brand already sits in the top bar; the discard tray needs this corner. */
  .dealer-plate-tag { display: none; }
  .hand-count-2 {
    width: 100%;
    gap: 4px;
  }
  .hand-count-2 .player-hand {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 2px;
  }
  .hand-count-2 .hand-footer { gap: 4px; }
  .hand-count-2 .hand-wager {
    flex-basis: 42px;
    width: 42px;
  }
  .hand-count-2 .hand-tag {
    gap: 4px;
    padding-inline: 5px;
    font-size: 10px;
    letter-spacing: .5px;
  }
}

@media (max-width: 350px) {
  #soundToggle { display: none; }
  .chips-tray { gap: 4px; padding: 7px 8px; }
  .chip { --size: 42px; }
  .hand-count-2 .hand .card.double-card {
    --double-lift: calc(var(--w) * .26);
    margin-left: calc((var(--w) * -3 + 20px) / 2);
  }
  .hand-count-3 .card,
  .hand-count-4 .card { --w: 34px; }
  .hand-count-3 .hand .card:not(:first-child),
  .hand-count-4 .hand .card:not(:first-child) { margin-left: -28px; }
  .hand-count-3 .hand .card.double-card,
  .hand-count-4 .hand .card.double-card { margin-left: calc((var(--w) * -3 + 28px) / 2); }
}

/* Short viewports (landscape phones, small laptops): trim further to avoid scroll */
@media (max-height: 620px) {
  .topbar { padding: 6px clamp(12px, 3vw, 28px); }
  .subtitle { display: none; }
  .arc-text { display: none; }
  .felt-print .print-label.sub { display: none; }   /* trim the third line on short screens */
  .dealer-line { display: none; }
  .table-felt {
    height: clamp(290px, 66vh, 430px);
    padding: clamp(10px, 2.4vh, 18px) clamp(16px, 4vw, 40px) clamp(60px, 12.5vh, 86px);
  }
  .bet-circle { width: clamp(60px, 10vh, 76px); height: clamp(60px, 10vh, 76px); }
  .hand, .hands-row { min-height: clamp(62px, 11vh, 110px); }
  .hands-row { min-height: clamp(82px, 14vh, 140px); }
  .table-center { min-height: clamp(38px, 7vh, 66px); }
  .player-hand .hand { min-height: clamp(58px, 10vh, 100px); }
  .card { --w: clamp(42px, min(8vw, 7vh), 72px); }
  .chip { --size: clamp(38px, min(6vw, 7vh), 52px); }
  .chips-tray { padding: clamp(6px, 1.2vh, 10px) clamp(10px, 2vw, 18px); }
  .btn { padding: clamp(6px, 1.2vh, 9px) clamp(12px, 1.6vw, 18px); font-size: clamp(11px, 1.4vh, 13px); }
}

/* Landscape keeps the controls in normal flow. At very short heights the page
   can scroll instead of clipping the table or painting buttons over its felt. */
@media (max-height: 450px) {
  body { height: auto; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; overflow-y: auto; }
  .table-wrap { flex: 1 0 auto; justify-content: flex-start; overflow: visible; gap: 8px; padding-block: 8px; }
  .table { flex: 0 0 auto; }
  .table-felt { height: calc(100vh - 130px); height: calc(100dvh - 130px); min-height: 210px; padding: 6px 16px; border-width: 6px; gap: 4px; }
  .dealer-plate { margin-bottom: 3px; padding: 2px 8px; gap: 6px; }
  .dealer-plate-name { font-size: 10px; }
  .dealer-plate-tag { font-size: 8px; letter-spacing: 1px; }
  .score-chip { font-size: 11px; padding: 1px 6px; }
  .hand, .hands-row, .player-hand .hand { min-height: 0; }
  .player-hand { padding: 2px 4px; gap: 3px; }
  .hand-footer { min-height: 30px; }
  .hand-tag { font-size: 10px; gap: 5px; padding: 2px 6px; }
  .table-center { position: absolute; left: 16px; top: 44%; width: 26%; min-height: 0; }
  .banner { font-size: 10px; letter-spacing: .4px; padding: 5px 7px; white-space: normal; }
  .felt-print .print-label { display: none; }
  .table-specs { bottom: 24px; left: 18%; transform: scale(.68); transform-origin: bottom left; }
  .table-spec:nth-child(1), .table-spec:nth-child(3) { display: none; }
  .shoe { top: 25px; right: 16%; transform: rotateZ(-7deg) scale(.62); transform-origin: top right; }
  .discard-tray { top: 25px; left: 16%; transform: rotateZ(6deg) scale(.62); transform-origin: top left; }
  .bet-spot { bottom: 12px; }
  .action-row { gap: 6px; }
  .action-sep { display: none; }
  .btn-action { min-width: 0; flex: 0 0 auto; }
  .hand-count-3 .hand-footer, .hand-count-4 .hand-footer { min-height: 32px; flex-direction: row; gap: 3px; }
  .hand-count-3 .hand-wager, .hand-count-4 .hand-wager { flex-basis: 30px; width: 30px; }
  /* Three or four hands span the felt: lift them off the curved bottom rail,
     and let the active-hand highlight speak for the banner, which stays
     available to screen readers. */
  body[data-hands="3"] .table-felt, body[data-hands="4"] .table-felt { justify-content: space-evenly; }
  .hands-row.hand-count-4 { gap: 4px; }
  body[data-hands="3"] .banner, body[data-hands="4"] .banner { opacity: 0; }
  body[data-phase="betting"] .btn-action { display: none; }
  body:not([data-phase="betting"]) .btn-bet-control,
  body:not([data-phase="betting"]) .chips-tray { display: none; }
  body:not([data-phase="betting"]) .bet-spot { visibility: hidden; }
  .ins-panel { padding: 4px 6px 4px 14px; }
  .ins-line { display: none; }
  .ins-panel h3 { font-size: 16px; margin-bottom: 0; }
  .ins-panel p { font-size: 11px; line-height: 1.3; }
  .toast { max-width: calc(100vw - 24px); font-size: 13px; padding: 8px 14px; text-align: center; }
}

@media (max-height: 450px) and (min-width: 540px) {
  /* Landscape phones: a slimmer top bar pays for 44px touch targets and larger cards. */
  .topbar { padding-block: 3px; }
  .brand-mark svg { width: 30px; height: 30px; }
  .balance-pill { padding: 3px 12px; }
  .balance-label { display: none; }
  .icon-btn { width: 36px; height: 36px; }
  .lang-btn { padding-block: 5px; }
  .hand-count-4 .card { --w: clamp(40px, 12vh, 54px); }
  .card { --w: clamp(42px, 13vh, 60px); }
  .controls { flex-direction: row; justify-content: center; gap: 10px; }
  .chips-tray { flex-wrap: nowrap; gap: 6px; padding: 3px 8px; }
  .chip { --size: 40px; }
  .action-row { flex-wrap: nowrap; }
  .btn { min-height: 44px; padding-inline: 14px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}