/* ─────────────────────────────────────────────────────────────────
   Aegis Casino — Activity styles.

   The look is a card room, not a control panel: green felt under warm
   overhead light, brass trim, and the Aegis gold as the accent. The
   dashboard's navy is deliberately absent — this is meant to feel like a
   different place, not another settings page.

   Mobile-first: the base rules target a phone, and wide screens get a real
   two-column table rather than a stretched column with dead space either
   side. Nothing depends on hover, and tap targets stay at 44px.
   ───────────────────────────────────────────────────────────────── */

:root {
  --gold: #D4A017;
  --gold-lit: #f0c548;
  --gold-dim: #8a6a10;

  /* Felt. Three greens rather than one so the table reads as lit from
     above instead of a flat fill. */
  --felt-deep: #06180f;
  --felt: #0c2a1b;
  --felt-lit: #14402a;

  /* Aegis blue — the same navy family the dashboard uses. Green is the room;
     blue is what the tables are topped with. */
  --blue-deep: #080c18;
  --blue: #0f1628;
  --blue-lit: #1a2440;
  --blue-edge: #1e2d4a;
  --text: #f6f1e4;
  --muted: #9aa79c;
  --win: #6ee787;
  --lose: #ff6b6b;
  --radius: 16px;
  --fade: 420ms;

  /* One symbol cell. Every reel measurement derives from this, so the
     machine scales by changing one number. Sized so five reels of three fit
     a phone without the window running past the fold. */
  --cell: 52px;
  --rows: 3;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* [hidden] must beat any display rule set on the same element. Without this
   a `.screen { display: flex }` silently wins over the attribute and the
   element stays on screen. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* The room: a pool of light over the table, falling off to dark at the
   edges. The repeating diagonal threads are the felt weave — barely visible,
   but it stops large areas reading as flat colour. */
body {
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(240,197,72,.10), transparent 62%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse 130% 95% at 50% 42%, var(--felt-lit) 0%, var(--felt) 42%, var(--felt-deep) 100%);
  background-attachment: fixed;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding:
    calc(env(safe-area-inset-top) + 12px)
    calc(env(safe-area-inset-right) + 14px)
    calc(env(safe-area-inset-bottom) + 14px)
    calc(env(safe-area-inset-left) + 14px);
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}
#screens { flex: 1; display: flex; flex-direction: column; padding-top: 54px; }

/* ── Screen transitions ────────────────────────────────────────── */
.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: none;
  transition: opacity var(--fade) ease, transform var(--fade) cubic-bezier(.22,.7,.3,1);
}
.screen.entering { opacity: 0; transform: translateY(16px) scale(.985); }
.screen.leaving  { opacity: 0; transform: translateY(-10px) scale(.99); }

