/* Slots5 -- 5-reel / 20-payline slot. Layout chrome (.sl-controls, .sl-stage,
   .sl-header, .sl-board-area, .sl-input-row, .sl-btn-place, .sl-paytable
   base, history table) is intentionally reused from style.css -- it's
   generic "any game's control panel" CSS, not specific to the old 3-reel
   game. Everything here is new geometry/components: the 5-column grid,
   autobet panel, jackpot ticker, bonus banner, and big-win tiers. Prefixed
   s5- (not sl-) so the legacy .sl-* reel rules in style.css stay easy to
   find and delete later without touching this file. */

.s5-jackpot-ticker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(90deg, rgba(141,59,222,0.18), rgba(186,134,237,0.12), rgba(141,59,222,0.18));
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: #f0c419;
    flex-shrink: 0;
}

@media (min-width:769px) {
    #page_content2.is-game-fullscreen .sl-page .sl-game-layout {
        display:grid!important;grid-template-columns:minmax(0,1fr) clamp(280px,23vw,350px)!important;
        grid-template-rows:minmax(0,1fr)!important;height:100%!important;min-height:0!important;
    }
    #page_content2.is-game-fullscreen .sl-page .sl-controls {
        grid-column:2!important;grid-row:1!important;width:100%!important;min-width:0!important;height:100%!important;overflow-y:auto!important;
    }
    #page_content2.is-game-fullscreen .sl-page .sl-stage {
        grid-column:1!important;grid-row:1!important;width:100%!important;height:100%!important;min-height:0!important;
    }
    #page_content2.is-game-fullscreen .sl-page .sl-board-area {
        flex:1!important;min-height:0!important;display:grid!important;place-items:center!important;overflow:hidden!important;
    }
    #page_content2.is-game-fullscreen .sl-page .s5-cabinet {
        width:min(92%,calc((100dvh - 200px) * 1.6667))!important;height:auto!important;
        max-width:none!important;max-height:100%!important;aspect-ratio:auto!important;margin:0!important;
    }
    #page_content2.is-game-fullscreen .sl-page .s5-reels { width:100%!important;aspect-ratio:5/3!important;align-items:stretch!important; }
    #page_content2.is-game-fullscreen .sl-page .s5-reel,
    #page_content2.is-game-fullscreen .sl-page .s5-reel-window { height:100%!important;min-height:0!important; }
    #page_content2.is-game-fullscreen .sl-page .s5-cell { height:33.333333%!important;min-height:0!important; }
    #page_content2.is-game-fullscreen .sl-page .s5-symbol { width:min(78%,90px)!important;height:min(78%,90px)!important; }
}
.s5-jackpot-ticker .fa-trophy { color: #f0c419; }
.s5-jackpot-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.55);
}
.s5-jackpot-amount {
    font-size: 16px;
    font-weight: 700;
    color: #f0c419;
    font-variant-numeric: tabular-nums;
    transition: transform 0.2s;
}
.s5-jackpot-amount.s5-jackpot-bump { animation: s5-jackpot-bump 0.4s ease-out; }
@keyframes s5-jackpot-bump {
    0% { transform: scale(1); }
    40% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* ── Reels ── */
.s5-machine {
    position: relative;
    display: flex;
    justify-content: center;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.35);
    transition: box-shadow 0.3s;
}
.s5-machine.s5-win {
    animation: s5-win-pulse 0.9s ease-in-out infinite;
}
@keyframes s5-win-pulse {
    0%, 100% { box-shadow: 0 0 0 2px #09b95b, 0 0 30px rgba(9,185,91,0.45); }
    50% { box-shadow: 0 0 0 3px #2ee36f, 0 0 55px rgba(46,227,111,0.85); }
}
.s5-machine.s5-shake { animation: s5-shake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes s5-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

.s5-reels { display: flex; gap: 8px; }

.s5-reel {
    width: 82px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
}
.s5-reel-window { height: 228px; overflow: hidden; position: relative; }
.s5-reel-window::before,
.s5-reel-window::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 40%;
    pointer-events: none;
    z-index: 1;
}
.s5-reel-window::before { top: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent); }
.s5-reel-window::after { bottom: 0; background: linear-gradient(to top, rgba(0,0,0,0.55), transparent); }

.s5-reel-strip {
    display: flex;
    flex-direction: column;
    will-change: transform, filter;
    filter: blur(0px);
}
.s5-reel-strip.s5-spinning { filter: blur(5px); }

.s5-cell {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    line-height: 1;
    position: relative;
}

/* Blank filler symbol -- themed as a "mystery" tile (soft purple/gold glow
   + sparkle) rather than an empty gap, so a miss still reads as a real
   slot symbol instead of a rendering hole. */
.s5-cell.s5-cell-blank {
    font-size: 0;
}
.s5-cell.s5-cell-blank::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 10px;
    background: radial-gradient(circle at 50% 42%, rgba(186,134,237,0.28), rgba(141,59,222,0.1) 62%, transparent 82%);
    border: 1px solid rgba(186,134,237,0.22);
    animation: s5-blank-pulse 3.2s ease-in-out infinite;
}
.s5-cell.s5-cell-blank::after {
    content: "\2726";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: rgba(240,196,25,0.55);
    text-shadow: 0 0 10px rgba(240,196,25,0.4);
    animation: s5-blank-pulse 3.2s ease-in-out infinite;
}
@keyframes s5-blank-pulse {
    0%, 100% { opacity: 0.65; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}
.s5-cell.s5-cell-win {
    animation: s5-cell-win 0.6s ease-in-out 2;
}
@keyframes s5-cell-win {
    0%, 100% { transform: scale(1); text-shadow: none; }
    50% { transform: scale(1.25); text-shadow: 0 0 18px rgba(46,227,111,0.9); }
}

/* Bonus round banner */
.s5-bonus-banner {
    text-transform: uppercase;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    background: linear-gradient(90deg, #8d3bde, #ba86ed);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    padding: 6px 16px;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(141,59,222,0.5);
    display: flex;
    align-items: center;
    gap: 8px;
}
.s5-bonus-banner #s5-bonus-banner-count,
.s5-bonus-banner span + span {
    background: rgba(0,0,0,0.25);
    padding: 1px 8px;
    border-radius: 999px;
}

/* Win overlay (used for big-win tiers) */
.s5-win-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 5;
    pointer-events: none;
    background: rgba(0,0,0,0.35);
    border-radius: 12px;
}
.s5-win-tier-label {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 20px rgba(255,255,255,0.6);
}
.s5-win-amount {
    font-size: 30px;
    font-weight: 800;
    color: #f0c419;
    text-shadow: 0 0 24px rgba(240,196,25,0.8);
    font-variant-numeric: tabular-nums;
}
/* Neutral recap overlay -- used during autobet on every spin (win or
   lose), not just tier-gated big wins, so the player can actually see what
   just happened before the next spin fires. */
.s5-win-overlay.s5-tier-neutral {
    background: rgba(0,0,0,0.55);
    animation: none;
}
.s5-win-overlay.s5-tier-neutral .s5-win-tier-label {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-shadow: none;
    animation: none;
}
.s5-win-overlay.s5-tier-neutral .s5-win-amount {
    font-size: 22px;
    color: #f0c419;
}
.s5-win-overlay.s5-tier-neutral.s5-recap-lose .s5-win-amount {
    color: rgba(255,255,255,0.4);
    font-size: 18px;
}

.s5-win-breakdown {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 6px 14px;
    margin-top: 2px;
    min-width: 140px;
}
.s5-win-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.s5-win-line-mult { color: #f0c419; font-weight: 700; font-variant-numeric: tabular-nums; }
.s5-win-line-more { justify-content: center; color: rgba(255,255,255,0.5); font-style: italic; }

.s5-win-overlay.s5-tier-1 .s5-win-tier-label { color: #2ee36f; }
.s5-win-overlay.s5-tier-2 { animation: s5-tier2-flash 0.6s ease-in-out; }
.s5-win-overlay.s5-tier-2 .s5-win-tier-label { color: #ba86ed; }
.s5-win-overlay.s5-tier-3 { animation: s5-tier3-flash 0.9s ease-in-out; }
.s5-win-overlay.s5-tier-3 .s5-win-tier-label {
    color: #f0c419;
    font-size: 26px;
    animation: s5-tier3-pulse 0.7s ease-in-out infinite;
}
@keyframes s5-tier2-flash {
    0% { background: rgba(186,134,237,0); }
    20% { background: rgba(186,134,237,0.35); }
    100% { background: rgba(0,0,0,0.35); }
}
@keyframes s5-tier3-flash {
    0% { background: rgba(240,196,25,0); }
    15% { background: rgba(240,196,25,0.5); }
    100% { background: rgba(0,0,0,0.35); }
}
@keyframes s5-tier3-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* Confetti burst -- CSS-only, no external library. A batch of absolutely
   positioned pieces with randomized fall/rotation set inline per-piece by
   JS (left offset, delay, hue). */
.s5-confetti-piece {
    position: absolute;
    top: -10px;
    width: 8px;
    height: 14px;
    z-index: 6;
    pointer-events: none;
    animation: s5-confetti-fall 1.6s linear forwards;
}
@keyframes s5-confetti-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(260px) rotate(540deg); opacity: 0; }
}

/* ── Paytable (3/4/5 columns + scatter/jackpot blurb) ── */
.s5-paytable {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 8px 10px;
    max-height: 340px;
    overflow-y: auto;
}
.s5-pay-row {
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 12px;
}
.s5-pay-icon { font-size: 16px; }
.s5-pay-mult { text-align: right; color: #ba86ed; font-weight: 600; }
.s5-pay-head {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.35);
    text-align: right;
}
.s5-pay-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 0; }
.s5-pay-blurb {
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255,255,255,0.55);
    padding-top: 2px;
}
.s5-pay-blurb b { color: rgba(255,255,255,0.8); }

