/* ============================================================
   Apogee Hot 5 — classic slot cabinet styles
   ------------------------------------------------------------
   Cabinet-hero layout. The reels dominate the screen. Activity
   and Recent Wins live in a slide-in drawer accessible from the
   topbar icon. Bottom strip is LED info + compact controls.
   ============================================================ */

:root {
  --bg:           #140309;
  --bg-2:         #220712;
  --bg-3:         #2e0b17;
  --felt:         #0a0205;
  --accent:       #ff9130;
  --accent-2:     #ffd93b;
  --gold-1:       #fff4b0;
  --gold-2:       #ffcc33;
  --gold-3:       #a87100;
  --gold-4:       #3a1f00;
  --line:         rgba(255, 210, 120, 0.18);
  --text:         #fff0d6;
  --text-dim:     #c0a380;
  --danger:       #ff5a5f;
  --ok:           #5ad37a;
  --warn:         #ffb020;
  --led:          #a3ff6c;
  --led-glow:     rgba(100, 255, 100, 0.4);
  --radius:       14px;
  --shadow-1:     0 6px 18px rgba(0, 0, 0, 0.55);
  --font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  touch-action: manipulation;
  background:
    radial-gradient(ellipse 120% 60% at 50% 18%, #3a0a18 0%, #1a0408 50%, #080103 100%);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  overscroll-behavior: none;
}

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

/* --------------- Splash / loading screen --------------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 120% 60% at 50% 30%, #3a0a18 0%, #1a0408 50%, #080103 100%);
  transition: opacity 600ms ease, visibility 600ms ease;
}
.splash.dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px;
  text-align: center;
}
.splash-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.splash-logo strong {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 6px;
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}
.splash-logo span {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 6px;
  color: var(--accent);
  margin-top: 6px;
}
.splash-art {
  font-size: 64px;
  animation: splash-float 2.5s ease-in-out infinite;
  filter: drop-shadow(0 8px 20px rgba(255, 140, 40, 0.4));
}
@keyframes splash-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.05); }
}
.splash-bar {
  width: 220px;
  height: 6px;
  background: rgba(255, 210, 120, 0.15);
  border-radius: 3px;
  overflow: hidden;
}
.splash-progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 3px;
  transition: width 300ms ease;
  box-shadow: 0 0 8px rgba(255, 150, 40, 0.6);
}
.splash-status {
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 1px;
  min-height: 18px;
}
.splash-sub {
  font-size: 11px;
  color: rgba(255, 220, 150, 0.4);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* --------------- Topbar (redesigned casino-grade nav) --------------- */
.topbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background:
    linear-gradient(180deg,
      rgba(50, 16, 24, 0.95) 0%,
      rgba(22, 6, 12, 0.98) 100%);
  border-bottom: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
  z-index: 5;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 rgba(255, 220, 120, 0.25);
}
/* Gold gradient light-line at the bottom */
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(168, 113, 0, 0.5) 15%,
    rgba(255, 240, 180, 1) 50%,
    rgba(168, 113, 0, 0.5) 85%,
    transparent 100%);
  pointer-events: none;
}

/* Brand — icon + text, clickable back to landing page */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.brand-icon {
  font-size: 28px;
  filter: drop-shadow(0 2px 6px rgba(255, 140, 40, 0.5));
  animation: brand-float 3s ease-in-out infinite;
}
@keyframes brand-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-text strong {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 3px;
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.8));
}
.brand-text span {
  font-size: 10px;
  margin-top: 3px;
  color: var(--accent);
  letter-spacing: 4px;
  font-weight: 700;
}

/* Center: balance — the hero metric, always visible */
.topbar-center {
  display: flex;
  justify-content: center;
}
.topbar-bal-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 20px;
  background:
    linear-gradient(180deg, rgba(8, 2, 4, 0.95), rgba(18, 6, 10, 0.9));
  border: 2px solid rgba(255, 210, 120, 0.45);
  border-radius: 12px;
  box-shadow:
    inset 0 0 16px rgba(0, 0, 0, 0.9),
    inset 0 2px 0 rgba(255, 220, 120, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.5);
  min-width: 160px;
}
.topbar-bal-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.topbar-bal-value {
  font-size: 20px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--led);
  text-shadow:
    0 0 8px var(--led-glow),
    0 0 16px rgba(100, 255, 100, 0.35);
  white-space: nowrap;
  line-height: 1;
}

/* Right: icon buttons + build chip */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(60, 20, 30, 0.8), rgba(20, 6, 12, 0.9));
  border: 1.5px solid rgba(255, 210, 120, 0.4);
  color: var(--gold-1);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 80ms ease, background 120ms ease, box-shadow 120ms ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 120, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.4);
}
.icon-btn:hover {
  background: rgba(255, 220, 150, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 120, 0.25),
    0 3px 12px rgba(255, 180, 60, 0.3);
}
.icon-btn:active { transform: scale(0.92); }

