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

#slide-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;
}

#slide-game .sl-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) {
  #slide-game .sl-inner { padding-top: 28px; }
}

/* ============== Sound button (lives in the auto-bet row) ============== */
#slide-game .sl-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;
}
#slide-game .sl-sound-btn:hover { background: rgba(255,255,255,0.06); }
#slide-game .sl-sound-btn:active { transform: scale(0.94); }
#slide-game .sl-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. */
#slide-game .sl-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. */
#slide-game .sl-result-center {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
#slide-game .sl-result.win {
  background: radial-gradient(ellipse at center, rgba(53,199,89,0.12) 0%, var(--panel-bg) 65%);
}
#slide-game .sl-result.lose {
  background: var(--panel-bg);
}
/* ============== The tape (sliding card strip + center pointer) ========
   A horizontal strip of hexagon-badge cards slides behind a fixed center
   pointer and decelerates onto the result card (case-opening style).
   Geometry contract with slide.js: card slot = card width + track gap —
   JS reads both from the live layout, so sizing lives ONLY here. */
#slide-game .sl-tape-viewport {
  position: relative;
  width: 100%;
  /* 24px glow room on top + card row + a 36px hang zone below it where
     the pointer line drops (Stake-style: pointer never covers the card
     faces). The top room keeps the winning card's glow from being
     clipped at the viewport edge. */
  height: 215px;
  overflow: hidden;
  /* Fade both edges so the strip reads as an endless belt. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}
#slide-game .sl-tape-track {
  position: absolute;
  top: 24px; left: 0;          /* 24px above for the glow */
  height: calc(100% - 60px);   /* 24 top + 36 hang zone = 60 */
  display: flex;
  align-items: stretch;
  gap: 10px;
  will-change: transform;
}
#slide-game .sl-card {
  flex: 0 0 auto;
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 0;
  box-sizing: border-box;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
}
/* Hexagon badge that carries the multiplier value. The hex silhouette is
   drawn with clip-path on a padded box; the inner span holds the label. */
#slide-game .sl-card-hex {
  width: 72px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: #2A2A2E;
  border: 0;
}
#slide-game .sl-card-hex span {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
}
/* Base strip along the card bottom — echoes the tier color. */
#slide-game .sl-card-base {
  width: 100%;
  height: 26px;
  border-radius: 0 0 10px 10px;
  background: rgba(255,255,255,0.10);
}
/* Value tiers (industry palette: grey < 2x, blue 2–10x, gold 10–100x,
   red 100x+). Hex fill + base strip + label color move together. */
/* Hex fill matches the base strip (same bright tier color, not a dark
   version) so the whole card reads as one solid color. Text is white for
   contrast on the brighter fills. */
/* Hex fill matches the base strip (same bright tier color). All labels
   use a soft off-white for a clean, consistent look; gold is deepened a
   touch so the white text stays legible on it. */
#slide-game .sl-card .sl-card-hex span { color: #F0F0F5; }
#slide-game .sl-card.tier-grey .sl-card-hex  { background: linear-gradient(180deg, #6C6C74, #4E4E56); }
#slide-game .sl-card.tier-grey .sl-card-base { background: linear-gradient(180deg, #6C6C74, #4E4E56); }
#slide-game .sl-card.tier-blue .sl-card-hex  { background: linear-gradient(180deg, #7A6CF0, #574AC9); }
#slide-game .sl-card.tier-blue .sl-card-base { background: linear-gradient(180deg, #7A6CF0, #574AC9); }
#slide-game .sl-card.tier-gold .sl-card-hex  { background: linear-gradient(180deg, #E8AE1E, #C68908); }
#slide-game .sl-card.tier-gold .sl-card-base { background: linear-gradient(180deg, #E8AE1E, #C68908); }
#slide-game .sl-card.tier-red  .sl-card-hex  { background: linear-gradient(180deg, #F0483D, #C82820); }
#slide-game .sl-card.tier-red  .sl-card-base { background: linear-gradient(180deg, #F0483D, #C82820); }
/* Settled card under the pointer. */
/* Settled card: white border + a win/lose colored glow. box-sizing is
   border-box so the border doesn't resize the card. The 24px top room on
   the viewport keeps the glow's top edge from being clipped. */
#slide-game .sl-card.hit { animation: sl-hit-pop 0.28s ease-out both; border: 2px solid rgba(255,255,255,0.95); }
#slide-game .sl-card.hit-win  { box-shadow: 0 0 30px 5px rgba(53,199,89,0.70);  background: rgba(53,199,89,0.16); }
#slide-game .sl-card.hit-lose { box-shadow: 0 0 30px 5px rgba(255,59,49,0.60);  background: rgba(255,59,49,0.15); }
@keyframes sl-hit-pop {
  from { transform: scale(1); }
  50%  { transform: scale(1.07); }
  to   { transform: scale(1.03); }
}
/* Fixed center pointer — Stake-style: a thin line that starts BELOW the
   hex badges (never covering the card numbers), runs down across the
   card base bars into the hang zone, and ends in a dot. */
