/* ══════════════════════════════════════════════════════════════════════
   aaa-table.css — the shared casino table chassis.

   Every table on the Cauliflower floor wears this: the room, the head, the
   stage the game paints into, the desk (bankroll + stake + the go button),
   the settlement moment. A game brings only its machine's own styles.

   --tbl-hue is the table's accent (0 red for slots, 160 green for dice, 45
   gold by default). Everything else is the house purple.
   ══════════════════════════════════════════════════════════════════════ */

/* What a win looks like, shared with the standalone builds that import fx.js
   but do not wear this chassis. Must stay above every rule below — @import is
   only honoured at the top of a stylesheet. */
@import url('/games/_shared/fx.css');

:root { --tbl-hue: 45; }
body.aaa-d-casino.aaa-table { --aaa-light: hsl(275 78% 62%); }

.cas-table {
  --tbl: hsl(var(--tbl-hue) 95% 62%);
  --tbl-deep: hsl(var(--tbl-hue) 70% 22%);
  --tbl-ink: hsl(var(--tbl-hue) 95% 78%);
  position: relative;
  max-width: 1080px; margin: 0 auto;
  padding: clamp(0.8rem, 2vw, 1.4rem) clamp(0.9rem, 3vw, 1.6rem) 4rem;
  display: grid; gap: clamp(0.9rem, 2vw, 1.4rem);
}

/* ── The room behind the table ────────────────────────────────────────── */
.aaa-d-casino.aaa-table .aaa-env {
  background:
    radial-gradient(90% 60% at 50% -10%, hsl(var(--tbl-hue, 45) 60% 30% / 0.35), transparent 60%),
    radial-gradient(70% 50% at 50% 110%, hsl(275 70% 28% / 0.4), transparent 60%),
    var(--aaa-night-0);
}

.tbl-back {
  justify-self: start;
  font-family: var(--font-display); font-weight: 800; font-size: 0.6rem;
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  color: var(--aaa-ink-3); padding: 0.4rem 0;
}
.tbl-back:hover { color: var(--aaa-ink-1); }

/* ── Head ─────────────────────────────────────────────────────────────── */
.tbl-head { display: grid; gap: 0.25rem; justify-items: center; text-align: center; }
.tbl-plate {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 0.5rem;
  letter-spacing: 0.32em; text-transform: uppercase; color: hsl(45 90% 66%);
  text-shadow: 0 0 12px hsl(45 95% 55% / 0.5);
}
.tbl-title {
  margin: 0; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1; letter-spacing: -0.005em; text-transform: uppercase;
  background: linear-gradient(135deg, #fff 0%, var(--tbl-ink) 40%, var(--tbl) 70%, hsl(45 100% 60%) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.85)) drop-shadow(0 0 28px color-mix(in srgb, var(--tbl) 45%, transparent));
}
.tbl-tag { margin: 0.2rem 0 0; color: var(--aaa-ink-2); font-size: 0.92rem; }
.tbl-facts { display: flex; gap: clamp(1rem, 4vw, 2.4rem); margin-top: 0.5rem; }
.tbl-facts span { display: grid; justify-items: center; gap: 0.05rem; }
.tbl-facts b { font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; color: hsl(45 95% 70%); text-shadow: 0 0 14px hsl(45 95% 55% / 0.4); }
.tbl-facts i { font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 0.46rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--aaa-ink-3); }

/* ── Stage: the game paints in here ───────────────────────────────────── */
.tbl-stage {
  position: relative; isolation: isolate;
  min-height: 300px;
  border-radius: 22px; overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, hsl(275 28% 10%), hsl(272 32% 6%)) padding-box,
    linear-gradient(160deg, color-mix(in srgb, var(--tbl) 60%, transparent), hsl(275 80% 60% / 0.4) 50%, hsl(45 80% 55% / 0.45)) border-box;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6), inset 0 1px 0 hsl(0 0% 100% / 0.06);
  transition: box-shadow var(--aaa-t-open) var(--aaa-e-settle);
}
.tbl-stage.is-win  { box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 60px hsl(160 100% 50% / 0.35); }
.tbl-stage.is-big  { box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 90px hsl(45 100% 55% / 0.55); }
.tbl-stage.is-loss { box-shadow: 0 24px 70px rgba(0,0,0,0.6); }

