/* Frosthain — "Signal Lost" design system (design/mockups, option 1a).
   Hard edges only: no border-radius, no box-shadows anywhere. */

:root {
  --bg: #0a0c0d;
  --surface: #0e1211;
  --accent: #8fe3c0;
  --accent-hover: #c4f2df;
  --head: #eef5f1;
  --body: #cfd8d3;
  --muted: #93a39c;
  --dim: #7f8f88;
  --faint: #586660;
  --ghost: #4e615a;
  --hairline: rgba(159, 196, 178, .15);
  --card-border: rgba(143, 227, 192, .18);
  --card-border-hover: rgba(143, 227, 192, .5);
  --chip-border: rgba(143, 227, 192, .3);
  --btn-border: rgba(143, 227, 192, .4);
  --input-border: rgba(143, 227, 192, .25);
  --callout-border: rgba(143, 227, 192, .25);
  --font-sans: 'Space Grotesk', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --art-gradient: linear-gradient(150deg, #111716, #070a09 75%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 400 16px/1.6 var(--font-sans);
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; background: none; border: none; color: inherit; cursor: pointer; padding: 0; }
input, textarea { font: inherit; }

@keyframes fh-flicker {
  0%, 100% { opacity: .9; }
  92% { opacity: .9; }
  94% { opacity: .35; }
  96% { opacity: .85; }
}
@keyframes fh-drift {
  from { background-position: 0 0; }
  to { background-position: 0 200px; }
}

/* ---- Layout shell ---- */
.site { min-height: 100vh; display: flex; flex-direction: column; }
.pad-x {
  padding-left: max(clamp(20px, 5vw, 48px), calc(50% - 580px));
  padding-right: max(clamp(20px, 5vw, 48px), calc(50% - 580px));
}

/* ---- Nav ---- */
.nav {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 24px; justify-content: space-between;
  padding-top: 18px; padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-logo { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.nav-word { font: 500 15px var(--font-mono); letter-spacing: .14em; color: #e6efe9; }
.nav-links { display: flex; flex-wrap: wrap; gap: 14px 28px; font: 500 12px var(--font-mono); letter-spacing: .1em; }
.nav-links a { color: var(--dim); }
.nav-links a.active { color: var(--accent); }
.nav-links a:hover { color: var(--accent-hover); }

/* ---- Footer ---- */
.footer {
  margin-top: auto;
  padding-top: 28px; padding-bottom: 28px;
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  justify-content: space-between; align-items: center;
}
.footer, .footer a { font: 400 11px var(--font-mono); color: var(--faint); }
.footer-links { display: flex; gap: 22px; font-weight: 500; letter-spacing: .08em; }
.footer-links a:hover { color: var(--accent); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 10px 22px; }

/* ---- Type helpers ---- */
.eyebrow { font: 500 11px var(--font-mono); letter-spacing: .22em; color: var(--accent); }
.mono-label { font: 500 11px var(--font-mono); letter-spacing: .18em; color: var(--dim); }
.h-hero { font: 700 clamp(38px, 7vw, 68px)/1.02 var(--font-sans); letter-spacing: -.02em; color: var(--head); }
.h-display { font: 700 clamp(34px, 6vw, 56px)/1.05 var(--font-sans); letter-spacing: -.02em; color: var(--head); }
.h-detail { font: 700 clamp(32px, 6vw, 54px)/1.05 var(--font-sans); letter-spacing: -.02em; color: var(--head); }
.h-section { font: 700 clamp(26px, 5vw, 34px)/1.15 var(--font-sans); color: var(--head); }
.flicker { color: var(--accent); animation: fh-flicker 6s linear infinite; }
.arrow-link { font: 500 12px var(--font-mono); letter-spacing: .1em; color: var(--accent); }

/* ---- Buttons ---- */
.btn {
  display: inline-block; padding: 13px 24px; text-align: center;
  font: 500 13px var(--font-mono); letter-spacing: .08em; cursor: pointer;
}
.btn--primary { background: var(--accent); color: var(--bg); font-weight: 700; }
.btn--primary:hover { background: var(--accent-hover); color: var(--bg); }
.btn--ghost { border: 1px solid var(--btn-border); color: var(--accent); }
.btn--ghost:hover { border-color: var(--card-border-hover); }
.btn--block { display: block; width: 100%; }

/* ---- Chips / pills ---- */
.chip {
  font: 500 10px var(--font-mono); padding: 3px 8px;
  border: 1px solid var(--chip-border); color: var(--accent);
}
.chip-row { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.social-chip {
  padding: 9px 16px; border: 1px solid var(--chip-border);
  font: 500 11px var(--font-mono); letter-spacing: .1em; color: var(--accent);
}
.pill {
  cursor: pointer; padding: 8px 16px;
  font: 500 11px var(--font-mono); letter-spacing: .1em;
  background: transparent; color: var(--dim);
  border: 1px solid rgba(143, 227, 192, .35);
}
.pill.active { background: var(--accent); color: var(--bg); }
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* ---- Hero (home) ---- */
.hero {
  position: relative; overflow: hidden;
  padding-top: clamp(48px, 9vw, 88px);
  padding-bottom: clamp(44px, 8vw, 72px);
}
.hero.scanlines::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px);
  animation: fh-drift 9s linear infinite;
  pointer-events: none;
}
.hero-inner { position: relative; display: flex; flex-direction: column; gap: 22px; max-width: 680px; }
.hero-lead { font: 400 17px/1.6 var(--font-sans); color: var(--muted); max-width: 500px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }

/* ---- Section head (LATEST RELEASES rows) ---- */
.section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--hairline); padding-top: 26px;
}
.section-head .label { font: 500 12px var(--font-mono); letter-spacing: .2em; color: var(--dim); }
.section-head a { font: 500 12px var(--font-mono); color: var(--accent); }

/* ---- Game cards ---- */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.game-card { display: flex; flex-direction: column; gap: 12px; color: inherit; }
/* 2:3 matches Steam's library_600x900 capsule, so imported key art is never cropped. */
.game-card .art {
  position: relative; aspect-ratio: 2 / 3;
  background: var(--art-gradient);
  border: 1px solid var(--card-border);
  display: grid; place-items: center; overflow: hidden;
}
.game-card:hover .art { border-color: var(--card-border-hover); }
.game-card .art img { width: 100%; height: 100%; object-fit: cover; }
.game-card .art .ph-label { font: 500 11px var(--font-mono); color: var(--ghost); letter-spacing: .12em; }
.game-card .meta { display: flex; flex-direction: column; gap: 6px; }
.game-card .title { font: 700 18px var(--font-sans); color: var(--head); }
.game-card .tagline { font: 400 13px/1.5 var(--font-sans); color: var(--dim); }
.tape-badge {
  position: absolute; top: 12px; left: 12px;
  font: 500 10px var(--font-mono); letter-spacing: .14em; color: var(--faint);
}
/* Over real key art the badge needs its own backdrop to stay legible
   regardless of how light or busy the image is. */
.tape-badge.on-art {
  color: var(--accent); background: rgba(10, 12, 13, .78);
  padding: 4px 7px; top: 8px; left: 8px;
}

/* Coming soon card */
.coming-soon .art {
  aspect-ratio: 2 / 3; border: 1px dashed var(--chip-border);
  display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, rgba(143, 227, 192, .02) 0 10px, transparent 10px 20px);
}
.coming-soon { display: flex; flex-direction: column; gap: 12px; }
.coming-soon .meta { display: flex; flex-direction: column; gap: 6px; }
.coming-soon .q { font: 700 22px var(--font-mono); color: var(--accent); }
.coming-soon .dev-label { font: 500 11px var(--font-mono); color: var(--faint); letter-spacing: .14em; }
.coming-soon .title { font: 700 18px var(--font-sans); color: var(--dim); }
.coming-soon .tagline { font: 400 13px/1.5 var(--font-sans); color: var(--faint); }

