/* ============================================================================
 * OVERDRAFT — Crime Empire style HUD over the FIRST-PERSON POV ATM scene.
 * The scene fills the entire viewport edge-to-edge; all chrome (history pill
 * strip, multiplier, balance, bet card) FLOATS over it. Machine internals are
 * unchanged from the approved POV build (cqw/cqh layout of a 320x448 grid).
 *
 * FONT: "Lilita One" is loaded from Google Fonts and licensed under the
 * SIL Open Font License 1.1 (OFL) — https://scripts.sil.org/OFL
 * Lilita One has NO Georgian glyphs: "Noto Sans Georgian" (700/900) sits next
 * in the --arcade stack so Latin/digits keep Lilita and Georgian text falls
 * through to Noto Georgian bold.
 * ==========================================================================*/

:root {
  --outline: #221A38;
  --night: #1A1F35;
  --night-deep: #12162A;
  --panel: #262C4A;
  --panel-line: #3B4370;
  --atm-body: #3D4DB8;
  --atm-deep: #2C3A94;
  --screen: #7BF0C8;
  --screen-deep: #3DC9A0;
  --lcd: #175E4A;
  --money: #85BB65;
  --gold: #FFC93C;
  --gold-deep: #E8A020;
  --neon-pink: #FF4D8D;
  --neon-blue: #4DC9FF;
  --danger: #FF3B4E;
  --warning: #FFB224;
  --collect: #2FBE5F;
  --collect-deep: #1F8F45;
  --green-hi: #7ED957;
  --green-lo: #4FA832;
  --steel: #9AA3C4;
  --key-gray: #B9C2E8;
  --card-purple: rgba(58, 45, 91, .93);
  --text: #F4EFFA;
  --muted: #9AA3C4;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --strip-h: 34px;
  --arcade: "Lilita One", "Noto Sans Georgian", "Arial Black", Arial, sans-serif;
}

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

html, body { height: 100%; touch-action: manipulation; }  /* no double-tap zoom */
body {
  margin: 0;
  background: var(--night-deep);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  overflow: hidden;
  user-select: none;
}
/* game surfaces never pan/zoom; inputs keep normal touch behavior */
#stage, #hud-top, #bet-card button, #main-action { touch-action: none; }
input { touch-action: auto; user-select: text; }

.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 12px; }
img.img-broken { visibility: hidden; }   /* broken assets never show alt boxes */
img { -webkit-user-drag: none; }

/* ====================== STAGE: FULL-BLEED POV SCENE ====================== */

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--night-deep);
  container-type: size;
  z-index: 0;
}
#stage.shake { animation: stageShake .4s linear; }
@keyframes stageShake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-9px, 5px); }
  30% { transform: translate(8px, -6px); }
  45% { transform: translate(-7px, -4px); }
  60% { transform: translate(6px, 5px); }
  75% { transform: translate(-4px, 2px); }
  90% { transform: translate(3px, -2px); }
}

/* brick wall covers everything (AI art, opaque 1536w webp).
   A light darkening layer keeps the machine popping; the #vignette layer
   above adds the edge falloff. center/cover holds up on portrait mobile. */
#wall {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(10, 12, 26, .38), rgba(10, 12, 26, .38)),
    url("/assets/ai/opt/bg-wall.webp");
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
}

/* faint animated god-ray from the top */
#godray {
  position: absolute;
  inset: -10% -20%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(195deg,
    rgba(255, 244, 200, .14) 0%,
    rgba(255, 244, 200, .05) 32%,
    transparent 58%);
  transform-origin: 50% -10%;
  animation: raySway 11s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
@keyframes raySway {
  from { transform: rotate(-4deg); opacity: .7; }
  to   { transform: rotate(4deg);  opacity: 1; }
}

/* slow rainbow sweep behind the ATM when mult >= 10x */
#rainbow {
  position: absolute;
  inset: -18%;
  z-index: 1;
  pointer-events: none;
  background: conic-gradient(from 0deg at 50% 46%,
    #ff5a5a, #ffc93c, #7ed957, #4dc9ff, #b06bff, #ff4d8d, #ff5a5a);
  filter: blur(60px) saturate(1.2);
  opacity: 0;
  transition: opacity 1.2s linear;
  animation: rainbowSpin 14s linear infinite;
  will-change: transform;
}
#stage.hyper #rainbow { opacity: .25; }
@keyframes rainbowSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* subtle vignette */
#vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 66% at 50% 46%,
      transparent 0 40%,
      rgba(6, 8, 18, .38) 62%,
      rgba(3, 5, 12, .82) 88%,
      rgba(2, 4, 10, .94) 100%);
}

/* ======================== THE MACHINE (dominates) ======================== */

#machine-zone {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4vw;                     /* machine sits slightly right of center */
  /* keep the dispenser + keypad clear of the floating bet card */
  padding-top: 44px;
  padding-bottom: 146px;
  /* cq units inside must measure THIS zone's content box (padding excluded),
     not #stage - otherwise the machine ignores the space reserved for the card */
  container-type: size;
}
#machine {
  position: relative;
  height: 100%;                                   /* fallback (no cq support) */
  height: min(100cqh, calc(92cqw * 448 / 320));   /* fits between strip & card */
  aspect-ratio: 320 / 448;
  container-type: size;
  animation: mBreathe 2s ease-in-out infinite alternate;   /* 4s full cycle */
  will-change: transform;
}
@keyframes mBreathe { from { transform: scale(1); } to { transform: scale(1.003); } }

/* separate wrapper so vibration / crash shake compose with the breathe */
#machine-shake {
  position: absolute;
  inset: 0;
  background: var(--atm-deep);
  border: 4px solid var(--outline);
  border-radius: clamp(12px, 5.6cqw, 24px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .08),
    inset 0 -14px 26px rgba(0, 0, 0, .3),
    0 26px 80px rgba(0, 0, 0, .65),
    0 0 0 1px rgba(0, 0, 0, .4);
  will-change: transform;
}
#machine-shake.shake-hard { animation: machineSlam .4s linear; }
@keyframes machineSlam {
  0%, 100% { transform: translate(0, 0); }
  12% { transform: translate(-10px, 6px); }
  28% { transform: translate(9px, -7px); }
  44% { transform: translate(-8px, -5px); }
  62% { transform: translate(7px, 6px); }
  80% { transform: translate(-4px, 2px); }
}

/* corner screws */
.screw {
  position: absolute;
  width: 2.6cqh; height: 2.6cqh;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #D7DCF2, var(--steel) 55%, #6E77A0);
  border: 2px solid var(--outline);
  z-index: 4;
}
.screw::after {
  content: "";
  position: absolute;
  left: 15%; right: 15%; top: 50%;
  height: 2px; margin-top: -1px;
  background: var(--outline);
  border-radius: 2px;
  transform: rotate(38deg);
}
.s-tl { top: 1.1cqh; left: 1.8cqw; }
.s-tr { top: 1.1cqh; right: 1.8cqw; }
.s-bl { bottom: 1.1cqh; left: 1.8cqw; }
.s-br { bottom: 1.1cqh; right: 1.8cqw; }

/* inner face with gloss sweep */
#m-inner {
  position: absolute;
  inset: 2.6cqh 3.6cqw;
  background: var(--atm-body);
  border: 3px solid var(--outline);
  border-radius: clamp(8px, 3.8cqw, 16px);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .1), inset 0 -8px 18px rgba(0, 0, 0, .22);
  overflow: visible;
}
#m-inner::before {                                  /* gloss sweep */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg,
    rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .12) 14%,
    transparent 26%);
  pointer-events: none;
  z-index: 1;
}

/* ------------------------------- marquee -------------------------------- */

#m-marquee {
  position: absolute;
  top: 3cqh; left: 10cqw; right: 10cqw;
  height: 5.4cqh;
  background: #F4EFFA;
  border: 3px solid var(--outline);
  border-radius: 1.9cqh;
  display: flex;
  align-items: center;
  gap: 2.6cqw;
  padding: 0 3.4cqw;
  box-shadow: inset 0 -4px 0 rgba(34, 26, 56, .12);
  z-index: 2;
}
.mq-bill { height: 60%; width: auto; }
#mq-disc {
  width: 4.6cqh; height: 4.6cqh;
  flex: 0 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #FFE082, var(--gold) 60%, var(--gold-deep));
  border: 2.5px solid var(--outline);
  display: flex;
  align-items: center;
  justify-content: center;
}
#mq-disc::after {
  content: "$";
  font-weight: 900;
  font-size: 3cqh;
  line-height: 1;
  color: var(--outline);
}
.mq-bars { flex: 1; display: flex; flex-direction: column; gap: 1cqh; min-width: 0; }
.mq-bars i { display: block; height: 1.3cqh; border-radius: 999px; background: var(--panel-line); }
.mq-bars i:last-child { width: 68%; }

/* ------------------------------- speakers ------------------------------- */

.spk {
  position: absolute;
  top: 9.8cqh;
  width: 15cqw; height: 2.3cqh;
  background: var(--night-deep);
  border: 2.5px solid var(--outline);
  border-radius: 1.4cqh;
  z-index: 2;
}
.spk::after {
  content: "";
  position: absolute;
  left: 16%; right: 16%; top: 24%;
  height: 2px;
  background: var(--panel-line);
  border-radius: 2px;
  box-shadow: 0 4px 0 var(--panel-line), 0 8px 0 var(--panel-line);
}
.spk-l { left: 11cqw; }
.spk-r { right: 11cqw; }

/* --------------------------------- hood --------------------------------- */

#m-hood {
  position: absolute;
  top: 13.2cqh; left: 6.5cqw; right: 6.5cqw;
  height: 2.4cqh;
  background: var(--panel);
  border: 3px solid var(--outline);
  border-radius: 1.5cqh 1.5cqh .6cqh .6cqh;
  box-shadow: 0 5px 0 rgba(18, 22, 42, .85);
  z-index: 2;
}

/* ============================== THE SCREEN =============================== */

#m-screen-row {
  position: absolute;
  top: 16.2cqh; left: 3.4cqw; right: 3.4cqw;
  height: 54cqh;                       /* the monitor dominates the machine */
  display: flex;
  align-items: stretch;
  gap: 1.2cqw;
  z-index: 2;
}
.softcol {
  flex: 0 0 3.8cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3.4cqh;
}
.softkey {
  position: relative;
  height: 6.4cqh;
  background: var(--steel);
  border: 2.5px solid var(--outline);
  border-radius: 1.2cqh;
  box-shadow: inset 0 -3px 0 rgba(34, 26, 56, .3), inset 0 2px 0 rgba(255, 255, 255, .35);
  overflow: hidden;
}
.softkey::after {                              /* idle sequential glimmer */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  opacity: 0;
  animation: softGlimmer 4.2s linear infinite;
  animation-delay: calc(var(--i) * .6s);
}
@keyframes softGlimmer {
  0%, 82%, 100% { opacity: 0; transform: translateX(-100%); }
  86% { opacity: 1; }
  94% { opacity: 0; transform: translateX(100%); }
}

/* Retro reverse-video CRT: black glass, white phosphor text, red accents */
#m-screen {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--night-deep);
  border: 3px solid var(--outline);
  border-radius: 12px;
  padding: 8px;                                     /* the dark inner bezel */
  box-shadow:
    0 0 34px rgba(210, 225, 255, .16),              /* cool CRT spill */
    inset 0 0 0 2px #0A0D1D;
}
#scr {
  position: relative;
  width: 100%; height: 100%;
  background: #0A0E13;                              /* CRT black */
  border-radius: 8px;
  overflow: hidden;
  transition: background-color .15s linear;
}
#scr[data-mode="crashed"] { background: #170608; }  /* red-tinted black */
#scr[data-mode="crashed"].dimmed { background: #0C0305; transition: background-color .6s linear; }

/* scanlines + diagonal gloss sweep, above the text but nearly transparent */
#scr-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .045) 0 3px, transparent 3px 6px),
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .07) 46%, rgba(255, 255, 255, .07) 56%, transparent 64%);
}

/* the machine's face, top-left corner of the glass */
#scr-face {
  position: absolute;
  top: 4%; left: 3.5%;
  width: clamp(30px, 10.5cqw, 56px);
  height: auto;
  z-index: 4;
  opacity: .92;
  color: #F4EFFA;                    /* white phosphor face on the black CRT */
}
#scr-face[data-exp="dead"] { color: var(--danger); }
#scr-face[data-exp="panic"] { color: var(--danger); }
#scr-face .exp { display: none; }
#scr-face[data-exp="calm"]    .exp-calm    { display: block; }
#scr-face[data-exp="o"]       .exp-o       { display: block; }
#scr-face[data-exp="money"]   .exp-money   { display: block; }
#scr-face[data-exp="worried"] .exp-worried { display: block; }
#scr-face[data-exp="star"]    .exp-star    { display: block; }
#scr-face[data-exp="dead"]    .exp-dead    { display: block; }
#scr-face.pop { animation: facePop .3s var(--spring); }
@keyframes facePop { 0% { transform: scale(.55); } 100% { transform: scale(1); } }

