/* =========================================================================
   webcore — THE CASINO FLOOR. Owner-neutral: every colour is a site.css
   token and nothing here names a server. The donor build is named in
   home/CODE_MAP.md, never inside this tree.

   THREE RULES THIS FILE KEEPS
   1. Wide content scrolls inside its own container; nothing here can widen
      the page.
   2. Every animation is presentation only. Outcomes arrive already decided by
      the server, so motion may be skipped, interrupted or never run and the
      money is unaffected. `prefers-reduced-motion` kills all of it.
   3. Nothing here paints a number. Prize values, odds and bet limits are
      written by casino.mjs from the engine payload — a stylesheet that hard
      codes a payout eventually disagrees with the house.
   ========================================================================= */

/* ---- per-game accents ---------------------------------------------------
   One hue per game, all sampled to sit inside the moonlit-night palette.
   `--c` drives the icon, the wash, the meta line and the play button, so a
   new game needs one line here and one data-c in the markup.            ---- */
.cas-card[data-c="gold"]   { --c: #F5C654; }
.cas-card[data-c="silver"] { --c: #B8CCDC; }
.cas-card[data-c="rose"]   { --c: #DE93A4; }
.cas-card[data-c="green"]  { --c: #6FD79A; }
.cas-card[data-c="amber"]  { --c: #F0A868; }
.cas-card[data-c="violet"] { --c: #A99BD6; }
.cas-card[data-c="teal"]   { --c: #6FC7D7; }

/* ---- strip: balance + fairness ---- */
.cas-strip {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 4px 0 22px;
}
/* display:flex would beat the hidden attribute's UA rule — restate it. */
.cas-strip[hidden] { display: none; }
.cas-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px;
  color: var(--silver); font-size: 14px;
}
.cas-chip b { color: var(--moon); font-variant-numeric: tabular-nums; }
.cas-chip code {
  font-size: 12px; color: var(--silver-dim); max-width: 180px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cas-chip-dim { color: var(--silver-dim); }
.cas-chip-bal {
  border-color: rgba(245,198,84,.30);
  background: linear-gradient(180deg, rgba(245,198,84,.10), rgba(245,198,84,.03));
  color: #E7D5A6;
}
.cas-chip-bal b { color: #F3CF77; }
.cas-chip-bal svg { color: #F5C654; }
/* one soft breath when the balance moves */
.cas-chip-bal.is-bump { animation: cas-bump .62s ease; }
@keyframes cas-bump {
  30% { transform: translateY(-2px); border-color: rgba(245,198,84,.7); }
}

/* ---- the floor: every game on the page at once ---- */
.cas-floor-h {
  font-size: 15px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--silver-mut); font-family: var(--ui); font-weight: 600;
  margin: 0 0 12px;
}
.cas-lobby {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px; margin: 0 0 22px;
}
@media (max-width: 560px) {
  .cas-lobby { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
}

.cas-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 7px; text-align: left;
  min-height: 214px; padding: 17px 17px 15px;
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, var(--surface), #090F19);
  box-shadow: var(--shadow);
  font: inherit; color: var(--silver-dim); cursor: pointer;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s, box-shadow .2s;
}
/* the card's own colour, washed in from the top-left like moonlight */
.cas-card-wash {
  position: absolute; inset: -30% -30% auto -30%; height: 150%;
  z-index: -1; pointer-events: none;
  background: radial-gradient(58% 62% at 26% 8%, color-mix(in srgb, var(--c) 22%, transparent), transparent 72%);
  opacity: .62; transition: opacity .25s;
}
.cas-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 40%, var(--line-2)); }
.cas-card:hover .cas-card-wash { opacity: 1; }
.cas-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cas-card[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--c) 62%, var(--line-2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent),
              0 16px 40px -22px color-mix(in srgb, var(--c) 70%, transparent),
              var(--shadow);
}
.cas-card[aria-pressed="true"] .cas-card-wash { opacity: 1; }
/* the open game wears a lit top edge, the way .card does site-wide */
.cas-card[aria-pressed="true"]::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 85%, transparent), transparent);
}

.cas-card-ico {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  border-radius: 50%; color: var(--c);
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--c) 26%, transparent), color-mix(in srgb, var(--c) 7%, transparent));
  border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
  box-shadow: 0 0 22px -8px color-mix(in srgb, var(--c) 80%, transparent);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.cas-card-ico svg { width: 27px; height: 27px; }
