/* FLEETFALL — site stylesheet. The game's "Night Grid" language verbatim:
   ground #07031a→#140b30, cyan rgb(5,217,232) / gold rgb(255,201,61) / magenta / steel signals,
   the asymmetric chamfer radii (3/12 chips, 6/26 plates), Rajdhani type. Buttons are SOLID
   semantic colours or quiet steel ghosts — the translucent wash stays off buttons here too. */

@font-face { font-family: 'Rajdhani'; src: url('../assets/fonts/Rajdhani.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Rajdhani'; src: url('../assets/fonts/Rajdhani-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --bg: #07031a;
  --bg2: #140b30;
  --plate: #0d0a26;
  --line: #1d2c4b;
  --txt: #deecfa;
  --dim: #7e93ab;
  --cy: rgb(5, 217, 232);
  --gold: rgb(255, 201, 61);
  --mag: rgb(214, 51, 132);
  --lime: rgb(82, 200, 96);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: radial-gradient(1200px 800px at 50% -10%, var(--bg2), var(--bg) 60%);
  color: var(--txt);
  font: 17px/1.6 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  overflow-x: hidden;
}

/* Night Grid ground: a faint blueprint grid + drifting stars behind everything. */
.grid-ground {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(5, 217, 232, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 217, 232, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(1200px 900px at 50% 20%, rgba(0,0,0,0.9), transparent 75%);
  -webkit-mask-image: radial-gradient(1200px 900px at 50% 20%, rgba(0,0,0,0.9), transparent 75%);
}
.stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.stars i {
  position: absolute; display: block; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(222, 236, 250, 0.8);
  animation: twinkle 4s infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.9; } }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---- NAV ---- */
nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13, 10, 38, 0.78); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-row { display: flex; align-items: center; gap: 28px; height: 62px; }
.wordmark { font-weight: 700; font-size: 24px; letter-spacing: 6px; color: var(--cy); text-decoration: none;
  text-shadow: 0 0 18px rgba(5, 217, 232, 0.5); }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { color: var(--dim); text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: 2px; transition: color 0.15s; }
.nav-links a:hover { color: var(--cy); }

/* ---- HERO ---- */
.hero { position: relative; padding: 88px 0 100px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; }
/* The AUTHORED logo plate (fflogo — carries the GALAXY DOMINATION subtitle itself). */
.hero-logo { display: block; width: 100%; max-width: 560px; height: auto;
  filter: drop-shadow(0 0 30px rgba(5, 217, 232, 0.30)) drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55)); }
.tagline { font-size: 24px; font-weight: 700; letter-spacing: 2px; color: var(--gold); margin-top: 18px; }
.sub { color: var(--dim); font-size: 18px; max-width: 520px; margin-top: 12px; }
.cta-row { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

/* Store plates — STATUS chips today ("coming to…"); flip to <a class="btn ..."> when the pages go live. */
.plate-soon {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 3px 12px 3px 12px;
  background: var(--plate); color: var(--dim);
  font-weight: 700; letter-spacing: 2px; font-size: 14px; padding: 12px 20px;
}
.plate-soon b { color: var(--txt); }
.plate-soon .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: twinkle 2s infinite; }
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-weight: 700; letter-spacing: 2px; font-size: 15px; padding: 13px 26px;
  border-radius: 3px 12px 3px 12px; border: 0;
  transition: transform 0.12s, filter 0.12s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.15); }
