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

:root{
  --bg: #0d1420;           /* deep navy */
  --bg-soft:#111b2a;
  --card:#152235;
  --text:#eef2f6;
  --muted:#a9b6c6;
  --brand:#aeea00;        /* lime */
  --brand-2:#2e5d8a;      /* fjord blue */
  --brand-3:#7ec8ff;      /* ice light */
  --border: rgba(255,255,255,.08);
  --shadow: 0 8px 26px rgba(0,0,0,.35);
  --radius: 12px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --space: 18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family: Rubik, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:var(--text);
  line-height:1.6;
}
.container{max-width:1120px;margin:0 auto;padding:0 18px}
main{flex:1 0 auto;}
footer.footer{flex-shrink:0;}

/* Ambient aurora background */
body::before{
  content:"";
  position:fixed;inset:-10% -10% -10% -10%;
  background:
    radial-gradient(800px 500px at 15% 15%, rgba(46,93,138,.22), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(174,234,0,.12), transparent 65%),
    conic-gradient(from 220deg at 70% 10%, rgba(174,234,0,.08), rgba(126,200,255,.06), rgba(46,93,138,.10), transparent 60%);
  filter: blur(10px) saturate(120%);
  pointer-events:none;z-index:-1;
  animation: drift 28s linear infinite alternate;
}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-2%,0)}}
@media (prefers-reduced-motion: reduce){ body::before{animation:none} }

/* Header */
.header{position:fixed;top:0;left:0;right:0;background:rgba(17,27,42,.82);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border);z-index:1000}
.navbar{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-weight:800;letter-spacing:.5px;color:var(--text);text-decoration:none}
.nav-links{display:flex;gap:18px;list-style:none}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px;transition:color .2s ease, background .2s ease}
.nav-links a:hover, .nav-links a.active{color:var(--text);background:linear-gradient(90deg, rgba(46,93,138,.18), rgba(174,234,0,.12))}
.mobile-toggle{display:none}

/* Hero */
.hero{padding:120px 0 60px;background:linear-gradient(180deg, var(--bg-soft), transparent)}
.hero .container{display:grid;grid-template-columns:1fr;gap:16px;justify-items:center;text-align:center}
.kicker{display:inline-block;font-weight:700;font-size:.8rem;letter-spacing:.08em;color:var(--brand-3);background:rgba(126,200,255,.1);padding:6px 10px;border-radius:999px;border:1px solid rgba(126,200,255,.25);}
.hero h1{font-size:2.6rem;line-height:1.1;margin-top:8px}
.hero p{color:var(--muted);margin-top:10px;max-width:760px}
.hero-actions{display:flex;gap:10px;margin-top:14px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;border:1px solid var(--border);text-decoration:none;font-weight:800;cursor:pointer;transition:transform .15s ease, box-shadow .2s ease, background .2s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(90deg, var(--brand-2), var(--brand));color:#0a0f18;border:0;box-shadow:0 8px 24px rgba(174,234,0,.15)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--text)}
.hero-img{display:block;width:100%;max-width:980px;height:280px;margin:18px auto 0;border:1px solid var(--border);border-radius:12px;object-fit:cover}

/* Sections */
.section{padding:60px 0}
.section h2{text-align:center;margin-bottom:26px;font-size:1.6rem}

/* Features */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card{position:relative;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid var(--border);padding:18px;border-radius:var(--radius-sm);box-shadow:var(--shadow);overflow:hidden}
.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background: linear-gradient(90deg, rgba(126,200,255,.45), rgba(174,234,0,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.12;
  transition:opacity .2s ease;
}
.card:hover::before{opacity:.3}
.card h3{font-size:1rem;margin-bottom:6px}
.card p{color:var(--muted);font-size:.95rem}
.card .icon{font-size:1.4rem;margin-bottom:8px;color:var(--brand)}

/* Game */
.games-section {
  background: transparent;
  padding: 3rem 1.5rem 2rem 1.5rem;
}
.game-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}
.game-frame {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16/9;
  height: 520px;
  min-height: 220px;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #22223b;
  display: block;
  margin: 0 auto;
}

/* Footer */
.footer{margin-top:50px;background:linear-gradient(180deg, rgba(21,34,53,.7), var(--bg-soft));border-top:1px solid var(--border)}
.footer-main{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;padding:32px 0 24px}
.footer .logo{font-weight:800;letter-spacing:.5px;color:var(--text);text-decoration:none;display:inline-block;margin-bottom:12px;font-size:1.1rem}
.footer-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.footer-links a{color:var(--muted);text-decoration:none;font-weight:500;padding:4px 8px;border-radius:6px;transition:color .2s ease, background .2s ease}
.footer-links a:hover{color:var(--text);background:rgba(174,234,0,.08)}
.disclaimer-card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid var(--border);padding:18px;border-radius:var(--radius-sm);color:var(--muted);font-size:.9rem;line-height:1.5;word-break:break-word}
.disclaimer-card strong{color:var(--brand-3)}
.footer-bottom{border-top:1px solid var(--border);padding:16px 0;color:var(--muted);font-size:.85rem;text-align:center}

/* About card variant and link styles used inside informational cards */
.about-card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid var(--border);padding:22px;border-radius:var(--radius);box-shadow:var(--shadow);color:var(--text)}
.about-card h2{margin-top:0}
.about-card p{color:var(--muted);font-size:.98rem}
.about-card a, .disclaimer-card a{color:var(--brand-3);text-decoration:underline;font-weight:700}
.about-card a:hover, .disclaimer-card a:hover{color:var(--brand);text-decoration:none}
.about-card a:focus-visible, .disclaimer-card a:focus-visible{outline:3px solid rgba(126,200,255,.12);outline-offset:3px;border-radius:6px}

/* Popup */
.age-overlay{position:fixed;inset:0;background:rgba(4,8,16,.72);display:none;align-items:center;justify-content:center;z-index:1200}
.age-modal{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid var(--border);padding:22px;border-radius:var(--radius);max-width:520px;margin:0 16px;text-align:center;box-shadow:var(--shadow)}
.age-modal h3{margin-bottom:8px}
.popup-btn{background:linear-gradient(90deg,var(--brand-2), var(--brand));color:#0a0f18;border:0;border-radius:10px;padding:10px 16px;font-weight:800;cursor:pointer;box-shadow:0 10px 24px rgba(174,234,0,.18)}

/* Accessibility */
:focus-visible{outline:2px solid var(--brand-3);outline-offset:2px}

/* Responsive */
@media (max-width: 800px){
  .nav-links{display:none}
  .nav-links.is-open{display:flex;flex-direction:column;position:absolute;right:18px;top:68px;background:var(--card);border:1px solid var(--border);padding:10px;border-radius:10px;z-index:1100;min-width:180px;box-shadow:var(--shadow)}
  .mobile-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text)}
  .footer-main{grid-template-columns:1fr;gap:24px}
  .hero h1{font-size:2.2rem}
  .hero-actions{flex-direction:column;align-items:center;gap:8px}
  .features{grid-template-columns:1fr}
  .disclaimer-card{padding:12px;font-size:.85rem;}
}

@media (max-width: 600px) {
  .game-frame {
    height: auto;
    aspect-ratio: 16/9;
    min-height: 180px;
    max-height: 60vw;
    width: 100%;
  }
  .game-container {
    gap: 1.2rem;
  }
  .games-section {
    padding: 2rem 1rem 1.5rem;
  }
  .hero{padding:100px 0 40px}
  .hero h1{font-size:1.9rem}
  .section{padding:40px 0}
  .disclaimer-card{padding:8px;font-size:.8rem;}
}