:root {
            --primary: #f59e0b;
            --primary-hover: #d97706;
            --primary-glow: rgba(245, 158, 11, 0.4);
            --bg-dark: #0b0f19;
            --bg-card: #111827;
            --bg-card-hover: #1e293b;
            --border-color: rgba(255, 255, 255, 0.08);
            --border-hover: rgba(245, 158, 11, 0.5);
            --text-main: #ffffff;
            --text-muted: #94a3b8;
            --accent-cyan: #06b6d4;
            --radius-sm: 8px;
            --radius-md: 14px;
            --radius-lg: 20px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Kanit', 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
        }

                        /* Background Ambient Art Decorations: Left (COD Ghost) & Right (PUBG) */
        .cod-bg-decoration {
            position: fixed;
            top: 0;
            left: 0;
            width: 35vw;
            height: 100vh;
            pointer-events: none;
            z-index: 0;
            background-image: url('../asset_img_1.png');
            background-size: cover;
            background-position: left center;
            background-repeat: no-repeat;
            opacity: 0.22;
            filter: saturate(1.1) contrast(1.15) brightness(1.02);
            mask-image: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 45%, transparent 90%),
                        linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0.9) 90%, transparent 100%);
            -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 45%, transparent 90%),
                                linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0.9) 90%, transparent 100%);
            mask-composite: intersect;
            -webkit-mask-composite: source-in;
        }

        .pubg-bg-decoration {
            position: fixed;
            top: 0;
            right: 0;
            width: 35vw;
            height: 100vh;
            pointer-events: none;
            z-index: 0;
            background-image: url('../asset_img_2.png');
            background-size: cover;
            background-position: right center;
            background-repeat: no-repeat;
            opacity: 0.22;
            filter: saturate(1.08) contrast(1.15) brightness(1.02);
            mask-image: linear-gradient(to left, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 45%, transparent 90%),
                        linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0.9) 90%, transparent 100%);
            -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 45%, transparent 90%),
                                linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0.9) 90%, transparent 100%);
            mask-composite: intersect;
            -webkit-mask-composite: source-in;
        }
