/* ============================================================
   Bajrang Udaan — design tokens
   Palette: saffron flame, sindoor red, temple gold, dusk sky
   ============================================================ */
:root{
  --saffron:#FF6A1A;
  --saffron-deep:#E6520A;
  --sindoor:#C41E3A;
  --gold:#D4A017;
  --gold-light:#F3D27A;
  --sky-top:#1B2A6B;
  --sky-mid:#5B7FDB;
  --sky-bottom:#FBCB7A;
  --cream:#FFF7E8;
  --ink:#241205;
  --ink-soft:#5B4632;
  --line: rgba(36,18,5,.12);
  --font-display: "Baloo 2", "Poppins", sans-serif;
  --font-body: "Inter", "Noto Sans", sans-serif;
  --radius: 18px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand{font-family:var(--font-display);}
a{color:var(--sindoor);}
img{max-width:100%;display:block;}

.container{max-width:1080px;margin:0 auto;padding:0 20px;}

/* -------- Nav -------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, var(--saffron) 0%, var(--saffron-deep) 100%);
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.site-nav .container{display:flex;align-items:center;justify-content:space-between;padding-top:10px;padding-bottom:10px;}
.brand{color:#fff;font-size:1.4rem;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:8px;letter-spacing:.5px;}
.brand .om{color:var(--gold-light);}
.nav-links{display:flex;gap:18px;list-style:none;margin:0;padding:0;}
.nav-links a{color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;opacity:.92;}
.nav-links a:hover{opacity:1;text-decoration:underline;}
.nav-toggle{display:none;background:none;border:none;color:#fff;font-size:1.6rem;cursor:pointer;}

@media (max-width:640px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--saffron-deep);
    flex-direction:column; padding:14px 20px; gap:12px;
    display:none;
  }
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
}

/* -------- Hero / Game -------- */
.hero{
  background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-bottom) 100%);
  padding:34px 0 46px;
  color:#fff;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero h1{
  font-size:clamp(1.8rem,5vw,2.8rem);
  margin:0 0 6px;
  text-shadow:0 3px 0 rgba(0,0,0,.25);
  color:var(--gold-light);
}
.hero p.tag{margin:0 0 22px;font-size:1.05rem;opacity:.92;max-width:560px;margin-left:auto;margin-right:auto;}

.game-shell{
  position:relative;
  width:min(420px,92vw);
  aspect-ratio:9/14;
  margin:0 auto;
  border-radius:var(--radius);
  overflow:hidden;
  border:5px solid var(--gold);
  box-shadow:0 18px 40px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.15);
  touch-action:manipulation;
}
#gameCanvas{display:block;width:100%;height:100%;background:#7fb8e6;}

.game-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  background:rgba(20,10,4,.55);
  color:#fff;
  text-align:center;
  padding:20px;
}
.game-overlay.hidden{display:none;}
.game-overlay h2{margin:0;font-size:1.6rem;color:var(--gold-light);}
.game-overlay p{margin:0;font-size:.95rem;max-width:280px;}
.btn{
  font-family:var(--font-display);
  background:linear-gradient(180deg,var(--sindoor),#8f1327);
  color:#fff;
  border:none;
  padding:12px 28px;
  border-radius:999px;
  font-size:1.05rem;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 0 #5c0d18, 0 10px 18px rgba(0,0,0,.35);
  transition:transform .08s ease;
}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #5c0d18,0 4px 8px rgba(0,0,0,.3);}
.btn.secondary{background:linear-gradient(180deg,var(--gold),#a3760c);box-shadow:0 6px 0 #6b4f08,0 10px 18px rgba(0,0,0,.3);}

.hud{
  position:absolute; top:12px; left:0; right:0;
  display:flex; justify-content:center;
  font-family:var(--font-display);
  font-size:2rem; color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.5);
  pointer-events:none;
}

.controls-row{display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap;}
.icon-btn{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.4);
  color:#fff;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1.1rem;
}
.hint{margin-top:14px;font-size:.85rem;opacity:.75;}

/* -------- Sections -------- */
.section{padding:52px 0;}
.section.alt{background:#fff;}
.section h2{
  font-size:clamp(1.5rem,3.5vw,2.1rem);
  color:var(--saffron-deep);
  margin-top:0;
}
.section p{line-height:1.7;color:var(--ink-soft);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:760px){.grid-3{grid-template-columns:1fr;}}
.card{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
}
.card h3{margin-top:0;color:var(--sindoor);font-size:1.15rem;}

.faq details{
  border-bottom:1px solid var(--line);
  padding:14px 0;
}
.faq summary{font-weight:700;cursor:pointer;color:var(--ink);}
.faq p{margin:10px 0 0;}

/* -------- Footer -------- */
footer{
  background:var(--ink);
  color:#e9d9c4;
  padding:34px 0 22px;
  margin-top:20px;
}
footer .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;}
footer nav{display:flex;flex-wrap:wrap;gap:14px;}
footer a{color:#e9d9c4;text-decoration:none;font-size:.9rem;}
footer a:hover{text-decoration:underline;}
.footer-bottom{text-align:center;font-size:.8rem;opacity:.7;margin-top:22px;}

/* -------- Legal pages -------- */
.legal-page .container{max-width:760px;padding-top:36px;padding-bottom:48px;}
.legal-page h1{color:var(--saffron-deep);font-size:2rem;}
.legal-page h2{font-size:1.25rem;color:var(--sindoor);margin-top:32px;}
.legal-page p, .legal-page li{line-height:1.75;color:var(--ink-soft);}
.updated{font-size:.85rem;color:var(--ink-soft);opacity:.8;margin-bottom:26px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;transition:none !important;}
}