.cs-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* Section wrappers */
.home-releases { display: flex; flex-direction: column; gap: 18px; padding-bottom: 64px; }
.games-wrap { padding-bottom: 72px; }

/* Genre filter (set by the games-filter island; CSS does the hiding) */
.grid-cards[data-filter="horror"] [data-genre="other"] { display: none; }
.grid-cards[data-filter="other"] [data-genre="horror"] { display: none; }
.grid-cards[data-filter="other"] [data-coming-soon] { display: none; }

/* ---- About strip (home) ---- */
.about-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px; align-items: center;
  padding-top: 56px; padding-bottom: 56px;
  border-top: 1px solid var(--hairline);
}
.about-strip .col { display: flex; flex-direction: column; gap: 16px; }
.about-strip p { font: 400 15px/1.65 var(--font-sans); color: var(--muted); max-width: 440px; }

/* ---- Art placeholders ---- */
.placeholder {
  background: var(--art-gradient);
  border: 1px solid var(--card-border);
  display: grid; place-items: center; overflow: hidden;
}
.placeholder .ph-label { font: 500 11px var(--font-mono); color: var(--ghost); letter-spacing: .12em; }
.placeholder img { width: 100%; height: 100%; object-fit: cover; }
.ratio-16-10 { aspect-ratio: 16 / 10; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-16-9 { aspect-ratio: 16 / 9; }

/* ---- Page header block ---- */
.page-head {
  padding-top: clamp(40px, 7vw, 64px); padding-bottom: 36px;
  display: flex; flex-direction: column; gap: 16px;
}
.page-head--slim { padding-bottom: 24px; }

/* ---- Two-column detail/body layout ---- */
.cols {
  display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px);
  padding-bottom: 72px; align-items: flex-start;
}
.col-main { flex: 1.7 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.col-main--wide { flex: 1.5 1 320px; }
.col-side { flex: 1 1 280px; display: flex; flex-direction: column; gap: 20px; }

/* ---- Game detail ---- */
.detail-hero {
  position: relative; height: clamp(240px, 42vw, 420px);
  border-bottom: 1px solid var(--hairline);
  display: grid; place-items: center; overflow: hidden;
}
.detail-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Steam ships a 1-4 KB blurred copy of the hero. It paints immediately and sits
   under the full-size banner, which is often 0.5-1.5 MB. */
.detail-hero .hero-blur { z-index: 0; }
.detail-hero .hero-art { z-index: 1; }
/* The transparent wordmark, placed where Steam says the developer wants it.
   Steam sizes it as a share of its hero area, which it pads — so the inline
   max-width/height percentages resolve against this inset box rather than the
   full banner, which would otherwise run the logo edge to edge. The anchor
   class picks the corner. Delete the logo image in the admin for any game whose
   hero already has the title baked in. */
.detail-hero .hero-logo-box {
  position: absolute; z-index: 2;
  /* Horizontal inset matches .pad-x so the wordmark lines up with the content
     column — the tape badge above it and the title below — instead of hugging
     the viewport edge on wide screens. */
  inset: clamp(48px, 8vw, 72px) max(clamp(20px, 5vw, 48px), calc(50% - 580px)) clamp(24px, 6vw, 56px);
  display: flex; pointer-events: none;
}
.detail-hero .hero-logo-box.at-centercenter { align-items: center; justify-content: center; }
.detail-hero .hero-logo-box.at-bottomleft { align-items: flex-end; justify-content: flex-start; }
.detail-hero .hero-logo-box.at-bottomcenter { align-items: flex-end; justify-content: center; }
.detail-hero .hero-logo-box.at-upperleft { align-items: flex-start; justify-content: flex-start; }
.detail-hero .hero-logo {
  position: static; inset: auto;
  width: auto; height: auto; max-width: 38%; max-height: 60%;
  object-fit: contain;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, .55));
}
.detail-hero .ph-label { font: 500 12px var(--font-mono); color: var(--ghost); letter-spacing: .14em; }
/* The hero children now carry explicit z-indexes, so the fade and the tape
   need their own — DOM order alone no longer keeps them on top. */