body {
            position: relative;
            background-color: var(--bg-dark);
            color: var(--text-main);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
        }

        /* Full-bleed application shell; individual sections keep their own containers. */
        .site-root {
            width: 100%;
            max-width: none;
            margin: 0;
            padding: 0;
        }

        /* Keep the chrome full-width, but align every page to one readable grid. */
        .site-root > .view-section:not(#view-auth-page) {
            width: calc(100% - 48px);
            max-width: 1360px;
            margin-right: auto;
            margin-left: auto;
            padding-top: 24px;
            padding-bottom: 64px;
        }

        .site-root > #view-home {
            padding-top: 0;
        }

        .site-root .hero-grid {
            align-items: stretch;
            margin-bottom: 24px;
        }

        .site-root .features-section {
            margin-top: 56px !important;
        }

        @media (max-width: 768px) {
            .site-root > .view-section:not(#view-auth-page) {
                width: calc(100% - 28px);
                padding-top: 16px;
                padding-bottom: 88px;
            }

            .site-root > #view-home {
                padding-top: 0;
            }
        }

        /* 2026 premium navigation redesign */
        .navbar {
            min-height: 76px !important;
            padding: 0 !important;
            background:
                radial-gradient(circle at 18% -80%, rgba(245, 158, 11, .18), transparent 34%),
                linear-gradient(180deg, rgba(13, 20, 35, .98), rgba(7, 12, 23, .98)) !important;
            border-top: 1px solid rgba(255, 255, 255, .06) !important;
            border-bottom: 1px solid rgba(245, 158, 11, .30) !important;
            box-shadow: 0 16px 50px rgba(0, 0, 0, .42) !important;
        }
        .navbar::after {
            content: '';
            position: absolute;
            right: 0;
            bottom: -1px;
            left: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent 8%, #f59e0b 50%, transparent 92%);
            opacity: .5;
            pointer-events: none;
        }
        .nav-inner {
            min-height: 76px !important;
            max-width: 1360px !important;
            padding: 0 28px !important;
            gap: 28px !important;
        }
        .brand-logo {
            gap: 13px !important;
            padding-right: 25px !important;
            position: relative !important;
        }
        .brand-logo::after {
            content: '';
            position: absolute;
            top: 8px;
            right: 0;
            width: 1px;
            height: 30px;
            background: linear-gradient(transparent, rgba(245, 158, 11, .6), transparent);
        }
        .brand-logo .logo-badge {
            width: 46px !important;
            height: 46px !important;
            border: 1px solid rgba(255, 218, 124, .62) !important;
            border-radius: 15px !important;
            background: linear-gradient(145deg, #ffc446, #ed8b00 72%) !important;
            box-shadow: 0 9px 28px rgba(245, 158, 11, .32), inset 0 1px 0 rgba(255,255,255,.55) !important;
        }
        .brand-logo .logo-badge i {
            font-size: 19px !important;
            filter: drop-shadow(0 1px 0 rgba(255,255,255,.25));
        }
        .brand-name {
            font-size: 21px !important;
            font-weight: 900 !important;
            letter-spacing: .25px !important;
            text-shadow: 0 2px 18px rgba(255,255,255,.10) !important;
        }
        .nav-menu {
            flex: 1 !important;
            justify-content: center !important;
            gap: 5px !important;
            padding: 5px !important;
            border: 1px solid rgba(255, 255, 255, .055) !important;
            border-radius: 15px !important;
            background: rgba(255, 255, 255, .025) !important;
        }
        .nav-menu .nav-link {
            min-height: 38px !important;
            padding: 0 12px !important;
            border: 1px solid transparent !important;
            border-radius: 11px !important;
            color: #aeb9ca !important;
            font-size: 12.5px !important;
            font-weight: 650 !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 7px !important;
        }
        .nav-menu .nav-link i {
            color: #7f8da3 !important;
            transition: color .2s ease, transform .2s ease;
        }
        .nav-menu .nav-link:hover {
            color: #fff !important;
            background: rgba(255,255,255,.055) !important;
            border-color: rgba(255,255,255,.08) !important;
            transform: translateY(-1px) !important;
        }
        .nav-menu .nav-link:hover i {
            color: #fbbf24 !important;
            transform: scale(1.08);
        }
        .nav-menu .nav-link.active {
            color: #fff7df !important;
            background: linear-gradient(145deg, rgba(245,158,11,.22), rgba(245,158,11,.08)) !important;
            border-color: rgba(245,158,11,.62) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px rgba(245,158,11,.10) !important;
        }
        .nav-menu .nav-link.active i {
            color: #fbbf24 !important;
        }
        .nav-actions {
            flex-shrink: 0 !important;
        }
        .auth-buttons .btn-primary {
            min-height: 44px !important;
            padding: 0 21px !important;
            border: 1px solid #ffc755 !important;
            border-radius: 13px !important;
            background: linear-gradient(135deg, #ffbe2e, #ef8e00) !important;
            color: #111827 !important;
            box-shadow: 0 9px 25px rgba(245,158,11,.27), inset 0 1px 0 rgba(255,255,255,.55) !important;
        }
        .auth-buttons .btn-primary:hover {
            transform: translateY(-2px) !important;
            filter: brightness(1.07);
        }
        .news-ticker-bar {
            min-height: 46px !important;
            margin-bottom: 28px !important;
            padding: 0 !important;
            background: rgba(13, 21, 36, .92) !important;
            border-top: 0 !important;
            border-bottom: 1px solid rgba(255,255,255,.07) !important;
            box-shadow: 0 10px 30px rgba(0,0,0,.20) !important;
        }
        .news-inner {
            min-height: 46px !important;
            padding: 0 28px !important;
        }
        .news-badge-wrap {
            padding: 5px 13px 5px 7px !important;
            border-radius: 999px !important;
            background: linear-gradient(90deg, rgba(245,158,11,.18), rgba(245,158,11,.07)) !important;
        }
        .news-pulse-badge {
            width: 23px !important;
            height: 23px !important;
            box-shadow: 0 0 16px rgba(245,158,11,.4) !important;
        }
        .news-action-link {
            min-height: 30px !important;
            padding: 0 13px !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 8px !important;
            border-radius: 9px !important;
        }
        @media (max-width: 1100px) {
            .nav-inner { gap: 16px !important; }
            .brand-logo { padding-right: 12px !important; }
            .brand-logo::after { display: none; }
            .brand-name { font-size: 18px !important; }
            .nav-menu .nav-link { padding: 0 8px !important; font-size: 11.5px !important; }
        }
        @media (max-width: 768px) {
            .navbar, .nav-inner { min-height: 64px !important; }
            .nav-inner { padding: 0 14px !important; }
            .brand-logo .logo-badge { width: 40px !important; height: 40px !important; border-radius: 13px !important; }
            .brand-name { font-size: 17px !important; }
            .auth-buttons .btn-primary { min-height: 39px !important; padding: 0 13px !important; font-size: 0 !important; }
            .auth-buttons .btn-primary i { font-size: 15px !important; margin: 0 !important; }
            .news-inner { padding: 0 14px !important; }
            .news-title-tag { font-size: 11px !important; }
            .news-action-link { display: none !important; }
        }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #090d16; }
        ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--primary); }

        /* Top Yellow Banner Bar */
        .top-notice-bar {
            background: #f59e0b;
            color: #0f172a;
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .top-notice-bar:hover {
            background: #d97706;
        }

        /* Container */
        .container {
            max-width: 1240px;
            margin: 0 auto;
            padding: 0 20px;
            width: 100%;
        }

        /* ================= TOP NAVBAR ================= */
        .navbar {
            background: rgba(11, 15, 25, 0.92);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 500 !important;
            padding: 14px 0;
            pointer-events: auto !important;
        }
        .nav-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .brand-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            cursor: pointer !important;
            flex-shrink: 0;
        }
        .brand-logo-img {
            height: 44px;
            width: auto;
            max-width: 180px;
            object-fit: contain;
            display: block;
            filter: drop-shadow(0 2px 8px rgba(245,158,11,0.4));
            transition: transform 0.22s ease;
        }
        .brand-logo:hover .brand-logo-img {
            transform: scale(1.06);
        }
        .brand-name {
            font-family: 'Kanit', sans-serif;
            font-size: 20px;
            font-weight: 900;
            letter-spacing: 0.5px;
            color: #ffffff;
            line-height: 1;
            white-space: nowrap;
        }
        .brand-name span { color: #f59e0b; }
        .nav-menu {
            display: flex;
            gap: 12px;
            list-style: none;
            align-items: center;
        }
        .nav-link {
            color: var(--text-muted);
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer !important;
            padding: 8px 16px;
            border-radius: var(--radius-sm);
        }
        .nav-link:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.08);
        }
        .nav-link.active {
            color: #ffffff;
            background: #1e293b;
            border: 1px solid rgba(255, 255, 255, 0.15);
            font-weight: 600;
        }
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .user-pill {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #1e293b;
            border: 1px solid var(--border-color);
            padding: 6px 14px;
            border-radius: var(--radius-sm);
            cursor: pointer !important;
            transition: 0.2s;
        }
        .user-avatar {
            width: 26px;
            height: 26px;
            border-radius: 4px;
            background: #0284c7;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            color: #ffffff;
        }
        .user-credit {
            color: #10b981;
            font-weight: 700;
            font-size: 14px;
        }
        .btn-topup-nav {
            background: #f59e0b;
            color: #0f172a;
            font-weight: 700;
            padding: 8px 18px;
            border-radius: var(--radius-sm);
            border: none;
            cursor: pointer !important;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            transition: background-color 0.2s;
        }
        .btn-topup-nav:hover { background: #d97706; }
        .btn-logout-nav {
            background: rgba(239, 68, 68, 0.15);
            color: #f87171;
            border: 1px solid rgba(239, 68, 68, 0.3);
            font-weight: 600;
            padding: 8px 14px;
            border-radius: var(--radius-sm);
            cursor: pointer !important;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            transition: all 0.2s;
        }
        .btn-logout-nav:hover {
            background: #ef4444;
            color: #ffffff;
        }

        /* ================= VIEW SECTIONS ================= */
        .view-section {
            display: none;
            opacity: 0;
            padding: 30px 0 60px 0;
            animation: fadeIn 0.3s ease forwards;
        }
        .view-section.active {
            display: block !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ================= HERO GRID ================= */
        .hero-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }
        .promo-banner-img {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: #0f172a;
            cursor: pointer !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .promo-banner-img img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: var(--radius-lg);
            transition: transform 0.3s ease;
        }
        .promo-banner-img:hover img {
            transform: scale(1.015);
        }
        .leaderboard-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 24px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            justify-content: center;
        }
        .leaderboard-title {
            font-size: 16px;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .leaderboard-title-left {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .leaderboard-title i { color: var(--primary); }
        .leaderboard-update-tag {
            font-size: 11px;
            color: var(--text-muted);
            font-weight: 400;
            background: rgba(255, 255, 255, 0.05);
            padding: 2px 8px;
            border-radius: 4px;
        }
        .spenders-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .spender-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
        }
        .spender-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .spender-rank {
            width: 26px;
            height: 26px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 800;
        }
        .rank-1 { background: #f59e0b; color: #0f172a; }
        .rank-2 { background: #94a3b8; color: #0f172a; }
        .rank-3 { background: #d97706; color: #ffffff; }
        .spender-name { font-size: 14px; font-weight: 600; }
        .spender-amount { font-size: 14px; font-weight: 800; color: #ffffff; }

        /* ================= FILTER TABS ================= */
        .filter-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 25px;
            overflow-x: auto;
            padding-bottom: 5px;
        }
        .tab-btn {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            padding: 10px 20px;
            border-radius: var(--radius-sm);
            cursor: pointer !important;
            font-weight: 600;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            transition: all 0.2s ease;
        }
        .tab-btn:hover {
            background: var(--bg-card-hover);
            color: #ffffff;
            border-color: rgba(255, 255, 255, 0.2);
        }
        .tab-btn.active {
            background: var(--primary);
            color: #0f172a;
            border-color: var(--primary);
            font-weight: 700;
        }

        /* ================= 2-ROW SQUIRCLE CAROUSEL ================= */
        .game-marquee-container {
            width: 100%;
            overflow: hidden;
            position: relative;
            padding: 10px 0 30px 0;
        }
        .marquee-track-row {
            width: 100%;
            overflow: hidden;
            margin-bottom: 20px;
            display: flex;
        }
        .game-marquee-container {
            width: 100%;
            overflow: hidden;
            position: relative;
            padding: 10px 0 30px 0;
            mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
        }
        .marquee-track-row {
            width: 100%;
            overflow: hidden;
            margin-bottom: 20px;
            display: flex;
        }
        .marquee-track-1 {
            display: flex;
            gap: 18px;
            width: max-content;
            animation: scrollMarqueeLeft 30s linear infinite;
            will-change: transform;
        }
        .marquee-track-2 {
            display: flex;
            gap: 18px;
            width: max-content;
            animation: scrollMarqueeRight 30s linear infinite;
            will-change: transform;
        }
        .marquee-track-row:hover .marquee-track-1,
        .marquee-track-row:hover .marquee-track-2 {
            animation-play-state: paused;
        }
        @keyframes scrollMarqueeLeft {
            0% { transform: translate3d(0, 0, 0); }
            100% { transform: translate3d(-50%, 0, 0); }
        }
        @keyframes scrollMarqueeRight {
            0% { transform: translate3d(-50%, 0, 0); }
            100% { transform: translate3d(0, 0, 0); }
        }

        
        /* ================= PREMIUM GOLDEN SHINE & SWEEP ANIMATION ================= */
        .game-app-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            width: 105px;
            cursor: pointer !important;
            flex-shrink: 0;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
        }
        .game-app-item:hover {
            transform: translateY(-8px) scale(1.04);
        }
        .app-icon-wrapper {
            width: 92px !important;
            height: 92px !important;
            border-radius: 26px !important;
            overflow: hidden !important;
            position: relative !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
            border: 2px solid rgba(255, 255, 255, 0.1) !important;
        }
        /* Hover state with persistent golden border & outer aura glow */
        .game-app-item:hover .app-icon-wrapper {
            border-color: #f59e0b !important;
            box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.8), 0 12px 35px rgba(245, 158, 11, 0.45), 0 0 20px rgba(251, 191, 36, 0.4) !important;
        }
        /* Light sweep diagonal beam on hover */
        .app-icon-wrapper::after {
            content: '';
            position: absolute;
            top: -60%;
            left: -80%;
            width: 60%;
            height: 220%;
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.5) 45%,
                rgba(254, 240, 138, 0.8) 50%,
                rgba(255, 255, 255, 0.5) 55%,
                rgba(255, 255, 255, 0) 100%
            );
            transform: rotate(25deg);
            opacity: 0;
            pointer-events: none;
            z-index: 5;
        }
        .game-app-item:hover .app-icon-wrapper::after {
            animation: lightSweepAnim 0.75s ease forwards;
        }
        @keyframes lightSweepAnim {
            0% {
                left: -80%;
                opacity: 0.8;
            }
            80% {
                left: 140%;
                opacity: 0.8;
            }
            100% {
                left: 140%;
                opacity: 0;
            }
        }
        .app-icon-img {
            width: 100% !important;
            height: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            text-align: center !important;
            color: #ffffff !important;
            font-weight: 700 !important;
            border-radius: 24px !important;
            padding: 8px !important;
            box-sizing: border-box !important;
            transition: transform 0.3s ease;
        }
        .game-app-item:hover .app-icon-img {
            transform: scale(1.02);
        }
        .game-app-item:hover .app-title {
            color: #f59e0b !important;
            text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
        }
        .app-badge-tag {
            position: absolute;
            top: 4px;
            right: 4px;
            background: #ef4444;
            color: #ffffff;
            font-size: 9px;
            font-weight: 800;
            padding: 2px 6px;
            border-radius: 6px;
            z-index: 2;
        }
        .app-title {
            font-size: 12px;
            font-weight: 600;
            color: #e2e8f0;
            margin-top: 8px;
            line-height: 1.3;
            max-width: 100px;
            transition: all 0.25s ease;
        }
        .app-sub-badge {
            font-size: 10px;
            color: #f59e0b;
            font-weight: 700;
            margin-top: 2px;
        }

        /* ================= CATALOG GAME CARDS (GOLDEN GLOW & LIGHT SWEEP) ================= */
        .catalog-games-grid {
            display: grid !important;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
            gap: 24px 16px !important;
            margin-top: 25px !important;
            justify-items: center !important;
            width: 100% !important;
        }
        .catalog-game-card {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            text-align: center !important;
            width: 120px !important;
            cursor: pointer !important;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
            position: relative !important;
            background: transparent !important;
            border: none !important;
            padding: 0 !important;
        }
        .catalog-game-card:hover {
            transform: translateY(-8px) scale(1.04) !important;
            background: transparent !important;
            box-shadow: none !important;
        }
        .catalog-icon-box {
            width: 96px !important;
            height: 96px !important;
            border-radius: 26px !important;
            flex-shrink: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            position: relative !important;
            overflow: hidden !important;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45) !important;
            border: 2px solid rgba(255, 255, 255, 0.1) !important;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }
        /* Golden rim & persistent glowing halo */
        .catalog-game-card:hover .catalog-icon-box {
            border-color: #f59e0b !important;
            box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.85), 0 14px 38px rgba(245, 158, 11, 0.45), 0 0 22px rgba(251, 191, 36, 0.4) !important;
        }
        /* Light sweep diagonal beam on hover */
        .catalog-icon-box::after {
            content: '';
            position: absolute;
            top: -60%;
            left: -80%;
            width: 60%;
            height: 220%;
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.55) 45%,
                rgba(254, 240, 138, 0.85) 50%,
                rgba(255, 255, 255, 0.55) 55%,
                rgba(255, 255, 255, 0) 100%
            );
            transform: rotate(25deg);
            opacity: 0;
            pointer-events: none;
            z-index: 5;
        }
        .catalog-game-card:hover .catalog-icon-box::after {
            animation: lightSweepAnim 0.75s ease forwards;
        }
        .catalog-game-card:hover .catalog-name {
            color: #f59e0b !important;
            text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
        }
        .catalog-badge {
            position: absolute;
            top: 4px;
            left: 4px;
            background: rgba(0, 0, 0, 0.7);
            color: #f59e0b;
            font-size: 8px;
            font-weight: 800;
            padding: 2px 5px;
            border-radius: 6px;
            text-transform: uppercase;
            z-index: 2;
        }
        .catalog-badge.badge-red {
            background: #ef4444;
            color: #ffffff;
        }
        .catalog-icon-title {
            font-size: 14px;
            font-weight: 900;
            color: #ffffff;
            text-align: center;
            padding: 4px;
            line-height: 1.1;
        }
        .catalog-game-info {
            width: 100%;
            margin-top: 10px;
            text-align: center;
        }
        .catalog-name {
            font-size: 13px;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 3px;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .catalog-tag {
            font-size: 11px;
            color: #94a3b8;
            line-height: 1.2;
        }

        /* ================= ULTRA LUXURY WHY CHOOSE US CARDS ================= */
        .features-section {
            margin-top: 50px !important;
            margin-bottom: 50px !important;
            width: 100% !important;
            position: relative !important;
            z-index: 5 !important;
        }
        .features-grid {
            display: grid !important;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
            gap: 24px !important;
            margin-top: 30px !important;
            width: 100% !important;
        }
        .feature-card {
            background: linear-gradient(145deg, #0d1527 0%, #070b14 100%) !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            border-radius: 20px !important;
            padding: 32px 24px !important;
            text-align: center !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
            position: relative !important;
            overflow: hidden !important;
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
        }
        .feature-card::before {
            content: '' !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            height: 3px !important;
            background: linear-gradient(90deg, transparent, #f59e0b, transparent) !important;
            opacity: 0 !important;
            transition: opacity 0.35s ease !important;
        }
        .feature-card:hover {
            transform: translateY(-8px) !important;
            border-color: rgba(245, 158, 11, 0.4) !important;
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(245, 158, 11, 0.15) !important;
        }
        .feature-card:hover::before {
            opacity: 1 !important;
        }
        .feature-icon {
            width: 70px !important;
            height: 70px !important;
            border-radius: 20px !important;
            background: rgba(245, 158, 11, 0.1) !important;
            border: 1px solid rgba(245, 158, 11, 0.3) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 28px !important;
            color: #f59e0b !important;
            margin-bottom: 20px !important;
            box-shadow: 0 8px 20px rgba(245, 158, 11, 0.2) !important;
            transition: all 0.35s ease !important;
        }
        .feature-card:hover .feature-icon {
            transform: scale(1.1) rotate(5deg) !important;
            background: rgba(245, 158, 11, 0.2) !important;
            box-shadow: 0 10px 25px rgba(245, 158, 11, 0.35) !important;
            color: #fbbf24 !important;
        }
        .feature-title {
            font-size: 18px !important;
            font-weight: 800 !important;
            color: #ffffff !important;
            margin-bottom: 10px !important;
            letter-spacing: -0.3px !important;
            line-height: 1.3 !important;
        }
        .feature-desc {
            font-size: 13px !important;
            color: #94a3b8 !important;
            line-height: 1.6 !important;
            margin: 0 !important;
        }

        /* ================= DEDICATED FULLPAGE AUTH VIEW (CYBERPUNK NEONLIONS STYLE) ================= */
        #view-auth-page {
            display: none;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            z-index: 100000 !important;
            background-color: #050811 !important;
            overflow-y: auto !important;
            box-sizing: border-box !important;
            padding: 20px !important;
            pointer-events: none;
        }
        .auth-page-top-bar {
            display: flex !important;
            justify-content: flex-end !important;
            align-items: center !important;
            padding: 24px 36px !important;
            width: 100% !important;
            box-sizing: border-box !important;
            position: relative !important;
            z-index: 10 !important;
        }
        .auth-trust-pills-bar {
            display: flex !important;
            align-items: center !important;
            background: rgba(10, 16, 30, 0.75) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-radius: 14px !important;
            padding: 6px 16px !important;
            gap: 20px !important;
        }
        .trust-pill-item {
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            color: #ffffff !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
            padding-right: 16px !important;
        }
        .trust-pill-item:last-child {
            border-right: none !important;
            padding-right: 0 !important;
        }
        .trust-pill-item i {
            color: #f97316 !important;
            font-size: 14px !important;
        }
        .trust-pill-item .trust-sub {
            display: block !important;
            font-size: 9px !important;
            color: #94a3b8 !important;
            font-weight: 500 !important;
            margin-top: -1px !important;
        }
        .auth-back-home-btn {
            position: absolute !important;
            top: 24px !important;
            left: 36px !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            background: rgba(10, 16, 30, 0.8) !important;
            backdrop-filter: blur(10px) !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            color: #cbd5e1 !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            padding: 8px 16px !important;
            border-radius: 12px !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            z-index: 10 !important;
        }
        .auth-back-home-btn:hover {
            background: rgba(249, 115, 22, 0.15) !important;
            border-color: #f97316 !important;
            color: #f97316 !important;
            transform: translateX(-3px) !important;
        }
        .auth-page-main-body {
            display: flex !important;
            align-items: center !important;
            padding: 0 40px 0 80px !important;
            flex: 1 !important;
            position: relative !important;
            z-index: 5 !important;
            max-width: 1400px !important;
            margin: 0 auto !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }
        .auth-page-form-container {
            width: 100% !important;
            max-width: 420px !important;
            display: flex !important;
            flex-direction: column !important;
        }
        .auth-brand-header {
            margin-bottom: 24px !important;
        }
        .auth-brand-logo-title {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            margin-bottom: 8px !important;
        }
        .auth-brand-logo-title h1 {
            margin: 0 !important;
            font-size: 34px !important;
            font-weight: 900 !important;
            color: #ffffff !important;
            letter-spacing: 0.5px !important;
            line-height: 1 !important;
            text-transform: uppercase !important;
        }
        .auth-brand-logo-title h1 span {
            color: #f97316 !important;
            text-shadow: 0 0 15px rgba(249, 115, 22, 0.6) !important;
        }
        .auth-brand-tagline {
            font-size: 11px !important;
            font-weight: 800 !important;
            color: #94a3b8 !important;
            letter-spacing: 2px !important;
            text-transform: uppercase !important;
            margin-bottom: 14px !important;
        }
        .auth-welcome-heading {
            font-size: 13px !important;
            color: #cbd5e1 !important;
            font-weight: 500 !important;
            line-height: 1.4 !important;
        }
        .auth-welcome-heading strong {
            display: block !important;
            font-size: 20px !important;
            font-weight: 900 !important;
            color: #ffffff !important;
            margin-top: 2px !important;
        }
        .auth-page-input-group {
            margin-bottom: 14px !important;
            position: relative !important;
        }
        .auth-page-input-wrap {
            position: relative !important;
            display: flex !important;
            align-items: center !important;
        }
        .auth-page-input-icon {
            position: absolute !important;
            left: 16px !important;
            color: #64748b !important;
            font-size: 15px !important;
            pointer-events: none !important;
            transition: color 0.2s ease !important;
        }
        .auth-page-input {
            width: 100% !important;
            background: rgba(10, 16, 30, 0.7) !important;
            backdrop-filter: blur(10px) !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            border-radius: 12px !important;
            padding: 13px 16px 13px 44px !important;
            color: #ffffff !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            box-sizing: border-box !important;
            transition: all 0.25s ease !important;
            outline: none !important;
        }
        .auth-page-input:focus {
            border-color: #f97316 !important;
            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25) !important;
            background: rgba(10, 16, 30, 0.9) !important;
        }
        .auth-page-input:focus + .auth-page-input-icon,
        .auth-page-input-wrap:focus-within .auth-page-input-icon {
            color: #f97316 !important;
        }
        .auth-page-toggle-pwd {
            position: absolute !important;
            right: 14px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            color: #64748b !important;
            cursor: pointer !important;
            font-size: 15px !important;
            padding: 4px !important;
            transition: color 0.2s ease !important;
        }
        .auth-page-toggle-pwd:hover {
            color: #f97316 !important;
        }
        .auth-options-row {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            margin-bottom: 18px !important;
            font-size: 12px !important;
        }
        .auth-remember-checkbox {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            color: #94a3b8 !important;
            cursor: pointer !important;
        }
        .auth-remember-checkbox input {
            accent-color: #f97316 !important;
            width: 15px !important;
            height: 15px !important;
            cursor: pointer !important;
        }
        .auth-forgot-link {
            color: #94a3b8 !important;
            text-decoration: none !important;
            transition: color 0.2s ease !important;
            cursor: pointer !important;
        }
        .auth-forgot-link:hover {
            color: #f97316 !important;
        }
        .btn-neon-auth-submit {
            width: 100% !important;
            background: linear-gradient(135deg, #fb923c 0%, #f97316 50%, #ea580c 100%) !important;
            color: #ffffff !important;
            font-size: 15px !important;
            font-weight: 900 !important;
            padding: 13px !important;
            border-radius: 12px !important;
            border: none !important;
            cursor: pointer !important;
            box-shadow: 0 8px 25px rgba(249, 115, 22, 0.45) !important;
            transition: all 0.25s ease !important;
            text-align: center !important;
            letter-spacing: 0.5px !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
        }
        .btn-neon-auth-submit:hover {
            background: linear-gradient(135deg, #fdba74 0%, #fb923c 50%, #f97316 100%) !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 12px 32px rgba(249, 115, 22, 0.65) !important;
        }
        .auth-page-divider {
            display: flex !important;
            align-items: center !important;
            text-align: center !important;
            color: #64748b !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            margin: 18px 0 14px 0 !important;
        }
        .auth-page-divider::before,
        .auth-page-divider::after {
            content: '' !important;
            flex: 1 !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        }
        .auth-page-divider span {
            padding: 0 12px !important;
        }
        .auth-social-buttons-grid {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 12px !important;
            margin-bottom: 22px !important;
        }
        .btn-social-auth {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
            background: rgba(10, 16, 30, 0.7) !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            border-radius: 10px !important;
            color: #cbd5e1 !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            padding: 10px !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
        }
        .btn-social-auth:hover {
            background: rgba(255, 255, 255, 0.1) !important;
            color: #ffffff !important;
            border-color: rgba(255, 255, 255, 0.3) !important;
            transform: translateY(-1px) !important;
        }
        .auth-switch-mode-text {
            text-align: center !important;
            font-size: 13px !important;
            color: #94a3b8 !important;
        }
        .auth-switch-mode-text a {
            color: #f97316 !important;
            font-weight: 800 !important;
            text-decoration: none !important;
            cursor: pointer !important;
            margin-left: 4px !important;
            transition: all 0.2s ease !important;
        }
        .auth-switch-mode-text a:hover {
            color: #fb923c !important;
            text-decoration: underline !important;
        }
        .auth-page-footer {
            text-align: center !important;
            padding: 20px !important;
            font-size: 11px !important;
            color: #64748b !important;
            position: relative !important;
            z-index: 10 !important;
        }
        @media (max-width: 900px) {
            .auth-page-main-body {
                padding: 0 20px !important;
                justify-content: center !important;
            }
            .auth-trust-pills-bar {
                display: none !important;
            }
            .auth-back-home-btn {
                position: relative !important;
                top: auto !important;
                left: auto !important;
            }
            .auth-page-top-bar {
                justify-content: flex-start !important;
                padding: 16px 20px !important;
            }
        }

        /* ================= TOPUP VIEW ================= */
        .topup-layout {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 25px;
        }
        .step-box {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 24px;
            margin-bottom: 20px;
        }
        .step-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 18px;
            font-size: 16px;
            font-weight: 700;
            color: #ffffff;
        }
        .step-num {
            width: 28px;
            height: 28px;
            background: var(--primary);
            color: #0f172a;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 800;
        }
        .form-control {
            width: 100%;
            padding: 12px 16px;
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            color: #ffffff;
            font-size: 14px;
            outline: none;
            transition: border-color 0.2s;
        }
        .form-control:focus {
            border-color: var(--primary);
        }
        .packages-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 12px;
        }
        .package-card {
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 16px;
            cursor: pointer !important;
            text-align: center;
            transition: all 0.2s ease;
        }
        .package-card:hover {
            background: var(--bg-card-hover);
            border-color: var(--border-hover);
            transform: translateY(-2px);
        }
        .package-card.selected {
            background: rgba(245, 158, 11, 0.1);
            border-color: var(--primary);
            box-shadow: 0 0 0 1px var(--primary);
        }
        .package-amount {
            font-size: 15px;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 4px;
        }
        .package-price {
            font-size: 14px;
            font-weight: 700;
            color: var(--primary);
        }
        .summary-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 24px;
            position: sticky;
            top: 90px;
        }
        .summary-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-color);
        }
        .summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
            font-size: 14px;
            color: var(--text-muted);
        }
        .summary-row strong { color: #ffffff; }
        .summary-total {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid var(--border-color);
            font-size: 16px;
            font-weight: 700;
        }
        .summary-total span:last-child {
            font-size: 22px;
            color: var(--primary);
        }
        .btn-checkout {
            width: 100%;
            background: var(--primary);
            color: #0f172a;
            font-size: 16px;
            font-weight: 800;
            padding: 14px;
            border-radius: var(--radius-sm);
            border: none;
            cursor: pointer !important;
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: background-color 0.2s;
        }
        .btn-checkout:hover { background: var(--primary-hover); }

        /* ================= PAYMENT VIEW ================= */
        .payment-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
        }
        .qr-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 30px;
            text-align: center;
        }
        .qr-box {
            width: 220px;
            height: 220px;
            margin: 20px auto;
            background: #ffffff;
            border-radius: var(--radius-md);
            padding: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
        }
        .qr-box img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .quick-amount-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 15px;
        }
        .quick-amount-btn {
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid var(--border-color);
            color: #ffffff;
            padding: 10px;
            border-radius: var(--radius-sm);
            font-weight: 700;
            cursor: pointer !important;
            transition: 0.2s;
        }
        .quick-amount-btn:hover {
            background: var(--bg-card-hover);
            border-color: var(--primary);
        }

        /* ================= PROFILE VIEW ================= */
        .profile-layout {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 25px;
        }
        .profile-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 24px;
            text-align: center;
        }
        .big-avatar {
            width: 80px;
            height: 80px;
            background: #0284c7;
            color: #ffffff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            font-weight: 800;
            margin: 0 auto 16px auto;
            border: 3px solid var(--primary);
        }
        .history-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }
        .history-table th, .history-table td {
            padding: 12px 14px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }
        .history-table th {
            color: var(--text-muted);
            font-weight: 600;
            background: rgba(255, 255, 255, 0.02);
        }
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 700;
        }
        .status-success {
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
        }

        /* ================= AUTH MODAL ================= */
        .modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(8px);
            z-index: 99999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            pointer-events: none;
        }
        .modal-backdrop.active {
            display: flex !important;
            pointer-events: auto !important;
        }
        /* ================= ULTRA LUXURY AUTH MODAL (SPLIT ARTWORK + FORM) ================= */
        .auth-card {
            background: #0d1527 !important;
            border: 1px solid rgba(245, 158, 11, 0.3) !important;
            border-radius: 24px !important;
            width: 100% !important;
            max-width: 820px !important;
            position: relative !important;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(245, 158, 11, 0.15) !important;
            animation: popIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
            overflow: hidden !important;
            display: grid !important;
            grid-template-columns: 1fr 1.15fr !important;
            padding: 0 !important;
        }
        @media (max-width: 768px) {
            .auth-card {
                grid-template-columns: 1fr !important;
                max-width: 420px !important;
            }
            .auth-modal-banner {
                display: none !important;
            }
        }
        .auth-modal-banner {
            position: relative !important;
            background: #070b14 !important;
            overflow: hidden !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: flex-end !important;
            padding: 30px 24px !important;
        }
        .auth-banner-bg {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            opacity: 0.88 !important;
            transform: scale(1.03) !important;
            transition: transform 6s ease !important;
        }
        .auth-card:hover .auth-banner-bg {
            transform: scale(1.08) !important;
        }
        .auth-banner-overlay {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: linear-gradient(180deg, rgba(7, 11, 20, 0.1) 0%, rgba(7, 11, 20, 0.7) 60%, rgba(13, 21, 39, 0.98) 100%) !important;
            z-index: 2 !important;
        }
        .auth-banner-content {
            position: relative !important;
            z-index: 3 !important;
        }
        .auth-banner-badge {
            display: inline-flex !important;
            align-items: center !important;
            gap: 6px !important;
            background: rgba(245, 158, 11, 0.15) !important;
            border: 1px solid rgba(245, 158, 11, 0.4) !important;
            color: #f59e0b !important;
            font-size: 11px !important;
            font-weight: 800 !important;
            padding: 4px 10px !important;
            border-radius: 20px !important;
            margin-bottom: 12px !important;
            letter-spacing: 0.5px !important;
            text-transform: uppercase !important;
        }
        .auth-banner-title {
            font-size: 24px !important;
            font-weight: 900 !important;
            color: #ffffff !important;
            line-height: 1.2 !important;
            margin-bottom: 6px !important;
            text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8) !important;
        }
        .auth-banner-title span {
            color: #f59e0b !important;
        }
        .auth-banner-desc {
            font-size: 12px !important;
            color: #cbd5e1 !important;
            line-height: 1.4 !important;
            margin: 0 !important;
        }
        .auth-form-side {
            padding: 36px 32px 32px 32px !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            position: relative !important;
            background: #0d1527 !important;
        }
        .modal-close {
            position: absolute !important;
            top: 16px !important;
            right: 18px !important;
            color: #64748b !important;
            font-size: 20px !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            z-index: 10 !important;
            width: 32px !important;
            height: 32px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 50% !important;
            background: rgba(255, 255, 255, 0.05) !important;
        }
        .modal-close:hover {
            color: #ffffff !important;
            background: rgba(239, 68, 68, 0.2) !important;
            transform: rotate(90deg) !important;
        }
        .auth-tab-pill-box {
            display: flex !important;
            background: #060911 !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            border-radius: 12px !important;
            padding: 4px !important;
            margin-bottom: 22px !important;
            gap: 4px !important;
        }
        .tab-pill {
            flex: 1 !important;
            text-align: center !important;
            padding: 10px 14px !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            color: #94a3b8 !important;
            cursor: pointer !important;
            border-radius: 8px !important;
            transition: all 0.25s ease !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
        }
        .tab-pill.active {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
            color: #ffffff !important;
            font-weight: 800 !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(245, 158, 11, 0.3) !important;
        }
        .tab-pill.active i {
            color: #f59e0b !important;
        }
        .form-group {
            margin-bottom: 16px !important;
        }
        .form-group label {
            display: block !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            color: #cbd5e1 !important;
            margin-bottom: 6px !important;
            letter-spacing: 0.2px !important;
        }
        .auth-input-wrapper {
            position: relative !important;
            display: flex !important;
            align-items: center !important;
        }
        .auth-input-icon {
            position: absolute !important;
            left: 14px !important;
            color: #64748b !important;
            font-size: 14px !important;
            pointer-events: none !important;
            transition: color 0.2s ease !important;
        }
        .auth-card .form-control {
            width: 100% !important;
            background: #070b14 !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-radius: 10px !important;
            padding: 12px 14px 12px 40px !important;
            color: #ffffff !important;
            font-size: 13px !important;
            font-weight: 500 !important;
            box-sizing: border-box !important;
            transition: all 0.25s ease !important;
            outline: none !important;
        }
        .auth-card .form-control:focus {
            border-color: #f59e0b !important;
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
            background: #0a101d !important;
        }
        .auth-card .form-control:focus + .auth-input-icon,
        .auth-card .auth-input-wrapper:focus-within .auth-input-icon {
            color: #f59e0b !important;
        }
        .password-input-wrap {
            position: relative !important;
            width: 100% !important;
        }
        .password-input-wrap .form-control {
            padding-right: 42px !important;
        }
        .toggle-pwd-btn {
            position: absolute !important;
            right: 14px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            color: #64748b !important;
            cursor: pointer !important;
            font-size: 14px !important;
            transition: color 0.2s ease !important;
            padding: 4px !important;
        }
        .toggle-pwd-btn:hover {
            color: #f59e0b !important;
        }
        .btn-auth-submit {
            width: 100% !important;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
            color: #0f172a !important;
            font-size: 14px !important;
            font-weight: 800 !important;
            padding: 13px !important;
            border-radius: 10px !important;
            border: none !important;
            cursor: pointer !important;
            margin-top: 10px !important;
            box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35) !important;
            transition: all 0.25s ease !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
        }
        .btn-auth-submit:hover {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 12px 30px rgba(245, 158, 11, 0.45) !important;
        }
        .auth-divider {
            display: flex !important;
            align-items: center !important;
            text-align: center !important;
            color: #64748b !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            margin: 16px 0 12px 0 !important;
        }
        .auth-divider::before,
        .auth-divider::after {
            content: '' !important;
            flex: 1 !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        }
        .auth-divider span {
            padding: 0 10px !important;
        }
        .btn-google-auth {
            width: 100% !important;
            background: #ffffff !important;
            color: #0f172a !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            padding: 11px !important;
            border-radius: 10px !important;
            border: none !important;
            cursor: pointer !important;
            margin-top: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 10px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
            transition: all 0.2s ease !important;
        }
        .btn-google-auth:hover {
            background: #f8fafc !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
        }

        /* ================= SWEETALERT CUSTOM POPUP ================= */
        .swal-modal-card {
            background: var(--bg-card);
            border: 1px solid var(--border-hover);
            border-radius: var(--radius-lg);
            width: 100%;
            max-width: 400px;
            padding: 30px 24px;
            text-align: center;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
        }
        .swal-icon-wrap {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: rgba(245, 158, 11, 0.15);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin: 0 auto 16px auto;
        }
        .swal-title {
            font-size: 20px;
            font-weight: 800;
            color: #ffffff;
            margin-bottom: 8px;
        }
        .swal-text {
            font-size: 14px;
            color: var(--text-muted);
            line-height: 1.5;
            margin-bottom: 24px;
        }

        /* ================= EXACT LIVE ORDER TOAST ================= */
        
        /* ================= EXACT DARK THEME LIVE ORDER NOTIFICATION ================= */
        .custom-live-card-toast {
            position: fixed !important;
            bottom: 24px !important;
            left: 24px !important;
            z-index: 999999 !important;
            background: rgba(11, 19, 36, 0.95) !important;
            backdrop-filter: blur(14px) !important;
            -webkit-backdrop-filter: blur(14px) !important;
            border-radius: 16px !important;
            box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
            padding: 12px 14px !important;
            display: none;
            align-items: center !important;
            gap: 14px !important;
            cursor: pointer !important;
            transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
            min-width: 290px !important;
            max-width: 340px !important;
            box-sizing: border-box !important;
            pointer-events: auto !important;
        }
        .custom-live-card-toast:hover {
            transform: translateY(-4px) scale(1.02) !important;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(245, 158, 11, 0.3) !important;
        }
        .toast-poster-wrap {
            width: 58px !important;
            height: 80px !important;
            border-radius: 10px !important;
            overflow: hidden !important;
            flex-shrink: 0 !important;
            background: #000000 !important;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6) !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            pointer-events: none !important;
        }
        .toast-poster-img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            display: block !important;
        }
        .toast-info-wrap {
            flex: 1 !important;
            min-width: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 4px !important;
            position: relative !important;
        }
        .toast-close-x {
            position: absolute !important;
            top: -4px !important;
            right: -2px !important;
            color: #94a3b8 !important;
            font-size: 16px !important;
            cursor: pointer !important;
            padding: 6px !important;
            transition: all 0.2s ease !important;
            line-height: 1 !important;
            z-index: 10 !important;
            pointer-events: auto !important;
        }
        .toast-close-x:hover {
            color: #ffffff !important;
            transform: scale(1.2) !important;
        }
        .toast-pill-tag {
            background: #00c06d !important;
            color: #ffffff !important;
            font-size: 10px !important;
            font-weight: 700 !important;
            padding: 3px 10px !important;
            border-radius: 6px !important;
            display: inline-block !important;
            width: fit-content !important;
            line-height: 1.2 !important;
            letter-spacing: 0.2px !important;
            margin-bottom: 2px !important;
            pointer-events: none !important;
        }
        .toast-user-line {
            color: #f8fafc !important;
            font-size: 13px !important;
            font-weight: 800 !important;
            line-height: 1.2 !important;
            pointer-events: none !important;
        }
        .toast-user-line span {
            font-weight: 900 !important;
            color: #ffffff !important;
        }
        .toast-desc-line {
            color: #f8fafc !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            line-height: 1.3 !important;
            word-break: break-word !important;
            pointer-events: none !important;
        }
        .toast-game-highlight {
            color: #ff5500 !important;
            font-weight: 800 !important;
        }
        .toast-timestamp-line {
            color: #94a3b8 !important;
            font-size: 10px !important;
            font-weight: 500 !important;
            margin-top: 3px !important;
            line-height: 1 !important;
            pointer-events: none !important;
        }

        /* ================= EXACT 3-COLUMN LEGAL & FANPAGE FOOTER ================= */
        .footer {
            background: #0b1324 !important;
            border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
            margin-top: 50px !important;
            padding: 0 !important;
            width: 100% !important;
            position: relative !important;
            z-index: 10 !important;
        }
        .footer-inner {
            display: grid !important;
            grid-template-columns: 1.4fr 1.1fr 1fr !important;
            gap: 40px !important;
            max-width: 1240px !important;
            margin: 0 auto !important;
            padding: 45px 20px 35px 20px !important;
            box-sizing: border-box !important;
        }
        .footer-logo-title {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            margin-bottom: 20px !important;
        }
        .footer-logo-title .footer-logo-circle {
            width: 44px !important;
            height: 44px !important;
            border-radius: 50% !important;
            background: #ffffff !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: #0f172a !important;
            font-size: 20px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        }
        .footer-logo-text h3 {
            margin: 0 !important;
            font-size: 20px !important;
            font-weight: 800 !important;
            color: #38bdf8 !important;
            letter-spacing: -0.5px !important;
            line-height: 1.1 !important;
        }
        .footer-logo-text span {
            font-size: 11px !important;
            font-weight: 700 !important;
            color: #94a3b8 !important;
            letter-spacing: 0.5px !important;
            text-transform: uppercase !important;
        }
        .footer-col-title {
            font-size: 15px !important;
            font-weight: 700 !important;
            color: #ffffff !important;
            margin-bottom: 16px !important;
        }
        .footer-legal-desc {
            font-size: 12.5px !important;
            color: #94a3b8 !important;
            line-height: 1.75 !important;
            margin: 0 !important;
            text-align: justify !important;
        }
        .footer-info-list {
            display: flex !important;
            flex-direction: column !important;
            gap: 12px !important;
            font-size: 13px !important;
            color: #cbd5e1 !important;
            margin-bottom: 18px !important;
        }
        .footer-info-item {
            display: flex !important;
            align-items: flex-start !important;
            gap: 10px !important;
            line-height: 1.5 !important;
        }
        .footer-info-item i {
            color: var(--primary) !important;
            font-size: 14px !important;
            margin-top: 3px !important;
            width: 16px !important;
            text-align: center !important;
        }
        .footer-privacy-link {
            color: #38bdf8 !important;
            font-size: 13px !important;
            text-decoration: underline !important;
            cursor: pointer !important;
            display: inline-block !important;
            transition: color 0.2s !important;
        }
        .footer-privacy-link:hover {
            color: #7dd3fc !important;
        }
        /* Facebook Widget Card Mockup */
        .fb-page-widget-card {
            background: #ffffff !important;
            border-radius: 8px !important;
            overflow: hidden !important;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
            max-width: 320px !important;
        }
        .fb-page-widget-head {
            background: #f1f5f9 !important;
            padding: 12px 14px !important;
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            border-bottom: 1px solid #e2e8f0 !important;
        }
        .fb-page-avatar {
            width: 44px !important;
            height: 44px !important;
            border-radius: 6px !important;
            background: #0f172a !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: var(--primary) !important;
            font-size: 20px !important;
            flex-shrink: 0 !important;
        }
        .fb-page-info strong {
            display: block !important;
            font-size: 13px !important;
            color: #0f172a !important;
            line-height: 1.2 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }
        .fb-page-info span {
            font-size: 11px !important;
            color: #64748b !important;
        }
        .fb-page-widget-action {
            background: #f8fafc !important;
            padding: 8px 14px !important;
        }
        .btn-fb-follow {
            background: #e2e8f0 !important;
            color: #334155 !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            padding: 5px 12px !important;
            border-radius: 4px !important;
            border: 1px solid #cbd5e1 !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 6px !important;
            text-decoration: none !important;
            transition: all 0.2s !important;
        }
        .btn-fb-follow:hover {
            background: #1877F2 !important;
            color: #ffffff !important;
            border-color: #1877F2 !important;
        }

        /* Bottom Bar */
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            max-width: 1240px !important;
            margin: 0 auto !important;
            padding: 20px !important;
            font-size: 12px !important;
            color: #94a3b8 !important;
            text-align: center !important;
        }

        /* Responsive Breakpoints */
        @media (max-width: 900px) {
            .hero-grid, .topup-layout, .payment-layout, .profile-layout {
                grid-template-columns: 1fr;
            }
            .footer-inner {
                grid-template-columns: 1fr 1fr !important;
            }
            .nav-menu { display: none; }
        }
        @media (max-width: 600px) {
            .footer-inner {
                grid-template-columns: 1fr !important;
            }
        }
    

        /* ================= PHYSICAL GIFT CARD UI (บัตรเติมเงิน) ================= */
        #gift-cards-section {
            display: none;
            animation: fadeIn 0.3s ease forwards;
        }
        #gift-cards-section.active {
            display: block !important;
        }
        .gift-card-section-header {
            margin-bottom: 28px;
        }
        .gift-card-section-header h2 {
            font-size: 22px;
            font-weight: 800;
            color: #ffffff;
            margin-bottom: 6px;
        }
        .gift-card-section-header p {
            color: #94a3b8;
            font-size: 13px;
        }
        .gift-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 200px));
            gap: 24px;
            justify-content: start;
        }
        .gift-card-item {
            cursor: pointer;
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
        .gift-card-item:hover {
            transform: translateY(-8px) scale(1.03);
        }
        .gift-card-img-wrap {
            width: 100%;
            aspect-ratio: 2 / 3;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.08);
            transition: box-shadow 0.25s ease;
            background: #111827;
        }
        .gift-card-item:hover .gift-card-img-wrap {
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(245, 158, 11, 0.35);
        }
        .gift-card-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .gift-card-label {
            text-align: center;
            width: 100%;
        }
        .gift-card-name {
            font-size: 13px;
            font-weight: 700;
            color: #f1f5f9;
            line-height: 1.3;
            margin-bottom: 3px;
        }
        .gift-card-subtext {
            font-size: 11px;
            color: #64748b;
            font-weight: 500;
        }

        @keyframes zoomInSplash {
            from { opacity: 0; transform: scale(0.92); }
            to { opacity: 1; transform: scale(1); }
        }
    
        /* ================= FLOATING CUTE ANIME MASCOT CONTACT POPUP ================= */
        .mascot-floating-widget {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 9999;
            display: flex;
            align-items: flex-end;
            gap: 12px;
            pointer-events: none;
            transition: all 0.3s ease;
        }

        .mascot-speech-bubble {
            pointer-events: auto;
            background: linear-gradient(135deg, #1e293b, #0f172a);
            border: 1.5px solid #f59e0b;
            border-radius: 18px;
            padding: 12px 16px;
            color: #ffffff;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(245, 158, 11, 0.3);
            max-width: 210px;
            position: relative;
            cursor: pointer;
            animation: mascotBubbleFloat 3s ease-in-out infinite;
            margin-bottom: 25px;
        }

        .mascot-speech-bubble::after {
            content: '';
            position: absolute;
            bottom: 12px;
            right: -8px;
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 9px solid #f59e0b;
        }

        .mascot-speech-bubble-close {
            position: absolute;
            top: -8px;
            left: -8px;
            width: 22px;
            height: 22px;
            background: #ef4444;
            color: #ffffff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.5);
            transition: transform 0.2s, background 0.2s;
            z-index: 10;
        }

        .mascot-speech-bubble-close:hover {
            transform: scale(1.15);
            background: #dc2626;
        }

        .mascot-speech-title {
            font-size: 13px;
            font-weight: 800;
            color: #fbbf24;
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 3px;
        }

        .mascot-speech-desc {
            font-size: 11px;
            color: #cbd5e1;
            line-height: 1.35;
        }

        /* Desktop Mascot Button (Proper compact size ~110px width) */
        .mascot-character-btn {
            pointer-events: auto;
            width: 110px;
            max-width: 110px;
            height: auto;
            max-height: 150px;
            cursor: pointer;
            filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 15px rgba(245, 158, 11, 0.4));
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s;
            animation: mascotBounce 3s ease-in-out infinite;
            display: block;
        }

        .mascot-character-btn:hover {
            transform: scale(1.08) translateY(-6px);
            filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 25px rgba(245, 158, 11, 0.7));
        }

        @keyframes mascotBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }

        @keyframes mascotBubbleFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-4px); }
        }

        /* Contact Channels Modal */
        .contact-channel-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(5, 8, 17, 0.85);
            backdrop-filter: blur(8px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 100000;
            padding: 20px;
        }

        .contact-channel-card {
            background: linear-gradient(145deg, #111827, #0b0f19);
            border: 1.5px solid rgba(245, 158, 11, 0.4);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(245, 158, 11, 0.25);
            border-radius: 24px;
            width: 100%;
            max-width: 440px;
            padding: 28px;
            position: relative;
            animation: modalFadeIn 0.3s ease-out;
            text-align: center;
        }

        .contact-modal-close-btn {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 34px;
            height: 34px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 50%;
            color: #94a3b8;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 14px;
        }

        .contact-modal-close-btn:hover {
            background: #ef4444;
            color: #fff;
            border-color: #ef4444;
            transform: rotate(90deg);
        }

        .contact-channel-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 18px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            margin-bottom: 12px;
            text-decoration: none;
            color: #ffffff;
            transition: all 0.25s ease;
            cursor: pointer;
        }

        .contact-channel-item:hover {
            background: rgba(245, 158, 11, 0.12);
            border-color: #f59e0b;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.4);
        }


        /* ================= DEDICATED PRIVACY POLICY VIEW ================= */
        .privacy-page-wrap {
            max-width: 900px;
            margin: 40px auto;
            background: linear-gradient(145deg, rgba(17, 24, 39, 0.95), rgba(11, 15, 25, 0.98));
            border: 1px solid rgba(245, 158, 11, 0.25);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(245, 158, 11, 0.1);
            border-radius: 24px;
            padding: 40px 48px;
            color: #cbd5e1;
            position: relative;
        }

        @media (max-width: 768px) {
            .privacy-page-wrap {
                padding: 24px 20px;
                margin: 20px 10px;
            }
        }

        .privacy-header-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(245, 158, 11, 0.12);
            border: 1px solid rgba(245, 158, 11, 0.3);
            padding: 6px 16px;
            border-radius: 20px;
            color: #f59e0b;
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 16px;
        }

        .privacy-main-title {
            font-size: 28px;
            font-weight: 900;
            color: #ffffff;
            margin-bottom: 8px;
        }

        .privacy-update-date {
            font-size: 12px;
            color: #64748b;
            margin-bottom: 28px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding-bottom: 16px;
        }

        .privacy-section-block {
            margin-bottom: 24px;
        }

        .privacy-section-block h3 {
            font-size: 16px;
            font-weight: 800;
            color: #f8fafc;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .privacy-section-block h3 i {
            color: #f59e0b;
            font-size: 14px;
        }

        .privacy-section-block p, .privacy-section-block ul {
            font-size: 13.5px;
            line-height: 1.7;
            color: #94a3b8;
            margin-bottom: 8px;
        }

        .privacy-section-block ul {
            padding-left: 20px;
        }

        .privacy-section-block li {
            margin-bottom: 6px;
        }

        .btn-privacy-back {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #0b0f19;
            font-weight: 800;
            font-size: 14px;
            padding: 10px 24px;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            transition: all 0.25s;
            margin-top: 20px;
        }

        .btn-privacy-back:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
            color: #000;
        }


        /* ================= EXACT LUXURY GAME GOLDEN NOTICE MARQUEE BAR ================= */
        .luxury-notice-wrapper {
            width: 100%;
            max-width: 1320px;
            margin: 16px auto 10px auto;
            padding: 0 16px;
            box-sizing: border-box;
            position: relative;
            z-index: 10;
        }

        .luxury-notice-bar {
            background: linear-gradient(90deg, rgba(15, 23, 42, 0.95) 0%, rgba(10, 15, 29, 0.98) 100%);
            border: 1.5px solid #f59e0b;
            border-radius: 30px;
            box-shadow: 0 0 20px rgba(245, 158, 11, 0.35), inset 0 0 15px rgba(245, 158, 11, 0.15);
            display: flex;
            align-items: center;
            padding: 7px 16px 7px 12px;
            gap: 14px;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
        }

        /* Number Badge on the Left */
        .notice-number-pill {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #ffffff;
            font-size: 13px;
            font-weight: 900;
            width: 26px;
            height: 26px;
            min-width: 26px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
        }

        /* Megaphone + Bold Brand Header */
        .notice-brand-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13.5px;
            font-weight: 800;
            color: #f59e0b;
            white-space: nowrap;
            letter-spacing: 0.2px;
        }

        .notice-brand-title i {
            font-size: 16px;
            color: #f59e0b;
            animation: megaphoneTilt 2.5s ease-in-out infinite;
        }

        @keyframes megaphoneTilt {
            0%, 100% { transform: rotate(0deg); }
            20% { transform: rotate(-12deg); }
            40% { transform: rotate(12deg); }
            60% { transform: rotate(-6deg); }
            80% { transform: rotate(6deg); }
        }

        .notice-v-divider {
            width: 1.5px;
            height: 16px;
            background: rgba(255, 255, 255, 0.2);
            flex-shrink: 0;
        }

        /* Scrolling Marquee / Text Container */
        .notice-content-scroll {
            flex: 1;
            overflow: hidden;
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #e2e8f0;
            white-space: nowrap;
        }

        .notice-content-items {
            display: inline-flex;
            align-items: center;
            gap: 16px;
        }

        .notice-item-text {
            color: #ffffff;
            font-weight: 500;
        }

        .notice-new-badge {
            background: linear-gradient(135deg, #ea580c, #f97316);
            color: #ffffff;
            font-size: 9.5px;
            font-weight: 900;
            padding: 2px 7px;
            border-radius: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 0 8px rgba(249, 115, 22, 0.6);
            margin-left: 4px;
        }

        /* Right Actions: Detail Link & Close Icon */
        .notice-right-actions {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-shrink: 0;
        }

        .notice-detail-btn {
            color: #ffffff;
            font-size: 13px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 5px;
            text-decoration: none;
            cursor: pointer;
            transition: color 0.2s;
            white-space: nowrap;
        }

        .notice-detail-btn:hover {
            color: #f59e0b;
        }

        .notice-close-btn {
            color: #94a3b8;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            width: 22px;
            height: 22px;
            border-radius: 50%;
        }

        .notice-close-btn:hover {
            color: #ef4444;
            background: rgba(255, 255, 255, 0.08);
        }


        /* ================= 4-COLUMN MODERN MINIMALIST FOOTER ================= */
        .footer {
            background: linear-gradient(180deg, #070b14 0%, #03060a 100%) !important;
            border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
            padding: 50px 0 30px 0 !important;
            margin-top: 60px !important;
            width: 100% !important;
            position: relative !important;
            z-index: 2 !important;
        }

        .footer-inner-4col {
            display: grid !important;
            grid-template-columns: 1.5fr 1fr 1fr 1.3fr !important;
            gap: 36px !important;
            max-width: 1320px !important;
            margin: 0 auto !important;
            padding: 0 24px !important;
            box-sizing: border-box !important;
        }

        @media (max-width: 992px) {
            .footer-inner-4col {
                grid-template-columns: 1fr 1fr !important;
                gap: 30px !important;
            }
        }

        @media (max-width: 600px) {
            .footer-inner-4col {
                grid-template-columns: 1fr !important;
                gap: 26px !important;
            }
        }

        /* Col 1: Brand & Desc */
        .footer-brand-wrap {
            display: flex !important;
            flex-direction: column !important;
        }

        .footer-brand-title-flex {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            margin-bottom: 14px !important;
            cursor: pointer !important;
        }

        .footer-brand-title-flex img {
            height: 38px !important;
            width: auto !important;
            filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.5)) !important;
        }

        .footer-brand-title-flex span {
            font-size: 20px !important;
            font-weight: 800 !important;
            color: #ffffff !important;
            letter-spacing: 0.5px !important;
        }

        .footer-brand-desc-text {
            font-size: 12.5px !important;
            color: #94a3b8 !important;
            line-height: 1.65 !important;
            margin-bottom: 18px !important;
        }

        .footer-social-circle-group {
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
        }

        .footer-social-circle-btn {
            width: 36px !important;
            height: 36px !important;
            border-radius: 50% !important;
            background: rgba(30, 41, 59, 0.8) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: #cbd5e1 !important;
            font-size: 14px !important;
            text-decoration: none !important;
            transition: all 0.25s ease !important;
            cursor: pointer !important;
        }

        .footer-social-circle-btn:hover {
            background: rgba(245, 158, 11, 0.2) !important;
            border-color: #f59e0b !important;
            color: #f59e0b !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
        }

        /* Col Titles */
        .footer-4col-header {
            font-family: 'Kanit', sans-serif !important;
            font-size: 17px !important;
            font-weight: 800 !important;
            color: #ffffff !important;
            margin-bottom: 18px !important;
            letter-spacing: 0.3px !important;
            text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
        }
        .footer-links-vertical li {
            margin: 0 !important;
        }
        .footer-links-vertical li a {
            font-family: 'Kanit', sans-serif !important;
            font-size: 14px !important;
            font-weight: 400 !important;
            color: #94a3b8 !important;
            text-decoration: none !important;
            transition: all 0.2s ease !important;
            cursor: pointer !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 8px !important;
            padding: 3px 0 !important;
        }
        .footer-links-vertical li a:hover {
            color: #f59e0b !important;
            transform: translateX(4px) !important;
        }

        /* Nav List */
        .footer-links-vertical {
            list-style: none !important;
            padding: 0 !important;
            margin: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 10px !important;
        }

        .footer-links-vertical li a {
            font-size: 13px !important;
            color: #94a3b8 !important;
            text-decoration: none !important;
            transition: color 0.2s ease !important;
            cursor: pointer !important;
            display: inline-block !important;
        }

        .footer-links-vertical li a:hover {
            color: #f59e0b !important;
            transform: translateX(3px) !important;
        }

        /* Col 4: Contact Channel Items (Facebook, Line, Email with big colored circular icons) */
        .footer-contact-channel-list {
            display: flex !important;
            flex-direction: column !important;
            gap: 14px !important;
        }

        .footer-contact-channel-row {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            text-decoration: none !important;
            color: #ffffff !important;
            transition: transform 0.2s ease !important;
        }

        .footer-contact-channel-row:hover {
            transform: translateX(4px) !important;
        }

        .footer-contact-icon-bubble {
            width: 38px !important;
            height: 38px !important;
            min-width: 38px !important;
            border-radius: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 16px !important;
            color: #ffffff !important;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
        }

        .footer-contact-text-wrap {
            display: flex !important;
            flex-direction: column !important;
            line-height: 1.25 !important;
        }

        .footer-contact-name {
            font-size: 13px !important;
            font-weight: 700 !important;
            color: #ffffff !important;
        }

        .footer-contact-detail {
            font-size: 11.5px !important;
            color: #94a3b8 !important;
        }

        .footer-bottom-copyright {
            max-width: 1320px !important;
            margin: 40px auto 0 auto !important;
            padding: 20px 24px 0 24px !important;
            border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
            text-align: center !important;
            font-size: 12px !important;
            color: #64748b !important;
        }


        /* ================= EXACT LUXURY PROMPTPAY PAYMENT VIEW ================= */
        .luxury-payment-wrapper {
            max-width: 1180px;
            margin: 0 auto;
            padding: 10px 0 50px 0;
            position: relative;
            z-index: 10;
        }
        .luxury-payment-title-wrap {
            margin-bottom: 24px;
        }
        .luxury-payment-title-wrap h2 {
            font-size: 24px;
            font-weight: 800;
            color: #ffffff;
            margin: 0 0 6px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .luxury-payment-title-wrap h2 span.orange-glow {
            color: #f59e0b;
            text-shadow: 0 0 16px rgba(245, 158, 11, 0.5);
        }
        .luxury-payment-title-wrap p {
            color: #94a3b8;
            font-size: 13.5px;
            margin: 0;
        }

        /* Two Column Layout */
        .luxury-payment-2col {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-bottom: 24px;
        }

        /* Left Card: QR Code */
        .luxury-qr-panel {
            background: rgba(15, 23, 42, 0.85);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(245, 158, 11, 0.28);
            border-radius: 16px;
            padding: 28px 24px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(245, 158, 11, 0.08);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .luxury-qr-heading {
            font-size: 17px;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 18px;
            letter-spacing: 0.3px;
        }
        .luxury-qr-frame {
            background: #ffffff;
            border-radius: 12px;
            padding: 12px;
            display: inline-block;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
            position: relative;
            margin-bottom: 18px;
        }
        .luxury-qr-img-wrapper {
            position: relative;
            width: 200px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .luxury-qr-img-wrapper img.qr-img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
        }
        .promptpay-center-logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #ffffff;
            border-radius: 4px;
            padding: 3px 6px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(0, 0, 0, 0.08);
        }
        .promptpay-center-logo img {
            height: 16px;
            width: auto;
            display: block;
        }
        .luxury-qr-amount-label {
            font-size: 13px;
            color: #94a3b8;
            margin-bottom: 4px;
        }
        .luxury-qr-amount-val {
            font-size: 26px;
            font-weight: 800;
            color: #f59e0b;
            text-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
            line-height: 1.2;
            margin-bottom: 8px;
        }
        .luxury-qr-footer-hint {
            font-size: 12px;
            color: #64748b;
            display: flex;
            align-items: center;
            gap: 6px;
            justify-content: center;
        }

        /* Right Card: Amount Form */
        .luxury-amount-panel {
            background: rgba(15, 23, 42, 0.85);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 28px 24px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .luxury-amount-header {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 17px;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 20px;
        }
        .luxury-amount-header i {
            color: #f59e0b;
            font-size: 20px;
        }
        .luxury-input-label {
            font-size: 13px;
            color: #94a3b8;
            margin-bottom: 8px;
            display: block;
        }
        .luxury-amount-input {
            width: 100%;
            background: rgba(10, 16, 30, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 10px;
            padding: 12px 16px;
            color: #ffffff;
            font-size: 15px;
            font-weight: 600;
            box-sizing: border-box;
            outline: none;
            transition: all 0.2s ease;
            margin-bottom: 18px;
        }
        .luxury-amount-input:focus {
            border-color: #f59e0b;
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
            background: rgba(10, 16, 30, 0.95);
        }
        .luxury-preset-label {
            font-size: 13px;
            color: #94a3b8;
            margin-bottom: 10px;
            display: block;
        }
        .luxury-preset-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }
        .luxury-preset-btn {
            background: rgba(10, 16, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #ffffff;
            font-family: 'Kanit', sans-serif;
            font-size: 15px;
            font-weight: 700;
            padding: 14px 10px;
            border-radius: 10px;
            cursor: pointer !important;
            transition: all 0.2s ease;
            position: relative;
            text-align: center;
        }
        .luxury-preset-btn:hover {
            border-color: rgba(245, 158, 11, 0.6);
            background: rgba(245, 158, 11, 0.08);
            transform: translateY(-1px);
        }
        .luxury-preset-btn.active {
            border-color: #f59e0b !important;
            background: rgba(245, 158, 11, 0.12) !important;
            box-shadow: 0 0 15px rgba(245, 158, 11, 0.2) !important;
        }
        .luxury-preset-btn .check-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            width: 18px;
            height: 18px;
            background: #f59e0b;
            color: #0f172a;
            border-radius: 50%;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 900;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
        }
        .luxury-preset-btn.active .check-badge {
            display: flex;
        }

        .btn-luxury-submit-transfer {
            width: 100%;
            background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
            border: none;
            border-radius: 12px;
            color: #ffffff;
            font-family: 'Kanit', sans-serif;
            font-size: 16px;
            font-weight: 800;
            padding: 15px;
            cursor: pointer !important;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 8px 25px rgba(245, 158, 11, 0.45);
            transition: all 0.25s ease;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            margin-bottom: 10px;
        }
        .btn-luxury-submit-transfer:hover {
            background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(245, 158, 11, 0.65);
        }
        .luxury-instant-subtext {
            text-align: center;
            font-size: 12px;
            color: #94a3b8;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        /* 3-Step Guide Section */
        .luxury-how-to-section {
            margin-top: 10px;
            margin-bottom: 24px;
        }
        .luxury-how-to-header {
            text-align: center;
            font-size: 17px;
            font-weight: 800;
            color: #f59e0b;
            margin-bottom: 16px;
            letter-spacing: 0.5px;
        }
        .luxury-steps-container {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .luxury-step-box {
            flex: 1;
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 16px 18px;
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .luxury-step-icon-wrap {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #f59e0b;
            flex-shrink: 0;
        }
        .luxury-step-text-title {
            font-size: 14px;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 3px;
        }
        .luxury-step-text-desc {
            font-size: 11.5px;
            color: #94a3b8;
            line-height: 1.35;
        }
        .luxury-step-arrow {
            color: #64748b;
            font-size: 14px;
            flex-shrink: 0;
        }

        /* 4-Item Guarantee Bar */
        .luxury-guarantee-bar {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            background: rgba(15, 23, 42, 0.85);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 14px 20px;
            margin-bottom: 28px;
        }
        .luxury-guarantee-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 4px 14px;
            border-right: 1px solid rgba(255, 255, 255, 0.08);
        }
        .luxury-guarantee-item:last-child {
            border-right: none;
        }
        .luxury-guarantee-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(245, 158, 11, 0.1);
            border: 1px solid rgba(245, 158, 11, 0.25);
            color: #f59e0b;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            flex-shrink: 0;
        }
        .luxury-guarantee-title {
            font-size: 13px;
            font-weight: 700;
            color: #f59e0b;
        }
        .luxury-guarantee-sub {
            font-size: 11px;
            color: #94a3b8;
        }

        /* Recent Transactions Table Card */
        .luxury-recent-history-panel {
            background: rgba(15, 23, 42, 0.85);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            padding: 20px 24px;
        }
        .luxury-history-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        .luxury-history-header h4 {
            font-size: 16px;
            font-weight: 800;
            color: #ffffff;
            margin: 0;
        }
        .luxury-view-all-btn {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #cbd5e1;
            font-size: 12px;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: 8px;
            cursor: pointer !important;
            transition: all 0.2s ease;
        }
        .luxury-view-all-btn:hover {
            background: rgba(245, 158, 11, 0.15);
            border-color: #f59e0b;
            color: #ffffff;
        }
        .luxury-history-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }
        .luxury-history-table th {
            text-align: left;
            padding: 10px 14px;
            color: #64748b;
            font-weight: 600;
            font-size: 12px;
            background: rgba(10, 16, 30, 0.6);
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }
        .luxury-history-table td {
            padding: 14px;
            color: #cbd5e1;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            font-size: 12.5px;
        }
        .luxury-status-badge {
            background: rgba(16, 185, 129, 0.15);
            border: 1px solid rgba(16, 185, 129, 0.35);
            color: #10b981;
            font-size: 11px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 6px;
            display: inline-block;
        }

        @media (max-width: 900px) {
            .luxury-payment-2col {
                grid-template-columns: 1fr;
            }
            .luxury-steps-container {
                flex-direction: column;
            }
            .luxury-step-arrow {
                transform: rotate(90deg);
                margin: 4px 0;
            }
            .luxury-guarantee-bar {
                grid-template-columns: 1fr 1fr;
                gap: 12px;
            }
            .luxury-guarantee-item {
                border-right: none;
            }
        }


        /* ================= LUXURY HERO BANNER SLIDER ================= */
        .luxury-hero-slider-container {
            position: relative;
            width: 100%;
            border-radius: var(--radius-lg);
            overflow: hidden;
            border: 1px solid rgba(245, 158, 11, 0.25);
            background: #0b0f19;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(245, 158, 11, 0.08);
            aspect-ratio: 16 / 7.2;
            min-height: 220px;
        }
        .luxury-hero-slider-track {
            display: flex;
            width: 100%;
            height: 100%;
            transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .luxury-hero-slide {
            min-width: 100%;
            width: 100%;
            height: 100%;
            position: relative;
            cursor: pointer !important;
            user-select: none;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .luxury-hero-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.4s ease;
        }
        .luxury-hero-slide:hover img {
            transform: scale(1.025);
        }
        
        /* Slider Arrow Buttons */
        .slider-arrow-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 42px;
            height: 42px;
            background: rgba(10, 16, 30, 0.75);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 50%;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            cursor: pointer !important;
            z-index: 10;
            transition: all 0.25s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        }
        .slider-arrow-btn:hover {
            background: #f59e0b;
            color: #0f172a;
            border-color: #f59e0b;
            box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
            transform: translateY(-50%) scale(1.08);
        }
        .slider-arrow-prev {
            left: 14px;
        }
        .slider-arrow-next {
            right: 14px;
        }

        /* Slider Indicator Dots */
        .slider-dots-container {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 10;
            background: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(6px);
            padding: 5px 12px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .slider-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            cursor: pointer !important;
            transition: all 0.25s ease;
        }
        .slider-dot:hover {
            background: #ffffff;
        }
        .slider-dot.active {
            width: 26px;
            border-radius: 10px;
            background: #f59e0b;
            box-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
        }


        /* ================= ULTRA LUXURY CATALOG SEARCH BAR ================= */
        .catalog-search-area {
            width: 100% !important;
            margin-top: 18px !important;
            display: flex !important;
            align-items: center !important;
        }
        .catalog-search-box {
            position: relative !important;
            width: 100% !important;
            max-width: 480px !important;
            display: flex !important;
            align-items: center !important;
        }
        .catalog-search-box input {
            width: 100% !important;
            background: rgba(11, 19, 36, 0.85) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
            border: 1px solid rgba(245, 158, 11, 0.35) !important;
            border-radius: 12px !important;
            padding: 12px 46px 12px 18px !important;
            color: #ffffff !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            box-sizing: border-box !important;
            outline: none !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(245, 158, 11, 0.08) !important;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }
        .catalog-search-box input::placeholder {
            color: #64748b !important;
            font-size: 13px !important;
        }
        .catalog-search-box input:focus {
            border-color: #f59e0b !important;
            background: rgba(15, 23, 42, 0.95) !important;
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25), 0 8px 30px rgba(0, 0, 0, 0.6) !important;
        }
        .catalog-search-box .search-icon-btn {
            position: absolute !important;
            right: 14px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            color: #f59e0b !important;
            font-size: 15px !important;
            pointer-events: none !important;
            transition: transform 0.2s ease, color 0.2s ease !important;
        }
        .catalog-search-box input:focus ~ .search-icon-btn {
            color: #fbbf24 !important;
            transform: translateY(-50%) scale(1.15) !important;
        }
        .catalog-no-results {
            grid-column: 1 / -1 !important;
            text-align: center !important;
            padding: 50px 20px !important;
            color: #94a3b8 !important;
            font-size: 15px !important;
            background: rgba(11, 19, 36, 0.5) !important;
            border: 1px dashed rgba(255, 255, 255, 0.1) !important;
            border-radius: 16px !important;
            margin: 20px 0 !important;
        }


        /* ================= ULTRA LUXURY PIXEL-PERFECT TOPUP VIEW ================= */
        .topup-back-nav {
            margin-bottom: 20px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            color: #94a3b8;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        .topup-back-nav:hover {
            color: #f59e0b;
            transform: translateX(-3px);
        }
        .topup-layout-grid {
            display: grid;
            grid-template-columns: 1fr 380px;
            gap: 28px;
            align-items: start;
        }
        @media (max-width: 992px) {
            .topup-layout-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Top Banner Box */
        .topup-game-banner-card {
            background: linear-gradient(135deg, #0d1527 0%, #070b14 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            padding: 24px 28px;
            margin-bottom: 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }
        .topup-banner-content {
            flex: 1;
        }
        .topup-game-heading {
            font-size: 26px;
            font-weight: 800;
            color: #ffffff;
            margin: 0 0 6px 0;
            letter-spacing: -0.5px;
        }
        .topup-game-subtext {
            font-size: 13px;
            color: #94a3b8;
            margin: 0 0 18px 0;
        }
        .topup-trust-badges-row {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
        }
        .topup-trust-pill {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 8px 16px;
            border-radius: 12px;
        }
        .topup-trust-icon-orange {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            background: rgba(245, 158, 11, 0.15);
            color: #f59e0b;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
        }
        .topup-trust-title {
            font-size: 12px;
            font-weight: 700;
            color: #ffffff;
            line-height: 1.2;
        }
        .topup-trust-desc {
            font-size: 10px;
            color: #64748b;
            line-height: 1.2;
        }

        /* Step Card Styling */
        .topup-step-panel {
            background: #090e1c;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px;
            padding: 22px 24px;
            margin-bottom: 20px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        }
        .topup-step-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 18px;
        }
        .topup-step-badge {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #f59e0b;
            color: #0f172a;
            font-size: 13px;
            font-weight: 900;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .topup-step-title {
            font-size: 15px;
            font-weight: 700;
            color: #ffffff;
        }
        .topup-input-label {
            font-size: 12px;
            color: #94a3b8;
            margin-bottom: 8px;
            display: block;
        }
        .topup-input-wrapper {
            position: relative;
            width: 100%;
        }
        .topup-input-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: #64748b;
            font-size: 14px;
        }
        .topup-text-input {
            width: 100%;
            background: #050811;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 14px 16px 14px 44px;
            color: #ffffff;
            font-size: 14px;
            font-weight: 500;
            box-sizing: border-box;
            outline: none;
            transition: all 0.2s ease;
        }
        .topup-text-input:focus {
            border-color: #f59e0b;
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
        }
        .topup-text-input::placeholder {
            color: #475569;
        }

        /* 3-Column Luxury Package Grid */
        .topup-packages-3col-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }
        @media (max-width: 768px) {
            .topup-packages-3col-grid {
                grid-template-columns: 1fr;
            }
        }
        .topup-package-item {
            background: #060a14;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 16px 18px;
            display: flex;
            align-items: center;
            gap: 14px;
            cursor: pointer;
            position: relative;
            transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }
        .topup-package-item:hover {
            border-color: rgba(245, 158, 11, 0.5);
            background: #0b1120;
            transform: translateY(-2px);
        }
        .topup-package-item.selected {
            background: #0d1527;
            border: 1.5px solid #f59e0b;
            box-shadow: 0 0 0 1px #f59e0b, 0 8px 24px rgba(245, 158, 11, 0.2);
        }
        .topup-package-check {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #f59e0b;
            color: #0f172a;
            font-size: 10px;
            font-weight: 900;
            display: none;
            align-items: center;
            justify-content: center;
        }
        .topup-package-item.selected .topup-package-check {
            display: flex;
        }
        .topup-pack-icon-wrap {
            width: 44px;
            height: 44px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .topup-pack-gem-icon {
            font-size: 26px;
            color: #38bdf8;
            filter: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.5));
        }
        .topup-pack-chest-icon {
            font-size: 26px;
            color: #f59e0b;
            filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.5));
        }
        .topup-pack-details {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .topup-pack-title {
            font-size: 14px;
            font-weight: 700;
            color: #ffffff;
        }
        .topup-pack-price {
            font-size: 14px;
            font-weight: 800;
            color: #f59e0b;
        }

        /* Right Summary Panel */
        .topup-summary-side-col {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .topup-summary-card {
            background: #090e1c;
            border: 1px solid rgba(245, 158, 11, 0.35);
            border-radius: 20px;
            padding: 24px 22px;
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(245, 158, 11, 0.08);
            position: relative;
        }
        .topup-summary-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        .topup-summary-hex-icon {
            color: #f59e0b;
            font-size: 18px;
        }
        .topup-summary-title {
            font-size: 17px;
            font-weight: 800;
            color: #ffffff;
        }
        .topup-summary-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 14px;
            font-size: 13px;
        }
        .topup-summary-row span {
            color: #94a3b8;
        }
        .topup-summary-row strong {
            color: #ffffff;
            font-weight: 700;
        }
        .topup-summary-total-wrap {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-top: 22px;
            padding-top: 18px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
        .topup-summary-total-label {
            font-size: 14px;
            font-weight: 700;
            color: #ffffff;
        }
        .topup-summary-total-amount {
            font-size: 22px;
            font-weight: 900;
            color: #f59e0b;
        }
        .btn-topup-checkout-submit {
            width: 100%;
            background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
            color: #0f172a;
            font-size: 15px;
            font-weight: 900;
            padding: 14px;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            margin-top: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
            transition: all 0.25s ease;
        }
        .btn-topup-checkout-submit:hover {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(245, 158, 11, 0.55);
        }

        /* Side Info Cards */
        .topup-side-info-card {
            background: #090e1c;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 16px 18px;
            display: flex;
            align-items: center;
            gap: 14px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }
        .topup-side-info-card.clickable {
            cursor: pointer;
            justify-content: space-between;
            transition: all 0.2s ease;
        }
        .topup-side-info-card.clickable:hover {
            border-color: rgba(245, 158, 11, 0.4);
            background: #0e162a;
        }
        .topup-side-icon-wrap {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: rgba(245, 158, 11, 0.12);
            color: #f59e0b;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }
        .topup-side-title {
            font-size: 13px;
            font-weight: 800;
            color: #ffffff;
            margin-bottom: 2px;
        }
        .topup-side-sub {
            font-size: 11px;
            color: #64748b;
            line-height: 1.3;
        }

        /* Bottom 3-item Bar */
        .topup-bottom-guarantee-bar {
            margin-top: 35px;
            background: #090e1c;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 18px 24px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }
        @media (max-width: 768px) {
            .topup-bottom-guarantee-bar {
                grid-template-columns: 1fr;
            }
        }
        .topup-bottom-item {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .topup-bottom-icon {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: rgba(245, 158, 11, 0.12);
            color: #f59e0b;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }
        .topup-bottom-title {
            font-size: 13px;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 2px;
        }
        .topup-bottom-sub {
            font-size: 11px;
            color: #64748b;
        }


        /* ================= ULTRA LUXURY ADMIN BACKOFFICE DASHBOARD ================= */
        .btn-admin-nav {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
            color: #ffffff !important;
            font-weight: 800 !important;
            padding: 8px 16px !important;
            border-radius: var(--radius-sm) !important;
            border: 1px solid rgba(239, 68, 68, 0.4) !important;
            cursor: pointer !important;
            display: none !important;
            align-items: center !important;
            gap: 6px !important;
            font-size: 13px !important;
            transition: all 0.2s ease !important;
            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important;
        }
        .btn-admin-nav:hover {
            background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45) !important;
        }

        .admin-dashboard-layout {
            display: grid;
            grid-template-columns: 260px 1fr;
            gap: 25px;
            margin-top: 10px;
            align-items: start;
        }
        @media (max-width: 992px) {
            .admin-dashboard-layout {
                grid-template-columns: 1fr;
            }
        }

        /* Sidebar Navigation */
        .admin-sidebar-menu {
            background: #090e1c;
            border: 1px solid rgba(245, 158, 11, 0.25);
            border-radius: 18px;
            padding: 18px 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            position: sticky;
            top: 85px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }
        .admin-sidebar-heading {
            font-size: 11px;
            font-weight: 800;
            color: #f59e0b;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            padding: 8px 12px 4px 12px;
            margin-top: 6px;
        }
        .admin-nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            border-radius: 12px;
            color: #94a3b8;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 1px solid transparent;
        }
        .admin-nav-item:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.05);
        }
        .admin-nav-item.active {
            color: #0f172a;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            font-weight: 800;
            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35);
        }

        /* Main Content Panels */
        .admin-main-panel {
            background: #090e1c;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            padding: 28px;
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6);
            min-height: 600px;
        }
        .admin-panel-title-wrap {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }
        .admin-panel-title-wrap h3 {
            font-size: 20px;
            font-weight: 800;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0;
        }
        .admin-panel-title-wrap h3 i {
            color: #f59e0b;
        }

        /* Stat Cards 4-Grid */
        .admin-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 18px;
            margin-bottom: 25px;
        }
        .admin-stat-card {
            background: #060a14;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 20px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }
        .admin-stat-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #f59e0b, #ef4444);
        }
        .admin-stat-label {
            font-size: 12px;
            color: #94a3b8;
            font-weight: 600;
            margin-bottom: 6px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .admin-stat-val {
            font-size: 24px;
            font-weight: 900;
            color: #ffffff;
        }
        .admin-stat-val.gold {
            color: #f59e0b;
        }
        .admin-stat-val.green {
            color: #10b981;
        }

        /* Dimension Guide Box */
        .admin-dimension-guide-box {
            background: rgba(245, 158, 11, 0.08);
            border: 1px dashed rgba(245, 158, 11, 0.35);
            border-radius: 14px;
            padding: 16px 20px;
            margin-bottom: 22px;
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .admin-dimension-guide-box i {
            font-size: 26px;
            color: #f59e0b;
        }
        .admin-dimension-title {
            font-size: 13px;
            font-weight: 800;
            color: #ffffff;
            margin-bottom: 3px;
        }
        .admin-dimension-desc {
            font-size: 12px;
            color: #94a3b8;
            line-height: 1.4;
        }

        /* Admin Action Buttons */
        .btn-admin-primary {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: #0f172a;
            font-size: 13px;
            font-weight: 800;
            padding: 10px 20px;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s ease;
            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
        }
        .btn-admin-primary:hover {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(245, 158, 11, 0.45);
        }

        .btn-admin-excel {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: #ffffff;
            font-size: 13px;
            font-weight: 800;
            padding: 10px 18px;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s ease;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
        }
        .btn-admin-excel:hover {
            background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45);
        }

        /* Admin Form Controls */
        .admin-form-group {
            margin-bottom: 18px;
        }
        .admin-form-label {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            font-weight: 700;
            color: #cbd5e1;
            margin-bottom: 6px;
        }
        .admin-form-label span.dim-hint {
            color: #f59e0b;
            font-size: 11px;
            font-weight: 600;
        }
        .admin-form-control {
            width: 100%;
            background: #050811;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 12px 16px;
            color: #ffffff;
            font-size: 13px;
            outline: none;
            box-sizing: border-box;
            transition: all 0.2s ease;
        }
        .admin-form-control:focus {
            border-color: #f59e0b;
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
            background: #070c18;
        }
        textarea.admin-form-control {
            resize: vertical;
            min-height: 80px;
        }

        /* Admin Tables */
        .admin-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }
        .admin-table th {
            background: #050811;
            color: #94a3b8;
            font-weight: 700;
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            white-space: nowrap;
        }
        .admin-table td {
            padding: 14px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            color: #e2e8f0;
            vertical-align: middle;
        }
        .admin-table tr:hover td {
            background: rgba(255, 255, 255, 0.02);
        }
        .admin-role-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 800;
        }
        .admin-role-badge.admin {
            background: rgba(239, 68, 68, 0.15);
            color: #f87171;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }
        .admin-role-badge.user {
            background: rgba(56, 189, 248, 0.15);
            color: #38bdf8;
            border: 1px solid rgba(56, 189, 248, 0.3);
        }


        /* ================= ULTRA LUXURY REFINED NAVBAR (PERFECT SPACING & PROPORTIONS) ================= */
        .container {
            max-width: 1320px !important;
            margin: 0 auto !important;
            padding: 0 24px !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }
        .navbar {
            background: rgba(8, 13, 24, 0.95) !important;
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
            position: sticky !important;
            top: 0 !important;
            z-index: 500 !important;
            padding: 10px 0 !important;
            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5) !important;
        }
        .nav-inner {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            gap: 16px !important;
        }
        .brand-logo {
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            text-decoration: none !important;
            cursor: pointer !important;
            flex-shrink: 0 !important;
        }
        .brand-logo-img {
            height: 38px !important;
            width: auto !important;
            max-width: 150px !important;
            object-fit: contain !important;
            filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.35)) !important;
            transition: transform 0.2s ease !important;
        }
        .brand-logo:hover .brand-logo-img {
            transform: scale(1.05) !important;
        }
        .brand-name {
            font-family: 'Kanit', sans-serif !important;
            font-size: 18px !important;
            font-weight: 900 !important;
            letter-spacing: 0.5px !important;
            color: #ffffff !important;
            line-height: 1 !important;
            white-space: nowrap !important;
        }
        .brand-name span { color: #f59e0b !important; }

        /* Menu Links */
        .nav-menu {
            display: flex !important;
            gap: 6px !important;
            list-style: none !important;
            align-items: center !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        .nav-link {
            color: #94a3b8 !important;
            text-decoration: none !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            transition: all 0.2s ease !important;
            display: flex !important;
            align-items: center !important;
            gap: 6px !important;
            cursor: pointer !important;
            padding: 7px 12px !important;
            border-radius: 10px !important;
            white-space: nowrap !important;
        }
        .nav-link:hover {
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.06) !important;
        }
        .nav-link.active {
            color: #ffffff !important;
            background: #172033 !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            font-weight: 700 !important;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
        }

        /* Nav Right Actions */
        .nav-actions {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            flex-shrink: 0 !important;
        }

        /* Luxury Admin Badge Button (Compact, Elegant, Glowing Red-Amber) */
        .btn-admin-nav {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.25) 100%) !important;
            color: #fca5a5 !important;
            font-weight: 700 !important;
            padding: 6px 12px !important;
            border-radius: 9px !important;
            border: 1px solid rgba(239, 68, 68, 0.4) !important;
            cursor: pointer !important;
            display: none !important;
            align-items: center !important;
            gap: 6px !important;
            font-size: 12px !important;
            white-space: nowrap !important;
            transition: all 0.2s ease !important;
            box-shadow: 0 2px 10px rgba(239, 68, 68, 0.15) !important;
        }
        .btn-admin-nav:hover {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
            color: #ffffff !important;
            border-color: #ef4444 !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4) !important;
        }

        /* User Pill Capsule */
        .user-pill {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            background: #131b2e !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            padding: 5px 12px !important;
            border-radius: 9px !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
        }
        .user-pill:hover {
            border-color: rgba(245, 158, 11, 0.4) !important;
            background: #17223b !important;
        }
        .user-avatar {
            width: 22px !important;
            height: 22px !important;
            border-radius: 5px !important;
            background: #0284c7 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 11px !important;
            font-weight: 800 !important;
            color: #ffffff !important;
        }
        .user-credit {
            color: #10b981 !important;
            font-weight: 800 !important;
            font-size: 13px !important;
        }

        /* Logout Nav Button */
        .btn-logout-nav {
            background: rgba(239, 68, 68, 0.1) !important;
            color: #f87171 !important;
            border: 1px solid rgba(239, 68, 68, 0.2) !important;
            font-weight: 600 !important;
            padding: 6px 11px !important;
            border-radius: 9px !important;
            cursor: pointer !important;
            display: none;
            align-items: center !important;
            gap: 5px !important;
            font-size: 12px !important;
            white-space: nowrap !important;
            transition: all 0.2s ease !important;
        }
        .btn-logout-nav:hover {
            background: rgba(239, 68, 68, 0.25) !important;
            border-color: rgba(239, 68, 68, 0.5) !important;
            color: #ffffff !important;
        }

        /* Login Nav Button */
        .btn-login-nav {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
            color: #0f172a !important;
            font-weight: 800 !important;
            padding: 7px 16px !important;
            border-radius: 9px !important;
            border: none !important;
            cursor: pointer !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 6px !important;
            font-size: 12px !important;
            white-space: nowrap !important;
            transition: all 0.2s ease !important;
            box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3) !important;
        }
        .btn-login-nav:hover {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 16px rgba(245, 158, 11, 0.45) !important;
        }


        /* ================= TOPUP BANNER WITH INTERACTIVE UPLOAD BUTTON ================= */
        .topup-game-banner-card {
            background: linear-gradient(135deg, #0d1527 0%, #070b14 100%) !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            border-radius: 20px !important;
            padding: 24px 28px !important;
            margin-bottom: 22px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 24px !important;
            position: relative !important;
            overflow: hidden !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
            min-height: 140px !important;
            background-size: cover !important;
            background-position: center !important;
            transition: all 0.3s ease !important;
        }
        .topup-banner-bg-img {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            opacity: 0.35 !important;
            z-index: 1 !important;
            pointer-events: none !important;
            transition: opacity 0.3s ease !important;
        }
        .topup-banner-content {
            flex: 1 !important;
            position: relative !important;
            z-index: 2 !important;
        }
        .topup-banner-action-area {
            position: relative !important;
            z-index: 2 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-end !important;
            gap: 8px !important;
        }
        .btn-upload-game-banner {
            background: rgba(15, 23, 42, 0.8) !important;
            backdrop-filter: blur(10px) !important;
            border: 1.5px dashed rgba(245, 158, 11, 0.6) !important;
            color: #f59e0b !important;
            font-size: 13px !important;
            font-weight: 800 !important;
            padding: 10px 18px !important;
            border-radius: 12px !important;
            cursor: pointer !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 8px !important;
            transition: all 0.25s ease !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
        }
        .btn-upload-game-banner:hover {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
            color: #0f172a !important;
            border-color: #f59e0b !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4) !important;
        }
        .btn-clear-game-banner {
            background: rgba(239, 68, 68, 0.15) !important;
            border: 1px solid rgba(239, 68, 68, 0.3) !important;
            color: #f87171 !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            padding: 4px 10px !important;
            border-radius: 8px !important;
            cursor: pointer !important;
            display: none;
            align-items: center;
            gap: 4px;
            transition: all 0.2s ease !important;
        }
        .btn-clear-game-banner:hover {
            background: #ef4444 !important;
            color: #ffffff !important;
        }


        /* ================= ULTRA LUXURY MOBILE APP & DESKTOP DEDICATED RESPONSIVE CSS ================= */
        
        /* Bottom Navigation Bar for Mobile */
        .mobile-bottom-nav {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 64px;
            background: rgba(8, 13, 24, 0.96);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-top: 1px solid rgba(245, 158, 11, 0.25);
            z-index: 9999;
            box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.7);
            padding: 4px 12px;
            box-sizing: border-box;
        }
        .mobile-bottom-nav-inner {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 100%;
            width: 100%;
        }
        .mobile-nav-tab {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #64748b;
            text-decoration: none;
            font-size: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            gap: 4px;
            flex: 1;
        }
        .mobile-nav-tab i {
            font-size: 18px;
            transition: transform 0.2s ease, color 0.2s ease;
        }
        .mobile-nav-tab:hover,
        .mobile-nav-tab.active {
            color: #f59e0b;
        }
        .mobile-nav-tab.active i {
            transform: translateY(-2px) scale(1.1);
            color: #f59e0b;
            filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.5));
        }

        /* Mobile Responsive Breakpoints */
        @media (max-width: 768px) {
            body {
                padding-bottom: 74px !important; /* Space for bottom nav */
            }
            .mobile-bottom-nav {
                display: block !important;
            }
            .container {
                padding: 0 14px !important;
            }

            /* Navbar Mobile Adjustments */
            .navbar {
                padding: 8px 0 !important;
            }
            .nav-menu {
                display: none !important; /* Move to mobile bottom nav */
            }
            .brand-name {
                font-size: 15px !important;
            }
            .brand-logo-img {
                height: 32px !important;
            }
            .btn-admin-nav {
                padding: 5px 9px !important;
                font-size: 11px !important;
            }
            .user-pill {
                padding: 4px 8px !important;
            }
            .user-credit {
                font-size: 12px !important;
            }
            .btn-logout-nav {
                padding: 5px 8px !important;
                font-size: 11px !important;
            }

            /* Hero Banner Slider Mobile */
            .hero-slider-wrap {
                border-radius: 14px !important;
                margin-top: 10px !important;
            }
            .hero-slider-slide {
                height: 170px !important;
            }
            .hero-slider-slide img {
                height: 170px !important;
                object-fit: cover !important;
            }
            .slider-arrow-btn {
                width: 32px !important;
                height: 32px !important;
                font-size: 12px !important;
            }
            .slider-arrow-prev { left: 8px !important; }
            .slider-arrow-next { right: 8px !important; }

            /* Notice Bar */
            .top-notice-bar {
                font-size: 11px !important;
                padding: 8px 12px !important;
            }

            /* Section Titles */
            .section-heading h3 {
                font-size: 18px !important;
            }
            .section-heading p {
                font-size: 12px !important;
            }

            /* 2-Row Marquee Carousel Mobile */
            .game-app-item {
                width: 78px !important;
            }
            .app-icon-wrapper {
                width: 70px !important;
                height: 70px !important;
                border-radius: 20px !important;
            }
            .app-icon-img {
                border-radius: 18px !important;
                font-size: 11px !important;
            }
            .app-title {
                font-size: 10px !important;
                max-width: 78px !important;
            }

            /* Catalog Grid Mobile */
            .catalog-header-wrap {
                padding: 18px 14px !important;
            }
            .catalog-main-title {
                font-size: 18px !important;
            }
            .catalog-sub-title {
                font-size: 13px !important;
            }
            .catalog-desc-text {
                font-size: 11px !important;
                line-height: 1.5 !important;
            }
            .catalog-search-box input {
                font-size: 12px !important;
                padding: 10px 40px 10px 14px !important;
            }
            .catalog-games-grid {
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 16px 8px !important;
            }
            .catalog-game-card {
                width: 100% !important;
            }
            .catalog-icon-box {
                width: 76px !important;
                height: 76px !important;
                border-radius: 20px !important;
            }
            .catalog-name {
                font-size: 11px !important;
            }
            .catalog-tag {
                font-size: 9px !important;
            }

            /* Filter Tabs Mobile (Scrollable) */
            .filter-tabs {
                gap: 6px !important;
                overflow-x: auto !important;
                padding-bottom: 6px !important;
                -webkit-overflow-scrolling: touch !important;
            }
            .tab-btn {
                padding: 7px 12px !important;
                font-size: 11px !important;
                border-radius: 8px !important;
            }

            /* Topup View Mobile */
            .topup-layout-grid {
                grid-template-columns: 1fr !important;
                gap: 16px !important;
            }
            .topup-game-banner-card {
                padding: 18px 16px !important;
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 14px !important;
            }
            .topup-game-heading {
                font-size: 20px !important;
            }
            .topup-game-subtext {
                font-size: 11px !important;
                margin-bottom: 12px !important;
            }
            .topup-trust-pill {
                padding: 6px 12px !important;
            }
            .topup-trust-title {
                font-size: 11px !important;
            }
            .topup-trust-desc {
                font-size: 9px !important;
            }
            .topup-banner-action-area {
                width: 100% !important;
                align-items: flex-start !important;
            }
            .btn-upload-game-banner {
                width: 100% !important;
                justify-content: center !important;
                font-size: 12px !important;
                padding: 9px 14px !important;
            }
            .topup-packages-3col-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 10px !important;
            }
            .topup-package-item {
                padding: 12px 10px !important;
                gap: 8px !important;
            }
            .topup-pack-icon-wrap {
                width: 32px !important;
                height: 32px !important;
            }
            .topup-pack-gem-icon, .topup-pack-chest-icon {
                font-size: 20px !important;
            }
            .topup-pack-title {
                font-size: 12px !important;
            }
            .topup-pack-price {
                font-size: 13px !important;
            }
            .topup-step-panel {
                padding: 16px 14px !important;
                border-radius: 14px !important;
            }

            /* Payment View Mobile */
            .luxury-payment-2col {
                grid-template-columns: 1fr !important;
                gap: 18px !important;
            }
            .luxury-qr-panel, .luxury-amount-panel {
                padding: 18px 14px !important;
            }
            .qr-img {
                width: 200px !important;
                height: 200px !important;
            }
            .luxury-preset-grid {
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 8px !important;
            }
            .luxury-preset-btn {
                padding: 10px 6px !important;
                font-size: 13px !important;
            }
            .luxury-steps-container {
                grid-template-columns: 1fr !important;
                gap: 12px !important;
            }
            .luxury-step-arrow {
                display: none !important;
            }
            .luxury-guarantee-bar {
                grid-template-columns: 1fr 1fr !important;
                gap: 12px !important;
            }

            /* Admin Backoffice Mobile */
            .admin-dashboard-layout {
                grid-template-columns: 1fr !important;
                gap: 16px !important;
            }
            .admin-sidebar-menu {
                position: relative !important;
                top: 0 !important;
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 6px !important;
                padding: 12px !important;
            }
            .admin-nav-item {
                font-size: 11px !important;
                padding: 9px 10px !important;
                gap: 6px !important;
            }
            .admin-main-panel {
                padding: 16px 12px !important;
            }
            .admin-stats-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: 10px !important;
            }
            .admin-stat-val {
                font-size: 18px !important;
            }
            .admin-stat-label {
                font-size: 10px !important;
            }
            .admin-table {
                font-size: 11px !important;
            }
            .admin-table th, .admin-table td {
                padding: 8px 10px !important;
            }

            /* Mascot Widget Mobile */
            /* clean_mascot_rule */
            /* clean_mascot_rule */
        }


        /* ================= MOBILE ANNOUNCEMENT & MASCOT RESPONSIVE REFINEMENT ================= */
        @media (max-width: 768px) {
            /* Fix Announcement Bar on Mobile */
            .luxury-notice-wrapper {
                padding: 0 10px !important;
                margin: 8px auto 6px auto !important;
            }
            .luxury-notice-bar {
                padding: 6px 10px !important;
                gap: 8px !important;
                border-radius: 20px !important;
            }
            .notice-number-pill {
                width: 20px !important;
                height: 20px !important;
                min-width: 20px !important;
                font-size: 10px !important;
            }
            .notice-brand-title {
                font-size: 11px !important;
                gap: 4px !important;
            }
            .notice-brand-title i {
                font-size: 12px !important;
            }
            .notice-brand-title span {
                display: inline-block !important;
            }
            .notice-content-scroll {
                font-size: 11px !important;
            }
            .notice-detail-btn {
                font-size: 10px !important;
                padding: 2px 6px !important;
                white-space: nowrap !important;
            }
            .notice-v-divider {
                height: 12px !important;
            }
            .notice-close-btn {
                font-size: 12px !important;
                margin-left: 2px !important;
            }

            /* Fix Floating Mascot Widget on Mobile */
            /* clean_mascot_rule */
            /* clean_mascot_rule */
            /* clean_mascot_rule */
            /* clean_mascot_rule */
            /* clean_mascot_rule */

            /* Fix Top Spender Card on Mobile */
            .top-spender-card {
                padding: 16px 12px !important;
                margin-top: 14px !important;
            }
            .top-spender-header {
                font-size: 15px !important;
            }
            .spender-rank-item {
                padding: 8px 10px !important;
            }
            .spender-name {
                font-size: 12px !important;
            }
            .spender-amount {
                font-size: 13px !important;
            }
        }


        
        @media (max-width: 768px) {
            /* clean_mascot_rule */
            /* clean_mascot_rule */
            /* clean_mascot_rule */
            /* clean_mascot_rule */
            /* clean_mascot_rule */
            /* clean_mascot_rule */
        }


        /* ================= ULTRA REFINED MOBILE TOP NAVBAR (PERFECT ALIGNMENT & COMPACT) ================= */
        @media (max-width: 768px) {
            .navbar {
                padding: 6px 0 !important;
                background: rgba(8, 13, 24, 0.98) !important;
            }
            .nav-inner {
                display: flex !important;
                justify-content: space-between !important;
                align-items: center !important;
                gap: 6px !important;
                padding: 0 4px !important;
            }
            .brand-logo {
                display: flex !important;
                align-items: center !important;
                gap: 6px !important;
                flex-shrink: 1 !important;
                min-width: 0 !important;
            }
            .brand-logo-img {
                height: 28px !important;
                max-width: 90px !important;
                flex-shrink: 0 !important;
            }
            .brand-name {
                font-size: 14px !important;
                white-space: nowrap !important;
                display: inline-block !important;
            }

            /* Nav Actions Right Area */
            .nav-actions {
                display: flex !important;
                align-items: center !important;
                gap: 6px !important;
                flex-shrink: 0 !important;
                justify-content: flex-end !important;
            }

            /* Mobile Admin Badge (Super Compact & Clean) */
            .btn-admin-nav {
                padding: 4px 8px !important;
                font-size: 10.5px !important;
                gap: 4px !important;
                border-radius: 7px !important;
                white-space: nowrap !important;
            }
            .btn-admin-nav i {
                font-size: 11px !important;
            }

            /* Mobile User Pill Capsule */
            .user-pill {
                padding: 3px 8px !important;
                gap: 5px !important;
                border-radius: 7px !important;
                background: #111827 !important;
            }
            .user-avatar {
                width: 18px !important;
                height: 18px !important;
                font-size: 9.5px !important;
                border-radius: 4px !important;
            }
            #nav-username {
                font-size: 11px !important;
                max-width: 60px !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
            }
            .user-credit {
                font-size: 11.5px !important;
                white-space: nowrap !important;
            }

            /* Mobile Guest Login Button */
            .btn-topup-nav {
                padding: 5px 10px !important;
                font-size: 11px !important;
                border-radius: 7px !important;
                gap: 4px !important;
                white-space: nowrap !important;
            }
            .btn-topup-nav i {
                font-size: 11px !important;
            }

            /* Mobile Logout Button (Icon Only or Compact) */
            .btn-logout-nav {
                padding: 4px 7px !important;
                font-size: 10.5px !important;
                gap: 3px !important;
                border-radius: 7px !important;
            }
        }

        @media (max-width: 420px) {
            .brand-name {
                font-size: 12.5px !important;
            }
            .brand-logo-img {
                height: 25px !important;
            }
            .btn-admin-nav {
                padding: 4px 6px !important;
                font-size: 10px !important;
            }
            .user-pill {
                padding: 2px 6px !important;
            }
            #nav-username {
                display: none !important; /* Hide username on super small screens, keep balance and avatar */
            }
            .user-credit {
                font-size: 11px !important;
            }
        }


        /* ================= PROMINENT ELEVATED MOBILE ANIME MASCOT (ABOVE BOTTOM NAV) ================= */
        @media (max-width: 768px) {
            .mascot-floating-widget {
                position: fixed !important;
                bottom: 82px !important; /* Clearly floats above 64px mobile bottom nav */
                right: 10px !important;
                left: auto !important;
                top: auto !important;
                z-index: 999999 !important;
                display: flex !important;
                flex-direction: row !important;
                align-items: flex-end !important;
                justify-content: flex-end !important;
                gap: 8px !important;
                pointer-events: none !important;
                transform: none !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
            .mascot-character-btn {
                width: 76px !important;
                min-width: 76px !important;
                max-width: 82px !important;
                height: auto !important;
                max-height: 105px !important;
                display: block !important;
                pointer-events: auto !important;
                cursor: pointer !important;
                object-fit: contain !important;
                filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 15px rgba(245, 158, 11, 0.75)) !important;
                margin: 0 !important;
                padding: 0 !important;
                animation: mascotBounce 3s ease-in-out infinite !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
            .mascot-character-btn:hover,
            .mascot-character-btn:active {
                transform: scale(1.08) translateY(-4px) !important;
            }
            .mascot-speech-bubble {
                position: relative !important;
                pointer-events: auto !important;
                max-width: 175px !important;
                background: linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.98)) !important;
                border: 1.5px solid #f59e0b !important;
                border-radius: 14px !important;
                padding: 8px 12px !important;
                margin-bottom: 16px !important;
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 14px rgba(245, 158, 11, 0.35) !important;
                right: auto !important;
                bottom: auto !important;
                left: auto !important;
                top: auto !important;
            }
            .mascot-speech-bubble::after {
                content: '' !important;
                position: absolute !important;
                bottom: 10px !important;
                right: -7px !important;
                width: 0 !important;
                height: 0 !important;
                border-top: 6px solid transparent !important;
                border-bottom: 6px solid transparent !important;
                border-left: 7px solid #f59e0b !important;
                display: block !important;
            }
            .mascot-speech-title {
                font-size: 11px !important;
                font-weight: 800 !important;
                color: #fbbf24 !important;
                display: flex !important;
                align-items: center !important;
                gap: 5px !important;
                margin-bottom: 3px !important;
            }
            .mascot-speech-desc {
                font-size: 9.5px !important;
                color: #cbd5e1 !important;
                line-height: 1.35 !important;
            }
            .mascot-speech-bubble-close {
                position: absolute !important;
                top: -7px !important;
                left: -7px !important;
                width: 19px !important;
                height: 19px !important;
                background: #ef4444 !important;
                color: #ffffff !important;
                font-size: 9.5px !important;
                border-radius: 50% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                cursor: pointer !important;
                box-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
                z-index: 100 !important;
            }
        }

        @media (max-width: 420px) {
            .mascot-floating-widget {
                bottom: 78px !important;
                right: 6px !important;
                gap: 6px !important;
            }
            .mascot-character-btn {
                width: 68px !important;
                min-width: 68px !important;
                max-width: 72px !important;
            }
            .mascot-speech-bubble {
                max-width: 155px !important;
                padding: 7px 10px !important;
                margin-bottom: 12px !important;
            }
            .mascot-speech-title {
                font-size: 10.5px !important;
            }
            .mascot-speech-desc {
                font-size: 9px !important;
            }
        }


        /* ================= ULTRA CLEAN MOBILE TOP NAVBAR (ADMIN BUTTON HIDDEN ON TOP, IN BOTTOM NAV INSTEAD) ================= */
        @media (max-width: 768px) {
            .navbar {
                padding: 8px 0 !important;
                background: rgba(8, 13, 24, 0.98) !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
            }
            .nav-inner {
                display: flex !important;
                justify-content: space-between !important;
                align-items: center !important;
                gap: 8px !important;
                padding: 0 8px !important;
            }
            .brand-logo {
                display: flex !important;
                align-items: center !important;
                gap: 8px !important;
                flex-shrink: 0 !important;
                cursor: pointer !important;
            }
            .brand-logo-img {
                height: 32px !important;
                width: auto !important;
                max-width: 110px !important;
            }
            .brand-name {
                font-size: 15px !important;
                font-weight: 800 !important;
                white-space: nowrap !important;
                display: inline-block !important;
            }

            /* Nav Actions Right Area */
            .nav-actions {
                display: flex !important;
                align-items: center !important;
                gap: 8px !important;
                flex-shrink: 0 !important;
                justify-content: flex-end !important;
            }

            /* HIDE Top Admin Button on Mobile (Since it is already on Mobile Bottom Navigation Bar) */
            .btn-admin-nav,
            #nav-admin-btn {
                display: none !important;
            }

            /* Mobile User Pill Capsule */
            .user-pill {
                padding: 4px 10px !important;
                gap: 6px !important;
                border-radius: 8px !important;
                background: #111827 !important;
                border: 1px solid rgba(255, 255, 255, 0.12) !important;
            }
            .user-avatar {
                width: 20px !important;
                height: 20px !important;
                font-size: 10px !important;
                border-radius: 5px !important;
            }
            #nav-username {
                font-size: 12px !important;
                max-width: 80px !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
                display: inline-block !important;
            }
            .user-credit {
                font-size: 12px !important;
                white-space: nowrap !important;
            }

            /* Mobile Guest Login Button */
            .btn-topup-nav {
                padding: 6px 12px !important;
                font-size: 12px !important;
                border-radius: 8px !important;
                gap: 5px !important;
                white-space: nowrap !important;
            }
            .btn-topup-nav i {
                font-size: 12px !important;
            }

            /* Mobile Logout Button */
            .btn-logout-nav {
                padding: 5px 9px !important;
                font-size: 11px !important;
                gap: 4px !important;
                border-radius: 8px !important;
            }
        }


        /* ================= SEPARATED RESPONSIVE MASCOT CONTROLS ================= */
        /* Desktop Screens (min-width: 769px) */
        @media (min-width: 769px) {
            .mascot-floating-widget {
                bottom: 24px !important;
                right: 24px !important;
                z-index: 9999 !important;
                display: flex !important;
                flex-direction: row !important;
                align-items: flex-end !important;
                gap: 12px !important;
            }
            .mascot-character-btn {
                width: 110px !important;
                min-width: 110px !important;
                max-width: 110px !important;
                height: auto !important;
                max-height: 150px !important;
                display: block !important;
            }
            .mascot-speech-bubble {
                max-width: 210px !important;
                margin-bottom: 25px !important;
                padding: 12px 16px !important;
                font-size: 11px !important;
            }
        }

        /* Mobile Screens (max-width: 768px) */
        @media (max-width: 768px) {
            .mascot-floating-widget {
                position: fixed !important;
                bottom: 80px !important; /* Above 64px mobile bottom nav bar */
                right: 10px !important;
                left: auto !important;
                top: auto !important;
                z-index: 999999 !important;
                display: flex !important;
                flex-direction: row !important;
                align-items: flex-end !important;
                justify-content: flex-end !important;
                gap: 8px !important;
                pointer-events: none !important;
            }
            .mascot-character-btn {
                width: 70px !important;
                min-width: 70px !important;
                max-width: 75px !important;
                height: auto !important;
                max-height: 95px !important;
                display: block !important;
                pointer-events: auto !important;
                cursor: pointer !important;
                object-fit: contain !important;
                filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 12px rgba(245, 158, 11, 0.6)) !important;
                margin: 0 !important;
                padding: 0 !important;
            }
            .mascot-character-btn:hover,
            .mascot-character-btn:active {
                transform: scale(1.08) translateY(-4px) !important;
            }
            .mascot-speech-bubble {
                position: relative !important;
                pointer-events: auto !important;
                max-width: 170px !important;
                background: linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.98)) !important;
                border: 1.5px solid #f59e0b !important;
                border-radius: 14px !important;
                padding: 8px 12px !important;
                margin-bottom: 14px !important;
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 14px rgba(245, 158, 11, 0.35) !important;
                right: auto !important;
                bottom: auto !important;
            }
            .mascot-speech-bubble::after {
                content: '' !important;
                position: absolute !important;
                bottom: 10px !important;
                right: -7px !important;
                width: 0 !important;
                height: 0 !important;
                border-top: 6px solid transparent !important;
                border-bottom: 6px solid transparent !important;
                border-left: 7px solid #f59e0b !important;
                display: block !important;
            }
            .mascot-speech-title {
                font-size: 11px !important;
                font-weight: 800 !important;
                color: #fbbf24 !important;
                display: flex !important;
                align-items: center !important;
                gap: 5px !important;
                margin-bottom: 3px !important;
            }
            .mascot-speech-desc {
                font-size: 9.5px !important;
                color: #cbd5e1 !important;
                line-height: 1.35 !important;
            }
            .mascot-speech-bubble-close {
                position: absolute !important;
                top: -7px !important;
                left: -7px !important;
                width: 19px !important;
                height: 19px !important;
                background: #ef4444 !important;
                color: #ffffff !important;
                font-size: 9.5px !important;
                border-radius: 50% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                cursor: pointer !important;
                box-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
                z-index: 100 !important;
            }
        }

        @media (max-width: 420px) {
            .mascot-floating-widget {
                bottom: 76px !important;
                right: 6px !important;
                gap: 6px !important;
            }
            .mascot-character-btn {
                width: 62px !important;
                min-width: 62px !important;
                max-width: 65px !important;
            }
            .mascot-speech-bubble {
                max-width: 145px !important;
                padding: 6px 10px !important;
                margin-bottom: 12px !important;
            }
            .mascot-speech-title {
                font-size: 10px !important;
            }
            .mascot-speech-desc {
                font-size: 8.5px !important;
            }
        }


        
        
        /* ================= GLOW-ON-HOVER LUXURY ORANGE SPACE BUTTON ================= */
        .glow-on-hover {
            width: auto;
            min-width: 250px;
            height: 56px;
            padding: 0 36px;
            border: none;
            outline: none;
            color: #ffffff;
            background: #0f172a;
            cursor: pointer;
            position: relative;
            z-index: 0;
            border-radius: 12px;
            font-family: 'Kanit', sans-serif;
            font-size: 19px;
            font-weight: 800;
            letter-spacing: 1.5px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
        }

        /* Ambient Glowing Halo in Orange / Amber / Gold / Crimson Nebula Spectrum */
        .glow-on-hover:before {
            content: '';
            background: linear-gradient(45deg, #ff4500, #ff7300, #f59e0b, #fbbf24, #d97706, #b45309, #ff5722, #ea580c, #ff4500);
            position: absolute;
            top: -3px;
            left: -3px;
            background-size: 400%;
            z-index: -1;
            filter: blur(8px);
            width: calc(100% + 6px);
            height: calc(100% + 6px);
            animation: glowingOrange 12s linear infinite;
            opacity: 0;
            transition: opacity 0.35s ease-in-out;
            border-radius: 14px;
        }

        .glow-on-hover:hover:before {
            opacity: 1;
        }

        .glow-on-hover:hover {
            transform: scale(1.05) translateY(-2px);
            color: #ffffff;
            text-shadow: 0 0 12px rgba(251, 191, 36, 0.9);
        }

        .glow-on-hover:hover .glow-btn-icon {
            transform: translateX(4px) scale(1.15);
            color: #fbbf24;
        }

        .glow-btn-icon {
            font-size: 18px;
            color: #f59e0b;
            transition: all 0.3s ease;
        }

        .glow-on-hover:active {
            color: #fbbf24;
            transform: scale(0.97) translateY(1px);
        }

        .glow-on-hover:active:after {
            background: transparent;
        }

        .glow-on-hover:after {
            z-index: -1;
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: #090d16;
            left: 0;
            top: 0;
            border-radius: 12px;
            border: 1px solid rgba(245, 158, 11, 0.3);
            transition: border-color 0.3s ease;
        }

        .glow-on-hover:hover:after {
            border-color: rgba(245, 158, 11, 0.8);
        }

        @keyframes glowingOrange {
            0% { background-position: 0 0; }
            50% { background-position: 400% 0; }
            100% { background-position: 0 0; }
        }

        @media (max-width: 768px) {
            .glow-on-hover {
                min-width: 210px;
                height: 50px;
                padding: 0 24px;
                font-size: 16px;
            }
        }


        /* Hide Recent Live Order Notification on Mobile (max-width: 768px) */
        @media (max-width: 768px) {
            #live-order-toast,
            .custom-live-card-toast {
                display: none !important;
                visibility: hidden !important;
                pointer-events: none !important;
                opacity: 0 !important;
            }
        }


        /* ================= STRICT ROLE-BASED ACCESS CONTROL (RBAC) STYLES ================= */
        #nav-admin-btn,
        .btn-admin-nav,
        #mobile-bottom-admin-tab,
        #topup-banner-admin-actions {
            display: none !important;
        }

        #nav-admin-btn.is-admin-active,
        .btn-admin-nav.is-admin-active,
        #topup-banner-admin-actions.is-admin-active {
            display: inline-flex !important;
        }

        #mobile-bottom-admin-tab.is-admin-active {
            display: flex !important;
        }

            
        /* AUTH PAGE STRICT VISIBILITY & POINTER EVENTS */
        #view-auth-page {
            display: none;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            z-index: 100000 !important;
            background-color: #050811 !important;
            overflow-y: auto !important;
            box-sizing: border-box !important;
            padding: 20px !important;
            pointer-events: none;
        }

        #view-auth-page.active {
            display: flex !important;
            pointer-events: auto !important;
        }

        .navbar {
            position: sticky !important;
            top: 0 !important;
            z-index: 9999 !important;
            pointer-events: auto !important;
        }

        .nav-link,
        .btn-topup-nav,
        .brand-logo,
        .user-pill,
        .btn-logout-nav {
            cursor: pointer !important;
            pointer-events: auto !important;
        }

    
        /* ================= ULTRA-CRISP HD FALLING LUCKY CLOVERS & FLOWER PETALS ================= */
        #lucky-falling-clovers-container {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            pointer-events: none !important;
            z-index: 10 !important;
            overflow: hidden !important;
        }

        .lucky-falling-leaf {
            position: absolute !important;
            top: -60px !important;
            pointer-events: none !important;
            user-select: none !important;
            will-change: transform, opacity !important;
            filter: drop-shadow(0 3px 10px rgba(34, 197, 94, 0.55)) !important;
            opacity: 0.95 !important;
        }

        .lucky-falling-leaf svg {
            width: 100% !important;
            height: 100% !important;
            display: block !important;
            filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
        }

        @keyframes cloverFallDown {
            0% {
                transform: translateY(0) rotate(0deg) rotateY(0deg) scale(0.9);
                opacity: 0;
            }
            10% {
                opacity: 0.95;
            }
            85% {
                opacity: 0.95;
            }
            100% {
                transform: translateY(105vh) rotate(360deg) rotateY(360deg) scale(1.05);
                opacity: 0;
            }
        }

        @keyframes cloverSwayTumble {
            0% {
                margin-left: 0;
                transform: rotateZ(0deg) rotateX(0deg);
            }
            25% {
                margin-left: 35px;
                transform: rotateZ(45deg) rotateX(60deg);
            }
            50% {
                margin-left: -30px;
                transform: rotateZ(-30deg) rotateX(120deg);
            }
            75% {
                margin-left: 25px;
                transform: rotateZ(20deg) rotateX(180deg);
            }
            100% {
                margin-left: 0;
                transform: rotateZ(0deg) rotateX(360deg);
            }
        }

    
        .navbar {
            position: sticky !important;
            top: 0 !important;
            z-index: 99999 !important;
            pointer-events: auto !important;
        }
        .nav-link, .brand-logo, .btn-topup-nav, .btn-admin-nav, .user-pill, .btn-logout-nav {
            cursor: pointer !important;
            pointer-events: auto !important;
        }

    
        /* ================= BULLETPROOF INTERACTION & MODAL CONTROLS ================= */
        .navbar {
            position: sticky !important;
            top: 0 !important;
            z-index: 99999 !important;
            pointer-events: auto !important;
        }
        .navbar, .navbar * {
            pointer-events: auto !important;
        }
        .nav-link, .brand-logo, .btn-topup-nav, .btn-admin-nav, .user-pill, .btn-logout-nav, .btn-social-auth, .btn-neon-auth-submit, .auth-tab-btn, .auth-back-home-btn {
            cursor: pointer !important;
            pointer-events: auto !important;
        }

        #lucky-falling-clovers-container,
        #lucky-falling-clovers-container * {
            pointer-events: none !important;
            user-select: none !important;
        }

        .cod-bg-decoration, .pubg-bg-decoration {
            pointer-events: none !important;
        }

        /* Dedicated Fullpage Auth View */
        #view-auth-page {
            display: none;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            z-index: 100000 !important;
            background-color: #050811 !important;
            overflow-y: auto !important;
            box-sizing: border-box !important;
            padding: 20px !important;
            pointer-events: none;
        }

        #view-auth-page.active {
            display: flex !important;
            flex-direction: column !important;
            pointer-events: auto !important;
        }

        #view-auth-page input,
        #view-auth-page button,
        #view-auth-page a,
        #view-auth-page label {
            pointer-events: auto !important;
            cursor: pointer;
        }

        #view-auth-page input {
            cursor: text !important;
        }

        /* View Sections visibility */
        .view-section {
            display: none;
            pointer-events: none;
        }

        .view-section.active {
            display: block !important;
            pointer-events: auto !important;
        }

    
        /* ================= ULTRA LUXURY NEWS TICKER BAR ================= */
        .news-ticker-bar {
            background: linear-gradient(90deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.95));
            border-top: 1px solid rgba(245, 158, 11, 0.25);
            border-bottom: 1px solid rgba(245, 158, 11, 0.35);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
            padding: 10px 0;
            margin-bottom: 24px;
            position: relative;
            z-index: 100;
        }
        .news-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        .news-badge-wrap {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.3));
            border: 1px solid rgba(245, 158, 11, 0.5);
            padding: 6px 14px;
            border-radius: 30px;
            white-space: nowrap;
            box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
            flex-shrink: 0;
        }
        .news-pulse-badge {
            width: 22px;
            height: 22px;
            background: #f59e0b;
            color: #0f172a;
            font-weight: 800;
            font-size: 11px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 10px #f59e0b;
        }
        .news-title-tag {
            color: #fde68a;
            font-size: 13px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 6px;
            letter-spacing: 0.3px;
        }
        .news-marquee-content {
            flex: 1;
            overflow: hidden;
            color: #e2e8f0;
            font-size: 13.5px;
            font-weight: 500;
            display: flex;
            align-items: center;
            white-space: nowrap;
        }
        .news-marquee-content marquee {
            width: 100%;
            display: flex;
            align-items: center;
        }
        .marquee-tag-new {
            background: linear-gradient(135deg, #ef4444, #dc2626);
            color: #ffffff;
            font-size: 10px;
            font-weight: 800;
            padding: 2px 8px;
            border-radius: 20px;
            margin-left: 8px;
            box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
            vertical-align: middle;
        }
        .news-action-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #f59e0b;
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            padding: 5px 12px;
            border-radius: 8px;
            background: rgba(245, 158, 11, 0.1);
            border: 1px solid rgba(245, 158, 11, 0.3);
            transition: all 0.2s ease;
            flex-shrink: 0;
        }
        .news-action-link:hover {
            background: rgba(245, 158, 11, 0.25);
            color: #ffffff;
            border-color: #f59e0b;
            box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
        }

    
        /* ================= ULTRA MODERN FULL-WIDTH FLOATING NAVBAR & TICKER ================= */
        .navbar {
            background: linear-gradient(180deg, rgba(11, 15, 25, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
            border-bottom: 1px solid rgba(245, 158, 11, 0.25) !important;
            position: sticky !important;
            top: 0 !important;
            z-index: 900 !important;
            padding: 12px 0 !important;
            width: 100% !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
        }
        .nav-inner {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            width: 100% !important;
            max-width: 1360px !important;
            margin: 0 auto !important;
            padding: 0 24px !important;
            gap: 16px !important;
        }
        .brand-logo {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            cursor: pointer !important;
            flex-shrink: 0 !important;
        }
        .brand-logo .logo-badge {
            width: 40px !important;
            height: 40px !important;
            background: linear-gradient(135deg, #f59e0b, #d97706) !important;
            color: #0f172a !important;
            border-radius: 12px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 20px !important;
            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4) !important;
        }
        .brand-name {
            font-family: 'Kanit', sans-serif !important;
            font-size: 22px !important;
            font-weight: 900 !important;
            color: #ffffff !important;
            letter-spacing: 0.5px !important;
        }
        .nav-menu {
            display: flex !important;
            align-items: center !important;
            gap: 6px !important;
            list-style: none !important;
            margin: 0 !important;
            padding: 0 !important;
            flex-wrap: nowrap !important;
        }
        .nav-menu li {
            list-style: none !important;
        }
        .nav-menu .nav-link {
            display: inline-flex !important;
            align-items: center !important;
            gap: 8px !important;
            padding: 8px 14px !important;
            border-radius: 10px !important;
            color: #cbd5e1 !important;
            font-size: 13.5px !important;
            font-weight: 600 !important;
            text-decoration: none !important;
            transition: all 0.2s ease !important;
            white-space: nowrap !important;
            cursor: pointer !important;
        }
        .nav-menu .nav-link:hover {
            color: #f59e0b !important;
            background: rgba(245, 158, 11, 0.12) !important;
        }
        .nav-menu .nav-link.active {
            color: #ffffff !important;
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.35)) !important;
            border: 1px solid rgba(245, 158, 11, 0.5) !important;
            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2) !important;
        }
        .nav-actions {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            flex-shrink: 0 !important;
        }
        .btn-admin-nav {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(185, 28, 28, 0.3)) !important;
            color: #fca5a5 !important;
            border: 1px solid rgba(239, 68, 68, 0.4) !important;
            padding: 8px 14px !important;
            border-radius: 10px !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            cursor: pointer !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 6px !important;
            transition: all 0.2s ease !important;
            white-space: nowrap !important;
        }
        .btn-admin-nav:hover {
            background: rgba(239, 68, 68, 0.35) !important;
            color: #ffffff !important;
            border-color: #ef4444 !important;
            box-shadow: 0 0 15px rgba(239, 68, 68, 0.4) !important;
        }
        .auth-buttons .btn-primary {
            background: linear-gradient(135deg, #f59e0b, #d97706) !important;
            color: #0f172a !important;
            font-weight: 800 !important;
            font-size: 13.5px !important;
            padding: 8px 18px !important;
            border-radius: 10px !important;
            border: none !important;
            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35) !important;
            cursor: pointer !important;
            white-space: nowrap !important;
            transition: all 0.2s ease !important;
        }
        .auth-buttons .btn-primary:hover {
            transform: translateY(-1px) !important;
            box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5) !important;
        }

        /* ================= ULTRA MODERN FULL-WIDTH NEWS TICKER ================= */
        .news-ticker-bar {
            background: linear-gradient(90deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.95)) !important;
            border-bottom: 1px solid rgba(245, 158, 11, 0.2) !important;
            padding: 8px 0 !important;
            margin-bottom: 24px !important;
            width: 100% !important;
        }
        .news-inner {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 16px !important;
            width: 100% !important;
            max-width: 1360px !important;
            margin: 0 auto !important;
            padding: 0 24px !important;
        }
        .news-badge-wrap {
            display: inline-flex !important;
            align-items: center !important;
            gap: 8px !important;
            background: rgba(245, 158, 11, 0.15) !important;
            border: 1px solid rgba(245, 158, 11, 0.4) !important;
            padding: 4px 12px !important;
            border-radius: 20px !important;
            flex-shrink: 0 !important;
        }
        .news-pulse-badge {
            width: 18px !important;
            height: 18px !important;
            background: #f59e0b !important;
            color: #0f172a !important;
            font-weight: 900 !important;
            font-size: 10px !important;
            border-radius: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        .news-title-tag {
            color: #fbbf24 !important;
            font-size: 12.5px !important;
            font-weight: 700 !important;
        }
        .news-marquee-content {
            flex: 1 !important;
            overflow: hidden !important;
            color: #cbd5e1 !important;
            font-size: 13px !important;
        }
        .news-action-link {
            color: #f59e0b !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            cursor: pointer !important;
            flex-shrink: 0 !important;
            background: rgba(245, 158, 11, 0.1) !important;
            border: 1px solid rgba(245, 158, 11, 0.3) !important;
            padding: 4px 12px !important;
            border-radius: 8px !important;
        }

        /* Final layout contract: full-width bars with consistently aligned content. */
        .site-root > .view-section:not(#view-auth-page) {
            width: calc(100% - 48px) !important;
            max-width: 1360px !important;
            margin: 0 auto !important;
            padding: 24px 0 64px !important;
        }
        .site-root > #view-home {
            padding-top: 0 !important;
        }
        @media (max-width: 768px) {
            .site-root > .view-section:not(#view-auth-page) {
                width: calc(100% - 28px) !important;
                padding: 16px 0 88px !important;
            }
            .site-root > #view-home {
                padding-top: 0 !important;
            }
        }

        /* Ensure the new header wins over the legacy theme layers above. */
        .site-root > .navbar {
            min-height: 76px !important;
            padding: 0 !important;
            background: radial-gradient(circle at 18% -80%, rgba(245,158,11,.18), transparent 34%), linear-gradient(180deg,#0d1423,#070c17) !important;
            border-bottom: 1px solid rgba(245,158,11,.30) !important;
            box-shadow: 0 16px 50px rgba(0,0,0,.42) !important;
        }
        .site-root > .navbar .nav-inner { min-height: 76px !important; padding: 0 28px !important; gap: 28px !important; }
        .site-root > .navbar .brand-logo { gap: 13px !important; padding-right: 24px !important; }
        .site-root > .navbar .logo-badge { width: 46px !important; height: 46px !important; border-radius: 15px !important; background: linear-gradient(145deg,#ffc446,#ed8b00 72%) !important; border: 1px solid rgba(255,218,124,.62) !important; }
        .site-root > .navbar .brand-name { font-size: 21px !important; font-weight: 900 !important; }
        .site-root > .navbar .nav-menu { flex: 1 !important; justify-content: center !important; gap: 5px !important; padding: 5px !important; border-radius: 15px !important; background: rgba(255,255,255,.025) !important; border: 1px solid rgba(255,255,255,.055) !important; }
        .site-root > .navbar .nav-link { min-height: 38px !important; padding: 0 12px !important; border-radius: 11px !important; color: #aeb9ca !important; border: 1px solid transparent !important; }
        .site-root > .navbar .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.055) !important; border-color: rgba(255,255,255,.08) !important; }
        .site-root > .navbar .nav-link.active { color: #fff7df !important; background: linear-gradient(145deg,rgba(245,158,11,.22),rgba(245,158,11,.08)) !important; border-color: rgba(245,158,11,.62) !important; }
        .site-root > .navbar .auth-buttons .btn-primary { min-height: 44px !important; padding: 0 21px !important; border-radius: 13px !important; background: linear-gradient(135deg,#ffbe2e,#ef8e00) !important; border: 1px solid #ffc755 !important; box-shadow: 0 9px 25px rgba(245,158,11,.27),inset 0 1px 0 rgba(255,255,255,.55) !important; }
        .site-root > .news-ticker-bar { min-height: 46px !important; padding: 0 !important; margin-bottom: 28px !important; background: rgba(13,21,36,.92) !important; border-top: 0 !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; }
        .site-root > .news-ticker-bar .news-inner { min-height: 46px !important; padding: 0 28px !important; }
        @media (max-width: 768px) {
            .site-root > .navbar, .site-root > .navbar .nav-inner { min-height: 64px !important; }
            .site-root > .navbar .nav-inner { padding: 0 14px !important; }
            .site-root > .navbar .logo-badge { width: 40px !important; height: 40px !important; }
            .site-root > .navbar .brand-name { font-size: 17px !important; }
            .site-root > .news-ticker-bar .news-inner { padding: 0 14px !important; }
        }

        /* ================= MOBILE-FIRST USABILITY OVERRIDES ================= */
        @media (max-width: 768px) {
            html, body {
                width: 100% !important;
                max-width: 100% !important;
                overflow-x: hidden !important;
            }

            body {
                padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
            }

            .site-root,
            .site-root > .view-section,
            .container {
                max-width: 100% !important;
                min-width: 0 !important;
            }

            /* Compact top bar: logo + primary account action only. */
            .site-root > .navbar {
                min-height: 62px !important;
                position: sticky !important;
                top: 0 !important;
            }
            .site-root > .navbar .nav-inner {
                width: 100% !important;
                min-height: 62px !important;
                padding: 0 12px !important;
                gap: 8px !important;
            }
            .site-root > .navbar .nav-menu {
                display: none !important;
            }
            .site-root > .navbar .brand-logo {
                min-width: 0 !important;
                padding: 0 !important;
                flex: 0 1 116px !important;
            }
            .site-root > .navbar .brand-logo-img {
                width: 112px !important;
                max-width: 100% !important;
                height: 54px !important;
            }
            .site-root > .navbar .nav-actions {
                min-width: 0 !important;
                margin-left: auto !important;
            }
            .site-root > .navbar .auth-buttons .btn-primary {
                min-height: 40px !important;
                padding: 0 12px !important;
                border-radius: 11px !important;
                font-size: 11px !important;
                white-space: nowrap !important;
            }
            .site-root > .navbar .auth-buttons .btn-primary i {
                font-size: 13px !important;
            }

            /* Announcement stays readable without stealing vertical space. */
            .site-root > .news-ticker-bar {
                min-height: 40px !important;
                margin-bottom: 10px !important;
            }
            .site-root > .news-ticker-bar .news-inner {
                min-height: 40px !important;
                padding: 0 10px !important;
                gap: 8px !important;
            }
            .news-title-tag { font-size: 10px !important; white-space: nowrap !important; }
            .news-pulse-badge { width: 22px !important; height: 22px !important; font-size: 10px !important; }
            .news-action-link { display: none !important; }

            .site-root > #view-home,
            .site-root > .view-section:not(#view-auth-page) {
                width: 100% !important;
                padding: 0 12px 96px !important;
            }

            /* Home hero and leaderboard stack naturally. */
            .hero-grid {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 12px !important;
                width: 100% !important;
            }
            .luxury-hero-slider-container {
                width: 100% !important;
                min-width: 0 !important;
                height: auto !important;
                aspect-ratio: 16 / 9 !important;
                border-radius: 14px !important;
            }
            .luxury-hero-slider-track,
            .luxury-hero-slide,
            .luxury-hero-slide img {
                height: 100% !important;
            }
            .luxury-hero-slide img { object-fit: cover !important; }
            .leaderboard-card {
                width: 100% !important;
                min-width: 0 !important;
                border-radius: 14px !important;
                padding: 14px !important;
            }
            .leaderboard-update-tag { font-size: 9px !important; }

            /* Horizontal controls scroll instead of overflowing the page. */
            .filter-tabs {
                width: 100% !important;
                display: flex !important;
                flex-wrap: nowrap !important;
                gap: 8px !important;
                overflow-x: auto !important;
                overscroll-behavior-inline: contain !important;
                scrollbar-width: none !important;
                padding: 4px 0 10px !important;
            }
            .filter-tabs::-webkit-scrollbar { display: none !important; }
            .filter-tabs .tab-btn {
                flex: 0 0 auto !important;
                min-height: 42px !important;
                padding: 0 14px !important;
                white-space: nowrap !important;
            }
            .game-marquee-container { max-width: 100% !important; overflow: hidden !important; }

            /* Catalog cards become comfortably tappable. */
            .catalog-header-wrap {
                grid-template-columns: 1fr !important;
                gap: 16px !important;
                padding: 18px 14px !important;
                border-radius: 14px !important;
            }
            .catalog-desc-text { display: none !important; }
            .catalog-search-area,
            .catalog-search-box { width: 100% !important; }
            .catalog-search-box input {
                min-height: 46px !important;
                font-size: 14px !important;
            }
            .catalog-games-grid {
                width: 100% !important;
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 12px !important;
            }
            .catalog-game-card {
                min-width: 0 !important;
                min-height: 150px !important;
                padding: 12px 8px !important;
                border-radius: 14px !important;
            }
            .catalog-icon-box {
                width: 82px !important;
                height: 82px !important;
            }
            .catalog-name {
                font-size: 12px !important;
                line-height: 1.35 !important;
                display: -webkit-box !important;
                -webkit-line-clamp: 2 !important;
                -webkit-box-orient: vertical !important;
                overflow: hidden !important;
            }

            /* Persistent thumb-friendly navigation. */
            .mobile-bottom-nav {
                display: block !important;
                height: calc(68px + env(safe-area-inset-bottom)) !important;
                padding: 4px 8px env(safe-area-inset-bottom) !important;
            }
            .mobile-nav-grid {
                height: 100% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: space-around !important;
            }
            .mobile-nav-tab {
                min-width: 58px !important;
                min-height: 54px !important;
                gap: 4px !important;
                -webkit-tap-highlight-color: transparent !important;
            }
            .mobile-nav-tab i { font-size: 19px !important; }
            .mobile-nav-tab span { font-size: 10px !important; }
            .mascot-floating-widget { bottom: 84px !important; right: 14px !important; }

            /* Welcome screen mirrors the desktop composition without clipping. */
            #welcome-splash-screen {
                padding: max(18px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom)) !important;
                background-position: 56% center !important;
            }
            #welcome-splash-screen .welcome-hero-content {
                width: 100% !important;
                max-width: 390px !important;
                padding: 16px 4px !important;
            }
            #welcome-splash-screen .welcome-hero-content img {
                width: min(280px, 78vw) !important;
                max-width: 100% !important;
                height: auto !important;
            }
            #welcome-splash-screen .welcome-hero-content > div:nth-child(2) {
                font-size: 12px !important;
                line-height: 1.55 !important;
                margin-bottom: 16px !important;
            }
            #welcome-splash-screen .welcome-hero-content > div:nth-child(3) {
                gap: 7px !important;
                margin-bottom: 20px !important;
            }
            #welcome-splash-screen .welcome-hero-content > div:nth-child(3) > div {
                padding: 7px 10px !important;
                border-radius: 999px !important;
                font-size: 10px !important;
            }
            #btn-enter-website {
                min-height: 48px !important;
                width: min(230px, 88%) !important;
            }

            button, a, [onclick] { touch-action: manipulation; }
        }

        @media (max-width: 360px) {
            .site-root > .navbar .brand-logo { flex-basis: 96px !important; }
            .site-root > .navbar .brand-logo-img { width: 94px !important; }
            .site-root > .navbar .auth-buttons .btn-primary { padding: 0 9px !important; font-size: 10px !important; }
            .catalog-games-grid { gap: 9px !important; }
            #welcome-splash-screen .welcome-hero-content > div:nth-child(3) > div { font-size: 9px !important; padding: 6px 8px !important; }
        }

        /* Floating customer-support assistant. */
        .mascot-floating-widget {
            pointer-events: none !important;
            transition: opacity .22s ease, transform .22s ease !important;
        }
        .mascot-floating-widget.mascot-widget-dismissed {
            opacity: 0 !important;
            transform: translateY(12px) scale(.94) !important;
        }
        .mascot-character-button {
            width: 104px;
            height: 132px;
            padding: 0;
            border: 0;
            background: transparent;
            cursor: pointer;
            pointer-events: auto;
            animation: mascotAssistantFloat 3.2s ease-in-out infinite;
            filter: drop-shadow(0 10px 16px rgba(0,0,0,.58));
        }
        .mascot-character-button img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .mascot-character-button:hover {
            animation-play-state: paused;
            transform: translateY(-5px) scale(1.04);
        }
        .mascot-speech-bubble {
            animation: mascotSpeechFloat 3.2s ease-in-out infinite !important;
        }
        .mascot-speech-bubble-close {
            border: 2px solid #111827;
            padding: 0;
        }
        @keyframes mascotAssistantFloat {
            0%, 100% { transform: translateY(0) rotate(-1deg); }
            50% { transform: translateY(-10px) rotate(1deg); }
        }
        @keyframes mascotSpeechFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }
        @media (max-width: 768px) {
            .mascot-floating-widget {
                align-items: flex-end !important;
                gap: 5px !important;
            }
            .mascot-character-button {
                width: 72px;
                height: 92px;
            }
            .mascot-speech-bubble {
                max-width: 176px !important;
                margin-bottom: 18px !important;
                padding: 10px 12px !important;
                border-radius: 14px !important;
            }
            .mascot-speech-title { font-size: 11px !important; }
            .mascot-speech-desc { font-size: 9px !important; }
        }

        @media (prefers-reduced-motion: reduce) {
            .mascot-character-button,
            .mascot-speech-bubble { animation: none !important; }
        }

        /* Clear, two-line announcement card on phones. */
        @media (max-width: 768px) {
            .site-root > .news-ticker-bar {
                width: calc(100% - 20px) !important;
                min-height: 76px !important;
                height: 76px !important;
                margin: 8px 10px 12px !important;
                padding: 0 !important;
                overflow: hidden !important;
                border: 1px solid rgba(245, 158, 11, .58) !important;
                border-radius: 14px !important;
                background: linear-gradient(145deg, rgba(22, 30, 45, .98), rgba(8, 14, 25, .98)) !important;
                box-shadow: 0 8px 24px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
            }
            .site-root > .news-ticker-bar .news-inner {
                width: 100% !important;
                height: 100% !important;
                min-height: 76px !important;
                padding: 7px 10px 8px !important;
                display: grid !important;
                grid-template-columns: 1fr !important;
                grid-template-rows: 28px 30px !important;
                align-content: center !important;
                gap: 3px !important;
                overflow: hidden !important;
            }
            .news-badge-wrap {
                width: 100% !important;
                min-width: 0 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: flex-start !important;
                gap: 8px !important;
                overflow: hidden !important;
            }
            .news-pulse-badge {
                flex: 0 0 24px !important;
                width: 24px !important;
                height: 24px !important;
                font-size: 11px !important;
                box-shadow: 0 0 12px rgba(245, 158, 11, .45) !important;
            }
            .news-title-tag {
                min-width: 0 !important;
                color: #fbbf24 !important;
                font-size: 11px !important;
                font-weight: 800 !important;
                line-height: 1.2 !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }
            .news-marquee-content {
                width: 100% !important;
                min-width: 0 !important;
                height: 30px !important;
                display: flex !important;
                align-items: center !important;
                overflow: hidden !important;
                padding: 0 8px !important;
                border-radius: 8px !important;
                background: rgba(255, 255, 255, .055) !important;
                border: 1px solid rgba(255, 255, 255, .07) !important;
            }
            .news-marquee-content marquee {
                width: 100% !important;
                color: #f8fafc !important;
                font-size: 11px !important;
                font-weight: 600 !important;
                line-height: 30px !important;
            }
            .news-action-link,
            .news-ticker-bar > .news-inner > i,
            .news-ticker-bar .marquee-tag-new {
                display: none !important;
            }
        }

        /* Spotlight the weekly #1 spender with a premium gold shimmer. */
        .spenders-list .spender-item:first-child {
            position: relative;
            isolation: isolate;
            overflow: hidden;
            border-color: rgba(245, 158, 11, .58) !important;
            background: linear-gradient(110deg, rgba(245, 158, 11, .13), rgba(17, 24, 39, .96) 42%, rgba(245, 158, 11, .07)) !important;
            box-shadow: 0 0 0 1px rgba(245, 158, 11, .08), 0 7px 18px rgba(245, 158, 11, .12) !important;
            animation: topSpenderGlow 2.8s ease-in-out infinite;
        }
        .spenders-list .spender-item:first-child::after {
            content: '';
            position: absolute;
            z-index: -1;
            top: -80%;
            bottom: -80%;
            left: -42%;
            width: 26%;
            transform: rotate(18deg);
            background: linear-gradient(90deg, transparent, rgba(255, 232, 153, .42), transparent);
            animation: topSpenderShine 3.1s ease-in-out infinite;
            pointer-events: none;
        }
        .spenders-list .spender-item:first-child .rank-1 {
            background: linear-gradient(145deg, #ffd45f, #f59e0b 68%, #d97706) !important;
            color: #171006 !important;
            box-shadow: 0 0 14px rgba(245, 158, 11, .55), inset 0 1px 0 rgba(255, 255, 255, .65) !important;
            animation: topRankWiggle 2.4s ease-in-out infinite;
        }
        .spenders-list .spender-item:first-child .spender-amount {
            color: #ffd76a !important;
            text-shadow: 0 0 10px rgba(245, 158, 11, .36);
        }
        @keyframes topSpenderGlow {
            0%, 100% { box-shadow: 0 0 0 1px rgba(245,158,11,.08), 0 7px 18px rgba(245,158,11,.10); }
            50% { box-shadow: 0 0 0 1px rgba(255,205,84,.28), 0 8px 25px rgba(245,158,11,.27); }
        }
        @keyframes topSpenderShine {
            0%, 18% { left: -42%; opacity: 0; }
            28% { opacity: 1; }
            55%, 100% { left: 122%; opacity: 0; }
        }
        @keyframes topRankWiggle {
            0%, 72%, 100% { transform: rotate(0deg) scale(1); }
            78% { transform: rotate(-5deg) scale(1.08); }
            84% { transform: rotate(5deg) scale(1.08); }
            90% { transform: rotate(-3deg) scale(1.04); }
            96% { transform: rotate(2deg) scale(1.02); }
        }
        @media (prefers-reduced-motion: reduce) {
            .spenders-list .spender-item:first-child,
            .spenders-list .spender-item:first-child::after,
            .spenders-list .spender-item:first-child .rank-1 {
                animation: none !important;
            }
        }

        /* Keep authentication focused and make form affordances unmistakable. */
        body:has(#view-auth-page.active) .mascot-floating-widget {
            display: none !important;
        }
        #view-auth-page .auth-page-input-wrap {
            position: relative !important;
            min-height: 52px !important;
        }
        #view-auth-page .auth-page-input-icon {
            position: absolute !important;
            z-index: 3 !important;
            left: 10px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 32px !important;
            height: 32px !important;
            display: grid !important;
            place-items: center !important;
            border-radius: 9px !important;
            color: #fbbf24 !important;
            font-size: 14px !important;
            background: linear-gradient(145deg, rgba(245,158,11,.18), rgba(245,158,11,.07)) !important;
            border: 1px solid rgba(245,158,11,.28) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.22) !important;
            pointer-events: none !important;
        }
        #view-auth-page .auth-page-input {
            min-height: 52px !important;
            padding: 12px 48px 12px 54px !important;
            line-height: 1.35 !important;
        }
        #view-auth-page .auth-page-input-wrap:focus-within .auth-page-input-icon {
            color: #fff4c9 !important;
            background: linear-gradient(145deg, #f59e0b, #d97706) !important;
            border-color: #ffc84d !important;
            box-shadow: 0 0 15px rgba(245,158,11,.42) !important;
        }
        #view-auth-page .auth-page-toggle-pwd {
            z-index: 4 !important;
            right: 9px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 34px !important;
            height: 34px !important;
            padding: 0 !important;
            display: grid !important;
            place-items: center !important;
            border-radius: 9px !important;
            color: #94a3b8 !important;
            background: rgba(255,255,255,.045) !important;
            border: 1px solid rgba(255,255,255,.08) !important;
            cursor: pointer !important;
            pointer-events: auto !important;
        }
        #view-auth-page .auth-page-toggle-pwd:hover {
            color: #fbbf24 !important;
            border-color: rgba(245,158,11,.34) !important;
        }
        @media (max-width: 420px) {
            #view-auth-page .auth-page-input {
                font-size: 12px !important;
                padding-left: 52px !important;
                padding-right: 46px !important;
            }
        }

        /* Branded feedback modal used by login, registration and validation. */
        #swal-modal {
            padding: 18px !important;
            background: radial-gradient(circle at 50% 38%, rgba(245,158,11,.12), transparent 34%), rgba(3,7,15,.84) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
        }
        #swal-modal.is-open .swal-modal-card {
            animation: luxuryAlertIn .34s cubic-bezier(.16,1,.3,1) both !important;
        }
        #swal-modal .swal-modal-card {
            width: min(390px, 100%) !important;
            padding: 30px 26px 24px !important;
            border-radius: 22px !important;
            background: linear-gradient(155deg, rgba(20,29,45,.99), rgba(7,13,24,.99)) !important;
            border: 1px solid rgba(245,158,11,.5) !important;
            box-shadow: 0 28px 70px rgba(0,0,0,.72), 0 0 32px rgba(245,158,11,.14), inset 0 1px 0 rgba(255,255,255,.07) !important;
        }
        #swal-modal-icon {
            width: 68px !important;
            height: 68px !important;
            display: grid !important;
            place-items: center !important;
            margin: 0 auto 18px !important;
            border-radius: 50% !important;
            color: #fbbf24 !important;
            font-size: 31px !important;
            background: linear-gradient(145deg, rgba(245,158,11,.23), rgba(245,158,11,.07)) !important;
            border: 1px solid rgba(245,158,11,.48) !important;
            box-shadow: 0 0 22px rgba(245,158,11,.19), inset 0 1px 0 rgba(255,255,255,.12) !important;
        }
        #swal-modal[data-tone="success"] #swal-modal-icon {
            color: #4ade80 !important;
            background: linear-gradient(145deg, rgba(34,197,94,.22), rgba(34,197,94,.06)) !important;
            border-color: rgba(74,222,128,.48) !important;
            box-shadow: 0 0 24px rgba(34,197,94,.18) !important;
        }
        #swal-modal[data-tone="error"] #swal-modal-icon {
            color: #fb7185 !important;
            background: linear-gradient(145deg, rgba(244,63,94,.2), rgba(244,63,94,.05)) !important;
            border-color: rgba(251,113,133,.45) !important;
        }
        #swal-modal-title {
            font-size: 21px !important;
            font-weight: 900 !important;
            color: #fff !important;
            margin: 0 0 8px !important;
        }
        #swal-modal-text {
            color: #b8c3d3 !important;
            font-size: 14px !important;
            line-height: 1.65 !important;
            margin: 0 0 22px !important;
        }
        #swal-modal .btn-neon-auth-submit {
            min-height: 48px !important;
            border-radius: 12px !important;
            box-shadow: 0 10px 25px rgba(245,158,11,.25) !important;
        }
        @keyframes luxuryAlertIn {
            from { opacity: 0; transform: translateY(18px) scale(.94); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        @media (max-width: 420px) {
            #swal-modal { padding: 14px !important; }
            #swal-modal .swal-modal-card { padding: 26px 20px 20px !important; border-radius: 18px !important; }
            #swal-modal-title { font-size: 19px !important; }
        }

        /* Premium logged-in player bar. */
        .site-root > .navbar .user-profile-menu {
            position: relative !important; isolation: isolate !important; display: flex; align-items: center !important;
            gap: 5px !important; min-height: 48px !important; padding: 4px !important; overflow: hidden !important;
            border-radius: 15px !important; color: #fff !important;
            background: linear-gradient(145deg,rgba(20,30,47,.98),rgba(7,13,24,.98)) !important;
            border: 1px solid rgba(245,158,11,.42) !important;
            box-shadow: 0 9px 24px rgba(0,0,0,.38),0 0 18px rgba(245,158,11,.1),inset 0 1px 0 rgba(255,255,255,.07) !important;
        }
        .site-root > .navbar .user-profile-menu::after {
            content: ''; position: absolute; z-index: -1; top: -70%; bottom: -70%; left: -28%; width: 18%;
            transform: rotate(18deg); background: linear-gradient(90deg,transparent,rgba(255,225,135,.28),transparent);
            animation: playerBarShimmer 4s ease-in-out infinite; pointer-events: none;
        }
        .site-root > .navbar .user-wallet-pill,
        .site-root > .navbar .user-avatar-btn {
            min-height: 38px !important; display: flex !important; align-items: center !important; gap: 8px !important;
            padding: 5px 10px !important; border-radius: 11px !important; cursor: pointer !important;
            transition: transform .2s ease,border-color .2s ease,background .2s ease !important;
        }
        .site-root > .navbar .user-wallet-pill { background: linear-gradient(145deg,rgba(245,158,11,.2),rgba(245,158,11,.07)) !important; border: 1px solid rgba(245,158,11,.34) !important; }
        .site-root > .navbar .user-avatar-btn { background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.08) !important; }
        .site-root > .navbar .user-wallet-pill:hover,
        .site-root > .navbar .user-avatar-btn:hover { transform: translateY(-2px) !important; border-color: rgba(255,196,69,.58) !important; background: rgba(245,158,11,.13) !important; }
        .site-root > .navbar .user-wallet-pill > i,
        .site-root > .navbar .user-avatar-btn > i {
            width: 28px !important; height: 28px !important; display: grid !important; place-items: center !important;
            flex: 0 0 28px !important; border-radius: 9px !important;
        }
        .site-root > .navbar .user-wallet-pill > i { color: #281703 !important; background: linear-gradient(145deg,#ffd45f,#f59e0b) !important; box-shadow: 0 0 13px rgba(245,158,11,.34),inset 0 1px 0 rgba(255,255,255,.62) !important; }
        .site-root > .navbar .user-avatar-btn > i { color: #ffcf65 !important; background: linear-gradient(145deg,#26354d,#121c2c) !important; border: 1px solid rgba(245,158,11,.3) !important; }
        .site-root > .navbar .nav-google-avatar { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; object-fit: cover; border: 1px solid rgba(245,158,11,.58); box-shadow: 0 0 14px rgba(245,158,11,.22); }
        .user-wallet-copy,.user-name-copy { min-width: 0 !important; display: grid !important; line-height: 1.05 !important; text-align: left !important; }
        .user-wallet-copy small,.user-name-copy small { color: #76859b !important; font-size: 7px !important; font-weight: 900 !important; letter-spacing: 1px !important; }
        #nav-user-balance { color: #ffd66d !important; font-size: 12px !important; font-weight: 900 !important; white-space: nowrap !important; }
        #nav-user-name { display: block !important; max-width: 92px !important; overflow: hidden !important; text-overflow: ellipsis !important; color: #f8fafc !important; font-size: 12px !important; font-weight: 800 !important; white-space: nowrap !important; }
        .site-root > .navbar .user-profile-menu .btn-logout {
            width: 36px !important; height: 36px !important; display: grid !important; place-items: center !important;
            flex: 0 0 36px !important; padding: 0 !important; border-radius: 10px !important; color: #fb7185 !important;
            background: rgba(244,63,94,.09) !important; border: 1px solid rgba(244,63,94,.23) !important; cursor: pointer !important; transition: .2s ease !important;
        }
        .site-root > .navbar .user-profile-menu .btn-logout:hover { color: #fff !important; background: #e11d48 !important; border-color: #fb7185 !important; box-shadow: 0 0 16px rgba(244,63,94,.32) !important; }
        @keyframes playerBarShimmer { 0%,20%{left:-28%;opacity:0} 30%{opacity:1} 52%,100%{left:115%;opacity:0} }
        @media (max-width: 768px) {
            .site-root > .navbar .user-profile-menu { gap: 3px !important; min-height: 44px !important; padding: 3px !important; border-radius: 12px !important; }
            .site-root > .navbar .user-wallet-pill,.site-root > .navbar .user-avatar-btn { min-height: 36px !important; gap: 5px !important; padding: 3px 6px !important; border-radius: 9px !important; }
            .site-root > .navbar .user-wallet-pill > i,.site-root > .navbar .user-avatar-btn > i { width: 24px !important; height: 24px !important; flex-basis: 24px !important; font-size: 11px !important; border-radius: 7px !important; }
            .user-wallet-copy small,.user-name-copy small { display: none !important; }
            #nav-user-balance,#nav-user-name { font-size: 10px !important; }
            #nav-user-name { max-width: 55px !important; }
            .site-root > .navbar .user-profile-menu .btn-logout { width: 30px !important; height: 30px !important; flex-basis: 30px !important; border-radius: 8px !important; font-size: 11px !important; }
            .site-root > .navbar .brand-logo {
                flex: 0 0 92px !important;
                width: 92px !important;
            }
            .site-root > .navbar .brand-logo-img {
                width: 88px !important;
                height: 48px !important;
            }
        }
        @media (max-width: 390px) {
            .site-root > .navbar .user-wallet-pill > i { display: none !important; }
            .site-root > .navbar .user-avatar-btn { padding-left: 4px !important; padding-right: 4px !important; }
            .site-root > .navbar .brand-logo {
                flex-basis: 84px !important;
                width: 84px !important;
            }
            .site-root > .navbar .brand-logo-img {
                width: 80px !important;
                height: 45px !important;
            }
        }
        @media (prefers-reduced-motion: reduce) { .site-root > .navbar .user-profile-menu::after { animation: none !important; } }

        /* Legendary #1 card: no emoji, pure iconography and energy effects. */
        .legendary-champion-card {
            isolation: isolate !important;
            overflow: visible !important;
            border-color: #ffc83d !important;
            background:
                radial-gradient(circle at 18% 20%, rgba(255,224,125,.22) 0 2px, transparent 3px),
                radial-gradient(circle at 82% 30%, rgba(255,244,190,.18) 0 1.5px, transparent 3px),
                radial-gradient(circle at 72% 78%, rgba(255,202,62,.18) 0 2px, transparent 3px),
                radial-gradient(circle at 28% 72%, rgba(255,238,172,.14) 0 1.5px, transparent 3px),
                linear-gradient(155deg, rgba(61,40,8,.96), rgba(19,22,31,.98) 48%, rgba(55,34,5,.94)) !important;
            background-size: 88px 88px,110px 110px,96px 96px,120px 120px,auto !important;
            box-shadow: 0 0 0 1px rgba(255,230,139,.16),0 18px 42px rgba(0,0,0,.52),0 0 30px rgba(245,158,11,.3),inset 0 0 34px rgba(245,158,11,.1) !important;
            animation: legendaryCardPulse 2.7s ease-in-out infinite !important;
        }
        .legendary-champion-card::before {
            content: '';
            position: absolute;
            z-index: 0;
            inset: 2px;
            overflow: hidden;
            border-radius: 13px;
            pointer-events: none;
            background: linear-gradient(105deg,transparent 22%,rgba(255,237,174,.08) 35%,rgba(255,225,118,.48) 48%,rgba(255,255,255,.68) 50%,rgba(255,213,75,.34) 53%,transparent 68%);
            background-size: 230% 100%;
            animation: legendarySweep 3.3s ease-in-out infinite;
        }
        .legendary-champion-card::after {
            content: '';
            position: absolute;
            z-index: 0;
            left: 50%;
            top: 54px;
            width: 104px;
            height: 104px;
            transform: translateX(-50%);
            border-radius: 50%;
            border: 1px solid rgba(255,211,82,.3);
            box-shadow: 0 0 0 8px rgba(245,158,11,.035),0 0 0 18px rgba(245,158,11,.025),0 0 34px rgba(245,158,11,.28);
            animation: legendaryEnergyRing 2.4s ease-in-out infinite;
            pointer-events: none;
        }
        .legendary-champion-card > * { position: relative; z-index: 2; }
        .legendary-champion-badge {
            z-index: 5 !important;
            min-width: 154px !important;
            min-height: 48px !important;
            display: grid !important;
            grid-template-columns: auto auto !important;
            grid-template-rows: auto auto !important;
            align-items: center !important;
            justify-content: center !important;
            column-gap: 7px !important;
            padding: 7px 19px 6px !important;
            border-radius: 14px !important;
            color: #1b1001 !important;
            background: linear-gradient(145deg,#ffe38b 0%,#ffb313 44%,#e87800 100%) !important;
            border: 1px solid #ffea9d !important;
            box-shadow: 0 7px 20px rgba(245,158,11,.48),0 0 28px rgba(255,190,38,.3),inset 0 1px 0 rgba(255,255,255,.76) !important;
            text-transform: uppercase !important;
            animation: legendaryBadgeHover 2.5s ease-in-out infinite !important;
        }
        .legendary-champion-badge i { grid-row: 1 / 3 !important; font-size: 17px !important; filter: drop-shadow(0 1px 0 rgba(255,255,255,.35)); }
        .legendary-champion-badge span { font-size: 13px !important; font-weight: 900 !important; line-height: 1 !important; }
        .legendary-champion-badge small { font: 900 7px/1 Inter,sans-serif !important; letter-spacing: 2px !important; opacity: .72 !important; }
        .legendary-champion-crown {
            margin-top: 14px !important;
            color: #ffd348 !important;
            filter: drop-shadow(0 0 6px #fff1a8) drop-shadow(0 0 18px rgba(245,158,11,.9)) !important;
            animation: legendaryCrownFloat 2.2s ease-in-out infinite !important;
        }
        .legendary-champion-amount {
            color: #ffd75d !important;
            letter-spacing: .4px !important;
            text-shadow: 0 0 7px rgba(255,244,190,.42),0 0 20px rgba(245,158,11,.48) !important;
            animation: legendaryAmountGlow 2s ease-in-out infinite !important;
        }
        @keyframes legendarySweep { 0%,18%{background-position:180% 0;opacity:0} 28%{opacity:1} 58%,100%{background-position:-80% 0;opacity:0} }
        @keyframes legendaryCardPulse { 0%,100%{box-shadow:0 0 0 1px rgba(255,230,139,.16),0 18px 42px rgba(0,0,0,.52),0 0 24px rgba(245,158,11,.24),inset 0 0 34px rgba(245,158,11,.08)} 50%{box-shadow:0 0 0 1px rgba(255,230,139,.34),0 20px 48px rgba(0,0,0,.58),0 0 42px rgba(245,158,11,.42),inset 0 0 42px rgba(245,158,11,.14)} }
        @keyframes legendaryBadgeHover { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-4px)} }
        @keyframes legendaryCrownFloat { 0%,100%{transform:translateY(0) scale(1) rotate(-2deg)} 50%{transform:translateY(-7px) scale(1.08) rotate(2deg)} }
        @keyframes legendaryEnergyRing { 0%,100%{transform:translateX(-50%) scale(.92);opacity:.42} 50%{transform:translateX(-50%) scale(1.1);opacity:1} }
        @keyframes legendaryAmountGlow { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.28)} }
        @media (max-width: 768px) {
            .legendary-champion-card { margin-top: 9px !important; }
            .legendary-champion-badge { min-width: 148px !important; }
        }
        @media (prefers-reduced-motion: reduce) {
            .legendary-champion-card,.legendary-champion-card::before,.legendary-champion-card::after,
            .legendary-champion-badge,.legendary-champion-crown,.legendary-champion-amount { animation: none !important; }
        }

        /* Cute vintage-phone wiggle: each bottom-nav choice rings briefly in turn. */
        @media (max-width: 768px) {
            .mobile-bottom-nav .mobile-nav-tab i {
                transform-origin: 50% 85% !important;
                will-change: transform, filter !important;
                animation: mobileNavRing 5.2s cubic-bezier(.36,.07,.19,.97) infinite !important;
            }
            .mobile-bottom-nav .mobile-nav-tab:nth-child(1) i { animation-delay: 0s !important; }
            .mobile-bottom-nav .mobile-nav-tab:nth-child(2) i { animation-delay: 1.05s !important; }
            .mobile-bottom-nav .mobile-nav-tab:nth-child(3) i { animation-delay: 2.1s !important; }
            .mobile-bottom-nav .mobile-nav-tab:nth-child(4) i { animation-delay: 3.15s !important; }
            .mobile-bottom-nav .mobile-nav-tab:nth-child(5) i { animation-delay: 4.2s !important; }
            .mobile-bottom-nav .mobile-nav-tab:active i {
                animation: mobileNavTapPop .28s cubic-bezier(.2,1.5,.45,1) both !important;
            }
            .mobile-bottom-nav .mobile-nav-tab:active span {
                color: #ffd15b !important;
                transform: translateY(-1px) !important;
            }
        }
        @keyframes mobileNavRing {
            0%, 70%, 100% { transform: translateY(0) rotate(0) scale(1); filter: none; }
            73% { transform: translateY(-5px) rotate(-9deg) scale(1.09); filter: drop-shadow(0 0 5px rgba(245,158,11,.28)); }
            76% { transform: translateY(-7px) rotate(9deg) scale(1.14); filter: drop-shadow(0 0 8px rgba(245,158,11,.5)); }
            79% { transform: translateY(-6px) rotate(-7deg) scale(1.12); }
            82% { transform: translateY(-4px) rotate(6deg) scale(1.08); }
            85% { transform: translateY(-2px) rotate(-3deg) scale(1.04); }
            88% { transform: translateY(0) rotate(0) scale(1); filter: none; }
        }
        @keyframes mobileNavTapPop {
            0% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-9px) scale(1.2); filter: drop-shadow(0 0 10px rgba(245,158,11,.65)); }
            100% { transform: translateY(-2px) scale(1.08); }
        }
        @media (prefers-reduced-motion: reduce) {
            .mobile-bottom-nav .mobile-nav-tab i { animation: none !important; }
        }

        .history-empty-state {
            padding: 34px 16px !important;
            text-align: center !important;
            color: #8090a6 !important;
        }
        .history-empty-state i {
            width: 44px;
            height: 44px;
            margin: 0 auto 10px;
            display: grid;
            place-items: center;
            border-radius: 13px;
            color: #fbbf24;
            font-size: 19px;
            background: rgba(245,158,11,.11);
            border: 1px solid rgba(245,158,11,.24);
        }
        .history-empty-state strong,
        .history-empty-state span { display: block; }
        .history-empty-state strong { color: #e8edf5; font-size: 14px; margin-bottom: 3px; }
        .history-empty-state span { font-size: 11px; }
        .history-money { color: #34d399 !important; font-weight: 800 !important; }

        /* Mobile account center: compact identity, wallet and card-based history. */
        @media (max-width: 768px) {
            body:has(#view-profile.active) .mascot-floating-widget { display: none !important; }
            #view-profile {
                padding: 10px 10px 96px !important;
            }
            #view-profile .profile-layout {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 12px !important;
                width: 100% !important;
            }
            #view-profile .profile-card {
                display: grid !important;
                grid-template-columns: 64px minmax(0,1fr) !important;
                grid-template-rows: auto auto auto auto auto auto !important;
                column-gap: 13px !important;
                align-items: center !important;
                width: 100% !important;
                padding: 15px !important;
                text-align: left !important;
                overflow: hidden !important;
                border-radius: 20px !important;
                border: 1px solid rgba(245,158,11,.34) !important;
                background:
                    radial-gradient(circle at 8% 10%,rgba(245,158,11,.17),transparent 31%),
                    radial-gradient(circle at 94% 100%,rgba(14,165,233,.1),transparent 34%),
                    linear-gradient(155deg,#121c2d,#09111f 70%) !important;
                box-shadow: 0 16px 38px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.055) !important;
            }
            .profile-card-kicker {
                grid-column: 1 / -1 !important;
                display: flex !important;
                justify-content: space-between !important;
                align-items: center !important;
                margin-bottom: 14px !important;
                padding-bottom: 10px !important;
                border-bottom: 1px solid rgba(255,255,255,.07) !important;
            }
            .profile-card-kicker > span {
                color: #fbbf24 !important;
                font: 900 9px/1 Inter,sans-serif !important;
                letter-spacing: 1.5px !important;
            }
            .profile-card-kicker > small {
                display: flex !important;
                align-items: center !important;
                gap: 5px !important;
                color: #6ee7b7 !important;
                font-size: 9px !important;
                font-weight: 700 !important;
            }
            .profile-card-kicker > small i {
                width: 7px !important;
                height: 7px !important;
                border-radius: 50% !important;
                background: #34d399 !important;
                box-shadow: 0 0 9px #34d399 !important;
                animation: profileOnlinePulse 1.8s ease-in-out infinite !important;
            }
            #view-profile .big-avatar {
                grid-column: 1 !important;
                grid-row: 2 / 5 !important;
                width: 60px !important;
                height: 60px !important;
                margin: 0 !important;
                border: 2px solid #ffb313 !important;
                font-size: 23px !important;
                background: linear-gradient(145deg,#149bd7,#0874a9) !important;
                box-shadow: 0 0 0 5px rgba(245,158,11,.07),0 9px 18px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.28) !important;
            }
            #profile-username-display {
                grid-column: 2 !important;
                grid-row: 2 !important;
                margin: 0 !important;
                color: #fff !important;
                font-size: 19px !important;
                line-height: 1.15 !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
            }
            #profile-email-display {
                grid-column: 2 !important;
                grid-row: 3 !important;
                margin: 3px 0 !important;
                color: #8fa0b7 !important;
                font-size: 11px !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
            }
            #profile-userid-display {
                grid-column: 2 !important;
                grid-row: 4 !important;
                width: max-content !important;
                max-width: 100% !important;
                margin: 2px 0 0 !important;
                padding: 4px 8px !important;
                overflow: hidden !important;
                border-radius: 7px !important;
                color: #fbbf24 !important;
                font: 800 8px/1 Inter,sans-serif !important;
                letter-spacing: .55px !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
                background: rgba(245,158,11,.09) !important;
                border: 1px solid rgba(245,158,11,.19) !important;
            }
            #view-profile .profile-wallet-summary {
                grid-column: 1 / -1 !important;
                grid-row: 5 !important;
                position: relative !important;
                min-height: 76px !important;
                margin: 15px 0 10px !important;
                padding: 13px 16px !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: center !important;
                border-radius: 15px !important;
                background: linear-gradient(110deg,rgba(16,185,129,.1),rgba(255,255,255,.035)) !important;
                border: 1px solid rgba(52,211,153,.2) !important;
                box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
            }
            #view-profile .profile-wallet-summary::after {
                content: '\f555';
                position: absolute;
                right: 17px;
                top: 50%;
                transform: translateY(-50%);
                color: rgba(52,211,153,.16);
                font: 900 31px/1 'Font Awesome 6 Free';
            }
            #view-profile .profile-wallet-summary > div:first-child {
                margin: 0 0 3px !important;
                color: #8594a9 !important;
                font-size: 10px !important;
            }
            #profile-balance-display {
                color: #34d399 !important;
                font-size: 25px !important;
                line-height: 1 !important;
                text-shadow: 0 0 14px rgba(52,211,153,.22) !important;
            }
            #view-profile .profile-wallet-action {
                grid-column: 1 / -1 !important;
                grid-row: 6 !important;
                min-height: 46px !important;
                margin: 0 !important;
                border-radius: 12px !important;
                background: linear-gradient(135deg,#ffb313,#ef8700) !important;
                border: 1px solid #ffc747 !important;
                box-shadow: 0 9px 22px rgba(245,158,11,.22),inset 0 1px 0 rgba(255,255,255,.42) !important;
            }
            #view-profile .step-box {
                width: 100% !important;
                margin: 0 !important;
                padding: 14px !important;
                overflow: hidden !important;
                border-radius: 20px !important;
                background: linear-gradient(155deg,#111b2c,#080f1d) !important;
                border: 1px solid rgba(255,255,255,.08) !important;
                box-shadow: 0 14px 34px rgba(0,0,0,.3) !important;
            }
            #view-profile .step-header {
                margin: 0 0 13px !important;
                gap: 9px !important;
                font-size: 14px !important;
            }
            #view-profile .step-num {
                width: 35px !important;
                height: 35px !important;
                display: grid !important;
                place-items: center !important;
                border-radius: 11px !important;
                color: #171006 !important;
                background: linear-gradient(145deg,#ffd45f,#f59e0b) !important;
                box-shadow: 0 0 13px rgba(245,158,11,.25) !important;
            }
            #view-profile .filter-tabs {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 7px !important;
                padding: 4px !important;
                margin: 0 0 12px !important;
                overflow: visible !important;
                border-radius: 12px !important;
                background: #070d18 !important;
                border: 1px solid rgba(255,255,255,.07) !important;
            }
            #view-profile .filter-tabs .tab-btn {
                width: 100% !important;
                min-width: 0 !important;
                min-height: 42px !important;
                padding: 5px 7px !important;
                border-radius: 9px !important;
                font-size: 10px !important;
                white-space: normal !important;
                line-height: 1.25 !important;
            }
            #view-profile .filter-tabs .tab-btn.active {
                color: #151006 !important;
                background: linear-gradient(145deg,#ffc13a,#ed8800) !important;
                box-shadow: 0 6px 15px rgba(245,158,11,.2) !important;
            }
            #tab-content-orders,
            #tab-content-wallet { overflow: visible !important; }
            #view-profile .history-table,
            #view-profile .history-table tbody {
                width: 100% !important;
                display: block !important;
            }
            #view-profile .history-table thead { display: none !important; }
            #view-profile .history-table tr {
                width: 100% !important;
                display: grid !important;
                gap: 0 !important;
                margin-bottom: 9px !important;
                padding: 8px 12px !important;
                border-radius: 13px !important;
                background: rgba(255,255,255,.035) !important;
                border: 1px solid rgba(255,255,255,.07) !important;
            }
            #view-profile .history-table td {
                min-width: 0 !important;
                padding: 7px 0 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                gap: 12px !important;
                color: #e8edf5 !important;
                font-size: 11px !important;
                text-align: right !important;
                border-bottom: 1px dashed rgba(255,255,255,.07) !important;
            }
            #view-profile .history-table td:last-child { border-bottom: 0 !important; }
            #view-profile #tab-content-orders td:nth-child(1)::before { content: 'เลขออเดอร์'; }
            #view-profile #tab-content-orders td:nth-child(2)::before { content: 'เกม / แพ็กเกจ'; }
            #view-profile #tab-content-orders td:nth-child(3)::before { content: 'UID'; }
            #view-profile #tab-content-orders td:nth-child(4)::before { content: 'ยอดเงิน'; }
            #view-profile #tab-content-orders td:nth-child(5)::before { content: 'วันที่ / เวลา'; }
            #view-profile #tab-content-orders td:nth-child(6)::before { content: 'สถานะ'; }
            #view-profile #tab-content-wallet td:nth-child(1)::before { content: 'รหัสรายการ'; }
            #view-profile #tab-content-wallet td:nth-child(2)::before { content: 'ช่องทาง'; }
            #view-profile #tab-content-wallet td:nth-child(3)::before { content: 'เลขอ้างอิง'; }
            #view-profile #tab-content-wallet td:nth-child(4)::before { content: 'จำนวนเงิน'; }
            #view-profile #tab-content-wallet td:nth-child(5)::before { content: 'วันที่ / เวลา'; }
            #view-profile #tab-content-wallet td:nth-child(6)::before { content: 'สถานะ'; }
            #view-profile .history-table td::before {
                color: #75849a !important;
                font-size: 9px !important;
                font-weight: 700 !important;
                text-align: left !important;
            }
            #view-profile .history-table .history-empty-state {
                display: block !important;
                padding: 29px 12px !important;
                text-align: center !important;
                border-bottom: 0 !important;
            }
            #view-profile .history-table .history-empty-state::before { content: none !important; }
        }
        @keyframes profileOnlinePulse { 0%,100%{opacity:.55;transform:scale(.85)} 50%{opacity:1;transform:scale(1.15)} }
        @media (prefers-reduced-motion: reduce) { .profile-card-kicker > small i { animation: none !important; } }
