/* ============================================
   KODEN — LOADING SCREEN
   ============================================ */

#koden-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #0F0F12;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#koden-loader.fade-out {
    opacity: 0;
    transform: scale(1.02);
    pointer-events: none;
}

/* Logo */
.loader-logo {
    font-family: sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: white;
    display: flex;
    align-items: center;
    gap: 4px;
}
.loader-logo-bar {
    width: 6px;
    height: 36px;
    background: #8b5cf6;
    border-radius: 3px;
    animation: loaderBarPulse 1.2s ease-in-out infinite;
}
@keyframes loaderBarPulse {
    0%, 100% { opacity: 1; transform: scaleY(1); }
    50%       { opacity: 0.4; transform: scaleY(0.6); }
}

/* Spinner ring */
.loader-ring {
    position: relative;
    width: 64px;
    height: 64px;
}
.loader-ring svg {
    width: 100%; height: 100%;
    animation: loaderSpin 1.4s linear infinite;
}
@keyframes loaderSpin {
    to { transform: rotate(360deg); }
}
.loader-ring-track {
    stroke: rgba(139,92,246,0.12);
}
.loader-ring-fill {
    stroke: #8b5cf6;
    stroke-linecap: round;
    stroke-dasharray: 150;
    stroke-dashoffset: 38;
    filter: drop-shadow(0 0 6px rgba(139,92,246,0.7));
}

/* Progress bar */
.loader-progress-wrap {
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.loader-bar-bg {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
}
.loader-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(139,92,246,0.6);
    animation: loaderFill 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes loaderFill {
    0%   { width: 0%; }
    30%  { width: 35%; }
    60%  { width: 65%; }
    85%  { width: 88%; }
    100% { width: 100%; }
}
.loader-status {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    font-family: monospace;
}

/* Scanline deco */
.loader-scanline {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 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;
    animation: scanMove 8s linear infinite;
}
@keyframes scanMove {
    from { background-position: 0 0; }
    to   { background-position: 0 100px; }
}


/* ============================================================================
   KODEN — RESPONSIVE ENGINE v5.0 (NATIVE MOBILE & TABLET ADAPTATION)
   Strictly scoped to <= 1024px & <= 768px. Desktop (>= 1025px) 100% untouched.
   ============================================================================ */

/* 0. BASELINE GUARDS (Strictly Desktop-Safe by Default) */
#koden-mobile-bottom-nav,
#mobile-games-drawer,
.koden-mob-only,
#section-games-pvp,
#lobby-token-room-view {
    display: none !important;
}

.mobile-tab-nav {
    display: none !important;
}


/* ============================================================================
   1. TABLET & NARROW VIEWPORTS (<= 1024px)
   ============================================================================ */
@media (max-width: 1024px) {
    html {
        -webkit-text-size-adjust: 100%;
        touch-action: manipulation;
        scroll-behavior: smooth;
    }

    /* Unlock full-page vertical scrolling on tablet & mobile */
    body {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 10px !important;
    }

    /* Top Navbar (excluding mobile bottom nav) */
    body > nav:not(#koden-mobile-bottom-nav) {
        padding: 0 14px !important;
        height: 58px !important;
        min-height: 58px !important;
    }

    body > nav:not(#koden-mobile-bottom-nav) button[onclick="toggleChangelog()"],
    body > nav:not(#koden-mobile-bottom-nav) a[href="historique.html"],
    body > nav:not(#koden-mobile-bottom-nav) #nav-admin-link-top,
    body > nav:not(#koden-mobile-bottom-nav) .w-px.h-5 {
        display: none !important;
    }

    /* Hide floating live-stats widget by default on <= 1024px so it doesn't cover game canvas */
    .gk-livestats,
    .gk-ls-reopen {
        display: none !important;
    }

    /* HOMEPAGE TABS ARCHITECTURE (<= 1024px) */
    .mobile-tab-nav {
        display: flex !important;
        width: 100%;
        background: #151821;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 4px;
        gap: 4px;
        margin-bottom: 4px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        position: sticky;
        top: 6px;
        z-index: 35;
    }

    .mobile-tab-btn {
        flex: 1;
        padding: 9px 4px;
        font-size: 10px;
        font-weight: 900;
        text-transform: uppercase;
        border-radius: 12px;
        color: #94a3b8;
        text-align: center;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        cursor: pointer;
        background: none;
        border: none;
        white-space: nowrap;
    }

    .mobile-tab-btn.active {
        background: linear-gradient(135deg, #00e701 0%, #00b801 100%);
        color: #051409;
        box-shadow: 0 0 14px rgba(0, 231, 1, 0.4);
    }

    /* Content Area stacking */
    body > div.flex-1.flex.overflow-hidden,
    body > div.flex-1.flex.gap-3,
    body > div.flex-1.flex.gap-4,
    body > div.flex-1.grid {
        flex-direction: column !important;
        overflow: visible !important;
        height: auto !important;
        gap: 12px !important;
    }

    /* Tab Display Logic via CSS (Lobby index.html) */
    body:not([data-tab]) #home-col-games,
    body[data-tab="games"] #home-col-games {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
    body:not([data-tab]) #home-col-stats-lead,
    body:not([data-tab]) #home-col-chat,
    body[data-tab="games"] #home-col-stats-lead,
    body[data-tab="games"] #home-col-chat {
        display: none !important;
    }

    /* Leaderboard tab */
    body[data-tab="leaderboard"] #home-col-stats-lead {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
    body[data-tab="leaderboard"] #home-panel-user,
    body[data-tab="leaderboard"] #home-col-games,
    body[data-tab="leaderboard"] #home-col-chat {
        display: none !important;
    }
    body[data-tab="leaderboard"] #home-panel-leaderboard {
        display: flex !important;
        width: 100% !important;
        min-height: 420px !important;
    }

    /* Stats VIP tab */
    body[data-tab="stats"] #home-col-stats-lead {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
    body[data-tab="stats"] #home-panel-leaderboard,
    body[data-tab="stats"] #home-col-games,
    body[data-tab="stats"] #home-col-chat {
        display: none !important;
    }
    body[data-tab="stats"] #home-panel-user {
        display: block !important;
        width: 100% !important;
    }

    /* Live Chat tab */
    body[data-tab="chat"] #home-col-chat {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100dvh - 150px) !important;
        min-height: 440px !important;
        overflow: hidden !important;
    }
    body[data-tab="chat"] #home-col-games,
    body[data-tab="chat"] #home-col-stats-lead {
        display: none !important;
    }

    /* Column Width Resets */
    div.w-\[23\%\], div.w-\[24\%\] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Games Grid on Tablet */
    .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4,
    .grid.grid-cols-2.sm\:grid-cols-2.lg\:grid-cols-4,
    .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)) !important;
        gap: 12px !important;
        padding: 2px !important;
    }

    /* GAME PAGES (<= 1024px): Stage First (order: 1), Controls Second (order: 2) */
    main:not(.auth-main) {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
        gap: 10px !important;
    }

    main > section {
        order: 1 !important;
        width: 100% !important;
        min-height: 290px !important;
        height: auto !important;
        padding: 16px 12px !important;
        border-radius: 22px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }

    main > aside {
        order: 2 !important;
        width: 100% !important;
        max-width: 680px !important;
        margin: 0 auto !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
        border-radius: 22px !important;
        padding: 14px !important;
    }

    /* Ensure Crash & Plinko canvas stages have explicit height on tablet */
    section:has(#crash-chart) {
        min-height: 310px !important;
        height: 320px !important;
    }
    section:has(#crash-chart) .gk-viewport {
        width: 100% !important;
        height: 250px !important;
        min-height: 240px !important;
    }
    section.gk-viewport:has(#plinko) {
        min-height: 340px !important;
    }
    div:has(> #plinko) {
        min-height: 300px !important;
        width: 100% !important;
    }
    #plinko {
        width: 100% !important;
        height: auto !important;
        max-height: 380px !important;
        object-fit: contain !important;
    }
}


