/* CSS Reset and Custom Properties */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
: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-primary:#ffffff;
  --text-secondary:#94a3b8;
  --transition:0.4s ease-out;
  --radius:18px;
}
body{font-family:'Inter',system-ui,sans-serif;font-weight:400;background:linear-gradient(135deg,var(--bg-start),var(--bg-mid),var(--bg-end));min-height:100vh;color:var(--text-primary);line-height:1.6;overflow-x:hidden;}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;}
a{color:var(--primary);text-decoration:none;transition:var(--transition);}
a:hover{color:var(--accent);}
img{max-width:100%;display:block;}
button{cursor:pointer;border:none;font-family:inherit;transition:var(--transition);}

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

/* Header & Navigation */
header{position:sticky;top:0;z-index:1000;background:rgba(12,25,41,0.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--card-border);}
.nav-wrapper{display:flex;align-items:center;justify-content:space-between;padding:16px 0;}
.logo{font-size:1.5rem;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:8px;}
.logo-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;}
nav ul{display:flex;list-style:none;gap:32px;align-items:center;}
nav a{color:var(--text-primary);font-weight:500;position:relative;}
nav a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--primary);transition:var(--transition);}
nav a:hover::after{width:100%;}
.age-badge{background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff;padding:6px 12px;border-radius:20px;font-size:0.85rem;font-weight:700;display:inline-flex;align-items:center;gap:4px;box-shadow:0 4px 12px rgba(220,38,38,0.4);}
.hamburger{display:none;flex-direction:column;gap:4px;background:transparent;padding:8px;}
.hamburger span{width:28px;height:3px;background:var(--primary);border-radius:2px;transition:var(--transition);}
.mobile-menu{display:none;}

/* Hero Section */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;background-image:url('https://images.unsplash.com/photo-1596838132731-3301c3fd4317?w=1600');background-size:cover;background-position:center;}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(12,25,41,0.92),rgba(15,40,71,0.88));}
.hero-content{position:relative;z-index:2;text-align:center;max-width:800px;margin:0 auto;}
.hero-badge{display:inline-block;margin-bottom:20px;}
.hero h1{font-size:clamp(2.5rem,6vw,4rem);margin-bottom:24px;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero p{font-size:1.25rem;color:var(--text-secondary);margin-bottom:32px;max-width:600px;margin-left:auto;margin-right:auto;}
.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:16px;}
.btn{padding:16px 32px;border-radius:var(--radius);font-weight:600;font-size:1rem;position:relative;overflow:hidden;transition:var(--transition);}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;box-shadow:0 8px 24px var(--primary-glow);}
.btn-primary:hover{transform:scale(1.03);box-shadow:0 12px 32px var(--primary-glow);}
.btn-secondary{background:var(--card-bg);border:2px solid var(--card-border);color:var(--text-primary);}
.btn-secondary:hover{border-color:var(--primary);background:rgba(56,189,248,0.1);}
.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.6s;}
.btn:hover::before{left:100%;}
.hero-disclaimer{font-size:0.9rem;color:var(--text-secondary);margin-top:8px;}

/* Section Styles */
section{padding:100px 0;}
.section-header{text-align:center;margin-bottom:60px;}
.section-header h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:16px;display:inline-block;position:relative;}
.section-header p{font-size:1.1rem;color:var(--text-secondary);max-width:600px;margin:0 auto;}

/* Game Cards */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:32px;margin-top:48px;}
.game-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);overflow:hidden;transition:var(--transition);position:relative;backdrop-filter:blur(8px);}
.game-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--primary-glow),var(--accent-glow));opacity:0;transition:var(--transition);z-index:0;}
.game-card:hover{transform:scale(1.03);border-color:var(--primary);box-shadow:0 12px 40px var(--primary-glow);}
.game-card:hover::before{opacity:0.15;}
.game-image-container{position:relative;width:100%;padding-top:75%;overflow:hidden;background:linear-gradient(135deg,var(--bg-mid),var(--bg-start));}
.game-image{position:absolute;top:0;left:0;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;font-size:1.1rem;text-align:center;padding:20px;background:linear-gradient(135deg,var(--primary),var(--secondary));}
.game-info{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;position:relative;z-index:1;}
.game-category{font-size:0.85rem;color:var(--accent);font-weight:600;text-transform:uppercase;}
.game-info .age-badge{font-size:0.75rem;padding:4px 10px;}
.game-title{font-size:1.1rem;padding:0 16px 12px;position:relative;z-index:1;}
.play-demo-btn{width:calc(100% - 32px);margin:0 16px 16px;padding:12px;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:12px;color:#fff;font-weight:600;position:relative;z-index:1;}
.play-demo-btn:hover{box-shadow:0 8px 20px var(--primary-glow);transform:translateY(-2px);}

/* Game Modal */
.game-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.95);z-index:2000;align-items:center;justify-content:center;padding:20px;}
.game-modal.active{display:flex;}
.modal-content{background:var(--bg-mid);border:1px solid var(--card-border);border-radius:var(--radius);width:100%;max-width:1400px;max-height:90vh;display:flex;flex-direction:column;}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--card-border);}
.modal-header h2{font-size:1.5rem;flex:1;}
.close-btn{background:transparent;color:var(--text-primary);font-size:2rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:var(--transition);}
.close-btn:hover{background:rgba(255,255,255,0.1);}
#game-iframe{width:100%;flex:1;border:none;min-height:600px;}
.demo-unavailable{display:none;flex:1;align-items:center;justify-content:center;padding:60px;text-align:center;font-size:1.2rem;color:var(--text-secondary);}

