/* ═══════════════════════════════════════════
   Super Inning — Game Styles v3 (PixiJS)
   ═══════════════════════════════════════════ */

:root {
    --bg-primary: #0a0e1a;
    --bg-secondary: #111827;
    --accent-gold: #fbbf24;
    --accent-blue: #3b82f6;
    --accent-pink: #ec4899;
    --accent-green: #10b981;
    --accent-red: #ef4444;
    --accent-purple: #8b5cf6;
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --glow-gold: 0 0 20px rgba(251, 191, 36, 0.6);
    --glow-blue: 0 0 20px rgba(59, 130, 246, 0.6);
    --glow-pink: 0 0 20px rgba(236, 72, 153, 0.6);
    --font-main: 'Outfit', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    padding: 0;
}

/* ── Game Container ── */
#game-container {
    position: relative;
    width: 100vw;
    height: var(--app-height, 100vh); /* JS sets --app-height for bullet-proof mobile */
    height: 100dvh; /* iOS-safe dynamic viewport height (overrides if supported) */
    max-width: 430px;
    margin: 0 auto;
    overflow: hidden;
}

.hidden {
    display: none !important;
}

/* ── Splash Screen ── */
.splash-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #06132c;
    background-image: radial-gradient(ellipse at 50% 38%, #0a1e40 0%, #081832 35%, #06132c 65%, #040e20 100%);
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.splash-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 10%, rgba(100, 120, 200, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 10%, rgba(100, 120, 200, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 90%, rgba(40, 60, 120, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.splash-screen.splash-fadeout {
    opacity: 0;
    visibility: hidden;
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    z-index: 1;
}

.splash-logo {
    width: min(90vw, 420px);
    height: auto;
    mix-blend-mode: screen;
    animation: splash-float 3s ease-in-out infinite;
    filter: drop-shadow(0 0 40px rgba(139, 92, 246, 0.45))
            drop-shadow(0 0 80px rgba(251, 191, 36, 0.2));
    /* Tight radial mask — center opaque, edges fully transparent */
    -webkit-mask-image: radial-gradient(ellipse 60% 52% at 50% 50%, black 35%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 52% at 50% 50%, black 35%, transparent 75%);
}

@keyframes splash-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.splash-loading {
    font-family: 'Orbitron', monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 6px;
    color: rgba(251, 191, 36, 0.7);
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
    animation: splash-text-pulse 2s ease-in-out infinite;
}

@keyframes splash-text-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.splash-dots .dot {
    animation: splash-dot-bounce 1.4s ease-in-out infinite;
    display: inline-block;
}

.splash-dots .dot:nth-child(1) { animation-delay: 0s; }
.splash-dots .dot:nth-child(2) { animation-delay: 0.2s; }
.splash-dots .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes splash-dot-bounce {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-4px); }
}

/* ── HUD — Scoreboard Style ── */
.hud {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 0;
    z-index: 10;
    display: flex;
    justify-content: center;
}

/* Metallic Frame */
.scoreboard-frame {
    position: relative;
    width: 100%;
    background: linear-gradient(180deg, #3a3d4a 0%, #25272f 40%, #1a1c22 100%);
    border: 2px solid #4a4d58;
    border-radius: 10px;
    padding: 6px;
    box-shadow:
        0 4px 20px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.3);
}

/* Corner Rivets */
.scoreboard-rivet {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #6b6e7a, #3a3d4a);
    border: 1px solid #555;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), 0 1px 2px rgba(0,0,0,0.4);
    z-index: 2;
}
.rivet-tl { top: 5px; left: 5px; }
.rivet-tr { top: 5px; right: 5px; }
.rivet-bl { bottom: 5px; left: 5px; }
.rivet-br { bottom: 5px; right: 5px; }

/* Inner layout */
.scoreboard-inner {
    display: flex;
    gap: 6px;
}

.scoreboard-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scoreboard-right {
    display: flex;
    align-items: stretch;
}

/* Dark panels */
.scoreboard-panel {
    background: #0c0e14;
    border: 1px solid #2a2d36;
    border-radius: 6px;
    padding: 6px 12px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.panel-label {
    font-family: var(--font-main);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #5a5e6a;
    text-transform: uppercase;
}

/* LED Digits */
.led-digits {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

.led-gold {
    color: #fbbf24;
    text-shadow:
        0 0 6px rgba(251, 191, 36, 0.7),
        0 0 14px rgba(251, 191, 36, 0.35),
        0 0 28px rgba(251, 191, 36, 0.15);
}

.led-pink {
    color: #ff5ca8;
    text-shadow:
        0 0 6px rgba(255, 92, 168, 0.7),
        0 0 14px rgba(255, 92, 168, 0.35),
        0 0 28px rgba(255, 92, 168, 0.15);
}

/* Balance row */
.led-balance-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.coin-icon-svg {
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(251,191,36,0.6));
    animation: coin-pulse 2s ease-in-out infinite;
}

@keyframes coin-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(251,191,36,0.4)); }
    50% { filter: drop-shadow(0 0 10px rgba(251,191,36,0.8)); }
}