/* --------------- Jackpot meter (4 tiers) --------------- */
.jackpot-bar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1fr 0.9fr;
  gap: 8px;
  padding: 10px 16px;
  background:
    linear-gradient(180deg, rgba(30, 8, 14, 0.95), rgba(10, 2, 6, 0.98));
  border-bottom: 1px solid rgba(255, 210, 120, 0.22);
  position: relative;
  z-index: 3;
}
.jp-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(10, 2, 6, 0.98), rgba(22, 6, 12, 0.95));
  border: 2px solid;
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.9),
    inset 0 2px 0 rgba(255, 255, 255, 0.08),
    0 4px 10px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.jp-tier::before {
  /* Slow sheen sweep across the pill */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 0%, transparent 45%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 55%, transparent 100%);
  animation: jp-sheen 4s linear infinite;
  pointer-events: none;
}
.jp-tier .jp-name {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.jp-tier .jp-value {
  font-size: 16px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 0 8px currentColor;
  line-height: 1.1;
}
/* Cosmic blue/purple MEGA */
.jp-mega  {
  border-color: #9f7dff;
  box-shadow:
    inset 0 0 14px rgba(120, 60, 220, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.12),
    0 4px 12px rgba(120, 60, 220, 0.4),
    0 0 18px rgba(159, 125, 255, 0.25);
}
.jp-mega .jp-name  { color: #c5a8ff; text-shadow: 0 0 6px rgba(159, 125, 255, 0.6); }
.jp-mega .jp-value { color: #e4d0ff; }

/* Gold MAJOR */
.jp-major {
  border-color: var(--gold-2);
  box-shadow:
    inset 0 0 14px rgba(255, 180, 0, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.12),
    0 4px 12px rgba(255, 180, 0, 0.35),
    0 0 18px rgba(255, 204, 51, 0.2);
}
.jp-major .jp-name  { color: var(--gold-1); }
.jp-major .jp-value { color: #fff4b0; }

/* Silver MINOR */
.jp-minor {
  border-color: #c8ced9;
  box-shadow:
    inset 0 0 14px rgba(200, 206, 217, 0.25),
    inset 0 2px 0 rgba(255, 255, 255, 0.12),
    0 4px 10px rgba(200, 206, 217, 0.3);
}
.jp-minor .jp-name  { color: #e4e9f2; }
.jp-minor .jp-value { color: #f4f7fd; }

/* Bronze MINI */
.jp-mini {
  border-color: #d48432;
  box-shadow:
    inset 0 0 14px rgba(212, 132, 50, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    0 4px 10px rgba(212, 132, 50, 0.3);
}
.jp-mini .jp-name  { color: #f0b06a; }
.jp-mini .jp-value { color: #ffd49a; }

/* Flash state when a tier hits */
.jp-tier.hit {
  animation: jp-hit-flash 1.8s ease-out;
}
@keyframes jp-hit-flash {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  20%      { transform: scale(1.12); filter: brightness(1.8); }
  40%      { transform: scale(1.05); filter: brightness(1.3); }
  60%      { transform: scale(1.08); filter: brightness(1.5); }
}
@keyframes jp-sheen {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* --------------- Stage (cabinet hero) --------------- */
.stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  min-height: 0;
  min-width: 0;
  position: relative;
}
.stage-inner {
  width: 100%;
  max-width: 640px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 0;
}
#pixi-root {
  flex: 0 1 auto;
  aspect-ratio: 528 / 324;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  border-radius: 18px;
  overflow: hidden;
  /* Layered gold cabinet frame */
  box-shadow:
    0 0 0 2px rgba(168, 113, 0, 0.9),
    0 0 0 4px rgba(58, 31, 0, 0.95),
    0 0 0 6px rgba(255, 204, 51, 0.75),
    0 0 0 8px rgba(58, 31, 0, 0.95),
    inset 0 0 30px rgba(0, 0, 0, 0.75),
    inset 0 0 60px rgba(255, 120, 0, 0.08),
    0 16px 40px rgba(0, 0, 0, 0.7),
    0 0 60px rgba(255, 140, 40, 0.15);
  margin: 0 auto;
  /* Subtle breath animation when idle */
  animation: cabinet-breathe 5s ease-in-out infinite;
}
@keyframes cabinet-breathe {
  0%, 100% { box-shadow:
    0 0 0 2px rgba(168, 113, 0, 0.9),
    0 0 0 4px rgba(58, 31, 0, 0.95),
    0 0 0 6px rgba(255, 204, 51, 0.75),
    0 0 0 8px rgba(58, 31, 0, 0.95),
    inset 0 0 30px rgba(0, 0, 0, 0.75),
    inset 0 0 60px rgba(255, 120, 0, 0.08),
    0 16px 40px rgba(0, 0, 0, 0.7),
    0 0 60px rgba(255, 140, 40, 0.15); }
  50%      { box-shadow:
    0 0 0 2px rgba(168, 113, 0, 0.9),
    0 0 0 4px rgba(58, 31, 0, 0.95),
    0 0 0 6px rgba(255, 220, 90, 0.95),
    0 0 0 8px rgba(58, 31, 0, 0.95),
    inset 0 0 30px rgba(0, 0, 0, 0.75),
    inset 0 0 60px rgba(255, 120, 0, 0.12),
    0 16px 40px rgba(0, 0, 0, 0.7),
    0 0 80px rgba(255, 170, 60, 0.3); }
}
/* Cabinet aura — kicks up during wins via .winning class */
#pixi-root.winning {
  animation: cabinet-win-aura 1.6s ease-out;
}
@keyframes cabinet-win-aura {
  0%   { box-shadow:
    0 0 0 2px rgba(168, 113, 0, 0.9),
    0 0 0 4px rgba(58, 31, 0, 0.95),
    0 0 0 6px rgba(255, 204, 51, 0.75),
    0 0 0 8px rgba(58, 31, 0, 0.95),
    inset 0 0 30px rgba(0, 0, 0, 0.75),
    0 16px 40px rgba(0, 0, 0, 0.7),
    0 0 60px rgba(255, 140, 40, 0.2); }
  30%  { box-shadow:
    0 0 0 3px rgba(255, 240, 180, 1),
    0 0 0 5px rgba(255, 150, 40, 1),
    0 0 0 7px rgba(255, 240, 180, 1),
    0 0 0 9px rgba(255, 150, 40, 0.8),
    inset 0 0 40px rgba(255, 200, 80, 0.3),
    0 16px 40px rgba(0, 0, 0, 0.7),
    0 0 120px rgba(255, 220, 90, 0.8); }
  100% { box-shadow:
    0 0 0 2px rgba(168, 113, 0, 0.9),
    0 0 0 4px rgba(58, 31, 0, 0.95),
    0 0 0 6px rgba(255, 204, 51, 0.75),
    0 0 0 8px rgba(58, 31, 0, 0.95),
    inset 0 0 30px rgba(0, 0, 0, 0.75),
    0 16px 40px rgba(0, 0, 0, 0.7),
    0 0 60px rgba(255, 140, 40, 0.2); }
}
#pixi-root canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
#pixi-fallback {
  color: var(--text-dim);
  text-align: center;
  padding: 24px;
}

.win-banner {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(0.9);
  padding: 14px 26px;
  background: radial-gradient(ellipse at center, rgba(40, 10, 0, 0.94), rgba(10, 2, 0, 0.85));
  border: 2px solid var(--accent);
  border-radius: 14px;
  font-size: 24px;
  font-weight: 900;
  color: var(--accent-2);
  pointer-events: none;
  text-align: center;
  line-height: 1.2;
  white-space: pre-line;
  letter-spacing: 1px;
  opacity: 0;
  transition: opacity 200ms ease, transform 240ms cubic-bezier(0.2, 1.6, 0.4, 1);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 180, 40, 0.4);
  box-shadow: 0 10px 28px rgba(255, 120, 0, 0.4), 0 0 0 1px rgba(255, 210, 80, 0.2) inset;
  z-index: 5;
}
.win-banner.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.win-banner.tier-big {
  border-color: #fff4b0;
  color: #fff;
  font-size: 32px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), 0 0 24px rgba(255, 220, 90, 1);
  box-shadow: 0 12px 40px rgba(255, 200, 0, 0.6), 0 0 0 2px rgba(255, 230, 120, 0.4) inset;
}
.win-banner.ldw {
  border-color: rgba(255, 220, 150, 0.35);
  color: var(--text-dim);
  background: rgba(20, 10, 20, 0.8);
  font-size: 14px;
  padding: 8px 16px;
  text-shadow: none;
  box-shadow: none;
}
/* Jackpot banner — takes over the screen with a cosmic purple→gold
   gradient, extra-large text, and a shimmer sweep. Stacked on top of
   .tier-big for position/size. */
.win-banner.jackpot {
  font-size: 40px;
  padding: 20px 34px;
  border-width: 3px;
  background:
    radial-gradient(ellipse at center,
      rgba(60, 20, 100, 0.95),
      rgba(20, 5, 40, 0.95));
  border-image: linear-gradient(135deg,
    #fff4b0 0%, #ffcc33 25%, #9f7dff 50%, #ffcc33 75%, #fff4b0 100%) 1;
  color: #fff8d0;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.9),
    0 0 18px rgba(255, 220, 90, 1),
    0 0 36px rgba(159, 125, 255, 0.9);
  box-shadow:
    0 14px 44px rgba(159, 125, 255, 0.7),
    0 0 60px rgba(255, 200, 60, 0.5),
    0 0 0 2px rgba(255, 255, 255, 0.25) inset;
  animation: jackpot-shake 0.5s ease-in-out 0s 3;
}
@keyframes jackpot-shake {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  25%      { transform: translate(-52%, -50%) scale(1.05); }
  50%      { transform: translate(-50%, -52%) scale(1.08); }
  75%      { transform: translate(-48%, -50%) scale(1.05); }
}
/* --------------- Jackpot scene (full-screen card takeover) --------------- */
.jp-scene {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
.jp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 400ms ease;
}
.jp-backdrop.in {
  background: rgba(10, 2, 6, 0.88);
}
/* CSS gold coin rain — 30 falling gold circles, no JS needed */
.jp-backdrop.in::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 6px, #ffd93b 60%, transparent 100%),
    radial-gradient(circle 5px, #ffcc33 60%, transparent 100%),
    radial-gradient(circle 4px, #ffe066 60%, transparent 100%),
    radial-gradient(circle 7px, #ffd93b 60%, transparent 100%),
    radial-gradient(circle 5px, #ffcc33 60%, transparent 100%),
    radial-gradient(circle 6px, #ffe066 60%, transparent 100%),
    radial-gradient(circle 4px, #ffd93b 60%, transparent 100%),
    radial-gradient(circle 5px, #ffcc33 60%, transparent 100%),
    radial-gradient(circle 7px, #ffe066 60%, transparent 100%),
    radial-gradient(circle 6px, #ffd93b 60%, transparent 100%),
    radial-gradient(circle 4px, #ffcc33 60%, transparent 100%),
    radial-gradient(circle 5px, #ffe066 60%, transparent 100%),
    radial-gradient(circle 6px, #ffd93b 60%, transparent 100%),
    radial-gradient(circle 5px, #ffcc33 60%, transparent 100%),
    radial-gradient(circle 7px, #ffe066 60%, transparent 100%);
  background-size: 12px 12px;
  background-position:
     5% -10px,  12% -40px,  20% -20px, 28% -60px, 35% -30px,
    42% -50px,  50% -15px,  58% -45px, 65% -25px, 72% -55px,
    78% -35px,  85% -10px,  90% -50px, 95% -20px, 48% -70px;
  background-repeat: repeat-y;
  animation: jp-gold-rain 2.5s linear infinite;
  opacity: 0.7;
  pointer-events: none;
}
@keyframes jp-gold-rain {
  0%   { background-position-y: -10px, -40px, -20px, -60px, -30px, -50px, -15px, -45px, -25px, -55px, -35px, -10px, -50px, -20px, -70px; }
  100% { background-position-y: 110vh, 110vh, 110vh, 110vh, 110vh, 110vh, 110vh, 110vh, 110vh, 110vh, 110vh, 110vh, 110vh, 110vh, 110vh; }
}
/* Sparkle shimmer across the backdrop */
.jp-backdrop.in::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 2px at 10% 20%, #fff 0%, transparent 100%),
    radial-gradient(circle 2px at 30% 40%, #ffe066 0%, transparent 100%),
    radial-gradient(circle 3px at 50% 15%, #fff 0%, transparent 100%),
    radial-gradient(circle 2px at 70% 55%, #ffe066 0%, transparent 100%),
    radial-gradient(circle 2px at 85% 30%, #fff 0%, transparent 100%),
    radial-gradient(circle 3px at 15% 70%, #ffe066 0%, transparent 100%),
    radial-gradient(circle 2px at 60% 80%, #fff 0%, transparent 100%),
    radial-gradient(circle 2px at 90% 65%, #ffe066 0%, transparent 100%);
  background-size: 100% 100%;
  animation: jp-sparkle 1.8s ease-in-out infinite alternate;
  opacity: 0.6;
  pointer-events: none;
}
@keyframes jp-sparkle {
  0%   { opacity: 0.3; }
  100% { opacity: 0.8; }
}
.jp-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 44px 56px 40px;
  border: 3px solid;
  border-radius: 28px;
  min-width: 340px;
  max-width: 440px;
  text-align: center;
  transform: scale(0.4) translateY(60px);
  opacity: 0;
  transition: transform 600ms cubic-bezier(0.15, 1.6, 0.35, 1), opacity 350ms ease;
  /* Inner shimmer */
  overflow: hidden;
}
.jp-card::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(255, 220, 80, 0.12) 30deg, transparent 60deg,
    transparent 120deg, rgba(255, 220, 80, 0.08) 150deg, transparent 180deg,
    transparent 240deg, rgba(255, 220, 80, 0.12) 270deg, transparent 300deg);
  animation: jp-card-shimmer 6s linear infinite;
  pointer-events: none;
}
@keyframes jp-card-shimmer {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.jp-card.in {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.jp-card-icon {
  font-size: 72px;
  margin-bottom: 12px;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
  animation: jp-icon-bounce 1.5s ease-in-out infinite;
}
@keyframes jp-icon-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-10px) scale(1.08); }
}
.jp-card-tier {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 16px;
  line-height: 1.1;
}
.jp-card-amount {
  font-size: 42px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--led);
  text-shadow:
    0 0 12px var(--led-glow),
    0 0 30px rgba(100, 255, 100, 0.5);
  line-height: 1;
  margin-bottom: 14px;
  min-width: 200px;
}
.jp-card-sub {
  font-size: 14px;
  color: var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
}
/* Mobile tightening */
@media (max-width: 480px) {
  .jp-card {
    padding: 28px 30px 24px;
    min-width: 260px;
    max-width: 340px;
  }
  .jp-card-icon { font-size: 56px; }
  .jp-card-tier { font-size: 22px; letter-spacing: 3px; }
  .jp-card-amount { font-size: 32px; }
  .jp-card-sub { font-size: 12px; }
}

.status-bar {
  flex: 0 0 auto;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  padding: 3px;
  min-height: 18px;
}
.status-bar.err { color: var(--danger); }

/* --------------- Live strip (ticker + winners table) --------------- */
.live-strip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  background:
    linear-gradient(180deg, rgba(30, 8, 16, 0.96), rgba(14, 3, 8, 0.98));
  border-top: 1px solid rgba(255, 210, 120, 0.3);
  border-bottom: 1px solid rgba(255, 210, 120, 0.22);
}

/* --- Live winners table: compact 3-row structured view --- */
.live-winners {
  display: flex;
  align-items: stretch;
  min-height: 44px;
  padding: 0;
  border-top: 1px solid rgba(255, 210, 120, 0.18);
}
.winners-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 14px;
  background:
    linear-gradient(180deg, rgba(255, 180, 40, 0.22), rgba(120, 40, 10, 0.35));
  border-right: 1px solid rgba(255, 210, 120, 0.3);
}
.winners-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 900;
  color: var(--accent-2);
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(255, 220, 60, 0.5);
  white-space: nowrap;
}
.winners-cols {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}
.winner-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.4);
  border-right: 1px solid rgba(255, 210, 120, 0.1);
  min-width: 0;
  animation: winner-fade-in 0.5s ease-out;
}
.winner-card:last-child { border-right: none; }
.winner-card .wc-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 700;
}
.winner-card .wc-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.winner-card .wc-mult {
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
.winner-card .wc-bot {
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--led);
  text-shadow: 0 0 6px var(--led-glow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.winner-card.huge .wc-bot {
  color: var(--accent-2);
  text-shadow: 0 0 8px rgba(255, 220, 60, 0.7);
}
@keyframes winner-fade-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* --------------- Live ticker (other players' activity, continuous marquee) --------------- */
.live-ticker {
  display: flex;
  align-items: stretch;
  padding: 0;
  min-height: 34px;
  overflow: hidden;
}
.ticker-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background:
    linear-gradient(180deg, rgba(255, 80, 40, 0.22), rgba(120, 20, 10, 0.3));
  border-right: 1px solid rgba(255, 210, 120, 0.3);
}
.ticker-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5a5f;
  box-shadow: 0 0 8px rgba(255, 90, 95, 0.8);
  animation: live-pulse 1.5s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}
.ticker-label {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 900;
  color: var(--accent-2);
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(255, 220, 60, 0.5);
}
.ticker-badge {
  font-size: 8px;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(255, 120, 40, 0.35);
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
}
.ticker-viewport {
  flex: 1 1 0;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg,
    transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.ticker-marquee {
  display: flex;
  gap: 32px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 0 16px;
  height: 100%;
  align-items: center;
  animation: ticker-scroll 60s linear infinite;
  will-change: transform;
}
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-marquee .ticker-item {
  flex: 0 0 auto;
  color: var(--text-dim);
  white-space: nowrap;
}
.ticker-marquee .ticker-item strong {
  color: var(--text);
  margin-right: 6px;
  font-weight: 700;
}
.ticker-marquee .ticker-item.win strong + span {
  color: var(--led);
  font-weight: 700;
  text-shadow: 0 0 4px var(--led-glow);
}
.ticker-marquee .ticker-item.huge strong + span {
  color: var(--accent-2);
  font-weight: 900;
  text-shadow: 0 0 8px rgba(255, 220, 60, 0.8);
}
.ticker-marquee .ticker-item.huge::before {
  content: "🔥";
  margin-right: 3px;
}
.live-ticker:hover .ticker-marquee { animation-play-state: paused; }

/* --------------- LED info strip --------------- */
.led-strip {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px 18px 10px;
  background:
    linear-gradient(180deg, rgba(18, 4, 10, 0.95), rgba(30, 8, 16, 0.95));
}
.led-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 14px;
  background:
    linear-gradient(180deg, rgba(8, 2, 4, 0.98), rgba(22, 6, 14, 0.95));
  border: 1.5px solid rgba(255, 210, 120, 0.35);
  border-radius: 10px;
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.95),
    inset 0 2px 0 rgba(255, 220, 120, 0.12),
    0 3px 6px rgba(0, 0, 0, 0.4);
  min-width: 0;
}
.led-cell label {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--accent);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 5px;
  opacity: 0.9;
}
.led-cell span {
  font-size: 18px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--led);
  text-shadow: 0 0 8px var(--led-glow), 0 0 16px rgba(100, 255, 100, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.1;
}
.led-win span { color: var(--accent-2); text-shadow: 0 0 8px rgba(255, 220, 60, 0.6); }
.led-session span.neg { color: var(--danger); text-shadow: 0 0 8px rgba(255, 90, 90, 0.5); }
.led-session span.pos { color: var(--led); }

/* --------------- Controls --------------- */
.controls {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  padding: 22px 28px 28px;
  align-items: center;
  background:
    linear-gradient(0deg, rgba(60, 20, 30, 0.9) 20%, rgba(20, 5, 12, 0));
  border-top: 1px solid rgba(255, 210, 120, 0.2);
}

.bet-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
}
.bet-step {
  /* Hexagonal gold-chrome bet stepper with embossed glyph + shimmer sweep.
     Uses clip-path for the hex shape, a conic-gradient pseudo for chrome,
     and a ::after shimmer sweep on hover/tap. */
  position: relative;
  width: 56px;
  height: 56px;
  border: none;
  background: transparent;
  color: var(--gold-1);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  isolation: isolate;
  transition: transform 120ms cubic-bezier(0.2, 1.6, 0.4, 1);
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(255, 220, 120, 0.5);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7));
}
.bet-step::before {
  /* Metallic chrome body via conic gradient */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    conic-gradient(from 210deg,
      #ffe066 0%, #a87100 15%,
      #ffe066 30%, #3a1f00 45%,
      #ffcc33 60%, #a87100 75%,
      #fff4b0 90%, #ffe066 100%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.bet-step::after {
  /* Inner dark core that holds the glyph, plus a subtle radial highlight */
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  background:
    radial-gradient(circle at 35% 28%, #8a2a10 0%, #3a0a04 50%, #1a0404 100%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow: inset 0 4px 10px rgba(255, 220, 120, 0.3);
}
.bet-step:hover { transform: scale(1.04) rotate(2deg); }
.bet-step:active {
  transform: scale(0.88) rotate(-2deg);
  transition-duration: 60ms;
}
.bet-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(8, 2, 6, 0.98), rgba(18, 6, 12, 0.95));
  border: 2px solid rgba(255, 210, 120, 0.5);
  border-radius: 12px;
  padding: 10px 20px;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  min-width: 104px;
  text-align: center;
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 220, 120, 0.18),
    0 3px 6px rgba(0, 0, 0, 0.45);
}
.bet-btn .bet-label {
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 2px;
  font-weight: 800;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.bet-btn #bet-amount {
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--led);
  text-shadow: 0 0 8px var(--led-glow), 0 0 16px rgba(100, 255, 100, 0.4);
  line-height: 1.05;
}

.spin-btn {
  /* Ornate cabinet SPIN button:
     - Inner red-gold core
     - Triple chrome-gold rings (fake bezel via box-shadow)
     - ::before: slow rotating gold arcs (conic-gradient clipped to a ring)
     - ::after: radial glow that intensifies when enabled
     - Strong drop-shadow + outer halo */
  position: relative;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%,
      #ffe47a 0%, #ff9130 22%,
      #d43000 50%, #7a0a00 80%, #2a0000 100%);
  border: none;
  color: #fff4c6;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 3px;
  cursor: pointer;
  font-family: inherit;
  justify-self: center;
  isolation: isolate;
  overflow: visible;
  box-shadow:
    /* Triple chrome-gold rings */
    0 0 0 4px rgba(58, 31, 0, 0.98),
    0 0 0 7px rgba(255, 224, 102, 0.95),
    0 0 0 10px rgba(168, 113, 0, 0.98),
    0 0 0 12px rgba(58, 31, 0, 0.98),
    /* Outer glow */
    0 0 32px rgba(255, 150, 30, 0.5),
    0 22px 44px rgba(220, 60, 0, 0.65),
    /* Inner highlight + shadow */
    inset 0 -14px 26px rgba(0, 0, 0, 0.5),
    inset 0 8px 18px rgba(255, 240, 180, 0.5);
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.85),
    0 0 14px rgba(255, 200, 80, 0.75);
  transition: transform 100ms ease, filter 120ms ease;
}
/* Rotating gold-arc halo just outside the button rings */
.spin-btn::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,  rgba(255, 220, 80, 0.85) 30deg, transparent 60deg,
    transparent 120deg, rgba(255, 220, 80, 0.6)  150deg, transparent 180deg,
    transparent 240deg, rgba(255, 220, 80, 0.75) 270deg, transparent 300deg);
  filter: blur(6px);
  animation: spin-halo 4s linear infinite;
  z-index: -1;
  pointer-events: none;
  opacity: 0.85;
}
/* Inner sunburst rays */
.spin-btn::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: conic-gradient(
    from 45deg,
    rgba(255, 255, 255, 0.12) 0deg, transparent 30deg,
    rgba(255, 255, 255, 0.12) 60deg, transparent 90deg,
    rgba(255, 255, 255, 0.12) 120deg, transparent 150deg,
    rgba(255, 255, 255, 0.12) 180deg, transparent 210deg,
    rgba(255, 255, 255, 0.12) 240deg, transparent 270deg,
    rgba(255, 255, 255, 0.12) 300deg, transparent 330deg);
  animation: spin-halo 8s linear infinite reverse;
  pointer-events: none;
  mix-blend-mode: overlay;
}
@keyframes spin-halo {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spin-btn:active:not(:disabled) {
  transform: translateY(3px) scale(0.97);
}
.spin-btn:disabled {
  filter: grayscale(0.55) brightness(0.5) saturate(0.5);
  cursor: not-allowed;
}
.spin-btn:disabled::before { animation-play-state: paused; opacity: 0.3; }
.spin-btn:disabled::after  { animation-play-state: paused; }
.spin-btn .spin-label { pointer-events: none; }
.spin-btn:not(:disabled) {
  animation: spin-idle 2.6s ease-in-out infinite;
}
@keyframes spin-idle {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

.aux-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-self: end;
  align-items: stretch;
}
.aux-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background:
    linear-gradient(180deg, rgba(60, 20, 30, 0.9), rgba(20, 4, 10, 0.95));
  border: 2px solid rgba(255, 210, 120, 0.45);
  color: var(--gold-1);
  border-radius: 12px;
  padding: 12px 18px;
  min-width: 104px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 120, 0.22),
    0 5px 12px rgba(0, 0, 0, 0.55);
  transition: transform 80ms ease;
}
.aux-btn .aux-icon { font-size: 15px; }
.aux-btn .aux-label { font-size: 11px; }
.aux-btn[hidden] { display: none !important; }
.aux-btn:active { transform: scale(0.96); }
.aux-btn .aux-icon { font-size: 13px; }
.aux-btn .aux-label { font-size: 10px; }
.aux-btn.stop-btn {
  background: linear-gradient(180deg, #c41730 0%, #5a0810 100%);
  border-color: #ffb0b0;
  color: #fff;
  animation: stop-pulse 1.2s ease-in-out infinite;
}
@keyframes stop-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 12px rgba(196, 23, 48, 0.5); }
  50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 22px rgba(196, 23, 48, 1); }
}