/* ── Boot screen ───────────────────────────────────────────────── */
/* Full-bleed and above everything. The floor is built underneath while this
   is still covering the viewport, so revealing it is a fade rather than a
   load — nothing pops in. */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  background:
    radial-gradient(ellipse 70% 50% at 50% 32%, rgba(240,197,72,.13), transparent 65%),
    radial-gradient(ellipse 130% 95% at 50% 45%, var(--felt-lit) 0%, var(--felt) 45%, var(--felt-deep) 100%);
  display: grid;
  place-items: center;
  padding: 32px 24px;
  opacity: 1;
  transition: opacity var(--fade) ease;
}
.boot-screen.leaving { opacity: 0; }
.boot-inner { text-align: center; max-width: 360px; }
.boot-mark {
  width: 78px; height: 78px; margin: 0 auto 20px;
  display: block; object-fit: contain;
  filter: drop-shadow(0 8px 22px rgba(212,160,23,.45));
  animation: floaty 3s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.boot-inner h1 {
  margin: 0 0 8px; font-size: 1.45rem; letter-spacing: .01em; font-weight: 800;
}
.boot-inner p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.boot-spinner {
  width: 26px; height: 26px; margin: 22px auto 0;
  border: 2px solid rgba(212,160,23,.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#boot-retry { margin-top: 20px; }

/* ── Floating chrome ───────────────────────────────────────────── */
/* Fixed rather than in the flow, so the balance sits in exactly the same
   place on every screen and never shifts the content beneath it. */
.float-balance {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  right: calc(env(safe-area-inset-right) + 14px);
  z-index: 30;
  background: linear-gradient(180deg, rgba(12,42,27,.94), rgba(6,24,15,.94));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(212,160,23,.45);
  border-radius: 999px;
  padding: 7px 16px;
  text-align: right;
  box-shadow: 0 6px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(240,197,72,.18);
  animation: pillIn var(--fade) ease;
}
@keyframes pillIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.balance-label {
  display: block; font-size: .55rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); line-height: 1;
}
.balance-amount {
  font-size: 1.1rem; font-weight: 800; color: var(--gold-lit);
  font-variant-numeric: tabular-nums; display: inline-block; line-height: 1.25;
  text-shadow: 0 0 14px rgba(240,197,72,.35);
}
/* Flashes when the balance changes so a win registers even if you were
   watching the reels. Also fires when currency moves outside the Activity,
   which is how you notice a /daily landing. */
.balance-amount.bump { animation: bump .45s ease; }
@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* The amount that just moved. Starts under the balance and flies up into it,
   landing as the total starts counting — so the change is legible on its own
   before it is folded into the running figure. */
.float-balance { position: fixed; }
.balance-delta {
  position: absolute;
  top: 100%;
  right: 16px;
  margin-top: 2px;
  font-size: .82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  animation: deltaFly 520ms cubic-bezier(.4,0,.25,1) forwards;
}
.balance-delta.up { color: var(--win); text-shadow: 0 0 10px rgba(110,231,135,.6); }
.balance-delta.down { color: var(--lose); text-shadow: 0 0 10px rgba(255,107,107,.55); }
@keyframes deltaFly {
  0%   { opacity: 0; transform: translateY(6px) scale(.9); }
  22%  { opacity: 1; transform: translateY(0) scale(1.06); }
  62%  { opacity: 1; transform: translateY(0) scale(1); }
  /* Up into the balance, shrinking as it goes, so it reads as being absorbed
     rather than drifting off the top. */
  100% { opacity: 0; transform: translateY(-24px) scale(.72); }
}

.float-back {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  left: calc(env(safe-area-inset-left) + 14px);
  z-index: 30;
  width: 40px; height: 40px; min-width: 40px; min-height: 40px;
  border: 1px solid rgba(212,160,23,.3);
  border-radius: 50%;
  background: rgba(6,24,15,.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  font: inherit; font-size: 1.6rem; line-height: 1; padding: 0 0 4px;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease;
  animation: pillIn var(--fade) ease;
}
.float-back:active { transform: scale(.93); }

/* Discord's mobile client draws its own control row (the leave button and
   friends) over the top of the activity, and safe-area insets say nothing
   about it — they describe the hardware, not Discord's chrome. The class is
   set from sdk.platform rather than a width query, because a narrow desktop
   window is not a phone and should not get phone spacing. */
body.is-mobile .float-balance,
body.is-mobile .float-back { top: calc(env(safe-area-inset-top) + 62px); }
body.is-mobile #screens { padding-top: 104px; }

/* ── Tables ────────────────────────────────────────────────────── */
/* Every surface a player interacts with is the same object: Aegis blue felt
   under a thick brass edge, sitting on the green room. Defining it once is
   what keeps the machine, the placards and the side panel looking like
   furniture from the same room rather than three unrelated boxes. */
.table-surface,
.machine,
.table-side,
.paytable {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(240,197,72,.07), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, var(--blue-lit) 0%, var(--blue) 55%, var(--blue-deep) 100%);
  border: 3px solid var(--gold-dim);
  border-radius: var(--radius);
  box-shadow:
    inset 0 0 0 1px rgba(240,197,72,.35),
    inset 0 2px 26px rgba(0,0,0,.6),
    0 10px 30px rgba(0,0,0,.45);
}

/* ── Casino floor ──────────────────────────────────────────────── */
/* A marquee rather than a page heading: brass rules above and below, suits
   in the corners, the sort of sign that hangs over an entrance. */
.floor-head {
  margin-bottom: 18px;
  padding: 14px 16px 13px;
  position: relative;
  text-align: center;
  border-top: 1px solid rgba(212,160,23,.35);
  border-bottom: 1px solid rgba(212,160,23,.35);
  background: linear-gradient(180deg, rgba(240,197,72,.07), transparent 70%);
}
.floor-head::before,
.floor-head::after {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: .9rem; letter-spacing: 4px;
  color: rgba(212,160,23,.28);
  pointer-events: none;
}
.floor-head::before { content: '♠ ♦'; left: 12px; }
.floor-head::after  { content: '♥ ♣'; right: 12px; }
.floor-head h1 {
  margin: 0 0 3px;
  font-size: 1.15rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-lit);
  text-shadow: 0 0 18px rgba(240,197,72,.3);
}
.floor-sub { margin: 0; color: var(--muted); font-size: .82rem; }

.game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }

/* Each game is a table placard: felt and wood, brass edge, and a soft inner
   light so it sits on the table rather than floating above it. */
.game-card {
  position: relative;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(240,197,72,.06), transparent 70%),
    linear-gradient(180deg, var(--blue-lit) 0%, var(--blue) 60%, var(--blue-deep) 100%);
  border: 2px solid var(--gold-dim);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: left;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  min-height: 116px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: inset 0 0 0 1px rgba(240,197,72,.18), 0 5px 16px rgba(0,0,0,.4);
  transition: transform .12s ease, border-color .18s ease, box-shadow .18s ease, opacity .15s ease;
}
.game-card:active { transform: scale(.97); }
.game-card.playable {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(240,197,72,.4), 0 6px 20px rgba(0,0,0,.45);
}
.game-card.playable:hover {
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(240,197,72,.2), 0 8px 26px rgba(0,0,0,.5), 0 0 22px rgba(212,160,23,.18);
  transform: translateY(-2px);
}
.game-card:disabled { opacity: .38; cursor: not-allowed; }
.game-card:disabled:hover { transform: none; }
.game-emoji { font-size: 1.7rem; line-height: 1; }
.game-name {
  font-weight: 800; font-size: .92rem;
  letter-spacing: .03em; text-transform: uppercase; color: var(--gold-lit);
}
.game-card:disabled .game-name { color: var(--text); }
.game-blurb { color: var(--muted); font-size: .74rem; line-height: 1.35; }
.game-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; }
.game-players {
  font-size: .7rem; font-weight: 800; color: var(--win);
  display: inline-flex; align-items: center; gap: 5px;
}
.game-players .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--win);
  box-shadow: 0 0 8px rgba(110,231,135,.8);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.game-tag {
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* ── The machine ───────────────────────────────────────────────── */
/* A cabinet: dark wood body, brass bezel, warm light spilling from inside. */
.machine {
  position: relative;
  padding: 20px 16px 6px;
}
/* Brass trim strip across the top of the cabinet. */
.machine::before {
  content: '';
  position: absolute; left: 14%; right: 14%; top: -1px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-lit), transparent);
  box-shadow: 0 0 12px rgba(240,197,72,.5);
}
.reels { display: flex; gap: 6px; justify-content: center; position: relative; }

/* The winning-line overlay. Sits above the reels and their curvature shading,
   and takes no pointer events so it can never block the machine. */