/* ── Desk ─────────────────────────────────────────────────────────────── */
.tbl-desk {
  display: grid; gap: 0.9rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
  align-items: center;
  padding: clamp(0.9rem, 2vw, 1.2rem);
  border-radius: 18px;
  border: 1px solid hsl(45 80% 58% / 0.28);
  background: linear-gradient(180deg, hsl(275 26% 9%), hsl(272 30% 6%));
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
}
.tbl-bank { display: grid; gap: 0.2rem; }
.tbl-bank-k, .tbl-wager-k {
  font-family: var(--font-display); font-weight: 800; font-size: 0.5rem;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--aaa-ink-3);
}
.tbl-bank-v { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; color: hsl(45 95% 70%); text-shadow: 0 0 14px hsl(45 95% 55% / 0.4); font-variant-numeric: tabular-nums; }
.tbl-bank-v .cc-icon { width: 20px; height: 20px; }

.tbl-wager { display: grid; gap: 0.45rem; }
.tbl-presets, .tbl-stake { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.tbl-chip {
  font-family: var(--font-display); font-weight: 800; font-size: 0.6rem; letter-spacing: 0.08em;
  padding: 0.45rem 0.8rem; border-radius: 999px; cursor: pointer;
  color: var(--aaa-ink-2); background: hsl(252 24% 13%); border: 1px solid hsl(250 20% 28%);
  transition: border-color 120ms, color 120ms, background 120ms, transform 120ms var(--aaa-e-settle);
}
.tbl-chip:hover { border-color: hsl(45 80% 58% / 0.6); color: var(--aaa-ink-1); }
.tbl-chip.is-on { color: hsl(45 90% 12%); background: linear-gradient(100deg, hsl(45 100% 64%), hsl(38 100% 54%)); border-color: transparent; box-shadow: 0 0 16px hsl(45 100% 55% / 0.4); }
.tbl-chip-max { border-color: hsl(275 78% 62% / 0.5); color: hsl(275 90% 80%); }
.tbl-step {
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  font-family: var(--font-display); font-weight: 900; font-size: 1rem;
  color: var(--aaa-ink-1); background: hsl(252 24% 13%); border: 1px solid hsl(250 20% 28%);
}
.tbl-step:hover { border-color: hsl(45 80% 58% / 0.6); }
.tbl-input {
  width: 118px; height: 38px; text-align: center; border-radius: 10px;
  font-family: var(--font-display); font-weight: 900; font-size: 1rem; font-variant-numeric: tabular-nums;
  color: hsl(45 95% 72%); background: hsl(272 34% 6%); border: 1px solid hsl(45 80% 58% / 0.4);
  -moz-appearance: textfield;
}
.tbl-input::-webkit-outer-spin-button, .tbl-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tbl-input:focus-visible { outline: 2px solid hsl(45 95% 62%); outline-offset: 2px; }
.tbl-limits { margin: 0; font-size: 0.7rem; color: var(--aaa-ink-3); }

.tbl-go {
  display: grid; justify-items: center; gap: 0.1rem;
  min-width: 170px; min-height: 76px; padding: 0.7rem 1.4rem;
  border-radius: 16px; border: 0; cursor: pointer;
  color: hsl(45 90% 10%);
  background: linear-gradient(135deg, hsl(45 100% 64%), hsl(38 100% 54%));
  box-shadow: 0 0 30px hsl(45 100% 55% / 0.45), 0 10px 26px rgba(0,0,0,0.5);
  transition: transform 140ms var(--aaa-e-settle), box-shadow 140ms, filter 140ms;
}
.tbl-go-l { font-family: var(--font-display); font-weight: 900; font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; }
.tbl-go-s { font-family: var(--font-display); font-weight: 800; font-size: 0.6rem; letter-spacing: 0.1em; opacity: 0.8; font-variant-numeric: tabular-nums; }
.tbl-go:hover:not(:disabled) { transform: translate3d(0,-2px,0); box-shadow: 0 0 44px hsl(45 100% 55% / 0.65), 0 14px 30px rgba(0,0,0,0.5); }
.tbl-go:disabled { filter: saturate(0.4) brightness(0.7); cursor: not-allowed; }
.tbl-go.is-short { background: hsl(250 20% 22%); color: var(--aaa-ink-2); box-shadow: none; }
.tbl-go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tbl-note { grid-column: 1 / -1; margin: 0; min-height: 1.2em; font-size: 0.82rem; color: hsl(35 95% 70%); }

/* While a round is live the desk is locked and dims a touch. */
.cas-table.is-live .tbl-desk { opacity: 0.72; pointer-events: none; }

/* ── The settlement moment ────────────────────────────────────────────── */
.tbl-settle {
  position: relative; text-align: center;
  padding: 1.1rem 1.2rem 1.2rem; border-radius: 18px;
  border: 1px solid transparent;
  animation: tbl-rise 480ms cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes tbl-rise { from { opacity: 0; transform: translate3d(0,14px,0) scale(0.98); } to { opacity: 1; transform: none; } }
.tbl-settle.is-win {
  background: linear-gradient(180deg, hsl(160 60% 14% / 0.9), hsl(272 30% 7%)) padding-box,
              linear-gradient(140deg, hsl(160 100% 50% / 0.7), hsl(45 90% 60% / 0.5)) border-box;
  box-shadow: 0 0 50px hsl(160 100% 50% / 0.25);
}
.tbl-settle.is-big {
  background: linear-gradient(180deg, hsl(45 60% 16% / 0.95), hsl(272 30% 7%)) padding-box,
              linear-gradient(140deg, hsl(45 100% 60%), hsl(275 85% 62%)) border-box;
  box-shadow: 0 0 80px hsl(45 100% 55% / 0.45);
}
.tbl-settle.is-loss {
  background: linear-gradient(180deg, hsl(272 26% 10%), hsl(272 30% 7%)) padding-box,
              linear-gradient(140deg, hsl(250 20% 30%), hsl(250 20% 20%)) border-box;
}
.tbl-settle-k { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 0.56rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--aaa-ink-2); }
.is-win .tbl-settle-k { color: hsl(160 90% 62%); text-shadow: 0 0 14px hsl(160 100% 55% / 0.5); }
.is-big .tbl-settle-k { color: hsl(45 95% 70%); text-shadow: 0 0 18px hsl(45 100% 55% / 0.6); }
.tbl-settle-n {
  margin: 0.15rem 0 0; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.2rem, 8vw, 3.4rem); line-height: 1; font-variant-numeric: tabular-nums;
  color: #fff;
}
.is-win .tbl-settle-n { background: linear-gradient(180deg, #fff 20%, hsl(160 90% 65%)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px hsl(160 100% 55% / 0.4)); }
.is-big .tbl-settle-n { background: linear-gradient(180deg, #fff 10%, hsl(45 100% 65%) 60%, hsl(38 100% 55%)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px hsl(45 100% 55% / 0.6)); }
.is-loss .tbl-settle-n { color: var(--aaa-ink-2); }
.tbl-settle-s { margin: 0.4rem 0 0; font-size: 0.86rem; color: var(--aaa-ink-2); }
.tbl-settle-s b { color: hsl(160 90% 65%); }
.tbl-settle-b { margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--aaa-ink-3); }
.tbl-settle-b b { color: hsl(45 95% 70%); font-variant-numeric: tabular-nums; }
.tbl-again {
  margin-top: 0.8rem; min-height: 46px; padding: 0.7rem 1.6rem; border-radius: 12px; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 900; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: hsl(45 90% 10%); background: linear-gradient(100deg, hsl(45 100% 64%), hsl(38 100% 54%));
  box-shadow: 0 0 22px hsl(45 100% 55% / 0.4);
}
.tbl-again:hover { box-shadow: 0 0 34px hsl(45 100% 55% / 0.6); transform: translate3d(0,-2px,0); }
.tbl-again:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 760px) {
  .tbl-desk { grid-template-columns: 1fr; }
  .tbl-go { width: 100%; }
  .tbl-bank { grid-auto-flow: column; justify-content: space-between; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .tbl-settle { animation: none; }
  .tbl-go, .tbl-again, .tbl-chip { transition: none; }
  .tbl-go:hover, .tbl-again:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   SLOTS — the machine.
   ══════════════════════════════════════════════════════════════════════ */
.slt-machine { display: grid; gap: 0.8rem; padding: clamp(0.9rem, 2.4vw, 1.4rem); }
.slt-top { display: flex; justify-content: center; gap: 0.6rem; }
.slt-lamp {
  width: 12px; height: 12px; border-radius: 50%;
  background: hsl(45 90% 62%); box-shadow: 0 0 10px hsl(45 95% 60% / 0.7);
  opacity: 0.55;
}
.is-spinning .slt-lamp { animation: slt-lamp 260ms steps(1) infinite; }
.is-spinning .slt-lamp:nth-child(2n) { animation-delay: 130ms; }
.is-win .slt-lamp, .is-big .slt-lamp { animation: slt-lamp 180ms steps(1) infinite; background: hsl(160 90% 55%); box-shadow: 0 0 14px hsl(160 100% 55%); }
.is-big .slt-lamp { background: hsl(45 100% 62%); box-shadow: 0 0 18px hsl(45 100% 60%); }
@keyframes slt-lamp { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

.slt-window {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.5rem, 1.6vw, 0.9rem);
  padding: clamp(0.6rem, 1.6vw, 1rem);
  border-radius: 18px;
  background: linear-gradient(180deg, hsl(272 34% 5%), hsl(272 30% 8%));
  border: 1px solid hsl(45 80% 58% / 0.32);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.7), 0 0 0 4px hsl(272 26% 11%), 0 0 0 5px hsl(45 80% 58% / 0.25);
}
.slt-reel {
  position: relative; height: 96px; overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, hsl(0 0% 100% / 0.04), transparent 30%, transparent 70%, hsl(0 0% 100% / 0.04));
  border: 1px solid hsl(250 20% 26%);
  transition: border-color 200ms, box-shadow 200ms;
}
.slt-reel.is-hit { border-color: hsl(160 90% 55%); box-shadow: 0 0 22px hsl(160 100% 50% / 0.5), inset 0 0 20px hsl(160 100% 50% / 0.2); }
.is-big .slt-reel.is-hit { border-color: hsl(45 100% 62%); box-shadow: 0 0 30px hsl(45 100% 55% / 0.65), inset 0 0 24px hsl(45 100% 55% / 0.25); }
.slt-strip { display: grid; will-change: transform; }
.slt-sym {
  height: 96px; display: grid; place-items: center;
  font-size: clamp(2.4rem, 7vw, 3.4rem); line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6));
}
.slt-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, hsl(272 32% 6% / 0.9), transparent 28%, transparent 72%, hsl(272 32% 6% / 0.9));
}
.slt-payline {
  position: absolute; left: 4px; right: 4px; top: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, hsl(45 100% 60% / 0.7), transparent);
  pointer-events: none;
}
.slt-pay { display: flex; justify-content: center; gap: clamp(0.5rem, 2vw, 1.2rem); flex-wrap: wrap; }
.slt-pay span { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.6rem; border-radius: 999px; background: hsl(272 30% 8% / 0.8); border: 1px solid hsl(250 20% 24%); }
.slt-pay i { font-style: normal; font-size: 0.8rem; letter-spacing: -0.06em; }
.slt-pay b { font-family: var(--font-display); font-weight: 900; font-size: 0.66rem; color: hsl(45 95% 70%); }
@media (prefers-reduced-motion: reduce) { .slt-lamp { animation: none !important; } }


