/* Limbo game — vanilla DOM, no framework, no iframe.
   Mounted into #limbo-game in the outer SEO shell. */

#limbo-game {
  --panel-bg: #1C1C1D;
  --panel-radius: 10px;
  --text-muted: #8C8C91;
  --text-yellow: #FFCC00;
  --win: #35C759;
  --lose: #FF3B31;
  --grey: #8E8E92;
  --accent: #FFD700;

  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

#limbo-game .lm-inner {
  width: 100%;
  max-width: 640px;
  /* Fill the wrapper vertically so the result panel can stretch.
     The wrapper itself is `calc(100dvh - 56px)` from the SEO shell, so
     here we just consume that with `height: 100%`. */
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 501px) {
  #limbo-game .lm-inner { padding-top: 28px; }
}

/* ============== Sound button (lives in the auto-bet row) ============== */
#limbo-game .lm-sound-btn {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.15s, transform 0.1s;
}
#limbo-game .lm-sound-btn:hover { background: rgba(255,255,255,0.06); }
#limbo-game .lm-sound-btn:active { transform: scale(0.94); }
#limbo-game .lm-sound-btn svg { width: 24px; height: 24px; fill: currentColor; }

/* ============== Result panel (giant multiplier readout) ==============
   Stake-style: history strip pinned to the TOP edge inside the panel,
   big multiplier number centered vertically below it. No hard border —
   the multiplier color expresses state. */
#limbo-game .lm-result {
  width: 100%;
  flex: 1 1 auto;            /* let the panel grow into the available column */
  min-height: 220px;
  border-radius: var(--panel-radius);
  background: var(--panel-bg);
  padding: 16px 16px 24px;   /* compact top padding so history hugs the edge */
  box-sizing: border-box;
  border: 0;
  transition: background 0.25s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* History at top, center stack absorbs the rest of the column. */
  justify-content: flex-start;
}
/* Vertical middle of the panel: holds the multiplier + win/lose text.
   `flex: 1` consumes all remaining height below the history strip and
   centers its contents, so the big number sits roughly in the middle
   of the panel regardless of how tall the wrapper is. */
#limbo-game .lm-result-center {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
#limbo-game .lm-result.win {
  background: radial-gradient(ellipse at center, rgba(53,199,89,0.12) 0%, var(--panel-bg) 65%);
}
#limbo-game .lm-result.lose {
  background: var(--panel-bg);
}
#limbo-game .lm-result-number {
  font-size: clamp(72px, 16vw, 112px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  color: #fff;               /* idle/rolling state — neutral white */
  font-variant-numeric: tabular-nums;
}
#limbo-game .lm-result.win  .lm-result-number { color: var(--win); text-shadow: 0 0 28px rgba(53,199,89,0.45); }
#limbo-game .lm-result.lose .lm-result-number { color: var(--lose); }
#limbo-game .lm-result-text {
  font-size: 18px;
  font-weight: 700;
  min-height: 22px;
  letter-spacing: 0.3px;
}
#limbo-game .lm-result-text.win    { color: var(--win); }
#limbo-game .lm-result-text.lose   { color: var(--lose); }
#limbo-game .lm-result-text.rolling{ color: var(--grey); }

@media (max-height: 750px) {
  #limbo-game .lm-result { padding: 12px 14px 16px; min-height: 180px; }
  #limbo-game .lm-result-number { font-size: clamp(56px, 14vw, 84px); }
  #limbo-game .lm-result-text { font-size: 15px; }
}
@media (max-height: 620px) {
  #limbo-game .lm-result { padding: 10px 12px 12px; min-height: 140px; }
  #limbo-game .lm-result-number { font-size: clamp(48px, 12vw, 72px); }
}

/* ============== History row (TOP, right-aligned pill chips) ==========
   Mirrors Stake: most recent on the right, fades out on the left, no
   background panel — the chips float over the dark game area. */
