@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

/* ==========================================================================
   Sunalytiq Games — Solar Blackjack

   A dark pit with one lit table in it. The table silhouette is drawn as a real
   ellipse pair (rail + felt), not a border-radius shorthand — that is what
   used to produce the pointed corners on a wide, short box. Every seat sits at
   a coordinate computed from that same ellipse, along a radial line from the
   table's centre, so five seats read as five real places at a curved table
   instead of five boxes in a row.
   ========================================================================== */

:root {
  color-scheme: dark;

  --room: #08090a;
  --room-2: #101213;
  --panel: #14171a;
  --edge: rgba(255, 255, 255, .07);
  --edge-2: rgba(255, 255, 255, .14);

  --ink: #eceef0;
  --ink-2: #a9b0b8;
  --ink-3: #737b84;
  --ink-4: #545b64;

  --brass: #c69a4c;
  --brass-hi: #e6bf74;
  --brass-lo: #8a6829;

  --good: #4bbd85;
  --bad: #cf5f5f;
  --warn: #d9a54e;

  --felt-hi: #1d6149;
  --felt-mid: #124535;
  --felt-lo: #082019;

  --swift: cubic-bezier(.2, .9, .25, 1);
  --settle: cubic-bezier(.16, 1, .3, 1);

  --card-w: 68px;
  --chip: 46px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--room); }

body {
  min-width: 320px;
  min-height: 100svh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse 64% 34% at 50% 12%, rgba(198, 154, 76, .055), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 34%, #131618, var(--room) 68%);
  font-family: "Satoshi", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, p, ul, ol { margin: 0; }
input { font: inherit; }
:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; }

/* ============================== header ============================== */

.rail { border-bottom: 1px solid var(--edge); background: rgba(8, 9, 10, .8); backdrop-filter: blur(14px); }

.rail__in {
  display: flex;
  width: min(100% - 40px, 1440px);
  min-height: 58px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.lockup img { display: block; width: 110px; height: auto; }
.lockup__rule { width: 1px; height: 19px; background: var(--edge-2); }

.lockup__word {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.tabs { display: flex; align-items: center; gap: 3px; }
.tabs__rule { width: 1px; height: 18px; margin: 0 8px; background: var(--edge); }

.tabs button {
  position: relative;
  min-height: 32px;
  padding: 0 12px;
  color: var(--ink-4);
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 640;
  letter-spacing: .03em;
  white-space: nowrap;
  transition: color .2s ease;
}

.tabs button::after {
  position: absolute;
  right: 12px;
  bottom: 2px;
  left: 12px;
  height: 1px;
  content: "";
  transform: scaleX(0);
  background: var(--brass);
  transition: transform .28s var(--swift);
}

.tabs button:hover { color: var(--ink-2); }
.tabs button[aria-pressed="true"] { color: var(--ink); }
.tabs button[aria-pressed="true"]::after { transform: scaleX(1); }
.tabs__ghost { color: var(--ink-4) !important; }
.tabs__ghost::after { background: var(--edge-2) !important; }
.tabs__ghost:hover::after { transform: scaleX(1); }

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

.who {
  display: flex;
  min-height: 30px;
  padding: 0 11px;
  align-items: center;
  gap: 7px;
  color: var(--ink-2);
  border: 1px solid var(--edge);
  border-radius: 2px;
  background: none;
  font-size: 12px;
  font-weight: 620;
  transition: border-color .2s ease, color .2s ease;
}

.who:hover { color: var(--ink); border-color: var(--edge-2); }
.who__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }

/* A brass balance plate, not a stat card. Doubles as the door to the cashier. */
.plaque {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px;
  border: 1px solid rgba(198, 154, 76, .3);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(198, 154, 76, .1), rgba(198, 154, 76, .03));
  transition: box-shadow .3s ease, border-color .2s ease;
}

.plaque:hover { border-color: rgba(198, 154, 76, .6); }