/* Jackpot panel */
.panel-jackpot {
    min-width: 120px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-color: rgba(236, 72, 153, 0.25);
    box-shadow:
        inset 0 2px 8px rgba(0,0,0,0.6),
        inset 0 0 20px rgba(236, 72, 153, 0.06);
    animation: jackpot-panel-pulse 2.5s ease-in-out infinite;
}

.jackpot-label {
    font-family: var(--font-main);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--accent-pink);
    text-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}

#jackpot-amount {
    font-size: 22px;
    font-weight: 900;
}

@keyframes jackpot-panel-pulse {
    0%, 100% { box-shadow: inset 0 2px 8px rgba(0,0,0,0.6), inset 0 0 15px rgba(236, 72, 153, 0.05); }
    50% { box-shadow: inset 0 2px 8px rgba(0,0,0,0.6), inset 0 0 25px rgba(236, 72, 153, 0.12); }
}

/* Controls Row */
.scoreboard-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 2px;
}

.btn-sound-toggle {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #16181f;
    border: 1px solid #2a2d36;
    border-radius: 5px;
    color: #8a8e9a;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.btn-sound-toggle:hover {
    background: #1e2028;
    border-color: #3a3d48;
    color: #c0c4d0;
}

.btn-sound-toggle:active {
    transform: scale(0.92);
}

.btn-sound-toggle.muted {
    opacity: 0.3;
}

.controls-divider {
    width: 1px;
    height: 16px;
    background: #2a2d36;
    margin: 0 2px;
}

/* Ranking Button (scoreboard style) */
.btn-scoreboard-ranking {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-family: 'Orbitron', monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #a0e8ff;
    background: #0c0e14;
    border: 1px solid #2a2d36;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 0 6px rgba(59, 130, 246, 0.3);
}

.btn-scoreboard-ranking svg {
    stroke: #a0e8ff;
    flex-shrink: 0;
    filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.3));
}

.btn-scoreboard-ranking:hover {
    background: #12141c;
    border-color: rgba(59, 130, 246, 0.3);
    color: #c0f0ff;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.15);
}

.btn-scoreboard-ranking:active {
    transform: scale(0.95);
}

/* ── Batting Buttons — Compact Strip ── */
.batting-buttons {
    position: absolute;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    padding: 0 12px;
    z-index: 10;
}

/* Metallic strip frame */
.batting-strip-frame {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    background: linear-gradient(180deg, #3a3d4a 0%, #25272f 40%, #1a1c22 100%);
    border: 2px solid #4a4d58;
    border-radius: 14px 14px 24px 24px;
    padding: 6px;
    box-shadow:
        0 4px 20px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.3);
    transform: perspective(600px) rotateX(2deg);
    transform-origin: center top;
}

/* Strip rivets */
.strip-rivet {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #6b6e7a, #3a3d4a);
    border: 1px solid #555;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), 0 1px 2px rgba(0,0,0,0.4);
    z-index: 2;
}
.strip-rivet-tl { top: 4px; left: 4px; }
.strip-rivet-tr { top: 4px; right: 4px; }
.strip-rivet-bl { bottom: 4px; left: 4px; }
.strip-rivet-br { bottom: 4px; right: 4px; }

/* Metallic dividers */
.strip-divider {
    width: 2px;
    align-self: stretch;
    background: linear-gradient(180deg, #4a4d58, #2a2d36, #4a4d58);
    border-radius: 1px;
    flex-shrink: 0;
}

/* Button segments */
.btn-swing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    padding: 14px 8px 10px;
    background: #0c0e14;
    border: 1px solid #1e2028;
    border-radius: 7px;
    cursor: pointer;
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
}

.btn-swing .btn-text {
    min-height: auto;
    display: block;
    line-height: 1;
    white-space: nowrap;
}

.btn-swing::before {
    display: none;
}

.btn-swing:active {
    transform: scale(0.97);
    filter: brightness(1.2);
}

.btn-swing .btn-icon-svg {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 0 5px currentColor);
    transition: filter 0.2s ease;
    flex-shrink: 0;
}

.btn-swing:hover .btn-icon-svg {
    filter: drop-shadow(0 0 8px currentColor);
}

/* Color variants — LED glow */
.btn-slow {
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.15);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), inset 0 0 12px rgba(59, 130, 246, 0.06);
}
.btn-slow:hover {
    background: #0e1018;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), inset 0 0 20px rgba(59, 130, 246, 0.12);
}

.btn-hit {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.15);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), inset 0 0 12px rgba(251, 191, 36, 0.06);
}
.btn-hit:hover {
    background: #0e1018;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), inset 0 0 20px rgba(251, 191, 36, 0.12);
}

.btn-power {
    color: #f472b6;
    border-color: rgba(236, 72, 153, 0.15);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), inset 0 0 12px rgba(236, 72, 153, 0.06);
}
.btn-power:hover {
    background: #0e1018;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), inset 0 0 20px rgba(236, 72, 153, 0.12);
}

/* LED text glow */
.btn-slow .btn-text {
    text-shadow: 0 0 6px rgba(96, 165, 250, 0.6);
}
.btn-hit .btn-text {
    text-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
}
.btn-power .btn-text {
    text-shadow: 0 0 6px rgba(244, 114, 182, 0.6);
}