#slide-game .sl-pointer {
  position: absolute;
  left: 50%;
  top: 62%;
  bottom: 4px;
  width: 0;
  pointer-events: none;
}
#slide-game .sl-pointer-line {
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 4px;              /* runs down into the dot so the two connect */
  width: 2px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,0.55);
  border-radius: 1px;
}
#slide-game .sl-pointer-dot {
  position: absolute;
  left: -5px;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,0.6);
}
#slide-game .sl-result-text {
  font-size: 18px;
  font-weight: 700;
  min-height: 22px;
  letter-spacing: 0.3px;
}
#slide-game .sl-result-text.win    { color: var(--win); }
#slide-game .sl-result-text.lose   { color: var(--lose); }
#slide-game .sl-result-text.rolling{ color: var(--grey); }

@media (max-width: 575px) {
  #slide-game .sl-tape-viewport { height: 180px; }
  #slide-game .sl-tape-track { gap: 8px; }
  #slide-game .sl-card { width: 74px; border-radius: 8px; }
  #slide-game .sl-card-hex { width: 58px; height: 64px; }
  #slide-game .sl-card-hex span { font-size: 13px; }
  #slide-game .sl-card-base { height: 20px; border-radius: 0 0 8px 8px; }
}
@media (max-height: 750px) {
  #slide-game .sl-result { padding: 12px 14px 16px; min-height: 180px; }
  #slide-game .sl-result-text { font-size: 15px; }
}
@media (max-height: 700px) {
  #slide-game .sl-result { padding: 10px 12px 12px; min-height: 130px; }
  #slide-game .sl-tape-viewport { height: 165px; }
  #slide-game .sl-card { width: 66px; }
  #slide-game .sl-card-hex { width: 50px; height: 54px; }
  #slide-game .sl-card-hex span { font-size: 12px; }
  #slide-game .sl-card-base { height: 16px; }
}

/* ============== 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. */
#slide-game .sl-history {
  width: 100%;
  /* No horizontal padding — the parent .sl-result already pads 16px. */
  padding: 0;
  box-sizing: border-box;
  height: 24px;
  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%);
}
#slide-game .sl-history-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;   /* newest pinned right */
  gap: 6px;
  height: 100%;
  width: 100%;
}
#slide-game .sl-hist-cell {
  flex: 0 0 auto;
  min-width: 44px;
  height: 22px;
  padding: 0 7px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  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;
}
/* History chips use the SAME bright tier colors as the tape hexagons,
   with the same soft off-white label. */
#slide-game .sl-hist-cell { color: #F0F0F5; }
#slide-game .sl-hist-cell.tier-grey { background: #5E5E66; }
#slide-game .sl-hist-cell.tier-blue { background: #6A5CE0; }
#slide-game .sl-hist-cell.tier-gold { background: #D69C10; }
#slide-game .sl-hist-cell.tier-red  { background: #DA342A; }
#slide-game .sl-hist-cell.enter { animation: sl-hist-enter 0.42s cubic-bezier(0.16, 0.84, 0.44, 1) both; }
@keyframes sl-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 .sl-history hides the
   chip well before it reaches the left edge, so this is just enough
   travel for a smooth glide without overshooting visibly. */
#slide-game .sl-hist-cell.exiting {
  transform: translate3d(-80px, 0, 0);
  opacity: 0;
}

/* ============== Target multiplier (Roobet-style) ===================
   A full-width input with a clear (X) button, and a row of one-tap
   quick-pick target buttons below. */
#slide-game .sl-target-block {
  width: 100%;
  background: var(--panel-bg);
  border-radius: var(--panel-radius);
  padding: 14px 16px 14px;
  box-sizing: border-box;
  border: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#slide-game .sl-target-block.has-error {
  border-color: rgba(255, 59, 49, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 59, 49, 0.08);
}
#slide-game .sl-target-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-align: center;
}

/* Left column (label above input) + quick-picks share one row; the picks
   fill the space to the right of the input, all the same height so they
   sit on one line. Wraps on very narrow screens. */
#slide-game .sl-target-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
/* Two equal-width columns: label + input on the left, label + quick-picks
   on the right. */