/* screen pages */
.scr-page {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4cqh;
  padding: 2cqh 3cqw;
  text-align: center;
}
#scr[data-mode="pending"] #scr-pending { display: flex; }
#scr[data-mode="running"] #scr-running { display: flex; }
#scr[data-mode="crashed"] #scr-crash   { display: flex; }
#scr[data-mode="crashed"].dimmed .scr-page { opacity: .55; }
#scr[data-mode="crashed"].dimmed #scr-face { opacity: .45; }

/* ---- PENDING ---- */
.scr-toprow {
  font-size: 11px;
  font-size: max(12px, 2.1cqh);
  font-weight: 800;
  letter-spacing: .18em;
  color: rgba(244, 239, 250, .62);
}
#count-num {
  font-size: 48px;
  font-size: min(clamp(44px, 8vw, 104px), 16cqw);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #F4EFFA;
  text-shadow: 0 0 16px rgba(244, 239, 250, .4), 0 0 40px rgba(244, 239, 250, .14);
}
#count-num.pulse { animation: countPulse .3s var(--spring); }
@keyframes countPulse { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
#count-bar {
  width: 62%;
  height: 1.6cqh;
  border: 2.5px solid rgba(244, 239, 250, .4);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
#count-fill {
  display: block;
  width: 100%; height: 100%;
  background: var(--danger);                        /* red accent */
  border-radius: 999px;
  transform-origin: left center;
  will-change: transform;
}
#round-hash {
  pointer-events: auto;
  font-size: 10px;
  font-size: max(10px, 1.7cqh);
  font-family: Consolas, "Courier New", monospace;
  color: rgba(244, 239, 250, .6);
  text-decoration: none;
  background: rgba(255, 255, 255, .07);
  padding: .5cqh 2cqw;
  border-radius: 999px;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#round-hash:hover { text-decoration: underline; }

/* ---- RUNNING: LCD flavor (the primary multiplier now lives in the HUD) ---- */
#mult-big {
  font-size: 40px;
  font-size: min(clamp(40px, 7vw, 100px), 14.5cqw);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: #F4EFFA;                                   /* white phosphor */
  text-shadow: 0 0 18px rgba(244, 239, 250, .45), 0 0 46px rgba(244, 239, 250, .18);
  transition: opacity .25s;
}
#mult-big.pulse { animation: multPulse .3s var(--spring); }
@keyframes multPulse { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }
#mult-big.dim { opacity: .55; }

/* label on its own row, amount full-width beneath - big wins can never clip */
#disp-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4cqh;
  max-width: 96%;
}
#disp-label {
  font-size: 10px;
  font-size: min(max(11px, 2.3cqh), 4.8cqw);
  font-weight: 800;
  letter-spacing: .14em;
  color: rgba(244, 239, 250, .58);
  white-space: nowrap;
}
#dispensed-amount {
  font-size: 18px;
  /* one full row to itself: fits a 12-char amount at this cap */
  font-size: min(max(17px, 4.4cqh), 8.6cqw);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--danger);                             /* red accent */
  text-shadow: 0 0 12px rgba(255, 59, 78, .5);
  white-space: nowrap;
  max-width: 100%;
}
#scr-running.mine #dispensed-amount { color: var(--gold); text-shadow: 0 0 12px rgba(255, 201, 60, .5); }

#paid-chip {
  position: absolute;
  top: 2cqh; left: 50%;
  transform: translateX(-50%);
  background: var(--collect);
  color: #fff;
  border: 2.5px solid var(--outline);
  border-radius: 999px;
  padding: .8cqh 3cqw;
  font-size: 12px;
  font-size: max(13px, 2.6cqh);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(34, 26, 56, .35);
  animation: paidIn .5s var(--spring);
  z-index: 5;
}
@keyframes paidIn {
  0% { transform: translateX(-50%) translateY(-260%); }
  100% { transform: translateX(-50%) translateY(0); }
}

/* ---- CRASH (LCD) ---- */
#bust-label {
  font-size: 24px;
  font-size: min(clamp(26px, 5vw, 60px), 11.5cqw);
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--danger);                             /* red on black glass */
  text-shadow: 0 0 22px rgba(255, 59, 78, .55), 0 0 60px rgba(255, 59, 78, .25);
  animation: slamIn .45s var(--spring);
  white-space: nowrap;
}
@keyframes slamIn { 0% { transform: scale(3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
#crash-mult {
  font-size: 20px;
  font-size: max(22px, 4.6cqh);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: rgba(244, 239, 250, .88);
}

/* ---- marching bills along the screen bottom ---- */
#scr-ticker {
  position: absolute;
  left: 0; right: 0; bottom: 1cqh;
  height: 4.6cqh;
  overflow: hidden;
  z-index: 3;
  display: none;
  pointer-events: none;
  opacity: .9;
}
#scr[data-mode="running"] #scr-ticker { display: block; }
#scr-ticker-track {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  height: 100%;
  width: max-content;
  animation: tickerMove 6s linear infinite;
  will-change: transform;
}
@keyframes tickerMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
#scr-ticker-track img { height: 100%; width: auto; flex: 0 0 auto; }

/* cracked-glass overlay: pops in with the crash slam, holds until pending */
#fx-crack {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 4;                        /* over the pages, under glitch/scanlines */
  pointer-events: none;
  opacity: 0;
}
#fx-crack.show { animation: crackPop .35s var(--spring) forwards; }
@keyframes crackPop {
  0%   { transform: scale(.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* glitch overlay on crash */
#fx-glitch {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 5;
  pointer-events: none;
}
#fx-glitch.show { animation: glitchFx .8s steps(6) forwards; }
@keyframes glitchFx {
  0% { opacity: 1; transform: translateX(0); }
  50% { opacity: .85; transform: translateX(-4px); }
  100% { opacity: 0; transform: translateX(3px); }
}

/* =============================== CONSOLE ================================= */

#m-console {
  position: absolute;
  top: 72cqh; left: 8cqw; right: 8cqw;
  height: 6cqh;
  background: var(--panel);
  border: 3px solid var(--outline);
  border-radius: 2cqh;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .07), inset 0 -4px 8px rgba(0, 0, 0, .3);
  z-index: 3;
}
.slit {
  position: absolute;
  top: 37%;
  height: 27%;
  background: var(--night-deep);
  border: 2.5px solid var(--outline);
  border-radius: 999px;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .75);
}
#m-receipt-slot { left: 7%; width: 37%; }
#m-card-slot { left: 54%; width: 27%; }

#m-led {
  position: absolute;
  right: 4.5%; top: 50%;
  width: 2.4cqh; height: 2.4cqh;
  margin-top: -1.2cqh;
  border-radius: 50%;
  border: 2.5px solid var(--outline);
  background: var(--collect);
  box-shadow: 0 0 8px rgba(47, 190, 95, .8);
}
#machine[data-phase="pending"] #m-led { animation: ledBlink 1s steps(1) infinite; }
@keyframes ledBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
#machine[data-phase="crashed"] #m-led {
  background: var(--danger);
  box-shadow: 0 0 10px rgba(255, 59, 78, .9);
  animation: none;
}

/* receipt prints downward out of the slot (your cashout) */
#receipt-window {
  position: absolute;
  top: 71cqh;                    /* just under the receipt slit */
  left: 13cqw;
  width: 26cqw;
  height: 19cqh;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
}
#m-receipt {
  position: relative;
  width: 100%;
  height: 88%;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 12%, rgba(34, 26, 56, .16) 12% 17%, transparent 17% 29%) content-box,
    #F3EFDD;
  padding: 1.4cqh 2.4cqw 3cqh;
  border: 2.5px solid var(--outline);
  border-top: none;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 87.5% 100%, 75% 92%, 62.5% 100%,
                     50% 92%, 37.5% 100%, 25% 92%, 12.5% 100%, 0 92%);
  transform: translateY(-103%);
  transition: transform .3s cubic-bezier(.5, 0, .8, .4);
  will-change: transform;
}
#m-receipt.print { transform: translateY(0); transition: transform .4s cubic-bezier(.2, .8, .3, 1); }
#m-receipt .rc-total {
  position: absolute;
  left: 12%; right: 30%; bottom: 14%;
  height: 1.6cqh;
  background: var(--collect);
  border-radius: 999px;
  opacity: .85;
}

/* the bank card chunks in and gets swallowed */
#card-window {
  position: absolute;
  top: 60.6cqh;
  left: 54.5cqw;
  width: 20cqw;
  height: 8.4cqh;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;                     /* behind the console bar's border */
}
#m-card {
  position: absolute;
  top: 0; left: -3cqw;
  width: 26cqw;
  height: auto;
  transform: translateY(3.6cqh);                    /* fully swallowed */
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.3);   /* the chunk */
  will-change: transform;
}
#machine[data-phase="pending"] #m-card { transform: translateY(-1.8cqh); }  /* 60% out */

/* ================================ KEYPAD ================================= */

#m-keypad {
  position: absolute;
  top: 79.4cqh; left: 12cqw; right: 12cqw;
  height: 9.4cqh;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1.2cqh 1.8cqw;
  z-index: 2;
}
.kp-key {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--key-gray);
  border: 2.5px solid var(--outline);
  border-radius: 1.3cqh;
  box-shadow: 0 3px 0 0 #7E88B4, inset 0 2px 0 rgba(255, 255, 255, .4);
  color: #4A5280;
  font-weight: 800;
  font-size: 11px;
  font-size: max(11px, 2.3cqh);
  line-height: 1;
  user-select: none;
  transition: transform .06s linear, box-shadow .06s linear, background-color .06s linear;
}
.kp-key.pressed {
  transform: translateY(3px);
  box-shadow: 0 0 0 0 #7E88B4, inset 0 3px 5px rgba(34, 26, 56, .35);
  background-color: #99A4D2;
}
#key-red   { background: var(--danger);  box-shadow: 0 3px 0 0 #B32B39, inset 0 2px 0 rgba(255, 255, 255, .35); }
#key-amber { background: var(--warning); box-shadow: 0 3px 0 0 #C4861C, inset 0 2px 0 rgba(255, 255, 255, .35); }
#key-green { background: var(--collect); box-shadow: 0 3px 0 0 var(--collect-deep), inset 0 2px 0 rgba(255, 255, 255, .35); }
#key-red.pressed   { background: #D32B3D; box-shadow: 0 0 0 0 #B32B39, inset 0 3px 5px rgba(34, 26, 56, .4); }
#key-amber.pressed { background: #DE9A1B; box-shadow: 0 0 0 0 #C4861C, inset 0 3px 5px rgba(34, 26, 56, .4); }
#key-green.pressed { background: #27A452; box-shadow: 0 0 0 0 var(--collect-deep), inset 0 3px 5px rgba(34, 26, 56, .4); }

/* =============================== DISPENSER =============================== */

#m-dispenser {
  position: absolute;
  top: 90.6cqh; left: 9cqw; right: 9cqw;
  height: 6.6cqh;
  background: var(--steel);
  border: 3px solid var(--outline);
  border-radius: 2cqh;
  padding: .9cqh 2.4cqw 0;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35);
  z-index: 2;
}
#m-recess {
  position: relative;
  height: 58%;
  background: var(--night-deep);
  border: 2.5px solid var(--outline);
  border-radius: 1.4cqh;
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, .8);
}
#m-glowline {
  position: absolute;
  left: 5%; right: 5%; top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: var(--screen);
  border-radius: 3px;
  opacity: .3;
}
#machine[data-phase="running"] #m-glowline { animation: glowPulse 1s ease-in-out infinite; }
@keyframes glowPulse {
  0%, 100% { opacity: .3; box-shadow: 0 0 4px rgba(123, 240, 200, .3); }
  50% { opacity: .85; box-shadow: 0 0 14px rgba(123, 240, 200, .8); }
}
#m-glowline.flare {
  animation: glowFlare .6s ease-out !important;
}
@keyframes glowFlare {
  0% { opacity: 1; box-shadow: 0 0 26px rgba(123, 240, 200, 1), 0 0 60px rgba(123, 240, 200, .7); }
  100% { opacity: .3; box-shadow: 0 0 4px rgba(123, 240, 200, .3); }
}
#m-lip {
  height: 1.5cqh;
  margin-top: .8cqh;
  background: var(--key-gray);
  border: 2.5px solid var(--outline);
  border-radius: 999px;
}