/* --------------- Side drawer (stats) --------------- */
/* <dialog> is hidden by default until showModal() adds the open attr.
   Only apply our layout styles to the OPEN state so the drawer doesn't
   appear on page load. */
.side-drawer {
  position: fixed;
  top: 0; right: 0;
  margin: 0;
  height: 100dvh;
  width: 340px;
  max-width: 90vw;
  background: linear-gradient(180deg, #1a0610 0%, #0a0204 100%);
  border: none;
  border-left: 2px solid rgba(255, 210, 120, 0.5);
  padding: 0;
  color: var(--text);
  box-shadow: -20px 0 40px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.side-drawer[open] {
  display: flex;
  flex-direction: column;
}
.side-drawer::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}
.side-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 210, 120, 0.2);
}
.side-drawer-header h2 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--gold-1);
  text-transform: uppercase;
}
.drawer-x {
  background: transparent;
  border: 1px solid rgba(255, 210, 120, 0.3);
  color: var(--gold-1);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.panel-section {
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 210, 120, 0.12);
  min-height: 0;
}
.panel-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.panel-section h3 {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold-1);
}
.panel-badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 120, 40, 0.2);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.panel-activity { flex: 1 1 auto; overflow: hidden; }
.activity-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  font-size: 12px;
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
}
.activity-feed li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  padding: 6px 4px;
  border-bottom: 1px dashed rgba(255, 210, 120, 0.08);
  align-items: center;
  animation: fade-in 0.35s ease-out;
}
.activity-feed .who {
  color: var(--text-dim);
  font-weight: 700;
}
.activity-feed .amt {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}
.activity-feed .amt.win  { color: var(--led); }
.activity-feed .amt.bet  { color: var(--text); }
.activity-feed .amt.huge { color: var(--accent-2); text-shadow: 0 0 6px rgba(255, 220, 60, 0.6); }