/* ── Button Cost Badge (LED style) ── */
.btn-cost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #6b7280;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-top: 0;
    font-variant-numeric: tabular-nums;
    text-shadow: none;
    box-shadow: none;
    position: relative;
}

.btn-cost::before {
    content: '$';
    font-size: 8px;
    font-weight: 500;
    opacity: 0.6;
}

/* ── Result Overlay ── */
.result-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.result-text {
    font-size: 48px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    animation: result-pop-3d 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes result-pop-3d {
    0% {
        transform: scale(0) translateY(30px) perspective(500px) rotateX(25deg);
        opacity: 0;
    }
    55% {
        transform: scale(1.15) translateY(-5px) perspective(500px) rotateX(-4deg);
        opacity: 1;
    }
    75% {
        transform: scale(0.96) translateY(2px) perspective(500px) rotateX(2deg);
    }
    100% {
        transform: scale(1) translateY(0) perspective(500px) rotateX(0deg);
        opacity: 1;
    }
}

/* Hit type result colors — 3D layered shadows */
.result-text.hit {
    color: #34d399;
    text-shadow:
        0 -1px 0 #6ee7b7,
        1px 1px 0 #059669,
        2px 2px 0 #047857,
        3px 3px 0 #065f46,
        4px 4px 8px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(16, 185, 129, 0.5);
}

.result-text.foul {
    color: #fbbf24;
    text-shadow:
        0 -1px 0 #fde68a,
        1px 1px 0 #d97706,
        2px 2px 0 #b45309,
        3px 3px 6px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(251, 191, 36, 0.4);
}

.result-text.out {
    color: #f87171;
    text-shadow:
        0 -1px 0 #fca5a5,
        1px 1px 0 #dc2626,
        2px 2px 0 #b91c1c,
        3px 3px 0 #991b1b,
        4px 4px 0 #7f1d1d,
        5px 5px 10px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(239, 68, 68, 0.5);
    animation: result-pop-3d 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), out-shake 0.5s 0.3s ease-in-out;
}

@keyframes out-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

.result-text.resumed {
    color: var(--accent-blue);
    text-shadow:
        0 -1px 0 #93c5fd,
        1px 1px 0 #2563eb,
        2px 2px 0 #1d4ed8,
        3px 3px 6px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(59, 130, 246, 0.4);
}

.result-text.game {
    color: #f87171;
    text-shadow:
        0 -1px 0 #fca5a5,
        1px 1px 0 #dc2626,
        2px 2px 0 #b91c1c,
        3px 3px 0 #991b1b,
        4px 4px 8px rgba(0, 0, 0, 0.5),
        0 0 25px rgba(239, 68, 68, 0.5);
}

.result-text.single {
    color: #60a5fa;
    text-shadow:
        0 -1px 0 #93c5fd,
        1px 1px 0 #2563eb,
        2px 2px 0 #1d4ed8,
        3px 3px 0 #1e40af,
        4px 4px 8px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(59, 130, 246, 0.5);
}

.result-text.double {
    color: #34d399;
    text-shadow:
        0 -1px 0 #6ee7b7,
        1px 1px 0 #059669,
        2px 2px 0 #047857,
        3px 3px 0 #065f46,
        4px 4px 8px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(16, 185, 129, 0.5);
    animation: result-pop-3d 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), result-glow-pulse 1.5s 0.5s ease-in-out 2;
}

@keyframes result-glow-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

.result-text.triple {
    color: #a78bfa;
    text-shadow:
        0 -1px 0 #c4b5fd,
        1px 1px 0 #7c3aed,
        2px 2px 0 #6d28d9,
        3px 3px 0 #5b21b6,
        4px 4px 0 #4c1d95,
        5px 5px 10px rgba(0, 0, 0, 0.5),
        0 0 35px rgba(139, 92, 246, 0.6);
    animation: result-pop-3d 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), result-glow-pulse 1.2s 0.4s ease-in-out 2;
}

.result-text.home_run {
    font-size: 50px;
    background: linear-gradient(180deg, #ff6b6b 0%, #dc2626 50%, #991b1b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(2px 2px 0 #7f1d1d) drop-shadow(3px 3px 0 #6b1a1a) drop-shadow(4px 4px 6px rgba(0,0,0,0.6)) drop-shadow(0 0 25px rgba(239,68,68,0.6));
    animation: result-pop-3d 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), homerun-glow 1.2s 0.4s ease-in-out infinite;
}

