/*
 * LONESTAR CASINO — design system.
 *
 * Dark, metallic, lit from within. Deep navy ground, polished gold as the
 * primary metal, electric cyan as the live/interactive signal, crimson kept in
 * reserve for jackpots and destructive actions so it still means something when
 * it appears.
 *
 * Everything is built from tokens. A game skins itself by overriding
 * --ls-accent and --ls-metal on its own subtree; nothing hard-codes a colour.
 *
 * Motion honours prefers-reduced-motion throughout, and a "Reduced effects"
 * setting downgrades the same properties for low-powered devices, so the two
 * paths share one implementation.
 */

:root {
  /* Ground */
  --ls-void: #03060d;
  --ls-deep: #071022;
  --ls-raised: #0c1730;
  --ls-line: rgba(148, 178, 224, 0.14);
  --ls-line-strong: rgba(148, 178, 224, 0.28);

  /* Metal — gold is a gradient, never a flat fill */
  --ls-metal: #e8c66a;
  --ls-metal-bright: #fff0c0;
  --ls-metal-deep: #8a6a1f;
  --ls-metal-face: linear-gradient(160deg, #fff2c9 0%, #e8c66a 34%, #a8801f 62%, #f3dc9a 100%);

  /* Signals */
  --ls-accent: #37e0ff;
  --ls-accent-deep: #0a7f9c;
  --ls-crimson: #ff3d6e;
  --ls-jade: #45e0a0;
  --ls-amber: #ffb547;

  /* Type */
  --ls-ink: #eef4ff;
  --ls-ink-dim: #9db0cf;
  --ls-ink-faint: #63779a;
  --ls-display: "Bahnschrift", "DIN Alternate", "Oswald", "Franklin Gothic Medium", "Segoe UI", system-ui, sans-serif;
  --ls-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --ls-mono: "SF Mono", "Cascadia Mono", "Roboto Mono", ui-monospace, monospace;

  /* Structure */
  --ls-radius: 14px;
  --ls-radius-lg: 22px;
  --ls-radius-sm: 8px;
  --ls-gap: 18px;
  --ls-header-height: 68px;
  --ls-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  --ls-shadow-lift: 0 28px 70px rgba(0, 0, 0, 0.68);
  --ls-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ls-fast: 160ms var(--ls-ease);
  --ls-med: 320ms var(--ls-ease);
  --ls-slow: 620ms var(--ls-ease);
}

/* Rendered slot collection. All selectors stay inside the modern slot floor. */
.ls-game--slot { max-width: 1480px; width: 100%; margin: auto; padding-bottom: 12px; }
.ls-game--slot .ls-game__head { padding-block: 9px; }
.ls-game--slot .ls-game__title small { display: none; }
.ls-game--slot .ls-game__board { justify-content: flex-start; gap: 7px; }
.ls-slot-stage { position: relative; isolation: isolate; border-radius: 20px; padding-bottom: 8px; }
.ls-slot-stage::before { content: ""; position: absolute; inset: 0 -14px; z-index: -2; border-radius: 20px; background: linear-gradient(180deg, rgba(3,5,12,.1), rgba(3,5,12,.42) 60%, #060911 96%), var(--slot-world) center / cover; }
.ls-slot-stage::after { content: ""; position: absolute; inset: 0 -14px; z-index: -1; pointer-events: none; border-radius: 20px; background: linear-gradient(90deg, rgba(3,5,12,.7), transparent 22%, transparent 78%, rgba(3,5,12,.7)); }
.ls-slot-marquee { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 15px 15px 8px; min-height: 74px; }
.ls-slot-marquee__eyebrow { display: block; font: 700 12px var(--ls-display); letter-spacing: .3em; color: #f1d3a0; text-shadow: 0 2px 8px #000; }
.ls-slot-marquee h1 { margin: 2px 0 0; font: 900 clamp(24px, 3.15vw, 44px)/1.1 var(--ls-display); letter-spacing: -.015em; text-transform: uppercase; color: #fff0c9; text-shadow: 0 2px 0 #6a401b, 0 4px 0 #2a170c, 0 9px 20px #000; }
.ls-slot-marquee__features { display: flex; align-items: stretch; max-width: 44%; gap: 6px; }
.ls-slot-marquee__features button { padding: 9px 12px; max-width: 160px; border: 1px solid #d6ac655c; border-radius: 5px; color: #f5ddab; background: #0c0c14bc; font: 600 13px/1.3 var(--ls-display); cursor: pointer; }
.ls-slot-marquee__features button:hover { border-color: #ffe1a2; background: #342716; }
.ls-slot-stage .ls-cabinet { width: 100%; max-width: 100%; min-height: 210px; border-radius: 10px; border-color: #d4b57285; padding: 10px; background: linear-gradient(150deg, #33271a, #0d0e14 12%, #090c13 87%, #625135); box-shadow: 0 22px 50px #000a, 0 0 0 2px #080a10, inset 0 1px 0 #ffe3a0ad; }
.ls-slot-stage .ls-cabinet__canvas { border-radius: 3px; }
.ls-slot-stage[data-phase="feature"] .ls-cabinet { border-color: #fff1b5; box-shadow: 0 0 24px #c9973140, 0 22px 50px #000a, inset 0 1px 0 #ffe3a0; }
.ls-slot-stage .ls-meter { min-height: 22px; padding: 0 12px; gap: 14px; }
.ls-slot-stage .ls-meter__label { color: #f4dca6; font-size: 12px; letter-spacing: .1em; }
.ls-slot-stage .ls-meter__value, .ls-slot-stage .ls-meter__lane small { font-size: 12px; }
.ls-slot-stage .ls-meter__bar { height: 9px; }
.ls-slot-stage .ls-status { font-size: 14px; line-height: 20px; min-height: 20px; color: #d5e0f0; }
.ls-slot-stage .ls-winline { min-height: 20px; line-height: 20px; font-size: 14px; }
.ls-slot-stage .ls-controls--slot { grid-template-columns: 1fr auto 1fr; padding: 9px 16px; gap: 18px; border-radius: 9px; border-color: #cbad633d; background: linear-gradient(#181b24, #080b13); box-shadow: inset 0 1px 0 #ffffff17, 0 8px 22px #0009; }
.ls-slot-stage .ls-controls__right { align-items: center; gap: 8px; }
.ls-slot-stage .ls-bet { gap: 7px; }
.ls-slot-stage .ls-bet__body { min-width: 100px; }
.ls-slot-stage .ls-bet__body small { font-size: 12px; color: #a6b4ca; }
.ls-slot-stage .ls-bet__value { font-size: 20px; }
.ls-slot-stage .ls-spin { width: 80px; height: 80px; font-size: 18px; border: 3px solid #ffe8a9; background: radial-gradient(ellipse at 35% 22%, #fff8d5 0, #edc96e 34%, #be872e 70%, #ffe5a0 100%); box-shadow: 0 0 0 4px #141316, 0 0 0 6px #846531, 0 8px 26px #000, inset 0 2px 2px #fff9; }
.ls-slot-stage .ls-spin:disabled { opacity: .78; }
.ls-slot-stage .ls-spin.is-busy::after { inset: -8px; border-top-color: #fff0af; }
.ls-slot-stage .ls-btn { min-height: 40px; font-size: 13px; }
.ls-slot-return { min-width: 100px; text-align: right; margin-right: 6px; }
.ls-slot-return small { display: block; color: #a6b4ca; font-size: 12px; }
.ls-slot-return strong { font: 700 18px var(--ls-display); color: #ffedb2; font-variant-numeric: tabular-nums; }
.ls-slot-note { color: #a7b2c4; font-size: 12px; text-align: center; }
.ls-slot-stage .ls-celebrate { gap: 12px; background: radial-gradient(ellipse, #080910ed 10%, #080a10a8 65%, #080a1030); }
.ls-slot-stage .ls-celebrate__label { font-size: clamp(22px, 3vw, 42px); letter-spacing: .08em; font-weight: 900; color: #fff0c4; text-shadow: 0 3px #5b3c19, 0 5px 20px #000; }
.ls-slot-stage .ls-celebrate__value { font-size: clamp(48px, 8vw, 112px); font-weight: 900; letter-spacing: -.03em; filter: drop-shadow(0 6px 0 #563613) drop-shadow(0 12px 28px #000); }
.ls-slot-stage .ls-celebrate__skip { font-size: 13px; color: #e8d9b9; }
.ls-slot-stage .ls-feature-intro { background: linear-gradient(#080b1699, #080b16ed); }
.ls-slot-stage .ls-feature-intro strong { max-width: 90%; text-align: center; }
.ls-feature-hud { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 18px; min-height: 60px; border: 1px solid #deb86777; border-radius: 7px; background: linear-gradient(110deg, #1b1822, #07111e); box-shadow: inset 0 1px #ffe5ab33; }
.ls-feature-hud[hidden] { display: none; }
.ls-feature-hud small { display: block; text-transform: uppercase; color: #e8cc92; font-size: 12px; letter-spacing: .09em; }
.ls-feature-hud strong { display: block; font: 750 22px var(--ls-display); color: #fff0b4; font-variant-numeric: tabular-nums; }
.ls-feature-hud__note { text-align: center; color: #d5e8ff; font-size: 14px; }
.ls-feature-hud__return { text-align: right; }
.ls-slot-stage .ls-theatre-entry { z-index: 10; text-align: center; background: radial-gradient(ellipse, #080b13f5 25%, #080b13b5); }
.ls-theatre-entry small { font-size: 16px; color: #d5dfec; max-width: 85%; }
.ls-lockfield { position: absolute; z-index: 3; inset: 12px; padding: 8px; display: grid; grid-template-columns: repeat(var(--lock-columns), minmax(0, 1fr)); gap: 8px; background: #050a12f7; border: 1px solid #e2c781; border-radius: 5px; }
.ls-lockfield__cell { position: relative; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 5px 3px; border: 1px solid #9c7a394d; border-radius: 7px; background: linear-gradient(145deg, #111a29, #02060d); }
.ls-lockfield__cell canvas { position: absolute; height: 94%; width: auto; max-width: 100%; object-fit: contain; top: 0; filter: drop-shadow(0 3px 8px #000); }
.ls-lockfield__cell small, .ls-lockfield__cell strong { position: relative; z-index: 1; color: #fff4c7; text-shadow: 0 2px 2px #000, 0 0 10px #000, 2px 0 #181006, -2px 0 #181006; }
.ls-lockfield__cell small { font: 700 12px var(--ls-display); letter-spacing: .08em; }
.ls-lockfield__cell strong { font: 900 clamp(18px, 2.7vw, 36px) var(--ls-display); line-height: 1.05; }
.ls-lockfield__cell.is-locked { border-color: #edc55e; box-shadow: inset 0 0 20px #c58b2938; }
.ls-lockfield__cell.is-landed { animation: ls-token-land 420ms cubic-bezier(.16,.8,.3,1); }
.ls-lockfield__cell.is-upgraded { animation: ls-token-upgrade 600ms ease-out; }
.ls-lockfield__cell.is-searching::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent, #e7c77540, transparent); animation: ls-token-scan 500ms linear infinite; }
@keyframes ls-token-land { from { transform: scale(.72); opacity: .3; } 65% { transform: scale(1.06); opacity: 1; } to { transform: scale(1); } }
@keyframes ls-token-upgrade { 40% { box-shadow: inset 0 0 40px #ffcc6690, 0 0 18px #ffd77a; } }
@keyframes ls-token-scan { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
@media (max-width: 760px) {
  .ls-feature-hud { min-height: 56px; padding: 8px; gap: 7px; }
  .ls-feature-hud strong { font-size: 18px; }
  .ls-feature-hud__note { font-size: 12px; max-width: 34%; }
  .ls-lockfield { gap: 4px; padding: 4px; inset: 10px; }
  .ls-lockfield__cell small { font-size: 10px; letter-spacing: 0; }
}
.ls-card[data-kind="slot"] { border-color: #d4aa5840; }
.ls-card[data-kind="slot"] .ls-card__title { font-weight: 900; font-size: 22px; text-shadow: 0 2px 2px #000; }
.ls-card[data-kind="slot"] .ls-card__art { filter: none; }

@media (max-width: 1000px) {
  .ls-slot-return { display: none; }
  .ls-slot-marquee__features button { padding: 7px 9px; font-size: 12px; }
}
@media (max-width: 760px) {
  .ls-game--slot { padding-inline: 8px; }
  .ls-slot-marquee { padding: 11px 6px 4px; min-height: 57px; gap: 8px; }
  .ls-slot-marquee__eyebrow { font-size: 12px; letter-spacing: .2em; }
  .ls-slot-marquee h1 { font-size: clamp(22px, 5.5vw, 34px); }
  .ls-slot-marquee__features { display: none; }
  .ls-slot-stage::before, .ls-slot-stage::after { inset-inline: -7px; }
  .ls-slot-stage .ls-controls--slot { grid-template-columns: 1fr 82px; gap: 5px 10px; padding: 10px; }
  .ls-slot-stage .ls-controls__centre { grid-column: 2; grid-row: 1 / span 2; }
  .ls-slot-stage .ls-controls__right { grid-column: 1; grid-row: 2; justify-content: flex-start; gap: 5px; }
  .ls-slot-stage .ls-bet { grid-column: 1; grid-row: 1; justify-content: flex-start; }
  .ls-slot-stage .ls-bet__value { font-size: 17px; }
  .ls-slot-stage .ls-bet__body { min-width: 85px; }
  .ls-slot-stage .ls-bet .ls-btn--ghost { display: none; }
  .ls-slot-stage .ls-controls__right .ls-btn { padding-inline: 8px; min-height: 34px; font-size: 12px; }
  .ls-slot-stage .ls-spin { width: 68px; height: 68px; }
  .ls-slot-stage .ls-meter { padding-inline: 3px; gap: 7px; }
  .ls-slot-stage .ls-meter__label { font-size: 12px; letter-spacing: 0; }
  .ls-slot-stage .ls-status { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-slot-stage *, .ls-slot-stage *::before, .ls-slot-stage *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Reduced effects: one switch that both the accessibility query and the
   in-game setting flip, so there is a single code path to maintain. */
:root[data-effects="reduced"] {
  --ls-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  --ls-shadow-lift: 0 10px 24px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ls-void);
  color: var(--ls-ink);
  font-family: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body.ls-body { min-height: 100vh; }

/* ------------------------------------------------------------------ *
 * Atmosphere — the room the casino sits in
 * ------------------------------------------------------------------ */

.ls-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(55, 224, 255, 0.16), transparent 62%),
    radial-gradient(940px 560px at 88% 4%, rgba(232, 198, 106, 0.13), transparent 60%),
    radial-gradient(1200px 700px at 50% 110%, rgba(255, 61, 110, 0.10), transparent 64%),
    linear-gradient(180deg, #050a16 0%, #03060d 58%, #04070f 100%);
}

/* A faint weave so the ground is never a flat black field. */
.ls-atmosphere::after {
  content: "";
  position: absolute;
  inset: -40%;
  opacity: 0.05;
  background-image:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.7) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-115deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 6px);
  mix-blend-mode: overlay;
}

.ls-beam {
  position: absolute;
  width: 44vmax;
  height: 150vmax;
  top: -50vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.16;
  transform-origin: 50% 0;
  animation: ls-sweep 26s var(--ls-ease) infinite alternate;
}
.ls-beam:nth-child(1) { left: -12vmax; background: rgba(55, 224, 255, 0.5); animation-delay: -4s; }
.ls-beam:nth-child(2) { left: 46vmax; background: rgba(232, 198, 106, 0.42); animation-delay: -12s; }
.ls-beam:nth-child(3) { right: -14vmax; background: rgba(255, 61, 110, 0.34); animation-delay: -19s; }

@keyframes ls-sweep {
  from { transform: rotate(-14deg) translateX(-6vmax); }
  to { transform: rotate(12deg) translateX(8vmax); }
}

.ls-particles { position: fixed; inset: 0; z-index: 1; pointer-events: none; }

/* ------------------------------------------------------------------ *
 * Shell
 * ------------------------------------------------------------------ */

.ls-shell {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.ls-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--ls-header-height);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 clamp(14px, 3vw, 34px);
  background: linear-gradient(180deg, rgba(4, 8, 18, 0.94), rgba(4, 8, 18, 0.72));
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--ls-line);
}

.ls-mark {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.ls-mark__star { width: 30px; height: 30px; filter: drop-shadow(0 2px 8px rgba(232, 198, 106, 0.5)); }
.ls-mark__text { font-family: var(--ls-display); font-size: 19px; letter-spacing: 0.055em; text-transform: uppercase; line-height: 1; }
.ls-mark__text b { font-weight: 700; background: var(--ls-metal-face); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ls-mark__text span { font-weight: 400; color: var(--ls-ink-dim); }

.ls-header__spacer { flex: 1; }

/* ------------------------------------------------------------------ *
 * Wallet
 * ------------------------------------------------------------------ */

.ls-wallet {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--ls-line-strong);
  background: linear-gradient(140deg, rgba(232, 198, 106, 0.14), rgba(8, 16, 32, 0.7));
  position: relative;
  overflow: hidden;
}
.ls-wallet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  transform: translateX(-120%);
}
.ls-wallet.is-crediting::before { animation: ls-shine 900ms var(--ls-ease); }
@keyframes ls-shine { to { transform: translateX(120%); } }

.ls-wallet__label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ls-ink-faint); display: block; }
.ls-wallet__value {
  font-family: var(--ls-mono);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--ls-metal-face);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: filter var(--ls-fast);
}
.ls-wallet.is-crediting .ls-wallet__value { filter: brightness(1.35) drop-shadow(0 0 12px rgba(232, 198, 106, 0.6)); }
.ls-wallet.is-debiting .ls-wallet__value { filter: saturate(0.6); }

/* ------------------------------------------------------------------ *
 * Buttons
 * ------------------------------------------------------------------ */

.ls-btn {
  appearance: none;
  border: 1px solid var(--ls-line-strong);
  background: rgba(255, 255, 255, 0.045);
  color: var(--ls-ink);
  font-family: var(--ls-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 16px;
  border-radius: var(--ls-radius-sm);
  cursor: pointer;
  transition: transform var(--ls-fast), background var(--ls-fast), border-color var(--ls-fast), box-shadow var(--ls-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.ls-btn { text-decoration: none; }
.ls-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.09); border-color: var(--ls-accent); }
.ls-btn:active:not(:disabled) { transform: translateY(1px) scale(0.985); }
.ls-btn:disabled { opacity: 0.42; cursor: not-allowed; }
.ls-btn:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 3px; }

.ls-btn--primary {
  border-color: transparent;
  background: var(--ls-metal-face);
  color: #150f02;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 20px rgba(232, 198, 106, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.ls-btn--primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 10px 30px rgba(232, 198, 106, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.6); }

.ls-btn--ghost { background: transparent; border-color: var(--ls-line); color: var(--ls-ink-dim); }
.ls-btn--danger { border-color: rgba(255, 61, 110, 0.5); color: #ffd2dd; background: rgba(255, 61, 110, 0.12); }
.ls-btn--icon { padding: 9px; width: 38px; height: 38px; border-radius: 50%; }
.ls-btn--lg { padding: 14px 26px; font-size: 15px; }

/* ------------------------------------------------------------------ *
 * Navigation — horizontally scrolling with a sliding indicator
 * ------------------------------------------------------------------ */

.ls-nav {
  position: sticky;
  top: var(--ls-header-height);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px clamp(14px, 3vw, 34px);
  overflow-x: auto;
  scrollbar-width: none;
  background: linear-gradient(180deg, rgba(4, 8, 18, 0.88), rgba(4, 8, 18, 0));
  -webkit-overflow-scrolling: touch;
}
.ls-nav::-webkit-scrollbar { display: none; }

.ls-nav__item {
  position: relative;
  appearance: none;
  border: 0;
  background: none;
  color: var(--ls-ink-faint);
  font-family: var(--ls-display);
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 9px 15px;
  cursor: pointer;
  border-radius: var(--ls-radius-sm);
  white-space: nowrap;
  transition: color var(--ls-fast), background var(--ls-fast);
}
.ls-nav__item:hover { color: var(--ls-ink); background: rgba(255, 255, 255, 0.05); }
.ls-nav__item[aria-selected="true"] { color: var(--ls-ink); }
.ls-nav__item:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 2px; }

.ls-nav__indicator {
  position: absolute;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ls-accent), transparent);
  box-shadow: 0 0 14px var(--ls-accent);
  transition: transform var(--ls-med), width var(--ls-med);
  pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */

.ls-hero {
  position: relative;
  margin: 8px clamp(14px, 3vw, 34px) 26px;
  border-radius: var(--ls-radius-lg);
  overflow: hidden;
  min-height: clamp(280px, 38vw, 420px);
  border: 1px solid var(--ls-line);
  box-shadow: var(--ls-shadow);
  isolation: isolate;
}
.ls-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ls-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(3, 6, 13, 0.94) 8%, rgba(3, 6, 13, 0.6) 46%, rgba(3, 6, 13, 0.15) 78%);
}
.ls-hero__body {
  position: relative;
  padding: clamp(22px, 4vw, 48px);
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  min-height: inherit;
}
.ls-hero__eyebrow {
  font-family: var(--ls-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ls-accent);
}
.ls-hero__title {
  font-family: var(--ls-display);
  font-size: clamp(32px, 5.4vw, 62px);
  line-height: 0.95;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  background: var(--ls-metal-face);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 22px rgba(232, 198, 106, 0.28));
}
.ls-hero__tagline { font-size: clamp(14px, 1.6vw, 18px); color: var(--ls-ink-dim); margin: 0; max-width: 46ch; }
.ls-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.ls-hero__actions { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }

.ls-hero__dots { position: absolute; bottom: 16px; right: 18px; display: flex; gap: 7px; z-index: 3; }
.ls-hero__dot {
  width: 26px; height: 3px; border-radius: 2px; border: 0; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.22);
  transition: background var(--ls-fast), width var(--ls-med);
}
.ls-hero__dot[aria-current="true"] { background: var(--ls-metal); width: 42px; }

/* ------------------------------------------------------------------ *
 * Chips (metadata pills, not gambling chips)
 * ------------------------------------------------------------------ */

.ls-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid var(--ls-line-strong);
  color: var(--ls-ink-dim);
  background: rgba(255, 255, 255, 0.045);
}
.ls-pill--gold { border-color: rgba(232, 198, 106, 0.5); color: var(--ls-metal-bright); background: rgba(232, 198, 106, 0.12); }
.ls-pill--cyan { border-color: rgba(55, 224, 255, 0.45); color: #b6f2ff; background: rgba(55, 224, 255, 0.12); }
.ls-pill--crimson { border-color: rgba(255, 61, 110, 0.45); color: #ffd0dc; background: rgba(255, 61, 110, 0.12); }

/* ------------------------------------------------------------------ *
 * Rails and game cards
 * ------------------------------------------------------------------ */

.ls-section { margin: 0 0 34px; }
.ls-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(14px, 3vw, 34px) 12px;
}
.ls-section__title {
  font-family: var(--ls-display);
  font-size: clamp(17px, 2.1vw, 23px);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0;
}
.ls-section__count { font-size: 12px; color: var(--ls-ink-faint); font-variant-numeric: tabular-nums; }

.ls-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(178px, 21vw, 244px);
  gap: var(--ls-gap);
  overflow-x: auto;
  padding: 6px clamp(14px, 3vw, 34px) 18px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--ls-line-strong) transparent;
  -webkit-overflow-scrolling: touch;
}
.ls-rail::-webkit-scrollbar { height: 7px; }
.ls-rail::-webkit-scrollbar-thumb { background: var(--ls-line-strong); border-radius: 4px; }

.ls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: var(--ls-gap);
  padding: 6px clamp(14px, 3vw, 34px) 18px;
}

.ls-card {
  position: relative;
  scroll-snap-align: start;
  border-radius: var(--ls-radius);
  overflow: hidden;
  border: 1px solid var(--ls-line);
  background: var(--ls-raised);
  cursor: pointer;
  aspect-ratio: 3 / 4;
  display: block;
  padding: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: transform var(--ls-med), border-color var(--ls-med), box-shadow var(--ls-med);
  isolation: isolate;
}
.ls-card:hover, .ls-card:focus-visible {
  /* Restrained: the tile lifts, it does not jump. A rail full of cards that
     each move 12px is a rail that never sits still. */
  transform: translateY(-5px);
  border-color: rgba(232, 198, 106, 0.55);
  box-shadow: var(--ls-shadow-lift);
  outline: none;
}
.ls-card__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ls-card__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, 0.16) 50%, transparent 64%);
  transform: translateX(-110%);
  transition: transform var(--ls-slow);
  pointer-events: none;
}
.ls-card:hover .ls-card__sheen { transform: translateX(110%); }

.ls-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 13px 13px;
  background: linear-gradient(180deg, transparent, rgba(3, 6, 13, 0.82) 34%, rgba(3, 6, 13, 0.97));
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ls-card__title {
  font-family: var(--ls-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}
.ls-card__meta { font-size: 11px; color: var(--ls-ink-faint); display: flex; gap: 8px; flex-wrap: wrap; }

.ls-card__tags { position: absolute; top: 10px; left: 10px; display: flex; gap: 5px; flex-wrap: wrap; max-width: 74%; }
.ls-card__tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  backdrop-filter: blur(6px);
}
.ls-card__tag--new { background: rgba(55, 224, 255, 0.9); color: #041018; }
.ls-card__tag--jackpot { background: linear-gradient(120deg, #ffdd8a, #d99f28); color: #1a1200; }
.ls-card__tag--featured { background: rgba(255, 255, 255, 0.9); color: #10131c; }

.ls-card__fav {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--ls-line-strong);
  background: rgba(3, 6, 13, 0.6);
  backdrop-filter: blur(6px);
  color: var(--ls-ink-dim);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform var(--ls-fast), color var(--ls-fast), border-color var(--ls-fast);
  z-index: 3;
}
.ls-card__fav:hover { transform: scale(1.12); color: var(--ls-metal); }
.ls-card__fav[aria-pressed="true"] { color: var(--ls-metal); border-color: rgba(232, 198, 106, 0.6); }
.ls-card__fav[aria-pressed="true"] svg { fill: currentColor; }
.ls-card__fav.is-popping { animation: ls-pop 420ms var(--ls-ease); }
@keyframes ls-pop { 40% { transform: scale(1.35); } 70% { transform: scale(0.94); } 100% { transform: scale(1); } }

.ls-card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  background: rgba(3, 6, 13, 0.35);
  backdrop-filter: blur(1.5px);
  transition: opacity var(--ls-med);
  pointer-events: none;
}
.ls-card:hover .ls-card__play, .ls-card:focus-visible .ls-card__play { opacity: 1; }

.ls-card__volatility { display: inline-flex; gap: 2px; align-items: center; }
.ls-card__volatility i { width: 4px; height: 9px; border-radius: 1px; background: var(--ls-line-strong); display: block; }
.ls-card__volatility i.is-on { background: var(--ls-metal); box-shadow: 0 0 6px rgba(232, 198, 106, 0.55); }

/* ------------------------------------------------------------------ *
 * Search
 * ------------------------------------------------------------------ */

.ls-search { position: relative; flex: 0 1 300px; min-width: 0; }
.ls-search input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: 999px;
  border: 1px solid var(--ls-line-strong);
  background: rgba(255, 255, 255, 0.045);
  color: var(--ls-ink);
  font: inherit;
  font-size: 13px;
  transition: border-color var(--ls-fast), background var(--ls-fast);
}
.ls-search input::placeholder { color: var(--ls-ink-faint); }
.ls-search input:focus { outline: none; border-color: var(--ls-accent); background: rgba(55, 224, 255, 0.07); }
.ls-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ls-ink-faint); pointer-events: none; }

/* ------------------------------------------------------------------ *
 * Skeletons
 * ------------------------------------------------------------------ */

.ls-skeleton {
  border-radius: var(--ls-radius);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.04) 70%);
  background-size: 220% 100%;
  animation: ls-sweep-bg 1.35s linear infinite;
}
@keyframes ls-sweep-bg { to { background-position: -220% 0; } }
.ls-skeleton--card { aspect-ratio: 3 / 4; }
.ls-skeleton--line { height: 12px; border-radius: 6px; }

/* ------------------------------------------------------------------ *
 * Notices, dialogs, toasts
 * ------------------------------------------------------------------ */

.ls-notice {
  margin: 0 clamp(14px, 3vw, 34px) 22px;
  padding: 12px 16px;
  border-radius: var(--ls-radius-sm);
  border: 1px solid var(--ls-line);
  background: rgba(255, 255, 255, 0.035);
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12.5px;
  color: var(--ls-ink-dim);
  line-height: 1.5;
}
.ls-notice b { color: var(--ls-metal-bright); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 11px; }

.ls-dialog {
  border: 1px solid var(--ls-line-strong);
  border-radius: var(--ls-radius-lg);
  background: linear-gradient(170deg, #0b1732, #060c1c);
  color: var(--ls-ink);
  padding: 0;
  max-width: min(680px, calc(100vw - 32px));
  width: 100%;
  box-shadow: var(--ls-shadow-lift);
}
.ls-dialog::backdrop { background: rgba(2, 4, 10, 0.76); backdrop-filter: blur(6px); }
.ls-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--ls-line);
}
.ls-dialog__title { font-family: var(--ls-display); font-size: 19px; text-transform: uppercase; letter-spacing: 0.07em; margin: 0; }
.ls-dialog__body { padding: 20px 24px 24px; max-height: min(66vh, 560px); overflow-y: auto; font-size: 13.5px; line-height: 1.62; color: var(--ls-ink-dim); }
.ls-dialog__body h4 { color: var(--ls-ink); font-family: var(--ls-display); letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; margin: 22px 0 8px; }
.ls-dialog__body h4:first-child { margin-top: 0; }

.ls-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.ls-toast {
  pointer-events: auto;
  padding: 12px 16px;
  border-radius: var(--ls-radius-sm);
  border: 1px solid var(--ls-line-strong);
  background: linear-gradient(160deg, #0d1a36, #070e20);
  box-shadow: var(--ls-shadow);
  font-size: 13px;
  max-width: 340px;
  animation: ls-toast-in 380ms var(--ls-ease);
}
.ls-toast--error { border-color: rgba(255, 61, 110, 0.5); }
.ls-toast--win { border-color: rgba(232, 198, 106, 0.6); }
@keyframes ls-toast-in { from { transform: translateY(14px); opacity: 0; } }

/* ------------------------------------------------------------------ *
 * Mobile
 * ------------------------------------------------------------------ */

.ls-bottomnav { display: none; }

@media (max-width: 760px) {
  :root { --ls-header-height: 58px; --ls-gap: 12px; }

  .ls-header { gap: 8px; padding: 0 10px; }
  .ls-mark__text { font-size: 15px; }

  /* `flex-basis: 100%` was meant to drop the search onto a second row, but the
     header is a single nowrap row of fixed height, so all it did was push the
     field 76px past the right edge and make the whole page scroll sideways.
     The field flexes into whatever the row has left instead, and the spacer —
     which exists only to push the wallet right on a wide header — is not
     needed once something else is taking the slack. */
  .ls-search { flex: 1 1 90px; order: 0; min-width: 60px; }
  .ls-header__spacer { display: none; }
  .ls-header .ls-btn--icon { width: 34px; height: 34px; padding: 7px; }

  .ls-shell { padding-bottom: 74px; }

  /* Navigation becomes a bottom bar, which is where a thumb actually is. */
  .ls-bottomnav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: rgba(4, 8, 18, 0.96);
    backdrop-filter: blur(18px);
    border-top: 1px solid var(--ls-line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
  }
  .ls-bottomnav__item {
    flex: 1;
    border: 0;
    background: none;
    color: var(--ls-ink-faint);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 2px;
    cursor: pointer;
    min-height: 48px;
    border-radius: var(--ls-radius-sm);
  }
  .ls-bottomnav__item[aria-selected="true"] { color: var(--ls-metal); }
  .ls-bottomnav__item svg { width: 20px; height: 20px; }

  .ls-hero { min-height: 300px; margin: 6px 12px 20px; }
  .ls-rail { grid-auto-columns: 44vw; }
  .ls-grid { grid-template-columns: repeat(auto-fill, minmax(43vw, 1fr)); }
}

@media (max-width: 430px) {
  .ls-mark__text { display: none; }
  .ls-header { gap: 6px; }

  /* The wallet was wrapping its own figure onto a second line and bleeding out
     of a 58px header. One line, no label — the pill is unmistakable without it. */
  .ls-wallet { padding: 5px 10px; gap: 0; flex-shrink: 0; }
  .ls-wallet__label { display: none; }
  .ls-wallet__value { font-size: 13px; white-space: nowrap; }
}

@media (max-width: 400px) {
  /* The rails keep a wide card so the next one peeks in and invites a swipe.
     The grid does not: `minmax(56vw)` collapsed it to a single column with a
     226px card floating in a 366px row, and made the lobby twice as long as it
     needed to be. Two columns, the same as every other narrow width. */
  .ls-rail { grid-auto-columns: 58vw; }
  .ls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ *
 * Accessibility
 * ------------------------------------------------------------------ */

.ls-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ls-skip {
  position: absolute;
  left: 10px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ls-metal);
  color: #150f02;
  border-radius: var(--ls-radius-sm);
  font-weight: 700;
  transition: top var(--ls-fast);
}
.ls-skip:focus { top: 10px; }

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

@media (prefers-contrast: more) {
  :root { --ls-ink-dim: #d3e0f5; --ls-ink-faint: #a9bcd8; --ls-line: rgba(180, 205, 240, 0.34); --ls-line-strong: rgba(180, 205, 240, 0.5); }
}

/* ==================================================================== *
 * Game screen
 * ==================================================================== */

.ls-game {
  position: relative;
  /* The launch curtain lifts by scaling to 1.04, which on a phone is wider than
     the viewport and let the page scroll sideways for the half second it took
     to fade. Clipping is enough; `clip` does not create a scroll container the
     way `hidden` would. */
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--ls-header-height));
  padding: 0 clamp(10px, 2.4vw, 28px) 28px;
}
.ls-game:fullscreen { background: var(--ls-void); padding: 0 18px 18px; }

.ls-game__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px 16px;
}
.ls-game__title { display: flex; flex-direction: column; min-width: 0; }
.ls-game__title strong {
  font-family: var(--ls-display);
  font-size: clamp(16px, 2.2vw, 22px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ls-game__title small { font-size: 11.5px; color: var(--ls-ink-faint); }
.ls-game__spacer { flex: 1; }
.ls-game__wallet { text-align: right; margin-right: 4px; }
.ls-game__wallet small { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-game__wallet strong { font-family: var(--ls-mono); font-variant-numeric: tabular-nums; color: var(--ls-metal-bright); font-size: 15px; }

.ls-game__board { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; }

.ls-game__error {
  margin: auto;
  text-align: center;
  max-width: 460px;
  padding: 34px 26px;
  border-radius: var(--ls-radius-lg);
  border: 1px solid var(--ls-line-strong);
  background: rgba(255, 255, 255, 0.035);
}
.ls-game__error h3 { font-family: var(--ls-display); text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 10px; }
.ls-game__error p { color: var(--ls-ink-dim); margin: 0; line-height: 1.55; }

/* Launch curtain */
.ls-launch {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: radial-gradient(700px 420px at 50% 42%, rgba(232, 198, 106, 0.12), transparent 70%), var(--ls-void);
  transition: opacity 560ms var(--ls-ease), transform 560ms var(--ls-ease);
}
.ls-launch.is-lifting { opacity: 0; transform: scale(1.04); pointer-events: none; }
.ls-launch__mark {
  width: 132px; height: 176px;
  border-radius: var(--ls-radius);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--ls-line-strong);
  box-shadow: var(--ls-shadow-lift);
  animation: ls-launch-breathe 2.4s var(--ls-ease) infinite alternate;
}
@keyframes ls-launch-breathe { to { transform: translateY(-8px) scale(1.02); } }
.ls-launch__name { font-family: var(--ls-display); font-size: 19px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ls-ink-dim); }
.ls-launch__bar { width: 190px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ls-launch__bar i { display: block; height: 100%; width: 40%; border-radius: 2px; background: var(--ls-metal-face); animation: ls-launch-slide 1.1s var(--ls-ease) infinite; }
@keyframes ls-launch-slide { from { transform: translateX(-120%); } to { transform: translateX(320%); } }

/* ==================================================================== *
 * Slot cabinet
 * ==================================================================== */

.ls-cabinet {
  position: relative;
  border-radius: var(--ls-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ls-line-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.3));
  box-shadow: var(--ls-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: 10px;
  /* The cabinet hugs the canvas, and the canvas is sized against the viewport
     by the renderer. It used to be `flex: 1`, which let it grow to whatever
     height the canvas asked for — on a wide window that was the whole screen
     and the controls went below the fold. */
  flex: 0 0 auto;
  align-self: center;
  max-width: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ls-cabinet__canvas { border-radius: var(--ls-radius); display: block; max-width: 100%; }

.ls-celebrate {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  background: radial-gradient(closest-side, rgba(3, 6, 13, 0.82), rgba(3, 6, 13, 0.55));
  animation: ls-celebrate-in 420ms var(--ls-ease);
  z-index: 5;
}
.ls-celebrate.is-leaving { animation: ls-celebrate-out 300ms var(--ls-ease) forwards; }
@keyframes ls-celebrate-in { from { opacity: 0; transform: scale(0.9); } }
@keyframes ls-celebrate-out { to { opacity: 0; transform: scale(1.06); } }
.ls-celebrate__label {
  font-family: var(--ls-display);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(14px, 2.4vw, 22px);
  color: var(--ls-accent);
}
.ls-celebrate__value {
  font-family: var(--ls-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(34px, 7vw, 74px);
  line-height: 1;
  background: var(--ls-metal-face);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 26px rgba(232, 198, 106, 0.45));
}
.ls-celebrate--mega .ls-celebrate__value, .ls-celebrate--epic .ls-celebrate__value { animation: ls-pulse 900ms var(--ls-ease) infinite alternate; }
@keyframes ls-pulse { to { transform: scale(1.045); } }

.ls-feature-intro {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  background: rgba(3, 6, 13, 0.86);
  z-index: 6;
  animation: ls-celebrate-in 380ms var(--ls-ease);
}
.ls-feature-intro.is-leaving { animation: ls-celebrate-out 300ms var(--ls-ease) forwards; }
.ls-feature-intro span { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ls-accent); }
.ls-feature-intro strong { font-family: var(--ls-display); font-size: clamp(24px, 5vw, 46px); text-transform: uppercase; letter-spacing: 0.05em; background: var(--ls-metal-face); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ls-feature-intro em { font-style: normal; font-family: var(--ls-mono); color: var(--ls-metal-bright); font-size: 18px; }

/* Meters */
.ls-meter { display: flex; align-items: center; gap: 12px; padding: 0 4px; min-height: 26px; }
/* A game with no meter should not reserve a row for one. (The win line
   keeps its space on purpose — collapsing it would resize the reels
   every time a spin paid.) */
.ls-meter:empty { display: none; }
.ls-meter__label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-meter__bar { flex: 1; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.ls-meter__bar i { display: block; height: 100%; background: var(--ls-metal-face); box-shadow: 0 0 14px rgba(232, 198, 106, 0.5); transition: width var(--ls-med); }
.ls-meter__value { font-family: var(--ls-mono); font-size: 11px; color: var(--ls-ink-dim); font-variant-numeric: tabular-nums; }
.ls-meter__lanes { display: flex; gap: 6px; flex: 1; }
.ls-meter__lane { flex: 1; height: 26px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); position: relative; display: flex; align-items: flex-end; overflow: hidden; }
.ls-meter__lane i { display: block; width: 100%; background: linear-gradient(0deg, var(--ls-accent), var(--ls-metal)); transition: height var(--ls-med); }
.ls-meter__lane small { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-family: var(--ls-mono); color: var(--ls-ink); text-shadow: 0 1px 3px rgba(0,0,0,0.8); }

.ls-status { text-align: center; font-size: 13px; color: var(--ls-ink-dim); min-height: 18px; letter-spacing: 0.03em; }
.ls-winline { display: flex; justify-content: center; gap: 14px; min-height: 20px; font-size: 13px; }
.ls-winline__symbol { color: var(--ls-ink-dim); }
.ls-winline__value { font-family: var(--ls-mono); color: var(--ls-metal-bright); font-weight: 600; }

/* Controls */
.ls-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: var(--ls-radius-lg);
  border: 1px solid var(--ls-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.24));
}
.ls-controls__centre { display: grid; place-items: center; }
.ls-controls__right { display: flex; gap: 10px; justify-content: flex-end; }

.ls-bet { display: flex; align-items: center; gap: 8px; }
.ls-bet__body { text-align: center; min-width: 108px; }
.ls-bet__body small { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-bet__value { font-family: var(--ls-mono); font-size: 16px; color: var(--ls-metal-bright); font-variant-numeric: tabular-nums; }

.ls-spin {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  background: var(--ls-metal-face);
  color: #150f02;
  font-family: var(--ls-display);
  font-size: 17px;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: 0 10px 34px rgba(232, 198, 106, 0.34), inset 0 2px 0 rgba(255, 255, 255, 0.6);
  transition: transform var(--ls-fast), box-shadow var(--ls-fast), filter var(--ls-fast);
  position: relative;
}
.ls-spin:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 14px 44px rgba(232, 198, 106, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.66); }
.ls-spin:active:not(:disabled) { transform: scale(0.955); }
.ls-spin:disabled { opacity: 0.5; cursor: not-allowed; }
.ls-spin:focus-visible { outline: 3px solid var(--ls-accent); outline-offset: 4px; }
.ls-spin.is-busy::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--ls-accent);
  animation: ls-rotate 800ms linear infinite;
}
@keyframes ls-rotate { to { transform: rotate(360deg); } }

.ls-autoplay-counts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }

.ls-paytable { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: 12.5px; }
.ls-paytable th, .ls-paytable td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--ls-line); }
.ls-paytable th { color: var(--ls-ink-faint); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
.ls-paytable td:not(:first-child) { font-family: var(--ls-mono); color: var(--ls-metal-bright); }

@media (max-width: 760px) {
  .ls-controls { grid-template-columns: 1fr; gap: 12px; }
  .ls-controls__right { justify-content: center; }
  .ls-bet { justify-content: center; }

  /* The SLOT's controls only. The spin button keeps its own column on the
     right, where a thumb is, and the wager and secondary buttons stack beside
     it — stacking all three cost 85px of reel height. The table games share
     the `.ls-controls` class with entirely different children (a chip rail is
     not a spin button), so this must not reach them: it put the rail in a
     narrow column underneath the wager and the two overlapped. */
  .ls-controls--slot {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 10px 12px;
    padding: 12px;
  }
  .ls-controls--slot .ls-controls__centre { grid-column: 2; grid-row: 1 / span 2; }
  .ls-controls--slot .ls-bet { grid-column: 1; grid-row: 1; justify-content: flex-start; }
  .ls-controls--slot .ls-controls__right { grid-column: 1; grid-row: 2; justify-content: flex-start; }
  .ls-controls--slot .ls-bet__body { min-width: 88px; }
  .ls-spin { width: 78px; height: 78px; font-size: 15px; }
  .ls-game { padding: 0 10px 18px; }
}

/* ==================================================================== *
 * Table games — cards, chips, felt
 * ==================================================================== */

.ls-table-felt {
  position: relative;
  /* Hugs its content with a floor, rather than filling the screen. `flex: 1`
     made a pre-deal blackjack table an 830px-tall empty field. */
  flex: 0 1 auto;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 18px;
  padding: 22px 18px;
  border-radius: var(--ls-radius-lg);
  border: 1px solid var(--ls-line-strong);
  background:
    radial-gradient(680px 380px at 50% 34%, rgba(69, 224, 160, 0.09), transparent 68%),
    linear-gradient(180deg, #0a2018, #061410 62%, #04100c);
  box-shadow: var(--ls-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ls-table-felt::after {
  /* The rail: a gold arc that reads as the edge of a real table. */
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: calc(var(--ls-radius-lg) - 6px);
  border: 1px solid rgba(232, 198, 106, 0.2);
  pointer-events: none;
}

.ls-hands { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

.ls-hand { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--ls-radius); transition: background var(--ls-fast), box-shadow var(--ls-fast); }
/* On a painted felt the active box is lit from underneath — the betting circle
   already glows, and a bordered rectangle over cloth reads as a stray panel. */
.ls-hand.is-active { background: rgba(232, 198, 106, 0.07); box-shadow: inset 0 0 0 1px rgba(232, 198, 106, 0.3); }
.ls-table-felt:has(.ls-felt__canvas) .ls-hand.is-active {
  background: radial-gradient(60% 50% at 50% 78%, rgba(232, 198, 106, 0.16), transparent 72%);
  box-shadow: none;
}
.ls-hand__label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-hand__cards { display: flex; gap: 6px; min-height: 96px; align-items: center; }
.ls-hand__total { font-family: var(--ls-mono); font-size: 13px; color: var(--ls-metal-bright); min-height: 18px; font-variant-numeric: tabular-nums; }

/* Cards. Readability first: big rank, big pip, high contrast. */
.ls-card-face {
  position: relative;
  width: 66px;
  height: 94px;
  border-radius: 8px;
  background: linear-gradient(160deg, #ffffff, #e9edf5);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transform-origin: bottom center;
}
.ls-card-face.is-small { width: 46px; height: 66px; border-radius: 6px; }
.ls-card-face.is-dealing { animation: ls-deal 320ms var(--ls-ease); }
@keyframes ls-deal {
  from { transform: translate(40px, -60px) rotate(14deg) scale(0.86); opacity: 0; }
}
.ls-card-face.is-red { color: #d1233f; }
.ls-card-face.is-black { color: #14161d; }

.ls-card-face__corner {
  position: absolute;
  top: 5px; left: 6px;
  font: 700 13px/1 var(--ls-display), system-ui, sans-serif;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.ls-card-face__corner i { font-style: normal; font-size: 11px; }
.ls-card-face__corner.is-bottom { top: auto; left: auto; bottom: 5px; right: 6px; transform: rotate(180deg); }
.ls-card-face__pip { font-size: 34px; line-height: 1; }
.ls-card-face.is-small .ls-card-face__pip { font-size: 24px; }
.ls-card-face.is-small .ls-card-face__corner { font-size: 10px; }

.ls-card-face.is-down { background: linear-gradient(150deg, #0e1b34, #071022 60%, #0b1730); }
.ls-card-face__back {
  position: absolute;
  inset: 4px;
  border-radius: 5px;
  border: 1px solid rgba(232, 198, 106, 0.4);
  display: grid;
  place-items: center;
  background-image:
    repeating-linear-gradient(45deg, rgba(232, 198, 106, 0.09) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(-45deg, rgba(55, 224, 255, 0.07) 0 3px, transparent 3px 7px);
}

/* Chips: colour, ring pattern AND number, so colour is never the only cue. */
.ls-chiprail { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ls-chip {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--chip-colour) 78%, white), var(--chip-colour) 62%, color-mix(in srgb, var(--chip-colour) 70%, black));
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5), inset 0 0 0 3px color-mix(in srgb, var(--chip-colour) 60%, black);
  transition: transform var(--ls-fast), box-shadow var(--ls-fast);
  display: grid;
  place-items: center;
}
/* Eight dashes around the rim — the ring pattern that distinguishes by shape. */
.ls-chip::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--chip-ring) 0deg 12deg, transparent 12deg 45deg);
  -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 62% 100%);
  mask: radial-gradient(circle, transparent 0 62%, #000 62% 100%);
  opacity: 0.9;
}
.ls-chip span {
  position: relative;
  font: 800 12px/1 var(--ls-display), system-ui, sans-serif;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.02em;
}
.ls-chip:hover { transform: translateY(-4px) scale(1.05); }
.ls-chip.is-selected { transform: translateY(-6px) scale(1.08); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), inset 0 0 0 3px var(--ls-metal), 0 0 0 2px var(--ls-metal); }
.ls-chip:focus-visible { outline: 3px solid var(--ls-accent); outline-offset: 3px; }

.ls-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Betting spots shared by baccarat and three card */
.ls-bacc-spots { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; }
.ls-bacc-spot {
  min-width: 140px;
  padding: 12px 16px;
  border-radius: var(--ls-radius);
  border: 1px solid var(--ls-line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ls-ink);
  cursor: pointer;
  display: grid;
  gap: 3px;
  text-align: center;
  transition: border-color var(--ls-fast), background var(--ls-fast), transform var(--ls-fast);
}
.ls-bacc-spot:hover { border-color: var(--ls-metal); background: rgba(232, 198, 106, 0.08); }
.ls-bacc-spot:active { transform: scale(0.98); }
.ls-bacc-spot.is-staked { border-color: var(--ls-metal); background: rgba(232, 198, 106, 0.12); }
.ls-bacc-spot strong { font-family: var(--ls-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; }
.ls-bacc-spot small { font-size: 10.5px; color: var(--ls-ink-faint); }
.ls-bacc-spot__stake { font-family: var(--ls-mono); font-size: 13px; color: var(--ls-metal-bright); }

.ls-road, .ls-history-rail { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 4px; min-height: 30px; }
.ls-history-rail__label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ls-ink-dim); margin-right: 4px; }
/* The independence note is a footnote, not a peer of the results — it belongs
   under them rather than trailing off the end of the row. */
.ls-history-rail small {
  flex-basis: 100%;
  font-size: 10.5px;
  color: var(--ls-ink-faint);
  margin: 2px 0 0;
}
/* On a painted felt the rail needs its own ground to read against. */
.ls-table-felt:has(.ls-felt__canvas) .ls-history-rail {
  background: rgba(4, 12, 8, 0.5);
  border-radius: var(--ls-radius-sm);
  padding: 6px 10px;
}
.ls-table-felt:has(.ls-felt__canvas) .ls-history-rail__label { color: rgba(232, 198, 106, 0.75); }
.ls-history-rail__dot, .ls-road__dot {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 10px/1 var(--ls-mono), monospace; font-style: normal;
  color: #fff;
}
.ls-history-rail__dot.is-red, .ls-road__dot.is-banker { background: #c8283c; }
.ls-history-rail__dot.is-black, .ls-road__dot.is-player { background: #1b1f2a; border: 1px solid var(--ls-line-strong); }
.ls-history-rail__dot.is-green, .ls-road__dot.is-tie { background: #1f8a4a; }

/* ---- Roulette ---- */
.ls-roulette { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 20px; align-items: start; }
.ls-wheel-wrap { position: relative; display: grid; place-items: center; padding: 10px; }
.ls-wheel { width: 100%; max-width: 340px; height: auto; filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.6)); }
.ls-wheel-wrap::after {
  /* The pointer above the wheel. */
  content: "";
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 15px solid var(--ls-metal);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
  z-index: 2;
}

.ls-felt { display: grid; gap: 8px; }
.ls-felt__main { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px; }
.ls-felt__grid {
  display: grid;
  grid-template-columns: 44px repeat(12, 1fr);
  grid-template-rows: repeat(3, minmax(34px, 1fr));
  gap: 2px;
  /* A roulette layout runs in COLUMNS of three — 1-2-3, 4-5-6 — so the top row
     reads 3, 6, 9 … 36. The builder has always appended in that order and the
     grid was flowing by row, which laid the numbers out as 3 2 1 6 5 4: a
     board no real table has ever had. */
  grid-auto-flow: column;
}
.ls-felt__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 44px repeat(12, 1fr);
  grid-template-rows: repeat(3, minmax(34px, 1fr));
  gap: 2px;
  pointer-events: none;
}
.ls-felt__overlay > * { pointer-events: auto; }
.ls-felt__columns { display: grid; grid-template-rows: repeat(3, minmax(34px, 1fr)); gap: 2px; }

.ls-felt__spot {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 32, 24, 0.7);
  color: var(--ls-ink);
  font: 600 12px/1 var(--ls-body), system-ui, sans-serif;
  border-radius: 3px;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 2px;
  transition: background var(--ls-fast), box-shadow var(--ls-fast);
  min-height: 30px;
}
.ls-felt__spot:hover { background: rgba(232, 198, 106, 0.22); box-shadow: inset 0 0 0 1px var(--ls-metal); }
.ls-felt__spot:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 1px; z-index: 4; }
.ls-felt__spot.is-red { background: #a51f30; }
.ls-felt__spot.is-black { background: #14181f; }
.ls-felt__spot.is-zero { background: #14663c; }
.ls-felt__spot.is-outside { min-height: 36px; font-size: 11px; letter-spacing: 0.04em; }
.ls-felt__spot.is-outside small { display: block; font-size: 9px; color: var(--ls-ink-faint); font-weight: 400; }
.ls-felt__spot.is-staked { box-shadow: inset 0 0 0 2px var(--ls-metal); }

/* Split, corner, street and six-line hotspots sit on the lines. */
.ls-felt__spot.is-split, .ls-felt__spot.is-corner, .ls-felt__spot.is-street, .ls-felt__spot.is-sixline {
  background: transparent; border: 0; min-height: 0; border-radius: 50%;
}
.ls-felt__spot.is-horizontal { width: 60%; height: 10px; transform: translateY(50%); }
.ls-felt__spot.is-vertical { width: 10px; height: 60%; transform: translateX(50%); }
.ls-felt__spot.is-corner { width: 14px; height: 14px; transform: translate(50%, 50%); }
.ls-felt__spot.is-street { width: 60%; height: 10px; }
.ls-felt__spot.is-sixline { width: 14px; height: 14px; }
.ls-felt__spot.is-split:hover, .ls-felt__spot.is-corner:hover,
.ls-felt__spot.is-street:hover, .ls-felt__spot.is-sixline:hover {
  background: var(--ls-metal); box-shadow: 0 0 12px var(--ls-metal);
}

.ls-felt__chip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 26px; height: 26px;
  padding: 0 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff2c9, #e8c66a 60%, #8a6a1f);
  color: #150f02;
  font: 800 10px/26px var(--ls-mono), monospace;
  text-align: center;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 5;
}

.ls-felt__outside { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ls-felt__outside .ls-felt__spot:nth-child(n+4) { grid-column: span 1; }

/* ---- Craps ---- */
.ls-craps { display: grid; gap: 16px; }
.ls-dice { display: flex; gap: 14px; justify-content: center; padding: 14px; }
.ls-die {
  width: 62px; height: 62px;
  border-radius: 10px;
  background: linear-gradient(150deg, #ffffff, #dfe4ee);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.14);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 7px;
  gap: 2px;
}
.ls-die i { width: 10px; height: 10px; border-radius: 50%; background: #14161d; align-self: center; justify-self: center; }
.ls-craps-felt { display: grid; gap: 8px; }
.ls-craps-felt__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.ls-point { text-align: center; }
.ls-point small { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-point strong { font-family: var(--ls-display); font-size: 24px; color: var(--ls-ink-faint); }
.ls-point.is-on strong { color: var(--ls-metal-bright); text-shadow: 0 0 18px rgba(232, 198, 106, 0.6); }

/* ---- Video poker ---- */
.ls-vp-paytable { overflow-x: auto; }
.ls-vp-paytable .ls-paytable td.is-current { color: var(--ls-metal-bright); background: rgba(232, 198, 106, 0.12); font-weight: 700; }
.ls-vp-paytable .ls-paytable tr.is-hit { background: rgba(232, 198, 106, 0.16); }
.ls-vp-hand { display: flex; gap: 12px; justify-content: center; padding: 18px 0; flex-wrap: wrap; }
.ls-vp-card { display: grid; gap: 8px; justify-items: center; }
.ls-vp-card.is-held .ls-card-face { box-shadow: 0 0 0 2px var(--ls-metal), 0 6px 18px rgba(0, 0, 0, 0.5); transform: translateY(-8px); }
.ls-vp-card .ls-card-face { transition: transform var(--ls-fast), box-shadow var(--ls-fast); }
.ls-vp-hold { min-width: 66px; }

/* A phone: five cards in one row, and a paytable that does not eat 540px of
   screen before the hand is even dealt. */
@media (max-width: 620px) {
  .ls-vp-hand {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 12px 0;
  }
  .ls-vp-card .ls-card-face { width: 100%; height: auto; aspect-ratio: 5 / 7; }
  .ls-vp-card .ls-card-face__pip { font-size: 20px; }
  .ls-vp-card .ls-card-face__corner { font-size: 10px; }
  .ls-vp-card { gap: 5px; }
  .ls-vp-hold { min-width: 0; width: 100%; padding: 7px 2px; font-size: 11px; }
  .ls-vp-paytable .ls-paytable { font-size: 11px; }
  .ls-vp-paytable .ls-paytable th, .ls-vp-paytable .ls-paytable td { padding: 4px 6px; }
}

@media (max-width: 860px) {
  .ls-roulette { grid-template-columns: 1fr; }
  .ls-felt__grid, .ls-felt__overlay { grid-template-columns: 34px repeat(12, 1fr); grid-template-rows: repeat(3, minmax(28px, 1fr)); }
  .ls-felt__spot { font-size: 10px; min-height: 26px; }
  .ls-card-face { width: 54px; height: 78px; }
  .ls-card-face__pip { font-size: 27px; }
  .ls-hand__cards { min-height: 80px; }
  .ls-chip { width: 44px; height: 44px; }
  .ls-die { width: 46px; height: 46px; }
  .ls-die i { width: 8px; height: 8px; }
}

/* ================================================================== *
 * Profile — standing, vault, missions, achievements
 * ================================================================== */

.ls-standing {
  margin: 0 clamp(14px, 3vw, 34px) 26px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius-lg);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(232, 198, 106, 0.14), transparent 58%),
    linear-gradient(160deg, var(--ls-raised), var(--ls-deep));
  box-shadow: var(--ls-shadow);
}

.ls-standing__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.ls-standing__badge {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ls-metal-face);
  color: #2a1f06;
  box-shadow: 0 0 0 3px rgba(232, 198, 106, 0.2), 0 12px 30px rgba(0, 0, 0, 0.5);
}

.ls-standing__badge-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
}

.ls-standing__badge-level {
  font-family: var(--ls-display);
  font-size: 30px;
  line-height: 0.95;
}

.ls-standing__title {
  margin: 0;
  font-family: var(--ls-display);
  font-size: clamp(20px, 3vw, 27px);
  letter-spacing: 0.02em;
}

.ls-standing__sub {
  margin: 4px 0 0;
  color: var(--ls-ink-dim);
  font-size: 13px;
}

.ls-standing__meter-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--ls-ink-faint);
  font-family: var(--ls-mono);
  font-size: 11px;
}

.ls-standing__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--ls-line);
}

.ls-standing__stat-label {
  display: block;
  color: var(--ls-ink-faint);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ls-standing__stat-value {
  display: block;
  margin-top: 4px;
  font-family: var(--ls-display);
  font-size: 19px;
}

/* ---- Meters ---- */

.ls-meter {
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 178, 224, 0.14);
  overflow: hidden;
}

.ls-meter__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ls-accent-deep), var(--ls-accent));
  transition: width var(--ls-med);
}

.ls-meter--gold .ls-meter__fill {
  background: var(--ls-metal-face);
}

/* ---- Cards shared by missions, achievements and level rewards ---- */

.ls-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
  padding: 0 clamp(14px, 3vw, 34px);
}

.ls-task,
.ls-reward {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius);
  background: linear-gradient(160deg, var(--ls-raised), rgba(7, 16, 34, 0.88));
}

.ls-task__body {
  flex: 1 1 auto;
  min-width: 0;
}

.ls-task__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.ls-task__title {
  font-family: var(--ls-display);
  font-size: 15px;
  letter-spacing: 0.01em;
}

.ls-task__reward {
  flex: 0 0 auto;
  color: var(--ls-metal);
  font-family: var(--ls-mono);
  font-size: 12px;
}

.ls-task__desc {
  margin: 4px 0 10px;
  color: var(--ls-ink-dim);
  font-size: 12.5px;
  line-height: 1.45;
}

.ls-task__progress {
  display: block;
  margin-top: 6px;
  color: var(--ls-ink-faint);
  font-family: var(--ls-mono);
  font-size: 11px;
}

.ls-task.is-complete {
  border-color: rgba(69, 224, 160, 0.34);
}

.ls-task.is-complete .ls-meter__fill {
  background: linear-gradient(90deg, #0a7a54, var(--ls-jade));
}

.ls-reward__mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(232, 198, 106, 0.4);
  color: var(--ls-metal);
  font-family: var(--ls-display);
  font-size: 17px;
}

.ls-reward__title {
  display: block;
  font-family: var(--ls-display);
  font-size: 15px;
}

.ls-reward__sub {
  display: block;
  margin-top: 2px;
  color: var(--ls-ink-dim);
  font-family: var(--ls-mono);
  font-size: 12px;
}

/* ---- Claim control ---- */

.ls-claim {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--ls-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ls-claim--ready {
  background: var(--ls-metal-face);
  color: #2a1f06;
  cursor: pointer;
  transition: transform var(--ls-fast), filter var(--ls-fast);
}

.ls-claim--ready:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.ls-claim--ready:disabled {
  opacity: 0.6;
  cursor: progress;
}

.ls-claim--done {
  border-color: rgba(69, 224, 160, 0.4);
  color: var(--ls-jade);
}

.ls-claim--locked {
  border-color: var(--ls-line);
  color: var(--ls-ink-faint);
}

/* ---- The vault ---- */

.ls-vault__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
  gap: 20px;
  padding: 0 clamp(14px, 3vw, 34px);
  align-items: start;
}

.ls-vault__ladder {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.ls-vault__rung {
  padding: 12px 6px;
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius-sm);
  background: rgba(7, 16, 34, 0.7);
  text-align: center;
}

.ls-vault__rung.is-reached {
  border-color: rgba(232, 198, 106, 0.42);
  background: rgba(232, 198, 106, 0.09);
}

.ls-vault__rung.is-next {
  border-color: var(--ls-accent);
  box-shadow: 0 0 0 1px rgba(55, 224, 255, 0.28), 0 8px 24px rgba(55, 224, 255, 0.16);
}

.ls-vault__day {
  display: block;
  color: var(--ls-ink-faint);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ls-vault__amount {
  display: block;
  margin-top: 5px;
  font-family: var(--ls-display);
  font-size: 14px;
}

.ls-vault__claim {
  padding: 16px;
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius);
  background: linear-gradient(160deg, var(--ls-raised), rgba(7, 16, 34, 0.88));
  text-align: center;
}

.ls-vault__status {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ls-ink-dim);
}

.ls-vault__note {
  margin: 12px 0 0;
  color: var(--ls-ink-faint);
  font-size: 11px;
  line-height: 1.4;
}

.ls-empty {
  padding: 18px;
  border: 1px dashed var(--ls-line);
  border-radius: var(--ls-radius);
  color: var(--ls-ink-faint);
  font-size: 13px;
}

@media (max-width: 760px) {
  .ls-vault__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .ls-vault__ladder {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ls-standing__head {
    gap: 14px;
  }

  .ls-standing__badge {
    width: 62px;
    height: 62px;
  }
}

/* ==================================================================== *
 * Texas Hold'em
 *
 * Two screens: the room list, and the table. The table is an oval with six
 * absolutely-positioned seats; your own seat is always position 0 at the
 * bottom, so the geometry never depends on which seat the server gave you.
 * Every position is a token, which is what lets the whole layout tighten at
 * small viewports by changing six numbers rather than six rules.
 * ==================================================================== */

.ls-poker { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ls-poker__wrap { display: flex; flex-direction: column; flex: 1; gap: 12px; min-height: 0; }

.ls-rooms__loading { margin: auto; color: var(--ls-ink-faint); letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px; }

.ls-rooms__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 4px; }
.ls-rooms__title { font-family: var(--ls-display); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 6px; font-size: clamp(20px, 3vw, 28px); }
.ls-rooms__sub { margin: 0; color: var(--ls-ink-dim); max-width: 62ch; line-height: 1.6; font-size: 13.5px; }
.ls-rooms__balance { text-align: right; }
.ls-rooms__balance small { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-rooms__balance strong { font-family: var(--ls-mono); font-size: 18px; color: var(--ls-metal-bright); font-variant-numeric: tabular-nums; }

.ls-rooms__notice,
.ls-rooms__resume {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 14px 0 0; padding: 14px 18px;
  border: 1px solid var(--ls-line-strong); border-radius: var(--ls-radius);
  background: rgba(232, 198, 106, 0.07);
}
.ls-rooms__resume strong { display: block; font-family: var(--ls-display); letter-spacing: 0.06em; text-transform: uppercase; font-size: 14px; }
.ls-rooms__resume small { color: var(--ls-ink-dim); font-size: 12.5px; }
.ls-rooms__foot { margin: 18px 0 0; color: var(--ls-ink-faint); font-size: 12px; line-height: 1.6; max-width: 74ch; }

.ls-rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; margin-top: 18px; }

.ls-room {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px; border-radius: var(--ls-radius-lg);
  border: 1px solid var(--ls-line); background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.28));
  box-shadow: var(--ls-shadow);
}
.ls-room__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ls-room__head h3 { margin: 0; font-family: var(--ls-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 17px; }
.ls-room__blinds { font-family: var(--ls-mono); font-size: 12px; color: var(--ls-metal-bright); font-variant-numeric: tabular-nums; }
.ls-room__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--ls-ink-faint); }
.ls-room__pips { display: flex; gap: 4px; }
.ls-room__pips i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--ls-line-strong); }
.ls-room__pips i.is-filled { background: var(--ls-jade); border-color: var(--ls-jade); box-shadow: 0 0 8px rgba(69, 224, 160, 0.55); }

.ls-room__players { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; min-height: 44px; }
.ls-room__players li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ls-ink-dim); }
.ls-room__players li b { margin-left: auto; font-family: var(--ls-mono); color: var(--ls-ink); font-weight: 500; }
.ls-room__empty { margin: 0; min-height: 44px; color: var(--ls-ink-faint); font-size: 12.5px; }

.ls-tag {
  font-style: normal; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 2px 5px; border-radius: 4px; border: 1px solid var(--ls-line-strong); color: var(--ls-ink-faint);
}

.ls-room__buyin { border-top: 1px solid var(--ls-line); padding-top: 12px; }
.ls-room__buyinhead { display: flex; align-items: baseline; justify-content: space-between; }
.ls-room__buyinhead small { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-room__amount { font-family: var(--ls-mono); font-size: 16px; color: var(--ls-metal-bright); font-variant-numeric: tabular-nums; }
.ls-room__range { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ls-ink-faint); font-family: var(--ls-mono); }
.ls-room__note { color: var(--ls-ink-faint); font-size: 11.5px; min-height: 16px; text-align: center; }

.ls-room__slider, .ls-raise__slider {
  width: 100%; margin: 8px 0 4px; height: 22px;
  appearance: none; background: transparent; cursor: pointer;
}
.ls-room__slider::-webkit-slider-runnable-track, .ls-raise__slider::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12);
}
.ls-room__slider::-moz-range-track, .ls-raise__slider::-moz-range-track {
  height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12);
}
.ls-room__slider::-webkit-slider-thumb, .ls-raise__slider::-webkit-slider-thumb {
  appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
  background: var(--ls-metal-face); border: 1px solid rgba(0, 0, 0, 0.4); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}
.ls-room__slider::-moz-range-thumb, .ls-raise__slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.4); background: #e8c66a;
}
.ls-room__slider:focus-visible, .ls-raise__slider:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 4px; }