/* the +$ floater rises over the screen (my cashout) */
#win-floater {
  position: absolute;
  top: 56cqh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  font-size: 26px;
  font-size: max(26px, 5.6cqh);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--collect);
  text-shadow: 0 0 16px rgba(47, 190, 95, .8), 0 2px 0 rgba(18, 22, 42, .6);
  animation: floatUp 1.6s var(--spring) forwards;
  pointer-events: none;
  white-space: nowrap;
}
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 24px) scale(.5); }
  20% { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  40% { transform: translate(-50%, -8px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -12cqh) scale(.95); }
}

/* ---- money pile builds at the machine's base while it dispenses ----
 * Child of #machine (cqw = machine width): bottom-center under the dispenser,
 * inside #machine-zone (z 2) so it renders BELOW the bill layer (z 6).
 * JS toggles .show and drives scale .5 -> 1 (1.5x -> 8x); the 1s transition
 * smooths the growth. It survives the crash and resets on round_pending. */
/* (money pile removed per client request - flowing bills carry the scene) */

/* ================== BILLS AT THE VIEWER + KACHING + HAND ================== */

#bill-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 6;
}
#bill-layer img {
  position: absolute;
  top: 0; left: 0;
  will-change: transform, opacity;
  pointer-events: none;
}

.fx { pointer-events: none; }
#fx-kaching { position: absolute; z-index: 7; }
#fx-kaching.show { display: block; animation: kaching .9s var(--spring) forwards; }
@keyframes kaching {
  0% { transform: scale(.2) rotate(-12deg); opacity: 0; }
  35% { transform: scale(1.25) rotate(4deg); opacity: 1; }
  70% { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: scale(1.05); opacity: 0; }
}

/* MEGA-win sparkles: 3 pooled imgs scale-pop and fade over 900ms */
.fx-sparkle {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  animation: sparklePop .9s ease-out forwards;
  will-change: transform, opacity;
}
@keyframes sparklePop {
  0%   { transform: scale(.2) rotate(-18deg); opacity: 0; }
  25%  { transform: scale(1.15) rotate(6deg); opacity: 1; }
  60%  { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(1.12); opacity: 0; }
}

/* other players' cashout floaters ("+$X Name") */
#floater-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 7;
}
.cash-floater {
  position: absolute;
  font-family: var(--arcade);
  font-size: 15px;
  color: var(--green-hi);
  text-shadow:
    -1.5px 0 var(--outline), 1.5px 0 var(--outline),
    0 -1.5px var(--outline), 0 1.5px var(--outline),
    0 3px 8px rgba(0, 0, 0, .6);
  white-space: nowrap;
  animation: cashFloat 2s ease-out forwards;
  will-change: transform, opacity;
}
@keyframes cashFloat {
  0% { opacity: 0; transform: translateY(16px) scale(.6); }
  15% { opacity: 1; transform: translateY(0) scale(1.1); }
  30% { transform: translateY(-8px) scale(1); }
  100% { opacity: 0; transform: translateY(-110px) scale(.95); }
}

#hand-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 8;
}
#hand-move {
  position: absolute;
  top: 0; left: 0;
  will-change: transform;
}
#hand-bob { will-change: transform; }
#hand {
  display: block;
  width: 220px;                      /* JS overrides: max(200px, 34% machine) */
  height: auto;
  filter: drop-shadow(-8px 12px 16px rgba(0, 0, 0, .5));
}

/* ============================================================================
 * ============================  FLOATING HUD  ===============================
 * ==========================================================================*/

/* ====================== HISTORY PILL STRIP (very top) ===================== */

#hud-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--strip-h);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  background: rgba(18, 22, 42, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 30;
}

.pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  border-radius: 3px;
  border: none;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: transform .12s var(--spring);
}
.pill:active { transform: scale(.92); }
.pill-low  { background: #E8E8F0; color: #333; }          /* crash < 2.00 */
.pill-win  { background: var(--green-hi); color: #143314; } /* >= 2.00 */
.pill-gold { background: var(--gold); color: #4A3405; }   /* >= 10.00 (+★) */
.pill-help {
  background: rgba(232, 232, 240, .16);
  color: #fff;
  font-weight: 900;
  padding: 4px 9px;
}
.pill.slide-in { animation: pillSlide .4s var(--spring); }
@keyframes pillSlide { from { transform: translateX(-140%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

#history-strip {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
#history-strip::-webkit-scrollbar { display: none; }

#hist-expand {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  opacity: .8;
}
#hist-expand:hover { opacity: 1; background: rgba(255, 255, 255, .1); }

/* centered logo on the strip */
#logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 26px;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}

/* history dropdown (last 30, verify links) */
#hist-dropdown {
  position: fixed;
  top: calc(var(--strip-h) + 6px);
  left: 8px;
  width: min(340px, 92vw);
  max-height: 60vh;
  overflow-y: auto;
  background: rgba(18, 22, 42, .95);
  backdrop-filter: blur(10px);
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  padding: 8px;
  z-index: 45;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
.hd-head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2px 4px 8px;
}
.hd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-top: 1px solid rgba(59, 67, 112, .45);
  text-decoration: none;
  color: var(--text);
  font-size: 12px;
}
.hd-row:hover { background: rgba(255, 255, 255, .05); }
.hd-round { color: var(--muted); font-family: Consolas, monospace; flex: 1; }

/* ======================== TOP-RIGHT ICONS + BALANCE ======================= */

#top-icons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
}
.hud-icon {
  position: relative;
  width: 26px; height: 26px;
  padding: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform .15s var(--spring);
}
.hud-icon:active { transform: scale(.85); }
.hud-icon img, .hud-icon svg { width: 20px; height: 20px; }
#players-count-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 15px; height: 15px;
  background: var(--neon-pink);
  color: #fff;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  padding: 0 3px;
}

#balance-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(18, 22, 42, .8);
  border-radius: 999px;
  padding: 4px 10px 4px 7px;
  font-weight: 800;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
#balance-pill .icon { width: 16px; height: 16px; }
#fake-tag {
  background: rgba(255, 178, 36, .18);
  border: 1px solid var(--warning);
  color: var(--warning);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .06em;
  padding: 1px 4px;
  border-radius: 4px;
}
#balance-pill.flash-up { animation: balPop .45s var(--spring); }
@keyframes balPop { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* settings popover */
#settings-pop {
  position: fixed;
  top: calc(var(--strip-h) + 6px);
  right: 8px;
  width: 190px;
  background: rgba(18, 22, 42, .95);
  backdrop-filter: blur(10px);
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  padding: 10px;
  z-index: 45;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
}
.sp-reset {
  border: 1px solid var(--panel-line);
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  padding: 7px 0;
  cursor: pointer;
}
.sp-reset:hover { border-color: var(--danger); color: var(--danger); }

/* language switcher chips (settings popover) */
/* The language row stacks: the label sits above the chips, which then split the
   full popover width. Laid out side-by-side the Georgian chip label pushed the
   English one past the popover edge and it got clipped. */
.sp-row-lang {
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}
.lang-chips { display: flex; gap: 6px; }
.sp-row-lang .lang-chip { flex: 1 1 0; min-width: 0; text-align: center; }
.lang-chip {
  border: 1px solid var(--panel-line);
  background: var(--panel);
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  padding: 4px 9px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
}
.lang-chip:hover { border-color: var(--steel); }
.lang-chip.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(255, 201, 60, .12);
  box-shadow: inset 0 0 0 1px var(--gold);
}

/* rounded switch (used by settings music + bet-card Auto) */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 4px 0 8px;
  border: none;
  border-radius: 999px;
  background: #2A2140;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color .2s;
}
.switch i {
  display: block;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #6B6486;
  transition: background-color .2s, transform .2s var(--spring);
}
.switch.on { background: rgba(126, 217, 87, .25); color: var(--green-hi); }
.switch.on i { background: var(--green-hi); }
#music-toggle { padding: 0 3px; width: 38px; justify-content: flex-start; }
#music-toggle.on i { transform: translateX(16px); }

/* Auto withdrawal: a real switch. It used to hold an inner "Auto" label that
   pinned the knob hard right with only 2px of travel, so flipping it changed
   colour but the knob never visibly moved and it read as broken. Now a bare
   38px track with the same 16px throw as the music toggle. */
#auto-toggle { padding: 0 3px; width: 38px; justify-content: flex-start; }
#auto-toggle.on i { transform: translateX(16px); }

/* ================= THE MULTIPLIER — TOP-LEFT, ARCADE STYLE ================ */

#mult-hud {
  position: fixed;
  top: calc(var(--strip-h) + 14px);
  left: 22px;
  z-index: 20;
  pointer-events: none;
}
#hud-mult {
  font-family: var(--arcade);
  font-size: clamp(56px, 8vw, 120px);
  line-height: .95;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  will-change: transform;
}
#hud-x {
  color: var(--green-hi);
  font-size: .62em;
  margin-right: .02em;
  text-shadow:
    -3px 0 var(--outline), 3px 0 var(--outline),
    0 -3px var(--outline), 0 3px var(--outline),
    0 6px 14px rgba(0, 0, 0, .55);
}
#hud-mult-num {
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow:
    -4px 0 var(--outline), 4px 0 var(--outline),
    0 -4px var(--outline), 0 4px var(--outline),
    0 8px 18px rgba(0, 0, 0, .6);
}
#hud-mult.pulse { animation: hudPulse .3s var(--spring); }
@keyframes hudPulse { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

#mult-hud[data-mode="pending"] #hud-mult,
#mult-hud[data-mode="idle"] #hud-mult { opacity: .4; }
#mult-hud[data-mode="crashed"] #hud-mult-num,
#mult-hud[data-mode="crashed"] #hud-x { color: var(--danger); }

#hud-count {
  font-family: var(--arcade);
  font-size: clamp(20px, 2.6vw, 34px);
  color: #fff;
  opacity: .85;
  margin-top: 2px;
  text-shadow:
    -2.5px 0 var(--outline), 2.5px 0 var(--outline),
    0 -2.5px var(--outline), 0 2.5px var(--outline);
}

#hud-crash {
  font-family: var(--arcade);
  font-size: clamp(24px, 3.4vw, 44px);
  color: #fff;
  margin-top: 4px;
  white-space: nowrap;
  text-shadow:
    -3px 0 var(--danger), 3px 0 var(--danger),
    0 -3px var(--danger), 0 3px var(--danger),
    0 6px 16px rgba(255, 59, 78, .5);
  animation: crashSlam .5s var(--spring);
}
@keyframes crashSlam { 0% { transform: scale(3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ====================== BOTTOM BET CARD (floating) ======================== */

#bet-card {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, 94vw);
  background: var(--card-purple);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),      /* subtle inner top highlight */
    0 14px 40px rgba(0, 0, 0, .5);
  padding: 10px 14px 8px;
  z-index: 25;
  animation: cardUp .55s var(--spring) backwards;
}
@keyframes cardUp { from { transform: translate(-50%, 140%); } to { transform: translate(-50%, 0); } }

.bc-row { display: flex; align-items: center; gap: 8px; }

/* Row 1: auto withdrawal */
.bc-auto { font-size: 12px; margin-bottom: 8px; }
#auto-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #6B6486;
  transition: background-color .2s, box-shadow .2s;
  flex: 0 0 auto;
}
#auto-dot.on { background: var(--green-hi); box-shadow: 0 0 8px rgba(126, 217, 87, .8); }
.bc-label { color: rgba(244, 239, 250, .8); font-weight: 600; }
#auto-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(18, 22, 42, .7);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: text;
}
#auto-chip .ax { color: var(--green-hi); font-weight: 800; font-size: 11px; }
#auto-collect {
  width: 44px;
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 0;
  text-align: left;
}
#auto-collect:focus { outline: none; }
#auto-toggle { margin-left: auto; height: 24px; }

/* Row 2: amount + THE BUTTON */
.bc-main { align-items: stretch; margin-bottom: 8px; }
#amount-box {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(18, 22, 42, .45);
  border-radius: 10px;
  padding: 4px 8px;
}
#bet-amount {
  flex: 1 1 auto;
  min-width: 0;
  width: 40px;
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  padding: 0;
}
#bet-amount:focus { outline: none; }
#amount-box .cur { color: rgba(244, 239, 250, .75); font-weight: 800; font-size: 16px; }
.stepper {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s var(--spring), background-color .15s;
}
.stepper:hover { background: rgba(255, 255, 255, .22); }
.stepper:active { transform: scale(.88); }