@keyframes homerun-glow {
    0%, 100% { filter: drop-shadow(2px 2px 0 #7f1d1d) drop-shadow(3px 3px 0 #6b1a1a) drop-shadow(4px 4px 6px rgba(0,0,0,0.6)) drop-shadow(0 0 25px rgba(239,68,68,0.5)); }
    50% { filter: drop-shadow(2px 2px 0 #7f1d1d) drop-shadow(3px 3px 0 #6b1a1a) drop-shadow(4px 4px 6px rgba(0,0,0,0.6)) drop-shadow(0 0 50px rgba(239,68,68,0.9)) drop-shadow(0 0 80px rgba(251,191,36,0.4)); }
}

.result-text.grand_slam {
    font-size: 44px;
    background: linear-gradient(180deg, #fde68a 0%, #fbbf24 35%, #f59e0b 65%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-text-stroke: 1px rgba(120, 53, 0, 0.3);
    filter: drop-shadow(2px 2px 0 #b45309) drop-shadow(3px 3px 0 #92400e) drop-shadow(4px 4px 0 #78350f) drop-shadow(5px 5px 0 #653208) drop-shadow(6px 6px 8px rgba(0,0,0,0.6)) drop-shadow(0 0 30px rgba(251,191,36,0.7));
    animation: result-pop-3d 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), grand-slam-glow 1s 0.4s ease-in-out infinite;
}

@keyframes grand-slam-glow {
    0%, 100% {
        filter: drop-shadow(2px 2px 0 #b45309) drop-shadow(3px 3px 0 #92400e) drop-shadow(4px 4px 0 #78350f) drop-shadow(5px 5px 0 #653208) drop-shadow(6px 6px 8px rgba(0,0,0,0.6)) drop-shadow(0 0 30px rgba(251,191,36,0.5));
    }
    50% {
        filter: drop-shadow(2px 2px 0 #b45309) drop-shadow(3px 3px 0 #92400e) drop-shadow(4px 4px 0 #78350f) drop-shadow(5px 5px 0 #653208) drop-shadow(6px 6px 8px rgba(0,0,0,0.6)) drop-shadow(0 0 60px rgba(251,191,36,1)) drop-shadow(0 0 90px rgba(236,72,153,0.5));
    }
}

.result-reward {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent-gold);
    margin-top: 12px;
    text-shadow: 0 0 15px rgba(251,191,36,0.5);
}

/* ── Enter Super Inning Button ── */
.btn-enter-si {
    margin-top: 24px;
    padding: 18px 36px;
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 3px;
    color: #000;
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(251,191,36,0.6), 0 0 60px rgba(251,191,36,0.3);
    transition: all 0.2s ease;
    animation: btn-si-pulse 1.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.btn-enter-si::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255,255,255,0.3) 50%,
        transparent 70%
    );
    animation: btn-si-shine 2s ease-in-out infinite;
}

@keyframes btn-si-pulse {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(251,191,36,0.5), 0 0 40px rgba(251,191,36,0.2);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 40px rgba(251,191,36,0.8), 0 0 80px rgba(251,191,36,0.4);
        transform: scale(1.05);
    }
}

@keyframes btn-si-shine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

.btn-enter-si:hover {
    transform: scale(1.08);
    box-shadow: 0 0 50px rgba(251,191,36,0.9), 0 0 100px rgba(251,191,36,0.5);
}

.btn-enter-si:active {
    transform: scale(0.98);
}

/* ── Roulette (arcade style) ── */
.roulette-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    background: radial-gradient(ellipse at center, rgba(10, 14, 26, 0.95) 0%, rgba(0, 0, 0, 0.98) 100%);
}

#roulette-canvas {
    border-radius: 12px;
}

/* ── Super Inning HUD ── */
.super-inning-hud {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.si-title {
    font-size: 24px;
    font-weight: 900;
    color: var(--accent-gold);
    text-shadow: 0 0 20px rgba(251,191,36,0.8);
    letter-spacing: 3px;
    animation: si-glow 1.5s ease-in-out infinite;
}

@keyframes si-glow {
    0%, 100% { text-shadow: 0 0 20px rgba(251,191,36,0.5); }
    50% { text-shadow: 0 0 40px rgba(251,191,36,1), 0 0 60px rgba(251,191,36,0.5); }
}

.si-info {
    display: flex;
    gap: 24px;
    font-size: 16px;
    font-weight: 600;
}

.si-outs { color: var(--accent-red); }
.si-reward { color: var(--accent-gold); }

.si-free {
    background: var(--accent-green);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 20px;
    letter-spacing: 2px;
}

/* ── Jackpot Overlay ── */
.jackpot-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    z-index: 30;
    background: radial-gradient(ellipse at center, rgba(251,191,36,0.2) 0%, rgba(0,0,0,0.9) 70%);
    animation: jackpot-bg 0.5s ease-out;
}

@keyframes jackpot-bg {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.jackpot-title {
    font-size: 42px;
    font-weight: 900;
    color: var(--accent-gold);
    text-shadow: 0 0 40px rgba(251,191,36,0.8), 0 4px 20px rgba(0,0,0,0.5);
    animation: jackpot-title-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes jackpot-title-bounce {
    0% { transform: scale(0) rotate(-10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.jackpot-amount {
    font-size: 56px;
    font-weight: 900;
    color: var(--text-primary);
    text-shadow: 0 0 30px rgba(251,191,36,0.6);
}

.btn-collect {
    padding: 16px 48px;
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #000;
    background: linear-gradient(135deg, var(--accent-gold), #f59e0b);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(251,191,36,0.5);
    transition: all 0.2s ease;
}

.btn-collect:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(251,191,36,0.8);
}

.btn-collect:active {
    transform: scale(0.98);
}

/* ── Particles (coin shower) ── */
.coin-particle {
    position: absolute;
    font-size: 24px;
    pointer-events: none;
    z-index: 25;
    animation: coin-fall linear forwards;
}

@keyframes coin-fall {
    0% { opacity: 1; transform: translateY(0) rotate(0deg); }
    100% { opacity: 0; transform: translateY(100vh) rotate(720deg); }
}

/* ── Balance Change Animations ── */

/* Balance increase glow pulse */
.balance-increase .led-digits {
    animation: balance-increase-pulse 0.6s ease-out !important;
}

@keyframes balance-increase-pulse {
    0% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 0 transparent); }
    20% { transform: scale(1.3) translateY(-6px); filter: drop-shadow(0 0 14px rgba(34, 197, 94, 0.9)); color: #22c55e; }
    40% { transform: scale(1.05) translateY(2px); filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.6)); color: #4ade80; }
    55% { transform: scale(1.15) translateY(-3px); filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.5)); }
    70% { transform: scale(1.02) translateY(1px); filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.3)); }
    100% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 0 transparent); }
}

/* Balance decrease shake */
.balance-decrease .led-digits {
    animation: balance-decrease-shake 0.5s ease-out !important;
}

@keyframes balance-decrease-shake {
    0% { transform: translateX(0); filter: drop-shadow(0 0 0 transparent); }
    15% { transform: translateX(-4px); filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.8)); color: #ef4444; }
    30% { transform: translateX(4px); filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.8)); color: #ef4444; }
    45% { transform: translateX(-3px); filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.5)); }
    60% { transform: translateX(2px); filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.3)); }
    100% { transform: translateX(0); filter: drop-shadow(0 0 0 transparent); }
}

/* Floating delta text (+/- amount) */
.balance-delta {
    position: absolute;
    pointer-events: none;
    z-index: 50;
    font-family: var(--font-main);
    font-weight: 900;
    letter-spacing: 1px;
    white-space: nowrap;
    animation: balance-float-up 1.4s ease-out forwards;
}

.balance-delta.increase {
    font-size: 18px;
    color: #22c55e;
    text-shadow:
        0 0 8px rgba(34, 197, 94, 0.6),
        0 0 20px rgba(34, 197, 94, 0.3),
        1px 1px 2px rgba(0, 0, 0, 0.5);
}

.balance-delta.decrease {
    font-size: 16px;
    color: #ef4444;
    text-shadow:
        0 0 8px rgba(239, 68, 68, 0.6),
        0 0 20px rgba(239, 68, 68, 0.3),
        1px 1px 2px rgba(0, 0, 0, 0.5);
}

.balance-delta.large {
    font-size: 24px;
}

@keyframes balance-float-up {
    0% {
        opacity: 1;
        transform: translateY(0) scale(0.8);
    }
    20% {
        opacity: 1;
        transform: translateY(-8px) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
}

/* ═══ Auto-Play Toggle (Integrated in Strip) ═══ */

/* Horizontal divider inside strip frame */
.strip-divider-h {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #2a2d36, #4a4d58, #2a2d36);
    border-radius: 1px;
    flex-shrink: 0;
    margin: 4px 0 2px;
}

/* Ensure batting-strip-frame wraps vertically */
.batting-strip-frame {
    flex-wrap: wrap;
}

.btn-autoplay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    font-family: 'Orbitron', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #6b7280;
    background: linear-gradient(180deg, #16181e 0%, #0e1014 100%);
    border: 1px solid #1e2028;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
}

/* Subtle shimmer line on hover */
.btn-autoplay::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.04) 50%,
        transparent 100%
    );
    transition: left 0.5s ease;
}

.btn-autoplay:hover::after {
    left: 100%;
}

.btn-autoplay .autoplay-icon {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.btn-autoplay .autoplay-label {
    line-height: 1;
}

.btn-autoplay:hover {
    color: #9ca3af;
    border-color: #2a2d38;
    background: linear-gradient(180deg, #1c1e26 0%, #14161c 100%);
}

.btn-autoplay:active {
    transform: scale(0.97);
    filter: brightness(1.1);
}

/* Active state — pulsing green, fills the strip */
.btn-autoplay.active {
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.35);
    background: linear-gradient(180deg, #0a1a12 0%, #081410 100%);
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.4),
        inset 0 0 20px rgba(16, 185, 129, 0.08),
        0 0 14px rgba(16, 185, 129, 0.2);
    text-shadow: 0 0 10px rgba(52, 211, 153, 0.6);
    animation: autoplay-active-pulse 2s ease-in-out infinite;
}

.btn-autoplay.active .autoplay-icon {
    filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.7));
    animation: autoplay-icon-spin 0.8s ease-in-out;
}

.btn-autoplay.active .autoplay-label {
    filter: drop-shadow(0 0 4px rgba(52, 211, 153, 0.4));
}

@keyframes autoplay-icon-spin {
    0% { transform: scale(0.6); opacity: 0.5; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes autoplay-active-pulse {
    0%, 100% {
        box-shadow:
            inset 0 2px 6px rgba(0,0,0,0.4),
            inset 0 0 15px rgba(16, 185, 129, 0.06),
            0 0 10px rgba(16, 185, 129, 0.15);
        border-color: rgba(16, 185, 129, 0.3);
    }
    50% {
        box-shadow:
            inset 0 2px 6px rgba(0,0,0,0.4),
            inset 0 0 25px rgba(16, 185, 129, 0.12),
            0 0 22px rgba(16, 185, 129, 0.35);
        border-color: rgba(16, 185, 129, 0.5);
    }
}

/* When auto is active, tint the whole strip frame green */
.batting-strip-frame:has(.btn-autoplay.active) {
    border-color: rgba(16, 185, 129, 0.25);
    box-shadow:
        0 4px 20px rgba(0,0,0,0.6),
        0 0 20px rgba(16, 185, 129, 0.1),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.3);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.batting-strip-frame:has(.btn-autoplay.active) .strip-divider-h {
    background: linear-gradient(90deg, #1a2d24, rgba(16, 185, 129, 0.4), #1a2d24);
}

/* ═══ Auto-Play Swing Type Selector ═══ */
.autoplay-selector {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: modal-fade-in 0.25s ease-out;
}

.autoplay-selector-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 32px 24px 24px;
    max-width: 340px;
    width: 90%;
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.95), rgba(15, 15, 30, 0.98));
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 24px;
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.1), 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: modal-card-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.autoplay-selector-title {
    font-family: 'Orbitron', monospace;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #34d399;
    text-shadow: 0 0 15px rgba(52, 211, 153, 0.5);
    text-align: center;
}

.autoplay-selector-subtitle {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    text-align: center;
    margin-top: -10px;
    letter-spacing: 1px;
}

.autoplay-selector-options {
    display: flex;
    gap: 10px;
    width: 100%;
}

.autoplay-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    padding: 18px 8px 14px;
    background: #0c0e14;
    border: 2px solid #1e2028;
    border-radius: 14px;
    cursor: pointer;
    font-family: 'Orbitron', monospace;
    transition: all 0.2s ease;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

.autoplay-option .opt-icon {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 0 4px currentColor);
    transition: filter 0.2s ease;
}

.autoplay-option .opt-label {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.5px;
}

.autoplay-option .opt-cost {
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.5px;
}

/* Slow variant */
.autoplay-option.opt-slow {
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.15);
}
.autoplay-option.opt-slow:hover {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(59, 130, 246, 0.2);
    background: #0e1018;
}
.autoplay-option.opt-slow:active {
    transform: scale(0.95);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 30px rgba(59, 130, 246, 0.4);
}

/* Hit variant */
.autoplay-option.opt-hit {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.15);
}
.autoplay-option.opt-hit:hover {
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(251, 191, 36, 0.2);
    background: #0e1018;
}
.autoplay-option.opt-hit:active {
    transform: scale(0.95);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 30px rgba(251, 191, 36, 0.4);
}

/* Power variant */
.autoplay-option.opt-power {
    color: #f472b6;
    border-color: rgba(236, 72, 153, 0.15);
}
.autoplay-option.opt-power:hover {
    border-color: rgba(236, 72, 153, 0.5);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(236, 72, 153, 0.2);
    background: #0e1018;
}
.autoplay-option.opt-power:active {
    transform: scale(0.95);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 30px rgba(236, 72, 153, 0.4);
}

.autoplay-cancel {
    padding: 10px 32px;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #6b7280;
    background: transparent;
    border: 1px solid #2a2d36;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.autoplay-cancel:hover {
    color: #9ca3af;
    border-color: #3a3d48;
}

.autoplay-cancel:active {
    transform: scale(0.95);
}

/* ═══ Insufficient Balance Modal ═══ */
.insufficient-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 35;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: modal-fade-in 0.3s ease-out;
}

@keyframes modal-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.insufficient-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 28px 28px;
    max-width: 320px;
    width: 90%;
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.95), rgba(15, 15, 30, 0.98));
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 24px;
    box-shadow: 0 0 40px rgba(251, 191, 36, 0.15), 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: modal-card-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-card-pop {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.insufficient-icon {
    font-size: 48px;
    line-height: 1;
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.5));
}

.insufficient-title {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--accent-gold);
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
    text-align: center;
}

.insufficient-message {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
}

.insufficient-balance {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.insufficient-balance:empty {
    display: none;
}

.insufficient-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.btn-modal-charge {
    width: 100%;
    padding: 14px 24px;
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #000;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: 2px solid rgba(34, 197, 94, 0.4);
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
    transition: all 0.2s ease;
    animation: modal-charge-pulse 2s ease-in-out infinite;
}

@keyframes modal-charge-pulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 30px rgba(34, 197, 94, 0.6);
        transform: scale(1.02);
    }
}

.btn-modal-charge:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.7);
}

.btn-modal-charge:active {
    transform: scale(0.97);
}

.btn-modal-charge:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    animation: none;
}

.btn-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.12);
}

/* Ad button variant — purple gradient */
.btn-modal-ad {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
    animation: modal-ad-pulse 2s ease-in-out infinite;
}

@keyframes modal-ad-pulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.6);
        transform: scale(1.02);
    }
}

.btn-modal-ad:hover {
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.7);
}

/* Downgrade variant — hide charge button, show info style */
.insufficient-modal.downgrade .btn-modal-charge {
    display: none;
}

.insufficient-modal.downgrade .insufficient-icon {
    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.5));
}

