/* ════════════════════════════════════════════
   NaveenCodes — Games · Premium detail pages
   Warm paper · gold thread · Instrument Serif
════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#FAF8F3; --bg-elevated:#FFFFFF; --surface:#F2EDE3; --surface-2:#EBE5D8;
  --border:#E4DDCD; --border-strong:#D4CBB5;
  --ink:#1A1814; --ink-2:#3D3A33; --ink-muted:#6B6760; --ink-faint:#9C9890;
  --gold:#B8935A; --gold-soft:#D4B584; --gold-deep:#8C6E3F; --gold-glow:rgba(184,147,90,0.12);
  --success:#5C7C5C;
  --gradient-hero:radial-gradient(ellipse at 50% 0%,rgba(184,147,90,0.10) 0%,rgba(184,147,90,0.04) 35%,transparent 70%);
  --gradient-gold:linear-gradient(135deg,#B8935A 0%,#8C6E3F 100%);
  --thread:linear-gradient(90deg,transparent,#B8935A,transparent);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#14120E; --bg-elevated:#1C1A14; --surface:#221F18; --surface-2:#2A2620;
    --border:#2E2A22; --border-strong:#3D3830; --ink:#F2EDE3; --ink-2:#DDD5C3; --ink-muted:#9C9890; --ink-faint:#6B6760;
    --gold:#C9A961; --gold-soft:#B8935A; --gold-deep:#E0C28A; }
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ background:var(--bg); color:var(--ink-2); font-family:'Geist',system-ui,sans-serif; font-weight:400;
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }
.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-deep); }
.serif{ font-family:'Instrument Serif',Georgia,serif; font-weight:400; }
.it{ font-style:italic; color:var(--gold-deep); }
.thread{ height:1px; background:var(--thread); border:0; margin:0; opacity:0.7; }

/* ── NAV ── */
.nav{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(14px);
  background:color-mix(in srgb,var(--bg) 82%,transparent); border-bottom:1px solid var(--border); }
.nav-in{ max-width:1080px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:9px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
.brand-dot{ width:8px; height:8px; border-radius:50%; background:var(--gradient-gold); box-shadow:0 0 0 3px var(--gold-glow); }
.brand small{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; color:var(--gold-deep); font-size:15px; }
.nav-links{ display:flex; align-items:center; gap:22px; font-size:14px; color:var(--ink-muted); }
.nav-links a{ transition:color .2s; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--gold-deep) !important; border:1px solid var(--border-strong); padding:7px 13px; border-radius:8px; }
@media(max-width:640px){ .nav-links a:not(.nav-cta){ display:none; } }

/* ── HERO ── */
.hero{ position:relative; padding:72px 0 40px; background:var(--gradient-hero); }
.back-link{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-muted); margin-bottom:30px; transition:color .2s; }
.back-link:hover{ color:var(--gold-deep); }
.hero-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center; }
@media(max-width:860px){ .hero-grid{ grid-template-columns:1fr; gap:36px; } }
.hero-cat{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.hero-cat .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
.hero h1{ font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(40px,7vw,72px); line-height:1.0; letter-spacing:-0.03em; color:var(--ink); margin-bottom:18px; }
.hero-lede{ font-size:19px; line-height:1.55; color:var(--ink-2); max-width:30em; margin-bottom:26px; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; }
.chip{ font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.02em; color:var(--ink-muted); background:var(--bg-elevated); border:1px solid var(--border); padding:6px 12px; border-radius:50px; }
.chip.ok{ color:var(--success); border-color:color-mix(in srgb,var(--success) 30%,var(--border)); }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; }
.btn{ display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:12px; font-weight:500; font-size:15px; cursor:pointer; transition:transform .15s, box-shadow .2s; border:1px solid transparent; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--gradient-gold); color:#fff; box-shadow:0 6px 20px var(--gold-glow); }
.btn-primary:hover{ box-shadow:0 10px 30px rgba(184,147,90,0.28); }
.btn-ghost{ background:var(--bg-elevated); color:var(--ink); border-color:var(--border-strong); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-deep); }
.btn small{ font-family:'JetBrains Mono',monospace; font-size:11px; opacity:0.7; font-weight:400; }
.btn.disabled{ opacity:0.5; pointer-events:none; }

/* ── PHONE MOCKUP (the product preview) ── */
.device{ justify-self:center; position:relative; }
.phone{ width:248px; height:512px; border-radius:36px; padding:11px; background:#0b0b10;
  box-shadow:0 30px 80px rgba(26,24,20,0.30), 0 0 0 1px var(--border-strong); position:relative; }
