/* Extracted from resources/views/frontend/game.blade.php on 2026-08-27.
   It was inlined on every game page: 26.6 KB x 12,182 pages, re-downloaded
   on every view because inline CSS cannot be cached. Byte-identical to the
   block it replaces, loaded at the same position, so rendering is unchanged. */

        /* === Layout Stability === */
        /* Section intros (used by similar games, casinos, provider hub) */
        .sgp-section-intro { text-align: center; margin-bottom: 28px; }
        .sgp-section-kicker { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #00d4ff; margin-bottom: 8px; }
        .sgp-section-title { font-family: 'Montserrat', sans-serif; font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 800; color: #f1f5f9; margin: 0 0 8px; }
        .sgp-section-copy { font-size: 0.9rem; color: #64748b; max-width: 600px; margin: 0 auto; line-height: 1.6; }

        html { scrollbar-gutter: stable; overflow-y: scroll; }
        /* 2026-04-13: clip (not hidden) so body does NOT become a scroll
           container on iOS Safari. "hidden" combined with the page being
           scrollable makes body the scroll container, which breaks
           position:fixed on the mobile bottom nav (it scrolls with content
           instead of pinning to viewport). "clip" hides horizontal overflow
           without creating a scroll container. */
        body.page-family-slot-single,
        body.route-frontend-game { overflow-x: clip !important; }

        
        /* Dark page background */
        body { background: #060d17 !important; }
        .sgp-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 500px 250px at 50% 30%, rgba(0,212,255,0.04) 0%, transparent 70%),
                radial-gradient(ellipse 300px 200px at 70% 60%, rgba(212,175,55,0.03) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }
        /* Hide bottom legal bar - launcher handle replaces it */
        #mobile-demo-modal > div[style*="bottom:0"][style*="height:20px"] { display:none !important; }
/* Landscape mobile v2: force iframe to fill the visible viewport
           exactly, bypassing any parent container height quirks. Uses dvh
           units and position:fixed so the iframe ignores its parent's size.
           JS fallback also sets height explicitly on orientationchange/resize
           for older browsers that do not support dvh. Widened max-height to
           950px so iPhone Pro Max landscape (h=430) and small tablets match. */
        @media (orientation: landscape) and (max-height: 950px) {
            #mobile-demo-modal {
                padding: 0 !important;
            }
            #mobile-demo-modal #demo-offer-bar {
                display: none !important;
            }
            #mobile-demo-modal #mobile-demo-iframe {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                height: 100dvh !important;
                max-height: 100vh !important;
                max-height: 100dvh !important;
                margin: 0 !important;
                border: none !important;
                z-index: 2147483646 !important;
            }
            #mobile-demo-modal #mobile-demo-close-btn {
                position: fixed !important;
                top: 8px !important;
                right: 8px !important;
                left: auto !important;
                width: 42px !important;
                height: 42px !important;
                min-width: 42px !important;
                min-height: 42px !important;
                border-radius: 50% !important;
                background: rgba(0,0,0,0.78) !important;
                border: 1px solid rgba(255,255,255,0.35) !important;
                border-left: 1px solid rgba(255,255,255,0.35) !important;
                color: #fff !important;
                font-size: 18px !important;
                z-index: 2147483648 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
            }
            #mobile-demo-modal .demo-like-btn {
                position: fixed !important;
                top: 8px !important;
                right: 58px !important;
                left: auto !important;
                z-index: 2147483648 !important;
                background: rgba(0,0,0,0.78) !important;
                border: 1px solid rgba(255,255,255,0.35) !important;
                border-radius: 50% !important;
                width: 42px !important;
                height: 42px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }
            /* Hide the bottom 18+ legal strip and launcher drawer in landscape */
            #mobile-demo-modal > div[style*="bottom:0"][style*="height:20px"] { display: none !important; }
            #mobile-demo-modal #launcherDrawer { display: none !important; }
        }
        /* === Game Page Ocean Premium Theme === */
        #single-game-section { margin: 0 !important; padding: 0 !important; background: #060d17 !important; position: relative; }
        .sgp-hero {
            position: relative;
            background: transparent;
            overflow: hidden;
            padding: 8px 16px 20px;
            text-align: center;
            margin-top: 0;
        }
        /* hero ::before handled above */
        .sgp-hero > * { position: relative; z-index: 1; }
        .sgp-bubble {
            position: absolute; border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), rgba(0,212,255,0.08));
            animation: sgp-float 9s ease-in infinite; opacity: 0; z-index: 0;
        }
        .sgp-bubble:nth-child(1) { width: 16px; height: 16px; left: 10%; animation-delay: 0s; }
        .sgp-bubble:nth-child(2) { width: 12px; height: 12px; left: 25%; animation-delay: 2s; }
        .sgp-bubble:nth-child(3) { width: 20px; height: 20px; left: 50%; animation-delay: 4s; }
        .sgp-bubble:nth-child(4) { width: 14px; height: 14px; left: 75%; animation-delay: 1.5s; }
        .sgp-bubble:nth-child(5) { width: 18px; height: 18px; left: 90%; animation-delay: 3s; }
        @keyframes sgp-float {
            0%   { transform: translateY(100vh) scale(0.5); opacity: 0; }
            10%  { opacity: 0.4; }
            90%  { opacity: 0.4; }
            100% { transform: translateY(-80px) scale(1); opacity: 0; }
        }
        .sgp-hero-logo-wrap {
            display: block;
            background: rgba(0,0,0,0.4);
            border-radius: 16px;
            padding: 12px 16px;
            margin: 0 auto 14px;
            border: 1px solid rgba(255,255,255,0.06);
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
            width: fit-content;
            max-width: 432px;
        }
        .sgp-hero-logo {
            width: 100%; max-width: 400px; height: auto; max-height: 220px;
            object-fit: contain; border-radius: 8px; display: block;
            margin: 0 auto;
            filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
            transition: filter 0.3s ease;
        }
        .sgp-hero-logo:hover { filter: drop-shadow(0 0 32px rgba(0,212,255,0.35)); }
        .sgp-kicker {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 6px 16px; border-radius: 999px;
            background: rgba(0, 212, 255, 0.08); border: 1px solid rgba(0, 212, 255, 0.2);
            color: #00d4ff; font-size: 0.8rem; font-weight: 600;
            letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px;
        }
        .sgp-hero h1 {
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800;
            line-height: 1.1; color: #f1f5f9; margin: 0 auto 8px; max-width: 14ch;
        }
        /* sgp-breadcrumb: inline styles only */
        .sgp-meta-row {
            display: flex; flex-wrap: wrap; align-items: center;
            justify-content: center; gap: 8px; margin: 12px auto 8px;
        }
        .sgp-meta-chip {
            display: inline-flex; align-items: center; padding: 7px 14px;
            border-radius: 999px; background: rgba(13, 27, 42, 0.7);
            border: 1px solid rgba(0, 212, 255, 0.15); backdrop-filter: blur(6px);
            color: #cbd5e1; font-size: 0.85rem; font-weight: 500;
            transition: border-color 0.2s, transform 0.2s; white-space: nowrap;
        }
        .sgp-meta-chip:hover { border-color: rgba(0, 212, 255, 0.35); transform: translateY(-1px); }
        .sgp-meta-chip strong { color: #e2e8f0; margin-left: 4px; }
        /* Star rating */
        .star-rating-widget { min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0; }
        .star-rating-display { display: flex; align-items: center; gap: 8px; }
        .star-rating-stars { display: inline-flex; gap: 2px; }
        .star-icon { cursor: pointer; transition: transform 0.15s; }
        .star-icon svg { fill: #334155; stroke: #475569; stroke-width: 1; transition: fill 0.2s, stroke 0.2s; }
        .star-icon.filled svg, .star-icon.hovered svg { fill: #ffd166; stroke: #ffd166; }
        .star-icon.pop { animation: sgp-pop 0.3s ease; }
        @keyframes sgp-pop { 0%{transform:scale(1)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }
        .star-icon:hover { transform: scale(1.15); }
        .star-rating-text { font-size: 0.9rem; color: #94a3b8; }
        .star-rating-text strong { color: #ffd166; }
        .star-rating-count { color: #64748b; font-size: 0.8rem; }
        .star-rating-cta { color: #00d4ff; font-size: 0.85rem; cursor: pointer; }
        .star-rating-thanks { color: #4CAF50; font-size: 0.9rem; display: flex; align-items: center; gap: 4px; }
        /* Hero actions */
        .sgp-hero-actions {
            display: flex; flex-wrap: wrap; align-items: center;
            justify-content: center; gap: 10px; margin-top: 16px;
        }
        .sgp-cta-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            padding: 12px 24px; border-radius: 999px; font-size: 0.9rem;
            font-weight: 600; text-decoration: none; transition: all 0.25s ease;
            white-space: nowrap; min-height: 46px; cursor: pointer;
            background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(0,150,200,0.1));
            border: 1.5px solid rgba(0,212,255,0.35); color: #00d4ff;
        }
        .sgp-cta-btn:hover {
            background: linear-gradient(135deg, rgba(0,212,255,0.25), rgba(0,150,200,0.15));
            border-color: rgba(0,212,255,0.55); transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,212,255,0.15); color: #38bdf8;
        }
        /* Mobile tap-to-play */
        .mobile-tap-play { margin: 16px auto 0; max-width: 400px; }
        .mobile-demo-play-btn {
            display: flex; align-items: center; gap: 14px; width: 100%;
            padding: 14px 20px; border-radius: 16px;
            background: linear-gradient(135deg, rgba(0,212,255,0.12), rgba(0,150,200,0.08));
            border: 1.5px solid rgba(0,212,255,0.3); color: #fff;
            cursor: pointer; transition: all 0.25s; text-align: left;
        }
        .mobile-demo-play-btn:hover, .mobile-demo-play-btn:active {
            background: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(0,150,200,0.12));
            border-color: rgba(0,212,255,0.5); transform: translateY(-1px);
        }
        .mobile-demo-play-btn-icon {
            display: flex; align-items: center; justify-content: center;
            width: 44px; height: 44px; border-radius: 50%;
            background: rgba(0,212,255,0.15); color: #00d4ff; font-size: 18px; flex-shrink: 0;
        }
        .mobile-demo-play-btn-text { display: flex; flex-direction: column; }
        .mobile-demo-play-btn-main { font-size: 1rem; font-weight: 700; color: #f1f5f9; }
        .mobile-demo-play-btn-sub { font-size: 0.75rem; color: #64748b; margin-top: 2px; }
        /* Desktop 1200+ */
                /* FIX: Force consistent container width across all scroll sections */
        body.page-family-slot-single .container,
        body.route-frontend-game .container,
        body.page-family-slot-single .container-fluid,
        body.route-frontend-game .container-fluid {
            max-width: 1400px !important;
            width: 100% !important;
            margin-left: auto !important;
            margin-right: auto !important;
            padding-left: 15px !important;
            padding-right: 15px !important;
            box-sizing: border-box !important;
        }
        @media (max-width: 767px) {
            body.page-family-slot-single .container,
            body.route-frontend-game .container {
                max-width: 100% !important;
                padding-left: 12px !important;
                padding-right: 12px !important;
            }
        }

        @media (min-width: 1200px) {
            .sgp-hero { padding: 56px 32px 40px; }
            body.page-family-slot-single .single-game-content > .container,
            body.route-frontend-game .single-game-content > .container {
                width: 100% !important; max-width: 1400px !important;
                padding-left: 18px !important; padding-right: 18px !important; box-sizing: border-box !important;
            }

        }
        /* Mobile 767 */
        @media (max-width: 767px) {
            .sgp-hero { padding: 8px 14px 16px; }
            .sgp-hero-logo { max-height: 200px; border-radius: 0; margin-bottom: 10px; }
            .sgp-hero h1 { font-size: clamp(1.6rem, 7vw, 2.5rem); max-width: 13ch; }
            .sgp-kicker { font-size: 0.75rem; padding: 5px 12px; }
            .sgp-meta-chip { width: calc(50% - 4px); justify-content: center; text-align: center; }
            .sgp-hero-actions { width: 100%; }
            .sgp-cta-btn { width: 100%; justify-content: center; }
            body.page-family-slot-single .single-game-content > .container,
            body.route-frontend-game .single-game-content > .container {
                width: min(100% - 14px, 760px) !important; max-width: 760px !important;
                padding-left: 0 !important; padding-right: 0 !important;
            }
        }
        @media (max-width: 420px) {
            .sgp-meta-chip { width: 100%; }
            .sgp-hero { padding: 20px 10px 18px; }
        }
        /* Like buttons */
        .demo-like-btn {
            position: absolute; top: 12px; right: 12px; z-index: 10;
            width: 44px; height: 44px; border-radius: 50%;
            background: rgba(0,0,0,0.6); border: 2px solid rgba(255,255,255,0.25);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; color: rgba(255,255,255,0.85);
            transition: all 0.2s; backdrop-filter: blur(4px);
            -webkit-tap-highlight-color: transparent;
        }
        .demo-like-btn:hover { background: rgba(0,0,0,0.8); color: #ff6b8a; transform: scale(1.1); border-color: rgba(255,107,138,0.4); }
        .demo-like-btn.favorited { color: #ff4d6a; background: rgba(0,0,0,0.7); border-color: rgba(255,77,106,0.5); }
        .demo-like-btn.favorited svg { fill: #ff4d6a; }
        .mobile-demo-like { position: absolute; top: 8px; right: 52px; z-index: 10; width: 38px; height: 38px; }
        .game-like-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 7px;
            padding: 10px 20px; border-radius: 50px;
            background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.15);
            color: rgba(255,255,255,0.8); font-size: 14px; font-weight: 600; cursor: pointer;
            transition: all 0.25s ease; letter-spacing: 0.2px; line-height: 1;
            vertical-align: middle; min-height: 46px; white-space: nowrap;
        }
        .game-like-btn:hover { background: rgba(255,77,106,0.15); border-color: rgba(255,77,106,0.4); color: #ff6b8a; transform: translateY(-1px); }
        .game-like-btn.favorited { background: rgba(255,77,106,0.2) !important; border-color: #ff4d6a !important; color: #ff4d6a !important; }
        .game-like-btn.favorited svg { fill: #ff4d6a; }
        .game-like-btn svg { flex-shrink: 0; }
        @media (max-width: 768px) {
            .game-like-btn { padding: 8px 16px; font-size: 14px; width: 100%; justify-content: center; min-height: 44px; }
        }
        /* Landscape */
        @media (orientation: landscape) and (max-height: 500px) {
            /* game-iframe-wrapper max-height: inline styles only */
            /* game-frame min-height: inline styles only */
            .sgp-hero { padding: 10px 14px !important; }
            .sgp-hero h1 { font-size: 1.15rem !important; margin: 0 !important; }
            .sgp-kicker { display: none !important; }
            /* sgp-breadcrumb mobile: inline */
            .sgp-meta-row { gap: 6px !important; padding: 6px 0 !important; }
        }
        @media (orientation: landscape) and (max-height: 400px) {
            /* game-frame min-height 240: inline styles only */
            .sgp-hero h1 { font-size: 1rem !important; }
        }
        /* CLS Prevention */
        /* game-iframe-wrapper: inline styles only */
        /* game-iframe-container: inline styles only */
        /* game-frame: inline styles only */
        .mobile-demo-card { aspect-ratio: 4 / 3; min-height: 250px; contain: layout style paint; background: transparent; }
        .mobile-demo-card-visual { aspect-ratio: 16 / 10; min-height: 180px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; background: transparent; }
        .mobile-demo-card-logo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
        .play-overlay-logo { width: 140px; height: 140px; object-fit: contain; }
        .fallback-game-logo { width: 200px; height: 200px; object-fit: contain; }
        .sidebar-casino-logo { width: 120px; height: 60px; object-fit: contain; }
        .similar-games .ocean-game-grid { min-height: 280px; contain: layout style paint; overflow: hidden; }
        .similar-games { contain: layout paint; max-width: 100%; overflow: hidden; }
        .similar-games, .similar-games * { max-width: 100%; box-sizing: border-box; }
        /* Disable transform-on-hover in similar-games — causes layout recalculation + width jump */
        .similar-games .ogc { transition: border-color 0.2s, box-shadow 0.2s; }
        .similar-games .ogc:hover { transform: none !important; box-shadow: 0 4px 20px rgba(0,212,255,0.2); border-color: rgba(0,212,255,0.4); }
        .similar-games .ogc-link { transition: none; }
        .similar-games .ogc-img { transition: none; transform: none !important; }
        .similar-games .ogc-overlay { transition: opacity 0.15s; }
        
        .popular_casino_row { min-height: 100px; }
        .single-slot-hero-meta { min-height: 44px; }
        .slot-context-nav { min-height: 48px; }
        .faq-item { contain: layout style; }
        /* Context nav */
        .sgp-context-nav {
            display: flex; align-items: center; gap: 12px; padding: 16px 0;
            margin: 0 auto; max-width: 1480px; overflow-x: auto; scrollbar-width: none;
        }
        .sgp-context-nav::-webkit-scrollbar { display: none; }
        .sgp-context-nav-label {
            font-size: 0.8rem; color: #ffffff; font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; flex-shrink: 0;
        }
        .sgp-context-chips { display: flex; gap: 8px; flex-wrap: nowrap; }
        .sgp-context-chip {
            display: inline-flex; align-items: center; padding: 6px 14px;
            border-radius: 999px; background: rgba(13, 27, 42, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.08); color: #94a3b8;
            font-size: 0.8rem; font-weight: 500; text-decoration: none;
            white-space: nowrap; transition: all 0.25s ease;
        }
        .sgp-context-chip:hover { background: rgba(0, 212, 255, 0.1); border-color: rgba(0, 212, 255, 0.3); color: #00d4ff; }
        /* Casino cards */
        .sidebar-casino-card {
            background: rgba(13, 27, 42, 0.7); border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 16px; padding: 24px; text-align: center;
            transition: border-color 0.3s, transform 0.2s;
        }
        .sidebar-casino-card:hover { border-color: rgba(0, 212, 255, 0.2); transform: translateY(-2px); }
        .sidebar-casino-header { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #ffd166; margin-bottom: 12px; }
        .sidebar-casino-name { font-size: 1rem; font-weight: 700; color: #f1f5f9; margin: 10px 0 6px; }
        .sidebar-casino-bonus { font-size: 0.85rem; color: #00d4ff; margin-bottom: 14px; }
        .sidebar-casino-cta {
            display: inline-flex; align-items: center; justify-content: center;
            padding: 10px 28px; border-radius: 999px;
            background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(0,150,200,0.1));
            border: 1.5px solid rgba(0,212,255,0.35); color: #00d4ff;
            font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: all 0.25s;
        }
        .sidebar-casino-cta:hover {
            background: linear-gradient(135deg, rgba(0,212,255,0.25), rgba(0,150,200,0.15));
            border-color: rgba(0,212,255,0.55); transform: translateY(-1px); color: #38bdf8;
        }
        .sidebar-casino-legal { text-align: center; font-size: 0.75rem; color: #475569; margin-top: 16px; }
        /* Demo overlay */
        .game-play-overlay {
            position: absolute; inset: 0; z-index: 5;
            background: linear-gradient(180deg, rgba(10,22,40,0.95), rgba(6,13,23,0.98));
            display: flex; align-items: center; justify-content: center; cursor: pointer;
        }
        .play-overlay-content { text-align: center; padding: 24px; }
        .play-overlay-badge {
            display: inline-block; padding: 6px 16px; border-radius: 999px;
            background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.25);
            color: #00d4ff; font-size: 0.8rem; font-weight: 600;
            letter-spacing: 0.06em; margin-bottom: 16px;
        }
        .play-overlay-title { color: #f1f5f9; font-size: 1.4rem; font-weight: 700; margin: 12px 0 4px; }
        .play-overlay-provider { color: #64748b; font-size: 0.9rem; margin-bottom: 16px; }
        .play-overlay-btn {
            display: inline-flex; align-items: center; gap: 10px;
            padding: 14px 32px; border-radius: 999px;
            background: linear-gradient(135deg, #00d4ff, #0099cc);
            color: #060d17; font-size: 1rem; font-weight: 700;
            border: none; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 4px 20px rgba(0,212,255,0.3);
        }
        .play-overlay-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 30px rgba(0,212,255,0.4); }
        .play-overlay-note { color: #64748b; font-size: 0.8rem; margin-top: 14px; }
        .play-overlay-18plus { color: #475569; font-size: 0.7rem; margin-top: 8px; }
        .iframe-loading {
            position: absolute; inset: 0; z-index: 4;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            background: #060d17;
        }
        .loading-spinner {
            width: 44px; height: 44px; border: 3px solid rgba(0,212,255,0.15);
            border-top-color: #00d4ff; border-radius: 50%; animation: spin 0.8s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .game-iframe-fallback {
            display: none; position: absolute; inset: 0; z-index: 3;
            background: linear-gradient(180deg, #0a1628, #060d17); overflow-y: auto;
        }
        .fallback-content { text-align: center; padding: 40px 24px; max-width: 600px; margin: 0 auto; }
        .fallback-icon { font-size: 2.5rem; color: #ffd166; margin: 16px 0; }
        .fallback-title { color: #f1f5f9; font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; }
        .fallback-subtitle { color: #00d4ff; font-size: 1rem; margin-bottom: 16px; }
        .fallback-message { color: #94a3b8; font-size: 0.9rem; line-height: 1.6; margin-bottom: 20px; }
        .fallback-game-info h3 { color: #e2e8f0; font-size: 1rem; margin-bottom: 12px; }
        .fallback-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 20px; }
        .fallback-stat { background: rgba(13,27,42,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 12px; }
        .fallback-stat-label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.08em; }
        .fallback-stat-value { font-size: 0.95rem; color: #e2e8f0; font-weight: 600; margin-top: 4px; }
        .fallback-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 20px 0; }
        .fallback-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
        .fallback-btn { padding: 10px 20px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.25s; border: none; }
        .fallback-btn-primary { background: linear-gradient(135deg, #00d4ff, #0099cc); color: #060d17; }
        .fallback-btn-secondary { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: #94a3b8; }
        .fallback-btn:hover { transform: translateY(-1px); }
        .fallback-note { color: #475569; font-size: 0.75rem; }
        .mobile-demo-card-inner { display: flex; flex-direction: column; height: 100%; }
        .mobile-demo-card-play-icon {
            position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
            background: transparent;
        }
        .mobile-demo-card-play-icon i {
            width: 56px; height: 56px; border-radius: 50%;
            background: rgba(0,212,255,0.2); border: 2px solid rgba(0,212,255,0.4);
            display: flex; align-items: center; justify-content: center;
            color: #00d4ff; font-size: 20px;
        }
        .mobile-demo-card-info { padding: 16px; }
        .mobile-demo-card-badge {
            display: inline-block; padding: 4px 10px; border-radius: 6px;
            background: rgba(0,212,255,0.1); color: #00d4ff; font-size: 0.75rem; font-weight: 600; margin-bottom: 8px;
        }
        .mobile-demo-card-title { color: #f1f5f9; font-size: 1.1rem; font-weight: 700; margin: 0 0 4px; }
        .mobile-demo-card-provider { color: #64748b; font-size: 0.85rem; margin: 0 0 12px; }
        .mobile-demo-18plus { color: #475569; font-size: 0.7rem; margin-top: 10px; text-align: center; }