.payline-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}
.payline-box, .payline-path {
  filter: drop-shadow(0 0 5px currentColor);
  animation: paylineIn 260ms ease-out both;
}
.payline-path { opacity: .85; }
@keyframes paylineIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Each reel is a viewport three cells tall. The strip inside is many cells
   long and slides upward; only the cells in the window are visible, which is
   what makes it read as a spinning drum rather than a fade. */
.reel {
  flex: 1;
  height: calc(var(--cell) * var(--rows));
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(180deg, #04070f, #010308);
  border: 2px solid rgba(212,160,23,.4);
  box-shadow: inset 0 0 20px rgba(0,0,0,.95);
  position: relative;
}
/* Curvature: darker towards the top and bottom of the window so symbols
   appear to roll around a drum rather than slide up a flat surface. Shallow,
   because across three rows a deep gradient swallows the outer two. */
.reel::before, .reel::after {
  content: ''; position: absolute; left: 0; right: 0; height: 15%;
  pointer-events: none; z-index: 2;
}
.reel::before { top: 0; background: linear-gradient(rgba(0,0,0,.8), transparent); }
.reel::after { bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,.8)); }

.strip { will-change: transform; }
.sym {
  height: var(--cell);
  display: grid;
  place-items: center;
  font-size: calc(var(--cell) * 0.62);
  line-height: 1;
  user-select: none;
}

/* A symbol that was part of a paying line. Across five lines a win is
   genuinely hard to spot otherwise — a run along the V reads as scatter until
   the symbols that paid are picked out. */
.sym.hit {
  animation: hitPulse 900ms ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(240,197,72,.95)) drop-shadow(0 0 22px rgba(240,197,72,.55));
}
@keyframes hitPulse {
  0%, 100% { transform: scale(1.14); }
  50%      { transform: scale(1.0); }
}

.table-main .machine.win, .machine.win { animation: winGlow 1s ease; }
@keyframes winGlow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(240,197,72,.35), inset 0 2px 26px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.45); }
  50% { box-shadow: inset 0 0 0 1px rgba(240,197,72,.35), inset 0 2px 26px rgba(0,0,0,.6), 0 0 36px rgba(110,231,135,.6), 0 10px 30px rgba(0,0,0,.45); }
}
/* A loss gets the same treatment in red. Wins glowing while losses passed in
   silence made every spin feel like a near-miss. */
.machine.lose { animation: loseGlow 1s ease; }
@keyframes loseGlow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(240,197,72,.35), inset 0 2px 26px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.45); }
  50% { box-shadow: inset 0 0 0 1px rgba(240,197,72,.35), inset 0 2px 26px rgba(0,0,0,.6), 0 0 32px rgba(255,107,107,.45), 0 10px 30px rgba(0,0,0,.45); }
}

/* ── Result + session ──────────────────────────────────────────── */
.result {
  text-align: center; margin: 16px 0 12px;
  font-size: 1rem; min-height: 1.4em; color: var(--muted);
  transition: color .2s ease;
}
.result.win { color: var(--win); font-weight: 800; text-shadow: 0 0 16px rgba(110,231,135,.4); }
.result.lose { color: var(--lose); }

.session-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(8,12,24,.75);
  border: 1px solid rgba(212,160,23,.28);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 14px;
}
.session-label, .session-spins {
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.session-net {
  font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted);
}
.session-net.up { color: var(--win); }
.session-net.down { color: var(--lose); }

/* ── Controls ──────────────────────────────────────────────────── */
.controls { margin-top: auto; }
.bet-row { display: flex; align-items: stretch; gap: 10px; margin-bottom: 10px; }
.bet-display {
  flex: 1;
  background: rgba(8,12,24,.75);
  border: 1px solid rgba(212,160,23,.3);
  border-radius: 12px; display: grid; place-items: center; padding: 8px;
}
.bet-label {
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.bet-amount {
  font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold-lit);
}

.btn {
  font: inherit; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, var(--blue-lit), var(--blue));
  border: 1px solid rgba(212,160,23,.3);
  color: var(--text);
  /* 44px is the smallest reliable thumb target; every control clears it. */
  min-height: 44px; min-width: 44px;
  transition: transform .08s ease, opacity .15s ease, background .15s ease,
              color .15s ease, border-color .15s ease;
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-step { font-size: 1.5rem; font-weight: 700; width: 56px; }
.btn-primary {
  background: linear-gradient(180deg, var(--gold-lit), var(--gold-dim));
  border-color: var(--gold);
  color: #221800; font-weight: 800; padding: 0 20px;
}

.quick-row { display: flex; gap: 8px; margin-bottom: 12px; }
.btn-quick { flex: 1; font-size: .8rem; font-weight: 700; color: var(--muted); }
.btn-quick.active {
  color: #221800;
  background: linear-gradient(180deg, var(--gold-lit), var(--gold));
  border-color: var(--gold-lit);
}