.panel-wins {
  flex: 0 0 auto;
  max-height: 45%;
}
.wins-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  display: block;
  overflow-y: auto;
  max-height: 220px;
}
.wins-table thead {
  position: sticky;
  top: 0;
  background: rgba(10, 2, 6, 0.98);
}
.wins-table th {
  text-align: left;
  padding: 4px 6px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  font-weight: 800;
  border-bottom: 1px solid rgba(255, 210, 120, 0.18);
}
.wins-table th.num, .wins-table td.num { text-align: right; }
.wins-table td {
  padding: 5px 6px;
  color: var(--text);
  border-bottom: 1px dashed rgba(255, 210, 120, 0.06);
}
.wins-table td.win { color: var(--led); font-weight: 700; }
.wins-table td.huge { color: var(--accent-2); font-weight: 800; text-shadow: 0 0 4px rgba(255, 220, 60, 0.6); }
.wins-table tr.empty td {
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  padding: 18px 6px;
}
.wins-table tr.flash { animation: wins-flash 1s ease-out; }
@keyframes wins-flash {
  0%   { background: rgba(255, 220, 60, 0.4); }
  100% { background: transparent; }
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------- Modal drawers (auto-spin, bet, paytable, settings) --------------- */
.drawer {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  padding: 20px 22px 28px;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  background: var(--bg-2);
  color: var(--text);
  max-width: 560px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.6);
}
.drawer::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}
.drawer h2 {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--accent-2);
}
.drawer h3 {
  margin: 18px 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
}
.drawer-sub {
  margin: 0 0 12px;
  color: var(--text-dim);
  font-size: 13px;
}
.drawer-close {
  margin-top: 16px;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #1a0a0e;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
.drawer-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.drawer-row > * {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-family: inherit;
  cursor: pointer;
  font-weight: 700;
}
.drawer-row #rc-continue,
.drawer-row #auto-start { background: var(--accent); color: #1a0a0e; }
.ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: inherit;
  cursor: pointer;
}
.drawer-note {
  margin: 6px 0 0;
  color: var(--text-dim);
  font-size: 12px;
}
.drawer-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
}
.drawer-list strong { color: var(--text); }
.drawer-link {
  display: block;
  margin-top: 10px;
  color: var(--accent);
  font-size: 12px;
  text-decoration: none;
  border-bottom: 1px dashed var(--accent);
  width: fit-content;
}
.mono {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.3);
  padding: 8px;
  border-radius: 6px;
  word-break: break-all;
  white-space: pre-wrap;
  color: var(--text-dim);
  margin: 4px 0 0;
  max-height: 140px;
  overflow: auto;
}
.bet-ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.bet-chip {
  padding: 12px 8px;
  background: rgba(255, 220, 150, 0.06);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
.bet-chip.active {
  background: rgba(255, 150, 40, 0.25);
  border-color: var(--accent);
  color: var(--accent-2);
}
.paytable-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 6px 12px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.paytable-grid .h { color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.paytable-grid .sym { font-weight: 700; color: var(--accent-2); }
.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
}
.toggle input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ============================================================
   MOBILE LAYOUT (portrait phones, ≤780px wide)
   ------------------------------------------------------------
   Placement principles (derived from mobile slot UX best practice):
   - Topbar:  ~44pt tall — brand left, icon buttons right
   - Cabinet: fills 55–60% of usable height, the visual hero
   - LED strip: compact band ~44pt — BET · WIN · BALANCE in LED green
   - Controls: bottom cluster with SPIN (88pt) in the thumb zone
   - BET −/+ left of SPIN, AUTO right — reachable by either thumb
   - Safe-area insets respected for iPhone notch + home bar
   - Tap targets ≥44pt (Apple HIG)
   ============================================================ */
@media (max-width: 780px) {
  body {
    /* Respect notch + home-bar via safe-area insets */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* --- Topbar — compact on mobile --- */
  .topbar {
    padding: 6px 10px;
    gap: 8px;
    grid-template-columns: auto 1fr auto;
  }
  .brand-icon { font-size: 22px; }
  .brand-text strong { font-size: 14px; letter-spacing: 2px; }
  .brand-text span { font-size: 8px; letter-spacing: 2px; margin-top: 2px; }
  .brand { gap: 6px; }
  .topbar-bal-wrap {
    padding: 4px 12px;
    min-width: 110px;
    border-width: 1.5px;
    border-radius: 8px;
  }
  .topbar-bal-label { font-size: 7px; letter-spacing: 2px; margin-bottom: 2px; }
  .topbar-bal-value { font-size: 15px; }
  .topbar-actions { gap: 5px; }
  .icon-btn {
    width: 36px; height: 36px;
    font-size: 15px;
    border-radius: 10px;
  }

  /* --- Jackpot bar compact on mobile --- */
  .jackpot-bar { padding: 6px 8px; gap: 5px; }
  .jp-tier { padding: 4px 4px; border-width: 1.5px; border-radius: 8px; }
  .jp-tier .jp-name { font-size: 8px; letter-spacing: 1.2px; margin-bottom: 1px; }
  .jp-tier .jp-value { font-size: 12px; }

  /* --- Stage: cabinet-hero, fills remaining space --- */
  .stage {
    flex: 1 1 auto;
    padding: 8px 6px 4px;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .stage-inner {
    gap: 4px;
    max-width: 100%;
    width: 100%;
    height: 100%;
    justify-content: center;
  }
  #pixi-root {
    /* The Pixi stage is now sized via JS (IS_MOBILE layout with
       multiplier-reel-on-top) so it's already near-portrait. Let the
       container hug the canvas via its natural aspect ratio by
       removing the desktop lock; fitCanvas() handles the scale. */
    aspect-ratio: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    flex: 0 1 auto;
    /* Thinner gold frame on mobile so more of the screen is reels */
    box-shadow:
      0 0 0 1.5px rgba(168, 113, 0, 0.95),
      0 0 0 3px rgba(58, 31, 0, 0.95),
      0 0 0 4.5px rgba(255, 204, 51, 0.9),
      0 0 0 6px rgba(58, 31, 0, 0.95),
      inset 0 0 20px rgba(0, 0, 0, 0.75),
      0 10px 25px rgba(0, 0, 0, 0.7),
      0 0 40px rgba(255, 140, 40, 0.18);
  }
  #pixi-root::before,
  #pixi-root::after {
    width: 18px;
    height: 18px;
  }
  .status-bar {
    font-size: 11px;
    min-height: 14px;
    padding: 2px 4px;
  }

  /* --- Live strip: ticker marquee + winners table compact --- */
  .live-ticker { min-height: 30px; }
  .ticker-head { padding: 0 10px; gap: 5px; }
  .ticker-label { font-size: 9px; letter-spacing: 1.2px; }
  .ticker-badge { font-size: 7px; padding: 1px 4px; }
  .ticker-pulse { width: 6px; height: 6px; }
  .ticker-marquee { font-size: 11px; gap: 22px; padding: 0 12px; }
  .live-winners { min-height: 40px; }
  .winners-head { padding: 0 10px; }
  .winners-label { font-size: 9px; letter-spacing: 1.2px; }
  .winner-card { padding: 4px 8px; }
  .winner-card .wc-top { font-size: 9px; gap: 4px; }
  .winner-card .wc-mult { font-size: 9px; }
  .winner-card .wc-bot { font-size: 12px; }

  /* --- LED strip: chunkier cells, more breathing room --- */
  .led-strip {
    padding: 10px 12px 8px;
    gap: 6px;
    min-height: 58px;
  }
  .led-cell {
    padding: 6px 8px;
    min-width: 0;
    border-width: 1.5px;
    border-radius: 8px;
  }
  .led-cell label {
    font-size: 8px;
    letter-spacing: 1.2px;
    margin-bottom: 3px;
  }
  .led-cell span { font-size: 15px; }

  /* --- Controls: dedicated bottom cluster with proper rhythm ---
     Two-row layout on mobile: BET -/+ and AUX stay on sides,
     SPIN is center-prominent. Padding is generous so taps feel
     deliberate. env(safe-area-inset-bottom) handles iPhone home bar. */
  .controls {
    padding: 16px 16px max(18px, env(safe-area-inset-bottom)) 16px;
    gap: 14px;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .bet-controls {
    justify-self: start;
    gap: 8px;
  }
  .bet-step {
    width: 48px; height: 48px;
    font-size: 24px;
    border-width: 2px;
  }
  .bet-btn {
    min-width: 86px;
    padding: 8px 14px;
    border-width: 2px;
    border-radius: 10px;
  }
  .bet-btn .bet-label { font-size: 8px; }
  .bet-btn #bet-amount { font-size: 18px; }
  .spin-btn {
    /* Thumb-zone hero: 96pt on mobile — big enough to dominate,
       not so big that it crushes the bet controls. */
    width: 96px;
    height: 96px;
    font-size: 19px;
    letter-spacing: 2px;
    justify-self: center;
    box-shadow:
      0 0 0 2px rgba(58, 31, 0, 0.95),
      0 0 0 4px rgba(255, 204, 51, 0.95),
      0 0 0 6px rgba(58, 31, 0, 0.95),
      0 12px 26px rgba(220, 60, 0, 0.6),
      inset 0 -8px 14px rgba(0, 0, 0, 0.4),
      inset 0 5px 10px rgba(255, 240, 180, 0.4);
  }
  .aux-col {
    justify-self: end;
    gap: 8px;
  }
  .aux-btn {
    min-width: 72px;
    padding: 9px 12px;
    font-size: 10px;
    letter-spacing: 1.2px;
    border-width: 1.5px;
    border-radius: 10px;
  }
  .aux-btn .aux-icon { font-size: 12px; }
  .aux-btn .aux-label { font-size: 10px; }

  .side-drawer { width: 100vw; max-width: 100vw; }
}

/* --- Extra-small phones (<380px, e.g. iPhone SE 1st gen) --- */
@media (max-width: 380px) {
  .led-session { display: none; }
  .led-strip { grid-template-columns: repeat(3, 1fr); }
  .brand-text span { display: none; }
  .brand-icon { font-size: 18px; }
  .topbar { padding: 4px 8px; gap: 6px; }
  .topbar-bal-wrap { padding: 3px 8px; min-width: 90px; }
  .topbar-bal-value { font-size: 13px; }
  .icon-btn { width: 32px; height: 32px; font-size: 13px; }
  .spin-btn { width: 78px; height: 78px; font-size: 16px; }
  .bet-step { width: 40px; height: 40px; font-size: 20px; }
  .bet-btn { min-width: 58px; }
  .bet-btn #bet-amount { font-size: 13px; }
  .aux-btn .aux-label { display: none; }
  .aux-btn {
    min-width: 44px;
    padding: 6px;
  }
  .aux-btn .aux-icon { font-size: 14px; }
}

/* Build-version chip in topbar */
.demo-badge[hidden] { display: none; }
.demo-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 3px 10px;
  margin-left: 4px;
  border-radius: 8px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  animation: demo-pulse 2s ease-in-out infinite;
}
@keyframes demo-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.build-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 3px 8px;
  margin-left: 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #8a90ad;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  user-select: text;
  white-space: nowrap;
  overflow: visible;
  height: 24px;
}
/* Hide build chip on small screens where it doesn't fit */
@media (max-width: 480px) {
  .build-chip { display: none; }
}