:root{
  --bg:#030911; --bg2:#071522; --panel:#081724; --panel2:#0d1e2d;
  --text:#f4f7fb; --muted:#aebbc7; --green:#55ff19; --green2:#1dcc00;
  --orange:#ff8b00; --red:#ff3b16; --blue:#0b8cff; --gold:#f3b62c;
  --line:#263b4c; --shadow:0 18px 55px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--text);font-family:Inter,Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at 8% 15%,rgba(0,116,255,.16),transparent 28%),
    radial-gradient(circle at 92% 25%,rgba(255,67,0,.15),transparent 30%),
    linear-gradient(135deg,#02070c 0%,#071522 54%,#040a11 100%);
  min-height:100vh;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;
  background-image:linear-gradient(30deg,rgba(255,255,255,.025) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.025) 87.5%);
  background-size:38px 38px;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.container{width:min(1120px,92%);margin:auto}
.navbar{
  position:sticky;top:0;z-index:100;min-height:76px;
  background:rgba(2,7,12,.94);border-bottom:1px solid #243746;
  backdrop-filter:blur(14px);
}
.nav-inner{width:min(1220px,94%);margin:auto;min-height:76px;display:flex;align-items:center;gap:28px}
.logo{font-size:25px;font-weight:950;letter-spacing:.5px;white-space:nowrap}
.logo .fire{color:#ff8b00}.logo .ludo{color:#fff}
.logo-mark{display:inline-grid;place-items:center;width:36px;height:36px;margin-right:6px;border-radius:10px;background:linear-gradient(145deg,#ff7b00,#b91600);box-shadow:0 0 22px rgba(255,79,0,.25)}
.nav-links{display:flex;align-items:center;gap:24px;margin-left:auto}
.nav-links a{font-size:13px;font-weight:800;color:#e8edf1;position:relative;padding:30px 0}
.nav-links a:hover,.nav-links a.active{color:var(--green)}
.nav-links a.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--green);box-shadow:0 0 12px rgba(85,255,25,.7)}
.play-btn,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--green);color:#061006!important;font-weight:900;
  padding:13px 20px;border-radius:8px;border:0;cursor:pointer;
  box-shadow:0 0 22px rgba(85,255,25,.18);transition:.2s;
}
.play-btn:hover,.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid #304657;color:#fff;border-radius:8px;padding:9px 12px;font-size:22px}

.hero{
  position:relative;overflow:hidden;text-align:center;
  padding:86px 20px 78px;border-bottom:1px solid #233746;
}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.28}
.hero:before{width:300px;height:300px;left:-100px;top:20px;background:#087cff}
.hero:after{width:320px;height:320px;right:-120px;top:0;background:#ff3b00}
.hero-content{position:relative;z-index:1}
.kicker{color:var(--green);font-weight:900;letter-spacing:3px;font-size:12px}
.hero h1{font-size:clamp(42px,6vw,76px);line-height:1;margin:14px 0;letter-spacing:2px}
.hero p{max-width:720px;margin:0 auto;color:var(--muted);font-size:17px;line-height:1.7}
.hero-actions{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.btn.secondary{background:transparent;color:#fff!important;border:1px solid #43586a;box-shadow:none}

.section{padding:70px 0}
.section-title{text-align:center;margin-bottom:35px}
.section-title .eyebrow{color:var(--green);font-size:12px;font-weight:900;letter-spacing:2px}
.section-title h2{font-size:34px;margin:8px 0}
.section-title p{color:var(--muted);max-width:680px;margin:auto;line-height:1.7}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:linear-gradient(145deg,rgba(12,30,45,.96),rgba(4,13,21,.96));
  border:1px solid var(--line);border-radius:15px;padding:26px;box-shadow:var(--shadow)
}
.icon{width:58px;height:58px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#182d3e,#07111a);border:1px solid #405363;font-size:27px;margin-bottom:18px}
.card h3{margin:0 0 9px;color:#fff}.card p{color:var(--muted);line-height:1.7;margin:0}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.feature-list{display:grid;gap:13px}
.feature-item{display:flex;gap:15px;align-items:flex-start;padding:18px;border:1px solid var(--line);background:rgba(7,20,31,.8);border-radius:12px}
.feature-item .mini{font-size:24px}.feature-item strong{display:block;margin-bottom:5px}.feature-item span{color:var(--muted);line-height:1.6;font-size:14px}

.game-board{
  min-height:360px;border:1px solid #354b5b;border-radius:20px;padding:25px;
  background:
    radial-gradient(circle at 25% 25%,rgba(0,130,255,.3),transparent 25%),
    radial-gradient(circle at 75% 25%,rgba(73,255,25,.16),transparent 25%),
    radial-gradient(circle at 75% 75%,rgba(255,80,0,.25),transparent 25%),
    linear-gradient(145deg,#0c2232,#07101a);
  display:grid;place-items:center;box-shadow:var(--shadow)
}
.board{
  width:min(330px,80vw);aspect-ratio:1;border-radius:18px;padding:18px;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  background:#172532;border:3px solid #536575;box-shadow:0 0 50px rgba(0,0,0,.45)
}
.zone{border-radius:13px;display:grid;place-items:center;font-size:46px;border:2px solid rgba(255,255,255,.16)}
.zone.red{background:linear-gradient(145deg,#6b180c,#2d0905)}
.zone.green{background:linear-gradient(145deg,#175e16,#092c09)}
.zone.blue{background:linear-gradient(145deg,#124f83,#071e34)}
.zone.gold{background:linear-gradient(145deg,#77500d,#342205)}

.policy-wrap{max-width:920px;margin:auto}
.policy-card{display:grid;grid-template-columns:70px 1fr;gap:18px;padding:24px;margin:14px 0;background:linear-gradient(145deg,rgba(10,27,41,.97),rgba(3,12,20,.97));border:1px solid var(--line);border-radius:14px}
.policy-card h2{margin:0 0 8px;color:var(--green);font-size:19px}
.policy-card p,.policy-card li{color:#d6dee5;line-height:1.75}.policy-card ul{margin-bottom:0}
.policy-icon{width:58px;height:58px;border-radius:13px;display:grid;place-items:center;background:#122536;border:1px solid #405363;font-size:27px}
.notice{padding:17px 20px;border-left:4px solid var(--green);background:rgba(85,255,25,.06);border-radius:8px;color:#dce6ed;line-height:1.7;margin-bottom:20px}

.form{max-width:760px;margin:auto}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
label{display:block;font-weight:800;font-size:13px;margin-bottom:7px}
input,textarea{
  width:100%;padding:14px 15px;border:1px solid #344b5d;border-radius:9px;
  background:#06111a;color:#fff;outline:none;font:inherit
}
input:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(85,255,25,.08)}
textarea{min-height:160px;resize:vertical}.field{margin-bottom:17px}

.footer{border-top:1px solid #233746;background:#020910;padding:28px 0;color:#99a8b5}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer-links{display:flex;gap:20px}.footer a:hover{color:var(--green)}
.social{display:flex;gap:9px}.social span{width:34px;height:34px;border:1px solid #40515f;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:13px}

.breadcrumb{padding:18px 0;color:#91a0ac;font-size:13px}.breadcrumb a{color:var(--green)}
.faq{display:grid;gap:12px}.faq details{background:#081724;border:1px solid var(--line);border-radius:11px;padding:18px 20px}.faq summary{cursor:pointer;font-weight:800}.faq p{color:var(--muted);line-height:1.7;margin-bottom:0}

@media(max-width:900px){
  .nav-links{gap:13px}.nav-links a{font-size:11px}.play-btn{padding:11px 13px}
}
@media(max-width:760px){
  .nav-inner{min-height:64px}.navbar{min-height:64px}
  .nav-links{display:none;position:absolute;left:4%;right:4%;top:70px;flex-direction:column;align-items:stretch;gap:0;padding:10px;background:#06111a;border:1px solid #2a4050;border-radius:12px;box-shadow:var(--shadow)}
  .nav-links.open{display:flex}.nav-links a{padding:13px 14px}.nav-links a.active:after{display:none}
  .nav-links .play-btn{margin:5px 8px;text-align:center}
  .menu-btn{display:block}
  .hero{padding:60px 16px}.hero h1{font-size:43px}.hero p{font-size:15px}
  .cards,.feature-grid{grid-template-columns:1fr}
  .section{padding:50px 0}
  .section-title h2{font-size:28px}
  .policy-card{grid-template-columns:1fr;padding:18px}
  .form-row{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;text-align:center}.footer-links{justify-content:center;flex-wrap:wrap}
}