#limbo-game .lm-history {
  width: 100%;
  /* No horizontal padding — the parent .lm-result already pads 16px. */
  padding: 0;
  box-sizing: border-box;
  height: 28px;
  position: relative;
  overflow: hidden;
  /* Soft mask so older entries fade as they scroll off the left edge */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 100%);
}
#limbo-game .lm-history-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;   /* newest pinned right */
  gap: 6px;
  height: 100%;
  width: 100%;
}
#limbo-game .lm-hist-cell {
  flex: 0 0 auto;
  min-width: 56px;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* Promote to its own compositor layer so the translate / opacity
     transition runs on the GPU instead of triggering layout. */
  will-change: transform, opacity;
  transform: translateZ(0);
  /* Used by the exit animation. Enter uses a keyframe animation instead
     of this transition (see .enter below) so the two paths don't fight. */
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0.20, 1),
              opacity   0.42s ease-in;
}
#limbo-game .lm-hist-cell.win  { background: rgba(53, 199, 89, 0.20); color: var(--win); }
#limbo-game .lm-hist-cell.lose { background: rgba(255, 59, 49, 0.18); color: var(--lose); }
#limbo-game .lm-hist-cell.enter { animation: lm-hist-enter 0.42s cubic-bezier(0.16, 0.84, 0.44, 1) both; }
@keyframes lm-hist-enter {
  from { transform: translate3d(40px, 0, 0); opacity: 0; }
  to   { transform: translate3d(0, 0, 0);    opacity: 1; }
}
/* Exit: slide left ~80px and fade. The mask on .lm-history hides the
   chip well before it reaches the left edge, so this is just enough
   travel for a smooth glide without overshooting visibly. */
#limbo-game .lm-hist-cell.exiting {
  transform: translate3d(-80px, 0, 0);
  opacity: 0;
}

/* ============== Target + Win Chance (2-column row) ==================
   Stake-style row: both halves are editable number inputs with unit
   suffixes (× for the multiplier, % for the chance). The two stay in
   sync via the inverse formula handled in limbo.js. */
#limbo-game .lm-target-row-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  /* `start` (not `stretch`) so the absolute-positioned warning under one
     card never pulls the other side taller. Both cards have the same
     intrinsic height anyway. */
  align-items: start;
}
#limbo-game .lm-target-row-grid > .lm-target-wrap { margin: 0; }
/* Chance card has no ± stepper, so its input owns the full row width. */
#limbo-game .lm-chance-wrap .lm-target-row { gap: 0; }

/* Narrow / mid-width viewports: stack the two halves vertically so
   neither input ends up cramped. Triggers at ≤ 510px — broader than the
   compact-row breakpoint (575px) so the cards still get the compact
   tightening before they fall back to a single column.
   In single-column mode the Win Chance card is bumped to the first row
   (above Target Multiplier) via `order: -1`; horizontal layout above
   510px keeps the natural DOM order (Target left, Chance right). */
@media (max-width: 510px) {
  #limbo-game .lm-target-row-grid { grid-template-columns: 1fr; }
  #limbo-game .lm-target-row-grid > .lm-chance-wrap { order: -1; }
}

/* ============== Target multiplier input ==============
   Default (≥576px): roomy padding + larger controls — the layout has
   plenty of horizontal space, so the cards can breathe vertically.
   <576px is handled in a dedicated media query at the bottom of this
   section, where every dimension is shrunk to keep the row compact.

   Top padding 14px and bottom padding 10px keep the card visually
   symmetric once the (always-reserved) warning slot below the input
   adds its own ~14px of vertical space. */
#limbo-game .lm-target-wrap {
  width: 100%;
  background: var(--panel-bg);
  border-radius: var(--panel-radius);
  /* Bottom padding 6 + warning slot (14+2) ≈ top padding 14 + label-mb 8.
     The card now reads as visually symmetric. */
  padding: 14px 16px 6px;
  box-sizing: border-box;
  border: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Red outline around the whole card when the input inside it is invalid.
   Toggled from JS by showTargetWarning() / showChanceWarning(). */
