/* Gamer Nexus - public site (landing + legal). Palette mirrors the app's
   "Nexus" theme: slate #0f172a ground, indigo #4f46e5 accent, #f1f5f9 text. */

:root {
  --bg: #161826;
  --bg-raised: #1e2136;
  --border: #2c3050;
  --text: #e9e9ed;
  --text-muted: #9a9db4;
  --accent: #9184d9;        /* logo threads/headsets */
  --accent-soft: #a99fe4;
  --accent-2: #5ecfc0;      /* supporting teal - keeps the page from being one purple field */
  --chair: #474a60;         /* logo chair tone, used as a mid-value for hovers/edges */
  --text-body: #c9ccdb;
  --max: 760px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Soft purple wash echoing the mark vortex, so the page has depth rather than one flat
   field of navy. Fixed + z-index:-1 keeps it behind content but above the page ground. */
body::before {
  content: "";
  position: fixed;
  top: -260px;
  left: 50%;
  width: min(1200px, 140vw);
  height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(145, 132, 217, 0.20), rgba(145, 132, 217, 0) 70%);
  pointer-events: none;
  z-index: -1;
}

a { color: var(--accent-soft); }
a:hover { color: #a5b4fc; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---- header ---- */
header {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
  position: sticky;
  top: 0;
  background: rgba(22, 24, 38, 0.92);
  backdrop-filter: blur(8px);
}
header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-weight: 700; font-size: 18px; color: var(--text); text-decoration: none; letter-spacing: -0.01em; }
.brand span { color: var(--accent-soft); }
nav { display: flex; gap: 20px; font-size: 14px; }
nav a { color: var(--text-muted); text-decoration: none; }
nav a:hover { color: var(--text); }

/* ---- hero ---- */
.hero { padding: 56px 0 56px; text-align: center; }
/* Wide brand lockup. Its ground is the same #161826 as the page, so it reads as part of
   the page rather than a pasted-in image. */
/* Transparent mark + real type, rather than the composited banner PNG. The banner bakes in
   its own dark ground, so on any page colour it reads as a pasted rectangle. This has no
   ground to match, stays crisp at any DPI, and lets the glow shine THROUGH the artwork.
   The banner still earns its keep as the Play Store feature graphic, which is its exact size. */
.hero-mark { display: block; width: 190px; height: auto; margin: 0 auto 18px; }
/* .hero p wins on specificity (0,1,1), so this must be scoped to beat it - otherwise the
   eyebrow silently inherits the muted body colour and 18px size. */
.hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-soft);
  margin: 0 0 14px;
}
.hero h1 { font-size: clamp(32px, 6vw, 48px); line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.02em; }
.hero p { font-size: 18px; color: var(--text-muted); margin: 0 auto; max-width: 540px; }

.features { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 8px 0 56px; }
.card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #212440, #1b1e2f);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 20px 20px;
  transition: border-color .18s ease, transform .18s ease;
}
/* The one place the supporting colour appears at scale, so the feature grid reads as its
   own band instead of more of the same navy. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.card:hover { border-color: var(--chair); transform: translateY(-2px); }
.card h3 { margin: 0 0 8px; font-size: 16px; }
.card p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.6; }

/* ---- support ---- */
#support {
  background: linear-gradient(180deg, rgba(94, 207, 192, 0.07), rgba(94, 207, 192, 0.02));
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2);
  border-radius: 12px;
  padding: 24px 28px;
  margin: 0 0 72px;
}
#support h2 { margin: 0 0 12px; font-size: 20px; letter-spacing: -0.01em; }
#support p { color: var(--text-muted); font-size: 15px; }
#support p:last-child { margin-bottom: 0; }

/* ---- legal pages ---- */
main.legal { padding: 48px 0 80px; }
main.legal h1 { font-size: 32px; margin: 0 0 8px; letter-spacing: -0.02em; }
.updated { color: var(--text-muted); font-size: 14px; margin: 0 0 40px; }
main.legal h2 { font-size: 20px; margin: 40px 0 12px; padding-top: 8px; letter-spacing: -0.01em; }
main.legal h3 { font-size: 16px; margin: 24px 0 8px; color: var(--accent-soft); }
main.legal p, main.legal li { color: var(--text-body); }
main.legal ul { padding-left: 22px; }
main.legal li { margin-bottom: 8px; }
main.legal strong { color: var(--text); }

.callout {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 24px 0;
}
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; display: block; overflow-x: auto; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--text); font-weight: 600; white-space: nowrap; }
td { color: var(--text-body); }

footer { border-top: 1px solid var(--border); padding: 32px 0 48px; color: var(--text-muted); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
footer a { color: var(--text-muted); text-decoration: none; }
footer a:hover { color: var(--text); }
footer nav { gap: 20px; }