.detail-hero .tape {
  position: absolute; top: 20px;
  left: max(clamp(20px, 5vw, 48px), calc(50% - 580px));
  font: 500 11px var(--font-mono); letter-spacing: .18em; color: var(--accent);
  z-index: 4;
}
.detail-hero .fade {
  position: absolute; bottom: 0; left: 0; right: 0; height: 120px;
  background: linear-gradient(transparent, var(--bg));
  z-index: 3;
}
.back-link {
  display: inline-block; padding-top: 28px; padding-bottom: 24px;
  font: 500 11px var(--font-mono); letter-spacing: .14em; color: var(--dim);
}
.back-link:hover { color: var(--accent); }
.detail-tagline { font: 500 18px/1.5 var(--font-sans); color: var(--accent); }
.detail-desc { font: 400 16px/1.7 var(--font-sans); color: var(--muted); }
.feature-list { display: flex; flex-direction: column; gap: 8px; font: 400 15px/1.5 var(--font-sans); color: var(--muted); }
.grid-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.grid-shots .shot { aspect-ratio: 16 / 9; background: var(--art-gradient); border: 1px solid var(--card-border); overflow: hidden; }
.grid-shots .shot img { width: 100%; height: 100%; object-fit: cover; }
.stack-10 { display: flex; flex-direction: column; gap: 10px; }
.stack-12 { display: flex; flex-direction: column; gap: 12px; }

