/* =========================================================
   BULLDOG CASINO — PREMIUM UI
   STRUCTURED + CLEAN VERSION
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root{

    --bg:#080b0d;

    --card-bg:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.03),
            rgba(255,255,255,0.01)
        );

    --white:#ffffff;

    --muted:#9ca3af;
    --muted-2:#8f8f95;

    --accent:#ff8a1a;
    --accent-dark:#e2640a;

    --border:
        1px solid rgba(255,255,255,0.05);

    --radius:24px;

    --transition:0.28s ease;

}


/* =========================================================
   FONTS
========================================================= */

@font-face{
    font-family:'Inter';
    src:url('../fonts/Inter-Regular.woff2') format('woff2');
    font-weight:400;
}

@font-face{
    font-family:'Inter';
    src:url('../fonts/Inter-Bold.woff2') format('woff2');
    font-weight:700;
}

@font-face{
    font-family:'Inter';
    src:url('../fonts/Inter-Black.woff2') format('woff2');
    font-weight:900;
}


/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background-color:var(--bg);
    background-image:
        linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.72)),
        url('/static/gamelaunch/images/background.png');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;

    color:var(--white);

    overflow-x:hidden;

}

a{
    color:inherit;
    text-decoration:none;
}

img{
    display:block;
}

.page-wrapper{
    width:100%;
    min-height:100vh;
}


/* =========================================================
   GLOBAL COMPONENTS
========================================================= */

.section{
    padding:20px;
}

.section-header{
    margin-bottom:24px;
}

.section-header h2{

    font-size:40px;
    font-weight:900;

}

.card{

    border-radius:var(--radius);

    background:var(--card-bg);

    border:var(--border);

    transition:var(--transition);

}

.card-hover:hover{

    transform:
        translateY(-8px)
        scale(1.02);

    border-color:
        rgba(255,138,26,0.45);

    box-shadow:
        0 20px 40px rgba(0,0,0,0.42),
        0 0 25px rgba(255,138,26,0.12);

}


/* =========================================================
   HEADER
========================================================= */

.top-header{

    position:sticky;
    top:0;

    z-index:9999;

    width:100%;
    height:88px;

    background:rgba(0,0,0,0.35);

    backdrop-filter:blur(18px);

    border-bottom:
        1px solid rgba(212,175,55,0.2);

}

.header-container{

    width:100%;
    max-width:1800px;

    height:100%;

    margin:0 auto;

    padding:0 32px;

    display:flex;
    align-items:center;
    justify-content:space-between;

}


/* =========================================================
   LOGO
========================================================= */

.logo{
    display:flex;
    align-items:center;
}

.logo img{

    height:72px;

    object-fit:contain;

    transition:var(--transition);

}

.logo img:hover{
    transform:scale(1.04);
}


/* =========================================================
   NAVIGATION
========================================================= */

.header-nav{

    display:flex;
    align-items:center;

    gap:28px;

    margin-left:60px;

}

.header-nav a{

    color:#fff;

    font-size:15px;
    font-weight:600;

    transition:0.2s;

}

.header-nav a:hover{
    color:var(--accent);
}


/* =========================================================
   SEARCH
========================================================= */

.search-box{
    margin-left:20px;
}

.search-box input{

    width:220px;
    height:42px;

    background:#111827;

    border:1px solid #1f2937;

    border-radius:12px;

    padding:0 16px;

    color:#fff;

    outline:none;

    font-size:14px;

}

.search-box input::placeholder{
    color:var(--muted);
}


/* =========================================================
   SLOGAN
========================================================= */

.casino-slogan{

    display:flex;
    align-items:center;

    gap:10px;

    margin-left:18px;

}

.casino-name{

    font-size:16px;
    font-weight:800;

}

.casino-divider{
    color:rgba(255,255,255,0.18);
}

.casino-tagline{

    position:relative;

    font-size:15px;
    font-weight:600;

    color:#d0d0d0;

    transition:var(--transition);

}

.casino-tagline::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-4px;

    width:0;
    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--accent),
            transparent
        );

    transition:0.35s ease;

}

.casino-slogan:hover .casino-tagline{
    color:#fff;
}

.casino-slogan:hover .casino-tagline::after{
    width:100%;
}


/* =========================================================
   HEADER RIGHT
========================================================= */

.header-right{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:8px;
}

.user-box,
.guest-box{

    display:flex;
    align-items:center;

    gap:12px;

}


/* =========================================================
   USER INFO
========================================================= */

.user-name,
.balance-box{

    padding:12px 18px;

    border-radius:14px;

    font-size:14px;
    font-weight:700;

}

.user-name{

    background:rgba(255,255,255,0.03);

    border:var(--border);

}

.balance-box{

    background:rgba(255,138,26,0.08);

    border:
        1px solid rgba(255,138,26,0.14);

    color:#ffb15c;

}


/* =========================================================
   BUTTONS
========================================================= */

.header-btn,
.hero-btn{

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:800;

    transition:var(--transition);

}

.header-btn{

    height:46px;

    padding:0 22px;

    border-radius:14px;

    font-size:14px;

}

.header-btn:hover{
    transform:translateY(-2px);
}

.login-btn,
.logout-btn{

    background:rgba(255,255,255,0.03);

}

.login-btn{
    border:1px solid rgba(255,255,255,0.08);
}

.logout-btn{

    border:1px solid rgba(255,255,255,0.06);

    color:#b6b6bc;

}

.join-btn,
.deposit-btn,
.hero-btn.primary,
.casino-play-button{

    background:
        linear-gradient(
            135deg,
            var(--accent) 0%,
            var(--accent-dark) 100%
        );

}


.withdraw-btn{

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid rgba(255,255,255,0.08);

    color:
        #b6b6bc;

    backdrop-filter:
        blur(10px);

    transition:
        0.2s ease;
}


.withdraw-btn:hover{

    border-color:
        var(--accent);

    color:
        var(--accent);

    transform:
        translateY(-1px);
}




/* =========================================================
   HERO
========================================================= */

.hero-section{
    padding:28px 40px 10px;
    margin-bottom:24px;
}

.hero-slider-wrapper{
    position:relative;

    overflow:hidden;

    border-radius:34px;
}

.hero-slider{

    display:flex;

    overflow:hidden;

    scrollbar-width:none;

    scroll-behavior:smooth;

}

.hero-slider::-webkit-scrollbar{
    display:none;
}

.hero-slide{

    position:relative;

    min-width:100%;
    width:100%;

    height: clamp(540px, 52vw, 780px);

    flex-shrink:0;

    overflow:hidden;

    border-radius:34px;

    background:#101214;

    border:none;

    box-shadow:
        0 20px 50px rgba(0,0,0,0.42);

}

.hero-video,
.hero-image{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.88) 0%,
            rgba(0,0,0,0.45) 45%,
            rgba(0,0,0,0.15) 100%
        );

}

.hero-content{

    position:absolute;

    top:50%;
    left:90px;

    transform:translateY(-50%);

    z-index:10;

    max-width:560px;

}

.hero-content h1{

    font-size:68px;
    font-weight:900;

    line-height:0.92;

    letter-spacing:-2px;

    margin-bottom:20px;

}

.hero-content p{

    color:#d0d0d0;

    font-size:18px;

    line-height:1.7;

    margin-bottom:34px;

}

.hero-buttons{

    display:flex;
    align-items:center;

    gap:14px;

}

.hero-btn{

    height:54px;

    padding:0 28px;

    border-radius:16px;

    font-size:14px;

}

.hero-btn.primary{

    color:#fff;

    box-shadow:
        0 12px 28px rgba(255,138,26,0.28);

}

.hero-btn.secondary{

    background:rgba(255,255,255,0.03);

    border:
        1px solid rgba(255,255,255,0.08);

}


/* =========================================================
   SOUND BUTTON
========================================================= */

.hero-sound-toggle{

    position:absolute;

    right:24px;
    top:24px;

    z-index:30;

    width:48px;
    height:48px;

    border:1px solid rgba(255,255,255,0.15);

    border-radius:50%;

    background:rgba(0,0,0,0.40);

    backdrop-filter:blur(12px);

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    outline:none;

    -webkit-tap-highlight-color:transparent;

    cursor:pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.2s ease;

}

.hero-sound-toggle:hover{

    background:rgba(255,138,26,0.25);

    border-color:rgba(255,138,26,0.5);

    transform:scale(1.1);

}

.hero-sound-toggle .sound-icon{

    width:20px;
    height:20px;

    pointer-events:none;

}

@media (max-width:768px){

    .hero-sound-toggle{

        top:16px;
        right:16px;
        left:auto;
        bottom:auto;

        width:42px;
        height:42px;

        font-size:18px;

    }

}

/* =========================================================
   SLIDERS
========================================================= */

.slider-wrapper{
    position:relative;
}

.games-grid,
.providers-grid{

    display:flex;

    gap:20px;

    overflow-x:auto;
    overflow-y:visible;

    scrollbar-width:none;

    scroll-behavior:smooth;

    cursor:grab;

}

.games-grid::-webkit-scrollbar,
.providers-grid::-webkit-scrollbar{
    display:none;
}

.dragging{
    cursor:grabbing;
}


/* =========================================================
   ARROWS
========================================================= */

.slider-arrow,
.hero-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    border:none;

    border-radius:50%;

    color:#fff;

    cursor:pointer;

    transition:var(--transition);

}

.slider-arrow{

    z-index:20;

    width:52px;
    height:52px;

    background:rgba(15,15,15,0.85);

    font-size:28px;

}

.hero-arrow{

    z-index:50;

    width:64px;
    height:64px;

    background:rgba(10,10,10,0.72);

    backdrop-filter:blur(10px);

    font-size:34px;

}

.slider-arrow:hover,
.hero-arrow:hover{

    background:rgba(255,138,26,0.18);

    transform:
        translateY(-50%)
        scale(1.08);

}

.slider-arrow.left{
    left:-10px;
}

.slider-arrow.right{
    right:-10px;
}

.hero-arrow-left{
    left:18px;
}

.hero-arrow-right{
    right:18px;
}


/* =========================================================
   GAME CARD
========================================================= */

.game-card{

    flex:0 0 185px;

    position:relative;

    overflow:hidden;

    border-radius:24px;

    background:var(--card-bg);

    border:var(--border);

    transition:var(--transition);

}

.game-card:hover .casino-play-button,
.game-image-wrapper:hover .casino-play-button{

    opacity:1;

    transform:
        translateX(-50%)
        translateY(0);

}

.game-card:hover{
    transform:translateY(-8px) scale(1.02);
}

.game-image-wrapper,
.casino-game-image-wrapper{

    position:relative;

    aspect-ratio:1/1;

    overflow:hidden;

}

.game-image,
.casino-game-image{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.4s ease;

}

.game-card:hover .game-image,
.casino-game-card:hover .casino-game-image{
    transform:scale(1.08);
}

.game-info{
    padding:10px;
}

.game-info h3{

    font-size:15px;
    font-weight:700;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    margin-bottom:5px;

}

.game-info span{

    color:var(--muted-2);

    font-size:13px;

}


/* =========================================================
   PROVIDERS
========================================================= */

.provider-card{

    width:150px;
    min-width:150px;
    height:150px;

    flex-shrink:0;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    overflow:hidden;

    border-radius:24px;

    background:var(--card-bg);

    border:var(--border);

    transition:var(--transition);

}

.provider-logo{

    width:100%;
    height:100%;

    object-fit:contain;

    padding:1px;

}

.provider-card span{

    font-size:14px;
    font-weight:700;

}


/* =========================================================
   PROVIDER TABS
========================================================= */

.provider-tabs{

    display:flex;
    align-items:center;

    gap:14px;

    overflow-x:auto;

    padding:28px 40px 10px;

    scrollbar-width:none;

}

.provider-tabs::-webkit-scrollbar{
    display:none;
}

.provider-tab{

    height:48px;

    padding:0 22px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    border-radius:16px;

    background:rgba(255,255,255,0.03);

    border:
        1px solid rgba(255,255,255,0.06);

    color:#d4d4d8;

    font-size:14px;
    font-weight:700;

    transition:var(--transition);

}

.provider-tab:hover,
.provider-tab.active{

    color:#fff;

    border-color:
        rgba(255,138,26,0.40);

    background:
        rgba(255,138,26,0.08);

}


/* =========================================================
   CASINO GRID
========================================================= */

.casino-games-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(150px,1fr));

    gap:22px;

    padding:30px 40px 60px;

}

.casino-game-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    background:var(--card-bg);

    border:var(--border);

    transition:var(--transition);

}

.casino-game-card:hover{

    transform:
        translateY(-8px)
        scale(1.02);

}


/* =========================================================
   PLAY BUTTON
========================================================= */

.casino-play-button{

    position:absolute;

    left:50%;
    bottom:18px;

    transform:
        translateX(-50%)
        translateY(10px);

    opacity:0;

    width:calc(100% - 32px);
    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    color:#fff;

    font-size:13px;
    font-weight:800;

    letter-spacing:1px;

    transition:var(--transition);

}

.casino-game-card:hover .casino-play-button{

    opacity:1;

    transform:
        translateX(-50%)
        translateY(0);

}


/* =========================================================
   PLACEHOLDERS
========================================================= */

.game-placeholder,
.casino-game-placeholder{

    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    text-align:center;

    padding:18px;

    overflow:hidden;

    word-break:break-word;

    color:#fff;

    line-height:1.5;

}

.game-placeholder{
    font-size:16px;
}

.casino-game-placeholder{
    font-size:12px;
}


/* =========================================================
   FOOTER
========================================================= */

.footer{

    margin-top:60px;

    padding:24px;

    text-align:center;

    color:#7f848c;

    border-top:
        1px solid rgba(255,255,255,0.04);

}


/* =========================================================
   RESPONSIVE — 1200
========================================================= */

@media(max-width:1200px){

    .hero-content h1{
        font-size:56px;
    }

    .hero-content{
        max-width:500px;
    }

}


/* =========================================================
   RESPONSIVE — 992
========================================================= */

@media(max-width:992px){

    .header-container{
        padding:0 20px;
    }

    .section{
        padding:24px 20px;
    }

    .hero-section{
        padding:28px 40px 30px;
    }

    .hero-slide{

        min-height:420px;

        border-radius:28px;

    }

    .hero-content{

        left:90px;
        right:40px;

        max-width:520px;

    }

    .hero-content h1{

        font-size:48px;
        line-height:1;

    }

    .hero-content p{

        font-size:16px;
        line-height:1.6;

    }

    .section-header h2{
        font-size:34px;
    }

}


/* =========================================================
   RESPONSIVE — 768
========================================================= */

@media(max-width:768px){

    .top-header{
        height:auto;
    }

    .header-container{

        flex-wrap:wrap;

        gap:12px;

        padding:10px 14px;

        height:auto;

    }

    .logo img{
        height:54px;
    }

    .casino-divider,
    .casino-tagline,
    .user-name,
    .balance-box{
        display:none;
    }

    .header-nav{

        width:100%;

        margin-left:0;

        gap:16px;

        overflow-x:auto;

        white-space:nowrap;

        padding-bottom:4px;

        scrollbar-width:none;

    }

    .header-nav::-webkit-scrollbar{
        display:none;
    }

    .header-nav a{

        flex-shrink:0;

        font-size:14px;

    }

    .search-box{
        margin-left:auto;
    }

    .search-box input{

        width:140px;
        height:38px;

        font-size:13px;

    }

    .header-btn{

        height:38px;

        padding:0 14px;

        font-size:13px;

        border-radius:12px;

    }

    .section{
        padding:20px 14px;
    }

    .hero-section{
        padding:0;
        margin-bottom:16px;
    }

    .hero-slider-wrapper{
        border-radius:0;
    }

    .hero-slide{

        height:72vw;

        min-height:280px;
        max-height:460px;

        border-radius:0;

    }

    .hero-overlay{

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,0.75) 0%,
                rgba(0,0,0,0.35) 100%
            );

    }

    .hero-content{

    position:absolute;

    left:22px;
    right:22px;

    bottom:24px;

    top:auto;

    transform:none;

    z-index:15;

    max-width:260px;

    }

    .hero-content h1{

    font-size:34px;

    line-height:0.95;

    letter-spacing:-1px;

    margin-bottom:12px;

    }

    .hero-content p{

    font-size:14px;

    line-height:1.4;

    margin-bottom:18px;

    max-width:220px;

    }

    hero-buttons{

    display:flex;

    gap:10px;

    flex-wrap:nowrap;

    }

    .hero-btn{

    height:42px;

    padding:0 16px;

    font-size:13px;

    border-radius:12px;

    }

    .hero-slider{

        overflow-x:auto;

        scroll-snap-type:x mandatory;

        scroll-behavior:smooth;

        -webkit-overflow-scrolling:touch;

        touch-action:pan-x pan-y;

    }

    .hero-slide{

        scroll-snap-align:start;

        scroll-snap-stop:always;

        flex:0 0 100%;

    }

    .hero-sound-toggle{

        width:42px;
        height:42px;

        right:14px;
        top:14px;
        left:auto;
        bottom:auto;

        font-size:16px;

    }

    .slider-arrow,
    .hero-arrow{
        display:none;
    }

    .games-grid,
    .providers-grid{
        gap:14px;
    }

    .game-card{
        flex:0 0 140px;
    }

    .provider-card{

        width:120px;
        min-width:120px;
        height:120px;

        border-radius:20px;

    }

    .provider-logo{
        padding:6px;
    }

    .provider-card span{

        font-size:12px;

        text-align:center;

        padding:0 6px 8px;

    }

    .game-info h3{
        font-size:13px;
    }

    .game-info span{
        font-size:11px;
    }

    .casino-games-grid{

        grid-template-columns:
            repeat(2,1fr);

        gap:14px;

        padding:10px 0 30px;

    }

    .casino-game-card{
        border-radius:18px;
    }

    .casino-play-button{

        opacity:1;

        height:40px;

        font-size:12px;

        border-radius:12px;

        width:calc(100% - 20px);

        transform:
            translateX(-50%)
            translateY(0);

    }

    .footer{

        margin-top:30px;

        padding:18px;

        font-size:13px;

    }

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

    .casino-play-button{
        display:none;
    }

}

.footer{

    margin-top:30px;

    padding:18px;

    font-size:13px;

}

/* =========================================================
   RESPONSIVE — 480
========================================================= */

@media(max-width:480px){

    .hero-slide{

        min-height:320px;

        border-radius:0;

    }

    .hero-content h1{
        font-size:28px;
    }

    .hero-content p{
        font-size:13px;
    }

    .hero-btn{

        width:100%;

        justify-content:center;

    }

    .game-card{
        flex:0 0 128px;
    }

    .provider-card{

        width:110px;
        min-width:110px;
        height:110px;

    }

    .casino-games-grid{
        gap:12px;
    }

}


/* =========================================================
   MOBILE — background-attachment fix (iOS/Android)
========================================================= */

@media(max-width:768px){

    body{
        background-attachment: scroll;
    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media(hover:none){

    .game-card:hover,
    .provider-card:hover,
    .casino-game-card:hover{

        transform:none;

        box-shadow:none;

    }

    .game-card:active,
    .provider-card:active,
    .casino-game-card:active{

        transform:scale(0.98);

    }

}


/* =========================================
   BURGER
========================================= */

.burger{

    display:none;

    flex-direction:column;

    gap:5px;

    cursor:pointer;

}

.burger span{

    width:28px;
    height:3px;

    background:#fff;

    border-radius:10px;

}

/* =========================================
   MOBILE HEADER
========================================= */

@media (max-width: 900px){

    .header-nav,
    .header-right{

        display:none;

    }

    .burger{

        display:flex;

    }

    .header-nav.active{

        display:flex;

        position:absolute;

        top:90px;
        left:0;

        width:100%;

        padding:24px;

        flex-direction:column;

        gap:18px;

        background:#0b1018;

        z-index:999;

    }

}



.mobile-auth{

    display:none;

}

/* MOBILE */

@media (max-width:900px){

    .mobile-auth{

        display:flex;

        flex-direction:column;

        gap:14px;

        margin-top:20px;

    }

    .mobile-link{

        color:#fff;

        text-decoration:none;

        font-size:18px;

        font-weight:700;

    }

    .logout-mobile-btn{

        background:none;

        border:none;

        padding:0;

        cursor:pointer;

        color:#fff;

        font-size:18px;

        font-weight:700;

    }

    /* Mobile language switcher */

    .mobile-lang-switcher{

        display:flex;

        flex-direction:row;

        flex-wrap:wrap;

        justify-content:center;

        gap:10px;

        margin-top:24px;

        padding:16px 20px;

        border-top:1px solid rgba(255,255,255,0.08);

    }

    .mobile-lang-form{

        margin:0;

        padding:0;

        display:contents;

    }

    .mobile-lang-btn{

        height:40px;

        padding:0 18px;

        background:rgba(255,255,255,0.05);

        border:1px solid rgba(255,255,255,0.12);

        border-radius:20px;

        color:rgba(255,255,255,0.65);

        font-family:inherit;

        font-size:15px;

        font-weight:500;

        cursor:pointer;

        transition:background 0.15s, color 0.15s, border-color 0.15s;

    }

    .mobile-lang-btn--active{

        background:rgba(212,175,55,0.18);

        border-color:rgba(212,175,55,0.55);

        color:#d4af37;

        font-weight:700;

    }

}

/* =========================================
   SLICE INFO
========================================= */

@media(max-width:768px){

    .hero-arrow{

        display:flex;

        width:32px;
        height:32px;

        background:none;
        backdrop-filter:none;

        border:none;
        box-shadow:none;

        top:50%;
        bottom:auto;

        transform:translateY(-50%);

        font-size:22px;

        opacity:0.75;

    }

    .hero-arrow-left{
        left:8px;
    }

    .hero-arrow-right{
        right:8px;
    }

    .hero-arrow:hover{

        background:none;

        transform:
            translateY(-50%)
            scale(1.08);

        opacity:1;

    }

}



/* =========================================
   PROMOTIONS
========================================= */

/* =========================================
   PROMOTIONS SLIDER CARD
========================================= */

/* Centre items when few, scroll normally when many */
.promo-slider {
    justify-content: safe center;
}

/* Compact promo section — no title, just a framed strip */
.promo-section-compact {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 28px;
}
.promo-frame {
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(18px);
    padding: 12px 0;
}

.promo-card {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 390px;
    min-width: 390px;
    height: 185px;
    min-height: 185px;
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    background: var(--card-bg);
    border: var(--border);
    transition: var(--transition);
    aspect-ratio: unset;
}

.promo-card:hover {
    transform: translateY(-8px) scale(1.02);
}

.promo-image {
    width: 390px;
    height: 185px;
    object-fit: cover;
    display: block;
    transition: 0.4s ease;
}

.promo-card:hover .promo-image {
    transform: scale(1.06);
}

.promo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #5a7a9a;
    background: var(--card-bg);
    padding: 12px;
    text-align: center;
}

.promo-hover-btn {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    width: calc(100% - 32px);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    transition: var(--transition);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    pointer-events: none;
}

.promo-card:hover .promo-hover-btn {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.promo-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 390px));
    gap: 20px;
    justify-content: center;
}