/* ============================================================================
   2. SMARTPHONE VIEWPORT — NATIVE MOBILE APP EXPERIENCE (<= 768px)
   ============================================================================ */
@media (max-width: 768px) {
    body {
        background: #0d0f14 !important;
        padding: 10px 14px 86px 14px !important;
        gap: 12px !important;
    }

    @supports (padding: max(0px)) {
        body {
            padding-left: max(14px, env(safe-area-inset-left)) !important;
            padding-right: max(14px, env(safe-area-inset-right)) !important;
            padding-bottom: max(86px, calc(70px + env(safe-area-inset-bottom))) !important;
        }
    }

    /* Hide tablet tab bar on smartphone (replaced by sleek pill bar) */
    .mobile-tab-nav {
        display: none !important;
    }

    /* ── 2.1 Seamless Minimal Top Header (`| KODEN` + User Chip + Gold Balance Pill) ── */
    body > nav:not(#koden-mobile-bottom-nav) {
        height: 46px !important;
        min-height: 46px !important;
        padding: 0 2px !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin-bottom: 0 !important;
    }

    body > nav:not(#koden-mobile-bottom-nav) > div:first-child {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    body > nav:not(#koden-mobile-bottom-nav) > div:last-child {
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    /* Left Logo (`| KODEN`) */
    body > nav:not(#koden-mobile-bottom-nav) a[href="index.html"] {
        gap: 7px !important;
        flex-shrink: 0 !important;
    }
    body > nav:not(#koden-mobile-bottom-nav) a[href="index.html"] > div:first-child {
        width: 5px !important;
        height: 20px !important;
        background: #8b5cf6 !important;
        border-radius: 999px !important;
        box-shadow: 0 0 12px #8b5cf6 !important;
    }
    body > nav:not(#koden-mobile-bottom-nav) a[href="index.html"] > span {
        font-size: 19px !important;
        font-weight: 900 !important;
        font-style: italic !important;
        letter-spacing: -0.04em !important;
        color: #ffffff !important;
    }

    /* Top-Right Player Profile Button (Logo/Avatar Only, Clean & Modern) */
    #mob-header-user-chip {
        display: none !important;
    }

    body > nav:not(#koden-mobile-bottom-nav) div.relative:has(> button[onclick="toggleProfileCard()"]) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        margin-left: 2px !important;
    }

    body > nav:not(#koden-mobile-bottom-nav) button[onclick="toggleProfileCard()"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        cursor: pointer !important;
        outline: none !important;
    }

    body > nav:not(#koden-mobile-bottom-nav) button[onclick="toggleProfileCard()"] #user-pp-container {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
        background: #11141e !important;
        border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    }

    body > nav:not(#koden-mobile-bottom-nav) button[onclick="toggleProfileCard()"]:active #user-pp-container {
        transform: scale(0.92) !important;
        border-color: #8b5cf6 !important;
        box-shadow: 0 0 14px rgba(139, 92, 246, 0.5) !important;
    }

    /* Masquer le texte (pseudo/statut) et la flèche sur mobile pour un look épuré */
    body > nav:not(#koden-mobile-bottom-nav) button[onclick="toggleProfileCard()"] > div.flex.flex-col,
    body > nav:not(#koden-mobile-bottom-nav) button[onclick="toggleProfileCard()"] > span,
    body > nav:not(#koden-mobile-bottom-nav) button[onclick="toggleProfileCard()"] > svg {
        display: none !important;
    }

    /* Menu déroulant profil fixé et ajusté à l'écran sur mobile */
    body > nav:not(#koden-mobile-bottom-nav) #profile-card {
        position: fixed !important;
        top: 64px !important;
        right: 12px !important;
        left: auto !important;
        width: min(320px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        border-radius: 20px !important;
        z-index: 10000 !important;
        box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
    }

    /* Hide all secondary desktop buttons from top bar on smartphone */
    body > nav:not(#koden-mobile-bottom-nav) .koden-nav-btn,
    body > nav:not(#koden-mobile-bottom-nav) #daily-btn,
    body > nav:not(#koden-mobile-bottom-nav) div:has(> #daily-btn),
    body > nav:not(#koden-mobile-bottom-nav) #nav-vip-btn,
    body > nav:not(#koden-mobile-bottom-nav) #daily-timer,
    body > nav:not(#koden-mobile-bottom-nav) #music-toggle-btn,
    body > nav:not(#koden-mobile-bottom-nav) button[onclick="toggleChangelog()"],
    body > nav:not(#koden-mobile-bottom-nav) a[href="historique.html"],
    body > nav:not(#koden-mobile-bottom-nav) #nav-admin-link-top,
    body > nav:not(#koden-mobile-bottom-nav) .hidden.sm\:flex,
    body > nav:not(#koden-mobile-bottom-nav) .hidden.md\:flex,
    body > nav:not(#koden-mobile-bottom-nav) .w-px,
    body > nav:not(#koden-mobile-bottom-nav) #nav-balance + span {
        display: none !important;
    }

    /* Right Gold Balance Pill (PC Dark Gold Style) */
    body > nav:not(#koden-mobile-bottom-nav) div:has(> .balance-display) {
        background: #0e1017 !important;
        border: 1px solid rgba(245, 158, 11, 0.38) !important;
        border-radius: 9999px !important;
        padding: 6px 13px !important;
        gap: 6px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(251, 191, 36, 0.12) !important;
        flex-shrink: 0 !important;
    }
    body > nav:not(#koden-mobile-bottom-nav) div:has(> .balance-display) img {
        width: 15px !important;
        height: 15px !important;
        animation: none !important;
    }
    body > nav:not(#koden-mobile-bottom-nav) .balance-display {
        font-size: 12.5px !important;
        font-weight: 900 !important;
        color: #fbbf24 !important;
        letter-spacing: 0.02em !important;
    }

    /* ── 2.1b Horizontal Category Pill Bar (Lobby, Défis, Boutique, Profil) ── */
    #mob-lobby-pills,
    #mob-challenges-pills,
    #mob-shop-pills,
    #mob-profile-pills {
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        width: 100% !important;
        overflow-x: auto !important;
        padding: 2px 0 !important;
        margin: 0 !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    #mob-lobby-pills::-webkit-scrollbar,
    #mob-challenges-pills::-webkit-scrollbar,
    #mob-shop-pills::-webkit-scrollbar,
    #mob-profile-pills::-webkit-scrollbar {
        display: none !important;
    }

    .mob-pill-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8.5px 13px !important;
        border-radius: 9999px !important;
        background: #151821 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #94a3b8 !important;
        font-size: 9.5px !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        white-space: nowrap !important;
        flex: 1 0 auto !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .mob-pill-btn:active {
        transform: scale(0.95) !important;
    }
    .mob-pill-btn.active {
        background: #22c55e !important;
        border-color: #4ade80 !important;
        color: #04140a !important;
        box-shadow: 0 0 16px rgba(34, 197, 94, 0.4) !important;
    }

    /* ── 2.1c Featured Hero Banner (PC Dark Obsidian Palette + Subtle Glow) ── */
    #mob-featured-hero,
    #mob-challenges-featured,
    #mob-shop-featured {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 22px !important;
        padding: 18px 20px !important;
        background: radial-gradient(circle at 82% 50%, rgba(34, 197, 94, 0.22) 0%, transparent 62%), linear-gradient(135deg, #16261d 0%, #151821 55%, #0e1017 100%) !important;
        border: 1px solid rgba(34, 197, 94, 0.42) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
        margin: 0 !important;
        text-decoration: none !important;
    }
    #mob-challenges-featured {
        background: radial-gradient(circle at 82% 50%, rgba(139, 92, 246, 0.22) 0%, transparent 62%), linear-gradient(135deg, #1b162a 0%, #151821 55%, #0e1017 100%) !important;
        border-color: rgba(139, 92, 246, 0.42) !important;
    }
    #mob-shop-featured {
        background: radial-gradient(circle at 82% 50%, rgba(251, 191, 36, 0.2) 0%, transparent 62%), linear-gradient(135deg, #241d12 0%, #151821 55%, #0e1017 100%) !important;
        border-color: rgba(251, 191, 36, 0.42) !important;
    }

    .mob-featured-left {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        z-index: 2 !important;
    }
    .mob-featured-tag {
        font-size: 9px !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.16em !important;
        color: #4ade80 !important;
        margin-bottom: 5px !important;
    }
    .mob-featured-title {
        font-size: 24px !important;
        font-weight: 900 !important;
        font-style: italic !important;
        text-transform: uppercase !important;
        line-height: 0.96 !important;
        letter-spacing: -0.02em !important;
        color: #ffffff !important;
        text-shadow: 0 4px 14px rgba(0, 0, 0, 0.55) !important;
        margin: 0 !important;
    }
    .mob-featured-cta {
        margin-top: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8.5px 20px !important;
        border-radius: 12px !important;
        background: #22c55e !important;
        color: #04140a !important;
        font-size: 10.5px !important;
        font-weight: 900 !important;
        font-style: italic !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4) !important;
        border: none !important;
        cursor: pointer !important;
        transition: transform 0.15s ease !important;
    }
    .mob-featured-cta:active {
        transform: scale(0.95) !important;
    }
    .mob-featured-art {
        position: relative !important;
        z-index: 2 !important;
        flex-shrink: 0 !important;
    }

    /* ── 2.2 Main Lobby (`index.html`) Mobile Layout & Category Switching ── */
    body > div.flex-1.flex.overflow-hidden {
        padding: 0 !important;
        margin: 0 !important;
        gap: 14px !important;
    }

    #home-col-games {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    /* Clean vertical spacing between Featured Hero, Originals, Live Feed, Multiplayer & PvP */
    #lobby-casino-view {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    #lobby-casino-view > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Order inside Lobby Casino View: Live Ticker (1) -> Featured (2) -> Originals (3) -> Multiplayer (4) */
    #section-live-ticker {
        order: 1 !important;
        padding: 10px 12px !important;
        border-radius: 18px !important;
        background: #151821 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    #mob-featured-hero { order: 2 !important; }
    #section-originals { order: 3 !important; }
    #section-multiplayer { order: 4 !important; }
    #section-games-pvp { order: 5 !important; }

    /* Category 1 (Default): ORIGINALS (All Games + Featured + Live Ticker) */
    body:not([data-mob-cat]) #home-col-stats-lead,
    body:not([data-mob-cat]) #home-col-chat,
    body[data-mob-cat="originals"] #home-col-stats-lead,
    body[data-mob-cat="originals"] #home-col-chat {
        display: none !important;
    }
    body:not([data-mob-cat]) #home-col-games,
    body[data-mob-cat="originals"] #home-col-games {
        display: block !important;
    }

    /* Category 2: USER PANEL (`#home-panel-user` full width) */
    body[data-mob-cat="panel"] #home-col-games,
    body[data-mob-cat="panel"] #home-panel-leaderboard,
    body[data-mob-cat="panel"] #home-col-chat {
        display: none !important;
    }
    body[data-mob-cat="panel"] #home-col-stats-lead {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body[data-mob-cat="panel"] #home-panel-user {
        display: block !important;
        width: 100% !important;
        border-radius: 22px !important;
        background: #151821 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    body[data-mob-cat="panel"] #home-panel-user .h-\[115px\] {
        height: 155px !important;
    }

    /* Category 3: LEADERBOARD (`#home-panel-leaderboard` full width) */
    body[data-mob-cat="leaderboard"] #home-col-games,
    body[data-mob-cat="leaderboard"] #home-panel-user,
    body[data-mob-cat="leaderboard"] #home-col-chat {
        display: none !important;
    }
    body[data-mob-cat="leaderboard"] #home-col-stats-lead {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body[data-mob-cat="leaderboard"] #home-panel-leaderboard {
        display: flex !important;
        width: 100% !important;
        min-height: calc(100dvh - 180px) !important;
        border-radius: 22px !important;
        background: #151821 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* Category 4: LIVE CHAT (`#home-col-chat` full width) */
    body[data-mob-cat="chat"] #home-col-games,
    body[data-mob-cat="chat"] #home-col-stats-lead {
        display: none !important;
    }
    body[data-mob-cat="chat"] #home-col-chat {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100dvh - 180px) !important;
        min-height: 390px !important;
        border-radius: 22px !important;
        background: #151821 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* Section Headers (`| KODEN ORIGINALS`, `| TABLES MULTIJOUEURS`, `| GAMES PVP`) */
    #section-originals > div:first-child,
    #section-multiplayer > div:first-child,
    #section-games-pvp > div:first-child {
        margin-bottom: 14px !important;
        padding: 0 4px !important;
    }
    #section-originals > div:first-child > span:last-child,
    #section-games-pvp > div:first-child > div:last-child > span:first-child {
        display: none !important;
    }
    #section-originals h2,
    #section-multiplayer h2,
    #section-games-pvp h2 {
        font-size: 13.5px !important;
        font-weight: 900 !important;
        font-style: italic !important;
        letter-spacing: 0.04em !important;
        color: #ffffff !important;
    }

    /* ── Refined 2-Column Game Cards (`.game-card-stake`) — Exact PC Colors & Gradients ── */
    .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4,
    .grid.grid-cols-2.sm\:grid-cols-2.lg\:grid-cols-4,
    .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        padding: 0 !important;
    }

    .game-card-stake {
        border-radius: 20px !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        background: #0f1923 !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.48), 0 3px 0 #090f15 !important;
        overflow: hidden !important;
    }

    /* Hide PC bottom footer strip & RTP badge on smartphone so cards stay unified & clean */
    .game-card-stake > div:nth-child(2),
    .game-card-stake .badge-rtp,
    .game-card-stake .card-hover-overlay {
        display: none !important;
    }

    /* Unified square poster card keeping each game's exact PC gradient */
    .game-card-stake > div:first-child {
        aspect-ratio: 1 / 1.02 !important;
        border-radius: 20px !important;
        padding: 14px 12px 14px 12px !important;
    }

    /* Top-left `ORIGINAL` pill */
    .game-card-stake .badge-original {
        top: 10px !important;
        left: 10px !important;
        background: rgba(15, 25, 35, 0.82) !important;
        backdrop-filter: blur(6px) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        color: #ffffff !important;
        font-size: 7.5px !important;
        font-weight: 900 !important;
        letter-spacing: 0.08em !important;
        padding: 3px 8px !important;
        border-radius: 6px !important;
    }

    /* Artwork sizing inside mobile card */
    .game-card-stake .poster-art {
        padding-top: 8px !important;
    }
    .game-card-stake .poster-art svg {
        width: 112px !important;
        height: 86px !important;
    }

    /* Bottom centered Title + Gold PC Subtitle (`KODEN ORIGINALS`) inside mobile card */
    .game-card-stake > div:first-child > div.w-full.text-center {
        margin-top: auto !important;
    }
    .game-card-stake > div:first-child > div.w-full.text-center > span:first-child {
        font-size: 16px !important;
        font-weight: 900 !important;
        font-style: italic !important;
        letter-spacing: -0.02em !important;
        color: #ffffff !important;
    }
    .game-card-stake > div:first-child > div.w-full.text-center > span:last-child {
        font-size: 7.5px !important;
        font-weight: 900 !important;
        letter-spacing: 0.2em !important;
        margin-top: 3px !important;
    }
    #section-originals .game-card-stake > div:first-child > div.w-full.text-center > span:last-child {
        color: #fbbf24 !important;
    }

    /* Lobby Central Token Room View (`#lobby-token-room-view`) */
    #lobby-token-room-view > div:first-child {
        padding: 14px !important;
    }
    #lobby-token-room-view select {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 120px !important;
    }


    /* ========================================================================
       2.3 INSTANT THUMB ERGONOMICS FOR ALL SOLO GAME SIDEBARS (`main > aside`)
       Places Primary Action Button at Order 1 (right under the game board!)
       and Bet/Mode Controls at Order 2 so gameplay requires ZERO scrolling!
       ======================================================================== */
    main:not(.auth-main) {
        gap: 8px !important;
    }

    main > section {
        min-height: 240px !important;
        padding: 12px 10px !important;
        border-radius: 18px !important;
    }

    /* Compact top-left "Lobby" back pill & top-right banners inside game stages */
    main > section > a[href="index.html"] {
        top: 8px !important;
        left: 8px !important;
        padding: 5px 10px !important;
        font-size: 9px !important;
        border-radius: 10px !important;
    }

    main > aside:not(:has(#my-hand)):not(:has(#s-tables)) {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px !important;
        border-radius: 18px !important;
    }

    /* Hide decorative desktop game header inside aside on mobile to save vertical space */
    main > aside:not(:has(#my-hand)):not(:has(#s-tables)) > div:first-child:has(span.w-2.h-2.rounded-full) {
        display: none !important;
    }

    /* Default order for Bet & Mode inputs: Order 2 (right below the primary action button) */
    main > aside:not(:has(#my-hand)):not(:has(#s-tables)) > * {
        order: 2;
    }

    /* PRIMARY ACTION BUTTONS -> Order 1 (At the VERY TOP of aside, directly below the game stage!) */
    main > aside #start-chicken,
    main > aside #cashout-chicken,
    main > aside #chicken-info,
    main > aside #deal-btn,
    main > aside #game-controls,
    main > aside > div:has(> #deal-btn),
    main > aside #bet-btn,
    main > aside #spin-btn,
    main > aside > div:has(> #turbo-btn),
    main > aside #roll-btn,
    main > aside #auto-btn,
    main > aside > div:has(> #drop-btn),
    main > aside > div:has(> button[onclick^="dropMultipleBalls"]),
    main > aside #tower-start-btn,
    main > aside #tower-cashout-btn,
    main > aside #tower-live,
    main > aside > div:has(> #roulette-action-btn) {
        order: 1 !important;
        margin-top: 0 !important;
    }

    /* Make primary action buttons punchy, tactile, and easy to hit with the thumb */
    main > aside #start-chicken,
    main > aside #cashout-chicken,
    main > aside #deal-btn,
    main > aside #draw-btn,
    main > aside #bet-btn,
    main > aside #spin-btn,
    main > aside #roll-btn,
    main > aside #drop-btn,
    main > aside #tower-start-btn,
    main > aside #tower-cashout-btn,
    main > aside #roulette-action-btn {
        padding-top: 13px !important;
        padding-bottom: 13px !important;
        font-size: 12px !important;
        border-radius: 14px !important;
    }

    /* Compact Bet Input Boxes inside aside */
    main > aside .bg-\[\#0e1017\].p-3\.5,
    main > aside .bg-\[\#0e1017\].p-4 {
        padding: 10px 12px !important;
        border-radius: 14px !important;
    }

    /* Secondary Info Panels, Paytables, Rules & Ratios -> Order 10 (Below Bet Controls) */
    main > aside > div.bg-\[\#0e1017\]:has(.divide-y),
    main > aside > div.bg-\[\#0e1017\]:has(.space-y-1\.5),
    main > aside > div.bg-\[\#0e1017\]:has(.space-y-2),
    main > aside > div.bg-\[\#0e1017\]:has(#dice-payout-label),
    main > aside > div.bg-\[\#0e1017\]:has(#roul-total-bet) {
        order: 10 !important;
    }

    /* Logs Terminal (`#logs-container`) -> Order 11 (Always at the very bottom, compact) */
    main > aside > div:has(#logs-container) {
        order: 11 !important;
        max-height: 95px !important;
        min-height: 72px !important;
        padding: 8px 10px !important;
    }


    /* ========================================================================
       2.4 GAME-BY-GAME MOBILE STAGE ADAPTATIONS (ALL 10 GAMES)
       ======================================================================== */

    /* ── GAME 1: CHICKEN MINES (`chicken.html`) ── */
    section.gk-viewport:has(#chicken-grid) {
        min-height: 295px !important;
        padding: 38px 10px 12px 10px !important;
    }
    #chicken-grid {
        max-width: 285px !important;
        width: 100% !important;
        gap: 6px !important;
        margin: 0 auto !important;
    }
    .chicken-tile {
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        min-height: 46px !important;
        border-radius: 10px !important;
        font-size: 1.25rem !important;
    }

    /* ── GAME 2: BLACKJACK (`blackjack.html`) ── */
    section.gk-viewport:has(#dealer-cards) {
        min-height: 265px !important;
        padding: 36px 8px 10px 8px !important;
        justify-content: space-between !important;
    }
    /* Hide decorative 3D shoe on phone so cards have 100% width */
    .stake-shoe {
        display: none !important;
    }
    /* Compress dealer & player zones from 195px/160px down to 94px so both hands + ribbon fit in 250px! */
    section.gk-viewport:has(#dealer-cards) .min-h-\[195px\] {
        min-height: 104px !important;
        gap: 4px !important;
    }
    #dealer-cards,
    #player-cards {
        min-height: 88px !important;
        height: auto !important;
        padding: 2px !important;
    }
    #dealer-cards .koden-card-3d,
    #player-cards .koden-card-3d {
        width: 62px !important;
        height: 90px !important;
        border-radius: 7px !important;
    }
    #dealer-cards .stake-card-corner,
    #player-cards .stake-card-corner {
        top: 5px !important;
        left: 6px !important;
    }
    #dealer-cards .stake-card-rank,
    #player-cards .stake-card-rank {
        font-size: 17px !important;
    }
    #dealer-cards .stake-card-suit-svg,
    #player-cards .stake-card-suit-svg {
        width: 15px !important;
        height: 15px !important;
        margin-top: 2px !important;
    }
    #dealer-cards .koden-card-back-logo,
    #player-cards .koden-card-back-logo {
        font-size: 10px !important;
    }
    /* Compact center rules ribbon on phone */
    .stake-ribbon-wrap {
        my: 2px !important;
        margin: 2px 0 !important;
        transform: scale(0.82) !important;
    }
    .stake-ribbon {
        padding: 4px 16px !important;
        font-size: 8.5px !important;
    }
    .stake-ribbon-sub {
        display: none !important;
    }
    /* Hit / Stand / Double buttons (`#game-controls`) */
    #game-controls button {
        padding: 12px 6px !important;
        font-size: 11px !important;
        border-radius: 12px !important;
    }

    /* ── GAME 3: ROCKET CRASH (`crash.html`) ── */
    section:has(#crash-chart) {
        min-height: 245px !important;
        height: 255px !important;
        padding: 6px !important;
    }
    section:has(#crash-chart) .gk-viewport {
        width: 100% !important;
        height: 195px !important;
        min-height: 190px !important;
        border-radius: 16px !important;
    }
    #multiplier {
        font-size: 2.5rem !important;
    }
    #crash-status {
        font-size: 9px !important;
        padding: 3px 10px !important;
        margin-bottom: 4px !important;
    }
    #crash-history {
        gap: 4px !important;
        padding-top: 4px !important;
    }

    /* ── GAME 4: CYBER SLOTS (`slots.html`) ── */
    section.gk-viewport:has(#reel-1) {
        min-height: 250px !important;
        padding: 38px 8px 12px 8px !important;
    }
    section.gk-viewport:has(#reel-1) > div.relative.p-6 {
        padding: 12px !important;
        border-radius: 22px !important;
        width: 100% !important;
        max-width: 330px !important;
    }
    section.gk-viewport:has(#reel-1) .grid.grid-cols-3 {
        gap: 8px !important;
        padding: 10px !important;
        border-radius: 16px !important;
    }
    #reel-1,
    #reel-2,
    #reel-3 {
        width: 100% !important;
        height: 112px !important;
        border-radius: 14px !important;
        font-size: 2.6rem !important;
    }
    #win-line {
        left: 10px !important;
        right: 10px !important;
    }
    #slot-status {
        margin-top: 10px !important;
        font-size: 11px !important;
    }

    /* ── GAME 5: JACKS OR BETTER VIDEO POKER (`job.html`) ── */
    section.gk-viewport:has(#cards-area) {
        min-height: 245px !important;
        padding: 38px 6px 12px 6px !important;
        gap: 12px !important;
    }
    section.gk-viewport:has(#cards-area) > div.text-center:first-of-type {
        display: none !important; /* Hide large title inside stage so cards + status fit cleanly */
    }
    /* All 5 cards strictly on 1 single horizontal row! */
    #cards-area {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
        max-width: 360px !important;
        min-height: 105px !important;
        padding: 4px 2px !important;
        align-items: center !important;
        justify-items: center !important;
    }
    #cards-area > div[id^="card-slot-"] {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    #cards-area .koden-card-3d {
        width: 100% !important;
        max-width: 64px !important;
        height: 92px !important;
        border-radius: 8px !important;
    }
    #cards-area .stake-card-corner {
        top: 5px !important;
        left: 5px !important;
    }
    #cards-area .stake-card-rank {
        font-size: 15px !important;
    }
    #cards-area .stake-card-suit-svg {
        width: 13px !important;
        height: 13px !important;
        margin-top: 1px !important;
    }
    #cards-area .stake-card-watermark {
        width: 34px !important;
        height: 34px !important;
        right: 4px !important;
        bottom: 4px !important;
    }
    #cards-area .hold-badge {
        font-size: 7.5px !important;
        padding: 2px 5px !important;
        letter-spacing: 0.06em !important;
        border-radius: 5px !important;
    }
    #job-status {
        height: 38px !important;
        font-size: 11px !important;
        padding: 0 12px !important;
    }

    /* ── GAME 6: CYBER DICE (`dice.html`) ── */
    section.gk-viewport:has(#die-1) {
        min-height: 250px !important;
        padding: 38px 10px 12px 10px !important;
    }
    section.gk-viewport:has(#die-1) > div.flex.items-center.justify-center {
        gap: 14px !important;
        margin-bottom: 14px !important;
        padding: 14px 20px !important;
        border-radius: 22px !important;
    }
    .die-face {
        width: 66px !important;
        height: 66px !important;
        border-radius: 14px !important;
        padding: 10px !important;
    }
    .pip {
        width: 10px !important;
        height: 10px !important;
    }
    #dice-sum-badge {
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
    }
    #dice-sum-val {
        font-size: 16px !important;
    }
    #dice-status {
        height: 38px !important;
        font-size: 11px !important;
    }
    #exact-selector .grid.grid-cols-6 {
        gap: 4px !important;
    }
    .exact-num-btn {
        padding: 7px 0 !important;
        font-size: 10px !important;
    }

    /* ── GAME 7: PLINKO (`plinko.html`) ── */
    section.gk-viewport:has(#plinko) {
        min-height: 275px !important;
        padding: 34px 6px 8px 6px !important;
    }
    div:has(> #plinko) {
        min-height: 235px !important;
        width: 100% !important;
    }
    #plinko {
        width: 100% !important;
        height: auto !important;
        max-height: 270px !important;
        object-fit: contain !important;
    }

    /* ── GAME 8: TOWER OF FORTUNE (`tower.html`) ── */
    section.gk-viewport:has(#tower-grid) {
        min-height: 340px !important;
        padding: 36px 8px 10px 8px !important;
    }
    /* All 10 floors fit cleanly in 330px with zero internal scroll needed! */
    #tower-grid {
        max-width: 340px !important;
        width: 100% !important;
        gap: 4px !important;
        padding: 4px !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .tower-row {
        gap: 5px !important;
    }
    .tower-tile {
        height: 30px !important;
        border-radius: 7px !important;
        font-size: 11px !important;
    }

    /* ── GAME 9: EUROPEAN ROULETTE (`roulette.html`) ── */
    section.gk-viewport:has(#roulette-canvas) {
        min-height: 330px !important;
        padding: 36px 8px 10px 8px !important;
        gap: 10px !important;
    }
    /* Wheel + Winning Pocket side-by-side compact row on mobile */
    section.gk-viewport:has(#roulette-canvas) > div.flex.flex-col.xl\:flex-row {
        gap: 10px !important;
        width: 100% !important;
    }
    div:has(> #roulette-canvas) {
        width: 136px !important;
        height: 136px !important;
    }
    #stake-pocket-box {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
        border-radius: 10px !important;
    }
    #roul-result-banner {
        font-size: 11px !important;
    }
    /* Smooth touch horizontal scroll for the 0-36 betting felt so numbers stay finger-friendly */
    .roul-board-wrap {
        width: 100% !important;
        padding: 10px 8px !important;
        border-radius: 14px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #roul-numbers-grid,
    .roul-outside-grid {
        min-width: 470px !important;
    }
    .roul-cell {
        min-height: 36px !important;
        font-size: 11px !important;
    }
    .selector-chip {
        width: 36px !important;
        height: 36px !important;
        font-size: 9px !important;
    }

    /* ── GAME 10: TEXAS HOLD'EM LIVE (`poker-lobby.html` & `poker.html`) ── */
    section.stake-poker-arena {
        min-height: 390px !important;
        padding: 0 !important;
    }
    #poker-table {
        width: 92% !important;
        max-width: 330px !important;
        height: 205px !important;
        border-radius: 110px !important;
        box-shadow:
            0 0 0 7px #1a2c38,
            0 0 0 9px #2f4553,
            0 8px 0 9px #091118,
            0 20px 40px rgba(0, 0, 0, 0.85),
            inset 0 0 40px rgba(0, 0, 0, 0.75) !important;
    }
    #poker-table::before {
        inset: 12px !important;
    }
    .pk-seat-pod {
        min-width: 68px !important;
        padding: 3px 6px !important;
        border-radius: 9px !important;
        transform: scale(0.82);
    }
    .pk-card {
        width: 34px !important;
        height: 48px !important;
        padding: 2px 3px !important;
        border-radius: 5px !important;
    }
    .pk-card.card-lg {
        width: 44px !important;
        height: 64px !important;
    }
    #bottom-console {
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    .btn-pk-action {
        padding: 9px 11px !important;
        font-size: 9.5px !important;
        border-radius: 10px !important;
    }


    /* ── 2.5 Challenges (`challenges.html`) & Boutique (`boutique.html`) Mobile Redesign ── */

    /* --- DÉFIS (`challenges.html`) --- */
    #challenges-main-wrap {
        gap: 12px !important;
        padding-bottom: 16px !important;
    }
    #ch-desktop-hero {
        display: none !important;
    }

    /* Compact 3-Stat KPI Strip on Défis */
    #challenges-main-wrap > div.grid.grid-cols-3 {
        gap: 8px !important;
    }
    #challenges-main-wrap > div.grid.grid-cols-3 > div {
        padding: 10px 8px !important;
        border-radius: 18px !important;
        background: linear-gradient(180deg, #131722 0%, #0d1018 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    #challenges-main-wrap > div.grid.grid-cols-3 > div p:first-child {
        font-size: 7.5px !important;
        letter-spacing: 0.08em !important;
        margin-bottom: 2px !important;
    }
    #challenges-main-wrap > div.grid.grid-cols-3 > div p:last-child {
        font-size: 18px !important;
        line-height: 1.1 !important;
    }

    /* Mobile Tab Filtering for Défis (`QUOTIDIENS` vs `HEBDOMADAIRES` vs `TOUS`) */
    #challenges-main-wrap[data-mob-ch-tab="daily"] #section-weekly-challenges {
        display: none !important;
    }
    #challenges-main-wrap[data-mob-ch-tab="weekly"] #section-daily-challenges {
        display: none !important;
    }

    /* Refined Mobile Mission Cards */
    #daily-challenges,
    #weekly-challenges {
        gap: 10px !important;
    }
    #daily-challenges > div,
    #weekly-challenges > div {
        border-radius: 20px !important;
        padding: 14px 15px !important;
        background: linear-gradient(180deg, #141824 0%, #0c0f17 100%) !important;
        border: 1.5px solid rgba(139, 92, 246, 0.32) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45) !important;
    }
    #weekly-challenges > div {
        border-color: rgba(245, 158, 11, 0.35) !important;
    }

    /* --- BOUTIQUE (`boutique.html`) --- */
    #shop-main-wrap {
        gap: 12px !important;
        padding-bottom: 16px !important;
    }
    #shop-desktop-hero {
        display: none !important;
    }

    /* Mobile Tab Filtering for Boutique (`GEMS` | `PASS VIP` | `COFFRES` | `PSEUDOS` | `CADRES`) */
    #shop-main-wrap[data-mob-shop-tab="gems"] #mob-shop-featured,
    #shop-main-wrap[data-mob-shop-tab="gems"] #section-vip,
    #shop-main-wrap[data-mob-shop-tab="gems"] #section-chests,
    #shop-main-wrap[data-mob-shop-tab="gems"] #section-cosmetics {
        display: none !important;
    }

    #shop-main-wrap[data-mob-shop-tab="vip"] #section-gems-bank,
    #shop-main-wrap[data-mob-shop-tab="vip"] #section-chests,
    #shop-main-wrap[data-mob-shop-tab="vip"] #section-cosmetics {
        display: none !important;
    }

    #shop-main-wrap[data-mob-shop-tab="chests"] #mob-shop-featured,
    #shop-main-wrap[data-mob-shop-tab="chests"] #section-gems-bank,
    #shop-main-wrap[data-mob-shop-tab="chests"] #section-vip,
    #shop-main-wrap[data-mob-shop-tab="chests"] #section-cosmetics {
        display: none !important;
    }

    #shop-main-wrap[data-mob-shop-tab="colors"] #mob-shop-featured,
    #shop-main-wrap[data-mob-shop-tab="colors"] #section-gems-bank,
    #shop-main-wrap[data-mob-shop-tab="colors"] #section-vip,
    #shop-main-wrap[data-mob-shop-tab="colors"] #section-chests,
    #shop-main-wrap[data-mob-shop-tab="colors"] #shop-frame-wrap,
    #shop-main-wrap[data-mob-shop-tab="colors"] #shop-winEffect-wrap,
    #shop-main-wrap[data-mob-shop-tab="colors"] #shop-winSound-wrap {
        display: none !important;
    }

    #shop-main-wrap[data-mob-shop-tab="frames"] #mob-shop-featured,
    #shop-main-wrap[data-mob-shop-tab="frames"] #section-gems-bank,
    #shop-main-wrap[data-mob-shop-tab="frames"] #section-vip,
    #shop-main-wrap[data-mob-shop-tab="frames"] #section-chests,
    #shop-main-wrap[data-mob-shop-tab="frames"] #shop-nameColor-wrap,
    #shop-main-wrap[data-mob-shop-tab="frames"] #shop-winEffect-wrap,
    #shop-main-wrap[data-mob-shop-tab="frames"] #shop-winSound-wrap {
        display: none !important;
    }

    #shop-main-wrap[data-mob-shop-tab="effects"] #mob-shop-featured,
    #shop-main-wrap[data-mob-shop-tab="effects"] #section-gems-bank,
    #shop-main-wrap[data-mob-shop-tab="effects"] #section-vip,
    #shop-main-wrap[data-mob-shop-tab="effects"] #section-chests,
    #shop-main-wrap[data-mob-shop-tab="effects"] #shop-nameColor-wrap,
    #shop-main-wrap[data-mob-shop-tab="effects"] #shop-frame-wrap,
    #shop-main-wrap[data-mob-shop-tab="effects"] #shop-winSound-wrap {
        display: none !important;
    }

    #shop-main-wrap[data-mob-shop-tab="sounds"] #mob-shop-featured,
    #shop-main-wrap[data-mob-shop-tab="sounds"] #section-gems-bank,
    #shop-main-wrap[data-mob-shop-tab="sounds"] #section-vip,
    #shop-main-wrap[data-mob-shop-tab="sounds"] #section-chests,
    #shop-main-wrap[data-mob-shop-tab="sounds"] #shop-nameColor-wrap,
    #shop-main-wrap[data-mob-shop-tab="sounds"] #shop-frame-wrap,
    #shop-main-wrap[data-mob-shop-tab="sounds"] #shop-winEffect-wrap {
        display: none !important;
    }

    /* Hide redundant balance pill inside `#section-chests` header on mobile (already in top bar) */
    #section-chests > div:first-child > div:last-child {
        display: none !important;
    }
    #section-vip > div:first-child p,
    #section-chests > div:first-child p,
    #section-cosmetics > div:first-child p {
        display: none !important;
    }

    /* Refined Mobile VIP Cards & Chest Cards */
    #section-vip .tilt-card,
    #chests-grid .tilt-card {
        border-radius: 22px !important;
        padding: 18px !important;
        transform: none !important;
    }

    /* Compact Sticky Live Preview Studio Bar on Mobile Boutique */
    #section-cosmetics > div.bg-\[\#151821\]\/90 {
        padding: 12px 14px !important;
        border-radius: 20px !important;
        background: linear-gradient(135deg, #141824 0%, #0d1018 100%) !important;
        border: 1.5px solid rgba(236, 72, 153, 0.4) !important;
        position: sticky !important;
        top: 6px !important;
        z-index: 30 !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7) !important;
    }
    /* Hide bulky mock chat box inside mobile preview bar */
    #section-cosmetics > div.bg-\[\#151821\]\/90 > div.min-w-\[280px\] {
        display: none !important;
    }
    #section-cosmetics #preview-avatar-box {
        width: 48px !important;
        height: 48px !important;
        border-radius: 14px !important;
    }
    #section-cosmetics #preview-username {
        font-size: 15px !important;
    }
    #section-cosmetics > div.bg-\[\#151821\]\/90 p.text-\[9px\] {
        display: none !important;
    }

    /* 2-Column Cosmetics Grid on Mobile */
    #shop-nameColor,
    #shop-frame,
    #shop-winEffect,
    #shop-winSound {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    #shop-nameColor .tilt-card,
    #shop-frame .tilt-card,
    #shop-winEffect .tilt-card,
    #shop-winSound .tilt-card {
        border-radius: 20px !important;
        padding: 12px !important;
        transform: none !important;
    }

    /* --- PROFILE (`profile.html`) & PLAYER CARD MODAL (`#player-card-modal`) & ADMIN --- */
    #profile-desktop-tabs {
        display: none !important;
    }

    /* Profile Hero Header (`#profile-hero-header`) on Mobile */
    #profile-hero-header {
        padding: 16px !important;
        border-radius: 22px !important;
        background: #151821 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    #profile-hero-header > div.flex.flex-col {
        gap: 14px !important;
    }
    #profile-hero-header #hero-avatar-wrap {
        width: 62px !important;
        height: 62px !important;
        border-radius: 16px !important;
    }
    #profile-hero-header #hero-username {
        font-size: 20px !important;
    }
    #profile-hero-header #hero-joined-date,
    #profile-hero-header #hero-joined-date + span {
        display: none !important;
    }
    /* Balance box & Action buttons row inside Profile Hero Header */
    #profile-hero-header > div.flex.flex-col > div:last-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }
    #profile-hero-header > div.flex.flex-col > div:last-child > div:first-child {
        min-width: 0 !important;
        padding: 10px 12px !important;
        border-radius: 16px !important;
        background: #0e1017 !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    #profile-hero-header #hero-balance-text {
        font-size: 16px !important;
    }
    #profile-hero-actions {
        width: 100% !important;
        gap: 6px !important;
    }
    #profile-hero-actions #btn-hero-claim-daily {
        padding: 8.5px 10px !important;
        border-radius: 11px !important;
        font-size: 9.5px !important;
    }
    #profile-hero-actions > div button {
        padding: 7px 8px !important;
        border-radius: 10px !important;
        font-size: 8.5px !important;
    }

    /* Hide Overview KPI grid when browsing History / VIP / Referral / Settings on mobile */
    body[data-prof-tab="history"] #profile-kpi-grid,
    body[data-prof-tab="vip"] #profile-kpi-grid,
    body[data-prof-tab="referral"] #profile-kpi-grid,
    body[data-prof-tab="settings"] #profile-kpi-grid {
        display: none !important;
    }

    /* 2x2 KPI Cards Grid on Profile Overview */
    #profile-kpi-grid,
    body:has(#hero-username) > div.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .profile-stat-card {
        padding: 13px 14px !important;
        border-radius: 18px !important;
        background: #151821 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .profile-stat-card h3 {
        font-size: 16px !important;
    }
    .profile-stat-card span.text-\[9px\] {
        display: none !important;
    }
    .profile-stat-card .w-11.h-11 {
        width: 34px !important;
        height: 34px !important;
        font-size: 15px !important;
        border-radius: 11px !important;
        flex-shrink: 0 !important;
    }

    /* Profile Overview Cards & 2-Column Games Breakdown */
    #tab-content-overview > div {
        padding: 16px !important;
        border-radius: 22px !important;
        background: #151821 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    #tab-content-overview .h-44 {
        height: 150px !important;
    }
    #tab-content-overview .grid.grid-cols-1.sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .game-badge-chip {
        padding: 11px 12px !important;
        border-radius: 16px !important;
        background: #0e1017 !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    .game-badge-chip span.text-xs {
        font-size: 10.5px !important;
    }

    /* Profile History, VIP, Referral & Settings Tabs on Mobile */
    #tab-content-history > div,
    #tab-content-vip .rounded-3xl,
    #tab-content-referral > div,
    #tab-content-settings .rounded-3xl {
        padding: 16px !important;
        border-radius: 22px !important;
        background: #151821 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* Popup Player Card Modal (`#player-card-modal`) Mobile Polish */
    #player-card-modal > div.relative {
        border-radius: 26px !important;
        max-height: calc(100dvh - 24px) !important;
        overflow-y: auto !important;
    }
    #player-card-modal > div.relative > div.px-6 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    #player-card-avatar-box {
        width: 64px !important;
        height: 64px !important;
        border-radius: 16px !important;
    }

    body:has(#users-table-body) > div.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #vip-subscription-modal > div.relative,
    #create-wager-modal > div,
    #match-room-modal > div {
        max-height: calc(100dvh - 24px) !important;
        overflow-y: auto !important;
        border-radius: 22px !important;
    }

    .bet-pill-btn {
        padding: 7px 8px !important;
        font-size: 10px !important;
    }


    /* ── 2.6 Native 4-Tab Mobile Bottom Navigation Bar (Minimal Geometric Icons) ── */
    #koden-mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 64px !important;
        min-height: 64px !important;
        border-radius: 0 !important;
        margin: 0 !important;
        background: rgba(9, 11, 16, 0.96) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        z-index: 9999 !important;
        align-items: center !important;
        justify-content: space-around !important;
        padding: 6px 8px env(safe-area-inset-bottom, 6px) 8px !important;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.85) !important;
    }

    .mob-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        color: #64748b !important;
        font-size: 8.5px !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        text-decoration: none !important;
        flex: 1 !important;
        height: 100% !important;
        transition: color 0.18s ease, transform 0.15s ease !important;
        cursor: pointer !important;
        background: none !important;
        border: none !important;
    }
    .mob-nav-item .mob-nav-icon {
        width: 22px !important;
        height: 22px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: transform 0.18s ease, filter 0.18s ease !important;
    }
    .mob-nav-item .mob-nav-icon svg {
        width: 20px !important;
        height: 20px !important;
        color: #64748b !important;
        transition: color 0.18s ease !important;
    }
    .mob-nav-item.active {
        color: #22c55e !important;
    }
    .mob-nav-item.active .mob-nav-icon {
        transform: translateY(-1px) !important;
        filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.85)) !important;
    }
    .mob-nav-item.active .mob-nav-icon svg {
        color: #22c55e !important;
    }
    .mob-nav-item:active {
        transform: scale(0.92) !important;
    }

    footer {
        display: none !important;
    }
}


/* ============================================================================
   3. STRICT DESKTOP RESTORATION (>= 1025px) — ZERO PC REGRESSIONS
   ============================================================================ */
@media (min-width: 1025px) {
    .mobile-tab-nav,
    #koden-mobile-bottom-nav,
    #mobile-games-drawer,
    .koden-mob-only {
        display: none !important;
    }

    nav #nav-admin-link-top.flex {
        display: flex !important;
    }

    #home-col-stats-lead {
        display: flex !important;
        width: 23% !important;
        max-width: 23% !important;
    }

    #home-col-games {
        display: block !important;
        flex: 1 1 0% !important;
        width: auto !important;
        max-width: none !important;
    }

    #home-col-chat {
        display: flex !important;
        width: 24% !important;
        max-width: 24% !important;
    }

    #home-panel-user {
        display: block !important;
    }

    #home-panel-leaderboard {
        display: flex !important;
    }

    main > aside {
        order: 1 !important;
        width: 20rem !important; /* md:w-80 */
        margin: 0 !important;
    }

    main > section {
        order: 2 !important;
        flex: 1 1 0% !important;
    }
}