/* The Glowtide pages: the game's night sea, neon cyan and Orbitron headings. */
@font-face {
  font-family: "Orbitron";
  src: url("Orbitron.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}
:root {
  --bg: #070a12;
  --bg2: #0d1424;
  --text: #dff6ff;
  --muted: #9bb3c4;
  --neon: #1ae3ff;
  --violet: #9e66ff;
  --gold: #ffd84d;
  --rule: rgba(26, 227, 255, .18);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  background:
    radial-gradient(50rem 30rem at 80% -10%, rgba(26, 227, 255, .10), transparent 60%),
    radial-gradient(40rem 30rem at 10% 110%, rgba(158, 102, 255, .10), transparent 60%),
    var(--bg);
  min-height: 100vh;
}
a { color: var(--neon); }
header, main, footer { max-width: 60rem; margin: 0 auto; padding: 0 1.25rem; }
header { display: flex; align-items: center; justify-content: space-between; padding-top: 1.2rem; padding-bottom: 1.2rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--text); text-decoration: none;
  font: 700 1.05rem/1 "Orbitron", sans-serif; letter-spacing: .06em; }
.brand img { width: 2rem; height: 2rem; border-radius: .5rem; }
header nav a { color: var(--muted); text-decoration: none; margin-left: 1.1rem; font-size: .95rem; }
header nav a:hover { color: var(--text); }
h1, h2, h3 { font-family: "Orbitron", sans-serif; letter-spacing: .04em; line-height: 1.2; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); margin: .5rem 0 .4rem;
  color: #f2fdff; text-shadow: 0 0 18px rgba(26, 227, 255, .75), 0 0 2px rgba(26, 227, 255, .9); }
h2 { font-size: 1.25rem; color: var(--neon); margin: 2.2rem 0 .6rem; }
h3 { font-size: 1rem; color: var(--text); margin: 1.4rem 0 .4rem; }
.tagline { font: 500 .8rem/1 "Orbitron", sans-serif; letter-spacing: .2em; color: var(--neon); opacity: .8; }
.lead { color: var(--muted); font-size: 1.1rem; max-width: 38rem; }
.hero { padding: 2.5rem 0 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0; }
.btn { display: inline-block; padding: .8rem 1.2rem; border-radius: 6px; font: 700 .85rem/1 "Orbitron", sans-serif;
  letter-spacing: .06em; text-decoration: none; border: 2px solid var(--neon); color: #f2fdff;
  background: rgba(26, 227, 255, .08); box-shadow: 0 0 18px -6px var(--neon); }
.btn.primary { border-color: var(--violet); background: rgba(158, 102, 255, .35); box-shadow: 0 0 22px -6px var(--violet); }
.btn.soon { border-color: var(--gold); color: var(--gold); background: rgba(255, 216, 77, .06); box-shadow: none; cursor: default; }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0 1rem; }
.shots img { width: 100%; height: auto; border-radius: 1rem; border: 1px solid var(--rule);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem 1.5rem; padding: 0; list-style: none; }
.features li { border-left: 2px solid var(--rule); padding-left: .9rem; color: var(--muted); }
.features strong { color: var(--text); display: block; }
.doc { max-width: 42rem; padding-bottom: 2rem; }
.doc p, .doc li { color: #c6dbe6; }
.updated { color: var(--muted); font-size: .9rem; }
footer { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: space-between; margin-top: 2rem;
  padding-top: 1.3rem; padding-bottom: 1.6rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .9rem; }
footer a { color: var(--muted); text-decoration: none; margin-right: 1rem; }
footer a:hover { color: var(--text); }
@media (max-width: 640px) {
  .shots { grid-template-columns: repeat(3, 70%); overflow-x: auto; scroll-snap-type: x mandatory; }
  .shots img { scroll-snap-align: center; }
  header nav a { margin-left: .8rem; }
}