/* ---------- Black Hole Escape — website styles ---------- */
@font-face {
  font-family: "Press Start 2P";
  src: url("/fonts/PressStart2P-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Geist Pixel";
  src: url("/fonts/GeistPixel-Regular-VariableFont_ELSH.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --pixel: "Press Start 2P", "Courier New", monospace;
  --body: "Geist Pixel", "Courier New", ui-monospace, monospace;
  --ink: #eef3ff; --dim: #9fb2cc; --frame: #dfe9ff;
  --panelbg: #0a0f1a; --accent: #b48cff;
  --green: #4ec06a; --blue: #4a9fe0; --grey: #33475c;
  --glow: 0 0 5px rgba(180,140,255,0.5);
}

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

html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: #000;
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* starfield canvas + purple horizon sit behind everything */
#stars {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -2; display: block;
}
.horizon {
  position: fixed; left: 0; right: 0; bottom: 0; height: 42vh;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 140%,
      rgba(150,90,220,0.55) 0%,
      rgba(90,40,120,0.35) 35%,
      rgba(30,10,40,0.0) 70%);
}

/* ---------- layout ---------- */
.wrap { max-width: 760px; margin: 0 auto; padding: 0 22px; }

.site-nav {
  display: flex; align-items: center; justify-content: center; gap: 26px;
  padding: 22px 0 6px;
  font-family: var(--pixel); font-size: 10px; letter-spacing: 1px;
}
.site-nav a { color: var(--dim); text-decoration: none; }
.site-nav a:hover, .site-nav a.active { color: var(--accent); text-shadow: var(--glow); }

/* ---------- home hero ---------- */
.hero { text-align: center; padding: 30px 0 40px; }
.hero img.logo {
  display: block; margin: 0 auto 26px; width: min(440px, 82vw); height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px rgba(180,140,255,0.45));
}
.tagline {
  max-width: 480px; margin: 0 auto 34px; color: #fff;
  font-size: 18px; line-height: 1.75;
}
.tagline .nowrap { white-space: nowrap; }

/* store badges */
.badges { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.badges a { display: inline-block; transition: transform .12s ease, filter .12s ease; }
.badges a:hover { transform: translateY(-2px); filter: drop-shadow(0 0 8px rgba(180,140,255,0.5)); }
.badges img { height: 54px; width: auto; }

/* ---------- watch link + gameplay screenshot ---------- */
.watch {
  display: inline-block; margin: 28px 0 32px;
  font-family: var(--pixel); font-size: 11px; letter-spacing: 1px;
  color: var(--green); text-decoration: none;
  text-shadow: 0 0 8px rgba(78,192,106,0.4);
}
.watch:hover { color: #8fe6a3; }
.shot { margin: 0 auto; width: min(258px, 74vw); }
.shot img {
  display: block; width: 100%; height: auto;
  border-radius: 30px;
  border: 3px solid #1a2436;
  box-shadow: 0 0 0 4px #05070d, 0 0 34px rgba(180,140,255,0.28), 0 18px 40px rgba(0,0,0,0.6);
}

/* ---------- content pages ---------- */
.doc {
  background: rgba(10,15,26,0.86);
  border: 1px solid rgba(180,140,255,0.18);
  box-shadow: 0 0 0 4px rgba(0,0,0,0.35), 0 0 30px rgba(180,140,255,0.14);
  border-radius: 6px;
  padding: 40px 36px; margin: 26px auto 60px;
}
.doc h1 {
  font-family: var(--pixel); font-size: 22px; line-height: 1.5; color: #fff;
  text-shadow: 0 0 12px rgba(180,140,255,0.5); margin-bottom: 8px;
}
.doc .updated { color: var(--dim); font-size: 14px; margin-bottom: 26px; }
.doc h2 {
  font-family: var(--pixel); font-size: 13px; line-height: 1.5; color: var(--accent);
  margin: 30px 0 12px; letter-spacing: 1px;
}
.doc p { margin-bottom: 14px; color: var(--ink); }
.doc ul { margin: 0 0 16px 22px; }
.doc li { margin-bottom: 8px; }
.doc a { color: var(--green); text-decoration: none; border-bottom: 1px dotted rgba(78,192,106,0.6); }
.doc a:hover { color: #8fe6a3; border-bottom-color: #8fe6a3; }
.doc strong { color: #fff; }

/* footer */
.site-foot {
  text-align: center; padding: 30px 0 40px; color: var(--dim);
  font-family: var(--pixel); font-size: 9px; letter-spacing: 1px; line-height: 2.2;
}
.site-foot a { color: var(--dim); text-decoration: none; margin: 0 10px; }
.site-foot a:hover { color: var(--accent); }
.site-foot a.yt { color: var(--dim); margin: 0; }
.site-foot a.yt:hover { color: var(--accent); }

@media (max-width: 520px) {
  body { font-size: 16px; }
  .doc { padding: 28px 20px; }
  .doc h1 { font-size: 18px; }
  .badges img { height: 46px; }
}