.spin-row { display: flex; gap: 10px; }
/* The lever. Brass, lit, and the only thing on screen with a real shine. */
.btn-spin {
  flex: 1; min-height: 60px; font-size: 1.18rem; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--gold-lit) 0%, var(--gold) 45%, var(--gold-dim) 100%);
  border-color: var(--gold-lit);
  color: #221800;
  box-shadow: 0 6px 20px rgba(212,160,23,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-spin:disabled {
  background: linear-gradient(180deg, var(--blue-lit), var(--blue));
  color: var(--muted); box-shadow: none;
}
.btn-auto {
  min-height: 60px; width: 92px; font-size: .82rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.btn-auto[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--win), #35a457);
  border-color: var(--win); color: #04220f;
  box-shadow: 0 0 18px rgba(110,231,135,.35);
}

/* ── Wide screens ──────────────────────────────────────────────── */
/* The single column left most of a desktop window empty. Wide layouts get a
   proper table instead: more games across, and the machine sitting beside
   its stats and controls rather than stacked above them. */
@media (min-width: 760px) {
  :root { --cell: 74px; }
  #app { max-width: 1180px; }
  #screens { padding-top: 60px; }

  .floor-head { padding: 18px 20px 16px; margin-bottom: 22px; }
  .floor-head h1 { font-size: 1.5rem; }
  .floor-head::before, .floor-head::after { font-size: 1.1rem; }
  .game-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .game-card { min-height: 148px; padding: 16px 14px; }
  .game-emoji { font-size: 2rem; }

  #screen-slots, #screen-crash, #screen-blackjack {
    display: grid;
    align-content: center;
    gap: 0 26px;
  }
  .machine { padding: 26px 22px 8px; }
  .table-side { padding: 20px; }
  .controls { margin-top: 0; }
  .session-bar { margin-bottom: 18px; }
}

@media (min-width: 1100px) {
  #app { max-width: 1360px; }
}

/* Respect a stated preference for less motion: the reels still land on the
   right symbols, they just stop moving to get there, and screens swap rather
   than crossfade. The result is never conveyed by animation alone — the text
   and the balance always say it. */
@media (prefers-reduced-motion: reduce) {
  .strip { transition: none !important; }
  .screen { transition: none !important; }
  .screen.entering, .screen.leaving { opacity: 1; transform: none; }
  .machine.win, .machine.lose, .balance-amount.bump,
  .game-players .dot, .boot-mark, .boot-spinner { animation: none; }
  /* The glow stays — it is how a winning line is identified — but it stops
     pulsing. */
  .sym.hit { animation: none; transform: scale(1.1); }
  /* Cards arrive in place; the collect sequence skips itself entirely. */
  .bj-card { transition: none !important; }
  .game-card.playable:hover { transform: none; }
}

/* ── Table layout ──────────────────────────────────────────────── */
/* The two halves are the fix for the uneven panels in the screenshot: they
   were different heights because the side column spanned two grid rows while
   the machine spanned one. Now each half is a single stretched cell, so they
   start and end together whatever is inside them. */
.table-main, .table-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.table-main .machine { margin: 0; }
.table-side .controls { margin-top: auto; }


/* ── Paytable ──────────────────────────────────────────────────── */
.paytable {
  padding: 12px 14px 14px;
}
.paytable-head {
  margin: 0 0 10px;
  font-size: .66rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-lit);
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.paytable-note {
  font-size: .58rem; letter-spacing: .08em; color: var(--muted); font-weight: 600;
  margin: 0 0 10px;
}
.paytable-at {
  font-size: .6rem; letter-spacing: .1em; color: var(--muted);
  text-transform: none; font-weight: 700;
}
.paytable-at #paytable-bet { color: var(--gold-lit); }
/* One row per symbol, its run lengths across the columns — the layout a real
   machine's glass uses, and the only one that stays readable now that every
   symbol pays four different amounts. */
.paytable-rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.paytable-row {
  display: grid;
  grid-template-columns: 1.6rem repeat(4, 1fr);
  align-items: center; gap: 6px;
  padding: 4px 8px;
  background: rgba(8,12,24,.6);
  border: 1px solid rgba(212,160,23,.16);
  border-radius: 8px;
}
/* The header carries the run lengths, so it needs no plate of its own. */
.paytable-head-row {
  background: none; border-color: transparent; padding-bottom: 0;
}
.paytable-head-row .pay-col {
  color: var(--muted); font-size: .5rem; letter-spacing: .04em;
  font-weight: 700; line-height: 1.15;
}
.pay-symbols { font-size: 1rem; line-height: 1; }
.pay-mult {
  font-size: .72rem; font-weight: 800; color: var(--gold-lit);
  font-variant-numeric: tabular-nums;
}
.pay-col { text-align: right; }
/* A run length this symbol doesn't pay on. Dimmed rather than blank so the
   columns still line up and the gap reads as deliberate. */
.pay-none { color: rgba(255,255,255,.2); }

/* ── Crash ─────────────────────────────────────────────────────── */
.rocket { padding-bottom: 14px; }
.rocket-graph {
  position: relative;
  height: calc(var(--cell) * var(--rows));
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #04070f, #010308);
  border: 2px solid rgba(212,160,23,.4);
  box-shadow: inset 0 0 20px rgba(0,0,0,.95);
}
.crash-curve { position: absolute; inset: 0; width: 100%; height: 100%; }
.crash-line {
  fill: none;
  stroke: var(--win);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(110,231,135,.65));
}
.crash-fill { fill: rgba(110,231,135,.10); stroke: none; }
/* Burst: the whole trace flips red, which is the clearest possible statement
   that the round is over and the stake is gone. */
.is-bust .crash-line { stroke: var(--lose); filter: drop-shadow(0 0 8px rgba(255,107,107,.7)); }
.is-bust .crash-fill { fill: rgba(255,107,107,.12); }

/* Multiplier scale down the left edge. The values are redrawn as the graph
   rescales, so the climb is always read against round numbers. */
.crash-axis {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
}
.crash-axis-tick {
  position: absolute;
  left: 6px;
  transform: translateY(-50%);
  font-size: .56rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.42);
  text-shadow: 0 1px 6px rgba(0,0,0,.95);
}
/* A hairline across the plot at each labelled multiple. */
.crash-axis-tick::after {
  content: '';
  position: absolute;
  left: 100%; top: 50%;
  margin-left: 6px;
  width: 100vw; height: 1px;
  background: rgba(255,255,255,.07);
}