.ls-room__select {
  width: 100%; padding: 10px 12px; border-radius: var(--ls-radius-sm);
  border: 1px solid var(--ls-line-strong); background: rgba(0, 0, 0, 0.35); color: var(--ls-ink);
  font-family: var(--ls-body); font-size: 12.5px;
}

/* ---- The table ---- */

.ls-poker__topline { display: flex; align-items: center; gap: 12px; }
.ls-poker__name { display: flex; align-items: baseline; min-width: 0; overflow: hidden; }
.ls-poker__topline strong {
  font-family: var(--ls-display); text-transform: uppercase; letter-spacing: 0.07em; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ls-poker__handno { margin-left: 8px; font-size: 11px; color: var(--ls-ink-faint); font-family: var(--ls-mono); }
.ls-poker__phase { margin-left: auto; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ls-accent); }
.ls-poker__link { font-size: 11px; color: var(--ls-amber); min-width: 0; }

.ls-poker__felt {
  position: relative;
  flex: 1;
  min-height: clamp(360px, 52vh, 560px);
  border-radius: 46% / 32%;
  border: 1px solid rgba(232, 198, 106, 0.24);
  background:
    radial-gradient(closest-side, rgba(69, 224, 160, 0.12), transparent 78%),
    linear-gradient(180deg, #0a2018, #061410 62%, #04100c);
  box-shadow: var(--ls-shadow), inset 0 0 0 10px rgba(0, 0, 0, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.07);
  --ls-seat-w: 128px;
}

.ls-poker__centre {
  position: absolute; inset: 26% 12% auto; display: grid; justify-items: center; gap: 10px;
}
.ls-poker__pot { display: flex; align-items: baseline; gap: 8px; }
.ls-poker__pot small { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-poker__potvalue { font-family: var(--ls-mono); font-size: clamp(16px, 2.4vw, 22px); color: var(--ls-metal-bright); font-variant-numeric: tabular-nums; }
.ls-poker__potside { font-size: 11px; color: var(--ls-ink-faint); font-family: var(--ls-mono); }
.ls-poker__board { display: flex; gap: 7px; min-height: 96px; align-items: center; justify-content: center; flex-wrap: wrap; }

.ls-poker__banner { display: none; }
.ls-poker__banner.is-open {
  display: grid; justify-items: center; gap: 6px;
  padding: 10px 16px; border-radius: var(--ls-radius);
  background: rgba(3, 6, 13, 0.82); border: 1px solid var(--ls-line-strong);
  animation: ls-celebrate-in 320ms var(--ls-ease);
  max-width: min(440px, 78vw);
}
.ls-poker__banner.is-up { border-color: rgba(69, 224, 160, 0.5); }
.ls-poker__banner.is-down { border-color: var(--ls-line-strong); }
.ls-poker__headline { font-family: var(--ls-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(13px, 2vw, 17px); text-align: center; }
.ls-poker__banner.is-up .ls-poker__headline { color: var(--ls-jade); }
.ls-poker__banner.is-down .ls-poker__headline { color: var(--ls-ink-dim); }
.ls-poker__lines { display: grid; gap: 3px; width: 100%; }
.ls-poker__line { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--ls-ink-dim); }
.ls-poker__line b { color: var(--ls-ink); font-weight: 600; }
.ls-poker__line em { margin-left: auto; font-style: normal; font-family: var(--ls-mono); color: var(--ls-metal-bright); }
.ls-poker__line.is-me b { color: var(--ls-metal-bright); }

.ls-poker__seats { position: absolute; inset: 0; }

.ls-seat {
  position: absolute;
  display: grid; justify-items: center; gap: 5px;
  width: var(--ls-seat-w);
  transform: translate(-50%, -50%);
  transition: opacity var(--ls-med);
}

/* The edge seats are clamped so a plate can never be cut off by the viewport:
   max()/min() keep half a seat plus a margin inside the felt however narrow
   the screen gets, which a bare percentage does not. */
.ls-seat[data-pos="0"] { left: 50%; top: 90%; }
.ls-seat[data-pos="1"] { left: max(9%, calc(var(--ls-seat-w) / 2 + 6px)); top: 73%; }
.ls-seat[data-pos="2"] { left: max(6%, calc(var(--ls-seat-w) / 2 + 6px)); top: 25%; }
.ls-seat[data-pos="3"] { left: 50%; top: 13%; }
.ls-seat[data-pos="4"] { left: min(94%, calc(100% - var(--ls-seat-w) / 2 - 6px)); top: 25%; }
.ls-seat[data-pos="5"] { left: min(91%, calc(100% - var(--ls-seat-w) / 2 - 6px)); top: 73%; }

/* Seats in the upper half wear their plate above their cards, so the cards
   hang down into the table instead of up through the header. */
.ls-seat[data-pos="2"] .ls-seat__box,
.ls-seat[data-pos="3"] .ls-seat__box,
.ls-seat[data-pos="4"] .ls-seat__box { order: -1; }
.ls-seat.is-empty { opacity: 0.42; }
.ls-seat.is-folded { opacity: 0.5; }

.ls-poker__hole { display: flex; gap: 4px; min-height: 40px; align-items: center; }
.ls-seat[data-pos="0"] .ls-poker__hole { min-height: 96px; }

.ls-seat__plate {
  position: relative; width: 100%;
  display: grid; justify-items: center; gap: 2px;
  padding: 7px 9px 9px; border-radius: var(--ls-radius-sm);
  border: 1px solid var(--ls-line-strong); background: rgba(3, 6, 13, 0.78);
  overflow: hidden;
}
.ls-seat.is-acting .ls-seat__plate { border-color: var(--ls-accent); box-shadow: 0 0 0 1px var(--ls-accent), 0 0 22px rgba(55, 224, 255, 0.32); }
.ls-seat.is-me .ls-seat__plate { border-color: rgba(232, 198, 106, 0.55); }
.ls-seat.is-winner .ls-seat__plate { border-color: var(--ls-jade); box-shadow: 0 0 24px rgba(69, 224, 160, 0.42); }
.ls-seat__id { display: flex; align-items: center; gap: 5px; max-width: 100%; }
.ls-seat__name { font-size: 12px; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 82px; }
.ls-seat__stack { font-family: var(--ls-mono); font-size: 11.5px; color: var(--ls-metal-bright); font-variant-numeric: tabular-nums; }
.ls-seat.is-allin .ls-seat__stack::after { content: " · all in"; color: var(--ls-crimson); }
.ls-seat__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.08); }
.ls-seat__timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--ls-accent), var(--ls-crimson)); }
.ls-seat__action { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ls-ink-faint); min-height: 13px; text-align: center; }
.ls-seat__bet { min-height: 18px; font-family: var(--ls-mono); font-size: 11.5px; color: var(--ls-ink); }
.ls-seat__bet.is-live {
  padding: 2px 9px; border-radius: 999px;
  background: rgba(232, 198, 106, 0.16); border: 1px solid rgba(232, 198, 106, 0.4);
  color: var(--ls-metal-bright);
}
.ls-seat__box { position: relative; width: 100%; }
.ls-seat__button {
  position: absolute; bottom: -9px; right: -7px;
  width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ls-metal-face); color: #2a1f04;
  font-size: 10px; font-weight: 800; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.ls-seat[data-pos="2"] .ls-seat__button,
