.pg-new-2
{
    min-height: calc(100vh - 56px);
    overflow-anchor: none;
}
.pg-new-2 .slot-cabinet,
.pg-new-2 .pg-controls-card
{
    overflow-anchor: none;
}

/* ── Flashy cabinet sign (above marquee) ─────────────────── */
/* Rainbow border — duplicated gradient + 200% size so the loop is seamless */
.slot-cabinet-sign
{
    position: relative;
    margin-bottom: 14px;
    padding: 3px;
    border-radius: 14px;
    background: linear-gradient(
        90deg,
        rgba(255, 213, 106, 0.88) 0%,
        rgba(255, 90, 90, 0.78) 12.5%,
        rgba(0, 192, 112, 0.82) 25%,
        rgba(103, 186, 234, 0.82) 37.5%,
        rgba(255, 213, 106, 0.88) 50%,
        rgba(255, 213, 106, 0.88) 50%,
        rgba(255, 90, 90, 0.78) 62.5%,
        rgba(0, 192, 112, 0.82) 75%,
        rgba(103, 186, 234, 0.82) 87.5%,
        rgba(255, 213, 106, 0.88) 100%
    );
    background-size: 200% 100%;
    background-repeat: repeat;
    animation: slotSignBorder 8s linear infinite;
    box-shadow:
        0 0 12px rgba(255, 213, 106, 0.22),
        0 4px 14px rgba(0, 0, 0, 0.22);
}
@keyframes slotSignBorder
{
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
.slot-sign-frame
{
    position: relative;
    border-radius: 12px;
    overflow: visible;
}
.slot-sign-lights
{
    position: absolute;
    inset: 0;
    border-radius: 12px;
    pointer-events: none;
    z-index: 2;
}
.slot-sign-bulb
{
    position: absolute;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: #2a3545;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
    animation: slotSignBulbIdle 2.4s ease-in-out infinite;
}
.slot-sign-bulb:nth-child(3n)   { animation-delay: 0.2s; }
.slot-sign-bulb:nth-child(3n+1) { animation-delay: 0.8s; }
.slot-sign-bulb:nth-child(3n+2) { animation-delay: 1.4s; }
@keyframes slotSignBulbIdle
{
    0%, 100% { opacity: 0.35; transform: scale(0.82); background: #2a3545; }
    50%      { opacity: 0.9;  transform: scale(1);    background: #c8a030; box-shadow: 0 0 5px rgba(200,160,48,0.45); }
}
.slot-sign-panel
{
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 24px 36px 22px;
    border-radius: 11px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 213, 106, 0.1), transparent 58%),
        linear-gradient(180deg, #2a3344 0%, #151b24 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.slot-sign-kicker
{
    margin: 0 0 3px;
    font-family: "Montserrat", sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #49BCB3;
}
.slot-sign-title
{
    margin: 0;
    font-family: "Bungee", "Montserrat", sans-serif;
    font-size: clamp(0.88rem, 3vw, 1.28rem);
    line-height: 1.3;
    letter-spacing: 0.05em;
    color: #e8c45a;
    text-shadow:
        0 0 8px rgba(255, 213, 106, 0.3),
        0 1px 0 #6a4a10;
}

body.pg-light .slot-sign-panel
{
    background:
        radial-gradient(circle at 50% 0%, rgba(103, 186, 234, 0.12), transparent 58%),
        linear-gradient(180deg, #eef3f8 0%, #dde6f0 100%);
}
body.pg-light .slot-sign-kicker { color: #2a9d8f; }
body.pg-light .slot-sign-title
{
    color: #003C5E;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
body.pg-light .slot-cabinet-sign
{
    box-shadow:
        0 0 14px rgba(255, 180, 50, 0.28),
        0 4px 14px rgba(0, 60, 94, 0.1);
    background: linear-gradient(
        90deg,
        rgba(255, 190, 60, 0.95) 0%,
        rgba(255, 90, 90, 0.82) 12.5%,
        rgba(0, 170, 100, 0.88) 25%,
        rgba(60, 150, 210, 0.88) 37.5%,
        rgba(255, 190, 60, 0.95) 50%,
        rgba(255, 190, 60, 0.95) 50%,
        rgba(255, 90, 90, 0.82) 62.5%,
        rgba(0, 170, 100, 0.88) 75%,
        rgba(60, 150, 210, 0.88) 87.5%,
        rgba(255, 190, 60, 0.95) 100%
    );
    background-size: 200% 100%;
}

/* ── Cabinet outer shell ─────────────────────────────────── */
.slot-cabinet
{
    background: linear-gradient(180deg, #1e2734 0%, #141c28 60%, #0d1218 100%);
    border: 8px solid #49BCB3;
    border-radius: 28px;
    padding: 18px 22px 28px;
    box-shadow: 0 0 0 6px #262f3f, 0 22px 48px rgba(0,0,0,0.55);
}

/*
 * Marquee — single track holds two identical copies; animate -50% for seamless loop.
 */
.slot-marquee
{
    overflow: hidden;
    white-space: nowrap;
    background: #00C070;
    color: #fff;
    font-family: "Bungee", "Montserrat", sans-serif;
    letter-spacing: 0.08em;
    font-size: 0.95rem;
    padding: 9px 0;
    border-radius: 10px;
    margin-bottom: 20px;
}
.slot-marquee-track
{
    display: flex;
    width: max-content;
    will-change: transform;
    animation: slotMarquee 28s linear infinite;
}
.slot-marquee-item
{
    flex-shrink: 0;
    display: flex;
    gap: 40px;
    padding: 0 20px;
    box-sizing: border-box;
    align-items: center;
}
.slot-marquee-item span { display: inline-block; }
@keyframes slotMarquee
{
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* ── Machine body row ────────────────────────────────────── */
.slot-machine-body
{
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.slot-bezel
{
    position: relative;
    flex: 1;
    padding: 20px;
    background: #1a212c;
    border-radius: 18px;
}
.slot-bezel-lights
{
    position: absolute;
    inset: 0;
    border-radius: 18px;
    pointer-events: none;
    z-index: 1;
}
.slot-bulb
{
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: #2a3545;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
    transition: background 0.08s;
}
.slot-bezel.is-win .slot-bulb { animation: casinoBlink 0.26s linear infinite; }
.slot-bezel.is-win .slot-bulb:nth-child(3n)   { animation-delay: 0.09s; background: #00C070; }
.slot-bezel.is-win .slot-bulb:nth-child(3n+1) { animation-delay: 0.17s; background: #ffd56a; }
.slot-bezel.is-win .slot-bulb:nth-child(3n+2) { animation-delay: 0s;    background: #ff5a5a; }
@keyframes casinoBlink
{
    0%, 100% { opacity: 0.18; transform: scale(0.8); }
    50%      { opacity: 1;    transform: scale(1.2); box-shadow: 0 0 9px currentColor; }
}

.slot-window
{
    position: relative;
    z-index: 2;
    background: #0d1218;
    border-radius: 10px;
    padding: 16px;
    box-shadow: inset 0 0 0 2px #67BAEA, inset 0 0 32px rgba(103,186,234,0.1);
    min-height: 360px;
}
.slot-window.is-hit
{
    box-shadow: inset 0 0 0 2px #00C070, inset 0 0 44px rgba(0,192,112,0.2);
}

/* ── Reels (desktop: columns, vertical spin) ─────────────── */
.slot-reels
{
    display: grid;
    gap: 10px;
    height: 168px;
    overflow: hidden;
    margin-bottom: 14px;
    overflow-anchor: none;
}
.slot-reels[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.slot-reels[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.slot-reels[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
.slot-reels[data-count="5"] { grid-template-columns: repeat(5, 1fr); }
.slot-reels[data-count="6"] { grid-template-columns: repeat(6, 1fr); }
.slot-reels[data-count="7"] { grid-template-columns: repeat(7, 1fr); }
.slot-reels[data-count="8"] { grid-template-columns: repeat(8, 1fr); }
.slot-reels[data-count="5"],
.slot-reels[data-count="6"],
.slot-reels[data-count="7"],
.slot-reels[data-count="8"] { gap: 6px; }
.slot-reels[data-count="5"] .slot-symbol,
.slot-reels[data-count="6"] .slot-symbol,
.slot-reels[data-count="7"] .slot-symbol,
.slot-reels[data-count="8"] .slot-symbol
{
    font-size: clamp(0.55rem, 1vw, 0.82rem);
    padding: 0 3px;
}
.slot-symbol.is-long
{
    font-size: clamp(0.42rem, 0.85vw, 0.68rem);
    line-height: 1.05;
    padding: 0 2px;
}

.slot-reel
{
    background: #111820;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.slot-reel::before
{
    content: "";
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    height: 56px;
    background: rgba(255, 213, 106, 0.07);
    border-top: 1px solid rgba(255, 213, 106, 0.32);
    border-bottom: 1px solid rgba(255, 213, 106, 0.32);
    pointer-events: none;
    z-index: 1;
}
.slot-reel::after
{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(0,0,0,0.65) 0%,
        rgba(0,0,0,0) 34%,
        rgba(0,0,0,0) 66%,
        rgba(0,0,0,0.65) 100%
    );
    pointer-events: none;
    z-index: 2;
}
.slot-strip
{
    display: flex;
    flex-direction: column;
}
.slot-symbol
{
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    color: rgba(255,255,255,0.38);
    font-size: clamp(0.75rem, 1.7vw, 1.05rem);
    padding: 0 6px;
    text-align: center;
    line-height: 1.1;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.slot-symbol.is-win
{
    color: #fff;
    text-shadow: 0 0 16px rgba(255, 213, 106, 0.75);
}
.slot-strip.is-spinning .slot-symbol { color: rgba(255,255,255,0.55); }
.slot-strip.is-spinning
{
    animation: reelSpin 0.38s linear infinite;
}
@keyframes reelSpin
{
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

.slot-payline-zone
{
    position: absolute;
    top: 72px;
    left: 14px;
    right: 14px;
    height: 56px;
    border: 1.5px solid rgba(255, 213, 106, 0.42);
    border-radius: 4px;
    pointer-events: none;
    z-index: 3;
}
.slot-payline-zone::before,
.slot-payline-zone::after
{
    content: "▶";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: rgba(255, 213, 106, 0.65);
    line-height: 1;
}
.slot-payline-zone::before { left: -14px; }
.slot-payline-zone::after  { right: -14px; transform: translateY(-50%) scaleX(-1); }

.slot-winner { text-align: center; padding: 4px 8px 0; }
.slot-winner-kicker
{
    color: #85C8EE;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.72rem;
    margin-bottom: 6px;
}
.slot-winner-name
{
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: clamp(1.3rem, 2.8vw, 2.1rem);
    line-height: 1.3;
    min-height: 2.6em;
    text-shadow: 0 0 18px rgba(0,192,112,0.4);
    margin-bottom: 10px;
    word-break: break-word;
}
.slot-winner.is-hit .slot-winner-name
{
    animation: winnerPop 0.45s cubic-bezier(0.2, 1.4, 0.3, 1);
}
@keyframes winnerPop
{
    0%   { transform: scale(0.72); opacity: 0; }
    100% { transform: scale(1);    opacity: 1; }
}

/* ── Lever (desktop) - flush to top of bezel, no side gap ── */
.slot-lever-panel
{
    position: relative;
    width: 110px;
    min-width: 110px;
    flex-shrink: 0;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
}
.lever-mech
{
    position: relative;
    width: 110px;
    height: 148px;
    flex-shrink: 0;
}
.lever-wall
{
    position: absolute;
    left: 0;
    top: 22px;
    width: 18px;
    height: 100px;
    background: linear-gradient(90deg, #2e3a4a 0%, #4b5668 40%, #8a9ab0 65%, #4b5668 100%);
    border-radius: 0 6px 6px 0;
    box-shadow: 4px 0 10px rgba(0,0,0,0.5), inset -2px 0 4px rgba(0,0,0,0.3);
}
.lever-pivot
{
    position: absolute;
    left: 8px;
    top: 64px;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 36% 34%, #eaf0f8, #8a96a8 55%, #3a4455);
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0,0,0,0.55), inset 0 1px 3px rgba(255,255,255,0.45);
    z-index: 3;
}
.slot-lever
{
    position: absolute;
    left: 18px;
    top: 68px;
    width: 80px;
    height: 12px;
    background: linear-gradient(0deg, #5a6575 0%, #c8d4e2 28%, #edf2f8 50%, #a0acba 72%, #4e5a6a 100%);
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.35);
    border: 0;
    padding: 0;
    cursor: pointer;
    transform-origin: 0% 50%;
    transform: rotate(-25deg);
    transition: transform 0.38s cubic-bezier(0.22, 0.82, 0.28, 1.1);
    z-index: 2;
}
.slot-lever:focus-visible { outline: 2px solid #67BAEA; outline-offset: 6px; }
.slot-lever.is-pulled { transform: rotate(58deg); }
.slot-lever-knob
{
    display: block;
    position: absolute;
    left: 100%;
    margin-left: -20px;
    top: 50%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle at 33% 28%, #ffaaaa, #c0392b 52%, #6b1812);
    border-radius: 50%;
    box-shadow:
        inset -5px -6px 8px rgba(0,0,0,0.4),
        inset  5px  5px 6px rgba(255,255,255,0.3),
        0 8px 16px rgba(0,0,0,0.5);
}
.lever-plaque
{
    position: relative;
    width: 100px;
    margin: 6px 0 0;
    padding: 7px 4px;
    background: linear-gradient(#3a4454, #1e2838);
    border: 1px solid rgba(103,186,234,0.55);
    border-radius: 6px;
    color: #ffd56a;
    font-family: "Bungee", "Montserrat", sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    line-height: 1.3;
    text-align: center;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    cursor: pointer;
    flex-shrink: 0;
}
.lever-plaque:hover
{
    border-color: #67BAEA;
    color: #fff;
}
.lever-plaque:focus-visible
{
    outline: 2px solid #67BAEA;
    outline-offset: 3px;
}

/* ── LIGHT THEME (Jackpot) - higher contrast on the screen ─ */
body.pg-light .slot-cabinet
{
    background: linear-gradient(180deg, #f0f4f8 0%, #dde6f0 55%, #c8d6e6 100%);
    border-color: #2a9d8f;
    box-shadow: 0 0 0 6px #9eb0c2, 0 22px 48px rgba(0,60,94,0.14);
}
body.pg-light .slot-marquee
{
    background: #007a46;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}
body.pg-light .slot-bezel
{
    background: #b8c6d6;
}
body.pg-light .slot-window
{
    background: #1a2433;
    box-shadow: inset 0 0 0 2px #003C5E, inset 0 0 28px rgba(0,0,0,0.35);
}
body.pg-light .slot-window.is-hit
{
    box-shadow: inset 0 0 0 2px #00C070, inset 0 0 36px rgba(0,192,112,0.25);
}
body.pg-light .slot-reel
{
    background: #0f1620;
}
body.pg-light .slot-symbol
{
    color: rgba(255,255,255,0.42);
    border-bottom-color: rgba(255,255,255,0.08);
}
body.pg-light .slot-symbol.is-win
{
    color: #fff;
    text-shadow: 0 0 14px rgba(255, 213, 106, 0.7);
}
body.pg-light .slot-strip.is-spinning .slot-symbol
{
    color: rgba(255,255,255,0.65);
}
body.pg-light .slot-reel::before
{
    background: rgba(255, 213, 106, 0.12);
    border-top-color: rgba(255, 213, 106, 0.45);
    border-bottom-color: rgba(255, 213, 106, 0.45);
}
body.pg-light .slot-reel::after
{
    background: linear-gradient(
        rgba(0,0,0,0.7) 0%,
        rgba(0,0,0,0) 34%,
        rgba(0,0,0,0) 66%,
        rgba(0,0,0,0.7) 100%
    );
}
body.pg-light .slot-payline-zone
{
    border-color: rgba(255, 213, 106, 0.55);
}
body.pg-light .slot-winner-kicker { color: #85C8EE; }
body.pg-light .slot-winner-name
{
    color: #fff;
    text-shadow: 0 0 16px rgba(0,192,112,0.45);
}
body.pg-light .slot-bulb
{
    background: #6a7a8c;
}
body.pg-light .lever-plaque
{
    background: linear-gradient(#3a4454, #1e2838);
    color: #ffd56a;
    border-color: rgba(103,186,234,0.55);
}
body.pg-light .lever-wall
{
    background: linear-gradient(90deg, #4a5568 0%, #7a8899 40%, #b0bcc8 65%, #7a8899 100%);
}

/*
 * MOBILE - swap at 768px
 * Reels become stacked horizontal rows (L↔R spin).
 * Symbol widths are set in JS to 1/3 of each reel so the payline stays centered.
 * Only .lever-mech rotates; plaque stays upright below.
 */
@media (max-width: 768px)
{
    .slot-sign-bulb
    {
        width: 6px;
        height: 6px;
        margin: -3px 0 0 -3px;
    }
    .slot-sign-panel
    {
        padding: 18px 26px 16px;
    }

    .slot-machine-body
    {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .slot-bezel { width: 100%; }

    .slot-reels
    {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 8px;
        grid-template-columns: none !important;
        overflow-anchor: none;
    }
    .slot-reel
    {
        height: 56px;
        width: 100%;
        overflow: hidden;
    }
    .slot-reel::before
    {
        top: 0;
        left: 33.333%;
        right: auto;
        width: 33.333%;
        height: 100%;
        border-top: 0;
        border-bottom: 0;
        border-left: 1px solid rgba(255, 213, 106, 0.32);
        border-right: 1px solid rgba(255, 213, 106, 0.32);
    }
    .slot-reel::after
    {
        background: linear-gradient(
            90deg,
            rgba(0,0,0,0.65) 0%,
            rgba(0,0,0,0) 34%,
            rgba(0,0,0,0) 66%,
            rgba(0,0,0,0.65) 100%
        );
    }
    body.pg-light .slot-reel::after
    {
        background: linear-gradient(
            90deg,
            rgba(0,0,0,0.7) 0%,
            rgba(0,0,0,0) 34%,
            rgba(0,0,0,0) 66%,
            rgba(0,0,0,0.7) 100%
        );
    }
    .slot-strip
    {
        flex-direction: row;
        width: max-content;
        height: 100%;
    }
    .slot-symbol
    {
        flex: 0 0 auto;
        width: 120px;
        min-width: 0;
        max-width: none;
        height: 56px;
        border-bottom: 0;
        border-right: 1px solid rgba(255,255,255,0.05);
        font-size: clamp(0.7rem, 3.2vw, 0.95rem);
        box-sizing: border-box;
    }
    .slot-strip.is-spinning
    {
        animation-name: reelSpinH;
    }
    @keyframes reelSpinH
    {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }

    .slot-payline-zone { display: none; }
    .slot-window { min-height: 0; }

    .slot-lever-panel
    {
        width: 100%;
        min-width: 0;
        min-height: 0;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        margin: 0;
        padding: 0;
        transform: none;
    }
    .lever-mech
    {
        /* Optical center: rotated parts sit right of the layout box */
        width: 110px;
        height: 110px;
        margin: 0px auto;
        position: relative;
        left: 17px;
        transform: rotate(90deg);
        transform-origin: center center;
        flex-shrink: 0;
    }
    .lever-plaque
    {
        position: relative;
        left: auto;
        top: auto;
        width: min(180px, 55%);
        max-width: 200px;
        margin: 8px auto 0;
        transform: none;
        align-self: center;
    }
}