/* THE BUTTON: chunky glossy parallelogram */
#main-action {
  flex: 0 0 auto;
  min-width: 150px;
  min-height: 56px;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transform: skewX(-8deg);
  background: linear-gradient(180deg, var(--green-hi) 0%, var(--green-lo) 100%);
  box-shadow:
    inset 0 12px 0 rgba(255, 255, 255, .12),     /* top gloss */
    inset 0 -3px 0 #2E6B1E,                      /* dark green bottom bevel */
    0 6px 16px rgba(0, 0, 0, .4);
  transition: transform .12s var(--spring), filter .12s, box-shadow .12s;
  will-change: transform;
  padding: 4px 14px;
}
#main-action:not(:disabled):hover {
  filter: brightness(1.08);
  transform: skewX(-8deg) translateY(-2px);
}
#main-action:not(:disabled):active {
  transform: skewX(-8deg) translateY(2px);
  box-shadow:
    inset 0 12px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 #2E6B1E,
    0 2px 8px rgba(0, 0, 0, .4);
}
#main-action:disabled { cursor: default; }

.btn-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transform: skewX(8deg);                        /* un-skew the content */
}
.btn-bill { width: 22px; height: 22px; flex: 0 0 auto; }
.btn-text { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
#main-action-label {
  font-family: var(--arcade);
  font-size: 20px;
  color: #fff;
  letter-spacing: .02em;
  white-space: nowrap;
  text-shadow:
    -1.5px 0 rgba(34, 26, 56, .55), 1.5px 0 rgba(34, 26, 56, .55),
    0 -1.5px rgba(34, 26, 56, .55), 0 1.5px rgba(34, 26, 56, .55);
}
#main-action-sub {
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .92);
  white-space: nowrap;
}

/* button states */
#main-action.st-cancel, #main-action.st-cancel-loading {
  background: linear-gradient(180deg, #FF5A5A 0%, #C93A44 100%);
  box-shadow:
    inset 0 12px 0 rgba(255, 255, 255, .12),
    inset 0 -3px 0 #8A222C,
    0 6px 16px rgba(0, 0, 0, .4);
}
#main-action.st-cashout {
  animation: cashoutGlow 1.1s ease-in-out infinite;
}
#main-action.st-cashout #main-action-sub {
  color: #D8FFC2;
  animation: subPulse 1.1s ease-in-out infinite;
}
@keyframes cashoutGlow {
  0%, 100% { box-shadow: inset 0 12px 0 rgba(255,255,255,.12), inset 0 -3px 0 #2E6B1E, 0 0 14px rgba(126, 217, 87, .45); }
  50%      { box-shadow: inset 0 12px 0 rgba(255,255,255,.12), inset 0 -3px 0 #2E6B1E, 0 0 30px rgba(126, 217, 87, .85); }
}
@keyframes subPulse { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
#main-action.st-wait, #main-action.st-done, #main-action.st-busted,
#main-action.st-withdraw-loading, #main-action.st-cashout-loading {
  filter: none;
}
#main-action.st-wait {
  background: linear-gradient(180deg, #5A5470 0%, #423C57 100%);
  box-shadow: inset 0 12px 0 rgba(255, 255, 255, .06), inset 0 -3px 0 #2C2740, 0 6px 16px rgba(0, 0, 0, .35);
}
#main-action.st-done {
  background: linear-gradient(180deg, #3E9B52 0%, #2C6E3B 100%);
  box-shadow: inset 0 12px 0 rgba(255, 255, 255, .08), inset 0 -3px 0 #1D4A28, 0 6px 16px rgba(0, 0, 0, .35);
}
#main-action.st-busted {
  background: linear-gradient(180deg, #8A3A44 0%, #63272F 100%);
  box-shadow: inset 0 12px 0 rgba(255, 255, 255, .06), inset 0 -3px 0 #431A20, 0 6px 16px rgba(0, 0, 0, .35);
}
#main-action.st-withdraw-loading, #main-action.st-cashout-loading { opacity: .85; }

/* Row 3: quick chips */
.bc-chips { margin-bottom: 2px; }
.chip {
  border: none;
  border-radius: 7px;
  background: rgba(18, 22, 42, .6);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 12px;
  cursor: pointer;
  transition: transform .12s var(--spring), background-color .15s;
}
.chip:hover { background: rgba(18, 22, 42, .9); }
.chip:active { transform: scale(.9); }
.chip-gap { flex: 1; }

#bet-limits { padding-top: 5px; font-size: 10px; text-align: center; opacity: .8; }

/* ======================= PLAYERS PANEL (overlay) ========================== */

#players-drawer {
  position: fixed;
  top: calc(var(--strip-h) + 6px);
  right: 8px;
  bottom: auto;
  width: min(340px, 92vw);
  max-height: calc(100vh - var(--strip-h) - 140px);
  background: rgba(18, 22, 42, .95);
  backdrop-filter: blur(10px);
  border: 1px solid var(--panel-line);
  border-radius: 12px;
  transform: translateX(calc(100% + 20px));
  transition: transform .35s var(--spring);
  z-index: 40;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  overflow: hidden;
}
#players-drawer.open { transform: translateX(0); }

#players-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  font-size: 15px;
  border-bottom: 1px solid var(--panel-line);
}
#players-head .icon { width: 20px; height: 20px; }
#players-count { color: var(--muted); font-weight: 600; font-size: 13px; }
#players-close { margin-left: auto; }

#players-body { flex: 1; overflow-y: auto; padding: 8px 10px; }
#players-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#players-table th {
  text-align: left;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 6px;
}
#players-table td { padding: 6px; border-top: 1px solid rgba(59, 67, 112, .5); font-variant-numeric: tabular-nums; }
#players-table tr.me td { background: rgba(255, 201, 60, .1); color: var(--gold); font-weight: 700; }
.st-playing, .st-betting { color: var(--neon-blue); }
.st-collected { color: var(--collect); }
.st-busted { color: var(--danger); }
.win-pos { color: var(--collect); font-weight: 700; }
#players-empty { padding: 16px 6px; }

/* =========================== RECONNECT OVERLAY ============================ */

/* No modal card: the blurred backdrop carries the "paused" read, and the only
 * loader on screen is the spinner. Keep this the SOLE loader after boot —
 * the splash (#splash) must be fully hidden before this is revealed. */
#reconnect-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 15, 32, .58);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(10px) saturate(.85);
  -webkit-backdrop-filter: blur(10px) saturate(.85);
  animation: rcFade .2s ease-out;
}
@keyframes rcFade { from { opacity: 0; } to { opacity: 1; } }
#reconnect-card {
  position: relative;
  text-align: center;
  padding: 0;
  background: none;
  border: 0;
}
.spinner {
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border: 4px solid rgba(255, 255, 255, .16);
  border-top-color: var(--screen);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#reconnect-text {
  position: relative;
  font-weight: 800;
  letter-spacing: .04em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .75);
}

/* ================================= TOASTS ================================= */

#toasts {
  position: fixed;
  top: calc(var(--strip-h) + 10px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 90;
  pointer-events: none;
  width: min(420px, 92vw);
}
.toast {
  background: var(--danger);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  animation: toastIn .35s var(--spring);
  text-align: center;
}
.toast.info { background: var(--panel); border: 1px solid var(--panel-line); }
@keyframes toastIn { from { transform: translateY(-14px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================== RESPONSIVE ================================ */

@media (max-width: 900px) {
  #machine-zone { padding-left: 0; }
  #machine {
    height: 100%;
    height: min(100cqh, calc(100cqw * 448 / 320));
  }
}

@media (max-width: 700px) {
  /* multiplier smaller top-left */
  #hud-mult { font-size: clamp(40px, 12vw, 64px); }
  #mult-hud { left: 14px; }

  /* bet card becomes a full-width bottom sheet */
  #bet-card {
    bottom: 0;
    width: 100vw;
    border-radius: 14px 14px 0 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  @keyframes cardUp { from { transform: translate(-50%, 140%); } to { transform: translate(-50%, 0); } }

  /* Machine must fit ABOVE the bottom sheet with the dispenser visible. */
  #machine {
    height: min(calc(100svh - 262px), calc(96vw * 448 / 320)); /* fallback */
    height: min(100cqh, calc(96cqw * 448 / 320));
    max-height: 100%;
  }
  #machine-zone {
    align-items: flex-start;
    padding-top: calc(var(--strip-h) + 8px);
    padding-bottom: 212px;   /* bottom sheet (~200px) + breathing room */
  }

  /* money flies OVER the bottom sheet so the payout is always visible */
  #bill-layer { z-index: 26; }

  #logo { height: 20px; }
  #balance-pill { font-size: 11px; }
  #main-action { min-width: 128px; min-height: 52px; }
  #main-action-label { font-size: 17px; }
}

/* very narrow phones: the centered logo collides with the balance pill */
@media (max-width: 520px) {
  #logo { display: none; }
}

/* ==================== MOBILE: history gets its own row ====================
 * Crime Empire pattern: row 1 = balance + icons, row 2 = full-width
 * horizontally-scrollable crash-history pills, larger and high-contrast. */
@media (max-width: 700px) {
  :root { --strip-h: 78px; }        /* everything below repositions off this */

  #hud-top {
    flex-wrap: wrap;
    height: var(--strip-h);
    padding: 5px 8px 7px;
    row-gap: 5px;
    align-content: center;
  }
  /* row 1: balance left, icon buttons right */
  #top-icons {
    order: -1;
    width: 100%;
    margin-left: 0;
  }
  #balance-pill { margin-right: auto; }

  /* row 2: ? + pills + expand chevron, full width.
     flex-basis 0 (not auto) or the pill row claims its content width,
     wraps to a third row and pushes the balance row off-screen. */
  #history-strip { flex: 1 1 0; min-width: 0; gap: 7px; }
  .pill {
    font-size: 14px;
    padding: 7px 13px;
    border-radius: 5px;
  }
  .pill-help { padding: 7px 11px; }
  #hist-expand { padding: 6px 8px; font-size: 16px; }
}

/* ============================================================================
 * FEATURE 1: BET QUEUING — gold "BET NEXT ROUND" / "QUEUED ✓" button states
 * ==========================================================================*/

/* gold, fully enabled: replaces disabled WAITING when you have no live bet */
#main-action.st-queue {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  box-shadow:
    inset 0 12px 0 rgba(255, 255, 255, .18),
    inset 0 -3px 0 #A66A10,
    0 6px 16px rgba(0, 0, 0, .4);
}

/* armed: gold outline style, tap again to cancel */
#main-action.st-queued {
  background: rgba(255, 201, 60, .10);
  box-shadow:
    inset 0 0 0 3px var(--gold),
    0 6px 16px rgba(0, 0, 0, .35);
}
#main-action.st-queued #main-action-label { color: var(--gold); }
#main-action.st-queued #main-action-sub { color: rgba(255, 201, 60, .85); }

/* both queue labels are longer than BET/CASH OUT — size down a notch */
#main-action.st-queue #main-action-label,
#main-action.st-queued #main-action-label { font-size: 15px; }

/* small "queued" chip on bet card row 1 */
#queued-chip {
  background: rgba(255, 201, 60, .14);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ============================================================================
 * FEATURE 2: TENSION ESCALATION — the machine panics as the multiplier climbs
 * Classes are toggled by applyEscalation() (rAF) and stripped by
 * resetEscalation() on round_pending / round_crash. Transform / opacity /
 * filter only — nothing here touches layout.
 * ==========================================================================*/

/* ---- new faces: nervous (2.5x+) and panic (9x+) ---- */
#scr-face[data-exp="nervous"] .exp-nervous { display: block; }
#scr-face[data-exp="panic"]   .exp-panic   { display: block; }

/* nervous: pupils dart +/-2px */
#scr-face[data-exp="nervous"] .nv-eyes { animation: eyeDart 1.4s linear infinite; }
@keyframes eyeDart {
  0%, 22%   { transform: translateX(0); }
  27%, 45%  { transform: translateX(-2px); }
  50%, 72%  { transform: translateX(2px); }
  77%, 100% { transform: translateX(0); }
}

/* panic: open mouth wobbles (scaleY oscillation) */
#scr-face[data-exp="panic"] .pk-mouth {
  transform-box: fill-box;
  transform-origin: center;
  animation: mouthWobble .3s ease-in-out infinite alternate;
}
@keyframes mouthWobble { from { transform: scaleY(.72); } to { transform: scaleY(1.18); } }

