/* ---------- machine picker ---------- */
.picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.machine-card { background: var(--panel); border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--text); display: grid; grid-template-rows: auto auto 1fr auto; transition: transform .15s; }
.machine-card:hover { transform: translateY(-4px); }
.mc-art { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 26px 10px; }
.mc-art img { width: 30%; max-width: 92px; aspect-ratio: 1; object-fit: contain; background: #f4efff; border-radius: 14px; padding: 8px; }
.mc-art img:nth-child(2) { transform: translateY(-8px) scale(1.12); }
.mc-art.fruit { background: #ffcc33; } .mc-art.vapor { background: #7a3cc4; } .mc-art.house { background: #ff5fa2; }
.machine-card h2 { margin: 14px 16px 4px; font: 400 26px var(--display); color: var(--gold); }
.machine-card p { margin: 0 16px; color: var(--muted); font-size: 15px; }
.machine-card p b { color: #fff; }
.mc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 16px 16px; }
.mc-tags span { font-size: 12px; font-weight: 700; padding: 5px 8px; border-radius: 6px; background: var(--panel-2); }
.back-machines { display: inline-block; margin-bottom: 10px; color: #fff; text-shadow: 1px 1px 0 var(--title-a); }

/* ---------- jackpot meters ---------- */
.jp em { display: block; font-style: normal; font-size: 11px; opacity: .75; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-bar { display: grid; grid-template-columns: 1.4fr 1.1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.jp { border-radius: 12px; padding: 8px 12px; text-align: center; background: #12082e; box-shadow: inset 0 0 0 2px var(--c); position: relative; overflow: hidden; }
.jp small { display: block; font: 400 12px var(--display); color: var(--c); letter-spacing: .1em; }
.jp b { font: 700 clamp(16px, 2.4vw, 26px) ui-monospace, Consolas, monospace; color: #fff; text-shadow: 0 0 8px var(--c); }
.jp.grand { --c: #ffd84d; } .jp.major { --c: #ff5fa2; } .jp.minor { --c: #3ee6ff; } .jp.mini { --c: #4dff8f; }
.jp.grand b { font-size: clamp(20px, 3vw, 32px); }
.jp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
             transform: translateX(-100%); }
/* one sweep at a time, started by slots.js; between sweeps nothing animates, so the page can sit still */
.jp.shine::after { animation: shine 1.2s ease-in-out; }
@keyframes shine { to { transform: translateX(100%); } }
.jp.hit { animation: jp-hit .5s steps(2) 6; }
@keyframes jp-hit { 50% { background: var(--c); } }

/* ---------- cabinet ---------- */
.cabinet { --a: #ffd84d; --b: #ff4d6d; --bg: #2a0d0d; --cell: clamp(54px, 9.5vw, 106px);
           position: relative; max-width: 860px; margin: 0 auto; padding: 18px; border-radius: 26px;
           background: linear-gradient(180deg, var(--bg), #0b0618); box-shadow: 0 0 0 4px var(--a), 0 0 0 8px #0b0618, 0 0 0 11px var(--b), 0 20px 60px rgba(0,0,0,.5); }
.cabinet.theme-vapor { --a: #3ee6ff; --b: #ff5fa2; --bg: #1c0d3e; }
.cabinet.theme-house { --a: #ffd84d; --b: #ff5fa2; --bg: #1d0a1f; }
.marquee { text-align: center; margin-bottom: 12px; }
.marquee span { display: block; font: 400 clamp(28px, 5vw, 50px)/1 var(--display); color: #fff; letter-spacing: .04em;
                text-shadow: 0 0 6px var(--a), 0 0 14px var(--a), 3px 3px 0 var(--b); }
.marquee small { display: block; margin-top: 6px; color: var(--a); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.bulbs { position: absolute; inset: 6px; pointer-events: none; border-radius: 22px; }
/* every third bulb is lit at a time; slots.js steps .bulbs[data-p] a few times a second (no animation, no layers) */
.bulbs .bg { position: absolute; inset: 0; opacity: .25; }
.bulbs:not([data-p]) .bg:nth-child(1), .bulbs[data-p="0"] .bg:nth-child(1), .bulbs[data-p="1"] .bg:nth-child(2), .bulbs[data-p="2"] .bg:nth-child(3) { opacity: 1; }
.bulbs i { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--a); box-shadow: 0 0 8px var(--a); }
.cabinet.excited .bulbs i { background: #fff; }


.screen { background: #05030f; border-radius: 16px; padding: 12px; box-shadow: inset 0 0 0 3px rgba(255,255,255,.08); }
.fs-banner { margin-bottom: 10px; border-radius: 10px; padding: 8px 12px; background: linear-gradient(90deg, var(--b), var(--a)); color: #12082e; font-weight: 700;
             display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fs-banner .mult { font: 400 22px var(--display); }
.fs-banner .mult.pop { animation: pop .4s cubic-bezier(.2, 1.8, .4, 1); }
.reels-wrap { position: relative; display: flex; justify-content: center; }
.reels { display: grid; grid-auto-flow: column; gap: 6px; }
.reel { width: var(--cell); height: calc(var(--cell) * 3 + 12px); overflow: hidden; border-radius: 10px; background: #14092e; position: relative; }
.strip { display: grid; gap: 6px; }
.cell { width: var(--cell); height: var(--cell); display: grid; place-items: center; border-radius: 10px; background: #f6f1ff; position: relative; }
.holding .cell { transition: opacity .2s; } /* only Hold & Spin fades cells; new cells every spin shouldn't each start a transition */
.cell img { width: 82%; height: 82%; object-fit: contain; }
.cell.wild { background: #ffe1ef; } .cell.scatter { background: #fff3c4; }
.cell .val { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font: 400 calc(var(--cell) * .17) var(--display); color: #12082e;
             text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.cell .val.jpv { color: #ff2a6d; }
.cell.hit { animation: hit .6s ease-in-out 3; box-shadow: 0 0 0 4px var(--a); z-index: 1; }
@keyframes hit { 50% { transform: scale(1.08); } }
.cell.pin { position: absolute; z-index: 2; pointer-events: none; box-shadow: 0 0 0 3px var(--a), 0 0 16px var(--a); }
.cell.sticky-new { animation: coinpop .45s cubic-bezier(.2, 1.8, .4, 1); }
.cell.sticky::after { content: "STICKY"; position: absolute; top: 3px; font: 700 9px var(--body); color: var(--b); letter-spacing: .08em; }
.reel.spinning .strip { animation: roll .12s linear infinite; }
.turbo .reel.spinning .strip { animation-duration: .08s; }
@keyframes roll { from { transform: translateY(calc(var(--cell) * -3 - 18px)); } to { transform: translateY(0); } }
.reel.stopped .strip { animation: settle .22s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes settle { from { transform: translateY(-18px); } }
.reel.anticipate { box-shadow: 0 0 0 3px var(--a), 0 0 22px var(--a); }
.reel.waved { box-shadow: 0 0 0 3px #3ee6ff, 0 0 26px #3ee6ff; }
.reel.waved::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(62,230,255,.45), transparent);
                     animation: wave 0.8s ease-in-out 2; pointer-events: none; }
@keyframes wave { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

/* hold & spin */
.holding .cell:not(.coin-lock) { opacity: .15; }
.holding .cell.coin-lock { box-shadow: 0 0 0 3px var(--a), 0 0 14px var(--a); }
.cell.coin-new { animation: coinpop .45s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes coinpop { from { transform: scale(.2) rotate(-30deg); } }
.hold-hud { position: absolute; top: -8px; right: -8px; background: var(--b); color: #fff; border-radius: 12px; padding: 6px 12px; text-align: center; box-shadow: 0 0 0 3px #12082e; }
.hold-hud span { display: block; font: 700 10px var(--body); letter-spacing: .1em; }
.hold-hud b { font: 400 28px/1 var(--display); }
.hold-hud b.reset { animation: pop .4s cubic-bezier(.2, 1.8, .4, 1); }

.paylines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.paylines polyline { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(0,0,0,.6)); opacity: .9;
                     stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw .5s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.feature-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; text-align: center;
                  font: 400 clamp(26px, 5vw, 46px)/1 var(--display); color: #fff; text-shadow: 0 0 10px var(--a), 3px 3px 0 var(--b), 6px 6px 0 #12082e;
                  animation: pop .45s cubic-bezier(.2, 1.8, .4, 1); white-space: nowrap; }
.feature-banner small { display: block; font-size: .45em; margin-top: 6px; }

.win-meter { margin-top: 10px; text-align: center; background: #0d0624; border-radius: 12px; padding: 6px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.06); }
.win-meter small { display: block; font: 400 12px var(--display); color: var(--a); letter-spacing: .12em; }
.win-meter b { font: 700 clamp(24px, 4vw, 38px) ui-monospace, Consolas, monospace; color: #fff; text-shadow: 0 0 10px var(--a);
               display: inline-block; font-variant-numeric: tabular-nums; contain: layout paint; }

/* deck: bet, spin, options */
.deck { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-top: 14px; }
.bet-ctl { display: grid; gap: 4px; justify-items: start; }
.bet-ctl small { font: 400 12px var(--display); color: var(--a); letter-spacing: .1em; }
.bet-row { display: flex; align-items: center; gap: 10px; }
.bet-row b { font: 700 26px ui-monospace, Consolas, monospace; min-width: 70px; text-align: center; color: #fff; }
.round-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; font: 700 22px/1 var(--body); background: #efe9ff; color: #12082e; }
.round-btn:hover { background: #fff; } .round-btn:disabled { opacity: .4; cursor: default; }
.spin-btn { width: clamp(96px, 14vw, 128px); aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; color: #12082e;
            background: radial-gradient(circle at 35% 30%, #fff 0, var(--a) 30%, var(--b) 100%); box-shadow: 0 6px 0 #6a1030, 0 0 0 5px #12082e, 0 0 22px var(--a);
            font: 400 clamp(20px, 3vw, 28px) var(--display); transition: transform .08s; }
.spin-btn:hover { transform: translateY(-2px); }
.spin-btn:active, .spin-btn.busy { transform: translateY(4px); box-shadow: 0 2px 0 #6a1030, 0 0 0 5px #12082e; }
.spin-btn { position: relative; }
.spin-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 40px var(--a); opacity: 0; pointer-events: none; }
.spin-btn.auto::after { animation: glowfade 1s ease-in-out infinite; will-change: opacity; } /* autoplay pulse, opacity only */
.deck-right { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.deck-hint { text-align: center; margin-top: 10px; }

/* ---------- overlays ---------- */
.slot-modal { border: 0; border-radius: 18px; background: #1a1147; color: var(--text); padding: 18px; width: min(680px, calc(100% - 20px)); }
.slot-modal::backdrop { background: rgba(5, 3, 20, .75); }
.slot-modal h2 { margin: 0 0 12px; font: 400 24px var(--display); color: var(--gold); }
.row-end { display: flex; justify-content: flex-end; margin-top: 12px; }
.paytable { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; font-size: 14px; }
.paytable .row { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border-radius: 10px; padding: 6px 8px; }
.paytable .row .cell { --cell: 40px; width: 40px; height: 40px; flex: none; }
.paytable .note { grid-column: 1 / -1; color: var(--muted); margin: 4px 0 0; }

.wheel-overlay { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(5, 3, 20, .8); }
.wheel-box { text-align: center; }
.wheel-box h2 { margin: 0 0 10px; font: 400 clamp(28px, 5vw, 44px) var(--display); color: #fff; text-shadow: 0 0 10px var(--gold), 3px 3px 0 var(--pink); }
.wheel-wrap { position: relative; width: min(420px, 86vw); aspect-ratio: 1; margin: 0 auto; }
.wheel-svg { width: 100%; height: 100%; transition: transform 5s cubic-bezier(.12, .7, .08, 1); }
.wheel-pointer { position: absolute; left: 50%; top: -12px; margin-left: -16px; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 34px solid #fff;
                 filter: drop-shadow(0 3px 0 #12082e); }
.wheel-result { min-height: 1.4em; margin: 14px 0 0; font: 400 clamp(22px, 4vw, 34px) var(--display); color: var(--gold); text-shadow: 2px 2px 0 var(--pink); }

.celebrate { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 80; text-align: center; pointer-events: none; display: grid; gap: 6px; will-change: transform;
             animation: pop .5s cubic-bezier(.2, 1.7, .4, 1); }
.celebrate b { font: 400 clamp(40px, 9vw, 96px)/1 var(--display); color: #fff; text-shadow: 0 0 16px var(--gold), 4px 4px 0 var(--pink), 8px 8px 0 #12082e; }
.celebrate span { font: 700 clamp(30px, 6vw, 60px) ui-monospace, Consolas, monospace; color: var(--gold); text-shadow: 3px 3px 0 #12082e;
                  font-variant-numeric: tabular-nums; min-width: 9ch; will-change: contents; contain: layout paint; } /* the counter repaints alone */
.celebrate.jackpot b { color: var(--gold); animation: jp-glow .25s steps(2) infinite; will-change: filter; }
@keyframes jp-glow { 50% { filter: brightness(1.7); } } /* flashes on the GPU instead of repainting the text */
@keyframes jp-flash { 50% { color: #fff; } }
.coin-rain { position: fixed; inset: 0; pointer-events: none; z-index: 75; overflow: hidden; }
.coin-rain i { position: absolute; top: -40px; width: 30px; height: 30px; border-radius: 50%; will-change: transform; background: radial-gradient(circle at 35% 30%, #fff6c8, #ffd84d 40%, #c98a00);
               box-shadow: inset 0 0 0 3px #e0a400; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* ---------- bonus trigger + pick ---------- */
.cell.trigger { animation: trig .35s ease-in-out infinite alternate; z-index: 2; box-shadow: 0 0 0 3px #fff, 0 0 26px 8px var(--gold); }
@keyframes trig { to { transform: scale(1.14); box-shadow: 0 0 0 3px var(--gold), 0 0 40px 14px var(--pink); } }
.cabinet.shake { animation: shake .09s linear infinite; }
@keyframes shake { 25% { transform: translate(-3px, 2px) rotate(-.4deg); } 75% { transform: translate(3px, -2px) rotate(.4deg); } }
.bonus-flash { position: fixed; inset: 0; z-index: 78; display: grid; place-items: center; pointer-events: none; overflow: hidden;
               animation: bflash 1.9s ease-out forwards; }
@keyframes bflash { 0% { background: rgba(255, 255, 255, .95); } 12% { background: rgba(255, 95, 162, .55); } 100% { background: rgba(18, 8, 46, .25); } }
.bonus-flash .rays { position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; opacity: .55;
  background: repeating-conic-gradient(from 0deg, rgba(255, 216, 77, .9) 0 7deg, transparent 7deg 18deg); animation: rays 6s linear infinite;
  -webkit-mask: radial-gradient(circle, #000 0, transparent 60%); mask: radial-gradient(circle, #000 0, transparent 60%); }
@keyframes rays { to { transform: rotate(360deg); } }
.bonus-flash b { position: relative; font: 400 clamp(54px, 13vw, 150px)/1 var(--display); color: #fff; letter-spacing: .02em;
  text-shadow: 0 0 24px var(--gold), 5px 5px 0 var(--pink), 10px 10px 0 #12082e; animation: slam .55s cubic-bezier(.2, 1.9, .4, 1), jp-flash .3s steps(2) .55s 4; }
@keyframes slam { from { transform: scale(4) rotate(-8deg); opacity: 0; } }
.cabinet.free-mode { box-shadow: 0 0 0 4px var(--gold), 0 0 50px 6px var(--a); }
/* the pink glow fades over the gold one: animating opacity is free, animating box-shadow repainted the cabinet */
.cabinet::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 0 0 4px var(--pink), 0 0 70px 12px var(--b); }
.cabinet.free-mode::after { animation: glowfade 1.6s ease-in-out infinite; will-change: opacity; }
@keyframes glowfade { 50% { opacity: 1; } }

.pick-overlay { position: fixed; inset: 0; z-index: 79; display: grid; place-items: center; padding: 16px; background: rgba(5, 3, 20, .86); }
.pick-box { text-align: center; width: min(820px, 100%); animation: pop .45s cubic-bezier(.2, 1.7, .4, 1); }
.pick-box h2 { margin: 0; font: 400 clamp(24px, 5vw, 44px)/1.05 var(--display); color: #fff; text-shadow: 0 0 12px var(--gold), 3px 3px 0 var(--pink); }
.pick-sub { color: var(--muted); margin: 8px 0 18px; }
.pick-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pick-card { display: grid; gap: 4px; justify-items: center; padding: 18px 8px; border: 0; border-radius: 16px; cursor: pointer; color: #fff;
  background: linear-gradient(160deg, #3a1f9c, #a5287f); box-shadow: 0 6px 0 #12082e, inset 0 0 0 3px rgba(255, 255, 255, .25);
  transition: transform .12s; animation: deal .5s cubic-bezier(.2, 1.6, .4, 1) backwards; }
.pick-card:nth-child(2) { animation-delay: .08s; } .pick-card:nth-child(3) { animation-delay: .16s; } .pick-card:nth-child(4) { animation-delay: .24s; }
@keyframes deal { from { transform: translateY(40px) scale(.7); opacity: 0; } }
.pick-card:hover:not(:disabled), .pick-card:focus-visible { transform: translateY(-6px) scale(1.04); box-shadow: 0 10px 0 #12082e, 0 0 0 3px var(--gold), 0 0 30px var(--gold); outline: none; }
.pick-card small { font: 400 12px var(--display); color: var(--gold); letter-spacing: .06em; }
.pick-card b { font: 400 clamp(22px, 4vw, 32px)/1 var(--display); }
.pick-card .pm { font: 700 clamp(30px, 5vw, 46px)/1 ui-monospace, Consolas, monospace; color: var(--gold); text-shadow: 2px 2px 0 #12082e; }
.pick-card em { font-style: normal; font-size: 12px; color: #f4efff; opacity: .85; }
.pick-card.mystery { background: linear-gradient(160deg, #0f6b8c, #3a1f9c); }
.pick-card.mystery b { font-size: clamp(44px, 7vw, 64px); }
.pick-card:disabled { cursor: default; opacity: .45; }
.pick-card.chosen { opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 4px var(--gold), 0 0 40px var(--gold); animation: chosen .5s ease-in-out infinite alternate; }
@keyframes chosen { to { box-shadow: 0 0 0 4px var(--pink), 0 0 60px var(--pink); } }
.pick-card.flipped { animation: flip .5s ease-out; }
@keyframes flip { from { transform: rotateY(90deg); } }
@media (max-width: 620px) { .pick-cards { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .bonus-flash .rays, .cabinet.shake, .cabinet.free-mode::after, .cell.trigger { animation: none; } }

@media (max-width: 820px) {
  .picker { grid-template-columns: 1fr; }
  .jp-bar { grid-template-columns: 1fr 1fr; }
  .deck { grid-template-columns: 1fr 1fr; }
  .deck .spin-btn { grid-column: 1 / -1; justify-self: center; order: -1; }
  .deck-right { justify-content: flex-start; }
  .cabinet { padding: 12px; --cell: calc((100vw - 92px) / 5); }
}
@media (prefers-reduced-motion: reduce) { .jp::after, .bulbs i { animation: none; } }

/* the canvas machines on the picker */
.mc-art.neon { background: linear-gradient(135deg, #3a1f9c, #c2309c); }
.mc-art.lagoon { background: linear-gradient(135deg, #0f6b8c, #2f7de0); }
.new-tag { font: 700 11px var(--body); background: var(--gold); color: #12082e; padding: 2px 6px; border-radius: 6px; vertical-align: middle; letter-spacing: .06em; }

/* ================= 2026-11 visual pass: painted scenes, glossy tiles, real reel motion =================
   Everything here is static or animates transform/opacity only. Particles and big wins live in fx.js. */
.slot-scene { position: fixed; inset: 0; z-index: -1; background: #0b0618 center / cover no-repeat; pointer-events: none; }
.slot-scene::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(8, 4, 24, .1), rgba(8, 4, 24, .72)); }
.slot-scene:not([data-m]) { display: none; }
.slot-scene[data-m="fruit"] { background-image: url("/shared/img/scenes/fruit.webp?v=5e404ef721"); }
.slot-scene[data-m="vapor"] { background-image: url("/shared/img/scenes/vapor.webp?v=9a5af591a6"); }
.slot-scene[data-m="house"] { background-image: url("/shared/img/scenes/house.webp?v=0de17e2a04"); }
.slot-scene[data-m="neon"] { background-image: url("/shared/img/scenes/neon.webp?v=b916684274"); }
.slot-scene[data-m="lagoon"] { background-image: url("/shared/img/scenes/lagoon.webp?v=0e5b07d6d7"); }
.credits { text-align: center; font-size: 12px; opacity: .75; margin: 6px 0 0; }
.credits a { color: inherit; }

/* picker cards wear their machine's scene */
.mc-art { background-size: cover !important; background-position: center !important; position: relative; }
.mc-art.fruit { background-image: url("/shared/img/scenes/fruit-card.webp?v=6920963b0c"); }
.mc-art.vapor { background-image: url("/shared/img/scenes/vapor-card.webp?v=5b0f3664d8"); }
.mc-art.house { background-image: url("/shared/img/scenes/house-card.webp?v=db3abd8413"); }
.mc-art.neon { background-image: url("/shared/img/scenes/neon-card.webp?v=1248d18a62"); }
.mc-art.lagoon { background-image: url("/shared/img/scenes/lagoon-card.webp?v=c66991199c"); }
.mc-art img { background: rgba(12, 6, 34, .55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18); }

/* the cabinet lets a little of the scene through */
.cabinet { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, transparent), rgba(11, 6, 24, .92)); }
.screen { background: rgba(5, 3, 15, .86); }

/* glossy dark tiles instead of white cards */
.reel { background: linear-gradient(180deg, #0c0522, #1a0b3a 50%, #0c0522); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.cell { background: radial-gradient(110% 85% at 50% 18%, rgba(255, 255, 255, .17), rgba(255, 255, 255, .04) 58%, rgba(0, 0, 0, .18));
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); overflow: hidden; }
.cell.wild { background: radial-gradient(110% 85% at 50% 18%, rgba(255, 130, 190, .5), rgba(255, 95, 162, .14) 60%, rgba(0, 0, 0, .2)); }
.cell.scatter { background: radial-gradient(110% 85% at 50% 18%, rgba(255, 226, 120, .5), rgba(255, 190, 60, .14) 60%, rgba(0, 0, 0, .2)); }
.cell img { width: 86%; height: 86%; user-select: none; }
.cell .val { color: #fff; text-shadow: 0 2px 0 #12082e, 0 0 4px #12082e, 0 0 8px #12082e; }
.cell .val.jpv { color: #ffd84d; }
.cell.sticky::after { color: #fff; text-shadow: 0 1px 0 #12082e; }

/* spinning reels: motion-blurred pictures (made by fx.js), then a heavy landing with overshoot */
.reel.spinning .strip { animation-duration: .1s; }
.reel.stopped .strip { animation: land .36s cubic-bezier(.25, .9, .35, 1); }
@keyframes land { 0% { transform: translateY(calc(var(--cell) * -.45)); } 55% { transform: translateY(calc(var(--cell) * .1)); } 78% { transform: translateY(calc(var(--cell) * -.03)); } 100% { transform: translateY(0); } }

/* wins: losers dim, winners pulse with a light sweep across them */
.reels.has-win .cell:not(.hit) { opacity: .42; }
.cell.hit { animation: hit .55s ease-in-out 3; box-shadow: 0 0 0 3px var(--a), inset 0 0 0 1px rgba(255, 255, 255, .3); }
@keyframes hit { 50% { transform: scale(1.1); } }
.cell.hit::before { content: ""; position: absolute; inset: -10%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%); transform: translateX(-110%); animation: cshine .8s ease-in-out .1s 2; }
@keyframes cshine { to { transform: translateX(110%); } }
.paylines polyline { stroke-width: 6; }
@media (prefers-reduced-motion: reduce) { .cell.hit, .cell.hit::before, .reel.stopped .strip { animation: none; } }

/* ================= software-rendering pass (2026-11-04) =================
   Measured in Waterfox with hardware acceleration off: anything that animates a big blurred shadow, a filter or a
   full-screen gradient repaints on the CPU every frame. The reels are a canvas now; these keep the rest cheap. */
.reels-cv { display: block; max-width: 100%; touch-action: manipulation; }
/* bulbs: each bulb toggles itself (a few tiny repaints) instead of three cabinet-sized layers */
.bulbs i { opacity: .25; }
.bulbs:not([data-p]) i:nth-child(3n+1), .bulbs[data-p="0"] i:nth-child(3n+1), .bulbs[data-p="1"] i:nth-child(3n+2), .bulbs[data-p="2"] i:nth-child(3n) { opacity: 1; }
.bulbs i { box-shadow: none; background: radial-gradient(circle, #fff 0 25%, var(--a) 45%, transparent 72%); width: 14px; height: 14px; margin: -7px; }
.cabinet.excited .bulbs i { background: radial-gradient(circle, #fff 0 40%, var(--a) 60%, transparent 72%); }
/* no endlessly pulsing glows: free spins and autoplay get a steady glow */
.cabinet.free-mode::after, .spin-btn.auto::after { animation: none; opacity: .8; }
/* bonus slam: the flash/coins/rings come from fx.js; the rotating full-screen rays and colour sweep are gone */
.bonus-flash { animation: none; background: rgba(18, 8, 46, .35); }
.bonus-flash .rays { display: none; }
.bonus-flash b { animation: slam .55s cubic-bezier(.2, 1.9, .4, 1); }
.win-meter b { text-shadow: 0 2px 0 #12082e; }
.jp b { text-shadow: 0 2px 0 #12082e; }
.jp.hit { animation: none; background: color-mix(in srgb, var(--c) 35%, #12082e); }
.slot-scene[data-m="plains"] { background-image: url("/shared/img/scenes/plains.webp?v=fc17d7668e"); }
.mc-art.plains { background-image: url("/shared/img/scenes/plains-card.webp?v=222e13c046"); }

.picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mc-art.vault { background: linear-gradient(135deg, #3a2a12, #8a6a1e 60%, #2a1a08); }
.mc-art.comet { background: radial-gradient(ellipse at 30% 20%, #4d7dff, #1a1050 65%, #06031a); }
.slot-scene[data-m="vault"] { background-image: linear-gradient(180deg, #241608, #6a4a14 55%, #120a03); }
.slot-scene[data-m="comet"] { background-image: radial-gradient(ellipse at 30% 15%, #2f4fc0, #150c45 55%, #05031a); }
.banks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 auto 12px; max-width: 900px; }
.banks[hidden] { display: none; }
.banks > small { grid-column: 1 / -1; color: var(--muted); text-align: center; }
.bank { display: grid; gap: 4px; padding: 8px 10px; border: 0; border-radius: 12px; background: var(--panel); color: #fff; font: 500 13px var(--body); cursor: pointer; text-align: left; }
.bank.on { box-shadow: inset 0 0 0 2px var(--gold); }
.bank small { color: var(--muted); font-size: 11px; }
.bank-bar { display: block; height: 9px; border-radius: 5px; background: rgba(0, 0, 0, .4); overflow: hidden; }
.bank-bar i { display: block; height: 100%; background: var(--gold); }
@media (max-width: 1100px) { .picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .picker { grid-template-columns: 1fr; } .banks { grid-template-columns: 1fr; } }