.cas-card:hover .cas-card-ico { transform: translateY(-1px) scale(1.05); box-shadow: 0 0 28px -6px color-mix(in srgb, var(--c) 90%, transparent); }

.cas-card-name {
  font: 600 19px/1.15 var(--display); color: var(--moon);
  letter-spacing: -.005em; margin-top: 3px;
}
.cas-card-sub { font-size: 13.4px; line-height: 1.45; color: var(--silver-dim); }
.cas-card-meta {
  font: 500 11.5px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 78%, var(--silver-mut));
  font-variant-numeric: tabular-nums;
}
.cas-card-meta:empty { display: none; }
.cas-card-play {
  margin-top: auto; align-self: stretch; text-align: center;
  padding: 9px 12px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--c) 46%, transparent);
  background: color-mix(in srgb, var(--c) 9%, transparent);
  color: color-mix(in srgb, var(--c) 88%, var(--moon));
  font: 600 12.5px/1 var(--ui); letter-spacing: .13em; text-transform: uppercase;
  transition: background .2s, border-color .2s, color .2s;
}
.cas-card:hover .cas-card-play {
  background: color-mix(in srgb, var(--c) 18%, transparent);
  border-color: color-mix(in srgb, var(--c) 70%, transparent);
  color: var(--moon);
}
.cas-card[aria-pressed="true"] .cas-card-play {
  background: color-mix(in srgb, var(--c) 24%, transparent);
  border-color: color-mix(in srgb, var(--c) 82%, transparent);
  color: var(--moon);
}
/* the open card says so in words, not only in colour */
.cas-card[aria-pressed="true"] .cas-card-play::after { content: "ing"; }
@media (max-width: 560px) {
  .cas-card { min-height: 178px; padding: 13px 13px 12px; }
  .cas-card-ico { width: 38px; height: 38px; }
  .cas-card-ico svg { width: 22px; height: 22px; }
  .cas-card-name { font-size: 16.5px; }
  .cas-card-sub { display: none; }
}

/* ---- refusal / result line ---- */
.cas-note {
  background: var(--surface); border: 1px solid var(--line-2);
  border-left: 3px solid var(--warn); border-radius: 10px;
  padding: 10px 14px; margin: 0 0 14px; color: var(--silver);
  font-size: 14.5px;
}
.cas-note[data-kind="good"] { border-left-color: var(--live); }

/* ---- game layout ---- */
.cas-table:empty { display: none; }
.cas-panel { margin: 0 0 22px; }
.cas-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .cas-panel:not([hidden]) { animation: panel-in .34s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes panel-in { from { opacity: 0; transform: translateY(9px); } }
}
.cas-game {
  display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: 18px; align-items: start;
}
@media (max-width: 860px) { .cas-game { grid-template-columns: 1fr; } }