.ls-seat[data-pos="3"] .ls-seat__button,
.ls-seat[data-pos="4"] .ls-seat__button { top: -9px; bottom: auto; }

/* ---- The action bar ---- */

.ls-poker__bar { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; min-height: 44px; align-items: center; }
.ls-btn--sm { padding: 7px 12px; font-size: 11.5px; }

.ls-raise {
  display: grid; gap: 10px; width: min(560px, 100%);
  padding: 14px 16px; border-radius: var(--ls-radius);
  border: 1px solid var(--ls-line-strong); background: rgba(255, 255, 255, 0.04);
}
.ls-raise__shortcuts { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.ls-raise__row { display: flex; align-items: center; gap: 10px; }
.ls-raise__row small { font-family: var(--ls-mono); font-size: 10.5px; color: var(--ls-ink-faint); }
.ls-raise__confirm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ls-raise__confirm > div:first-child { margin-right: auto; }
.ls-raise__confirm small { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-raise__value { font-family: var(--ls-mono); font-size: 17px; color: var(--ls-metal-bright); font-variant-numeric: tabular-nums; }

.ls-poker__log {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  font-size: 11.5px; color: var(--ls-ink-faint); min-height: 16px;
}
.ls-poker__log li b { color: var(--ls-ink-dim); font-weight: 600; }
.ls-poker__log li:last-child { color: var(--ls-ink-dim); }

.ls-dialog__figure { font-family: var(--ls-mono); color: var(--ls-metal-bright); font-size: 16px; }

/* A tall narrow viewport cannot hold a wide oval. The seats move inward, the
   plates shrink, and the centre column takes the width it needs. */
@media (max-width: 860px) {
  .ls-poker__felt { --ls-seat-w: 108px; }
  .ls-seat__name { max-width: 66px; font-size: 11px; }
  .ls-poker__centre { inset: 33% 6% auto; }
  .ls-seat[data-pos="2"], .ls-seat[data-pos="4"] { top: 24%; }
  .ls-seat[data-pos="1"], .ls-seat[data-pos="5"] { top: 74%; }
}

/* The game bar on a phone: the tagline and the balance label are the first
   things to go, because every row they cost comes straight out of the reels. */
@media (max-width: 620px) {
  .ls-game__head { padding: 8px 2px 10px; gap: 8px; }
  .ls-game__title small { display: none; }
  .ls-game__wallet small { display: none; }
  .ls-game__wallet strong { font-size: 13px; white-space: nowrap; }
  .ls-game__title strong { font-size: 15px; }
}

@media (max-width: 620px) {
  .ls-poker__felt { border-radius: var(--ls-radius-lg); min-height: 460px; --ls-seat-w: 96px; }
  .ls-seat { gap: 3px; }
  .ls-seat__name { max-width: 56px; }
  .ls-poker__handno { display: none; }
  .ls-poker__topline strong { font-size: 13px; }
  .ls-poker__phase { font-size: 9px; letter-spacing: 0.14em; }
  .ls-seat__plate { padding: 5px 6px 7px; }
  .ls-seat__stack { font-size: 10.5px; }
  .ls-seat__action { font-size: 9.5px; }
  .ls-poker__hole .ls-card-face.is-small { width: 34px; height: 49px; }
  .ls-poker__hole .ls-card-face.is-small .ls-card-face__pip { font-size: 17px; }
  .ls-seat[data-pos="0"] .ls-poker__hole { min-height: 74px; }
  .ls-seat[data-pos="0"] .ls-card-face { width: 52px; height: 74px; }
  .ls-poker__board .ls-card-face { width: 48px; height: 68px; }
  .ls-poker__board .ls-card-face__pip { font-size: 22px; }
  .ls-poker__board { min-height: 70px; gap: 5px; }
  .ls-poker__centre { inset: 34% 2% auto; }
  .ls-poker__bar { gap: 7px; }
  .ls-poker__log { display: none; }
  .ls-rooms__balance { text-align: left; }
  .ls-seat[data-pos="3"] { top: 15%; }
  .ls-seat[data-pos="0"] { top: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-seat__timer i { transition: none !important; }
}

/* ==================================================================== *
 * Operations console  (/points/casino/admin/)
 *
 * An operator's screen, not a player's: dense, quiet, and legible at a
 * glance. It reuses this file's tokens so the two surfaces cannot drift
 * apart, but nothing here is gold-plated — the point is to read numbers.
 * ==================================================================== */

.ls-adm { max-width: 1440px; margin: 0 auto; padding: 26px clamp(12px, 3vw, 34px) 60px; }

.ls-adm__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ls-adm__head h1 { margin: 0 0 6px; font-family: var(--ls-display); text-transform: uppercase; letter-spacing: 0.07em; font-size: clamp(22px, 3vw, 30px); }
.ls-adm__head p { margin: 0; color: var(--ls-ink-dim); font-size: 13px; max-width: 62ch; }
.ls-adm__headside { display: flex; gap: 10px; flex-wrap: wrap; }

.ls-adm__tabs { display: flex; gap: 4px; margin: 22px 0 18px; border-bottom: 1px solid var(--ls-line); flex-wrap: wrap; }
.ls-adm__tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 11px 16px; color: var(--ls-ink-faint);
  font-family: var(--ls-body); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.ls-adm__tab:hover { color: var(--ls-ink); }
.ls-adm__tab.is-active { color: var(--ls-metal-bright); border-bottom-color: var(--ls-metal); }
.ls-adm__tab:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: -2px; }

/* Grid and flex items default to `min-width: auto`, which means they refuse to
   shrink below their content — so a table with `min-width: 620px` inside an
   `overflow-x: auto` box pushed the whole console sideways instead of scrolling
   within it. These are the three levels that have to be told they may shrink. */
.ls-adm__stack { display: grid; gap: 18px; }
.ls-adm__stack > * { min-width: 0; }
.ls-adm__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 18px; align-items: start; }
.ls-adm__pair > * { min-width: 0; }
.ls-adm__panel { min-width: 0; }
.ls-adm__timestamp { margin: 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ls-ink-faint); }

.ls-adm__panel {
  border: 1px solid var(--ls-line); border-radius: var(--ls-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.18));
  padding: 18px;
}
.ls-adm__panelhead h2 { margin: 0; font-family: var(--ls-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 15px; }
.ls-adm__panelhead p { margin: 6px 0 0; color: var(--ls-ink-dim); font-size: 12.5px; line-height: 1.55; max-width: 84ch; }
.ls-adm__panelhead { margin-bottom: 14px; }
.ls-adm__subhead { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ls-ink-faint); }

.ls-adm__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ls-adm__stat { padding: 12px 14px; border-radius: var(--ls-radius-sm); background: rgba(0, 0, 0, 0.26); border: 1px solid var(--ls-line); }
.ls-adm__stat small { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-adm__stat strong { display: block; margin-top: 5px; font-family: var(--ls-mono); font-size: clamp(15px, 1.3vw, 19px); color: var(--ls-metal-bright); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ls-adm__stat em { display: block; margin-top: 4px; font-style: normal; font-size: 11px; color: var(--ls-ink-faint); }

.ls-adm__scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.ls-adm__table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 620px; }
.ls-adm__table th {
  text-align: left; padding: 8px 10px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ls-ink-faint); border-bottom: 1px solid var(--ls-line-strong); white-space: nowrap;
}
.ls-adm__table td { padding: 9px 10px; border-bottom: 1px solid rgba(148, 178, 224, 0.07); vertical-align: top; color: var(--ls-ink-dim); }
.ls-adm__table tr:hover td { background: rgba(255, 255, 255, 0.025); }
.ls-adm__table .is-numeric { text-align: right; font-family: var(--ls-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ls-adm__table .is-up { color: var(--ls-jade); }
.ls-adm__table .is-down { color: var(--ls-crimson); }

.ls-adm__gamecell strong { display: block; color: var(--ls-ink); font-size: 13px; }
.ls-adm__gamecell small { color: var(--ls-ink-faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; }
.ls-adm__verdict { display: grid; justify-items: start; gap: 4px; min-width: 210px; }
.ls-adm__verdict small { color: var(--ls-ink-faint); font-size: 11px; line-height: 1.45; }

.ls-adm__pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--ls-line-strong); color: var(--ls-ink-dim);
}
.ls-adm__pill.is-good { border-color: rgba(69, 224, 160, 0.5); color: var(--ls-jade); }
.ls-adm__pill.is-warn { border-color: rgba(255, 181, 71, 0.55); color: var(--ls-amber); }
.ls-adm__pill.is-dim { opacity: 0.75; }

.ls-adm__link {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 0;
  color: var(--ls-accent); font-family: var(--ls-mono); font-size: 12px; text-decoration: underline;
  text-underline-offset: 3px;
}
.ls-adm__link:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 2px; }

.ls-adm__input {
  padding: 10px 13px; border-radius: var(--ls-radius-sm);
  border: 1px solid var(--ls-line-strong); background: rgba(0, 0, 0, 0.34); color: var(--ls-ink);
  font-family: var(--ls-body); font-size: 13px; min-width: 0;
}
.ls-adm__input:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 2px; }

.ls-adm__lookup { display: flex; gap: 10px; flex-wrap: wrap; }
.ls-adm__lookup .ls-adm__input { flex: 1; min-width: 220px; }

.ls-adm__adjust { display: grid; gap: 12px; }
.ls-adm__adjustrow { display: grid; grid-template-columns: minmax(150px, 220px) minmax(220px, 1fr) auto; gap: 10px; }
.ls-adm__confirm:not(:empty) {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 15px; border-radius: var(--ls-radius-sm);
  border: 1px solid rgba(255, 181, 71, 0.45); background: rgba(255, 181, 71, 0.08);
}
.ls-adm__confirm p { margin: 0 auto 0 0; font-size: 13px; color: var(--ls-ink); }

.ls-adm__empty, .ls-adm__fine { color: var(--ls-ink-faint); font-size: 12.5px; line-height: 1.6; margin: 0; }
.ls-adm__missing { font-style: italic; opacity: 0.7; }

.ls-adm__failure {
  padding: 26px; border-radius: var(--ls-radius); border: 1px solid rgba(255, 61, 110, 0.4);
  background: rgba(255, 61, 110, 0.07);
}
.ls-adm__failure h3 { margin: 0 0 8px; font-family: var(--ls-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 15px; }
.ls-adm__failure p { margin: 0 0 14px; color: var(--ls-ink-dim); font-size: 13px; }

.ls-adm__gate { max-width: 460px; margin: 14vh auto; text-align: center; display: grid; gap: 16px; justify-items: center; }
.ls-adm__gate h1 { margin: 0; font-family: var(--ls-display); text-transform: uppercase; letter-spacing: 0.07em; font-size: 24px; }
.ls-adm__gate p { margin: 0; color: var(--ls-ink-dim); font-size: 13.5px; line-height: 1.6; }

@media (max-width: 720px) {
  .ls-adm__adjustrow { grid-template-columns: minmax(0, 1fr); }
  .ls-adm__head { flex-direction: column; }
}


/* ==================================================================== *
 * Progressive jackpots
 *
 * Four pools, shown as one row. The Grand leads because it is the reason
 * anyone looks at the row at all; the rest read as a ladder down from it.
 * ==================================================================== */

.ls-jackpots-host { display: block; }
.ls-jackpots-host.is-lobby { margin: 0 clamp(14px, 3vw, 34px) 18px; }

.ls-jackpots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ls-jackpot {
  position: relative;
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: 12px 10px;
  border-radius: var(--ls-radius);
  border: 1px solid var(--ls-line-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.32));
  overflow: hidden;
}
.ls-jackpot::before {
  /* A slow sheen, so the row reads as live without anything moving fast. */
  content: "";
  position: absolute;
  inset: -60% -20%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.13) 50%, transparent 58%);
  transform: translateX(-60%);
  animation: ls-jackpot-sheen 7s linear infinite;
  pointer-events: none;
}
@keyframes ls-jackpot-sheen { to { transform: translateX(60%); } }