/* ══════════════════════════════════════════════════════════════════════
   THE MACHINES — dice, coin, wheel, cards. Each is only its own mechanism;
   the room, desk and settlement come from the chassis above.
   ══════════════════════════════════════════════════════════════════════ */

/* Shared bits every machine uses. */
.tbl-stage [class$="-k"] { margin: 0; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 0.52rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--aaa-ink-3); }
.tbl-stage [class$="-odds"] { margin: 0; text-align: center; font-size: 0.82rem; color: var(--aaa-ink-3); }
.tbl-stage [class$="-odds"] b { color: hsl(45 95% 70%); }
.tbl-pickbtn {
  cursor: pointer; border-radius: 14px; border: 1px solid hsl(250 20% 26%);
  background: hsl(252 24% 12%); color: var(--aaa-ink-2);
  transition: border-color 140ms, box-shadow 140ms, transform 140ms var(--aaa-e-settle), background 140ms;
}
.tbl-pickbtn:hover { border-color: hsl(45 80% 58% / 0.55); transform: translate3d(0,-2px,0); }
.tbl-pickbtn.is-on { border-color: var(--tbl); box-shadow: 0 0 22px color-mix(in srgb, var(--tbl) 45%, transparent); background: color-mix(in srgb, var(--tbl) 12%, hsl(252 24% 12%)); color: #fff; }
.tbl-pickbtn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── DICE ─────────────────────────────────────────────────────────────── */
.dce-machine { display: grid; gap: 0.9rem; padding: clamp(1rem, 2.6vw, 1.6rem); justify-items: center; }
.dce-arena { position: relative; height: 170px; display: grid; place-items: center; width: 100%; }
.dce-die {
  position: relative; z-index: 1; width: 120px; height: 120px; border-radius: 22px;
  background: linear-gradient(145deg, #fff, hsl(0 0% 88%));
  box-shadow: 0 18px 40px rgba(0,0,0,0.6), inset 0 -6px 12px rgba(0,0,0,0.12), inset 0 4px 8px #fff;
  display: grid; place-items: center;
  transition: box-shadow 200ms, transform 200ms var(--aaa-e-settle);
  will-change: transform;
}
.dce-face { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 78px; height: 78px; }
.dce-face i { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; background: transparent; }
.dce-face i.on { background: hsl(272 40% 8%); box-shadow: inset 0 2px 3px rgba(0,0,0,0.5); }
.dce-shadow { position: absolute; bottom: 12px; left: 50%; width: 110px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.55); filter: blur(8px); transform: translateX(-50%); }
.dce-die.is-tumbling { animation: dce-tumble 420ms cubic-bezier(0.34,1.2,0.64,1) infinite; }
@keyframes dce-tumble {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  30%  { transform: translate3d(-8px,-42px,0) rotate(-40deg) scale(1.06); }
  60%  { transform: translate3d(8px,-30px,0) rotate(38deg) scale(1.04); }
  100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
}
.dce-die.is-landed { animation: dce-land 260ms cubic-bezier(0.34,1.56,0.64,1); }
@keyframes dce-land { 0% { transform: translateY(-14px) scale(1.06); } 100% { transform: none; } }
.dce-die.is-hit { box-shadow: 0 18px 40px rgba(0,0,0,0.6), 0 0 44px hsl(160 100% 50% / 0.7), inset 0 -6px 12px rgba(0,0,0,0.12); }
.dce-die.is-hit .dce-face i.on { background: hsl(160 90% 30%); }
.dce-picks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; width: 100%; max-width: 560px; }
.dce-pick { display: grid; justify-items: center; gap: 0.3rem; padding: 0.55rem 0.3rem 0.45rem; }
.dce-pick .dce-face { width: 34px; height: 34px; gap: 3px; background: linear-gradient(145deg,#fff,hsl(0 0% 88%)); border-radius: 8px; padding: 5px; box-sizing: border-box; }
.dce-pick b { font-family: var(--font-display); font-weight: 900; font-size: 0.7rem; }
.dce-pick { cursor: pointer; border-radius: 14px; border: 1px solid hsl(250 20% 26%); background: hsl(252 24% 12%); color: var(--aaa-ink-2); transition: border-color 140ms, box-shadow 140ms, transform 140ms var(--aaa-e-settle), background 140ms; }
.dce-pick:hover { border-color: hsl(45 80% 58% / 0.55); transform: translate3d(0,-2px,0); }
.dce-pick.is-on { border-color: var(--tbl); box-shadow: 0 0 22px color-mix(in srgb, var(--tbl) 45%, transparent); background: color-mix(in srgb, var(--tbl) 12%, hsl(252 24% 12%)); color: #fff; }
.dce-pick:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── COIN FLIP ────────────────────────────────────────────────────────── */
.cfp-machine { display: grid; gap: 0.8rem; padding: clamp(1rem, 2.6vw, 1.6rem); justify-items: center; }
.cfp-arena { position: relative; height: 190px; display: grid; place-items: center; width: 100%; perspective: 900px; }
.cfp-coin {
  position: relative; z-index: 1; width: 140px; height: 140px;
  transform-style: preserve-3d; will-change: transform;
  transition: transform 520ms cubic-bezier(0.34, 1.3, 0.64, 1);
}
.cfp-coin[data-face="tails"] { transform: rotateY(180deg); }
.cfp-face {
  position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden;
  display: grid; place-items: center; align-content: center; gap: 0;
  border: 6px solid hsl(45 70% 40%);
  box-shadow: 0 18px 40px rgba(0,0,0,0.6), inset 0 0 0 4px hsl(45 90% 70% / 0.6), inset 0 0 30px hsl(45 60% 30% / 0.6);
}
.cfp-heads { background: radial-gradient(circle at 35% 30%, hsl(48 100% 78%), hsl(42 95% 52%) 60%, hsl(38 80% 38%)); }
.cfp-tails { background: radial-gradient(circle at 35% 30%, hsl(0 0% 96%), hsl(220 10% 72%) 60%, hsl(220 10% 46%)); transform: rotateY(180deg); }
.cfp-face i { font-style: normal; font-family: var(--font-display); font-weight: 900; font-size: 3rem; line-height: 1; color: hsl(40 70% 22%); text-shadow: 0 2px 0 hsl(48 100% 85% / 0.7); }
.cfp-tails i { color: hsl(220 20% 22%); text-shadow: 0 2px 0 rgba(255,255,255,0.7); }
.cfp-face small { font-family: var(--font-display); font-weight: 800; font-size: 0.5rem; letter-spacing: 0.3em; text-transform: uppercase; color: hsl(40 60% 26%); }
.cfp-tails small { color: hsl(220 20% 30%); }
.cfp-shadow { position: absolute; bottom: 10px; left: 50%; width: 130px; height: 24px; border-radius: 50%; background: rgba(0,0,0,0.55); filter: blur(9px); transform: translateX(-50%); }
.cfp-coin.is-flipping { animation: cfp-flip 700ms linear infinite; transition: none; }
@keyframes cfp-flip { 0% { transform: translateY(0) rotateY(0deg); } 50% { transform: translateY(-70px) rotateY(540deg); } 100% { transform: translateY(0) rotateY(1080deg); } }
.cfp-coin.is-hit .cfp-face { box-shadow: 0 18px 40px rgba(0,0,0,0.6), 0 0 50px hsl(160 100% 50% / 0.7), inset 0 0 0 4px hsl(160 90% 70% / 0.7); }
.cfp-sides, .cfp-tiers { display: grid; gap: 0.5rem; width: 100%; max-width: 520px; }
.cfp-sides { grid-template-columns: 1fr 1fr; }
.cfp-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cfp-side, .cfp-tier { cursor: pointer; border-radius: 14px; border: 1px solid hsl(250 20% 26%); background: hsl(252 24% 12%); color: var(--aaa-ink-2); padding: 0.7rem 0.6rem; display: grid; justify-items: center; gap: 0.15rem; transition: border-color 140ms, box-shadow 140ms, transform 140ms var(--aaa-e-settle), background 140ms; }
.cfp-side b, .cfp-tier b { font-family: var(--font-display); font-weight: 900; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cfp-tier span { font-size: 0.7rem; color: var(--aaa-ink-3); }
.cfp-side:hover, .cfp-tier:hover { border-color: hsl(45 80% 58% / 0.55); transform: translate3d(0,-2px,0); }
.cfp-side.is-on, .cfp-tier.is-on { border-color: var(--tbl); box-shadow: 0 0 22px color-mix(in srgb, var(--tbl) 45%, transparent); background: color-mix(in srgb, var(--tbl) 12%, hsl(252 24% 12%)); color: #fff; }
.cfp-tier.is-on span { color: var(--aaa-ink-1); }
.cfp-side:focus-visible, .cfp-tier:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── THE WHEEL ────────────────────────────────────────────────────────── */
.whl-machine { display: grid; gap: 0.7rem; padding: clamp(1rem, 2.6vw, 1.6rem); justify-items: center; }
.whl-arena { position: relative; width: min(340px, 82vw); aspect-ratio: 1; }
.whl-wheel { width: 100%; height: 100%; will-change: transform; filter: drop-shadow(0 18px 40px rgba(0,0,0,0.65)); }
.whl-wheel svg { width: 100%; height: 100%; display: block; }
.whl-wheel.is-hit { filter: drop-shadow(0 18px 40px rgba(0,0,0,0.65)) drop-shadow(0 0 30px hsl(45 100% 55% / 0.7)); }
.whl-pointer {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent;
  border-top: 30px solid hsl(45 100% 62%);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7)) drop-shadow(0 0 10px hsl(45 100% 55% / 0.6));
}

/* ── PICK A CARD ──────────────────────────────────────────────────────── */
.pck-machine { display: grid; gap: 1rem; padding: clamp(1rem, 2.6vw, 1.6rem); justify-items: center; }
.pck-fan { display: flex; gap: clamp(0.4rem, 1.6vw, 0.9rem); justify-content: center; perspective: 1200px; padding: 0.4rem 0; }
.pck-card {
  position: relative; width: clamp(64px, 14vw, 104px); aspect-ratio: 2.4 / 3.4;
  border: 0; background: none; padding: 0; cursor: pointer;
  transform-style: preserve-3d; will-change: transform;
  transition: transform 520ms cubic-bezier(0.34, 1.2, 0.64, 1);
  transform: translateY(0) rotate(calc((var(--i) - 2) * 3deg));
}
.pck-card:hover:not(.is-locked) { transform: translateY(-10px) rotate(calc((var(--i) - 2) * 3deg)); }
.pck-card.is-on { transform: translateY(-16px) rotate(calc((var(--i) - 2) * 3deg)); }
.pck-card.is-up { transform: translateY(-4px) rotate(0deg) rotateY(180deg); }
.pck-card.is-shuffling { animation: pck-shuffle 300ms ease-in-out infinite alternate; }
@keyframes pck-shuffle { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-8px) rotate(3deg); } }
.pck-back, .pck-front {
  position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden;
  display: grid; place-items: center; align-content: center; gap: 0.15rem;
  border: 2px solid hsl(45 80% 58% / 0.55);
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
}
.pck-back {
  background:
    repeating-linear-gradient(45deg, hsl(275 60% 26%) 0 6px, hsl(275 60% 20%) 6px 12px);
}
.pck-back i { font-style: normal; font-size: 1.6rem; color: hsl(45 90% 66%); filter: drop-shadow(0 0 8px hsl(45 95% 55% / 0.6)); }
.pck-front { transform: rotateY(180deg); background: linear-gradient(160deg, #fff, hsl(0 0% 90%)); color: hsl(272 40% 12%); }
.pck-front i { font-style: normal; font-size: 2rem; line-height: 1; }
.pck-front b { font-family: var(--font-display); font-weight: 900; font-size: 0.5rem; letter-spacing: 0.24em; opacity: 0; }
.pck-card.is-pot .pck-front { background: linear-gradient(160deg, hsl(48 100% 80%), hsl(42 95% 58%)); border-color: hsl(45 100% 60%); box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 0 34px hsl(45 100% 55% / 0.65); }
.pck-card.is-pot .pck-front b { opacity: 1; }
.pck-card.is-dud .pck-front { filter: saturate(0.2) brightness(0.8); }
.pck-card.is-on .pck-back { border-color: var(--tbl); box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 0 22px color-mix(in srgb, var(--tbl) 55%, transparent); }
.pck-card.is-hit .pck-front { box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 0 50px hsl(160 100% 50% / 0.7); }
.pck-card:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  .dce-die.is-tumbling, .cfp-coin.is-flipping, .pck-card.is-shuffling { animation: none; }
  .whl-wheel { transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   FX — light, particles, the halo, and the sound switch. Compositor-only.
   ══════════════════════════════════════════════════════════════════════ */

/* The stage's own light: an ambient halo that breathes at idle, races while
   a round is live, and floods on a win. One layer, transform + opacity only. */
.tbl-stage { position: relative; }
.tbl-mount { position: relative; z-index: 1; }
.tbl-halo {
  position: absolute; inset: -40%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 0deg, color-mix(in srgb, var(--tbl) 22%, transparent) 30deg, transparent 60deg,
    transparent 180deg, hsl(45 90% 60% / 0.14) 210deg, transparent 240deg);
  opacity: 0.55; will-change: transform, opacity;
  animation: tbl-halo 26s linear infinite;
}
@keyframes tbl-halo { to { transform: rotate(360deg); } }
.cas-table.is-live .tbl-halo { animation-duration: 3.2s; opacity: 0.9; }
.tbl-stage.is-win .tbl-halo { background: conic-gradient(from 0deg, transparent 0deg, hsl(160 100% 50% / 0.32) 40deg, transparent 80deg, transparent 180deg, hsl(160 100% 50% / 0.22) 220deg, transparent 260deg); animation-duration: 6s; opacity: 1; }
.tbl-stage.is-big .tbl-halo { background: conic-gradient(from 0deg, transparent, hsl(45 100% 60% / 0.45) 30deg, transparent 70deg, transparent 120deg, hsl(45 100% 60% / 0.35) 160deg, transparent 200deg, transparent 240deg, hsl(45 100% 60% / 0.4) 280deg, transparent 320deg); animation-duration: 2.4s; opacity: 1; }

/* The fx-* rules — sweep, flash, kick — moved to
   /games/_shared/fx.css, imported at the top of this file. They are what
   fx.js draws with, and a standalone game that imports fx.js needs them too;
   keeping them here meant Baccarat called celebrate() and got silence. One
   definition, both kinds of table. */

/* The sound switch, quiet in the head. */
.tbl-sound {
  margin-top: 0.7rem; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.38rem 0.8rem; border-radius: 999px; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 0.52rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--aaa-ink-3); background: hsl(252 24% 11%); border: 1px solid hsl(250 20% 24%);
  transition: color 140ms, border-color 140ms;
}
.tbl-sound-i { width: 8px; height: 8px; border-radius: 50%; background: var(--aaa-ink-3); }
.tbl-sound[aria-pressed="true"] { color: hsl(45 95% 70%); border-color: hsl(45 80% 58% / 0.5); }
.tbl-sound[aria-pressed="true"] .tbl-sound-i { background: hsl(45 95% 62%); box-shadow: 0 0 10px hsl(45 95% 60%); }
.tbl-sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The settlement number gets its own light on a win. */
.tbl-settle.is-win, .tbl-settle.is-big { overflow: hidden; }
.tbl-settle.is-big::before {
  content: ""; position: absolute; inset: -60%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg, transparent, hsl(45 100% 60% / 0.18) 20deg, transparent 40deg, transparent 90deg, hsl(45 100% 60% / 0.18) 110deg, transparent 130deg, transparent 180deg, hsl(45 100% 60% / 0.18) 200deg, transparent 220deg, transparent 270deg, hsl(45 100% 60% / 0.18) 290deg, transparent 310deg);
  animation: tbl-halo 8s linear infinite;
}
.tbl-settle > * { position: relative; z-index: 1; }

/* Slots: the machine itself gets richer anticipation cues. */
.slt-reel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, hsl(0 0% 100% / 0.06), transparent 30%, transparent 70%, hsl(0 0% 100% / 0.06));
}
.is-spinning .slt-reel { box-shadow: inset 0 0 26px rgba(0,0,0,0.6), 0 0 14px color-mix(in srgb, var(--tbl) 30%, transparent); }
.slt-reel.is-near { border-color: hsl(45 90% 60%); box-shadow: 0 0 22px hsl(45 100% 55% / 0.5); }
.slt-window { transition: box-shadow 300ms; }
.is-win .slt-window { box-shadow: inset 0 0 40px rgba(0,0,0,0.7), 0 0 0 4px hsl(272 26% 11%), 0 0 0 5px hsl(160 90% 55% / 0.7), 0 0 40px hsl(160 100% 50% / 0.35); }
.is-big .slt-window { box-shadow: inset 0 0 40px rgba(0,0,0,0.7), 0 0 0 4px hsl(272 26% 11%), 0 0 0 5px hsl(45 100% 60%), 0 0 60px hsl(45 100% 55% / 0.55); }

@media (prefers-reduced-motion: reduce) {
  /* The fx-* rules carry their own reduced-motion handling in fx.css. */
  .tbl-halo, .tbl-settle.is-big::before { animation: none !important; }
}

/* Near-miss cues per machine. */
.dce-die.is-near { box-shadow: 0 18px 40px rgba(0,0,0,0.6), 0 0 34px hsl(45 100% 55% / 0.7), inset 0 -6px 12px rgba(0,0,0,0.12); transform: scale(1.06); }
.pck-card.is-near { transform: translateY(-26px) rotate(0deg) scale(1.04); }
.pck-card.is-near .pck-back { border-color: hsl(45 100% 62%); box-shadow: 0 16px 34px rgba(0,0,0,0.6), 0 0 26px hsl(45 100% 55% / 0.6); }