.plaque__vault { width: 15px; height: 15px; fill: none; stroke: var(--brass); stroke-width: 1.4; stroke-linecap: round; opacity: .85; }
.plaque.is-hit { box-shadow: 0 0 0 1px rgba(198, 154, 76, .5), 0 0 22px rgba(198, 154, 76, .22); }
.plaque__label { color: var(--brass); font-size: 9px; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; }
.plaque__sum b { color: var(--ink); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.plaque__sum i { color: var(--ink-4); font-size: 10px; font-style: normal; font-weight: 600; }

/* The change rides up out of the plate so the eye connects felt to bank. */
.plaque__delta {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 2px 8px;
  opacity: 0;
  border-radius: 2px;
  font-size: 12.5px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

.plaque__delta.is-up { color: #0d2419; background: var(--good); animation: rise 1.5s var(--settle); }
.plaque__delta.is-down { color: #2a0f0f; background: var(--bad); animation: rise 1.5s var(--settle); }

@keyframes rise {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.9); }
  16% { opacity: 1; transform: translate(-50%, -4px) scale(1); }
  70% { opacity: 1; transform: translate(-50%, -14px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -30px) scale(.96); }
}

.mute {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--ink-4);
  border: 1px solid var(--edge);
  border-radius: 2px;
  background: none;
  font-size: 12px;
}

.mute:hover { color: var(--ink-2); border-color: var(--edge-2); }
.mute .mute__off { display: none; }
.mute[aria-pressed="true"] .mute__on { display: none; }
.mute[aria-pressed="true"] .mute__off { display: block; }

.room-note {
  width: min(100% - 40px, 1440px);
  margin: 12px auto 0;
  padding: 8px 14px;
  color: var(--brass-hi);
  border-left: 2px solid var(--brass);
  background: rgba(198, 154, 76, .06);
  font-size: 12.5px;
}

.room-note b { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .06em; }

/* ============================== the room ==============================
   One column, always. The companion used to sit beside the table on wide
   screens and shove it sideways; now it always sits below, in flow, so the
   table itself never moves or resizes because a panel opened. */

.room {
  display: grid;
  width: min(100% - 40px, 1160px);
  margin: 22px auto 0;
  gap: 20px;
}

/* ============================== the table ==============================
   Drawn as two concentric ellipses (rail, felt) with a shallower top radius
   than bottom radius — a shallow dealer edge, a broader player edge — built
   from exact cubic-bezier circle approximations, so every curve is smooth by
   construction. No border-radius shorthand, no risk of the pointed corners
   that trick produced on a wide, short box. */

.pit { position: relative; }

.table {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 460;
}

.table__paint { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55)); }
.table__rail { fill: url(#railGrade); }
.table__felt { fill: url(#feltGrade); }
.table__felt-edge { fill: none; stroke: rgba(198, 154, 76, .22); stroke-width: 2; }
.table__seam { fill: none; stroke: rgba(0, 0, 0, .35); stroke-width: 1; }

/* Woven nap, clipped to the felt shape via the same path used to paint it. */
.table__nap { opacity: .4; mix-blend-mode: overlay; }

/* Printed felt copy, blended into the cloth so it reads as ink, not a label. */
.table__print { fill: rgba(255, 245, 220, .78); font-family: "Satoshi", system-ui, sans-serif; font-weight: 700; letter-spacing: .26em; text-anchor: middle; mix-blend-mode: soft-light; }
.table__print--lead { font-size: 21px; letter-spacing: .2em; }
.table__print--sub { font-size: 13px; }
.table__rule { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: 1.2; }

/* -------------------------- interactive layer ---------------------------
   Positioned in percentages of the same 1000x460 space the SVG uses, so the
   two layers stay locked together at every viewport width. */

.scene { position: absolute; inset: 0; }

.shoe {
  position: absolute;
  left: 87%;
  top: 19%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

.shoe__deck { display: grid; }

.shoe__deck i {
  width: 20px;
  height: 27px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 3px;
  background: linear-gradient(150deg, #1b3a6b, #0a1628);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  grid-area: 1 / 1;
}

.shoe__deck i:nth-child(2) { transform: translate(2.5px, -2.5px); }
.shoe__deck i:nth-child(3) { transform: translate(5px, -5px); }

.shoe__gauge { display: block; width: 4px; height: 28px; overflow: hidden; border-radius: 2px; background: rgba(0, 0, 0, .45); }
.shoe__gauge i { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, var(--brass-hi), var(--brass-lo)); transition: height .5s var(--settle); }
.shoe__read { color: rgba(255, 255, 255, .34); font-size: 9px; font-weight: 600; }
.shoe__read b { color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }

/* ---- dealer -------------------------------------------------------------- */

.dealer {
  position: absolute;
  left: 50%;
  top: 8%;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 8px;
  transform: translateX(-50%);
}

.dealer__plate { display: flex; align-items: baseline; gap: 8px; }

.dealer__name {
  color: rgba(255, 245, 220, .82);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .06em;
}

.dealer__role {
  color: rgba(255, 255, 255, .32);
  font-size: 8.5px;
  font-weight: 720;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.cards { display: flex; justify-content: center; min-height: calc(var(--card-w) * 1.4); }
.cards .card + .card { margin-left: -25px; }

.total {
  display: inline-grid;
  min-width: 26px;
  min-height: 20px;
  padding: 0 7px;
  place-items: center;
  color: rgba(255, 255, 255, .84);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 2px;
  background: rgba(0, 0, 0, .34);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.total.is-bust { color: #ffd9d9; border-color: rgba(207, 95, 95, .5); background: rgba(207, 95, 95, .2); }
.total.is-bj { color: #1a1204; border-color: transparent; background: var(--brass-hi); }

/* Dealer's word to the table — on the cloth itself, no floating panel. */
.word {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 2;
  min-width: 40%;
  padding: 0 2px;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, .68);
  font-size: 13px;
  font-weight: 620;
  letter-spacing: .02em;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.word.is-win { color: #a8e8c6; }
.word.is-lose { color: #f2b4b4; }
.word.is-gold { color: var(--brass-hi); }

/* -------------------------- the dealer character --------------------------
   Rises above the table's dealer edge from behind the rail. Sized so her
   upper body is visible and her cards, dealt in front of her, always render
   above her (the cards layer is z-index 2, she sits at z-index 1). Only one
   image exists today; the state attribute is wired for more later — every
   value in DEALER_STATE_IMAGE can point at its own file without touching
   this stylesheet or the calling code. */

.character {
  position: absolute;
  bottom: 88%;
  left: 50%;
  z-index: 1;
  width: clamp(150px, 20vw, 250px);
  transform: translateX(-50%);
  pointer-events: none;
}

.character__glow {
  position: absolute;
  bottom: -14%;
  left: 50%;
  width: 150%;
  height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(198, 154, 76, .22), transparent 68%);
  filter: blur(6px);
}

.character__frame { position: relative; }

.character__img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .5));
}

/* Green kicked up from the felt below her, warm room light from above. */
.character__frame::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(0deg, rgba(29, 97, 73, .32) 0%, transparent 42%),
    linear-gradient(200deg, rgba(230, 191, 116, .1) 0%, transparent 46%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* A subtle idle sway — never more than this without a second frame. */
.character[data-state="idle"] .character__frame,
.character[data-state="waiting-for-bets"] .character__frame { animation: sway 6.5s ease-in-out infinite; }

@keyframes sway {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(-.3deg); }
}

.character[data-mood="warm"] .character__glow { background: radial-gradient(ellipse, rgba(198, 154, 76, .38), transparent 68%); }
.character[data-mood="cool"] .character__glow { background: radial-gradient(ellipse, rgba(90, 140, 190, .26), transparent 68%); }

/* No asset yet: a quiet monogram stands in rather than a broken image. */
.character.is-missing .character__img { visibility: hidden; }

.character__fallback {
  display: none;
  width: 64%;
  aspect-ratio: 1;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(198, 154, 76, .32);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #1c2126, #0d0f11);
  color: rgba(230, 191, 116, .7);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
}

.character.is-missing .character__fallback { display: flex; }

/* ---- the five seats -------------------------------------------------------
   Each station is anchored by its nameplate, at a coordinate computed on the
   felt's own ellipse along a radial line from the table centre — the same
   line its cards and betting circle sit on. That is what keeps five seats on
   a curved table instead of five boxes in a row, and what guarantees nothing
   overflows the felt: every anchor was chosen to sit inside it, not on it. */

.station {
  position: absolute;
  z-index: 2;
  display: flex;
  width: 168px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, -100%);
}

.station:nth-child(1) { left: 15.1%; top: 69.9%; width: 142px; }
.station:nth-child(2) { left: 30.6%; top: 83.0%; }
.station:nth-child(3) { left: 50.0%; top: 87.7%; }
.station:nth-child(4) { left: 69.4%; top: 83.0%; }
.station:nth-child(5) { left: 84.9%; top: 69.9%; width: 142px; }

.station__cards { display: flex; justify-content: center; min-height: calc(var(--card-w) * 1.2); }
.station__cards .card + .card { margin-left: -24px; }
.station.is-empty .station__cards { min-height: 0; }

/* Betting circle — a brass-inlaid well sunk into the felt, the way a real
   table's chip circle is a ring of set brass rather than a printed line. */
.circle {
  position: relative;
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .05), rgba(0, 0, 0, .22) 78%);
  box-shadow:
    inset 0 0 0 1px rgba(226, 188, 118, .28),
    inset 0 1px 2px rgba(0, 0, 0, .55),
    inset 0 0 0 4px rgba(0, 0, 0, .14),
    inset 0 0 0 5px rgba(226, 188, 118, .16),
    inset 0 0 10px 2px rgba(0, 0, 0, .4);
}

.circle__print { position: absolute; color: rgba(255, 245, 220, .2); font-size: 7.5px; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; transition: opacity .25s ease; }
.circle.is-loaded .circle__print { opacity: 0; }
.circle__stack { position: absolute; inset: 0; }

/* Avatar + nameplate — styled as one small piece of table furniture (a
   brass-piped, tufted seat marker) rather than a flat web pill. */
.plate {
  position: relative;
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 4px;
  border: 1px solid rgba(226, 188, 118, .16);
  border-radius: 10px 10px 3px 3px;
  background: linear-gradient(180deg, #241a14 0%, #170f0b 62%, #100a08 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 0 0 1px rgba(0, 0, 0, .3), 0 3px 8px rgba(0, 0, 0, .4);
}

/* Brass piping across the top of the placard — this uses ::after (not
   ::before) because the empty-seat "chair" variant below already claims
   .plate::before for its own foot detail, and the two must not collide. */
.plate::after {
  position: absolute;
  top: 0;
  left: 8%;
  width: 84%;
  height: 2px;
  content: "";
  background: rgba(226, 188, 118, .5);
  border-radius: 0 0 2px 2px;
  opacity: .55;
}

.station.is-local .plate { border-color: rgba(198, 154, 76, .55); background: linear-gradient(180deg, #2c2011, #1a130a 62%, #120c07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(198, 154, 76, .2), 0 0 0 1px rgba(198, 154, 76, .14), 0 3px 10px rgba(0, 0, 0, .45); }
.station.is-local .plate::after { opacity: .85; }

.avatar {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(226, 188, 118, .3);
  background: var(--seat-tone, #33404c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .4);
  color: rgba(255, 255, 255, .92);
  font-size: 9.5px;
  font-weight: 750;
}

.station.is-local .avatar { border-color: rgba(198, 154, 76, .7); box-shadow: 0 0 0 2px rgba(198, 154, 76, .18); }

.plate__body { display: grid; min-width: 0; gap: 0; }

.plate__name {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, .82);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plate__you {
  flex: 0 0 auto;
  padding: 1px 5px;
  color: #1a1204;
  border-radius: 3px;
  background: var(--brass-hi);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .1em;
}

.station.is-empty .plate::after { display: none; }
.station.is-empty .plate__name { color: rgba(255, 255, 255, .3); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 9px; }

.plate__meta { display: flex; align-items: center; gap: 6px; font-size: 9px; font-variant-numeric: tabular-nums; }
.plate__bank { color: var(--brass-hi); font-weight: 700; }

.plate__status { color: rgba(255, 255, 255, .4); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.plate__status.is-playing, .plate__status.is-betting { color: var(--brass-hi); }
.plate__status.is-won, .plate__status.is-blackjack { color: var(--good); }
.plate__status.is-lost, .plate__status.is-bust { color: var(--bad); }

/* Multiple hands after a split. */
.hands { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

.hand { position: relative; display: grid; justify-items: center; gap: 5px; padding: 4px; border-radius: 3px; transition: opacity .25s ease, background .25s ease; }
.hand.is-active { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(230, 191, 116, .16); }
.hand.is-waiting { opacity: .4; }

.hand__meta { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .46); font-size: 9.5px; font-weight: 640; font-variant-numeric: tabular-nums; }
.hand__meta b { color: var(--brass-hi); font-weight: 700; }

.mark {
  position: absolute;
  top: -8px;
  left: 50%;
  padding: 2px 7px;
  transform: translateX(-50%) rotate(var(--tilt, -2deg));
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  animation: press .26s var(--settle) both;
  white-space: nowrap;
}

.mark--win { color: #8fe0b8; background: rgba(75, 189, 133, .18); }
.mark--lose { color: #f0acac; background: rgba(207, 95, 95, .18); }
.mark--push { color: #cfd6dd; background: rgba(255, 255, 255, .1); }
.mark--bj { color: #f7dea6; background: rgba(198, 154, 76, .24); }

@keyframes press {
  from { opacity: 0; transform: translateX(-50%) rotate(var(--tilt, -2deg)) scale(1.35); }
  to { opacity: 1; transform: translateX(-50%) rotate(var(--tilt, -2deg)) scale(1); }
}

/* ============================== console ==============================
   The local player's own console: chip rack and action keys as one unit,
   sitting right where they sit — in flow beneath the table, not a fixed
   toolbar spanning the viewport. */

.console {
  display: flex;
  width: min(100%, 620px);
  margin: -8px auto 0;
  padding: 14px 18px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-top-color: rgba(198, 154, 76, .18);
  border-radius: 14px;
  background: linear-gradient(180deg, #17191b 0%, #0e1011 100%);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7);
}

.rack { display: flex; align-items: center; gap: 9px; }

.well {
  position: relative;
  display: grid;
  padding: 4px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, .62), rgba(0, 0, 0, .26));
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .75), inset 0 -1px 0 rgba(255, 255, 255, .05);
  transition: transform .18s var(--swift);
}

.well:hover:not(:disabled) { transform: translateY(-3px); }
.well:active:not(:disabled) { transform: translateY(-1px); }
.well:disabled { opacity: .32; cursor: not-allowed; }

.rack__rule { width: 1px; height: 22px; margin: 0 1px; background: var(--edge); }

.minor {
  min-height: 28px;
  padding: 0 10px;
  color: var(--ink-4);
  border: 1px solid var(--edge);
  border-radius: 2px;
  background: none;
  font-size: 10.5px;
  font-weight: 640;
  letter-spacing: .05em;
  transition: color .18s ease, border-color .18s ease;
}

.minor:hover:not(:disabled) { color: var(--ink-2); border-color: var(--edge-2); }
.minor:disabled { opacity: .3; cursor: not-allowed; }

.keys { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }

.key {
  min-height: 40px;
  padding: 0 17px;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 4px;
  background: linear-gradient(180deg, #262b30, #1a1e22);
  box-shadow: 0 2px 0 #0c0e10, 0 4px 10px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  font-size: 12.5px;
  font-weight: 680;
  transition: transform .1s ease, box-shadow .1s ease, background .16s ease;
}

.key:hover:not(:disabled) { background: linear-gradient(180deg, #2d3339, #202529); }
.key:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 #0c0e10, 0 1px 4px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05); }
.key:disabled { opacity: .3; cursor: not-allowed; }

.key--brass {
  color: #201703;
  border-color: rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, var(--brass-hi), var(--brass));
  box-shadow: 0 2px 0 var(--brass-lo), 0 4px 12px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.key--brass:hover:not(:disabled) { background: linear-gradient(180deg, #efcb84, #cfa356); }
.key--brass:active:not(:disabled) { box-shadow: 0 0 0 var(--brass-lo), 0 1px 4px rgba(0, 0, 0, .5); }

.key--slim { min-height: 36px; padding: 0 14px; color: var(--ink-3); background: none; box-shadow: none; }
.key--slim:hover:not(:disabled) { color: var(--ink); background: rgba(255, 255, 255, .05); }
.key--slim:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }

/* Hit reads as "go" (green), Stand reads as "hold" (red) — the two moves a
   player makes every single hand, so they are the only actions pulled out of
   the neutral brass/charcoal key palette and given their own color meaning. */
.key--hit {
  color: #0e1a12;
  border-color: rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, #5fd39c, var(--good));
  box-shadow: 0 2px 0 #256b45, 0 4px 12px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.key--hit:hover:not(:disabled) { background: linear-gradient(180deg, #74e0ac, #4bbd85); }
.key--hit:active:not(:disabled) { box-shadow: 0 0 0 #256b45, 0 1px 4px rgba(0, 0, 0, .5); }

.key--stand {
  color: #260f10;
  border-color: rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, #e07f7f, var(--bad));
  box-shadow: 0 2px 0 #7a3232, 0 4px 12px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.key--stand:hover:not(:disabled) { background: linear-gradient(180deg, #e89494, #cf5f5f); }
.key--stand:active:not(:disabled) { box-shadow: 0 0 0 #7a3232, 0 1px 4px rgba(0, 0, 0, .5); }

/* ============================== chips ============================== */

.tok {
  position: relative;
  display: grid;
  width: var(--chip);
  height: var(--chip);
  place-items: center;
  border-radius: 50%;
  background: var(--tok-base);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .42),
    inset 0 2px 3px rgba(255, 255, 255, .3),
    inset 0 -3px 5px rgba(0, 0, 0, .36),
    0 3px 8px rgba(0, 0, 0, .55);
}

.tok::before {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: 50%;
  background: repeating-conic-gradient(from 22.5deg, rgba(255, 255, 255, .85) 0deg 13deg, transparent 13deg 45deg);
  -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 63% 88%, transparent 89%);
  mask: radial-gradient(circle, transparent 0 62%, #000 63% 88%, transparent 89%);
  opacity: .5;
}

.tok__face {
  display: grid;
  width: 62%;
  height: 62%;
  place-items: center;
  border-radius: 50%;
  background: var(--tok-face);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 2px rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .34);
  color: #fff;
  font-size: calc(var(--chip) * .26);
  font-weight: 780;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

.tok--5 { --tok-base: #2f5f8c; --tok-face: #23506f; }
.tok--2_5 { --tok-base: #a17a31; --tok-face: #76551e; }
.tok--25 { --tok-base: #2a6f4f; --tok-face: #1f5a41; }
.tok--100 { --tok-base: #7b2d3b; --tok-face: #642532; }

.tok--placed {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: calc(var(--chip) / -2) 0 0 calc(var(--chip) / -2);
  cursor: pointer;
  transition: filter .16s ease, transform .26s var(--settle);
}

.tok--placed:hover { filter: brightness(1.14); }
.tok--flying { pointer-events: none; z-index: 60; }

/* ============================== cards ============================== */

.card { position: relative; width: var(--card-w); height: calc(var(--card-w) * 1.4); flex: 0 0 auto; perspective: 1200px; }
.card__flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s var(--swift); }
.card.is-face-down .card__flip { transform: rotateY(180deg); }

.card__side {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(var(--card-w) * .075);
  backface-visibility: hidden;
  box-shadow: 0 7px 16px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .6);
}

.card__front { border: 1px solid rgba(0, 0, 0, .32); background: linear-gradient(176deg, #fdfcf8 0%, #f1ece1 100%); }
.card__front svg { display: block; width: 100%; height: 100%; }

.card__front .pc-pip, .card__front .pc-rank, .card__front .pc-court {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "DejaVu Sans", serif;
  text-anchor: middle;
  dominant-baseline: central;
}

.card__front .pc-rank, .card__front .pc-court {
  font-family: "Satoshi", "Inter", system-ui, sans-serif;
  font-weight: 760;
  letter-spacing: -.03em;
}

/* The back is the one place the solar joke touches the deck. */
.card__back {
  border: 1px solid rgba(255, 255, 255, .13);
  background: linear-gradient(158deg, #1a3a68 0%, #102340 48%, #091426 100%);
  transform: rotateY(180deg);
}

.card__back::before {
  position: absolute;
  inset: calc(var(--card-w) * .075);
  content: "";
  border: 1px solid rgba(150, 190, 240, .2);
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - .5px), rgba(150, 190, 240, .26) calc(25% - .5px) calc(25% + .5px), transparent calc(25% + .5px)),
    repeating-linear-gradient(0deg, transparent 0 calc(16.666% - .5px), rgba(150, 190, 240, .26) calc(16.666% - .5px) calc(16.666% + .5px), transparent calc(16.666% + .5px));
}

.card__back::after {
  position: absolute;
  top: -55%;
  left: -35%;
  width: 50%;
  height: 210%;
  content: "";
  transform: rotate(22deg);
  opacity: .26;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
}

/* ============================== sheets ============================== */

.sheet, .ask {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: grid;
  padding: 20px;
  place-items: center;
  background: rgba(4, 5, 6, .76);
  backdrop-filter: blur(3px);
}

.sheet__panel, .ask__panel {
  position: relative;
  width: min(100%, 404px);
  padding: 28px;
  border: 1px solid rgba(198, 154, 76, .26);
  border-radius: 4px;
  background: var(--panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .75);
}

.sheet__close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; color: var(--ink-4); border: 0; background: none; font-size: 20px; line-height: 1; }
.sheet__close:hover { color: var(--ink); }

.sheet__eyebrow, .ask__eyebrow { display: block; margin-bottom: 8px; color: var(--brass); font-size: 9px; font-weight: 750; letter-spacing: .22em; text-transform: uppercase; }

.sheet h2 { font-size: 21px; font-weight: 700; letter-spacing: -.025em; }
.sheet__lede { margin-top: 8px; color: var(--ink-3); font-size: 13.5px; }
.sheet__note { margin-top: 14px; color: var(--ink-4); font-size: 11.5px; line-height: 1.5; }
.sheet__note:empty { display: none; }
.sheet__row { display: flex; margin-top: 22px; gap: 8px; }
.sheet__row .key { flex: 1; }

.field { display: grid; margin-top: 18px; gap: 6px; }
.field label { color: var(--ink-3); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.field input {
  height: 44px;
  padding: 0 13px;
  color: var(--ink);
  border: 1px solid var(--edge-2);
  border-radius: 3px;
  background: var(--room);
  font-weight: 600;
}

.field input:focus { border-color: var(--brass); outline: none; }

.code { display: grid; margin-top: 18px; padding: 14px; justify-items: center; gap: 8px; border: 1px dashed rgba(198, 154, 76, .4); background: rgba(198, 154, 76, .05); }
.code__label { color: var(--brass); font-size: 9px; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; }
.code__value { color: var(--ink); font-size: 26px; font-weight: 760; font-variant-numeric: tabular-nums; letter-spacing: .16em; }

.ask p { color: var(--ink-2); font-size: 13.5px; }
.ask__hint { margin-top: 10px !important; color: #9dc4e8 !important; font-size: 12.5px !important; font-weight: 600; }
.ask__hint:empty { display: none; }
.ask__row { display: flex; margin-top: 20px; gap: 8px; }
.ask__row .key { flex: 1; }

/* ============================== companion ==============================
   Sits below the table in normal flow — it never widens the room or shifts
   the felt sideways. A thin brass top rule ties it back to the table above. */

.companion {
  display: grid;
  width: min(100%, 760px);
  margin: 4px auto 0;
  align-content: start;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--edge);
  border-top: 2px solid rgba(198, 154, 76, .4);
  border-radius: 10px;
  background: linear-gradient(180deg, #131619 0%, var(--room-2) 100%);
}

.companion__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.companion__eyebrow { display: block; color: var(--brass); font-size: 9px; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; }
.companion h2 { margin-top: 3px; font-size: 20px; font-weight: 720; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

.swap { display: flex; flex: 0 0 auto; border: 1px solid var(--edge); border-radius: 2px; }
.swap button { min-height: 27px; padding: 0 11px; color: var(--ink-4); border: 0; background: none; font-size: 11px; font-weight: 650; transition: color .2s ease, background .2s ease; }
.swap button.is-on { color: var(--ink); background: rgba(255, 255, 255, .06); }

.gauge { display: grid; gap: 10px; }
.gauge__bar { position: relative; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.gauge__bar i { position: absolute; top: 0; bottom: 0; left: 50%; border-radius: 3px; background: var(--brass); transition: width .4s var(--settle), transform .4s var(--settle), background .3s ease; }
.gauge__bar i.is-cold { background: var(--bad); }
.gauge__bar i.is-hot { background: var(--good); }
.gauge__zero { position: absolute; top: -2px; bottom: -2px; left: 50%; width: 1px; background: rgba(255, 255, 255, .3); }

.gauge__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gauge__row > div { display: grid; gap: 1px; }
.gauge__row span { color: var(--ink-4); font-size: 9px; font-weight: 720; letter-spacing: .13em; text-transform: uppercase; }
.gauge__row strong { font-size: 18px; font-weight: 740; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.gauge__work { padding: 8px 10px; color: var(--ink-2); background: rgba(255, 255, 255, .035); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.5; }
.gauge__work b { color: var(--brass-hi); }

.call { display: grid; gap: 4px; padding: 14px; border-left: 2px solid var(--brass); background: rgba(198, 154, 76, .07); }
.call__label { color: var(--brass); font-size: 9px; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.call__action { font-size: 22px; font-weight: 780; letter-spacing: -.02em; }
.call__why { color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }
.call__flag { justify-self: start; margin-top: 4px; padding: 2px 7px; color: var(--warn); border: 1px solid rgba(217, 165, 78, .4); font-size: 8.5px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }

.odds { display: grid; gap: 8px; }
.odds__label { color: var(--ink-4); font-size: 9px; font-weight: 720; letter-spacing: .13em; text-transform: uppercase; }
.odds__list { display: grid; gap: 1px; padding: 0; list-style: none; background: var(--edge); border: 1px solid var(--edge); }
.odds__list li { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; background: var(--room-2); }
.odds__list span { color: var(--ink-3); font-size: 12px; }
.odds__list b { font-size: 13px; font-weight: 740; font-variant-numeric: tabular-nums; }

.fold summary { color: var(--ink-3); font-size: 12px; font-weight: 640; letter-spacing: .04em; cursor: pointer; }
.fold summary:hover { color: var(--ink); }
.fold__count { margin-left: 6px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.fold__note { margin-top: 10px; color: var(--ink-4); font-size: 11.5px; line-height: 1.6; }
.fold__note b { color: var(--ink-2); }

.tags { display: grid; margin-top: 10px; padding: 0; gap: 1px; list-style: none; background: var(--edge); border: 1px solid var(--edge); }
.tag { display: grid; padding: 10px 12px; align-items: center; grid-template-columns: 1fr auto; gap: 2px 12px; background: var(--room-2); }
.tag > span { color: var(--ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .1em; }
.tag b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; grid-row: 1 / 3; grid-column: 2; }
.tag p { color: var(--ink-4); font-size: 11px; line-height: 1.5; grid-column: 1; }
.tag--plus b { color: var(--good); }
.tag--zero b { color: var(--ink-4); }
.tag--minus b { color: var(--bad); }

.strip { display: grid; gap: 6px; }
.strip__label { color: var(--ink-4); font-size: 9px; font-weight: 720; letter-spacing: .14em; text-transform: uppercase; }
.strip__tape { display: flex; min-height: 28px; align-items: center; flex-wrap: wrap; gap: 4px; }

.pip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid var(--edge); border-radius: 2px; font-size: 11.5px; font-weight: 700; animation: pipIn .22s var(--settle) both; }
.pip b { font-size: 10px; font-variant-numeric: tabular-nums; }
.pip.is-plus b { color: var(--good); }
.pip.is-zero b { color: var(--ink-4); }
.pip.is-minus b { color: var(--bad); }
.pip.is-hidden { color: var(--ink-4); }

@keyframes pipIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.drill { display: grid; gap: 9px; padding: 14px; border: 1px solid rgba(198, 154, 76, .24); }
.drill label { color: var(--ink-2); font-size: 12.5px; font-weight: 640; }
.drill__row { display: flex; gap: 7px; }
.drill input { width: 84px; height: 40px; padding: 0 11px; color: var(--ink); border: 1px solid var(--edge-2); border-radius: 3px; background: var(--room); font-weight: 700; font-variant-numeric: tabular-nums; }
.drill__verdict { font-size: 12.5px; font-weight: 650; }
.drill__verdict:empty { display: none; }
.drill__verdict.is-right { color: var(--good); }
.drill__verdict.is-wrong { color: var(--bad); }
.drill__work { display: grid; gap: 4px; padding-top: 9px; border-top: 1px solid var(--edge); }
.drill__line { display: flex; align-items: center; justify-content: space-between; color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.drill__line b { color: var(--ink); }
.drill__sum { color: var(--brass-hi); font-weight: 700; }

.trail { display: grid; margin-top: 10px; gap: 1px; max-height: 260px; overflow-y: auto; background: var(--edge); border: 1px solid var(--edge); }
.trail__row { display: grid; padding: 8px 10px; align-items: center; grid-template-columns: auto 1fr auto; gap: 10px; background: var(--room-2); font-size: 11.5px; }
.trail__no { color: var(--ink-4); font-variant-numeric: tabular-nums; }
.trail__body { color: var(--ink-3); }
.trail__body b { color: var(--ink-2); }
.trail__rc { color: var(--brass-hi); font-weight: 740; font-variant-numeric: tabular-nums; }
.trail__tick { color: var(--good); }
.trail__cross { color: var(--bad); }
.trail:empty::after { content: "Nothing yet — play a hand."; padding: 10px; color: var(--ink-4); font-size: 11.5px; }

/* ============================== base ============================== */

.base { width: min(100% - 40px, 1160px); margin: 26px auto 30px; }
.base__in { display: flex; padding-top: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; border-top: 1px solid var(--edge); }
.fine { max-width: 640px; }
.fine summary { color: var(--ink-4); font-size: 12px; font-weight: 620; cursor: pointer; }
.fine summary:hover { color: var(--ink-2); }
.fine ul { margin-top: 10px; padding-left: 16px; color: var(--ink-4); font-size: 11.5px; line-height: 1.75; }
.fine b { color: var(--ink-2); }
.base__side { display: flex; align-items: center; gap: 12px; }
.tally { color: var(--ink-4); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ============================== responsive ============================== */

@media (max-width: 860px) {
  :root { --card-w: 58px; --chip: 42px; }

  .rail__in, .room, .base, .room-note { width: calc(100% - 26px); }
  .rail__in { min-height: 54px; flex-wrap: wrap; gap: 8px 14px; }
  .tabs { order: 3; width: 100%; overflow-x: auto; padding-bottom: 4px; }

  .character { width: clamp(120px, 26vw, 190px); }
  .console { margin-top: -4px; padding: 12px 14px; }
  .companion { padding: 16px 14px; }
}

/* Five stations do not fit a phone screen readably. Below this width the
   table shows the local seat only, full size; the rest are reachable from
   the seat rail (future work — see report) rather than crammed illegibly. */
@media (max-width: 620px) {
  :root { --card-w: 52px; --chip: 40px; }

  .station:not(.is-local) { display: none; }
  .station, .station:nth-child(n) { left: 50%; top: 90%; width: 200px; }

  .table { aspect-ratio: 1000 / 560; }
  .dealer { top: 6%; }
  .word { top: 34%; }
  .shoe { left: 84%; top: 15%; }
  .character { width: clamp(110px, 30vw, 160px); }

  .console { flex-direction: column; align-items: stretch; }
  .rack { justify-content: center; }
  .keys { justify-content: center; }
  .key { flex: 1; min-width: 84px; }

  .gauge__row { gap: 6px; }
  .gauge__row strong { font-size: 15px; }
  .sheet__panel, .ask__panel { padding: 22px 18px; }
}

/* A module that failed to load leaves the table dead and silent; this is the
   only thing that says so. */
.crash {
  position: fixed;
  z-index: 95;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px 16px;
  color: #ffd9d9;
  background: #4a1f1f;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 12.5px;
  text-align: center;
}

/* ============================== entry gate ==============================
   Shown on every fresh open of the game, never remembered. The table stays
   visible behind it, dimmed, so it reads as stepping up to a table rather than
   as a compliance banner. */

.gate {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  padding: 24px;
  overflow-y: auto;
  place-items: center;
  background: rgba(4, 5, 6, .84);
  backdrop-filter: blur(6px) saturate(.7);
}

.gate__card {
  position: relative;
  width: min(100%, 520px);
  margin: auto;
  padding: 38px 36px 30px;
  border: 1px solid rgba(198, 154, 76, .3);
  border-radius: 3px;
  background: linear-gradient(180deg, #16191c, #101315);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .8);
  text-align: center;
}

.gate__crest { display: block; width: 42px; height: 1px; margin: 0 auto 20px; background: linear-gradient(90deg, transparent, var(--brass), transparent); }
.gate__eyebrow { display: block; color: var(--brass); font-size: 9.5px; font-weight: 750; letter-spacing: .28em; text-transform: uppercase; }
.gate h2 { margin-top: 10px; font-size: 25px; font-weight: 700; letter-spacing: -.03em; }

.gate__body { margin-top: 20px; text-align: left; }
.gate__body p { margin-top: 11px; color: var(--ink-3); font-size: 13px; line-height: 1.62; }
.gate__body p:first-child { margin-top: 0; color: var(--ink-2); }
.gate__body b { color: var(--ink); font-weight: 700; }
.gate__fine { padding-top: 11px; border-top: 1px solid var(--edge); font-size: 11.5px !important; color: var(--ink-4) !important; }

.gate__row { display: flex; margin-top: 26px; gap: 8px; }
.gate__row .key { flex: 1; text-align: center; text-decoration: none; display: grid; place-items: center; }

/* Until the notice is answered the table behind is inert to pointer and tab. */
body.is-gated .rail,
body.is-gated .room-note,
body.is-gated .room,
body.is-gated .base { pointer-events: none; filter: saturate(.7) brightness(.8); }

/* ============================== the cashier ============================== */

.vault {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  padding: 24px;
  overflow-y: auto;
  place-items: start center;
  background: rgba(4, 5, 6, .82);
  backdrop-filter: blur(4px);
}

.vault__room {
  width: min(100%, 880px);
  margin: auto;
  padding: 30px 32px 26px;
  border: 1px solid rgba(198, 154, 76, .22);
  border-top: 2px solid rgba(198, 154, 76, .5);
  border-radius: 3px;
  background: linear-gradient(180deg, #15181b 0%, #0e1113 100%);
  box-shadow: 0 40px 110px rgba(0, 0, 0, .8);
}

.vault__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.vault__eyebrow { display: block; color: var(--brass); font-size: 9px; font-weight: 750; letter-spacing: .22em; text-transform: uppercase; }
.vault__room h2 { margin-top: 4px; font-size: 26px; font-weight: 720; letter-spacing: -.035em; }
.vault__close { width: 30px; height: 30px; color: var(--ink-4); border: 0; background: none; font-size: 22px; line-height: 1; }
.vault__close:hover { color: var(--ink); }

.vault__note { margin-top: 14px; padding: 8px 12px; color: var(--brass-hi); border-left: 2px solid var(--brass); background: rgba(198, 154, 76, .07); font-size: 12.5px; }

.vault__summary { display: grid; margin-top: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--edge); border: 1px solid var(--edge); }
.vault__cell { display: grid; padding: 16px 18px; gap: 2px; background: #101315; }
.vault__cell--lead { background: #131719; }
.vault__key { color: var(--ink-4); font-size: 9px; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.vault__figure { font-size: 30px; font-weight: 740; font-variant-numeric: tabular-nums; letter-spacing: -.035em; line-height: 1.1; }
.vault__figure--sm { font-size: 24px; }
.vault__figure.is-up { color: var(--good); }
.vault__figure.is-down { color: var(--bad); }
.vault__unit { color: var(--ink-4); font-size: 11px; }

.vault__grid { display: grid; margin-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.slab { padding: 18px; border: 1px solid var(--edge); background: #101315; }
.slab--wide { grid-column: 1 / -1; }
.slab h3 { font-size: 13px; font-weight: 720; letter-spacing: .04em; }
.slab__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.slab__lede { margin-top: 6px; color: var(--ink-4); font-size: 11.5px; line-height: 1.55; }
.slab__caption { margin-top: 8px; color: var(--ink-4); font-size: 11px; line-height: 1.5; }

.chits { display: flex; margin-top: 12px; flex-wrap: wrap; gap: 6px; }

.chit {
  min-height: 34px;
  padding: 0 14px;
  color: var(--ink-2);
  border: 1px solid var(--edge-2);
  border-radius: 2px;
  background: linear-gradient(180deg, #1e2226, #16191c);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color .16s ease, border-color .16s ease, transform .12s ease;
}

.chit:hover:not(:disabled) { color: var(--brass-hi); border-color: rgba(198, 154, 76, .5); }
.chit:active:not(:disabled) { transform: translateY(1px); }
.chit:disabled { opacity: .3; cursor: not-allowed; }

.entry { display: flex; margin-top: 8px; gap: 6px; }

.entry input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 11px;
  color: var(--ink);
  border: 1px solid var(--edge-2);
  border-radius: 2px;
  background: var(--room);
  font-size: 12.5px;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
}

.entry .key { min-height: 36px; padding: 0 14px; font-size: 12.5px; }

.meter { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--edge); }
.meter__head { display: flex; align-items: baseline; justify-content: space-between; }
.meter__head span { color: var(--ink-4); font-size: 9px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.meter__head b { color: var(--brass-hi); font-size: 17px; font-weight: 740; font-variant-numeric: tabular-nums; }
.meter__bar { height: 3px; margin-top: 8px; background: rgba(255, 255, 255, .07); }
.meter__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi)); transition: width .5s var(--settle); }
.meter__foot { display: flex; justify-content: space-between; margin-top: 7px; color: var(--ink-4); font-size: 11px; }
.meter__foot b { color: var(--ink-2); font-variant-numeric: tabular-nums; }

.chart { display: block; width: 100%; height: 150px; }
.chart__line { fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.chart__line.is-up { stroke: var(--good); }
.chart__line.is-down { stroke: var(--bad); }
.chart__zero { stroke: rgba(255, 255, 255, .22); stroke-width: 1; stroke-dasharray: 3 4; }
.chart__empty { fill: var(--ink-4); font-size: 12px; text-anchor: middle; font-family: inherit; }

.figures { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; margin-top: 12px; }
.figures__lead { display: grid; align-content: start; gap: 2px; padding-right: 18px; border-right: 1px solid var(--edge); }
.figures__lead span { color: var(--ink-4); font-size: 9px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.figures__list { display: grid; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.figures__list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.figures__list dt { color: var(--ink-4); font-size: 11.5px; }
.figures__list dd { margin: 0; color: var(--ink-2); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

.ledger { display: grid; margin-top: 10px; max-height: 260px; overflow-y: auto; gap: 1px; background: var(--edge); border: 1px solid var(--edge); }
.ledger__empty { padding: 14px; color: var(--ink-4); font-size: 12px; background: #101315; }

.ledger__row {
  display: grid;
  padding: 7px 11px;
  align-items: center;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 10px;
  background: #101315;
  font-size: 12px;
}

.ledger__row--loan, .ledger__row--repay { border-left: 2px solid var(--brass); }
.ledger__amt { font-weight: 740; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.ledger__amt.is-up { color: var(--good); }
.ledger__amt.is-down { color: var(--bad); }
.ledger__row--loan .ledger__amt, .ledger__row--repay .ledger__amt { color: var(--brass-hi); }
.ledger__label { color: var(--ink-3); }
.ledger__time { color: var(--ink-4); font-size: 10.5px; font-variant-numeric: tabular-nums; }

.danger { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--edge); }
.danger summary { color: var(--ink-4); font-size: 11.5px; font-weight: 640; letter-spacing: .05em; cursor: pointer; }
.danger summary:hover { color: var(--ink-2); }
.danger p { margin-top: 10px; color: var(--ink-4); font-size: 11.5px; line-height: 1.6; }
.danger__confirm { margin-top: 12px; padding: 12px; border: 1px solid rgba(207, 95, 95, .35); background: rgba(207, 95, 95, .06); }
.danger__row { display: flex; margin-top: 12px; gap: 8px; }
.minor--warn:hover:not(:disabled) { color: var(--bad); border-color: rgba(207, 95, 95, .45); }
.key--danger { color: #fff; border-color: rgba(207, 95, 95, .5); background: linear-gradient(180deg, #b84848, #8f3439); box-shadow: 0 2px 0 #5e2226, 0 4px 10px rgba(0, 0, 0, .5); }

.vault__foot { display: flex; margin-top: 20px; justify-content: flex-end; }

@media (max-width: 780px) {
  .vault { padding: 14px; }
  .vault__room { padding: 22px 18px 20px; }
  .vault__summary { grid-template-columns: minmax(0, 1fr); }
  .vault__grid { grid-template-columns: minmax(0, 1fr); }
  .vault__figure { font-size: 26px; }
  .figures { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .figures__lead { padding: 0 0 12px; border-right: 0; border-bottom: 1px solid var(--edge); }
  .figures__list { grid-template-columns: minmax(0, 1fr); }
  .gate__card { padding: 28px 20px 22px; }
  .gate__row { flex-direction: column-reverse; }
}

/* Nothing moves unless the player moved it; this preference removes even that. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  .character .character__frame { animation: none !important; }
}

/* ========================================================================
   Live table — August 2026

   The stage and the table deliberately use separate perspective layers. The
   dealer is clipped inside the studio and the padded back rail covers the
   bottom of her portrait; cards, chips and messages live only on the felt.
   ======================================================================== */

:root {
  --room: #050506;
  --room-2: #0d0e0f;
  --panel: #121314;
  --felt-hi: #171e1a;
  --felt-mid: #0f1310;
  --felt-lo: #070806;
  --card-w: 68px;
}

html, body { overflow-x: hidden; }

body {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .012) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(180deg, #090a0b 0, #050506 46%, #030304 100%);
}

.rail {
  position: relative;
  z-index: 30;
  background: rgba(6, 7, 8, .96);
  backdrop-filter: none;
}

.rail__in { width: min(calc(100% - 40px), 1280px); min-height: 64px; }
.tabs button { min-height: 38px; }

.room {
  width: min(calc(100% - 28px), 1180px);
  margin-top: 0;
  gap: 28px;
}

.pit {
  --stage-h: clamp(250px, 23vw, 310px);
  --stage-overlap: clamp(44px, 5vw, 60px);
  position: relative;
  padding-top: calc(var(--stage-h) - var(--stage-overlap));
  isolation: isolate;
}

/* A restrained casino studio: architectural lines and practical light, not a
   glow cloud. Everything is clipped here, above the navigation and off the
   felt are both impossible. */
.studio {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 2%;
  left: 2%;
  height: var(--stage-h);
  overflow: hidden;
  border-right: 1px solid rgba(198, 154, 76, .12);
  border-left: 1px solid rgba(198, 154, 76, .12);
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(215, 178, 112, .18) 50%, transparent 50.2%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 32px),
    linear-gradient(180deg, #141313 0%, #0b0b0c 54%, #050606 100%);
  box-shadow: inset 0 -34px 50px #050606;
}

.studio::before,
.studio::after {
  position: absolute;
  z-index: 0;
  top: -12%;
  bottom: -8%;
  width: 2px;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(198, 154, 76, .52) 24%, rgba(198, 154, 76, .16) 76%, transparent);
  box-shadow: 0 0 0 8px rgba(0, 0, 0, .34);
}

.studio::before { left: 25%; transform: rotate(31deg); }
.studio::after { right: 25%; transform: rotate(-31deg); }

.studio__wing {
  position: absolute;
  z-index: 1;
  top: 12%;
  width: 24%;
  height: 64%;
  border: 1px solid rgba(198, 154, 76, .18);
  background:
    radial-gradient(circle, rgba(148, 39, 34, .65) 0 2px, transparent 2.5px) 0 0 / 14px 14px,
    linear-gradient(135deg, rgba(93, 23, 22, .45), rgba(20, 10, 11, .18));
  opacity: .72;
  clip-path: polygon(12% 0, 100% 0, 84% 100%, 0 100%);
}

.studio__wing--left { left: 5%; }
.studio__wing--right { right: 5%; transform: scaleX(-1); }

.studio__halo {
  position: absolute;
  z-index: 1;
  top: 7%;
  left: 50%;
  width: clamp(190px, 22vw, 278px);
  aspect-ratio: 1;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid rgba(198, 154, 76, .28);
  background:
    radial-gradient(circle, rgba(167, 45, 36, .54) 0 2px, transparent 2.6px) 0 0 / 15px 15px,
    #120d0d;
  box-shadow: inset 0 0 0 10px rgba(0, 0, 0, .28);
}

.character {
  position: absolute;
  z-index: 3;
  top: auto;
  bottom: -2px;
  left: 50%;
  width: clamp(254px, 24vw, 330px);
  height: calc(var(--stage-h) - 14px);
  transform: translateX(-50%);
  pointer-events: none;
}

.character__frame { position: relative; height: 100%; overflow: hidden; }

.character__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .58));
}

.character__glow,
.character__frame::before { display: none !important; }

.character[data-state] .character__frame { animation: none !important; }

.character__fallback {
  position: absolute;
  inset: 8% 18% 0;
  border-radius: 50% 50% 8px 8px;
}

.table {
  position: relative;
  z-index: 4;
  width: 100%;
  aspect-ratio: 1000 / 520;
}

.table__paint {
  z-index: 1;
  filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .76));
}

.scene { z-index: 2; }
.table__felt-edge { stroke: rgba(211, 170, 93, .38); stroke-width: 2.2; }
.table__seam { stroke: rgba(222, 225, 227, .12); stroke-width: 2; }
.table__nap { opacity: .2; }
.table__print { fill: rgba(239, 231, 215, .32); mix-blend-mode: normal; }
.table__print--lead { font-size: 18px; letter-spacing: .23em; }
.table__print--sub { font-size: 10.5px; letter-spacing: .19em; }

/* Card shoe and discard tray sit at the dealer edge as pieces of equipment. */
.shoe {
  z-index: 5;
  top: 20%;
  left: 88%;
  gap: 9px;
  padding: 8px 10px 7px 12px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 5px 11px 11px 5px;
  background: linear-gradient(155deg, rgba(65, 68, 72, .96), rgba(11, 12, 13, .98) 68%);
  box-shadow: 0 8px 12px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .11);
}

.shoe::before {
  position: absolute;
  right: 8px;
  bottom: -5px;
  left: 8px;
  height: 6px;
  content: "";
  border-radius: 0 0 5px 5px;
  background: #090a0b;
}

.shoe__deck i { width: 25px; height: 35px; border-color: rgba(255, 255, 255, .24); }
.shoe__gauge { height: 34px; }
.shoe__read { font-size: 9.5px; white-space: nowrap; }

.discard {
  position: absolute;
  z-index: 4;
  top: 16%;
  left: 8%;
  width: 50px;
  height: 42px;
  transform: perspective(90px) rotateX(5deg) rotateZ(-4deg);
  border: 1px solid rgba(255, 255, 255, .18);
  border-top: 0;
  border-radius: 3px 3px 8px 8px;
  background: linear-gradient(120deg, rgba(82, 86, 90, .66), rgba(15, 17, 19, .84));
  box-shadow: 0 8px 14px rgba(0, 0, 0, .45), inset 0 0 0 3px rgba(0, 0, 0, .2);
}

.discard i {
  position: absolute;
  right: 8px;
  left: 8px;
  height: 3px;
  border-radius: 50%;
  background: rgba(228, 229, 226, .5);
}

.discard i:nth-child(1) { top: 9px; }
.discard i:nth-child(2) { top: 15px; opacity: .7; }
.discard i:nth-child(3) { top: 21px; opacity: .4; }

.dealer { top: 13%; z-index: 6; gap: 7px; }
.dealer__plate { padding: 2px 9px; border-radius: 999px; background: rgba(3, 4, 4, .72); border: 1px solid rgba(198, 154, 76, .2); }
.dealer__name { font-size: 11px; }
.dealer__role { font-size: 7.5px; }

.dealer__hand {
  display: flex;
  min-height: calc(var(--card-w) * 1.4);
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.dealer__hand .dealer__cards { min-height: 0; }

.dealer__hand .total {
  min-width: 38px;
  min-height: 38px;
  padding: 0 9px;
  border-color: rgba(226, 190, 120, .38);
  border-radius: 50%;
  background: rgba(4, 5, 5, .82);
  box-shadow: inset 0 0 0 2px rgba(198, 154, 76, .08), 0 5px 12px rgba(0, 0, 0, .38);
  color: #f5ead4;
  font-size: 18px;
  font-weight: 780;
}

.dealer__hand .total.is-bust {
  border-color: rgba(223, 112, 112, .55);
  background: rgba(71, 19, 22, .9);
  color: #ffd1d1;
}

.dealer__hand .total.is-bj {
  border-color: transparent;
  background: var(--brass-hi);
  color: #211604;
}

/* Ava speaks beside her open hand, away from the printed felt copy. */
.studio .word {
  position: absolute;
  z-index: 5;
  top: 57%;
  left: 23%;
  width: min(24%, 240px);
  min-width: 176px;
  padding: 10px 14px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(222, 190, 128, .28);
  border-radius: 10px 10px 4px 10px;
  background: linear-gradient(145deg, rgba(24, 24, 25, .96), rgba(7, 8, 8, .94));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .045);
  color: rgba(255, 249, 239, .88);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .015em;
  text-align: left;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
  transition: opacity .18s ease, visibility .18s ease, transform .22s ease;
}

.studio .word::after {
  position: absolute;
  top: 50%;
  right: -9px;
  width: 16px;
  height: 16px;
  content: "";
  transform: translateY(-50%) rotate(45deg);
  border-top: 1px solid rgba(222, 190, 128, .28);
  border-right: 1px solid rgba(222, 190, 128, .28);
  background: #0c0d0d;
}

.studio .word:empty {
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -44%) scale(.97);
}

.studio .word.is-win {
  border-color: rgba(116, 214, 166, .42);
  color: #bdf1d4;
}

.studio .word.is-lose {
  border-color: rgba(223, 122, 122, .4);
  color: #f4c1c1;
}

.studio .word.is-gold {
  border-color: rgba(230, 191, 116, .5);
  color: #f4d99d;
}

.studio .word.is-win::after { border-color: rgba(116, 214, 166, .42); }
.studio .word.is-lose::after { border-color: rgba(223, 122, 122, .4); }
.studio .word.is-gold::after { border-color: rgba(230, 191, 116, .5); }

/* A short chip fountain is populated by the game only after a real win. */
.win-motion {
  position: absolute;
  z-index: 12;
  inset: calc(var(--stage-h) - var(--stage-overlap)) 0 0;
  overflow: hidden;
  pointer-events: none;
}

.win-chip {
  --x: 0px;
  --y: -170px;
  --delay: 0ms;
  --spin: 540deg;
  --scale: 1;
  position: absolute;
  bottom: 30px;
  left: 50%;
  display: grid;
  width: 34px;
  aspect-ratio: 1;
  place-items: center;
  border: 3px dashed rgba(255, 255, 255, .72);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .2) 0 24%, transparent 25%), #235d83;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .35), 0 6px 12px rgba(0, 0, 0, .42);
  color: #fff;
  font-size: 8px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  animation: none;
  will-change: transform, opacity;
}

.win-chip--2_5 { background-color: #b48631; }
.win-chip--25 { background-color: #23704e; }
.win-chip--100 { background-color: #8c2e42; }

.win-chip > span {
  display: grid;
  width: 18px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  background: rgba(0, 0, 0, .18);
}

.win-motion.is-active .win-chip {
  animation: win-chip-flight 1320ms cubic-bezier(.18, .7, .18, 1) var(--delay) both;
}

@keyframes win-chip-flight {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 36px, 0) rotate(0) scale(.55);
  }
  12% { opacity: 1; }
  52% {
    opacity: 1;
    transform: translate3d(calc(-50% + var(--x)), var(--y), 0) rotate(var(--spin)) scale(var(--scale));
  }
  82% { opacity: .92; }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--x)), 62px, 0) rotate(calc(var(--spin) + 240deg)) scale(.82);
  }
}

/* The game areas stay on the felt. Empty places become chairs at the outer
   rail instead of a second stack of fake cards, labels and circles. */
.station {
  z-index: 5;
  width: 18%;
  gap: 6px;
}

.station:nth-child(1) { left: 10.5%; top: 78%; width: 90px; }
.station:nth-child(2) { left: 28%; top: 96%; width: 96px; }
.station:nth-child(3) { left: 50%; top: 95%; width: 62%; }
.station:nth-child(4) { left: 72%; top: 96%; width: 96px; }
.station:nth-child(5) { left: 89.5%; top: 78%; width: 90px; }

.station.is-empty .hands,
.station.is-empty .circle,
.station.is-empty .avatar,
.station.is-empty .plate__body { display: none; }

/* A small tufted-leather casino stool: rounded back, a brass piping edge,
   one centre tuft button, and a narrower dark foot where it meets the rail —
   read at this size as "an empty chair", not a placeholder box. */
.station.is-empty .plate {
  position: relative;
  width: 60px;
  height: 46px;
  min-width: 0;
  padding: 0;
  transform: translateY(23px);
  border: 1px solid rgba(226, 188, 118, .3);
  border-bottom-color: rgba(0, 0, 0, .82);
  border-radius: 50% 50% 7px 7px;
  background: radial-gradient(ellipse 92% 74% at 50% 30%, #55231f 0%, #341311 58%, #1c0a09 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .07),
    inset 0 0 0 1px rgba(0, 0, 0, .3),
    inset 0 -10px 14px -4px rgba(0, 0, 0, .55),
    0 8px 12px rgba(0, 0, 0, .55);
}

.station.is-empty .plate::before {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 6px;
  height: 6px;
  content: "";
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), inset 0 1px 1px rgba(0, 0, 0, .6);
}

.station.is-empty .plate::after {
  /* Explicit top/width/opacity resets: the generic .plate::after (the brass
     top strip on occupied seats) shares this pseudo-element slot and would
     otherwise leak its own top/width/opacity in here at lower specificity. */
  display: block;
  position: absolute;
  top: auto;
  right: 12px;
  bottom: -9px;
  left: 12px;
  width: auto;
  height: 10px;
  content: "";
  opacity: 1;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #14100b, #080706);
}

.station.is-empty::after {
  position: absolute;
  top: calc(100% + 29px);
  left: 50%;
  content: "Open";
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .26);
  font-size: 7.5px;
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.station.is-local .hands { width: 100%; flex-wrap: nowrap; align-items: flex-end; }
.station.is-local .hand { min-width: 0; flex: 1 1 0; }
.station.is-local .station__cards { width: auto; min-width: 0; }
.station.is-local .circle { width: 72px; height: 72px; }
.station.is-local .plate {
  min-height: 38px;
  gap: 0;
  padding: 6px 13px;
  border-color: rgba(198, 154, 76, .38);
  background: rgba(5, 6, 6, .86);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .34);
}

.station.is-local .avatar,
.station.is-local .plate__you { display: none !important; }

.station.is-local .plate__body { gap: 1px; justify-items: center; }
.station.is-local .plate__name { color: #fff8eb; font-size: 12px; }
.station.is-local .plate__meta { justify-content: center; gap: 0; }
.station.is-local .plate__bank { color: var(--brass-hi); font-size: 10px; letter-spacing: .035em; }
.station.is-local .plate__status:empty,
.station.is-local .plate__bank:empty { display: none; }

.hand__row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.hand__total {
  display: grid;
  min-width: 42px;
  height: 42px;
  flex: 0 0 auto;
  padding: 0 7px;
  place-items: center;
  border: 1px solid rgba(226, 190, 120, .42);
  border-radius: 50%;
  background: rgba(5, 6, 6, .9);
  box-shadow: inset 0 0 0 2px rgba(198, 154, 76, .09), 0 6px 14px rgba(0, 0, 0, .42);
  color: #fff7e8;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hand__total[hidden] { display: none; }
.hand__total.is-soft { color: #d9e8f6; }
.hand__total.is-bust { border-color: rgba(223, 112, 112, .55); color: #ffd1d1; background: rgba(71, 19, 22, .9); animation: bustFlash .5s ease-out; }
.hand__total.is-bj { border-color: transparent; color: #211604; background: var(--brass-hi); animation: bjGlow .6s ease-out; }

/* One-shot on the class first appearing — re-toggling an already-present
   class is a no-op in the DOM, so these never replay on a later re-render. */
@keyframes bustFlash {
  0% { background: #cf5f5f; box-shadow: 0 0 0 6px rgba(207, 95, 95, .35); }
  100% { background: rgba(71, 19, 22, .9); box-shadow: 0 0 0 0 rgba(207, 95, 95, 0); }
}

@keyframes bjGlow {
  0% { box-shadow: 0 0 0 10px rgba(230, 191, 116, .4); }
  100% { box-shadow: 0 0 0 0 rgba(230, 191, 116, 0); }
}
.hand__meta { display: none !important; }

/* Split hands use two stable columns instead of squeezing four hands through
   one horizontal strip. The row still keeps each total beside its own cards. */
.station.is-local .hands.has-splits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.station.is-local .hands.has-splits .hand { width: 100%; }

.console {
  position: relative;
  z-index: 8;
  width: min(92%, 760px);
  min-height: 78px;
  margin: -38px auto 0;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-top: 2px solid rgba(198, 154, 76, .22);
  border-radius: 10px 10px 18px 18px;
  background: linear-gradient(180deg, rgba(28, 29, 30, .98), rgba(8, 9, 10, .99));
  box-shadow: 0 18px 34px rgba(0, 0, 0, .58), inset 0 1px rgba(255, 255, 255, .035);
}

.key { min-height: 44px; border-radius: 5px; }
.key--brass { min-width: 104px; }

/* The agreement keeps its copy, but on a short phone only the copy scrolls;
   the decision buttons remain reachable. */
.gate { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.gate__card { max-height: calc(100svh - 24px); display: flex; flex-direction: column; overflow: hidden; }
.gate__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 5px; }
.gate__row { flex: 0 0 auto; }

@media (max-width: 900px) {
  :root { --card-w: 59px; --chip: 42px; }

  .rail__in, .room, .base, .room-note { width: calc(100% - 24px); }
  .rail__in { min-height: 58px; }
  .pit { --stage-h: clamp(250px, 34vw, 310px); }
  .character { width: clamp(250px, 36vw, 320px); }
  .console { width: min(96%, 720px); }
}

@media (max-width: 620px) {
  :root { --card-w: 54px; --chip: 42px; }

  body { background: #050506; }

  .rail__in {
    display: grid;
    width: 100%;
    min-height: 0;
    padding: 9px 12px 7px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 10px;
  }

  .lockup img { width: 94px; }
  .lockup { gap: 8px; }
  .lockup__rule { height: 16px; }
  .lockup__word { font-size: 8px; }

  .rail__right { min-width: 0; justify-self: end; gap: 6px; }
  .who { max-width: 74px; padding: 0 8px; }
  .who__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .plaque { padding: 5px 9px; gap: 5px; }
  .plaque__vault, .plaque__label, .plaque__sum i { display: none; }
  .plaque__sum b { font-size: 15px; }

  .tabs {
    order: initial;
    width: 100%;
    padding: 0;
    grid-column: 1 / -1;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { min-height: 34px; padding: 0 10px; font-size: 11px; }

  .room { width: 100%; }
  .pit { --stage-h: 246px; --stage-overlap: 34px; }
  .studio { right: 0; left: 0; }
  .studio__wing { top: 14%; width: 34%; height: 55%; opacity: .48; }
  .studio__wing--left { left: -5%; }
  .studio__wing--right { right: -5%; }
  .studio__halo { top: 9%; width: 178px; }
  .character { width: 218px; height: 238px; }

  .studio .word {
    top: 55%;
    left: 21%;
    width: min(39vw, 158px);
    min-width: 124px;
    padding: 8px 10px;
    border-radius: 8px 8px 3px 8px;
    font-size: 11px;
    line-height: 1.28;
  }

  .studio .word::after { right: -7px; width: 12px; height: 12px; }

  .win-chip { width: 29px; bottom: 42px; }

  .table { height: clamp(410px, 118vw, 500px); aspect-ratio: auto; }
  .table__print--sub { display: none; }
  .table__print--lead { font-size: 14px; letter-spacing: .16em; }

  .discard { display: none; }
  .shoe { top: 16%; left: auto; right: 9px; transform: scale(.82); transform-origin: top right; }
  .shoe__read { display: none; }
  .dealer { top: 12%; }
  .dealer__plate { padding: 1px 7px; }
  .dealer__cards { min-height: calc(var(--card-w) * 1.4); }
  .dealer__hand { gap: 8px; }
  .dealer__hand .total { min-width: 34px; min-height: 34px; padding: 0 7px; font-size: 16px; }

  .station:not(.is-local) { display: none; }
  .station.is-local,
  .station.is-local:nth-child(n) { left: 50%; top: 94%; width: 94%; }
  .station.is-local .hands { gap: 2px; }
  .station.is-local .hand { padding: 2px; }
  .station.is-local .hand__row { gap: 6px; }
  .station.is-local .station__cards .card + .card { margin-left: -30px; }
  .station.is-local .hands.has-splits { --card-w: 52px; gap: 4px; }
  .station.is-local .hands.has-splits .hand__row { gap: 4px; }
  .station.is-local .hands.has-splits .station__cards .card + .card { margin-left: -35px; }
  .station.is-local .hands.has-splits .hand__total { min-width: 32px; height: 32px; font-size: 17px; }
  .station.is-local .circle { width: 66px; height: 66px; }
  .station.is-local .plate { min-height: 34px; padding: 5px 11px; }
  .hand__total { min-width: 36px; height: 36px; padding: 0 5px; font-size: 19px; }

  .console {
    width: calc(100% - 20px);
    margin-top: -24px;
    padding: 12px 10px calc(12px + env(safe-area-inset-bottom));
    gap: 11px;
    border-radius: 10px 10px 14px 14px;
  }

  .rack { width: 100%; justify-content: center; gap: 7px; }
  .keys { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .key { min-width: 0; min-height: 46px; padding: 0 11px; }
  .keys [data-action="deal"],
  .keys [data-action="next"] { grid-column: 1 / -1; }

  .companion { margin: 0 10px; }
  .base { width: calc(100% - 20px); }

  .gate__card { padding: 24px 18px 16px; }
  .gate__crest { margin-bottom: 14px; }
  .gate h2 { margin-top: 7px; font-size: 23px; }
  .gate__body { margin-top: 15px; }
  .gate__body p { margin-top: 9px; font-size: 12.25px; line-height: 1.5; }
  .gate__fine { padding-top: 8px; font-size: 10.75px !important; }
  .gate__row { margin-top: 14px; }
}

@media (max-width: 370px) {
  .lockup__rule, .lockup__word, .who__dot { display: none; }
  .who { max-width: 58px; }
  .tabs button { padding: 0 8px; font-size: 10.5px; }
  .pit { --stage-h: 226px; }
  .character { width: 202px; height: 218px; }
  .studio .word { top: 54%; left: 20%; width: 126px; min-width: 0; font-size: 10.5px; }
  .table { height: 420px; }
  .console { width: calc(100% - 12px); }
  .minor { padding: 0 7px; }
}

/* ========================================================================
   Compact live pit — viewport pass, August 2026

   The physical SVG surface is shallower than its interaction plane. This
   gives the rail believable perspective without transforming cards, labels,
   buttons or their hit targets.
   ======================================================================== */

.tok--500 { --tok-base: #34363a; --tok-face: #17191c; }
.tok--1000 { --tok-base: #72508d; --tok-face: #4c3264; }
.tok--500 .tok__face { font-size: calc(var(--chip) * .23); }
.tok--1000 .tok__face { font-size: calc(var(--chip) * .19); letter-spacing: -.04em; }

.win-chip--5 { background-color: #235d83; }
.win-chip--500 { background-color: #292b30; border-color: rgba(231, 193, 119, .84); }
.win-chip--1000 { background-color: #65447e; }

.rack__chips,
.rack__tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.rack__tools { gap: 6px; }

.minor--accent {
  color: var(--brass-hi);
  border-color: rgba(198, 154, 76, .34);
  background: rgba(198, 154, 76, .055);
}

.minor--accent:hover:not(:disabled) {
  color: #ffe7b5;
  border-color: rgba(230, 191, 116, .62);
}

.studio__suits {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Larger shapes, cropped by .studio__suits's own overflow:hidden, at a
   strength meant to be found on a second look rather than noticed first —
   not four obvious stickers flanking the dealer. */
.suit {
  position: absolute;
  color: rgba(226, 188, 118, .045);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(90px, 11vw, 160px);
  line-height: 1;
  -webkit-text-stroke: 1px rgba(226, 188, 118, .09);
  text-stroke: 1px rgba(226, 188, 118, .09);
}

.suit--spade { top: 8%; left: -4%; transform: rotate(-10deg); }
.suit--diamond { bottom: -6%; left: 0%; transform: rotate(7deg); }
.suit--heart { top: 8%; right: -4%; transform: rotate(10deg); }
.suit--club { right: -2%; bottom: -8%; transform: rotate(-7deg); }

/* ========================================================================
   Desktop table — fixed viewport pass

   Every region below has an explicit, budgeted height, and the felt itself
   is sized from what is provably left over: --table-avail-h subtracts the
   header, footer, dealer stage and console from 100dvh, and .table's own
   width is capped at (that height * its aspect ratio), so its rendered
   height can never exceed what remains. Nothing here is fitted by hiding
   overflow — every control that must stay reachable has a reserved row.
   ======================================================================== */

@media (min-width: 901px) {
  :root {
    --chip: 46px;
    --header-h: 55px;
    --footer-h: 33px;
    --console-h: 110px;
    --stage-h: clamp(160px, 26vh, 284px);
    /* How far the table's top edge is pulled up into the dealer stage, and
       the console's top edge pulled up into the table's front rail — this is
       what fuses three flex rows into one continuous scene instead of three
       stacked boxes with a gap between them. Both subtract from the space
       the fit below has to reserve, which is why closing the gap also makes
       room for a bigger table rather than a smaller one. */
    --table-overlap: clamp(48px, 7vh, 90px);
    --console-overlap: clamp(20px, 3vh, 34px);
    --table-avail-h: calc(100dvh - var(--header-h) - var(--footer-h) - var(--console-h) - var(--stage-h) + var(--table-overlap) + var(--console-overlap) - 10px);
  }

  html { height: 100%; }

  body {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }

  .rail {
    flex: 0 0 auto;
    position: relative;
    z-index: 30;
  }

  /* Very faint suit motifs as separators either side of the wordmark and
     the tab group — discovered on a second look, not a second logo. */
  .rail__in::before,
  .rail__in::after {
    position: absolute;
    top: 50%;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    color: rgba(226, 188, 118, .055);
    transform: translateY(-52%);
    pointer-events: none;
  }

  .rail__in::before { content: "\2660"; left: calc(33% - 6px); }
  .rail__in::after { content: "\2666"; right: calc(33% - 6px); }

  .rail__in {
    display: grid;
    width: min(calc(100% - 32px), 1180px);
    min-height: var(--header-h);
    grid-template-columns: minmax(180px, 1fr) auto minmax(280px, 1fr);
    gap: 20px;
  }

  .lockup { justify-self: start; gap: 10px; }
  .lockup img { width: 104px; }
  .lockup__word { font-size: 9px; letter-spacing: .26em; }

  .tabs {
    justify-self: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 999px;
    background: rgba(255, 255, 255, .018);
  }

  .tabs button {
    min-height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 11.5px;
    letter-spacing: .025em;
  }

  .tabs button::after {
    right: 14px;
    bottom: 3px;
    left: 14px;
    background: linear-gradient(90deg, transparent, var(--brass-hi), transparent);
  }

  .tabs button[aria-pressed="true"] {
    color: #fff9ed;
    background: linear-gradient(180deg, rgba(198, 154, 76, .1), rgba(198, 154, 76, .025));
  }

  .rail__right { justify-self: end; gap: 8px; }
  .who { min-height: 29px; }
  .plaque { min-height: 36px; padding: 5px 12px; }
  .plaque__sum b { font-size: 17px; }

  /* Rare (multiplayer invite) banner: floats above the table rather than
     claiming a row of its own, since it is not part of Classic's steady state. */
  .room-note {
    position: fixed;
    z-index: 28;
    top: calc(var(--header-h) + 8px);
    left: 50%;
    width: min(calc(100% - 32px), 1180px);
    margin: 0;
    transform: translateX(-50%);
  }

  .room {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    width: min(calc(100% - 28px), 1180px);
    margin: 0 auto;
    padding: 0;
  }

  .pit {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding-top: 0;
    isolation: isolate;
  }

  /* The stage is a normal row in the column now rather than an absolutely
     positioned overlay — but it still shares its lower slice with the table
     below (see .table's negative margin-top), which is what keeps Ava
     standing directly behind the rail instead of on a separate banner above
     a gap. .table's higher z-index (set in the base rules) is what lets its
     rear rail paint over her lower body in that shared strip. */
  .studio {
    position: relative;
    flex: 0 0 var(--stage-h);
    right: auto;
    left: auto;
    height: auto;
    border-radius: 14px 14px 0 0;
  }

  .character {
    width: clamp(230px, 19vw, 300px);
    height: calc(100% - 6px);
  }

  .studio .word {
    top: 58%;
    left: 23%;
    width: min(25%, 230px);
    min-width: 172px;
    padding: 9px 13px;
    font-size: 12px;
  }

  .win-motion { inset: calc(var(--stage-h) - var(--table-overlap)) 0 0; }

  /* The felt: width is the binding constraint on tall screens (capped so the
     table stays proportionate to the seats), height is the binding
     constraint on short ones (capped at exactly what --table-avail-h leaves
     over) — the min() below picks whichever is smaller, so the aspect-ratio
     box that results can never exceed the space actually available. Pulling
     it up by --table-overlap is what removes the dead band above it. */
  .table {
    flex: 0 0 auto;
    width: min(100%, 1450px, calc(var(--table-avail-h) * 2.2727));
    max-height: var(--table-avail-h);
    margin: calc(-1 * var(--table-overlap)) auto 0;
    aspect-ratio: 1000 / 440;
    isolation: isolate;
  }

  .table::before {
    position: absolute;
    z-index: 0;
    right: 4.5%;
    bottom: 1.5%;
    left: 4.5%;
    height: 14%;
    content: "";
    border-radius: 12% 12% 50% 50%;
    background: linear-gradient(180deg, rgba(39, 40, 41, .72), rgba(2, 3, 3, .94));
    box-shadow: 0 18px 30px rgba(0, 0, 0, .72);
    transform: perspective(900px) rotateX(-5deg);
    transform-origin: center top;
    pointer-events: none;
  }

  .table__paint { overflow: visible; }
  .table__print--lead { transform: translateY(-9px); }
  .table__print--sub { transform: translateY(-15px); }

  /* Positions below follow the SVG rail/felt paths, which are no longer a
     regular half-ellipse (see the paths in index.php — a true arc command,
     not a hand-fit bezier). The five seats below sit at equal angular steps
     around that same arc (30°, 60°, 90°, 120°, 150° from the table's centre),
     which is why the outer two seats sit noticeably higher/closer to the
     dealer than the centre seat: on a real curved rail that is exactly where
     they are. Shoe and discard stay on the straight back edge. */
  .dealer {
    top: 9%;
    /* Depth cue: the dealer's whole zone — plate, cards and total — reads a
       notch smaller than the player's, which is what a farther-away object
       on the same felt actually looks like. */
    transform: translateX(-50%) scale(.9);
    transform-origin: top center;
  }

  .shoe { top: 17%; left: 74%; }
  .discard { top: 13%; left: 24%; }

  .station:nth-child(1) { left: 24.9%; top: 54.9%; }
  .station:nth-child(2) { left: 35.5%; top: 73.9%; }
  /* The regular half-ellipse narrows faster near its own apex than the old
     hand-tuned egg did, so the centre seat's split-hand width (62% on the
     narrower viewport layout above) would now overhang the felt here. */
  .station:nth-child(3) { left: 50%; top: 80.8%; width: 36%; }
  .station:nth-child(4) { left: 64.5%; top: 73.9%; }
  .station:nth-child(5) { left: 75.1%; top: 54.9%; }

  /* The local seat is the player's whole focal point: identity, wager and
     betting spot as one unit, not a small "You" tag among five equal seats.
     A soft glow behind the whole group marks it as the one seat that
     matters, without a hard panel or border boxing it in. */
  .station.is-local { z-index: 6; }

  .station.is-local::before {
    position: absolute;
    z-index: -1;
    inset: -14px -34px -8px;
    content: "";
    background: radial-gradient(ellipse, rgba(226, 188, 118, .1), transparent 72%);
  }

  .station.is-local .circle {
    width: 78px;
    height: 78px;
    box-shadow:
      inset 0 0 0 1px rgba(255, 245, 220, .22),
      inset 0 0 0 4px rgba(0, 0, 0, .12),
      inset 0 0 0 5px rgba(226, 188, 118, .22),
      0 0 26px -6px rgba(226, 188, 118, .35);
  }

  .station.is-local .plate {
    min-height: 42px;
    padding: 7px 16px;
    border-color: rgba(226, 188, 118, .48);
    background: linear-gradient(180deg, rgba(20, 16, 6, .82), rgba(6, 5, 4, .9));
    box-shadow: 0 6px 16px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 255, 255, .05);
  }

  .station.is-local .plate__name { font-size: 13px; letter-spacing: .04em; }
  .station.is-local .plate__bank { font-size: 11px; letter-spacing: .04em; }

  /* The player's own hand total is the one number on the table that should
     never be missed. */
  .station.is-local .hand__total { min-width: 46px; height: 46px; font-size: 25px; }

  /* Betting rail — a physical, front-of-table console, not a toolbar. Its
     top corners echo the felt's own rounding, a thin brass line ties it to
     the rail above, and it is pulled up into the table's own front rail by
     --console-overlap so the two read as one fused edge. It is comfortably
     wide while it is showing the chip rack; the moment a hand is live it
     contracts to a small floating action rail (.is-acting) instead of
     leaving the rack sitting there disabled beside the keys. */
  .console {
    flex: 0 0 var(--console-h);
    display: flex;
    width: min(96%, 760px);
    min-height: 0;
    margin: calc(-1 * var(--console-overlap)) auto 0;
    padding: 10px 22px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-top: 2px solid rgba(226, 188, 118, .34);
    border-radius: 22px 22px 10px 10px;
    background: linear-gradient(180deg, #1b1712 0%, #100d09 100%);
    box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .7), inset 0 1px rgba(255, 255, 255, .04);
    transition: width .2s ease;
  }

  /* Active play and settlement: a compact floating rail, not a scaled-down
     copy of the betting console. */
  .console.is-acting {
    width: min(94%, clamp(430px, 40vw, 580px));
    justify-content: center;
  }

  .console.is-acting .keys { justify-content: center; }

  .rack { flex: 1 1 auto; flex-wrap: nowrap; gap: 10px; }
  .rack__rule { flex: 0 0 auto; }
  .minor { white-space: nowrap; }
  .keys { flex: 0 0 auto; flex-wrap: wrap; gap: 8px; row-gap: 8px; }
  .key { min-height: 42px; padding: 0 16px; }
  .key--brass { min-width: 100px; }

  .console.is-acting .key { min-height: 38px; padding: 0 13px; font-size: 11.5px; }
  .console.is-acting .key--brass { min-width: 0; }

  .well:hover:not(:disabled) { box-shadow: 0 0 0 2px rgba(226, 188, 118, .3), inset 0 2px 6px rgba(0, 0, 0, .75); }

  /* House rules: a one-line strip, permanently, with the actual list opening
     as a floating panel above it. It never adds a document row of its own. */
  .base {
    flex: 0 0 var(--footer-h);
    position: relative;
    width: 100%;
    margin: 0;
    background: linear-gradient(180deg, rgba(8, 9, 10, .9), rgba(4, 5, 5, .98));
    border-top: 1px solid rgba(198, 154, 76, .14);
  }

  .base__in {
    height: 100%;
    width: min(calc(100% - 28px), 1180px);
    margin: 0 auto;
    padding: 0 2px;
    align-items: center;
    flex-wrap: nowrap;
    border-top: 0;
  }

  .fine { position: relative; }
  .fine summary { color: rgba(255, 255, 255, .42); font-size: 11px; }

  .fine ul {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 0;
    width: min(620px, calc(100vw - 36px));
    max-height: min(48vh, 390px);
    margin: 0;
    padding: 15px 18px 15px 32px;
    overflow-y: auto;
    border: 1px solid rgba(198, 154, 76, .2);
    border-radius: 8px;
    background: rgba(10, 11, 12, .98);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .66);
    color: rgba(255, 255, 255, .58);
    line-height: 1.6;
  }

  .base__side { margin-left: auto; }

  /* The Hi-Lo companion is a floating drawer over the table in counting
     mode, never a document row — Classic and Practice never see it at all. */
  body[data-mode="counting"] .companion:not([hidden]) {
    position: fixed;
    z-index: 26;
    top: calc(var(--header-h) + 10px);
    right: 12px;
    bottom: calc(var(--footer-h) + 8px);
    width: min(360px, calc(100vw - 24px));
    max-height: none;
    margin: 0;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: -18px 0 42px rgba(0, 0, 0, .56);
  }
}

/* Keep the learning drawer and the live table as two distinct surfaces;
   neither is allowed to cover the player's hand or dock. */
@media (min-width: 901px) and (max-width: 1900px) {
  body[data-mode="counting"] .room {
    margin-right: auto;
    margin-left: max(12px, calc((100vw - 384px - 1180px) / 2));
  }
}

/* The tightest supported desktop height (1366x768-class notebooks): the
   fit above already holds by construction, this only trims typography and
   chip size so the compact table stays comfortably legible. */
@media (min-width: 901px) and (max-height: 820px) {
  :root { --chip: 40px; --card-w: 60px; }
  .console { padding: 8px 16px; }
  .key { min-height: 38px; padding: 0 13px; }
}

@media (max-width: 620px) {
  .studio__suits { display: none; }

  .rack {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }

  .rack__chips { width: 100%; gap: 6px; }
  .rack__tools { width: 100%; gap: 6px; }
  .rack__rule { display: none; }
  .rack__tools .minor { min-height: 31px; }
}
/* End of the compact live-pit viewport layer. */

/* Wide desktops leave two bare gutters either side of the 1180px room —
   fixed, out of flow (no effect on the 100dvh fit math), styled as the wood
   panelling either side of a real pit's table rather than left plain black. */
@media (min-width: 1500px) {
  body::before,
  body::after {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 0;
    width: calc((100vw - 1180px) / 2);
    max-width: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(120px, 15vw, 230px);
    color: rgba(226, 188, 118, .04);
    background:
      repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 30px),
      radial-gradient(ellipse 70% 45% at 50% 50%, rgba(198, 154, 76, .05), transparent 72%),
      linear-gradient(180deg, #0d0e0f 0%, #070808 55%, #050606 100%);
  }

  body::before { content: "\2660"; left: 0; border-right: 1px solid rgba(198, 154, 76, .08); }
  body::after { content: "\2666"; right: 0; border-left: 1px solid rgba(198, 154, 76, .08); }
}