.crash-ship {
  position: absolute;
  font-size: 1.25rem;
  transform: translate(-50%, -50%) rotate(-18deg);
  transition: none;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 0 8px rgba(240,197,72,.55));
}
.is-bust .crash-ship { animation: shipPop 420ms ease-out forwards; }
@keyframes shipPop {
  0%   { transform: translate(-50%, -50%) rotate(-18deg) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(24deg) scale(1.9); opacity: 0; }
}

.crash-readout {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
  gap: 2px;
}
.crash-mult {
  font-size: 2.4rem; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-shadow: 0 2px 18px rgba(0,0,0,.9);
}
.crash-mult.bust { color: var(--lose); }
.crash-mult.won { color: var(--win); }
.crash-cashval {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  color: var(--muted);
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
}

/* Where recent rounds burst. */
.crash-history { display: flex; flex-wrap: wrap; gap: 5px; }
.crash-chip {
  font-size: .68rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(8,12,24,.6);
  border: 1px solid rgba(212,160,23,.16);
  color: var(--muted);
}
.crash-chip.low { color: #ff9f9f; }
.crash-chip.good { color: var(--win); }
.crash-chip.gold { color: var(--gold-lit); border-color: rgba(212,160,23,.5); }
/* A round the player was actually in and banked. */
.crash-chip.cashed { box-shadow: inset 0 0 0 1px rgba(110,231,135,.55); }

/* Auto cash-out. */
.auto-cash {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 12px;
  padding: 8px 10px;
  background: rgba(8,12,24,.5);
  border: 1px solid rgba(212,160,23,.16);
  border-radius: 10px;
}
.auto-cash-label {
  font-size: .6rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.auto-cash-field { display: flex; align-items: center; gap: 3px; }
.auto-cash-input {
  width: 68px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(212,160,23,.3);
  border-radius: 7px;
  color: var(--text);
  font: inherit; font-size: .88rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 5px 7px;
}
.auto-cash-input:disabled { opacity: .45; }
.auto-cash-x { font-size: .88rem; font-weight: 800; color: var(--gold-lit); }

/* ── Provably fair ─────────────────────────────────────────────── */
.fair-btn {
  font: inherit;
  font-size: .58rem; font-weight: 800; letter-spacing: .06em;
  text-transform: none;
  color: var(--gold-lit);
  background: rgba(212,160,23,.1);
  border: 1px solid rgba(212,160,23,.35);
  border-radius: 999px;
  padding: 3px 9px;
  cursor: pointer;
}
.fair-btn:active { transform: scale(.95); }

.proof-panel {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(2,8,5,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px 16px;
  overflow-y: auto;
  animation: pillIn var(--fade) ease;
}
.proof-card {
  width: 100%; max-width: 560px;
  max-height: 100%;
  overflow-y: auto;
  padding: 20px 22px 24px;
  border-radius: var(--radius);
  border: 3px solid var(--gold-dim);
  background: linear-gradient(180deg, var(--blue-lit) 0%, var(--blue) 55%, var(--blue-deep) 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,.7);
}
.proof-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 4px;
}
.proof-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.proof-close {
  font: inherit; font-size: 1.5rem; line-height: 1;
  background: none; border: none; color: var(--muted);
  cursor: pointer; padding: 0 4px;
}
.proof-card h3 {
  margin: 18px 0 6px;
  font-size: .64rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-lit);
}
.proof-card p, .proof-card li {
  margin: 0 0 8px; font-size: .8rem; line-height: 1.55; color: var(--text);
}
.proof-card ul { margin: 0; padding-left: 18px; }
.proof-code {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(212,160,23,.2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .7rem; line-height: 1.6;
  color: #cfe9d6;
  /* A formula must never be silently reflowed — it would stop being the
     formula. */
  white-space: pre;
  overflow-x: auto;
}
.proof-body { display: flex; flex-direction: column; gap: 6px; }
.proof-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 10px;
  background: rgba(8,12,24,.6);
  border: 1px solid rgba(212,160,23,.16);
  border-radius: 8px;
}
.proof-key {
  font-size: .55rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.proof-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem; color: var(--gold-lit);
  /* Seeds are 64 characters and must be readable and copyable in full. */
  word-break: break-all;
}
.proof-note { color: var(--muted); font-size: .78rem; }

/* Cash Out takes over the bet button mid-round, and has to read as a
   different, more urgent action than the one that placed the bet. */
.btn-cash {
  background: linear-gradient(180deg, #4ade80, #16a34a) !important;
  color: #04180c !important;
  animation: cashPulse 1.1s ease-in-out infinite;
}
@keyframes cashPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,.5); }
  50%      { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
}

/* ── Recent spins ──────────────────────────────────────────────── */
/* Hidden by default. On a stacked layout the side column has no gap to fill,
   and this would just be more to scroll past. */
.history { display: none; }
.history-head {
  margin: 0 0 8px;
  font-size: .62rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-lit);
}
.history-rows {
  display: flex; flex-direction: column; gap: 3px;
  /* The list is capped by the space available rather than a row count, so it
     fills the column exactly and never pushes the controls off the bottom. */
  flex: 1; min-height: 0; overflow: hidden;
}
.history-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 3px 8px;
  background: rgba(8,12,24,.5);
  border: 1px solid rgba(212,160,23,.12);
  border-radius: 6px;
  flex: 0 0 auto;
  animation: historyIn 220ms ease-out both;
}
@keyframes historyIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.history-what {
  font-size: .72rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-none { color: var(--muted); }
.history-amount {
  font-size: .72rem; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--muted);
}
.history-amount.up { color: var(--win); }
.history-amount.down { color: var(--lose); }
.history-empty {
  margin: 0; font-size: .66rem; color: var(--muted);
}