/* ================= MOBILE WALLET PAYMENT REDESIGN ================= */
.payment-mobile-balance{display:flex;align-items:center;gap:12px;padding:15px 18px;margin-bottom:18px;border:1px solid rgba(245,158,11,.28);border-radius:16px;background:linear-gradient(135deg,rgba(245,158,11,.13),rgba(15,23,42,.92) 55%);box-shadow:inset 0 1px rgba(255,255,255,.05),0 12px 30px rgba(0,0,0,.25)}
.payment-mobile-balance-icon{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border-radius:13px;color:#111827;background:linear-gradient(145deg,#ffd35a,#f59e0b);box-shadow:0 8px 20px rgba(245,158,11,.28)}
.payment-mobile-balance-copy{display:flex;flex-direction:column;flex:1;min-width:0}.payment-mobile-balance-copy span{color:#94a3b8;font-size:12px}.payment-mobile-balance-copy strong{color:#fff;font-size:21px;line-height:1.25}.payment-mobile-balance button{border:0;background:transparent;color:#fbbf24;font-family:inherit;font-weight:700;cursor:pointer}
@media(max-width:768px){
body:has(#view-payment.active) .mascot-floating-widget{display:none!important}#view-payment{padding:10px 10px 104px!important;overflow-x:hidden}.luxury-payment-wrapper{width:100%;padding:0}.luxury-payment-title-wrap{margin:2px 2px 14px}.luxury-payment-title-wrap h2{display:block;font-size:22px;line-height:1.25;margin-bottom:5px}.luxury-payment-title-wrap p{font-size:11.5px;line-height:1.55}.payment-mobile-balance{padding:13px;margin-bottom:12px;border-radius:15px}.payment-mobile-balance-icon{width:40px;height:40px;flex-basis:40px}.payment-mobile-balance-copy strong{font-size:19px}.payment-mobile-balance button{padding:8px 0 8px 8px;font-size:11px}.luxury-payment-2col{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}.luxury-amount-panel{order:1;padding:17px 15px;border-radius:17px;border-color:rgba(245,158,11,.22);background:linear-gradient(160deg,rgba(23,32,51,.98),rgba(10,16,30,.96))}.luxury-qr-panel{order:2;padding:18px 14px;border-radius:17px}.luxury-amount-header{font-size:16px;margin-bottom:14px}.luxury-input-label,.luxury-preset-label{font-size:12px}.luxury-amount-input{height:58px;margin-bottom:15px;padding:10px 15px;font-size:24px;text-align:center;border-radius:13px;border-color:rgba(245,158,11,.32);background:#090f1d}.luxury-preset-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:17px}.luxury-preset-btn{min-height:48px;padding:10px 4px;font-size:14px;border-radius:11px}.btn-luxury-submit-transfer{min-height:53px;padding:12px 9px;margin-bottom:8px;border-radius:13px;font-size:14px;box-shadow:0 10px 24px rgba(245,158,11,.32)}.luxury-instant-subtext{font-size:10.5px;line-height:1.4}.luxury-qr-heading{margin-bottom:12px;font-size:15px}.luxury-qr-frame{padding:9px;margin-bottom:12px}.luxury-qr-img-wrapper{width:min(52vw,190px);height:min(52vw,190px)}.luxury-qr-amount-val{font-size:24px;margin-bottom:7px}.luxury-qr-footer-hint{max-width:270px;font-size:10.5px;line-height:1.45}.luxury-how-to-section{margin:4px 0 14px;padding:15px;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:rgba(15,23,42,.78)}.luxury-how-to-header{text-align:left;margin-bottom:12px;font-size:15px}.luxury-steps-container{gap:7px;align-items:stretch}.luxury-step-box{width:100%;padding:11px;border-radius:11px;gap:11px}.luxury-step-icon-wrap{width:38px;height:38px;font-size:15px}.luxury-step-arrow{display:none}.luxury-guarantee-bar{grid-template-columns:1fr 1fr;gap:7px;padding:8px;margin-bottom:14px;border-radius:15px}.luxury-guarantee-item{min-width:0;gap:8px;padding:8px 6px}.luxury-guarantee-icon{width:31px;height:31px;font-size:13px}.luxury-guarantee-title{font-size:11px;line-height:1.25}.luxury-guarantee-sub{font-size:9px;line-height:1.25}.luxury-recent-history-panel{padding:15px 12px;border-radius:17px}.luxury-history-header{margin-bottom:10px}.luxury-history-header h4{font-size:14px}.luxury-history-table{display:block;overflow-x:auto;white-space:nowrap;font-size:11px;scrollbar-width:thin}.luxury-history-table th,.luxury-history-table td{padding:10px 9px;font-size:10.5px}}

/* Keep promotional artwork at its native 3:1 ratio so mobile never crops its copy. */
@media (max-width: 768px) {
    .luxury-hero-slider-container {
        aspect-ratio: 3 / 1 !important;
        min-height: 0 !important;
        height: auto !important;
        border-radius: 11px !important;
    }
    .luxury-hero-slider-track,
    .luxury-hero-slide,
    .luxury-hero-slide img { min-height: 0 !important; }
    .luxury-hero-slide img { object-fit: contain !important; }
    .slider-arrow-btn { width: 30px !important; height: 30px !important; font-size: 11px !important; }
    .slider-dots-container { bottom: 6px !important; padding: 3px 7px !important; }
}

/* Slip upload control — API keys stay server-side. */
.slip-upload-box{display:flex;align-items:center;gap:12px;margin:2px 0 14px;padding:14px;border:1px dashed rgba(245,158,11,.5);border-radius:13px;background:rgba(245,158,11,.055);cursor:pointer;transition:.2s ease}.slip-upload-box:hover{border-color:#f59e0b;background:rgba(245,158,11,.1)}.slip-upload-box input{display:none}.slip-upload-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:12px;color:#fbbf24;background:rgba(245,158,11,.14);font-size:18px}.slip-upload-copy{display:flex;flex:1;min-width:0;flex-direction:column}.slip-upload-copy strong{color:#fff;font-size:13px}.slip-upload-copy small{overflow:hidden;color:#8491a5;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.slip-upload-action{padding:7px 10px;border-radius:9px;background:#f59e0b;color:#111827;font-size:11px;font-weight:800}.payment-slip-preview-wrap{position:relative;display:grid;grid-template-columns:74px 1fr;align-items:center;gap:12px;margin:-4px 0 15px;padding:9px;border:1px solid rgba(16,185,129,.3);border-radius:12px;background:rgba(16,185,129,.06);color:#34d399;font-size:11px}.payment-slip-preview-wrap[hidden]{display:none!important}.payment-slip-preview-wrap img{width:74px;height:74px;object-fit:cover;border-radius:8px;background:#080e19}.payment-slip-preview-wrap button{position:absolute;top:6px;right:6px;width:26px;height:26px;border:0;border-radius:50%;background:#ef4444;color:#fff;cursor:pointer}.payment-slip-preview-wrap div{padding-right:26px;font-weight:700}
@media(max-width:768px){.slip-upload-box{gap:9px;padding:11px}.slip-upload-icon{width:38px;height:38px;flex-basis:38px}.slip-upload-action{padding:7px 8px}.payment-slip-preview-wrap{grid-template-columns:64px 1fr}.payment-slip-preview-wrap img{width:64px;height:64px}}

/* Downloaded game artwork: local files prevent broken third-party hotlinks. */
.catalog-game-card .catalog-icon-box{background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;overflow:hidden}
.catalog-game-card .catalog-icon-box>div,.catalog-game-card .catalog-icon-box>.catalog-icon-title{display:none!important}
.catalog-game-card[onclick*="'thumb-mlbb'"] .catalog-icon-box{background-image:url('../assets/game-icons/mlbb.jpg')!important}
.catalog-game-card[onclick*="'thumb-pubg'"] .catalog-icon-box{background-image:url('../assets/game-icons/pubg.jpg')!important}
.catalog-game-card[onclick*="'thumb-rov'"] .catalog-icon-box{background-image:url('../assets/game-icons/rov.jpg')!important}
.catalog-game-card[onclick*="'thumb-ff'"] .catalog-icon-box{background-image:url('../assets/game-icons/free-fire.jpg')!important}
.catalog-game-card[onclick*="'thumb-val'"] .catalog-icon-box,.catalog-game-card[onclick*="'thumb-val-pre'"] .catalog-icon-box{background-image:url('../assets/game-icons/valorant.jpg')!important}
.catalog-game-card[onclick*="'thumb-ro-zero'"] .catalog-icon-box{background-image:url('../assets/game-icons/ro-zero.jpg')!important}
.catalog-game-card[onclick*="'thumb-row'"] .catalog-icon-box{background-image:url('../assets/game-icons/ragnarok-new-world.jpg')!important}
.catalog-game-card[onclick*="'thumb-lol'"] .catalog-icon-box{background-image:url('../assets/game-icons/league-of-legends.jpg')!important}
.catalog-game-card[onclick*="'thumb-wildrift'"] .catalog-icon-box{background-image:url('../assets/game-icons/wild-rift.jpg')!important}
.catalog-game-card[onclick*="'thumb-kuroko'"] .catalog-icon-box{background-image:url('../assets/game-icons/kuroko.webp')!important}
.catalog-game-card[onclick*="'thumb-ninokuni'"] .catalog-icon-box{background-image:url('../assets/game-icons/ni-no-kuni.jpg')!important}
.catalog-game-card[onclick*="'thumb-dragonica'"] .catalog-icon-box{background-image:url('../assets/game-icons/dragonica.webp')!important}
.catalog-game-card[onclick*="'thumb-wuwa'"] .catalog-icon-box{background-image:url('../assets/game-icons/wuthering-waves.jpg')!important}
.catalog-game-card[onclick*="'thumb-winds'"] .catalog-icon-box{background-image:url('../assets/game-icons/where-winds-meet.jpg')!important}
.catalog-game-card[onclick*="'thumb-ow2'"] .catalog-icon-box{background-image:url('../assets/game-icons/overwatch.jpg')!important}

/* Artwork for the animated game shelves on the home page. */
.game-app-item .app-icon-img{background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;font-size:0!important;color:transparent!important;overflow:hidden}
.game-app-item .app-icon-img>*{display:none!important}
.game-app-item[onclick*="'thumb-ragnarok'"] .app-icon-img{background-image:url('../assets/game-icons/ragnarok-new-world.jpg')!important}
.game-app-item[onclick*="'thumb-the-ro'"] .app-icon-img{background-image:url('../assets/game-icons/ragnarok-new-world.jpg')!important}
.game-app-item[onclick*="'thumb-ro-v'"] .app-icon-img{background-image:url('../assets/game-icons/ragnarok-v.jpg')!important}
.game-app-item[onclick*="'thumb-ro-rebirth'"] .app-icon-img{background-image:url('../assets/game-icons/ro-zero.jpg')!important}
.game-app-item[onclick*="'thumb-ro-tactics'"] .app-icon-img{background-image:url('../assets/game-icons/ragnarok-new-world.jpg')!important}
.game-app-item[onclick*="'thumb-ro-idle'"] .app-icon-img{background-image:url('../assets/game-icons/ro-zero.jpg')!important}
.game-app-item[onclick*="'thumb-codm'"] .app-icon-img{background-image:url('../assets/game-icons/cod-mobile.jpg')!important}
.game-app-item[onclick*="'thumb-love'"] .app-icon-img{background-image:url('../assets/game-icons/love-deepspace.jpg')!important}
.game-app-item[onclick*="'thumb-rox'"] .app-icon-img{background-image:url('../assets/game-icons/rox.jpg')!important}
.game-app-item[onclick*="'thumb-mlbb'"] .app-icon-img{background-image:url('../assets/game-icons/mlbb.jpg')!important}
.game-app-item[onclick*="'thumb-infest'"] .app-icon-img{background-image:url('../assets/game-icons/wuthering-waves.jpg')!important}
.game-app-item[onclick*="'thumb-dragonica'"] .app-icon-img{background-image:url('../assets/game-icons/dragonica.webp')!important}
.game-app-item[onclick*="'thumb-opm'"] .app-icon-img{background-image:url('../assets/game-icons/one-punch-man.jpg')!important}
.game-app-item[onclick*="'thumb-cabal'"] .app-icon-img{background-image:url('../assets/game-icons/cabal.jpg')!important}
.game-app-item[onclick*="'thumb-mc'"] .app-icon-img{background-image:url('../assets/game-icons/magic-chess.jpg')!important}
.game-app-item[onclick*="'thumb-octopath'"] .app-icon-img{background-image:url('../assets/game-icons/octopath.jpg')!important}
.game-app-item[onclick*="'thumb-dummy'"] .app-icon-img{background-image:url('../assets/game-icons/dummy.jpg')!important}

/* Keep the admin entry obvious after an authorised login. */
#nav-admin-btn.is-admin-active{min-height:40px!important;padding:0 14px!important;border:1px solid rgba(245,158,11,.58)!important;border-radius:11px!important;background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(234,88,12,.12))!important;color:#fbbf24!important;white-space:nowrap!important;box-shadow:0 0 18px rgba(245,158,11,.12)!important}
#nav-admin-btn.is-admin-active i{filter:drop-shadow(0 0 5px rgba(251,191,36,.5))}