#limbo-game .lm-target-wrap.has-error {
  border-color: rgba(255, 59, 49, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 59, 49, 0.08);
}
#limbo-game .lm-target-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
#limbo-game .lm-target-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
#limbo-game .lm-target-btn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, transform 0.1s;
}
#limbo-game .lm-target-btn:hover { background: rgba(255,255,255,0.14); }
#limbo-game .lm-target-btn:active { transform: scale(0.94); }
#limbo-game .lm-target-btn:disabled { opacity: 0.4; cursor: not-allowed; }
#limbo-game .lm-target-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* <576px: shrink the whole control bar (card padding, label, input,
   ± buttons, suffix, warning slot) so the side-by-side Target / Win
   Chance row stays compact and doesn't read as a tall three-row stack.
   Cards still sit in a 2-column grid until 380px (see grid rule). */
@media (max-width: 575px) {
  #limbo-game .lm-target-wrap { padding: 6px 12px 8px; }
  #limbo-game .lm-target-label {
    font-size: 10px;
    margin-bottom: 2px;
    letter-spacing: 0.2px;
    line-height: 1.2;
  }
  #limbo-game .lm-target-row { gap: 6px; }
  #limbo-game .lm-target-btn { width: 28px; height: 28px; }
  #limbo-game .lm-target-btn svg { width: 16px; height: 16px; }
  #limbo-game .lm-target-input { font-size: 13px; height: 30px; padding: 0 22px 0 8px; }
  #limbo-game .lm-input-suffix { right: 7px; width: 12px; height: 12px; font-size: 12px; }
  #limbo-game .lm-target-warning { height: 12px; line-height: 12px; margin-top: 3px; font-size: 10px; }
  #limbo-game .lm-chance-wrap::after { height: 12px; margin-top: 3px; }
}

/* Shell that hosts the number input + its unit suffix (X or %). The
   suffix is absolutely positioned at the right edge of the input. */
#limbo-game .lm-input-shell {
  position: relative;
  flex: 1 1 auto;
  display: block;
  min-width: 0;
}
#limbo-game .lm-input-shell--full { width: 100%; }

/* Unit suffix — X and % rendered at the same fixed box size so both
   read at identical visual weight regardless of glyph shape.
   <576px tightens these in the compact-row media query above. */
#limbo-game .lm-input-suffix {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

#limbo-game .lm-target-input {
  flex: 1 1 auto;
  width: 100%;
  height: 44px;
  border-radius: 8px;
  background: #0F1722;
  border: 1px solid rgba(255,255,255,0.06);
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: left;
  outline: none;
  /* Reserve room on the right for the X / % suffix. */
  padding: 0 28px 0 12px;
  /* Suppress the spinner on Firefox too. */
  -moz-appearance: textfield;
        appearance: textfield;
}
#limbo-game .lm-target-input::-webkit-outer-spin-button,
#limbo-game .lm-target-input::-webkit-inner-spin-button {
  -webkit-appearance: none; appearance: none; margin: 0;
}
#limbo-game .lm-target-input:focus { border-color: rgba(255,255,255,0.20); }
#limbo-game .lm-target-input:disabled { opacity: 0.55; cursor: not-allowed; }
#limbo-game .lm-target-input.invalid {
  border-color: rgba(255, 59, 49, 0.65);
  color: var(--lose);
  box-shadow: 0 0 0 3px rgba(255, 59, 49, 0.10);
}
#limbo-game .lm-target-input.invalid:focus { border-color: rgba(255, 59, 49, 0.85); }