/* ---- cyan sweat drops beside the face (5x+; double rate at 9x+) ---- */
#sweat {
  position: absolute;
  top: 4%;
  left: calc(3.5% + clamp(30px, 10.5cqw, 56px) - 8px);   /* top-right of the face */
  width: 18px; height: 30px;
  z-index: 5;
  pointer-events: none;
  display: none;
}
#scr.sweat #sweat { display: block; }
#sweat .sd {
  position: absolute;
  top: 0;
  width: 7px; height: 10px;
  background: var(--neon-blue);
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;      /* teardrop-ish */
  box-shadow: 0 0 4px rgba(77, 201, 255, .7);
  opacity: 0;
  will-change: transform, opacity;
}
#sweat .sd-1 { left: 8px; animation: sweatFall 1.6s linear infinite; }
#sweat .sd-2 { left: 0; display: none; }
#scr.panic #sweat .sd-1 { animation-duration: .8s; }
#scr.panic #sweat .sd-2 { display: block; animation: sweatFall .8s linear .4s infinite; }
@keyframes sweatFall {
  0%   { transform: translateY(0) scale(.5); opacity: 0; }
  18%  { transform: translateY(3px) scale(1); opacity: .95; }
  100% { transform: translateY(16px) scale(.9); opacity: 0; }
}

/* ---- LCD red panic pulse (9x+), faster + 4% constant tint at 12x+ ---- */
#scr-red {
  position: absolute;
  inset: 0;
  z-index: 5;                        /* over the pages/face, under the scanlines */
  pointer-events: none;
  background: #FF2038;
  opacity: 0;
}
#scr.overdrive { --red-base: .04; }                    /* 12x+: 4% red screen tint */
#scr.panic #scr-red { animation: redPulse .83s ease-in-out infinite; }  /* ~1.2Hz */
#scr.overdrive #scr-red { animation-duration: .6s; }
#scr.frenzy #scr-red { animation-duration: .45s; }     /* 15x+: full panic */
@keyframes redPulse {
  0%, 100% { opacity: var(--red-base, 0); }
  50%      { opacity: calc(var(--red-base, 0) + .12); }
}

/* ---- scanlines scroll at 12x+ (background-position only) ---- */
#scr.overdrive #scr-overlay { animation: scanScroll .5s linear infinite; }
@keyframes scanScroll {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 6px, 0 0; }            /* one scanline period */
}

/* ---- marquee sign flickers above 6x (intermittent ~90ms steps) ---- */
#m-marquee.flicker { animation: mqFlicker 1.8s steps(1, end) infinite; }
@keyframes mqFlicker {
  0%, 100% { opacity: 1; filter: brightness(1); }
  5%   { opacity: .72; filter: brightness(.6); }
  10%  { opacity: 1; filter: brightness(1.15); }
  15%  { opacity: .85; filter: brightness(.75); }
  20%  { opacity: 1; filter: brightness(1); }
  55%  { opacity: .65; filter: brightness(.5); }
  60%  { opacity: 1; filter: brightness(1.1); }
  65%  { opacity: 1; filter: brightness(1); }
  85%  { opacity: .8; filter: brightness(.7); }
  90%  { opacity: 1; filter: brightness(1); }
}

/* ---- card-slot LED goes blinking red above 10x ---- */
#m-led.led-panic {
  background: var(--danger);
  box-shadow: 0 0 10px rgba(255, 59, 78, .9);
  animation: ledPanic .6s steps(1, end) infinite;
}
@keyframes ledPanic { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

/* ---- dispenser lip rattles from the cash volume above 10x ---- */
#m-lip.clatter { animation: lipClatter .08s linear infinite; will-change: transform; }
@keyframes lipClatter {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(.6deg); }
  75%      { transform: rotate(-.6deg); }
}

/* ============================================================================
 * FEATURE 3: WIN CELEBRATION — white flash + center amount slam (BIG/MEGA)
 * Lives inside #stage (z-index 0 root) so it can never cover the fixed
 * bet card (z 25) or the HUD. Other players' wins keep their small floaters.
 * ==========================================================================*/

/* quick white screen flash: .35 -> 0 in 250ms */
#win-flash {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
#win-flash.go { animation: winFlash .25s linear; }
@keyframes winFlash { from { opacity: .35; } to { opacity: 0; } }

/* the amount slam, centered on the stage */
#win-slam {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
  text-align: center;
}
#win-slam-amt {
  font-family: var(--arcade);
  font-size: clamp(44px, 8vw, 104px);
  line-height: 1;
  color: var(--green-hi);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow:                                  /* same stack as the HUD mult */
    -4px 0 var(--outline), 4px 0 var(--outline),
    0 -4px var(--outline), 0 4px var(--outline),
    0 8px 18px rgba(0, 0, 0, .6);
  opacity: 0;
  will-change: transform, opacity;
}
#win-slam.mega #win-slam-amt { font-size: clamp(57px, 10.4vw, 135px); }   /* 1.3x */
#win-slam.go #win-slam-amt { animation: winSlamAmt 1.95s ease-out forwards; }
@keyframes winSlamAmt {
  0%   { transform: scale(3); opacity: 0; }     /* slam in… */
  9%   { transform: scale(.92); opacity: 1; }   /* …spring undershoot… */
  15%  { transform: scale(1.04); }
  20%  { transform: scale(1); }                 /* …settle */
  80%  { transform: scale(1); opacity: 1; }     /* hold ~1.4s */
  100% { transform: scale(1.03); opacity: 0; }  /* fade */
}

/* MEGA GRAB sub-label slams in just after the amount */
#win-slam-sub {
  font-family: var(--arcade);
  font-size: clamp(22px, 3.6vw, 46px);
  line-height: 1;
  color: var(--gold);
  white-space: nowrap;
  text-shadow:
    -3px 0 var(--outline), 3px 0 var(--outline),
    0 -3px var(--outline), 0 3px var(--outline),
    0 6px 14px rgba(0, 0, 0, .55);
  opacity: 0;
  will-change: transform, opacity;
}
#win-slam.go #win-slam-sub { animation: winSlamSub 1.83s ease-out .12s forwards; }
@keyframes winSlamSub {
  0%   { transform: scale(2.6); opacity: 0; }
  10%  { transform: scale(1); opacity: 1; }
  78%  { opacity: 1; }
  100% { opacity: 0; }
}

/* MEGA: the existing rainbow layer pulses to .5 for 1.5s */
#stage.rainbow-pulse #rainbow { opacity: .5; transition: opacity .3s linear; }

/* ============================================================================
 * SPLASH LOADER — boot-only full-viewport overlay. Rendered by plain HTML/CSS
 * before any JS runs (no flash of the half-loaded game). JS drives the mint
 * LCD progress bar, swaps it for TAP TO START, then scale+fades the whole
 * thing away (350ms) and display:nones it. Reconnects never re-show this.
 * ==========================================================================*/

#splash {
  position: fixed;
  inset: 0;
  z-index: 200;                 /* above EVERYTHING: bet card 25, reconnect 100 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 42% at 50% 40%,
      rgba(61, 77, 184, .30) 0%, rgba(61, 77, 184, .10) 48%, transparent 72%),
    radial-gradient(ellipse 40% 30% at 50% 40%,
      rgba(123, 240, 200, .10) 0%, transparent 70%),
    #0B0E1C;
  transition: transform .4s ease, opacity .4s ease;
}
#splash.splash-hide {
  transform: scale(1.06);
  opacity: 0;
  pointer-events: none;
}
/* faint conic sheen slowly rotating behind everything */
#splash::before {
  content: "";
  position: absolute;
  width: 150vmax; height: 150vmax;
  left: 50%; top: 40%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(123, 240, 200, .05) 40deg, transparent 90deg,
    transparent 180deg, rgba(61, 77, 184, .08) 220deg, transparent 270deg);
  animation: splashSheen 18s linear infinite;
  pointer-events: none;
}
@keyframes splashSheen { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* drifting banknotes in the background */
#splash-bills { position: absolute; inset: 0; pointer-events: none; }
/* Real banknote art, not the old CSS-drawn green rectangle with a fake oval
   "portrait" — that was left over from the cartoon pack and no longer matches
   the bills in the game. ~3.4x the old 46x24, kept at the note's own 2.37
   aspect ratio. The per-child scale() transforms below vary them 0.7x-1.15x. */
#splash-bills i {
  position: absolute;
  width: 158px; height: 67px;
  border-radius: 3px;
  background: url("/assets/ai/opt/bill-single.webp") center / contain no-repeat;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
  opacity: 0;
  animation: splashBill linear infinite;
}
#splash-bills i:nth-child(1){ left: 8%;  animation-duration: 9s;  animation-delay: 0s;   transform: scale(.8); }
#splash-bills i:nth-child(2){ left: 22%; animation-duration: 11s; animation-delay: 1.4s; transform: scale(1.15); }
#splash-bills i:nth-child(3){ left: 37%; animation-duration: 8s;  animation-delay: 3.1s; }
#splash-bills i:nth-child(4){ left: 52%; animation-duration: 12s; animation-delay: .6s;  transform: scale(.7); }
#splash-bills i:nth-child(5){ left: 64%; animation-duration: 10s; animation-delay: 2.2s; transform: scale(1.05); }
#splash-bills i:nth-child(6){ left: 76%; animation-duration: 9.5s;animation-delay: 4s;   }
#splash-bills i:nth-child(7){ left: 88%; animation-duration: 11.5s;animation-delay:1s;   transform: scale(.9); }
#splash-bills i:nth-child(8){ left: 95%; animation-duration: 8.5s;animation-delay: 3.6s; transform: scale(.75); }
@keyframes splashBill {
  0%   { top: -8%;  opacity: 0; }
  10%  { opacity: .5; }
  90%  { opacity: .5; }
  100% { top: 108%; opacity: 0; }
}

/* the centered stack */
#splash-core {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

/* spinning gold ₾ coin with an orbiting glow ring */
#splash-coin {
  position: relative;
  width: 96px; height: 96px;
  display: grid;
  place-items: center;
}
.sc-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid rgba(255, 201, 60, .18);
  border-top-color: var(--gold);
  border-right-color: var(--gold);
  box-shadow: 0 0 22px rgba(255, 201, 60, .35);
  animation: scSpin 1s linear infinite;
}
@keyframes scSpin { to { transform: rotate(360deg); } }
.sc-face {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFE08A 0%, var(--gold) 45%, var(--gold-deep) 100%);
  border: 3px solid #B47A12;
  display: grid;
  place-items: center;
  box-shadow: inset 0 3px 6px rgba(255, 255, 255, .5), inset 0 -4px 8px rgba(120, 70, 8, .5);
  animation: scFlip 2.6s ease-in-out infinite;
}
.sc-face b {
  font-family: var(--arcade);
  font-size: 34px;
  color: #7A4E08;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}
@keyframes scFlip {
  0%, 100% { transform: rotateY(0deg); }
  50%      { transform: rotateY(180deg); }
}

/* the neon wordmark, gentle pulse */
#splash-logo {
  width: min(66vw, 340px);
  height: auto;
  animation: splashLogoPulse 2.6s ease-in-out infinite;
  will-change: filter, transform;
}
@keyframes splashLogoPulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 77, 141, .28)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 26px rgba(255, 77, 141, .60)); transform: scale(1.015); }
}

/* glossy progress bar with a moving shimmer */
#splash-load {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
#splash-bar {
  position: relative;
  width: min(70vw, 320px);
  height: 20px;
  background: #080B18;
  border: 3px solid var(--outline);
  border-radius: 999px;
  padding: 3px;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
}
#splash-fill {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #9FF7D6 0%, var(--screen) 55%, #34C79E 100%);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s cubic-bezier(.4, 1.2, .5, 1);
  box-shadow: 0 0 calc(4px + var(--p, 0) * 18px) rgba(123, 240, 200, .9);
  will-change: transform;
}
#splash-fill::after {                            /* travelling shimmer */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(100deg,
    transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: splashShimmer 1.3s ease-in-out infinite;
}
@keyframes splashShimmer { to { transform: translateX(220%); } }
#splash-pct {
  font-family: var(--arcade);
  font-size: 15px;
  letter-spacing: .16em;
  color: var(--screen);
  text-shadow: 0 0 10px rgba(123, 240, 200, .55);
  font-variant-numeric: tabular-nums;
}

