/* ===== Per-game page themes =====
   The game page carries data-game="<id>" on .game (showGame in app.js), so a theme is plain CSS scoped to
   one id. Most of the work is done by re-pointing the palette variables (--text, --muted, --border,
   --accent, --panel, --panel2) inside the deck: every shared control already reads them. What the
   variables cannot reach — the shapes, the wood, the vines — is restyled below them.
   Up to 1080px the round's controls move into the mobile dock, which lives in <body>, outside .game;
   mobileDock.js copies the id onto it (.mobile-dock[data-game="<id>"]). Every deck control rule below
   names its dock twin next to it; the panel frames do not, because in the dock a panel has none. */

/* ── Crazy Monkey: carved jungle wood, green vines, gold diamond studs, a sunset glow ── */
.game[data-game="slot-baboon"],
.mobile-dock[data-game="slot-baboon"]{
  --cm-wood-deep: #2a1406;
  --cm-wood-dark: #3d200d;
  --cm-wood: #5a3216;
  --cm-wood-mid: #7a4620;
  --cm-wood-light: #b5763a;
  --cm-plank: #ecc58a;
  --cm-leaf: #5cbf3a;
  --cm-leaf-dark: #2f7a1f;
  --cm-gold: #e7b53c;
  --cm-sun: #f0902a;
}
.game[data-game="slot-baboon"] .sidebar,
.game[data-game="slot-baboon"] .game-info,
.mobile-dock[data-game="slot-baboon"]{
  --text: #fbe7c2;
  --muted: #cfa877;
  --border: rgba(181, 118, 58, 0.45);
  --accent: #e7b53c;
  --accent2: #7fd65a;
  --panel: #3d200d;
  --panel2: #5a3216;
}

/* every panel is a plank board: dark wood with horizontal planks and grain, a thick carved rim,
   a vine across the top and two gold diamonds at the bottom corners */
.game[data-game="slot-baboon"] .sidebar .panel,
.game[data-game="slot-baboon"] .game-info > details{
  position: relative;
  margin-top: 6px;
  padding-top: 20px;
  padding-bottom: 24px; /* room for the studs */
  border: 3px solid var(--cm-wood-deep);
  border-radius: 16px;
  background:
    radial-gradient(130% 60% at 85% -10%, rgba(240, 144, 42, 0.18), transparent 60%),
    repeating-linear-gradient(180deg, transparent 0 46px, rgba(20, 8, 2, 0.55) 46px 48px, rgba(255, 210, 150, 0.08) 48px 49px),
    repeating-linear-gradient(178deg, rgba(255, 214, 150, 0.035) 0 2px, transparent 2px 7px, rgba(0, 0, 0, 0.06) 7px 8px, transparent 8px 13px),
    linear-gradient(180deg, var(--cm-wood) 0%, var(--cm-wood-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 214, 150, 0.28),
    inset 0 0 0 1px rgba(233, 170, 90, 0.16),
    inset 0 -10px 18px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(92, 191, 58, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.5);
}
/* the vine: a stem with leaves, laid over the top rim */
.game[data-game="slot-baboon"] .sidebar .panel::before,
.game[data-game="slot-baboon"] .game-info > details::before{
  content: '';
  position: absolute;
  left: 8px; right: 8px; top: -13px;
  height: 28px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 28' preserveAspectRatio='none'%3E%3Cpath d='M0 15 C25 6 45 22 75 14 S125 5 150 14 S200 23 228 14 S280 6 300 15' fill='none' stroke='%231f4d12' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M0 15 C25 6 45 22 75 14 S125 5 150 14 S200 23 228 14 S280 6 300 15' fill='none' stroke='%2366b83a' stroke-width='1.6' stroke-linecap='round'/%3E%3Cg fill='%234fa83a' stroke='%231f4d12' stroke-width='1'%3E%3Cellipse cx='22' cy='8' rx='9' ry='4' transform='rotate(-28 22 8)'/%3E%3Cellipse cx='58' cy='21' rx='9' ry='4' transform='rotate(24 58 21)'/%3E%3Cellipse cx='104' cy='6' rx='8' ry='3.6' transform='rotate(-18 104 6)'/%3E%3Cellipse cx='176' cy='21' rx='9' ry='4' transform='rotate(26 176 21)'/%3E%3Cellipse cx='214' cy='8' rx='8' ry='3.6' transform='rotate(-24 214 8)'/%3E%3Cellipse cx='268' cy='19' rx='9' ry='4' transform='rotate(20 268 19)'/%3E%3C/g%3E%3Cg fill='none' stroke='%23a6e07a' stroke-width='0.8' opacity='0.8'%3E%3Cpath d='M15 11 L29 5'/%3E%3Cpath d='M51 18 L65 24'/%3E%3Cpath d='M169 18 L183 24'/%3E%3Cpath d='M261 16 L275 22'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}
/* the studs: two gold diamonds in the bottom corners */
.game[data-game="slot-baboon"] .sidebar .panel::after,
.game[data-game="slot-baboon"] .game-info > details::after{
  content: '';
  position: absolute;
  left: 8px; right: 8px; bottom: 7px;
  height: 12px;
  pointer-events: none;
  --cm-stud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0 L12 6 L6 12 L0 6 Z' fill='%23e7b53c' stroke='%235a3a0a' stroke-width='1'/%3E%3Cpath d='M6 1.6 L10.4 6 L6 6 Z' fill='%23fff1b8' opacity='0.75'/%3E%3C/svg%3E");
  background: var(--cm-stud) left center / 12px 12px no-repeat, var(--cm-stud) right center / 12px 12px no-repeat;
}
/* headings: carved light wood letters */
.game[data-game="slot-baboon"] .sidebar .panel h4{
  color: var(--cm-plank);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 0 var(--cm-wood-deep), 0 0 10px rgba(240, 144, 42, 0.25);
}

/* inset wood: the stake plaque, the stepper knobs, segment trays, amount fields */
.game[data-game="slot-baboon"] .sidebar .stake-value,
.game[data-game="slot-baboon"] .sidebar .auto-seg,
.game[data-game="slot-baboon"] .sidebar .auto-run,
.mobile-dock[data-game="slot-baboon"] .stake-value,
.mobile-dock[data-game="slot-baboon"] .auto-seg,
.mobile-dock[data-game="slot-baboon"] .auto-run{
  border: 2px solid var(--cm-wood-deep);
  background: linear-gradient(180deg, #24120a, #33190b);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 214, 150, 0.15);
}
.game[data-game="slot-baboon"] .sidebar .stake-num,
.mobile-dock[data-game="slot-baboon"] .stake-num{
  color: var(--cm-plank);
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(231, 181, 60, 0.35);
}
.game[data-game="slot-baboon"] .sidebar .step-btn,
.mobile-dock[data-game="slot-baboon"] .step-btn{
  border: 2px solid var(--cm-wood-deep);
  border-radius: 50%;
  aspect-ratio: 1;
  height: auto;
  color: var(--cm-wood-deep);
  font-size: 24px;
  font-weight: 900;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 240, 200, 0.55), transparent 45%),
    radial-gradient(circle, var(--cm-plank) 0%, var(--cm-wood-light) 70%, var(--cm-wood-mid) 100%);
  box-shadow: 0 3px 0 var(--cm-wood-deep), 0 5px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease;
}
.game[data-game="slot-baboon"] .sidebar .step-btn:hover:not(:disabled),
.mobile-dock[data-game="slot-baboon"] .step-btn:hover:not(:disabled){
  filter: brightness(1.1);
  border-color: var(--cm-wood-deep);
}
.game[data-game="slot-baboon"] .sidebar .step-btn:active:not(:disabled),
.mobile-dock[data-game="slot-baboon"] .step-btn:active:not(:disabled){
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--cm-wood-deep), 0 2px 5px rgba(0, 0, 0, 0.45);
}

/* the stake slider: a vine, gold where it has grown, a coconut for the thumb */
.game[data-game="slot-baboon"] .sidebar .ladder::-webkit-slider-runnable-track,
.mobile-dock[data-game="slot-baboon"] .ladder::-webkit-slider-runnable-track{
  height: 8px;
  background: linear-gradient(90deg, var(--cm-leaf) var(--fill, 0%), #2a1406 var(--fill, 0%));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--cm-leaf-dark);
}
.game[data-game="slot-baboon"] .sidebar .ladder::-webkit-slider-thumb,
.mobile-dock[data-game="slot-baboon"] .ladder::-webkit-slider-thumb{
  width: 22px; height: 22px; margin-top: -7px;
  background: radial-gradient(circle at 35% 30%, #c98a4a, #6a3a14 60%, #3a1d08);
  box-shadow: 0 0 0 2px var(--cm-wood-deep), 0 3px 6px rgba(0, 0, 0, 0.5);
}
.game[data-game="slot-baboon"] .sidebar .ladder::-moz-range-track,
.mobile-dock[data-game="slot-baboon"] .ladder::-moz-range-track{ height: 8px; background: #2a1406; }
.game[data-game="slot-baboon"] .sidebar .ladder::-moz-range-progress,
.mobile-dock[data-game="slot-baboon"] .ladder::-moz-range-progress{ height: 8px; background: var(--cm-leaf); }
.game[data-game="slot-baboon"] .sidebar .ladder::-moz-range-thumb,
.mobile-dock[data-game="slot-baboon"] .ladder::-moz-range-thumb{
  width: 22px; height: 22px;
  background: radial-gradient(circle at 35% 30%, #c98a4a, #6a3a14 60%, #3a1d08);
  box-shadow: 0 0 0 2px var(--cm-wood-deep);
}
.game[data-game="slot-baboon"] .sidebar .ladder-ticks i.on,
.mobile-dock[data-game="slot-baboon"] .ladder-ticks i.on{ background: var(--cm-leaf); }

/* chips and options: small planks; the chosen one turns into a leaf with a gold rim */
.game[data-game="slot-baboon"] .sidebar .chip,
.game[data-game="slot-baboon"] .sidebar .auto-opt span,
.mobile-dock[data-game="slot-baboon"] .chip,
.mobile-dock[data-game="slot-baboon"] .auto-opt span{
  color: var(--cm-plank);
  border: 2px solid var(--cm-wood-deep);
  border-radius: 10px;
  background:
    repeating-linear-gradient(178deg, rgba(255, 214, 150, 0.06) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, var(--cm-wood-mid), var(--cm-wood));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 214, 150, 0.3), 0 3px 0 var(--cm-wood-deep), 0 4px 8px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 0 #000;
}
.game[data-game="slot-baboon"] .sidebar .chip:hover:not(:disabled),
.game[data-game="slot-baboon"] .sidebar .auto-opt:hover span,
.mobile-dock[data-game="slot-baboon"] .chip:hover:not(:disabled),
.mobile-dock[data-game="slot-baboon"] .auto-opt:hover span{
  color: #fff3d6;
  border-color: var(--cm-wood-deep);
  filter: brightness(1.12);
}
.game[data-game="slot-baboon"] .sidebar .chip.active,
.game[data-game="slot-baboon"] .sidebar .auto-opt.on span,
.mobile-dock[data-game="slot-baboon"] .chip.active,
.mobile-dock[data-game="slot-baboon"] .auto-opt.on span{
  color: #fffbe8;
  border-color: var(--cm-gold);
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(220, 255, 180, 0.45), transparent 60%),
    linear-gradient(180deg, var(--cm-leaf), var(--cm-leaf-dark));
  box-shadow: inset 0 1px 0 rgba(220, 255, 180, 0.5), 0 3px 0 #1a4a0e, 0 0 12px rgba(92, 191, 58, 0.45);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.game[data-game="slot-baboon"] .sidebar .auto-seg-btn,
.mobile-dock[data-game="slot-baboon"] .auto-seg-btn{ color: var(--muted); }
.game[data-game="slot-baboon"] .sidebar .auto-seg-btn.on,
.mobile-dock[data-game="slot-baboon"] .auto-seg-btn.on{
  color: #fffbe8;
  background: linear-gradient(180deg, var(--cm-leaf), var(--cm-leaf-dark));
  box-shadow: inset 0 0 0 1px var(--cm-gold), 0 0 10px rgba(92, 191, 58, 0.35);
}

/* switches: a wooden slot with a coconut that slides onto a leaf */
.game[data-game="slot-baboon"] .sidebar .sw,
.mobile-dock[data-game="slot-baboon"] .sw{
  border: 2px solid var(--cm-wood-deep);
  background: #24120a;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}
.game[data-game="slot-baboon"] .sidebar .sw i,
.mobile-dock[data-game="slot-baboon"] .sw i{
  top: 2px;
  background: radial-gradient(circle at 35% 30%, #c98a4a, #6a3a14 65%);
}
.game[data-game="slot-baboon"] .sidebar .sw:has(input:checked),
.mobile-dock[data-game="slot-baboon"] .sw:has(input:checked){
  border-color: var(--cm-leaf-dark);
  background: linear-gradient(180deg, var(--cm-leaf), var(--cm-leaf-dark));
}
.game[data-game="slot-baboon"] .sidebar .sw input:checked ~ i,
.mobile-dock[data-game="slot-baboon"] .sw input:checked ~ i{
  background: radial-gradient(circle at 35% 30%, #fff1b8, var(--cm-gold) 65%);
}
.game[data-game="slot-baboon"] .sidebar .auto-amt input,
.mobile-dock[data-game="slot-baboon"] .auto-amt input{
  border: 2px solid var(--cm-wood-deep);
  background: #24120a;
  color: var(--cm-plank);
}
.game[data-game="slot-baboon"] .sidebar .auto-cond,
.mobile-dock[data-game="slot-baboon"] .auto-cond{ border-top: 2px dashed rgba(181, 118, 58, 0.35); }
.game[data-game="slot-baboon"] .sidebar .bar,
.mobile-dock[data-game="slot-baboon"] .bar{ background: #24120a; }
.game[data-game="slot-baboon"] .sidebar .bar i,
.mobile-dock[data-game="slot-baboon"] .bar i{ background: linear-gradient(90deg, var(--cm-leaf-dark), var(--cm-leaf)); }

/* the autoplay start: a plank sign like the SPIN art, light letters on dark wood */
.game[data-game="slot-baboon"] .sidebar .auto-start,
.mobile-dock[data-game="slot-baboon"] .auto-start{
  color: var(--cm-plank);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 3px solid var(--cm-wood-deep);
  border-radius: 14px;
  background:
    repeating-linear-gradient(178deg, rgba(255, 214, 150, 0.07) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, var(--cm-wood-mid), var(--cm-wood-dark));
  box-shadow: inset 0 1px 0 rgba(255, 214, 150, 0.35), 0 0 0 2px var(--cm-leaf-dark), 0 4px 0 var(--cm-wood-deep), 0 8px 16px rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 0 #000;
}
.game[data-game="slot-baboon"] .sidebar .auto-start::before,
.game[data-game="slot-baboon"] .sidebar .auto-start::after,
.mobile-dock[data-game="slot-baboon"] .auto-start::before,
.mobile-dock[data-game="slot-baboon"] .auto-start::after{ display: none; }
.game[data-game="slot-baboon"] .sidebar .auto-start:hover:not(:disabled),
.mobile-dock[data-game="slot-baboon"] .auto-start:hover:not(:disabled){ filter: brightness(1.12); }

/* the SPIN sign stands in a warm sunset glow */
.game[data-game="slot-baboon"] .sidebar .spin-block,
.mobile-dock[data-game="slot-baboon"] .spin-block{
  padding: 6px 0 2px;
  background: radial-gradient(60% 55% at 50% 40%, rgba(240, 144, 42, 0.28), transparent 70%);
}

/* the history: wins are leaves, losses are bare wood */
.game[data-game="slot-baboon"] .hist-pill{
  border: 1px solid var(--cm-wood-deep);
  background: #2a1406;
  color: #a07c55;
}
.game[data-game="slot-baboon"] .hist-pill.win{
  border-color: var(--cm-leaf-dark);
  background: linear-gradient(180deg, var(--cm-leaf), var(--cm-leaf-dark));
  color: #fffbe8;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* rules and payouts at the foot of the page: the same plank boards, made wide */
.game[data-game="slot-baboon"] .game-info{ gap: 22px; margin-top: 34px; }
.game[data-game="slot-baboon"] .game-info > details{
  overflow: visible; /* the vine hangs over the rim */
  padding-top: 14px;
}
/* a wide board would stretch the leaves, so the vine is tiled at its own size instead */
.game[data-game="slot-baboon"] .game-info > details::before{
  left: 14px; right: 14px;
  background-size: 300px 28px;
  background-repeat: repeat-x;
  background-position: left center;
}
.game[data-game="slot-baboon"] .game-info > details::after{ left: 12px; right: 12px; }
/* the heading is a small carved sign hung in the middle of the board */
.game[data-game="slot-baboon"] .game-info summary{
  width: max-content;
  margin: 0 auto;
  padding: 9px 26px;
  border: 3px solid var(--cm-wood-deep);
  border-radius: 12px;
  color: var(--cm-plank);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  background:
    repeating-linear-gradient(178deg, rgba(255, 214, 150, 0.07) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, var(--cm-wood-mid), var(--cm-wood-dark));
  box-shadow: inset 0 1px 0 rgba(255, 214, 150, 0.35), 0 0 0 2px var(--cm-leaf-dark), 0 4px 0 var(--cm-wood-deep), 0 8px 16px rgba(0, 0, 0, 0.4);
  text-shadow: 0 2px 0 #000;
  transition: filter 0.15s ease;
}
.game[data-game="slot-baboon"] .game-info summary:hover{ color: #fff3d6; filter: brightness(1.12); }
.game[data-game="slot-baboon"] .game-info summary::after{ color: var(--cm-leaf); }
.game[data-game="slot-baboon"] .game-info details[open] > summary{ margin-bottom: 8px; }

/* the rules: warm parchment-coloured text on the wood, gold headings, leaf bullets */
.game[data-game="slot-baboon"] .rules-body{
  padding: 4px 26px 6px;
  color: #ecd3a6;
  font-size: 14px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
}
.game[data-game="slot-baboon"] .rules-h{
  color: var(--cm-gold);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 0 var(--cm-wood-deep);
}
.game[data-game="slot-baboon"] .rules-list{ list-style: none; padding-left: 4px; }
.game[data-game="slot-baboon"] .rules-list li{ position: relative; padding-left: 24px; }
.game[data-game="slot-baboon"] .rules-list li::before{
  content: '';
  position: absolute;
  left: 0; top: 0.42em;
  width: 15px; height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Cpath d='M1 10 C2 3 9 0 15 1 C14 7 8 11 1 10 Z' fill='%235cbf3a' stroke='%231f4d12' stroke-width='1'/%3E%3Cpath d='M2 9.5 L13 2' stroke='%23a6e07a' stroke-width='0.9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* the payouts: every symbol on its own little plank tile, the amounts in gold */
.game[data-game="slot-baboon"] .paytable{ gap: 14px; padding: 6px 18px 4px; }
.game[data-game="slot-baboon"] .paytable-card{
  min-width: 112px;
  padding: 10px 12px 12px;
  border: 2px solid var(--cm-wood-deep);
  border-radius: 12px;
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(240, 144, 42, 0.16), transparent 70%),
    linear-gradient(180deg, #2c160a, #3a1d0c);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 214, 150, 0.18);
}
.game[data-game="slot-baboon"] .paytable-card:hover{
  border-color: var(--cm-leaf-dark);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--cm-leaf), 0 0 14px rgba(92, 191, 58, 0.35);
}
.game[data-game="slot-baboon"] .paytable-icon{ width: 58px; height: 58px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5)); }
.game[data-game="slot-baboon"] .paytable-amt{ color: #d9b98a; }
.game[data-game="slot-baboon"] .paytable-amt b{ color: var(--cm-gold); font-weight: 800; text-shadow: 0 1px 0 #000; }
.game[data-game="slot-baboon"] .paytable-rule{ width: 100%; color: #ecd3a6; }
.game[data-game="slot-baboon"] .paytable-rule b{ color: var(--cm-gold); }

/* the mobile dock (≤1080px): one wide plank board fixed to the bottom edge, a vine along its top,
   the SPIN glass button turned into a wooden sign */
.mobile-dock[data-game="slot-baboon"]{
  border-top: 3px solid var(--cm-wood-deep);
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(240, 144, 42, 0.16), transparent 60%),
    repeating-linear-gradient(178deg, rgba(255, 214, 150, 0.035) 0 2px, transparent 2px 7px, rgba(0, 0, 0, 0.06) 7px 8px, transparent 8px 13px),
    linear-gradient(180deg, var(--cm-wood) 0%, var(--cm-wood-dark) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 214, 150, 0.28), 0 0 0 1px rgba(92, 191, 58, 0.18), 0 -14px 34px rgba(0, 0, 0, 0.55);
  padding-top: 16px;
}
.mobile-dock[data-game="slot-baboon"]::before{
  content: '';
  position: absolute;
  left: 18px; right: 18px; top: -13px;
  height: 28px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 28' preserveAspectRatio='none'%3E%3Cpath d='M0 15 C25 6 45 22 75 14 S125 5 150 14 S200 23 228 14 S280 6 300 15' fill='none' stroke='%231f4d12' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M0 15 C25 6 45 22 75 14 S125 5 150 14 S200 23 228 14 S280 6 300 15' fill='none' stroke='%2366b83a' stroke-width='1.6' stroke-linecap='round'/%3E%3Cg fill='%234fa83a' stroke='%231f4d12' stroke-width='1'%3E%3Cellipse cx='22' cy='8' rx='9' ry='4' transform='rotate(-28 22 8)'/%3E%3Cellipse cx='58' cy='21' rx='9' ry='4' transform='rotate(24 58 21)'/%3E%3Cellipse cx='104' cy='6' rx='8' ry='3.6' transform='rotate(-18 104 6)'/%3E%3Cellipse cx='176' cy='21' rx='9' ry='4' transform='rotate(26 176 21)'/%3E%3Cellipse cx='214' cy='8' rx='8' ry='3.6' transform='rotate(-24 214 8)'/%3E%3Cellipse cx='268' cy='19' rx='9' ry='4' transform='rotate(20 268 19)'/%3E%3C/g%3E%3C/svg%3E") left center / 300px 28px repeat-x;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}
/* no sunset halo or extra room around the button in a bar this short */
.mobile-dock[data-game="slot-baboon"] .spin-block{ padding: 0; background: none; }
/* the glass SPIN button (styles.css, ≤1080px) becomes a plank sign like the SPIN art */
.mobile-dock[data-game="slot-baboon"] .spin-img-btn{
  color: #f6dca8;
  border: 3px solid var(--cm-wood-deep);
  border-radius: 16px;
  font-size: 20px;
  letter-spacing: 0.12em;
  background:
    repeating-linear-gradient(178deg, rgba(255, 214, 150, 0.08) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, var(--cm-wood-mid), var(--cm-wood) 55%, var(--cm-wood-dark)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.45), 0 0 0 2px var(--cm-leaf-dark), 0 4px 0 var(--cm-wood-deep), 0 8px 16px rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 0 var(--cm-wood-deep), 0 0 10px rgba(240, 144, 42, 0.35);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mobile-dock[data-game="slot-baboon"] .spin-img-btn:hover:not(:disabled),
.mobile-dock[data-game="slot-baboon"] .spin-img-btn:active:not(:disabled){
  color: #fff3d6;
  background:
    repeating-linear-gradient(178deg, rgba(255, 214, 150, 0.08) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #8f5428, var(--cm-wood-mid) 55%, var(--cm-wood)) !important;
}
.mobile-dock[data-game="slot-baboon"] .spin-img-btn:active:not(:disabled){
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.45), 0 0 0 2px var(--cm-leaf-dark), 0 2px 0 var(--cm-wood-deep), 0 4px 10px rgba(0, 0, 0, 0.45);
}
.mobile-dock[data-game="slot-baboon"] .spin-img-btn:disabled{
  color: #a07c55;
  border-color: var(--cm-wood-deep);
  background: linear-gradient(180deg, var(--cm-wood), var(--cm-wood-dark)) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(47, 122, 31, 0.4);
}
/* the round's verdict under the board: a leaf for a win, bare wood for a loss */
.game[data-game="slot-baboon"] .dock-outcome.win{
  color: #fffbe8;
  border: 2px solid var(--cm-gold);
  background: linear-gradient(180deg, var(--cm-leaf), var(--cm-leaf-dark));
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.game[data-game="slot-baboon"] .dock-outcome.lose{
  color: var(--cm-plank);
  border: 2px solid var(--cm-wood-deep);
  background: linear-gradient(180deg, var(--cm-wood-mid), var(--cm-wood-dark));
  text-shadow: 0 1px 0 #000;
}

/* ── Candy Bonanza: glossy candy — hot-pink striped boxes in a gold jelly rim, candy-cane ribbons,
   gumballs in the corners, yellow-orange jelly lettering, all on the purple candyland of the backdrop.
   Deck controls and their dock twins share one rule each through :is(). ── */
.game[data-game="slot-candy"],
.mobile-dock[data-game="slot-candy"]{
  --cd-pink: #ff3fa4;
  --cd-pink-light: #ff8ccb;
  --cd-magenta: #c2186f;
  --cd-berry: #5a0a3a;
  --cd-berry-deep: #3a0626;
  --cd-gold: #ffc83a;
  --cd-gold-dark: #c77a0a;
  --cd-yellow: #ffe066;
  --cd-orange: #ff9d1f;
  --cd-cream: #fff4fa;
  --cd-cane: repeating-linear-gradient(135deg, #ffffff 0 7px, #ff2e63 7px 14px);
  --cd-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 45%);
  --cd-jelly: linear-gradient(180deg, #fff6b0, #ffc83a 55%, #ff9d1f);
  --cd-swirl: conic-gradient(#ff2e63 0 60deg, #fff 60deg 120deg, #ffb800 120deg 180deg, #fff 180deg 240deg, #ff2e63 240deg 300deg, #fff 300deg 360deg);
  --cd-sign: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 45%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #ff3fa4, #c2186f);
}
.game[data-game="slot-candy"] .sidebar,
.game[data-game="slot-candy"] > .sweet-modes,
.game[data-game="slot-candy"] .game-info,
.mobile-dock[data-game="slot-candy"]{
  --text: #fff4fa;
  --muted: #ffc4e6;
  --border: rgba(255, 200, 58, 0.5);
  --accent: #ffe066;
  --accent2: #ffe066;
  --panel: #8a1456;
  --panel2: #c2186f;
}

/* the field sits in a gold jelly frame on a see-through purple glass */
.game[data-game="slot-candy"] .stage.board{
  border: 4px solid var(--cd-gold);
  border-radius: 22px;
  box-shadow: inset 0 0 0 2px var(--cd-gold-dark), inset 0 0 40px rgba(255, 63, 164, 0.25), 0 0 0 2px var(--cd-berry), 0 0 26px rgba(255, 63, 164, 0.45), 0 12px 30px rgba(0, 0, 0, 0.5);
}

/* on a wide screen the field is purple candy glass; up to 1080px the board paints the backdrop art itself
   (.stage.board.board-bg in styles.css), so the shorthand must not reach there */
@media (min-width: 1081px){
  .game[data-game="slot-candy"] .stage.board{
    background: radial-gradient(90% 70% at 50% 0%, rgba(255, 63, 164, 0.22), transparent 70%), rgba(42, 10, 74, 0.6);
  }
}

/* every panel — the deck's and the boards at the foot of the page — is a striped candy box */
.game[data-game="slot-candy"] .sidebar .panel,
.game[data-game="slot-candy"] > .sweet-modes,
.game[data-game="slot-candy"] .game-info > details{
  position: relative;
  margin-top: 8px;
  padding-top: 22px;
  padding-bottom: 26px;
  border: 4px solid var(--cd-gold);
  border-radius: 20px;
  overflow: visible;
  background:
    var(--cd-gloss),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 14px, rgba(0, 0, 0, 0.05) 14px 28px),
    radial-gradient(120% 80% at 50% 0%, var(--cd-pink), var(--cd-magenta) 70%, #8a1456);
  box-shadow:
    inset 0 0 0 2px var(--cd-gold-dark),
    inset 0 -12px 20px rgba(90, 10, 58, 0.45),
    0 0 0 2px var(--cd-berry),
    0 10px 24px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(255, 63, 164, 0.3);
}
/* a candy-cane ribbon across the top rim */
.game[data-game="slot-candy"] .sidebar .panel::before,
.game[data-game="slot-candy"] > .sweet-modes::before,
.game[data-game="slot-candy"] .game-info > details::before{
  content: '';
  position: absolute;
  left: 22px; right: 22px; top: -9px;
  height: 12px;
  border-radius: 999px;
  pointer-events: none;
  background: var(--cd-gloss), var(--cd-cane);
  box-shadow: 0 0 0 2px var(--cd-berry), 0 2px 4px rgba(0, 0, 0, 0.4);
}
/* gumballs and a star in the bottom corners, like the ones on the SPIN sign */
.game[data-game="slot-candy"] .sidebar .panel::after,
.game[data-game="slot-candy"] > .sweet-modes::after,
.game[data-game="slot-candy"] .game-info > details::after{
  content: '';
  position: absolute;
  left: 8px; right: 8px; bottom: 6px;
  height: 16px;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16'%3E%3Cdefs%3E%3CradialGradient id='a' cx='.35' cy='.3'%3E%3Cstop offset='0' stop-color='%23bfe8ff'/%3E%3Cstop offset='.5' stop-color='%231e90ff'/%3E%3Cstop offset='1' stop-color='%230a3f8a'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='.35' cy='.3'%3E%3Cstop offset='0' stop-color='%23d6ffb0'/%3E%3Cstop offset='.5' stop-color='%2346c21a'/%3E%3Cstop offset='1' stop-color='%23206b08'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='8' cy='8' r='7' fill='url(%23a)'/%3E%3Ccircle cx='22' cy='10' r='5' fill='url(%23b)'/%3E%3C/svg%3E") left center / 30px 16px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16'%3E%3Cdefs%3E%3CradialGradient id='c' cx='.35' cy='.3'%3E%3Cstop offset='0' stop-color='%23f0d0ff'/%3E%3Cstop offset='.5' stop-color='%239b30e0'/%3E%3Cstop offset='1' stop-color='%234a0a80'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='8' cy='10' r='5' fill='url(%23c)'/%3E%3Cpath d='M22 2 L23.8 6.2 L28.4 6.6 L24.9 9.6 L26 14 L22 11.6 L18 14 L19.1 9.6 L15.6 6.6 L20.2 6.2 Z' fill='%23ffd23a' stroke='%23c77a0a' stroke-width='.8'/%3E%3C/svg%3E") right center / 30px 16px no-repeat;
}
/* headings: yellow-orange jelly lettering with a berry outline */
.game[data-game="slot-candy"] .sidebar .panel h4,
.game[data-game="slot-candy"] .rules-h{
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cd-yellow);
  text-shadow: 0 2px 0 var(--cd-berry), 1px 0 0 var(--cd-berry), -1px 0 0 var(--cd-berry), 0 -1px 0 var(--cd-berry), 0 0 10px rgba(255, 157, 31, 0.55);
}

/* inset berry: the stake plaque, the segment trays, the run box */
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) :is(.stake-value, .auto-seg, .auto-run){
  border: 2px solid var(--cd-berry);
  background: linear-gradient(180deg, var(--cd-berry-deep), var(--cd-berry));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.25);
}
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .stake-num{
  color: var(--cd-yellow);
  text-shadow: 0 2px 0 var(--cd-berry-deep), 0 0 12px rgba(255, 200, 58, 0.5);
}
/* − and +: glossy gumballs, blue and green */
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .step-btn{
  border: 2px solid var(--cd-berry);
  border-radius: 50%;
  aspect-ratio: 1;
  height: auto;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(10, 40, 100, 0.6);
  background: radial-gradient(circle at 35% 28%, #e0f4ff 0%, #4fb0ff 32%, #1e6fd8 70%, #0a3f8a 100%);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.3), 0 3px 0 var(--cd-berry), 0 5px 10px rgba(0, 0, 0, 0.4);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .stake-value + .step-btn{
  text-shadow: 0 2px 0 rgba(20, 80, 10, 0.6);
  background: radial-gradient(circle at 35% 28%, #eaffd6 0%, #7ee04a 32%, #3a9e14 70%, #1d5a06 100%);
}
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .step-btn:hover:not(:disabled){ filter: brightness(1.12); border-color: var(--cd-berry); }
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .step-btn:active:not(:disabled){
  transform: translateY(2px);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.3), 0 1px 0 var(--cd-berry), 0 2px 5px rgba(0, 0, 0, 0.4);
}
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .step-btn:disabled{ filter: grayscale(0.7) brightness(0.8); opacity: 0.6; }

/* the stake slider: a candy cane, yellow where it has filled, a swirl lollipop for the thumb */
.game[data-game="slot-candy"] .sidebar .ladder::-webkit-slider-runnable-track{
  height: 10px;
  background: linear-gradient(90deg, rgba(255, 224, 102, 0.9) var(--fill, 0%), transparent var(--fill, 0%)), var(--cd-cane);
  box-shadow: 0 0 0 2px var(--cd-berry), inset 0 2px 3px rgba(0, 0, 0, 0.35);
}
.game[data-game="slot-candy"] .sidebar .ladder::-webkit-slider-thumb{
  width: 26px; height: 26px; margin-top: -8px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 22%, transparent 23%), var(--cd-swirl);
  box-shadow: 0 0 0 2px var(--cd-berry), 0 3px 6px rgba(0, 0, 0, 0.45);
}
.game[data-game="slot-candy"] .sidebar .ladder::-moz-range-track{ height: 10px; background: var(--cd-cane); }
.game[data-game="slot-candy"] .sidebar .ladder::-moz-range-progress{ height: 10px; background: var(--cd-yellow); }
.game[data-game="slot-candy"] .sidebar .ladder::-moz-range-thumb{ width: 26px; height: 26px; background: var(--cd-swirl); box-shadow: 0 0 0 2px var(--cd-berry); }
.game[data-game="slot-candy"] .sidebar .ladder-ticks i.on{ background: var(--cd-yellow); }

/* chips and options: glossy pink jelly pills; the chosen one is a yellow-orange jelly */
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) :is(.chip, .auto-opt span){
  color: #fff;
  font-weight: 800;
  border: 2px solid var(--cd-berry);
  border-radius: 999px;
  background: var(--cd-gloss), linear-gradient(180deg, var(--cd-pink-light), var(--cd-pink) 55%, var(--cd-magenta));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 -2px 4px rgba(90, 10, 58, 0.35), 0 3px 0 var(--cd-berry), 0 4px 8px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 0 var(--cd-berry);
}
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) :is(.chip:hover:not(:disabled), .auto-opt:hover span){
  color: #fff;
  border-color: var(--cd-berry);
  filter: brightness(1.1);
}
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) :is(.chip.active, .auto-opt.on span){
  color: var(--cd-berry);
  border-color: var(--cd-berry);
  background: var(--cd-gloss), var(--cd-jelly);
  box-shadow: inset 0 -2px 4px rgba(150, 70, 0, 0.35), 0 3px 0 var(--cd-berry), 0 0 12px rgba(255, 200, 58, 0.55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .chip:disabled{ filter: grayscale(0.6); opacity: 0.5; }
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .auto-seg-btn{ color: var(--muted); border-radius: 999px; }
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .auto-seg-btn.on{
  color: var(--cd-berry);
  background: var(--cd-gloss), var(--cd-jelly);
  box-shadow: 0 0 10px rgba(255, 200, 58, 0.5);
}

/* switches: a berry groove with a lollipop that slides onto the yellow */
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .sw{
  border: 2px solid var(--cd-berry);
  background: var(--cd-berry-deep);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .sw i{ top: 2px; background: var(--cd-swirl); }
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .sw:has(input:checked){
  border-color: var(--cd-gold-dark);
  background: linear-gradient(180deg, #fff6b0, var(--cd-gold));
}
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .sw input:checked ~ i{ background: var(--cd-swirl); }
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .auto-amt input{
  border: 2px solid var(--cd-berry);
  background: var(--cd-berry-deep);
  color: var(--cd-yellow);
}
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .auto-cond{ border-top: 2px dashed rgba(255, 255, 255, 0.35); }
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) :is(.auto-cond-row, .auto-field-label, .auto-sum, .auto-note){ color: #ffe0f2; }
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .bar{ background: var(--cd-berry-deep); }
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .bar i{ background: var(--cd-cane); }

/* big candy buttons: the autoplay start and Buy bonus are pink striped pill signs in a gold rim, like SPIN */
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) :is(.auto-start, .sweet-buy){
  color: var(--cd-yellow);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 3px solid var(--cd-gold);
  border-radius: 999px;
  background: var(--cd-sign);
  box-shadow: inset 0 0 0 2px var(--cd-gold-dark), 0 0 0 2px var(--cd-berry), 0 4px 0 var(--cd-berry), 0 8px 16px rgba(0, 0, 0, 0.4);
  text-shadow: 0 2px 0 var(--cd-berry), 0 0 8px rgba(255, 157, 31, 0.6);
}
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) :is(.auto-start, .sweet-buy)::before,
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) :is(.auto-start, .sweet-buy)::after{ display: none; }
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) :is(.auto-start, .sweet-buy):hover:not(:disabled){ filter: brightness(1.12); color: #fff6b0; }
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .sweet-buy:disabled{ filter: grayscale(0.6); opacity: 0.55; }
/* the ante: a gold tick box, the extra stake under it in yellow */
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .sweet-ante{ color: #fff; font-weight: 700; text-shadow: 0 1px 0 var(--cd-berry); }
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .sweet-ante input{ width: 22px; height: 22px; accent-color: var(--cd-gold); }
:is(.game[data-game="slot-candy"] .sidebar, .game[data-game="slot-candy"] > .sweet-modes, .mobile-dock[data-game="slot-candy"]) .sweet-stake{ color: var(--cd-yellow); font-weight: 700; }

/* the SPIN sign stands in a pink candy glow */
.game[data-game="slot-candy"] .sidebar .spin-block{
  padding: 6px 0 2px;
  background: radial-gradient(60% 55% at 50% 40%, rgba(255, 63, 164, 0.35), transparent 70%);
}

/* history: wins are yellow jelly, losses berry */
.game[data-game="slot-candy"] .hist-pill{
  border: 1px solid var(--cd-berry);
  background: var(--cd-berry-deep);
  color: #ff9ccf;
}
.game[data-game="slot-candy"] .hist-pill.win{
  color: var(--cd-berry);
  background: var(--cd-jelly);
}

/* payouts, history and rules at the foot of the page */
.game[data-game="slot-candy"] .game-info{ gap: 24px; margin-top: 34px; }
.game[data-game="slot-candy"] .game-info > details{ padding-top: 16px; }
.game[data-game="slot-candy"] .game-info > details::before{ left: 40px; right: 40px; }
.game[data-game="slot-candy"] .game-info > details::after{ left: 14px; right: 14px; }
/* each heading is a small SPIN-like pill sign */
.game[data-game="slot-candy"] .game-info summary{
  width: max-content;
  margin: 0 auto;
  padding: 9px 28px;
  border: 3px solid var(--cd-gold);
  border-radius: 999px;
  color: var(--cd-yellow);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  background: var(--cd-sign);
  box-shadow: inset 0 0 0 2px var(--cd-gold-dark), 0 0 0 2px var(--cd-berry), 0 4px 0 var(--cd-berry), 0 8px 14px rgba(0, 0, 0, 0.35);
  text-shadow: 0 2px 0 var(--cd-berry);
  transition: filter 0.15s ease;
}
.game[data-game="slot-candy"] .game-info summary:hover{ filter: brightness(1.12); color: #fff6b0; }
.game[data-game="slot-candy"] .game-info details[open] > summary{ margin-bottom: 8px; }
.game[data-game="slot-candy"] .rules-body{
  padding: 4px 26px 6px;
  color: var(--cd-cream);
  font-size: 14px;
  text-shadow: 0 1px 1px rgba(90, 10, 58, 0.7);
}
.game[data-game="slot-candy"] .rules-list{ list-style: none; padding-left: 4px; }
.game[data-game="slot-candy"] .rules-list li{ position: relative; padding-left: 26px; }
.game[data-game="slot-candy"] .rules-list li::before{
  content: '';
  position: absolute;
  left: 0; top: 0.2em;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--cd-swirl);
  box-shadow: 0 0 0 2px var(--cd-berry);
}
.game[data-game="slot-candy"] .paytable{ gap: 14px; padding: 6px 18px 4px; }
.game[data-game="slot-candy"] .paytable-card{
  min-width: 112px;
  padding: 10px 12px 12px;
  border: 2px solid var(--cd-gold);
  border-radius: 16px;
  background: radial-gradient(100% 70% at 50% 0%, rgba(255, 140, 203, 0.25), transparent 70%), linear-gradient(180deg, var(--cd-berry-deep), var(--cd-berry));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--cd-berry);
}
.game[data-game="slot-candy"] .paytable-card:hover{ box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--cd-berry), 0 0 16px rgba(255, 200, 58, 0.55); }
.game[data-game="slot-candy"] .paytable-icon{ width: 60px; height: 60px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5)); }
.game[data-game="slot-candy"] .paytable-amt{ color: #ffd0ea; }
.game[data-game="slot-candy"] .paytable-amt b{ color: var(--cd-yellow); font-weight: 800; text-shadow: 0 1px 0 var(--cd-berry-deep); }
.game[data-game="slot-candy"] :is(.paytable-rule, .paytable-note){ color: var(--cd-cream); }
.game[data-game="slot-candy"] .paytable-rule{ width: 100%; text-shadow: 0 1px 1px rgba(90, 10, 58, 0.7); }
.game[data-game="slot-candy"] .paytable-rule b{ color: var(--cd-yellow); }

/* the mobile dock (≤1080px): a striped candy box with a candy-cane ribbon, SPIN as a pink pill sign */
.mobile-dock[data-game="slot-candy"]{
  border-top: 4px solid var(--cd-gold);
  background:
    var(--cd-gloss),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 14px, rgba(0, 0, 0, 0.05) 14px 28px),
    linear-gradient(180deg, var(--cd-pink), var(--cd-magenta) 60%, #8a1456);
  box-shadow: inset 0 2px 0 var(--cd-gold-dark), 0 0 0 2px var(--cd-berry), 0 -14px 34px rgba(0, 0, 0, 0.5);
  padding-top: 16px;
}
.mobile-dock[data-game="slot-candy"]::before{
  content: '';
  position: absolute;
  left: 24px; right: 24px; top: -9px;
  height: 12px;
  border-radius: 999px;
  pointer-events: none;
  background: var(--cd-gloss), var(--cd-cane);
  box-shadow: 0 0 0 2px var(--cd-berry), 0 2px 4px rgba(0, 0, 0, 0.4);
}
.mobile-dock[data-game="slot-candy"] .spin-block{ padding: 0; background: none; }
.mobile-dock[data-game="slot-candy"] .spin-img-btn{
  color: var(--cd-yellow);
  border: 3px solid var(--cd-gold);
  border-radius: 999px;
  font-size: 21px;
  letter-spacing: 0.12em;
  background: var(--cd-sign) !important;
  box-shadow: inset 0 0 0 2px var(--cd-gold-dark), 0 0 0 2px var(--cd-berry), 0 4px 0 var(--cd-berry), 0 8px 16px rgba(0, 0, 0, 0.4);
  text-shadow: 0 2px 0 var(--cd-berry), 0 0 10px rgba(255, 157, 31, 0.7);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mobile-dock[data-game="slot-candy"] .spin-img-btn:hover:not(:disabled),
.mobile-dock[data-game="slot-candy"] .spin-img-btn:active:not(:disabled){
  color: #fff6b0;
  background: var(--cd-gloss), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0 12px, transparent 12px 24px), linear-gradient(180deg, var(--cd-pink-light), var(--cd-pink)) !important;
}
.mobile-dock[data-game="slot-candy"] .spin-img-btn:active:not(:disabled){ transform: translateY(2px); }
.mobile-dock[data-game="slot-candy"] .spin-img-btn:disabled{
  color: #ffc4e6;
  background: linear-gradient(180deg, var(--cd-magenta), #8a1456) !important;
  filter: saturate(0.6);
}

/* the page plate around the game: purple candy glass instead of the site's near-black, so the
   candyland backdrop glows through at the edges */
.view:has(> .game[data-game="slot-candy"]){
  background: linear-gradient(180deg, rgba(58, 12, 92, 0.86), rgba(34, 6, 56, 0.92));
  border-color: rgba(255, 200, 58, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 63, 164, 0.25), 0 26px 70px rgba(0, 0, 0, 0.55);
}
.game[data-game="slot-candy"] .game-crumb,
.game[data-game="slot-candy"] .game-crumb a{ color: #ffc4e6; }
.game[data-game="slot-candy"] .game-crumb .cur{ color: var(--cd-yellow); font-weight: 700; }

/* ── 1001 Genie Fortunes: a palace at night — turquoise enamel in carved gold settings, rubies, an
   onion-arch crest over every panel, lantern-amber glow and the genie's turquoise smoke. Deck controls
   and their dock twins share one rule each through :is(). ── */
.game[data-game="slot-genie"],
.mobile-dock[data-game="slot-genie"]{
  --gn-teal: #12817f;
  --gn-teal-light: #3fc4bd;
  --gn-teal-dark: #0a4f55;
  --gn-night: #062a33;
  --gn-night-deep: #041b22;
  --gn-gold: #e8b84a;
  --gn-gold-light: #ffe7a0;
  --gn-gold-dark: #9a6a14;
  --gn-ruby: #e0304a;
  --gn-cream: #fff1d2;
  --gn-amber: #ffb347;
  --gn-gilt: linear-gradient(180deg, #fff0b8, #e8b84a 45%, #b07a1c);
  --gn-enamel: radial-gradient(120% 90% at 50% 0%, #1a9a95, #0e6b6c 55%, #0a4f55);
  /* a quiet tile of eight-pointed stars, the arabesque under the enamel */
  --gn-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 8 L23 15 L30 12 L27 19 L34 22 L27 25 L30 32 L23 29 L20 36 L17 29 L10 32 L13 25 L6 22 L13 19 L10 12 L17 15 Z' fill='none' stroke='%23ffe7a0' stroke-opacity='.1' stroke-width='1'/%3E%3C/svg%3E");
  --gn-plaque: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%), radial-gradient(120% 120% at 50% 0%, #1a9a95, #0b5a5e);
}
.game[data-game="slot-genie"] .sidebar,
.game[data-game="slot-genie"] .game-info,
.mobile-dock[data-game="slot-genie"]{
  --text: #fff1d2;
  --muted: #a9dcd6;
  --border: rgba(232, 184, 74, 0.5);
  --accent: #e8b84a;
  --accent2: #ffe7a0;
  --panel: #0a4f55;
  --panel2: #12817f;
}

/* the page plate: midnight teal glass, the palace glowing through at the edges */
.view:has(> .game[data-game="slot-genie"]){
  background: linear-gradient(180deg, rgba(6, 42, 51, 0.86), rgba(4, 27, 34, 0.93));
  border-color: rgba(232, 184, 74, 0.4);
  box-shadow: 0 0 0 1px rgba(63, 196, 189, 0.25), 0 26px 70px rgba(0, 0, 0, 0.55);
}
.game[data-game="slot-genie"] .game-crumb,
.game[data-game="slot-genie"] .game-crumb a{ color: var(--muted); }
.game[data-game="slot-genie"] .game-crumb .cur{ color: var(--gn-gold-light); font-weight: 700; }

/* the field: a carved gold frame with a turquoise smoke glow */
.game[data-game="slot-genie"] .stage.board{
  border: 4px solid var(--gn-gold);
  border-radius: 18px;
  box-shadow: inset 0 0 0 2px var(--gn-gold-dark), inset 0 0 40px rgba(63, 196, 189, 0.22), 0 0 0 2px var(--gn-night-deep), 0 0 28px rgba(63, 196, 189, 0.35), 0 12px 30px rgba(0, 0, 0, 0.5);
}
@media (min-width: 1081px){
  .game[data-game="slot-genie"] .stage.board{
    background: radial-gradient(90% 70% at 50% 0%, rgba(255, 179, 71, 0.14), transparent 70%), var(--gn-stars) 0 0 / 40px 40px, rgba(6, 42, 51, 0.7);
  }
}

/* every panel — the deck's and the boards at the foot of the page — is turquoise enamel set in gold */
.game[data-game="slot-genie"] .sidebar .panel,
.game[data-game="slot-genie"] .game-info > details{
  position: relative;
  margin-top: 14px;
  padding-top: 24px;
  padding-bottom: 24px;
  border: 3px solid var(--gn-gold);
  border-radius: 16px;
  overflow: visible;
  background: var(--gn-stars) 0 0 / 40px 40px, var(--gn-enamel);
  box-shadow:
    inset 0 0 0 1px var(--gn-gold-light),
    inset 0 0 0 4px rgba(10, 79, 85, 0.9),
    inset 0 0 0 5px rgba(232, 184, 74, 0.5),
    inset 0 -12px 20px rgba(4, 27, 34, 0.45),
    0 0 0 2px var(--gn-night-deep),
    0 10px 24px rgba(0, 0, 0, 0.45),
    0 0 16px rgba(63, 196, 189, 0.22);
}
/* the crest: a gold onion arch with a ruby, set on the middle of the top rim, like on the SPIN plaque */
.game[data-game="slot-genie"] .sidebar .panel::before,
.game[data-game="slot-genie"] .game-info > details::before{
  content: '';
  position: absolute;
  left: 50%; top: -17px;
  width: 64px; height: 28px;
  transform: translateX(-50%);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 28'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0b8'/%3E%3Cstop offset='.5' stop-color='%23e8b84a'/%3E%3Cstop offset='1' stop-color='%239a6a14'/%3E%3C/linearGradient%3E%3CradialGradient id='r' cx='.38' cy='.32'%3E%3Cstop offset='0' stop-color='%23ffc2cb'/%3E%3Cstop offset='.45' stop-color='%23e0304a'/%3E%3Cstop offset='1' stop-color='%23700818'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M2 26 C14 26 18 20 24 14 C28 10 30 6 32 1 C34 6 36 10 40 14 C46 20 50 26 62 26 Z' fill='url(%23g)' stroke='%235a3a08' stroke-width='1.2'/%3E%3Ccircle cx='32' cy='17' r='5.5' fill='url(%23r)' stroke='%235a3a08' stroke-width='1'/%3E%3Ccircle cx='12' cy='23' r='1.6' fill='%23fff0b8'/%3E%3Ccircle cx='52' cy='23' r='1.6' fill='%23fff0b8'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}
/* rubies in gold settings in the bottom corners */
.game[data-game="slot-genie"] .sidebar .panel::after,
.game[data-game="slot-genie"] .game-info > details::after{
  content: '';
  position: absolute;
  left: 9px; right: 9px; bottom: 7px;
  height: 14px;
  pointer-events: none;
  --gn-gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cdefs%3E%3CradialGradient id='r' cx='.38' cy='.32'%3E%3Cstop offset='0' stop-color='%23ffc2cb'/%3E%3Cstop offset='.45' stop-color='%23e0304a'/%3E%3Cstop offset='1' stop-color='%23700818'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M7 0 L9 3 L13 3 L11 7 L13 11 L9 11 L7 14 L5 11 L1 11 L3 7 L1 3 L5 3 Z' fill='%23e8b84a' stroke='%235a3a08' stroke-width='.7'/%3E%3Ccircle cx='7' cy='7' r='3.3' fill='url(%23r)'/%3E%3C/svg%3E");
  background: var(--gn-gem) left center / 14px 14px no-repeat, var(--gn-gem) right center / 14px 14px no-repeat;
}
/* headings: gilded lettering with a dark teal outline */
.game[data-game="slot-genie"] .sidebar .panel h4,
.game[data-game="slot-genie"] .rules-h{
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gn-gold-light);
  text-shadow: 0 2px 0 var(--gn-night-deep), 1px 0 0 var(--gn-night-deep), -1px 0 0 var(--gn-night-deep), 0 0 10px rgba(255, 179, 71, 0.45);
}

/* inset night: the stake plaque, the segment trays, the run box */
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) :is(.stake-value, .auto-seg, .auto-run){
  border: 2px solid var(--gn-gold-dark);
  background: linear-gradient(180deg, var(--gn-night-deep), var(--gn-night));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(232, 184, 74, 0.35);
}
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .stake-num{
  color: var(--gn-gold-light);
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(255, 179, 71, 0.45);
}
/* − and +: gold medallions */
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .step-btn{
  border: 2px solid var(--gn-gold-dark);
  border-radius: 50%;
  aspect-ratio: 1;
  height: auto;
  color: var(--gn-night-deep);
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background: radial-gradient(circle at 35% 28%, #fff6cf 0%, #f2c862 35%, #c48d26 75%, #8a5c0e 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 240, 184, 0.35), 0 3px 0 var(--gn-night-deep), 0 5px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .step-btn:hover:not(:disabled){ filter: brightness(1.1); border-color: var(--gn-gold-dark); }
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .step-btn:active:not(:disabled){
  transform: translateY(2px);
  box-shadow: inset 0 0 0 3px rgba(255, 240, 184, 0.35), 0 1px 0 var(--gn-night-deep), 0 2px 5px rgba(0, 0, 0, 0.45);
}
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .step-btn:disabled{ filter: grayscale(0.7) brightness(0.75); opacity: 0.6; }

/* the stake slider: a gold rail, turquoise smoke where it has filled, a ruby in a gold setting for the thumb */
.game[data-game="slot-genie"] .sidebar .ladder::-webkit-slider-runnable-track{
  height: 8px;
  background: linear-gradient(90deg, var(--gn-teal-light) var(--fill, 0%), var(--gn-night-deep) var(--fill, 0%));
  box-shadow: 0 0 0 2px var(--gn-gold-dark), inset 0 2px 3px rgba(0, 0, 0, 0.45);
}
.game[data-game="slot-genie"] .sidebar .ladder::-webkit-slider-thumb{
  width: 24px; height: 24px; margin-top: -8px;
  background: radial-gradient(circle at 38% 32%, #ffc2cb, var(--gn-ruby) 40%, #700818 62%, var(--gn-gold) 64%, #fff0b8 80%, #9a6a14 100%);
  box-shadow: 0 0 0 1px #5a3a08, 0 3px 6px rgba(0, 0, 0, 0.5);
}
.game[data-game="slot-genie"] .sidebar .ladder::-moz-range-track{ height: 8px; background: var(--gn-night-deep); }
.game[data-game="slot-genie"] .sidebar .ladder::-moz-range-progress{ height: 8px; background: var(--gn-teal-light); }
.game[data-game="slot-genie"] .sidebar .ladder::-moz-range-thumb{
  width: 24px; height: 24px;
  background: radial-gradient(circle at 38% 32%, #ffc2cb, var(--gn-ruby) 40%, #700818 62%, var(--gn-gold) 64%, #fff0b8 80%, #9a6a14 100%);
  box-shadow: 0 0 0 1px #5a3a08;
}
.game[data-game="slot-genie"] .sidebar .ladder-ticks i.on{ background: var(--gn-gold); }

/* chips and options: little enamel plaques in gold; the chosen one is solid gold */
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) :is(.chip, .auto-opt span){
  color: var(--gn-cream);
  font-weight: 800;
  border: 2px solid var(--gn-gold);
  border-radius: 10px;
  background: var(--gn-plaque);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 184, 0.25), 0 3px 0 var(--gn-night-deep), 0 4px 8px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 0 var(--gn-night-deep);
}
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) :is(.chip:hover:not(:disabled), .auto-opt:hover span){
  color: #fff;
  border-color: var(--gn-gold-light);
  filter: brightness(1.12);
}
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) :is(.chip.active, .auto-opt.on span){
  color: var(--gn-night-deep);
  border-color: var(--gn-gold-dark);
  background: var(--gn-gilt);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 3px 0 var(--gn-night-deep), 0 0 12px rgba(255, 179, 71, 0.55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .chip:disabled{ filter: grayscale(0.6); opacity: 0.5; }
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .auto-seg-btn{ color: var(--muted); }
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .auto-seg-btn.on{
  color: var(--gn-night-deep);
  background: var(--gn-gilt);
  box-shadow: 0 0 10px rgba(255, 179, 71, 0.5);
}

/* switches: a night groove, a ruby that slides onto turquoise */
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .sw{
  border: 2px solid var(--gn-gold-dark);
  background: var(--gn-night-deep);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .sw i{ top: 2px; background: radial-gradient(circle at 38% 32%, #ffc2cb, var(--gn-ruby) 50%, #700818); }
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .sw:has(input:checked){
  border-color: var(--gn-gold);
  background: linear-gradient(180deg, var(--gn-teal-light), var(--gn-teal));
}
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .sw input:checked ~ i{ background: radial-gradient(circle at 38% 32%, #fff6cf, var(--gn-gold) 55%, #9a6a14); }
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .auto-amt input{
  border: 2px solid var(--gn-gold-dark);
  background: var(--gn-night-deep);
  color: var(--gn-gold-light);
}
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .auto-cond{ border-top: 1px solid rgba(232, 184, 74, 0.4); }
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) :is(.auto-cond-row, .auto-field-label, .auto-sum, .auto-note){ color: #c9ece7; }
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .bar{ background: var(--gn-night-deep); }
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .bar i{ background: var(--gn-gilt); }

/* the autoplay start: an enamel plaque in a gold frame, like SPIN */
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .auto-start{
  color: var(--gn-gold-light);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 3px solid var(--gn-gold);
  border-radius: 14px;
  background: var(--gn-plaque);
  box-shadow: inset 0 0 0 1px var(--gn-gold-light), inset 0 0 0 3px rgba(10, 79, 85, 0.9), 0 0 0 2px var(--gn-night-deep), 0 4px 0 var(--gn-night-deep), 0 8px 16px rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 0 var(--gn-night-deep), 0 0 8px rgba(255, 179, 71, 0.5);
}
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .auto-start::before,
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .auto-start::after{ display: none; }
:is(.game[data-game="slot-genie"] .sidebar, .mobile-dock[data-game="slot-genie"]) .auto-start:hover:not(:disabled){ filter: brightness(1.12); color: #fff; }

/* the SPIN plaque hangs in a lantern-amber glow */
.game[data-game="slot-genie"] .sidebar .spin-block{
  padding: 6px 0 2px;
  background: radial-gradient(60% 55% at 50% 40%, rgba(255, 179, 71, 0.3), transparent 70%);
}

/* history: wins in gold, losses in night teal */
.game[data-game="slot-genie"] .hist-pill{
  border: 1px solid var(--gn-gold-dark);
  background: var(--gn-night-deep);
  color: #7fbdb6;
}
.game[data-game="slot-genie"] .hist-pill.win{
  color: var(--gn-night-deep);
  background: var(--gn-gilt);
}

/* payouts, history and rules at the foot of the page */
.game[data-game="slot-genie"] .game-info{ gap: 28px; margin-top: 38px; }
.game[data-game="slot-genie"] .game-info > details{ padding-top: 18px; }
.game[data-game="slot-genie"] .game-info > details::after{ left: 14px; right: 14px; }
/* each heading is a small enamel plaque in gold */
.game[data-game="slot-genie"] .game-info summary{
  width: max-content;
  margin: 0 auto;
  padding: 9px 28px;
  border: 3px solid var(--gn-gold);
  border-radius: 14px;
  color: var(--gn-gold-light);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.16em;
  background: var(--gn-plaque);
  box-shadow: inset 0 0 0 1px var(--gn-gold-light), inset 0 0 0 3px rgba(10, 79, 85, 0.9), 0 0 0 2px var(--gn-night-deep), 0 4px 0 var(--gn-night-deep), 0 8px 14px rgba(0, 0, 0, 0.4);
  text-shadow: 0 2px 0 var(--gn-night-deep);
  transition: filter 0.15s ease;
}
.game[data-game="slot-genie"] .game-info summary:hover{ filter: brightness(1.12); color: #fff; }
.game[data-game="slot-genie"] .game-info summary::after{ color: var(--gn-gold); }
.game[data-game="slot-genie"] .game-info details[open] > summary{ margin-bottom: 8px; }
.game[data-game="slot-genie"] .rules-body{
  padding: 4px 26px 6px;
  color: var(--gn-cream);
  font-size: 14px;
  text-shadow: 0 1px 1px rgba(4, 27, 34, 0.7);
}
.game[data-game="slot-genie"] .rules-list{ list-style: none; padding-left: 4px; }
.game[data-game="slot-genie"] .rules-list li{ position: relative; padding-left: 26px; }
.game[data-game="slot-genie"] .rules-list li::before{
  content: '';
  position: absolute;
  left: 0; top: 0.25em;
  width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2 L24 13 L35 9 L30 19 L38 24 L27 26 L28 38 L20 30 L12 38 L13 26 L2 24 L10 19 L5 9 L16 13 Z' fill='%23e8b84a' stroke='%235a3a08' stroke-width='2'/%3E%3Ccircle cx='20' cy='21' r='5' fill='%23e0304a'/%3E%3C/svg%3E") center / contain no-repeat;
}
.game[data-game="slot-genie"] .paytable{ gap: 14px; padding: 6px 18px 4px; }
.game[data-game="slot-genie"] .paytable-card{
  min-width: 112px;
  padding: 10px 12px 12px;
  border: 2px solid var(--gn-gold);
  border-radius: 14px;
  background: radial-gradient(100% 70% at 50% 0%, rgba(255, 179, 71, 0.16), transparent 70%), linear-gradient(180deg, var(--gn-night-deep), var(--gn-night));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--gn-night-deep);
}
.game[data-game="slot-genie"] .paytable-card:hover{ box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--gn-night-deep), 0 0 16px rgba(63, 196, 189, 0.5); }
.game[data-game="slot-genie"] .paytable-icon{ width: 60px; height: 60px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5)); }
.game[data-game="slot-genie"] .paytable-amt{ color: #a9dcd6; }
.game[data-game="slot-genie"] .paytable-amt b{ color: var(--gn-gold-light); font-weight: 800; text-shadow: 0 1px 0 #000; }
.game[data-game="slot-genie"] :is(.paytable-rule, .paytable-note){ color: var(--gn-cream); }
.game[data-game="slot-genie"] .paytable-rule{ width: 100%; }
.game[data-game="slot-genie"] .paytable-rule b{ color: var(--gn-gold-light); }

/* the wish bonus on the board: the three lamps stand on enamel plaques in gold */
.game[data-game="slot-genie"] .lamp-btn{
  border: 3px solid var(--gn-gold);
  border-radius: 16px;
  background: radial-gradient(90% 70% at 50% 20%, rgba(255, 179, 71, 0.3), transparent 70%), var(--gn-enamel);
  box-shadow: inset 0 0 0 1px var(--gn-gold-light), 0 0 0 2px var(--gn-night-deep), 0 8px 18px rgba(0, 0, 0, 0.5);
  color: var(--gn-gold-light);
}
.game[data-game="slot-genie"] .lamp-btn:hover:not(:disabled){ box-shadow: inset 0 0 0 1px var(--gn-gold-light), 0 0 0 2px var(--gn-night-deep), 0 0 24px rgba(63, 196, 189, 0.6); }
.game[data-game="slot-genie"] .lamp-btn.chosen{ border-color: var(--gn-gold-light); box-shadow: 0 0 0 2px var(--gn-night-deep), 0 0 28px rgba(255, 179, 71, 0.75); }

/* the mobile dock (≤1080px): turquoise enamel in gold with the arch crest, SPIN as the enamel plaque */
.mobile-dock[data-game="slot-genie"]{
  border-top: 3px solid var(--gn-gold);
  background: var(--gn-stars) 0 0 / 40px 40px, linear-gradient(180deg, #12817f, var(--gn-teal-dark) 60%, var(--gn-night));
  box-shadow: inset 0 1px 0 var(--gn-gold-light), inset 0 4px 0 rgba(10, 79, 85, 0.9), 0 0 0 2px var(--gn-night-deep), 0 -14px 34px rgba(0, 0, 0, 0.5);
  padding-top: 18px;
}
.mobile-dock[data-game="slot-genie"]::before{
  content: '';
  position: absolute;
  left: 50%; top: -18px;
  width: 72px; height: 30px;
  transform: translateX(-50%);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 28'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0b8'/%3E%3Cstop offset='.5' stop-color='%23e8b84a'/%3E%3Cstop offset='1' stop-color='%239a6a14'/%3E%3C/linearGradient%3E%3CradialGradient id='r' cx='.38' cy='.32'%3E%3Cstop offset='0' stop-color='%23ffc2cb'/%3E%3Cstop offset='.45' stop-color='%23e0304a'/%3E%3Cstop offset='1' stop-color='%23700818'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M2 26 C14 26 18 20 24 14 C28 10 30 6 32 1 C34 6 36 10 40 14 C46 20 50 26 62 26 Z' fill='url(%23g)' stroke='%235a3a08' stroke-width='1.2'/%3E%3Ccircle cx='32' cy='17' r='5.5' fill='url(%23r)' stroke='%235a3a08' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}
.mobile-dock[data-game="slot-genie"] .spin-block{ padding: 0; background: none; }
.mobile-dock[data-game="slot-genie"] .spin-img-btn{
  color: var(--gn-gold-light);
  border: 3px solid var(--gn-gold);
  border-radius: 16px;
  font-size: 21px;
  letter-spacing: 0.14em;
  background: var(--gn-plaque) !important;
  box-shadow: inset 0 0 0 1px var(--gn-gold-light), inset 0 0 0 3px rgba(10, 79, 85, 0.9), 0 0 0 2px var(--gn-night-deep), 0 4px 0 var(--gn-night-deep), 0 8px 16px rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 0 var(--gn-night-deep), 0 0 10px rgba(255, 179, 71, 0.6);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mobile-dock[data-game="slot-genie"] .spin-img-btn:hover:not(:disabled),
.mobile-dock[data-game="slot-genie"] .spin-img-btn:active:not(:disabled){
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%), radial-gradient(120% 120% at 50% 0%, #26b3ab, #0e6b6c) !important;
}
.mobile-dock[data-game="slot-genie"] .spin-img-btn:active:not(:disabled){ transform: translateY(2px); }
.mobile-dock[data-game="slot-genie"] .spin-img-btn:disabled{
  color: #7fbdb6;
  background: linear-gradient(180deg, var(--gn-teal-dark), var(--gn-night)) !important;
  filter: saturate(0.6);
}

/* ── Gonzo's Quest: a retro travel-poster temple — terracotta tablets in a frame of golden sandstone,
   jade inlays with a step-fret at each end, sun-wheel medallions, cream lettering like the logo's,
   the warm sunset of the backdrop. Deck controls and their dock twins share one rule through :is(). ── */
.game[data-game="slot-gonzo"],
.mobile-dock[data-game="slot-gonzo"]{
  --gz-rust: #c4532a;
  --gz-rust-dark: #8a3418;
  --gz-clay: #5a2410;
  --gz-clay-deep: #3a1608;
  --gz-cream: #f6e6c4;
  --gz-sand: #e8b04a;
  --gz-sand-light: #f7d98a;
  --gz-sand-dark: #a8701e;
  --gz-jade: #3f8a4a;
  --gz-jade-light: #6fbf6a;
  --gz-jade-dark: #22582a;
  --gz-sun: #f2a63a;
  /* stone grain: fine speckle and a few chisel strokes */
  --gz-grain: repeating-linear-gradient(115deg, rgba(255, 230, 190, 0.05) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(25deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 13px);
  --gz-sandstone: var(--gz-grain), linear-gradient(180deg, #f7d98a, #e8b04a 50%, #c48a2a);
  --gz-tablet: var(--gz-grain), radial-gradient(120% 90% at 50% 0%, #d2643a, #b0461f 55%, #8a3418);
  --gz-sunwheel: radial-gradient(circle, #f7d98a 0 26%, #a8701e 27% 31%, #e8b04a 32% 52%, transparent 53%),
    repeating-conic-gradient(#e8b04a 0 12deg, #a8701e 12deg 18deg);
}
.game[data-game="slot-gonzo"] .sidebar,
.game[data-game="slot-gonzo"] .game-info,
.mobile-dock[data-game="slot-gonzo"]{
  --text: #f6e6c4;
  --muted: #f0c9a0;
  --border: rgba(232, 176, 74, 0.5);
  --accent: #f7d98a;
  --accent2: #6fbf6a;
  --panel: #8a3418;
  --panel2: #b0461f;
}

/* the page plate: warm dusk brown glass over the jungle */
.view:has(> .game[data-game="slot-gonzo"]){
  background: linear-gradient(180deg, rgba(58, 26, 10, 0.86), rgba(34, 15, 6, 0.93));
  border-color: rgba(232, 176, 74, 0.4);
  box-shadow: 0 0 0 1px rgba(242, 166, 58, 0.22), 0 26px 70px rgba(0, 0, 0, 0.55);
}
.game[data-game="slot-gonzo"] .game-crumb,
.game[data-game="slot-gonzo"] .game-crumb a{ color: var(--muted); }
.game[data-game="slot-gonzo"] .game-crumb .cur{ color: var(--gz-sand-light); font-weight: 700; }

/* the field: a thick sandstone frame with a sunset glow */
.game[data-game="slot-gonzo"] .stage.board{
  border: 5px solid var(--gz-sand);
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px var(--gz-sand-dark), inset 0 0 40px rgba(242, 166, 58, 0.2), 0 0 0 2px var(--gz-clay-deep), 0 0 26px rgba(242, 166, 58, 0.3), 0 12px 30px rgba(0, 0, 0, 0.5);
}
@media (min-width: 1081px){
  .game[data-game="slot-gonzo"] .stage.board{
    background: radial-gradient(90% 70% at 50% 0%, rgba(242, 166, 58, 0.16), transparent 70%), var(--gz-grain), rgba(40, 16, 6, 0.75);
  }
}

/* every panel is a terracotta tablet in a sandstone frame */
.game[data-game="slot-gonzo"] .sidebar .panel,
.game[data-game="slot-gonzo"] .game-info > details{
  position: relative;
  margin-top: 10px;
  padding-top: 24px;
  padding-bottom: 26px;
  border: 5px solid var(--gz-sand);
  border-radius: 12px;
  overflow: visible;
  background: var(--gz-tablet);
  box-shadow:
    inset 0 0 0 2px var(--gz-sand-dark),
    inset 0 0 0 4px rgba(90, 36, 16, 0.6),
    inset 0 -12px 20px rgba(58, 22, 8, 0.4),
    0 0 0 2px var(--gz-clay-deep),
    0 10px 24px rgba(0, 0, 0, 0.45),
    0 0 16px rgba(242, 166, 58, 0.18);
}
/* a jade inlay on the middle of the top rim, a step-fret at each end — the bar from the SPIN sign */
.game[data-game="slot-gonzo"] .sidebar .panel::before,
.game[data-game="slot-gonzo"] .game-info > details::before{
  content: '';
  position: absolute;
  left: 50%; top: -9px;
  width: 140px; height: 14px;
  transform: translateX(-50%);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 14'%3E%3Cpath d='M0 1 H22 V7 H16 V13 H0 Z M140 1 H118 V7 H124 V13 H140 Z' fill='%23e8b04a' stroke='%23a8701e' stroke-width='1.2'/%3E%3Crect x='24' y='2' width='92' height='10' rx='1.5' fill='%233f8a4a' stroke='%23a8701e' stroke-width='1.6'/%3E%3Crect x='27' y='4' width='86' height='2' fill='%236fbf6a' opacity='.7'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.45));
}
/* sun-wheel medallions in the bottom corners, like the ones on the SPIN sign */
.game[data-game="slot-gonzo"] .sidebar .panel::after,
.game[data-game="slot-gonzo"] .game-info > details::after{
  content: '';
  position: absolute;
  left: 8px; right: 8px; bottom: 6px;
  height: 16px;
  pointer-events: none;
  --gz-sunsvg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23e8b04a' stroke='%23a8701e' stroke-width='.6'%3E%3Cpath d='M8 0 L9 3 L7 3 Z M8 16 L7 13 L9 13 Z M0 8 L3 7 L3 9 Z M16 8 L13 9 L13 7 Z M2.3 2.3 L4.7 3.6 L3.6 4.7 Z M13.7 13.7 L11.3 12.4 L12.4 11.3 Z M13.7 2.3 L12.4 4.7 L11.3 3.6 Z M2.3 13.7 L3.6 11.3 L4.7 12.4 Z'/%3E%3Ccircle cx='8' cy='8' r='4.6'/%3E%3C/g%3E%3Ccircle cx='8' cy='8' r='2.2' fill='%23c4532a'/%3E%3C/svg%3E");
  background: var(--gz-sunsvg) left center / 16px 16px no-repeat, var(--gz-sunsvg) right center / 16px 16px no-repeat;
}
/* headings: cream lettering with a deep clay outline, like the logo */
.game[data-game="slot-gonzo"] .sidebar .panel h4,
.game[data-game="slot-gonzo"] .rules-h{
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gz-cream);
  text-shadow: 0 2px 0 var(--gz-clay-deep), 1px 0 0 var(--gz-clay-deep), -1px 0 0 var(--gz-clay-deep), 0 -1px 0 var(--gz-clay-deep);
}

/* inset clay: the stake plaque, the segment trays, the run box */
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) :is(.stake-value, .auto-seg, .auto-run){
  border: 2px solid var(--gz-sand-dark);
  background: var(--gz-grain), linear-gradient(180deg, var(--gz-clay-deep), var(--gz-clay));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 230, 190, 0.2);
}
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .stake-num{
  color: var(--gz-sand-light);
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(242, 166, 58, 0.45);
}
/* − and +: sun-wheel medallions */
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .step-btn{
  border: 2px solid var(--gz-sand-dark);
  border-radius: 50%;
  aspect-ratio: 1;
  height: auto;
  color: var(--gz-clay-deep);
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
  background: var(--gz-sunwheel);
  box-shadow: 0 3px 0 var(--gz-clay-deep), 0 5px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .step-btn:hover:not(:disabled){ filter: brightness(1.1); border-color: var(--gz-sand-dark); }
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .step-btn:active:not(:disabled){
  transform: translateY(2px) rotate(15deg);
  box-shadow: 0 1px 0 var(--gz-clay-deep), 0 2px 5px rgba(0, 0, 0, 0.45);
}
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .step-btn:disabled{ filter: grayscale(0.7) brightness(0.75); opacity: 0.6; }

/* the stake slider: a stone groove, jade where it has filled, a sun medallion for the thumb */
.game[data-game="slot-gonzo"] .sidebar .ladder::-webkit-slider-runnable-track{
  height: 8px;
  background: linear-gradient(90deg, var(--gz-jade-light) var(--fill, 0%), var(--gz-clay-deep) var(--fill, 0%));
  box-shadow: 0 0 0 2px var(--gz-sand-dark), inset 0 2px 3px rgba(0, 0, 0, 0.45);
}
.game[data-game="slot-gonzo"] .sidebar .ladder::-webkit-slider-thumb{
  width: 26px; height: 26px; margin-top: -9px;
  background: var(--gz-sunwheel);
  box-shadow: 0 0 0 1px var(--gz-clay-deep), 0 3px 6px rgba(0, 0, 0, 0.5);
}
.game[data-game="slot-gonzo"] .sidebar .ladder::-moz-range-track{ height: 8px; background: var(--gz-clay-deep); }
.game[data-game="slot-gonzo"] .sidebar .ladder::-moz-range-progress{ height: 8px; background: var(--gz-jade-light); }
.game[data-game="slot-gonzo"] .sidebar .ladder::-moz-range-thumb{ width: 26px; height: 26px; background: var(--gz-sunwheel); box-shadow: 0 0 0 1px var(--gz-clay-deep); }
.game[data-game="slot-gonzo"] .sidebar .ladder-ticks i.on{ background: var(--gz-jade-light); }

/* chips and options: sandstone blocks with carved clay letters; the chosen one is jade */
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) :is(.chip, .auto-opt span){
  color: var(--gz-clay-deep);
  font-weight: 800;
  border: 2px solid var(--gz-sand-dark);
  border-radius: 8px;
  background: var(--gz-sandstone);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.6), 0 3px 0 var(--gz-clay-deep), 0 4px 8px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
}
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) :is(.chip:hover:not(:disabled), .auto-opt:hover span){
  color: var(--gz-clay-deep);
  border-color: var(--gz-sand-dark);
  filter: brightness(1.08);
}
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) :is(.chip.active, .auto-opt.on span){
  color: var(--gz-cream);
  border-color: var(--gz-sand);
  background: var(--gz-grain), linear-gradient(180deg, var(--gz-jade-light), var(--gz-jade) 55%, var(--gz-jade-dark));
  box-shadow: inset 0 1px 0 rgba(220, 255, 210, 0.45), 0 3px 0 var(--gz-clay-deep), 0 0 12px rgba(111, 191, 106, 0.45);
  text-shadow: 0 1px 0 var(--gz-jade-dark);
}
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .chip:disabled{ filter: grayscale(0.7) brightness(0.8); opacity: 0.55; }
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .auto-seg-btn{ color: var(--muted); }
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .auto-seg-btn.on{
  color: var(--gz-cream);
  background: linear-gradient(180deg, var(--gz-jade-light), var(--gz-jade-dark));
  box-shadow: inset 0 0 0 1px var(--gz-sand), 0 0 10px rgba(111, 191, 106, 0.4);
}

/* switches: a clay groove, a sun medallion that rolls onto jade */
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .sw{
  border: 2px solid var(--gz-sand-dark);
  background: var(--gz-clay-deep);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .sw i{ top: 2px; background: var(--gz-sunwheel); }
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .sw:has(input:checked){
  border-color: var(--gz-sand);
  background: linear-gradient(180deg, var(--gz-jade-light), var(--gz-jade-dark));
}
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .sw input:checked ~ i{ background: var(--gz-sunwheel); transform: translateX(17px) rotate(90deg); }
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .auto-amt input{
  border: 2px solid var(--gz-sand-dark);
  background: var(--gz-clay-deep);
  color: var(--gz-sand-light);
}
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .auto-cond{ border-top: 2px dashed rgba(246, 230, 196, 0.3); }
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) :is(.auto-cond-row, .auto-field-label, .auto-sum, .auto-note){ color: #f8dcc0; }
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .bar{ background: var(--gz-clay-deep); }
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .bar i{ background: linear-gradient(90deg, var(--gz-jade-dark), var(--gz-jade-light)); }

/* the autoplay start: a terracotta sign in a sandstone frame, like SPIN */
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .auto-start{
  color: var(--gz-sand-light);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 4px solid var(--gz-sand);
  border-radius: 999px;
  background: var(--gz-tablet);
  box-shadow: inset 0 0 0 2px var(--gz-sand-dark), 0 0 0 2px var(--gz-clay-deep), 0 4px 0 var(--gz-clay-deep), 0 8px 16px rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 0 var(--gz-clay-deep);
}
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .auto-start::before,
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .auto-start::after{ display: none; }
:is(.game[data-game="slot-gonzo"] .sidebar, .mobile-dock[data-game="slot-gonzo"]) .auto-start:hover:not(:disabled){ filter: brightness(1.12); color: #fff3d6; }

/* the SPIN sign stands in the setting sun */
.game[data-game="slot-gonzo"] .sidebar .spin-block{
  padding: 6px 0 2px;
  background: radial-gradient(60% 55% at 50% 40%, rgba(242, 166, 58, 0.32), transparent 70%);
}

/* history: wins jade, losses clay */
.game[data-game="slot-gonzo"] .hist-pill{
  border: 1px solid var(--gz-sand-dark);
  background: var(--gz-clay-deep);
  color: #d99a78;
}
.game[data-game="slot-gonzo"] .hist-pill.win{
  color: var(--gz-cream);
  background: linear-gradient(180deg, var(--gz-jade-light), var(--gz-jade-dark));
}

/* payouts, history and rules at the foot of the page */
.game[data-game="slot-gonzo"] .game-info{ gap: 26px; margin-top: 36px; }
.game[data-game="slot-gonzo"] .game-info > details{ padding-top: 18px; }
.game[data-game="slot-gonzo"] .game-info > details::before{ width: 220px; }
.game[data-game="slot-gonzo"] .game-info > details::after{ left: 14px; right: 14px; }
/* each heading is a small terracotta sign in sandstone */
.game[data-game="slot-gonzo"] .game-info summary{
  width: max-content;
  margin: 0 auto;
  padding: 9px 28px;
  border: 4px solid var(--gz-sand);
  border-radius: 999px;
  color: var(--gz-sand-light);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.16em;
  background: var(--gz-tablet);
  box-shadow: inset 0 0 0 2px var(--gz-sand-dark), 0 0 0 2px var(--gz-clay-deep), 0 4px 0 var(--gz-clay-deep), 0 8px 14px rgba(0, 0, 0, 0.4);
  text-shadow: 0 2px 0 var(--gz-clay-deep);
  transition: filter 0.15s ease;
}
.game[data-game="slot-gonzo"] .game-info summary:hover{ filter: brightness(1.12); color: #fff3d6; }
.game[data-game="slot-gonzo"] .game-info summary::after{ color: var(--gz-jade-light); }
.game[data-game="slot-gonzo"] .game-info details[open] > summary{ margin-bottom: 8px; }
.game[data-game="slot-gonzo"] .rules-body{
  padding: 4px 26px 6px;
  color: var(--gz-cream);
  font-size: 14px;
  text-shadow: 0 1px 1px rgba(58, 22, 8, 0.7);
}
.game[data-game="slot-gonzo"] .rules-list{ list-style: none; padding-left: 4px; }
.game[data-game="slot-gonzo"] .rules-list li{ position: relative; padding-left: 26px; }
/* list markers: a little stepped pyramid */
.game[data-game="slot-gonzo"] .rules-list li::before{
  content: '';
  position: absolute;
  left: 0; top: 0.28em;
  width: 16px; height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 13'%3E%3Cpath d='M6 0 H10 V3 H12 V6 H14 V9 H16 V13 H0 V9 H2 V6 H4 V3 H6 Z' fill='%23e8b04a' stroke='%235a2410' stroke-width='1'/%3E%3Crect x='7' y='5' width='2' height='8' fill='%233f8a4a'/%3E%3C/svg%3E") center / contain no-repeat;
}
.game[data-game="slot-gonzo"] .paytable{ gap: 14px; padding: 6px 18px 4px; }
.game[data-game="slot-gonzo"] .paytable-card{
  min-width: 112px;
  padding: 10px 12px 12px;
  border: 3px solid var(--gz-sand);
  border-radius: 10px;
  background: radial-gradient(100% 70% at 50% 0%, rgba(242, 166, 58, 0.16), transparent 70%), var(--gz-grain), linear-gradient(180deg, var(--gz-clay-deep), var(--gz-clay));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--gz-clay-deep);
}
.game[data-game="slot-gonzo"] .paytable-card:hover{ box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--gz-clay-deep), 0 0 16px rgba(111, 191, 106, 0.5); }
.game[data-game="slot-gonzo"] .paytable-icon{ width: 60px; height: 60px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5)); }
.game[data-game="slot-gonzo"] .paytable-amt{ color: #f0c9a0; }
.game[data-game="slot-gonzo"] .paytable-amt b{ color: var(--gz-sand-light); font-weight: 800; text-shadow: 0 1px 0 #000; }
.game[data-game="slot-gonzo"] :is(.paytable-rule, .paytable-note){ color: var(--gz-cream); }
.game[data-game="slot-gonzo"] .paytable-rule{ width: 100%; }
.game[data-game="slot-gonzo"] .paytable-rule b{ color: var(--gz-sand-light); }

/* the mobile dock (≤1080px): a terracotta tablet with the jade inlay, SPIN as the sandstone-framed sign */
.mobile-dock[data-game="slot-gonzo"]{
  border-top: 5px solid var(--gz-sand);
  background: var(--gz-grain), linear-gradient(180deg, #c4532a, var(--gz-rust-dark) 60%, var(--gz-clay));
  box-shadow: inset 0 2px 0 var(--gz-sand-dark), 0 0 0 2px var(--gz-clay-deep), 0 -14px 34px rgba(0, 0, 0, 0.5);
  padding-top: 16px;
}
.mobile-dock[data-game="slot-gonzo"]::before{
  content: '';
  position: absolute;
  left: 50%; top: -10px;
  width: 180px; height: 14px;
  transform: translateX(-50%);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 14'%3E%3Cpath d='M0 1 H22 V7 H16 V13 H0 Z M140 1 H118 V7 H124 V13 H140 Z' fill='%23e8b04a' stroke='%23a8701e' stroke-width='1.2'/%3E%3Crect x='24' y='2' width='92' height='10' rx='1.5' fill='%233f8a4a' stroke='%23a8701e' stroke-width='1.6'/%3E%3Crect x='27' y='4' width='86' height='2' fill='%236fbf6a' opacity='.7'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.45));
}
.mobile-dock[data-game="slot-gonzo"] .spin-block{ padding: 0; background: none; }
.mobile-dock[data-game="slot-gonzo"] .spin-img-btn{
  color: var(--gz-sand-light);
  border: 4px solid var(--gz-sand);
  border-radius: 999px;
  font-size: 21px;
  letter-spacing: 0.14em;
  background: var(--gz-tablet) !important;
  box-shadow: inset 0 0 0 2px var(--gz-sand-dark), 0 0 0 2px var(--gz-clay-deep), 0 4px 0 var(--gz-clay-deep), 0 8px 16px rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 0 var(--gz-clay-deep), 0 0 10px rgba(242, 166, 58, 0.5);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mobile-dock[data-game="slot-gonzo"] .spin-img-btn:hover:not(:disabled),
.mobile-dock[data-game="slot-gonzo"] .spin-img-btn:active:not(:disabled){
  color: #fff3d6;
  background: var(--gz-grain), radial-gradient(120% 90% at 50% 0%, #e0764a, #c4532a 55%, #9a3c1a) !important;
}
.mobile-dock[data-game="slot-gonzo"] .spin-img-btn:active:not(:disabled){ transform: translateY(2px); }
.mobile-dock[data-game="slot-gonzo"] .spin-img-btn:disabled{
  color: #d99a78;
  background: var(--gz-grain), linear-gradient(180deg, var(--gz-clay), var(--gz-clay-deep)) !important;
  filter: saturate(0.6);
}

/* ── Joker Fruits: an old theatre and its jester — crimson velvet in antique-gold filigree, a red
   diamond gem crest, golden jester bells in the corners, ivory serif lettering, a harlequin strip here
   and there. Deck controls and their dock twins share one rule through :is(). ── */
.game[data-game="slot-joker"],
.mobile-dock[data-game="slot-joker"]{
  --jk-crimson: #a0141c;
  --jk-crimson-light: #d22a32;
  --jk-wine: #5a0a10;
  --jk-wine-deep: #2a0407;
  --jk-black: #140608;
  --jk-gold: #d9a441;
  --jk-gold-light: #f6dc95;
  --jk-gold-dark: #8a5e16;
  --jk-ivory: #f8ecd2;
  --jk-serif: Georgia, 'Times New Roman', serif;
  /* velvet: a soft vertical nap over a deep red */
  --jk-velvet: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 6px, rgba(0, 0, 0, 0.05) 6px 7px),
    radial-gradient(120% 90% at 50% 0%, #b81b24, #7a0d14 55%, #4a070c);
  --jk-goldleaf: linear-gradient(180deg, #fff1c0, #e2b04e 45%, #9a6a1c);
  --jk-harlequin: conic-gradient(from 45deg, #a0141c 0 25%, #140608 0 50%, #a0141c 0 75%, #140608 0) 0 0 / 14px 14px;
  --jk-bell: radial-gradient(circle at 36% 30%, #fff6cf 0%, #f2c862 22%, #c48d26 58%, #6a420a 100%);
}
.game[data-game="slot-joker"] .sidebar,
.game[data-game="slot-joker"] .game-info,
.mobile-dock[data-game="slot-joker"]{
  --text: #f8ecd2;
  --muted: #e4b9a6;
  --border: rgba(217, 164, 65, 0.5);
  --accent: #f6dc95;
  --accent2: #f6dc95;
  --panel: #5a0a10;
  --panel2: #a0141c;
}

/* the page plate: deep wine glass, the velvet curtains glowing through */
.view:has(> .game[data-game="slot-joker"]){
  background: linear-gradient(180deg, rgba(42, 4, 7, 0.86), rgba(20, 3, 5, 0.93));
  border-color: rgba(217, 164, 65, 0.4);
  box-shadow: 0 0 0 1px rgba(210, 42, 50, 0.22), 0 26px 70px rgba(0, 0, 0, 0.55);
}
.game[data-game="slot-joker"] .game-crumb,
.game[data-game="slot-joker"] .game-crumb a{ color: var(--muted); }
.game[data-game="slot-joker"] .game-crumb .cur{ color: var(--jk-gold-light); font-weight: 700; }

/* the field: an antique gold frame with a warm stage glow */
.game[data-game="slot-joker"] .stage.board{
  border: 4px solid var(--jk-gold);
  border-radius: 16px;
  box-shadow: inset 0 0 0 2px var(--jk-gold-dark), inset 0 0 40px rgba(210, 42, 50, 0.22), 0 0 0 2px var(--jk-black), 0 0 26px rgba(217, 164, 65, 0.28), 0 12px 30px rgba(0, 0, 0, 0.55);
}
@media (min-width: 1081px){
  .game[data-game="slot-joker"] .stage.board{
    background: radial-gradient(90% 70% at 50% 0%, rgba(246, 220, 149, 0.12), transparent 70%), var(--jk-velvet);
  }
}

/* every panel is crimson velvet in a double gold frame */
.game[data-game="slot-joker"] .sidebar .panel,
.game[data-game="slot-joker"] .game-info > details{
  position: relative;
  margin-top: 12px;
  padding-top: 24px;
  padding-bottom: 26px;
  border: 3px solid var(--jk-gold);
  border-radius: 14px;
  overflow: visible;
  background: var(--jk-velvet);
  box-shadow:
    inset 0 0 0 1px var(--jk-gold-light),
    inset 0 0 0 4px rgba(42, 4, 7, 0.85),
    inset 0 0 0 5px rgba(217, 164, 65, 0.55),
    inset 0 -12px 20px rgba(20, 3, 5, 0.45),
    0 0 0 2px var(--jk-black),
    0 10px 24px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(210, 42, 50, 0.2);
}
/* the crest: a red diamond in a gold setting with a scroll each side, as on the SPIN sign */
.game[data-game="slot-joker"] .sidebar .panel::before,
.game[data-game="slot-joker"] .game-info > details::before{
  content: '';
  position: absolute;
  left: 50%; top: -15px;
  width: 92px; height: 28px;
  transform: translateX(-50%);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 28'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1c0'/%3E%3Cstop offset='.5' stop-color='%23e2b04e'/%3E%3Cstop offset='1' stop-color='%239a6a1c'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff8a8a'/%3E%3Cstop offset='.45' stop-color='%23d22a32'/%3E%3Cstop offset='1' stop-color='%235a0a10'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M30 18 C22 10 12 12 8 18 C14 15 20 16 24 21 Z M62 18 C70 10 80 12 84 18 C78 15 72 16 68 21 Z' fill='url(%23g)' stroke='%235a3a08' stroke-width='1'/%3E%3Cpath d='M46 1 L60 14 L46 27 L32 14 Z' fill='url(%23g)' stroke='%235a3a08' stroke-width='1.2'/%3E%3Cpath d='M46 6 L55 14 L46 22 L37 14 Z' fill='url(%23r)'/%3E%3Cpath d='M46 6 L50 11 L46 14 Z' fill='%23fff' opacity='.5'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}
/* golden jester bells in the bottom corners */
.game[data-game="slot-joker"] .sidebar .panel::after,
.game[data-game="slot-joker"] .game-info > details::after{
  content: '';
  position: absolute;
  left: 8px; right: 8px; bottom: 6px;
  height: 16px;
  pointer-events: none;
  --jk-bellsvg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.36' cy='.3'%3E%3Cstop offset='0' stop-color='%23fff6cf'/%3E%3Cstop offset='.25' stop-color='%23f2c862'/%3E%3Cstop offset='.6' stop-color='%23c48d26'/%3E%3Cstop offset='1' stop-color='%236a420a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='8' cy='8' r='7' fill='url(%23b)' stroke='%235a3a08' stroke-width='.8'/%3E%3Cpath d='M4 9.5 H12' stroke='%233a2406' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.5' r='1.2' fill='%233a2406'/%3E%3C/svg%3E");
  background: var(--jk-bellsvg) left center / 16px 16px no-repeat, var(--jk-bellsvg) right center / 16px 16px no-repeat;
}
/* headings: ivory serif capitals with a gold glint, like the logo's lettering */
.game[data-game="slot-joker"] .sidebar .panel h4,
.game[data-game="slot-joker"] .rules-h{
  font-family: var(--jk-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--jk-ivory);
  text-shadow: 0 2px 0 var(--jk-black), 1px 0 0 var(--jk-gold-dark), -1px 0 0 var(--jk-gold-dark), 0 0 10px rgba(246, 220, 149, 0.35);
}

/* inset black lacquer: the stake plaque, the segment trays, the run box */
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) :is(.stake-value, .auto-seg, .auto-run){
  border: 2px solid var(--jk-gold-dark);
  background: linear-gradient(180deg, #0a0204, var(--jk-black));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(217, 164, 65, 0.3);
}
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .stake-num{
  font-family: var(--jk-serif);
  color: var(--jk-gold-light);
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(246, 220, 149, 0.4);
}
/* − and +: golden jester bells */
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .step-btn{
  border: 2px solid var(--jk-gold-dark);
  border-radius: 50%;
  aspect-ratio: 1;
  height: auto;
  color: var(--jk-wine-deep);
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
  background: var(--jk-bell);
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.3), 0 3px 0 var(--jk-black), 0 5px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .step-btn:hover:not(:disabled){ filter: brightness(1.1); border-color: var(--jk-gold-dark); }
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .step-btn:active:not(:disabled){
  transform: translateY(2px) rotate(-8deg);
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.3), 0 1px 0 var(--jk-black), 0 2px 5px rgba(0, 0, 0, 0.5);
}
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .step-btn:disabled{ filter: grayscale(0.7) brightness(0.7); opacity: 0.6; }

/* the stake slider: a harlequin strip, gold where it has filled, a bell for the thumb */
.game[data-game="slot-joker"] .sidebar .ladder::-webkit-slider-runnable-track{
  height: 10px;
  background: linear-gradient(90deg, rgba(226, 176, 78, 0.92) var(--fill, 0%), transparent var(--fill, 0%)), var(--jk-harlequin);
  box-shadow: 0 0 0 2px var(--jk-gold-dark), inset 0 2px 3px rgba(0, 0, 0, 0.45);
}
.game[data-game="slot-joker"] .sidebar .ladder::-webkit-slider-thumb{
  width: 24px; height: 24px; margin-top: -7px;
  background: var(--jk-bell);
  box-shadow: 0 0 0 1px var(--jk-black), 0 3px 6px rgba(0, 0, 0, 0.5);
}
.game[data-game="slot-joker"] .sidebar .ladder::-moz-range-track{ height: 10px; background: var(--jk-harlequin); }
.game[data-game="slot-joker"] .sidebar .ladder::-moz-range-progress{ height: 10px; background: var(--jk-gold); }
.game[data-game="slot-joker"] .sidebar .ladder::-moz-range-thumb{ width: 24px; height: 24px; background: var(--jk-bell); box-shadow: 0 0 0 1px var(--jk-black); }
.game[data-game="slot-joker"] .sidebar .ladder-ticks i.on{ background: var(--jk-gold); }

/* chips and options: black lacquer tiles in gold with ivory letters; the chosen one is crimson */
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) :is(.chip, .auto-opt span){
  color: var(--jk-ivory);
  font-family: var(--jk-serif);
  font-weight: 700;
  border: 2px solid var(--jk-gold);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, #2a0c10, var(--jk-black));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 0 0 1px rgba(246, 220, 149, 0.2), 0 3px 0 #000, 0 4px 8px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 0 #000;
}
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) :is(.chip:hover:not(:disabled), .auto-opt:hover span){
  color: #fff;
  border-color: var(--jk-gold-light);
  filter: brightness(1.15);
}
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) :is(.chip.active, .auto-opt.on span){
  color: var(--jk-gold-light);
  border-color: var(--jk-gold-light);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, var(--jk-crimson-light), var(--jk-crimson) 55%, var(--jk-wine));
  box-shadow: inset 0 0 0 1px rgba(255, 220, 200, 0.3), 0 3px 0 #000, 0 0 12px rgba(210, 42, 50, 0.55);
}
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .chip:disabled{ filter: grayscale(0.6) brightness(0.8); opacity: 0.5; }
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .auto-seg-btn{ color: var(--muted); font-family: var(--jk-serif); }
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .auto-seg-btn.on{
  color: var(--jk-gold-light);
  background: linear-gradient(180deg, var(--jk-crimson-light), var(--jk-wine));
  box-shadow: inset 0 0 0 1px var(--jk-gold), 0 0 10px rgba(210, 42, 50, 0.5);
}

/* switches: a black groove, a bell that slides onto crimson */
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .sw{
  border: 2px solid var(--jk-gold-dark);
  background: var(--jk-black);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);
}
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .sw i{ top: 2px; background: var(--jk-bell); }
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .sw:has(input:checked){
  border-color: var(--jk-gold);
  background: linear-gradient(180deg, var(--jk-crimson-light), var(--jk-wine));
}
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .sw input:checked ~ i{ background: var(--jk-bell); }
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .auto-amt input{
  border: 2px solid var(--jk-gold-dark);
  background: var(--jk-black);
  color: var(--jk-gold-light);
}
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .auto-cond{ border-top: 1px solid rgba(217, 164, 65, 0.4); }
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) :is(.auto-cond-row, .auto-field-label, .auto-sum, .auto-note){ color: #f0cfc0; }
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .bar{ background: var(--jk-black); }
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .bar i{ background: var(--jk-goldleaf); }

/* the autoplay start: a crimson plaque in gold, like SPIN */
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .auto-start{
  color: var(--jk-ivory);
  font-family: var(--jk-serif);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 3px solid var(--jk-gold);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, var(--jk-crimson-light), var(--jk-crimson) 55%, var(--jk-wine));
  box-shadow: inset 0 0 0 1px var(--jk-gold-light), inset 0 0 0 3px rgba(42, 4, 7, 0.8), 0 0 0 2px var(--jk-black), 0 4px 0 var(--jk-black), 0 8px 16px rgba(0, 0, 0, 0.5);
  text-shadow: 0 2px 0 var(--jk-black);
}
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .auto-start::before,
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .auto-start::after{ display: none; }
:is(.game[data-game="slot-joker"] .sidebar, .mobile-dock[data-game="slot-joker"]) .auto-start:hover:not(:disabled){ filter: brightness(1.12); color: #fff; }

/* the SPIN sign stands in a footlight glow */
.game[data-game="slot-joker"] .sidebar .spin-block{
  padding: 6px 0 2px;
  background: radial-gradient(60% 55% at 50% 40%, rgba(246, 220, 149, 0.22), transparent 70%);
}

/* history: wins gold, losses black */
.game[data-game="slot-joker"] .hist-pill{
  border: 1px solid var(--jk-gold-dark);
  background: var(--jk-black);
  color: #c99a8a;
}
.game[data-game="slot-joker"] .hist-pill.win{
  color: var(--jk-wine-deep);
  background: var(--jk-goldleaf);
}

/* payouts, history and rules at the foot of the page */
.game[data-game="slot-joker"] .game-info{ gap: 28px; margin-top: 38px; }
.game[data-game="slot-joker"] .game-info > details{ padding-top: 18px; }
.game[data-game="slot-joker"] .game-info > details::after{ left: 14px; right: 14px; }
/* each heading is a small crimson plaque in gold */
.game[data-game="slot-joker"] .game-info summary{
  width: max-content;
  margin: 0 auto;
  padding: 9px 28px;
  border: 3px solid var(--jk-gold);
  border-radius: 999px;
  color: var(--jk-ivory);
  font-family: var(--jk-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.18em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, var(--jk-crimson-light), var(--jk-crimson) 55%, var(--jk-wine));
  box-shadow: inset 0 0 0 1px var(--jk-gold-light), inset 0 0 0 3px rgba(42, 4, 7, 0.8), 0 0 0 2px var(--jk-black), 0 4px 0 var(--jk-black), 0 8px 14px rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 0 var(--jk-black);
  transition: filter 0.15s ease;
}
.game[data-game="slot-joker"] .game-info summary:hover{ filter: brightness(1.12); color: #fff; }
.game[data-game="slot-joker"] .game-info summary::after{ color: var(--jk-gold-light); }
.game[data-game="slot-joker"] .game-info details[open] > summary{ margin-bottom: 8px; }
.game[data-game="slot-joker"] .rules-body{
  padding: 4px 26px 6px;
  color: var(--jk-ivory);
  font-size: 14px;
  text-shadow: 0 1px 1px rgba(20, 3, 5, 0.75);
}
.game[data-game="slot-joker"] .rules-list{ list-style: none; padding-left: 4px; }
.game[data-game="slot-joker"] .rules-list li{ position: relative; padding-left: 24px; }
/* list markers: a red card diamond in gold */
.game[data-game="slot-joker"] .rules-list li::before{
  content: '';
  position: absolute;
  left: 2px; top: 0.3em;
  width: 12px; height: 12px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #ff8a8a, var(--jk-crimson-light) 45%, var(--jk-wine));
  box-shadow: 0 0 0 1.5px var(--jk-gold), 0 0 0 2.5px var(--jk-black);
}
.game[data-game="slot-joker"] .paytable{ gap: 14px; padding: 6px 18px 4px; }
.game[data-game="slot-joker"] .paytable-card{
  min-width: 112px;
  padding: 10px 12px 12px;
  border: 2px solid var(--jk-gold);
  border-radius: 12px;
  background: radial-gradient(100% 70% at 50% 0%, rgba(246, 220, 149, 0.12), transparent 70%), linear-gradient(180deg, #2a0c10, var(--jk-black));
  box-shadow: inset 0 0 0 1px rgba(246, 220, 149, 0.2), inset 0 3px 8px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--jk-black);
}
.game[data-game="slot-joker"] .paytable-card:hover{ box-shadow: inset 0 0 0 1px rgba(246, 220, 149, 0.2), 0 0 0 2px var(--jk-black), 0 0 16px rgba(210, 42, 50, 0.55); }
.game[data-game="slot-joker"] .paytable-icon{ width: 60px; height: 60px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55)); }
.game[data-game="slot-joker"] .paytable-amt{ color: #e4b9a6; }
.game[data-game="slot-joker"] .paytable-amt b{ color: var(--jk-gold-light); font-weight: 800; text-shadow: 0 1px 0 #000; }
.game[data-game="slot-joker"] :is(.paytable-rule, .paytable-note){ color: var(--jk-ivory); }
.game[data-game="slot-joker"] .paytable-rule{ width: 100%; }
.game[data-game="slot-joker"] .paytable-rule b{ color: var(--jk-gold-light); }

/* the mobile dock (≤1080px): crimson velvet in gold with the diamond crest, SPIN as the crimson plaque */
.mobile-dock[data-game="slot-joker"]{
  border-top: 3px solid var(--jk-gold);
  background: var(--jk-velvet);
  box-shadow: inset 0 1px 0 var(--jk-gold-light), inset 0 4px 0 rgba(42, 4, 7, 0.85), 0 0 0 2px var(--jk-black), 0 -14px 34px rgba(0, 0, 0, 0.55);
  padding-top: 18px;
}
.mobile-dock[data-game="slot-joker"]::before{
  content: '';
  position: absolute;
  left: 50%; top: -16px;
  width: 100px; height: 30px;
  transform: translateX(-50%);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 28'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1c0'/%3E%3Cstop offset='.5' stop-color='%23e2b04e'/%3E%3Cstop offset='1' stop-color='%239a6a1c'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff8a8a'/%3E%3Cstop offset='.45' stop-color='%23d22a32'/%3E%3Cstop offset='1' stop-color='%235a0a10'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M30 18 C22 10 12 12 8 18 C14 15 20 16 24 21 Z M62 18 C70 10 80 12 84 18 C78 15 72 16 68 21 Z' fill='url(%23g)' stroke='%235a3a08' stroke-width='1'/%3E%3Cpath d='M46 1 L60 14 L46 27 L32 14 Z' fill='url(%23g)' stroke='%235a3a08' stroke-width='1.2'/%3E%3Cpath d='M46 6 L55 14 L46 22 L37 14 Z' fill='url(%23r)'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}
.mobile-dock[data-game="slot-joker"] .spin-block{ padding: 0; background: none; }
.mobile-dock[data-game="slot-joker"] .spin-img-btn{
  color: var(--jk-ivory);
  font-family: var(--jk-serif);
  border: 3px solid var(--jk-gold);
  border-radius: 999px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.18em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, var(--jk-crimson-light), var(--jk-crimson) 55%, var(--jk-wine)) !important;
  box-shadow: inset 0 0 0 1px var(--jk-gold-light), inset 0 0 0 3px rgba(42, 4, 7, 0.8), 0 0 0 2px var(--jk-black), 0 4px 0 var(--jk-black), 0 8px 16px rgba(0, 0, 0, 0.5);
  text-shadow: 0 2px 0 var(--jk-black), 0 0 10px rgba(246, 220, 149, 0.4);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mobile-dock[data-game="slot-joker"] .spin-img-btn:hover:not(:disabled),
.mobile-dock[data-game="slot-joker"] .spin-img-btn:active:not(:disabled){
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, #e6434a, var(--jk-crimson-light) 55%, var(--jk-crimson)) !important;
}
.mobile-dock[data-game="slot-joker"] .spin-img-btn:active:not(:disabled){ transform: translateY(2px); }
.mobile-dock[data-game="slot-joker"] .spin-img-btn:disabled{
  color: #c99a8a;
  background: linear-gradient(180deg, var(--jk-wine), var(--jk-wine-deep)) !important;
  filter: saturate(0.6);
}

/* ── Joker Supermeter: the high-stakes twin of Joker Fruits, the same theatre in navy — midnight-blue
   velvet in antique-gold filigree, a sapphire diamond crest, golden jester bells, ivory serif lettering, a
   navy-and-black harlequin strip. Built from the Joker Fruits theme with the palette moved to sapphire. ── */
.game[data-game="slot-supermeter"],
.mobile-dock[data-game="slot-supermeter"]{
  --sm-sapphire: #1a3a8a;
  --sm-sapphire-light: #2f5ad6;
  --sm-navy: #0e1f52;
  --sm-navy-deep: #060d26;
  --sm-black: #050914;
  --sm-gold: #d9a441;
  --sm-gold-light: #f6dc95;
  --sm-gold-dark: #8a5e16;
  --sm-ivory: #f8ecd2;
  --sm-serif: Georgia, 'Times New Roman', serif;
  /* velvet: a soft vertical nap over a deep red */
  --sm-velvet: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 6px, rgba(0, 0, 0, 0.05) 6px 7px),
    radial-gradient(120% 90% at 50% 0%, #1d3f99, #0f2560 55%, #081638);
  --sm-goldleaf: linear-gradient(180deg, #fff1c0, #e2b04e 45%, #9a6a1c);
  --sm-harlequin: conic-gradient(from 45deg, #1a3a8a 0 25%, #050914 0 50%, #1a3a8a 0 75%, #050914 0) 0 0 / 14px 14px;
  --sm-bell: radial-gradient(circle at 36% 30%, #fff6cf 0%, #f2c862 22%, #c48d26 58%, #6a420a 100%);
}
.game[data-game="slot-supermeter"] .sidebar,
.game[data-game="slot-supermeter"] .game-info,
.mobile-dock[data-game="slot-supermeter"]{
  --text: #f8ecd2;
  --muted: #b9c6e4;
  --border: rgba(217, 164, 65, 0.5);
  --accent: #f6dc95;
  --accent2: #f6dc95;
  --panel: #0e1f52;
  --panel2: #1a3a8a;
}

/* the page plate: deep midnight glass, the navy curtains glowing through */
.view:has(> .game[data-game="slot-supermeter"]){
  background: linear-gradient(180deg, rgba(6, 13, 38, 0.86), rgba(5, 9, 20, 0.93));
  border-color: rgba(217, 164, 65, 0.4);
  box-shadow: 0 0 0 1px rgba(47, 90, 214, 0.22), 0 26px 70px rgba(0, 0, 0, 0.55);
}
.game[data-game="slot-supermeter"] .game-crumb,
.game[data-game="slot-supermeter"] .game-crumb a{ color: var(--muted); }
.game[data-game="slot-supermeter"] .game-crumb .cur{ color: var(--sm-gold-light); font-weight: 700; }

/* the field: an antique gold frame with a warm stage glow */
.game[data-game="slot-supermeter"] .stage.board{
  border: 4px solid var(--sm-gold);
  border-radius: 16px;
  box-shadow: inset 0 0 0 2px var(--sm-gold-dark), inset 0 0 40px rgba(47, 90, 214, 0.22), 0 0 0 2px var(--sm-black), 0 0 26px rgba(217, 164, 65, 0.28), 0 12px 30px rgba(0, 0, 0, 0.55);
}
@media (min-width: 1081px){
  .game[data-game="slot-supermeter"] .stage.board{
    background: radial-gradient(90% 70% at 50% 0%, rgba(246, 220, 149, 0.12), transparent 70%), var(--sm-velvet);
  }
}

/* every panel is navy velvet in a double gold frame */
.game[data-game="slot-supermeter"] .sidebar .panel,
.game[data-game="slot-supermeter"] .game-info > details{
  position: relative;
  margin-top: 12px;
  padding-top: 24px;
  padding-bottom: 26px;
  border: 3px solid var(--sm-gold);
  border-radius: 14px;
  overflow: visible;
  background: var(--sm-velvet);
  box-shadow:
    inset 0 0 0 1px var(--sm-gold-light),
    inset 0 0 0 4px rgba(6, 13, 38, 0.85),
    inset 0 0 0 5px rgba(217, 164, 65, 0.55),
    inset 0 -12px 20px rgba(5, 9, 20, 0.45),
    0 0 0 2px var(--sm-black),
    0 10px 24px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(47, 90, 214, 0.2);
}
/* the crest: a sapphire diamond in a gold setting with a scroll each side, as on the SPIN sign */
.game[data-game="slot-supermeter"] .sidebar .panel::before,
.game[data-game="slot-supermeter"] .game-info > details::before{
  content: '';
  position: absolute;
  left: 50%; top: -15px;
  width: 92px; height: 28px;
  transform: translateX(-50%);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 28'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1c0'/%3E%3Cstop offset='.5' stop-color='%23e2b04e'/%3E%3Cstop offset='1' stop-color='%239a6a1c'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238ab4ff'/%3E%3Cstop offset='.45' stop-color='%232f5ad6'/%3E%3Cstop offset='1' stop-color='%230e1f52'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M30 18 C22 10 12 12 8 18 C14 15 20 16 24 21 Z M62 18 C70 10 80 12 84 18 C78 15 72 16 68 21 Z' fill='url(%23g)' stroke='%235a3a08' stroke-width='1'/%3E%3Cpath d='M46 1 L60 14 L46 27 L32 14 Z' fill='url(%23g)' stroke='%235a3a08' stroke-width='1.2'/%3E%3Cpath d='M46 6 L55 14 L46 22 L37 14 Z' fill='url(%23r)'/%3E%3Cpath d='M46 6 L50 11 L46 14 Z' fill='%23fff' opacity='.5'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}
/* golden jester bells in the bottom corners */
.game[data-game="slot-supermeter"] .sidebar .panel::after,
.game[data-game="slot-supermeter"] .game-info > details::after{
  content: '';
  position: absolute;
  left: 8px; right: 8px; bottom: 6px;
  height: 16px;
  pointer-events: none;
  --sm-bellsvg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.36' cy='.3'%3E%3Cstop offset='0' stop-color='%23fff6cf'/%3E%3Cstop offset='.25' stop-color='%23f2c862'/%3E%3Cstop offset='.6' stop-color='%23c48d26'/%3E%3Cstop offset='1' stop-color='%236a420a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='8' cy='8' r='7' fill='url(%23b)' stroke='%235a3a08' stroke-width='.8'/%3E%3Cpath d='M4 9.5 H12' stroke='%233a2406' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.5' r='1.2' fill='%233a2406'/%3E%3C/svg%3E");
  background: var(--sm-bellsvg) left center / 16px 16px no-repeat, var(--sm-bellsvg) right center / 16px 16px no-repeat;
}
/* headings: ivory serif capitals with a gold glint, like the logo's lettering */
.game[data-game="slot-supermeter"] .sidebar .panel h4,
.game[data-game="slot-supermeter"] .rules-h{
  font-family: var(--sm-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sm-ivory);
  text-shadow: 0 2px 0 var(--sm-black), 1px 0 0 var(--sm-gold-dark), -1px 0 0 var(--sm-gold-dark), 0 0 10px rgba(246, 220, 149, 0.35);
}

/* inset black lacquer: the stake plaque, the segment trays, the run box */
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) :is(.stake-value, .auto-seg, .auto-run){
  border: 2px solid var(--sm-gold-dark);
  background: linear-gradient(180deg, #0a0204, var(--sm-black));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(217, 164, 65, 0.3);
}
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .stake-num{
  font-family: var(--sm-serif);
  color: var(--sm-gold-light);
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(246, 220, 149, 0.4);
}
/* − and +: golden jester bells */
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .step-btn{
  border: 2px solid var(--sm-gold-dark);
  border-radius: 50%;
  aspect-ratio: 1;
  height: auto;
  color: var(--sm-navy-deep);
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
  background: var(--sm-bell);
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.3), 0 3px 0 var(--sm-black), 0 5px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .step-btn:hover:not(:disabled){ filter: brightness(1.1); border-color: var(--sm-gold-dark); }
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .step-btn:active:not(:disabled){
  transform: translateY(2px) rotate(-8deg);
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.3), 0 1px 0 var(--sm-black), 0 2px 5px rgba(0, 0, 0, 0.5);
}
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .step-btn:disabled{ filter: grayscale(0.7) brightness(0.7); opacity: 0.6; }

/* the stake slider: a harlequin strip, gold where it has filled, a bell for the thumb */
.game[data-game="slot-supermeter"] .sidebar .ladder::-webkit-slider-runnable-track{
  height: 10px;
  background: linear-gradient(90deg, rgba(226, 176, 78, 0.92) var(--fill, 0%), transparent var(--fill, 0%)), var(--sm-harlequin);
  box-shadow: 0 0 0 2px var(--sm-gold-dark), inset 0 2px 3px rgba(0, 0, 0, 0.45);
}
.game[data-game="slot-supermeter"] .sidebar .ladder::-webkit-slider-thumb{
  width: 24px; height: 24px; margin-top: -7px;
  background: var(--sm-bell);
  box-shadow: 0 0 0 1px var(--sm-black), 0 3px 6px rgba(0, 0, 0, 0.5);
}
.game[data-game="slot-supermeter"] .sidebar .ladder::-moz-range-track{ height: 10px; background: var(--sm-harlequin); }
.game[data-game="slot-supermeter"] .sidebar .ladder::-moz-range-progress{ height: 10px; background: var(--sm-gold); }
.game[data-game="slot-supermeter"] .sidebar .ladder::-moz-range-thumb{ width: 24px; height: 24px; background: var(--sm-bell); box-shadow: 0 0 0 1px var(--sm-black); }
.game[data-game="slot-supermeter"] .sidebar .ladder-ticks i.on{ background: var(--sm-gold); }

/* chips and options: black lacquer tiles in gold with ivory letters; the chosen one is sapphire */
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) :is(.chip, .auto-opt span){
  color: var(--sm-ivory);
  font-family: var(--sm-serif);
  font-weight: 700;
  border: 2px solid var(--sm-gold);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, #0c1430, var(--sm-black));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 0 0 1px rgba(246, 220, 149, 0.2), 0 3px 0 #000, 0 4px 8px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 0 #000;
}
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) :is(.chip:hover:not(:disabled), .auto-opt:hover span){
  color: #fff;
  border-color: var(--sm-gold-light);
  filter: brightness(1.15);
}
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) :is(.chip.active, .auto-opt.on span){
  color: var(--sm-gold-light);
  border-color: var(--sm-gold-light);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, var(--sm-sapphire-light), var(--sm-sapphire) 55%, var(--sm-navy));
  box-shadow: inset 0 0 0 1px rgba(200, 220, 255, 0.3), 0 3px 0 #000, 0 0 12px rgba(47, 90, 214, 0.55);
}
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .chip:disabled{ filter: grayscale(0.6) brightness(0.8); opacity: 0.5; }
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .auto-seg-btn{ color: var(--muted); font-family: var(--sm-serif); }
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .auto-seg-btn.on{
  color: var(--sm-gold-light);
  background: linear-gradient(180deg, var(--sm-sapphire-light), var(--sm-navy));
  box-shadow: inset 0 0 0 1px var(--sm-gold), 0 0 10px rgba(47, 90, 214, 0.5);
}

/* switches: a black groove, a bell that slides onto sapphire */
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .sw{
  border: 2px solid var(--sm-gold-dark);
  background: var(--sm-black);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);
}
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .sw i{ top: 2px; background: var(--sm-bell); }
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .sw:has(input:checked){
  border-color: var(--sm-gold);
  background: linear-gradient(180deg, var(--sm-sapphire-light), var(--sm-navy));
}
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .sw input:checked ~ i{ background: var(--sm-bell); }
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .auto-amt input{
  border: 2px solid var(--sm-gold-dark);
  background: var(--sm-black);
  color: var(--sm-gold-light);
}
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .auto-cond{ border-top: 1px solid rgba(217, 164, 65, 0.4); }
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) :is(.auto-cond-row, .auto-field-label, .auto-sum, .auto-note){ color: #c9d6f0; }
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .bar{ background: var(--sm-black); }
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .bar i{ background: var(--sm-goldleaf); }

/* the autoplay start: a sapphire plaque in gold, like SPIN */
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .auto-start{
  color: var(--sm-ivory);
  font-family: var(--sm-serif);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 3px solid var(--sm-gold);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, var(--sm-sapphire-light), var(--sm-sapphire) 55%, var(--sm-navy));
  box-shadow: inset 0 0 0 1px var(--sm-gold-light), inset 0 0 0 3px rgba(6, 13, 38, 0.8), 0 0 0 2px var(--sm-black), 0 4px 0 var(--sm-black), 0 8px 16px rgba(0, 0, 0, 0.5);
  text-shadow: 0 2px 0 var(--sm-black);
}
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .auto-start::before,
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .auto-start::after{ display: none; }
:is(.game[data-game="slot-supermeter"] .sidebar, .mobile-dock[data-game="slot-supermeter"]) .auto-start:hover:not(:disabled){ filter: brightness(1.12); color: #fff; }

/* the SPIN sign stands in a footlight glow */
.game[data-game="slot-supermeter"] .sidebar .spin-block{
  padding: 6px 0 2px;
  background: radial-gradient(60% 55% at 50% 40%, rgba(246, 220, 149, 0.22), transparent 70%);
}

/* history: wins gold, losses black */
.game[data-game="slot-supermeter"] .hist-pill{
  border: 1px solid var(--sm-gold-dark);
  background: var(--sm-black);
  color: #8a9ac9;
}
.game[data-game="slot-supermeter"] .hist-pill.win{
  color: var(--sm-navy-deep);
  background: var(--sm-goldleaf);
}

/* payouts, history and rules at the foot of the page */
.game[data-game="slot-supermeter"] .game-info{ gap: 28px; margin-top: 38px; }
.game[data-game="slot-supermeter"] .game-info > details{ padding-top: 18px; }
.game[data-game="slot-supermeter"] .game-info > details::after{ left: 14px; right: 14px; }
/* each heading is a small sapphire plaque in gold */
.game[data-game="slot-supermeter"] .game-info summary{
  width: max-content;
  margin: 0 auto;
  padding: 9px 28px;
  border: 3px solid var(--sm-gold);
  border-radius: 999px;
  color: var(--sm-ivory);
  font-family: var(--sm-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.18em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, var(--sm-sapphire-light), var(--sm-sapphire) 55%, var(--sm-navy));
  box-shadow: inset 0 0 0 1px var(--sm-gold-light), inset 0 0 0 3px rgba(6, 13, 38, 0.8), 0 0 0 2px var(--sm-black), 0 4px 0 var(--sm-black), 0 8px 14px rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 0 var(--sm-black);
  transition: filter 0.15s ease;
}
.game[data-game="slot-supermeter"] .game-info summary:hover{ filter: brightness(1.12); color: #fff; }
.game[data-game="slot-supermeter"] .game-info summary::after{ color: var(--sm-gold-light); }
.game[data-game="slot-supermeter"] .game-info details[open] > summary{ margin-bottom: 8px; }
.game[data-game="slot-supermeter"] .rules-body{
  padding: 4px 26px 6px;
  color: var(--sm-ivory);
  font-size: 14px;
  text-shadow: 0 1px 1px rgba(5, 9, 20, 0.75);
}
.game[data-game="slot-supermeter"] .rules-list{ list-style: none; padding-left: 4px; }
.game[data-game="slot-supermeter"] .rules-list li{ position: relative; padding-left: 24px; }
/* list markers: a blue card diamond in gold */
.game[data-game="slot-supermeter"] .rules-list li::before{
  content: '';
  position: absolute;
  left: 2px; top: 0.3em;
  width: 12px; height: 12px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #8ab4ff, var(--sm-sapphire-light) 45%, var(--sm-navy));
  box-shadow: 0 0 0 1.5px var(--sm-gold), 0 0 0 2.5px var(--sm-black);
}
.game[data-game="slot-supermeter"] .paytable{ gap: 14px; padding: 6px 18px 4px; }
.game[data-game="slot-supermeter"] .paytable-card{
  min-width: 112px;
  padding: 10px 12px 12px;
  border: 2px solid var(--sm-gold);
  border-radius: 12px;
  background: radial-gradient(100% 70% at 50% 0%, rgba(246, 220, 149, 0.12), transparent 70%), linear-gradient(180deg, #0c1430, var(--sm-black));
  box-shadow: inset 0 0 0 1px rgba(246, 220, 149, 0.2), inset 0 3px 8px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--sm-black);
}
.game[data-game="slot-supermeter"] .paytable-card:hover{ box-shadow: inset 0 0 0 1px rgba(246, 220, 149, 0.2), 0 0 0 2px var(--sm-black), 0 0 16px rgba(47, 90, 214, 0.55); }
.game[data-game="slot-supermeter"] .paytable-icon{ width: 60px; height: 60px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55)); }
.game[data-game="slot-supermeter"] .paytable-amt{ color: #b9c6e4; }
.game[data-game="slot-supermeter"] .paytable-amt b{ color: var(--sm-gold-light); font-weight: 800; text-shadow: 0 1px 0 #000; }
.game[data-game="slot-supermeter"] :is(.paytable-rule, .paytable-note){ color: var(--sm-ivory); }
.game[data-game="slot-supermeter"] .paytable-rule{ width: 100%; }
.game[data-game="slot-supermeter"] .paytable-rule b{ color: var(--sm-gold-light); }

/* the mobile dock (≤1080px): navy velvet in gold with the sapphire crest, SPIN as the sapphire plaque */
.mobile-dock[data-game="slot-supermeter"]{
  border-top: 3px solid var(--sm-gold);
  background: var(--sm-velvet);
  box-shadow: inset 0 1px 0 var(--sm-gold-light), inset 0 4px 0 rgba(6, 13, 38, 0.85), 0 0 0 2px var(--sm-black), 0 -14px 34px rgba(0, 0, 0, 0.55);
  padding-top: 18px;
}
.mobile-dock[data-game="slot-supermeter"]::before{
  content: '';
  position: absolute;
  left: 50%; top: -16px;
  width: 100px; height: 30px;
  transform: translateX(-50%);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 28'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1c0'/%3E%3Cstop offset='.5' stop-color='%23e2b04e'/%3E%3Cstop offset='1' stop-color='%239a6a1c'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238ab4ff'/%3E%3Cstop offset='.45' stop-color='%232f5ad6'/%3E%3Cstop offset='1' stop-color='%230e1f52'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M30 18 C22 10 12 12 8 18 C14 15 20 16 24 21 Z M62 18 C70 10 80 12 84 18 C78 15 72 16 68 21 Z' fill='url(%23g)' stroke='%235a3a08' stroke-width='1'/%3E%3Cpath d='M46 1 L60 14 L46 27 L32 14 Z' fill='url(%23g)' stroke='%235a3a08' stroke-width='1.2'/%3E%3Cpath d='M46 6 L55 14 L46 22 L37 14 Z' fill='url(%23r)'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}
.mobile-dock[data-game="slot-supermeter"] .spin-block{ padding: 0; background: none; }
.mobile-dock[data-game="slot-supermeter"] .spin-img-btn{
  color: var(--sm-ivory);
  font-family: var(--sm-serif);
  border: 3px solid var(--sm-gold);
  border-radius: 999px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.18em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, var(--sm-sapphire-light), var(--sm-sapphire) 55%, var(--sm-navy)) !important;
  box-shadow: inset 0 0 0 1px var(--sm-gold-light), inset 0 0 0 3px rgba(6, 13, 38, 0.8), 0 0 0 2px var(--sm-black), 0 4px 0 var(--sm-black), 0 8px 16px rgba(0, 0, 0, 0.5);
  text-shadow: 0 2px 0 var(--sm-black), 0 0 10px rgba(246, 220, 149, 0.4);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mobile-dock[data-game="slot-supermeter"] .spin-img-btn:hover:not(:disabled),
.mobile-dock[data-game="slot-supermeter"] .spin-img-btn:active:not(:disabled){
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, #4a74ee, var(--sm-sapphire-light) 55%, var(--sm-sapphire)) !important;
}
.mobile-dock[data-game="slot-supermeter"] .spin-img-btn:active:not(:disabled){ transform: translateY(2px); }
.mobile-dock[data-game="slot-supermeter"] .spin-img-btn:disabled{
  color: #8a9ac9;
  background: linear-gradient(180deg, var(--sm-navy), var(--sm-navy-deep)) !important;
  filter: saturate(0.6);
}

/* ── Starburst: deep space — violet glass panels in a fiery gold-orange rim with a turquoise neon edge,
   a four-pointed star on top and gem sparks in the corners, orange-gold lettering like the logo.
   Deck controls and their dock twins share one rule through :is(). ── */
.game[data-game="slot-starburst"],
.mobile-dock[data-game="slot-starburst"]{
  --sb-violet: #3a1478;
  --sb-violet-light: #6a2fc0;
  --sb-indigo: #1a0c40;
  --sb-space: #0a0620;
  --sb-gold: #ffb52e;
  --sb-gold-light: #ffe08a;
  --sb-orange: #ff7a1a;
  --sb-ember: #b84a08;
  --sb-teal: #2ee6e0;
  --sb-magenta: #e040c0;
  --sb-fire: linear-gradient(180deg, #ffe08a, #ffb52e 45%, #ff7a1a);
  --sb-glass: radial-gradient(120% 90% at 50% 0%, rgba(160, 80, 255, 0.35), transparent 60%),
    radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 51%) 0 0 / 60px 60px,
    radial-gradient(1px 1px at 70% 80%, rgba(180, 240, 255, 0.9) 50%, transparent 51%) 0 0 / 80px 80px,
    linear-gradient(180deg, #2a0f5e, #160838 60%, #0a0620);
  --sb-plaque: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 45%),
    radial-gradient(120% 120% at 50% 20%, #7a2fd0, #3a1478 60%, #1a0c40);
  --sb-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='s'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.35' stop-color='%23ffe08a'/%3E%3Cstop offset='1' stop-color='%23ff7a1a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M20 0 C22 14 26 18 40 20 C26 22 22 26 20 40 C18 26 14 22 0 20 C14 18 18 14 20 0 Z' fill='url(%23s)' stroke='%237a2a00' stroke-width='1.2'/%3E%3C/svg%3E");
}
.game[data-game="slot-starburst"] .sidebar,
.game[data-game="slot-starburst"] .game-info,
.mobile-dock[data-game="slot-starburst"]{
  --text: #f4ecff;
  --muted: #b9a8e8;
  --border: rgba(255, 181, 46, 0.5);
  --accent: #ffe08a;
  --accent2: #2ee6e0;
  --panel: #1a0c40;
  --panel2: #3a1478;
}

/* the page plate: deep space glass */
.view:has(> .game[data-game="slot-starburst"]){
  background: linear-gradient(180deg, rgba(14, 8, 40, 0.86), rgba(8, 4, 24, 0.93));
  border-color: rgba(255, 181, 46, 0.35);
  box-shadow: 0 0 0 1px rgba(46, 230, 224, 0.2), 0 26px 70px rgba(0, 0, 0, 0.55);
}
.game[data-game="slot-starburst"] .game-crumb,
.game[data-game="slot-starburst"] .game-crumb a{ color: var(--muted); }
.game[data-game="slot-starburst"] .game-crumb .cur{ color: var(--sb-gold-light); font-weight: 700; }

/* the field: a fiery rim with a turquoise neon edge */
.game[data-game="slot-starburst"] .stage.board{
  border: 3px solid var(--sb-gold);
  border-radius: 20px;
  box-shadow: inset 0 0 0 2px var(--sb-ember), inset 0 0 40px rgba(160, 80, 255, 0.3), 0 0 0 2px var(--sb-teal), 0 0 22px rgba(46, 230, 224, 0.45), 0 0 50px rgba(224, 64, 192, 0.25), 0 12px 30px rgba(0, 0, 0, 0.5);
}
@media (min-width: 1081px){
  .game[data-game="slot-starburst"] .stage.board{ background: var(--sb-glass); }
}

/* every panel is violet space glass in a fiery rim, edged in turquoise neon */
.game[data-game="slot-starburst"] .sidebar .panel,
.game[data-game="slot-starburst"] .game-info > details{
  position: relative;
  margin-top: 12px;
  padding-top: 24px;
  padding-bottom: 24px;
  border: 3px solid var(--sb-gold);
  border-radius: 20px;
  overflow: visible;
  background: var(--sb-glass);
  box-shadow:
    inset 0 0 0 1px var(--sb-gold-light),
    inset 0 0 0 3px rgba(184, 74, 8, 0.7),
    inset 0 0 24px rgba(160, 80, 255, 0.3),
    0 0 0 2px var(--sb-teal),
    0 0 14px rgba(46, 230, 224, 0.4),
    0 10px 24px rgba(0, 0, 0, 0.5);
}
/* a four-pointed star on the middle of the top rim, like the logo's sparkles */
.game[data-game="slot-starburst"] .sidebar .panel::before,
.game[data-game="slot-starburst"] .game-info > details::before{
  content: '';
  position: absolute;
  left: 50%; top: -18px;
  width: 34px; height: 34px;
  transform: translateX(-50%);
  pointer-events: none;
  background: var(--sb-star) center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(255, 181, 46, 0.9));
}
/* gem sparks in the bottom corners: a turquoise and a magenta crystal */
.game[data-game="slot-starburst"] .sidebar .panel::after,
.game[data-game="slot-starburst"] .game-info > details::after{
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 6px;
  height: 14px;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0 L13 5 L7 14 L1 5 Z' fill='%232ee6e0' stroke='%230a5a6a' stroke-width='.8'/%3E%3Cpath d='M7 0 L10 5 L7 9 L4 5 Z' fill='%23c8fffa' opacity='.7'/%3E%3C/svg%3E") left center / 14px 14px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0 L13 5 L7 14 L1 5 Z' fill='%23e040c0' stroke='%235a0a50' stroke-width='.8'/%3E%3Cpath d='M7 0 L10 5 L7 9 L4 5 Z' fill='%23ffc8f0' opacity='.7'/%3E%3C/svg%3E") right center / 14px 14px no-repeat;
  filter: drop-shadow(0 0 4px rgba(46, 230, 224, 0.6));
}
/* headings: orange-gold lettering with a dark outline, slanted like the logo */
.game[data-game="slot-starburst"] .sidebar .panel h4,
.game[data-game="slot-starburst"] .rules-h{
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sb-gold);
  text-shadow: 0 2px 0 #1a0600, 1px 0 0 #1a0600, -1px 0 0 #1a0600, 0 0 10px rgba(255, 122, 26, 0.6);
}

/* inset deep space: the stake plaque, the segment trays, the run box */
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) :is(.stake-value, .auto-seg, .auto-run){
  border: 2px solid rgba(46, 230, 224, 0.6);
  background: linear-gradient(180deg, #05031a, var(--sb-space));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), 0 0 8px rgba(46, 230, 224, 0.25);
}
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .stake-num{
  color: var(--sb-gold-light);
  text-shadow: 0 0 10px rgba(255, 181, 46, 0.7);
}
/* − and +: glowing gem orbs, turquoise and magenta */
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .step-btn{
  border: 2px solid var(--sb-gold);
  border-radius: 50%;
  aspect-ratio: 1;
  height: auto;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  background: radial-gradient(circle at 35% 28%, #e0fffd 0%, #2ee6e0 35%, #0a8a96 75%, #04404a 100%);
  box-shadow: 0 0 12px rgba(46, 230, 224, 0.6), 0 4px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .stake-value + .step-btn{
  background: radial-gradient(circle at 35% 28%, #ffe0f8 0%, #e040c0 35%, #8a1478 75%, #40063a 100%);
  box-shadow: 0 0 12px rgba(224, 64, 192, 0.6), 0 4px 8px rgba(0, 0, 0, 0.5);
}
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .step-btn:hover:not(:disabled){ filter: brightness(1.15); border-color: var(--sb-gold-light); }
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .step-btn:active:not(:disabled){ transform: scale(0.94); }
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .step-btn:disabled{ filter: grayscale(0.8) brightness(0.6); opacity: 0.6; box-shadow: none; }

/* the stake slider: a neon rail, fire where it has filled, a star for the thumb */
.game[data-game="slot-starburst"] .sidebar .ladder::-webkit-slider-runnable-track{
  height: 6px;
  background: linear-gradient(90deg, var(--sb-orange), var(--sb-gold) var(--fill, 0%), #0a0620 var(--fill, 0%));
  box-shadow: 0 0 0 1px var(--sb-teal), 0 0 8px rgba(46, 230, 224, 0.4);
}
.game[data-game="slot-starburst"] .sidebar .ladder::-webkit-slider-thumb{
  width: 28px; height: 28px; margin-top: -11px;
  border-radius: 0;
  background: var(--sb-star) center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 0 6px rgba(255, 181, 46, 0.9));
}
.game[data-game="slot-starburst"] .sidebar .ladder::-moz-range-track{ height: 6px; background: #0a0620; }
.game[data-game="slot-starburst"] .sidebar .ladder::-moz-range-progress{ height: 6px; background: var(--sb-gold); }
.game[data-game="slot-starburst"] .sidebar .ladder::-moz-range-thumb{ width: 28px; height: 28px; border-radius: 0; background: var(--sb-star) center / contain no-repeat; box-shadow: none; }
.game[data-game="slot-starburst"] .sidebar .ladder-ticks i.on{ background: var(--sb-gold); }

/* chips and options: violet glass pills in gold; the chosen one burns orange */
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) :is(.chip, .auto-opt span){
  color: #f4ecff;
  font-weight: 800;
  border: 2px solid var(--sb-gold);
  border-radius: 999px;
  background: var(--sb-plaque);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 0 8px rgba(160, 80, 255, 0.4), 0 0 8px rgba(46, 230, 224, 0.25), 0 3px 6px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 0 #000;
}
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) :is(.chip:hover:not(:disabled), .auto-opt:hover span){
  color: #fff;
  border-color: var(--sb-gold-light);
  filter: brightness(1.18);
}
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) :is(.chip.active, .auto-opt.on span){
  color: #2a0a00;
  border-color: var(--sb-gold-light);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 45%), var(--sb-fire);
  box-shadow: 0 0 14px rgba(255, 122, 26, 0.7), 0 3px 6px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .chip:disabled{ filter: grayscale(0.7) brightness(0.65); opacity: 0.55; box-shadow: none; }
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .auto-seg-btn{ color: var(--muted); border-radius: 999px; }
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .auto-seg-btn.on{
  color: #2a0a00;
  background: var(--sb-fire);
  box-shadow: 0 0 12px rgba(255, 122, 26, 0.6);
}

/* switches: a dark groove, a star that slides onto turquoise neon */
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .sw{
  border: 2px solid var(--sb-violet-light);
  background: var(--sb-space);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);
}
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .sw i{ top: 2px; background: radial-gradient(circle, #fff 0 20%, var(--sb-gold) 50%, var(--sb-orange)); }
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .sw:has(input:checked){
  border-color: var(--sb-teal);
  background: linear-gradient(180deg, #5ef0ea, #0a8a96);
  box-shadow: 0 0 10px rgba(46, 230, 224, 0.6);
}
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .auto-amt input{
  border: 2px solid rgba(46, 230, 224, 0.6);
  background: var(--sb-space);
  color: var(--sb-gold-light);
}
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .auto-cond{ border-top: 1px solid rgba(46, 230, 224, 0.35); }
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) :is(.auto-cond-row, .auto-field-label, .auto-sum, .auto-note){ color: #d0c4f4; }
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .bar{ background: var(--sb-space); }
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .bar i{ background: var(--sb-fire); }

/* the autoplay start: a violet plaque in a fiery rim, like SPIN */
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .auto-start{
  color: var(--sb-gold);
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 3px solid var(--sb-gold);
  border-radius: 999px;
  background: var(--sb-plaque);
  box-shadow: inset 0 0 0 1px var(--sb-gold-light), inset 0 0 0 3px rgba(184, 74, 8, 0.7), 0 0 0 2px var(--sb-teal), 0 0 16px rgba(46, 230, 224, 0.45), 0 6px 14px rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 0 #1a0600, 0 0 10px rgba(255, 122, 26, 0.7);
}
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .auto-start::before,
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .auto-start::after{ display: none; }
:is(.game[data-game="slot-starburst"] .sidebar, .mobile-dock[data-game="slot-starburst"]) .auto-start:hover:not(:disabled){ filter: brightness(1.15); color: var(--sb-gold-light); }

/* the SPIN sign glows like a star going nova */
.game[data-game="slot-starburst"] .sidebar .spin-block{
  padding: 6px 0 2px;
  background: radial-gradient(60% 55% at 50% 40%, rgba(224, 64, 192, 0.3), rgba(46, 230, 224, 0.08) 55%, transparent 72%);
}

/* history: wins burn gold, losses are dark glass */
.game[data-game="slot-starburst"] .hist-pill{
  border: 1px solid var(--sb-violet-light);
  background: var(--sb-space);
  color: #8a7ac0;
}
.game[data-game="slot-starburst"] .hist-pill.win{
  color: #2a0a00;
  background: var(--sb-fire);
  box-shadow: 0 0 8px rgba(255, 122, 26, 0.5);
}

/* payouts, history and rules at the foot of the page */
.game[data-game="slot-starburst"] .game-info{ gap: 30px; margin-top: 40px; }
.game[data-game="slot-starburst"] .game-info > details{ padding-top: 18px; }
.game[data-game="slot-starburst"] .game-info > details::after{ left: 16px; right: 16px; }
/* each heading is a small violet plaque in a fiery rim */
.game[data-game="slot-starburst"] .game-info summary{
  width: max-content;
  margin: 0 auto;
  padding: 9px 28px;
  border: 3px solid var(--sb-gold);
  border-radius: 999px;
  color: var(--sb-gold);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.16em;
  background: var(--sb-plaque);
  box-shadow: inset 0 0 0 1px var(--sb-gold-light), 0 0 0 2px var(--sb-teal), 0 0 14px rgba(46, 230, 224, 0.4), 0 6px 12px rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 0 #1a0600, 0 0 8px rgba(255, 122, 26, 0.6);
  transition: filter 0.15s ease;
}
.game[data-game="slot-starburst"] .game-info summary:hover{ filter: brightness(1.15); color: var(--sb-gold-light); }
.game[data-game="slot-starburst"] .game-info summary::after{ color: var(--sb-teal); }
.game[data-game="slot-starburst"] .game-info details[open] > summary{ margin-bottom: 8px; }
.game[data-game="slot-starburst"] .rules-body{
  padding: 4px 26px 6px;
  color: #ece4ff;
  font-size: 14px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}
.game[data-game="slot-starburst"] .rules-list{ list-style: none; padding-left: 4px; }
.game[data-game="slot-starburst"] .rules-list li{ position: relative; padding-left: 26px; }
.game[data-game="slot-starburst"] .rules-list li::before{
  content: '';
  position: absolute;
  left: 0; top: 0.15em;
  width: 17px; height: 17px;
  background: var(--sb-star) center / contain no-repeat;
  filter: drop-shadow(0 0 3px rgba(255, 181, 46, 0.8));
}
.game[data-game="slot-starburst"] .paytable{ gap: 14px; padding: 6px 18px 4px; }
.game[data-game="slot-starburst"] .paytable-card{
  min-width: 112px;
  padding: 10px 12px 12px;
  border: 2px solid var(--sb-gold);
  border-radius: 16px;
  background: radial-gradient(100% 70% at 50% 0%, rgba(160, 80, 255, 0.3), transparent 70%), linear-gradient(180deg, #160838, var(--sb-space));
  box-shadow: inset 0 0 0 1px rgba(255, 224, 138, 0.2), 0 0 0 1px rgba(46, 230, 224, 0.5), 0 0 10px rgba(46, 230, 224, 0.2);
}
.game[data-game="slot-starburst"] .paytable-card:hover{ box-shadow: 0 0 0 1px var(--sb-teal), 0 0 18px rgba(46, 230, 224, 0.6), 0 0 30px rgba(224, 64, 192, 0.3); }
.game[data-game="slot-starburst"] .paytable-icon{ width: 60px; height: 60px; filter: drop-shadow(0 0 6px rgba(160, 80, 255, 0.6)); }
.game[data-game="slot-starburst"] .paytable-amt{ color: #b9a8e8; }
.game[data-game="slot-starburst"] .paytable-amt b{ color: var(--sb-gold-light); font-weight: 800; text-shadow: 0 0 6px rgba(255, 181, 46, 0.5); }
.game[data-game="slot-starburst"] :is(.paytable-rule, .paytable-note){ color: #ece4ff; }
.game[data-game="slot-starburst"] .paytable-rule{ width: 100%; }
.game[data-game="slot-starburst"] .paytable-rule b{ color: var(--sb-gold-light); }

/* the mobile dock (≤1080px): violet space glass in a fiery rim with the star on top, SPIN as the violet plaque */
.mobile-dock[data-game="slot-starburst"]{
  border-top: 3px solid var(--sb-gold);
  background: var(--sb-glass);
  box-shadow: inset 0 1px 0 var(--sb-gold-light), 0 -2px 0 var(--sb-teal), 0 -8px 20px rgba(46, 230, 224, 0.3), 0 -14px 34px rgba(0, 0, 0, 0.5);
  padding-top: 18px;
}
.mobile-dock[data-game="slot-starburst"]::before{
  content: '';
  position: absolute;
  left: 50%; top: -20px;
  width: 38px; height: 38px;
  transform: translateX(-50%);
  pointer-events: none;
  background: var(--sb-star) center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(255, 181, 46, 0.9));
}
.mobile-dock[data-game="slot-starburst"] .spin-block{ padding: 0; background: none; }
.mobile-dock[data-game="slot-starburst"] .spin-img-btn{
  color: var(--sb-gold);
  border: 3px solid var(--sb-gold);
  border-radius: 999px;
  font-size: 22px;
  font-style: italic;
  letter-spacing: 0.14em;
  background: var(--sb-plaque) !important;
  box-shadow: inset 0 0 0 1px var(--sb-gold-light), inset 0 0 0 3px rgba(184, 74, 8, 0.7), 0 0 0 2px var(--sb-teal), 0 0 18px rgba(46, 230, 224, 0.45), 0 6px 14px rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 0 #1a0600, 0 0 12px rgba(255, 122, 26, 0.8);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mobile-dock[data-game="slot-starburst"] .spin-img-btn:hover:not(:disabled),
.mobile-dock[data-game="slot-starburst"] .spin-img-btn:active:not(:disabled){
  color: var(--sb-gold-light);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 45%), radial-gradient(120% 120% at 50% 20%, #9a4ff0, #4a1a98 60%, #221050) !important;
}
.mobile-dock[data-game="slot-starburst"] .spin-img-btn:active:not(:disabled){ transform: translateY(2px); }
.mobile-dock[data-game="slot-starburst"] .spin-img-btn:disabled{
  color: #8a7ac0;
  background: linear-gradient(180deg, #1a0c40, var(--sb-space)) !important;
  filter: saturate(0.6);
}

/* ── Book of Dead: a temple in the sand — dark tomb-stone panels in a frame of worn gold, a lapis-and-gold
   striped band like the bars on the SPIN plaque, a winged scarab crest (the logo's), ankhs in the corners,
   carved-gold serif lettering. Deck controls and their dock twins share one rule through :is(). ── */
.game[data-game="slot-sands"],
.mobile-dock[data-game="slot-sands"]{
  --bd-gold: #d9a646;
  --bd-gold-light: #f6dc8e;
  --bd-gold-dark: #8a6418;
  --bd-sand: #e8c98a;
  --bd-lapis: #1f48b0;
  --bd-lapis-light: #3f74e0;
  --bd-lapis-dark: #0f2660;
  --bd-stone: #2a1c0c;
  --bd-stone-deep: #140c04;
  --bd-ivory: #f7ead0;
  --bd-serif: Georgia, 'Times New Roman', serif;
  --bd-grain: repeating-linear-gradient(100deg, rgba(255, 230, 170, 0.035) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(10deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 15px);
  --bd-tomb: var(--bd-grain), radial-gradient(120% 90% at 50% 0%, #4a3416, #2a1c0c 60%, #160e05);
  --bd-goldleaf: var(--bd-grain), linear-gradient(180deg, #f6dc8e, #d9a646 50%, #9a7020);
  --bd-band: repeating-linear-gradient(90deg, #1f48b0 0 18px, #d9a646 18px 21px, #1f48b0 21px 24px, #d9a646 24px 27px);
  --bd-scarab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f6dc8e'/%3E%3Cstop offset='.5' stop-color='%23d9a646'/%3E%3Cstop offset='1' stop-color='%238a6418'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)' stroke='%235a3e08' stroke-width='1'%3E%3Cpath d='M38 16 C28 8 14 6 2 10 C10 12 16 14 20 17 C12 17 8 19 4 22 C16 21 26 22 36 22 Z'/%3E%3Cpath d='M58 16 C68 8 82 6 94 10 C86 12 80 14 76 17 C84 17 88 19 92 22 C80 21 70 22 60 22 Z'/%3E%3Ccircle cx='48' cy='7' r='5.5'/%3E%3Cellipse cx='48' cy='20' rx='10' ry='11'/%3E%3C/g%3E%3Cpath d='M48 10 V30 M39 18 H57' stroke='%235a3e08' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  --bd-ankh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cg fill='none' stroke='%23d9a646' stroke-width='2'%3E%3Cellipse cx='6' cy='4' rx='3' ry='3.3'/%3E%3Cpath d='M6 7.3 V15.5 M1.5 9 H10.5'/%3E%3C/g%3E%3C/svg%3E");
}
.game[data-game="slot-sands"] .sidebar,
.game[data-game="slot-sands"] .game-info,
.mobile-dock[data-game="slot-sands"]{
  --text: #f7ead0;
  --muted: #cdb48a;
  --border: rgba(217, 166, 70, 0.5);
  --accent: #f6dc8e;
  --accent2: #3f74e0;
  --panel: #2a1c0c;
  --panel2: #4a3416;
}

/* the page plate: dusky temple glass */
.view:has(> .game[data-game="slot-sands"]){
  background: linear-gradient(180deg, rgba(36, 24, 10, 0.86), rgba(18, 12, 4, 0.93));
  border-color: rgba(217, 166, 70, 0.4);
  box-shadow: 0 0 0 1px rgba(63, 116, 224, 0.2), 0 26px 70px rgba(0, 0, 0, 0.55);
}
.game[data-game="slot-sands"] .game-crumb,
.game[data-game="slot-sands"] .game-crumb a{ color: var(--muted); }
.game[data-game="slot-sands"] .game-crumb .cur{ color: var(--bd-gold-light); font-weight: 700; }

/* the field: a worn gold frame with a lapis inner line, torchlight glow */
.game[data-game="slot-sands"] .stage.board{
  border: 4px solid var(--bd-gold);
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px var(--bd-lapis), inset 0 0 40px rgba(255, 180, 80, 0.18), 0 0 0 2px var(--bd-stone-deep), 0 0 26px rgba(255, 180, 80, 0.25), 0 12px 30px rgba(0, 0, 0, 0.55);
}
@media (min-width: 1081px){
  .game[data-game="slot-sands"] .stage.board{ background: var(--bd-tomb); }
}

/* every panel is a tomb-stone slab in worn gold, with a lapis band along its top edge */
.game[data-game="slot-sands"] .sidebar .panel,
.game[data-game="slot-sands"] .game-info > details{
  position: relative;
  margin-top: 14px;
  padding-top: 26px;
  padding-bottom: 26px;
  border: 4px solid var(--bd-gold);
  border-radius: 12px;
  overflow: visible;
  background:
    linear-gradient(180deg, transparent 0 6px, var(--bd-gold-dark) 6px 7px, transparent 7px) top / 100% 8px no-repeat,
    var(--bd-band) top / 100% 6px no-repeat,
    var(--bd-tomb);
  box-shadow:
    inset 0 0 0 1px var(--bd-gold-light),
    inset 0 -12px 20px rgba(0, 0, 0, 0.35),
    0 0 0 2px var(--bd-stone-deep),
    0 10px 24px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(255, 180, 80, 0.15);
}
/* the winged scarab crest on the middle of the top rim */
.game[data-game="slot-sands"] .sidebar .panel::before,
.game[data-game="slot-sands"] .game-info > details::before{
  content: '';
  position: absolute;
  left: 50%; top: -19px;
  width: 92px; height: 31px;
  transform: translateX(-50%);
  pointer-events: none;
  background: var(--bd-scarab) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
}
/* golden ankhs in the bottom corners */
.game[data-game="slot-sands"] .sidebar .panel::after,
.game[data-game="slot-sands"] .game-info > details::after{
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 6px;
  height: 16px;
  pointer-events: none;
  background: var(--bd-ankh) left center / 12px 16px no-repeat, var(--bd-ankh) right center / 12px 16px no-repeat;
}
/* headings: carved gold serif capitals */
.game[data-game="slot-sands"] .sidebar .panel h4,
.game[data-game="slot-sands"] .rules-h{
  font-family: var(--bd-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bd-gold-light);
  text-shadow: 0 2px 0 var(--bd-stone-deep), 1px 0 0 var(--bd-gold-dark), -1px 0 0 var(--bd-gold-dark), 0 0 10px rgba(255, 200, 100, 0.3);
}

/* inset lapis: the stake plaque, the segment trays, the run box */
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) :is(.stake-value, .auto-seg, .auto-run){
  border: 2px solid var(--bd-gold-dark);
  background: radial-gradient(120% 120% at 50% 0%, #1a3a8a, var(--bd-lapis-dark) 60%, #081436);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(217, 166, 70, 0.35);
}
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) .stake-num{
  font-family: var(--bd-serif);
  color: var(--bd-gold-light);
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(246, 220, 142, 0.4);
}
/* − and +: gold sun discs */
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) .step-btn{
  border: 2px solid var(--bd-gold-dark);
  border-radius: 50%;
  aspect-ratio: 1;
  height: auto;
  color: var(--bd-stone-deep);
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
  background: radial-gradient(circle at 35% 28%, #fff4cc 0%, #f0cc6e 30%, #c8962e 70%, #7a5410 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 240, 200, 0.3), 0 3px 0 var(--bd-stone-deep), 0 5px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) .step-btn:hover:not(:disabled){ filter: brightness(1.1); border-color: var(--bd-gold-dark); }
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) .step-btn:active:not(:disabled){
  transform: translateY(2px);
  box-shadow: inset 0 0 0 3px rgba(255, 240, 200, 0.3), 0 1px 0 var(--bd-stone-deep), 0 2px 5px rgba(0, 0, 0, 0.5);
}
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) .step-btn:disabled{ filter: grayscale(0.7) brightness(0.7); opacity: 0.6; }

/* the stake slider: a lapis-and-gold band, gold where it has filled, a sun disc for the thumb */
.game[data-game="slot-sands"] .sidebar .ladder::-webkit-slider-runnable-track{
  height: 8px;
  background: linear-gradient(90deg, rgba(217, 166, 70, 0.95) var(--fill, 0%), transparent var(--fill, 0%)), var(--bd-band);
  box-shadow: 0 0 0 2px var(--bd-gold-dark), inset 0 2px 3px rgba(0, 0, 0, 0.4);
}
.game[data-game="slot-sands"] .sidebar .ladder::-webkit-slider-thumb{
  width: 24px; height: 24px; margin-top: -8px;
  background: radial-gradient(circle at 35% 28%, #fff4cc 0%, #f0cc6e 30%, #c8962e 70%, #7a5410 100%);
  box-shadow: 0 0 0 1px var(--bd-stone-deep), 0 3px 6px rgba(0, 0, 0, 0.5);
}
.game[data-game="slot-sands"] .sidebar .ladder::-moz-range-track{ height: 8px; background: var(--bd-band); }
.game[data-game="slot-sands"] .sidebar .ladder::-moz-range-progress{ height: 8px; background: var(--bd-gold); }
.game[data-game="slot-sands"] .sidebar .ladder::-moz-range-thumb{ width: 24px; height: 24px; background: radial-gradient(circle at 35% 28%, #fff4cc, #c8962e 70%, #7a5410); box-shadow: 0 0 0 1px var(--bd-stone-deep); }
.game[data-game="slot-sands"] .sidebar .ladder-ticks i.on{ background: var(--bd-gold); }

/* chips and options: gold plaques with dark carved letters, like SPIN; the chosen one is lapis */
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) :is(.chip, .auto-opt span){
  color: var(--bd-stone-deep);
  font-family: var(--bd-serif);
  font-weight: 700;
  border: 2px solid var(--bd-gold-dark);
  border-radius: 8px;
  background: var(--bd-goldleaf);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.6), 0 3px 0 var(--bd-stone-deep), 0 4px 8px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
}
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) :is(.chip:hover:not(:disabled), .auto-opt:hover span){
  color: var(--bd-stone-deep);
  border-color: var(--bd-gold-dark);
  filter: brightness(1.08);
}
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) :is(.chip.active, .auto-opt.on span){
  color: var(--bd-gold-light);
  border-color: var(--bd-gold);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, var(--bd-lapis-light), var(--bd-lapis) 55%, var(--bd-lapis-dark));
  box-shadow: inset 0 0 0 1px rgba(246, 220, 142, 0.4), 0 3px 0 var(--bd-stone-deep), 0 0 12px rgba(63, 116, 224, 0.5);
  text-shadow: 0 1px 0 #000;
}
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) .chip:disabled{ filter: grayscale(0.7) brightness(0.7); opacity: 0.55; }
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) .auto-seg-btn{ color: #b9c6ec; font-family: var(--bd-serif); }
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) .auto-seg-btn.on{
  color: var(--bd-stone-deep);
  background: var(--bd-goldleaf);
  box-shadow: 0 0 10px rgba(246, 220, 142, 0.4);
}

/* switches: a lapis groove, a sun disc that slides onto gold */
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) .sw{
  border: 2px solid var(--bd-gold-dark);
  background: var(--bd-lapis-dark);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) .sw i{ top: 2px; background: radial-gradient(circle at 35% 28%, #fff4cc, #c8962e 70%, #7a5410); }
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) .sw:has(input:checked){
  border-color: var(--bd-gold);
  background: linear-gradient(180deg, var(--bd-lapis-light), var(--bd-lapis));
}
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) .auto-amt input{
  border: 2px solid var(--bd-gold-dark);
  background: var(--bd-lapis-dark);
  color: var(--bd-gold-light);
}
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) .auto-cond{ border-top: 1px solid rgba(217, 166, 70, 0.4); }
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) :is(.auto-cond-row, .auto-field-label, .auto-sum, .auto-note){ color: #e2cfa8; }
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) .bar{ background: var(--bd-lapis-dark); }
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) .bar i{ background: var(--bd-goldleaf); }

/* the autoplay start: a gold plaque with lapis ends, like SPIN */
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) .auto-start{
  color: var(--bd-stone-deep);
  font-family: var(--bd-serif);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 3px solid var(--bd-gold-dark);
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--bd-lapis) 0 18px, transparent 18px calc(100% - 18px), var(--bd-lapis) calc(100% - 18px)),
    var(--bd-goldleaf);
  box-shadow: inset 0 0 0 2px var(--bd-gold-light), 0 0 0 2px var(--bd-stone-deep), 0 4px 0 var(--bd-stone-deep), 0 8px 16px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
}
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) .auto-start::before,
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) .auto-start::after{ display: none; }
:is(.game[data-game="slot-sands"] .sidebar, .mobile-dock[data-game="slot-sands"]) .auto-start:hover:not(:disabled){ filter: brightness(1.1); }

/* the SPIN plaque stands in torchlight */
.game[data-game="slot-sands"] .sidebar .spin-block{
  padding: 6px 0 2px;
  background: radial-gradient(60% 55% at 50% 40%, rgba(255, 180, 80, 0.28), transparent 70%);
}

/* history: wins gold, losses lapis */
.game[data-game="slot-sands"] .hist-pill{
  border: 1px solid var(--bd-gold-dark);
  background: var(--bd-lapis-dark);
  color: #9aa8d0;
}
.game[data-game="slot-sands"] .hist-pill.win{
  color: var(--bd-stone-deep);
  background: var(--bd-goldleaf);
}

/* payouts, history and rules at the foot of the page */
.game[data-game="slot-sands"] .game-info{ gap: 30px; margin-top: 40px; }
.game[data-game="slot-sands"] .game-info > details{ padding-top: 20px; }
.game[data-game="slot-sands"] .game-info > details::after{ left: 16px; right: 16px; }
/* each heading is a small gold plaque with lapis ends */
.game[data-game="slot-sands"] .game-info summary{
  width: max-content;
  margin: 0 auto;
  padding: 9px 34px;
  border: 3px solid var(--bd-gold-dark);
  border-radius: 999px;
  color: var(--bd-stone-deep);
  font-family: var(--bd-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.18em;
  background:
    linear-gradient(90deg, var(--bd-lapis) 0 16px, transparent 16px calc(100% - 16px), var(--bd-lapis) calc(100% - 16px)),
    var(--bd-goldleaf);
  box-shadow: inset 0 0 0 2px var(--bd-gold-light), 0 0 0 2px var(--bd-stone-deep), 0 4px 0 var(--bd-stone-deep), 0 8px 14px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
  transition: filter 0.15s ease;
}
.game[data-game="slot-sands"] .game-info summary:hover{ filter: brightness(1.1); }
.game[data-game="slot-sands"] .game-info summary::after{ color: var(--bd-lapis-dark); }
.game[data-game="slot-sands"] .game-info details[open] > summary{ margin-bottom: 8px; }
.game[data-game="slot-sands"] .rules-body{
  padding: 4px 26px 6px;
  color: var(--bd-ivory);
  font-size: 14px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}
.game[data-game="slot-sands"] .rules-list{ list-style: none; padding-left: 4px; }
.game[data-game="slot-sands"] .rules-list li{ position: relative; padding-left: 24px; }
.game[data-game="slot-sands"] .rules-list li::before{
  content: '';
  position: absolute;
  left: 2px; top: 0.15em;
  width: 12px; height: 16px;
  background: var(--bd-ankh) center / contain no-repeat;
}
.game[data-game="slot-sands"] .paytable{ gap: 14px; padding: 6px 18px 4px; }
.game[data-game="slot-sands"] .paytable-card{
  min-width: 112px;
  padding: 10px 12px 12px;
  border: 2px solid var(--bd-gold);
  border-radius: 10px;
  background: radial-gradient(100% 70% at 50% 0%, rgba(255, 180, 80, 0.16), transparent 70%), var(--bd-grain), linear-gradient(180deg, #1c1308, var(--bd-stone-deep));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--bd-stone-deep);
}
.game[data-game="slot-sands"] .paytable-card:hover{ box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--bd-stone-deep), 0 0 16px rgba(63, 116, 224, 0.55); }
.game[data-game="slot-sands"] .paytable-icon{ width: 60px; height: 60px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55)); }
.game[data-game="slot-sands"] .paytable-amt{ color: #cdb48a; }
.game[data-game="slot-sands"] .paytable-amt b{ color: var(--bd-gold-light); font-weight: 800; text-shadow: 0 1px 0 #000; }
.game[data-game="slot-sands"] :is(.paytable-rule, .paytable-note){ color: var(--bd-ivory); }
.game[data-game="slot-sands"] .paytable-rule{ width: 100%; }
.game[data-game="slot-sands"] .paytable-rule b{ color: var(--bd-gold-light); }

/* the mobile dock (≤1080px): a tomb slab with the lapis band and the scarab, SPIN as the gold plaque */
.mobile-dock[data-game="slot-sands"]{
  border-top: 4px solid var(--bd-gold);
  background: var(--bd-band) top / 100% 6px no-repeat, var(--bd-tomb);
  box-shadow: inset 0 1px 0 var(--bd-gold-light), 0 0 0 2px var(--bd-stone-deep), 0 -14px 34px rgba(0, 0, 0, 0.55);
  padding-top: 20px;
}
.mobile-dock[data-game="slot-sands"]::before{
  content: '';
  position: absolute;
  left: 50%; top: -20px;
  width: 100px; height: 34px;
  transform: translateX(-50%);
  pointer-events: none;
  background: var(--bd-scarab) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
}
.mobile-dock[data-game="slot-sands"] .spin-block{ padding: 0; background: none; }
.mobile-dock[data-game="slot-sands"] .spin-img-btn{
  color: var(--bd-stone-deep);
  font-family: var(--bd-serif);
  border: 3px solid var(--bd-gold-dark);
  border-radius: 999px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.18em;
  background:
    linear-gradient(90deg, var(--bd-lapis) 0 26px, transparent 26px calc(100% - 26px), var(--bd-lapis) calc(100% - 26px)),
    var(--bd-goldleaf) !important;
  box-shadow: inset 0 0 0 2px var(--bd-gold-light), 0 0 0 2px var(--bd-stone-deep), 0 4px 0 var(--bd-stone-deep), 0 8px 16px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mobile-dock[data-game="slot-sands"] .spin-img-btn:hover:not(:disabled),
.mobile-dock[data-game="slot-sands"] .spin-img-btn:active:not(:disabled){
  color: var(--bd-stone-deep);
  background:
    linear-gradient(90deg, var(--bd-lapis-light) 0 26px, transparent 26px calc(100% - 26px), var(--bd-lapis-light) calc(100% - 26px)),
    linear-gradient(180deg, #fff0b8, #ecc060 50%, #b08030) !important;
}
.mobile-dock[data-game="slot-sands"] .spin-img-btn:active:not(:disabled){ transform: translateY(2px); }
.mobile-dock[data-game="slot-sands"] .spin-img-btn:disabled{
  color: #6a5430;
  background: linear-gradient(180deg, #8a7040, #5a4620) !important;
  filter: saturate(0.6);
}

/* ── Fruit Classic: an 80s Vegas sign — midnight-blue panels framed in neon tubes (hot pink outside,
   cyan inside), chrome lettering like the logo's, a cherry pair on top, gold coins in the corners.
   The SPIN plaque is a red jewel in gold, so the chosen states burn red-gold. Deck controls and their
   dock twins share one rule through :is(). ── */
.game[data-game="slot-fruits"],
.mobile-dock[data-game="slot-fruits"]{
  --fc-pink: #ff3fb4;
  --fc-pink-soft: rgba(255, 63, 180, 0.55);
  --fc-cyan: #5ef0ff;
  --fc-cyan-soft: rgba(94, 240, 255, 0.5);
  --fc-night: #0a0c2a;
  --fc-night-deep: #05061a;
  --fc-blue: #1a2a7a;
  --fc-red: #d81a2c;
  --fc-red-dark: #7a0612;
  --fc-gold: #ffcc3a;
  --fc-gold-dark: #a8700e;
  --fc-chrome: linear-gradient(180deg, #ffffff 0%, #dce8ff 30%, #7a8ab8 50%, #e8f0ff 55%, #ffffff 75%, #a8b8e0 100%);
  --fc-grid: linear-gradient(rgba(94, 240, 255, 0.07) 1px, transparent 1px) 0 0 / 100% 18px,
    linear-gradient(90deg, rgba(255, 63, 180, 0.06) 1px, transparent 1px) 0 0 / 18px 100%;
  --fc-panel: radial-gradient(120% 80% at 50% 0%, rgba(94, 120, 255, 0.28), transparent 60%), var(--fc-grid),
    linear-gradient(180deg, #121650, #0a0c2a 60%, #05061a);
  --fc-ruby: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 45%), radial-gradient(120% 120% at 50% 20%, #ff4a5a, #d81a2c 55%, #7a0612);
  --fc-cherries: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 32'%3E%3Cdefs%3E%3CradialGradient id='c' cx='.35' cy='.3'%3E%3Cstop offset='0' stop-color='%23ffc0c8'/%3E%3Cstop offset='.35' stop-color='%23f0283c'/%3E%3Cstop offset='1' stop-color='%23700010'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M14 20 C16 10 22 4 28 2 M30 20 C29 12 28 6 28 2' fill='none' stroke='%232a6a14' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M28 2 C33 0 39 2 41 6 C36 7 31 6 28 2 Z' fill='%234ec02a' stroke='%231e5a0a' stroke-width='1'/%3E%3Ccircle cx='13' cy='23' r='8' fill='url(%23c)' stroke='%235a0010' stroke-width='1'/%3E%3Ccircle cx='31' cy='23' r='8' fill='url(%23c)' stroke='%235a0010' stroke-width='1'/%3E%3C/svg%3E");
  --fc-coin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.35' cy='.3'%3E%3Cstop offset='0' stop-color='%23fff6c0'/%3E%3Cstop offset='.5' stop-color='%23ffcc3a'/%3E%3Cstop offset='1' stop-color='%23a8700e'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='8' cy='8' r='7' fill='url(%23g)' stroke='%236a4406' stroke-width='.8'/%3E%3Ccircle cx='8' cy='8' r='4.4' fill='none' stroke='%23a8700e' stroke-width='.8'/%3E%3Ctext x='8' y='10.6' font-size='7' font-weight='bold' text-anchor='middle' fill='%236a4406' font-family='Arial'%3E7%3C/text%3E%3C/svg%3E");
}
.game[data-game="slot-fruits"] .sidebar,
.game[data-game="slot-fruits"] .game-info,
.mobile-dock[data-game="slot-fruits"]{
  --text: #eef4ff;
  --muted: #a8b6e8;
  --border: rgba(94, 240, 255, 0.45);
  --accent: #ffcc3a;
  --accent2: #5ef0ff;
  --panel: #0a0c2a;
  --panel2: #121650;
}

/* the page plate: midnight glass with a faint neon edge */
.view:has(> .game[data-game="slot-fruits"]){
  background: radial-gradient(80% 40% at 50% 0%, rgba(255, 63, 180, 0.1), transparent 70%), linear-gradient(180deg, rgba(10, 12, 42, 0.94), rgba(5, 6, 26, 0.96));
  border-color: rgba(255, 63, 180, 0.4);
  box-shadow: 0 0 0 1px rgba(94, 240, 255, 0.2), 0 0 30px rgba(255, 63, 180, 0.12), 0 26px 70px rgba(0, 0, 0, 0.55);
}
.game[data-game="slot-fruits"] .game-crumb,
.game[data-game="slot-fruits"] .game-crumb a{ color: var(--muted); }
.game[data-game="slot-fruits"] .game-crumb .cur{ color: var(--fc-cyan); font-weight: 700; text-shadow: 0 0 8px var(--fc-cyan-soft); }

/* the field: neon tubes, pink outside, cyan inside */
.game[data-game="slot-fruits"] .stage.board{
  border: 3px solid var(--fc-pink);
  border-radius: 22px;
  background: var(--fc-panel);
  box-shadow: inset 0 0 0 2px var(--fc-cyan), inset 0 0 26px rgba(94, 240, 255, 0.25), 0 0 18px var(--fc-pink-soft), 0 0 40px rgba(255, 63, 180, 0.25), 0 12px 30px rgba(0, 0, 0, 0.5);
}

/* every panel is midnight blue framed in two neon tubes */
.game[data-game="slot-fruits"] .sidebar .panel,
.game[data-game="slot-fruits"] .game-info > details{
  position: relative;
  margin-top: 12px;
  padding-top: 24px;
  padding-bottom: 24px;
  border: 3px solid var(--fc-pink);
  border-radius: 18px;
  overflow: visible;
  background: var(--fc-panel);
  box-shadow:
    inset 0 0 0 2px var(--fc-night-deep),
    inset 0 0 0 4px var(--fc-cyan),
    inset 0 0 18px rgba(94, 240, 255, 0.22),
    0 0 14px var(--fc-pink-soft),
    0 10px 24px rgba(0, 0, 0, 0.5);
}
/* a pair of cherries hanging over the middle of the top rim, like the logo's */
.game[data-game="slot-fruits"] .sidebar .panel::before,
.game[data-game="slot-fruits"] .game-info > details::before{
  content: '';
  position: absolute;
  left: 50%; top: -18px;
  width: 44px; height: 32px;
  transform: translateX(-50%);
  pointer-events: none;
  background: var(--fc-cherries) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 6px rgba(255, 63, 180, 0.4));
}
/* gold coins in the bottom corners */
.game[data-game="slot-fruits"] .sidebar .panel::after,
.game[data-game="slot-fruits"] .game-info > details::after{
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 6px;
  height: 16px;
  pointer-events: none;
  background: var(--fc-coin) left center / 16px 16px no-repeat, var(--fc-coin) right center / 16px 16px no-repeat;
}
/* headings: chrome letters with a pink neon halo */
.game[data-game="slot-fruits"] .sidebar .panel h4,
.game[data-game="slot-fruits"] .rules-h{
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* solid, not a clipped chrome gradient: the gradient washed out on the dark panel */
  color: #eaf6ff;
  text-shadow: 0 1px 0 #1a2a7a, 0 0 6px rgba(94, 240, 255, 0.6), 0 0 14px rgba(255, 63, 180, 0.7);
}

/* inset black glass: the stake plaque, the segment trays, the run box */
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) :is(.stake-value, .auto-seg, .auto-run){
  border: 2px solid var(--fc-cyan);
  background: linear-gradient(180deg, #030414, var(--fc-night-deep));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), 0 0 8px var(--fc-cyan-soft);
}
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) .stake-num{
  color: var(--fc-gold);
  text-shadow: 0 0 8px rgba(255, 204, 58, 0.8), 0 0 18px rgba(255, 140, 0, 0.4);
}
/* − and +: chrome buttons */
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) .step-btn{
  border: 2px solid var(--fc-pink);
  border-radius: 50%;
  aspect-ratio: 1;
  height: auto;
  color: var(--fc-blue);
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 1px 0 #fff;
  background: radial-gradient(circle at 35% 25%, #fff 0%, #dce8ff 30%, #8a9ac8 65%, #4a5a90 100%);
  box-shadow: 0 0 10px var(--fc-pink-soft), 0 4px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease, filter 0.15s ease;
}
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) .step-btn:hover:not(:disabled){ filter: brightness(1.1); border-color: var(--fc-cyan); }
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) .step-btn:active:not(:disabled){ transform: scale(0.94); }
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) .step-btn:disabled{ filter: grayscale(0.8) brightness(0.55); opacity: 0.6; box-shadow: none; }

/* the stake slider: a neon tube, gold where it has filled, a coin for the thumb */
.game[data-game="slot-fruits"] .sidebar .ladder::-webkit-slider-runnable-track{
  height: 6px;
  background: linear-gradient(90deg, var(--fc-pink), var(--fc-gold) var(--fill, 0%), var(--fc-night-deep) var(--fill, 0%));
  box-shadow: 0 0 0 1px var(--fc-cyan), 0 0 8px var(--fc-cyan-soft);
}
.game[data-game="slot-fruits"] .sidebar .ladder::-webkit-slider-thumb{
  width: 24px; height: 24px; margin-top: -9px;
  background: var(--fc-coin) center / contain no-repeat;
  box-shadow: 0 0 8px rgba(255, 204, 58, 0.7);
}
.game[data-game="slot-fruits"] .sidebar .ladder::-moz-range-track{ height: 6px; background: var(--fc-night-deep); }
.game[data-game="slot-fruits"] .sidebar .ladder::-moz-range-progress{ height: 6px; background: var(--fc-gold); }
.game[data-game="slot-fruits"] .sidebar .ladder::-moz-range-thumb{ width: 24px; height: 24px; background: var(--fc-coin) center / contain no-repeat; box-shadow: none; }
.game[data-game="slot-fruits"] .sidebar .ladder-ticks i.on{ background: var(--fc-gold); }

/* chips and options: dark glass with a cyan neon edge; the chosen one is the red jewel in gold, like SPIN */
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) :is(.chip, .auto-opt span){
  color: var(--fc-cyan);
  font-weight: 800;
  border: 2px solid var(--fc-cyan);
  border-radius: 10px;
  background: linear-gradient(180deg, #161a5a, var(--fc-night-deep));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 0 8px rgba(94, 240, 255, 0.25), 0 0 8px var(--fc-cyan-soft);
  text-shadow: 0 0 6px var(--fc-cyan-soft);
}
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) :is(.chip:hover:not(:disabled), .auto-opt:hover span){
  color: #fff;
  border-color: var(--fc-pink);
  box-shadow: inset 0 0 8px rgba(255, 63, 180, 0.3), 0 0 10px var(--fc-pink-soft);
}
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) :is(.chip.active, .auto-opt.on span){
  color: var(--fc-gold);
  border-color: var(--fc-gold);
  background: var(--fc-ruby);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 180, 0.4), 0 0 12px rgba(216, 26, 44, 0.6);
  text-shadow: 0 1px 0 var(--fc-red-dark), 0 0 6px rgba(255, 204, 58, 0.6);
}
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) .chip:disabled{ filter: grayscale(0.8) brightness(0.55); opacity: 0.55; box-shadow: none; }
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) .auto-seg-btn{ color: var(--muted); }
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) .auto-seg-btn.on{
  color: var(--fc-gold);
  background: var(--fc-ruby);
  box-shadow: inset 0 0 0 1px var(--fc-gold), 0 0 10px rgba(216, 26, 44, 0.5);
}

/* switches: a dark tube, a coin that slides onto pink neon */
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) .sw{
  border: 2px solid var(--fc-cyan);
  background: var(--fc-night-deep);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 6px var(--fc-cyan-soft);
}
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) .sw i{ top: 2px; background: var(--fc-coin) center / contain no-repeat; }
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) .sw:has(input:checked){
  border-color: var(--fc-pink);
  background: linear-gradient(180deg, #ff7ac8, #c0187a);
  box-shadow: 0 0 10px var(--fc-pink-soft);
}
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) .auto-amt input{
  border: 2px solid var(--fc-cyan);
  background: var(--fc-night-deep);
  color: var(--fc-gold);
}
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) .auto-cond{ border-top: 1px solid rgba(94, 240, 255, 0.3); }
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) :is(.auto-cond-row, .auto-field-label, .auto-sum, .auto-note){ color: #c8d4f4; }
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) .bar{ background: var(--fc-night-deep); }
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) .bar i{ background: linear-gradient(90deg, var(--fc-pink), var(--fc-gold)); }

/* the autoplay start: the red jewel plaque in gold, like the SPIN button */
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) .auto-start{
  color: var(--fc-gold);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 3px solid var(--fc-gold);
  border-radius: 999px;
  background: var(--fc-ruby);
  box-shadow: inset 0 0 0 1px #fff2b8, inset 0 0 0 3px var(--fc-gold-dark), 0 0 12px rgba(216, 26, 44, 0.5), 0 6px 14px rgba(0, 0, 0, 0.5);
  text-shadow: 0 2px 0 var(--fc-red-dark), 0 0 8px rgba(255, 204, 58, 0.5);
}
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) .auto-start::before,
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) .auto-start::after{ display: none; }
:is(.game[data-game="slot-fruits"] .sidebar, .mobile-dock[data-game="slot-fruits"]) .auto-start:hover:not(:disabled){ filter: brightness(1.12); color: #fff2b8; }

/* the SPIN jewel stands in a pink neon glow */
.game[data-game="slot-fruits"] .sidebar .spin-block{
  padding: 6px 0 2px;
  background: radial-gradient(60% 55% at 50% 40%, rgba(255, 63, 180, 0.28), rgba(94, 240, 255, 0.06) 55%, transparent 72%);
}

/* history: wins gold neon, losses dark glass */
.game[data-game="slot-fruits"] .hist-pill{
  border: 1px solid rgba(94, 240, 255, 0.5);
  background: var(--fc-night-deep);
  color: #7a8ac0;
}
.game[data-game="slot-fruits"] .hist-pill.win{
  color: var(--fc-gold);
  border-color: var(--fc-gold);
  background: var(--fc-ruby);
}

/* payouts, history and rules at the foot of the page */
.game[data-game="slot-fruits"] .game-info{ gap: 30px; margin-top: 40px; }
.game[data-game="slot-fruits"] .game-info > details{ padding-top: 18px; }
.game[data-game="slot-fruits"] .game-info > details::after{ left: 16px; right: 16px; }
/* each heading is a small red jewel plaque in gold */
.game[data-game="slot-fruits"] .game-info summary{
  width: max-content;
  margin: 0 auto;
  padding: 9px 28px;
  border: 3px solid var(--fc-gold);
  border-radius: 999px;
  color: var(--fc-gold);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.16em;
  background: var(--fc-ruby);
  box-shadow: inset 0 0 0 1px #fff2b8, inset 0 0 0 3px var(--fc-gold-dark), 0 0 12px rgba(216, 26, 44, 0.45), 0 6px 12px rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 0 var(--fc-red-dark);
  transition: filter 0.15s ease;
}
.game[data-game="slot-fruits"] .game-info summary:hover{ filter: brightness(1.12); color: #fff2b8; }
.game[data-game="slot-fruits"] .game-info summary::after{ color: #fff2b8; }
.game[data-game="slot-fruits"] .game-info details[open] > summary{ margin-bottom: 8px; }
.game[data-game="slot-fruits"] .rules-body{
  padding: 4px 26px 6px;
  color: #e4ecff;
  font-size: 14px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}
.game[data-game="slot-fruits"] .rules-list{ list-style: none; padding-left: 4px; }
.game[data-game="slot-fruits"] .rules-list li{ position: relative; padding-left: 26px; }
.game[data-game="slot-fruits"] .rules-list li::before{
  content: '';
  position: absolute;
  left: 0; top: 0.1em;
  width: 18px; height: 14px;
  background: var(--fc-cherries) center / contain no-repeat;
}
.game[data-game="slot-fruits"] .paytable{ gap: 14px; padding: 6px 18px 4px; }
.game[data-game="slot-fruits"] .paytable-card{
  min-width: 112px;
  padding: 10px 12px 12px;
  border: 2px solid var(--fc-cyan);
  border-radius: 14px;
  background: radial-gradient(100% 70% at 50% 0%, rgba(94, 120, 255, 0.25), transparent 70%), linear-gradient(180deg, #121650, var(--fc-night-deep));
  box-shadow: inset 0 0 10px rgba(94, 240, 255, 0.15), 0 0 8px var(--fc-cyan-soft);
}
.game[data-game="slot-fruits"] .paytable-card:hover{ border-color: var(--fc-pink); box-shadow: 0 0 16px var(--fc-pink-soft); }
.game[data-game="slot-fruits"] .paytable-icon{ width: 60px; height: 60px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5)); }
.game[data-game="slot-fruits"] .paytable-amt{ color: #a8b6e8; }
.game[data-game="slot-fruits"] .paytable-amt b{ color: var(--fc-gold); font-weight: 800; text-shadow: 0 0 6px rgba(255, 204, 58, 0.5); }
.game[data-game="slot-fruits"] :is(.paytable-rule, .paytable-note){ color: #e4ecff; }
.game[data-game="slot-fruits"] .paytable-rule{ width: 100%; }
.game[data-game="slot-fruits"] .paytable-rule b{ color: var(--fc-gold); }

/* the mobile dock (≤1080px): midnight glass under a pink neon tube with the cherries, SPIN as the red jewel */
.mobile-dock[data-game="slot-fruits"]{
  border-top: 3px solid var(--fc-pink);
  background: var(--fc-panel);
  box-shadow: inset 0 2px 0 var(--fc-cyan), 0 -6px 20px rgba(255, 63, 180, 0.35), 0 -14px 34px rgba(0, 0, 0, 0.55);
  padding-top: 18px;
}
.mobile-dock[data-game="slot-fruits"]::before{
  content: '';
  position: absolute;
  left: 50%; top: -20px;
  width: 48px; height: 35px;
  transform: translateX(-50%);
  pointer-events: none;
  background: var(--fc-cherries) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}
.mobile-dock[data-game="slot-fruits"] .spin-block{ padding: 0; background: none; }
.mobile-dock[data-game="slot-fruits"] .spin-img-btn{
  color: var(--fc-gold);
  border: 3px solid var(--fc-gold);
  border-radius: 999px;
  font-size: 22px;
  letter-spacing: 0.14em;
  background: var(--fc-ruby) !important;
  box-shadow: inset 0 0 0 1px #fff2b8, inset 0 0 0 3px var(--fc-gold-dark), 0 0 14px rgba(216, 26, 44, 0.55), 0 6px 14px rgba(0, 0, 0, 0.5);
  text-shadow: 0 2px 0 var(--fc-red-dark), 0 0 10px rgba(255, 204, 58, 0.6);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mobile-dock[data-game="slot-fruits"] .spin-img-btn:hover:not(:disabled),
.mobile-dock[data-game="slot-fruits"] .spin-img-btn:active:not(:disabled){
  color: #fff2b8;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 45%), radial-gradient(120% 120% at 50% 20%, #ff6a78, #e8283a 55%, #8a0a18) !important;
}
.mobile-dock[data-game="slot-fruits"] .spin-img-btn:active:not(:disabled){ transform: translateY(2px); }
.mobile-dock[data-game="slot-fruits"] .spin-img-btn:disabled{
  color: #c08080;
  background: linear-gradient(180deg, #5a0a14, #2a0408) !important;
  filter: saturate(0.6);
}

/* ── Neon Gems: faceted black obsidian in a gold setting, edged in violet and blue neon, a cut amethyst
   in gold on top (as on the SPIN plaque), a ruby and an emerald in the corners, violet crystal lettering.
   Deck controls and their dock twins share one rule through :is(). ── */
.game[data-game="slot-gems"],
.mobile-dock[data-game="slot-gems"]{
  --ng-violet: #b04cff;
  --ng-violet-soft: rgba(176, 76, 255, 0.55);
  --ng-blue: #3aa0ff;
  --ng-blue-soft: rgba(58, 160, 255, 0.5);
  --ng-obsidian: #0c0718;
  --ng-obsidian-deep: #05030c;
  --ng-gold: #e8b44a;
  --ng-gold-light: #ffe49a;
  --ng-gold-dark: #8a5e14;
  --ng-pink: #ff6ad5;
  --ng-facets: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 25%, transparent 25% 50%, rgba(255, 255, 255, 0.03) 50% 75%, transparent 75%) 0 0 / 48px 48px,
    linear-gradient(45deg, rgba(176, 76, 255, 0.06) 0 25%, transparent 25% 50%, rgba(58, 160, 255, 0.05) 50% 75%, transparent 75%) 0 0 / 48px 48px;
  --ng-panel: radial-gradient(120% 80% at 50% 0%, rgba(176, 76, 255, 0.3), transparent 60%), var(--ng-facets),
    linear-gradient(180deg, #1a0e36, #0c0718 60%, #05030c);
  --ng-amethyst: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 45%), radial-gradient(120% 120% at 50% 20%, #d68aff, #9a2ee8 50%, #4a0a8a);
  --ng-gilt: linear-gradient(180deg, #fff1b8, #e8b44a 50%, #a8701e);
  --ng-crest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.5' stop-color='%23e8b44a'/%3E%3Cstop offset='1' stop-color='%238a5e14'/%3E%3C/linearGradient%3E%3ClinearGradient id='v' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0c8ff'/%3E%3Cstop offset='.5' stop-color='%23a040f0'/%3E%3Cstop offset='1' stop-color='%23400a80'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 22 C12 16 20 18 24 22 M68 22 C60 16 52 18 48 22' fill='none' stroke='url(%23g)' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='22' r='3' fill='%23e0203c' stroke='%235a3a08' stroke-width='.8'/%3E%3Ccircle cx='62' cy='22' r='3' fill='%2320c050' stroke='%235a3a08' stroke-width='.8'/%3E%3Cpath d='M36 1 L50 15 L36 29 L22 15 Z' fill='url(%23g)' stroke='%235a3a08' stroke-width='1'/%3E%3Cpath d='M36 5 L46 15 L36 25 L26 15 Z' fill='url(%23v)'/%3E%3Cpath d='M36 5 L41 10 L36 15 L31 10 Z' fill='%23fff' opacity='.45'/%3E%3C/svg%3E");
  --ng-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0 L14 7 L7 14 L0 7 Z' fill='%23e0203c' stroke='%23e8b44a' stroke-width='1.2'/%3E%3Cpath d='M7 2.5 L10 7 L7 7 Z' fill='%23fff' opacity='.5'/%3E%3C/svg%3E");
  --ng-corner2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0 L14 7 L7 14 L0 7 Z' fill='%2320c050' stroke='%23e8b44a' stroke-width='1.2'/%3E%3Cpath d='M7 2.5 L10 7 L7 7 Z' fill='%23fff' opacity='.5'/%3E%3C/svg%3E");
}
.game[data-game="slot-gems"] .sidebar,
.game[data-game="slot-gems"] .game-info,
.mobile-dock[data-game="slot-gems"]{
  --text: #f2eaff;
  --muted: #b8a8e0;
  --border: rgba(176, 76, 255, 0.5);
  --accent: #ffe49a;
  --accent2: #3aa0ff;
  --panel: #0c0718;
  --panel2: #1a0e36;
}

/* the page plate: obsidian glass with a violet glow */
.view:has(> .game[data-game="slot-gems"]){
  background: radial-gradient(80% 40% at 50% 0%, rgba(176, 76, 255, 0.12), transparent 70%), linear-gradient(180deg, rgba(12, 7, 24, 0.94), rgba(5, 3, 12, 0.96));
  border-color: rgba(176, 76, 255, 0.4);
  box-shadow: 0 0 0 1px rgba(58, 160, 255, 0.2), 0 0 30px rgba(176, 76, 255, 0.15), 0 26px 70px rgba(0, 0, 0, 0.55);
}
.game[data-game="slot-gems"] .game-crumb,
.game[data-game="slot-gems"] .game-crumb a{ color: var(--muted); }
.game[data-game="slot-gems"] .game-crumb .cur{ color: var(--ng-gold-light); font-weight: 700; }

/* the field: a gold setting edged in violet and blue neon */
.game[data-game="slot-gems"] .stage.board{
  border: 3px solid var(--ng-gold);
  border-radius: 18px;
  box-shadow: inset 0 0 0 2px var(--ng-violet), inset 0 0 30px rgba(176, 76, 255, 0.3), 0 0 0 2px var(--ng-blue), 0 0 20px var(--ng-violet-soft), 0 0 44px var(--ng-blue-soft), 0 12px 30px rgba(0, 0, 0, 0.5);
}
@media (min-width: 1081px){
  .game[data-game="slot-gems"] .stage.board{ background: var(--ng-panel); }
}

/* every panel is faceted obsidian in a gold setting with a violet neon edge */
.game[data-game="slot-gems"] .sidebar .panel,
.game[data-game="slot-gems"] .game-info > details{
  position: relative;
  margin-top: 12px;
  padding-top: 24px;
  padding-bottom: 24px;
  border: 3px solid var(--ng-gold);
  border-radius: 16px;
  overflow: visible;
  background: var(--ng-panel);
  box-shadow:
    inset 0 0 0 1px var(--ng-gold-light),
    inset 0 0 0 3px var(--ng-obsidian-deep),
    inset 0 0 0 4px var(--ng-violet),
    inset 0 0 22px rgba(176, 76, 255, 0.28),
    0 0 0 2px var(--ng-blue),
    0 0 14px var(--ng-blue-soft),
    0 10px 24px rgba(0, 0, 0, 0.5);
}
/* the cut amethyst in gold on the middle of the top rim, with a ruby and an emerald on its scrolls */
.game[data-game="slot-gems"] .sidebar .panel::before,
.game[data-game="slot-gems"] .game-info > details::before{
  content: '';
  position: absolute;
  left: 50%; top: -16px;
  width: 72px; height: 30px;
  transform: translateX(-50%);
  pointer-events: none;
  background: var(--ng-crest) center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(176, 76, 255, 0.8)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}
/* a ruby and an emerald in the bottom corners */
.game[data-game="slot-gems"] .sidebar .panel::after,
.game[data-game="slot-gems"] .game-info > details::after{
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 6px;
  height: 14px;
  pointer-events: none;
  background: var(--ng-corner) left center / 14px 14px no-repeat, var(--ng-corner2) right center / 14px 14px no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
}
/* headings: violet crystal lettering with a gold rim, like the logo's NEON */
.game[data-game="slot-gems"] .sidebar .panel h4,
.game[data-game="slot-gems"] .rules-h{
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #e6c8ff;
  text-shadow: 0 1px 0 var(--ng-gold-dark), 0 0 1px var(--ng-gold), 0 0 8px rgba(176, 76, 255, 0.9), 0 0 16px rgba(176, 76, 255, 0.5);
}

/* inset black glass: the stake plaque, the segment trays, the run box */
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) :is(.stake-value, .auto-seg, .auto-run){
  border: 2px solid var(--ng-blue);
  background: linear-gradient(180deg, #030208, var(--ng-obsidian-deep));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), 0 0 8px var(--ng-blue-soft);
}
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .stake-num{
  color: var(--ng-gold-light);
  text-shadow: 0 0 8px rgba(255, 228, 154, 0.7);
}
/* − and +: cut gems, sapphire and amethyst */
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .step-btn{
  border: 2px solid var(--ng-gold);
  border-radius: 50%;
  aspect-ratio: 1;
  height: auto;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
  background: conic-gradient(from 45deg, #6ac0ff, #1a5ac8, #3a90ff, #0a3a90, #6ac0ff);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.15), 0 0 12px var(--ng-blue-soft), 0 4px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease, filter 0.15s ease;
}
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .stake-value + .step-btn{
  background: conic-gradient(from 45deg, #e0a0ff, #7a1ac8, #c060ff, #4a0a90, #e0a0ff);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.15), 0 0 12px var(--ng-violet-soft), 0 4px 8px rgba(0, 0, 0, 0.5);
}
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .step-btn:hover:not(:disabled){ filter: brightness(1.15); border-color: var(--ng-gold-light); }
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .step-btn:active:not(:disabled){ transform: scale(0.94) rotate(20deg); }
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .step-btn:disabled{ filter: grayscale(0.85) brightness(0.55); opacity: 0.6; box-shadow: none; }

/* the stake slider: a neon rail, violet-to-gold where it has filled, a cut gem for the thumb */
.game[data-game="slot-gems"] .sidebar .ladder::-webkit-slider-runnable-track{
  height: 6px;
  background: linear-gradient(90deg, var(--ng-violet), var(--ng-pink), var(--ng-gold) var(--fill, 0%), var(--ng-obsidian-deep) var(--fill, 0%));
  box-shadow: 0 0 0 1px var(--ng-blue), 0 0 8px var(--ng-blue-soft);
}
.game[data-game="slot-gems"] .sidebar .ladder::-webkit-slider-thumb{
  width: 22px; height: 22px; margin-top: -8px;
  border-radius: 3px;
  transform: rotate(45deg);
  background: var(--ng-amethyst);
  box-shadow: 0 0 0 2px var(--ng-gold), 0 0 10px var(--ng-violet-soft);
}
.game[data-game="slot-gems"] .sidebar .ladder::-moz-range-track{ height: 6px; background: var(--ng-obsidian-deep); }
.game[data-game="slot-gems"] .sidebar .ladder::-moz-range-progress{ height: 6px; background: var(--ng-violet); }
.game[data-game="slot-gems"] .sidebar .ladder::-moz-range-thumb{ width: 20px; height: 20px; border-radius: 3px; transform: rotate(45deg); background: var(--ng-amethyst); box-shadow: 0 0 0 2px var(--ng-gold); }
.game[data-game="slot-gems"] .sidebar .ladder-ticks i.on{ background: var(--ng-violet); }

/* chips and options: obsidian tiles with a blue neon edge; the chosen one is an amethyst in gold */
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) :is(.chip, .auto-opt span){
  color: #cfe6ff;
  font-weight: 800;
  border: 2px solid var(--ng-blue);
  border-radius: 10px;
  background: linear-gradient(180deg, #1a1440, var(--ng-obsidian-deep));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 0 8px rgba(58, 160, 255, 0.25), 0 0 8px var(--ng-blue-soft);
  text-shadow: 0 0 6px var(--ng-blue-soft);
}
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) :is(.chip:hover:not(:disabled), .auto-opt:hover span){
  color: #fff;
  border-color: var(--ng-violet);
  box-shadow: inset 0 0 8px rgba(176, 76, 255, 0.3), 0 0 10px var(--ng-violet-soft);
}
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) :is(.chip.active, .auto-opt.on span){
  color: #fff;
  border-color: var(--ng-gold);
  background: var(--ng-amethyst);
  box-shadow: inset 0 0 0 1px var(--ng-gold-light), 0 0 14px var(--ng-violet-soft);
  text-shadow: 0 1px 0 #2a0650;
}
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .chip:disabled{ filter: grayscale(0.85) brightness(0.55); opacity: 0.55; box-shadow: none; }
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .auto-seg-btn{ color: var(--muted); }
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .auto-seg-btn.on{
  color: #fff;
  background: var(--ng-amethyst);
  box-shadow: inset 0 0 0 1px var(--ng-gold), 0 0 10px var(--ng-violet-soft);
}

/* switches: a black groove, a gem that slides onto violet neon */
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .sw{
  border: 2px solid var(--ng-blue);
  background: var(--ng-obsidian-deep);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 6px var(--ng-blue-soft);
}
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .sw i{ top: 2px; background: radial-gradient(circle at 35% 30%, #fff, var(--ng-gold) 50%, var(--ng-gold-dark)); }
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .sw:has(input:checked){
  border-color: var(--ng-violet);
  background: linear-gradient(180deg, #d68aff, #7a1ac8);
  box-shadow: 0 0 10px var(--ng-violet-soft);
}
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .auto-amt input{
  border: 2px solid var(--ng-blue);
  background: var(--ng-obsidian-deep);
  color: var(--ng-gold-light);
}
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .auto-cond{ border-top: 1px solid rgba(176, 76, 255, 0.35); }
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) :is(.auto-cond-row, .auto-field-label, .auto-sum, .auto-note){ color: #d0c4f0; }
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .bar{ background: var(--ng-obsidian-deep); }
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .bar i{ background: linear-gradient(90deg, var(--ng-blue), var(--ng-violet), var(--ng-pink)); }

/* the autoplay start: a deep-blue plaque in gold with violet lettering, like SPIN */
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .auto-start{
  color: #f0d4ff;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 3px solid var(--ng-gold);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 45%), radial-gradient(120% 120% at 50% 20%, #3a2a9a, #1a1060 60%, #0a0630);
  box-shadow: inset 0 0 0 1px var(--ng-gold-light), 0 0 0 2px var(--ng-blue), 0 0 16px var(--ng-blue-soft), 0 6px 14px rgba(0, 0, 0, 0.45);
  text-shadow: 0 0 8px rgba(176, 76, 255, 0.9);
}
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .auto-start::before,
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .auto-start::after{ display: none; }
:is(.game[data-game="slot-gems"] .sidebar, .mobile-dock[data-game="slot-gems"]) .auto-start:hover:not(:disabled){ filter: brightness(1.15); color: #fff; }

/* the SPIN plaque stands in a violet-blue glow */
.game[data-game="slot-gems"] .sidebar .spin-block{
  padding: 6px 0 2px;
  background: radial-gradient(60% 55% at 50% 40%, rgba(176, 76, 255, 0.3), rgba(58, 160, 255, 0.08) 55%, transparent 72%);
}
/* the multiplier badge beside the board sits on obsidian in gold */
.game[data-game="slot-gems"] .sidebar .slot-mult{
  border: 2px solid var(--ng-gold);
  border-radius: 14px;
  background: var(--ng-panel);
  box-shadow: 0 0 12px var(--ng-violet-soft);
}

/* history: wins amethyst, losses obsidian */
.game[data-game="slot-gems"] .hist-pill{
  border: 1px solid rgba(58, 160, 255, 0.5);
  background: var(--ng-obsidian-deep);
  color: #7a8ac0;
}
.game[data-game="slot-gems"] .hist-pill.win{
  color: #fff;
  border-color: var(--ng-gold);
  background: var(--ng-amethyst);
}

/* payouts, history and rules at the foot of the page */
.game[data-game="slot-gems"] .game-info{ gap: 30px; margin-top: 40px; }
.game[data-game="slot-gems"] .game-info > details{ padding-top: 18px; }
.game[data-game="slot-gems"] .game-info > details::after{ left: 16px; right: 16px; }
.game[data-game="slot-gems"] .game-info summary{
  width: max-content;
  margin: 0 auto;
  padding: 9px 30px;
  border: 3px solid var(--ng-gold);
  border-radius: 999px;
  color: #f0d4ff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.18em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 45%), radial-gradient(120% 120% at 50% 20%, #3a2a9a, #1a1060 60%, #0a0630);
  box-shadow: inset 0 0 0 1px var(--ng-gold-light), 0 0 0 2px var(--ng-blue), 0 0 14px var(--ng-blue-soft), 0 6px 12px rgba(0, 0, 0, 0.45);
  text-shadow: 0 0 8px rgba(176, 76, 255, 0.9);
  transition: filter 0.15s ease;
}
.game[data-game="slot-gems"] .game-info summary:hover{ filter: brightness(1.15); color: #fff; }
.game[data-game="slot-gems"] .game-info summary::after{ color: var(--ng-gold-light); }
.game[data-game="slot-gems"] .game-info details[open] > summary{ margin-bottom: 8px; }
.game[data-game="slot-gems"] .rules-body{
  padding: 4px 26px 6px;
  color: #ece4ff;
  font-size: 14px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}
.game[data-game="slot-gems"] .rules-list{ list-style: none; padding-left: 4px; }
.game[data-game="slot-gems"] .rules-list li{ position: relative; padding-left: 24px; }
.game[data-game="slot-gems"] .rules-list li::before{
  content: '';
  position: absolute;
  left: 2px; top: 0.3em;
  width: 11px; height: 11px;
  transform: rotate(45deg);
  background: var(--ng-amethyst);
  box-shadow: 0 0 0 1.5px var(--ng-gold), 0 0 6px var(--ng-violet-soft);
}
.game[data-game="slot-gems"] .paytable{ gap: 14px; padding: 6px 18px 4px; }
.game[data-game="slot-gems"] .paytable-card{
  min-width: 112px;
  padding: 10px 12px 12px;
  border: 2px solid var(--ng-gold);
  border-radius: 14px;
  background: radial-gradient(100% 70% at 50% 0%, rgba(176, 76, 255, 0.28), transparent 70%), linear-gradient(180deg, #160c30, var(--ng-obsidian-deep));
  box-shadow: inset 0 0 10px rgba(176, 76, 255, 0.18), 0 0 0 1px rgba(58, 160, 255, 0.5);
}
.game[data-game="slot-gems"] .paytable-card:hover{ box-shadow: 0 0 0 1px var(--ng-blue), 0 0 18px var(--ng-violet-soft); }
.game[data-game="slot-gems"] .paytable-icon{ width: 60px; height: 60px; filter: drop-shadow(0 0 6px rgba(176, 76, 255, 0.6)); }
.game[data-game="slot-gems"] .paytable-amt{ color: #b8a8e0; }
.game[data-game="slot-gems"] .paytable-amt b{ color: var(--ng-gold-light); font-weight: 800; text-shadow: 0 0 6px rgba(255, 228, 154, 0.4); }
.game[data-game="slot-gems"] :is(.paytable-rule, .paytable-note){ color: #ece4ff; }
.game[data-game="slot-gems"] .paytable-rule{ width: 100%; }
.game[data-game="slot-gems"] .paytable-rule b{ color: var(--ng-gold-light); }

/* the mobile dock (≤1080px): obsidian under a gold edge with the amethyst crest, SPIN as the deep-blue plaque */
.mobile-dock[data-game="slot-gems"]{
  border-top: 3px solid var(--ng-gold);
  background: var(--ng-panel);
  box-shadow: inset 0 2px 0 var(--ng-violet), 0 -6px 22px var(--ng-violet-soft), 0 -14px 34px rgba(0, 0, 0, 0.55);
  padding-top: 18px;
}
.mobile-dock[data-game="slot-gems"]::before{
  content: '';
  position: absolute;
  left: 50%; top: -17px;
  width: 80px; height: 33px;
  transform: translateX(-50%);
  pointer-events: none;
  background: var(--ng-crest) center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(176, 76, 255, 0.8));
}
.mobile-dock[data-game="slot-gems"] .spin-block{ padding: 0; background: none; }
.mobile-dock[data-game="slot-gems"] .spin-img-btn{
  color: #f0d4ff;
  font-family: Georgia, 'Times New Roman', serif;
  border: 3px solid var(--ng-gold);
  border-radius: 999px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.16em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 45%), radial-gradient(120% 120% at 50% 20%, #3a2a9a, #1a1060 60%, #0a0630) !important;
  box-shadow: inset 0 0 0 1px var(--ng-gold-light), 0 0 0 2px var(--ng-blue), 0 0 18px var(--ng-blue-soft), 0 6px 14px rgba(0, 0, 0, 0.45);
  text-shadow: 0 0 10px rgba(176, 76, 255, 1), 0 0 20px rgba(255, 106, 213, 0.6);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mobile-dock[data-game="slot-gems"] .spin-img-btn:hover:not(:disabled),
.mobile-dock[data-game="slot-gems"] .spin-img-btn:active:not(:disabled){
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%), radial-gradient(120% 120% at 50% 20%, #5040c0, #2a1a8a 60%, #120a48) !important;
}
.mobile-dock[data-game="slot-gems"] .spin-img-btn:active:not(:disabled){ transform: translateY(2px); }
.mobile-dock[data-game="slot-gems"] .spin-img-btn:disabled{
  color: #6a6090;
  background: linear-gradient(180deg, #1a1440, var(--ng-obsidian-deep)) !important;
  filter: saturate(0.6);
}

/* ── Dead or Alive 2: a frontier town at dusk — weathered saloon boards with iron nails, a lasso rope
   with knots and a sheriff's star across the top (the logo's rope), wanted-poster parchment with blood-red
   slab letters for the buttons, a lantern glow. The SPIN button has no art, so it is drawn here as a big
   wanted sign. Deck controls and their dock twins share one rule through :is(). ── */
.game[data-game="slot-frontier"],
.mobile-dock[data-game="slot-frontier"]{
  --df-red: #8a1a1a;
  --df-red-light: #b8282a;
  --df-red-dark: #4a0a0a;
  --df-cream: #efe0c0;
  --df-paper: #e6d2a4;
  --df-paper-dark: #b89a64;
  --df-wood: #4a2e18;
  --df-wood-dark: #2a1a0c;
  --df-wood-deep: #160d05;
  --df-iron: #3a3530;
  --df-lantern: #ffb347;
  /* Google fonts linked in index.html; a browser fetches the files only where they are used */
  --df-slab: 'Alfa Slab One', 'Rockwell', Georgia, serif;
  --df-west: 'Rye', 'Alfa Slab One', Georgia, serif;
  --df-boards: repeating-linear-gradient(180deg, transparent 0 38px, rgba(10, 5, 2, 0.75) 38px 40px, rgba(255, 220, 160, 0.06) 40px 41px),
    repeating-linear-gradient(176deg, rgba(255, 220, 160, 0.035) 0 2px, transparent 2px 9px, rgba(0, 0, 0, 0.08) 9px 10px, transparent 10px 16px),
    linear-gradient(180deg, #4e321a, #3a2412 55%, #24160a);
  --df-poster: radial-gradient(120% 120% at 50% 30%, transparent 55%, rgba(90, 50, 10, 0.35) 100%),
    repeating-linear-gradient(95deg, rgba(120, 80, 30, 0.06) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, #efdcae, #dcc28c 60%, #c8a868);
  --df-rope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Crect y='2' width='40' height='6' rx='3' fill='%23d8c08c'/%3E%3Cg stroke='%238a6a3a' stroke-width='1.6'%3E%3Cpath d='M2 2 L6 8 M8 2 L12 8 M14 2 L18 8 M20 2 L24 8 M26 2 L30 8 M32 2 L36 8 M38 2 L42 8'/%3E%3C/g%3E%3Crect y='2' width='40' height='6' rx='3' fill='none' stroke='%235a3a1a' stroke-width='.8'/%3E%3C/svg%3E");
  --df-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.4' cy='.35'%3E%3Cstop offset='0' stop-color='%23fff4c8'/%3E%3Cstop offset='.5' stop-color='%23d8b060'/%3E%3Cstop offset='1' stop-color='%23866020'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M20 2 L24.5 14 L37 14 L27 22 L31 35 L20 27.5 L9 35 L13 22 L3 14 L15.5 14 Z' fill='url(%23g)' stroke='%234a3008' stroke-width='1.2'/%3E%3Cg fill='url(%23g)' stroke='%234a3008' stroke-width='.8'%3E%3Ccircle cx='20' cy='2.5' r='2.4'/%3E%3Ccircle cx='37' cy='14' r='2.4'/%3E%3Ccircle cx='31' cy='35' r='2.4'/%3E%3Ccircle cx='9' cy='35' r='2.4'/%3E%3Ccircle cx='3' cy='14' r='2.4'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='5.5' fill='none' stroke='%234a3008' stroke-width='1'/%3E%3C/svg%3E");
  --df-nail: radial-gradient(circle at 40% 35%, #9a948a 0 1.5px, #4a4540 2.5px, #1a1814 3.5px, transparent 4px);
}
.game[data-game="slot-frontier"] .sidebar,
.game[data-game="slot-frontier"] .game-info,
.mobile-dock[data-game="slot-frontier"]{
  --text: #efe0c0;
  --muted: #c8ae86;
  --border: rgba(216, 192, 140, 0.4);
  --accent: #efe0c0;
  --accent2: #ffb347;
  --panel: #3a2412;
  --panel2: #4e321a;
}

/* the page plate: dusk glass */
.view:has(> .game[data-game="slot-frontier"]){
  background: linear-gradient(180deg, rgba(22, 16, 14, 0.86), rgba(14, 9, 6, 0.93));
  border-color: rgba(216, 192, 140, 0.35);
  box-shadow: 0 0 0 1px rgba(138, 26, 26, 0.3), 0 26px 70px rgba(0, 0, 0, 0.6);
}
.game[data-game="slot-frontier"] .game-crumb,
.game[data-game="slot-frontier"] .game-crumb a{ color: var(--muted); }
.game[data-game="slot-frontier"] .game-crumb .cur{ color: var(--df-cream); font-weight: 700; }

/* the field: a heavy wooden frame with iron nails at the corners, lantern light inside */
.game[data-game="slot-frontier"] .stage.board{
  border: 6px solid var(--df-wood);
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--df-wood-deep), inset 0 0 40px rgba(255, 179, 71, 0.16), 0 0 0 2px #000, 0 0 26px rgba(255, 179, 71, 0.18), 0 12px 30px rgba(0, 0, 0, 0.6);
}
@media (min-width: 1081px){
  .game[data-game="slot-frontier"] .stage.board{
    background: radial-gradient(90% 70% at 50% 0%, rgba(255, 179, 71, 0.12), transparent 70%), var(--df-boards);
  }
}

/* every panel is a board of weathered planks with iron nails in the corners */
.game[data-game="slot-frontier"] .sidebar .panel,
.game[data-game="slot-frontier"] .game-info > details{
  position: relative;
  margin-top: 14px;
  padding-top: 26px;
  padding-bottom: 24px;
  border: 3px solid var(--df-wood-deep);
  border-radius: 6px;
  overflow: visible;
  background:
    var(--df-nail) 8px 8px / 10px 10px no-repeat,
    var(--df-nail) calc(100% - 8px) 8px / 10px 10px no-repeat,
    var(--df-nail) 8px calc(100% - 8px) / 10px 10px no-repeat,
    var(--df-nail) calc(100% - 8px) calc(100% - 8px) / 10px 10px no-repeat,
    radial-gradient(120% 70% at 50% 0%, rgba(255, 179, 71, 0.12), transparent 60%),
    var(--df-boards);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.18),
    inset 0 -10px 18px rgba(0, 0, 0, 0.35),
    0 0 0 1px #000,
    0 10px 24px rgba(0, 0, 0, 0.55);
}
/* the lasso: a rope across the top rim with a sheriff's star in the middle */
.game[data-game="slot-frontier"] .sidebar .panel::before,
.game[data-game="slot-frontier"] .game-info > details::before{
  content: '';
  position: absolute;
  left: 14px; right: 14px; top: -18px;
  height: 34px;
  pointer-events: none;
  background:
    var(--df-star) center / 34px 34px no-repeat,
    var(--df-rope) left center / 40px 10px repeat-x;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}
/* rope knots at the two ends of the lasso */
.game[data-game="slot-frontier"] .sidebar .panel::after,
.game[data-game="slot-frontier"] .game-info > details::after{
  content: '';
  position: absolute;
  left: 6px; right: 6px; top: -9px;
  height: 16px;
  pointer-events: none;
  --df-knot: radial-gradient(circle at 40% 35%, #f0dcaa 0 20%, #c8a870 45%, #7a5a2a 70%, transparent 72%);
  background: var(--df-knot) left center / 16px 16px no-repeat, var(--df-knot) right center / 16px 16px no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
/* headings: cream slab letters with a blood-red shadow, like the logo */
.game[data-game="slot-frontier"] .sidebar .panel h4,
.game[data-game="slot-frontier"] .rules-h{
  font-family: var(--df-west);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--df-cream);
  text-shadow: 2px 2px 0 var(--df-red), 3px 3px 0 #000;
}

/* inset dark wood: the stake plaque, the segment trays, the run box */
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) :is(.stake-value, .auto-seg, .auto-run){
  border: 2px solid #000;
  background: linear-gradient(180deg, #120a04, var(--df-wood-deep));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 220, 160, 0.15);
}
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) .stake-num{
  font-family: var(--df-slab);
  color: var(--df-cream);
  text-shadow: 2px 2px 0 var(--df-red);
}
/* − and +: sheriff's stars on brass */
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) .step-btn{
  border: 2px solid #000;
  border-radius: 50%;
  aspect-ratio: 1;
  height: auto;
  color: var(--df-red-dark);
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
  background: radial-gradient(circle at 38% 32%, #fff2c0 0%, #d8b060 40%, #9a7228 80%, #5a3e10 100%);
  box-shadow: inset 0 0 0 3px rgba(90, 62, 16, 0.6), 0 3px 0 #000, 0 5px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease, filter 0.15s ease;
}
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) .step-btn:hover:not(:disabled){ filter: brightness(1.1); border-color: #000; }
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) .step-btn:active:not(:disabled){ transform: translateY(2px); }
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) .step-btn:disabled{ filter: grayscale(0.85) brightness(0.6); opacity: 0.6; }

/* the stake slider: a rope, red where it has filled, a sheriff's star for the thumb */
.game[data-game="slot-frontier"] .sidebar .ladder::-webkit-slider-runnable-track{
  height: 8px;
  background: linear-gradient(90deg, rgba(184, 40, 42, 0.85) var(--fill, 0%), transparent var(--fill, 0%)), var(--df-rope) left center / 32px 8px repeat-x;
  box-shadow: 0 0 0 1px #000;
}
.game[data-game="slot-frontier"] .sidebar .ladder::-webkit-slider-thumb{
  width: 28px; height: 28px; margin-top: -10px;
  border-radius: 0;
  background: var(--df-star) center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}
.game[data-game="slot-frontier"] .sidebar .ladder::-moz-range-track{ height: 8px; background: var(--df-paper-dark); }
.game[data-game="slot-frontier"] .sidebar .ladder::-moz-range-progress{ height: 8px; background: var(--df-red-light); }
.game[data-game="slot-frontier"] .sidebar .ladder::-moz-range-thumb{ width: 28px; height: 28px; border-radius: 0; background: var(--df-star) center / contain no-repeat; box-shadow: none; }
.game[data-game="slot-frontier"] .sidebar .ladder-ticks i.on{ background: var(--df-red-light); }

/* chips and options: little wanted-poster scraps with red slab letters; the chosen one is blood red */
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) :is(.chip, .auto-opt span){
  color: var(--df-red);
  font-family: var(--df-slab);
  font-weight: 400;
  border: 2px solid #000;
  border-radius: 3px;
  background: var(--df-poster);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 3px 0 #000, 0 4px 8px rgba(0, 0, 0, 0.45);
  text-shadow: none;
}
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) :is(.chip:hover:not(:disabled), .auto-opt:hover span){
  color: var(--df-red-dark);
  border-color: #000;
  filter: brightness(1.06);
}
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) :is(.chip.active, .auto-opt.on span){
  color: var(--df-cream);
  border-color: #000;
  background: linear-gradient(180deg, var(--df-red-light), var(--df-red) 55%, var(--df-red-dark));
  box-shadow: inset 0 0 0 1px rgba(239, 224, 192, 0.35), 0 3px 0 #000, 0 0 10px rgba(184, 40, 42, 0.45);
  text-shadow: 1px 1px 0 #000;
}
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) .chip:disabled{ filter: grayscale(0.6) brightness(0.6); opacity: 0.6; }
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) .auto-seg-btn{ color: var(--muted); font-family: var(--df-slab); }
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) .auto-seg-btn.on{
  color: var(--df-cream);
  background: linear-gradient(180deg, var(--df-red-light), var(--df-red-dark));
  box-shadow: inset 0 0 0 1px rgba(239, 224, 192, 0.35);
}

/* switches: a dark groove, a star that slides onto red */
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) .sw{
  border: 2px solid #000;
  background: var(--df-wood-deep);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);
}
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) .sw i{ top: 2px; background: radial-gradient(circle at 38% 32%, #fff2c0, #d8b060 45%, #7a5a1e); }
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) .sw:has(input:checked){
  border-color: #000;
  background: linear-gradient(180deg, var(--df-red-light), var(--df-red-dark));
}
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) .auto-amt input{
  border: 2px solid #000;
  background: var(--df-wood-deep);
  color: var(--df-cream);
}
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) .auto-cond{ border-top: 2px dashed rgba(216, 192, 140, 0.3); }
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) :is(.auto-cond-row, .auto-field-label, .auto-sum, .auto-note){ color: #dcc8a4; }
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) .bar{ background: var(--df-wood-deep); }
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) .bar i{ background: linear-gradient(90deg, var(--df-red-dark), var(--df-red-light)); }

/* big signs: the autoplay start and the SPIN button are wanted posters with blood-red slab letters */
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) :is(.auto-start, .spin-block .btn){
  color: var(--df-red);
  font-family: var(--df-west);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 3px solid #000;
  border-radius: 4px;
  background: var(--df-poster);
  box-shadow: inset 0 0 0 4px rgba(184, 154, 100, 0.55), inset 0 0 0 5px rgba(90, 50, 10, 0.5), 0 4px 0 #000, 0 8px 16px rgba(0, 0, 0, 0.5);
  text-shadow: 1px 1px 0 rgba(255, 240, 200, 0.6);
}
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) :is(.auto-start, .spin-block .btn)::before,
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) :is(.auto-start, .spin-block .btn)::after{ display: none; }
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) :is(.auto-start, .spin-block .btn):hover:not(:disabled){ filter: brightness(1.06); color: var(--df-red-light); }
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) .spin-block .btn:active:not(:disabled){ transform: translateY(2px); box-shadow: inset 0 0 0 4px rgba(184, 154, 100, 0.55), 0 2px 0 #000, 0 4px 8px rgba(0, 0, 0, 0.5); }
:is(.game[data-game="slot-frontier"] .sidebar, .mobile-dock[data-game="slot-frontier"]) .spin-block .btn:disabled{ color: #8a6a4a; filter: grayscale(0.4) brightness(0.75); opacity: 1; }
/* the desktop SPIN is the game's own saloon-sign art now; the poster rules above still dress the
   text button the mobile dock shows in its place */
.game[data-game="slot-frontier"] .sidebar .spin-block{
  padding: 6px 0 2px;
  background: radial-gradient(60% 55% at 50% 40%, rgba(255, 179, 71, 0.22), transparent 70%);
}

/* history: wins red, losses dark wood */
.game[data-game="slot-frontier"] .hist-pill{
  border: 1px solid #000;
  background: var(--df-wood-deep);
  color: #9a8466;
}
.game[data-game="slot-frontier"] .hist-pill.win{
  color: var(--df-cream);
  background: linear-gradient(180deg, var(--df-red-light), var(--df-red-dark));
}

/* payouts, history and rules at the foot of the page */
.game[data-game="slot-frontier"] .game-info{ gap: 32px; margin-top: 42px; }
.game[data-game="slot-frontier"] .game-info > details{ padding-top: 22px; }
.game[data-game="slot-frontier"] .game-info > details::before{ left: 24px; right: 24px; }
.game[data-game="slot-frontier"] .game-info > details::after{ left: 14px; right: 14px; }
.game[data-game="slot-frontier"] .game-info summary{
  width: max-content;
  margin: 0 auto;
  padding: 9px 30px;
  border: 3px solid #000;
  border-radius: 4px;
  color: var(--df-red);
  font-family: var(--df-slab);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.18em;
  background: var(--df-poster);
  box-shadow: inset 0 0 0 3px rgba(184, 154, 100, 0.55), 0 4px 0 #000, 0 8px 14px rgba(0, 0, 0, 0.45);
  text-shadow: 1px 1px 0 rgba(255, 240, 200, 0.6);
  transition: filter 0.15s ease;
}
.game[data-game="slot-frontier"] .game-info summary:hover{ filter: brightness(1.06); }
.game[data-game="slot-frontier"] .game-info summary::after{ color: var(--df-red-dark); }
.game[data-game="slot-frontier"] .game-info details[open] > summary{ margin-bottom: 8px; }
.game[data-game="slot-frontier"] .rules-body{
  padding: 4px 26px 6px;
  color: #f0e4cc;
  font-size: 14px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}
.game[data-game="slot-frontier"] .rules-list{ list-style: none; padding-left: 4px; }
.game[data-game="slot-frontier"] .rules-list li{ position: relative; padding-left: 26px; }
.game[data-game="slot-frontier"] .rules-list li::before{
  content: '';
  position: absolute;
  left: 0; top: 0.1em;
  width: 17px; height: 17px;
  background: var(--df-star) center / contain no-repeat;
}
.game[data-game="slot-frontier"] .paytable{ gap: 14px; padding: 6px 18px 4px; }
.game[data-game="slot-frontier"] .paytable-card{
  min-width: 112px;
  padding: 10px 12px 12px;
  border: 2px solid #000;
  border-radius: 4px;
  background: var(--df-poster);
  box-shadow: inset 0 0 0 3px rgba(184, 154, 100, 0.45), 0 3px 0 #000, 0 6px 12px rgba(0, 0, 0, 0.45);
}
.game[data-game="slot-frontier"] .paytable-card:hover{ transform: translateY(-2px) rotate(-1deg); box-shadow: inset 0 0 0 3px rgba(184, 154, 100, 0.45), 0 5px 0 #000, 0 10px 18px rgba(0, 0, 0, 0.5); }
.game[data-game="slot-frontier"] .paytable-icon{ width: 60px; height: 60px; border: 2px solid #3a2410; filter: sepia(0.15); }
.game[data-game="slot-frontier"] .paytable-amt{ color: #5a3a1a; }
.game[data-game="slot-frontier"] .paytable-amt b{ color: var(--df-red); font-family: var(--df-slab); font-weight: 400; }
.game[data-game="slot-frontier"] .paytable-note{ color: #3a2410; }
.game[data-game="slot-frontier"] .paytable-rule{ width: 100%; color: #f0e4cc; }
.game[data-game="slot-frontier"] .paytable-rule b{ color: var(--df-lantern); }

/* the mobile dock (≤1080px): a plank board under the lasso; the glass SPIN text button becomes the wanted poster */
.mobile-dock[data-game="slot-frontier"]{
  border-top: 3px solid #000;
  background: var(--df-boards);
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.2), 0 -14px 34px rgba(0, 0, 0, 0.6);
  padding-top: 20px;
}
.mobile-dock[data-game="slot-frontier"]::before{
  content: '';
  position: absolute;
  left: 18px; right: 18px; top: -18px;
  height: 34px;
  pointer-events: none;
  background: var(--df-star) center / 34px 34px no-repeat, var(--df-rope) left center / 40px 10px repeat-x;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}
.mobile-dock[data-game="slot-frontier"] .spin-block{ padding: 0; background: none; }
.mobile-dock[data-game="slot-frontier"] .spin-img-btn{
  color: var(--df-red);
  font-family: var(--df-west);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.16em;
  border: 3px solid #000;
  border-radius: 4px;
  background: var(--df-poster) !important;
  box-shadow: inset 0 0 0 4px rgba(184, 154, 100, 0.55), 0 4px 0 #000, 0 8px 16px rgba(0, 0, 0, 0.5);
  text-shadow: 1px 1px 0 rgba(255, 240, 200, 0.6);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mobile-dock[data-game="slot-frontier"] .spin-img-btn:hover:not(:disabled),
.mobile-dock[data-game="slot-frontier"] .spin-img-btn:active:not(:disabled){ color: var(--df-red-light); background: var(--df-poster) !important; filter: brightness(1.06); }
.mobile-dock[data-game="slot-frontier"] .spin-img-btn:active:not(:disabled){ transform: translateY(2px); }
.mobile-dock[data-game="slot-frontier"] .spin-img-btn:disabled{ color: #8a6a4a; background: var(--df-poster) !important; filter: grayscale(0.4) brightness(0.75); }

/* Candy's console is the tallest of the slots (a full-width Ante strip under it): its candy boxes sit a little tighter,
   so the board above keeps more of the screen */
@media (min-width: 1081px){
  .game.slot-wide[data-game="slot-candy"] .sidebar.deck > .panel{ padding-top: 18px; padding-bottom: 20px; margin-top: 4px; }
  .game.slot-wide[data-game="slot-candy"] > .sweet-modes{ padding-top: 14px; padding-bottom: 16px; }
  .game.slot-wide[data-game="slot-candy"] > .sweet-modes::after{ display: none; }
}

/* ── Candy Bonanza, the finishing touches (wide screens): a drifting shower of sprinkles behind the reels, a glow that
   breathes under SPIN, an Ante switch with a lollipop knob, and the bet panel wearing the Ante mark. ── */
@media (min-width: 1081px){
  /* the sprinkles: a tile of little bars in candy colours, drifting down by exactly its own height so the loop never shows
     a seam; transform only, so it costs the compositor nothing */
  .game[data-game="slot-candy"] .stage.board{ position: relative; }
  .game[data-game="slot-candy"] .stage.board::before{
    content: '';
    position: absolute; left: 0; right: 0; top: -280px; bottom: 0;
    pointer-events: none;
    opacity: 0.5;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg%3E%3Crect x='20' y='18' width='6' height='13' rx='3' fill='%23ff3fa4' transform='rotate(25 23 24)'/%3E%3Crect x='92' y='60' width='6' height='13' rx='3' fill='%23ffe066' transform='rotate(-40 95 66)'/%3E%3Crect x='170' y='24' width='6' height='13' rx='3' fill='%235ac8ff' transform='rotate(70 173 30)'/%3E%3Crect x='240' y='70' width='6' height='13' rx='3' fill='%237ee04a' transform='rotate(-15 243 76)'/%3E%3Crect x='48' y='120' width='6' height='13' rx='3' fill='%23c06aff' transform='rotate(55 51 126)'/%3E%3Crect x='130' y='140' width='6' height='13' rx='3' fill='%23ff9d1f' transform='rotate(-65 133 146)'/%3E%3Crect x='210' y='150' width='6' height='13' rx='3' fill='%23ffffff' transform='rotate(35 213 156)'/%3E%3Crect x='10' y='210' width='6' height='13' rx='3' fill='%235ac8ff' transform='rotate(-30 13 216)'/%3E%3Crect x='100' y='236' width='6' height='13' rx='3' fill='%23ff3fa4' transform='rotate(80 103 242)'/%3E%3Crect x='186' y='220' width='6' height='13' rx='3' fill='%23ffe066' transform='rotate(-50 189 226)'/%3E%3Crect x='262' y='236' width='6' height='13' rx='3' fill='%237ee04a' transform='rotate(20 265 242)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 280px 280px repeat;
    animation: cd-drift 26s linear infinite;
  }
  @keyframes cd-drift{ from{ transform: translateY(0); } to{ transform: translateY(280px); } }

  /* a warm glow that breathes behind SPIN while it waits to be pressed */
  .game.slot-wide[data-game="slot-candy"] .sidebar.deck > .spin-block > .spin-img-btn:not(:disabled){ animation: cd-breathe 2.8s ease-in-out infinite; }
  @keyframes cd-breathe{
    0%, 100%{ filter: drop-shadow(0 0 6px rgba(255, 63, 164, 0.45)) drop-shadow(0 0 14px rgba(255, 200, 58, 0.25)); transform: scale(1); }
    50%{ filter: drop-shadow(0 0 14px rgba(255, 63, 164, 0.85)) drop-shadow(0 0 28px rgba(255, 200, 58, 0.5)); transform: scale(1.025); }
  }

  /* the Ante strip: a wide, low candy box; the switch is a groove with a lollipop knob that rolls over to the right */
  .game.slot-wide[data-game="slot-candy"] > .sweet-modes{ margin-top: 14px; }
  .game[data-game="slot-candy"] > .sweet-modes .sweet-ante{ gap: 12px; cursor: pointer; font-size: 14px; }
  .game[data-game="slot-candy"] > .sweet-modes .sweet-ante input{
    -webkit-appearance: none; appearance: none;
    flex: none; width: 54px; height: 30px; margin: 0; border-radius: 999px; cursor: pointer;
    border: 2px solid var(--cd-berry);
    background:
      var(--cd-swirl) 3px 50% / 22px 22px no-repeat,
      linear-gradient(180deg, var(--cd-berry-deep), var(--cd-berry));
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: background-position 0.22s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.2s ease;
  }
  .game[data-game="slot-candy"] > .sweet-modes .sweet-ante input:checked{
    background:
      var(--cd-swirl) calc(100% - 3px) 50% / 22px 22px no-repeat,
      var(--cd-jelly);
    box-shadow: inset 0 3px 6px rgba(150, 70, 0, 0.45), 0 0 12px rgba(255, 200, 58, 0.7);
  }
  .game[data-game="slot-candy"] > .sweet-modes .sweet-ante input:disabled{ opacity: 0.6; cursor: not-allowed; }
}
/* the bet panel says so when the Ante is on, since the switch itself is down under the console */
.game[data-game="slot-candy"] .panel.ante-on > h4::after{
  content: attr(data-ante) ' ANTE';
  margin-left: 10px; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; letter-spacing: 0.06em; vertical-align: middle;
  color: var(--cd-berry); background: var(--cd-jelly);
  box-shadow: 0 0 8px rgba(255, 200, 58, 0.7);
  -webkit-text-fill-color: initial; text-shadow: none;
}


/* ── Roulettes (09.10.2026): European, French and American, each dressed from its own logo and backdrop —
   emerald felt and a green-white ribbon / midnight blue, burgundy and a tricolour band / stars-and-stripes navy.
   One generator (scripts: roul-theme) writes the three blocks; every panel is a gold-framed plate with a band along
   the top rim and the logo's crest (a star or a fleur-de-lis) on it, and the stake, chips, buttons, history strip,
   hot-and-cold pills, rules and payouts are all drawn in the same hand. The felt table image is left as it is. ── */

.game[data-game="roulette"],
.mobile-dock[data-game="roulette"]{
  --rl-main: #0e5233; --rl-deep: #05241a; --rl-light: #1d8a58; --rl-gold: #e0b04f; --rl-gl: #f8e3a0; --rl-gd: #8a6418; --rl-a2: #2a4a8a;
  --rl-ink: #0a1f14; --rl-serif: Georgia, 'Times New Roman', serif;
  --rl-band: repeating-linear-gradient(90deg, #f4f1e4 0 16px, #1d8a58 16px 20px, #f4f1e4 20px 22px, #0e5233 22px 38px, #1d8a58 38px 40px);
  --rl-panel: radial-gradient(120% 90% at 50% 0%, #17724a, #0e5233 55%, #06281b);
  --rl-inset: radial-gradient(120% 120% at 50% 0%, #0b3c26, #062a1a 70%, #031610);
  --rl-goldleaf: linear-gradient(180deg, #f8e3a0, #e0b04f 50%, #9a7020);
  --rl-crest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%23f6d36b' stroke='%23140a00' stroke-width='1.2' stroke-linejoin='round' d='M20 2l5.200 11.700 12.800 1.300-9.600 8.600 2.800 12.600L20 29.400 8.800 36.200l2.800-12.600L2 15l12.800-1.300z'/%3E%3C/svg%3E");
}
.game[data-game="roulette"] .sidebar,
.game[data-game="roulette"] .game-info,
.mobile-dock[data-game="roulette"]{
  --text: #f3ecd6; --muted: #b9cdb5; --border: rgba(226, 181, 82, 0.5); --accent: #f8e3a0; --accent2: #1d8a58; --panel: #0e5233; --panel2: #1d8a58;
}
.view:has(> .game[data-game="roulette"]){
  background: linear-gradient(180deg, rgba(8, 34, 22, 0.88), rgba(4, 16, 11, 0.94));
  border-color: rgba(226, 181, 82, 0.4);
  box-shadow: 0 0 0 1px rgba(80, 200, 130, 0.22), 0 26px 70px rgba(0, 0, 0, 0.55);
}
.game[data-game="roulette"] .game-crumb, .game[data-game="roulette"] .game-crumb a{ color: var(--muted); }
.game[data-game="roulette"] .game-crumb .cur{ color: var(--rl-gl); font-weight: 700; }

/* the table area: a gold frame round a lit field */
.game[data-game="roulette"] .stage.board{
  border: 4px solid var(--rl-gold);
  border-radius: 16px;
  background: radial-gradient(90% 70% at 50% 0%, rgba(40, 140, 90, 0.35), transparent 70%), linear-gradient(180deg, #0a3a26, #04160f);
  box-shadow: inset 0 0 0 2px var(--rl-a2), inset 0 0 46px rgba(80, 200, 130, 0.18), 0 0 0 2px var(--rl-ink), 0 0 28px rgba(80, 200, 130, 0.22), 0 12px 30px rgba(0, 0, 0, 0.55);
}
/* the history strip over the wheel: an inset tray */
.game[data-game="roulette"] .rt-marquee{
  border: 2px solid var(--rl-gd);
  border-radius: 10px;
  background: var(--rl-inset);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(226, 181, 82, 0.35);
  color: var(--rl-gl);
}
.game[data-game="roulette"] .rt-empty{ color: #b9cdb5; }
.game[data-game="roulette"] .rt-frame{ border-radius: 12px; box-shadow: 0 0 0 3px var(--rl-gold), 0 0 0 5px var(--rl-ink), 0 10px 26px rgba(0, 0, 0, 0.55); }

/* every panel: a gold-framed plate with a band along the top and the logo's crest on the rim */
.game[data-game="roulette"] .sidebar .panel,
.game[data-game="roulette"] .game-info > details{
  position: relative;
  margin-top: 14px;
  padding-top: 26px;
  padding-bottom: 20px;
  border: 4px solid var(--rl-gold);
  border-radius: 12px;
  overflow: visible;
  background:
    linear-gradient(180deg, transparent 0 6px, var(--rl-gd) 6px 7px, transparent 7px) top / 100% 8px no-repeat,
    var(--rl-band) top / 100% 6px no-repeat,
    var(--rl-panel);
  box-shadow: inset 0 0 0 1px var(--rl-gl), inset 0 -12px 20px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--rl-ink), 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(80, 200, 130, 0.16);
}
.game[data-game="roulette"] .sidebar .panel::before,
.game[data-game="roulette"] .game-info > details::before{
  content: '';
  position: absolute;
  left: 50%; top: -20px;
  width: 34px; height: 34px;
  transform: translateX(-50%);
  pointer-events: none;
  background: var(--rl-crest) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}
.game[data-game="roulette"] .sidebar .panel h4,
.game[data-game="roulette"] .rules-h{
  font-family: var(--rl-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rl-gl);
  text-shadow: 0 2px 0 var(--rl-ink), 1px 0 0 var(--rl-gd), -1px 0 0 var(--rl-gd), 0 0 10px rgba(80, 200, 130, 0.3);
}

/* the stake plaque */
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .stake-value{
  border: 2px solid var(--rl-gd);
  background: var(--rl-inset);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(226, 181, 82, 0.35);
}
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .stake-num{ font-family: var(--rl-serif); color: var(--rl-gl); text-shadow: 0 2px 0 #000, 0 0 10px rgba(80, 200, 130, 0.4); }
/* − and +: gold discs */
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .step-btn{
  border: 2px solid var(--rl-gd);
  border-radius: 50%;
  aspect-ratio: 1;
  height: auto;
  color: var(--rl-ink);
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
  background: radial-gradient(circle at 35% 28%, #fff4cc 0%, #f0cc6e 30%, #c8962e 70%, #7a5410 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 240, 200, 0.3), 0 3px 0 var(--rl-ink), 0 5px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .step-btn:hover:not(:disabled){ filter: brightness(1.1); border-color: var(--rl-gd); }
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .step-btn:active:not(:disabled){ transform: translateY(2px); box-shadow: inset 0 0 0 3px rgba(255, 240, 200, 0.3), 0 1px 0 var(--rl-ink), 0 2px 5px rgba(0, 0, 0, 0.5); }
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .step-btn:disabled{ filter: grayscale(0.7) brightness(0.7); opacity: 0.6; }
/* the slider: the band, gold where it has filled, a gold disc for the thumb */
.game[data-game="roulette"] .sidebar .ladder::-webkit-slider-runnable-track{ height: 8px; background: linear-gradient(90deg, rgba(226, 181, 82, 0.95) var(--fill, 0%), transparent var(--fill, 0%)), var(--rl-band); border-radius: 4px; box-shadow: 0 0 0 1px var(--rl-ink); }
.game[data-game="roulette"] .sidebar .ladder::-webkit-slider-thumb{ width: 24px; height: 24px; margin-top: -8px; border: 0; background: radial-gradient(circle at 35% 28%, #fff4cc, #c8962e 70%, #7a5410); box-shadow: 0 0 0 1px var(--rl-ink), 0 2px 6px rgba(0, 0, 0, 0.55); }
.game[data-game="roulette"] .sidebar .ladder::-moz-range-track{ height: 8px; background: var(--rl-band); border-radius: 4px; }
.game[data-game="roulette"] .sidebar .ladder::-moz-range-progress{ height: 8px; background: var(--rl-gold); border-radius: 4px; }
.game[data-game="roulette"] .sidebar .ladder::-moz-range-thumb{ width: 24px; height: 24px; border: 0; background: radial-gradient(circle at 35% 28%, #fff4cc, #c8962e 70%, #7a5410); box-shadow: 0 0 0 1px var(--rl-ink); }
.game[data-game="roulette"] .sidebar .ladder-ticks i.on{ background: var(--rl-gold); }

/* Min / ½ / ×2 / Max: gold plaques */
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .chip{
  border: 2px solid var(--rl-gd);
  border-radius: 8px;
  color: var(--rl-ink);
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.55);
  background: var(--rl-goldleaf);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, 0.45), 0 3px 0 var(--rl-ink), 0 5px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .chip:hover:not(:disabled){ filter: brightness(1.1); border-color: var(--rl-gd); }
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .chip:active:not(:disabled){ transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(255, 240, 200, 0.45), 0 1px 0 var(--rl-ink); }
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .chip:disabled{ filter: grayscale(0.7) brightness(0.7); opacity: 0.55; }

/* the round's line ("Bet: 0.00" and the verdict) */
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .result-line{ color: var(--rl-gl); font-family: var(--rl-serif); font-weight: 700; letter-spacing: 0.04em; text-shadow: 0 1px 0 #000; }
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .result-line.win{ color: #9cf0b4; }
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .result-line.lose{ color: #ff9a9a; }
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .rt-keys{ color: #b9cdb5; opacity: 0.85; }

/* Clear / Rebet / Double / Undo: dark enamel plates in a gold rim */
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .btn-action{
  border: 2px solid var(--rl-gold);
  border-radius: 10px;
  color: var(--rl-gl);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000;
  background: var(--rl-inset);
  box-shadow: inset 0 0 0 1px rgba(226, 181, 82, 0.3), inset 0 3px 8px rgba(0, 0, 0, 0.5), 0 3px 0 var(--rl-ink), 0 5px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .btn-action:hover:not(:disabled){ filter: brightness(1.25); color: #fff; }
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .btn-action:active:not(:disabled){ transform: translateY(2px); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5), 0 1px 0 var(--rl-ink); }
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .btn-action:disabled{ filter: grayscale(0.7) brightness(0.65); opacity: 0.6; }
/* SPIN: the big jewelled button */
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .btn-deal{
  position: relative;
  border: 3px solid var(--rl-gold);
  border-radius: 12px;
  color: #2a1800;
  font-family: var(--rl-serif);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
  background: radial-gradient(120% 140% at 50% 0%, #fff0b8, #e8b94a 45%, #a8741a);
  box-shadow: inset 0 0 0 2px rgba(255, 240, 200, 0.35), inset 0 -6px 12px rgba(0, 0, 0, 0.3), 0 4px 0 var(--rl-ink), 0 8px 18px rgba(0, 0, 0, 0.5), 0 0 22px rgba(80, 200, 130, 0.35);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .btn-deal::before, :is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .btn-deal::after{ display: none; }
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .btn-deal:hover:not(:disabled){ filter: brightness(1.12); }
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .btn-deal:active:not(:disabled){ transform: translateY(3px); box-shadow: inset 0 0 0 2px rgba(255, 240, 200, 0.35), 0 1px 0 var(--rl-ink), 0 3px 8px rgba(0, 0, 0, 0.5); }
:is(.game[data-game="roulette"] .sidebar, .mobile-dock[data-game="roulette"]) .btn-deal:disabled{ filter: grayscale(0.6) brightness(0.65); }

/* hot and cold numbers */
.game[data-game="roulette"] .rt-hc-label{ color: var(--rl-gl); font-family: var(--rl-serif); letter-spacing: 0.1em; text-transform: uppercase; }
.game[data-game="roulette"] .rt-pill{ border: 1px solid var(--rl-gd); background: var(--rl-inset); color: #f3ecd6; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5); }
.game[data-game="roulette"] .rt-pill.hot{ border-color: #ff9d4a; color: #ffd9b0; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 140, 60, 0.35); }
.game[data-game="roulette"] .rt-pill.cold{ border-color: #6fb4ff; color: #cfe6ff; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 10px rgba(90, 160, 255, 0.35); }

/* rules and payouts under the table */
.game[data-game="roulette"] .game-info{ gap: 30px; margin-top: 40px; }
.game[data-game="roulette"] .game-info > details{ padding-top: 20px; }
.game[data-game="roulette"] .game-info summary{
  display: flex; width: fit-content; margin: 0 auto; padding: 8px 26px; cursor: pointer; list-style: none;
  font-family: var(--rl-serif); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rl-ink);
  border: 2px solid var(--rl-gd); border-radius: 8px; background: var(--rl-goldleaf);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, 0.45), 0 3px 0 var(--rl-ink), 0 5px 10px rgba(0, 0, 0, 0.45);
}
.game[data-game="roulette"] .game-info summary:hover{ filter: brightness(1.1); }
.game[data-game="roulette"] .game-info summary::after{ color: var(--rl-ink); }
.game[data-game="roulette"] .game-info details[open] > summary{ margin-bottom: 8px; }
.game[data-game="roulette"] .rules-body{ color: #f3ecd6; }
.game[data-game="roulette"] .rules-list{ list-style: none; padding-left: 4px; }
.game[data-game="roulette"] .rules-list li{ position: relative; padding-left: 24px; }
.game[data-game="roulette"] .rules-list li::before{ content: ''; position: absolute; left: 2px; top: 0.35em; width: 14px; height: 14px; background: var(--rl-crest) center / contain no-repeat; }
.game[data-game="roulette"] .paytable{ gap: 14px; padding: 6px 18px 4px; }
.game[data-game="roulette"] .paytable-card{
  border: 2px solid var(--rl-gd); border-radius: 10px; background: var(--rl-inset);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--rl-ink);
  transition: box-shadow 0.15s ease;
}
.game[data-game="roulette"] .paytable-card:hover{ box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--rl-ink), 0 0 16px rgba(80, 200, 130, 0.5); }
.game[data-game="roulette"] .paytable-amt{ color: #b9cdb5; }
.game[data-game="roulette"] .paytable-amt b{ color: var(--rl-gl); font-weight: 800; text-shadow: 0 1px 0 #000; }

/* the phone dock: the same plate, crest on the rim */
.mobile-dock[data-game="roulette"]{
  position: fixed;
  border: 3px solid var(--rl-gold);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--rl-band) top / 100% 5px no-repeat, var(--rl-panel);
  box-shadow: inset 0 0 0 1px var(--rl-gl), 0 -8px 24px rgba(0, 0, 0, 0.5);
}

.game[data-game="frenchroulette"],
.mobile-dock[data-game="frenchroulette"]{
  --rl-main: #14214e; --rl-deep: #060b22; --rl-light: #2c4aa0; --rl-gold: #e2b552; --rl-gl: #fae6a6; --rl-gd: #8a6418; --rl-a2: #a82a3c;
  --rl-ink: #070c20; --rl-serif: Georgia, 'Times New Roman', serif;
  --rl-band: repeating-linear-gradient(90deg, #243c8e 0 22px, #f4f1e4 22px 26px, #b3283a 26px 48px, #f4f1e4 48px 52px);
  --rl-panel: radial-gradient(120% 90% at 50% 0%, #223a82, #14214e 55%, #070d2a);
  --rl-inset: radial-gradient(120% 120% at 50% 0%, #4a1220, #2a0a14 70%, #14040a);
  --rl-goldleaf: linear-gradient(180deg, #fae6a6, #e2b552 50%, #9a7020);
  --rl-crest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23f6d36b' stroke='%23140a00' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpath d='M20 2c3.500 4.500 4.500 9 0 15-4.500-6-3.500-10.500 0-15z'/%3E%3Cpath d='M19 18C14 12 7 14 6 19c-.8 5 4 7 8 5 .5 2.500-1 5-4.500 5.500 5 3 9 .5 9.500-4.500z'/%3E%3Cpath d='M21 18c5-6 12-4 13 1 .8 5-4 7-8 5-.5 2.500 1 5 4.500 5.500-5 3-9 .5-9.500-4.500z'/%3E%3Cpath d='M16 31h8v3.500h-8z'/%3E%3C/g%3E%3C/svg%3E");
}
.game[data-game="frenchroulette"] .sidebar,
.game[data-game="frenchroulette"] .game-info,
.mobile-dock[data-game="frenchroulette"]{
  --text: #f6f0dc; --muted: #b9c3e0; --border: rgba(226, 181, 82, 0.5); --accent: #fae6a6; --accent2: #2c4aa0; --panel: #14214e; --panel2: #2c4aa0;
}
.view:has(> .game[data-game="frenchroulette"]){
  background: linear-gradient(180deg, rgba(14, 20, 50, 0.9), rgba(5, 8, 24, 0.95));
  border-color: rgba(226, 181, 82, 0.4);
  box-shadow: 0 0 0 1px rgba(230, 190, 90, 0.22), 0 26px 70px rgba(0, 0, 0, 0.55);
}
.game[data-game="frenchroulette"] .game-crumb, .game[data-game="frenchroulette"] .game-crumb a{ color: var(--muted); }
.game[data-game="frenchroulette"] .game-crumb .cur{ color: var(--rl-gl); font-weight: 700; }

/* the table area: a gold frame round a lit field */
.game[data-game="frenchroulette"] .stage.board{
  border: 4px solid var(--rl-gold);
  border-radius: 16px;
  background: radial-gradient(90% 70% at 50% 0%, rgba(70, 100, 200, 0.32), transparent 70%), linear-gradient(180deg, #121c46, #050818);
  box-shadow: inset 0 0 0 2px var(--rl-a2), inset 0 0 46px rgba(230, 190, 90, 0.18), 0 0 0 2px var(--rl-ink), 0 0 28px rgba(230, 190, 90, 0.22), 0 12px 30px rgba(0, 0, 0, 0.55);
}
/* the history strip over the wheel: an inset tray */
.game[data-game="frenchroulette"] .rt-marquee{
  border: 2px solid var(--rl-gd);
  border-radius: 10px;
  background: var(--rl-inset);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(226, 181, 82, 0.35);
  color: var(--rl-gl);
}
.game[data-game="frenchroulette"] .rt-empty{ color: #b9c3e0; }
.game[data-game="frenchroulette"] .rt-frame{ border-radius: 12px; box-shadow: 0 0 0 3px var(--rl-gold), 0 0 0 5px var(--rl-ink), 0 10px 26px rgba(0, 0, 0, 0.55); }

/* every panel: a gold-framed plate with a band along the top and the logo's crest on the rim */
.game[data-game="frenchroulette"] .sidebar .panel,
.game[data-game="frenchroulette"] .game-info > details{
  position: relative;
  margin-top: 14px;
  padding-top: 26px;
  padding-bottom: 20px;
  border: 4px solid var(--rl-gold);
  border-radius: 12px;
  overflow: visible;
  background:
    linear-gradient(180deg, transparent 0 6px, var(--rl-gd) 6px 7px, transparent 7px) top / 100% 8px no-repeat,
    var(--rl-band) top / 100% 6px no-repeat,
    var(--rl-panel);
  box-shadow: inset 0 0 0 1px var(--rl-gl), inset 0 -12px 20px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--rl-ink), 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(230, 190, 90, 0.16);
}
.game[data-game="frenchroulette"] .sidebar .panel::before,
.game[data-game="frenchroulette"] .game-info > details::before{
  content: '';
  position: absolute;
  left: 50%; top: -20px;
  width: 34px; height: 34px;
  transform: translateX(-50%);
  pointer-events: none;
  background: var(--rl-crest) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}
.game[data-game="frenchroulette"] .sidebar .panel h4,
.game[data-game="frenchroulette"] .rules-h{
  font-family: var(--rl-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rl-gl);
  text-shadow: 0 2px 0 var(--rl-ink), 1px 0 0 var(--rl-gd), -1px 0 0 var(--rl-gd), 0 0 10px rgba(230, 190, 90, 0.3);
}

/* the stake plaque */
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .stake-value{
  border: 2px solid var(--rl-gd);
  background: var(--rl-inset);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(226, 181, 82, 0.35);
}
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .stake-num{ font-family: var(--rl-serif); color: var(--rl-gl); text-shadow: 0 2px 0 #000, 0 0 10px rgba(230, 190, 90, 0.4); }
/* − and +: gold discs */
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .step-btn{
  border: 2px solid var(--rl-gd);
  border-radius: 50%;
  aspect-ratio: 1;
  height: auto;
  color: var(--rl-ink);
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
  background: radial-gradient(circle at 35% 28%, #fff4cc 0%, #f0cc6e 30%, #c8962e 70%, #7a5410 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 240, 200, 0.3), 0 3px 0 var(--rl-ink), 0 5px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .step-btn:hover:not(:disabled){ filter: brightness(1.1); border-color: var(--rl-gd); }
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .step-btn:active:not(:disabled){ transform: translateY(2px); box-shadow: inset 0 0 0 3px rgba(255, 240, 200, 0.3), 0 1px 0 var(--rl-ink), 0 2px 5px rgba(0, 0, 0, 0.5); }
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .step-btn:disabled{ filter: grayscale(0.7) brightness(0.7); opacity: 0.6; }
/* the slider: the band, gold where it has filled, a gold disc for the thumb */
.game[data-game="frenchroulette"] .sidebar .ladder::-webkit-slider-runnable-track{ height: 8px; background: linear-gradient(90deg, rgba(226, 181, 82, 0.95) var(--fill, 0%), transparent var(--fill, 0%)), var(--rl-band); border-radius: 4px; box-shadow: 0 0 0 1px var(--rl-ink); }
.game[data-game="frenchroulette"] .sidebar .ladder::-webkit-slider-thumb{ width: 24px; height: 24px; margin-top: -8px; border: 0; background: radial-gradient(circle at 35% 28%, #fff4cc, #c8962e 70%, #7a5410); box-shadow: 0 0 0 1px var(--rl-ink), 0 2px 6px rgba(0, 0, 0, 0.55); }
.game[data-game="frenchroulette"] .sidebar .ladder::-moz-range-track{ height: 8px; background: var(--rl-band); border-radius: 4px; }
.game[data-game="frenchroulette"] .sidebar .ladder::-moz-range-progress{ height: 8px; background: var(--rl-gold); border-radius: 4px; }
.game[data-game="frenchroulette"] .sidebar .ladder::-moz-range-thumb{ width: 24px; height: 24px; border: 0; background: radial-gradient(circle at 35% 28%, #fff4cc, #c8962e 70%, #7a5410); box-shadow: 0 0 0 1px var(--rl-ink); }
.game[data-game="frenchroulette"] .sidebar .ladder-ticks i.on{ background: var(--rl-gold); }

/* Min / ½ / ×2 / Max: gold plaques */
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .chip{
  border: 2px solid var(--rl-gd);
  border-radius: 8px;
  color: var(--rl-ink);
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.55);
  background: var(--rl-goldleaf);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, 0.45), 0 3px 0 var(--rl-ink), 0 5px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .chip:hover:not(:disabled){ filter: brightness(1.1); border-color: var(--rl-gd); }
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .chip:active:not(:disabled){ transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(255, 240, 200, 0.45), 0 1px 0 var(--rl-ink); }
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .chip:disabled{ filter: grayscale(0.7) brightness(0.7); opacity: 0.55; }

/* the round's line ("Bet: 0.00" and the verdict) */
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .result-line{ color: var(--rl-gl); font-family: var(--rl-serif); font-weight: 700; letter-spacing: 0.04em; text-shadow: 0 1px 0 #000; }
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .result-line.win{ color: #9cf0b4; }
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .result-line.lose{ color: #ff9a9a; }
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .rt-keys{ color: #b9c3e0; opacity: 0.85; }

/* Clear / Rebet / Double / Undo: dark enamel plates in a gold rim */
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .btn-action{
  border: 2px solid var(--rl-gold);
  border-radius: 10px;
  color: var(--rl-gl);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000;
  background: var(--rl-inset);
  box-shadow: inset 0 0 0 1px rgba(226, 181, 82, 0.3), inset 0 3px 8px rgba(0, 0, 0, 0.5), 0 3px 0 var(--rl-ink), 0 5px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .btn-action:hover:not(:disabled){ filter: brightness(1.25); color: #fff; }
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .btn-action:active:not(:disabled){ transform: translateY(2px); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5), 0 1px 0 var(--rl-ink); }
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .btn-action:disabled{ filter: grayscale(0.7) brightness(0.65); opacity: 0.6; }
/* SPIN: the big jewelled button */
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .btn-deal{
  position: relative;
  border: 3px solid var(--rl-gold);
  border-radius: 12px;
  color: #fff4dc;
  font-family: var(--rl-serif);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
  background: radial-gradient(120% 140% at 50% 0%, #ff8a98, #b3283a 45%, #5a0e1a);
  box-shadow: inset 0 0 0 2px rgba(255, 240, 200, 0.35), inset 0 -6px 12px rgba(0, 0, 0, 0.3), 0 4px 0 var(--rl-ink), 0 8px 18px rgba(0, 0, 0, 0.5), 0 0 22px rgba(230, 190, 90, 0.35);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .btn-deal::before, :is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .btn-deal::after{ display: none; }
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .btn-deal:hover:not(:disabled){ filter: brightness(1.12); }
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .btn-deal:active:not(:disabled){ transform: translateY(3px); box-shadow: inset 0 0 0 2px rgba(255, 240, 200, 0.35), 0 1px 0 var(--rl-ink), 0 3px 8px rgba(0, 0, 0, 0.5); }
:is(.game[data-game="frenchroulette"] .sidebar, .mobile-dock[data-game="frenchroulette"]) .btn-deal:disabled{ filter: grayscale(0.6) brightness(0.65); }

/* hot and cold numbers */
.game[data-game="frenchroulette"] .rt-hc-label{ color: var(--rl-gl); font-family: var(--rl-serif); letter-spacing: 0.1em; text-transform: uppercase; }
.game[data-game="frenchroulette"] .rt-pill{ border: 1px solid var(--rl-gd); background: var(--rl-inset); color: #f6f0dc; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5); }
.game[data-game="frenchroulette"] .rt-pill.hot{ border-color: #ff9d4a; color: #ffd9b0; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 140, 60, 0.35); }
.game[data-game="frenchroulette"] .rt-pill.cold{ border-color: #6fb4ff; color: #cfe6ff; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 10px rgba(90, 160, 255, 0.35); }

/* rules and payouts under the table */
.game[data-game="frenchroulette"] .game-info{ gap: 30px; margin-top: 40px; }
.game[data-game="frenchroulette"] .game-info > details{ padding-top: 20px; }
.game[data-game="frenchroulette"] .game-info summary{
  display: flex; width: fit-content; margin: 0 auto; padding: 8px 26px; cursor: pointer; list-style: none;
  font-family: var(--rl-serif); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rl-ink);
  border: 2px solid var(--rl-gd); border-radius: 8px; background: var(--rl-goldleaf);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, 0.45), 0 3px 0 var(--rl-ink), 0 5px 10px rgba(0, 0, 0, 0.45);
}
.game[data-game="frenchroulette"] .game-info summary:hover{ filter: brightness(1.1); }
.game[data-game="frenchroulette"] .game-info summary::after{ color: var(--rl-ink); }
.game[data-game="frenchroulette"] .game-info details[open] > summary{ margin-bottom: 8px; }
.game[data-game="frenchroulette"] .rules-body{ color: #f6f0dc; }
.game[data-game="frenchroulette"] .rules-list{ list-style: none; padding-left: 4px; }
.game[data-game="frenchroulette"] .rules-list li{ position: relative; padding-left: 24px; }
.game[data-game="frenchroulette"] .rules-list li::before{ content: ''; position: absolute; left: 2px; top: 0.35em; width: 14px; height: 14px; background: var(--rl-crest) center / contain no-repeat; }
.game[data-game="frenchroulette"] .paytable{ gap: 14px; padding: 6px 18px 4px; }
.game[data-game="frenchroulette"] .paytable-card{
  border: 2px solid var(--rl-gd); border-radius: 10px; background: var(--rl-inset);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--rl-ink);
  transition: box-shadow 0.15s ease;
}
.game[data-game="frenchroulette"] .paytable-card:hover{ box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--rl-ink), 0 0 16px rgba(230, 190, 90, 0.5); }
.game[data-game="frenchroulette"] .paytable-amt{ color: #b9c3e0; }
.game[data-game="frenchroulette"] .paytable-amt b{ color: var(--rl-gl); font-weight: 800; text-shadow: 0 1px 0 #000; }

/* the phone dock: the same plate, crest on the rim */
.mobile-dock[data-game="frenchroulette"]{
  position: fixed;
  border: 3px solid var(--rl-gold);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--rl-band) top / 100% 5px no-repeat, var(--rl-panel);
  box-shadow: inset 0 0 0 1px var(--rl-gl), 0 -8px 24px rgba(0, 0, 0, 0.5);
}

.game[data-game="americanroulette"],
.mobile-dock[data-game="americanroulette"]{
  --rl-main: #14275e; --rl-deep: #070d2a; --rl-light: #2f55c0; --rl-gold: #e8b84a; --rl-gl: #fbe8a4; --rl-gd: #8a6418; --rl-a2: #c4283a;
  --rl-ink: #080e2a; --rl-serif: Georgia, 'Times New Roman', serif;
  --rl-band: repeating-linear-gradient(90deg, #c4283a 0 14px, #f7f3e6 14px 28px);
  --rl-panel: radial-gradient(120% 90% at 50% 0%, #243f94, #14275e 55%, #070e2e);
  --rl-inset: radial-gradient(120% 120% at 50% 0%, #0c1a4a, #071033 70%, #030818);
  --rl-goldleaf: linear-gradient(180deg, #fbe8a4, #e8b84a 50%, #9a7020);
  --rl-crest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%23f9d86a' stroke='%23140a00' stroke-width='1.2' stroke-linejoin='round' d='M20 2l5.200 11.700 12.800 1.300-9.600 8.600 2.800 12.600L20 29.400 8.800 36.200l2.800-12.600L2 15l12.800-1.300z'/%3E%3C/svg%3E");
}
.game[data-game="americanroulette"] .sidebar,
.game[data-game="americanroulette"] .game-info,
.mobile-dock[data-game="americanroulette"]{
  --text: #f8f2e0; --muted: #bcc8ea; --border: rgba(226, 181, 82, 0.5); --accent: #fbe8a4; --accent2: #2f55c0; --panel: #14275e; --panel2: #2f55c0;
}
.view:has(> .game[data-game="americanroulette"]){
  background: linear-gradient(180deg, rgba(14, 24, 62, 0.9), rgba(5, 8, 26, 0.95));
  border-color: rgba(226, 181, 82, 0.4);
  box-shadow: 0 0 0 1px rgba(230, 80, 90, 0.22), 0 26px 70px rgba(0, 0, 0, 0.55);
}
.game[data-game="americanroulette"] .game-crumb, .game[data-game="americanroulette"] .game-crumb a{ color: var(--muted); }
.game[data-game="americanroulette"] .game-crumb .cur{ color: var(--rl-gl); font-weight: 700; }

/* the table area: a gold frame round a lit field */
.game[data-game="americanroulette"] .stage.board{
  border: 4px solid var(--rl-gold);
  border-radius: 16px;
  background: radial-gradient(90% 70% at 50% 0%, rgba(60, 100, 220, 0.34), transparent 70%), linear-gradient(180deg, #112060, #050a24);
  box-shadow: inset 0 0 0 2px var(--rl-a2), inset 0 0 46px rgba(230, 80, 90, 0.18), 0 0 0 2px var(--rl-ink), 0 0 28px rgba(230, 80, 90, 0.22), 0 12px 30px rgba(0, 0, 0, 0.55);
}
/* the history strip over the wheel: an inset tray */
.game[data-game="americanroulette"] .rt-marquee{
  border: 2px solid var(--rl-gd);
  border-radius: 10px;
  background: var(--rl-inset);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(226, 181, 82, 0.35);
  color: var(--rl-gl);
}
.game[data-game="americanroulette"] .rt-empty{ color: #bcc8ea; }
.game[data-game="americanroulette"] .rt-frame{ border-radius: 12px; box-shadow: 0 0 0 3px var(--rl-gold), 0 0 0 5px var(--rl-ink), 0 10px 26px rgba(0, 0, 0, 0.55); }

/* every panel: a gold-framed plate with a band along the top and the logo's crest on the rim */
.game[data-game="americanroulette"] .sidebar .panel,
.game[data-game="americanroulette"] .game-info > details{
  position: relative;
  margin-top: 14px;
  padding-top: 26px;
  padding-bottom: 20px;
  border: 4px solid var(--rl-gold);
  border-radius: 12px;
  overflow: visible;
  background:
    linear-gradient(180deg, transparent 0 6px, var(--rl-gd) 6px 7px, transparent 7px) top / 100% 8px no-repeat,
    var(--rl-band) top / 100% 6px no-repeat,
    var(--rl-panel);
  box-shadow: inset 0 0 0 1px var(--rl-gl), inset 0 -12px 20px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--rl-ink), 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(230, 80, 90, 0.16);
}
.game[data-game="americanroulette"] .sidebar .panel::before,
.game[data-game="americanroulette"] .game-info > details::before{
  content: '';
  position: absolute;
  left: 50%; top: -20px;
  width: 34px; height: 34px;
  transform: translateX(-50%);
  pointer-events: none;
  background: var(--rl-crest) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}
.game[data-game="americanroulette"] .sidebar .panel h4,
.game[data-game="americanroulette"] .rules-h{
  font-family: var(--rl-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rl-gl);
  text-shadow: 0 2px 0 var(--rl-ink), 1px 0 0 var(--rl-gd), -1px 0 0 var(--rl-gd), 0 0 10px rgba(230, 80, 90, 0.3);
}

/* the stake plaque */
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .stake-value{
  border: 2px solid var(--rl-gd);
  background: var(--rl-inset);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(226, 181, 82, 0.35);
}
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .stake-num{ font-family: var(--rl-serif); color: var(--rl-gl); text-shadow: 0 2px 0 #000, 0 0 10px rgba(230, 80, 90, 0.4); }
/* − and +: gold discs */
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .step-btn{
  border: 2px solid var(--rl-gd);
  border-radius: 50%;
  aspect-ratio: 1;
  height: auto;
  color: var(--rl-ink);
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
  background: radial-gradient(circle at 35% 28%, #fff4cc 0%, #f0cc6e 30%, #c8962e 70%, #7a5410 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 240, 200, 0.3), 0 3px 0 var(--rl-ink), 0 5px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .step-btn:hover:not(:disabled){ filter: brightness(1.1); border-color: var(--rl-gd); }
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .step-btn:active:not(:disabled){ transform: translateY(2px); box-shadow: inset 0 0 0 3px rgba(255, 240, 200, 0.3), 0 1px 0 var(--rl-ink), 0 2px 5px rgba(0, 0, 0, 0.5); }
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .step-btn:disabled{ filter: grayscale(0.7) brightness(0.7); opacity: 0.6; }
/* the slider: the band, gold where it has filled, a gold disc for the thumb */
.game[data-game="americanroulette"] .sidebar .ladder::-webkit-slider-runnable-track{ height: 8px; background: linear-gradient(90deg, rgba(226, 181, 82, 0.95) var(--fill, 0%), transparent var(--fill, 0%)), var(--rl-band); border-radius: 4px; box-shadow: 0 0 0 1px var(--rl-ink); }
.game[data-game="americanroulette"] .sidebar .ladder::-webkit-slider-thumb{ width: 24px; height: 24px; margin-top: -8px; border: 0; background: radial-gradient(circle at 35% 28%, #fff4cc, #c8962e 70%, #7a5410); box-shadow: 0 0 0 1px var(--rl-ink), 0 2px 6px rgba(0, 0, 0, 0.55); }
.game[data-game="americanroulette"] .sidebar .ladder::-moz-range-track{ height: 8px; background: var(--rl-band); border-radius: 4px; }
.game[data-game="americanroulette"] .sidebar .ladder::-moz-range-progress{ height: 8px; background: var(--rl-gold); border-radius: 4px; }
.game[data-game="americanroulette"] .sidebar .ladder::-moz-range-thumb{ width: 24px; height: 24px; border: 0; background: radial-gradient(circle at 35% 28%, #fff4cc, #c8962e 70%, #7a5410); box-shadow: 0 0 0 1px var(--rl-ink); }
.game[data-game="americanroulette"] .sidebar .ladder-ticks i.on{ background: var(--rl-gold); }

/* Min / ½ / ×2 / Max: gold plaques */
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .chip{
  border: 2px solid var(--rl-gd);
  border-radius: 8px;
  color: var(--rl-ink);
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.55);
  background: var(--rl-goldleaf);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, 0.45), 0 3px 0 var(--rl-ink), 0 5px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .chip:hover:not(:disabled){ filter: brightness(1.1); border-color: var(--rl-gd); }
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .chip:active:not(:disabled){ transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(255, 240, 200, 0.45), 0 1px 0 var(--rl-ink); }
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .chip:disabled{ filter: grayscale(0.7) brightness(0.7); opacity: 0.55; }

/* the round's line ("Bet: 0.00" and the verdict) */
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .result-line{ color: var(--rl-gl); font-family: var(--rl-serif); font-weight: 700; letter-spacing: 0.04em; text-shadow: 0 1px 0 #000; }
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .result-line.win{ color: #9cf0b4; }
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .result-line.lose{ color: #ff9a9a; }
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .rt-keys{ color: #bcc8ea; opacity: 0.85; }

/* Clear / Rebet / Double / Undo: dark enamel plates in a gold rim */
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .btn-action{
  border: 2px solid var(--rl-gold);
  border-radius: 10px;
  color: var(--rl-gl);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000;
  background: var(--rl-inset);
  box-shadow: inset 0 0 0 1px rgba(226, 181, 82, 0.3), inset 0 3px 8px rgba(0, 0, 0, 0.5), 0 3px 0 var(--rl-ink), 0 5px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .btn-action:hover:not(:disabled){ filter: brightness(1.25); color: #fff; }
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .btn-action:active:not(:disabled){ transform: translateY(2px); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5), 0 1px 0 var(--rl-ink); }
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .btn-action:disabled{ filter: grayscale(0.7) brightness(0.65); opacity: 0.6; }
/* SPIN: the big jewelled button */
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .btn-deal{
  position: relative;
  border: 3px solid var(--rl-gold);
  border-radius: 12px;
  color: #fff4dc;
  font-family: var(--rl-serif);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
  background: radial-gradient(120% 140% at 50% 0%, #ff8c98, #c4283a 45%, #66101c);
  box-shadow: inset 0 0 0 2px rgba(255, 240, 200, 0.35), inset 0 -6px 12px rgba(0, 0, 0, 0.3), 0 4px 0 var(--rl-ink), 0 8px 18px rgba(0, 0, 0, 0.5), 0 0 22px rgba(230, 80, 90, 0.35);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .btn-deal::before, :is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .btn-deal::after{ display: none; }
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .btn-deal:hover:not(:disabled){ filter: brightness(1.12); }
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .btn-deal:active:not(:disabled){ transform: translateY(3px); box-shadow: inset 0 0 0 2px rgba(255, 240, 200, 0.35), 0 1px 0 var(--rl-ink), 0 3px 8px rgba(0, 0, 0, 0.5); }
:is(.game[data-game="americanroulette"] .sidebar, .mobile-dock[data-game="americanroulette"]) .btn-deal:disabled{ filter: grayscale(0.6) brightness(0.65); }

/* hot and cold numbers */
.game[data-game="americanroulette"] .rt-hc-label{ color: var(--rl-gl); font-family: var(--rl-serif); letter-spacing: 0.1em; text-transform: uppercase; }
.game[data-game="americanroulette"] .rt-pill{ border: 1px solid var(--rl-gd); background: var(--rl-inset); color: #f8f2e0; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5); }
.game[data-game="americanroulette"] .rt-pill.hot{ border-color: #ff9d4a; color: #ffd9b0; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 140, 60, 0.35); }
.game[data-game="americanroulette"] .rt-pill.cold{ border-color: #6fb4ff; color: #cfe6ff; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 10px rgba(90, 160, 255, 0.35); }

/* rules and payouts under the table */
.game[data-game="americanroulette"] .game-info{ gap: 30px; margin-top: 40px; }
.game[data-game="americanroulette"] .game-info > details{ padding-top: 20px; }
.game[data-game="americanroulette"] .game-info summary{
  display: flex; width: fit-content; margin: 0 auto; padding: 8px 26px; cursor: pointer; list-style: none;
  font-family: var(--rl-serif); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rl-ink);
  border: 2px solid var(--rl-gd); border-radius: 8px; background: var(--rl-goldleaf);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, 0.45), 0 3px 0 var(--rl-ink), 0 5px 10px rgba(0, 0, 0, 0.45);
}
.game[data-game="americanroulette"] .game-info summary:hover{ filter: brightness(1.1); }
.game[data-game="americanroulette"] .game-info summary::after{ color: var(--rl-ink); }
.game[data-game="americanroulette"] .game-info details[open] > summary{ margin-bottom: 8px; }
.game[data-game="americanroulette"] .rules-body{ color: #f8f2e0; }
.game[data-game="americanroulette"] .rules-list{ list-style: none; padding-left: 4px; }
.game[data-game="americanroulette"] .rules-list li{ position: relative; padding-left: 24px; }
.game[data-game="americanroulette"] .rules-list li::before{ content: ''; position: absolute; left: 2px; top: 0.35em; width: 14px; height: 14px; background: var(--rl-crest) center / contain no-repeat; }
.game[data-game="americanroulette"] .paytable{ gap: 14px; padding: 6px 18px 4px; }
.game[data-game="americanroulette"] .paytable-card{
  border: 2px solid var(--rl-gd); border-radius: 10px; background: var(--rl-inset);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--rl-ink);
  transition: box-shadow 0.15s ease;
}
.game[data-game="americanroulette"] .paytable-card:hover{ box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--rl-ink), 0 0 16px rgba(230, 80, 90, 0.5); }
.game[data-game="americanroulette"] .paytable-amt{ color: #bcc8ea; }
.game[data-game="americanroulette"] .paytable-amt b{ color: var(--rl-gl); font-weight: 800; text-shadow: 0 1px 0 #000; }

/* the phone dock: the same plate, crest on the rim */
.mobile-dock[data-game="americanroulette"]{
  position: fixed;
  border: 3px solid var(--rl-gold);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--rl-band) top / 100% 5px no-repeat, var(--rl-panel);
  box-shadow: inset 0 0 0 1px var(--rl-gl), 0 -8px 24px rgba(0, 0, 0, 0.5);
}

/* ===== The win headline over the field of every slot (09.10.2026, public/js/slotWinBar.js) =====
   One strip above the reels: caption + amount between two ornaments. The base is a gold Sora headline (the auto-themed slots
   take their colours from --gt-*); every hand-themed slot overrides font, fill, outline and ornament below. Height is reserved
   (no jump when it appears). Big wins (>=20x) swell and shine, mega (>=100x) more. */
.slot-winbar{
  --swb-fill: linear-gradient(180deg, var(--gt-gl, #fff3b0), var(--gt-gold, #e0b04f) 60%, var(--gt-gd, #8a6418));
  --swb-glow: rgba(var(--gt-glow, 224, 176, 79), 0.75);
  --swb-font: var(--font-display); --swb-stroke: transparent; --swb-cap: var(--gt-gl, #fff3b0); --swb-orn: '✦';
  position: absolute; top: 15px; bottom: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 12px;
  opacity: 0; transform: translateY(6px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; text-align: center; }
.slot-winbar.on{ opacity: 1; transform: none; }
.swb-mid{ display: flex; flex-direction: column; align-items: center; gap: 1px; }
.swb-cap{ font-family: var(--swb-font); font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: 0.3em; padding-left: 0.3em; text-transform: uppercase; color: var(--swb-cap); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
.swb-orn::before{ content: var(--swb-orn); font-style: normal; font-size: 18px; color: var(--swb-cap); text-shadow: 0 0 10px var(--swb-glow); }
.swb-amt{
  font-family: var(--swb-font); font-weight: 800; font-size: clamp(24px, 2.8vw, 34px); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  background: var(--swb-fill); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0; filter: drop-shadow(0 0 14px var(--swb-glow)) drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55)); background-size: 100% 100%; }
.slot-winbar.pop .swb-amt{ animation: swb-pop 0.55s cubic-bezier(.2, 1.4, .4, 1); }
.slot-winbar.big .swb-amt{ font-size: clamp(28px, 3.2vw, 40px); filter: drop-shadow(0 0 22px var(--swb-glow)) drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55)); }
.slot-winbar.mega .swb-amt{ font-size: clamp(32px, 3.8vw, 48px); filter: drop-shadow(0 0 34px var(--swb-glow)) drop-shadow(0 0 10px var(--swb-glow)) drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55)); }
.slot-winbar.big .swb-orn::before, .slot-winbar.mega .swb-orn::before{ animation: swb-twinkle 0.9s ease-in-out infinite; }
.slot-winbar.mega .swb-orn:last-child::before{ animation-delay: -0.45s; }
@keyframes swb-pop{ 0%{ transform: scale(0.6); } 100%{ transform: scale(1); } }
@keyframes swb-twinkle{ 0%, 100%{ transform: scale(1) rotate(0); opacity: 0.8; } 50%{ transform: scale(1.5) rotate(25deg); opacity: 1; } }
/* the strip sits in the breadcrumb row (centred over it); on a phone the crumbs take the whole row, so it gets a row of its own under them */
.game-top:has(> .slot-winbar){ position: relative; min-height: 48px; }
@media (max-width: 1080px){ .game-top:has(> .slot-winbar){ flex-wrap: wrap; } .slot-winbar{ position: static; flex: 1 0 100%; height: 40px; gap: 8px; } .swb-cap{ display: none; } .swb-cap{ font-size: 11px; letter-spacing: 0.2em; } .swb-orn::before{ font-size: 14px; } }
@media (prefers-reduced-motion: reduce){ .slot-winbar, .slot-winbar.pop .swb-amt, .swb-orn::before{ animation: none !important; transition: none; } }

/* Crazy Monkey: slab letters in jungle lime with a dark-wood outline, leaves for ornaments */
.game[data-game="slot-baboon"] .slot-winbar{ --swb-font: 'Alfa Slab One', Georgia, serif; --swb-fill: linear-gradient(180deg, #f3ffb0, #9be23a 55%, #3f8a1c); --swb-glow: rgba(150, 230, 60, 0.6); --swb-cap: #d9f59a; --swb-orn: '❦'; }
.game[data-game="slot-baboon"] .swb-amt{ -webkit-text-stroke: 2px #2b1608; paint-order: stroke fill; font-weight: 400; }
/* Candy Bonanza: bubbly jelly numbers, yellow to orange under a berry outline */
.game[data-game="slot-candy"] .slot-winbar{ --swb-fill: linear-gradient(180deg, #fff7a8, #ffc93d 50%, #ff8a1f); --swb-glow: rgba(255, 120, 190, 0.7); --swb-cap: #ffd1ec; --swb-orn: '●'; }
.game[data-game="slot-candy"] .swb-amt{ -webkit-text-stroke: 3px #9a2a66; paint-order: stroke fill; font-weight: 800; letter-spacing: 0.04em; }
/* 1001 Genie Fortunes: palace gold serif, small caps, turquoise glow */
.game[data-game="slot-genie"] .slot-winbar{ --swb-font: Georgia, 'Times New Roman', serif; --swb-fill: linear-gradient(180deg, #fff3c0, #f0b93a 55%, #9a6410); --swb-glow: rgba(40, 214, 200, 0.6); --swb-cap: #7fe9de; --swb-orn: '✧'; }
.game[data-game="slot-genie"] .swb-amt{ font-weight: 700; font-style: italic; }
/* Gonzo's Quest: carved-stone slab, cream under a terracotta outline */
.game[data-game="slot-gonzo"] .slot-winbar{ --swb-font: 'Alfa Slab One', Georgia, serif; --swb-fill: linear-gradient(180deg, #fff2d0, #e3b27a 60%, #b07840); --swb-glow: rgba(255, 150, 60, 0.5); --swb-cap: #f3d6a8; --swb-orn: '◆'; }
.game[data-game="slot-gonzo"] .swb-amt{ -webkit-text-stroke: 2px #5a2410; paint-order: stroke fill; font-weight: 400; }
/* Joker Fruits: theatre italic, ivory with a crimson outline, diamonds */
.game[data-game="slot-joker"] .slot-winbar{ --swb-font: var(--jk-serif); --swb-fill: linear-gradient(180deg, #fffaf0, #f2e3bd 55%, #d9b45a); --swb-glow: rgba(230, 40, 70, 0.65); --swb-cap: #f2c24a; --swb-orn: '♦'; }
.game[data-game="slot-joker"] .swb-amt{ font-style: italic; font-weight: 700; -webkit-text-stroke: 2px #7a0f24; paint-order: stroke fill; }
/* Joker Supermeter: the same theatre in sapphire and ice */
.game[data-game="slot-supermeter"] .slot-winbar{ --swb-font: var(--sm-serif); --swb-fill: linear-gradient(180deg, #ffffff, #bfe0ff 55%, #5a9bff); --swb-glow: rgba(60, 130, 255, 0.7); --swb-cap: #f2c24a; --swb-orn: '♦'; }
.game[data-game="slot-supermeter"] .swb-amt{ font-style: italic; font-weight: 700; -webkit-text-stroke: 2px #0c2a66; paint-order: stroke fill; }
/* Starburst: slanted neon, flame orange to gold under a cyan glow */
.game[data-game="slot-starburst"] .slot-winbar{ --swb-fill: linear-gradient(180deg, #fff0a0, #ffb02e 55%, #ff5a1f); --swb-glow: rgba(60, 230, 255, 0.7); --swb-cap: #8ef2ff; --swb-orn: '✦'; }
.game[data-game="slot-starburst"] .swb-amt{ font-style: italic; letter-spacing: 0.04em; }
/* Book of Dead: tomb capitals in worn gold, lapis glow */
.game[data-game="slot-sands"] .slot-winbar{ --swb-font: var(--bd-serif); --swb-fill: linear-gradient(180deg, #fff0b0, #e0b04f 55%, #8a6418); --swb-glow: rgba(40, 110, 220, 0.65); --swb-cap: #8fb8ff; --swb-orn: '☥'; }
.game[data-game="slot-sands"] .swb-amt{ font-weight: 700; letter-spacing: 0.08em; }
/* Fruit Classic: Vegas sign, white tubes with a pink and cyan neon halo */
.game[data-game="slot-fruits"] .slot-winbar{ --swb-fill: linear-gradient(180deg, #fff, #ffe6f6); --swb-glow: rgba(255, 70, 170, 0.8); --swb-cap: #7fe6ff; --swb-orn: '★'; }
.game[data-game="slot-fruits"] .swb-amt{ filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 14px #ff3fa8) drop-shadow(0 0 26px #27d4ff); }
/* Neon Gems: cut-crystal serif, lavender to violet */
.game[data-game="slot-gems"] .slot-winbar{ --swb-font: Georgia, 'Times New Roman', serif; --swb-fill: linear-gradient(180deg, #ffffff, #d9c2ff 55%, #8f5cff); --swb-glow: rgba(160, 90, 255, 0.8); --swb-cap: #cdb2ff; --swb-orn: '◈'; }
.game[data-game="slot-gems"] .swb-amt{ font-weight: 700; }
/* Dead or Alive 2: WANTED poster, Rye letters in cream with a blood-red drop */
.game[data-game="slot-frontier"] .slot-winbar{ --swb-font: var(--df-west); --swb-fill: linear-gradient(180deg, #fff6df, #ecd49a); --swb-glow: rgba(200, 40, 30, 0.55); --swb-cap: #f0c36a; --swb-orn: '★'; }
.game[data-game="slot-frontier"] .swb-amt{ font-weight: 400; -webkit-text-stroke: 1.5px #3a0a06; paint-order: stroke fill; filter: drop-shadow(3px 3px 0 #8f1d12) drop-shadow(0 0 16px var(--swb-glow)); }

/* ===== Phones and tablets (<=1080px, the width of the bottom dock): no breadcrumb row, no win headline over the field;
   the way back and the random pick are two icon buttons fixed in the bottom corners, above the dock ===== */
@media (max-width: 1080px){
  .game-top{ display: none !important; }
  .random-fab:not([hidden]), .lobby-fab:not([hidden]){ display: inline-flex; }
  .random-fab, .lobby-fab{ height: 48px; padding: 0 8px; bottom: calc(14px + var(--dock-h, 0px)); }
  .random-fab{ right: 14px; left: auto; }
  .lobby-fab{ left: 14px; right: auto; }
  .random-fab .rf-label, .lobby-fab .rf-label{ display: none; }
  .random-fab[data-page="lobby"], .lobby-fab[data-page="other"]{ bottom: 14px; }
  [dir="rtl"] .random-fab{ left: 14px; right: auto; }
  [dir="rtl"] .lobby-fab{ right: 14px; left: auto; }
}
/* in a slot the corners beside the win digits (the bottom row of the dock, under SPIN) are free: the two buttons sit there */
@media (max-width: 1080px){
  body:has(.game.slot-wide) .random-fab[data-page="game"], body:has(.game.slot-wide) .lobby-fab[data-page="game"]{ bottom: var(--fab-bottom, 12px); z-index: 300; }
}

/* ===== Free spins on a phone (<=1080px): the HUD and the bonus overlays (intro, wish, pick, total) drop UNDER the field, in the flow of
   the board area, instead of covering the reels; the board stays in view the whole bonus ===== */
@media (max-width: 1080px){
  .stage-canvas:has(> .fs-hud, > .fs-overlay){ flex-wrap: wrap; }
  .stage .fs-hud{ position: static; transform: none; order: 3; flex: 0 1 auto; margin: 8px auto 0; }
  .stage .fs-overlay{ position: static; inset: auto; order: 4; flex: 1 0 100%; margin-top: 8px; padding: 14px 12px; border-radius: 16px; gap: 8px; }
  .fs-overlay .fs-title{ font-size: clamp(20px, 6vw, 30px); }
  .fs-overlay .fs-total{ font-size: clamp(30px, 9vw, 48px); }
  .fs-overlay .fs-sym{ width: clamp(64px, 18vw, 96px); height: clamp(64px, 18vw, 96px); }
}

/* ── Dirty Badge: a night of rain in a noir city — the case file of a dirty cop. ──
   Under the weathered brass of the logo and the wet, lamp-lit street of the backdrop: smoky film-grain panels framed in thin
   art-deco brass with stepped corners; every panel's title is a manila case-file tab with a typewritten label; the bet keys are
   old typewriter keys, − and + are brass cartridge heads, the stake reads in amber like a dashboard gauge; the field is a deco
   brass frame with rain running down its glass and fog drifting along the bottom; the payouts are evidence photos clipped to a
   dossier stamped CONFIDENTIAL, the rules are typed on that dossier. Two faces: Oswald (condensed, like the logo's lettering)
   for headings and figures, Special Elite (a worn typewriter) for labels and text. Deck controls and their dock twins share one
   rule each through :is(). ── */
.game[data-game="slot-badge"],
.mobile-dock[data-game="slot-badge"]{
  --nb-ink: #0b0907;
  --nb-smoke: #17120e;
  --nb-brass: #c9a05a;
  --nb-brass-hi: #f2dca6;
  --nb-brass-lo: #6b4a1c;
  --nb-blood: #a8141f;
  --nb-neon: #ff3346;
  --nb-amber: #ffcf7a;
  --nb-paper: #ece0c4;
  --nb-paper-dk: #cdb68a;
  --nb-inktext: #2a1d10;
  --nb-cond: 'Oswald', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --nb-type: 'Special Elite', 'Courier New', monospace;
  /* film grain: fractal noise in a 140px tile */
  --nb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  /* an art-deco corner: two stepped brass strokes */
  --nb-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 23 V1 H23' fill='none' stroke='%23c9a05a' stroke-width='2'/%3E%3Cpath d='M6 23 V6 H23' fill='none' stroke='%23c9a05a' stroke-width='1' opacity='.6'/%3E%3Crect x='1' y='1' width='4' height='4' fill='%23f2dca6'/%3E%3C/svg%3E");
}
.game[data-game="slot-badge"] .sidebar,
.game[data-game="slot-badge"] .game-info,
.mobile-dock[data-game="slot-badge"]{
  --text: #efe3c4;
  --muted: #a8977a;
  --border: rgba(201, 160, 90, 0.42);
  --accent: #e8c27a;
  --accent2: #e8c27a;
  --panel: #15110d;
  --panel2: #211a13;
}
.view:has(> .game[data-game="slot-badge"]){
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.74), rgba(8, 6, 5, 0.9));
  border-color: rgba(201, 160, 90, 0.28);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 30px 80px rgba(0, 0, 0, 0.7);
}
.game[data-game="slot-badge"] .game-crumb, .game[data-game="slot-badge"] .game-crumb a{ font-family: var(--nb-type); color: #a8977a; }
.game[data-game="slot-badge"] .game-crumb .cur{ color: var(--nb-brass-hi); }

/* ── the field: a deco brass frame, rain on the glass, fog along the street ── */
.game[data-game="slot-badge"] .stage.board{
  position: relative;
  border: 2px solid var(--nb-brass);
  border-radius: 6px;
  box-shadow: inset 0 0 0 6px var(--nb-ink), inset 0 0 0 7px rgba(201, 160, 90, 0.45), inset 0 0 60px rgba(0, 0, 0, 0.8), 0 0 0 1px #000, 0 20px 60px rgba(0, 0, 0, 0.75);
}
@media (min-width: 1081px){
  .game[data-game="slot-badge"] .stage.board{
    background: radial-gradient(70% 55% at 50% 115%, rgba(168, 20, 31, 0.22), transparent 70%), radial-gradient(60% 50% at 50% -10%, rgba(255, 207, 122, 0.1), transparent 70%), linear-gradient(180deg, rgba(14, 11, 8, 0.86), rgba(8, 6, 5, 0.92));
  }
}
/* the four stepped corners of the frame (the SVG of each corner is drawn for its own side) */
.game[data-game="slot-badge"] .stage.board::before{
  background:
    var(--nb-corner) left top / 26px 26px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 23 V1 H1' fill='none' stroke='%23c9a05a' stroke-width='2'/%3E%3Cpath d='M18 23 V6 H1' fill='none' stroke='%23c9a05a' stroke-width='1' opacity='.6'/%3E%3Crect x='19' y='1' width='4' height='4' fill='%23f2dca6'/%3E%3C/svg%3E") right top / 26px 26px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 1 V23 H23' fill='none' stroke='%23c9a05a' stroke-width='2'/%3E%3Cpath d='M6 1 V18 H23' fill='none' stroke='%23c9a05a' stroke-width='1' opacity='.6'/%3E%3Crect x='1' y='19' width='4' height='4' fill='%23f2dca6'/%3E%3C/svg%3E") left bottom / 26px 26px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 1 V23 H1' fill='none' stroke='%23c9a05a' stroke-width='2'/%3E%3Cpath d='M18 1 V18 H1' fill='none' stroke='%23c9a05a' stroke-width='1' opacity='.6'/%3E%3Crect x='19' y='19' width='4' height='4' fill='%23f2dca6'/%3E%3C/svg%3E") right bottom / 26px 26px no-repeat;
}
/* rain down the glass (only the transform moves, so the browser does not repaint it) and fog drifting along the bottom */
.game[data-game="slot-badge"] .stage.board::after{
  content: ''; position: absolute; left: 0; right: 0; top: -100%; height: 200%; z-index: 0; pointer-events: none; opacity: 0.55;
  background: repeating-linear-gradient(104deg, transparent 0 22px, rgba(220, 205, 175, 0.07) 22px 23px, transparent 23px 47px), repeating-linear-gradient(98deg, transparent 0 37px, rgba(220, 205, 175, 0.05) 37px 38px, transparent 38px 71px);
  animation: nb-rain 1.4s linear infinite;
}
@keyframes nb-rain{ from{ transform: translateY(0); } to{ transform: translateY(50%); } }
.game[data-game="slot-badge"] .stage.board > .stage-canvas{ position: relative; z-index: 1; }

/* ── panels: smoke and grain in thin brass, stepped deco corners ── */
.game[data-game="slot-badge"] .sidebar .panel{
  position: relative;
  margin-top: 16px;
  padding-top: 24px;
  border: 1px solid var(--nb-brass);
  border-radius: 4px;
  overflow: visible;
  background: var(--nb-grain), radial-gradient(120% 90% at 50% 0%, rgba(255, 207, 122, 0.07), transparent 60%), linear-gradient(180deg, #1c1611, #0e0b08);
  box-shadow: inset 0 0 0 4px var(--nb-ink), inset 0 0 0 5px rgba(201, 160, 90, 0.3), 0 14px 30px rgba(0, 0, 0, 0.6);
}
.game[data-game="slot-badge"] .sidebar .panel::before{
  content: ''; position: absolute; inset: 3px; pointer-events: none;
  background:
    var(--nb-corner) left top / 18px 18px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 23 V1 H1' fill='none' stroke='%23c9a05a' stroke-width='2'/%3E%3Crect x='19' y='1' width='4' height='4' fill='%23f2dca6'/%3E%3C/svg%3E") right top / 18px 18px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 1 V23 H23' fill='none' stroke='%23c9a05a' stroke-width='2'/%3E%3Crect x='1' y='19' width='4' height='4' fill='%23f2dca6'/%3E%3C/svg%3E") left bottom / 18px 18px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 1 V23 H1' fill='none' stroke='%23c9a05a' stroke-width='2'/%3E%3Crect x='19' y='19' width='4' height='4' fill='%23f2dca6'/%3E%3C/svg%3E") right bottom / 18px 18px no-repeat;
}
.game[data-game="slot-badge"] .sidebar .panel::after{ content: none; }
/* every panel's title is a manila case-file tab sticking out of the top rim, typewritten */
.game[data-game="slot-badge"] .sidebar .panel > h4{
  display: inline-block; position: relative; z-index: 1;
  margin: -36px 0 12px 6px; padding: 4px 14px 3px;
  font-family: var(--nb-type); font-size: 12.5px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--nb-inktext); text-shadow: none;
  background: linear-gradient(180deg, #f1e6cc, #d9c79e);
  border: 1px solid #8a6a36; border-bottom: 0; border-radius: 5px 5px 0 0;
  transform: rotate(-1.2deg);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.35);
}
/* the autoplay row keeps its own head: a typed label */
.game[data-game="slot-badge"] .sidebar .auto-head .mod-title{ font-family: var(--nb-type); font-size: 13px; letter-spacing: 0.16em; color: var(--nb-brass-hi); text-shadow: none; }
:is(.game[data-game="slot-badge"] .sidebar, .mobile-dock[data-game="slot-badge"]) :is(.auto-sum, .mod-toggle, .auto-field-label, .auto-cond-row, .auto-note){ font-family: var(--nb-type); color: #b8a684; }

/* the stake: a dark gauge with amber figures */
:is(.game[data-game="slot-badge"] .sidebar, .mobile-dock[data-game="slot-badge"]) :is(.stake-value, .auto-seg, .auto-run){
  border: 1px solid var(--nb-brass-lo);
  background: radial-gradient(80% 120% at 50% 0%, rgba(255, 207, 122, 0.08), transparent 70%), #070605;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(201, 160, 90, 0.2);
}
:is(.game[data-game="slot-badge"] .sidebar, .mobile-dock[data-game="slot-badge"]) .stake-num{
  font-family: var(--nb-cond); font-weight: 700; letter-spacing: 0.06em; color: var(--nb-amber);
  text-shadow: 0 0 10px rgba(255, 170, 60, 0.55), 0 0 2px rgba(255, 207, 122, 0.9);
}
/* − and +: brass cartridge heads, a primer ring in the middle */
:is(.game[data-game="slot-badge"] .sidebar, .mobile-dock[data-game="slot-badge"]) .step-btn{
  border: 2px solid #2a1d0c; border-radius: 50%; aspect-ratio: 1; height: auto;
  color: #1a1006; font-family: var(--nb-cond); font-size: 22px; font-weight: 700; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5);
  background: radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(0, 0, 0, 0.28) 35% 38%, transparent 39%), radial-gradient(circle at 35% 30%, #fff2c8, #d8b06a 42%, #8a5f24 78%, #4a3010);
  box-shadow: 0 3px 0 #1a1006, 0 6px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.12s, filter 0.12s;
}
:is(.game[data-game="slot-badge"] .sidebar, .mobile-dock[data-game="slot-badge"]) .step-btn:hover:not(:disabled){ filter: brightness(1.12); transform: translateY(-1px); }
:is(.game[data-game="slot-badge"] .sidebar, .mobile-dock[data-game="slot-badge"]) .step-btn:active:not(:disabled){ transform: translateY(2px); box-shadow: 0 1px 0 #1a1006, 0 2px 6px rgba(0, 0, 0, 0.6); }
:is(.game[data-game="slot-badge"] .sidebar, .mobile-dock[data-game="slot-badge"]) .step-btn:disabled{ filter: grayscale(0.8) brightness(0.55); }
/* Min ½ ×2 Max and the autoplay counts: keys of an old typewriter — black caps in a nickel ring */
:is(.game[data-game="slot-badge"] .sidebar, .mobile-dock[data-game="slot-badge"]) :is(.chip, .auto-opt span, .auto-seg-btn){
  font-family: var(--nb-type); font-weight: 400; color: #efe3c4;
  border: 2px solid #b9b3a6; border-radius: 999px;
  background: radial-gradient(circle at 50% 30%, #34302b, #0e0c0a 70%);
  box-shadow: 0 3px 0 #000, inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 4px rgba(0, 0, 0, 0.6);
  transition: transform 0.1s, box-shadow 0.1s, border-color 0.15s, color 0.15s;
}
:is(.game[data-game="slot-badge"] .sidebar, .mobile-dock[data-game="slot-badge"]) :is(.chip:hover:not(:disabled), .auto-opt:hover span, .auto-seg-btn:hover){ border-color: var(--nb-brass-hi); color: #fff; }
:is(.game[data-game="slot-badge"] .sidebar, .mobile-dock[data-game="slot-badge"]) :is(.chip:active:not(:disabled), .auto-seg-btn:active){ transform: translateY(2px); box-shadow: 0 1px 0 #000, inset 0 1px 0 rgba(255, 255, 255, 0.12); }
:is(.game[data-game="slot-badge"] .sidebar, .mobile-dock[data-game="slot-badge"]) :is(.chip.active, .auto-opt.on span, .auto-seg-btn.on){
  border-color: var(--nb-brass); color: var(--nb-amber);
  background: radial-gradient(circle at 50% 30%, #4a2a12, #1a0d06 70%);
  box-shadow: 0 1px 0 #000, 0 0 12px rgba(255, 170, 60, 0.35), inset 0 1px 0 rgba(255, 220, 160, 0.2);
  transform: translateY(2px);
}
:is(.game[data-game="slot-badge"] .sidebar, .mobile-dock[data-game="slot-badge"]) .chip:disabled{ opacity: 0.35; }
/* the start of the autoplay and any plain button: a brass name plate */
:is(.game[data-game="slot-badge"] .sidebar, .mobile-dock[data-game="slot-badge"]) .auto-start{
  font-family: var(--nb-cond); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #1a1006;
  border: 1px solid #2a1d0c; border-radius: 3px;
  background: linear-gradient(180deg, #f2dca6, #c9a05a 55%, #8a5f24);
  box-shadow: 0 3px 0 #1a1006, inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 16px rgba(0, 0, 0, 0.5);
}
:is(.game[data-game="slot-badge"] .sidebar, .mobile-dock[data-game="slot-badge"]) .auto-start:hover:not(:disabled){ filter: brightness(1.1); }
/* switches: a brass knob on a dark rail that glows red when on */
:is(.game[data-game="slot-badge"] .sidebar, .mobile-dock[data-game="slot-badge"]) .sw i{ background: #0b0907; border: 1px solid var(--nb-brass-lo); }
:is(.game[data-game="slot-badge"] .sidebar, .mobile-dock[data-game="slot-badge"]) .sw i::after{ background: radial-gradient(circle at 35% 30%, #fff2c8, #c9a05a 50%, #6b4a1c); }
:is(.game[data-game="slot-badge"] .sidebar, .mobile-dock[data-game="slot-badge"]) .sw input:checked ~ i{ background: linear-gradient(90deg, #4a0a10, #a8141f); box-shadow: 0 0 10px rgba(255, 51, 70, 0.45); }
:is(.game[data-game="slot-badge"] .sidebar, .mobile-dock[data-game="slot-badge"]) .auto-amt input{ font-family: var(--nb-cond); color: var(--nb-amber); background: #070605; border: 1px solid var(--nb-brass-lo); }
/* SPIN waits like a neon sign before the rain: a slow red breath behind it */
.game.slot-wide[data-game="slot-badge"] .sidebar.deck > .spin-block > .spin-img-btn:not(:disabled){ filter: drop-shadow(0 0 14px rgba(255, 51, 70, 0.35)); animation: nb-breathe 3.2s ease-in-out infinite; }
@keyframes nb-breathe{ 0%, 100%{ filter: drop-shadow(0 0 8px rgba(255, 51, 70, 0.25)); } 50%{ filter: drop-shadow(0 0 22px rgba(255, 51, 70, 0.6)); } }

/* ── the foot of the page: the dossier ── */
.game[data-game="slot-badge"] .game-info > details{
  position: relative;
  margin-top: 22px;
  padding: 26px 22px 22px;
  color: var(--nb-inktext);
  border: 1px solid #a88a52; border-radius: 3px;
  background: var(--nb-grain), linear-gradient(180deg, #f1e6cc, #e2d2ad 60%, #d4c093);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.45), 0 18px 40px rgba(0, 0, 0, 0.65), inset 0 0 50px rgba(120, 80, 30, 0.25);
}
/* a red rubber stamp in the corner of each page */
.game[data-game="slot-badge"] .game-info > details::after{
  content: 'CONFIDENTIAL'; position: absolute; right: 18px; top: 12px; pointer-events: none;
  padding: 4px 10px; border: 3px double rgba(168, 20, 31, 0.75); border-radius: 4px;
  font-family: var(--nb-cond); font-weight: 700; font-size: 15px; letter-spacing: 0.2em; color: rgba(168, 20, 31, 0.75);
  transform: rotate(-9deg); mix-blend-mode: multiply;
}
.game[data-game="slot-badge"] .game-info > details::before{ content: none; }
.game[data-game="slot-badge"] .game-info summary{
  display: inline-block; cursor: pointer;
  padding: 2px 4px; margin: 0 0 6px;
  font-family: var(--nb-type); font-size: 18px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nb-inktext);
  background: none; border: 0; box-shadow: none; text-shadow: none;
  border-bottom: 2px solid rgba(42, 29, 16, 0.6);
}
.game[data-game="slot-badge"] .game-info summary:hover{ color: var(--nb-blood); border-bottom-color: var(--nb-blood); }
.game[data-game="slot-badge"] .rules-body, .game[data-game="slot-badge"] .rules-body p{ font-family: var(--nb-type); color: var(--nb-inktext); line-height: 1.65; }
.game[data-game="slot-badge"] .rules-h{ font-family: var(--nb-cond); font-weight: 700; font-size: 20px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-inktext); text-shadow: none; border-bottom: 2px solid var(--nb-blood); display: inline-block; padding-bottom: 2px; }
.game[data-game="slot-badge"] .rules-list li{ color: var(--nb-inktext); }
/* bullet points are bullet holes */
.game[data-game="slot-badge"] .rules-list li::before{ content: ''; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, #0b0907 0 40%, #5a4a32 45% 60%, transparent 65%); box-shadow: 0 0 0 1px rgba(42, 29, 16, 0.3); }
.game[data-game="slot-badge"] :is(.paytable-rule, .paytable-note){ font-family: var(--nb-type); color: #4a3820; }
.game[data-game="slot-badge"] .paytable{ gap: 18px; }
/* the payouts are evidence photos: a dark print in a white border, clipped on at a slight angle */
.game[data-game="slot-badge"] .paytable-card{
  position: relative;
  padding: 9px 9px 12px; border: 0; border-radius: 2px;
  background: #f7f1e3; color: var(--nb-inktext);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(0, 0, 0, 0.2);
  transform: rotate(-1.6deg);
  transition: transform 0.2s, box-shadow 0.2s;
}
.game[data-game="slot-badge"] .paytable-card:nth-child(even){ transform: rotate(1.4deg); }
.game[data-game="slot-badge"] .paytable-card:nth-child(3n){ transform: rotate(-0.6deg); }
.game[data-game="slot-badge"] .paytable-card:hover{ transform: rotate(0) scale(1.04); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45); z-index: 1; }
/* the clip */
.game[data-game="slot-badge"] .paytable-card::before{ content: ''; position: absolute; top: -9px; left: 50%; width: 14px; height: 22px; margin-left: -7px; border: 2px solid #8a8478; border-radius: 7px; border-bottom-color: transparent; transform: rotate(8deg); }
.game[data-game="slot-badge"] .paytable-icon{ background: radial-gradient(circle at 50% 35%, #2a221a, #0e0b08); border-radius: 2px; padding: 6px; filter: sepia(0.15) contrast(1.05); }
.game[data-game="slot-badge"] .paytable-amt{ font-family: var(--nb-type); color: #3a2a16; }
.game[data-game="slot-badge"] .paytable-amt b{ font-family: var(--nb-cond); font-weight: 700; color: var(--nb-blood); letter-spacing: 0.04em; }
.game[data-game="slot-badge"] .hist-pill{ font-family: var(--nb-type); background: #1a140f; border: 1px solid #a88a52; color: #efe3c4; }
.game[data-game="slot-badge"] .hist-pill.win{ background: #3a0a10; border-color: var(--nb-blood); color: var(--nb-amber); }

/* ── the raid in this world: the folders lie under a desk lamp ── */
.game[data-game="slot-badge"] .fs-overlay.bd{ background: radial-gradient(60% 50% at 50% 0%, rgba(255, 207, 122, 0.22), transparent 70%), radial-gradient(70% 60% at 50% 110%, rgba(168, 20, 31, 0.3), transparent 70%), rgba(6, 5, 4, 0.94); }
.game[data-game="slot-badge"] .fs-overlay .fs-title{ font-family: var(--nb-cond); font-weight: 700; letter-spacing: 0.14em; color: var(--nb-brass-hi); text-shadow: 0 0 22px rgba(255, 170, 60, 0.45), 0 3px 0 #000; }
.game[data-game="slot-badge"] .fs-overlay :is(.fs-count, .fs-pick){ font-family: var(--nb-type); color: #e6d6b2; }
.game[data-game="slot-badge"] .bd-note.hot{ color: var(--nb-neon); font-family: var(--nb-cond); letter-spacing: 0.1em; }
.game[data-game="slot-badge"] .stage .fs-hud{ font-family: var(--nb-type); background: rgba(8, 6, 5, 0.92); border-color: var(--nb-brass); }
.game[data-game="slot-badge"] .stage .fs-hud .fs-hud-spins{ color: var(--nb-neon); }
.game[data-game="slot-badge"] .stage .slot-fire{ font-family: var(--nb-cond); letter-spacing: 0.22em; border: 2px solid var(--nb-brass-hi); background: linear-gradient(180deg, #d0202e, #6a0a12); box-shadow: 0 0 0 3px #000, 0 0 26px rgba(255, 51, 70, 0.7), 0 10px 20px rgba(0, 0, 0, 0.6); }

/* ── the phone's dock: the same smoke and brass ── */
.mobile-dock[data-game="slot-badge"]{
  background: var(--nb-grain), linear-gradient(180deg, #1b1510, #0b0907);
  border-top: 1px solid var(--nb-brass);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8), 0 -14px 30px rgba(0, 0, 0, 0.65);
}
.mobile-dock[data-game="slot-badge"] .spin-img-btn{
  background: linear-gradient(180deg, #f2dca6, #c9a05a 55%, #8a5f24) !important;
  border: 1px solid #2a1d0c !important; border-radius: 4px !important;
  box-shadow: 0 3px 0 #1a1006, 0 0 18px rgba(255, 51, 70, 0.3) !important;
}
.mobile-dock[data-game="slot-badge"] .spin-img-btn::after{ font-family: var(--nb-cond) !important; letter-spacing: 0.3em !important; color: #1a1006 !important; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6) !important; }
@media (prefers-reduced-motion: reduce){
  .game[data-game="slot-badge"] .stage.board::after, .game.slot-wide[data-game="slot-badge"] .sidebar.deck > .spin-block > .spin-img-btn{ animation: none; }
}
/* the win headline: condensed brass under a red neon glow */
.game[data-game="slot-badge"] .slot-winbar{ --swb-font: var(--nb-cond); --swb-fill: linear-gradient(180deg, #fff4d6, #e8c27a 55%, #9a6a2a); --swb-glow: rgba(255, 51, 70, 0.6); --swb-cap: #e8c27a; --swb-orn: '★'; }
.game[data-game="slot-badge"] .swb-amt{ font-weight: 700; letter-spacing: 0.06em; }
.game[data-game="slot-badge"] .swb-cap{ font-family: var(--nb-type); }
/* the typewriter face has no "½": the stake keys spell in the condensed face */
:is(.game[data-game="slot-badge"] .sidebar, .mobile-dock[data-game="slot-badge"]) .bet-row .chip{ font-family: var(--nb-cond); font-weight: 500; letter-spacing: 0.04em; }
/* aiming in Dirty Badge: the pointer is the revolver itself, muzzle up (the hotspot is the tip of the barrel) */
canvas.bd-aim{ cursor: url('/assets/games/dirty-badge/cursor.webp') 13 2, crosshair; }

/* Dirty Badge: two figures stand beside the reels and step out past the frame of the field (and the panel behind it), so the area
   must not clip them; the win counter is not used in this game (the headline above the field says the win) */
.game[data-game="slot-badge"] .stage.board{ overflow: visible; }
.view:has(> .game[data-game="slot-badge"]){ overflow: visible; }
.game[data-game="slot-badge"] .slot-hero{ z-index: 4; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.7)); }
@media (min-width: 1081px){ .game[data-game="slot-badge"] :is(.win-digits, .slot-hero-counter){ display: none !important; } }

/* Dirty Badge: no rain streaks drifting across the field (10.10.2026) */
.game[data-game="slot-badge"] .stage.board::after{ content: none; animation: none; }

/* Wide slots (10.10.2026): no drawn win digits on the board or in the console (the headline over the field shows the win),
   and that headline a little larger. The dock on a phone keeps its digits. */
@media (min-width: 1081px){
  .game.slot-wide .win-digits, .game.slot-wide .slot-hero-counter{ display: none !important; }
  .swb-amt{ font-size: 50px; }
  .slot-winbar.big .swb-amt{ font-size: 56px; }
  .slot-winbar.mega .swb-amt{ font-size: 62px; }
  .swb-cap{ font-size: 16px; }
  .swb-orn::before{ font-size: 22px; }
}

/* Candy Bonanza: the win amount was a gradient with a thick stroke eating the glyphs; now a solid pale-yellow fill with a berry outline */
.game[data-game="slot-candy"] .swb-amt{
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #fff3a8; -webkit-text-fill-color: #fff3a8; -webkit-text-stroke: 0; paint-order: normal; letter-spacing: 0.03em; font-weight: 800;
  text-shadow: -2px -2px 0 #8a1f5c, 0 -2px 0 #8a1f5c, 2px -2px 0 #8a1f5c, -2px 0 0 #8a1f5c, 2px 0 0 #8a1f5c, -2px 2px 0 #8a1f5c, 0 2px 0 #8a1f5c, 2px 2px 0 #8a1f5c, 0 5px 0 #5a0f3a;
  filter: drop-shadow(0 0 12px rgba(255, 120, 190, 0.75)); }
.game[data-game="slot-candy"] .slot-winbar.big .swb-amt, .game[data-game="slot-candy"] .slot-winbar.mega .swb-amt{ filter: drop-shadow(0 0 20px rgba(255, 120, 190, 0.9)); }

/* Zeus Lightning: no gold frame around the field either (the canvas draws none, see look.noFrame) */
.game[data-game="slot-olympus"] .stage.board{ border: 0 !important; box-shadow: none !important; }

/* 1001 Genie Fortunes: no gold frame round the field (the canvas draws none either, look.noFrame) */
.game[data-game="slot-genie"] .stage.board{ border: 0 !important; box-shadow: none !important; }

/* Book of Dead: no gold frame round the field (the canvas draws none either, look.noFrame) */
.game[data-game="slot-sands"] .stage.board{ border: 0 !important; box-shadow: none !important; }

/* Gonzo's Quest: no frame round the field (the canvas draws none either, look.noFrame) */
.game[data-game="slot-gonzo"] .stage.board{ border: 0 !important; box-shadow: none !important; }

/* ── Burning Hot: a furnace — charred plates edged in fire, tongues of flame along every top edge, the logo's red-orange-yellow ──
   Built on the auto-theme structure (game-themes-auto.css supplies the controls), so these rules only retune the palette and add what is
   this game's own; the doubled attribute selector makes them win over the generated variables. */
.game[data-gt][data-game="slot-burninghot"],
.mobile-dock[data-gt][data-game="slot-burninghot"]{
  --gt-gold: #ff8a1f; --gt-gl: #ffe08a; --gt-gd: #7a1a06;
  --gt-p: #e3261a; --gt-s: #ffb21e;
  --gt-a: #4a1007; --gt-b: #2a0a05; --gt-c: #120402;
  --gt-i: #240804; --gt-i2: #0f0302;
  --gt-sp1: #ff6a4a; --gt-sp2: #d41414; --gt-sp3: #7a0808; --gt-spi: #fff3c8;
  --gt-glow: 255, 122, 24; --gt-ink: #0a0201; --gt-text: #ffeacb; --gt-muted: #e0a77f;
  --bh-flames: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23e3261a'/%3E%3Cstop offset='.55' stop-color='%23ff8a1f'/%3E%3Cstop offset='1' stop-color='%23ffe08a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 20 C2 12 8 10 6 2 C12 6 14 12 14 20 C16 14 20 10 20 0 C25 6 26 12 27 20 C30 14 32 8 33 4 C37 8 38 14 40 20 Z' fill='url(%23g)'/%3E%3C/svg%3E");
  --gt-crest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%23ff8a1f' stroke='%23360a02' stroke-width='1.6' stroke-linejoin='round' d='M20 3c3 8 11 11 11 21a11 11 0 0 1-22 0c0-5 3-8 5-11 1 3 2 5 4 6 0-7 0-11 2-16z'/%3E%3Cpath fill='%23ffe08a' d='M20 20c2 4 5 5 5 9a5 5 0 0 1-10 0c0-3 3-4 5-9z'/%3E%3C/svg%3E");
}
.view:has(> .game[data-game="slot-burninghot"]){
  background: linear-gradient(180deg, rgba(30, 7, 4, 0.8), rgba(14, 3, 2, 0.94));
  border-color: rgba(255, 122, 24, 0.4);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 60px rgba(255, 90, 20, 0.12), 0 30px 80px rgba(0, 0, 0, 0.7);
}
.game[data-gt][data-game="slot-burninghot"] .game-crumb .cur{ color: #ffb21e; }

/* the field: no frame, a furnace glow rising from the floor */
.game[data-gt][data-game="slot-burninghot"] .stage.board{
  border: 0; box-shadow: none; border-radius: 16px;
  background: radial-gradient(85% 55% at 50% 108%, rgba(255, 90, 20, 0.34), transparent 72%), linear-gradient(180deg, rgba(22, 5, 3, 0.8), rgba(40, 9, 4, 0.88));
}

/* every panel: a charred plate with a rim of fire and live flames along its top edge */
.game[data-gt][data-game="slot-burninghot"] .sidebar .panel,
.game[data-gt][data-game="slot-burninghot"] .game-info > details{
  border: 3px solid #ff8a1f; border-radius: 14px;
  background: linear-gradient(0deg, rgba(227, 38, 26, 0.32), transparent 45%), radial-gradient(120% 90% at 50% 0%, #4a1007, #2a0a05 55%, #120402);
  box-shadow: inset 0 0 0 1px rgba(255, 224, 138, 0.35), inset 0 -14px 24px rgba(227, 38, 26, 0.22), 0 0 0 2px #0a0201, 0 10px 24px rgba(0, 0, 0, 0.55), 0 0 22px rgba(255, 110, 20, 0.28);
}
.game[data-gt][data-game="slot-burninghot"] .sidebar .panel::before,
.game[data-gt][data-game="slot-burninghot"] .game-info > details::before{
  content: ''; position: absolute; left: 10px; right: 10px; top: -19px; width: auto; height: 22px; transform: none;
  background: var(--bh-flames) repeat-x left bottom / 40px 22px; filter: drop-shadow(0 0 7px rgba(255, 122, 24, 0.85));
  transform-origin: 50% 100%; animation: bh-flicker 1.15s ease-in-out infinite alternate;
}
.game[data-gt][data-game="slot-burninghot"] .game-info > details::before{ animation-duration: 1.45s; }
@keyframes bh-flicker{ from{ transform: scaleY(0.88); opacity: 0.92; } 50%{ transform: scaleY(1.04); } to{ transform: scaleY(1.1); opacity: 1; } }

/* headings: the logo's lettering — a slab face filled with fire and outlined in dark red */
.game[data-gt][data-game="slot-burninghot"] .sidebar .panel h4,
.game[data-gt][data-game="slot-burninghot"] .rules-h{
  font-family: 'Alfa Slab One', Impact, Georgia, serif; font-weight: 400; letter-spacing: 0.1em; text-shadow: none;
  color: transparent; background: linear-gradient(180deg, #fff6a8, #ffb21e 52%, #e3261a); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 #3a0a04) drop-shadow(0 0 8px rgba(255, 122, 24, 0.5));
}
:is(.game[data-gt][data-game="slot-burninghot"] .sidebar, .mobile-dock[data-gt][data-game="slot-burninghot"]) .stake-num{ font-family: 'Alfa Slab One', Impact, serif; color: #ffe08a; }

/* − and +: hot coals — red glass discs rimmed in gold */
:is(.game[data-gt][data-game="slot-burninghot"] .sidebar, .mobile-dock[data-gt][data-game="slot-burninghot"]) .step-btn{
  color: #fff3c8; border: 2px solid #ffb21e; text-shadow: 0 1px 2px #000;
  background: radial-gradient(circle at 35% 28%, #ff8a6a 0%, #e3261a 48%, #7a0808 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 224, 138, 0.28), 0 3px 0 #0a0201, 0 5px 12px rgba(0, 0, 0, 0.55), 0 0 12px rgba(255, 90, 20, 0.4);
}
/* chips: black iron plaques with a fiery rim; the chosen one glows like a coal */
:is(.game[data-gt][data-game="slot-burninghot"] .sidebar, .mobile-dock[data-gt][data-game="slot-burninghot"]) :is(.chip, .auto-opt span){
  color: #ffd9a0; border: 2px solid #b8420c; text-shadow: 0 1px 0 #000;
  background: linear-gradient(180deg, #3a0f08, #1a0503);
  box-shadow: inset 0 0 0 1px rgba(255, 138, 31, 0.25), 0 3px 0 #0a0201, 0 5px 10px rgba(0, 0, 0, 0.5);
}
:is(.game[data-gt][data-game="slot-burninghot"] .sidebar, .mobile-dock[data-gt][data-game="slot-burninghot"]) :is(.chip.active, .chip.on, .auto-opt.on span){
  color: #fff3c8; border-color: #ffe08a; background: linear-gradient(180deg, #ff8a1f, #c2200e);
  text-shadow: 0 0 8px rgba(255, 224, 138, 0.9), 0 1px 0 #3a0a04; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.45), 0 0 16px rgba(255, 122, 24, 0.75);
}
/* the autoplay start plate and the dock's SPIN twin: the red jewel of the SPIN button */
:is(.game[data-gt][data-game="slot-burninghot"] .sidebar, .mobile-dock[data-gt][data-game="slot-burninghot"]) .auto-start{
  border-color: #ffb21e; font-family: 'Alfa Slab One', Impact, serif; font-weight: 400; letter-spacing: 0.1em;
  background: linear-gradient(180deg, #ff6a4a, #d41414 50%, #7a0808); box-shadow: inset 0 0 0 2px rgba(255, 224, 138, 0.3), 0 4px 0 #0a0201, 0 8px 16px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 90, 20, 0.45);
}
.mobile-dock[data-gt][data-game="slot-burninghot"] .spin-img-btn{
  background: linear-gradient(180deg, #ff6a4a, #d41414 50%, #7a0808) !important; border: 3px solid #ffb21e !important;
  box-shadow: inset 0 0 0 2px rgba(255, 224, 138, 0.3), 0 4px 0 #0a0201, 0 0 18px rgba(255, 90, 20, 0.5) !important;
}
.mobile-dock[data-gt][data-game="slot-burninghot"]{
  border-color: #ff8a1f; background: var(--bh-flames) repeat-x left top / 40px 14px, radial-gradient(120% 90% at 50% 0%, #4a1007, #2a0a05 55%, #120402);
  box-shadow: inset 0 0 0 1px rgba(255, 224, 138, 0.3), 0 -8px 26px rgba(0, 0, 0, 0.55), 0 0 22px rgba(255, 110, 20, 0.3);
}
/* the Payouts and Rules plates: red enamel with a gold rim */
.game[data-gt][data-game="slot-burninghot"] .game-info summary{
  font-family: 'Alfa Slab One', Impact, serif; font-weight: 400; color: #fff3c8; text-shadow: 0 1px 0 #3a0a04;
  border-color: #ffb21e; background: linear-gradient(180deg, #ff6a4a, #d41414 50%, #7a0808);
}
.game[data-gt][data-game="slot-burninghot"] .game-info summary::after{ color: #fff3c8; }
.game[data-gt][data-game="slot-burninghot"] .paytable-card{ border-color: #b8420c; background: linear-gradient(180deg, #2a0a05, #120402); }
.game[data-gt][data-game="slot-burninghot"] .rules-list li::before{ background: var(--gt-crest) center / contain no-repeat; }

/* the win headline: fire lettering */
.game[data-game="slot-burninghot"] .slot-winbar{ --swb-font: 'Alfa Slab One', Impact, Georgia, serif; --swb-fill: linear-gradient(180deg, #fff6a8, #ffb21e 50%, #e3261a); --swb-glow: rgba(255, 110, 20, 0.85); --swb-cap: #ffd9a0; --swb-orn: '✹'; }
.game[data-game="slot-burninghot"] .swb-amt{ letter-spacing: 0.04em; filter: drop-shadow(0 3px 0 #3a0a04) drop-shadow(0 0 14px rgba(255, 110, 20, 0.75)); }
@media (prefers-reduced-motion: reduce){ .game[data-gt][data-game="slot-burninghot"] :is(.sidebar .panel, .game-info > details)::before{ animation: none; } }

/* ── Mega Moolah: the savanna at sunset under the logo's glossy jelly — deep acacia-green glass in a thick gold rim,
   leaves and a gold paw coin over every panel, jelly-green buttons with sun-yellow lettering (the "MEGA" and "MOOLAH" of
   the logo), gold coins for − and +. Over the reels: the four progressive jackpots, and the Jackpot Wheel. ── */
.game[data-game="slot-moolah"],
.mobile-dock[data-game="slot-moolah"]{
  --mm-night: #07170a;
  --mm-deep: #0d2a12;
  --mm-green: #1f6b2a;
  --mm-jelly-hi: #8ff59e;
  --mm-jelly: #33c25a;
  --mm-jelly-lo: #137a33;
  --mm-gold-hi: #fff3a6;
  --mm-gold: #ffcc2e;
  --mm-gold-lo: #c27a0a;
  --mm-amber: #ff9a1f;
  --mm-ink: #0a2a10;
  --mm-brown: #6b3d0f;
  --mm-font: 'Lilita One', 'Sora', 'Inter', sans-serif;
  --mm-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 48%);
  --mm-jelly-fill: linear-gradient(180deg, var(--mm-jelly-hi), var(--mm-jelly) 45%, var(--mm-jelly-lo));
  --mm-gold-fill: linear-gradient(180deg, var(--mm-gold-hi), var(--mm-gold) 45%, var(--mm-gold-lo));
  --mm-coin: radial-gradient(circle at 35% 30%, #fff6c0 0%, #ffd23a 35%, #e09a12 72%, #9a5e06 100%);
  --mm-paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -14 28 28'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.35' cy='.3'%3E%3Cstop offset='0' stop-color='%23fff6c0'/%3E%3Cstop offset='.45' stop-color='%23ffd23a'/%3E%3Cstop offset='1' stop-color='%23b46c08'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle r='13' fill='url(%23g)' stroke='%237a4606' stroke-width='1.2'/%3E%3Ccircle r='10' fill='none' stroke='%23c88410' stroke-width='1'/%3E%3Cg fill='%238a520e'%3E%3Cellipse cx='0' cy='3.2' rx='4.6' ry='3.8'/%3E%3Ccircle cx='-5.6' cy='-2.6' r='1.9'/%3E%3Ccircle cx='-2' cy='-5.8' r='1.9'/%3E%3Ccircle cx='2' cy='-5.8' r='1.9'/%3E%3Ccircle cx='5.6' cy='-2.6' r='1.9'/%3E%3C/g%3E%3C/svg%3E");
  --mm-leaves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34'%3E%3Cdefs%3E%3ClinearGradient id='l' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2398f07a'/%3E%3Cstop offset='1' stop-color='%23238a2a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23l)' stroke='%230a3a12' stroke-width='1.4'%3E%3Cpath d='M44 20 C30 6 14 6 4 14 C16 22 32 26 44 20 Z'/%3E%3Cpath d='M46 14 C40 2 26 -2 16 2 C24 12 36 16 46 14 Z'/%3E%3Cpath d='M76 20 C90 6 106 6 116 14 C104 22 88 26 76 20 Z'/%3E%3Cpath d='M74 14 C80 2 94 -2 104 2 C96 12 84 16 74 14 Z'/%3E%3C/g%3E%3Cg stroke='%230a3a12' stroke-width='1' fill='none' opacity='.55'%3E%3Cpath d='M44 20 C32 14 18 12 6 14'/%3E%3Cpath d='M76 20 C88 14 102 12 114 14'/%3E%3C/g%3E%3C/svg%3E");
}
.game[data-game="slot-moolah"] .sidebar,
.game[data-game="slot-moolah"] .game-info,
.mobile-dock[data-game="slot-moolah"]{
  --text: #f4ffe8;
  --muted: #b8dca8;
  --border: rgba(255, 204, 46, 0.45);
  --accent: #ffcc2e;
  --accent2: #ffcc2e;
  --panel: #0d2a12;
  --panel2: #1f6b2a;
}

/* the page plate: dusk-green glass, the sunset glowing through at the edges */
.view:has(> .game[data-game="slot-moolah"]){
  background: linear-gradient(180deg, rgba(10, 34, 14, 0.82), rgba(6, 20, 9, 0.9));
  border-color: rgba(255, 204, 46, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 154, 31, 0.2), 0 26px 70px rgba(0, 0, 0, 0.55);
}
.game[data-game="slot-moolah"] .game-crumb,
.game[data-game="slot-moolah"] .game-crumb a{ color: var(--muted); }
.game[data-game="slot-moolah"] .game-crumb .cur{ color: var(--mm-gold); font-weight: 700; }

/* the field: no frame, only a soft green glow over the savanna */
.game[data-game="slot-moolah"] .stage.board{
  border: 0;
  border-radius: 22px;
  box-shadow: inset 0 0 46px rgba(51, 194, 90, 0.18);
}
@media (min-width: 1081px){
  .game[data-game="slot-moolah"] .stage.board{
    background: radial-gradient(90% 60% at 50% 100%, rgba(255, 154, 31, 0.22), transparent 70%), rgba(6, 22, 9, 0.55);
  }
}

/* every panel — the deck's and the boards at the foot of the page — is acacia-green glass in a thick gold rim */
.game[data-game="slot-moolah"] .sidebar .panel,
.game[data-game="slot-moolah"] .game-info > details{
  position: relative;
  margin-top: 10px;
  padding-top: 24px;
  padding-bottom: 22px;
  border: 3px solid var(--mm-gold);
  border-radius: 20px;
  overflow: visible;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(143, 245, 158, 0.16), transparent 60%),
    radial-gradient(90% 60% at 50% 115%, rgba(255, 154, 31, 0.2), transparent 70%),
    linear-gradient(180deg, #164a1d, var(--mm-deep) 60%, var(--mm-night));
  box-shadow:
    inset 0 0 0 2px var(--mm-gold-lo),
    inset 0 2px 0 3px rgba(255, 243, 166, 0.12),
    inset 0 -14px 24px rgba(0, 0, 0, 0.35),
    0 0 0 2px var(--mm-ink),
    0 10px 26px rgba(0, 0, 0, 0.45);
}
/* the crest: two leaf pairs and a gold paw coin on the middle of the top rim, like the coin of the logo */
.game[data-game="slot-moolah"] .sidebar .panel::before,
.game[data-game="slot-moolah"] .game-info > details::before{
  content: '';
  position: absolute;
  left: 50%; top: -19px;
  width: 120px; height: 34px;
  transform: translateX(-50%);
  pointer-events: none;
  background: var(--mm-paw) center / 30px 30px no-repeat, var(--mm-leaves) center / 120px 34px no-repeat;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45));
}
/* gold paw coins in the bottom corners */
.game[data-game="slot-moolah"] .sidebar .panel::after,
.game[data-game="slot-moolah"] .game-info > details::after{
  content: '';
  position: absolute;
  left: 8px; right: 8px; bottom: 6px;
  height: 16px;
  pointer-events: none;
  background: var(--mm-paw) left center / 16px 16px no-repeat, var(--mm-paw) right center / 16px 16px no-repeat;
  opacity: 0.85;
}
/* headings: sun-yellow jelly lettering with a deep green outline, the "MOOLAH" of the logo */
.game[data-game="slot-moolah"] .sidebar .panel h4,
.game[data-game="slot-moolah"] .rules-h{
  font-family: var(--mm-font);
  font-weight: 400;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mm-gold);
  -webkit-text-stroke: 1px var(--mm-ink);
  paint-order: stroke fill;
  text-shadow: 0 2px 0 var(--mm-ink), 0 0 10px rgba(255, 204, 46, 0.45);
}

/* inset dusk: the stake plaque, the segment trays, the run box */
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) :is(.stake-value, .auto-seg, .auto-run){
  border: 2px solid var(--mm-gold-lo);
  border-radius: 14px;
  background: linear-gradient(180deg, #04120a, #0b2410);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 243, 166, 0.25);
}
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .stake-num{
  font-family: var(--mm-font);
  font-weight: 400;
  font-size: 22px;
  color: var(--mm-gold);
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(255, 204, 46, 0.5);
}
/* − and +: gold coins */
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .step-btn{
  border: 2px solid var(--mm-brown);
  border-radius: 50%;
  aspect-ratio: 1;
  height: auto;
  color: var(--mm-brown);
  font-family: var(--mm-font);
  font-size: 24px;
  font-weight: 400;
  text-shadow: 0 1px 0 rgba(255, 246, 192, 0.8);
  background: var(--mm-coin);
  box-shadow: inset 0 0 0 3px rgba(255, 246, 192, 0.35), inset 0 -3px 5px rgba(122, 70, 6, 0.5), 0 3px 0 var(--mm-brown), 0 6px 12px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.12s ease;
}
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .step-btn:hover:not(:disabled){ filter: brightness(1.1); border-color: var(--mm-brown); color: var(--mm-brown); }
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .step-btn:active:not(:disabled){
  transform: translateY(2px);
  box-shadow: inset 0 0 0 3px rgba(255, 246, 192, 0.35), inset 0 -3px 5px rgba(122, 70, 6, 0.5), 0 1px 0 var(--mm-brown), 0 2px 5px rgba(0, 0, 0, 0.45);
}
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .step-btn:disabled{ filter: grayscale(0.8) brightness(0.7); opacity: 0.55; }

/* the stake slider: a gold rail, jelly green where it has grown, a paw coin for the thumb */
.game[data-game="slot-moolah"] .sidebar .ladder::-webkit-slider-runnable-track{
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mm-jelly) var(--fill, 0%), #04120a var(--fill, 0%));
  box-shadow: 0 0 0 2px var(--mm-gold-lo), inset 0 2px 3px rgba(0, 0, 0, 0.45);
}
.game[data-game="slot-moolah"] .sidebar .ladder::-webkit-slider-thumb{
  width: 26px; height: 26px; margin-top: -8px;
  background: var(--mm-paw) center / 100% 100% no-repeat;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}
.game[data-game="slot-moolah"] .sidebar .ladder::-moz-range-track{ height: 10px; background: #04120a; }
.game[data-game="slot-moolah"] .sidebar .ladder::-moz-range-progress{ height: 10px; background: var(--mm-jelly); }
.game[data-game="slot-moolah"] .sidebar .ladder::-moz-range-thumb{ width: 26px; height: 26px; border: 0; background: var(--mm-paw) center / 100% 100% no-repeat; }
.game[data-game="slot-moolah"] .sidebar .ladder-ticks i.on{ background: var(--mm-gold); }

/* chips and options: glossy jelly-green pills with white lettering; the chosen one is sun-yellow jelly */
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) :is(.chip, .auto-opt span){
  color: #fff;
  font-family: var(--mm-font);
  font-weight: 400;
  letter-spacing: 0.04em;
  border: 2px solid var(--mm-ink);
  border-radius: 999px;
  background: var(--mm-gloss), var(--mm-jelly-fill);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 -2px 4px rgba(10, 42, 16, 0.4), 0 3px 0 var(--mm-ink), 0 4px 9px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 0 var(--mm-ink), 0 0 2px var(--mm-ink);
  transition: transform 0.1s ease, filter 0.15s ease;
}
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) :is(.chip:hover:not(:disabled), .auto-opt:hover span){ color: #fff; border-color: var(--mm-ink); filter: brightness(1.12); }
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .chip:active:not(:disabled){ transform: translateY(2px); }
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) :is(.chip.active, .auto-opt.on span){
  color: var(--mm-ink);
  border-color: var(--mm-ink);
  background: var(--mm-gloss), var(--mm-gold-fill);
  box-shadow: inset 0 -2px 4px rgba(154, 94, 6, 0.4), 0 3px 0 var(--mm-ink), 0 0 14px rgba(255, 204, 46, 0.55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .chip:disabled{ filter: grayscale(0.85) brightness(0.7); opacity: 0.5; }
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .auto-seg-btn{ color: var(--muted); border-radius: 999px; font-family: var(--mm-font); font-weight: 400; }
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .auto-seg-btn.on{
  color: var(--mm-ink);
  background: var(--mm-gloss), var(--mm-gold-fill);
  box-shadow: 0 0 10px rgba(255, 204, 46, 0.5);
}

/* the autoplay summary line (count · speed · set up) reads in light leaf */
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) :is(.auto-head, .auto-summary, .auto-toggle){ color: var(--mm-jelly-hi); }

/* switches: a dusk groove with a paw coin that slides onto jelly green */
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .sw{
  border: 2px solid var(--mm-gold-lo);
  background: #04120a;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .sw i{ top: 2px; background: var(--mm-paw) center / 100% 100% no-repeat; }
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .sw:has(input:checked){ border-color: var(--mm-ink); background: var(--mm-jelly-fill); }
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .auto-amt input{
  border: 2px solid var(--mm-gold-lo);
  border-radius: 10px;
  background: #04120a;
  color: var(--mm-gold);
}
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .auto-cond{ border-top: 2px dashed rgba(255, 204, 46, 0.3); }
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) :is(.auto-cond-row, .auto-field-label, .auto-sum, .auto-note){ color: #d6f0c8; }
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .bar{ background: #04120a; }
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .bar i{ background: var(--mm-jelly-fill); }

/* the big buttons: SPIN is a fat jelly-green pill with sun-yellow lettering in a gold rim, the autoplay start a gold one */
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .btn-deal{
  min-height: 74px;
  color: var(--mm-gold);
  font-family: var(--mm-font);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  -webkit-text-stroke: 1.5px var(--mm-ink);
  paint-order: stroke fill;
  border: 4px solid var(--mm-gold);
  border-radius: 999px;
  background: var(--mm-gloss), radial-gradient(120% 90% at 50% 10%, var(--mm-jelly-hi), var(--mm-jelly) 45%, var(--mm-jelly-lo) 100%) !important;
  box-shadow: inset 0 0 0 2px var(--mm-gold-lo), inset 0 -6px 12px rgba(10, 60, 20, 0.45), 0 0 0 3px var(--mm-ink), 0 6px 0 var(--mm-ink), 0 12px 24px rgba(0, 0, 0, 0.5);
  text-shadow: 0 3px 0 var(--mm-ink), 0 0 16px rgba(255, 204, 46, 0.6);
  animation: mm-breathe 2.6s ease-in-out infinite;
  transition: transform 0.12s ease, filter 0.15s ease;
}
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .btn-deal::before,
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .btn-deal::after{ display: none; }
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .btn-deal:hover:not(:disabled){ filter: brightness(1.1) saturate(1.1); color: var(--mm-gold-hi); }
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .btn-deal:active:not(:disabled){
  transform: translateY(4px);
  box-shadow: inset 0 0 0 2px var(--mm-gold-lo), inset 0 -6px 12px rgba(10, 60, 20, 0.45), 0 0 0 3px var(--mm-ink), 0 2px 0 var(--mm-ink), 0 6px 12px rgba(0, 0, 0, 0.5);
}
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .btn-deal:disabled{
  color: #c9d8b8;
  background: linear-gradient(180deg, #4c6a48, #2a3e28) !important;
  filter: saturate(0.5);
  animation: none;
  opacity: 1;
}
@keyframes mm-breathe{
  0%, 100%{ box-shadow: inset 0 0 0 2px var(--mm-gold-lo), inset 0 -6px 12px rgba(10, 60, 20, 0.45), 0 0 0 3px var(--mm-ink), 0 6px 0 var(--mm-ink), 0 12px 24px rgba(0, 0, 0, 0.5); }
  50%{ box-shadow: inset 0 0 0 2px var(--mm-gold-lo), inset 0 -6px 12px rgba(10, 60, 20, 0.45), 0 0 0 3px var(--mm-ink), 0 6px 0 var(--mm-ink), 0 12px 24px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 204, 46, 0.55); }
}
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .auto-start{
  color: var(--mm-ink);
  font-family: var(--mm-font);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 3px solid var(--mm-ink);
  border-radius: 999px;
  background: var(--mm-gloss), var(--mm-gold-fill);
  box-shadow: inset 0 -3px 6px rgba(154, 94, 6, 0.4), 0 4px 0 var(--mm-ink), 0 8px 16px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .auto-start::before,
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .auto-start::after{ display: none; }
:is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .auto-start:hover:not(:disabled){ filter: brightness(1.08); color: var(--mm-ink); }
.game[data-game="slot-moolah"] .sidebar .spin-block{
  padding: 4px 0 2px;
  background: radial-gradient(60% 60% at 50% 45%, rgba(255, 154, 31, 0.28), transparent 70%);
}

/* history: wins are gold coins, losses dusk */
.game[data-game="slot-moolah"] .hist-pill{ border: 1px solid var(--mm-gold-lo); background: #04120a; color: var(--muted); }
.game[data-game="slot-moolah"] .hist-pill.win{ color: var(--mm-ink); background: var(--mm-gold-fill); }

/* payouts, history and rules at the foot of the page */
.game[data-game="slot-moolah"] .game-info{ gap: 28px; margin-top: 38px; }
.game[data-game="slot-moolah"] .game-info > details{ padding-top: 22px; }
.game[data-game="slot-moolah"] .game-info summary{
  width: max-content;
  margin: 0 auto;
  padding: 9px 30px;
  border: 3px solid var(--mm-ink);
  border-radius: 999px;
  color: var(--mm-gold);
  font-family: var(--mm-font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.12em;
  -webkit-text-stroke: 1px var(--mm-ink);
  paint-order: stroke fill;
  background: var(--mm-gloss), var(--mm-jelly-fill);
  box-shadow: 0 0 0 2px var(--mm-gold), 0 4px 0 var(--mm-ink), 0 8px 14px rgba(0, 0, 0, 0.35);
  text-shadow: 0 2px 0 var(--mm-ink);
}
.game[data-game="slot-moolah"] .game-info summary:hover{ filter: brightness(1.1); }
.game[data-game="slot-moolah"] .game-info details[open] > summary{ margin-bottom: 10px; }
.game[data-game="slot-moolah"] .rules-body{ padding: 4px 26px 6px; color: #e4f6da; font-size: 14px; }
.game[data-game="slot-moolah"] .rules-list{ list-style: none; padding-left: 4px; }
.game[data-game="slot-moolah"] .rules-list li{ position: relative; padding-left: 26px; }
.game[data-game="slot-moolah"] .rules-list li::before{
  content: '';
  position: absolute;
  left: 0; top: 0.15em;
  width: 17px; height: 17px;
  background: var(--mm-paw) center / 100% 100% no-repeat;
}
.game[data-game="slot-moolah"] .paytable{ gap: 14px; padding: 6px 18px 4px; }
.game[data-game="slot-moolah"] .paytable-card{
  min-width: 112px;
  padding: 10px 12px 12px;
  border: 2px solid var(--mm-gold-lo);
  border-radius: 16px;
  background: radial-gradient(100% 70% at 50% 0%, rgba(143, 245, 158, 0.16), transparent 70%), linear-gradient(180deg, #0b2410, #04120a);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--mm-ink);
}
.game[data-game="slot-moolah"] .paytable-card:hover{ box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--mm-ink), 0 0 16px rgba(255, 204, 46, 0.5); }
.game[data-game="slot-moolah"] .paytable-icon{ width: 64px; height: 64px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5)); }
.game[data-game="slot-moolah"] .paytable-amt{ color: #cfe8c2; }
.game[data-game="slot-moolah"] .paytable-amt b{ color: var(--mm-gold); font-weight: 800; }
.game[data-game="slot-moolah"] :is(.paytable-rule, .paytable-note){ color: #e4f6da; }

/* the mobile dock (≤1080px): the same acacia glass with the crest, SPIN as the jelly pill */
.mobile-dock[data-game="slot-moolah"]{
  border-top: 3px solid var(--mm-gold);
  background: radial-gradient(90% 80% at 50% 0%, rgba(143, 245, 158, 0.14), transparent 60%), linear-gradient(180deg, #164a1d, var(--mm-deep) 55%, var(--mm-night));
  box-shadow: inset 0 2px 0 var(--mm-gold-lo), 0 -14px 34px rgba(0, 0, 0, 0.5);
  padding-top: 18px;
}
.mobile-dock[data-game="slot-moolah"]::before{
  content: '';
  position: absolute;
  left: 50%; top: -18px;
  width: 120px; height: 34px;
  transform: translateX(-50%);
  pointer-events: none;
  background: var(--mm-paw) center / 30px 30px no-repeat, var(--mm-leaves) center / 120px 34px no-repeat;
}
.mobile-dock[data-game="slot-moolah"] .btn-deal{ min-height: 56px; font-size: 26px; }

/* ≤1080px the SPIN art becomes a text button (styles.css): the same jelly pill as the sign, in the dock */
.mobile-dock[data-game="slot-moolah"] .spin-img-btn{
  color: var(--mm-gold);
  font-family: var(--mm-font);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.1em;
  -webkit-text-stroke: 1.5px var(--mm-ink);
  paint-order: stroke fill;
  border: 4px solid var(--mm-gold);
  border-radius: 999px;
  background: var(--mm-gloss), radial-gradient(120% 90% at 50% 10%, var(--mm-jelly-hi), var(--mm-jelly) 45%, var(--mm-jelly-lo) 100%) !important;
  box-shadow: inset 0 0 0 2px var(--mm-gold-lo), 0 0 0 3px var(--mm-ink), 0 5px 0 var(--mm-ink), 0 10px 20px rgba(0, 0, 0, 0.5);
  text-shadow: 0 3px 0 var(--mm-ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mobile-dock[data-game="slot-moolah"] .spin-img-btn:disabled{ color: #c9d8b8; background: linear-gradient(180deg, #4c6a48, #2a3e28) !important; filter: saturate(0.5); }

/* the win headline over the board: the logo's jelly gold under a green outline */
.game[data-game="slot-moolah"] .slot-winbar{ --swb-font: 'Lilita One', 'Sora', sans-serif; --swb-fill: linear-gradient(180deg, #fff7b0, #ffcc2e 55%, #e08a0a); --swb-glow: rgba(255, 170, 40, 0.7); --swb-cap: #b8f0a0; --swb-orn: '✿'; }
.game[data-game="slot-moolah"] .swb-amt{ -webkit-text-stroke: 3px var(--mm-ink); paint-order: stroke fill; font-weight: 400; letter-spacing: 0.03em; }

/* the four progressive jackpots over the reels: four plates in the colours of the wheel, the Mega wider and burning gold */
.mm-pots{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.5fr;
  gap: 10px;
  width: 100%;
  max-width: 980px;
  margin: 2px auto 12px;
  font-family: 'Lilita One', 'Sora', sans-serif;
}
.mm-pot{
  --c1: #8ff59e; --c2: #1f9a3e; --c3: #0b3d17;
  position: relative;
  padding: 7px 10px 8px;
  border: 3px solid var(--c1);
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 46%), linear-gradient(180deg, var(--c2), var(--c3));
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 0 2px #071a0a, 0 6px 14px rgba(0, 0, 0, 0.45), 0 0 16px color-mix(in srgb, var(--c1) 35%, transparent);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.mm-pot-minor{ --c1: #8fd0ff; --c2: #2a78d1; --c3: #0d2c5a; }
.mm-pot-major{ --c1: #ff9e8a; --c2: #d1452f; --c3: #5a120a; }
.mm-pot-mega{ --c1: #fff3a6; --c2: #f0a516; --c3: #6b3d0f; }
.mm-pot-name{
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.6);
  paint-order: stroke fill;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.mm-pot-amt{
  font-size: clamp(16px, 1.7vw, 22px);
  color: #fff7c2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.7);
  paint-order: stroke fill;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 10px rgba(255, 220, 120, 0.45);
}
.mm-pot-mega .mm-pot-name{ color: #3a1f04; -webkit-text-stroke: 0; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
.mm-pot-mega .mm-pot-amt{ font-size: clamp(20px, 2.3vw, 30px); color: #fff; -webkit-text-stroke: 2px #6b3d0f; text-shadow: 0 3px 0 #3a1f04, 0 0 16px rgba(255, 204, 46, 0.8); }
.mm-pot-mega{ animation: mm-mega 3.2s ease-in-out infinite; }
@keyframes mm-mega{ 50%{ box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 0 2px #071a0a, 0 6px 14px rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 204, 46, 0.75); } }
.mm-pot.won{ transform: scale(1.06); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 0 2px #071a0a, 0 0 34px var(--c1), 0 0 64px var(--c1); animation: mm-won 0.5s ease-in-out infinite alternate; }
@keyframes mm-won{ to{ filter: brightness(1.25); } }
/* on a phone the four plates are two rows: the Mega on one line (its name left, its figure right), then the three small ones
   side by side. That is about half the height of the old 2x2 stack, which pushed the reels and the win line under the dock.
   During free spins the pools stand aside (.away, set by slots.js) so the bonus counter and the win have the room. */
@media (max-width: 700px){
  .mm-pots{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 6px; max-height: 120px; transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.35s ease; }
  .mm-pots.away{ max-height: 0; opacity: 0; margin-bottom: 0; overflow: hidden; pointer-events: none; }
  .mm-pot{ padding: 2px 4px 3px; border-width: 2px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 3px 8px rgba(0, 0, 0, 0.4); }
  .mm-pot-name{ font-size: 9.5px; letter-spacing: 0.12em; line-height: 1.25; -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.6); }
  .mm-pot-amt{ font-size: 14px; -webkit-text-stroke: 1px rgba(0, 0, 0, 0.7); }
  .mm-pot-mega{ grid-column: 1 / -1; order: -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 14px; }
  .mm-pot-mega .mm-pot-name{ font-size: 12px; }
  .mm-pot-mega .mm-pot-amt{ font-size: 21px; -webkit-text-stroke: 1.5px #6b3d0f; }
  .mm-pot.won{ transform: scale(1.03); }
}

/* the Jackpot Wheel: four colours of the pools, a gold rim with bulbs, a paw coin in the hub */
/* the wheel's own screen over the whole game: a dusk veil, the title, the wheel, the prize */
.mm-wheel-screen{
  position: fixed; inset: 0; z-index: 900;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(60% 55% at 50% 50%, rgba(255, 154, 31, 0.28), rgba(4, 16, 7, 0.88) 70%);
  animation: mm-in 0.3s ease both;
  cursor: pointer;
}
.mm-wheel-screen.out{ animation: mm-out 0.3s ease both; }
@keyframes mm-in{ from{ opacity: 0; } }
@keyframes mm-out{ to{ opacity: 0; } }
.mm-wheel-title{
  font-family: 'Lilita One', 'Sora', sans-serif;
  font-size: clamp(30px, 5vw, 54px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffcc2e;
  -webkit-text-stroke: 3px #0a2a10;
  paint-order: stroke fill;
  text-shadow: 0 4px 0 #0a2a10, 0 0 24px rgba(255, 204, 46, 0.6);
}
.mm-wheel-screen .fs-total{
  min-height: 1.3em;
  font-family: 'Lilita One', 'Sora', sans-serif;
  font-size: clamp(24px, 3.6vw, 40px);
  color: #fff7c2;
  -webkit-text-stroke: 2px #0a2a10;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 #0a2a10, 0 0 20px rgba(255, 204, 46, 0.7);
}
.mm-wheel{ position: relative; width: min(440px, 62vh, 86vw); aspect-ratio: 1; flex: none; }
.mm-wheel-disc{
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 8px solid #ffcc2e;
  box-shadow: inset 0 0 0 3px #c27a0a, inset 0 0 26px rgba(0, 0, 0, 0.45), 0 0 0 3px #071a0a, 0 0 34px rgba(255, 204, 46, 0.6);
}
.mm-wheel-disc::after{
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 22%; height: 22%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--mm-paw, none) center / 100% 100% no-repeat;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}
.mm-wheel-lbl{
  position: absolute;
  left: 50%; top: 50%;
  font-family: 'Lilita One', 'Sora', sans-serif;
  font-size: clamp(14px, 2.2vh, 20px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);
  paint-order: stroke fill;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.mm-wheel-pin{
  position: absolute;
  left: 50%; top: -16px;
  width: 0; height: 0;
  margin-left: -13px;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 30px solid #fff3a6;
  filter: drop-shadow(0 0 2px #6b3d0f) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6));
  z-index: 2;
}
.game[data-game="slot-moolah"] .fs-overlay .fs-title{ font-family: 'Lilita One', 'Sora', sans-serif; font-weight: 400; color: #ffcc2e; -webkit-text-stroke: 2px #0a2a10; paint-order: stroke fill; }
@media (prefers-reduced-motion: reduce){
  .mm-wheel-screen, .mm-wheel-screen.out, .mm-pot-mega, .mm-pot.won, :is(.game[data-game="slot-moolah"] .sidebar, .mobile-dock[data-game="slot-moolah"]) .btn-deal{ animation: none; }
}


/* ===== The slot dock on a phone (<=1080px, 12.10.2026) =====
   Top to bottom: the stake strip, a row of five icons (menu, support chat, deposit, search, favourites), then SPIN between the two corner
   buttons (the lobby and a random game, fixed to the page and levelled with SPIN by mobileDock.js: --fab-bottom). The win is no longer drawn
   in digits: it is the same headline as on a desktop, under the canvas (slotWinBar.js). SPIN is the desktop art again. */
@media (max-width: 1080px){
  /* no stylised digit counter anywhere in the dock */
  .mobile-dock .win-digits, .slot-hero-counter{ display: none !important; }

  /* the win headline under the canvas, as on a desktop: caption + amount between two ornaments (its height is reserved) */
  .game .slot-winbar{ position: static; flex: 0 0 auto; width: 100%; height: 62px; gap: 12px; padding: 0 8px; }
  .game .slot-winbar .swb-cap{ display: block; font-size: 10px; letter-spacing: 0.3em; }
  .game .slot-winbar .swb-orn::before{ font-size: 18px; }
  .game .slot-winbar .swb-amt{ font-size: clamp(26px, 8vw, 34px); }

  /* a game's Random button gives way to the demo switch: the same gold disc and ring (the .random-fab rules do the placing) */
  .random-fab:not(.demo-fab):not(.lobby-fab)[data-page="game"]{ display: none !important; }
  .demo-fab .rf-dice svg{ width: 36px; height: 36px; }
  .demo-fab.on .rf-dice{ background: radial-gradient(circle at 35% 30%, #4fd27a, #1c6a38); color: #fff; }
  .demo-fab.on .rf-ring{ border-color: rgba(80, 220, 130, 0.6); }
  /* SPIN: the desktop art again, between the corner buttons (they are 48px wide and 14px from the edges) */
  .mobile-dock.slot-dock .spin-block{ padding: 0 62px; }
  .mobile-dock.slot-dock.slot-dock .spin-img-btn{
    width: 100%; height: auto; aspect-ratio: var(--spin-aspect, 1) !important; font-size: 0; color: transparent;
    /* the art is on a transparent ground: no frame, rim, shadow or plate of any theme may sit around it */
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; text-shadow: none; -webkit-text-stroke: 0;
    background: var(--spin-normal) center / 100% 100% no-repeat !important;
    -webkit-backdrop-filter: none; backdrop-filter: none; filter: none !important; animation: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-dock.slot-dock .spin-block{ background: none !important; border: 0 !important; box-shadow: none !important; }
  .mobile-dock.slot-dock.slot-dock .spin-img-btn::after, .mobile-dock.slot-dock.slot-dock .spin-img-btn::before{ content: none !important; display: none; }
  .mobile-dock.slot-dock.slot-dock .spin-img-btn:hover:not(:disabled), .mobile-dock.slot-dock.slot-dock .spin-img-btn:active:not(:disabled){
    background: var(--spin-hover) center / 100% 100% no-repeat !important; color: transparent; filter: none;
  }
  .mobile-dock.slot-dock.slot-dock .spin-img-btn:active:not(:disabled){ transform: scale(0.97); }
  .mobile-dock.slot-dock.slot-dock .spin-img-btn:disabled{ background: var(--spin-disabled) center / 100% 100% no-repeat !important; color: transparent; filter: none; }
}

/* ---- Phone dock across screen sizes (13.10.2026) ----
   The dock is a 450px column at most; on a tablet it floats in the middle, so the corner buttons follow its edges. */
@media (min-width: 551px) and (max-width: 1080px) {
  .lobby-fab { left: calc(50% - 275px + 14px); right: auto; }
  .random-fab:not(.lobby-fab) { right: calc(50% - 275px + 14px); left: auto; } /* the Lobby button carries both classes */
  [dir="rtl"] .lobby-fab { right: calc(50% - 275px + 14px); left: auto; }
  [dir="rtl"] .random-fab:not(.lobby-fab) { left: calc(50% - 275px + 14px); right: auto; }
}
/* SPIN does not need to be as wide as the room between the corner buttons: a smaller art keeps the dock short */
@media (max-width: 1080px) {
  .mobile-dock.slot-dock .spin-block { padding-left: 62px; padding-right: 62px; }
  .mobile-dock.slot-dock.slot-dock .spin-img-btn { max-width: 200px; margin: 0 auto; display: block; }
}
@media (max-width: 1080px) and (max-height: 720px) {
  .mobile-dock.slot-dock.slot-dock .spin-img-btn { max-width: 150px; }
}
/* narrow phones: the bet row (stepper + four shortcuts) must stay on one line */
@media (max-width: 380px) {
  .mobile-dock .stepper { flex: 1 1 128px; grid-template-columns: 32px minmax(40px, 1fr) 32px; }
  .mobile-dock .step-btn, .mobile-dock .stake-value { height: 34px; }
  .mobile-dock .bet-body .bet-row, .mobile-dock .bet-body .bet-row-stack { flex: 1 1 128px; }
  .mobile-dock .bet-body .chip { padding: 7px 2px; font-size: 11px; }
  .mobile-dock.slot-dock .spin-block { padding-left: 54px; padding-right: 54px; }
}

/* Mines on a narrow phone: the board may shrink below 300px, and the gauge wraps to two rows instead of running off the screen */
@media (max-width: 1080px) { .mn-board { min-width: 0; } }
@media (max-width: 400px) {
  .mn-gauge { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mn-gauge .mn-mult { grid-column: 1 / -1; }
}


/* the demo switch shows on a phone only */
.demo-fab{ display: none; }

/* ---- the bottom bar of every non-game page on a phone (public/js/pageNav.js) ----
   a slate plate with a bare icon for each item; the deposit button is raised in the middle and the plate swells round it */
.page-nav{ display: none; }
@media (max-width: 1080px){
  .page-nav{
    --pn-plate: #1c2238;
    display: grid; grid-template-columns: 1fr 1fr 84px 1fr 1fr; align-items: end; position: fixed; z-index: 250; left: 50%; bottom: 0;
    width: min(100%, 550px); transform: translateX(-50%); padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--pn-plate); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.45);
  }
  .pn-btn{
    position: relative; display: grid; justify-items: center; padding: 12px 0; border: 0; background: none; cursor: pointer;
    color: #8f98b3; font: inherit; -webkit-tap-highlight-color: transparent; transition: color 0.15s ease, transform 0.12s ease;
  }
  .pn-btn:active{ transform: scale(0.94); color: #fff; }
  .pn-ico svg{ width: 26px; height: 26px; display: block; }
  /* deposit: a gold disc standing above the plate, with a ring of plate colour round it */
  .pn-k-deposit{ justify-self: center; width: 62px; height: 62px; margin: -34px 0 0; padding: 0; border-radius: 50%; color: #1a1200;
    background: radial-gradient(circle at 35% 28%, #fff3b0 0%, #ffd23a 40%, #f0a010 80%, #b86c06 100%);
    box-shadow: 0 0 0 8px var(--pn-plate), 0 0 24px 6px rgba(255, 200, 60, 0.4), inset 0 -3px 6px rgba(150, 80, 0, 0.4); animation: pn-glow 2.6s ease-in-out infinite; }
  .pn-k-deposit:active{ transform: scale(0.94); color: #1a1200; }
  .pn-k-deposit .pn-ico svg{ width: 30px; height: 30px; margin: 16px auto 0; }
  @keyframes pn-glow{ 50%{ box-shadow: 0 0 0 8px var(--pn-plate), 0 0 34px 10px rgba(255, 210, 80, 0.6), inset 0 -3px 6px rgba(150, 80, 0, 0.4); } }
  /* the plate swells round the disc: a plate-coloured circle sits behind it, half above the plate's top edge */
  .page-nav::before{ content: ''; position: absolute; left: 50%; top: -24px; width: 92px; height: 92px; margin-left: -46px; border-radius: 50%; background: var(--pn-plate); z-index: -1; }
  .pn-btn[data-support-badge]:not([data-support-badge=""])::after{ top: 4px; right: calc(50% - 22px); }
  [dir="rtl"] .page-nav{ direction: rtl; }
}
@media (prefers-reduced-motion: reduce){ .pn-k-deposit{ animation: none; } }

/* the search sheet the bar's search icon opens */
.pn-search{ position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: rgba(8, 11, 20, 0.97); padding: 12px 12px 0; overflow: hidden; }
.pn-search-bar{ display: flex; gap: 10px; align-items: center; max-width: 560px; width: 100%; margin: 0 auto 10px; }
.pn-search-input{ flex: 1; min-width: 0; padding: 13px 16px; border-radius: 999px; border: 1px solid rgba(224, 176, 79, 0.45); background: #131a2c; color: var(--text); font: inherit; font-size: 16px; outline: none; }
.pn-search-input:focus{ border-color: var(--accent); }
.pn-search-x{ flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: #131a2c; color: var(--text); cursor: pointer; }
.pn-search-x svg{ width: 20px; height: 20px; }
.pn-search-list{ flex: 1; overflow-y: auto; max-width: 560px; width: 100%; margin: 0 auto; padding-bottom: 20px; }
.pn-hit{ display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; color: var(--text); text-decoration: none; }
.pn-hit:active, .pn-hit:hover{ background: rgba(255, 255, 255, 0.07); }
.pn-hit img, .pn-hit-ph{ width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #131a2c; }
.pn-hit b{ font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-hit small{ color: var(--muted); font-size: 12px; }
.pn-none{ text-align: center; color: var(--muted); padding: 30px 0; }

/* on a phone the footer lives in the bottom bar's Menu sheet, not at the foot of the page */
body.page-nav-on #site-footer{ display: none; }
.pn-menu{ position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-end; justify-content: center; background: rgba(4, 6, 12, 0.7); }
.pn-menu-panel{ width: min(100%, 550px); max-height: 82vh; overflow-y: auto; padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: #1c2238; box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.5); }
.pn-menu-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-family: var(--font-display); font-size: 17px; }
.pn-menu-x{ width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); background: none; color: var(--text); cursor: pointer; }
.pn-menu-x svg{ width: 18px; height: 18px; }
.pn-menu-panel{ color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.pn-menu-panel .footer-inner{ margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }

/* on a phone a game page has no footer at all (the other pages keep theirs in the bottom bar's Menu sheet) */
@media (max-width: 1080px){ body:has(.game) #site-footer{ display: none; } }

/* Spin speed (slots): a small tab of one to three fast-forward chevrons straddling the top edge of the console (desktop) or of
   the dock (phone), centred. It reads the page theme's own palette, so every game gets its own colours; lit chevrons = the speed. */
.speed-toggle{
  position: absolute; left: 50%; top: 0; z-index: 3; transform: translate(-50%, -55%);
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  width: 54px; height: 28px; padding: 0; box-sizing: border-box;
  border: 1px solid var(--border, rgba(224,176,79,.5)); border-radius: 999px;
  background: linear-gradient(180deg, var(--panel2, #1b2436), var(--panel, #0f1523));
  box-shadow: 0 2px 8px rgba(0,0,0,.45); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.speed-toggle i{ display: block; width: 10px; height: 14px; margin: 0 -1px; color: var(--muted, #6b7488); opacity: .4; transition: color .15s, opacity .15s; }
.speed-toggle i svg{ display: block; width: 100%; height: 100%; }
.speed-toggle i.on{ color: var(--accent, #e0b04f); opacity: 1; filter: drop-shadow(0 0 3px var(--accent, #e0b04f)); }
.speed-toggle:hover{ border-color: var(--accent, #e0b04f); }
.speed-toggle:active{ transform: translate(-50%, -55%) scale(.94); }
.speed-toggle:focus-visible{ outline: 2px solid var(--accent, #e0b04f); outline-offset: 2px; }

/* Random / Lobby / Demo corner buttons on a phone or tablet: the label is hidden, so the pill is a true circle and the picture
   sits dead centre of it (it was 54 x 48 with 8px side padding, i.e. off-centre) */
@media (max-width: 1080px){
  .random-fab, .lobby-fab{ width: 48px; height: 48px; padding: 0; justify-content: center; gap: 0; box-sizing: border-box; }
  .random-fab .rf-dice, .lobby-fab .rf-dice{ margin: 0; }
}