/* Features Grid */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:32px;}
.feature-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:32px;text-align:center;transition:var(--transition);backdrop-filter:blur(8px);}
.feature-card:hover{transform:translateY(-8px);border-color:var(--primary);box-shadow:0 12px 32px var(--primary-glow);}
.feature-icon{font-size:3rem;margin-bottom:20px;}
.feature-card h3{font-size:1.3rem;margin-bottom:12px;}
.feature-card p{color:var(--text-secondary);}

/* Steps */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;margin-top:48px;}
.step-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:32px;position:relative;backdrop-filter:blur(8px);}
.step-number{position:absolute;top:-20px;left:24px;width:50px;height:50px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;box-shadow:0 4px 12px var(--primary-glow);}
.step-card h3{font-size:1.3rem;margin-bottom:12px;margin-top:20px;}
.step-card p{color:var(--text-secondary);}

/* Age Verification Modal */
#age-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.97);z-index:9999;align-items:center;justify-content:center;padding:20px;}
#age-modal.active{display:flex;}
.age-modal-content{background:var(--bg-mid);border:2px solid #dc2626;border-radius:var(--radius);padding:48px;max-width:500px;text-align:center;}
.age-modal-icon{font-size:5rem;margin-bottom:24px;}
.age-modal-content h2{font-size:2rem;margin-bottom:16px;color:#dc2626;}
.age-modal-content p{font-size:1.1rem;color:var(--text-secondary);margin-bottom:32px;}
.age-modal-buttons{display:flex;gap:16px;justify-content:center;}
.btn-danger{background:#dc2626;color:#fff;}
.btn-danger:hover{background:#b91c1c;}

/* Responsible Gaming Section */
.responsible-gaming{background:var(--card-bg);border:2px solid #dc2626;border-radius:var(--radius);padding:48px;text-align:center;backdrop-filter:blur(8px);}
.responsible-gaming .age-badge{font-size:1.2rem;padding:12px 24px;margin-bottom:24px;}
.responsible-gaming h2{font-size:2rem;margin-bottom:16px;}
.responsible-gaming p{font-size:1.1rem;color:var(--text-secondary);max-width:700px;margin:0 auto 24px;}
.responsible-gaming a{color:var(--accent);font-weight:600;text-decoration:underline;}

/* FAQ */
.faq-container{max-width:800px;margin:0 auto;}
.faq-item{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:24px;margin-bottom:16px;backdrop-filter:blur(8px);}
.faq-item h3{font-size:1.2rem;margin-bottom:12px;color:var(--primary);}
.faq-item p{color:var(--text-secondary);}

/* Footer */
footer{background:rgba(12,25,41,0.95);border-top:1px solid var(--card-border);padding:60px 0 30px;}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:48px;margin-bottom:48px;}
.footer-section h3{font-size:1.3rem;margin-bottom:20px;}
.footer-section ul{list-style:none;}
.footer-section li{margin-bottom:12px;}
.footer-disclaimer{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:24px;margin-bottom:32px;text-align:center;backdrop-filter:blur(8px);}
.footer-disclaimer .age-badge{font-size:1.5rem;padding:12px 24px;margin-bottom:16px;}
.footer-disclaimer p{color:var(--text-secondary);font-size:0.95rem;}
.footer-bottom{text-align:center;padding-top:24px;border-top:1px solid var(--card-border);color:var(--text-secondary);font-size:0.9rem;}

/* Category Filters */
.category-filters{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:48px;}
.filter-btn{padding:12px 24px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:24px;color:var(--text-primary);font-weight:600;transition:var(--transition);}
.filter-btn:hover,.filter-btn.active{background:linear-gradient(135deg,var(--primary),var(--secondary));border-color:var(--primary);box-shadow:0 4px 12px var(--primary-glow);}

/* Legal Pages */
.legal-page{padding:60px 0;min-height:70vh;}
.legal-content{max-width:900px;margin:0 auto;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:48px;backdrop-filter:blur(8px);}
.legal-content h1{font-size:2.5rem;margin-bottom:32px;color:var(--primary);}
.legal-content h2{font-size:1.8rem;margin-top:32px;margin-bottom:16px;color:var(--accent);}
.legal-content p{margin-bottom:16px;color:var(--text-secondary);line-height:1.8;}
.legal-content ul{margin:16px 0 16px 24px;color:var(--text-secondary);}
.legal-content li{margin-bottom:8px;}

/* Responsive Design */
@media(max-width:768px){
  nav ul{display:none;position:fixed;top:72px;left:0;right:0;background:rgba(12,25,41,0.98);flex-direction:column;padding:24px;gap:16px;border-bottom:1px solid var(--card-border);}
  nav ul.active{display:flex;}
  .hamburger{display:flex;}
  .hero{min-height:80vh;padding:40px 0;}
  .cta-buttons{flex-direction:column;}
  section{padding:60px 0;}
  .games-grid{grid-template-columns:1fr;}
  .features-grid{grid-template-columns:1fr;}
  .steps-grid{grid-template-columns:1fr;}
  .footer-content{grid-template-columns:1fr;}
  #game-iframe{min-height:400px;}
  .modal-content{max-height:95vh;}
  .legal-content{padding:32px 20px;}
}
@media(min-width:769px)and(max-width:1024px){
  .games-grid{grid-template-columns:repeat(2,1fr);}
  .features-grid{grid-template-columns:repeat(2,1fr);}
}

/* Animations */
@keyframes shimmer{0%{background-position:200%}100%{background-position:-200%}}
.btn-primary::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.3)50%,transparent 100%);background-size:200% 100%;animation:shimmer 3s infinite;}