/* Inline warning message — ALWAYS occupies a fixed-height slot inside
   the card so the card's total height is identical with or without a
   warning. Using a fixed `height` (not min-height) plus line-height
   guarantees the slot is reserved even when the text node is empty.
   Show/hide only flips opacity; layout never changes.
   <576px shrinks this slot too — see the compact-row media query. */
#limbo-game .lm-target-warning {
  /* Font size + weight exactly match .lm-target-label (13px / 400) so
     the warning reads at the same visual scale as the "Target Multiplier"
     / "Win Chance" titles above the input. Slot height + top margin
     total ~16px so the bottom of the card matches the top edge. */
  height: 14px;
  line-height: 14px;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--lose);
  opacity: 0;
  transition: opacity 0.2s ease;
  /* Truncate gracefully if the message somehow gets too long. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#limbo-game .lm-target-warning.shown { opacity: 1; }

/* Mirror the exact same reserved slot on the Win Chance card so its
   height matches the Target card byte-for-byte at all times. The slot
   is structural — pure spacing, no text. */
#limbo-game .lm-chance-wrap::after {
  content: '';
  display: block;
  height: 14px;
  margin-top: 2px;
}

/* ============== Actions row: bet stepper | balance | bet CTA ============== */
#limbo-game .lm-actions {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(96px, 1fr) minmax(110px, 1fr);
  gap: 10px;
  align-items: stretch;
}
#limbo-game .lm-bet {
  background: var(--panel-bg);
  border-radius: var(--panel-radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
}
#limbo-game .lm-bet-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 0;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
#limbo-game .lm-bet-btn:hover { background: rgba(255,255,255,0.12); }
#limbo-game .lm-bet-btn:active { transform: scale(0.94); }
#limbo-game .lm-bet-btn svg { width: 18px; height: 18px; fill: currentColor; }
#limbo-game .lm-bet-readout { text-align: center; }
#limbo-game .lm-bet-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; }
#limbo-game .lm-bet-value { font-size: 18px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }

#limbo-game .lm-balance {
  background: var(--panel-bg);
  border-radius: var(--panel-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
}
#limbo-game .lm-balance-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; }
#limbo-game .lm-balance-value { font-size: 18px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }

#limbo-game .lm-launch { display: flex; }
#limbo-game .lm-play {
  flex: 1 1 auto;
  border: 0;
  border-radius: var(--panel-radius);
  background: linear-gradient(135deg, #FFD700, #FFAA00);
  color: #1A1A2E;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 12px;
  box-shadow: 0 0 16px rgba(255,215,0,0.18);
  transition: transform 0.1s, filter 0.15s, opacity 0.15s;
}
#limbo-game .lm-play:hover { filter: brightness(1.05); }
#limbo-game .lm-play:active { transform: scale(0.96); }
#limbo-game .lm-play:disabled {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.5);
  box-shadow: none;
  cursor: not-allowed;
}

/* ============== Auto bet row ============== */
#limbo-game .lm-auto-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 0;
  box-sizing: border-box;
  /* Pull this row half a gap closer to the Bet actions above. The
     parent .lm-inner uses `gap: 14px`; -7px collapses it to ~7px. */
  margin-top: -7px;
}
#limbo-game .lm-auto-left { display: flex; align-items: center; gap: 10px; }
#limbo-game .lm-auto-label { font-size: 14px; font-weight: 600; color: #fff; }
#limbo-game .lm-auto-count { color: var(--accent); font-variant-numeric: tabular-nums; margin-left: 4px; }
#limbo-game .lm-auto-switch {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  border: 0;
  background: rgba(255,255,255,0.12);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}
#limbo-game .lm-auto-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
#limbo-game .lm-auto-switch[data-on="1"] { background: var(--win); }
#limbo-game .lm-auto-switch[data-on="1"]::after { transform: translateX(20px); }