/* ── Payline legend ────────────────────────────────────────────── */
.paylines-card { padding: 12px 14px 14px; }
.payline-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.payline-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 4px;
  background: rgba(8,12,24,.6);
  border: 1px solid rgba(212,160,23,.16);
  border-radius: 8px;
}
/* A miniature of the board: five columns, three rows, the lit dots tracing
   the route. */
.payline-mini {
  display: grid;
  grid-template-columns: repeat(5, 7px);
  grid-template-rows: repeat(3, 7px);
  gap: 2px;
}
.payline-dot {
  border-radius: 2px;
  background: rgba(255,255,255,.09);
}
.payline-name {
  font-size: .56rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

/* ── Mute ──────────────────────────────────────────────────────── */
.float-right {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  right: calc(env(safe-area-inset-right) + 14px);
  z-index: 30;
  display: flex; align-items: center; gap: 8px;
}
/* The balance moves into that row, so it no longer positions itself. */
.float-right .float-balance { position: static; top: auto; right: auto; }
.float-mute {
  width: 38px; height: 38px; min-width: 38px;
  border: 1px solid rgba(212,160,23,.3);
  border-radius: 50%;
  background: rgba(8,12,24,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 1rem; line-height: 1; cursor: pointer;
  transition: transform .08s ease, opacity .15s ease;
}
.float-mute:active { transform: scale(.92); }
.float-mute[aria-pressed="true"] { opacity: .55; }
body.is-mobile .float-right { top: calc(env(safe-area-inset-top) + 62px); }

@media (min-width: 760px) {
  /* Both halves are one stretched row each, which is what keeps them level. */
  #screen-slots, #screen-crash, #screen-blackjack {
    grid-template-areas: "machine side";
    grid-template-columns: 1.3fr .9fr;
    grid-template-rows: auto;
    align-items: stretch;
  }
  .table-main { grid-area: machine; }
  .table-side { grid-area: side; justify-content: center; }
  .paytable-row { grid-template-columns: 2rem repeat(4, 1fr); gap: 10px; }
  .pay-symbols { font-size: 1.25rem; }
  .pay-mult { font-size: .8rem; }
  /* All nine routes on one row once there is width for them. */
  .payline-list { grid-template-columns: repeat(9, 1fr); gap: 6px; }
  .payline-mini { grid-template-columns: repeat(5, 6px); grid-template-rows: repeat(3, 6px); }

  /* The side column runs totals at the top and controls at the bottom, which
     left a tall gap between them. The spin log fills it and shrinks with it. */
  .history { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 12px 0; }
}

/* ── Sound settings ────────────────────────────────────────────── */
.sound-panel {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 60px);
  right: calc(env(safe-area-inset-right) + 14px);
  z-index: 40;
  width: 216px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(180deg, var(--blue-lit), var(--blue-deep));
  border: 2px solid var(--gold-dim);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(240,197,72,.28), 0 12px 30px rgba(0,0,0,.55);
  animation: pillIn var(--fade) ease;
}
body.is-mobile .sound-panel { top: calc(env(safe-area-inset-top) + 110px); }

.slider-row {
  display: grid;
  grid-template-columns: 52px 1fr 28px;
  align-items: center; gap: 8px;
  cursor: pointer;
}
.slider-label {
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.slider-val {
  font-size: .68rem; font-weight: 700; color: var(--gold-lit);
  font-variant-numeric: tabular-nums; text-align: right;
}
/* Styled from scratch: the native range control looks like a form field, and
   this is a casino. Both engines need their own thumb selector. */
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 3px; outline: none;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dim) 100%);
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold-lit);
  border: 2px solid var(--blue-deep);
  box-shadow: 0 0 8px rgba(240,197,72,.6);
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold-lit);
  border: 2px solid var(--blue-deep);
  box-shadow: 0 0 8px rgba(240,197,72,.6);
  cursor: pointer;
}

/* ── Session totals ────────────────────────────────────────────── */
/* Rebuilt as label/value rows rather than one packed line — two numbers side
   by side were competing for the same glance. */
.session-bar { flex-direction: column; gap: 6px; align-items: stretch; }
.session-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.session-net, .session-spins {
  font-size: 1rem; font-weight: 800; color: var(--gold-lit);
  font-variant-numeric: tabular-nums;
}

/* The result glow runs longer so auto-spin does not clip it. */
.machine.win { animation-duration: 1.15s; }
.machine.lose { animation-duration: 1.15s; }

/* ── Auto run lengths ──────────────────────────────────────────── */
.auto-menu {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 10px;
  animation: pillIn 160ms ease;
}
.btn-auto-opt {
  min-height: 40px; min-width: 0;
  font-size: .78rem; font-weight: 800; letter-spacing: .04em;
  color: var(--gold-lit);
  padding: 0 4px;
}

/* Result glows, pushed harder toward their colours so a win and a loss are
   unmistakable at a glance rather than a tint on the cabinet. */
@keyframes winGlow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(240,197,72,.35), inset 0 2px 26px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.45); }
  45% {
    box-shadow:
      inset 0 0 0 2px rgba(110,231,135,.9),
      inset 0 0 40px rgba(110,231,135,.35),
      0 0 60px rgba(110,231,135,.75),
      0 10px 30px rgba(0,0,0,.45);
  }
}
@keyframes loseGlow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(240,197,72,.35), inset 0 2px 26px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.45); }
  45% {
    box-shadow:
      inset 0 0 0 2px rgba(255,107,107,.9),
      inset 0 0 40px rgba(255,107,107,.32),
      0 0 56px rgba(255,107,107,.68),
      0 10px 30px rgba(0,0,0,.45);
  }
}
/* The border colour shifts too — a shadow alone reads as a shadow. */
.machine.win { border-color: var(--win); }
.machine.lose { border-color: var(--lose); }
.machine { transition: border-color .3s ease; }

