/* ═══════════════════ VOIDBLOOM — informational pages ═══════════════════
   Shared visual system for the crawlable static pages (/about/, /how-to-play/,
   /updates/, /press/, /privacy/, /contact/). Deliberately lean and
   game-independent: it reuses the game's palette, typography and chamfered
   neon language, but loads none of the game's JavaScript or 125 KB game CSS,
   so every page is fast, readable and works with scripts disabled.
   Fonts come from css/fonts.css (self-hosted woff2, same origin).            */

:root {
  --cyan: #38f0ff;
  --pink: #ff3ec8;
  --gold: #ffd447;
  --red: #ff4d6a;
  --green: #5dffa0;
  --violet: #c88cff;
  --bg: #04050c;
  --panel: rgba(9, 12, 26, 0.92);
  --card: rgba(255, 255, 255, 0.035);
  --edge: rgba(56, 240, 255, 0.28);
  --edge-dim: rgba(116, 130, 170, 0.22);
  --text: #dfe8ff;
  --text-dim: #8b97bd;
  --font-display: 'Audiowide', 'Chakra Petch', sans-serif;
  --font-ui: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --cham-sm: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --cham-md: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  --cham-lg: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }
body {
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(56, 240, 255, 0.10), transparent 60%),
    radial-gradient(ellipse 100% 70% at 85% 110%, rgba(255, 62, 200, 0.08), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* faint scanlines to echo the game's CRT feel — never over readable text */
body::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg,
    rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px,
    transparent 1px, transparent 3px);
  pointer-events: none;
  z-index: 0;
}

/* ═══════ layout ═══════ */
.wrap { position: relative; z-index: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 0 20px; }
main { padding: 8px 0 40px; }
.prose { max-width: 720px; }

