/* ============================================================
   MANYANGA BETS — "cosmic cabinet" dark TV theme
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink: #e8eeff;
  --ink-soft: #b9c6ef;
  --ink-faint: #7f97d8;
  --primary: #5b5ff1;
  --green: #17c98b;
  --orange: #ff8a3d;
  --red: #ef3d63;
  --gold: #ffd23f;
  --panel: rgba(11, 22, 56, 0.88);
  --line: rgba(120, 160, 255, 0.22);
  --r: 14px;
  --font: 'Outfit', system-ui, 'Segoe UI', Roboto, sans-serif;
  --disp: 'Baloo 2', 'Outfit', system-ui, sans-serif;
}

html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1100px 600px at 12% -8%, #12275e 0%, transparent 60%),
    radial-gradient(900px 560px at 88% 0%, #0e2050 0%, transparent 55%),
    linear-gradient(180deg, #071233 0%, #060f2b 60%, #050b20 100%);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

input { user-select: text; -webkit-user-select: text; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(120, 160, 255, 0.5); outline-offset: 2px; }
.hidden { display: none !important; }

/* ---- device binding screen ---- */
.bind-overlay {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: linear-gradient(160deg, #071233 0%, #0a1a44 55%, #060f2b 100%);
}
.bind-card {
  width: min(460px, calc(100vw - 48px)); text-align: center;
  background: #0d1b44; border: 1px solid rgba(120, 160, 255, 0.3); border-radius: 26px; padding: 38px 34px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.bind-emoji { font-size: 44px; }
.bind-emoji img { width: 72px; height: 72px; display: block; margin: 0 auto; border-radius: 17px; box-shadow: 0 8px 22px rgba(60, 86, 216, 0.5); }
.bind-card h2 { font-size: 24px; font-weight: 800; margin: 10px 0 8px; }
.bind-p { font-size: 14px; font-weight: 600; color: var(--ink-soft); margin-bottom: 10px; }
.bind-code {
  font-size: 46px; font-weight: 800; letter-spacing: 10px; color: var(--gold);
  background: rgba(255, 210, 63, 0.08); border: 1px solid rgba(255, 210, 63, 0.3);
  border-radius: 18px; padding: 14px 10px; margin: 14px 0 16px;
  animation: bind-pulse 1.6s ease-in-out infinite;
}
@keyframes bind-pulse { 50% { box-shadow: 0 0 0 10px rgba(255, 210, 63, 0.06); } }
.bind-status { font-size: 13px; font-weight: 700; color: #2fd06b; margin: 12px 0 18px; }
.bind-status::after { content: '…'; animation: dots 1.5s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
#bindOffline {
  border: 2px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--ink-soft); cursor: pointer;
  font: 700 13.5px var(--font); padding: 11px 20px; border-radius: 12px;
}
#bindOffline:hover { color: var(--gold); border-color: rgba(255, 210, 63, 0.5); }

/* ---- app frame ---- */
#app {
  height: 100vh; display: flex; flex-direction: column; gap: 6px;
  padding: 6px 10px 10px;
}

/* ---- slim operator top bar ---- */
#topbar { display: flex; align-items: center; gap: 12px; padding: 2px 4px; flex: none; }
.logo { display: flex; align-items: center; gap: 9px; }
.logo-badge {
  width: 34px; height: 34px; border-radius: 11px; font-size: 18px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #6a6ef5, #9a5bf1);
  box-shadow: 0 6px 16px rgba(101, 92, 245, 0.45);
}
.logo-text h1 {
  font-size: 16px; font-weight: 800; letter-spacing: 0.5px; line-height: 1;
  background: linear-gradient(90deg, #9fb4ff, #ffd23f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo-text h1 span { font-weight: 400; }

.pills { display: flex; gap: 6px; margin-left: 6px; flex: 1; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(10, 22, 54, 0.72); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px; font-size: 11px; font-weight: 600; color: var(--ink-soft);
}
.pill b { color: var(--ink); font-weight: 700; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #17c98b; box-shadow: 0 0 0 0 rgba(23,201,139,.5); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 70% { box-shadow: 0 0 0 6px rgba(23,201,139,0); } 100% { box-shadow: 0 0 0 0 rgba(23,201,139,0); } }
.pill-gold {
  background: rgba(255, 210, 63, 0.14); border-color: rgba(255, 210, 63, 0.5); color: var(--gold);
  font-weight: 800; animation: gold-breathe 1.6s ease-in-out infinite;
}
@keyframes gold-breathe { 50% { box-shadow: 0 0 18px rgba(255, 210, 63, 0.4); } }
.pill-jackpot { color: var(--ink-soft); font-weight: 700; }
.pill-jackpot b { color: var(--gold); font-variant-numeric: tabular-nums; }
.pill-jackpot .jp-bar {
  width: 56px; height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 210, 63, 0.14); border: 1px solid rgba(255, 210, 63, 0.3);
}
.pill-jackpot .jp-bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #ffd23f, #ff8a3d); border-radius: 999px; transition: width .5s ease;
}
.pill-jackpot.jp-ready { border-color: #ffb02e; animation: gold-breathe 0.9s ease-in-out infinite; }
#rngPill .rng-dot { background: #f59e0b; animation: none; box-shadow: none; }
#rngPill.rng-on .rng-dot { background: #17c98b; animation: pulse-dot 2s infinite; }
#rngPill.rng-off b { color: #ffb03a; }

.top-actions { display: flex; gap: 6px; }
.icon-btn {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(10, 22, 54, 0.72); border: 1px solid var(--line); color: var(--ink-soft);
  transition: transform .12s, color .12s;
}
.icon-btn:hover { transform: translateY(-1px); color: var(--gold); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn.muted { color: #55628f; }

/* ---- the stage: canvas + overlays ---- */
.stage {
  position: relative; flex: 1; min-height: 0; margin: 0 2px;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(90, 130, 255, 0.28);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  background: #0a1a44;
}
#space { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

/* ---- history chips row ---- */
.history-strip {
  list-style: none; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: min(97%, 1820px); height: 48px;
  display: flex; gap: 9px; align-items: center; justify-content: center; justify-content: safe center;
  overflow: hidden; padding: 0 4px;
}
.chip {
  flex: none; min-width: 76px; height: 37px; padding: 0 14px; border-radius: 10px;
  display: grid; place-items: center;
  font: 700 16px var(--disp); color: #fff; letter-spacing: .3px;
  background: linear-gradient(180deg, #3f97ff 0%, #0b57c9 100%);
  border: 2px solid rgba(170, 220, 255, 0.85);
  box-shadow: 0 5px 12px rgba(0, 20, 80, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.5);
  text-shadow: 0 2px 3px rgba(0, 30, 90, 0.65);
  transform: skewX(-8deg);
  animation: chip-in .35s ease;
}
@keyframes chip-in { from { transform: skewX(-8deg) translateY(-12px) scale(.7); opacity: 0; } }
.chip.c-hot {
  background: linear-gradient(180deg, #ffb03a 0%, #e8570a 100%);
  border-color: rgba(255, 226, 170, 0.9);
  box-shadow: 0 5px 14px rgba(160, 60, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.55);
}
.chip.c-gold {
  background: linear-gradient(180deg, #ffe27a 0%, #f2a01d 100%);
  border-color: #fff3c8;
  box-shadow: 0 0 22px rgba(255, 200, 60, 0.75), inset 0 2px 0 rgba(255, 255, 255, 0.6);
  color: #5d3c00; text-shadow: none;
}

/* ---- jackpot tier badges ---- */
.jackpot-row {
  position: absolute; top: 64px; left: 0; right: 0;
  display: flex; gap: 16px; align-items: flex-start; justify-content: center;
}
.jptier {
  position: relative; overflow: hidden;
  min-width: 152px; text-align: center; padding: 5px 18px 7px;
  background: linear-gradient(180deg, #8a3ff2 0%, #5719c2 100%);
  border: 2px solid rgba(216, 190, 255, 0.8); border-radius: 12px;
  box-shadow: 0 6px 16px rgba(50, 0, 120, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.28);
}
.jptier:nth-child(1), .jptier:nth-child(4) { transform: translateY(7px); }
.jt-label {
  display: block; font: 800 12.5px var(--font); letter-spacing: .4px; color: #fff;
  text-shadow: 0 2px 4px rgba(40, 0, 90, 0.85);
}
.jt-val {
  display: block; font: 800 21px/1.15 var(--disp); color: var(--gold); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(255, 180, 40, 0.65), 0 2px 0 rgba(90, 30, 0, 0.6);
}
.jptier::after { /* glossy light sweep, staggered across the four badges */
  content: ''; position: absolute; top: -10%; bottom: -10%; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.38) 50%, transparent 100%);
  transform: skewX(-18deg); animation: tier-shine 6s ease-in-out infinite; pointer-events: none;
}
.jptier:nth-child(2)::after { animation-delay: .35s; }
.jptier:nth-child(3)::after { animation-delay: .7s; }
.jptier:nth-child(4)::after { animation-delay: 1.05s; }
@keyframes tier-shine { 0%, 70% { left: -70%; } 88%, 100% { left: 130%; } }
.jptier.jt-flash { animation: jt-flash .7s ease; }
@keyframes jt-flash { 35% { filter: brightness(1.6); transform: scale(1.05); } }

/* ---- live plays feed (left) ---- */
#playFeed {
  position: absolute; left: 14px; top: 118px; width: 218px; max-height: 38%;
  overflow: hidden; display: flex; flex-direction: column;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
#betsList { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pf-row {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center;
  background: rgba(5, 14, 42, 0.6); border: 1px solid rgba(110, 150, 255, 0.18);
  border-radius: 11px; padding: 5px 9px 5px 6px;
  backdrop-filter: blur(4px);
  animation: row-in .3s ease;
}
@keyframes row-in { from { transform: translateX(-16px); opacity: 0; } }
.pf-ava {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font: 800 10px var(--font); box-shadow: inset 0 -6px 10px rgba(0,0,0,0.25);
}
.pf-info { min-width: 0; }
.pf-info b { display: block; font: 800 13px var(--font); color: #fff; white-space: nowrap; }
.pf-info span {
  display: block; font: 600 10.5px var(--font); color: #8fa8e8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-st { font: 800 11.5px var(--font); font-style: normal; color: #55628f; }
.pf-st.mult-chip {
  background: #17c98b; color: #fff; border-radius: 999px; padding: 2px 8px;
  font-style: normal; font-size: 11px;
}
.pf-row.is-lose { opacity: 0.45; }
.pf-row.is-lose .pf-st { color: var(--red); }

#finalBonus {
  position: absolute; left: 252px; top: 126px;
  font: 800 17px var(--disp); letter-spacing: .6px; color: #fff;
  text-shadow: 0 2px 0 rgba(20, 40, 100, 0.9), 0 4px 14px rgba(0, 10, 40, 0.8);
}

/* ---- center HUD ---- */
#centerHud {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 60px 0 110px;
}
/* visual order: countdown → multiplier → caption → countdown bar */
.hud-timer { order: 1; }
.hud-mult { order: 2; }
.hud-label { order: 3; }
.hud-bar { order: 4; }
.hud-label {
  font: 800 clamp(20px, 2.4vw, 34px) var(--disp); letter-spacing: 1.5px; color: #fff;
  text-shadow: 0 3px 0 rgba(15, 35, 90, 0.9), 0 6px 22px rgba(0, 10, 40, 0.9);
  animation: label-in .45s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes label-in { from { transform: translateY(10px) scale(.9); opacity: 0; } }
.hud-label.gold { color: var(--gold); }
.hud-label.away {
  color: #ff5c7a; letter-spacing: 3px;
  text-shadow: 0 3px 0 rgba(90, 0, 25, 0.9), 0 0 26px rgba(255, 60, 100, 0.55);
  animation: away-in .6s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes away-in {
  0% { transform: scale(1.6); opacity: 0; letter-spacing: 14px; }
  55% { transform: scale(.96); opacity: 1; }
  70% { transform: translateX(-6px); }
  85% { transform: translateX(5px); }
}

/* the multiplier — fixed-width digit cells, colour tier climbs with the value */
.hud-mult {
  --mg: linear-gradient(180deg, #fff6c2 8%, #ffd23f 46%, #ff9a1f 92%);
  --mglow: rgba(255, 170, 30, 0.42);
  --mdrop: rgba(120, 50, 0, 0.42);
  font: 800 clamp(64px, 9vw, 130px)/1 var(--disp);
  white-space: nowrap;
  filter: drop-shadow(0 6px 0 var(--mdrop)) drop-shadow(0 0 26px var(--mglow));
  transition: filter .4s ease;
}
.hud-mult i, .hud-mult small {
  font-style: normal; display: inline-block; text-align: center;
  background: var(--mg); background-size: 100% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hud-mult i { width: 0.6em; }
.hud-mult i.dp { width: 0.27em; }
.hud-mult small { font-size: 0.55em; font-weight: 800; margin-left: 0.04em; }
.hud-mult.t2 {
  --mg: linear-gradient(180deg, #fff1c9 6%, #ffb63a 46%, #ff6a1f 94%);
  --mglow: rgba(255, 140, 40, 0.5);
}
.hud-mult.t3 {
  --mg: linear-gradient(180deg, #ffe3f1 6%, #ff7ab8 46%, #e8326e 94%);
  --mglow: rgba(255, 80, 160, 0.55); --mdrop: rgba(110, 0, 50, 0.45);
}
.hud-mult.t4 {
  --mg: linear-gradient(100deg, #ffe9a0 0%, #ff8fd2 25%, #a9b0ff 50%, #7ff0d6 75%, #ffe9a0 100%);
  --mglow: rgba(190, 150, 255, 0.6); --mdrop: rgba(50, 10, 90, 0.5);
}
.hud-mult.t4 i, .hud-mult.t4 small { background-size: 400% 100%; animation: mult-cosmic 2.6s linear infinite; }
@keyframes mult-cosmic { to { background-position: 400% 0; } }
.hud-mult.pop { animation: mult-pop .5s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes mult-pop { 40% { transform: scale(1.12); } }
.hud-mult.crashed {
  --mg: linear-gradient(180deg, #ffd0da 6%, #ff6f8e 46%, #d61f4b 94%);
  --mglow: rgba(255, 60, 100, 0.45); --mdrop: rgba(90, 0, 20, 0.5);
  animation: crash-hit .55s cubic-bezier(.2, 1.4, .4, 1);
}
.hud-mult.crashed i, .hud-mult.crashed small { animation: none; background-size: 100% 100%; }
@keyframes crash-hit {
  0% { transform: scale(1.18); }
  30% { transform: scale(.97) translateX(-8px); }
  50% { transform: translateX(7px); }
  70% { transform: translateX(-4px); }
}

/* countdown */
.hud-timer {
  font: 800 clamp(46px, 6vw, 76px)/1 var(--disp); color: var(--gold);
  text-shadow: 0 4px 0 rgba(120, 50, 0, 0.5), 0 0 32px rgba(255, 170, 30, 0.4);
  white-space: nowrap; transition: color .3s;
}
.hud-timer i { font-style: normal; display: inline-block; width: 0.6em; text-align: center; }
.hud-timer i.dp { width: 0.27em; }
.hud-timer small { font-size: 0.5em; margin-left: 0.08em; opacity: .85; }
.hud-timer.urgent { color: #ffb03a; animation: tick-pulse 1s ease-in-out infinite; }
@keyframes tick-pulse { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.08); } }
.hud-timer.gold { color: #ffe27a; }
.hud-bar {
  width: clamp(200px, 22vw, 340px); height: 8px; margin-top: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(4, 12, 40, 0.55); border: 1px solid rgba(255, 210, 63, 0.35);
  box-shadow: 0 4px 14px rgba(0, 8, 30, 0.5), inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.hud-bar i {
  display: block; height: 100%; width: 100%; transform-origin: left center;
  background: linear-gradient(90deg, #ff8a3d, #ffd23f 60%, #fff3ae);
  box-shadow: 0 0 12px rgba(255, 200, 60, 0.8);
  border-radius: 999px;
}

/* jackpot round banner */
.gold-banner {
  pointer-events: none;
  background: linear-gradient(90deg, #ffb347, #ffd86b, #ffb347);
  background-size: 200% 100%; animation: jb-slide .5s ease, jb-shine 2.4s linear infinite;
  color: #6b4700; border-radius: 999px; padding: 8px 22px 10px;
  box-shadow: 0 8px 26px rgba(242, 181, 60, 0.5); text-align: center;
}
@keyframes jb-slide { from { transform: translateY(-30px); opacity: 0; } }
@keyframes jb-shine { to { background-position: 200% 0; } }
.jb-text { font-weight: 800; font-size: 14px; letter-spacing: 0.8px; }
.jb-bar { display: block; height: 5px; margin-top: 6px; border-radius: 4px; background: rgba(107, 71, 0, 0.18); overflow: hidden; }
.jb-bar b { display: block; height: 100%; width: 0%; border-radius: 4px; background: #7a5200; transition: width .2s linear; }

.crash-summary {
  position: absolute; left: 50%; top: 72%; transform: translateX(-50%);
  background: rgba(5, 14, 42, 0.72); border: 1px solid rgba(110, 150, 255, 0.25);
  backdrop-filter: blur(6px); color: #2fd06b; font-weight: 700; font-size: 14px;
  padding: 8px 20px; border-radius: 999px; animation: chip-in .4s ease; white-space: nowrap;
}
.watermark {
  position: absolute; left: 16px; bottom: 148px; font-size: 10px; font-weight: 700;
  letter-spacing: 1.6px; color: rgba(160, 190, 255, 0.4);
}

/* ---- QR + 18+ (right side) ---- */
.qr-side {
  position: absolute; right: 14px; top: 116px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.qr-ribbon {
  font: 800 11.5px var(--font); letter-spacing: .8px; color: #fff;
  background: linear-gradient(180deg, #ffb03a, #ff7a1a);
  padding: 4px 14px; border-radius: 6px; transform: skewX(-6deg);
  box-shadow: 0 4px 12px rgba(180, 70, 0, 0.55);
  text-shadow: 0 1px 2px rgba(120, 40, 0, 0.6);
}
.qr-box {
  width: 106px; height: 106px; background: #fff; border-radius: 9px; padding: 6px;
  box-shadow: 0 6px 18px rgba(0, 10, 40, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.qr-box svg { width: 100%; height: 100%; display: block; }
.badge18 {
  width: 64px; height: 64px; border-radius: 50%; margin-top: 4px;
  background: radial-gradient(circle at 35% 30%, #ff6a6a, #d31a1a 72%);
  border: 3px solid #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.badge18 b { font: 800 19px var(--disp); color: #fff; }
.badge18 span { font: 800 8.5px var(--font); letter-spacing: 1.4px; color: #ffe2e2; }

#ageNote {
  position: absolute; right: 18px; bottom: 146px; z-index: 2;
  font: italic 700 13px var(--font); color: #ffb03a;
  text-shadow: 0 2px 6px rgba(0, 10, 40, 0.85);
}

/* ---- player stations ---- */
.stations {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
}
#micePill { cursor: pointer; }
#micePill .mice-btn {
  width: 18px; height: 18px; border-radius: 6px; border: none; cursor: pointer;
  background: rgba(120, 160, 255, 0.16); color: #9fb4ff; font-weight: 800; font-size: 12px; line-height: 1;
}
#micePill .mice-btn:hover { background: rgba(120, 160, 255, 0.3); }

.station {
  --ac: #1a8fd8; --acl: #48c4f5; --acd: #0c5f9e;
  position: relative; min-height: 84px; margin-top: 16px;
  background: linear-gradient(180deg, var(--acl) 0%, var(--ac) 48%, var(--acd) 100%);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -8px 14px rgba(0, 0, 0, 0.28);
  padding: 9px 12px 9px 56px;
  display: flex; flex-direction: column; gap: 7px;
}
.station {
  transition: box-shadow .25s ease, transform .2s ease, filter .25s ease;
}
/* a placed bet lifts the panel; a live bet glows and breathes; a win flashes green */
.station[data-state="PLACED"] {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.85),
              inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -8px 14px rgba(0, 0, 0, 0.28);
}
.station[data-state="INFLIGHT"] {
  transform: translateY(-3px);
  animation: live-glow 1.2s ease-in-out infinite;
}
@keyframes live-glow {
  0%, 100% { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 196, 70, 0.9), 0 0 16px rgba(255, 170, 40, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -8px 14px rgba(0, 0, 0, 0.28); }
  50%      { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(255, 214, 90, 1),  0 0 30px rgba(255, 170, 40, 0.75), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -8px 14px rgba(0, 0, 0, 0.28); }
}
.station[data-state="CASHED"] {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(80, 240, 160, 0.9), 0 0 26px rgba(40, 220, 130, 0.55),
              inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -8px 14px rgba(0, 0, 0, 0.28);
  animation: won-flash .7s ease;
}
@keyframes won-flash { 25% { filter: brightness(1.35); transform: translateY(-5px) scale(1.02); } }
.station[data-state="LOST"] { filter: saturate(.55) brightness(.85); }
.station.sc-1 { --ac: #e0a41e; --acl: #f7cf4a; --acd: #a87408; }
.station.sc-2 { --ac: #1a8fd8; --acl: #48c4f5; --acd: #0c5f9e; }
.station.sc-3 { --ac: #e8862a; --acl: #ffb45c; --acd: #b05c10; }
.station.sc-4 { --ac: #a24ae0; --acl: #c87ef8; --acd: #742cae; }
.station.sc-5 { --ac: #2eb052; --acl: #63dd82; --acd: #1a8238; }
.station.sc-6 { --ac: #e85a78; --acl: #ff92ac; --acd: #b03450; }
.station::after { /* glossy sheen */
  content: ''; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 38%);
}

.st-num {
  position: absolute; left: 7px; top: 52%; transform: translateY(-50%);
  font: 800 46px/1 var(--disp); color: #fff8e0;
  text-shadow:
    2px 0 0 #4a3200, -2px 0 0 #4a3200, 0 2px 0 #4a3200, 0 -2px 0 #4a3200,
    2px 2px 0 #4a3200, -2px 2px 0 #4a3200, 2px -2px 0 #4a3200, -2px -2px 0 #4a3200,
    0 5px 10px rgba(0, 0, 0, 0.45);
}

/* the "to Confirm" pill — floats above the panel's top edge, navy ring */
.st-confirm {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -52%);
  min-width: 128px; min-height: 28px; padding: 3px 18px; white-space: nowrap;
  border-radius: 999px; font: 800 13px var(--font); letter-spacing: .3px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 3px solid #0a2c66;
  background: linear-gradient(180deg, #3f8ce8 0%, #1b57b8 100%);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.4);
  transition: transform .1s, box-shadow .2s, filter .2s;
  z-index: 2;
}
.st-confirm .pci {
  font-style: normal; width: 17px; height: 17px; border-radius: 50%;
  display: inline-grid; place-items: center; font-size: 9.5px; line-height: 1;
  background: rgba(255, 255, 255, 0.22); color: #fff;
}
.st-confirm small { font-size: 11px; font-weight: 700; opacity: 0.9; }
.st-confirm:active { transform: translate(-50%, -52%) scale(0.95); }
.st-confirm.is-bet:hover { filter: brightness(1.08); }
.st-confirm.is-cancel {
  background: linear-gradient(180deg, #e84a6a 0%, #b81e42 100%);
  border-color: #5c0a1e;
}
.st-confirm.is-cash {
  background: linear-gradient(180deg, #ffb03a 0%, #ff7a1a 100%);
  border-color: #7a3600; color: #fff;
  animation: cash-pulse 1s ease-in-out infinite;
}
@keyframes cash-pulse { 50% { box-shadow: 0 5px 26px rgba(255, 138, 61, 0.9), inset 0 1px 0 rgba(255,255,255,.4); } }
.st-confirm.is-won {
  background: linear-gradient(180deg, #35d488 0%, #159a58 100%); border-color: #0a5230;
  animation: won-pop .5s cubic-bezier(.2, 1.7, .4, 1);
}
@keyframes won-pop { from { transform: translate(-50%, -52%) scale(.6); } }
.st-confirm.is-lost {
  background: linear-gradient(180deg, #e84a6a 0%, #b81e42 100%); border-color: #5c0a1e;
  animation: lost-shake .45s ease;
}
@keyframes lost-shake {
  20% { transform: translate(calc(-50% - 6px), -52%); }
  40% { transform: translate(calc(-50% + 5px), -52%); }
  60% { transform: translate(calc(-50% - 3px), -52%); }
  80% { transform: translate(calc(-50% + 2px), -52%); }
}
.st-confirm:disabled { filter: none; cursor: default; }
.st-confirm.is-bet:disabled { background: rgba(10, 22, 54, 0.6); color: #8a97c3; box-shadow: none; }

.st-read { display: flex; gap: 7px; align-items: stretch; }
.st-read-box {
  flex: 1; text-align: center; background: rgba(4, 10, 28, 0.74);
  border: 1.5px solid rgba(255, 255, 255, 0.28); border-radius: 12px; padding: 3px 8px 5px;
  transition: opacity .2s, border-color .15s;
}
.st-read-box span {
  display: block; font: 800 9px var(--font); letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--acl);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.st-read-box b {
  display: inline-block; font: 700 18px/1.15 var(--disp); color: #fff; font-variant-numeric: tabular-nums;
  transition: transform .15s cubic-bezier(.2, 1.6, .4, 1);
}
.st-read-box.lock { opacity: 0.5; }
.st-read-box.bump b { color: #fff; transform: scale(1.12); }

/* the BET box doubles as the level control (click / scroll) */
.st-bet { position: relative; cursor: pointer; color: inherit; padding-right: 20px !important; }
.st-bet .lvl {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 10px; color: #fff; opacity: .9;
}
.st-bet:hover:not(:disabled) { border-color: var(--acl); }
.st-bet:disabled { cursor: default; }

/* ---- toasts ---- */
#toasts { position: fixed; top: 56px; right: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  min-width: 230px; max-width: 330px; padding: 10px 15px; border-radius: 13px;
  background: rgba(10, 20, 52, 0.94); backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); font-size: 12.5px; font-weight: 700; color: var(--ink);
  border-left: 4px solid var(--primary); animation: toast-in .3s ease;
}
.toast.win  { border-left-color: var(--green); }
.toast.gold { border-left-color: var(--gold); color: #ffe9a8; }
.toast.err  { border-left-color: var(--red); }
.toast.out  { animation: toast-out .3s ease forwards; }
@keyframes toast-in  { from { transform: translateX(40px); opacity: 0; } }
@keyframes toast-out { to { transform: translateX(40px); opacity: 0; } }

/* ---- modals ---- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  background: rgba(2, 6, 20, 0.6); backdrop-filter: blur(6px); animation: fade-in .2s ease;
}
@keyframes fade-in { from { opacity: 0; } }
.modal {
  width: min(420px, calc(100vw - 40px)); background: #0d1b44;
  border: 1px solid rgba(120, 160, 255, 0.3); border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); padding: 22px;
  animation: modal-pop .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modal-pop { from { transform: scale(0.86); opacity: 0; } }
.modal h3 { font-size: 18px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.modal .m-close {
  margin-left: auto; width: 30px; height: 30px; border-radius: 10px;
  background: rgba(120, 160, 255, 0.14); color: var(--ink-soft); font-size: 15px; font-weight: 800;
  display: grid; place-items: center;
}
.modal .m-close:hover { background: rgba(120, 160, 255, 0.28); }
.modal p, .modal li { font-size: 13.5px; color: var(--ink-soft); font-weight: 500; line-height: 1.55; }
.modal ul { padding-left: 18px; display: grid; gap: 6px; margin: 8px 0; }
.modal .m-note { margin-top: 12px; font-size: 11.5px; font-weight: 700; color: var(--ink-faint); text-align: center; }
.m-amounts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 14px; }
.m-amounts button {
  height: 52px; border-radius: 14px; font-size: 15px; font-weight: 800; color: var(--gold);
  background: rgba(255, 210, 63, 0.1); border: 1px solid rgba(255, 210, 63, 0.3);
  transition: transform .1s, background .12s;
}
.m-amounts button:hover { background: rgba(255, 210, 63, 0.2); }
.m-amounts button:active { transform: scale(0.95); }

/* ---- responsive fallback (small screens / tablets) ---- */
@media (max-width: 1180px) {
  #playFeed { width: 178px; }
  #finalBonus { left: 206px; }
  .stations { grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); }
}
@media (max-width: 900px) {
  body { overflow: auto; }
  #app { height: auto; min-height: 100vh; }
  .stage { min-height: 520px; }
  .pill { font-size: 10px; padding: 3px 8px; }
  #maxWinPill, #roundPill { display: none; }
}
@media (max-width: 640px) {
  #playFeed, #finalBonus, .qr-side, #ageNote { display: none; }
  #centerHud { padding-bottom: 40px; }
  .stations { position: static; margin: 8px; }
  .stage { margin-bottom: 0; }
}

/* ============================================================
   LUNA BASE theme — navy glass panels, cyan instrument accents
   (active when CONFIG.theme = 'luna'; body gets .theme-luna)
   ============================================================ */
body.theme-luna {
  --luna-cyan: #7cf0ff;
  --luna-panel: rgba(6, 14, 38, 0.82);
  --luna-line: rgba(124, 240, 255, 0.35);
  background: radial-gradient(1200px 600px at 50% -10%, #0c1a40 0%, transparent 60%), linear-gradient(180deg, #030612 0%, #02040c 100%);
}
body.theme-luna .stage { border-color: rgba(124, 240, 255, 0.28); background: #02040c; }
body.theme-luna .logo-badge { background: linear-gradient(135deg, #1b8fb0, #3c56d8); box-shadow: 0 6px 16px rgba(60, 180, 255, 0.4); }
body.theme-luna .logo-text h1 { background: linear-gradient(90deg, #d8f9ff, #7cf0ff); -webkit-background-clip: text; background-clip: text; }

/* history: instrument read-outs */
body.theme-luna .chip {
  background: linear-gradient(180deg, rgba(20, 44, 92, 0.92), rgba(8, 20, 52, 0.92));
  border: 1.5px solid var(--luna-line); color: #d8f9ff; text-shadow: none; transform: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  border-radius: 9px; font-weight: 700;
}
body.theme-luna .chip.c-hot { background: linear-gradient(180deg, #ff9d4a, #d9571a); border-color: #ffd0a1; color: #fff; }
body.theme-luna .chip.c-gold { background: linear-gradient(180deg, #ffe58a, #f2a91d); border-color: #fff3c8; color: #4a2c00; }
body.theme-luna .chip:first-child { border-color: var(--luna-cyan); box-shadow: 0 0 14px rgba(124, 240, 255, 0.45); }
@keyframes chip-in-luna { from { transform: translateY(-12px) scale(.7); opacity: 0; } }
body.theme-luna .chip { animation: chip-in-luna .35s ease; }

/* jackpot pots: glass capsules with a cyan edge */
body.theme-luna .jptier {
  background: linear-gradient(180deg, rgba(18, 38, 84, 0.9), rgba(6, 14, 38, 0.9));
  border: 1.5px solid var(--luna-line); border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
}
body.theme-luna .jt-label { color: var(--luna-cyan); text-shadow: none; letter-spacing: 1.2px; font-size: 11.5px; }
body.theme-luna .jt-val { color: #fff; text-shadow: 0 0 14px rgba(124, 240, 255, 0.55); }

/* live feed + side info */
body.theme-luna .pf-row { background: var(--luna-panel); border-color: rgba(124, 240, 255, 0.16); }
body.theme-luna .pf-st.mult-chip { background: #22c9a0; }
body.theme-luna #finalBonus { color: #d8f9ff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); }
body.theme-luna .qr-ribbon { background: linear-gradient(180deg, #2fb6d6, #1b6fb8); box-shadow: 0 4px 12px rgba(0, 60, 120, 0.55); }
body.theme-luna #ageNote { color: #9fe9ff; }

/* countdown / multiplier accents */
body.theme-luna .hud-bar { border-color: var(--luna-line); }
body.theme-luna .hud-bar i { background: linear-gradient(90deg, #2fb6d6, #7cf0ff 60%, #e6fdff); box-shadow: 0 0 12px rgba(124, 240, 255, 0.8); }
body.theme-luna .hud-timer { color: #e6fdff; text-shadow: 0 4px 0 rgba(8, 40, 90, 0.7), 0 0 32px rgba(124, 240, 255, 0.45); }
body.theme-luna .hud-timer.urgent { color: #ffb03a; }

/* player stations: navy consoles, each with its own colour as an edge + glow */
body.theme-luna .station {
  background: linear-gradient(180deg, rgba(16, 32, 72, 0.94), rgba(6, 14, 38, 0.96));
  border: 2px solid var(--ac);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 24px rgba(0, 0, 0, 0.35);
}
body.theme-luna .station::after { background: linear-gradient(115deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 35%); }
body.theme-luna .station.sc-1 { --ac: #ffc23d; --acl: #ffd97a; }
body.theme-luna .station.sc-2 { --ac: #3fb8ff; --acl: #8fd6ff; }
body.theme-luna .station.sc-3 { --ac: #ff8a3d; --acl: #ffb98a; }
body.theme-luna .station.sc-4 { --ac: #b07cff; --acl: #d2b5ff; }
body.theme-luna .station.sc-5 { --ac: #36e08f; --acl: #8ff0c0; }
body.theme-luna .station.sc-6 { --ac: #ff5c8a; --acl: #ffa3bd; }
body.theme-luna .st-num { color: var(--acl); text-shadow: 0 0 14px var(--ac), 0 3px 0 rgba(0, 0, 0, 0.5); }
body.theme-luna .st-read-box { background: rgba(2, 6, 20, 0.75); border-color: rgba(124, 240, 255, 0.18); }
body.theme-luna .st-confirm { border-color: #06142e; background: linear-gradient(180deg, #2fa4e0, #1662b8); }
body.theme-luna .station[data-state="INFLIGHT"] { animation: live-glow-luna 1.2s ease-in-out infinite; }
@keyframes live-glow-luna {
  0%, 100% { box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 0 12px var(--ac), inset 0 0 24px rgba(0,0,0,.35); }
  50%      { box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 0 30px var(--ac), inset 0 0 24px rgba(0,0,0,.35); }
}

/* ============================================================
   PLAYER PANELS v2 — card with header, read-outs and one big
   action button. Each panel keeps its own colour (--ac/--acl).
   ============================================================ */
.stations { gap: 12px; bottom: 12px; left: 12px; right: 12px; }
/* a card never gets wider than it is with three players: one or two players
   keep that size and sit in the middle; four or more share the width */
@media (min-width: 641px) {
  .stations { display: flex; flex-wrap: wrap; justify-content: center; }
  .stations > .station { flex: 1 1 0; min-width: 176px; max-width: calc(100% / 3); }
}
.station {
  margin-top: 0; min-height: 0; padding: 10px 12px 12px;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20, 36, 78, 0.96) 0%, rgba(7, 15, 40, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex; flex-direction: column; gap: 8px;
}
body.theme-luna .station { border: 1px solid rgba(255, 255, 255, 0.10); }
.station::before {                                   /* colour accent bar along the top */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--ac), var(--acl), var(--ac));
}
.station::after {                                    /* soft colour wash from the top */
  content: ''; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  background: radial-gradient(120% 70% at 50% -20%, color-mix(in srgb, var(--ac) 22%, transparent), transparent 70%);
}
.st-num { display: none; }

.st-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; height: 22px; }
.st-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 7px; border-radius: 999px;
  background: var(--ac); color: #071026; font: 800 12.5px var(--font); letter-spacing: .5px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--ac) 55%, transparent);
}
.st-mouse { display: block; }
.st-status {
  margin-left: auto; font: 700 10.5px var(--font); letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(214, 228, 255, 0.62);
}
.station[data-state="INFLIGHT"] .st-status { color: #ffcf5c; }
.station[data-state="CASHED"] .st-status { color: #4fe39b; }
.station[data-state="LOST"] .st-status { color: #ff7a8e; }
.station[data-state="PLACED"] .st-status { color: var(--acl); }

.st-read { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.st-read-box, body.theme-luna .st-read-box {
  text-align: left; padding: 6px 10px 7px; border-radius: 10px;
  background: rgba(0, 4, 18, 0.55); border: 1px solid rgba(255, 255, 255, 0.07);
}
.st-read-box span {
  display: block; font: 700 9.5px var(--font); letter-spacing: 1.3px; text-transform: uppercase;
  color: rgba(190, 206, 240, 0.6); text-shadow: none;
}
.st-read-box b { font: 800 19px/1.2 var(--font); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.st-bet { padding-right: 26px !important; transition: border-color .15s, background .15s; }
.st-bet .lvl { right: 9px; color: var(--acl); opacity: 1; display: grid; place-items: center; }
.st-bet:hover:not(:disabled) { border-color: var(--ac); background: rgba(0, 4, 18, 0.7); }
.st-read-box.lock { opacity: 0.55; }

/* the one big action button */
.st-confirm, body.theme-luna .st-confirm {
  position: relative; z-index: 1; top: auto; left: auto; transform: none;
  width: 100%; height: 46px; min-height: 0; padding: 0 12px; border-radius: 12px;
  border: none; color: #fff; font: 800 16.5px var(--font); letter-spacing: .8px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.22), 0 6px 16px rgba(0, 0, 0, 0.35);
  transition: filter .15s, transform .1s, box-shadow .2s;
}
.st-confirm small { font-size: 13px; font-weight: 700; opacity: .85; letter-spacing: .3px; }
.st-confirm:active { transform: scale(0.97); }
.stations .st-confirm.is-bet { background: linear-gradient(180deg, #31d98a 0%, #15a35d 100%); }
.stations .st-confirm.is-bet:hover:not(:disabled) { filter: brightness(1.08); }
.stations .st-confirm.is-bet:disabled {
  background: rgba(255, 255, 255, 0.05); color: rgba(214, 228, 255, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.stations .st-confirm.is-cancel { background: linear-gradient(180deg, #ff6b7f 0%, #d22c4b 100%); }
.stations .st-confirm.is-cash {
  background: linear-gradient(180deg, #ffb23e 0%, #ff7417 100%); color: #2a1100;
  animation: cash-pulse-v2 1s ease-in-out infinite;
}
@keyframes cash-pulse-v2 {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.2), 0 0 0 0 rgba(255,150,40,.0); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.2), 0 0 22px 2px rgba(255,150,40,.75); }
}
.stations .st-confirm.is-won {
  background: linear-gradient(180deg, rgba(49, 217, 138, 0.25), rgba(21, 163, 93, 0.25));
  box-shadow: inset 0 0 0 1.5px #31d98a, 0 0 18px rgba(49, 217, 138, 0.35); color: #b9ffd9;
  animation: won-pop-v2 .5s cubic-bezier(.2, 1.7, .4, 1);
}
@keyframes won-pop-v2 { from { transform: scale(.8); } }
.stations .st-confirm.is-lost {
  background: rgba(255, 90, 110, 0.12); box-shadow: inset 0 0 0 1.5px rgba(255, 90, 110, 0.55); color: #ff9aa8;
  animation: lost-shake-v2 .45s ease;
}
@keyframes lost-shake-v2 { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* panel states */
.station[data-state="PLACED"], body.theme-luna .station[data-state="PLACED"] {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 0 1.5px var(--ac), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.station[data-state="INFLIGHT"], body.theme-luna .station[data-state="INFLIGHT"] { transform: translateY(-3px); animation: live-v2 1.2s ease-in-out infinite; }
@keyframes live-v2 {
  0%, 100% { box-shadow: 0 14px 30px rgba(0,0,0,.55), 0 0 0 1.5px var(--ac), 0 0 14px color-mix(in srgb, var(--ac) 45%, transparent); }
  50%      { box-shadow: 0 14px 30px rgba(0,0,0,.55), 0 0 0 2px var(--acl), 0 0 30px color-mix(in srgb, var(--ac) 75%, transparent); }
}
.station[data-state="CASHED"], body.theme-luna .station[data-state="CASHED"] {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 0 1.5px #31d98a, 0 0 24px rgba(49, 217, 138, 0.4);
  animation: none;
}
.station[data-state="LOST"] { filter: saturate(.6) brightness(.85); }

/* the 18+ notice sits under the age badge, clear of the panels */
body.theme-luna #ageNote {
  bottom: auto; top: 338px; right: 10px; width: 150px; text-align: center;
  font: italic 600 11px/1.3 var(--font); color: rgba(200, 236, 255, 0.75);
}

/* ============================================================
   No top bar: the game fills the whole screen. The bar's elements
   stay in the page (hidden) so the game code that updates them keeps working.
   ============================================================ */
#topbar { display: none !important; }
#app { padding: 0; gap: 0; }
.stage { margin: 0; border-radius: 0; border: 0; box-shadow: none; }
body.theme-luna .stage { border: 0; }

/* ---- game name, top-left corner (the top bar is hidden) ---- */
.game-title {
  position: absolute; top: 12px; left: 18px; z-index: 3;
  display: flex; align-items: center; gap: 10px; pointer-events: none;
}
.gt-badge {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 25px;
  background: linear-gradient(135deg, #1b8fb0, #3c56d8);
  box-shadow: 0 6px 18px rgba(60, 180, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.gt-name {
  font: 800 30px/1 'Baloo 2', Outfit, sans-serif; letter-spacing: 1px; color: #eafcff;
  text-shadow: 0 3px 0 rgba(8, 30, 80, 0.75), 0 0 22px rgba(124, 240, 255, 0.45);
}
.gt-name b {
  font-weight: 800; margin-left: 8px;
  background: linear-gradient(180deg, #ffe08a, #ff9a2e); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 3px 0 rgba(90, 30, 0, 0.6)) drop-shadow(0 0 12px rgba(255, 160, 60, 0.45));
}
/* the history chips make room for the name */
.history-strip { left: 390px; right: 14px; width: auto; transform: none; }
/* Manyanga Bets logo mark: the SVG carries its own tile, so drop the badge fill */
.gt-badge img, .logo-badge img { width: 100%; height: 100%; display: block; }
.gt-badge:has(img), .logo-badge:has(img) { background: none; overflow: hidden; }
.gt-badge:has(img) { box-shadow: 0 6px 18px rgba(60, 180, 255, 0.45); }
.logo-badge:has(img) { box-shadow: 0 6px 16px rgba(60, 86, 216, 0.45); }
body.theme-luna .logo-badge:has(img) { background: none; }
@media (max-width: 1500px) { .gt-name { font-size: 24px; } .gt-badge { width: 40px; height: 40px; font-size: 21px; } .history-strip { left: 345px; } }

/* Manyanga Bets: no scan-to-play QR; the 18+ badge and its notice sit low on the right, just above the player panels */
.qr-side { top: auto; bottom: 206px; right: 10px; width: 150px; }
#ageNote, body.theme-luna #ageNote {
  top: auto; bottom: 168px; right: 10px; width: 150px; text-align: center;
}

/* Manyanga Bets: Final Bonus moves to the right side; player cards sit almost edge to edge */
#finalBonus { left: auto; right: 24px; text-align: right; }
.stations { gap: 4px; }