/* The number spinner's arrows sat over the text at this field's width, so the
   input is a plain text box with a decimal keypad instead. These rules keep
   any stray spinner out on browsers that add one anyway. */
.auto-cash-input::-webkit-outer-spin-button,
.auto-cash-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.auto-cash-input {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Auto bet sits beside the bet button and has to read as a toggle, not as a
   second way to bet right now. */
#crash-autobet {
  font-size: .72rem; font-weight: 800;
  min-height: 60px;
  padding: 0 16px;
  white-space: nowrap;
  flex: 0 0 auto;
}
#crash-autobet.on {
  background: linear-gradient(180deg, #f0c548, #b8860b);
  color: #1a1204;
  border-color: var(--gold-lit);
}

/* ── Blackjack ─────────────────────────────────────────────────── */
/* The play area. Aegis blue like every other table top, with the deck sitting
   off to one side so dealt cards have somewhere to come from. */
.bj-felt {
  position: relative;
  border-radius: 12px;
  padding: 14px 12px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(240,197,72,.06), transparent 70%),
    linear-gradient(180deg, var(--blue-lit) 0%, var(--blue) 55%, var(--blue-deep) 100%);
  border: 1px solid rgba(212,160,23,.28);
  box-shadow: inset 0 0 30px rgba(0,0,0,.5);
  overflow: hidden;
}
.bj-side { padding: 4px 0; }
.bj-side-head {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 10px;
}
.bj-who {
  font-size: .6rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-lit);
}
/* The running total gets its own pill — it is the number being read on every
   card, so it should not be a footnote beside the label. */
.bj-total {
  font-size: 1.15rem; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: rgba(4,8,18,.75);
  border: 1px solid rgba(212,160,23,.4);
  border-radius: 999px;
  padding: 6px 14px;
  min-width: 3.2rem;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(240,197,72,.15);
}
.bj-total.bust { color: var(--lose); border-color: rgba(255,107,107,.55); }
.bj-total.good { color: var(--win); border-color: rgba(110,231,135,.5); }
/* Hands sit centred on the table, not shoved against the left edge. */
/* Exactly one card tall, always, whether it holds six cards or none.
   It used to reserve 1.4 cells while a card is 1.46, so the table grew a few
   pixels the moment cards appeared and collapsed again when the sweep emptied
   it — the whole game visibly breathing on every hand. Wrapping is off for the
   same reason: a hand long enough to spill onto a second row would double the
   height mid-hand. */
.bj-hand {
  display: flex; gap: 7px; flex-wrap: nowrap;
  justify-content: center;
  height: calc(var(--cell) * 1.46);
  min-height: calc(var(--cell) * 1.46);
  align-items: center;
}
/* A long hand tightens up rather than growing the table. */
.bj-hand > :nth-child(n+6) { margin-left: calc(var(--cell) * -0.42); }
.bj-divider {
  height: 1px; margin: 12px 0;
  background: linear-gradient(90deg, transparent, rgba(240,197,72,.35), transparent);
}

/* A card. Built like a real one — an index in opposite corners and a mark in
   the middle — rather than a rank floating in the centre of a rectangle.
   Sized off --cell so the table scales with the same knob the reels use. */