.cas-stage {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(159,182,201,.07), transparent 62%),
    linear-gradient(180deg, var(--surface) 0%, #070C15 100%);
  border: 1px solid var(--line); border-radius: 16px;
  min-height: 348px; padding: 24px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.028);
}
.cas-stage-felt {
  background:
    radial-gradient(100% 74% at 50% 6%, rgba(90,124,150,.14), transparent 66%),
    linear-gradient(180deg, #0B1520 0%, #060B13 100%);
}
.cas-side {
  background: linear-gradient(180deg, var(--surface), #0A1119);
  border: 1px solid var(--line);
  border-radius: 16px; padding: 19px 19px 21px; box-shadow: var(--shadow);
}
.cas-side h3 { margin: 0 0 8px; color: var(--moon); font-size: 20px; }
.cas-copy { color: var(--silver-dim); font-size: 14.5px; margin: 0 0 12px; }
.cas-copy-dim { color: var(--silver-mut); font-size: 13.5px; margin: 8px 0 0; }
.cas-label {
  display: block; color: var(--silver-mut); font-size: 12.5px;
  letter-spacing: .04em; text-transform: uppercase; margin: 12px 0 5px;
}
.cas-input {
  width: 100%; box-sizing: border-box;
  background: var(--surface-3); color: var(--moon);
  border: 1px solid var(--line-2); border-radius: 9px;
  padding: 9px 12px; font: inherit; font-size: 15px;
  color-scheme: dark; font-variant-numeric: tabular-nums;
  transition: border-color .16s, box-shadow .16s;
}
.cas-input:hover { border-color: var(--stone); }
.cas-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cas-input-slim { width: auto; flex: 1 1 90px; min-width: 0; }
.cas-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.cas-row-split > .btn { flex: 1 1 0; min-width: 0; }
.cas-act { flex: 0 1 auto; }
.cas-act-lg { width: 100%; margin-top: 14px; padding: 13px 21px; font-size: 15px; }
.cas-act[disabled] { opacity: .45; cursor: not-allowed; }
.cas-act.is-busy { position: relative; color: transparent !important; }
.cas-act.is-busy::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(10,18,28,.35); border-top-color: #0A121C;
  animation: cas-spin .7s linear infinite;
}
.btn:not(.btn-primary).cas-act.is-busy::before { border-color: rgba(201,212,220,.28); border-top-color: var(--silver); }
@keyframes cas-spin { to { transform: rotate(360deg); } }

.pick-btn { gap: 9px; }
.pick-ico { display: inline-grid; place-items: center; }
.pick-btn.is-called { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }

.cas-result {
  min-height: 24px; margin: 0; text-align: center;
  color: var(--silver); font-size: 15.5px;
}
.cas-result b { color: var(--moon); }
.cas-result[data-kind="win"] b { color: var(--live); }
.cas-result[data-kind="lose"] b { color: var(--down); }
@media (prefers-reduced-motion: no-preference) {
  .cas-result.is-new { animation: res-in .42s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes res-in { from { opacity: 0; transform: translateY(6px) scale(.97); } }
}

/* ---- bet box + quick chips ---- */
.bet-box { display: flex; flex-direction: column; gap: 7px; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-btn {
  appearance: none; flex: 1 1 0; min-width: 44px;
  background: var(--surface-3); color: var(--silver-dim);
  border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 8px; font: 600 12.5px/1 var(--ui); cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.chip-btn:hover { color: var(--moon); border-color: var(--stone); transform: translateY(-1px); }
.chip-btn:active { transform: translateY(0); }
.chip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* =========================================================================
   THE MOON WHEEL
   The disc is a real moon: limb-darkened body, maria, craters. The prize
   slices are drawn ON TOP at exactly their engine weight, so the dark side of
   the moon IS the losing side and the jackpot really is a hairline of light.
   ========================================================================= */
/* The moon's rim sits at 34.3% of the stage (RAD 158 in a 460 box); the halo
   and the win rays are sized against that number, so changing RAD means
   changing these too. */
/* tall enough for the moon plus the result line: `.cas-stage` clips, and a
   result sentence sheared off at the bottom edge is a bug, not a crop */
.cas-stage-moon { min-height: 524px; }
.moon-stage {
  position: relative; width: clamp(272px, 46vw, 408px); aspect-ratio: 1;
  display: grid; place-items: center;
}
.moon-svg { position: relative; width: 100%; height: 100%; display: block; z-index: 1; }
.moon-halo {
  position: absolute; left: 50%; top: 50%; width: 92%; height: 92%;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side,
    rgba(200,220,238,.20) 58%, rgba(160,190,214,.10) 76%, transparent 100%);
  transition: opacity .5s, transform .5s;
}
.moon-stage[data-flare="1"] .moon-halo { transform: translate(-50%, -50%) scale(1.1); }
.moon-stage[data-flare="jackpot"] .moon-halo {
  background: radial-gradient(circle closest-side,
    rgba(255,247,224,.44) 56%, rgba(245,198,84,.20) 76%, transparent 100%);
  transform: translate(-50%, -50%) scale(1.18);
}
/* the star field behind the moon */
.moon-sky { position: absolute; inset: -10%; pointer-events: none; overflow: hidden; }
.moon-sky i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #DCE6EE; opacity: .5;
}
@media (prefers-reduced-motion: no-preference) {
  .moon-sky i { animation: twinkle 3.4s ease-in-out infinite; }
  @keyframes twinkle { 0%, 100% { opacity: .18; } 50% { opacity: .8; } }
}
/* the index mark the wheel stops against */
.moon-mark {
  position: absolute; top: -2%; left: 50%; z-index: 3;
  transform: translateX(-50%); pointer-events: none;
  display: grid; justify-items: center; gap: 2px;
}
.moon-mark i {
  display: block; width: 18px; height: 17px; margin-bottom: -3px;
  background: linear-gradient(180deg, #FFF3D2, #E0BE72);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 0 8px rgba(245,198,84,.7));
}
.moon-mark::after {
  content: ""; width: 2px; height: 18px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(245,198,84,.85), rgba(245,198,84,0));
}
.moon-mark.is-tick i { animation: mark-tick .1s ease; }
@keyframes mark-tick { 50% { transform: translateY(-2.5px) scaleX(.86); } }
.moon-mark.is-lit i { filter: drop-shadow(0 0 15px rgba(255,238,190,1)); }

/* light burst on a win */
.moon-burst { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.moon-burst b {
  position: absolute; left: 50%; top: 50%; width: 2px; height: 15%;
  margin-left: -1px; border-radius: 2px; transform-origin: 50% 100%;
  background: linear-gradient(180deg, rgba(255,246,222,0), rgba(255,246,222,.95));
  opacity: 0;
}
/* the ray's own height is 15% of the stage and the moon's rim sits at 34.3%
   of it, so translateY(-155%) starts the ray straddling the rim and (-320%)
   throws it clear of the halo */
@media (prefers-reduced-motion: no-preference) {
  .moon-burst b { animation: ray-out .95s cubic-bezier(.2,.7,.3,1) forwards; }
  @keyframes ray-out {
    0%   { opacity: 0; transform: rotate(var(--a)) translateY(-155%) scaleY(.3); }
    24%  { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--a)) translateY(-320%) scaleY(1.3); }
  }
}
@media (prefers-reduced-motion: no-preference) {
  .moon-stage.is-quake { animation: quake .5s cubic-bezier(.36,.07,.19,.97); }
  @keyframes quake {
    10%, 90% { transform: translate(-1.5px, 1px); }
    30%, 70% { transform: translate(2.5px, -1.5px); }
    50%      { transform: translate(-2px, 2px); }
  }
}
/* The slices blend with `multiply`, so lowering their opacity would make them
   BRIGHTER — the winner is marked with its own outline above the blend groups
   instead of by dimming the losers. */
.wwin { fill: none; stroke: #FFF6DE; stroke-width: 3; stroke-linejoin: round;
        opacity: 0; transition: opacity .3s; }
.wwin.is-on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .wwin.is-on { animation: win-edge 1.5s ease-in-out 2; }
  @keyframes win-edge {
    0%, 100% { opacity: .55; stroke-width: 2.4; }
    50%      { opacity: 1;   stroke-width: 4.2; }
  }
}
/* A slice can be almost black or almost white, so the label picks its own
   contrast from the slice it sits on rather than trusting one colour to work
   on both. */