.promo-card-page {
    flex: unset;
    width: 100%;
    height: 185px;
    min-height: 185px;
    min-width: unset;
}

/* Static promo card (no button_url) — no pointer cursor, no hover lift */
.promo-card-static {
    cursor: default;
    pointer-events: none;
}
.promo-card-static .promo-sound-btn {
    pointer-events: auto;
}

/* Promo sound button — same style as hero */
.promo-sound-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, border-color .2s;
    z-index: 10;
    padding: 0;
}
.promo-sound-btn:hover {
    background: rgba(255,138,26,0.25);
    border-color: rgba(255,138,26,0.5);
}
.promo-sound-btn .sound-icon {
    width: 16px;
    height: 16px;
}

/* Mobile: scroll-snap + fluid width */
@media (max-width: 768px) {
    .promo-section-compact {
        margin-left: 0;
        margin-right: 0;
    }
    .promo-frame {
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 8px 0;
        overflow: hidden;
    }
    .promo-slider {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        padding: 0 14px;
        gap: 12px;
        overflow-x: auto;
    }
    .promo-card {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        width: calc(100vw - 60px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 60px) !important;
        height: 160px !important;
        min-height: 0 !important;
        border-radius: 16px;
    }
    .promo-image,
    .promo-card video.promo-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }
}

/* =========================================
   GIFT POPUP
========================================= */

.gift-popup-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.75);

    backdrop-filter: blur(10px);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 999999;
}