/* ── Autobet ── */
.s5-autobet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.s5-autobet-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 10px;
}
.s5-autobet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.65);
}
.s5-autobet-check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.s5-autobet-check input { accent-color: #8d3bde; }
.s5-autobet-input {
    width: 78px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    padding: 5px 7px;
    text-align: right;
}
.s5-autobet-input:disabled { opacity: 0.4; }
.s5-autobet-input-x { width: 48px; }
.s5-autobet-inline { display: flex; align-items: center; gap: 6px; }
.s5-autobet-select {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    padding: 5px 7px;
}
.s5-autobet-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: #fff;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 8px;
}
.s5-autobet-pnl { font-weight: 700; font-variant-numeric: tabular-nums; }
.s5-autobet-pnl.positive { color: #2ee36f; }
.s5-autobet-pnl.negative { color: #e34848; }
.s5-autobet-stop-btn {
    background: #e34848;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    cursor: pointer;
    text-transform: uppercase;
}
.s5-autobet-stop-btn:hover { opacity: 0.88; }
.s5-autobet-start-btn {
    width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px;
    border: 0; border-radius: 8px; background: linear-gradient(135deg,#9b4de3,#7430bf); color: #fff;
    font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(116,48,191,.25);
}
.s5-autobet-start-btn:disabled { opacity: .5; cursor: default; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .s5-reel { width: 74px; }
    .s5-reel-window { height: 204px; }
    .s5-cell { height: 68px; font-size: 32px; }
}
@media (max-width: 768px), (pointer: coarse) and (max-width: 1199px) and (max-height: 600px) and (orientation: landscape) {
    .s5-reel { width: 60px; }
    .s5-reel-window { height: 168px; }
    .s5-cell { height: 56px; font-size: 26px; }
    .s5-win-tier-label { font-size: 18px; }
    .s5-win-amount { font-size: 24px; }
}
@media (max-width: 480px) {
    .s5-reels { gap: 5px; }
    .s5-reel { width: 48px; }
    .s5-reel-window { height: 138px; }
    .s5-cell { height: 46px; font-size: 20px; }
    .s5-jackpot-amount { font-size: 14px; }
    .s5-bonus-banner { font-size: 11px; padding: 5px 12px; }
}

/* =========================================
   SLOTS 2026 UI REFRESH + BRANDED SYMBOLS
   ========================================= */
.sl-page { max-width: 1240px; margin: 0 auto; padding: 24px 22px 42px; box-sizing: border-box; text-align: left; }
.sl-page-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.sl-page-identity { display: flex; align-items: center; gap: 12px; }
.sl-page-icon { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(171,120,255,.3); border-radius: 14px; background: linear-gradient(145deg,rgba(132,71,234,.26),rgba(43,22,76,.52)); box-shadow: inset 0 1px rgba(255,255,255,.08),0 12px 25px rgba(10,5,22,.24); }
.sl-page-icon img { width: 25px; height: 25px; object-fit: contain; }
.sl-page-kicker { display: block; margin-bottom: 2px; color: #8d829a; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sl-page-identity h1 { margin: 0; color: #fff; font-size: 24px; line-height: 1.1; letter-spacing: -.025em; }
.sl-page-actions { display: flex; align-items: center; gap: 8px; }
.sl-how-button,.sl-top-fair { display: inline-flex; height: 36px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.035); color: #aaa2b4; font: 700 11px/1 Arial,sans-serif; text-decoration: none; box-sizing: border-box; }
.sl-how-button { cursor: pointer; }
.sl-how-button:hover,.sl-top-fair:hover { border-color: rgba(163,108,255,.32); background: rgba(135,74,232,.1); color: #fff; }
.sl-top-fair i { color: #f4c95d; }
.sl-page .sl-game-layout { min-height: 690px; margin-bottom: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 20px; background: #110d1c; box-shadow: 0 24px 65px rgba(5,2,14,.34),inset 0 1px rgba(255,255,255,.035); }
.sl-page .sl-controls { width: clamp(310px,28vw,350px); min-width: 310px; gap: 16px; padding: 22px; overflow-y: auto; border-right: 1px solid rgba(255,255,255,.07); background: radial-gradient(circle at 20% 0,rgba(132,70,224,.15),transparent 34%),linear-gradient(165deg,#21172f,#16101f 72%); box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #5f3b8e transparent; }
.sl-control-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.065); }
.sl-control-head > div span { display: block; margin-bottom: 3px; color: #857b8e; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sl-control-head > div strong { color: #f5f1f8; font-size: 15px; }
.sl-control-balance { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid rgba(244,201,93,.14); border-radius: 9px; background: rgba(244,201,93,.055); color: #d9ccaa; font-size: 11px; }
.sl-control-balance i,.sl-page .sl-input-icon { color: #f4c95d; }
.sl-page .sl-btn-place { order: 0; min-height: 52px; height: 52px; border-radius: 12px; background: linear-gradient(135deg,#7635db,#a254ef); font-size: 13px; font-weight: 800; box-shadow: 0 14px 28px rgba(92,40,177,.24),inset 0 1px rgba(255,255,255,.16); }
.sl-page .sl-btn-place:hover:not(.disabled) { opacity: 1; filter: brightness(1.08); }
.sl-page .sl-label { margin-bottom: 7px; color: #9c92a3; font-size: 9px; font-weight: 800; }
.sl-page .sl-input-row { min-height: 55px; padding-left: 4px; border-color: rgba(171,122,255,.22); border-radius: 11px; background: rgba(6,4,12,.42); transition: border-color .2s,box-shadow .2s; }
.sl-page .sl-input-row:focus-within { border-color: #8952e2; box-shadow: 0 0 0 3px rgba(132,72,226,.12); }
.sl-page .sl-input { font-size: 17px; font-weight: 750; }
.sl-page .sl-chips { gap: 4px; padding-right: 7px; border-left: 0; }
.sl-page .sl-chip { min-width: 34px; height: 31px; padding: 0 7px; border: 1px solid rgba(255,255,255,.07); border-radius: 7px; background: rgba(255,255,255,.04); color: #8e8496; font-size: 10px; }
.sl-page .sl-segment-row { min-height: 45px; justify-content: space-between; padding: 0 11px; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: rgba(6,4,12,.25); }
.sl-page .sl-label-inline { font-size: 11px; text-transform: none; }
.sl-page .s5-autobet-panel,.sl-page .s5-paytable { border-color: rgba(255,255,255,.065); border-radius: 10px; background: rgba(6,4,12,.32); }
.sl-page .s5-paytable { max-height: 255px; padding: 8px; }
.sl-page .s5-pay-row { min-height: 29px; padding: 2px 5px; border-radius: 6px; background: rgba(255,255,255,.018); }
.sl-page .s5-pay-icon { display: flex; align-items: center; justify-content: center; width: 30px; }
.sl-page .s5-pay-mult { color: #c194f7; font-size: 10px; }
.sl-page .s5-pay-blurb { color: #736a7b; font-size: 9px; }
.sl-page .s5-pay-blurb b { display: inline-flex; align-items: center; color: #bbb1c1; }
.sl-risk-note { display: flex; align-items: flex-start; gap: 7px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.055); color: #756b7d; font-size: 10px; line-height: 1.5; }
.sl-risk-note i { margin-top: 2px; color: #8e6fc1; }
.sl-page .sl-stage { position: relative; background: radial-gradient(circle at 52% 43%,rgba(116,67,184,.27),transparent 43%),linear-gradient(145deg,#100b1b,#08060e); }
.sl-page .sl-stage::before { content: ''; position: absolute; inset: 57px 0 0; pointer-events: none; opacity: .48; background: radial-gradient(circle at center,transparent 0 40%,rgba(244,201,93,.06) 40.4% 40.8%,transparent 41.2%),repeating-linear-gradient(135deg,transparent 0 43px,rgba(255,255,255,.018) 44px); }
.sl-page .sl-header { position: relative; z-index: 3; min-height: 57px; padding: 0 20px; border-bottom-color: rgba(255,255,255,.06); background: rgba(25,18,36,.84); }
.sl-page .sl-header-icon { width: 22px; height: 22px; }
.sl-page .sl-header-title { font-size: 14px; }
.sl-page .sl-info-icon { display: none; }
.sl-round-state { display: inline-flex; align-items: center; gap: 8px; color: #89808f; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.sl-round-state i { width: 7px; height: 7px; border-radius: 50%; background: #55dba0; box-shadow: 0 0 0 4px rgba(85,219,160,.09),0 0 12px rgba(85,219,160,.4); }
.sl-page .s5-jackpot-ticker { position: relative; z-index: 2; min-height: 49px; border-bottom-color: rgba(244,201,93,.1); background: linear-gradient(90deg,rgba(73,42,107,.32),rgba(244,201,93,.07),rgba(73,42,107,.32)); }
.sl-page .s5-jackpot-label { color: #857c8c; font-size: 9px; font-weight: 800; }
.sl-page .s5-jackpot-amount { color: #f4c95d; font-size: 18px; text-shadow: 0 0 18px rgba(244,201,93,.2); }
.sl-page .sl-board-area { position: relative; z-index: 1; align-items: center; padding: 28px 24px; }
.s5-cabinet { width: min(100%,620px); padding: 13px; border: 1px solid rgba(244,201,93,.14); border-radius: 23px; background: linear-gradient(145deg,rgba(76,43,108,.92),rgba(24,15,37,.96) 24%,rgba(10,7,16,.96)); box-shadow: inset 0 1px rgba(255,255,255,.08),inset 0 0 0 5px rgba(8,5,13,.35),0 25px 55px rgba(3,1,8,.38); }
.s5-cabinet-head,.s5-cabinet-foot { display: flex; align-items: center; justify-content: space-between; color: #9874bf; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.s5-cabinet-head { padding: 3px 8px 13px; }
.s5-cabinet-head span { display: flex; align-items: center; gap: 6px; color: #d8b4ff; }
.s5-cabinet-head i,.s5-cabinet-foot i { color: #f4c95d; }
.s5-cabinet-head small { color: #766b7e; font-size: 8px; }
.s5-cabinet-foot { justify-content: center; gap: 10px; padding: 12px 6px 2px; color: #716778; font-size: 8px; }
.sl-page .s5-machine { padding: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: linear-gradient(180deg,rgba(7,5,11,.86),rgba(25,15,37,.84),rgba(7,5,11,.9)); box-shadow: inset 0 0 30px rgba(0,0,0,.35),0 15px 32px rgba(3,1,8,.28); }
.sl-page .s5-machine::before,.sl-page .s5-machine::after { content: ''; position: absolute; z-index: 3; top: 0; bottom: 0; width: 2px; pointer-events: none; background: linear-gradient(transparent,#f4c95d,transparent); opacity: .25; }
.sl-page .s5-machine::before { left: 9px; }
.sl-page .s5-machine::after { right: 9px; }
.sl-page .s5-reels { width: 100%; gap: 7px; }
.sl-page .s5-reel { flex: 1; width: auto; min-width: 0; border-color: rgba(191,141,248,.13); border-radius: 10px; background: linear-gradient(180deg,#0d0914,#241531 50%,#0d0914); box-shadow: inset 0 0 18px rgba(0,0,0,.45); }
.sl-page .s5-reel-window { height: 270px; }
.sl-page .s5-reel-window::before { background: linear-gradient(to bottom,rgba(3,2,6,.8),transparent); }
.sl-page .s5-reel-window::after { background: linear-gradient(to top,rgba(3,2,6,.8),transparent); }
.sl-page .s5-cell { height: 90px; border-bottom: 1px solid rgba(255,255,255,.035); font-size: 0; }
.s5-symbol { display: block; width: 72px; height: 72px; object-fit: contain; user-select: none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.34)); pointer-events: none; }
.s5-pay-icon .s5-symbol { width: 27px; height: 27px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
.s5-pay-blurb .s5-symbol { display: inline-block; width: 23px; height: 23px; margin-right: 4px; vertical-align: middle; }
.s5-win-line .s5-symbol { display: inline-block; width: 25px; height: 25px; margin-right: 5px; vertical-align: middle; }
.s5-symbol-history { display: inline-block; width: 25px; height: 25px; margin-right: -3px; vertical-align: middle; filter: drop-shadow(0 3px 5px rgba(0,0,0,.25)); }
.s5-history-empty { color: #5e5664; }
.sl-page .s5-cell.s5-cell-win { animation: s5-symbol-win-2026 .6s ease-in-out 2; }
.sl-page .s5-cell.s5-cell-win .s5-symbol { filter: drop-shadow(0 0 13px rgba(79,229,157,.75)) drop-shadow(0 7px 8px rgba(0,0,0,.3)); }
.sl-page .s5-cell.s5-cell-blank::before,.sl-page .s5-cell.s5-cell-blank::after { display: none; content: none; }
.sl-page .s5-cell.s5-cell-blank .s5-symbol { width: 62px; height: 62px; opacity: .76; filter: saturate(.78) brightness(.86) drop-shadow(0 5px 7px rgba(0,0,0,.3)); animation: s5-blank-symbol-2026 3.2s ease-in-out infinite; }
.sl-page .s5-bonus-banner { top: 9px; border: 1px solid rgba(255,255,255,.15); background: linear-gradient(90deg,#7336c9,#ad5dea); box-shadow: 0 8px 24px rgba(106,48,190,.42); }
.sl-page .s5-win-overlay { border-radius: 15px; background: radial-gradient(circle,rgba(92,47,147,.72),rgba(4,3,7,.88)); backdrop-filter: blur(3px); }
.sl-page .s5-win-breakdown { border-color: rgba(255,255,255,.08); background: rgba(8,5,13,.62); }
.sl-page .sl-history { overflow: hidden; margin-bottom: 24px; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: linear-gradient(145deg,rgba(29,21,40,.9),rgba(16,12,24,.94)); box-shadow: 0 15px 35px rgba(5,2,12,.2); }
.sl-history-title { display: flex; align-items: center; justify-content: space-between; padding: 17px 19px; border-bottom: 1px solid rgba(255,255,255,.055); }
.sl-history-title span { display: block; margin-bottom: 2px; color: #786f80; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sl-history-title h2 { margin: 0; color: #f1edf4; font-size: 14px; }
.sl-history-title > i { color: #74539f; }
.sl-page .sl-history .table-tabs { padding: 8px 12px; background: rgba(5,3,10,.18); }
.sl-page .sl-history .table-header { background: rgba(255,255,255,.025); }
@keyframes s5-symbol-win-2026 { 50% { transform: scale(1.13); } }
@keyframes s5-blank-symbol-2026 { 0%,100% { opacity: .7; transform: scale(.94); } 50% { opacity: .9; transform: scale(1); } }
@media (max-width: 900px) {
    .sl-page .sl-controls { width: 290px; min-width: 270px; padding: 18px; }
    .s5-symbol { width: 62px; height: 62px; }
}
@media (max-width: 768px), (pointer: coarse) and (max-width: 1199px) and (max-height: 600px) and (orientation: landscape) {
    .sl-page { padding: 16px 12px 34px; }
    .sl-how-button { width: 36px; padding: 0; justify-content: center; font-size: 0; }
    .sl-how-button i { font-size: 13px; }
    .sl-page .sl-game-layout { flex-direction: column; min-height: 0; border-radius: 16px; }
    .sl-page .sl-stage { order: 1; }
    .sl-page .sl-controls { order: 2; width: 100%; min-width: 0; border-top: 1px solid rgba(255,255,255,.07); border-right: 0; }
    .sl-page .sl-board-area { padding: 22px 15px; }
    .sl-page .s5-reel-window { height: 225px; }
    .sl-page .s5-cell { height: 75px; }
    .sl-page .s5-cell.s5-cell-blank .s5-symbol { width: 56px; height: 56px; }
}
@media (max-width: 480px) {
    .sl-page-icon { width: 40px; height: 40px; border-radius: 12px; }
    .sl-page-identity h1 { font-size: 20px; }
    .sl-top-fair { width: 36px; padding: 0; justify-content: center; font-size: 0; }
    .sl-top-fair i { font-size: 13px; }
    .sl-page .sl-board-area { padding: 15px 5px; }
    .s5-cabinet { padding: 8px 6px; border-radius: 15px; }
    .s5-cabinet-head { padding: 2px 5px 9px; }
    .s5-cabinet-head small { display: none; }
    .sl-page .s5-machine { padding: 7px; }
    .sl-page .s5-reels { gap: 3px; }
    .sl-page .s5-reel-window { height: 168px; }
    .sl-page .s5-cell { height: 56px; }
    .s5-symbol { width: 49px; height: 49px; }
    .sl-page .s5-cell.s5-cell-blank .s5-symbol { width: 44px; height: 44px; }
    .s5-cabinet-foot { padding-top: 9px; }
    .sl-page .sl-input-row { flex-wrap: wrap; }
    .sl-page .sl-chips { width: 100%; padding: 0 7px 7px; }
    .sl-page .sl-chip { flex: 1; }
    .sl-control-head { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .sl-page .s5-cell.s5-cell-win,.sl-page .s5-jackpot-amount,.sl-page .s5-cell.s5-cell-blank .s5-symbol { animation: none !important; }
}

/* Mobile app scene ------------------------------------------------------ */
@media (max-width: 768px) and (orientation: portrait) {
    body.is-game-page .sl-page .sl-game-layout {
        grid-template-rows:minmax(0,1fr) 174px!important;gap:6px!important;
    }
    body.is-game-page .sl-page .sl-stage {
        grid-row:1!important;order:1!important;padding:0!important;display:grid!important;
        grid-template-columns:1fr!important;grid-template-rows:36px minmax(0,1fr)!important;overflow:hidden!important;
    }
    body.is-game-page .sl-page .sl-header { display:none!important; }
    body.is-game-page .sl-page .s5-jackpot-ticker {
        grid-row:1!important;width:100%!important;height:36px!important;min-height:36px!important;padding:4px 8px!important;gap:6px!important;box-sizing:border-box!important;
    }
    body.is-game-page .sl-page .s5-jackpot-label { font-size:7px!important; }
    body.is-game-page .sl-page .s5-jackpot-amount { font-size:14px!important; }
    body.is-game-page .sl-page .sl-board-area {
        grid-row:2!important;width:100%!important;height:100%!important;min-height:0!important;padding:6px!important;display:grid!important;place-items:center!important;overflow:hidden!important;box-sizing:border-box!important;
    }
    body.is-game-page .sl-page .s5-cabinet {
        width:100%!important;height:auto!important;max-height:100%!important;margin:auto!important;padding:6px!important;display:grid!important;
        grid-template-columns:1fr!important;grid-template-rows:23px minmax(0,1fr) 18px!important;gap:3px!important;border-radius:16px!important;box-sizing:border-box!important;
    }
    body.is-game-page .sl-page .s5-cabinet-head { height:23px!important;padding:0 5px!important;font-size:7px!important; }
    body.is-game-page .sl-page .s5-cabinet-head small { display:none!important; }
    body.is-game-page .sl-page .s5-machine {
        width:100%!important;height:auto!important;min-height:0!important;margin:0!important;padding:6px!important;border-radius:12px!important;box-sizing:border-box!important;
    }
    body.is-game-page .sl-page .s5-reels { width:100%!important;gap:3px!important; }
    body.is-game-page .sl-page .s5-reel { width:auto!important;min-width:0!important;flex:1 1 0!important;border-radius:7px!important; }
    body.is-game-page .sl-page .s5-reel-window { height:clamp(138px,46vw,190px)!important; }
    body.is-game-page .sl-page .s5-cell { height:clamp(46px,15.333vw,63.333px)!important;min-height:clamp(46px,15.333vw,63.333px)!important; }
    body.is-game-page .sl-page .s5-symbol { width:clamp(42px,13vw,56px)!important;height:clamp(42px,13vw,56px)!important;max-width:90%!important; }
    body.is-game-page .sl-page .s5-cell.s5-cell-blank .s5-symbol { width:clamp(38px,11vw,49px)!important;height:clamp(38px,11vw,49px)!important; }
    body.is-game-page .sl-page .s5-cabinet-foot { height:18px!important;padding:0!important;gap:7px!important;font-size:6px!important; }
    body.is-game-page .sl-page .s5-win-tier-label { font-size:16px!important; }
    body.is-game-page .sl-page .s5-win-amount { font-size:22px!important; }
    body.is-game-page .sl-page .s5-win-breakdown { max-height:72px!important;padding:4px 7px!important;overflow:hidden!important;font-size:8px!important; }

    body.is-game-page .sl-page .sl-controls {
        position:relative!important;grid-row:2!important;order:2!important;width:100%!important;height:174px!important;padding:7px!important;display:grid!important;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:56px 55px 43px!important;gap:5px!important;overflow:hidden!important;
    }
    body.is-game-page .sl-page .sl-control-head,
    body.is-game-page .sl-page .sl-risk-note,
    body.is-game-page .sl-page .sl-paytable-segment,
    body.is-game-page .sl-page .sl-demo-banner { display:none!important; }
    body.is-game-page .sl-page #sl-place-bet {
        grid-column:1/-1!important;grid-row:1!important;order:0!important;width:100%!important;height:56px!important;min-height:56px!important;margin:0!important;border-radius:12px!important;font-size:13px!important;
    }
    body.is-game-page .sl-page .sl-bet-segment { grid-column:1/-1!important;grid-row:2!important;margin:0!important;gap:3px!important;overflow:hidden!important; }
    body.is-game-page .sl-page .sl-label { margin:0!important;font-size:8px!important;line-height:1!important; }
    body.is-game-page .sl-page .sl-input-row { height:44px!important;min-height:44px!important;padding:4px 7px!important;flex-wrap:nowrap!important;gap:5px!important;overflow:hidden!important; }
    body.is-game-page .sl-page .sl-input { min-width:52px!important;padding:0!important;font-size:16px!important; }
    body.is-game-page .sl-page .sl-chips { width:auto!important;margin:0!important;padding:0!important;display:flex!important;flex:0 0 auto!important;gap:4px!important; }
    body.is-game-page .sl-page .sl-chip { width:38px!important;min-width:38px!important;height:34px!important;padding:0 4px!important;flex:0 0 38px!important;border-radius:8px!important;font-size:9px!important; }
    body.is-game-page .sl-page .sl-turbo-segment,
    body.is-game-page .sl-page .sl-autobet-segment {
        grid-row:3!important;height:43px!important;min-height:43px!important;margin:0!important;padding:0 9px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
        border:1px solid rgba(255,255,255,.06)!important;border-radius:10px!important;background:rgba(6,4,12,.25)!important;box-sizing:border-box!important;
    }
    body.is-game-page .sl-page .sl-turbo-segment { grid-column:1!important; }
    body.is-game-page .sl-page .sl-autobet-segment { grid-column:2!important; }
    body.is-game-page .sl-page .sl-label-inline { max-width:85px!important;font-size:7px!important;line-height:1.15!important; }
    body.is-game-page .sl-page .s5-autobet-head { width:100%!important;margin:0!important; }
    body.is-game-page .sl-page .toggle-switch { flex:0 0 auto!important;transform:scale(.82)!important; }

    /* Advanced autobet settings behave as an app bottom sheet. */
    body.is-game-page .sl-page .sl-autobet-segment.is-autobet-open {
        position:fixed!important;z-index:9500!important;right:max(8px,var(--mobile-safe-right,0px))!important;bottom:calc(var(--mobile-tabs-h,64px) + var(--mobile-safe-bottom,0px) + 8px)!important;
        left:max(8px,var(--mobile-safe-left,0px))!important;width:auto!important;height:auto!important;max-height:min(64dvh,470px)!important;padding:10px!important;display:flex!important;flex-direction:column!important;gap:8px!important;
        overflow-y:auto!important;border-color:rgba(178,112,235,.3)!important;border-radius:17px!important;background:linear-gradient(155deg,#21172e,#100d18 76%)!important;
        box-shadow:0 24px 70px rgba(0,0,0,.65)!important;
    }
    body.is-game-page .sl-page .sl-autobet-segment.is-autobet-open .s5-autobet-head { min-height:34px!important; }
    body.is-game-page .sl-page .s5-autobet-panel { width:100%!important;padding:8px!important;gap:6px!important;box-sizing:border-box!important; }
    body.is-game-page .sl-page .s5-autobet-row { min-height:32px!important;font-size:9px!important; }
    body.is-game-page .sl-page .s5-autobet-input,
    body.is-game-page .sl-page .s5-autobet-select { min-height:30px!important;font-size:9px!important; }
	 body.is-game-page .sl-page .s5-autobet-start-btn { min-height:40px!important;flex:0 0 40px!important; }
}

@media (max-width:350px) and (orientation:portrait) {
    body.is-game-page .sl-page .sl-game-layout { grid-template-rows:minmax(0,1fr) 168px!important; }
    body.is-game-page .sl-page .sl-controls { height:168px!important;grid-template-rows:54px 52px 42px!important; }
    body.is-game-page .sl-page #sl-place-bet { height:54px!important;min-height:54px!important; }
    body.is-game-page .sl-page .sl-input-row { height:41px!important;min-height:41px!important; }
    body.is-game-page .sl-page .sl-chip { width:34px!important;min-width:34px!important;height:31px!important;flex-basis:34px!important; }
    body.is-game-page .sl-page .sl-turbo-segment,
    body.is-game-page .sl-page .sl-autobet-segment { height:42px!important;min-height:42px!important;padding:0 6px!important; }
}

@media (max-width:768px) and (orientation:landscape), (pointer:coarse) and (max-width:1199px) and (max-height:600px) and (orientation:landscape) {
    body.is-game-page .sl-page .sl-controls {
        position:relative!important;grid-column:1!important;grid-row:1!important;order:1!important;padding:6px!important;display:grid!important;
        grid-template-columns:1fr 1fr!important;grid-template-rows:48px 52px 40px!important;align-content:center!important;gap:5px!important;overflow:hidden!important;
    }
    body.is-game-page .sl-page .sl-control-head,
    body.is-game-page .sl-page .sl-paytable-segment,
    body.is-game-page .sl-page .sl-risk-note,
    body.is-game-page .sl-page .sl-demo-banner { display:none!important; }
    body.is-game-page .sl-page #sl-place-bet { grid-column:1/-1!important;grid-row:1!important;height:48px!important;min-height:48px!important;margin:0!important;font-size:10px!important; }
    body.is-game-page .sl-page .sl-bet-segment { grid-column:1/-1!important;grid-row:2!important;margin:0!important;gap:2px!important;overflow:hidden!important; }
    body.is-game-page .sl-page .sl-label { margin:0!important;font-size:7px!important; }
    body.is-game-page .sl-page .sl-input-row { height:42px!important;min-height:42px!important;padding:3px 5px!important;flex-wrap:nowrap!important;overflow:hidden!important; }
    body.is-game-page .sl-page .sl-input { min-width:40px!important;padding:0!important;font-size:13px!important; }
    body.is-game-page .sl-page .sl-chips { width:auto!important;padding:0!important;gap:2px!important; }
    body.is-game-page .sl-page .sl-chip { min-width:30px!important;height:31px!important;padding:0 3px!important;font-size:7px!important; }
    body.is-game-page .sl-page .sl-turbo-segment,
    body.is-game-page .sl-page .sl-autobet-segment { grid-row:3!important;height:40px!important;min-height:40px!important;margin:0!important;padding:0 6px!important;overflow:hidden!important; }
    body.is-game-page .sl-page .sl-turbo-segment { grid-column:1!important; }
    body.is-game-page .sl-page .sl-autobet-segment { grid-column:2!important; }
    body.is-game-page .sl-page .sl-label-inline { font-size:6px!important; }
    body.is-game-page .sl-page .s5-autobet-head { margin:0!important; }
    body.is-game-page .sl-page .toggle-switch { transform:scale(.75)!important; }
    body.is-game-page .sl-page .sl-stage { grid-column:2!important;grid-row:1!important;order:2!important;padding:0!important;display:grid!important;grid-template-rows:30px minmax(0,1fr)!important;overflow:hidden!important; }
    body.is-game-page .sl-page .sl-header { display:none!important; }
    body.is-game-page .sl-page .s5-jackpot-ticker { height:30px!important;min-height:30px!important;padding:2px 6px!important; }
    body.is-game-page .sl-page .s5-jackpot-label { font-size:6px!important; }
    body.is-game-page .sl-page .s5-jackpot-amount { font-size:12px!important; }
    body.is-game-page .sl-page .sl-board-area { width:100%!important;height:100%!important;min-height:0!important;padding:3px!important;display:grid!important;place-items:center!important;overflow:hidden!important; }
    body.is-game-page .sl-page .s5-cabinet { width:auto!important;height:100%!important;max-width:100%!important;padding:4px!important;display:grid!important;grid-template-rows:18px minmax(0,1fr) 14px!important;gap:2px!important;box-sizing:border-box!important; }
    body.is-game-page .sl-page .s5-cabinet-head { height:18px!important;padding:0 4px!important;font-size:6px!important; }
    body.is-game-page .sl-page .s5-cabinet-head small { display:none!important; }
    body.is-game-page .sl-page .s5-machine { height:100%!important;min-height:0!important;padding:4px!important;box-sizing:border-box!important; }
    body.is-game-page .sl-page .s5-reels,
    body.is-game-page .sl-page .s5-reel,
    body.is-game-page .sl-page .s5-reel-window { height:100%!important;min-height:0!important; }
    body.is-game-page .sl-page .s5-reels { gap:3px!important; }
    body.is-game-page .sl-page .s5-reel { width:auto!important;min-width:0!important;flex:1!important; }
    body.is-game-page .sl-page .s5-cell { height:33.3333%!important;min-height:0!important; }
    body.is-game-page .sl-page .s5-symbol { width:auto!important;height:78%!important;max-width:88%!important; }
    body.is-game-page .sl-page .s5-cabinet-foot { height:14px!important;padding:0!important;font-size:5px!important; }
    body.is-game-page .sl-page .sl-autobet-segment.is-autobet-open {
        position:fixed!important;z-index:9500!important;inset:8px!important;width:auto!important;height:auto!important;max-height:calc(100dvh - 16px)!important;padding:9px!important;
        display:flex!important;flex-direction:column!important;gap:6px!important;overflow-y:auto!important;border-radius:15px!important;background:linear-gradient(155deg,#21172e,#100d18 76%)!important;box-shadow:0 24px 70px rgba(0,0,0,.65)!important;
    }
}

/* Fullscreen reel sizing is based on the actual board viewport, after the
   toolbar, title, stage header and jackpot ticker have taken their space. */
#page_content2.is-game-fullscreen .sl-page .sl-board-area {
    container-type:size;place-content:center!important;
}
#page_content2.is-game-fullscreen .sl-page > :not(.sl-game-layout) { display:none!important; }
#page_content2.is-game-fullscreen .sl-page .s5-cabinet {
    width:min(92%,calc(166.6667dvh - 616.6668px))!important;
    width:min(92cqw,calc(166.6667cqh - 133.3334px))!important;
    height:auto!important;max-width:none!important;max-height:none!important;
    aspect-ratio:auto!important;margin:0!important;
}
#page_content2.is-game-fullscreen .sl-page .s5-reels {
    width:100%!important;aspect-ratio:5/3!important;align-items:stretch!important;
}
#page_content2.is-game-fullscreen .sl-page .s5-reel,
#page_content2.is-game-fullscreen .sl-page .s5-reel-window,
#page_content2.is-game-fullscreen .sl-page .s5-reel-strip {
    height:100%!important;min-height:0!important;
}
#page_content2.is-game-fullscreen .sl-page .s5-cell {
    height:33.333333%!important;min-height:0!important;flex:0 0 33.333333%!important;
}
#page_content2.is-game-fullscreen .sl-page .s5-symbol {
    width:auto!important;height:76%!important;max-width:84%!important;
}