.bandit-slots, .bandit-slots * { box-sizing: border-box; }
.bandit-slots { position: relative; overflow: hidden; isolation: isolate; padding: 38px 30px 26px; border: 3px solid #535b44; border-radius: 8px; color: #e8e2ce; background: radial-gradient(ellipse at 55% 40%, #666c414a, transparent 62%), repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 5px), #171e18; box-shadow: inset 0 0 80px #0008; }
.bandit-slots__intro { position: absolute; z-index: 1; top: 38px; left: 32px; max-width: 260px; pointer-events: none; }
.bandit-slots__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #b8bc8d; }
.bandit-slots h2 { margin: 12px 0; max-width: 240px; color: #eee4c4; font-size: clamp(27px, 4vw, 42px); line-height: 1.05; }
.bandit-slots__intro p { color: #c5c8b7; font-size: 14px; }
.bandit-slots__stage { width: 100%; height: 580px; }
.bandit-slots__stage canvas { display: block; width: 100%; height: 100%; }
.bandit-slots__controls { position: relative; text-align: center; }
.bandit-slots__controls p { min-height: 24px; margin: 0 0 12px; color: #e9ddbb; font-size: 14px; }
.bandit-slots__controls small { display: block; margin-top: 17px; color: #afb7a7; font-size: 12px; }
.bandit-slots__last { display: block; margin: 18px auto 0; border: 0; padding: 4px; background: none; color: #d6c58d; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.bandit-slots__last[hidden] { display: none; }
.slot-reveal button:focus-visible, .bandit-slots__last:focus-visible { outline: 3px solid #e9d18b; outline-offset: 4px; }
@media (max-width: 900px) {
    .bandit-slots { padding: 24px 12px; }
    .bandit-slots__intro { position: relative; top: auto; left: auto; max-width: none; text-align: center; }
    .bandit-slots h2 { max-width: none; }
    .bandit-slots__stage { height: 460px; }
}


.slot-reveal { width: min(1000px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 24px); padding: 26px 20px 14px; border: 0; border-radius: 0; overflow: auto; color: #e9e4d2; background: transparent; box-shadow: none; text-align: center; isolation: isolate; }
.slot-reveal::backdrop { background: radial-gradient(ellipse at 50% 50%, #152717d9, #020604f5 74%); backdrop-filter: blur(12px); }
.slot-reveal__heading { position: relative; z-index: 2; margin: 0 0 20px; }
.slot-reveal__kicker { color: #a6b196; font-size: 10px; font-weight: 700; letter-spacing: 4px; }
.slot-reveal__kicker b { color: #d7b966; margin: 0 10px; }
.slot-reveal .slot-reveal__title { display: block; position: static; width: auto; height: auto; max-width: none; clip-path: none; margin: 10px 0 12px; overflow: visible; font-size: clamp(26px, 5vw, 52px); line-height: 1; font-weight: 900; font-style: italic; letter-spacing: 3px; color: #f4e4ae; text-shadow: 0 3px 0 #4b472b, 0 0 34px #d4b85545; }
.slot-reveal__lamps { display: flex; justify-content: center; gap: 12px; }
.slot-reveal__lamps i { width: 5px; height: 5px; border-radius: 50%; background: #b9e086; box-shadow: 0 0 7px #abe674, 0 0 18px #a5d96b77; }
.slot-reveal__close { position: absolute; top: 8px; right: 14px; z-index: 5; width: 36px; height: 36px; padding: 0; border: 1px solid #85977166; border-radius: 50%; background: #12201699; color: #d0d7c4; font: 26px Arial, sans-serif; cursor: pointer; }
.slot-reveal__halo { position: absolute; z-index: -1; inset: 5% 0 5%; pointer-events: none; background: radial-gradient(ellipse at center, #a0bc6933, transparent 64%); }
.slot-reveal__frame { position: relative; margin: 0 auto 26px; filter: drop-shadow(0 12px 32px #0009); }
.slot-reveal__trim { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); z-index: 3; overflow: visible; fill: none; pointer-events: none; }
.slot-reveal__rail { stroke: #556447; stroke-width: 9px; }
.slot-reveal__corner { stroke: #d9c07b; stroke-width: 3px; filter: drop-shadow(0 0 4px #d3bd5c88); }
.slot-reveal__ticks { stroke: #a4c476; stroke-width: 3px; }
.slot-reveal__closeup { position: relative; width: 100%; aspect-ratio: 1.9; max-height: 53dvh; overflow: hidden; background: transparent; mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 94%, transparent); }
.slot-reveal__closeup::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, #03080355, transparent 35%, transparent 63%, #03080388); }
.slot-reveal__closeup canvas { display: block; width: 100%; height: 100%; }
.slot-reveal__payline { position: absolute; z-index: 2; left: 18%; right: 17%; top: 41%; height: 18%; pointer-events: none; border-top: 1px solid #e6d78d99; border-bottom: 1px solid #e6d78d99; box-shadow: 0 -6px 22px -10px #e8cc70, 0 6px 22px -10px #e8cc70; }
.slot-reveal__payline span { position: absolute; top: -3px; bottom: -3px; width: 12px; border-top: 3px solid #ebd890; border-bottom: 3px solid #ebd890; }
.slot-reveal__payline span:first-child { left: -3px; border-left: 3px solid #ebd890; }
.slot-reveal__payline span:last-child { right: -3px; border-right: 3px solid #ebd890; }
.slot-reveal__line-label { position: absolute; left: 20px; bottom: 14px; color: #c7bf94; font-size: 8px; font-weight: 700; letter-spacing: 3px; padding: 5px 8px; background: #101b13dd; border-left: 2px solid #b2c67b; }
.slot-reveal__back { position: relative; z-index: 3; padding: 12px 28px; border: 1px solid #8e9e6866; border-radius: 2px; background: linear-gradient(135deg, #31402a, #18251b); color: #e8eddc; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 0 #070d09, inset 0 1px #bfcc8622; }
.slot-reveal__back:hover { border-color: #c8d8b8; background: #35482d; }
.slot-reveal__note { position: relative; margin: 17px 0 0; color: #859179; font-size: 9px; letter-spacing: 2px; }
.slot-reveal__sparks { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.slot-reveal__sparks i { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 7px; opacity: 0; background: #eed293; box-shadow: 0 0 8px #f0bd58; transform: rotate(30deg); }
.slot-reveal[open] .slot-reveal__sparks i { animation: slot-spark 1300ms var(--delay) ease-out both; }
.slot-reveal[open] .slot-reveal__heading { animation: slot-heading 450ms ease-out both; }
.slot-reveal[open] .slot-reveal__frame { animation: slot-frame 550ms cubic-bezier(.2,.7,.2,1) both; }
.slot-reveal[open] .slot-reveal__payline { animation: slot-line 700ms 200ms ease-out both; }
@keyframes slot-spark { 0% { opacity: 0; transform: translate(0, 20px) scale(.3); } 18% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx), -110px) rotate(130deg) scale(.3); } }
@keyframes slot-heading { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes slot-frame { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes slot-line { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 540px) {
    .slot-reveal { width: calc(100vw - 12px); padding: 32px 10px 12px; }
    .slot-reveal__heading { margin-bottom: 18px; }
    .slot-reveal__kicker { font-size: 8px; letter-spacing: 2px; }
    .slot-reveal__close { top: 0; right: 3px; width: 28px; height: 28px; font-size: 22px; }
    .slot-reveal__frame { margin-bottom: 24px; }
    .slot-reveal__line-label { left: 8px; bottom: 5px; font-size: 6px; letter-spacing: 1px; padding: 3px 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .slot-reveal[open] .slot-reveal__sparks i { display: none; }
    .slot-reveal[open] .slot-reveal__heading, .slot-reveal[open] .slot-reveal__frame, .slot-reveal[open] .slot-reveal__payline { animation: none; }
}