:root {
    --bg1: #090a12;
    --bg2: #0f1023;
    --gold: #f5c542;
}

.card{
    color: #fff;
}

html, body {
    font-family: "Prompt", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans Thai", "Noto Sans", "Liberation Sans", sans-serif;
    background:
        linear-gradient(180deg, rgba(9,10,18,0.85), rgba(15,16,35,0.92)),
        url("/images/landing-bg.jpg");
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    color: #fff;
}


body {
    font-family: "Prompt", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans Thai", "Noto Sans", "Liberation Sans", sans-serif;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(245,197,66,0.12), transparent 60%),
                radial-gradient(1000px 500px at 80% 20%, rgba(110,231,255,0.10), transparent 60%),
                linear-gradient(180deg, var(--bg1), var(--bg2));
    color: #fff;
}

.backdrop-blur {
    backdrop-filter: blur(10px);
}

.border-white-10 {
    border-color: rgba(255,255,255,.10) !important;
}

/* Fixed Navbar Styles */
.fixed-top {
    transition: all 0.3s ease;
}

.navbar-transparent {
    background: rgba(9, 10, 18, 0.3) !important;
    backdrop-filter: blur(8px);
}

.navbar-scrolled {
    background: rgba(9, 10, 18, 0.95) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Add padding to body to prevent content from hiding under fixed navbar */
body {
    padding-top: 80px;
}

/* Scroll animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.animate-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger animations for cards */
.stagger-animation > div {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.stagger-animation > div.stagger-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Hero section should be visible immediately */
.hero-video {
    opacity: 0;
    animation: fadeInHero 1s ease forwards;
}

@keyframes fadeInHero {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Card hover enhancements */
.card.glass {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card.glass:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.text-white-75 {
    color: rgba(255,255,255,.75) !important;
}

.hero {
    padding-top: 48px;
    padding-bottom: 20px;
}

.section {
    position: relative;
}

.glass {
    background: rgba(255,255,255,.06);
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button::after {
    filter: invert(1);
}

.pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 0 0 rgba(245,197,66,0.6);
    animation: pulse 1.6s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(245,197,66,0.55); }
    70% { box-shadow: 0 0 0 12px rgba(245,197,66,0); }
    100% { box-shadow: 0 0 0 0 rgba(245,197,66,0); }
}

.recaptcha-wrap { display:flex; justify-content:center; }


/* ===== HERO VIDEO ===== */
.hero-video {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
    filter: saturate(1.1) contrast(1.05);
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1200px 700px at 50% 25%, rgba(255,255,255,0.10), transparent 55%),
        radial-gradient(800px 500px at 20% 40%, rgba(255,120,0,0.18), transparent 60%),
        radial-gradient(900px 520px at 80% 45%, rgba(60,160,255,0.22), transparent 60%),
        linear-gradient(180deg, rgba(9,10,18,0.65), rgba(15,16,35,0.90));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

/* ===== LOGO: burst / energy aura ===== */
.hero-logo {
    position: relative;
    width: min(560px, 92vw);
}

.hero-logo img {
    width: 100%;
    height: auto;
    filter:
        drop-shadow(0 0 18px rgba(120, 180, 255, 0.55))
        drop-shadow(0 0 40px rgba(255, 140, 0, 0.20))
        drop-shadow(0 0 70px rgba(80, 120, 255, 0.25));
    animation: heroFloat 6s ease-in-out infinite;
}

/* Light rays + elemental ring */
.fx-burst::before,
.fx-burst::after {
    content: "";
    position: absolute;
    inset: -18%;
    border-radius: 999px;
    z-index: -1;
}

.fx-burst::before {
    background:
        conic-gradient(from 0deg,
            rgba(255, 120, 0, 0.0) 0deg,
            rgba(255, 120, 0, 0.35) 40deg,
            rgba(60, 160, 255, 0.35) 120deg,
            rgba(200, 80, 255, 0.25) 200deg,
            rgba(255, 120, 0, 0.30) 300deg,
            rgba(255, 120, 0, 0.0) 360deg);
    filter: blur(18px);
    opacity: 0.85;
    animation: spinSlow 10s linear infinite;
}

.fx-burst::after {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.12), transparent 55%),
        radial-gradient(circle at 30% 40%, rgba(255,120,0,0.28), transparent 60%),
        radial-gradient(circle at 70% 45%, rgba(60,160,255,0.30), transparent 62%);
    filter: blur(12px);
    opacity: 0.95;
    animation: pulseAura 2.6s ease-in-out infinite;
}

@keyframes spinSlow {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes pulseAura {
    0%, 100% { transform: scale(1); opacity: 0.90; }
    50% { transform: scale(1.04); opacity: 1.0; }
}

/* Floating animation */
@keyframes heroFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* ===== CTA glow buttons ===== */
.glow-btn {
    position: relative;
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.glow-btn::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 0.6rem;
    background: linear-gradient(90deg,
        rgba(255,190,60,0.55),
        rgba(255,120,0,0.40),
        rgba(60,160,255,0.40),
        rgba(255,190,60,0.55));
    filter: blur(10px);
    opacity: 0;
    transition: opacity .15s ease;
    z-index: -1;
}

.glow-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
    filter: brightness(1.02);
}
.glow-btn:hover::before {
    opacity: 1;
}

.glow-btn-outline {
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease;
}
.glow-btn-outline:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

/* Scroll hint */
.scroll-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 64px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    background: rgba(0,0,0,0.15);
    backdrop-filter: blur(6px);
    text-decoration: none;
}
.scroll-hint .mouse {
    width: 6px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.75);
    display: block;
    animation: scrollDot 1.6s infinite;
}
@keyframes scrollDot {
    0% { transform: translateY(-10px); opacity: 0; }
    30% { opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translateY(14px); opacity: 0; }
}

/* ===== Mobile: full-screen game landing feel ===== */
@media (max-width: 576px) {
    .hero-video .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .hero-logo {
        width: 96vw;
    }

    .hero-content .display-6 {
        font-size: 1.45rem;
        line-height: 1.25;
    }

    .hero-content .lead {
        font-size: 1rem;
    }

    .glow-btn, .glow-btn-outline {
        width: 100%;
    }
}


.navbar-glass {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.92));
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.45);
}

.navbar-scrolled {
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.9);
}

.brand-logo-img {
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Navbar Logo - Responsive sizing */
.navbar-logo {
    height: 64px;
    width: auto;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 8px rgba(245, 197, 66, 0.25))
            drop-shadow(0 0 12px rgba(255, 200, 100, 0.15));
}

.navbar-logo:hover {
    filter: drop-shadow(0 2px 12px rgba(245, 197, 66, 0.4))
            drop-shadow(0 0 18px rgba(255, 200, 100, 0.25));
    transform: scale(1.02);
}

.navbar-nav .nav-link {
    font-weight: 500;
    color: #e5e7eb;
    position: relative;
    font-size: 0.95rem;
}

    .navbar-nav .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, #4ade80, #38bdf8);
        border-radius: 999px;
        transition: width 0.25s ease;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus,
    .navbar-nav .nav-link.active {
        color: #f9fafb;
    }

        .navbar-nav .nav-link:hover::after,
        .navbar-nav .nav-link.active::after {
            width: 100%;
        }

/* Mobile navbar improvements */
@media (max-width: 991px) {
    .navbar-logo {
        height: 52px;
    }
    
    .navbar-collapse {
        margin-top: 1rem;
        padding: 1rem 0;
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        border-radius: 0.375rem;
        transition: all 0.2s ease;
    }
    
    .navbar-nav .nav-link:hover {
        background: rgba(255,255,255,0.08);
    }
    
    .navbar-toggler {
        padding: 0.5rem;
    }
    
    .navbar-toggler:focus {
        box-shadow: none;
    }
}

/* Feature Card Image Effects */
.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(245, 197, 66, 0.2);
}

.feature-img-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.feature-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.feature-card:hover .feature-img {
    transform: scale(1.1);
}

.feature-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(9,10,18,0.2), rgba(9,10,18,0.6));
    transition: opacity 0.3s ease;
}

.feature-card:hover .feature-overlay {
    opacity: 0.5;
}

/* Stagger animation for feature cards */
.stagger-animation > div {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.stagger-animation > div.stagger-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Reward Card Image Effects */
.reward-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.reward-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 45px rgba(245, 197, 66, 0.3);
}

.reward-img-wrapper {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.reward-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.3s ease;
    filter: brightness(0.9);
}

.reward-card:hover .reward-img {
    transform: scale(1.15) rotate(2deg);
    filter: brightness(1.1);
}

.reward-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(245,197,66,0.15), rgba(9,10,18,0.7));
    transition: opacity 0.3s ease;
}

.reward-card:hover .reward-overlay {
    opacity: 0.3;
    background: linear-gradient(135deg, rgba(245,197,66,0.25), rgba(9,10,18,0.5));
}

.reward-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2rem;
    z-index: 10;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    transition: transform 0.3s ease;
}

.reward-card:hover .reward-icon {
    transform: scale(1.2) rotate(10deg);
    filter: drop-shadow(0 4px 8px rgba(245,197,66,0.6));
}

/* Add shine effect on hover */
.reward-img-wrapper::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255,255,255,0.1) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    z-index: 5;
}

.reward-card:hover .reward-img-wrapper::before {
    transform: translateX(100%);
}