/* TAP TO START: the bet button's glossy green parallelogram, pulsing */
#splash-start {
  border: none;
  cursor: pointer;
  border-radius: 8px;
  min-width: 232px;
  min-height: 62px;
  padding: 8px 28px;
  transform: skewX(-8deg);
  background: linear-gradient(180deg, var(--green-hi) 0%, var(--green-lo) 100%);
  animation: splashStartPulse 1.5s ease-in-out infinite;
  will-change: transform, box-shadow;
}
@keyframes splashStartPulse {
  0%, 100% {
    transform: skewX(-8deg) scale(1);
    box-shadow:
      inset 0 12px 0 rgba(255, 255, 255, .12),
      inset 0 -3px 0 #2E6B1E,
      0 6px 16px rgba(0, 0, 0, .4),
      0 0 12px rgba(126, 217, 87, .35);
  }
  50% {
    transform: skewX(-8deg) scale(1.045);
    box-shadow:
      inset 0 12px 0 rgba(255, 255, 255, .12),
      inset 0 -3px 0 #2E6B1E,
      0 6px 16px rgba(0, 0, 0, .4),
      0 0 28px rgba(126, 217, 87, .7);
  }
}
#splash-start .ss-label {
  display: block;
  transform: skewX(8deg);                        /* un-skew the label */
  font-family: var(--arcade);
  font-size: 24px;
  color: #fff;
  letter-spacing: .03em;
  white-space: nowrap;
  text-shadow:
    -1.5px 0 rgba(34, 26, 56, .55), 1.5px 0 rgba(34, 26, 56, .55),
    0 -1.5px rgba(34, 26, 56, .55), 0 1.5px rgba(34, 26, 56, .55);
}

/* amber prototype tag pinned to the bottom */
#splash-tag {
  position: absolute;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 178, 36, .12);
  border: 1px solid var(--warning);
  color: var(--warning);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
  padding: 3px 9px;
  border-radius: 6px;
  white-space: nowrap;
}

/* ============================================================================
 * GEORGIAN (ka) FIT GUARDS — Georgian strings run longer than English and
 * Noto Sans Georgian renders wider than Lilita One. Size down the long
 * labels so the main action button and bet-card row 1 never overflow.
 * ==========================================================================*/

html[lang="ka"] #main-action-label { font-size: 15px; }
html[lang="ka"] #main-action.st-queue #main-action-label,
html[lang="ka"] #main-action.st-queued #main-action-label { font-size: 13px; }
html[lang="ka"] .bc-auto { font-size: 11px; }
html[lang="ka"] #queued-chip { font-size: 8px; letter-spacing: .02em; }
html[lang="ka"] #hud-crash { font-size: clamp(20px, 3vw, 38px); }
html[lang="ka"] #bust-label { letter-spacing: .04em; }
html[lang="ka"] .scr-toprow { letter-spacing: .08em; }
html[lang="ka"] #splash-start .ss-label { font-size: 20px; }

@media (max-width: 700px) {
  html[lang="ka"] #main-action-label { font-size: 13px; }
}

/* ============================================================================
 * LITE MODE — html.lite is toggled by JS at boot (≤700px viewport, short
 * coarse-pointer landscape viewport ≤540px tall, ≤4 cores, or
 * prefers-reduced-motion) and by the runtime FPS guard. Kills the GPU-
 * expensive effects: backdrop-filter, big glow shadows, multi-shadow text
 * stacks, the blurred godray/rainbow layers, the whole-machine breathe
 * animation and animated drop-shadow filters. Desktop (no .lite) is
 * visually unchanged.
 * ==========================================================================*/

/* backdrop-filter blur samples the whole scene every frame -> solid fill */
html.lite #hud-top {
  background: rgba(18, 22, 42, .88);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* CRT outer glow: 34px spill -> cheap 10px */
html.lite #m-screen {
  box-shadow:
    0 0 10px rgba(210, 225, 255, .14),
    inset 0 0 0 2px #0A0D1D;
}

/* HUD multiplier: 5-shadow outline stacks -> a single drop shadow */
html.lite #hud-x { text-shadow: 0 3px 0 var(--outline); }
html.lite #hud-mult-num { text-shadow: 0 4px 0 var(--outline); }

/* LCD texts: double glow -> single shadow */
html.lite #mult-big { text-shadow: 0 0 18px rgba(244, 239, 250, .45); }
html.lite #count-num { text-shadow: 0 0 16px rgba(244, 239, 250, .4); }

/* blurred ambient layers die entirely — godray (animated gradient sweep)
   and rainbow (60px blur conic, incl. the >=10x hyper / mega pulse) */
html.lite #godray,
html.lite #rainbow { display: none; }

/* whole-machine breathe (scale on the full ATM subtree) off */
html.lite #machine { animation: none; }

/* drop-shadow filters on animated/composited layers -> none
   (the hand moves every frame; re-blurring its silhouette is pure waste) */
html.lite #hand { filter: none; }
html.lite #logo { filter: none; }

/* ---------------------------- LITE v2 ------------------------------------ */

/* LCD ticker: JS builds 4 bills instead of 16; the march slows to a crawl
   (single transform-animated track — kept, not display:none'd) */
html.lite #scr-ticker-track { animation-duration: 14s; }

/* scanline scroll at 12x+ off — the static scanline texture stays */
html.lite #scr.overdrive #scr-overlay { animation: none; }

/* marquee flicker (6x+) animated filter:brightness -> opacity-only flicker */
html.lite #m-marquee.flicker { animation-name: mqFlickerLite; }
@keyframes mqFlickerLite {
  0%, 100% { opacity: 1; }
  5%   { opacity: .72; }
  10%  { opacity: 1; }
  15%  { opacity: .85; }
  20%  { opacity: 1; }
  55%  { opacity: .65; }
  60%  { opacity: 1; }
  85%  { opacity: .8; }
  90%  { opacity: 1; }
}

/* backdrop-filter on ANIMATED overlays: the players drawer slides in with
   the blur live, the reconnect overlay blurs the whole scene -> solid/none.
   (Static popovers — settings, history dropdown — keep their blur.) */
html.lite #players-drawer {
  background: rgba(18, 22, 42, .97);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* LITE drops the blur for perf; there is no card behind the spinner any more,
 * so lean on an opaque dim instead to keep the loader legible. */
html.lite #reconnect-overlay {
  background: rgba(12, 15, 32, .93);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* splash logo: the animated drop-shadow pulse re-blurs a big bitmap every
   frame during boot -> frozen single glow */
html.lite #splash-logo {
  animation: none;
  filter: drop-shadow(0 0 14px rgba(255, 77, 141, .4));
}
/* splash: drop the GPU-heavy conic sheen + drifting bills on mobile; the
   coin spinner + shimmer bar (cheap transforms) stay for a lively loader */
html.lite #splash::before { display: none; }
html.lite #splash-bills { display: none; }

/* once loaded, the coin gives way to the TAP TO START button */
#splash-start:not(.hidden) ~ * #splash-coin,
#splash.ready #splash-coin { display: none; }
#splash-core.ready #splash-coin { display: none; }

/* win celebration: the full-screen white flash still reads, but at .2 for
   120ms; the amount slam drops the 5-shadow outline stack for one shadow */
html.lite #win-flash.go { animation: winFlashLite .12s linear; }
@keyframes winFlashLite { from { opacity: .2; } to { opacity: 0; } }
html.lite #win-slam-amt { text-shadow: 0 4px 0 var(--outline); }
html.lite #win-slam-sub { text-shadow: 0 3px 0 var(--outline); }

/* ============================================================================
 * LSCAPE — LANDSCAPE PHONE LAYOUT (short + wide viewport, e.g. 850x390).
 * The width-only mobile blocks above never fire on a landscape phone wider
 * than 700px, and when BOTH fire (small phones ~640x360) this block sits
 * later in the file so it wins the tie. Layout: bet card becomes a RIGHT-SIDE
 * panel, the machine centers in the space left of it using the full height
 * (fitMachineZone() mirrors this via isLandscapePhone()), and the HUD strip
 * stays a single compact row.
 * ==========================================================================*/

@media (max-height: 540px) and (min-aspect-ratio: 5/4) {
  :root { --strip-h: 30px; }

  /* ---- HUD strip: ONE compact row (undo the mobile two-row wrap) ---- */
  #hud-top {
    flex-wrap: nowrap;
    height: var(--strip-h);
    padding: 0 8px;
    row-gap: 0;
    align-content: center;
  }
  #logo { display: none; }
  #top-icons { order: 0; width: auto; margin-left: auto; }
  #balance-pill { margin-right: 0; font-size: 11px; padding: 3px 8px 3px 6px; }
  #balance-pill .icon { width: 14px; height: 14px; }
  #history-strip { flex: 0 1 auto; min-width: 0; gap: 6px; }
  .pill { font-size: 11px; padding: 4px 8px; border-radius: 3px; }
  .pill-help { padding: 4px 7px; }
  #hist-expand { width: 22px; height: 22px; padding: 0; font-size: 13px; }
  .hud-icon { width: 24px; height: 24px; }

  /* ---- top-left multiplier: compact, tucked under the 30px strip ---- */
  #mult-hud { top: calc(var(--strip-h) + 6px); left: 12px; }
  #hud-mult { font-size: clamp(30px, 11vh, 44px); }
  #hud-count { font-size: clamp(13px, 4.5vh, 20px); }
  #hud-crash { font-size: clamp(18px, 6vh, 28px); }
  html[lang="ka"] #hud-crash { font-size: clamp(16px, 5vh, 24px); }

  /* ---- BET CARD -> RIGHT-SIDE PANEL ----
     kill the translateX(-50%) centering + the cardUp keyframe (it animates
     the same transform) — this panel slides in from the right instead */
  #bet-card {
    left: auto;
    right: 10px;
    bottom: 10px;
    transform: none;
    width: min(300px, 38vw);
    border-radius: 12px;
    padding: 8px 10px 6px;                /* no safe-area pad needed on the side */
    animation: cardInRight .55s var(--spring) backwards;
  }
  @keyframes cardInRight {
    from { transform: translateX(calc(100% + 30px)); }
    to   { transform: translateX(0); }
  }

  /* rows stack vertically inside the narrow panel */
  .bc-auto { flex-wrap: wrap; margin-bottom: 6px; }
  .bc-main {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 6px;
  }
  #amount-box { padding: 3px 8px; }
  #bet-amount { font-size: 17px; }
  /* main action button full-width under the amount row */
  #main-action {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 3px 10px;
  }
  #main-action-label { font-size: 17px; }
  html[lang="ka"] #main-action-label { font-size: 13px; }
  /* quick chips wrap inside the panel */
  .bc-chips { flex-wrap: wrap; gap: 6px; }
  .chip { padding: 4px 10px; font-size: 11px; }
  #bet-limits { padding-top: 3px; }

  /* ---- machine zone: full height left of the panel ----
     (JS fitMachineZone() sets the inline padding-bottom/right + height;
     these are the pre-JS fallbacks so the first paint is already sane) */
  #machine-zone {
    align-items: center;
    padding-left: 0;
    padding-top: calc(var(--strip-h) + 6px);
    padding-bottom: 10px;
    padding-right: min(320px, 40vw);
  }
  #machine {
    height: min(100cqh, calc(92cqw * 448 / 320));
    max-height: 100%;
  }

  /* ---- win-slam center text: scale to the short viewport ---- */
  #win-slam-amt { font-size: clamp(30px, 13vh, 56px); }
  #win-slam.mega #win-slam-amt { font-size: clamp(36px, 16vh, 70px); }
  #win-slam-sub { font-size: clamp(14px, 6vh, 24px); }

  /* ---- toasts: clear of the mult HUD, still centered ---- */
  #toasts { width: min(360px, 56vw); }
  .toast { font-size: 12px; padding: 8px 12px; }

  /* ---- overlays must fit a ~390px-tall viewport and scroll ---- */
  #players-drawer { max-height: calc(100vh - var(--strip-h) - 20px); }
  #hist-dropdown { max-height: calc(100vh - var(--strip-h) - 20px); }
  #settings-pop { max-height: calc(100vh - var(--strip-h) - 20px); overflow-y: auto; }

  /* ---- splash: logo + button scale by height so nothing clips ---- */
  #splash { gap: 4vh; }
  #splash-logo { width: min(44vh, 300px); }
  #splash-bar { width: min(44vh, 280px); height: 14px; }
  #splash-load { gap: 8px; }
  #splash-pct { font-size: 12px; }
  #splash-start { min-width: 200px; min-height: 50px; padding: 6px 22px; }
  #splash-start .ss-label { font-size: 20px; }
  html[lang="ka"] #splash-start .ss-label { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; }
}

/* ==========================================================================
   REALISTIC ATM SKIN
   --------------------------------------------------------------------------
   Retheme of the machine from the original cartoon-arcade look to a modern
   outdoor bank ATM: brushed metal body, dark anti-glare glass, tactile
   labelled keypad, camera dome, metal dispenser flap.

   Deliberately ONE self-contained block appended at the end of the file so it
   can be deleted wholesale to get the cartoon machine back.

   All palette vars are re-declared on #machine, NOT on :root -- they are
   inherited by the machine subtree only, so the HUD, bet card, splash and
   players panel keep the original arcade palette.
   ========================================================================== */