.insufficient-modal.downgrade .insufficient-title {
    color: var(--accent-blue);
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.insufficient-modal.downgrade .insufficient-card {
    border-color: rgba(59, 130, 246, 0.25);
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.15), 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ── Responsive ── */
@media (max-width: 380px) {
    .btn-swing { padding: 8px 6px; font-size: 9px; }
    .btn-swing .btn-icon-svg { width: 16px; height: 16px; }
    .result-text { font-size: 36px; }
    .result-text.home_run { font-size: 38px; }
    .jackpot-title { font-size: 32px; }
    .jackpot-amount { font-size: 42px; }
    .result-text.grand_slam { font-size: 32px; }
    .btn-enter-si { font-size: 14px; padding: 14px 24px; }
}

/* ═══ Super Inning Auto-Play Area ═══ */
.si-auto-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 30px 0 calc(16px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
    background: radial-gradient(ellipse at center top, rgba(30, 20, 0, 0.98) 0%, rgba(5, 5, 15, 0.99) 60%, #000 100%);
    overflow: hidden;
}

.si-auto-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.si-title-bar {
    font-size: clamp(20px, 5vw, 28px);
    font-weight: 900;
    letter-spacing: 4px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.6));
    animation: si-title-glow 2s ease-in-out infinite;
}

@keyframes si-title-glow {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.4)); }
    50% { filter: drop-shadow(0 0 40px rgba(251, 191, 36, 0.9)); }
}

.si-stats {
    display: flex;
    gap: 20px;
    font-size: 14px;
    font-weight: 700;
}

.si-stat-outs {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    padding: 4px 14px;
    border-radius: 12px;
}

.si-stat-reward {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
    padding: 4px 14px;
    border-radius: 12px;
}

.si-free-badge {
    background: #22c55e;
    color: #000;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 2px;
}

.si-roulette-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Responsive: fill available space, cap at 420px */
    width: min(90vw, 420px);
    height: min(90vw, 420px);
    flex: 1 1 auto;
    max-height: 420px;
    min-height: 180px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251,191,36,0.1) 0%, transparent 70%);
    box-shadow: 0 0 40px rgba(251, 191, 36, 0.15);
}

.si-roulette-wrap canvas {
    width: 95% !important;
    height: 95% !important;
}

.si-kid-area {
    width: 100%;
    max-width: 280px;
    flex: 0 1 130px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#si-kid-canvas {
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

.si-auto-status {
    font-size: 18px;
    font-weight: 800;
    color: #fbbf24;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
    animation: si-status-pulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
    padding-bottom: 4px;
}

@keyframes si-status-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}



/* ═══ SI Judgment Overlay ═══ */
.si-judgment-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    pointer-events: none;
}

.si-judgment-text {
    font-family: var(--font-main);
    font-size: 52px;
    font-weight: 900;
    letter-spacing: 3px;
    text-align: center;
    animation: judgment-pop-3d 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes judgment-pop-3d {
    0% {
        transform: scale(0) translateY(20px) perspective(400px) rotateX(20deg);
        opacity: 0;
    }
    55% {
        transform: scale(1.2) translateY(-3px) perspective(400px) rotateX(-3deg);
        opacity: 1;
    }
    75% {
        transform: scale(0.97) translateY(1px);
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.si-judgment-text.swing {
    color: #94a3b8;
    font-size: 36px;
    text-shadow:
        0 -1px 0 #cbd5e1,
        1px 1px 0 #64748b,
        2px 2px 4px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(148, 163, 184, 0.4);
    animation: swing-pulse 0.8s ease-in-out infinite;
}

@keyframes swing-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.si-judgment-text.hit {
    color: #34d399;
    text-shadow:
        0 -1px 0 #6ee7b7,
        1px 1px 0 #059669,
        2px 2px 0 #047857,
        3px 3px 0 #065f46,
        4px 4px 8px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(34, 197, 94, 0.6);
}

.si-judgment-text.out {
    color: #f87171;
    text-shadow:
        0 -1px 0 #fca5a5,
        1px 1px 0 #dc2626,
        2px 2px 0 #b91c1c,
        3px 3px 0 #991b1b,
        4px 4px 0 #7f1d1d,
        5px 5px 10px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(239, 68, 68, 0.5);
    animation: judgment-pop-3d 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), si-out-shake 0.4s 0.25s ease-in-out;
}

@keyframes si-out-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
}

.si-judgment-text.out-count {
    color: #fb923c;
    font-size: 40px;
    text-shadow:
        0 -1px 0 #fdba74,
        1px 1px 0 #ea580c,
        2px 2px 0 #c2410c,
        3px 3px 6px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(249, 115, 22, 0.5);
}

.si-judgment-text.game-over {
    color: #f87171;
    font-size: 44px;
    text-shadow:
        0 -1px 0 #fca5a5,
        1px 1px 0 #dc2626,
        2px 2px 0 #b91c1c,
        3px 3px 0 #991b1b,
        4px 4px 0 #7f1d1d,
        5px 5px 10px rgba(0, 0, 0, 0.5),
        0 0 35px rgba(239, 68, 68, 0.6);
}

.si-judgment-text.reward {
    color: #fbbf24;
    text-shadow:
        0 -1px 0 #fde68a,
        1px 1px 0 #d97706,
        2px 2px 0 #b45309,
        3px 3px 0 #92400e,
        4px 4px 8px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(251, 191, 36, 0.6);
}

.si-judgment-text.jackpot {
    font-size: 48px;
    background: linear-gradient(180deg, #fde68a 0%, #fbbf24 40%, #f59e0b 70%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(1px 1px 0 #b45309) drop-shadow(2px 2px 0 #92400e) drop-shadow(3px 3px 0 #78350f) drop-shadow(4px 4px 6px rgba(0,0,0,0.5)) drop-shadow(0 0 25px rgba(251,191,36,0.6));
    animation: judgment-pop-3d 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), si-jackpot-glow 1s ease-in-out infinite;
}

@keyframes si-jackpot-glow {
    0%, 100% {
        filter: drop-shadow(1px 1px 0 #b45309) drop-shadow(2px 2px 0 #92400e) drop-shadow(3px 3px 0 #78350f) drop-shadow(4px 4px 6px rgba(0,0,0,0.5)) drop-shadow(0 0 25px rgba(251,191,36,0.5));
    }
    50% {
        filter: drop-shadow(1px 1px 0 #b45309) drop-shadow(2px 2px 0 #92400e) drop-shadow(3px 3px 0 #78350f) drop-shadow(4px 4px 6px rgba(0,0,0,0.5)) drop-shadow(0 0 50px rgba(251,191,36,1)) drop-shadow(0 0 80px rgba(236,72,153,0.5));
    }
}



/* ═══ Ranking Overlay ═══ */
.ranking-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: rgba(5, 8, 22, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.ranking-overlay.ranking-show {
    animation: ranking-slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ranking-slide-up {
    0% { opacity: 0; transform: translateY(100%); }
    100% { opacity: 1; transform: translateY(0); }
}

.ranking-container {
    width: 100%;
    max-width: 430px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Header */
.ranking-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    flex-shrink: 0;
}

.btn-ranking-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.2s;
}

.btn-ranking-back:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
}

.btn-ranking-back:active {
    transform: scale(0.9);
}

.ranking-title {
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 4px;
    color: var(--accent-gold);
    text-shadow: 0 0 15px rgba(251, 191, 36, 0.4);
}

.ranking-title-spacer {
    width: 36px;
}

/* Top 3 Cards */
.ranking-top-cards {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    padding: 8px 20px 20px;
    flex-shrink: 0;
}

.ranking-top-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 12px 12px;
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.2s;
    width: 110px;
}

.ranking-top-card.rank-1 {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.1));
    border: 1.5px solid rgba(251, 191, 36, 0.4);
    box-shadow: 0 0 25px rgba(251, 191, 36, 0.2);
    transform: scale(1.08);
    padding: 18px 12px 14px;
}

