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

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #020c02;
            min-height: 100vh;
            color: white;
            overflow-x: hidden;
        }

        /* Matrix Rain Canvas */
        #matrixCanvas {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: 0;
            opacity: 0.22;
            pointer-events: none;
        }

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

        /* Matrix logo icon */
        .matrix-logo-icon {
            display: flex;
            gap: 2px;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            background: rgba(0,255,65,0.08);
            border: 1.5px solid rgba(0,255,65,0.4);
            border-radius: 10px;
            box-shadow: 0 0 12px rgba(0,255,65,0.25), inset 0 0 8px rgba(0,255,65,0.08);
        }

        .mli-char {
            font-family: 'Courier New', monospace;
            font-size: 20px;
            font-weight: 900;
            color: #00ff41;
            text-shadow: 0 0 8px #00ff41, 0 0 16px #00cc33;
            line-height: 1;
        }

        /* Promo Bar */
        .promo-bar {
            background: linear-gradient(90deg, #003300, #005500, #007700, #005500, #003300);
            padding: 8px 0;
            text-align: center;
            font-weight: 900;
            font-size: 14px;
            position: relative;
            overflow: hidden;
        }

        .promo-bar::before {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                45deg,
                transparent,
                transparent 10px,
                rgba(255,255,255,0.1) 10px,
                rgba(255,255,255,0.1) 20px
            );
        }

        /* Header */
        header {
            background: rgba(15, 23, 42, 0.95);
            backdrop-filter: blur(20px);
            border-bottom: 2px solid rgba(255, 215, 0, 0.3);
            padding: 16px 0;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
        }

        .header-content {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .logo-section {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .logo-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #ffd700, #ff8c00);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-shadow: 0 8px 32px rgba(255, 215, 0, 0.4);
            animation: pulse-glow 2s ease-in-out infinite;
        }

        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 8px 32px rgba(255, 215, 0, 0.4); }
            50% { box-shadow: 0 8px 48px rgba(255, 215, 0, 0.8); }
        }

        /* Crown Icon using CSS */
        .crown {
            width: 36px;
            height: 36px;
            position: relative;
        }

        .crown-base {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 12px;
            background: linear-gradient(180deg, #fff, #ffd700);
            border-radius: 2px;
        }

        .crown-body {
            position: absolute;
            bottom: 12px;
            left: 5px;
            right: 5px;
            height: 18px;
            background: linear-gradient(135deg, #ffd700, #ff8c00);
            clip-path: polygon(0 100%, 20% 30%, 50% 0, 80% 30%, 100% 100%);
        }

        .crown-jewel {
            position: absolute;
            width: 6px;
            height: 6px;
            background: #ff0000;
            border-radius: 50%;
            box-shadow: 0 0 8px #ff0000;
        }

        .jewel1 { bottom: 20px; left: 2px; }
        .jewel2 { bottom: 28px; left: 50%; transform: translateX(-50%); }
        .jewel3 { bottom: 20px; right: 2px; }

        .logo-text h1 {
            font-size: 28px;
            font-weight: 900;
            font-family: 'Courier New', monospace;
            background: linear-gradient(90deg, #00ff41, #39ff14, #00cc33);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: 2px;
            text-shadow: none;
            filter: drop-shadow(0 0 8px rgba(0,255,65,0.5));
        }

        .logo-text .subtitle {
            font-size: 10px;
            color: #00cc33;
            font-weight: 600;
            letter-spacing: 3px;
            font-family: 'Courier New', monospace;
            opacity: 0.7;
        }

        .header-actions {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .balance-display {
            background: linear-gradient(135deg, #059669, #047857);
            border: 2px solid rgba(16, 185, 129, 0.5);
            border-radius: 12px;
            padding: 12px 24px;
            position: relative;
            box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
        }

        .balance-label {
            font-size: 10px;
            color: #a7f3d0;
            font-weight: 700;
            margin-bottom: 2px;
        }

        .balance-amount {
            font-size: 28px;
            font-weight: 900;
            color: white;
        }

        .btn {
            padding: 11px 16px;
            border: 1px solid transparent;
            border-radius: 4px;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
            position: relative;
            overflow: hidden;
            letter-spacing: 0.2px;
        }

        .btn:hover {
            transform: translateY(-1px);
        }

        .btn-deposit {
            background: var(--rg-primary-200, #179163);
            color: var(--rg-text-50, #f0f0f0);
            border: 1px solid var(--rg-primary-300, #15523a);
        }

        .btn-deposit:hover {
            transform: translateY(-1px);
            background: #21a170;
        }

        .btn-user {
            background: rgba(43, 43, 43, 0.78);
            border: 1px solid rgba(86, 210, 160, 0.3);
            width: auto;
            min-width: 48px;
            height: 48px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--rg-text-50, #f0f0f0);
        }

        /* Main Container */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px 20px;
            position: relative;
            z-index: 1;
        }

        /* Hero Banner */
        .hero-banner {
            background: linear-gradient(135deg, #7c3aed, #ec4899, #f97316);
            border-radius: 24px;
            padding: 60px 48px;
            margin-bottom: 48px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.4);
        }

        .hero-banner::before {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                45deg,
                transparent,
                transparent 50px,
                rgba(255,255,255,0.05) 50px,
                rgba(255,255,255,0.05) 100px
            );
        }

        .hero-content {
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .hero-left {
            flex: 1;
        }

        .hero-tags {
            display: flex;
            gap: 12px;
            margin-bottom: 16px;
        }

        .hero-tag {
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: 900;
            font-size: 12px;
        }

        .tag-hot {
            background: #ef4444;
            animation: pulse 2s ease-in-out infinite;
        }

        .tag-games {
            background: #fbbf24;
            color: #000;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .hero-title {
            font-size: 56px;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 16px;
        }

        .hero-subtitle {
            font-size: 20px;
            opacity: 0.9;
            margin-bottom: 24px;
        }

        .hero-buttons {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
        }

        .btn-play {
            background: linear-gradient(135deg, #10b981, #059669);
            padding: 20px 40px;
            font-size: 18px;
            box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
        }

        .hero-stats {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(20px);
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 24px;
            padding: 32px;
        }

        .stats-label {
            font-size: 14px;
            opacity: 0.7;
            margin-bottom: 8px;
        }

        .stats-value {
            font-size: 48px;
            font-weight: 900;
            color: #fbbf24;
        }

        .stats-info {
            font-size: 14px;
            color: #10b981;
            margin-top: 8px;
        }

        /* Section Headers */
        .section-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
        }

        .section-title {
            font-size: 32px;
            font-weight: 900;
            flex: 1;
        }

        .section-see-all {
            background: none;
            border: 1px solid var(--rg-border-subtle);
            border-radius: 6px;
            color: var(--rg-primary-100);
            font-size: 12px;
            font-weight: 600;
            padding: 5px 12px;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .section-see-all:hover {
            background: var(--rg-surface-300);
            border-color: var(--rg-primary-200);
        }

        .section-game-count {
            font-size: 12px;
            color: var(--rg-text-muted);
            font-weight: 500;
            margin-left: auto;
        }

        /* Game Grid */
        .games-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 14px;
            margin-bottom: 28px;
        }
        /* Game Cards – 5Gringos minimal style */
        .game-card {
            background: var(--rg-neutral-300, rgba(30, 41, 59, 0.9));
            border: 1px solid transparent;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
            position: relative;
        }

        .game-card:hover {
            transform: translateY(-4px) scale(1.02);
            border-color: var(--rg-primary-200, #179163);
            box-shadow: 0 8px 24px rgba(23, 145, 99, 0.2), 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .game-thumbnail {
            aspect-ratio: 3 / 4;
            position: relative;
            overflow: hidden;
        }

        .game-tag {
            position: absolute;
            top: 8px;
            right: 8px;
            padding: 4px 8px;
            border-radius: 3px;
            font-size: 10px;
            font-weight: 800;
            z-index: 10;
            letter-spacing: 0.3px;
        }

        @keyframes tagJackpotShimmer {
            0%, 100% { background-position: 0% 50%; box-shadow: 0 0 8px rgba(239,68,68,0.6); }
            50%       { background-position: 100% 50%; box-shadow: 0 0 14px rgba(251,191,36,0.8); }
        }
        @keyframes tagHotFlame {
            0%, 100% { box-shadow: 0 0 6px rgba(239,68,68,0.5); }
            50%       { box-shadow: 0 0 12px rgba(251,115,22,0.9), 0 0 4px rgba(253,186,116,0.5); }
        }
        @keyframes tagNewGlow {
            0%, 100% { box-shadow: 0 0 4px rgba(16,185,129,0.4); }
            50%       { box-shadow: 0 0 10px rgba(52,211,153,0.8); }
        }
        .tag-jackpot {
            background: linear-gradient(90deg, #ef4444, #f59e0b, #ef4444);
            background-size: 200% 100%;
            animation: tagJackpotShimmer 2s ease-in-out infinite;
            color: #fff;
        }
        .tag-hot { background: linear-gradient(135deg, #bc3146, #e84a1f); }
        .tag-hot.tag-hot-flame { animation: tagHotFlame 1.2s ease-in-out infinite; }
        .tag-new { background: #10b981; }
        .tag-new.tag-new-glow { animation: tagNewGlow 1.8s ease-in-out infinite; }
        .tag-vip { background: #8b5cf6; }
        .tag-popular { background: var(--rg-yellow-300, #f59e0b); color: #101010; }

        .game-info {
            padding: 8px 10px 10px;
        }

        .game-name {
            font-size: 13px;
            font-weight: 700;
            color: var(--rg-text-50, #f0f0f0);
            margin-bottom: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .game-provider {
            font-size: 11px;
            color: var(--rg-text-muted, #8a8a8a);
            font-weight: 400;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Volatility badge — bottom-left of thumbnail */
        .game-vol-badge {
            position: absolute;
            bottom: 6px;
            left: 6px;
            display: flex;
            gap: 2px;
            align-items: center;
            background: rgba(0,0,0,0.6);
            border-radius: 4px;
            padding: 3px 5px;
            backdrop-filter: blur(4px);
        }

        .vol-dot {
            width: 5px;
            height: 9px;
            border-radius: 2px;
            background: rgba(255,255,255,0.2);
        }

        .vol-low .vol-dot-filled    { background: #4ade80; }
        .vol-medium .vol-dot-filled { background: #fbbf24; }
        .vol-high .vol-dot-filled   { background: #f97316; }
        .vol-very-high .vol-dot-filled { background: #ef4444; box-shadow: 0 0 4px rgba(239,68,68,0.7); }

        .game-hover-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 100%);
            backdrop-filter: blur(3px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            opacity: 0;
            transition: opacity 0.22s ease;
            padding: 8px;
        }

        .game-card:hover .game-hover-overlay {
            opacity: 1;
        }

        .game-play-icon {
            display: none;
        }

        .game-play-svg {
            width: 48px;
            height: 48px;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
            transition: transform 0.2s ease;
        }

        .game-card:hover .game-play-svg {
            transform: scale(1.12);
        }

        .game-hover-provider {
            font-size: 11px;
            color: var(--rg-text-200);
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        /* Hover meta pills */
        .game-hover-pills {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
            justify-content: center;
        }
        .game-hover-pill {
            background: rgba(255,255,255,0.15);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 10px;
            padding: 2px 8px;
            font-size: 10px;
            font-weight: 700;
            color: rgba(255,255,255,0.9);
            letter-spacing: 0.3px;
        }
        /* Hover bonus description */
        .game-hover-desc {
            font-size: 10px;
            color: rgba(255,255,255,0.75);
            text-align: center;
            line-height: 1.3;
            max-width: 90%;
            letter-spacing: 0.2px;
        }
        /* Hot card subtle red rim */
        .game-card-hot {
            box-shadow: 0 0 0 1px rgba(188,49,70,0.3);
        }
        .game-card-hot:hover {
            border-color: #ef4444 !important;
            box-shadow: 0 8px 24px rgba(239,68,68,0.25), 0 4px 12px rgba(0,0,0,0.3) !important;
        }
        /* Jackpot card golden rim */
        .game-card-jackpot {
            box-shadow: 0 0 0 1px rgba(245,158,11,0.3);
        }
        .game-card-jackpot:hover {
            border-color: #f59e0b !important;
            box-shadow: 0 8px 24px rgba(245,158,11,0.3), 0 4px 12px rgba(0,0,0,0.3) !important;
        }

        @keyframes jackpotBadgeShimmer {
            0%, 100% { background-position: 0% 50%; }
            50%       { background-position: 100% 50%; }
        }
        .game-jackpot-badge {
            position: absolute;
            bottom: 8px;
            left: 8px;
            background: linear-gradient(90deg, #f59e0b, #ef4444, #fbbf24, #f59e0b);
            background-size: 300% 100%;
            color: #fff;
            font-size: 9px;
            font-weight: 800;
            padding: 3px 8px;
            border-radius: 3px;
            letter-spacing: 0.5px;
            z-index: 10;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            animation: jackpotBadgeShimmer 2.5s ease-in-out infinite;
            box-shadow: 0 0 6px rgba(245,158,11,0.5);
        }

        /* Thumbnail shimmer sweep on hover */
        .game-thumbnail::before {
            content: '';
            position: absolute;
            top: 0;
            left: -120%;
            width: 60%;
            height: 100%;
            background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
            transform: skewX(-20deg);
            transition: none;
            pointer-events: none;
            z-index: 5;
        }
        .game-card:hover .game-thumbnail::before {
            animation: thumbShimmer 0.55s ease-out forwards;
        }
        @keyframes thumbShimmer {
            0%   { left: -120%; }
            100% { left: 140%; }
        }

        /* HD CSS Assets - Diamond */
        .asset-diamond {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .diamond-shape {
            width: 120px;
            height: 140px;
            position: relative;
            transform: perspective(1000px) rotateX(20deg);
        }

        .diamond-top {
            position: absolute;
            top: 0;
            left: 20px;
            width: 80px;
            height: 40px;
            background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 50%, #0277bd 100%);
            clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
            box-shadow: 0 4px 20px rgba(79, 195, 247, 0.6);
        }

        .diamond-middle {
            position: absolute;
            top: 40px;
            left: 10px;
            width: 100px;
            height: 50px;
            background: linear-gradient(180deg, #29b6f6 0%, #0288d1 50%, #0277bd 100%);
            clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
        }

        .diamond-bottom {
            position: absolute;
            top: 90px;
            left: 20px;
            width: 80px;
            height: 50px;
            background: linear-gradient(180deg, #0277bd 0%, #01579b 100%);
            clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
        }

        .diamond-highlight {
            position: absolute;
            top: 15px;
            left: 35px;
            width: 30px;
            height: 20px;
            background: rgba(255,255,255,0.6);
            clip-path: polygon(30% 0%, 70% 0%, 50% 100%);
            filter: blur(2px);
        }

        /* HD CSS Assets - Cherry */
        .asset-cherry {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .cherry-group {
            width: 140px;
            height: 120px;
            position: relative;
        }

        .cherry {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #ff6b6b, #ee5a6f, #c00000);
            box-shadow: 0 4px 20px rgba(255, 75, 75, 0.5),
                        inset -5px -5px 15px rgba(0,0,0,0.3);
        }

        .cherry1 { bottom: 10px; left: 20px; }
        .cherry2 { bottom: 10px; right: 20px; }

        .cherry-highlight {
            position: absolute;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: rgba(255,255,255,0.6);
            top: 8px;
            left: 12px;
            filter: blur(2px);
        }

        .cherry-stem {
            position: absolute;
            width: 3px;
            height: 40px;
            background: linear-gradient(180deg, #2d5016, #1a3010);
            border-radius: 2px;
            top: 20px;
            left: 50%;
            transform-origin: bottom;
        }

        .stem1 { transform: translateX(-25px) rotate(-15deg); }
        .stem2 { transform: translateX(15px) rotate(15deg); }

        .cherry-leaf {
            position: absolute;
            top: 5px;
            left: 50%;
            transform: translateX(-50%);
            width: 25px;
            height: 15px;
            background: radial-gradient(ellipse at center, #4a7c2f, #2d5016);
            border-radius: 50%;
        }

        /* HD CSS Assets - Seven */
        .asset-seven {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .seven-text {
            font-size: 140px;
            font-weight: 900;
            font-family: Arial Black, sans-serif;
            background: linear-gradient(180deg, #ffd700 0%, #ffed4e 30%, #ffc107 70%, #ff6f00 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 4px 4px 0px rgba(191, 54, 12, 0.8);
            position: relative;
            filter: drop-shadow(0 8px 20px rgba(255, 215, 0, 0.6));
        }

        /* HD CSS Assets - Crown */
        .asset-crown {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .crown-container {
            width: 140px;
            height: 100px;
            position: relative;
        }

        .crown-peak {
            position: absolute;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 30px solid #ffd700;
        }

        .peak1 { bottom: 40px; left: 10px; }
        .peak2 { bottom: 50px; left: 55px; }
        .peak3 { bottom: 40px; right: 10px; }

        .crown-body-shape {
            position: absolute;
            bottom: 0;
            left: 10px;
            right: 10px;
            height: 40px;
            background: linear-gradient(180deg, #ffd700 0%, #ffb300 50%, #ff8c00 100%);
            border-radius: 4px 4px 0 0;
            box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5);
        }

        .crown-band {
            position: absolute;
            bottom: 0;
            left: 10px;
            right: 10px;
            height: 15px;
            background: linear-gradient(180deg, #ff8c00, #ff6f00);
            border-radius: 0 0 4px 4px;
        }

        .crown-ruby {
            position: absolute;
            width: 12px;
            height: 12px;
            background: radial-gradient(circle at 30% 30%, #ff4444, #cc0000);
            border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.5);
            box-shadow: 0 0 10px #ff0000;
        }

        .ruby1 { bottom: 45px; left: 20px; }
        .ruby2 { bottom: 55px; left: 63px; }
        .ruby3 { bottom: 45px; right: 20px; }

        /* HD CSS Assets - Star */
        .asset-star {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .star-shape {
            width: 120px;
            height: 120px;
            position: relative;
            filter: drop-shadow(0 4px 20px rgba(255, 215, 0, 0.8));
        }

        .star-point {
            position: absolute;
            width: 0;
            height: 0;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-bottom: 40px solid #ffd700;
            background: linear-gradient(180deg, #fff9c4, #ffd54f, #ffb300);
        }

        .point-top { top: 0; left: 50%; transform: translateX(-50%); }
        .point-right { top: 30px; right: 5px; transform: rotate(72deg); }
        .point-bottom-right { bottom: 15px; right: 25px; transform: rotate(144deg); }
        .point-bottom-left { bottom: 15px; left: 25px; transform: rotate(-144deg); }
        .point-left { top: 30px; left: 5px; transform: rotate(-72deg); }
        .star-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            background: radial-gradient(circle, #fff9c4, #ffd54f);
            border-radius: 50%;
        }

        /* HD CSS Assets - Bell */
        .asset-bell {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bell-shape {
            width: 90px;
            height: 90px;
            background: linear-gradient(180deg, #ffd700 0%, #ffb300 50%, #ff8c00 100%);
            border-radius: 50% 50% 0 0;
            position: relative;
            box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5);
        }

        .bell-top {
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 15px;
            height: 10px;
            background: #8b4513;
            border-radius: 50%;
        }

        .bell-bottom {
            position: absolute;
            bottom: -10px;
            left: 0;
            right: 0;
            height: 10px;
            background: #8b4513;
            border-radius: 0 0 8px 8px;
        }

        .bell-clapper {
            position: absolute;
            bottom: -25px;
            left: 50%;
            transform: translateX(-50%);
            width: 12px;
            height: 12px;
            background: #6d4c41;
            border-radius: 50%;
        }

        .bell-highlight {
            position: absolute;
            top: 20px;
            left: 15px;
            width: 30px;
            height: 20px;
            background: rgba(255,255,255,0.4);
            border-radius: 50%;
            filter: blur(4px);
        }

        /* HD CSS Assets - Coin */
        .asset-coin {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .coin-shape {
            width: 100px;
            height: 100px;
            background: radial-gradient(circle at 30% 30%, #fff9c4, #ffd54f, #ffb300, #ff8c00);
            border-radius: 50%;
            border: 6px solid #8b4513;
            position: relative;
            box-shadow: 0 8px 30px rgba(255, 215, 0, 0.6),
                        inset -10px -10px 20px rgba(0,0,0,0.2);
        }

        .coin-inner-ring {
            position: absolute;
            inset: 10px;
            border: 3px solid #8b4513;
            border-radius: 50%;
        }

        .coin-dollar {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 48px;
            font-weight: 900;
            color: #8b4513;
        }

        .coin-shine {
            position: absolute;
            top: 15px;
            left: 20px;
            width: 30px;
            height: 30px;
            background: rgba(255,255,255,0.6);
            border-radius: 50%;
            filter: blur(4px);
        }

        /* HD CSS Assets - Bar */
        .asset-bar {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bar-shape {
            width: 130px;
            height: 55px;
            background: linear-gradient(90deg, #ff6f00 0%, #ffd54f 20%, #fff9c4 50%, #ffd54f 80%, #ff6f00 100%);
            border-radius: 8px;
            border: 4px solid #8b4513;
            position: relative;
            box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5),
                        inset 0 4px 10px rgba(255,255,255,0.3);
        }

        .bar-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 22px;
            font-weight: 900;
            color: #6d4c41;
            letter-spacing: 2px;
        }

        .bar-stripe {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 12px;
            background: rgba(255,255,255,0.4);
            border-radius: 4px 4px 0 0;
        }

        /* HD CSS Assets - Clover */
        .asset-clover {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .clover-container {
            width: 120px;
            height: 120px;
            position: relative;
        }

        .clover-leaf {
            position: absolute;
            width: 40px;
            height: 40px;
            background: radial-gradient(circle at 30% 30%, #81c784, #66bb6a, #43a047);
            border-radius: 50%;
            border: 2px solid #2e7d32;
            box-shadow: 0 2px 10px rgba(67, 160, 71, 0.4);
        }

        .leaf-tl { top: 15px; left: 15px; }
        .leaf-tr { top: 15px; right: 15px; }
        .leaf-bl { bottom: 35px; left: 15px; }
        .leaf-br { bottom: 35px; right: 15px; }

        .clover-center {
            position: absolute;
            top: 40px;
            left: 50%;
            transform: translateX(-50%);
            width: 35px;
            height: 35px;
            background: radial-gradient(circle, #66bb6a, #43a047);
            border-radius: 50%;
            border: 2px solid #2e7d32;
        }

        .clover-stem {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 6px;
            height: 40px;
            background: linear-gradient(180deg, #2e7d32, #1b5e20);
            border-radius: 3px;
        }

        /* HD CSS Assets - Watermelon */
        .asset-watermelon {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .watermelon-shape {
            width: 120px;
            height: 90px;
            background: linear-gradient(180deg, #ff6b6b 0%, #ff5252 60%, #e53935 100%);
            border-radius: 60px 60px 0 0;
            border: 5px solid #1b5e20;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(255, 75, 75, 0.4);
        }

        .watermelon-flesh {
            position: absolute;
            inset: 5px 5px 20px 5px;
            background: linear-gradient(180deg, #ffcdd2 0%, #ef9a9a 100%);
            border-radius: 55px 55px 0 0;
        }

        .watermelon-seed {
            position: absolute;
            width: 8px;
            height: 12px;
            background: #263238;
            border-radius: 50%;
        }

        .seed1 { top: 25px; left: 30px; }
        .seed2 { top: 30px; left: 60px; }
        .seed3 { top: 25px; right: 30px; }
        .seed4 { top: 45px; left: 45px; }
        .seed5 { top: 45px; right: 45px; }

        /* Footer */
        footer {
            background: rgba(15, 23, 42, 0.95);
            border-top: 2px solid rgba(255, 215, 0, 0.3);
            padding: 48px 0;
            margin-top: 80px;
        }

        .footer-content {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-column h4 {
            font-weight: 900;
            margin-bottom: 16px;
        }

        .footer-column a {
            display: block;
            color: #94a3b8;
            text-decoration: none;
            margin-bottom: 8px;
            transition: color 0.3s;
        }

        .footer-column a:hover {
            color: var(--rg-yellow-300, #fbbf24);
        }

        .footer-about {
            color: var(--rg-text-muted);
            font-size: 13px;
            line-height: 1.6;
            margin-bottom: 14px;
        }

        .footer-divider {
            height: 1px;
            background: var(--rg-border-subtle, rgba(71,85,105,0.4));
            margin: 20px 0;
        }

        .footer-providers {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 4px;
        }

        .footer-provider-badge {
            background: var(--rg-surface-300, rgba(40,25,35,0.7));
            border: 1px solid var(--rg-border-subtle);
            border-radius: 4px;
            padding: 5px 12px;
            font-size: 11px;
            font-weight: 700;
            color: var(--rg-text-200);
            letter-spacing: 0.3px;
        }

        .footer-badges {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .footer-badge {
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.5px;
        }

        .footer-badge-18 { background: #ef4444; color: #fff; }
        .footer-badge-rg { background: #22c55e; color: #111; }
        .footer-badge-demo { background: var(--rg-yellow-300, #eed129); color: #111; }

        .footer-payments {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }

        .footer-payment-icon {
            background: var(--rg-surface-300);
            border: 1px solid var(--rg-border-subtle);
            border-radius: 4px;
            padding: 5px 14px;
            font-size: 11px;
            font-weight: 800;
            color: var(--rg-text-100);
            letter-spacing: 0.5px;
        }

        .footer-bottom {
            border-top: 1px solid var(--rg-border-subtle, rgba(71, 85, 105, 0.5));
            padding-top: 20px;
            text-align: center;
            color: var(--rg-text-muted);
            font-size: 13px;
        }

        .footer-disclaimer {
            font-size: 11px;
            margin-top: 6px;
            color: var(--rg-text-muted);
            opacity: 0.7;
        }

        /* Mobile Bottom Navigation */
        .mobile-bottom-nav {
            display: none;
        }

        @media (max-width: 640px) {
            .mobile-bottom-nav {
                display: flex;
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                background: var(--rg-surface-200, rgba(24,14,22,0.97));
                border-top: 1px solid var(--rg-border-subtle);
                z-index: 500;
                padding: 6px 0 max(6px, env(safe-area-inset-bottom));
            }

            .mob-nav-btn {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 3px;
                background: none;
                border: none;
                color: var(--rg-text-muted);
                font-size: 10px;
                font-weight: 600;
                cursor: pointer;
                letter-spacing: 0.3px;
                padding: 4px 0;
                transition: color 0.2s;
            }

            .mob-nav-btn:hover, .mob-nav-btn:active {
                color: var(--rg-primary-100);
            }

            .mob-nav-play {
                color: var(--rg-primary-200);
            }

            .mob-nav-play:hover {
                color: var(--rg-primary-100);
            }

            /* Push content up so it's not hidden by bottom nav */
            .container {
                padding-bottom: 80px;
            }
        }

        /* Modal/Slot Machine View */
        .modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.95);
            z-index: 1000;
            overflow-y: auto;
            padding: 40px 20px;
        }

        .modal.active {
            display: block;
        }

        .modal-content {
            max-width: 1200px;
            margin: 0 auto;
        }

        .back-btn {
            background: rgba(30, 41, 59, 0.8);
            border: 1px solid #475569;
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 700;
            margin-bottom: 24px;
            cursor: pointer;
        }

        .back-btn:hover {
            background: rgba(51, 65, 85, 0.9);
        }

        .slot-container {
            background: linear-gradient(135deg, rgba(124,58,237,0.3), rgba(236,72,153,0.3));
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.6);
        }

        .slot-header {
            background: linear-gradient(90deg, rgba(0,0,0,0.8), rgba(0,0,0,0.6));
            backdrop-filter: blur(10px);
            padding: 32px;
            border-bottom: 4px solid rgba(251,191,36,0.5);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .slot-title {
            font-size: 48px;
            font-weight: 900;
        }

        .slot-provider {
            font-size: 14px;
            color: var(--rg-text-muted, #8a8a8a);
            font-weight: 400;
            margin-top: 2px;
            margin-bottom: 6px;
        }

        .slot-payout {
            text-align: right;
        }

        .slot-bonus-info {
            padding: 10px 32px;
            font-size: 13px;
            font-weight: 600;
            text-align: center;
            background: linear-gradient(90deg, rgba(0,0,0,0.6), rgba(15,23,42,0.6), rgba(0,0,0,0.6));
            border-bottom: 1px solid rgba(251,191,36,0.15);
            color: #fbbf24;
            letter-spacing: 0.5px;
            animation: bonusInfoGlow 3s ease-in-out infinite;
        }

        @keyframes bonusInfoGlow {
            0%, 100% { opacity: 0.8; }
            50% { opacity: 1; text-shadow: 0 0 10px currentColor; }
        }

        /* ── Live Jackpot Banner ── */
        .slot-jackpot-banner {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 9px 24px;
            background: linear-gradient(90deg, transparent 0%, rgba(255,200,0,0.10) 20%, rgba(255,165,0,0.18) 50%, rgba(255,200,0,0.10) 80%, transparent 100%);
            border-top: 1px solid rgba(255,215,0,0.22);
            border-bottom: 1px solid rgba(255,215,0,0.22);
            overflow: hidden;
        }
        .slot-jackpot-banner::before {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 50%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
            animation: jackpotShimmer 2.8s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes jackpotShimmer {
            0%   { left: -60%; }
            100% { left: 160%; }
        }
        .jackpot-banner-inner {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .jackpot-banner-label {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 3px;
            color: #fbbf24;
            text-shadow: 0 0 8px rgba(251,191,36,0.55);
        }
        .jackpot-banner-icon {
            color: #ffd700;
            filter: drop-shadow(0 0 5px rgba(255,215,0,0.75));
            animation: jackpotStarPulse 1.6s ease-in-out infinite alternate;
            flex-shrink: 0;
        }
        @keyframes jackpotStarPulse {
            from { transform: scale(1);   opacity: 0.75; }
            to   { transform: scale(1.3); opacity: 1; }
        }
        .jackpot-banner-value {
            font-size: 20px;
            font-weight: 900;
            color: #ffd700;
            letter-spacing: 1.5px;
            font-family: 'Courier New', Courier, monospace;
            text-shadow: 0 0 14px rgba(255,215,0,0.85), 0 0 28px rgba(255,150,0,0.4);
            animation: jackpotValuePulse 2.2s ease-in-out infinite;
            min-width: 130px;
            text-align: center;
        }
        @keyframes jackpotValuePulse {
            0%, 100% { text-shadow: 0 0 14px rgba(255,215,0,0.85), 0 0 28px rgba(255,150,0,0.4); }
            50%       { text-shadow: 0 0 22px rgba(255,215,0,1),    0 0 44px rgba(255,165,0,0.65), 0 1px 0 rgba(0,0,0,0.6); }
        }

        .payout-label {
            font-size: 14px;
            color: #fbbf24;
            font-weight: 700;
        }

        .payout-value {
            font-size: 60px;
            font-weight: 900;
            color: #fbbf24;
        }

        .slot-body {
            padding: 48px;
        }

        .reels-container {
            background: linear-gradient(180deg, #080410 0%, #000000 100%);
            border-radius: 12px;
            padding: 2px;
            border: 2px solid rgba(251,191,36,0.25);
            margin-bottom: 0;
            box-shadow: 0 0 40px rgba(0,0,0,0.8), inset 0 0 60px rgba(0,0,0,0.6);
            position: relative;
            overflow: hidden;
        }

        /* Subtle frame shine on top edge (like real slots) */
        .reels-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 10%;
            right: 10%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(251,191,36,0.5), transparent);
            z-index: 2;
        }

        .reels {
            display: flex;
            justify-content: center;
            gap: 2px;
            margin-bottom: 0;
        }

        /* ═══ Dynamic Grid System with Rolling Reel Strips ═══ */
        .reel-column {
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        .reel-strip {
            display: flex;
            flex-direction: column;
            will-change: transform;
        }

        /* Strip transition states */
        .reel-strip.spinning {
            transition: none !important;
        }
        .reel-strip.decelerating {
            /* Natural deceleration: gentle ease-out with subtle overshoot for authentic slot feel */
            transition: transform 650ms cubic-bezier(0.12, 0.60, 0.32, 1.0);
        }
        .reel-strip.bouncing {
            transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* Motion blur during spin — fades smoothly during decel */
        .reel-column.spinning .reel-cell {
            filter: blur(2.5px) brightness(1.05);
            transition: filter 0.08s;
        }
        .reel-column:not(.spinning) .reel-cell {
            filter: blur(0) brightness(1);
            transition: filter 0.35s ease-out;
        }
        .reel-column.stopped .reel-cell {
            filter: blur(0) brightness(1);
            transition: filter 0.2s ease-out;
        }

        /* Column separator lines (like real Pragmatic Play slots) */
        .reel-column:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 2%;
            right: -1px;
            bottom: 2%;
            width: 1px;
            background: linear-gradient(180deg, transparent, rgba(255,255,255,0.08), transparent);
            z-index: 2;
        }

        .reel-cell {
            background: transparent;
            border-radius: 2px;
            border: none;
            box-shadow: none;
            position: relative;
            overflow: hidden;
            flex-shrink: 0;
        }

        /* ═══ Grid Size Variants ═══ */
        /* Classic 3x3 (Fire Joker, Hot Chillies) */
        .reels[data-cols="3"][data-rows="3"] { gap: 3px; }
        .reels[data-cols="3"][data-rows="3"] .reel-column { gap: 3px; }
        .reels[data-cols="3"][data-rows="3"] .reel-cell { width: 140px; height: 140px; border-radius: 4px; }

        /* Classic 3x1 (fallback) */
        .reels[data-cols="3"][data-rows="1"] { gap: 4px; }
        .reels[data-cols="3"][data-rows="1"] .reel-cell { width: 180px; height: 180px; border-radius: 4px; }

        /* 5x3 (Book of Dead, Wolf Gold, Starburst, Big Bass, Gonzo's, Super Hot) */
        .reels[data-cols="5"][data-rows="3"] { gap: 2px; }
        .reels[data-cols="5"][data-rows="3"] .reel-column { gap: 2px; }
        .reels[data-cols="5"][data-rows="3"] .reel-cell { width: 110px; height: 100px; }

        /* 5x4 (Black Bull) */
        .reels[data-cols="5"][data-rows="4"] { gap: 2px; }
        .reels[data-cols="5"][data-rows="4"] .reel-column { gap: 2px; }
        .reels[data-cols="5"][data-rows="4"] .reel-cell { width: 100px; height: 85px; }

        /* 6x5 (Sweet Bonanza, Gates of Olympus) */
        .reels[data-cols="6"][data-rows="5"] { gap: 2px; }
        .reels[data-cols="6"][data-rows="5"] .reel-column { gap: 2px; }
        .reels[data-cols="6"][data-rows="5"] .reel-cell { width: 85px; height: 72px; border-radius: 2px; }

        /* 5x5 (Olympian Gods, Sakura Princess) */
        .reels[data-cols="5"][data-rows="5"] { gap: 2px; }
        .reels[data-cols="5"][data-rows="5"] .reel-column { gap: 2px; }
        .reels[data-cols="5"][data-rows="5"] .reel-cell { width: 95px; height: 80px; border-radius: 2px; }

        /* 7x7 (Candy Cascade, Quantum Burst) */
        .reels[data-cols="7"][data-rows="7"] { gap: 1px; }
        .reels[data-cols="7"][data-rows="7"] .reel-column { gap: 1px; }
        .reels[data-cols="7"][data-rows="7"] .reel-cell { width: 68px; height: 58px; border-radius: 2px; }

        /* HD Reel symbol images */
        .reel-symbol-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            padding: 4px;
            display: block;
            image-rendering: auto;
            border-radius: 0;
        }

        /* Pass 2: Enhanced Reel cell animations with progressive blur and deceleration */
        .reel-scrolling {
            animation: reelScroll 0.06s linear infinite !important;
            will-change: transform, filter;
        }

        @keyframes reelScroll {
            0% { transform: translateY(0px); filter: blur(0px) brightness(1); }
            20% { filter: blur(2px) brightness(1.05); }
            50% { transform: translateY(-8px); filter: blur(5px) brightness(1.08); }
            80% { filter: blur(2px) brightness(1.05); }
            100% { transform: translateY(0px); filter: blur(0px) brightness(1); }
        }

        .reel-landing {
            animation: reelBounce 0.65s cubic-bezier(0.32, 1.42, 0.56, 1) forwards;
            will-change: transform;
        }

        @keyframes reelBounce {
            0% {
                transform: translateY(-25px) scale(0.98);
                opacity: 0.8;
                filter: blur(4px);
            }
            50% {
                transform: translateY(8px) scale(1.02);
                filter: blur(0.5px);
            }
            70% {
                transform: translateY(-3px) scale(1.01);
                opacity: 0.95;
            }
            100% {
                transform: translateY(0px) scale(1);
                opacity: 1;
                filter: blur(0px);
            }
        }

        /* High-speed deceleration spin animation for turbo mode */
        .reel-scrolling-turbo {
            animation: reelScrollTurbo 0.04s linear infinite !important;
            will-change: transform, filter;
        }

        @keyframes reelScrollTurbo {
            0% { transform: translateY(0px); filter: blur(0px); }
            30% { filter: blur(3px); }
            50% { transform: translateY(-6px); filter: blur(6px); }
            70% { filter: blur(3px); }
            100% { transform: translateY(0px); filter: blur(0px); }
        }

        /* Enhanced anticipation animation with shake and glow */
        .reel-anticipation {
            border-color: #ffd700 !important;
            animation: reelAnticipationShake 0.25s ease-in-out;
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.6) !important;
        }

        @keyframes reelAnticipationShake {
            0%, 100% { transform: translateX(0px) scale(1); }
            25% { transform: translateX(-3px) scale(1.01); }
            75% { transform: translateX(3px) scale(1.01); }
        }

        /* Win celebration pulse - applied after spin completes with win */
        .reel-celebrating {
            animation: winCelebrationGlow 0.8s ease-in-out;
        }

        @keyframes winCelebrationGlow {
            0% { filter: brightness(1) drop-shadow(0 0 5px rgba(255,215,0,0.3)); }
            50% { filter: brightness(1.25) drop-shadow(0 0 25px rgba(255,215,0,1)); }
            100% { filter: brightness(1) drop-shadow(0 0 8px rgba(255,215,0,0.5)); }
        }

        /* Mega win celebration - strong intensity */
        .reel-mega-win {
            animation: megaWinCelebration 1s cubic-bezier(0.36, 0, 0.66, 1);
        }

        @keyframes megaWinCelebration {
            0% { transform: scale(1) rotate(0deg); filter: brightness(1); }
            25% { transform: scale(1.08) rotate(-2deg); filter: brightness(1.3) drop-shadow(0 0 20px rgba(255,215,0,0.8)); }
            50% { transform: scale(1.04) rotate(2deg); filter: brightness(1.2) drop-shadow(0 0 30px rgba(255,215,0,1)); }
            75% { transform: scale(1.06) rotate(-1deg); filter: brightness(1.15); }
            100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
        }

        /* ═══════════════════════════════════════════════════════════════
           SLOT UI TEMPLATES — 5 distinct visual styles
           ═══════════════════════════════════════════════════════════════ */

        /* ── Template 1: CLASSIC (3x3) — Retro fruit machine ── */
        .slot-template-classic .reels-container {
            border: 5px solid transparent;
            border-image: linear-gradient(180deg, #ffd700, #b8860b 40%, #ffd700 60%, #8b6914) 1;
            box-shadow: 0 0 30px rgba(255, 215, 0, 0.15),
                        inset 0 3px 8px rgba(255, 215, 0, 0.08),
                        inset 0 -3px 8px rgba(0, 0, 0, 0.4);
            border-radius: 14px;
            padding: 8px;
            background: linear-gradient(180deg, #1a1008 0%, #0a0804 100%) !important;
        }
        .slot-template-classic .reel-column:not(:last-child)::after {
            width: 3px;
            background: linear-gradient(180deg,
                transparent 5%, #ffd700 15%, #b8860b 50%, #ffd700 85%, transparent 95%) !important;
            right: -2px;
        }
        .slot-template-classic .reel-cell {
            border-radius: 6px;
            border: 1px solid rgba(255, 215, 0, 0.25) !important;
            background: linear-gradient(180deg, rgba(20, 15, 8, 0.9) 0%, rgba(10, 8, 4, 0.95) 100%) !important;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
        }
        /* Classic payline markers */
        .slot-template-classic .reels::before,
        .slot-template-classic .reels::after {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ffd700;
            box-shadow: 0 0 6px rgba(255, 215, 0, 0.6),
                        0 -50px 0 #ffd700, 0 50px 0 #ffd700;
            z-index: 3;
        }
        .slot-template-classic .reels::before { left: -14px; }
        .slot-template-classic .reels::after { right: -14px; }
        .slot-template-classic .slot-top-bar {
            border-bottom-color: rgba(255, 215, 0, 0.3) !important;
        }
        .slot-template-classic .slot-bottom-bar {
            border-top-color: rgba(255, 215, 0, 0.3) !important;
        }

        /* ── Template 2: STANDARD (5x3) — Modern video slot ── */
        .slot-template-standard .reels-container {
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
            padding: 4px;
        }
        .slot-template-standard .reels-container::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 10px;
            background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }
        .slot-template-standard .reel-column:not(:last-child)::after {
            width: 1px;
            background: linear-gradient(180deg, transparent 5%, rgba(255,255,255,0.06) 50%, transparent 95%) !important;
        }
        .slot-template-standard .reel-cell {
            border: none !important;
            border-radius: 2px;
            background: transparent !important;
        }

        /* ── Template 3: EXTENDED (5x4) — Cinematic action slot ── */
        .slot-template-extended .reels-container {
            border: 2px solid rgba(var(--accent-rgb, 251,191,36), 0.25);
            border-radius: 8px;
            box-shadow: 0 0 35px rgba(0, 0, 0, 0.5);
            padding: 4px;
            position: relative;
        }
        .slot-template-extended .reels-container::before,
        .slot-template-extended .reels-container::after {
            content: '';
            position: absolute;
            left: 10%;
            right: 10%;
            height: 2px;
            background: linear-gradient(90deg,
                transparent, rgba(var(--accent-rgb, 251,191,36), 0.4), transparent);
            z-index: 2;
            pointer-events: none;
        }
        .slot-template-extended .reels-container::before { top: 0; }
        .slot-template-extended .reels-container::after { bottom: 0; }
        .slot-template-extended .reel-column:not(:last-child)::after {
            width: 1px;
            background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb, 251,191,36), 0.08), transparent) !important;
        }
        .slot-template-extended .reel-cell {
            border: none !important;
            background: transparent !important;
        }

        /* ── Template 4: SCATTER (6x5) — Tumble/cascade open layout ── */
        .slot-template-scatter .reels-container {
            border: none;
            border-radius: 12px;
            box-shadow: 0 0 50px rgba(var(--accent-rgb, 251,191,36), 0.12),
                        0 0 100px rgba(var(--accent-rgb, 251,191,36), 0.04);
            padding: 6px;
        }
        .slot-template-scatter .reel-column:not(:last-child)::after {
            display: none !important;
        }
        .slot-template-scatter .reel-cell {
            border: none !important;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.025) !important;
            margin: 1px;
        }
        .slot-template-scatter .reels {
            gap: 3px !important;
        }
        .slot-template-scatter .reel-column {
            gap: 0 !important;
        }

        /* ── Template 5: GRID (5x5/7x7) — Cluster candy-crush style ── */
        .slot-template-grid .reels-container {
            border: 3px solid rgba(var(--accent-rgb, 251,191,36), 0.3);
            border-radius: 12px;
            padding: 4px;
            background: rgba(0, 0, 0, 0.85) !important;
        }
        .slot-template-grid .reel-column:not(:last-child)::after {
            display: none !important;
        }
        .slot-template-grid .reel-cell {
            border: 1px solid rgba(var(--accent-rgb, 251,191,36), 0.12) !important;
            border-radius: 3px;
            background: rgba(var(--accent-rgb, 251,191,36), 0.03) !important;
        }
        .slot-template-grid .reels {
            gap: 2px !important;
        }

        /* ═══ END SLOT UI TEMPLATES ═══ */

        /* ═══════════════════════════════════════════════════════════
           PER-PROVIDER CHROME STYLES  —  slot-chrome-{provider}
           Applied to #slotModal via JS based on GAME_CHROME_STYLES
           8 fictional provider brands — each a distinct visual identity:
             novaspin     — NovaSpin Studios     (sci-fi electric cyan)
             celestial    — Celestial Plays      (Greek gold columns)
             ironreel     — IronReel Ent.        (earthy copper/stone)
             goldenedge   — GoldenEdge Gaming    (candy pastel pink)
             vaultx       — VaultX Gaming        (dark steel heist)
             solstice     — SolsticeFX           (red lacquer, gold filigree)
             phantomworks — PhantomWorks         (gothic purple, blood-red)
             arcadeforge  — ArcadeForge          (chrome ring, retro pub)
        ═══════════════════════════════════════════════════════════ */

        /* Shared chrome overlay setup */
        [class*="slot-chrome-"] .slot-reel-area {
            position: relative;
        }
        [class*="slot-chrome-"] .slot-reel-area::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 8;
            background-repeat: no-repeat, no-repeat, no-repeat, no-repeat,
                               repeat-x,   repeat-x;
            background-size:
                72px 72px, 72px 72px, 72px 72px, 72px 72px,
                auto 44px, auto 44px;
            background-position:
                top 0 left 0,
                top 0 right 0,
                bottom 0 left 0,
                bottom 0 right 0,
                top 0 left 0,
                bottom 0 right 0;
        }
        /* Shared ambient overlay for provider animations */
        [class*="slot-chrome-"] .slot-reel-area::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 2;
        }

        /* Per-provider reel area atmospheric gradients (behind the reels) */
        .slot-chrome-novaspin .slot-reel-area {
            background: radial-gradient(ellipse at 50% 50%, rgba(0,60,120,0.25) 0%, rgba(0,6,16,0.4) 70%);
        }
        .slot-chrome-celestial .slot-reel-area {
            background: radial-gradient(ellipse at 50% 30%, rgba(42,26,110,0.35) 0%, rgba(6,10,30,0.4) 70%);
        }
        .slot-chrome-ironreel .slot-reel-area {
            background: radial-gradient(ellipse at 50% 70%, rgba(58,30,8,0.3) 0%, rgba(10,6,2,0.4) 70%);
        }
        .slot-chrome-goldenedge .slot-reel-area {
            background: radial-gradient(ellipse at 50% 50%, rgba(60,0,30,0.3) 0%, rgba(14,4,10,0.4) 70%);
        }
        .slot-chrome-vaultx .slot-reel-area {
            background: radial-gradient(ellipse at 50% 50%, rgba(30,20,4,0.35) 0%, rgba(8,6,2,0.4) 70%);
        }
        .slot-chrome-solstice .slot-reel-area {
            background: radial-gradient(ellipse at 50% 50%, rgba(60,0,10,0.3) 0%, rgba(10,2,4,0.4) 70%);
        }
        .slot-chrome-phantomworks .slot-reel-area {
            background: radial-gradient(ellipse at 50% 100%, rgba(30,0,50,0.4) 0%, rgba(2,0,6,0.4) 70%);
        }
        .slot-chrome-arcadeforge .slot-reel-area {
            background: radial-gradient(ellipse at 50% 50%, rgba(20,0,6,0.35) 0%, rgba(4,0,2,0.4) 70%);
        }

        /* ── 1. NOVASPIN STUDIOS  (Starburst / Reactoonz / Neon family) ── */
        @keyframes novaSpinPulse {
            0%, 100% { opacity: 0.04; }
            50%       { opacity: 0.12; }
        }
        .slot-chrome-novaspin {
            --slot-spin-bg: radial-gradient(circle at 40% 35%, #00f5ff, #00a8e8 40%, #0066cc 100%);
            --slot-spin-border: rgba(0,212,255,0.9);
            --slot-spin-ring: rgba(0,212,255,0.2);
            --slot-spin-glow: 0 0 25px rgba(0,212,255,0.5), 0 2px 12px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.2);
            --slot-panel-bg: rgba(0,20,40,0.6);
            --slot-panel-border: rgba(0,212,255,0.15);
            --slot-panel-shadow: 0 0 8px rgba(0,212,255,0.1);
            --slot-ui-radius: 4px;
            --slot-stripe-angle: 90deg;
            --slot-chrome-blend: 0.08;
        }
        .slot-chrome-novaspin .reels-container {
            border: 2px solid #00d4ff;
            border-radius: 6px;
            box-shadow:
                0 0 0 1px rgba(0,212,255,0.2),
                0 0 30px rgba(0,212,255,0.25),
                0 0 60px rgba(0,128,255,0.1),
                inset 0 0 20px rgba(0,20,40,0.5);
        }
        .slot-chrome-novaspin .reel-column:not(:last-child)::after {
            background: linear-gradient(180deg,
                transparent 5%, rgba(0,212,255,0.2) 30%,
                rgba(0,212,255,0.2) 70%, transparent 95%) !important;
            width: 1px !important;
        }
        .slot-chrome-novaspin .reel-cell {
            border: 1px solid rgba(0,212,255,0.06) !important;
            background: rgba(0,8,20,0.4) !important;
        }
        .slot-chrome-novaspin .slot-top-bar {
            background: linear-gradient(90deg, rgba(0,12,28,0.98), rgba(0,6,16,0.98)) !important;
            border-bottom: 2px solid #00d4ff !important;
            box-shadow: 0 0 20px rgba(0,212,255,0.2) !important;
        }
        .slot-chrome-novaspin .slot-bottom-bar {
            border-top: 2px solid #00d4ff !important;
            box-shadow: 0 0 20px rgba(0,212,255,0.15) !important;
        }
        .slot-chrome-novaspin .slot-bar-label { color: rgba(0,212,255,0.5) !important; }
        .slot-chrome-novaspin .slot-bar-value { color: #00e5ff !important; }
        .slot-chrome-novaspin .slot-provider { color: #00d4ff !important; }
        .slot-chrome-novaspin .slot-reel-area::before {
            background: repeating-linear-gradient(
                0deg,
                transparent 0px,
                transparent 2px,
                rgba(0,212,255,0.012) 2px,
                rgba(0,212,255,0.012) 4px
            );
            animation: novaSpinPulse 3s ease-in-out infinite;
        }
        .slot-chrome-novaspin .slot-reel-area::after {
            background-image:
                url('assets/chrome/neon/corner_tl.png'),
                url('assets/chrome/neon/corner_tr.png'),
                url('assets/chrome/neon/corner_bl.png'),
                url('assets/chrome/neon/corner_br.png'),
                url('assets/chrome/neon/frame_top.png'),
                url('assets/chrome/neon/frame_bot.png');
        }

        /* ── 2. CELESTIAL PLAYS  (Gates of Olympus / Crown family) ── */
        @keyframes celestialFloat {
            0%, 100% { opacity: 0.05; }
            50%       { opacity: 0.13; }
        }
        .slot-chrome-celestial {
            --slot-spin-bg: radial-gradient(circle at 40% 35%, #ffe566, #f5c842 40%, #c8960c 100%);
            --slot-spin-border: rgba(245,200,66,0.9);
            --slot-spin-ring: rgba(245,200,66,0.2);
            --slot-spin-glow: 0 0 25px rgba(245,200,66,0.4), 0 2px 12px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.3);
            --slot-panel-bg: rgba(42,26,110,0.35);
            --slot-panel-border: rgba(245,200,66,0.15);
            --slot-panel-shadow: 0 0 8px rgba(245,200,66,0.1);
            --slot-ui-radius: 6px;
            --slot-stripe-angle: 45deg;
            --slot-chrome-blend: 0.12;
        }
        .slot-chrome-celestial .reels-container {
            border: 4px solid #f5c842;
            border-radius: 6px;
            box-shadow:
                0 0 0 1px rgba(245,200,66,0.3),
                0 0 40px rgba(245,200,66,0.25),
                inset 0 0 20px rgba(102,126,234,0.08);
        }
        .slot-chrome-celestial .reel-column:not(:last-child)::after {
            background: linear-gradient(180deg,
                transparent 5%, rgba(245,200,66,0.35) 30%,
                rgba(245,200,66,0.35) 70%, transparent 95%) !important;
            width: 2px !important;
        }
        .slot-chrome-celestial .reel-cell {
            border: 1px solid rgba(245,200,66,0.12) !important;
            background: rgba(42,26,110,0.3) !important;
        }
        .slot-chrome-celestial .slot-top-bar {
            background: linear-gradient(90deg, rgba(42,26,110,0.85), rgba(15,26,61,0.85)) !important;
            border-bottom: 3px solid #f5c842 !important;
        }
        .slot-chrome-celestial .slot-bottom-bar {
            border-top: 3px solid #f5c842 !important;
        }
        .slot-chrome-celestial .slot-bar-label { color: rgba(245,200,66,0.5) !important; }
        .slot-chrome-celestial .slot-bar-value { color: #ffe566 !important; }
        .slot-chrome-celestial .slot-provider { color: #f5c842 !important; }
        .slot-chrome-celestial .slot-reel-area::before {
            background: radial-gradient(ellipse at 50% 110%, rgba(245,200,66,0.08) 0%, transparent 60%);
            animation: celestialFloat 4s ease-in-out infinite;
        }
        .slot-chrome-celestial .slot-reel-area::after {
            background-image:
                url('assets/chrome/olympus/corner_tl.png'),
                url('assets/chrome/olympus/corner_tr.png'),
                url('assets/chrome/olympus/corner_bl.png'),
                url('assets/chrome/olympus/corner_br.png'),
                url('assets/chrome/olympus/frame_top.png'),
                url('assets/chrome/olympus/frame_bot.png');
        }

        /* ── 3. IRONREEL ENTERTAINMENT  (Wolf Gold / Buffalo / Rhino family) ── */
        @keyframes ironreelGrain {
            0%, 100% { opacity: 0.03; }
            33%       { opacity: 0.07; }
            66%       { opacity: 0.04; }
        }
        .slot-chrome-ironreel {
            --slot-spin-bg: radial-gradient(circle at 40% 35%, #d97706, #b45309 40%, #78350f 100%);
            --slot-spin-border: rgba(180,83,9,0.9);
            --slot-spin-ring: rgba(180,83,9,0.2);
            --slot-spin-glow: 0 0 20px rgba(180,83,9,0.35), 0 2px 12px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,220,150,0.15);
            --slot-panel-bg: rgba(40,22,8,0.5);
            --slot-panel-border: rgba(139,115,85,0.2);
            --slot-panel-shadow: 0 0 6px rgba(139,115,85,0.08);
            --slot-ui-radius: 8px;
            --slot-stripe-angle: 35deg;
            --slot-chrome-blend: 0.18;
        }
        .slot-chrome-ironreel .reels-container {
            border: 4px solid #8b7355;
            border-radius: 8px;
            box-shadow:
                0 0 0 2px #4a3728,
                0 0 30px rgba(139,115,85,0.2),
                inset 0 2px 8px rgba(0,0,0,0.5);
        }
        .slot-chrome-ironreel .reel-column:not(:last-child)::after {
            background: linear-gradient(180deg,
                transparent, rgba(184,115,51,0.25), transparent) !important;
            width: 2px !important;
        }
        .slot-chrome-ironreel .reel-cell {
            border: 1px solid rgba(139,115,85,0.15) !important;
            background: transparent !important;
        }
        .slot-chrome-ironreel .slot-top-bar {
            background: linear-gradient(90deg, rgba(58,40,16,0.9), rgba(26,18,8,0.9)) !important;
            border-bottom: 3px solid #8b7355 !important;
        }
        .slot-chrome-ironreel .slot-bottom-bar {
            border-top: 3px solid #8b7355 !important;
        }
        .slot-chrome-ironreel .slot-bar-label { color: rgba(139,115,85,0.6) !important; }
        .slot-chrome-ironreel .slot-bar-value { color: #d4a96a !important; }
        .slot-chrome-ironreel .slot-provider { color: #b45309 !important; }
        .slot-chrome-ironreel .slot-reel-area::before {
            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
            background-size: 200px 200px;
            animation: ironreelGrain 0.8s steps(1) infinite;
        }
        .slot-chrome-ironreel .slot-reel-area::after {
            background-image:
                url('assets/chrome/wild/corner_tl.png'),
                url('assets/chrome/wild/corner_tr.png'),
                url('assets/chrome/wild/corner_bl.png'),
                url('assets/chrome/wild/corner_br.png'),
                url('assets/chrome/wild/frame_top.png'),
                url('assets/chrome/wild/frame_bot.png');
        }

        /* ── 4. GOLDENEDGE GAMING  (Sugar Rush / Sweet Bonanza / Candy family) ── */
        @keyframes goldenEdgePop {
            0%, 100% {
                box-shadow: 0 0 0 3px #ff6fd8, 0 0 0 6px #f7a531,
                            0 0 40px rgba(255,111,216,0.3), 0 0 80px rgba(247,165,49,0.15);
            }
            50% {
                box-shadow: 0 0 0 3px #f7a531, 0 0 0 6px #ff6fd8,
                            0 0 60px rgba(255,111,216,0.5), 0 0 100px rgba(247,165,49,0.2);
            }
        }
        .slot-chrome-goldenedge {
            --slot-spin-bg: radial-gradient(circle at 40% 35%, #ff8fe0, #ff6fd8 40%, #e040a8 100%);
            --slot-spin-border: rgba(255,111,216,0.9);
            --slot-spin-ring: rgba(255,111,216,0.2);
            --slot-spin-glow: 0 0 25px rgba(255,111,216,0.5), 0 2px 12px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.3);
            --slot-panel-bg: rgba(255,111,216,0.06);
            --slot-panel-border: rgba(255,111,216,0.15);
            --slot-panel-shadow: 0 0 8px rgba(255,111,216,0.08);
            --slot-ui-radius: 12px;
            --slot-stripe-angle: 30deg;
            --slot-chrome-blend: 0.15;
        }
        .slot-chrome-goldenedge .reels-container {
            border: 3px solid transparent;
            border-radius: 20px;
            animation: goldenEdgePop 3s ease-in-out infinite;
            background: rgba(20,5,15,0.85) !important;
        }
        .slot-chrome-goldenedge .reel-cell {
            border-radius: 10px !important;
            border: 2px solid rgba(255,111,216,0.12) !important;
            background: rgba(255,111,216,0.03) !important;
        }
        .slot-chrome-goldenedge .slot-top-bar {
            background: linear-gradient(90deg, rgba(255,111,216,0.12), rgba(247,165,49,0.12)) !important;
            border-bottom: 2px solid rgba(255,111,216,0.5) !important;
        }
        .slot-chrome-goldenedge .slot-bottom-bar {
            background: linear-gradient(90deg, rgba(247,165,49,0.08), rgba(255,111,216,0.08)) !important;
            border-top: 2px solid rgba(247,165,49,0.4) !important;
        }
        .slot-chrome-goldenedge .slot-bar-label { color: rgba(255,111,216,0.6) !important; }
        .slot-chrome-goldenedge .slot-bar-value { color: #ffb3e8 !important; }
        .slot-chrome-goldenedge .slot-provider { color: #ff6fd8 !important; }
        .slot-chrome-goldenedge .slot-reel-area::before {
            background:
                radial-gradient(ellipse at 50% 0%, rgba(255,111,216,0.06) 0%, transparent 60%),
                radial-gradient(ellipse at 50% 100%, rgba(247,165,49,0.06) 0%, transparent 60%);
        }
        .slot-chrome-goldenedge .slot-reel-area::after {
            background-image:
                url('assets/chrome/candy/corner_tl.png'),
                url('assets/chrome/candy/corner_tr.png'),
                url('assets/chrome/candy/corner_bl.png'),
                url('assets/chrome/candy/corner_br.png'),
                url('assets/chrome/candy/frame_top.png'),
                url('assets/chrome/candy/frame_bot.png');
        }

        /* ── 5. VAULTX GAMING  (Tombstone / Wanted / Money Train / Big Bass family) ── */
        @keyframes vaultxHum {
            0%, 19%, 22%, 79%, 82%, 100% { opacity: 0.0; }
            20%, 21%                      { opacity: 0.06; }
            80%, 81%                      { opacity: 0.04; }
        }
        .slot-chrome-vaultx {
            --slot-spin-bg: radial-gradient(circle at 40% 35%, #9ca3af, #6b7280 40%, #374151 100%);
            --slot-spin-border: rgba(107,114,128,0.9);
            --slot-spin-ring: rgba(139,105,20,0.3);
            --slot-spin-glow: 0 0 15px rgba(139,105,20,0.3), 0 2px 12px rgba(0,0,0,0.6), inset 0 2px 4px rgba(255,255,255,0.1);
            --slot-panel-bg: rgba(20,14,4,0.6);
            --slot-panel-border: rgba(107,114,128,0.2);
            --slot-panel-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
            --slot-ui-radius: 4px;
            --slot-stripe-angle: 45deg;
            --slot-chrome-blend: 0.25;
        }
        .slot-chrome-vaultx .reels-container {
            border: 5px solid #6b6b6b;
            border-radius: 4px;
            box-shadow:
                0 0 0 2px #2d2d2d,
                0 0 0 4px #8b6914,
                0 0 30px rgba(0,0,0,0.5),
                inset 0 2px 10px rgba(0,0,0,0.6);
        }
        .slot-chrome-vaultx .reel-column:not(:last-child)::after {
            background: linear-gradient(180deg,
                transparent, rgba(139,105,20,0.3), transparent) !important;
            width: 3px !important;
        }
        .slot-chrome-vaultx .reel-cell {
            border: 1px solid rgba(107,114,128,0.1) !important;
            background: rgba(10,8,4,0.8) !important;
        }
        .slot-chrome-vaultx .slot-top-bar {
            background: linear-gradient(90deg, rgba(26,16,6,0.98), rgba(14,10,4,0.98)) !important;
            border-bottom: 4px solid #6b6b6b !important;
            box-shadow: inset 0 -2px 4px rgba(0,0,0,0.5) !important;
        }
        .slot-chrome-vaultx .slot-bottom-bar {
            border-top: 4px solid #6b6b6b !important;
        }
        .slot-chrome-vaultx .slot-bar-label { color: rgba(107,114,128,0.7) !important; }
        .slot-chrome-vaultx .slot-bar-value { color: #9ca3af !important; }
        .slot-chrome-vaultx .slot-provider { color: #8b6914 !important; }
        .slot-chrome-vaultx .slot-reel-area::before {
            background: repeating-linear-gradient(
                90deg,
                transparent 0px,
                transparent 30px,
                rgba(0,0,0,0.08) 30px,
                rgba(0,0,0,0.08) 31px
            );
            animation: vaultxHum 6s ease-in-out infinite;
        }
        .slot-chrome-vaultx .slot-reel-area::after {
            background-image:
                url('assets/chrome/western/corner_tl.png'),
                url('assets/chrome/western/corner_tr.png'),
                url('assets/chrome/western/corner_bl.png'),
                url('assets/chrome/western/corner_br.png'),
                url('assets/chrome/western/frame_top.png'),
                url('assets/chrome/western/frame_bot.png');
        }

        /* ── 6. SOLSTICEFX  (5 Lions / Dragon / Bamboo / Oriental family) ── */
        @keyframes solsticeGlow {
            0%, 100% { opacity: 0.06; }
            50%       { opacity: 0.14; }
        }
        .slot-chrome-solstice {
            --slot-spin-bg: radial-gradient(circle at 40% 35%, #ffd700, #f5b800 40%, #c8960c 100%);
            --slot-spin-border: rgba(255,215,0,0.9);
            --slot-spin-ring: rgba(255,215,0,0.2);
            --slot-spin-glow: 0 0 25px rgba(255,215,0,0.4), 0 2px 12px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.3);
            --slot-panel-bg: rgba(90,0,20,0.35);
            --slot-panel-border: rgba(255,215,0,0.15);
            --slot-panel-shadow: 0 0 6px rgba(255,215,0,0.08);
            --slot-ui-radius: 6px;
            --slot-stripe-angle: 30deg;
            --slot-chrome-blend: 0.12;
        }
        .slot-chrome-solstice .reels-container {
            border: 4px solid #c41e3a;
            border-radius: 6px;
            box-shadow:
                0 0 0 2px rgba(196,30,58,0.4),
                0 0 0 4px #ffd700,
                0 0 40px rgba(196,30,58,0.25),
                inset 0 0 20px rgba(0,0,0,0.5);
        }
        .slot-chrome-solstice .reel-column:not(:last-child)::after {
            background: linear-gradient(180deg,
                transparent, rgba(255,215,0,0.4), transparent) !important;
            width: 2px !important;
        }
        .slot-chrome-solstice .reel-cell {
            border: 1px solid rgba(255,215,0,0.1) !important;
            background: rgba(20,6,10,0.6) !important;
        }
        .slot-chrome-solstice .slot-top-bar {
            background: linear-gradient(90deg, rgba(90,0,20,0.95), rgba(50,0,10,0.95)) !important;
            border-bottom: 3px solid #ffd700 !important;
        }
        .slot-chrome-solstice .slot-bottom-bar {
            border-top: 3px solid #ffd700 !important;
        }
        .slot-chrome-solstice .slot-bar-label { color: rgba(255,215,0,0.5) !important; }
        .slot-chrome-solstice .slot-bar-value { color: #ffd700 !important; }
        .slot-chrome-solstice .slot-provider { color: #c41e3a !important; }
        .slot-chrome-solstice .slot-reel-area::before {
            background:
                radial-gradient(ellipse at 0% 50%, rgba(196,30,58,0.08) 0%, transparent 40%),
                radial-gradient(ellipse at 100% 50%, rgba(196,30,58,0.08) 0%, transparent 40%);
            animation: solsticeGlow 3s ease-in-out infinite;
        }
        .slot-chrome-solstice .slot-reel-area::after {
            background-image:
                url('assets/chrome/oriental/corner_tl.png'),
                url('assets/chrome/oriental/corner_tr.png'),
                url('assets/chrome/oriental/corner_bl.png'),
                url('assets/chrome/oriental/corner_br.png'),
                url('assets/chrome/oriental/frame_top.png'),
                url('assets/chrome/oriental/frame_bot.png');
        }

        /* ── 7. PHANTOMWORKS  (Dark / Gothic / Egyptian family) ── */
        @keyframes phantomMist {
            0%, 100% { opacity: 0.0; }
            30%       { opacity: 0.10; }
            60%       { opacity: 0.06; }
        }
        .slot-chrome-phantomworks {
            --slot-spin-bg: radial-gradient(circle at 40% 35%, #9333ea, #7c3aed 40%, #4c1d95 100%);
            --slot-spin-border: rgba(107,33,168,0.9);
            --slot-spin-ring: rgba(107,33,168,0.25);
            --slot-spin-glow: 0 0 25px rgba(107,33,168,0.5), 0 2px 12px rgba(0,0,0,0.6), inset 0 2px 4px rgba(200,150,255,0.15);
            --slot-panel-bg: rgba(20,0,30,0.5);
            --slot-panel-border: rgba(107,33,168,0.15);
            --slot-panel-shadow: 0 0 8px rgba(107,33,168,0.1);
            --slot-ui-radius: 4px;
            --slot-stripe-angle: 135deg;
            --slot-chrome-blend: 0.1;
        }
        .slot-chrome-phantomworks .reels-container {
            border: 4px solid #6b21a8;
            border-radius: 8px;
            box-shadow:
                0 0 0 2px rgba(107,33,168,0.4),
                0 0 0 4px #991b1b,
                0 0 50px rgba(107,33,168,0.3),
                inset 0 0 30px rgba(0,0,0,0.7);
        }
        .slot-chrome-phantomworks .reel-column:not(:last-child)::after {
            background: linear-gradient(180deg,
                transparent, rgba(107,33,168,0.3), transparent) !important;
            width: 1px !important;
        }
        .slot-chrome-phantomworks .reel-cell {
            border: 1px solid rgba(107,33,168,0.1) !important;
            background: rgba(5,0,8,0.8) !important;
        }
        .slot-chrome-phantomworks .slot-top-bar {
            background: linear-gradient(90deg, rgba(20,0,30,0.98), rgba(8,0,12,0.98)) !important;
            border-bottom: 3px solid #991b1b !important;
            box-shadow: 0 0 15px rgba(107,33,168,0.2) !important;
        }
        .slot-chrome-phantomworks .slot-bottom-bar {
            border-top: 3px solid #6b21a8 !important;
            box-shadow: 0 0 15px rgba(107,33,168,0.15) !important;
        }
        .slot-chrome-phantomworks .slot-bar-label { color: rgba(107,33,168,0.7) !important; }
        .slot-chrome-phantomworks .slot-bar-value { color: #c084fc !important; }
        .slot-chrome-phantomworks .slot-provider { color: #9333ea !important; }
        .slot-chrome-phantomworks .slot-reel-area::before {
            background:
                radial-gradient(ellipse at 50% 100%, rgba(107,33,168,0.12) 0%, transparent 70%),
                radial-gradient(ellipse at 50% 0%, rgba(153,27,27,0.08) 0%, transparent 50%);
            animation: phantomMist 5s ease-in-out infinite;
        }
        .slot-chrome-phantomworks .slot-reel-area::after {
            background-image:
                url('assets/chrome/dark/corner_tl.png'),
                url('assets/chrome/dark/corner_tr.png'),
                url('assets/chrome/dark/corner_bl.png'),
                url('assets/chrome/dark/corner_br.png'),
                url('assets/chrome/dark/frame_top.png'),
                url('assets/chrome/dark/frame_bot.png');
        }

        /* ── 8. ARCADEFORGE  (Fire Joker / Mega Joker / Classic family) ── */
        @keyframes arcadeBlink {
            0%, 88%, 92%, 100% { opacity: 1;    }
            89%, 91%           { opacity: 0.85; }
        }
        .slot-chrome-arcadeforge {
            --slot-spin-bg: radial-gradient(circle at 40% 35%, #f0f0f0, #d0d0d0 40%, #888 100%);
            --slot-spin-border: rgba(208,208,208,0.9);
            --slot-spin-ring: rgba(255,8,68,0.25);
            --slot-spin-glow: 0 0 20px rgba(255,8,68,0.25), 0 2px 12px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.4);
            --slot-panel-bg: rgba(10,10,10,0.7);
            --slot-panel-border: rgba(208,208,208,0.12);
            --slot-panel-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
            --slot-ui-radius: 12px;
            --slot-stripe-angle: 35deg;
            --slot-chrome-blend: 0.22;
        }
        .slot-chrome-arcadeforge .reels-container {
            border: 5px solid #d0d0d0;
            border-radius: 12px;
            box-shadow:
                0 0 0 2px #888,
                0 0 0 5px #ff0844,
                0 0 30px rgba(255,8,68,0.2),
                inset 0 2px 8px rgba(0,0,0,0.5);
        }
        .slot-chrome-arcadeforge .reel-column:not(:last-child)::after {
            background: linear-gradient(180deg,
                transparent 5%, rgba(208,208,208,0.3) 30%,
                rgba(208,208,208,0.3) 70%, transparent 95%) !important;
            width: 3px !important;
        }
        .slot-chrome-arcadeforge .reel-cell {
            border: 1px solid rgba(208,208,208,0.1) !important;
            background: rgba(10,10,10,0.85) !important;
            border-radius: 4px !important;
        }
        .slot-chrome-arcadeforge .slot-top-bar {
            background: linear-gradient(90deg, #1a0008, #0a0004) !important;
            border-bottom: 3px solid #ff0844 !important;
            box-shadow: 0 0 20px rgba(255,8,68,0.2) !important;
        }
        .slot-chrome-arcadeforge .slot-bottom-bar {
            border-top: 3px solid #d0d0d0 !important;
        }
        .slot-chrome-arcadeforge .slot-bar-label { color: rgba(208,208,208,0.5) !important; }
        .slot-chrome-arcadeforge .slot-bar-value { color: #f0f0f0 !important; }
        .slot-chrome-arcadeforge .slot-provider { color: #ff0844 !important; }
        .slot-chrome-arcadeforge .slot-reel-area::before {
            background: repeating-linear-gradient(
                0deg,
                transparent 0px,
                transparent 3px,
                rgba(0,0,0,0.08) 3px,
                rgba(0,0,0,0.08) 4px
            );
            animation: arcadeBlink 8s ease-in-out infinite;
        }
        .slot-chrome-arcadeforge .slot-reel-area::after {
            background-image:
                url('assets/chrome/joker/corner_tl.png'),
                url('assets/chrome/joker/corner_tr.png'),
                url('assets/chrome/joker/corner_bl.png'),
                url('assets/chrome/joker/corner_br.png'),
                url('assets/chrome/joker/frame_top.png'),
                url('assets/chrome/joker/frame_bot.png');
        }

        /* ═══ END PER-PROVIDER CHROME STYLES ═══ */

        /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
           ENHANCED CHROME ANIMATIONS v2 — busier, more distinctive
           Each provider gets a signature animated overlay that
           overrides the subtler v1 pulses above.
        ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

        /* 1. NOVASPIN — Electric scan beam sweeping top → bottom */
        @keyframes novaBeam {
            0%   { background-position: 50% -100%; }
            100% { background-position: 50%  300%; }
        }
        @keyframes novaContainerGlow {
            0%, 100% {
                box-shadow: 0 0 0 1px rgba(0,212,255,0.2),
                            0 0 30px rgba(0,212,255,0.25),
                            0 0 60px rgba(0,128,255,0.10),
                            inset 0 0 20px rgba(0,20,40,0.5);
            }
            50% {
                box-shadow: 0 0 0 1px rgba(0,212,255,0.55),
                            0 0 55px rgba(0,212,255,0.50),
                            0 0 110px rgba(0,128,255,0.22),
                            inset 0 0 35px rgba(0,20,60,0.5);
            }
        }
        .slot-chrome-novaspin .slot-reel-area::before {
            background: linear-gradient(0deg,
                transparent 38%,
                rgba(0,212,255,0.04) 42%, rgba(0,212,255,0.18) 49%,
                rgba(0,255,255,0.24) 50%,
                rgba(0,212,255,0.18) 51%, rgba(0,212,255,0.04) 58%,
                transparent 62%
            );
            background-size: 100% 400%;
            animation: novaBeam 2.4s linear infinite;
        }
        .slot-chrome-novaspin .reels-container {
            animation: novaContainerGlow 2s ease-in-out infinite !important;
        }

        /* 2. CELESTIAL — Rising gold light column from base */
        @keyframes celestialRise {
            0%   { background-position: 0% 100%, 50% 100%; }
            50%  { background-position: 0% 0%,   50% 0%;   }
            100% { background-position: 0% 100%, 50% 100%; }
        }
        @keyframes celestialContainerGlow {
            0%, 100% {
                box-shadow: 0 0 0 1px rgba(245,200,66,0.30),
                            0 0 40px rgba(245,200,66,0.25),
                            inset 0 0 20px rgba(102,126,234,0.08);
            }
            50% {
                box-shadow: 0 0 0 2px rgba(245,200,66,0.65),
                            0 0 70px rgba(245,200,66,0.45),
                            inset 0 0 35px rgba(140,110,234,0.15);
            }
        }
        .slot-chrome-celestial .slot-reel-area::before {
            background:
                radial-gradient(ellipse 60% 40% at 50% 50%, rgba(245,200,66,0.09) 0%, transparent 70%),
                linear-gradient(0deg,
                    rgba(245,200,66,0.00) 0%,
                    rgba(245,200,66,0.12) 30%,
                    rgba(255,245,180,0.06) 50%,
                    rgba(245,200,66,0.00) 100%
                );
            background-size: 100% 100%, 100% 200%;
            animation: celestialRise 4s ease-in-out infinite;
        }
        .slot-chrome-celestial .reels-container {
            animation: celestialContainerGlow 3s ease-in-out infinite !important;
        }

        /* 3. IRONREEL — Animated film grain with earth-tone vignette */
        @keyframes ironGrain {
            0%   { opacity: 0.04; background-position:   0px   0px, 0 0; }
            25%  { opacity: 0.09; background-position:  50px  30px, 0 0; }
            50%  { opacity: 0.06; background-position:  20px  60px, 0 0; }
            75%  { opacity: 0.10; background-position:  80px  10px, 0 0; }
            100% { opacity: 0.04; background-position:   0px   0px, 0 0; }
        }
        .slot-chrome-ironreel .slot-reel-area::before {
            background:
                url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E"),
                radial-gradient(ellipse 80% 50% at 50% 50%, transparent 30%, rgba(30,15,4,0.35) 100%);
            background-size: 150px 150px, 100% 100%;
            animation: ironGrain 0.5s steps(4) infinite;
        }

        /* 4. GOLDENEDGE — Rotating pastel rainbow shimmer */
        @keyframes goldenShimmer {
            0%   { background-position: 0%   50%; }
            50%  { background-position: 100% 50%; }
            100% { background-position: 0%   50%; }
        }
        .slot-chrome-goldenedge .slot-reel-area::before {
            background: linear-gradient(135deg,
                rgba(255,111,216,0.06) 0%,
                rgba(247,165,49, 0.10) 20%,
                rgba(255,255,140,0.08) 40%,
                rgba(120,255,180,0.06) 60%,
                rgba(120,180,255,0.09) 80%,
                rgba(255,111,216,0.06) 100%
            );
            background-size: 300% 300%;
            animation: goldenShimmer 5s ease-in-out infinite;
        }

        /* 5. VAULTX — Surveillance scan bar + cold vignette */
        @keyframes vaultSurveillanceBar {
            0%   { background-position: 0 -50%,  0 0, 0 0; }
            100% { background-position: 0 150%,  0 0, 0 0; }
        }
        .slot-chrome-vaultx .slot-reel-area::before {
            background:
                linear-gradient(0deg,
                    transparent 44%,
                    rgba(0,255,0,0.015) 47%, rgba(0,255,0,0.04) 50%,
                    rgba(0,255,0,0.015) 53%, transparent 56%
                ),
                repeating-linear-gradient(90deg,
                    transparent 0px, transparent 29px,
                    rgba(0,0,0,0.10) 29px, rgba(0,0,0,0.10) 31px
                ),
                radial-gradient(ellipse 90% 80% at 50% 50%, transparent 50%, rgba(0,0,0,0.40) 100%);
            background-size: 100% 300%, 30px 100%, 100% 100%;
            animation: vaultSurveillanceBar 4.5s linear infinite;
        }

        /* 6. SOLSTICE — Ember glow rising from base, side bleed */
        @keyframes solsticeEmber {
            0%   { background-position: 0% 0%, 100% 0%, 50% 100%; opacity: 0.80; }
            50%  { background-position: 8% 30%, 92% 20%, 50% 0%;   opacity: 1.00; }
            100% { background-position: 0% 0%, 100% 0%, 50% 100%; opacity: 0.80; }
        }
        @keyframes solsticeContainerGlow {
            0%, 100% {
                box-shadow: 0 0 0 2px rgba(196,30,58,0.4),
                            0 0 0 4px #ffd700,
                            0 0 40px rgba(196,30,58,0.25),
                            inset 0 0 20px rgba(0,0,0,0.5);
            }
            50% {
                box-shadow: 0 0 0 2px rgba(196,30,58,0.75),
                            0 0 0 4px #ffd700,
                            0 0 72px rgba(196,30,58,0.48),
                            inset 0 0 30px rgba(0,0,0,0.5);
            }
        }
        .slot-chrome-solstice .slot-reel-area::before {
            background:
                radial-gradient(ellipse 50% 60% at 0%   50%, rgba(196,30,58,0.09) 0%, transparent 65%),
                radial-gradient(ellipse 50% 60% at 100% 50%, rgba(196,30,58,0.09) 0%, transparent 65%),
                radial-gradient(ellipse 70% 40% at 50% 100%, rgba(255,215,0,0.12) 0%, transparent 60%);
            background-size: 200% 200%, 200% 200%, 100% 100%;
            animation: solsticeEmber 3.5s ease-in-out infinite;
        }
        .slot-chrome-solstice .reels-container {
            animation: solsticeContainerGlow 2.5s ease-in-out infinite !important;
        }

        /* 7. PHANTOMWORKS — Drifting purple-crimson fog from sides */
        @keyframes phantomFog {
            0%   { background-position:   0% 0%,  100% 100%; opacity: 0.55; }
            33%  { background-position:  20% 40%,  80%  60%; opacity: 1.00; }
            66%  { background-position:  40% 80%,  60%  20%; opacity: 0.75; }
            100% { background-position:   0% 0%,  100% 100%; opacity: 0.55; }
        }
        @keyframes phantomContainerGlow {
            0%, 100% {
                box-shadow: 0 0 0 2px rgba(107,33,168,0.40),
                            0 0 0 4px #991b1b,
                            0 0 50px rgba(107,33,168,0.30),
                            inset 0 0 30px rgba(0,0,0,0.70);
            }
            50% {
                box-shadow: 0 0 0 2px rgba(107,33,168,0.75),
                            0 0 0 4px #cc2222,
                            0 0 90px rgba(107,33,168,0.55),
                            inset 0 0 45px rgba(30,0,50,0.50);
            }
        }
        .slot-chrome-phantomworks .slot-reel-area::before {
            background:
                radial-gradient(ellipse 45% 65% at 10%  50%, rgba(107,33,168,0.14) 0%, transparent 70%),
                radial-gradient(ellipse 45% 65% at 90%  50%, rgba(153,27,27, 0.12) 0%, transparent 70%),
                radial-gradient(ellipse 80% 40% at 50% 100%, rgba(50,0,80,  0.18) 0%, transparent 60%);
            background-size: 200% 200%, 200% 200%, 100% 100%;
            animation: phantomFog 6s ease-in-out infinite;
        }
        .slot-chrome-phantomworks .reels-container {
            animation: phantomContainerGlow 3s ease-in-out infinite !important;
        }

        /* 8. ARCADEFORGE — CRT scanline sweep + phosphor afterglow */
        @keyframes arcadeScan {
            0%   { background-position: 0 -50%, 0 0; }
            100% { background-position: 0 150%, 0 0; }
        }
        @keyframes arcadeContainerGlow {
            0%, 100% {
                box-shadow: 0 0 0 2px #888,
                            0 0 0 5px #ff0844,
                            0 0 30px rgba(255,8,68,0.20),
                            inset 0 2px 8px rgba(0,0,0,0.50);
            }
            50% {
                box-shadow: 0 0 0 2px #ccc,
                            0 0 0 5px #ff3366,
                            0 0 55px rgba(255,8,68,0.45),
                            inset 0 2px 8px rgba(0,0,0,0.50);
            }
        }
        .slot-chrome-arcadeforge .slot-reel-area::before {
            background:
                linear-gradient(0deg,
                    transparent 44%, rgba(255,8,68,0.05) 47%, rgba(255,8,68,0.12) 50%,
                    rgba(255,8,68,0.05) 53%, transparent 56%
                ),
                repeating-linear-gradient(0deg,
                    transparent 0px, transparent 2px,
                    rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 3px
                );
            background-size: 100% 300%, 100% 3px;
            animation: arcadeScan 1.6s linear infinite;
        }
        .slot-chrome-arcadeforge .reels-container {
            animation: arcadeContainerGlow 1.3s ease-in-out infinite !important;
        }

        /* ━━━ Extra per-provider reel-area gradients (richer atmospheres) ━━━ */
        .slot-chrome-novaspin    .slot-reel-area { background: radial-gradient(ellipse at 50% 50%, rgba(0,40,80,0.30) 0%, rgba(0,4,12,0.50) 100%); }
        .slot-chrome-celestial   .slot-reel-area { background: radial-gradient(ellipse at 50% 30%, rgba(42,20,90,0.40) 0%, rgba(4,6,24,0.55) 100%); }
        .slot-chrome-ironreel    .slot-reel-area { background: radial-gradient(ellipse at 50% 70%, rgba(60,30,6,0.35)  0%, rgba(8,4,0,0.55)  100%); }
        .slot-chrome-goldenedge  .slot-reel-area { background: radial-gradient(ellipse at 50% 50%, rgba(60,0,40,0.35)  0%, rgba(12,2,8,0.55)  100%); }
        .slot-chrome-vaultx      .slot-reel-area { background: radial-gradient(ellipse at 50% 50%, rgba(20,14,2,0.40)  0%, rgba(4,3,0,0.60)  100%); }
        .slot-chrome-solstice    .slot-reel-area { background: radial-gradient(ellipse at 50% 60%, rgba(70,0,12,0.35)  0%, rgba(8,0,2,0.55)  100%); }
        .slot-chrome-phantomworks .slot-reel-area{ background: radial-gradient(ellipse at 50% 100%,rgba(30,0,50,0.45) 0%, rgba(2,0,5,0.60)  100%); }
        .slot-chrome-arcadeforge .slot-reel-area { background: radial-gradient(ellipse at 50% 50%, rgba(20,0,8,0.40)   0%, rgba(3,0,1,0.60)  100%); }

        /* ═══ VIBRANT WIN HIGHLIGHT SYSTEM ═══ */

        .reel-win-glow {
            position: relative;
            outline: none;
            border: 2px solid #34d399 !important;
            box-shadow:
                0 0 12px rgba(16, 185, 129, 0.8),
                0 0 30px rgba(16, 185, 129, 0.5),
                0 0 60px rgba(16, 185, 129, 0.25),
                inset 0 0 20px rgba(16, 185, 129, 0.2) !important;
            animation: reelWinPulse 1s ease-in-out infinite;
            z-index: 5;
            border-radius: 6px;
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(52, 211, 153, 0.08) 100%) !important;
        }

        .reel-win-glow::before {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 8px;
            background: linear-gradient(45deg, #10b981, #34d399, #6ee7b7, #34d399, #10b981);
            background-size: 300% 300%;
            animation: winBorderShift 2s linear infinite;
            z-index: -1;
            opacity: 0.7;
            filter: blur(3px);
        }

        .reel-win-glow::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 6px;
            background: radial-gradient(ellipse at center, rgba(52, 211, 153, 0.2) 0%, transparent 70%);
            animation: winInnerPulse 1.2s ease-in-out infinite alternate;
            pointer-events: none;
        }

        @keyframes reelWinPulse {
            0%, 100% {
                box-shadow: 0 0 10px rgba(16, 185, 129, 0.5), 0 0 25px rgba(16, 185, 129, 0.3), inset 0 0 15px rgba(16, 185, 129, 0.1);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 0 18px rgba(16, 185, 129, 0.9), 0 0 45px rgba(16, 185, 129, 0.5), 0 0 80px rgba(16, 185, 129, 0.2), inset 0 0 25px rgba(16, 185, 129, 0.2);
                transform: scale(1.03);
            }
        }

        @keyframes winBorderShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes winInnerPulse {
            0% { opacity: 0.3; }
            100% { opacity: 0.7; }
        }

        /* ═══ Wild Symbol Glow — Gold Lightning Effect ═══ */
        .reel-wild-glow {
            position: relative;
            outline: none;
            border: 2px solid #fbbf24 !important;
            box-shadow:
                0 0 15px rgba(251, 191, 36, 0.9),
                0 0 35px rgba(251, 191, 36, 0.6),
                0 0 70px rgba(251, 191, 36, 0.3),
                inset 0 0 20px rgba(251, 191, 36, 0.25) !important;
            animation: wildPulse 0.7s ease-in-out infinite;
            z-index: 6;
            border-radius: 6px;
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%) !important;
        }

        .reel-wild-glow::before {
            content: '';
            position: absolute;
            inset: -5px;
            border-radius: 9px;
            background: conic-gradient(from 0deg, #fbbf24, #f59e0b, #fcd34d, #fbbf24);
            background-size: 100% 100%;
            animation: wildSpin 3s linear infinite;
            z-index: -1;
            opacity: 0.65;
            filter: blur(4px);
        }

        .reel-wild-glow::after {
            content: '⭐';
            position: absolute;
            top: -6px;
            right: -6px;
            font-size: 14px;
            animation: wildStarPop 1.5s ease-in-out infinite;
            z-index: 10;
            filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.9));
        }

        @keyframes wildPulse {
            0%, 100% {
                box-shadow: 0 0 12px rgba(251, 191, 36, 0.6), 0 0 30px rgba(251, 191, 36, 0.3), inset 0 0 12px rgba(251, 191, 36, 0.15);
                transform: scale(1);
                filter: brightness(1);
            }
            50% {
                box-shadow: 0 0 22px rgba(251, 191, 36, 1), 0 0 55px rgba(251, 191, 36, 0.6), 0 0 90px rgba(251, 191, 36, 0.2), inset 0 0 25px rgba(251, 191, 36, 0.3);
                transform: scale(1.04);
                filter: brightness(1.15);
            }
        }

        @keyframes wildSpin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes wildStarPop {
            0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
            25% { transform: scale(1.3) rotate(15deg); opacity: 0.8; }
            50% { transform: scale(0.9) rotate(-10deg); opacity: 1; }
            75% { transform: scale(1.2) rotate(5deg); opacity: 0.9; }
        }

        /* ═══ Scatter Symbol Glow — Purple Cosmic Burst ═══ */
        .reel-scatter-glow {
            position: relative;
            outline: none;
            border: 2px solid #c084fc !important;
            box-shadow:
                0 0 15px rgba(168, 85, 247, 0.9),
                0 0 40px rgba(168, 85, 247, 0.5),
                0 0 80px rgba(168, 85, 247, 0.25),
                0 0 120px rgba(139, 92, 246, 0.1),
                inset 0 0 25px rgba(168, 85, 247, 0.2) !important;
            animation: scatterPulse 0.6s ease-in-out infinite;
            z-index: 6;
            border-radius: 6px;
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
        }

        .reel-scatter-glow::before {
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: 10px;
            background: conic-gradient(from 0deg, #a855f7, #8b5cf6, #c084fc, #7c3aed, #a855f7);
            animation: scatterRing 2.5s linear infinite;
            z-index: -1;
            opacity: 0.6;
            filter: blur(5px);
        }

        .reel-scatter-glow::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 6px;
            background:
                radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 30%),
                radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.4) 0%, transparent 40%);
            animation: scatterSparkle 1.8s ease-in-out infinite alternate;
            pointer-events: none;
        }

        @keyframes scatterPulse {
            0%, 100% {
                box-shadow: 0 0 12px rgba(168, 85, 247, 0.6), 0 0 35px rgba(168, 85, 247, 0.3);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 0 20px rgba(168, 85, 247, 1), 0 0 50px rgba(168, 85, 247, 0.7), 0 0 100px rgba(139, 92, 246, 0.3);
                transform: scale(1.06);
            }
        }

        @keyframes scatterRing {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes scatterSparkle {
            0% { opacity: 0.4; filter: hue-rotate(0deg); }
            100% { opacity: 0.8; filter: hue-rotate(30deg); }
        }

        /* ═══ Expanding Wild — Full-Column Lightning ═══ */
        .reel-wild-expand {
            position: relative;
            outline: none;
            border: 2px solid #fbbf24 !important;
            box-shadow:
                0 0 20px rgba(251, 191, 36, 0.9),
                0 0 50px rgba(251, 191, 36, 0.5),
                0 0 90px rgba(168, 85, 247, 0.3) !important;
            animation: wildExpand 0.8s ease-in-out;
            z-index: 6;
            border-radius: 6px;
            background: linear-gradient(180deg, rgba(251, 191, 36, 0.25) 0%, rgba(168, 85, 247, 0.15) 100%) !important;
        }

        .reel-wild-expand::before {
            content: '';
            position: absolute;
            inset: -5px;
            border-radius: 9px;
            background: linear-gradient(180deg, #fbbf24, #a855f7, #fbbf24);
            background-size: 100% 200%;
            animation: expandShimmer 1.5s ease-in-out infinite;
            z-index: -1;
            opacity: 0.6;
            filter: blur(4px);
        }

        @keyframes wildExpand {
            0% { transform: scale(1); filter: brightness(1); }
            20% { transform: scale(1.15); filter: brightness(1.8); }
            40% { transform: scale(1.08); filter: brightness(1.4); }
            60% { transform: scale(1.1); filter: brightness(1.5); }
            100% { transform: scale(1); filter: brightness(1.2); }
        }

        @keyframes expandShimmer {
            0% { background-position: 0% 0%; }
            50% { background-position: 0% 100%; }
            100% { background-position: 0% 0%; }
        }

        /* ═══ Big Win Mega Highlight ═══ */
        .reel-big-win-glow {
            position: relative;
            border: 3px solid #ffd700 !important;
            box-shadow:
                0 0 20px rgba(255, 215, 0, 1),
                0 0 50px rgba(255, 215, 0, 0.7),
                0 0 100px rgba(255, 215, 0, 0.4),
                0 0 150px rgba(255, 215, 0, 0.2),
                inset 0 0 30px rgba(255, 215, 0, 0.3) !important;
            animation: bigWinPulse 0.5s ease-in-out infinite;
            z-index: 7;
            border-radius: 6px;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 165, 0, 0.15) 100%) !important;
        }

        .reel-big-win-glow::before {
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: 10px;
            background: conic-gradient(from 0deg, #ffd700, #ff8c00, #ffd700, #ffec4e, #ffd700);
            animation: bigWinSpin 1.5s linear infinite;
            z-index: -1;
            opacity: 0.8;
            filter: blur(5px);
        }

        @keyframes bigWinPulse {
            0%, 100% { transform: scale(1); filter: brightness(1); }
            50% { transform: scale(1.05); filter: brightness(1.3); }
        }

        @keyframes bigWinSpin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* ═══ Free Spins Overlay ═══ */
        /* ─── DRAMATIC FREE SPINS TRIGGER ANIMATIONS ─── */
        @keyframes fsScreenFlash {
            0%   { filter: brightness(1); }
            12%  { filter: brightness(5) saturate(0.2); }
            25%  { filter: brightness(2.5) saturate(1.8) hue-rotate(20deg); }
            55%  { filter: brightness(1.6); }
            100% { filter: brightness(1); }
        }
        @keyframes fsModalShake {
            0%, 100% { transform: translateX(0) rotate(0); }
            10%  { transform: translateX(-10px) rotate(-0.8deg); }
            20%  { transform: translateX(10px)  rotate(0.8deg); }
            30%  { transform: translateX(-7px)  rotate(-0.5deg); }
            40%  { transform: translateX(7px)   rotate(0.5deg); }
            55%  { transform: translateX(-4px); }
            70%  { transform: translateX(4px); }
            85%  { transform: translateX(-2px); }
        }
        @keyframes fsScatterPop {
            0%   { transform: scale(1);   filter: brightness(1); }
            25%  { transform: scale(1.5); filter: brightness(4) drop-shadow(0 0 24px #fbbf24); }
            60%  { transform: scale(1.3); filter: brightness(2.5) drop-shadow(0 0 16px #fbbf24); }
            100% { transform: scale(1.35); filter: brightness(3) drop-shadow(0 0 20px #fbbf24); }
        }
        @keyframes fsRayBurst {
            0%   { transform: scale(0.3) rotate(0deg);   opacity: 0; }
            15%  { opacity: 0.9; }
            70%  { opacity: 0.5; }
            100% { transform: scale(2.2) rotate(200deg); opacity: 0; }
        }
        @keyframes fsBackdropStrobe {
            0%   { background: rgba(255,255,255,0.7); }
            20%  { background: rgba(251,191,36,0.35); }
            100% { background: rgba(0,0,0,0.9); }
        }
        @keyframes fsIntroAppear {
            0%   { transform: scale(0.3) rotate(-8deg) translateY(40px); opacity: 0; }
            60%  { transform: scale(1.06) rotate(1deg) translateY(-6px); opacity: 1; }
            80%  { transform: scale(0.97) rotate(-0.5deg) translateY(2px); }
            100% { transform: scale(1) rotate(0deg) translateY(0); opacity: 1; }
        }
        @keyframes fsCountPulse {
            0%, 100% { transform: scale(1); }
            50%       { transform: scale(1.1); }
        }
        @keyframes fsBannerSlide {
            0%   { transform: translateY(-20px); opacity: 0; }
            100% { transform: translateY(0);     opacity: 1; }
        }
        @keyframes fsTapBlink {
            0%, 100% { opacity: 0.5; }
            50%       { opacity: 1; }
        }

        /* Triggered via JS: flash & shake classes on the modal */
        .slot-modal-fullscreen.fs-screen-flash {
            animation: fsScreenFlash 0.7s ease-out;
        }
        .slot-modal-fullscreen.fs-shake {
            animation: fsModalShake 0.55s cubic-bezier(.36,.07,.19,.97);
        }
        /* Scatter cells pop gold */
        .reel-cell.fs-scatter-pop img {
            animation: fsScatterPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }

        .free-spins-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s ease;
        }

        .free-spins-overlay.active {
            opacity: 1;
            pointer-events: auto;
            animation: fsBackdropStrobe 0.5s ease-out forwards;
        }

        /* Starburst ray burst behind the panel */
        .fs-rays {
            position: absolute;
            inset: -80px;
            border-radius: 50%;
            animation: fsRayBurst 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
            pointer-events: none;
            z-index: 0;
        }

        .free-spins-intro {
            position: relative;
            text-align: center;
            padding: 48px 64px;
            background: linear-gradient(160deg, rgba(8, 16, 36, 0.98), rgba(2, 4, 10, 0.99));
            border: 3px solid #fbbf24;
            border-radius: 24px;
            box-shadow:
                0 0 80px rgba(251,191,36,0.5),
                0 0 200px rgba(251,191,36,0.15),
                inset 0 0 40px rgba(251,191,36,0.05);
            animation: fsIntroAppear 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
            max-width: 520px;
            z-index: 1;
            overflow: visible;
        }

        .fs-intro-banner {
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: #fbbf24;
            margin-bottom: 10px;
            animation: fsBannerSlide 0.4s 0.2s ease-out both;
            opacity: 0.85;
        }

        .fs-intro-title {
            font-size: 32px;
            font-weight: 900;
            text-transform: uppercase;
            color: #fbbf24;
            margin-bottom: 8px;
            text-shadow: 0 0 30px currentColor, 0 0 60px currentColor;
            letter-spacing: 3px;
            line-height: 1.1;
        }

        .fs-intro-count {
            font-size: 88px;
            font-weight: 900;
            color: #ffffff;
            text-shadow: 0 0 40px rgba(251,191,36,0.8), 0 0 80px rgba(251,191,36,0.3);
            line-height: 1;
            margin: 8px 0 16px;
            animation: fsCountPulse 0.8s ease-in-out infinite;
            letter-spacing: -2px;
        }

        .fs-intro-sublabel {
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 6px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.6);
            margin-bottom: 20px;
        }

        .fs-intro-desc {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
            line-height: 1.5;
            max-width: 400px;
            margin: 0 auto 20px;
        }

        .fs-intro-tap {
            font-size: 13px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.4);
            animation: fsTapBlink 1.2s ease-in-out infinite;
        }

        /* ═══ Free Spins Summary Card ═══ */
        @keyframes fsSummaryCardIn {
            0%   { transform: scale(0.5) translateY(60px); opacity: 0; }
            65%  { transform: scale(1.05) translateY(-8px); opacity: 1; }
            82%  { transform: scale(0.98) translateY(3px); }
            100% { transform: scale(1) translateY(0); opacity: 1; }
        }
        @keyframes fsSummaryRays {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
        @keyframes fsSummaryAmount {
            0%   { transform: scale(0.8); opacity: 0.5; }
            50%  { transform: scale(1.08); }
            100% { transform: scale(1); opacity: 1; }
        }

        .fs-summary-card {
            position: relative;
            overflow: hidden;
            text-align: center;
            background: linear-gradient(160deg, rgba(10,8,30,0.97), rgba(5,10,20,0.99));
            border: 2px solid var(--fs-accent, #fbbf24);
            border-radius: 20px;
            padding: 36px 40px 32px;
            width: min(420px, 90vw);
            box-shadow:
                0 0 0 1px rgba(0,0,0,0.5),
                0 0 50px rgba(251,191,36,0.25),
                0 0 120px rgba(251,191,36,0.08),
                inset 0 1px 0 rgba(255,255,255,0.08);
            animation: fsSummaryCardIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        .fs-summary-rays {
            position: absolute;
            inset: -60px;
            border-radius: 50%;
            background: conic-gradient(
                from 0deg,
                transparent 0deg, rgba(251,191,36,0.06) 20deg, transparent 40deg,
                transparent 60deg, rgba(251,191,36,0.04) 80deg, transparent 100deg,
                transparent 120deg, rgba(251,191,36,0.06) 140deg, transparent 160deg,
                transparent 180deg, rgba(251,191,36,0.04) 200deg, transparent 220deg,
                transparent 240deg, rgba(251,191,36,0.06) 260deg, transparent 280deg,
                transparent 300deg, rgba(251,191,36,0.04) 320deg, transparent 340deg,
                transparent 360deg
            );
            animation: fsSummaryRays 12s linear infinite;
            pointer-events: none;
        }

        .fs-summary-label {
            position: relative;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--fs-accent, #fbbf24);
            margin-bottom: 4px;
        }

        .fs-summary-subtitle {
            position: relative;
            font-size: 13px;
            color: rgba(255,255,255,0.4);
            margin-bottom: 20px;
            font-weight: 400;
        }

        .fs-summary-amount {
            position: relative;
            font-size: clamp(48px, 10vw, 72px);
            font-weight: 900;
            color: #fff;
            text-shadow:
                0 0 20px var(--fs-accent, #fbbf24),
                0 0 50px rgba(251,191,36,0.3);
            line-height: 1;
            margin-bottom: 12px;
            animation: fsSummaryAmount 0.5s ease-out 0.4s both;
        }

        .fs-summary-subtext {
            position: relative;
            font-size: 12px;
            color: rgba(255,255,255,0.45);
            margin-bottom: 28px;
        }

        .fs-summary-close-btn {
            position: relative;
            background: linear-gradient(135deg, var(--fs-accent, #fbbf24), #f59e0b);
            color: #000;
            border: none;
            border-radius: 999px;
            padding: 13px 36px;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.1em;
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            box-shadow: 0 4px 20px rgba(251,191,36,0.4);
        }

        .fs-summary-close-btn:hover {
            transform: scale(1.04);
            box-shadow: 0 6px 30px rgba(251,191,36,0.55);
        }

        /* ═══ Free Spins HUD ═══ */
        @keyframes hudGlow {
            0%, 100% { box-shadow: 0 0 15px rgba(251,191,36,0.25), inset 0 0 20px rgba(251,191,36,0.04); }
            50%       { box-shadow: 0 0 35px rgba(251,191,36,0.55), inset 0 0 30px rgba(251,191,36,0.08); }
        }
        @keyframes hudSlideIn {
            0%   { transform: translateY(-100%); opacity: 0; }
            100% { transform: translateY(0);     opacity: 1; }
        }

        .free-spins-hud {
            display: none;
            justify-content: space-around;
            align-items: center;
            padding: 10px 24px;
            background: linear-gradient(135deg, rgba(6,10,26,0.97), rgba(0,0,0,0.98));
            border-bottom: 3px solid #fbbf24;
            flex-shrink: 0;
            animation: hudGlow 2s ease-in-out infinite, hudSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
            position: relative;
            z-index: 100;
        }

        .fs-hud-spins,
        .fs-hud-win,
        .fs-hud-mult {
            text-align: center;
            padding: 4px 20px;
            border-right: 1px solid rgba(255,255,255,0.08);
        }
        .fs-hud-spins:last-child,
        .fs-hud-win:last-child,
        .fs-hud-mult:last-child { border-right: none; }

        .fs-hud-label {
            display: block;
            font-size: 10px;
            font-weight: 800;
            color: rgba(255,255,255,0.4);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 2px;
        }

        .fs-hud-value {
            display: block;
            font-size: 26px;
            font-weight: 900;
            color: #fbbf24;
            text-shadow: 0 0 15px rgba(251,191,36,0.5);
        }

        .fs-hud-win-value {
            color: #10b981;
            text-shadow: 0 0 15px rgba(16,185,129,0.5);
        }

        .fs-hud-mult .fs-hud-value {
            color: #f472b6;
            font-size: 18px;
            text-shadow: 0 0 12px rgba(244,114,182,0.5);
        }

        /* ═══ Bonus Effect Animation ═══ */
        .bonus-effect {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 28px;
            font-weight: 900;
            color: #fbbf24;
            text-shadow: 0 0 20px currentColor, 0 2px 10px rgba(0,0,0,0.8);
            z-index: 100;
            pointer-events: none;
            white-space: nowrap;
            animation: bonusEffectPop 2s ease-out forwards;
        }

        @keyframes bonusEffectPop {
            0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
            15% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
            30% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
            70% { transform: translate(-50%, -80%) scale(1); opacity: 1; }
            100% { transform: translate(-50%, -120%) scale(0.8); opacity: 0; }
        }

        .screen-shake {
            animation: screenShake 0.5s ease-out;
        }

        @keyframes screenShake {
            0%, 100% { transform: translate(0); }
            10% { transform: translate(-5px, -3px); }
            20% { transform: translate(5px, 3px); }
            30% { transform: translate(-3px, 5px); }
            40% { transform: translate(3px, -5px); }
            50% { transform: translate(-5px, 3px); }
            60% { transform: translate(5px, -3px); }
            70% { transform: translate(-3px, -5px); }
            80% { transform: translate(3px, 5px); }
            90% { transform: translate(-2px, -2px); }
        }

        .sparkle-particle {
            position: fixed;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: radial-gradient(circle, #ffd700, #ff8c00);
            pointer-events: none;
            z-index: 10000;
            animation: sparkleMove 1s ease-out forwards;
        }

        @keyframes sparkleMove {
            0% { transform: translate(0, 0) scale(1); opacity: 1; }
            100% { transform: translate(var(--spark-dx), var(--spark-dy)) scale(0); opacity: 0; }
        }

        .bet-controls {
            background: linear-gradient(135deg, #0f172a, #000000);
            border-radius: 16px;
            padding: 32px;
            border: 2px solid rgba(251,191,36,0.3);
            margin-bottom: 24px;
        }

        .bet-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .bet-label {
            font-size: 24px;
            font-weight: 900;
        }

        .bet-amount {
            font-size: 48px;
            font-weight: 900;
            color: #fbbf24;
        }

        .bet-range {
            width: 100%;
            height: 16px;
            -webkit-appearance: none;
            appearance: none;
            background: #1e293b;
            border-radius: 8px;
            outline: none;
            margin-bottom: 16px;
        }

        .bet-range::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 32px;
            height: 32px;
            background: var(--rg-yellow-300, #fbbf24);
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(251,191,36,0.6);
        }

        .bet-range::-moz-range-thumb {
            width: 32px;
            height: 32px;
            background: var(--rg-yellow-300, #fbbf24);
            border-radius: 50%;
            cursor: pointer;
            border: none;
            box-shadow: 0 4px 12px rgba(251,191,36,0.6);
        }

        .bet-range::-moz-range-track {
            background: #1e293b;
            height: 16px;
            border-radius: 8px;
            border: none;
        }

        .bet-presets {
            display: flex;
            gap: 12px;
        }

        .bet-preset {
            flex: 1;
            background: #1e293b;
            border: 1px solid #475569;
            color: white;
            padding: 12px;
            border-radius: 8px;
            font-weight: 700;
            cursor: pointer;
        }

        .bet-preset:hover {
            background: #334155;
        }

        .spin-btn {
            width: 100%;
            padding: 32px;
            font-size: 36px;
            font-weight: 900;
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
            border: none;
            border-radius: 24px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(16,185,129,0.4);
            transition: all 0.3s;
        }

        .spin-btn:hover:not(:disabled) {
            transform: scale(1.02);
            box-shadow: 0 12px 48px rgba(16,185,129,0.6);
        }

        .spin-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .message-display {
            margin-top: 0;
            padding: 10px 24px;
            border-radius: 8px;
            text-align: center;
            font-size: 16px;
            font-weight: 800;
            border: none;
            backdrop-filter: blur(10px);
        }

        .message-win {
            background: rgba(16,185,129,0.2);
            color: #6ee7b7;
            text-shadow: 0 0 10px rgba(16,185,129,0.5);
            animation: pulse-win 1.5s ease-in-out infinite;
        }

        @keyframes pulse-win {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.02); }
        }

        .message-lose {
            background: rgba(255,255,255,0.05);
            color: #64748b;
        }

        .win-animation {
            margin-top: 0;
            text-align: center;
        }

        .win-amount {
            display: inline-block;
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            color: #000;
            font-size: 28px;
            font-weight: 900;
            padding: 10px 28px;
            border-radius: 999px;
            border: 2px solid #fde047;
            box-shadow: 0 4px 20px rgba(251,191,36,0.5);
            animation: bounce-in 0.5s ease-out;
        }

        /* ═══ PRAGMATIC PLAY BIG WIN OVERLAY ═══ */
        .pp-win-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 200;
            animation: ppWinAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .pp-win-burst {
            position: absolute;
            inset: -50%;
            background: radial-gradient(circle, rgba(251,191,36,0.15) 0%, transparent 60%);
            animation: ppBurstRotate 4s linear infinite;
        }

        @keyframes ppBurstRotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .pp-win-content {
            text-align: center;
            z-index: 2;
            padding: 30px 60px;
            background: radial-gradient(ellipse at center, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
            border-radius: 20px;
        }

        .pp-win-tier {
            font-size: 36px;
            font-weight: 900;
            letter-spacing: 4px;
            text-transform: uppercase;
            margin-bottom: 4px;
            animation: ppTierPulse 1s ease-in-out infinite;
        }

        .pp-win-amount {
            font-size: 48px;
            font-weight: 900;
            color: #fff;
            text-shadow: 0 2px 20px rgba(0,0,0,0.8);
            animation: ppAmountCount 0.8s ease-out;
        }

        .pp-win-multiplier {
            font-size: 18px;
            font-weight: 700;
            color: #94a3b8;
            margin-top: 2px;
            letter-spacing: 2px;
        }

        /* Win tier colors with enhanced animations */
        .win-tier-great .pp-win-tier {
            color: #10b981;
            text-shadow: 0 0 30px rgba(16,185,129,0.6);
            animation: ppTierPulse 1.2s ease-in-out infinite;
        }
        .win-tier-great .pp-win-overlay {
            animation: ppWinAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), winGradientShift 2s ease-in-out infinite;
        }

        .win-tier-big .pp-win-tier {
            color: #fbbf24;
            text-shadow: 0 0 30px rgba(251,191,36,0.6), 0 0 60px rgba(251,191,36,0.4);
            animation: ppTierPulse 1s ease-in-out infinite;
        }
        .win-tier-big .pp-win-overlay {
            animation: ppWinAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), winGradientShift 1.5s ease-in-out infinite;
        }

        .win-tier-mega .pp-win-tier {
            color: #f97316;
            text-shadow: 0 0 40px rgba(249,115,22,0.7), 0 0 80px rgba(249,115,22,0.4);
            font-size: 42px;
            animation: ppTierPulse 0.8s ease-in-out infinite;
        }
        .win-tier-mega .pp-win-amount {
            font-size: 56px;
            animation: ppAmountCount 0.8s ease-out, megaWinBounce 1s ease-in-out infinite 0.8s;
        }
        .win-tier-mega .pp-win-overlay {
            animation: ppWinAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), megaWinShake 2s ease-in-out infinite;
        }

        .win-tier-epic .pp-win-tier {
            color: #ef4444;
            text-shadow: 0 0 50px rgba(239,68,68,0.8), 0 0 100px rgba(239,68,68,0.6);
            font-size: 48px;
            animation: ppTierPulse 0.6s ease-in-out infinite;
        }
        .win-tier-epic .pp-win-amount {
            font-size: 64px;
            animation: ppAmountCount 0.8s ease-out, epicWinPulse 0.8s ease-in-out infinite 0.8s;
        }
        .win-tier-epic .pp-win-overlay {
            animation: ppWinAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), epicWinShake 1.2s ease-in-out infinite;
            background: radial-gradient(circle, rgba(239,68,68,0.1) 0%, transparent 70%);
        }

        /* Enhanced background effects for mega/epic wins */
        .win-tier-mega .pp-win-burst {
            background: radial-gradient(circle, rgba(249,115,22,0.25) 0%, transparent 50%);
            animation: ppBurstRotate 2s linear infinite;
        }
        .win-tier-epic .pp-win-burst {
            background: radial-gradient(circle, rgba(239,68,68,0.3) 0%, transparent 50%);
            animation: ppBurstRotate 1.5s linear infinite;
        }

        @keyframes ppWinAppear {
            from { opacity: 0; transform: scale(0.5); }
            to { opacity: 1; transform: scale(1); }
        }

        @keyframes ppTierPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        @keyframes ppAmountCount {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Enhanced win animations for mega/epic tiers */
        @keyframes megaWinBounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.08); }
        }

        @keyframes megaWinShake {
            0%, 100% { filter: brightness(1) drop-shadow(0 0 20px rgba(249,115,22,0.3)); }
            50% { filter: brightness(1.1) drop-shadow(0 0 50px rgba(249,115,22,0.8)); }
        }

        @keyframes epicWinPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        @keyframes epicWinShake {
            0%, 100% { filter: brightness(1) drop-shadow(0 0 30px rgba(239,68,68,0.4)); }
            33% { filter: brightness(1.15) drop-shadow(0 0 60px rgba(239,68,68,1)); }
            66% { filter: brightness(1.1) drop-shadow(0 0 60px rgba(239,68,68,0.8)); }
        }

        @keyframes winGradientShift {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.05); }
        }

        /* ═══ PARTICLE EFFECTS & SYMBOL CASCADES ═══ */
        .particle {
            position: fixed;
            pointer-events: none;
            will-change: transform;
            font-size: 24px;
            z-index: 300;
        }

        @keyframes particleFloat {
            0% {
                transform: translateY(0) translateX(0) scale(1);
                opacity: 1;
            }
            50% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100px) translateX(var(--tx)) scale(0.3);
                opacity: 0;
            }
        }

        .particle.gold {
            animation: particleFloat 1.2s ease-out forwards;
            --tx: 0;
        }

        .particle.sparkle {
            animation: particleFloat 1.5s ease-out forwards;
            filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.8));
        }

        /* Symbol highlight cascade for winning combinations */
        .symbol-cascade {
            animation: symbolCascadeEffect 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        }

        @keyframes symbolCascadeEffect {
            0% {
                transform: translateY(-20px) scale(0.8);
                opacity: 0;
                filter: brightness(1.5);
            }
            50% {
                filter: brightness(1.2);
            }
            100% {
                transform: translateY(0) scale(1);
                opacity: 1;
                filter: brightness(1);
            }
        }

        /* Staggered cascade for multiple winning cells */
        .symbol-cascade-1 { animation-delay: 0s; }
        .symbol-cascade-2 { animation-delay: 0.1s; }
        .symbol-cascade-3 { animation-delay: 0.2s; }
        .symbol-cascade-4 { animation-delay: 0.3s; }
        .symbol-cascade-5 { animation-delay: 0.4s; }
        .symbol-cascade-6 { animation-delay: 0.5s; }

        /* Sparkle/shine effect on symbols */
        @keyframes symbolSparkle {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.3) drop-shadow(0 0 15px rgba(255,215,0,0.6)); }
        }

        .symbol-sparkle {
            animation: symbolSparkle 0.8s ease-in-out;
        }

        /* Color-matched highlight glows */
        .highlight-gold {
            filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8)) brightness(1.1);
        }

        .highlight-green {
            filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.8)) brightness(1.1);
        }

        .highlight-purple {
            filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.8)) brightness(1.1);
        }

        .stats-panel {
            background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.96));
            border: 2px solid rgba(148, 163, 184, 0.3);
            border-radius: 24px;
            padding: 32px;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
        }

        .stats-panel h3 {
            font-size: 36px;
            font-weight: 900;
            margin-bottom: 8px;
        }

        .stats-subtitle {
            color: #94a3b8;
            font-size: 14px;
            margin-bottom: 24px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
            margin-bottom: 24px;
        }

        .stats-card {
            background: rgba(15, 23, 42, 0.9);
            border: 1px solid rgba(71, 85, 105, 0.8);
            border-radius: 12px;
            padding: 14px;
        }

        .stats-card-label {
            color: #94a3b8;
            font-size: 11px;
            font-weight: 700;
            margin-bottom: 6px;
            letter-spacing: 0.6px;
        }

        .stats-card-value {
            color: #f8fafc;
            font-size: 24px;
            font-weight: 900;
        }

        .stats-games-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 8px;
        }

        .stats-games-list li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            border-radius: 10px;
            background: rgba(15, 23, 42, 0.8);
            border: 1px solid rgba(71, 85, 105, 0.7);
        }

        .stats-empty {
            justify-content: center !important;
            color: #94a3b8;
            font-weight: 700;
        }

        .shortcut-hint {
            margin-top: 16px;
            color: #94a3b8;
            font-size: 12px;
        }

        @keyframes bounce-in {
            0% { transform: scale(0) rotate(-180deg); opacity: 0; }
            50% { transform: scale(1.2) rotate(10deg); }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }

        /* Confetti Animation */
        @keyframes confetti-fall {
            0% {
                transform: translateY(-100vh) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(720deg);
                opacity: 0;
            }
        }

        .confetti {
            position: fixed;
            width: 10px;
            height: 10px;
            top: -10px;
            z-index: 9999;
            pointer-events: none;
        }

        .confetti-1 { background: #ffd700; animation: confetti-fall 3s linear; }
        .confetti-2 { background: #ff6b6b; animation: confetti-fall 3.5s linear; }
        .confetti-3 { background: #4facfe; animation: confetti-fall 4s linear; }
        .confetti-4 { background: #43a047; animation: confetti-fall 3.2s linear; }
        .confetti-5 { background: #9c27b0; animation: confetti-fall 3.8s linear; }

        /* Page Transition Overlay */
        .page-transition {
            position: fixed;
            inset: 0;
            background: linear-gradient(135deg, #1a0033 0%, #2d1b4e 50%, #0a1929 100%);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease-in-out;
        }

        .page-transition.active {
            opacity: 1;
            pointer-events: all;
        }

        .spinner {
            width: 60px;
            height: 60px;
            border: 4px solid rgba(255, 215, 0, 0.3);
            border-top-color: #ffd700;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Pulse effect for hot games */
        @keyframes pulse-border {
            0%, 100% {
                box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
            }
            50% {
                box-shadow: 0 0 0 15px rgba(255, 215, 0, 0);
            }
        }

        .game-card.hot {
            animation: pulse-border 2s infinite;
        }

        /* Shimmer effect for buttons */
        @keyframes shimmer {
            0% { background-position: -1000px 0; }
            100% { background-position: 1000px 0; }
        }

        .shimmer-btn {
            background-image: linear-gradient(
                90deg,
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,0.3) 50%,
                rgba(255,255,255,0) 100%
            );
            background-size: 1000px 100%;
            animation: shimmer 3s infinite;
        }

        /* Achievement notification animations */
        @keyframes slideInRight {
            from { transform: translateX(400px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        @keyframes slideOutRight {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(400px); opacity: 0; }
        }

        /* ===== Pass 1: Toast System ===== */
        .toast-container {
            position: fixed;
            top: 80px;
            right: 20px;
            z-index: 10002;
            display: flex;
            flex-direction: column;
            gap: 8px;
            pointer-events: none;
        }

        .toast {
            pointer-events: auto;
            padding: 14px 20px;
            border-radius: 8px;
            font-weight: 700;
            font-size: 14px;
            color: #f0f0f0;
            animation: toastSlideIn 0.4s ease-out;
            max-width: 360px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        }

        .toast-exit {
            animation: toastSlideOut 0.4s ease-in forwards;
        }

        .toast-win {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.92), rgba(5, 150, 105, 0.92));
            border: 1px solid rgba(86, 210, 160, 0.5);
        }

        .toast-lose {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.92), rgba(220, 38, 38, 0.92));
            border: 1px solid rgba(255, 149, 151, 0.5);
        }

        .toast-info {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.92), rgba(37, 99, 235, 0.92));
            border: 1px solid rgba(96, 165, 250, 0.5);
        }

        .toast-levelup {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.92), rgba(245, 158, 11, 0.92));
            border: 1px solid rgba(253, 224, 71, 0.5);
            color: #000;
        }

        .toast-achievement {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.92), rgba(139, 92, 246, 0.92));
            border: 1px solid rgba(196, 181, 253, 0.5);
        }

        .toast-bonus {
            background: linear-gradient(135deg, rgba(236, 72, 153, 0.92), rgba(219, 39, 119, 0.92));
            border: 1px solid rgba(244, 114, 182, 0.5);
        }

        @keyframes toastSlideIn {
            from { transform: translateX(400px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        @keyframes toastSlideOut {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(400px); opacity: 0; }
        }

        /* Pass 1: Balance animation */
        .balance-up {
            animation: balanceFlashGreen 0.5s ease-out;
        }

        .balance-down {
            animation: balanceFlashRed 0.5s ease-out;
        }

        @keyframes balanceFlashGreen {
            0%, 100% { box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3); }
            50% { box-shadow: 0 0 24px rgba(16, 185, 129, 0.7); }
        }

        @keyframes balanceFlashRed {
            0%, 100% { box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3); }
            50% { box-shadow: 0 0 24px rgba(239, 68, 68, 0.7); }
        }

        /* ===== Pass 3: XP Display ===== */
        .xp-level-display {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0 12px;
        }

        .level-badge {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 3px solid #cd7f32;
            background: rgba(15, 23, 42, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: 14px;
            color: #f0f0f0;
            flex-shrink: 0;
        }

        .xp-info {
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 100px;
        }

        .tier-label {
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 1px;
            color: #cd7f32;
        }

        .xp-bar {
            height: 14px;
            background: rgba(15, 23, 42, 0.8);
            border-radius: 7px;
            border: 1px solid rgba(71, 85, 105, 0.8);
            position: relative;
            overflow: hidden;
        }

        .xp-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #10b981, #34d399);
            border-radius: 7px;
            transition: width 0.5s ease-out;
        }

        .xp-bar-text {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            font-weight: 700;
            color: #f0f0f0;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

        /* ===== Pass 4: Daily Bonus ===== */
        .daily-bonus-panel {
            background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.96));
            border: 2px solid rgba(148, 163, 184, 0.3);
            border-radius: 24px;
            padding: 30px;
            text-align: center;
            max-width: 520px;
            margin: 60px auto 0;
        }

        .daily-bonus-panel h3 {
            font-size: 28px;
            font-weight: 900;
            color: #fbbf24;
            margin-bottom: 8px;
        }

        .streak-counter {
            color: #94a3b8;
            font-size: 14px;
            margin-bottom: 20px;
        }

        .daily-calendar {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 8px;
            margin-bottom: 20px;
        }

        .daily-day {
            border-radius: 8px;
            padding: 10px 4px;
            text-align: center;
            border: 1px solid rgba(71, 85, 105, 0.8);
            background: rgba(15, 23, 42, 0.5);
        }

        .day-number {
            font-size: 10px;
            font-weight: 700;
            color: #94a3b8;
            margin-bottom: 4px;
        }

        .day-reward {
            font-size: 14px;
            font-weight: 900;
            color: #f0f0f0;
        }

        .day-xp {
            font-size: 9px;
            color: #34d399;
            margin-top: 2px;
        }

        .day-claimed {
            background: rgba(16, 185, 129, 0.2);
            border-color: rgba(16, 185, 129, 0.5);
        }

        .day-claimed .day-number { color: #10b981; }

        .day-today {
            background: rgba(251, 191, 36, 0.2);
            border-color: rgba(251, 191, 36, 0.5);
            animation: dayTodayPulse 1.5s ease-in-out infinite;
        }

        @keyframes dayTodayPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
            50% { box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); }
        }

        .day-today .day-number { color: #fbbf24; }

        .day-locked { opacity: 0.4; }

        .daily-claim-btn {
            width: 100%;
            background: linear-gradient(135deg, #10b981, #059669) !important;
            color: white !important;
            font-size: 18px !important;
            padding: 16px !important;
            margin-bottom: 10px;
        }

        .daily-claim-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .daily-skip-btn {
            width: 100%;
            background: rgba(30, 41, 59, 0.8) !important;
            color: #94a3b8 !important;
            border: 1px solid rgba(71, 85, 105, 0.8) !important;
        }

        /* ===== Pass 5: Bonus Wheel ===== */
        .wheel-panel {
            background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.96));
            border: 2px solid rgba(148, 163, 184, 0.3);
            border-radius: 24px;
            padding: 30px;
            text-align: center;
            max-width: 400px;
            margin: 60px auto 0;
        }

        .wheel-panel h3 {
            font-size: 28px;
            font-weight: 900;
            color: #fbbf24;
            margin-bottom: 20px;
        }

        .wheel-wrapper {
            position: relative;
            display: inline-block;
            margin-bottom: 20px;
        }

        .wheel-pointer {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-top: 24px solid #ffd700;
            z-index: 10;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
        }

        #wheelCanvas {
            border-radius: 50%;
            border: 4px solid #ffd700;
            box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
        }

        .wheel-spin-btn {
            width: 100%;
            background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
            color: #000 !important;
            font-size: 18px !important;
            padding: 16px !important;
            margin-bottom: 10px;
            font-weight: 900 !important;
        }

        .wheel-spin-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .btn-bonus-wheel {
            background: linear-gradient(135deg, #ffd700, #ff8c00);
            color: #000;
            padding: 16px 28px;
            font-size: 16px;
            font-weight: 900;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-bonus-wheel:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(255, 215, 0, 0.4);
        }

        /* ===== Deposit Modal ===== */
        .deposit-panel {
            background:
                linear-gradient(140deg, rgba(31, 17, 27, 0.92) 0%, rgba(34, 21, 35, 0.9) 48%, rgba(42, 33, 51, 0.92) 100%),
                url('assets/backgrounds/deposit_bg.png') center/cover no-repeat;
            border: 1px solid rgba(82, 82, 82, 0.95);
            border-radius: 8px;
            padding: 32px;
            text-align: center;
            max-width: 480px;
            width: 100%;
        }

        .deposit-panel h3 {
            font-size: 28px;
            font-weight: 900;
            color: var(--rg-yellow-300, #fbbf24);
            margin-bottom: 6px;
        }

        .deposit-subtitle {
            color: var(--rg-text-muted, #8a8a8a);
            font-size: 14px;
            margin-bottom: 24px;
        }

        .deposit-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 20px;
        }

        .deposit-option {
            background: rgba(43, 43, 43, 0.8);
            border: 1px solid rgba(82, 82, 82, 0.8);
            border-radius: 8px;
            padding: 20px 16px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            position: relative;
        }

        .deposit-option:hover {
            border-color: var(--rg-primary-200, #179163);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
        }

        .deposit-option-featured {
            border-color: var(--rg-yellow-300, #fbbf24);
            background: rgba(238, 209, 41, 0.08);
        }

        .deposit-badge {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--rg-yellow-300, #fbbf24);
            color: #101010;
            font-size: 9px;
            font-weight: 800;
            padding: 3px 8px;
            border-radius: 3px;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        .deposit-amount {
            font-size: 24px;
            font-weight: 900;
            color: var(--rg-text-50, #f0f0f0);
        }

        .deposit-label {
            font-size: 12px;
            color: var(--rg-text-muted, #8a8a8a);
        }

        /* ===== Pass 6: Filter Tabs & Win Ticker ===== */
        .filter-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }

        .filter-tab {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 18px;
            border-radius: 999px;
            border: 1px solid var(--rg-border-subtle);
            background: var(--rg-surface-200);
            color: var(--rg-text-muted);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .filter-tab svg {
            flex-shrink: 0;
        }

        .filter-tab:hover {
            border-color: var(--rg-primary-200);
            color: var(--rg-primary-100);
            background: var(--rg-surface-300);
        }

        .filter-tab-active {
            background: linear-gradient(135deg, var(--rg-primary-200), var(--rg-primary-300));
            border-color: var(--rg-primary-200);
            color: var(--rg-text-50);
        }

        .filter-count {
            background: rgba(255,255,255,0.15);
            border-radius: 999px;
            font-size: 10px;
            font-weight: 700;
            padding: 1px 6px;
            min-width: 18px;
            text-align: center;
            line-height: 16px;
        }

        .filter-tab-active .filter-count {
            background: rgba(0,0,0,0.2);
        }

        /* Provider filter chips */
        .provider-filter-row {
            display: flex;
            gap: 7px;
            flex-wrap: wrap;
            margin-bottom: 16px;
        }

        .provider-chip {
            padding: 5px 13px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.1);
            background: rgba(255,255,255,0.05);
            color: var(--rg-text-muted, #8a8a8a);
            font-size: 11.5px;
            font-weight: 600;
            letter-spacing: 0.02em;
            cursor: pointer;
            transition: all 0.18s ease;
            white-space: nowrap;
        }

        .provider-chip:hover {
            border-color: rgba(255,255,255,0.25);
            color: var(--rg-text-100, #e2e8f0);
            background: rgba(255,255,255,0.1);
        }

        .provider-chip-active {
            background: rgba(251,191,36,0.15);
            border-color: rgba(251,191,36,0.5);
            color: #fbbf24;
        }

        .provider-chip-active:hover {
            background: rgba(251,191,36,0.2);
            border-color: rgba(251,191,36,0.7);
            color: #fde68a;
        }

        .games-empty-state {
            grid-column: 1 / -1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding: 60px 20px;
            color: var(--rg-text-muted);
            text-align: center;
        }

        .games-empty-state p { font-size: 14px; }
        .games-empty-state strong { color: var(--rg-text-100); }

        /* Jackpot Ticker */
        .jackpot-ticker-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            background: linear-gradient(90deg, rgba(50,22,35,0.9), rgba(34,17,29,0.9));
            border: 1px solid rgba(238, 209, 41, 0.4);
            border-radius: 8px;
            padding: 10px 18px;
            margin-bottom: 10px;
        }

        .jackpot-ticker-label {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            font-weight: 800;
            color: var(--rg-yellow-300);
            letter-spacing: 1.5px;
            white-space: nowrap;
        }

        .jackpot-ticker-amount {
            font-size: 18px;
            font-weight: 800;
            color: var(--rg-yellow-200);
            font-variant-numeric: tabular-nums;
            text-shadow: 0 0 20px rgba(255, 229, 83, 0.4);
        }

        .jackpot-ticker-sub {
            font-size: 10px;
            color: var(--rg-text-muted);
            letter-spacing: 0.5px;
            margin-left: auto;
        }

        /* Live dot for win ticker */
        .ticker-live-dot {
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #22c55e;
            box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
            flex-shrink: 0;
            animation: livePulse 2s ease-in-out infinite;
        }

        @keyframes livePulse {
            0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); }
            50% { box-shadow: 0 0 16px rgba(34, 197, 94, 0.9); }
        }

        /* Recently Played */
        .recently-played-scroll {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            padding-bottom: 12px;
            margin-bottom: 28px;
            scroll-snap-type: x mandatory;
        }

        .recently-played-scroll::-webkit-scrollbar {
            height: 3px;
        }

        .recently-played-scroll::-webkit-scrollbar-track {
            background: var(--rg-surface-200);
            border-radius: 2px;
        }

        .recently-played-scroll::-webkit-scrollbar-thumb {
            background: var(--rg-primary-300);
            border-radius: 2px;
        }

        .recently-played-scroll .game-card {
            flex: 0 0 140px;
            scroll-snap-align: start;
        }

        .win-ticker-bar {
            background: rgba(30, 41, 59, 0.6);
            border: 1px solid rgba(71, 85, 105, 0.6);
            border-radius: 8px;
            padding: 10px 16px;
            margin-bottom: 28px;
            overflow: hidden;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .ticker-content {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 12px;
            overflow-x: auto;
        }

        .ticker-content::-webkit-scrollbar { display: none; }

        .ticker-item {
            color: #f0f0f0;
            font-weight: 700;
        }

        .ticker-sep {
            color: #fbbf24;
            font-weight: 900;
        }

        .ticker-time {
            color: #94a3b8;
            font-size: 10px;
        }

        .last-played-badge {
            position: absolute;
            bottom: 8px;
            left: 8px;
            background: linear-gradient(135deg, #ffd700, #ff8c00);
            color: #000;
            font-size: 9px;
            font-weight: 900;
            padding: 3px 8px;
            border-radius: 999px;
            z-index: 10;
        }

        /* Mobile Responsive Improvements */
        @media (max-width: 768px) {
            .logo-text h1 {
                font-size: 24px;
            }

            .logo-icon {
                width: 48px;
                height: 48px;
            }

            .balance-amount {
                font-size: 20px;
            }

            .btn {
                padding: 12px 20px;
                font-size: 12px;
            }

            .hero-title {
                font-size: 36px;
            }

            .stats-value {
                font-size: 32px;
            }

            .games-grid {
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
                gap: 16px;
            }

            .game-name {
                font-size: 16px;
            }

            .slot-title {
                font-size: 32px;
            }

            .payout-value {
                font-size: 40px;
            }

            .reels {
                gap: 6px;
            }

            .reels[data-cols="3"] .reel-cell { width: 100px; height: 100px; }
            .reels[data-cols="5"][data-rows="3"] .reel-cell { width: 80px; height: 72px; }
            .reels[data-cols="5"][data-rows="4"] .reel-cell { width: 75px; height: 62px; }
            .reels[data-cols="5"][data-rows="5"] .reel-cell { width: 70px; height: 58px; }
            .reels[data-cols="6"] .reel-cell { width: 65px; height: 56px; }
            .reels[data-cols="7"] .reel-cell { width: 52px; height: 45px; }

            .bet-amount {
                font-size: 32px;
            }

            .spin-btn {
                font-size: 24px;
                padding: 24px;
            }

            .header-actions {
                flex-wrap: wrap;
                gap: 8px;
            }

            .balance-display {
                padding: 8px 16px;
            }

            .btn-user {
                width: 48px;
                height: 48px;
            }

            .hero-banner {
                padding: 32px 24px;
            }

            .hero-content {
                flex-direction: column;
                text-align: center;
            }

            .hero-stats {
                margin-top: 24px;
            }

            .hero-buttons {
                justify-content: center;
            }
        }

        @media (max-width: 640px) {
            .toast-container {
                right: 10px;
                left: 10px;
                top: 70px;
            }

            .toast {
                max-width: none;
            }

            .xp-level-display {
                padding: 0 6px;
            }

            .xp-info {
                min-width: 70px;
            }

            .daily-calendar {
                grid-template-columns: repeat(4, 1fr);
            }

            .level-badge {
                width: 28px;
                height: 28px;
                font-size: 11px;
            }
        }

        @media (max-width: 480px) {
            .logo-text h1 {
                font-size: 20px;
            }

            .promo-bar {
                font-size: 11px;
            }

            .hero-title {
                font-size: 28px;
            }

            .games-grid {
                grid-template-columns: 1fr;
            }

            .reels[data-cols="3"] .reel-cell { width: 72px; height: 72px; }
            .reels[data-cols="5"] .reel-cell { width: 58px; height: 50px; }
            .reels[data-cols="6"] .reel-cell { width: 48px; height: 42px; }
            .reels[data-cols="7"] .reel-cell { width: 40px; height: 35px; }

            .slot-body {
                padding: 24px;
            }

            .reels-container {
                padding: 24px;
            }

            .xp-level-display {
                display: none;
            }
        }

        /* Touch-friendly improvements */
        @media (hover: none) {
            .game-card:active {
                transform: translateY(-8px) scale(1.02);
            }

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

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

        /* ===== 5gringo-inspired theme overrides ===== */
        :root {
            --rg-primary-400: #00331f;
            --rg-primary-300: #15523a;
            --rg-primary-200: #179163;
            --rg-primary-100: #56d2a0;
            --rg-neutral-400: #181818;
            --rg-neutral-300: #2b2b2b;
            --rg-neutral-200: #525252;
            --rg-text-50: #f0f0f0;
            --rg-text-100: #dbdbdb;
            --rg-text-200: #bfbfbf;
            --rg-text-muted: #8a8a8a;
            --rg-yellow-300: #eed129;
            --rg-yellow-200: #ffe553;
            --rg-panel-900: #22121c;
            --rg-panel-800: #2a1522;
            --rg-accent: #179163;
            --rg-surface-100: #1a0e16;
            --rg-surface-200: #22121c;
            --rg-surface-300: #2a1522;
            --rg-surface-400: #341c2c;
            --rg-border-subtle: rgba(82, 82, 82, 0.4);
            --rg-border-accent: rgba(238, 209, 41, 0.35);
        }

        body {
            font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
            background:
                radial-gradient(1100px 520px at 15% -10%, rgba(68, 32, 54, 0.7) 0%, transparent 65%),
                radial-gradient(900px 460px at 95% 10%, rgba(58, 26, 48, 0.6) 0%, transparent 60%),
                linear-gradient(180deg, rgba(18, 10, 17, 0.95) 0%, rgba(26, 13, 23, 0.92) 35%, rgba(22, 11, 20, 0.95) 100%),
                url('assets/backgrounds/lobby_bg.png') center top/cover no-repeat fixed;
            color: var(--rg-text-100);
        }

        .bg-orbs {
            display: none;
        }

        .promo-bar {
            background: #2b1320;
            color: var(--rg-yellow-300);
            border-bottom: 1px solid rgba(82, 82, 82, 0.65);
            font-size: 12px;
            letter-spacing: 0.3px;
            padding: 0;
            overflow: hidden;
            height: 32px;
            line-height: 32px;
        }

        .promo-bar::before {
            display: none;
        }

        .promo-marquee {
            overflow: hidden;
            white-space: nowrap;
        }

        .promo-marquee-inner {
            display: inline-block;
            animation: marqueeScroll 30s linear infinite;
        }

        .promo-item {
            font-weight: 600;
            color: #00ff41;
            font-family: 'Courier New', monospace;
            letter-spacing: 1px;
            text-shadow: 0 0 6px rgba(0,255,65,0.6);
        }

        .promo-sep {
            margin: 0 18px;
            opacity: 0.4;
            color: #00ff41;
        }

        @keyframes marqueeScroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* Header Search */
        .header-search {
            display: flex;
            align-items: center;
            background: var(--rg-surface-200);
            border: 1px solid var(--rg-border-subtle);
            border-radius: 6px;
            padding: 6px 12px;
            gap: 8px;
            flex: 0 1 240px;
            transition: border-color 0.2s;
        }

        .header-search:focus-within {
            border-color: var(--rg-primary-200);
        }

        .search-icon {
            width: 16px;
            height: 16px;
            color: var(--rg-text-muted);
            flex-shrink: 0;
        }

        .header-search input {
            background: none;
            border: none;
            outline: none;
            color: var(--rg-text-50);
            font-size: 13px;
            font-family: inherit;
            width: 100%;
        }

        .header-search input::placeholder {
            color: var(--rg-text-muted);
        }

        @media (max-width: 768px) {
            .header-search {
                display: none;
            }
        }

        header {
            background: rgba(24, 14, 22, 0.96);
            border-bottom: 1px solid rgba(86, 210, 160, 0.2);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
            backdrop-filter: blur(10px);
            padding: 14px 0;
        }

        .header-content {
            max-width: 1216px;
            padding: 0 16px;
        }

        .logo-icon {
            width: 52px;
            height: 52px;
            border-radius: 8px;
            background: linear-gradient(160deg, #f5cb38 0%, #d7a319 100%);
            box-shadow: 0 0 14px rgba(238, 209, 41, 0.25);
            animation: none;
        }

        .logo-text h1 {
            background: none;
            -webkit-background-clip: border-box;
            -webkit-text-fill-color: initial;
            background-clip: border-box;
            color: var(--rg-yellow-300);
            font-size: 20px;
            line-height: 1;
            letter-spacing: 0.5px;
        }

        .logo-text .subtitle {
            color: var(--rg-text-muted);
            letter-spacing: 2px;
        }

        .balance-display {
            background: linear-gradient(180deg, rgba(23, 145, 99, 0.2), rgba(23, 145, 99, 0.08));
            border: 1px solid rgba(86, 210, 160, 0.45);
            border-radius: 6px;
            box-shadow: none;
            padding: 6px 14px;
        }

        .balance-label {
            color: var(--rg-primary-100);
            letter-spacing: 0.5px;
        }

        .balance-amount {
            font-size: 20px;
            line-height: 1;
            color: var(--rg-text-50);
        }

        .btn {
            border-radius: 4px;
            border: 1px solid transparent;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.2px;
            padding: 11px 16px;
            transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
        }

        .btn:hover {
            transform: translateY(-1px);
        }

        .container {
            max-width: 1216px;
            padding: 24px 16px 48px;
        }

        .hero-banner {
            border-radius: 8px;
            border: 1px solid rgba(82, 82, 82, 0.8);
            box-shadow: none;
            background:
                linear-gradient(92deg, rgba(18, 14, 20, 0.85) 0%, rgba(34, 17, 29, 0.5) 45%, rgba(50, 22, 35, 0.4) 100%),
                url('assets/backgrounds/hero_bg.png') center/cover no-repeat;
            padding: 44px 42px;
            margin-bottom: 28px;
        }

        .hero-banner::before {
            background: repeating-linear-gradient(
                130deg,
                rgba(255, 255, 255, 0.04),
                rgba(255, 255, 255, 0.04) 36px,
                transparent 36px,
                transparent 72px
            );
        }

        .hero-title {
            font-size: 30px;
            letter-spacing: 0.3px;
            color: var(--rg-text-50);
        }

        .hero-subtitle {
            color: var(--rg-text-100);
            font-size: 14px;
        }

        .hero-highlight {
            color: var(--rg-yellow-300);
            font-weight: 800;
        }

        .hero-stats {
            border-radius: 8px;
            border: 1px solid rgba(240, 240, 240, 0.35);
            background: rgba(52, 34, 44, 0.38);
            padding: 26px 30px;
            backdrop-filter: blur(2px);
        }

        .stats-label {
            color: var(--rg-text-100);
        }

        .stats-value {
            color: var(--rg-yellow-300);
        }

        .stats-info {
            color: var(--rg-primary-100);
        }

        .hero-tag {
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            padding: 8px 14px;
        }

        .tag-hot {
            background: #bc3146;
            color: var(--rg-text-50);
            animation: none;
        }

        .tag-games {
            background: var(--rg-yellow-300);
            color: #101010;
        }

        .btn-play {
            border-radius: 4px;
            box-shadow: none;
            background: var(--rg-primary-200);
            border: 1px solid var(--rg-primary-300);
            color: var(--rg-text-50);
            font-size: 15px;
        }

        .btn-play:hover {
            box-shadow: none;
            transform: translateY(-1px);
        }

        .btn-bonus-wheel {
            border-radius: 4px;
            font-size: 16px;
        }

        .section-header {
            margin: 12px 0 14px;
        }

        .section-title {
            color: var(--rg-yellow-300);
            font-size: 18px;
            letter-spacing: 0.3px;
        }

        .modal {
            background: rgba(20, 12, 18, 0.94);
            padding: 22px 16px;
        }

        .modal-content {
            max-width: 1216px;
        }

        .back-btn {
            border-radius: 4px;
            border: 1px solid var(--rg-neutral-200);
            background: rgba(43, 43, 43, 0.8);
            color: var(--rg-text-50);
            margin-bottom: 14px;
        }

        .slot-container {
            border-radius: 8px;
            border: 1px solid rgba(82, 82, 82, 0.95);
            background:
                linear-gradient(180deg, rgba(35, 18, 31, 0.88) 0%, rgba(47, 22, 48, 0.92) 100%),
                url('assets/backgrounds/slot_bg.png') center/cover no-repeat;
            box-shadow: 0 16px 35px rgba(0, 0, 0, 0.42);
        }

        .slot-header {
            background: linear-gradient(90deg, rgba(17, 12, 18, 0.95), rgba(27, 15, 24, 0.9));
            border-bottom: 1px solid rgba(238, 209, 41, 0.35);
            padding: 22px 24px;
        }

        .slot-title {
            font-size: 22px;
            color: var(--rg-text-50);
        }

        .payout-label {
            color: var(--rg-yellow-300);
        }

        .payout-value {
            color: var(--rg-yellow-300);
        }

        .slot-body {
            padding: 26px;
        }

        .reels-container,
        .bet-controls {
            border-radius: 8px;
            border: 1px solid rgba(82, 82, 82, 0.95);
            box-shadow: none;
        }

        .reel-cell {
            border-radius: 8px;
            border: 2px solid rgba(238, 209, 41, 0.5);
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
        }

        .spin-btn {
            border-radius: 4px;
            border: 1px solid var(--rg-primary-300);
            background: var(--rg-primary-200);
            box-shadow: none;
            color: var(--rg-text-50);
            font-size: 16px;
            letter-spacing: 0.3px;
        }

        .spin-btn:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: none;
        }

        .message-display {
            border-radius: 8px;
            font-size: 14px;
            padding: 18px;
            border-width: 1px;
        }

        .message-win {
            background: rgba(4, 170, 103, 0.16);
            border-color: rgba(86, 210, 160, 0.45);
            color: #8df6c8;
        }

        .message-lose {
            background: rgba(238, 41, 45, 0.16);
            border-color: rgba(255, 149, 151, 0.45);
            color: #ffb3b4;
        }

        .win-amount {
            border-radius: 4px;
            border: 1px solid rgba(238, 209, 41, 0.5);
            background: rgba(238, 209, 41, 0.2);
            box-shadow: none;
            color: var(--rg-yellow-200);
            font-size: 34px;
            padding: 12px 20px;
        }

        .stats-panel {
            background: linear-gradient(140deg, #1f111b 0%, #221523 48%, #2a2133 100%);
            border: 1px solid rgba(82, 82, 82, 0.95);
            border-radius: 8px;
            box-shadow: none;
            padding: 20px;
        }

        .stats-panel h3,
        .stats-panel h4 {
            color: var(--rg-yellow-300);
        }

        .stats-subtitle,
        .shortcut-hint {
            color: var(--rg-text-200);
        }

        .stats-card {
            background: rgba(43, 43, 43, 0.8);
            border: 1px solid rgba(82, 82, 82, 0.9);
            border-radius: 4px;
        }

        .stats-card-label {
            color: var(--rg-text-muted);
        }

        .stats-card-value {
            color: var(--rg-text-50);
        }

        .stats-games-list li {
            border-radius: 4px;
            background: rgba(43, 43, 43, 0.65);
            border: 1px solid rgba(82, 82, 82, 0.8);
        }

        .qa-tools {
            margin-top: 18px;
            border-radius: 6px;
            border: 1px dashed rgba(238, 209, 41, 0.4);
            background: rgba(16, 10, 16, 0.72);
            padding: 12px;
        }

        .qa-tools-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .qa-tools-title {
            color: var(--rg-yellow-300);
            font-size: 13px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.7px;
        }

        .qa-toggle-btn {
            border: 1px solid rgba(82, 82, 82, 0.95);
            background: rgba(43, 43, 43, 0.8);
            color: var(--rg-text-100);
            border-radius: 4px;
            font-size: 11px;
            font-weight: 700;
            padding: 6px 10px;
            cursor: pointer;
            text-transform: uppercase;
        }

        .qa-toggle-btn:hover {
            border-color: rgba(238, 209, 41, 0.45);
            color: var(--rg-yellow-300);
        }

        .qa-tools-body {
            display: none;
            margin-top: 10px;
        }

        .qa-tools-body.active {
            display: grid;
            gap: 10px;
        }

        .qa-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
        }

        .qa-row-group {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }

        .qa-reset-options {
            margin-top: -2px;
        }

        .qa-check {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--rg-text-100);
            font-size: 12px;
            cursor: pointer;
            user-select: none;
        }

        .qa-check input[type="checkbox"] {
            accent-color: var(--rg-primary-100);
            width: 14px;
            height: 14px;
        }

        .qa-label {
            color: var(--rg-text-muted);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .qa-input,
        .qa-select {
            min-height: 34px;
            border-radius: 4px;
            border: 1px solid rgba(82, 82, 82, 0.9);
            background: rgba(30, 28, 34, 0.95);
            color: var(--rg-text-50);
            font-size: 13px;
            padding: 8px 10px;
        }

        .qa-input {
            flex: 1 1 220px;
        }

        .qa-select {
            flex: 1 1 160px;
        }

        .qa-btn {
            border: 1px solid rgba(82, 82, 82, 0.95);
            border-radius: 4px;
            background: rgba(43, 43, 43, 0.8);
            color: var(--rg-text-100);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.45px;
            padding: 8px 10px;
            text-transform: uppercase;
            cursor: pointer;
        }

        .qa-btn:hover {
            border-color: rgba(238, 209, 41, 0.45);
            color: var(--rg-yellow-300);
        }

        .qa-btn.qa-btn-primary {
            background: rgba(4, 170, 103, 0.2);
            border-color: rgba(4, 170, 103, 0.45);
            color: #8df6c8;
        }

        .qa-btn.qa-btn-danger {
            background: rgba(238, 41, 45, 0.18);
            border-color: rgba(238, 41, 45, 0.45);
            color: #ffb3b4;
        }

        .qa-state-line {
            color: var(--rg-text-100);
            font-size: 11px;
        }

        .qa-status {
            min-height: 20px;
            color: var(--rg-text-muted);
            font-size: 12px;
        }

        .qa-status.qa-status-good {
            color: #8df6c8;
        }

        .qa-status.qa-status-warn {
            color: #ffcf82;
        }

        .qa-status.qa-status-error {
            color: #ffb3b4;
        }

        footer {
            background: rgba(20, 12, 20, 0.95);
            border-top: 1px solid rgba(82, 82, 82, 0.8);
        }

        .footer-column h4 {
            color: var(--rg-yellow-300);
            letter-spacing: 0.2px;
        }

        .footer-column a {
            color: var(--rg-text-100);
        }

        .footer-column a:hover {
            color: var(--rg-primary-100);
        }

        .footer-bottom {
            color: var(--rg-text-muted);
            border-top-color: rgba(82, 82, 82, 0.8);
        }

        /* 5gringos theme overrides for new components */
        .level-badge {
            background: rgba(43, 43, 43, 0.8);
        }

        .xp-bar {
            background: rgba(43, 43, 43, 0.8);
            border-color: rgba(82, 82, 82, 0.8);
        }

        .xp-bar-fill {
            background: linear-gradient(90deg, var(--rg-primary-200), var(--rg-primary-100));
        }

        .daily-bonus-panel {
            background: linear-gradient(140deg, #1f111b 0%, #221523 48%, #2a2133 100%);
            border: 1px solid rgba(82, 82, 82, 0.95);
            border-radius: 8px;
        }

        .daily-bonus-panel h3 {
            color: var(--rg-yellow-300);
        }

        .streak-counter {
            color: var(--rg-text-200);
        }

        .daily-day {
            border-color: rgba(82, 82, 82, 0.8);
            background: rgba(43, 43, 43, 0.5);
        }

        .day-number { color: var(--rg-text-muted); }
        .day-reward { color: var(--rg-text-50); }
        .day-xp { color: var(--rg-primary-100); }

        .daily-claim-btn {
            background: var(--rg-primary-200) !important;
            border: 1px solid var(--rg-primary-300) !important;
        }

        .daily-skip-btn {
            background: rgba(43, 43, 43, 0.8) !important;
            color: var(--rg-text-100) !important;
            border: 1px solid rgba(82, 82, 82, 0.8) !important;
        }

        .wheel-panel {
            background: linear-gradient(140deg, #1f111b 0%, #221523 48%, #2a2133 100%);
            border: 1px solid rgba(82, 82, 82, 0.95);
            border-radius: 8px;
        }

        .wheel-panel h3 {
            color: var(--rg-yellow-300);
        }

        .filter-tab {
            border-color: rgba(82, 82, 82, 0.8);
            background: rgba(43, 43, 43, 0.6);
            color: var(--rg-text-100);
        }

        .filter-tab:hover {
            border-color: var(--rg-primary-200);
            color: var(--rg-primary-100);
        }

        .filter-tab-active {
            background: var(--rg-primary-200);
            border-color: var(--rg-primary-200);
            color: var(--rg-text-50);
        }

        .win-ticker-bar {
            background: rgba(43, 43, 43, 0.6);
            border-color: rgba(82, 82, 82, 0.6);
            border-radius: 4px;
        }

        .ticker-item { color: var(--rg-text-50); }
        .ticker-sep { color: var(--rg-yellow-300); }
        .ticker-time { color: var(--rg-text-muted); }

        .balance-up {
            animation: balanceFlashGreen5g 0.5s ease-out;
        }

        .balance-down {
            animation: balanceFlashRed5g 0.5s ease-out;
        }

        @keyframes balanceFlashGreen5g {
            0%, 100% { box-shadow: none; }
            50% { box-shadow: 0 0 20px rgba(86, 210, 160, 0.6); }
        }

        @keyframes balanceFlashRed5g {
            0%, 100% { box-shadow: none; }
            50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.6); }
        }

        @media (max-width: 980px) {
            .logo-text h1 {
                font-size: 18px;
            }

            .balance-amount {
                font-size: 18px;
            }

            .hero-banner {
                padding: 30px 22px;
            }

            .hero-title {
                font-size: 26px;
            }

            .hero-subtitle {
                font-size: 13px;
            }

            .section-title {
                font-size: 16px;
            }

            .slot-title {
                font-size: 20px;
            }

            .spin-btn {
                font-size: 15px;
            }
        }

        @media (max-width: 640px) {
            .header-content {
                flex-wrap: wrap;
                gap: 10px;
            }

            .header-actions {
                width: 100%;
                justify-content: space-between;
            }

            .btn {
                padding: 10px 12px;
            }

            .hero-title {
                font-size: 22px;
            }

            .section-title {
                font-size: 15px;
            }

            .games-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .slot-title {
                font-size: 18px;
            }
        }

        /* ===== Auto-Spin & Spin Row ===== */
        .spin-row {
            display: flex;
            gap: 12px;
            align-items: stretch;
        }

        .spin-row .spin-btn {
            flex: 1;
        }

        .auto-spin-btn {
            padding: 16px 24px;
            background: var(--rg-neutral-300, #2b2b2b);
            color: var(--rg-text-50, #f0f0f0);
            border: 1px solid var(--rg-neutral-200, #525252);
            border-radius: 4px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
            letter-spacing: 0.5px;
            min-width: 80px;
        }

        .auto-spin-btn:hover {
            transform: translateY(-1px);
            border-color: var(--rg-primary-200, #179163);
            color: var(--rg-primary-100, #56d2a0);
        }

        .auto-spin-active {
            background: linear-gradient(135deg, #ef4444, #dc2626) !important;
            animation: autoSpinPulse 1s ease-in-out infinite;
        }

        @keyframes autoSpinPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
            50% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.6); }
        }

        /* ===== Ticker Animation ===== */
        .ticker-content {
            animation: tickerScroll 20s linear infinite;
        }

        @keyframes tickerScroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* ═══════════════════════════════════════════════════════════════════
           PRAGMATIC PLAY-STYLE SLOT UI — Full-screen layout with bottom bar
           ═══════════════════════════════════════════════════════════════════ */

        @keyframes slotModalEnter {
            0%   { opacity: 0; transform: scale(1.04); }
            100% { opacity: 1; transform: scale(1); }
        }

        /* Reset the parent .modal wrapper so the fullscreen slot isn't clipped
           by the 22-40px modal padding that other modals (stats, settings) need. */
        #slotModal.active {
            padding: 0;
            overflow: hidden;
        }

        .slot-modal-fullscreen {
            display: flex !important;
            flex-direction: column;
            width: 100%;
            max-width: none;            /* override .modal-content max-width: 1200px */
            height: 100vh;
            height: 100dvh;             /* Dynamic viewport height — accounts for mobile browser chrome */
            max-height: 100vh;
            max-height: 100dvh;
            padding: 0 !important;
            border-radius: 0 !important;
            overflow: hidden;
            background: #000 !important;
            animation: slotModalEnter 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
        }

        /* Top Bar — Slim Pragmatic Play style */
        .slot-top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 12px;
            background-image: var(--slot-top-bg, linear-gradient(180deg, #0a0a12 0%, #08080e 100%)), var(--slot-chrome-image, none);
            background-size: cover, cover;
            background-position: center, center;
            background-blend-mode: normal, soft-light;
            border-bottom: 1px solid var(--slot-panel-border, rgba(255,255,255,0.04));
            flex-shrink: 0;
            min-height: 42px;
            font-family: var(--slot-ui-font, "Trebuchet MS", "Segoe UI", sans-serif);
            position: relative;
            overflow: hidden;
        }

        .slot-close-btn {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.1);
            color: #64748b;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        .slot-close-btn:hover {
            background: rgba(239, 68, 68, 0.4);
            border-color: rgba(239, 68, 68, 0.6);
            color: #fff;
        }

        /* ═══════════════════════════════════════════════════════════════════════════════════ */
        /* GAME-SPECIFIC VISUAL THEMES - Unique UI for Each Slot Machine (All 60 Games)        */
        /* ═══════════════════════════════════════════════════════════════════════════════════ */

        /* ═══ CLUSTER GAMES (6x5 grids) - Ornate Borders with Cosmic/Divine Theming ═══ */

        /* GAME 1: Candy Cascade 1000 (sugar_rush) */
        .slot-modal-fullscreen[data-game-id="sugar_rush"] .reels-container {
            border: 10px solid #ff6fd8;
            background: linear-gradient(180deg, #3d1232 0%, #1a0a14 100%);
            box-shadow: 0 0 50px rgba(255, 111, 216, 0.5), inset 0 0 80px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="sugar_rush"] .reel-cell {
            background: linear-gradient(135deg, rgba(255, 111, 216, 0.15) 0%, rgba(247, 165, 49, 0.15) 100%);
            border: 2px solid rgba(255, 111, 216, 0.6);
            box-shadow: inset 0 0 12px rgba(255, 111, 216, 0.25), 0 0 8px rgba(255, 111, 216, 0.2);
        }

        /* GAME 2: Fruit Fiesta Deluxe (lucky_777) */
        .slot-modal-fullscreen[data-game-id="lucky_777"] .reels-container {
            border: 10px solid #f093fb;
            background: linear-gradient(180deg, #2e1435 0%, #160a18 100%);
            box-shadow: 0 0 50px rgba(240, 147, 251, 0.4), inset 0 0 80px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="lucky_777"] .reel-cell {
            background: linear-gradient(135deg, rgba(240, 147, 251, 0.15) 0%, rgba(245, 87, 108, 0.15) 100%);
            border: 2px solid rgba(240, 147, 251, 0.5);
            box-shadow: inset 0 0 12px rgba(240, 147, 251, 0.2), 0 0 8px rgba(240, 147, 251, 0.15);
        }

        /* GAME 3: Halls of Thunder (gates_olympus) */
        .slot-modal-fullscreen[data-game-id="gates_olympus"] .reels-container {
            border: 10px solid;
            border-image: linear-gradient(135deg, #667eea, #f5c842) 1;
            background: linear-gradient(180deg, #0f1a3d 0%, #060b1a 100%);
            box-shadow: 0 0 60px rgba(102, 126, 234, 0.6), 0 0 40px rgba(245, 200, 66, 0.4), inset 0 0 80px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="gates_olympus"] .reel-cell {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(245, 200, 66, 0.1) 100%);
            border: 2px solid rgba(102, 126, 234, 0.7);
            box-shadow: inset 0 0 12px rgba(245, 200, 66, 0.2), 0 0 10px rgba(102, 126, 234, 0.3);
        }

        /* GAME 4: Starlight Empress (starlight_princess) */
        .slot-modal-fullscreen[data-game-id="starlight_princess"] .reels-container {
            border: 10px solid #e040fb;
            background: linear-gradient(180deg, #2a0a3d 0%, #0d041a 100%);
            box-shadow: 0 0 60px rgba(224, 64, 251, 0.5), 0 0 40px rgba(77, 208, 225, 0.3), inset 0 0 80px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="starlight_princess"] .reel-cell {
            background: linear-gradient(135deg, rgba(224, 64, 251, 0.15) 0%, rgba(77, 208, 225, 0.1) 100%);
            border: 2px solid rgba(224, 64, 251, 0.6);
            box-shadow: inset 0 0 12px rgba(224, 64, 251, 0.2), 0 0 8px rgba(77, 208, 225, 0.2);
        }

        /* GAME 5: Olympus Rising (olympus_rising) */
        .slot-modal-fullscreen[data-game-id="olympus_rising"] .reels-container {
            border: 10px solid;
            border-image: linear-gradient(135deg, #5c6bc0, #ff8a65) 1;
            background: linear-gradient(180deg, #0d1a40 0%, #060a1f 100%);
            box-shadow: 0 0 60px rgba(92, 107, 192, 0.5), 0 0 40px rgba(255, 138, 101, 0.3), inset 0 0 80px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="olympus_rising"] .reel-cell {
            background: linear-gradient(135deg, rgba(92, 107, 192, 0.15) 0%, rgba(255, 138, 101, 0.1) 100%);
            border: 2px solid rgba(92, 107, 192, 0.7);
            box-shadow: inset 0 0 12px rgba(255, 138, 101, 0.15), 0 0 10px rgba(92, 107, 192, 0.25);
        }

        /* GAME 6: Buffalo Stampede (buffalo_stampede) */
        .slot-modal-fullscreen[data-game-id="buffalo_stampede"] .reels-container {
            border: 10px solid #ff6f00;
            background: linear-gradient(180deg, #2a1a08 0%, #140d04 100%);
            box-shadow: 0 0 50px rgba(255, 111, 0, 0.4), inset 0 0 80px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="buffalo_stampede"] .reel-cell {
            background: linear-gradient(135deg, rgba(255, 111, 0, 0.15) 0%, rgba(215, 123, 83, 0.1) 100%);
            border: 2px solid rgba(255, 111, 0, 0.5);
            box-shadow: inset 0 0 12px rgba(255, 111, 0, 0.15), 0 0 8px rgba(255, 111, 0, 0.2);
        }

        /* ═══ CLASSIC PAYLINE GAMES (3x3, 5x3, 5x4) - Traditional Slot Machine Styling ═══ */

        /* GAME 7: Salsa Spins (hot_chillies) - 3x3 */
        .slot-modal-fullscreen[data-game-id="hot_chillies"] .reels-container {
            border: 6px solid #f77f00;
            background: linear-gradient(180deg, #3a1008 0%, #1a0804 100%);
            box-shadow: 0 0 40px rgba(247, 127, 0, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="hot_chillies"] .reel-cell {
            background: linear-gradient(135deg, rgba(247, 127, 0, 0.12) 0%, rgba(214, 40, 40, 0.1) 100%);
            border: 1px solid rgba(247, 127, 0, 0.5);
            box-shadow: inset 0 0 8px rgba(247, 127, 0, 0.12);
        }

        /* GAME 8: Inferno Jester (fire_joker) - 3x3 */
        .slot-modal-fullscreen[data-game-id="fire_joker"] .reels-container {
            border: 8px solid #ff0844;
            background: linear-gradient(180deg, #2a0812 0%, #140408 100%);
            box-shadow: 0 0 50px rgba(255, 8, 68, 0.5), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="fire_joker"] .reel-cell {
            background: linear-gradient(135deg, rgba(255, 8, 68, 0.2) 0%, rgba(255, 177, 153, 0.1) 100%);
            border: 2px solid rgba(255, 8, 68, 0.6);
            box-shadow: inset 0 0 10px rgba(255, 8, 68, 0.2), 0 0 6px rgba(255, 8, 68, 0.3);
        }

        /* GAME 9: Lucky Dragon (lucky_dragon) - 3x3 */
        .slot-modal-fullscreen[data-game-id="lucky_dragon"] .reels-container {
            border: 8px solid;
            border-image: linear-gradient(135deg, #c62828, #ffd600) 1;
            background: linear-gradient(180deg, #1a0a1a 0%, #0a0505 100%);
            box-shadow: 0 0 40px rgba(198, 40, 40, 0.4), 0 0 30px rgba(255, 214, 0, 0.2), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="lucky_dragon"] .reel-cell {
            background: linear-gradient(135deg, rgba(198, 40, 40, 0.15) 0%, rgba(255, 214, 0, 0.1) 100%);
            border: 2px solid rgba(198, 40, 40, 0.5);
            box-shadow: inset 0 0 10px rgba(255, 214, 0, 0.12);
        }

        /* GAME 10: Raging Bull (black_bull) - 5x4 */
        .slot-modal-fullscreen[data-game-id="black_bull"] .reels-container {
            border: 8px solid #e94560;
            background: linear-gradient(180deg, #2a0a0a 0%, #120505 100%);
            box-shadow: 0 0 40px rgba(233, 69, 96, 0.4), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="black_bull"] .reel-cell {
            background: linear-gradient(135deg, rgba(233, 69, 96, 0.12) 0%, rgba(26, 26, 46, 0.2) 100%);
            border: 1px solid rgba(233, 69, 96, 0.4);
            box-shadow: inset 0 0 8px rgba(233, 69, 96, 0.1);
        }

        /* GAME 11: Blazing Fruits (super_hot) - 5x3 */
        .slot-modal-fullscreen[data-game-id="super_hot"] .reels-container {
            border: 8px solid #ffd200;
            background: linear-gradient(180deg, #2a1a05 0%, #140d02 100%);
            box-shadow: 0 0 50px rgba(255, 210, 0, 0.4), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="super_hot"] .reel-cell {
            background: linear-gradient(135deg, rgba(255, 210, 0, 0.15) 0%, rgba(247, 151, 30, 0.1) 100%);
            border: 2px solid rgba(255, 210, 0, 0.5);
            box-shadow: inset 0 0 10px rgba(255, 210, 0, 0.15);
        }

        /* GAME 12: Alpha Pack (wolf_gold) - 5x3 */
        .slot-modal-fullscreen[data-game-id="wolf_gold"] .reels-container {
            border: 8px solid #d4a836;
            background: linear-gradient(180deg, #261a08 0%, #110c04 100%);
            box-shadow: 0 0 40px rgba(212, 168, 54, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="wolf_gold"] .reel-cell {
            background: linear-gradient(135deg, rgba(212, 168, 54, 0.12) 0%, rgba(139, 105, 20, 0.1) 100%);
            border: 1px solid rgba(212, 168, 54, 0.4);
            box-shadow: inset 0 0 8px rgba(212, 168, 54, 0.1);
        }

        /* GAME 13: Reel Catch (big_bass) - 5x3 */
        .slot-modal-fullscreen[data-game-id="big_bass"] .reels-container {
            border: 8px solid #48cae4;
            background: linear-gradient(180deg, #061a2a 0%, #030d15 100%);
            box-shadow: 0 0 40px rgba(72, 202, 228, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="big_bass"] .reel-cell {
            background: linear-gradient(135deg, rgba(72, 202, 228, 0.12) 0%, rgba(0, 119, 182, 0.1) 100%);
            border: 1px solid rgba(72, 202, 228, 0.4);
            box-shadow: inset 0 0 8px rgba(72, 202, 228, 0.1);
        }

        /* GAME 14: Tome of Ra (book_dead) - 5x3 */
        .slot-modal-fullscreen[data-game-id="book_dead"] .reels-container {
            border: 8px solid #c7a94e;
            background: linear-gradient(180deg, #2a1a08 0%, #140d04 100%);
            box-shadow: 0 0 40px rgba(199, 169, 78, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="book_dead"] .reel-cell {
            background: linear-gradient(135deg, rgba(199, 169, 78, 0.12) 0%, rgba(107, 58, 10, 0.1) 100%);
            border: 1px solid rgba(199, 169, 78, 0.4);
            box-shadow: inset 0 0 8px rgba(199, 169, 78, 0.1);
        }

        /* GAME 15: Cosmic Gems (starburst_xxl) - 5x3 */
        .slot-modal-fullscreen[data-game-id="starburst_xxl"] .reels-container {
            border: 8px solid;
            border-image: linear-gradient(135deg, #a855f7, #06b6d4) 1;
            background: linear-gradient(180deg, #1a0a2e 0%, #0a0514 100%);
            box-shadow: 0 0 50px rgba(168, 85, 247, 0.4), 0 0 30px rgba(6, 182, 212, 0.2), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="starburst_xxl"] .reel-cell {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);
            border: 2px solid rgba(168, 85, 247, 0.5);
            box-shadow: inset 0 0 10px rgba(6, 182, 212, 0.15);
        }

        /* GAME 16: Temple Quest (gonzos_quest) - 5x3 */
        .slot-modal-fullscreen[data-game-id="gonzos_quest"] .reels-container {
            border: 8px solid #3cba92;
            background: linear-gradient(180deg, #0a2a15 0%, #05140a 100%);
            box-shadow: 0 0 40px rgba(60, 186, 146, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="gonzos_quest"] .reel-cell {
            background: linear-gradient(135deg, rgba(60, 186, 146, 0.12) 0%, rgba(11, 163, 96, 0.1) 100%);
            border: 1px solid rgba(60, 186, 146, 0.4);
            box-shadow: inset 0 0 8px rgba(60, 186, 146, 0.1);
        }

        /* ═══ EGYPTIAN & MYTHOLOGY GAMES ═══ */

        /* GAME 17: Pharaoh's Legacy (pharaoh_legacy) */
        .slot-modal-fullscreen[data-game-id="pharaoh_legacy"] .reels-container {
            border: 8px solid #d4a636;
            background: linear-gradient(180deg, #2a1a08 0%, #140d04 100%);
            box-shadow: 0 0 40px rgba(212, 166, 54, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="pharaoh_legacy"] .reel-cell {
            background: linear-gradient(135deg, rgba(212, 166, 54, 0.12) 0%, rgba(141, 110, 99, 0.1) 100%);
            border: 1px solid rgba(212, 166, 54, 0.4);
            box-shadow: inset 0 0 8px rgba(212, 166, 54, 0.1);
        }

        /* GAME 18: Twin Helix (twin_helix) */
        .slot-modal-fullscreen[data-game-id="twin_helix"] .reels-container {
            border: 8px solid;
            border-image: linear-gradient(135deg, #e040fb, #00e5ff) 1;
            background: linear-gradient(180deg, #1a0a2e 0%, #0a0514 100%);
            box-shadow: 0 0 50px rgba(224, 64, 251, 0.4), 0 0 30px rgba(0, 229, 255, 0.2), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="twin_helix"] .reel-cell {
            background: linear-gradient(135deg, rgba(224, 64, 251, 0.15) 0%, rgba(0, 229, 255, 0.1) 100%);
            border: 2px solid rgba(224, 64, 251, 0.5);
            box-shadow: inset 0 0 10px rgba(0, 229, 255, 0.12);
        }

        /* GAME 19: Quantum Burst (quantum_burst) */
        .slot-modal-fullscreen[data-game-id="quantum_burst"] .reels-container {
            border: 8px solid;
            border-image: linear-gradient(135deg, #6a1b9a, #00e5ff) 1;
            background: linear-gradient(180deg, #1a0a2e 0%, #0a0514 100%);
            box-shadow: 0 0 50px rgba(106, 27, 154, 0.4), 0 0 30px rgba(0, 229, 255, 0.2), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="quantum_burst"] .reel-cell {
            background: linear-gradient(135deg, rgba(106, 27, 154, 0.15) 0%, rgba(0, 229, 255, 0.1) 100%);
            border: 2px solid rgba(106, 27, 154, 0.5);
            box-shadow: inset 0 0 10px rgba(0, 229, 255, 0.12);
        }

        /* GAME 20: Olympian Gods (olympian_gods) */
        .slot-modal-fullscreen[data-game-id="olympian_gods"] .reels-container {
            border: 8px solid #ffd54f;
            background: linear-gradient(180deg, #2a1a08 0%, #140d04 100%);
            box-shadow: 0 0 50px rgba(255, 213, 79, 0.4), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="olympian_gods"] .reel-cell {
            background: linear-gradient(135deg, rgba(255, 213, 79, 0.15) 0%, rgba(230, 81, 0, 0.1) 100%);
            border: 2px solid rgba(255, 213, 79, 0.5);
            box-shadow: inset 0 0 10px rgba(255, 213, 79, 0.12);
        }

        /* GAME 21: Ares Blade (ares_blade) */
        .slot-modal-fullscreen[data-game-id="ares_blade"] .reels-container {
            border: 8px solid #b71c1c;
            background: linear-gradient(180deg, #1a0505 0%, #0d0202 100%);
            box-shadow: 0 0 40px rgba(183, 28, 28, 0.4), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="ares_blade"] .reel-cell {
            background: linear-gradient(135deg, rgba(183, 28, 28, 0.15) 0%, rgba(255, 111, 0, 0.1) 100%);
            border: 2px solid rgba(183, 28, 28, 0.5);
            box-shadow: inset 0 0 10px rgba(183, 28, 28, 0.12);
        }

        /* GAME 22: Viking Voyage (viking_voyage) */
        .slot-modal-fullscreen[data-game-id="viking_voyage"] .reels-container {
            border: 8px solid;
            border-image: linear-gradient(135deg, #00acc1, #ffd700) 1;
            background: linear-gradient(180deg, #0d1a2e 0%, #060d15 100%);
            box-shadow: 0 0 40px rgba(0, 172, 193, 0.3), 0 0 30px rgba(255, 215, 0, 0.2), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="viking_voyage"] .reel-cell {
            background: linear-gradient(135deg, rgba(0, 172, 193, 0.12) 0%, rgba(255, 215, 0, 0.1) 100%);
            border: 1px solid rgba(0, 172, 193, 0.4);
            box-shadow: inset 0 0 8px rgba(0, 172, 193, 0.1);
        }

        /* ═══ MODERN & SPECIAL THEME GAMES ═══ */

        /* GAME 23: Neon Nights (neon_nights) */
        .slot-modal-fullscreen[data-game-id="neon_nights"] .reels-container {
            border: 8px solid;
            border-image: linear-gradient(135deg, #e91e63, #00bcd4) 1;
            background: linear-gradient(180deg, #1a0a20 0%, #0a0510 100%);
            box-shadow: 0 0 50px rgba(233, 30, 99, 0.4), 0 0 30px rgba(0, 188, 212, 0.2), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="neon_nights"] .reel-cell {
            background: linear-gradient(135deg, rgba(233, 30, 99, 0.15) 0%, rgba(0, 188, 212, 0.1) 100%);
            border: 2px solid rgba(233, 30, 99, 0.5);
            box-shadow: inset 0 0 10px rgba(0, 188, 212, 0.12);
        }

        /* GAME 24: Diamond Vault (diamond_vault) */
        .slot-modal-fullscreen[data-game-id="diamond_vault"] .reels-container {
            border: 8px solid;
            border-image: linear-gradient(135deg, #283593, #e0e0e0) 1;
            background: linear-gradient(180deg, #0a0f2e 0%, #05080a 100%);
            box-shadow: 0 0 40px rgba(40, 53, 147, 0.3), 0 0 30px rgba(224, 224, 224, 0.1), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="diamond_vault"] .reel-cell {
            background: linear-gradient(135deg, rgba(40, 53, 147, 0.12) 0%, rgba(224, 224, 224, 0.08) 100%);
            border: 1px solid rgba(40, 53, 147, 0.4);
            box-shadow: inset 0 0 8px rgba(224, 224, 224, 0.08);
        }

        /* GAME 25: Golden Fortune (golden_fortune) */
        .slot-modal-fullscreen[data-game-id="golden_fortune"] .reels-container {
            border: 10px solid #ffd700;
            background: linear-gradient(180deg, #2a2a0f 0%, #151505 100%);
            box-shadow: 0 0 50px rgba(255, 215, 0, 0.4), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="golden_fortune"] .reel-cell {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 2px solid rgba(255, 215, 0, 0.5);
            box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.15);
        }

        /* ═══ NATURE & ANIMAL GAMES ═══ */

        /* GAME 26: Puppy Palace (puppy_palace) */
        .slot-modal-fullscreen[data-game-id="puppy_palace"] .reels-container {
            border: 8px solid #4caf50;
            background: linear-gradient(180deg, #0a2a0f 0%, #051408 100%);
            box-shadow: 0 0 40px rgba(76, 175, 80, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="puppy_palace"] .reel-cell {
            background: linear-gradient(135deg, rgba(76, 175, 80, 0.12) 0%, rgba(129, 199, 132, 0.1) 100%);
            border: 1px solid rgba(76, 175, 80, 0.4);
            box-shadow: inset 0 0 8px rgba(76, 175, 80, 0.1);
        }

        /* GAME 27: Crimson Fang (crimson_fang) */
        .slot-modal-fullscreen[data-game-id="crimson_fang"] .reels-container {
            border: 8px solid #b71c1c;
            background: linear-gradient(180deg, #1a0505 0%, #0d0202 100%);
            box-shadow: 0 0 40px rgba(183, 28, 28, 0.4), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="crimson_fang"] .reel-cell {
            background: linear-gradient(135deg, rgba(183, 28, 28, 0.15) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 2px solid rgba(183, 28, 28, 0.5);
            box-shadow: inset 0 0 10px rgba(183, 28, 28, 0.12);
        }

        /* GAME 28: Pirate's Fortune (pirate_fortune) */
        .slot-modal-fullscreen[data-game-id="pirate_fortune"] .reels-container {
            border: 8px solid #0097a7;
            background: linear-gradient(180deg, #0a1a2e 0%, #050d18 100%);
            box-shadow: 0 0 40px rgba(0, 151, 167, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="pirate_fortune"] .reel-cell {
            background: linear-gradient(135deg, rgba(0, 151, 167, 0.12) 0%, rgba(26, 35, 126, 0.1) 100%);
            border: 1px solid rgba(0, 151, 167, 0.4);
            box-shadow: inset 0 0 8px rgba(0, 151, 167, 0.1);
        }

        /* GAME 29: Great Rhino (great_rhino) */
        .slot-modal-fullscreen[data-game-id="great_rhino"] .reels-container {
            border: 8px solid #fdd835;
            background: linear-gradient(180deg, #2a2a08 0%, #141408 100%);
            box-shadow: 0 0 40px rgba(253, 216, 53, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="great_rhino"] .reel-cell {
            background: linear-gradient(135deg, rgba(253, 216, 53, 0.12) 0%, rgba(51, 105, 30, 0.1) 100%);
            border: 1px solid rgba(253, 216, 53, 0.4);
            box-shadow: inset 0 0 8px rgba(253, 216, 53, 0.1);
        }

        /* GAME 30: Bass Splash (bass_splash) */
        .slot-modal-fullscreen[data-game-id="bass_splash"] .reels-container {
            border: 8px solid #26c6da;
            background: linear-gradient(180deg, #061a2a 0%, #030d15 100%);
            box-shadow: 0 0 40px rgba(38, 198, 218, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="bass_splash"] .reel-cell {
            background: linear-gradient(135deg, rgba(38, 198, 218, 0.12) 0%, rgba(0, 96, 100, 0.1) 100%);
            border: 1px solid rgba(38, 198, 218, 0.4);
            box-shadow: inset 0 0 8px rgba(38, 198, 218, 0.1);
        }
        }

        .slot-top-info {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
            justify-content: center;
        }

        .slot-top-info .slot-title {
            font-size: 16px;
            font-weight: 700;
            margin: 0;
            color: #e2e8f0;
            white-space: nowrap;
            letter-spacing: 0.5px;
        }

        .slot-top-info .slot-provider {
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #475569; /* overridden per provider */
            margin: 0;
            background: rgba(255,255,255,0.04);
            border: 1px solid currentColor;
            border-radius: 3px;
            padding: 2px 7px;
            opacity: 0.85;
        }

        .slot-top-right {
            flex-shrink: 0;
        }

        .slot-top-right .slot-payout {
            text-align: right;
        }

        .slot-top-right .payout-label {
            font-size: 9px;
            color: #64748b;
            font-weight: 600;
            letter-spacing: 1px;
        }

        .slot-top-right .payout-value {
            font-size: 16px;
            font-weight: 800;
            color: #fbbf24;
        }

        /* Reel Area — fills remaining space */
        .slot-reel-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            padding: 8px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: background-size 0.5s ease;
        }

        /* Dark vignette overlay when a bg image is loaded — keeps reels readable */
        .slot-reel-area.has-bg-image::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(
                ellipse 55% 65% at center,
                rgba(0, 0, 0, 0.60) 0%,
                rgba(0, 0, 0, 0.35) 55%,
                rgba(0, 0, 0, 0.10) 100%
            );
            z-index: 0;
            pointer-events: none;
        }

        /* Subtle zoom during spin for dynamic feel */
        .slot-reel-area.has-bg-image.spinning-active {
            background-size: 108%;
        }

        /* When SDXL bg image is loaded, make reels-container semi-transparent
           so the themed background shows through around the edges */
        .slot-reel-area.has-bg-image .reels-container {
            background: rgba(8, 5, 12, 0.82) !important;
        }

        .slot-reel-area .reels-container {
            position: relative;
            /* z-index 9 lifts reels above the chrome ::after frame overlay (z-index 8)
               so provider frame strips never obscure the top/bottom symbol rows */
            z-index: 9;
            /* flex-shrink 0 prevents the flex column parent from squashing the container
               below its content height; rescaleReelGridToFit handles sizing explicitly */
            flex-shrink: 0;
            margin-bottom: 0;
            border-radius: 10px;
            padding: 4px;
            border: 1px solid rgba(251,191,36,0.2);
            box-shadow: 0 0 30px rgba(0,0,0,0.6), inset 0 0 40px rgba(0,0,0,0.4);
        }

        .slot-reel-area .reels {
            margin-bottom: 0;
        }

        /* ═══ PRAGMATIC PLAY BOTTOM BAR ═══ */
        .slot-bottom-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 8px 16px;
            background-image: var(--slot-bottom-bg, linear-gradient(180deg, #111118 0%, #08080e 100%)), var(--slot-chrome-image, none);
            background-size: cover, cover;
            background-position: center, center;
            background-blend-mode: normal, soft-light;
            border-top: 1px solid var(--slot-panel-border, rgba(255,255,255,0.06));
            flex-shrink: 0;
            min-height: 72px;
            font-family: var(--slot-ui-font, "Trebuchet MS", "Segoe UI", sans-serif);
            position: relative;
            overflow: hidden;
        }

        .slot-top-bar::after,
        .slot-bottom-bar::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: repeating-linear-gradient(
                var(--slot-stripe-angle, 35deg),
                rgba(255, 255, 255, 0.10) 0 3px,
                transparent 3px 15px
            );
            mix-blend-mode: soft-light;
            opacity: var(--slot-chrome-blend, 0.2);
        }

        .slot-top-bar > *,
        .slot-bottom-bar > * {
            position: relative;
            z-index: 1;
        }

        .slot-bar-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 4px 14px;
            background-image: var(--slot-panel-bg, rgba(255,255,255,0.03));
            border-radius: var(--slot-ui-radius, 8px);
            border: 1px solid var(--slot-panel-border, rgba(255,255,255,0.05));
            box-shadow: var(--slot-panel-shadow, none);
        }

        .slot-bar-label {
            font-size: 9px;
            font-weight: 600;
            color: #555;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        .slot-bar-value {
            font-size: 17px;
            font-weight: 800;
            color: #e2e8f0;
        }

        .slot-bar-balance {
            min-width: 110px;
        }

        .slot-bar-win {
            min-width: 110px;
        }

        .slot-win-value {
            color: #10b981;
            transition: all 0.3s;
        }

        /* Bet Controls: [-] BET [+] */
        .slot-bar-bet {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 4px;
        }

        .slot-bet-btn {
            width: 32px;
            height: 32px;
            border-radius: var(--slot-ui-radius, 50%);
            border: 1px solid var(--slot-panel-border, rgba(255,255,255,0.15));
            background: var(--slot-panel-bg, rgba(255,255,255,0.05));
            color: #94a3b8;
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .slot-bet-btn:hover {
            background: rgba(255,255,255,0.12);
            border-color: rgba(255,255,255,0.3);
            color: #fff;
        }

        .slot-bet-display {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 70px;
            padding: 4px 10px;
            background: var(--slot-panel-bg, rgba(255,255,255,0.03));
            border-radius: var(--slot-ui-radius, 8px);
            border: 1px solid var(--slot-panel-border, rgba(255,255,255,0.05));
            box-shadow: var(--slot-panel-shadow, none);
        }

        .slot-bet-display .slot-bar-value {
            color: #fbbf24;
            font-size: 17px;
        }

        /* Turbo Button */
        .slot-turbo-btn {
            width: 36px;
            height: 36px;
            border-radius: var(--slot-ui-radius, 50%);
            border: 1px solid var(--slot-panel-border, rgba(255,255,255,0.12));
            background: var(--slot-panel-bg, rgba(255,255,255,0.04));
            color: #555;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .slot-turbo-btn:hover {
            border-color: rgba(251,191,36,0.5);
            color: #fbbf24;
        }

        .slot-turbo-btn.turbo-active {
            background: rgba(251,191,36,0.12);
            border-color: rgba(251,191,36,0.5);
            color: #fbbf24;
            box-shadow: 0 0 8px rgba(251,191,36,0.3);
        }

        /* SPIN Button — Pragmatic Play style: large green circle with play triangle */
        .slot-spin-btn {
            width: 68px;
            height: 68px;
            border-radius: var(--slot-ui-radius, 50%);
            border: 3px solid var(--slot-spin-border, rgba(16, 185, 129, 0.8));
            background-image: var(--slot-spin-bg, radial-gradient(circle at 40% 35%, #14d990, #10b981 40%, #059669 100%)), var(--slot-chrome-image, none);
            background-size: cover, cover;
            background-position: center, center;
            background-blend-mode: normal, overlay;
            color: white;
            font-size: 13px;
            font-weight: 900;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--slot-spin-glow, 0 0 20px rgba(16,185,129,0.35), 0 2px 12px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.2));
            transition: all 0.15s ease;
            position: relative;
            letter-spacing: 1px;
            flex-shrink: 0;
        }

        /* Green glow ring around spin button */
        .slot-spin-btn::before {
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: 50%;
            border: 2px solid var(--slot-spin-ring, rgba(16,185,129,0.15));
            pointer-events: none;
        }

        .slot-spin-btn:hover:not(:disabled) {
            transform: scale(1.06);
            box-shadow: 0 0 30px rgba(16,185,129,0.5), 0 4px 20px rgba(0,0,0,0.5),
                        inset 0 2px 4px rgba(255,255,255,0.2);
            border-color: #10b981;
        }

        .slot-spin-btn:disabled {
            opacity: 0.55;
            cursor: not-allowed;
            transform: none;
            filter: grayscale(0.2);
        }
        /* Pulsing outer ring while reels are spinning */
        @keyframes spinBtnRingPulse {
            0%, 100% { transform: scale(1);   opacity: 0.15; }
            50%       { transform: scale(1.3); opacity: 0.4;  }
        }
        .slot-spin-btn:disabled::before {
            animation: spinBtnRingPulse 0.7s ease-in-out infinite !important;
        }

        .slot-spin-btn:active:not(:disabled) {
            transform: scale(0.94);
            box-shadow: 0 0 12px rgba(16,185,129,0.3), 0 1px 6px rgba(0,0,0,0.4);
        }

        .spin-btn-icon {
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
            margin-left: 2px;
        }

        .spin-btn-text {
            text-transform: uppercase;
            text-shadow: 0 1px 3px rgba(0,0,0,0.4);
        }

        /* Autoplay Button */
        .slot-auto-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.04);
            color: #555;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            font-size: 10px;
        }

        .auto-btn-icon {
            font-size: 15px;
            line-height: 1;
        }

        .auto-btn-label {
            font-size: 6px;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .slot-auto-btn:hover {
            border-color: rgba(255,255,255,0.3);
            color: #e2e8f0;
        }

        .slot-auto-btn.auto-spin-active {
            background: rgba(239, 68, 68, 0.2) !important;
            border-color: #ef4444 !important;
            color: #ef4444 !important;
            animation: autoSpinPulse 1s ease-in-out infinite;
        }

        /* Win display overlay in reel area */
        .slot-reel-area #messageDisplay {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
        }

        .slot-reel-area #winAnimation {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 150;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ═══ Bottom bar responsive ═══ */
        @media (max-width: 768px) {
            .slot-bottom-bar {
                gap: 4px;
                padding: 5px 6px;
                min-height: 56px;
            }

            .slot-bar-section {
                padding: 2px 6px;
            }

            .slot-bar-value {
                font-size: 13px;
            }

            .slot-bar-label {
                font-size: 8px;
            }

            .slot-bar-balance, .slot-bar-win {
                min-width: 60px;
            }

            .slot-spin-btn {
                width: 52px;
                height: 52px;
                font-size: 10px;
                border-width: 2px;
            }

            .slot-spin-btn::before {
                inset: -4px;
            }

            .slot-bet-btn {
                width: 26px;
                height: 26px;
                font-size: 14px;
            }

            .slot-turbo-btn, .slot-auto-btn {
                width: 30px;
                height: 30px;
            }

            .slot-bet-display {
                min-width: 50px;
            }

            .slot-bet-display .slot-bar-value {
                font-size: 14px;
            }

            .slot-top-info .slot-title {
                font-size: 14px;
            }

            .slot-reel-area {
                padding: 4px;
            }

            .slot-reel-area .reels-container {
                padding: 2px;
            }

            /* Scale down big win overlay on mobile */
            .pp-win-tier { font-size: 24px !important; }
            .pp-win-amount { font-size: 32px !important; }
            .pp-win-multiplier { font-size: 14px; }
            .pp-win-content { padding: 20px 30px; }
        }

        /* ═══ Ultra-Small Mobile (< 480px) ═══ */
        @media (max-width: 480px) {
            body {
                font-size: 14px;
            }

            .logo-text h1 {
                font-size: 18px;
            }

            .balance-amount {
                font-size: 16px;
            }

            .hero-title {
                font-size: 24px;
            }

            .games-grid {
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
                gap: 12px;
            }

            .reels[data-cols="3"] .reel-cell { width: 80px; height: 80px; }
            .reels[data-cols="5"][data-rows="3"] .reel-cell { width: 60px; height: 54px; }
            .reels[data-cols="5"][data-rows="4"] .reel-cell { width: 55px; height: 46px; }
            .reels[data-cols="6"] .reel-cell { width: 50px; height: 42px; }
            .reels[data-cols="7"] .reel-cell { width: 40px; height: 34px; }

            .slot-spin-btn {
                width: 48px;
                height: 48px;
                font-size: 9px;
            }
        }

        /* ═══ TOUCH DEVICE OPTIMIZATIONS ═══ */
        @media (hover: none) and (pointer: coarse) {
            /* Disable hover effects on touch devices */
            .game-thumbnail:hover,
            .btn:hover,
            .slot-spin-btn:hover {
                transform: none;
            }

            /* Increase touch target sizes (minimum 44x44px) */
            .btn, button, .game-thumbnail {
                min-height: 44px;
                min-width: 44px;
                padding: 12px 16px;
            }

            .slot-spin-btn {
                width: 56px;
                height: 56px;
            }

            .slot-bet-btn {
                width: 32px;
                height: 32px;
                min-width: 44px;
                min-height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            /* Add active state feedback instead of hover */
            .btn:active,
            button:active,
            .game-thumbnail:active {
                opacity: 0.8;
                filter: brightness(0.95);
            }

            /* Larger spin buttons for better touch accuracy */
            .slot-spin-btn {
                font-size: 12px;
                border-width: 3px;
                box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.3);
            }

            /* Improve touch feedback on reels */
            .reel-cell {
                border-width: 2px;
            }

            /* Disable text selection on interactive elements */
            .btn, button, .game-thumbnail, .slot-spin-btn {
                user-select: none;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
            }

            /* Faster animations on mobile for better response */
            .reel-scrolling {
                animation-duration: 0.05s !important;
            }

            .reel-landing {
                animation-duration: 0.5s !important;
            }

            /* Prevent zooming on input focus (iOS) */
            input, select, textarea {
                font-size: 16px;
            }
        }

        /* ═══ LANDSCAPE ORIENTATION OPTIMIZATION ═══ */
        @media (max-height: 500px) and (orientation: landscape) {
            .header {
                height: 48px;
                padding: 6px 12px;
            }

            .logo-text h1 {
                font-size: 18px;
            }

            .balance-amount {
                font-size: 14px;
            }

            .hero-banner {
                padding: 12px 16px;
                margin: 8px 0;
            }

            .hero-title {
                font-size: 18px;
            }

            .games-section {
                padding: 12px;
            }

            .slot-modal-fullscreen {
                max-height: 90vh;
            }

            .reels-container {
                max-height: 300px;
            }

            .reel-cell {
                min-width: 40px;
                min-height: 40px;
            }

            .slot-bottom-bar {
                min-height: 44px;
            }
        }

        /* ═══ PORTRAIT OPTIMIZATION FOR SMALL PHONES ═══ */
        @media (max-width: 540px) and (min-aspect-ratio: 9/16) {
            .main-content {
                padding: 8px;
            }

            .games-section {
                padding: 12px 8px;
            }

            .games-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }

            .game-card {
                min-height: 160px;
            }

            .slot-modal-fullscreen {
                border-radius: 16px 16px 0 0;
                max-height: 85vh;
            }

            /* Stack control buttons vertically for easier access */
            .slot-bottom-bar {
                flex-wrap: wrap;
                gap: 6px;
                padding: 8px 6px;
            }

            .slot-bar-section {
                flex: 0 1 auto;
                min-width: 40px;
            }

            /* Make spin button more prominent */
            .slot-spin-btn {
                flex: 0 0 60px;
                order: 1;
                margin: 0 auto;
            }
        }

        /* ═══ SWIPE/GESTURE HINTS ═══ */
        @media (max-width: 768px) {
            /* Indicate swipe-able areas with visual cues */
            .games-grid {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scroll-snap-type: x mandatory;
            }

            .game-card {
                scroll-snap-align: center;
            }

            /* Smooth scrolling on touch devices */
            * {
                -webkit-tap-highlight-color: rgba(251, 191, 36, 0.1);
            }
        }

/* ═══════════════════════════════════════════════════════════════════
   SETTINGS PANEL
   ═══════════════════════════════════════════════════════════════════ */
.settings-panel {
    position: relative;
    background: linear-gradient(145deg, #1a0a2e, #120820);
    border-radius: 16px;
    padding: 28px 24px;
    width: 100%;
    max-width: 440px;
    border: 1px solid rgba(139, 92, 246, 0.15);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.settings-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}
.settings-section {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.settings-section-danger {
    border-color: rgba(239, 68, 68, 0.15);
    background: rgba(239, 68, 68, 0.03);
}
.settings-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--rg-primary-100, #a78bfa);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.settings-section-danger .settings-section-title {
    color: #f87171;
}
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    gap: 12px;
}
.settings-row + .settings-row {
    border-top: 1px solid rgba(255,255,255,0.04);
}
.settings-label {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    flex: 1;
}
/* Toggle switch */
.settings-toggle {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}
.settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.settings-toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    transition: background 0.25s;
}
.settings-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s;
}
.settings-toggle input:checked + .settings-toggle-slider {
    background: var(--rg-accent, #10b981);
}
.settings-toggle input:checked + .settings-toggle-slider::before {
    transform: translateX(18px);
}
/* Slider */
.settings-slider-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.settings-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--rg-accent, #10b981);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.settings-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--rg-accent, #10b981);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.settings-slider-value {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    min-width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* Reset button */
.settings-reset-btn {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
}
.settings-reset-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.4);
}
/* Settings gear button */
.btn-settings {
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-settings svg {
    transition: transform 0.3s;
}
.btn-settings:hover svg {
    transform: rotate(90deg);
}

/* ═══════════════════════════════════════════════════════════════════
   AUTH MODAL
   ═══════════════════════════════════════════════════════════════════ */
.auth-modal {
    position: relative;
    background: linear-gradient(180deg, var(--rg-surface-300) 0%, var(--rg-surface-100) 100%);
    border: 1px solid var(--rg-border-accent);
    border-radius: 12px;
    width: 420px;
    max-width: 95vw;
    box-shadow: 0 0 40px rgba(23, 145, 99, 0.1), 0 25px 50px rgba(0,0,0,0.5);
    overflow: hidden;
    animation: authSlideIn 0.3s ease;
}
@keyframes authSlideIn {
    from { opacity: 0; transform: translateY(-30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-modal-header {
    text-align: center;
    padding: 28px 24px 0;
}
.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}
.auth-logo .crown {
    font-size: 28px;
}
.auth-logo span {
    font-size: 22px;
    font-weight: 800;
    color: var(--rg-yellow-300);
    letter-spacing: 2px;
}
.auth-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--rg-border-subtle);
}
.auth-tab {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    color: var(--rg-text-muted);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.auth-tab.active {
    color: var(--rg-primary-100);
    border-bottom-color: var(--rg-primary-200);
}
.auth-tab:hover:not(.active) {
    color: var(--rg-text-100);
}
.auth-error {
    color: #ef4444;
    font-size: 13px;
    text-align: center;
    padding: 0 24px;
    min-height: 20px;
    margin-top: 8px;
}
.auth-form {
    padding: 20px 24px 24px;
}
.auth-field {
    margin-bottom: 16px;
}
.auth-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--rg-text-200);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.auth-field input {
    width: 100%;
    padding: 12px 14px;
    background: var(--rg-surface-100);
    border: 1px solid var(--rg-border-subtle);
    border-radius: 8px;
    color: var(--rg-text-50);
    font-size: 14px;
    transition: border-color 0.2s;
    font-family: inherit;
}
.auth-field input:focus {
    outline: none;
    border-color: var(--rg-primary-200);
    box-shadow: 0 0 0 3px rgba(23, 145, 99, 0.15);
}
.auth-field input::placeholder {
    color: var(--rg-text-muted);
}
.auth-submit {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--rg-primary-200) 0%, var(--rg-primary-300) 100%);
    color: var(--rg-text-50);
    border: none;
    border-radius: 8px;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.2s;
    margin-top: 4px;
}
.auth-submit:hover {
    background: linear-gradient(135deg, var(--rg-primary-100) 0%, var(--rg-primary-200) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(23, 145, 99, 0.3);
}
.auth-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.auth-footer {
    padding: 12px 24px 16px;
    text-align: center;
    color: var(--rg-text-muted);
    font-size: 11px;
    border-top: 1px solid var(--rg-border-subtle);
}
.auth-close-btn {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--rg-border-subtle);
    border-radius: 50%;
    color: var(--rg-text-200);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
    line-height: 1;
}
.auth-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: #ef4444;
}
.auth-logo-crown {
    font-size: 28px;
}
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    color: var(--rg-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rg-border-subtle);
}
.auth-guest-btn {
    display: block;
    width: calc(100% - 48px);
    margin: 12px 24px 0;
    padding: 12px;
    background: transparent;
    border: 1px solid var(--rg-border-subtle);
    border-radius: 8px;
    color: var(--rg-text-200);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.2s;
}
.auth-guest-btn:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--rg-neutral-200);
    color: var(--rg-text-50);
}

        /* ═══ BATCH 2: ADDITIONAL 30 GAMES (31-60) ═══ */

        /* GAME 31: Island Tiki (island_tiki) */
        .slot-modal-fullscreen[data-game-id="island_tiki"] .reels-container {
            border: 8px solid;
            border-image: linear-gradient(135deg, #00897b, #ffcc02) 1;
            background: linear-gradient(180deg, #0a2a1a 0%, #051410 100%);
            box-shadow: 0 0 40px rgba(0, 137, 123, 0.3), 0 0 30px rgba(255, 204, 2, 0.2), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="island_tiki"] .reel-cell {
            background: linear-gradient(135deg, rgba(0, 137, 123, 0.12) 0%, rgba(255, 204, 2, 0.1) 100%);
            border: 1px solid rgba(0, 137, 123, 0.4);
            box-shadow: inset 0 0 8px rgba(255, 204, 2, 0.08);
        }

        /* GAME 32: Sakura Princess (sakura_princess) */
        .slot-modal-fullscreen[data-game-id="sakura_princess"] .reels-container {
            border: 8px solid #f06292;
            background: linear-gradient(180deg, #2a0a2a 0%, #150a15 100%);
            box-shadow: 0 0 40px rgba(240, 98, 146, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="sakura_princess"] .reel-cell {
            background: linear-gradient(135deg, rgba(240, 98, 146, 0.12) 0%, rgba(206, 147, 216, 0.1) 100%);
            border: 1px solid rgba(240, 98, 146, 0.4);
            box-shadow: inset 0 0 8px rgba(240, 98, 146, 0.1);
        }

        /* GAME 33: Dragon Megafire (dragon_megafire) */
        .slot-modal-fullscreen[data-game-id="dragon_megafire"] .reels-container {
            border: 8px solid;
            border-image: linear-gradient(135deg, #b71c1c, #ff8f00) 1;
            background: linear-gradient(180deg, #2a0a0a 0%, #140505 100%);
            box-shadow: 0 0 50px rgba(183, 28, 28, 0.4), 0 0 30px rgba(255, 143, 0, 0.2), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="dragon_megafire"] .reel-cell {
            background: linear-gradient(135deg, rgba(183, 28, 28, 0.15) 0%, rgba(255, 143, 0, 0.1) 100%);
            border: 2px solid rgba(183, 28, 28, 0.5);
            box-shadow: inset 0 0 10px rgba(255, 143, 0, 0.12);
        }

        /* GAME 34: Esqueleto Fiesta (esqueleto_fiesta) */
        .slot-modal-fullscreen[data-game-id="esqueleto_fiesta"] .reels-container {
            border: 8px solid;
            border-image: linear-gradient(135deg, #ff6f00, #e040fb) 1;
            background: linear-gradient(180deg, #2a1a0a 0%, #140d05 100%);
            box-shadow: 0 0 40px rgba(255, 111, 0, 0.3), 0 0 30px rgba(224, 64, 251, 0.2), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="esqueleto_fiesta"] .reel-cell {
            background: linear-gradient(135deg, rgba(255, 111, 0, 0.12) 0%, rgba(224, 64, 251, 0.1) 100%);
            border: 1px solid rgba(255, 111, 0, 0.4);
            box-shadow: inset 0 0 8px rgba(224, 64, 251, 0.08);
        }

        /* GAME 35: Wildfire Gold (wildfire_gold) */
        .slot-modal-fullscreen[data-game-id="wildfire_gold"] .reels-container {
            border: 8px solid;
            border-image: linear-gradient(135deg, #d4a836, #ff6f00) 1;
            background: linear-gradient(180deg, #2a1a08 0%, #140d04 100%);
            box-shadow: 0 0 40px rgba(212, 168, 54, 0.3), 0 0 30px rgba(255, 111, 0, 0.2), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="wildfire_gold"] .reel-cell {
            background: linear-gradient(135deg, rgba(212, 168, 54, 0.12) 0%, rgba(255, 111, 0, 0.1) 100%);
            border: 1px solid rgba(212, 168, 54, 0.4);
            box-shadow: inset 0 0 8px rgba(255, 111, 0, 0.08);
        }

        /* GAME 36: Five Lions (five_lions) */
        .slot-modal-fullscreen[data-game-id="five_lions"] .reels-container {
            border: 10px solid;
            border-image: linear-gradient(135deg, #c62828, #ffd600) 1;
            background: linear-gradient(180deg, #1a0a0a 0%, #0a0505 100%);
            box-shadow: 0 0 50px rgba(198, 40, 40, 0.4), 0 0 30px rgba(255, 214, 0, 0.2), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="five_lions"] .reel-cell {
            background: linear-gradient(135deg, rgba(198, 40, 40, 0.15) 0%, rgba(255, 214, 0, 0.1) 100%);
            border: 2px solid rgba(198, 40, 40, 0.5);
            box-shadow: inset 0 0 10px rgba(255, 214, 0, 0.12);
        }

        /* GAME 37: Chilli Heat (chilli_heat) */
        .slot-modal-fullscreen[data-game-id="chilli_heat"] .reels-container {
            border: 8px solid #ff6f00;
            background: linear-gradient(180deg, #2a1008 0%, #1a0804 100%);
            box-shadow: 0 0 40px rgba(255, 111, 0, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="chilli_heat"] .reel-cell {
            background: linear-gradient(135deg, rgba(255, 111, 0, 0.12) 0%, rgba(214, 40, 40, 0.1) 100%);
            border: 1px solid rgba(255, 111, 0, 0.4);
            box-shadow: inset 0 0 8px rgba(255, 111, 0, 0.1);
        }

        /* GAME 38: Tombstone Reload (tombstone_reload) */
        .slot-modal-fullscreen[data-game-id="tombstone_reload"] .reels-container {
            border: 8px solid #8b7355;
            background: linear-gradient(180deg, #2a1a08 0%, #140d04 100%);
            box-shadow: 0 0 40px rgba(139, 115, 85, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="tombstone_reload"] .reel-cell {
            background: linear-gradient(135deg, rgba(139, 115, 85, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 1px solid rgba(139, 115, 85, 0.4);
            box-shadow: inset 0 0 8px rgba(139, 115, 85, 0.1);
        }

        /* GAME 39: Mental Meltdown (mental_meltdown) */
        .slot-modal-fullscreen[data-game-id="mental_meltdown"] .reels-container {
            border: 8px solid;
            border-image: linear-gradient(135deg, #9c27b0, #ff5722) 1;
            background: linear-gradient(180deg, #1a0a1a 0%, #0a0510 100%);
            box-shadow: 0 0 50px rgba(156, 39, 176, 0.4), 0 0 30px rgba(255, 87, 34, 0.2), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="mental_meltdown"] .reel-cell {
            background: linear-gradient(135deg, rgba(156, 39, 176, 0.15) 0%, rgba(255, 87, 34, 0.1) 100%);
            border: 2px solid rgba(156, 39, 176, 0.5);
            box-shadow: inset 0 0 10px rgba(255, 87, 34, 0.12);
        }

        /* GAME 40: San Quentin (san_quentin) */
        .slot-modal-fullscreen[data-game-id="san_quentin"] .reels-container {
            border: 8px solid #424242;
            background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
            box-shadow: 0 0 40px rgba(66, 66, 66, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="san_quentin"] .reel-cell {
            background: linear-gradient(135deg, rgba(66, 66, 66, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 1px solid rgba(66, 66, 66, 0.4);
            box-shadow: inset 0 0 8px rgba(66, 66, 66, 0.1);
        }

        /* GAME 41: Nitro Street (nitro_street) */
        .slot-modal-fullscreen[data-game-id="nitro_street"] .reels-container {
            border: 8px solid #ff5722;
            background: linear-gradient(180deg, #2a0a05 0%, #140502 100%);
            box-shadow: 0 0 40px rgba(255, 87, 34, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="nitro_street"] .reel-cell {
            background: linear-gradient(135deg, rgba(255, 87, 34, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 1px solid rgba(255, 87, 34, 0.4);
            box-shadow: inset 0 0 8px rgba(255, 87, 34, 0.1);
        }

        /* GAME 42: Wild Toro (wild_toro) */
        .slot-modal-fullscreen[data-game-id="wild_toro"] .reels-container {
            border: 8px solid #c62828;
            background: linear-gradient(180deg, #2a0a0a 0%, #140505 100%);
            box-shadow: 0 0 40px rgba(198, 40, 40, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="wild_toro"] .reel-cell {
            background: linear-gradient(135deg, rgba(198, 40, 40, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 1px solid rgba(198, 40, 40, 0.4);
            box-shadow: inset 0 0 8px rgba(198, 40, 40, 0.1);
        }

        /* GAME 43: Jammin Fruits (jammin_fruits) */
        .slot-modal-fullscreen[data-game-id="jammin_fruits"] .reels-container {
            border: 8px solid #9c27b0;
            background: linear-gradient(180deg, #2a0a2a 0%, #140514 100%);
            box-shadow: 0 0 40px rgba(156, 39, 176, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="jammin_fruits"] .reel-cell {
            background: linear-gradient(135deg, rgba(156, 39, 176, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 1px solid rgba(156, 39, 176, 0.4);
            box-shadow: inset 0 0 8px rgba(156, 39, 176, 0.1);
        }

        /* GAME 44: Big Bamboo (big_bamboo) */
        .slot-modal-fullscreen[data-game-id="big_bamboo"] .reels-container {
            border: 8px solid #558b2f;
            background: linear-gradient(180deg, #1a2a0a 0%, #0d1505 100%);
            box-shadow: 0 0 40px rgba(85, 139, 47, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="big_bamboo"] .reel-cell {
            background: linear-gradient(135deg, rgba(85, 139, 47, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 1px solid rgba(85, 139, 47, 0.4);
            box-shadow: inset 0 0 8px rgba(85, 139, 47, 0.1);
        }

        /* GAME 45: Fat Rabbit (fat_rabbit) */
        .slot-modal-fullscreen[data-game-id="fat_rabbit"] .reels-container {
            border: 8px solid #ff8a50;
            background: linear-gradient(180deg, #2a1a0a 0%, #140d05 100%);
            box-shadow: 0 0 40px rgba(255, 138, 80, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="fat_rabbit"] .reel-cell {
            background: linear-gradient(135deg, rgba(255, 138, 80, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 1px solid rgba(255, 138, 80, 0.4);
            box-shadow: inset 0 0 8px rgba(255, 138, 80, 0.1);
        }

        /* GAME 46: Immortal Blood (immortal_blood) */
        .slot-modal-fullscreen[data-game-id="immortal_blood"] .reels-container {
            border: 8px solid #8b0000;
            background: linear-gradient(180deg, #1a0505 0%, #0a0202 100%);
            box-shadow: 0 0 40px rgba(139, 0, 0, 0.4), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="immortal_blood"] .reel-cell {
            background: linear-gradient(135deg, rgba(139, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 2px solid rgba(139, 0, 0, 0.5);
            box-shadow: inset 0 0 10px rgba(139, 0, 0, 0.12);
        }

        /* GAME 47: Mega Safari (mega_safari) */
        .slot-modal-fullscreen[data-game-id="mega_safari"] .reels-container {
            border: 8px solid #ffb300;
            background: linear-gradient(180deg, #2a2008 0%, #141005 100%);
            box-shadow: 0 0 40px rgba(255, 179, 0, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="mega_safari"] .reel-cell {
            background: linear-gradient(135deg, rgba(255, 179, 0, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 1px solid rgba(255, 179, 0, 0.4);
            box-shadow: inset 0 0 8px rgba(255, 179, 0, 0.1);
        }

        /* GAME 48: Lucha Mania (lucha_mania) */
        .slot-modal-fullscreen[data-game-id="lucha_mania"] .reels-container {
            border: 8px solid;
            border-image: linear-gradient(135deg, #e91e63, #ff6f00) 1;
            background: linear-gradient(180deg, #2a0a0a 0%, #140505 100%);
            box-shadow: 0 0 40px rgba(233, 30, 99, 0.3), 0 0 30px rgba(255, 111, 0, 0.2), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="lucha_mania"] .reel-cell {
            background: linear-gradient(135deg, rgba(233, 30, 99, 0.12) 0%, rgba(255, 111, 0, 0.1) 100%);
            border: 1px solid rgba(233, 30, 99, 0.4);
            box-shadow: inset 0 0 8px rgba(255, 111, 0, 0.08);
        }

        /* GAME 49: Extra Chilli (extra_chilli) */
        .slot-modal-fullscreen[data-game-id="extra_chilli"] .reels-container {
            border: 8px solid #d62828;
            background: linear-gradient(180deg, #3a1008 0%, #1a0804 100%);
            box-shadow: 0 0 40px rgba(214, 40, 40, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="extra_chilli"] .reel-cell {
            background: linear-gradient(135deg, rgba(214, 40, 40, 0.12) 0%, rgba(255, 111, 0, 0.1) 100%);
            border: 1px solid rgba(214, 40, 40, 0.4);
            box-shadow: inset 0 0 8px rgba(214, 40, 40, 0.1);
        }

        /* GAME 50: Wanted Dead (wanted_dead) */
        .slot-modal-fullscreen[data-game-id="wanted_dead"] .reels-container {
            border: 8px solid #8b4513;
            background: linear-gradient(180deg, #2a1a08 0%, #140d04 100%);
            box-shadow: 0 0 40px rgba(139, 69, 19, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="wanted_dead"] .reel-cell {
            background: linear-gradient(135deg, rgba(139, 69, 19, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 1px solid rgba(139, 69, 19, 0.4);
            box-shadow: inset 0 0 8px rgba(139, 69, 19, 0.1);
        }

        /* GAME 51: Chaos Crew (chaos_crew) */
        .slot-modal-fullscreen[data-game-id="chaos_crew"] .reels-container {
            border: 8px solid #ff5722;
            background: linear-gradient(180deg, #2a1a0a 0%, #140d05 100%);
            box-shadow: 0 0 40px rgba(255, 87, 34, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="chaos_crew"] .reel-cell {
            background: linear-gradient(135deg, rgba(255, 87, 34, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 1px solid rgba(255, 87, 34, 0.4);
            box-shadow: inset 0 0 8px rgba(255, 87, 34, 0.1);
        }

        /* GAME 52: Le Bandit (le_bandit) */
        .slot-modal-fullscreen[data-game-id="le_bandit"] .reels-container {
            border: 8px solid #1976d2;
            background: linear-gradient(180deg, #0a1a2e 0%, #050d18 100%);
            box-shadow: 0 0 40px rgba(25, 118, 210, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="le_bandit"] .reel-cell {
            background: linear-gradient(135deg, rgba(25, 118, 210, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 1px solid rgba(25, 118, 210, 0.4);
            box-shadow: inset 0 0 8px rgba(25, 118, 210, 0.1);
        }

        /* GAME 53: Dead Alive (dead_alive) */
        .slot-modal-fullscreen[data-game-id="dead_alive"] .reels-container {
            border: 8px solid #8b4513;
            background: linear-gradient(180deg, #1a1a0a 0%, #0d0d05 100%);
            box-shadow: 0 0 40px rgba(139, 69, 19, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="dead_alive"] .reel-cell {
            background: linear-gradient(135deg, rgba(139, 69, 19, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 1px solid rgba(139, 69, 19, 0.4);
            box-shadow: inset 0 0 8px rgba(139, 69, 19, 0.1);
        }

        /* GAME 54: Mega Joker (mega_joker) */
        .slot-modal-fullscreen[data-game-id="mega_joker"] .reels-container {
            border: 8px solid #ff6f00;
            background: linear-gradient(180deg, #2a1a0a 0%, #140d05 100%);
            box-shadow: 0 0 40px rgba(255, 111, 0, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="mega_joker"] .reel-cell {
            background: linear-gradient(135deg, rgba(255, 111, 0, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 1px solid rgba(255, 111, 0, 0.4);
            box-shadow: inset 0 0 8px rgba(255, 111, 0, 0.1);
        }

        /* GAME 55: Crown Fire (crown_fire) */
        .slot-modal-fullscreen[data-game-id="crown_fire"] .reels-container {
            border: 8px solid;
            border-image: linear-gradient(135deg, #ffd600, #b71c1c) 1;
            background: linear-gradient(180deg, #2a0a0a 0%, #140505 100%);
            box-shadow: 0 0 50px rgba(255, 214, 0, 0.4), 0 0 30px rgba(183, 28, 28, 0.2), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="crown_fire"] .reel-cell {
            background: linear-gradient(135deg, rgba(255, 214, 0, 0.15) 0%, rgba(183, 28, 28, 0.1) 100%);
            border: 2px solid rgba(255, 214, 0, 0.5);
            box-shadow: inset 0 0 10px rgba(183, 28, 28, 0.12);
        }

        /* GAME 56: Olympus Dream (olympus_dream) */
        .slot-modal-fullscreen[data-game-id="olympus_dream"] .reels-container {
            border: 8px solid #ffd700;
            background: linear-gradient(180deg, #0d1a3d 0%, #060a20 100%);
            box-shadow: 0 0 50px rgba(255, 215, 0, 0.4), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="olympus_dream"] .reel-cell {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 2px solid rgba(255, 215, 0, 0.5);
            box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.12);
        }

        /* GAME 57: Goldstorm Ultra (goldstorm_ultra) */
        .slot-modal-fullscreen[data-game-id="goldstorm_ultra"] .reels-container {
            border: 10px solid #ffb300;
            background: linear-gradient(180deg, #2a2008 0%, #141005 100%);
            box-shadow: 0 0 60px rgba(255, 179, 0, 0.4), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="goldstorm_ultra"] .reel-cell {
            background: linear-gradient(135deg, rgba(255, 179, 0, 0.15) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 2px solid rgba(255, 179, 0, 0.5);
            box-shadow: inset 0 0 10px rgba(255, 179, 0, 0.12);
        }

        /* GAME 58: Fire Hole (fire_hole) */
        .slot-modal-fullscreen[data-game-id="fire_hole"] .reels-container {
            border: 8px solid #ff6f00;
            background: linear-gradient(180deg, #2a1008 0%, #140504 100%);
            box-shadow: 0 0 40px rgba(255, 111, 0, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="fire_hole"] .reel-cell {
            background: linear-gradient(135deg, rgba(255, 111, 0, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 1px solid rgba(255, 111, 0, 0.4);
            box-shadow: inset 0 0 8px rgba(255, 111, 0, 0.1);
        }

        /* GAME 59: Merlin Power (merlin_power) */
        .slot-modal-fullscreen[data-game-id="merlin_power"] .reels-container {
            border: 8px solid #7e57c2;
            background: linear-gradient(180deg, #1a0a2e 0%, #0d051a 100%);
            box-shadow: 0 0 40px rgba(126, 87, 194, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
        }
        .slot-modal-fullscreen[data-game-id="merlin_power"] .reel-cell {
            background: linear-gradient(135deg, rgba(126, 87, 194, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
            border: 1px solid rgba(126, 87, 194, 0.4);
            box-shadow: inset 0 0 8px rgba(126, 87, 194, 0.1);
        }

        /* ═══ DEFAULT FALLBACK (Game not specifically themed) ═══ */
        .slot-modal-fullscreen[data-game-id]:not([data-game-id=""]) .reels-container {
            border: 8px solid #667eea;
        }

/* ═══════════════════════════════════════════════════════════════════ */
/* PAYTABLE / GAME INFO PANEL                                        */
/* ═══════════════════════════════════════════════════════════════════ */

.slot-info-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    margin-right: 10px;
}
.slot-info-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

.paytable-panel {
    position: absolute;
    top: 0;
    right: -380px;
    width: 360px;
    height: 100%;
    background: linear-gradient(180deg, #1a0e2e 0%, #0d0618 100%);
    border-left: 1px solid rgba(255,255,255,0.08);
    z-index: 100;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: -8px 0 30px rgba(0,0,0,0.5);
}
.paytable-panel.active {
    right: 0;
}

.paytable-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: sticky;
    top: 0;
    background: rgba(26, 14, 46, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1;
}
.paytable-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: 0.5px;
}
.paytable-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 24px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.paytable-close:hover { color: #fff; }

.paytable-body {
    padding: 16px 20px;
}

.paytable-section {
    margin-bottom: 20px;
}
.paytable-section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--rg-accent, #10b981);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.paytable-grid-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 4px;
}
.paytable-stat {
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
}
.paytable-stat-label {
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 4px;
}
.paytable-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.paytable-symbols {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.paytable-symbol-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    transition: background 0.15s;
}
.paytable-symbol-row:hover {
    background: rgba(255,255,255,0.06);
}
.paytable-symbol-icon {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.paytable-symbol-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.paytable-symbol-name {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    flex: 1;
}
.paytable-symbol-name.wild-symbol {
    color: #fbbf24;
    font-weight: 600;
}
.paytable-symbol-name.scatter-symbol {
    color: #a78bfa;
    font-weight: 600;
}
.paytable-symbol-pay {
    font-size: 12px;
    font-weight: 600;
    color: var(--rg-accent, #10b981);
    text-align: right;
}

.paytable-bonus-desc {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    padding: 14px 16px;
    border-left: 3px solid var(--rg-accent, #10b981);
}

.paytable-rtp {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    text-align: center;
    padding: 12px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
}
.paytable-rtp strong {
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* SEARCH RESULT COUNT                                               */
/* ═══════════════════════════════════════════════════════════════════ */

.search-result-count {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 600;
    color: var(--rg-accent, #10b981);
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    display: none;
    letter-spacing: 0.5px;
}
.search-result-count.active {
    display: inline-block;
}
.header-search {
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* LOADING SHIMMER FOR GAME CARDS                                    */
/* ═══════════════════════════════════════════════════════════════════ */

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.game-card-skeleton {
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
}
.game-card-skeleton .skeleton-thumb {
    aspect-ratio: 4/3;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.04) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}
.game-card-skeleton .skeleton-text {
    padding: 10px 12px;
}
.game-card-skeleton .skeleton-line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.04) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    margin-bottom: 6px;
}
.game-card-skeleton .skeleton-line:last-child {
    width: 60%;
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* WIN CELEBRATION SCREEN SHAKE                                      */
/* ═══════════════════════════════════════════════════════════════════ */

@keyframes screenShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-4px) rotate(-0.3deg); }
    20% { transform: translateX(4px) rotate(0.3deg); }
    30% { transform: translateX(-3px) rotate(-0.2deg); }
    40% { transform: translateX(3px) rotate(0.2deg); }
    50% { transform: translateX(-2px); }
    60% { transform: translateX(2px); }
    70% { transform: translateX(-1px); }
    80% { transform: translateX(1px); }
}

.screen-shake {
    animation: screenShake 0.5s ease-out;
}

@keyframes bigWinPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.slot-reel-area.big-win-pulse {
    animation: bigWinPulse 0.6s ease-in-out 2;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* WIN AMOUNT COUNTER ANIMATION                                      */
/* ═══════════════════════════════════════════════════════════════════ */

@keyframes winCounter {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.win-amount-animated {
    animation: winCounter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══════════════════════════════════════════════════════════════════ */
/* KEYBOARD SHORTCUT HINTS                                           */
/* ═══════════════════════════════════════════════════════════════════ */

.kbd-hint {
    display: inline-block;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-family: monospace;
    color: rgba(255,255,255,0.4);
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.6;
}

/* Tooltip for slot buttons */
.slot-turbo-btn::after,
.slot-auto-btn::after {
    font-size: 9px;
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: rgba(255,255,255,0.25);
    pointer-events: none;
}
.slot-turbo-btn { position: relative; }
.slot-auto-btn { position: relative; }
@media (min-width: 769px) {
    .slot-turbo-btn::after { content: 'T'; }
}

/* ═══════════════════════════════════════════════════════
   ═══ Feature Popup Overlay (Game Intro Screen) ═══════
   ═══════════════════════════════════════════════════════ */

.feature-popup-overlay {
    position: absolute;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: featureOverlayFadeIn 0.3s ease-out;
}

@keyframes featureOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.feature-popup {
    position: relative;
    width: 92%;
    max-width: 480px;
    max-height: 92vh;
    overflow-y: auto;
    background: linear-gradient(170deg, rgba(20, 14, 30, 0.97) 0%, rgba(8, 5, 15, 0.98) 100%);
    border: 1px solid rgba(var(--accent-rgb, 255, 200, 50), 0.35);
    border-radius: 20px;
    box-shadow:
        0 0 60px rgba(var(--accent-rgb, 255, 200, 50), 0.15),
        0 25px 80px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: featurePopupEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: center center;
}

@keyframes featurePopupEnter {
    0% {
        opacity: 0;
        transform: scale(0.85) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Header */
.feature-popup-header {
    text-align: center;
    padding: 24px 24px 12px;
    position: relative;
}

.feature-popup-logo {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb, 255, 200, 50), 0.3), rgba(var(--accent-rgb, 255, 200, 50), 0.1));
    border: 2px solid rgba(var(--accent-rgb, 255, 200, 50), 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 20px rgba(var(--accent-rgb, 255, 200, 50), 0.25);
}

.feature-popup-title {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #fff 0%, rgba(var(--accent-rgb, 255, 200, 50), 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
    line-height: 1.2;
}

.feature-popup-provider {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Feature Image Area */
.feature-popup-image {
    width: calc(100% - 32px);
    margin: 8px auto 16px;
    height: 140px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(var(--accent-rgb, 255, 200, 50), 0.2);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.feature-popup-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(8, 5, 15, 0.9) 100%);
    pointer-events: none;
}

/* Feature Cards List */
.feature-popup-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px;
    margin-bottom: 16px;
}

.feature-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb, 255, 200, 50), 0.08) 0%, rgba(var(--accent-rgb, 255, 200, 50), 0.03) 100%);
    border: 1px solid rgba(var(--accent-rgb, 255, 200, 50), 0.12);
    border-radius: 12px;
    transition: all 0.25s ease;
}

.feature-card:hover {
    background: linear-gradient(135deg, rgba(var(--accent-rgb, 255, 200, 50), 0.15) 0%, rgba(var(--accent-rgb, 255, 200, 50), 0.06) 100%);
    border-color: rgba(var(--accent-rgb, 255, 200, 50), 0.3);
    transform: translateX(4px);
    box-shadow: 0 2px 12px rgba(var(--accent-rgb, 255, 200, 50), 0.1);
}

.feature-card-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb, 255, 200, 50), 0.25), rgba(var(--accent-rgb, 255, 200, 50), 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.feature-card-text {
    flex: 1;
    min-width: 0;
}

.feature-card-title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(var(--accent-rgb, 255, 200, 50), 1);
    margin-bottom: 2px;
    line-height: 1.2;
}

.feature-card-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.35;
}

/* Game Stats Bar */
.feature-popup-stats {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin: 0 16px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.feature-stat {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    position: relative;
}

.feature-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.feature-stat-label {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.feature-stat-value {
    font-size: 16px;
    font-weight: 900;
    color: #fff;
}

/* Play Now Button */
.feature-popup-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: calc(100% - 32px);
    margin: 0 16px 20px;
    padding: 14px 24px;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(var(--accent-rgb, 255, 200, 50), 0.9), rgba(var(--accent-rgb, 255, 200, 50), 0.7));
    box-shadow:
        0 4px 20px rgba(var(--accent-rgb, 255, 200, 50), 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.25s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.feature-popup-play-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: featureShimmer 2.5s ease-in-out infinite;
}

@keyframes featureShimmer {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.feature-popup-play-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 32px rgba(var(--accent-rgb, 255, 200, 50), 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.feature-popup-play-btn:active {
    transform: translateY(0);
    box-shadow:
        0 2px 12px rgba(var(--accent-rgb, 255, 200, 50), 0.3);
}

/* Dismiss animation */
.feature-popup-overlay.dismissing {
    animation: featureOverlayFadeOut 0.35s ease-in forwards;
}

.feature-popup-overlay.dismissing .feature-popup {
    animation: featurePopupExit 0.35s ease-in forwards;
}

@keyframes featureOverlayFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes featurePopupExit {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
}

/* Responsive adjustments for feature popup */
@media (max-width: 480px) {
    .feature-popup {
        max-width: 96%;
        border-radius: 16px;
    }

    .feature-popup-title {
        font-size: 22px;
    }

    .feature-popup-image {
        height: 110px;
    }

    .feature-popup-header {
        padding: 18px 18px 8px;
    }

    .feature-popup-features {
        padding: 0 12px;
    }

    .feature-popup-play-btn {
        width: calc(100% - 24px);
        margin: 0 12px 16px;
        padding: 12px 20px;
        font-size: 14px;
    }

    .feature-popup-stats {
        margin: 0 12px 12px;
    }

    .feature-stat-value {
        font-size: 14px;
    }

    .feature-card {
        padding: 8px 12px;
    }

    .feature-card-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 16px;
    }
}

@media (max-height: 600px) {
    .feature-popup-image {
        height: 80px;
    }

    .feature-popup-header {
        padding: 14px 16px 8px;
    }

    .feature-popup-logo {
        width: 40px;
        height: 40px;
        margin-bottom: 8px;
    }

    .feature-popup-title {
        font-size: 20px;
    }

    .feature-card {
        padding: 6px 10px;
        gap: 8px;
    }

    .feature-card-icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 14px;
    }

    .feature-popup-play-btn {
        padding: 10px 18px;
        font-size: 13px;
        margin-bottom: 14px;
    }
}

/* Scrollbar for feature popup */
.feature-popup::-webkit-scrollbar {
    width: 4px;
}

.feature-popup::-webkit-scrollbar-track {
    background: transparent;
}

.feature-popup::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb, 255, 200, 50), 0.3);
    border-radius: 4px;
}

.feature-popup::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb, 255, 200, 50), 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   GAMBLE FEATURE
═══════════════════════════════════════════════════════════════ */

/* Gamble button in control bar */
.slot-gamble-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border: 2px solid #c084fc;
    border-radius: 10px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 0 14px rgba(168,85,247,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
    transition: transform 0.15s, box-shadow 0.15s;
}
.slot-gamble-btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 0 22px rgba(168,85,247,0.7), inset 0 1px 0 rgba(255,255,255,0.3);
}
.slot-gamble-btn:active { transform: scale(0.97); }

@keyframes gambleBtnPop {
    0% { transform: scale(0.6); opacity: 0; }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* Gamble overlay */
.gamble-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    backdrop-filter: blur(6px);
    animation: gambleOverlayIn 0.3s ease;
}
@keyframes gambleOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.gamble-modal {
    background: linear-gradient(160deg, #1a0533 0%, #0d001f 60%, #110022 100%);
    border: 2px solid rgba(168,85,247,0.5);
    border-radius: 20px;
    padding: 28px 32px;
    width: min(480px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 0 60px rgba(168,85,247,0.3), 0 0 120px rgba(168,85,247,0.1);
    animation: gambleModalIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
    text-align: center;
}
@keyframes gambleModalIn {
    from { transform: scale(0.7) translateY(30px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

.gamble-header { margin-bottom: 16px; }
.gamble-title {
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: #e879f9;
    text-shadow: 0 0 20px rgba(232,121,249,0.6);
}
.gamble-subtitle {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.55);
    margin-top: 4px;
    letter-spacing: 0.06em;
}

.gamble-win-display {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(168,85,247,0.3);
    border-radius: 12px;
    padding: 10px 20px;
    margin-bottom: 20px;
}
.gamble-win-label {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.45);
}
.gamble-win-amount {
    font-size: 2rem;
    font-weight: 900;
    color: #fbbf24;
    text-shadow: 0 0 16px rgba(251,191,36,0.5);
}

/* Card area */
.gamble-card-area {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    perspective: 800px;
}
.gamble-card {
    width: 110px;
    height: 160px;
    perspective: 800px;
}
.gamble-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.gamble-card-back,
.gamble-card-front {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    border: 2px solid rgba(255,255,255,0.15);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.gamble-card-back {
    background: linear-gradient(135deg, #4c1d95, #7c3aed);
}
.card-back-pattern {
    width: 80%;
    height: 80%;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.05) 4px,
        transparent 4px,
        transparent 12px
    );
}
.gamble-card-front {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    transform: rotateY(180deg);
    flex-direction: column;
    gap: 4px;
}
.card-suit {
    font-size: 3.5rem;
    line-height: 1;
}
.card-color-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

/* Result message */
.gamble-result {
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    margin: 10px 0;
    animation: gambleResultPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes gambleResultPop {
    from { transform: scale(0.8); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.gamble-result-win {
    background: rgba(34,197,94,0.2);
    border: 1px solid rgba(34,197,94,0.5);
    color: #86efac;
}
.gamble-result-lose {
    background: rgba(239,68,68,0.2);
    border: 1px solid rgba(239,68,68,0.5);
    color: #fca5a5;
}

/* Choice buttons */
.gamble-choices {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 14px 0;
}
.gamble-or {
    color: rgba(255,255,255,0.4);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.gamble-choice-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 32px;
    border-radius: 14px;
    border: 2px solid transparent;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.choice-suit { font-size: 1.8rem; }
.gamble-red {
    background: linear-gradient(135deg, #7f1d1d, #dc2626);
    border-color: #f87171;
    color: #fff;
    box-shadow: 0 4px 20px rgba(220,38,38,0.4);
}
.gamble-red:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 28px rgba(220,38,38,0.6); }
.gamble-black {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-color: #475569;
    color: #fff;
    box-shadow: 0 4px 20px rgba(15,23,42,0.5);
}
.gamble-black:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 28px rgba(100,116,139,0.5); }
.gamble-choice-btn:active { transform: scale(0.97); }

/* Bottom actions */
.gamble-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}
.gamble-collect-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, #065f46, #059669);
    border: 2px solid #34d399;
    border-radius: 12px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(5,150,105,0.4);
    transition: transform 0.15s, box-shadow 0.15s;
}
.gamble-collect-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(5,150,105,0.55); }
.gamble-close-btn {
    padding: 12px 20px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s;
}
.gamble-close-btn:hover { background: rgba(255,255,255,0.12); }

/* History dots */
.gamble-history {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 14px;
    flex-wrap: wrap;
}
.gamble-history-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: help;
}
.dot-win { background: rgba(34,197,94,0.25); border: 1px solid #22c55e; color: #86efac; }
.dot-lose { background: rgba(239,68,68,0.25); border: 1px solid #ef4444; color: #fca5a5; }

/* ═══════════════════════════════════════════════════════════════
   BIG WIN CELEBRATION OVERLAY
═══════════════════════════════════════════════════════════════ */
/* ── Big Win Overlay — tiered, provider-aware ──────────────────────── */
@keyframes bigwinFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes bigwinRays {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes bigwinModalPop {
    0%   { transform: scale(0.35) rotate(-4deg); opacity: 0; }
    60%  { transform: scale(1.06) rotate(1deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes bigwinLabelPulse {
    from { transform: scale(1); filter: brightness(1); }
    to   { transform: scale(1.06); filter: brightness(1.25); }
}
@keyframes bigwinBtnPulse {
    from { box-shadow: 0 0 20px rgba(251,191,36,0.5); }
    to   { box-shadow: 0 0 40px rgba(251,191,36,0.9), 0 0 0 4px rgba(251,191,36,0.15); }
}
@keyframes coinFall {
    0%   { top: -50px; transform: rotate(0deg) scale(0.4); opacity: 0; }
    8%   { opacity: 1; transform: rotate(20deg) scale(1); }
    88%  { opacity: 0.9; }
    100% { top: 115%; transform: rotate(400deg) scale(0.7); opacity: 0; }
}
@keyframes bigwinCountUp {
    from { transform: scale(0.6) translateY(16px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

.bigwin-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8500;
    pointer-events: all;
    background: radial-gradient(ellipse at 50% 40%, rgba(40,20,0,0.7) 0%, rgba(0,0,0,0.75) 100%);
    animation: bigwinFadeIn 0.25s ease;
    cursor: pointer;
}
/* Tier-specific overlay backgrounds */
.bigwin-overlay.bigwin-tier-big   { background: radial-gradient(ellipse at 50% 40%, rgba(60,30,0,0.75) 0%, rgba(0,0,0,0.78) 100%); }
.bigwin-overlay.bigwin-tier-super { background: radial-gradient(ellipse at 50% 40%, rgba(0,40,70,0.78) 0%, rgba(0,0,0,0.82) 100%); }
.bigwin-overlay.bigwin-tier-mega  { background: radial-gradient(ellipse at 50% 40%, rgba(50,0,80,0.82) 0%, rgba(0,0,0,0.88) 100%); }

.bigwin-modal {
    position: relative;
    text-align: center;
    padding: 50px 70px;
    animation: bigwinModalPop 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
    overflow: visible;
}
/* Rotating light rays behind the modal */
.bigwin-modal::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        rgba(251,191,36,0.06) 0deg,  transparent 20deg,
        rgba(251,191,36,0.06) 40deg, transparent 60deg,
        rgba(251,191,36,0.06) 80deg, transparent 100deg,
        rgba(251,191,36,0.06) 120deg,transparent 140deg,
        rgba(251,191,36,0.06) 160deg,transparent 180deg,
        rgba(251,191,36,0.06) 200deg,transparent 220deg,
        rgba(251,191,36,0.06) 240deg,transparent 260deg,
        rgba(251,191,36,0.06) 280deg,transparent 300deg,
        rgba(251,191,36,0.06) 320deg,transparent 340deg,
        rgba(251,191,36,0.06) 360deg
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    animation: bigwinRays 8s linear infinite;
}
.bigwin-tier-super .bigwin-modal::before { filter: hue-rotate(200deg); }
.bigwin-tier-mega  .bigwin-modal::before { filter: hue-rotate(280deg); animation-duration: 5s; }

.bigwin-label {
    font-size: 3.2rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #fbbf24;
    text-shadow: 0 0 30px rgba(251,191,36,0.8), 0 0 60px rgba(251,191,36,0.4), 0 4px 8px rgba(0,0,0,0.6);
    animation: bigwinLabelPulse 0.7s ease-in-out infinite alternate;
    display: block;
    margin-bottom: 6px;
}
/* Tier label colours */
.bigwin-label.bigwin-tier-big   { color: #fb923c; text-shadow: 0 0 30px rgba(251,146,60,0.9), 0 0 60px rgba(251,146,60,0.4), 0 4px 8px rgba(0,0,0,0.6); }
.bigwin-label.bigwin-tier-super { color: #38bdf8; text-shadow: 0 0 30px rgba(56,189,248,0.9), 0 0 60px rgba(56,189,248,0.4), 0 4px 8px rgba(0,0,0,0.6); font-size: 3.5rem; }
.bigwin-label.bigwin-tier-mega  { color: #d946ef; text-shadow: 0 0 40px rgba(217,70,239,1), 0 0 80px rgba(217,70,239,0.5), 0 4px 8px rgba(0,0,0,0.6); font-size: 4rem; letter-spacing: 0.12em; }

.bigwin-amount {
    font-size: 4.5rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0,0,0,0.8), 0 0 30px rgba(255,255,255,0.15);
    animation: bigwinCountUp 0.7s cubic-bezier(0.2,0.8,0.3,1) both;
    line-height: 1;
}
.bigwin-tier-super .bigwin-amount { font-size: 5rem; color: #e0f2fe; }
.bigwin-tier-mega  .bigwin-amount { font-size: 5.5rem; color: #fae8ff; text-shadow: 0 4px 30px rgba(0,0,0,0.9), 0 0 40px rgba(217,70,239,0.3); }

.bigwin-multiplier {
    font-size: 1.5rem;
    color: rgba(255,255,255,0.55);
    margin-top: 6px;
    letter-spacing: 0.12em;
    font-weight: 700;
}
.bigwin-tier-super .bigwin-multiplier { color: rgba(56,189,248,0.7); }
.bigwin-tier-mega  .bigwin-multiplier { color: rgba(217,70,239,0.7); }

.bigwin-collect {
    margin-top: 30px;
    padding: 14px 44px;
    background: linear-gradient(135deg, #d97706, #fbbf24);
    border: 3px solid #fde68a;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: #1c0a00;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(251,191,36,0.5);
    animation: bigwinBtnPulse 0.9s ease-in-out infinite alternate;
    transition: transform 0.15s;
    text-transform: uppercase;
}
.bigwin-collect:hover { transform: scale(1.06); }
.bigwin-tier-super .bigwin-collect { background: linear-gradient(135deg, #0369a1, #38bdf8); border-color: #7dd3fc; color: #fff; }
.bigwin-tier-mega  .bigwin-collect { background: linear-gradient(135deg, #86198f, #d946ef); border-color: #e879f9; color: #fff; }

/* Coin rain */
.bigwin-coins {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 8501;
}
.bigwin-coin {
    position: absolute;
    top: -50px;
    animation: coinFall linear forwards;
}

/* ═══════════════════════════════════════════════════════════════════
   GAME SEARCH BAR
   ═══════════════════════════════════════════════════════════════════ */
.game-search-bar {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 0 14px;
    gap: 10px;
    margin: 0 0 12px;
    height: 44px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.game-search-bar:focus-within {
    border-color: rgba(251,191,36,0.5);
    box-shadow: 0 0 0 2px rgba(251,191,36,0.1);
}
.search-icon {
    width: 16px;
    height: 16px;
    color: rgba(255,255,255,0.35);
    flex-shrink: 0;
}
.game-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
}
.game-search-input::placeholder { color: rgba(255,255,255,0.3); }
.search-clear-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}
.search-clear-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

/* ═══════════════════════════════════════════════════════════════════
   BUY BONUS BUTTON (in slot top bar)
   ═══════════════════════════════════════════════════════════════════ */
.buy-bonus-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    border-radius: 8px;
    color: #1a0a00;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 7px 11px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
    box-shadow: 0 2px 12px rgba(245,158,11,0.4);
    flex-shrink: 0;
    text-transform: uppercase;
}
.buy-bonus-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 20px rgba(245,158,11,0.55);
    filter: brightness(1.08);
}
.buy-bonus-btn:active { transform: scale(0.97); }
.buy-bonus-icon { font-size: 13px; }
.buy-bonus-text { font-size: 10px; font-weight: 900; }
.buy-bonus-cost {
    background: rgba(0,0,0,0.25);
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   BUY BONUS MODAL
   ═══════════════════════════════════════════════════════════════════ */
.buybonus-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99990;
    backdrop-filter: blur(6px);
}
.buybonus-modal {
    background: linear-gradient(160deg, #1c1208 0%, #0d0a04 100%);
    border: 2px solid #f59e0b;
    border-radius: 20px;
    padding: 32px 28px;
    width: min(380px, 90vw);
    box-shadow: 0 0 60px rgba(245,158,11,0.3), 0 24px 60px rgba(0,0,0,0.6);
    text-align: center;
    animation: buyBonusPop 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes buyBonusPop {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.buybonus-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
}
.buybonus-icon { font-size: 36px; }
.buybonus-title {
    font-size: 20px;
    font-weight: 900;
    color: #f59e0b;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(245,158,11,0.6);
}
.buybonus-info {
    background: rgba(245,158,11,0.07);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
}
.buybonus-game {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}
.buybonus-spins {
    font-size: 22px;
    font-weight: 900;
    color: #f59e0b;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.buybonus-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}
.buybonus-cost-display {
    margin-bottom: 22px;
}
.buybonus-cost-label {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    letter-spacing: 2px;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.buybonus-cost-value {
    font-size: 30px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 20px rgba(255,255,255,0.3);
}
.buybonus-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.buybonus-confirm {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    border-radius: 10px;
    color: #1a0a00;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 1px;
    padding: 14px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 20px rgba(245,158,11,0.4);
}
.buybonus-confirm:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 28px rgba(245,158,11,0.55);
}
.buybonus-cancel {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    font-weight: 600;
    padding: 11px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.buybonus-cancel:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════
   ENHANCED AUTOPLAY MODAL
   ═══════════════════════════════════════════════════════════════════ */
.autoplay-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99980;
    backdrop-filter: blur(8px);
}
.autoplay-modal {
    background: linear-gradient(160deg, #0f1922 0%, #080e14 100%);
    border: 1.5px solid rgba(99,179,237,0.25);
    border-radius: 20px;
    width: min(420px, 92vw);
    overflow: hidden;
    box-shadow: 0 0 50px rgba(99,179,237,0.15), 0 24px 60px rgba(0,0,0,0.7);
    animation: autoplaySlideIn 0.28s cubic-bezier(0.34,1.3,0.64,1);
}
@keyframes autoplaySlideIn {
    from { transform: translateY(40px) scale(0.95); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.autoplay-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    background: rgba(99,179,237,0.06);
    border-bottom: 1px solid rgba(99,179,237,0.12);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 1.5px;
    color: #63b3ed;
}
.autoplay-modal-close {
    margin-left: auto;
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.15s;
}
.autoplay-modal-close:hover { color: #fff; }

.autoplay-modal-body {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.autoplay-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.autoplay-spin-options {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}
.autoplay-spin-btn {
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 0;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.autoplay-spin-btn:hover {
    background: rgba(99,179,237,0.12);
    border-color: rgba(99,179,237,0.35);
    color: #fff;
}
.autoplay-spin-btn.autoplay-spin-selected {
    background: rgba(99,179,237,0.18);
    border-color: #63b3ed;
    color: #63b3ed;
    box-shadow: 0 0 12px rgba(99,179,237,0.2);
}
.autoplay-limit-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.autoplay-limit-btn {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.autoplay-limit-btn:hover {
    background: rgba(99,179,237,0.12);
    border-color: rgba(99,179,237,0.4);
}
.autoplay-limit-value {
    flex: 1;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,0.08);
}
.autoplay-toggle-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.autoplay-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.07);
    transition: background 0.15s;
}
.autoplay-toggle:hover { background: rgba(255,255,255,0.07); }
.autoplay-toggle input[type="checkbox"] { display: none; }
.toggle-slider {
    width: 38px;
    height: 20px;
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s;
}
.toggle-slider::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
}
.autoplay-toggle input:checked + .toggle-slider {
    background: #63b3ed;
}
.autoplay-toggle input:checked + .toggle-slider::after {
    transform: translateX(18px);
}
.toggle-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
}
.autoplay-start-btn {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border: none;
    border-top: 1px solid rgba(99,179,237,0.2);
    color: #fff;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 2px;
    padding: 18px;
    cursor: pointer;
    text-transform: uppercase;
    transition: filter 0.15s, transform 0.1s;
    border-radius: 0 0 20px 20px;
}
.autoplay-start-btn:hover  { filter: brightness(1.1); }
.autoplay-start-btn:active { transform: scale(0.99); }


/* =============================================
   WIN CLARITY & ENGAGEMENT PSYCHOLOGY
   Win Entrance, Near-Miss, Streak Toast
   ============================================= */

/* -- Win Entrance Animation -- */
@keyframes winEntrance {
    0%   { transform: scale(0.9); }
    60%  { transform: scale(1.05); }
    100% { transform: scale(1.0); }
}

.reel-win-entrance {
    animation: winEntrance 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

/* -- Near-Miss Flash Animation -- */
@keyframes nearMissFlash {
    0%   { box-shadow: none; transform: scale(1); border-color: transparent; }
    25%  { box-shadow: 0 0 18px rgba(251, 146, 60, 0.9), 0 0 40px rgba(251, 146, 60, 0.5); transform: scale(1.06); border-color: #fb923c; }
    60%  { box-shadow: 0 0 10px rgba(251, 146, 60, 0.6); transform: scale(0.98); border-color: #f97316; }
    100% { box-shadow: none; transform: scale(1); border-color: transparent; }
}

.reel-near-miss {
    border: 2px solid #fb923c !important;
    border-radius: 6px;
    animation: nearMissFlash 1.2s ease-out forwards;
    z-index: 4;
    position: relative;
}

/* -- Near-Miss Message Color -- */
.message-near-miss {
    color: #fb923c;
    font-weight: 900;
    text-shadow: 0 0 12px rgba(251, 146, 60, 0.7);
}

/* -- Streak Toast Notification -- */
@keyframes streakFadeUp {
    0%   { opacity: 0; transform: translateY(20px) scale(0.85); }
    20%  { opacity: 1; transform: translateY(0) scale(1.05); }
    80%  { opacity: 1; transform: translateY(0) scale(1.0); }
    100% { opacity: 0; transform: translateY(-12px) scale(0.95); }
}

.streak-toast {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.95), rgba(249, 115, 22, 0.9));
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1.5px;
    padding: 10px 22px;
    border-radius: 30px;
    border: 2px solid rgba(255, 200, 100, 0.6);
    box-shadow: 0 4px 20px rgba(234, 88, 12, 0.5), 0 0 0 1px rgba(255,255,255,0.1);
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    animation: streakFadeUp 2.5s ease-in-out forwards;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.streak-toast--hot {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.95), rgba(239, 68, 68, 0.9));
    border-color: rgba(255, 180, 100, 0.7);
    font-size: 17px;
}

.streak-toast--legendary {
    background: linear-gradient(135deg, rgba(120, 10, 10, 0.97), rgba(200, 30, 30, 0.95), rgba(255, 100, 0, 0.9));
    border-color: rgba(255, 215, 0, 0.8);
    font-size: 19px;
    box-shadow: 0 4px 30px rgba(255, 50, 0, 0.7), 0 0 0 2px rgba(255,215,0,0.3);
    animation: streakFadeUp 2.5s ease-in-out forwards;
}

/* ═══ Payline Path Visualizer ═══ */
.payline-path {
    position: absolute;
    left: 5%;
    width: 90%;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(52,211,153,0.9) 15%, rgba(52,211,153,0.9) 85%, transparent 100%);
    box-shadow: 0 0 8px rgba(52,211,153,0.8), 0 0 16px rgba(52,211,153,0.5);
    pointer-events: none;
    z-index: 20;
    animation: paylineFadeOut 2.2s ease-in-out forwards;
}
@keyframes paylineFadeOut {
    0%   { opacity: 0; transform: scaleX(0); }
    15%  { opacity: 1; transform: scaleX(1); }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PER-PROVIDER BOTTOM BAR v2  —  Dramatic distinct styling per studio
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. NOVASPIN  (Cyber HUD) ──────────────────────────────────────── */
.slot-chrome-novaspin .slot-bottom-bar {
    background: linear-gradient(180deg, rgba(0,8,20,0.97) 0%, rgba(0,4,12,0.99) 100%) !important;
    border-top: 1px solid rgba(0,212,255,0.35) !important;
    box-shadow: 0 -1px 0 rgba(0,212,255,0.08), inset 0 1px 0 rgba(0,212,255,0.06) !important;
    font-family: "Courier New", Courier, monospace;
    gap: 2px !important;
}
.slot-chrome-novaspin .slot-bar-section {
    border: 1px solid rgba(0,212,255,0.12) !important;
    border-radius: 2px !important;
    background: rgba(0,212,255,0.04) !important;
    padding: 5px 10px !important;
}
.slot-chrome-novaspin .slot-bar-label {
    font-family: "Courier New", Courier, monospace !important;
    font-size: 9px !important;
    letter-spacing: 3px !important;
    color: rgba(0,212,255,0.45) !important;
    text-transform: uppercase !important;
}
.slot-chrome-novaspin .slot-bar-value {
    font-family: "Courier New", Courier, monospace !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #00e5ff !important;
    text-shadow: 0 0 8px rgba(0,229,255,0.7), 0 0 16px rgba(0,229,255,0.3) !important;
    letter-spacing: 1px !important;
}
.slot-chrome-novaspin .slot-bet-btn {
    background: rgba(0,8,20,0.9) !important;
    border: 1px solid rgba(0,212,255,0.35) !important;
    border-radius: 2px !important;
    color: #00e5ff !important;
    font-family: "Courier New", Courier, monospace !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    width: 28px !important;
    height: 28px !important;
    box-shadow: 0 0 6px rgba(0,212,255,0.2) !important;
    text-shadow: 0 0 6px rgba(0,229,255,0.6) !important;
}
.slot-chrome-novaspin .slot-bet-btn:hover {
    background: rgba(0,212,255,0.12) !important;
    box-shadow: 0 0 12px rgba(0,212,255,0.5) !important;
}
.slot-chrome-novaspin .slot-auto-btn,
.slot-chrome-novaspin .slot-turbo-btn {
    font-family: "Courier New", Courier, monospace !important;
    border-radius: 2px !important;
    border: 1px solid rgba(0,212,255,0.3) !important;
    background: rgba(0,212,255,0.07) !important;
    color: rgba(0,212,255,0.8) !important;
    letter-spacing: 1px !important;
    font-size: 10px !important;
}
.slot-chrome-novaspin .slot-win-value {
    color: #00ffcc !important;
    text-shadow: 0 0 10px rgba(0,255,204,0.8) !important;
}

/* ── 2. CELESTIAL  (Opulent Olympus Gold) ──────────────────────────── */
.slot-chrome-celestial .slot-bottom-bar {
    background: linear-gradient(180deg, rgba(20,10,55,0.98) 0%, rgba(10,5,30,0.99) 100%) !important;
    border-top: 2px solid rgba(245,200,66,0.5) !important;
    box-shadow: 0 -4px 20px rgba(245,200,66,0.08) !important;
}
.slot-chrome-celestial .slot-bar-section {
    border: 1px solid rgba(245,200,66,0.15) !important;
    border-radius: 6px !important;
    background: rgba(245,200,66,0.04) !important;
    padding: 6px 14px !important;
}
.slot-chrome-celestial .slot-bar-label {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 9px !important;
    letter-spacing: 3px !important;
    color: rgba(245,200,66,0.55) !important;
    text-transform: uppercase !important;
    font-style: italic !important;
}
.slot-chrome-celestial .slot-bar-value {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #ffe566 !important;
    text-shadow: 0 0 12px rgba(245,200,66,0.6), 0 1px 3px rgba(0,0,0,0.8) !important;
}
.slot-chrome-celestial .slot-bet-btn {
    background: radial-gradient(circle at 40% 35%, #ffe566, #f5c842 50%, #a0720a 100%) !important;
    border: 2px solid rgba(255,229,102,0.7) !important;
    border-radius: 50% !important;
    color: #3a1c00 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    width: 34px !important;
    height: 34px !important;
    box-shadow: 0 2px 8px rgba(245,200,66,0.5), 0 1px 0 rgba(255,255,255,0.3) inset !important;
    text-shadow: none !important;
}
.slot-chrome-celestial .slot-bet-btn:hover {
    box-shadow: 0 3px 16px rgba(245,200,66,0.8), 0 1px 0 rgba(255,255,255,0.4) inset !important;
    transform: scale(1.08) !important;
}
.slot-chrome-celestial .slot-auto-btn,
.slot-chrome-celestial .slot-turbo-btn {
    border-radius: 20px !important;
    border: 1px solid rgba(245,200,66,0.4) !important;
    background: rgba(245,200,66,0.1) !important;
    color: #f5c842 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-style: italic !important;
}
.slot-chrome-celestial .slot-win-value {
    color: #ffe566 !important;
    text-shadow: 0 0 14px rgba(255,229,102,0.7), 0 0 4px rgba(255,200,0,0.5) !important;
}

/* ── 3. IRONREEL  (Frontier Brass) ─────────────────────────────────── */
.slot-chrome-ironreel .slot-bottom-bar {
    background: linear-gradient(180deg, rgba(25,14,6,0.98) 0%, rgba(15,8,3,0.99) 100%) !important;
    border-top: 2px solid rgba(180,120,50,0.5) !important;
    box-shadow: 0 -2px 12px rgba(180,120,50,0.1) !important;
}
.slot-chrome-ironreel .slot-bar-section {
    border: 1px solid rgba(180,120,50,0.2) !important;
    border-radius: 3px !important;
    background: rgba(180,120,50,0.05) !important;
    padding: 5px 12px !important;
}
.slot-chrome-ironreel .slot-bar-label {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 8px !important;
    letter-spacing: 2.5px !important;
    color: rgba(180,120,50,0.55) !important;
    text-transform: uppercase !important;
}
.slot-chrome-ironreel .slot-bar-value {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #d4a96a !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 0 8px rgba(212,169,106,0.3) !important;
}
.slot-chrome-ironreel .slot-bet-btn {
    background: radial-gradient(circle at 40% 30%, #d4a96a, #b07830 50%, #6b4a18 100%) !important;
    border: 2px solid rgba(212,169,106,0.6) !important;
    border-radius: 50% !important;
    color: #1a0e00 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    width: 34px !important;
    height: 34px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 1px 0 rgba(255,220,150,0.25) inset !important;
}
.slot-chrome-ironreel .slot-bet-btn:hover {
    box-shadow: 0 3px 12px rgba(212,169,106,0.6), 0 1px 0 rgba(255,220,150,0.35) inset !important;
    transform: scale(1.06) !important;
}
.slot-chrome-ironreel .slot-auto-btn,
.slot-chrome-ironreel .slot-turbo-btn {
    border-radius: 3px !important;
    border: 1px solid rgba(180,120,50,0.35) !important;
    background: rgba(180,120,50,0.08) !important;
    color: #d4a96a !important;
    font-family: Georgia, "Times New Roman", serif !important;
}
.slot-chrome-ironreel .slot-win-value {
    color: #ffc86e !important;
    text-shadow: 0 0 10px rgba(255,180,80,0.6) !important;
}

/* ── 4. GOLDENEDGE  (Candy Bubbly) ─────────────────────────────────── */
@keyframes goldenSpinPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,111,216,0.7), 0 0 0 0 rgba(255,160,100,0.4); }
    50%  { box-shadow: 0 0 0 6px rgba(255,111,216,0.0), 0 0 0 12px rgba(255,160,100,0.0); }
    100% { box-shadow: 0 0 0 0 rgba(255,111,216,0.0), 0 0 0 0 rgba(255,160,100,0.0); }
}
.slot-chrome-goldenedge .slot-bottom-bar {
    background: linear-gradient(180deg, rgba(45,10,55,0.98) 0%, rgba(30,5,40,0.99) 100%) !important;
    border-top: 2px solid rgba(255,111,216,0.4) !important;
    box-shadow: 0 -4px 18px rgba(255,111,216,0.08) !important;
}
.slot-chrome-goldenedge .slot-bar-section {
    border: 1px solid rgba(255,111,216,0.2) !important;
    border-radius: 14px !important;
    background: rgba(255,111,216,0.06) !important;
    padding: 6px 16px !important;
}
.slot-chrome-goldenedge .slot-bar-label {
    font-size: 9px !important;
    letter-spacing: 2px !important;
    color: rgba(255,180,240,0.6) !important;
    text-transform: uppercase !important;
}
.slot-chrome-goldenedge .slot-bar-value {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ffb3e8 !important;
    text-shadow: 0 0 10px rgba(255,111,216,0.6), 0 0 3px rgba(255,180,240,0.4) !important;
}
.slot-chrome-goldenedge .slot-bet-btn {
    background: linear-gradient(135deg, #ff6fd8, #ff9a5c) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    width: 34px !important;
    height: 34px !important;
    box-shadow: 0 3px 10px rgba(255,111,216,0.5), 0 1px 0 rgba(255,255,255,0.3) inset !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}
.slot-chrome-goldenedge .slot-bet-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 16px rgba(255,111,216,0.7) !important;
}
.slot-chrome-goldenedge .slot-auto-btn,
.slot-chrome-goldenedge .slot-turbo-btn {
    border-radius: 20px !important;
    border: 1px solid rgba(255,111,216,0.4) !important;
    background: linear-gradient(135deg, rgba(255,111,216,0.15), rgba(255,154,92,0.1)) !important;
    color: #ffb3e8 !important;
}
.slot-chrome-goldenedge .slot-win-value {
    color: #ff6fd8 !important;
    text-shadow: 0 0 12px rgba(255,111,216,0.8), 0 0 4px rgba(255,180,240,0.5) !important;
}
.slot-chrome-goldenedge .slot-spin-btn {
    animation: goldenSpinPulse 2s ease-out infinite !important;
}

/* ── 5. VAULTX  (Military Steel) ───────────────────────────────────── */
.slot-chrome-vaultx .slot-bottom-bar {
    background: linear-gradient(180deg, rgba(18,22,24,0.99) 0%, rgba(10,13,14,1) 100%) !important;
    border-top: 2px solid rgba(80,90,90,0.6) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
    font-family: "Courier New", Courier, monospace;
}
.slot-chrome-vaultx .slot-bar-section {
    border: 1px solid rgba(80,90,90,0.3) !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,0.03) !important;
    padding: 5px 12px !important;
}
.slot-chrome-vaultx .slot-bar-label {
    font-family: "Courier New", Courier, monospace !important;
    font-size: 9px !important;
    letter-spacing: 3px !important;
    color: rgba(120,130,130,0.7) !important;
    text-transform: uppercase !important;
}
.slot-chrome-vaultx .slot-bar-value {
    font-family: "Courier New", Courier, monospace !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #9ca3af !important;
    text-shadow: none !important;
    letter-spacing: 1px !important;
}
.slot-chrome-vaultx .slot-bet-btn {
    background: linear-gradient(180deg, #3d4448 0%, #262b2d 50%, #1a1e20 100%) !important;
    border: 1px solid rgba(100,110,110,0.5) !important;
    border-radius: 0 !important;
    color: #9ca3af !important;
    font-family: "Courier New", Courier, monospace !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    width: 28px !important;
    height: 28px !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 4px rgba(0,0,0,0.5) !important;
}
.slot-chrome-vaultx .slot-bet-btn:hover {
    background: linear-gradient(180deg, #4a5055 0%, #333a3d 50%, #232829 100%) !important;
    color: #c5c9cc !important;
}
.slot-chrome-vaultx .slot-auto-btn,
.slot-chrome-vaultx .slot-turbo-btn {
    font-family: "Courier New", Courier, monospace !important;
    border-radius: 0 !important;
    border: 1px solid rgba(80,90,90,0.45) !important;
    background: rgba(255,255,255,0.04) !important;
    color: #7a8080 !important;
    letter-spacing: 1px !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
}
.slot-chrome-vaultx .slot-win-value {
    color: #a3b880 !important;
    text-shadow: none !important;
}

/* ── 6. SOLSTICE  (Red Lacquer) ─────────────────────────────────────── */
.slot-chrome-solstice .slot-bottom-bar {
    background: linear-gradient(180deg, rgba(35,5,5,0.99) 0%, rgba(20,2,2,1) 100%) !important;
    border-top: 2px solid rgba(220,40,40,0.5) !important;
    box-shadow: 0 -3px 14px rgba(220,40,40,0.08), inset 0 1px 0 rgba(255,215,0,0.1) !important;
}
.slot-chrome-solstice .slot-bar-section {
    border: 1px solid rgba(220,40,40,0.2) !important;
    border-radius: 3px !important;
    background: rgba(220,40,40,0.05) !important;
    padding: 5px 12px !important;
}
.slot-chrome-solstice .slot-bar-label {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 9px !important;
    letter-spacing: 2.5px !important;
    color: rgba(255,215,0,0.55) !important;
    text-transform: uppercase !important;
    font-style: italic !important;
}
.slot-chrome-solstice .slot-bar-value {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ffd700 !important;
    text-shadow: 0 0 10px rgba(255,215,0,0.5), 0 1px 3px rgba(0,0,0,0.7) !important;
}
.slot-chrome-solstice .slot-bet-btn {
    background: linear-gradient(180deg, #e03030 0%, #b01818 50%, #6a0a0a 100%) !important;
    border: 1px solid rgba(255,215,0,0.5) !important;
    border-radius: 3px !important;
    color: #ffd700 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    width: 30px !important;
    height: 30px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 1px 0 rgba(255,215,0,0.2) inset !important;
    text-shadow: 0 0 6px rgba(255,215,0,0.5) !important;
}
.slot-chrome-solstice .slot-bet-btn:hover {
    background: linear-gradient(180deg, #ee4040 0%, #c02020 50%, #7a1010 100%) !important;
    box-shadow: 0 3px 12px rgba(220,40,40,0.5), 0 0 6px rgba(255,215,0,0.3) !important;
}
.slot-chrome-solstice .slot-auto-btn,
.slot-chrome-solstice .slot-turbo-btn {
    border-radius: 3px !important;
    border: 1px solid rgba(220,40,40,0.4) !important;
    background: rgba(220,40,40,0.1) !important;
    color: #ffd700 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-style: italic !important;
}
.slot-chrome-solstice .slot-win-value {
    color: #ffd700 !important;
    text-shadow: 0 0 14px rgba(255,215,0,0.7), 0 0 4px rgba(255,215,0,0.4) !important;
}

/* ── 7. PHANTOMWORKS  (Gothic Horror) ───────────────────────────────── */
.slot-chrome-phantomworks .slot-bottom-bar {
    background: linear-gradient(180deg, rgba(12,5,18,0.99) 0%, rgba(6,2,10,1) 100%) !important;
    border-top: 1px solid rgba(150,30,180,0.4) !important;
    box-shadow: 0 -2px 12px rgba(120,20,150,0.1), inset 0 1px 0 rgba(180,0,60,0.1) !important;
}
.slot-chrome-phantomworks .slot-bar-section {
    border: 1px solid rgba(150,30,180,0.15) !important;
    border-radius: 2px !important;
    background: rgba(80,0,100,0.07) !important;
    padding: 5px 12px !important;
}
.slot-chrome-phantomworks .slot-bar-label {
    font-size: 9px !important;
    letter-spacing: 2px !important;
    color: rgba(200,0,60,0.65) !important;
    text-transform: uppercase !important;
}
.slot-chrome-phantomworks .slot-bar-value {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #c084fc !important;
    text-shadow: 0 0 8px rgba(192,132,252,0.5), 0 0 2px rgba(150,30,180,0.4) !important;
}
.slot-chrome-phantomworks .slot-bet-btn {
    background: linear-gradient(180deg, rgba(80,0,100,0.6) 0%, rgba(30,0,40,0.8) 100%) !important;
    border: 1px solid rgba(200,0,60,0.5) !important;
    border-radius: 2px !important;
    color: #c084fc !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    width: 28px !important;
    height: 28px !important;
    box-shadow: 0 0 6px rgba(200,0,60,0.3), inset 0 1px 0 rgba(150,30,180,0.15) !important;
    text-shadow: 0 0 5px rgba(192,132,252,0.5) !important;
}
.slot-chrome-phantomworks .slot-bet-btn:hover {
    background: linear-gradient(180deg, rgba(120,0,150,0.7) 0%, rgba(50,0,60,0.9) 100%) !important;
    box-shadow: 0 0 12px rgba(200,0,60,0.5), 0 0 4px rgba(150,30,180,0.4) !important;
}
.slot-chrome-phantomworks .slot-auto-btn,
.slot-chrome-phantomworks .slot-turbo-btn {
    border-radius: 2px !important;
    border: 1px solid rgba(150,30,180,0.3) !important;
    background: rgba(80,0,100,0.1) !important;
    color: rgba(192,132,252,0.7) !important;
    letter-spacing: 0.5px !important;
}
.slot-chrome-phantomworks .slot-win-value {
    color: #ff4488 !important;
    text-shadow: 0 0 10px rgba(255,68,136,0.6), 0 0 4px rgba(200,0,60,0.4) !important;
}

/* ── 8. ARCADEFORGE  (Retro Arcade Cabinet) ─────────────────────────── */
@keyframes arcadeFlicker {
    0%, 95%, 100% { opacity: 1; }
    96%            { opacity: 0.88; }
    97%            { opacity: 1; }
    98%            { opacity: 0.92; }
}
.slot-chrome-arcadeforge .slot-bottom-bar {
    background: linear-gradient(180deg, rgba(0,8,14,0.99) 0%, rgba(0,4,8,1) 100%) !important;
    border-top: 3px solid rgba(60,220,255,0.5) !important;
    box-shadow: 0 -2px 0 rgba(60,220,255,0.2), inset 0 1px 0 rgba(60,220,255,0.08) !important;
    animation: arcadeFlicker 6s linear infinite;
}
.slot-chrome-arcadeforge .slot-bar-section {
    border: 1px solid rgba(60,220,255,0.15) !important;
    border-radius: 0 !important;
    background: rgba(0,0,0,0.5) !important;
    padding: 4px 12px !important;
}
.slot-chrome-arcadeforge .slot-bar-label {
    font-family: "Courier New", Courier, monospace !important;
    font-size: 8px !important;
    letter-spacing: 3px !important;
    color: rgba(60,220,255,0.5) !important;
    text-transform: uppercase !important;
}
.slot-chrome-arcadeforge .slot-bar-value {
    font-family: "Courier New", Courier, monospace !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #f0f0f0 !important;
    text-shadow: 0 0 4px rgba(240,240,240,0.5), 0 0 8px rgba(60,220,255,0.3) !important;
    letter-spacing: 1px !important;
}
.slot-chrome-arcadeforge .slot-bet-btn {
    background: linear-gradient(180deg, #3a3a3a 0%, #222 50%, #111 100%) !important;
    border: 2px solid rgba(60,220,255,0.4) !important;
    border-radius: 3px !important;
    color: #3cdcff !important;
    font-family: "Courier New", Courier, monospace !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    width: 28px !important;
    height: 28px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.7), 0 0 6px rgba(60,220,255,0.2) !important;
    text-shadow: 0 0 5px rgba(60,220,255,0.6) !important;
}
.slot-chrome-arcadeforge .slot-bet-btn:active {
    transform: translateY(2px) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.7), 0 0 4px rgba(60,220,255,0.2) !important;
}
.slot-chrome-arcadeforge .slot-auto-btn,
.slot-chrome-arcadeforge .slot-turbo-btn {
    font-family: "Courier New", Courier, monospace !important;
    border-radius: 0 !important;
    border: 1px solid rgba(60,220,255,0.3) !important;
    background: rgba(0,0,0,0.6) !important;
    color: rgba(60,220,255,0.7) !important;
    letter-spacing: 1px !important;
    font-size: 9px !important;
    text-transform: uppercase !important;
}
.slot-chrome-arcadeforge .slot-spin-btn {
    background: radial-gradient(circle at 40% 30%, #ff4444, #cc0000 50%, #880000 100%) !important;
    border: 3px solid rgba(255,80,80,0.6) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 0 #440000, 0 0 18px rgba(255,50,50,0.5) !important;
    font-family: "Courier New", Courier, monospace !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}
.slot-chrome-arcadeforge .slot-spin-btn:active {
    transform: translateY(4px) !important;
    box-shadow: 0 0 0 #440000, 0 0 10px rgba(255,50,50,0.4) !important;
}
.slot-chrome-arcadeforge .slot-win-value {
    color: #ffe83c !important;
    text-shadow: 0 0 8px rgba(255,232,60,0.7), 0 0 2px rgba(255,200,0,0.5) !important;
    font-family: "Courier New", Courier, monospace !important;
}
/* ═══ END PER-PROVIDER BOTTOM BAR v2 ═══════════════════════════════════ */


/* ═══ Reel Anticipation ═══ */
.reel-anticipation {
    animation: anticipationShake 0.18s ease-in-out 3;
    box-shadow: inset 0 0 0 2px rgba(255,215,0,0.7), 0 0 20px rgba(255,215,0,0.4) !important;
}
@keyframes anticipationShake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-3px); }
    75%       { transform: translateX(3px); }
}

/* ═══ Idle Spin Invitation ═══ */
@keyframes idleSpinPulse {
    0%, 100% { box-shadow: var(--slot-spin-glow, 0 0 20px rgba(255,165,0,0.4)); transform: scale(1); }
    50%       { box-shadow: 0 0 0 8px rgba(255,165,0,0.15), 0 0 30px rgba(255,165,0,0.6); transform: scale(1.04); }
}
.spin-btn-idle-pulse {
    animation: idleSpinPulse 1.4s ease-in-out infinite !important;
}