#machine {
  --outline: #14161A;          /* near-black panel seam (was cartoon purple) */
  --atm-body: #41464E;         /* charcoal fascia */
  --atm-deep: #23262B;         /* shadowed cabinet */
  --steel: #A9B0BA;            /* brushed aluminium */
  --key-gray: #2B2F36;         /* dark plastic keycap */
  --panel: #2E323A;            /* console plastic */
  --panel-line: #4A505A;
}

/* ------------------------------- cabinet --------------------------------- */

#machine-shake {
  border-width: 2px;
  /* vertical brushed-metal striations over a cool steel gradient */
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
    linear-gradient(100deg, #2B2F36 0%, #3C424B 42%, #2A2E35 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -18px 34px rgba(0, 0, 0, .5),
    0 30px 90px rgba(0, 0, 0, .72),
    0 0 0 1px rgba(0, 0, 0, .55);
}

#m-inner {
  border-width: 2px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px),
    linear-gradient(168deg, #4A5058 0%, #3B4048 55%, #2F343B 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -10px 22px rgba(0, 0, 0, .34);
}
/* the cartoon diagonal gloss sweep reads as plastic -- soften to a metal sheen */
#m-inner::before {
  background: linear-gradient(158deg,
    rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 18%, transparent 34%);
}

.screw {
  border-width: 1px;
  background: radial-gradient(circle at 36% 30%, #E2E6EE, #9AA1AC 52%, #5C626C);
}
.screw::after { background: rgba(0, 0, 0, .55); height: 1.5px; }

/* --------------------- topper + security camera dome --------------------- */

/* brushed steel bank topper instead of the white cartoon marquee */
#m-marquee {
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #4E545D 0%, #33383F 100%);
  border-width: 2px;
  border-radius: .8cqh;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -3px 8px rgba(0, 0, 0, .4);
}
/* the cartoon dollar-bill emblem + disc do not belong on a real fascia.
   .mq-bars read as two stray light rectangles once de-coloured, so drop the
   lot and leave a clean brushed topper. */
#m-marquee .mq-bill, #mq-disc, #m-marquee .mq-bars { display: none; }

/* speaker grille as perforated holes rather than flat cartoon bars */
.spk {
  background:
    radial-gradient(circle, rgba(0, 0, 0, .78) 38%, transparent 42%) 0 0 / 3px 3px;
  background-color: #2A2E34;
  border-width: 1px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6);
}
.spk::after { display: none; }

#m-camera {
  position: absolute;
  top: -1.7cqh; left: 50%;
  width: 5.2cqh; height: 3.4cqh;
  margin-left: -2.6cqh;
  border-radius: 50% 50% 42% 42% / 62% 62% 38% 38%;
  /* smoked acrylic bubble */
  background:
    radial-gradient(ellipse at 34% 26%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .1) 26%, transparent 46%),
    radial-gradient(ellipse at 50% 70%, #23262C 0%, #14161A 70%);
  border: 1px solid #0D0F12;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .6), inset 0 -2px 6px rgba(0, 0, 0, .7);
  z-index: 5;
}
#m-camera .cam-lens {
  position: absolute;
  left: 50%; top: 54%;
  width: 1.5cqh; height: 1.5cqh;
  margin: -.75cqh 0 0 -.75cqh;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #4A5A78 0%, #10141C 62%, #05070A 100%);
  box-shadow: 0 0 5px rgba(90, 150, 255, .28);
}
#m-camera .cam-ir {
  position: absolute;
  right: 18%; top: 30%;
  width: .62cqh; height: .62cqh;
  border-radius: 50%;
  background: #FF4436;
  box-shadow: 0 0 5px rgba(255, 68, 54, .95);
  animation: camIR 3.4s steps(1) infinite;
}
@keyframes camIR { 0%, 88% { opacity: .95; } 90%, 100% { opacity: .18; } }

/* ------------------------- screen: dark AR glass ------------------------- */

/* deep bezel + cool backlight bleed, no cartoon border */
#m-screen {
  position: relative;
  border-width: 2px;
  border-color: #101317;
  border-radius: 6px;
  background: #101317;
  box-shadow:
    0 0 40px rgba(150, 200, 255, .12),
    inset 0 0 0 1px #05070A,
    inset 0 3px 9px rgba(0, 0, 0, .85);
}
#scr { border-radius: 3px; background: #04070A; }

/* the cartoon face is the single most un-ATM element on the glass.
   Kept in the DOM (Screen.face() writes to it every phase change) but hidden. */
#scr-face, #sweat { display: none !important; }

/* anti-reflective glass: tight scanlines + a soft off-axis room reflection */
#scr-overlay {
  background-image:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 4px),
    linear-gradient(122deg, transparent 30%, rgba(190, 215, 255, .05) 41%,
                    rgba(190, 215, 255, .08) 48%, transparent 58%),
    radial-gradient(120% 60% at 78% 8%, rgba(190, 215, 255, .07) 0%, transparent 60%);
}
/* greasy fingerprints / smudges on the glass */
#m-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  border-radius: 6px;
  opacity: .5;
  background:
    radial-gradient(22% 12% at 30% 78%, rgba(255, 255, 255, .05) 0%, transparent 70%),
    radial-gradient(15% 9%  at 66% 62%, rgba(255, 255, 255, .045) 0%, transparent 70%),
    radial-gradient(10% 7%  at 47% 40%, rgba(255, 255, 255, .04) 0%, transparent 70%);
}

/* idle ENTER YOUR PIN prompt -- green phosphor on black, pending page only */
#pin-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6cqw;
  margin: .2cqh 0 .6cqh;
  color: #3BE08A;
  font-family: "Consolas", "DejaVu Sans Mono", ui-monospace, monospace;
  font-size: max(9px, 1.9cqh);
  font-weight: 700;
  letter-spacing: .14em;
  text-shadow: 0 0 7px rgba(59, 224, 138, .6);
}
#pin-dots { display: inline-flex; gap: .9cqw; }
#pin-dots i {
  width: 1.5cqh; height: 1.5cqh;
  border-radius: 50%;
  border: 1.5px solid #3BE08A;
  box-shadow: 0 0 6px rgba(59, 224, 138, .45);
  background: transparent;
  /* the 4 dots fill one by one, then reset -- reads as someone typing a PIN */
  animation: pinFill 4s steps(1) infinite;
}
#pin-dots i:nth-child(1) { animation-delay: 0s; }
#pin-dots i:nth-child(2) { animation-delay: .5s; }
#pin-dots i:nth-child(3) { animation-delay: 1s; }
#pin-dots i:nth-child(4) { animation-delay: 1.5s; }
@keyframes pinFill {
  0%, 48% { background: #3BE08A; }
  50%, 100% { background: transparent; }
}

/* soft-keys: dark metal nubs flanking the glass, not glossy cartoon pills */
.softkey {
  background: linear-gradient(180deg, #5A6068 0%, #3A3F46 100%);
  border-width: 1px;
  border-radius: .35cqh;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .5);
}
.softkey::after { display: none; }              /* drop the arcade glimmer */

/* hood over the screen: metal sun visor */
#m-hood {
  border-width: 2px;
  background: linear-gradient(180deg, #52585F 0%, #2E3238 100%);
  border-radius: .5cqh .5cqh .2cqh .2cqh;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .6);
}

/* ------------------------- console: slots + LED -------------------------- */

#m-console {
  border-width: 2px;
  border-radius: .8cqh;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .02) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #3A3F47 0%, #292D33 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -4px 10px rgba(0, 0, 0, .45);
}
/* card / receipt slots: milled openings with a steel lip and real depth */
.slit {
  border-width: 1px;
  border-color: #0B0D10;
  border-radius: 2px;
  background: linear-gradient(180deg, #05070A 0%, #0E1116 60%, #1A1E24 100%);
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, .95),
    0 1px 0 rgba(255, 255, 255, .16);
}
/* green card-slot LED with a lit bezel */
#m-led {
  border-width: 1px;
  border-color: #0B0D10;
  background: radial-gradient(circle at 38% 32%, #9CFFC0 0%, #23C25C 55%, #126B34 100%);
  box-shadow: 0 0 10px rgba(47, 214, 110, .9), inset 0 0 3px rgba(255, 255, 255, .5);
}

/* ----------------------------- keypad ----------------------------------- */

/* ---------------------- fascia geometry: give the pad room ----------------
   The original layout let the screen take 54cqh, leaving the keypad 11.8cqh —
   4 rows of 12px keys. Reclaim 5cqh from the screen and hand it to the keypad
   so the keys land near-square, like real ATM keycaps. Dispenser unmoved.

   Only the console bar itself is moved: #card-window and #receipt-window are
   CHILDREN of #m-console (which is position:absolute), so their top offsets are
   relative to the console and they ride along with it automatically. Shifting
   them too double-moved the card/receipt clip masks off the fascia. */
#m-screen-row { height: 49cqh; }
#m-console { top: 67cqh; }

#m-keypad {
  /* 3 digit columns + 1 wider function column (was 5 cartoon columns).
     Compact + tall on purpose: spanning the full fascia gave 4.5:1 squashed
     keycaps. A real ATM keypad is a tight block of near-square keys. */
  grid-template-columns: repeat(3, 1fr) 1.55fr;
  grid-template-rows: repeat(4, 1fr);
  top: 73.4cqh;
  height: 16.8cqh;
  /* NB: left/right resolve against #m-inner (itself inset 3.6cqw), not the
     machine, so the usable track is ~92.8cqw. 32cqw insets leave ~28.8cqw of
     pad, which against 16.8cqh of height lands ~1:1 keycaps at any viewport. */
  left: 32cqw; right: 32cqw;
  gap: .42cqh .8cqw;
}
/* worn dark plastic keycaps with real travel and a backlit legend */
.kp-key {
  border-width: 1px;
  border-color: #0C0E12;
  border-radius: .35cqh;
  background: linear-gradient(180deg, #454A53 0%, #31353C 52%, #24272D 100%);
  color: #E6EBF2;
  font-family: "Consolas", "DejaVu Sans Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: max(8px, 1.85cqh);
  letter-spacing: .02em;
  text-shadow: 0 0 5px rgba(200, 225, 255, .35);
  box-shadow:
    0 2px 0 0 #14161A,
    0 3px 4px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .2);
}
/* finger wear: a faint polished patch on the middle of each cap */
.kp-key::before {
  content: "";
  position: absolute;
  inset: 12% 16%;
  border-radius: 40%;
  background: radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, .075) 0%, transparent 72%);
  pointer-events: none;
}
.kp-key.pressed {
  transform: translateY(2px);
  background: linear-gradient(180deg, #383D45 0%, #272B31 100%);
  box-shadow: 0 0 0 0 #14161A, inset 0 2px 5px rgba(0, 0, 0, .75);
}
/* function column: coloured legend on dark caps, not solid cartoon buttons */
.kp-act {
  font-size: max(7px, 1.45cqh) !important;
  letter-spacing: 0;
}
#key-red, #key-amber, #key-green {
  background: linear-gradient(180deg, #454A53 0%, #31353C 52%, #24272D 100%);
  box-shadow:
    0 2px 0 0 #14161A,
    0 3px 4px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .2);
}
#key-red   { color: #FF6B6B; text-shadow: 0 0 6px rgba(255, 90, 90, .65); }
#key-amber { color: #FFC24A; text-shadow: 0 0 6px rgba(255, 185, 60, .65); }
#key-green { color: #55E88B; text-shadow: 0 0 6px rgba(70, 224, 130, .65); }
#key-red.pressed, #key-amber.pressed, #key-green.pressed {
  background: linear-gradient(180deg, #383D45 0%, #272B31 100%);
  box-shadow: 0 0 0 0 #14161A, inset 0 2px 5px rgba(0, 0, 0, .75);
}

/* ---------------------------- dispenser ---------------------------------- */

#m-dispenser {
  border-width: 2px;
  border-radius: .7cqh;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #5A6067 0%, #3C4149 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 2px 6px rgba(0, 0, 0, .45);
}
/* dark cash opening behind a shadowed flap */
#m-recess {
  border-width: 1px;
  border-color: #0A0C0F;
  border-radius: 2px;
  background: linear-gradient(180deg, #04060A 0%, #0C0F14 55%, #16191F 100%);
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, .95), inset 0 -2px 4px rgba(255, 255, 255, .06);
}
/* steel lip below the opening — muted so it reads as brushed metal in night
   light rather than a bright white bar across the fascia */
#m-lip {
  border-width: 1px;
  border-color: #0B0D10;
  border-radius: 2px;
  background: linear-gradient(180deg, #8F959E 0%, #6B7178 48%, #4C5158 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* LITE mode: drop the multi-layer metal striations for flat fills */
html.lite #machine-shake { background: linear-gradient(100deg, #2B2F36, #3C424B); }
html.lite #m-inner { background: linear-gradient(168deg, #4A5058, #2F343B); }
html.lite #m-screen::after,
html.lite .kp-key::before { display: none; }


/* ======================= SECOND BET ROW (slot 1) =========================
   Compact mirror of the main bet row: its own stake, its own auto target and
   its own cash-out button, so one bet can be banked while the other rides.
   ======================================================================== */
.bc-slot2 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.s2-tag {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--panel-line);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
#amount-box-2 {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--night-deep);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  padding: 4px 8px;
}
#amount-box-2 input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
}
#amount-box-2 .cur { color: var(--muted); font-size: 12px; font-weight: 700; }

#auto-chip-2 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--night-deep);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  padding: 4px 6px;
  cursor: text;
}
#auto-chip-2 .ax { color: var(--muted); font-size: 11px; font-weight: 700; }
#auto-chip-2 input {
  width: 34px;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
}

#action-2 {
  flex: 0 0 auto;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  gap: 1px;
  border: none;
  border-radius: 9px;
  padding: 6px 10px;
  color: #fff;
  font-family: var(--arcade);
  font-size: 13px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: filter .12s, background-color .12s;
}
#action-2:disabled { cursor: default; filter: saturate(.5) brightness(.75); }
#action-2:not(:disabled):active { filter: brightness(1.12); }
#action-2-sub { font-family: inherit; font-size: 11px; opacity: .9; }
/* state colours mirror the main action button */

/* the splash bill follows the selected currency (html.cur-gel set by game.js) */
html.cur-gel #splash-bills i {
  background-image: url("/assets/ai/opt/bill-single-lari.webp");
}

@media (max-width: 420px) {
  #action-2 { min-width: 78px; font-size: 12px; }
  #auto-chip-2 input { width: 28px; }
}


/* ==================== AVIATOR-STYLE BET PANELS =========================
   Two identical panels, each: stake stepper + quick chips on the left, one big
   action button on the right. Replaces the old scattered rows (amount row here,
   shared chip row there, second bet squeezed onto one line).
   ====================================================================== */
#auto-dot[hidden] { display: none !important; }
.bc-spacer { flex: 1 1 auto; }
.bc-auto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.bet-panel {
  display: flex;
  align-items: stretch;
  gap: 10px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--panel-line);
  border-radius: 14px;
  padding: 8px;
}
.bp-left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* stake: [-]  12.00 $  [+] */
.bp-stake {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--night-deep);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  padding: 3px;
}
.bp-stake .stepper {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--panel);
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.bp-stake .stepper:active { background: var(--panel-line); }
.bp-val {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
}
.bp-val input {
  width: 100%;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  text-align: center;
  color: var(--text);
  font-family: inherit;
  font-size: 19px;
  font-weight: 800;
}
.bp-val .cur { color: var(--muted); font-size: 12px; font-weight: 700; }

/* quick chips: 3 x 2 grid, like Aviator's 2 x 2 but keeping half/double/max */
.bp-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.bp-chips .chip {
  border: 1px solid var(--panel-line);
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  padding: 6px 0;
  cursor: pointer;
}
.bp-chips .chip:active { background: rgba(255, 255, 255, .13); }

/* panel 2's auto-cashout controls sit under its chips */
.bp-auto2 { display: flex; align-items: center; gap: 6px; }
.bp-auto2 #auto-chip-2 {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--night-deep);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  padding: 3px 7px;
  cursor: text;
}
.bp-auto2 .ax { color: var(--muted); font-size: 11px; font-weight: 700; }
.bp-auto2 input {
  width: 40px;
  background: none; border: none; outline: none;
  color: var(--text); font-family: inherit; font-size: 13px; font-weight: 800;
}

/* the big action button fills the panel height, Aviator style */
#main-action, #action-2 {
  flex: 0 0 46%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: none;
  border-radius: 12px;
  padding: 10px 8px;
  color: #fff;
  font-family: var(--arcade);
  cursor: pointer;
  transform: none;                    /* drop the old skew */
  transition: filter .12s, background-color .12s;
}
#main-action { font-size: 22px; }
#action-2 { font-size: 20px; }
#main-action .btn-inner { transform: none; }
#main-action-sub, #action-2-sub { font-family: inherit; font-size: 14px; opacity: .92; }
#main-action:disabled, #action-2:disabled { cursor: default; filter: saturate(.45) brightness(.7); }
#main-action:not(:disabled):active, #action-2:not(:disabled):active { filter: brightness(1.12); }


@media (max-width: 430px) {
  #main-action { font-size: 18px; }
  #action-2 { font-size: 16px; }
  #main-action-sub, #action-2-sub { font-size: 12px; }
  .bp-val input { font-size: 17px; }
}

/* Panel 2's button must be visually identical to panel 1's -- it was styled with
   its own invented st-bet/st-collect classes and came out amber next to panel
   1's green. Same class names as #main-action now, same colours. */
#action-2.st-withdraw, #action-2.st-cashout {
  background: linear-gradient(180deg, #7ED957 0%, #4FA832 100%);
  box-shadow:
    inset 0 12px 0 rgba(255, 255, 255, .12),
    inset 0 -3px 0 #2E6B1E,
    0 6px 16px rgba(0, 0, 0, .4);
  color: #fff;
}
#action-2.st-cancel {
  background: linear-gradient(180deg, #FF5A5A 0%, #C93A44 100%);
  box-shadow:
    inset 0 12px 0 rgba(255, 255, 255, .12),
    inset 0 -3px 0 #8A222C,
    0 6px 16px rgba(0, 0, 0, .4);
  color: #fff;
}
#action-2.st-wait { background: #3A3F5C; color: var(--muted); box-shadow: none; }
#action-2.st-done { background: #2E5C40; color: #BFF3D2; box-shadow: none; }
#action-2-label {
  color: #fff;
  text-shadow:
    -1.5px 0 rgba(34, 26, 56, .55), 1.5px 0 rgba(34, 26, 56, .55),
    0 -1.5px rgba(34, 26, 56, .55), 0 1.5px rgba(34, 26, 56, .55);
}

/* ================== PANEL SYMMETRY (bet buttons identical) =================
   Both panels now carry the same three rows (stake / chips / auto), so the two
   action buttons stretch to the same height. Typography is pinned to one set of
   values for BOTH buttons -- panel 1 had lang/breakpoint-specific label sizes
   (ka 15px, <=700px 17px) that panel 2 lacked, which is why the labels looked
   like different fonts. The unified auto row replaces the old .bp-auto2. */
/* fixed height: the two chips carry different legacy padding/borders, which
   left a 3px height gap between the panels' buttons */
.bp-auto { display: flex; align-items: center; gap: 6px; height: 26px; }
.bp-auto #auto-chip, .bp-auto #auto-chip-2 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--night-deep);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  padding: 3px 7px;
  cursor: text;
}
.bp-auto .ax { color: var(--green-hi); font-size: 11px; font-weight: 800; }
.bp-auto input {
  width: 40px;
  background: none; border: none; outline: none;
  color: var(--text); font-family: inherit; font-size: 13px; font-weight: 800;
}
.bp-auto .bc-label { font-size: 11px; color: var(--muted); }

#main-action, #action-2 { font-size: 20px; }
#main-action-label, #action-2-label {
  font-family: var(--arcade);
  font-size: 20px;
  white-space: nowrap;
}
#main-action-sub, #action-2-sub { font-size: 13px; }
html[lang="ka"] #main-action-label, html[lang="ka"] #action-2-label { font-size: 15px; }
@media (max-width: 700px) {
  #main-action, #action-2 { min-width: 128px; min-height: 52px; }
  #main-action-label, #action-2-label { font-size: 17px; }
  html[lang="ka"] #main-action-label, html[lang="ka"] #action-2-label { font-size: 15px; }
}

/* panel 2 queue states: same gold as #main-action.st-queue / .st-queued */
#action-2.st-queue, #action-2.st-queued {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  box-shadow:
    inset 0 12px 0 rgba(255, 255, 255, .18),
    inset 0 -3px 0 #A66A10,
    0 6px 16px rgba(0, 0, 0, .4);
  color: #fff;
}
#action-2.st-queue #action-2-label,
#action-2.st-queued #action-2-label { font-size: 15px; }
html[lang="ka"] #action-2.st-queue #action-2-label,
html[lang="ka"] #action-2.st-queued #action-2-label { font-size: 13px; }

/* ============================ MULTI BET TOGGLE ============================
   Panel 2 exists in the DOM but is hidden until the header switch turns
   multi bet on. Off by default on every device — one compact panel. */
.bet-panel.bc-slot2 { display: none; }
#bet-card.multibet .bet-panel.bc-slot2 { display: flex; }

/* ===================== PLAYERS PANEL: fit, don't scroll =====================
   The table forced a horizontal scrollbar (5 columns of tabular numbers wider
   than the 340px drawer) and the OS default bar looked out of place. Make the
   columns fit instead of scrolling sideways, and give the panel more height. */
#players-drawer {
  /* was ...-140px: the drawer was short enough to clip after a few players */
  max-height: calc(100vh - var(--strip-h) - 56px);
  /* and a floor so a near-empty table isn't a cramped little box */
  min-height: min(300px, 60vh);
}
#players-body {
  overflow-x: hidden;          /* nothing should ever scroll sideways */
  overflow-y: auto;
  scrollbar-width: thin;       /* firefox */
  scrollbar-color: var(--panel-line) transparent;
}
#players-table {
  table-layout: fixed;         /* honour the widths below instead of content */
  width: 100%;
}
/* name | bet | status | mult | win — the name absorbs the slack */
#players-table th:nth-child(1), #players-table td:nth-child(1) { width: 38%; }
#players-table th:nth-child(2), #players-table td:nth-child(2) { width: 18%; }
#players-table th:nth-child(3), #players-table td:nth-child(3) { width: 20%; }
#players-table th:nth-child(4), #players-table td:nth-child(4) { width: 12%; }
#players-table th:nth-child(5), #players-table td:nth-child(5) { width: 12%; }
#players-table th, #players-table td { padding: 6px 4px; }
/* long guest names truncate rather than widening the table */
#players-table td:nth-child(1) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* status wraps to two short lines instead of stretching the column */
#players-table td:nth-child(3) { white-space: normal; line-height: 1.15; font-size: 11px; }

/* slim themed scrollbar for the vertical case (webkit) */
#players-body::-webkit-scrollbar { width: 8px; height: 0; }
#players-body::-webkit-scrollbar-track { background: transparent; }
#players-body::-webkit-scrollbar-thumb {
  background: var(--panel-line);
  border-radius: 999px;
}
#players-body::-webkit-scrollbar-thumb:hover { background: var(--steel); }

/* ============== SWAP: cash dispenser above, card console below =============
   Was console (card/receipt slots + LED) at 67cqh and the cash dispenser down
   at 90.6cqh. Swapped so cash is dispensed just under the screen and the
   card/receipt console sits at the bottom of the fascia.

   Only the two containers move; the keypad between them (73.4–90.2cqh) is
   untouched. #card-window and #receipt-window are CHILDREN of #m-console, so
   they travel with it and keep their existing offsets — no separate move (that
   was the double-shift bug from the earlier keypad work).

   The bill fountain and the POV hand both aim at L.mouth, which is measured
   from the recess's live DOM rect, so they re-aim at the new position on the
   next layout pass with no JS change. */
#m-dispenser { top: 66.6cqh; }   /* was 90.6cqh — now directly under the screen */
#m-console   { top: 90.6cqh; }   /* was 67cqh   — now the bottom strip */

/* ============ PAID chip: must never clip through the LCD bezel =============
   It was nowrap at a fixed size, so the Georgian label + a 4-figure amount grew
   wider than the glass and #scr's overflow:hidden cut the amount off. Cap it to
   the glass, let it wrap to a second centred line, and size Georgian (which
   renders wider than the arcade face) a step smaller. */
#paid-chip {
  max-width: 92%;
  white-space: normal;
  text-align: center;
  line-height: 1.18;
  font-size: max(12px, 2.2cqh);
}
html[lang="ka"] #paid-chip { font-size: max(11px, 1.9cqh); }

/* ==================== PERF + LARI-DEFAULT FOLLOW-UPS ======================
   backdrop-filter resamples the scene behind the layer every frame — the two
   transient popovers were the last un-gated blurs on mobile. */
html.lite #settings-pop,
html.lite #hist-dropdown {
  background: rgba(18, 22, 42, .97);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* lari is the default currency: the splash bill's FIRST PAINT (before game.js
   runs) must be the lari note. game.js stamps cur-usd when dollars are chosen. */
#splash-bills i { background-image: url("/assets/ai/opt/bill-single-lari.webp"); }
html.cur-usd #splash-bills i { background-image: url("/assets/ai/opt/bill-single.webp"); }