.ls-jackpot__label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-jackpot__value {
  font-family: var(--ls-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(13px, 1.5vw, 17px);
  white-space: nowrap;
  background: var(--ls-metal-face);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ls-jackpot.is-grand { border-color: rgba(232, 198, 106, 0.5); }
.ls-jackpot.is-grand .ls-jackpot__label { color: var(--ls-metal); }
.ls-jackpot.is-major { border-color: rgba(255, 181, 71, 0.34); }
.ls-jackpot.is-minor { border-color: rgba(55, 224, 255, 0.26); }
.ls-jackpot.is-off { opacity: 0.45; }
.ls-jackpot.is-reset { animation: ls-jackpot-reset 1.1s var(--ls-ease); }
@keyframes ls-jackpot-reset {
  0% { box-shadow: 0 0 0 2px var(--ls-metal), 0 0 34px rgba(232, 198, 106, 0.6); }
  100% { box-shadow: none; }
}

.ls-jackpots.is-compact .ls-jackpot { padding: 7px 8px; gap: 1px; }
.ls-jackpots.is-compact .ls-jackpot__label { font-size: 9px; letter-spacing: 0.14em; }
.ls-jackpots.is-compact .ls-jackpot__value { font-size: clamp(11px, 1.2vw, 14px); }

/* The moment a pool drops. */
.ls-jackpot-win {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
  /* Nearly opaque, and blurred behind: at 0.72 the reels showed through the
     figure and a six-digit number sat on top of a letter A. */
  background: radial-gradient(closest-side, rgba(3, 6, 13, 0.97), rgba(3, 6, 13, 0.93));
  backdrop-filter: blur(7px) saturate(0.7);
  -webkit-backdrop-filter: blur(7px) saturate(0.7);
  animation: ls-celebrate-in 420ms var(--ls-ease);
}
.ls-jackpot-win.is-leaving { animation: ls-celebrate-out 300ms var(--ls-ease) forwards; }
.ls-jackpot-win__eyebrow {
  font-size: clamp(10px, 1.4vw, 13px); letter-spacing: 0.26em; text-transform: uppercase; color: var(--ls-metal);
}
.ls-jackpot-win__value {
  font-family: var(--ls-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 6.5vw, 68px);
  line-height: 1;
  background: var(--ls-metal-face);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 30px rgba(232, 198, 106, 0.55));
}
.ls-jackpot-win__note { color: var(--ls-ink-dim); font-size: 12px; max-width: 34ch; }

@media (max-width: 620px) {
  .ls-jackpots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .ls-jackpots-host.is-lobby { margin: 0 12px 14px; }
}


/* ==================================================================== *
 * The gate
 *
 * What a signed-out visitor sees at the front door. It is the first
 * impression of the casino, so it is a door rather than an error.
 * ==================================================================== */

.ls-gate {
  max-width: 520px;
  margin: clamp(8vh, 14vh, 18vh) auto;
  padding: 0 24px;
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}
.ls-gate__title {
  margin: 6px 0 0;
  font-family: var(--ls-display);
  font-size: clamp(24px, 4vw, 34px);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ls-gate__body { margin: 0; color: var(--ls-ink-dim); line-height: 1.65; font-size: 14.5px; }
.ls-gate__fine { color: var(--ls-ink-faint); font-size: 11.5px; line-height: 1.6; max-width: 46ch; }

/* ==================================================================== *
 * Feature choreography — the vault board
 *
 * Lonestar Vaultstorm's hold-and-respin, replayed inside the cabinet.
 * Every value on it comes from the server's record of the round.
 * ==================================================================== */

.ls-vault {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 6;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(8px, 1.6vh, 16px);
  padding: clamp(10px, 2vh, 20px);
  background:
    radial-gradient(closest-side, rgba(3, 6, 13, 0.93), rgba(3, 6, 13, 0.97)),
    linear-gradient(180deg, rgba(55, 224, 255, 0.06), transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: ls-celebrate-in 380ms var(--ls-ease);
}
.ls-vault.is-leaving { animation: ls-celebrate-out 300ms var(--ls-ease) forwards; }

.ls-vault__head { display: flex; align-items: center; gap: clamp(12px, 3vw, 28px); flex-wrap: wrap; justify-content: center; }
.ls-vault__title {
  font-family: var(--ls-display);
  font-size: clamp(13px, 2.2vw, 20px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ls-metal);
}
.ls-vault__stat { display: grid; justify-items: center; }
.ls-vault__stat small { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-vault__stat strong { font-family: var(--ls-mono); font-size: clamp(14px, 2vw, 19px); color: var(--ls-ink); font-variant-numeric: tabular-nums; }

.ls-raid {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  overflow: hidden;
  gap: clamp(8px, 2vw, 16px);
  padding: clamp(12px, 3vw, 26px);
  background: radial-gradient(120% 90% at 50% 40%, rgba(40, 28, 14, 0.95), rgba(12, 7, 2, 0.97));
  border-radius: inherit;
  z-index: 6;
  animation: ls-celebrate-in 320ms var(--ls-ease) both;
}

.ls-chase {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  justify-items: center;
  gap: clamp(8px, 2vw, 16px);
  padding: clamp(12px, 3vw, 26px);
  background: radial-gradient(120% 90% at 50% 40%, rgba(40, 28, 14, 0.95), rgba(12, 7, 2, 0.97));
  border-radius: inherit;
  z-index: 6;
  overflow: hidden;
  animation: ls-celebrate-in 320ms var(--ls-ease) both;
}

.ls-raid.is-leaving,
.ls-chase.is-leaving { animation: ls-celebrate-out 300ms var(--ls-ease) forwards; }

.ls-raid__head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
  flex-wrap: wrap;
  justify-content: center;
}

.ls-raid__title {
  font-family: var(--ls-display);
  font-size: clamp(15px, 2.6vw, 24px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e0a83c;
  text-shadow: 0 0 18px rgba(224, 168, 60, 0.4);
}

.ls-raid__total { color: #e0a83c; }

.ls-raid__rule {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ls-ink-faint);
  text-align: center;
}

.ls-raid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: clamp(6px, 1.4vw, 12px);
  width: min(540px, 100%);
}

.ls-raid__box {
  position: relative;
  aspect-ratio: 1 / 0.82;
  border-radius: 10px;
  border: 1px solid rgba(224, 168, 60, 0.28);
  background: linear-gradient(180deg, rgba(78, 56, 30, 0.95), rgba(38, 26, 13, 0.95));
  color: var(--ls-ink-faint);
  font-family: var(--ls-mono);
  font-size: 13px;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: transform 140ms var(--ls-ease), background 200ms var(--ls-ease);
}

.ls-raid__art {
  width: 72%;
  height: auto;
  opacity: 0.9;
}

.ls-raid__lid {
  position: absolute;
  right: 5px;
  bottom: 3px;
  font-size: 10px;
  color: rgba(224, 200, 160, 0.55);
}

.ls-raid__box.is-opening { transform: scale(0.9) rotate(-2deg); }

.ls-raid__box.is-open {
  background: linear-gradient(180deg, var(--box), color-mix(in srgb, var(--box) 55%, #100a03));
  border-color: var(--box);
  color: var(--box-ink);
  box-shadow: 0 0 22px color-mix(in srgb, var(--box) 45%, transparent);
}

.ls-raid__box.is-open strong {
  font-family: var(--ls-display);
  font-size: clamp(10px, 1.9vw, 15px);
  letter-spacing: 0.02em;
  padding: 0 4px;
  text-align: center;
  line-height: 1.1;
}

.ls-raid__box.is-bandit { animation: ls-vault-slam 300ms var(--ls-ease); }

.ls-chase__boardwrap {
  height: 100%;
  aspect-ratio: 5 / 3;
  width: auto;
  max-width: min(560px, 100%);
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(224, 168, 60, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px rgba(0, 0, 0, 0.6);
}

.ls-chase__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.ls-reactor {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  justify-items: center;
  overflow: hidden;
  gap: clamp(10px, 2vw, 18px);
  padding: clamp(12px, 3vw, 26px);
  background: radial-gradient(120% 90% at 50% 40%, rgba(6, 18, 28, 0.94), rgba(2, 5, 10, 0.97));
  border-radius: inherit;
  z-index: 6;
  animation: ls-celebrate-in 320ms var(--ls-ease) both;
}

.ls-reactor.is-leaving { animation: ls-celebrate-out 300ms var(--ls-ease) forwards; }

.ls-reactor__head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
  flex-wrap: wrap;
  justify-content: center;
}

.ls-reactor__title {
  font-family: var(--ls-display);
  font-size: clamp(15px, 2.6vw, 24px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #31f0ff;
  text-shadow: 0 0 18px rgba(49, 240, 255, 0.45);
}

.ls-reactor__total { color: #ffca45; }

.ls-reactor__boardwrap {
  height: 100%;
  aspect-ratio: 5 / 4;
  width: auto;
  max-width: min(560px, 100%);
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(49, 240, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px rgba(0, 0, 0, 0.6);
}

.ls-reactor__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.ls-chaos,
.ls-throne {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  justify-items: center;
  gap: clamp(8px, 2vw, 16px);
  padding: clamp(12px, 3vw, 26px);
  background: radial-gradient(120% 90% at 50% 40%, rgba(16, 8, 26, 0.95), rgba(4, 2, 8, 0.97));
  border-radius: inherit;
  z-index: 6;
  overflow: hidden;
  animation: ls-celebrate-in 260ms var(--ls-ease) both;
}

.ls-chaos { grid-template-rows: auto minmax(0, 1fr); }

.ls-chaos.is-leaving,
.ls-throne.is-leaving { animation: ls-celebrate-out 240ms var(--ls-ease) forwards; }

.ls-chaos__head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
  flex-wrap: wrap;
  justify-content: center;
}

.ls-chaos__title {
  font-family: var(--ls-display);
  font-size: clamp(14px, 2.4vw, 22px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8f6bff;
  text-shadow: 0 0 20px rgba(143, 107, 255, 0.5);
}

.ls-chaos.is-big .ls-chaos__title {
  color: #e3bb52;
  text-shadow: 0 0 26px rgba(227, 187, 82, 0.6);
}

.ls-throne__title {
  font-family: var(--ls-display);
  font-size: clamp(15px, 2.6vw, 24px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e3bb52;
  text-shadow: 0 0 20px rgba(227, 187, 82, 0.45);
}

.ls-throne__mult { color: #8f6bff; }
.ls-throne__total { color: #e3bb52; }

.ls-throne__rule {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ls-ink-faint);
  text-align: center;
}

.ls-chaos__boardwrap,
.ls-throne__boardwrap {
  height: 100%;
  aspect-ratio: 5 / 3;
  width: auto;
  max-width: min(560px, 100%);
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(143, 107, 255, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px rgba(0, 0, 0, 0.65);
}

.ls-chaos.is-big .ls-chaos__boardwrap { border-color: rgba(227, 187, 82, 0.5); }

.ls-chaos__canvas,
.ls-throne__canvas { display: block; width: 100%; height: 100%; }

.ls-hack,
.ls-heist {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  justify-items: center;
  gap: clamp(8px, 2vw, 16px);
  padding: clamp(12px, 3vw, 26px);
  background: radial-gradient(120% 90% at 50% 40%, rgba(8, 14, 26, 0.96), rgba(2, 4, 9, 0.97));
  border-radius: inherit;
  z-index: 6;
  overflow: hidden;
  animation: ls-celebrate-in 320ms var(--ls-ease) both;
}

.ls-hack.is-leaving,
.ls-heist.is-leaving { animation: ls-celebrate-out 300ms var(--ls-ease) forwards; }

.ls-hack__head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
  flex-wrap: wrap;
  justify-content: center;
}

.ls-hack__title,
.ls-heist__title {
  font-family: var(--ls-display);
  font-size: clamp(15px, 2.6vw, 24px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #25d5ff;
  text-shadow: 0 0 20px rgba(37, 213, 255, 0.45);
}

.ls-heist__title { color: #ff2d8f; text-shadow: 0 0 20px rgba(255, 45, 143, 0.45); }

.ls-hack__won { color: #ffc857; }

.ls-hack__rule {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ls-ink-faint);
  text-align: center;
}

.ls-hack__boardwrap {
  height: 100%;
  aspect-ratio: 1 / 1;
  width: auto;
  max-width: min(420px, 100%);
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(37, 213, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px rgba(0, 0, 0, 0.65);
}

.ls-hack__canvas { display: block; width: 100%; height: 100%; }

.ls-heist__ladder {
  align-self: center;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: clamp(8px, 1.6vw, 14px);
  width: min(600px, 100%);
}

.ls-heist__tier {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 12px;
  border: 1px solid rgba(37, 213, 255, 0.22);
  background: linear-gradient(180deg, rgba(16, 24, 38, 0.95), rgba(6, 10, 18, 0.95));
  transition: transform 160ms var(--ls-ease), border-color 200ms var(--ls-ease);
}

.ls-heist__name {
  font-family: var(--ls-display);
  font-size: clamp(10px, 1.7vw, 13px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ls-ink);
  text-align: center;
}

.ls-heist__odds {
  font-family: var(--ls-mono);
  font-size: 11px;
  color: var(--ls-ink-faint);
}

.ls-heist__prize { font-family: var(--ls-mono); font-size: clamp(12px, 2vw, 16px); color: #ffc857; }

.ls-heist__verdict {
  font-family: var(--ls-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ls-heist__tier.is-running {
  border-color: #25d5ff;
  animation: ls-vault-full 420ms var(--ls-ease) infinite alternate;
}

.ls-heist__tier.is-held {
  border-color: #3fd79a;
  background: linear-gradient(180deg, rgba(24, 70, 54, 0.95), rgba(6, 24, 18, 0.95));
  box-shadow: 0 0 24px rgba(63, 215, 154, 0.25);
}

.ls-heist__tier.is-caught {
  border-color: #ff2d8f;
  background: linear-gradient(180deg, rgba(84, 12, 46, 0.95), rgba(28, 4, 16, 0.95));
  box-shadow: 0 0 26px rgba(255, 45, 143, 0.3);
  animation: ls-vault-slam 300ms var(--ls-ease);
}

.ls-pit,
.ls-lap {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  justify-items: center;
  gap: clamp(8px, 2vw, 16px);
  padding: clamp(12px, 3vw, 26px);
  background: radial-gradient(120% 90% at 50% 40%, rgba(10, 15, 24, 0.96), rgba(3, 5, 9, 0.97));
  border-radius: inherit;
  z-index: 6;
  overflow: hidden;
  animation: ls-celebrate-in 320ms var(--ls-ease) both;
}

.ls-pit.is-leaving,
.ls-lap.is-leaving { animation: ls-celebrate-out 300ms var(--ls-ease) forwards; }

.ls-pit__head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
  flex-wrap: wrap;
  justify-content: center;
}

.ls-pit__title,
.ls-lap__title {
  font-family: var(--ls-display);
  font-size: clamp(15px, 2.6vw, 24px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f0c04a;
  text-shadow: 0 0 20px rgba(240, 192, 74, 0.45);
}

.ls-lap__title { color: #3ce0ff; text-shadow: 0 0 20px rgba(60, 224, 255, 0.45); }

.ls-pit__bank { color: #f0c04a; }

.ls-pit__rule {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ls-ink-faint);
  text-align: center;
}

.ls-pit__rack {
  align-self: center;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: clamp(6px, 1.4vw, 12px);
  width: min(560px, 100%);
}

.ls-pit__slot {
  position: relative;
  aspect-ratio: 1 / 0.72;
  border-radius: 10px;
  border: 1px solid rgba(240, 192, 74, 0.26);
  background: linear-gradient(180deg, rgba(36, 42, 52, 0.95), rgba(17, 21, 28, 0.95));
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 4px;
  text-align: center;
  transition: transform 140ms var(--ls-ease), background 200ms var(--ls-ease);
}

.ls-pit__slot.is-turning { transform: rotateX(50deg) scale(0.94); }

.ls-pit__num {
  font-family: var(--ls-mono);
  font-size: 12px;
  color: rgba(200, 214, 236, 0.45);
}

.ls-pit__slot.is-open {
  background: linear-gradient(180deg, rgba(240, 192, 74, 0.9), rgba(120, 88, 16, 0.9));
  border-color: #f0c04a;
  color: #1b1403;
  box-shadow: 0 0 22px rgba(240, 192, 74, 0.35);
}

.ls-pit__slot.is-open strong {
  font-family: var(--ls-display);
  font-size: clamp(9px, 1.5vw, 12px);
  letter-spacing: 0.04em;
  line-height: 1.15;
}

.ls-pit__slot.is-open small { font-family: var(--ls-mono); font-size: 11px; }

.ls-pit__slot.is-bad {
  background: linear-gradient(180deg, rgba(255, 59, 48, 0.92), rgba(110, 18, 12, 0.92));
  border-color: #ff6b60;
  color: #fff3f2;
  box-shadow: 0 0 26px rgba(255, 59, 48, 0.4);
  animation: ls-vault-slam 300ms var(--ls-ease);
}

.ls-lap__boardwrap {
  height: 100%;
  aspect-ratio: 5 / 3;
  width: auto;
  max-width: min(560px, 100%);
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(60, 224, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px rgba(0, 0, 0, 0.65);
}

.ls-lap__canvas { display: block; width: 100%; height: 100%; }

.ls-hole,
.ls-nova {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  justify-items: center;
  gap: clamp(8px, 2vw, 16px);
  padding: clamp(12px, 3vw, 26px);
  background: radial-gradient(120% 90% at 50% 40%, rgba(12, 8, 40, 0.95), rgba(2, 1, 12, 0.97));
  border-radius: inherit;
  z-index: 6;
  overflow: hidden;
  animation: ls-celebrate-in 320ms var(--ls-ease) both;
}

.ls-hole.is-leaving,
.ls-nova.is-leaving { animation: ls-celebrate-out 300ms var(--ls-ease) forwards; }

.ls-hole__head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
  flex-wrap: wrap;
  justify-content: center;
}

.ls-hole__title,
.ls-nova__title {
  font-family: var(--ls-display);
  font-size: clamp(15px, 2.6vw, 24px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffd166;
  text-shadow: 0 0 22px rgba(255, 209, 102, 0.5);
}

.ls-nova__title { color: #c86bff; text-shadow: 0 0 22px rgba(200, 107, 255, 0.5); }

.ls-hole__factor { color: #ffd166; }

.ls-hole__boardwrap,
.ls-nova__boardwrap {
  height: 100%;
  aspect-ratio: 5 / 3;
  width: auto;
  max-width: min(580px, 100%);
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(200, 107, 255, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px rgba(0, 0, 0, 0.65);
}

.ls-hole__canvas,
.ls-nova__canvas { display: block; width: 100%; height: 100%; }

.ls-hole__rule {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ls-ink-faint);
  text-align: center;
}

.ls-nova__flag {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(6, 3, 22, 0.92);
  border: 1px solid rgba(255, 209, 102, 0.7);
  color: #ffe9a8;
  font-family: var(--ls-display);
  font-size: clamp(12px, 2vw, 17px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 0 28px rgba(255, 209, 102, 0.35);
}

.ls-circuit {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  justify-items: center;
  gap: clamp(8px, 2vw, 16px);
  padding: clamp(12px, 3vw, 26px);
  background: radial-gradient(120% 90% at 50% 40%, rgba(10, 18, 28, 0.96), rgba(2, 4, 10, 0.97));
  border-radius: inherit;
  z-index: 6;
  overflow: hidden;
  animation: ls-celebrate-in 320ms var(--ls-ease) both;
}

.ls-circuit.is-leaving { animation: ls-celebrate-out 300ms var(--ls-ease) forwards; }

.ls-circuit__head {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.4vw, 24px);
  flex-wrap: wrap;
  justify-content: center;
}

.ls-circuit__title {
  font-family: var(--ls-display);
  font-size: clamp(15px, 2.6vw, 24px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4be3ff;
  text-shadow: 0 0 20px rgba(75, 227, 255, 0.45);
}

.ls-circuit__mult { color: #ff4d8d; }
.ls-circuit__total { color: #e8c169; }

.ls-circuit__boardwrap {
  height: 100%;
  aspect-ratio: 1 / 1;
  width: auto;
  max-width: min(480px, 100%);
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(232, 193, 105, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px rgba(0, 0, 0, 0.65);
}

.ls-circuit__canvas { display: block; width: 100%; height: 100%; }

.ls-circuit__rule {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ls-ink-faint);
  text-align: center;
}

.ls-melt {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  justify-items: center;
  gap: clamp(8px, 2vw, 16px);
  padding: clamp(12px, 3vw, 26px);
  background: radial-gradient(120% 90% at 50% 40%, rgba(48, 10, 44, 0.95), rgba(8, 3, 16, 0.97));
  border-radius: inherit;
  z-index: 6;
  overflow: hidden;
  animation: ls-celebrate-in 320ms var(--ls-ease) both;
}

.ls-melt.is-leaving { animation: ls-celebrate-out 300ms var(--ls-ease) forwards; }

.ls-melt__head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
  flex-wrap: wrap;
  justify-content: center;
}

.ls-melt__title {
  font-family: var(--ls-display);
  font-size: clamp(15px, 2.6vw, 24px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff5ca8;
  text-shadow: 0 0 22px rgba(255, 92, 168, 0.55);
}

.ls-melt__total { color: #ffb648; }

.ls-melt__boardwrap {
  height: 100%;
  aspect-ratio: 5 / 3;
  width: auto;
  max-width: min(560px, 100%);
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 92, 168, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.6);
}

.ls-melt__canvas { display: block; width: 100%; height: 100%; }

.ls-melt__rule {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ls-ink-faint);
  text-align: center;
}

.ls-storm {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  justify-items: center;
  gap: clamp(8px, 2vw, 16px);
  padding: clamp(12px, 3vw, 26px);
  background: radial-gradient(120% 90% at 50% 40%, rgba(6, 20, 34, 0.95), rgba(2, 5, 10, 0.97));
  border-radius: inherit;
  z-index: 6;
  overflow: hidden;
  animation: ls-celebrate-in 320ms var(--ls-ease) both;
}

.ls-storm.is-leaving { animation: ls-celebrate-out 300ms var(--ls-ease) forwards; }

.ls-storm__boardwrap {
  height: 100%;
  aspect-ratio: 5 / 3;
  width: auto;
  max-width: min(560px, 100%);
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(55, 224, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px rgba(0, 0, 0, 0.6);
}

.ls-storm__canvas { display: block; width: 100%; height: 100%; }

.ls-storm__rule {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ls-ink-faint);
  text-align: center;
}

.ls-storm__flag {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(4, 12, 20, 0.9);
  border: 1px solid rgba(242, 193, 78, 0.7);
  color: #f2c14e;
  font-family: var(--ls-display);
  font-size: clamp(12px, 2vw, 17px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 0 28px rgba(242, 193, 78, 0.35);
}

.ls-vault__doorwrap {
  height: 100%;
  aspect-ratio: 5 / 3.1;
  width: auto;
  max-width: min(560px, 100%);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(146, 164, 190, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.55);
}

.ls-vault__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.ls-vault__running { color: var(--ls-gold, #f2c14e); }

@media (max-width: 620px) {
  .ls-vault__doorwrap { width: 100%; }
}

.ls-vault__board {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  gap: clamp(3px, 0.8vw, 7px);
  width: min(100%, 560px);
}
.ls-vault__board.is-spinning .ls-vault__cell:not(.is-locked) { animation: ls-vault-tumble 340ms linear; }
@keyframes ls-vault-tumble {
  0% { transform: translateY(-16%); opacity: 0.35; }
  100% { transform: translateY(0); opacity: 1; }
}

.ls-vault__cell {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 1px;
  border-radius: var(--ls-radius-sm);
  border: 1px solid rgba(148, 178, 224, 0.16);
  background: rgba(255, 255, 255, 0.03);
}
.ls-vault__cell.is-locked {
  border-color: color-mix(in srgb, var(--token) 65%, transparent);
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--token) 26%, transparent), transparent),
    rgba(3, 6, 13, 0.7);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--token) 45%, transparent), 0 4px 14px rgba(0, 0, 0, 0.5);
}
.ls-vault__cell strong {
  font-family: var(--ls-display);
  font-size: clamp(10px, 1.7vw, 16px);
  letter-spacing: 0.04em;
  color: var(--token, var(--ls-metal));
}
.ls-vault__cell small { font-size: 7px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-vault__cell.is-landing { animation: ls-vault-slam 260ms var(--ls-ease); }
@keyframes ls-vault-slam {
  0% { transform: scale(1.5); filter: brightness(2.2); }
  100% { transform: scale(1); filter: brightness(1); }
}

.ls-vault__board.is-full { animation: ls-vault-full 900ms var(--ls-ease) infinite alternate; }
@keyframes ls-vault-full { to { filter: brightness(1.25) saturate(1.2); } }

.ls-vault__grand {
  font-family: var(--ls-display);
  font-size: clamp(18px, 4vw, 38px);
  letter-spacing: 0.16em;
  background: var(--ls-metal-face);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 22px rgba(232, 198, 106, 0.6));
}
.ls-vault__total { display: grid; justify-items: center; gap: 2px; }
.ls-vault__total small { font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-vault__total strong {
  font-family: var(--ls-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 4.6vw, 44px);
  background: var(--ls-metal-face);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------------ *
 * Moonshine Fortune — the still house
 *
 * The Still fires and draws one of five completely different outcomes, so
 * every brew gets its own screen. Three of them hand back a board (wild mash,
 * copper wash, mystery mash) and share `.ls-brew`; the cellar pick is a rack
 * of barrels; the lantern beat is a card. Lantern Spins replays on `.ls-brew`
 * too, at whatever height the cabinet has.
 * ------------------------------------------------------------------ */

.ls-brew {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  justify-items: center;
  gap: clamp(8px, 2vw, 16px);
  padding: clamp(12px, 3vw, 26px);
  background: radial-gradient(120% 90% at 50% 62%, rgba(26, 18, 9, 0.94), rgba(6, 5, 3, 0.97));
  border-radius: inherit;
  z-index: 6;
  overflow: hidden;
  animation: ls-celebrate-in 320ms var(--ls-ease) both;
}

.ls-brew.is-leaving { animation: ls-celebrate-out 300ms var(--ls-ease) forwards; }

/* The lantern beat has no board, so it sits in the middle of the cabinet. */
.ls-brew--card {
  grid-template-rows: auto auto;
  align-content: center;
  gap: clamp(10px, 2.4vw, 18px);
}

.ls-brew__head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
  flex-wrap: wrap;
  justify-content: center;
}

.ls-brew__title {
  font-family: var(--ls-display);
  font-size: clamp(15px, 2.6vw, 24px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffc25c;
  text-shadow: 0 0 22px rgba(255, 194, 92, 0.5);
}

.ls-brew__total { color: #ffc25c; }
.ls-brew__mult { color: #6fd7ff; }

.ls-brew__boardwrap {
  height: 100%;
  aspect-ratio: 5 / 3;
  width: auto;
  max-width: min(560px, 100%);
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(217, 154, 63, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.6);
}

.ls-brew__canvas { display: block; width: 100%; height: 100%; }

.ls-brew__rule {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ls-ink-faint);
  text-align: center;
}

/* Retrigger banner — floats over the board rather than reflowing it. */
.ls-brew__flag {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(14, 9, 4, 0.92);
  border: 1px solid rgba(255, 194, 92, 0.72);
  color: #ffc25c;
  font-family: var(--ls-display);
  font-size: clamp(12px, 2vw, 17px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 0 28px rgba(255, 194, 92, 0.35);
  animation: ls-brew-flag 420ms var(--ls-ease) both;
}
@keyframes ls-brew-flag {
  0% { transform: translateX(-50%) scale(0.7); opacity: 0; }
  60% { transform: translateX(-50%) scale(1.08); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* -- Cellar Pick --------------------------------------------------- */

.ls-cellar {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  justify-items: center;
  gap: clamp(8px, 2vw, 16px);
  padding: clamp(12px, 3vw, 26px);
  background: radial-gradient(120% 90% at 50% 55%, rgba(30, 19, 10, 0.95), rgba(5, 4, 3, 0.97));
  border-radius: inherit;
  z-index: 6;
  overflow: hidden;
  animation: ls-celebrate-in 320ms var(--ls-ease) both;
}

.ls-cellar.is-leaving { animation: ls-celebrate-out 300ms var(--ls-ease) forwards; }

.ls-cellar__rack {
  align-self: center;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(72px, 12vw, 104px), 1fr));
  gap: clamp(6px, 1.4vw, 12px);
  width: min(100%, 560px);
  max-height: 100%;
  overflow: hidden;
}

/* A barrel end-on: staves in a hoop, numbered until it is opened. */
.ls-cellar__barrel {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 2px;
  text-align: center;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(217, 154, 63, 0.26);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, rgba(92, 60, 30, 0.55), rgba(38, 24, 12, 0.75));
  box-shadow: inset 0 0 0 3px rgba(120, 92, 58, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 16px rgba(0, 0, 0, 0.5);
  transition: transform 160ms var(--ls-ease), filter 160ms var(--ls-ease);
}

.ls-cellar__num {
  font-family: var(--ls-mono);
  font-size: clamp(11px, 1.9vw, 16px);
  color: rgba(232, 205, 160, 0.5);
  font-variant-numeric: tabular-nums;
}

.ls-cellar__barrel strong {
  font-family: var(--ls-display);
  font-size: clamp(11px, 1.9vw, 17px);
  letter-spacing: 0.05em;
  color: #ffc25c;
}
.ls-cellar__barrel small {
  font-size: 7.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ls-ink-faint);
}

.ls-cellar__barrel.is-opening { animation: ls-cellar-shake 170ms linear; }
@keyframes ls-cellar-shake {
  0%, 100% { transform: translateX(0) scale(1); }
  25% { transform: translateX(-3px) scale(1.04); }
  75% { transform: translateX(3px) scale(1.04); }
}

.ls-cellar__barrel.is-open {
  border-color: rgba(255, 194, 92, 0.6);
  background:
    radial-gradient(closest-side, rgba(255, 194, 92, 0.2), transparent),
    linear-gradient(180deg, rgba(58, 40, 20, 0.7), rgba(20, 14, 8, 0.85));
  box-shadow: inset 0 0 0 2px rgba(255, 194, 92, 0.32), 0 8px 22px rgba(0, 0, 0, 0.55);
  animation: ls-cellar-open 260ms var(--ls-ease);
}
@keyframes ls-cellar-open {
  0% { transform: scale(1.28); filter: brightness(2); }
  100% { transform: scale(1); filter: brightness(1); }
}

.ls-cellar__barrel.is-mult {
  border-color: rgba(111, 215, 255, 0.7);
  box-shadow: inset 0 0 0 2px rgba(111, 215, 255, 0.4), 0 0 26px rgba(111, 215, 255, 0.3);
}
.ls-cellar__barrel.is-mult strong { color: #6fd7ff; }

.ls-cellar__barrel.is-jug {
  border-color: rgba(206, 92, 74, 0.7);
  background: linear-gradient(180deg, rgba(72, 24, 18, 0.7), rgba(24, 9, 7, 0.88));
  box-shadow: inset 0 0 0 2px rgba(206, 92, 74, 0.4), 0 0 26px rgba(206, 92, 74, 0.28);
}
.ls-cellar__barrel.is-jug strong { color: #ff8f76; }

@media (max-width: 620px) {
  .ls-brew__boardwrap { width: 100%; }
}

/* ------------------------------------------------------------------ *
 * Stormchaser Cash — the strike
 *
 * Both replays are a board with bolts painted over it, so they share one
 * panel. The cue (`lightning`) fires on most spins and is deliberately quick;
 * the Eye of the Storm replay is the long one.
 * ------------------------------------------------------------------ */

.ls-bolt {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  justify-items: center;
  gap: clamp(8px, 2vw, 16px);
  padding: clamp(12px, 3vw, 26px);
  background: radial-gradient(120% 90% at 50% 38%, rgba(8, 20, 26, 0.94), rgba(2, 5, 8, 0.97));
  border-radius: inherit;
  z-index: 6;
  overflow: hidden;
  animation: ls-celebrate-in 260ms var(--ls-ease) both;
}

.ls-bolt.is-leaving { animation: ls-celebrate-out 260ms var(--ls-ease) forwards; }

.ls-bolt__head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
  flex-wrap: wrap;
  justify-content: center;
}

.ls-bolt__title {
  font-family: var(--ls-display);
  font-size: clamp(15px, 2.6vw, 24px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #59f2ff;
  text-shadow: 0 0 22px rgba(89, 242, 255, 0.5);
}

.ls-bolt__total { color: #7dff8a; }
.ls-bolt__mult { color: #ffcf4a; }

/* The board is 5x4 here, not 5x3 — a squarer window than the other games. */
.ls-bolt__boardwrap {
  height: 100%;
  aspect-ratio: 5 / 4;
  width: auto;
  max-width: min(560px, 100%);
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(89, 242, 255, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.6);
}

.ls-bolt__canvas { display: block; width: 100%; height: 100%; }

.ls-bolt__rule {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ls-ink-faint);
  text-align: center;
}

@media (max-width: 620px) {
  .ls-bolt__boardwrap { width: 100%; }
}

/* ------------------------------------------------------------------ *
 * Treasure Below — the descent
 *
 * The one board in the catalogue whose height is a variable: it is drawn at
 * six-row pitch and cropped to the rows the dive has opened, so the wrapper is
 * always 5:6 and the window inside it grows.
 * ------------------------------------------------------------------ */

.ls-dive {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  justify-items: center;
  gap: clamp(8px, 2vw, 16px);
  padding: clamp(12px, 3vw, 26px);
  background: radial-gradient(120% 90% at 50% 30%, rgba(4, 26, 34, 0.94), rgba(1, 5, 10, 0.97));
  border-radius: inherit;
  z-index: 6;
  overflow: hidden;
  animation: ls-celebrate-in 320ms var(--ls-ease) both;
}

.ls-dive.is-leaving { animation: ls-celebrate-out 300ms var(--ls-ease) forwards; }

.ls-dive__head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
  flex-wrap: wrap;
  justify-content: center;
}

.ls-dive__title {
  font-family: var(--ls-display);
  font-size: clamp(15px, 2.6vw, 24px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3fd8d0;
  text-shadow: 0 0 22px rgba(63, 216, 208, 0.5);
}

.ls-dive__total { color: #dcae55; }
.ls-dive__mult { color: #3fd8d0; }
.ls-dive__depth {
  color: #3fd8d0;
  letter-spacing: 0.08em;
  transition: color 260ms var(--ls-ease);
}

.ls-dive__boardwrap {
  height: 100%;
  aspect-ratio: 5 / 6;
  width: auto;
  max-width: min(420px, 100%);
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(63, 216, 208, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.6);
}

.ls-dive__canvas { display: block; width: 100%; height: 100%; }

.ls-dive__rule {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ls-ink-faint);
  text-align: center;
}

@media (max-width: 620px) {
  .ls-dive__boardwrap { width: auto; }
}

/* ==================================================================== *
 * Table kit — painted felts, real cards, physical chips
 * ==================================================================== */

/* A game with its own painted felt hides the house gradient underneath it,
   otherwise two backgrounds fight and the cloth looks washed out. */
.ls-felt__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--ls-radius-lg);
  z-index: 0;
  pointer-events: none;
}
.ls-table-felt:has(.ls-felt__canvas) {
  background: #04100c;
}
.ls-table-felt:has(.ls-felt__canvas)::after { border-color: transparent; }
/* Everything the player interacts with sits above the cloth. */
.ls-table-felt > *:not(.ls-felt__canvas) { position: relative; z-index: 1; }

/* The felt's own furniture is painted at fixed fractions of its height, so the
   DOM has to leave room for it: the chip tray across the top, and the betting
   circles the hand boxes sit in along the bottom. */
.ls-felt--bj {
  min-height: 490px;
  justify-content: flex-start;
  padding: 62px 18px 46px;
  gap: 0;
}
/* The band between the two zones has to be a real margin, not leftover space.
   The felt is content-sized, so on a full table there IS no free space for
   `margin-top: auto` to distribute and the dealer's box ends exactly where the
   player's begins — which collapsed the strip the printed rules live in. */
.ls-felt--bj .ls-hands { margin-top: auto; }
.ls-felt--bj .ls-hand.is-dealer { margin-bottom: clamp(58px, 9vh, 104px); }
/* The dealer has no wager, so their bet box is dead height in the middle of
   the table. */
.ls-felt--bj .ls-hand.is-dealer .ls-hand__box { display: none; }

/* A total has to read against cloth, not against a panel. */
.ls-hand__total:not(:empty) {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(4, 10, 8, 0.72);
  box-shadow: inset 0 0 0 1px rgba(232, 198, 106, 0.22);
  backdrop-filter: blur(2px);
}

/* ---- Cards: real pip layouts ---- */

.ls-card-face__pips { position: absolute; inset: 0; }
.ls-card-face__spot {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 17px;
  line-height: 1;
}
.ls-card-face__spot.is-inverted { transform: translate(-50%, -50%) rotate(180deg); }
.ls-card-face__pips.is-small .ls-card-face__spot { font-size: 11px; }

.ls-card-face__court {
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid currentColor;
  background: linear-gradient(160deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01));
}
.ls-card-face__court em {
  font-style: normal;
  font-family: var(--ls-display);
  font-size: 30px;
  line-height: 0.9;
}
.ls-card-face__court i { font-style: normal; font-size: 15px; }
.ls-card-face.is-small .ls-card-face__court { padding: 2px 6px; }
.ls-card-face.is-small .ls-card-face__court em { font-size: 20px; }
.ls-card-face.is-small .ls-card-face__court i { font-size: 10px; }

/* ---- The flip. A hole card turns over where it lies. ---- */

.ls-card-face.is-flipping {
  animation: ls-flip-out 190ms ease-in forwards;
  backface-visibility: hidden;
}
.ls-card-face.is-flipping-in {
  animation: ls-flip-in 210ms ease-out;
}
@keyframes ls-flip-out {
  from { transform: perspective(700px) rotateY(0deg); }
  to { transform: perspective(700px) rotateY(88deg); }
}
@keyframes ls-flip-in {
  from { transform: perspective(700px) rotateY(-88deg); }
  to { transform: perspective(700px) rotateY(0deg); }
}

/* ---- Seats ---- */

.ls-hand.is-dealer { margin-bottom: 4px; }
/* A settled hand steps back rather than greying out. At 0.72 the cards read as
   disabled UI instead of as a hand that has finished playing. */
.ls-hand.is-done { filter: saturate(0.9) brightness(0.94); }
/* Labels sit on cloth, so they need their own contrast. */
.ls-table-felt:has(.ls-felt__canvas) .ls-hand__label {
  color: rgba(232, 198, 106, 0.75);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.ls-hand.is-arriving { animation: ls-seat-in 320ms var(--ls-ease); }
@keyframes ls-seat-in {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
.ls-hand__total.is-bust { color: var(--ls-crimson); }
.ls-hand__total.is-blackjack { color: var(--ls-metal-bright); text-shadow: 0 0 14px rgba(232, 198, 106, 0.6); }
.ls-hand__box { min-height: 40px; display: grid; place-items: center; padding-top: 6px; }

.ls-betspot {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  min-height: 34px;
  display: grid;
  place-items: end center;
  pointer-events: none;
}

/* ---- Chip stacks: a wager as an object, not a number ---- */

.ls-stack {
  position: relative;
  width: 46px;
  height: 34px;
  display: block;
}
.ls-stack__chip {
  position: absolute;
  left: 0;
  width: 44px;
  height: 14px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(var(--chip-ring) 0deg 12deg, transparent 12deg 30deg),
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--chip-colour) 78%, #ffffff), var(--chip-colour) 70%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.45);
}
.ls-stack__value {
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
  font-family: var(--ls-mono);
  font-size: 10.5px;
  color: var(--ls-metal-bright);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}

/* ---- Chips in flight ---- */

.ls-chipfly {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
}
.ls-chipfly__chip {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, color-mix(in srgb, var(--chip-colour) 70%, #ffffff), var(--chip-colour));
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), inset 0 0 0 3px rgba(255, 255, 255, 0.28);
  transition: transform 430ms cubic-bezier(0.3, 0.9, 0.4, 1);
  will-change: transform;
}
.ls-chipfly__chip.is-flying { animation: ls-chip-arc 430ms cubic-bezier(0.3, 0.9, 0.4, 1); }
@keyframes ls-chip-arc {
  50% { margin-top: var(--lift, -50px); }
}

@media (prefers-reduced-motion: reduce) {
  .ls-card-face.is-flipping,
  .ls-card-face.is-flipping-in,
  .ls-hand.is-arriving,
  .ls-chipfly__chip.is-flying { animation: none; }
  .ls-chipfly__chip { transition-duration: 1ms; }
}

/* ==================================================================== *
 * Poker — one action at a time
 * ==================================================================== */

/* An action label that has just landed announces itself, then settles. Without
   this a raise and a check look identical: two lines of small text that were
   already there. */
.ls-seat__action.is-fresh {
  animation: ls-action-pop 620ms var(--ls-ease);
}
@keyframes ls-action-pop {
  0% { transform: scale(0.9); opacity: 0; }
  22% { transform: scale(1.12); opacity: 1; color: var(--ls-metal-bright); }
  100% { transform: scale(1); opacity: 1; }
}

/* The seat currently acting is the only thing the eye should go to. */
.ls-seat.is-acting { position: relative; z-index: 3; }
.ls-seat.is-acting .ls-seat__plate {
  animation: ls-acting-breathe 1.6s ease-in-out infinite;
}
@keyframes ls-acting-breathe {
  50% { box-shadow: 0 0 0 2px var(--ls-accent), 0 0 34px rgba(55, 224, 255, 0.55); }
}

.ls-seat__bet.is-live {
  animation: ls-bet-in 300ms var(--ls-ease);
}
@keyframes ls-bet-in {
  from { transform: translateY(-6px) scale(0.86); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-seat__action.is-fresh,
  .ls-seat.is-acting .ls-seat__plate,
  .ls-seat__bet.is-live { animation: none; }
}

/* ==================================================================== *
 * Roulette — the wheel, and a layout with chips on it
 * ==================================================================== */

.ls-felt--roulette {
  display: grid;
  grid-template-columns: minmax(240px, 400px) 1fr;
  gap: 22px;
  align-items: center;
  min-height: 0;
  padding: 20px;
}
.ls-felt--roulette .ls-wheel-wrap { padding: 4px; }
.ls-felt--roulette .ls-wheel { max-width: none; filter: drop-shadow(0 22px 50px rgba(0, 0, 0, 0.75)); }
.ls-roulette__layout { display: grid; gap: 10px; min-width: 0; }

/* A wager on the layout is a chip, not a label. */
.ls-felt__chip {
  background:
    repeating-conic-gradient(var(--chip-ring, #ffffff) 0deg 14deg, transparent 14deg 32deg),
    radial-gradient(circle at 42% 36%, color-mix(in srgb, var(--chip-colour, #8a0f22) 78%, #ffffff), var(--chip-colour, #8a0f22) 72%);
  border: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

@media (max-width: 860px) {
  .ls-felt--roulette { grid-template-columns: minmax(0, 1fr); }
  .ls-felt--roulette .ls-wheel-wrap { max-width: 340px; margin: 0 auto; }
}

/* ==================================================================== *
 * The remaining tables on painted felts
 * ==================================================================== */

.ls-felt--baccarat { min-height: 380px; justify-content: space-evenly; padding: 46px 18px 34px; }
.ls-felt--baccarat .ls-hand { gap: 6px; }

.ls-felt--vp {
  min-height: 460px;
  display: grid;
  /* An `auto` column inside a container that still says `space-around` shrinks
     the whole machine face to its widest row and centres it, which is how the
     pay board ended up a narrow strip in the middle of a wide cabinet. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  justify-content: stretch;
  align-content: stretch;
  gap: 14px;
  padding: 26px 42px 20px;
}
.ls-vp-marquee {
  font-family: var(--ls-display);
  font-size: clamp(15px, 2.4vw, 22px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  color: #c9a6ff;
  text-shadow: 0 0 18px rgba(160, 107, 255, 0.7), 0 0 44px rgba(160, 107, 255, 0.35);
  position: relative;
  z-index: 1;
}
.ls-felt--vp .ls-vp-paytable { position: relative; z-index: 1; overflow-x: auto; }
.ls-felt--vp .ls-vp-paytable .ls-paytable { width: 100%; }
.ls-felt--vp .ls-vp-hand { align-items: center; position: relative; z-index: 1; }

/* The pay board reads as a lit screen, not a spreadsheet. */
.ls-felt--vp .ls-paytable { border-collapse: collapse; font-size: 12.5px; }
.ls-felt--vp .ls-paytable th,
.ls-felt--vp .ls-paytable td { padding: 4px 10px; border: none; }
.ls-felt--vp .ls-paytable td:first-child,
.ls-felt--vp .ls-paytable th:first-child {
  text-align: left;
  font-family: var(--ls-display);
  letter-spacing: 0.06em;
  color: #d8c8f4;
}
.ls-felt--vp .ls-paytable td:not(:first-child),
.ls-felt--vp .ls-paytable th:not(:first-child) {
  text-align: right;
  font-family: var(--ls-mono);
  color: rgba(216, 200, 244, 0.62);
  width: 12%;
}
.ls-felt--vp .ls-paytable__head th {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201, 166, 255, 0.55);
  padding-bottom: 6px;
}
.ls-felt--vp .ls-paytable tbody tr + tr td { border-top: 1px solid rgba(160, 107, 255, 0.12); }
.ls-felt--vp .ls-paytable td.is-current,
.ls-felt--vp .ls-paytable th.is-current {
  color: #ffe9a8;
  background: rgba(224, 192, 112, 0.1);
  font-weight: 700;
}
.ls-felt--vp .ls-vp-card { gap: 10px; }
.ls-felt--vp .ls-vp-hand { gap: 18px; }
.ls-felt--vp .ls-vp-card .ls-card-face { width: clamp(76px, 9.2vw, 104px); height: auto; aspect-ratio: 5 / 7; }
.ls-felt--vp .ls-vp-hold {
  min-width: 74px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10.5px;
}
.ls-felt--vp .ls-vp-card.is-held .ls-vp-hold {
  border-color: var(--ls-metal);
  color: var(--ls-metal-bright);
  background: rgba(232, 198, 106, 0.14);
}

.ls-felt--3card { min-height: 400px; justify-content: space-between; padding: 40px 18px 56px; }
.ls-felt--craps { min-height: 440px; padding: 30px 18px; }

/* The paytable line a hand actually paid on. */
.ls-paytable tr.is-paid td {
  background: rgba(232, 198, 106, 0.16);
  color: var(--ls-metal-bright);
  box-shadow: inset 0 0 0 1px rgba(232, 198, 106, 0.45);
  animation: ls-paid-row 900ms var(--ls-ease);
}
@keyframes ls-paid-row {
  0%, 40% { background: rgba(232, 198, 106, 0.42); }
  100% { background: rgba(232, 198, 106, 0.16); }
}

@media (prefers-reduced-motion: reduce) {
  .ls-paytable tr.is-paid td { animation: none; }
}

/* Bet spots that sit ON the cloth, with the painted marking underneath them. */
.ls-bacc-hands { display: flex; gap: clamp(16px, 3.4vw, 46px); justify-content: center; align-items: flex-start; }
.ls-table-felt .ls-bacc-spots { margin-top: auto; }
.ls-table-felt:has(.ls-felt__canvas) .ls-bacc-spot {
  background: rgba(4, 10, 20, 0.42);
  border-color: transparent;
  backdrop-filter: blur(2px);
}
.ls-table-felt:has(.ls-felt__canvas) .ls-bacc-spot.is-staked {
  background: rgba(4, 10, 20, 0.6);
  border-color: transparent;
}
.ls-felt--baccarat { justify-content: flex-start; padding: 20px 24px 16px; min-height: 430px; }
.ls-felt--baccarat .ls-bacc-hands { margin: auto 0; }
.ls-felt--baccarat .ls-bacc-spots { margin-top: auto; }
.ls-felt--baccarat .ls-hand__cards { min-width: clamp(146px, 20vw, 196px); min-height: 98px; justify-content: center; }
.ls-felt--baccarat .ls-hand__total { font-size: 28px; }
.ls-felt--baccarat .ls-hand.is-player .ls-hand__label { color: #9dbcff; }
.ls-felt--baccarat .ls-hand.is-banker .ls-hand__label { color: #ef8fa2; }

/* Empty bands the felt prints into, so nothing is painted at a guessed y. */
.ls-felt__band { pointer-events: none; }
.ls-felt__band.is-header { min-height: 22px; }
.ls-felt__band.is-footer { min-height: 24px; margin-top: 14px; }
.ls-felt--3card { justify-content: flex-start; padding: 22px 18px 16px; min-height: 420px; }
.ls-3card__column {
  width: min(470px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  flex: 1;
}
.ls-felt--3card .ls-hand.is-dealer { margin-bottom: clamp(24px, 4vh, 44px); }
/* An empty row shrinks to nothing, and a mark can only be measured from
   something that has a width. Reserving the row keeps the printed card ghosts
   and the layout itself from moving when the first card lands. */
.ls-felt--3card .ls-hand__cards { min-width: clamp(160px, 42%, 208px); min-height: 96px; justify-content: center; }
.ls-felt--3card .ls-3card__column .ls-bacc-spots { margin-top: auto; gap: 28px; }
.ls-felt--3card .ls-bacc-spot { flex: 1; min-width: 0; padding: 11px 8px; }
.ls-felt--3card .ls-bacc-spot small { font-size: 9.5px; }
.ls-bacc-spot.is-static { cursor: default; opacity: 0.9; }
.ls-bacc-spot.is-static:hover { border-color: var(--ls-line); background: rgba(255, 255, 255, 0.02); }

/* ---- Craps: the controls ARE the layout ---- */

.ls-felt--craps { display: block; padding: 18px 22px 20px; min-height: 470px; }
.ls-felt--craps .ls-dice { justify-content: center; gap: 16px; margin-bottom: 18px; }
.ls-felt--craps .ls-die { width: 70px; height: 70px; border-radius: 12px; padding: 9px; }
.ls-felt--craps .ls-die i { width: 12px; height: 12px; }
.ls-die.is-tumbling { animation: ls-die-tumble 140ms linear; }
.ls-die.is-landing { animation: ls-die-land 320ms var(--ls-ease); }
@keyframes ls-die-tumble {
  from { transform: rotate(-9deg) translateY(-5px); }
  to { transform: rotate(7deg) translateY(3px); }
}
@keyframes ls-die-land {
  0% { transform: scale(1.16) rotate(-5deg); }
  60% { transform: scale(0.97) rotate(1deg); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-die.is-tumbling, .ls-die.is-landing { animation: none; }
}
.ls-craps-felt { display: grid; gap: clamp(9px, 2vh, 18px); }
.ls-craps__boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-left: clamp(30px, 5%, 52px); }
.ls-craps__comes { display: grid; grid-template-columns: 1.7fr 1fr; gap: 8px; }
.ls-craps__cell {
  min-height: 62px;
  display: grid;
  align-content: center;
  gap: 2px;
  /* Room at the foot of every cell for the chip that rides it, so a wager
     never sits on top of the number it is riding on. */
  padding: 10px 8px 24px;
  background: rgba(4, 16, 10, 0.34);
  border-color: transparent;
  position: relative;
}
.ls-craps__cell .ls-felt__text { font-size: 13px; }
.ls-craps__cell small { color: var(--ls-ink-faint); font-size: 10px; }
.ls-craps__boxes .ls-craps__cell .ls-felt__text {
  font-family: var(--ls-display);
  font-size: 26px;
  line-height: 1;
}
.ls-craps__field { min-height: 82px; }
.ls-craps__nums {
  font-family: var(--ls-display);
  font-style: normal;
  font-size: 16px;
  letter-spacing: 0.14em;
  color: rgba(120, 240, 226, 0.95);
}
.ls-craps__field small { color: rgba(150, 214, 206, 0.75); }
.ls-craps__cell:hover { background: rgba(232, 198, 106, 0.16); }

/* A craps cell is a bet AND a printed number. A chip parked over its centre
   covers the very thing it is riding on, so it sits low in the box instead. */
.ls-craps__cell { position: relative; }
.ls-craps__cell .ls-felt__chip {
  top: auto;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 0;
  height: auto;
  border-radius: 999px;
  padding: 2px 9px;
  font: 800 10px/1.35 var(--ls-mono), monospace;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.96), rgba(226, 190, 108, 0.94));
  border: 1px solid rgba(0, 0, 0, 0.4);
  color: #150f02;
  text-shadow: none;
}
.ls-craps__boxes .ls-craps__cell { min-height: 76px; }
.ls-craps__cell .ls-felt__chip { white-space: nowrap; }

/* The two aprons. The felt paints a curved band around each row, so the row
   needs vertical room for the sag or the arc is clipped by its neighbour. */
.ls-craps__apron { display: grid; gap: 8px; }
.ls-craps__apron.is-light { grid-template-columns: 1.9fr 1fr; margin: 16px 0 20px; }
.ls-craps__apron.is-dark { margin: 14px 0 6px; }
.ls-craps__apron .ls-craps__cell { background: transparent; }
.ls-craps__apron.is-light .ls-felt__text { font-family: var(--ls-display); letter-spacing: 0.1em; }
.ls-craps__footer { min-height: 20px; }

@media (max-width: 760px) {
  .ls-craps__boxes { grid-template-columns: repeat(3, 1fr); margin-left: 0; }
  .ls-craps__comes, .ls-craps__apron.is-light { grid-template-columns: 1fr 1fr; }
  .ls-craps__cell { min-height: 46px; }
  .ls-craps__field { min-height: 64px; }
  .ls-craps__nums { font-size: 13px; }
}

/* ---- Emberfall Rising: the seam readout ---- */

/* The seam readout moved into the shared chain plate (games/chain.js) — the
   two of them were both bottom-centred and drew on top of each other. */

/* ---- Emberfall Rising: the round card and its payout ---- */

.ls-ember-card,
.ls-ember-win {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 84%;
  max-width: 84%;
  padding: clamp(12px, 2.6vh, 24px) clamp(14px, 3vw, 30px);
  border-radius: 18px;
  text-align: center;
  pointer-events: none;
  z-index: 9;
  animation: ls-ember-card-in 340ms cubic-bezier(0.16, 1.5, 0.4, 1);
}
.ls-ember-card {
  background: radial-gradient(120% 150% at 50% 0%, rgba(74, 24, 6, 0.95), rgba(10, 4, 3, 0.96));
  border: 1px solid rgba(255, 160, 90, 0.42);
  box-shadow: 0 0 80px rgba(255, 122, 47, 0.42);
}
.ls-ember-win {
  gap: 8px;
  background: radial-gradient(120% 150% at 50% 0%, rgba(96, 32, 6, 0.96), rgba(12, 4, 2, 0.97));
  border: 2px solid rgba(255, 202, 69, 0.6);
  box-shadow: 0 0 110px rgba(255, 122, 47, 0.55);
}
.ls-ember-card.is-leaving { opacity: 0; transform: translate(-50%, -58%); transition: all 320ms var(--ls-ease); }
.ls-ember-win.is-leaving { opacity: 0; transform: translate(-50%, -64%) scale(1.06); transition: all 340ms var(--ls-ease); }
.ls-ember-card__label,
.ls-ember-win__label {
  font: 700 11px/1 var(--ls-mono), monospace;
  letter-spacing: 0.34em;
  color: rgba(255, 202, 69, 0.92);
}
.ls-ember-card strong {
  font-family: var(--ls-display);
  font-size: clamp(20px, 4.6vw, 40px);
  line-height: 1;
  color: #fff3e0;
  text-shadow: 0 0 40px rgba(255, 150, 70, 1);
}
.ls-ember-win strong {
  font-family: var(--ls-display);
  font-size: clamp(26px, 6.4vw, 54px);
  line-height: 1;
  color: #fff8ec;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 46px rgba(255, 122, 47, 1);
}
.ls-ember-card small {
  font: 500 12.5px/1.4 system-ui, sans-serif;
  color: rgba(255, 216, 184, 0.74);
}
@keyframes ls-ember-card-in {
  from { opacity: 0; transform: translate(-50%, -42%) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ls-ember-card, .ls-ember-win { animation: none; }
}

/* ---- Blackgold Rush: the gusher and the Strike ---- */

.ls-bg-collect {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 32px;
  border-radius: 14px;
  background: radial-gradient(120% 140% at 50% 0%, rgba(60, 30, 4, 0.95), rgba(10, 6, 2, 0.96));
  border: 2px solid rgba(240, 185, 60, 0.8);
  box-shadow: 0 0 60px rgba(255, 170, 60, 0.55), inset 0 1px 0 rgba(255, 232, 176, 0.3);
  pointer-events: none;
  z-index: 7;
  animation: ls-bg-in 300ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.ls-bg-collect.is-leaving { opacity: 0; transform: translate(-50%, -60%); transition: all 320ms var(--ls-ease); }
.ls-bg-collect.is-jackpot { border-color: #fff2cc; box-shadow: 0 0 90px rgba(255, 240, 200, 0.8); }
.ls-bg-collect__label {
  font: 800 10px/1 var(--ls-display), system-ui, sans-serif;
  letter-spacing: 0.34em;
  color: rgba(255, 208, 140, 0.9);
}
.ls-bg-collect__value {
  font-family: var(--ls-display);
  font-size: clamp(30px, 6vw, 52px);
  line-height: 1.05;
  color: #fff6dc;
  text-shadow: 0 0 26px rgba(255, 180, 70, 0.95), 0 3px 0 rgba(90, 40, 0, 0.6);
}
.ls-bg-collect__value.is-bumped { animation: ls-bg-bump 220ms var(--ls-ease); }
.ls-bg-collect__mult {
  font: 800 15px/1 var(--ls-display), system-ui, sans-serif;
  letter-spacing: 0.16em;
  color: #ffd76a;
}
.ls-bg-strike {
  position: absolute;
  inset: 0;
  animation-name: ls-bg-fade;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: radial-gradient(90% 80% at 50% 50%, rgba(70, 24, 4, 0.92), rgba(6, 3, 1, 0.96));
  pointer-events: none;
  z-index: 8;
  animation: ls-bg-in 320ms var(--ls-ease);
}
.ls-bg-strike.is-leaving { opacity: 0; transition: opacity 300ms var(--ls-ease); }
.ls-bg-strike__label {
  font: 800 12px/1 var(--ls-display), system-ui, sans-serif;
  letter-spacing: 0.42em;
  color: #ffb060;
}
.ls-bg-strike strong {
  font-family: var(--ls-display);
  font-size: clamp(28px, 6vw, 54px);
  color: #fff6dc;
  text-shadow: 0 0 40px rgba(255, 170, 60, 0.9);
}
.ls-bg-strike small { font: 600 13px/1 var(--ls-mono), monospace; color: rgba(255, 214, 160, 0.8); }

@keyframes ls-bg-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes ls-bg-bump {
  0% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ls-bg-collect, .ls-bg-strike, .ls-bg-collect__value.is-bumped { animation: none; }
}

@keyframes ls-bg-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Blackgold Rush: the celebration ---- */

.ls-bg-win {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* The panel is centred on the cabinet, so it has to fit inside it. Without a
     width it set its own from the longest word and hung off the left edge. */
  width: 88%;
  max-width: 88%;
  padding: clamp(10px, 2.2vh, 20px) clamp(14px, 3vw, 30px);
  border-radius: 16px;
  /* The panel sits over the reels, so it needs a ground of its own — white
     text on a board of gold barrels is text nobody can read. */
  background: radial-gradient(120% 150% at 50% 0%, rgba(46, 16, 3, 0.92), rgba(8, 4, 1, 0.94));
  border: 1px solid rgba(255, 200, 120, 0.35);
  box-shadow: 0 0 70px rgba(255, 170, 60, 0.35);
  text-align: center;
  pointer-events: none;
  z-index: 9;
  animation: ls-bg-win-in 380ms cubic-bezier(0.16, 1.5, 0.4, 1);
}
.ls-bg-win.is-leaving { opacity: 0; transform: translate(-50%, -64%) scale(1.06); transition: all 340ms var(--ls-ease); }
.ls-bg-win__tier {
  font-family: var(--ls-display);
  font-size: clamp(13px, 2.8vw, 24px);
  white-space: nowrap;
  letter-spacing: 0.16em;
  color: #ffe9a8;
  text-shadow: 0 0 34px rgba(255, 180, 60, 0.95), 0 4px 0 rgba(90, 40, 0, 0.55);
  animation: ls-bg-tier 620ms cubic-bezier(0.16, 1.6, 0.4, 1);
}
.ls-bg-win__value {
  font-family: var(--ls-display);
  font-size: clamp(24px, 5.4vw, 52px);
  white-space: nowrap;
  line-height: 1;
  color: #fff8e6;
  text-shadow: 0 0 40px rgba(255, 200, 90, 1), 0 5px 0 rgba(80, 34, 0, 0.6);
}
.ls-bg-win__value.is-landed { animation: ls-bg-land 460ms cubic-bezier(0.16, 1.7, 0.4, 1); }
.ls-bg-strike em {
  font: 500 12.5px/1.4 system-ui, sans-serif;
  font-style: normal;
  color: rgba(255, 214, 160, 0.7);
  max-width: 62%;
  text-align: center;
}

@keyframes ls-bg-win-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes ls-bg-tier {
  0% { transform: scaleX(2.2) scaleY(0.5); opacity: 0; letter-spacing: 0.6em; }
  60% { opacity: 1; }
  100% { transform: none; opacity: 1; letter-spacing: 0.16em; }
}
@keyframes ls-bg-land {
  0% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ls-bg-win, .ls-bg-win__tier, .ls-bg-win__value.is-landed { animation: none; }
}

/* ---- Blackgold Rush: which round the well gave you ---- */

.ls-bg-choose {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vh, 22px);
  background: radial-gradient(85% 75% at 50% 45%, rgba(78, 26, 3, 0.94), rgba(6, 3, 1, 0.97));
  pointer-events: none;
  z-index: 9;
  animation: ls-bg-fade 320ms var(--ls-ease);
}
.ls-bg-choose.is-leaving { opacity: 0; transition: opacity 320ms var(--ls-ease); }
.ls-bg-choose__head { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ls-bg-choose__eyebrow {
  font: 800 10px/1 var(--ls-display), system-ui, sans-serif;
  letter-spacing: 0.42em;
  color: rgba(255, 190, 130, 0.85);
}
.ls-bg-choose__head strong {
  font-family: var(--ls-display);
  font-size: clamp(24px, 5.4vw, 46px);
  letter-spacing: 0.12em;
  color: #fff6dc;
  text-shadow: 0 0 34px rgba(255, 170, 60, 0.9);
}
.ls-bg-choose__row { display: flex; gap: clamp(8px, 2vw, 20px); align-items: stretch; }
.ls-bg-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: clamp(10px, 2.2vh, 20px) clamp(9px, 2vw, 20px);
  width: clamp(88px, 21vw, 148px);
  border-radius: 12px;
  border: 2px solid rgba(240, 185, 60, 0.55);
  background: linear-gradient(180deg, rgba(46, 16, 4, 0.9), rgba(16, 6, 2, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.2);
  animation: ls-bg-pillar-in 420ms cubic-bezier(0.16, 1.5, 0.4, 1) backwards;
  transition: transform 180ms var(--ls-ease), box-shadow 180ms var(--ls-ease), opacity 260ms var(--ls-ease), border-color 180ms var(--ls-ease);
}
.ls-bg-pillar.is-deep { border-color: rgba(90, 208, 122, 0.6); }
.ls-bg-pillar.is-working { border-color: rgba(240, 185, 60, 0.6); }
.ls-bg-pillar.is-wide { border-color: rgba(106, 214, 255, 0.6); }
.ls-bg-pillar.is-lit { transform: translateY(-6px) scale(1.04); box-shadow: 0 0 34px rgba(255, 190, 90, 0.5), inset 0 1px 0 rgba(255, 240, 200, 0.35); }
.ls-bg-pillar.is-picked {
  transform: translateY(-10px) scale(1.09);
  border-color: #fff2cc;
  box-shadow: 0 0 60px rgba(255, 200, 100, 0.85), inset 0 1px 0 rgba(255, 250, 230, 0.5);
}
.ls-bg-pillar.is-fading { opacity: 0.28; transform: scale(0.95); }
.ls-bg-pillar__spins {
  font-family: var(--ls-display);
  font-size: clamp(28px, 6.4vw, 50px);
  line-height: 1;
  color: #fff6dc;
  text-shadow: 0 0 22px rgba(255, 180, 70, 0.8);
}
.ls-bg-pillar__unit { font: 800 9.5px/1 var(--ls-display), system-ui, sans-serif; letter-spacing: 0.3em; color: rgba(255, 200, 140, 0.8); }
.ls-bg-pillar__rule { display: block; width: 52%; height: 1px; background: rgba(240, 185, 60, 0.45); margin: 5px 0; }
.ls-bg-pillar__with { font: 700 8.5px/1 var(--ls-display), system-ui, sans-serif; letter-spacing: 0.3em; color: rgba(255, 200, 140, 0.6); }
.ls-bg-pillar__floor { font-family: var(--ls-display); font-size: clamp(12px, 2.4vw, 17px); color: #ffd76a; }
.ls-bg-pillar small { font: 500 10px/1.35 system-ui, sans-serif; color: rgba(255, 214, 170, 0.62); text-align: center; }

@keyframes ls-bg-pillar-in {
  from { opacity: 0; transform: translateY(26px) scale(0.86); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-bg-choose, .ls-bg-pillar { animation: none; }
}

/* The choice is real, so the pillars are buttons and behave like them. */
.ls-bg-choose { pointer-events: auto; }
.ls-bg-pillar { cursor: pointer; font: inherit; color: inherit; }
.ls-bg-pillar:hover:not(:disabled) {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 0 34px rgba(255, 190, 90, 0.5), inset 0 1px 0 rgba(255, 240, 200, 0.35);
}
.ls-bg-pillar:active:not(:disabled) { transform: translateY(-2px) scale(1.01); }
.ls-bg-pillar:focus-visible { outline: 2px solid #fff2cc; outline-offset: 3px; }
.ls-bg-pillar:disabled { cursor: default; }

/* Twenty seconds to choose, drawn so nobody is surprised by the default. */
.ls-bg-choose__clock {
  width: min(280px, 60%);
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 214, 160, 0.18);
  overflow: hidden;
}
.ls-bg-choose__clock i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ffd76a, #ff9a3c);
  transform-origin: left center;
  animation: ls-bg-clock 20s linear forwards;
}
@keyframes ls-bg-clock { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .ls-bg-choose__clock i { animation-duration: 20s; } }

/* ------------------------------------------------------------------ *
 * Glacier Break — the shaft that keeps opening
 * ------------------------------------------------------------------ */

/* The free-games card. */
.ls-gb-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 84%;
  max-width: 84%;
  padding: clamp(12px, 2.6vh, 24px) clamp(14px, 3vw, 30px);
  border-radius: 18px;
  background: radial-gradient(120% 150% at 50% 0%, rgba(12, 44, 66, 0.94), rgba(3, 9, 16, 0.95));
  border: 1px solid rgba(160, 232, 255, 0.38);
  box-shadow: 0 0 80px rgba(120, 214, 255, 0.42);
  text-align: center;
  pointer-events: none;
  z-index: 9;
  animation: ls-gb-in 340ms cubic-bezier(0.16, 1.5, 0.4, 1);
}
.ls-gb-card.is-leaving { opacity: 0; transform: translate(-50%, -58%); transition: all 320ms var(--ls-ease); }
.ls-gb-card__label {
  font: 700 11px/1 var(--ls-mono), monospace;
  letter-spacing: 0.34em;
  color: rgba(143, 255, 208, 0.9);
}
.ls-gb-card strong {
  font-family: var(--ls-display);
  font-size: clamp(20px, 4.6vw, 40px);
  line-height: 1;
  color: #f2feff;
  text-shadow: 0 0 40px rgba(150, 235, 255, 1);
}
.ls-gb-card small {
  font: 500 12.5px/1.4 system-ui, sans-serif;
  color: rgba(196, 232, 246, 0.72);
}

/* The counted payout. */
.ls-gb-win {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 88%;
  max-width: 88%;
  padding: clamp(10px, 2.2vh, 20px) clamp(14px, 3vw, 30px);
  border-radius: 16px;
  background: radial-gradient(120% 150% at 50% 0%, rgba(10, 40, 60, 0.93), rgba(2, 7, 13, 0.95));
  border: 1px solid rgba(160, 232, 255, 0.35);
  box-shadow: 0 0 70px rgba(120, 214, 255, 0.4);
  text-align: center;
  pointer-events: none;
  z-index: 9;
  animation: ls-gb-in 380ms cubic-bezier(0.16, 1.5, 0.4, 1);
}
.ls-gb-win.is-leaving { opacity: 0; transform: translate(-50%, -64%) scale(1.06); transition: all 340ms var(--ls-ease); }
.ls-gb-win__label {
  font: 700 11px/1 var(--ls-mono), monospace;
  letter-spacing: 0.3em;
  color: rgba(143, 255, 208, 0.88);
}
.ls-gb-win strong {
  font-family: var(--ls-display);
  font-size: clamp(24px, 5.4vw, 52px);
  white-space: nowrap;
  line-height: 1;
  color: #f4feff;
  text-shadow: 0 0 42px rgba(150, 235, 255, 1), 0 5px 0 rgba(6, 42, 62, 0.6);
}

@keyframes ls-gb-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.62); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ls-gb-card, .ls-gb-win { animation: none; }
}

/* ---- Neon Heatwave: a lane opening another storey ---- */

.ls-nh-rise {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 82%;
  max-width: 82%;
  padding: clamp(10px, 2.2vh, 20px) clamp(14px, 3vw, 28px);
  border-radius: 16px;
  background: radial-gradient(120% 150% at 50% 0%, rgba(48, 10, 44, 0.94), rgba(6, 2, 14, 0.95));
  border: 1px solid rgba(255, 92, 168, 0.42);
  box-shadow: 0 0 74px rgba(255, 92, 168, 0.42);
  text-align: center;
  pointer-events: none;
  z-index: 9;
  animation: ls-nh-rise-in 320ms cubic-bezier(0.16, 1.5, 0.4, 1);
}
.ls-nh-rise.is-leaving { opacity: 0; transform: translate(-50%, -60%); transition: all 300ms var(--ls-ease); }
.ls-nh-rise__label {
  font: 700 11px/1 var(--ls-mono), monospace;
  letter-spacing: 0.32em;
  color: rgba(34, 232, 255, 0.9);
}
.ls-nh-rise strong {
  font-family: var(--ls-display);
  font-size: clamp(20px, 4.6vw, 40px);
  line-height: 1;
  color: #fff0f8;
  text-shadow: 0 0 38px rgba(255, 92, 168, 1);
}
.ls-nh-rise small { font: 500 12px/1.4 system-ui, sans-serif; color: rgba(238, 208, 232, 0.72); }

@keyframes ls-nh-rise-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.66); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .ls-nh-rise { animation: none; } }

/* A celebration you cannot dismiss stops being a reward. */
.ls-celebrate__skip {
  font: 500 10.5px/1 var(--ls-mono), monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 6px;
  animation: ls-skip-in 900ms 700ms both;
}
@keyframes ls-skip-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ls-celebrate__skip { animation: none; } }

/* ==================================================================== *
 * The live floor
 * ==================================================================== */

.ls-floor-host { padding: 0 var(--ls-gutter, 24px); }
.ls-floor {
  margin: 10px 0 4px;
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.2));
  overflow: hidden;
}
.ls-floor__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 6px;
  border-bottom: 1px solid var(--ls-line);
}
.ls-floor__title {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ls-ink-dim);
}
.ls-floor__note { font-size: 11px; color: var(--ls-ink-faint); }
.ls-floor__list { display: flex; flex-direction: column; max-height: 168px; overflow-y: auto; }
.ls-floor__row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.ls-floor__row:first-child { border-top: 0; }
.ls-floor__row.is-mine { background: rgba(232, 198, 106, 0.07); }
.ls-floor__who { font-weight: 600; color: var(--ls-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-floor__what { color: var(--ls-ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-floor__value { font-family: var(--ls-mono), monospace; color: var(--ls-metal); font-variant-numeric: tabular-nums; }
.ls-floor__row.is-jackpot .ls-floor__value { color: #ffd166; text-shadow: 0 0 18px rgba(255, 209, 102, 0.5); }
.ls-floor__when { font-size: 11px; color: var(--ls-ink-faint); white-space: nowrap; }

/* ==================================================================== *
 * Weekly boards
 * ==================================================================== */

.ls-board-host { padding: 0 var(--ls-gutter, 24px); }
.ls-board {
  margin: 18px 0;
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.2));
  padding: 14px 16px 8px;
}
.ls-board__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ls-board__title { margin: 0; font-size: 15px; letter-spacing: 0.02em; }
.ls-board__tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ls-board__tab {
  appearance: none;
  border: 1px solid var(--ls-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ls-ink-dim);
  border-radius: 999px;
  padding: 5px 11px;
  font: 600 11.5px/1 system-ui, sans-serif;
  cursor: pointer;
}
.ls-board__tab[aria-selected="true"] { border-color: var(--ls-metal); color: var(--ls-ink); background: rgba(232, 198, 106, 0.12); }
.ls-board__tab:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 2px; }
.ls-board__basis { margin: 10px 0 6px; font-size: 12px; line-height: 1.5; color: var(--ls-ink-faint); }
.ls-board__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ls-board__row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) minmax(0, auto) auto;
  align-items: baseline;
  gap: 10px;
  padding: 8px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
}
.ls-board__row.is-mine { background: rgba(232, 198, 106, 0.08); border-radius: 6px; }
.ls-board__rank { font-family: var(--ls-mono), monospace; color: var(--ls-ink-faint); font-size: 11px; }
.ls-board__who { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-board__detail { font-size: 11px; color: var(--ls-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-board__score { font-family: var(--ls-mono), monospace; color: var(--ls-metal); font-variant-numeric: tabular-nums; }
.ls-board__empty { padding: 14px 4px; font-size: 13px; color: var(--ls-ink-faint); }

/* ==================================================================== *
 * The chain readout — what a cascading machine is paying you
 * ==================================================================== */

.ls-chain {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  /* The plate has to fit INSIDE the cabinet. A round called "EMBERFALL"
     carrying a seam multiplier and a five-figure ways count is a wide line, and
     unbounded it ran out past both edges of the glass with the label clipped
     off the left and the word "ways" off the right. */
  max-width: calc(100% - 20px);
  padding: 7px 18px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(8, 12, 20, 0.94), rgba(2, 4, 9, 0.95));
  border: 1px solid var(--chain-accent, rgba(232, 198, 106, 0.4));
  box-shadow: 0 0 44px color-mix(in srgb, var(--chain-accent, #e8c66a) 34%, transparent);
  white-space: nowrap;
  pointer-events: none;
  z-index: 9;
  animation: ls-chain-in 260ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.ls-chain.is-leaving { opacity: 0; transform: translateX(-50%) translateY(10px); transition: all 300ms var(--ls-ease); }
.ls-chain__row { display: flex; align-items: baseline; gap: 10px; max-width: 100%; }
.ls-chain__label {
  font: 700 10.5px/1 var(--ls-mono), monospace;
  letter-spacing: 0.26em;
  color: color-mix(in srgb, var(--chain-accent, #e8c66a) 78%, white 22%);
}
.ls-chain__value {
  font-family: var(--ls-display);
  font-size: clamp(17px, 3.4vw, 24px);
  line-height: 1;
  color: #fff8e8;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px color-mix(in srgb, var(--chain-accent, #e8c66a) 80%, transparent);
}
.ls-chain__value.is-bumped { animation: ls-chain-bump 260ms cubic-bezier(0.16, 1.6, 0.4, 1); }
.ls-chain__step {
  font: 600 12px/1 var(--ls-mono), monospace;
  color: color-mix(in srgb, var(--chain-accent, #e8c66a) 70%, white 30%);
  min-width: 42px;
}
/* The machine's own line — hidden until a machine puts something in it, so the
   plate does not carry a permanent empty column on the cabinets that don't. */
.ls-chain__meta {
  display: none;
  font: 600 10.5px/1 var(--ls-mono), monospace;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--chain-accent, #e8c66a) 55%, white 45%);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ls-chain__meta.is-on { display: inline; }
.ls-chain.is-final .ls-chain__meta { display: none; }
/* When the chain lands on its total, the step column has nothing left to say. */
.ls-chain.is-final { padding: 10px 24px; border-width: 2px; }
.ls-chain.is-final .ls-chain__value { font-size: clamp(22px, 4.6vw, 38px); }

@keyframes ls-chain-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.9); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes ls-chain-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.16); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ls-chain, .ls-chain__value.is-bumped { animation: none; }
}
/* ==================================================================== *
 * The Sportsbook
 * ==================================================================== */

/* The Sportsbook sits in the category strip as a link, not a filter, so it
   needs to read as a different KIND of thing than the tabs beside it. */
.ls-nav__item--link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--ls-metal-bright);
  border: 1px solid color-mix(in srgb, var(--ls-metal-face) 40%, transparent);
  border-radius: 999px;
  margin-right: 6px;
  flex: 0 0 auto;
}
.ls-nav__item--link svg { opacity: 0.9; }
.ls-nav__item--link.is-on {
  background: color-mix(in srgb, var(--ls-metal-face) 22%, transparent);
  border-color: var(--ls-metal-face);
  color: var(--ls-ink);
}

/* ---- What is being bet on ---- */

.ls-book__race {
  margin: 0 clamp(12px, 3vw, 26px);
  padding: 18px 22px;
  border-radius: var(--ls-radius-lg);
  border: 1px solid var(--ls-line-strong);
  background: linear-gradient(135deg, rgba(232, 198, 106, 0.09), rgba(255, 255, 255, 0.03));
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
}
.ls-book__eyebrow {
  display: block;
  font: 700 10.5px/1 var(--ls-mono), monospace;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ls-ink-faint);
}
.ls-book__track {
  display: block;
  font-family: var(--ls-display);
  font-size: clamp(20px, 3.4vw, 30px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 4px 0 6px;
}
.ls-book__race small { color: var(--ls-ink-dim); font-size: 12.5px; }
.ls-book__awaiting {
  margin: 0;
  font-size: 12.5px;
  color: var(--ls-ink-dim);
  max-width: 34ch;
  line-height: 1.5;
}
.ls-book__closed {
  margin: 0 clamp(12px, 3vw, 26px);
  padding: 28px 24px;
  text-align: center;
  border-radius: var(--ls-radius-lg);
  border: 1px solid var(--ls-line-strong);
  background: rgba(255, 255, 255, 0.03);
}
.ls-book__closed strong { display: block; font-family: var(--ls-display); font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; }
.ls-book__closed p { margin: 8px 0 0; color: var(--ls-ink-dim); }

/* ---- The four markets ---- */

.ls-book__markets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 0 clamp(12px, 3vw, 26px);
}
.ls-book__market {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--ls-radius);
  border: 1px solid var(--ls-line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ls-ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms var(--ls-ease), background 160ms var(--ls-ease);
}
.ls-book__market:hover { border-color: var(--ls-metal-face); }
.ls-book__market.is-on {
  border-color: var(--ls-metal-face);
  background: color-mix(in srgb, var(--ls-metal-face) 14%, transparent);
}
.ls-book__market strong { font-family: var(--ls-display); font-size: 14.5px; letter-spacing: 0.05em; text-transform: uppercase; }

/* How much the model has earned. Four states, four colours, so the difference
   between a modelled price and a near-lottery is visible at a glance. */
.ls-book__conf {
  font: 700 9.5px/1 var(--ls-mono), monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.ls-book__conf.is-high { color: #6fd68a; }
.ls-book__conf.is-mid { color: #e8c66a; }
.ls-book__conf.is-low { color: #ff9a5c; }
.ls-book__conf.is-unknown { color: var(--ls-ink-faint); }

.ls-book__note {
  margin: 14px clamp(12px, 3vw, 26px) 4px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ls-ink-dim);
  max-width: 74ch;
  border-left: 2px solid var(--ls-line-strong);
  padding-left: 12px;
}
.ls-book__note.is-low { border-left-color: #ff9a5c; color: color-mix(in srgb, #ffc9a8 70%, var(--ls-ink-dim)); }
.ls-book__note.is-high { border-left-color: #6fd68a; }

/* ---- The runners ---- */

.ls-book__runners { padding-top: 4px; }
.ls-book__list {
  display: grid;
  gap: 8px;
  padding: 10px clamp(12px, 3vw, 26px) 0;
}
.ls-book__runner {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--ls-radius);
  border: 1px solid var(--ls-line);
  background: rgba(255, 255, 255, 0.025);
  color: var(--ls-ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms var(--ls-ease), transform 140ms var(--ls-ease);
}
.ls-book__runner:hover:not(:disabled) { border-color: var(--ls-metal-face); transform: translateX(2px); }
.ls-book__runner:disabled { opacity: 0.55; cursor: not-allowed; }
.ls-book__num { font: 700 12px/1 var(--ls-mono), monospace; color: var(--ls-ink-faint); }
.ls-book__who strong { display: block; font-size: 14.5px; }
.ls-book__who small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ls-ink-faint); }
.ls-book__price {
  font-family: var(--ls-mono), monospace;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 700;
  color: var(--ls-metal-bright);
}

/* ---- How the prices are made ---- */

.ls-book__model {
  margin: 0 clamp(12px, 3vw, 26px);
  padding: 14px 18px;
  border-radius: var(--ls-radius);
  border: 1px solid var(--ls-line);
  background: rgba(255, 255, 255, 0.02);
}
.ls-book__model summary { cursor: pointer; font-family: var(--ls-display); letter-spacing: 0.05em; text-transform: uppercase; font-size: 13px; }
.ls-book__model p { margin: 12px 0 0; color: var(--ls-ink-dim); font-size: 13px; line-height: 1.6; max-width: 78ch; }
.ls-book__fine { color: var(--ls-ink-faint) !important; font-size: 11.5px !important; }

/* ---- The slip ---- */

.ls-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 6, 13, 0.72);
  backdrop-filter: blur(4px);
  animation: ls-modal-in 180ms var(--ls-ease);
}
.ls-modal.is-leaving { opacity: 0; transition: opacity 180ms var(--ls-ease); }
@keyframes ls-modal-in { from { opacity: 0; } }
.ls-modal__panel {
  position: relative;
  width: min(420px, 100%);
  border-radius: var(--ls-radius-lg);
  border: 1px solid var(--ls-line-strong);
  background: var(--ls-surface, #0d1320);
  box-shadow: var(--ls-shadow-lift);
  padding: 22px;
}
.ls-modal__close { position: absolute; top: 12px; right: 12px; }

.ls-slip { display: grid; gap: 14px; }
.ls-slip__head { display: grid; gap: 4px; padding-right: 36px; }
.ls-slip__market { font: 700 10px/1 var(--ls-mono), monospace; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-slip__head strong { font-family: var(--ls-display); font-size: 21px; letter-spacing: 0.03em; }
.ls-slip__price { font-family: var(--ls-mono), monospace; font-size: 18px; font-weight: 700; color: var(--ls-metal-bright); }
.ls-slip__quick { display: flex; gap: 8px; flex-wrap: wrap; }
.ls-slip__field { display: grid; gap: 6px; }
.ls-slip__field span { font: 700 10px/1 var(--ls-mono), monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-slip__input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--ls-radius);
  border: 1px solid var(--ls-line-strong);
  background: rgba(0, 0, 0, 0.3);
  color: var(--ls-ink);
  font-family: var(--ls-mono), monospace;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.ls-slip__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px solid var(--ls-line);
}
.ls-slip__foot span { font: 700 10px/1 var(--ls-mono), monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-slip__return { font-family: var(--ls-display); font-size: 26px; color: var(--ls-metal-bright); font-variant-numeric: tabular-nums; }
.ls-slip__hint { color: var(--ls-ink-dim); font-size: 12.5px; line-height: 1.5; }
/* The house edge on this bet, at the moment of deciding. */
.ls-slip__edge { color: var(--ls-ink-faint); font-size: 11.5px; line-height: 1.5; }

/* ---- Tickets ---- */

.ls-ticket {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: var(--ls-radius);
  border: 1px solid var(--ls-line);
  background: rgba(255, 255, 255, 0.025);
  border-left-width: 3px;
}
.ls-ticket.is-open { border-left-color: var(--ls-metal-face); }
.ls-ticket.is-won { border-left-color: #6fd68a; }
.ls-ticket.is-lost { border-left-color: rgba(255, 255, 255, 0.14); opacity: 0.72; }
.ls-ticket.is-void { border-left-color: #7ab8ff; }
.ls-ticket__head { display: flex; justify-content: space-between; gap: 12px; }
.ls-ticket__market { font: 700 10px/1 var(--ls-mono), monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-ticket__price { font-family: var(--ls-mono), monospace; font-weight: 700; color: var(--ls-metal-bright); }
.ls-ticket__pick { font-size: 15px; }
.ls-ticket__foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--ls-ink-dim); }
.ls-ticket__status { font-weight: 700; }
.ls-ticket.is-won .ls-ticket__status { color: #6fd68a; }
.ls-ticket__reason { color: var(--ls-ink-faint); font-size: 11.5px; }

@media (max-width: 560px) {
  .ls-book__race { flex-direction: column; align-items: flex-start; }
  .ls-book__runner { grid-template-columns: 40px 1fr auto; padding: 11px 12px; }
}

/* ==================================================================== *
 * Fantasy contests
 * ==================================================================== */

.ls-dfs__pool { text-align: right; display: grid; gap: 2px; }
.ls-dfs__pool span { font: 700 10px/1 var(--ls-mono), monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-dfs__pool strong { font-family: var(--ls-display); font-size: clamp(20px, 3vw, 28px); color: var(--ls-metal-bright); font-variant-numeric: tabular-nums; }
.ls-dfs__pool small { font-size: 11.5px; color: var(--ls-ink-dim); }
.ls-dfs__thin { color: #ff9a5c !important; }

/* ---- The five slots ---- */

.ls-dfs__slots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 0 clamp(12px, 3vw, 26px);
}
.ls-dfs__slot {
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 62px;
  padding: 8px 10px;
  border-radius: var(--ls-radius);
  border: 1px dashed var(--ls-line-strong);
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
  color: var(--ls-ink-faint);
  font-size: 11.5px;
}
.ls-dfs__slot.is-filled {
  border-style: solid;
  border-color: var(--ls-metal-face);
  background: color-mix(in srgb, var(--ls-metal-face) 12%, transparent);
  color: var(--ls-ink);
  cursor: pointer;
}
.ls-dfs__slot.is-filled strong { font-size: 12.5px; line-height: 1.2; }
.ls-dfs__slot.is-filled span { font-family: var(--ls-mono), monospace; font-size: 11px; color: var(--ls-metal-bright); }

/* ---- The cap meter ---- */

.ls-dfs__meter { padding: 12px clamp(12px, 3vw, 26px) 0; display: grid; gap: 4px; }
.ls-dfs__cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 14px;
  border-radius: var(--ls-radius);
  border: 1px solid var(--ls-line-strong);
  background: rgba(255, 255, 255, 0.03);
}
.ls-dfs__cap span { font: 700 10px/1 var(--ls-mono), monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ls-ink-faint); }
.ls-dfs__cap strong { font-family: var(--ls-display); font-size: 22px; color: var(--ls-metal-bright); font-variant-numeric: tabular-nums; }
/* Over the cap has to be unmissable — it is the one state that blocks entry. */
.ls-dfs__cap.is-over { border-color: #ff6b6b; background: rgba(255, 107, 107, 0.1); }
.ls-dfs__cap.is-over strong, .ls-dfs__cap.is-over span { color: #ff9a9a; }
.ls-dfs__meter small { font-size: 11.5px; color: var(--ls-ink-dim); padding-left: 2px; }

.ls-dfs__search {
  margin: 14px clamp(12px, 3vw, 26px) 0;
  width: calc(100% - 2 * clamp(12px, 3vw, 26px));
  padding: 10px 14px;
  border-radius: var(--ls-radius);
  border: 1px solid var(--ls-line-strong);
  background: rgba(0, 0, 0, 0.28);
  color: var(--ls-ink);
  font-size: 14px;
}

/* ---- The driver list ---- */

.ls-dfs__list { display: grid; gap: 8px; padding: 12px clamp(12px, 3vw, 26px) 0; }
.ls-dfs__runner {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: var(--ls-radius);
  border: 1px solid var(--ls-line);
  background: rgba(255, 255, 255, 0.025);
  color: var(--ls-ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms var(--ls-ease), background 140ms var(--ls-ease);
}
.ls-dfs__runner:hover:not(:disabled) { border-color: var(--ls-metal-face); }
.ls-dfs__runner.is-picked {
  border-color: var(--ls-metal-face);
  background: color-mix(in srgb, var(--ls-metal-face) 14%, transparent);
}
/* Priced out, not hidden: a board that drops people looks like it lost them. */
.ls-dfs__runner.is-priced-out { opacity: 0.4; cursor: not-allowed; }
.ls-dfs__salary {
  font-family: var(--ls-mono), monospace;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
  color: var(--ls-metal-bright);
}
.ls-dfs__submit { padding: 16px clamp(12px, 3vw, 26px) 0; display: grid; }

/* ---- Your entry, and the board ---- */

.ls-dfs__mine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  padding: 0 clamp(12px, 3vw, 26px);
}
.ls-dfs__pick {
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  border-radius: var(--ls-radius);
  border: 1px solid var(--ls-line-strong);
  background: rgba(255, 255, 255, 0.03);
}
.ls-dfs__pick strong { font-size: 13px; }
.ls-dfs__pick span { font-family: var(--ls-mono), monospace; font-size: 12px; color: var(--ls-metal-bright); }
.ls-dfs__won {
  margin: 14px clamp(12px, 3vw, 26px) 0;
  padding: 12px 16px;
  border-radius: var(--ls-radius);
  border: 1px solid #6fd68a;
  background: rgba(111, 214, 138, 0.1);
  color: #b8f0c6;
  font-size: 14px;
}

.ls-dfs__row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: var(--ls-radius);
  border: 1px solid var(--ls-line);
  background: rgba(255, 255, 255, 0.02);
}
.ls-dfs__row.is-paid { border-color: color-mix(in srgb, #6fd68a 50%, transparent); }
.ls-dfs__rank { font-family: var(--ls-display); font-size: 15px; color: var(--ls-ink-dim); }
.ls-dfs__score {
  text-align: right;
  font-family: var(--ls-mono), monospace;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
}
.ls-dfs__score small { display: block; font-size: 11.5px; font-weight: 600; color: #6fd68a; }

.ls-dfs__scoring { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; max-width: 42ch; }
.ls-dfs__scoring li { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--ls-ink-dim); }
.ls-dfs__scoring strong { font-family: var(--ls-mono), monospace; color: var(--ls-metal-bright); }

@media (max-width: 620px) {
  .ls-dfs__slots { grid-template-columns: repeat(3, 1fr); }
  .ls-dfs__runner, .ls-dfs__row { grid-template-columns: 40px 1fr auto; padding: 10px 12px; }
}

/* The deadline sits under the fee on its own line, so the prize pool keeps its
   place on the right of the contest card rather than being pushed below it. */
.ls-book__race small.ls-book__when { display: block; margin-top: 2px; }
.ls-book__lead { flex: 1 1 300px; min-width: 0; }
.ls-book__race > .ls-dfs__pool { flex: 0 0 auto; }

/* A section head with more than a count on its right: the count and whatever
   action goes with it travel together instead of being spread apart by the
   head's own space-between. */
.ls-section__actions { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }