/* Reset & Base */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
    line-height:1.6;
    color:#333;
    background:linear-gradient(135deg,#0f1419 0%,#1a2332 50%,#2d3748 100%);
    min-height:100vh;
}
.container{max-width:1200px;margin:0 auto;padding:0 10px}

/* ─────────── Header (identical to other pages) ─────────── */
.main-header{
    background:rgba(15,20,25,.95);
    backdrop-filter:blur(10px);
    border-bottom:2px solid #4299e1;
    position:sticky;top:0;z-index:1000;
}
.header-container{
    max-width:1200px;margin:0 auto;
    display:flex;justify-content:space-between;align-items:center;
    padding:12px 10px;position:relative;
}
.logo-section{flex-shrink:0}
.site-logo{max-width:208px;height:auto;transition:all .3s ease}

/* Navigation */
.primary-navigation{flex:1;margin:0 30px;position:relative}
.nav-menu{display:flex;list-style:none;gap:5px}
.nav-menu li{position:relative}
.nav-menu a {
    color: #e2e8f0;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
}
.nav-menu a:hover{background:#4299e1;color:#fff}

/* Dropdown */
.dropdown-menu{position:relative}
.dropdown-arrow{font-size:12px;margin-left:5px;transition:.3s}
.dropdown-content{
    position:absolute;top:100%;left:0;
    background:#1a2332;min-width:180px;
    box-shadow:0 8px 16px rgba(0,0,0,.3);
    border-radius:8px;list-style:none;z-index:1001;
    display:none;opacity:0;transform:translateY(-10px);transition:.3s;
}
.dropdown-menu.active .dropdown-content{display:block;opacity:1;transform:translateY(0)}
.dropdown-menu.active .dropdown-arrow{transform:rotate(180deg)}
.dropdown-content li{border-bottom:1px solid #2d3748}
.dropdown-content li:last-child{border-bottom:none}
.dropdown-content a{display:block;padding:12px 16px;border-radius:0}
.dropdown-content a:hover{background:rgba(66,153,225,.3)}

/* Auth Buttons */
.auth-buttons{display:flex;gap:12px;flex-shrink:0}
.btn-register,.btn-login{
    padding:10px 20px;border-radius:6px;text-decoration:none;font-weight:600;transition:.3s;white-space:nowrap
}
.btn-register{background:#48bb78;color:#fff}
.btn-register:hover{background:#38a169;transform:translateY(-2px)}
.btn-login{background:transparent;color:#4299e1;border:2px solid #4299e1}
.btn-login:hover{background:#4299e1;color:#fff}

/* ─────────── Mobile Menu Toggle ─────────── */
.mobile-menu-toggle{
    display:none;background:none;border:none;color:#e2e8f0;
    font-size:1.8rem;cursor:pointer;padding:8px;border-radius:4px;transition:.3s;flex-shrink:0;order:3
}
.mobile-menu-toggle:hover{background:rgba(255,255,255,.1)}
.mobile-menu-toggle:focus{outline:none;background:rgba(255,255,255,.1)}

/* Mobile Menu */
.nav-menu.mobile-active{
    display:flex!important;flex-direction:column;position:fixed;top:100%;
    left:0;right:0;width:100vw;background:#1a2332;padding:20px;
    box-shadow:0 4px 20px rgba(0,0,0,.4);z-index:1000;
    max-height:calc(100vh - 80px);overflow-y:auto;border-top:2px solid #4299e1;
    animation:slideDown .3s ease;
}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
.nav-menu.mobile-active li{width:100%;margin-bottom:5px}
.nav-menu.mobile-active a{
    display:block;width:100%;padding:15px 20px;border-radius:8px;
    background:rgba(45,55,72,.5);margin-bottom:5px;transition:.3s
}
.nav-menu.mobile-active a:hover{background:#4299e1;transform:translateX(5px)}
.nav-menu.mobile-active .dropdown-content{
    position:static;display:none;box-shadow:none;
    background:rgba(45,55,72,.3);margin-top:5px;margin-left:20px;border-radius:8px;opacity:1;transform:none;transition:none
}
.nav-menu.mobile-active .dropdown-menu.active .dropdown-content{display:block}
.nav-menu.mobile-active .dropdown-content a{padding:10px 15px;font-size:.9rem}

/* Mobile Menu Overlay */
.mobile-menu-overlay{
    display:none;position:fixed;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,.5);z-index:999
}
.mobile-menu-overlay.active{display:block}
@keyframes slideUp{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}
.nav-menu.mobile-closing{animation:slideUp .3s ease forwards}

/* ────────────────────────────────────────────────────────────────────────────
   HERO
──────────────────────────────────────────────────────────────────────────── */
.luckyjet-hero{padding:80px 0;background:linear-gradient(135deg,#0f1419 0%,#1a2332 50%,#2d3748 100%);position:relative;overflow:hidden}
.luckyjet-hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 70% 30%,rgba(72,187,120,.1) 0%,transparent 60%);pointer-events:none}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-content h1{font-size:3.5rem;color:#e2e8f0;margin-bottom:25px;line-height:1.2}
.hero-description{font-size:1.3rem;color:#cbd5e0;margin-bottom:35px;line-height:1.6}
.promo-highlight{background:linear-gradient(135deg,#48bb78,#38a169);padding:25px;border-radius:15px;margin-bottom:35px;box-shadow:0 10px 30px rgba(72,187,120,.3)}
.promo-label{color:#fff;font-weight:700;font-size:1.1rem;display:block;margin-bottom:8px}
.promo-code-container{display:flex;gap:10px;flex-wrap:wrap}
#promoCode{flex:1;padding:10px 15px;border:none;border-radius:8px;font-weight:bold;background:#fff;color:#2d3748;min-width:150px}
.copy-button{padding:10px 20px;background:#2d3748;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:all .3s ease}
.copy-button:hover{background:#1a202c;transform:translateY(-2px)}
.cta-buttons{display:flex;gap:15px;flex-wrap:wrap}
.btn-primary,.btn-secondary{padding:15px 30px;border-radius:8px;text-decoration:none;font-weight:600;transition:all .3s ease;display:inline-block}
.btn-primary{background:#4299e1;color:#fff}
.btn-primary:hover{background:#3182ce;transform:translateY(-3px);box-shadow:0 10px 20px rgba(66,153,225,.3)}
.btn-secondary{background:transparent;color:#4299e1;border:2px solid #4299e1}
.btn-secondary:hover{background:#4299e1;color:#fff}
.hero-image{width:100%;border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.3)}

/* ────────────────────────────────────────────────────────────────────────────
   GAME FEATURES
──────────────────────────────────────────────────────────────────────────── */
.game-features{padding:80px 0;background:rgba(26,35,50,.8)}
.game-features h2{text-align:center;color:#e2e8f0;font-size:2.5rem;margin-bottom:50px}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}
.feature-card{background:linear-gradient(135deg,#2d3748,#4a5568);padding:35px;border-radius:16px;text-align:center;transition:transform .3s ease;border:2px solid transparent}
.feature-card:hover{transform:translateY(-10px);border-color:#4299e1;box-shadow:0 15px 35px rgba(66,153,225,.2)}
.feature-icon{font-size:3.5rem;margin-bottom:20px;display:block}
.feature-card h3{color:#4299e1;margin-bottom:15px;font-size:1.4rem}
.feature-card p{color:#cbd5e0;line-height:1.6}

/* ────────────────────────────────────────────────────────────────────────────
   HOW TO PLAY
──────────────────────────────────────────────────────────────────────────── */
.how-to-play{padding:80px 0}
.how-to-play h2{text-align:center;color:#e2e8f0;font-size:2.5rem;margin-bottom:20px}
.steps-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-bottom:50px}
.step-item{display:flex;gap:20px;align-items:flex-start}
.step-number{background:#4299e1;color:#fff;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:bold;flex-shrink:0}
.step-content h3{color:#e2e8f0;margin-bottom:15px;font-size:1.3rem}
.step-content p{color:#cbd5e0;line-height:1.6}

/* ────────────────────────────────────────────────────────────────────────────
   STRATEGIES
──────────────────────────────────────────────────────────────────────────── */
.strategies{padding:80px 0;background:rgba(15,20,25,.9)}
.strategies h2{text-align:center;color:#e2e8f0;font-size:2.5rem;margin-bottom:50px}
.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}
.tip-card{background:linear-gradient(135deg,#4a5568,#2d3748);padding:35px;border-radius:16px;text-align:center;transition:transform .3s ease;border:2px solid transparent}
.tip-card:hover{transform:translateY(-10px);border-color:#48bb78;box-shadow:0 15px 35px rgba(72,187,120,.2)}
.tip-icon{font-size:3.5rem;margin-bottom:20px;display:block}
.tip-card h3{color:#48bb78;margin-bottom:15px;font-size:1.4rem}
.tip-card p{color:#cbd5e0;line-height:1.6}

/* ────────────────────────────────────────────────────────────────────────────
   FAQ
──────────────────────────────────────────────────────────────────────────── */
.faq{padding:80px 0}
.faq h2{text-align:center;color:#e2e8f0;font-size:2.5rem;margin-bottom:50px}
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:25px}
.faq-item{background:rgba(45,55,72,.8);padding:25px;border-radius:12px;border-left:4px solid #4299e1}
.faq-item h3{color:#4299e1;margin-bottom:12px;font-size:1.2rem}
.faq-item p{color:#cbd5e0;line-height:1.6}

/* ────────────────────────────────────────────────────────────────────────────
   FOOTER (identical styles)
──────────────────────────────────────────────────────────────────────────── */
.main-footer{background:#0f1419;padding:50px 0 20px;border-top:2px solid #4299e1}
.footer-container{max-width:1200px;margin:0 auto;padding:0 10px}
.payment-methods{text-align:center;margin-bottom:40px}
.payment-methods h3{color:#e2e8f0;margin-bottom:20px;font-size:1.5rem}
.payment-icons{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.payment-icons img{filter:grayscale(1);transition:filter .3s ease}
.payment-icons img:hover{filter:grayscale(0)}
.footer-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;margin-bottom:30px}
.footer-column h4{color:#4299e1;margin-bottom:15px}
.footer-column ul{list-style:none}
.footer-column a{color:#a0aec0;text-decoration:none;line-height:2;transition:color .3s ease}
.footer-column a:hover{color:#4299e1}
.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid #2d3748;color:#718096}

/* ────────────────────────────────────────────────────────────────────────────
   KEYFRAMES
──────────────────────────────────────────────────────────────────────────── */
@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE  (same breakpoints as main page – only critical tweaks shown)
──────────────────────────────────────────────────────────────────────────── */
@media(max-width:1080px){
    .mobile-menu-toggle{display:block}
    .nav-menu{display:none}
    .header-container{flex-direction:row;justify-content:space-between;align-items:center}
    .primary-navigation{margin:0;order:2}
    .auth-buttons{order:2;gap:8px}
    .logo-section{order:1}
    .site-logo{max-width:180px}
}
@media(max-width:768px){.hero-inner{grid-template-columns:1fr}.cta-buttons{flex-direction:column}.hero-image{margin-top:20px}
 .site-logo{max-width:150px}
    .btn-register,.btn-login{padding:6px 12px;font-size:.85rem}
    .auth-buttons{gap:6px}
}
@media(max-width:480px){.hero-content h1{font-size:2rem}.hero-description{font-size:1rem}.site-logo{max-width:120px}

  .header-container{padding:8px 10px}
    .site-logo{max-width:120px}
    .btn-register,.btn-login{padding:5px 10px;font-size:.8rem}
    .auth-buttons{gap:4px}
    .mobile-menu-toggle{font-size:1.5rem;padding:6px}

}

@media(max-width:320px){
    .site-logo{max-width:100px}
    .btn-register,.btn-login{padding:4px 8px;font-size:.75rem}
    .mobile-menu-toggle{font-size:1.3rem;padding:5px}
}

/* Optional smooth transitions (kept lightweight) */
@media(prefers-reduced-motion:no-preference){
    .site-logo,.btn-register,.btn-login,.auth-buttons{transition:all .3s ease}
}