.btn-cy { background: var(--cy); color: #06121c; }
.btn-gold { background: var(--gold); color: #211602; }
.btn-ghost { background: rgba(126, 147, 171, 0.10); color: #aabad0; border: 1px solid rgba(126, 147, 171, 0.45); }

/* Hero stage: the LIVE terra flipbook (real game atlas, real ping-pong math) + tinted missiles. */
.hero-stage { position: relative; height: 430px; }
.planet {
  position: relative; width: 96px; height: 96px;
  background-repeat: no-repeat; background-size: 1152px 960px;
  transform-origin: top left;
}
.planet-glow { position: absolute; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 120px 30px rgba(5, 217, 232, 0.18), 0 0 60px 10px rgba(5, 217, 232, 0.12) inset; }
#hero-planet-holder { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); width: 336px; height: 336px; }
#hero-planet-holder .planet { transform: scale(3.5); }
#hero-planet-holder .planet-glow { inset: -8px; }

/* Missiles: the REAL greyscale missile PNG, tinted per-faction with a CSS mask (same trick as tintable art). */
.missile {
  position: absolute; width: 18px; height: 44px; pointer-events: none;
  -webkit-mask: url('../assets/art/missile.png') center / contain no-repeat;
  mask: url('../assets/art/missile.png') center / contain no-repeat;
  filter: drop-shadow(0 0 6px currentColor);
}
.missile::after { content: ''; position: absolute; inset: 0; background: currentColor; }
.m-cy { color: var(--cy); background: var(--cy); }
.m-gold { color: var(--gold); background: var(--gold); }
.m-mag { color: var(--mag); background: var(--mag); }
@keyframes fly1 { from { transform: translate(-80px, 460px) rotate(38deg); } to { transform: translate(560px, -120px) rotate(38deg); } }
@keyframes fly2 { from { transform: translate(-120px, 200px) rotate(64deg); } to { transform: translate(620px, -40px) rotate(64deg); } }
@keyframes fly3 { from { transform: translate(40px, 500px) rotate(20deg); } to { transform: translate(400px, -140px) rotate(20deg); } }
.missile.f1 { animation: fly1 7s linear infinite; }
.missile.f2 { animation: fly2 9.5s linear infinite; animation-delay: 2.1s; }
.missile.f3 { animation: fly3 8s linear infinite; animation-delay: 4.3s; }

/* ---- SECTIONS ---- */
section { padding: 84px 0; }
.sect-eyebrow { color: var(--cy); font-weight: 700; letter-spacing: 4px; font-size: 14px; }
.sect-title { font-size: 40px; font-weight: 700; letter-spacing: 4px; margin-top: 6px; margin-bottom: 34px; }

/* Feature cards — chamfered plates, signal left edge, hover lift. */
.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card {
  background: var(--plate); border: 1px solid var(--line); border-left: 3px solid var(--cy);
  border-radius: 6px 26px 6px 26px; padding: 26px 22px;
  transition: transform 0.15s, border-color 0.15s;
}
.card:hover { transform: translateY(-4px); border-color: rgba(5, 217, 232, 0.55); }
.card .icon { width: 46px; height: 46px; margin-bottom: 14px; }
.card .icon.masked {
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
  background: var(--cy);
}
.card.gold { border-left-color: var(--gold); } .card.gold .icon.masked { background: var(--gold); }
.card.mag { border-left-color: var(--mag); } .card.mag .icon.masked { background: var(--mag); }
.card.lime { border-left-color: var(--lime); } .card.lime .icon.masked { background: var(--lime); }
.card h3 { font-size: 20px; letter-spacing: 2px; margin-bottom: 8px; }
.card p { color: var(--dim); font-size: 15.5px; }

/* Mode plates */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mode {
  position: relative; overflow: hidden;
  background: var(--plate); border: 1px solid var(--line);
  border-radius: 6px 26px 6px 26px; padding: 34px 30px; min-height: 250px;
}
.mode h3 { font-size: 26px; letter-spacing: 3px; }
.mode .len { display: inline-block; margin: 10px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 2px;
  color: var(--cy); border: 1px solid rgba(5, 217, 232, 0.4); border-radius: 3px 12px 3px 12px; padding: 3px 12px; }
.mode.heg .len { color: var(--gold); border-color: rgba(255, 201, 61, 0.4); }
.mode p { color: var(--dim); max-width: 400px; }
.mode .planet-dock { position: absolute; right: -20px; bottom: -30px; width: 220px; height: 220px; opacity: 0.95; }
.mode .planet-dock .planet { transform: scale(2.3); }

/* Commanders — living portraits (the real idle MP4s). */
.cmd-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.cmd-face {
  position: relative; border: 1px solid var(--line); border-radius: 3px 12px 3px 12px;
  overflow: hidden; aspect-ratio: 1 / 1; background: var(--plate);
  transition: transform 0.15s, border-color 0.15s;
}
.cmd-face:hover { transform: translateY(-4px); border-color: rgba(5, 217, 232, 0.6); }
.cmd-face video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmd-note { color: var(--dim); margin-top: 18px; font-size: 15.5px; }

/* Support strip */
.support {
  background: var(--plate); border: 1px solid var(--line); border-left: 3px solid var(--lime);
  border-radius: 6px 26px 6px 26px; padding: 30px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.support b { letter-spacing: 1px; }
.support .path { color: var(--cy); font-weight: 700; }
.support a.mail { color: var(--gold); font-weight: 700; text-decoration: none; }
.support a.mail:hover { text-decoration: underline; }

/* Footer */
footer { border-top: 1px solid var(--line); padding: 34px 0 44px; margin-top: 40px; color: var(--dim); font-size: 14px; }
.foot-row { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.foot-row a { color: var(--dim); text-decoration: none; letter-spacing: 1px; }
.foot-row a:hover { color: var(--cy); }
.foot-legal { margin-top: 12px; font-size: 12.5px; color: #54637d; max-width: 760px; }

/* ---- Legal pages (privacy/terms) ---- */
.legal { max-width: 820px; margin: 0 auto; padding: 60px 24px 80px; }
.legal h1 { font-size: 40px; letter-spacing: 4px; color: var(--cy); }
.legal .updated { color: #54637d; margin: 6px 0 30px; font-size: 14px; letter-spacing: 1px; }
.legal h2 { font-size: 22px; letter-spacing: 2px; margin: 34px 0 10px; color: var(--gold); }
.legal p, .legal li { color: #b9cbe0; }
.legal ul { padding-left: 22px; margin: 8px 0; }
.legal a { color: var(--cy); }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .hero-logo { max-width: 460px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-stage { height: 360px; }
  #hero-planet-holder { right: 50%; transform: translate(50%, -50%); }
  .cards4 { grid-template-columns: repeat(2, 1fr); }
  .modes { grid-template-columns: 1fr; }
  .cmd-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .hero-logo { max-width: 100%; }
  .cards4 { grid-template-columns: 1fr; }
  .cmd-row { grid-template-columns: repeat(2, 1fr); }
  .nav-links { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .missile { display: none; }
  .stars i { animation: none; }
}