.gift-popup {

    position: relative;

    width: 420px;

    padding: 35px;

    border-radius: 28px;

    background: rgba(255,255,255,0.05);

    border: 1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(20px);

    text-align: center;

    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.gift-popup-close {

    position: absolute;

    top: 16px;

    right: 16px;

    width: 36px;

    height: 36px;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,0.08);

    color: white;

    cursor: pointer;

    font-size: 16px;
}

.gift-popup-image img {

    width: 100%;

    border-radius: 20px;

    margin-bottom: 22px;
}

.gift-popup h2 {

    color: white;

    font-size: 30px;

    margin-bottom: 14px;
}

.gift-popup p {

    color: rgba(255,255,255,0.75);

    font-size: 17px;

    margin-bottom: 20px;
}

.gift-popup-game {

    color: #ff8c1a;

    font-size: 20px;

    font-weight: 700;

    margin-bottom: 28px;
}

.gift-popup-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 55px;

    border-radius: 18px;

    background: linear-gradient(
        135deg,
        #ff8c1a,
        #ff5e00
    );

    color: white;

    text-decoration: none;

    font-size: 18px;

    font-weight: 700;

    transition: 0.2s;
}

.gift-popup-btn:hover {

    transform: scale(1.02);
}


/* =========================================
   LANGUAGE SWITCHER
========================================= */

.lang-switcher{

    position:relative;

    display:flex;

    align-items:center;

}


.lang-btn{

    display:flex;

    align-items:center;

    gap:6px;

    background:rgba(255,255,255,0.03);

    border:1px solid rgba(255,255,255,0.08);

    color:#fff;

    font-family:inherit;

    cursor:pointer;

    white-space:nowrap;

}

.lang-btn:hover{

    background:rgba(255,255,255,0.08);

    border-color:rgba(255,255,255,0.35);

}


.lang-globe{

    width:16px;

    height:16px;

    flex-shrink:0;

    opacity:0.85;

}


.lang-code{

    min-width:20px;

    text-align:center;

}


.lang-arrow{

    width:10px;

    height:6px;

    flex-shrink:0;

    opacity:0.7;

    transition:transform 0.25s;

}

.lang-switcher.open .lang-arrow{

    transform:rotate(180deg);

}


.lang-dropdown{

    display:none;

    position:absolute;

    top:calc(100% + 8px);

    right:0;

    min-width:180px;

    background:rgba(18,18,28,0.96);

    border:1px solid rgba(255,255,255,0.10);

    border-radius:16px;

    padding:8px;

    box-shadow:0 16px 48px rgba(0,0,0,0.55);

    backdrop-filter:blur(20px);

    z-index:9000;

}

.lang-switcher.open .lang-dropdown{

    display:block;

    animation:langFadeIn 0.18s ease;

}

@keyframes langFadeIn{

    from{ opacity:0; transform:translateY(-6px); }

    to  { opacity:1; transform:translateY(0); }

}


.lang-form{

    margin:0;

    padding:0;

}


.lang-option{

    display:flex;

    align-items:center;

    gap:10px;

    width:100%;

    padding:9px 12px;

    background:none;

    border:none;

    border-radius:10px;

    color:rgba(255,255,255,0.80);

    font-size:14px;

    cursor:pointer;

    text-align:left;

    transition:background 0.15s, color 0.15s;

}

.lang-option:hover{

    background:rgba(255,255,255,0.08);

    color:#fff;

}

.lang-option--active{

    color:#d4af37;

    font-weight:600;

}

.lang-option--active:hover{

    background:rgba(212,175,55,0.12);

}


.lang-option-code{

    width:26px;

    flex-shrink:0;

    font-size:13px;

    font-weight:400;

    opacity:0.65;

}


.lang-option-name{

    flex:1;

}


.lang-check{

    width:14px;

    height:10px;

    flex-shrink:0;

    color:#d4af37;

}


/* Mobile: hide lang-code text, keep globe + arrow */

@media(max-width:768px){

    .lang-code{

        display:none;

    }

    .lang-btn{

        padding:0 8px;

        gap:3px;

        min-width:unset;

    }

    .lang-dropdown{

        right:0;

        left:auto;

    }

}