.wlab {
  font: 700 19px/1 var(--ui);
  font-variant-numeric: tabular-nums; paint-order: stroke;
  stroke-width: 3px; stroke-linejoin: round;
}
.wlab-on-dark  { fill: #E6EDF3; stroke: rgba(4,7,14,.60); }
/* a wide halo eats a dark glyph from the inside — keep this one thin */
.wlab-on-light { fill: #17222E; stroke: rgba(255,255,255,.5); stroke-width: 2px; font-size: 17px; }
/* the hairline prizes are called out beyond the rim, on the sky */
.wlab-call { font-size: 16px; stroke: rgba(4,7,14,.85); stroke-width: 4px; }
.wlead-out { stroke: rgba(233,237,239,.34); stroke-width: 1.2; }

/* the prize legend beside the wheel */
.prize-list { display: grid; gap: 5px; margin: 0 0 4px; }
.prize-row {
  display: grid; grid-template-columns: 12px 1fr auto; align-items: center;
  gap: 9px; font-size: 13.4px; color: var(--silver-dim);
  font-variant-numeric: tabular-nums;
}
.prize-sw { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(233,237,239,.18); }
.prize-val { color: var(--silver); }
.prize-odds { color: var(--silver-mut); font-size: 12.6px; }
.prize-row.is-won .prize-val { color: var(--moon); }
.prize-row.is-won .prize-odds { color: var(--silver-dim); }

/* =========================================================================
   COIN
   ========================================================================= */
/* Coin sizes are shared with buildCoinRim() in casino.mjs: the rim slices are
   pushed out to `width / 2`, so the two have to move together. */
.coin-stage {
  position: relative; width: 210px; height: 250px;
  display: grid; place-items: center; perspective: 1000px;
}
.coin3d {
  position: relative; width: 158px; height: 158px;
  transform-style: preserve-3d; will-change: transform;
}
.coin-face {
  position: absolute; inset: 0; border-radius: 50%;
  backface-visibility: hidden; overflow: hidden;
  box-shadow: 0 0 24px -8px rgba(196,214,228,.55);
}
.coin-face svg { width: 100%; height: 100%; display: block; }
.coin-tide { transform: rotateX(180deg); }
/* A REAL EDGE. Each slice is rotated around the coin's own axis, pushed out
   to the rim, then turned to face outward — 24 of them make a milled band
   that only shows while the coin is edge-on, which is exactly when a real
   coin shows its edge. Sizes must match buildCoinRim() in casino.mjs. */
.coin-rim { position: absolute; inset: 0; transform-style: preserve-3d; }
.coin-rim span {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 22px;
  margin: -11px 0 0 -5px; transform-origin: 50% 50%;
  background: linear-gradient(180deg, #4E606F, #97A8B6 22%, #D2DCE4 50%, #97A8B6 78%, #4E606F);
}
.coin-shadow {
  position: absolute; bottom: 6px; left: 50%; width: 124px; height: 17px;
  margin-left: -62px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.62), transparent 70%);
  will-change: transform, opacity;
}

/* =========================================================================
   PLAYING CARDS — one component, used by blackjack, the shared table and
   hold'em. Faces are real: corner index both ends, pip layout for 2-10.
   ========================================================================= */
.cardface {
  position: relative; width: 52px; height: 74px; flex: none;
  border-radius: 6px; overflow: hidden;
  background: linear-gradient(157deg, #FBFCFD 0%, #E7ECF0 46%, #C6D1DA 100%);
  color: #17212D; border: 1px solid #93A2AF;
  box-shadow: 0 5px 14px -7px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.7);
  font-variant-numeric: tabular-nums;
  transform-style: preserve-3d;
}
.cardface.red { color: #A82F2F; }
.cardface .cf-ix {
  position: absolute; top: 3px; left: 4px; line-height: .96;
  font: 700 12.5px/1 var(--ui); text-align: center; letter-spacing: -.04em;
}
.cardface .cf-ix span { display: block; font-size: 11px; margin-top: 0; }
.cardface .cf-ix-b { top: auto; left: auto; bottom: 3px; right: 4px; transform: rotate(180deg); }
.cardface .cf-big {
  position: absolute; inset: 0; display: grid; place-items: center;
  align-content: center; gap: 1px; line-height: 1;
}
.cardface .cf-big b { font: 700 25px/1 var(--display); letter-spacing: -.03em; }
.cardface .cf-big i { font-style: normal; font-size: 14px; line-height: 1; opacity: .9; }
.cardface.back {
  background:
    repeating-linear-gradient(45deg, rgba(159,182,201,.16) 0 5px, transparent 5px 10px),
    linear-gradient(160deg, #1A2735 0%, #0E1926 100%);
  border-color: var(--line-2); color: transparent;
  box-shadow: 0 5px 14px -7px rgba(0,0,0,.9), inset 0 0 0 1px rgba(159,182,201,.13);
}
.cardface.back::after {
  content: ""; position: absolute; inset: 6px; border-radius: 3px;
  border: 1px solid rgba(159,182,201,.22);
}
@media (max-width: 560px) {
  .cardface { width: 42px; height: 60px; }
  .cardface .cf-big b { font-size: 20px; }
  .cardface .cf-big i { font-size: 11px; }
  .cardface .cf-ix { font-size: 10.5px; }
  .cardface .cf-ix span { font-size: 9px; }
}
@media (prefers-reduced-motion: no-preference) {
  .cardface.is-dealt { animation: card-deal .46s cubic-bezier(.18,.72,.3,1) both; }
  @keyframes card-deal {
    0%   { opacity: 0; transform: translate(-190px, -96px) rotate(-24deg) scale(.86); }
    62%  { opacity: 1; }
    100% { opacity: 1; transform: none; }
  }
  .cardface.is-flip { animation: card-flip .5s cubic-bezier(.3,.7,.3,1) both; }
  @keyframes card-flip {
    0%   { transform: rotateY(90deg) scale(.94); opacity: .3; }
    100% { transform: none; opacity: 1; }
  }
}

/* =========================================================================
   BLACKJACK FELT
   ========================================================================= */
.felt {
  position: relative; width: 100%; max-width: 460px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 4px 0 2px;
}
.felt-arc { width: 100%; height: auto; opacity: .9; pointer-events: none; margin: -2px 0; }
.felt-txt { font: 600 9.6px/1 var(--ui); letter-spacing: .26em; fill: rgba(159,182,201,.45); }
.hand-row {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  min-height: 104px; justify-content: center;
}
.hand-lab { display: flex; align-items: center; gap: 9px; }
.hand-who {
  color: var(--silver-mut); font: 600 11.5px/1 var(--ui);
  letter-spacing: .13em; text-transform: uppercase;
}
.hand-cards {
  display: flex; gap: 7px; flex-wrap: wrap; min-height: 74px;
  align-items: center; justify-content: center;
}
.hand-total {
  flex: none;
  display: inline-grid; place-items: center; min-width: 34px; height: 26px;
  padding: 0 9px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--line-2);
  color: var(--silver); font: 700 13px/1 var(--ui);
  font-variant-numeric: tabular-nums;
}
.hand-total:empty { display: none; }
.hand-total[data-kind="bust"] { color: var(--down); border-color: rgba(224,138,138,.42); }
.hand-total[data-kind="bj"] { color: #F5C654; border-color: rgba(245,198,84,.46); }

/* =========================================================================
   MINES
   ========================================================================= */
.mines-grid {
  display: grid; grid-template-columns: repeat(5, 60px);
  gap: 8px; justify-content: center; perspective: 700px;
}
@media (max-width: 480px) { .mines-grid { grid-template-columns: repeat(5, 48px); gap: 6px; } }
.mine-tile {
  position: relative; width: 60px; height: 60px; padding: 0;
  background: none; border: 0; cursor: pointer;
  transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3,.7,.3,1);
}
@media (max-width: 480px) { .mine-tile { width: 48px; height: 48px; } }
.mine-tile[disabled] { cursor: default; }
.mine-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 11px; }
.mine-tile .mt-f, .mine-tile .mt-b {
  position: absolute; inset: 0; border-radius: 11px;
  display: grid; place-items: center; backface-visibility: hidden;
}
.mine-tile .mt-f {
  background: linear-gradient(158deg, #1C2836, #101B27);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: background .15s, transform .15s, border-color .15s;
}
.mine-tile .mt-f::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(159,182,201,.20);
}
.mine-tile:hover:not([disabled]) .mt-f { background: linear-gradient(158deg, #26374A, #16232F); border-color: var(--stone); }
.mine-tile:hover:not([disabled]) .mt-f::after { background: rgba(196,214,228,.5); }
.mine-tile .mt-b { transform: rotateY(180deg); }
.mine-tile .mt-b svg { width: 30px; height: 30px; }
@media (max-width: 480px) { .mine-tile .mt-b svg { width: 24px; height: 24px; } }
.mine-tile[data-state] { transform: rotateY(180deg); }
.mine-tile[data-state="safe"] .mt-b {
  background: radial-gradient(circle at 36% 28%, rgba(111,215,154,.30), rgba(42,91,68,.42));
  border: 1px solid rgba(111,215,154,.46); color: #8DE7B4;
}
.mine-tile[data-state="boom"] .mt-b {
  background: radial-gradient(circle at 36% 28%, rgba(224,138,138,.42), rgba(91,42,42,.7));
  border: 1px solid rgba(224,138,138,.65); color: #FFC9C9;
}
.mine-tile[data-state="mine"] .mt-b {
  background: linear-gradient(158deg, #141C27, #0C141E);
  border: 1px solid var(--line-2); color: #7A8A99;
}
@media (prefers-reduced-motion: no-preference) {
  .mine-tile[data-state="safe"] .mt-b { animation: gem-pop .4s cubic-bezier(.2,.7,.3,1) .28s both; }
  @keyframes gem-pop { 0% { transform: rotateY(180deg) scale(.7); } 60% { transform: rotateY(180deg) scale(1.09); } 100% { transform: rotateY(180deg) scale(1); } }
  .mines-grid.is-boom { animation: quake .46s cubic-bezier(.36,.07,.19,.97); }
}
.mult-well {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 4px 10px; padding: 12px 14px; margin: 2px 0 4px;
  border-radius: 12px; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-3), #0D1621);
  transition: border-color .25s, box-shadow .25s;
}
.mult-lab {
  grid-column: 1 / -1; color: var(--silver-mut); font-size: 11.5px;
  letter-spacing: .11em; text-transform: uppercase;
}
.mult-x {
  font: 700 26px/1 var(--ui); color: var(--silver-dim);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  transition: color .25s;
}
.mult-val { color: var(--silver-mut); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.mult-well[data-live="1"] {
  border-color: rgba(111,215,154,.34);
  box-shadow: 0 0 26px -14px rgba(111,215,154,.9);
}
.mult-well[data-live="1"] .mult-x { color: var(--live); }
.mult-well[data-live="1"] .mult-val { color: var(--silver); }

/* =========================================================================
   CRASH
   ========================================================================= */
.cas-stage-crash { justify-content: flex-start; }
.crash-stage {
  position: relative; width: 100%; max-width: 560px; aspect-ratio: 2 / 1;
  border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, rgba(8,14,23,.6), rgba(6,11,19,.9));
  border: 1px solid var(--line);
}
.crash-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.crash-grid-l { stroke: rgba(159,182,201,.075); stroke-width: 1; }
.crash-glab { font: 500 9px/1 var(--mono); fill: rgba(159,182,201,.42); }
.crash-tlab { font: 600 10px/1 var(--ui); fill: rgba(111,215,154,.85); }
.crash-x {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font: 700 clamp(38px, 7vw, 60px)/1 var(--ui); color: var(--moon);
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
  text-shadow: 0 0 30px rgba(8,14,23,.95); pointer-events: none;
  transition: color .2s;
}
.crash-x[data-kind="win"] { color: var(--live); }
.crash-x[data-kind="lose"] { color: var(--down); }
@media (prefers-reduced-motion: no-preference) {
  .crash-x[data-kind="lose"] { animation: quake .42s cubic-bezier(.36,.07,.19,.97); }
  .crash-x[data-kind="win"] { animation: cash-pop .5s cubic-bezier(.2,.7,.3,1); }
  @keyframes cash-pop { 40% { transform: translate(-50%, -50%) scale(1.13); } }
}
.crash-stage.is-bust { animation: bust-flash .5s ease; }
@keyframes bust-flash { 0%, 100% { box-shadow: none; } 22% { box-shadow: inset 0 0 70px -10px rgba(224,138,138,.55); } }
.crash-stage.is-bust .crash-svg #crash-line,
.crash-stage.is-bust .crash-svg #crash-glow { stroke: #E08A8A; }

/* =========================================================================
   SHARED TABLES
   ========================================================================= */
.tbl { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.tbl-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap;
  color: var(--silver-dim); font-size: 13.5px;
  padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.tbl-head b { color: var(--moon); font-size: 15.5px; }
.tbl-pot {
  display: inline-flex; align-items: center; gap: 7px;
  color: #F3CF77; font-variant-numeric: tabular-nums; font-weight: 600;
}
.tbl-board { display: flex; gap: 7px; align-items: center; min-height: 78px; flex-wrap: wrap; }
.tbl-seat {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px; padding: 9px 12px; font-size: 14px; color: var(--silver);
  transition: border-color .2s, box-shadow .2s, opacity .2s;
}
.tbl-seat[data-turn="1"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(159,182,201,.22), 0 0 30px -14px rgba(159,182,201,.9);
}
@media (prefers-reduced-motion: no-preference) {
  .tbl-seat[data-turn="1"] { animation: turn-pulse 1.9s ease-in-out infinite; }
  @keyframes turn-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(159,182,201,.18), 0 0 26px -16px rgba(159,182,201,.7); }
    50%      { box-shadow: 0 0 0 1px rgba(159,182,201,.34), 0 0 34px -10px rgba(159,182,201,1); }
  }
}
.tbl-seat[data-me="1"] { background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.tbl-seat[data-me="1"] .tbl-name { color: var(--moon); }
.tbl-seat[data-out="1"] { opacity: .5; }
.tbl-seat[data-win="1"] { border-color: rgba(111,215,154,.5); }
.tbl-name { flex: none; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.tbl-av {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; background: var(--surface-3); border: 1px solid var(--line-2);
  font: 700 10.5px/1 var(--ui); color: var(--silver-dim); letter-spacing: .02em;
}
.tbl-seat[data-me="1"] .tbl-av { border-color: var(--accent); color: var(--moon); }
.tbl-fact { color: var(--silver-mut); font-size: 12.5px; }
.tbl-pay { margin-left: auto; color: var(--live); font-variant-numeric: tabular-nums; font-weight: 600; }
.tbl-pay[data-kind="lose"] { color: var(--down); }
.tbl-commit { color: var(--silver-mut); font-size: 11.5px; word-break: break-all; margin: 2px 0 0; font-family: var(--mono); }

/* ---- odds + fairness ---- */
.cas-odds {
  margin-top: 10px; overflow-x: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px;
}
.cas-odds table { border-collapse: collapse; width: 100%; min-width: 480px; }
.cas-odds caption {
  text-align: left; color: var(--moon); font-weight: 600;
  padding-bottom: 8px; font-size: 15px;
}
.cas-odds th, .cas-odds td {
  text-align: left; padding: 7px 12px 7px 0; font-size: 14px;
  border-top: 1px solid var(--line); color: var(--silver-dim);
}
.cas-odds th { color: var(--silver-mut); font-weight: 500; }
.cas-odds td b { color: var(--silver); font-variant-numeric: tabular-nums; }
.cas-odds tr[data-on="1"] td { color: var(--silver); }
.cas-fair { margin-top: 14px; color: var(--silver-dim); font-size: 14.5px; }
.cas-fair summary { cursor: pointer; color: var(--accent); }
.cas-fair p { margin: 10px 0 0; max-width: 72ch; }