:root{
  --primary:#f97316;
  --primary-glow:rgba(249,115,22,0.4);
  --secondary:#ea580c;
  --accent:#fdba74;
  --accent-glow:rgba(253,186,116,0.3);
  --bg-start:#1a0f00;
  --bg-mid:#3d2200;
  --bg-end:#0f0800;
  --card-bg:rgba(61,34,0,0.6);
  --card-border:rgba(249,115,22,0.2);
  --radius:14px;
  --speed:0.2s;
  --ease:ease-in-out;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Open Sans', system-ui, sans-serif;
  color:#f8fafc;
  background: linear-gradient(120deg, var(--bg-start), var(--bg-mid) 50%, var(--bg-end));
  background-attachment: fixed;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none; transition:color var(--speed) var(--ease)}
a:hover{color:var(--primary)}
.container{width:100%; max-width:1200px; margin:0 auto; padding:0 20px}

/* Header */
.site-header{position:sticky; top:0; z-index:1000; backdrop-filter: blur(10px); background:rgba(15,8,0,0.5); border-bottom:1px solid var(--card-border)}
.nav-container{display:flex; align-items:center; justify-content:space-between; padding:14px 20px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-family:'Montserrat', system-ui, sans-serif; letter-spacing:0.3px}
.logo-icon{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#0f0800; font-weight:800}
.logo-text{font-weight:800}
.logo-text span{color:var(--primary)}
.main-nav{display:flex; align-items:center; gap:16px}
#nav-links{list-style:none; display:flex; gap:18px; margin:0; padding:0}
#nav-links a{padding:8px 10px; border-radius:10px; color:#e5e7eb}
#nav-links a:hover, #nav-links a.active{background:rgba(249,115,22,0.1); color:#fff}
.hamburger{display:inline-flex; flex-direction:column; gap:4px; width:40px; height:40px; border:1px solid var(--card-border); background:var(--card-bg); border-radius:12px; align-items:center; justify-content:center; cursor:pointer; transition:transform var(--speed) var(--ease)}
.hamburger:hover{transform:scale(1.01)}
.hamburger span{width:18px; height:2px; background:#fff}
@media(min-width:768px){.hamburger{display:none}}
@media(max-width:767px){#nav-links{position:fixed; top:68px; right:16px; left:16px; background:rgba(15,8,0,0.9); border:1px solid var(--card-border); border-radius:12px; padding:16px; flex-direction:column; display:none}
#nav-links.open{display:flex}}
.header-age .age-badge.large{font-size:14px}

/* Age badges */
.age-badge{display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#0f0800; padding:6px 10px; border-radius:999px; font-weight:800; font-family:'Montserrat',system-ui,sans-serif; border:1px solid var(--card-border); box-shadow: 6px 6px 18px rgba(0,0,0,0.5), -4px -4px 14px rgba(255,255,255,0.04)}
.age-badge.large{padding:8px 12px}
.age-badge.huge{font-size:18px; padding:10px 16px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:12px; border:1px solid var(--card-border); cursor:pointer; transition:transform var(--speed) var(--ease), background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease); font-weight:600}
.btn:hover{transform:scale(1.01)}
.btn:active{transform:scale(0.99)}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#0f0800}
.btn.secondary{background:rgba(249,115,22,0.12); color:#fff}
.btn.tertiary{background:var(--card-bg); color:#fff}
.btn.ghost{background:transparent; color:#fff}

/* Hero */
.hero{position:relative; min-height:86vh; display:grid; place-items:center; overflow:hidden}
.hero-bg-layer{position:absolute; inset:0; background:
  radial-gradient(60% 60% at 20% 20%, rgba(249,115,22,0.12), transparent 60%),
  radial-gradient(50% 50% at 80% 30%, rgba(253,186,116,0.10), transparent 60%),
  linear-gradient(120deg, var(--bg-start), var(--bg-mid) 50%, var(--bg-end));
  mask:linear-gradient(#000,transparent 130%);
}
.hero-inner{position:relative; z-index:1}
.hero-content{max-width:820px; margin:0 auto; text-align:center; padding:40px 0}
.hero h1{font-family:'Montserrat', system-ui, sans-serif; font-size:clamp(34px,5vw,64px); margin:0 0 12px; letter-spacing:0.5px}
.hero .subtitle{color:#e5e7eb; font-size:clamp(16px,2.5vw,20px); margin:0 0 22px}
.hero-ctas{display:flex; gap:14px; justify-content:center}
.cta-note{margin-top:10px; font-size:12px; color:#cbd5e1}
.corner-age{position:absolute; top:18px; right:18px}

/* Sections */
.section{padding:64px 0}
.section-header .header-row{display:flex; align-items:center; gap:12px}
.section-header h2, .section-header h1{font-family:'Montserrat', system-ui, sans-serif; margin:0}
.section-sub{color:#e5e7eb; margin-top:8px}
.section-disclaimer{margin-top:18px; font-size:12px; color:#cbd5e1}

/* Games grid */
.games-grid{display:grid; gap:18px; 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)}}
.game-card{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); overflow:hidden; position:relative; box-shadow: 10px 10px 28px rgba(0,0,0,0.55), -8px -8px 20px rgba(255,255,255,0.03); transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease)}
.game-card:hover{transform:translateY(-2px) scale(1.01)}
.game-image-container{position:relative; aspect-ratio:16/9; background:linear-gradient(135deg, rgba(249,115,22,0.08), rgba(253,186,116,0.06)); display:grid; place-items:center}
.game-image{width:100%; height:100%; object-fit:cover}
.game-image-fallback{position:absolute; inset:0; display:none; align-items:center; justify-content:center; text-align:center; padding:10px; background:
 linear-gradient(120deg, rgba(249,115,22,0.15), rgba(253,186,116,0.12)),
 repeating-linear-gradient(45deg, rgba(249,115,22,0.06) 0 10px, rgba(253,186,116,0.06) 10px 20px);
  color:#fff; font-weight:800; font-family:'Montserrat', system-ui, sans-serif}
.game-info{display:flex; align-items:center; justify-content:space-between; padding:10px 12px}
.game-category{font-size:12px; color:#fff; background:rgba(249,115,22,0.15); padding:6px 10px; border-radius:999px; border:1px solid var(--card-border)}
.game-title{margin:0; padding:0 12px 14px; font-family:'Montserrat', system-ui, sans-serif}
.play-demo-btn{margin:0 12px 14px; width:calc(100% - 24px)}

/* Modal */
.game-modal{position:fixed; inset:0; background:rgba(0,0,0,0.7); display:none; align-items:center; justify-content:center; padding:20px; z-index:1200}
.game-modal.active{display:flex}
.modal-content{width:100%; max-width:1000px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); box-shadow: 16px 16px 40px rgba(0,0,0,0.6), -10px -10px 24px rgba(255,255,255,0.03); overflow:hidden}
.modal-header{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--card-border)}
.modal-header h2{font-family:'Montserrat', system-ui, sans-serif; margin:0; font-size:18px}
.close-btn{background:transparent; color:#fff; border:none; font-size:28px; line-height:1; cursor:pointer; padding:6px; border-radius:10px; transition:transform var(--speed) var(--ease)}
.close-btn:hover{transform:scale(1.01)}
#game-iframe{width:100%; height:min(70vh,680px); border:0; display:block; background:#000}
.demo-unavailable{display:none; align-items:center; justify-content:center; padding:40px}

/* How/Features Cards */
.how-grid, .features-grid, .responsible-grid, .rg-grid, .faq-grid{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:768px){.how-grid,.features-grid,.responsible-grid,.rg-grid,.faq-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.features-grid{grid-template-columns:repeat(3,1fr)}.rg-grid{grid-template-columns:repeat(2,1fr)}}
.how-card, .feature-card, .responsible-card, .rg-card, .faq-item{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); padding:18px; box-shadow: 10px 10px 28px rgba(0,0,0,0.55), -8px -8px 20px rgba(255,255,255,0.03)}
.how-icon{font-size:26px; margin-bottom:8px}

/* FAQ */
.faq-item summary{cursor:pointer; font-weight:600}
.faq-item p{color:#e5e7eb}

/* Banner */
.banner{padding:18px 0; border-bottom:1px solid var(--card-border); background:rgba(61,34,0,0.35)}
.banner-inner{display:flex; align-items:center; gap:12px}

/* Footer */
.site-footer{border-top:1px solid var(--card-border); padding:32px 0 40px; background:rgba(15,8,0,0.5)}
.footer-inner{display:grid; gap:18px; align-items:start}
@media(min-width:768px){.footer-inner{grid-template-columns:auto 1fr auto; align-items:center}}
.footer-logo{display:flex; align-items:center; gap:10px}
.footer-links{display:flex; gap:14px; flex-wrap:wrap}
.footer-links a{color:#e5e7eb}
.footer-links a:hover{color:#fff}
.footer-age{text-align:left}
.footer-disclaimer{font-size:12px; color:#cbd5e1; margin:8px 0}

/* Age Modal */
.age-modal{position:fixed; inset:0; background:rgba(0,0,0,0.75); display:flex; align-items:center; justify-content:center; padding:20px; z-index:1500}
.age-modal-content{width:100%; max-width:520px; text-align:center; background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; padding:24px; box-shadow: 18px 18px 44px rgba(0,0,0,0.6), -12px -12px 28px rgba(255,255,255,0.03)}
.age-icon{font-family:'Montserrat', system-ui, sans-serif; font-weight:800; font-size:28px; display:inline-grid; place-items:center; width:68px; height:68px; border-radius:16px; background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#0f0800; margin:0 auto 10px}
.age-actions{display:flex; gap:10px; justify-content:center; margin-top:12px}

/* Filters */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.filter-btn{padding:8px 12px; border-radius:12px; border:1px solid var(--card-border); background:var(--card-bg); color:#fff; cursor:pointer; transition:transform var(--speed) var(--ease), background var(--speed) var(--ease)}
.filter-btn:hover{transform:scale(1.01)}
.filter-btn.active{background:rgba(249,115,22,0.15)}

/* Utility */
.policy h3{font-family:'Montserrat', system-ui, sans-serif}
.section h2, .section h1, .game-title{letter-spacing:0.3px}