#slide-game .sl-target-left,
#slide-game .sl-target-right {
  flex: 1 1 0;
  min-width: 0;
}
/* Shell holds the number input + the clear button on its right edge. */
#slide-game .sl-input-shell {
  position: relative;
  width: 100%;
  display: block;
  min-width: 0;
}
#slide-game .sl-target-input {
  width: 100%;
  height: 40px;
  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: center;
  outline: none;
  padding: 0 40px;          /* symmetric room so the centered number stays centered next to the clear button */
  -moz-appearance: textfield;
        appearance: textfield;
}
#slide-game .sl-target-input::-webkit-outer-spin-button,
#slide-game .sl-target-input::-webkit-inner-spin-button {
  -webkit-appearance: none; appearance: none; margin: 0;
}
#slide-game .sl-target-input:focus { border-color: rgba(255,255,255,0.20); }
#slide-game .sl-target-input:disabled { opacity: 0.55; cursor: not-allowed; }
#slide-game .sl-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);
}
#slide-game .sl-target-input.invalid:focus { border-color: rgba(255, 59, 49, 0.85); }

/* Clear (X) button pinned to the right edge of the input. */
#slide-game .sl-target-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, background 0.15s;
}
#slide-game .sl-target-clear:hover { color: #fff; background: rgba(255,255,255,0.08); }
#slide-game .sl-target-clear:active { transform: translateY(-50%) scale(0.92); }
#slide-game .sl-target-clear:disabled { opacity: 0.4; cursor: not-allowed; }
#slide-game .sl-target-clear svg { width: 18px; height: 18px; }

/* Inline validation warning — fixed-height slot so the block height
   doesn't jump when a message shows/hides. */
#slide-game .sl-target-warning {
  height: 14px;
  line-height: 14px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--lose);
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#slide-game .sl-target-warning.shown { opacity: 1; }

/* Quick-pick row — one-tap common targets; fills its half, buttons
   sharing the width equally. Fixed height + align-items so buttons never
   stretch taller than the input. */
#slide-game .sl-quickpicks {
  display: flex;
  align-items: center;
  height: 40px;
  gap: 4px;
}
#slide-game .sl-qp {
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  border-radius: 8px;
  /* Raised button look: subtle top-lit gradient, a clear border, a top
     inset highlight and a soft drop shadow so it reads as pressable —
     while staying the same 40px height as the input (no size illusion). */
  background: linear-gradient(180deg, #1C2942, #131C2C);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 2px rgba(0,0,0,0.35);
  color: #E6E6EA;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, border-color 0.15s, transform 0.08s, box-shadow 0.08s;
}
#slide-game .sl-qp:hover { background: linear-gradient(180deg, #243350, #1A2438); border-color: rgba(255,255,255,0.22); }
#slide-game .sl-qp:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,0.45); }
#slide-game .sl-qp:disabled { opacity: 0.4; cursor: not-allowed; }
#slide-game .sl-qp.active {
  background: rgba(255,215,0,0.16);
  border-color: rgba(255,215,0,0.55);
  color: var(--accent);
}

@media (max-width: 575px) {
  #slide-game .sl-target-block { padding: 10px 12px; }
  #slide-game .sl-target-label { font-size: 11px; margin-bottom: 6px; }
  #slide-game .sl-target-input { font-size: 15px; height: 38px; }
  /* Stack into two rows: input on top, quick-picks (full width) below. */
  #slide-game .sl-target-left,
  #slide-game .sl-target-right { flex: 1 1 100%; }
  /* Drop the "Quick Picks" heading on mobile — the buttons are obvious. */
  #slide-game .sl-target-right .sl-target-label { display: none; }
  /* Quick-picks fill the full-width row as one even 6-up grid (no fixed
     min so all six fit on one line without overflowing). */
  #slide-game .sl-quickpicks { display: grid; grid-template-columns: repeat(6, 1fr); height: auto; gap: 5px; }
  #slide-game .sl-qp { height: 38px; font-size: 12px; min-width: 0; padding: 0 2px; }
}
@media (max-width: 400px) {
  /* Stay one row of 6 — just shrink the text/gap so 1000× still fits. */
  #slide-game .sl-quickpicks { gap: 4px; }
  #slide-game .sl-qp { font-size: 10.5px; letter-spacing: -0.3px; }
}

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

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