/* ═══════ top bar ═══════ */
.site-head {
  position: relative; z-index: 2;
  border-bottom: 1px solid var(--edge-dim);
  background: rgba(4, 5, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 12px; padding-bottom: 12px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.brand img { width: 34px; height: 34px; filter: drop-shadow(0 0 12px rgba(56, 240, 255, 0.4)); }
.brand .wordmark {
  font-family: var(--font-display);
  font-size: 20px; letter-spacing: 2px; color: #fff;
  text-shadow: 0 0 18px rgba(56, 240, 255, 0.55);
}
.brand .wordmark b { color: var(--pink); font-weight: 400; text-shadow: 0 0 18px rgba(255, 62, 200, 0.55); }

/* ═══════ buttons / CTAs ═══════ */
.btn {
  --fill: rgba(16, 21, 40, 0.9);
  --line: var(--edge-dim);
  position: relative; isolation: isolate;
  clip-path: var(--cham-md);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px;
  min-height: 44px;
  border: none;
  background: linear-gradient(155deg, var(--line), transparent 45%, transparent 60%, var(--line));
  font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  color: var(--text);
  transition: filter 0.18s, color 0.15s;
}
.btn::before {
  content: ''; position: absolute; inset: 1px; clip-path: var(--cham-md);
  background: var(--fill); z-index: -1;
}
.btn:hover { filter: brightness(1.22); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.btn-primary {
  --fill: linear-gradient(180deg, #10717f, #0b4a58);
  --line: rgba(56, 240, 255, 0.85);
  color: #eafcff; text-shadow: 0 0 8px rgba(56, 240, 255, 0.5);
  filter: drop-shadow(0 0 14px rgba(56, 240, 255, 0.24));
}
.btn-primary:hover { filter: drop-shadow(0 0 22px rgba(56, 240, 255, 0.5)) brightness(1.1); }
.btn-sm { padding: 9px 16px; font-size: 12px; letter-spacing: 2px; min-height: 40px; }

/* ═══════ hero ═══════ */
.hero { padding: 46px 0 26px; }
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 14px;
}
h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 6vw, 50px); line-height: 1.08; letter-spacing: 1px;
  color: #fff; text-shadow: 0 0 26px rgba(56, 240, 255, 0.4);
}
h1 .accent { color: var(--pink); text-shadow: 0 0 26px rgba(255, 62, 200, 0.45); }
.lede { font-size: clamp(16px, 2.2vw, 19px); color: #c3cdec; margin-top: 18px; max-width: 680px; }

/* ═══════ headings & prose ═══════ */
h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 3.4vw, 27px); letter-spacing: 1px;
  color: var(--cyan); text-shadow: 0 0 20px rgba(56, 240, 255, 0.35);
  margin: 44px 0 14px;
}
h3 {
  font-size: 17px; font-weight: 700; letter-spacing: 1px; color: var(--gold);
  margin: 26px 0 8px;
}
p { margin: 0 0 14px; color: #cdd6f2; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; color: #cdd6f2; }
.prose li { margin: 7px 0; }
.prose strong, .prose b { color: #eef3ff; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
.prose a { border-bottom: 1px solid rgba(56, 240, 255, 0.35); }
.prose a:hover { text-decoration: none; border-bottom-color: var(--cyan); }
hr { border: none; border-top: 1px solid var(--edge-dim); margin: 34px 0; }

/* ═══════ cards ═══════ */
.card {
  clip-path: var(--cham-md);
  background: var(--card);
  border: 1px solid var(--edge-dim);
  padding: 20px 22px;
  margin: 16px 0;
}
.card h3 { margin-top: 0; }
.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 18px 0;
}
.grid .card { margin: 0; }

/* feature list */
.features { list-style: none; padding: 0; display: grid; gap: 10px; }
.features li {
  position: relative; padding: 10px 14px 10px 34px;
  clip-path: var(--cham-sm); background: var(--card); border: 1px solid var(--edge-dim);
  color: #cdd6f2;
}
.features li::before {
  content: '✦'; position: absolute; left: 13px; top: 10px; color: var(--pink); font-size: 12px;
}

/* fact sheet (press) */
.facts { width: 100%; border-collapse: collapse; margin: 16px 0; }
.facts th, .facts td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--edge-dim); vertical-align: top; }
.facts th { color: var(--text-dim); font-weight: 600; letter-spacing: 1px; font-size: 12px; text-transform: uppercase; white-space: nowrap; width: 38%; }
.facts td { color: #dfe8ff; }
.table-scroll { overflow-x: auto; }

/* asset gallery (press) */
.assets { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 18px 0; }
.asset { clip-path: var(--cham-md); background: var(--card); border: 1px solid var(--edge-dim); padding: 16px; text-align: center; }
.asset img { max-width: 100%; height: auto; display: block; margin: 0 auto 12px; }
.asset .asset-label { font-size: 12px; letter-spacing: 1px; color: var(--text-dim); text-transform: uppercase; }
.asset a { font-size: 12px; }

/* screenshot gallery (press) — landscape promo thumbnails */
.shots { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 18px 0; }
.shot { clip-path: var(--cham-md); background: var(--card); border: 1px solid var(--edge-dim); padding: 12px; text-align: center; }
.shot img { width: 100%; height: auto; display: block; margin: 0 auto 10px; clip-path: var(--cham-sm); }
.shot .asset-label { font-size: 12px; letter-spacing: 1px; color: var(--text-dim); text-transform: uppercase; }
.shot a { font-size: 12px; }

/* trailer embed (press / about) */
.video-embed { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; margin: 18px auto; clip-path: var(--cham-md); border: 1px solid var(--edge-dim); background: #05070f; overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ═══════ update entries ═══════ */
.update { clip-path: var(--cham-md); background: var(--card); border: 1px solid var(--edge-dim); padding: 18px 20px; margin: 16px 0; }
.update.latest { border-color: var(--edge); background: rgba(56, 240, 255, 0.055); }
.update-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 10px; }
.update-meta .v { font-family: var(--font-display); font-size: 15px; color: var(--cyan); letter-spacing: 1px; }
.update-meta time { font-size: 13px; color: var(--text-dim); }
.update-meta .tag { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--bg); background: var(--cyan); padding: 2px 8px; clip-path: var(--cham-sm); font-weight: 700; }
.update h3 { color: var(--gold); margin: 0 0 8px; font-size: 16px; }
.update ul { margin: 0; padding-left: 20px; }
.update li { margin: 6px 0; color: #cdd6f2; }

/* ═══════ CTA band ═══════ */
.cta-band {
  clip-path: var(--cham-lg);
  background: linear-gradient(150deg, rgba(56, 240, 255, 0.10), rgba(255, 62, 200, 0.08));
  border: 1px solid var(--edge);
  padding: 30px 26px; margin: 40px 0 12px; text-align: center;
}
.cta-band h2 { margin: 0 0 6px; }
.cta-band p { margin: 0 auto 18px; max-width: 520px; }

/* ═══════ page nav / breadcrumb ═══════ */
.crumbs { font-size: 13px; color: var(--text-dim); letter-spacing: 1px; padding: 18px 0 0; }
.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--cyan); }

/* ═══════ footer ═══════ */
.site-foot {
  position: relative; z-index: 1;
  border-top: 1px solid var(--edge-dim);
  margin-top: 30px; padding: 30px 0 40px;
  color: var(--text-dim);
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: center; justify-content: space-between; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.foot-links a { color: var(--text-dim); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.foot-links a:hover { color: var(--cyan); }
.foot-note { font-size: 12px; letter-spacing: 0.5px; }

/* ═══════ responsive ═══════ */
@media (max-width: 560px) {
  body { font-size: 15px; }
  .site-head .wrap { padding-top: 10px; padding-bottom: 10px; }
  .brand .wordmark { font-size: 17px; }
  .hero { padding: 32px 0 20px; }
  .btn { padding: 12px 18px; }
  .site-foot .wrap { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}