/* ---- Panels (GET THE GAME / FACTSHEET / forms) ---- */
.panel { border: 1px solid var(--card-border); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.store-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.store-grid a {
  text-align: center; padding: 11px 6px;
  border: 1px solid var(--btn-border); color: var(--accent);
  font: 500 11px var(--font-mono); letter-spacing: .06em;
}
.store-grid a:hover { border-color: var(--card-border-hover); }
.store-grid .span-2 { grid-column: 1 / -1; }
.factsheet { display: flex; flex-direction: column; gap: 12px; font: 400 13px var(--font-mono); }
.factsheet .row { display: flex; justify-content: space-between; gap: 16px; }
.factsheet .k { color: var(--faint); flex-shrink: 0; }
.factsheet .v { color: var(--body); text-align: right; }

/* ---- Callout (about pitch box) ---- */
.callout { padding: 18px 20px; border: 1px solid var(--callout-border); color: var(--body); }

/* ---- Forms ---- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font: 500 11px var(--font-mono); letter-spacing: .14em; color: var(--faint); }
.input {
  background: var(--surface); border: 1px solid var(--input-border);
  padding: 12px 14px; color: var(--head);
  font: 400 14px var(--font-sans); outline: none; width: 100%;
}
.input:focus { border-color: var(--accent); }
textarea.input { resize: vertical; }
.field-error { font: 400 12px var(--font-mono); color: #e4a08f; }
.form-stack { display: flex; flex-direction: column; gap: 16px; }
.honeypot { position: absolute; left: -9999px; top: -9999px; }

/* Contact success state */
.sent-state { padding: 32px 0; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.sent-state .big { font: 700 22px var(--font-mono); color: var(--accent); }
.sent-state p { font: 400 14px/1.6 var(--font-sans); color: var(--muted); }

/* Contact directory */
.mail-directory { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; font: 400 14px var(--font-mono); }
.mail-directory .row { display: flex; gap: 16px; }
.mail-directory .k { color: var(--faint); width: 90px; flex-shrink: 0; }

/* Readable measure. Must sit INSIDE .pad-x, never on it: .pad-x's padding
   grows with the viewport, and border-box would subtract it from max-width,
   making the column narrower the wider the window gets. */
.measure { max-width: 760px; }
.measure--narrow { max-width: 640px; }

/* ---- Prose (news posts) ---- */
.prose { max-width: 760px; display: flex; flex-direction: column; gap: 14px; padding-bottom: 72px; }
.prose h2 { font: 700 20px/1.3 var(--font-sans); color: var(--head); margin-top: 14px; }
.prose h3 { font: 700 16px/1.3 var(--font-sans); color: var(--head); margin-top: 8px; }
.prose p, .prose li { font: 400 15px/1.7 var(--font-sans); color: var(--muted); }
.prose ul { margin: 0; padding-left: 20px; }
.prose a { color: var(--accent); }

/* ---- Legal pages ----
   Each clause is its own hairline-separated block with a mono label,
   matching the FEATURES / FACTSHEET treatment used across the site. */
.legal { max-width: 760px; padding-bottom: 72px; }
.legal, .prose { min-width: 0; }
.legal .lede { font: 400 16px/1.7 var(--font-sans); color: var(--muted); padding-bottom: 8px; }
.legal-section {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 0; border-top: 1px solid var(--hairline);
}
.legal-head {
  display: flex; align-items: baseline; gap: 12px;
  font: 500 11px var(--font-mono); letter-spacing: .18em;
  color: var(--accent); text-transform: uppercase;
}
.legal-head .num { color: var(--faint); }
.legal-section p { font: 400 15px/1.75 var(--font-sans); color: var(--muted); }
.legal-section a { color: var(--accent); }
.legal-section ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.legal-section li { font: 400 15px/1.6 var(--font-sans); color: var(--muted); }
.legal-address { font: 400 14px/1.8 var(--font-mono); color: var(--body); }
.legal-address strong { color: var(--head); font-weight: 500; }
.legal-updated {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hairline);
  font: 400 11px var(--font-mono); letter-spacing: .14em; color: var(--faint);
}

/* ---- News ---- */
.news-list { display: flex; flex-direction: column; padding-bottom: 72px; }
.news-row {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline;
  padding: 18px 0; border-top: 1px solid var(--hairline); color: inherit;
}
.news-row:hover .news-title { color: var(--accent); }
.news-date { font: 400 12px var(--font-mono); color: var(--faint); min-width: 110px; }
.news-title { font: 700 18px var(--font-sans); color: var(--head); }

/* ---- Flash messages ---- */
.flash { padding: 12px 16px; border: 1px solid var(--callout-border); font: 400 13px var(--font-mono); color: var(--accent); }
.flash--error { color: #e4a08f; border-color: rgba(228, 160, 143, .4); }
.flash-stack { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }

/* ---- 404 ---- */
.lost {
  flex: 1; display: flex; flex-direction: column; gap: 18px;
  align-items: center; justify-content: center; text-align: center;
  padding-top: 80px; padding-bottom: 80px;
}
.lost .code { font: 700 15px var(--font-mono); letter-spacing: .22em; color: var(--faint); }