.ranking-top-card.rank-2 {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.15), rgba(156, 163, 175, 0.08));
    border: 1.5px solid rgba(192, 192, 192, 0.3);
    box-shadow: 0 0 15px rgba(192, 192, 192, 0.15);
}

.ranking-top-card.rank-3 {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.15), rgba(180, 83, 9, 0.08));
    border: 1.5px solid rgba(205, 127, 50, 0.3);
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.15);
}

.ranking-top-card.is-me {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    border-color: rgba(59, 130, 246, 0.5);
}

.ranking-medal {
    font-size: 28px;
    line-height: 1;
}

.ranking-top-card.rank-1 .ranking-medal {
    font-size: 34px;
}

.ranking-top-name {
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 95px;
}

.ranking-top-balance {
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 800;
    color: var(--accent-gold);
    text-shadow: 0 0 6px rgba(251, 191, 36, 0.3);
}

/* Scrollable List (4~30위) */
.ranking-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.ranking-list::-webkit-scrollbar {
    width: 4px;
}

.ranking-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.ranking-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 4px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
}

.ranking-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.ranking-row.is-me {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.15);
}

.ranking-rank {
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 800;
    color: var(--text-secondary);
    min-width: 36px;
}

.ranking-row.is-me .ranking-rank {
    color: var(--accent-blue);
}

.ranking-name {
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-balance {
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-gold);
    text-shadow: 0 0 4px rgba(251, 191, 36, 0.2);
}

.ranking-loading {
    text-align: center;
    padding: 40px 0;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
}

/* My Rank Fixed Bar */
.ranking-me-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.1));
    border-top: 1px solid rgba(59, 130, 246, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-shrink: 0;
}

.ranking-me-label {
    font-family: var(--font-main);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--accent-blue);
    padding: 3px 10px;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 10px;
}

.ranking-me-rank {
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: 900;
    color: var(--text-primary);
}

.ranking-me-name {
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-me-balance {
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-gold);
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
}

@media (max-width: 380px) {
    .ranking-top-card { width: 95px; padding: 10px 8px; }
    .ranking-top-card.rank-1 { padding: 14px 8px 12px; }
    .ranking-medal { font-size: 24px; }
    .ranking-top-card.rank-1 .ranking-medal { font-size: 28px; }
    .ranking-top-name { font-size: 11px; max-width: 80px; }
    .ranking-top-balance { font-size: 12px; }
    .led-digits { font-size: 16px; }
    #jackpot-amount { font-size: 18px; }
    .panel-jackpot { min-width: 100px; }
    .btn-scoreboard-ranking { font-size: 8px; padding: 3px 8px; }
    .btn-sound-toggle { width: 22px; height: 22px; }
}