/* PolyhedralForge — shared styles. Self-contained: system fonts, no CDNs, offline-clean. */
:root{
  --bg:#16241c;          /* brand background (matches the game) */
  --bg-2:#1c2e24;        /* raised panels */
  --bg-3:#23382c;        /* chips / hovers */
  --ink:#f4ece0;         /* primary text */
  --muted:#9aa0a6;       /* steel-gray secondary text */
  --copper:#d8924a;      /* primary accent (forge copper) */
  --copper-2:#b5712f;    /* darker copper */
  --steel:#7d848b;       /* anvil steel */
  --border:rgba(244,236,224,.12);
  --maxw:980px;
  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--copper);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header */
.site-header{border-bottom:1px solid var(--border)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{width:40px;height:40px}
.brand b{font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:.2px}
.nav a{color:var(--muted);font-size:15px;margin-left:18px}
.nav a:hover{color:var(--ink)}

/* Hero */
.hero{text-align:center;padding:64px 0 48px}
.hero img.mark{width:140px;height:140px;margin:0 auto 22px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.hero h1{font-family:var(--serif);font-size:clamp(36px,7vw,60px);margin:0 0 10px;letter-spacing:.5px}
.hero .tag{color:var(--copper);font-size:clamp(17px,2.6vw,21px);margin:0 0 6px;font-weight:600}
.hero .sub{color:var(--muted);max-width:560px;margin:8px auto 0}

/* Sections */
section{padding:44px 0}
.panel{background:var(--bg-2);border:1px solid var(--border);border-radius:16px;padding:30px}
.eyebrow{color:var(--copper);font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;margin:0 0 6px}
h2{font-family:var(--serif);font-size:clamp(26px,4.5vw,34px);margin:0 0 14px}
.lede{color:var(--ink);font-size:18px;margin:0 0 20px}

/* Feature chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px;padding:0;list-style:none}
.chips li{background:var(--bg-3);border:1px solid var(--border);border-radius:999px;padding:7px 14px;font-size:14px;color:var(--ink)}
.chips li span{color:var(--copper);margin-right:6px}

/* Screenshot strip */
.shots{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:6px 0 24px}
.shots img{width:200px;border-radius:18px;border:1px solid var(--border);box-shadow:0 10px 28px rgba(0,0,0,.4)}

/* CTA */
.cta{display:inline-flex;align-items:center;gap:9px;background:var(--copper);color:#1a130a;
  font-weight:700;padding:13px 22px;border-radius:12px;font-size:16px}
.cta:hover{background:var(--copper-2);text-decoration:none;color:#1a130a}
.cta.soon{background:transparent;color:var(--copper);border:1.5px solid var(--copper);cursor:default}
.cta.soon:hover{background:var(--bg-3)}

/* Privacy / prose pages */
.prose{max-width:760px}
.prose h1{font-family:var(--serif);font-size:clamp(30px,5vw,42px);margin:0 0 6px}
.prose .updated{color:var(--muted);font-size:14px;margin:0 0 28px}
.prose h2{font-size:clamp(20px,3.4vw,24px);margin:30px 0 8px}
.prose p,.prose li{color:var(--ink)}
.prose ul{padding-left:20px}
.prose .note{background:var(--bg-2);border:1px solid var(--border);border-left:3px solid var(--copper);
  border-radius:10px;padding:14px 18px;color:var(--muted);font-size:15px}

/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:40px}
.site-footer .wrap{padding:26px 22px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between}
.site-footer p{margin:0;color:var(--muted);font-size:14px}
.site-footer nav a{color:var(--muted);font-size:14px;margin-left:16px}
.site-footer nav a:first-child{margin-left:0}
.site-footer nav a:hover{color:var(--ink)}

@media(max-width:600px){
  body{font-size:16px}
  .hero{padding:44px 0 32px}
  .panel{padding:22px}
  .shots img{width:44%}
}