#slide-game .sl-launch { display: flex; }
#slide-game .sl-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;
}
#slide-game .sl-play:hover { filter: brightness(1.05); }
#slide-game .sl-play:active { transform: scale(0.96); }
#slide-game .sl-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 ============== */
#slide-game .sl-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 .sl-inner uses `gap: 14px`; -7px collapses it to ~7px. */
  margin-top: -7px;
}
#slide-game .sl-auto-left { display: flex; align-items: center; gap: 10px; }
#slide-game .sl-auto-label { font-size: 14px; font-weight: 600; color: #fff; }
#slide-game .sl-auto-count { color: var(--accent); font-variant-numeric: tabular-nums; margin-left: 4px; }
#slide-game .sl-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;
}
#slide-game .sl-auto-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
#slide-game .sl-auto-switch[data-on="1"] { background: var(--win); }
#slide-game .sl-auto-switch[data-on="1"]::after { transform: translateX(20px); }/* ============== Modals (auto times, insufficient balance) ============== */
.sl-modal-overlay, .sl-modal-back {
  position: absolute;   /* 相对 .game-player-wrapper 居中 */ inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.sl-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;
}
.sl-modal-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.sl-modal-msg { font-size: 14px; color: var(--text-muted); margin-bottom: 18px; line-height: 1.4; }
.sl-modal-actions { display: flex; justify-content: center; gap: 10px; }
.sl-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;
}
.sl-modal-btn:active { transform: scale(0.97); }

.sl-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;
}
.sl-auto-modal-title { font-size: 16px; font-weight: 800; text-align: center; margin: 0 0 14px; }
.sl-auto-modal-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.sl-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;
}
.sl-auto-modal-opt:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,215,0,0.35); }
.sl-auto-modal-num { font-weight: 800; color: var(--accent); }
.sl-auto-modal-suffix { color: var(--text-muted); font-size: 12px; }
.sl-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;
}
.sl-auto-modal-cancel:hover { background: rgba(255,255,255,0.10); }/* ============== Sound settings dialog — ported from dice (.dx-ss-*) ============== */
.sl-ss-mask {
  position: absolute;   /* 相对 .game-player-wrapper 居中 */
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: sl-ss-mask-in 180ms ease;
  font-family: 'Inter', system-ui, sans-serif;
}
@keyframes sl-ss-mask-in { from { opacity: 0; } to { opacity: 1; } }
.sl-ss-dialog {
  width: 340px;
  max-width: 100%;
  background: #1C1C1D;   /* 与 Auto 弹窗同底色 */
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  animation: sl-ss-dialog-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes sl-ss-dialog-in {
  from { opacity: 0; transform: scale(0.94) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.sl-ss-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sl-ss-title { color: rgba(255,255,255,.75); font-size: 14px; font-weight: 700; letter-spacing: 1.5px; }
.sl-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;
}
.sl-ss-close:hover { color: #fff; background: rgba(255,255,255,.08); }
.sl-ss-row {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  gap: 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sl-ss-row:last-child { border-bottom: none; }
.sl-ss-label { flex: 0 0 40%; color: rgba(255,255,255,.6); font-size: 15px; }
.sl-ss-switch {
  position: relative;
  display: inline-block;
  margin-left: auto;
  cursor: pointer;
}
.sl-ss-switch input {
  appearance: none;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}
.sl-ss-switch-track {
  display: inline-block;
  width: 44px; height: 24px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  transition: background .2s;
  position: relative;
}
.sl-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;
}
.sl-ss-switch input:checked + .sl-ss-switch-track { background: rgba(255,215,0,.4); }
.sl-ss-switch input:checked + .sl-ss-switch-track .sl-ss-switch-thumb {
  transform: translateX(20px);
  background: #FFD700;
}
input.sl-ss-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right,
    #FFD700 0%, #FFD700 var(--fill, 100%),
    rgba(255,255,255,.12) var(--fill, 100%), rgba(255,255,255,.12) 100%);
  outline: none;
  cursor: pointer;
}
input.sl-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.sl-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) {
  #slide-game .sl-actions { grid-template-columns: minmax(100px, 1fr) minmax(80px, 1fr) minmax(96px, 1fr); gap: 8px; }
  #slide-game .sl-bet-value, #slide-game .sl-balance-value { font-size: 16px; }
  #slide-game .sl-play { font-size: 16px; letter-spacing: 0.5px; }
  #slide-game .sl-tape-viewport { height: 174px; }
  #slide-game .sl-card { width: 64px; }
  #slide-game .sl-card-hex { width: 48px; height: 52px; }
  #slide-game .sl-card-hex span { font-size: 11px; }
}


/* 广告栏在 wrapper 内时(≥880px),弹窗遮罩让位 326px,以游戏列为中心(同 game-cover 处理) */
@media (min-width: 880px) {
  .car-has-rail .game-player-wrapper .sl-modal-overlay,
  .car-has-rail .game-player-wrapper .sl-modal-back,
  .car-has-rail .game-player-wrapper .sl-ss-mask { right: 326px; }
}

/* Mobile history-chip sizing — placed at the end so it overrides the base
   .sl-hist-cell rules that appear later in source order than the main
   max-width:575 block. */
@media (max-width: 575px) {
  #slide-game .sl-history { height: 22px; }
  #slide-game .sl-hist-cell { min-width: 38px; height: 20px; padding: 0 5px; font-size: 10.5px; border-radius: 5px; }
}