/* DMZ Ragnarok shared styles. Neon Japanese night-city theme.
   Everything below references the design-system tokens in :root.
   No magic numbers past this block: spacing, type, radius, motion and
   elevation all come from the scale so the pages stay consistent. */

:root {
  /* -----------------------------------------------------------------
     COLOR
     The neon night-city identity is deliberate (chosen from the hero
     art): deep indigo ground, hot magenta ki accent, electric cyan,
     signage yellow. Kept intact. What was removed is the lazy generic
     purple-to-blue gradient fills, not the brand.
     ----------------------------------------------------------------- */
  --bg: #150c2b;                       /* indigo ground */
  --bg-2: #1b1035;
  --bg-3: #241548;
  --panel: rgba(40,22,80,0.55);        /* translucent violet surface */
  --panel-2: rgba(56,32,104,0.62);
  --line: rgba(120,90,200,0.32);       /* hairline borders */
  --line-strong: rgba(120,150,220,0.5);
  --text: #eef2ff;
  --muted: #b3a8d9;
  --blue: #29b6f6;                     /* electric blue / cyan family */
  --blue-2: #6ddcff;
  --cyan: #4fc3f7;
  --ki: #ff2d95;                       /* primary neon accent (hot magenta) */
  --ki-2: #ff5eb0;
  --magenta: #ff2d95;                  /* alias kept so nothing breaks */
  --magenta-2: #e91e8c;
  --yellow: #ffd93d;                   /* signage yellow */
  --danger: #ff3b47;
  --amber: #ffb547;

  /* -----------------------------------------------------------------
     SPACING SCALE (4px base). Reference these, never raw px.
     ----------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 28px;
  --space-8: 44px;
  --space-10: 64px;
  --space-12: 96px;

  /* -----------------------------------------------------------------
     TYPE SCALE + WEIGHTS + LINE HEIGHTS.
     One display face (Orbitron) for headings and controls, one body
     face (Rajdhani). Weight hierarchy is fixed: body 500, emphasis 600,
     headings 700. Nothing goes ultra-thin.
     ----------------------------------------------------------------- */
  --font-display: 'Orbitron', 'Rajdhani', sans-serif;
  --font-body: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;

  --fs-eyebrow: 0.8rem;
  --fs-sm: 0.92rem;
  --fs-body: 1rem;
  --fs-lead: clamp(1rem, 2.2vw, 1.3rem);
  --fs-h3: 1.15rem;
  --fs-h2: clamp(1.8rem, 4vw, 2.5rem);
  --fs-h1: clamp(2.2rem, 5vw, 3.4rem);
  --fs-hero: clamp(2.6rem, 7vw, 5rem);

  --fw-body: 500;
  --fw-medium: 600;
  --fw-bold: 700;

  --lh-tight: 1.15;                    /* headings */
  --lh-body: 1.6;                      /* copy */

  /* -----------------------------------------------------------------
     RADIUS. Three values only.
     ----------------------------------------------------------------- */
  --radius-sm: 8px;                    /* controls, small chips */
  --radius: 14px;                      /* cards, buttons, panels */
  --radius-pill: 999px;               /* badges, role tags, dots */

  /* -----------------------------------------------------------------
     MOTION. Named easing curves and durations. Every transition below
     picks from this set so timing reads intentional, not random.
     ----------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);      /* UI settle */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);       /* pulses */
  --dur-fast: 120ms;                   /* press / lift */
  --dur-base: 200ms;                   /* color / border */
  --dur-slow: 320ms;                   /* shadow / entrance */

  /* -----------------------------------------------------------------
     ELEVATION. Shadow tokens. The neon glows are part of the brand but
     scoped to the primary accent and the active state, not sprayed on
     every hover.
     ----------------------------------------------------------------- */
  --shadow-1: 0 2px 10px -4px rgba(10,6,24,0.6);
  --shadow-2: 0 12px 34px -18px rgba(10,6,24,0.75);
  --glow-ki: 0 0 20px -6px rgba(255,45,149,0.7);
  --glow-cyan: 0 0 20px -6px rgba(79,195,247,0.6);

  --maxw: 1120px;

  /* -----------------------------------------------------------------
     CONTENT MEASURES. Text columns pick from this small set so no two
     paragraphs get an arbitrary reading width. Narrow is for tight
     subtitle prose under a heading, standard is the default lead /
     intro measure, wide is a roomier prose column. --maxw above stays
     the full page container; these are for copy inside it.
     ----------------------------------------------------------------- */
  --measure-narrow: 600px;             /* subtitles under a heading */
  --measure: 640px;                    /* default lead / intro copy */
  --measure-wide: 860px;               /* roomy prose column */

  /* -----------------------------------------------------------------
     BLUR. Backdrop blur strengths for translucent surfaces. Two steps:
     a light frost for panels sitting on the page, a heavier frost for
     the sticky nav that overlaps scrolling content.
     ----------------------------------------------------------------- */
  --blur-panel: blur(6px);
  --blur-nav: blur(12px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  background:
    /* faint CSS starfield high in the sky */
    radial-gradient(1.5px 1.5px at 12% 8%, rgba(238,242,255,0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 14%, rgba(238,242,255,0.55), transparent 60%),
    radial-gradient(1px 1px at 40% 6%, rgba(238,242,255,0.6), transparent 60%),
    radial-gradient(1px 1px at 63% 20%, rgba(180,220,255,0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 5%, rgba(238,242,255,0.5), transparent 60%),
    radial-gradient(1px 1px at 25% 18%, rgba(200,210,255,0.5), transparent 60%),
    /* neon sky glow */
    radial-gradient(1100px 620px at 82% -8%, rgba(255,45,149,0.18), transparent 60%),
    radial-gradient(960px 560px at 10% 4%, rgba(79,195,247,0.16), transparent 58%),
    /* deep indigo ground */
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 55%, var(--bg-3) 100%);
  background-attachment: fixed;
  color: var(--text);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3, .brand {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-3);
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-2); text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
a:hover { color: #fff; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-5); }

/* ---------------------------------------------------------------
   NAV. Identical markup and placement on every page.
   --------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(21,12,43,0.72);
  backdrop-filter: var(--blur-nav);
  -webkit-backdrop-filter: var(--blur-nav);
  border-bottom: 1px solid var(--line-strong);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.brand {
  font-size: var(--fs-h3);
  color: #fff;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-transform: uppercase;
}
/* Brand mark: a small ki dot. Sized to the brand text, not oversized. */
.brand .spark {
  width: 0.7em; height: 0.7em; border-radius: var(--radius-pill);
  background: var(--magenta);
  box-shadow: var(--glow-ki);
  flex: none;
}
.nav-links { margin-left: auto; display: flex; gap: var(--space-1); }
.nav-links a {
  color: var(--muted);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.nav-links a:hover {
  color: #fff;
  background: rgba(79,195,247,0.14);
}
.nav-links a.active {
  color: #fff;
  background: linear-gradient(180deg, var(--magenta-2), var(--magenta));
}

/* ---------------------------------------------------------------
   HERO
   --------------------------------------------------------------- */
.hero {
  position: relative;
  padding: var(--space-12) 0 var(--space-10);
  text-align: center;
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(21,12,43,0.62) 0%, rgba(27,16,53,0.72) 55%, var(--bg-2) 100%),
    url('city-hero.jpg');
  background-size: cover, cover;
  background-position: center, center 30%;
  border-bottom: 1px solid var(--line-strong);
}
.hero .kanji {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 42vw;
  font-weight: 900;
  color: rgba(79,195,247,0.06);
  pointer-events: none;
  user-select: none;
  line-height: 1;
}
.hero h1 {
  position: relative;
  font-size: var(--fs-hero);
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 20%, var(--blue-2) 58%, var(--magenta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #ffffff;               /* solid fallback if clip unsupported */
  color: transparent;
  /* one restrained neon halo for readability over the busy image */
  text-shadow:
    0 0 30px rgba(79,195,247,0.35),
    0 2px 10px rgba(0,0,0,0.55);
}
.hero .tag {
  position: relative;
  color: #dcd6f5;
  font-size: var(--fs-lead);
  max-width: var(--measure);
  margin: var(--space-2) auto 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.cta-row {
  position: relative;
  margin-top: var(--space-8);
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   BUTTONS. Lift is 2px, held to the design-system range.
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius);
  font-weight: var(--fw-bold);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: linear-gradient(180deg, var(--magenta-2), var(--magenta));
  color: #fff;
  box-shadow: var(--shadow-1);
}
.btn-primary:hover {
  color: #fff;
  box-shadow: var(--shadow-2), var(--glow-ki);
}
.btn-ghost {
  background: rgba(40,22,80,0.4);
  border-color: var(--line-strong);
  color: var(--blue-2);
}
.btn-ghost:hover {
  color: #fff;
  border-color: var(--cyan);
  background: rgba(79,195,247,0.12);
}
/* Progress state for the launcher download. The button fills left to
   right with real transfer progress while the jar streams. This is the
   only genuinely async action on the static pages, so it is the only
   place a progress indicator exists. */
.btn.is-busy {
  position: relative;
  overflow: hidden;
  cursor: progress;
  pointer-events: none;
}
.btn.is-busy .btn-progress {
  position: absolute;
  inset: 0;
  width: 0%;
  background: rgba(255,255,255,0.22);
  transition: width var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.btn .btn-progress { display: none; }
.btn.is-busy .btn-label { position: relative; z-index: 1; }

/* ---------------------------------------------------------------
   SECTIONS
   --------------------------------------------------------------- */
section.block { padding: var(--space-10) 0; }
section.block.tight { padding-top: 0; }
.eyebrow {
  color: var(--cyan);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.section-head { text-align: center; margin-bottom: var(--space-8); }
.section-head h2 {
  font-size: var(--fs-h2);
  background: linear-gradient(90deg, var(--blue-2), #ffffff 45%, var(--ki-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: #ffffff;
  color: transparent;
}
.section-head p { color: var(--muted); max-width: var(--measure-narrow); margin: var(--space-2) auto 0; }

/* ---------------------------------------------------------------
   CARDS. Uniform radius, uniform padding, 4px lift, no spray glow.
   --------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-5); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: linear-gradient(180deg, var(--panel), rgba(27,16,53,0.6));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-6);
  backdrop-filter: var(--blur-panel);
  -webkit-backdrop-filter: var(--blur-panel);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
}
/* Icon tile sized relative to its heading text, not an arbitrary px box. */
.card .ic {
  width: 2.6em; height: 2.6em; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: rgba(79,195,247,0.14);
  border: 1px solid rgba(79,195,247,0.3);
  color: var(--blue-2);
  font-size: var(--fs-h3);
  margin-bottom: var(--space-4);
}
.card h3 { font-size: var(--fs-h3); color: #fff; }
.card p { color: var(--muted); font-size: var(--fs-sm); }
.card code {
  background: rgba(79,195,247,0.12);
  border: 1px solid rgba(79,195,247,0.22);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
  font-size: 0.9em;
  color: var(--blue-2);
}

/* ---------------------------------------------------------------
   STAFF
   --------------------------------------------------------------- */
.staff-card { text-align: center; }
.staff-card .avatar {
  width: 96px; height: 96px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, rgba(56,32,104,0.8), rgba(35,20,64,0.9));
  border: 2px solid var(--line-strong);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.8rem;
  color: var(--blue-2);
  overflow: hidden;
}
.staff-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.staff-card h3 { margin-bottom: var(--space-1); }
.role {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  margin-top: var(--space-2);
}
.role.owner   { background: rgba(255,59,71,0.18);  color: #ff9aa2; border: 1px solid rgba(255,59,71,0.4); }
.role.admin   { background: rgba(255,45,149,0.16); color: var(--ki-2); border: 1px solid rgba(255,45,149,0.4); }
.role.mod     { background: rgba(79,195,247,0.16); color: var(--blue-2); border: 1px solid rgba(79,195,247,0.4); }
.role.builder { background: rgba(255,217,61,0.16); color: #ffe27a; border: 1px solid rgba(255,217,61,0.4); }
.staff-card .bio { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--space-3); }

/* ---------------------------------------------------------------
   CALLOUT
   --------------------------------------------------------------- */
.callout {
  background:
    radial-gradient(700px 320px at 50% -20%, rgba(255,45,149,0.14), transparent 60%),
    linear-gradient(180deg, var(--panel), rgba(27,16,53,0.6));
  border: 1px solid rgba(255,45,149,0.35);
  border-radius: var(--radius);
  padding: var(--space-8);
  text-align: center;
  backdrop-filter: var(--blur-panel);
  -webkit-backdrop-filter: var(--blur-panel);
}
.callout h2 {
  background: linear-gradient(90deg, var(--blue-2), #ffffff 45%, var(--ki-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: #ffffff;
  color: transparent;
}
.callout h3 { font-size: var(--fs-h3); color: #fff; }
.callout.left { text-align: left; }
.callout.spaced { margin-top: var(--space-6); }
/* Intro paragraph inside a callout. Own class so it stops borrowing the
   hero .tag styling and its inline margin hacks. */
.callout .lead {
  color: var(--muted);
  font-size: var(--fs-lead);
  max-width: var(--measure);
  margin: 0 auto var(--space-5);
}
.callout.left .lead { margin-left: 0; margin-right: 0; }
/* A cta-row that sits directly under callout copy needs no extra top gap. */
.callout .cta-row { margin-top: 0; }
.badge-soon {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--yellow);
  border: 1px solid rgba(255,217,61,0.5);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-4);
}

/* ---------------------------------------------------------------
   FOOTER. Identical on every page.
   --------------------------------------------------------------- */
footer {
  border-top: 1px solid var(--line);
  padding: var(--space-6) 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.foot-inner { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* ---------------------------------------------------------------
   PAGE HEADER (non-home)
   --------------------------------------------------------------- */
.page-head { padding: var(--space-12) 0 var(--space-6); text-align: center; }
.page-head h1 {
  font-size: var(--fs-h1);
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 25%, var(--blue-2) 70%, var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: #ffffff;
  color: transparent;
}
.page-head p { color: var(--muted); max-width: var(--measure-narrow); margin: var(--space-2) auto 0; }

/* ---------------------------------------------------------------
   ENTRANCE MOTION. One purpose: cards settle in on scroll-in so the
   grids do not pop. Staggered per column via inline delay in markup.
   Falls back to fully visible when JS or motion is unavailable.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); }
  .reveal.in {
    opacity: 1; transform: none;
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
  }
}

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 700px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(21,12,43,0.64) 0%, rgba(27,16,53,0.74) 55%, var(--bg-2) 100%),
      url('city-hero-sm.jpg');
    padding: var(--space-12) 0 var(--space-8);
  }
}
@media (max-width: 860px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .nav-links a { padding: var(--space-2) var(--space-3); }
  .brand span.full { display: none; }
}
@media (max-width: 520px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Brand-dot pulse. Motion only, on the one accent mark. */
@keyframes neonPulse {
  0%, 100% { box-shadow: 0 0 12px 2px rgba(255,45,149,0.6); }
  50%      { box-shadow: 0 0 20px 5px rgba(255,45,149,0.9); }
}
@media (prefers-reduced-motion: no-preference) {
  .brand .spark { animation: neonPulse 3.2s var(--ease-in-out) infinite; }
}