.bj-card {
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--cell) * 1.02);
  min-width: calc(var(--cell) * 1.02);
  max-width: calc(var(--cell) * 1.02);
  height: calc(var(--cell) * 1.46);
  min-height: calc(var(--cell) * 1.46);
  max-height: calc(var(--cell) * 1.46);
  transform-origin: 50% 50%;
  border-radius: 8px;
  background: linear-gradient(170deg, #fdfbf4, #ece5d4);
  color: #16181d;
  box-shadow:
    0 4px 10px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(0,0,0,.14),
    inset 0 0 0 3px rgba(255,255,255,.6);
}
.bj-card.red { color: #c0223a; }

/* The corner index, and its mirror. A real card is readable when fanned, which
   is what the second, rotated copy is for. */
.bj-corner {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  line-height: .95;
  font-weight: 900;
}
.bj-corner.tl { top: 5px; left: 6px; }
.bj-corner.br { bottom: 5px; right: 6px; transform: rotate(180deg); }
.bj-corner .r { font-size: calc(var(--cell) * 0.26); }
.bj-corner .s { font-size: calc(var(--cell) * 0.22); }

/* The Aegis mark, watermarked into the middle of every face. */
.bj-mark {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 62%; height: auto;
  opacity: .42;
  pointer-events: none;
}

/* The hole card. There is nothing under this in the page — the value is not
   sent until the hand is over. */
.bj-card.down {
  background:
    repeating-linear-gradient(45deg, rgba(212,160,23,.10) 0 4px, transparent 4px 8px),
    linear-gradient(150deg, #1b2a4a, #0a1020);
  box-shadow:
    0 4px 10px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(212,160,23,.45),
    inset 0 0 0 3px rgba(212,160,23,.12);
}
.bj-card.down .bj-mark { opacity: .85; width: 52%; }

/* The deck. Sits on the table so dealt cards have a visible origin, drawn as a
   few stacked backs rather than one. */
.bj-deck {
  position: absolute;
  top: 50%; right: 10px;
  transform: translateY(-50%);
  width: calc(var(--cell) * 1.02);
  height: calc(var(--cell) * 1.46);
  pointer-events: none;
}
.bj-deck .bj-card {
  position: absolute; inset: 0;
  animation: none;
  width: 100%; height: 100%;
}
.bj-deck .bj-card:nth-child(1) { transform: translate(4px, 4px) rotate(3deg); opacity: .55; }
.bj-deck .bj-card:nth-child(2) { transform: translate(2px, 2px) rotate(-2deg); opacity: .78; }
.bj-deck .bj-card:nth-child(3) { transform: none; }

.bj-rules {
  display: flex; flex-direction: column; gap: 4px;
  font-size: .72rem; color: var(--muted);
}
.bj-rules strong { color: var(--gold-lit); }

/* Hit / Stand / Double sit as one row of equal actions. */
.bj-actions { display: flex; gap: 8px; }
.btn-act {
  flex: 1; min-height: 60px;
  font-size: .92rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.btn-act:disabled { opacity: .4; }
.btn-double {
  background: linear-gradient(180deg, var(--gold-lit) 0%, var(--gold) 45%, var(--gold-dim) 100%);
  border-color: var(--gold-lit);
  color: #221800;
}

/* The bet is typed as well as stepped. Styled to sit exactly where the plain
   number did, so the field reads as the display it replaced rather than as a
   form control bolted on. */
.bet-input {
  width: 100%;
  background: none;
  border: none;
  text-align: center;
  font: inherit;
  font-size: 1.28rem;
  font-weight: 900;
  color: var(--gold-lit);
  font-variant-numeric: tabular-nums;
  padding: 0;
  outline: none;
}
.bet-input:focus {
  color: var(--text);
  text-shadow: 0 0 12px rgba(240,197,72,.5);
}
.bet-input:disabled { opacity: .5; }
.bet-display:focus-within {
  border-color: var(--gold-lit);
  box-shadow: 0 0 0 1px rgba(240,197,72,.35);
}

/* ── Casino floor ──────────────────────────────────────────────── */
/* Poker takes the big card; the other eight sit beside it. The whole floor is
   built to fit on screen — nothing here should ever produce a scrollbar. */
.floor-tables { display: flex; flex-direction: column; gap: 12px; }
.game-featured { display: grid; }
.game-card.game-lead {
  border-color: rgba(212,160,23,.5);
  box-shadow: 0 8px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(240,197,72,.12);
  min-height: 170px;
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, rgba(240,197,72,.12), transparent 70%),
    linear-gradient(180deg, var(--blue-lit) 0%, var(--blue) 55%, var(--blue-deep) 100%);
}
.game-card.game-lead .game-emoji { font-size: 3.2rem; }
.game-card.game-lead .game-name { font-size: 1.35rem; }

/* The house mark, sitting under the floor rather than in the chrome. */
.floor-mark {
  margin: 30px auto 8px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  opacity: .42;
  pointer-events: none;
}
.floor-mark img {
  width: 96px; height: 96px; object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(212,160,23,.45));
}
.floor-mark span {
  font-size: .68rem; font-weight: 800; letter-spacing: .34em;
  text-transform: uppercase; color: var(--gold-lit);
}

@media (min-width: 760px) {
  .game-card.game-lead { min-height: 190px; }
  .game-card.game-lead .game-emoji { font-size: 3.6rem; }
  /* Six across still has room for a blurb now the page is wider. */
  .game-grid .game-card { min-height: 132px; padding: 14px 10px; }
  .game-grid .game-emoji { font-size: 2rem; }
  .game-grid .game-name { font-size: .88rem; }
  .game-grid .game-blurb { font-size: .62rem; }

  .floor-mark { margin-top: 28px; }
  .floor-mark img { width: 150px; height: 150px; }
  .floor-mark span { font-size: .78rem; }
}

/* Auto speed. A small toggle beside Auto, not a third way to spin. */
.btn-speed {
  flex: 0 0 auto;
  min-width: 52px;
  font-size: .82rem; font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.btn-speed.on {
  background: linear-gradient(180deg, #f0c548, #b8860b);
  border-color: var(--gold-lit);
  color: #1a1204;
}

/* ── Casino floor: groups ──────────────────────────────────────── */
.floor-group { margin-bottom: 16px; }
.group-label {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 9px;
  font-size: .64rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-lit);
}
.group-label::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(240,197,72,.35), transparent);
}
.group-label em {
  font-style: normal; font-size: .58rem; letter-spacing: .08em;
  text-transform: none; color: var(--muted); font-weight: 600;
}

/* The banner alone goes edge to edge. Breaking out of the centred column with
   a full viewport width, while its text stays on the same line as the cards
   below — the room is framed by the banner, not stretched to match it. */
.floor-head {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  border-left: none; border-right: none;
  overflow: hidden;
}
.floor-head-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 760px) {
  .group-label { font-size: .68rem; }
  /* Three tables lead, poker the widest of them. */
  .game-featured { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 14px; }
  .game-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Cards turn over on the way back to the deck, so the hands need depth for a
   rotateY to read as a turn rather than as a squash. */

/* The deck being squared up after a hand is taken back in. */
.bj-deck.shuffling .bj-card:nth-child(1) { animation: shuffleA 560ms ease-in-out; }
.bj-deck.shuffling .bj-card:nth-child(2) { animation: shuffleB 560ms ease-in-out; }
.bj-deck.shuffling .bj-card:nth-child(3) { animation: shuffleC 560ms ease-in-out; }
@keyframes shuffleA {
  0%, 100% { transform: translate(4px, 4px) rotate(3deg); }
  30%      { transform: translate(16px, -7px) rotate(11deg); }
  65%      { transform: translate(-8px, 3px) rotate(-5deg); }
}
@keyframes shuffleB {
  0%, 100% { transform: translate(2px, 2px) rotate(-2deg); }
  30%      { transform: translate(-14px, 5px) rotate(-10deg); }
  65%      { transform: translate(7px, -3px) rotate(6deg); }
}
@keyframes shuffleC {
  0%, 100% { transform: none; }
  30%      { transform: translate(5px, -4px) rotate(4deg); }
  65%      { transform: translate(-4px, 2px) rotate(-3deg); }
}