/* ---- LAYOUT FIX: height chain + header + nav/card sizing ---- */

        /* 1. Root height chain — needed so div.full-page { height:100% } doesn't collapse */
        html,
        body {
            height: 100% !important;
        }

        app-root,
        h5-contents {
            display: block !important;
            height: 100% !important;
        }

        /* 2. full-page: column flex so desktop-header stacks above content-body */
        div.full-page {
            height: 100dvh !important;
            overflow: hidden !important;
            display: flex !important;
            flex-direction: column !important;
        }

        /* 3. MOBILE (<992px): desktop-header hidden, mobile-header visible */
        div.desktop-header,
        div.desktop-header[_ngcontent-ng-c4026103550] {
            display: none !important;
        }

        div.mobile-header,
        div.mobile-header[_ngcontent-ng-c4026103550],
        div.mobile-menu,
        div.mobile-menu[_ngcontent-ng-c4026103550] {
            display: block !important;
            width: 100% !important;
            flex-shrink: 0 !important;
        }

        div.content-body {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            overflow: hidden !important;
        }

        div.content-page {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            overflow: hidden !important;
            display: flex !important;
            flex-direction: column !important;
        }

        /* 4. DESKTOP (≥992px):
            desktop-header shows at top (already in full-page column above content-body)
            mobile-header HIDDEN — this stops the duplicate header
            content-body becomes a row: sidebar (20%) | content-page (80%) */
        @media (min-width: 992px) {

            div.desktop-header,
            div.desktop-header[_ngcontent-ng-c4026103550] {
                display: block !important;
                width: 100% !important;
                flex-shrink: 0 !important;
            }

            /* Use attribute selector to match Angular specificity and beat its own rule */
            div.mobile-header,
            div.mobile-header[_ngcontent-ng-c4026103550],
            div.mobile-menu,
            div.mobile-menu[_ngcontent-ng-c4026103550] {
                display: none !important;
            }

            div.desktop-menu {
                display: none !important;
            }

            div.content-body {
                display: flex !important;
                flex-direction: column !important;
                align-items: stretch !important;
            }

            div.content-page {
                flex: 1 1 auto !important;
                max-width: 100% !important;
                width: 100% !important;
                height: 100% !important;
            }
        }

        /* 5. Scrollable content area */
        section.screen-overflow {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            display: flex !important;
            flex-direction: column !important;
        }

        section.screen-overflow>div {
            display: flex !important;
            flex-direction: column !important;
            flex: 1 1 auto !important;
            min-height: 0 !important;
        }

        /* 6. h5-home and inner wrapper */
        h5-home {
            display: flex !important;
            flex-direction: column !important;
            flex: 1 1 auto !important;
            min-height: 0 !important;
        }

        h5-home>div {
            display: flex !important;
            flex-direction: column !important;
            flex: 1 1 auto !important;
            min-height: 0 !important;
            overflow: hidden !important;
        }

        /* 7. Games section fills remaining height */
        div.games {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            overflow: hidden !important;
            padding-left: 5px !important;
            padding-right: 5px !important;
        }

        h5-games {
            display: flex !important;
            flex-direction: column !important;
            flex: 1 1 auto !important;
            min-height: 0 !important;
            overflow: hidden !important;
        }


        /* ---- Swiper Banner Fix ---- */
        .swiper-slide.push-up-6 {
            overflow: visible !important;
        }

        .swiper-slide.push-up-6 swiper,
        .swiper-slide.push-up-6 .swiper {
            display: block !important;
            width: 100% !important;
            height: 150px !important;
            overflow: hidden !important;
            border-radius: 8px;
        }

        @media (min-width: 992px) {
            .swiper-slide.push-up-6 .swiper {
                height: 250px !important;
            }
        }

        .swiper-slide.push-up-6 .swiper-wrapper {
            display: flex !important;
            width: 100% !important;
            height: 100% !important;
            transition-property: transform !important;
        }

        .swiper-slide.push-up-6 .swiper-wrapper>.swiper-slide {
            flex-shrink: 0 !important;
            width: 100% !important;
            height: 100% !important;
            position: relative !important;
        }

        .swiper-slide.push-up-6 .swiper-wrapper>.swiper-slide img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            display: block !important;
        }

        /* ---- H5 Games Nav + Cards Fix ---- */

        /* gameCategory nav: horizontal scrollable tab bar */
        div.gameCategory {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            height: auto !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            white-space: nowrap !important;
            gap: 4px !important;
            padding: 8px 4px !important;
            flex-shrink: 0 !important;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        div.gameCategory::-webkit-scrollbar {
            display: none !important;
        }

        /* Tab buttons: icon + label side by side (like reference image) */
        a.btn-game-cat {
            display: inline-flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: center !important;
            flex-shrink: 0 !important;
            position: relative !important;
            gap: 6px !important;
            padding: 6px 14px 10px !important;
            border-radius: 0 !important;
            text-decoration: none !important;
            cursor: pointer !important;
            color: var(--dark-background-font, #ccc) !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            white-space: nowrap !important;
            width: auto !important;
            box-shadow: none !important;
        }

        /* Reset Bootstrap .row and col inside tab buttons */
        a.btn-game-cat .row {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            justify-content: center !important;
            margin: 0 !important;
            width: auto !important;
            gap: 6px !important;
        }

        a.btn-game-cat .col-5,
        a.btn-game-cat .col-7 {
            padding: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex: none !important;
            width: auto !important;
            max-width: none !important;
        }

        a.btn-game-cat img.tab-img {
            width: 30px !important;
            height: 30px !important;
            object-fit: contain !important;
            display: block !important;
            flex-shrink: 0 !important;
        }

        a.btn-game-cat span {
            display: block !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            line-height: 1 !important;
            white-space: nowrap !important;
        }

        hr.active-a {
            border: none !important;
            border-bottom: 3px solid var(--primary-color, #f3c239) !important;
            opacity: 1 !important;
            margin: 0 !important;
            width: 100% !important;
            position: absolute !important;
            bottom: 0 !important;
            left: 0 !important;
        }

        hr.deactive-a {
            display: none !important;
        }

        a.btn-game-cat.active span {
            color: var(--primary-color, #f3c239) !important;
        }

        /* Game cards scrollable container */
        div#game-main-container.tab-content {
            flex: 1 1 auto !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            position: relative !important;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        div#game-main-container.tab-content::-webkit-scrollbar {
            display: none !important;
        }

        /* Game cards: 5-per-row on desktop */
        div.game-wrapper {
            display: flex !important;
            flex-wrap: wrap !important;
            width: 100% !important;
            padding: 4px 0 !important;
        }

        a.game-display {
            position: relative !important;
            display: block !important;
            flex: 0 0 20% !important;
            max-width: 20% !important;
            padding: 4px !important;
            box-sizing: border-box !important;
            text-decoration: none !important;
        }

        a.game-display img.img-fluid {
            width: 100% !important;
            height: auto !important;
            aspect-ratio: 1 / 1 !important;
            object-fit: cover !important;
            display: block !important;
            border-radius: 8px !important;
        }

        a.game-display .top-right {
            position: absolute !important;
            top: 8px !important;
            right: 8px !important;
            z-index: 2 !important;
        }

        a.game-display .top-right img {
            width: 28px !important;
            height: auto !important;
        }

        a.game-display .centered {
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            text-align: center !important;
            z-index: 3 !important;
            width: 90% !important;
        }

        a.game-display .centered b {
            background-color: rgba(0, 0, 0, 0.6) !important;
            color: #fff !important;
            padding: 3px 8px !important;
            border-radius: 10px !important;
            font-size: 11px !important;
            white-space: nowrap !important;
        }

        /* Mobile (<992px): 4 cards per row, smaller nav */
        @media (max-width: 991px) {
            a.game-display {
                flex: 0 0 25% !important;
                max-width: 25% !important;
                padding: 3px !important;
            }

            a.game-display .top-right img {
                width: 22px !important;
            }

            a.btn-game-cat {
                font-size: 11px !important;
                padding: 4px 8px 8px !important;
                gap: 4px !important;
            }

            a.btn-game-cat img.tab-img {
                width: 22px !important;
                height: 22px !important;
            }

            a.btn-game-cat span {
                font-size: 11px !important;
            }
        }

        /* ── Mobile footer clickable buttons ── */
        .footerbar li.li-container {
            cursor: pointer !important;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            transition: opacity 0.15s ease;
        }

        .footerbar li.li-container:active {
            opacity: 0.6;
        }

        #circle-small {
            cursor: pointer !important;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            transition: transform 0.15s ease;
        }

        #circle-small:active {
            transform: scale(0.92);
        }

        /* ── Free Demo & Register buttons in header ─────────────────────── */

        /* ── wallet-menu container: flex row with CENTER gap ── */
        button.btn-header.wallet-menu {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 28px !important;
            background: transparent !important;
            border: none !important;
            padding: 0 !important;
        }

        /* ── SHARED base ── */
        .freedemo-btn,
        .register-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 28px;
            padding: 0 12px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.3px;
            white-space: nowrap;
            cursor: pointer;
            border: none;
            outline: none;
            position: relative;
            overflow: visible;
            -webkit-tap-highlight-color: transparent;
            /* box grows, text stays still via counter-scale on ::before */
            transform-origin: center center;
        }

        /* The animated border/bg layer — scales independently of text */
        .freedemo-btn::before,
        .register-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            z-index: 0;
        }

        /* Keep text above the animated layer */
        .freedemo-btn span,
        .register-btn span,
        .freedemo-btn,
        .register-btn {
            position: relative;
            z-index: 1;
        }

        /* ── FREE DEMO — outlined gold, box pulses small→big loop ── */
        .freedemo-btn {
            background: transparent;
            border: 2px solid #f3c239;
            color: #f3c239;
            animation: boxPulseOutline 1.8s ease-in-out infinite;
            transition: filter 0.15s ease;
        }

        @keyframes boxPulseOutline {
            0% {
                box-shadow: 0 0 0px 2px rgba(243, 194, 57, 0.0),
                    0 0 0px 0px rgba(243, 194, 57, 0.0);
                border-color: rgba(243, 194, 57, 0.5);
            }

            50% {
                box-shadow: 0 0 0px 6px rgba(243, 194, 57, 0.18),
                    0 0 14px 2px rgba(243, 194, 57, 0.40);
                border-color: rgba(243, 194, 57, 1.0);
            }

            100% {
                box-shadow: 0 0 0px 2px rgba(243, 194, 57, 0.0),
                    0 0 0px 0px rgba(243, 194, 57, 0.0);
                border-color: rgba(243, 194, 57, 0.5);
            }
        }

        .freedemo-btn:hover {
            background: rgba(243, 194, 57, 0.10);
            filter: brightness(1.15);
            animation-play-state: paused;
        }

        .freedemo-btn:active {
            filter: brightness(0.85);
            animation-play-state: paused;
        }

        /* ── REGISTER — solid gold, box pulses small→big loop (offset phase) ── */
        .register-btn {
            background: linear-gradient(135deg, #f3c239 0%, #e8b800 50%, #f3c239 100%);
            background-size: 200% 100%;
            color: #1a1a1a;
            animation: boxPulseSolid 1.8s ease-in-out infinite;
            animation-delay: 0.9s;
            /* offset so they alternate */
            transition: filter 0.15s ease;
        }

        @keyframes boxPulseSolid {
            0% {
                box-shadow: 0 0 0px 2px rgba(243, 194, 57, 0.0),
                    0 0 4px 0px rgba(243, 194, 57, 0.2);
            }

            50% {
                box-shadow: 0 0 0px 7px rgba(243, 194, 57, 0.20),
                    0 0 18px 2px rgba(243, 194, 57, 0.55);
            }

            100% {
                box-shadow: 0 0 0px 2px rgba(243, 194, 57, 0.0),
                    0 0 4px 0px rgba(243, 194, 57, 0.2);
            }
        }

        .register-btn:hover {
            filter: brightness(1.12);
            animation-play-state: paused;
        }

        .register-btn:active {
            filter: brightness(0.88);
            animation-play-state: paused;
        }

        /* ── click flash (JS adds this class) ── */
        @keyframes btnClickFlash {
            0% {
                box-shadow: 0 0 0px 4px rgba(243, 194, 57, 0.0);
            }

            40% {
                box-shadow: 0 0 0px 12px rgba(243, 194, 57, 0.5), 0 0 20px 4px rgba(243, 194, 57, 0.6);
            }

            100% {
                box-shadow: 0 0 0px 4px rgba(243, 194, 57, 0.0);
            }
        }

        .btn-click-bounce {
            animation: btnClickFlash 0.4s ease-out !important;
        }


        /* ── Game card click/hover effect ── */
        a.game-display[href] {
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }

        a.game-display[href]:hover {
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 6px 18px rgba(243, 194, 57, 0.35);
            z-index: 2;
        }

        a.game-display[href]:active {
            transform: scale(0.96);
            box-shadow: 0 2px 8px rgba(243, 194, 57, 0.2);
        }

        /* ── Desktop header buttons wrapper ── */
        .desk-header-btns {
            display: flex;
            align-items: center;
            gap: 28px;
        }