/* Royal Slots Casino - Bundled Styles */
/* Generated: 2026-03-26T04:44:56.405Z */


/* ─── styles.css (1/6) ─── */
        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-meta-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 1px;
        }
        .game-provider {
            font-size: 10px;
            color: var(--rg-text-muted, #8a8a8a);
            font-weight: 400;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .game-rtp-badge {
            font-size: 9px;
            font-weight: 700;
            color: #10b981;
            background: rgba(16,185,129,0.1);
            border: 1px solid rgba(16,185,129,0.2);
            border-radius: 4px;
            padding: 1px 5px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        /* 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: 56px;
            height: 56px;
            border: 3px solid rgba(255, 215, 0, 0.15);
            border-top-color: #ffd700;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            position: relative;
        }
        .spinner::after {
            content: '';
            position: absolute;
            inset: 6px;
            border: 2px solid rgba(255, 215, 0, 0.1);
            border-bottom-color: rgba(255, 215, 0, 0.6);
            border-radius: 50%;
            animation: spin 1.2s linear infinite reverse;
        }

        @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 1 0;
            min-height: 0;
            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;
            flex-shrink: 1;
            min-height: 0;
            max-height: 100%;
            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: 80px;
            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: 10px;
            font-weight: 700;
            color: rgba(255,255,255,0.55);
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

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

        .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.18));
            background: var(--slot-panel-bg, rgba(255,255,255,0.07));
            color: rgba(255,255,255,0.65);
            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.15));
            background: var(--slot-panel-bg, rgba(255,255,255,0.06));
            color: rgba(255,255,255,0.5);
            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.15);
            background: rgba(255,255,255,0.06);
            color: rgba(255,255,255,0.5);
            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: 14px;
            }

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

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

/* ================================================================
   PROVIDER-SPECIFIC LAYOUT SKINS
   Structural layout differentiation per game provider.
   Applied via data-provider="xxx" attribute on #slotModal.
   Each provider gets a genuinely different HUD arrangement:
   not just colors, but position, order, size and structure.
   ================================================================ */

/* ---------------------------------------------------------------
   NOVASPIN STUDIOS — NetEnt-inspired: Minimalist Inverted Layout
   Controls move to TOP, game title bar drops to BOTTOM,
   reels fill the middle. Floating pill-style info displays.
   --------------------------------------------------------------- */
#slotModal[data-provider="novaspin-studios"] .slot-modal-fullscreen {
    background: #03060d !important;
}
#slotModal[data-provider="novaspin-studios"] .slot-bottom-bar {
    order: -2 !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(0,229,255,0.14) !important;
    min-height: 58px !important;
    background: linear-gradient(180deg, #020c18 0%, #010910 100%) !important;
    justify-content: space-evenly !important;
    gap: 8px !important;
    padding: 6px 24px !important;
}
#slotModal[data-provider="novaspin-studios"] .slot-reel-area {
    order: -1 !important;
    flex: 1 !important;
}
#slotModal[data-provider="novaspin-studios"] .slot-top-bar {
    order: 999 !important;
    border-bottom: none !important;
    border-top: 1px solid rgba(0,229,255,0.08) !important;
    background: rgba(2,8,18,0.98) !important;
    min-height: 34px !important;
    padding: 4px 16px !important;
    justify-content: center !important;
    gap: 20px !important;
}
#slotModal[data-provider="novaspin-studios"] .slot-bar-section {
    background: rgba(0,229,255,0.05) !important;
    border: 1px solid rgba(0,229,255,0.22) !important;
    border-radius: 24px !important;
    padding: 3px 18px !important;
}
#slotModal[data-provider="novaspin-studios"] .slot-bar-label {
    color: rgba(0,229,255,0.35) !important;
    font-size: 7px !important;
    letter-spacing: 2.5px !important;
}
#slotModal[data-provider="novaspin-studios"] .slot-bar-value {
    color: #00e5ff !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
}
#slotModal[data-provider="novaspin-studios"] #spinBtn {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #006fdb 0%, #00e5ff 100%) !important;
    border: 1px solid rgba(0,229,255,0.4) !important;
    box-shadow: 0 0 26px rgba(0,229,255,0.5) !important;
}
#slotModal[data-provider="novaspin-studios"] .slot-turbo-btn,
#slotModal[data-provider="novaspin-studios"] .slot-auto-btn {
    background: rgba(0,229,255,0.06) !important;
    border: 1px solid rgba(0,229,255,0.16) !important;
    border-radius: 50% !important;
    width: 38px !important;
    height: 38px !important;
}

/* ---------------------------------------------------------------
   CELESTIAL PLAYS — Pragmatic Vegas: Wide Bottom, Dominant Spin
   Controls spread left, giant golden SPIN button dominates center-right.
   --------------------------------------------------------------- */
#slotModal[data-provider="celestial-plays"] .slot-bottom-bar {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 24px !important;
    min-height: 84px !important;
    background: linear-gradient(180deg, #0a0608 0%, #060409 100%) !important;
    border-top: 2px solid rgba(255,180,0,0.18) !important;
}
#slotModal[data-provider="celestial-plays"] .slot-bar-balance { order: 1 !important; }
#slotModal[data-provider="celestial-plays"] .slot-bar-bet { order: 2 !important; }
#slotModal[data-provider="celestial-plays"] .slot-bar-win { order: 3 !important; }
#slotModal[data-provider="celestial-plays"] .slot-auto-btn {
    order: 8 !important;
    margin-left: auto !important;
}
#slotModal[data-provider="celestial-plays"] #spinBtn {
    order: 9 !important;
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 38% 38%, #ffe082, #f57c00) !important;
    border: 3px solid rgba(255,190,0,0.65) !important;
    box-shadow: 0 0 36px rgba(255,150,0,0.7), 0 4px 14px rgba(0,0,0,0.6) !important;
    transform: scale(1.06) !important;
    flex-shrink: 0 !important;
}
#slotModal[data-provider="celestial-plays"] .slot-turbo-btn { order: 10 !important; }
#slotModal[data-provider="celestial-plays"] .slot-top-bar {
    min-height: 36px !important;
    background: linear-gradient(180deg, #080506 0%, #050407 100%) !important;
    border-bottom: 1px solid rgba(255,180,0,0.12) !important;
}
#slotModal[data-provider="celestial-plays"] .slot-bar-label { color: rgba(255,200,80,0.45) !important; }
#slotModal[data-provider="celestial-plays"] .slot-bar-value { color: #ffe566 !important; }

/* ---------------------------------------------------------------
   IRONREEL ENTERTAINMENT — Microgaming Classic: Thick Chrome Strip
   Square boxy controls, no rounded corners, metallic chrome border.
   --------------------------------------------------------------- */
#slotModal[data-provider="ironreel-entertainment"] .slot-modal-fullscreen {
    background: #0a0a0a !important;
}
#slotModal[data-provider="ironreel-entertainment"] .slot-top-bar {
    background: linear-gradient(180deg, #2c2c2c 0%, #1c1c1c 100%) !important;
    border-bottom: 3px solid #444 !important;
    border-top: 2px solid #585858 !important;
    min-height: 50px !important;
    box-shadow: 0 3px 0 #000, inset 0 -2px 0 rgba(255,255,255,0.04) !important;
}
#slotModal[data-provider="ironreel-entertainment"] .slot-bottom-bar {
    background: linear-gradient(180deg, #1c1c1c 0%, #242424 100%) !important;
    border-top: 3px solid #444 !important;
    border-bottom: 2px solid #585858 !important;
    min-height: 70px !important;
    padding: 6px 14px !important;
    gap: 5px !important;
    justify-content: space-between !important;
    box-shadow: 0 -3px 0 #000, inset 0 2px 4px rgba(0,0,0,0.8) !important;
}
#slotModal[data-provider="ironreel-entertainment"] .slot-bar-section {
    border-radius: 2px !important;
    border: 2px solid #3c3c3c !important;
    background: linear-gradient(180deg, #272727 0%, #1e1e1e 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 0 #000 !important;
    padding: 4px 10px !important;
    min-height: 52px !important;
    justify-content: center !important;
}
#slotModal[data-provider="ironreel-entertainment"] .slot-bar-label {
    color: #5a5a5a !important;
    font-size: 8px !important;
    letter-spacing: 1px !important;
    font-family: "Courier New", monospace !important;
    text-transform: uppercase !important;
}
#slotModal[data-provider="ironreel-entertainment"] .slot-bar-value {
    font-family: "Courier New", monospace !important;
    font-size: 16px !important;
    color: #d4a96a !important;
    font-weight: 700 !important;
}
#slotModal[data-provider="ironreel-entertainment"] .slot-bet-btn,
#slotModal[data-provider="ironreel-entertainment"] .slot-turbo-btn,
#slotModal[data-provider="ironreel-entertainment"] .slot-auto-btn {
    border-radius: 2px !important;
    border: 2px solid #3c3c3c !important;
    background: linear-gradient(180deg, #2e2e2e 0%, #1e1e1e 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 0 #000 !important;
    width: 40px !important;
    height: 40px !important;
    color: #888 !important;
}
#slotModal[data-provider="ironreel-entertainment"] #spinBtn {
    border-radius: 4px !important;
    width: 66px !important;
    height: 58px !important;
    background: linear-gradient(180deg, #5c3800 0%, #3d2500 100%) !important;
    border: 2px solid #8c5e00 !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.1), 0 3px 0 #000, 0 0 22px rgba(180,110,0,0.3) !important;
}
#slotModal[data-provider="ironreel-entertainment"] .reels-container {
    border: 5px solid #333 !important;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.7), 0 0 0 2px #555, 0 0 0 4px #1a1a1a !important;
}
#slotModal[data-provider="ironreel-entertainment"] .slot-title,
#slotModal[data-provider="ironreel-entertainment"] .slot-provider {
    font-family: "Courier New", monospace !important;
    color: #d4a96a !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

/* ---------------------------------------------------------------
   VAULTX GAMING — Evolution Cinematic: Full-Height Reels + Glass Overlay
   Bottom controls float as semi-transparent glass bar OVER the reels.
   --------------------------------------------------------------- */
#slotModal[data-provider="vaultx-gaming"] .slot-modal-fullscreen {
    background: #000 !important;
    position: relative !important;
}
#slotModal[data-provider="vaultx-gaming"] .slot-reel-area {
    flex: 1 !important;
    padding-bottom: 76px !important;
}
#slotModal[data-provider="vaultx-gaming"] .slot-bottom-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    min-height: 74px !important;
    background: rgba(4,6,14,0.80) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    z-index: 20 !important;
    padding: 8px 20px !important;
}
#slotModal[data-provider="vaultx-gaming"] .slot-top-bar {
    background: linear-gradient(180deg, rgba(0,0,0,0.96) 0%, rgba(4,6,14,0.94) 100%) !important;
    border-bottom: 1px solid rgba(0,255,65,0.10) !important;
    min-height: 38px !important;
    padding: 4px 16px !important;
}
#slotModal[data-provider="vaultx-gaming"] #spinBtn {
    background: linear-gradient(135deg, #004d20 0%, #00c235 100%) !important;
    border: 1px solid rgba(0,194,53,0.5) !important;
    box-shadow: 0 0 30px rgba(0,194,53,0.45) !important;
    border-radius: 50% !important;
    width: 62px !important;
    height: 62px !important;
}
#slotModal[data-provider="vaultx-gaming"] .slot-bar-section {
    background: rgba(0,255,65,0.04) !important;
    border-color: rgba(0,255,65,0.14) !important;
}
#slotModal[data-provider="vaultx-gaming"] .slot-bar-label { color: rgba(0,200,60,0.5) !important; }
#slotModal[data-provider="vaultx-gaming"] .slot-bar-value { color: #4dff80 !important; }

/* ---------------------------------------------------------------
   PHANTOMWORKS — Underground Adult: Asymmetric Scattered Controls
   Spin button at far LEFT. Balance pushed to far RIGHT.
   Bet controls in the middle. Neon purple outlines.
   --------------------------------------------------------------- */
#slotModal[data-provider="phantomworks"] .slot-modal-fullscreen {
    background: #08000f !important;
}
#slotModal[data-provider="phantomworks"] .slot-top-bar {
    background: linear-gradient(180deg, #0c0018 0%, #080012 100%) !important;
    border-bottom: 1px solid rgba(160,0,255,0.22) !important;
}
#slotModal[data-provider="phantomworks"] .slot-bottom-bar {
    justify-content: flex-start !important;
    padding: 10px 14px !important;
    min-height: 76px !important;
    gap: 8px !important;
    background: linear-gradient(180deg, #0e001a 0%, #07000f 100%) !important;
    border-top: 1px solid rgba(160,0,255,0.28) !important;
}
#slotModal[data-provider="phantomworks"] #spinBtn {
    order: -10 !important;
    width: 66px !important;
    height: 66px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #3c0062 0%, #9800e8 100%) !important;
    border: 2px solid rgba(160,0,255,0.65) !important;
    box-shadow: 0 0 28px rgba(160,0,255,0.55), inset 0 0 14px rgba(255,0,255,0.08) !important;
    flex-shrink: 0 !important;
    margin-right: 2px !important;
}
#slotModal[data-provider="phantomworks"] .slot-auto-btn { order: -9 !important; }
#slotModal[data-provider="phantomworks"] .slot-bar-bet { order: -8 !important; margin-left: 10px !important; }
#slotModal[data-provider="phantomworks"] .slot-bar-win { order: -7 !important; }
#slotModal[data-provider="phantomworks"] .slot-turbo-btn { order: 50 !important; }
#slotModal[data-provider="phantomworks"] .slot-bar-balance {
    order: 999 !important;
    margin-left: auto !important;
}
#slotModal[data-provider="phantomworks"] .slot-bar-section {
    border-color: rgba(160,0,255,0.32) !important;
    box-shadow: 0 0 8px rgba(160,0,255,0.14) !important;
}
#slotModal[data-provider="phantomworks"] .slot-bar-label {
    color: rgba(200,0,255,0.45) !important;
    font-family: "Courier New", monospace !important;
    font-size: 7px !important;
    letter-spacing: 2px !important;
}
#slotModal[data-provider="phantomworks"] .slot-bar-value { color: #dd80ff !important; }
#slotModal[data-provider="phantomworks"] .slot-bet-btn,
#slotModal[data-provider="phantomworks"] .slot-turbo-btn {
    border-color: rgba(160,0,255,0.38) !important;
    color: #c084fc !important;
}

/* ---------------------------------------------------------------
   SOLSTICEFX — NoLimit City: High-Volatility Energy
   MASSIVE pulsing spin button dominates. Everything else fades.
   --------------------------------------------------------------- */
#slotModal[data-provider="solsticefx"] .slot-modal-fullscreen { background: #060010 !important; }
#slotModal[data-provider="solsticefx"] .slot-top-bar {
    background: linear-gradient(180deg, #0b0015 0%, #070010 100%) !important;
    border-bottom: 1px solid rgba(220,38,38,0.16) !important;
}
#slotModal[data-provider="solsticefx"] .slot-bottom-bar {
    min-height: 92px !important;
    background: linear-gradient(180deg, #0c0018 0%, #060010 100%) !important;
    border-top: 2px solid rgba(220,38,38,0.34) !important;
    padding: 8px 16px !important;
    align-items: center !important;
    gap: 10px !important;
}
#slotModal[data-provider="solsticefx"] #spinBtn {
    width: 84px !important;
    height: 84px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 36% 36%, #ff4040, #aa0000) !important;
    border: 3px solid rgba(255,60,60,0.72) !important;
    box-shadow: 0 0 44px rgba(220,38,38,0.85), 0 0 90px rgba(220,38,38,0.28), inset 0 2px 4px rgba(255,100,100,0.3) !important;
    animation: solsticeSpinGlow 1.4s ease-in-out infinite !important;
    flex-shrink: 0 !important;
}
@keyframes solsticeSpinGlow {
    0%, 100% { box-shadow: 0 0 44px rgba(220,38,38,0.85), 0 0 90px rgba(220,38,38,0.28); transform: scale(1); }
    50% { box-shadow: 0 0 64px rgba(255,50,50,1), 0 0 130px rgba(220,38,38,0.5); transform: scale(1.05); }
}
#slotModal[data-provider="solsticefx"] .slot-bar-section {
    opacity: 0.62 !important;
    transform: scale(0.90) !important;
}
#slotModal[data-provider="solsticefx"] .slot-bar-value {
    color: #ff6666 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}
#slotModal[data-provider="solsticefx"] .slot-bar-label {
    color: rgba(255,80,80,0.4) !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
}
#slotModal[data-provider="solsticefx"] .slot-auto-btn,
#slotModal[data-provider="solsticefx"] .slot-turbo-btn {
    width: 34px !important;
    height: 34px !important;
    border-color: rgba(220,38,38,0.22) !important;
    color: rgba(255,80,80,0.55) !important;
    opacity: 0.65 !important;
}

/* ---------------------------------------------------------------
   GOLDENEDGE GAMING — Modern App: Vertical Right-Side Control Panel
   Bottom bar becomes a VERTICAL side column on the RIGHT.
   Reels fill the full remaining left width.
   --------------------------------------------------------------- */
#slotModal[data-provider="goldenedge-gaming"] .slot-modal-fullscreen {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    background: #040a0f !important;
}
#slotModal[data-provider="goldenedge-gaming"] .slot-top-bar {
    width: 100% !important;
    flex-shrink: 0 !important;
    order: 0 !important;
    border-bottom: 1px solid rgba(224,64,251,0.16) !important;
    background: linear-gradient(90deg, #040a0f 0%, #060c12 100%) !important;
    min-height: 42px !important;
}
#slotModal[data-provider="goldenedge-gaming"] .slot-reel-area {
    flex: 1 !important;
    order: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    align-self: stretch !important;
}
#slotModal[data-provider="goldenedge-gaming"] .slot-bottom-bar {
    width: 74px !important;
    flex-shrink: 0 !important;
    order: 2 !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 0 !important;
    border-top: none !important;
    border-left: 1px solid rgba(224,64,251,0.16) !important;
    padding: 14px 6px !important;
    gap: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: linear-gradient(180deg, #050c11 0%, #040a0e 100%) !important;
    align-self: stretch !important;
}
#slotModal[data-provider="goldenedge-gaming"] .slot-bar-section {
    width: 60px !important;
    min-width: 0 !important;
    padding: 5px 4px !important;
    border-radius: 10px !important;
    border-color: rgba(224,64,251,0.18) !important;
    text-align: center !important;
}
#slotModal[data-provider="goldenedge-gaming"] .slot-bar-label {
    font-size: 6px !important;
    letter-spacing: 1px !important;
    color: rgba(224,64,251,0.4) !important;
}
#slotModal[data-provider="goldenedge-gaming"] .slot-bar-value {
    font-size: 11px !important;
    color: #f0b0ff !important;
    word-break: break-all !important;
}
#slotModal[data-provider="goldenedge-gaming"] .slot-bar-bet {
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    width: 60px !important;
}
#slotModal[data-provider="goldenedge-gaming"] .slot-bet-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    font-size: 14px !important;
}
#slotModal[data-provider="goldenedge-gaming"] .bet-x2-btn,
#slotModal[data-provider="goldenedge-gaming"] .bet-half-btn { display: none !important; }
#slotModal[data-provider="goldenedge-gaming"] #spinBtn {
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #8b1a80 0%, #e040fb 100%) !important;
    border: 2px solid rgba(224,64,251,0.55) !important;
    box-shadow: 0 0 28px rgba(224,64,251,0.5) !important;
    flex-shrink: 0 !important;
}
#slotModal[data-provider="goldenedge-gaming"] .slot-turbo-btn,
#slotModal[data-provider="goldenedge-gaming"] .slot-auto-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border-color: rgba(224,64,251,0.22) !important;
}
#slotModal[data-provider="goldenedge-gaming"] .slot-auto-btn {
    flex-direction: column !important;
    font-size: 8px !important;
}
#slotModal[data-provider="goldenedge-gaming"] .fs-toggle-btn,
#slotModal[data-provider="goldenedge-gaming"] .ambient-toggle-btn,
#slotModal[data-provider="goldenedge-gaming"] .bet-lock-btn,
#slotModal[data-provider="goldenedge-gaming"] .auto-stop-win-btn,
#slotModal[data-provider="goldenedge-gaming"] .spin-counter-badge { display: none !important; }

/* ---------------------------------------------------------------
   ARCADEFORGE — Retro Arcade: Pixel Borders, Monochrome CRT Green
   Hard pixel borders, neon green-on-black, no curves.
   Compact control strip, equal-width blocky buttons.
   --------------------------------------------------------------- */
#slotModal[data-provider="arcadeforge"] .slot-modal-fullscreen { background: #010301 !important; }
#slotModal[data-provider="arcadeforge"] .slot-top-bar {
    background: #030603 !important;
    border-bottom: 4px solid #00ff41 !important;
    border-top: none !important;
    min-height: 46px !important;
    box-shadow: 0 4px 0 #003800 !important;
}
#slotModal[data-provider="arcadeforge"] .slot-top-bar * {
    font-family: "Courier New", Courier, monospace !important;
}
#slotModal[data-provider="arcadeforge"] .slot-bottom-bar {
    background: #020402 !important;
    border-top: 4px solid #00ff41 !important;
    min-height: 64px !important;
    padding: 6px 12px !important;
    gap: 6px !important;
    justify-content: center !important;
    box-shadow: 0 -4px 0 #003800 !important;
}
#slotModal[data-provider="arcadeforge"] .slot-bar-section {
    border-radius: 0 !important;
    border: 2px solid #00ff41 !important;
    background: #010801 !important;
    box-shadow: 3px 3px 0 #003300 !important;
    padding: 4px 10px !important;
    min-height: 50px !important;
    justify-content: center !important;
}
#slotModal[data-provider="arcadeforge"] .slot-bar-label {
    color: #006600 !important;
    font-family: "Courier New", monospace !important;
    font-size: 7px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}
#slotModal[data-provider="arcadeforge"] .slot-bar-value {
    color: #00ff41 !important;
    font-family: "Courier New", monospace !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}
#slotModal[data-provider="arcadeforge"] .slot-bet-btn,
#slotModal[data-provider="arcadeforge"] .slot-turbo-btn,
#slotModal[data-provider="arcadeforge"] .slot-auto-btn {
    border-radius: 0 !important;
    border: 2px solid #00ff41 !important;
    background: #010801 !important;
    box-shadow: 2px 2px 0 #003300 !important;
    color: #00ff41 !important;
    width: 38px !important;
    height: 38px !important;
}
#slotModal[data-provider="arcadeforge"] #spinBtn {
    border-radius: 0 !important;
    width: 60px !important;
    height: 56px !important;
    background: linear-gradient(180deg, #004400 0%, #001a00 100%) !important;
    border: 3px solid #00ff41 !important;
    box-shadow: 3px 3px 0 #003300, 0 0 18px rgba(0,255,65,0.45) !important;
    color: #00ff41 !important;
}
#slotModal[data-provider="arcadeforge"] .slot-title,
#slotModal[data-provider="arcadeforge"] .slot-provider {
    font-family: "Courier New", Courier, monospace !important;
    color: #00ff41 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}
#slotModal[data-provider="arcadeforge"] .reels-container {
    border: 4px solid #00ff41 !important;
    box-shadow: 0 0 0 2px #003300, 0 0 22px rgba(0,255,65,0.22) !important;
}
#slotModal[data-provider="arcadeforge"] .slot-bet-display {
    border-radius: 0 !important;
    border-color: #00ff41 !important;
}
#slotModal[data-provider="arcadeforge"] .slot-close-btn {
    border-radius: 0 !important;
    border-color: #00ff41 !important;
    color: #00ff41 !important;
}

/* END PROVIDER LAYOUT SKINS */


/* ===================================================================
   SLOT-GAME-ACTIVE: Suppress ALL overlay/popup/modal elements
   while a slot game is open. body.slot-game-active is set by ui-slot.js
   whenever #slotModal has the .active class.
   =================================================================== */

/* Loss-streak intervention */
body.slot-game-active .loss-streak-overlay,
body.slot-game-active .loss-streak-fullscreen-overlay,
body.slot-game-active .loss-streak-low-balance-overlay,
body.slot-game-active .loss-streak-banner,
body.slot-game-active .loss-streak-modal,
/* Spin-streak badge and leaderboard */
body.slot-game-active #spin-streak-badge,
body.slot-game-active #spin-streak-leaderboard-panel,
/* Achievement popups */
body.slot-game-active .achievement-container,
body.slot-game-active .achievement-popup,
body.slot-game-active .progress-toast,
/* Daily login calendar */
body.slot-game-active #daily-login-overlay,
body.slot-game-active #daily-login-modal,
/* Deposit nudge modals */
body.slot-game-active [id*="deposit-nudge"],
body.slot-game-active [id*="depositNudge"],
body.slot-game-active [id*="smart-deposit"],
/* Reality check */
body.slot-game-active [id*="reality-check"],
body.slot-game-active [id*="realityCheck"],
/* Re-engagement / session reengage */
body.slot-game-active [id*="reengagement"],
body.slot-game-active [id*="re-engagement"],
body.slot-game-active [id*="session-reengage"],
/* Flash bonus */
body.slot-game-active [id*="flash-bonus"],
body.slot-game-active [id*="flashBonus"],
/* Comeback offers */
body.slot-game-active [id*="comebackOffer"],
body.slot-game-active [id*="comeback-offer"],
/* Exit intent */
body.slot-game-active [id*="exit-intent"],
body.slot-game-active [id*="exitIntent"],
/* Whale VIP nudge */
body.slot-game-active [id*="whale-vip"],
body.slot-game-active [id*="whaleVip"],
/* Win limit */
body.slot-game-active [id*="winLimitModal"],
body.slot-game-active [id*="win-limit-modal"],
/* Social proof / jackpot winner toasts */
body.slot-game-active [id*="social-proof"],
body.slot-game-active [id*="socialProof"],
body.slot-game-active [id*="jackpot-win"],
/* Generic: any fixed overlay with high z-index — pointer-events blocked
   EXCEPT in-game overlays that must remain visible during slot play */
body.slot-game-active [class*="overlay"]:not(#slotModal):not(.slot-shimmer-overlay):not(.reel-overlay):not(.cascade-overlay):not(.autoplay-modal-overlay):not(.buybonus-overlay):not(.gamble-overlay):not(.bigwin-overlay):not(.jackpot-win-overlay):not(.feature-popup-overlay):not(.pp-win-overlay):not(.csb-overlay):not(.bonus-game-overlay):not(.free-spins-overlay),
body.slot-game-active [class*="modal-backdrop"]:not(#slotModal) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* END SLOT-GAME-ACTIVE SUPPRESSION */

/* ═══════════════════════════════════════════════════════════════════════
   PROVIDER-SPECIFIC UI SKINS — Industry Standard Layout
   Following Pragmatic Play / NetEnt conventions:
   - Spin button always centered, circular, 54-68px, most prominent element
   - Bottom bar: Balance | Bet (+/-) | Spin | Win — consistent left-to-right
   - Top bar: thin (32-44px), game name + close + info
   - Min 44px touch targets on all interactive elements
   - Differentiation via: border style, font, color, radius, material, animation
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. NOVASPIN — Cyber HUD: monospace readouts, scanline texture, sharp edges ── */
.slot-chrome-novaspin .slot-bottom-bar {
    min-height: 64px !important;
    border-top: 2px solid rgba(0,212,255,0.5) !important;
    font-family: "Courier New", "Lucida Console", monospace !important;
}
.slot-chrome-novaspin .slot-bottom-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,212,255,0.02) 2px, rgba(0,212,255,0.02) 4px);
    pointer-events: none;
    z-index: 0;
}
.slot-chrome-novaspin .slot-spin-btn,
.slot-chrome-novaspin #spinBtn {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(0,212,255,0.7) !important;
    box-shadow: 0 0 20px rgba(0,212,255,0.4), inset 0 0 10px rgba(0,212,255,0.15) !important;
}
.slot-chrome-novaspin .slot-top-bar {
    min-height: 34px !important;
    font-family: "Courier New", monospace !important;
    letter-spacing: 2px !important;
    font-size: 11px !important;
    border-bottom: 2px solid rgba(0,212,255,0.4) !important;
}
.slot-chrome-novaspin .reels-container {
    border: 2px solid rgba(0,212,255,0.25) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 30px rgba(0,212,255,0.12), inset 0 0 50px rgba(0,0,0,0.7) !important;
}
.slot-chrome-novaspin .slot-bar-value {
    font-family: "Courier New", monospace !important;
    letter-spacing: 1px !important;
}

/* ── 2. IRONREEL — Steampunk: ridge borders, warm bronze, serif type ── */
.slot-chrome-ironreel .slot-bottom-bar {
    min-height: 68px !important;
    border-top: 4px ridge rgba(212,165,116,0.6) !important;
    background: linear-gradient(180deg, #1a1410 0%, #0d0a07 100%) !important;
    font-family: "Georgia", "Palatino", serif !important;
}
.slot-chrome-ironreel .slot-spin-btn,
.slot-chrome-ironreel #spinBtn {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    border: 4px ridge rgba(212,165,116,0.8) !important;
    box-shadow: 0 0 20px rgba(212,165,116,0.3), inset 0 0 12px rgba(0,0,0,0.5) !important;
    background: radial-gradient(circle at 35% 35%, #d4a574 0%, #6d4c2a 50%, #3d2817 100%) !important;
}
.slot-chrome-ironreel .slot-top-bar {
    min-height: 42px !important;
    border-bottom: 4px ridge rgba(212,165,116,0.5) !important;
    font-family: "Georgia", serif !important;
    letter-spacing: 2px !important;
}
.slot-chrome-ironreel .reels-container {
    border: 4px ridge rgba(212,165,116,0.4) !important;
    border-radius: 6px !important;
    box-shadow: 0 0 20px rgba(139,90,43,0.2), inset 0 0 30px rgba(0,0,0,0.6) !important;
}

/* ── 3. PHANTOMWORKS — Dark Occult: deep purple glow, rune-like borders ── */
.slot-chrome-phantomworks .slot-bottom-bar {
    min-height: 68px !important;
    border-top: 3px solid rgba(153,51,255,0.5) !important;
    background: linear-gradient(180deg, rgba(26,0,51,0.98) 0%, rgba(10,0,20,0.99) 100%) !important;
}
.slot-chrome-phantomworks .slot-spin-btn,
.slot-chrome-phantomworks #spinBtn {
    width: 66px !important;
    height: 66px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(153,51,255,0.7) !important;
    box-shadow: 0 0 30px rgba(153,51,255,0.4), 0 0 60px rgba(153,51,255,0.15), inset 0 0 15px rgba(153,51,255,0.2) !important;
}
.slot-chrome-phantomworks .slot-top-bar {
    min-height: 36px !important;
    border-bottom: 2px solid rgba(153,51,255,0.4) !important;
    text-shadow: 0 0 8px rgba(153,51,255,0.6) !important;
}
.slot-chrome-phantomworks .reels-container {
    border: 3px solid rgba(153,51,255,0.3) !important;
    border-radius: 14px !important;
    box-shadow: 0 0 40px rgba(153,51,255,0.15), inset 0 0 30px rgba(0,0,0,0.7) !important;
}

/* ── 4. GOLDENEDGE — Luxury: thin elegant borders, serif, rose gold ── */
.slot-chrome-goldenedge .slot-bottom-bar {
    min-height: 64px !important;
    border-top: 1px solid rgba(255,105,180,0.3) !important;
    font-family: "Didot", "Bodoni MT", "Georgia", serif !important;
    letter-spacing: 1px !important;
}
.slot-chrome-goldenedge .slot-spin-btn,
.slot-chrome-goldenedge #spinBtn {
    width: 62px !important;
    height: 62px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,105,180,0.5) !important;
    box-shadow: 0 0 20px rgba(255,105,180,0.25), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
.slot-chrome-goldenedge .slot-top-bar {
    min-height: 36px !important;
    border-bottom: 1px solid rgba(255,105,180,0.2) !important;
    font-family: "Didot", "Bodoni MT", serif !important;
    letter-spacing: 3px !important;
    font-size: 12px !important;
}
.slot-chrome-goldenedge .reels-container {
    border: 1px solid rgba(255,105,180,0.15) !important;
    border-radius: 18px !important;
    box-shadow: 0 0 30px rgba(255,105,180,0.08) !important;
}

/* ── 5. VAULTX — Industrial: monospace LED, sharp corners, steel borders ── */
.slot-chrome-vaultx .slot-bottom-bar {
    min-height: 64px !important;
    border-top: 3px solid rgba(160,160,160,0.4) !important;
    font-family: "Consolas", "Lucida Console", monospace !important;
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%) !important;
}
.slot-chrome-vaultx .slot-spin-btn,
.slot-chrome-vaultx #spinBtn {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(160,160,160,0.5) !important;
    background: radial-gradient(circle at 40% 35%, #555 0%, #222 60%, #111 100%) !important;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.08), 0 0 15px rgba(255,165,0,0.15) !important;
}
.slot-chrome-vaultx .slot-bar-value {
    font-family: "Consolas", monospace !important;
    color: #ffa500 !important;
    text-shadow: 0 0 6px rgba(255,165,0,0.5) !important;
}
.slot-chrome-vaultx .slot-top-bar {
    min-height: 38px !important;
    border-bottom: 3px solid rgba(160,160,160,0.3) !important;
    font-family: "Consolas", monospace !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}
.slot-chrome-vaultx .reels-container {
    border: 3px solid rgba(160,160,160,0.25) !important;
    border-radius: 2px !important;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.8), 0 0 15px rgba(160,160,160,0.08) !important;
}

/* ── 6. CELESTIAL — Ethereal: frosted glass panels, soft gold glow ── */
.slot-chrome-celestial .slot-bottom-bar {
    min-height: 64px !important;
    background: rgba(0,0,0,0.35) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid rgba(255,215,0,0.15) !important;
}
.slot-chrome-celestial .slot-spin-btn,
.slot-chrome-celestial #spinBtn {
    width: 62px !important;
    height: 62px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,215,0,0.35) !important;
    background: radial-gradient(circle, rgba(255,215,0,0.25) 0%, rgba(255,215,0,0.03) 70%, transparent 100%) !important;
    box-shadow: 0 0 25px rgba(255,215,0,0.15) !important;
}
.slot-chrome-celestial .slot-top-bar {
    min-height: 36px !important;
    background: rgba(0,0,0,0.25) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(255,215,0,0.1) !important;
}
.slot-chrome-celestial .reels-container {
    border: 1px solid rgba(255,215,0,0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 0 40px rgba(255,215,0,0.06) !important;
}

/* ── 7. ARCADEFORGE — Retro: chunky borders, monospace, neon green ── */
.slot-chrome-arcadeforge .slot-bottom-bar {
    min-height: 68px !important;
    border-top: 3px solid rgba(0,255,0,0.5) !important;
    background: linear-gradient(180deg, #001a00 0%, #000d00 100%) !important;
    font-family: "Courier New", monospace !important;
}
.slot-chrome-arcadeforge .slot-spin-btn,
.slot-chrome-arcadeforge #spinBtn {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(0,255,0,0.6) !important;
    background: radial-gradient(circle at 40% 35%, #005500 0%, #002200 60%, #001100 100%) !important;
    box-shadow: 0 0 20px rgba(0,255,0,0.25) !important;
}
.slot-chrome-arcadeforge .slot-top-bar {
    min-height: 38px !important;
    border-bottom: 3px solid rgba(0,255,0,0.4) !important;
    font-family: "Courier New", monospace !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
}
.slot-chrome-arcadeforge .reels-container {
    border: 3px solid rgba(0,255,0,0.25) !important;
    border-radius: 6px !important;
    box-shadow: 0 0 25px rgba(0,255,0,0.08), inset 0 0 30px rgba(0,0,0,0.7) !important;
}
.slot-chrome-arcadeforge .slot-bar-value {
    font-family: "Courier New", monospace !important;
    color: #00ff00 !important;
    text-shadow: 0 0 6px rgba(0,255,0,0.5) !important;
}

/* ── 8. SOLSTICEFX — Minimalist Fire: compact UI, max reel visibility ── */
.slot-chrome-solstice .slot-bottom-bar {
    min-height: 56px !important;
    padding: 4px 16px !important;
    border-top: 1px solid rgba(255,68,68,0.3) !important;
    background: rgba(0,0,0,0.88) !important;
}
.slot-chrome-solstice .slot-spin-btn,
.slot-chrome-solstice #spinBtn {
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,68,68,0.5) !important;
    background: radial-gradient(circle, #660000 0%, #330000 100%) !important;
    box-shadow: 0 0 15px rgba(255,68,68,0.3) !important;
}
.slot-chrome-solstice .slot-top-bar {
    min-height: 32px !important;
    padding: 2px 16px !important;
    border-bottom: 1px solid rgba(255,68,68,0.2) !important;
    font-size: 11px !important;
    background: rgba(0,0,0,0.85) !important;
}
.slot-chrome-solstice .reels-container {
    border: 1px solid rgba(255,68,68,0.12) !important;
    border-radius: 10px !important;
}

/* ── 9. NEONCORE — Cyberpunk: animated color-cycling border accent ── */
@keyframes neonCoreBorderCycle {
    0%   { border-color: #ff0080; box-shadow: 0 0 15px rgba(255,0,128,0.25); }
    33%  { border-color: #00ffff; box-shadow: 0 0 15px rgba(0,255,255,0.25); }
    66%  { border-color: #ff00ff; box-shadow: 0 0 15px rgba(255,0,255,0.25); }
    100% { border-color: #ff0080; box-shadow: 0 0 15px rgba(255,0,128,0.25); }
}
.slot-chrome-neoncore .reels-container {
    border: 2px solid #ff0080 !important;
    border-radius: 10px !important;
    animation: neonCoreBorderCycle 4s linear infinite !important;
}
.slot-chrome-neoncore .slot-bottom-bar {
    min-height: 64px !important;
    border-top: 2px solid !important;
    animation: neonCoreBorderCycle 4s linear infinite !important;
    background: linear-gradient(180deg, #0a0010 0%, #050008 100%) !important;
}
.slot-chrome-neoncore .slot-spin-btn,
.slot-chrome-neoncore #spinBtn {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border: 2px solid !important;
    animation: neonCoreBorderCycle 2s linear infinite !important;
}
.slot-chrome-neoncore .slot-top-bar {
    min-height: 36px !important;
    border-bottom: 2px solid !important;
    animation: neonCoreBorderCycle 4s linear infinite !important;
}

/* ── 10. FROSTBYTE — Ice: frosted glass, cool blue tones, crisp edges ── */
.slot-chrome-frostbyte .slot-bottom-bar {
    min-height: 64px !important;
    background: rgba(10,20,40,0.88) !important;
    backdrop-filter: blur(10px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.4) !important;
    border-top: 2px solid rgba(100,200,255,0.3) !important;
}
.slot-chrome-frostbyte .slot-spin-btn,
.slot-chrome-frostbyte #spinBtn {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(100,200,255,0.5) !important;
    background: radial-gradient(circle at 35% 35%, rgba(100,200,255,0.3) 0%, rgba(10,20,40,0.8) 100%) !important;
    box-shadow: 0 0 20px rgba(100,200,255,0.2) !important;
}
.slot-chrome-frostbyte .slot-top-bar {
    min-height: 36px !important;
    border-bottom: 2px solid rgba(100,200,255,0.25) !important;
}
.slot-chrome-frostbyte .reels-container {
    border: 2px solid rgba(100,200,255,0.2) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 30px rgba(100,200,255,0.08), inset 0 0 30px rgba(0,0,0,0.5) !important;
}

/* ── 11. DESERTGOLD — Sandstone: warm serif, earthy gradients, gold borders ── */
.slot-chrome-desertgold .slot-bottom-bar {
    min-height: 66px !important;
    background: linear-gradient(180deg, #2d1f0f 0%, #1a1208 100%) !important;
    border-top: 2px solid rgba(218,165,32,0.4) !important;
    font-family: "Palatino Linotype", "Book Antiqua", serif !important;
}
.slot-chrome-desertgold .slot-spin-btn,
.slot-chrome-desertgold #spinBtn {
    width: 62px !important;
    height: 62px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(218,165,32,0.6) !important;
    background: radial-gradient(circle at 40% 35%, #6d5530 0%, #3d2a15 60%, #2d1f0f 100%) !important;
    box-shadow: 0 0 20px rgba(218,165,32,0.2) !important;
}
.slot-chrome-desertgold .slot-top-bar {
    min-height: 38px !important;
    font-family: "Palatino Linotype", serif !important;
    border-bottom: 2px solid rgba(218,165,32,0.3) !important;
    letter-spacing: 2px !important;
}
.slot-chrome-desertgold .reels-container {
    border: 2px solid rgba(218,165,32,0.25) !important;
    border-radius: 12px !important;
}

/* ── 12. ORIENTREELS — Eastern: red & gold, curved panels ── */
.slot-chrome-orientreels .slot-bottom-bar {
    min-height: 66px !important;
    background: linear-gradient(180deg, #1a0808 0%, #0d0404 100%) !important;
    border-top: 2px solid rgba(255,50,50,0.35) !important;
}
.slot-chrome-orientreels .slot-spin-btn,
.slot-chrome-orientreels #spinBtn {
    width: 62px !important;
    height: 62px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(255,215,0,0.5) !important;
    background: radial-gradient(circle at 40% 35%, #880000 0%, #440000 60%, #220000 100%) !important;
    box-shadow: 0 0 20px rgba(255,50,50,0.3), 0 0 40px rgba(255,215,0,0.1) !important;
}
.slot-chrome-orientreels .slot-top-bar {
    min-height: 38px !important;
    border-bottom: 2px solid rgba(255,215,0,0.25) !important;
    letter-spacing: 3px !important;
}
.slot-chrome-orientreels .reels-container {
    border: 2px solid rgba(255,215,0,0.2) !important;
    border-radius: 14px !important;
    box-shadow: 0 0 30px rgba(255,50,50,0.1) !important;
}

/* END PROVIDER-SPECIFIC UI SKINS */



/* =====================================================
   SPRINT 171-178 STYLES
   ===================================================== */

/* Sprint 171: Spin speed badge */
.spin-speed-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}
.ssb-fast { color: #ff7675; background: rgba(255,118,117,0.12); }
.ssb-med  { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.ssb-slow { color: #74b9ff; background: rgba(116,185,255,0.1); }

/* Sprint 172: Hot/cold meter */
.hot-cold-meter {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 8px;
    letter-spacing: 0.5px;
    animation: hcm-pulse 1.5s ease-in-out infinite;
}
@keyframes hcm-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.75; }
}
.hcm-fire { color: #ff3838; background: linear-gradient(135deg, rgba(255,56,56,0.2), rgba(255,118,117,0.15)); text-shadow: 0 0 6px rgba(255,56,56,0.5); }
.hcm-warm { color: #ffa502; background: rgba(255,165,2,0.12); }
.hcm-cool { color: #74b9ff; background: rgba(116,185,255,0.1); }
.hcm-ice  { color: #a4b0be; background: rgba(164,176,190,0.1); }

/* Sprint 173: Profit per minute */
.profit-per-min-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}
.ppm-pos { color: #00ff88; background: rgba(0,255,136,0.1); }
.ppm-neg { color: #ff7675; background: rgba(255,118,117,0.1); }

/* Sprint 174: Balance watermark */
.balance-watermark-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
}
.bwb-up { color: #00e676; background: rgba(0,230,118,0.1); }

/* Sprint 175: Near miss badge */
.near-miss-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    color: #dfe6e9;
    background: rgba(223,230,233,0.07);
}

/* Sprint 176: Best multiplier badge */
.best-mult-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 8px;
}
.bm-good  { color: #00ff88; background: rgba(0,255,136,0.1); }
.bm-great { color: #fdcb6e; background: rgba(253,203,110,0.12); }
.bm-epic  { color: #fd79a8; background: linear-gradient(135deg, rgba(253,121,168,0.15), rgba(225,112,85,0.15)); text-shadow: 0 0 4px rgba(253,121,168,0.4); }

/* Sprint 177: Session timer */
.session-timer-badge {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 8px;
    color: #b2bec3;
    background: rgba(178,190,195,0.07);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

/* Sprint 178: Volatility badge */
.volatility-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 8px;
    letter-spacing: 0.5px;
}
.vol-high { color: #ff7675; background: rgba(255,118,117,0.12); }
.vol-med  { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.vol-low  { color: #55efc4; background: rgba(85,239,196,0.1); }


/* =====================================================
   SPRINT 179-186 STYLES
   ===================================================== */

/* Sprint 179: Avg bet badge */
.avg-bet-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    color: #b2bec3;
    background: rgba(178,190,195,0.07);
    font-variant-numeric: tabular-nums;
}

/* Sprint 180: Win streak fire */
.win-streak-fire {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 10px;
    letter-spacing: 0.5px;
}
.wsf-warm {
    color: #ffa502;
    background: rgba(255,165,2,0.12);
}
.wsf-hot {
    color: #ff6348;
    background: rgba(255,99,72,0.15);
    animation: wsf-glow 0.8s ease-in-out infinite alternate;
}
.wsf-mega {
    color: #ff3838;
    background: linear-gradient(135deg, rgba(255,56,56,0.25), rgba(255,165,2,0.2));
    text-shadow: 0 0 8px rgba(255,56,56,0.6);
    animation: wsf-glow 0.5s ease-in-out infinite alternate;
}
@keyframes wsf-glow {
    from { filter: brightness(1); }
    to   { filter: brightness(1.3); }
}

/* Sprint 181: Cooldown badge */
.cooldown-badge {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 8px;
    color: #636e72;
    background: rgba(99,110,114,0.08);
    font-variant-numeric: tabular-nums;
}
.cb-med  { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.cb-long { color: #ff7675; background: rgba(255,118,117,0.1); }

/* Sprint 182: Loss recovery badge */
.loss-recovery-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
}
.lrb-low  { color: #ff7675; background: rgba(255,118,117,0.1); }
.lrb-mid  { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.lrb-high { color: #00ff88; background: rgba(0,255,136,0.1); }

/* Sprint 183: Symbol frequency badge */
.symbol-freq-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    color: #dfe6e9;
    background: rgba(223,230,233,0.07);
}

/* Sprint 184: Bankroll health badge */
.bankroll-health-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 8px;
    letter-spacing: 0.5px;
}
.brh-healthy  { color: #00ff88; background: rgba(0,255,136,0.1); }
.brh-stable   { color: #55efc4; background: rgba(85,239,196,0.08); }
.brh-caution  { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.brh-danger   { color: #ff7675; background: rgba(255,118,117,0.12); }
.brh-critical {
    color: #ff3838;
    background: rgba(255,56,56,0.15);
    animation: brh-pulse 0.8s ease-in-out infinite;
}
@keyframes brh-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

/* Sprint 185: Risk score badge */
.risk-score-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 8px;
    letter-spacing: 0.5px;
}
.rs-low  { color: #55efc4; background: rgba(85,239,196,0.1); }
.rs-med  { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.rs-high { color: #ff7675; background: rgba(255,118,117,0.12); }

/* Sprint 186: Game rating widget */
.game-rating-widget {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
}
.gr-label {
    font-size: 10px;
    color: #636e72;
    font-weight: 500;
}
.gr-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 1px 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s ease;
    opacity: 0.5;
}
.gr-btn:hover { opacity: 0.8; transform: scale(1.1); }
.gr-btn.gr-active { opacity: 1; border-color: rgba(0,255,136,0.4); background: rgba(0,255,136,0.08); transform: scale(1.15); }
.gr-btn.gr-down.gr-active { border-color: rgba(255,118,117,0.4); background: rgba(255,118,117,0.08); }


/* =====================================================
   SPRINT 187-194 STYLES
   ===================================================== */

/* Sprint 187: Lucky spin badge */
.lucky-spin-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    color: #ffeaa7;
    background: rgba(255,234,167,0.1);
}
.lsb-flash {
    animation: lsb-flash 0.6s ease-out;
    color: #f9ca24;
    background: linear-gradient(135deg, rgba(249,202,36,0.2), rgba(255,234,167,0.15));
    text-shadow: 0 0 6px rgba(249,202,36,0.5);
}
@keyframes lsb-flash {
    0%   { transform: scale(1.4); opacity: 0.5; }
    100% { transform: scale(1);   opacity: 1; }
}

/* Sprint 188: Payout histogram bar */
.payout-hist-bar {
    display: inline-flex;
    align-items: flex-end;
    height: 18px;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(255,255,255,0.03);
    vertical-align: middle;
}

/* Sprint 189: P&L sparkline */
.pl-sparkline {
    display: inline-block;
    vertical-align: middle;
    padding: 0 2px;
}

/* Sprint 190: Bet tier progress */
.bet-tier-progress {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
}
.btp-label { color: #74b9ff; }
.btp-next  { color: #636e72; }
.btp-bar {
    display: inline-block;
    width: 30px;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
}
.btp-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #74b9ff, #a29bfe);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Sprint 191: Auto-spin badge */
.auto-spin-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    color: #a29bfe;
    background: rgba(162,155,254,0.1);
}
.asb-fast {
    color: #6c5ce7;
    background: rgba(108,92,231,0.15);
}
.asb-turbo {
    color: #fd79a8;
    background: linear-gradient(135deg, rgba(253,121,168,0.15), rgba(108,92,231,0.15));
    animation: asb-pulse 0.5s ease-in-out infinite alternate;
}
@keyframes asb-pulse {
    from { filter: brightness(1); }
    to   { filter: brightness(1.2); }
}

/* Sprint 192: Win combo badge */
.win-combo-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 10px;
    letter-spacing: 0.5px;
}
.wcb-warm { color: #ffa502; background: rgba(255,165,2,0.12); }
.wcb-hot  { color: #ff6348; background: rgba(255,99,72,0.15); animation: wcb-shake 0.3s ease; }
.wcb-mega {
    color: #ff3838;
    background: linear-gradient(135deg, rgba(255,56,56,0.2), rgba(255,165,2,0.2));
    text-shadow: 0 0 6px rgba(255,56,56,0.5);
    animation: wcb-shake 0.3s ease;
}
.wcb-ended { color: #636e72; background: rgba(99,110,114,0.08); }
@keyframes wcb-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-2px); }
    75%      { transform: translateX(2px); }
}

/* Sprint 193: Bonus trigger badge */
.bonus-trigger-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    color: #fd79a8;
    background: rgba(253,121,168,0.1);
}
.btb-hot {
    background: linear-gradient(135deg, rgba(253,121,168,0.15), rgba(225,112,85,0.15));
    text-shadow: 0 0 4px rgba(253,121,168,0.4);
}

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


/* =====================================================
   SPRINT 195-202 STYLES
   ===================================================== */

/* Sprint 195: Wager milestone badge */
.wager-milestone-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    color: #b2bec3;
    background: rgba(178,190,195,0.07);
    font-variant-numeric: tabular-nums;
}
.wmb-flash {
    color: #f9ca24;
    background: linear-gradient(135deg, rgba(249,202,36,0.2), rgba(255,234,167,0.15));
    text-shadow: 0 0 6px rgba(249,202,36,0.4);
    animation: wmb-pop 0.5s ease-out;
}
@keyframes wmb-pop {
    0%   { transform: scale(1.3); opacity: 0.5; }
    100% { transform: scale(1);   opacity: 1; }
}

/* Sprint 196: Loss streak comfort badge */
.loss-comfort-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 8px;
    color: #74b9ff;
    background: rgba(116,185,255,0.1);
    font-style: italic;
}
.lcb-mid  { color: #a29bfe; background: rgba(162,155,254,0.1); }
.lcb-long { color: #fd79a8; background: rgba(253,121,168,0.1); }

/* Sprint 197: Win/loss ratio badge */
.win-loss-ratio-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}
.wlr-good { color: #00ff88; background: rgba(0,255,136,0.1); }
.wlr-mid  { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.wlr-bad  { color: #ff7675; background: rgba(255,118,117,0.1); }

/* Sprint 198: Time luck badge */
.time-luck-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
}
.tlb-hot  { color: #ff6348; background: rgba(255,99,72,0.12); }
.tlb-warm { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.tlb-cold { color: #74b9ff; background: rgba(116,185,255,0.1); }

/* Sprint 199: Avg payout badge */
.avg-payout-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    color: #55efc4;
    background: rgba(85,239,196,0.08);
    font-variant-numeric: tabular-nums;
}

/* Sprint 200: Balance trajectory badge */
.balance-traj-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
}
.bt-up   { color: #00ff88; background: rgba(0,255,136,0.1); }
.bt-flat { color: #b2bec3; background: rgba(178,190,195,0.07); }
.bt-down { color: #ff7675; background: rgba(255,118,117,0.1); }

/* Sprint 201: Biggest win session badge */
.biggest-win-session-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    color: #ffeaa7;
    background: rgba(255,234,167,0.1);
    font-variant-numeric: tabular-nums;
}
.bws-good  { color: #00ff88; background: rgba(0,255,136,0.1); }
.bws-great { color: #fdcb6e; background: rgba(253,203,110,0.12); }
.bws-epic  {
    color: #fd79a8;
    background: linear-gradient(135deg, rgba(253,121,168,0.15), rgba(255,234,167,0.15));
    text-shadow: 0 0 4px rgba(253,121,168,0.4);
}

/* Sprint 202: Spin budget badge */
.spin-budget-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}
.sbb-full  { color: #55efc4; background: rgba(85,239,196,0.08); }
.sbb-mid   { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.sbb-low   { color: #ff7675; background: rgba(255,118,117,0.12); }
.sbb-spent {
    color: #ff3838;
    background: rgba(255,56,56,0.15);
    animation: sbb-warn 1s ease-in-out infinite;
}
@keyframes sbb-warn {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}


/* =====================================================
   SPRINT 203-210 STYLES
   ===================================================== */

/* Sprint 203: Double-up badge */
.double-up-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
}
.dub-progress { color: #b2bec3; background: rgba(178,190,195,0.07); }
.dub-good  { color: #00ff88; background: rgba(0,255,136,0.1); }
.dub-great { color: #fdcb6e; background: rgba(253,203,110,0.12); }
.dub-epic  {
    color: #f9ca24;
    background: linear-gradient(135deg, rgba(249,202,36,0.2), rgba(0,255,136,0.15));
    text-shadow: 0 0 6px rgba(249,202,36,0.5);
    animation: dub-shine 1s ease-in-out infinite alternate;
}
@keyframes dub-shine {
    from { filter: brightness(1); }
    to   { filter: brightness(1.25); }
}

/* Sprint 204: Provider loyalty badge */
.provider-loyalty-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    color: #a29bfe;
    background: rgba(162,155,254,0.08);
}

/* Sprint 205: Scatter countdown badge */
.scatter-countdown-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    color: #636e72;
    background: rgba(99,110,114,0.08);
    font-variant-numeric: tabular-nums;
}
.scb-waiting { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.scb-overdue {
    color: #ff7675;
    background: rgba(255,118,117,0.12);
    animation: scb-pulse 1.2s ease-in-out infinite;
}
@keyframes scb-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.65; }
}

/* Sprint 206: Bet efficiency badge */
.bet-efficiency-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}
.bef-profit { color: #00ff88; background: rgba(0,255,136,0.1); }
.bef-even   { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.bef-loss   { color: #ff7675; background: rgba(255,118,117,0.1); }

/* Sprint 208: Spin rhythm badge */
.spin-rhythm-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
}
.srh-steady  { color: #55efc4; background: rgba(85,239,196,0.08); }
.srh-mixed   { color: #fdcb6e; background: rgba(253,203,110,0.08); }
.srh-erratic { color: #a29bfe; background: rgba(162,155,254,0.1); }

/* Sprint 209: Max exposure badge */
.max-exposure-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
}
.meb-safe   { color: #55efc4; background: rgba(85,239,196,0.08); }
.meb-warn   { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.meb-danger { color: #ff7675; background: rgba(255,118,117,0.12); }

/* Sprint 210: Game diversity badge */
.game-diversity-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    color: #74b9ff;
    background: rgba(116,185,255,0.08);
}
.gdb-varied   { color: #a29bfe; background: rgba(162,155,254,0.1); }
.gdb-explorer {
    color: #fd79a8;
    background: linear-gradient(135deg, rgba(253,121,168,0.12), rgba(162,155,254,0.12));
}


/* =====================================================
   SPRINT 211-218 STYLES
   ===================================================== */

/* Sprint 211: Bet history feed */
.bet-history-feed {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    padding: 2px 6px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
}
.bhf-entry {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.bhf-win  { color: #00ff88; background: rgba(0,255,136,0.1); }
.bhf-loss { color: #636e72; background: rgba(99,110,114,0.08); }

/* Sprint 212: Symbol pay peek */
.symbol-pay-peek {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 2px 6px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
}
.spp-label {
    font-size: 9px;
    color: #636e72;
    font-weight: 500;
}
.spp-item {
    font-size: 9px;
    font-weight: 700;
    color: #ffeaa7;
    padding: 1px 3px;
    border-radius: 3px;
    background: rgba(255,234,167,0.08);
}

/* Sprint 213: Mini jackpot badge */
.mini-jackpot-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 8px;
    color: #ffeaa7;
    background: rgba(255,234,167,0.08);
    font-variant-numeric: tabular-nums;
}
.mjp-mid  { background: rgba(255,234,167,0.12); }
.mjp-high { color: #f9ca24; background: rgba(249,202,36,0.15); text-shadow: 0 0 4px rgba(249,202,36,0.3); }
.mjp-won {
    color: #fff;
    background: linear-gradient(135deg, #f9ca24, #ff6348);
    text-shadow: 0 0 6px rgba(255,255,255,0.5);
    animation: mjp-burst 0.5s ease-out;
}
@keyframes mjp-burst {
    0%   { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* Sprint 214: Keyboard hint badge */
.keyboard-hint-badge {
    font-size: 9px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 8px;
    color: #636e72;
    background: rgba(99,110,114,0.06);
}
.kbh-key {
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    color: #b2bec3;
    padding: 0 4px;
    margin: 0 2px;
    border: 1px solid rgba(178,190,195,0.2);
    border-radius: 3px;
    background: rgba(178,190,195,0.08);
    font-family: monospace;
}

/* Sprint 215: Reel heat badge */
.reel-heat-badge {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
}
.rhb-label {
    font-size: 9px;
    color: #636e72;
    font-weight: 500;
    margin-right: 3px;
    align-self: center;
}

/* Sprint 216: Personal best badge */
.personal-best-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    color: #ffeaa7;
    background: rgba(255,234,167,0.08);
}
.pbb-new {
    color: #f9ca24;
    background: linear-gradient(135deg, rgba(249,202,36,0.2), rgba(255,234,167,0.15));
    animation: pbb-flash 0.6s ease-out;
}
@keyframes pbb-flash {
    0%   { transform: scale(1.3); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

/* Sprint 217: Grind meter badge */
.grind-meter-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}
.gmb-profit { color: #00ff88; background: rgba(0,255,136,0.1); }
.gmb-loss   { color: #ff7675; background: rgba(255,118,117,0.1); }

/* Sprint 218: Lucky number badge */
.lucky-number-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    color: #a29bfe;
    background: rgba(162,155,254,0.08);
}


/* =====================================================
   SPRINT 219-226 STYLES
   ===================================================== */

/* Sprint 220: Momentum meter */
.momentum-meter {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
}
.mm-rocket { color: #00ff88; background: linear-gradient(135deg, rgba(0,255,136,0.15), rgba(85,239,196,0.1)); text-shadow: 0 0 4px rgba(0,255,136,0.4); }
.mm-up   { color: #55efc4; background: rgba(85,239,196,0.1); }
.mm-flat { color: #b2bec3; background: rgba(178,190,195,0.07); }
.mm-down { color: #ff7675; background: rgba(255,118,117,0.1); }

/* Sprint 221: Payline badge */
.payline-badge {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 8px;
    color: #636e72;
    background: rgba(99,110,114,0.06);
}

/* Sprint 222: Bet ladder badge */
.bet-ladder-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}
.blb-low  { color: #55efc4; background: rgba(85,239,196,0.08); }
.blb-mid  { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.blb-high { color: #fd79a8; background: rgba(253,121,168,0.1); }

/* Sprint 223: Cold game alert */
.cold-game-alert {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 8px;
}
.cga-cool { color: #74b9ff; background: rgba(116,185,255,0.1); }
.cga-cold {
    color: #a4b0be;
    background: rgba(164,176,190,0.12);
    animation: cga-shiver 0.3s ease-in-out;
}
@keyframes cga-shiver {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-1px); }
    75%      { transform: translateX(1px); }
}

/* Sprint 224: Win distribution badge */
.win-dist-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    color: #dfe6e9;
    background: rgba(223,230,233,0.06);
    font-variant-numeric: tabular-nums;
}

/* Sprint 225: Session ROI badge */
.session-roi-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}
.sroi-great { color: #00ff88; background: rgba(0,255,136,0.12); text-shadow: 0 0 4px rgba(0,255,136,0.3); }
.sroi-pos   { color: #55efc4; background: rgba(85,239,196,0.1); }
.sroi-mild  { color: #fdcb6e; background: rgba(253,203,110,0.1); }
.sroi-bad   { color: #ff7675; background: rgba(255,118,117,0.12); }

/* Sprint 226: Endurance badge */
.endurance-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
}
.end-warmup    { color: #74b9ff; background: rgba(116,185,255,0.08); }
.end-dedicated { color: #fdcb6e; background: rgba(253,203,110,0.12); }
.end-marathon  {
    color: #f9ca24;
    background: linear-gradient(135deg, rgba(249,202,36,0.2), rgba(253,121,168,0.15));
    text-shadow: 0 0 6px rgba(249,202,36,0.4);
    animation: end-glow 1.5s ease-in-out infinite alternate;
}
@keyframes end-glow {
    from { filter: brightness(1); }
    to   { filter: brightness(1.2); }
}


/* ═══════════════════════ Sprint 227-234 CSS ═══════════════════════ */

/* 227: Autoplay badge */
.autoplay-badge { background: #1e3a5f; color: #7fbaec; padding: 2px 8px; border-radius: 10px; font-size: 11px; margin-left: 4px; }
.autoplay-btn { background: #1a1a2e; color: #7fbaec; border: 1px solid #2a2a4a; padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 11px; transition: all 0.2s; }
.autoplay-btn:hover { background: #2a2a4a; }
.autoplay-btn.autoplay-active { background: #1e3a5f; border-color: #7fbaec; box-shadow: 0 0 6px rgba(127,186,236,0.3); }
.autoplay-controls { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }

/* 228: Bet preset buttons */
.bet-preset-container { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.bet-preset-btn { background: #16213e; color: #a0a0c0; border: 1px solid #2a2a4a; padding: 3px 10px; border-radius: 5px; cursor: pointer; font-size: 11px; transition: all 0.2s; }
.bet-preset-btn:hover { background: #1a1a3e; color: #e0e0ff; border-color: #4a4a7a; }
.bet-preset-btn.preset-active { background: #1e3a5f; color: #7fbaec; border-color: #5a8abf; box-shadow: 0 0 4px rgba(127,186,236,0.2); }

/* 229: Sound toggle badge */
.sound-toggle-badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; margin-left: 4px; cursor: pointer; }
.stb-on { background: #1a3a2a; color: #7fec9f; }
.stb-off { background: #3a1a1a; color: #ec7f7f; }
.sound-btn { background: #1a1a2e; color: #a0a0c0; border: 1px solid #2a2a4a; padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 11px; }
.sound-btn:hover { background: #2a2a4a; }

/* 230: Turbo mode */
.turbo-badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; margin-left: 4px; }
.turbo-on { background: linear-gradient(135deg, #5a1a8a, #8a1a5a); color: #f0c0ff; animation: turbo-pulse 0.6s ease-in-out infinite; }
@keyframes turbo-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }
.turbo-btn { background: #1a1a2e; color: #c0a0e0; border: 1px solid #3a2a5a; padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 11px; }
.turbo-btn:hover { background: #2a1a3e; }
.turbo-btn.turbo-active { background: #3a1a5a; border-color: #8a4abf; box-shadow: 0 0 6px rgba(138,74,191,0.4); }

/* 231: Session bookmark */
.bookmark-badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; margin-left: 4px; }
.bm-saved { background: #3a3a1a; color: #ecec7f; animation: bm-flash 0.4s ease-out; }
@keyframes bm-flash { 0% { transform: scale(1.3); } 100% { transform: scale(1); } }
.bookmark-btn { background: #1a1a2e; color: #e0d080; border: 1px solid #3a3a2a; padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 11px; }
.bookmark-btn:hover { background: #2a2a1e; }

/* 232: Spin countdown */
.spin-countdown-badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; margin-left: 4px; font-weight: 600; }
.scd-ok { background: #1a2a1a; color: #7fec7f; }
.scd-warn { background: #3a3a1a; color: #ecec7f; }
.scd-danger { background: #3a1a1a; color: #ec7f7f; animation: scd-blink 0.8s ease-in-out infinite; }
@keyframes scd-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* 233: Game comparison badge */
.game-comp-badge { background: #1a2a3a; color: #7fbfec; padding: 2px 8px; border-radius: 10px; font-size: 11px; margin-left: 4px; }

/* 234: Achievement toast */
.achievement-toast { position: fixed; top: 20px; right: 20px; background: linear-gradient(135deg, #2a1a4a, #1a2a5a); color: #f0d070; padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; z-index: 10000; box-shadow: 0 4px 20px rgba(0,0,0,0.5); border: 1px solid #5a4a2a; pointer-events: none; }
.ach-show { animation: ach-in 0.4s ease-out forwards; }
.ach-hide { animation: ach-out 0.4s ease-in forwards; }
@keyframes ach-in { 0% { opacity: 0; transform: translateY(-20px) scale(0.8); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ach-out { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-20px) scale(0.8); } }


/* ═══════════════════════ Sprint 235-242 CSS ═══════════════════════ */
/* Industry Standards & Responsible Gambling */

/* 235: RTP display */
.rtp-display-badge { padding: 2px 10px; border-radius: 10px; font-size: 11px; margin-left: 4px; font-weight: 600; }
.rtp-high { background: #1a3a1a; color: #7fec7f; }
.rtp-mid { background: #1a2a3a; color: #7fbaec; }
.rtp-low { background: #3a2a1a; color: #ecba7f; }

/* 236: Responsible gambling timer */
.rg-timer-badge { padding: 2px 10px; border-radius: 10px; font-size: 11px; margin-left: 4px; }
.rgt-info { background: #1a2a3a; color: #7fbaec; }
.rgt-warn { background: #3a3a1a; color: #ecec7f; }
.rgt-critical { background: #5a1a1a; color: #ff7f7f; animation: rgt-pulse 1s ease-in-out infinite; }
@keyframes rgt-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* 237: Loss limit */
.loss-limit-badge { padding: 2px 10px; border-radius: 10px; font-size: 11px; margin-left: 4px; }
.ll-mid { background: #3a3a1a; color: #ecba7f; }
.ll-warn { background: #3a2a1a; color: #ecec7f; }
.ll-critical { background: #5a1a1a; color: #ff7f7f; font-weight: 700; }

/* 238: Deposit limit */
.deposit-limit-badge { padding: 2px 10px; border-radius: 10px; font-size: 11px; margin-left: 4px; }
.dl-warn { background: #3a3a1a; color: #ecec7f; }
.dl-critical { background: #5a1a1a; color: #ff7f7f; font-weight: 700; }

/* 241: Provably fair hash */
.fair-hash-badge { background: #1a1a2e; color: #a0a0d0; padding: 2px 10px; border-radius: 10px; font-size: 10px; font-family: monospace; margin-left: 4px; cursor: help; }

/* Responsible gambling controls */
.responsible-gambling-controls { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.rg-btn { background: #1a2a1a; color: #7fec9f; border: 1px solid #2a4a2a; padding: 4px 14px; border-radius: 6px; cursor: pointer; font-size: 11px; transition: all 0.2s; }
.rg-btn:hover { background: #2a3a2a; border-color: #4a6a4a; }
.rg-btn-warn { background: #3a1a1a; color: #ff9f7f; border-color: #5a2a2a; }
.rg-btn-warn:hover { background: #4a2a2a; }

/* RG Overlay / Popup */
.rg-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 99999; display: flex; align-items: center; justify-content: center; }
.rg-popup { background: linear-gradient(180deg, #1a1a2e, #0f0f1a); border: 2px solid #3a3a5a; border-radius: 16px; padding: 32px 40px; max-width: 440px; text-align: center; box-shadow: 0 8px 40px rgba(0,0,0,0.6); }
.rg-popup-icon { font-size: 48px; margin-bottom: 16px; }
.rg-popup p { color: #c0c0e0; font-size: 15px; line-height: 1.5; margin: 12px 0; }
.rg-popup-btn { background: #2a4a8a; color: #fff; border: none; padding: 10px 28px; border-radius: 8px; font-size: 14px; cursor: pointer; margin-top: 12px; transition: background 0.2s; }
.rg-popup-btn:hover { background: #3a5a9a; }
.rg-popup-help { font-size: 12px !important; color: #808090 !important; margin-top: 16px !important; }
.rg-popup-help a { color: #7fbaec; text-decoration: underline; }
.self-exclusion-popup { border-color: #5a2a2a; }


/* ═══════════════════════ Sprint 243-250 CSS ═══════════════════════ */

/* 243: House edge */
.house-edge-badge { padding: 2px 10px; border-radius: 10px; font-size: 11px; margin-left: 4px; }
.he-low { background: #1a3a1a; color: #7fec7f; }
.he-mid { background: #2a2a1a; color: #ecec7f; }
.he-high { background: #3a1a1a; color: #ec7f7f; }

/* 244: Jackpot */
.jackpot-badge { padding: 3px 12px; border-radius: 12px; font-size: 12px; font-weight: 700; margin-left: 4px; }
.jp-normal { background: linear-gradient(135deg, #1a2a3a, #2a3a4a); color: #7fbaec; }
.jp-hot { background: linear-gradient(135deg, #3a2a1a, #4a3a2a); color: #ffd700; text-shadow: 0 0 4px rgba(255,215,0,0.4); }
.jp-mega { background: linear-gradient(135deg, #4a1a4a, #5a2a5a); color: #ff69b4; text-shadow: 0 0 6px rgba(255,105,180,0.5); animation: jp-glow 1.5s ease-in-out infinite; }
@keyframes jp-glow { 0%,100% { box-shadow: 0 0 8px rgba(255,105,180,0.3); } 50% { box-shadow: 0 0 16px rgba(255,105,180,0.6); } }

/* 245: Loyalty */
.loyalty-badge { background: #2a1a3a; color: #c0a0ff; padding: 2px 10px; border-radius: 10px; font-size: 11px; margin-left: 4px; }

/* 246: Daily bonus */
.daily-bonus-badge { padding: 4px 14px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.db-claimed { background: linear-gradient(135deg, #1a3a1a, #2a4a2a); color: #7fec7f; animation: db-pop 0.5s ease-out; }
@keyframes db-pop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* 247: Referral */
.referral-badge { background: #1a2a3a; color: #7fbfec; padding: 2px 10px; border-radius: 10px; font-size: 10px; font-family: monospace; margin-left: 4px; }

/* 248: VIP tier */
.vip-badge { padding: 3px 12px; border-radius: 12px; font-size: 11px; font-weight: 600; margin-left: 4px; }
.vip-bronze { background: linear-gradient(135deg, #4a3020, #6a4a30); color: #cd7f32; }
.vip-silver { background: linear-gradient(135deg, #3a3a4a, #5a5a6a); color: #c0c0c0; }
.vip-gold { background: linear-gradient(135deg, #3a3a1a, #5a5a2a); color: #ffd700; text-shadow: 0 0 3px rgba(255,215,0,0.3); }
.vip-platinum { background: linear-gradient(135deg, #2a3a4a, #4a5a6a); color: #e5e4e2; text-shadow: 0 0 4px rgba(229,228,226,0.4); }
.vip-diamond { background: linear-gradient(135deg, #1a2a4a, #2a4a6a); color: #b9f2ff; text-shadow: 0 0 6px rgba(185,242,255,0.5); animation: vip-sparkle 2s ease-in-out infinite; }
@keyframes vip-sparkle { 0%,100% { opacity: 1; } 50% { opacity: 0.85; } }

/* Analytics controls */
.analytics-controls { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.analytics-btn { background: #1a1a3a; color: #a0a0e0; border: 1px solid #3a3a5a; padding: 4px 14px; border-radius: 6px; cursor: pointer; font-size: 11px; transition: all 0.2s; }
.analytics-btn:hover { background: #2a2a4a; border-color: #5a5a7a; }

/* 250: Analytics dashboard */
.analytics-dashboard-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 99998; display: flex; align-items: center; justify-content: center; }
.analytics-dashboard-popup { background: linear-gradient(180deg, #1a1a2e, #0f0f1a); border: 2px solid #3a3a5a; border-radius: 16px; padding: 28px 36px; max-width: 520px; width: 90%; box-shadow: 0 8px 40px rgba(0,0,0,0.6); }
.analytics-dashboard-popup h3 { color: #e0e0ff; font-size: 18px; text-align: center; margin: 0 0 16px; }
.sa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sa-stat { background: rgba(255,255,255,0.03); border: 1px solid #2a2a4a; border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; }
.sa-label { color: #808090; font-size: 11px; text-transform: uppercase; }
.sa-value { color: #e0e0ff; font-size: 16px; font-weight: 600; margin-top: 2px; }
.sa-pos { color: #7fec7f; }
.sa-neg { color: #ec7f7f; }
.sa-close-btn { display: block; width: 100%; margin-top: 16px; background: #2a4a8a; color: #fff; border: none; padding: 10px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.sa-close-btn:hover { background: #3a5a9a; }


/* ═══════════════════════ Sprint 251-258 CSS ═══════════════════════ */

/* 253: Currency badge */
.currency-badge { background: #1a2a3a; color: #7fbaec; padding: 2px 10px; border-radius: 10px; font-size: 11px; cursor: pointer; margin-left: 4px; }
.currency-badge:hover { background: #2a3a4a; }

/* 254: Player count */
.player-count-badge { background: #1a3a1a; color: #7fec7f; padding: 2px 10px; border-radius: 10px; font-size: 11px; margin-left: 4px; }

/* 255: Big wins feed */
.big-wins-feed { background: rgba(0,0,0,0.3); border: 1px solid #2a2a4a; border-radius: 8px; padding: 8px 12px; margin-top: 8px; max-height: 120px; overflow-y: auto; }
.bw-item { font-size: 11px; color: #a0a0c0; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.bw-item:last-child { border-bottom: none; }
.bw-name { color: #7fbaec; font-weight: 600; }
.bw-amount { color: #ffd700; font-weight: 700; }
.bw-time { color: #606080; font-size: 10px; }

/* 256: Multiplier sparkline */
.mult-graph-container { margin-top: 6px; background: rgba(0,0,0,0.2); border: 1px solid #2a2a4a; border-radius: 6px; padding: 4px; display: inline-block; }

/* 257: Favorites */
.fav-star { cursor: pointer; font-size: 16px; color: #606080; transition: color 0.2s; }
.fav-star:hover { color: #ffd700; }
.fav-star.fav-active { color: #ffd700; }

/* 258: Game search */
.game-search-bar { margin-top: 8px; }
.game-search-input { background: #0f0f1a; color: #c0c0e0; border: 1px solid #2a2a4a; border-radius: 8px; padding: 6px 12px; font-size: 13px; width: 100%; max-width: 320px; outline: none; }
.game-search-input:focus { border-color: #5a5a8a; }
.game-search-input::placeholder { color: #505060; }
.game-filter-btns { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.filter-btn { background: #16213e; color: #a0a0c0; border: 1px solid #2a2a4a; padding: 3px 10px; border-radius: 5px; cursor: pointer; font-size: 11px; }
.filter-btn:hover { background: #1a1a3e; color: #e0e0ff; }

/* 251: Age verification overlay */
.age-verify-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.95); z-index: 100000; display: flex; align-items: center; justify-content: center; }
.age-verify-popup { background: linear-gradient(180deg, #1a1a2e, #0a0a16); border: 2px solid #3a3a5a; border-radius: 16px; padding: 40px; max-width: 440px; text-align: center; }
.age-verify-popup h2 { color: #e0e0ff; font-size: 22px; margin: 0 0 16px; }
.age-verify-popup p { color: #a0a0c0; font-size: 14px; line-height: 1.5; }
.age-verify-btns { display: flex; gap: 12px; margin-top: 20px; justify-content: center; }
.age-btn { padding: 12px 28px; border-radius: 8px; font-size: 15px; cursor: pointer; border: none; font-weight: 600; }
.age-btn-yes { background: #2a6a2a; color: #fff; }
.age-btn-yes:hover { background: #3a7a3a; }
.age-btn-no { background: #6a2a2a; color: #fff; }
.age-btn-no:hover { background: #7a3a3a; }
.age-verify-help { margin-top: 16px; font-size: 12px; }
.age-verify-help a { color: #7fbaec; }

/* 252: Terms overlay */
.terms-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.92); z-index: 99999; display: flex; align-items: center; justify-content: center; }
.terms-popup { background: linear-gradient(180deg, #1a1a2e, #0a0a16); border: 2px solid #3a3a5a; border-radius: 16px; padding: 32px; max-width: 480px; width: 90%; }
.terms-popup h2 { color: #e0e0ff; font-size: 20px; text-align: center; margin: 0 0 16px; }
.terms-content { max-height: 280px; overflow-y: auto; margin-bottom: 16px; }
.terms-content p { color: #a0a0c0; font-size: 13px; line-height: 1.6; margin: 8px 0; }
.terms-accept-btn { display: block; width: 100%; background: #2a4a8a; color: #fff; border: none; padding: 12px; border-radius: 8px; font-size: 15px; cursor: pointer; font-weight: 600; }
.terms-accept-btn:hover { background: #3a5a9a; }


/* ═══════════════════════ Sprint 259-266 CSS ═══════════════════════ */

/* 260: Mobile bottom nav */
.mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, #1a1a2e, #0a0a16); border-top: 1px solid #2a2a4a; display: flex; justify-content: space-around; padding: 8px 0; z-index: 9990; }
.mob-nav-btn { background: none; border: none; color: #a0a0c0; font-size: 12px; padding: 8px 16px; cursor: pointer; }
.mob-nav-btn:active { color: #7fbaec; }

/* 261: PWA install */
.pwa-install-btn { background: linear-gradient(135deg, #2a4a8a, #1a3a6a); color: #fff; border: none; padding: 8px 20px; border-radius: 8px; font-size: 12px; cursor: pointer; margin-top: 8px; }
.pwa-install-btn:hover { background: linear-gradient(135deg, #3a5a9a, #2a4a7a); }

/* 262: Offline badge */
.offline-badge { background: #5a1a1a; color: #ff7f7f; padding: 6px 16px; border-radius: 10px; font-size: 12px; font-weight: 700; position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 100001; animation: offline-pulse 1.5s ease-in-out infinite; }
@keyframes offline-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* 264: Preloader */
.preloader-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #0a0a16; z-index: 100002; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.5s; }
.preloader-spinner { width: 48px; height: 48px; border: 3px solid #2a2a4a; border-top-color: #7fbaec; border-radius: 50%; animation: preloader-spin 0.8s linear infinite; }
@keyframes preloader-spin { to { transform: rotate(360deg); } }
.preloader-text { color: #7fbaec; font-size: 14px; margin-top: 16px; }

/* 265: Battery badge */
.battery-badge { padding: 2px 10px; border-radius: 10px; font-size: 11px; margin-left: 4px; }
.bat-mid { background: #3a3a1a; color: #ecec7f; }
.bat-low { background: #5a1a1a; color: #ff7f7f; animation: bat-blink 1s ease-in-out infinite; }
@keyframes bat-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .mobile-bottom-nav { display: flex !important; }
    .game-search-input { max-width: 100%; }
    body { padding-bottom: 60px; }
}


/* ═══════════════════════ Sprint 267-274 CSS ═══════════════════════ */

/* Revenue controls */
.revenue-controls { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.rev-btn { padding: 8px 18px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; }
.rev-btn-deposit { background: linear-gradient(135deg, #2a8a2a, #1a6a1a); color: #fff; }
.rev-btn-deposit:hover { background: linear-gradient(135deg, #3a9a3a, #2a7a2a); box-shadow: 0 0 10px rgba(42,138,42,0.4); }
.rev-btn-withdraw { background: linear-gradient(135deg, #8a6a2a, #6a4a1a); color: #fff; }
.rev-btn-withdraw:hover { background: linear-gradient(135deg, #9a7a3a, #7a5a2a); }
.rev-btn-wheel { background: linear-gradient(135deg, #6a2a8a, #4a1a6a); color: #fff; animation: wheel-glow 2s ease-in-out infinite; }
@keyframes wheel-glow { 0%,100% { box-shadow: 0 0 6px rgba(106,42,138,0.3); } 50% { box-shadow: 0 0 14px rgba(106,42,138,0.6); } }
.rev-btn-lb { background: linear-gradient(135deg, #2a4a8a, #1a3a6a); color: #fff; }
.rev-btn-cashback { background: linear-gradient(135deg, #8a2a4a, #6a1a3a); color: #fff; }

/* 267: Cashier overlay */
.cashier-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.9); z-index: 99998; display: flex; align-items: center; justify-content: center; }
.cashier-popup { background: linear-gradient(180deg, #1a1a2e, #0a0a16); border: 2px solid #3a3a5a; border-radius: 16px; padding: 28px; max-width: 500px; width: 92%; position: relative; }
.cashier-close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: #808090; font-size: 24px; cursor: pointer; }
.cashier-popup h2 { color: #e0e0ff; text-align: center; margin: 0 0 16px; }
.cashier-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.cashier-tab { flex: 1; background: #16213e; color: #a0a0c0; border: 1px solid #2a2a4a; padding: 8px; border-radius: 8px; cursor: pointer; font-size: 13px; text-align: center; }
.ct-active { background: #2a4a8a; color: #fff; border-color: #4a6aaa; }
.cashier-methods { display: grid; gap: 8px; }
.cashier-method { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.03); border: 1px solid #2a2a4a; border-radius: 8px; padding: 10px 14px; cursor: pointer; transition: all 0.2s; }
.cashier-method:hover { border-color: #4a4a7a; background: rgba(255,255,255,0.06); }
.cm-icon { font-size: 20px; width: 30px; text-align: center; }
.cm-name { color: #c0c0e0; font-weight: 600; flex: 1; }
.cm-range { color: #808090; font-size: 11px; }
.cashier-amount-input { width: 100%; background: #0f0f1a; color: #e0e0ff; border: 1px solid #2a2a4a; border-radius: 8px; padding: 10px 14px; font-size: 16px; outline: none; margin: 12px 0; box-sizing: border-box; }
.cashier-quick-amounts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cqa-btn { background: #16213e; color: #7fbaec; border: 1px solid #2a2a4a; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.cqa-btn:hover { background: #1a2a4a; }
.cashier-submit-btn { width: 100%; background: linear-gradient(135deg, #2a8a2a, #1a6a1a); color: #fff; border: none; padding: 12px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
.csb-withdraw { background: linear-gradient(135deg, #8a6a2a, #6a4a1a); }
.cashier-note { color: #606070; font-size: 11px; text-align: center; margin-top: 8px; }
.cashier-balance-display { text-align: center; margin-bottom: 16px; }
.cbd-label { color: #808090; font-size: 12px; display: block; }
.cbd-amount { color: #7fec7f; font-size: 28px; font-weight: 700; }
.cashier-history { max-height: 300px; overflow-y: auto; }
.ch-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 12px; }
.ch-deposit .ch-amt { color: #7fec7f; }
.ch-withdraw .ch-amt { color: #ec7f7f; }
.ch-empty { color: #606070; text-align: center; }

/* 268: Crypto */
.crypto-coin-label { color: #c0c0e0; font-size: 13px; }
.crypto-address { display: block; background: #0f0f1a; color: #7fbaec; padding: 8px; border-radius: 6px; font-size: 10px; word-break: break-all; margin: 8px 0; }
.crypto-copy-btn { background: #2a4a8a; color: #fff; border: none; padding: 6px 16px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.crypto-rate { color: #808090; font-size: 11px; }

/* 269: Wagering badge */
.wagering-badge { padding: 3px 12px; border-radius: 10px; font-size: 11px; margin-left: 4px; }
.wg-active { background: #3a2a1a; color: #ecba7f; }
.wg-almost { background: #1a3a1a; color: #7fec7f; animation: wg-pulse 1s ease-in-out infinite; }
@keyframes wg-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }

/* 270: Cashback */
.cashback-badge { background: #2a1a3a; color: #c0a0ff; padding: 3px 12px; border-radius: 10px; font-size: 11px; cursor: pointer; margin-left: 4px; }

/* 271: Tournament */
.tournament-badge { background: linear-gradient(135deg, #3a3a1a, #2a2a0a); color: #ffd700; padding: 4px 14px; border-radius: 10px; font-size: 11px; font-weight: 600; cursor: pointer; margin: 4px 0; display: block; text-align: center; }
.leaderboard-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.9); z-index: 99997; display: flex; align-items: center; justify-content: center; }
.leaderboard-popup { background: linear-gradient(180deg, #1a1a2e, #0a0a16); border: 2px solid #3a3a5a; border-radius: 16px; padding: 24px; max-width: 440px; width: 90%; max-height: 80vh; overflow-y: auto; }
.leaderboard-popup h3 { color: #ffd700; text-align: center; font-size: 18px; margin: 0 0 8px; }
.lb-prize { color: #7fec7f; text-align: center; font-size: 14px; font-weight: 600; }
.lb-entries { margin-top: 12px; }
.lb-entry { display: flex; align-items: center; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.lb-player { background: rgba(127,186,236,0.1); border-radius: 6px; }
.lb-rank { width: 36px; font-size: 14px; text-align: center; }
.lb-name { flex: 1; color: #c0c0e0; font-weight: 500; }
.lb-score { color: #ffd700; font-weight: 600; }
.lb-close-btn { display: block; width: 100%; margin-top: 12px; background: #2a4a8a; color: #fff; border: none; padding: 10px; border-radius: 8px; cursor: pointer; }

/* 273: Promo banner */
.promo-banner { padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; text-align: center; margin: 8px 0; cursor: pointer; }
.pb-welcome { background: linear-gradient(135deg, #1a3a1a, #2a4a2a); color: #7fec7f; }
.pb-promo { background: linear-gradient(135deg, #3a1a1a, #4a2a2a); color: #ff9f7f; }
.pb-vip { background: linear-gradient(135deg, #2a1a3a, #3a2a4a); color: #c0a0ff; }
.pb-tournament { background: linear-gradient(135deg, #3a3a1a, #4a4a2a); color: #ffd700; }

/* 274: Email opt-in */
.email-optin-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 99996; display: flex; align-items: center; justify-content: center; }
.email-optin-popup { background: linear-gradient(180deg, #1a1a2e, #0a0a16); border: 2px solid #2a8a2a; border-radius: 16px; padding: 28px; max-width: 380px; text-align: center; }
.email-optin-popup h3 { color: #7fec7f; font-size: 20px; margin: 0 0 12px; }
.email-optin-popup p { color: #c0c0e0; font-size: 14px; margin: 8px 0; }
.email-optin-popup strong { color: #ffd700; }
.email-optin-input { width: 100%; background: #0f0f1a; color: #e0e0ff; border: 1px solid #2a2a4a; border-radius: 8px; padding: 10px; font-size: 14px; margin: 12px 0; box-sizing: border-box; }
.email-optin-btn { width: 100%; background: linear-gradient(135deg, #2a8a2a, #1a6a1a); color: #fff; border: none; padding: 12px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
.email-optin-dismiss { background: none; border: none; color: #606070; font-size: 12px; cursor: pointer; margin-top: 8px; }


/* ═══════════════════════ Sprint 275-282 CSS ═══════════════════════ */

/* 275: KYC badge */
.kyc-badge { padding: 3px 12px; border-radius: 10px; font-size: 11px; cursor: pointer; margin-left: 4px; }
.kyc-none { background: #5a1a1a; color: #ff7f7f; }
.kyc-email { background: #3a3a1a; color: #ecec7f; }
.kyc-pending { background: #1a3a3a; color: #7fecec; }
.kyc-verified { background: #1a3a1a; color: #7fec7f; }
.kyc-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.9); z-index: 99997; display: flex; align-items: center; justify-content: center; }
.kyc-popup { background: linear-gradient(180deg, #1a1a2e, #0a0a16); border: 2px solid #3a3a5a; border-radius: 16px; padding: 28px; max-width: 460px; width: 90%; }
.kyc-popup h3 { color: #e0e0ff; text-align: center; font-size: 18px; margin: 0 0 16px; }
.kyc-steps { display: flex; flex-direction: column; gap: 10px; }
.kyc-step { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.03); border: 1px solid #2a2a4a; border-radius: 8px; padding: 12px; }
.ks-done { border-color: #2a5a2a; background: rgba(42,138,42,0.05); }
.ks-active { border-color: #3a3a7a; }
.ks-num { width: 28px; height: 28px; border-radius: 50%; background: #2a2a4a; color: #c0c0e0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.ks-done .ks-num { background: #2a5a2a; color: #7fec7f; }
.ks-label { flex: 1; color: #c0c0e0; font-size: 13px; }
.ks-check { color: #7fec7f; font-size: 18px; }
.ks-lock { color: #606070; font-size: 14px; }
.ks-btn { background: #2a4a8a; color: #fff; border: none; padding: 6px 16px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.kyc-info { margin-top: 12px; }
.kyc-info p { color: #a0a0c0; font-size: 13px; text-align: center; }
.kyc-verified-msg { color: #7fec7f !important; font-weight: 600; }
.kyc-limits { color: #606070; font-size: 11px; text-align: center; margin-top: 10px; }
.kyc-close-btn { display: block; width: 100%; margin-top: 12px; background: #2a4a8a; color: #fff; border: none; padding: 10px; border-radius: 8px; cursor: pointer; }

/* 277: Geo badge */
.geo-badge { padding: 2px 10px; border-radius: 10px; font-size: 11px; margin-left: 4px; }
.geo-ok { background: #1a2a1a; color: #7fec9f; }

/* 279: Rate limit */
.rate-limit-badge { background: #5a1a1a; color: #ff7f7f; padding: 4px 14px; border-radius: 10px; font-size: 12px; font-weight: 700; animation: rl-flash 0.5s ease-in-out infinite; }
@keyframes rl-flash { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* 280: 2FA badge */
.twofa-badge { padding: 2px 10px; border-radius: 10px; font-size: 11px; cursor: pointer; margin-left: 4px; }
.tfa-on { background: #1a3a1a; color: #7fec7f; }
.tfa-off { background: #3a2a1a; color: #ecba7f; }

/* 281: Password strength */
.pw-bar { height: 6px; background: #1a1a2e; border-radius: 3px; overflow: hidden; margin-top: 4px; }
.pw-fill { height: 100%; transition: width 0.3s; border-radius: 3px; }
.pw-vweak .pw-fill, .pw-vweak { background: #8a1a1a; color: #ff4f4f; }
.pw-weak .pw-fill, .pw-weak { background: #8a4a1a; color: #ff8f4f; }
.pw-fair .pw-fill, .pw-fair { background: #8a8a1a; color: #ecec7f; }
.pw-good .pw-fill, .pw-good { background: #4a8a1a; color: #bfec7f; }
.pw-strong .pw-fill, .pw-strong { background: #1a8a1a; color: #7fec7f; }
.pw-vstrong .pw-fill, .pw-vstrong { background: #1a8a4a; color: #7fecbf; }
.pw-excellent .pw-fill, .pw-excellent { background: #1a4a8a; color: #7fbfec; }
.pw-label { font-size: 11px; margin-left: 4px; }

/* Security controls */
.security-controls { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.sec-btn { background: #1a1a2e; color: #a0a0c0; border: 1px solid #2a2a4a; padding: 4px 14px; border-radius: 6px; cursor: pointer; font-size: 11px; }
.sec-btn:hover { background: #2a2a3e; border-color: #4a4a6a; }


/* ═══════════════════════ Sprint 283-290 CSS ═══════════════════════ */

/* 283: Bonus buy */
.bonus-buy-badge { padding: 4px 14px; border-radius: 10px; font-size: 12px; font-weight: 600; cursor: pointer; margin-left: 4px; }
.bb-available { background: linear-gradient(135deg, #4a2a1a, #6a3a2a); color: #ffd700; }
.bb-active { background: linear-gradient(135deg, #1a4a1a, #2a6a2a); color: #7fec7f; animation: bb-pulse 0.8s ease-in-out infinite; }
@keyframes bb-pulse { 0%,100% { box-shadow: 0 0 8px rgba(127,236,127,0.3); } 50% { box-shadow: 0 0 16px rgba(127,236,127,0.6); } }

/* 284: Gamble */
.gamble-offer { background: linear-gradient(180deg, #1a1a2e, #0a0a16); border: 2px solid #4a2a2a; border-radius: 12px; padding: 20px; text-align: center; margin-top: 10px; }
.gamble-offer p { color: #e0e0ff; font-size: 16px; margin: 6px 0; }
.gamble-btns { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.gamble-btn { padding: 10px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; }
.gb-red { background: linear-gradient(135deg, #8a2a2a, #6a1a1a); color: #fff; }
.gb-black { background: linear-gradient(135deg, #2a2a2e, #1a1a1e); color: #fff; }
.gb-collect { background: linear-gradient(135deg, #2a8a2a, #1a6a1a); color: #fff; }
.gamble-loss { color: #ff4f4f !important; font-weight: 700; }

/* 285: Lobby categories */
.lobby-category-bar { display: flex; gap: 4px; overflow-x: auto; padding: 8px 0; scrollbar-width: none; }
.lobby-category-bar::-webkit-scrollbar { display: none; }
.lob-cat-btn { background: #16213e; color: #a0a0c0; border: 1px solid #2a2a4a; padding: 6px 14px; border-radius: 20px; white-space: nowrap; cursor: pointer; font-size: 12px; transition: all 0.2s; }
.lob-cat-btn:hover { background: #1a2a4a; color: #e0e0ff; }
.lcat-active { background: #2a4a8a; color: #fff; border-color: #4a6aaa; }

/* 286: Celebrations */
.celebration-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 99995; overflow: hidden; }
.confetti-particle { position: absolute; top: -10px; width: 8px; height: 8px; border-radius: 2px; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } }
.win-text-overlay { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); font-size: 48px; font-weight: 900; color: #ffd700; text-shadow: 0 0 20px rgba(255,215,0,0.6), 0 4px 8px rgba(0,0,0,0.5); animation: win-text-pop 0.5s ease-out forwards; pointer-events: none; }
@keyframes win-text-pop { 0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* 288: Scatter */
.scatter-pay-badge { padding: 4px 14px; border-radius: 10px; font-size: 12px; font-weight: 600; margin-left: 4px; }
.sp-normal { background: #2a2a4a; color: #c0a0ff; }
.sp-big { background: #3a2a5a; color: #e0c0ff; animation: sp-glow 0.6s ease-in-out infinite; }
.sp-mega { background: linear-gradient(135deg, #5a2a8a, #8a2a5a); color: #fff; animation: sp-glow 0.4s ease-in-out infinite; }
@keyframes sp-glow { 0%,100% { box-shadow: 0 0 6px rgba(192,160,255,0.3); } 50% { box-shadow: 0 0 12px rgba(192,160,255,0.6); } }

/* 289: Wild expansion */
.wild-exp-badge { background: linear-gradient(135deg, #4a4a1a, #6a6a2a); color: #ffd700; padding: 4px 14px; border-radius: 10px; font-size: 12px; font-weight: 600; animation: wild-flash 0.3s ease-out; }
@keyframes wild-flash { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* Game controls */
.game-controls-bar { display: flex; gap: 6px; margin-top: 6px; justify-content: center; }
.gc-btn { background: #16213e; color: #c0c0e0; border: 1px solid #2a2a4a; padding: 6px 16px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.gc-btn:hover { background: #1a2a4a; border-color: #4a4a7a; }

/* 290: Paytable */
.paytable-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.9); z-index: 99997; display: flex; align-items: center; justify-content: center; }
.paytable-popup { background: linear-gradient(180deg, #1a1a2e, #0a0a16); border: 2px solid #3a3a5a; border-radius: 16px; padding: 24px; max-width: 500px; width: 92%; max-height: 80vh; overflow-y: auto; }
.paytable-popup h3 { color: #e0e0ff; text-align: center; font-size: 18px; margin: 0 0 16px; text-transform: capitalize; }
.pt-section { margin-bottom: 16px; }
.pt-section h4 { color: #7fbaec; font-size: 14px; margin: 0 0 8px; border-bottom: 1px solid #2a2a4a; padding-bottom: 4px; }
.pt-grid { display: flex; flex-direction: column; gap: 4px; }
.pt-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: rgba(255,255,255,0.02); border-radius: 4px; }
.pt-sym { width: 28px; height: 28px; background: #2a2a4a; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #ffd700; font-weight: 700; font-size: 14px; }
.pt-name { width: 80px; color: #c0c0e0; font-size: 12px; }
.pt-pays { flex: 1; color: #a0a0c0; font-size: 11px; text-align: right; font-family: monospace; }
.pt-section p { color: #a0a0c0; font-size: 12px; line-height: 1.5; margin: 6px 0; }
.pt-section strong { color: #e0e0ff; }
.pt-close-btn { display: block; width: 100%; margin-top: 12px; background: #2a4a8a; color: #fff; border: none; padding: 10px; border-radius: 8px; cursor: pointer; }


/* ═══════════════════════ Sprint 291-298 CSS ═══════════════════════ */

/* Admin link */
.admin-panel-link { display: inline-block; background: #1a1a2e; color: #ff6b6b; border: 1px solid #3a1a1a; padding: 4px 12px; border-radius: 6px; font-size: 11px; text-decoration: none; margin-top: 8px; }
.admin-panel-link:hover { background: #2a1a1a; }

/* Operator footer - industry standard compliance display */
.operator-footer { margin-top: 32px; padding: 24px 16px; border-top: 1px solid #1a1a2a; text-align: center; }
.operator-license { color: #505060; font-size: 11px; margin: 4px 0; }
.operator-rng { color: #505060; font-size: 11px; margin: 4px 0; }
.operator-badges { display: flex; gap: 8px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }
.op-badge { background: #16213e; color: #7fbaec; padding: 3px 10px; border-radius: 4px; font-size: 10px; font-weight: 600; border: 1px solid #2a2a4a; }
.operator-links { margin-top: 8px; }
.operator-links a { color: #505080; font-size: 11px; text-decoration: none; }
.operator-links a:hover { color: #7fbaec; text-decoration: underline; }


/* Sprint 299-306: Revenue & Engagement */
.live-player-badge{position:fixed;top:12px;right:12px;background:rgba(0,0,0,0.8);color:#0f0;padding:6px 14px;border-radius:20px;font-size:13px;display:flex;align-items:center;gap:8px;z-index:900;backdrop-filter:blur(6px);border:1px solid rgba(0,255,0,0.2)}
.live-dot{width:8px;height:8px;border-radius:50%;background:#0f0;animation:livePulse299 2s infinite}
@keyframes livePulse299{0%,100%{box-shadow:0 0 4px #0f0}50%{box-shadow:0 0 12px #0f0,0 0 20px rgba(0,255,0,0.3)}}
.game-rtp-badge{position:absolute;top:10px;left:10px;background:rgba(255,215,0,0.15);color:#ffd700;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;border:1px solid rgba(255,215,0,0.3);z-index:50}
.provider-badge{position:absolute;top:10px;right:10px;background:rgba(255,255,255,0.1);color:#aaa;padding:4px 10px;border-radius:10px;font-size:11px;border:1px solid rgba(255,255,255,0.15);z-index:50}
.session-pl-container{position:fixed;bottom:80px;left:12px;background:rgba(0,0,0,0.85);padding:8px 16px;border-radius:12px;z-index:900;font-size:13px;backdrop-filter:blur(6px)}
.session-pl-label{color:#888;margin-right:6px}
.session-pl-value{font-weight:700;font-size:15px}
.session-pl-positive{color:#0f0}
.session-pl-negative{color:#f44}
.session-pl-warn{color:#ff6600;font-size:11px;margin-top:4px;font-style:italic}
.deposit-quick-strip{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,rgba(0,100,0,0.95),rgba(0,60,0,0.95));padding:10px 20px;border-radius:16px;display:flex;align-items:center;gap:10px;z-index:950;box-shadow:0 4px 20px rgba(0,255,0,0.2);border:1px solid rgba(0,255,0,0.3)}
.dqs-label{color:#aaa;font-size:13px;white-space:nowrap}
.dqs-btn{background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2);padding:8px 16px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;transition:all 0.2s}
.dqs-btn:hover{background:rgba(255,255,255,0.2);transform:scale(1.05)}
.dqs-btn-highlight{background:linear-gradient(135deg,#ffd700,#ff8c00);color:#000;border-color:#ffd700}
.vip-meter-container{position:fixed;bottom:120px;left:12px;background:rgba(0,0,0,0.8);padding:8px 14px;border-radius:10px;z-index:900;width:180px;backdrop-filter:blur(6px)}
.vip-meter-label{font-size:11px;font-weight:600;display:block;margin-bottom:4px}
.vip-meter-track{width:100%;height:6px;background:rgba(255,255,255,0.1);border-radius:3px;overflow:hidden}
.vip-meter-fill{height:100%;border-radius:3px;transition:width 0.5s ease}
.cashout-protection-bar{position:fixed;top:50px;left:50%;transform:translateX(-50%);background:rgba(255,100,0,0.95);color:#fff;padding:10px 24px;border-radius:12px;z-index:999;font-size:13px;text-align:center}
.cashout-timer-track{width:200px;height:4px;background:rgba(255,255,255,0.3);border-radius:2px;margin-top:6px}
.cashout-timer-fill{height:100%;background:#fff;border-radius:2px;transition:width 1s linear}
.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;background:rgba(10,10,20,0.98);display:flex;justify-content:space-around;padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:1000;border-top:1px solid rgba(255,255,255,0.1)}
.mob-nav-btn{background:none;border:none;color:#888;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;cursor:pointer;padding:4px 8px}
.mob-nav-btn:hover{color:#fff}
.mob-nav-icon{font-size:20px}
.mob-nav-deposit{color:#ffd700}
.mob-nav-deposit .mob-nav-icon{font-size:24px;background:linear-gradient(135deg,#ffd700,#ff8c00);color:#000;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:-12px}
@media(min-width:769px){.mobile-bottom-nav{display:none!important}}


/* Sprint 307-314 */
.game-heat-badge{position:absolute;top:40px;left:10px;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:700;z-index:50}
.game-heat-hot{background:rgba(255,68,0,0.2);color:#ff4400;border:1px solid rgba(255,68,0,0.4);animation:heatPulse307 1s infinite}
.game-heat-cold{background:rgba(0,100,255,0.2);color:#66aaff;border:1px solid rgba(0,100,255,0.3)}
@keyframes heatPulse307{0%,100%{box-shadow:0 0 4px rgba(255,68,0,0.3)}50%{box-shadow:0 0 12px rgba(255,68,0,0.5)}}
#betTimelineContainer{position:fixed;bottom:160px;left:12px;display:flex;gap:4px;z-index:900}
.bt-entry{padding:2px 8px;border-radius:8px;font-size:11px;font-weight:600}
.bt-win{background:rgba(0,255,0,0.15);color:#0f0}
.bt-loss{background:rgba(255,0,0,0.1);color:#f44}
#winStreakMultiplier{position:absolute;top:40px;right:10px;background:linear-gradient(135deg,rgba(255,215,0,0.2),rgba(255,140,0,0.2));color:#ffd700;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:700;border:1px solid rgba(255,215,0,0.3);z-index:50;display:none}
@keyframes streakPulse309{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
.autospin-btn{background:rgba(100,0,255,0.2);color:#aa77ff;border:1px solid rgba(100,0,255,0.3);padding:8px 16px;border-radius:10px;cursor:pointer;font-weight:600;transition:all 0.2s}
.autospin-active{background:rgba(255,0,100,0.3);color:#ff6699;border-color:rgba(255,0,100,0.5);animation:autoSpinPulse 1.5s infinite}
@keyframes autoSpinPulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 10px rgba(255,0,100,0.3)}}
#autoSpinCounter{font-size:11px;color:#888;margin-left:8px}
.turbo-btn{background:rgba(255,200,0,0.15);color:#ffcc00;border:1px solid rgba(255,200,0,0.3);padding:6px 14px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600}
.turbo-active{background:rgba(255,200,0,0.35);color:#fff;box-shadow:0 0 10px rgba(255,200,0,0.3)}
#volumeSlider312{width:100px;accent-color:#ffd700;cursor:pointer}
.gs313-card{background:rgba(10,10,30,0.95);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:24px;max-width:320px;color:#fff}
.gs313-card h3{margin:0 0 16px;color:#ffd700;font-size:18px}
.gs313-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.gs313-val{color:#0f0;font-weight:600}
.gs313-close{margin-top:16px;background:rgba(255,255,255,0.1);color:#fff;border:none;padding:8px 24px;border-radius:8px;cursor:pointer}
#gameStatsOverlay313{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:none;align-items:center;justify-content:center;z-index:9999}
.rg314-card{background:rgba(10,10,30,0.95);border:1px solid rgba(255,100,0,0.3);border-radius:16px;padding:24px;max-width:400px;color:#fff}
.rg314-card h3{color:#ff6600;margin:0 0 12px}
.rg314-q{padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.05);display:flex;flex-wrap:wrap;gap:8px}
.rg314-q span{width:100%;font-size:14px}
.rg314-q label{font-size:13px;color:#aaa;cursor:pointer}
.rg314-submit{margin-top:16px;background:linear-gradient(135deg,#ff6600,#ff3300);color:#fff;border:none;padding:10px 24px;border-radius:10px;cursor:pointer;font-weight:600;margin-right:8px}
.rg314-close{margin-top:16px;background:rgba(255,255,255,0.1);color:#fff;border:none;padding:10px 24px;border-radius:10px;cursor:pointer}
#rgAssessment314{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:none;align-items:center;justify-content:center;z-index:9999}


/* Sprint 315-322 */
#welcomeFlow315{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);display:none;align-items:center;justify-content:center;z-index:10000}
.wf315-card{background:linear-gradient(135deg,#1a0a30,#0a1a2a);border:1px solid rgba(255,215,0,0.3);border-radius:20px;padding:40px;text-align:center;max-width:400px;color:#fff}
.wf315-card h2{color:#ffd700;margin:0 0 16px}
.wf315-steps{text-align:left;list-style:none;padding:0}
.wf315-steps li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.05);color:#ccc}
.wf315-steps li::before{content:'\2713 ';color:#0f0}
.wf315-btn{margin-top:20px;background:linear-gradient(135deg,#ffd700,#ff8c00);color:#000;border:none;padding:14px 40px;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:transform 0.2s}
.wf315-btn:hover{transform:scale(1.05)}
#jackpotWidget316{display:none;text-align:center;margin:16px 0;padding:16px;background:linear-gradient(135deg,rgba(255,215,0,0.1),rgba(255,140,0,0.05));border:1px solid rgba(255,215,0,0.2);border-radius:16px}
#jackpotAmount316{font-size:28px;font-weight:800;color:#ffd700;text-shadow:0 0 20px rgba(255,215,0,0.3);display:block;margin-top:8px}
#favGamesBar317{display:none;position:fixed;top:48px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.85);padding:8px 16px;border-radius:12px;z-index:900;gap:8px;align-items:center;backdrop-filter:blur(6px)}
.fav317-label{color:#888;font-size:12px;white-space:nowrap}
.fav317-chip{background:rgba(255,215,0,0.15);color:#ffd700;border:1px solid rgba(255,215,0,0.3);padding:4px 12px;border-radius:10px;font-size:12px;cursor:pointer}
.fav317-chip:hover{background:rgba(255,215,0,0.3)}
#sessionTimeReminder318{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,100,0,0.95);color:#fff;padding:16px 32px;border-radius:14px;font-size:15px;z-index:10000;text-align:center;box-shadow:0 4px 30px rgba(255,100,0,0.3)}
#gameLoadingScreen321{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(5,5,15,0.98);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:10000}
.loading-spinner{width:48px;height:48px;border:4px solid rgba(255,215,0,0.2);border-top-color:#ffd700;border-radius:50%;animation:loadSpin321 1s linear infinite}
@keyframes loadSpin321{to{transform:rotate(360deg)}}
.loading-tip{color:#888;font-size:14px;margin-top:20px;font-style:italic;max-width:300px;text-align:center}
#cookieBanner322{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(10,10,20,0.98);padding:16px 24px;z-index:10001;align-items:center;justify-content:center;gap:16px;border-top:1px solid rgba(255,255,255,0.1);flex-wrap:wrap}
.cookie-text{color:#aaa;font-size:13px;max-width:500px}
.cookie-text a{color:#ffd700}
.cookie-accept{background:linear-gradient(135deg,#0f0,#0a0);color:#000;border:none;padding:8px 20px;border-radius:8px;font-weight:600;cursor:pointer}
.cookie-reject{background:rgba(255,255,255,0.1);color:#fff;border:none;padding:8px 20px;border-radius:8px;cursor:pointer}


/* Sprint 323-330: Platform Hardening */
#arpuWidget324{position:absolute;bottom:10px;left:10px;background:rgba(0,200,100,0.15);color:#0c6;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:600;border:1px solid rgba(0,200,100,0.3);z-index:50;display:none}
#segmentBadge327{position:fixed;top:12px;left:12px;padding:4px 12px;border-radius:12px;font-size:11px;font-weight:700;border:1px solid;background:rgba(0,0,0,0.7);z-index:900;display:none;backdrop-filter:blur(6px)}
#lossRecovery328{display:none;position:fixed;bottom:60px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,rgba(255,100,0,0.95),rgba(200,50,0,0.95));padding:14px 24px;border-radius:16px;z-index:960;align-items:center;gap:12px;box-shadow:0 4px 20px rgba(255,100,0,0.3);max-width:400px}
.lr328-text{color:#fff;font-size:14px;font-weight:600}
.lr328-btn{background:#fff;color:#c00;border:none;padding:8px 18px;border-radius:10px;font-weight:700;cursor:pointer;white-space:nowrap}
.lr328-btn:hover{background:#ffe;transform:scale(1.05)}
.lr328-close{background:none;border:none;color:rgba(255,255,255,0.6);font-size:18px;cursor:pointer;padding:0 4px}
#betSuggestion329{position:absolute;bottom:10px;right:10px;background:rgba(100,0,255,0.15);color:#aa77ff;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:600;border:1px solid rgba(100,0,255,0.3);z-index:50;display:none;cursor:pointer}
#betSuggestion329:hover{background:rgba(100,0,255,0.3)}


/* Sprint 331-338: Player Retention */
.smart-notif{display:none;position:fixed;top:70px;right:12px;padding:12px 20px;border-radius:14px;z-index:9999;max-width:350px;align-items:center;gap:10px;backdrop-filter:blur(8px)}
.sn331-info{background:rgba(0,100,255,0.9);color:#fff}
.sn331-success{background:rgba(0,180,0,0.9);color:#fff}
.sn331-warning{background:rgba(255,140,0,0.9);color:#fff}
.sn331-text{font-size:14px;font-weight:500}
@keyframes slideInNotif331{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOutNotif331{from{opacity:1}to{transform:translateX(100%);opacity:0}}
#depositCountdown332{display:none;position:fixed;top:110px;right:12px;background:linear-gradient(135deg,rgba(0,200,0,0.95),rgba(0,150,0,0.95));padding:12px 20px;border-radius:14px;z-index:950;align-items:center;gap:10px;color:#fff;font-weight:600;box-shadow:0 4px 16px rgba(0,200,0,0.3)}
.dc332-pct{font-size:16px;font-weight:800;color:#ffd700}
.dc332-time{font-family:monospace;font-size:20px;font-weight:800}
#winGoalTracker333{display:none;position:fixed;bottom:160px;right:12px;background:rgba(0,0,0,0.85);padding:10px 16px;border-radius:12px;z-index:900;width:180px;flex-direction:column;gap:6px;backdrop-filter:blur(6px)}
.wg333-label{font-size:11px;color:#ccc}
.wg333-track{width:100%;height:6px;background:rgba(255,255,255,0.1);border-radius:3px;overflow:hidden}
.wg333-bar{height:100%;background:linear-gradient(90deg,#ffd700,#ff8c00);border-radius:3px;transition:width 0.5s ease}
#shareCard335{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a0a30,#0a1a2a);border:2px solid rgba(255,215,0,0.4);border-radius:20px;padding:32px;z-index:10000;text-align:center;min-width:300px;box-shadow:0 8px 40px rgba(0,0,0,0.5)}
.sc335-amount{font-size:36px;font-weight:800;color:#ffd700;display:block;margin:8px 0}
.sc335-game{font-size:14px;color:#888;display:block;margin-bottom:16px}
.sc335-btns{display:flex;gap:10px;justify-content:center}
.sc335-btn{padding:10px 20px;border-radius:10px;font-weight:600;cursor:pointer;border:none;font-size:14px}
.sc335-twitter{background:#1DA1F2;color:#fff}
.sc335-copy{background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2)}
.sc335-close{background:none;color:#666;border:none;margin-top:12px;cursor:pointer;font-size:12px}
#loyaltyPts336{position:fixed;top:12px;left:120px;background:rgba(255,215,0,0.15);color:#ffd700;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;border:1px solid rgba(255,215,0,0.3);z-index:900;backdrop-filter:blur(6px)}
#gameRecs337{display:none;margin:12px 0;padding:10px 16px;background:rgba(100,0,255,0.08);border:1px solid rgba(100,0,255,0.15);border-radius:12px}
.gr337-title{color:#888;font-size:12px;margin-right:10px}
.gr337-btn{background:rgba(100,0,255,0.2);color:#aa77ff;border:1px solid rgba(100,0,255,0.3);padding:4px 12px;border-radius:8px;font-size:12px;cursor:pointer;margin:0 4px}
.gr337-btn:hover{background:rgba(100,0,255,0.4)}


/* ══ Sprint 339-346 — Payment Infrastructure & Regulatory ══════ */

/* Geo-IP banner */
#geoRestrictionBanner {
    display: none;
    background: linear-gradient(135deg, #2d1f00, #1a1200);
    border: 1px solid #f0ad4e;
    border-radius: 8px;
    padding: 12px 20px;
    margin: 8px auto;
    max-width: 600px;
    text-align: center;
    color: #f0ad4e;
    font-size: 13px;
}

/* RG Footer */
.rg-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.95) 30%);
    padding: 16px 0 12px;
    z-index: 9000;
}
.rg-footer-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
}
.rg-footer-logo {
    background: #c0392b;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
}
.rg-footer-sep { color: #555; }
.rg-footer-link {
    color: #87ceeb;
    text-decoration: none;
    font-size: 12px;
    transition: color 0.2s;
}
.rg-footer-link:hover { color: #ffd700; text-decoration: underline; }
.rg-footer-text { color: #888; font-size: 11px; font-style: italic; }

/* Stripe checkout panel */
.stripe-checkout-panel {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 1px solid #ffd700;
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    margin: 16px auto;
}
.stripe-checkout-panel h3 { color: #ffd700; margin: 0 0 16px; }
.stripe-amount-btn {
    background: #2d2d5e;
    color: #ffd700;
    border: 1px solid #ffd700;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}
.stripe-amount-btn:hover {
    background: #ffd700;
    color: #000;
    transform: translateY(-2px);
}

/* Withdrawal queue */
.withdrawal-queue {
    background: #111;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 16px;
    max-width: 500px;
    margin: 12px auto;
}
.withdrawal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #222;
    color: #ccc;
    font-size: 13px;
}
.withdrawal-status-pending { color: #f0ad4e; }
.withdrawal-status-approved { color: #2ecc71; }
.withdrawal-status-rejected { color: #e74c3c; }

/* Transaction history */
.tx-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: #ccc;
}
.tx-history-table th {
    background: #1a1a2e;
    color: #ffd700;
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
}
.tx-history-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #222;
}
.tx-type-deposit { color: #2ecc71; }
.tx-type-withdrawal { color: #e74c3c; }
.tx-type-win { color: #ffd700; }
.tx-type-wager { color: #87ceeb; }

@media (max-width: 600px) {
    .rg-footer-inner { gap: 4px; font-size: 10px; }
    .rg-footer-link { font-size: 10px; }
    .rg-footer-text { font-size: 9px; }
    .stripe-checkout-panel { margin: 8px; padding: 16px; }
}


/* ══ Sprint 347-354 — Analytics Dashboard & Player Retention ═══ */

/* Revenue Dashboard */
.revenue-dash-panel {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    background: linear-gradient(135deg, #0d1117, #161b22);
    border: 2px solid #ffd700; border-radius: 16px;
    padding: 24px; z-index: 10000; display: none;
    max-width: 500px; width: 90%;
}
.rev-dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.rev-dash-header h3 { color: #ffd700; margin: 0; }
.rev-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rev-dash-card {
    background: rgba(255,255,255,0.05); border-radius: 10px; padding: 14px;
    display: flex; flex-direction: column; gap: 4px;
}
.rev-dash-wide { grid-column: span 2; text-align: center; background: rgba(255,215,0,0.1); }
.rev-label { color: #888; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.rev-value { font-size: 20px; font-weight: bold; }
.rev-green { color: #2ecc71; }
.rev-red { color: #e74c3c; }
.rev-blue { color: #3498db; }
.rev-gold { color: #ffd700; }

/* Streak Badge */
.streak-badge {
    position: fixed; top: 80px; right: 20px;
    background: linear-gradient(135deg, #ff6b35, #f7c948);
    color: #000; font-weight: bold; font-size: 14px;
    padding: 8px 16px; border-radius: 20px; z-index: 9500;
    animation: streakPulse 2s infinite;
    display: none;
}
@keyframes streakPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Churn Offer Toast */
.churn-offer-toast {
    position: fixed; bottom: 80px; right: 20px;
    background: linear-gradient(135deg, #1a1a2e, #2d1b4e);
    border: 1px solid #9b59b6; border-radius: 12px;
    padding: 20px; z-index: 9500; max-width: 320px;
    animation: slideInRight 0.5s ease;
}
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.churn-offer-content { text-align: center; color: #ccc; }
.churn-icon { font-size: 32px; display: block; margin-bottom: 8px; }
.churn-claim-btn {
    background: #ffd700; color: #000; border: none;
    padding: 10px 24px; border-radius: 8px; font-weight: bold;
    cursor: pointer; margin-top: 12px; transition: all 0.3s;
}
.churn-claim-btn:hover { background: #ffed4a; transform: translateY(-2px); }

/* Referral Panel */
.referral-panel {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 10000;
    display: none; align-items: center; justify-content: center;
}
.referral-inner {
    background: #1a1a2e; border: 2px solid #ffd700; border-radius: 16px;
    padding: 32px; max-width: 420px; text-align: center; position: relative;
}
.referral-inner h3 { color: #ffd700; margin: 0 0 12px; }
.referral-inner p { color: #ccc; font-size: 14px; }
.referral-code-box {
    background: #111; border: 1px solid #333; border-radius: 8px;
    padding: 12px; margin: 16px 0; display: flex;
    align-items: center; justify-content: space-between;
    color: #ffd700; font-size: 18px; font-weight: bold;
}
.ref-copy-btn {
    background: #ffd700; color: #000; border: none;
    padding: 6px 14px; border-radius: 6px; cursor: pointer; font-weight: bold;
}
.ref-close-btn {
    position: absolute; top: 12px; right: 16px;
    background: none; border: none; color: #ffd700; font-size: 24px; cursor: pointer;
}

/* Daily Bonus */
.daily-bonus-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 10001;
    display: flex; align-items: center; justify-content: center;
}
.daily-bonus-card {
    background: linear-gradient(135deg, #1a1a2e, #2d1b4e);
    border: 2px solid #ffd700; border-radius: 20px;
    padding: 40px; text-align: center; max-width: 380px;
}
.daily-bonus-card h2 { color: #ffd700; margin: 0 0 12px; }
.daily-bonus-day { color: #87ceeb; font-size: 16px; margin-bottom: 8px; }
.daily-bonus-reward { color: #ffd700; font-size: 36px; font-weight: bold; margin: 16px 0; }
.daily-bonus-week { display: flex; gap: 6px; justify-content: center; margin: 16px 0; }
.db-day {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: bold; background: #333; color: #666;
}
.db-claimed { background: #2ecc71; color: #fff; }
.db-today { background: #ffd700; color: #000; box-shadow: 0 0 10px rgba(255,215,0,0.5); }
.daily-claim-btn {
    background: linear-gradient(135deg, #ffd700, #ffed4a);
    color: #000; border: none; padding: 14px 40px;
    border-radius: 10px; font-size: 16px; font-weight: bold;
    cursor: pointer; margin-top: 12px; transition: all 0.3s;
}
.daily-claim-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(255,215,0,0.4); }

/* Achievement Toast */
.achievement-toast {
    position: fixed; top: -80px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #1a1a2e, #2d1b4e);
    border: 1px solid #ffd700; border-radius: 12px;
    padding: 12px 20px; z-index: 10002;
    display: flex; align-items: center; gap: 12px;
    transition: top 0.5s ease; color: #ccc;
}
.achievement-toast.ach-show { top: 20px; }
.ach-icon { font-size: 28px; }

/* Achievements Panel */
.achievements-panel {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 10000;
    display: none; align-items: center; justify-content: center;
}
.ach-panel-inner {
    background: #1a1a2e; border: 2px solid #ffd700; border-radius: 16px;
    padding: 24px; max-width: 500px; width: 90%;
}
.ach-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ach-panel-header h3 { color: #ffd700; margin: 0; }
.achievements-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ach-card {
    background: rgba(255,255,255,0.05); border-radius: 10px;
    padding: 12px; text-align: center; display: flex;
    flex-direction: column; gap: 4px;
}
.ach-card strong { color: #ffd700; font-size: 13px; }
.ach-card small { color: #888; font-size: 11px; }
.ach-card-icon { font-size: 24px; }
.ach-unlocked { border: 1px solid #ffd700; }
.ach-locked { opacity: 0.4; border: 1px solid #333; }

/* Push Notification Opt-In */
.push-optin-banner {
    position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 1px solid #3498db; border-radius: 12px;
    padding: 16px 20px; z-index: 9500; max-width: 420px; width: 90%;
    animation: slideUp 0.5s ease;
}
@keyframes slideUp { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
.push-optin-inner { display: flex; align-items: center; gap: 12px; color: #ccc; }
.push-icon { font-size: 24px; }
.push-btns { display: flex; gap: 8px; margin-left: auto; }
.push-allow-btn {
    background: #3498db; color: #fff; border: none;
    padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: bold;
}
.push-dismiss-btn {
    background: transparent; color: #888; border: 1px solid #555;
    padding: 8px 12px; border-radius: 6px; cursor: pointer;
}

@media (max-width: 600px) {
    .rev-dash-grid { grid-template-columns: 1fr; }
    .rev-dash-wide { grid-column: span 1; }
    .achievements-grid { grid-template-columns: 1fr; }
    .push-optin-inner { flex-direction: column; text-align: center; }
    .push-btns { margin-left: 0; }
}


/* ══ Sprint 355-362 — Admin Tools & Game Variety ═══════════════ */

:root {
    --ms-bg: #0d1117;
    --ms-accent: #ffd700;
    --ms-text: #ccc;
    --ms-card: #1a1a2e;
}

/* Broadcast Banner */
.broadcast-banner {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-left: 4px solid #3498db;
    padding: 12px 20px; color: #ccc; font-size: 14px;
    position: relative; z-index: 9000;
    animation: slideDown 0.3s ease;
}
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.bc-icon { font-size: 20px; }

/* Game Selector */
.game-selector-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); z-index: 10001;
    display: flex; align-items: center; justify-content: center;
}
.game-selector-inner {
    background: var(--ms-card); border: 2px solid var(--ms-accent);
    border-radius: 20px; padding: 32px; max-width: 600px; width: 90%;
    text-align: center;
}
.game-selector-inner h2 { color: var(--ms-accent); margin: 0 0 20px; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 20px; }
.game-card {
    background: rgba(255,255,255,0.05); border: 1px solid #333;
    border-radius: 12px; padding: 16px 8px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    transition: all 0.3s;
}
.game-card:hover { border-color: var(--ms-accent); transform: translateY(-4px); box-shadow: 0 8px 20px rgba(255,215,0,0.15); }
.game-icon { font-size: 32px; }
.game-card strong { color: #fff; font-size: 13px; }
.game-card small { color: #888; font-size: 11px; }
.game-rtp { color: #2ecc71; font-size: 11px; font-weight: bold; }
.gs-close-btn {
    background: #333; color: #ccc; border: none;
    padding: 10px 30px; border-radius: 8px; cursor: pointer;
}

/* Live Chat */
.live-chat-btn {
    position: fixed; bottom: 60px; right: 20px;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #3498db, #2980b9);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; cursor: pointer; z-index: 9500;
    box-shadow: 0 4px 15px rgba(52,152,219,0.4);
    transition: transform 0.3s;
}
.live-chat-btn:hover { transform: scale(1.1); }
.live-chat-panel {
    position: fixed; bottom: 130px; right: 20px;
    width: 340px; height: 400px; background: #1a1a2e;
    border: 1px solid #3498db; border-radius: 16px;
    display: none; flex-direction: column; z-index: 9500;
    overflow: hidden;
}
.lc-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; background: #16213e; border-bottom: 1px solid #333;
}
.lc-header h4 { color: #3498db; margin: 0; }
.lc-close { background: none; border: none; color: #ffd700; font-size: 20px; cursor: pointer; }
.lc-messages { flex: 1; padding: 12px; overflow-y: auto; }
.lc-msg { padding: 8px 12px; border-radius: 10px; margin: 4px 0; font-size: 13px; max-width: 80%; }
.lc-bot { background: #2d2d5e; color: #ccc; align-self: flex-start; }
.lc-user { background: #3498db; color: #fff; margin-left: auto; }
.lc-input-row { display: flex; padding: 8px; gap: 8px; border-top: 1px solid #333; }
.lc-input { flex: 1; background: #111; border: 1px solid #333; border-radius: 8px; padding: 8px 12px; color: #ccc; }
.lc-send { background: #3498db; color: #fff; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; }

/* Leaderboard */
.leaderboard-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); z-index: 10001;
    display: flex; align-items: center; justify-content: center;
}
.lb-inner {
    background: var(--ms-card); border: 2px solid var(--ms-accent);
    border-radius: 20px; padding: 32px; max-width: 480px; width: 90%; text-align: center;
}
.lb-inner h2 { color: var(--ms-accent); margin: 0 0 16px; }
.lb-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.lb-tab { background: #333; color: #ccc; border: none; padding: 6px 16px; border-radius: 20px; cursor: pointer; }
.lb-tab-active { background: var(--ms-accent); color: #000; }
.lb-list { text-align: left; }
.lb-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-bottom: 1px solid #222;
    color: #ccc; font-size: 14px;
}
.lb-top3 { background: rgba(255,215,0,0.05); }
.lb-rank { width: 36px; font-weight: bold; color: var(--ms-accent); }
.lb-badge { width: 24px; }
.lb-name { flex: 1; }
.lb-wins { color: #2ecc71; font-weight: bold; }
.lb-close-btn { background: #333; color: #ccc; border: none; padding: 10px 30px; border-radius: 8px; cursor: pointer; margin-top: 16px; }

/* Tournament Banner */
.tournament-banner {
    position: fixed; top: 0; left: 0; width: 100%;
    background: linear-gradient(135deg, #2d1b4e, #1a1a2e);
    border-bottom: 2px solid var(--ms-accent);
    padding: 10px 20px; display: flex; align-items: center; gap: 12px;
    z-index: 9000; color: #ccc;
}
.tb-icon { font-size: 24px; }
.tb-info strong { color: var(--ms-accent); }
.tb-info small { color: #888; }
.tb-join-btn {
    margin-left: auto; background: var(--ms-accent); color: #000;
    border: none; padding: 8px 20px; border-radius: 8px; font-weight: bold; cursor: pointer;
}

/* Provably Fair Panel */
.fair-panel {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 10000;
    display: none; align-items: center; justify-content: center;
}
.fair-inner {
    background: var(--ms-card); border: 2px solid var(--ms-accent);
    border-radius: 16px; padding: 28px; max-width: 480px; width: 90%;
}
.fair-inner h3 { color: var(--ms-accent); margin: 0 0 8px; }
.fair-field { margin: 12px 0; }
.fair-field label { display: block; color: #888; font-size: 12px; margin-bottom: 4px; text-transform: uppercase; }
.fair-field code { display: block; background: #111; padding: 8px 12px; border-radius: 6px; color: #87ceeb; font-size: 11px; word-break: break-all; }
.fair-input { width: 100%; background: #111; border: 1px solid #333; border-radius: 6px; padding: 8px 12px; color: #ccc; font-family: monospace; }
.fair-verify-btn { background: var(--ms-accent); color: #000; border: none; padding: 10px 24px; border-radius: 8px; font-weight: bold; cursor: pointer; margin-top: 12px; margin-right: 8px; }
.fair-close-btn { background: #333; color: #ccc; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; margin-top: 12px; }

@media (max-width: 600px) {
    .game-grid { grid-template-columns: repeat(2, 1fr); }
    .live-chat-panel { width: 90%; right: 5%; bottom: 100px; }
    .tournament-banner { flex-wrap: wrap; padding: 8px 12px; }
}


/* ══ Sprint 363-370 — KYC/AML & Security Hardening ═════════════ */

/* KYC Panel */
.kyc-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); z-index: 10001;
    display: flex; align-items: center; justify-content: center;
}
.kyc-inner {
    background: var(--ms-card, #1a1a2e); border: 2px solid #ffd700;
    border-radius: 16px; padding: 28px; max-width: 480px; width: 90%;
}
.kyc-inner h3 { color: #ffd700; margin: 0 0 8px; }
.kyc-status { margin: 12px 0; color: #ccc; }
.kyc-badge { padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: bold; }
.kyc-unverified { background: #e74c3c; color: #fff; }
.kyc-pending { background: #f39c12; color: #000; }
.kyc-verified { background: #2ecc71; color: #fff; }
.kyc-upload-area { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.kyc-doc label { display: block; color: #888; font-size: 12px; margin-bottom: 4px; }
.kyc-file-input { color: #ccc; font-size: 13px; }
.kyc-submit-btn { background: #ffd700; color: #000; border: none; padding: 12px 24px; border-radius: 8px; font-weight: bold; cursor: pointer; width: 100%; margin-bottom: 8px; }
.kyc-close-btn { background: #333; color: #ccc; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; width: 100%; }

/* 2FA Panel */
.twofa-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); z-index: 10001;
    display: flex; align-items: center; justify-content: center;
}
.twofa-inner {
    background: var(--ms-card, #1a1a2e); border: 2px solid #ffd700;
    border-radius: 16px; padding: 28px; max-width: 420px; width: 90%; text-align: center;
}
.twofa-inner h3 { color: #ffd700; margin: 0 0 12px; }
.twofa-enabled { color: #2ecc71; font-size: 18px; margin: 20px 0; }
.twofa-steps { text-align: left; margin: 16px 0; }
.twofa-step { display: flex; align-items: center; gap: 10px; color: #ccc; font-size: 13px; margin: 8px 0; }
.twofa-num { background: #ffd700; color: #000; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; flex-shrink: 0; }
.twofa-code-input { width: 120px; text-align: center; font-size: 24px; letter-spacing: 8px; background: #111; border: 2px solid #333; border-radius: 8px; color: #ffd700; padding: 10px; margin: 16px auto; display: block; }
.twofa-verify-btn { background: #2ecc71; color: #fff; border: none; padding: 12px 24px; border-radius: 8px; font-weight: bold; cursor: pointer; margin: 8px 4px; }
.twofa-disable-btn { background: #e74c3c; color: #fff; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; margin: 8px 4px; }
.twofa-close-btn { background: #333; color: #ccc; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; margin: 8px 4px; }

/* Session Warning */
.session-warn-banner {
    position: fixed; top: 0; left: 0; width: 100%;
    background: #f39c12; color: #000; text-align: center;
    padding: 8px; font-weight: bold; z-index: 99999;
}

/* GDPR Panel */
.gdpr-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); z-index: 10001;
    display: flex; align-items: center; justify-content: center;
}
.gdpr-inner {
    background: var(--ms-card, #1a1a2e); border: 2px solid #3498db;
    border-radius: 16px; padding: 28px; max-width: 420px; width: 90%;
}
.gdpr-inner h3 { color: #3498db; margin: 0 0 8px; }
.gdpr-options { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.gdpr-btn { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 8px; border: 1px solid #333; background: rgba(255,255,255,0.05); color: #ccc; cursor: pointer; font-size: 14px; transition: all 0.3s; }
.gdpr-btn:hover { border-color: #3498db; background: rgba(52,152,219,0.1); }
.gdpr-export span, .gdpr-delete span, .gdpr-settings span { font-size: 18px; }
.gdpr-close-btn { background: #333; color: #ccc; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; width: 100%; margin-top: 8px; }

/* Rate Limit Warning */
.rate-limit-warn {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    background: rgba(231,76,60,0.95); color: #fff; padding: 20px 32px;
    border-radius: 12px; z-index: 99999; font-weight: bold;
    display: flex; align-items: center; gap: 10px; font-size: 16px;
}

/* Crypto Connect Panel */
.crypto-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); z-index: 10001;
    display: flex; align-items: center; justify-content: center;
}
.crypto-inner {
    background: var(--ms-card, #1a1a2e); border: 2px solid #f7931a;
    border-radius: 16px; padding: 28px; max-width: 400px; width: 90%; text-align: center;
}
.crypto-inner h3 { color: #f7931a; margin: 0 0 8px; }
.crypto-wallets { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.crypto-wallet-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px; border-radius: 10px;
    border: 1px solid #333; background: rgba(255,255,255,0.05);
    color: #ccc; cursor: pointer; font-size: 15px; transition: all 0.3s;
}
.crypto-wallet-btn:hover { border-color: #f7931a; background: rgba(247,147,26,0.1); }
.crypto-supported { color: #888; margin: 12px 0; }
.crypto-close-btn { background: #333; color: #ccc; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; }

@media (max-width: 600px) {
    .kyc-inner, .twofa-inner, .gdpr-inner, .crypto-inner { padding: 20px; }
}


/* ══ Sprint 371-378 — Mobile Optimization & PWA ════════════════ */

/* PWA Install Banner */
.pwa-install-banner {
    position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #1a1a2e, #2d1b4e);
    border: 1px solid #9b59b6; border-radius: 14px;
    padding: 14px 18px; z-index: 9600; max-width: 400px; width: 90%;
}
.pwa-install-inner { display: flex; align-items: center; gap: 12px; color: #ccc; }
.pwa-icon { font-size: 28px; }
.pwa-install-btn {
    background: #9b59b6; color: #fff; border: none;
    padding: 8px 18px; border-radius: 8px; font-weight: bold; cursor: pointer; white-space: nowrap;
}
.pwa-dismiss-btn { background: none; border: none; color: #888; font-size: 20px; cursor: pointer; }

/* Offline Indicator */
.offline-indicator {
    position: fixed; top: 0; left: 0; width: 100%;
    background: #e74c3c; color: #fff; text-align: center;
    padding: 8px; font-size: 13px; z-index: 99999;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}

/* Orientation Hint */
.orientation-hint {
    position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.9); color: #ffd700; padding: 10px 20px;
    border-radius: 10px; z-index: 9500; font-size: 13px;
    display: flex; align-items: center; gap: 8px;
}

/* Battery Saver */
.battery-saver-notice {
    position: fixed; top: 0; left: 0; width: 100%;
    background: #2d572c; color: #a8e6a3; text-align: center;
    padding: 8px; font-size: 13px; z-index: 99999;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.battery-saver * { animation-duration: 0s !important; transition-duration: 0s !important; }

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: linear-gradient(180deg, rgba(13,17,23,0.95), #0d1117);
    border-top: 1px solid #333;
    display: flex; justify-content: space-around; align-items: center;
    padding: 6px 0 env(safe-area-inset-bottom, 6px);
    z-index: 9800;
}
.mbn-item {
    display: flex; flex-direction: column; align-items: center;
    background: none; border: none; color: #888; cursor: pointer;
    padding: 4px 8px; font-size: 10px; gap: 2px;
}
.mbn-item span { font-size: 20px; }
.mbn-item:active { color: #ffd700; }
.mbn-spin {
    background: linear-gradient(135deg, #ffd700, #ffed4a);
    color: #000 !important; border-radius: 50%; width: 56px; height: 56px;
    margin-top: -20px; box-shadow: 0 4px 15px rgba(255,215,0,0.3);
}
.mbn-spin span { font-size: 24px; color: #000; }

/* Rating Prompt */
.rating-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 10001;
    display: flex; align-items: center; justify-content: center;
}
.rating-card {
    background: var(--ms-card, #1a1a2e); border: 2px solid #ffd700;
    border-radius: 16px; padding: 32px; text-align: center; max-width: 340px;
}
.rating-card h3 { color: #ffd700; margin: 0 0 16px; }
.rating-stars { display: flex; justify-content: center; gap: 8px; margin: 16px 0; }
.rating-star { font-size: 36px; color: #555; cursor: pointer; transition: color 0.2s; }
.rating-submit-btn { background: #ffd700; color: #000; border: none; padding: 10px 24px; border-radius: 8px; font-weight: bold; cursor: pointer; margin: 4px; }
.rating-later-btn { background: #333; color: #ccc; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; margin: 4px; }

@media (min-width: 769px) {
    .mobile-bottom-nav { display: none; }
}


/* ══ Sprint 379-386 — Stripe Checkout, NFT Minting, Bonus ══════ */

/* Deposit Modal */
.deposit-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.92); z-index: 10002;
    display: flex; align-items: center; justify-content: center;
}
.deposit-modal-card {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid #ffd700; border-radius: 20px;
    padding: 32px; max-width: 520px; width: 90%;
}
.deposit-header { display: flex; justify-content: space-between; align-items: center; }
.deposit-header h2 { color: #ffd700; margin: 0; }
.deposit-close { background: none; border: none; color: #ffd700; font-size: 24px; cursor: pointer; }
.deposit-subtitle { color: #888; font-size: 13px; margin: 8px 0 16px; }
.deposit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.deposit-tier {
    background: rgba(255,215,0,0.08); border: 1px solid #333;
    border-radius: 12px; padding: 16px 8px; text-align: center;
    cursor: pointer; transition: all 0.3s; display: flex;
    flex-direction: column; gap: 4px;
}
.deposit-tier:hover { border-color: #ffd700; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(255,215,0,0.15); }
.deposit-amount { color: #ffd700; font-size: 22px; font-weight: bold; }
.deposit-bonus { color: #2ecc71; font-size: 11px; }
.deposit-nft { color: #9b59b6; font-size: 10px; }
.deposit-custom { display: flex; gap: 8px; margin: 12px 0; }
.deposit-custom-input { flex: 1; background: #111; border: 1px solid #333; border-radius: 8px; padding: 10px 14px; color: #ccc; font-size: 14px; }
.deposit-custom-btn { background: #ffd700; color: #000; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; }
.deposit-methods { text-align: center; color: #555; font-size: 12px; margin-top: 8px; }

/* NFT Preview */
.nft-preview-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); z-index: 10003;
    display: flex; align-items: center; justify-content: center;
}
.nft-preview-card {
    background: #1a1a2e; border: 2px solid #9b59b6;
    border-radius: 20px; padding: 28px; max-width: 380px; width: 90%; text-align: center;
}
.nft-preview-card h3 { color: #9b59b6; margin: 0 0 16px; }
.nft-art { border: 2px solid #ffd700; border-radius: 16px; overflow: hidden; margin: 0 auto 16px; width: 200px; height: 200px; }
.nft-art-inner { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.nft-art-icon { font-size: 64px; }
.nft-art-name { color: #fff; font-weight: bold; font-size: 14px; margin-top: 8px; }
.nft-art-rarity { font-size: 12px; font-weight: bold; }
.nft-attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 0; }
.nft-attr { background: rgba(255,255,255,0.05); border-radius: 6px; padding: 6px 8px; text-align: left; }
.nft-attr-label { display: block; color: #666; font-size: 9px; text-transform: uppercase; }
.nft-attr-val { color: #ccc; font-size: 12px; }
.nft-token-id { color: #555; font-size: 11px; margin: 8px 0; font-family: monospace; }
.nft-confirm-btn { background: linear-gradient(135deg, #ffd700, #ff8c00); color: #000; border: none; padding: 14px 28px; border-radius: 10px; font-weight: bold; font-size: 15px; cursor: pointer; width: 100%; margin-bottom: 8px; }
.nft-cancel-btn { background: #333; color: #ccc; border: none; padding: 10px 28px; border-radius: 8px; cursor: pointer; width: 100%; }

/* NFT Gallery */
.nft-gallery-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 10001; display: flex; align-items: center; justify-content: center; }
.nft-gallery-inner { background: #1a1a2e; border: 2px solid #9b59b6; border-radius: 20px; padding: 28px; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; }
.nft-gallery-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.nft-gallery-header h2 { color: #9b59b6; margin: 0; }
.nft-gallery-close { background: none; border: none; color: #ffd700; font-size: 24px; cursor: pointer; }
.nft-gallery-empty { text-align: center; padding: 40px 0; color: #888; }
.nft-gallery-empty span { font-size: 48px; display: block; margin-bottom: 12px; }
.nft-deposit-cta { background: #ffd700; color: #000; border: none; padding: 10px 24px; border-radius: 8px; font-weight: bold; cursor: pointer; margin-top: 12px; }
.nft-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.nft-gallery-card { border: 1px solid #333; border-radius: 12px; overflow: hidden; cursor: pointer; transition: all 0.3s; }
.nft-gallery-card:hover { transform: translateY(-3px); }
.nft-gallery-art { height: 120px; display: flex; align-items: center; justify-content: center; }
.nft-gallery-icon { font-size: 40px; }
.nft-gallery-info { padding: 8px; text-align: center; }
.nft-gallery-info strong { color: #fff; font-size: 12px; display: block; }
.nft-gallery-rarity { font-size: 10px; font-weight: bold; }
.nft-gallery-info small { color: #555; font-size: 9px; }
.nft-gallery-footer { text-align: center; color: #666; margin-top: 16px; font-size: 13px; }

/* NFT Marketplace */
.nft-market-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 10001; display: flex; align-items: center; justify-content: center; }
.nft-market-inner { background: #1a1a2e; border: 2px solid #ffd700; border-radius: 20px; padding: 28px; max-width: 600px; width: 90%; }
.nft-market-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.nft-market-header h2 { color: #ffd700; margin: 0; }
.nft-market-close { background: none; border: none; color: #ffd700; font-size: 24px; cursor: pointer; }
.nft-market-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nft-market-card { border: 1px solid #333; border-radius: 12px; overflow: hidden; }
.nmc-art { height: 80px; display: flex; align-items: center; justify-content: center; font-size: 32px; }
.nmc-info { padding: 8px; }
.nmc-info strong { color: #fff; font-size: 12px; display: block; }
.nmc-price { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-top: 1px solid #222; }
.nmc-price span { color: #ffd700; font-weight: bold; }
.nmc-buy-btn { background: #ffd700; color: #000; border: none; padding: 4px 14px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 12px; }

/* Cashier */
.cashier-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 10002; display: flex; align-items: center; justify-content: center; }
.cashier-inner { background: linear-gradient(135deg, #1a1a2e, #16213e); border: 2px solid #ffd700; border-radius: 20px; padding: 32px; max-width: 400px; width: 90%; text-align: center; }
.cashier-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cashier-header h2 { color: #ffd700; margin: 0; }
.cashier-close { background: none; border: none; color: #ffd700; font-size: 24px; cursor: pointer; }
.cashier-balance { background: rgba(255,215,0,0.1); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.cb-label { display: block; color: #888; font-size: 12px; text-transform: uppercase; margin-bottom: 4px; }
.cb-amount { color: #ffd700; font-size: 32px; font-weight: bold; }
.cashier-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cashier-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; background: rgba(255,255,255,0.05); border: 1px solid #333; border-radius: 12px; padding: 16px; cursor: pointer; color: #ccc; font-size: 13px; transition: all 0.3s; }
.cashier-btn:hover { border-color: #ffd700; background: rgba(255,215,0,0.05); }
.cashier-btn span { font-size: 24px; }
.cashier-footer { margin-top: 16px; color: #555; font-size: 11px; }

/* Deposit Success Toast */
.deposit-success-toast { position: fixed; top: -100px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #1a3a1a, #0d2d0d); border: 1px solid #2ecc71; border-radius: 12px; padding: 16px 24px; z-index: 99999; transition: top 0.5s ease; color: #ccc; }
.deposit-success-toast.ds-show { top: 20px; }
.ds-content { display: flex; align-items: center; gap: 12px; }
.ds-icon { font-size: 28px; }
.deposit-cancelled-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #2d1a1a; border: 1px solid #e74c3c; border-radius: 12px; padding: 12px 20px; z-index: 99999; color: #e74c3c; }

/* First Deposit Banner */
.first-deposit-banner { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #2d1b4e, #1a1a2e); border: 2px solid #ffd700; border-radius: 14px; padding: 14px 20px; z-index: 9600; max-width: 440px; width: 90%; }
.fdb-content { display: flex; align-items: center; gap: 12px; color: #ccc; }
.fdb-icon { font-size: 32px; }
.fdb-cta { background: #ffd700; color: #000; border: none; padding: 8px 18px; border-radius: 8px; font-weight: bold; cursor: pointer; white-space: nowrap; margin-left: auto; }
.fdb-dismiss { background: none; border: none; color: #888; font-size: 20px; cursor: pointer; }

/* Reload Banner */
.reload-banner { position: fixed; top: 0; left: 0; width: 100%; background: linear-gradient(135deg, #1a2e1a, #0d1f0d); border-bottom: 1px solid #2ecc71; padding: 10px 20px; z-index: 9000; color: #ccc; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rb-icon { font-size: 20px; }
.rb-claim { background: #2ecc71; color: #000; border: none; padding: 6px 14px; border-radius: 6px; font-weight: bold; cursor: pointer; margin-left: auto; }

@media (max-width: 600px) {
    .deposit-grid { grid-template-columns: 1fr 1fr; }
    .nft-market-grid { grid-template-columns: 1fr; }
    .cashier-actions { grid-template-columns: 1fr; }
}


/* ══ Sprint 387-394 — VIP Tiers & Advanced Engagement ══════════ */

/* VIP Panel */
.vip-panel-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 10001; display: flex; align-items: center; justify-content: center; }
.vip-panel-inner { background: linear-gradient(135deg, #1a1a2e, #2d1b4e); border: 2px solid #ffd700; border-radius: 20px; padding: 28px; max-width: 450px; width: 90%; }
.vip-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.vip-header h2 { color: #ffd700; margin: 0; }
.vip-close { background: none; border: none; color: #ffd700; font-size: 24px; cursor: pointer; }
.vip-current { display: flex; align-items: center; gap: 12px; padding: 16px; border: 2px solid #ffd700; border-radius: 12px; margin-bottom: 16px; background: rgba(255,215,0,0.05); }
.vip-icon { font-size: 32px; }
.vip-current strong { display: block; font-size: 18px; }
.vip-current small { color: #888; }
.vip-progress { margin-bottom: 16px; }
.vip-bar { height: 8px; background: #333; border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.vip-fill { height: 100%; border-radius: 4px; transition: width 1s ease; }
.vip-progress small { color: #888; font-size: 11px; }
.vip-tiers-list { display: flex; flex-direction: column; gap: 4px; }
.vip-tier-row { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 6px; font-size: 13px; color: #ccc; }
.vip-unlocked { background: rgba(255,215,0,0.08); }
.vip-locked { opacity: 0.4; }

/* Win Particles */
.win-particle {
    position: fixed; width: 8px; height: 8px; border-radius: 50%;
    top: -10px; z-index: 99997; pointer-events: none;
    animation: particleFall 2s ease-out forwards;
}
@keyframes particleFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.bigwin-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    z-index: 99998; pointer-events: none;
    background: radial-gradient(circle, rgba(255,215,0,0.2), transparent 70%);
}
.bigwin-text {
    font-size: 72px; font-weight: 900; color: #ffd700;
    text-shadow: 0 0 20px rgba(255,215,0,0.8), 0 0 40px rgba(255,215,0,0.4);
    animation: bigwinPulse 0.5s ease infinite;
}
@keyframes bigwinPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* Seasonal Banner */
.seasonal-banner {
    position: fixed; top: 0; left: 0; width: 100%;
    background: linear-gradient(135deg, #2d1b4e, #1a1a2e);
    border-bottom: 2px solid #9b59b6; padding: 10px 20px;
    z-index: 9000; color: #ccc; display: flex; align-items: center; gap: 8px; font-size: 14px;
}
.seasonal-claim { background: #9b59b6; color: #fff; border: none; padding: 6px 14px; border-radius: 6px; font-weight: bold; cursor: pointer; margin-left: auto; }

/* Settings Panel */
.settings-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 10001; display: flex; align-items: center; justify-content: center; }
.settings-inner { background: #1a1a2e; border: 2px solid #3498db; border-radius: 20px; padding: 28px; max-width: 420px; width: 90%; max-height: 80vh; overflow-y: auto; }
.settings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.settings-header h2 { color: #3498db; margin: 0; }
.settings-close { background: none; border: none; color: #ffd700; font-size: 24px; cursor: pointer; }
.settings-group { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #222; }
.settings-group h4 { color: #ffd700; margin: 0 0 8px; font-size: 13px; text-transform: uppercase; }
.settings-toggle { display: flex; align-items: center; gap: 8px; color: #ccc; font-size: 14px; margin: 8px 0; cursor: pointer; }
.settings-select { background: #111; border: 1px solid #333; border-radius: 6px; padding: 8px 12px; color: #ccc; width: 100%; }
.settings-btn { background: rgba(255,255,255,0.05); border: 1px solid #333; border-radius: 8px; padding: 10px 16px; color: #ccc; cursor: pointer; width: 100%; margin: 4px 0; text-align: left; transition: all 0.3s; }
.settings-btn:hover { border-color: #3498db; }

/* Accessibility */
.keyboard-nav *:focus { outline: 2px solid #3498db; outline-offset: 2px; }
.high-contrast { filter: contrast(1.3); }
.reduced-motion * { animation-duration: 0s !important; transition-duration: 0s !important; }

@media (max-width: 600px) {
    .bigwin-text { font-size: 48px; }
}


/* ══ Sprint 395-402 — Progressive Jackpot & Social ═════════════ */

/* Jackpot Ticker */
.jackpot-ticker { position: fixed; top: 0; left: 0; width: 100%; z-index: 8999; background: linear-gradient(135deg, #1a0a2e, #0d0517); border-bottom: 1px solid #ffd700; padding: 6px 0; }
.jt-inner { display: flex; justify-content: center; gap: 16px; max-width: 800px; margin: 0 auto; padding: 0 12px; }
.jt-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.jt-label { font-size: 9px; font-weight: bold; letter-spacing: 1px; }
.jt-amount { font-size: 14px; font-weight: bold; font-family: monospace; }
.jt-grand .jt-label { color: #ffd700; } .jt-grand .jt-amount { color: #ffd700; }
.jt-major .jt-label { color: #e74c3c; } .jt-major .jt-amount { color: #e74c3c; }
.jt-minor .jt-label { color: #3498db; } .jt-minor .jt-amount { color: #3498db; }
.jt-mini .jt-label { color: #2ecc71; } .jt-mini .jt-amount { color: #2ecc71; }

/* Jackpot Win Overlay */
/* REMOVED: duplicate jackpot-win-overlay CSS (z-index conflict fixed) */
.jackpot-win-card { background: linear-gradient(135deg, #1a1a2e, #2d1b4e); border: 3px solid #ffd700; border-radius: 24px; padding: 48px; text-align: center; max-width: 400px; animation: jackpotPulse 0.5s ease infinite; }
@keyframes jackpotPulse { 0%,100% { box-shadow: 0 0 30px rgba(255,215,0,0.3); } 50% { box-shadow: 0 0 60px rgba(255,215,0,0.6); } }
.jw-sparkle { font-size: 48px; margin-bottom: 8px; }
.jackpot-win-card h1 { margin: 0 0 8px; font-size: 36px; }
.jw-amount { font-size: 48px; font-weight: 900; margin: 16px 0; }
.jackpot-win-card p { color: #ccc; margin: 8px 0 24px; }
.jw-claim-btn { background: linear-gradient(135deg, #ffd700, #ff8c00); color: #000; border: none; padding: 16px 40px; border-radius: 12px; font-size: 18px; font-weight: bold; cursor: pointer; }

/* Social Ticker */
.social-ticker { position: fixed; bottom: 48px; left: 0; width: 100%; background: rgba(0,0,0,0.8); padding: 6px 16px; z-index: 8998; overflow: hidden; }
.st-content { color: #aaa; font-size: 12px; white-space: nowrap; animation: tickerScroll 15s linear infinite; }
@keyframes tickerScroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

/* Friends Panel */
.friends-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 10001; display: flex; align-items: center; justify-content: center; }
.friends-inner { background: #1a1a2e; border: 2px solid #3498db; border-radius: 20px; padding: 28px; max-width: 420px; width: 90%; }
.friends-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.friends-header h2 { color: #3498db; margin: 0; }
.friends-close { background: none; border: none; color: #ffd700; font-size: 24px; cursor: pointer; }
.friends-add { display: flex; gap: 8px; margin-bottom: 16px; }
.friend-input { flex: 1; background: #111; border: 1px solid #333; border-radius: 8px; padding: 8px 12px; color: #ccc; }
.friend-add-btn { background: #3498db; color: #fff; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; }
.friends-empty { color: #888; text-align: center; padding: 20px; }
.friend-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #222; color: #ccc; }
.friend-avatar { font-size: 24px; }
.friend-gift-btn { background: #2ecc71; color: #fff; border: none; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; margin-left: auto; }

/* Scratch Card */
.scratch-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 10001; display: flex; align-items: center; justify-content: center; }
.scratch-card-inner { background: linear-gradient(135deg, #1a1a2e, #2d1b4e); border: 2px solid #ffd700; border-radius: 20px; padding: 28px; max-width: 340px; text-align: center; }
.scratch-card-inner h3 { color: #ffd700; margin: 0 0 8px; }
.scratch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.scratch-cell { width: 80px; height: 80px; border-radius: 10px; border: 1px solid #333; cursor: pointer; position: relative; overflow: hidden; }
.scratch-cover { width: 100%; height: 100%; background: linear-gradient(135deg, #ffd700, #ff8c00); display: flex; align-items: center; justify-content: center; font-size: 28px; color: #000; font-weight: bold; }
.scratch-prize { display: none; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; color: #ffd700; background: #111; }
.scratch-close-btn { background: #333; color: #ccc; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; }

/* Wheel of Fortune */
.wheel-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 10001; display: flex; align-items: center; justify-content: center; }
.wheel-inner { background: #1a1a2e; border: 2px solid #ffd700; border-radius: 20px; padding: 28px; text-align: center; max-width: 380px; }
.wheel-inner h2 { color: #ffd700; margin: 0 0 16px; }
.wheel-container { position: relative; width: 250px; height: 250px; margin: 0 auto 16px; }
.wheel-spinner { width: 100%; height: 100%; border-radius: 50%; border: 4px solid #ffd700; position: relative; overflow: hidden; }
.wheel-pointer { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); color: #e74c3c; font-size: 24px; z-index: 2; }
.wheel-spin-btn { background: linear-gradient(135deg, #ffd700, #ff8c00); color: #000; border: none; padding: 14px 40px; border-radius: 10px; font-size: 18px; font-weight: bold; cursor: pointer; margin-bottom: 8px; }
.wheel-close-btn { background: #333; color: #ccc; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; display: block; margin: 8px auto 0; }

/* Profile */
.profile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 10001; display: flex; align-items: center; justify-content: center; }
.profile-inner { background: linear-gradient(135deg, #1a1a2e, #16213e); border: 2px solid #ffd700; border-radius: 20px; padding: 28px; max-width: 420px; width: 90%; text-align: center; }
.profile-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.profile-header h2 { color: #ffd700; margin: 0; }
.profile-close { background: none; border: none; color: #ffd700; font-size: 24px; cursor: pointer; }
.profile-avatar { font-size: 48px; margin: 8px 0; }
.profile-vip { font-weight: bold; font-size: 16px; margin-bottom: 16px; }
.profile-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.ps-item { background: rgba(255,255,255,0.05); border-radius: 8px; padding: 10px 6px; }
.ps-val { display: block; color: #ffd700; font-weight: bold; font-size: 16px; }
.ps-label { display: block; color: #888; font-size: 10px; text-transform: uppercase; }
.profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pa-btn { background: rgba(255,255,255,0.05); border: 1px solid #333; border-radius: 8px; padding: 10px; color: #ccc; cursor: pointer; font-size: 12px; }
.pa-btn:hover { border-color: #ffd700; }

/* Free Spin Counter */
.freespin-counter { position: fixed; top: 42px; right: 12px; background: #2ecc71; color: #000; font-weight: bold; padding: 6px 14px; border-radius: 16px; font-size: 13px; z-index: 9000; display: none; }
.freespin-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #1a3a1a; border: 1px solid #2ecc71; border-radius: 10px; padding: 10px 20px; color: #2ecc71; z-index: 99999; font-weight: bold; }

/* Auto-Bet */
.autobet-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 10001; display: flex; align-items: center; justify-content: center; }
.autobet-inner { background: #1a1a2e; border: 2px solid #ffd700; border-radius: 20px; padding: 28px; max-width: 450px; width: 90%; }
.autobet-inner h3 { color: #ffd700; margin: 0 0 16px; text-align: center; }
.autobet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.autobet-card { background: rgba(255,255,255,0.05); border: 1px solid #333; border-radius: 12px; padding: 14px; cursor: pointer; transition: all 0.3s; text-align: center; color: #ccc; }
.autobet-card:hover { border-color: #ffd700; transform: translateY(-3px); }
.autobet-card strong { color: #ffd700; display: block; margin-bottom: 6px; }
.ab-detail { font-size: 11px; color: #888; }
.autobet-stop-btn { background: #e74c3c; color: #fff; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; width: 100%; margin-bottom: 8px; font-weight: bold; }
.autobet-close-btn { background: #333; color: #ccc; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; width: 100%; }

@media (max-width: 600px) {
    .jt-inner { gap: 8px; }
    .jt-amount { font-size: 11px; }
    .profile-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .scratch-cell { width: 60px; height: 60px; }
}


/* ══ Sprint 403-410 — SEO, Analytics & Monetization ════════════ */

/* Happy Hour Banner */
.happy-hour-banner { position: fixed; top: 42px; left: 0; width: 100%; background: linear-gradient(135deg, #2d1500, #1a0a00); border-bottom: 1px solid #ff8c00; padding: 10px 20px; z-index: 9000; color: #ffcc80; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.hh-deposit-btn { background: #ff8c00; color: #000; border: none; padding: 6px 14px; border-radius: 6px; font-weight: bold; cursor: pointer; margin-left: auto; }

/* Exit Intent Popup */
.exit-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 10002; display: flex; align-items: center; justify-content: center; }
.exit-popup-card { background: linear-gradient(135deg, #2d1b4e, #1a1a2e); border: 2px solid #ffd700; border-radius: 20px; padding: 36px; text-align: center; max-width: 380px; }
.exit-popup-card h2 { color: #ffd700; margin: 0 0 16px; }
.exit-offer { font-size: 20px; color: #2ecc71; margin: 16px 0; }
.exit-claim-btn { background: linear-gradient(135deg, #ffd700, #ff8c00); color: #000; border: none; padding: 14px 32px; border-radius: 10px; font-size: 16px; font-weight: bold; cursor: pointer; width: 100%; margin-bottom: 8px; }
.exit-no-btn { background: transparent; border: none; color: #666; cursor: pointer; font-size: 13px; }

/* Email Capture */
.email-capture-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 10001; display: flex; align-items: center; justify-content: center; }
.email-capture-card { background: #1a1a2e; border: 2px solid #3498db; border-radius: 16px; padding: 28px; max-width: 380px; text-align: center; }
.email-capture-card h3 { color: #3498db; margin: 0 0 8px; }
.ec-email-input { width: 100%; background: #111; border: 1px solid #333; border-radius: 8px; padding: 12px; color: #ccc; font-size: 14px; margin: 12px 0; box-sizing: border-box; }
.ec-submit-btn { background: #3498db; color: #fff; border: none; padding: 12px 24px; border-radius: 8px; font-weight: bold; cursor: pointer; width: 100%; margin-bottom: 8px; }
.ec-skip-btn { background: transparent; border: none; color: #666; cursor: pointer; }

/* Loss Limit */
.loss-limit-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 99999; display: flex; align-items: center; justify-content: center; }
.loss-limit-card { background: #1a1a2e; border: 2px solid #e74c3c; border-radius: 16px; padding: 32px; max-width: 400px; text-align: center; color: #ccc; }
.loss-limit-card h3 { color: #e74c3c; }
.ll-options { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.ll-stop-btn { background: #e74c3c; color: #fff; border: none; padding: 12px 24px; border-radius: 8px; font-weight: bold; cursor: pointer; }
.ll-help-link { color: #3498db; text-decoration: underline; font-size: 13px; }

/* Perf Dashboard */
.perf-dash-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 10001; display: flex; align-items: center; justify-content: center; }
.perf-dash-inner { background: #1a1a2e; border: 2px solid #ffd700; border-radius: 20px; padding: 28px; max-width: 480px; width: 90%; }
.pd-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.pd-header h2 { color: #ffd700; margin: 0; }
.pd-close { background: none; border: none; color: #ffd700; font-size: 24px; cursor: pointer; }
.pd-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pd-metric { background: rgba(255,255,255,0.05); border-radius: 10px; padding: 14px; text-align: center; }
.pd-val { display: block; color: #ffd700; font-weight: bold; font-size: 18px; }
.pd-label { display: block; color: #888; font-size: 10px; text-transform: uppercase; margin-top: 4px; }

@media (max-width: 600px) {
    .pd-metrics { grid-template-columns: repeat(2, 1fr); }
}


/* === Sprint 411-418 — Advanced Slot Mechanics === */
.multiplier-wild-banner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#ff6b00,#ffd700);color:#fff;font-size:2.5rem;font-weight:900;padding:20px 50px;border-radius:16px;z-index:99999;display:none;align-items:center;justify-content:center;text-shadow:2px 2px 4px rgba(0,0,0,.5);animation:pulseScale 0.5s ease-in-out;box-shadow:0 0 40px rgba(255,215,0,.6)}
.multiplier-wild-banner.active{display:flex}
.scatter-bonus-banner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#9b59b6,#e74c3c);color:#fff;padding:30px 50px;border-radius:20px;z-index:99999;display:none;flex-direction:column;align-items:center;text-align:center;box-shadow:0 0 60px rgba(155,89,182,.6)}
.scatter-bonus-banner.active{display:flex}
.scatter-title{font-size:2.5rem;font-weight:900;text-transform:uppercase}
.scatter-spins{font-size:1.8rem;margin-top:10px;color:#ffd700}
.cascade-indicator{position:fixed;top:15%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.85);color:#00ff88;padding:12px 30px;border-radius:10px;font-size:1.4rem;font-weight:700;z-index:99998;display:none;border:2px solid #00ff88}
.cascade-indicator.active{display:block}
.expanding-wild-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;z-index:99997;pointer-events:none}
.expanding-wild-overlay.active{display:flex}
.expand-wild-glow{font-size:4rem;font-weight:900;color:#ffd700;text-shadow:0 0 30px #ffd700,0 0 60px #ff6b00;animation:pulseScale 0.6s ease-in-out}
.gamble-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100000}
.gamble-card{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:40px;border-radius:20px;text-align:center;color:#fff;max-width:400px;box-shadow:0 0 40px rgba(0,0,0,.5)}
.gamble-card h3{font-size:2rem;color:#ffd700;margin-bottom:15px}
.gamble-choices{display:flex;gap:15px;justify-content:center;margin:20px 0}
.gamble-btn{padding:15px 30px;border:none;border-radius:12px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:transform .2s}
.gamble-btn:hover{transform:scale(1.05)}
.gamble-red{background:#e74c3c;color:#fff}
.gamble-black{background:#2c3e50;color:#fff}
.gamble-skip{background:transparent;border:2px solid #ffd700;color:#ffd700;padding:10px 25px;border-radius:8px;cursor:pointer;font-size:1rem;margin-top:10px}
.gamble-result-win{border:3px solid #2ecc71}
.gamble-result-lose{border:3px solid #e74c3c}
.paytable-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:100000}
.paytable-card{background:linear-gradient(135deg,#0f0f23,#1a1a3e);padding:30px;border-radius:16px;color:#fff;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 0 40px rgba(0,0,0,.5)}
.paytable-card h3{color:#ffd700;font-size:1.5rem;margin-bottom:15px;text-align:center}
.paytable-table{width:100%;border-collapse:collapse}
.paytable-table th,.paytable-table td{padding:8px 12px;text-align:center;border-bottom:1px solid rgba(255,255,255,.1)}
.paytable-table th{color:#ffd700;font-weight:700}
.paytable-close{display:block;margin:20px auto 0;padding:10px 30px;background:#ffd700;color:#000;border:none;border-radius:8px;font-weight:700;cursor:pointer}
.bet-sizing-bar{display:flex;flex-direction:column;gap:8px;padding:10px;background:rgba(0,0,0,.3);border-radius:10px;margin-top:10px}
.bet-quick-buttons{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.bet-quick-btn{padding:6px 12px;background:rgba(255,215,0,.15);border:1px solid rgba(255,215,0,.3);color:#ffd700;border-radius:6px;cursor:pointer;font-size:.85rem;transition:background .2s}
.bet-quick-btn:hover{background:rgba(255,215,0,.3)}
.bet-slider-wrap{display:flex;align-items:center;gap:10px;padding:5px 10px}
.bet-slider-wrap input[type=range]{flex:1;accent-color:#ffd700}
#betSliderVal{color:#ffd700;font-weight:700;min-width:50px;text-align:right}
.bonus-round-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:100000}
.bonus-round-card{background:linear-gradient(135deg,#1a1a2e,#2d1b4e);padding:30px;border-radius:20px;text-align:center;color:#fff;max-width:450px}
.bonus-round-card h3{font-size:2rem;color:#ffd700;margin-bottom:10px}
.bonus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}
.bonus-box{width:80px;height:80px;background:linear-gradient(135deg,#3498db,#2980b9);border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s,background .3s;font-size:2rem}
.bonus-box:hover{transform:scale(1.1)}
.bonus-box.revealed{background:linear-gradient(135deg,#2ecc71,#27ae60);cursor:default}
.bonus-q{color:#fff;font-weight:900}
.bonus-prize{color:#ffd700;font-weight:900;font-size:1.2rem}
#bonusTotalDisplay{font-size:1.5rem;color:#ffd700;font-weight:700;margin-top:15px}
@keyframes pulseScale{0%{transform:translate(-50%,-50%) scale(0.5);opacity:0}50%{transform:translate(-50%,-50%) scale(1.2);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}


/* === Sprint 419-426 — Loyalty & Social Engagement === */
.daily-login-v2-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100000}
.daily-login-v2-card{background:linear-gradient(135deg,#1a1a2e,#2d1b4e);padding:30px;border-radius:20px;text-align:center;color:#fff;max-width:400px}
.daily-login-v2-card h3{color:#ffd700;font-size:1.8rem;margin-bottom:10px}
.streak-display{font-size:1.3rem;color:#00ff88;margin:10px 0}
.daily-reward-amount{font-size:2rem;color:#ffd700;font-weight:900;margin:15px 0}
.streak-calendar{display:flex;gap:8px;justify-content:center;margin:15px 0}
.streak-day{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.day-claimed{background:#2ecc71;color:#fff}
.day-pending{background:rgba(255,255,255,.1);color:rgba(255,255,255,.4)}
.daily-claim-btn{padding:12px 40px;background:linear-gradient(135deg,#ffd700,#ff8c00);color:#000;border:none;border-radius:10px;font-size:1.2rem;font-weight:700;cursor:pointer}
.milestone-reward-banner{position:fixed;top:20%;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#ffd700,#ff6b00);color:#000;padding:20px 40px;border-radius:16px;z-index:99999;display:none;align-items:center;gap:15px;font-weight:700;box-shadow:0 0 40px rgba(255,215,0,.5)}
.milestone-reward-banner.active{display:flex}
.milestone-icon{font-size:2rem}
.milestone-text{font-size:1.3rem}
.milestone-reward{font-size:1.5rem;color:#2ecc71}
.player-chat-panel{position:fixed;bottom:60px;right:10px;width:300px;height:400px;background:rgba(15,15,35,.95);border:1px solid rgba(255,215,0,.2);border-radius:12px;display:none;flex-direction:column;z-index:99990;overflow:hidden}
.chat-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:rgba(255,215,0,.1);color:#ffd700;font-weight:700}
.chat-header button{background:none;border:none;color:#ffd700;cursor:pointer;font-size:1.2rem}
.chat-messages{flex:1;overflow-y:auto;padding:10px}
.chat-msg{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);color:#ddd;font-size:.85rem}
.chat-msg strong{color:#ffd700}
.chat-time{color:rgba(255,255,255,.3);font-size:.75rem}
.chat-input-row{display:flex;gap:5px;padding:8px}
.chat-input-row input{flex:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,215,0,.2);border-radius:6px;padding:6px 10px;color:#fff;font-size:.85rem}
.chat-input-row button{background:#ffd700;color:#000;border:none;border-radius:6px;padding:6px 12px;cursor:pointer;font-weight:700}
.chat-fab{position:fixed;bottom:15px;right:15px;background:linear-gradient(135deg,#ffd700,#ff8c00);color:#000;border:none;border-radius:50px;padding:10px 20px;font-weight:700;cursor:pointer;z-index:99989;box-shadow:0 4px 15px rgba(255,215,0,.3)}
.tournament-v2-banner{position:fixed;top:0;left:0;width:100%;background:linear-gradient(90deg,#9b59b6,#e74c3c);color:#fff;padding:8px 15px;display:none;align-items:center;justify-content:center;gap:10px;font-size:.9rem;font-weight:700;z-index:99980}
.tournament-v2-banner button{background:#ffd700;color:#000;border:none;border-radius:6px;padding:4px 12px;cursor:pointer;font-weight:700}
.tourney-icon{font-size:1.2rem}
.tourney-leaderboard-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100000}
.tourney-lb-card{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:30px;border-radius:16px;color:#fff;max-width:400px;text-align:center}
.tourney-lb-card h3{color:#ffd700;margin-bottom:15px}
.tourney-lb-card ol{text-align:left;padding-left:20px}
.tourney-lb-card li{padding:5px 0;font-size:1rem}
.tourney-you{color:#ffd700;font-weight:900}
.tourney-lb-card button{margin-top:15px;padding:8px 25px;background:#ffd700;color:#000;border:none;border-radius:8px;cursor:pointer;font-weight:700}
.gift-send-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100000}
.gift-card{background:linear-gradient(135deg,#1a1a2e,#2d1b4e);padding:30px;border-radius:16px;color:#fff;text-align:center;max-width:350px}
.gift-card h3{color:#ffd700;margin-bottom:15px}
.gift-input{width:100%;padding:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,215,0,.3);border-radius:8px;color:#fff;margin-bottom:15px;box-sizing:border-box}
.gift-amounts{display:flex;gap:10px;justify-content:center;margin-bottom:15px}
.gift-amt-btn{padding:10px 18px;background:rgba(255,215,0,.15);border:1px solid #ffd700;color:#ffd700;border-radius:8px;cursor:pointer;font-weight:700}
.gift-close{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;padding:8px 20px;border-radius:6px;cursor:pointer}
.gift-sent{border:2px solid #2ecc71}
.social-share-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100000}
.share-card{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:30px;border-radius:16px;color:#fff;text-align:center;max-width:400px}
.share-card h3{color:#ffd700;margin-bottom:10px}
.share-msg{font-size:1.1rem;margin:15px 0}
.share-buttons{display:flex;gap:10px;justify-content:center;margin:15px 0}
.share-btn{padding:10px 20px;border:none;border-radius:8px;cursor:pointer;font-weight:700;color:#fff}
.share-twitter{background:#1da1f2}
.share-facebook{background:#4267b2}
.share-copy{background:#2ecc71}
.share-dismiss{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;padding:8px 20px;border-radius:6px;cursor:pointer;margin-top:10px}
.challenge-offer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100000}
.challenge-card{background:linear-gradient(135deg,#e74c3c,#c0392b);padding:30px;border-radius:16px;color:#fff;text-align:center;max-width:400px}
.challenge-card h3{font-size:2rem;margin-bottom:10px}
.challenge-reward{color:#ffd700;font-size:1.3rem;font-weight:700;margin:10px 0}
.challenge-accept{padding:12px 30px;background:#ffd700;color:#000;border:none;border-radius:10px;font-weight:700;cursor:pointer;margin-right:10px}
.challenge-decline{padding:12px 30px;background:transparent;border:2px solid rgba(255,255,255,.5);color:#fff;border-radius:10px;cursor:pointer}
.challenge-progress-bar{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;padding:8px 20px;border-radius:8px;font-size:.9rem;z-index:99985;display:none;border:1px solid #e74c3c}
.challenge-fill{height:3px;background:#e74c3c;border-radius:2px;margin-top:4px;transition:width .3s}
.loyalty-exchange-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100000}
.loyalty-ex-card{background:linear-gradient(135deg,#1a1a2e,#2d1b4e);padding:30px;border-radius:16px;color:#fff;max-width:400px;text-align:center}
.loyalty-ex-card h3{color:#ffd700;margin-bottom:10px}
.loyalty-items{display:flex;flex-direction:column;gap:8px;margin:15px 0}
.loyalty-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:rgba(255,255,255,.05);border-radius:8px}
.loyalty-item button{padding:5px 15px;background:#ffd700;color:#000;border:none;border-radius:6px;cursor:pointer;font-weight:700}
.loyalty-item button:disabled{opacity:.4;cursor:not-allowed}
.loyalty-close{margin-top:15px;padding:8px 25px;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:6px;cursor:pointer}


/* === Sprint 427-434 — Revenue Optimization & Admin === */
.deposit-reminder-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;padding:12px 20px;border-radius:10px;display:none;align-items:center;gap:10px;z-index:99995;box-shadow:0 4px 15px rgba(231,76,60,.4)}
.dr-btn{background:#ffd700;color:#000;border:none;border-radius:6px;padding:6px 15px;cursor:pointer;font-weight:700}
.dr-close{background:none;border:none;color:#fff;cursor:pointer;font-size:1.2rem}
.player-segment-badge{position:fixed;top:50px;right:15px;padding:4px 12px;border-radius:20px;color:#000;font-size:.75rem;font-weight:900;z-index:99980;display:none;text-transform:uppercase}
.ab-dash-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100000}
.ab-dash-card{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:30px;border-radius:16px;color:#fff;max-width:500px;width:90%}
.ab-dash-card h3{color:#ffd700;margin-bottom:15px;text-align:center}
.ab-test-row{display:flex;flex-direction:column;padding:10px;background:rgba(255,255,255,.05);border-radius:8px;margin-bottom:8px}
.ab-lift{color:#2ecc71;font-weight:700}
.ab-close{display:block;margin:15px auto 0;padding:8px 25px;background:#ffd700;color:#000;border:none;border-radius:8px;cursor:pointer;font-weight:700}
.rev-forecast-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100000}
.rev-forecast-card{background:linear-gradient(135deg,#0f0f23,#1a1a3e);padding:30px;border-radius:16px;color:#fff;max-width:400px;text-align:center}
.rev-forecast-card h3{color:#ffd700;margin-bottom:15px}
.rev-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.rev-row span:last-child{color:#2ecc71;font-weight:700}
.rev-chart{display:flex;gap:8px;justify-content:center;align-items:flex-end;height:80px;margin:20px 0}
.rev-bar{width:30px;background:linear-gradient(180deg,#ffd700,#ff8c00);border-radius:4px 4px 0 0}
.rev-close{padding:8px 25px;background:#ffd700;color:#000;border:none;border-radius:8px;cursor:pointer;font-weight:700;margin-top:10px}
.active-promo-banner{position:fixed;top:35px;left:0;width:100%;background:linear-gradient(90deg,#2ecc71,#27ae60);color:#fff;padding:6px 15px;display:none;align-items:center;justify-content:center;gap:10px;font-size:.85rem;z-index:99975}
.promo-name{font-weight:700}
.promo-mult{color:#ffd700;font-weight:900}
.withdraw-confirm-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#2ecc71;color:#fff;padding:12px 25px;border-radius:10px;display:none;font-weight:700;z-index:99995;box-shadow:0 4px 15px rgba(46,204,113,.4)}
.ban-panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100000}
.ban-card{background:linear-gradient(135deg,#1a1a2e,#2d1b4e);padding:30px;border-radius:16px;color:#fff;text-align:center;max-width:350px}
.ban-card h3{color:#ffd700;margin-bottom:15px}
.ban-input{width:100%;padding:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,215,0,.3);border-radius:8px;color:#fff;margin-bottom:15px;box-sizing:border-box}
.ban-actions{display:flex;gap:10px;justify-content:center;margin-bottom:15px}
.ban-btn{padding:8px 18px;border:none;border-radius:8px;cursor:pointer;font-weight:700;color:#fff}
.ban-red{background:#e74c3c}
.ban-orange{background:#e67e22}
.ban-yellow{background:#f1c40f;color:#000}
.ban-close{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;padding:8px 20px;border-radius:6px;cursor:pointer}
.revenue-ticker{position:fixed;bottom:5px;left:5px;background:rgba(0,0,0,.7);color:#2ecc71;padding:4px 10px;border-radius:6px;font-size:.75rem;font-weight:700;z-index:99970;display:none}


/* === Sprint 435-442 — UX Polish & Mobile === */
.casino-loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#0a0a1a;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999999;transition:opacity .5s}
.casino-loading-screen.fade-out{opacity:0;pointer-events:none}
.loading-logo{font-size:3rem;font-weight:900;color:#ffd700;text-shadow:0 0 20px rgba(255,215,0,.5);margin-bottom:20px}
.loading-spinner{width:50px;height:50px;border:4px solid rgba(255,215,0,.2);border-top-color:#ffd700;border-radius:50%;animation:loadSpin 1s linear infinite}
.loading-text{color:rgba(255,255,255,.5);margin-top:15px;font-size:.9rem}
@keyframes loadSpin{to{transform:rotate(360deg)}}
.page-enter{animation:pageIn .3s ease-out}
.page-exit{animation:pageOut .3s ease-out}
@keyframes pageIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes pageOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-20px)}}
body.no-animations *{animation:none!important;transition:none!important}
.notif-bell{position:fixed;top:10px;right:60px;background:none;border:none;cursor:pointer;z-index:99990;font-size:1.5rem;padding:5px}
.notif-count{position:absolute;top:-2px;right:-2px;background:#e74c3c;color:#fff;font-size:.65rem;width:18px;height:18px;border-radius:50%;display:none;align-items:center;justify-content:center;font-weight:700}
.notif-panel{position:fixed;top:50px;right:10px;width:320px;max-height:400px;background:rgba(15,15,35,.97);border:1px solid rgba(255,215,0,.15);border-radius:12px;display:none;flex-direction:column;z-index:99995;overflow:hidden}
.notif-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:rgba(255,215,0,.08);color:#ffd700;font-weight:700}
.notif-header button{background:none;border:none;color:#ffd700;cursor:pointer;font-size:1.1rem}
.notif-list{overflow-y:auto;max-height:340px;padding:8px}
.notif-item{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.05);font-size:.85rem;color:#ddd}
.notif-item strong{color:#ffd700;display:block}
.notif-time{color:rgba(255,255,255,.3);font-size:.7rem;float:right}
.notif-empty{padding:20px;text-align:center;color:rgba(255,255,255,.3)}
.game-search-bar{padding:10px 15px;display:flex;flex-direction:column;gap:8px}
.game-search-bar input{width:100%;padding:10px 15px;background:rgba(255,255,255,.08);border:1px solid rgba(255,215,0,.2);border-radius:10px;color:#fff;font-size:1rem;box-sizing:border-box}
.game-search-bar input::placeholder{color:rgba(255,255,255,.3)}
.filter-tags{display:flex;gap:6px;flex-wrap:wrap}
.filter-tag{padding:5px 14px;background:rgba(255,215,0,.08);border:1px solid rgba(255,215,0,.15);color:rgba(255,255,255,.6);border-radius:20px;cursor:pointer;font-size:.8rem;transition:all .2s}
.filter-tag.active{background:rgba(255,215,0,.2);color:#ffd700;border-color:#ffd700}
.favorites-strip{display:none;gap:8px;padding:8px 15px;align-items:center;overflow-x:auto;white-space:nowrap}
.fav-label{color:#ffd700;font-weight:700;font-size:.85rem;flex-shrink:0}
.fav-quick-btn{padding:6px 14px;background:rgba(255,215,0,.12);border:1px solid rgba(255,215,0,.25);color:#ffd700;border-radius:20px;cursor:pointer;font-size:.8rem;white-space:nowrap;text-transform:capitalize}
.settings-sync-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100000}
.settings-card{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:30px;border-radius:16px;color:#fff;max-width:350px;width:90%}
.settings-card h3{color:#ffd700;margin-bottom:15px;text-align:center}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.setting-row label{color:#ddd}
.setting-row input[type=checkbox]{accent-color:#ffd700;width:20px;height:20px}
.settings-close{display:block;margin:15px auto 0;padding:8px 25px;background:#ffd700;color:#000;border:none;border-radius:8px;cursor:pointer;font-weight:700}


/* === Sprint 443-450 — Responsible Gambling & Compliance === */
.session-time-warning{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:100001}
.stw-content{background:linear-gradient(135deg,#e67e22,#d35400);padding:30px;border-radius:16px;color:#fff;text-align:center;max-width:400px}
.stw-content button{margin:5px 8px;padding:10px 25px;border:none;border-radius:8px;cursor:pointer;font-weight:700}
.stw-content button:first-of-type{background:#fff;color:#d35400}
.stw-content button:last-of-type{background:rgba(255,255,255,.2);color:#fff}
.session-expired-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.95);display:none;align-items:center;justify-content:center;z-index:100002}
.se-card{background:linear-gradient(135deg,#c0392b,#e74c3c);padding:35px;border-radius:20px;color:#fff;text-align:center;max-width:420px}
.se-card h3{font-size:1.8rem;margin-bottom:10px}
.se-card button{margin:8px;padding:12px 28px;border:none;border-radius:10px;cursor:pointer;font-weight:700;font-size:1rem}
.se-card button:first-of-type{background:#fff;color:#c0392b}
.se-card button:last-of-type{background:rgba(255,255,255,.2);color:#fff}
.reality-check-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:100001}
.rc-card{background:linear-gradient(135deg,#2c3e50,#34495e);padding:30px;border-radius:16px;color:#fff;max-width:400px;text-align:center}
.rc-card h3{color:#f39c12;font-size:1.6rem;margin-bottom:15px}
.rc-stat{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.95rem}
.rc-net{font-weight:700;font-size:1.1rem;border-bottom:none;margin-top:5px}
.rc-positive span:last-child{color:#2ecc71}
.rc-negative span:last-child{color:#e74c3c}
.rc-msg{margin:15px 0;color:rgba(255,255,255,.7);font-size:.85rem;font-style:italic}
.rc-continue{padding:10px 25px;background:#f39c12;color:#000;border:none;border-radius:8px;cursor:pointer;font-weight:700;margin-right:10px}
.rc-stop{padding:10px 25px;background:#e74c3c;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:700}
.rc-help{display:block;margin-top:12px;color:#3498db;font-size:.85rem}
.self-exclusion-overlay,.self-exclusion-block{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.95);display:none;align-items:center;justify-content:center;z-index:100003}
.se-portal-card,.se-block-card{background:linear-gradient(135deg,#1a1a2e,#2d1b4e);padding:30px;border-radius:16px;color:#fff;text-align:center;max-width:450px}
.se-portal-card h3,.se-block-card h3{color:#e74c3c;margin-bottom:15px}
.se-options{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:15px 0}
.se-options button{padding:10px 20px;background:rgba(231,76,60,.2);border:2px solid #e74c3c;color:#e74c3c;border-radius:8px;cursor:pointer;font-weight:700}
.se-options button:hover{background:#e74c3c;color:#fff}
.se-warning{color:#e74c3c;font-size:.85rem;font-weight:700;margin:10px 0}
.se-cancel{padding:8px 25px;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:6px;cursor:pointer;margin-bottom:15px}
.se-helplines{margin-top:15px;padding-top:15px;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;color:rgba(255,255,255,.7);text-align:left}
.deposit-limits-dash{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:100000}
.dl-card{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:30px;border-radius:16px;color:#fff;max-width:450px;width:90%}
.dl-card h3{color:#ffd700;margin-bottom:15px;text-align:center}
.dl-row{margin-bottom:12px}
.dl-row label{display:block;color:#ddd;font-size:.9rem;margin-bottom:4px}
.dl-row span{float:right;color:#ffd700;font-weight:700}
.dl-bar{height:8px;background:rgba(255,255,255,.1);border-radius:4px;margin-top:4px;overflow:hidden}
.dl-fill{height:100%;background:linear-gradient(90deg,#2ecc71,#e74c3c);border-radius:4px;transition:width .3s}
.dl-edit{margin-top:20px;padding-top:15px;border-top:1px solid rgba(255,255,255,.1)}
.dl-edit h4{color:#ffd700;margin-bottom:10px}
.dl-edit label{display:block;margin-bottom:8px;color:#ddd;font-size:.85rem}
.dl-edit input{width:100px;padding:5px;background:rgba(255,255,255,.1);border:1px solid rgba(255,215,0,.3);border-radius:4px;color:#fff;margin-left:8px}
.dl-edit button{display:block;margin:10px auto 0;padding:8px 25px;background:#ffd700;color:#000;border:none;border-radius:8px;cursor:pointer;font-weight:700}
.dl-note{font-size:.75rem;color:rgba(255,255,255,.5);margin-top:8px;text-align:center}
.dl-close{display:block;margin:15px auto 0;padding:8px 25px;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:6px;cursor:pointer}
.cool-off-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.97);display:none;align-items:center;justify-content:center;z-index:100004}
.co-card{text-align:center;color:#fff;max-width:400px}
.co-card h3{color:#3498db;font-size:1.8rem;margin-bottom:15px}
.co-timer{font-size:4rem;font-weight:900;color:#ffd700;margin:20px 0}
.rg-info-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:100000;overflow-y:auto}
.rg-card{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:30px;border-radius:16px;color:#fff;max-width:500px;width:90%;max-height:85vh;overflow-y:auto}
.rg-card h3{color:#2ecc71;text-align:center;font-size:1.6rem;margin-bottom:15px}
.rg-section{margin-bottom:15px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1)}
.rg-section h4{color:#ffd700;margin-bottom:8px}
.rg-section p{color:rgba(255,255,255,.8);font-size:.9rem;line-height:1.5}
.rg-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:15px 0}
.rg-actions button{padding:8px 18px;border:none;border-radius:8px;cursor:pointer;font-weight:700;background:rgba(46,204,113,.2);color:#2ecc71;border:1px solid #2ecc71}
.rg-close{display:block;margin:10px auto 0;padding:8px 25px;background:#2ecc71;color:#000;border:none;border-radius:8px;cursor:pointer;font-weight:700}
.panic-button{position:fixed;bottom:15px;left:15px;width:50px;height:50px;border-radius:50%;background:#e74c3c;color:#fff;border:3px solid #fff;font-weight:900;font-size:.7rem;cursor:pointer;z-index:99999;box-shadow:0 2px 10px rgba(231,76,60,.5);transition:transform .2s}
.panic-button:hover{transform:scale(1.1)}


/* === Sprint 451-458 — Monetization & Conversion === */
.vip-upgrade-prompt{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:99999}
.vip-prompt-card{background:linear-gradient(135deg,#2d1b4e,#1a1a2e);padding:30px;border-radius:16px;color:#fff;text-align:center;max-width:400px;border:2px solid #ffd700}
.vip-prompt-card h3{color:#ffd700;font-size:1.6rem}
.vip-tier-name{color:#ffd700;font-weight:900;font-size:1.2rem}
.vip-benefit{color:#2ecc71;margin:10px 0}
.vip-ok{padding:10px 30px;background:#ffd700;color:#000;border:none;border-radius:8px;cursor:pointer;font-weight:700;margin-top:10px}
.first-deposit-funnel{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:100000}
.fdf-card{background:linear-gradient(135deg,#1a1a2e,#0f3460);padding:35px;border-radius:20px;color:#fff;text-align:center;max-width:420px;position:relative}
.fdf-badge{position:absolute;top:-12px;right:20px;background:#e74c3c;color:#fff;padding:4px 15px;border-radius:20px;font-size:.75rem;font-weight:900}
.fdf-card h3{color:#ffd700;font-size:2rem;margin-bottom:10px}
.fdf-tiers{margin:20px 0}
.fdf-tier{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px;background:rgba(255,255,255,.05);border-radius:8px;margin-bottom:8px;font-size:1.1rem}
.fdf-popular{border:2px solid #ffd700;background:rgba(255,215,0,.1)}
.fdf-arrow{color:rgba(255,255,255,.3)}
.fdf-bonus{color:#2ecc71;font-weight:900}
.fdf-tag{background:#ffd700;color:#000;padding:2px 8px;border-radius:10px;font-size:.7rem;font-weight:900}
.fdf-cta{display:block;width:100%;padding:14px;background:linear-gradient(135deg,#ffd700,#ff8c00);color:#000;border:none;border-radius:12px;font-size:1.2rem;font-weight:900;cursor:pointer;margin-top:15px}
.fdf-dismiss{display:block;margin:10px auto 0;background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;font-size:.85rem}
.loss-recovery-v2{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:99999}
.lr-card{background:linear-gradient(135deg,#2c3e50,#3498db);padding:30px;border-radius:16px;color:#fff;text-align:center;max-width:380px}
.lr-card h3{font-size:1.6rem;margin-bottom:10px}
.lr-claim{padding:12px 30px;background:#2ecc71;color:#fff;border:none;border-radius:10px;cursor:pointer;font-weight:700;margin-right:10px}
.lr-dismiss{padding:12px 30px;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:10px;cursor:pointer}
.high-roller-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:100000}
.hr-card{background:linear-gradient(135deg,#2d1b4e,#1a0a2e);padding:35px;border-radius:20px;color:#fff;text-align:center;max-width:450px;border:2px solid #ffd700}
.hr-card h3{color:#ffd700;font-size:2rem;letter-spacing:3px}
.hr-subtitle{color:rgba(255,255,255,.6);margin-bottom:20px}
.hr-slots{display:flex;flex-direction:column;gap:10px;margin:20px 0}
.hr-slot{display:flex;justify-content:space-between;padding:12px 20px;background:rgba(255,215,0,.08);border:1px solid rgba(255,215,0,.2);border-radius:10px;cursor:pointer;transition:background .2s}
.hr-slot:hover{background:rgba(255,215,0,.15)}
.hr-min{color:#ffd700;font-weight:700}
.hr-note{font-size:.8rem;color:rgba(255,255,255,.5);margin:10px 0}
.hr-close{padding:8px 25px;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:6px;cursor:pointer}
.spend-dash-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:100000}
.spend-card{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:30px;border-radius:16px;color:#fff;max-width:400px;width:90%}
.spend-card h3{color:#ffd700;margin-bottom:15px;text-align:center}
.spend-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.spend-net{font-weight:700;border-bottom:none;margin-top:5px;padding-top:10px;border-top:2px solid rgba(255,255,255,.1)}
.spend-positive span:last-child{color:#2ecc71}
.spend-negative span:last-child{color:#e74c3c}
.spend-actions{display:flex;gap:10px;justify-content:center;margin:15px 0}
.spend-actions button{padding:8px 18px;background:rgba(255,215,0,.15);border:1px solid rgba(255,215,0,.3);color:#ffd700;border-radius:8px;cursor:pointer;font-weight:700}
.spend-close{display:block;margin:10px auto 0;padding:8px 25px;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:6px;cursor:pointer}
.deposit-match-preview{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#2ecc71,#27ae60);color:#fff;padding:10px 20px;border-radius:10px;display:none;z-index:99990;text-align:center;box-shadow:0 4px 15px rgba(46,204,113,.4)}
.dm-badge{font-size:.8rem;font-weight:700;opacity:.8}
.dm-amount{font-size:1.1rem;font-weight:900}
.arpu-dash-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100000}
.arpu-card{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:30px;border-radius:16px;color:#fff;max-width:350px;text-align:center}
.arpu-card h3{color:#ffd700;margin-bottom:15px}
.arpu-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.arpu-row span:last-child{color:#2ecc71;font-weight:700}
.arpu-close{display:block;margin:15px auto 0;padding:8px 25px;background:#ffd700;color:#000;border:none;border-radius:8px;cursor:pointer;font-weight:700}


/* === Sprint 459-466 — Performance & Infrastructure === */
.error-toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:#e74c3c;color:#fff;padding:10px 25px;border-radius:8px;display:none;z-index:100000;font-size:.9rem;box-shadow:0 4px 15px rgba(231,76,60,.4)}
.connection-indicator{position:fixed;top:10px;left:10px;display:flex;align-items:center;gap:5px;font-size:.75rem;color:rgba(255,255,255,.6);z-index:99970}
.conn-dot{width:8px;height:8px;border-radius:50%}
.conn-online{background:#2ecc71}
.conn-offline{background:#e74c3c;animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.offline-banner{position:fixed;top:0;left:0;width:100%;background:#e74c3c;color:#fff;padding:8px;text-align:center;font-size:.85rem;font-weight:700;z-index:100001;display:none}
.reconnect-banner{position:fixed;top:0;left:0;width:100%;background:#f39c12;color:#000;padding:8px;text-align:center;font-size:.85rem;font-weight:700;z-index:100001;display:none}
.reconnect-failed{background:#e74c3c;color:#fff}


/* === Sprint 467-474 — Advanced Game Features === */
.hold-respin-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:100000}
.hr-respin-card{background:linear-gradient(135deg,#1a1a2e,#2d1b4e);padding:30px;border-radius:16px;color:#fff;text-align:center;max-width:400px}
.hr-respin-card h3{color:#ffd700;font-size:1.8rem}
.hr-reels{display:flex;gap:10px;justify-content:center;margin:20px 0}
.hr-reel{width:70px;height:70px;background:rgba(255,255,255,.1);border:2px solid rgba(255,215,0,.3);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;transition:all .2s;text-transform:capitalize}
.hr-reel.held{background:rgba(255,215,0,.2);border-color:#ffd700;box-shadow:0 0 15px rgba(255,215,0,.4)}
.hr-spin-btn{padding:12px 35px;background:linear-gradient(135deg,#ffd700,#ff8c00);color:#000;border:none;border-radius:10px;cursor:pointer;font-weight:900;font-size:1.1rem}
.hr-skip{display:block;margin:10px auto 0;background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer}
.sticky-wild-indicator{position:fixed;top:70px;left:50%;transform:translateX(-50%);background:rgba(255,215,0,.9);color:#000;padding:8px 20px;border-radius:8px;font-weight:700;display:none;z-index:99990}
.stacked-banner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#9b59b6,#8e44ad);color:#fff;padding:15px 40px;border-radius:12px;font-size:1.5rem;font-weight:900;display:none;z-index:99999;animation:pulseScale .5s ease-in-out}
.cluster-pay-banner{position:fixed;top:60%;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;padding:12px 30px;border-radius:10px;font-weight:700;display:none;z-index:99999}
.buy-bonus-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:100000}
.bb-card{background:linear-gradient(135deg,#2d1b4e,#1a0a2e);padding:30px;border-radius:16px;color:#fff;text-align:center;max-width:400px;border:2px solid #ffd700}
.bb-card h3{color:#ffd700;font-size:1.8rem;margin-bottom:10px}
.bb-option{display:flex;justify-content:space-between;align-items:center;padding:12px;background:rgba(255,255,255,.05);border-radius:8px;margin-bottom:8px}
.bb-buy-btn{padding:8px 18px;background:#ffd700;color:#000;border:none;border-radius:6px;cursor:pointer;font-weight:700}
.bb-close{display:block;margin:15px auto 0;padding:8px 25px;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:6px;cursor:pointer}
.bonus-purchased-toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:#2ecc71;color:#fff;padding:10px 25px;border-radius:8px;display:none;z-index:99999;font-weight:700}
.volatility-selector{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100000}
.vol-card{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:30px;border-radius:16px;color:#fff;max-width:350px;text-align:center}
.vol-card h3{color:#ffd700;margin-bottom:15px}
.vol-option{padding:12px;border:2px solid rgba(255,255,255,.2);border-radius:10px;margin-bottom:8px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column}
.vol-option:hover{background:rgba(255,255,255,.05)}
.vol-active{background:rgba(255,255,255,.1)}
.vol-option span{font-size:.85rem;color:rgba(255,255,255,.6)}
.vol-close{display:block;margin:15px auto 0;padding:8px 25px;background:#ffd700;color:#000;border:none;border-radius:8px;cursor:pointer;font-weight:700}
.auto-spin-setup{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100000}
.as-card{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:30px;border-radius:16px;color:#fff;max-width:350px}
.as-card h3{color:#ffd700;margin-bottom:15px;text-align:center}
.as-card label{display:block;margin-bottom:10px;color:#ddd;font-size:.9rem}
.as-card select,.as-card input{background:rgba(255,255,255,.1);border:1px solid rgba(255,215,0,.3);border-radius:6px;padding:6px 10px;color:#fff;margin-left:8px}
.as-start{display:block;width:100%;padding:12px;background:linear-gradient(135deg,#ffd700,#ff8c00);color:#000;border:none;border-radius:10px;cursor:pointer;font-weight:900;margin-top:15px;font-size:1.1rem}
.as-cancel{display:block;width:100%;padding:8px;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;cursor:pointer;margin-top:8px}
.auto-spin-stop-toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:#e74c3c;color:#fff;padding:10px 25px;border-radius:8px;display:none;z-index:99999;font-weight:700}


/* === Sprint 475-482 — Anti-Fraud & Security === */
.blocked-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.97);display:none;align-items:center;justify-content:center;z-index:200000}
.blocked-card{background:#c0392b;padding:40px;border-radius:16px;color:#fff;text-align:center;max-width:400px}
.blocked-card h3{font-size:2rem;margin-bottom:15px}
.security-warning-banner{position:fixed;top:0;left:0;width:100%;background:#e74c3c;color:#fff;padding:8px;text-align:center;font-size:.85rem;font-weight:700;z-index:100002;display:none}


/* === Sprint 483-490 — Conversion Funnels & Retention === */
.welcome-tutorial{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:100000}
.tut-card{background:linear-gradient(135deg,#1a1a2e,#0f3460);padding:35px;border-radius:20px;color:#fff;text-align:center;max-width:400px}
.tut-progress{color:rgba(255,255,255,.4);font-size:.8rem;margin-bottom:10px}
.tut-card h3{color:#ffd700;font-size:1.6rem;margin-bottom:10px}
.tut-btn{display:block;width:100%;padding:12px;background:linear-gradient(135deg,#ffd700,#ff8c00);color:#000;border:none;border-radius:10px;font-weight:900;cursor:pointer;font-size:1.1rem;margin-top:15px}
.tut-skip{display:block;margin:8px auto 0;background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;font-size:.85rem}
.onboard-reward{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:100000}
.ob-card{background:linear-gradient(135deg,#2d1b4e,#1a1a2e);padding:30px;border-radius:16px;color:#fff;text-align:center;max-width:380px;border:2px solid #ffd700}
.ob-prize{font-size:2rem;color:#ffd700;font-weight:900;margin:15px 0}
.ob-claim{padding:12px 35px;background:#ffd700;color:#000;border:none;border-radius:10px;font-weight:900;cursor:pointer}
.streak-bonus-banner{position:fixed;top:15%;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#ff6b00,#ffd700);color:#000;padding:15px 35px;border-radius:12px;font-size:1.3rem;font-weight:900;display:none;align-items:center;gap:10px;z-index:99999;box-shadow:0 0 30px rgba(255,107,0,.5)}
.streak-fire{font-size:1.5rem}
.comeback-bonus-v2{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:100000}
.cb-card{background:linear-gradient(135deg,#1a1a2e,#0f3460);padding:30px;border-radius:16px;color:#fff;text-align:center;max-width:380px}
.cb-card h3{color:#3498db;font-size:1.8rem}
.cb-bonus{font-size:2rem;color:#ffd700;font-weight:900;margin:15px 0}
.cb-claim{padding:12px 35px;background:#3498db;color:#fff;border:none;border-radius:10px;font-weight:900;cursor:pointer}
.idle-offer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100000}
.idle-card{background:linear-gradient(135deg,#2c3e50,#3498db);padding:30px;border-radius:16px;color:#fff;text-align:center;max-width:380px}
.idle-card h3{font-size:1.6rem}
.idle-bonus{font-size:1.3rem;color:#ffd700;font-weight:700;margin:15px 0}
.idle-claim{padding:10px 25px;background:#ffd700;color:#000;border:none;border-radius:8px;font-weight:700;cursor:pointer;margin-right:10px}
.idle-dismiss{padding:10px 25px;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;cursor:pointer}
.low-bal-nudge{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#e74c3c,#c0392b);padding:10px 20px;border-radius:10px;display:none;align-items:center;gap:10px;z-index:99995}
.lbn-content{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700}
.lbn-deposit{background:#ffd700;color:#000;border:none;padding:6px 15px;border-radius:6px;cursor:pointer;font-weight:700}
.lbn-close{background:none;border:none;color:#fff;cursor:pointer;font-size:1.2rem}
.dep-countdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:100000}
.dc-card{background:linear-gradient(135deg,#c0392b,#e74c3c);padding:30px;border-radius:16px;color:#fff;text-align:center;max-width:400px}
.dc-card h3{font-size:1.6rem}
.dc-timer{font-size:3rem;font-weight:900;color:#ffd700;margin:15px 0}
.dc-claim{padding:12px 35px;background:#ffd700;color:#000;border:none;border-radius:10px;font-weight:900;cursor:pointer}
.dc-dismiss{display:block;margin:10px auto 0;background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer}
.vip-concierge-fab{position:fixed;bottom:15px;right:80px;background:linear-gradient(135deg,#ffd700,#ff8c00);color:#000;border:none;border-radius:50px;padding:10px 20px;font-weight:900;cursor:pointer;z-index:99989;box-shadow:0 4px 15px rgba(255,215,0,.4)}
.vip-chat-panel{position:fixed;bottom:60px;right:80px;width:320px;height:420px;background:rgba(15,15,35,.97);border:1px solid rgba(255,215,0,.3);border-radius:12px;display:none;flex-direction:column;z-index:99995}
.vc-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:linear-gradient(90deg,rgba(255,215,0,.15),rgba(255,140,0,.15));color:#ffd700;font-weight:700}
.vc-header button{background:none;border:none;color:#ffd700;cursor:pointer;font-size:1.2rem}
.vc-messages{flex:1;overflow-y:auto;padding:10px}
.vc-msg{padding:8px 12px;margin-bottom:8px;border-radius:8px;font-size:.85rem}
.vc-bot{background:rgba(255,215,0,.1);color:#ddd}
.vc-user{background:rgba(52,152,219,.2);color:#3498db;text-align:right}
.vc-input{display:flex;gap:5px;padding:8px}
.vc-input input{flex:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,215,0,.2);border-radius:6px;padding:6px 10px;color:#fff;font-size:.85rem}
.vc-input button{background:#ffd700;color:#000;border:none;border-radius:6px;padding:6px 12px;cursor:pointer;font-weight:700}


/* === Sprint 491-498 — Admin Revenue Intelligence === */
.rt-dash-overlay,.cohort-ltv-overlay,.dep-funnel-overlay,.churn-dash-overlay,.promo-roi-overlay,.heatmap-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:100000}
.rtd-card{background:linear-gradient(135deg,#0f0f23,#1a1a3e);padding:30px;border-radius:16px;color:#fff;max-width:500px;width:90%}
.rtd-card h3{color:#ffd700;text-align:center;margin-bottom:15px}
.rtd-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.rtd-metric{background:rgba(255,255,255,.05);padding:15px;border-radius:10px;text-align:center}
.rtd-value{display:block;font-size:1.5rem;font-weight:900;color:#ffd700}
.rtd-label{font-size:.8rem;color:rgba(255,255,255,.5)}
.rtd-chart{display:flex;gap:4px;justify-content:center;align-items:flex-end;height:80px;margin-bottom:5px}
.rtd-bar{width:25px;background:linear-gradient(180deg,#ffd700,#ff8c00);border-radius:3px 3px 0 0}
.rtd-chart-label{display:block;text-align:center;font-size:.75rem;color:rgba(255,255,255,.4)}
.rtd-close,.cltv-close,.df-close,.churn-close,.proi-close,.hm-close{display:block;margin:15px auto 0;padding:8px 25px;background:#ffd700;color:#000;border:none;border-radius:8px;cursor:pointer;font-weight:700}
.cltv-card,.proi-card{background:linear-gradient(135deg,#0f0f23,#1a1a3e);padding:25px;border-radius:16px;color:#fff;max-width:550px;width:90%;overflow-x:auto}
.cltv-card h3,.proi-card h3{color:#ffd700;text-align:center;margin-bottom:15px}
.cltv-table,.proi-table{width:100%;border-collapse:collapse;font-size:.85rem}
.cltv-table th,.proi-table th,.cltv-table td,.proi-table td{padding:8px;text-align:center;border-bottom:1px solid rgba(255,255,255,.08)}
.cltv-table th,.proi-table th{color:#ffd700}
.proi-positive{color:#2ecc71;font-weight:700}
.df-card{background:linear-gradient(135deg,#0f0f23,#1a1a3e);padding:25px;border-radius:16px;color:#fff;max-width:450px;width:90%}
.df-card h3{color:#ffd700;text-align:center;margin-bottom:15px}
.df-step{margin-bottom:10px}
.df-bar-bg{height:20px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden}
.df-bar-fill{height:100%;background:linear-gradient(90deg,#ffd700,#ff8c00);border-radius:4px}
.df-name{font-size:.85rem;color:#ddd}
.df-count{float:right;font-size:.8rem;color:rgba(255,255,255,.5)}
.churn-card{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:30px;border-radius:16px;color:#fff;text-align:center;max-width:350px}
.churn-card h3{color:#ffd700;margin-bottom:15px}
.churn-score{font-size:3rem;font-weight:900;margin:10px 0}
.churn-label{display:inline-block;padding:5px 20px;border-radius:20px;color:#fff;font-weight:700;font-size:.85rem}
.hm-card{background:linear-gradient(135deg,#0f0f23,#1a1a3e);padding:25px;border-radius:16px;color:#fff;max-width:600px;width:95%;overflow-x:auto}
.hm-card h3{color:#ffd700;text-align:center;margin-bottom:15px}
.hm-grid{display:flex;flex-direction:column;gap:2px}
.hm-row{display:flex;align-items:center;gap:2px}
.hm-day{width:35px;font-size:.7rem;color:rgba(255,255,255,.5);flex-shrink:0}
.hm-cell{width:14px;height:14px;background:#ffd700;border-radius:2px}
.hm-header span{font-size:.6rem;color:rgba(255,255,255,.3);width:42px;text-align:center;display:inline-block}


/* === Sprint 499-506 Styles === */
.kyc-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:16px;padding:30px;z-index:10000;width:420px;max-height:80vh;overflow-y:auto;color:#fff;box-shadow:0 0 40px rgba(255,215,0,0.2)}
.kyc-inner h3{color:#ffd700;margin-bottom:15px;font-size:1.3em}
.kyc-steps{display:flex;gap:10px;margin:15px 0}
.kyc-step{flex:1;background:rgba(255,215,0,0.1);border-radius:8px;padding:10px;text-align:center;font-size:0.85em}
.kyc-num{display:block;font-size:1.4em;color:#ffd700;font-weight:bold}
.kyc-form label{display:block;margin:10px 0;font-size:0.9em}
.kyc-form input,.kyc-form select{width:100%;padding:8px;border-radius:6px;border:1px solid #333;background:#0d1117;color:#fff;margin-top:4px}
.kyc-btn{width:100%;padding:12px;background:linear-gradient(135deg,#ffd700,#ff8c00);border:none;border-radius:8px;color:#000;font-weight:bold;font-size:1em;cursor:pointer;margin-top:15px}
.kyc-ok{color:#00ff88;font-size:1.1em}
.age-gate-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);z-index:99999;display:flex;align-items:center;justify-content:center}
.age-gate-box{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #ffd700;border-radius:20px;padding:40px;text-align:center;max-width:450px;color:#fff}
.age-gate-box h2{color:#ffd700;margin-bottom:15px}
.age-gate-dob{margin:20px 0}
.age-gate-dob input{padding:10px;border-radius:8px;border:1px solid #ffd700;background:#0d1117;color:#fff;font-size:1em}
.age-gate-btn{padding:14px 40px;background:linear-gradient(135deg,#ffd700,#ff8c00);border:none;border-radius:10px;color:#000;font-weight:bold;font-size:1.1em;cursor:pointer;margin:8px}
.age-gate-btn-deny{padding:14px 40px;background:#333;border:1px solid #666;border-radius:10px;color:#fff;cursor:pointer;margin:8px}
.geo-restrict-banner{position:fixed;top:0;left:0;width:100%;background:linear-gradient(90deg,#ff4444,#cc0000);color:#fff;text-align:center;padding:10px;font-weight:bold;z-index:99998;font-size:0.9em}
.terms-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.92);z-index:99997;display:flex;align-items:center;justify-content:center}
.terms-box{background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:16px;padding:30px;max-width:550px;max-height:80vh;color:#fff}
.terms-box h2{color:#ffd700;margin-bottom:10px}
.terms-scroll{max-height:350px;overflow-y:auto;padding:10px;background:rgba(0,0,0,0.3);border-radius:8px;margin:15px 0;font-size:0.9em}
.terms-scroll h4{color:#ffd700;margin:12px 0 5px}
.terms-check{display:block;margin:15px 0;font-size:0.9em}
.terms-btn{width:100%;padding:12px;background:linear-gradient(135deg,#ffd700,#ff8c00);border:none;border-radius:8px;color:#000;font-weight:bold;cursor:pointer}
.terms-btn:disabled{opacity:0.4;cursor:not-allowed}
.audit-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:16px;padding:25px;z-index:10000;width:500px;max-height:80vh;overflow-y:auto;color:#fff}
.audit-inner h3{color:#ffd700}
.audit-stats{display:flex;gap:20px;margin:10px 0;font-size:0.9em}
.audit-stats b{color:#ffd700}
.audit-filters{display:flex;gap:10px;margin:10px 0}
.audit-filters select{background:#0d1117;color:#fff;border:1px solid #333;padding:6px;border-radius:6px}
.audit-btn{padding:8px 16px;background:#ffd700;color:#000;border:none;border-radius:6px;font-weight:bold;cursor:pointer}
.audit-list{max-height:300px;overflow-y:auto;font-size:0.8em;font-family:monospace}
.rtp-display{position:fixed;bottom:80px;right:20px;z-index:9990;cursor:pointer}
.rtp-badge{background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:12px;padding:8px 14px;display:flex;flex-direction:column;align-items:center}
.rtp-label{font-size:0.7em;color:#aaa;text-transform:uppercase}
.rtp-value{font-size:1.2em;color:#ffd700;font-weight:bold}
.rtp-info{position:absolute;bottom:60px;right:0;background:#1a1a2e;border:1px solid #ffd700;border-radius:12px;padding:15px;min-width:250px;color:#fff}
.rtp-info h4{color:#ffd700;margin-bottom:8px}
.rtp-table{width:100%;font-size:0.9em}
.rtp-table td{padding:4px 8px;border-bottom:1px solid #222}
.rtp-table td:last-child{color:#ffd700;text-align:right}
.rtp-note{font-size:0.8em;color:#888;margin-top:8px}
.fairplay-badge{position:fixed;bottom:80px;left:20px;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #00ff88;border-radius:12px;padding:8px 14px;z-index:9990;cursor:pointer;display:flex;align-items:center;gap:6px;color:#00ff88;font-weight:bold;font-size:0.9em}
.fairplay-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #00ff88;border-radius:16px;padding:30px;z-index:10001;width:500px;max-height:80vh;overflow-y:auto;color:#fff}
.fp-inner h3{color:#00ff88;margin-bottom:15px}
.fp-section{margin:15px 0;padding:12px;background:rgba(0,255,136,0.05);border-radius:8px}
.fp-section h4{color:#ffd700;margin-bottom:6px}
.fp-btn{padding:8px 16px;background:#00ff88;color:#000;border:none;border-radius:6px;font-weight:bold;cursor:pointer;margin-top:8px}
.fp-table{width:100%;font-size:0.85em;margin-top:8px}
.fp-table th{text-align:left;color:#ffd700;padding:4px}
.fp-table td{padding:4px;border-bottom:1px solid #222}
.fp-close{width:100%;padding:10px;background:#333;color:#fff;border:1px solid #666;border-radius:8px;cursor:pointer;margin-top:15px}
.payout-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:16px;padding:25px;z-index:10000;width:480px;max-height:80vh;overflow-y:auto;color:#fff}
.payout-inner h3{color:#ffd700;margin-bottom:15px}
.payout-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:15px 0}
.payout-stat{background:rgba(255,215,0,0.08);border-radius:10px;padding:12px;text-align:center}
.ps-label{display:block;font-size:0.75em;color:#aaa;text-transform:uppercase}
.ps-val{display:block;font-size:1.3em;color:#ffd700;font-weight:bold;margin-top:4px}
.payout-note{font-size:0.8em;color:#888;margin-top:10px}
.payout-refresh{padding:8px 20px;background:#ffd700;color:#000;border:none;border-radius:6px;font-weight:bold;cursor:pointer;margin-top:10px}


/* === Sprint 507-514 Styles === */
.jackpot-ticker{position:fixed;top:0;left:0;width:100%;background:linear-gradient(90deg,#1a0a2e,#2d1b4e,#1a0a2e);border-bottom:2px solid #ffd700;padding:8px 0;z-index:9999;text-align:center}
.jp-title{color:#ffd700;font-size:0.8em;letter-spacing:3px;font-weight:bold;margin-bottom:4px}
.jp-row{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.jp-item{padding:4px 16px;border-radius:8px;text-align:center}
.jp-grand{background:linear-gradient(135deg,rgba(255,215,0,0.2),rgba(255,140,0,0.2));border:1px solid #ffd700}
.jp-major{background:rgba(192,192,192,0.15);border:1px solid #c0c0c0}
.jp-minor{background:rgba(205,127,50,0.15);border:1px solid #cd7f32}
.jp-mini{background:rgba(100,100,100,0.15);border:1px solid #666}
.jp-name{display:block;font-size:0.65em;letter-spacing:2px;color:#aaa}
.jp-val{font-size:1.1em;font-weight:bold;color:#ffd700;font-family:'Courier New',monospace}
.jp-grand .jp-val{color:#ffd700;font-size:1.3em}
.jp-major .jp-val{color:#c0c0c0}
.jp-minor .jp-val{color:#cd7f32}
.bonus-wheel-btn{position:fixed;top:60px;right:20px;background:linear-gradient(135deg,#ffd700,#ff8c00);border:none;border-radius:25px;padding:10px 20px;color:#000;font-weight:bold;cursor:pointer;z-index:9990;font-size:0.9em;box-shadow:0 0 15px rgba(255,215,0,0.4)}
.bonus-wheel-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #ffd700;border-radius:20px;padding:30px;z-index:10001;text-align:center;color:#fff}
.bw-inner h3{color:#ffd700;font-size:1.4em;margin-bottom:10px}
.bw-pointer{font-size:2em;color:#ffd700;margin-bottom:-10px}
.bw-spin-btn{padding:12px 40px;background:linear-gradient(135deg,#ffd700,#ff8c00);border:none;border-radius:10px;color:#000;font-weight:bold;font-size:1.1em;cursor:pointer;margin:15px 0}
.bw-result{font-size:1.2em;margin:10px 0;min-height:30px}
.bw-close{padding:8px 20px;background:#333;border:1px solid #666;border-radius:8px;color:#fff;cursor:pointer}
.freespin-overlay{position:fixed;top:0;left:0;width:100%;background:linear-gradient(90deg,#00b894,#00cec9);padding:15px;z-index:10000;text-align:center;color:#fff;transition:all 0.5s}
.freespin-overlay h2{margin:0;font-size:1.5em}
.fs-info{display:flex;justify-content:center;gap:30px;margin-top:8px;font-size:1.1em}
.fs-info b{color:#ffd700}
.fs-minimized{padding:6px;font-size:0.8em}
.fs-minimized h2{font-size:1em}
.fs-complete{padding:20px}
.fs-complete h2{color:#ffd700}
.mult-trail{position:fixed;bottom:140px;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:9990}
.mt-step{padding:4px 8px;border-radius:6px;font-size:0.75em;font-weight:bold;background:#222;color:#666;border:1px solid #333}
.mt-active{background:#ffd700;color:#000;border-color:#ffd700;box-shadow:0 0 10px rgba(255,215,0,0.5)}
.mt-passed{background:#333;color:#ffd700;border-color:#ffd700}
.symbol-upgrade-anim{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.9);border:2px solid #ffd700;border-radius:16px;padding:30px;z-index:10002;text-align:center;color:#fff;animation:suPulse 0.5s ease-out}
@keyframes suPulse{0%{transform:translate(-50%,-50%) scale(0.5);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.minigame-btn{position:fixed;top:60px;left:20px;background:linear-gradient(135deg,#6c5ce7,#a29bfe);border:none;border-radius:25px;padding:10px 20px;color:#fff;font-weight:bold;cursor:pointer;z-index:9990;font-size:0.9em}
.minigame-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #6c5ce7;border-radius:20px;padding:30px;z-index:10001;color:#fff;min-width:400px}
.mg-inner h3{color:#a29bfe;margin-bottom:15px}
.mg-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:15px 0}
.mg-card{background:rgba(108,92,231,0.15);border:1px solid #6c5ce7;border-radius:12px;padding:15px;text-align:center;cursor:pointer;transition:transform 0.2s}
.mg-card:hover{transform:scale(1.05);background:rgba(108,92,231,0.3)}
.mg-icon{font-size:2em;margin-bottom:5px}
.mg-play-area{min-height:100px;margin:15px 0;padding:15px;background:rgba(0,0,0,0.3);border-radius:10px}
.mg-choice{padding:10px 25px;margin:5px;background:#6c5ce7;border:none;border-radius:8px;color:#fff;font-weight:bold;cursor:pointer}
.mg-close{width:100%;padding:10px;background:#333;border:1px solid #666;border-radius:8px;color:#fff;cursor:pointer;margin-top:10px}
.mg-mines-grid{display:grid;grid-template-columns:repeat(4,60px);gap:5px;justify-content:center;margin:10px 0}
.mg-mine-cell{width:60px;height:60px;background:#2d1b4e;border:1px solid #6c5ce7;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.5em}
.risk-ladder-btn{position:fixed;bottom:200px;right:20px;background:linear-gradient(135deg,#e17055,#fdcb6e);border:none;border-radius:25px;padding:10px 20px;color:#000;font-weight:bold;cursor:pointer;z-index:9990}
.risk-ladder-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #ffd700;border-radius:20px;padding:30px;z-index:10001;color:#fff;min-width:350px}
.rl-inner h3{color:#ffd700;margin-bottom:10px}
.rl-steps{margin:10px 0}
.rl-step{padding:8px 12px;margin:4px 0;background:rgba(255,215,0,0.08);border-radius:8px;border-left:3px solid #333}
.rl-step.rl-active{border-left-color:#ffd700;background:rgba(255,215,0,0.2)}
.rl-current{font-size:1.2em;margin:15px 0;text-align:center;color:#ffd700}
.rl-btn{padding:10px 20px;background:linear-gradient(135deg,#ffd700,#ff8c00);border:none;border-radius:8px;color:#000;font-weight:bold;cursor:pointer;margin:5px}
.rl-btn-collect{padding:10px 20px;background:#00b894;border:none;border-radius:8px;color:#fff;font-weight:bold;cursor:pointer;margin:5px}
.megaways-badge{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#e74c3c,#c0392b);border:2px solid #ffd700;border-radius:12px;padding:6px 18px;z-index:9990;display:flex;align-items:center;gap:8px}
.mw-label{color:#ffd700;font-weight:bold;font-size:0.8em;letter-spacing:2px}
.mw-ways{color:#fff;font-size:1.2em;font-weight:bold;font-family:'Courier New',monospace}


/* === Sprint 515-522 Styles === */
.deposit-history-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:16px;padding:25px;z-index:10000;width:450px;max-height:80vh;overflow-y:auto;color:#fff}
.dh-inner h3{color:#ffd700;margin-bottom:12px}
.dh-summary{display:flex;justify-content:space-between;margin-bottom:12px;font-size:0.9em}
.dh-summary b{color:#ffd700}
.dh-item{display:flex;justify-content:space-between;padding:8px;border-bottom:1px solid #222;font-size:0.9em}
.dh-amount{color:#00ff88;font-weight:bold}
.dh-completed{color:#00ff88}.dh-pending{color:#ffd700}.dh-failed{color:#ff4444}
.dh-empty{color:#888;text-align:center;padding:20px}
.withdraw-btn{position:fixed;bottom:20px;left:120px;background:linear-gradient(135deg,#e74c3c,#c0392b);border:none;border-radius:25px;padding:10px 24px;color:#fff;font-weight:bold;cursor:pointer;z-index:9990;font-size:0.9em}
.withdraw-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #e74c3c;border-radius:20px;padding:30px;z-index:10001;color:#fff;min-width:400px}
.wd-inner h3{color:#e74c3c;margin-bottom:12px}
.wd-inner label{display:block;margin:10px 0;font-size:0.9em}
.wd-inner input,.wd-inner select{width:100%;padding:8px;border-radius:6px;border:1px solid #333;background:#0d1117;color:#fff;margin-top:4px}
.wd-submit-btn{width:100%;padding:12px;background:linear-gradient(135deg,#e74c3c,#c0392b);border:none;border-radius:8px;color:#fff;font-weight:bold;cursor:pointer;margin-top:15px}
.wd-success{color:#00ff88;padding:10px;background:rgba(0,255,136,0.1);border-radius:8px;margin-top:10px}
.wd-close{width:100%;padding:8px;background:#333;border:1px solid #666;border-radius:8px;color:#fff;cursor:pointer;margin-top:10px}
.payment-methods-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:16px;padding:25px;z-index:10000;width:420px;color:#fff}
.pm-inner h3{color:#ffd700;margin-bottom:12px}
.pm-item{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid #222;font-size:0.9em}
.pm-icon{background:rgba(255,215,0,0.15);padding:4px 8px;border-radius:6px;font-size:0.8em;color:#ffd700}
.pm-remove{margin-left:auto;background:transparent;border:1px solid #ff4444;color:#ff4444;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:0.8em}
.pm-add-btn{width:100%;padding:10px;background:rgba(255,215,0,0.1);border:1px dashed #ffd700;border-radius:8px;color:#ffd700;cursor:pointer;margin-top:10px}
.pm-add-form{margin-top:10px}
.pm-add-form select,.pm-add-form input{width:100%;padding:8px;border-radius:6px;border:1px solid #333;background:#0d1117;color:#fff;margin:4px 0}
.pm-save-btn{width:100%;padding:10px;background:#ffd700;border:none;border-radius:8px;color:#000;font-weight:bold;cursor:pointer;margin-top:8px}
.receipts-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:16px;padding:25px;z-index:10000;width:480px;max-height:80vh;overflow-y:auto;color:#fff}
.tr-inner h3{color:#ffd700;margin-bottom:12px}
.tr-item{display:flex;justify-content:space-between;align-items:center;padding:8px;border-bottom:1px solid #222;font-size:0.85em}
.tr-deposit{color:#00ff88}.tr-withdrawal{color:#e74c3c}.tr-spin{color:#ffd700}
.tr-id{color:#666;font-size:0.8em;font-family:monospace}
.currency-converter{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:16px;padding:25px;z-index:10000;width:350px;color:#fff}
.cc-inner h3{color:#ffd700;margin-bottom:15px}
.cc-row{display:flex;gap:10px;align-items:center}
.cc-row input,.cc-row select{padding:8px;border-radius:6px;border:1px solid #333;background:#0d1117;color:#fff;flex:1}
.cc-arrow{text-align:center;font-size:1.5em;color:#ffd700;margin:10px 0}
.cc-result{font-size:1.3em;color:#ffd700;font-weight:bold}
.cc-note{font-size:0.8em;color:#666;margin-top:10px}
.spending-alert{position:fixed;top:50px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,#ff6b6b,#ee5a24);color:#fff;padding:12px 24px;border-radius:10px;z-index:10002;font-weight:bold;box-shadow:0 4px 20px rgba(255,0,0,0.3);animation:fadeIn 0.3s}
.cashback-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #00ff88;border-radius:16px;padding:25px;z-index:10000;width:380px;color:#fff}
.cb-inner h3{color:#00ff88;margin-bottom:12px}
.cb-stats{display:flex;gap:15px;margin:15px 0}
.cb-stat{flex:1;text-align:center;background:rgba(0,255,136,0.08);border-radius:10px;padding:10px}
.cb-label{display:block;font-size:0.75em;color:#aaa;text-transform:uppercase}
.cb-val{display:block;font-size:1.2em;font-weight:bold;color:#00ff88;margin-top:4px}
.cb-claim-btn{width:100%;padding:12px;background:linear-gradient(135deg,#00ff88,#00b894);border:none;border-radius:8px;color:#000;font-weight:bold;cursor:pointer}
.cb-claim-btn:disabled{opacity:0.4;cursor:not-allowed}
.cb-note{font-size:0.8em;color:#666;margin-top:8px}
.vip-bonus-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:16px;padding:25px;z-index:10000;width:400px;color:#fff}
.vb-inner h3{color:#ffd700;margin-bottom:12px}
.vb-current{display:flex;justify-content:space-between;padding:15px;background:rgba(255,215,0,0.1);border-radius:10px;border:1px solid #ffd700;margin-bottom:15px}
.vb-tier{font-weight:bold;color:#ffd700;font-size:1.1em}
.vb-match{color:#00ff88;font-weight:bold}
.vb-max{color:#aaa;font-size:0.9em}
.vb-tiers{margin:10px 0}
.vb-tier-item{display:flex;justify-content:space-between;padding:8px 12px;border-left:3px solid #333;margin:4px 0;font-size:0.9em;border-radius:4px}
.vb-active{border-left-color:#ffd700;background:rgba(255,215,0,0.1)}
.vb-unlocked{border-left-color:#00ff88}
.vb-note{font-size:0.8em;color:#666;margin-top:10px}


/* === Sprint 523-530 Styles === */
.lb-season-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:16px;padding:25px;z-index:10000;width:420px;max-height:80vh;overflow-y:auto;color:#fff}
.lb-inner h3{color:#ffd700;margin-bottom:8px}
.lb-timer{color:#ff6b6b;font-size:0.85em;margin-bottom:10px}
.lb-prizes{display:flex;gap:15px;margin-bottom:12px;font-size:0.85em;color:#ffd700}
.lb-row{display:flex;justify-content:space-between;padding:8px 10px;border-bottom:1px solid #222;font-size:0.9em}
.lb-you{background:rgba(255,215,0,0.1);border-left:3px solid #ffd700;font-weight:bold}
.lb-rank{width:40px;color:#aaa}.lb-name{flex:1}.lb-score{color:#ffd700}
.friends-btn{position:fixed;bottom:20px;left:240px;background:linear-gradient(135deg,#6c5ce7,#a29bfe);border:none;border-radius:25px;padding:10px 20px;color:#fff;font-weight:bold;cursor:pointer;z-index:9990;font-size:0.9em}
.friends-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #6c5ce7;border-radius:20px;padding:30px;z-index:10001;color:#fff;min-width:380px}
.fr-inner h3{color:#a29bfe;margin-bottom:12px}
.fr-add{display:flex;gap:8px;margin-bottom:15px}
.fr-add input{flex:1;padding:8px;border-radius:6px;border:1px solid #333;background:#0d1117;color:#fff}
.fr-add-submit{padding:8px 16px;background:#6c5ce7;border:none;border-radius:6px;color:#fff;font-weight:bold;cursor:pointer}
.fr-item{display:flex;align-items:center;gap:10px;padding:8px;border-bottom:1px solid #222}
.fr-online{color:#00ff88}.fr-offline{color:#666}
.fr-gift{padding:4px 10px;background:#ffd700;border:none;border-radius:4px;color:#000;cursor:pointer;font-size:0.8em}
.fr-close{width:100%;padding:10px;background:#333;border:1px solid #666;border-radius:8px;color:#fff;cursor:pointer;margin-top:12px}
.gift-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#00b894,#00cec9);border-radius:20px;padding:30px;z-index:10002;text-align:center;color:#fff;box-shadow:0 0 40px rgba(0,255,136,0.3)}
.gift-popup button{padding:10px 30px;background:#ffd700;border:none;border-radius:8px;color:#000;font-weight:bold;cursor:pointer;margin-top:10px}
.achievements-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:16px;padding:25px;z-index:10000;width:480px;max-height:80vh;overflow-y:auto;color:#fff}
.ach-inner h3{color:#ffd700;margin-bottom:12px}
.ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ach-badge{padding:12px;border-radius:10px;text-align:center;border:1px solid #333}
.ach-unlocked{background:rgba(255,215,0,0.1);border-color:#ffd700}
.ach-locked{opacity:0.4}
.ach-icon{font-size:1.5em;margin-bottom:4px}
.ach-name{font-weight:bold;font-size:0.9em;color:#ffd700}
.ach-desc{font-size:0.75em;color:#888;margin-top:2px}
.daily-challenges{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ff6b6b;border-radius:16px;padding:25px;z-index:10000;width:420px;color:#fff}
.dc-inner h3{color:#ff6b6b;margin-bottom:5px}
.dc-timer{font-size:0.8em;color:#888;margin-bottom:12px}
.dc-item{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid #222}
.dc-done{opacity:0.5}
.dc-info{flex:1}.dc-name{display:block;font-weight:bold;font-size:0.9em}.dc-desc{display:block;font-size:0.75em;color:#888}
.dc-bar{width:80px;height:6px;background:#222;border-radius:3px;overflow:hidden}
.dc-fill{height:100%;background:linear-gradient(90deg,#ff6b6b,#ffd700);border-radius:3px}
.dc-reward{font-weight:bold;color:#ffd700;font-size:0.9em}
.community-jp{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#2d1b4e,#1a0a2e);border:2px solid #ffd700;border-radius:16px;padding:8px 24px;z-index:9990;text-align:center}
.cjp-label{display:block;font-size:0.65em;color:#ffd700;letter-spacing:3px;font-weight:bold}
.cjp-amount{display:block;font-size:1.4em;color:#fff;font-weight:bold;font-family:'Courier New',monospace}
.cjp-info{display:block;font-size:0.7em;color:#888}
.referral-tiers-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:16px;padding:25px;z-index:10000;width:400px;color:#fff}
.rt-inner h3{color:#ffd700;margin-bottom:12px}
.rt-code{display:flex;align-items:center;gap:10px;padding:10px;background:rgba(255,215,0,0.08);border-radius:8px;margin-bottom:12px}
.rt-code b{color:#ffd700;font-size:1.1em}
.rt-copy{padding:4px 10px;background:#ffd700;border:none;border-radius:4px;color:#000;cursor:pointer;font-size:0.8em}
.rt-stats{display:flex;gap:15px;margin-bottom:12px;font-size:0.9em}
.rt-stats b{color:#ffd700}
.rt-tier{display:flex;justify-content:space-between;padding:6px 10px;border-bottom:1px solid #222;font-size:0.85em}
.rt-current{background:rgba(255,215,0,0.1);border-left:3px solid #ffd700}
.social-notif-container{position:fixed;bottom:120px;right:20px;z-index:9989;display:flex;flex-direction:column;gap:8px;max-width:300px}
.social-notif{background:rgba(26,26,46,0.95);border:1px solid #333;border-radius:10px;padding:10px 14px;color:#ccc;font-size:0.8em;animation:snSlide 0.3s ease-out;backdrop-filter:blur(10px)}
.sn-fade{opacity:0;transition:opacity 0.5s}
@keyframes snSlide{from{transform:translateX(100px);opacity:0}to{transform:translateX(0);opacity:1}}


/* === Sprint 531-538 Styles === */
.theme-toggle{position:fixed;top:100px;right:20px;background:#333;border:1px solid #555;border-radius:20px;padding:6px 14px;color:#fff;cursor:pointer;z-index:9990;font-size:0.8em}
[data-theme="light"]{background:#f0f0f5!important;color:#222!important}
[data-theme="light"] .jackpot-ticker{background:linear-gradient(90deg,#e8e8f0,#f0f0f5,#e8e8f0)!important}
[data-theme="light"] .community-jp{background:linear-gradient(135deg,#e0d0f0,#f0e8f5)!important}
[data-theme="light"] [class*="panel"],[data-theme="light"] [class*="modal"]{background:linear-gradient(135deg,#f5f5fa,#e8e8f0)!important;color:#222!important;border-color:#ccc!important}
.font-adjuster{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:16px;padding:20px;z-index:10000;display:flex;align-items:center;gap:10px;color:#fff}
.fa-label{font-weight:bold;color:#ffd700}
.fa-btn{padding:6px 12px;background:#333;border:1px solid #555;border-radius:6px;color:#fff;cursor:pointer;font-weight:bold}
.fa-value{min-width:50px;text-align:center;font-weight:bold;color:#ffd700}
.keyboard-help{position:fixed;bottom:20px;right:20px;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:12px;padding:15px;z-index:10000;color:#fff;min-width:200px}
.kh-inner h3{color:#ffd700;margin-bottom:8px;font-size:1em}
.kh-row{padding:4px 0;font-size:0.85em}
.kh-row kbd{display:inline-block;background:#333;border:1px solid #555;border-radius:4px;padding:2px 8px;font-family:monospace;color:#ffd700;margin-right:8px;min-width:30px;text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.cb-mode-toggle,.hc-toggle{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#333;border:1px solid #555;border-radius:8px;padding:8px 16px;color:#fff;cursor:pointer;z-index:10000;font-size:0.85em}
.cb-protanopia{filter:saturate(0.8) hue-rotate(-10deg)!important}
.cb-deuteranopia{filter:saturate(0.7) hue-rotate(20deg)!important}
.cb-tritanopia{filter:saturate(0.8) hue-rotate(-40deg)!important}
.reduced-motion *{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
.high-contrast{filter:contrast(1.5)!important}
.high-contrast *{border-color:#fff!important}
.high-contrast .jp-val,.high-contrast .rtp-value,.high-contrast .cjp-amount{color:#ffff00!important}


/* === Sprint 523-530 Styles === */
.lb-season-widget{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:16px;padding:25px;z-index:10000;width:420px;max-height:80vh;overflow-y:auto;color:#fff}
.lb-inner h3{color:#ffd700;margin-bottom:10px}
.lb-season-info{display:flex;justify-content:space-between;font-size:0.85em;color:#aaa;margin-bottom:10px}
.lb-prizes{display:flex;gap:15px;margin-bottom:12px;font-size:0.85em;color:#ffd700}
.lb-row{display:flex;align-items:center;gap:10px;padding:8px;border-bottom:1px solid #222;font-size:0.9em}
.lb-you{background:rgba(255,215,0,0.1);border-radius:8px}
.lb-rank{font-weight:bold;color:#ffd700;min-width:30px}
.lb-avatar{font-size:1.3em}
.lb-name{flex:1}
.lb-score{color:#00ff88;font-weight:bold}
.friends-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #6c5ce7;border-radius:16px;padding:25px;z-index:10000;width:380px;color:#fff}
.fr-inner h3{color:#a29bfe;margin-bottom:12px}
.fr-search{display:flex;gap:8px;margin-bottom:12px}
.fr-search input{flex:1;padding:8px;border-radius:6px;border:1px solid #333;background:#0d1117;color:#fff}
.fr-add{padding:8px 16px;background:#6c5ce7;border:none;border-radius:6px;color:#fff;font-weight:bold;cursor:pointer}
.fr-item{display:flex;align-items:center;gap:10px;padding:8px;border-bottom:1px solid #222;font-size:0.9em}
.fr-status{width:8px;height:8px;border-radius:50%}
.fr-online{background:#00ff88}
.fr-offline{background:#666}
.fr-level{color:#a29bfe;font-size:0.8em}
.fr-gift{padding:4px 10px;background:#ffd700;color:#000;border:none;border-radius:4px;cursor:pointer;font-size:0.8em}
.fr-empty{color:#666;text-align:center}
.gift-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:16px;padding:25px;z-index:10000;width:380px;color:#fff}
.gf-inner h3{color:#ffd700;margin-bottom:8px}
.gf-count{color:#aaa;font-size:0.85em;margin-bottom:12px}
.gf-item{display:flex;justify-content:space-between;align-items:center;padding:8px;border-bottom:1px solid #222;font-size:0.9em}
.gf-amount{color:#00ff88;font-weight:bold}
.gf-claim{padding:4px 12px;background:#00ff88;color:#000;border:none;border-radius:4px;cursor:pointer;font-weight:bold}
.badges-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:16px;padding:25px;z-index:10000;width:480px;max-height:80vh;overflow-y:auto;color:#fff}
.bg-inner h3{color:#ffd700;margin-bottom:5px}
.bg-count{color:#aaa;font-size:0.85em;margin-bottom:12px}
.bg-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bg-badge{padding:12px;border-radius:10px;text-align:center;border:1px solid #333}
.bg-unlocked{background:rgba(255,215,0,0.1);border-color:#ffd700}
.bg-locked{opacity:0.4}
.bg-icon{font-size:2em;margin-bottom:4px}
.bg-name{font-weight:bold;font-size:0.9em}
.bg-desc{font-size:0.75em;color:#aaa}
.challenges-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #00ff88;border-radius:16px;padding:25px;z-index:10000;width:440px;color:#fff}
.ch-inner h3{color:#00ff88;margin-bottom:5px}
.ch-date{color:#666;font-size:0.8em;margin-bottom:12px}
.ch-item{padding:10px;border-bottom:1px solid #222;margin-bottom:8px}
.ch-done{opacity:0.5}
.ch-info{display:flex;justify-content:space-between;margin-bottom:6px}
.ch-name{font-weight:bold;font-size:0.9em}
.ch-desc{color:#aaa;font-size:0.8em}
.ch-bar{height:6px;background:#222;border-radius:3px;overflow:hidden;margin-bottom:4px}
.ch-fill{height:100%;background:linear-gradient(90deg,#00ff88,#00b894);border-radius:3px;transition:width 0.3s}
.ch-progress{font-size:0.8em;color:#aaa}
.ch-reward{float:right;font-size:0.85em;color:#ffd700;font-weight:bold}
.community-jp{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#2d1b4e,#1a0a2e);border:1px solid #ffd700;border-radius:14px;padding:10px 20px;z-index:9990;text-align:center;min-width:250px}
.cjp-label{display:block;font-size:0.7em;color:#ffd700;letter-spacing:2px;font-weight:bold}
.cjp-amount{display:block;font-size:1.4em;color:#fff;font-weight:bold;margin:4px 0}
.cjp-bar{height:4px;background:#222;border-radius:2px;overflow:hidden;margin:4px 0}
.cjp-fill{height:100%;background:linear-gradient(90deg,#ffd700,#ff8c00);border-radius:2px;transition:width 0.5s}
.cjp-info{font-size:0.7em;color:#888}
.referral-tiers-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:16px;padding:25px;z-index:10000;width:400px;color:#fff}
.rt-inner h3{color:#ffd700;margin-bottom:12px}
.rt-current{display:flex;justify-content:space-between;padding:12px;border:1px solid;border-radius:10px;margin-bottom:12px;font-size:0.9em}
.rt-tier{font-weight:bold;font-size:1.1em}
.rt-code{display:flex;align-items:center;gap:10px;padding:10px;background:rgba(0,0,0,0.3);border-radius:8px;margin-bottom:12px;font-size:0.9em}
.rt-code code{flex:1;color:#ffd700;font-weight:bold;font-size:1.1em}
.rt-copy{padding:6px 12px;background:#ffd700;color:#000;border:none;border-radius:4px;cursor:pointer;font-weight:bold}
.rt-tier-item{display:flex;justify-content:space-between;padding:6px 10px;margin:4px 0;border-left:3px solid;border-radius:4px;font-size:0.85em}
.social-notif{position:fixed;bottom:-60px;right:20px;background:linear-gradient(135deg,#00b894,#00cec9);color:#fff;padding:10px 20px;border-radius:10px;z-index:10003;font-size:0.9em;font-weight:bold;transition:bottom 0.3s ease;box-shadow:0 4px 15px rgba(0,184,148,0.3)}
.social-notif-show{bottom:20px}


/* === Sprint 539-546 Styles === */
.session-reward-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #ffd700;border-radius:20px;padding:30px;z-index:10002;text-align:center;color:#fff;box-shadow:0 0 40px rgba(255,215,0,0.3);animation:srPulse 0.5s ease-out}
@keyframes srPulse{0%{transform:translate(-50%,-50%) scale(0.5);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.sr-inner h3{color:#ffd700;font-size:1.3em;margin-bottom:8px}
.sr-inner b{color:#00ff88;font-size:1.4em}
.sr-tier{color:#aaa;font-size:0.85em;margin:8px 0}
.sr-claim{padding:12px 30px;background:linear-gradient(135deg,#ffd700,#ff8c00);border:none;border-radius:10px;color:#000;font-weight:bold;font-size:1.1em;cursor:pointer}
.loss-protect-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #00ff88;border-radius:20px;padding:30px;z-index:10002;text-align:center;color:#fff;animation:srPulse 0.5s ease-out}
.lp-inner h3{color:#00ff88;font-size:1.3em;margin-bottom:8px}
.lp-inner b{color:#ffd700;font-size:1.3em}
.lp-claim{padding:12px 30px;background:linear-gradient(135deg,#00ff88,#00b894);border:none;border-radius:10px;color:#000;font-weight:bold;cursor:pointer}
.tlo-banner{position:fixed;top:50px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,#e74c3c,#c0392b);border-radius:12px;padding:8px 16px;z-index:10001;color:#fff;display:flex;align-items:center;box-shadow:0 4px 20px rgba(231,76,60,0.4)}
.tlo-inner{display:flex;align-items:center;gap:12px;font-size:0.9em}
.tlo-badge{background:#ffd700;color:#000;padding:3px 8px;border-radius:4px;font-weight:bold;font-size:0.8em}
.tlo-name{font-weight:bold}
.tlo-desc{color:rgba(255,255,255,0.8);font-size:0.85em}
.tlo-timer{background:rgba(0,0,0,0.3);padding:3px 10px;border-radius:6px;font-family:monospace;font-weight:bold}
.tlo-dismiss{background:transparent;border:none;color:#fff;font-size:1.2em;cursor:pointer;padding:0 5px}
.loyalty-mult-badge{position:fixed;bottom:80px;left:80px;background:linear-gradient(135deg,#6c5ce7,#a29bfe);border:1px solid #a29bfe;border-radius:12px;padding:6px 12px;z-index:9990;cursor:pointer;text-align:center}
.lm-label{display:block;font-size:0.6em;color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:1px}
.lm-val{display:block;font-size:1.1em;color:#fff;font-weight:bold}
.deposit-streak-widget{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ff8c00;border-radius:16px;padding:25px;z-index:10000;width:350px;color:#fff;text-align:center}
.ds-inner h3{color:#ff8c00;margin-bottom:10px}
.ds-streak{margin:10px 0}
.ds-count{font-size:3em;color:#ffd700;font-weight:bold}
.ds-days{display:block;color:#aaa;font-size:0.85em}
.ds-next{margin:10px 0;font-size:0.95em}
.ds-next b{color:#00ff88}
.ds-calendar{display:flex;justify-content:center;gap:6px;margin:15px 0}
.ds-day{width:35px;height:35px;border-radius:50%;border:2px solid #333;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:0.85em}
.ds-active{background:#ff8c00;border-color:#ffd700;color:#000}
.ds-note{font-size:0.8em;color:#666;margin-top:8px}
.win-celebration{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10003;display:flex;align-items:center;justify-content:center;pointer-events:none}
.wc-normal{background:rgba(0,0,0,0.3)}
.wc-big{background:rgba(0,0,0,0.5)}
.wc-mega{background:rgba(0,0,0,0.7)}
.wc-inner{text-align:center;animation:wcBounce 0.6s ease-out}
@keyframes wcBounce{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}
.wc-title{color:#ffd700;font-size:3em;text-shadow:0 0 30px rgba(255,215,0,0.5);margin-bottom:10px}
.wc-mega .wc-title{font-size:4em;animation:wcGlow 0.5s ease-in-out infinite alternate}
@keyframes wcGlow{0%{text-shadow:0 0 20px rgba(255,215,0,0.5)}100%{text-shadow:0 0 60px rgba(255,215,0,1)}}
.wc-amount{font-size:2.5em;color:#00ff88;font-weight:bold}
.wc-particle{position:absolute;width:10px;height:10px;border-radius:50%;top:-10px;animation:wcFall 3s ease-in forwards}
@keyframes wcFall{0%{top:-10px;opacity:1}100%{top:110%;opacity:0;transform:rotate(720deg)}}

/* === NFT System & Admin Withdrawals Styles === */
.admin-wd-btn{position:fixed;top:10px;right:20px;background:linear-gradient(135deg,#e74c3c,#c0392b);border:none;border-radius:8px;padding:8px 16px;color:#fff;font-weight:bold;cursor:pointer;z-index:9999;font-size:0.85em;box-shadow:0 2px 10px rgba(231,76,60,0.3)}
.admin-wd-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:10010;display:flex;align-items:center;justify-content:center}
.awd-inner{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #e74c3c;border-radius:20px;padding:30px;width:90%;max-width:700px;max-height:85vh;overflow-y:auto;color:#fff}
.awd-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.awd-header h2{color:#e74c3c;margin:0}
.awd-close{background:transparent;border:1px solid #666;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1.1em}
.awd-tabs{display:flex;gap:8px;margin-bottom:15px}
.awd-tab{padding:8px 20px;background:rgba(255,255,255,0.05);border:1px solid #333;border-radius:8px;color:#aaa;cursor:pointer;font-weight:bold}
.awd-tab-active{background:rgba(231,76,60,0.2);border-color:#e74c3c;color:#e74c3c}
.awd-stat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:15px}
.awd-stat{text-align:center;padding:12px;border-radius:10px;background:rgba(0,0,0,0.3)}
.awd-stat-num{display:block;font-size:2em;font-weight:bold}
.awd-stat-label{display:block;font-size:0.8em;color:#aaa;text-transform:uppercase;letter-spacing:1px}
.awd-stat-total{display:block;font-size:0.9em;color:#ffd700;margin-top:4px}
.awd-pending .awd-stat-num{color:#ffd700}
.awd-approved .awd-stat-num{color:#00ff88}
.awd-denied .awd-stat-num{color:#ff4444}
.awd-item{padding:15px;border:1px solid #333;border-radius:10px;margin-bottom:10px;background:rgba(0,0,0,0.2)}
.awd-item-header{display:flex;justify-content:space-between;margin-bottom:8px}
.awd-item-id{font-family:monospace;color:#aaa;font-size:0.85em}
.awd-item-amount{font-size:1.3em;font-weight:bold;color:#ffd700}
.awd-item-details{display:flex;gap:15px;font-size:0.85em;color:#888;flex-wrap:wrap;margin-bottom:8px}
.awd-item-notes{font-size:0.85em;color:#ff8c00;font-style:italic;margin-bottom:8px}
.awd-actions{display:flex;gap:10px}
.awd-approve{padding:8px 20px;background:linear-gradient(135deg,#00ff88,#00b894);border:none;border-radius:8px;color:#000;font-weight:bold;cursor:pointer}
.awd-deny{padding:8px 20px;background:linear-gradient(135deg,#ff4444,#cc0000);border:none;border-radius:8px;color:#fff;font-weight:bold;cursor:pointer}
.awd-empty{color:#666;text-align:center;padding:30px}


/* === Sprint 547-554 Styles === */
.player-count-widget{position:fixed;bottom:20px;right:20px;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #00ff88;border-radius:10px;padding:6px 14px;z-index:9990;display:flex;align-items:center;gap:6px;font-size:0.85em;color:#fff}
.pc-dot{width:8px;height:8px;border-radius:50%;background:#00ff88;animation:pcPulse 2s infinite}
@keyframes pcPulse{0%,100%{opacity:1}50%{opacity:0.3}}
.pc-num{font-weight:bold;color:#00ff88}
.pc-label{color:#aaa;font-size:0.85em}
.rtp-enforce-badge{position:fixed;bottom:130px;right:20px;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffd700;border-radius:10px;padding:6px 12px;z-index:9990;cursor:pointer;text-align:center}
.rtp-e-icon{display:block;font-size:0.6em;color:#aaa;letter-spacing:1px}
.rtp-e-val{display:block;font-size:1em;color:#ffd700;font-weight:bold}
.fraud-warning-banner{position:fixed;top:0;left:0;width:100%;background:linear-gradient(90deg,#ff4444,#cc0000);color:#fff;text-align:center;padding:8px;font-weight:bold;z-index:10005;font-size:0.85em}
.ratelimit-indicator{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,68,68,0.95);color:#fff;padding:15px 30px;border-radius:12px;z-index:10006;font-weight:bold;font-size:1.1em}
.uptime-widget{position:fixed;bottom:55px;right:20px;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #333;border-radius:10px;padding:4px 12px;z-index:9990;display:flex;align-items:center;gap:6px;font-size:0.8em;color:#aaa}
.ut-dot{width:6px;height:6px;border-radius:50%;background:#666}
.ut-up .ut-dot{background:#00ff88}
.ut-down .ut-dot{background:#ff4444}
.ut-val{color:#fff}
.db-health-widget{position:fixed;bottom:90px;right:20px;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #333;border-radius:10px;padding:4px 12px;z-index:9990;display:flex;align-items:center;gap:6px;font-size:0.8em}
.dbh-icon{color:#6c5ce7;font-weight:bold;font-size:0.75em}
.dbh-ok{color:#00ff88}
.dbh-warn{color:#ffd700}
.dbh-err{color:#ff4444}
.backup-btn{position:fixed;top:10px;left:20px;background:linear-gradient(135deg,#6c5ce7,#a29bfe);border:none;border-radius:8px;padding:6px 14px;color:#fff;font-weight:bold;cursor:pointer;z-index:9999;font-size:0.8em}
.backup-btn:disabled{opacity:0.5;cursor:not-allowed}


/* ===== Sprint 555-562: Player Retention & Gamification ===== */

/* XP Bar */
.xp-bar-container555{position:fixed;top:0;left:0;right:0;height:4px;background:rgba(0,0,0,0.3);z-index:9999}
.xp-bar-fill555{height:100%;background:linear-gradient(90deg,#f7971e,#ffd200);transition:width 0.5s ease;border-radius:0 2px 2px 0}
.xp-level-badge555{position:fixed;top:6px;right:12px;background:linear-gradient(135deg,#f7971e,#ffd200);color:#000;font-weight:700;font-size:12px;padding:2px 10px;border-radius:12px;z-index:10000;box-shadow:0 2px 8px rgba(247,151,30,0.4)}
.level-up-overlay555{position:fixed;inset:0;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:100000;animation:fadeIn555 0.3s ease}
.level-up-inner555{text-align:center;color:#ffd200;font-size:28px;font-weight:700;text-shadow:0 0 20px rgba(255,210,0,0.6)}
.level-up-inner555 p{font-size:16px;color:#ccc;margin-top:8px}
@keyframes fadeIn555{from{opacity:0}to{opacity:1}}

/* Prestige Ranks */
.prestige-badge555{position:fixed;top:6px;left:12px;font-size:12px;font-weight:700;padding:2px 10px;border-radius:12px;z-index:10000;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.prestige-novice{background:#888;color:#fff}
.prestige-bronze{background:#cd7f32;color:#fff}
.prestige-silver{background:linear-gradient(135deg,#c0c0c0,#e8e8e8);color:#333}
.prestige-gold{background:linear-gradient(135deg,#ffd700,#ffed4a);color:#333}
.prestige-platinum{background:linear-gradient(135deg,#e5e4e2,#b8b8b8);color:#333}
.prestige-diamond{background:linear-gradient(135deg,#b9f2ff,#4fc3f7);color:#003}
.prestige-mythic{background:linear-gradient(135deg,#9c27b0,#e040fb);color:#fff;animation:mythicGlow555 2s ease infinite}
@keyframes mythicGlow555{0%,100%{box-shadow:0 0 8px #9c27b0}50%{box-shadow:0 0 20px #e040fb}}

/* Daily Wheel */
.dw-overlay555{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:99999}
.dw-inner555{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:30px;border-radius:16px;text-align:center;color:#fff;max-width:400px;border:2px solid #ffd700}
.dw-inner555 h3{font-size:22px;margin-bottom:15px;color:#ffd700}
.dw-slots555{display:flex;gap:8px;justify-content:center;margin:15px 0}
.dw-slot555{width:60px;height:60px;background:#0d1b2a;border:2px solid #ffd700;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#ffd200;transition:all 0.3s}
.dw-spin555{background:linear-gradient(135deg,#ffd700,#ff8c00);color:#000;border:none;padding:12px 32px;font-size:16px;font-weight:700;border-radius:25px;cursor:pointer;margin-top:10px}
.dw-spin555:hover{transform:scale(1.05);box-shadow:0 0 15px rgba(255,215,0,0.5)}
.dw-close555{background:transparent;color:#aaa;border:1px solid #aaa;padding:8px 20px;border-radius:20px;cursor:pointer;margin-top:10px}

/* Profile Cards */
.pcard-overlay555{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:99998}
.pcard-inner555{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:30px;border-radius:16px;text-align:center;color:#fff;max-width:350px;border:2px solid #4fc3f7;position:relative}
.pcard-close555{position:absolute;top:10px;right:14px;background:none;border:none;color:#aaa;font-size:22px;cursor:pointer}
.pcard-avatar555{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,#4fc3f7,#0288d1);margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;color:#fff}
.pcard-name555{font-size:20px;margin:5px 0}
.pcard-prestige555{font-size:12px;color:#4fc3f7;text-transform:uppercase;letter-spacing:1px}
.pcard-stats555{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.pcard-stat555{background:rgba(255,255,255,0.05);padding:10px;border-radius:8px}
.pcard-stat555 span{display:block;font-size:11px;color:#999}
.pcard-stat555 strong{font-size:16px;color:#ffd200}
.pcard-member555{font-size:11px;color:#666;margin-top:10px}


/* Tournament Leaderboard */
.tourney-overlay555{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:99998}
.tourney-inner555{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:30px;border-radius:16px;color:#fff;max-width:420px;width:90%;border:2px solid #ffd700}
.tourney-inner555 h3{text-align:center;font-size:22px;color:#ffd700;margin-bottom:5px}
.tourney-timer555{text-align:center;font-size:12px;color:#999;margin-bottom:15px}
.tourney-list555{list-style:none;padding:0;margin:0}
.tourney-list555 li{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,0.05);font-size:14px}
.tourney-top555{color:#ffd700;font-weight:700}
.tourney-close555{display:block;margin:15px auto 0;background:transparent;color:#aaa;border:1px solid #aaa;padding:8px 24px;border-radius:20px;cursor:pointer}

/* Seasonal Banner */
.season-banner555{text-align:center;padding:8px;font-weight:700;font-size:14px;z-index:9990}
.season-winter{background:linear-gradient(90deg,#1a237e,#0d47a1);color:#e3f2fd}
.season-spring{background:linear-gradient(90deg,#1b5e20,#2e7d32);color:#e8f5e9}
.season-summer{background:linear-gradient(90deg,#e65100,#f57c00);color:#fff3e0}
.season-autumn{background:linear-gradient(90deg,#bf360c,#d84315);color:#fbe9e7}

/* Comeback Offer */
.comeback-overlay555{position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:100001}
.comeback-inner555{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:35px;border-radius:16px;text-align:center;color:#fff;max-width:380px;border:2px solid #4caf50}
.comeback-inner555 h2{font-size:26px;color:#4caf50;margin-bottom:10px}
.comeback-bonus555{font-size:32px;font-weight:700;color:#ffd200;margin:15px 0;text-shadow:0 0 15px rgba(255,210,0,0.4)}
.comeback-claim555{background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;border:none;padding:12px 32px;font-size:16px;font-weight:700;border-radius:25px;cursor:pointer;display:block;margin:10px auto}
.comeback-claim555:hover{transform:scale(1.05);box-shadow:0 0 15px rgba(76,175,80,0.5)}
.comeback-skip555{background:transparent;color:#aaa;border:1px solid #aaa;padding:8px 20px;border-radius:20px;cursor:pointer;margin-top:8px}

/* Streak Multiplier Badge */
.streak-badge555{position:fixed;bottom:12px;right:12px;background:linear-gradient(135deg,#ff6f00,#ff8f00);color:#fff;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:700;z-index:9999;box-shadow:0 2px 8px rgba(255,111,0,0.4)}


/* ===== Sprint 563-570: Admin Dashboard & Revenue Optimization ===== */

/* Revenue Ticker */
.rev-ticker563{display:inline-flex;align-items:center;gap:6px;background:rgba(76,175,80,0.15);padding:4px 12px;border-radius:8px;margin-left:12px}
.rev-label563{font-size:11px;color:#999;text-transform:uppercase;letter-spacing:1px}
.rev-amount563{font-size:14px;font-weight:700;color:#4caf50}

/* Admin Quick Stats */
.admin-qs563{position:fixed;top:60px;right:12px;background:linear-gradient(135deg,#1a1a2e,#16213e);padding:16px;border-radius:12px;color:#fff;width:220px;z-index:9990;border:1px solid rgba(255,255,255,0.1);box-shadow:0 4px 20px rgba(0,0,0,0.4);transition:all 0.3s}
.admin-qs563 h4{margin:0 0 10px;font-size:14px;color:#ffd200}
.aq-row563{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.05);font-size:12px}
.aq-row563 strong{color:#4fc3f7}
.aq-toggle563{display:block;margin-top:10px;background:none;border:1px solid #555;color:#888;padding:4px 12px;border-radius:12px;cursor:pointer;font-size:11px;width:100%}
.aq-collapsed563{height:36px;overflow:hidden}
.aq-collapsed563 .aq-row563,.aq-collapsed563 .aq-toggle563{display:none}

/* House Edge Display */
.he-display563{display:inline-flex;align-items:center;gap:6px;background:rgba(255,152,0,0.15);padding:4px 10px;border-radius:8px}
.he-label563{font-size:10px;color:#999;text-transform:uppercase}
.he-value563{font-size:13px;font-weight:700;color:#ff9800}

/* Loss Recovery Popup */
.lr-popup563{position:fixed;bottom:80px;right:16px;z-index:99999;animation:slideUp563 0.3s ease}
.lr-inner563{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:20px;border-radius:12px;color:#fff;max-width:280px;border:2px solid #ff9800;box-shadow:0 4px 20px rgba(255,152,0,0.3)}
.lr-inner563 h4{margin:0 0 8px;color:#ff9800;font-size:16px}
.lr-suggest563{font-size:20px;font-weight:700;color:#ffd200;margin:10px 0}
.lr-reason563{font-size:12px;color:#999;margin:5px 0}
.lr-close563{display:block;margin-top:10px;background:transparent;color:#aaa;border:1px solid #aaa;padding:6px 16px;border-radius:16px;cursor:pointer;width:100%}
@keyframes slideUp563{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}


/* ===== Sprint 571-578: Mobile Optimization & UX Polish ===== */

/* Responsive breakpoints */
.ms-mobile .admin-qs563{display:none}
.ms-mobile .rev-ticker563{display:none}
.ms-mobile .xp-level-badge555{font-size:10px;padding:2px 6px}
.ms-mobile .prestige-badge555{font-size:10px;padding:2px 6px}
.ms-tablet .admin-qs563{width:180px;font-size:11px}

/* Quick Action Toolbar */
.qt-bar571{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;background:linear-gradient(0deg,rgba(0,0,0,0.95),rgba(0,0,0,0.8));padding:8px 0 env(safe-area-inset-bottom,8px);z-index:9998;border-top:1px solid rgba(255,255,255,0.1);backdrop-filter:blur(10px)}
.qt-btn571{background:none;border:none;color:#fff;font-size:18px;font-weight:700;padding:8px 20px;cursor:pointer;border-radius:8px;transition:all 0.2s}
.qt-btn571:hover,.qt-btn571:active{background:rgba(255,215,0,0.15);color:#ffd700}
.ms-desktop .qt-bar571{display:none}

/* Loading Screen */
.ms-loader571{position:fixed;inset:0;background:linear-gradient(135deg,#0d1117,#161b22);display:flex;align-items:center;justify-content:center;z-index:999999;transition:opacity 0.5s}
.ms-loader-inner571{text-align:center;width:80%;max-width:400px}
.ms-loader-logo571{font-size:32px;font-weight:900;color:#ffd700;text-shadow:0 0 30px rgba(255,215,0,0.4);margin-bottom:30px;letter-spacing:3px}
.ms-loader-bar571{height:4px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden}
.ms-loader-fill571{height:100%;background:linear-gradient(90deg,#ffd700,#ff8c00);width:0;transition:width 0.2s;border-radius:2px}
.ms-loader-text571{font-size:12px;color:#666;margin-top:12px}

/* Notification System */
.notif-container571{position:fixed;top:30px;right:16px;z-index:100002;display:flex;flex-direction:column;gap:8px;max-width:320px}
.notif571{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:10px;color:#fff;font-size:13px;animation:slideIn571 0.3s ease;transition:opacity 0.3s}
.notif571 button{background:none;border:none;color:rgba(255,255,255,0.6);font-size:16px;cursor:pointer;margin-left:8px}
.notif-info-571{background:linear-gradient(135deg,#1565c0,#1976d2);border-left:3px solid #42a5f5}
.notif-success-571{background:linear-gradient(135deg,#2e7d32,#388e3c);border-left:3px solid #66bb6a}
.notif-warning-571{background:linear-gradient(135deg,#e65100,#f57c00);border-left:3px solid #ffb74d}
.notif-error-571{background:linear-gradient(135deg,#c62828,#d32f2f);border-left:3px solid #ef5350}
@keyframes slideIn571{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* FPS Badge (admin only) */
.fps-badge571{position:fixed;bottom:40px;left:12px;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:700;z-index:9999}
.fps-good571{background:rgba(76,175,80,0.2);color:#4caf50}
.fps-ok571{background:rgba(255,152,0,0.2);color:#ff9800}
.fps-bad571{background:rgba(244,67,54,0.2);color:#f44336}


/* ===== Sprint 579-586: Security Hardening & Compliance ===== */

/* Session Warning */
.session-warn579{position:fixed;inset:0;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:100003}
.sw-inner579{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:30px;border-radius:16px;text-align:center;color:#fff;max-width:400px;border:2px solid #ff9800}
.sw-inner579 p{color:#ccc;margin-bottom:15px}
.sw-inner579 button{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;border:none;padding:10px 24px;border-radius:20px;cursor:pointer;font-weight:700}

/* Self-Exclusion Screen */
.se-screen579{display:flex;align-items:center;justify-content:center;height:100vh;background:#0d1117;color:#fff;text-align:center;padding:20px}
.se-inner579{max-width:500px}
.se-inner579 h2{color:#f44336;margin-bottom:15px}
.se-inner579 p{color:#999;line-height:1.6}

/* Secure Badge */
.sec-badge579{font-size:10px;padding:3px 8px;border-radius:6px;font-weight:700;display:inline-block}
.sec-ssl579{background:rgba(76,175,80,0.15);color:#4caf50}
.sec-nossl579{background:rgba(244,67,54,0.15);color:#f44336}

/* Age Gate */
.age-gate579{position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:999999;transition:opacity 0.5s}
.ag-inner579{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:40px;border-radius:20px;text-align:center;color:#fff;max-width:450px;border:2px solid #ffd700}
.ag-inner579 h2{font-size:24px;color:#ffd700;margin-bottom:15px}
.ag-inner579 p{color:#ccc;line-height:1.6;margin-bottom:20px}
.ag-buttons579{display:flex;gap:12px;justify-content:center}
.ag-yes579{background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;border:none;padding:12px 28px;font-size:16px;font-weight:700;border-radius:25px;cursor:pointer}
.ag-yes579:hover{transform:scale(1.05)}
.ag-no579{background:transparent;color:#aaa;border:1px solid #aaa;padding:12px 28px;font-size:16px;border-radius:25px;cursor:pointer}
.ag-help579{font-size:11px;color:#666;margin-top:20px}


/* ===== Sprint 587-594: Payment & Monetization Enhancement ===== */

/* Quick Deposit Modal */
.qd-overlay587{position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:100002}
.qd-inner587{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:30px;border-radius:16px;text-align:center;color:#fff;max-width:420px;width:90%;border:2px solid #4caf50;position:relative}
.qd-close587{position:absolute;top:10px;right:14px;background:none;border:none;color:#aaa;font-size:22px;cursor:pointer}
.qd-inner587 h3{font-size:22px;color:#4caf50;margin-bottom:10px}
.qd-amounts587{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}
.qd-amt587{background:rgba(76,175,80,0.1);border:2px solid rgba(76,175,80,0.3);color:#fff;padding:14px;border-radius:10px;font-size:18px;font-weight:700;cursor:pointer;transition:all 0.2s}
.qd-amt587:hover,.qd-selected587{background:rgba(76,175,80,0.25);border-color:#4caf50;transform:scale(1.05)}
.qd-custom587{display:flex;gap:8px;margin:10px 0}
.qd-custom587 input{flex:1;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.2);color:#fff;padding:10px;border-radius:8px;font-size:14px}
.qd-custom587 button{background:#4caf50;color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-weight:700}
.qd-secure587{font-size:11px;color:#666;margin-top:10px}

/* VIP Tier Badges */
.vip-badge587{display:inline-block;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:700;margin-left:8px}
.vip-bronze-587{background:linear-gradient(135deg,#cd7f32,#a0522d);color:#fff}
.vip-silver-587{background:linear-gradient(135deg,#c0c0c0,#e8e8e8);color:#333}
.vip-gold-587{background:linear-gradient(135deg,#ffd700,#ffed4a);color:#333}
.vip-platinum-587{background:linear-gradient(135deg,#e5e4e2,#fff);color:#333}
.vip-diamond-587{background:linear-gradient(135deg,#b9f2ff,#4fc3f7);color:#003;box-shadow:0 0 10px rgba(79,195,247,0.4)}

/* Promo Banner */
.promo-banner587{text-align:center;padding:10px 16px;background:linear-gradient(90deg,#1b5e20,#2e7d32);color:#fff;font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;gap:10px}
.promo-banner587 button{background:none;border:none;color:rgba(255,255,255,0.6);font-size:18px;cursor:pointer}

/* Transaction History */
.txh-overlay587{position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:100001}
.txh-inner587{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:24px;border-radius:16px;color:#fff;max-width:550px;width:92%;max-height:80vh;overflow-y:auto;position:relative;border:1px solid rgba(255,255,255,0.1)}
.txh-close587{position:absolute;top:10px;right:14px;background:none;border:none;color:#aaa;font-size:22px;cursor:pointer}
.txh-table587{width:100%;border-collapse:collapse;font-size:12px;margin-top:12px}
.txh-table587 th{text-align:left;padding:8px;border-bottom:2px solid rgba(255,255,255,0.1);color:#999;text-transform:uppercase;font-size:10px}
.txh-table587 td{padding:8px;border-bottom:1px solid rgba(255,255,255,0.05)}
.txh-positive587 td:nth-child(3){color:#4caf50}
.txh-negative587 td:nth-child(3){color:#f44336}

/* Withdrawal Status */
.wds-overlay587{position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:100001}
.wds-inner587{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:24px;border-radius:16px;color:#fff;max-width:450px;width:90%;position:relative;border:1px solid rgba(255,255,255,0.1)}
.wds-close587{position:absolute;top:10px;right:14px;background:none;border:none;color:#aaa;font-size:22px;cursor:pointer}
.wds-nft587{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid rgba(255,255,255,0.05)}
.wds-name587{font-weight:600}
.wds-val587{color:#ffd200}
.wds-active{color:#4caf50}
.wds-pending{color:#ff9800}
.wds-burned{color:#f44336}
.wds-info587{font-size:12px;color:#999;margin-bottom:12px}

/* Spending Analytics */
.sa-overlay587{position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:100001}
.sa-inner587{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:24px;border-radius:16px;color:#fff;max-width:480px;width:90%;position:relative;border:1px solid rgba(255,255,255,0.1)}
.sa-close587{position:absolute;top:10px;right:14px;background:none;border:none;color:#aaa;font-size:22px;cursor:pointer}
.sa-grid587{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.sa-card587{background:rgba(255,255,255,0.03);padding:14px;border-radius:10px;text-align:center}
.sa-card587 span{display:block;font-size:11px;color:#999;margin-bottom:4px}
.sa-card587 strong{font-size:18px}
.sa-wide587{grid-column:1/-1}
.sa-pos587{color:#4caf50}
.sa-neg587{color:#f44336}


/* ===== Sprint 595-602: Game Content & Social Features ===== */

/* Game Categories */
.gc-bar595{display:flex;gap:8px;padding:10px 16px;overflow-x:auto;scrollbar-width:none}
.gc-bar595::-webkit-scrollbar{display:none}
.gc-btn595{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:#ccc;padding:6px 16px;border-radius:20px;font-size:12px;cursor:pointer;white-space:nowrap;transition:all 0.2s}
.gc-btn595:hover,.gc-active595{background:rgba(255,215,0,0.15);border-color:#ffd700;color:#ffd700}

/* Game Search */
.gs-wrap595{position:relative;padding:8px 16px}
.gs-input595{width:100%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.15);color:#fff;padding:10px 12px 10px 36px;border-radius:10px;font-size:14px}
.gs-input595::placeholder{color:#666}
.gs-icon595{position:absolute;left:24px;top:50%;transform:translateY(-50%);font-size:16px}

/* Social Share */
.sw-overlay595{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:100002}
.sw-inner595{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:28px;border-radius:16px;text-align:center;color:#fff;max-width:380px;position:relative;border:2px solid #1da1f2}
.sw-close595{position:absolute;top:10px;right:14px;background:none;border:none;color:#aaa;font-size:22px;cursor:pointer}
.sw-text595{background:rgba(255,255,255,0.05);padding:12px;border-radius:8px;font-size:14px;margin:12px 0}
.sw-buttons595{display:flex;gap:10px;justify-content:center}
.sw-btn595{padding:10px 20px;border:none;border-radius:10px;font-weight:700;cursor:pointer;font-size:13px}
.sw-twitter595{background:#1da1f2;color:#fff}
.sw-copy595{background:rgba(255,255,255,0.1);color:#fff}

/* Chat Panel */
.chat-panel595{position:fixed;bottom:60px;right:16px;width:300px;max-height:400px;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:12px;border:1px solid rgba(255,255,255,0.1);z-index:99997;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.4)}
.chat-header595{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:rgba(0,0,0,0.3);color:#ffd200;font-weight:700;font-size:14px}
.chat-header595 button{background:none;border:none;color:#aaa;font-size:18px;cursor:pointer}
.chat-body595{flex:1;overflow-y:auto;padding:10px;max-height:260px}
.chat-msg595{padding:4px 0;font-size:12px;color:#ccc;border-bottom:1px solid rgba(255,255,255,0.03)}
.chat-msg595 strong{color:#4fc3f7}
.chat-empty595{text-align:center;color:#555;font-size:12px;padding:20px}
.chat-input595{display:flex;gap:6px;padding:8px}
.chat-input595 input{flex:1;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.15);color:#fff;padding:8px;border-radius:8px;font-size:12px}
.chat-input595 button{background:#4caf50;color:#fff;border:none;padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:700;font-size:12px}
.ms-mobile .chat-panel595{width:calc(100% - 32px);bottom:56px}


/* ===== Sprint 603-610: Server-Side Enhancements ===== */

/* Server Status Badge */
.ss-badge603{position:fixed;top:32px;left:12px;font-size:10px;padding:3px 10px;border-radius:8px;font-weight:700;z-index:9998}
.ss-ok,.ss-healthy{background:rgba(76,175,80,0.15);color:#4caf50}
.ss-degraded{background:rgba(255,152,0,0.15);color:#ff9800}
.ss-error,.ss-offline{background:rgba(244,67,54,0.15);color:#f44336}

/* Connection Quality */
.cq-badge603{position:fixed;top:32px;right:60px;font-size:10px;padding:3px 8px;border-radius:8px;font-weight:700;z-index:9998}
.cq-good{background:rgba(76,175,80,0.15);color:#4caf50}
.cq-fair{background:rgba(255,152,0,0.15);color:#ff9800}
.cq-poor{background:rgba(244,67,54,0.15);color:#f44336}

/* Low Bandwidth Mode */
.ms-low-bandwidth .season-banner555,.ms-low-bandwidth .promo-banner587{display:none}
.ms-low-bandwidth .chat-panel595{display:none}
.ms-low-bandwidth .admin-qs563{display:none}


/* ===== Sprint 603-610: Server-Side Enhancements ===== */

/* Server Status Badge */
.ss-badge603{position:fixed;top:32px;left:12px;font-size:10px;padding:3px 10px;border-radius:8px;font-weight:700;z-index:9998}
.ss-ok,.ss-healthy{background:rgba(76,175,80,0.15);color:#4caf50}
.ss-degraded{background:rgba(255,152,0,0.15);color:#ff9800}
.ss-error,.ss-offline{background:rgba(244,67,54,0.15);color:#f44336}

/* Connection Quality */
.cq-badge603{position:fixed;top:32px;right:60px;font-size:10px;padding:3px 8px;border-radius:8px;font-weight:700;z-index:9998}
.cq-good{background:rgba(76,175,80,0.15);color:#4caf50}
.cq-fair{background:rgba(255,152,0,0.15);color:#ff9800}
.cq-poor{background:rgba(244,67,54,0.15);color:#f44336}

/* Low Bandwidth Mode */
.ms-low-bandwidth .season-banner555,.ms-low-bandwidth .promo-banner587{display:none}
.ms-low-bandwidth .chat-panel595{display:none}
.ms-low-bandwidth .admin-qs563{display:none}


/* ===== Sprint 611-618: Advanced Analytics ===== */
.tg-overlay611{position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:100001}
.tg-inner611{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:24px;border-radius:16px;color:#fff;max-width:500px;width:92%;position:relative;border:1px solid rgba(255,255,255,0.1)}
.tg-close611{position:absolute;top:10px;right:14px;background:none;border:none;color:#aaa;font-size:22px;cursor:pointer}
.tg-chart611{display:flex;align-items:flex-end;gap:3px;height:120px;margin:16px 0;padding:8px;background:rgba(0,0,0,0.2);border-radius:8px}
.tg-bar611{flex:1;min-width:4px;border-radius:2px 2px 0 0;transition:height 0.3s}
.tg-win611{background:linear-gradient(0deg,#2e7d32,#4caf50);color:#4caf50}
.tg-loss611{background:linear-gradient(0deg,#c62828,#f44336);color:#f44336}
.tg-legend611{display:flex;gap:16px;justify-content:center;font-size:12px}
.tg-legend611 span{padding:2px 10px;border-radius:6px}


/* ===== Sprint 619-626: Accessibility & Internationalization ===== */

/* Screen Reader Only */
.sr-only619{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* High Contrast Mode */
.ms-high-contrast{--bg:#000;--fg:#fff;--accent:#ffff00;--border:#fff}
.ms-high-contrast *{border-color:#fff !important}
.ms-high-contrast button,.ms-high-contrast a{outline:2px solid #ffff00 !important;outline-offset:2px}
.ms-high-contrast .notif571,.ms-high-contrast .qd-inner587,.ms-high-contrast .txh-inner587{background:#000 !important;border:3px solid #fff !important}

/* Reduced Motion */
.ms-reduced-motion *,.ms-reduced-motion *::before,.ms-reduced-motion *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}

/* Color Blind Modes */
.ms-cb-protanopia{filter:url('#protanopia')}
.ms-cb-deuteranopia{filter:url('#deuteranopia')}
.ms-cb-tritanopia{filter:url('#tritanopia')}

/* Accessibility Panel */
.a11y-overlay619{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:100003}
.a11y-inner619{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:28px;border-radius:16px;color:#fff;max-width:400px;width:90%;position:relative;border:2px solid #4fc3f7}
.a11y-close619{position:absolute;top:10px;right:14px;background:none;border:none;color:#aaa;font-size:22px;cursor:pointer}
.a11y-inner619 h3{color:#4fc3f7;margin-bottom:16px}
.a11y-option619{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.a11y-option619 label{font-size:14px;color:#ccc}
.a11y-option619 button{background:rgba(79,195,247,0.15);border:1px solid #4fc3f7;color:#4fc3f7;padding:6px 14px;border-radius:8px;cursor:pointer;font-size:12px}
.a11y-option619 select{background:#0d1117;border:1px solid #4fc3f7;color:#fff;padding:6px;border-radius:6px;font-size:12px}

/* Focus visible for keyboard nav */
:focus-visible{outline:3px solid #4fc3f7 !important;outline-offset:2px}


/* ===== Sprint 627-634: Marketing & Growth Engine ===== */
.wb-overlay627{position:fixed;inset:0;background:rgba(0,0,0,0.92);display:flex;align-items:center;justify-content:center;z-index:100003}
.wb-inner627{background:linear-gradient(135deg,#1a1a2e,#0d47a1);padding:40px;border-radius:20px;text-align:center;color:#fff;max-width:400px;border:2px solid #ffd700}
.wb-inner627 h2{font-size:26px;color:#ffd700;margin-bottom:10px}
.wb-offer627{font-size:36px;font-weight:900;color:#ffd200;margin:16px 0;text-shadow:0 0 20px rgba(255,210,0,0.5)}
.wb-claim627{background:linear-gradient(135deg,#ffd700,#ff8c00);color:#000;border:none;padding:14px 36px;font-size:18px;font-weight:700;border-radius:30px;cursor:pointer;display:block;margin:10px auto}
.wb-skip627{background:transparent;color:#aaa;border:none;padding:8px;cursor:pointer;font-size:13px}
.co-banner627{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 16px;background:linear-gradient(90deg,#b71c1c,#e53935);color:#fff;font-size:13px;font-weight:600}
.co-banner627 strong{font-size:15px;color:#ffd200}
.ei-overlay627{position:fixed;inset:0;background:rgba(0,0,0,0.92);display:flex;align-items:center;justify-content:center;z-index:100004}
.ei-inner627{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:35px;border-radius:16px;text-align:center;color:#fff;max-width:380px;border:2px solid #ff9800}
.ei-claim627{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;border:none;padding:12px 28px;font-size:16px;font-weight:700;border-radius:25px;cursor:pointer;display:block;margin:12px auto}
.ei-skip627{background:transparent;color:#888;border:none;padding:8px;cursor:pointer;font-size:12px}
.ec-popup627{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:99999}
.ec-inner627{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:20px;border-radius:12px;color:#fff;max-width:380px;border:1px solid #4fc3f7;box-shadow:0 8px 32px rgba(0,0,0,0.5)}
.ec-form627{display:flex;gap:8px;margin-top:10px}
.ec-form627 input{flex:1;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.2);color:#fff;padding:10px;border-radius:8px}
.ec-form627 button{background:#4fc3f7;color:#000;border:none;padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:700}


/* === JACKPOT MODAL LOCK-UP FIX === */
.jackpot-win-overlay { cursor: pointer; }
.jackpot-win-overlay .jackpot-win-modal,
.jackpot-win-overlay .jackpot-win-card { cursor: default; }
.jackpot-win-close { position: relative; z-index: 10; pointer-events: auto !important; }
.jackpot-win-card button { position: relative; z-index: 10; pointer-events: auto !important; }


/* ============================================ */
/* Sprint 635-642: Monetization & Revenue       */
/* ============================================ */

/* Dynamic Pricing Widget */
.dyn-pricing-widget { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 8800; animation: dpSlideUp 0.4s ease-out; }
.dp-inner { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: linear-gradient(135deg, #1a5c2e, #0d3b1a); border: 1px solid #2ecc71; border-radius: 12px; box-shadow: 0 4px 20px rgba(46,204,113,0.3); }
.dp-icon { font-size: 24px; }
.dp-text { color: #fff; font-size: 13px; }
.dp-btn { padding: 6px 16px; background: linear-gradient(135deg, #2ecc71, #27ae60); color: #fff; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; }
.dp-btn:hover { transform: scale(1.05); }
.dp-close { background: none; border: none; color: #94a3b8; font-size: 18px; cursor: pointer; }
@keyframes dpSlideUp { from { transform: translateX(-50%) translateY(30px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }

/* VIP Points Badge */
.vip-points-badge { position: fixed; top: 10px; right: 120px; z-index: 8500; padding: 6px 14px; background: linear-gradient(135deg, #ffd700, #f59e0b); color: #000; font-weight: 800; font-size: 12px; border-radius: 20px; cursor: pointer; box-shadow: 0 2px 12px rgba(255,215,0,0.4); transition: transform 0.2s; }
.vip-points-badge:hover { transform: scale(1.08); }

/* VIP Store Panel */
.vip-store-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9500; width: 400px; max-width: 95vw; max-height: 80vh; overflow-y: auto; background: linear-gradient(145deg, #1a1a2e, #16213e); border: 2px solid #ffd700; border-radius: 16px; box-shadow: 0 0 40px rgba(255,215,0,0.3); }
.vsp-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(255,215,0,0.2); }
.vsp-header h3 { color: #ffd700; margin: 0; font-size: 16px; }
.vsp-points { color: #ffd700; font-weight: 700; font-size: 14px; }
.vsp-close { background: none; border: none; color: #94a3b8; font-size: 20px; cursor: pointer; }
.vsp-items { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.vsp-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(255,255,255,0.05); border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); opacity: 0.5; }
.vsp-item.vsp-available { opacity: 1; cursor: pointer; border-color: rgba(255,215,0,0.3); }
.vsp-item.vsp-available:hover { background: rgba(255,215,0,0.1); }
.vsp-icon { font-size: 24px; }
.vsp-name { flex: 1; color: #fff; font-size: 13px; font-weight: 600; }
.vsp-cost { color: #ffd700; font-size: 12px; font-weight: 700; }

/* Loss Rebate Offer */
.rebate-offer { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 8800; animation: dpSlideUp 0.4s ease-out; }
.ro-inner { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: linear-gradient(135deg, #7c3aed, #5b21b6); border: 1px solid #a855f7; border-radius: 12px; box-shadow: 0 4px 20px rgba(168,85,247,0.4); }
.ro-icon { font-size: 24px; }
.ro-text { color: #fff; font-size: 13px; }
.ro-claim { padding: 6px 16px; background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; }
.ro-claim:hover { transform: scale(1.05); }
.ro-dismiss { background: none; border: none; color: rgba(255,255,255,0.6); font-size: 18px; cursor: pointer; }

/* Deposit Streak Badge */
.dep-streak-badge { position: fixed; top: 48px; right: 120px; z-index: 8500; padding: 5px 12px; background: rgba(30,30,50,0.9); color: #f59e0b; font-size: 11px; font-weight: 700; border-radius: 16px; border: 1px solid rgba(245,158,11,0.3); }
.dep-streak-badge small { color: #94a3b8; font-weight: 400; }
.dep-streak-badge.ds-hot { border-color: #ef4444; color: #ef4444; }
.dep-streak-badge.ds-mega { border-color: #ffd700; color: #ffd700; box-shadow: 0 0 12px rgba(255,215,0,0.3); }

/* Bet Suggestion */
.bet-suggestion { position: fixed; bottom: 140px; left: 50%; transform: translateX(-50%); z-index: 8700; padding: 8px 16px; background: rgba(30,30,50,0.95); color: #3b82f6; font-size: 12px; font-weight: 600; border-radius: 10px; border: 1px solid rgba(59,130,246,0.3); white-space: nowrap; }
.bs-icon { margin-right: 6px; }

/* Revenue Dashboard */
.rev-dash-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9600; width: 500px; max-width: 95vw; background: linear-gradient(145deg, #0f172a, #1e293b); border: 2px solid #3b82f6; border-radius: 16px; box-shadow: 0 0 40px rgba(59,130,246,0.3); }
.rd-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(59,130,246,0.2); }
.rd-header h3 { color: #3b82f6; margin: 0; font-size: 16px; }
.rd-header button { background: none; border: none; color: #94a3b8; font-size: 20px; cursor: pointer; }
.rd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; }
.rd-card { padding: 12px; background: rgba(255,255,255,0.05); border-radius: 10px; text-align: center; }
.rd-label { display: block; color: #94a3b8; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.rd-val { display: block; color: #fff; font-size: 18px; font-weight: 700; margin-top: 4px; }
.rd-val.rd-positive { color: #2ecc71; }
.rd-val.rd-negative { color: #ef4444; }
.rd-card.rd-profit { grid-column: span 2; background: rgba(46,204,113,0.1); border: 1px solid rgba(46,204,113,0.2); }

/* Retention Alert */
.retention-alert { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 8900; animation: dpSlideUp 0.4s ease-out; }
.ra-inner { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: linear-gradient(135deg, #1e40af, #1e3a8a); border: 1px solid #3b82f6; border-radius: 12px; box-shadow: 0 4px 20px rgba(59,130,246,0.3); }
.ra-icon { font-size: 28px; }
.ra-text { color: #fff; font-size: 13px; }
.ra-btn { padding: 6px 16px; background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; }
.ra-btn:hover { transform: scale(1.05); }
.ra-close { background: none; border: none; color: rgba(255,255,255,0.6); font-size: 18px; cursor: pointer; }

/* Cross-Sell Promo */
.cross-sell-promo { position: fixed; top: 80px; right: 16px; z-index: 8800; animation: cspSlideIn 0.4s ease-out; max-width: 280px; }
.csp-inner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: linear-gradient(135deg, #b45309, #92400e); border: 1px solid #f59e0b; border-radius: 12px; box-shadow: 0 4px 20px rgba(245,158,11,0.3); }
.csp-icon { font-size: 28px; }
.csp-text { color: #fff; font-size: 12px; flex: 1; }
.csp-btn { padding: 6px 12px; background: linear-gradient(135deg, #f59e0b, #d97706); color: #000; border: none; border-radius: 8px; font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; }
.csp-btn:hover { transform: scale(1.05); }
.csp-close { background: none; border: none; color: rgba(255,255,255,0.6); font-size: 16px; cursor: pointer; }
@keyframes cspSlideIn { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }


/* ============================================ */
/* Sprint 643-650: Game Quality & UX            */
/* ============================================ */

/* Win Animations */
.win-anim-643 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9200; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wa-burst { position: absolute; inset: 0; background: radial-gradient(ellipse, rgba(255,215,0,0.2) 0%, transparent 70%); animation: waBurst 0.5s ease-out; }
.wa-text { position: relative; font-size: 2.5rem; font-weight: 900; color: #ffd700; text-shadow: 0 0 30px rgba(255,215,0,0.8), 0 0 8px #fff; animation: waPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.wa-amount { position: relative; font-size: 1.5rem; font-weight: 700; color: #fff; text-shadow: 0 0 15px rgba(255,215,0,0.5); animation: waPopIn 0.4s 0.15s cubic-bezier(0.34,1.56,0.64,1) both; }
.wa-mega .wa-text { font-size: 3.5rem; color: #ff4500; text-shadow: 0 0 40px rgba(255,69,0,0.9); }
.wa-big .wa-text { font-size: 3rem; }
@keyframes waBurst { from { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; } to { opacity: 0; transform: scale(2); } }
@keyframes waPopIn { from { transform: scale(0) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.wa-coins { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9201; pointer-events: none; overflow: hidden; }
.wa-coin { position: absolute; top: -30px; font-size: 20px; animation: waCoinFall linear forwards; }
@keyframes waCoinFall { to { transform: translateY(110vh) rotate(720deg); opacity: 0; } }

/* Sound Toggle */
.sound-toggle-btn { position: fixed; top: 10px; right: 80px; z-index: 8500; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(30,30,50,0.9); color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sound-toggle-btn:hover { background: rgba(50,50,80,0.9); }

/* Game History Panel */
.game-hist-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9500; width: 450px; max-width: 95vw; max-height: 80vh; overflow-y: auto; background: linear-gradient(145deg, #0f172a, #1e293b); border: 2px solid #6366f1; border-radius: 16px; box-shadow: 0 0 40px rgba(99,102,241,0.3); }
.gh-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(99,102,241,0.2); color: #fff; }
.gh-header h3 { margin: 0; font-size: 16px; }
.gh-header button { background: none; border: none; color: #94a3b8; font-size: 20px; cursor: pointer; }
.gh-list { padding: 8px; }
.gh-entry { display: flex; gap: 8px; padding: 8px 12px; border-radius: 8px; font-size: 12px; align-items: center; }
.gh-entry:nth-child(odd) { background: rgba(255,255,255,0.03); }
.gh-time { color: #64748b; width: 70px; }
.gh-game { color: #94a3b8; flex: 1; }
.gh-result { font-weight: 700; width: 80px; text-align: right; }
.gh-win .gh-result { color: #2ecc71; }
.gh-loss .gh-result { color: #ef4444; }
.gh-bal { color: #64748b; width: 80px; text-align: right; }

/* Autoplay Panel */
.autoplay-panel { position: fixed; bottom: 100px; right: 16px; z-index: 8600; }
.ap-toggle { padding: 8px 16px; background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; border: none; border-radius: 10px; font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: 0 2px 12px rgba(99,102,241,0.4); }
.ap-toggle:hover { transform: scale(1.05); }
.autoplay-opts { position: fixed; bottom: 150px; right: 16px; z-index: 8700; width: 220px; padding: 16px; background: linear-gradient(145deg, #1a1a2e, #16213e); border: 1px solid #6366f1; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.apo-header { color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.apo-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: #94a3b8; font-size: 12px; }
.apo-row select, .apo-row input { width: 80px; padding: 4px 8px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; color: #fff; font-size: 12px; }
.apo-start, .apo-stop { width: 100%; padding: 8px; margin-top: 8px; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; }
.apo-start { background: linear-gradient(135deg, #2ecc71, #27ae60); color: #fff; }
.apo-stop { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; }

/* Bet Presets */
.bet-presets-bar { position: fixed; bottom: 52px; left: 50%; transform: translateX(-50%); z-index: 8500; display: flex; gap: 4px; padding: 4px; background: rgba(15,23,42,0.95); border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); }
.bp-btn { padding: 5px 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: #94a3b8; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.bp-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.bp-btn.bp-active { background: linear-gradient(135deg, #f59e0b, #d97706); color: #000; border-color: #f59e0b; }

/* Paytable Panel */
.paytable-btn { position: fixed; top: 10px; right: 200px; z-index: 8500; padding: 6px 12px; background: rgba(30,30,50,0.9); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; color: #fff; font-size: 12px; cursor: pointer; }
.paytable-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9500; width: 400px; max-width: 95vw; max-height: 80vh; overflow-y: auto; background: linear-gradient(145deg, #0f172a, #1e293b); border: 2px solid #f59e0b; border-radius: 16px; box-shadow: 0 0 40px rgba(245,158,11,0.3); }
.pt-header { display: flex; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(245,158,11,0.2); color: #fff; }
.pt-header h3 { margin: 0; font-size: 15px; }
.pt-header button { background: none; border: none; color: #94a3b8; font-size: 20px; cursor: pointer; }
.pt-body { padding: 16px; }
.pt-section { margin-bottom: 16px; }
.pt-section h4 { color: #f59e0b; font-size: 13px; margin: 0 0 8px; }
.pt-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; color: #94a3b8; border-bottom: 1px solid rgba(255,255,255,0.05); }
.pt-row span:last-child { color: #fff; font-weight: 600; }
.pt-special span:last-child { color: #2ecc71; }
.pt-jackpot span:last-child { color: #ffd700; font-weight: 800; }

/* Game Stats Panel */
.game-stats-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9500; width: 420px; max-width: 95vw; background: linear-gradient(145deg, #0f172a, #1e293b); border: 2px solid #10b981; border-radius: 16px; box-shadow: 0 0 40px rgba(16,185,129,0.3); }
.gs-header { display: flex; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(16,185,129,0.2); color: #fff; }
.gs-header h3 { margin: 0; font-size: 16px; }
.gs-header button { background: none; border: none; color: #94a3b8; font-size: 20px; cursor: pointer; }
.gs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 16px; }
.gs-card { padding: 12px; background: rgba(255,255,255,0.05); border-radius: 10px; text-align: center; }
.gs-label { display: block; color: #64748b; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.gs-val { display: block; color: #fff; font-size: 18px; font-weight: 700; margin-top: 4px; }
.gs-pos { color: #2ecc71; }
.gs-neg { color: #ef4444; }
.gs-net { grid-column: span 2; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2); }

/* Quick Action Bar */
.quick-action-bar { position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 8400; display: flex; gap: 2px; padding: 4px 8px; background: rgba(15,23,42,0.95); border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); }
.qa-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; background: none; border: none; color: #64748b; cursor: pointer; border-radius: 8px; transition: all 0.15s; }
.qa-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.qa-icon { font-size: 18px; }
.qa-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }


/* ============================================ */
/* Sprint 651-658: Security & Compliance        */
/* ============================================ */

/* Geo Compliance Banner */
.geo-banner { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9800; background: linear-gradient(135deg, #1e40af, #1e3a8a); border-top: 2px solid #3b82f6; }
.gb-inner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 20px; }
.gb-icon { font-size: 24px; }
.gb-text { color: #cbd5e1; font-size: 13px; }
.gb-accept { padding: 8px 20px; background: #2ecc71; color: #fff; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; }
.gb-accept:hover { background: #27ae60; }

/* Age Gate */
.age-gate-overlay { position: fixed; inset: 0; z-index: 99990; background: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center; }
.ag-modal { text-align: center; padding: 48px; background: linear-gradient(145deg, #1a1a2e, #16213e); border: 2px solid #ef4444; border-radius: 20px; max-width: 400px; }
.ag-icon { font-size: 64px; margin-bottom: 16px; }
.ag-modal h2 { color: #fff; margin: 0 0 12px; }
.ag-modal p { color: #94a3b8; margin: 0 0 24px; }
.ag-buttons { display: flex; gap: 12px; justify-content: center; }
.ag-yes { padding: 12px 32px; background: #2ecc71; color: #fff; border: none; border-radius: 10px; font-weight: 700; font-size: 15px; cursor: pointer; }
.ag-no { padding: 12px 32px; background: #ef4444; color: #fff; border: none; border-radius: 10px; font-weight: 700; font-size: 15px; cursor: pointer; }

/* Self-Exclude */
.self-exclude-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.98); display: flex; align-items: center; justify-content: center; }
.se-modal { text-align: center; padding: 48px; max-width: 500px; }
.se-modal h2 { color: #ef4444; font-size: 24px; }
.se-modal p { color: #94a3b8; font-size: 15px; line-height: 1.6; }

/* ─── visual-overhaul.css (2/6) ─── */
/* ============================================================
   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/6) ─── */
/* ═══════════════════════════════════════════════════════════════
   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/6) ─── */
/**
 * 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;
  }

}

/* ─── premium-animations.css (5/6) ─── */
/* ================================================================
   PREMIUM SLOT ANIMATIONS v2 - Industry Standard (Pragmatic/NetEnt)
   Full replacement for premium-animations.css
   ================================================================ */

/* -- REEL SPIN & STOP ------------------------------------------ */
@keyframes reel-blur-in {
  0%   { filter: blur(0px) brightness(1); }
  15%  { filter: blur(4px) brightness(1.15); }
  85%  { filter: blur(4px) brightness(1.1); }
  100% { filter: blur(0px) brightness(1); }
}
.reel-strip.spinning    { filter: blur(3px) brightness(1.1); transition: filter 0.15s ease; }
.reel-strip.decelerating{ filter: blur(0px) brightness(1);  transition: filter 0.4s ease; }
.reel-strip.decelerating{ transition: transform 650ms cubic-bezier(0.215,0.61,0.355,1), filter 0.4s ease; }
.reel-strip.bouncing    { transition: transform 220ms cubic-bezier(0.34,1.56,0.64,1) !important; }

@keyframes reel-slam-flash {
  0%   { box-shadow:0 0 0 0 rgba(255,220,80,0);    background:rgba(255,220,80,0); }
  20%  { box-shadow:0 0 30px 8px rgba(255,220,80,.55); background:rgba(255,220,80,.08); }
  100% { box-shadow:0 0 0 0 rgba(255,220,80,0);    background:rgba(255,220,80,0); }
}
.reel-col.reel-just-stopped,
.reel-column.reel-just-stopped { animation: reel-slam-flash 0.45s ease-out forwards; }

@keyframes symbol-land {
  0%   { transform: scaleY(0.65) scaleX(1.12); }
  35%  { transform: scaleY(1.18) scaleX(0.90); }
  60%  { transform: scaleY(0.94) scaleX(1.04); }
  80%  { transform: scaleY(1.05) scaleX(0.97); }
  100% { transform: scaleY(1)    scaleX(1); }
}
.symbol-land > img,
.symbol-land .reel-cell-inner,
.symbol-land > span { animation: symbol-land 0.42s cubic-bezier(0.34,1.56,0.64,1) forwards !important; }
.symbol-land { animation: symbol-land 0.42s cubic-bezier(0.34,1.56,0.64,1) forwards !important; }

/* -- AMBIENT IDLE -------------------------------------------- */
@keyframes bg-shimmer {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
@keyframes reel-glow-pulse {
  0%,100%{ box-shadow:inset 0 0 20px rgba(255,215,0,.04); }
  50%    { box-shadow:inset 0 0 40px rgba(255,215,0,.10); }
}
@keyframes spin-btn-glow {
  0%,100%{ box-shadow:0 0 12px rgba(16,185,129,.3),0 4px 12px rgba(0,0,0,.4); }
  50%    { box-shadow:0 0 28px rgba(16,185,129,.65),0 4px 18px rgba(0,0,0,.45); }
}
@keyframes idle-float {
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-5px); }
}
@keyframes logo-breathe {
  0%,100%{ filter:drop-shadow(0 0 6px rgba(255,215,0,.3)); transform:scale(1); }
  50%    { filter:drop-shadow(0 0 16px rgba(255,215,0,.7)); transform:scale(1.025); }
}
@keyframes bg-pulse-glow {
  0%,100%{ filter:brightness(1) saturate(1); }
  50%    { filter:brightness(1.05) saturate(1.08); }
}

.slot-reel-area { animation:reel-glow-pulse 4s ease-in-out infinite; }
#slotModal .modal-body,
#slotModal [class*="slot-chrome"] { animation:bg-pulse-glow 6s ease-in-out infinite; }
.provider-logo-badge { animation:logo-breathe 3s ease-in-out infinite !important; }
.slot-spin-btn:not(:disabled):not(.spinning) { animation:spin-btn-glow 2s ease-in-out infinite; }
.slot-spin-btn:not(:disabled):hover {
  transform:scale(1.07) !important;
  animation:none !important;
  box-shadow:0 0 36px rgba(16,185,129,.75),0 6px 20px rgba(0,0,0,.55) !important;
  transition:transform .12s ease,box-shadow .12s ease;
}

.reel-cell:nth-child(3n+1) img { animation:idle-float 5.1s ease-in-out infinite; }
.reel-cell:nth-child(3n+2) img { animation:idle-float 5.1s ease-in-out 1.7s infinite; }
.reel-cell:nth-child(3n)   img { animation:idle-float 5.1s ease-in-out 3.4s infinite; }
.spinning .reel-cell img        { animation:none !important; }
.reel-cell img { transition:transform .3s ease,filter .3s ease; }
.reel-cell:hover img { transform:scale(1.08); filter:brightness(1.2) drop-shadow(0 0 8px rgba(255,215,0,.5)); }

/* -- WIN SYMBOL EFFECTS -------------------------------------- */
@keyframes win-burst-in {
  0%  { transform:scale(0.9); filter:brightness(1) drop-shadow(0 0 0px rgba(255,215,0,0)); }
  30% { transform:scale(1.28); filter:brightness(2) drop-shadow(0 0 22px rgba(255,215,0,1)); }
  55% { transform:scale(1.08); filter:brightness(1.5) drop-shadow(0 0 14px rgba(255,215,0,.7)); }
  75% { transform:scale(1.16); filter:brightness(1.7) drop-shadow(0 0 18px rgba(255,215,0,.8)); }
  100%{ transform:scale(1.05); filter:brightness(1.3) drop-shadow(0 0 10px rgba(255,215,0,.5)); }
}
@keyframes win-symbol-pulse {
  0%,100%{ transform:scale(1.05); filter:brightness(1.3) drop-shadow(0 0 10px rgba(255,215,0,.5)); }
  50%    { transform:scale(1.18); filter:brightness(1.6) drop-shadow(0 0 20px rgba(255,215,0,.8)); }
}
@keyframes win-spin-3d {
  0%  { transform:perspective(500px) rotateY(0deg)   scale(1); }
  25% { transform:perspective(500px) rotateY(90deg)  scale(1.12); filter:brightness(2); }
  50% { transform:perspective(500px) rotateY(180deg) scale(1.25); filter:brightness(2.5) drop-shadow(0 0 24px gold); }
  75% { transform:perspective(500px) rotateY(270deg) scale(1.12); filter:brightness(2); }
  100%{ transform:perspective(500px) rotateY(360deg) scale(1.05); }
}
@keyframes lose-dim {
  0%  { filter:brightness(1); }
  100%{ filter:brightness(0.45) saturate(0.3); }
}

.reel-win-cell img,
.reel-cell.win img,
.win-cell img {
  animation:win-burst-in .5s cubic-bezier(0.34,1.56,0.64,1) forwards,
            win-symbol-pulse 1.2s ease-in-out .5s infinite !important;
}
.reel-big-win-cell img,
.big-win-cell img { animation:win-spin-3d 1.1s ease-in-out 2 !important; }
.reel-cell.lose-cell img { animation:lose-dim .35s ease forwards !important; }

/* -- ANTICIPATION -------------------------------------------- */
@keyframes anticipation-glow {
  0%,100%{ box-shadow:0 0 0 0 rgba(255,60,60,0);   border-color:rgba(255,80,80,.2); }
  50%    { box-shadow:0 0 30px 8px rgba(255,80,40,.5),inset 0 0 20px rgba(255,80,40,.15); border-color:rgba(255,80,80,.8); }
}
@keyframes anticipation-shake {
  0%,100%{ transform:translateX(0); }
  20%    { transform:translateX(-3px); }
  40%    { transform:translateX(3px); }
  60%    { transform:translateX(-2px); }
  80%    { transform:translateX(2px); }
}
.reel-anticipation {
  animation:anticipation-glow .55s ease-in-out infinite !important;
  border:2px solid rgba(255,80,80,.4);
  border-radius:8px;
  z-index:5;
}
.reel-anticipation-shake {
  animation:anticipation-glow .55s ease-in-out infinite,
            anticipation-shake .25s ease-in-out infinite !important;
}
.slot-reel-area.anticipation-active::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.55) 100%);
  pointer-events:none;
  z-index:4;
  animation:fadeIn .3s ease forwards;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* -- FREE SPINS INTRO ---------------------------------------- */
@keyframes fs-bg-flash {
  0%  { opacity:0; }
  10% { opacity:1; }
  25% { opacity:.7; }
  40% { opacity:1; }
  60% { opacity:.8; }
  100%{ opacity:1; }
}
@keyframes fs-title-slam {
  0%  { transform:scale(4) rotate(-8deg); opacity:0; filter:blur(12px); }
  50% { transform:scale(.92) rotate(1deg); opacity:1; filter:blur(0); }
  65% { transform:scale(1.08) rotate(-.5deg); }
  80% { transform:scale(.97) rotate(.2deg); }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}
@keyframes fs-count-bounce {
  0%  { transform:scale(0); }
  60% { transform:scale(1.3); }
  80% { transform:scale(.9); }
  100%{ transform:scale(1); }
}
.free-spins-intro-overlay {
  position:fixed; inset:0; z-index:19999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center,#1a0a3a 0%,#0a0015 100%);
  animation:fs-bg-flash .6s ease-out forwards; cursor:pointer;
}
.free-spins-intro-overlay::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 60px,rgba(255,215,0,.04) 60px,rgba(255,215,0,.04) 61px);
}
.fs-intro-title {
  font-size:clamp(3rem,10vw,7rem); font-weight:900; color:#FFD700;
  text-shadow:0 0 40px rgba(255,215,0,.8),0 0 80px rgba(255,165,0,.5),0 4px 0 rgba(0,0,0,.8);
  letter-spacing:.05em; text-align:center;
  animation:fs-title-slam .7s cubic-bezier(0.34,1.56,0.64,1) .1s both;
  position:relative; z-index:1;
}
.fs-intro-subtitle {
  font-size:clamp(1.2rem,3.5vw,2.2rem); font-weight:700; color:rgba(255,255,255,.9);
  letter-spacing:.15em; text-transform:uppercase; margin-top:.4em;
  animation:fadeIn .5s ease .6s both; position:relative; z-index:1;
}
.fs-intro-count {
  font-size:clamp(4rem,15vw,10rem); font-weight:900; color:#FF6B35;
  text-shadow:0 0 50px rgba(255,100,50,.8),0 4px 0 rgba(0,0,0,.8);
  line-height:1;
  animation:fs-count-bounce .6s cubic-bezier(0.34,1.56,0.64,1) .9s both;
  position:relative; z-index:1;
}
.fs-intro-label {
  font-size:clamp(1rem,2.5vw,1.5rem); color:rgba(255,255,255,.7);
  letter-spacing:.3em; text-transform:uppercase;
  animation:fadeIn .4s ease 1.2s both; position:relative; z-index:1;
}
.fs-intro-tap {
  position:absolute; bottom:8%; left:50%; transform:translateX(-50%);
  font-size:1rem; color:rgba(255,255,255,.45); letter-spacing:.2em;
  animation:fadeIn .5s ease 1.8s both;
}

/* -- SCREEN SHAKE -------------------------------------------- */
@keyframes screen-shake-mild {
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  15%    { transform:translate(-4px,2px) rotate(-.3deg); }
  30%    { transform:translate(4px,-2px) rotate(.3deg); }
  45%    { transform:translate(-3px,3px) rotate(-.2deg); }
  60%    { transform:translate(3px,-1px) rotate(.2deg); }
  75%    { transform:translate(-2px,2px) rotate(-.1deg); }
  90%    { transform:translate(2px,-1px); }
}
@keyframes screen-shake-heavy {
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  10%    { transform:translate(-8px,4px) rotate(-.6deg); }
  20%    { transform:translate(8px,-5px) rotate(.6deg); }
  30%    { transform:translate(-6px,6px) rotate(-.5deg); }
  40%    { transform:translate(7px,-3px) rotate(.5deg); }
  50%    { transform:translate(-5px,5px) rotate(-.4deg); }
  60%    { transform:translate(6px,-4px) rotate(.4deg); }
  70%    { transform:translate(-4px,3px) rotate(-.3deg); }
  80%    { transform:translate(4px,-2px) rotate(.2deg); }
  90%    { transform:translate(-2px,2px) rotate(-.1deg); }
}
.screen-shake-mild  { animation:screen-shake-mild  .5s cubic-bezier(.36,.07,.19,.97) both; }
.screen-shake-heavy { animation:screen-shake-heavy .7s cubic-bezier(.36,.07,.19,.97) both; }

/* -- BIG WIN OVERLAY ----------------------------------------- */
.bigwin-overlay {
  position:fixed; inset:0; z-index:18000;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center,rgba(20,10,40,.97) 0%,rgba(5,3,15,.99) 100%);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.bigwin-overlay[style*="flex"] { opacity:1; pointer-events:auto; }
.bigwin-overlay.bigwin-tier-mega  { background:radial-gradient(ellipse at center,rgba(60,10,10,.97) 0%,rgba(10,0,5,.99) 100%); }
.bigwin-overlay.bigwin-tier-super { background:radial-gradient(ellipse at center,rgba(30,10,50,.97) 0%,rgba(8,2,18,.99) 100%); }
.bigwin-overlay.bigwin-tier-big   { background:radial-gradient(ellipse at center,rgba(20,20,5,.97) 0%,rgba(5,5,0,.99) 100%); }

@keyframes bigwin-title-enter {
  0%  { transform:scale(.3) translateY(40px); opacity:0; filter:blur(8px); }
  50% { transform:scale(1.15) translateY(-8px); opacity:1; filter:blur(0); }
  70% { transform:scale(.95) translateY(3px); }
  85% { transform:scale(1.05) translateY(-2px); }
  100%{ transform:scale(1) translateY(0); opacity:1; }
}
@keyframes bigwin-amount-slam {
  0%  { transform:scale(2.5); opacity:0; filter:blur(6px); }
  40% { transform:scale(.88); opacity:1; filter:blur(0); }
  60% { transform:scale(1.06); }
  80% { transform:scale(.97); }
  100%{ transform:scale(1); }
}
@keyframes bigwin-multiplier-pop {
  0%  { transform:scale(0); opacity:0; }
  60% { transform:scale(1.25); opacity:1; }
  80% { transform:scale(.92); }
  100%{ transform:scale(1); }
}
@keyframes bigwin-coin-fall {
  0%  { transform:translateY(-8vh) rotate(0deg);   opacity:0; }
  5%  { opacity:1; }
  90% { opacity:.9; }
  100%{ transform:translateY(110vh) rotate(720deg); opacity:0; }
}
@keyframes bigwin-starburst {
  0%  { transform:scale(0) rotate(0deg); opacity:.9; }
  60% { transform:scale(1) rotate(20deg); opacity:.7; }
  100%{ transform:scale(1.2) rotate(40deg); opacity:0; }
}

.bigwin-content { position:relative; text-align:center; z-index:2; padding:2rem; }

.bigwin-starburst {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(80vw,600px); height:min(80vw,600px);
  background:conic-gradient(rgba(255,215,0,.15) 0deg,transparent 10deg,rgba(255,215,0,.12) 20deg,transparent 30deg,rgba(255,215,0,.15) 40deg,transparent 50deg,rgba(255,215,0,.1) 60deg,transparent 70deg,rgba(255,215,0,.15) 80deg,transparent 90deg,rgba(255,215,0,.12) 100deg,transparent 110deg,rgba(255,215,0,.15) 120deg,transparent 130deg,rgba(255,215,0,.1) 140deg,transparent 150deg,rgba(255,215,0,.15) 160deg,transparent 170deg,rgba(255,215,0,.12) 180deg,transparent 190deg,rgba(255,215,0,.15) 200deg,transparent 210deg,rgba(255,215,0,.1) 220deg,transparent 230deg,rgba(255,215,0,.15) 240deg,transparent 250deg,rgba(255,215,0,.12) 260deg,transparent 270deg,rgba(255,215,0,.15) 280deg,transparent 290deg,rgba(255,215,0,.1) 300deg,transparent 310deg,rgba(255,215,0,.15) 320deg,transparent 330deg,rgba(255,215,0,.12) 340deg,transparent 350deg,rgba(255,215,0,.15) 360deg);
  border-radius:50%;
  animation:bigwin-starburst 1.5s ease-out forwards;
  pointer-events:none; z-index:1;
}

.bigwin-label {
  font-size:clamp(2.5rem,8vw,5.5rem); font-weight:900; letter-spacing:.04em;
  text-shadow:0 0 30px currentColor,0 4px 0 rgba(0,0,0,.7);
  animation:bigwin-title-enter .65s cubic-bezier(0.34,1.56,0.64,1) both;
  position:relative; z-index:2;
}
.bigwin-tier-mega  .bigwin-label { color:#FF4444; text-shadow:0 0 40px rgba(255,50,50,.9),0 0 80px rgba(255,0,0,.5),0 4px 0 rgba(0,0,0,.8); }
.bigwin-tier-super .bigwin-label { color:#B44FFF; text-shadow:0 0 40px rgba(180,80,255,.9),0 0 80px rgba(120,0,255,.5),0 4px 0 rgba(0,0,0,.8); }
.bigwin-tier-big   .bigwin-label { color:#FFD700; text-shadow:0 0 40px rgba(255,215,0,.9),0 0 80px rgba(255,165,0,.5),0 4px 0 rgba(0,0,0,.8); }
.bigwin-tier-nice  .bigwin-label { color:#50FF80; text-shadow:0 0 30px rgba(80,255,128,.8),0 4px 0 rgba(0,0,0,.8); }

.bigwin-amount {
  font-size:clamp(3rem,10vw,7rem); font-weight:900; color:#FFD700;
  letter-spacing:-.01em;
  text-shadow:0 0 30px rgba(255,215,0,.8),0 4px 0 rgba(0,0,0,.8);
  animation:bigwin-amount-slam .6s cubic-bezier(0.34,1.56,0.64,1) .35s both;
  position:relative; z-index:2; line-height:1;
}
.bigwin-multiplier {
  font-size:clamp(1.4rem,4vw,2.5rem); font-weight:800; color:rgba(255,255,255,.85);
  letter-spacing:.1em;
  animation:bigwin-multiplier-pop .5s cubic-bezier(0.34,1.56,0.64,1) .75s both;
  position:relative; z-index:2; margin-top:.3em;
}
.bigwin-coins { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.bigwin-coin {
  position:absolute; top:-8vh; font-size:1.8rem;
  animation:bigwin-coin-fall linear forwards; will-change:transform;
}
.bigwin-dismiss-hint {
  position:fixed; bottom:8%; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.4); font-size:.9rem; letter-spacing:.2em;
  z-index:2; animation:fadeIn .5s ease 2s both;
}

/* -- PAYLINE DRAW -------------------------------------------- */
.payline-svg-overlay { position:absolute; inset:0; pointer-events:none; z-index:10; }
.payline-path {
  stroke-dasharray:1000; stroke-dashoffset:1000;
  animation:payline-draw .5s ease-out forwards;
}
@keyframes payline-draw { to{ stroke-dashoffset:0; } }
.payline-dot {
  animation:payline-dot-pop .3s cubic-bezier(0.34,1.56,0.64,1) both;
  transform-box:fill-box; transform-origin:center;
}
@keyframes payline-dot-pop {
  0%  { transform:scale(0); opacity:0; }
  60% { transform:scale(1.4); opacity:1; }
  100%{ transform:scale(1);   opacity:1; }
}

/* -- MISC ----------------------------------------------------- */
@keyframes scatter-pulse {
  0%,100%{ filter:brightness(1.2) drop-shadow(0 0 6px gold); transform:scale(1); }
  50%    { filter:brightness(1.8) drop-shadow(0 0 18px gold) drop-shadow(0 0 30px rgba(255,215,0,.5)); transform:scale(1.12); }
}
.scatter-waiting-glow img { animation:scatter-pulse .7s ease-in-out infinite !important; }

@keyframes near-miss-wobble {
  0%,100%{ transform:rotate(0deg); }
  20%    { transform:rotate(-4deg); }
  40%    { transform:rotate(4deg); }
  60%    { transform:rotate(-2deg); }
  80%    { transform:rotate(2deg); }
}
.reel-near-miss img { animation:near-miss-wobble .6s ease-in-out !important; }

@keyframes balance-flash-win {
  0%  { color:inherit; }
  25% { color:#4ade80; text-shadow:0 0 12px rgba(74,222,128,.8); transform:scale(1.12); }
  60% { color:#4ade80; transform:scale(1); }
  100%{ color:inherit; }
}
.balance-flash-win { animation:balance-flash-win .65s ease-out !important; }

@keyframes reel-loss-droop {
  0%  { filter:brightness(1); transform:scale(1); }
  40% { filter:brightness(.55) saturate(.4); transform:scale(.97); }
  100%{ filter:brightness(1); transform:scale(1); }
}
.reel-loss-droop { animation:reel-loss-droop .55s ease-out !important; }

@keyframes spin-active-bg {
  0%,100%{ filter:brightness(1); }
  50%    { filter:brightness(1.1) hue-rotate(3deg); }
}
#slotModal.spinning .modal-body,
#slotModal.spinning-active .modal-body { animation:spin-active-bg .8s ease-in-out infinite !important; }

@keyframes win-amount-pop {
  0%  { transform:scale(.6); opacity:0; }
  60% { transform:scale(1.3); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
.win-amount-display.win-update { animation:win-amount-pop .45s cubic-bezier(0.34,1.56,0.64,1) forwards; }

@keyframes symbol-fall-in {
  0%  { transform:translateY(-120%); opacity:0; }
  60% { transform:translateY(8%); opacity:1; }
  80% { transform:translateY(-4%); }
  100%{ transform:translateY(0); opacity:1; }
}
@keyframes symbol-explode-out {
  0%  { transform:scale(1); opacity:1; filter:brightness(1); }
  30% { transform:scale(1.4); filter:brightness(2.5) drop-shadow(0 0 16px gold); }
  100%{ transform:scale(.1) rotate(180deg); opacity:0; filter:brightness(0); }
}
.symbol-cascade-in  { animation:symbol-fall-in     .45s cubic-bezier(0.34,1.56,0.64,1) both; }
.symbol-cascade-out { animation:symbol-explode-out  .35s ease-in both; }

@keyframes sparkle-twinkle {
  0%,100%{ opacity:0; transform:scale(.3) rotate(0deg); }
  50%    { opacity:1; transform:scale(1.2) rotate(90deg); }
}
.slot-ambient-sparkle {
  position:absolute; border-radius:50%; pointer-events:none;
  animation:sparkle-twinkle var(--dur,3s) ease-in-out infinite; z-index:5;
}

@keyframes coin-float {
  0%  { transform:translateY(0) rotate(0deg); opacity:0; }
  8%  { opacity:.8; }
  92% { opacity:.7; }
  100%{ transform:translateY(-110vh) rotate(540deg); opacity:0; }
}
.floating-coin-particle { position:absolute; pointer-events:none; animation:coin-float var(--dur,4s) ease-out forwards; }

@keyframes reel-win-entrance {
  0%  { opacity:.6; transform:scale(.92); }
  60% { opacity:1; transform:scale(1.06); }
  100%{ opacity:1; transform:scale(1); }
}
.reel-win-entrance { animation:reel-win-entrance .4s cubic-bezier(0.34,1.56,0.64,1) both; }

/* ─── slot-layout-fix.css (6/6) ─── */
/* ============================================================
   INDUSTRY STANDARD SLOT LAYOUT
   Fullscreen takeover, centered reels, minimal chrome
   Inspired by Pragmatic Play, NetEnt, Play'n GO
   ============================================================ */

/* --- FULLSCREEN MODAL TAKEOVER --- */
#slotModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  overflow: hidden !important;
  background: #000 !important;
}

#slotModal .modal-content.slot-modal-fullscreen {
  display: flex !important;
  flex-direction: column !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  background: #0a0a12 !important;
}

/* --- HIDE ALL CLUTTER ---
   Whitelist approach: hide EVERYTHING, then show only essentials.
   Essentials: slot-bg-canvas, slot-top-bar, slot-reel-area,
              slot-bottom-bar, slot-ambient-sparkle, provider-chrome-frame,
              big-win-celebration, free-spins-overlay.active
   ------------------------------------------------------------ */
#slotModal .modal-content > .session-stats-bar,
#slotModal .modal-content > .session-summary,
#slotModal .modal-content > .quick-stats-panel,
#slotModal .modal-content > .cashout-hint,
#slotModal .modal-content > .spin-rec,
#slotModal .modal-content > .net-pnl,
#slotModal .modal-content > .session-milestone,
#slotModal .modal-content > .session-rtp-display,
#slotModal .modal-content > .session-rating,
#slotModal .modal-content > .session-clock,
#slotModal .modal-content > .mega-win-badge,
#slotModal .modal-content > .last-spin-result,
#slotModal .modal-content > .game-rating-widget,
#slotModal .modal-content > .kb-hints,
#slotModal .modal-content > .bonus-mode-badge,
#slotModal .modal-content > .provider-badge,
#slotModal .modal-content > .bet-preset-container,
#slotModal .modal-content > .turbo-spin-btn,
#slotModal .modal-content > .paytable-btn,
#slotModal .modal-content > .responsible-gambling-controls,
#slotModal .modal-content > .jackpot-badge,
#slotModal .modal-content > .loyalty-badge,
#slotModal .modal-content > .referral-badge,
#slotModal .modal-content > .analytics-controls,
#slotModal .modal-content > .currency-badge,
#slotModal .modal-content > .big-wins-feed,
#slotModal .modal-content > .mult-graph-container,
#slotModal .modal-content > .game-search-bar,
#slotModal .modal-content > .slot-bonus-info,
#slotModal .modal-content > .session-timer-badge,
#slotModal .modal-content > .spin-budget-badge,
#slotModal .modal-content > .mini-jackpot-badge,
#slotModal .modal-content > .bet-ladder-badge,
#slotModal .modal-content > .sound-toggle-badge,
#slotModal .modal-content > .turbo-indicator,
#slotModal .modal-content > .autoplay-controls,
#slotModal .modal-content > .free-spins-overlay:not(.active),
#slotModal .modal-content > .keyboard-hint-badge,
#slotModal .modal-content > #messageDisplay {
  display: none !important;
}

/* --- COMPACT TOP BAR (game title + close) --- */
#slotModal .slot-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 16px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* In top bar: only show game title and close button */
#slotModal .slot-top-bar > *:not(.slot-game-title):not(.slot-provider-badge):not(.cashier-close):not(.slot-close-btn) {
  display: none !important;
}

#slotModal .slot-top-bar .slot-game-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}

#slotModal .slot-top-bar .slot-provider-badge {
  font-size: 11px !important;
  opacity: 0.5 !important;
  margin-left: 8px !important;
}

/* --- REEL AREA: CENTERED, FILLS AVAILABLE SPACE --- */
#slotModal .slot-reel-area {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 5 !important;
  padding: 8px 0 !important;
}

/* Reel grid should fit within the available space */
#slotModal .slot-reel-area .reel-grid,
#slotModal .slot-reel-area .reel-container {
  max-height: 100% !important;
  max-width: 85% !important;
  margin: 0 auto !important;
}

/* Individual reel cells - ensure consistent sizing */
#slotModal .reel-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

#slotModal .reel-cell img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  image-rendering: auto !important;
}

/* --- COMPACT BOTTOM BAR (bet + spin + balance) --- */
#slotModal .slot-bottom-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 20px !important;
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%) !important;
  backdrop-filter: blur(12px) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* --- SPIN BUTTON: Premium centered circle --- */
#slotModal .slot-spin-btn {
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  border: 3px solid rgba(255,255,255,0.15) !important;
  box-shadow: 0 0 20px rgba(255,215,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  z-index: 20 !important;
  margin-top: -14px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

#slotModal .slot-spin-btn:hover:not(:disabled) {
  transform: scale(1.08) !important;
  border-color: rgba(255,215,0,0.4) !important;
  box-shadow: 0 0 30px rgba(255,215,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

#slotModal .slot-spin-btn:active:not(:disabled) {
  transform: scale(0.95) !important;
}

/* --- BALANCE DISPLAY --- */
#slotModal .slot-balance-display,
#slotModal .balance-display {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #FFD700 !important;
  text-shadow: 0 0 8px rgba(255,215,0,0.3) !important;
}

/* --- BET CONTROLS: Inline with bottom bar --- */
#slotModal .bet-slider-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 100% !important;
}

/* --- CLOSE BUTTON: Top right corner --- */
#slotModal .cashier-close,
#slotModal .slot-close-btn {
  position: absolute !important;
  top: 4px !important;
  right: 8px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #fff !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 100 !important;
  transition: all 0.2s ease !important;
}

#slotModal .cashier-close:hover,
#slotModal .slot-close-btn:hover {
  background: rgba(255,60,60,0.3) !important;
  border-color: rgba(255,60,60,0.5) !important;
  transform: scale(1.1) !important;
}

/* --- PROVIDER CHROME: Subtle border only --- */
#slotModal .provider-chrome-frame {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  border-width: 2px !important;
  border-radius: 0 !important;
}

/* --- BACKGROUND CANVAS: Full bleed --- */
#slotModal .slot-bg-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* --- AMBIENT SPARKLES: Absolute positioned --- */
#slotModal .slot-ambient-sparkle {
  z-index: 1 !important;
  pointer-events: none !important;
}

/* --- WIN DISPLAY: Centered overlay --- */
#slotModal .last-win-preview {
  position: absolute !important;
  top: 50px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 50 !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #FFD700 !important;
  text-shadow: 0 0 20px rgba(255,215,0,0.6), 0 2px 4px rgba(0,0,0,0.8) !important;
  pointer-events: none !important;
}

/* --- JACKPOT DISPLAY: Subtle top center --- */
#slotModal .slot-jackpot-display {
  position: absolute !important;
  top: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 15 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #FFD700 !important;
  text-shadow: 0 0 10px rgba(255,215,0,0.4) !important;
  pointer-events: none !important;
}

/* --- RESPONSIVE: Portrait mode --- */
@media (max-aspect-ratio: 1/1) {
  #slotModal .slot-bottom-bar {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    flex-wrap: wrap !important;
  }
  #slotModal .slot-spin-btn {
    width: 68px !important;
    height: 68px !important;
  }
  #slotModal .slot-top-bar {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }
}

/* --- REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
  #slotModal *, #slotModal *::before, #slotModal *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}