:root{
  --primary:#34d399;
  --primary-glow:rgba(52,211,153,0.4);
  --secondary:#10b981;
  --accent:#a3e635;
  --accent-glow:rgba(163,230,53,0.3);
  --bg-start:#052e16;
  --bg-mid:#14532d;
  --bg-end:#022c22;
  --card-bg:rgba(20,83,45,0.6);
  --card-border:rgba(52,211,153,0.2);
  --heading-font:'Poppins',system-ui,sans-serif;
  --body-font:'Nunito',system-ui,sans-serif;
  --mono-font:'Roboto Mono',monospace;
  --radius-lg:20px;
  --radius-xl:24px;
  --transition:0.2s ease-in-out;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:#e6fff3; background:linear-gradient(120deg,var(--bg-start),var(--bg-mid),var(--bg-end));
  background-attachment:fixed; font-family:var(--body-font); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:var(--primary); text-decoration:none; transition:color var(--transition)}
a:hover{color:var(--accent)}
.container{width:100%; max-width:1200px; margin:0 auto; padding:0 20px}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.1) blur(10px);}
.site-header:before{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,46,22,.7),rgba(20,83,45,.5),rgba(2,44,34,.7)); z-index:-1;}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; min-height:64px}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; color:#e7fff8}
.logo .logo-mark{font-size:20px}
.logo .logo-text{font-family:var(--heading-font); letter-spacing:.2px}
.main-nav{display:flex; align-items:center; gap:16px}
.nav-toggle{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; border:1px solid var(--card-border); background:var(--card-bg); color:#ecfff8; cursor:pointer; transition:transform var(--transition), background var(--transition)}
.nav-toggle:hover{transform:scale(1.01); background:rgba(20,83,45,.75)}
.nav-list{list-style:none; margin:0; padding:0; position:fixed; inset:auto 0 0 0; background:linear-gradient(180deg,rgba(5,46,22,.98),rgba(2,44,34,.95)); transform:translateY(100%); transition:transform var(--transition); display:flex; flex-direction:column; gap:8px; padding:16px; border-top:1px solid var(--card-border)}
.nav-list a{display:block; padding:12px 14px; border-radius:12px; color:#dbffef}
.nav-list a.active{background:rgba(52,211,153,.08); border:1px solid var(--card-border)}
.main-nav.open #navMenu{transform:translateY(0)}
.header-age .age-badge{margin-left:8px}
@media(min-width:768px){
  .nav-toggle{display:none}
  .nav-list{position:static; transform:none; flex-direction:row; background:transparent; border:none; padding:0}
}

/* Hero */
.hero{position:relative; min-height:92vh; display:flex; align-items:center;}
.particles{position:absolute; inset:0; width:100%; height:100%; opacity:.25}
.hero-inner{display:grid; gap:28px; align-items:center}
.hero-copy{padding:28px; border-radius:var(--radius-xl)}
.hero-copy h1{font-family:var(--heading-font); font-size:clamp(32px,5vw,56px); margin:0 0 10px}
.hero-copy .subtitle{opacity:.9; font-size:clamp(16px,2.3vw,20px)}
.hero .corner-age{position:absolute; top:16px; right:16px}
.hero-floats{display:none}
@media(min-width:1024px){
  .hero-inner{grid-template-columns:1.2fr .8fr}
  .hero-floats{display:grid; gap:16px}
}
.float-card{padding:16px 18px; border-radius:var(--radius-lg); display:flex; align-items:center; gap:12px; transform:translateY(0); animation:float 6s ease-in-out infinite}
.float-card:nth-child(2){animation-delay:1s}
.float-card:nth-child(3){animation-delay:2s}
.float-icon{font-size:22px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.floating-cta{position:fixed; right:18px; bottom:18px; z-index:40}

/* Glass */
.glass{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-xl); backdrop-filter:blur(12px); box-shadow:0 10px 30px rgba(0,0,0,.25)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition)}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--secondary)); color:#051b12}
.btn-primary:hover{transform:scale(1.01)}
.btn-secondary{background:rgba(52,211,153,.12); color:#dffff2; border-color:var(--card-border)}
.btn-secondary:hover{transform:scale(1.01); background:rgba(52,211,153,.18)}
.btn-ghost{background:transparent; color:#e9fff7; border:1px solid var(--card-border)}
.btn-ghost:hover{transform:scale(1.01); background:rgba(20,83,45,.5)}

.cta-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:16px 0 8px}
.cta-age-note{opacity:.8}

/* Sections */
.section{padding:90px 0}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 24px}
.section h2{font-family:var(--heading-font); margin:0}
.section-footnote{display:flex; align-items:center; gap:10px; opacity:.9; margin-top:18px}

/* Games Grid */
.games-grid{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:640px){.games-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.games-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1280px){.games-grid{grid-template-columns:repeat(5,1fr)}}