/* ============== Modals (auto times, insufficient balance) ============== */
.lm-modal-overlay, .lm-modal-back {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.lm-modal {
  background: #1C1C1D;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 22px 22px 18px;
  width: 100%; max-width: 320px;
  color: #fff;
  text-align: center;
}
.lm-modal-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.lm-modal-msg { font-size: 14px; color: var(--text-muted); margin-bottom: 18px; line-height: 1.4; }
.lm-modal-actions { display: flex; justify-content: center; gap: 10px; }
.lm-modal-btn {
  flex: 1;
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #FFD700, #FFAA00);
  color: #1A1A2E;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
}
.lm-modal-btn:active { transform: scale(0.97); }

.lm-auto-modal {
  background: #1C1C1D;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px 18px 14px;
  width: 100%; max-width: 320px;
  color: #fff;
}
.lm-auto-modal-title { font-size: 16px; font-weight: 800; text-align: center; margin: 0 0 14px; }
.lm-auto-modal-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.lm-auto-modal-opt {
  height: 44px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 14px;
}
.lm-auto-modal-opt:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,215,0,0.35); }
.lm-auto-modal-num { font-weight: 800; color: var(--accent); }
.lm-auto-modal-suffix { color: var(--text-muted); font-size: 12px; }
.lm-auto-modal-cancel {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.lm-auto-modal-cancel:hover { background: rgba(255,255,255,0.10); }

/* ============== Sound settings dialog — ported from dice (.dx-ss-*) ============== */
.lm-ss-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: lm-ss-mask-in 180ms ease;
  font-family: 'Inter', system-ui, sans-serif;
}
@keyframes lm-ss-mask-in { from { opacity: 0; } to { opacity: 1; } }
.lm-ss-dialog {
  width: 340px;
  max-width: 100%;
  background: #1A2332;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  animation: lm-ss-dialog-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes lm-ss-dialog-in {
  from { opacity: 0; transform: scale(0.94) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.lm-ss-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.lm-ss-title { color: rgba(255,255,255,.75); font-size: 14px; font-weight: 700; letter-spacing: 1.5px; }
.lm-ss-close {
  background: transparent; border: 0;
  color: rgba(255,255,255,.4);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.lm-ss-close:hover { color: #fff; background: rgba(255,255,255,.08); }
.lm-ss-row {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  gap: 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.lm-ss-row:last-child { border-bottom: none; }
.lm-ss-label { flex: 0 0 40%; color: rgba(255,255,255,.6); font-size: 15px; }
.lm-ss-switch {
  position: relative;
  display: inline-block;
  margin-left: auto;
  cursor: pointer;
}
.lm-ss-switch input {
  appearance: none;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}
.lm-ss-switch-track {
  display: inline-block;
  width: 44px; height: 24px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  transition: background .2s;
  position: relative;
}
.lm-ss-switch-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  transition: transform .2s, background .2s;
}
.lm-ss-switch input:checked + .lm-ss-switch-track { background: rgba(74,158,255,.4); }
.lm-ss-switch input:checked + .lm-ss-switch-track .lm-ss-switch-thumb {
  transform: translateX(20px);
  background: #4A9EFF;
}
input.lm-ss-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right,
    #4A9EFF 0%, #4A9EFF var(--fill, 100%),
    rgba(255,255,255,.12) var(--fill, 100%), rgba(255,255,255,.12) 100%);
  outline: none;
  cursor: pointer;
}
input.lm-ss-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  cursor: pointer;
}
input.lm-ss-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  cursor: pointer;
}

/* ============== Narrow phone (≤ 360px) tweaks ============== */
@media (max-width: 360px) {
  #limbo-game .lm-actions { grid-template-columns: minmax(100px, 1fr) minmax(80px, 1fr) minmax(96px, 1fr); gap: 8px; }
  #limbo-game .lm-bet-value, #limbo-game .lm-balance-value { font-size: 16px; }
  #limbo-game .lm-play { font-size: 16px; letter-spacing: 0.5px; }
  #limbo-game .lm-result-number { font-size: 48px; }
}