.phone::before{ content:''; position:absolute; top:18px; left:50%; transform:translateX(-50%); width:54px; height:5px; border-radius:3px; background:rgba(255,255,255,0.18); z-index:3; }
.screen{ width:100%; height:100%; border-radius:26px; overflow:hidden; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.screen .g-icon{ width:84px; height:84px; filter:drop-shadow(0 8px 24px rgba(0,0,0,0.4)); }
.screen .g-name{ font-family:'Orbitron','Geist',sans-serif; font-weight:800; font-size:24px; letter-spacing:2px; text-align:center; line-height:1.1; }
.screen .g-tag{ font-size:12px; letter-spacing:2px; text-transform:uppercase; opacity:0.7; }
.screen .play-pill{ margin-top:8px; font-size:12px; font-family:'JetBrains Mono',monospace; padding:7px 16px; border-radius:50px; border:1px solid rgba(255,255,255,0.25); color:#fff; }
.device-float{ position:absolute; right:-14px; top:40px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px; padding:9px 13px; box-shadow:0 10px 30px rgba(26,24,20,0.12); }
.device-float .fl-n{ font-family:'Orbitron','Geist',sans-serif; font-weight:700; font-size:18px; color:var(--ink); }
.device-float .fl-l{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink-faint); letter-spacing:0.06em; }

/* ── SECTION ── */
section{ padding:54px 0; }
.sec-head{ margin-bottom:34px; }
.sec-head h2{ font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(28px,4vw,42px); line-height:1.08; letter-spacing:-0.02em; color:var(--ink); margin-top:10px; }
.sec-lede{ font-size:16px; color:var(--ink-muted); max-width:36em; margin-top:12px; }

/* feature grid */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:760px){ .feat-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:460px){ .feat-grid{ grid-template-columns:1fr; } }
.feat{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:16px; padding:22px; transition:border-color .2s, transform .2s; }
.feat:hover{ border-color:var(--border-strong); transform:translateY(-2px); }
.feat-ic{ font-size:22px; margin-bottom:12px; }
.feat-t{ font-weight:600; color:var(--ink); font-size:15.5px; margin-bottom:5px; letter-spacing:-0.01em; }
.feat-d{ font-size:13.5px; color:var(--ink-muted); line-height:1.5; }

/* stats strip */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
@media(max-width:540px){ .stats{ grid-template-columns:1fr 1fr; } }
.stat{ background:var(--bg-elevated); padding:24px 18px; text-align:center; }
.stat-n{ font-family:'Instrument Serif',serif; font-size:38px; line-height:1; color:var(--ink); }
.stat-l{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-muted); margin-top:8px; }

/* how to play / list */
.steps{ display:flex; flex-direction:column; gap:2px; }
.step{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--border); }
.step:last-child{ border-bottom:0; }
.step-n{ font-family:'Instrument Serif',serif; font-size:24px; color:var(--gold-deep); width:34px; flex-shrink:0; }
.step-t{ font-weight:600; color:var(--ink); margin-bottom:3px; }
.step-d{ font-size:14px; color:var(--ink-muted); }

/* download band */
.band{ background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:44px 36px; text-align:center; }
.band h2{ font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(28px,4.5vw,46px); color:var(--ink); letter-spacing:-0.02em; line-height:1.05; }
.band p{ color:var(--ink-muted); margin:14px auto 26px; max-width:30em; }
.band .cta-row{ justify-content:center; }
.band-note{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-faint); margin-top:18px; }

/* games landing grid */
.games-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:860px){ .games-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } }
.gcard{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:20px; overflow:hidden; transition:transform .25s, border-color .25s, box-shadow .25s; }
.gcard:hover{ transform:translateY(-4px); border-color:var(--border-strong); box-shadow:0 20px 50px rgba(26,24,20,0.10); }
.gcard-poster{ height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; position:relative; }
.gcard-poster .g-icon{ width:64px; height:64px; filter:drop-shadow(0 6px 18px rgba(0,0,0,0.4)); }
.gcard-poster .gp-name{ font-family:'Orbitron','Geist',sans-serif; font-weight:800; letter-spacing:1.5px; font-size:18px; color:#fff; }
.gcard-body{ padding:20px; }
.gcard-cat{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-deep); }
.gcard-t{ font-family:'Instrument Serif',serif; font-size:26px; color:var(--ink); margin:6px 0 8px; }
.gcard-d{ font-size:14px; color:var(--ink-muted); line-height:1.5; margin-bottom:16px; }
.gcard-foot{ display:flex; align-items:center; justify-content:space-between; }
.gcard-link{ font-size:14px; font-weight:500; color:var(--gold-deep); display:inline-flex; align-items:center; gap:6px; }
.gcard-badges{ display:flex; gap:6px; }
.mini-badge{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink-muted); border:1px solid var(--border); border-radius:50px; padding:3px 9px; }

/* ── TRIBUTE strip ── */
.tribute{ text-align:center; padding:48px 0; }
.tribute-line{ font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(20px,3vw,28px); color:var(--ink); }
.tribute-line .hh{ color:#c0506a; font-style:normal; }
.tribute-sub{ font-family:'Caveat',cursive; font-size:20px; color:var(--gold-deep); margin-top:8px; }

/* ── FOOTER ── */
.footer{ border-top:1px solid var(--border); padding:40px 0; margin-top:20px; }
.footer-in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.footer-brand{ display:flex; align-items:center; gap:9px; color:var(--ink); font-weight:600; }
.footer-links{ display:flex; gap:20px; font-size:14px; color:var(--ink-muted); }
.footer-links a:hover{ color:var(--gold-deep); }
.footer-copy{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-faint); margin-top:18px; }

/* reveal animation */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }