/* HunterTitan.com — shared styles */
:root{
  --bg:#0a1710; --bg2:#0e2116; --panel:#12291b; --panel2:#173322;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.16);
  --ink:#eaf3ea; --muted:#a9c0ad; --gold:#ffcf4d; --leaf:#57b45a; --leaf-d:#2e7d32;
  --danger:#ff8a7a; --radius:18px; --max:1120px;
  --shadow:0 14px 40px rgba(0,0,0,.45);
}
*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:var(--gold); text-decoration:none }
a:hover{ text-decoration:underline }
h1,h2,h3,.brandmark{ font-family:"Arial Rounded MT Bold","Avenir Next",system-ui,sans-serif; letter-spacing:.2px; line-height:1.12 }
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 22px }
.muted{ color:var(--muted) }
.center{ text-align:center }
.pill{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; border:1px solid var(--line2); color:var(--muted); background:rgba(255,255,255,.04) }
.pill.live{ color:#0c2110; background:var(--leaf); border-color:transparent }
.pill.soon{ color:var(--gold); border-color:rgba(255,207,77,.4) }

/* ---------- header ---------- */
header.site{ position:sticky; top:0; z-index:50; background:rgba(8,18,12,.82);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line) }
.nav{ display:flex; align-items:center; justify-content:space-between; height:66px }
.brand{ display:flex; align-items:center; gap:12px }
.brand img{ width:40px; height:40px; border-radius:11px }
.brand .brandmark{ font-size:22px; font-weight:800 }
.brand .brandmark .g{ color:var(--gold) }
.nav nav{ display:flex; gap:6px; align-items:center }
.nav nav a{ color:var(--ink); font-weight:600; font-size:15px; padding:8px 14px; border-radius:10px }
.nav nav a:hover{ background:rgba(255,255,255,.06); text-decoration:none }
.nav nav a.cta{ background:var(--gold); color:#12220f; font-weight:800 }
.menu-btn{ display:none; background:none; border:1px solid var(--line2); color:var(--ink);
  width:44px; height:40px; border-radius:10px; font-size:20px; cursor:pointer }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line) }
.hero .bg{ position:absolute; inset:0; background-size:cover; background-position:center;
  filter:brightness(.5) saturate(1.15); transform:scale(1.05) }
.hero .veil{ position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 0%, transparent 30%, rgba(8,18,12,.7) 100%),
             linear-gradient(180deg, rgba(8,18,12,.55), rgba(8,18,12,.9)) }
.hero .wrap{ position:relative; padding:84px 22px 78px; text-align:center }
.hero h1{ font-size:clamp(34px,6vw,60px); font-weight:900 }
.hero h1 .g{ color:var(--gold) }
.hero p.lede{ max-width:640px; margin:16px auto 0; font-size:clamp(16px,2.4vw,20px); color:#dfeede }
.hero .cta-row{ margin-top:28px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:16px; cursor:pointer;
  padding:13px 22px; border-radius:14px; border:none; transition:transform .08s ease }
.btn:hover{ text-decoration:none; transform:translateY(-1px) }
.btn.primary{ background:var(--gold); color:#12220f; box-shadow:0 8px 22px rgba(255,207,77,.22) }
.btn.ghost{ background:rgba(255,255,255,.06); color:var(--ink); border:1px solid var(--line2) }
.btn.leaf{ background:var(--leaf-d); color:#eafff0 }

/* store badges */
.stores{ display:flex; gap:10px; flex-wrap:wrap }
.store{ display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:12px;
  background:#0c1a11; border:1px solid var(--line2); color:var(--ink); min-width:180px }
.store:hover{ text-decoration:none; border-color:var(--gold) }
.store .ic{ font-size:26px; line-height:1 }
.store small{ display:block; font-size:11px; color:var(--muted); font-weight:600 }
.store b{ font-size:16px; font-family:"Arial Rounded MT Bold",sans-serif }
.store.disabled{ opacity:.55; pointer-events:none }

/* ---------- sections ---------- */
section{ padding:64px 0 }
.section-head{ max-width:720px; margin:0 auto 36px; text-align:center }
.section-head h2{ font-size:clamp(26px,4vw,38px); font-weight:900 }
.section-head p{ color:var(--muted); margin-top:10px; font-size:17px }

/* ---------- game cards ---------- */
.games{ display:grid; grid-template-columns:1fr 1fr; gap:24px }
.game{ background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line);
  border-radius:22px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column }
.game .art{ position:relative; aspect-ratio:16/9; background:#0a150e; overflow:hidden }
.game .art img{ width:100%; height:100%; object-fit:cover }
.game .art .badge{ position:absolute; top:12px; left:12px }
.game .body{ padding:22px; display:flex; flex-direction:column; gap:14px; flex:1 }
.game .body .top{ display:flex; align-items:center; gap:14px }
.game .body .top img.icon{ width:58px; height:58px; border-radius:14px; box-shadow:0 6px 16px rgba(0,0,0,.4) }
.game .body h3{ font-size:23px; font-weight:800 }
.game .body .genre{ color:var(--muted); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.4px }
.game .body p{ color:#d5e6d7; font-size:15px }
.game .body .actions{ margin-top:auto; display:flex; flex-direction:column; gap:12px }

.feature-list{ list-style:none; display:grid; gap:9px }
.feature-list li{ padding-left:26px; position:relative; color:#d5e6d7; font-size:14.5px }
.feature-list li::before{ content:"🐾"; position:absolute; left:0; top:0; font-size:14px }

/* ---------- studio strip ---------- */
.studio{ background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.studio .wrap{ display:grid; grid-template-columns:130px 1fr; gap:30px; align-items:center }
.studio img.em{ width:130px; height:130px; border-radius:26px }

/* ---------- press / doc pages ---------- */
.doc{ max-width:860px; margin:0 auto; padding:52px 22px 80px }
.doc h1{ font-size:clamp(30px,5vw,44px); font-weight:900 }
.doc .updated{ color:var(--muted); margin-top:8px; font-size:14px }
.doc h2{ font-size:24px; font-weight:800; margin:38px 0 12px; padding-top:10px }
.doc h3{ font-size:18px; font-weight:800; margin:22px 0 8px }
.doc p, .doc li{ color:#d7e6d9; font-size:16px }
.doc ul,.doc ol{ margin:10px 0 10px 22px }
.doc li{ margin:6px 0 }
.doc a{ text-decoration:underline }
.callout{ background:var(--panel); border:1px solid var(--line2); border-left:4px solid var(--gold);
  border-radius:12px; padding:16px 18px; margin:20px 0; color:#e7f2e8; font-size:15px }
.toc{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 20px; margin:22px 0 }
.toc a{ color:var(--ink) }

/* fact sheet */
.factsheet{ background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin:18px 0 }
.factsheet .row{ display:grid; grid-template-columns:180px 1fr; gap:0; border-top:1px solid var(--line) }
.factsheet .row:first-child{ border-top:none }
.factsheet .row .k{ padding:12px 18px; background:rgba(255,255,255,.03); font-weight:700; color:#cfe0d1; font-size:14px }
.factsheet .row .v{ padding:12px 18px; color:#e6f1e7; font-size:15px }

.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin:16px 0 }
.gallery a{ display:block; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#0a150e }
.gallery img{ width:100%; aspect-ratio:1/2; object-fit:cover }
.gallery.wide img{ aspect-ratio:16/9 }

.presskit-game{ border:1px solid var(--line); border-radius:20px; padding:26px; margin:26px 0; background:linear-gradient(180deg,var(--panel2),var(--panel)) }
.presskit-game .ghead{ display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.presskit-game .ghead img{ width:66px; height:66px; border-radius:16px }
.presskit-game .ghead h2{ margin:0; padding:0 }

/* ---------- footer ---------- */
footer.site{ border-top:1px solid var(--line); background:var(--bg2); padding:44px 0 40px; margin-top:20px }
footer.site .wrap{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap }
footer.site .brand .brandmark{ font-size:19px }
footer.site nav{ display:flex; gap:22px; flex-wrap:wrap }
footer.site nav a{ color:var(--muted); font-weight:600 }
footer.site .fine{ width:100%; color:var(--muted); font-size:13px; margin-top:8px }

@media (max-width:820px){
  .games{ grid-template-columns:1fr }
  .nav nav{ display:none }
  .menu-btn{ display:inline-flex; align-items:center; justify-content:center }
  .nav nav.open{ display:flex; position:absolute; top:66px; left:0; right:0; flex-direction:column;
    background:var(--bg2); border-bottom:1px solid var(--line); padding:10px 16px; gap:2px }
  .studio .wrap{ grid-template-columns:1fr; text-align:center; justify-items:center }
  .factsheet .row{ grid-template-columns:1fr }
  .factsheet .row .k{ border-bottom:1px solid var(--line) }
}