.slot-card { --slot-cell: 76px; }
.slot-card h2 { font-size: clamp(24px, 6.5vw, 30px); }
.slot-card .slot-instruction { margin: 8px 0 20px; font-size: 14px; color: #cbbfda; line-height: 1.5; }
.slot-machine { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 4px; align-items: center; margin: 10px auto 20px; max-width: 480px; }
.slot-cabinet { min-width: 0; padding: 12px; border-radius: 24px; border: 1px solid #a87ec1; background: linear-gradient(135deg, #9a648e, #51345d 18%, #231b35 53%, #69476a); box-shadow: inset 0 2px 2px #ffffff55, inset 0 -3px 3px #09051388, 0 12px 24px #09051366; }
.slot-marquee { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 0 3px 12px; color: #ffe8b9; font-size: 11px; font-weight: 900; letter-spacing: .16em; text-shadow: 0 0 12px #e7aa7999; }
.slot-lamp { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #ffe2a0; box-shadow: 0 0 8px #ffd28d; }
.slot-reels { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 5px; border-radius: 14px; border: 2px solid #110d1d; background: #110d1d; box-shadow: 0 1px 0 #ffffff33, inset 0 3px 8px #000; overflow: hidden; }
.slot-reel { position: relative; height: calc(var(--slot-cell) * 2); overflow: hidden; border-radius: 8px; background: #f7ecde; box-shadow: inset 0 0 0 1px #fff8e9; }
.slot-reel::after { content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(#211126ad, #67475736 24%, transparent 40%, transparent 60%, #67475736 76%, #211126ad); box-shadow: inset 2px 0 4px #3a233855, inset -2px 0 4px #3a233855; }
.slot-strip { transform: translateY(calc(var(--slot-cell) * -.5)); }
.slot-symbol { height: var(--slot-cell); display: grid; place-items: center; font-size: clamp(32px, 8vw, 48px); line-height: 1; user-select: none; }
.slot-reel.is-spinning .slot-strip { animation: slotRoll .5s linear infinite; will-change: transform; filter: blur(1px); }
.slot-reel:nth-child(2).is-spinning .slot-strip { animation-duration: .43s; }
.slot-reel:nth-child(3).is-spinning .slot-strip { animation-duration: .37s; }
.slot-payline { position: absolute; z-index: 3; top: calc(50% - var(--slot-cell) / 2); height: var(--slot-cell); left: 3px; right: 3px; border-top: 1px solid #c67f6999; border-bottom: 1px solid #c67f6999; pointer-events: none; }
.slot-payline::before, .slot-payline::after { content: ''; position: absolute; top: calc(50% - 5px); border: 5px solid transparent; }
.slot-payline::before { left: -2px; border-left-color: #bc4e62; }
.slot-payline::after { right: -2px; border-right-color: #bc4e62; }
.slot-display { display: flex; justify-content: center; align-items: baseline; gap: 8px; margin-top: 12px; padding: 9px 5px; border: 1px solid #bd91b14d; border-radius: 8px; background: #130f22; color: #bca6c9; font-size: 9px; letter-spacing: .09em; }
.slot-display strong { color: #ffe0a5; font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: .03em; overflow-wrap: anywhere; }
.slot-lever { position: relative; display: block; width: 48px; height: 180px; border: 0; padding: 0; background: transparent; color: #e5c0ee; cursor: pointer; touch-action: manipulation; perspective: 300px; border-radius: 12px; }
.slot-lever-base { position: absolute; left: 0; bottom: 40px; width: 34px; height: 38px; border-radius: 6px 15px 15px 6px; background: linear-gradient(#c8b6c9, #574258 45%, #d1becf 55%, #4a344f); border: 2px solid #2b1b37; box-shadow: 3px 4px 5px #0005; }
.slot-lever-arm { position: absolute; left: 11px; top: 12px; bottom: 55px; width: 32px; transform-origin: 50% 100%; transition: transform .25s ease; }
.slot-lever-stem { position: absolute; top: 21px; bottom: 0; left: 11px; width: 10px; border-radius: 8px; background: linear-gradient(90deg, #504658, #ede3e7 45%, #887188 70%, #453449); box-shadow: 2px 0 3px #0005; }
.slot-lever-knob { position: absolute; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #ffb7df; background: radial-gradient(circle at 32% 24%, #ffe2f4, #e56baf 25%, #9c235e 67%, #4e153d); box-shadow: 0 4px 7px #130b20aa, inset -3px -3px 4px #76124766; }
.slot-lever-label { position: absolute; bottom: 17px; left: 0; right: 0; font-size: 8px; font-weight: 900; letter-spacing: .05em; }
.slot-lever:not(:disabled):hover .slot-lever-knob { box-shadow: 0 0 18px #e56baf99; }
.slot-lever:focus-visible { outline: 2px solid #ffb5e5; outline-offset: 2px; }
.slot-lever:active .slot-lever-arm, .slot-machine.is-busy .slot-lever-arm { transform: rotateX(-58deg); }
.slot-lever:disabled { cursor: wait; }
.slot-machine.is-win .slot-reels { border-color: #d9b873; box-shadow: 0 0 18px #e1b46255; }
.slot-bet-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.slot-bet-presets .btn { min-width: 0; padding: 11px 4px; }
.slot-bet-presets .selected { border-color: #e7a5d7; background: #b16bba33; box-shadow: inset 0 0 0 1px #e7a5d7; }
.slot-stake-field { display: grid; gap: 7px; margin: 14px 0; font-size: 13px; }
.slot-stake-field .input { width: 100%; min-width: 0; }
.slot-card button:disabled, .slot-card input:disabled { opacity: .65; }
.slot-card .result-box { min-height: 66px; font-size: 14px; line-height: 1.5; }
:root[data-theme="light"] .slot-card .slot-instruction { color: #6d5f78; }
:root[data-theme="light"] .slot-lever { color: #6f3674; }
:root[data-theme="light"] .slot-bet-presets .selected { border-color: #8d4f99; box-shadow: inset 0 0 0 1px #8d4f99; }
@keyframes slotRoll { from { transform: translateY(calc(var(--slot-cell) * -.5)); } to { transform: translateY(calc(var(--slot-cell) * -7.5)); } }
@media (max-width: 360px) { .slot-card { --slot-cell: 64px; } .slot-cabinet { padding: 9px; } .slot-marquee { font-size: 9px; letter-spacing: .1em; } }
@media (prefers-reduced-motion: reduce) { .slot-reel.is-spinning .slot-strip { animation: none; filter: none; } .slot-lever-arm { transition: none; } .jump-symbols span, .hero-bg { animation: none; } }