/* CSS Reset & Base */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --primary:#38bdf8;
  --primary-glow:rgba(56,189,248,0.4);
  --secondary:#0ea5e9;
  --accent:#22d3ee;
  --accent-glow:rgba(34,211,238,0.3);
  --bg-start:#0c1929;
  --bg-mid:#0f2847;
  --bg-end:#020617;
  --card-bg:rgba(15,40,71,0.6);
  --card-border:rgba(56,189,248,0.2);
  --text-light:#f1f5f9;
  --text-muted:#94a3b8;
}
body{font-family:'Inter',system-ui,sans-serif;font-weight:400;background:linear-gradient(180deg,var(--bg-start),var(--bg-mid),var(--bg-end));color:var(--text-light);line-height:1.6;min-height:100vh;overflow-x:hidden;}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}

/* Header & Navigation */
.header{position:sticky;top:0;z-index:1000;background:rgba(12,25,41,0.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--card-border);box-shadow:0 4px 20px rgba(0,0,0,0.3);}
.nav-container{max-width:1200px;margin:0 auto;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;}
.logo{font-size:1.5rem;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:0.5rem;}
.logo-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;}
.nav-menu{display:flex;gap:2rem;align-items:center;}
.nav-link{color:var(--text-light);transition:color 0.4s ease-out;font-size:0.95rem;}
.nav-link:hover{color:var(--primary);}
.age-badge{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;padding:0.4rem 0.8rem;border-radius:6px;font-weight:700;font-size:0.85rem;box-shadow:0 2px 10px rgba(220,38,38,0.4);}
.mobile-toggle{display:none;background:none;border:none;color:var(--primary);font-size:1.5rem;}

@media(max-width:768px){
  .nav-menu{position:fixed;top:70px;left:0;right:0;flex-direction:column;background:rgba(12,25,41,0.98);backdrop-filter:blur(10px);padding:2rem;gap:1.5rem;transform:translateX(-100%);transition:transform 0.4s ease-out;border-bottom:2px solid var(--card-border);}
  .nav-menu.active{transform:translateX(0);}
  .mobile-toggle{display:block;}
}

/* Age Verification Modal */
.age-modal{position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:10000;opacity:0;visibility:hidden;transition:all 0.4s ease-out;}
.age-modal.active{opacity:1;visibility:visible;}
.age-modal-content{background:var(--card-bg);border:2px solid var(--card-border);border-radius:8px;padding:3rem;max-width:500px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.7);}
.age-modal-icon{font-size:4rem;margin-bottom:1.5rem;color:#dc2626;}
.age-modal h2{font-size:2rem;margin-bottom:1rem;color:var(--primary);}
.age-modal p{color:var(--text-muted);margin-bottom:2rem;font-size:1.1rem;}
.age-modal-buttons{display:flex;gap:1rem;justify-content:center;}
.age-modal-btn{padding:1rem 2rem;border:2px solid;border-radius:6px;font-weight:700;transition:all 0.4s ease-out;font-size:1rem;}
.age-modal-btn.confirm{background:var(--primary);color:#000;border-color:var(--primary);}
.age-modal-btn.confirm:hover{transform:scale(1.03);box-shadow:0 0 20px var(--primary-glow);}
.age-modal-btn.exit{background:transparent;color:var(--text-light);border-color:var(--text-muted);}
.age-modal-btn.exit:hover{border-color:var(--primary);color:var(--primary);}

/* Hero Section */
.hero{min-height:90vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:2rem 1.5rem;}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 50%,var(--primary-glow),transparent 60%),radial-gradient(circle at 70% 50%,var(--accent-glow),transparent 60%);animation:pulse 8s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:0.3;}50%{opacity:0.6;}}
.hero-content{max-width:1200px;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1;}
.hero-text h1{font-size:4rem;margin-bottom:1.5rem;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-text p{font-size:1.3rem;color:var(--text-muted);margin-bottom:2rem;line-height:1.6;}
.hero-buttons{display:flex;gap:1rem;margin-bottom:1rem;}
.btn{padding:1rem 2.5rem;border-radius:6px;font-weight:700;border:2px solid;transition:all 0.4s ease-out;font-size:1rem;display:inline-block;}
.btn-primary{background:var(--primary);color:#000;border-color:var(--primary);}
.btn-primary:hover{transform:scale(1.03);box-shadow:0 0 30px var(--primary-glow);}
.btn-secondary{background:transparent;color:var(--primary);border-color:var(--primary);}
.btn-secondary:hover{background:var(--primary);color:#000;}
.hero-disclaimer{font-size:0.85rem;color:var(--text-muted);display:flex;align-items:center;gap:0.5rem;}
.hero-image{position:relative;aspect-ratio:1;background:linear-gradient(135deg,var(--card-bg),transparent);border-radius:8px;border:1px solid var(--card-border);display:flex;align-items:center;justify-content:center;font-size:3rem;box-shadow:0 0 40px var(--primary-glow);animation:float 6s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-20px);}}

@media(max-width:1024px){
  .hero-content{grid-template-columns:1fr;text-align:center;}
  .hero-text h1{font-size:3rem;}
  .hero-buttons{justify-content:center;}
}
@media(max-width:640px){
  .hero-text h1{font-size:2rem;}
  .hero-buttons{flex-direction:column;}
}

/* Container */
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem;}

