/* Lobby Skeleton - CSS-only loading screen behind blur overlay
       Mirrors Lobby.css grid at each breakpoint.
       Feature-toggled via LOBBY_SKELETON_ENABLED + cookie override. */

    #lobby-skeleton {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1;
        background-color: #000;
        overflow-y: auto;
        overflow-x: hidden;
    }

    #lobby-skeleton.visible { display: block; animation: skel-fade-in 400ms ease-out; }

    @keyframes skel-fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

    /* Single blur + tint layer. Never changes regardless of what overlay is on top. */
    #lobby-skeleton-blur {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 2;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    #lobby-skeleton.visible ~ #lobby-skeleton-blur { display: block; }

    /* Make overlays on top transparent so blur layer is the only tint/blur source */
    #lobby-skeleton.visible ~ #loginView { position: relative; z-index: 3; background: transparent !important; }
    #lobby-skeleton.visible ~ #loginView .loading-view { animation: skel-fade-in 400ms ease-out !important; }

    /* When skeleton is active, strip tint/blur from all overlays so our blur layer is the only source */
    #lobby-skeleton.visible ~ #geo-consent-modal {
        background: transparent !important;
    }
    #lobby-skeleton.visible ~ .gc-html5-ui-modal {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: transparent !important;
    }
    #lobby-skeleton.visible ~ #pr-geo-modal .pr-geo-modal-overlay,
    #lobby-skeleton.visible ~ .pr-geo-modal-overlay {
        background-color: transparent !important;
    }

    /* Fade-out transition when real lobby mounts */
    #lobby-skeleton-blur.fade-out {
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        transition: opacity 800ms ease-in-out,
                    backdrop-filter 800ms ease-in-out,
                    -webkit-backdrop-filter 800ms ease-in-out;
    }
    #lobby-skeleton.fade-out {
        opacity: 0;
        transition: opacity 800ms ease-in-out;
    }

    /* Shared helpers */
    .skel-inner { display: flex; flex-direction: column; min-height: 100%; }
    .skel-img { width: 100%; height: 100%; object-fit: cover; }

    /* --- Toolbar --- */
    .skel-toolbar {
        display: flex; align-items: center; justify-content: space-between;
        height: 48px; padding: 0 12px; background: #111; flex-shrink: 0;
    }
    .skel-toolbar-left { display: flex; align-items: center; gap: 6px; }
    .skel-toolbar-right { display: flex; align-items: center; gap: 8px; }
    .skel-toolbar-bal { display: none; }

    .skel-ic-poker { width: 32px; height: 32px; border-radius: 50%; background: #cc0000; }
    .skel-ic-casino { width: 56px; height: 24px; border-radius: 4px; background: #1a6b3c; }
    .skel-ic-star { width: 28px; height: 28px; border-radius: 4px; background: #d4a017; }
    .skel-ic-paw { width: 28px; height: 28px; border-radius: 4px; background: #2d5a1e; }
    .skel-ic-kb { width: 28px; height: 28px; border-radius: 4px; background: #333; }
    .skel-pill { height: 28px; border-radius: 14px; background: linear-gradient(90deg, #1a1a1a, #3a3520, #1a1a1a); border: 1px solid #4a4020; }
    .skel-pill-sc { width: 160px; }
    .skel-pill-gc { width: 100px; }
    .skel-ic-refresh { width: 28px; height: 28px; border-radius: 50%; background: #444; }
    .skel-btn-coins { width: 90px; height: 32px; border-radius: 4px; background: linear-gradient(180deg, #d4a017, #b8860b); }

    /* --- Desktop Grid (>767px) - matches Lobby.css .main-grid --- */
    .skel-grid {
        display: grid; grid-gap: 8px; padding: 0 8px;
        max-width: 1174px; width: 100%; margin: 0 auto;
        grid-template:
            'icon    menu     menu     banners' 180px
            'table   table    table    banners' auto
            'table   table    table    note'    auto
            'footer  footer   footer   footer'  auto
            / 140px  1fr      1fr      1fr;
    }

    /* Grid areas */
    .skel-g-icon { grid-area: icon; background: #111; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
    .skel-logo { width: 100px; height: 50px; background: #fff; border-radius: 4px; opacity: 0.85; }

    .skel-g-menu { grid-area: menu; display: flex; flex-direction: column; }
    .skel-tabs { display: flex; align-items: center; height: 44px; gap: 4px; background: rgb(51, 51, 51); border-radius: 5px 5px 0 0; padding: 0 8px; }
    .skel-tab { height: 28px; border-radius: 4px; background: #2a2a2a; flex: 1; }
    .skel-tab-active { height: 28px; border-radius: 4px; background: #cc3300; flex: 1; }
    .skel-menu-banner { flex: 1; border-radius: 0 0 5px 5px; overflow: hidden; background: #0a1628; }

    .skel-g-table { grid-area: table; display: flex; flex-direction: column; gap: 8px; }
    .skel-info-bar { display: flex; gap: 8px; height: 40px; flex-shrink: 0; }
    .skel-info-panel { flex: 1; background: #222; border-radius: 4px; border: 1px solid #333; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; }
    .skel-info-text { width: 90px; height: 12px; background: #fff; border-radius: 2px; opacity: 0.6; }
    .skel-info-chevron { width: 12px; height: 12px; background: #666; border-radius: 2px; }

    .skel-section-hdr { height: 28px; display: flex; align-items: center; }
    .skel-section-lbl { width: 140px; height: 14px; background: #fff; border-radius: 2px; opacity: 0.5; }

    .skel-cards { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; padding: 16px; }
    .skel-card {
        max-width: 150px; width: 100%; height: 170px; border-radius: 8px;
        background: linear-gradient(180deg, #1a2a2e 0%, #0d1e20 40%, #121e20 100%);
        border: 1px solid #629ABA;
        display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; gap: 4px;
    }
    .skel-c-sm { width: 50%; height: 8px; background: #fff; border-radius: 2px; opacity: 0.4; }
    .skel-c-lg { width: 65%; height: 12px; background: #d4a017; border-radius: 2px; opacity: 0.4; }
    .skel-c-xs { width: 55%; height: 7px; background: #888; border-radius: 2px; opacity: 0.25; }
    .skel-c-btn { width: 100%; height: 28px; border-radius: 4px; background: linear-gradient(180deg, #ed1b25, #c0161e); animation: skel-pulse 2s ease-in-out infinite; }

    .skel-history { display: flex; flex-direction: column; gap: 6px; }
    .skel-hist-title { width: 200px; height: 14px; background: #fff; border-radius: 2px; opacity: 0.4; }
    .skel-hist-grid { display: flex; flex-wrap: wrap; gap: 8px; }
    .skel-hist-col { flex: 1; min-width: 242px; background: #1e1e1e; border-radius: 4px; border: 1px solid #2a2a2a; padding: 10px; display: flex; flex-direction: column; gap: 5px; }
    .skel-h-buyin { width: 120px; height: 22px; background: linear-gradient(90deg, #37d0fd, #fff); border-radius: 2px; opacity: 0.3; }
    .skel-h-divider { width: 100%; height: 1px; background: #e6b800; opacity: 0.4; }
    .skel-h-label { width: 110px; height: 9px; background: #e6b800; border-radius: 2px; opacity: 0.5; }
    .skel-h-row { display: flex; justify-content: space-between; padding: 3px 0; }
    .skel-h-name { width: 80px; height: 8px; background: #888; border-radius: 2px; }
    .skel-h-amt { width: 50px; height: 8px; background: #fff; border-radius: 2px; opacity: 0.3; }
    .skel-h-date { width: 100px; height: 6px; background: #555; border-radius: 2px; margin-top: 2px; }

    .skel-g-banners { grid-area: banners; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
    .skel-promo { border-radius: 8px; overflow: hidden; background: #1a1a1a; flex-shrink: 0; }
    .skel-promo-lg { height: 170px; }
    .skel-promo-md { height: 100px; }
    .skel-promo-sm { height: 70px; }

    .skel-g-note { grid-area: note; background: #1e1e1e; border-radius: 4px; border: 1px solid #2a2a2a; padding: 8px; overflow: hidden; height: 180px; }
    .skel-note-title { width: 90px; height: 12px; background: #fff; border-radius: 2px; opacity: 0.45; margin-bottom: 6px; }
    .skel-note-line { width: 100%; height: 7px; background: #333; border-radius: 2px; margin-bottom: 3px; }

    .skel-footer { grid-area: footer; background: transparent; padding: 24px 12px; margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
    .skel-footer-top { display: flex; justify-content: space-between; gap: 16px; }
    .skel-footer-left { display: flex; flex-direction: column; gap: 6px; }
    .skel-footer-heading { width: 120px; height: 16px; background: #fff; border-radius: 2px; opacity: 0.7; }
    .skel-footer-helpline { width: 280px; height: 8px; background: #555; border-radius: 2px; }
    .skel-footer-helpline-link { width: 200px; height: 8px; background: #428BCA; border-radius: 2px; opacity: 0.5; }
    .skel-footer-right { display: flex; align-items: center; gap: 8px; }
    .skel-footer-mga { width: 180px; height: 36px; background: #333; border-radius: 4px; }
    .skel-footer-cert { width: 36px; height: 36px; background: #333; border-radius: 4px; }
    .skel-footer-bottom { margin-top: 40px; display: flex; flex-direction: column; gap: 4px; }
    .skel-footer-copy { width: 100%; height: 6px; background: #222; border-radius: 2px; }
    .skel-footer-copy-sm { width: 85%; height: 6px; background: #222; border-radius: 2px; }

    /* --- Mobile (<=768px): toolbar 2 rows, currency drops to own row --- */
    @media only screen and (max-width: 768px) {
        .skel-toolbar {
            height: auto; padding: 4px 8px;
            display: grid;
            grid-template: 'tl-left tl-right' 40px 'tl-bal tl-bal' 40px / auto 1fr;
            gap: 0 8px;
        }
        .skel-toolbar-left { grid-area: tl-left; }
        .skel-toolbar-right { grid-area: tl-right; justify-content: flex-end; }
        .skel-toolbar-bal { grid-area: tl-bal; display: flex !important; align-items: center; gap: 8px; }
        .skel-toolbar-right .skel-pill, .skel-toolbar-right .skel-ic-refresh { display: none; }
    }

    /* --- Tablet/Mobile (<=767px): sidebar promos become featured banners row --- */
    @media only screen and (max-width: 767px) {
        .skel-ic-casino, .skel-ic-paw, .skel-ic-kb { display: none; }
        .skel-pill-sc { width: 110px; }
        .skel-pill-gc { width: 80px; }
        .skel-btn-coins { width: 80px; }

        .skel-grid {
            width: 100%;
            grid-template:
                'icon    banners  banners  banners' 110px
                'menu    menu     menu     menu'    auto
                'table   table    table    table'   auto
                'footer  footer   footer   footer'  auto
                / 1fr    1fr      1fr      1fr;
        }

        .skel-g-banners { flex-direction: row; padding: 8px 0; }
        .skel-g-banners .skel-promo { flex: 1; height: auto; }
        .skel-g-banners .skel-promo-lg, .skel-g-banners .skel-promo-md, .skel-g-banners .skel-promo-sm { height: auto; }
        .skel-g-banners .skel-promo:nth-child(n+4) { display: none; }
        .skel-g-note { display: none !important; }
        .skel-logo { width: 70px; height: 35px; }
        .skel-card { height: 150px; }
        .skel-menu-banner { min-height: 90px; }
        .skel-history { display: none; }
        .skel-footer-top { flex-direction: column; }
        .skel-footer-right { margin-top: 16px; }
    }

    /* --- Small mobile (<=480px): compact banner row --- */
    @media only screen and (max-width: 480px) {
        .skel-grid {
            grid-template:
                'icon    banners  banners  banners' 60px
                'menu    menu     menu     menu'    auto
                'table   table    table    table'   auto
                'footer  footer   footer   footer'  auto
                / 1fr    1fr      1fr      1fr;
        }
        .skel-logo { width: 45px; height: 22px; }
        .skel-card { height: 130px; }
        .skel-g-banners .skel-promo:nth-child(n+3) { display: none; }
    }

    /* --- Very small mobile (<=450px): tab bar becomes icon cards --- */
    @media only screen and (max-width: 450px) {
        .skel-tabs { background: transparent; height: auto; padding: 4px; gap: 4px; justify-content: space-evenly; }
        .skel-tab, .skel-tab-active {
            height: 82px; border-radius: 8px; flex: 1;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
        }
        .skel-tab { background: #000; }
        .skel-tab-active { background: #8d0d13; }
        .skel-tab::before, .skel-tab-active::before {
            content: ''; width: 36px; height: 36px; background: #333; border-radius: 4px; display: block; margin-bottom: 4px;
        }
        .skel-tab-active::before { background: #a02020; }
    }

    /* --- Mobile landscape --- */
    @media only screen and (max-height: 500px) and (orientation: landscape) {
        .skel-toolbar { height: 40px; }
        .skel-grid {
            width: 100%;
            grid-template:
                'icon    banners  banners  banners' 80px
                'menu    menu     menu     menu'    auto
                'table   table    table    table'   auto
                'footer  footer   footer   footer'  auto
                / 100px  1fr      1fr      1fr;
        }
        .skel-g-banners .skel-promo:nth-child(n+3) { display: none; }
        .skel-g-note { display: none !important; }
        .skel-menu-banner { min-height: 60px; }
        .skel-card { height: 100px; }
        .skel-info-bar { display: none; }
        .skel-history { display: none; }
    }