.game-card{position:relative; display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:var(--radius-lg); background:var(--card-bg); border:1px solid var(--card-border); transition:transform var(--transition), border-color var(--transition);}
.game-card:hover{transform:scale(1.01); border-color:rgba(163,230,53,.35)}
.game-image-container{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:16/10; background:linear-gradient(180deg,rgba(52,211,153,.12),rgba(163,230,53,.12))}
.game-image{width:100%; height:100%; object-fit:cover}
.game-image-fallback{position:absolute; inset:0; display:none; align-items:center; justify-content:center; padding:12px; text-align:center; background:linear-gradient(135deg,rgba(52,211,153,.18),rgba(163,230,53,.18)); font-weight:700}
.game-info{display:flex; justify-content:space-between; align-items:center; gap:10px}
.game-category{font-family:var(--mono-font); font-size:12px; color:#c9ffe9; background:rgba(52,211,153,.12); border:1px solid var(--card-border); border-radius:999px; padding:6px 10px}
.game-title{font-family:var(--heading-font); font-size:16px; margin:2px 0 6px}
.play-demo-btn{align-self:flex-start; padding:10px 14px; border-radius:999px; background:linear-gradient(90deg,var(--primary),var(--secondary)); color:#04170f; border:none; cursor:pointer; transition:transform var(--transition)}
.play-demo-btn:hover{transform:scale(1.01)}

/* Chips & Filters */
.filter-row{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 16px}
.chip{padding:8px 12px; border-radius:999px; background:rgba(52,211,153,.12); color:#eafff7; border:1px solid var(--card-border); cursor:pointer; transition:transform var(--transition), background var(--transition)}
.chip:hover{transform:scale(1.01)}
.chip.active{background:rgba(52,211,153,.22)}

/* Steps */
.steps-grid{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:768px){.steps-grid{grid-template-columns:repeat(3,1fr)}}
.step-card{padding:18px}
.step-icon{font-size:22px; margin-bottom:8px}

/* Features */
.features-grid{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:768px){.features-grid{grid-template-columns:repeat(3,1fr)}}
.feature-card{padding:18px}

/* Responsible preview */
.responsible{display:grid; grid-template-columns:56px 1fr; gap:16px; padding:18px}
.rg-icon{display:flex; align-items:center; justify-content:center; background:rgba(163,230,53,.15); border:1px solid var(--card-border); border-radius:14px; font-weight:800}
.rg-links{display:flex; align-items:center; gap:10px; margin-top:10px}

/* FAQ */
.faq-grid{display:grid; gap:12px}
.faq-item{padding:16px; border-radius:16px}
.faq-item summary{cursor:pointer}

/* Page hero, legal */
.page-hero{padding:70px 0 30px}
.page-hero h1{font-family:var(--heading-font); margin:0 0 6px}
.age-banner{display:flex; align-items:center; gap:12px; padding:12px 14px; margin-top:12px}
.legal{padding:20px; line-height:1.75}
.legal h2{font-family:var(--heading-font)}

/* Responsible page */
.rg-hero{display:flex; align-items:center; gap:16px; padding:20px}
.rg-hero-age{min-width:64px; min-height:64px; display:inline-flex; align-items:center; justify-content:center}
.rg-grid{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:768px){.rg-grid{grid-template-columns:repeat(2,1fr)}}
.resources{padding:18px}
.resources ul{margin:0 0 10px 18px}
.contact{padding:18px}

/* Disclaimer strip */
.disclaimer-strip{padding:30px 0}
.strip-inner{display:flex; gap:12px; align-items:center; padding:14px 16px}

/* Footer */
.site-footer{padding:40px 0 60px}
.footer-inner{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center}
.footer-links{display:flex; gap:14px; flex-wrap:wrap}
.footer-disclaimer{max-width:800px}

/* Age Gate */
.age-gate{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:100}
.age-gate.active{display:flex}
.age-gate__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6)}
.age-gate__dialog{position:relative; z-index:1; width:min(560px,92vw); padding:24px; border-radius:var(--radius-xl); background:var(--card-bg); border:1px solid var(--card-border); text-align:center}
.age-gate__icon{width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:rgba(163,230,53,.15); border:1px solid var(--card-border); font-weight:800; margin:0 auto 12px}
.age-gate__actions{display:flex; gap:10px; justify-content:center; margin:16px 0 8px}
.age-gate__note{opacity:.8}

/* Age badge */
.age-badge{display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; background:rgba(163,230,53,.16); border:1px solid var(--card-border); color:#eafff7; font-weight:700}
.age-badge--xl{font-size:18px; padding:10px 14px}

/* Modal */
.game-modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:60}
.game-modal.active{display:flex}
.game-modal:before{content:""; position:absolute; inset:0; background:rgba(0,0,0,.7)}
.modal-content{position:relative; z-index:1; width:min(1100px,96vw); border-radius:var(--radius-xl); padding:16px}
.modal-header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.modal-header h2{font-family:var(--heading-font); margin:0}
.close-btn{background:transparent; color:#eafff7; border:1px solid var(--card-border); border-radius:12px; width:36px; height:36px; cursor:pointer; transition:transform var(--transition)}
.close-btn:hover{transform:scale(1.01)}
#game-iframe{width:100%; height:min(70vh,700px); border:1px solid var(--card-border); border-radius:14px; background:rgba(0,0,0,.3)}
.demo-unavailable{display:none; align-items:center; justify-content:center; height:240px; border:1px dashed var(--card-border); border-radius:14px; background:rgba(0,0,0,.2)}

/* Utility */
.subtitle{opacity:.92}

/* Smooth focus */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}