/* Section */
.section{padding:5rem 0;}
.section-header{text-align:center;margin-bottom:4rem;}
.section-header h2{font-size:3rem;margin-bottom:1rem;display:inline-flex;align-items:center;gap:1rem;}
.section-header p{font-size:1.2rem;color:var(--text-muted);max-width:700px;margin:0 auto;}

/* Games Grid */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem;}
.game-card{background:var(--card-bg);border:1px solid var(--card-border);border-left:3px solid var(--primary);border-radius:6px;overflow:hidden;transition:all 0.4s ease-out;cursor:pointer;}
.game-card:hover{transform:scale(1.03);box-shadow:0 8px 30px var(--primary-glow);border-left-color:var(--accent);}
.game-image-container{aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,var(--bg-mid),var(--bg-end));position:relative;}
.game-image{width:100%;height:100%;object-fit:cover;}
.game-image-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--primary);font-size:1.2rem;padding:1rem;text-align:center;}
.game-info{display:flex;justify-content:space-between;align-items:center;padding:1rem 1rem 0.5rem;}
.game-category{background:rgba(56,189,248,0.15);color:var(--primary);padding:0.3rem 0.8rem;border-radius:4px;font-size:0.8rem;font-weight:600;}
.game-info .age-badge{font-size:0.7rem;padding:0.3rem 0.6rem;}
.game-title{padding:0 1rem;font-size:1.1rem;margin-bottom:1rem;}
.play-demo-btn{width:calc(100% - 2rem);margin:0 1rem 1rem;padding:0.8rem;background:transparent;border:2px solid var(--primary);color:var(--primary);border-radius:6px;font-weight:700;transition:all 0.4s ease-out;}
.play-demo-btn:hover{background:var(--primary);color:#000;}

/* Game Modal */
.game-modal{position:fixed;inset:0;background:rgba(0,0,0,0.95);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;visibility:hidden;transition:all 0.4s ease-out;}
.game-modal.active{opacity:1;visibility:visible;}
.modal-content{background:var(--card-bg);border:2px solid var(--card-border);border-radius:8px;width:100%;max-width:1400px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.7);}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--card-border);gap:1rem;}
.modal-header h2{font-size:1.5rem;color:var(--primary);flex:1;}
.close-btn{background:transparent;border:none;color:var(--text-light);font-size:2rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all 0.4s ease-out;}
.close-btn:hover{background:rgba(220,38,38,0.2);color:#dc2626;}
#game-iframe{flex:1;border:none;min-height:600px;background:var(--bg-end);}
.demo-unavailable{display:none;flex:1;align-items:center;justify-content:center;min-height:600px;color:var(--text-muted);font-size:1.5rem;}

/* Features Grid */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;}
.feature-card{background:var(--card-bg);border:1px solid var(--card-border);border-left:3px solid var(--primary);border-radius:6px;padding:2rem;transition:all 0.4s ease-out;}
.feature-card:hover{transform:scale(1.03);box-shadow:0 8px 30px var(--primary-glow);}
.feature-icon{font-size:3rem;margin-bottom:1rem;color:var(--primary);}
.feature-card h3{font-size:1.5rem;margin-bottom:1rem;color:var(--primary);}
.feature-card p{color:var(--text-muted);}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;}
.step{text-align:center;padding:2rem;background:var(--card-bg);border:1px solid var(--card-border);border-radius:6px;transition:all 0.4s ease-out;}
.step:hover{transform:scale(1.03);border-color:var(--primary);box-shadow:0 8px 30px var(--primary-glow);}
.step-number{width:60px;height:60px;margin:0 auto 1.5rem;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;color:#000;}
.step h3{font-size:1.3rem;margin-bottom:1rem;color:var(--primary);}
.step p{color:var(--text-muted);}

/* Responsible Gaming */
.responsible-gaming{background:var(--card-bg);border:2px solid #dc2626;border-radius:8px;padding:4rem 2rem;text-align:center;margin:5rem 0;}
.responsible-gaming-icon{font-size:5rem;color:#dc2626;margin-bottom:1.5rem;}
.responsible-gaming h2{font-size:2.5rem;margin-bottom:1.5rem;color:#dc2626;}
.responsible-gaming p{font-size:1.2rem;color:var(--text-muted);max-width:800px;margin:0 auto 2rem;line-height:1.8;}
.responsible-gaming-links{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
.responsible-gaming-links a{color:var(--primary);text-decoration:underline;font-weight:600;transition:color 0.4s ease-out;}
.responsible-gaming-links a:hover{color:var(--accent);}

/* FAQ */
.faq{max-width:800px;margin:0 auto;}
.faq-item{background:var(--card-bg);border:1px solid var(--card-border);border-left:3px solid var(--primary);border-radius:6px;padding:2rem;margin-bottom:1.5rem;transition:all 0.4s ease-out;}
.faq-item:hover{border-left-color:var(--accent);box-shadow:0 4px 20px rgba(0,0,0,0.3);}
.faq-item h3{font-size:1.3rem;margin-bottom:1rem;color:var(--primary);}
.faq-item p{color:var(--text-muted);line-height:1.8;}

/* Footer */
.footer{background:rgba(12,25,41,0.95);border-top:2px solid var(--card-border);padding:4rem 1.5rem 2rem;margin-top:5rem;}
.footer-content{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:3rem;margin-bottom:3rem;}
.footer-section h3{font-size:1.3rem;margin-bottom:1.5rem;color:var(--primary);}
.footer-links{display:flex;flex-direction:column;gap:0.8rem;}
.footer-links a{color:var(--text-muted);transition:color 0.4s ease-out;font-size:0.95rem;}
.footer-links a:hover{color:var(--primary);}
.footer-bottom{max-width:1200px;margin:0 auto;padding-top:2rem;border-top:1px solid var(--card-border);display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;}
.footer-bottom p{color:var(--text-muted);font-size:0.9rem;}
.footer-badge{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;padding:1rem 1.5rem;border-radius:6px;font-weight:700;font-size:1.5rem;box-shadow:0 4px 20px rgba(220,38,38,0.4);}
.footer-disclaimer{background:rgba(220,38,38,0.1);border:1px solid rgba(220,38,38,0.3);border-radius:6px;padding:2rem;margin-bottom:3rem;text-align:center;color:var(--text-muted);}

/* Category Filters */
.category-filters{display:flex;gap:1rem;justify-content:center;margin-bottom:3rem;flex-wrap:wrap;}
.filter-btn{padding:0.8rem 1.5rem;background:transparent;border:2px solid var(--card-border);color:var(--text-light);border-radius:6px;font-weight:600;transition:all 0.4s ease-out;}
.filter-btn:hover,.filter-btn.active{background:var(--primary);color:#000;border-color:var(--primary);}

/* Page Header */
.page-header{padding:4rem 1.5rem 2rem;text-align:center;background:linear-gradient(180deg,transparent,rgba(56,189,248,0.05));}
.page-header h1{font-size:3rem;margin-bottom:1rem;color:var(--primary);}
.page-header p{font-size:1.2rem;color:var(--text-muted);max-width:700px;margin:0 auto;}

/* Content */
.content{max-width:900px;margin:0 auto;padding:3rem 1.5rem;}
.content h2{font-size:2rem;margin:3rem 0 1.5rem;color:var(--primary);}
.content h3{font-size:1.5rem;margin:2rem 0 1rem;color:var(--accent);}
.content p{margin-bottom:1.5rem;color:var(--text-muted);line-height:1.8;}
.content ul{margin:1.5rem 0;padding-left:2rem;color:var(--text-muted);}
.content li{margin-bottom:0.8rem;line-height:1.8;}
.content strong{color:var(--text-light);}

/* Age Reminder Banner */
.age-reminder{background:linear-gradient(135deg,rgba(220,38,38,0.2),rgba(185,28,28,0.2));border:2px solid rgba(220,38,38,0.5);border-radius:6px;padding:1rem 2rem;margin:2rem auto;max-width:1200px;text-align:center;display:flex;align-items:center;justify-content:center;gap:1rem;}
.age-reminder-icon{font-size:2rem;color:#dc2626;}
.age-reminder p{color:var(--text-light);font-weight:600;margin:0;}

/* Shimmer Effect */
@keyframes shimmer{0%{background-position:-1000px 0;}100%{background-position:1000px 0;}}
.shimmer{position:relative;overflow:hidden;}
.shimmer::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);animation:shimmer 3s infinite;pointer-events:none;}