@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --emerald:#00e676;
  --emerald-dark:#00c853;
  --teal:#1de9b6;
  --bg:#060e0a;
  --surface:#0d1a14;
  --card:#11241a;
  --text:#d5efe2;
  --dim:#7aaa95;
  --glow:rgba(0,230,118,.2);
}

html{scroll-behavior:smooth}
body{font-family:'Orbitron',sans-serif;background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden}
a{color:var(--teal);text-decoration:none;transition:.2s}
a:hover{color:var(--emerald)}

/* HEADER */
.hdr{position:sticky;top:0;z-index:900;background:rgba(6,14,10,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--glow)}
.hdr-wrap{max-width:1440px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:62px;padding:0 1.5rem}
.logo-mark{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.3rem;color:var(--emerald);letter-spacing:3px;text-transform:uppercase}
.logo-mark svg{width:32px;height:32px}
.nav-list{list-style:none;display:flex;gap:1.6rem}
.nav-list a{font-size:.85rem;font-weight:500;color:var(--dim);letter-spacing:1px;text-transform:uppercase}
.nav-list a:hover,.nav-list a.on{color:var(--emerald)}
.ham{display:none;background:none;border:none;cursor:pointer;padding:4px}
.ham span{display:block;width:22px;height:2px;background:var(--emerald);margin:5px 0;border-radius:1px;transition:.3s}

/* HERO */
.main-hero{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:5rem 1.5rem 3rem;
  background:radial-gradient(ellipse at center top,rgba(0,230,118,.08),transparent 60%),var(--bg);
  min-height:480px;
}
.main-hero h1{font-size:2.6rem;font-weight:800;letter-spacing:2px;margin-bottom:1rem;color:var(--emerald)}
.main-hero p{font-size:1rem;color:var(--dim);max-width:660px;margin-bottom:2rem}
.btn-go{
  display:inline-block;padding:.8rem 2.4rem;border:2px solid var(--emerald);color:var(--emerald);
  font-family:inherit;font-weight:600;font-size:.95rem;border-radius:4px;
  letter-spacing:2px;text-transform:uppercase;cursor:pointer;background:transparent;
  transition:.25s;
}
.btn-go:hover{background:var(--emerald);color:var(--bg)}

/* ALERTS */
.alert-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  max-width:1440px;margin:2rem auto;padding:0 1.5rem;
}
.alert-box{background:var(--card);border-left:4px solid var(--emerald);padding:1.5rem;border-radius:0 8px 8px 0}
.alert-box h3{font-size:.9rem;color:var(--teal);margin-bottom:.4rem;letter-spacing:1px}
.alert-box p{font-size:.85rem;color:var(--dim)}

/* GAME */
.game-zone{max-width:1440px;margin:3rem auto;padding:0 1.5rem}
.game-zone h2{font-size:1.5rem;color:var(--emerald);margin-bottom:1rem;letter-spacing:2px;text-align:center}
.game-shell{background:#000;border:1px solid var(--glow);border-radius:8px;overflow:hidden}
.game-shell iframe{display:block;width:100%;height:600px;border:none}

/* ABOUT GRID */
.about-grid{
  max-width:1440px;margin:4rem auto;padding:0 1.5rem;
  display:grid;grid-template-columns:2fr 1fr;gap:2.5rem;align-items:start;
}
.about-grid h2{font-size:1.5rem;color:var(--teal);margin-bottom:.8rem;letter-spacing:1px}
.about-grid p{color:var(--dim);font-size:.95rem;margin-bottom:.8rem}
.side-panel{display:flex;flex-direction:column;gap:1rem}
.side-card{background:var(--card);padding:1.4rem;border-radius:8px;border:1px solid var(--glow)}
.side-card h4{color:var(--emerald);font-size:.85rem;margin-bottom:.3rem;letter-spacing:1px}
.side-card p{color:var(--dim);font-size:.82rem}

/* FEATURES */
.feat-section{background:var(--surface);padding:4rem 1.5rem}
.feat-section h2{text-align:center;font-size:1.5rem;color:var(--emerald);letter-spacing:2px;margin-bottom:2rem}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;max-width:1440px;margin:0 auto}
.feat-item{background:var(--card);padding:2rem 1.5rem;border-radius:8px;border-top:3px solid var(--emerald);transition:.2s}
.feat-item:hover{transform:translateY(-3px)}
.feat-item .ic{font-size:1.6rem;margin-bottom:.6rem}
.feat-item h3{font-size:.9rem;color:var(--teal);margin-bottom:.4rem;letter-spacing:1px}
.feat-item p{font-size:.82rem;color:var(--dim)}

