/* Royal Slots Casino - Bundled Styles */
/* Generated: 2026-03-18T13:28:59.354Z */


/* ─── styles.css (1/4) ─── */
        html {
            scroll-behavior: smooth;
            /* Prevent mobile browsers from auto-enlarging text after render (Android Chrome font boosting) */
            -webkit-text-size-adjust: 100%;
            -moz-text-size-adjust: 100%;
            text-size-adjust: 100%;
            /* Disable double-tap zoom globally — keeps pinch-zoom for accessibility */
            touch-action: manipulation;
        }

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

        body {
            font-family: 'Inter', -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, #0f2027, #203a43, #2c5364, #203a43, #0f2027);
            padding: 10px 0;
            text-align: center;
            font-weight: 700;
            font-size: 13px;
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(251,191,36,0.15);
        }

        .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: 1px solid rgba(251, 191, 36, 0.15);
            padding: 16px 0;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
        }

        .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: 'JetBrains Mono', '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: 'JetBrains Mono', 'Courier New', monospace;
            opacity: 0.7;
        }

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

        .balance-display {
            background: linear-gradient(135deg, rgba(251,191,36,0.1), rgba(251,191,36,0.05));
            border: 1px solid rgba(251,191,36,0.25);
            border-radius: 10px;
            padding: 8px 16px;
            min-width: 140px;
            text-align: center;
            position: relative;
        }

        .balance-label {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 1.5px;
            color: rgba(251,191,36,0.7);
            text-transform: uppercase;
            margin-bottom: 2px;
        }

        .balance-amount {
            font-size: 20px;
            font-weight: 900;
            color: #fbbf24;
            font-family: 'JetBrains Mono', monospace;
            letter-spacing: -0.5px;
            font-variant-numeric: tabular-nums;
        }

        .btn {
            padding: 11px 16px;
            border: 1px solid transparent;
            border-radius: 4px;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            letter-spacing: 0.2px;
        }

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

        .btn-deposit {
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff;
            border: 1px solid rgba(16,185,129,0.4);
            border-radius: 8px;
            font-weight: 800;
            letter-spacing: 0.5px;
            padding: 10px 18px;
            box-shadow: 0 4px 12px rgba(16,185,129,0.3);
            transition: all 0.2s ease;
        }

        .btn-deposit:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(16,185,129,0.4);
            background: linear-gradient(135deg, #34d399, #10b981);
        }

        .btn-user {
            background: rgba(30, 30, 50, 0.8);
            border: 1px solid rgba(255,255,255,0.1);
            width: 40px;
            height: 40px;
            min-width: unset;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255,255,255,0.8);
            transition: all 0.2s ease;
        }
        .btn-user:hover {
            background: rgba(251,191,36,0.1);
            border-color: rgba(251,191,36,0.3);
            color: #fbbf24;
        }

        /* 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, #1a0533 0%, #2d0b4a 25%, #1a1a2e 50%, #16213e 75%, #0f3460 100%);
            border-radius: 20px;
            padding: 60px 48px;
            margin-bottom: 48px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.4);
            border: 1px solid rgba(251, 191, 36, 0.2);
        }

        .hero-banner::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 80% 50%, rgba(251,191,36,0.08) 0%, transparent 60%),
                        radial-gradient(ellipse at 20% 50%, rgba(139,92,246,0.08) 0%, transparent 60%);
        }

        .hero-banner::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(251,191,36,0.6), rgba(139,92,246,0.4), transparent);
            border-radius: 0 0 20px 20px;
        }

        .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;
            letter-spacing: -1px;
            text-shadow: 0 2px 20px rgba(251,191,36,0.3), 0 0 40px rgba(139,92,246,0.2);
        }

        .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);
        }

        .btn-deposit-hero {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #000;
            font-weight: 900;
            font-size: 14px;
            padding: 14px 28px;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(245,158,11,0.4);
            transition: transform .1s, box-shadow .1s;
        }
        .btn-deposit-hero:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(245,158,11,0.55); }

        /* ── Casino Features Grid ── */
        .casino-features-grid {
            margin: 10px 0;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        .cfg-category {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 12px;
            padding: 10px 10px 8px;
        }
        .cfg-cat-label {
            font-size: 8px;
            font-weight: 800;
            letter-spacing: 1.5px;
            color: rgba(255,255,255,0.35);
            text-transform: uppercase;
            margin-bottom: 8px;
            padding-bottom: 6px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .cfg-cat-items {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
        }
        .cfg-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 6px 7px;
            border-radius: 7px;
            border: 1px solid rgba(255,255,255,0.07);
            background: rgba(255,255,255,0.04);
            color: rgba(255,255,255,0.65);
            cursor: pointer;
            transition: all .12s;
            font-size: 9.5px;
            font-weight: 600;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
        }
        .cfg-btn span { font-size: 13px; flex-shrink: 0; }
        .cfg-btn:hover {
            background: rgba(255,255,255,0.09);
            color: #fff;
            border-color: rgba(255,255,255,0.15);
        }
        .cfg-btn.cfg-vip {
            border-color: rgba(251,191,36,.15);
            color: rgba(251,191,36,.8);
        }
        .cfg-btn.cfg-vip:hover {
            background: rgba(251,191,36,.1);
            color: #fbbf24;
            border-color: rgba(251,191,36,.35);
        }

        @media (max-width: 900px) {
            .casino-features-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
            .quick-games-nav { padding: 10px 10px; }
            .casino-features-grid { grid-template-columns: 1fr; }
            .qgn-tile { min-width: 56px; padding: 8px 10px; }
        }

        .hero-stats {
            background: rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
            padding: 24px 28px;
            text-align: center;
            backdrop-filter: blur(8px);
            min-width: 180px;
        }

        .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;
        }

        .hero-jackpot {
            text-align: center;
            margin-top: 12px;
            padding: 10px 16px;
            background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(217,119,6,0.08));
            border: 1px solid rgba(251,191,36,0.35);
            border-radius: 10px;
        }
        .hero-jackpot-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1px;
            color: rgba(251,191,36,0.7);
            text-transform: uppercase;
            margin-bottom: 4px;
        }
        .hero-jackpot-amount {
            font-size: 24px;
            font-weight: 900;
            color: #fbbf24;
            text-shadow: 0 0 20px rgba(251,191,36,0.5);
            letter-spacing: 1px;
            font-variant-numeric: tabular-nums;
        }

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

        .section-header::after {
            content: '';
            display: block;
            width: 40px;
            height: 3px;
            background: linear-gradient(90deg, #fbbf24, rgba(251,191,36,0.2));
            border-radius: 2px;
            margin-top: 8px;
        }

        .section-title {
            font-size: 18px;
            font-weight: 800;
            color: #f0f0f0;
            letter-spacing: -0.3px;
            display: flex;
            align-items: center;
            gap: 8px;
            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(-6px) scale(1.03);
            border-color: rgba(251, 191, 36, 0.6);
            box-shadow: 0 12px 32px rgba(251, 191, 36, 0.18), 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(251, 191, 36, 0.15);
        }

        @keyframes thumbShimmer {
            0%   { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        .game-thumbnail {
            aspect-ratio: 3 / 4;
            position: relative;
            overflow: hidden;
        }
        .game-thumbnail[data-bg] {
            background: linear-gradient(90deg, #1a2332 25%, #243447 50%, #1a2332 75%) !important;
            background-size: 200% 100% !important;
            animation: thumbShimmer 1.5s ease-in-out infinite;
        }

        .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; }
        .tag-adult { background: linear-gradient(135deg, #d32f2f, #880e4f); color: #fff; font-weight: 800; letter-spacing: 0.5px; }

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

        .game-name {
            font-size: 13px;
            font-weight: 700;
            color: var(--rg-text-50, #f0f0f0);
            margin-bottom: 3px;
            white-space: normal;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 1.3;
            max-height: 2.6em;
        }

        .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-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 60%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
            transition: left 0.5s ease;
            z-index: 5;
            pointer-events: none;
        }
        .game-card:hover::before {
            left: 150%;
        }

        .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;
            background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(10, 15, 30, 0.99));
            border: 1px solid rgba(251, 191, 36, 0.15);
            border-radius: 20px;
            padding: 24px;
            box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.04) inset;
            backdrop-filter: blur(20px);
        }

        .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;
            touch-action: manipulation;
        }

        /* 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;
            user-select: none;
            -webkit-user-select: none;
        }

        /* ═══ 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;
        }

        .reel-symbol-text {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            font-size: 1.8em;
            font-weight: 800;
            text-transform: uppercase;
            color: rgba(255,255,255,0.9);
            text-shadow: 0 2px 6px rgba(0,0,0,0.6);
            padding: 4px;
            text-align: center;
            line-height: 1.1;
            word-break: break-word;
            overflow: hidden;
        }

        /* 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;
        }

        /* 9. NEONCORE LABS — Matrix green data streams + circuit glow */
        @keyframes neonCorePulse {
            0%, 100% {
                box-shadow: 0 0 0 2px rgba(0,255,128,0.5),
                            0 0 0 4px rgba(0,200,100,0.2),
                            0 0 40px rgba(0,255,100,0.15),
                            inset 0 0 20px rgba(0,30,15,0.40);
            }
            50% {
                box-shadow: 0 0 0 2px rgba(0,255,128,0.8),
                            0 0 0 4px rgba(0,200,100,0.5),
                            0 0 80px rgba(0,255,100,0.35),
                            inset 0 0 35px rgba(0,30,15,0.40);
            }
        }
        @keyframes neonCoreContainerGlow {
            0%, 100% { box-shadow: 0 0 0 2px rgba(0,180,90,0.4), 0 0 20px rgba(0,255,128,0.12), inset 0 2px 6px rgba(0,0,0,0.50); }
            50%      { box-shadow: 0 0 0 2px rgba(0,255,128,0.7), 0 0 50px rgba(0,255,128,0.30), inset 0 2px 6px rgba(0,0,0,0.50); }
        }
        .slot-chrome-neoncore .slot-reel-area::before {
            background:
                repeating-linear-gradient(90deg,
                    transparent 0px, transparent 18px,
                    rgba(0,255,128,0.03) 18px, rgba(0,255,128,0.03) 19px
                ),
                radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0,255,100,0.08) 0%, transparent 70%);
        }
        .slot-chrome-neoncore .reels-container {
            animation: neonCoreContainerGlow 2.5s ease-in-out infinite !important;
        }

        /* 10. FROSTBYTE GAMING — Icy shimmer + frozen crystal edges */
        @keyframes frostShimmer {
            0%, 100% {
                box-shadow: 0 0 0 2px rgba(100,180,255,0.5),
                            0 0 0 4px rgba(180,220,255,0.2),
                            0 0 45px rgba(100,180,255,0.18),
                            inset 0 0 25px rgba(10,20,40,0.40);
            }
            50% {
                box-shadow: 0 0 0 2px rgba(140,210,255,0.8),
                            0 0 0 4px rgba(180,220,255,0.5),
                            0 0 80px rgba(100,200,255,0.35),
                            inset 0 0 35px rgba(10,20,40,0.40);
            }
        }
        @keyframes frostContainerGlow {
            0%, 100% { box-shadow: 0 0 0 2px rgba(100,180,255,0.4), 0 0 15px rgba(140,210,255,0.10), inset 0 1px 6px rgba(0,0,0,0.45); }
            50%      { box-shadow: 0 0 0 2px rgba(140,210,255,0.7), 0 0 45px rgba(180,230,255,0.28), inset 0 1px 6px rgba(0,0,0,0.45); }
        }
        .slot-chrome-frostbyte .slot-reel-area::before {
            background:
                radial-gradient(ellipse 50% 60% at 20% 30%, rgba(140,210,255,0.10) 0%, transparent 65%),
                radial-gradient(ellipse 50% 60% at 80% 70%, rgba(180,230,255,0.08) 0%, transparent 65%);
        }
        .slot-chrome-frostbyte .reels-container {
            animation: frostContainerGlow 3.5s ease-in-out infinite !important;
        }

        /* 11. DESERT GOLD STUDIOS — Warm sand dunes + golden heat haze */
        @keyframes desertHaze {
            0%, 100% {
                box-shadow: 0 0 0 2px rgba(200,150,50,0.5),
                            0 0 0 4px rgba(180,120,30,0.2),
                            0 0 50px rgba(200,150,50,0.18),
                            inset 0 0 25px rgba(30,15,0,0.40);
            }
            50% {
                box-shadow: 0 0 0 2px rgba(220,170,60,0.8),
                            0 0 0 4px rgba(200,140,40,0.5),
                            0 0 85px rgba(220,170,60,0.35),
                            inset 0 0 35px rgba(30,15,0,0.40);
            }
        }
        @keyframes desertContainerGlow {
            0%, 100% { box-shadow: 0 0 0 2px rgba(180,130,40,0.4), 0 0 20px rgba(200,150,50,0.12), inset 0 2px 6px rgba(0,0,0,0.45); }
            50%      { box-shadow: 0 0 0 2px rgba(220,170,60,0.7), 0 0 55px rgba(220,170,60,0.30), inset 0 2px 6px rgba(0,0,0,0.45); }
        }
        .slot-chrome-desertgold .slot-reel-area::before {
            background:
                radial-gradient(ellipse 70% 50% at 50% 80%, rgba(200,150,50,0.12) 0%, transparent 65%),
                linear-gradient(180deg, rgba(220,170,60,0.05) 0%, transparent 40%);
        }
        .slot-chrome-desertgold .reels-container {
            animation: desertContainerGlow 3s ease-in-out infinite !important;
        }

        /* 12. ORIENT REELS — Red lantern glow + ink brush elegance */
        @keyframes orientLantern {
            0%, 100% {
                box-shadow: 0 0 0 2px rgba(200,30,30,0.5),
                            0 0 0 4px rgba(180,20,20,0.2),
                            0 0 45px rgba(200,30,30,0.18),
                            inset 0 0 25px rgba(30,0,0,0.40);
            }
            50% {
                box-shadow: 0 0 0 2px rgba(230,50,40,0.8),
                            0 0 0 4px rgba(200,30,30,0.5),
                            0 0 80px rgba(230,50,40,0.35),
                            inset 0 0 35px rgba(30,0,0,0.40);
            }
        }
        @keyframes orientContainerGlow {
            0%, 100% { box-shadow: 0 0 0 2px rgba(180,25,25,0.4), 0 0 18px rgba(200,30,30,0.12), inset 0 1px 6px rgba(0,0,0,0.50); }
            50%      { box-shadow: 0 0 0 2px rgba(230,50,40,0.7), 0 0 50px rgba(230,50,40,0.28), inset 0 1px 6px rgba(0,0,0,0.50); }
        }
        .slot-chrome-orientreels .slot-reel-area::before {
            background:
                radial-gradient(ellipse 40% 60% at 15% 50%, rgba(200,30,30,0.10) 0%, transparent 65%),
                radial-gradient(ellipse 40% 60% at 85% 50%, rgba(200,30,30,0.10) 0%, transparent 65%),
                radial-gradient(ellipse 70% 40% at 50% 100%, rgba(180,20,20,0.12) 0%, transparent 60%);
        }
        .slot-chrome-orientreels .reels-container {
            animation: orientContainerGlow 2.8s 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%); }
        .slot-chrome-neoncore    .slot-reel-area { background: radial-gradient(ellipse at 50% 50%, rgba(0,60,30,0.35)  0%, rgba(0,8,4,0.55)  100%); }
        .slot-chrome-frostbyte   .slot-reel-area { background: radial-gradient(ellipse at 50% 40%, rgba(20,50,80,0.35) 0%, rgba(2,6,12,0.55) 100%); }
        .slot-chrome-desertgold  .slot-reel-area { background: radial-gradient(ellipse at 50% 60%, rgba(80,50,10,0.35) 0%, rgba(12,6,0,0.55) 100%); }
        .slot-chrome-orientreels .slot-reel-area { background: radial-gradient(ellipse at 50% 50%, rgba(70,10,10,0.35) 0%, rgba(10,0,0,0.55) 100%); }

        /* ============================================
           VISUAL OVERHAUL: Provider Reel Frame Animations
           ============================================ */

        /* NovaSpin: Electric pulse border */
        .slot-chrome-novaspin .reel-grid {
            box-shadow: 0 0 8px rgba(0,229,255,0.2);
            animation: novaFrameEnergy 3s ease-in-out infinite;
        }
        @keyframes novaFrameEnergy {
            0%, 100% { box-shadow: 0 0 8px rgba(0,229,255,0.2), inset 0 0 4px rgba(0,229,255,0.05); }
            50% { box-shadow: 0 0 20px rgba(0,229,255,0.5), inset 0 0 10px rgba(0,229,255,0.1), 0 0 40px rgba(0,229,255,0.15); }
        }

        /* Celestial: Golden shimmer cascade */
        .slot-chrome-celestial .reel-grid {
            animation: celestialFrameShimmer 4s ease-in-out infinite;
        }
        @keyframes celestialFrameShimmer {
            0%, 100% { box-shadow: inset 0 0 20px rgba(255,215,0,0.1); }
            50% { box-shadow: inset 0 0 40px rgba(255,215,0,0.3), 0 0 15px rgba(255,215,0,0.2); }
        }

        /* IronReel: Metallic grain shift */
        .slot-chrome-ironreel .reel-grid {
            animation: ironFrameGrain 2s steps(4) infinite;
        }
        @keyframes ironFrameGrain {
            0% { filter: contrast(1) brightness(1); }
            25% { filter: contrast(1.02) brightness(1.01); }
            50% { filter: contrast(0.98) brightness(0.99); }
            75% { filter: contrast(1.01) brightness(1.02); }
        }

        /* GoldenEdge: Liquid gold flow */
        .slot-chrome-goldenedge .reel-grid {
            animation: goldenFrameFlow 5s ease-in-out infinite;
        }
        @keyframes goldenFrameFlow {
            0%, 100% { box-shadow: 0 0 10px rgba(255,183,77,0.2), inset 0 -2px 8px rgba(255,183,77,0.1); }
            50% { box-shadow: 0 0 25px rgba(255,183,77,0.4), inset 0 2px 15px rgba(255,183,77,0.2); }
        }

        /* VaultX: Security laser scan sweep */
        .slot-chrome-vaultx .reel-grid {
            position: relative;
            overflow: hidden;
        }
        .slot-chrome-vaultx .reel-grid::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0,255,65,0.06), transparent);
            animation: vaultFrameScan 6s linear infinite;
            pointer-events: none;
            z-index: 1;
        }
        @keyframes vaultFrameScan {
            0% { left: -50%; }
            100% { left: 150%; }
        }

        /* SolsticeFX: Aurora gradient shift */
        .slot-chrome-solstice .reel-grid {
            animation: solsticeFrameAurora 8s ease-in-out infinite;
        }
        @keyframes solsticeFrameAurora {
            0%, 100% { box-shadow: 0 0 15px rgba(220,38,38,0.15); }
            33% { box-shadow: 0 0 20px rgba(255,215,0,0.2); }
            66% { box-shadow: 0 0 15px rgba(220,38,38,0.2), 0 0 30px rgba(255,215,0,0.1); }
        }

        /* PhantomWorks: Dark mist tendrils */
        .slot-chrome-phantomworks .reel-grid {
            animation: phantomFrameMist 5s ease-in-out infinite;
        }
        @keyframes phantomFrameMist {
            0%, 100% { box-shadow: inset 0 0 30px rgba(128,0,255,0.1), 0 0 10px rgba(128,0,255,0.05); }
            50% { box-shadow: inset 0 0 50px rgba(128,0,255,0.2), 0 0 20px rgba(128,0,255,0.1); }
        }

        /* ArcadeForge: Neon flicker */
        .slot-chrome-arcadeforge .reel-grid {
            animation: arcadeFrameFlicker 4s steps(1) infinite;
        }
        @keyframes arcadeFrameFlicker {
            0%, 19%, 21%, 39%, 41%, 100% { box-shadow: 0 0 8px rgba(0,255,255,0.2); }
            20%, 40% { box-shadow: 0 0 2px rgba(0,255,255,0.05); }
        }

        /* NeonCore Labs: Matrix data stream border */
        .slot-chrome-neoncore .reel-grid {
            box-shadow: 0 0 8px rgba(0,255,128,0.2);
            animation: neonCoreFrame 2.5s ease-in-out infinite;
        }
        @keyframes neonCoreFrame {
            0%, 100% { box-shadow: 0 0 8px rgba(0,255,128,0.2), inset 0 0 4px rgba(0,255,128,0.05); }
            50% { box-shadow: 0 0 22px rgba(0,255,128,0.5), inset 0 0 10px rgba(0,255,128,0.1), 0 0 40px rgba(0,255,128,0.12); }
        }

        /* FrostByte Gaming: Icy crystal shimmer */
        .slot-chrome-frostbyte .reel-grid {
            box-shadow: 0 0 8px rgba(140,210,255,0.2);
            animation: frostFrame 3.5s ease-in-out infinite;
        }
        @keyframes frostFrame {
            0%, 100% { box-shadow: 0 0 8px rgba(140,210,255,0.2), inset 0 0 4px rgba(180,230,255,0.05); }
            50% { box-shadow: 0 0 20px rgba(140,210,255,0.45), inset 0 0 12px rgba(180,230,255,0.1), 0 0 35px rgba(180,230,255,0.12); }
        }

        /* Desert Gold Studios: Golden heat haze */
        .slot-chrome-desertgold .reel-grid {
            box-shadow: 0 0 8px rgba(200,150,50,0.2);
            animation: desertFrame 3s ease-in-out infinite;
        }
        @keyframes desertFrame {
            0%, 100% { box-shadow: 0 0 8px rgba(200,150,50,0.2), inset 0 0 4px rgba(220,170,60,0.05); }
            50% { box-shadow: 0 0 22px rgba(220,170,60,0.5), inset 0 0 10px rgba(220,170,60,0.1), 0 0 40px rgba(200,150,50,0.15); }
        }

        /* Orient Reels: Red lantern glow */
        .slot-chrome-orientreels .reel-grid {
            box-shadow: 0 0 8px rgba(200,30,30,0.2);
            animation: orientFrame 2.8s ease-in-out infinite;
        }
        @keyframes orientFrame {
            0%, 100% { box-shadow: 0 0 8px rgba(200,30,30,0.2), inset 0 0 4px rgba(230,50,40,0.05); }
            50% { box-shadow: 0 0 20px rgba(230,50,40,0.45), inset 0 0 10px rgba(230,50,40,0.1), 0 0 35px rgba(200,30,30,0.12); }
        }

        /* Spin button provider-themed pulse */
        .slot-chrome-novaspin .spin-btn { animation: spinBtnPulse 2s ease-in-out infinite; --spin-glow: rgba(0,229,255,0.4); }
        .slot-chrome-celestial .spin-btn { animation: spinBtnPulse 2s ease-in-out infinite; --spin-glow: rgba(255,215,0,0.4); }
        .slot-chrome-ironreel .spin-btn { animation: spinBtnPulse 2s ease-in-out infinite; --spin-glow: rgba(205,133,63,0.4); }
        .slot-chrome-goldenedge .spin-btn { animation: spinBtnPulse 2s ease-in-out infinite; --spin-glow: rgba(255,183,77,0.4); }
        .slot-chrome-vaultx .spin-btn { animation: spinBtnPulse 2s ease-in-out infinite; --spin-glow: rgba(0,255,65,0.4); }
        .slot-chrome-solstice .spin-btn { animation: spinBtnPulse 2s ease-in-out infinite; --spin-glow: rgba(220,38,38,0.4); }
        .slot-chrome-phantomworks .spin-btn { animation: spinBtnPulse 2s ease-in-out infinite; --spin-glow: rgba(128,0,255,0.4); }
        .slot-chrome-arcadeforge .spin-btn { animation: spinBtnPulse 2s ease-in-out infinite; --spin-glow: rgba(0,255,255,0.4); }
        .slot-chrome-neoncore .spin-btn { animation: spinBtnPulse 2s ease-in-out infinite; --spin-glow: rgba(0,255,128,0.4); }
        .slot-chrome-frostbyte .spin-btn { animation: spinBtnPulse 2s ease-in-out infinite; --spin-glow: rgba(140,210,255,0.4); }
        .slot-chrome-desertgold .spin-btn { animation: spinBtnPulse 2s ease-in-out infinite; --spin-glow: rgba(220,170,60,0.4); }
        .slot-chrome-orientreels .spin-btn { animation: spinBtnPulse 2s ease-in-out infinite; --spin-glow: rgba(230,50,40,0.4); }

        @keyframes spinBtnPulse {
            0%, 100% { box-shadow: 0 0 8px var(--spin-glow, rgba(255,255,255,0.2)); }
            50% { box-shadow: 0 0 20px var(--spin-glow, rgba(255,255,255,0.4)), 0 0 40px var(--spin-glow, rgba(255,255,255,0.1)); }
        }

        /* ═══ 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); }
        }

        /* ============================================
           VISUAL OVERHAUL: 3D Depth Effects
           ============================================ */
        .reel-container-3d {
            perspective: 1000px;
            transform-style: preserve-3d;
        }

        .reel-cell {
            transition: transform 0.3s ease, filter 0.3s ease;
        }

        .reel-3d-pop {
            transform: translateZ(30px) scale(1.05);
            filter: brightness(1.2) drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
            z-index: 10;
            position: relative;
        }

        .reel-3d-recede {
            transform: translateZ(-10px) scale(0.95);
            filter: blur(1px) saturate(0.4) brightness(0.6);
            transition: transform 0.5s ease-in, filter 0.5s ease-in;
        }

        .reel-landing-tilt {
            animation: reelLandingTilt 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes reelLandingTilt {
            0% { transform: rotateX(-3deg) translateY(-5px); }
            50% { transform: rotateX(1deg) translateY(2px); }
            100% { transform: rotateX(0deg) translateY(0); }
        }

        /* Animated symbol idle shimmer */
        .reel-symbol-animated {
            animation: symbolIdleShimmer 3s ease-in-out infinite;
        }

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

        /* Win entrance burst */
        .reel-win-entrance-burst {
            animation: winEntranceBurst 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes winEntranceBurst {
            0% { transform: scale(0.8); opacity: 0.5; }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); opacity: 1; }
        }

        /* ============================================
           VISUAL OVERHAUL: Screen Shake Effects
           ============================================ */
        .screen-shake-epic {
            animation: screenShakeEpic 1.5s ease-out;
        }
        .screen-shake-mega {
            animation: screenShakeMega 2s ease-out;
        }
        .screen-shake-jackpot {
            animation: screenShakeJackpot 3s ease-out;
        }

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

        @keyframes screenShakeMega {
            0%, 100% { transform: translate(0); }
            5% { transform: translate(-8px, 4px); }
            10% { transform: translate(6px, -7px); }
            15% { transform: translate(-5px, 8px); }
            20% { transform: translate(8px, -3px); }
            25% { transform: translate(-7px, 5px); }
            30% { transform: translate(4px, -6px); }
            40% { transform: translate(-3px, 3px); }
            50% { transform: translate(2px, -2px); }
            60% { transform: translate(-1px, 1px); }
        }

        @keyframes screenShakeJackpot {
            0%, 100% { transform: translate(0) scale(1); }
            3% { transform: translate(-12px, 6px) scale(1.02); }
            6% { transform: translate(10px, -10px) scale(0.98); }
            9% { transform: translate(-8px, 12px) scale(1.01); }
            12% { transform: translate(12px, -4px) scale(0.99); }
            15% { transform: translate(-10px, 8px) scale(1.01); }
            20% { transform: translate(6px, -8px); }
            25% { transform: translate(-5px, 5px); }
            30% { transform: translate(4px, -4px); }
            40% { transform: translate(-2px, 2px); }
            50% { transform: translate(1px, -1px); }
        }

        /* Screen flash overlay */
        .screen-flash {
            position: fixed;
            inset: 0;
            background: white;
            opacity: 0;
            pointer-events: none;
            z-index: 9997;
            animation: screenFlash 0.3s ease-out;
        }

        @keyframes screenFlash {
            0% { opacity: 0.8; }
            100% { opacity: 0; }
        }

        /* ============================================
           VISUAL OVERHAUL: Cinematic Win Overlays
           ============================================ */
        .cinematic-vignette {
            position: fixed;
            inset: 0;
            background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.8) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            z-index: 9998;
        }
        .cinematic-vignette.active {
            opacity: 1;
        }

        .win-text-slam {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(3);
            font-size: clamp(2rem, 8vw, 5rem);
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #ffd700;
            text-shadow: 0 0 30px rgba(255,215,0,0.8), 0 0 60px rgba(255,215,0,0.4), 0 4px 8px rgba(0,0,0,0.5);
            opacity: 0;
            z-index: 9999;
            animation: winTextSlam 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            pointer-events: none;
            white-space: nowrap;
        }

        .win-text-slam.epic { color: #a855f7; text-shadow: 0 0 30px rgba(168,85,247,0.8), 0 0 60px rgba(168,85,247,0.4), 0 4px 8px rgba(0,0,0,0.5); }
        .win-text-slam.mega { color: #ef4444; text-shadow: 0 0 30px rgba(239,68,68,0.8), 0 0 60px rgba(239,68,68,0.4), 0 4px 8px rgba(0,0,0,0.5); }
        .win-text-slam.jackpot {
            color: #ffd700;
            font-size: clamp(3rem, 12vw, 7rem);
            text-shadow: 0 0 40px rgba(255,215,0,1), 0 0 80px rgba(255,215,0,0.6), 0 0 120px rgba(255,215,0,0.3), 0 6px 12px rgba(0,0,0,0.5);
            animation: winTextSlamJackpot 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }

        @keyframes winTextSlam {
            0% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
            60% { transform: translate(-50%, -50%) scale(0.9); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
        }

        @keyframes winTextSlamJackpot {
            0% { transform: translate(-50%, -50%) scale(4) rotate(-5deg); opacity: 0; }
            40% { transform: translate(-50%, -50%) scale(0.85) rotate(2deg); opacity: 1; }
            70% { transform: translate(-50%, -50%) scale(1.1) rotate(-1deg); }
            100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
        }

        /* Win amount counter roll */
        .win-counter-roll {
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum" 1;
            transition: transform 0.1s ease;
        }

        .win-counter-roll.counting {
            animation: counterPulse 0.15s ease-in-out infinite alternate;
        }

        @keyframes counterPulse {
            0% { transform: scale(1); }
            100% { transform: scale(1.05); }
        }

        /* Golden light trail on winning line */
        .win-line-illuminate {
            position: absolute;
            height: 3px;
            background: linear-gradient(90deg, transparent, #ffd700, transparent);
            box-shadow: 0 0 10px rgba(255,215,0,0.8), 0 0 30px rgba(255,215,0,0.4);
            animation: lineIlluminate 0.4s ease-out forwards;
            pointer-events: none;
            z-index: 50;
        }

        @keyframes lineIlluminate {
            0% { width: 0; opacity: 0; }
            100% { width: 100%; opacity: 1; }
        }

        /* Ambient reel breath */
        .reel-ambient-breath {
            animation: ambientBreath 8s ease-in-out infinite;
        }

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

        /* ═══ 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;
            touch-action: manipulation;
            animation: spinBtnPulse 2s ease-in-out infinite;
        }

        .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);
            text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.4);
            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);
        }

        /* ===== VIP Mini Progress Bar (header) ===== */
        .vip-mini-bar {
            height: 8px;
            background: rgba(15, 23, 42, 0.8);
            border-radius: 4px;
            border: 1px solid rgba(71, 85, 105, 0.5);
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        .vip-mini-fill {
            height: 100%;
            border-radius: 4px;
            background: linear-gradient(90deg, #cd7f32, #ffd700);
            transition: width 0.6s ease-out;
        }
        .vip-mini-text {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 7px;
            font-weight: 700;
            color: #f0f0f0;
            text-shadow: 0 1px 2px rgba(0,0,0,0.6);
            white-space: nowrap;
        }

        /* ===== 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: 10px 18px;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.04);
            color: rgba(255,255,255,0.6);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

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

        .filter-tab:hover {
            background: rgba(251,191,36,0.08);
            border-color: rgba(251,191,36,0.2);
            color: rgba(255,255,255,0.9);
        }

        .filter-tab-active {
            background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(251,191,36,0.08));
            border-color: rgba(251,191,36,0.4);
            color: #fbbf24;
            box-shadow: 0 0 12px rgba(251,191,36,0.15), inset 0 1px 0 rgba(255,255,255,0.08);
        }

        .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); }

        /* Live dot for win ticker */
        .ticker-live-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #4ade80;
            flex-shrink: 0;
            box-shadow: 0 0 0 0 rgba(74,222,128,0.4);
            animation: tickerPulse 2s ease-in-out infinite;
        }

        @keyframes tickerPulse {
            0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
            70%  { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
            100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
        }

        /* 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: linear-gradient(90deg, rgba(251,191,36,0.08), rgba(251,191,36,0.04), rgba(251,191,36,0.08));
            border-top: 1px solid rgba(251,191,36,0.15);
            border-bottom: 1px solid rgba(251,191,36,0.15);
            border-left: none;
            border-right: none;
            border-radius: 0;
            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: #fbbf24;
            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;
                min-height: 52px;
                min-width: 52px;
            }

            .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: 8px 12px;
            }

            .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: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .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 {
            display: inline-flex;
            align-items: center;
            gap: 0;
            white-space: nowrap;
            animation: tickerScroll 30s linear infinite;
        }

        .ticker-half {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
        }

        @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: none; }
        }

        /* 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 {
            position: fixed !important;
            inset: 0 !important;
            padding: 0;
            overflow: hidden;
            z-index: 1000;
        }

        .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;
            flex-shrink: 0;
        }

        .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/Lose message — displayed below the reel area (not overlaid on reels) */
        #messageDisplay {
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2px 8px;
            width: 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-forgot-link {
    text-align: center;
    margin-top: 10px;
}
.auth-forgot-link a {
    color: rgba(255,215,0,0.7);
    font-size: 0.78rem;
    text-decoration: none;
    transition: color 0.15s;
}
.auth-forgot-link a:hover {
    color: #ffd700;
    text-decoration: underline;
}
.auth-forgot-desc {
    color: rgba(255,255,255,0.5);
    font-size: 0.82rem;
    margin: 0 0 14px;
    text-align: center;
}
.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-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: 0.5px;
}
.paytable-close:hover { color: #fff; }

.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-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); }

/* Gamble overlay */
.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;
}
.gamble-header { margin-bottom: 16px; }
.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-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-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-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 -- */
.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 ═══ */
/* SVG payline win-line visualiser */
.payline-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
    animation: paylineSvgFade 2.8s ease-in-out forwards;
}

@keyframes paylineSvgFade {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    72%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Animated line-draw effect on the main payline path */
@keyframes paylineTrace {
    from { stroke-dashoffset: 1000; opacity: 0.3; }
    15%  { opacity: 1; }
    to   { stroke-dashoffset: 0; opacity: 1; }
}
.payline-trace {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: paylineTrace 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ═══════════════════════════════════════════════════════════════════════
   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;
}

/* ═══════════════════════════════════════════════════════
   WALLET / CASHIER MODAL
   ═══════════════════════════════════════════════════════ */

.wallet-modal-content {
    max-width: 600px;
    margin: 2vh auto;
    border-radius: 16px;
    overflow: hidden;
}
.wallet-modal {
    background: linear-gradient(135deg, #0d0d1a 0%, #1a1a2e 100%);
    border: 1px solid rgba(255,215,0,0.15);
    border-radius: 16px;
    padding: 0;
    min-height: 500px;
    position: relative;
}
/* Generic close button for wallet/profile modals */
.modal-close-btn {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.6);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.15s;
    line-height: 1;
}
.modal-close-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.wallet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wallet-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    color: #ffd700;
    margin: 0;
    font-weight: 700;
    letter-spacing: 1px;
}
.wallet-title svg { color: #ffd700; }
.wallet-balance-display {
    text-align: right;
}
.wallet-balance-label {
    display: block;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.wallet-balance-amount {
    font-size: 1.4rem;
    font-weight: 700;
    color: #34d399;
    font-family: 'Courier New', monospace;
}
.wallet-tabs {
    display: flex;
    gap: 0;
    padding: 0 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wallet-tab {
    flex: 1;
    padding: 12px 8px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
}
.wallet-tab:hover { color: rgba(255,255,255,0.8); }
.wallet-tab.active {
    color: #ffd700;
    border-bottom-color: #ffd700;
}
.wallet-content {
    padding: 20px 24px;
    max-height: 55vh;
    overflow-y: auto;
}
.wallet-content::-webkit-scrollbar { width: 4px; }
.wallet-content::-webkit-scrollbar-thumb { background: rgba(255,215,0,0.2); border-radius: 4px; }

/* First-deposit welcome banner */
.wallet-first-deposit-banner {
    background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(217,119,6,0.06));
    border: 1.5px solid rgba(251,191,36,0.35);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
    text-align: center;
}
.wfdb-badge {
    display: inline-block;
    background: linear-gradient(135deg,#f59e0b,#d97706);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: 8px;
}
.wfdb-title {
    color: #fbbf24;
    font-size: 17px;
    font-weight: 900;
    margin-bottom: 12px;
}
.wfdb-offers {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 10px;
}
.wfdb-offer {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wfdb-num {
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}
.wfdb-lbl {
    color: rgba(255,255,255,0.45);
    font-size: 10px;
    margin-top: 3px;
}
.wfdb-note {
    color: rgba(255,255,255,0.3);
    font-size: 10px;
}

/* Payment type cards */
.payment-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.payment-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    color: rgba(255,255,255,0.7);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.payment-type-card:hover {
    background: rgba(255,215,0,0.06);
    border-color: rgba(255,215,0,0.3);
    color: #fff;
}
.payment-type-card.selected {
    background: rgba(255,215,0,0.1);
    border-color: #ffd700;
    color: #ffd700;
    box-shadow: 0 0 12px rgba(255,215,0,0.15);
}
.payment-type-icon {
    font-size: 1.5rem;
    line-height: 1;
}

/* Amount quick buttons */
.amount-quick-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.amount-quick-btn {
    padding: 8px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.amount-quick-btn:hover {
    background: rgba(255,215,0,0.1);
    border-color: rgba(255,215,0,0.3);
}
.amount-quick-btn.selected {
    background: rgba(255,215,0,0.15);
    border-color: #ffd700;
    color: #ffd700;
}

/* Wallet input fields */
.wallet-input-group {
    margin-bottom: 16px;
}
.wallet-input-label {
    display: block;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.wallet-input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 1.1rem;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    box-sizing: border-box;
}
.wallet-input:focus {
    outline: none;
    border-color: #ffd700;
    box-shadow: 0 0 8px rgba(255,215,0,0.15);
}
.wallet-submit-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #ffd700, #f59e0b);
    border: none;
    border-radius: 10px;
    color: #000;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
}
.wallet-submit-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(255,215,0,0.3);
}
.wallet-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.wallet-submit-btn.withdraw-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

/* Payment method list */
.payment-method-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    margin-bottom: 8px;
    transition: all 0.15s;
}
.payment-method-item:hover {
    background: rgba(255,255,255,0.05);
}
.payment-method-icon {
    font-size: 1.3rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,215,0,0.08);
    border-radius: 8px;
}
.payment-method-info {
    flex: 1;
}
.payment-method-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
}
.payment-method-type {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
}
.payment-method-actions {
    display: flex;
    gap: 6px;
}
.payment-method-actions button {
    padding: 5px 10px;
    font-size: 0.65rem;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    background: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.15s;
}
.payment-method-actions button:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.payment-method-default-badge {
    padding: 3px 8px;
    background: rgba(52,211,153,0.15);
    color: #34d399;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* Transaction history table */
.tx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.tx-table th {
    text-align: left;
    color: rgba(255,255,255,0.4);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tx-table td {
    padding: 10px;
    color: rgba(255,255,255,0.8);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.tx-amount-positive { color: #34d399; font-weight: 600; }
.tx-amount-negative { color: #f87171; font-weight: 600; }
.tx-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}
.tx-type-deposit { background: rgba(52,211,153,0.15); color: #34d399; }
.tx-type-withdrawal { background: rgba(248,113,113,0.15); color: #f87171; }
.tx-type-spin { background: rgba(96,165,250,0.15); color: #60a5fa; }
.tx-type-bonus { background: rgba(251,191,36,0.15); color: #fbbf24; }

/* Pending withdrawal item */
.pending-withdrawal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(239,68,68,0.05);
    border: 1px solid rgba(239,68,68,0.15);
    border-radius: 8px;
    margin-bottom: 8px;
}
.pending-withdrawal-info {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
}
.pending-withdrawal-cancel {
    padding: 5px 12px;
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 6px;
    color: #f87171;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
}
.pending-withdrawal-cancel:hover {
    background: rgba(239,68,68,0.25);
}

/* Add method form */
.add-method-form {
    padding: 16px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,215,0,0.1);
    border-radius: 10px;
    margin-top: 12px;
}
.add-method-form h4 {
    margin: 0 0 12px;
    color: #ffd700;
    font-size: 0.85rem;
}

/* Wallet section titles */
.wallet-section-title {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 16px 0 10px;
    font-weight: 600;
}
.wallet-section-title:first-child { margin-top: 0; }

/* Wallet empty state */
.wallet-empty {
    text-align: center;
    padding: 30px;
    color: rgba(255,255,255,0.3);
}
.wallet-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

/* ═══════════════════════════════════════════════════════
   PROFILE / ACCOUNT MODAL
   ═══════════════════════════════════════════════════════ */

.profile-modal-content {
    max-width: 800px;
    margin: 2vh auto;
    border-radius: 16px;
    overflow: hidden;
}
.profile-modal {
    display: flex;
    background: linear-gradient(135deg, #0d0d1a 0%, #1a1a2e 100%);
    border: 1px solid rgba(255,215,0,0.15);
    border-radius: 16px;
    min-height: 520px;
    position: relative;
}
.profile-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.2);
    border-right: 1px solid rgba(255,255,255,0.06);
    padding: 20px 0;
    display: flex;
    flex-direction: column;
}
.profile-avatar-section {
    padding: 0 16px 16px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 8px;
}
.profile-avatar-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd700, #f59e0b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    margin: 0 auto 10px;
    border: 2px solid rgba(255,215,0,0.3);
}
.profile-username {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
.profile-member-since {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.35);
}
.profile-nav {
    flex: 1;
    padding: 8px 0;
}
.profile-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 20px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.55);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}
.profile-nav-item:hover {
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.85);
}
.profile-nav-item.active {
    background: rgba(255,215,0,0.08);
    color: #ffd700;
    border-left: 3px solid #ffd700;
}
.profile-nav-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.profile-nav-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 8px 16px;
}
.profile-nav-logout {
    color: rgba(248,113,113,0.7);
}
.profile-nav-logout:hover {
    color: #f87171;
    background: rgba(248,113,113,0.06);
}
.profile-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    max-height: 65vh;
}
.profile-content::-webkit-scrollbar { width: 4px; }
.profile-content::-webkit-scrollbar-thumb { background: rgba(255,215,0,0.2); border-radius: 4px; }

/* Profile overview cards */
.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.profile-stat-card {
    padding: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    text-align: center;
}
.profile-stat-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffd700;
    font-family: 'Courier New', monospace;
}
.profile-stat-label {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Profile form fields */
.profile-field {
    margin-bottom: 14px;
}
.profile-field label {
    display: block;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}
.profile-field input, .profile-field select {
    width: 100%;
    padding: 10px 14px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 0.85rem;
    box-sizing: border-box;
}
.profile-field input:focus, .profile-field select:focus {
    outline: none;
    border-color: rgba(255,215,0,0.5);
}
.profile-field select {
    appearance: none;
    cursor: pointer;
}
.profile-field select option {
    background: #1a1a2e;
}
.profile-save-btn {
    padding: 10px 24px;
    background: linear-gradient(135deg, #ffd700, #f59e0b);
    border: none;
    border-radius: 8px;
    color: #000;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s;
}
.profile-save-btn:hover {
    filter: brightness(1.1);
}

/* Verification status badges */
.verification-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.verification-unverified { background: rgba(239,68,68,0.12); color: #f87171; }
.verification-pending { background: rgba(251,191,36,0.12); color: #fbbf24; }
.verification-verified { background: rgba(52,211,153,0.12); color: #34d399; }

/* Responsible gambling section */
.limits-section {
    margin-bottom: 20px;
}
.limits-section h4 {
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.limits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.self-exclude-btn {
    padding: 10px 20px;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 8px;
    color: #f87171;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.self-exclude-btn:hover {
    background: rgba(239,68,68,0.2);
}
.gambling-help-box {
    margin-top: 16px;
    padding: 14px;
    background: rgba(96,165,250,0.06);
    border: 1px solid rgba(96,165,250,0.15);
    border-radius: 10px;
}
.gambling-help-box h5 {
    margin: 0 0 8px;
    color: #60a5fa;
    font-size: 0.8rem;
}
.gambling-help-box p {
    margin: 0 0 4px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}
.gambling-help-box a {
    color: #60a5fa;
    text-decoration: none;
}

/* Section titles in profile */
.profile-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Password change section */
.security-warning-box {
    padding: 12px 14px;
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.15);
    border-radius: 8px;
    margin-top: 20px;
}
.security-warning-box h5 {
    margin: 0 0 6px;
    color: #f87171;
    font-size: 0.8rem;
}
.security-warning-box p {
    margin: 0;
    font-size: 0.73rem;
    color: rgba(255,255,255,0.5);
}
.close-account-btn {
    padding: 8px 16px;
    background: none;
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 6px;
    color: #f87171;
    font-size: 0.75rem;
    cursor: pointer;
    margin-top: 8px;
}
.close-account-btn:hover {
    background: rgba(239,68,68,0.1);
}

/* Pagination */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}
.pagination-btn {
    padding: 6px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem;
    cursor: pointer;
}
.pagination-btn:hover { background: rgba(255,255,255,0.08); }
.pagination-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.pagination-info {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
}

/* Transaction type filter */
.tx-filter-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.tx-filter-btn {
    padding: 5px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s;
}
.tx-filter-btn:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); }
.tx-filter-btn.active {
    background: rgba(255,215,0,0.1);
    border-color: rgba(255,215,0,0.3);
    color: #ffd700;
}

/* ═══════════════════════════════════════════════════════
   CASINO FOOTER
   ═══════════════════════════════════════════════════════ */

.casino-footer {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 10%, #0a0a14 40%);
    padding: 50px 20px 20px;
    margin-top: 40px;
    border-top: 1px solid rgba(255,215,0,0.08);
}
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 30px;
}
.footer-section h4 {
    color: #ffd700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 14px;
}
.footer-section a {
    display: block;
    color: rgba(255,255,255,0.45);
    font-size: 0.78rem;
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.15s;
}
.footer-section a:hover {
    color: rgba(255,255,255,0.85);
}
.footer-logo {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #ffd700, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 6px;
}
.footer-tagline {
    color: rgba(255,255,255,0.35);
    font-size: 0.75rem;
    margin: 0 0 14px;
}
.footer-payment-icons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.footer-payment-icons span {
    padding: 4px 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.5px;
}
.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
    text-align: center;
}
.footer-legal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.3);
    margin-bottom: 8px;
}
.footer-legal a {
    color: rgba(255,215,0,0.5);
    text-decoration: none;
}
.footer-legal a:hover {
    color: rgba(255,215,0,0.8);
}
.footer-legal-sep {
    color: rgba(255,255,255,0.15);
}
.footer-copyright {
    color: rgba(255,255,255,0.2);
    font-size: 0.65rem;
    margin: 0;
}

@media (max-width: 768px) {

    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .casino-footer {
        padding-bottom: 80px; /* space for mobile bottom nav */
    }
}

@media (max-width: 480px) {

    .footer-content {
        grid-template-columns: 1fr;
    }
}


/* Mobile responsive for wallet + profile */
@media (max-width: 768px) {

    .wallet-modal-content { margin: 0; border-radius: 0; max-width: 100%; }
    .wallet-modal { border-radius: 0; min-height: 100vh; }
    .profile-modal-content { margin: 0; border-radius: 0; max-width: 100%; }
    .profile-modal {
        flex-direction: column;
        border-radius: 0;
        min-height: 100vh;
    }
    .profile-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        padding: 12px 0;
        flex-direction: row;
        overflow-x: auto;
    }
    .profile-avatar-section {
        display: none;
    }
    .profile-nav {
        display: flex;
        padding: 0;
        gap: 0;
        overflow-x: auto;
    }
    .profile-nav-item {
        padding: 8px 14px;
        white-space: nowrap;
        font-size: 0.72rem;
        flex-direction: column;
        gap: 4px;
        align-items: center;
    }
    .profile-nav-item.active {
        border-left: none;
        border-bottom: 2px solid #ffd700;
    }
    .profile-nav-divider { display: none; }
    .profile-content { max-height: none; }
    .profile-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .limits-grid { grid-template-columns: 1fr; }
    .payment-type-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ═══════════════════════════════════════════════════════════════════════
   REFERRAL TAB — profile referral system styles
   ═══════════════════════════════════════════════════════════════════════ */

.referral-reward-card {
    background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(16,185,129,0.08));
    border: 1px solid rgba(34,197,94,0.3);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}
.referral-reward-amount {
    font-size: 1.5rem;
    font-weight: 800;
    color: #22c55e;
    margin-bottom: 4px;
}
.referral-reward-label {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.referral-code-section {
    margin-top: 16px;
}
.referral-code-display {
    flex: 1;
    background: rgba(15,23,42,0.9);
    border: 2px dashed rgba(255,215,0,0.4);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffd700;
    text-align: center;
    letter-spacing: 3px;
    font-family: 'Courier New', monospace;
}
.referral-copy-btn {
    background: linear-gradient(135deg, #ffd700, #f59e0b);
    color: #0f172a;
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s, box-shadow 0.2s;
}
.referral-copy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255,215,0,0.3);
}
.referral-link-input {
    flex: 1;
    background: rgba(15,23,42,0.8);
    border: 1px solid rgba(71,85,105,0.5);
    border-radius: 8px;
    padding: 10px 12px;
    color: #94a3b8;
    font-size: 0.8rem;
    font-family: 'Courier New', monospace;
}
.referral-stat-card {
    background: rgba(15,23,42,0.6);
    border: 1px solid rgba(71,85,105,0.3);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}
.referral-stat-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: #e2e8f0;
    margin-bottom: 4px;
}
.referral-stat-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Referral tab — extended classes (profile modal referrals tab) ── */
.referral-my-code-card {
    background: linear-gradient(135deg, rgba(6,78,59,0.55) 0%, rgba(5,46,22,0.70) 100%);
    border: 1px solid rgba(34,197,94,0.35);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
}

.referral-table-card {
    background: rgba(6,78,59,0.2);
    border: 1px solid rgba(34,197,94,0.2);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
}

.referral-stats-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid rgba(34,197,94,0.2);
    font-size: 12px;
}

.referral-stats-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.referral-stats-label {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.referral-stats-value {
    font-size: 15px;
    font-weight: 800;
    color: #e2e8f0;
}

.referral-stats-value--green {
    color: #4ade80;
}

.referral-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.referral-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 700;
    color: #4ade80;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(34,197,94,0.2);
}

.referral-table td {
    padding: 8px 10px;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(34,197,94,0.07);
}

.referral-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.referral-status-badge--pending   { background: rgba(251,191,36,0.15); color: #fbbf24; }
.referral-status-badge--completed { background: rgba(34,197,94,0.15);  color: #4ade80; }

.referral-apply-card {
    background: linear-gradient(135deg, rgba(6,78,59,0.35) 0%, rgba(5,46,22,0.50) 100%);
    border: 1px solid rgba(34,197,94,0.2);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
}

.referral-apply-input {
    flex: 1;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(34,197,94,0.3);
    border-radius: 8px;
    padding: 9px 12px;
    color: #e2e8f0;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 2px;
    outline: none;
    font-family: inherit;
}

.referral-apply-input:focus {
    border-color: rgba(74,222,128,0.5);
    box-shadow: 0 0 0 3px rgba(34,197,94,0.08);
}

.referral-apply-msg {
    margin-top: 8px;
    font-size: 12px;
    display: none;
    line-height: 1.4;
}

.referral-apply-msg--success { color: #4ade80; }
.referral-apply-msg--error   { color: #f87171; }

/* ═══════════════════════════════════════════════════════════════════════
   WAGERING PROGRESS BAR (header balance area)
   ═══════════════════════════════════════════════════════════════════════ */
.wagering-bar-wrap {
    margin-top: 4px;
    width: 100%;
    min-width: 120px;
}
.wagering-bar-track {
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}
.wagering-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f39c12, #e74c3c);
    border-radius: 3px;
    transition: width 0.5s ease;
}
.wagering-bar-label {
    font-size: 9px;
    color: #f39c12;
    text-align: center;
    margin-top: 2px;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Wallet bonus balance display */
.wallet-bonus-display {
    text-align: center;
    padding: 8px 0 4px;
    border-top: 1px solid rgba(243,156,18,0.2);
    margin-top: 4px;
}
.wallet-bonus-label {
    display: block;
    font-size: 10px;
    color: #f39c12;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.wallet-bonus-amount {
    font-size: 18px;
    font-weight: 700;
    color: #f39c12;
}
.wallet-wagering-info {
    font-size: 11px;
    color: #95a5a6;
    margin-top: 4px;
}

/* Session milestone reward animation */
.session-milestone.milestone-reward {
    background: linear-gradient(135deg, rgba(46,204,113,0.4), rgba(241,196,15,0.4));
    color: #2ecc71;
    border-color: rgba(46,204,113,0.6);
    font-size: 13px;
    animation: milestone-reward-pop 0.5s ease;
}
@keyframes milestone-reward-pop {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE UX POLISH — 375-430px viewport (phones)
   Appended as a single authoritative override block.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

    /* ── 1. Header: compress logo + hide low-priority items ── */
    header {
        padding: 10px 0;
    }

    /* ── Header: two-row layout on phones ──
       Row 1: logo (left-aligned, single line)
       Row 2: icon-only action buttons, horizontally scrollable
    ── */
    .header-content {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 0;
        padding: 0 10px;
    }

    .logo-icon {
        width: 36px;
        height: 36px;
        border-radius: 6px;
        flex-shrink: 0;
    }

    .logo-text h1 {
        font-size: 16px;
        letter-spacing: 0.5px;
    }

    /* Hide the "PREMIUM SLOTS" subtitle — saves vertical space */
    .logo-text .subtitle {
        display: none;
    }

    /* Row 1: logo — compact gap for 375px width */
    .logo-section {
        order: 0;
        flex-shrink: 0;
        gap: 8px;
        padding: 2px 0;
    }

    /* Move balance-display before header-actions in flow (flex order) */
    .balance-display {
        order: -1;           /* appears before other actions in row 2 */
        flex-shrink: 0;
        padding: 4px 10px;
        min-width: 0;
        white-space: nowrap;
    }

    .balance-label {
        font-size: 9px;
    }

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

    /* Row 2: header-actions — single scrollable row */
    .header-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* Firefox */
        padding: 4px 0 2px;
        /* Ensure balance is pinned left and always visible */
        align-items: center;
    }

    .header-actions::-webkit-scrollbar {
        display: none;                  /* Chrome/Safari */
    }

    /* Hide STATS text button — accessible via profile/sidebar */
    .btn[onclick*="openStatsModal"] {
        display: none;
    }

    /* Hide shortcuts "?" button on mobile — not needed on touch */
    .btn-shortcuts {
        display: none;
    }

    /* Icon-only buttons: 44×44px touch targets (iOS HIG) */
    .btn-user {
        width: 44px;
        height: 44px;
        min-width: 44px;
        padding: 0;
        font-size: 14px;
        flex-shrink: 0;
    }

    /* WALLET button: icon + abbreviated label */
    .btn-deposit {
        padding: 0 10px;
        font-size: 0;            /* hide text "WALLET" */
        gap: 0;
        height: 44px;
        min-width: 44px;
        flex-shrink: 0;
    }

    /* Show wallet icon at normal size even with font-size:0 */
    .btn-deposit svg {
        font-size: 14px;
        flex-shrink: 0;
    }

    /* Hamburger: 44×44px touch target */
    .csb-hamburger-btn {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    /* ── 2. Game grid: 2 columns on phones (not 1) ── */
    .games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    /* Recently-played row: keep horizontal scroll, smaller cards */
    .recently-played-scroll .game-card {
        width: 110px;
        min-width: 110px;
    }

    /* ── 3. Hero banner: tighter padding on phones ── */
    .hero-banner {
        padding: 20px 16px;
    }

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

    /* ── 4. Auth modal: comfortable on 375px ── */
    .auth-modal {
        width: 100%;
        max-width: 100vw;
        border-radius: 0;
        /* Slide up from bottom for modal-on-mobile feel */
    }

    /* Reduce header padding so the form fits without scrolling */
    .auth-modal-header {
        padding: 18px 16px 0;
    }

    .auth-form {
        padding: 16px 16px 20px;
    }

    /* Ensure inputs don't trigger iOS auto-zoom (must be ≥16px) */
    .auth-field input {
        font-size: 16px;
        padding: 11px 12px;
    }

    .auth-guest-btn {
        width: calc(100% - 32px);
        margin: 10px 16px 0;
        font-size: 13px;
    }

    /* Close button: bump to 44px tap target */
    .auth-close-btn {
        width: 40px;
        height: 40px;
        top: 10px;
        right: 10px;
    }

    /* ── 5. Slot modal close button tap target ── */
    .slot-close-btn {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    /* ── 6. Slot bottom bar: keep controls reachable ── */
    .slot-bet-btn {
        width: 36px;
        height: 36px;
        /* visual size — touch target extended via padding */
    }

    /* ── 7. Reel container: remove excess padding that clips reels ── */
    .reels-container {
        padding: 8px !important;
    }

    /* ── 8. Section headers: tighter on small screens ── */
    .section-header {
        margin-bottom: 10px;
    }

    /* ── 9. Jackpot ticker: smaller text so it fits one line ── */
    .jackpot-tier {
        font-size: 11px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   TOUCH INTERACTION IMPROVEMENTS
   Active-state feedback replaces hover on coarse-pointer devices.
   ═══════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {

    /* Tactile press-down on game cards */
    .game-card:active {
        transform: scale(0.97);
        transition: transform 0.1s ease;
    }

    /* Spin button press feedback */
    .slot-spin-btn:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }

    /* General button press feedback */
    .btn:active {
        transform: scale(0.96);
        transition: transform 0.1s ease;
    }

    /* Auth submit press */
    .auth-submit:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    /* Bump close buttons to minimum 44px tap target */
    .slot-close-btn,
    .auth-close-btn {
        min-width: 44px;
        min-height: 44px;
    }
}



/* ═══════════════════════════════════════════════════════════
   SLOT ENGINE ANIMATIONS — consolidated from runtime injection
   ═══════════════════════════════════════════════════════════ */

/* Wild Reels engine */
@keyframes wildReelSweep {
  0%   { background: rgba(255,214,0,0);    box-shadow: none; }
  40%  { background: rgba(255,214,0,0.18); box-shadow: 0 0 18px rgba(255,214,0,0.6); }
  100% { background: rgba(255,214,0,0);    box-shadow: 0 0 8px rgba(255,214,0,0.25); }
}
.wild-reel-glow {
  animation: wildReelSweep 0.5s ease-in-out both;
  outline: 2px solid #ffd600;
  border-radius: 4px;
}

/* Random Jackpot overlay pop */
@keyframes rjPop {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Prize Wheel result reveal */
@keyframes wheelPrizeIn {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════
   LOBBY UI STYLES — consolidated from runtime injection in ui-lobby.js
   ═══════════════════════════════════════════════════════════ */

/* Card animated preview overlay (lobbyAnimStyles) */
.card-anim-preview {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 0.4s ease;
    pointer-events: none; z-index: 2;
}
.game-card:hover .card-anim-preview { opacity: 1; }
.card-anim-preview.hidden { display: none; }
.preview-badge {
    position: absolute; top: 6px; right: 6px;
    background: rgba(0,0,0,0.6); color: #00ff41;
    font-size: 9px; font-family: monospace;
    padding: 2px 5px; border-radius: 3px; letter-spacing: 1px;
    pointer-events: none;
}

/* Favourites button and empty state (favStyles) */
.fav-btn {
    position: absolute; top: 6px; right: 34px;
    background: transparent; border: none;
    font-size: 20px; cursor: pointer; z-index: 10;
    line-height: 1; padding: 4px; border-radius: 50%;
    transition: transform 0.15s;
}
.fav-btn:hover { transform: scale(1.3); }
.fav-btn.fav-active { animation: favPop 0.3s ease-out; }
@keyframes favPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.5); }
    100% { transform: scale(1); }
}
.filter-fav-count {
    display: inline-block; background: #e11d48;
    color: #fff; font-size: 10px; font-weight: 700;
    border-radius: 8px; padding: 1px 5px; margin-left: 4px;
    vertical-align: middle; line-height: 16px; min-width: 16px;
    text-align: center;
}
.games-fav-empty {
    grid-column: 1 / -1; text-align: center;
    padding: 48px 24px; color: rgba(255,255,255,0.45);
    font-size: 15px;
}
.games-fav-empty .fav-empty-icon { font-size: 40px; display: block; margin-bottom: 12px; }

/* Game info strip on each card (gameInfoStripStyles) */
.gi-strip {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: flex; align-items: center; gap: 4px;
    padding: 3px 7px;
    background: rgba(0,0,0,0.72); backdrop-filter: blur(2px);
    font-size: 10px; line-height: 1.3; color: rgba(255,255,255,0.85);
    pointer-events: none; border-radius: 0 0 6px 6px; transition: opacity 0.2s;
}
.gi-grid { font-weight: 700; color: #90caf9; flex-shrink: 0; }
.gi-bonus {
    flex: 1; text-align: center; overflow: hidden; white-space: nowrap;
    text-overflow: ellipsis; color: rgba(255,255,255,0.65);
}
.gi-vol { flex-shrink: 0; letter-spacing: -1px; }
.gi-vol--low  { color: #81c784; }
.gi-vol--med  { color: #ffb74d; }
.gi-vol--high { color: #e57373; }
.game-card:hover .gi-strip { background: rgba(0,0,0,0.88); }

/* Lobby search bar and provider pills (lobbySearchCss) */
#lobbySearchBar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 0 4px;
    max-width: 480px;
}
#lobbyProviderStrip::-webkit-scrollbar { display: none; }
.lobby-provider-pill:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
}
@media (max-width: 480px) {

    #lobbySearchBar { padding: 6px 0 2px; }
    #lobbyProviderStrip { padding: 2px 0 6px; }
}


/* =====================================================
   SLOT UI STYLES - consolidated from runtime injection in ui-slot.js
   ===================================================== */

/* Spin History Panel (spinHistoryCss) */
#spinHistoryPanel {
    background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; margin: 0 12px 10px; overflow: hidden;
}
#spinHistoryToggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; cursor: pointer; user-select: none;
    font-size: 11px; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: 1px;
}
#spinHistoryToggle:hover { color: #94a3b8; }
#spinHistoryList { padding: 4px 12px 8px; max-height: 200px; overflow-y: auto; }
#spinHistoryList::-webkit-scrollbar { width: 3px; }
#spinHistoryList::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }

/* Slot Session Stats Bar (slotSessCss) */
.slot-session-stats {
    display: flex; align-items: center; justify-content: space-around;
    padding: 8px 12px; margin: 4px 8px 4px;
    background: rgba(0,0,0,0.3); border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.07);
}
.sss-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sss-label { font-size: 9px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.5px; }
.sss-value { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.9); }
.sss-divider { width: 1px; height: 24px; background: rgba(255,255,255,0.1); }
@media (max-width: 480px) {

    .slot-session-stats { flex-wrap: wrap; gap: 6px; }
    .sss-item { flex: 1 1 42%; }
    .sss-divider { display: none; }
}


/* Payline Flash Effect (paylineFlashCss) */
@keyframes paylineFlash {
    0%   { outline: 3px solid transparent; outline-offset: -2px; filter: brightness(1); }
    20%  { outline: 3px solid rgba(255,215,0,0.95); outline-offset: -2px; filter: brightness(1.45); }
    60%  { outline: 2px solid rgba(255,215,0,0.55); outline-offset: -1px; filter: brightness(1.2); }
    100% { outline: 2px solid transparent; outline-offset: -1px; filter: brightness(1); }
}
.payline-flash-0 { animation: paylineFlash 900ms ease-out forwards; }
.payline-flash-1 { animation: paylineFlash 900ms ease-out 200ms forwards; }
.payline-flash-2 { animation: paylineFlash 900ms ease-out 400ms forwards; }
.payline-flash-3 { animation: paylineFlash 900ms ease-out 600ms forwards; }
.payline-flash-4 { animation: paylineFlash 900ms ease-out 800ms forwards; }
.payline-flash-5 { animation: paylineFlash 900ms ease-out 1000ms forwards; }
.payline-flash-6 { animation: paylineFlash 900ms ease-out 1200ms forwards; }
.payline-flash-7 { animation: paylineFlash 900ms ease-out 1400ms forwards; }

/* Tumble / Avalanche Cascade (tumbleCascadeCss) */
.reel-tumble-burst { animation: tumbleBurst 480ms cubic-bezier(0.4,0,0.6,1) forwards !important; pointer-events: none; }
.reel-tumble-drop  { animation: tumbleDrop  380ms cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* Sticky Wilds (stickyWildCss) */
.reel-sticky-wild {
    outline: 2.5px solid #c6ff00 !important;
    outline-offset: -2px;
    animation: stickyWildPulse 1.2s ease-in-out infinite !important;
}
@keyframes stickyWildPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(198,255,0,0.0); }
    50%       { box-shadow: 0 0 12px 4px rgba(198,255,0,0.55); }
}

/* Walking Wilds (walkingWildCss) */
.reel-walking-wild {
    outline: 2.5px solid #00e5ff !important;
    outline-offset: -2px;
    animation: walkingWildSlide 0.5s ease-out !important;
}
@keyframes walkingWildSlide {
    0%   { transform: translateX(30px); opacity: 0.4; }
    60%  { transform: translateX(-4px); opacity: 1; }
    100% { transform: translateX(0);    opacity: 1; }
}

/* Multiplier Wilds badge (multWildCss) */
.mw-badge { animation: mwPop 0.25s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes mwPop {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Cascading Reels explode (cascadeCss) */
@keyframes cascadeExplode {
    0%   { transform: scale(1);    opacity: 1; }
    50%  { transform: scale(1.35); opacity: 0.7; filter: brightness(2); }
    100% { transform: scale(0);    opacity: 0; }
}
.cascade-explode { animation: cascadeExplode 0.35s ease-out both !important; }

/* Expanding Wilds (expandWildCss) */
@keyframes expandWild {
    0%   { transform: scaleY(0); opacity: 0; }
    60%  { transform: scaleY(1.15); }
    100% { transform: scaleY(1); opacity: 1; }
}
.expand-wild-anim { animation: expandWild 0.45s cubic-bezier(0.22,1,0.36,1) both !important; transform-origin: top center; }

/* Re-Spin Hold (respinCss) */
@keyframes respinPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.8); }
    50%       { box-shadow: 0 0 0 6px rgba(255,215,0,0); }
}
.respin-lock { outline: 2px solid #ffd600; border-radius: 4px; animation: respinPulse 1s ease-in-out infinite; }

/* Colossal Symbols reveal (colossalCss) */
@keyframes colossalIn {
    0%   { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

/* =====================================================
   MODAL UI STYLES - consolidated from runtime injection in ui-modals.js
   ===================================================== */

/* Login Streak panel row (streakCss) */
.streak-stat-row {
    display: flex; justify-content: space-between;
    font-size: 12px; padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
}
.streak-stat-row strong { color: #fff; }

/* Daily Challenge completion toast (challengeToastKf) */
@keyframes challengeToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes challengeToastOut {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to   { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* Achievements grid (achCss) */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap: 8px; margin-top: 4px; }
.ach-card {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; padding: 10px 8px; text-align: center; transition: border-color 0.2s;
}
.ach-card.ach-unlocked { border-color: rgba(123,97,255,0.5); background: rgba(123,97,255,0.08); }
.ach-card.ach-locked   { opacity: 0.4; filter: grayscale(0.5); }
.ach-icon  { font-size: 24px; margin-bottom: 3px; }
.ach-name  { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.9); margin-bottom: 2px; }
.ach-desc  { font-size: 9px; color: rgba(255,255,255,0.4); line-height: 1.3; }
.ach-unlocked .ach-name { color: #b39ddb; }
.ach-count-badge { font-size: 11px; background: rgba(123,97,255,0.2); color: #b39ddb; padding: 2px 8px; border-radius: 20px; }

/* =====================================================
   WALLET UI STYLES - consolidated from runtime injection in ui-wallet.js
   ===================================================== */

/* Wallet session tracker (walletEnhCss) */
.wallet-tx-icon { font-size: 14px; vertical-align: middle; margin-right: 2px; }
#walletSessionTracker {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 7px 12px; margin-bottom: 10px;
    background: rgba(255,255,255,0.04); border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08); font-size: 12px;
}
.wst-label   { color: rgba(255,255,255,0.45); }
.wst-amount  { color: rgba(255,255,255,0.75); font-weight: 600; }
.wst-sep     { color: rgba(255,255,255,0.2); }
.wst-net     { font-weight: 700; }
.wst-pos     { color: #66bb6a; }
.wst-neg     { color: #ef5350; }
.wst-neutral { color: rgba(255,255,255,0.4); }

/* ═══════════════════════════════════════════════════════════
   HALL OF FAME
   ═══════════════════════════════════════════════════════════ */
.hof-row {
    display: grid;
    grid-template-columns: 28px 1fr 50px 90px 52px;
    align-items: center;
    gap: 4px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,215,0,0.08);
    font-size: 12px;
}
.hof-row:last-child { border-bottom: none; }
.hof-rank  { text-align: center; font-size: 14px; }
.hof-game  { color: rgba(255,255,255,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hof-mult  { color: #ffd700; font-weight: 700; text-align: right; }
.hof-amount { color: #4caf50; font-weight: 700; text-align: right; }
.hof-date  { color: rgba(255,255,255,0.35); text-align: right; font-size: 10px; }

/* ═══════════════════════════════════════════════════════════
   MECHANIC FILTER BAR
   ═══════════════════════════════════════════════════════════ */
.mechanic-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 4px;
    flex-wrap: wrap;
}
.mechanic-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}
.mechanic-chip {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.65);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.mechanic-chip:hover { background: rgba(255,255,255,0.1); color: #fff; }
.mechanic-chip-active {
    background: rgba(123,97,255,0.2);
    border-color: #7b61ff;
    color: #c4b5fd;
    font-weight: 600;
}
.sort-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.sort-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.sort-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.sort-btn-active {
    background: rgba(123,97,255,0.2);
    border-color: #7b61ff;
    color: #c4b5fd;
}

/* ═══════════════════════════════════════════════════════════
   SCATTER ANTICIPATION TENSION
   ═══════════════════════════════════════════════════════════ */
@keyframes scatterTensionPulse {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(255,215,0,0); }
  50%       { box-shadow: inset 0 0 0 2px rgba(255,215,0,0.6), 0 0 16px rgba(255,215,0,0.25); }
}
.reel-scatter-tension {
    animation: scatterTensionPulse 0.7s ease-in-out infinite;
    border-radius: 8px;
}
.reel-scatter-primed {
    animation: scatterPrimedPulse 0.45s ease-in-out infinite;
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════
   BEST WINS PERSONAL STRIP
   ═══════════════════════════════════════════════════════════ */
#bestWinsSection {
    margin: 12px 0 8px;
    padding: 0 4px;
}
.best-wins-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding: 0 2px;
}
.best-win-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,215,0,0.05);
    border: 1px solid rgba(255,215,0,0.12);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
}
.bw-rank {
    font-weight: 700;
    color: rgba(255,215,0,0.6);
    min-width: 24px;
}
.bw-game {
    flex: 1;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bw-mult {
    color: #fbbf24;
    font-size: 11px;
    min-width: 42px;
    text-align: right;
}
.bw-amount {
    font-weight: 700;
    color: #4ade80;
    min-width: 80px;
    text-align: right;
}
.bw-date {
    font-size: 10px;
    color: rgba(255,255,255,0.3);
    min-width: 70px;
    text-align: right;
}

/* ── Lobby HOT / NEW game badges ────────────────────────────────── */
.lobby-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    line-height: 1.4;
    z-index: 2;
    pointer-events: none;
    text-shadow: none;
}
.lobby-badge-hot {
    background: linear-gradient(135deg, #ff6d00, #ff1744);
    color: #fff;
    top: 6px;
    right: 6px;
}
.lobby-badge-new {
    background: linear-gradient(135deg, #00c853, #1de9b6);
    color: #fff;
    top: 6px;
    right: 6px;
}
/* When both badges present, stack them */
.lobby-badge-hot ~ .lobby-badge-new,
.lobby-badge-new ~ .lobby-badge-hot {
    top: 28px;
}

/* ── Lobby game search bar (inline, below mechanic filter) ────────────────────── */
.game-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 16px 4px;
}
.game-search-wrap .game-search-input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    color: #e2e8f0;
    font-size: 13px;
    padding: 8px 36px 8px 16px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.game-search-wrap .game-search-input::placeholder { color: rgba(255,255,255,0.35); }
.game-search-wrap .game-search-input:focus {
    border-color: rgba(99,179,237,0.5);
    background: rgba(255,255,255,0.09);
}
.game-search-clear {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
    line-height: 1;
}
.game-search-clear:hover { color: #fff; }
.search-no-results {
    text-align: center;
    color: rgba(255,255,255,0.4);
    padding: 40px 20px;
    font-size: 14px;
    grid-column: 1 / -1;
}
.search-no-results strong { color: rgba(255,255,255,0.7); }

/* ═══════════════════════════════════════════════════════════
   GAME AUTOCOMPLETE / TYPEAHEAD
   ═══════════════════════════════════════════════════════════ */
.game-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: rgba(20, 25, 35, 0.95);
    border: 1px solid rgba(99, 179, 237, 0.3);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    max-height: 320px;
    overflow-y: auto;
    backdrop-filter: blur(8px);
}

.game-autocomplete-dropdown::-webkit-scrollbar {
    width: 6px;
}

.game-autocomplete-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.game-autocomplete-dropdown::-webkit-scrollbar-thumb {
    background: rgba(99, 179, 237, 0.3);
    border-radius: 3px;
}

.game-autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 179, 237, 0.5);
}

.game-autocomplete-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.game-autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background-color 0.15s;
}

.game-autocomplete-item:last-child {
    border-bottom: none;
}

.game-autocomplete-item:hover,
.game-autocomplete-item.selected {
    background: rgba(99, 179, 237, 0.15);
}

.game-autocomplete-item.selected {
    background: rgba(99, 179, 237, 0.25);
}

.game-autocomplete-name {
    font-size: 13px;
    color: #e2e8f0;
    font-weight: 500;
    margin-bottom: 4px;
}

.game-autocomplete-name strong {
    color: #63b3ed;
    font-weight: 600;
}

.game-autocomplete-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
}

.game-autocomplete-info .provider {
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-autocomplete-info .rtp {
    color: rgba(99, 179, 237, 0.7);
    font-weight: 500;
    flex-shrink: 0;
    margin-left: 8px;
}

/* ═══════════════════════════════════════════════════════════
   WIN JUICE — Loss Droop
   ═══════════════════════════════════════════════════════════ */

/* Loss droop: brief dim + desaturate on complete loss */
@keyframes lossDropp {
    0%   { opacity: 1; filter: saturate(1) brightness(1); }
    35%  { opacity: 0.72; filter: saturate(0.25) brightness(0.82); }
    100% { opacity: 1; filter: saturate(1) brightness(1); }
}
.reel-loss-droop {
    animation: lossDropp 380ms ease-out both;
}

/* ═══════════════════════════════════════════════════════════
   LOBBY POLISH — Game Card Spotlight
   ═══════════════════════════════════════════════════════════ */
@keyframes cardSpotlight {
    0%   { box-shadow: none; transform: translateY(0) scale(1); }
    20%  { box-shadow: 0 0 0 2px rgba(255,215,0,0.65), 0 10px 36px rgba(255,215,0,0.28); transform: translateY(-4px) scale(1.025); }
    60%  { box-shadow: 0 0 0 1px rgba(255,215,0,0.28), 0 5px 20px rgba(255,215,0,0.10); transform: translateY(-2px) scale(1.01); }
    100% { box-shadow: none; transform: translateY(0) scale(1); }
}
.game-card-spotlight {
    animation: cardSpotlight 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    position: relative;
    z-index: 2;
}

/* ═══════════════════════════════════════════════════════════
   SLOT POLISH — Wild & Scatter Idle Shimmer
   ═══════════════════════════════════════════════════════════ */
@keyframes wildIdleShimmer {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0px transparent); }
    50%       { filter: brightness(1.14) drop-shadow(0 0 5px rgba(100,200,255,0.55)); }
}
@keyframes scatterIdleShimmer {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0px transparent); }
    50%       { filter: brightness(1.16) drop-shadow(0 0 6px rgba(255,215,0,0.55)); }
}
.reel-wild-idle {
    animation: wildIdleShimmer 2.6s ease-in-out infinite;
}
.reel-scatter-idle {
    animation: scatterIdleShimmer 2.1s ease-in-out infinite;
}

/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
   WIN JUICE \u2014 Near-Miss Heartbeat on Matching Cells
   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */

/* Pulse the MATCHING cells when a near-miss is detected */
@keyframes nearMissHeartbeat {
    0%, 100% { transform: scale(1);    filter: brightness(1); }
    30%       { transform: scale(1.08); filter: brightness(1.5) drop-shadow(0 0 8px rgba(255,200,60,0.85)); }
    65%       { transform: scale(1.03); filter: brightness(1.2); }
}
.reel-near-miss-beat {
    animation: nearMissHeartbeat 340ms cubic-bezier(0.34,1.56,0.64,1) both;
    position: relative;
    z-index: 3;
}


/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
   SLOT UI \u2014 Session Stats HUD
   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */

.slot-session-hud {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 3px 12px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.45);
    background: rgba(0,0,0,0.22);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-family: 'Courier New', monospace;
    user-select: none;
    transition: color 0.3s;
}
.slot-session-hud .hud-sep {
    color: rgba(255,255,255,0.18);
}
.slot-session-hud .hud-profit {
    color: #4ade80;
}
.slot-session-hud .hud-loss {
    color: #f87171;
}
.slot-session-hud .hud-neutral {
    color: rgba(255,255,255,0.45);
}

/* ---- Bet quick-select chips -------------------------------------------- */
.bet-chip-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 4px;
}
.bet-chip {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.55);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
    user-select: none;
    line-height: 1.6;
}
.bet-chip:hover {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.35);
}
.bet-chip.bet-chip-active {
    background: var(--slot-accent, #ffd700);
    color: #000;
    border-color: transparent;
    box-shadow: 0 0 8px rgba(255,215,0,0.45);
}
.bet-chip:active { transform: scale(0.93); }

/* ---- Lobby quick-resume banner ----------------------------------------- */
.lobby-resume-banner {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: 3500;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(30,30,50,0.96), rgba(20,20,40,0.96));
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s;
    opacity: 0;
    white-space: nowrap;
    letter-spacing: 0.02em;
    backdrop-filter: blur(8px);
}
.lobby-resume-banner.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.lobby-resume-banner .resume-icon {
    font-size: 17px;
    line-height: 1;
}
.lobby-resume-banner .resume-label { flex: 1; }
.lobby-resume-banner .resume-x {
    font-size: 16px;
    color: rgba(255,255,255,0.4);
    padding-left: 6px;
    transition: color 0.15s;
}
.lobby-resume-banner .resume-x:hover { color: rgba(255,255,255,0.8); }

/* ---- Session HUD win-rate span ----------------------------------------- */
.slot-session-hud .hud-winrate {
    color: rgba(255,255,255,0.38);
    font-size: 9px;
}

/* ---- Lobby "X playing" live badge -------------------------------------- */
.card-players-live {
    position: absolute;
    bottom: 7px;
    left: 8px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0,0,0,0.62);
    backdrop-filter: blur(4px);
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.04em;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.10);
}
.card-players-live::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 5px #4ade80;
    animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.45; transform: scale(0.8); }
}

/* ---- Hotkey cheatsheet overlay ---------------------------------------- */
.hotkey-sheet {
    position: fixed;
    bottom: 76px;
    right: 16px;
    z-index: 4000;
    background: rgba(12,12,24,0.95);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    min-width: 160px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: opacity 0.18s, transform 0.18s;
    font-family: 'Courier New', monospace;
}
.hotkey-sheet.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.hotkey-sheet table { border-collapse: collapse; width: 100%; }
.hotkey-sheet td { padding: 2px 4px; }
.hotkey-sheet td:first-child {
    font-weight: 800;
    color: var(--slot-accent, #ffd700);
    white-space: nowrap;
    padding-right: 10px;
}
.hotkey-sheet .hs-title {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 6px;
}

/* ---- Reel-cell landing pop -------------------------------------------- */
@keyframes cellLandPop {
    0%   { transform: scaleY(1.18) scaleX(0.88); }
    35%  { transform: scaleY(0.92) scaleX(1.06); }
    60%  { transform: scaleY(1.05) scaleX(0.97); }
    80%  { transform: scaleY(0.98) scaleX(1.01); }
    100% { transform: scaleY(1)    scaleX(1); }
}
.cell-land-pop {
    animation: cellLandPop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transform-origin: center bottom;
}

/* ---- Scatter awaiting-glow (landed scatters pulse while reels still spin) */
@keyframes scatterGlowPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 18px 6px rgba(255, 215, 0, 0.75),
                    inset 0 0 12px rgba(255, 215, 0, 0.35);
        filter: brightness(1.4);
    }
}
.scatter-waiting-glow {
    animation: scatterGlowPulse 700ms ease-in-out infinite;
    border-radius: 6px;
    z-index: 2;
    position: relative;
}

/* ---- Coin-rain particles (jackpot celebration) ------------------------- */
@keyframes coinFall {
    0%   { transform: translateY(-40px) rotate(0deg)   scale(1);    opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg) scale(0.6);  opacity: 0; }
}
.coin-rain-particle {
    position: fixed;
    top: 0;
    font-size: 22px;
    line-height: 1;
    pointer-events: none;
    z-index: 9999;
    animation: coinFall linear forwards;
    will-change: transform, opacity;
}

/* ---- Header balance win/loss flash ------------------------------------ */
@keyframes balanceWinFlash {
    0%   { color: inherit; text-shadow: none; }
    20%  { color: #4ade80; text-shadow: 0 0 14px rgba(74,222,128,0.9); transform: scale(1.08); }
    60%  { color: #4ade80; text-shadow: 0 0 8px rgba(74,222,128,0.5); }
    100% { color: inherit; text-shadow: none; transform: scale(1); }
}
.balance-flash-win {
    animation: balanceWinFlash 600ms ease-out forwards;
}
.balance-flash-loss {
    animation: balanceLossFlash 500ms ease-out forwards;
}

/* ---- Spin / bet button hover glow (pairs with playHoverSound) --------- */
.slot-spin-btn:hover,
.slot-spin-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(255,215,0,0.35), 0 0 22px rgba(255,215,0,0.25);
    transition: box-shadow 0.15s;
}
.slot-bet-btn:hover,
.slot-bet-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.22), 0 0 10px rgba(255,255,255,0.12);
    transition: box-shadow 0.12s;
}

/* ---- Lobby recommendations row --------------------------------------- */
.lobby-recommendations {
    margin: 8px 0 4px;
}
.lobby-rec-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    padding: 0 4px 4px;
}
.lobby-rec-games {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.lobby-rec-games::-webkit-scrollbar { display: none; }
.lobby-rec-chip {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.72);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lobby-rec-chip:hover {
    background: rgba(255,255,255,0.13);
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}

/* ---- Player win ticker entry (distinct colour from simulated wins) ---- */
.ticker-player-win {
    color: #fbbf24;
    font-weight: 700;
}

/* ---- Win-streak fire on spin button ----------------------------------- */
@keyframes flameDance {
    0%   { text-shadow: 0 0 8px #ff4500, 0 0 20px #ff6d00, 0 0 40px #ffd700; transform: scale(1)   rotate(-1deg); }
    25%  { text-shadow: 0 0 12px #ff2200, 0 0 28px #ff4500, 0 0 50px #ff8c00; transform: scale(1.04) rotate(1deg); }
    50%  { text-shadow: 0 0 8px #ff6d00, 0 0 22px #ff8c00, 0 0 42px #ffd700; transform: scale(1)   rotate(-0.5deg); }
    75%  { text-shadow: 0 0 14px #ff2200, 0 0 30px #ff4500, 0 0 55px #ff8c00; transform: scale(1.05) rotate(1.5deg); }
    100% { text-shadow: 0 0 8px #ff4500, 0 0 20px #ff6d00, 0 0 40px #ffd700; transform: scale(1)   rotate(-1deg); }
}
@keyframes fireRing {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,100,0,0), 0 0 18px 4px rgba(255,140,0,0.45); }
    50%       { box-shadow: 0 0 0 6px rgba(255,100,0,0.18), 0 0 32px 10px rgba(255,140,0,0.65); }
}
.spin-btn-fire {
    animation: fireRing 900ms ease-in-out infinite;
    position: relative;
}
.spin-btn-fire::after {
    content: '🔥';
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    animation: flameDance 600ms ease-in-out infinite;
    pointer-events: none;
    line-height: 1;
}

/* ---- Win-toast notifications ------------------------------------------ */
@keyframes toastIn {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toastOut {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(110%); opacity: 0; }
}
.win-toast {
    position: fixed;
    top: 72px;
    right: 12px;
    z-index: 9998;
    min-width: 200px;
    max-width: 280px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(18,18,32,0.97);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 6px 24px rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    animation: toastIn 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
    pointer-events: none;
    letter-spacing: 0.02em;
    transition: top 0.22s ease;
}
.win-toast.toast-out {
    animation: toastOut 0.28s ease-in forwards;
}
.win-toast-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.win-toast-body { flex: 1; }
.win-toast-title { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.5; margin-bottom: 1px; }
/* Tier colours */
.win-toast-streak  { border-color: rgba(251,191,36,0.5);  box-shadow: 0 6px 24px rgba(0,0,0,0.55), 0 0 18px rgba(251,191,36,0.2); }
.win-toast-big     { border-color: rgba(74,222,128,0.5);  box-shadow: 0 6px 24px rgba(0,0,0,0.55), 0 0 18px rgba(74,222,128,0.18); }
.win-toast-epic    { border-color: rgba(167,139,250,0.6); box-shadow: 0 6px 24px rgba(0,0,0,0.55), 0 0 20px rgba(167,139,250,0.25); }
.win-toast-jackpot { border-color: rgba(255,215,0,0.7);   box-shadow: 0 6px 24px rgba(0,0,0,0.55), 0 0 28px rgba(255,215,0,0.35); }

/* ---- Smart Bet Nudge Toast -------------------------------------------- */
.bet-nudge-toast {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 1px solid #fbbf24;
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1000;
    animation: betNudgeSlideUp 0.4s ease-out;
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.3);
    max-width: 420px;
}
.bet-nudge-icon { font-size: 1.2em; }
.bet-nudge-text { color: #e2e8f0; font-size: 0.85em; }
.bet-nudge-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.85em;
}
.bet-nudge-btn:hover { filter: brightness(1.1); }
.bet-nudge-dismiss {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.1em;
    padding: 2px 6px;
}
@keyframes betNudgeSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---- Slot modal open shimmer ------------------------------------------ */
@keyframes shimmerSlide {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
.slot-shimmer-overlay {
    position: absolute;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        rgba(255,255,255,0)   30%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0)   70%
    );
    background-size: 200% 100%;
    animation: shimmerSlide 0.55s ease-out forwards;
    opacity: 0;
    animation-fill-mode: both;
}

/* ---- Personal best win badge per game card ---------------------------- */
.card-personal-best {
    position: absolute;
    bottom: 7px;
    right: 8px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(0,0,0,0.62);
    backdrop-filter: blur(4px);
    font-size: 9px;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: 0.04em;
    pointer-events: none;
    border: 1px solid rgba(251,191,36,0.25);
    white-space: nowrap;
}

/* ── Cascade Chain Counter ──────────────────────────── */
.cascade-chain-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  z-index: 120;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
}
.cascade-chain-display.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.cascade-chain-display.bump {
  animation: cascadeBump 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes cascadeBump {
  0%   { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-50%, -50%) scale(1.35); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.cascade-chain-icon {
  font-size: 2.2rem;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255,200,50,0.9));
  animation: chainIconSpin 0.6s ease-out;
}
@keyframes chainIconSpin {
  from { transform: rotate(-30deg) scale(0.7); }
  to   { transform: rotate(0deg)   scale(1);   }
}
.cascade-chain-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,220,100,0.85);
  text-shadow: 0 0 6px rgba(255,180,0,0.7);
}
.cascade-chain-count {
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 10px rgba(255,200,50,1),
    0 0 24px rgba(255,140,0,0.8),
    0 2px 0 rgba(0,0,0,0.6);
  letter-spacing: -0.02em;
}
/* level-based colour tints */
.cascade-chain-display[data-level="2"] .cascade-chain-count { color: #ffe066; }
.cascade-chain-display[data-level="3"] .cascade-chain-count { color: #ffaa00; }
.cascade-chain-display[data-level="4"] .cascade-chain-count,
.cascade-chain-display[data-level="5"] .cascade-chain-count { color: #ff6600; text-shadow: 0 0 14px rgba(255,80,0,1), 0 0 30px rgba(255,100,0,0.8), 0 2px 0 rgba(0,0,0,0.6); }
.cascade-chain-display[data-level^="6"] .cascade-chain-count,
.cascade-chain-display[data-level^="7"] .cascade-chain-count,
.cascade-chain-display[data-level^="8"] .cascade-chain-count,
.cascade-chain-display[data-level^="9"] .cascade-chain-count { color: #ff3300; text-shadow: 0 0 16px rgba(255,50,0,1), 0 0 36px rgba(200,0,0,0.9), 0 2px 0 rgba(0,0,0,0.6); }

/* ── Win Cell Ring Glow ─────────────────────────────── */
@keyframes winCellPop {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,215,0,0); }
  30%  { transform: scale(1.13); box-shadow: 0 0 0 6px rgba(255,215,0,0.7); }
  60%  { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(255,180,0,0.4); }
  100% { transform: scale(1);    box-shadow: 0 0 0 6px rgba(255,215,0,0.25); }
}
@keyframes winCellRingPulse {
  0%   { box-shadow: 0 0 0 6px rgba(255,215,0,0.25), 0 0 12px rgba(255,180,0,0.4); }
  50%  { box-shadow: 0 0 0 8px rgba(255,215,0,0.45), 0 0 20px rgba(255,160,0,0.6); }
  100% { box-shadow: 0 0 0 6px rgba(255,215,0,0.25), 0 0 12px rgba(255,180,0,0.4); }
}
.reel-cell.win-cell-glow {
  animation: winCellPop 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards,
             winCellRingPulse 1.2s ease-in-out 0.35s infinite;
  border-radius: 8px;
  z-index: 10;
  position: relative;
}
.reel-cell.win-cell-glow::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 10px;
  border: 2px solid rgba(255,215,0,0.7);
  pointer-events: none;
  animation: winCellRingPulse 1.2s ease-in-out infinite;
}
/* tier variants */
.reel-cell.win-cell-glow.win-tier-epic::after  { border-color: rgba(160,80,255,0.8); box-shadow: 0 0 14px rgba(160,80,255,0.6); }
.reel-cell.win-cell-glow.win-tier-mega::after  { border-color: rgba(255,100,50,0.9); box-shadow: 0 0 18px rgba(255,80,0,0.7); }
.reel-cell.win-cell-glow.win-tier-jackpot::after { border-color: rgba(255,220,50,1); box-shadow: 0 0 24px rgba(255,200,0,1); animation: winCellRingPulse 0.5s ease-in-out infinite; }

/* ── Autoplay Controls ──────────────────────────────── */
.autoplay-btn {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #ccc;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 6px 10px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.autoplay-btn:hover {
  background: linear-gradient(135deg, #252545 0%, #1e2f55 100%);
  border-color: rgba(100,180,255,0.4);
  color: #fff;
}
.autoplay-btn.autoplay-active {
  background: linear-gradient(135deg, #1a3a1a 0%, #0d2d0d 100%);
  border-color: rgba(50,200,100,0.6);
  color: #4eff8f;
  animation: autoplayPulse 2s ease-in-out infinite;
}
@keyframes autoplayPulse {
  0%, 100% { border-color: rgba(50,200,100,0.4); }
  50%       { border-color: rgba(50,200,100,0.9); }
}
.autoplay-btn.autoplay-stopping {
  background: linear-gradient(135deg, #3a1a1a 0%, #2d0d0d 100%);
  border-color: rgba(255,80,80,0.6);
  color: #ff8080;
}
.autoplay-count-badge {
  background: rgba(50,200,100,0.2);
  border-radius: 4px;
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 4px;
  padding: 1px 5px;
  vertical-align: middle;
}
.autoplay-picker {
  background: #0e0e1a;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  display: none;
  gap: 6px;
  left: 50%;
  padding: 10px 12px;
  position: absolute;
  transform: translateX(-50%);
  top: calc(100% + 6px);
  z-index: 200;
  flex-wrap: wrap;
  justify-content: center;
  min-width: 200px;
}
.autoplay-picker.open { display: flex; }
.autoplay-picker-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: #ddd;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 12px;
  transition: background 0.15s;
}
.autoplay-picker-btn:hover {
  background: rgba(100,180,255,0.2);
  border-color: rgba(100,180,255,0.5);
  color: #fff;
}

/* ── Free Spins Golden Frame ────────────────────────── */
@keyframes freeSpinsAura {
  0%   { box-shadow: 0 0 0 3px rgba(255,215,0,0.5),  0 0 20px rgba(255,180,0,0.3),  inset 0 0 30px rgba(255,200,0,0.05); }
  50%  { box-shadow: 0 0 0 4px rgba(255,235,80,0.8), 0 0 35px rgba(255,200,0,0.55), inset 0 0 40px rgba(255,200,0,0.1); }
  100% { box-shadow: 0 0 0 3px rgba(255,215,0,0.5),  0 0 20px rgba(255,180,0,0.3),  inset 0 0 30px rgba(255,200,0,0.05); }
}
@keyframes freeSpinsTopBanner {
  0%   { opacity: 0.85; transform: scaleX(0.97); }
  50%  { opacity: 1;    transform: scaleX(1);    }
  100% { opacity: 0.85; transform: scaleX(0.97); }
}
.free-spins-active-frame {
  border-radius: 12px;
  animation: freeSpinsAura 2s ease-in-out infinite;
  transition: box-shadow 0.5s ease;
}
.free-spins-banner {
  align-items: center;
  animation: freeSpinsTopBanner 1.5s ease-in-out infinite;
  background: linear-gradient(90deg, transparent 0%, rgba(255,200,0,0.18) 20%, rgba(255,215,0,0.28) 50%, rgba(255,200,0,0.18) 80%, transparent 100%);
  border-bottom: 1px solid rgba(255,215,0,0.35);
  border-radius: 10px 10px 0 0;
  color: #ffe866;
  display: flex;
  font-size: 0.8rem;
  font-weight: 700;
  gap: 10px;
  justify-content: center;
  letter-spacing: 0.12em;
  padding: 5px 12px;
  text-shadow: 0 0 8px rgba(255,200,0,0.8);
  text-transform: uppercase;
  width: 100%;
}
.free-spins-banner .fs-remaining {
  background: rgba(255,215,0,0.2);
  border: 1px solid rgba(255,215,0,0.5);
  border-radius: 10px;
  font-size: 0.85rem;
  padding: 1px 8px;
}
.free-spins-banner .fs-total-win {
  color: #4eff8f;
  text-shadow: 0 0 6px rgba(78,255,143,0.7);
}

/* ── Buy Feature Button ─────────────────────────────── */
.buy-feature-btn {
  align-items: center;
  background: linear-gradient(135deg, #1a0d2e 0%, #2d1060 100%);
  border: 1px solid rgba(180,100,255,0.45);
  border-radius: 8px;
  color: #d090ff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: 0.7rem;
  font-weight: 700;
  gap: 2px;
  letter-spacing: 0.05em;
  padding: 6px 10px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.buy-feature-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2d1060 0%, #4a1a80 100%);
  border-color: rgba(200,130,255,0.8);
  box-shadow: 0 0 12px rgba(180,100,255,0.4);
  color: #e8b0ff;
}
.buy-feature-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.buy-feature-btn .bf-label {
  font-size: 0.65rem;
  opacity: 0.8;
  text-transform: uppercase;
}
.buy-feature-btn .bf-cost {
  color: #ffe066;
  font-size: 0.78rem;
  font-weight: 800;
}
@keyframes buyFeaturePulse {
  0%, 100% { border-color: rgba(180,100,255,0.45); box-shadow: none; }
  50%       { border-color: rgba(200,130,255,0.7);  box-shadow: 0 0 10px rgba(180,100,255,0.3); }
}
.buy-feature-btn:not(:disabled) {
  animation: buyFeaturePulse 3s ease-in-out infinite;
}

/* ── Gamble / Double-Up Feature ─────────────────────── */
.gamble-overlay {
  align-items: center;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  left: 0;
  opacity: 0;
  padding: 24px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.25s ease;
  z-index: 150;
}
.gamble-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.gamble-title {
  color: #ffe066;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-shadow: 0 0 10px rgba(255,200,0,0.7);
  text-transform: uppercase;
}
.gamble-amount {
  color: #4eff8f;
  font-size: 1.6rem;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(78,255,143,0.6);
}
.gamble-prompt {
  color: #ccc;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gamble-cards {
  display: flex;
  gap: 12px;
}
.gamble-card-btn {
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 900;
  height: 64px;
  letter-spacing: 0.04em;
  transition: transform 0.15s, box-shadow 0.15s;
  width: 90px;
}
.gamble-card-btn:hover {
  transform: scale(1.08);
}
.gamble-card-btn.red {
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  box-shadow: 0 4px 16px rgba(200,50,50,0.5);
  color: #fff;
}
.gamble-card-btn.red:hover { box-shadow: 0 6px 22px rgba(200,50,50,0.8); }
.gamble-card-btn.black {
  background: linear-gradient(135deg, #1a1a2e, #2c3e50);
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}
.gamble-card-btn.black:hover { box-shadow: 0 6px 22px rgba(80,80,120,0.6); }
.gamble-result {
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 6px 18px;
  text-transform: uppercase;
}
.gamble-result.win  { background: rgba(78,255,143,0.15); color: #4eff8f; border: 1px solid rgba(78,255,143,0.4); }
.gamble-result.lose { background: rgba(255,80,80,0.15);  color: #ff6060; border: 1px solid rgba(255,80,80,0.4);  }
.gamble-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.gamble-collect-btn {
  background: linear-gradient(135deg, #1a3a1a, #2d5a2d);
  border: 1px solid rgba(78,255,143,0.5);
  border-radius: 8px;
  color: #4eff8f;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 7px 16px;
  text-transform: uppercase;
  transition: all 0.15s;
}
.gamble-collect-btn:hover { background: linear-gradient(135deg, #2d5a2d, #3a7a3a); }
.gamble-streak {
  color: rgba(255,220,100,0.7);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Lobby Favorites ────────────────────────────────── */
.game-fav-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.3);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
  position: absolute;
  right: 6px;
  top: 6px;
  transition: color 0.18s, transform 0.18s;
  z-index: 5;
}
.game-fav-btn:hover { color: rgba(255,100,100,0.8); transform: scale(1.2); }
.game-fav-btn.fav-active { color: #ff4466; }
.game-fav-btn.fav-active:hover { color: #ff6680; }
@keyframes favPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.game-fav-btn.fav-pop { animation: favPop 0.35s cubic-bezier(0.34,1.56,0.64,1); }

/* ═══════════════════════════════════════════
   SPRINT 18 — TURBO SPIN BUTTON
   ═══════════════════════════════════════════ */
.turbo-spin-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 2px solid #444;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  color: #888;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  white-space: nowrap;
}
.turbo-spin-btn:hover {
  border-color: #f0c040;
  color: #f0c040;
  background: rgba(240,192,64,0.08);
}
.turbo-spin-btn.turbo-on {
  border-color: #ffe94d;
  color: #ffe94d;
  background: rgba(255,233,77,0.15);
  box-shadow: 0 0 10px rgba(255,233,77,0.3), 0 0 20px rgba(255,233,77,0.1);
  animation: turboPulse 1.4s ease-in-out infinite;
}
.turbo-spin-btn .turbo-icon {
  font-size: 14px;
  line-height: 1;
}
@keyframes turboPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,233,77,0.3); }
  50%       { box-shadow: 0 0 16px rgba(255,233,77,0.6), 0 0 30px rgba(255,233,77,0.2); }
}

/* Turbo mode — shorten all reel CSS transitions */
.turbo-mode .reel-strip,
.turbo-mode .reel-cell,
.turbo-mode .reel-cell img,
.turbo-mode .reel-cell .symbol-label {
  transition-duration: 60ms !important;
}
.turbo-mode .spin-btn {
  transition: none !important;
}

/* ═══════════════════════════════════════════
   SPRINT 18 — LOBBY SEARCH BAR
   ═══════════════════════════════════════════ */
.lobby-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px 0;
  width: 100%;
}
.lobby-search-input {
  flex: 1;
  padding: 8px 14px 8px 36px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  background: rgba(255,255,255,0.05);
  color: #e0e0e0;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.242 1.656a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 14px;
}
.lobby-search-input::placeholder {
  color: #555;
}
.lobby-search-input:focus {
  border-color: rgba(255,255,255,0.3);
  box-shadow: 0 0 0 2px rgba(255,200,50,0.15);
}
.lobby-search-input.has-value {
  border-color: rgba(255,200,50,0.35);
}
.lobby-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: #999;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.lobby-search-clear:hover {
  background: rgba(255,80,80,0.2);
  border-color: rgba(255,80,80,0.4);
  color: #ff6666;
}
.lobby-search-wrap.active .lobby-search-clear {
  display: flex;
}
.lobby-search-no-results {
  text-align: center;
  color: #555;
  padding: 40px 20px;
  font-size: 14px;
  display: none;
}
.lobby-search-no-results.visible {
  display: block;
}

/* ═══════════════════════════════════════════
   SPRINT 19 — SLOT INTRO SPLASH
   ═══════════════════════════════════════════ */
.slot-intro-splash {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  border-radius: inherit;
  overflow: hidden;
}
.slot-intro-splash.splash-visible {
  opacity: 1;
  pointer-events: all;
}
.slot-intro-splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  filter: brightness(0.6);
  z-index: 0;
}
.splash-provider-tag {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s 0.15s, transform 0.4s 0.15s;
}
.slot-intro-splash.splash-visible .splash-provider-tag {
  opacity: 1;
  transform: translateY(0);
}
.splash-game-title {
  position: relative;
  z-index: 1;
  font-size: clamp(22px, 5vw, 42px);
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 30px rgba(255,255,255,0.4), 0 2px 8px rgba(0,0,0,0.8);
  opacity: 0;
  transform: scale(0.85) translateY(10px);
  transition: opacity 0.45s 0.25s cubic-bezier(.22,1,.36,1),
              transform 0.45s 0.25s cubic-bezier(.22,1,.36,1);
}
.slot-intro-splash.splash-visible .splash-game-title {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.splash-loading-bar {
  position: relative;
  z-index: 1;
  width: 120px;
  height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s 0.35s;
}
.slot-intro-splash.splash-visible .splash-loading-bar {
  opacity: 1;
}
.splash-loading-bar::after {
  content: '';
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  animation: splashSweep 1.1s 0.4s ease-in-out forwards;
}
@keyframes splashSweep {
  from { left: -100%; }
  to   { left: 100%; }
}

/* ═══════════════════════════════════════════
   SPRINT 19 — PAYTABLE MODAL
   ═══════════════════════════════════════════ */
.paytable-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.6);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.paytable-btn:hover {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
  background: rgba(255,255,255,0.12);
}
.paytable-overlay {
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  padding: 16px;
}
.paytable-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.paytable-modal {
  background: #1a1a2e;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  transform: scale(0.94) translateY(12px);
  transition: transform 0.25s cubic-bezier(.22,1,.36,1);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.paytable-overlay.open .paytable-modal {
  transform: scale(1) translateY(0);
}
.paytable-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky;
  top: 0;
  background: #1a1a2e;
  z-index: 1;
  border-radius: 16px 16px 0 0;
}
.paytable-title {
  font-size: 16px;
  font-weight: 700;
  color: #e0e0e0;
}
.paytable-subtitle {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}
.paytable-close {
  background: none;
  border: none;
  color: #888;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.15s;
}
.paytable-close:hover { color: #fff; }
.paytable-body {
  padding: 16px 20px 20px;
}
.paytable-section {
  margin-bottom: 20px;
}
.paytable-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.paytable-stats-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.paytable-stat {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}
.paytable-stat-value {
  font-size: 16px;
  font-weight: 800;
  color: #f0c040;
}
.paytable-stat-label {
  font-size: 10px;
  color: #666;
  margin-top: 2px;
}
.paytable-payout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.paytable-payout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 7px 10px;
}
.paytable-payout-label {
  font-size: 12px;
  color: #aaa;
}
.paytable-payout-value {
  font-size: 13px;
  font-weight: 700;
  color: #f0c040;
}
.paytable-symbols-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.paytable-symbol-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  padding: 4px 10px 4px 6px;
  font-size: 11px;
  color: #bbb;
}
.paytable-symbol-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0,0,0,0.25);
}
.paytable-symbol-chip .paytable-symbol-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.paytable-bonus-desc {
  font-size: 13px;
  color: #bbb;
  line-height: 1.6;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid rgba(255,200,50,0.4);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
}

/* ═══════════════════════════════════════════
   SPRINT 19 — LOBBY TAB COUNT BADGES
   ═══════════════════════════════════════════ */
.filter-tab.active .filter-tab-count,
.tab-btn.active .filter-tab-count,
button.active .filter-tab-count {
  background: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
}

/* ═══════════════════════════════════════════
   SPRINT 20 — XP / LEVEL BADGE (lobby header)
   ═══════════════════════════════════════════ */
.xp-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  user-select: none;
  min-width: 160px;
}
.xp-level-badge:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,200,50,0.3);
}
.xp-badge-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.xp-badge-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.xp-badge-level-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.xp-badge-level {
  font-size: 11px;
  font-weight: 800;
  color: #f0c040;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.xp-badge-next {
  font-size: 10px;
  color: #555;
  white-space: nowrap;
}
.xp-bar-track {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  width: 100%;
}
.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f0c040, #ff9500);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(.22,1,.36,1);
  min-width: 4px;
}

/* ═══════════════════════════════════════════
   SPRINT 20 — IN-SLOT SESSION STATS BAR
   ═══════════════════════════════════════════ */
.session-stats-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4px 0;
  background: rgba(0,0,0,0.25);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}
.session-stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  font-size: 11px;
  color: #888;
  white-space: nowrap;
}
.session-stat-item + .session-stat-item {
  border-left: 1px solid rgba(255,255,255,0.07);
}
.session-stat-icon {
  font-size: 12px;
  opacity: 0.7;
}
.session-stat-value {
  font-weight: 700;
  color: #bbb;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.session-stat-value.positive { color: #4caf50; }
.session-stat-value.negative { color: #ef5350; }
.session-stat-label {
  color: #555;
  font-size: 10px;
}


/* =================================================================
   SPRINT 21 - Jackpot Win Overlay
   ================================================================= */

.jackpot-win-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.85);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.jackpot-win-overlay.active {
    display: flex;
    animation: jpOverlayIn 0.35s ease-out forwards;
}
@keyframes jpOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.jackpot-win-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 40px 36px;
    border-radius: 20px;
    background: linear-gradient(145deg, #1a1a2e, #16213e);
    border: 2px solid #ffd700;
    box-shadow: 0 0 60px rgba(255,215,0,0.4), 0 20px 60px rgba(0,0,0,0.8);
    max-width: 420px;
    width: 90vw;
    text-align: center;
    animation: jpModalIn 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes jpModalIn {
    from { transform: scale(0.6) translateY(40px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

.jackpot-win-modal--mini {
    border-color: #94a3b8;
    box-shadow: 0 0 40px rgba(148,163,184,0.35), 0 20px 60px rgba(0,0,0,0.8);
}
.jackpot-win-modal--major {
    border-color: #ffd700;
    box-shadow: 0 0 60px rgba(255,215,0,0.5), 0 20px 60px rgba(0,0,0,0.8);
}
.jackpot-win-modal--mega {
    border-color: #a855f7;
    background: linear-gradient(145deg, #1e0a3c, #0f0728);
    box-shadow: 0 0 80px rgba(168,85,247,0.6), 0 20px 80px rgba(0,0,0,0.9);
    animation: jpModalIn 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards, jpMegaPulse 1.5s 0.5s ease-in-out infinite alternate;
}
@keyframes jpMegaPulse {
    from { box-shadow: 0 0 80px rgba(168,85,247,0.6), 0 20px 80px rgba(0,0,0,0.9); }
    to   { box-shadow: 0 0 120px rgba(168,85,247,0.9), 0 20px 80px rgba(0,0,0,0.9); }
}

.jackpot-win-burst {
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, transparent 70%);
    pointer-events: none;
    animation: jpBurstPulse 0.8s ease-out forwards;
}
@keyframes jpBurstPulse {
    from { transform: scale(0.5); opacity: 1; }
    to   { transform: scale(1.4); opacity: 0; }
}
.jackpot-win-modal--mega .jackpot-win-burst {
    background: radial-gradient(circle, rgba(168,85,247,0.25) 0%, transparent 70%);
}
.jackpot-win-modal--mini .jackpot-win-burst {
    background: radial-gradient(circle, rgba(148,163,184,0.2) 0%, transparent 70%);
}

.jackpot-win-icon {
    font-size: 56px;
    line-height: 1;
    filter: drop-shadow(0 0 12px rgba(255,215,0,0.8));
    animation: jpIconBounce 0.6s 0.2s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes jpIconBounce {
    from { transform: scale(0) rotate(-30deg); }
    to   { transform: scale(1) rotate(0deg); }
}

.jackpot-win-tier {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ffd700;
    margin-top: 4px;
}
.jackpot-win-modal--mini .jackpot-win-tier { color: #94a3b8; }
.jackpot-win-modal--mega .jackpot-win-tier { color: #c084fc; }

.jackpot-win-amount {
    font-size: 42px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 20px rgba(255,215,0,0.6);
    animation: jpAmountSlam 0.4s 0.35s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes jpAmountSlam {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.jackpot-win-modal--mega .jackpot-win-amount {
    background: linear-gradient(135deg, #c084fc, #a855f7, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.jackpot-win-sub {
    font-size: 13px;
    color: #94a3b8;
    margin-top: -4px;
}

.jackpot-win-close {
    margin-top: 8px;
    padding: 14px 40px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #000;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(245,158,11,0.5);
}
.jackpot-win-close:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 28px rgba(245,158,11,0.7);
}
.jackpot-win-modal--mega .jackpot-win-close {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #fff;
    box-shadow: 0 4px 20px rgba(168,85,247,0.5);
}

/* =================================================================
   SPRINT 21 - Tournament Banner (Lobby)
   ================================================================= */

.tournament-banner {
    margin: 0 0 16px 0;
    padding: 16px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f172a, #1e1b4b);
    border: 1px solid rgba(99,102,241,0.4);
    box-shadow: 0 4px 24px rgba(99,102,241,0.15);
    position: relative;
    overflow: hidden;
}
.tournament-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.05), transparent);
    animation: tournBannerShimmer 3s linear infinite;
}
@keyframes tournBannerShimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

.tourn-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.tourn-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #475569;
    flex-shrink: 0;
}
.tourn-live-dot--active {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,0.8);
    animation: tournDotPulse 1.4s ease-in-out infinite;
}
@keyframes tournDotPulse {
    0%,100% { box-shadow: 0 0 4px rgba(34,197,94,0.6); }
    50%      { box-shadow: 0 0 10px rgba(34,197,94,1); }
}

.tourn-title {
    font-size: 15px;
    font-weight: 700;
    color: #e2e8f0;
    flex: 1;
}

.tourn-status-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(34,197,94,0.15);
    color: #22c55e;
    border: 1px solid rgba(34,197,94,0.3);
}

.tourn-timer {
    font-size: 14px;
    font-weight: 700;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
    min-width: 60px;
    text-align: right;
}

.tourn-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 12px;
}
.tourn-prizes {
    color: #fbbf24;
    font-weight: 600;
}
.tourn-entry-count {
    color: #64748b;
}

.tourn-leaderboard-wrap {
    display: none;
    margin-bottom: 12px;
}
.tourn-lb-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tourn-lb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
    font-size: 13px;
}
.tourn-lb-rank { width: 24px; text-align: center; }
.tourn-lb-name { flex: 1; color: #cbd5e1; font-weight: 500; }
.tourn-lb-mult { color: #fbbf24; font-weight: 700; font-size: 12px; }
.tourn-lb-empty, .tourn-lb-loading, .tourn-loading {
    text-align: center;
    color: #475569;
    font-size: 13px;
    padding: 8px 0;
}

.tourn-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.tourn-join-btn {
    padding: 9px 20px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 3px 12px rgba(99,102,241,0.4);
    letter-spacing: 0.5px;
}
.tourn-join-btn:hover:not(:disabled) {
    transform: scale(1.03);
    box-shadow: 0 5px 18px rgba(99,102,241,0.6);
}
.tourn-join-btn:disabled { opacity: 0.6; cursor: default; }

.tourn-expand-btn {
    padding: 9px 16px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: #94a3b8;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
    flex: 1;
    text-align: center;
}
.tourn-expand-btn:hover { background: rgba(255,255,255,0.08); }

/* =================================================================
   SPRINT 21 - Tournament Slot Badge
   ================================================================= */

.tourn-slot-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(79,70,229,0.1));
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 8px;
    font-size: 12px;
    color: #a5b4fc;
    text-align: center;
    margin: 6px 12px 0;
    animation: tournBadgeFadeIn 0.4s ease-out;
}
@keyframes tournBadgeFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tourn-slot-badge strong { color: #818cf8; }

/* ═══════════════════════════════════════════════════════════════════
   SPRINT 22 — Notification Bell + Panel
   ═══════════════════════════════════════════════════════════════════ */

.btn-notif {
    position: relative;
}

.notif-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9800;
    background: rgba(0,0,0,0.4);
}
.notif-backdrop.active { display: block; }

.notif-panel {
    position: fixed;
    top: 0;
    right: -380px;
    width: 360px;
    max-width: 95vw;
    height: 100dvh;
    background: #0f172a;
    border-left: 1px solid rgba(255,255,255,0.08);
    z-index: 9900;
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.32,0.72,0,1);
    box-shadow: -8px 0 32px rgba(0,0,0,0.5);
}
.notif-panel.active { right: 0; }

.notif-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.notif-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: #f1f5f9;
    flex: 1;
}
.notif-mark-read {
    background: none;
    border: none;
    color: #6366f1;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}
.notif-mark-read:hover { background: rgba(99,102,241,0.12); }
.notif-panel-close {
    background: none;
    border: none;
    color: #64748b;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.15s;
    line-height: 1;
}
.notif-panel-close:hover { color: #f1f5f9; }

.notif-panel-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
}
.notif-item:hover { background: rgba(255,255,255,0.03); }
.notif-unread {
    background: rgba(99,102,241,0.06);
    border-left: 3px solid #6366f1;
}
.notif-item-icon {
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 1px;
}
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title {
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 2px;
}
.notif-item-text {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 4px;
    line-height: 1.4;
}
.notif-item-time {
    font-size: 11px;
    color: #475569;
}
.notif-empty {
    padding: 32px 16px;
    text-align: center;
    color: #475569;
    font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   SPRINT 22 — Challenge Tabs (Today / Weekly)
   ═══════════════════════════════════════════════════════════════════ */

.ch-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}
.ch-tab {
    flex: 1;
    padding: 8px 0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    text-align: center;
}
.ch-tab:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; }
.ch-tab-active {
    background: rgba(99,102,241,0.15);
    border-color: rgba(99,102,241,0.5);
    color: #a5b4fc;
}

.challenge-reset-info {
    font-size: 11px;
    color: #475569;
    text-align: right;
    margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   SPRINT 22 — Live Activity Feed
   ═══════════════════════════════════════════════════════════════════ */

@keyframes lfeFadeIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
.lfe-user  { color: #cbd5e1; font-weight: 600; }
.lfe-win   { color: #22c55e; font-weight: 700; }
.lfe-mult  { color: #fbbf24; font-size: 11px; }
.lfe-game  { color: #818cf8; }
.lfe-time  { color: #475569; font-size: 11px; margin-left: auto; }
/* ═══════════════════════════════════════════════════════════
   ALL-TIME LEADERBOARD PANEL
   ═══════════════════════════════════════════════════════════ */

.ldb-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 12px;
}
.ldb-row:last-child { border-bottom: none; }
.ldb-rank  { width: 22px; text-align: center; flex-shrink: 0; }
.ldb-player{ width: 58px; color: #ffd700; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ldb-game  { flex: 1; color: rgba(255,255,255,0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ldb-mult  { width: 50px; text-align: right; color: #34d399; font-weight: 700; flex-shrink: 0; }
.ldb-amount{ width: 72px; text-align: right; color: rgba(255,255,255,0.9); flex-shrink: 0; }

/* ── Sprint 24: Slot of the Day ────────────────────────────────────────── */
.game-of-day-card {
    position: relative;
    box-shadow: 0 0 0 2px #ffd700, 0 0 16px 4px rgba(255, 215, 0, 0.35) !important;
    animation: gameDayGlow 2s ease-in-out infinite alternate;
}

@keyframes gameDayGlow {
    from { box-shadow: 0 0 0 2px #ffd700, 0 0 12px 3px rgba(255, 215, 0, 0.25) !important; }
    to   { box-shadow: 0 0 0 2px #ffd700, 0 0 22px 7px rgba(255, 215, 0, 0.5) !important; }
}

.game-of-day-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: linear-gradient(135deg, #f59e0b, #ffd700);
    color: #1a1a2e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 3px 7px;
    border-radius: 10px;
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* ── Sprint 24: Achievement Badge Gallery ──────────────────────────────── */
.badges-container {
    padding: 8px 0;
    max-height: 480px;
    overflow-y: auto;
}

.badge-category-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #9ca3af;
    padding: 12px 0 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 8px;
}

.badge-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    cursor: default;
    transition: transform 0.15s, box-shadow 0.15s;
}

.badge-item.earned {
    background: rgba(255,215,0,0.07);
    border-color: rgba(255,215,0,0.25);
}

.badge-item.earned:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,215,0,0.2);
}

.badge-item.locked {
    opacity: 0.32;
    filter: grayscale(0.8);
}

.badge-icon {
    font-size: 22px;
    line-height: 1;
}

.badge-name {
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    color: #e5e7eb;
    line-height: 1.2;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Sprint 24: VIP Inline Rank Badges ─────────────────────────────────── */
.vip-inline-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 6px;
    margin-left: 5px;
    vertical-align: middle;
    opacity: 0.9;
    line-height: 1.6;
}

.vip-badge-bronze   { background: #cd7f32; color: #1a1a1a; }
.vip-badge-silver   { background: #c0c0c0; color: #1a1a1a; }
.vip-badge-gold     { background: linear-gradient(90deg, #f59e0b, #ffd700); color: #1a1a1a; }
.vip-badge-platinum { background: linear-gradient(90deg, #0d9488, #14b8a6); color: #fff; }
.vip-badge-diamond  { background: linear-gradient(90deg, #0ea5e9, #38bdf8); color: #fff; }
.vip-badge-elite    { background: linear-gradient(90deg, #7c3aed, #a855f7); color: #fff; }

/* ── Sprint 24: Enhanced Bonus Wheel (Free Spin segments) ──────────────── */
.wheel-segment-freespins {
    position: relative;
}

.wheel-segment-freespins::after {
    content: '✨';
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 10px;
    pointer-events: none;
}

/* ── Sprint 25: Hot/Cold Game Indicators ───────────────────────────────── */
.game-hot-badge,
.game-cold-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 16px;
    z-index: 10;
    pointer-events: none;
    line-height: 1;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
    animation: hotColdPulse 2s ease-in-out infinite;
}

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

/* Max Win badge on game cards */
.game-max-win-badge {
    position: absolute;
    bottom: 4px;
    left: 6px;
    background: linear-gradient(135deg, rgba(240,192,64,0.92), rgba(220,160,40,0.92));
    color: #1a1a2e;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 10;
    pointer-events: none;
    letter-spacing: 0.5px;
    line-height: 1.3;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    text-shadow: 0 0.5px 0 rgba(255,255,255,0.3);
}

/* ── Sprint 25: Daily Scratch Card ─────────────────────────────────────── */
.scratch-instruction {
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    margin: 0 0 14px;
}

.scratch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.scratch-cell {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scratch-cover,
.scratch-reveal {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
    font-size: 24px;
    gap: 4px;
}

.scratch-cover {
    background: linear-gradient(135deg, #374151, #1f2937);
    border-radius: 12px;
}

.scratch-reveal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    transform: rotateY(90deg);
    opacity: 0;
}

.scratch-cell.scratched .scratch-cover {
    transform: rotateY(-90deg);
    opacity: 0;
}

.scratch-cell.scratched .scratch-reveal {
    transform: rotateY(0deg);
    opacity: 1;
}

.scratch-amount {
    font-size: 11px;
    font-weight: 700;
    color: #ffd700;
}

.scratch-result {
    text-align: center;
    min-height: 28px;
    font-size: 14px;
    font-weight: 600;
    padding: 6px;
    border-radius: 8px;
}

.scratch-win {
    color: #ffd700;
    text-shadow: 0 0 12px rgba(255,215,0,0.5);
}

.scratch-consolation {
    color: #9ca3af;
}

/* ===== Level Milestone Reward Modal ===== */
#levelMilestoneModal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(6px);
}

@keyframes lm-pop-in {
    from { opacity: 0; transform: scale(0.7) translateY(30px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.lm-badge-wrap {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 20px;
}

.lm-badge {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
    color: #1a1a2e;
    box-shadow: 0 0 30px rgba(255,215,0,0.6);
    position: relative;
    z-index: 1;
}

.lm-badge-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 3px solid rgba(255,215,0,0.5);
    animation: lm-ring-pulse 1.6s ease-in-out infinite;
}

@keyframes lm-ring-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50%       { transform: scale(1.12); opacity: 1; }
}

.lm-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffd700;
    text-shadow: 0 0 20px rgba(255,215,0,0.5);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.lm-perk {
    font-size: 0.95rem;
    color: #a0c4ff;
    margin-bottom: 24px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.lm-reward-wrap {
    background: rgba(255,215,0,0.08);
    border: 1px solid rgba(255,215,0,0.25);
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 24px;
}

.lm-reward-label {
    font-size: 0.78rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.lm-reward-amount {
    font-size: 2.2rem;
    font-weight: 900;
    color: #4ade80;
    text-shadow: 0 0 16px rgba(74,222,128,0.5);
    font-variant-numeric: tabular-nums;
}

.lm-claim-btn {
    width: 100%;
    padding: 14px 0;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a2e;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 20px rgba(255,215,0,0.35);
}

.lm-claim-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(255,215,0,0.5);
}

.lm-claim-btn:active {
    transform: translateY(0);
}

/* ── Lobby Challenge Widget ─────────────────────────────── */
/* ═══════════════════════════════════════════════════════
   SPRINT 27 — THE FORGE: XP SHOP + MYSTERY BOX
   ═══════════════════════════════════════════════════════ */

/* — XP Shop — */
/* — Mystery Box — */
/* — Nav btn ready pulse — */
@keyframes nav-ready-pulse { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 10px 2px rgba(74,222,128,0.5)} }

/* ═══════════════════════════════════════════════════════
   SPRINT 29 — BALANCE SPARKLINE
   ═══════════════════════════════════════════════════════ */
.balance-sparkline-wrap {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.sparkline-label {
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}
/* ═══════════════════════════════════════════════════════
   SPRINT 30 — LOGIN CALENDAR + COMMUNITY JACKPOT
   ═══════════════════════════════════════════════════════ */

/* — Community Jackpot Ticker — */
@keyframes cjt-pulse { 0%,100%{opacity:1} 50%{opacity:0.75} }
.cjt-icon { font-size: 16px; }
.cjt-label { font-size: 12px; opacity: 0.7; }
.cjt-amount { font-size: 15px; font-weight: 700; color: #f0c040; font-variant-numeric: tabular-nums; }

/* — Login Calendar Modal — */
/* ═══════════════════════════════════════════════════════
   SPRINT 31 — PROMO CODES + CASHBACK
   ═══════════════════════════════════════════════════════ */

/* — Promo Code Modal — */
.promo-modal-content { max-width: 400px; text-align: center; }
.promo-input-row {
    display: flex;
    gap: 8px;
    margin: 20px 0 12px;
}
.promo-input {
    flex: 1;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 10px 14px;
    color: #fff;
    font-size: 14px;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
    outline: none;
}
.promo-input::placeholder { color: rgba(255,255,255,0.3); text-transform: none; letter-spacing: 0; }
.promo-input:focus { border-color: rgba(240,192,64,0.6); box-shadow: 0 0 8px rgba(240,192,64,0.2); }
.promo-redeem-btn {
    background: linear-gradient(135deg, #f0c040, #d4a017);
    color: #1a1200;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.promo-redeem-btn:hover { opacity: 0.85; }
.promo-result {
    min-height: 36px;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 16px;
}
.promo-result.promo-ok {
    background: rgba(74,222,128,0.15);
    border: 1px solid rgba(74,222,128,0.4);
    color: #4ade80;
}
.promo-result.promo-err {
    background: rgba(248,113,113,0.12);
    border: 1px solid rgba(248,113,113,0.35);
    color: #f87171;
}
.promo-hint { font-size: 11px; color: rgba(255,255,255,0.35); line-height: 1.4; }

/* — Cashback Badge (lobby) — */
/* ═══════════════════════════════════════════════════════
   SPRINT 32 — SPIN HISTORY + PLAYER CARD
   ═══════════════════════════════════════════════════════ */

/* — Spin History Modal — */
.sh-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
}
.sh-filter-row { display: flex; gap: 6px; }
.sh-filter-btn {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.18s;
}
.sh-filter-btn:hover { border-color: rgba(255,255,255,0.35); color: #fff; }
.sh-filter-btn.sh-filter-active {
    background: rgba(240,192,64,0.2);
    border-color: rgba(240,192,64,0.6);
    color: #f0c040;
    font-weight: 600;
}
.sh-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 4px;
}
.sh-list::-webkit-scrollbar { width: 4px; }
.sh-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.sh-entry {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    border-left: 3px solid transparent;
    background: rgba(255,255,255,0.04);
    font-size: 12px;
}
.sh-win { border-left-color: #4ade80; background: rgba(74,222,128,0.06); }
.sh-loss { border-left-color: #f87171; background: rgba(248,113,113,0.04); }
.sh-game { color: rgba(255,255,255,0.85); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-amounts { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sh-bet { color: rgba(255,255,255,0.4); font-size: 11px; }
.sh-mult {
    background: rgba(240,192,64,0.2);
    border: 1px solid rgba(240,192,64,0.4);
    color: #f0c040;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
}
.sh-net-win { color: #4ade80; font-weight: 600; }
.sh-net-loss { color: #f87171; }
.sh-time { color: rgba(255,255,255,0.3); font-size: 10px; white-space: nowrap; }
.sh-empty { text-align: center; color: rgba(255,255,255,0.3); padding: 40px 0; font-size: 13px; }

/* — Player Stats Card Modal — */
#playerCardInner { padding: 4px 0; }
.pc-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.pc-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(124,58,237,0.4);
}
.pc-username { font-size: 18px; font-weight: 700; color: #fff; }
.pc-vip { font-size: 12px; font-weight: 600; margin-top: 2px; }
.pc-level-wrap { margin-bottom: 20px; }
.pc-level-label { font-size: 12px; color: rgba(255,255,255,0.55); margin-bottom: 6px; }
.pc-xp-bar {
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}
.pc-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
    border-radius: 4px;
    transition: width 0.6s ease;
}
.pc-xp-text { font-size: 10px; color: rgba(255,255,255,0.4); text-align: right; }
.pc-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.pc-stat {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
}
.pc-stat-val { font-size: 15px; font-weight: 700; color: #f0c040; }
.pc-stat-label { font-size: 9px; color: rgba(255,255,255,0.45); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.pc-footer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    font-size: 12px;
}
.pc-fav-label { color: rgba(255,255,255,0.4); }
.pc-fav-game { color: #a78bfa; font-weight: 600; }
/* ═══════════════════════════════════════════════════════
   SPRINT 33 — BET PRESETS + STREAK INDICATOR
   ═══════════════════════════════════════════════════════ */

.slot-quickfire-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 16px;
    background: rgba(0,0,0,0.2);
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-wrap: wrap;
}

/* — Streak Indicator — */
.streak-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}
.streak-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}
.streak-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.streak-win { background: #4ade80; box-shadow: 0 0 4px rgba(74,222,128,0.5); }
.streak-loss { background: #f87171; box-shadow: 0 0 4px rgba(248,113,113,0.4); }
.streak-label {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    font-weight: 600;
    white-space: nowrap;
}

/* — Bet Presets — */
.bet-presets {
    display: flex;
    gap: 5px;
}
.bet-preset-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 3px 11px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    transition: all 0.15s;
}
.bet-preset-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }
.bet-preset-btn.bet-preset-active {
    background: rgba(240,192,64,0.25);
    border-color: rgba(240,192,64,0.7);
    color: #f0c040;
}

/* ═══════════════════════════════════════════════════════
   SPRINT 34 — HOURLY BONUS FAB + CHALLENGE STREAK
   ═══════════════════════════════════════════════════════ */

@keyframes hbf-pulse { 0%,100%{box-shadow:0 4px 20px rgba(0,0,0,0.4)} 50%{box-shadow:0 4px 24px rgba(74,222,128,0.3)} }
.hbf-icon { font-size: 22px; }
.hbf-title { font-size: 12px; font-weight: 700; color: #fff; line-height: 1; }
.hbf-sub { font-size: 10px; color: rgba(255,255,255,0.5); margin-top: 2px; }
/* ═══════════════════════════════════════════════════════
   SPRINT 35 — FAVORITES QUICK BAR + SOUND THEME SELECT
   ═══════════════════════════════════════════════════════ */

.fqb-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s;
    min-width: 56px;
}
.fqb-tile:hover { transform: translateY(-2px); }
.fqb-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.15);
}
.fqb-name {
    font-size: 9px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    max-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fqb-empty { font-size: 11px; color: rgba(255,255,255,0.25); padding: 8px 0; }

/* Sound Theme select */
.settings-select {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 5px 10px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    outline: none;
}

/* ══════════════════════════════════════════════════════════
   Sprint 36 — Lucky Spin Mini-Game
══════════════════════════════════════════════════════════ */
.ls-status { font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 14px; }
.ls-wheel-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 16px auto;
}
.ls-pointer {
    position: absolute;
    top: -18px;
    z-index: 10;
    font-size: 26px;
    filter: drop-shadow(0 0 6px gold);
    line-height: 1;
}
.ls-wheel {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: conic-gradient(
        #ffd700 0deg 45deg,
        #3b82f6 45deg 90deg,
        #ef4444 90deg 135deg,
        #f59e0b 135deg 180deg,
        #10b981 180deg 225deg,
        #ef4444 225deg 270deg,
        #8b5cf6 270deg 315deg,
        #3b82f6 315deg 360deg
    );
    border: 5px solid rgba(255,255,255,0.25);
    box-shadow: 0 0 30px rgba(255,215,0,0.35), inset 0 0 20px rgba(0,0,0,0.4);
    position: relative;
    will-change: transform;
}
.ls-segment { display: none; } /* Colors handled by conic-gradient */
.ls-spin-btn {
    margin-top: 18px;
    background: linear-gradient(135deg, #ffd700, #f59e0b);
    color: #1a1a2e;
    border: none;
    border-radius: 24px;
    padding: 12px 32px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 16px rgba(255,215,0,0.35);
}
.ls-spin-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,215,0,0.5); }
.ls-spin-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.ls-result {
    margin-top: 14px;
    font-size: 20px;
    font-weight: 700;
    color: #ffd700;
    min-height: 28px;
    text-shadow: 0 0 12px rgba(255,215,0,0.6);
}

/* Sprint 36 — Game Rating Prompt */
/* ══════════════════════════════════════════════════════════
   Sprint 37 — Game Sort Dropdown
══════════════════════════════════════════════════════════ */
.game-sort-select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 5px 10px;
    color: rgba(255,255,255,0.75);
    font-size: 12px;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
}
.game-sort-select:hover { border-color: rgba(255,255,255,0.3); }
.game-sort-select option { background: #1a1a2e; }

/* Sprint 37 — Demo Mode Banner */
.demo-banner {
    background: linear-gradient(90deg, rgba(99,102,241,0.9), rgba(139,92,246,0.9));
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 20px;
    text-align: center;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

/* Sprint 37 — Demo End Modal */
.btn-play {
    background: linear-gradient(135deg, #ffd700, #f59e0b);
    color: #1a1a2e;
    font-weight: 700;
    border-radius: 24px;
    padding: 12px 28px;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 16px rgba(255,215,0,0.3);
}
.btn-play:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,215,0,0.5); }

/* ══════════════════════════════════════════════════════════
   Sprint 38 — Win Replay Gallery
══════════════════════════════════════════════════════════ */
.wr-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.wr-entry {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.wr-game { flex: 1; font-size: 13px; color: rgba(255,255,255,0.75); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-win { font-size: 15px; font-weight: 700; color: #ffd700; white-space: nowrap; }
.wr-mult { font-size: 11px; color: rgba(255,215,0,0.65); margin-left: 3px; }
.wr-time { font-size: 11px; color: rgba(255,255,255,0.35); white-space: nowrap; }
.wr-empty { font-size: 13px; color: rgba(255,255,255,0.3); text-align: center; padding: 32px 0; }

/* Sprint 38 — Session Timer */
@keyframes timer-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.65; }
}
.settings-select:focus { border-color: rgba(240,192,64,0.5); }

/* ===== Sprint 39: Bet Doubler / Halver ===== */
.bet-x2-btn, .bet-half-btn { font-size: 12px; font-weight: 800; letter-spacing: 0; padding: 0 8px; min-width: 36px; color: var(--rg-gold, #f0c040) !important; border-color: rgba(240,192,64,0.4) !important; }
.bet-x2-btn:hover, .bet-half-btn:hover { background: rgba(240,192,64,0.15) !important; }

/* ===== Sprint 39: Provider Stats Panel ===== */
.provider-stat-row { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 6px 10px; cursor: pointer; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.85); font-size: 12px; transition: background 0.2s; }
.provider-stat-row:hover { background: rgba(255,255,255,0.1); }
.psr-name { font-weight: 700; color: #fff; }
.psr-count { color: rgba(255,255,255,0.5); }
.psr-rtp { color: var(--rg-gold, #f0c040); }

/* ===== Sprint 40: Compare Toggle ===== */
/* ===== Sprint 40: Compare Bar ===== */
.compare-pill { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; padding: 4px 10px; font-size: 12px; color: #fff; display: flex; align-items: center; gap: 6px; }
.compare-pill button { background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer; padding: 0; font-size: 14px; line-height: 1; }
.compare-pill button:hover { color: #ef4444; }
.btn-compare-now { background: var(--rg-gold, #f0c040); color: #000; border: none; border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.btn-compare-now:disabled { opacity: 0.4; cursor: not-allowed; }
/* ===== Sprint 40: Bankroll Bar ===== */
.slot-budget-btn { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: rgba(255,255,255,0.75); font-size: 11px; padding: 4px 8px; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.slot-budget-btn:hover { background: rgba(255,255,255,0.13); }
.bankroll-bar-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: rgba(0,0,0,0.2); border-radius: 0 0 4px 4px; width: 100%; }
.bankroll-bar-wrap { flex: 1; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.bankroll-bar { height: 100%; border-radius: 3px; background: #22c55e; transition: width 0.4s ease, background 0.3s; }
.bankroll-bar.bk-yellow { background: #f59e0b; }
.bankroll-bar.bk-orange { background: #f97316; }
.bankroll-bar.bk-red { background: #ef4444; }
.bankroll-bar-label { font-size: 10px; color: rgba(255,255,255,0.5); white-space: nowrap; }
.bankroll-dismiss { background: none; border: none; color: rgba(255,255,255,0.3); cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; }
.bankroll-dismiss:hover { color: rgba(255,255,255,0.7); }

/* ===== Sprint 40: Compare Modal ===== */
.compare-content { max-width: 700px; }
.compare-table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.compare-table th { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.8); padding: 8px 12px; text-align: center; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.1); }
.compare-table td { padding: 8px 12px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.75); }
.compare-stat-label { text-align: left !important; font-weight: 600; color: rgba(255,255,255,0.5) !important; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.compare-val.compare-best { color: #22c55e !important; font-weight: 700; }

/* ===== Sprint 41: Quick Switch Strip ===== */
.quick-switch-strip { background: rgba(0,0,0,0.3); border-bottom: 1px solid rgba(255,255,255,0.06); padding: 6px 12px; overflow-x: auto; scrollbar-width: none; }
.quick-switch-strip::-webkit-scrollbar { display: none; }
.quick-switch-pills { display: flex; gap: 8px; min-width: max-content; }
.quick-switch-pill { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 4px 12px; cursor: pointer; color: rgba(255,255,255,0.75); font-size: 12px; transition: all 0.2s; white-space: nowrap; }
.quick-switch-pill:hover { background: rgba(255,255,255,0.12); }
.quick-switch-pill.qs-active { background: rgba(240,192,64,0.2); border-color: rgba(240,192,64,0.4); color: #f0c040; }
.qs-emoji { font-size: 16px; line-height: 1; }
.qs-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; }

/* ===== Sprint 41: Avatar Picker ===== */
.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 4px; }
.avatar-option { background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 12px 8px; font-size: 28px; cursor: pointer; transition: all 0.2s; text-align: center; }
.avatar-option:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); transform: scale(1.08); }
.avatar-option.av-selected { background: rgba(240,192,64,0.2); border-color: #f0c040; box-shadow: 0 0 10px rgba(240,192,64,0.3); }

/* ===== Sprint 42: Win Goal ===== */
.slot-goal-btn { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: rgba(255,255,255,0.75); font-size: 11px; padding: 4px 8px; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.slot-goal-btn:hover { background: rgba(255,255,255,0.13); }
.win-goal-tracker { margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.wgt-label { font-size: 10px; color: rgba(255,255,255,0.5); white-space: nowrap; }
.wgt-progress-wrap { flex: 1; height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; min-width: 40px; }
.wgt-progress-bar { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #3b82f6, #22c55e); transition: width 0.5s ease; }
.wgt-pct { font-size: 10px; color: rgba(255,255,255,0.55); min-width: 28px; }
.wgt-dismiss { background: none; border: none; color: rgba(255,255,255,0.3); cursor: pointer; font-size: 12px; padding: 0; line-height: 1; }
.wgt-dismiss:hover { color: rgba(255,255,255,0.7); }
.win-goal-tracker.wgt-complete .wgt-progress-bar { background: linear-gradient(90deg, #22c55e, #f0c040); }
.win-goal-tracker.wgt-complete .wgt-pct { color: #22c55e; font-weight: 700; }
.game-card.compare-selected { outline: 2px solid rgba(240,192,64,0.7); outline-offset: -2px; }

/* ===== Sprint 43: Keyboard Shortcuts Modal ===== */
.btn-shortcuts { width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: 14px; font-weight: 700; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.btn-shortcuts:hover { background: rgba(255,255,255,0.15); color: #fff; }
.shortcuts-content { background: linear-gradient(135deg, #12121f 0%, #1c1c2e 100%); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 28px; max-width: 380px; width: 90%; }
.shortcuts-grid { display: flex; flex-direction: column; gap: 10px; }
.sc-row { display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,0.04); }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 28px; padding: 0 8px; border-radius: 6px; background: rgba(240,192,64,0.15); border: 1px solid rgba(240,192,64,0.35); color: #f0c040; font-size: 12px; font-weight: 700; font-family: monospace; }
.sc-row span { color: rgba(255,255,255,0.8); font-size: 14px; }

/* ===== Sprint 43: Recommendations Section ===== */
.section-recommendations { margin: 0 0 18px; }
.section-recommendations .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.section-recommendations h3 { font-size: 15px; font-weight: 700; color: #f0c040; margin: 0; }
.rec-toggle-btn { font-size: 11px; background: none; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; color: rgba(255,255,255,0.5); padding: 3px 8px; cursor: pointer; }
.rec-toggle-btn:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }

/* ===== Sprint 44: Collection Tabs ===== */
.collection-tab { padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.65); font-size: 12px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.collection-tab:hover { background: rgba(255,255,255,0.1); color: #fff; }
.collection-tab.collection-tab-active { background: rgba(240,192,64,0.18); border-color: rgba(240,192,64,0.45); color: #f0c040; font-weight: 600; }

/* ===== Sprint 44: P&L Sparkline ===== */
.pnl-sparkline { vertical-align: middle; opacity: 0.85; flex-shrink: 0; }

/* ===== Sprint 45: Recent Wins Feed ===== */
/* ===== Sprint 45: Layout Toggle ===== */
.layout-toggle { display: flex; gap: 4px; }
.layout-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: all 0.15s; }
.layout-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.layout-btn.layout-btn-active { background: rgba(240,192,64,0.15); border-color: rgba(240,192,64,0.4); color: #f0c040; }
.games-list-view { display: flex; flex-direction: column; gap: 6px; }
.game-list-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; cursor: pointer; transition: background 0.15s; }
.game-list-row:hover { background: rgba(255,255,255,0.08); }
.glr-name { font-size: 14px; font-weight: 600; color: #fff; flex: 1; }
.glr-provider { font-size: 11px; color: rgba(255,255,255,0.45); min-width: 80px; }
.glr-rtp { font-size: 11px; color: rgba(255,255,255,0.45); min-width: 60px; }
.glr-play { padding: 5px 14px; border-radius: 6px; background: rgba(240,192,64,0.15); border: 1px solid rgba(240,192,64,0.35); color: #f0c040; font-size: 12px; font-weight: 600; cursor: pointer; }
.glr-play:hover { background: rgba(240,192,64,0.25); }

/* ===== Sprint 46: Tag Filter Pills ===== */
.tag-pill { padding: 5px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.6); font-size: 11px; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.tag-pill:hover { background: rgba(255,255,255,0.09); color: #fff; }
.tag-pill.tag-pill-active { background: rgba(147,51,234,0.2); border-color: rgba(147,51,234,0.5); color: #c084fc; font-weight: 600; }

/* ===== Sprint 46: Win Streak Badge ===== */
.win-streak-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 20px; background: linear-gradient(135deg, rgba(251,146,60,0.2), rgba(239,68,68,0.2)); border: 1px solid rgba(251,146,60,0.4); color: #fb923c; font-size: 13px; font-weight: 700; margin: 0 auto 8px; }
@keyframes streak-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.streak-pulse { animation: streak-pulse 0.4s ease; }

/* ===== Sprint 47: Ambient Toggle Button ===== */
.slot-ambient-btn { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: rgba(255,255,255,0.5); cursor: pointer; font-size: 15px; padding: 6px 8px; transition: all 0.2s; }
.slot-ambient-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.slot-ambient-btn.ambient-active { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.4); color: #60a5fa; }

/* ===== Sprint 47: Quick Stats Tooltip ===== */
.quick-stats-tooltip { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); background: rgba(15,15,25,0.96); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 10px 14px; min-width: 200px; z-index: 120; font-size: 12px; color: rgba(255,255,255,0.8); box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.qst-row { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.qst-row span:last-child { color: #fff; font-weight: 600; }

/* ===== Sprint 48: Spin Counter Badge ===== */
.spin-counter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 4px 8px; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.55); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background 0.2s, color 0.2s; }
@keyframes spin-milestone-flash { 0% { background: rgba(251,191,36,0.1); color: #fbbf24; transform: scale(1); } 50% { background: rgba(251,191,36,0.3); color: #fde68a; transform: scale(1.15); } 100% { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55); transform: scale(1); } }
.spin-milestone { animation: spin-milestone-flash 1s ease forwards; }

/* ===== Sprint 48: Provider Leaderboard ===== */
.plb-title { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.7); margin-bottom: 8px; }
.plb-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.plb-row:last-child { border-bottom: none; }
.plb-medal { font-size: 16px; width: 22px; }
.plb-name { flex: 1; font-size: 13px; color: rgba(255,255,255,0.8); }
.plb-count { font-size: 11px; color: rgba(255,255,255,0.4); }

/* ===== Sprint 49: Random Game Picker ===== */
@keyframes dice-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* ===== Sprint 49: Session P&L Bar ===== */
.pnl-positive { color: #22c55e; font-weight: 700; }
.pnl-negative { color: #ef4444; font-weight: 700; }

/* ===== Sprint 50: Games Explored Badge ===== */
.games-explored-badge { font-size: 11px; color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 3px 9px; margin-left: 4px; white-space: nowrap; }

/* ===== Sprint 50: Last Win Preview ===== */
.last-win-preview { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 6px 12px; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); border-radius: 8px; margin: 6px 12px; font-size: 12px; color: rgba(255,255,255,0.7); }
.lwp-label { color: rgba(34,197,94,0.8); font-weight: 600; }
.lwp-symbols { color: #fff; font-weight: 700; letter-spacing: 0.05em; }

/* ===== Sprint 51: Bet Indicator ===== */
.bet-indicator { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 5px; text-transform: uppercase; }
.bet-min  { background: rgba(34,197,94,0.15);  color: #4ade80; border: 1px solid rgba(34,197,94,0.25); }
.bet-low  { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.25); }
.bet-med  { background: rgba(250,204,21,0.12); color: #fbbf24; border: 1px solid rgba(250,204,21,0.25); }
.bet-high { background: rgba(249,115,22,0.15); color: #fb923c; border: 1px solid rgba(249,115,22,0.25); }
.bet-max  { background: rgba(239,68,68,0.15);  color: #f87171; border: 1px solid rgba(239,68,68,0.25); }

/* ===== Sprint 74: Bet Tier Badge ===== */
.bet-tier-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 8px; font-size: 11px; font-weight: 900;
    letter-spacing: 0.08em; text-transform: uppercase;
    transition: all 0.35s cubic-bezier(.34,1.56,.64,1);
    white-space: nowrap; cursor: default; user-select: none;
}
.bt-emoji { font-size: 13px; line-height: 1; }
.bt-label { line-height: 1; }

/* Bronze */
.bt-bronze {
    background: linear-gradient(135deg, rgba(180,120,60,0.2), rgba(160,100,40,0.12));
    color: #cd8032; border: 1px solid rgba(180,120,60,0.3);
}
/* Silver */
.bt-silver {
    background: linear-gradient(135deg, rgba(192,192,210,0.18), rgba(160,170,190,0.12));
    color: #b0c0d0; border: 1px solid rgba(192,192,210,0.3);
}
/* Gold */
.bt-gold {
    background: linear-gradient(135deg, rgba(255,200,50,0.22), rgba(220,170,30,0.12));
    color: #f5c842; border: 1px solid rgba(255,200,50,0.35);
    box-shadow: 0 0 8px rgba(255,200,50,0.15);
}
/* Platinum */
.bt-platinum {
    background: linear-gradient(135deg, rgba(180,220,255,0.2), rgba(140,180,240,0.12));
    color: #a8d8ff; border: 1px solid rgba(180,220,255,0.35);
    box-shadow: 0 0 10px rgba(140,180,240,0.2);
}
/* Diamond */
.bt-diamond {
    background: linear-gradient(135deg, rgba(100,220,255,0.25), rgba(180,120,255,0.15));
    color: #80e8ff; border: 1px solid rgba(100,220,255,0.5);
    box-shadow: 0 0 14px rgba(100,220,255,0.3), inset 0 0 10px rgba(180,120,255,0.08);
    animation: bt-diamond-glow 2s ease-in-out infinite alternate;
}
@keyframes bt-diamond-glow {
    0%   { box-shadow: 0 0 14px rgba(100,220,255,0.3), inset 0 0 10px rgba(180,120,255,0.08); }
    100% { box-shadow: 0 0 22px rgba(100,220,255,0.5), inset 0 0 14px rgba(180,120,255,0.15); }
}
/* Pop animation on tier change */
.bt-pop {
    animation: bt-pop-anim 0.45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bt-pop-anim {
    0%   { transform: scale(0.6); opacity: 0.5; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ===== Sprint 75: Streak Bonus Toast ===== */
.streak-bonus-toast {
    position: fixed; top: 50%; left: 50%; z-index: 31000;
    transform: translate(-50%, -50%) scale(0.5); opacity: 0;
    background: linear-gradient(160deg, #1a0a00, #2d1200);
    border: 2px solid rgba(255,140,0,0.7); border-radius: 16px;
    padding: 20px 32px; text-align: center;
    box-shadow: 0 0 50px rgba(255,100,0,0.4), inset 0 0 20px rgba(255,140,0,0.05);
    transition: all 0.5s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
}
.streak-bonus-toast.active {
    transform: translate(-50%, -50%) scale(1); opacity: 1;
}
.sbt-icon { font-size: 2.5rem; margin-bottom: 4px; animation: sbt-flame 0.8s ease-in-out infinite alternate; }
@keyframes sbt-flame {
    0%   { transform: scale(1) rotate(-3deg); }
    100% { transform: scale(1.15) rotate(3deg); }
}
.sbt-label {
    color: #ff8c00; font-size: 14px; font-weight: 900; letter-spacing: 1.5px;
    text-transform: uppercase; margin-bottom: 6px; text-shadow: 0 0 10px rgba(255,140,0,0.5);
}
.sbt-amount {
    color: #ffd700; font-size: 24px; font-weight: 900; letter-spacing: 1px;
    text-shadow: 0 0 15px rgba(255,215,0,0.5), 0 2px 4px rgba(0,0,0,0.5);
    animation: sbt-pulse 1s ease-in-out infinite alternate;
}
@keyframes sbt-pulse {
    0%   { transform: scale(1); }
    100% { transform: scale(1.05); text-shadow: 0 0 20px rgba(255,215,0,0.7), 0 2px 6px rgba(0,0,0,0.5); }
}

/* ===== Sprint 52: Volatility Meter ===== */
.vm-meter { display: flex; align-items: center; gap: 2px; }
.vm-seg { display: inline-block; width: 7px; height: 10px; border-radius: 2px; background: rgba(255,255,255,0.12); transition: background 0.3s; }
.vm-seg.vm-filled.vm-lv1 { background: #4ade80; }
.vm-seg.vm-filled.vm-lv2 { background: #a3e635; }
.vm-seg.vm-filled.vm-lv3 { background: #fbbf24; }
.vm-seg.vm-filled.vm-lv4 { background: #fb923c; }
.vm-seg.vm-filled.vm-lv5 { background: #f87171; }

/* ===== Sprint 52: Session Timer ===== */
.st-timer { font-size: 11px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.04); border-radius: 5px; padding: 2px 6px; }

/* ===== Sprint 53: Hot/Cold Badge ===== */
.hc-badge { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.hc-hot  { background: rgba(251,146,60,0.2);  color: #fb923c; border: 1px solid rgba(251,146,60,0.35); }
.hc-cold { background: rgba(147,197,253,0.12); color: #93c5fd; border: 1px solid rgba(147,197,253,0.25); }

/* ===== Sprint 53: Lucky Symbol Tracker ===== */
.ls-tracker { font-size: 11px; color: rgba(255,255,255,0.55); display: flex; align-items: center; gap: 4px; }
.ls-tracker #lsSymbol { font-weight: 700; color: #fde68a; text-transform: capitalize; }

/* ===== Sprint 54: Auto-Play Progress Bar ===== */
.ap-progress { position: relative; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; min-width: 50px; }
.ap-progress::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: var(--ap-pct, 0%); background: linear-gradient(90deg, #00e5ff, #7c3aed); border-radius: 2px; transition: width 0.4s ease; }

/* ===== Sprint 55: Quick Volume Slider ===== */
.qv-slider { -webkit-appearance: none; appearance: none; width: 60px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.15); outline: none; cursor: pointer; }
.qv-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; background: #00e5ff; cursor: pointer; }

/* ===== Sprint 55: Bet History Chart ===== */
.bh-chart { opacity: 0.75; transition: opacity 0.2s; }
.bh-chart:hover { opacity: 1; }

/* ===== Sprint 56: Win Rate Display ===== */
.wr-display { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 5px; }
.wr-good { color: #4ade80; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.2); }
.wr-low  { color: #f87171; background: rgba(239,68,68,0.1);  border: 1px solid rgba(239,68,68,0.2); }

/* ===== Sprint 57: Game Switcher Nav Buttons ===== */
.gs-nav-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: rgba(255,255,255,0.6); cursor: pointer; font-size: 16px; padding: 2px 7px; line-height: 1; transition: all 0.15s; }
.gs-nav-btn:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.25); }

/* ===== Sprint 57: Average Bet Display ===== */
.ab-display { font-size: 11px; color: rgba(255,255,255,0.45); white-space: nowrap; }

/* ===== Sprint 58: Keyboard Hints Bar ===== */
.kb-hints { font-size: 11px; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 12px; background: rgba(0,0,0,0.25); border-bottom: 1px solid rgba(255,255,255,0.06); }
.kb-hints kbd { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; font-family: inherit; font-size: 10px; padding: 1px 5px; color: rgba(255,255,255,0.7); }
.kb-hints.kb-visible { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ===== Sprint 51/54/56: Lobby Card Badges ===== */
.lb51-badge { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.lb51-regular { background: rgba(148,163,184,0.12); color: rgba(255,255,255,0.45); border: 1px solid rgba(148,163,184,0.15); }
.lb51-fan  { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.25); }
.lb51-mega { background: rgba(250,204,21,0.15); color: #fbbf24; border: 1px solid rgba(250,204,21,0.3); }
.lb54-badge { font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 4px; border: 1px solid transparent; }
.lb54-easy    { background: rgba(34,197,94,0.12);  color: #4ade80; border-color: rgba(34,197,94,0.2); }
.lb54-med     { background: rgba(250,204,21,0.10); color: #fbbf24; border-color: rgba(250,204,21,0.2); }
.lb54-medhard { background: rgba(249,115,22,0.12); color: #fb923c; border-color: rgba(249,115,22,0.2); }
.lb54-hard    { background: rgba(239,68,68,0.12);  color: #f87171; border-color: rgba(239,68,68,0.2); }
.lb54-expert  { background: rgba(168,85,247,0.15); color: #c084fc; border-color: rgba(168,85,247,0.25); }
.lb56-badge { font-size: 9px; color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 4px; text-transform: capitalize; }

/* ═══════════════════════════════════════════════════════
   SPRINT 59-66: ADVANCED HUD ELEMENTS
   ═══════════════════════════════════════════════════════ */

/* Sprint 59 — Session Net Display */
.slot-net-display { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; letter-spacing: 0.02em; }
.snd-up   { color: #4ade80; background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.25); }
.snd-down { color: #f87171; background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.25); }

/* Sprint 60 — Quick Bet Presets */
.quick-bet-presets { display: flex; gap: 4px; margin-top: 4px; }
.quick-bet-presets button {
  flex: 1; padding: 3px 0; font-size: 10px; font-weight: 700; border-radius: 5px; cursor: pointer;
  background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.15); transition: background 0.15s, color 0.15s;
}
.quick-bet-presets button:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* Sprint 61 — Feature Trigger Counter */
.feature-count-badge {
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px;
  background: rgba(168,85,247,0.15); color: #c084fc; border: 1px solid rgba(168,85,247,0.3);
}

/* Sprint 62 — Max Win Seen */
.max-win-seen {
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px;
  background: rgba(250,204,21,0.12); color: #fbbf24; border: 1px solid rgba(250,204,21,0.25);
}

/* Sprint 63 — Loss Streak Badge */
.loss-streak-badge {
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px;
  background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3);
  animation: loss-streak-pulse 1s ease-in-out infinite alternate;
}
@keyframes loss-streak-pulse {
  from { opacity: 0.75; } to { opacity: 1; }
}

/* Sprint 64 — RTP Gauge */
.rtp-gauge {
  position: relative; height: 14px; border-radius: 7px;
  background: rgba(255,255,255,0.08); overflow: hidden;
  display: flex; align-items: center; padding: 0 6px;
}
.rtp-gauge::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--rtp-pct, 96%); border-radius: 7px;
  background: linear-gradient(90deg, rgba(74,222,128,0.5), rgba(34,197,94,0.7));
  transition: width 0.4s ease;
}
#rtpGaugeLabel {
  position: relative; z-index: 1; font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,0.9); text-shadow: 0 0 4px rgba(0,0,0,0.5);
}

/* Sprint 65 — Balance Sparkline */
.balance-sparkline {
  width: 120px; height: 30px; overflow: visible;
  background: rgba(255,255,255,0.04); border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.08);
}
#bsLine { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Sprint 66 — Cashout Hint */
.cashout-hint {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 8px;
  background: rgba(74,222,128,0.15); color: #4ade80;
  border: 1px solid rgba(74,222,128,0.3); text-align: center;
  animation: cashout-glow 1.5s ease-in-out infinite alternate;
}
@keyframes cashout-glow {
  from { box-shadow: 0 0 4px rgba(74,222,128,0.2); }
  to   { box-shadow: 0 0 12px rgba(74,222,128,0.5); }
}

/* ═══════════════════════════════════════════════════════
   SPRINT 67-74: HUD ENHANCEMENTS BATCH 3
   ═══════════════════════════════════════════════════════ */

/* Sprint 67 — Spin Counter */
.spin-counter {
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px;
  background: rgba(99,102,241,0.12); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.25);
}

/* Sprint 68 — Recent Outcomes */
.recent-outcomes { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.ro-dot { font-size: 9px; }
.ro-win  { color: #4ade80; }
.ro-loss { color: #f87171; }

/* Sprint 69 — Session Hi-Lo */
.session-hilo {
  font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 6px;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Sprint 70 — Balance Buffer */
.balance-buffer {
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px;
  background: rgba(14,165,233,0.1); color: #38bdf8; border: 1px solid rgba(14,165,233,0.2);
}

/* Sprint 71 — Symbol Heatmap */
.symbol-heat { display: flex; gap: 3px; flex-wrap: wrap; }
.sh-badge {
  font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 5px; text-transform: capitalize;
  background: rgba(245,158,11,0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,0.2);
}

/* Sprint 72 — Loss Recovery */
.loss-recovery {
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px;
  background: rgba(74,222,128,0.1); color: #4ade80; border: 1px solid rgba(74,222,128,0.2);
}

/* Sprint 73 — Scatter Alert */
.scatter-alert {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
  background: rgba(251,191,36,0.18); color: #fbbf24; border: 1px solid rgba(251,191,36,0.35);
  animation: scatter-flash 0.4s ease-in-out 3;
}
@keyframes scatter-flash {
  0%,100% { opacity:1; } 50% { opacity:0.4; }
}

/* Sprint 74 — Session Close Summary */
.session-summary {
  position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: rgba(15,23,42,0.95); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 10px 16px; min-width: 180px; z-index: 200;
  backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.ss-title {
  font-size: 12px; font-weight: 700; color: #e2e8f0; margin-bottom: 6px; text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 4px;
}
.ss-row {
  font-size: 11px; color: rgba(255,255,255,0.7); padding: 2px 0;
}

/* ============================================================
   Sprint 75-82: Slot HUD & Lobby Features
   ============================================================ */

/* Sprint 75 — Bet Lock Toggle */
.bet-lock-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px 8px;
    transition: background 0.2s, border-color 0.2s;
    line-height: 1;
}
.bet-lock-btn:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.4);
}
.bet-locked #betRange {
    opacity: 0.4;
    pointer-events: none;
}

/* Sprint 76 — Quick Stats Panel */
.quick-stats-panel {
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
    font-size: 0.72rem;
    margin-top: 6px;
    padding: 6px 10px;
    line-height: 1.7;
}
.quick-stats-panel .qs-row {
    white-space: nowrap;
}

/* Sprint 77 — Win Balance Pulse */
@keyframes bal-win-pulse {
    0%   { transform: scale(1);    filter: brightness(1); }
    30%  { transform: scale(1.18); filter: brightness(1.6) drop-shadow(0 0 8px #ffe066); }
    70%  { transform: scale(1.05); filter: brightness(1.2); }
    100% { transform: scale(1);    filter: brightness(1); }
}
.bal-win-pulse {
    animation: bal-win-pulse 0.6s ease-out;
}

/* Sprint 78 — Free Spins Remaining Badge */
.fs-remaining-badge {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-radius: 20px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(168,85,247,0.45);
}

/* Sprint 79 — Profit Target Tracker */
.profit-target {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(74,222,128,0.35);
    border-radius: 8px;
    color: rgba(255,255,255,0.75);
    font-size: 0.72rem;
    margin-top: 4px;
    padding: 5px 10px;
    white-space: nowrap;
}
.pt-reached {
    color: #4ade80;
    font-weight: 700;
}

/* Sprint 80 — Bet Step Indicator */
.bet-steps {
    background: rgba(255,255,255,0.07);
    border-radius: 5px;
    color: rgba(255,255,255,0.55);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    padding: 3px 7px;
    white-space: nowrap;
}

/* Sprint 81 — Ambient Toggle Button (slot HUD) */
.ambient-toggle-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-size: 1.05rem;
    padding: 4px 8px;
    transition: background 0.2s, border-color 0.2s;
    line-height: 1;
}
.ambient-toggle-btn:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.4);
}

/* Sprint 82 — Fullscreen Toggle Button (slot HUD) */
.fs-toggle-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-size: 1.05rem;
    padding: 4px 8px;
    transition: background 0.2s, border-color 0.2s;
    line-height: 1;
}
.fs-toggle-btn:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.4);
}


/* ═══════════════════════════════════════════════════════
   SPRINT 83-90 STYLES
   ═══════════════════════════════════════════════════════ */

/* Sprint 84: Session RTP display */
.session-rtp-display {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    color: #aaa;
    letter-spacing: 0.5px;
    align-self: center;
}
.session-rtp-display.rtp-great { color: #00ff88; background: rgba(0,255,136,0.12); }
.session-rtp-display.rtp-ok    { color: #ffcc00; background: rgba(255,204,0,0.12); }
.session-rtp-display.rtp-low   { color: #ff4444; background: rgba(255,68,68,0.12); }

/* Sprint 85: Scatter collect counter */
.scatter-collect {
    font-size: 11px;
    color: #ff9f43;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(255,159,67,0.15);
    font-weight: 600;
}

/* Sprint 86: Auto-stop-on-win button */
.auto-stop-win-btn {
    background: rgba(255,68,68,0.15);
    border: 1px solid rgba(255,68,68,0.3);
    color: #ff6b6b;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.auto-stop-win-btn:hover {
    background: rgba(255,68,68,0.3);
    color: #fff;
}

/* Sprint 87: Spin rate display */
.spin-rate-display {
    font-size: 10px;
    color: #888;
    padding: 2px 6px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Sprint 88: Power meter */
.power-meter {
    width: 60px;
    height: 7px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.pm-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #3498db, #9b59b6);
    border-radius: 4px;
    transition: width 0.3s ease;
}
.pm-fill.pm-charged {
    background: linear-gradient(90deg, #f39c12, #e74c3c);
    animation: pm-pulse 0.6s ease infinite alternate;
}
@keyframes pm-pulse {
    from { opacity: 0.7; }
    to   { opacity: 1; box-shadow: 0 0 6px rgba(231,76,60,0.8); }
}

/* Sprint 89: Game feature tag chips */
.game-tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 2px 0;
}
.gtc-chip {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    color: #ccc;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Sprint 90: Mini payout log */
.payout-log {
    max-height: 96px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 6px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
    width: 100%;
    box-sizing: border-box;
}
.payout-log::-webkit-scrollbar { width: 3px; }
.payout-log::-webkit-scrollbar-track { background: transparent; }
.payout-log::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.pl-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    padding: 1px 2px;
    color: #aaa;
    animation: pl-fade-in 0.3s ease;
}
.pl-entry.pl-big { color: #ffd700; font-weight: 700; }
.pl-mult { color: #888; font-size: 9px; }
.pl-amt  { font-variant-numeric: tabular-nums; }
@keyframes pl-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════
   SPRINT 91-98 STYLES
   ═══════════════════════════════════════════════════════ */

/* Sprint 91: Session clock */
.session-clock {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: #888;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    letter-spacing: 0.5px;
    align-self: center;
}

/* Sprint 92: Mega win badge */
.mega-win-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,215,0,0.25), rgba(255,140,0,0.25));
    color: #ffd700;
    border: 1px solid rgba(255,215,0,0.3);
}

/* Sprint 93: Near-miss counter */
.near-miss-count {
    font-size: 10px;
    color: #ff9f43;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(255,159,67,0.1);
    font-weight: 600;
}

/* Sprint 94: Balance alert */
.bal-alert-display {
    font-size: 11px;
    font-weight: 700;
    color: #ff4444;
    padding: 3px 10px;
    border-radius: 8px;
    background: rgba(255,68,68,0.15);
    border: 1px solid rgba(255,68,68,0.4);
}
@keyframes bal-alert-flash-anim {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.bal-alert-flash { animation: bal-alert-flash-anim 0.5s ease 2; }

/* Sprint 95: Cascade depth tracker */
.cascade-depth {
    font-size: 10px;
    color: #a29bfe;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(162,155,254,0.1);
    font-weight: 600;
}

/* Sprint 96: Autoplay countdown */
.autoplay-countdown {
    font-size: 11px;
    color: #74b9ff;
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(116,185,255,0.1);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Sprint 97: Session XP earned */
.session-xp-earned {
    font-size: 10px;
    color: #fdcb6e;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(253,203,110,0.1);
    font-weight: 600;
}

/* Sprint 98: Hot symbol */
.hot-symbol {
    font-size: 10px;
    color: #ff7675;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(255,118,117,0.1);
    font-weight: 600;
    text-transform: capitalize;
}


/* ═══════════════════════════════════════════════════════
   SPRINT 99-106 STYLES
   ═══════════════════════════════════════════════════════ */

/* Sprint 99: Bonus trigger rate */
.bonus-trigger-rate {
    font-size: 10px;
    color: #a29bfe;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(162,155,254,0.1);
    font-weight: 600;
}

/* Sprint 100: Max multiplier badge */
.max-mult-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0,212,170,0.2), rgba(0,184,148,0.2));
    color: #00d2aa;
    border: 1px solid rgba(0,212,170,0.3);
}

/* Sprint 101: Win frequency badge */
.win-freq-badge {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 8px;
    font-weight: 600;
}
.win-freq-badge.wf-high { color: #00ff88; background: rgba(0,255,136,0.1); }
.win-freq-badge.wf-mid  { color: #ffcc00; background: rgba(255,204,0,0.1); }
.win-freq-badge.wf-low  { color: #ff7675; background: rgba(255,118,117,0.1); }

/* Sprint 102: Dead spin counter */
.dead-spin-counter {
    font-size: 10px;
    color: #636e72;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(99,110,114,0.1);
    font-weight: 600;
}

/* Sprint 103: Turbo mode badge */
.turbo-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(253,203,110,0.25), rgba(253,121,168,0.25));
    color: #fdcb6e;
    border: 1px solid rgba(253,203,110,0.3);
    letter-spacing: 1px;
    animation: turbo-glow 1s ease-in-out infinite alternate;
}
@keyframes turbo-glow {
    from { box-shadow: none; }
    to   { box-shadow: 0 0 8px rgba(253,203,110,0.5); }
}

/* Sprint 104: FS run summary */
.fs-run-summary {
    font-size: 10px;
    color: #74b9ff;
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(116,185,255,0.1);
    font-weight: 600;
}

/* Sprint 105: Next level XP bar */
.next-level-xp-bar {
    width: 100%;
    position: relative;
    height: 14px;
    background: rgba(255,255,255,0.06);
    border-radius: 7px;
    overflow: hidden;
    box-sizing: border-box;
}
.xp-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6c5ce7, #a29bfe);
    border-radius: 7px;
    transition: width 0.4s ease;
}
.xp-bar-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: rgba(255,255,255,0.8);
    font-weight: 600;
    pointer-events: none;
}

/* Sprint 106: Game play count */
.game-play-count {
    font-size: 10px;
    color: #b2bec3;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(178,190,195,0.08);
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════
   SPRINT 107-114 STYLES
   ═══════════════════════════════════════════════════════ */

/* Sprint 107: Last spin result badge */
.last-spin-result {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
    transition: opacity 0.4s;
}
.lsr-win  { color: #00ff88; background: rgba(0,255,136,0.12); border: 1px solid rgba(0,255,136,0.2); }
.lsr-loss { color: #ff7675; background: rgba(255,118,117,0.1); border: 1px solid rgba(255,118,117,0.2); }

/* Sprint 109: Provider badge */
.provider-badge {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #636e72;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}

/* Sprint 110: Spin recommendation */
.spin-rec {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 8px;
    text-align: center;
}
.rec-hot  { color: #ff7675; background: rgba(255,118,117,0.12); }
.rec-cool { color: #74b9ff; background: rgba(116,185,255,0.12); }
.rec-stop { color: #ffeaa7; background: rgba(255,234,167,0.12); border: 1px solid rgba(255,234,167,0.2); }

/* Sprint 112: Jackpot progress bar */
.jackpot-progress {
    width: 70px;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}
.jp-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #fdcb6e, #e17055);
    border-radius: 3px;
    transition: width 0.3s ease;
}
@keyframes jp-flash-anim {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.jp-flash { animation: jp-flash-anim 0.2s ease 4; }

/* Sprint 113: Auto-spin speed badge */
.auto-speed-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 8px;
    color: #55efc4;
    background: rgba(85,239,196,0.1);
    border: 1px solid rgba(85,239,196,0.2);
}

/* Sprint 114: Profit % badge */
.profit-pct-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
}
.ppb-up   { color: #00ff88; background: rgba(0,255,136,0.12); }
.ppb-down { color: #ff7675; background: rgba(255,118,117,0.12); }

/* Sprint 108: Total FS earned */
.total-fs-earned {
    font-size: 10px;
    color: #fdcb6e;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(253,203,110,0.1);
    font-weight: 600;
}

/* Sprint 111: Total bet display */
.total-bet-display {
    font-size: 10px;
    color: #b2bec3;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(178,190,195,0.06);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════
   SPRINT 115-122 STYLES
   ═══════════════════════════════════════════════════════ */

/* Sprint 115: Scatter progress dots */
.scatter-progress {
    display: flex;
    gap: 3px;
    align-items: center;
    padding: 2px;
}
.sp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    transition: background 0.2s, box-shadow 0.2s;
}
.sp-dot.sp-active {
    background: #ff9f43;
    border-color: #ff9f43;
    box-shadow: 0 0 6px rgba(255,159,67,0.6);
}

/* Sprint 116: Win type breakdown */
.win-breakdown {
    font-size: 9px;
    color: #b2bec3;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(178,190,195,0.06);
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Sprint 117: Feature active display */
.feature-active-display {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(108,92,231,0.25), rgba(162,155,254,0.25));
    color: #a29bfe;
    border: 1px solid rgba(162,155,254,0.3);
    animation: feat-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes feat-pulse {
    from { opacity: 0.8; }
    to   { opacity: 1; box-shadow: 0 0 8px rgba(162,155,254,0.3); }
}

/* Sprint 118: Session milestone */
.session-milestone {
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    padding: 4px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(253,203,110,0.3), rgba(253,121,168,0.3));
    color: #ffeaa7;
    border: 1px solid rgba(253,203,110,0.4);
    animation: milestone-pop 0.3s ease;
}
@keyframes milestone-pop {
    0% { transform: scale(0.8); opacity: 0; }
    80% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

/* Sprint 119: Net P&L */
.net-pnl {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
}
.pnl-up   { color: #00ff88; background: rgba(0,255,136,0.12); }
.pnl-down { color: #ff7675; background: rgba(255,118,117,0.12); }

/* Sprint 120: Session rating stars */
.session-rating {
    font-size: 11px;
    letter-spacing: 1px;
}
.sr-high { color: #ffd700; }
.sr-mid  { color: #fdcb6e; }
.sr-low  { color: #636e72; }

/* Sprint 121: Lucky coins */
.lucky-coin-display {
    font-size: 10px;
    color: #fdcb6e;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(253,203,110,0.08);
    font-weight: 600;
}

/* Sprint 122: Volume micro-slider */
.volume-slider-micro {
    -webkit-appearance: none;
    appearance: none;
    width: 60px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.15);
    outline: none;
    cursor: pointer;
    align-self: center;
}
.volume-slider-micro::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #74b9ff;
    cursor: pointer;
}


/* =====================================================
   SPRINT 123-130 STYLES
   ===================================================== */

/* Sprint 123: Highest win badge */
.high-win-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(253,203,110,0.2), rgba(255,234,167,0.2));
    color: #ffeaa7;
    border: 1px solid rgba(253,203,110,0.35);
}

/* Sprint 124: Loss streak alert */
.loss-streak-alert {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(255,118,117,0.12);
    color: #ff7675;
    border: 1px solid rgba(255,118,117,0.25);
}
.loss-streak-alert.lsa-warn {
    background: rgba(255,118,117,0.2);
    color: #fd79a8;
    animation: lsa-pulse 1.5s ease-in-out infinite alternate;
}
.loss-streak-alert.lsa-severe {
    background: rgba(214,48,49,0.25);
    color: #d63031;
    animation: lsa-pulse 0.8s ease-in-out infinite alternate;
}
@keyframes lsa-pulse {
    from { opacity: 0.7; }
    to   { opacity: 1; box-shadow: 0 0 6px rgba(255,118,117,0.4); }
}

/* Sprint 125: Spin sparkline */
.spin-sparkline {
    display: inline-flex;
    align-items: flex-end;
    gap: 1px;
    height: 16px;
    padding: 0 4px;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    overflow: hidden;
    min-width: 40px;
    vertical-align: middle;
}
.spk-bar {
    display: inline-block;
    width: 3px;
    border-radius: 1px 1px 0 0;
    transition: height 0.2s ease;
    min-height: 2px;
}
.spk-win  { background: #00cec9; }
.spk-loss { background: rgba(99,110,114,0.5); }

/* Sprint 126: Bonus timer display */
.bonus-timer-display {
    font-size: 10px;
    color: #a29bfe;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(162,155,254,0.08);
    font-weight: 500;
}

/* Sprint 127: Peak balance display */
.peak-balance-display {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(0,184,148,0.1);
    color: #00b894;
    border: 1px solid rgba(0,184,148,0.2);
}

/* Sprint 128: Multiplier history */
.mult-history-display {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(108,92,231,0.12);
    color: #a29bfe;
    letter-spacing: 0.5px;
}

/* Sprint 129: Bet efficiency badge */
.bet-efficiency-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
}
.bet-efficiency-badge.beb-good { color: #00ff88; background: rgba(0,255,136,0.1); }
.bet-efficiency-badge.beb-mid  { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.bet-efficiency-badge.beb-low  { color: #ff7675; background: rgba(255,118,117,0.1); }

/* Sprint 130: Lucky streak fire */
.lucky-streak-fire {
    font-size: 12px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(253,121,168,0.12);
    color: #fd79a8;
    animation: fire-pulse 0.7s ease-in-out infinite alternate;
}
@keyframes fire-pulse {
    from { text-shadow: none; }
    to   { text-shadow: 0 0 8px rgba(253,121,168,0.6); }
}


/* =====================================================
   SPRINT 131-138 STYLES
   ===================================================== */

/* Sprint 131: Scatter hunt meter */
.scatter-hunt-meter {
    width: 100%;
    position: relative;
    height: 12px;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
}
.scatter-hunt-meter.sht-complete {
    animation: sht-flash 0.5s ease-in-out 3;
}
@keyframes sht-flash {
    0%, 100% { box-shadow: none; }
    50%       { box-shadow: 0 0 10px rgba(253,203,110,0.7); }
}
.sht-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #fdcb6e, #e17055);
    border-radius: 6px;
    transition: width 0.3s ease;
}
.sht-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: rgba(255,255,255,0.75);
    font-weight: 600;
    pointer-events: none;
}

/* Sprint 132: Variance badge */
.variance-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 8px;
    letter-spacing: 0.5px;
}
.var-high { color: #fd79a8; background: rgba(253,121,168,0.12); }
.var-med  { color: #fdcb6e; background: rgba(253,203,110,0.12); }
.var-low  { color: #74b9ff; background: rgba(116,185,255,0.12); }

/* Sprint 133: Spin cost total */
.spin-cost-total {
    font-size: 10px;
    color: #b2bec3;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(178,190,195,0.07);
    font-weight: 500;
}

/* Sprint 134: Win trend badge */
.win-trend-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
}
.wt-up   { color: #00ff88; background: rgba(0,255,136,0.1); }
.wt-down { color: #ff7675; background: rgba(255,118,117,0.1); }
.wt-flat { color: #b2bec3; background: rgba(178,190,195,0.08); }

/* Sprint 135: Hot/cold indicator */
.hot-cold-indicator {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    letter-spacing: 0.5px;
}
.hci-hot     { color: #ff7675; background: rgba(255,118,117,0.15); }
.hci-cold    { color: #74b9ff; background: rgba(116,185,255,0.15); }
.hci-neutral { color: #b2bec3; background: rgba(178,190,195,0.08); }

/* Sprint 136: Win/loss ratio */
.win-loss-ratio {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    color: #dfe6e9;
    letter-spacing: 0.3px;
}

/* Sprint 137: Average bet badge */
.avg-bet-badge {
    font-size: 10px;
    color: #a29bfe;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(162,155,254,0.08);
    font-weight: 500;
}

/* Sprint 138: Session big win */
.session-big-win {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(108,92,231,0.2), rgba(162,155,254,0.2));
    color: #a29bfe;
    border: 1px solid rgba(108,92,231,0.3);
}


/* =====================================================
   SPRINT 139-146 STYLES
   ===================================================== */

/* Sprint 139: Spin timer badge */
.spin-timer-badge {
    font-size: 10px;
    color: #00cec9;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(0,206,201,0.08);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Sprint 140: Balance % change */
.bal-pct-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
}
.bpb-pos { color: #00ff88; background: rgba(0,255,136,0.1); }
.bpb-neg { color: #ff7675; background: rgba(255,118,117,0.1); }

/* Sprint 141: Session max multiplier */
.session-max-mult {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(253,203,110,0.15), rgba(253,121,168,0.15));
    color: #fdcb6e;
    border: 1px solid rgba(253,203,110,0.3);
}

/* Sprint 142: Symbol distribution bar */
.symbol-dist-bar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 3px 0;
}
.sdb-item {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    height: 10px;
}
.sdb-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(108,92,231,0.4), rgba(162,155,254,0.4));
    border-radius: 3px;
    min-width: 4px;
    transition: width 0.3s ease;
}
.sdb-sym {
    font-size: 8px;
    color: rgba(255,255,255,0.6);
    font-weight: 600;
    min-width: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Sprint 143: Autoplay P&L badge */
.autoplay-pnl-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
}
.apb-pos { color: #00ff88; background: rgba(0,255,136,0.1); }
.apb-neg { color: #ff7675; background: rgba(255,118,117,0.1); }

/* Sprint 144: Feature frequency badge */
.feat-freq-badge {
    font-size: 10px;
    color: #a29bfe;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(162,155,254,0.08);
    font-weight: 500;
}

/* Sprint 145: Session grade */
.session-grade {
    font-size: 12px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 8px;
    letter-spacing: 0.5px;
}
.sg-s { color: #ffd700; background: rgba(255,215,0,0.15); border: 1px solid rgba(255,215,0,0.3); }
.sg-a { color: #00ff88; background: rgba(0,255,136,0.12); }
.sg-b { color: #74b9ff; background: rgba(116,185,255,0.12); }
.sg-c { color: #fdcb6e; background: rgba(253,203,110,0.12); }
.sg-d { color: #ff7675; background: rgba(255,118,117,0.12); }
.sg-f { color: #d63031; background: rgba(214,48,49,0.15); }

/* Sprint 146: Time efficiency badge */
.time-eff-badge {
    font-size: 10px;
    color: #00cec9;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(0,206,201,0.08);
    font-weight: 500;
}


/* =====================================================
   SPRINT 147-154 STYLES
   ===================================================== */

/* Sprint 147: Outcome streak badge */
.outcome-streak-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
}
.osb-win  { color: #00ff88; background: rgba(0,255,136,0.12); }
.osb-loss { color: #ff7675; background: rgba(255,118,117,0.12); }

/* Sprint 148: RTP convergence */
.rtp-convergence {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 8px;
    font-weight: 600;
}
.rtpc-near { color: #00ff88; background: rgba(0,255,136,0.1); }
.rtpc-mid  { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.rtpc-far  { color: #ff7675; background: rgba(255,118,117,0.1); }

/* Sprint 149: Scatter gap badge */
.scatter-gap-badge {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(162,155,254,0.08);
    color: #a29bfe;
    font-weight: 600;
}
.scatter-gap-badge.sgb-mid  { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.scatter-gap-badge.sgb-long { color: #ff7675; background: rgba(255,118,117,0.1); animation: sgb-pulse 1.2s ease-in-out infinite alternate; }
@keyframes sgb-pulse {
    from { opacity: 0.8; }
    to   { opacity: 1; box-shadow: 0 0 5px rgba(255,118,117,0.3); }
}

/* Sprint 150: Bonus round count */
.bonus-round-count {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(253,203,110,0.15), rgba(253,121,168,0.15));
    color: #fdcb6e;
}

/* Sprint 151: Reel hit frequency */
.reel-hit-freq {
    font-size: 10px;
    color: #74b9ff;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(116,185,255,0.08);
    font-weight: 500;
}

/* Sprint 152: Session start time */
.sess-start-time {
    font-size: 10px;
    color: #636e72;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(99,110,114,0.08);
    font-weight: 400;
}

/* Sprint 153: Spin pace badge */
.spin-pace-badge {
    font-size: 10px;
    color: #00cec9;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(0,206,201,0.08);
    font-weight: 500;
}

/* Sprint 154: Cumulative XP badge */
.cumulative-xp-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(108,92,231,0.15), rgba(162,155,254,0.15));
    color: #a29bfe;
    border: 1px solid rgba(108,92,231,0.25);
}


/* =====================================================
   SPRINT 155-162 STYLES
   ===================================================== */

/* Sprint 155: Result history list */
.result-history-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    max-width: 100%;
}
.rhl-item {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.rhl-win  { color: #00ff88; background: rgba(0,255,136,0.1); }
.rhl-loss { color: #636e72; background: rgba(99,110,114,0.1); }

/* Sprint 156: Session profit badge */
.profit-badge-156 {
    font-size: 14px;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
}
.pb156-pos { color: #00ff88; background: rgba(0,255,136,0.1); border: 1px solid rgba(0,255,136,0.25); }
.pb156-neg { color: #ff7675; background: rgba(255,118,117,0.1); border: 1px solid rgba(255,118,117,0.25); }

/* Sprint 157: Bet recommendation */
.bet-recommend-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 8px;
    letter-spacing: 0.3px;
}
.brb-danger  { color: #d63031; background: rgba(214,48,49,0.15); animation: brb-flash 0.8s ease-in-out infinite alternate; }
.brb-caution { color: #fdcb6e; background: rgba(253,203,110,0.15); }
.brb-safe    { color: #00cec9; background: rgba(0,206,201,0.1); }
@keyframes brb-flash {
    from { opacity: 0.8; }
    to   { opacity: 1; box-shadow: 0 0 5px rgba(214,48,49,0.4); }
}

/* Sprint 158: Near-miss heat */
.near-miss-heat {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 8px;
    font-weight: 600;
    background: rgba(162,155,254,0.08);
    color: #a29bfe;
}
.near-miss-heat.nmh-mid  { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.near-miss-heat.nmh-high { color: #ff7675; background: rgba(255,118,117,0.12); }

/* Sprint 159: Cinematic count */
.cinematic-count {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(253,203,110,0.15), rgba(108,92,231,0.15));
    color: #fdcb6e;
}

/* Sprint 160: Session compare badge */
.sess-compare-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 8px;
}
.scb-better { color: #00ff88; background: rgba(0,255,136,0.1); }
.scb-worse  { color: #ff7675; background: rgba(255,118,117,0.1); }

/* Sprint 161: Spin distance badge */
.spin-dist-badge {
    font-size: 10px;
    color: #b2bec3;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(178,190,195,0.07);
    font-weight: 400;
}

/* Sprint 162: Biggest loss badge */
.biggest-loss-badge {
    font-size: 10px;
    color: #ff7675;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(255,118,117,0.08);
    font-weight: 600;
}


/* =====================================================
   SPRINT 163-170 STYLES
   ===================================================== */

/* Sprint 163: Win type label */
.win-type-label {
    font-size: 11px;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 10px;
    letter-spacing: 1px;
    animation: wtl-appear 0.3s ease-out;
}
@keyframes wtl-appear {
    from { transform: scale(0.8); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.wtl-line    { color: #00ff88; background: rgba(0,255,136,0.12); border: 1px solid rgba(0,255,136,0.25); }
.wtl-scatter { color: #fdcb6e; background: rgba(253,203,110,0.12); border: 1px solid rgba(253,203,110,0.25); }
.wtl-bonus   { color: #fd79a8; background: rgba(253,121,168,0.12); border: 1px solid rgba(253,121,168,0.25); }
.wtl-respin  { color: #74b9ff; background: rgba(116,185,255,0.12); border: 1px solid rgba(116,185,255,0.25); }

/* Sprint 164: Longest streak badge */
.longest-streak-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    color: #dfe6e9;
}

/* Sprint 165: Bet change badge */
.bet-change-badge {
    font-size: 10px;
    color: #b2bec3;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(178,190,195,0.07);
    font-weight: 400;
}

/* Sprint 166: Lucky symbol badge */
.lucky-symbol-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(253,203,110,0.15), rgba(255,234,167,0.15));
    color: #ffeaa7;
}

/* Sprint 167: Return gap badge */
.return-gap-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
}
.rgb-ahead  { color: #00ff88; background: rgba(0,255,136,0.1); }
.rgb-behind { color: #ff7675; background: rgba(255,118,117,0.1); }

/* Sprint 168: Value ratio badge */
.value-ratio-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
}
.vrb-pos { color: #00ff88; background: rgba(0,255,136,0.1); }
.vrb-mid { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.vrb-low { color: #ff7675; background: rgba(255,118,117,0.1); }

/* Sprint 169: Longest drought badge */
.longest-drought-badge {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(99,110,114,0.1);
    color: #636e72;
    font-weight: 600;
}
.longest-drought-badge.ldb-warn   { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.longest-drought-badge.ldb-severe { color: #ff7675; background: rgba(255,118,117,0.12); }

/* Sprint 170: Game session count */
.game-session-count {
    font-size: 10px;
    color: #74b9ff;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(116,185,255,0.08);
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CINEMATIC REDESIGN — layout overrides, toast system, stats panel, polish
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Slim top bar ──────────────────────────────────────────────────────── */
.slot-top-bar {
  min-height: 36px !important;
  padding: 3px 10px !important;
}

/* Hide cluttered top-bar widgets — data still lives in DOM for stats panel */
#budgetBtn,
#goalBtn,
.slot-payout,
#sessionTimer,
#vmMeter,
#rtpGauge,
#balanceSparkline,
#stTimer,
#gsNavPrev,
#gsNavNext,
#qvSlider {
  display: none !important;
}

/* Compact the ambient toggle in top bar */
#ambientToggleBtn { font-size: 13px; padding: 2px 5px; }

/* Shrink game tag pill */
#slotGameTag { font-size: 8px !important; padding: 1px 5px !important; }

/* ── 📊 Stats button ───────────────────────────────────────────────────── */
.cine-stats-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  color: #64748b;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 4px 8px;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.cine-stats-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.28);
  color: #e2e8f0;
  transform: scale(1.05);
}
.cine-stats-btn:active { transform: scale(0.97); }

/* ── Expand reel area to fill available height ─────────────────────────── */
.slot-reel-area {
  flex: 1 1 0 !important;
  min-height: 220px !important;  /* Guard: reels must always be visible */
  position: relative;
}

/* ── Hide redundant stat panels that collapse the reel area ──────────────── */
/* These duplicate data shown in session-stats-bar — keep DOM, hide visual */
#quickStatsPanel,
#slotSessionStats,
#slotSessionHud,
#sessionClock,
#providerBadge,
#gamePlayCount {
  display: none !important;
}

/* ── Slim bottom bar ───────────────────────────────────────────────────── */
.slot-bottom-bar {
  min-height: 58px !important;
  padding: 5px 14px !important;
  flex-wrap: nowrap !important;
}

/* Hide secondary bottom-bar widgets (data still in DOM) */
#slotNetDisplay,
#recentOutcomes,
#sessionHiLo,
#balBuffer,
#profitTarget,
#symbolHeat,
#lossRecovery,
#scatterAlert,
#scatterCollect,
#nearMissCount,
#balAlertDisplay,
#sessionXpEarned,
#hotSymbol,
#spinRateDisplay,
#cascadeDepth,
#autoplayCountdown,
#deadSpinCounter,
#turboBadge,
#jackpotProgress,
#autoSpeedBadge,
#scatterProgress,
#featureActiveDisplay,
#volumeSliderMicro,
#spinSparkline,
#wrDisplay,
#pnlSparkline,
#winGoalTracker,
#bankrollBarRow,
#betRange,
#quickBetPresets,
#betLockBtn,
#autoStopWinBtn,
#betSteps,
#betIndicator,
#bhChart,
#abDisplay,
#apProgress,
#featureCountBadge,
#powerMeter,
#gameTagChips,
#winBreakdown,
#sessionMilestone,
#netPnl,
#sessionRating,
#luckyCoinDisplay,
#highWinBadge,
#lossStreakAlert,
#bonusTimerDisplay,
#peakBalanceDisplay,
#multHistoryDisplay,
#betEfficiencyBadge,
#luckyStreakFire,
#scatterHuntMeter,
#varianceBadge,
#spinCostTotal,
#winTrendBadge,
#hotColdIndicator,
#winLossRatio,
#avgBetBadge,
#sessionBigWin,
#spinTimerBadge,
#balPctBadge,
#sessionMaxMult,
#symbolDistBar,
#autoplayPnlBadge,
#featFreqBadge,
#sessionGrade,
#timeEffBadge,
#outcomeStreakBadge,
#rtpConvergence,
#scatterGapBadge,
#bonusRoundCount,
#reelHitFreq,
#sessStartTime,
#spinPaceBadge,
#cumulativeXpBadge,
#resultHistoryList,
#profitBadge156,
#betRecommendBadge,
#nearMissHeat,
#cinematicCount,
#sessCompareBadge,
#spinDistBadge,
#biggestLossBadge,
#winTypeLabel,
#longestStreakBadge,
#betChangeBadge,
#luckySymbolBadge,
#returnGapBadge,
#valueRatioBadge,
#longestDroughtBadge,
#gameSessionCount,
#megaWinBadge,
#winFreqBadge,
#totalBetDisplay,
#hcBadge,
#lsTracker,
#lastWinPreview,
#slotQuickfireStrip,
#quickSwitchStrip,
#winStreakBadge,
#lossStreakBadge,
#fsRemainingBadge,
#maxWinSeen {
  display: none !important;
}

/* Keep the spin counter visible in the balance section */
#spinCounter { display: inline !important; font-size: 10px; color: #64748b; }

/* ── Bottom bar visual polish ──────────────────────────────────────────── */
.slot-bar-label {
  font-size: 8px !important;
  letter-spacing: 1.5px !important;
  color: #475569 !important;
}
.slot-bar-value {
  font-size: 17px !important;
  font-weight: 800 !important;
}
/* Ensure bet section always visible and prominent */
.slot-bar-bet {
  flex-shrink: 0 !important;
}
.slot-bet-display .slot-bar-label {
  color: #94a3b8 !important;
  font-size: 9px !important;
}
.slot-bet-display .slot-bar-value {
  color: #fbbf24 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}
/* Make spin button slightly larger for the cinematic look */
.slot-spin-btn {
  width: 74px !important;
  height: 74px !important;
  box-shadow: 0 0 28px rgba(16,185,129,0.45), 0 4px 16px rgba(0,0,0,0.5) !important;
}

/* ── Reel visual polish ────────────────────────────────────────────────── */
/* Win-cell golden glow */
.reel-cell.win-cell {
  box-shadow: 0 0 0 2px rgba(255,200,0,0.85), 0 0 22px rgba(255,200,0,0.4) !important;
  border-radius: 6px;
  z-index: 2;
  position: relative;
}
/* Mega win shimmer pulse */
@keyframes cine-win-shimmer {
  0%   { box-shadow: 0 0 0 2px rgba(255,185,0,0.8),  0 0 24px rgba(255,185,0,0.4); }
  50%  { box-shadow: 0 0 0 3px rgba(255,230,0,1.0),  0 0 48px rgba(255,230,0,0.7); }
  100% { box-shadow: 0 0 0 2px rgba(255,185,0,0.8),  0 0 24px rgba(255,185,0,0.4); }
}
.reel-cell.win-cell-mega {
  animation: cine-win-shimmer 0.65s ease-in-out infinite !important;
  border-radius: 7px;
  z-index: 3;
  position: relative;
}
/* Subtle depth on the reels container */
.reels-container {
  border-radius: 10px;
  overflow: hidden;
}

/* ── Toast notification system ─────────────────────────────────────────── */
.toast-container {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 55;
  pointer-events: none;
  max-width: 175px;
}

@keyframes cine-toast-in {
  from { opacity: 0; transform: translateX(110%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cine-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(110%); }
}

.cine-toast {
  background: rgba(8,8,20,0.93);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 9px;
  padding: 6px 11px;
  font-size: 11px;
  font-family: "Trebuchet MS","Segoe UI",sans-serif;
  color: #cbd5e1;
  animation: cine-toast-in 0.22s cubic-bezier(0.22,1,0.36,1) forwards;
  backdrop-filter: blur(6px);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 175px;
}
.cine-toast.toast-exiting {
  animation: cine-toast-out 0.22s ease forwards;
}

/* Toast type colours */
/* ── Stats Report Panel ────────────────────────────────────────────────── */
.stats-report-panel {
  position: absolute;
  inset: 0;
  background: rgba(4,4,14,0.97);
  backdrop-filter: blur(18px) saturate(0.5);
  z-index: 180;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: srp-slide-up 0.35s cubic-bezier(0.22,1,0.36,1) forwards;
  border-radius: inherit;
}
.stats-report-panel.srp-closing {
  animation: srp-slide-down 0.26s ease forwards;
}

.srp-header {
  display: flex;
  align-items: center;
  padding: 11px 18px 9px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  gap: 10px;
  background: rgba(255,255,255,0.02);
}
.srp-title {
  font-size: 14px;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.3px;
}
.srp-subtitle {
  font-size: 10px;
  color: #475569;
  flex: 1;
}
.srp-close-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 7px;
  color: #94a3b8;
  cursor: pointer;
  font-size: 14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.14s, color 0.14s;
  flex-shrink: 0;
}
.srp-close-btn:hover { background: rgba(255,255,255,0.13); color: #e2e8f0; }

.srp-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  align-content: start;
}

/* Category card */
.srp-category {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.065);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.srp-cat-title {
  font-size: 9px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  margin-bottom: 3px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.srp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.srp-label {
  font-size: 10px;
  color: #4b5563;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.srp-value {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-align: right;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}
.srp-value.srp-pos { color: #34d399; }
.srp-value.srp-neg { color: #f87171; }
.srp-value.srp-hot { color: #fbbf24; }
.srp-value.srp-grade { color: #818cf8; font-size: 13px; font-weight: 800; }


/* ═══════════════════════════════════════════════════════════════
   LOBBY VISUAL OVERHAUL — 2026-02-27
   ═══════════════════════════════════════════════════════════════ */

/* ── Game card: richer hover with tag-colour glow ── */
.game-card {
  transition: transform 0.22s cubic-bezier(.22,1,.36,1), box-shadow 0.22s ease, border-color 0.22s ease !important;
}
.game-card:hover {
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(251, 191, 36, 0.15) !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
  z-index: 5;
}
.game-card-hot:hover {
  box-shadow: 0 12px 32px rgba(239,68,68,0.4), 0 0 0 1.5px rgba(239,68,68,0.7) !important;
  border-color: rgba(239,68,68,0.7) !important;
}
.game-card-jackpot:hover {
  box-shadow: 0 12px 32px rgba(245,158,11,0.4), 0 0 0 1.5px rgba(245,158,11,0.7) !important;
  border-color: rgba(245,158,11,0.7) !important;
}

/* ── Card shine sweep on hover ── */
.game-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
.game-card:hover::after {
  left: 100%;
}

/* ── Thumbnail shimmer sweep on hover ── */
.game-thumbnail {
  overflow: hidden;
  position: relative;
}
.game-thumbnail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: none;
  pointer-events: none;
  z-index: 3;
}
.game-card:hover .game-thumbnail::after {
  transform: translateX(100%);
  transition: transform 0.55s ease;
}

/* ── Hover overlay: bigger play circle ── */
.game-hover-overlay .game-play-svg {
  width: 60px !important;
  height: 60px !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
  transition: transform 0.2s ease;
}
.game-card:hover .game-play-svg {
  transform: scale(1.08);
}

/* ── Section title: coloured left border accent ── */
.section-title {
  position: relative;
  padding-left: 14px !important;
}
.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #17916380, #17916300);
}

/* ── Filter tab count badge ── */
.tab-count {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  border-radius: 9px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
  color: rgba(255,255,255,0.65);
  vertical-align: middle;
  line-height: 14px;
}
.filter-tab-active .tab-count {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* ── Provider chip count badge ── */
.chip-count {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  border-radius: 7px;
  padding: 0px 5px;
  font-size: 9px;
  font-weight: 700;
  margin-left: 4px;
  color: rgba(255,255,255,0.55);
  vertical-align: middle;
  line-height: 13px;
}
.provider-chip-active .chip-count {
  background: rgba(251,191,36,0.2);
  color: rgba(251,191,36,0.9);
}

/* ── Featured Spotlight Strip ── */
.featured-spotlight {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 12px;
  margin-bottom: 8px;
  scroll-snap-type: x mandatory;
  display: flex;
  gap: 12px;
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 16px;
}
.featured-spotlight::-webkit-scrollbar { display: none; }
.featured-spotlight:empty { display: none; }

.featured-card {
  flex: 0 0 160px;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1.5px solid rgba(255,255,255,0.08);
  background-size: cover;
  background-position: center;
  background-color: #1a2233;
}
.featured-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 28px rgba(0,0,0,0.5);
  border-color: rgba(255,255,255,0.25);
}
.featured-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
}
.featured-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  z-index: 2;
}
.featured-badge-jackpot {
  background: linear-gradient(135deg,#b45309,#fbbf24);
  color: #fff;
}
.featured-badge-hot {
  background: linear-gradient(135deg,#991b1b,#ef4444);
  color: #fff;
}
.featured-badge-new {
  background: linear-gradient(135deg,#166534,#22c55e);
  color: #fff;
}
.featured-badge-popular {
  background: linear-gradient(135deg,#1e40af,#60a5fa);
  color: #fff;
}
.featured-badge-featured {
  background: linear-gradient(135deg,#fbbf24,#f59e0b);
  color: #fff;
  box-shadow: 0 0 8px rgba(251,191,36,0.5);
}
.featured-card-name {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.featured-card-provider {
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  color: rgba(255,255,255,0.55);
  z-index: 2;
}
.featured-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 3;
}
.featured-card:hover .featured-card-play {
  opacity: 1;
}
.featured-play-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(23,145,99,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.featured-play-circle svg {
  width: 18px;
  height: 18px;
  fill: #fff;
  margin-left: 2px;
}

/* ── Section game count badge ── */
.section-game-count {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.4) !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 8px !important;
  padding: 2px 8px !important;
  align-self: center;
}

/* ─ END LOBBY VISUAL OVERHAUL ─ */

/* Lobby overhaul count dedup — hide redundant badges added by prior sprints */
/* .filter-count (sprint N) is the canonical one; hide .filter-tab-count + .tab-count */
.filter-tab-count { display: none !important; }
.tab-count { display: none !important; }
/* Style the surviving .filter-count to match overhaul design */
.filter-count {
  background: rgba(255,255,255,0.12) !important;
  border-radius: 9px !important;
  padding: 1px 6px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.65) !important;
}
.filter-tab-active .filter-count {
  background: rgba(255,255,255,0.25) !important;
  color: #fff !important;
}

/* ── Sprint 82: Daily Win Goal bar ── */
.dgb-icon { font-size: 15px; flex-shrink: 0; }
.dgb-label { font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; flex-shrink: 0; }
.dgb-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  min-width: 60px;
}
.dgb-fill {
  height: 100%;
  background: linear-gradient(90deg, #17916b, #34d399);
  border-radius: 3px;
  transition: width 0.5s ease;
  width: 0%;
}
.dgb-fill.dgb-done { background: linear-gradient(90deg, #f59e0b, #fcd34d); }
.dgb-progress { white-space: nowrap; font-weight: 600; color: #34d399; min-width: 56px; text-align: right; }
.dgb-progress.dgb-reached { color: #fcd34d; }
.dgb-edit {
  background: none; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px;
  color: rgba(255,255,255,0.5); cursor: pointer; padding: 2px 6px; font-size: 11px;
  transition: all 0.15s; flex-shrink: 0;
}
.dgb-edit:hover { border-color: #34d399; color: #34d399; }

/* ── Sprint 82: Bonus drought in session stats bar ── */
.stat-drought-warn { color: #fcd34d !important; }
.stat-drought-hot  { color: #f87171 !important; }

/* ══════════════════════════════════════════════════════════
   BONUS MODE ACTIVE — DRAMATIC FULL-MODAL TRANSFORMATION
   CSS custom properties --bonus-accent / --bonus-glow / --bonus-bg
   are injected by JS per-game for total visual takeover
   ══════════════════════════════════════════════════════════ */

/* ── Core keyframes ── */
@keyframes bonusModeModalPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--bonus-accent,#fbbf24), 0 0 40px var(--bonus-glow,rgba(251,191,36,0.35)), 0 0 100px var(--bonus-glow,rgba(251,191,36,0.12)), inset 0 0 60px rgba(0,0,0,0.6); }
  50%       { box-shadow: 0 0 0 5px var(--bonus-accent,#fbbf24), 0 0 70px var(--bonus-glow,rgba(251,191,36,0.6)),  0 0 160px var(--bonus-glow,rgba(251,191,36,0.2)),  inset 0 0 80px rgba(0,0,0,0.4); }
}
@keyframes bonusModeReelGlow {
  0%, 100% {
    box-shadow:
      0 0 0 3px var(--bonus-accent,rgba(251,191,36,0.8)),
      0 0 25px var(--bonus-glow,rgba(251,191,36,0.45)),
      0 0 60px var(--bonus-glow,rgba(251,191,36,0.2)),
      inset 0 0 30px rgba(0,0,0,0.5);
  }
  50% {
    box-shadow:
      0 0 0 5px var(--bonus-accent,rgba(255,220,80,1)),
      0 0 50px var(--bonus-glow,rgba(251,191,36,0.75)),
      0 0 120px var(--bonus-glow,rgba(251,191,36,0.35)),
      inset 0 0 50px rgba(0,0,0,0.3);
  }
}
@keyframes bonusModeBadgePulse {
  0%, 100% { opacity: 0.88; letter-spacing: 6px; }
  50%       { opacity: 1;    letter-spacing: 7px; }
}
@keyframes bonusModeSpinBtnGlow {
  0%, 100% { box-shadow: 0 0 20px var(--bonus-glow,rgba(251,191,36,0.6)), 0 0 50px var(--bonus-glow,rgba(251,191,36,0.3)), 0 4px 16px rgba(0,0,0,0.6); transform: scale(1); }
  50%       { box-shadow: 0 0 40px var(--bonus-glow,rgba(251,191,36,0.9)), 0 0 90px var(--bonus-glow,rgba(251,191,36,0.5)), 0 4px 24px rgba(0,0,0,0.5); transform: scale(1.04); }
}
@keyframes bonusHudPulse {
  0%, 100% { box-shadow: 0 4px 30px var(--bonus-glow,rgba(251,191,36,0.25)), inset 0 0 40px rgba(0,0,0,0.5); }
  50%       { box-shadow: 0 4px 60px var(--bonus-glow,rgba(251,191,36,0.55)), inset 0 0 60px rgba(0,0,0,0.3); }
}
@keyframes bonusBgRotate {
  from { transform: translate(-50%, -50%) rotate(0deg) scale(1.5); }
  to   { transform: translate(-50%, -50%) rotate(360deg) scale(1.5); }
}
@keyframes bonusTopBarPulse {
  0%, 100% { box-shadow: 0 3px 25px var(--bonus-glow,rgba(251,191,36,0.3)); }
  50%       { box-shadow: 0 3px 50px var(--bonus-glow,rgba(251,191,36,0.6)); }
}
@keyframes bonusBottomBarPulse {
  0%, 100% { box-shadow: 0 -3px 25px var(--bonus-glow,rgba(251,191,36,0.3)); }
  50%       { box-shadow: 0 -3px 50px var(--bonus-glow,rgba(251,191,36,0.6)); }
}
@keyframes bonusCellFlicker {
  0%, 100% { box-shadow: inset 0 0 8px var(--bonus-glow,rgba(251,191,36,0.15)), 0 0 4px var(--bonus-glow,rgba(251,191,36,0.1)); }
  50%       { box-shadow: inset 0 0 16px var(--bonus-glow,rgba(251,191,36,0.3)), 0 0 10px var(--bonus-glow,rgba(251,191,36,0.2)); }
}
@keyframes bonusActivatedFlashBg {
  0%   { opacity: 0; transform: scale(0.7); }
  15%  { opacity: 1; transform: scale(1.02); }
  30%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; }
  90%  { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1.08); pointer-events: none; }
}
@keyframes bonusActivatedTitle {
  0%   { opacity: 0; transform: scale(0.2) translateY(60px); letter-spacing: -0.3em; filter: blur(10px); }
  25%  { opacity: 1; transform: scale(1.12) translateY(-12px); letter-spacing: 0.18em; filter: blur(0); }
  45%  { transform: scale(0.98) translateY(0); letter-spacing: 0.12em; }
  65%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.05) translateY(-10px); }
}
@keyframes bonusActivatedSubtitle {
  0%, 20% { opacity: 0; transform: translateY(30px) scale(0.8); filter: blur(4px); }
  40%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  65%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes bonusActivatedRays {
  0%   { opacity: 0; transform: rotate(0deg); }
  20%  { opacity: 0.7; transform: rotate(30deg); }
  60%  { opacity: 0.5; transform: rotate(120deg); }
  100% { opacity: 0; transform: rotate(240deg); }
}
@keyframes bonusWinPulse {
  0%, 100% { text-shadow: 0 0 12px var(--bonus-accent,#fbbf24), 0 0 25px var(--bonus-glow,rgba(251,191,36,0.5)); }
  50%       { text-shadow: 0 0 20px var(--bonus-accent,#fbbf24), 0 0 50px var(--bonus-glow,rgba(251,191,36,0.8)), 0 0 80px var(--bonus-glow,rgba(251,191,36,0.4)); }
}

/* ── Root modal transformation: deep dark with game-specific atmospheric BG ── */
.slot-modal-fullscreen.bonus-mode-active {
  background: var(--bonus-bg, linear-gradient(160deg, #0d0800 0%, #120a00 25%, #0a0800 50%, #060400 75%, #050300 100%)) !important;
  animation: bonusModeModalPulse 2.5s ease-in-out infinite;
  border: 2px solid var(--bonus-accent, rgba(251,191,36,0.7)) !important;
  position: relative;
  overflow: hidden;
}

/* Rotating atmospheric light sweep behind everything */
.slot-modal-fullscreen.bonus-mode-active::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 120%; height: 120%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, var(--bonus-glow, rgba(251,191,36,0.04)) 20deg, transparent 40deg,
    var(--bonus-glow, rgba(251,191,36,0.04)) 70deg, transparent 90deg,
    var(--bonus-glow, rgba(251,191,36,0.04)) 130deg, transparent 160deg,
    var(--bonus-glow, rgba(251,191,36,0.04)) 220deg, transparent 250deg,
    var(--bonus-glow, rgba(251,191,36,0.04)) 310deg, transparent 360deg
  );
  animation: bonusBgRotate 12s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Subtle CRT scanlines overlay */
.slot-modal-fullscreen.bonus-mode-active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.04) 3px,
    rgba(0,0,0,0.04) 4px
  );
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

/* ── Persistent BONUS ROUND badge at modal top ── */
.bonus-mode-badge {
  align-items: center;
  animation: bonusModeBadgePulse 1.6s ease-in-out infinite;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--bonus-glow, rgba(251,191,36,0.06)) 10%,
    var(--bonus-accent, rgba(251,191,36,0.18)) 30%,
    var(--bonus-accent, rgba(255,200,50,0.30)) 50%,
    var(--bonus-accent, rgba(251,191,36,0.18)) 70%,
    var(--bonus-glow, rgba(251,191,36,0.06)) 90%,
    transparent 100%
  );
  border-bottom: 2px solid var(--bonus-accent, rgba(251,191,36,0.7));
  border-top: 1px solid var(--bonus-accent, rgba(251,191,36,0.3));
  color: var(--bonus-accent, #fbbf24);
  display: none;
  font-size: 11px;
  font-weight: 900;
  gap: 10px;
  justify-content: center;
  letter-spacing: 6px;
  order: -999;
  padding: 10px 24px 9px;
  text-align: center;
  text-shadow: 0 0 18px var(--bonus-accent, rgba(251,191,36,0.9)), 0 0 40px var(--bonus-glow, rgba(251,191,36,0.5));
  text-transform: uppercase;
  width: 100%;
  flex-shrink: 0;
  z-index: 50;
  position: relative;
}
.bonus-mode-badge .bm-star {
  animation: bonusModeBadgePulse 0.9s ease-in-out infinite alternate;
  display: inline-block;
  font-size: 14px;
}
.bonus-mode-badge .bm-spins {
  background: var(--bonus-glow, rgba(251,191,36,0.15));
  border: 1px solid var(--bonus-accent, rgba(251,191,36,0.55));
  border-radius: 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 2px 12px;
  text-shadow: none;
}
.bonus-mode-badge .bm-win {
  color: #6ee7b7;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(110,231,183,0.7);
  letter-spacing: 2px;
  font-size: 12px;
}

/* ── Top bar: dramatic theme-colored transformation ── */
.bonus-mode-active .slot-top-bar {
  background: linear-gradient(90deg, rgba(0,0,0,0.97) 0%, rgba(10,8,0,0.97) 50%, rgba(0,0,0,0.97) 100%) !important;
  border-bottom: 2px solid var(--bonus-accent, rgba(251,191,36,0.7)) !important;
  animation: bonusTopBarPulse 2s ease-in-out infinite !important;
}

/* ── Bottom bar: same dramatic treatment ── */
.bonus-mode-active .slot-bottom-bar {
  background: linear-gradient(90deg, rgba(0,0,0,0.97) 0%, rgba(10,8,0,0.97) 50%, rgba(0,0,0,0.97) 100%) !important;
  border-top: 2px solid var(--bonus-accent, rgba(251,191,36,0.7)) !important;
  animation: bonusBottomBarPulse 2s ease-in-out infinite !important;
}

/* ── Reel area: blazing frame with deep inner glow ── */
.bonus-mode-active .slot-reel-area {
  animation: bonusModeReelGlow 2s ease-in-out infinite !important;
  border: 3px solid var(--bonus-accent, rgba(251,191,36,0.85)) !important;
  border-radius: 10px !important;
}

/* ── Individual reel cells: subtle per-cell glow ── */
.bonus-mode-active .slot-reel-cell,
.bonus-mode-active .reel-cell,
.bonus-mode-active .slot-cell {
  border-color: var(--bonus-accent, rgba(251,191,36,0.25)) !important;
  animation: bonusCellFlicker 3s ease-in-out infinite !important;
}

/* ── Enhanced HUD during bonus mode ── */
.bonus-mode-active .free-spins-hud {
  animation: bonusHudPulse 2s ease-in-out infinite, hudSlideIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  background: linear-gradient(135deg, rgba(5,2,0,0.99), rgba(10,5,0,0.99)) !important;
  border-bottom: 3px solid var(--bonus-accent, rgba(251,191,36,0.9)) !important;
  border-top: 1px solid var(--bonus-accent, rgba(251,191,36,0.35)) !important;
  padding: 14px 28px !important;
}
.bonus-mode-active .fs-hud-value {
  font-size: 30px !important;
  color: var(--bonus-accent, #fbbf24) !important;
  text-shadow: 0 0 15px var(--bonus-glow, rgba(251,191,36,0.7)) !important;
}
.bonus-mode-active .fs-hud-label {
  color: rgba(255,255,255,0.6) !important;
  font-size: 10px !important;
}
.bonus-mode-active .fs-hud-win-value {
  animation: bonusWinPulse 1.8s ease-in-out infinite !important;
}

/* ── Spin button: pulsing theme-colored glow ── */
.bonus-mode-active #spinBtn:not(:disabled),
.bonus-mode-active .slot-spin-btn:not(:disabled) {
  animation: bonusModeSpinBtnGlow 1.4s ease-in-out infinite !important;
  background-image: linear-gradient(135deg, #92400e, #d97706, #fbbf24, #f59e0b) !important;
  border-color: var(--bonus-accent, rgba(251,191,36,0.9)) !important;
  color: #000 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35) !important;
}

/* ── Win amount glows with bonus accent ── */
.bonus-mode-active .slot-win-display,
.bonus-mode-active #winDisplay,
.bonus-mode-active .win-amount {
  color: var(--bonus-accent, #fbbf24) !important;
  animation: bonusWinPulse 1.8s ease-in-out infinite !important;
}

/* ── Autoplay counter colour during bonus ── */
.bonus-mode-active .autoplay-counter {
  color: var(--bonus-accent, #fbbf24) !important;
  text-shadow: 0 0 10px var(--bonus-glow, rgba(251,191,36,0.6)) !important;
}

/* ── Stat labels/values get accent treatment ── */
.bonus-mode-active .slot-stat-label {
  color: var(--bonus-accent, rgba(251,191,36,0.7)) !important;
}

/* ══════════════════════════════════════════════════════════
   BONUS ACTIVATED — Full-screen entrance flash overlay
   Created and injected by JS when free spins start
   ══════════════════════════════════════════════════════════ */
.bonus-activated-flash {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(30,15,0,0.97) 0%,
    rgba(10,5,0,0.99) 60%,
    rgba(0,0,0,1) 100%
  );
  animation: bonusActivatedFlashBg 2.8s cubic-bezier(0.22,1,0.36,1) forwards;
}
.bonus-activated-flash::before {
  content: '';
  position: absolute;
  inset: -30%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, var(--bonus-glow, rgba(251,191,36,0.12)) 6deg, transparent 12deg,
    transparent 30deg, var(--bonus-glow, rgba(251,191,36,0.1)) 36deg, transparent 42deg,
    transparent 60deg, var(--bonus-glow, rgba(251,191,36,0.12)) 66deg, transparent 72deg,
    transparent 90deg, var(--bonus-glow, rgba(251,191,36,0.1)) 96deg, transparent 102deg,
    transparent 120deg, var(--bonus-glow, rgba(251,191,36,0.12)) 126deg, transparent 132deg,
    transparent 150deg, var(--bonus-glow, rgba(251,191,36,0.1)) 156deg, transparent 162deg,
    transparent 180deg, var(--bonus-glow, rgba(251,191,36,0.12)) 186deg, transparent 192deg,
    transparent 210deg, var(--bonus-glow, rgba(251,191,36,0.1)) 216deg, transparent 222deg,
    transparent 240deg, var(--bonus-glow, rgba(251,191,36,0.12)) 246deg, transparent 252deg,
    transparent 270deg, var(--bonus-glow, rgba(251,191,36,0.1)) 276deg, transparent 282deg,
    transparent 300deg, var(--bonus-glow, rgba(251,191,36,0.12)) 306deg, transparent 312deg,
    transparent 330deg, var(--bonus-glow, rgba(251,191,36,0.1)) 336deg, transparent 360deg
  );
  animation: bonusActivatedRays 2.8s ease-out forwards;
}
.bonus-activated-title {
  position: relative;
  z-index: 2;
  font-size: clamp(2.2rem, 9vw, 5.5rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 0 20px var(--bonus-accent, #fbbf24),
    0 0 50px var(--bonus-accent, #fbbf24),
    0 0 100px var(--bonus-glow, rgba(251,191,36,0.6)),
    0 4px 8px rgba(0,0,0,0.8);
  animation: bonusActivatedTitle 2.8s cubic-bezier(0.22,1,0.36,1) forwards;
  padding: 0 16px;
}
.bonus-activated-subtitle {
  position: relative;
  z-index: 2;
  font-size: clamp(0.9rem, 3.5vw, 1.8rem);
  font-weight: 700;
  color: var(--bonus-accent, #fbbf24);
  letter-spacing: 0.35em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 15px var(--bonus-accent, #fbbf24), 0 0 30px var(--bonus-glow, rgba(251,191,36,0.5));
  margin-top: 0.6em;
  animation: bonusActivatedSubtitle 2.8s cubic-bezier(0.22,1,0.36,1) forwards;
}


/* ── Jackpot Ticker Bar V2 (API-driven) ─────────────────── */
.jp-label {
    font-size: 10px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 4px;
}
.jp-amount {
    font-size: 22px;
    font-weight: 900;
    color: #fbbf24;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.5px;
    text-shadow: 0 0 12px rgba(251,191,36,0.5);
    transition: color 0.3s ease;
}
@keyframes jp-pulse-v2 {
    0%, 100% { text-shadow: 0 0 16px rgba(251,191,36,0.6), 0 0 32px rgba(251,191,36,0.3); }
    50%       { text-shadow: 0 0 28px rgba(251,191,36,0.95), 0 0 56px rgba(251,191,36,0.5); }
}

/* ── Big Win Feed ─────────────────── */
/* ── Achievement Toast ─────────────────── */
/* ── Personalized Offers Banner ─────────────────── */
.offer-card { min-width: 200px; padding: 12px 16px; background: linear-gradient(135deg, rgba(78,205,196,0.15), rgba(255,107,53,0.1)); border: 1px solid rgba(78,205,196,0.3); border-radius: 10px; flex-shrink: 0; }
.offer-title { font-size: 14px; font-weight: 700; color: #4ecdc4; margin-bottom: 4px; }
.offer-msg { font-size: 12px; color: #aaa; margin-bottom: 8px; line-height: 1.4; }
.offer-cta { padding: 6px 16px; background: linear-gradient(135deg, #4ecdc4, #44b8a8); color: #000; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
.offer-cta:hover { filter: brightness(1.2); }
.offer-card.offer-high_roller { border-color: rgba(255,215,0,0.4); background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(255,107,53,0.1)); }
.offer-card.offer-high_roller .offer-title { color: #ffd700; }

/* ── Bundle Shop Modal ─────────────────── */
/* ── Campaign Banners ─────────────────── */
.cb-title { font-size: 14px; font-weight: 700; color: #ff6b35; margin-bottom: 4px; }
.cb-detail { font-size: 12px; color: #aaa; margin-bottom: 4px; }
.cb-timer { font-size: 11px; color: #ff4444; font-weight: 600; margin-bottom: 6px; }
.cb-cta { padding: 5px 14px; background: linear-gradient(135deg, #ff6b35, #e85d26); color: #fff; border: none; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; }
.cb-cta:hover { filter: brightness(1.2); }

/* ── Loss Limit Bar ─────────────────── */
.loss-limit-bar { display: flex; align-items: center; gap: 8px; padding: 4px 12px; background: rgba(255,255,255,0.03); border-radius: 6px; margin-top: 4px; }
.ll-label { font-size: 11px; color: #888; white-space: nowrap; }
.ll-remaining { font-size: 12px; color: #4ecdc4; font-weight: 600; white-space: nowrap; }
.ll-track { flex: 1; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.ll-fill { height: 100%; background: #4ecdc4; border-radius: 2px; transition: width 0.3s; }
.ll-fill.ll-warn { background: #ffa500; }
.ll-fill.ll-danger { background: #ff4444; }

/* ── Shop Button ─────────────────── */
/* ── Modal Overlay (shared) ─────────────────── */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 1100; overflow-y: auto; padding: 40px 20px; justify-content: center; align-items: flex-start; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal-overlay.active { display: flex; }
.modal-overlay .modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: #888; font-size: 24px; cursor: pointer; line-height: 1; padding: 4px; }
.modal-overlay .modal-close:hover { color: #fff; }

/* ── Gift Modal ─────────────────── */
/* ── Contest Modal ─────────────────── */
/* ── Prize Cards ─────────────────── */
.prize-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(249,202,36,0.2); border-radius: 10px; padding: 14px 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prize-title { font-size: 14px; font-weight: 700; color: #f9ca24; }
.prize-amount { font-size: 18px; font-weight: 700; color: #4ecdc4; flex: 1; }
.prize-contest { font-size: 11px; color: #888; width: 100%; }
.prize-claim-btn { padding: 6px 16px; background: linear-gradient(135deg, #f9ca24, #f0932b); color: #000; border: none; border-radius: 6px; font-weight: 700; font-size: 13px; cursor: pointer; }
.prize-claim-btn:hover { filter: brightness(1.15); }
.prize-card.prize-claimed { opacity: 0.5; }
.prize-claimed-badge { font-size: 11px; color: #4ecdc4; font-weight: 600; text-transform: uppercase; }

/* ── Event Banner ─────────────────── */
.event-banner { min-width: 240px; padding: 12px 16px; background: linear-gradient(135deg, rgba(114,137,218,0.15), rgba(78,205,196,0.1)); border: 1px solid rgba(114,137,218,0.3); border-radius: 10px; flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.event-name { font-size: 14px; font-weight: 700; color: #7289da; flex: 1; }
.event-multiplier { padding: 3px 10px; background: linear-gradient(135deg, #f9ca24, #f0932b); color: #000; border-radius: 12px; font-size: 13px; font-weight: 800; }
.event-timer { font-size: 11px; color: #ff4444; font-weight: 600; width: 100%; }
.event-games { font-size: 11px; color: #888; width: 100%; }

/* ── Low-Balance Deposit Nudge ─────────────────────────────── */
#lowBalanceNudge {
    position: fixed;
    bottom: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: min(480px, calc(100vw - 32px));
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid #ffd700;
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9500;
    transition: bottom 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 -4px 32px rgba(255, 215, 0, 0.15);
}
#lowBalanceNudge.nudge--visible {
    bottom: 24px;
}
.nudge__icon { font-size: 1.6rem; flex-shrink: 0; }
.nudge__text { flex: 1; min-width: 0; }
.nudge__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffd700;
    margin: 0 0 2px;
}
.nudge__sub {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
}
.nudge__btn {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #0d0d1a;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.nudge__btn:hover { filter: brightness(1.1); }
.nudge__close {
    background: none;
    border: none;
    color: #64748b;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 0 0 4px;
    flex-shrink: 0;
    line-height: 1;
}
.nudge__close:hover { color: #94a3b8; }

/* ── Casino Sidebar (5gringos-style) ─────────────────────────────────────── */
:root { --csb-w: 220px; }

.casino-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--csb-w);
    height: 100vh;
    background: linear-gradient(180deg, #0a0520 0%, #060312 100%);
    border-right: 1px solid rgba(167,139,250,.15);
    z-index: 500;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.casino-sidebar.csb-open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,.7);
}

/* Top logo row */
.csb-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px 10px;
    border-bottom: 1px solid rgba(167,139,250,.1);
    flex-shrink: 0;
}
.csb-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}
.csb-logo-icon {
    width: 32px; height: 32px;
    background: linear-gradient(135deg,#7c3aed,#4c1d95);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 12px; color: #ede9fe;
    letter-spacing: 1px;
}
.csb-logo-text { font-size: 11px; font-weight: 900; color: #c4b5fd; line-height: 1.2; }
.csb-logo-sub { font-size: 8px; color: rgba(196,181,253,.5); letter-spacing: 2px; }
.csb-close-btn {
    background: none; border: none; color: rgba(255,255,255,.3);
    font-size: 16px; cursor: pointer; padding: 4px;
    transition: color .15s;
}
.csb-close-btn:hover { color: #c4b5fd; }

/* Nav scroll area */
.csb-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(124,58,237,.3) transparent;
}
.csb-nav::-webkit-scrollbar { width: 3px; }
.csb-nav::-webkit-scrollbar-track { background: transparent; }
.csb-nav::-webkit-scrollbar-thumb { background: rgba(124,58,237,.4); border-radius: 2px; }

/* Section grouping */
.csb-section { margin-bottom: 4px; }
.csb-section-label {
    font-size: 9px;
    font-weight: 900;
    color: rgba(167,139,250,.45);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 10px 14px 4px;
}

/* Nav item */
.csb-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    color: rgba(255,255,255,.65);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background .12s, color .12s;
    position: relative;
}
.csb-item:hover {
    background: rgba(124,58,237,.18);
    color: #ede9fe;
}
.csb-item-lobby {
    font-size: 13px;
    font-weight: 800;
    color: #c4b5fd;
}
.csb-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }

/* Badges */
.csb-badge {
    margin-left: auto;
    font-size: 8px;
    font-weight: 900;
    padding: 2px 5px;
    border-radius: 4px;
    letter-spacing: .5px;
}
.csb-badge-hot { background: rgba(239,68,68,.25); color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }
.csb-badge-new { background: rgba(16,185,129,.2); color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); }
.csb-badge-vip { background: rgba(251,191,36,.2); color: #fde68a; border: 1px solid rgba(251,191,36,.3); }

/* Edge tag */
.csb-edge-tag {
    margin-left: auto;
    font-size: 8px;
    color: rgba(251,191,36,.6);
    font-weight: 700;
}

/* Bottom deposit CTA */
.csb-deposit-cta {
    padding: 12px;
    border-top: 1px solid rgba(167,139,250,.1);
    flex-shrink: 0;
}
.csb-deposit-btn {
    width: 100%;
    padding: 11px 0;
    background: linear-gradient(135deg,#7c3aed,#4c1d95);
    color: #ede9fe;
    border: 1px solid rgba(167,139,250,.3);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    letter-spacing: .5px;
    transition: opacity .15s;
}
.csb-deposit-btn:hover { opacity: .85; }

/* Overlay (mobile backdrop) */
.csb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 499;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
.csb-overlay.csb-ov-open {
    opacity: 1;
    pointer-events: auto;
}

/* Main content wrapper */
.casino-main-wrap {
    transition: margin-left .25s cubic-bezier(.4,0,.2,1);
}

/* Hamburger button */
.csb-hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    padding: 7px 8px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s;
}
.csb-hamburger-btn:hover { background: rgba(124,58,237,.25); }
.csb-ham-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: rgba(196,181,253,.8);
    border-radius: 1px;
    transition: background .15s;
}
.csb-hamburger-btn:hover .csb-ham-bar { background: #c4b5fd; }

/* ── Desktop: sidebar always-open, push content ──────────────────────────── */
@media (min-width: 1100px) {

    .casino-main-wrap.csb-pushed {
        margin-left: var(--csb-w);
    }
    /* Hide hamburger on wide screens when sidebar is open */
    body.csb-sidebar-open .csb-hamburger-btn { display: none; }
    /* Always show close button on desktop when open */
    .casino-sidebar.csb-open .csb-close-btn { display: block; }
}


/* ── Mobile: sidebar slides over content ─────────────────────────────────── */
@media (max-width: 1099px) {

    .casino-main-wrap.csb-pushed { margin-left: 0; }
    .csb-close-btn { display: block; }
}


/* Desktop: never show overlay — sidebar pushes content instead */
@media (min-width: 1100px) {

    .csb-overlay { display: none !important; }
}


/* ═══ Sidebar collapsible dropdown accordion ═══ */
.csb-dd-hdr {
  display: flex; align-items: center; gap: 10px;
  width: 100%; background: rgba(255,255,255,.04); border: none;
  padding: 10px 14px; border-radius: 8px;
  color: rgba(255,255,255,.5); font-size: 10px; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
  transition: background .15s, color .15s; margin-bottom: 2px; text-align: left;
}
.csb-dd-hdr:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); }
.csb-dd.csb-dd-open .csb-dd-hdr { color: rgba(255,255,255,.9); background: rgba(167,139,250,.1); }
.csb-dd-chevron { margin-left: auto; transition: transform .3s; display: inline-block; }
.csb-dd.csb-dd-open .csb-dd-chevron { transform: rotate(180deg); }
.csb-dd-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }

/* ══════════════════════════════════════════════════════════════════════════
   PROVIDER-THEMED FREE SPINS UI — 6 Unique Immersive Themes
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Shared base for themed overlay ── */
.fs-overlay-themed { position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.fs-overlay-themed .fs-themed-bg { position:absolute; inset:0; z-index:0; }
.fs-overlay-themed .fs-themed-content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; padding:40px 50px; border-radius:20px; max-width:500px; width:90%; }

/* Animated scanline overlay */
.fs-scanlines::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.08) 2px,rgba(0,0,0,0.08) 4px); pointer-events:none; z-index:1; animation:fsScanlineScroll 8s linear infinite; }
@keyframes fsScanlineScroll { 0%{background-position:0 0} 100%{background-position:0 100px} }

/* Floating stars particle layer */
.fs-stars::before { content:''; position:absolute; inset:0; background:radial-gradient(1px 1px at 10% 15%,#fff,transparent),radial-gradient(1px 1px at 25% 40%,#fff,transparent),radial-gradient(2px 2px at 40% 8%,#fff,transparent),radial-gradient(1px 1px at 55% 55%,#fff,transparent),radial-gradient(1px 1px at 70% 25%,#fff,transparent),radial-gradient(2px 2px at 85% 70%,#fff,transparent),radial-gradient(1px 1px at 15% 75%,#fff,transparent),radial-gradient(1px 1px at 60% 85%,#fff,transparent),radial-gradient(2px 2px at 90% 10%,#fff,transparent),radial-gradient(1px 1px at 35% 65%,#fff,transparent); pointer-events:none; animation:fsStarsTwinkle 4s ease-in-out infinite alternate; z-index:0; }
@keyframes fsStarsTwinkle { 0%{opacity:.4} 100%{opacity:1} }

/* ── NOVASPIN — Cyberpunk/Space ─────────────────────────────────────────── */
.fs-provider-novaspin .fs-themed-bg { background:radial-gradient(ellipse at 50% 30%,#0a0a40 0%,#050515 60%,#020210 100%); }
.fs-provider-novaspin .fs-themed-bg::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 60%,rgba(0,229,255,0.12) 0%,transparent 60%),radial-gradient(ellipse at 70% 30%,rgba(124,77,255,0.15) 0%,transparent 50%); animation:fsNovaPulse 3s ease-in-out infinite alternate; }
.fs-provider-novaspin .fs-themed-bg::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,transparent,#00e5ff,#7c4dff,#00e5ff,transparent); animation:fsNovaScan 2s ease-in-out infinite; }
@keyframes fsNovaPulse { 0%{opacity:.6} 100%{opacity:1} }
@keyframes fsNovaScan { 0%,100%{opacity:.3;transform:scaleX(.5)} 50%{opacity:1;transform:scaleX(1)} }
.fs-provider-novaspin .fs-themed-content { background:linear-gradient(135deg,rgba(0,10,50,0.97),rgba(15,0,60,0.97)); border:1px solid rgba(0,229,255,0.5); box-shadow:0 0 60px rgba(0,229,255,0.3),0 0 120px rgba(124,77,255,0.2),inset 0 0 40px rgba(0,229,255,0.05); }
.fs-provider-novaspin .fs-provider-icon { font-size:56px; margin-bottom:12px; filter:drop-shadow(0 0 20px #00e5ff); animation:fsIconFloat 2s ease-in-out infinite alternate; }
.fs-provider-novaspin .fs-provider-label { font-family:"Courier New",monospace; font-size:11px; letter-spacing:5px; color:#00e5ff; opacity:.7; margin-bottom:8px; text-transform:uppercase; }
.fs-provider-novaspin .fs-provider-title { font-family:"Courier New",monospace; font-size:26px; font-weight:700; letter-spacing:3px; background:linear-gradient(135deg,#00e5ff,#7c4dff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-shadow:none; margin-bottom:4px; }
.fs-provider-novaspin .fs-provider-count { font-family:"Courier New",monospace; font-size:88px; font-weight:900; color:#00e5ff; text-shadow:0 0 20px #00e5ff,0 0 40px #7c4dff; line-height:1; animation:fsCountPulseNova 1.5s ease-in-out infinite; }
.fs-provider-novaspin .fs-provider-sublabel { font-family:"Courier New",monospace; font-size:13px; letter-spacing:6px; color:rgba(0,229,255,.6); margin-top:4px; }
.fs-provider-novaspin .fs-provider-desc { font-family:"Courier New",monospace; font-size:12px; color:rgba(255,255,255,.5); margin-top:12px; letter-spacing:1px; }
@keyframes fsCountPulseNova { 0%,100%{text-shadow:0 0 20px #00e5ff,0 0 40px #7c4dff} 50%{text-shadow:0 0 40px #00e5ff,0 0 80px #7c4dff,0 0 120px rgba(0,229,255,.5)} }
/* Novaspin HUD */
.fs-hud-novaspin { background:linear-gradient(90deg,rgba(0,10,50,0.98),rgba(5,0,30,0.98)) !important; border-bottom:2px solid #00e5ff !important; box-shadow:0 4px 30px rgba(0,229,255,0.25) !important; font-family:"Courier New",monospace !important; }
.fs-hud-novaspin .fs-hud-label { color:rgba(0,229,255,.5) !important; letter-spacing:3px !important; font-size:9px !important; }
.fs-hud-novaspin .fs-hud-value { color:#00e5ff !important; text-shadow:0 0 10px #00e5ff !important; font-family:"Courier New",monospace !important; }
.fs-hud-novaspin .fs-hud-win-value { color:#7c4dff !important; text-shadow:0 0 10px #7c4dff !important; }
/* Novaspin Summary */
.fs-summary-novaspin { background:linear-gradient(135deg,rgba(0,10,50,0.98),rgba(15,0,60,0.98)) !important; border-color:rgba(0,229,255,0.6) !important; box-shadow:0 0 80px rgba(0,229,255,0.4),inset 0 0 30px rgba(0,229,255,0.05) !important; }
.fs-summary-novaspin .fs-summary-label { color:#00e5ff !important; font-family:"Courier New",monospace !important; letter-spacing:4px !important; }
.fs-summary-novaspin .fs-summary-amount { color:#00e5ff !important; text-shadow:0 0 20px #00e5ff,0 0 40px #7c4dff !important; }
.fs-summary-novaspin .fs-summary-close-btn { background:linear-gradient(135deg,#00e5ff,#7c4dff) !important; }

/* ── CELESTIAL — Divine/Fantasy ─────────────────────────────────────────── */
.fs-provider-celestial .fs-themed-bg { background:radial-gradient(ellipse at 50% 0%,#2a1500 0%,#120a00 50%,#080500 100%); }
.fs-provider-celestial .fs-themed-bg::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% -20%,rgba(255,215,0,0.25) 0%,transparent 60%),radial-gradient(ellipse at 20% 80%,rgba(255,152,0,0.1) 0%,transparent 40%),radial-gradient(ellipse at 80% 80%,rgba(255,215,0,0.1) 0%,transparent 40%); animation:fsCelestialGlow 4s ease-in-out infinite alternate; }
.fs-provider-celestial .fs-themed-bg::after { content:'✦ ✦ ✦ ✦ ✦'; position:absolute; top:20%; width:100%; text-align:center; font-size:24px; color:rgba(255,215,0,0.2); animation:fsCelestialStarsDrift 8s linear infinite; letter-spacing:40px; }
@keyframes fsCelestialGlow { 0%{opacity:.6} 100%{opacity:1} }
@keyframes fsCelestialStarsDrift { 0%{opacity:.1;letter-spacing:30px} 50%{opacity:.4;letter-spacing:50px} 100%{opacity:.1;letter-spacing:30px} }
.fs-provider-celestial .fs-themed-content { background:linear-gradient(160deg,rgba(40,20,0,0.97),rgba(25,12,0,0.97)); border:2px solid rgba(255,215,0,0.6); box-shadow:0 0 80px rgba(255,215,0,0.35),0 0 160px rgba(255,152,0,0.15),inset 0 0 60px rgba(255,215,0,0.06); }
.fs-provider-celestial .fs-themed-content::before { content:''; position:absolute; inset:-1px; border-radius:20px; background:linear-gradient(135deg,rgba(255,215,0,.3),transparent,rgba(255,152,0,.2)); pointer-events:none; }
.fs-provider-celestial .fs-provider-icon { font-size:60px; margin-bottom:12px; filter:drop-shadow(0 0 25px gold); animation:fsCelestialIconGlow 2s ease-in-out infinite alternate; }
@keyframes fsCelestialIconGlow { 0%{filter:drop-shadow(0 0 15px gold)} 100%{filter:drop-shadow(0 0 35px #ffd700) drop-shadow(0 0 60px #ff9800)} }
.fs-provider-celestial .fs-provider-label { font-family:Georgia,serif; font-size:11px; letter-spacing:6px; color:rgba(255,215,0,.7); margin-bottom:8px; font-style:italic; }
.fs-provider-celestial .fs-provider-title { font-family:Georgia,serif; font-size:28px; font-weight:700; color:#ffd700; text-shadow:0 0 20px #ffd700,0 0 40px #ff9800; letter-spacing:2px; margin-bottom:4px; }
.fs-provider-celestial .fs-provider-count { font-family:Georgia,serif; font-size:96px; font-weight:900; background:linear-gradient(180deg,#fff8d0,#ffd700,#ff9800); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-shadow:none; line-height:1; filter:drop-shadow(0 0 30px rgba(255,215,0,.8)); animation:fsCelestialCountShine 2s ease-in-out infinite; }
.fs-provider-celestial .fs-provider-sublabel { font-family:Georgia,serif; font-size:14px; letter-spacing:5px; color:rgba(255,215,0,.65); font-style:italic; margin-top:4px; }
.fs-provider-celestial .fs-provider-desc { font-family:Georgia,serif; font-size:13px; color:rgba(255,230,150,.55); margin-top:14px; font-style:italic; }
/* Celestial HUD */
.fs-hud-celestial { background:linear-gradient(90deg,rgba(40,20,0,0.98),rgba(25,12,0,0.98)) !important; border-bottom:2px solid rgba(255,215,0,.7) !important; box-shadow:0 4px 30px rgba(255,215,0,0.3) !important; }
.fs-hud-celestial .fs-hud-label { color:rgba(255,215,0,.55) !important; letter-spacing:3px !important; font-family:Georgia,serif !important; font-style:italic !important; font-size:9px !important; }
.fs-hud-celestial .fs-hud-value { color:#ffd700 !important; text-shadow:0 0 12px #ffd700 !important; font-family:Georgia,serif !important; }
.fs-hud-celestial .fs-hud-win-value { color:#ff9800 !important; text-shadow:0 0 12px #ff9800 !important; }
/* Celestial Summary */
.fs-summary-celestial { background:linear-gradient(160deg,rgba(40,20,0,0.98),rgba(25,12,0,0.98)) !important; border-color:rgba(255,215,0,.7) !important; box-shadow:0 0 100px rgba(255,215,0,.4) !important; }
.fs-summary-celestial .fs-summary-label { color:#ffd700 !important; font-family:Georgia,serif !important; letter-spacing:3px !important; font-style:italic !important; }
.fs-summary-celestial .fs-summary-amount { color:#ffd700 !important; text-shadow:0 0 25px #ffd700,0 0 50px #ff9800 !important; }
.fs-summary-celestial .fs-summary-close-btn { background:linear-gradient(135deg,#ffd700,#ff9800) !important; color:#1a0900 !important; }

/* ── IRONREEL — Steampunk/Industrial ────────────────────────────────────── */
.fs-provider-ironreel .fs-themed-bg { background:radial-gradient(ellipse at center,#1e0d00 0%,#0d0600 60%,#060300 100%); }
.fs-provider-ironreel .fs-themed-bg::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 50%,rgba(205,127,50,0.12) 0%,transparent 40%),radial-gradient(circle at 80% 50%,rgba(139,69,19,0.1) 0%,transparent 40%); }
.fs-provider-ironreel .fs-themed-bg::after { content:'⚙ ⚙ ⚙'; position:absolute; font-size:120px; color:rgba(205,127,50,0.04); width:100%; top:50%; left:0; transform:translateY(-50%); letter-spacing:60px; text-align:center; animation:fsGearTurn 20s linear infinite; pointer-events:none; }
@keyframes fsGearTurn { 0%{transform:translateY(-50%) rotate(0deg)} 100%{transform:translateY(-50%) rotate(360deg)} }
.fs-provider-ironreel .fs-themed-content { background:linear-gradient(160deg,rgba(30,15,0,0.97),rgba(20,10,0,0.97)); border:3px solid rgba(205,127,50,0.6); border-radius:8px; box-shadow:0 0 50px rgba(205,127,50,0.35),inset 0 0 30px rgba(139,69,19,0.1); }
.fs-provider-ironreel .fs-themed-content::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:repeating-linear-gradient(90deg,#cd7f32 0px,#cd7f32 8px,transparent 8px,transparent 12px); opacity:.7; }
.fs-provider-ironreel .fs-provider-icon { font-size:56px; margin-bottom:12px; animation:fsGearIconSpin 8s linear infinite; }
@keyframes fsGearIconSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
.fs-provider-ironreel .fs-provider-label { font-family:"Times New Roman",serif; font-size:11px; letter-spacing:5px; color:rgba(205,127,50,.7); margin-bottom:8px; text-transform:uppercase; }
.fs-provider-ironreel .fs-provider-title { font-family:"Times New Roman",serif; font-size:26px; font-weight:700; color:#cd7f32; text-shadow:0 0 15px rgba(205,127,50,.7),0 2px 4px rgba(0,0,0,.8); letter-spacing:2px; margin-bottom:4px; }
.fs-provider-ironreel .fs-provider-count { font-family:"Times New Roman",serif; font-size:90px; font-weight:900; background:linear-gradient(180deg,#f5c842,#cd7f32,#8b4513); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; filter:drop-shadow(0 4px 8px rgba(0,0,0,.8)); }
.fs-provider-ironreel .fs-provider-sublabel { font-family:"Times New Roman",serif; font-size:14px; letter-spacing:6px; color:rgba(205,127,50,.6); margin-top:4px; }
.fs-provider-ironreel .fs-provider-desc { font-family:"Times New Roman",serif; font-size:13px; color:rgba(200,160,100,.5); margin-top:14px; font-style:italic; }
/* Ironreel HUD */
.fs-hud-ironreel { background:linear-gradient(90deg,rgba(30,15,0,0.98),rgba(20,10,0,0.98)) !important; border-bottom:3px solid rgba(205,127,50,.7) !important; box-shadow:0 4px 25px rgba(205,127,50,.25) !important; }
.fs-hud-ironreel .fs-hud-label { color:rgba(205,127,50,.55) !important; letter-spacing:3px !important; font-family:"Times New Roman",serif !important; font-size:9px !important; }
.fs-hud-ironreel .fs-hud-value { color:#cd7f32 !important; text-shadow:0 0 8px #cd7f32 !important; font-family:"Times New Roman",serif !important; }
.fs-hud-ironreel .fs-hud-win-value { color:#f5c842 !important; text-shadow:0 0 10px #f5c842 !important; }
/* Ironreel Summary */
.fs-summary-ironreel { background:linear-gradient(160deg,rgba(30,15,0,0.98),rgba(20,10,0,0.98)) !important; border-color:rgba(205,127,50,.7) !important; border-radius:8px !important; box-shadow:0 0 60px rgba(205,127,50,.35) !important; }
.fs-summary-ironreel .fs-summary-label { color:#cd7f32 !important; font-family:"Times New Roman",serif !important; letter-spacing:4px !important; }
.fs-summary-ironreel .fs-summary-amount { color:#f5c842 !important; text-shadow:0 0 20px #cd7f32 !important; }
.fs-summary-ironreel .fs-summary-close-btn { background:linear-gradient(135deg,#cd7f32,#8b4513) !important; }

/* ── VAULTX — Luxury Casino ─────────────────────────────────────────────── */
.fs-provider-vaultx .fs-themed-bg { background:radial-gradient(ellipse at 50% 40%,#0a1f0a 0%,#050f05 60%,#020802 100%); }
.fs-provider-vaultx .fs-themed-bg::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(184,150,12,0.1) 0%,transparent 60%),linear-gradient(0deg,rgba(45,138,78,0.05) 0%,transparent 100%); }
.fs-provider-vaultx .fs-themed-bg::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(184,150,12,0.015) 20px,rgba(184,150,12,0.015) 21px); pointer-events:none; }
.fs-provider-vaultx .fs-themed-content { background:linear-gradient(160deg,rgba(5,18,5,0.97),rgba(10,25,10,0.97)); border:2px solid rgba(184,150,12,0.6); border-radius:12px; box-shadow:0 0 80px rgba(184,150,12,0.3),inset 0 0 40px rgba(45,138,78,0.05); }
.fs-provider-vaultx .fs-themed-content::before { content:''; position:absolute; top:8px; left:8px; right:8px; bottom:8px; border:1px solid rgba(184,150,12,0.2); border-radius:10px; pointer-events:none; }
.fs-provider-vaultx .fs-provider-icon { font-size:58px; margin-bottom:12px; filter:drop-shadow(0 0 20px rgba(184,150,12,.8)); animation:fsIconFloat 3s ease-in-out infinite alternate; }
.fs-provider-vaultx .fs-provider-label { font-family:Arial,sans-serif; font-size:10px; letter-spacing:7px; color:rgba(184,150,12,.65); margin-bottom:8px; }
.fs-provider-vaultx .fs-provider-title { font-family:Arial,sans-serif; font-size:26px; font-weight:900; color:#b8960c; text-shadow:0 0 15px rgba(184,150,12,.6); letter-spacing:3px; margin-bottom:4px; }
.fs-provider-vaultx .fs-provider-count { font-family:Arial,sans-serif; font-size:92px; font-weight:900; background:linear-gradient(180deg,#fff8a0,#b8960c,#2d8a4e); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; filter:drop-shadow(0 4px 12px rgba(0,0,0,.9)); }
.fs-provider-vaultx .fs-provider-sublabel { font-family:Arial,sans-serif; font-size:12px; letter-spacing:8px; color:rgba(184,150,12,.55); margin-top:4px; }
.fs-provider-vaultx .fs-provider-desc { font-family:Arial,sans-serif; font-size:12px; color:rgba(150,200,150,.5); margin-top:14px; }
/* Vaultx HUD */
.fs-hud-vaultx { background:linear-gradient(90deg,rgba(5,18,5,0.98),rgba(10,25,10,0.98)) !important; border-bottom:2px solid rgba(184,150,12,.7) !important; box-shadow:0 4px 30px rgba(184,150,12,.2) !important; }
.fs-hud-vaultx .fs-hud-label { color:rgba(184,150,12,.55) !important; letter-spacing:4px !important; font-size:8px !important; }
.fs-hud-vaultx .fs-hud-value { color:#b8960c !important; text-shadow:0 0 10px rgba(184,150,12,.6) !important; }
.fs-hud-vaultx .fs-hud-win-value { color:#2d8a4e !important; text-shadow:0 0 10px rgba(45,138,78,.6) !important; }
/* Vaultx Summary */
.fs-summary-vaultx { background:linear-gradient(160deg,rgba(5,18,5,0.98),rgba(10,25,10,0.98)) !important; border-color:rgba(184,150,12,.7) !important; box-shadow:0 0 80px rgba(184,150,12,.3) !important; }
.fs-summary-vaultx .fs-summary-label { color:#b8960c !important; letter-spacing:5px !important; }
.fs-summary-vaultx .fs-summary-amount { color:#b8960c !important; text-shadow:0 0 20px rgba(184,150,12,.8) !important; }
.fs-summary-vaultx .fs-summary-close-btn { background:linear-gradient(135deg,#b8960c,#2d8a4e) !important; }

/* ── PHANTOMWORKS — Dark/Occult ─────────────────────────────────────────── */
.fs-provider-phantomworks .fs-themed-bg { background:radial-gradient(ellipse at 50% 40%,#1e0035 0%,#0d001a 60%,#050010 100%); }
.fs-provider-phantomworks .fs-themed-bg::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 60%,rgba(191,90,242,0.15) 0%,transparent 50%),radial-gradient(ellipse at 70% 30%,rgba(123,47,255,0.12) 0%,transparent 45%); animation:fsPhantomMist 5s ease-in-out infinite alternate; }
.fs-provider-phantomworks .fs-themed-bg::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 100%,rgba(191,90,242,0.2) 0%,transparent 40%); animation:fsPhantomRise 3s ease-in-out infinite alternate; }
@keyframes fsPhantomMist { 0%{opacity:.5;transform:scale(1)} 100%{opacity:1;transform:scale(1.05)} }
@keyframes fsPhantomRise { 0%{opacity:.3;transform:translateY(0)} 100%{opacity:.8;transform:translateY(-10px)} }
.fs-provider-phantomworks .fs-themed-content { background:linear-gradient(160deg,rgba(20,0,40,0.97),rgba(10,0,25,0.97)); border:1px solid rgba(191,90,242,0.5); border-radius:16px; box-shadow:0 0 80px rgba(191,90,242,0.35),0 0 160px rgba(123,47,255,0.2),inset 0 0 50px rgba(191,90,242,0.05); }
.fs-provider-phantomworks .fs-provider-icon { font-size:58px; margin-bottom:12px; filter:drop-shadow(0 0 20px #bf5af2); animation:fsPhantomIconBob 2s ease-in-out infinite alternate; }
@keyframes fsPhantomIconBob { 0%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 15px #bf5af2)} 100%{transform:translateY(-8px) scale(1.05);filter:drop-shadow(0 0 30px #bf5af2) drop-shadow(0 0 60px #7b2fff)} }
.fs-provider-phantomworks .fs-provider-label { font-family:Georgia,serif; font-size:11px; letter-spacing:5px; color:rgba(191,90,242,.65); margin-bottom:8px; font-style:italic; }
.fs-provider-phantomworks .fs-provider-title { font-family:Georgia,serif; font-size:26px; font-weight:700; background:linear-gradient(135deg,#bf5af2,#7b2fff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:2px; margin-bottom:4px; }
.fs-provider-phantomworks .fs-provider-count { font-family:Georgia,serif; font-size:90px; font-weight:900; color:#bf5af2; text-shadow:0 0 20px #bf5af2,0 0 50px #7b2fff; line-height:1; animation:fsPhantomCountGlow 2s ease-in-out infinite alternate; }
@keyframes fsPhantomCountGlow { 0%{text-shadow:0 0 20px #bf5af2,0 0 40px #7b2fff} 100%{text-shadow:0 0 40px #bf5af2,0 0 80px #7b2fff,0 0 120px rgba(191,90,242,.5)} }
.fs-provider-phantomworks .fs-provider-sublabel { font-family:Georgia,serif; font-size:13px; letter-spacing:5px; color:rgba(191,90,242,.6); font-style:italic; margin-top:4px; }
.fs-provider-phantomworks .fs-provider-desc { font-family:Georgia,serif; font-size:13px; color:rgba(220,180,255,.45); margin-top:14px; font-style:italic; }
/* Phantomworks HUD */
.fs-hud-phantomworks { background:linear-gradient(90deg,rgba(20,0,40,0.98),rgba(10,0,25,0.98)) !important; border-bottom:2px solid rgba(191,90,242,.6) !important; box-shadow:0 4px 30px rgba(191,90,242,.25) !important; }
.fs-hud-phantomworks .fs-hud-label { color:rgba(191,90,242,.5) !important; letter-spacing:3px !important; font-family:Georgia,serif !important; font-style:italic !important; font-size:9px !important; }
.fs-hud-phantomworks .fs-hud-value { color:#bf5af2 !important; text-shadow:0 0 10px #bf5af2 !important; font-family:Georgia,serif !important; }
.fs-hud-phantomworks .fs-hud-win-value { color:#7b2fff !important; text-shadow:0 0 10px #7b2fff !important; }
/* Phantomworks Summary */
.fs-summary-phantomworks { background:linear-gradient(160deg,rgba(20,0,40,0.98),rgba(10,0,25,0.98)) !important; border-color:rgba(191,90,242,.6) !important; box-shadow:0 0 100px rgba(191,90,242,.4) !important; }
.fs-summary-phantomworks .fs-summary-label { color:#bf5af2 !important; font-family:Georgia,serif !important; letter-spacing:3px !important; font-style:italic !important; }
.fs-summary-phantomworks .fs-summary-amount { color:#bf5af2 !important; text-shadow:0 0 25px #bf5af2,0 0 50px #7b2fff !important; }
.fs-summary-phantomworks .fs-summary-close-btn { background:linear-gradient(135deg,#bf5af2,#7b2fff) !important; }

/* ── ARCADEFORGE — Retro/Neon ───────────────────────────────────────────── */
.fs-provider-arcadeforge .fs-themed-bg { background:#000428; }
.fs-provider-arcadeforge .fs-themed-bg::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,0,128,0.08) 0%,transparent 30%,rgba(0,255,136,0.06) 100%),repeating-linear-gradient(90deg,transparent,transparent 30px,rgba(0,255,136,0.02) 30px,rgba(0,255,136,0.02) 31px),repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(255,0,128,0.02) 30px,rgba(255,0,128,0.02) 31px); }
.fs-provider-arcadeforge .fs-themed-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,0,128,.04) 0%,transparent 50%,rgba(255,0,128,.04) 100%); animation:fsArcadePulse 1s steps(2) infinite; }
@keyframes fsArcadePulse { 0%{opacity:1} 50%{opacity:.6} }
.fs-provider-arcadeforge .fs-themed-content { background:linear-gradient(135deg,rgba(0,4,40,0.97),rgba(0,0,20,0.97)); border:2px solid #ff0080; border-radius:4px; box-shadow:0 0 0 1px rgba(255,0,128,.2),0 0 40px rgba(255,0,128,.5),0 0 80px rgba(0,255,136,.25),inset 0 0 20px rgba(255,0,128,.05); }
.fs-provider-arcadeforge .fs-provider-icon { font-size:56px; margin-bottom:12px; filter:drop-shadow(0 0 15px #ff0080); animation:fsArcadeIconBlink 0.8s steps(2) infinite; }
@keyframes fsArcadeIconBlink { 0%,100%{filter:drop-shadow(0 0 15px #ff0080)} 50%{filter:drop-shadow(0 0 30px #ff0080) drop-shadow(0 0 50px #00ff88)} }
.fs-provider-arcadeforge .fs-provider-label { font-family:"Courier New",monospace; font-size:11px; letter-spacing:4px; color:#00ff88; opacity:.8; margin-bottom:8px; animation:fsArcadeTextFlicker 3s infinite; }
@keyframes fsArcadeTextFlicker { 0%,90%,100%{opacity:.8} 92%{opacity:.1} 94%{opacity:.8} 96%{opacity:.2} 98%{opacity:.8} }
.fs-provider-arcadeforge .fs-provider-title { font-family:"Courier New",monospace; font-size:24px; font-weight:900; color:#ff0080; text-shadow:0 0 10px #ff0080,2px 2px 0 #00ff88; letter-spacing:3px; margin-bottom:4px; }
.fs-provider-arcadeforge .fs-provider-count { font-family:"Courier New",monospace; font-size:88px; font-weight:900; color:#00ff88; text-shadow:0 0 20px #00ff88,0 0 40px rgba(0,255,136,.6),-2px -2px 0 #ff0080,2px 2px 0 rgba(0,255,136,.3); line-height:1; animation:fsArcadeCountFlash 1.2s ease-in-out infinite alternate; }
@keyframes fsArcadeCountFlash { 0%{color:#00ff88;text-shadow:0 0 20px #00ff88,-2px -2px 0 #ff0080} 100%{color:#ff0080;text-shadow:0 0 20px #ff0080,2px 2px 0 #00ff88} }
.fs-provider-arcadeforge .fs-provider-sublabel { font-family:"Courier New",monospace; font-size:13px; letter-spacing:5px; color:rgba(0,255,136,.7); margin-top:4px; }
.fs-provider-arcadeforge .fs-provider-desc { font-family:"Courier New",monospace; font-size:11px; color:rgba(255,255,255,.4); margin-top:14px; letter-spacing:1px; }
/* Arcadeforge HUD */
.fs-hud-arcadeforge { background:linear-gradient(90deg,rgba(0,4,40,0.98),rgba(0,0,20,0.98)) !important; border-bottom:2px solid #ff0080 !important; box-shadow:0 4px 20px rgba(255,0,128,.4),0 0 40px rgba(0,255,136,.2) !important; }
.fs-hud-arcadeforge .fs-hud-label { color:#00ff88 !important; letter-spacing:3px !important; font-family:"Courier New",monospace !important; font-size:9px !important; }
.fs-hud-arcadeforge .fs-hud-value { color:#ff0080 !important; text-shadow:0 0 8px #ff0080,1px 1px 0 #00ff88 !important; font-family:"Courier New",monospace !important; }
.fs-hud-arcadeforge .fs-hud-win-value { color:#00ff88 !important; text-shadow:0 0 8px #00ff88 !important; }
/* Arcadeforge Summary */
.fs-summary-arcadeforge { background:linear-gradient(135deg,rgba(0,4,40,0.98),rgba(0,0,20,0.98)) !important; border-color:#ff0080 !important; border-radius:4px !important; box-shadow:0 0 60px rgba(255,0,128,.5),0 0 80px rgba(0,255,136,.3) !important; }
.fs-summary-arcadeforge .fs-summary-label { color:#ff0080 !important; font-family:"Courier New",monospace !important; letter-spacing:4px !important; text-shadow:0 0 10px #ff0080 !important; }
.fs-summary-arcadeforge .fs-summary-amount { color:#00ff88 !important; text-shadow:0 0 20px #00ff88,0 0 40px #ff0080 !important; }
.fs-summary-arcadeforge .fs-summary-close-btn { background:linear-gradient(135deg,#ff0080,#00ff88) !important; color:#000 !important; }

/* Shared float animation for icons */
@keyframes fsIconFloat { 0%{transform:translateY(0) scale(1)} 100%{transform:translateY(-10px) scale(1.06)} }
.csb-dd.csb-dd-open .csb-dd-body { max-height: 800px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Daily Cashback Modal v2 — Premium Emerald/Gold Theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Card ── */
.cb-modal-v2 {
    position: relative;
    background: linear-gradient(160deg, #0a2e1a 0%, #0d3d23 50%, #0a2e1a 100%);
    border: 2px solid #10b981;
    box-shadow:
        0 0 40px rgba(16, 185, 129, 0.4),
        inset 0 0 80px rgba(16, 185, 129, 0.05);
    border-radius: 20px;
    padding: 36px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    overflow: hidden;
}

/* ── Coin rain wrapper ── */
.cb-coin-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

/* ── Individual coin element ── */
.cb-coin {
    position: absolute;
    top: -60px;
    font-size: 22px;
    opacity: 0;
    display: none;
    animation: cbCoinFall var(--cb-dur, 1.4s) ease-in forwards;
    animation-delay: var(--cb-delay, 0s);
}

/* Coins only visible when wrapper has active class */
.cb-coins-active .cb-coin {
    display: inline-block;
}

@keyframes cbCoinFall {
    0% {
        transform: translateY(-60px) rotate(0deg);
        opacity: 1;
    }
    80% {
        opacity: 0.9;
    }
    100% {
        transform: translateY(420px) rotate(360deg);
        opacity: 0;
    }
}

/* ── Amount display ── */
.cb-amount-v2 {
    font-size: 56px;
    font-weight: 900;
    background: linear-gradient(135deg, #10b981, #34d399, #6ee7b7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 30px rgba(16, 185, 129, 0.5));
    margin: 4px 0 6px;
    line-height: 1.1;
    letter-spacing: -1px;
}

/* ── Claim button ── */
.cb-btn-v2 {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 12px;
    padding: 16px 40px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #fff;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
    position: relative;
    z-index: 1;
}

.cb-btn-v2:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.55);
}

.cb-btn-v2:active:not(:disabled) {
    transform: translateY(0);
}

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

/* ── Claimed checkmark ── */
.cb-claimed-check {
    display: inline-block;
    font-size: 48px;
    font-weight: 900;
    color: #10b981;
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    margin-top: 8px;
    display: block;
    line-height: 1;
}

.cb-claimed-check--visible {
    transform: scale(1);
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   WIN VISUALIZATION SYSTEM — Per-Line Breakdown & Bonus Overlays
   ═══════════════════════════════════════════════ */

/* ── Per-Line Win Breakdown Panel ── */
.win-breakdown-panel {
  position: absolute;
  top: 50%;
  right: -280px;
  transform: translateY(-50%);
  width: 265px;
  background: linear-gradient(160deg, rgba(10,10,30,0.97) 0%, rgba(20,10,40,0.97) 100%);
  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 14px;
  padding: 14px 16px;
  z-index: 50;
  box-shadow: 0 0 30px rgba(255,215,0,0.18), inset 0 0 20px rgba(255,215,0,0.04);
  backdrop-filter: blur(12px);
  animation: wbdSlideIn 0.38s cubic-bezier(.22,.68,0,1.2) forwards;
  pointer-events: none;
}
.win-breakdown-panel.exiting {
  animation: wbdSlideOut 0.28s ease-in forwards;
}
@keyframes wbdSlideIn {
  from { right: -280px; opacity: 0; }
  to   { right: -280px; opacity: 1; }
}
/* Override: panel enters from right of reels container */
.reels-wrap { position: relative; }
.win-breakdown-panel {
  right: calc(-100% - 10px);
}
.win-breakdown-header {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(255,215,0,0.7);
  text-transform: uppercase;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,215,0,0.15);
  padding-bottom: 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.win-breakdown-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  animation: wbdLineIn 0.25s ease-out both;
}
.win-breakdown-line:last-of-type { border-bottom: none; }
@keyframes wbdLineIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.wbd-line-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #e8e0ff;
}
.wbd-line-num {
  background: rgba(255,215,0,0.15);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #ffd700;
  min-width: 28px;
  text-align: center;
}
.wbd-line-syms { font-size: 1rem; letter-spacing: 1px; }
.wbd-line-match { font-size: 0.65rem; color: rgba(200,180,255,0.6); }
.wbd-line-amount {
  font-weight: 800;
  font-size: 0.88rem;
  color: #4dff91;
}
.win-breakdown-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,215,0,0.25);
  font-weight: 800;
  font-size: 0.92rem;
}
.wbd-total-label { color: rgba(255,215,0,0.85); letter-spacing: 1px; font-size: 0.7rem; }
.wbd-total-amount {
  color: #ffd700;
  font-size: 1.05rem;
  text-shadow: 0 0 12px rgba(255,215,0,0.6);
}

/* ── Non-Winning Cell Dim ── */
.reel-cell.reel-cell-dim {
  opacity: 0.28 !important;
  filter: saturate(0.2) brightness(0.5) !important;
  transition: opacity 0.2s ease, filter 0.2s ease !important;
}
.reel-cell.reel-cell-winning {
  opacity: 1 !important;
  filter: none !important;
  z-index: 3;
}

/* ── Payline Line Labels (amount per line) ── */
.payline-win-label {
  position: absolute;
  background: linear-gradient(135deg, rgba(255,215,0,0.95), rgba(255,150,0,0.95));
  color: #0d0d1a;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 25;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(255,165,0,0.5);
  animation: plLabelPop 0.25s cubic-bezier(.22,.68,0,1.4) forwards;
  transform-origin: center center;
}
@keyframes plLabelPop {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Tumble / Avalanche Chain Counter ── */
.tumble-chain-badge {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff6d00, #ff2d55);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;
  padding: 6px 18px;
  border-radius: 30px;
  z-index: 60;
  pointer-events: none;
  letter-spacing: 1px;
  box-shadow: 0 0 20px rgba(255,80,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
  animation: chainBump 0.35s cubic-bezier(.22,.68,0,1.4);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.tumble-chain-badge .chain-x { font-size: 0.75rem; opacity: 0.85; margin-right: 2px; }
@keyframes chainBump {
  0%   { transform: translateX(-50%) scale(0.6); opacity: 0; }
  60%  { transform: translateX(-50%) scale(1.15); }
  100% { transform: translateX(-50%) scale(1);   opacity: 1; }
}
.tumble-chain-badge.chain-exit {
  animation: chainFade 0.4s ease-out forwards;
}
@keyframes chainFade {
  to { opacity: 0; transform: translateX(-50%) scale(0.8) translateY(-10px); }
}

/* ── Random Multiplier Reveal ── */
.mult-reveal-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(80,0,180,0.55) 0%, rgba(10,10,30,0.75) 100%);
  z-index: 55;
  pointer-events: none;
  animation: multRevFadeIn 0.2s ease-out;
}
@keyframes multRevFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mult-reveal-wheel {
  font-size: 3.5rem;
  animation: multSpin 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  line-height: 1;
}
@keyframes multSpin {
  0%   { transform: rotate(-180deg) scale(0.2); opacity: 0; }
  70%  { transform: rotate(15deg) scale(1.15); opacity: 1; }
  100% { transform: rotate(0deg) scale(1); opacity: 1; }
}
.mult-reveal-value {
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 30px rgba(180,100,255,0.9), 0 0 60px rgba(180,100,255,0.5);
  letter-spacing: 2px;
  animation: multValSlam 0.4s 0.55s cubic-bezier(.22,.68,0,1.4) both;
}
@keyframes multValSlam {
  from { opacity: 0; transform: scale(2) translateY(-10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.mult-reveal-label {
  font-size: 0.75rem;
  color: rgba(200,150,255,0.8);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 4px;
  animation: multValSlam 0.4s 0.7s both;
}

/* ── Zeus Multiplier Lightning ── */
.zeus-mult-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at top, rgba(100,180,255,0.35) 0%, rgba(10,10,30,0.8) 100%);
  z-index: 55;
  pointer-events: none;
  animation: zeusFlash 0.15s ease-out 3;
}
.zeus-bolt { font-size: 4rem; animation: zeusBolt 0.5s cubic-bezier(.22,.68,0,1.4); line-height: 1; }
@keyframes zeusBolt {
  0%   { transform: translateY(-40px) scale(0.3); opacity: 0; }
  60%  { transform: translateY(5px) scale(1.2); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.zeus-mult-value {
  font-size: 2.5rem;
  font-weight: 900;
  color: #87ceeb;
  text-shadow: 0 0 30px rgba(135,206,235,0.9), 0 0 60px rgba(100,180,255,0.6);
  animation: multValSlam 0.4s 0.45s cubic-bezier(.22,.68,0,1.4) both;
}

/* ── Money Collect Coin Animation ── */
.money-coin-fly {
  position: absolute;
  font-size: 1.3rem;
  pointer-events: none;
  z-index: 65;
  animation: coinFly var(--fly-dur, 0.8s) var(--fly-delay, 0s) cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes coinFly {
  0%   { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--fly-tx, -100px), var(--fly-ty, -80px)) scale(0.5) rotate(180deg); }
}
.money-collect-counter {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #0d0d1a;
  font-weight: 900;
  font-size: 1rem;
  padding: 6px 14px;
  border-radius: 20px;
  z-index: 60;
  box-shadow: 0 0 16px rgba(255,215,0,0.5);
  animation: counterPop 0.3s cubic-bezier(.22,.68,0,1.4);
  pointer-events: none;
}
.money-collect-counter .mc-label {
  font-size: 0.6rem;
  opacity: 0.75;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1px;
}
.money-collect-counter.mc-bump {
  animation: mcBump 0.25s ease-out;
}
@keyframes mcBump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ── Mystery Stack Reveal ── */
.mystery-reveal-cell {
  animation: mysteryFlip 0.5s ease-out forwards;
  transform-origin: center;
}
@keyframes mysteryFlip {
  0%   { transform: rotateY(0deg); filter: brightness(1); }
  40%  { transform: rotateY(90deg); filter: brightness(3) saturate(2); }
  60%  { transform: rotateY(90deg); filter: brightness(3) saturate(2); }
  100% { transform: rotateY(0deg); filter: brightness(1); }
}

/* ── Scatter Glow Waiting State ── */
.scatter-waiting-pulse {
  animation: scatterWait 1.1s ease-in-out infinite;
}
@keyframes scatterWait {
  0%,100% { box-shadow: 0 0 8px rgba(255,215,0,0.4); }
  50%      { box-shadow: 0 0 24px rgba(255,215,0,0.9), 0 0 6px rgba(255,215,0,0.5); }
}

/* ── Win Sequence Line Annotation (absolute positioned over SVG) ── */
.payline-amount-tag {
  position: absolute;
  background: rgba(10,10,30,0.9);
  border: 1px solid rgba(255,215,0,0.5);
  color: #ffd700;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  pointer-events: none;
  z-index: 30;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: tagPop 0.2s ease-out;
}
@keyframes tagPop {
  from { transform: translate(-50%,-50%) scale(0); opacity: 0; }
  to   { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}

        /* ── Lucky Hour Banner ── */
        .lucky-hour-banner {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1050;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 16px;
            background: linear-gradient(90deg, #b8860b 0%, #ffd700 25%, #ffec80 50%, #ffd700 75%, #b8860b 100%);
            background-size: 200% 100%;
            color: #1a0a00;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            font-size: 0.95rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
            animation: luckyHourShimmer 3s linear infinite, luckyHourPulse 2s ease-in-out infinite;
        }

        .lucky-hour-banner.hidden {
            display: none;
        }

        .lucky-hour-icon {
            font-size: 1.3rem;
            animation: luckyHourIconBounce 1.5s ease-in-out infinite;
        }

        .lucky-hour-label {
            font-size: 1.1rem;
            font-weight: 900;
            color: #1a0a00;
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
        }

        .lucky-hour-mult {
            background: rgba(0, 0, 0, 0.2);
            color: #fff;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 0.85rem;
            font-weight: 700;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        }

        .lucky-hour-sep {
            opacity: 0.5;
            font-size: 0.8rem;
        }

        .lucky-hour-timer {
            font-family: 'Courier New', monospace;
            font-size: 1.1rem;
            font-weight: 900;
            color: #1a0a00;
            background: rgba(255, 255, 255, 0.25);
            padding: 2px 8px;
            border-radius: 6px;
            min-width: 56px;
            text-align: center;
        }

        .lucky-hour-remaining {
            font-size: 0.75rem;
            font-weight: 600;
            opacity: 0.7;
            text-transform: lowercase;
        }

        @keyframes luckyHourShimmer {
            0%   { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        @keyframes luckyHourPulse {
            0%, 100% { box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); }
            50%      { box-shadow: 0 4px 30px rgba(255, 215, 0, 0.8), 0 2px 12px rgba(255, 200, 0, 0.4); }
        }

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

/* ── Leaderboard Widget ── */
@keyframes lbSlideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}
.lb-user { color: #e2e8f0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-game { color: #94a3b8; font-size: 0.75rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-amount { color: #22c55e; font-weight: 700; font-variant-numeric: tabular-nums; }
.win-multiplier-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(255,255,255,0.1);
    color: #94a3b8;
}
.win-multiplier-badge.big { background: rgba(34,197,94,0.2); color: #22c55e; }
.win-multiplier-badge.mega { background: rgba(168,85,247,0.2); color: #a855f7; }
.win-multiplier-badge.epic { background: rgba(251,191,36,0.2); color: #fbbf24; }
.lb-live-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22c55e;
    margin-right: 6px;
    animation: lbPulse 1.5s ease-in-out infinite;
}
/* ── Comeback Bonus Toast ── */
/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT 26 — HEADER CONSOLIDATION + DAILY MISSIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Compact header layout ──────────────────────────────────────────────── */
.site-header .header-actions {
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    overflow: hidden;
}

/* Make all icon-only btn-user buttons small and tight */
.btn-user {
    padding: 6px 8px !important;
    font-size: 12px !important;
    min-width: 32px !important;
    height: 32px !important;
    line-height: 1 !important;
    white-space: nowrap;
}
.btn-user svg { width: 14px !important; height: 14px !important; }

/* Compact balance display */
.balance-display {
    min-width: 90px !important;
    max-width: 130px !important;
    padding: 5px 10px !important;
}
.balance-label { font-size: 9px !important; letter-spacing: 1px; }
.balance-amount { font-size: 15px !important; }

/* Compact XP display — hide verbose bar text on small screens */
.xp-level-display { gap: 6px !important; }
.level-badge { width: 30px !important; height: 30px !important; font-size: 13px !important; }
.xp-info { min-width: 0; }
.tier-label { font-size: 8px !important; }
.xp-bar-text { font-size: 8px !important; }
.vip-mini-bar { display: none !important; } /* moved to sidebar */

/* Hide the STATS text button — it lives in the sidebar too */
.header-actions .btn-user[onclick*="openStatsModal"] { display: none !important; }

/* Hide the ? shortcuts button from header — keyboard shortcut still works */
.header-actions .btn-shortcuts { display: none !important; }

/* Compact WALLET/deposit button */
.btn-deposit {
    padding: 7px 12px !important;
    font-size: 11px !important;
    height: 32px !important;
    white-space: nowrap;
}
.btn-deposit svg { width: 12px !important; height: 12px !important; }

/* Hide shop/gift/contest buttons on narrow viewports — they live in sidebar */
@media (max-width: 900px) {

    .header-search { display: none !important; }
}

@media (max-width: 750px) {

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


/* ─── Deposit pulse CTA — wallet button pulses gold when balance < 100 ──── */
@keyframes _depositPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.6); }
    50%       { box-shadow: 0 0 0 8px rgba(251,191,36,0); }
}
.btn-deposit.pulse-cta {
    animation: _depositPulse 2s ease-in-out infinite;
}

/* ─── Daily missions bar ─────────────────────────────────────────────────── */
.dmb-title {
    color: #fbbf24;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}
.dmb-missions {
    display: flex;
    gap: 10px;
    flex: 1;
    flex-wrap: wrap;
}
.dmb-mission {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    min-width: 140px;
}
.dmb-mission:hover { border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.06); }
.dmb-mission.complete {
    border-color: rgba(74,222,128,0.5);
    background: rgba(74,222,128,0.08);
    color: #4ade80;
}
.dmb-mission.claimable {
    border-color: rgba(251,191,36,0.6);
    background: rgba(251,191,36,0.1);
    color: #fbbf24;
    animation: _missionPulse 1.8s ease-in-out infinite;
}
@keyframes _missionPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.4); }
    50%       { box-shadow: 0 0 0 6px rgba(251,191,36,0); }
}
.dmb-mission-icon { font-size: 16px; flex-shrink: 0; }
.dmb-mission-text { flex: 1; line-height: 1.3; }
.dmb-mission-name { font-weight: 600; font-size: 11px; }
.dmb-mission-progress { font-size: 10px; opacity: 0.7; margin-top: 2px; }
.dmb-mission-check { font-size: 14px; flex-shrink: 0; }
.dmb-reward {
    background: rgba(251,191,36,0.12);
    border: 1px solid rgba(251,191,36,0.3);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 11px;
    color: #fbbf24;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.dmb-reward:hover { background: rgba(251,191,36,0.22); transform: scale(1.04); }
.dmb-reward.all-done {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000;
    box-shadow: 0 0 16px rgba(251,191,36,0.5);
}

/* ─── VIP upgrade nudge banner ───────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT 27 — WELCOME OFFER · TOURNAMENT · CASHBACK · HOT-STREAK
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Welcome Bonus Popup ────────────────────────────────────────────────── */
@keyframes _wofadeIn { from { opacity:0 } to { opacity:1 } }

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

.woc-header {
    background: linear-gradient(135deg, #7c3aed 0%, #fbbf24 100%);
    padding: 22px 28px 18px;
    text-align: center;
    position: relative;
}
.woc-badge {
    display: inline-block;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.woc-title {
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
    margin-bottom: 4px;
}
.woc-subtitle { font-size: 13px; color: rgba(255,255,255,0.85); }

.woc-body { padding: 24px 28px; }

.woc-perks {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}
.woc-perk {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
}
.woc-perk-val {
    font-size: 22px;
    font-weight: 900;
    color: #fbbf24;
    line-height: 1;
    margin-bottom: 4px;
}
.woc-perk-label { font-size: 10px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 1px; }

.woc-urgency {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 18px;
    font-size: 12px;
    color: rgba(255,255,255,0.8);
}
.woc-urgency-dot { width:8px; height:8px; border-radius:50%; background:#ef4444; animation:_woPulse 1s ease-in-out infinite; flex-shrink:0; }
@keyframes _woPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.woc-urgency b { color: #fbbf24; }

.woc-cta {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
    color: #000;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.2s;
    box-shadow: 0 4px 20px rgba(251,191,36,0.4);
    margin-bottom: 12px;
}
.woc-cta:hover { transform: scale(1.02); box-shadow: 0 6px 28px rgba(251,191,36,0.55); }

.woc-decline {
    display: block;
    text-align: center;
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
    margin-top: 4px;
}
.woc-decline:hover { color: rgba(255,255,255,0.6); }

.woc-close {
    position: absolute;
    top: 12px; right: 14px;
    background: rgba(0,0,0,0.3);
    border: none; border-radius: 50%;
    width: 28px; height: 28px;
    color: #fff; font-size: 16px;
    cursor: pointer; line-height: 28px; text-align: center;
    transition: background 0.2s;
}
.woc-close:hover { background: rgba(0,0,0,0.5); }

/* ─── Weekly Tournament Widget ───────────────────────────────────────────── */
.tw-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.tw-icon { font-size: 22px; }
.tw-title { font-size: 14px; font-weight: 800; color: #a78bfa; letter-spacing: 1px; text-transform: uppercase; }
.tw-prize {
    margin-left: auto;
    background: linear-gradient(135deg, #a78bfa22, #fbbf2422);
    border: 1px solid rgba(251,191,36,0.3);
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #fbbf24;
}
.tw-countdown {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    margin-left: 6px;
}
.tw-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.tw-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    font-size: 12px;
    transition: background 0.15s;
}
.tw-row:hover { background: rgba(255,255,255,0.06); }
.tw-row.tw-me {
    background: rgba(167,139,250,0.12);
    border: 1px solid rgba(167,139,250,0.25);
}
.tw-rank { width: 22px; text-align: center; font-weight: 700; color: rgba(255,255,255,0.4); flex-shrink: 0; }
.tw-rank.gold   { color: #fbbf24; font-size: 15px; }
.tw-rank.silver { color: #94a3b8; font-size: 15px; }
.tw-rank.bronze { color: #cd7f32; font-size: 15px; }
.tw-name { flex: 1; color: rgba(255,255,255,0.8); font-weight: 500; }
.tw-row.tw-me .tw-name { color: #a78bfa; font-weight: 700; }
.tw-score { color: rgba(255,255,255,0.5); font-size: 11px; }
.tw-prize-col { font-size: 11px; font-weight: 700; color: #4ade80; margin-left: 6px; min-width: 42px; text-align: right; }
.tw-cta-row { display: flex; align-items: center; gap: 10px; }
.tw-play-btn {
    flex: 1;
    padding: 10px;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    border: none; border-radius: 8px;
    color: #fff; font-size: 12px; font-weight: 700;
    cursor: pointer; transition: opacity 0.2s;
}
.tw-play-btn:hover { opacity: 0.85; }
.tw-info { font-size: 10px; color: rgba(255,255,255,0.35); }

/* ─── Cashback Ribbon ────────────────────────────────────────────────────── */
.cr-icon { font-size: 20px; flex-shrink: 0; }
.cr-text { flex: 1; font-size: 12px; color: rgba(255,255,255,0.75); }
.cr-text b { color: #4ade80; font-size: 14px; }
.cr-claim {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none; border-radius: 8px;
    padding: 8px 16px; color: #fff;
    font-size: 12px; font-weight: 700;
    cursor: pointer; transition: opacity 0.2s; flex-shrink: 0;
}
.cr-claim:hover { opacity: 0.85; }
.cr-claim:disabled { opacity: 0.45; cursor: default; }
.cr-timer { font-size: 10px; color: rgba(255,255,255,0.4); text-align: right; flex-shrink: 0; }

/* ─── Hot Streak Notification ────────────────────────────────────────────── */
.hot-streak-notif {
    position: fixed;
    top: 80px; right: 16px;
    background: linear-gradient(135deg, #7c3aed, #fbbf24);
    border-radius: 12px;
    padding: 12px 18px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    z-index: 90000;
    box-shadow: 0 8px 28px rgba(124,58,237,0.5);
    display: flex; align-items: center; gap: 10px;
    animation: _hsSlideIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events: none;
}
@keyframes _hsSlideIn { from { transform:translateX(120%); opacity:0 } to { transform:translateX(0); opacity:1 } }
.hs-icon { font-size: 20px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT 28 — EXIT-INTENT · GAME OF THE DAY · RELOAD BONUS · MILESTONES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Exit-Intent Overlay ──────────────────────────────────────────────── */
.eic-close {
    position: absolute; top: 14px; right: 18px;
    background: none; border: none; color: rgba(255,255,255,0.4);
    font-size: 22px; cursor: pointer; line-height: 1;
    transition: color 0.2s;
}
.eic-close:hover { color: #fff; }
.eic-emoji { font-size: 52px; line-height: 1; margin-bottom: 12px; }
.eic-title {
    font-size: 26px; font-weight: 800;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: 8px; letter-spacing: -0.5px;
}
.eic-sub {
    font-size: 14px; color: rgba(255,255,255,0.65);
    margin-bottom: 22px; line-height: 1.5;
}
.eic-offer-box {
    background: rgba(251,191,36,0.08);
    border: 1px solid rgba(251,191,36,0.25);
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 20px;
    font-size: 13px; color: rgba(255,255,255,0.75);
}
.eic-offer-box b { color: #fbbf24; font-size: 15px; }
.eic-cta {
    width: 100%; padding: 15px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    border: none; border-radius: 12px;
    font-size: 16px; font-weight: 800;
    color: #000; cursor: pointer;
    animation: _s28pulse 2s ease-in-out infinite;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}
.eic-cta:hover { filter: brightness(1.1); }
.eic-dismiss {
    font-size: 11px; color: rgba(255,255,255,0.3);
    cursor: pointer; text-decoration: underline;
    background: none; border: none;
}
.eic-dismiss:hover { color: rgba(255,255,255,0.5); }

/* ─── Game of the Day ──────────────────────────────────────────────────── */
/* ─── Reload Bonus Strip ───────────────────────────────────────────────── */
.rbs-icon { font-size: 20px; flex-shrink: 0; }
.rbs-text { flex: 1; font-size: 13px; color: rgba(255,255,255,0.8); min-width: 160px; }
.rbs-text b { color: #a78bfa; }
.rbs-timer { font-size: 12px; color: rgba(255,255,255,0.45); flex-shrink: 0; }
.rbs-cta {
    background: rgba(124,58,237,0.3); border: 1px solid rgba(167,139,250,0.4);
    border-radius: 8px; padding: 7px 14px;
    font-size: 12px; font-weight: 700; color: #c4b5fd;
    cursor: pointer; white-space: nowrap;
    transition: background 0.2s;
}
.rbs-cta:hover { background: rgba(124,58,237,0.5); }

/* ─── Milestone Toast ──────────────────────────────────────────────────── */
.milestone-toast {
    position: fixed;
    bottom: 80px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #1a0a2e, #0f0f1a);
    border: 2px solid rgba(251,191,36,0.5);
    border-radius: 16px;
    padding: 16px 28px;
    text-align: center;
    color: #fff;
    z-index: 95000;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 24px rgba(251,191,36,0.2);
    animation: _s28toastIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
    min-width: 260px;
    pointer-events: none;
}
.mt-emoji { font-size: 32px; display: block; margin-bottom: 6px; }
.mt-title { font-size: 15px; font-weight: 800; color: #fbbf24; margin-bottom: 3px; }
.mt-sub { font-size: 12px; color: rgba(255,255,255,0.6); }
@keyframes _s28toastIn { from { opacity:0; transform:translateX(-50%) translateY(20px) scale(0.9) } to { opacity:1; transform:translateX(-50%) translateY(0) scale(1) } }

/* ─── Shared Sprint 28 keyframes ────────────────────────────────────────── */
@keyframes _s28fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes _s28slideUp { from { opacity:0; transform:translateY(30px) } to { opacity:1; transform:translateY(0) } }
@keyframes _s28pulse { 0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,0.5)} 50%{box-shadow:0 0 0 10px rgba(251,191,36,0)} }

/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT 29 — LOSS RECOVERY · HAPPY HOUR · FLASH SALE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Loss Recovery Popup ──────────────────────────────────────────────── */
.lr-close {
    position: absolute; top: 14px; right: 18px;
    background: none; border: none; color: rgba(255,255,255,0.35);
    font-size: 20px; cursor: pointer; transition: color 0.2s;
}
.lr-close:hover { color: #fff; }
.lr-icon { font-size: 44px; margin-bottom: 10px; }
.lr-title {
    font-size: 22px; font-weight: 800; color: #fff;
    margin-bottom: 6px;
}
.lr-sub { font-size: 13px; color: rgba(255,255,255,0.55); margin-bottom: 16px; }
.lr-amount-box {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 10px; padding: 12px;
    margin-bottom: 16px;
    font-size: 13px; color: rgba(255,255,255,0.7);
}
.lr-amount { font-size: 28px; font-weight: 900; color: #f87171; display: block; }
.lr-offer-box {
    background: rgba(74,222,128,0.08);
    border: 1px solid rgba(74,222,128,0.25);
    border-radius: 10px; padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 13px; color: rgba(255,255,255,0.75);
}
.lr-offer-box b { color: #4ade80; font-size: 15px; }
.lr-cta {
    width: 100%; padding: 14px;
    background: linear-gradient(90deg, #16a34a, #22c55e);
    border: none; border-radius: 12px;
    font-size: 15px; font-weight: 800; color: #fff;
    cursor: pointer; margin-bottom: 10px;
    transition: filter 0.2s;
}
.lr-cta:hover { filter: brightness(1.1); }
.lr-dismiss {
    font-size: 11px; color: rgba(255,255,255,0.3);
    cursor: pointer; text-decoration: underline;
    background: none; border: none;
}

/* ─── Happy Hour Banner ────────────────────────────────────────────────── */
.hh-icon { font-size: 20px; flex-shrink: 0; }
.hh-text {
    font-size: 13px; font-weight: 800;
    color: #fff; letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.hh-text b { color: #fde68a; }
.hh-timer {
    font-size: 12px; color: rgba(255,255,255,0.8);
    font-variant-numeric: tabular-nums;
}
.hh-cta {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px; padding: 5px 14px;
    font-size: 12px; font-weight: 700; color: #fff;
    cursor: pointer; white-space: nowrap;
    transition: background 0.2s;
}
.hh-cta:hover { background: rgba(255,255,255,0.25); }
.hh-close {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: rgba(255,255,255,0.5);
    font-size: 16px; cursor: pointer; line-height: 1;
    transition: color 0.2s;
}
.hh-close:hover { color: #fff; }
@keyframes _s29hhShimmer {
    0%,100% { background-position: 0% 0% }
    50% { background-position: 100% 0% }
}

/* ─── Flash Sale Modal ─────────────────────────────────────────────────── */
.flash-sale-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 220000;
    display: flex; align-items: center; justify-content: center;
    animation: _s29fadeIn 0.25s ease;
    backdrop-filter: blur(6px);
}
.flash-sale-card {
    background: linear-gradient(160deg, #1a1000, #0f0f1a);
    border: 2px solid rgba(251,191,36,0.5);
    border-radius: 20px;
    padding: 36px 32px 28px;
    max-width: 420px; width: 92%;
    text-align: center; position: relative;
    box-shadow: 0 0 60px rgba(251,191,36,0.2), 0 24px 60px rgba(0,0,0,0.7);
    animation: _s29slideUp 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.fs-close {
    position: absolute; top: 14px; right: 18px;
    background: none; border: none; color: rgba(255,255,255,0.35);
    font-size: 20px; cursor: pointer; transition: color 0.2s;
}
.fs-close:hover { color: #fff; }
.fs-icon { font-size: 48px; margin-bottom: 8px; animation: _s29zap 1s ease-in-out infinite; }
.fs-title {
    font-size: 11px; font-weight: 900; letter-spacing: 3px;
    color: #fbbf24; text-transform: uppercase; margin-bottom: 4px;
}
.fs-headline {
    font-size: 28px; font-weight: 900; color: #fff;
    margin-bottom: 6px; line-height: 1.1;
}
.fs-sub { font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 18px; }
.fs-countdown-wrap {
    background: rgba(251,191,36,0.06);
    border: 1px solid rgba(251,191,36,0.2);
    border-radius: 12px; padding: 14px;
    margin-bottom: 18px;
}
.fs-countdown-label { font-size: 10px; letter-spacing: 1.5px; color: rgba(255,255,255,0.4); margin-bottom: 6px; }
.fs-countdown {
    font-size: 38px; font-weight: 900;
    color: #fbbf24; font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
}
.fs-cta {
    width: 100%; padding: 16px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    border: none; border-radius: 12px;
    font-size: 16px; font-weight: 900; color: #000;
    cursor: pointer; margin-bottom: 10px;
    animation: _s29pulse 1.8s ease-in-out infinite;
    letter-spacing: 0.3px;
}
.fs-cta:hover { filter: brightness(1.1); }
.fs-dismiss {
    font-size: 11px; color: rgba(255,255,255,0.3);
    cursor: pointer; text-decoration: underline;
    background: none; border: none;
}
@keyframes _s29zap {
    0%,100% { transform: scale(1) rotate(-5deg) }
    50% { transform: scale(1.15) rotate(5deg) }
}

/* ─── Shared Sprint 29 keyframes ────────────────────────────────────────── */
@keyframes _s29fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes _s29slideUp { from { opacity:0; transform:translateY(32px) } to { opacity:1; transform:translateY(0) } }
@keyframes _s29pulse { 0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,0.5)} 50%{box-shadow:0 0 0 12px rgba(251,191,36,0)} }

/* ═══════════════════════════════════════════════════════════════════════════════
   SPRINT 30 — Referral Panel · VIP Progress Bar · Loyalty Shop
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Referral Panel ─────────────────────────────────────────────────────────── */
/* ── VIP Progress Bar ───────────────────────────────────────────────────────── */
.vp-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.vp-tier-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.85rem; font-weight: 700; padding: 4px 10px;
    border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px;
}
.vp-tier-bronze  { background: rgba(205,127,50,0.2);  color: #cd7f32; border: 1px solid rgba(205,127,50,0.3); }
.vp-tier-silver  { background: rgba(192,192,192,0.2);  color: #c0c0c0; border: 1px solid rgba(192,192,192,0.3); }
.vp-tier-gold    { background: rgba(251,191,36,0.2);   color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.vp-tier-platinum { background: rgba(229,228,226,0.15); color: #e5e4e2; border: 1px solid rgba(229,228,226,0.3); }
.vp-tier-diamond { background: rgba(185,242,255,0.15); color: #b9f2ff; border: 1px solid rgba(185,242,255,0.3); }
.vp-next-tier { font-size: 0.75rem; color: #888; }
.vp-next-tier b { color: #fbbf24; }
.vp-bar-wrap {
    height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px;
    overflow: hidden; position: relative;
}
.vp-bar-fill {
    height: 100%; border-radius: 4px; transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
    position: relative;
}
.vp-bar-fill::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    animation: _s30shimmer 2s infinite;
}
.vp-bar-bronze  { background: linear-gradient(90deg, #cd7f32, #daa520); }
.vp-bar-silver  { background: linear-gradient(90deg, #a8a8a8, #d4d4d4); }
.vp-bar-gold    { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.vp-bar-platinum { background: linear-gradient(90deg, #c4c4c4, #e5e4e2); }
.vp-bar-diamond { background: linear-gradient(90deg, #7dd3fc, #b9f2ff); }
.vp-xp-text {
    display: flex; justify-content: space-between; margin-top: 4px;
    font-size: 0.7rem; color: #666;
}
.vp-xp-text b { color: #aaa; }

/* ── Loyalty Shop Modal ─────────────────────────────────────────────────────── */
.ls-header {
    padding: 20px 24px; border-bottom: 1px solid rgba(251,191,36,0.12);
    display: flex; align-items: center; justify-content: space-between;
}
.ls-title { font-size: 1.2rem; font-weight: 700; color: #fbbf24; }
.ls-balance-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.25);
    border-radius: 20px; padding: 6px 14px; font-size: 0.85rem; color: #fbbf24;
    font-weight: 700;
}
.ls-close {
    background: none; border: none; color: #888; font-size: 1.4rem; cursor: pointer;
    transition: color 0.2s;
}
.ls-close:hover { color: #fff; }
.ls-body {
    flex: 1; overflow-y: auto; padding: 20px 24px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px;
}
.ls-item {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 16px; text-align: center;
    transition: border-color 0.2s, transform 0.15s; cursor: pointer;
}
.ls-item:hover { border-color: rgba(251,191,36,0.3); transform: translateY(-2px); }
.ls-item-icon { font-size: 2rem; margin-bottom: 8px; }
.ls-item-name { font-size: 0.85rem; font-weight: 600; color: #ddd; margin-bottom: 4px; }
.ls-item-desc { font-size: 0.7rem; color: #888; margin-bottom: 10px; line-height: 1.3; }
.ls-item-price {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.2);
    border-radius: 16px; padding: 4px 12px; font-size: 0.8rem; color: #fbbf24;
    font-weight: 700;
}
.ls-item.ls-sold-out { opacity: 0.4; pointer-events: none; }
.ls-item.ls-sold-out .ls-item-price { background: rgba(255,255,255,0.05); color: #666; border-color: rgba(255,255,255,0.1); }
.ls-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
    background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff;
    padding: 12px 24px; border-radius: 10px; font-weight: 600; font-size: 0.9rem;
    z-index: 9700; opacity: 0; transition: transform 0.4s, opacity 0.4s;
    box-shadow: 0 4px 20px rgba(34,197,94,0.4);
}
.ls-toast.ls-toast-show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ── Referral trigger button (lobby) ────────────────────────────────────────── */
/* ── Loyalty shop trigger (lobby) ───────────────────────────────────────────── */
/* ── Sprint 30 Keyframes ────────────────────────────────────────────────────── */
@keyframes _s30fadeIn {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes _s30shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}
/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {

    .ls-body { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SPRINT 31 — First Deposit Bonus · Piggy Bank · Spin Streak
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── First Deposit Bonus ────────────────────────────────────────────────────── */
.fd-content { position: relative; z-index: 1; }
.fd-title {
    font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: 8px;
    background: linear-gradient(135deg, #fbbf24, #fde68a);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.fd-subtitle { color: #aaa; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.5; }
.fd-amount {
    font-size: 3rem; font-weight: 900; color: #fbbf24;
    text-shadow: 0 0 30px rgba(251,191,36,0.4); margin-bottom: 4px;
}
.fd-amount-label { color: #888; font-size: 0.8rem; margin-bottom: 20px; }
.fd-steps {
    display: flex; justify-content: center; gap: 24px; margin-bottom: 24px;
}
.fd-step { text-align: center; }
.fd-step-num {
    width: 32px; height: 32px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem;
    margin-bottom: 6px; border: 2px solid rgba(251,191,36,0.3);
    color: #fbbf24; background: rgba(251,191,36,0.08);
}
.fd-step-label { font-size: 0.7rem; color: #888; }
.fd-cta {
    display: inline-block; background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000; font-weight: 800; padding: 14px 40px; border-radius: 12px;
    font-size: 1.1rem; border: none; cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 20px rgba(251,191,36,0.4);
}
.fd-cta:hover { transform: scale(1.05); box-shadow: 0 6px 30px rgba(251,191,36,0.5); }
.fd-close {
    position: absolute; top: 16px; right: 16px; background: none; border: none;
    color: #555; font-size: 1.3rem; cursor: pointer; z-index: 2;
    transition: color 0.2s;
}
.fd-close:hover { color: #fff; }
.fd-terms { font-size: 0.65rem; color: #555; margin-top: 12px; }

/* ── Piggy Bank Widget ──────────────────────────────────────────────────────── */
.pb-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; box-shadow: 0 4px 20px rgba(251,191,36,0.4);
    position: relative; animation: _s31piggyBounce 3s ease-in-out infinite;
}
.pb-amount-badge {
    position: absolute; top: -8px; right: -8px;
    background: #22c55e; color: #fff; font-size: 0.65rem; font-weight: 800;
    padding: 3px 7px; border-radius: 10px; min-width: 20px; text-align: center;
    box-shadow: 0 2px 8px rgba(34,197,94,0.4);
}
.pb-label {
    font-size: 0.65rem; color: #fbbf24; margin-top: 4px; font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* Piggy Bank Break Modal */
.pb-break-btn {
    background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #000;
    font-weight: 800; padding: 12px 32px; border-radius: 10px;
    border: none; cursor: pointer; font-size: 1rem;
    transition: transform 0.15s;
}
.pb-break-btn:hover { transform: scale(1.05); }
.pb-close-btn {
    background: none; border: 1px solid rgba(255,255,255,0.15); color: #888;
    padding: 10px 24px; border-radius: 10px; cursor: pointer; font-size: 0.85rem;
    margin-left: 10px; transition: border-color 0.2s, color 0.2s;
}
.pb-close-btn:hover { border-color: rgba(255,255,255,0.3); color: #ccc; }

/* ── Spin Streak Bar ────────────────────────────────────────────────────────── */
.ssb-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.ssb-title { font-size: 0.85rem; font-weight: 700; color: #fbbf24; }
.ssb-streak-count {
    font-size: 0.75rem; color: #22c55e; font-weight: 700;
    background: rgba(34,197,94,0.12); padding: 3px 10px; border-radius: 12px;
}
.ssb-days {
    display: flex; gap: 6px; justify-content: space-between;
}
.ssb-day {
    flex: 1; text-align: center; padding: 8px 4px;
    border-radius: 8px; border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03); transition: all 0.3s;
}
.ssb-day.ssb-claimed {
    background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.3);
}
.ssb-day.ssb-today {
    background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.3);
    animation: _s31todayPulse 2s infinite;
}
.ssb-day-num { font-size: 0.65rem; color: #888; font-weight: 600; }
.ssb-day-reward { font-size: 0.95rem; margin: 2px 0; }
.ssb-day-label { font-size: 0.6rem; color: #666; }
.ssb-day.ssb-claimed .ssb-day-num { color: #22c55e; }
.ssb-day.ssb-claimed .ssb-day-label { color: #22c55e; }
.ssb-day.ssb-today .ssb-day-num { color: #fbbf24; }
.ssb-day.ssb-today .ssb-day-label { color: #fbbf24; font-weight: 700; }

/* ── Sprint 31 Keyframes ────────────────────────────────────────────────────── */
@keyframes _s31fadeIn {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes _s31rotate {
    from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
@keyframes _s31piggyBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes _s31piggyShake {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}
@keyframes _s31todayPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.2); }
    50% { box-shadow: 0 0 12px 2px rgba(251,191,36,0.3); }
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {

    .fd-title { font-size: 1.5rem; }
    .fd-amount { font-size: 2.2rem; }
    .ssb-days { gap: 3px; }
    .ssb-day { padding: 6px 2px; }
    .pb-icon { width: 48px; height: 48px; font-size: 1.3rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Sprint 32 — Session Time Rewards, Win Multiplier Banner, Daily Challenges
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Session Time Rewards Bar ──────────────────────────────────────────── */

#sessionTimeBar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: linear-gradient(180deg, rgba(15,15,26,0.95) 0%, rgba(10,10,20,0.98) 100%);
    border-top: 1px solid rgba(251,191,36,0.15);
    padding: 10px 20px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#sessionTimeBar.active {
    display: flex;
}

#sessionTimeBar.has-streak-bar {
    bottom: 48px;
}

.str-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 600px;
    width: 100%;
    position: relative;
}

.str-bar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 24px;
    right: 24px;
    height: 2px;
    background: rgba(255,255,255,0.08);
    transform: translateY(-50%);
    z-index: 0;
}

.str-milestone {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(26,26,46,0.9);
    border: 2px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
    font-weight: 600;
    transition: all 0.4s ease;
    cursor: default;
    flex-shrink: 0;
}

.str-milestone span {
    line-height: 1;
}

.str-milestone.str-claimed {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-color: #fbbf24;
    color: #0f0f1a;
    box-shadow: 0 0 12px rgba(251,191,36,0.4);
}

.str-milestone.str-claimed::after {
    content: '\2713';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background: #22c55e;
    border-radius: 50%;
    font-size: 0.55rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(34,197,94,0.4);
}

.str-milestone.str-active {
    border-color: #fbbf24;
    color: #fbbf24;
    animation: _s32StrPulse 2s ease-in-out infinite;
}

.str-timer {
    font-size: 0.75rem;
    color: rgba(251,191,36,0.8);
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    min-width: 48px;
    text-align: center;
}

/* ── 2. Win Multiplier Event Banner ───────────────────────────────────────── */

#winMultiplierBanner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    z-index: 2000;
    pointer-events: none;
    opacity: 0;
    transition: none;
}

#winMultiplierBanner.active {
    pointer-events: auto;
    animation: _s32WmeSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#winMultiplierBanner.dismissing {
    animation: _s32WmeSlideOut 0.4s ease-in forwards;
}

.wme-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 50%, #ef4444 100%);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 8px 32px rgba(251,191,36,0.4), 0 4px 12px rgba(0,0,0,0.3),
                inset 0 1px 0 rgba(255,255,255,0.2);
    min-width: 320px;
    max-width: 90vw;
    animation: _s32WmePulse 2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.wme-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: _s32WmeSweep 3s ease-in-out infinite;
}

.wme-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.wme-text {
    font-size: 1rem;
    font-weight: 800;
    color: #0f0f1a;
    text-shadow: 0 1px 2px rgba(255,255,255,0.2);
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.wme-timer {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(15,15,26,0.7);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    white-space: nowrap;
}

.wme-close {
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(15,15,26,0.2);
    color: #0f0f1a;
    border-radius: 50%;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease;
    line-height: 1;
}

.wme-close:hover {
    background: rgba(15,15,26,0.35);
}

@keyframes _s32WmeSlideIn {
    0% {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes _s32WmeSlideOut {
    0% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
}

@keyframes _s32WmePulse {
    0%, 100% {
        box-shadow: 0 8px 32px rgba(251,191,36,0.4), 0 4px 12px rgba(0,0,0,0.3),
                    inset 0 1px 0 rgba(255,255,255,0.2);
    }
    50% {
        box-shadow: 0 8px 40px rgba(251,191,36,0.6), 0 6px 20px rgba(249,115,22,0.3),
                    inset 0 1px 0 rgba(255,255,255,0.3);
    }
}

@keyframes _s32WmeSweep {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

/* ── 3. Daily Challenge Panel ─────────────────────────────────────────────── */

#dailyChallengePanel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 340px;
    max-width: 90vw;
    z-index: 1800;
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
    border-left: 1px solid rgba(251,191,36,0.15);
    box-shadow: -8px 0 40px rgba(0,0,0,0.6);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#dailyChallengePanel.active {
    transform: translateX(0);
    animation: _s32DcSlide 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.dc-header {
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.dc-header h3 {
    margin: 0 0 6px 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: 0.3px;
}

.dc-header .dc-refresh-timer {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    font-variant-numeric: tabular-nums;
}

.dc-cards {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dc-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.dc-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}

.dc-card.dc-completed {
    border-color: rgba(34,197,94,0.4);
    background: rgba(34,197,94,0.06);
}

.dc-card.dc-completed .dc-desc {
    text-decoration: line-through;
    opacity: 0.5;
}

.dc-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dc-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(251,191,36,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.dc-card.dc-completed .dc-card-icon {
    background: rgba(34,197,94,0.15);
}

.dc-card-info {
    flex: 1;
    min-width: 0;
}

.dc-desc {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.4;
    margin: 0;
    transition: opacity 0.3s ease;
}

.dc-reward {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(251,191,36,0.1);
    padding: 3px 8px;
    border-radius: 6px;
    margin-top: 4px;
}

.dc-progress {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.dc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}

.dc-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 100%;
    background: rgba(255,255,255,0.3);
    border-radius: 0 3px 3px 0;
    filter: blur(2px);
}

.dc-card.dc-completed .dc-progress-fill {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.dc-progress-text {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
    text-align: right;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* FAB toggle button */
/* Daily Challenge panel close button */
.dc-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
    border-radius: 50%;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.dc-close:hover {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.8);
}

/* Panel overlay backdrop */
.dc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1798;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.dc-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

@keyframes _s32DcSlide {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* ── Sprint 32 Responsive ─────────────────────────────────────────────────── */
@media (max-width: 600px) {

    #sessionTimeBar { padding: 8px 12px; gap: 8px; }
    .str-milestone { width: 30px; height: 30px; font-size: 0.55rem; }
    .str-bar { gap: 10px; }
    .str-timer { font-size: 0.65rem; }

    .wme-banner { min-width: unset; padding: 10px 16px; gap: 8px; }
    .wme-text { font-size: 0.85rem; }
    .wme-icon { font-size: 1.3rem; }

    #dailyChallengePanel { width: 100%; max-width: 100vw; }
}



/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT 33 — Deposit Match Popup, Lucky Spin Wheel, Weekend Tournament
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Deposit Match Popup (#depositMatchOverlay) ─────────────────────── */

/* ── 2. Lucky Spin Wheel (#luckyWheelOverlay) ──────────────────────────── */

.lw-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lw-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.lw-wheel-container {
    position: relative;
    width: 320px;
    height: 320px;
    margin-bottom: 20px;
}

.lw-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 4px solid #fbbf24;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.1s;
}

.lw-wheel.spinning {
    animation: _s33LwSpin 4s cubic-bezier(0.17, 0.67, 0.12, 0.99) forwards;
}

.lw-segment {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 0;
    left: 50%;
    transform-origin: 0% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    padding-left: 18px;
    padding-bottom: 20px;
}

.lw-segment:nth-child(odd) {
    background: linear-gradient(135deg, #fbbf24 0%, #d4a017 100%);
    color: #0f0f1a;
    text-shadow: none;
}

.lw-segment:nth-child(even) {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
}

.lw-segment:nth-child(1) { transform: rotate(0deg) skewY(-45deg); }
.lw-segment:nth-child(2) { transform: rotate(45deg) skewY(-45deg); }
.lw-segment:nth-child(3) { transform: rotate(90deg) skewY(-45deg); }
.lw-segment:nth-child(4) { transform: rotate(135deg) skewY(-45deg); }
.lw-segment:nth-child(5) { transform: rotate(180deg) skewY(-45deg); }
.lw-segment:nth-child(6) { transform: rotate(225deg) skewY(-45deg); }
.lw-segment:nth-child(7) { transform: rotate(270deg) skewY(-45deg); }
.lw-segment:nth-child(8) { transform: rotate(315deg) skewY(-45deg); }

.lw-pointer {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 26px solid #fbbf24;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
    z-index: 2;
}

.lw-spin-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24 0%, #d4a017 100%);
    border: 3px solid #0f0f1a;
    color: #0f0f1a;
    font-size: 0.85rem;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.4);
    transition: transform 0.15s ease;
}

.lw-spin-btn:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

.lw-spin-btn:active {
    transform: translate(-50%, -50%) scale(0.95);
}

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

.lw-prize-display {
    text-align: center;
    padding: 16px 32px;
    min-width: 220px;
    background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%);
    border: 2px solid #fbbf24;
    border-radius: 14px;
    color: #fbbf24;
    font-size: 1.4rem;
    font-weight: 800;
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.2);
}

.lw-prize-display.revealed {
    animation: _s33LwPrizeReveal 0.5s ease-out both;
    pointer-events: auto;
}

.lw-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.lw-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

@keyframes _s33LwSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(2160deg);
    }
}

@keyframes _s33LwPrizeReveal {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }
    60% {
        opacity: 1;
        transform: scale(1.12);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── 3. Weekend Tournament Banner (#weekendTournamentBar) ──────────────── */

.wt-bar {
    display: none;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 12px 24px;
    background: linear-gradient(90deg, #0f0f1a 0%, #1a1a2e 50%, #0f0f1a 100%);
    border-bottom: 2px solid rgba(251, 191, 36, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 500;
    animation: _s33WtSlide 0.5s ease-out both;
}

.wt-bar.active {
    display: flex;
}

.wt-rank {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fbbf24;
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
}

.wt-rank::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}

.wt-prize {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

.wt-prize span {
    color: #fbbf24;
    font-weight: 800;
}

.wt-timer {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wt-playbtn {
    margin-left: auto;
    padding: 8px 22px;
    background: linear-gradient(135deg, #fbbf24 0%, #d4a017 100%);
    border: none;
    border-radius: 8px;
    color: #0f0f1a;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 12px rgba(251, 191, 36, 0.3);
    white-space: nowrap;
}

.wt-playbtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(251, 191, 36, 0.45);
}

.wt-playbtn:active {
    transform: translateY(0);
}

.wt-leaderboard {
    display: none;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 12px 24px;
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
    border-bottom: 1px solid rgba(251, 191, 36, 0.15);
}

.wt-leaderboard.expanded {
    display: block;
}

.wt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.88rem;
    transition: background 0.15s ease;
}

.wt-row:last-child {
    border-bottom: none;
}

.wt-row:hover {
    background: rgba(251, 191, 36, 0.04);
}

.wt-row.top3 {
    color: #fff;
    font-weight: 700;
}

.wt-row.top3:nth-child(1) {
    border-left: 3px solid #fbbf24;
    background: rgba(251, 191, 36, 0.06);
}

.wt-row.top3:nth-child(2) {
    border-left: 3px solid #c0c0c0;
    background: rgba(192, 192, 192, 0.04);
}

.wt-row.top3:nth-child(3) {
    border-left: 3px solid #cd7f32;
    background: rgba(205, 127, 50, 0.04);
}

@keyframes _s33WtSlide {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ── Sprint 33 Responsive ─────────────────────────────────────────────────── */
@media (max-width: 600px) {

    .lw-wheel-container {
        width: 260px;
        height: 260px;
    }
    .lw-spin-btn {
        width: 52px;
        height: 52px;
        font-size: 0.75rem;
    }
    .lw-prize-display {
        font-size: 1.1rem;
        padding: 12px 20px;
    }

    .wt-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 14px;
    }
    .wt-rank {
        font-size: 0.9rem;
    }
    .wt-prize {
        font-size: 0.82rem;
    }
    .wt-timer {
        font-size: 0.75rem;
    }
    .wt-playbtn {
        padding: 7px 16px;
        font-size: 0.8rem;
    }
    .wt-leaderboard {
        padding: 8px 14px;
    }
    .wt-row {
        padding: 6px 8px;
        font-size: 0.8rem;
    }
}


/* ================================================================
   SPRINT 34 — Loss Comfort, Achievement Popup, Flash Deal Banner
   Appended — do NOT edit above this line
   ================================================================ */

/* --------------------------------------------------
   1. Loss Streak Comfort Overlay (#lossComfortOverlay)
   -------------------------------------------------- */

#lossComfortOverlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 20, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

#lossComfortOverlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* --------------------------------------------------
   2. Achievement Popup (#achievementPopup)
   -------------------------------------------------- */

@keyframes _s34AchSlideIn {
    0%   { opacity: 0; transform: translateX(100%) scale(0.9); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes _s34AchSlideOut {
    0%   { opacity: 1; transform: translateX(0) scale(1); }
    100% { opacity: 0; transform: translateX(110%) scale(0.9); }
}

@keyframes _s34AchGlint {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

#achievementPopup {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 12500;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.ach-popup {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-left: 4px solid #fbbf24;
    border-radius: 12px;
    padding: 14px 18px;
    min-width: 280px;
    max-width: 360px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45),
                0 0 20px rgba(251, 191, 36, 0.08);
    pointer-events: auto;
    animation: _s34AchSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    cursor: default;
}

.ach-popup.ach-exit {
    animation: _s34AchSlideOut 0.35s ease-in both;
}

.ach-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.05));
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.ach-content {
    flex: 1;
    min-width: 0;
}

.ach-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fbbf24;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(90deg, #fbbf24 30%, #fde68a 50%, #fbbf24 70%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: _s34AchGlint 3s ease-in-out 0.5s 1;
}

.ach-subtitle {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ach-reward {
    flex-shrink: 0;
    padding: 4px 10px;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fbbf24;
    white-space: nowrap;
}

/* --------------------------------------------------
   3. Countdown Flash Deal Banner (#flashDealBanner)
   -------------------------------------------------- */

@keyframes _s34FdBounceIn {
    0%   { opacity: 0; transform: translateX(-50%) translateY(100%) scale(0.9); }
    60%  { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1.02); }
    80%  { transform: translateX(-50%) translateY(3px) scale(0.99); }
    100% { transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes _s34FdUrgentGlow {
    0%, 100% { box-shadow: 0 6px 30px rgba(220, 38, 38, 0.3); }
    50%      { box-shadow: 0 6px 40px rgba(220, 38, 38, 0.55); }
}

#flashDealBanner {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11500;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#flashDealBanner.active {
    opacity: 1;
    pointer-events: auto;
}

.fd-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #991b1b 0%, #b91c1c 40%, #dc2626 100%);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 14px;
    padding: 12px 20px;
    min-width: 320px;
    max-width: 520px;
    box-shadow: 0 6px 30px rgba(220, 38, 38, 0.3);
    animation: _s34FdBounceIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both,
               _s34FdUrgentGlow 2.5s ease-in-out 0.6s infinite;
}

.fd-badge {
    flex-shrink: 0;
    padding: 5px 10px;
    background: #fbbf24;
    color: #0f0f1a;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 6px;
    white-space: nowrap;
}

.fd-offer {
    flex: 1;
    min-width: 0;
}

.fd-offer-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 2px;
}

.fd-offer-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.fd-timer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
    animation: _s34FdTimerPulse 1.2s ease-in-out infinite;
    letter-spacing: 0.04em;
}

.fd-timer-icon {
    font-size: 0.85rem;
    opacity: 0.8;
}

.fd-buy-btn {
    flex-shrink: 0;
    padding: 10px 20px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #0f0f1a;
    font-size: 0.88rem;
    font-weight: 800;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 3px 12px rgba(251, 191, 36, 0.3);
}

.fd-buy-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(251, 191, 36, 0.45);
}

.fd-buy-btn:active {
    transform: scale(0.97);
}

.fd-dismiss {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f0f1a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    line-height: 1;
}

.fd-dismiss:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

/* --------------------------------------------------
   Sprint 34 — Responsive (max-width: 600px)
   -------------------------------------------------- */

@media (max-width: 600px) {


    /* Achievement Popup */
    #achievementPopup {
        top: 10px;
        right: 10px;
        left: 10px;
    }
    .ach-popup {
        min-width: unset;
        max-width: 100%;
        padding: 11px 14px;
        gap: 10px;
    }
    .ach-icon {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }
    .ach-title {
        font-size: 0.84rem;
    }
    .ach-subtitle {
        font-size: 0.72rem;
    }
    .ach-reward {
        padding: 3px 8px;
        font-size: 0.75rem;
    }

    /* Flash Deal Banner */
    #flashDealBanner {
        bottom: 64px;
        left: 8px;
        right: 8px;
        transform: none;
    }
    .fd-banner {
        min-width: unset;
        max-width: 100%;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 12px;
        animation: _s34FdBounceIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both,
                   _s34FdUrgentGlow 2.5s ease-in-out 0.6s infinite;
    }
    @keyframes _s34FdBounceIn {
        0%   { opacity: 0; transform: translateY(100%) scale(0.9); }
        60%  { opacity: 1; transform: translateY(-8px) scale(1.02); }
        80%  { transform: translateY(3px) scale(0.99); }
        100% { transform: translateY(0) scale(1); }
    }
    .fd-badge {
        font-size: 0.65rem;
        padding: 4px 8px;
    }
    .fd-offer-title {
        font-size: 0.85rem;
    }
    .fd-offer-desc {
        font-size: 0.72rem;
    }
    .fd-timer {
        font-size: 0.92rem;
        padding: 5px 10px;
    }
    .fd-buy-btn {
        padding: 9px 16px;
        font-size: 0.82rem;
        width: 100%;
        text-align: center;
    }
    .fd-dismiss {
        top: -5px;
        right: -5px;
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }
}


/* =====================================================
   SPRINT 35 — VIP Progress Meter
   ===================================================== */

@keyframes _s35vipPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(251,191,36,0.3), 0 0 0 rgba(251,191,36,0); }
    50% { box-shadow: 0 0 16px rgba(251,191,36,0.5), 0 0 30px rgba(251,191,36,0.15); }
}

#vipProgressMeter {
    position: fixed;
    left: 16px;
    bottom: 80px;
    z-index: 10001;
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);
    border: 1px solid rgba(251,191,36,0.4);
    border-radius: 14px;
    padding: 14px 16px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: _s35vipPulse 3s ease-in-out infinite;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    font-family: inherit;
}

#vipProgressMeter:hover {
    transform: scale(1.05);
    box-shadow: 0 0 24px rgba(251,191,36,0.55), 0 4px 20px rgba(0,0,0,0.5);
}

#vipProgressMeter .vip-ring-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

#vipProgressMeter .vip-ring-wrap svg {
    width: 60px;
    height: 60px;
    transform: rotate(-90deg);
}

#vipProgressMeter .vip-ring-bg {
    fill: none;
    stroke: rgba(255,255,255,0.08);
    stroke-width: 5;
}

#vipProgressMeter .vip-ring-fg {
    fill: none;
    stroke: #fbbf24;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s ease;
    filter: drop-shadow(0 0 4px rgba(251,191,36,0.5));
}

#vipProgressMeter .vip-ring-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.3rem;
    line-height: 1;
}

#vipProgressMeter .vip-level-name {
    color: #fbbf24;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 5px;
}

#vipProgressMeter .vip-xp-text {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

#vipProgressMeter .vip-next-perk {
    color: rgba(255,255,255,0.45);
    font-size: 0.65rem;
    text-align: center;
    font-style: italic;
    max-width: 160px;
    line-height: 1.3;
}

@media (max-width: 768px) {

    #vipProgressMeter {
        left: 8px;
        bottom: 70px;
        padding: 10px 12px;
        min-width: 140px;
        border-radius: 12px;
    }
    #vipProgressMeter .vip-ring-wrap,
    #vipProgressMeter .vip-ring-wrap svg {
        width: 48px;
        height: 48px;
    }
    #vipProgressMeter .vip-level-name {
        font-size: 0.75rem;
    }
    #vipProgressMeter .vip-xp-text {
        font-size: 0.68rem;
    }
    #vipProgressMeter .vip-next-perk {
        font-size: 0.6rem;
    }
}


/* =====================================================
   SPRINT 35 — Social Proof Win Ticker
   ===================================================== */

@keyframes _s35slideIn {
    0% { transform: translateX(120%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes _s35slideOut {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(120%); opacity: 0; }
}

#socialProofContainer {
    position: fixed;
    right: 16px;
    bottom: 80px;
    z-index: 10001;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
    max-height: 300px;
    overflow: hidden;
}

#socialProofContainer .sp-card {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 10px 14px;
    min-width: 220px;
    max-width: 280px;
    animation: _s35slideIn 0.4s ease-out forwards;
    transition: opacity 0.3s ease;
}

#socialProofContainer .sp-card.sp-dismissing {
    animation: _s35slideOut 0.35s ease-in forwards;
}

#socialProofContainer .sp-card.sp-big-win {
    background: linear-gradient(135deg, rgba(251,191,36,0.15) 0%, rgba(251,191,36,0.05) 100%);
    border-color: rgba(251,191,36,0.4);
    box-shadow: 0 0 12px rgba(251,191,36,0.2);
}

#socialProofContainer .sp-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    color: #0f0f1a;
    font-weight: 700;
}

#socialProofContainer .sp-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#socialProofContainer .sp-player {
    color: rgba(255,255,255,0.7);
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#socialProofContainer .sp-amount {
    color: #fbbf24;
    font-size: 0.9rem;
    font-weight: 700;
}

#socialProofContainer .sp-card.sp-big-win .sp-amount {
    text-shadow: 0 0 8px rgba(251,191,36,0.5);
    font-size: 1rem;
}

#socialProofContainer .sp-game-name {
    color: rgba(255,255,255,0.4);
    font-size: 0.62rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {

    #socialProofContainer {
        right: 8px;
        bottom: 70px;
    }
    #socialProofContainer .sp-card {
        min-width: 180px;
        max-width: 240px;
        padding: 8px 10px;
    }
    #socialProofContainer .sp-avatar {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    #socialProofContainer .sp-amount {
        font-size: 0.8rem;
    }
}


/* =====================================================
   SPRINT 35 — Comeback Bonus Overlay
   ===================================================== */

#comebackOverlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(0,0,0,0.75);
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#comebackOverlay.active {
    display: flex;
}

/* =====================================================================
   Sprint 36 — Daily Login Calendar, Reload Bonus Bar, Progressive Jackpot Ticker
   ===================================================================== */

/* ------------------------------------------------------------------
   1. Daily Login Calendar (#dailyLoginCalendar)
   ------------------------------------------------------------------ */
#dailyLoginCalendar {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
#dailyLoginCalendar.active {
    display: flex;
}

.dlc-modal {
    position: relative;
    width: 92vw;
    max-width: 440px;
    background: linear-gradient(165deg, #1a1a2e 0%, #0f0f1a 100%);
    border: 1.5px solid #fbbf24;
    border-radius: 16px;
    padding: 28px 24px 24px;
    box-shadow: 0 0 40px rgba(251, 191, 36, 0.15),
                0 20px 60px rgba(0, 0, 0, 0.6);
    animation: _s36calModalIn 0.35s ease-out;
}

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

.dlc-close-btn {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: #aaa;
    font-size: 1.2rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    z-index: 2;
}
.dlc-close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.dlc-header {
    text-align: center;
    margin-bottom: 20px;
}
.dlc-header h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: 0.5px;
}
.dlc-header p {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

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

.dlc-day {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    min-height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: default;
    transition: transform 0.18s, border-color 0.25s, background 0.25s;
}

.dlc-day-number {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1;
}

.dlc-day-reward {
    font-size: 1rem;
    line-height: 1;
}

/* Claimed days */
.dlc-claimed {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.25);
    opacity: 0.65;
}
.dlc-claimed::after {
    content: '\2713';
    position: absolute;
    top: 3px;
    right: 4px;
    font-size: 0.65rem;
    color: #22c55e;
    font-weight: 700;
}

/* Today cell — gold glow, pulse */
.dlc-today {
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
    cursor: pointer;
    animation: _s36calPulse 2s ease-in-out infinite;
}
.dlc-today:hover {
    transform: scale(1.08);
    background: rgba(251, 191, 36, 0.18);
}
.dlc-today .dlc-day-number {
    color: #fbbf24;
}

/* Future days — locked, muted */
.dlc-future {
    opacity: 0.35;
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.04);
}
.dlc-future::after {
    content: '\1F512';
    position: absolute;
    top: 3px;
    right: 4px;
    font-size: 0.55rem;
    opacity: 0.5;
}

/* Streak row at bottom */
.dlc-streak {
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.dlc-streak strong {
    color: #fbbf24;
}

@keyframes _s36calPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(251, 191, 36, 0.25); }
    50%      { box-shadow: 0 0 22px rgba(251, 191, 36, 0.45), 0 0 6px rgba(251, 191, 36, 0.15); }
}

/* Mobile: smaller cells */
@media (max-width: 480px) {

    .dlc-modal {
        padding: 20px 16px 18px;
    }
    .dlc-grid {
        gap: 5px;
    }
    .dlc-day {
        min-height: 40px;
        border-radius: 10px;
    }
    .dlc-day-reward {
        font-size: 0.85rem;
    }
}



/* ------------------------------------------------------------------
   2. Reload Bonus Bar (#reloadBonusBar)
   ------------------------------------------------------------------ */
#reloadBonusBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #2d1b69 0%, #1a1a2e 50%, #0f0f1a 100%);
    border-bottom: 1px solid rgba(251, 191, 36, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    flex-wrap: wrap;
}
#reloadBonusBar.active {
    display: flex;
}

.rlb-text {
    flex-shrink: 0;
    font-weight: 500;
    white-space: nowrap;
}
.rlb-text strong {
    color: #fbbf24;
}

.rlb-progress-track {
    flex: 1;
    min-width: 120px;
    max-width: 280px;
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.rlb-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    border-radius: 6px;
    transition: width 0.6s ease;
    position: relative;
}
.rlb-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 45%,
        rgba(255, 255, 255, 0.35) 55%,
        transparent 100%
    );
    animation: _s36reloadShimmer 2.5s ease-in-out infinite;
}

.rlb-pct {
    font-size: 0.8rem;
    color: #fbbf24;
    font-weight: 700;
    min-width: 36px;
    text-align: right;
}

.rlb-claim-btn {
    padding: 6px 18px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #0f0f1a;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: transform 0.15s, box-shadow 0.2s;
    display: none;
}
.rlb-claim-btn.visible {
    display: inline-block;
}
.rlb-claim-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.4);
}

.rlb-close-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: #aaa;
    font-size: 1rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.rlb-close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

@keyframes _s36reloadShimmer {
    0%   { transform: translateX(-150%); }
    100% { transform: translateX(250%); }
}

/* Mobile: stack vertically */
@media (max-width: 600px) {

    #reloadBonusBar {
        flex-direction: column;
        gap: 8px;
        padding: 10px 14px;
        text-align: center;
    }
    .rlb-progress-track {
        max-width: 100%;
        width: 100%;
    }
}



/* ------------------------------------------------------------------
   3. Progressive Jackpot Ticker (#jackpotTicker)
   ------------------------------------------------------------------ */
#jackpotTicker {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 24px;
    padding: 20px 28px;
    background: linear-gradient(160deg, #1a1a2e 0%, #0f0f1a 70%, #1a1230 100%);
    border: 1.5px solid rgba(251, 191, 36, 0.2);
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.08),
                0 8px 32px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}
#jackpotTicker::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(251, 191, 36, 0.06) 0%, transparent 65%);
    pointer-events: none;
}

.jpt-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(251, 191, 36, 0.7);
    margin-bottom: 8px;
}

.jpt-amount {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-size: 2.6rem;
    font-weight: 800;
    color: #fbbf24;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.4),
                 0 0 40px rgba(251, 191, 36, 0.15);
    animation: _s36jackpotGlow 3s ease-in-out infinite;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.jpt-currency {
    font-size: 1.6rem;
    font-weight: 700;
    color: rgba(251, 191, 36, 0.75);
    margin-right: 4px;
}

.jpt-digit {
    display: inline-block;
    min-width: 0.65em;
    text-align: center;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.25s ease;
}
.jpt-digit.jpt-digit-update {
    transform: translateY(-4px) scale(1.12);
    opacity: 0.8;
}

.jpt-sep {
    color: rgba(251, 191, 36, 0.45);
    font-weight: 400;
    min-width: 0.3em;
    text-align: center;
}

.jpt-subtitle {
    display: block;
    margin-top: 8px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
}

@keyframes _s36jackpotGlow {
    0%, 100% {
        text-shadow: 0 0 20px rgba(251, 191, 36, 0.4),
                     0 0 40px rgba(251, 191, 36, 0.15);
    }
    50% {
        text-shadow: 0 0 30px rgba(251, 191, 36, 0.6),
                     0 0 60px rgba(251, 191, 36, 0.25),
                     0 0 10px rgba(251, 191, 36, 0.3);
    }
}

/* Mobile: scale down ticker */
@media (max-width: 600px) {

    #jackpotTicker {
        padding: 16px 18px;
        margin-bottom: 18px;
        border-radius: 12px;
    }
    .jpt-amount {
        font-size: 1.9rem;
    }
    .jpt-currency {
        font-size: 1.15rem;
    }
}

@media (max-width: 380px) {

    .jpt-amount {
        font-size: 1.5rem;
    }
    .jpt-currency {
        font-size: 1rem;
    }
}



/* ============================================================
   SPRINT 37 — Referral Leaderboard, Spin Insurance, Happy Hour
   ============================================================ */

/* ----------------------------------------------------------
   Feature 1: Referral Leaderboard (.referral-lb-*)
   ---------------------------------------------------------- */

.referral-lb-panel {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 260px;
    max-height: 380px;
    background: linear-gradient(165deg, rgba(30, 30, 58, 0.97) 0%, rgba(15, 15, 26, 0.98) 100%);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 16px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 20px rgba(251, 191, 36, 0.08);
    z-index: 9500;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: _s37_rlbSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
    transform: translateY(40px);
    font-family: inherit;
}

@keyframes _s37_rlbSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.referral-lb-panel.referral-lb-closing {
    animation: _s37_rlbSlideDown 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes _s37_rlbSlideDown {
    to {
        opacity: 0;
        transform: translateY(40px);
    }
}

.referral-lb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(251, 191, 36, 0.15);
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.08) 0%, transparent 100%);
    flex-shrink: 0;
}

.referral-lb-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.referral-lb-title-icon {
    font-size: 1rem;
}

.referral-lb-close {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
}

.referral-lb-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.referral-lb-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(251, 191, 36, 0.3) transparent;
}

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

.referral-lb-list::-webkit-scrollbar-track {
    background: transparent;
}

.referral-lb-list::-webkit-scrollbar-thumb {
    background: rgba(251, 191, 36, 0.3);
    border-radius: 4px;
}

.referral-lb-row {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    gap: 10px;
    transition: background 0.2s ease;
}

.referral-lb-row:hover {
    background: rgba(251, 191, 36, 0.04);
}

.referral-lb-rank {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.referral-lb-row.referral-lb-top3 .referral-lb-rank {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #0f0f1a;
    border: none;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.35);
    animation: _s37_rlbRankPulse 2.5s ease-in-out infinite;
}

.referral-lb-row.referral-lb-rank1 .referral-lb-rank {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
}

.referral-lb-crown {
    position: absolute;
    top: -10px;
    font-size: 0.65rem;
    line-height: 1;
}

.referral-lb-rank-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.referral-lb-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.referral-lb-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.referral-lb-row.referral-lb-top3 .referral-lb-name {
    color: #fbbf24;
}

.referral-lb-refs {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
}

.referral-lb-reward {
    font-size: 0.78rem;
    font-weight: 700;
    color: #34d399;
    flex-shrink: 0;
    text-align: right;
}

.referral-lb-row.referral-lb-top3 {
    border-left: 2px solid rgba(251, 191, 36, 0.5);
    animation: _s37_rlbGoldBorder 3s ease-in-out infinite;
}

@keyframes _s37_rlbGoldBorder {
    0%, 100% { border-left-color: rgba(251, 191, 36, 0.5); }
    50% { border-left-color: rgba(251, 191, 36, 0.9); }
}

.referral-lb-footer {
    padding: 10px 16px;
    border-top: 1px solid rgba(251, 191, 36, 0.12);
    text-align: center;
    flex-shrink: 0;
}

.referral-lb-your-rank {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
}

.referral-lb-your-rank span {
    color: #fbbf24;
    font-weight: 700;
}

.referral-lb-invite-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #0f0f1a;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.referral-lb-invite-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
}

.referral-lb-empty {
    padding: 30px 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.78rem;
}


/* ----------------------------------------------------------
   Feature 2: Spin Insurance (.spin-ins-*)
   ---------------------------------------------------------- */

.spin-ins-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    margin: 6px auto 0;
    max-width: 420px;
    background: rgba(30, 30, 58, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.spin-ins-bar.spin-ins-active {
    border-color: rgba(52, 211, 153, 0.5);
    box-shadow: 0 0 16px rgba(52, 211, 153, 0.12), inset 0 0 12px rgba(52, 211, 153, 0.04);
    animation: _s37_insGlow 2.5s ease-in-out infinite;
}

@keyframes _s37_insGlow {
    0%, 100% { box-shadow: 0 0 16px rgba(52, 211, 153, 0.12), inset 0 0 12px rgba(52, 211, 153, 0.04); }
    50% { box-shadow: 0 0 22px rgba(52, 211, 153, 0.22), inset 0 0 18px rgba(52, 211, 153, 0.08); }
}

.spin-ins-shield {
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

.spin-ins-bar.spin-ins-active .spin-ins-shield {
    animation: _s37_insShieldPulse 2s ease-in-out infinite;
}

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

.spin-ins-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    user-select: none;
}

.spin-ins-bar.spin-ins-active .spin-ins-label {
    color: #34d399;
}

.spin-ins-toggle {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
}

.spin-ins-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.spin-ins-toggle-track {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 11px;
    transition: background 0.25s ease;
}

.spin-ins-toggle input:checked + .spin-ins-toggle-track {
    background: linear-gradient(135deg, #34d399, #10b981);
}

.spin-ins-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.spin-ins-toggle input:checked ~ .spin-ins-toggle-thumb {
    transform: translateX(18px);
}

.spin-ins-cost {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    transition: all 0.25s ease;
}

.spin-ins-bar.spin-ins-active .spin-ins-cost {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
}

.spin-ins-guarantee {
    display: none;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #34d399;
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.25);
    border-radius: 6px;
    padding: 3px 8px;
    white-space: nowrap;
    animation: _s37_insGuaranteePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.spin-ins-bar.spin-ins-active .spin-ins-guarantee {
    display: inline-flex;
}

@keyframes _s37_insGuaranteePop {
    from { opacity: 0; transform: scale(0.7); }
    to { opacity: 1; transform: scale(1); }
}

.spin-ins-guarantee-icon {
    font-size: 0.7rem;
}

.spin-ins-payout-badge {
    display: none;
    position: absolute;
    top: -8px;
    right: -8px;
    padding: 2px 7px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #0f0f1a;
    font-size: 0.6rem;
    font-weight: 800;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
    animation: _s37_insBadgeBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 2;
}

.spin-ins-bar.spin-ins-active .spin-ins-payout-badge {
    display: block;
}

@keyframes _s37_insBadgeBounce {
    from { opacity: 0; transform: scale(0.5) translateY(4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.spin-ins-refund-flash {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    padding: 16px 28px;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.95), rgba(16, 185, 129, 0.95));
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(52, 211, 153, 0.4);
    z-index: 10000;
    pointer-events: none;
    animation: _s37_insRefundFlash 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes _s37_insRefundFlash {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -55%) scale(0.95); }
}


/* ----------------------------------------------------------
   Feature 3: Happy Hour Events (.happy-hour-*)
   ---------------------------------------------------------- */

.happy-hour-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: linear-gradient(135deg, #7c3aed 0%, #4f1d91 30%, #1a1a2e 60%, #92400e 85%, #fbbf24 100%);
    background-size: 250% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 9800;
    box-shadow: 0 3px 16px rgba(124, 58, 237, 0.3), 0 1px 4px rgba(0, 0, 0, 0.4);
    animation: _s37_hhSlideDown 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards,
               _s37_hhGradientShift 8s ease-in-out infinite;
    transform: translateY(-100%);
    border-bottom: 1px solid rgba(251, 191, 36, 0.25);
}

@keyframes _s37_hhSlideDown {
    to { transform: translateY(0); }
}

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

.happy-hour-banner.happy-hour-ending {
    animation: _s37_hhSlideUp 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes _s37_hhSlideUp {
    to { transform: translateY(-100%); }
}

.happy-hour-clock {
    font-size: 1.2rem;
    line-height: 1;
    animation: _s37_hhClockTick 1s steps(2) infinite;
    flex-shrink: 0;
}

@keyframes _s37_hhClockTick {
    0%, 49% { transform: rotate(0deg); }
    50%, 100% { transform: rotate(15deg); }
}

.happy-hour-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

.happy-hour-timer {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
    min-width: 58px;
    text-align: center;
    letter-spacing: 0.5px;
}

.happy-hour-timer.happy-hour-urgent {
    color: #f87171;
    animation: _s37_hhTimerUrgent 0.6s ease-in-out infinite;
}

@keyframes _s37_hhTimerUrgent {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.happy-hour-multiplier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #0f0f1a;
    font-size: 0.85rem;
    font-weight: 900;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(251, 191, 36, 0.4);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

.happy-hour-multiplier::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: _s37_hhMultShimmer 2.5s ease-in-out infinite;
}

@keyframes _s37_hhMultShimmer {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

.happy-hour-multiplier-pulse {
    animation: _s37_hhMultPulse 2s ease-in-out infinite;
}

@keyframes _s37_hhMultPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 2px 10px rgba(251, 191, 36, 0.4); }
    50% { transform: scale(1.08); box-shadow: 0 4px 18px rgba(251, 191, 36, 0.6); }
}

.happy-hour-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
}

.happy-hour-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.happy-hour-lobby-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(251, 191, 36, 0.15));
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fbbf24;
    animation: _s37_hhBadgePulse 3s ease-in-out infinite;
}

@keyframes _s37_hhBadgePulse {
    0%, 100% { border-color: rgba(251, 191, 36, 0.3); }
    50% { border-color: rgba(251, 191, 36, 0.6); }
}

.happy-hour-lobby-badge-icon {
    font-size: 0.75rem;
}

.happy-hour-game-boost {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 7px;
    background: linear-gradient(135deg, #7c3aed, #fbbf24);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
    z-index: 3;
    animation: _s37_hhBoostPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.happy-hour-win-bonus {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(251, 191, 36, 0.12));
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #c4b5fd;
}

.happy-hour-win-bonus-amount {
    color: #fbbf24;
    font-weight: 800;
}

/* Happy Hour — body offset when banner is visible */
body.happy-hour-active {
    padding-top: 44px;
}

body.happy-hour-active .header-container {
    top: 44px;
}

/* Happy Hour — notification toast */
.happy-hour-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 24px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.95), rgba(79, 29, 145, 0.95));
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 12px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    z-index: 10100;
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.35);
    pointer-events: none;
    animation: _s37_hhToastIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    display: flex;
    align-items: center;
    gap: 8px;
}

@keyframes _s37_hhToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.happy-hour-toast.happy-hour-toast-out {
    animation: _s37_hhToastOut 0.35s ease-in forwards;
}

@keyframes _s37_hhToastOut {
    to { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

.happy-hour-toast-icon {
    font-size: 1.1rem;
}

.happy-hour-toast-mult {
    color: #fbbf24;
    font-weight: 800;
}


/* ----------------------------------------------------------
   Sprint 37 — Responsive Overrides
   ---------------------------------------------------------- */

@media (max-width: 768px) {

    .referral-lb-panel {
        left: 10px;
        bottom: 10px;
        width: 230px;
        max-height: 320px;
    }

    .referral-lb-row {
        padding: 6px 12px;
    }

    .referral-lb-name {
        font-size: 0.75rem;
    }

    .spin-ins-bar {
        gap: 6px;
        padding: 6px 10px;
        max-width: 340px;
        flex-wrap: wrap;
    }

    .spin-ins-label {
        font-size: 0.72rem;
    }

    .happy-hour-banner {
        height: 38px;
        gap: 8px;
    }

    .happy-hour-label {
        font-size: 0.68rem;
        letter-spacing: 0.8px;
    }

    .happy-hour-timer {
        font-size: 0.82rem;
    }

    .happy-hour-multiplier {
        font-size: 0.75rem;
        padding: 3px 9px;
    }

    body.happy-hour-active {
        padding-top: 38px;
    }

    body.happy-hour-active .header-container {
        top: 38px;
    }
}


@media (max-width: 480px) {

    .referral-lb-panel {
        left: 5px;
        right: 5px;
        bottom: 5px;
        width: auto;
        max-height: 280px;
        border-radius: 12px;
    }

    .spin-ins-bar {
        max-width: 100%;
        margin: 4px 8px 0;
        border-radius: 8px;
    }

    .spin-ins-guarantee {
        font-size: 0.6rem;
    }

    .happy-hour-banner {
        height: 34px;
        gap: 6px;
    }

    .happy-hour-clock {
        font-size: 0.95rem;
    }

    .happy-hour-label {
        font-size: 0.6rem;
    }

    .happy-hour-close {
        right: 6px;
        width: 20px;
        height: 20px;
        font-size: 0.6rem;
    }

    body.happy-hour-active {
        padding-top: 34px;
    }

    body.happy-hour-active .header-container {
        top: 34px;
    }
}



/* ==========================================================================
   Sprint 38 — Loss Recovery Offer / Session Milestone Rewards / Bet Suggestion
   ========================================================================== */

/* --------------------------------------------------------------------------
   Feature 1: Loss Recovery Offer (.loss-recovery-*)
   -------------------------------------------------------------------------- */

@keyframes _s38_recoveryFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes _s38_recoveryCardPop {
    0% { opacity: 0; transform: scale(0.85) translateY(20px); }
    60% { opacity: 1; transform: scale(1.03) translateY(-4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes _s38_recoveryShimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

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

.loss-recovery-overlay {
    position: fixed;
    inset: 0;
    z-index: 10500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 5, 15, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: _s38_recoveryFadeIn 0.35s ease-out both;
    padding: 16px;
}

.loss-recovery-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: linear-gradient(165deg, #1e1e3a 0%, #0f0f1a 100%);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 18px;
    padding: 32px 28px 24px;
    box-shadow:
        0 0 40px rgba(251, 191, 36, 0.08),
        0 20px 60px rgba(0, 0, 0, 0.5);
    animation: _s38_recoveryCardPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
    text-align: center;
    overflow: hidden;
}

.loss-recovery-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #fbbf24, #f59e0b, #fbbf24, transparent);
}

.loss-recovery-icon {
    font-size: 2.6rem;
    margin-bottom: 12px;
    display: block;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.4));
}

.loss-recovery-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fbbf24;
    margin: 0 0 6px;
    letter-spacing: 0.02em;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
}

.loss-recovery-subtitle {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 20px;
    line-height: 1.45;
}

.loss-recovery-packs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

.loss-recovery-pack {
    position: relative;
    flex: 1;
    max-width: 140px;
    background: rgba(30, 30, 58, 0.8);
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 12px;
    padding: 16px 10px 14px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.loss-recovery-pack:hover {
    border-color: rgba(251, 191, 36, 0.5);
    background: rgba(40, 40, 70, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.1);
}

.loss-recovery-pack.selected {
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.08);
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.15);
}

.loss-recovery-pack-amount {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    display: block;
    margin-bottom: 2px;
}

.loss-recovery-pack-coins {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.loss-recovery-badge {
    position: absolute;
    top: -9px;
    right: -8px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 8px;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    animation: _s38_recoveryBadgePulse 1.8s ease-in-out infinite;
}

.loss-recovery-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 280px;
    padding: 13px 24px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
    background-size: 200% 200%;
    color: #0f0f1a;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.3);
}

.loss-recovery-cta:hover {
    background-size: 100% 100%;
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(251, 191, 36, 0.45);
}

.loss-recovery-cta:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(251, 191, 36, 0.3);
}

.loss-recovery-cta-shimmer {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.25) 50%,
        transparent 100%);
    background-size: 200% 100%;
    animation: _s38_recoveryShimmer 2.5s linear infinite;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.loss-recovery-dismiss {
    display: inline-block;
    margin-top: 14px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 12px;
    transition: color 0.2s;
    text-decoration: none;
}

.loss-recovery-dismiss:hover {
    color: rgba(255, 255, 255, 0.6);
}

.loss-recovery-close-x {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}

.loss-recovery-close-x:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
}

.loss-recovery-timer {
    font-size: 0.75rem;
    color: rgba(251, 191, 36, 0.7);
    margin-top: 10px;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Feature 2: Session Milestone Rewards (.session-mile-*)
   -------------------------------------------------------------------------- */

@keyframes _s38_mileFill {
    0% { width: var(--mile-from, 0%); }
    100% { width: var(--mile-to, 0%); }
}

@keyframes _s38_mileGlow {
    0%, 100% { box-shadow: 0 0 6px rgba(251, 191, 36, 0.3); }
    50% { box-shadow: 0 0 16px rgba(251, 191, 36, 0.6), 0 0 24px rgba(251, 191, 36, 0.2); }
}

@keyframes _s38_mileSlideUp {
    0% { opacity: 0; transform: translateY(100%) scale(0.95); }
    60% { opacity: 1; transform: translateY(-8px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes _s38_mileConfetti {
    0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-60px) rotate(var(--confetti-rot, 180deg)) scale(0.3); }
}

@keyframes _s38_mileSparkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.2); }
}

@keyframes _s38_mileBounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.25); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.session-mile-bar-wrap {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 8px auto 0;
    padding: 0 12px;
}

.session-mile-track {
    position: relative;
    height: 8px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 6px;
    overflow: visible;
}

.session-mile-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

.session-mile-fill.approaching {
    animation: _s38_mileGlow 1.2s ease-in-out infinite;
}

.session-mile-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.session-mile-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1e1e3a;
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s ease;
    z-index: 2;
}

.session-mile-marker[data-at="25"] { left: 25%; }
.session-mile-marker[data-at="50"] { left: 50%; }
.session-mile-marker[data-at="100"] { left: 100%; }

.session-mile-marker.reached {
    background: #fbbf24;
    border-color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
    animation: _s38_mileBounce 0.4s ease-out;
}

.session-mile-marker.reached .session-mile-marker-icon {
    color: #0f0f1a;
}

.session-mile-marker-icon {
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1;
}

.session-mile-label {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    font-weight: 600;
}

.session-mile-marker.reached .session-mile-label {
    color: #fbbf24;
}

.session-mile-spin-count {
    text-align: center;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

/* Milestone reward popup */

.session-mile-reward-overlay {
    position: fixed;
    inset: 0;
    z-index: 10600;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(5, 5, 15, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 0 16px 32px;
    animation: _s38_recoveryFadeIn 0.25s ease-out both;
}

.session-mile-reward-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: linear-gradient(170deg, #1e1e3a 0%, #141428 100%);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 20px 20px 16px 16px;
    padding: 28px 24px 22px;
    text-align: center;
    animation: _s38_mileSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    box-shadow:
        0 -4px 30px rgba(251, 191, 36, 0.1),
        0 20px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.session-mile-reward-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #fbbf24, transparent);
}

.session-mile-reward-icon {
    font-size: 2.4rem;
    display: block;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.5));
}

.session-mile-reward-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fbbf24;
    margin: 0 0 4px;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.session-mile-reward-desc {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 16px;
    line-height: 1.4;
}

.session-mile-reward-amount {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
    text-shadow: 0 0 16px rgba(251, 191, 36, 0.25);
}

.session-mile-reward-claim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 32px;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #0f0f1a;
    font-size: 0.88rem;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 14px rgba(251, 191, 36, 0.3);
}

.session-mile-reward-claim:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.45);
}

.session-mile-reward-claim:active {
    transform: translateY(0);
}

/* Confetti particles for milestone unlock */

.session-mile-confetti {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    animation: _s38_mileConfetti 1.2s ease-out both;
    pointer-events: none;
}

.session-mile-confetti:nth-child(odd) { border-radius: 50%; }

.session-mile-sparkle {
    position: absolute;
    font-size: 0.7rem;
    animation: _s38_mileSparkle 0.8s ease-in-out both;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Feature 3: Bet Suggestion Engine (.bet-suggest-*)
   -------------------------------------------------------------------------- */

@keyframes _s38_betSuggestEnter {
    0% { opacity: 0; transform: translateY(8px) scale(0.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes _s38_betSuggestPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.25); }
    50% { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0); }
}

@keyframes _s38_betSuggestArrow {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-4px); }
}

@keyframes _s38_betSuggestShine {
    0% { left: -100%; }
    100% { left: 200%; }
}

.bet-suggest-wrap {
    position: relative;
    display: inline-flex;
    margin-left: 8px;
}

.bet-suggest-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px 6px 10px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    animation:
        _s38_betSuggestEnter 0.35s ease-out both,
        _s38_betSuggestPulse 2.5s ease-in-out 1s infinite;
    overflow: hidden;
    white-space: nowrap;
}

.bet-suggest-pill:hover {
    background: rgba(251, 191, 36, 0.18);
    border-color: rgba(251, 191, 36, 0.45);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.15);
}

.bet-suggest-pill:active {
    transform: translateY(0);
}

.bet-suggest-pill.active {
    background: rgba(251, 191, 36, 0.2);
    border-color: #fbbf24;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.2);
}

.bet-suggest-pill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    animation: _s38_betSuggestShine 3.5s ease-in-out 2s infinite;
    pointer-events: none;
}

.bet-suggest-chip-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 800;
    color: #0f0f1a;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.bet-suggest-amount {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fbbf24;
}

.bet-suggest-reason {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bet-suggest-arrow {
    font-size: 0.7rem;
    color: rgba(251, 191, 36, 0.5);
    animation: _s38_betSuggestArrow 1.5s ease-in-out infinite;
    margin-left: 2px;
}

.bet-suggest-dismiss {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(30, 30, 58, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0;
    line-height: 1;
}

.bet-suggest-pill:hover .bet-suggest-dismiss {
    opacity: 1;
}

.bet-suggest-dismiss:hover {
    background: rgba(60, 60, 90, 0.95);
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Expanded tooltip for bet suggestion */

.bet-suggest-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e1e3a;
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 12px;
    padding: 12px 16px;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    z-index: 100;
}

.bet-suggest-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-2px);
}

.bet-suggest-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #1e1e3a;
    border-right: 1px solid rgba(251, 191, 36, 0.25);
    border-bottom: 1px solid rgba(251, 191, 36, 0.25);
}

.bet-suggest-tooltip-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fbbf24;
    margin: 0 0 4px;
}

.bet-suggest-tooltip-text {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
    margin: 0;
}

.bet-suggest-tooltip-apply {
    display: inline-block;
    margin-top: 8px;
    padding: 5px 14px;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #0f0f1a;
    font-size: 0.7rem;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bet-suggest-tooltip-apply:hover {
    box-shadow: 0 3px 10px rgba(251, 191, 36, 0.3);
    transform: translateY(-1px);
}

/* Responsive adjustments */

@media (max-width: 480px) {

    .loss-recovery-card {
        padding: 24px 18px 20px;
        border-radius: 14px;
    }

    .loss-recovery-packs {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .loss-recovery-pack {
        max-width: 100%;
        width: 100%;
    }

    .loss-recovery-title {
        font-size: 1.15rem;
    }

    .session-mile-bar-wrap {
        max-width: 100%;
        padding: 0 8px;
    }

    .session-mile-reward-card {
        border-radius: 16px 16px 12px 12px;
        padding: 22px 18px 18px;
    }

    .session-mile-reward-amount {
        font-size: 1.35rem;
    }

    .bet-suggest-pill {
        padding: 5px 10px 5px 8px;
        gap: 5px;
    }

    .bet-suggest-reason {
        display: none;
    }

    .bet-suggest-tooltip {
        min-width: 170px;
        left: auto;
        right: 0;
        transform: none;
    }

    .bet-suggest-tooltip.visible {
        transform: translateY(-2px);
    }

    .bet-suggest-tooltip::after {
        left: auto;
        right: 16px;
        transform: rotate(45deg);
    }
}



/* ============================================================
   SPRINT 39 — Loyalty Points Shop, Win Multiplier Wheel, Auto-Cashout
   ============================================================ */

/* --- S39 Keyframes --- */

@keyframes _s39_fadeSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes _s39_fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes _s39_itemPop {
    0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
    60%  { transform: translateY(-4px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes _s39_shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes _s39_wheelSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(1800deg); }
}

@keyframes _s39_wheelDecel {
    0%   { transform: rotate(0deg); }
    60%  { transform: rotate(1500deg); }
    80%  { transform: rotate(1720deg); }
    95%  { transform: rotate(1785deg); }
    100% { transform: rotate(1800deg); }
}

@keyframes _s39_wheelGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.3), 0 0 40px rgba(251, 191, 36, 0.1); }
    50%      { box-shadow: 0 0 40px rgba(251, 191, 36, 0.6), 0 0 80px rgba(251, 191, 36, 0.3); }
}

@keyframes _s39_sparkle {
    0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1) rotate(180deg); }
}

@keyframes _s39_resultReveal {
    0%   { opacity: 0; transform: scale(0.3); }
    60%  { transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes _s39_confettiBurst {
    0%   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translateY(-120px) rotate(720deg) scale(0.3); }
}

@keyframes _s39_celebrateText {
    0%   { opacity: 0; transform: scale(0.2) rotate(-10deg); }
    50%  { transform: scale(1.15) rotate(3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

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

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


/* ============================================================
   Feature 1: Loyalty Points Shop (.lp-shop-*)
   ============================================================ */

.lp-shop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lp-shop-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.lp-shop-modal {
    background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 16px;
    width: 90%;
    max-width: 680px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(251, 191, 36, 0.08);
    animation: _s39_fadeSlideUp 0.4s ease-out;
    overflow: hidden;
}

.lp-shop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.1) 0%, transparent 100%);
    border-bottom: 1px solid rgba(251, 191, 36, 0.15);
    flex-shrink: 0;
}

.lp-shop-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lp-shop-title::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    background: radial-gradient(circle at 35% 35%, #fde68a, #fbbf24, #d97706);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

.lp-shop-points-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fbbf24;
}

.lp-shop-points-icon {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 35% 35%, #fde68a, #fbbf24, #d97706);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
    flex-shrink: 0;
    animation: _s39_pointsPulse 2s ease-in-out infinite;
}

.lp-shop-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: #aaa;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.lp-shop-close:hover {
    background: rgba(255, 50, 50, 0.2);
    border-color: rgba(255, 50, 50, 0.4);
    color: #ff6b6b;
}

.lp-shop-body {
    padding: 18px 22px;
    overflow-y: auto;
    flex: 1;
}

.lp-shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.lp-shop-item {
    background: #1e1e3a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    animation: _s39_itemPop 0.4s ease-out backwards;
    position: relative;
    overflow: hidden;
}

.lp-shop-item:nth-child(1)  { animation-delay: 0.05s; }
.lp-shop-item:nth-child(2)  { animation-delay: 0.1s; }
.lp-shop-item:nth-child(3)  { animation-delay: 0.15s; }
.lp-shop-item:nth-child(4)  { animation-delay: 0.2s; }
.lp-shop-item:nth-child(5)  { animation-delay: 0.25s; }
.lp-shop-item:nth-child(6)  { animation-delay: 0.3s; }
.lp-shop-item:nth-child(7)  { animation-delay: 0.35s; }
.lp-shop-item:nth-child(8)  { animation-delay: 0.4s; }
.lp-shop-item:nth-child(9)  { animation-delay: 0.45s; }

.lp-shop-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.06), transparent);
    transition: left 0.5s ease;
}

.lp-shop-item:hover::before {
    left: 150%;
}

.lp-shop-item:hover {
    transform: translateY(-4px);
    border-color: rgba(251, 191, 36, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 15px rgba(251, 191, 36, 0.08);
}

.lp-shop-item.sold-out {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(0.6);
}

.lp-shop-item.sold-out::after {
    content: 'SOLD OUT';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: 0.75rem;
    font-weight: 800;
    color: #ef4444;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.7);
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.lp-shop-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(139, 92, 246, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.lp-shop-item-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e2e8f0;
    text-align: center;
    line-height: 1.3;
}

.lp-shop-item-cost {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fbbf24;
}

.lp-shop-item-cost::before {
    content: '';
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 35% 35%, #fde68a, #fbbf24);
    border-radius: 50%;
    flex-shrink: 0;
}

.lp-shop-buy-btn {
    width: 100%;
    padding: 7px 0;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #0f0f1a;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.lp-shop-buy-btn:hover {
    background: linear-gradient(135deg, #fde68a, #fbbf24);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
    transform: scale(1.03);
}

.lp-shop-buy-btn:active {
    transform: scale(0.97);
}

.lp-shop-buy-btn.purchased {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
    pointer-events: none;
}

.lp-shop-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #64748b;
    padding: 40px 20px;
    font-size: 0.95rem;
}

@media (max-width: 600px) {

    .lp-shop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .lp-shop-modal {
        width: 95%;
        max-height: 90vh;
    }
    .lp-shop-header {
        padding: 14px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }
}



/* ============================================================
   Feature 2: Win Multiplier Wheel (.win-wheel-*)
   ============================================================ */

.win-wheel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10050;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.win-wheel-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.win-wheel-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
    animation: _s39_fadeSlideUp 0.5s ease-out;
}

.win-wheel-container {
    position: relative;
    width: 300px;
    height: 300px;
    animation: _s39_fadeIn 0.4s ease-out 0.2s backwards;
}

.win-wheel-outer-ring {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 3px solid rgba(251, 191, 36, 0.4);
    animation: _s39_wheelGlow 2s ease-in-out infinite;
}

.win-wheel-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 4px solid rgba(251, 191, 36, 0.6);
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.15), inset 0 0 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s linear;
}

.win-wheel-wheel.spinning {
    animation: _s39_wheelDecel 4s cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
}

.win-wheel-segment {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 0;
    left: 50%;
    transform-origin: 0% 100%;
    clip-path: polygon(0 100%, 100% 0, 0 0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.win-wheel-segment-label {
    position: absolute;
    top: 30%;
    left: 20%;
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    transform: rotate(22.5deg);
}

.win-wheel-segment:nth-child(8n+1) { transform: rotate(0deg); background: linear-gradient(135deg, #fbbf24, #d97706); }
.win-wheel-segment:nth-child(8n+2) { transform: rotate(45deg); background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.win-wheel-segment:nth-child(8n+3) { transform: rotate(90deg); background: linear-gradient(135deg, #22c55e, #16a34a); }
.win-wheel-segment:nth-child(8n+4) { transform: rotate(135deg); background: linear-gradient(135deg, #ef4444, #dc2626); }
.win-wheel-segment:nth-child(8n+5) { transform: rotate(180deg); background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.win-wheel-segment:nth-child(8n+6) { transform: rotate(225deg); background: linear-gradient(135deg, #a855f7, #7c3aed); }
.win-wheel-segment:nth-child(8n+7) { transform: rotate(270deg); background: linear-gradient(135deg, #34d399, #10b981); }
.win-wheel-segment:nth-child(8n+8) { transform: rotate(315deg); background: linear-gradient(135deg, #f87171, #ef4444); }

.win-wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fde68a, #fbbf24, #b45309);
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 900;
    color: #0f0f1a;
}

.win-wheel-pointer {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 24px solid #fbbf24;
    filter: drop-shadow(0 2px 6px rgba(251, 191, 36, 0.5));
    z-index: 5;
    animation: _s39_pointerBounce 1s ease-in-out infinite;
}

.win-wheel-wheel.spinning ~ .win-wheel-pointer,
.win-wheel-wheel.spinning + .win-wheel-pointer {
    animation: none;
}

.win-wheel-sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #fbbf24;
    border-radius: 50%;
    animation: _s39_sparkle 1.5s ease-in-out infinite;
    pointer-events: none;
}

.win-wheel-sparkle:nth-child(1) { top: 5%; left: 15%; animation-delay: 0s; }
.win-wheel-sparkle:nth-child(2) { top: 10%; right: 10%; animation-delay: 0.3s; }
.win-wheel-sparkle:nth-child(3) { bottom: 8%; left: 8%; animation-delay: 0.6s; }
.win-wheel-sparkle:nth-child(4) { bottom: 12%; right: 15%; animation-delay: 0.9s; }
.win-wheel-sparkle:nth-child(5) { top: 50%; left: -5%; animation-delay: 1.2s; }
.win-wheel-sparkle:nth-child(6) { top: 50%; right: -5%; animation-delay: 0.4s; }

.win-wheel-spin-btn {
    padding: 12px 40px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #0f0f1a;
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.3);
    animation: _s39_fadeSlideUp 0.5s ease-out 0.3s backwards;
}

.win-wheel-spin-btn:hover {
    background: linear-gradient(135deg, #fde68a, #fbbf24);
    box-shadow: 0 6px 30px rgba(251, 191, 36, 0.45);
    transform: translateY(-2px);
}

.win-wheel-spin-btn:active {
    transform: translateY(0) scale(0.97);
}

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

.win-wheel-result {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.win-wheel-result.revealed {
    opacity: 1;
    animation: _s39_resultReveal 0.5s ease-out;
}

.win-wheel-result-multiplier {
    font-size: 2.5rem;
    font-weight: 900;
    color: #fbbf24;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
    line-height: 1;
}

.win-wheel-result-amount {
    font-size: 1.1rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-top: 6px;
}

.win-wheel-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: #aaa;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 20;
}

.win-wheel-close:hover {
    background: rgba(255, 50, 50, 0.2);
    border-color: rgba(255, 50, 50, 0.4);
    color: #ff6b6b;
}

@media (max-width: 480px) {

    .win-wheel-container {
        width: 240px;
        height: 240px;
    }
    .win-wheel-title {
        font-size: 1.2rem;
    }
    .win-wheel-center {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
}



/* ============================================================
   Feature 3: Auto-Cashout (.auto-cashout-*)
   ============================================================ */

.auto-cashout-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #1e1e3a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 0.82rem;
    animation: _s39_fadeIn 0.3s ease-out;
}

.auto-cashout-toggle {
    position: relative;
    width: 38px;
    height: 20px;
    flex-shrink: 0;
}

.auto-cashout-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.auto-cashout-toggle-track {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.25s ease;
}

.auto-cashout-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #64748b;
    border-radius: 50%;
    transition: all 0.25s ease;
}

.auto-cashout-toggle input:checked + .auto-cashout-toggle-track {
    background: rgba(251, 191, 36, 0.3);
}

.auto-cashout-toggle input:checked + .auto-cashout-toggle-track::after {
    left: 20px;
    background: #fbbf24;
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
}

.auto-cashout-label {
    color: #94a3b8;
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
}

.auto-cashout-label.active {
    color: #fbbf24;
}

.auto-cashout-input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 4px 8px;
    transition: border-color 0.2s ease;
}

.auto-cashout-input-wrap:focus-within {
    border-color: rgba(251, 191, 36, 0.4);
}

.auto-cashout-input-wrap .currency-sign {
    color: #64748b;
    font-weight: 600;
    font-size: 0.82rem;
}

.auto-cashout-input {
    width: 70px;
    background: transparent;
    border: none;
    outline: none;
    color: #e2e8f0;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
}

.auto-cashout-input::placeholder {
    color: #475569;
}

.auto-cashout-input::-webkit-outer-spin-button,
.auto-cashout-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.auto-cashout-progress {
    flex: 1;
    min-width: 60px;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.auto-cashout-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #22c55e);
    border-radius: 3px;
    transition: width 0.4s ease;
    animation: _s39_progressFill 0.6s ease-out;
    position: relative;
}

.auto-cashout-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
    border-radius: 0 3px 3px 0;
}

.auto-cashout-progress-text {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 600;
    white-space: nowrap;
    min-width: 32px;
    text-align: right;
}

.auto-cashout-bar.disabled .auto-cashout-input-wrap,
.auto-cashout-bar.disabled .auto-cashout-progress,
.auto-cashout-bar.disabled .auto-cashout-progress-text {
    opacity: 0.35;
    pointer-events: none;
}

/* Celebration overlay when target reached */
.auto-cashout-celebration {
    position: fixed;
    inset: 0;
    z-index: 10100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.auto-cashout-celebration.active {
    opacity: 1;
    pointer-events: auto;
}

.auto-cashout-celebration-text {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 0 30px rgba(251, 191, 36, 0.5), 0 0 60px rgba(251, 191, 36, 0.2);
    animation: _s39_celebrateText 0.6s ease-out;
}

.auto-cashout-celebration-amount {
    font-size: 1.3rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-top: 10px;
    animation: _s39_fadeSlideUp 0.5s ease-out 0.2s backwards;
}

.auto-cashout-celebration-sub {
    font-size: 0.9rem;
    color: #94a3b8;
    margin-top: 6px;
    animation: _s39_fadeSlideUp 0.5s ease-out 0.35s backwards;
}

.auto-cashout-confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    animation: _s39_confettiBurst 1.5s ease-out forwards;
    pointer-events: none;
}

.auto-cashout-confetti:nth-child(6n+1) { background: #fbbf24; top: 60%; left: 30%; animation-delay: 0s; }
.auto-cashout-confetti:nth-child(6n+2) { background: #8b5cf6; top: 55%; left: 50%; animation-delay: 0.1s; }
.auto-cashout-confetti:nth-child(6n+3) { background: #22c55e; top: 65%; left: 70%; animation-delay: 0.2s; }
.auto-cashout-confetti:nth-child(6n+4) { background: #ef4444; top: 58%; left: 40%; animation-delay: 0.15s; }
.auto-cashout-confetti:nth-child(6n+5) { background: #3b82f6; top: 62%; left: 60%; animation-delay: 0.25s; }
.auto-cashout-confetti:nth-child(6n+6) { background: #f97316; top: 57%; left: 20%; animation-delay: 0.05s; }

.auto-cashout-dismiss-btn {
    margin-top: 24px;
    padding: 10px 30px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 8px;
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    animation: _s39_fadeSlideUp 0.5s ease-out 0.5s backwards;
}

.auto-cashout-dismiss-btn:hover {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.5);
}

@media (max-width: 600px) {

    .auto-cashout-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 10px;
    }
    .auto-cashout-progress {
        min-width: 100%;
        order: 10;
    }
    .auto-cashout-celebration-text {
        font-size: 1.6rem;
    }
}



/* ========================================================
   Sprint 40 — Mystery Box Drops, Tournament Bar, Bonus Meter
   All keyframes prefixed _s40_ to avoid collisions
   ======================================================== */

/* -------------------------------------------------------
   S40 KEYFRAMES
   ------------------------------------------------------- */

@keyframes _s40_boxPulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3),
                0 0 40px rgba(251, 191, 36, 0.15),
                inset 0 0 15px rgba(251, 191, 36, 0.05);
  }
  50% {
    box-shadow: 0 0 35px rgba(251, 191, 36, 0.5),
                0 0 70px rgba(251, 191, 36, 0.25),
                inset 0 0 25px rgba(251, 191, 36, 0.1);
  }
}

@keyframes _s40_boxShake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-4px, -2px) rotate(-1deg); }
  20% { transform: translate(4px, 2px) rotate(1deg); }
  30% { transform: translate(-3px, 1px) rotate(-0.5deg); }
  40% { transform: translate(3px, -1px) rotate(0.5deg); }
  50% { transform: translate(-2px, 2px) rotate(-0.3deg); }
  60% { transform: translate(2px, -2px) rotate(0.3deg); }
  70% { transform: translate(-1px, 1px) rotate(-0.2deg); }
  80% { transform: translate(1px, -1px) rotate(0.2deg); }
  90% { transform: translate(-1px, 0) rotate(0deg); }
}

@keyframes _s40_prizeRevealScale {
  0% {
    transform: scale(0.3) rotate(-10deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.15) rotate(3deg);
    opacity: 1;
  }
  70% {
    transform: scale(0.95) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes _s40_sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: scale(1.2) rotate(90deg);
  }
  50% {
    opacity: 0.8;
    transform: scale(0.8) rotate(180deg);
  }
  75% {
    opacity: 1;
    transform: scale(1.1) rotate(270deg);
  }
}

@keyframes _s40_overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes _s40_overlayFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes _s40_boxEntrance {
  0% {
    transform: scale(0.1) translateY(60px);
    opacity: 0;
  }
  60% {
    transform: scale(1.08) translateY(-10px);
    opacity: 1;
  }
  80% {
    transform: scale(0.96) translateY(3px);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes _s40_btnShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes _s40_trophySpin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes _s40_trophyBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.1); }
}

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

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

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

@keyframes _s40_milestoneGlowPulse {
  0%, 100% {
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.3);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.7),
                0 0 30px rgba(251, 191, 36, 0.3);
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes _s40_milestoneHit {
  0% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 5px rgba(251, 191, 36, 0.3);
  }
  30% {
    transform: translate(-50%, -50%) scale(1.6);
    box-shadow: 0 0 25px rgba(251, 191, 36, 0.8),
                0 0 50px rgba(251, 191, 36, 0.4);
  }
  60% {
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
  }
}

@keyframes _s40_rewardPopup {
  0% {
    transform: translateX(-50%) scale(0.3) translateY(20px);
    opacity: 0;
  }
  50% {
    transform: translateX(-50%) scale(1.1) translateY(-5px);
    opacity: 1;
  }
  70% {
    transform: translateX(-50%) scale(0.95) translateY(2px);
  }
  100% {
    transform: translateX(-50%) scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes _s40_rewardPopupExit {
  from {
    transform: translateX(-50%) scale(1) translateY(0);
    opacity: 1;
  }
  to {
    transform: translateX(-50%) scale(0.6) translateY(-30px);
    opacity: 0;
  }
}

@keyframes _s40_lidOpen {
  0% {
    transform: rotateX(0deg) translateY(0);
  }
  40% {
    transform: rotateX(-100deg) translateY(-20px);
  }
  60% {
    transform: rotateX(-110deg) translateY(-25px);
  }
  100% {
    transform: rotateX(-105deg) translateY(-22px);
  }
}

@keyframes _s40_lightRays {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
  }
  50% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.2) rotate(15deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8) rotate(30deg);
  }
}


/* -------------------------------------------------------
   FEATURE 1: Mystery Box Drops — #mysteryBoxOverlay
   ------------------------------------------------------- */

#mysteryBoxOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10500;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 20, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: _s40_overlayFadeIn 0.35s ease-out forwards;
}

#mysteryBoxOverlay.active {
  display: flex;
}

#mysteryBoxOverlay.closing {
  animation: _s40_overlayFadeOut 0.3s ease-in forwards;
  pointer-events: none;
}

/* -------------------------------------------------------
   FEATURE 2: Tournament Entry Bar — #tournamentBar
   ------------------------------------------------------- */

#tournamentBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 9200;
  display: none;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(26, 26, 46, 0.92), rgba(15, 15, 26, 0.96));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(251, 191, 36, 0.2);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4),
              0 -1px 0 rgba(251, 191, 36, 0.1);
  padding: 0 20px;
  font-family: inherit;
}

#tournamentBar.active {
  display: flex;
  animation: _s40_slideUp 0.4s ease-out forwards;
}

#tournamentBar.hiding {
  animation: _s40_slideDown 0.3s ease-in forwards;
}

.tournament-bar-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1200px;
  width: 100%;
  justify-content: space-between;
}

.tournament-bar-trophy {
  font-size: 1.5rem;
  animation: _s40_trophyBounce 2s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.4));
  flex-shrink: 0;
}

.tournament-bar-trophy:hover {
  animation: _s40_trophySpin 0.8s ease-in-out;
}

.tournament-bar-info {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 0;
}

.tournament-bar-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.tournament-bar-divider {
  width: 1px;
  height: 24px;
  background: rgba(226, 232, 240, 0.15);
  flex-shrink: 0;
}

.tournament-bar-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #e2e8f0;
  white-space: nowrap;
}

.tournament-bar-timer-icon {
  font-size: 0.9rem;
}

.tournament-bar-timer.urgent {
  animation: _s40_timerPulse 1s ease-in-out infinite;
}

.tournament-bar-timer.urgent .tournament-bar-timer-value {
  color: #ef4444;
  font-weight: 700;
}

.tournament-bar-rank {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: rgba(226, 232, 240, 0.8);
  white-space: nowrap;
}

.tournament-bar-rank-value {
  color: #fbbf24;
  font-weight: 700;
  font-size: 0.9rem;
}

.tournament-bar-prize {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: rgba(226, 232, 240, 0.8);
  white-space: nowrap;
}

.tournament-bar-prize-value {
  color: #34d399;
  font-weight: 700;
}

.tournament-bar-enter-btn {
  padding: 8px 22px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #0f0f1a;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(251, 191, 36, 0.3);
  flex-shrink: 0;
  white-space: nowrap;
}

.tournament-bar-enter-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(251, 191, 36, 0.45);
  background: linear-gradient(135deg, #fcd34d, #fbbf24);
}

.tournament-bar-enter-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 5px rgba(251, 191, 36, 0.25);
}

.tournament-bar-enter-btn.entered {
  background: linear-gradient(135deg, #34d399, #10b981);
  color: #fff;
  cursor: default;
  box-shadow: 0 2px 10px rgba(52, 211, 153, 0.3);
}

.tournament-leaderboard-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  max-width: 90vw;
  background: linear-gradient(145deg, rgba(26, 26, 46, 0.97), rgba(15, 15, 26, 0.99));
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 14px;
  padding: 16px;
  display: none;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5),
              0 0 20px rgba(251, 191, 36, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 9210;
}

.tournament-leaderboard-popup.active {
  display: flex;
  animation: _s40_slideUp 0.3s ease-out forwards;
}

.tournament-leaderboard-popup.closing {
  animation: _s40_slideDown 0.2s ease-in forwards;
}

.tournament-leaderboard-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(251, 191, 36, 0.15);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tournament-leaderboard-table {
  width: 100%;
  border-collapse: collapse;
}

.tournament-leaderboard-table th {
  font-size: 0.7rem;
  color: rgba(226, 232, 240, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  padding: 4px 8px;
  font-weight: 600;
}

.tournament-leaderboard-table th:last-child {
  text-align: right;
}

.tournament-leaderboard-table td {
  font-size: 0.82rem;
  color: #e2e8f0;
  padding: 7px 8px;
  border-top: 1px solid rgba(226, 232, 240, 0.06);
}

.tournament-leaderboard-table td:last-child {
  text-align: right;
  font-weight: 600;
  color: #34d399;
}

.tournament-leaderboard-row.highlight {
  background: rgba(251, 191, 36, 0.08);
  border-radius: 6px;
}

.tournament-leaderboard-row.highlight td {
  color: #fbbf24;
}

.tournament-leaderboard-row.highlight td:last-child {
  color: #fbbf24;
}

.tournament-leaderboard-rank-1 { color: #fbbf24; }
.tournament-leaderboard-rank-2 { color: #94a3b8; }
.tournament-leaderboard-rank-3 { color: #b45309; }

.tournament-leaderboard-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(42, 42, 62, 0.6);
  border: 1px solid rgba(226, 232, 240, 0.1);
  color: rgba(226, 232, 240, 0.5);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tournament-leaderboard-close:hover {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}


/* -------------------------------------------------------
   FEATURE 3: Progressive Bonus Meter — #bonusMeterBar
   ------------------------------------------------------- */

#bonusMeterBar {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  height: 38px;
  z-index: 9100;
  display: none;
  align-items: center;
  background: linear-gradient(180deg, rgba(15, 15, 26, 0.93), rgba(26, 26, 46, 0.9));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(251, 191, 36, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  padding: 0 20px;
  animation: _s40_meterBarPulse 4s ease-in-out infinite;
}

#bonusMeterBar.active {
  display: flex;
}

.bonus-meter-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.bonus-meter-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(226, 232, 240, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  flex-shrink: 0;
}

.bonus-meter-track {
  flex: 1;
  height: 14px;
  background: rgba(42, 42, 62, 0.8);
  border-radius: 7px;
  position: relative;
  overflow: visible;
  border: 1px solid rgba(226, 232, 240, 0.08);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.bonus-meter-fill {
  height: 100%;
  border-radius: 7px;
  background: linear-gradient(90deg, #22c55e, #34d399, #fbbf24, #f59e0b);
  background-size: 300% 100%;
  animation: _s40_meterFillShine 4s ease-in-out infinite;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  min-width: 0;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.3);
}

.bonus-meter-fill::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  right: 4px;
  height: 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent);
  border-radius: 4px;
}

.bonus-meter-fill.tier-low {
  background: linear-gradient(90deg, #22c55e, #34d399 80%, #86efac);
  background-size: 200% 100%;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.35);
}

.bonus-meter-fill.tier-mid {
  background: linear-gradient(90deg, #34d399, #fbbf24 70%, #fcd34d);
  background-size: 200% 100%;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
}

.bonus-meter-fill.tier-high {
  background: linear-gradient(90deg, #fbbf24, #f59e0b, #b45309);
  background-size: 200% 100%;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

.bonus-meter-fill.tier-max {
  background: linear-gradient(90deg, #f59e0b, #ec4899, #a855f7, #6366f1);
  background-size: 300% 100%;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.4),
              0 0 30px rgba(251, 191, 36, 0.2);
}

.bonus-meter-milestones {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.bonus-meter-milestone {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(42, 42, 62, 0.9);
  border: 2px solid rgba(226, 232, 240, 0.25);
  z-index: 2;
  transition: all 0.3s ease;
}

.bonus-meter-milestone[data-milestone="25"] { left: 25%; }
.bonus-meter-milestone[data-milestone="50"] { left: 50%; }
.bonus-meter-milestone[data-milestone="75"] { left: 75%; }
.bonus-meter-milestone[data-milestone="100"] { left: calc(100% - 1px); }

.bonus-meter-milestone.reached {
  background: #fbbf24;
  border-color: #fbbf24;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

.bonus-meter-milestone.near {
  animation: _s40_milestoneGlowPulse 1.2s ease-in-out infinite;
  border-color: rgba(251, 191, 36, 0.6);
}

.bonus-meter-milestone.just-hit {
  animation: _s40_milestoneHit 0.6s ease-out forwards;
  background: #fbbf24;
  border-color: #fcd34d;
}

.bonus-meter-milestone-label {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  color: rgba(226, 232, 240, 0.4);
  white-space: nowrap;
  pointer-events: none;
}

.bonus-meter-milestone.reached .bonus-meter-milestone-label {
  color: #fbbf24;
  font-weight: 600;
}

.bonus-meter-percent {
  font-size: 0.82rem;
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 38px;
  text-align: right;
}

.bonus-meter-percent .pct-value {
  color: #fbbf24;
}

.bonus-meter-reward-popup {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background: linear-gradient(145deg, rgba(26, 26, 46, 0.97), rgba(15, 15, 26, 0.99));
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
              0 0 20px rgba(251, 191, 36, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 9110;
  white-space: nowrap;
}

.bonus-meter-reward-popup.active {
  display: flex;
  animation: _s40_rewardPopup 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.bonus-meter-reward-popup.closing {
  animation: _s40_rewardPopupExit 0.3s ease-in forwards;
}

.bonus-meter-reward-icon {
  font-size: 2rem;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.4));
}

.bonus-meter-reward-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bonus-meter-reward-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: #34d399;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.3);
}

.bonus-meter-reward-desc {
  font-size: 0.78rem;
  color: rgba(226, 232, 240, 0.6);
}

.bonus-meter-reward-claim-btn {
  padding: 8px 24px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #0f0f1a;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

.bonus-meter-reward-claim-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.45);
}

.bonus-meter-reward-claim-btn:active {
  transform: translateY(1px);
}


/* -------------------------------------------------------
   S40 RESPONSIVE — Mobile adjustments
   ------------------------------------------------------- */

@media (max-width: 768px) {

  /* Tournament Bar */
  #tournamentBar {
    height: auto;
    min-height: 46px;
    padding: 6px 12px;
  }

  .tournament-bar-inner {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .tournament-bar-name {
    max-width: 120px;
    font-size: 0.78rem;
  }

  .tournament-bar-divider {
    display: none;
  }

  .tournament-bar-timer,
  .tournament-bar-rank,
  .tournament-bar-prize {
    font-size: 0.75rem;
  }

  .tournament-bar-enter-btn {
    padding: 6px 16px;
    font-size: 0.75rem;
  }

  .tournament-leaderboard-popup {
    width: 280px;
    padding: 12px;
  }

  /* Bonus Meter */
  #bonusMeterBar {
    height: 34px;
    padding: 0 12px;
  }

  .bonus-meter-inner {
    gap: 8px;
  }

  .bonus-meter-label {
    font-size: 0.65rem;
    display: none;
  }

  .bonus-meter-track {
    height: 12px;
  }

  .bonus-meter-milestone {
    width: 8px;
    height: 8px;
  }

  .bonus-meter-milestone-label {
    display: none;
  }

  .bonus-meter-percent {
    font-size: 0.75rem;
  }

  .bonus-meter-reward-popup {
    padding: 12px 18px;
    gap: 6px;
  }

  .bonus-meter-reward-icon {
    font-size: 1.5rem;
  }

  .bonus-meter-reward-value {
    font-size: 1.1rem;
  }
}


@media (max-width: 480px) {

  .tournament-bar-info {
    gap: 8px;
  }

  .tournament-bar-name {
    max-width: 80px;
  }

  .tournament-bar-rank,
  .tournament-bar-prize {
    display: none;
  }

  .bonus-meter-reward-popup {
    max-width: 260px;
  }
}



/* ============================================================
   SPRINT 41 — Daily Cashback, Slot Race Timer, Deposit Streak
   Prefix: _s41_
   ============================================================ */

/* ----------------------------------------------------------
   S41 KEYFRAMES
   ---------------------------------------------------------- */

@keyframes _s41_slideInRight {
  0% {
    opacity: 0;
    transform: translateX(120%) scale(0.92);
  }
  60% {
    opacity: 1;
    transform: translateX(-6%) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes _s41_slideOutRight {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(120%) scale(0.92);
  }
}

@keyframes _s41_slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-120%) scale(0.92);
  }
  60% {
    opacity: 1;
    transform: translateX(6%) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes _s41_slideOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-120%) scale(0.92);
  }
}

@keyframes _s41_progressRingSpin {
  0% { transform: rotate(-90deg); }
  100% { transform: rotate(270deg); }
}

@keyframes _s41_raceIconMove {
  0% { left: 0%; }
  100% { left: calc(100% - 28px); }
}

@keyframes _s41_racePulseGo {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.18);
    text-shadow: 0 0 20px rgba(74, 222, 128, 1), 0 0 40px rgba(74, 222, 128, 0.5);
  }
}

@keyframes _s41_raceBarNeonPulse {
  0%, 100% { box-shadow: 0 2px 12px rgba(74, 222, 128, 0.15); }
  50% { box-shadow: 0 2px 20px rgba(74, 222, 128, 0.35), 0 0 4px rgba(74, 222, 128, 0.2); }
}

@keyframes _s41_neonGlow {
  0%, 100% { text-shadow: 0 0 6px rgba(74, 222, 128, 0.5); }
  50% { text-shadow: 0 0 14px rgba(74, 222, 128, 0.9), 0 0 28px rgba(74, 222, 128, 0.4); }
}

@keyframes _s41_streakFlame {
  0%, 100% {
    transform: scaleY(1) scaleX(1);
    opacity: 0.85;
  }
  25% {
    transform: scaleY(1.15) scaleX(0.92);
    opacity: 1;
  }
  50% {
    transform: scaleY(0.9) scaleX(1.08);
    opacity: 0.75;
  }
  75% {
    transform: scaleY(1.1) scaleX(0.95);
    opacity: 0.95;
  }
}

@keyframes _s41_streakFlameFlicker {
  0%   { opacity: 0.6; transform: translateY(0) scale(1); }
  20%  { opacity: 0.9; transform: translateY(-2px) scale(1.05); }
  40%  { opacity: 0.5; transform: translateY(-1px) scale(0.97); }
  60%  { opacity: 1;   transform: translateY(-3px) scale(1.08); }
  80%  { opacity: 0.7; transform: translateY(-1px) scale(1.02); }
  100% { opacity: 0.6; transform: translateY(0) scale(1); }
}

@keyframes _s41_dayCheckPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes _s41_multiplierBadgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 22px rgba(251, 191, 36, 0.8), 0 0 44px rgba(251, 191, 36, 0.3);
  }
}

@keyframes _s41_currentDayGlow {
  0%, 100% {
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.4), inset 0 0 4px rgba(251, 191, 36, 0.15);
  }
  50% {
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.8), 0 0 32px rgba(251, 191, 36, 0.3), inset 0 0 8px rgba(251, 191, 36, 0.25);
  }
}

@keyframes _s41_fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


/* ----------------------------------------------------------
   FEATURE 1: DAILY CASHBACK PANEL
   ---------------------------------------------------------- */

#dailyCashbackPanel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 280px;
  z-index: 9100;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(26, 26, 46, 0.97), rgba(15, 15, 26, 0.98));
  border: 1px solid rgba(251, 191, 36, 0.25);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.55),
    0 0 1px rgba(251, 191, 36, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  overflow: hidden;
  animation: _s41_slideInRight 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  pointer-events: auto;
  font-family: inherit;
}

#dailyCashbackPanel.s41-hiding {
  animation: _s41_slideOutRight 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

#dailyCashbackPanel .s41-cashback-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#dailyCashbackPanel .s41-cashback-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 7px;
}

#dailyCashbackPanel .s41-cashback-title-icon {
  font-size: 16px;
}

#dailyCashbackPanel .s41-cashback-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  line-height: 1;
}

#dailyCashbackPanel .s41-cashback-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

#dailyCashbackPanel .s41-cashback-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#dailyCashbackPanel .s41-cashback-ring-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

#dailyCashbackPanel .s41-cashback-ring-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

#dailyCashbackPanel .s41-cashback-ring-svg {
  width: 64px;
  height: 64px;
  transform: rotate(-90deg);
}

#dailyCashbackPanel .s41-cashback-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 4;
}

#dailyCashbackPanel .s41-cashback-ring-progress {
  fill: none;
  stroke: #fbbf24;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 175.93;
  stroke-dashoffset: 44;
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));
}

#dailyCashbackPanel .s41-cashback-ring-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  font-weight: 700;
  color: #fbbf24;
  text-align: center;
  line-height: 1.15;
}

#dailyCashbackPanel .s41-cashback-ring-label small {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 1px;
}

#dailyCashbackPanel .s41-cashback-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

#dailyCashbackPanel .s41-cashback-percentage {
  font-size: 22px;
  font-weight: 800;
  color: #fbbf24;
  line-height: 1;
}

#dailyCashbackPanel .s41-cashback-percentage span {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 3px;
}

#dailyCashbackPanel .s41-cashback-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

#dailyCashbackPanel .s41-cashback-stat-label {
  color: rgba(255, 255, 255, 0.5);
}

#dailyCashbackPanel .s41-cashback-stat-value {
  color: #fff;
  font-weight: 600;
}

#dailyCashbackPanel .s41-cashback-stat-value.s41-loss {
  color: #f87171;
}

#dailyCashbackPanel .s41-cashback-stat-value.s41-gain {
  color: #4ade80;
}

#dailyCashbackPanel .s41-cashback-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  margin: 0;
}

#dailyCashbackPanel .s41-cashback-amount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#dailyCashbackPanel .s41-cashback-earned-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
}

#dailyCashbackPanel .s41-cashback-earned-amount {
  font-size: 20px;
  font-weight: 800;
  color: #4ade80;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.3);
}

#dailyCashbackPanel .s41-cashback-collect-btn {
  display: block;
  width: 100%;
  padding: 11px 0;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  color: #0f0f1a;
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
  background-size: 200% auto;
  box-shadow:
    0 4px 14px rgba(251, 191, 36, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: all 0.25s ease;
  animation: _s41_collectPulse 2.5s ease-in-out infinite;
}

#dailyCashbackPanel .s41-cashback-collect-btn:hover {
  background-size: 200% auto;
  animation: _s41_collectBtnShimmer 1.5s linear infinite;
  background-image: linear-gradient(135deg, #fbbf24, #f59e0b, #fbbf24, #f59e0b);
  transform: translateY(-1px);
  box-shadow:
    0 6px 20px rgba(251, 191, 36, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

#dailyCashbackPanel .s41-cashback-collect-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

#dailyCashbackPanel .s41-cashback-collect-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  animation: none;
  transform: none;
}

#dailyCashbackPanel .s41-cashback-footer {
  padding: 8px 16px 10px 16px;
  text-align: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}


/* ----------------------------------------------------------
   FEATURE 2: SLOT RACE TIMER BAR
   ---------------------------------------------------------- */

#slotRaceBar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  z-index: 9200;
  background: linear-gradient(180deg, rgba(15, 15, 26, 0.97), rgba(26, 26, 46, 0.95));
  border-bottom: 1px solid rgba(74, 222, 128, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  font-family: inherit;
  color: #fff;
  animation: _s41_raceBarNeonPulse 3s ease-in-out infinite;
  box-shadow: 0 2px 12px rgba(74, 222, 128, 0.15);
}

#slotRaceBar.s41-race-hidden {
  display: none;
}

#slotRaceBar .s41-race-go-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 6px;
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: #0f0f1a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  animation: _s41_racePulseGo 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

#slotRaceBar .s41-race-go-badge.s41-race-inactive {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
  color: rgba(255, 255, 255, 0.4);
  animation: none;
}

#slotRaceBar .s41-race-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #4ade80;
  flex-shrink: 0;
  animation: _s41_neonGlow 2.5s ease-in-out infinite;
}

#slotRaceBar .s41-race-track {
  flex: 1;
  height: 16px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(74, 222, 128, 0.12);
  min-width: 80px;
}

#slotRaceBar .s41-race-track-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(74, 222, 128, 0.2), rgba(74, 222, 128, 0.35));
  border-radius: 8px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#slotRaceBar .s41-race-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.6));
  z-index: 2;
  line-height: 1;
}

#slotRaceBar .s41-race-checkpoints {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

#slotRaceBar .s41-race-checkpoint {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
}

#slotRaceBar .s41-race-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

#slotRaceBar .s41-race-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

#slotRaceBar .s41-race-stat-value {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}

#slotRaceBar .s41-race-stat-value.s41-race-position {
  color: #4ade80;
  font-size: 15px;
}

#slotRaceBar .s41-race-stat-label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
}

#slotRaceBar .s41-race-timer {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

#slotRaceBar .s41-race-timer-icon {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

#slotRaceBar .s41-race-timer-value {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  min-width: 50px;
  text-align: center;
}

#slotRaceBar .s41-race-timer-value.s41-race-ending {
  color: #f87171;
  animation: _s41_racePulseGo 0.8s ease-in-out infinite;
}

#slotRaceBar .s41-race-laps {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 3px;
}

#slotRaceBar .s41-race-laps-count {
  color: #4ade80;
  font-weight: 700;
}


/* ----------------------------------------------------------
   FEATURE 3: DEPOSIT STREAK REWARDS PANEL
   ---------------------------------------------------------- */

#depositStreakPanel {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 290px;
  z-index: 9100;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(26, 26, 46, 0.97), rgba(15, 15, 26, 0.98));
  border: 1px solid rgba(251, 191, 36, 0.2);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.55),
    0 0 1px rgba(251, 191, 36, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  overflow: hidden;
  animation: _s41_slideInLeft 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  pointer-events: auto;
  font-family: inherit;
}

#depositStreakPanel.s41-hiding {
  animation: _s41_slideOutLeft 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

#depositStreakPanel .s41-streak-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#depositStreakPanel .s41-streak-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 7px;
}

#depositStreakPanel .s41-streak-title-icon {
  font-size: 16px;
}

#depositStreakPanel .s41-streak-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  line-height: 1;
}

#depositStreakPanel .s41-streak-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

#depositStreakPanel .s41-streak-body {
  padding: 14px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#depositStreakPanel .s41-streak-multiplier-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#depositStreakPanel .s41-streak-multiplier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.15));
  border: 1px solid rgba(251, 191, 36, 0.35);
  font-size: 16px;
  font-weight: 800;
  color: #fbbf24;
  animation: _s41_multiplierBadgePulse 2.5s ease-in-out infinite;
}

#depositStreakPanel .s41-streak-multiplier-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#depositStreakPanel .s41-streak-calendar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
}

#depositStreakPanel .s41-streak-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
}

#depositStreakPanel .s41-streak-day-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  transition: all 0.3s ease;
  position: relative;
}

#depositStreakPanel .s41-streak-day.s41-completed .s41-streak-day-circle {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(34, 197, 94, 0.15));
  border-color: #4ade80;
  color: #4ade80;
}

#depositStreakPanel .s41-streak-day.s41-completed .s41-streak-day-check {
  animation: _s41_dayCheckPop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

#depositStreakPanel .s41-streak-day.s41-current .s41-streak-day-circle {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
  border-color: #fbbf24;
  color: #fbbf24;
  animation: _s41_currentDayGlow 2s ease-in-out infinite;
}

#depositStreakPanel .s41-streak-day.s41-milestone .s41-streak-day-circle {
  border-width: 2.5px;
}

#depositStreakPanel .s41-streak-day-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.3px;
}

#depositStreakPanel .s41-streak-day.s41-completed .s41-streak-day-label {
  color: rgba(74, 222, 128, 0.6);
}

#depositStreakPanel .s41-streak-day.s41-current .s41-streak-day-label {
  color: #fbbf24;
  font-weight: 700;
}

#depositStreakPanel .s41-streak-connector {
  height: 2px;
  flex: 0.4;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 1px;
  align-self: center;
  margin-top: -14px;
}

#depositStreakPanel .s41-streak-connector.s41-filled {
  background: linear-gradient(90deg, #4ade80, rgba(74, 222, 128, 0.4));
}

#depositStreakPanel .s41-streak-flame-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0 4px 0;
}

#depositStreakPanel .s41-streak-flame {
  font-size: 28px;
  animation: _s41_streakFlame 0.8s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));
}

#depositStreakPanel .s41-streak-flame-particles {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 40px;
  pointer-events: none;
}

#depositStreakPanel .s41-streak-flame-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fbbf24;
  animation: _s41_streakFlameFlicker 1.2s ease-in-out infinite;
  opacity: 0;
}

#depositStreakPanel .s41-streak-flame-particle:nth-child(1) {
  left: 20%;
  top: 30%;
  animation-delay: 0s;
  background: #f97316;
}

#depositStreakPanel .s41-streak-flame-particle:nth-child(2) {
  left: 55%;
  top: 15%;
  animation-delay: 0.3s;
  background: #fbbf24;
}

#depositStreakPanel .s41-streak-flame-particle:nth-child(3) {
  left: 75%;
  top: 40%;
  animation-delay: 0.6s;
  background: #ef4444;
}

#depositStreakPanel .s41-streak-flame-particle:nth-child(4) {
  left: 35%;
  top: 10%;
  animation-delay: 0.15s;
  background: #fbbf24;
}

#depositStreakPanel .s41-streak-flame-particle:nth-child(5) {
  left: 65%;
  top: 25%;
  animation-delay: 0.45s;
  background: #f97316;
}

#depositStreakPanel.s41-no-streak .s41-streak-flame-wrap {
  display: none;
}

#depositStreakPanel .s41-streak-milestones {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

#depositStreakPanel .s41-streak-milestone-card {
  flex: 1;
  padding: 8px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  transition: all 0.3s ease;
}

#depositStreakPanel .s41-streak-milestone-card.s41-active {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.06));
  border-color: rgba(251, 191, 36, 0.3);
}

#depositStreakPanel .s41-streak-milestone-card.s41-achieved {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.1), rgba(34, 197, 94, 0.06));
  border-color: rgba(74, 222, 128, 0.3);
}

#depositStreakPanel .s41-streak-milestone-days {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 3px;
}

#depositStreakPanel .s41-streak-milestone-card.s41-active .s41-streak-milestone-days,
#depositStreakPanel .s41-streak-milestone-card.s41-achieved .s41-streak-milestone-days {
  color: rgba(255, 255, 255, 0.7);
}

#depositStreakPanel .s41-streak-milestone-mult {
  font-size: 16px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.3);
}

#depositStreakPanel .s41-streak-milestone-card.s41-active .s41-streak-milestone-mult {
  color: #fbbf24;
}

#depositStreakPanel .s41-streak-milestone-card.s41-achieved .s41-streak-milestone-mult {
  color: #4ade80;
}

#depositStreakPanel .s41-streak-footer {
  padding: 8px 16px 10px 16px;
  text-align: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}


/* ----------------------------------------------------------
   S41 RESPONSIVE — MOBILE ADJUSTMENTS
   ---------------------------------------------------------- */

@media (max-width: 768px) {

  #dailyCashbackPanel {
    bottom: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: 340px;
  }

  #depositStreakPanel {
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: 340px;
  }

  #slotRaceBar {
    height: 32px;
    padding: 0 10px;
    gap: 8px;
    font-size: 11px;
  }

  #slotRaceBar .s41-race-title {
    display: none;
  }

  #slotRaceBar .s41-race-laps {
    display: none;
  }

  #slotRaceBar .s41-race-stats {
    gap: 8px;
  }

  #slotRaceBar .s41-race-stat-value {
    font-size: 11px;
  }

  #slotRaceBar .s41-race-timer-value {
    font-size: 12px;
    min-width: 42px;
  }

  #depositStreakPanel .s41-streak-day-circle {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }

  #depositStreakPanel .s41-streak-milestone-card {
    padding: 6px 4px;
  }

  #depositStreakPanel .s41-streak-milestone-mult {
    font-size: 14px;
  }
}


@media (max-width: 480px) {

  #dailyCashbackPanel {
    bottom: 8px;
    right: 8px;
    left: 8px;
    border-radius: 12px;
  }

  #dailyCashbackPanel .s41-cashback-ring-wrap {
    width: 52px;
    height: 52px;
  }

  #dailyCashbackPanel .s41-cashback-ring-svg {
    width: 52px;
    height: 52px;
  }

  #dailyCashbackPanel .s41-cashback-percentage {
    font-size: 18px;
  }

  #depositStreakPanel {
    bottom: 8px;
    left: 8px;
    right: 8px;
    border-radius: 12px;
  }

  #depositStreakPanel .s41-streak-calendar {
    gap: 2px;
  }

  #depositStreakPanel .s41-streak-day-circle {
    width: 26px;
    height: 26px;
    font-size: 9px;
  }

  #depositStreakPanel .s41-streak-day-label {
    font-size: 8px;
  }

  #slotRaceBar {
    height: 30px;
    padding: 0 8px;
    gap: 6px;
  }

  #slotRaceBar .s41-race-go-badge {
    font-size: 10px;
    padding: 2px 7px;
  }

  #slotRaceBar .s41-race-track {
    height: 14px;
  }
}



/* ----------------------------------------------------------
   S41 UTILITY: stacking when both panels are visible
   ---------------------------------------------------------- */

#dailyCashbackPanel + #depositStreakPanel,
#depositStreakPanel.s41-stacked {
  bottom: 24px;
}

/* If both bottom panels are visible, nudge deposit streak above cashback */
body.s41-both-panels #depositStreakPanel {
  left: 24px;
}

body.s41-both-panels #dailyCashbackPanel {
  right: 24px;
}

/* Ensure panels don't overlap on narrow screens */
@media (max-width: 640px) {

  body.s41-both-panels #depositStreakPanel {
    bottom: auto;
    top: auto;
    transform-origin: bottom left;
  }

  body.s41-both-panels #dailyCashbackPanel {
    transform-origin: bottom right;
  }
}


/* Dark scrollbar for panels if they ever overflow */
#dailyCashbackPanel::-webkit-scrollbar,
#depositStreakPanel::-webkit-scrollbar {
  width: 4px;
}

#dailyCashbackPanel::-webkit-scrollbar-track,
#depositStreakPanel::-webkit-scrollbar-track {
  background: transparent;
}

#dailyCashbackPanel::-webkit-scrollbar-thumb,
#depositStreakPanel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

/* END SPRINT 41 */


/* ============================================================
   SPRINT 42 — VIP Reward Wheel, Loss Limit Reminder, Quick Bet Presets
   Gold design system: #fbbf24 primary, #0f0f1a / #1a1a2e backgrounds
   ============================================================ */

/* ------------------------------------------------------------------
   S42 KEYFRAMES
   ------------------------------------------------------------------ */

@keyframes _s42_wheelSpin {
  0% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(1800deg);
  }
  100% {
    transform: rotate(1850deg);
  }
}

@keyframes _s42_warningPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

@keyframes _s42_slideUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes _s42_chipBounce {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.25);
  }
  50% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes _s42_overlayFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes _s42_cardPopIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes _s42_shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes _s42_pointerBob {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(4px);
  }
}

@keyframes _s42_glowPulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.4), 0 0 16px rgba(251, 191, 36, 0.2);
  }
  50% {
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.7), 0 0 32px rgba(251, 191, 36, 0.4);
  }
}


/* ------------------------------------------------------------------
   FEATURE 1: VIP REWARD WHEEL (#vipWheelOverlay)
   ------------------------------------------------------------------ */

#vipWheelOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10500;
  animation: _s42_overlayFadeIn 0.3s ease-out;
}

#vipWheelOverlay.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.s42-wheel-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.s42-wheel-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 400px;
  background: linear-gradient(165deg, #1a1a2e 0%, #0f0f1a 100%);
  border: 2px solid #fbbf24;
  border-radius: 18px;
  padding: 28px 24px 24px;
  box-shadow:
    0 0 30px rgba(251, 191, 36, 0.25),
    0 20px 60px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(251, 191, 36, 0.15);
  animation: _s42_cardPopIn 0.35s ease-out;
  text-align: center;
}

.s42-wheel-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
}

.s42-wheel-subtitle {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.s42-wheel-container {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto 20px;
}

.s42-wheel-pointer {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 22px solid #fbbf24;
  z-index: 3;
  filter: drop-shadow(0 2px 6px rgba(251, 191, 36, 0.5));
  animation: _s42_pointerBob 1.2s ease-in-out infinite;
}

.s42-wheel-disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 4px solid #fbbf24;
  box-shadow:
    0 0 20px rgba(251, 191, 36, 0.3),
    inset 0 0 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s linear;
}

.s42-wheel-disc.spinning {
  animation: _s42_wheelSpin 4.5s cubic-bezier(0.17, 0.67, 0.16, 1) forwards;
}

.s42-wheel-segment {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 0;
  left: 50%;
  transform-origin: 0% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.s42-wheel-segment:nth-child(1) {
  transform: rotate(0deg) skewY(-45deg);
  background: #1a1a2e;
}
.s42-wheel-segment:nth-child(2) {
  transform: rotate(45deg) skewY(-45deg);
  background: #12122a;
}
.s42-wheel-segment:nth-child(3) {
  transform: rotate(90deg) skewY(-45deg);
  background: #1a1a2e;
}
.s42-wheel-segment:nth-child(4) {
  transform: rotate(135deg) skewY(-45deg);
  background: #12122a;
}
.s42-wheel-segment:nth-child(5) {
  transform: rotate(180deg) skewY(-45deg);
  background: #1a1a2e;
}
.s42-wheel-segment:nth-child(6) {
  transform: rotate(225deg) skewY(-45deg);
  background: #12122a;
}
.s42-wheel-segment:nth-child(7) {
  transform: rotate(270deg) skewY(-45deg);
  background: #1a1a2e;
}
.s42-wheel-segment:nth-child(8) {
  transform: rotate(315deg) skewY(-45deg);
  background: #12122a;
}

.s42-wheel-segment-label {
  position: absolute;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fbbf24;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  transform: skewY(45deg) rotate(22.5deg);
  pointer-events: none;
  letter-spacing: 0.5px;
}

.s42-wheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #d4a017);
  border: 3px solid #0f0f1a;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 900;
  color: #0f0f1a;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.5);
}

.s42-wheel-result {
  display: none;
  font-size: 1.2rem;
  font-weight: 800;
  color: #fbbf24;
  margin-bottom: 16px;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.s42-wheel-result.visible {
  display: block;
}

.s42-wheel-claim-btn {
  display: inline-block;
  padding: 12px 40px;
  background: linear-gradient(135deg, #fbbf24, #d4a017);
  color: #0f0f1a;
  font-size: 1rem;
  font-weight: 800;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow:
    0 4px 16px rgba(251, 191, 36, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  background-size: 200% auto;
}

.s42-wheel-claim-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 24px rgba(251, 191, 36, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, #fcd34d, #fbbf24);
}

.s42-wheel-claim-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

.s42-wheel-claim-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.s42-wheel-close-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

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

.s42-wheel-prizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 14px;
}

.s42-wheel-prize-tag {
  font-size: 0.68rem;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  color: rgba(251, 191, 36, 0.8);
  font-weight: 600;
}


/* ------------------------------------------------------------------
   FEATURE 2: LOSS LIMIT REMINDER (#lossLimitBar)
   ------------------------------------------------------------------ */

#lossLimitBar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 44px;
  background: linear-gradient(90deg, #92400e 0%, #b45309 50%, #92400e 100%);
  border-top: 2px solid #f59e0b;
  z-index: 10200;
  animation: _s42_slideUp 0.35s ease-out;
  box-shadow: 0 -4px 20px rgba(245, 158, 11, 0.25);
}

#lossLimitBar.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.s42-loss-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 900px;
  padding: 0 16px;
  height: 100%;
}

.s42-loss-icon {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
  animation: _s42_warningPulse 1.8s ease-in-out infinite;
  color: #fbbf24;
}

.s42-loss-text {
  font-size: 0.78rem;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
}

.s42-loss-amount {
  font-weight: 800;
  color: #fbbf24;
}

.s42-loss-duration {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  margin-left: 4px;
}

.s42-loss-separator {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.s42-loss-break-btn {
  padding: 5px 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  flex-shrink: 0;
}

.s42-loss-break-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.s42-loss-break-btn:active {
  transform: translateY(0);
}

.s42-loss-dismiss-btn {
  padding: 4px 8px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 1rem;
  cursor: pointer;
  transition: color 0.2s;
  flex-shrink: 0;
  line-height: 1;
}

.s42-loss-dismiss-btn:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Critical state — high losses turn bar red */
#lossLimitBar.s42-critical {
  background: linear-gradient(90deg, #7f1d1d 0%, #991b1b 50%, #7f1d1d 100%);
  border-top-color: #ef4444;
  box-shadow: 0 -4px 24px rgba(239, 68, 68, 0.3);
}

#lossLimitBar.s42-critical .s42-loss-icon {
  color: #fca5a5;
}

#lossLimitBar.s42-critical .s42-loss-amount {
  color: #fca5a5;
}

#lossLimitBar.s42-critical .s42-loss-break-btn {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
}

#lossLimitBar.s42-critical .s42-loss-break-btn:hover {
  background: rgba(239, 68, 68, 0.4);
  border-color: rgba(239, 68, 68, 0.7);
}

/* Progress bar within loss bar */
.s42-loss-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  transition: width 0.5s ease;
  border-radius: 0 2px 0 0;
}

#lossLimitBar.s42-critical .s42-loss-progress {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}


/* ------------------------------------------------------------------
   FEATURE 3: QUICK BET PRESETS (#quickBetStrip)
   ------------------------------------------------------------------ */

#quickBetStrip {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 36px;
  background: rgba(15, 15, 26, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(251, 191, 36, 0.12);
  z-index: 120;
}

#quickBetStrip.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.s42-bet-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: 0 12px;
}

.s42-bet-strip-label {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin-right: 4px;
  flex-shrink: 0;
}

.s42-bet-chip {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

.s42-bet-chip:hover {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  transform: translateY(-1px);
}

.s42-bet-chip:active {
  transform: translateY(0) scale(0.95);
}

.s42-bet-chip.active {
  border-color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.3), 0 0 20px rgba(251, 191, 36, 0.15);
  animation: _s42_chipBounce 0.4s ease-out, _s42_glowPulse 2s ease-in-out infinite;
}

.s42-bet-chip-min {
  font-size: 0.52rem;
  letter-spacing: 0.3px;
}

.s42-bet-chip-max {
  font-size: 0.52rem;
  letter-spacing: 0.3px;
}

/* Divider between chips */
.s42-bet-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

/* Current bet display */
.s42-bet-current {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  margin-left: 8px;
  flex-shrink: 0;
}

.s42-bet-current-value {
  color: #fbbf24;
  font-weight: 800;
}


/* ------------------------------------------------------------------
   RESPONSIVE: TABLET (max-width: 768px)
   ------------------------------------------------------------------ */

@media (max-width: 768px) {


  /* VIP Wheel */
  .s42-wheel-card {
    max-width: 340px;
    padding: 22px 18px 20px;
  }

  .s42-wheel-container {
    width: 240px;
    height: 240px;
  }

  .s42-wheel-title {
    font-size: 1.2rem;
    letter-spacing: 1.5px;
  }

  .s42-wheel-subtitle {
    font-size: 0.75rem;
  }

  .s42-wheel-center {
    width: 44px;
    height: 44px;
    font-size: 0.95rem;
  }

  .s42-wheel-claim-btn {
    padding: 10px 32px;
    font-size: 0.9rem;
  }

  .s42-wheel-prize-tag {
    font-size: 0.62rem;
    padding: 2px 8px;
  }

  /* Loss Limit Bar */
  .s42-loss-inner {
    gap: 10px;
    padding: 0 12px;
  }

  .s42-loss-text {
    font-size: 0.72rem;
  }

  .s42-loss-break-btn {
    padding: 4px 12px;
    font-size: 0.68rem;
  }

  .s42-loss-separator {
    height: 16px;
  }

  /* Quick Bet Strip */
  .s42-bet-strip-inner {
    gap: 8px;
  }

  .s42-bet-chip {
    width: 26px;
    height: 26px;
    font-size: 0.56rem;
  }

  .s42-bet-strip-label {
    font-size: 0.58rem;
  }

  .s42-bet-current {
    font-size: 0.62rem;
  }
}



/* ------------------------------------------------------------------
   RESPONSIVE: MOBILE (max-width: 480px)
   ------------------------------------------------------------------ */

@media (max-width: 480px) {


  /* VIP Wheel */
  .s42-wheel-card {
    max-width: 300px;
    padding: 18px 14px 16px;
    border-radius: 14px;
  }

  .s42-wheel-container {
    width: 200px;
    height: 200px;
    margin-bottom: 16px;
  }

  .s42-wheel-title {
    font-size: 1.05rem;
    letter-spacing: 1px;
  }

  .s42-wheel-subtitle {
    font-size: 0.7rem;
    margin-bottom: 14px;
  }

  .s42-wheel-center {
    width: 38px;
    height: 38px;
    font-size: 0.85rem;
    border-width: 2px;
  }

  .s42-wheel-pointer {
    border-left-width: 10px;
    border-right-width: 10px;
    border-top-width: 16px;
    top: -8px;
  }

  .s42-wheel-claim-btn {
    padding: 10px 28px;
    font-size: 0.82rem;
    border-radius: 8px;
    letter-spacing: 1px;
  }

  .s42-wheel-result {
    font-size: 1rem;
  }

  .s42-wheel-prizes {
    gap: 4px;
    margin-top: 10px;
  }

  .s42-wheel-prize-tag {
    font-size: 0.58rem;
    padding: 2px 6px;
  }

  .s42-wheel-close-btn {
    width: 26px;
    height: 26px;
    font-size: 0.85rem;
    line-height: 24px;
    top: 10px;
    right: 10px;
  }

  /* Loss Limit Bar */
  #lossLimitBar {
    height: 40px;
  }

  .s42-loss-inner {
    gap: 6px;
    padding: 0 8px;
  }

  .s42-loss-icon {
    font-size: 0.95rem;
  }

  .s42-loss-text {
    font-size: 0.65rem;
  }

  .s42-loss-duration {
    display: none;
  }

  .s42-loss-separator {
    display: none;
  }

  .s42-loss-break-btn {
    padding: 4px 10px;
    font-size: 0.62rem;
    letter-spacing: 0.5px;
    border-radius: 5px;
  }

  .s42-loss-dismiss-btn {
    font-size: 0.85rem;
    padding: 3px 6px;
  }

  /* Quick Bet Strip */
  #quickBetStrip {
    height: 34px;
  }

  .s42-bet-strip-inner {
    gap: 6px;
    padding: 0 8px;
  }

  .s42-bet-strip-label {
    display: none;
  }

  .s42-bet-chip {
    width: 24px;
    height: 24px;
    font-size: 0.52rem;
    border-width: 1.5px;
  }

  .s42-bet-divider {
    height: 12px;
  }

  .s42-bet-current {
    font-size: 0.58rem;
    margin-left: 4px;
  }
}


/* END SPRINT 42 */


/* =============================================
   SPRINT 43 — Spin Multiplier Event, Referral Bonus Tracker, Session Rewards Popup
   Gold design system: #fbbf24 accent, #0f0f1a / #1a1a2e backgrounds
   ============================================= */

/* ------------------------------------------------------------------
   S43 KEYFRAMES
   ------------------------------------------------------------------ */

@keyframes _s43_multPulse {
  0% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
  }
  50% {
    transform: translateX(-50%) scale(1.08);
    box-shadow: 0 0 28px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.2);
  }
  100% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
  }
}

@keyframes _s43_multSlideDown {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-40px) scale(0.85);
  }
  60% {
    opacity: 1;
    transform: translateX(-50%) translateY(6px) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes _s43_multFadeOut {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-24px) scale(0.9);
  }
}

@keyframes _s43_rewardPopIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
  75% {
    transform: translate(-50%, -50%) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes _s43_clockTick {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(6deg);
  }
  20% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes _s43_shimmerSlide {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

@keyframes _s43_backdropFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes _s43_badgeUnlock {
  0% {
    transform: scale(0) rotate(-15deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.2) rotate(5deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* ------------------------------------------------------------------
   FEATURE 1: SPIN MULTIPLIER EVENT BANNER (#spinMultiplierBanner)
   ------------------------------------------------------------------ */

#spinMultiplierBanner {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10050;
  width: 200px;
  padding: 10px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
  border: 1.5px solid rgba(251, 191, 36, 0.5);
  color: #fbbf24;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  text-align: center;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s;
}

#spinMultiplierBanner.s43-mult-active {
  opacity: 1;
  visibility: visible;
  animation: _s43_multSlideDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             _s43_multPulse 1.6s ease-in-out 0.5s infinite;
}

#spinMultiplierBanner.s43-mult-dismiss {
  animation: _s43_multFadeOut 0.4s ease-in forwards;
}

.s43-mult-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: rgba(251, 191, 36, 0.65);
  margin-bottom: 2px;
  text-transform: uppercase;
}

.s43-mult-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.15;
  text-shadow: 0 0 12px currentColor;
}

.s43-mult-icon {
  display: inline-block;
  margin-right: 4px;
  font-size: 1.1rem;
  vertical-align: middle;
}

/* --- Color variants --- */

#spinMultiplierBanner.s43-mult-2x {
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.5);
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

#spinMultiplierBanner.s43-mult-2x .s43-mult-value {
  text-shadow: 0 0 14px rgba(96, 165, 250, 0.7);
}

#spinMultiplierBanner.s43-mult-2x.s43-mult-active {
  animation: _s43_multSlideDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             _s43_multPulse 1.6s ease-in-out 0.5s infinite;
  --_s43-glow-color: rgba(96, 165, 250, 0.4);
}

#spinMultiplierBanner.s43-mult-3x {
  color: #c084fc;
  border-color: rgba(192, 132, 252, 0.5);
  background: linear-gradient(135deg, #1a0f2e 0%, #2d1b4e 100%);
}

#spinMultiplierBanner.s43-mult-3x .s43-mult-value {
  text-shadow: 0 0 14px rgba(192, 132, 252, 0.7);
}

#spinMultiplierBanner.s43-mult-5x {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.65);
  background: linear-gradient(135deg, #1a1608 0%, #2e2410 100%);
}

#spinMultiplierBanner.s43-mult-5x .s43-mult-value {
  font-size: 1.7rem;
  text-shadow: 0 0 18px rgba(251, 191, 36, 0.8), 0 0 40px rgba(251, 191, 36, 0.3);
}

/* ------------------------------------------------------------------
   FEATURE 2: REFERRAL BONUS TRACKER (#referralTrackerPanel)
   ------------------------------------------------------------------ */

#referralTrackerPanel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9900;
  width: 260px;
  background: linear-gradient(160deg, #1a1a2e 0%, #0f0f1a 100%);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 16px;
  padding: 16px;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: #e2e8f0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(251, 191, 36, 0.08);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#referralTrackerPanel.s43-ref-hidden {
  transform: translateX(300px);
  opacity: 0;
  pointer-events: none;
}

.s43-ref-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(251, 191, 36, 0.15);
}

.s43-ref-gift-icon {
  font-size: 1.4rem;
  display: inline-block;
  line-height: 1;
}

.s43-ref-gift-icon.s43-ref-unlocked {
  animation: _s43_giftBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.s43-ref-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  flex: 1;
}

.s43-ref-close-btn {
  width: 22px;
  height: 22px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  line-height: 1;
}

.s43-ref-close-btn:hover {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.s43-ref-count-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.s43-ref-count {
  font-size: 1.6rem;
  font-weight: 900;
  color: #fbbf24;
  line-height: 1;
}

.s43-ref-count-label {
  font-size: 0.68rem;
  color: #94a3b8;
  font-weight: 500;
}

.s43-ref-next-label {
  font-size: 0.65rem;
  color: #64748b;
  text-align: right;
}

/* Progress bar */
.s43-ref-progress-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 14px;
}

.s43-ref-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: _s43_progressFill 0.8s ease-out;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

/* Milestone badges */
.s43-ref-milestones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 4px;
}

.s43-ref-milestone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.s43-ref-milestone-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
  transition: all 0.3s ease;
}

.s43-ref-milestone-badge.s43-ref-reached {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-color: #fbbf24;
  color: #0f0f1a;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
  animation: _s43_badgeUnlock 0.5s ease-out;
}

.s43-ref-milestone-label {
  font-size: 0.55rem;
  color: #64748b;
  font-weight: 500;
}

.s43-ref-milestone-label.s43-ref-reached {
  color: #fbbf24;
}

/* Copy link button */
.s43-ref-copy-btn {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid rgba(251, 191, 36, 0.35);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.03));
  color: #fbbf24;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.3s, border-color 0.3s, transform 0.15s;
}

.s43-ref-copy-btn:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(251, 191, 36, 0.08));
  border-color: rgba(251, 191, 36, 0.6);
  transform: translateY(-1px);
}

.s43-ref-copy-btn:active {
  transform: translateY(0) scale(0.98);
}

/* Shimmer on hover */
.s43-ref-copy-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.2), transparent);
  transition: none;
  pointer-events: none;
}

.s43-ref-copy-btn:hover::after {
  animation: _s43_shimmerSlide 0.8s ease-in-out;
}

.s43-ref-copy-btn .s43-ref-copy-icon {
  margin-right: 6px;
  font-size: 0.8rem;
}

.s43-ref-copy-btn.s43-ref-copied {
  border-color: #34d399;
  color: #34d399;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.1), rgba(52, 211, 153, 0.03));
}

/* ------------------------------------------------------------------
   FEATURE 3: SESSION REWARDS POPUP (#sessionRewardPopup)
   ------------------------------------------------------------------ */

.s43-reward-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10100;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: _s43_backdropFadeIn 0.3s ease-out;
  display: none;
}

.s43-reward-backdrop.s43-reward-visible {
  display: flex;
  align-items: center;
  justify-content: center;
}

#sessionRewardPopup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  z-index: 10101;
  width: 90vw;
  max-width: 350px;
  background: linear-gradient(170deg, #1a1a2e 0%, #0f0f1a 60%, #1a1608 100%);
  border: 1.5px solid rgba(251, 191, 36, 0.35);
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: #e2e8f0;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6),
              0 0 40px rgba(251, 191, 36, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s;
}

#sessionRewardPopup.s43-reward-active {
  opacity: 1;
  visibility: visible;
  animation: _s43_rewardPopIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.s43-reward-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 26px;
  height: 26px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.s43-reward-close:hover {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.s43-reward-timer-icon {
  font-size: 2.2rem;
  margin-bottom: 8px;
  display: inline-block;
  animation: _s43_clockTick 2s ease-in-out infinite;
}

.s43-reward-heading {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.s43-reward-session-dur {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-bottom: 16px;
  font-weight: 500;
}

.s43-reward-session-dur .s43-dur-val {
  color: #e2e8f0;
  font-weight: 700;
}

.s43-reward-amount {
  font-size: 2.4rem;
  font-weight: 900;
  color: #fbbf24;
  line-height: 1.1;
  margin-bottom: 4px;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
}

.s43-reward-amount .s43-reward-currency {
  font-size: 1.3rem;
  vertical-align: super;
  margin-right: 2px;
  opacity: 0.8;
}

.s43-reward-tier-label {
  font-size: 0.65rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-bottom: 18px;
}

/* Reward tiers display */
.s43-reward-tiers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.s43-reward-tier {
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.58rem;
  font-weight: 600;
  color: #64748b;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.s43-reward-tier.s43-tier-active {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.35);
  color: #fbbf24;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.15);
}

.s43-reward-tier .s43-tier-time {
  display: block;
  font-size: 0.52rem;
  color: inherit;
  opacity: 0.7;
  margin-top: 1px;
}

/* Claim button */
.s43-reward-claim-btn {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  color: #0f0f1a;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(251, 191, 36, 0.3);
  transition: transform 0.15s, box-shadow 0.3s;
}

.s43-reward-claim-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(251, 191, 36, 0.45);
}

.s43-reward-claim-btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 10px rgba(251, 191, 36, 0.25);
}

.s43-reward-claim-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  pointer-events: none;
}

.s43-reward-claim-btn:hover::after {
  animation: _s43_shimmerSlide 0.7s ease-in-out;
}

.s43-reward-footer-note {
  font-size: 0.55rem;
  color: #475569;
  margin-top: 12px;
  font-weight: 500;
}

/* ------------------------------------------------------------------
   RESPONSIVE: 768px
   ------------------------------------------------------------------ */

@media (max-width: 768px) {

  #spinMultiplierBanner {
    width: 175px;
    padding: 8px 14px;
    font-size: 1rem;
    top: 14px;
    border-radius: 12px;
  }

  .s43-mult-value {
    font-size: 1.3rem;
  }

  #spinMultiplierBanner.s43-mult-5x .s43-mult-value {
    font-size: 1.5rem;
  }

  #referralTrackerPanel {
    width: 240px;
    padding: 14px;
    bottom: 16px;
    right: 16px;
    border-radius: 14px;
  }

  .s43-ref-count {
    font-size: 1.4rem;
  }

  .s43-ref-milestone-badge {
    width: 28px;
    height: 28px;
    font-size: 0.62rem;
  }

  .s43-ref-copy-btn {
    padding: 9px 12px;
    font-size: 0.7rem;
  }

  #sessionRewardPopup {
    max-width: 320px;
    padding: 24px 20px;
    border-radius: 18px;
  }

  .s43-reward-amount {
    font-size: 2rem;
  }

  .s43-reward-claim-btn {
    padding: 12px 18px;
    font-size: 0.82rem;
  }

  .s43-reward-tiers {
    gap: 5px;
  }

  .s43-reward-tier {
    padding: 3px 8px;
    font-size: 0.55rem;
  }
}


/* ------------------------------------------------------------------
   RESPONSIVE: 480px
   ------------------------------------------------------------------ */

@media (max-width: 480px) {

  #spinMultiplierBanner {
    width: 155px;
    padding: 7px 12px;
    font-size: 0.88rem;
    top: 10px;
    border-radius: 10px;
  }

  .s43-mult-label {
    font-size: 0.5rem;
    letter-spacing: 1px;
  }

  .s43-mult-value {
    font-size: 1.15rem;
  }

  #spinMultiplierBanner.s43-mult-5x .s43-mult-value {
    font-size: 1.3rem;
  }

  #referralTrackerPanel {
    width: 220px;
    padding: 12px;
    bottom: 12px;
    right: 12px;
    border-radius: 12px;
  }

  .s43-ref-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }

  .s43-ref-gift-icon {
    font-size: 1.2rem;
  }

  .s43-ref-title {
    font-size: 0.72rem;
  }

  .s43-ref-count {
    font-size: 1.2rem;
  }

  .s43-ref-milestone-badge {
    width: 26px;
    height: 26px;
    font-size: 0.58rem;
  }

  .s43-ref-milestone-label {
    font-size: 0.5rem;
  }

  .s43-ref-copy-btn {
    padding: 8px 10px;
    font-size: 0.65rem;
    border-radius: 8px;
  }

  .s43-ref-progress-track {
    height: 6px;
    margin-bottom: 10px;
  }

  #sessionRewardPopup {
    max-width: 290px;
    padding: 22px 18px;
    border-radius: 16px;
  }

  .s43-reward-timer-icon {
    font-size: 1.8rem;
    margin-bottom: 6px;
  }

  .s43-reward-heading {
    font-size: 0.95rem;
  }

  .s43-reward-amount {
    font-size: 1.8rem;
  }

  .s43-reward-amount .s43-reward-currency {
    font-size: 1rem;
  }

  .s43-reward-claim-btn {
    padding: 11px 16px;
    font-size: 0.78rem;
    border-radius: 10px;
  }

  .s43-reward-tiers {
    gap: 4px;
    margin-bottom: 16px;
  }

  .s43-reward-tier {
    padding: 3px 7px;
    font-size: 0.52rem;
    border-radius: 6px;
  }

  .s43-reward-tier .s43-tier-time {
    font-size: 0.48rem;
  }

  .s43-reward-close {
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    font-size: 0.78rem;
  }

  .s43-reward-footer-note {
    font-size: 0.5rem;
  }
}


/* END SPRINT 43 */

/* ============================================================
   SPRINT 44 — Lucky Number Picker, Achievement Badges, Bet Insurance
   ============================================================ */

/* -------------------------------------------------------
   S44 Keyframe Animations
   ------------------------------------------------------- */

@keyframes _s44_backdropFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(12px);
  }
}

@keyframes _s44_cardSlideUp {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes _s44_tileFlip {
  0% {
    transform: rotateY(0deg) scale(1);
  }
  50% {
    transform: rotateY(90deg) scale(1.05);
  }
  100% {
    transform: rotateY(0deg) scale(1);
  }
}

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

@keyframes _s44_badgeEarnedPop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes _s44_badgeGlow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.4),
                0 0 20px rgba(255, 215, 0, 0.2);
  }
  50% {
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.7),
                0 0 40px rgba(255, 215, 0, 0.35);
  }
}

@keyframes _s44_slideUpBar {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes _s44_shieldPulse {
  0%, 100% {
    text-shadow: 0 0 6px rgba(74, 222, 128, 0.4);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 14px rgba(74, 222, 128, 0.8);
    transform: scale(1.1);
  }
}

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

@keyframes _s44_tileShimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* -------------------------------------------------------
   1. Lucky Number Picker
   ------------------------------------------------------- */

.lucky-number-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 5, 25, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.lucky-number-overlay.active {
  opacity: 1;
  pointer-events: auto;
  animation: _s44_backdropFadeIn 0.4s ease forwards;
}

.s44-lucky-card {
  background: linear-gradient(145deg, #1a1028, #0f0f1a 40%, #1a0e2e);
  border: 2px solid transparent;
  border-radius: 20px;
  padding: 36px 32px 32px;
  max-width: 420px;
  width: 92%;
  position: relative;
  background-clip: padding-box;
  animation: _s44_cardSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.s44-lucky-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 22px;
  background: linear-gradient(135deg, #fbbf24, #a855f7, #fbbf24, #7c3aed);
  background-size: 300% 300%;
  z-index: -1;
  animation: _s44_tileShimmer 4s ease infinite;
}

.s44-lucky-title {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffd700;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5),
               0 0 40px rgba(251, 191, 36, 0.25);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.s44-lucky-subtitle {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(200, 180, 220, 0.7);
  margin-bottom: 24px;
  line-height: 1.4;
}

.s44-lucky-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
  perspective: 800px;
}

.s44-lucky-tile {
  aspect-ratio: 1;
  background: linear-gradient(145deg, #2d1b69, #1a1a2e);
  border: 2px solid rgba(139, 92, 246, 0.35);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  transform-style: preserve-3d;
}

.s44-lucky-tile::before {
  content: '?';
  font-size: 2rem;
  font-weight: 800;
  color: rgba(168, 85, 247, 0.6);
  text-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
  transition: opacity 0.3s ease;
}

.s44-lucky-tile::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  transition: left 0.5s ease;
}

.s44-lucky-tile:hover:not(.s44-revealed) {
  transform: scale(1.06) translateY(-3px);
  border-color: rgba(168, 85, 247, 0.7);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3),
              0 0 12px rgba(168, 85, 247, 0.2);
}

.s44-lucky-tile:hover:not(.s44-revealed)::after {
  left: 100%;
}

.s44-lucky-tile:active:not(.s44-revealed) {
  transform: scale(0.97);
}

.s44-lucky-tile.s44-revealed {
  cursor: default;
  animation: _s44_tileFlip 0.5s ease forwards;
  border-color: rgba(100, 80, 160, 0.4);
  background: linear-gradient(145deg, #221540, #15122a);
}

.s44-lucky-tile.s44-revealed::before {
  opacity: 0;
}

.s44-lucky-tile.s44-winner {
  animation: _s44_tileFlip 0.5s ease forwards,
             _s44_winnerPulse 1.5s ease-in-out 0.5s infinite;
  border-color: #ffd700;
  background: linear-gradient(145deg, #3d2800, #2a1e00, #1a1200);
}

.s44-lucky-tile.s44-winner::before {
  opacity: 0;
}

.s44-lucky-tile.s44-loser {
  cursor: default;
  opacity: 0.4;
  filter: grayscale(0.5);
  border-color: rgba(80, 70, 100, 0.3);
  background: linear-gradient(145deg, #1a1525, #111020);
}

.s44-lucky-tile.s44-loser::before {
  opacity: 0;
}

.s44-lucky-prize {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.s44-lucky-tile.s44-winner .s44-lucky-prize {
  color: #ffd700;
  font-size: 1.5rem;
  text-shadow: 0 0 16px rgba(255, 215, 0, 0.6),
               0 0 32px rgba(251, 191, 36, 0.3);
}

.s44-lucky-tile.s44-loser .s44-lucky-prize {
  color: rgba(180, 160, 200, 0.5);
  text-shadow: none;
}

.s44-lucky-result {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  min-height: 1.5em;
}

.s44-lucky-result.visible {
  opacity: 1;
  transform: translateY(0);
  animation: _s44_resultSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.s44-lucky-claim-btn {
  display: block;
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
  color: #1a0e00;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-transform: uppercase;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 4px 16px rgba(251, 191, 36, 0.35),
              0 0 20px rgba(245, 158, 11, 0.15);
}

.s44-lucky-claim-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(251, 191, 36, 0.5),
              0 0 30px rgba(245, 158, 11, 0.25);
  filter: brightness(1.1);
}

.s44-lucky-claim-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 10px rgba(251, 191, 36, 0.3);
}

.s44-lucky-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  z-index: 2;
  line-height: 1;
}

.s44-lucky-close-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.3);
}

/* -------------------------------------------------------
   2. Achievement Badges
   ------------------------------------------------------- */

.s44-badge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(251, 191, 36, 0.12);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.06), transparent);
}

.s44-badge-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.3px;
}

.s44-badge-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
  line-height: 1;
}

.s44-badge-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.s44-badge-count {
  padding: 8px 18px;
  font-size: 0.78rem;
  color: rgba(200, 180, 220, 0.65);
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.s44-badge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 18px;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(251, 191, 36, 0.2) transparent;
}

.s44-badge-grid::-webkit-scrollbar {
  width: 5px;
}

.s44-badge-grid::-webkit-scrollbar-track {
  background: transparent;
}

.s44-badge-grid::-webkit-scrollbar-thumb {
  background: rgba(251, 191, 36, 0.2);
  border-radius: 10px;
}

.s44-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  cursor: default;
}

.s44-badge-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border: 2px solid rgba(100, 80, 140, 0.3);
  background: linear-gradient(145deg, #2a1f45, #1a1530);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
}

.s44-badge-item.s44-earned .s44-badge-icon {
  border-color: rgba(251, 191, 36, 0.6);
  background: linear-gradient(145deg, #3d2800, #2a1e00);
  animation: _s44_badgeGlow 2.5s ease-in-out infinite;
}

.s44-badge-item.s44-earned {
  animation: _s44_badgeEarnedPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.s44-badge-item.s44-locked .s44-badge-icon {
  border-color: rgba(80, 70, 100, 0.25);
  background: linear-gradient(145deg, #1a1525, #111020);
  filter: grayscale(0.7) brightness(0.5);
  opacity: 0.5;
}

.s44-badge-item.s44-locked {
  cursor: not-allowed;
}

.s44-badge-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(200, 190, 220, 0.7);
  text-align: center;
  line-height: 1.25;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s44-badge-item.s44-earned .s44-badge-label {
  color: rgba(251, 191, 36, 0.85);
}

.s44-badge-item.s44-locked .s44-badge-label {
  color: rgba(140, 130, 160, 0.4);
}

.s44-badge-progress {
  width: calc(100% - 36px);
  height: 5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  margin: 4px 18px 14px;
  overflow: hidden;
  position: relative;
}

.s44-badge-progress-fill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  width: var(--s44-progress, 0%);
  animation: _s44_progressFill 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  position: relative;
}

.s44-badge-progress-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: -1px;
  width: 8px;
  height: 7px;
  border-radius: 50%;
  background: #ffd700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.s44-badge-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 10, 30, 0.95);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.72rem;
  color: rgba(220, 210, 240, 0.85);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.s44-badge-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(15, 10, 30, 0.95);
}

.s44-badge-item:hover .s44-badge-tooltip {
  opacity: 1;
  animation: _s44_tooltipFadeIn 0.3s ease forwards;
}

.s44-badge-item.s44-earned:hover .s44-badge-icon {
  transform: scale(1.1);
}

/* -------------------------------------------------------
   3. Bet Insurance Bar
   ------------------------------------------------------- */

.bet-insurance-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52px;
  background: linear-gradient(180deg, #1a1028, #0f0a18);
  border-top: 1px solid rgba(251, 191, 36, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 24px;
  z-index: 10300;
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
}

.bet-insurance-bar.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  animation: _s44_slideUpBar 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.s44-ins-icon {
  font-size: 1.35rem;
  line-height: 1;
  transition: text-shadow 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
}

.bet-insurance-bar.active .s44-ins-icon {
  animation: _s44_shieldPulse 2s ease-in-out infinite;
}

.s44-ins-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(220, 210, 240, 0.85);
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.s44-ins-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: rgba(60, 50, 80, 0.6);
  border: 1px solid rgba(100, 80, 140, 0.3);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}

.s44-ins-toggle input[type="checkbox"] {
  display: none;
}

.s44-ins-toggle.s44-active {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.3), rgba(0, 255, 136, 0.2));
  border-color: rgba(74, 222, 128, 0.5);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.2);
  animation: _s44_toggleActivate 0.4s ease;
}

.s44-ins-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a0a0b0, #808090);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.25s ease,
              box-shadow 0.25s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.s44-ins-toggle.s44-active .s44-ins-slider {
  transform: translateX(20px);
  background: linear-gradient(135deg, #4ade80, #00ff88);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.5),
              0 1px 4px rgba(0, 0, 0, 0.3);
}

.s44-ins-status {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(180, 160, 200, 0.55);
  white-space: nowrap;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  min-width: 80px;
  flex-shrink: 0;
}

.s44-ins-status.s44-protected {
  color: #4ade80;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
}

.s44-ins-cost {
  font-size: 0.72rem;
  color: rgba(200, 180, 220, 0.5);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.s44-ins-payout {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fbbf24;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.25);
  flex-shrink: 0;
}

.s44-ins-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  margin-left: auto;
  line-height: 1;
}

.s44-ins-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
}

/* -------------------------------------------------------
   S44 Responsive — Tablet / Small Desktop
   ------------------------------------------------------- */

@media (max-width: 768px) {


  /* Lucky Number Picker — mobile */
  .s44-lucky-card {
    padding: 28px 20px 24px;
    max-width: 360px;
    width: 94%;
    border-radius: 16px;
  }

  .s44-lucky-title {
    font-size: 1.35rem;
  }

  .s44-lucky-subtitle {
    font-size: 0.78rem;
    margin-bottom: 18px;
  }

  .s44-lucky-grid {
    gap: 10px;
    margin-bottom: 18px;
  }

  .s44-lucky-tile::before {
    font-size: 1.6rem;
  }

  .s44-lucky-prize {
    font-size: 1.15rem;
  }

  .s44-lucky-tile.s44-winner .s44-lucky-prize {
    font-size: 1.25rem;
  }

  .s44-lucky-result {
    font-size: 0.95rem;
    margin-bottom: 16px;
  }

  .s44-lucky-claim-btn {
    padding: 12px 20px;
    font-size: 0.95rem;
    border-radius: 10px;
  }

  .s44-lucky-close-btn {
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    font-size: 0.95rem;
  }

  .s44-badge-header {
    padding: 14px 14px 10px;
  }

  .s44-badge-title {
    font-size: 0.95rem;
  }

  .s44-badge-grid {
    gap: 10px;
    padding: 14px;
    max-height: 260px;
  }

  .s44-badge-icon {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }

  .s44-badge-label {
    font-size: 0.58rem;
    max-width: 68px;
  }

  .s44-badge-progress {
    margin: 3px 14px 12px;
    height: 4px;
  }

  .s44-badge-tooltip {
    font-size: 0.65rem;
    padding: 8px 10px;
    max-width: 160px;
  }

  .s44-badge-count {
    font-size: 0.7rem;
    padding: 6px 14px;
  }

  /* Bet Insurance Bar — mobile */
  .bet-insurance-bar {
    height: 48px;
    gap: 10px;
    padding: 0 12px;
    flex-wrap: nowrap;
  }

  .s44-ins-icon {
    font-size: 1.15rem;
  }

  .s44-ins-label {
    font-size: 0.72rem;
  }

  .s44-ins-toggle {
    width: 38px;
    height: 22px;
  }

  .s44-ins-slider {
    width: 16px;
    height: 16px;
  }

  .s44-ins-toggle.s44-active .s44-ins-slider {
    transform: translateX(16px);
  }

  .s44-ins-status {
    font-size: 0.68rem;
    min-width: 65px;
  }

  .s44-ins-cost {
    font-size: 0.65rem;
    padding: 2px 6px;
  }

  .s44-ins-payout {
    font-size: 0.72rem;
  }

  .s44-ins-close {
    width: 24px;
    height: 24px;
    font-size: 0.72rem;
  }
}


/* -------------------------------------------------------
   S44 Responsive — Small phones
   ------------------------------------------------------- */

@media (max-width: 420px) {


  .s44-lucky-card {
    padding: 22px 14px 18px;
    max-width: 320px;
    border-radius: 14px;
  }

  .s44-lucky-title {
    font-size: 1.15rem;
  }

  .s44-lucky-subtitle {
    font-size: 0.72rem;
    margin-bottom: 14px;
  }

  .s44-lucky-grid {
    gap: 8px;
    margin-bottom: 14px;
  }

  .s44-lucky-tile::before {
    font-size: 1.35rem;
  }

  .s44-lucky-prize {
    font-size: 1rem;
  }

  .s44-lucky-tile.s44-winner .s44-lucky-prize {
    font-size: 1.1rem;
  }

  .s44-lucky-result {
    font-size: 0.85rem;
  }

  .s44-lucky-claim-btn {
    padding: 10px 16px;
    font-size: 0.85rem;
  }

  .s44-badge-grid {
    gap: 8px;
    padding: 12px;
  }

  .s44-badge-icon {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }

  .s44-badge-label {
    font-size: 0.52rem;
    max-width: 58px;
  }

  .bet-insurance-bar {
    height: 44px;
    gap: 7px;
    padding: 0 8px;
  }

  .s44-ins-icon {
    font-size: 1rem;
  }

  .s44-ins-label {
    font-size: 0.65rem;
  }

  .s44-ins-cost {
    display: none;
  }

  .s44-ins-status {
    font-size: 0.62rem;
    min-width: 55px;
  }

  .s44-ins-payout {
    font-size: 0.65rem;
  }
}


/* ============================================================
   SPRINT 45 — Loyalty Points Shop, Win Celebration Overlay,
               Auto-Collect Rewards Bar
   ============================================================ */

/* ----------------------------------------------------------
   S45 Keyframe Animations
   ---------------------------------------------------------- */

@keyframes _s45_fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes _s45_slideUp {
  from { opacity: 0; transform: translateY(40px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes _s45_slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@keyframes _s45_bounceIn {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.12); opacity: 1; }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

@keyframes _s45_crownBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-18px) rotate(-6deg); }
  50%      { transform: translateY(-8px) rotate(4deg); }
  75%      { transform: translateY(-14px) rotate(-3deg); }
}

@keyframes _s45_amountPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  80%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes _s45_starFloat {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  50%  { transform: translateY(-30px) rotate(180deg) scale(1.2); opacity: 0.7; }
  100% { transform: translateY(-60px) rotate(360deg) scale(0.8); opacity: 0; }
}

@keyframes _s45_shimmerGold {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes _s45_pulseGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(251, 191, 36, 0.3); }
  50%      { box-shadow: 0 0 20px rgba(251, 191, 36, 0.7), 0 0 40px rgba(255, 215, 0, 0.3); }
}

@keyframes _s45_incrementFlash {
  0%   { transform: scale(1); color: #fbbf24; }
  30%  { transform: scale(1.35); color: #4ade80; text-shadow: 0 0 12px rgba(74, 222, 128, 0.8); }
  100% { transform: scale(1); color: #fbbf24; }
}

@keyframes _s45_coinFall {
  0%   { transform: translateY(-80px) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(calc(100vh + 40px)) rotate(720deg); opacity: 0; }
}

@keyframes _s45_spinCoin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

@keyframes _s45_ripple {
  0%   { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

@keyframes _s45_textGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.5), 0 2px 4px rgba(0,0,0,0.8); }
  50%      { text-shadow: 0 0 25px rgba(255, 215, 0, 0.9), 0 0 50px rgba(251, 191, 36, 0.4), 0 2px 4px rgba(0,0,0,0.8); }
}

@keyframes _s45_slideRight {
  from { transform: translateX(-20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes _s45_historyExpand {
  from { max-height: 0; opacity: 0; }
  to   { max-height: 300px; opacity: 1; }
}

/* ----------------------------------------------------------
   1. LOYALTY POINTS SHOP
   ---------------------------------------------------------- */

.loyalty-points-shop {
  position: fixed;
  inset: 0;
  z-index: 10500;
  display: none;
  align-items: center;
  justify-content: center;
}

.loyalty-points-shop.active {
  display: flex;
  animation: _s45_fadeIn 0.3s ease forwards;
}

.s45-shop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.s45-shop-card {
  position: relative;
  z-index: 1;
  width: 92%;
  max-width: 500px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #1a1a2e 0%, #0f0f1a 60%, #2d1b69 100%);
  border: 1.5px solid rgba(251, 191, 36, 0.5);
  border-radius: 16px;
  box-shadow:
    0 0 30px rgba(251, 191, 36, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: _s45_slideUp 0.4s ease forwards;
  overflow: hidden;
}

.s45-shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(251, 191, 36, 0.2);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.08) 0%, transparent 100%);
  flex-shrink: 0;
}

.s45-shop-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.5px;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
  animation: _s45_textGlow 3s ease-in-out infinite;
}

.s45-shop-points {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #fbbf24 0%, #ffd700 100%);
  color: #0f0f1a;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
  white-space: nowrap;
}

.s45-shop-points::before {
  content: '\2B50';
  font-size: 0.9rem;
}

.s45-shop-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #aaa;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

.s45-shop-close:hover {
  background: rgba(255, 70, 70, 0.2);
  border-color: rgba(255, 70, 70, 0.4);
  color: #ff6b6b;
  transform: rotate(90deg);
}

.s45-shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(251, 191, 36, 0.3) transparent;
}

.s45-shop-grid::-webkit-scrollbar {
  width: 5px;
}

.s45-shop-grid::-webkit-scrollbar-track {
  background: transparent;
}

.s45-shop-grid::-webkit-scrollbar-thumb {
  background: rgba(251, 191, 36, 0.3);
  border-radius: 3px;
}

.s45-shop-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.s45-shop-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(251, 191, 36, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.s45-shop-item:hover {
  transform: translateY(-4px);
  border-color: rgba(251, 191, 36, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 12px rgba(251, 191, 36, 0.1);
}

.s45-shop-item:hover::before {
  opacity: 1;
}

.s45-shop-item.s45-affordable {
  border-color: rgba(74, 222, 128, 0.35);
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.s45-shop-item.s45-affordable:hover {
  border-color: rgba(74, 222, 128, 0.6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 16px rgba(74, 222, 128, 0.15);
}

.s45-shop-item.s45-too-expensive {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

.s45-shop-item.s45-too-expensive:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.s45-shop-item-icon {
  font-size: 2.2rem;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.s45-shop-item:hover .s45-shop-item-icon {
  animation: _s45_bounceIn 0.5s ease;
}

.s45-shop-item-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #e0e0e0;
  text-align: center;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

.s45-shop-item-cost {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 3px;
  position: relative;
  z-index: 1;
}

.s45-shop-item-cost::before {
  content: '\2B50';
  font-size: 0.7rem;
}

.s45-shop-buy-btn {
  width: 100%;
  padding: 7px 0;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #ffd700 100%);
  background-size: 200% 100%;
  border: none;
  border-radius: 8px;
  color: #0f0f1a;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}

.s45-shop-buy-btn:hover {
  background-position: 100% center;
  box-shadow: 0 4px 16px rgba(251, 191, 36, 0.4);
  transform: scale(1.03);
}

.s45-shop-buy-btn:active {
  transform: scale(0.97);
}

.s45-shop-buy-btn:disabled {
  background: linear-gradient(135deg, #444 0%, #555 100%);
  color: #888;
  cursor: not-allowed;
  box-shadow: none;
}

.s45-shop-buy-btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

.s45-shop-footer {
  padding: 12px 20px 16px;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
  font-style: italic;
}


/* ----------------------------------------------------------
   2. WIN CELEBRATION OVERLAY
   ---------------------------------------------------------- */

.win-celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 10600;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.win-celebration-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.s45-celeb-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(45, 27, 105, 0.85) 0%,
    rgba(15, 15, 26, 0.92) 60%,
    rgba(0, 0, 0, 0.95) 100%);
  animation: _s45_fadeIn 0.5s ease forwards;
}

.s45-celeb-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 30px;
  text-align: center;
}

.s45-celeb-crown {
  font-size: 4rem;
  line-height: 1;
  animation: _s45_crownBounce 1.8s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(255, 215, 0, 0.5));
}

.s45-celeb-title {
  font-size: 3.2rem;
  font-weight: 900;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-shadow:
    0 0 20px rgba(255, 215, 0, 0.6),
    0 0 40px rgba(251, 191, 36, 0.3),
    0 4px 0 #b8860b,
    0 5px 0 #a07608,
    0 6px 0 #8b6508,
    0 7px 10px rgba(0, 0, 0, 0.5);
  animation: _s45_textGlow 2s ease-in-out infinite;
}

.s45-celeb-amount {
  font-size: 2.8rem;
  font-weight: 800;
  color: #4ade80;
  text-shadow:
    0 0 15px rgba(74, 222, 128, 0.5),
    0 0 30px rgba(0, 255, 136, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.6);
  animation: _s45_amountPop 0.8s ease forwards;
  animation-delay: 0.3s;
  opacity: 0;
  animation-fill-mode: forwards;
}

.s45-celeb-multiplier {
  display: inline-block;
  background: linear-gradient(135deg, #fbbf24 0%, #ffd700 50%, #f59e0b 100%);
  background-size: 200% 100%;
  color: #0f0f1a;
  font-size: 1.6rem;
  font-weight: 900;
  padding: 8px 24px;
  border-radius: 30px;
  letter-spacing: 1px;
  box-shadow:
    0 4px 20px rgba(251, 191, 36, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: _s45_bounceIn 0.6s ease forwards, _s45_shimmerGold 3s linear infinite;
  animation-delay: 0.6s, 0s;
  opacity: 0;
  animation-fill-mode: forwards, none;
}

.s45-celeb-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.s45-celeb-star {
  position: absolute;
  font-size: 1.4rem;
  animation: _s45_starFloat 2.5s ease-out infinite;
  opacity: 0;
}

.s45-celeb-star:nth-child(1) { left: 10%; top: 70%; animation-delay: 0s; }
.s45-celeb-star:nth-child(2) { left: 25%; top: 80%; animation-delay: 0.4s; }
.s45-celeb-star:nth-child(3) { left: 45%; top: 75%; animation-delay: 0.8s; }
.s45-celeb-star:nth-child(4) { left: 65%; top: 82%; animation-delay: 1.2s; }
.s45-celeb-star:nth-child(5) { left: 80%; top: 68%; animation-delay: 0.2s; }
.s45-celeb-star:nth-child(6) { left: 15%; top: 60%; animation-delay: 1.5s; }
.s45-celeb-star:nth-child(7) { left: 55%; top: 65%; animation-delay: 0.6s; }
.s45-celeb-star:nth-child(8) { left: 90%; top: 78%; animation-delay: 1.0s; }
.s45-celeb-star:nth-child(9) { left: 35%; top: 58%; animation-delay: 1.8s; }
.s45-celeb-star:nth-child(10) { left: 72%; top: 55%; animation-delay: 0.3s; }

.s45-celeb-dismiss-btn {
  margin-top: 12px;
  padding: 14px 48px;
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #00ff88 100%);
  background-size: 200% 100%;
  border: none;
  border-radius: 12px;
  color: #0f0f1a;
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow:
    0 4px 20px rgba(74, 222, 128, 0.3),
    0 0 30px rgba(0, 255, 136, 0.1);
  animation: _s45_bounceIn 0.5s ease forwards, _s45_pulseGlow 2s ease-in-out infinite;
  animation-delay: 1s, 1.5s;
  opacity: 0;
  animation-fill-mode: forwards, none;
}

.s45-celeb-dismiss-btn:hover {
  background-position: 100% center;
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 8px 30px rgba(74, 222, 128, 0.5),
    0 0 40px rgba(0, 255, 136, 0.2);
}

.s45-celeb-dismiss-btn:active {
  transform: translateY(0) scale(0.97);
}

.s45-celeb-coins {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.s45-celeb-coins .s45-coin {
  position: absolute;
  top: -40px;
  width: 28px;
  height: 28px;
  background: radial-gradient(circle at 35% 35%, #ffd700, #b8860b);
  border-radius: 50%;
  border: 2px solid #daa520;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.2);
  animation: _s45_coinFall var(--fall-duration, 2.5s) linear infinite;
  animation-delay: var(--fall-delay, 0s);
}

.s45-celeb-coins .s45-coin::after {
  content: '$';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 900;
  color: #8b6508;
  animation: _s45_spinCoin 1s linear infinite;
}

.s45-celeb-coins .s45-coin:nth-child(1)  { left: 5%;  --fall-duration: 2.2s; --fall-delay: 0.0s; }
.s45-celeb-coins .s45-coin:nth-child(2)  { left: 15%; --fall-duration: 2.8s; --fall-delay: 0.3s; }
.s45-celeb-coins .s45-coin:nth-child(3)  { left: 25%; --fall-duration: 2.0s; --fall-delay: 0.7s; }
.s45-celeb-coins .s45-coin:nth-child(4)  { left: 35%; --fall-duration: 2.5s; --fall-delay: 0.1s; }
.s45-celeb-coins .s45-coin:nth-child(5)  { left: 45%; --fall-duration: 3.0s; --fall-delay: 0.5s; }
.s45-celeb-coins .s45-coin:nth-child(6)  { left: 55%; --fall-duration: 2.3s; --fall-delay: 0.9s; }
.s45-celeb-coins .s45-coin:nth-child(7)  { left: 65%; --fall-duration: 2.7s; --fall-delay: 0.2s; }
.s45-celeb-coins .s45-coin:nth-child(8)  { left: 75%; --fall-duration: 2.1s; --fall-delay: 0.6s; }
.s45-celeb-coins .s45-coin:nth-child(9)  { left: 85%; --fall-duration: 2.9s; --fall-delay: 0.4s; }
.s45-celeb-coins .s45-coin:nth-child(10) { left: 92%; --fall-duration: 2.4s; --fall-delay: 0.8s; }


/* ----------------------------------------------------------
   3. AUTO-COLLECT REWARDS BAR
   ---------------------------------------------------------- */

.auto-collect-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10400;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
  border-bottom: 1.5px solid rgba(251, 191, 36, 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: visible;
}

.auto-collect-bar.active {
  transform: translateY(0);
  animation: _s45_slideDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.s45-ac-icon {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.4));
}

.s45-ac-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.s45-ac-total {
  font-size: 1rem;
  font-weight: 800;
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
  min-width: 60px;
  text-align: center;
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.s45-ac-total.s45-increment {
  animation: _s45_incrementFlash 0.6s ease forwards;
}

.s45-ac-toggle {
  position: relative;
  width: 42px;
  height: 22px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 11px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-left: auto;
}

.s45-ac-toggle:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.s45-ac-toggle.s45-enabled {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.3) 0%, rgba(251, 191, 36, 0.3) 100%);
  border-color: rgba(74, 222, 128, 0.5);
}

.s45-ac-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #ccc 0%, #999 100%);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.s45-ac-toggle.s45-enabled .s45-ac-slider {
  left: 22px;
  background: linear-gradient(135deg, #4ade80 0%, #fbbf24 100%);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);
}

.s45-ac-history {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #0f0f1a 0%, #1a1a2e 100%);
  border-bottom: 1.5px solid rgba(251, 191, 36, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: max-height 0.4s ease, opacity 0.3s ease;
  opacity: 0;
}

.s45-ac-history.s45-expanded {
  max-height: 300px;
  opacity: 1;
  overflow-y: auto;
  animation: _s45_historyExpand 0.4s ease forwards;
}

.s45-ac-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  animation: _s45_slideRight 0.3s ease forwards;
  opacity: 0;
}

.s45-ac-history-item:nth-child(1) { animation-delay: 0.05s; }
.s45-ac-history-item:nth-child(2) { animation-delay: 0.1s; }
.s45-ac-history-item:nth-child(3) { animation-delay: 0.15s; }
.s45-ac-history-item:nth-child(4) { animation-delay: 0.2s; }
.s45-ac-history-item:nth-child(5) { animation-delay: 0.25s; }
.s45-ac-history-item:nth-child(6) { animation-delay: 0.3s; }
.s45-ac-history-item:nth-child(7) { animation-delay: 0.35s; }
.s45-ac-history-item:nth-child(8) { animation-delay: 0.4s; }

.s45-ac-history-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.s45-ac-history-item .s45-ach-name {
  color: #e0e0e0;
  font-weight: 600;
}

.s45-ac-history-item .s45-ach-amount {
  color: #4ade80;
  font-weight: 700;
}

.s45-ac-history-item .s45-ach-time {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.7rem;
}

.s45-ac-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #999;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  line-height: 1;
}

.s45-ac-close:hover {
  background: rgba(255, 70, 70, 0.15);
  border-color: rgba(255, 70, 70, 0.3);
  color: #ff6b6b;
}


/* ----------------------------------------------------------
   S45 RESPONSIVE — Tablet (max-width: 768px)
   ---------------------------------------------------------- */

@media (max-width: 768px) {


  /* Loyalty Shop */
  .s45-shop-card {
    max-width: 95%;
    max-height: 88vh;
    border-radius: 12px;
  }

  .s45-shop-header {
    padding: 14px 16px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .s45-shop-title {
    font-size: 1.15rem;
  }

  .s45-shop-points {
    font-size: 0.78rem;
    padding: 4px 10px;
  }

  .s45-shop-grid {
    gap: 10px;
    padding: 12px 16px;
  }

  .s45-shop-item {
    padding: 12px 8px 10px;
    border-radius: 10px;
  }

  .s45-shop-item-icon {
    font-size: 1.8rem;
  }

  .s45-shop-item-name {
    font-size: 0.75rem;
  }

  .s45-shop-item-cost {
    font-size: 0.7rem;
  }

  .s45-shop-buy-btn {
    padding: 6px 0;
    font-size: 0.72rem;
  }

  .s45-shop-footer {
    padding: 10px 16px 12px;
    font-size: 0.72rem;
  }

  /* Win Celebration */
  .s45-celeb-crown {
    font-size: 3rem;
  }

  .s45-celeb-title {
    font-size: 2.4rem;
    letter-spacing: 2px;
  }

  .s45-celeb-amount {
    font-size: 2.2rem;
  }

  .s45-celeb-multiplier {
    font-size: 1.3rem;
    padding: 6px 20px;
  }

  .s45-celeb-dismiss-btn {
    padding: 12px 36px;
    font-size: 1rem;
  }

  .s45-celeb-coins .s45-coin {
    width: 22px;
    height: 22px;
  }

  /* Auto-Collect Bar */
  .auto-collect-bar {
    height: 40px;
    gap: 10px;
    padding: 0 12px;
  }

  .s45-ac-icon {
    font-size: 1.1rem;
  }

  .s45-ac-label {
    font-size: 0.7rem;
    letter-spacing: 0.5px;
  }

  .s45-ac-total {
    font-size: 0.9rem;
    min-width: 50px;
  }

  .s45-ac-toggle {
    width: 38px;
    height: 20px;
    border-radius: 10px;
  }

  .s45-ac-slider {
    width: 14px;
    height: 14px;
  }

  .s45-ac-toggle.s45-enabled .s45-ac-slider {
    left: 20px;
  }

  .s45-ac-close {
    width: 26px;
    height: 26px;
    font-size: 0.9rem;
  }

  .s45-ac-history-item {
    padding: 8px 12px;
    font-size: 0.72rem;
  }
}



/* ----------------------------------------------------------
   S45 RESPONSIVE — Mobile (max-width: 420px)
   ---------------------------------------------------------- */

@media (max-width: 420px) {


  /* Loyalty Shop */
  .s45-shop-card {
    width: 98%;
    max-height: 92vh;
    border-radius: 10px;
  }

  .s45-shop-header {
    padding: 12px 12px 10px;
  }

  .s45-shop-title {
    font-size: 1rem;
  }

  .s45-shop-points {
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: 14px;
  }

  .s45-shop-close {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }

  .s45-shop-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 12px;
  }

  .s45-shop-item {
    padding: 10px 6px 8px;
    gap: 6px;
    border-radius: 8px;
  }

  .s45-shop-item-icon {
    font-size: 1.6rem;
  }

  .s45-shop-item-name {
    font-size: 0.68rem;
  }

  .s45-shop-item-cost {
    font-size: 0.65rem;
  }

  .s45-shop-buy-btn {
    padding: 5px 0;
    font-size: 0.68rem;
    border-radius: 6px;
  }

  .s45-shop-footer {
    padding: 8px 12px 10px;
    font-size: 0.65rem;
  }

  /* Win Celebration */
  .s45-celeb-content {
    padding: 30px 16px;
    gap: 12px;
  }

  .s45-celeb-crown {
    font-size: 2.4rem;
  }

  .s45-celeb-title {
    font-size: 1.8rem;
    letter-spacing: 1.5px;
    text-shadow:
      0 0 12px rgba(255, 215, 0, 0.6),
      0 0 20px rgba(251, 191, 36, 0.3),
      0 3px 0 #b8860b,
      0 4px 6px rgba(0, 0, 0, 0.5);
  }

  .s45-celeb-amount {
    font-size: 1.7rem;
  }

  .s45-celeb-multiplier {
    font-size: 1.1rem;
    padding: 5px 16px;
    border-radius: 20px;
  }

  .s45-celeb-dismiss-btn {
    padding: 11px 30px;
    font-size: 0.9rem;
    border-radius: 10px;
    letter-spacing: 1px;
  }

  .s45-celeb-star {
    font-size: 1rem;
  }

  .s45-celeb-coins .s45-coin {
    width: 18px;
    height: 18px;
    border-width: 1.5px;
  }

  .s45-celeb-coins .s45-coin::after {
    font-size: 0.55rem;
  }

  /* Auto-Collect Bar */
  .auto-collect-bar {
    height: 36px;
    gap: 7px;
    padding: 0 8px;
  }

  .s45-ac-icon {
    font-size: 1rem;
  }

  .s45-ac-label {
    font-size: 0.62rem;
    display: none;
  }

  .s45-ac-total {
    font-size: 0.82rem;
    min-width: 45px;
  }

  .s45-ac-toggle {
    width: 34px;
    height: 18px;
    border-radius: 9px;
  }

  .s45-ac-slider {
    width: 12px;
    height: 12px;
    top: 2px;
    left: 2px;
  }

  .s45-ac-toggle.s45-enabled .s45-ac-slider {
    left: 18px;
  }

  .s45-ac-close {
    width: 24px;
    height: 24px;
    font-size: 0.85rem;
    border-radius: 5px;
  }

  .s45-ac-history-item {
    padding: 7px 8px;
    font-size: 0.65rem;
  }

  .s45-ac-history-item .s45-ach-time {
    font-size: 0.6rem;
  }
}


/* END SPRINT 44 */


/* ============================================================
   SPRINT 46 — Favorites Quick-Play, Wagering Progress, Free Spin Meter
   ============================================================ */

/* -------------------------------------------------------
   S46 Keyframe Animations
   ------------------------------------------------------- */

@keyframes _s46_slideInLeft {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }
  60% {
    transform: translateX(8px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes _s46_slideOutLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-120%);
    opacity: 0;
  }
}

@keyframes _s46_slideInRight {
  0% {
    transform: translateX(120%);
    opacity: 0;
  }
  60% {
    transform: translateX(-8px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes _s46_slideOutRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

@keyframes _s46_fadeScaleIn {
  0% {
    transform: scale(0.7) translateY(-10px);
    opacity: 0;
  }
  60% {
    transform: scale(1.05) translateY(0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes _s46_fadeScaleOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.7) translateY(-10px);
    opacity: 0;
  }
}

@keyframes _s46_pulseGold {
  0%, 100% {
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.4), 0 0 16px rgba(251, 191, 36, 0.1);
  }
  50% {
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.7), 0 0 32px rgba(251, 191, 36, 0.3);
  }
}

@keyframes _s46_pulseBadge {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 18px rgba(74, 222, 128, 0.9), 0 0 30px rgba(0, 255, 136, 0.4);
  }
}

@keyframes _s46_ringProgress {
  0% {
    stroke-dashoffset: 251.33;
  }
}

@keyframes _s46_meterGlow {
  0%, 100% {
    opacity: 0.3;
    filter: blur(4px);
  }
  50% {
    opacity: 0.8;
    filter: blur(8px);
  }
}

@keyframes _s46_shimmerFill {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes _s46_milestoneReached {
  0% {
    transform: scale(1);
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.4);
  }
  50% {
    transform: scale(1.2);
    text-shadow: 0 0 16px rgba(255, 215, 0, 0.9), 0 0 30px rgba(251, 191, 36, 0.5);
  }
  100% {
    transform: scale(1);
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.4);
  }
}

/* -------------------------------------------------------
   1. SLOT FAVORITES QUICK-PLAY BAR
   ------------------------------------------------------- */

/* --- Header --- */

.s46-fqp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  border-bottom: 1px solid rgba(251, 191, 36, 0.15);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.08) 0%, transparent 100%);
}

.s46-fqp-title {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
  letter-spacing: 0.4px;
  white-space: nowrap;
  user-select: none;
}

.s46-fqp-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
  flex-shrink: 0;
}

.s46-fqp-close:hover {
  background: rgba(255, 60, 60, 0.15);
  border-color: rgba(255, 60, 60, 0.3);
  color: #ff6b6b;
  transform: scale(1.1);
}

/* --- Scroll Container --- */

.s46-fqp-scroll {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 12px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.s46-fqp-scroll::-webkit-scrollbar {
  display: none;
}

/* --- Game Thumbnail Card --- */

.s46-fqp-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
  position: relative;
  outline: none;
}

.s46-fqp-item:hover {
  transform: scale(1.12) translateY(-3px);
  filter: brightness(1.15);
}

.s46-fqp-item:active {
  transform: scale(0.95);
  transition-duration: 0.1s;
}

.s46-fqp-item.s46-active {
  animation: _s46_pulseGold 2s ease-in-out infinite;
}

.s46-fqp-item.s46-active .s46-fqp-thumb {
  border-color: #fbbf24;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.5), inset 0 0 8px rgba(251, 191, 36, 0.1);
}

.s46-fqp-thumb {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 15, 26, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}

.s46-fqp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.s46-fqp-item:hover .s46-fqp-thumb img {
  transform: scale(1.1);
}

.s46-fqp-item:hover .s46-fqp-thumb {
  border-color: rgba(251, 191, 36, 0.5);
  animation: _s46_thumbHoverGlow 1.5s ease-in-out infinite;
}

.s46-fqp-name {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 64px;
  line-height: 1.2;
  transition: color 0.2s ease;
}

.s46-fqp-item:hover .s46-fqp-name {
  color: #fbbf24;
}

.s46-fqp-item.s46-active .s46-fqp-name {
  color: #fbbf24;
  font-weight: 600;
}

/* --- Empty State --- */

.s46-fqp-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.78rem;
  font-style: italic;
  text-align: center;
  min-height: 60px;
  width: 100%;
  user-select: none;
}


/* -------------------------------------------------------
   2. WAGERING PROGRESS TRACKER PANEL
   ------------------------------------------------------- */

.wager-progress-panel {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) translateX(120%);
  z-index: 9500;
  background: linear-gradient(160deg, rgba(15, 15, 26, 0.97) 0%, rgba(26, 26, 46, 0.97) 50%, rgba(45, 27, 105, 0.25) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 20px;
  padding: 0;
  width: 280px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.6),
    0 0 1px rgba(251, 191, 36, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: none;
  flex-direction: column;
  opacity: 0;
  transition: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(251, 191, 36, 0.3) transparent;
}

.wager-progress-panel::-webkit-scrollbar {
  width: 4px;
}

.wager-progress-panel::-webkit-scrollbar-track {
  background: transparent;
}

.wager-progress-panel::-webkit-scrollbar-thumb {
  background: rgba(251, 191, 36, 0.3);
  border-radius: 4px;
}

.wager-progress-panel.active {
  display: flex;
  animation: _s46_slideInRight 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform: translateY(-50%) translateX(0);
}

.wager-progress-panel.s46-closing {
  animation: _s46_slideOutRight 0.35s ease-in forwards;
}

/* --- Header --- */

.s46-wp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(251, 191, 36, 0.15);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.08) 0%, transparent 100%);
  border-radius: 20px 20px 0 0;
  position: sticky;
  top: 0;
  z-index: 2;
}

.s46-wp-title {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
  letter-spacing: 0.3px;
  white-space: nowrap;
  user-select: none;
}

.s46-wp-close {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
  flex-shrink: 0;
}

.s46-wp-close:hover {
  background: rgba(255, 60, 60, 0.15);
  border-color: rgba(255, 60, 60, 0.3);
  color: #ff6b6b;
  transform: scale(1.1);
}

/* --- Circular Progress Ring --- */

.s46-wp-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 18px 10px;
  position: relative;
}

.s46-wp-ring-svg {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.2));
}

.s46-wp-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 6;
  stroke-linecap: round;
}

.s46-wp-ring-fill {
  fill: none;
  stroke: url(#s46-wp-ring-gradient);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 251.33;
  stroke-dashoffset: 251.33;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  animation: _s46_ringProgress 1s ease-out;
}

.s46-wp-ring-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
  letter-spacing: -0.5px;
  user-select: none;
}

.s46-wp-ring-label small {
  font-size: 0.55em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 1px;
}

/* --- Stats Section --- */

.s46-wp-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 18px 12px;
}

.s46-wp-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  transition: background 0.2s ease;
}

.s46-wp-stat-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.s46-wp-stat-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
  letter-spacing: 0.2px;
}

.s46-wp-stat-value {
  font-size: 0.85rem;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: -0.2px;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.1);
}

/* --- Milestone Markers --- */

.s46-wp-milestones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 18px 12px;
}

.s46-wp-milestone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}

.s46-wp-milestone::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  transition: all 0.35s ease;
}

.s46-wp-milestone.s46-reached {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.2);
  animation: _s46_milestoneReached 2.5s ease-in-out infinite;
}

.s46-wp-milestone.s46-reached::before {
  background: #fbbf24;
  border-color: #ffd700;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}

.s46-wp-milestone.s46-reached::after {
  content: '\2713';
  position: absolute;
  right: 12px;
  font-size: 0.85rem;
  color: #fbbf24;
  font-weight: 700;
}

/* --- Footer --- */

.s46-wp-footer {
  padding: 10px 18px 16px;
  border-top: 1px solid rgba(251, 191, 36, 0.1);
  background: linear-gradient(0deg, rgba(251, 191, 36, 0.04) 0%, transparent 100%);
  border-radius: 0 0 20px 20px;
}

.s46-wp-footer-text {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  line-height: 1.5;
}

.s46-wp-footer-text strong {
  color: #fbbf24;
  font-weight: 600;
}


/* -------------------------------------------------------
   3. FREE SPIN BONUS METER BAR
   ------------------------------------------------------- */

.freespin-meter-bar {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 9400;
  background: linear-gradient(145deg, rgba(15, 15, 26, 0.96) 0%, rgba(26, 26, 46, 0.96) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 14px;
  padding: 10px 14px;
  min-width: 200px;
  max-width: 260px;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.45),
    0 0 1px rgba(251, 191, 36, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: none;
  flex-direction: column;
  gap: 8px;
  transform: scale(0.7) translateY(-10px);
  opacity: 0;
  transition: none;
}

.freespin-meter-bar.active {
  display: flex;
  animation: _s46_fadeScaleIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.freespin-meter-bar.s46-closing {
  animation: _s46_fadeScaleOut 0.3s ease-in forwards;
}

/* --- Top Row (Icon + Label + Close) --- */

.s46-fsm-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.s46-fsm-icon {
  font-size: 1.2rem;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.3));
  flex-shrink: 0;
}

.s46-fsm-label {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.25);
  letter-spacing: 0.3px;
  flex: 1;
  user-select: none;
}

.s46-fsm-close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
  flex-shrink: 0;
}

.s46-fsm-close:hover {
  background: rgba(255, 60, 60, 0.15);
  border-color: rgba(255, 60, 60, 0.3);
  color: #ff6b6b;
  transform: scale(1.1);
}

/* --- Meter Bar --- */

.s46-fsm-meter {
  position: relative;
  width: 100%;
  height: 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.s46-fsm-meter-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 7px;
  background: linear-gradient(90deg, #4ade80 0%, #00ff88 40%, #fbbf24 80%, #ffd700 100%);
  background-size: 200% 100%;
  animation: _s46_shimmerFill 3s ease-in-out infinite;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  min-width: 0;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
}

.s46-fsm-meter-fill.s46-near-full {
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.5), 0 0 24px rgba(255, 215, 0, 0.2);
}

.s46-fsm-meter-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 9px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(251, 191, 36, 0.15) 50%, transparent 100%);
  transition: opacity 0.4s ease;
}

.s46-fsm-meter.s46-glowing .s46-fsm-meter-glow {
  opacity: 1;
  animation: _s46_meterGlow 1.8s ease-in-out infinite;
}

/* --- Count Text --- */

.s46-fsm-count {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.2px;
  user-select: none;
}

.s46-fsm-count strong {
  color: #ffffff;
  font-weight: 700;
}

/* --- Earned Badge --- */

.s46-fsm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(0, 255, 136, 0.1) 100%);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: #4ade80;
  font-size: 0.72rem;
  font-weight: 700;
  align-self: center;
  animation: _s46_pulseBadge 2s ease-in-out infinite;
  user-select: none;
}

.s46-fsm-badge-icon {
  font-size: 0.8rem;
  line-height: 1;
}

/* --- Claim Button --- */

.s46-fsm-claim-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  color: #0f0f1a;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  animation: _s46_claimBtnPulse 2s ease-in-out infinite;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.s46-fsm-claim-btn.s46-visible {
  display: flex;
}

.s46-fsm-claim-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
  transition: left 0.5s ease;
}

.s46-fsm-claim-btn:hover {
  transform: scale(1.03);
  filter: brightness(1.1);
  box-shadow: 0 0 28px rgba(251, 191, 36, 0.6), 0 4px 16px rgba(0, 0, 0, 0.3);
}

.s46-fsm-claim-btn:hover::before {
  left: 120%;
}

.s46-fsm-claim-btn:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}


/* -------------------------------------------------------
   SPRINT 46 — RESPONSIVE BREAKPOINTS
   ------------------------------------------------------- */

/* --- Tablet (768px) --- */

@media (max-width: 768px) {


  .s46-fqp-header {
    padding: 10px 12px 7px;
  }

  .s46-fqp-title {
    font-size: 0.82rem;
  }

  .s46-fqp-close {
    width: 26px;
    height: 26px;
    font-size: 0.9rem;
  }

  .s46-fqp-scroll {
    gap: 8px;
    padding: 10px 12px;
  }

  .s46-fqp-thumb {
    width: 52px;
    height: 52px;
    border-radius: 10px;
  }

  .s46-fqp-name {
    font-size: 0.56rem;
    max-width: 56px;
  }

  /* --- Wagering Progress --- */

  .wager-progress-panel {
    right: 14px;
    width: 260px;
    border-radius: 18px;
    max-height: 75vh;
  }

  .s46-wp-header {
    padding: 14px 16px 10px;
    border-radius: 18px 18px 0 0;
  }

  .s46-wp-title {
    font-size: 0.88rem;
  }

  .s46-wp-close {
    width: 28px;
    height: 28px;
    font-size: 0.95rem;
  }

  .s46-wp-ring-svg {
    width: 110px;
    height: 110px;
  }

  .s46-wp-ring-label {
    font-size: 1.45rem;
  }

  .s46-wp-ring-wrap {
    padding: 16px 16px 8px;
  }

  .s46-wp-stats {
    padding: 6px 16px 10px;
  }

  .s46-wp-stat-row {
    padding: 7px 10px;
  }

  .s46-wp-stat-label {
    font-size: 0.72rem;
  }

  .s46-wp-stat-value {
    font-size: 0.8rem;
  }

  .s46-wp-milestones {
    padding: 4px 16px 10px;
    gap: 5px;
  }

  .s46-wp-milestone {
    padding: 7px 10px;
    font-size: 0.72rem;
    gap: 8px;
  }

  .s46-wp-footer {
    padding: 8px 16px 14px;
    border-radius: 0 0 18px 18px;
  }

  .s46-wp-footer-text {
    font-size: 0.65rem;
  }

  /* --- Free Spin Meter --- */

  .freespin-meter-bar {
    top: 70px;
    right: 14px;
    min-width: 180px;
    max-width: 230px;
    padding: 9px 12px;
    border-radius: 12px;
    gap: 7px;
  }

  .s46-fsm-icon {
    font-size: 1.05rem;
  }

  .s46-fsm-label {
    font-size: 0.76rem;
  }

  .s46-fsm-close {
    width: 22px;
    height: 22px;
    font-size: 0.8rem;
    border-radius: 5px;
  }

  .s46-fsm-meter {
    height: 12px;
    border-radius: 6px;
  }

  .s46-fsm-meter-fill {
    border-radius: 6px;
  }

  .s46-fsm-meter-glow {
    border-radius: 8px;
  }

  .s46-fsm-count {
    font-size: 0.68rem;
  }

  .s46-fsm-badge {
    padding: 3px 8px;
    font-size: 0.68rem;
  }

  .s46-fsm-claim-btn {
    padding: 8px 14px;
    font-size: 0.76rem;
    border-radius: 8px;
  }
}


/* --- Small Phone (420px) --- */

@media (max-width: 420px) {


  .s46-fqp-header {
    padding: 8px 10px 6px;
  }

  .s46-fqp-title {
    font-size: 0.75rem;
  }

  .s46-fqp-close {
    width: 24px;
    height: 24px;
    font-size: 0.82rem;
    border-radius: 6px;
  }

  .s46-fqp-scroll {
    gap: 7px;
    padding: 8px 10px;
  }

  .s46-fqp-thumb {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    border-width: 1.5px;
  }

  .s46-fqp-name {
    font-size: 0.52rem;
    max-width: 50px;
  }

  .s46-fqp-empty {
    padding: 12px 14px;
    font-size: 0.7rem;
    min-height: 46px;
  }

  /* --- Wagering Progress --- */

  .wager-progress-panel {
    right: 8px;
    left: 8px;
    width: auto;
    max-height: 70vh;
    border-radius: 16px;
    transform: translateY(-50%) translateX(0);
  }

  .wager-progress-panel.active {
    transform: translateY(-50%) translateX(0);
  }

  .s46-wp-header {
    padding: 12px 14px 8px;
    border-radius: 16px 16px 0 0;
  }

  .s46-wp-title {
    font-size: 0.82rem;
  }

  .s46-wp-close {
    width: 26px;
    height: 26px;
    font-size: 0.88rem;
    border-radius: 6px;
  }

  .s46-wp-ring-svg {
    width: 96px;
    height: 96px;
  }

  .s46-wp-ring-label {
    font-size: 1.3rem;
  }

  .s46-wp-ring-wrap {
    padding: 14px 14px 6px;
  }

  .s46-wp-stats {
    padding: 4px 14px 8px;
    gap: 1px;
  }

  .s46-wp-stat-row {
    padding: 6px 8px;
    border-radius: 8px;
  }

  .s46-wp-stat-label {
    font-size: 0.68rem;
  }

  .s46-wp-stat-value {
    font-size: 0.75rem;
  }

  .s46-wp-milestones {
    padding: 4px 14px 8px;
    gap: 4px;
  }

  .s46-wp-milestone {
    padding: 6px 8px;
    font-size: 0.68rem;
    gap: 7px;
    border-radius: 8px;
  }

  .s46-wp-milestone::before {
    width: 7px;
    height: 7px;
  }

  .s46-wp-footer {
    padding: 8px 14px 12px;
    border-radius: 0 0 16px 16px;
  }

  .s46-wp-footer-text {
    font-size: 0.6rem;
  }

  /* --- Free Spin Meter --- */

  .freespin-meter-bar {
    top: 60px;
    right: 8px;
    left: 8px;
    min-width: unset;
    max-width: unset;
    padding: 8px 10px;
    border-radius: 10px;
    gap: 6px;
  }

  .s46-fsm-icon {
    font-size: 0.95rem;
  }

  .s46-fsm-label {
    font-size: 0.7rem;
  }

  .s46-fsm-close {
    width: 20px;
    height: 20px;
    font-size: 0.72rem;
    border-radius: 4px;
  }

  .s46-fsm-meter {
    height: 10px;
    border-radius: 5px;
  }

  .s46-fsm-meter-fill {
    border-radius: 5px;
  }

  .s46-fsm-meter-glow {
    border-radius: 7px;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
  }

  .s46-fsm-count {
    font-size: 0.62rem;
  }

  .s46-fsm-badge {
    padding: 3px 7px;
    font-size: 0.62rem;
    border-radius: 16px;
  }

  .s46-fsm-badge-icon {
    font-size: 0.7rem;
  }

  .s46-fsm-claim-btn {
    padding: 7px 12px;
    font-size: 0.7rem;
    border-radius: 7px;
    letter-spacing: 0.3px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   Sprint 47 — Daily Deposit Goal, Cashback Streak Counter, Mystery Gift Box
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Keyframe Animations ──────────────────────────────────────────────────── */

@keyframes _s47_progressPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4)); }
  50% { filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8)); }
}

@keyframes _s47_milestoneCheck {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  60% { transform: scale(1.3) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes _s47_fireFlicker {
  0%, 100% { transform: scaleY(1) translateY(0); opacity: 0.8; }
  25% { transform: scaleY(1.2) translateY(-2px); opacity: 1; }
  50% { transform: scaleY(0.9) translateY(1px); opacity: 0.7; }
  75% { transform: scaleY(1.15) translateY(-1px); opacity: 0.95; }
}

@keyframes _s47_streakGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 165, 0, 0.3), inset 0 0 4px rgba(255, 165, 0, 0.1); }
  50% { box-shadow: 0 0 20px rgba(255, 165, 0, 0.7), inset 0 0 10px rgba(255, 165, 0, 0.3); }
}

@keyframes _s47_dayPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 6px rgba(255, 215, 0, 0.4); }
  50% { transform: scale(1.15); box-shadow: 0 0 18px rgba(255, 215, 0, 0.9); }
}

@keyframes _s47_multiplierBounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
  60% { transform: translateY(2px); }
}

@keyframes _s47_overlayFadeIn {
  0% { opacity: 0; backdrop-filter: blur(0px); }
  100% { opacity: 1; backdrop-filter: blur(8px); }
}

@keyframes _s47_lidOpen {
  0% { transform: rotateX(0deg) translateY(0); }
  40% { transform: rotateX(-110deg) translateY(-30px); }
  60% { transform: rotateX(-95deg) translateY(-25px); }
  100% { transform: rotateX(-105deg) translateY(-28px); }
}

@keyframes _s47_sparkle {
  0% { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 1; }
  50% { opacity: 1; }
  100% { transform: translate(var(--s47-sx, 60px), var(--s47-sy, -80px)) scale(1.2) rotate(360deg); opacity: 0; }
}

@keyframes _s47_prizeReveal {
  0% { transform: scale(0) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(3deg); opacity: 1; }
  80% { transform: scale(0.95) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes _s47_confettiFall {
  0% { transform: translateY(-20px) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translateY(calc(100vh + 20px)) rotate(720deg) scale(0.5); opacity: 0.3; }
}

@keyframes _s47_timerTick {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

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

@keyframes _s47_depositCardSlideIn {
  0% { transform: translateX(-120%); opacity: 0; }
  60% { transform: translateX(5%); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

/* ── 1. Daily Deposit Goal ────────────────────────────────────────────────── */

#dailyDepositGoal {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 1100;
  width: 260px;
  background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 215, 0, 0.2);
  animation: _s47_depositCardSlideIn 0.5s ease-out;
  font-family: inherit;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#dailyDepositGoal:hover {
  border-color: rgba(255, 215, 0, 0.45);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 8px rgba(255, 215, 0, 0.15);
}

#dailyDepositGoal.s47-goal-reached {
  animation: _s47_goalCelebrate 0.8s ease-in-out;
  border-color: rgba(0, 255, 136, 0.6);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 255, 136, 0.3);
}

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

.s47-deposit-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.s47-deposit-close {
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: #8892a4;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.s47-deposit-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.s47-progress-ring-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  position: relative;
}

.s47-progress-ring-svg {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
  animation: _s47_progressPulse 2.5s ease-in-out infinite;
}

.s47-progress-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 8;
}

.s47-progress-ring-fill {
  fill: none;
  stroke: url(#s47GoldGradient);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 314;
  stroke-dashoffset: 314;
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.s47-progress-ring-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.s47-progress-current {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.s47-progress-target {
  display: block;
  font-size: 0.7rem;
  color: #8892a4;
  margin-top: 2px;
}

.s47-milestone-markers {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 8px;
}

.s47-milestone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.s47-milestone-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  color: transparent;
  transition: all 0.4s ease;
}

.s47-milestone.s47-reached .s47-milestone-dot {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  border-color: #ffd700;
  color: #0f0f1a;
  animation: _s47_milestoneCheck 0.5s ease-out;
}

.s47-milestone-label {
  font-size: 0.6rem;
  color: #5a6478;
  font-weight: 600;
}

.s47-milestone.s47-reached .s47-milestone-label {
  color: #ffd700;
}

.s47-goal-info {
  text-align: center;
  margin-bottom: 14px;
}

.s47-goal-amount {
  font-size: 0.8rem;
  color: #c0c8d8;
}

.s47-goal-amount strong {
  color: #ffd700;
  font-weight: 700;
}

.s47-goal-reward {
  font-size: 0.7rem;
  color: #00ff88;
  margin-top: 4px;
  font-weight: 600;
}

.s47-deposit-cta {
  display: block;
  width: 100%;
  padding: 12px 0;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 50%, #ffd700 100%);
  background-size: 200% 100%;
  color: #0f0f1a;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.25);
  animation: _s47_ctaShimmer 3s linear infinite;
}

.s47-deposit-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.s47-deposit-cta:active {
  transform: translateY(0px) scale(0.98);
}

#dailyDepositGoal.s47-goal-reached .s47-deposit-cta {
  background: linear-gradient(135deg, #00ff88 0%, #00cc6a 50%, #00ff88 100%);
  background-size: 200% 100%;
  animation: _s47_ctaShimmer 3s linear infinite;
  color: #0a1628;
}

.s47-deposit-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  margin-top: 12px;
  overflow: hidden;
}

.s47-deposit-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #ffd700, #ffaa00);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

#dailyDepositGoal.s47-goal-reached .s47-deposit-progress-fill {
  background: linear-gradient(90deg, #00ff88, #00cc6a);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

.s47-deposit-reset-timer {
  text-align: center;
  font-size: 0.65rem;
  color: #5a6478;
  margin-top: 8px;
}

.s47-deposit-reset-timer span {
  color: #7ec8e3;
  font-weight: 600;
}


/* ── 2. Cashback Streak Counter ───────────────────────────────────────────── */

#cashbackStreakBar {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 1050;
  height: 56px;
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
  border-bottom: 1px solid rgba(255, 165, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  animation: _s47_slideDown 0.4s ease-out;
}

#cashbackStreakBar::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 165, 0, 0.3) 20%,
    rgba(255, 100, 0, 0.6) 50%,
    rgba(255, 165, 0, 0.3) 80%,
    transparent 100%
  );
}

.s47-streak-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #ff8c00;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.s47-streak-fire {
  display: inline-block;
  font-size: 1.1rem;
  animation: _s47_fireFlicker 0.6s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255, 100, 0, 0.6));
}

#cashbackStreakBar.s47-streak-hot .s47-streak-fire {
  font-size: 1.4rem;
  filter: drop-shadow(0 0 8px rgba(255, 50, 0, 0.8));
}

#cashbackStreakBar.s47-streak-blazing .s47-streak-fire {
  font-size: 1.6rem;
  filter: drop-shadow(0 0 12px rgba(255, 30, 0, 1));
}

.s47-streak-days {
  display: flex;
  align-items: center;
  gap: 6px;
}

.s47-streak-day {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  color: #5a6478;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
}

.s47-streak-day-num {
  line-height: 1;
  font-size: 0.6rem;
}

.s47-streak-day-label {
  line-height: 1;
  font-size: 0.45rem;
  text-transform: uppercase;
  opacity: 0.7;
}

.s47-streak-day.s47-completed {
  background: linear-gradient(135deg, rgba(255, 165, 0, 0.25), rgba(255, 100, 0, 0.15));
  border-color: #ff8c00;
  color: #ff8c00;
}

.s47-streak-day.s47-completed::after {
  content: '\2713';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  background: #ff8c00;
  border-radius: 50%;
  font-size: 0.5rem;
  color: #0f0f1a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.s47-streak-day.s47-current {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.1));
  border-color: #ffd700;
  color: #ffd700;
  animation: _s47_dayPulse 1.5s ease-in-out infinite;
}

.s47-streak-day.s47-current .s47-streak-day-num {
  color: #ffd700;
  font-weight: 800;
}

.s47-streak-connector {
  width: 16px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1px;
  flex-shrink: 0;
}

.s47-streak-connector.s47-active {
  background: linear-gradient(90deg, #ff8c00, #ffd700);
  box-shadow: 0 0 6px rgba(255, 140, 0, 0.4);
}

.s47-streak-multiplier {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.08));
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 20px;
  color: #ffd700;
  font-size: 0.85rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  animation: _s47_multiplierBounce 2s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

#cashbackStreakBar.s47-streak-hot .s47-streak-multiplier {
  border-color: rgba(255, 100, 0, 0.5);
  color: #ff6600;
  background: linear-gradient(135deg, rgba(255, 100, 0, 0.2), rgba(255, 50, 0, 0.1));
  text-shadow: 0 0 10px rgba(255, 100, 0, 0.5);
}

#cashbackStreakBar.s47-streak-blazing .s47-streak-multiplier {
  border-color: rgba(255, 50, 0, 0.6);
  color: #ff3300;
  background: linear-gradient(135deg, rgba(255, 50, 0, 0.25), rgba(255, 0, 0, 0.12));
  text-shadow: 0 0 12px rgba(255, 50, 0, 0.7);
  animation: _s47_multiplierBounce 1.5s ease-in-out infinite, _s47_streakGlow 1s ease-in-out infinite;
}

.s47-streak-cashback-info {
  font-size: 0.6rem;
  color: #8892a4;
  white-space: nowrap;
  flex-shrink: 0;
}

.s47-streak-cashback-info strong {
  color: #00ff88;
}

.s47-streak-close {
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  color: #5a6478;
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
  margin-left: 4px;
}

.s47-streak-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Streak fire background effect (hot/blazing modes) */
#cashbackStreakBar.s47-streak-hot {
  border-bottom-color: rgba(255, 100, 0, 0.35);
}

#cashbackStreakBar.s47-streak-hot::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 100, 0, 0.4) 20%,
    rgba(255, 50, 0, 0.7) 50%,
    rgba(255, 100, 0, 0.4) 80%,
    transparent 100%
  );
  height: 3px;
}

#cashbackStreakBar.s47-streak-blazing {
  border-bottom-color: rgba(255, 50, 0, 0.5);
  background: linear-gradient(180deg, #1e1218 0%, #150a0a 100%);
}

#cashbackStreakBar.s47-streak-blazing::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 50, 0, 0.5) 15%,
    rgba(255, 30, 0, 0.9) 50%,
    rgba(255, 50, 0, 0.5) 85%,
    transparent 100%
  );
  height: 4px;
  animation: _s47_fireFlicker 0.4s ease-in-out infinite;
}

#cashbackStreakBar.s47-streak-blazing::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 50, 0, 0.08) 0%, transparent 70%);
  pointer-events: none;
}


/* ── 3. Mystery Gift Box ──────────────────────────────────────────────────── */

#mysteryGiftOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background: rgba(5, 5, 15, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  animation: _s47_overlayFadeIn 0.4s ease-out;
}

#mysteryGiftOverlay.active {
  display: flex;
}

.s47-gift-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  animation: _s47_giftBoxEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.s47-gift-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.s47-gift-subtitle {
  font-size: 0.85rem;
  color: #8892a4;
  margin-top: -16px;
  text-align: center;
}

.s47-gift-box-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 600px;
  cursor: pointer;
}

.s47-gift-box {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.s47-gift-box:hover {
  transform: rotateY(5deg) rotateX(-3deg) scale(1.04);
}

.s47-gift-box-body {
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 10px;
  height: 140px;
  background: linear-gradient(145deg, #c42020 0%, #8b0000 50%, #a01515 100%);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.1);
}

.s47-gift-box-body::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 24px;
  margin-left: -12px;
  background: linear-gradient(180deg, #ffd700, #daa520);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
}

.s47-gift-box-body::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 24px;
  margin-top: -12px;
  background: linear-gradient(90deg, #ffd700, #daa520);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
}

.s47-gift-box-lid {
  position: absolute;
  top: 10px;
  left: 2px;
  right: 2px;
  height: 50px;
  background: linear-gradient(145deg, #d42828 0%, #9b0f0f 100%);
  border-radius: 8px 8px 4px 4px;
  transform-origin: bottom center;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.15);
  z-index: 2;
}

.s47-gift-box-lid::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 28px;
  margin-left: -14px;
  background: linear-gradient(180deg, #ffd700, #daa520);
  border-radius: 4px 4px 0 0;
}

.s47-gift-box-lid::after {
  content: '';
  position: absolute;
  top: -18px;
  left: 50%;
  width: 50px;
  height: 36px;
  margin-left: -25px;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(135deg, #ffd700, #daa520);
  box-shadow: 0 -2px 8px rgba(255, 215, 0, 0.3);
}

#mysteryGiftOverlay.s47-opened .s47-gift-box-lid {
  animation: _s47_lidOpen 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.s47-gift-glow {
  position: absolute;
  top: 20%;
  left: 50%;
  width: 160px;
  height: 160px;
  margin-left: -80px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

#mysteryGiftOverlay.s47-opened .s47-gift-glow {
  opacity: 1;
}

.s47-gift-sparkles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.s47-sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  top: 40%;
  left: 50%;
  opacity: 0;
}

.s47-sparkle::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #ffd700;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

#mysteryGiftOverlay.s47-opened .s47-sparkle {
  animation: _s47_sparkle 0.8s ease-out forwards;
}

.s47-sparkle:nth-child(1) { --s47-sx: -80px; --s47-sy: -90px; animation-delay: 0s; }
.s47-sparkle:nth-child(2) { --s47-sx: 80px; --s47-sy: -70px; animation-delay: 0.05s; }
.s47-sparkle:nth-child(3) { --s47-sx: -60px; --s47-sy: -110px; animation-delay: 0.1s; }
.s47-sparkle:nth-child(4) { --s47-sx: 90px; --s47-sy: -100px; animation-delay: 0.08s; }
.s47-sparkle:nth-child(5) { --s47-sx: -100px; --s47-sy: -50px; animation-delay: 0.12s; }
.s47-sparkle:nth-child(6) { --s47-sx: 70px; --s47-sy: -120px; animation-delay: 0.06s; }
.s47-sparkle:nth-child(7) { --s47-sx: -40px; --s47-sy: -130px; animation-delay: 0.15s; }
.s47-sparkle:nth-child(8) { --s47-sx: 110px; --s47-sy: -60px; animation-delay: 0.03s; }

.s47-confetti-piece {
  position: absolute;
  width: 8px;
  height: 12px;
  top: 40%;
  left: 50%;
  border-radius: 2px;
  opacity: 0;
}

#mysteryGiftOverlay.s47-opened .s47-confetti-piece {
  animation: _s47_confettiFall 1.5s ease-in forwards;
}

.s47-confetti-piece:nth-child(1) { background: #ffd700; left: 30%; animation-delay: 0.1s; }
.s47-confetti-piece:nth-child(2) { background: #ff4444; left: 45%; animation-delay: 0.15s; }
.s47-confetti-piece:nth-child(3) { background: #00ff88; left: 55%; animation-delay: 0.05s; }
.s47-confetti-piece:nth-child(4) { background: #4a90d9; left: 70%; animation-delay: 0.2s; }
.s47-confetti-piece:nth-child(5) { background: #ff8c00; left: 25%; animation-delay: 0.12s; }
.s47-confetti-piece:nth-child(6) { background: #e040fb; left: 60%; animation-delay: 0.08s; }
.s47-confetti-piece:nth-child(7) { background: #ffd700; left: 40%; animation-delay: 0.18s; }
.s47-confetti-piece:nth-child(8) { background: #00bcd4; left: 75%; animation-delay: 0.22s; }

.s47-prize-reveal {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

#mysteryGiftOverlay.s47-opened .s47-prize-reveal {
  display: flex;
  animation: _s47_prizeReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}

.s47-prize-label {
  font-size: 0.8rem;
  color: #8892a4;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
}

.s47-prize-value {
  font-size: 2.4rem;
  font-weight: 900;
  color: #ffd700;
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
  line-height: 1.1;
}

.s47-prize-description {
  font-size: 0.85rem;
  color: #c0c8d8;
  max-width: 280px;
}

.s47-gift-claim-btn {
  padding: 14px 48px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 50%, #fbbf24 100%);
  color: #0f0f1a;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  animation: _s47_claimBtnGlow 2s ease-in-out infinite;
}

.s47-gift-claim-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 6px 30px rgba(255, 215, 0, 0.5);
}

.s47-gift-claim-btn:active {
  transform: translateY(0px) scale(0.97);
}

.s47-gift-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: #5a6478;
  margin-top: 8px;
}

.s47-gift-timer-icon {
  font-size: 0.9rem;
  animation: _s47_timerTick 1s step-end infinite;
}

.s47-gift-timer-value {
  color: #7ec8e3;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.s47-gift-close-overlay {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  color: #8892a4;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  z-index: 2;
}

.s47-gift-close-overlay:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

/* Gift box tap hint */
.s47-gift-tap-hint {
  font-size: 0.75rem;
  color: #5a6478;
  letter-spacing: 1px;
  text-transform: uppercase;
  animation: _s47_timerTick 1.5s ease-in-out infinite;
}

#mysteryGiftOverlay.s47-opened .s47-gift-tap-hint {
  display: none;
}

#mysteryGiftOverlay.s47-opened .s47-gift-box-wrap {
  pointer-events: none;
}

/* Next gift availability timer (shown when gift is locked) */
.s47-gift-next-available {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.s47-gift-next-label {
  font-size: 0.7rem;
  color: #5a6478;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.s47-gift-next-countdown {
  font-size: 1.8rem;
  font-weight: 800;
  color: #7ec8e3;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(126, 200, 227, 0.3);
}

.s47-gift-next-countdown span {
  font-size: 0.7rem;
  color: #5a6478;
  font-weight: 400;
  margin: 0 2px;
}


/* ── Sprint 47 — Mobile Responsive ────────────────────────────────────────── */

@media (max-width: 768px) {


  /* Daily Deposit Goal — mobile */
  #dailyDepositGoal {
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: 340px;
    padding: 16px;
    border-radius: 14px;
  }

  .s47-progress-ring-svg {
    width: 100px;
    height: 100px;
  }

  .s47-progress-current {
    font-size: 1.2rem;
  }

  .s47-progress-target {
    font-size: 0.6rem;
  }

  .s47-deposit-cta {
    padding: 10px 0;
    font-size: 0.8rem;
  }

  .s47-milestone-dot {
    width: 16px;
    height: 16px;
  }

  .s47-milestone-label {
    font-size: 0.55rem;
  }

  /* Cashback Streak Bar — mobile */
  #cashbackStreakBar {
    height: auto;
    min-height: 48px;
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 8px;
    justify-content: center;
  }

  .s47-streak-days {
    gap: 4px;
    order: 2;
    width: 100%;
    justify-content: center;
  }

  .s47-streak-day {
    width: 30px;
    height: 30px;
  }

  .s47-streak-day-num {
    font-size: 0.5rem;
  }

  .s47-streak-day-label {
    font-size: 0.4rem;
  }

  .s47-streak-connector {
    width: 8px;
  }

  .s47-streak-label {
    font-size: 0.65rem;
    order: 0;
  }

  .s47-streak-multiplier {
    font-size: 0.75rem;
    padding: 4px 10px;
    order: 1;
  }

  .s47-streak-cashback-info {
    font-size: 0.55rem;
    order: 3;
  }

  .s47-streak-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
  }

  .s47-streak-day.s47-completed::after {
    width: 12px;
    height: 12px;
    font-size: 0.4rem;
    top: -3px;
    right: -3px;
  }

  /* Mystery Gift Box — mobile */
  .s47-gift-title {
    font-size: 1.2rem;
    letter-spacing: 2px;
  }

  .s47-gift-subtitle {
    font-size: 0.75rem;
    margin-top: -12px;
  }

  .s47-gift-box-wrap {
    width: 160px;
    height: 160px;
  }

  .s47-gift-box-body {
    height: 112px;
    left: 8px;
    right: 8px;
  }

  .s47-gift-box-body::before {
    width: 20px;
    margin-left: -10px;
  }

  .s47-gift-box-body::after {
    height: 20px;
    margin-top: -10px;
  }

  .s47-gift-box-lid {
    height: 42px;
  }

  .s47-gift-box-lid::before {
    width: 24px;
    margin-left: -12px;
  }

  .s47-gift-box-lid::after {
    width: 42px;
    height: 30px;
    margin-left: -21px;
    top: -15px;
  }

  .s47-prize-value {
    font-size: 1.8rem;
  }

  .s47-prize-description {
    font-size: 0.75rem;
    max-width: 240px;
  }

  .s47-gift-claim-btn {
    padding: 12px 36px;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
  }

  .s47-gift-next-countdown {
    font-size: 1.4rem;
  }

  .s47-gift-close-overlay {
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
  }

  .s47-gift-container {
    gap: 18px;
    padding: 0 16px;
  }
}


@media (max-width: 480px) {


  /* Extra-small screens */
  #dailyDepositGoal {
    bottom: 8px;
    left: 8px;
    right: 8px;
    padding: 14px;
    border-radius: 12px;
  }

  .s47-progress-ring-svg {
    width: 86px;
    height: 86px;
  }

  .s47-progress-current {
    font-size: 1rem;
  }

  .s47-deposit-title {
    font-size: 0.75rem;
  }

  .s47-deposit-cta {
    padding: 9px 0;
    font-size: 0.75rem;
    border-radius: 8px;
  }

  .s47-milestone-markers {
    padding: 0 4px;
  }

  .s47-milestone-dot {
    width: 14px;
    height: 14px;
    border-width: 1.5px;
  }

  #cashbackStreakBar {
    padding: 6px 10px;
    gap: 6px;
  }

  .s47-streak-day {
    width: 26px;
    height: 26px;
  }

  .s47-streak-connector {
    width: 5px;
  }

  .s47-streak-multiplier {
    font-size: 0.65rem;
    padding: 3px 8px;
  }

  .s47-gift-box-wrap {
    width: 140px;
    height: 140px;
  }

  .s47-gift-box-body {
    height: 98px;
  }

  .s47-gift-box-lid {
    height: 36px;
  }

  .s47-gift-title {
    font-size: 1rem;
  }

  .s47-prize-value {
    font-size: 1.5rem;
  }

  .s47-gift-claim-btn {
    padding: 10px 28px;
    font-size: 0.8rem;
    border-radius: 10px;
  }
}


/* ── Sprint 47 — Utility & State Modifiers ────────────────────────────────── */

/* Hide deposit goal when in slot view */
body.slot-active #dailyDepositGoal {
  display: none;
}

/* Hide streak bar when in slot view (optional, uncomment if desired) */
/* body.slot-active #cashbackStreakBar { display: none; } */

/* Animate deposit card dismissal */
#dailyDepositGoal.s47-dismissing {
  transform: translateX(-120%);
  opacity: 0;
  transition: transform 0.35s ease-in, opacity 0.3s ease;
  pointer-events: none;
}

/* Streak bar collapse */
#cashbackStreakBar.s47-collapsed {
  height: 0;
  min-height: 0;
  padding: 0;
  border-bottom-color: transparent;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Gift overlay backdrop effect on body */
body.s47-gift-open {
  overflow: hidden;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {

  .s47-progress-ring-svg,
  .s47-streak-fire,
  .s47-streak-day.s47-current,
  .s47-streak-multiplier,
  .s47-gift-claim-btn,
  .s47-deposit-cta {
    animation: none !important;
  }

  #mysteryGiftOverlay,
  .s47-gift-container,
  .s47-gift-box-lid,
  #dailyDepositGoal,
  #cashbackStreakBar {
    animation: none !important;
  }

  .s47-sparkle,
  .s47-confetti-piece {
    display: none !important;
  }
}



/* ==========================================================================
   SPRINT 48 — Progressive Bet Ladder, Tournament Leaderboard, Loss Streak Comfort
   ========================================================================== */

/* --------------------------------------------------------------------------
   S48 Keyframe Animations (14 total)
   -------------------------------------------------------------------------- */

@keyframes _s48_pulseGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.3), 0 0 16px rgba(255, 215, 0, 0.1); }
  50% { box-shadow: 0 0 16px rgba(255, 215, 0, 0.6), 0 0 32px rgba(255, 215, 0, 0.3); }
}

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

@keyframes _s48_rungUnlock {
  0% { transform: scale(1); filter: brightness(1); }
  30% { transform: scale(1.15); filter: brightness(1.5); }
  60% { transform: scale(0.95); filter: brightness(1.2); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes _s48_topRungCelebrate {
  0% { transform: scale(1) rotate(0deg); box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
  25% { transform: scale(1.1) rotate(-2deg); box-shadow: 0 0 30px rgba(255, 215, 0, 0.8); }
  50% { transform: scale(1.05) rotate(2deg); box-shadow: 0 0 50px rgba(255, 215, 0, 1); }
  75% { transform: scale(1.08) rotate(-1deg); box-shadow: 0 0 35px rgba(255, 215, 0, 0.6); }
  100% { transform: scale(1) rotate(0deg); box-shadow: 0 0 20px rgba(255, 215, 0, 0.4); }
}

@keyframes _s48_slideInRight {
  0% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes _s48_slideUpPanel {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

@keyframes _s48_scoreFlash {
  0% { background-color: transparent; }
  25% { background-color: rgba(0, 255, 136, 0.3); }
  100% { background-color: transparent; }
}

@keyframes _s48_fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes _s48_fadeInUp {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes _s48_gentleBreathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.02); opacity: 1; }
}

@keyframes _s48_shimmerBar {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes _s48_cardHoverLift {
  0% { transform: translateY(0) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
  100% { transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
}

@keyframes _s48_rankBadgeShine {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* --------------------------------------------------------------------------
   1. Progressive Bet Ladder (#betLadderPanel)
   -------------------------------------------------------------------------- */

#betLadderPanel {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 6px;
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
  border-left: 1px solid rgba(255, 215, 0, 0.15);
  border-radius: 12px 0 0 12px;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
  animation: _s48_slideInRight 0.5s ease-out;
  transition: width 0.3s ease;
}

#betLadderPanel.s48-expanded {
  width: 140px;
}

.s48-ladder-title {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #ffd700;
  margin-bottom: 10px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.s48-ladder-track {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2px;
  position: relative;
  width: 100%;
}

.s48-ladder-connector {
  width: 2px;
  height: 8px;
  background: rgba(255, 215, 0, 0.15);
  flex-shrink: 0;
}

.s48-ladder-connector.s48-active {
  background: linear-gradient(180deg, #ffd700 0%, #ffaa00 100%);
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}

.s48-ladder-rung {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62px;
  min-height: 48px;
  padding: 4px;
  background: linear-gradient(135deg, #1e1e36 0%, #16162b 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

#betLadderPanel.s48-expanded .s48-ladder-rung {
  width: 120px;
  flex-direction: row;
  justify-content: space-between;
  padding: 6px 10px;
}

.s48-ladder-rung:hover {
  background: linear-gradient(135deg, #252548 0%, #1e1e38 100%);
  border-color: rgba(255, 215, 0, 0.2);
  transform: scale(1.05);
}

.s48-ladder-rung.s48-current {
  background: linear-gradient(135deg, #2a2a50 0%, #1e1e40 100%);
  border-color: rgba(255, 215, 0, 0.5);
  animation: _s48_pulseGlow 2s ease-in-out infinite;
}

.s48-ladder-rung.s48-completed {
  background: linear-gradient(135deg, #1a3a1a 0%, #0f2a0f 100%);
  border-color: rgba(0, 255, 136, 0.3);
}

.s48-ladder-rung.s48-locked {
  opacity: 0.4;
  cursor: default;
}

.s48-ladder-rung.s48-locked:hover {
  transform: none;
}

.s48-ladder-rung.s48-unlocking {
  animation: _s48_rungUnlock 0.6s ease-out;
}

.s48-rung-bet {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.s48-rung-bet .s48-currency {
  font-size: 9px;
  color: #fbbf24;
  margin-right: 1px;
}

.s48-rung-multiplier {
  font-size: 9px;
  font-weight: 600;
  color: #fbbf24;
  background: rgba(255, 215, 0, 0.1);
  padding: 1px 4px;
  border-radius: 4px;
  margin-top: 2px;
  animation: _s48_multiplierPop 0.4s ease-out;
}

#betLadderPanel.s48-expanded .s48-rung-multiplier {
  margin-top: 0;
}

.s48-rung-multiplier.s48-high-mult {
  color: #00ff88;
  background: rgba(0, 255, 136, 0.12);
}

.s48-ladder-arrow {
  font-size: 14px;
  color: #ffd700;
  margin: 2px 0;
  animation: _s48_arrowBounce 1.2s ease-in-out infinite;
  text-align: center;
  line-height: 1;
}

.s48-ladder-arrow.s48-down {
  transform: rotate(180deg);
  color: #ff6b6b;
}

.s48-ladder-arrow.s48-hidden {
  visibility: hidden;
}

.s48-ladder-top-badge {
  display: none;
  flex-direction: column;
  align-items: center;
  margin-top: 8px;
  padding: 6px 8px;
  background: linear-gradient(135deg, #3d2e00 0%, #2a1f00 100%);
  border: 1px solid #ffd700;
  border-radius: 8px;
  animation: _s48_topRungCelebrate 1s ease-in-out infinite;
}

.s48-ladder-top-badge.s48-visible {
  display: flex;
}

.s48-ladder-top-badge .s48-crown-icon {
  font-size: 18px;
  margin-bottom: 2px;
}

.s48-ladder-top-badge .s48-top-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffd700;
  letter-spacing: 0.5px;
}

.s48-ladder-progress-bar {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.s48-ladder-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd700, #ffaa00);
  border-radius: 2px;
  transition: width 0.5s ease-out;
  background-size: 200% 100%;
  animation: _s48_shimmerBar 2s linear infinite;
}

.s48-ladder-toggle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #aaa;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  transition: all 0.25s ease;
}

.s48-ladder-toggle:hover {
  background: rgba(255, 215, 0, 0.15);
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.3);
}


/* --------------------------------------------------------------------------
   2. Tournament Leaderboard (#tournamentLeaderboard)
   -------------------------------------------------------------------------- */

#tournamentLeaderboard {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 940;
  background: linear-gradient(0deg, #0f0f1a 0%, #1a1a2e 100%);
  border-top: 1px solid rgba(255, 215, 0, 0.12);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.6);
  animation: _s48_slideUpPanel 0.4s ease-out;
  transition: transform 0.4s ease;
  max-height: 340px;
  display: flex;
  flex-direction: column;
}

#tournamentLeaderboard.s48-collapsed-lb {
  transform: translateY(calc(100% - 42px));
}

.s48-lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.05) 0%, transparent 50%, rgba(255, 215, 0, 0.05) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  min-height: 42px;
}

.s48-lb-header:hover {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.08) 0%, transparent 50%, rgba(255, 215, 0, 0.08) 100%);
}

.s48-lb-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.s48-lb-trophy-icon {
  font-size: 18px;
}

.s48-lb-title {
  font-size: 13px;
  font-weight: 700;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.s48-lb-player-count {
  font-size: 11px;
  color: #7ec8e3;
  font-weight: 400;
  margin-left: 4px;
}

.s48-lb-timer-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.s48-lb-timer {
  font-size: 13px;
  font-weight: 700;
  font-family: "Courier New", monospace;
  color: #7ec8e3;
  background: rgba(74, 144, 217, 0.1);
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(74, 144, 217, 0.2);
  letter-spacing: 1px;
}

.s48-lb-timer.s48-urgent {
  animation: _s48_timerPulse 1s ease-in-out infinite;
  border-color: rgba(255, 68, 68, 0.3);
  background: rgba(255, 68, 68, 0.1);
}

.s48-lb-collapse-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #888;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.s48-lb-collapse-btn:hover {
  background: rgba(255, 215, 0, 0.1);
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.25);
}

.s48-lb-collapse-btn .s48-chevron {
  transition: transform 0.3s ease;
  display: inline-block;
}

#tournamentLeaderboard.s48-collapsed-lb .s48-lb-collapse-btn .s48-chevron {
  transform: rotate(180deg);
}

.s48-lb-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.2) transparent;
}

.s48-lb-body::-webkit-scrollbar {
  width: 5px;
}

.s48-lb-body::-webkit-scrollbar-track {
  background: transparent;
}

.s48-lb-body::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.2);
  border-radius: 3px;
}

.s48-lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.s48-lb-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.s48-lb-table thead th {
  padding: 6px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #888;
  background: #12122a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.s48-lb-table thead th:first-child {
  text-align: center;
  width: 50px;
}

.s48-lb-table thead th:last-child {
  text-align: right;
}

.s48-lb-table tbody tr {
  transition: background-color 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.s48-lb-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.s48-lb-table tbody td {
  padding: 7px 12px;
  color: #ccc;
  vertical-align: middle;
}

.s48-lb-table tbody td:first-child {
  text-align: center;
}

.s48-lb-table tbody td:last-child {
  text-align: right;
}

/* Rank column styling */
.s48-rank-cell {
  font-weight: 700;
  font-size: 13px;
}

.s48-lb-row-gold .s48-rank-cell {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.s48-lb-row-silver .s48-rank-cell {
  color: #c0c0c0;
  text-shadow: 0 0 6px rgba(192, 192, 192, 0.4);
}

.s48-lb-row-bronze .s48-rank-cell {
  color: #cd7f32;
  text-shadow: 0 0 6px rgba(205, 127, 50, 0.4);
}

/* Rank badge for top 3 */
.s48-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}

.s48-rank-badge.s48-gold {
  background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%);
  color: #1a1a2e;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
  background-size: 200% 100%;
  animation: _s48_rankBadgeShine 3s linear infinite;
}

.s48-rank-badge.s48-silver {
  background: linear-gradient(135deg, #e0e0e0 0%, #a0a0a0 100%);
  color: #1a1a2e;
  box-shadow: 0 0 8px rgba(192, 192, 192, 0.3);
}

.s48-rank-badge.s48-bronze {
  background: linear-gradient(135deg, #cd7f32 0%, #8b5a2b 100%);
  color: #1a1a2e;
  box-shadow: 0 0 8px rgba(205, 127, 50, 0.3);
}

/* Top 3 row highlights */
.s48-lb-row-gold {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.06) 0%, transparent 60%);
}

.s48-lb-row-silver {
  background: linear-gradient(90deg, rgba(192, 192, 192, 0.04) 0%, transparent 60%);
}

.s48-lb-row-bronze {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.04) 0%, transparent 60%);
}

/* Player name column */
.s48-player-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.s48-player-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a90d9, #7ec8e3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.s48-lb-row-gold .s48-player-avatar {
  background: linear-gradient(135deg, #ffd700, #b8860b);
  color: #1a1a2e;
}

.s48-player-name-text {
  font-weight: 500;
  color: #e0e0e0;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Score column */
.s48-score-cell {
  font-weight: 700;
  color: #fbbf24;
  font-family: "Courier New", monospace;
  font-size: 13px;
}

.s48-score-cell.s48-score-updated {
  animation: _s48_scoreFlash 0.8s ease-out;
}

/* Prize column */
.s48-prize-cell {
  font-weight: 600;
  color: #00ff88;
}

.s48-prize-cell .s48-prize-currency {
  font-size: 10px;
  color: #7ec8e3;
  margin-right: 2px;
}

/* Player own row */
.s48-lb-row-self {
  background: linear-gradient(90deg, rgba(74, 144, 217, 0.12) 0%, rgba(74, 144, 217, 0.03) 70%, transparent 100%) !important;
  border-left: 3px solid #4a90d9;
  position: relative;
}

.s48-lb-row-self .s48-player-name-text {
  color: #7ec8e3;
  font-weight: 700;
}

.s48-lb-row-self::after {
  content: "YOU";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  font-weight: 800;
  color: #4a90d9;
  background: rgba(74, 144, 217, 0.15);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 1px;
}

/* Empty state */
.s48-lb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #666;
  font-size: 13px;
  text-align: center;
  gap: 6px;
}

.s48-lb-empty-icon {
  font-size: 28px;
  opacity: 0.4;
}

/* Leaderboard footer */
.s48-lb-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.s48-lb-prize-pool {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #888;
}

.s48-lb-prize-pool-amount {
  font-weight: 700;
  color: #ffd700;
  font-size: 13px;
}

.s48-lb-your-rank {
  font-size: 11px;
  color: #7ec8e3;
  font-weight: 500;
}

.s48-lb-your-rank strong {
  color: #ffffff;
  font-size: 13px;
}


/* --------------------------------------------------------------------------
   3. Loss Streak Comfort (#lossStreakComfort)
   -------------------------------------------------------------------------- */

#lossStreakComfort {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#lossStreakComfort.s48-active {
  display: flex;
  animation: _s48_fadeIn 0.5s ease-out;
}

.s48-comfort-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(10, 22, 40, 0.92) 0%, rgba(15, 15, 26, 0.97) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.s48-comfort-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: linear-gradient(160deg, #1a2340 0%, #0f1a2e 40%, #141428 100%);
  border: 1px solid rgba(74, 144, 217, 0.2);
  border-radius: 20px;
  padding: 32px 28px 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(74, 144, 217, 0.08);
  animation: _s48_fadeInUp 0.6s ease-out 0.1s both;
  overflow: hidden;
}

.s48-comfort-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #888;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  line-height: 1;
}

.s48-comfort-close:hover {
  background: rgba(255, 100, 100, 0.15);
  color: #ff6b6b;
  border-color: rgba(255, 100, 100, 0.3);
  transform: rotate(90deg);
}

.s48-comfort-icon {
  text-align: center;
  font-size: 44px;
  margin-bottom: 12px;
  animation: _s48_gentleBreathe 3s ease-in-out infinite;
}

.s48-comfort-heading {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #e0e8f0;
  margin-bottom: 6px;
  line-height: 1.3;
}

.s48-comfort-subtext {
  text-align: center;
  font-size: 13px;
  color: #8899aa;
  line-height: 1.5;
  margin-bottom: 20px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.s48-comfort-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 20px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.s48-comfort-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.s48-comfort-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #7ec8e3;
}

.s48-comfort-stat-value.s48-loss {
  color: #ff6b6b;
}

.s48-comfort-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #667788;
}

.s48-comfort-suggestions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.s48-suggestion-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(74, 144, 217, 0.06) 0%, rgba(126, 200, 227, 0.03) 100%);
  border: 1px solid rgba(74, 144, 217, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: _s48_fadeInUp 0.5s ease-out both;
}

.s48-suggestion-card:nth-child(1) { animation-delay: 0.2s; }
.s48-suggestion-card:nth-child(2) { animation-delay: 0.3s; }
.s48-suggestion-card:nth-child(3) { animation-delay: 0.4s; }

.s48-suggestion-card:hover {
  background: linear-gradient(135deg, rgba(74, 144, 217, 0.12) 0%, rgba(126, 200, 227, 0.06) 100%);
  border-color: rgba(74, 144, 217, 0.25);
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.s48-suggestion-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.s48-suggestion-icon.s48-break {
  background: linear-gradient(135deg, rgba(126, 200, 227, 0.15), rgba(74, 144, 217, 0.1));
}

.s48-suggestion-icon.s48-lower-bet {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(255, 170, 0, 0.1));
}

.s48-suggestion-icon.s48-change-game {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.12), rgba(0, 200, 100, 0.08));
}

.s48-suggestion-content {
  flex: 1;
  min-width: 0;
}

.s48-suggestion-title {
  font-size: 13px;
  font-weight: 600;
  color: #e0e8f0;
  margin-bottom: 2px;
}

.s48-suggestion-desc {
  font-size: 11px;
  color: #667788;
  line-height: 1.4;
}

.s48-suggestion-arrow {
  color: #4a90d9;
  font-size: 14px;
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.3s ease;
}

.s48-suggestion-card:hover .s48-suggestion-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Cashback offer */
.s48-cashback-offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.06) 0%, rgba(255, 170, 0, 0.03) 100%);
  border: 1px solid rgba(255, 215, 0, 0.15);
  border-radius: 14px;
  margin-bottom: 16px;
  animation: _s48_fadeInUp 0.5s ease-out 0.5s both;
}

.s48-cashback-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #fbbf24;
  font-weight: 600;
}

.s48-cashback-amount {
  font-size: 26px;
  font-weight: 800;
  color: #ffd700;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.s48-cashback-amount .s48-currency {
  font-size: 16px;
  vertical-align: super;
  margin-right: 2px;
}

.s48-cashback-claim-btn {
  padding: 8px 28px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1a1a2e;
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.3);
}

.s48-cashback-claim-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 215, 0, 0.45);
  background: linear-gradient(135deg, #ffe033 0%, #ffbb22 100%);
}

.s48-cashback-claim-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.s48-cashback-terms {
  font-size: 9px;
  color: #556677;
  text-align: center;
}

/* Comfort dismiss actions */
.s48-comfort-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.s48-comfort-dismiss-btn {
  padding: 8px 24px;
  font-size: 12px;
  font-weight: 500;
  color: #8899aa;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.s48-comfort-dismiss-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ccc;
  border-color: rgba(255, 255, 255, 0.15);
}

.s48-comfort-continue-btn {
  padding: 8px 24px;
  font-size: 12px;
  font-weight: 600;
  color: #7ec8e3;
  background: rgba(74, 144, 217, 0.1);
  border: 1px solid rgba(74, 144, 217, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.s48-comfort-continue-btn:hover {
  background: rgba(74, 144, 217, 0.2);
  border-color: rgba(74, 144, 217, 0.35);
  color: #fff;
}

/* Decorative calming orbs */
.s48-comfort-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.08;
}

.s48-comfort-orb.s48-orb-1 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #4a90d9 0%, transparent 70%);
  top: -60px;
  left: -60px;
  animation: _s48_gentleBreathe 5s ease-in-out infinite;
}

.s48-comfort-orb.s48-orb-2 {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, #7ec8e3 0%, transparent 70%);
  bottom: -40px;
  right: -40px;
  animation: _s48_gentleBreathe 4s ease-in-out infinite 1s;
}

.s48-comfort-orb.s48-orb-3 {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #a78bfa 0%, transparent 70%);
  top: 30%;
  right: -30px;
  animation: _s48_gentleBreathe 6s ease-in-out infinite 2s;
}


/* --------------------------------------------------------------------------
   S48 Mobile Responsive (max-width: 768px)
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {


  /* --- Bet Ladder Mobile --- */
  #betLadderPanel {
    width: 56px;
    padding: 8px 4px;
    border-radius: 10px 0 0 10px;
  }

  #betLadderPanel.s48-expanded {
    width: 100px;
  }

  .s48-ladder-title {
    font-size: 7px;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
  }

  .s48-ladder-rung {
    width: 44px;
    min-height: 36px;
    padding: 3px;
    border-radius: 6px;
  }

  #betLadderPanel.s48-expanded .s48-ladder-rung {
    width: 88px;
    padding: 4px 8px;
  }

  .s48-rung-bet {
    font-size: 10px;
  }

  .s48-rung-bet .s48-currency {
    font-size: 7px;
  }

  .s48-rung-multiplier {
    font-size: 7px;
    padding: 1px 3px;
  }

  .s48-ladder-arrow {
    font-size: 10px;
  }

  .s48-ladder-connector {
    height: 5px;
  }

  .s48-ladder-top-badge {
    padding: 4px 6px;
  }

  .s48-ladder-top-badge .s48-crown-icon {
    font-size: 14px;
  }

  .s48-ladder-top-badge .s48-top-label {
    font-size: 7px;
  }

  .s48-ladder-toggle {
    width: 20px;
    height: 20px;
    font-size: 10px;
    margin-top: 6px;
  }

  /* --- Tournament Leaderboard Mobile --- */
  #tournamentLeaderboard {
    max-height: 280px;
  }

  #tournamentLeaderboard.s48-collapsed-lb {
    transform: translateY(calc(100% - 36px));
  }

  .s48-lb-header {
    padding: 6px 10px;
    min-height: 36px;
  }

  .s48-lb-trophy-icon {
    font-size: 14px;
  }

  .s48-lb-title {
    font-size: 11px;
    letter-spacing: 0.5px;
  }

  .s48-lb-player-count {
    font-size: 9px;
  }

  .s48-lb-timer {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 4px;
  }

  .s48-lb-collapse-btn {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .s48-lb-table {
    font-size: 11px;
  }

  .s48-lb-table thead th {
    padding: 4px 8px;
    font-size: 8px;
  }

  .s48-lb-table tbody td {
    padding: 5px 8px;
  }

  .s48-rank-badge {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  .s48-player-avatar {
    width: 20px;
    height: 20px;
    font-size: 8px;
  }

  .s48-player-name-text {
    max-width: 90px;
    font-size: 11px;
  }

  .s48-score-cell {
    font-size: 11px;
  }

  .s48-lb-row-self::after {
    font-size: 7px;
    padding: 1px 4px;
  }

  .s48-lb-footer {
    padding: 4px 10px;
  }

  .s48-lb-prize-pool {
    font-size: 10px;
  }

  .s48-lb-prize-pool-amount {
    font-size: 11px;
  }

  .s48-lb-your-rank {
    font-size: 10px;
  }

  /* --- Loss Streak Comfort Mobile --- */
  #lossStreakComfort {
    padding: 12px;
  }

  .s48-comfort-card {
    max-width: 100%;
    padding: 24px 18px 18px;
    border-radius: 16px;
  }

  .s48-comfort-close {
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .s48-comfort-icon {
    font-size: 36px;
    margin-bottom: 8px;
  }

  .s48-comfort-heading {
    font-size: 17px;
  }

  .s48-comfort-subtext {
    font-size: 12px;
    margin-bottom: 14px;
  }

  .s48-comfort-stats {
    gap: 16px;
    margin-bottom: 14px;
    padding: 10px 0;
  }

  .s48-comfort-stat-value {
    font-size: 16px;
  }

  .s48-comfort-stat-label {
    font-size: 9px;
  }

  .s48-comfort-suggestions {
    gap: 8px;
    margin-bottom: 14px;
  }

  .s48-suggestion-card {
    padding: 10px 12px;
    gap: 10px;
  }

  .s48-suggestion-icon {
    width: 32px;
    height: 32px;
    font-size: 15px;
    border-radius: 8px;
  }

  .s48-suggestion-title {
    font-size: 12px;
  }

  .s48-suggestion-desc {
    font-size: 10px;
  }

  .s48-cashback-offer {
    padding: 12px;
    border-radius: 12px;
  }

  .s48-cashback-amount {
    font-size: 22px;
  }

  .s48-cashback-amount .s48-currency {
    font-size: 14px;
  }

  .s48-cashback-claim-btn {
    padding: 7px 22px;
    font-size: 12px;
  }

  .s48-comfort-actions {
    gap: 8px;
  }

  .s48-comfort-dismiss-btn,
  .s48-comfort-continue-btn {
    padding: 7px 18px;
    font-size: 11px;
  }

  .s48-comfort-orb.s48-orb-1 {
    width: 120px;
    height: 120px;
    top: -30px;
    left: -30px;
  }

  .s48-comfort-orb.s48-orb-2 {
    width: 90px;
    height: 90px;
    bottom: -20px;
    right: -20px;
  }

  .s48-comfort-orb.s48-orb-3 {
    width: 60px;
    height: 60px;
  }
}



/* --------------------------------------------------------------------------
   S48 Extra-small screens (max-width: 480px)
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {


  #betLadderPanel {
    width: 48px;
    padding: 6px 3px;
  }

  .s48-ladder-rung {
    width: 38px;
    min-height: 32px;
  }

  .s48-rung-bet {
    font-size: 9px;
  }

  .s48-rung-multiplier {
    font-size: 6px;
  }

  #tournamentLeaderboard {
    max-height: 240px;
  }

  .s48-lb-title {
    font-size: 10px;
  }

  .s48-lb-table thead th:nth-child(3),
  .s48-lb-table tbody td:nth-child(3) {
    display: none;
  }

  .s48-player-name-text {
    max-width: 70px;
  }

  .s48-comfort-card {
    padding: 20px 14px 16px;
  }

  .s48-comfort-heading {
    font-size: 15px;
  }

  .s48-comfort-subtext {
    font-size: 11px;
  }

  .s48-comfort-stats {
    gap: 12px;
    flex-wrap: wrap;
  }

  .s48-suggestion-card {
    padding: 8px 10px;
  }

  .s48-cashback-amount {
    font-size: 20px;
  }
}



/* --------------------------------------------------------------------------
   S48 Reduced motion preference
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {


  #betLadderPanel,
  #tournamentLeaderboard,
  .s48-comfort-card,
  .s48-suggestion-card {
    animation: none !important;
  }

  .s48-ladder-rung.s48-current {
    animation: none;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
  }

  .s48-ladder-arrow {
    animation: none;
  }

  .s48-ladder-top-badge {
    animation: none;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
  }

  .s48-comfort-icon {
    animation: none;
  }

  .s48-comfort-orb {
    animation: none;
  }

  .s48-rank-badge.s48-gold {
    animation: none;
  }

  .s48-lb-timer.s48-urgent {
    animation: none;
    color: #ff4444;
  }

  .s48-ladder-progress-fill {
    animation: none;
  }

  .s48-score-cell.s48-score-updated {
    animation: none;
    background-color: rgba(0, 255, 136, 0.15);
  }
}



/* ============================================================
   SPRINT 49 — Slot Race Timer, Jackpot Contribution Meter,
               Social Share Bonus
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. SLOT RACE TIMER  (#slotRaceTimer)
   ──────────────────────────────────────────────────────────── */

#slotRaceTimer {
  position: fixed;
  top: 80px;
  right: 18px;
  z-index: 9100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(120px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

#slotRaceTimer.s49-active {
  opacity: 1;
  transform: translateX(0);
}

/* -- circular ring container -------------------------------- */
.s49-race-ring-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.35));
}

.s49-race-ring-svg {
  width: 110px;
  height: 110px;
  transform: rotate(-90deg);
}

.s49-race-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 6;
}

.s49-race-ring-fg {
  fill: none;
  stroke: #ffd700;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 314;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke 0.4s ease;
}

.s49-race-ring-fg.s49-low-time {
  stroke: #ff4444;
  animation: _s49_ring_pulse 0.8s ease-in-out infinite;
}

/* -- countdown text inside ring ----------------------------- */
.s49-race-countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1.15;
}

.s49-race-time-digits {
  font-family: "Courier New", monospace;
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.s49-race-time-digits.s49-low-time {
  color: #ff4444;
  animation: _s49_digit_flash 0.5s ease-in-out infinite;
}

.s49-race-time-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 2px;
}

/* -- spin counter ------------------------------------------- */
.s49-race-spin-counter {
  background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 10px;
  padding: 6px 14px;
  text-align: center;
  min-width: 100px;
}

.s49-race-spin-count {
  font-size: 20px;
  font-weight: 700;
  color: #ffd700;
}

.s49-race-spin-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 1px;
}

/* -- position indicator ------------------------------------- */
.s49-race-position {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(15, 15, 26, 0.95) 100%);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 10px;
  padding: 6px 14px;
  min-width: 100px;
  justify-content: center;
}

.s49-race-pos-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #0f0f1a;
  flex-shrink: 0;
}

.s49-race-pos-badge.s49-pos-1 {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.s49-race-pos-badge.s49-pos-2 {
  background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
  box-shadow: 0 0 8px rgba(192, 192, 192, 0.4);
}

.s49-race-pos-badge.s49-pos-3 {
  background: linear-gradient(135deg, #cd7f32, #a0622e);
  box-shadow: 0 0 8px rgba(205, 127, 50, 0.4);
}

.s49-race-pos-badge.s49-pos-other {
  background: linear-gradient(135deg, #4a4a6a, #3a3a5a);
  color: #ffffff;
}

.s49-race-pos-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
}

.s49-race-pos-text span {
  color: #ffd700;
  font-weight: 700;
}

/* -- race title bar ----------------------------------------- */
.s49-race-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ffd700;
  text-align: center;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
  animation: _s49_title_shimmer 3s ease-in-out infinite;
}

/* -- results summary card ----------------------------------- */
.s49-race-results {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  background: linear-gradient(160deg, #1a1a2e 0%, #0a1628 50%, #0f0f1a 100%);
  border: 2px solid rgba(255, 215, 0, 0.4);
  border-radius: 18px;
  padding: 30px 36px;
  min-width: 320px;
  max-width: 420px;
  z-index: 9200;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(255, 215, 0, 0.15);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.s49-race-results.s49-active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.s49-race-results-title {
  font-size: 22px;
  font-weight: 800;
  color: #ffd700;
  text-align: center;
  margin-bottom: 18px;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}

.s49-race-results-place {
  font-size: 48px;
  font-weight: 900;
  text-align: center;
  margin: 12px 0;
  animation: _s49_place_entrance 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.s49-race-results-place.s49-gold {
  background: linear-gradient(135deg, #ffd700, #ffaa00, #ffd700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
}

.s49-race-results-place.s49-silver {
  background: linear-gradient(135deg, #e0e0e0, #c0c0c0, #e0e0e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.s49-race-results-place.s49-bronze {
  background: linear-gradient(135deg, #cd7f32, #e8a050, #cd7f32);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.s49-race-results-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.s49-race-results-stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}

.s49-race-results-stat-val {
  font-size: 18px;
  font-weight: 700;
  color: #00ff88;
}

.s49-race-results-stat-lbl {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 3px;
}

.s49-race-results-prize {
  text-align: center;
  margin-top: 18px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(255, 170, 0, 0.08) 100%);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 12px;
}

.s49-race-results-prize-amount {
  font-size: 28px;
  font-weight: 800;
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}

.s49-race-results-prize-label {
  font-size: 10px;
  color: rgba(255, 215, 0, 0.7);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 4px;
}

.s49-race-results-close {
  display: block;
  margin: 20px auto 0;
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #0f0f1a;
  border: none;
  border-radius: 10px;
  padding: 10px 32px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.s49-race-results-close:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.4);
}

/* ────────────────────────────────────────────────────────────
   2. JACKPOT CONTRIBUTION METER  (#jackpotContribMeter)
   ──────────────────────────────────────────────────────────── */

#jackpotContribMeter {
  position: fixed;
  left: 14px;
  top: 50%;
  transform: translateY(-50%) translateX(-120px);
  z-index: 9100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: auto;
}

#jackpotContribMeter.s49-active {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* -- vertical bar container --------------------------------- */
.s49-jp-bar-wrap {
  position: relative;
  width: 48px;
  height: 260px;
  background: linear-gradient(180deg, #0a1628 0%, #0f0f1a 100%);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* -- liquid fill -------------------------------------------- */
.s49-jp-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0%;
  background: linear-gradient(0deg, #ffd700 0%, #ffaa00 40%, #fbbf24 70%, #ffd700 100%);
  border-radius: 0 0 22px 22px;
  transition: height 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.s49-jp-fill::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -10%;
  width: 120%;
  height: 12px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.45) 0%, transparent 70%);
  border-radius: 50%;
  animation: _s49_liquid_wave 2.5s ease-in-out infinite;
}

.s49-jp-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 8px,
    rgba(255, 255, 255, 0.06) 8px,
    rgba(255, 255, 255, 0.06) 9px
  );
}

/* -- bubbles overlay ---------------------------------------- */
.s49-jp-bubbles {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.s49-jp-bubble {
  position: absolute;
  bottom: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  animation: _s49_bubble_rise 3s ease-in infinite;
}

.s49-jp-bubble:nth-child(1) { left: 20%; animation-delay: 0s; animation-duration: 2.8s; }
.s49-jp-bubble:nth-child(2) { left: 50%; animation-delay: 0.8s; animation-duration: 3.2s; width: 4px; height: 4px; }
.s49-jp-bubble:nth-child(3) { left: 75%; animation-delay: 1.5s; animation-duration: 2.5s; width: 5px; height: 5px; }
.s49-jp-bubble:nth-child(4) { left: 35%; animation-delay: 2.1s; animation-duration: 3.5s; width: 3px; height: 3px; }

/* -- glow when near threshold ------------------------------- */
.s49-jp-bar-wrap.s49-near-threshold {
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5),
              0 0 25px rgba(255, 215, 0, 0.4),
              0 0 50px rgba(255, 215, 0, 0.2);
  border-color: rgba(255, 215, 0, 0.5);
  animation: _s49_threshold_glow 1.5s ease-in-out infinite;
}

/* -- jackpot amount display --------------------------------- */
.s49-jp-amount-box {
  background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 12px;
  padding: 8px 10px;
  text-align: center;
  min-width: 80px;
}

.s49-jp-amount {
  font-size: 16px;
  font-weight: 800;
  color: #ffd700;
  font-family: "Courier New", monospace;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  animation: _s49_amount_counter 0.15s steps(1) infinite paused;
}

.s49-jp-amount.s49-counting {
  animation-play-state: running;
}

.s49-jp-amount-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 2px;
}

/* -- contribution per spin ---------------------------------- */
.s49-jp-contrib-spin {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 5px 10px;
  text-align: center;
}

.s49-jp-contrib-val {
  font-size: 12px;
  font-weight: 700;
  color: #00ff88;
}

.s49-jp-contrib-label {
  font-size: 7px;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* -- your contribution vs total pool ------------------------ */
.s49-jp-split {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 90px;
}

.s49-jp-split-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
}

.s49-jp-split-key {
  color: rgba(255, 255, 255, 0.45);
}

.s49-jp-split-val {
  font-weight: 700;
  color: #fbbf24;
}

.s49-jp-split-val.s49-yours {
  color: #00ff88;
}

/* -- jackpot label ------------------------------------------ */
.s49-jp-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: #ffd700;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  pointer-events: none;
  opacity: 0.6;
}

/* -- ticker animation on contribution ----------------------- */
.s49-jp-tick {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 700;
  color: #00ff88;
  opacity: 0;
  pointer-events: none;
  animation: _s49_tick_rise 1s ease-out forwards;
}

/* -- threshold marker line ---------------------------------- */
.s49-jp-threshold-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 68, 68, 0.8) 0px,
    rgba(255, 68, 68, 0.8) 4px,
    transparent 4px,
    transparent 8px
  );
  z-index: 2;
  transition: bottom 0.5s ease;
}

/* ────────────────────────────────────────────────────────────
   3. SOCIAL SHARE BONUS  (#socialSharePanel)
   ──────────────────────────────────────────────────────────── */

#socialSharePanel {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  z-index: 9150;
  width: 94%;
  max-width: 480px;
  background: linear-gradient(160deg, #1a1a2e 0%, #0a1628 50%, #0f0f1a 100%);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: 0;
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.35s ease;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6),
              0 0 30px rgba(255, 215, 0, 0.08);
  pointer-events: none;
}

#socialSharePanel.s49-active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* -- drag handle -------------------------------------------- */
.s49-share-handle {
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin: 10px auto 0;
}

/* -- panel header ------------------------------------------- */
.s49-share-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 10px;
}

.s49-share-title {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
}

.s49-share-title-icon {
  margin-right: 8px;
  font-size: 20px;
}

.s49-share-close-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.s49-share-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* -- bonus amount banner ------------------------------------ */
.s49-share-bonus-banner {
  margin: 0 20px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(255, 170, 0, 0.06) 100%);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.s49-share-bonus-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 215, 0, 0.05) 60deg,
    transparent 120deg
  );
  animation: _s49_banner_rotate 8s linear infinite;
}

.s49-share-bonus-amount {
  font-size: 32px;
  font-weight: 900;
  color: #ffd700;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
  position: relative;
  z-index: 1;
}

.s49-share-bonus-text {
  font-size: 11px;
  color: rgba(255, 215, 0, 0.7);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

/* -- share buttons grid ------------------------------------- */
.s49-share-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 16px 20px;
}

.s49-share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 6px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease,
              border-color 0.2s ease, box-shadow 0.2s ease;
}

.s49-share-btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.s49-share-btn:active {
  transform: translateY(0) scale(0.96);
}

.s49-share-btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #ffffff;
}

.s49-share-btn-icon.s49-twitter {
  background: linear-gradient(135deg, #1da1f2, #0d8bd9);
}

.s49-share-btn-icon.s49-facebook {
  background: linear-gradient(135deg, #4267b2, #365899);
}

.s49-share-btn-icon.s49-whatsapp {
  background: linear-gradient(135deg, #25d366, #128c7e);
}

.s49-share-btn-icon.s49-telegram {
  background: linear-gradient(135deg, #0088cc, #006699);
}

.s49-share-btn-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
}

.s49-share-btn.s49-shared .s49-share-btn-icon {
  position: relative;
}

.s49-share-btn.s49-shared .s49-share-btn-icon::after {
  content: "\2713";
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #00ff88;
  color: #0f0f1a;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* -- share streak tracker ----------------------------------- */
.s49-share-streak {
  margin: 0 20px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.s49-share-streak-flame {
  font-size: 26px;
  animation: _s49_flame_dance 1s ease-in-out infinite;
}

.s49-share-streak-info {
  flex: 1;
}

.s49-share-streak-count {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}

.s49-share-streak-count span {
  color: #ffd700;
  font-size: 20px;
}

.s49-share-streak-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.s49-share-streak-bar-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}

.s49-share-streak-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd700, #ff6600);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.s49-share-streak-bonus {
  font-size: 12px;
  font-weight: 700;
  color: #00ff88;
  white-space: nowrap;
}

/* -- share history ------------------------------------------ */
.s49-share-history {
  padding: 12px 20px 18px;
}

.s49-share-history-title {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

.s49-share-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 130px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.2) transparent;
}

.s49-share-history-list::-webkit-scrollbar {
  width: 4px;
}

.s49-share-history-list::-webkit-scrollbar-track {
  background: transparent;
}

.s49-share-history-list::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.2);
  border-radius: 2px;
}

.s49-share-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  transition: background 0.2s ease;
}

.s49-share-history-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.s49-share-history-platform {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.s49-share-history-detail {
  flex: 1;
  min-width: 0;
}

.s49-share-history-game {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s49-share-history-time {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
}

.s49-share-history-reward {
  font-size: 12px;
  font-weight: 700;
  color: #00ff88;
  white-space: nowrap;
}

/* -- confetti on share bonus claimed ------------------------ */
.s49-share-confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9300;
  overflow: hidden;
}

.s49-share-confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  opacity: 0;
  animation: _s49_confetti_fall 2.5s ease-in forwards;
}

.s49-share-confetti-piece:nth-child(odd) {
  border-radius: 50%;
}

.s49-share-confetti-piece:nth-child(3n) {
  width: 6px;
  height: 10px;
  border-radius: 2px;
}

.s49-share-confetti-piece.s49-conf-gold   { background: #ffd700; }
.s49-share-confetti-piece.s49-conf-green  { background: #00ff88; }
.s49-share-confetti-piece.s49-conf-blue   { background: #4a90d9; }
.s49-share-confetti-piece.s49-conf-red    { background: #ff4444; }
.s49-share-confetti-piece.s49-conf-purple { background: #a855f7; }
.s49-share-confetti-piece.s49-conf-white  { background: #ffffff; }

/* -- claim button ------------------------------------------- */
.s49-share-claim-btn {
  display: block;
  width: calc(100% - 40px);
  margin: 12px 20px 0;
  padding: 13px;
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  color: #0f0f1a;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.s49-share-claim-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.s49-share-claim-btn:active {
  transform: translateY(0) scale(0.98);
}

.s49-share-claim-btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 70%
  );
  animation: _s49_btn_shine 3s ease-in-out infinite;
}

.s49-share-claim-btn.s49-claimed {
  background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
  pointer-events: none;
}

.s49-share-claim-btn.s49-claimed::after {
  animation: none;
}

/* -- empty state for history -------------------------------- */
.s49-share-history-empty {
  text-align: center;
  padding: 18px 10px;
  color: rgba(255, 255, 255, 0.25);
  font-size: 12px;
  font-style: italic;
}

/* ────────────────────────────────────────────────────────────
   KEYFRAME ANIMATIONS (Sprint 49)
   ──────────────────────────────────────────────────────────── */

/* 1 - ring pulse when time is low */
@keyframes _s49_ring_pulse {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 68, 68, 0.4)); }
  50%      { opacity: 0.7; filter: drop-shadow(0 0 20px rgba(255, 68, 68, 0.7)); }
}

/* 2 - digit flash when <30s */
@keyframes _s49_digit_flash {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* 3 - race title shimmer */
@keyframes _s49_title_shimmer {
  0%, 100% { text-shadow: 0 0 6px rgba(255, 215, 0, 0.3); }
  50%      { text-shadow: 0 0 16px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.2); }
}

/* 4 - place entrance slam */
@keyframes _s49_place_entrance {
  0%   { transform: scale(3); opacity: 0; }
  60%  { transform: scale(0.9); opacity: 1; }
  80%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* 5 - liquid wave on fill surface */
@keyframes _s49_liquid_wave {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-3px) scaleY(1.3); }
}

/* 6 - bubble rise in jackpot meter */
@keyframes _s49_bubble_rise {
  0%   { transform: translateY(0) scale(1); opacity: 0.5; }
  50%  { opacity: 0.35; }
  100% { transform: translateY(-260px) scale(0.4); opacity: 0; }
}

/* 7 - threshold glow pulse */
@keyframes _s49_threshold_glow {
  0%, 100% {
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5),
                0 0 25px rgba(255, 215, 0, 0.4),
                0 0 50px rgba(255, 215, 0, 0.2);
  }
  50% {
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5),
                0 0 35px rgba(255, 215, 0, 0.6),
                0 0 70px rgba(255, 215, 0, 0.35);
  }
}

/* 8 - contribution tick rise */
@keyframes _s49_tick_rise {
  0%   { transform: translateX(-50%) translateY(0); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-30px); opacity: 0; }
}

/* 9 - amount counter flicker */
@keyframes _s49_amount_counter {
  0%  { opacity: 1; }
  50% { opacity: 0.85; }
}

/* 10 - banner rotate (conic sweep) */
@keyframes _s49_banner_rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 11 - flame dance for streak */
@keyframes _s49_flame_dance {
  0%, 100% { transform: scaleY(1) rotate(0deg); }
  25%      { transform: scaleY(1.1) rotate(-3deg); }
  50%      { transform: scaleY(0.95) rotate(2deg); }
  75%      { transform: scaleY(1.08) rotate(-2deg); }
}

/* 12 - confetti fall */
@keyframes _s49_confetti_fall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
  70% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* 13 - button shine sweep */
@keyframes _s49_btn_shine {
  0%   { transform: translateX(-100%) rotate(45deg); }
  30%  { transform: translateX(100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

/* 14 - spin counter bump on increment */
@keyframes _s49_spin_bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); color: #00ff88; }
  100% { transform: scale(1); }
}

.s49-race-spin-count.s49-bumping {
  animation: _s49_spin_bump 0.35s ease-out;
}

/* 15 - share button ripple on click */
@keyframes _s49_share_ripple {
  0%   { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

.s49-share-btn-ripple {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  animation: _s49_share_ripple 0.6s ease-out forwards;
}

/* ────────────────────────────────────────────────────────────
   MOBILE RESPONSIVE - Sprint 49
   ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {


  /* -- Slot Race Timer -------------------------------------- */
  #slotRaceTimer {
    top: 60px;
    right: 8px;
  }

  .s49-race-ring-wrap {
    width: 80px;
    height: 80px;
  }

  .s49-race-ring-svg {
    width: 80px;
    height: 80px;
  }

  .s49-race-ring-bg,
  .s49-race-ring-fg {
    stroke-width: 5;
  }

  .s49-race-ring-fg {
    stroke-dasharray: 226;
  }

  .s49-race-time-digits {
    font-size: 19px;
  }

  .s49-race-time-label {
    font-size: 7px;
  }

  .s49-race-spin-counter {
    padding: 4px 10px;
    min-width: 75px;
  }

  .s49-race-spin-count {
    font-size: 16px;
  }

  .s49-race-position {
    padding: 4px 10px;
    min-width: 75px;
  }

  .s49-race-pos-badge {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .s49-race-pos-text {
    font-size: 9px;
  }

  .s49-race-title {
    font-size: 9px;
  }

  /* -- Race Results Card ------------------------------------ */
  .s49-race-results {
    min-width: 280px;
    max-width: 90vw;
    padding: 22px 20px;
  }

  .s49-race-results-title {
    font-size: 18px;
  }

  .s49-race-results-place {
    font-size: 36px;
  }

  .s49-race-results-stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .s49-race-results-stat-val {
    font-size: 15px;
  }

  .s49-race-results-prize-amount {
    font-size: 22px;
  }

  /* -- Jackpot Contribution Meter --------------------------- */
  #jackpotContribMeter {
    left: 6px;
  }

  .s49-jp-bar-wrap {
    width: 36px;
    height: 180px;
  }

  .s49-jp-amount-box {
    padding: 5px 7px;
    min-width: 60px;
  }

  .s49-jp-amount {
    font-size: 12px;
  }

  .s49-jp-amount-label {
    font-size: 7px;
  }

  .s49-jp-contrib-spin {
    padding: 3px 6px;
  }

  .s49-jp-contrib-val {
    font-size: 10px;
  }

  .s49-jp-split {
    max-width: 70px;
  }

  .s49-jp-split-row {
    font-size: 8px;
  }

  .s49-jp-label {
    font-size: 8px;
    letter-spacing: 2px;
  }

  /* -- Social Share Panel ----------------------------------- */
  #socialSharePanel {
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
  }

  .s49-share-header {
    padding: 12px 16px 8px;
  }

  .s49-share-title {
    font-size: 15px;
  }

  .s49-share-bonus-banner {
    margin: 0 16px;
    padding: 10px;
  }

  .s49-share-bonus-amount {
    font-size: 26px;
  }

  .s49-share-buttons {
    gap: 8px;
    padding: 12px 16px;
  }

  .s49-share-btn {
    padding: 10px 4px;
  }

  .s49-share-btn-icon {
    width: 34px;
    height: 34px;
    font-size: 17px;
    border-radius: 10px;
  }

  .s49-share-btn-label {
    font-size: 9px;
  }

  .s49-share-streak {
    margin: 0 16px;
    padding: 10px 12px;
  }

  .s49-share-streak-flame {
    font-size: 22px;
  }

  .s49-share-streak-count {
    font-size: 14px;
  }

  .s49-share-streak-count span {
    font-size: 17px;
  }

  .s49-share-history {
    padding: 10px 16px 14px;
  }

  .s49-share-history-list {
    max-height: 100px;
  }

  .s49-share-claim-btn {
    width: calc(100% - 32px);
    margin: 10px 16px 0;
    padding: 11px;
    font-size: 13px;
  }
}


/* -- extra-small phone layout ------------------------------- */
@media (max-width: 400px) {


  .s49-race-ring-wrap {
    width: 66px;
    height: 66px;
  }

  .s49-race-ring-svg {
    width: 66px;
    height: 66px;
  }

  .s49-race-ring-fg {
    stroke-dasharray: 188;
  }

  .s49-race-time-digits {
    font-size: 16px;
  }

  .s49-share-buttons {
    grid-template-columns: repeat(2, 1fr);
  }

  .s49-jp-bar-wrap {
    width: 30px;
    height: 140px;
  }

  .s49-jp-amount-box {
    min-width: 50px;
  }

  .s49-jp-amount {
    font-size: 10px;
  }
}


/* ────────────────────────────────────────────────────────────
   UTILITY STATES - Sprint 49
   ──────────────────────────────────────────────────────────── */

/* Overlay backdrop for race results */
.s49-race-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9190;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.s49-race-overlay.s49-active {
  opacity: 1;
  pointer-events: auto;
}

/* Hide components when not in use */
#slotRaceTimer:not(.s49-active),
#jackpotContribMeter:not(.s49-active),
#socialSharePanel:not(.s49-active) {
  pointer-events: none;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {

  .s49-jp-fill::before,
  .s49-jp-bubble,
  .s49-share-bonus-banner::before,
  .s49-share-streak-flame,
  .s49-share-claim-btn::after,
  .s49-race-ring-fg.s49-low-time,
  .s49-race-time-digits.s49-low-time,
  .s49-jp-bar-wrap.s49-near-threshold,
  .s49-race-title {
    animation: none !important;
  }
  .s49-jp-fill {
    transition-duration: 0.2s;
  }
}



/* ==========================================================================
   SPRINT 50 — VIP Lounge Invite, Mega Jackpot Ticker, Player Dashboard Widget
   ========================================================================== */

/* --------------------------------------------------------------------------
   S50 Keyframe Animations
   -------------------------------------------------------------------------- */

@keyframes _s50_fadeInScale {
  0% { opacity: 0; transform: scale(0.85) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes _s50_shimmerGold {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes _s50_pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.3), 0 0 40px rgba(255, 215, 0, 0.1); }
  50% { box-shadow: 0 0 35px rgba(255, 215, 0, 0.6), 0 0 70px rgba(255, 215, 0, 0.25); }
}

@keyframes _s50_sparkleFloat {
  0% { opacity: 0; transform: translateY(0) scale(0); }
  20% { opacity: 1; transform: translateY(-10px) scale(1); }
  80% { opacity: 1; transform: translateY(-50px) scale(0.8); }
  100% { opacity: 0; transform: translateY(-70px) scale(0); }
}

@keyframes _s50_odometerTick {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

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

@keyframes _s50_borderRotate {
  0% { --s50-angle: 0deg; }
  100% { --s50-angle: 360deg; }
}

@keyframes _s50_widgetSlideUp {
  0% { transform: translateY(100%) scale(0.9); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes _s50_barGrow {
  0% { height: 0; }
  100% { height: var(--s50-bar-h, 50%); }
}

@keyframes _s50_countUp {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes _s50_crownBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
}

@keyframes _s50_ripple {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

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

@keyframes _s50_spinStar {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes _s50_expandIn {
  0% { max-height: 0; opacity: 0; padding: 0; }
  100% { max-height: 600px; opacity: 1; }
}

@keyframes _s50_collapseOut {
  0% { max-height: 600px; opacity: 1; }
  100% { max-height: 0; opacity: 0; padding: 0; }
}

/* --------------------------------------------------------------------------
   1. VIP Lounge Invite Modal (#vipLoungeInvite)
   -------------------------------------------------------------------------- */

#vipLoungeInvite {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#vipLoungeInvite.active {
  display: flex;
}

.s50-vip-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.s50-vip-modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: linear-gradient(165deg, #1a1a2e 0%, #0f0f1a 50%, #1a0f28 100%);
  border-radius: 20px;
  border: 1px solid rgba(255, 215, 0, 0.3);
  padding: 0;
  overflow: hidden;
  animation: _s50_fadeInScale 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  box-shadow:
    0 0 40px rgba(255, 215, 0, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 215, 0, 0.15);
}

.s50-vip-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffd700, #ffaa00, #ffd700, transparent);
  background-size: 200% 100%;
  animation: _s50_shimmerGold 3s linear infinite;
}

.s50-vip-sparkle-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.s50-vip-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ffd700;
  border-radius: 50%;
  animation: _s50_sparkleFloat 2.5s ease-out infinite;
  box-shadow: 0 0 6px #ffd700;
}

.s50-vip-sparkle:nth-child(1) { left: 10%; animation-delay: 0s; }
.s50-vip-sparkle:nth-child(2) { left: 25%; animation-delay: 0.4s; }
.s50-vip-sparkle:nth-child(3) { left: 45%; animation-delay: 0.8s; }
.s50-vip-sparkle:nth-child(4) { left: 65%; animation-delay: 1.2s; }
.s50-vip-sparkle:nth-child(5) { left: 80%; animation-delay: 1.6s; }
.s50-vip-sparkle:nth-child(6) { left: 90%; animation-delay: 2.0s; }

.s50-vip-header {
  position: relative;
  text-align: center;
  padding: 32px 24px 20px;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.08) 0%, transparent 100%);
}

.s50-vip-crown {
  font-size: 48px;
  display: inline-block;
  animation: _s50_crownBob 2s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(255, 215, 0, 0.4));
  margin-bottom: 8px;
}

.s50-vip-title {
  font-size: 26px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffd700, #ffaa00, #fbbf24, #ffd700);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: _s50_gradientShift 4s ease infinite;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 4px;
}

.s50-vip-subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0;
}

.s50-vip-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  line-height: 1;
}

.s50-vip-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.s50-vip-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px auto 0;
  padding: 8px 20px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 170, 0, 0.08));
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 30px;
  animation: _s50_pulseGlow 3s ease-in-out infinite;
}

.s50-vip-tier-icon {
  font-size: 20px;
}

.s50-vip-tier-label {
  font-size: 14px;
  font-weight: 700;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.s50-vip-body {
  padding: 20px 28px 28px;
}

.s50-vip-benefits-title {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 14px;
  text-align: center;
}

.s50-vip-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.s50-vip-benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.25s ease;
}

.s50-vip-benefit:hover {
  background: rgba(255, 215, 0, 0.05);
  border-color: rgba(255, 215, 0, 0.15);
  transform: translateX(4px);
}

.s50-vip-benefit-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 215, 0, 0.08);
  border-radius: 10px;
}

.s50-vip-benefit-text {
  flex: 1;
}

.s50-vip-benefit-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}

.s50-vip-benefit-desc {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

.s50-vip-cta {
  display: block;
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffd700, #ffaa00, #fbbf24);
  background-size: 200% 200%;
  color: #0f0f1a;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  animation: _s50_gradientShift 3s ease infinite;
}

.s50-vip-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}

.s50-vip-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255, 215, 0, 0.35);
}

.s50-vip-cta:hover::before {
  width: 300px;
  height: 300px;
}

.s50-vip-cta:active {
  transform: translateY(0);
}

.s50-vip-cta-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  animation: _s50_ripple 0.6s ease-out forwards;
  pointer-events: none;
}

.s50-vip-footer {
  padding: 14px 28px 18px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.s50-vip-footer-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  margin: 0;
}

/* --------------------------------------------------------------------------
   2. Mega Jackpot Ticker (#megaJackpotTicker)
   -------------------------------------------------------------------------- */

#megaJackpotTicker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9500;
  display: none;
  height: 48px;
  background: linear-gradient(90deg, #0a1628 0%, #1a1a2e 50%, #0a1628 100%);
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

#megaJackpotTicker.active {
  display: flex;
  align-items: center;
}

.s50-jackpot-bg-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.06), transparent 70%);
  animation: _s50_bannerPulse 4s ease-in-out infinite;
  pointer-events: none;
}

.s50-jackpot-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
  height: 100%;
  gap: 8px;
}

.s50-jackpot-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  flex-shrink: 0;
}

.s50-jackpot-tiers {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
}

.s50-jackpot-tier {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.3s ease;
}

.s50-jackpot-tier:hover {
  background: rgba(255, 215, 0, 0.06);
  border-color: rgba(255, 215, 0, 0.2);
}

.s50-jackpot-tier-name {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}

.s50-jackpot-tier.s50-tier-mini .s50-jackpot-tier-name {
  color: #7ec8e3;
}

.s50-jackpot-tier.s50-tier-major .s50-jackpot-tier-name {
  color: #fbbf24;
}

.s50-jackpot-tier.s50-tier-grand .s50-jackpot-tier-name {
  color: #ff6b6b;
}

.s50-jackpot-tier.s50-tier-grand {
  border-color: rgba(255, 107, 107, 0.2);
  background: rgba(255, 107, 107, 0.04);
}

.s50-jackpot-tier.s50-tier-grand:hover {
  border-color: rgba(255, 107, 107, 0.35);
  background: rgba(255, 107, 107, 0.08);
}

.s50-jackpot-amount {
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
}

.s50-jackpot-currency {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin-right: 2px;
}

.s50-odometer-digit {
  display: inline-block;
  position: relative;
  width: 0.62em;
  height: 1.2em;
  overflow: hidden;
  text-align: center;
}

.s50-odometer-digit-inner {
  display: flex;
  flex-direction: column;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.s50-odometer-digit-char {
  display: block;
  height: 1.2em;
  line-height: 1.2em;
}

.s50-odometer-sep {
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
}

.s50-jackpot-star {
  display: inline-block;
  color: #ffd700;
  font-size: 14px;
  margin-left: 6px;
  animation: _s50_spinStar 4s linear infinite;
  flex-shrink: 0;
}

.s50-jackpot-high-pulse {
  animation: _s50_pulseGlow 2s ease-in-out infinite;
}

.s50-jackpot-close-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.s50-jackpot-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Ticker scroll for recent winners */
.s50-jackpot-winners-scroll {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.s50-jackpot-winners-track {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  animation: _s50_tickerSlide 25s linear infinite;
  padding-top: 1px;
}

.s50-jackpot-winner-item {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.5px;
}

.s50-jackpot-winner-name {
  color: #fbbf24;
  font-weight: 600;
}

.s50-jackpot-winner-amount {
  color: #00ff88;
}

/* --------------------------------------------------------------------------
   3. Player Dashboard Widget (#playerDashWidget)
   -------------------------------------------------------------------------- */

#playerDashWidget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9800;
  display: none;
  flex-direction: column;
  width: 320px;
  border-radius: 18px;
  background: linear-gradient(165deg, #1a1a2e 0%, #0f0f1a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.03);
  overflow: hidden;
  animation: _s50_widgetSlideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#playerDashWidget.active {
  display: flex;
}

.s50-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}

.s50-dash-header:hover {
  background: rgba(255, 255, 255, 0.04);
}

.s50-dash-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.s50-dash-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a90d9, #7ec8e3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}

.s50-dash-user-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.s50-dash-username {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.s50-dash-session-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
}

.s50-dash-toggle {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.s50-dash-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.s50-dash-toggle.s50-expanded {
  transform: rotate(180deg);
}

.s50-dash-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.35s ease;
}

.s50-dash-body.s50-expanded {
  max-height: 500px;
  opacity: 1;
}

.s50-dash-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 14px 18px 10px;
}

.s50-dash-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.2s ease;
}

.s50-dash-stat:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.s50-dash-stat-icon {
  font-size: 16px;
}

.s50-dash-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  animation: _s50_countUp 0.5s ease-out;
}

.s50-dash-stat-value.s50-positive {
  color: #00ff88;
}

.s50-dash-stat-value.s50-negative {
  color: #ff4d4d;
}

.s50-dash-stat-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.35);
}

/* Mini bar chart */
.s50-dash-chart {
  padding: 6px 18px 14px;
}

.s50-dash-chart-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.3);
  margin: 0 0 8px;
}

.s50-dash-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 50px;
  padding: 0 2px;
}

.s50-dash-chart-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-height: 3px;
  background: linear-gradient(180deg, #4a90d9, rgba(74, 144, 217, 0.4));
  animation: _s50_barGrow 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--s50-bar-delay, 0s);
  transition: background 0.2s ease;
  position: relative;
}

.s50-dash-chart-bar:hover {
  background: linear-gradient(180deg, #7ec8e3, rgba(126, 200, 227, 0.5));
}

.s50-dash-chart-bar.s50-bar-win {
  background: linear-gradient(180deg, #00ff88, rgba(0, 255, 136, 0.35));
}

.s50-dash-chart-bar.s50-bar-win:hover {
  background: linear-gradient(180deg, #33ffaa, rgba(0, 255, 136, 0.55));
}

.s50-dash-chart-bar.s50-bar-loss {
  background: linear-gradient(180deg, #ff4d4d, rgba(255, 77, 77, 0.3));
}

.s50-dash-chart-bar.s50-bar-loss:hover {
  background: linear-gradient(180deg, #ff6b6b, rgba(255, 77, 77, 0.5));
}

.s50-dash-chart-bar-tooltip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  padding: 3px 6px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.s50-dash-chart-bar:hover .s50-dash-chart-bar-tooltip {
  opacity: 1;
}

.s50-dash-chart-labels {
  display: flex;
  justify-content: space-between;
  padding: 4px 2px 0;
}

.s50-dash-chart-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
}

/* Divider */
.s50-dash-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0 18px;
}

/* Quick Actions */
.s50-dash-actions {
  display: flex;
  gap: 6px;
  padding: 12px 18px 16px;
}

.s50-dash-action {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 4px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: all 0.2s ease;
  color: rgba(255, 255, 255, 0.6);
}

.s50-dash-action:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: translateY(-2px);
}

.s50-dash-action-icon {
  font-size: 18px;
}

.s50-dash-action-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

.s50-dash-action.s50-action-deposit {
  border-color: rgba(0, 255, 136, 0.15);
  background: rgba(0, 255, 136, 0.03);
}

.s50-dash-action.s50-action-deposit:hover {
  border-color: rgba(0, 255, 136, 0.3);
  background: rgba(0, 255, 136, 0.08);
  color: #00ff88;
}

.s50-dash-action.s50-action-withdraw {
  border-color: rgba(255, 215, 0, 0.12);
  background: rgba(255, 215, 0, 0.02);
}

.s50-dash-action.s50-action-withdraw:hover {
  border-color: rgba(255, 215, 0, 0.25);
  background: rgba(255, 215, 0, 0.06);
  color: #ffd700;
}

.s50-dash-action.s50-action-settings {
  border-color: rgba(74, 144, 217, 0.12);
  background: rgba(74, 144, 217, 0.02);
}

.s50-dash-action.s50-action-settings:hover {
  border-color: rgba(74, 144, 217, 0.25);
  background: rgba(74, 144, 217, 0.06);
  color: #4a90d9;
}

/* Minimized bubble state */
.s50-dash-bubble {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9800;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a1a2e, #0f0f1a);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 20px;
}

.s50-dash-bubble.active {
  display: flex;
}

.s50-dash-bubble:hover {
  transform: scale(1.08);
  border-color: rgba(74, 144, 217, 0.3);
  box-shadow: 0 4px 25px rgba(74, 144, 217, 0.2);
}

.s50-dash-bubble-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #00ff88;
  font-size: 9px;
  font-weight: 700;
  color: #0f0f1a;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Mobile Responsive — Sprint 50
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* VIP Modal mobile */
  .s50-vip-modal {
    max-width: 100%;
    border-radius: 16px;
    margin: 10px;
  }

  .s50-vip-header {
    padding: 24px 18px 16px;
  }

  .s50-vip-crown {
    font-size: 36px;
  }

  .s50-vip-title {
    font-size: 20px;
    letter-spacing: 1px;
  }

  .s50-vip-body {
    padding: 16px 18px 22px;
  }

  .s50-vip-benefit {
    padding: 10px 12px;
  }

  .s50-vip-benefit-icon {
    font-size: 18px;
    width: 30px;
    height: 30px;
  }

  .s50-vip-benefit-label {
    font-size: 13px;
  }

  .s50-vip-cta {
    padding: 14px 20px;
    font-size: 14px;
    letter-spacing: 1.5px;
  }

  /* Jackpot Ticker mobile — compact single-line */
  #megaJackpotTicker {
    height: 40px;
  }

  .s50-jackpot-inner {
    gap: 4px;
    padding: 0 10px;
  }

  .s50-jackpot-label {
    display: none;
  }

  .s50-jackpot-tiers {
    gap: 8px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .s50-jackpot-tiers::-webkit-scrollbar {
    display: none;
  }

  .s50-jackpot-tier {
    padding: 3px 8px;
    gap: 5px;
  }

  .s50-jackpot-tier-name {
    font-size: 8px;
  }

  .s50-jackpot-amount {
    font-size: 13px;
  }

  .s50-jackpot-winners-scroll {
    display: none;
  }

  .s50-jackpot-close-btn {
    right: 6px;
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .s50-jackpot-star {
    display: none;
  }

  /* Dashboard Widget mobile */
  #playerDashWidget {
    bottom: 10px;
    right: 10px;
    left: 10px;
    width: auto;
    border-radius: 14px;
  }

  .s50-dash-header {
    padding: 12px 14px;
  }

  .s50-dash-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .s50-dash-username {
    font-size: 12px;
  }

  .s50-dash-stats {
    padding: 10px 14px 8px;
    gap: 6px;
  }

  .s50-dash-stat {
    padding: 8px 4px;
  }

  .s50-dash-stat-value {
    font-size: 14px;
  }

  .s50-dash-chart {
    padding: 6px 14px 12px;
  }

  .s50-dash-chart-bars {
    height: 40px;
  }

  .s50-dash-actions {
    padding: 10px 14px 14px;
    gap: 5px;
  }

  .s50-dash-action {
    padding: 8px 4px;
  }

  .s50-dash-action-icon {
    font-size: 16px;
  }

  .s50-dash-action-label {
    font-size: 8px;
  }

  .s50-dash-bubble {
    bottom: 12px;
    right: 12px;
    width: 46px;
    height: 46px;
    font-size: 18px;
  }
}


@media (max-width: 480px) {

  .s50-vip-modal {
    border-radius: 12px;
  }

  .s50-vip-title {
    font-size: 18px;
  }

  .s50-vip-benefit {
    gap: 8px;
    padding: 8px 10px;
  }

  .s50-jackpot-tier {
    padding: 2px 6px;
    border-radius: 6px;
  }

  .s50-jackpot-amount {
    font-size: 11px;
  }

  .s50-dash-stats {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
  }
}


/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .s50-vip-modal {
    animation: none;
  }
  #playerDashWidget {
    animation: none;
  }
  .s50-vip-sparkle {
    animation: none;
    display: none;
  }
  .s50-vip-crown {
    animation: none;
  }
  .s50-jackpot-star {
    animation: none;
  }
  .s50-jackpot-bg-glow {
    animation: none;
  }
  .s50-jackpot-winners-track {
    animation: none;
  }
  .s50-odometer-digit-inner {
    transition-duration: 0.1s;
  }
  .s50-dash-body {
    transition-duration: 0.1s;
  }
  .s50-dash-chart-bar {
    animation: none;
  }
  .s50-vip-cta {
    animation: none;
  }
  .s50-vip-tier-badge {
    animation: none;
  }
}

/* ─── Session Timer Display (Responsible Gambling) ─────────────────────── */
#sessionTimerDisplay {
    display: none;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #94a3b8;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    padding: 4px 9px;
    white-space: nowrap;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
    cursor: default;
    user-select: none;
}
#sessionTimerDisplay.session-timer-warning {
    color: #f59e0b;
    border-color: rgba(245,158,11,0.4);
    background: rgba(245,158,11,0.08);
}
#sessionTimerDisplay.session-timer-danger {
    color: #ef4444;
    border-color: rgba(239,68,68,0.5);
    background: rgba(239,68,68,0.10);
    animation: _sessionDangerPulse 1.2s ease-in-out infinite;
}
@keyframes _sessionDangerPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.65; }
}
@media (max-width: 650px) {
    #sessionTimerDisplay { display: none !important; }
}

/* ─── Per-Game CSS Styles (30 Slot Games) ─────────────────────────────── */

/* GAME 1: Golden Vault Pharaoh (golden_vault_pharaoh) */
.slot-modal-fullscreen[data-game-id="golden_vault_pharaoh"] .reels-container {
    border: 8px solid #c49b1a;
    background: linear-gradient(180deg, rgb(24, 20, 2) 0%, rgb(12, 10, 1) 100%);
    box-shadow: 0 0 40px rgba(196, 155, 26, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="golden_vault_pharaoh"] .reel-cell {
    background: linear-gradient(135deg, rgba(196, 155, 26, 0.12) 0%, rgba(196, 155, 26, 0.1) 100%);
    border: 1px solid rgba(196, 155, 26, 0.4);
    box-shadow: inset 0 0 8px rgba(196, 155, 26, 0.1);
}

/* GAME 2: Mythic Olympiad (mythic_olympiad) */
.slot-modal-fullscreen[data-game-id="mythic_olympiad"] .reels-container {
    border: 8px solid #7c3aed;
    background: linear-gradient(180deg, rgb(12, 6, 20) 0%, rgb(6, 3, 10) 100%);
    box-shadow: 0 0 40px rgba(124, 58, 237, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="mythic_olympiad"] .reel-cell {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12) 0%, rgba(124, 58, 237, 0.1) 100%);
    border: 1px solid rgba(124, 58, 237, 0.4);
    box-shadow: inset 0 0 8px rgba(124, 58, 237, 0.1);
}

/* GAME 3: Neon Nexus (neon_nexus) */
.slot-modal-fullscreen[data-game-id="neon_nexus"] .reels-container {
    border: 8px solid #ec4899;
    background: linear-gradient(180deg, rgb(20, 5, 14) 0%, rgb(10, 2, 7) 100%);
    box-shadow: 0 0 40px rgba(236, 72, 153, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="neon_nexus"] .reel-cell {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.12) 0%, rgba(236, 72, 153, 0.1) 100%);
    border: 1px solid rgba(236, 72, 153, 0.4);
    box-shadow: inset 0 0 8px rgba(236, 72, 153, 0.1);
}

/* GAME 4: Anglers Fortune (anglers_fortune) */
.slot-modal-fullscreen[data-game-id="anglers_fortune"] .reels-container {
    border: 8px solid #059669;
    background: linear-gradient(180deg, rgb(2, 17, 11) 0%, rgb(1, 8, 5) 100%);
    box-shadow: 0 0 40px rgba(5, 150, 105, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="anglers_fortune"] .reel-cell {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.12) 0%, rgba(5, 150, 105, 0.1) 100%);
    border: 1px solid rgba(5, 150, 105, 0.4);
    box-shadow: inset 0 0 8px rgba(5, 150, 105, 0.1);
}

/* GAME 5: Mecha Warriors (mecha_warriors) */
.slot-modal-fullscreen[data-game-id="mecha_warriors"] .reels-container {
    border: 8px solid #dc2626;
    background: linear-gradient(180deg, rgb(22, 3, 3) 0%, rgb(11, 1, 1) 100%);
    box-shadow: 0 0 40px rgba(220, 38, 38, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="mecha_warriors"] .reel-cell {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.12) 0%, rgba(220, 38, 38, 0.1) 100%);
    border: 1px solid rgba(220, 38, 38, 0.4);
    box-shadow: inset 0 0 8px rgba(220, 38, 38, 0.1);
}

/* GAME 6: Enchanted Grove (enchanted_grove) */
.slot-modal-fullscreen[data-game-id="enchanted_grove"] .reels-container {
    border: 8px solid #10b981;
    background: linear-gradient(180deg, rgb(2, 18, 12) 0%, rgb(1, 9, 6) 100%);
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="enchanted_grove"] .reel-cell {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.4);
    box-shadow: inset 0 0 8px rgba(16, 185, 129, 0.1);
}

/* GAME 7: Dragons Hoard (dragons_hoard) */
.slot-modal-fullscreen[data-game-id="dragons_hoard"] .reels-container {
    border: 8px solid #ef4444;
    background: linear-gradient(180deg, rgb(23, 7, 7) 0%, rgb(11, 3, 3) 100%);
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="dragons_hoard"] .reel-cell {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(239, 68, 68, 0.1) 100%);
    border: 1px solid rgba(239, 68, 68, 0.4);
    box-shadow: inset 0 0 8px rgba(239, 68, 68, 0.1);
}

/* GAME 8: Time Keepers Book (time_keepers_book) */
.slot-modal-fullscreen[data-game-id="time_keepers_book"] .reels-container {
    border: 8px solid #0d9488;
    background: linear-gradient(180deg, rgb(1, 18, 16) 0%, rgb(1, 9, 8) 100%);
    box-shadow: 0 0 40px rgba(13, 148, 136, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="time_keepers_book"] .reel-cell {
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.12) 0%, rgba(13, 148, 136, 0.1) 100%);
    border: 1px solid rgba(13, 148, 136, 0.4);
    box-shadow: inset 0 0 8px rgba(13, 148, 136, 0.1);
}

/* GAME 9: Cyber Rebellion (cyber_rebellion) */
.slot-modal-fullscreen[data-game-id="cyber_rebellion"] .reels-container {
    border: 8px solid #84cc16;
    background: linear-gradient(180deg, rgb(15, 17, 1) 0%, rgb(7, 8, 0) 100%);
    box-shadow: 0 0 40px rgba(132, 204, 22, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="cyber_rebellion"] .reel-cell {
    background: linear-gradient(135deg, rgba(132, 204, 22, 0.12) 0%, rgba(132, 204, 22, 0.1) 100%);
    border: 1px solid rgba(132, 204, 22, 0.4);
    box-shadow: inset 0 0 8px rgba(132, 204, 22, 0.1);
}

/* GAME 10: Volcano Riches (volcano_riches) */
.slot-modal-fullscreen[data-game-id="volcano_riches"] .reels-container {
    border: 8px solid #ea580c;
    background: linear-gradient(180deg, rgb(21, 9, 1) 0%, rgb(10, 4, 0) 100%);
    box-shadow: 0 0 40px rgba(234, 88, 12, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="volcano_riches"] .reel-cell {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.12) 0%, rgba(234, 88, 12, 0.1) 100%);
    border: 1px solid rgba(234, 88, 12, 0.4);
    box-shadow: inset 0 0 8px rgba(234, 88, 12, 0.1);
}

/* GAME 11: Sunken Treasure (sunken_treasure) */
.slot-modal-fullscreen[data-game-id="sunken_treasure"] .reels-container {
    border: 8px solid #1e40af;
    background: linear-gradient(180deg, rgb(3, 8, 18) 0%, rgb(1, 4, 9) 100%);
    box-shadow: 0 0 40px rgba(30, 64, 175, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="sunken_treasure"] .reel-cell {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.12) 0%, rgba(30, 64, 175, 0.1) 100%);
    border: 1px solid rgba(30, 64, 175, 0.4);
    box-shadow: inset 0 0 8px rgba(30, 64, 175, 0.1);
}

/* GAME 12: Wild Stallion (wild_stallion) */
.slot-modal-fullscreen[data-game-id="wild_stallion"] .reels-container {
    border: 8px solid #d97706;
    background: linear-gradient(180deg, rgb(20, 12, 0) 0%, rgb(10, 6, 0) 100%);
    box-shadow: 0 0 40px rgba(217, 119, 6, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="wild_stallion"] .reel-cell {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.12) 0%, rgba(217, 119, 6, 0.1) 100%);
    border: 1px solid rgba(217, 119, 6, 0.4);
    box-shadow: inset 0 0 8px rgba(217, 119, 6, 0.1);
}

/* GAME 13: Celestial Cosmos (celestial_cosmos) */
.slot-modal-fullscreen[data-game-id="celestial_cosmos"] .reels-container {
    border: 8px solid #a855f7;
    background: linear-gradient(180deg, rgb(14, 4, 20) 0%, rgb(7, 2, 10) 100%);
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="celestial_cosmos"] .reel-cell {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(168, 85, 247, 0.1) 100%);
    border: 1px solid rgba(168, 85, 247, 0.4);
    box-shadow: inset 0 0 8px rgba(168, 85, 247, 0.1);
}

/* GAME 14: Jade Prosperity (jade_prosperity) */
.slot-modal-fullscreen[data-game-id="jade_prosperity"] .reels-container {
    border: 8px solid #059669;
    background: linear-gradient(180deg, rgb(2, 17, 11) 0%, rgb(1, 8, 5) 100%);
    box-shadow: 0 0 40px rgba(5, 150, 105, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="jade_prosperity"] .reel-cell {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.12) 0%, rgba(5, 150, 105, 0.1) 100%);
    border: 1px solid rgba(5, 150, 105, 0.4);
    box-shadow: inset 0 0 8px rgba(5, 150, 105, 0.1);
}

/* GAME 15: Inferno Fiesta (inferno_fiesta) */
.slot-modal-fullscreen[data-game-id="inferno_fiesta"] .reels-container {
    border: 8px solid #dc2626;
    background: linear-gradient(180deg, rgb(22, 3, 3) 0%, rgb(11, 1, 1) 100%);
    box-shadow: 0 0 40px rgba(220, 38, 38, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="inferno_fiesta"] .reel-cell {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.12) 0%, rgba(220, 38, 38, 0.1) 100%);
    border: 1px solid rgba(220, 38, 38, 0.4);
    box-shadow: inset 0 0 8px rgba(220, 38, 38, 0.1);
}

/* GAME 16: Mystic Wolf (mystic_wolf) */
.slot-modal-fullscreen[data-game-id="mystic_wolf"] .reels-container {
    border: 8px solid #94a3b8;
    background: linear-gradient(180deg, rgb(11, 12, 13) 0%, rgb(5, 6, 6) 100%);
    box-shadow: 0 0 40px rgba(148, 163, 184, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="mystic_wolf"] .reel-cell {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.12) 0%, rgba(148, 163, 184, 0.1) 100%);
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: inset 0 0 8px rgba(148, 163, 184, 0.1);
}

/* GAME 17: Ancient Alchemist (ancient_alchemist) */
.slot-modal-fullscreen[data-game-id="ancient_alchemist"] .reels-container {
    border: 8px solid #d97706;
    background: linear-gradient(180deg, rgb(20, 12, 0) 0%, rgb(10, 6, 0) 100%);
    box-shadow: 0 0 40px rgba(217, 119, 6, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="ancient_alchemist"] .reel-cell {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.12) 0%, rgba(217, 119, 6, 0.1) 100%);
    border: 1px solid rgba(217, 119, 6, 0.4);
    box-shadow: inset 0 0 8px rgba(217, 119, 6, 0.1);
}

/* GAME 18: Thunder Titan (thunder_titan) */
.slot-modal-fullscreen[data-game-id="thunder_titan"] .reels-container {
    border: 8px solid #2563eb;
    background: linear-gradient(180deg, rgb(4, 9, 21) 0%, rgb(2, 4, 10) 100%);
    box-shadow: 0 0 40px rgba(37, 99, 235, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="thunder_titan"] .reel-cell {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0.1) 100%);
    border: 1px solid rgba(37, 99, 235, 0.4);
    box-shadow: inset 0 0 8px rgba(37, 99, 235, 0.1);
}

/* GAME 19: Carnival Chaos (carnival_chaos) */
.slot-modal-fullscreen[data-game-id="carnival_chaos"] .reels-container {
    border: 8px solid #f43f5e;
    background: linear-gradient(180deg, rgb(21, 5, 10) 0%, rgb(10, 2, 5) 100%);
    box-shadow: 0 0 40px rgba(244, 63, 94, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="carnival_chaos"] .reel-cell {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.12) 0%, rgba(244, 63, 94, 0.1) 100%);
    border: 1px solid rgba(244, 63, 94, 0.4);
    box-shadow: inset 0 0 8px rgba(244, 63, 94, 0.1);
}

/* GAME 20: Safari King (safari_king) */
.slot-modal-fullscreen[data-game-id="safari_king"] .reels-container {
    border: 8px solid #ca8a04;
    background: linear-gradient(180deg, rgb(16, 13, 0) 0%, rgb(8, 6, 0) 100%);
    box-shadow: 0 0 40px rgba(202, 138, 4, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="safari_king"] .reel-cell {
    background: linear-gradient(135deg, rgba(202, 138, 4, 0.12) 0%, rgba(202, 138, 4, 0.1) 100%);
    border: 1px solid rgba(202, 138, 4, 0.4);
    box-shadow: inset 0 0 8px rgba(202, 138, 4, 0.1);
}

/* GAME 21: Crystal Royals (crystal_royals) */
.slot-modal-fullscreen[data-game-id="crystal_royals"] .reels-container {
    border: 8px solid #93c5fd;
    background: linear-gradient(180deg, rgb(7, 15, 20) 0%, rgb(3, 7, 10) 100%);
    box-shadow: 0 0 40px rgba(147, 197, 253, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="crystal_royals"] .reel-cell {
    background: linear-gradient(135deg, rgba(147, 197, 253, 0.12) 0%, rgba(147, 197, 253, 0.1) 100%);
    border: 1px solid rgba(147, 197, 253, 0.4);
    box-shadow: inset 0 0 8px rgba(147, 197, 253, 0.1);
}

/* GAME 22: Infernal Depths (infernal_depths) */
.slot-modal-fullscreen[data-game-id="infernal_depths"] .reels-container {
    border: 8px solid #b91c1c;
    background: linear-gradient(180deg, rgb(18, 2, 2) 0%, rgb(9, 1, 1) 100%);
    box-shadow: 0 0 40px rgba(185, 28, 28, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="infernal_depths"] .reel-cell {
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.12) 0%, rgba(185, 28, 28, 0.1) 100%);
    border: 1px solid rgba(185, 28, 28, 0.4);
    box-shadow: inset 0 0 8px rgba(185, 28, 28, 0.1);
}

/* GAME 23: Rainbow Riches Quest (rainbow_riches_quest) */
.slot-modal-fullscreen[data-game-id="rainbow_riches_quest"] .reels-container {
    border: 8px solid #16a34a;
    background: linear-gradient(180deg, rgb(3, 18, 8) 0%, rgb(1, 9, 4) 100%);
    box-shadow: 0 0 40px rgba(22, 163, 74, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="rainbow_riches_quest"] .reel-cell {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.12) 0%, rgba(22, 163, 74, 0.1) 100%);
    border: 1px solid rgba(22, 163, 74, 0.4);
    box-shadow: inset 0 0 8px rgba(22, 163, 74, 0.1);
}

/* GAME 24: Steampunk Gears (steampunk_gears) */
.slot-modal-fullscreen[data-game-id="steampunk_gears"] .reels-container {
    border: 8px solid #b45309;
    background: linear-gradient(180deg, rgb(18, 9, 1) 0%, rgb(9, 4, 0) 100%);
    box-shadow: 0 0 40px rgba(180, 83, 9, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="steampunk_gears"] .reel-cell {
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.12) 0%, rgba(180, 83, 9, 0.1) 100%);
    border: 1px solid rgba(180, 83, 9, 0.4);
    box-shadow: inset 0 0 8px rgba(180, 83, 9, 0.1);
}

/* GAME 25: Phoenix Rising (phoenix_rising) */
.slot-modal-fullscreen[data-game-id="phoenix_rising"] .reels-container {
    border: 8px solid #f97316;
    background: linear-gradient(180deg, rgb(20, 10, 2) 0%, rgb(10, 5, 1) 100%);
    box-shadow: 0 0 40px rgba(249, 115, 22, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="phoenix_rising"] .reel-cell {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, rgba(249, 115, 22, 0.1) 100%);
    border: 1px solid rgba(249, 115, 22, 0.4);
    box-shadow: inset 0 0 8px rgba(249, 115, 22, 0.1);
}

/* GAME 26: Arctic Frost (arctic_frost) */
.slot-modal-fullscreen[data-game-id="arctic_frost"] .reels-container {
    border: 8px solid #0ea5e9;
    background: linear-gradient(180deg, rgb(2, 14, 20) 0%, rgb(1, 7, 10) 100%);
    box-shadow: 0 0 40px rgba(14, 165, 233, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="arctic_frost"] .reel-cell {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(14, 165, 233, 0.1) 100%);
    border: 1px solid rgba(14, 165, 233, 0.4);
    box-shadow: inset 0 0 8px rgba(14, 165, 233, 0.1);
}

/* GAME 27: Urban Rooftop (urban_rooftop) */
.slot-modal-fullscreen[data-game-id="urban_rooftop"] .reels-container {
    border: 8px solid #c084fc;
    background: linear-gradient(180deg, rgb(16, 6, 20) 0%, rgb(8, 3, 10) 100%);
    box-shadow: 0 0 40px rgba(192, 132, 252, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="urban_rooftop"] .reel-cell {
    background: linear-gradient(135deg, rgba(192, 132, 252, 0.12) 0%, rgba(192, 132, 252, 0.1) 100%);
    border: 1px solid rgba(192, 132, 252, 0.4);
    box-shadow: inset 0 0 8px rgba(192, 132, 252, 0.1);
}

/* GAME 28: Enchanted Maze (enchanted_maze) */
.slot-modal-fullscreen[data-game-id="enchanted_maze"] .reels-container {
    border: 8px solid #7c3aed;
    background: linear-gradient(180deg, rgb(12, 6, 20) 0%, rgb(6, 3, 10) 100%);
    box-shadow: 0 0 40px rgba(124, 58, 237, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="enchanted_maze"] .reel-cell {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12) 0%, rgba(124, 58, 237, 0.1) 100%);
    border: 1px solid rgba(124, 58, 237, 0.4);
    box-shadow: inset 0 0 8px rgba(124, 58, 237, 0.1);
}

/* GAME 29: Samurai Honor (samurai_honor) */
.slot-modal-fullscreen[data-game-id="samurai_honor"] .reels-container {
    border: 8px solid #dc2626;
    background: linear-gradient(180deg, rgb(22, 3, 3) 0%, rgb(11, 1, 1) 100%);
    box-shadow: 0 0 40px rgba(220, 38, 38, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="samurai_honor"] .reel-cell {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.12) 0%, rgba(220, 38, 38, 0.1) 100%);
    border: 1px solid rgba(220, 38, 38, 0.4);
    box-shadow: inset 0 0 8px rgba(220, 38, 38, 0.1);
}

/* GAME 30: Mega Diamond Rush (mega_diamond_rush) */
.slot-modal-fullscreen[data-game-id="mega_diamond_rush"] .reels-container {
    border: 8px solid #06b6d4;
    background: linear-gradient(180deg, rgb(1, 16, 18) 0%, rgb(0, 8, 9) 100%);
    box-shadow: 0 0 40px rgba(6, 182, 212, 0.3), inset 0 0 60px rgba(0,0,0,0.9);
}
.slot-modal-fullscreen[data-game-id="mega_diamond_rush"] .reel-cell {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(6, 182, 212, 0.1) 100%);
    border: 1px solid rgba(6, 182, 212, 0.4);
    box-shadow: inset 0 0 8px rgba(6, 182, 212, 0.1);
}

/* ─── visual-overhaul.css (2/4) ─── */
/* ============================================================
   ROYAL SLOTS CASINO - VISUAL OVERHAUL
   Comprehensive CSS redesign for premium game presentation
   ============================================================ */

:root {
  /* Provider Brand Colors */
  --color-novaspin-primary: #00d4ff;
  --color-novaspin-secondary: #0099cc;
  --color-celestial-primary: #ffd700;
  --color-celestial-secondary: #ffed4e;
  --color-ironreel-primary: #d4a574;
  --color-ironreel-secondary: #8b6914;
  --color-goldenedge-primary: #ff69b4;
  --color-goldenedge-secondary: #ff1493;
  --color-vaultx-primary: #a0a0a0;
  --color-vaultx-secondary: #ffa500;
  --color-solstice-primary: #ff4444;
  --color-solstice-secondary: #ffaa00;
  --color-phantomworks-primary: #9933ff;
  --color-phantomworks-secondary: #cc0044;
  --color-arcadeforge-primary: #00ff00;
  --color-arcadeforge-secondary: #ff00ff;

  /* Gradient Overlays */
  --gradient-egyptian: linear-gradient(135deg, rgba(184, 134, 11, 0.15), rgba(218, 165, 32, 0.15));
  --gradient-ocean: linear-gradient(135deg, rgba(0, 105, 148, 0.15), rgba(30, 144, 255, 0.15));
  --gradient-norse: linear-gradient(135deg, rgba(47, 79, 147, 0.15), rgba(176, 196, 222, 0.15));
  --gradient-fire: linear-gradient(135deg, rgba(255, 69, 0, 0.15), rgba(255, 140, 0, 0.15));
  --gradient-space: linear-gradient(135deg, rgba(25, 25, 112, 0.15), rgba(138, 43, 226, 0.15));
  --gradient-candy: linear-gradient(135deg, rgba(255, 105, 180, 0.15), rgba(255, 182, 193, 0.15));
  --gradient-gothic: linear-gradient(135deg, rgba(47, 47, 47, 0.15), rgba(139, 0, 0, 0.15));
  --gradient-western: linear-gradient(135deg, rgba(139, 90, 43, 0.15), rgba(210, 180, 140, 0.15));
}

/* ============================================================
   1. LOBBY GAME CARDS - BASE STYLES
   ============================================================ */

.game-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  perspective: 1000px;
  transform-style: preserve-3d;
}

.game-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 2;
}

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

/* 3D Tilt effect on hover */
.game-card:hover {
  transform: rotateX(5deg) rotateY(-8deg) scale(1.05);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* Inner shadow that moves with tilt */
.game-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 3;
}

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

/* ============================================================
   2. PROVIDER ANIMATED BORDERS - NOVASPIN
   ============================================================ */

.game-card[data-provider="novaspin"],
.provider-novaspin {
  border: 2px solid var(--color-novaspin-primary);
  box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.1), 0 0 20px rgba(0, 212, 255, 0.2);
}

.game-card[data-provider="novaspin"]::before,
.provider-novaspin::before {
  animation: novaspin-scan 3s linear infinite;
}

@keyframes novaspin-scan {
  0% {
    box-shadow: inset 0 0 0 2px var(--color-novaspin-primary),
                inset -200px 0 20px -100px rgba(0, 212, 255, 0.6);
  }
  100% {
    box-shadow: inset 0 0 0 2px var(--color-novaspin-primary),
                inset 200px 0 20px -100px rgba(0, 212, 255, 0.6);
  }
}

/* ============================================================
   3. PROVIDER ANIMATED BORDERS - CELESTIAL
   ============================================================ */

.game-card[data-provider="celestial"],
.provider-celestial {
  border: 2px solid var(--color-celestial-primary);
  box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.1), 0 0 25px rgba(255, 215, 0, 0.15);
}

.game-card[data-provider="celestial"]::before,
.provider-celestial::before {
  animation: celestial-shimmer 4s ease-in-out infinite;
}

@keyframes celestial-shimmer {
  0%, 100% {
    background: linear-gradient(135deg, transparent, rgba(255, 215, 0, 0.3), transparent);
    background-position: 0% 0%;
  }
  50% {
    background: linear-gradient(45deg, transparent, rgba(255, 237, 74, 0.5), transparent);
    background-position: 100% 100%;
  }
}

/* ============================================================
   4. PROVIDER ANIMATED BORDERS - IRONREEL
   ============================================================ */

.game-card[data-provider="ironreel"],
.provider-ironreel {
  border: 2px solid var(--color-ironreel-primary);
  box-shadow: inset 0 0 20px rgba(212, 165, 116, 0.1), 0 0 20px rgba(212, 165, 116, 0.15);
}

.game-card[data-provider="ironreel"]::before,
.provider-ironreel::before {
  animation: ironreel-ember 2.5s ease-in-out infinite;
}

@keyframes ironreel-ember {
  0%, 100% {
    box-shadow: inset 0 0 10px rgba(212, 165, 116, 0.4),
                inset -20px -20px 30px rgba(139, 105, 20, 0.3);
  }
  50% {
    box-shadow: inset 0 0 20px rgba(212, 165, 116, 0.7),
                inset 20px 20px 30px rgba(255, 140, 0, 0.3);
  }
}

/* ============================================================
   5. PROVIDER ANIMATED BORDERS - GOLDENEDGE
   ============================================================ */

.game-card[data-provider="goldenedge"],
.provider-goldenedge {
  border: 2px solid transparent;
  background: linear-gradient(90deg, var(--color-goldenedge-primary), var(--color-goldenedge-secondary)) border-box;
  box-shadow: inset 0 0 20px rgba(255, 105, 180, 0.1), 0 0 30px rgba(255, 105, 180, 0.2);
}

.game-card[data-provider="goldenedge"]::before,
.provider-goldenedge::before {
  animation: goldenedge-rotate 6s linear infinite;
}

@keyframes goldenedge-rotate {
  0% {
    background: conic-gradient(from 0deg, var(--color-goldenedge-primary), var(--color-goldenedge-secondary), var(--color-goldenedge-primary));
  }
  100% {
    background: conic-gradient(from 360deg, var(--color-goldenedge-primary), var(--color-goldenedge-secondary), var(--color-goldenedge-primary));
  }
}

/* ============================================================
   6. PROVIDER ANIMATED BORDERS - VAULTX
   ============================================================ */

.game-card[data-provider="vaultx"],
.provider-vaultx {
  border: 3px solid var(--color-vaultx-primary);
  box-shadow: inset 0 0 15px rgba(160, 160, 160, 0.2),
              inset 0 0 5px rgba(255, 165, 0, 0.1),
              0 0 20px rgba(160, 160, 160, 0.15);
}

.game-card[data-provider="vaultx"]::before,
.provider-vaultx::before {
  animation: vaultx-mechanical 3s ease-in-out infinite;
  border: 1px dashed var(--color-vaultx-secondary);
  border-radius: 4px;
}

@keyframes vaultx-mechanical {
  0%, 100% {
    box-shadow: inset 0 0 10px rgba(160, 160, 160, 0.3),
                inset 3px 3px 0 rgba(255, 165, 0, 0.2);
  }
  50% {
    box-shadow: inset 0 0 20px rgba(160, 160, 160, 0.5),
                inset -3px -3px 0 rgba(255, 165, 0, 0.4);
  }
}

/* ============================================================
   7. PROVIDER ANIMATED BORDERS - SOLSTICE
   ============================================================ */

.game-card[data-provider="solstice"],
.provider-solstice {
  border: 2px solid var(--color-solstice-primary);
  box-shadow: inset 0 0 20px rgba(255, 68, 68, 0.1), 0 0 25px rgba(255, 170, 0, 0.15);
}

.game-card[data-provider="solstice"]::before,
.provider-solstice::before {
  animation: solstice-filigree 5s linear infinite;
  background: repeating-conic-gradient(from 0deg at 50% 50%, var(--color-solstice-primary) 0deg 10deg, transparent 10deg 20deg);
}

@keyframes solstice-filigree {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ============================================================
   8. PROVIDER ANIMATED BORDERS - PHANTOMWORKS
   ============================================================ */

.game-card[data-provider="phantomworks"],
.provider-phantomworks {
  border: 2px solid var(--color-phantomworks-primary);
  box-shadow: inset 0 0 20px rgba(153, 51, 255, 0.1), 0 0 30px rgba(153, 51, 255, 0.15);
}

.game-card[data-provider="phantomworks"]::before,
.provider-phantomworks::before {
  animation: phantomworks-shadow 3.5s ease-in-out infinite;
}

@keyframes phantomworks-shadow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(153, 51, 255, 0.3),
                inset 0 0 15px rgba(204, 0, 68, 0.1);
  }
  50% {
    box-shadow: 0 0 30px rgba(204, 0, 68, 0.6),
                inset 0 0 25px rgba(153, 51, 255, 0.3);
  }
}

/* ============================================================
   9. PROVIDER ANIMATED BORDERS - ARCADEFORGE
   ============================================================ */

.game-card[data-provider="arcadeforge"],
.provider-arcadeforge {
  border: 2px solid transparent;
  animation: arcadeforge-border-color 3s ease-in-out infinite;
}

.game-card[data-provider="arcadeforge"]::before,
.provider-arcadeforge::before {
  animation: arcadeforge-cycle 2s ease-in-out infinite;
}

@keyframes arcadeforge-border-color {
  0%, 100% {
    border-color: var(--color-arcadeforge-primary);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.3), inset 0 0 15px rgba(0, 255, 0, 0.1);
  }
  33% {
    border-color: var(--color-arcadeforge-secondary);
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.3), inset 0 0 15px rgba(255, 0, 255, 0.1);
  }
  66% {
    border-color: #00ffff;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3), inset 0 0 15px rgba(0, 255, 255, 0.1);
  }
}

@keyframes arcadeforge-cycle {
  0% {
    background-color: rgba(0, 255, 0, 0.05);
  }
  33% {
    background-color: rgba(255, 0, 255, 0.05);
  }
  66% {
    background-color: rgba(0, 255, 255, 0.05);
  }
  100% {
    background-color: rgba(0, 255, 0, 0.05);
  }
}

/* ============================================================
   10. GAME TAG ANIMATIONS - JACKPOT
   ============================================================ */

.game-card-jackpot {
  position: relative;
}

.game-card-jackpot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.4) 0%, transparent 25%),
    radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.3) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.2) 0%, transparent 30%);
  animation: jackpot-shimmer 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}

@keyframes jackpot-shimmer {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
}

/* ============================================================
   11. GAME TAG ANIMATIONS - HOT
   ============================================================ */

.game-card-hot {
  position: relative;
}

.game-card-hot::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(255, 69, 0, 0.3), transparent);
  animation: hot-flicker 1.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes hot-flicker {
  0%, 100% {
    opacity: 0.3;
    clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 45%);
  }
  25% {
    opacity: 0.6;
    clip-path: polygon(0 100%, 100% 100%, 100% 52%, 0 48%);
  }
  50% {
    opacity: 0.4;
    clip-path: polygon(0 100%, 100% 100%, 100% 48%, 0 52%);
  }
  75% {
    opacity: 0.65;
    clip-path: polygon(0 100%, 100% 100%, 100% 51%, 0 49%);
  }
}

/* ============================================================
   12. GAME TAG ANIMATIONS - NEW
   ============================================================ */

.game-card-new {
  position: relative;
}

.game-card-new::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(34, 255, 100, 0.3);
  animation: new-pulse-ring 2s ease-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes new-pulse-ring {
  0% {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
  100% {
    width: 130%;
    height: 130%;
    opacity: 0;
  }
}

/* ============================================================
   13. GAME CARD HOVER FLOATING PARTICLES
   ============================================================ */

.game-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
    radial-gradient(2px 2px at 60px 70px, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 50px 50px, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)),
    radial-gradient(2px 2px at 90px 10px, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0;
  animation: floating-particles 8s ease-in-out infinite;
  pointer-events: none;
}

.game-card:hover::before {
  animation: floating-particles 8s ease-in-out infinite;
  opacity: 0.6;
}

@keyframes floating-particles {
  0%, 100% {
    background-position: 0 0;
  }
  50% {
    background-position: -20px -20px;
  }
}

/* ============================================================
   14. PER-GAME ATMOSPHERIC EFFECTS - EGYPTIAN
   ============================================================ */

.game-card[data-game-id*="book_dead"],
.game-card[data-game-id*="pharaoh"],
.game-card[data-game-id*="cleopatra"],
.game-card[data-game-id*="golden_pharaoh"] {
  background: var(--gradient-egyptian);
}

.game-card[data-game-id*="book_dead"]::before,
.game-card[data-game-id*="pharaoh"]::before,
.game-card[data-game-id*="cleopatra"]::before,
.game-card[data-game-id*="golden_pharaoh"]::before {
  animation: egyptian-drift 6s ease-in-out infinite !important;
}

@keyframes egyptian-drift {
  0%, 100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 5% 5%;
  }
}

/* ============================================================
   15. PER-GAME ATMOSPHERIC EFFECTS - OCEAN
   ============================================================ */

.game-card[data-game-id*="big_bass"],
.game-card[data-game-id*="bass_splash"],
.game-card[data-game-id*="wild_deep"],
.game-card[data-game-id*="razor_shark"] {
  background: var(--gradient-ocean);
}

.game-card[data-game-id*="big_bass"]::before,
.game-card[data-game-id*="bass_splash"]::before,
.game-card[data-game-id*="wild_deep"]::before,
.game-card[data-game-id*="razor_shark"]::before {
  animation: bubble-float 5s ease-in infinite !important;
}

@keyframes bubble-float {
  0% {
    transform: translateY(100%) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-100%) translateX(20px);
    opacity: 0;
  }
}

/* ============================================================
   16. PER-GAME ATMOSPHERIC EFFECTS - NORSE
   ============================================================ */

.game-card[data-game-id*="viking"],
.game-card[data-game-id*="norse"],
.game-card[data-game-id*="gemhalla"],
.game-card[data-game-id*="loki"] {
  background: var(--gradient-norse);
}

.game-card[data-game-id*="viking"]::before,
.game-card[data-game-id*="norse"]::before,
.game-card[data-game-id*="gemhalla"]::before,
.game-card[data-game-id*="loki"]::before {
  animation: ice-shimmer 4s ease-in-out infinite !important;
}

@keyframes ice-shimmer {
  0%, 100% {
    background: linear-gradient(90deg, transparent, rgba(176, 196, 222, 0.3), transparent);
    background-position: -100% 0;
  }
  50% {
    background: linear-gradient(90deg, transparent, rgba(176, 196, 222, 0.5), transparent);
    background-position: 100% 0;
  }
}

/* ============================================================
   17. PER-GAME ATMOSPHERIC EFFECTS - FIRE
   ============================================================ */

.game-card[data-game-id*="dragon_megafire"],
.game-card[data-game-id*="dragon_forge"],
.game-card[data-game-id*="crown_fire"],
.game-card[data-game-id*="fire_hole"] {
  background: var(--gradient-fire);
}

.game-card[data-game-id*="dragon_megafire"]::before,
.game-card[data-game-id*="dragon_forge"]::before,
.game-card[data-game-id*="crown_fire"]::before,
.game-card[data-game-id*="fire_hole"]::before {
  animation: ember-float 4s ease-in-out infinite !important;
}

@keyframes ember-float {
  0% {
    transform: translateY(0) translateX(-10px);
    opacity: 0;
  }
  20% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-100%) translateX(10px);
    opacity: 0;
  }
}

/* ============================================================
   18. PER-GAME ATMOSPHERIC EFFECTS - SPACE
   ============================================================ */

.game-card[data-game-id*="starburst"],
.game-card[data-game-id*="quantum"],
.game-card[data-game-id*="neon_nights"],
.game-card[data-game-id*="nova"] {
  background: var(--gradient-space);
}

.game-card[data-game-id*="starburst"]::before,
.game-card[data-game-id*="quantum"]::before,
.game-card[data-game-id*="neon_nights"]::before,
.game-card[data-game-id*="nova"]::before {
  animation: star-twinkle 3s ease-in-out infinite !important;
}

@keyframes star-twinkle {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.9;
  }
}

/* ============================================================
   19. PER-GAME ATMOSPHERIC EFFECTS - CANDY
   ============================================================ */

.game-card[data-game-id*="sugar_rush"],
.game-card[data-game-id*="fruit_party"],
.game-card[data-game-id*="jammin"],
.game-card[data-game-id*="sweet_bonanza"] {
  background: var(--gradient-candy);
}

.game-card[data-game-id*="sugar_rush"]::before,
.game-card[data-game-id*="fruit_party"]::before,
.game-card[data-game-id*="jammin"]::before,
.game-card[data-game-id*="sweet_bonanza"]::before {
  animation: candy-rain 5s ease-in infinite !important;
}

@keyframes candy-rain {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* ============================================================
   20. PER-GAME ATMOSPHERIC EFFECTS - GOTHIC
   ============================================================ */

.game-card[data-game-id*="immortal_blood"],
.game-card[data-game-id*="crimson_fang"],
.game-card[data-game-id*="demon_chambers"] {
  background: var(--gradient-gothic);
}

.game-card[data-game-id*="immortal_blood"]::before,
.game-card[data-game-id*="crimson_fang"]::before,
.game-card[data-game-id*="demon_chambers"]::before {
  animation: blood-drip 3.5s ease-in-out infinite !important;
}

@keyframes blood-drip {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  50% {
    clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* ============================================================
   21. PER-GAME ATMOSPHERIC EFFECTS - WESTERN
   ============================================================ */

.game-card[data-game-id*="wanted_dead"],
.game-card[data-game-id*="san_quentin"],
.game-card[data-game-id*="black_ops_heist"] {
  background: var(--gradient-western);
}

.game-card[data-game-id*="wanted_dead"]::before,
.game-card[data-game-id*="san_quentin"]::before,
.game-card[data-game-id*="black_ops_heist"]::before {
  animation: dust-mote 6s ease-in-out infinite !important;
}

@keyframes dust-mote {
  0%, 100% {
    background-position: 0 0;
  }
  50% {
    background-position: 20px 20px;
  }
}

/* ============================================================
   22. SLOT PLAY SCREEN - BASE ENHANCEMENTS
   ============================================================ */

.slot-play-screen {
  position: relative;
  overflow: hidden;
}

.slot-play-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}

.slot-chrome {
  position: relative;
  z-index: 10;
}

/* ============================================================
   23. PROVIDER CHROME - NOVASPIN
   ============================================================ */

.slot-chrome-novaspin {
  background: linear-gradient(135deg, #001a2d 0%, #003d66 100%);
  border: 3px solid var(--color-novaspin-primary);
  box-shadow: 0 0 40px rgba(0, 212, 255, 0.3),
              inset 0 0 30px rgba(0, 212, 255, 0.1);
}

.slot-chrome-novaspin::before,
.slot-chrome-novaspin::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid var(--color-novaspin-primary);
}

.slot-chrome-novaspin::before {
  top: 10px;
  left: 10px;
  border-right: none;
  border-bottom: none;
  box-shadow: inset 0 0 10px rgba(0, 212, 255, 0.3);
  animation: corner-glow 2s ease-in-out infinite;
}

.slot-chrome-novaspin::after {
  bottom: 10px;
  right: 10px;
  border-left: none;
  border-top: none;
  box-shadow: inset 0 0 10px rgba(0, 212, 255, 0.3);
  animation: corner-glow 2s ease-in-out infinite 0.5s;
}

@keyframes corner-glow {
  0%, 100% {
    box-shadow: inset 0 0 5px rgba(0, 212, 255, 0.2);
  }
  50% {
    box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.6);
  }
}

/* ============================================================
   24. PROVIDER CHROME - CELESTIAL
   ============================================================ */

.slot-chrome-celestial {
  background: linear-gradient(135deg, #332200 0%, #664d00 100%);
  border: 3px solid var(--color-celestial-primary);
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.3),
              inset 0 0 30px rgba(255, 215, 0, 0.1);
  position: relative;
}

.slot-chrome-celestial::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 215, 0, 0.05) 10px,
    rgba(255, 215, 0, 0.05) 20px
  );
  animation: celestial-pattern 6s linear infinite;
  pointer-events: none;
}

@keyframes celestial-pattern {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 40px;
  }
}

/* ============================================================
   25. PROVIDER CHROME - IRONREEL
   ============================================================ */

.slot-chrome-ironreel {
  background: linear-gradient(135deg, #1a1410 0%, #3d2817 100%);
  border: 4px solid var(--color-ironreel-primary);
  box-shadow: 0 0 35px rgba(212, 165, 116, 0.2),
              inset 0 0 25px rgba(212, 165, 116, 0.08);
  position: relative;
}

.slot-chrome-ironreel::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 2px solid rgba(212, 165, 116, 0.3);
  border-radius: 4px;
  animation: ironreel-frame-pulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ironreel-frame-pulse {
  0%, 100% {
    box-shadow: inset 0 0 10px rgba(212, 165, 116, 0.2);
  }
  50% {
    box-shadow: inset 0 0 25px rgba(212, 165, 116, 0.4);
  }
}

/* ============================================================
   26. PROVIDER CHROME - GOLDENEDGE
   ============================================================ */

.slot-chrome-goldenedge {
  background: linear-gradient(135deg, #330033 0%, #660066 100%);
  border: 3px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 40px rgba(255, 105, 180, 0.3),
              inset 0 0 30px rgba(255, 105, 180, 0.1);
  position: relative;
  animation: goldenedge-border-rotate 8s linear infinite;
}

@keyframes goldenedge-border-rotate {
  0% {
    border-image: linear-gradient(45deg, var(--color-goldenedge-primary), var(--color-goldenedge-secondary)) 1;
  }
  50% {
    border-image: linear-gradient(225deg, var(--color-goldenedge-primary), var(--color-goldenedge-secondary)) 1;
  }
  100% {
    border-image: linear-gradient(45deg, var(--color-goldenedge-primary), var(--color-goldenedge-secondary)) 1;
  }
}

/* ============================================================
   27. PROVIDER CHROME - VAULTX
   ============================================================ */

.slot-chrome-vaultx {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border: 4px solid var(--color-vaultx-primary);
  box-shadow: 0 0 30px rgba(160, 160, 160, 0.2),
              0 0 15px rgba(255, 165, 0, 0.1),
              inset 0 0 20px rgba(160, 160, 160, 0.05);
  position: relative;
}

.slot-chrome-vaultx::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  border: 2px dashed var(--color-vaultx-secondary);
  border-radius: 2px;
  animation: vaultx-scan-line 3s linear infinite;
  pointer-events: none;
}

@keyframes vaultx-scan-line {
  0% {
    box-shadow: inset 0 0 0 0 rgba(255, 165, 0, 0.1);
  }
  50% {
    box-shadow: inset 0 20px 20px 0 rgba(255, 165, 0, 0.2);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(255, 165, 0, 0.1);
  }
}

/* ============================================================
   28. PROVIDER CHROME - SOLSTICE
   ============================================================ */

.slot-chrome-solstice {
  background: linear-gradient(135deg, #330000 0%, #660000 100%);
  border: 3px solid var(--color-solstice-primary);
  box-shadow: 0 0 40px rgba(255, 68, 68, 0.3),
              inset 0 0 30px rgba(255, 170, 0, 0.1);
  position: relative;
}

.slot-chrome-solstice::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 170, 0, 0.05),
    rgba(255, 170, 0, 0.05) 1px,
    transparent 1px,
    transparent 2px
  );
  animation: solstice-lines 2s linear infinite;
  pointer-events: none;
}

@keyframes solstice-lines {
  0% {
    background-position-y: 0;
  }
  100% {
    background-position-y: 4px;
  }
}

/* ============================================================
   29. PROVIDER CHROME - PHANTOMWORKS
   ============================================================ */

.slot-chrome-phantomworks {
  background: linear-gradient(135deg, #1a0033 0%, #330066 100%);
  border: 3px solid var(--color-phantomworks-primary);
  box-shadow: 0 0 50px rgba(153, 51, 255, 0.3),
              0 0 20px rgba(204, 0, 68, 0.2),
              inset 0 0 30px rgba(153, 51, 255, 0.1);
  position: relative;
}

.slot-chrome-phantomworks::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%, rgba(204, 0, 68, 0.2), transparent 70%);
  animation: phantomworks-glow 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes phantomworks-glow {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
}

/* ============================================================
   30. PROVIDER CHROME - ARCADEFORGE
   ============================================================ */

.slot-chrome-arcadeforge {
  background: linear-gradient(135deg, #001a00 0%, #003300 100%);
  border: 3px solid transparent;
  animation: arcadeforge-chrome-border 3s ease-in-out infinite;
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.2);
  position: relative;
}

.slot-chrome-arcadeforge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  animation: arcadeforge-static 0.1s steps(2) infinite;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 255, 0, 0.03),
    rgba(0, 255, 0, 0.03) 1px,
    transparent 1px,
    transparent 2px
  );
}

@keyframes arcadeforge-chrome-border {
  0%, 100% {
    border-color: var(--color-arcadeforge-primary);
  }
  50% {
    border-color: var(--color-arcadeforge-secondary);
  }
}

/* ============================================================
   31. REEL SEPARATORS - PER-PROVIDER
   ============================================================ */

.reel-separator {
  position: relative;
  width: 2px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 5px;
}

.slot-chrome-novaspin .reel-separator {
  background: linear-gradient(180deg, transparent, var(--color-novaspin-primary), transparent);
  box-shadow: 0 0 10px var(--color-novaspin-primary);
}

.slot-chrome-celestial .reel-separator {
  background: linear-gradient(180deg, transparent, var(--color-celestial-primary), transparent);
  box-shadow: 0 0 10px var(--color-celestial-primary);
}

.slot-chrome-ironreel .reel-separator {
  background: linear-gradient(180deg, transparent, var(--color-ironreel-primary), transparent);
  box-shadow: 0 0 8px var(--color-ironreel-primary);
}

.slot-chrome-goldenedge .reel-separator {
  background: linear-gradient(180deg, transparent, var(--color-goldenedge-primary), transparent);
  box-shadow: 0 0 12px var(--color-goldenedge-primary);
}

.slot-chrome-vaultx .reel-separator {
  background: linear-gradient(180deg, transparent, var(--color-vaultx-secondary), transparent);
  box-shadow: 0 0 8px var(--color-vaultx-secondary);
}

.slot-chrome-solstice .reel-separator {
  background: linear-gradient(180deg, transparent, var(--color-solstice-primary), transparent);
  box-shadow: 0 0 10px var(--color-solstice-primary);
}

.slot-chrome-phantomworks .reel-separator {
  background: linear-gradient(180deg, transparent, var(--color-phantomworks-primary), transparent);
  box-shadow: 0 0 12px var(--color-phantomworks-primary);
}

.slot-chrome-arcadeforge .reel-separator {
  background: linear-gradient(180deg, transparent, var(--color-arcadeforge-primary), transparent);
  box-shadow: 0 0 10px var(--color-arcadeforge-primary);
}

/* ============================================================
   32. AMBIENT PARTICLE EFFECTS - SLOT PLAY SCREEN
   ============================================================ */

.slot-play-screen[data-slot-theme*="book_dead"],
.slot-play-screen[data-slot-theme*="pharaoh"],
.slot-play-screen[data-slot-theme*="cleopatra"],
.slot-play-screen[data-slot-theme*="golden_pharaoh"] {
  background-image: linear-gradient(135deg, rgba(184, 134, 11, 0.2), rgba(218, 165, 32, 0.2));
}

.slot-play-screen[data-slot-theme*="big_bass"],
.slot-play-screen[data-slot-theme*="bass_splash"],
.slot-play-screen[data-slot-theme*="wild_deep"],
.slot-play-screen[data-slot-theme*="razor_shark"] {
  background-image: linear-gradient(135deg, rgba(0, 105, 148, 0.2), rgba(30, 144, 255, 0.2));
}

.slot-play-screen[data-slot-theme*="viking"],
.slot-play-screen[data-slot-theme*="norse"],
.slot-play-screen[data-slot-theme*="gemhalla"],
.slot-play-screen[data-slot-theme*="loki"] {
  background-image: linear-gradient(135deg, rgba(47, 79, 147, 0.2), rgba(176, 196, 222, 0.2));
}

.slot-play-screen[data-slot-theme*="dragon_megafire"],
.slot-play-screen[data-slot-theme*="dragon_forge"],
.slot-play-screen[data-slot-theme*="crown_fire"],
.slot-play-screen[data-slot-theme*="fire_hole"] {
  background-image: linear-gradient(135deg, rgba(255, 69, 0, 0.2), rgba(255, 140, 0, 0.2));
}

.slot-play-screen[data-slot-theme*="starburst"],
.slot-play-screen[data-slot-theme*="quantum"],
.slot-play-screen[data-slot-theme*="neon_nights"],
.slot-play-screen[data-slot-theme*="nova"] {
  background-image: linear-gradient(135deg, rgba(25, 25, 112, 0.2), rgba(138, 43, 226, 0.2));
}

.slot-play-screen[data-slot-theme*="sugar_rush"],
.slot-play-screen[data-slot-theme*="fruit_party"],
.slot-play-screen[data-slot-theme*="jammin"],
.slot-play-screen[data-slot-theme*="sweet_bonanza"] {
  background-image: linear-gradient(135deg, rgba(255, 105, 180, 0.2), rgba(255, 182, 193, 0.2));
}

.slot-play-screen[data-slot-theme*="immortal_blood"],
.slot-play-screen[data-slot-theme*="crimson_fang"],
.slot-play-screen[data-slot-theme*="demon_chambers"] {
  background-image: linear-gradient(135deg, rgba(47, 47, 47, 0.2), rgba(139, 0, 0, 0.2));
}

.slot-play-screen[data-slot-theme*="wanted_dead"],
.slot-play-screen[data-slot-theme*="san_quentin"],
.slot-play-screen[data-slot-theme*="black_ops_heist"] {
  background-image: linear-gradient(135deg, rgba(139, 90, 43, 0.2), rgba(210, 180, 140, 0.2));
}

/* ============================================================
   33. WIN ANIMATIONS - BASE
   ============================================================ */

.win-celebration {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1000;
  animation: celebration-scale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes celebration-scale {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* ============================================================
   34. WIN ANIMATIONS - PER-PROVIDER
   ============================================================ */

.win-celebration-novaspin {
  border: 3px solid var(--color-novaspin-primary);
  box-shadow: 0 0 40px var(--color-novaspin-primary),
              inset 0 0 30px rgba(0, 212, 255, 0.2);
  background: radial-gradient(circle, rgba(0, 212, 255, 0.15), transparent);
}

.win-celebration-celestial {
  border: 3px solid var(--color-celestial-primary);
  box-shadow: 0 0 40px var(--color-celestial-primary),
              inset 0 0 30px rgba(255, 215, 0, 0.2);
  background: radial-gradient(circle, rgba(255, 215, 0, 0.15), transparent);
}

.win-celebration-ironreel {
  border: 3px solid var(--color-ironreel-primary);
  box-shadow: 0 0 35px var(--color-ironreel-primary),
              inset 0 0 25px rgba(212, 165, 116, 0.2);
  background: radial-gradient(circle, rgba(212, 165, 116, 0.15), transparent);
}

.win-celebration-goldenedge {
  border: 3px solid var(--color-goldenedge-primary);
  box-shadow: 0 0 40px var(--color-goldenedge-primary),
              inset 0 0 30px rgba(255, 105, 180, 0.2);
  background: radial-gradient(circle, rgba(255, 105, 180, 0.15), transparent);
}

.win-celebration-vaultx {
  border: 3px solid var(--color-vaultx-secondary);
  box-shadow: 0 0 35px var(--color-vaultx-secondary),
              inset 0 0 25px rgba(255, 165, 0, 0.2);
  background: radial-gradient(circle, rgba(255, 165, 0, 0.15), transparent);
}

.win-celebration-solstice {
  border: 3px solid var(--color-solstice-primary);
  box-shadow: 0 0 40px var(--color-solstice-primary),
              inset 0 0 30px rgba(255, 68, 68, 0.2);
  background: radial-gradient(circle, rgba(255, 68, 68, 0.15), transparent);
}

.win-celebration-phantomworks {
  border: 3px solid var(--color-phantomworks-primary);
  box-shadow: 0 0 45px var(--color-phantomworks-primary),
              0 0 20px var(--color-phantomworks-secondary),
              inset 0 0 30px rgba(153, 51, 255, 0.2);
  background: radial-gradient(circle, rgba(153, 51, 255, 0.15), transparent);
}

.win-celebration-arcadeforge {
  border: 3px solid transparent;
  animation: arcadeforge-win-border 0.5s ease-in-out;
  background: radial-gradient(circle, rgba(0, 255, 0, 0.15), transparent);
}

@keyframes arcadeforge-win-border {
  0%, 100% {
    border-color: var(--color-arcadeforge-primary);
    box-shadow: 0 0 30px var(--color-arcadeforge-primary);
  }
  50% {
    border-color: var(--color-arcadeforge-secondary);
    box-shadow: 0 0 40px var(--color-arcadeforge-secondary);
  }
}

/* ============================================================
   35. BIG WIN SCREEN EFFECTS
   ============================================================ */

.big-win-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: big-win-fade 0.6s ease-in-out;
}

@keyframes big-win-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.big-win-content {
  position: relative;
  padding: 40px;
  border-radius: 10px;
  animation: big-win-bounce 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes big-win-bounce {
  0% {
    transform: scale(0) rotateZ(-180deg);
  }
  60% {
    transform: scale(1.1) rotateZ(10deg);
  }
  100% {
    transform: scale(1) rotateZ(0deg);
  }
}

/* ============================================================
   36. GAME INFO SECTION - ENHANCED
   ============================================================ */

.game-info {
  position: relative;
  z-index: 5;
  padding: 15px;
}

.game-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #fff, #ccc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.game-card[data-provider="novaspin"] .game-name {
  background: linear-gradient(135deg, var(--color-novaspin-primary), var(--color-novaspin-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.game-card[data-provider="celestial"] .game-name {
  background: linear-gradient(135deg, var(--color-celestial-primary), var(--color-celestial-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.game-card[data-provider="ironreel"] .game-name {
  background: linear-gradient(135deg, var(--color-ironreel-primary), var(--color-ironreel-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.game-card[data-provider="goldenedge"] .game-name {
  background: linear-gradient(135deg, var(--color-goldenedge-primary), var(--color-goldenedge-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.game-card[data-provider="vaultx"] .game-name {
  background: linear-gradient(135deg, var(--color-vaultx-primary), var(--color-vaultx-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.game-card[data-provider="solstice"] .game-name {
  background: linear-gradient(135deg, var(--color-solstice-primary), var(--color-solstice-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.game-card[data-provider="phantomworks"] .game-name {
  background: linear-gradient(135deg, var(--color-phantomworks-primary), var(--color-phantomworks-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.game-card[data-provider="arcadeforge"] .game-name {
  background: linear-gradient(135deg, var(--color-arcadeforge-primary), var(--color-arcadeforge-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   37. PROVIDER LOGO WITH GLOW
   ============================================================ */

.provider-logo {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.game-card[data-provider="novaspin"] .provider-logo {
  background: rgba(0, 212, 255, 0.2);
  color: var(--color-novaspin-primary);
  border: 1px solid var(--color-novaspin-primary);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

.game-card[data-provider="celestial"] .provider-logo {
  background: rgba(255, 215, 0, 0.2);
  color: var(--color-celestial-primary);
  border: 1px solid var(--color-celestial-primary);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.game-card[data-provider="ironreel"] .provider-logo {
  background: rgba(212, 165, 116, 0.2);
  color: var(--color-ironreel-primary);
  border: 1px solid var(--color-ironreel-primary);
  box-shadow: 0 0 8px rgba(212, 165, 116, 0.4);
}

.game-card[data-provider="goldenedge"] .provider-logo {
  background: rgba(255, 105, 180, 0.2);
  color: var(--color-goldenedge-primary);
  border: 1px solid var(--color-goldenedge-primary);
  box-shadow: 0 0 12px rgba(255, 105, 180, 0.4);
}

.game-card[data-provider="vaultx"] .provider-logo {
  background: rgba(255, 165, 0, 0.2);
  color: var(--color-vaultx-secondary);
  border: 1px solid var(--color-vaultx-secondary);
  box-shadow: 0 0 8px rgba(255, 165, 0, 0.4);
}

.game-card[data-provider="solstice"] .provider-logo {
  background: rgba(255, 68, 68, 0.2);
  color: var(--color-solstice-primary);
  border: 1px solid var(--color-solstice-primary);
  box-shadow: 0 0 10px rgba(255, 68, 68, 0.4);
}

.game-card[data-provider="phantomworks"] .provider-logo {
  background: rgba(153, 51, 255, 0.2);
  color: var(--color-phantomworks-primary);
  border: 1px solid var(--color-phantomworks-primary);
  box-shadow: 0 0 12px rgba(153, 51, 255, 0.4);
}

.game-card[data-provider="arcadeforge"] .provider-logo {
  background: rgba(0, 255, 0, 0.2);
  color: var(--color-arcadeforge-primary);
  border: 1px solid var(--color-arcadeforge-primary);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
}

.game-card .provider-logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px currentColor;
}

/* ============================================================
   38. RTP & VOLATILITY BADGES
   ============================================================ */

.badge-container {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.badge-rtp {
  background: rgba(52, 211, 153, 0.3);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.6);
}

.badge-volatility-low {
  background: rgba(96, 165, 250, 0.3);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.6);
}

.badge-volatility-medium {
  background: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.6);
}

.badge-volatility-high {
  background: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.6);
}

.badge:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px currentColor;
}

/* ============================================================
   39. PERFORMANCE OPTIMIZATIONS
   ============================================================ */

.game-card {
  will-change: transform;
}

.game-card:not(:hover) {
  will-change: auto;
}

/* GPU hints moved to .slot-reel-area child to avoid breaking
   position:fixed on #slotModal (transform creates containing block) */
.slot-chrome-novaspin .slot-reel-area,
.slot-chrome-celestial .slot-reel-area,
.slot-chrome-ironreel .slot-reel-area,
.slot-chrome-goldenedge .slot-reel-area,
.slot-chrome-vaultx .slot-reel-area,
.slot-chrome-solstice .slot-reel-area,
.slot-chrome-phantomworks .slot-reel-area,
.slot-chrome-arcadeforge .slot-reel-area,
.slot-chrome-neoncore .slot-reel-area,
.slot-chrome-frostbyte .slot-reel-area,
.slot-chrome-desertgold .slot-reel-area,
.slot-chrome-orientreels .slot-reel-area {
  will-change: box-shadow;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   40. CASCADING WIN ANIMATION
   ============================================================ */

.cascade-animation {
  animation: cascade-drop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cascade-drop {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ============================================================
   41. TUMBLE ANIMATION
   ============================================================ */

.tumble-animation {
  animation: tumble-spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes tumble-spin {
  0% {
    transform: rotateZ(0deg) scale(0.8);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotateZ(360deg) scale(1);
    opacity: 1;
  }
}

/* ============================================================
   42. ADDITIONAL POLISH - SHINE EFFECTS
   ============================================================ */

.shine-effect {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shine-sweep 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine-sweep {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* ============================================================
   43. SLOT SYMBOL PULSE ON MATCH
   ============================================================ */

.symbol-match {
  animation: symbol-pulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes symbol-pulse {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(0.95);
  }
  75% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

/* ============================================================
   44. EDGE CASE IMPROVEMENTS
   ============================================================ */

/* Ensure smooth transitions on all interactive elements */
button, a, .clickable {
  transition: all 0.2s ease;
}

button:active, a:active, .clickable:active {
  transform: scale(0.98);
}

/* Prevent text selection on animated elements */
.game-card, .slot-chrome, .win-celebration {
  user-select: none;
  -webkit-user-select: none;
}

/* Ensure proper stacking context */
.game-card, .slot-chrome {
  position: relative;
  z-index: 1;
}

.game-card:hover {
  z-index: 10;
}

/* ============================================================
   SLOT GUI ENGINE — Clutter Suppression
   ============================================================ */

/* Elements suppressed by SlotGUIEngine stay hidden even if JS tries to show them */
.gui-suppressed { display: none !important; }

/* Smooth skin transitions when switching games */
.slot-modal-fullscreen[data-gui-skin] .slot-top-bar,
.slot-modal-fullscreen[data-gui-skin] .slot-bottom-bar,
.slot-modal-fullscreen[data-gui-skin] #spinBtn,
.slot-modal-fullscreen[data-gui-skin] .slot-reel-area,
.slot-modal-fullscreen[data-gui-skin] .slot-title,
.slot-modal-fullscreen[data-gui-skin] .bet-chip,
.slot-modal-fullscreen[data-gui-skin] .slot-close-btn,
.slot-modal-fullscreen[data-gui-game] .slot-top-bar,
.slot-modal-fullscreen[data-gui-game] .slot-bottom-bar,
.slot-modal-fullscreen[data-gui-game] #spinBtn,
.slot-modal-fullscreen[data-gui-game] .slot-reel-area,
.slot-modal-fullscreen[data-gui-game] .slot-title,
.slot-modal-fullscreen[data-gui-game] .bet-chip,
.slot-modal-fullscreen[data-gui-game] .slot-close-btn {
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.3s ease;
}

/* Ensure skin spin button icons don't overlap spin text */
.slot-modal-fullscreen[data-gui-skin] #spinBtn,
.slot-modal-fullscreen[data-gui-game] #spinBtn {
    position: relative;
    overflow: hidden;
}

/* ============================================================
   END OF VISUAL OVERHAUL
   ============================================================ */

/* ─── bonus-games.css (3/4) ─── */
/* ═══════════════════════════════════════════════════════════════
   BONUS GAMES — Custom GUI for Every Bonus Type
   Each of the 19 bonus types has a unique interactive overlay
   with per-game accent color theming via CSS custom properties
   ═══════════════════════════════════════════════════════════════ */

/* ─── BASE BONUS OVERLAY ─── */
.bonus-game-overlay {
    position: fixed;
    inset: 0;
    z-index: 10500;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 0.5s ease;
    overflow: hidden;
}
.bonus-game-overlay.active {
    display: flex;
    opacity: 1;
}
.bonus-game-overlay .bg-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ─── BONUS GAME CONTAINER ─── */
.bonus-game-container {
    position: relative;
    width: min(94vw, 720px);
    max-height: 88vh;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(15,10,25,0.98) 0%, rgba(8,5,15,0.99) 100%);
    border: 2px solid var(--bonus-accent, #fbbf24);
    box-shadow: 0 0 60px var(--bonus-accent-glow, rgba(251,191,36,0.3)),
                0 0 120px var(--bonus-accent-glow, rgba(251,191,36,0.1)),
                inset 0 1px 0 rgba(255,255,255,0.05);
    animation: bonusContainerEntry 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
    z-index: 2;
}
@keyframes bonusContainerEntry {
    from { transform: scale(0.7) translateY(40px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* ─── HEADER BAR ─── */
.bonus-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--bonus-accent, #fbbf24), transparent 70%);
    background-size: 200% 200%;
    animation: bonusHeaderShimmer 3s ease-in-out infinite;
    border-bottom: 1px solid var(--bonus-accent, #fbbf24);
    position: relative;
    overflow: hidden;
}
@keyframes bonusHeaderShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.bonus-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    animation: bonusHeaderSweep 2.5s ease-in-out infinite;
}
@keyframes bonusHeaderSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.bonus-header-icon {
    font-size: 1.8rem;
    filter: drop-shadow(0 0 8px var(--bonus-accent, #fbbf24));
}
.bonus-header-title {
    font-size: clamp(1rem, 3vw, 1.4rem);
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 20px var(--bonus-accent, #fbbf24);
}
.bonus-header-game {
    font-size: 0.75rem;
    color: var(--bonus-accent, #fbbf24);
    opacity: 0.8;
    letter-spacing: 1px;
}

/* ─── BONUS BODY ─── */
.bonus-body {
    padding: 20px;
    min-height: 300px;
    position: relative;
}

/* ─── BONUS FOOTER ─── */
.bonus-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(0,0,0,0.6);
    border-top: 1px solid rgba(255,255,255,0.05);
}
.bonus-win-display {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--bonus-accent, #fbbf24);
    text-shadow: 0 0 12px var(--bonus-accent-glow, rgba(251,191,36,0.5));
}
.bonus-spins-display {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    letter-spacing: 1px;
}
.bonus-start-btn {
    display: block;
    margin: 0 auto;
    padding: 14px 48px;
    background: linear-gradient(135deg, var(--bonus-accent, #fbbf24), var(--bonus-accent-dark, #d4a017));
    color: #0d0d1a;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 3px;
    cursor: pointer;
    box-shadow: 0 0 30px var(--bonus-accent-glow, rgba(251,191,36,0.5));
    transition: transform 0.2s, box-shadow 0.2s;
    animation: bonusBtnPulse 1.5s ease-in-out infinite;
}
.bonus-start-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 50px var(--bonus-accent-glow, rgba(251,191,36,0.8));
}
@keyframes bonusBtnPulse {
    0%, 100% { box-shadow: 0 0 30px var(--bonus-accent-glow, rgba(251,191,36,0.4)); }
    50% { box-shadow: 0 0 50px var(--bonus-accent-glow, rgba(251,191,36,0.8)); }
}

/* ═════════════════════════════════════════════════
   1. TUMBLE / AVALANCHE — Cascading Grid
   ═════════════════════════════════════════════════ */
.bonus-type-tumble .bonus-body,
.bonus-type-avalanche .bonus-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.tumble-grid {
    display: grid;
    gap: 4px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}
.tumble-cell {
    aspect-ratio: 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.tumble-cell.matched {
    border-color: var(--bonus-accent, #fbbf24);
    box-shadow: 0 0 12px var(--bonus-accent-glow);
    animation: tumbleCellPop 0.4s ease;
}
@keyframes tumbleCellPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); background: var(--bonus-accent-glow); }
    100% { transform: scale(0); opacity: 0; }
}
.tumble-cell.falling {
    animation: tumbleFall 0.35s ease-in forwards;
}
@keyframes tumbleFall {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
/* Multiplier ladder */
.tumble-multiplier-ladder {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(0,0,0,0.5);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}
.tumble-mult-step {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.03);
    transition: all 0.3s ease;
}
.tumble-mult-step.active {
    color: #fff;
    background: var(--bonus-accent, #fbbf24);
    box-shadow: 0 0 15px var(--bonus-accent-glow);
    transform: scale(1.15);
}

/* Avalanche-specific: rock/mountain BG */
.bonus-type-avalanche .bg-scene {
    background: radial-gradient(ellipse at 50% 120%, rgba(80,60,40,0.3) 0%, transparent 60%);
}
.bonus-type-avalanche .tumble-cell {
    border-radius: 4px;
    background: rgba(80,60,40,0.15);
    border-color: rgba(120,100,80,0.15);
}

/* ═════════════════════════════════════════════════
   2. HOLD & WIN — Lock Grid + Jackpot Meters
   ═════════════════════════════════════════════════ */
.bonus-type-hold_and_win .bonus-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.hold-win-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    width: 100%;
    max-width: 400px;
}
.hw-cell {
    aspect-ratio: 1;
    background: linear-gradient(180deg, rgba(20,15,35,0.95), rgba(10,8,20,0.98));
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    color: transparent;
    position: relative;
    transition: all 0.4s ease;
}
.hw-cell.locked {
    border-color: var(--bonus-accent, #fbbf24);
    color: var(--bonus-accent, #fbbf24);
    background: linear-gradient(180deg, rgba(251,191,36,0.15), rgba(251,191,36,0.05));
    box-shadow: 0 0 15px var(--bonus-accent-glow);
    animation: hwCellLock 0.5s ease;
}
@keyframes hwCellLock {
    0% { transform: rotateY(0); }
    50% { transform: rotateY(90deg); }
    100% { transform: rotateY(0); }
}
.hw-cell.locked::after {
    content: '🔒';
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.5rem;
    opacity: 0.6;
}
/* Jackpot meters */
.hw-jackpot-row {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 400px;
}
.hw-jackpot {
    flex: 1;
    padding: 8px;
    border-radius: 10px;
    text-align: center;
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 1px;
    border: 1px solid;
    transition: all 0.3s ease;
}
.hw-jackpot-mini { background: rgba(168,162,158,0.15); border-color: #a8a29e; color: #a8a29e; }
.hw-jackpot-minor { background: rgba(59,130,246,0.15); border-color: #3b82f6; color: #3b82f6; }
.hw-jackpot-major { background: rgba(168,85,247,0.15); border-color: #a855f7; color: #a855f7; }
.hw-jackpot-grand { background: rgba(251,191,36,0.15); border-color: #fbbf24; color: #fbbf24; }
.hw-jackpot.won {
    animation: hwJackpotWin 0.6s ease;
    box-shadow: 0 0 30px currentColor;
    transform: scale(1.1);
}
@keyframes hwJackpotWin {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1.1); }
}
/* Respin counter */
.hw-respins {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 800;
    color: rgba(255,255,255,0.8);
    padding: 8px;
}
.hw-respins-count {
    color: var(--bonus-accent, #fbbf24);
    font-size: 1.4rem;
    text-shadow: 0 0 10px var(--bonus-accent-glow);
}

/* ═════════════════════════════════════════════════
   3. RANDOM MULTIPLIER — Multiplier Orb Rain
   ═════════════════════════════════════════════════ */
.bonus-type-random_multiplier .bonus-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    min-height: 350px;
}
.rm-orb-field {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 280px;
    background: radial-gradient(ellipse at 50% 50%, rgba(var(--bonus-accent-rgb, 251,191,36),0.08) 0%, transparent 70%);
    border-radius: 16px;
    overflow: hidden;
}
.rm-orb {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 8px rgba(0,0,0,0.6);
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.2);
    transition: transform 0.2s;
}
.rm-orb:hover { transform: scale(1.15); }
.rm-orb.orb-2x  { background: radial-gradient(circle, #60a5fa, #2563eb); }
.rm-orb.orb-3x  { background: radial-gradient(circle, #34d399, #059669); }
.rm-orb.orb-5x  { background: radial-gradient(circle, #a78bfa, #7c3aed); }
.rm-orb.orb-10x { background: radial-gradient(circle, #fbbf24, #d97706); }
.rm-orb.orb-25x { background: radial-gradient(circle, #f472b6, #db2777); }
.rm-orb.orb-50x { background: radial-gradient(circle, #fb923c, #ea580c); }
.rm-orb.orb-100x { background: radial-gradient(circle, #fbbf24, #ff0000); box-shadow: 0 0 20px rgba(255,0,0,0.5); }
.rm-orb.caught {
    animation: orbCatch 0.4s ease-out forwards;
}
@keyframes orbCatch {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.8; }
    100% { transform: scale(0); opacity: 0; }
}
.rm-orb.falling {
    animation: orbFall linear forwards;
}
@keyframes orbFall {
    from { transform: translateY(-60px); }
    to   { transform: translateY(340px); }
}
.rm-current-mult {
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--bonus-accent, #fbbf24);
    text-shadow: 0 0 30px var(--bonus-accent-glow);
    text-align: center;
    animation: multPulse 1s ease-in-out infinite;
}
@keyframes multPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* ═════════════════════════════════════════════════
   4. WHEEL MULTIPLIER — Spinning Fortune Wheel
   ═════════════════════════════════════════════════ */
.bonus-type-wheel_multiplier .bonus-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.wheel-container {
    position: relative;
    width: min(300px, 70vw);
    height: min(300px, 70vw);
}
.wheel-svg {
    width: 100%;
    height: 100%;
    transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}
.wheel-svg.spinning {
    animation: none;
}
.wheel-pointer {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 28px solid var(--bonus-accent, #fbbf24);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
    z-index: 3;
}
.wheel-center-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bonus-accent, #fbbf24), var(--bonus-accent-dark, #d4a017));
    border: 3px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #0d0d1a;
    font-size: 0.8rem;
    z-index: 3;
}
.wheel-result {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--bonus-accent, #fbbf24);
    text-shadow: 0 0 20px var(--bonus-accent-glow);
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.wheel-result.visible { opacity: 1; }

/* ═════════════════════════════════════════════════
   5. EXPANDING SYMBOL — Symbol Reveal & Expand
   ═════════════════════════════════════════════════ */
.bonus-type-expanding_symbol .bonus-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.es-reveal-stage {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 3px solid var(--bonus-accent, #fbbf24);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 40px var(--bonus-accent-glow);
    background: radial-gradient(circle, rgba(var(--bonus-accent-rgb),0.15), transparent 70%);
}
.es-symbol-preview {
    font-size: 3rem;
    animation: esSymbolFloat 2s ease-in-out infinite;
}
@keyframes esSymbolFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.05); }
}
.es-reel-preview {
    display: flex;
    gap: 6px;
    width: 100%;
    max-width: 400px;
}
.es-reel-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.es-reel-cell {
    aspect-ratio: 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.5s ease;
}
.es-reel-cell.expanded {
    background: var(--bonus-accent-glow);
    border-color: var(--bonus-accent, #fbbf24);
    animation: esExpand 0.6s ease;
}
@keyframes esExpand {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* ═════════════════════════════════════════════════
   6. EXPANDING WILD RESPIN — Wild Column Expand
   ═════════════════════════════════════════════════ */
.bonus-type-expanding_wild_respin .bonus-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.ewr-reel-display {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 420px;
}
.ewr-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.5s ease;
}
.ewr-col.wild-expanded {
    border-color: var(--bonus-accent, #fbbf24);
    background: rgba(var(--bonus-accent-rgb),0.12);
    box-shadow: 0 0 20px var(--bonus-accent-glow);
}
.ewr-col.wild-expanded .ewr-cell {
    background: var(--bonus-accent-glow);
    border-color: var(--bonus-accent, #fbbf24);
}
.ewr-cell {
    aspect-ratio: 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
.ewr-respin-counter {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    text-align: center;
}
.ewr-respin-counter span {
    color: var(--bonus-accent, #fbbf24);
    font-size: 1.3rem;
}

/* ═════════════════════════════════════════════════
   7. ZEUS MULTIPLIER — Lightning Bolt Strike
   ═════════════════════════════════════════════════ */
.bonus-type-zeus_multiplier .bonus-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.zeus-stage {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 280px;
    background: radial-gradient(ellipse at 50% 20%, rgba(100,126,234,0.15) 0%, transparent 60%);
    border-radius: 16px;
    overflow: hidden;
}
.zeus-bolt {
    position: absolute;
    width: 40px;
    height: 120px;
    top: 0;
    opacity: 0;
    pointer-events: none;
}
.zeus-bolt.strike {
    opacity: 1;
    animation: zeusStrike 0.8s ease-out forwards;
}
@keyframes zeusStrike {
    0% { transform: translateY(-40px) scaleY(0); opacity: 0; }
    20% { transform: translateY(0) scaleY(1); opacity: 1; }
    40% { opacity: 1; }
    100% { opacity: 0; transform: translateY(20px); }
}
.zeus-bolt svg {
    width: 100%;
    height: 100%;
}
.zeus-mult-display {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.zeus-mult-orb {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.9rem;
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 12px rgba(102,126,234,0.4);
    transition: all 0.3s ease;
}
.zeus-mult-orb.active {
    transform: scale(1.25);
    box-shadow: 0 0 30px var(--bonus-accent-glow);
    background: linear-gradient(135deg, var(--bonus-accent, #667eea), #fff);
}
.zeus-total-mult {
    font-size: 2.2rem;
    font-weight: 900;
    text-align: center;
    color: var(--bonus-accent, #667eea);
    text-shadow: 0 0 25px var(--bonus-accent-glow);
}

/* ═════════════════════════════════════════════════
   8. MONEY COLLECT — Coin Trail Collection
   ═════════════════════════════════════════════════ */
.bonus-type-money_collect .bonus-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.mc-coin-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 380px;
}
.mc-coin {
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    transition: all 0.4s ease;
    position: relative;
}
.mc-coin.empty {
    background: rgba(255,255,255,0.03);
    border: 2px dashed rgba(255,255,255,0.1);
    color: transparent;
}
.mc-coin.filled {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border: 2px solid #fbbf24;
    color: #0d0d1a;
    box-shadow: 0 0 12px rgba(251,191,36,0.4);
    animation: mcCoinAppear 0.4s ease;
}
@keyframes mcCoinAppear {
    from { transform: scale(0) rotateY(180deg); }
    to   { transform: scale(1) rotateY(0); }
}
.mc-coin.collected {
    animation: mcCoinCollect 0.5s ease-out forwards;
}
@keyframes mcCoinCollect {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); box-shadow: 0 0 30px #fbbf24; }
    100% { transform: scale(0); opacity: 0; }
}
.mc-wild-collector {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bonus-accent, #e94560), #ff6b6b);
    border: 3px solid var(--bonus-accent, #e94560);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 0 25px var(--bonus-accent-glow);
    animation: mcCollectorPulse 1.5s ease-in-out infinite;
}
@keyframes mcCollectorPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.mc-total {
    font-size: 1.8rem;
    font-weight: 900;
    color: #fbbf24;
    text-shadow: 0 0 15px rgba(251,191,36,0.6);
    text-align: center;
}

/* ═════════════════════════════════════════════════
   9. STACKED WILDS — Wild Reel Stack Animation
   ═════════════════════════════════════════════════ */
.bonus-type-stacked_wilds .bonus-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.sw-reel-display {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 400px;
}
.sw-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
    padding: 4px;
    transition: all 0.5s ease;
}
.sw-col.stacked {
    border-color: var(--bonus-accent, #fbbf24);
    background: linear-gradient(180deg, rgba(var(--bonus-accent-rgb),0.2), transparent);
    box-shadow: 0 0 20px var(--bonus-accent-glow);
}
.sw-cell {
    aspect-ratio: 1;
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}
.sw-cell.wild {
    background: linear-gradient(135deg, var(--bonus-accent, #fbbf24), var(--bonus-accent-dark, #d4a017));
    border-color: var(--bonus-accent, #fbbf24);
    animation: swWildStack 0.4s ease forwards;
}
@keyframes swWildStack {
    from { transform: translateY(-20px) scale(0.8); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
.sw-meter {
    width: 100%;
    max-width: 400px;
    height: 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    overflow: hidden;
}
.sw-meter-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--bonus-accent, #fbbf24), #fff);
    border-radius: 4px;
    transition: width 0.5s ease;
    box-shadow: 0 0 8px var(--bonus-accent-glow);
}

/* ═════════════════════════════════════════════════
   10. STICKY WILDS — Sticky Web Grid
   ═════════════════════════════════════════════════ */
.bonus-type-sticky_wilds .bonus-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.sticky-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    width: 100%;
    max-width: 380px;
}
.sticky-cell {
    aspect-ratio: 1;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    position: relative;
    transition: all 0.4s ease;
}
.sticky-cell.stuck {
    border-color: var(--bonus-accent, #fbbf24);
    background: rgba(var(--bonus-accent-rgb),0.15);
    box-shadow: 0 0 12px var(--bonus-accent-glow);
}
.sticky-cell.stuck::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid var(--bonus-accent, #fbbf24);
    border-radius: 10px;
    animation: stickyGlow 1.5s ease-in-out infinite;
}
@keyframes stickyGlow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ═════════════════════════════════════════════════
   11. WALKING WILDS — Walking Character Trail
   ═════════════════════════════════════════════════ */
.bonus-type-walking_wilds .bonus-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.ww-stage {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 200px;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
}
.ww-walker {
    position: absolute;
    bottom: 20px;
    font-size: 3rem;
    transition: left 0.8s cubic-bezier(0.34,1.56,0.64,1);
    filter: drop-shadow(0 0 12px var(--bonus-accent-glow));
}
.ww-trail-mark {
    position: absolute;
    bottom: 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bonus-accent-glow);
    opacity: 0.4;
    animation: wwTrailFade 2s ease-out forwards;
}
@keyframes wwTrailFade {
    from { opacity: 0.5; transform: scale(1); }
    to   { opacity: 0; transform: scale(2); }
}

/* ═════════════════════════════════════════════════
   12. MYSTERY STACKS — Mystery Box Reveal
   ═════════════════════════════════════════════════ */
.bonus-type-mystery_stacks .bonus-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.ms-box-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 400px;
}
.ms-box {
    aspect-ratio: 1;
    border-radius: 10px;
    background: linear-gradient(135deg, #2a1f3d, #1a1428);
    border: 2px solid rgba(var(--bonus-accent-rgb),0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
}
.ms-box:not(.revealed):hover {
    transform: scale(1.05);
    border-color: var(--bonus-accent, #fbbf24);
    box-shadow: 0 0 15px var(--bonus-accent-glow);
}
.ms-box::before {
    content: '?';
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--bonus-accent, #fbbf24);
    opacity: 0.5;
}
.ms-box.revealed::before { content: none; }
.ms-box.revealed {
    background: linear-gradient(135deg, rgba(var(--bonus-accent-rgb),0.2), transparent);
    border-color: var(--bonus-accent, #fbbf24);
    animation: msReveal 0.6s ease;
}
@keyframes msReveal {
    0% { transform: rotateY(0); }
    50% { transform: rotateY(90deg); }
    100% { transform: rotateY(0); }
}

/* ═════════════════════════════════════════════════
   13. MULTIPLIER WILDS — Wild Cards + Values
   ═════════════════════════════════════════════════ */
.bonus-type-multiplier_wilds .bonus-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.mw-card-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 420px;
}
.mw-card {
    width: 70px;
    height: 95px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(20,15,35,0.95), rgba(10,8,20,0.98));
    border: 2px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.4s ease;
    position: relative;
}
.mw-card.active {
    border-color: var(--bonus-accent, #fbbf24);
    box-shadow: 0 0 20px var(--bonus-accent-glow);
    background: linear-gradient(180deg, rgba(var(--bonus-accent-rgb),0.15), rgba(var(--bonus-accent-rgb),0.05));
    animation: mwCardFlip 0.5s ease;
}
@keyframes mwCardFlip {
    0% { transform: rotateY(0); }
    50% { transform: rotateY(90deg); }
    100% { transform: rotateY(0); }
}
.mw-card-symbol { font-size: 1.6rem; }
.mw-card-mult {
    font-size: 0.85rem;
    font-weight: 900;
    color: var(--bonus-accent, #fbbf24);
}

/* ═════════════════════════════════════════════════
   14. COIN RESPIN — Coin Cascade
   ═════════════════════════════════════════════════ */
.bonus-type-coin_respin .bonus-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.cr-coin-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    width: 100%;
    max-width: 360px;
}
.cr-coin {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.8rem;
    color: transparent;
    transition: all 0.4s ease;
}
.cr-coin.landed {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-color: #fbbf24;
    color: #0d0d1a;
    animation: crCoinLand 0.5s ease;
    box-shadow: 0 0 10px rgba(251,191,36,0.4);
}
@keyframes crCoinLand {
    0% { transform: translateY(-30px) rotateX(180deg) scale(0.5); }
    60% { transform: translateY(3px) rotateX(0) scale(1.1); }
    100% { transform: translateY(0) rotateX(0) scale(1); }
}
.cr-respins-left {
    text-align: center;
    font-size: 1rem;
    color: rgba(255,255,255,0.6);
}
.cr-respins-left span {
    color: var(--bonus-accent, #fbbf24);
    font-weight: 800;
    font-size: 1.3rem;
}

/* ═════════════════════════════════════════════════
   15. CHAMBER SPINS — Vault Door Opening
   ═════════════════════════════════════════════════ */
.bonus-type-chamber_spins .bonus-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.chamber-door {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 6px solid rgba(var(--bonus-accent-rgb),0.5);
    background: linear-gradient(135deg, rgba(20,15,35,0.95), rgba(10,8,20,0.98));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 1s ease;
}
.chamber-door.opening {
    animation: chamberOpen 1.5s ease forwards;
}
@keyframes chamberOpen {
    0% { border-width: 6px; box-shadow: 0 0 20px var(--bonus-accent-glow); }
    50% { border-width: 3px; box-shadow: 0 0 60px var(--bonus-accent-glow); transform: scale(1.05); }
    100% { border-width: 1px; box-shadow: 0 0 100px var(--bonus-accent-glow), inset 0 0 40px var(--bonus-accent-glow); transform: scale(1); }
}
.chamber-handle {
    width: 60px;
    height: 60px;
    border: 4px solid var(--bonus-accent, #fbbf24);
    border-radius: 50%;
    position: relative;
    transition: transform 1s ease;
}
.chamber-door.opening .chamber-handle {
    transform: rotate(180deg);
}
.chamber-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 4px;
    background: var(--bonus-accent, #fbbf24);
    transform: translate(-50%, -50%);
    border-radius: 2px;
}
.chamber-prizes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 400px;
}
.chamber-prize {
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    font-weight: 700;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
    opacity: 0;
    transition: all 0.5s ease;
}
.chamber-prize.revealed {
    opacity: 1;
    color: var(--bonus-accent, #fbbf24);
    border-color: var(--bonus-accent, #fbbf24);
    background: rgba(var(--bonus-accent-rgb),0.1);
}

/* ═════════════════════════════════════════════════
   16. FISHERMAN COLLECT — Fishing Minigame
   ═════════════════════════════════════════════════ */
.bonus-type-fisherman_collect .bonus-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.fish-pond {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 280px;
    background: linear-gradient(180deg, rgba(0,119,182,0.15) 0%, rgba(0,50,80,0.3) 100%);
    border-radius: 16px;
    border: 1px solid rgba(72,202,228,0.15);
    overflow: hidden;
}
.fish-pond::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(72,202,228,0.4), transparent);
    animation: fishWaterShimmer 3s ease-in-out infinite;
}
@keyframes fishWaterShimmer {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}
.fish-sprite {
    position: absolute;
    font-size: 2rem;
    cursor: pointer;
    transition: transform 0.2s;
    animation: fishSwim 3s ease-in-out infinite;
}
.fish-sprite:hover { transform: scale(1.2); }
@keyframes fishSwim {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.fish-sprite.caught {
    animation: fishCatch 0.6s ease-out forwards;
}
@keyframes fishCatch {
    0% { transform: scale(1); }
    30% { transform: scale(1.3) translateY(-20px); }
    100% { transform: scale(0) translateY(-80px); opacity: 0; }
}
.fish-rod {
    position: absolute;
    top: -10px;
    right: 20px;
    font-size: 2.5rem;
    transform: rotate(-20deg);
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.fish-catch-total {
    font-size: 1.6rem;
    font-weight: 900;
    color: #48cae4;
    text-shadow: 0 0 15px rgba(72,202,228,0.5);
    text-align: center;
}

/* ═════════════════════════════════════════════════
   17. WILD COLLECT — Wild Meter Fill
   ═════════════════════════════════════════════════ */
.bonus-type-wild_collect .bonus-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.wc-meter-container {
    width: 100%;
    max-width: 400px;
}
.wc-meter-track {
    width: 100%;
    height: 24px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,0.08);
}
.wc-meter-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--bonus-accent, #fbbf24), #fff);
    border-radius: 12px;
    transition: width 0.6s ease;
    position: relative;
    box-shadow: 0 0 12px var(--bonus-accent-glow);
}
.wc-meter-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
    border-radius: 0 12px 12px 0;
}
.wc-wild-count {
    text-align: center;
    font-size: 2rem;
    font-weight: 900;
    color: var(--bonus-accent, #fbbf24);
}
.wc-wild-symbols {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.wc-wild-sym {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(var(--bonus-accent-rgb),0.15);
    border: 2px solid var(--bonus-accent, #fbbf24);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    animation: wcSymPop 0.4s ease;
}
@keyframes wcSymPop {
    from { transform: scale(0) rotate(180deg); }
    to   { transform: scale(1) rotate(0); }
}

/* ═════════════════════════════════════════════════
   18. RESPIN — Classic Lock & Respin
   ═════════════════════════════════════════════════ */
.bonus-type-respin .bonus-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.respin-reels {
    display: flex;
    gap: 10px;
}
.respin-reel {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 2px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: all 0.4s ease;
}
.respin-reel.locked {
    border-color: var(--bonus-accent, #fbbf24);
    box-shadow: 0 0 15px var(--bonus-accent-glow);
    background: rgba(var(--bonus-accent-rgb),0.1);
}
.respin-reel.spinning {
    animation: respinSpin 0.1s linear infinite;
}
@keyframes respinSpin {
    0% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}
.respin-count {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.6);
    text-align: center;
}
.respin-count span {
    color: var(--bonus-accent, #fbbf24);
    font-weight: 800;
    font-size: 1.3rem;
}

/* ═════════════════════════════════════════════════
   ANIMATED PARTICLES for bonus background scenes
   ═════════════════════════════════════════════════ */
.bonus-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}
.bonus-particle.gold {
    background: radial-gradient(circle, #fbbf24, #f59e0b);
    animation: bpFloat 4s ease-in-out infinite;
}
.bonus-particle.blue {
    background: radial-gradient(circle, #60a5fa, #2563eb);
    animation: bpFloat 5s ease-in-out infinite;
}
.bonus-particle.purple {
    background: radial-gradient(circle, #a78bfa, #7c3aed);
    animation: bpFloat 4.5s ease-in-out infinite;
}
@keyframes bpFloat {
    0% { transform: translateY(0) scale(0); opacity: 0; }
    20% { opacity: 0.6; transform: scale(1); }
    80% { opacity: 0.3; }
    100% { transform: translateY(-200px) scale(0.5); opacity: 0; }
}

/* ═════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .bonus-game-container { border-radius: 16px; }
    .bonus-header { padding: 12px 16px; }
    .bonus-body { padding: 14px; min-height: 240px; }
    .wheel-container { width: min(240px, 65vw); height: min(240px, 65vw); }
    .rm-orb-field { height: 220px; }
    .rm-orb { width: 44px; height: 44px; font-size: 0.8rem; }
    .zeus-stage { height: 220px; }
    .fish-pond { height: 220px; }
}

/* ─── mobile-fixes.css (4/4) ─── */
/**
 * Mobile Fixes for Matrix Spins Casino
 * Dark theme: #020c02 background, #00ff41 accent, #fbbf24/#d4af37 gold
 * Targets mobile devices ≤640px and compact headers at ≤480px
 * Fixes overlapping positioned elements from 21+ feature modules
 */

/* ============================================================================
   MOBILE BREAKPOINT: ≤640px
   ============================================================================ */

@media (max-width: 640px) {

  /* --------------------------------------------------------------------------
     1. FAB CLEANUP - Hide individual FABs that mobile-fab-dock.js will handle
     -------------------------------------------------------------------------- */

  #referralFab,
  #tournamentFab,
  #premiumTournamentBtn,
  .support-chat-btn {
    display: none !important;
  }

  /* --------------------------------------------------------------------------
     2. MODAL FIXES - Full-screen modals on mobile
     -------------------------------------------------------------------------- */

  [id*="Modal"],
  [id*="modal"],
  [class*="modal"],
  .feature-popup {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    max-height: 100vh !important;
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  /* Ensure modal content is scrollable if needed */
  [id*="Modal"] > *,
  [id*="modal"] > *,
  [class*="modal"] > *,
  .feature-popup > * {
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }

  /* Close buttons should be accessible */
  [id*="Modal"] [class*="close"],
  [id*="modal"] [class*="close"],
  [class*="modal"] [class*="close"],
  .feature-popup [class*="close"] {
    min-width: 44px;
    min-height: 44px;
  }

  /* --------------------------------------------------------------------------
     3. BOTTOM NAV SPACING - Shift positioned elements above bottom nav
     -------------------------------------------------------------------------- */

  /* Mobile bottom nav takes 60px - elements need to shift up */
  #liveWinsTicker,
  #live-wins-ticker,
  [class*="live-wins"] {
    bottom: 70px !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* Slot race timer bar positioning */
  #slotRaceTimer,
  [class*="slot-race"],
  [class*="race-timer"],
  [id*="RaceTimer"] {
    bottom: 70px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* General rule: anything positioned at bottom:0 that's not the nav */
  [style*="bottom: 0"],
  [style*="bottom:0"] {
    bottom: 70px !important;
  }

  /* Except the mobile-bottom-nav itself */
  #mobile-bottom-nav,
  [class*="mobile-bottom-nav"],
  [class*="bottom-nav"],
  nav[class*="mobile"] {
    bottom: 0 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  /* --------------------------------------------------------------------------
     4. HEADER COMPACTION (≤640px) - Less critical buttons hidden, balance compact
     -------------------------------------------------------------------------- */

  header,
  [class*="header"],
  [id*="Header"],
  nav[class*="top"] {
    padding-top: env(safe-area-inset-top) !important;
  }

  /* Hide less essential header controls on mobile */
  #settingsBtn,
  #soundToggle,
  [class*="sound-toggle"],
  [id*="soundBtn"],
  [class*="header-settings"],
  [class*="header-right"] > button:nth-child(3),
  [class*="header-right"] > button:nth-child(4) {
    display: none !important;
  }

  /* Compact balance display */
  [class*="balance"],
  [id*="balance"],
  [class*="player-balance"],
  [id*="playerBalance"] {
    font-size: 0.875rem !important;
    padding: 4px 8px !important;
  }

  /* Hamburger menu always accessible */
  [class*="hamburger"],
  [class*="menu-toggle"],
  [id*="menuToggle"],
  [id*="hamburger"] {
    display: block !important;
    min-width: 44px !important;
    min-height: 44px !important;
    position: relative !important;
    z-index: 1000 !important;
  }

  /* --------------------------------------------------------------------------
     5. GAME GRID - 2 columns on mobile, smaller cards
     -------------------------------------------------------------------------- */

  [class*="game-grid"],
  [class*="games-container"],
  [id*="gameGrid"],
  [class*="slot-games"],
  .grid,
  .games {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  /* Game cards */
  [class*="game-card"],
  [class*="slot-card"],
  [id*="gameCard"],
  .game-item,
  [class*="game-item"] {
    border-radius: 8px !important;
    padding: 8px !important;
    overflow: hidden !important;
    aspect-ratio: 1 !important;
  }

  /* Game card text */
  [class*="game-card"] [class*="title"],
  [class*="slot-card"] [class*="title"],
  [class*="game-card"] h3,
  [class*="slot-card"] h3,
  [class*="game-item"] h3 {
    font-size: 0.75rem !important;
    margin: 4px 0 !important;
  }

  [class*="game-card"] [class*="label"],
  [class*="slot-card"] [class*="label"],
  [class*="game-item"] p {
    font-size: 0.625rem !important;
  }

  /* --------------------------------------------------------------------------
     6. TOUCH IMPROVEMENTS - 44px minimum tap targets, no hovers on touch
     -------------------------------------------------------------------------- */

  button,
  a,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  [class*="btn"],
  [class*="button"] {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
  }

  /* Remove hover effects on touch devices */
  @media (hover: none) and (pointer: coarse) {
    button:hover,
    a:hover,
    [role="button"]:hover,
    [class*="btn"]:hover,
    [class*="button"]:hover {
      background-color: inherit !important;
      transform: none !important;
      box-shadow: none !important;
    }
  }

  /* Add :active states for touch feedback */
  button:active,
  a:active,
  [role="button"]:active,
  [class*="btn"]:active,
  [class*="button"]:active {
    opacity: 0.8 !important;
    transform: scale(0.98) !important;
  }

  /* --------------------------------------------------------------------------
     7. SLOT MACHINE VIEW - Full-width reels, compact controls
     -------------------------------------------------------------------------- */

  [class*="slot-machine"],
  [id*="slotMachine"],
  [class*="slot-container"],
  [id*="slotContainer"],
  [class*="reel-container"],
  [id*="reelContainer"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Slot reels - full width */
  [class*="reel"],
  [id*="reel"],
  [class*="reel-set"],
  [id*="reelSet"] {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  [class*="single-reel"],
  [id*="singleReel"],
  .reel {
    flex: 1 !important;
    min-width: 60px !important;
    max-width: calc(33.33% - 3px) !important;
    aspect-ratio: 1 !important;
  }

  /* Compact controls below reels */
  [class*="slot-controls"],
  [id*="slotControls"],
  [class*="game-controls"],
  [id*="gameControls"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px !important;
    width: 100% !important;
  }

  /* Spin button - always large and visible */
  #spinBtn,
  #spin-button,
  [class*="spin-button"],
  [id*="spinButton"],
  button[class*="spin"] {
    width: 100% !important;
    min-height: 50px !important;
    font-size: 1rem !important;
    padding: 12px !important;
    background-color: #00ff41 !important;
    color: #020c02 !important;
    border: none !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    margin-top: 8px !important;
  }

  /* Bet controls in single row */
  [class*="bet-controls"],
  [id*="betControls"],
  [class*="controls-row"] {
    display: flex !important;
    gap: 4px !important;
    width: 100% !important;
  }

  [class*="bet-controls"] button,
  [id*="betControls"] button,
  [class*="controls-row"] button {
    flex: 1 !important;
    min-height: 40px !important;
    font-size: 0.875rem !important;
  }

  /* Display values (bet amount, win amount) */
  [class*="bet-amount"],
  [class*="win-amount"],
  [class*="stake"],
  [id*="betAmount"],
  [id*="winAmount"] {
    font-size: 0.875rem !important;
    text-align: center !important;
  }

  /* --------------------------------------------------------------------------
     8. NOTIFICATION/TOAST POSITIONING - Above bottom nav
     -------------------------------------------------------------------------- */

  [class*="toast"],
  [class*="notification"],
  [id*="notification"],
  [class*="alert"],
  .toast,
  .notification {
    bottom: 80px !important;
    left: 8px !important;
    right: 8px !important;
    max-width: calc(100% - 16px) !important;
    margin: 0 !important;
    border-radius: 4px !important;
    z-index: 999 !important;
  }

  /* Social proof / live wins feed positioning */
  [class*="social-proof"],
  [id*="socialProof"],
  [class*="live-feed"],
  [id*="liveFeed"],
  [class*="wins-feed"] {
    position: fixed !important;
    bottom: 80px !important;
    right: 8px !important;
    max-width: 280px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    z-index: 998 !important;
  }

  /* Individual feed items - scrollable */
  [class*="social-proof"] > div,
  [class*="live-feed"] > div,
  [class*="wins-feed"] > div {
    margin-bottom: 4px !important;
    padding: 6px !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
  }

  /* --------------------------------------------------------------------------
     9. SAFE AREAS - Notch support for modern devices
     -------------------------------------------------------------------------- */

  /* Bottom navigation safe area */
  [class*="bottom-nav"],
  nav[class*="mobile"],
  #mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom) !important;
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }

  /* Header safe area */
  header,
  [class*="header"],
  [id*="Header"] {
    padding-top: env(safe-area-inset-top) !important;
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }

  /* Side panels safe area */
  aside,
  [class*="sidebar"],
  [class*="panel-left"],
  [class*="panel-right"] {
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }

  /* Main content safe area */
  main,
  [class*="main-content"],
  [id*="mainContent"],
  [class*="content"] {
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

}

/* ============================================================================
   COMPACT HEADER BREAKPOINT: ≤480px
   ============================================================================ */

@media (max-width: 480px) {

  /* Reduce header size further */
  header,
  [class*="header"],
  [id*="Header"] {
    min-height: 48px !important;
  }

  /* Hide logo text, keep icon only */
  [class*="logo-text"],
  [id*="logoText"],
  .logo-text {
    display: none !important;
  }

  /* Balance display ultra-compact */
  [class*="balance"],
  [id*="balance"],
  [class*="player-balance"],
  [id*="playerBalance"] {
    font-size: 0.75rem !important;
    padding: 2px 4px !important;
  }

  /* Game grid - ensure 2 columns fit */
  [class*="game-grid"],
  [class*="games-container"],
  [id*="gameGrid"],
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  /* Slot machine - tighter spacing */
  [class*="slot-container"],
  [id*="slotContainer"] {
    padding: 4px !important;
  }

  [class*="reel"] {
    gap: 2px !important;
  }

  [class*="single-reel"],
  .reel {
    min-width: 50px !important;
  }

  /* Stack controls vertically for ultra-compact layout */
  [class*="slot-controls"],
  [class*="game-controls"] {
    gap: 6px !important;
    padding: 6px !important;
  }

  /* Smaller spin button font */
  button[class*="spin"],
  #spinBtn {
    font-size: 0.95rem !important;
    min-height: 44px !important;
    padding: 10px !important;
  }

  /* Toast positioning even higher on ultra-compact screens */
  [class*="toast"],
  [class*="notification"],
  .notification {
    bottom: 70px !important;
  }

  /* Disable shadow effects to save space visually */
  [class*="game-card"],
  [class*="slot-card"],
  button,
  [class*="card"] {
    box-shadow: none !important;
  }

}

/* ============================================================================
   LANDSCAPE ORIENTATION FIXES (max-height: 500px)
   ============================================================================ */

@media (max-height: 500px) {

  /* Hide header in extreme landscape */
  header,
  [class*="header"],
  nav[class*="top"] {
    min-height: auto !important;
  }

  /* Reduce game card heights in landscape */
  [class*="game-card"],
  [class*="slot-card"] {
    aspect-ratio: auto !important;
    max-height: 120px !important;
  }

  /* Compact slot machine in landscape */
  [class*="single-reel"],
  .reel {
    max-height: 100px !important;
  }

}

/* ============================================================================
   ACCESSIBILITY & GENERAL MOBILE IMPROVEMENTS
   ============================================================================ */

@media (max-width: 640px) {

  /* Ensure text is readable */
  * {
    -webkit-text-size-adjust: 100% !important;
  }

  /* Prevent zoom on input focus */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Remove horizontal scrolling */
  body,
  html {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* Smooth scrolling for better UX */
  html {
    scroll-behavior: smooth !important;
  }

  /* Images responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Tables responsive */
  table {
    width: 100% !important;
    border-collapse: collapse !important;
  }

  table td,
  table th {
    padding: 8px 4px !important;
    font-size: 0.875rem !important;
  }

}