/* PAGE BODY */
.pg{max-width:900px;margin:3rem auto;padding:0 1.5rem}
.pg h1{font-size:2rem;color:var(--emerald);margin-bottom:1rem;letter-spacing:1px}
.pg h2{font-size:1.2rem;color:var(--teal);margin:1.8rem 0 .6rem;letter-spacing:1px}
.pg p,.pg li{color:var(--dim);font-size:.95rem;margin-bottom:.7rem}
.pg ul{padding-left:1.4rem;margin-bottom:1rem}

/* PLAY */
.play-banner{padding:3rem 1.5rem 1rem;text-align:center}
.play-banner h1{font-size:2rem;color:var(--emerald);letter-spacing:2px;margin-bottom:.4rem}
.play-banner p{color:var(--dim);max-width:640px;margin:0 auto}
.play-area{max-width:1440px;margin:2rem auto 3rem;padding:0 1.5rem}
.play-tips{max-width:800px;margin:0 auto 3rem;padding:0 1.5rem}
.play-tips h2{font-size:1.1rem;color:var(--teal);margin-bottom:.5rem;letter-spacing:1px}
.play-tips p{color:var(--dim);font-size:.9rem}

/* FOOTER */
.ft{background:var(--surface);border-top:1px solid var(--glow);padding:2.5rem 1.5rem;text-align:center}
.ft p{color:var(--dim);font-size:.85rem;margin-bottom:.5rem}
.ft-links{display:flex;justify-content:center;gap:1.8rem;flex-wrap:wrap;margin-bottom:.6rem}
.ft-links a{color:var(--teal);font-size:.85rem}

/* AGE GATE */
.age-screen{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9999;display:flex;align-items:center;justify-content:center}
.age-card{background:var(--card);border:2px solid var(--emerald);border-radius:12px;padding:2.5rem 2rem;text-align:center;max-width:400px;width:90%}
.age-card h2{color:var(--emerald);font-size:1.2rem;letter-spacing:1px;margin-bottom:.8rem}
.age-card p{color:var(--dim);font-size:.9rem;margin-bottom:1.4rem}
.age-acts{display:flex;gap:1rem;justify-content:center}
.age-acts button{padding:.65rem 2rem;font-family:inherit;font-weight:600;font-size:.9rem;border:none;border-radius:4px;cursor:pointer;letter-spacing:1px;transition:.2s}
.btn-ok{background:var(--emerald);color:var(--bg)}
.btn-ok:hover{background:var(--emerald-dark)}
.btn-nope{background:#1a2e24;color:var(--dim)}
.btn-nope:hover{background:#253e34}
.deny-msg{color:#ef5350;font-weight:600;font-size:.85rem;margin-top:.7rem;display:none}

@media(max-width:768px){
  .ham{display:block}
  .nav-list{display:none;position:absolute;top:62px;left:0;right:0;background:rgba(6,14,10,.98);flex-direction:column;padding:1rem;gap:.7rem;border-bottom:1px solid var(--glow)}
  .nav-list.open{display:flex}
  .main-hero h1{font-size:1.8rem}
  .alert-row{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr}
  .game-shell iframe{height:380px}
  .main-hero{min-height:auto;padding:3rem 1rem}
}