/* ---------- Fonts (self-hosted) ----------
   "JJ2 Menu" loads fonts/jj2.woff2 if you drop one in (see README).
   Without it the page falls back to Lilita One, a free look-alike. */
@font-face { font-family: "JJ2 Menu"; src: url("fonts/jj2.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Lilita One"; src: url("fonts/lilita-one.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito-var.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url("fonts/press-start-2p.woff2") format("woff2"); font-display: swap; }

:root {
  --sky-top: #0b0630;
  --sky-mid: #22106b;
  --sky-low: #3c1a8f;
  --panel: rgba(16, 9, 52, .82);
  --panel-edge: #6a4cff;
  --panel-hi: #a99bff;
  --ink: #f3efff;
  --ink-dim: #b9b0e6;
  --carrot: #ff8a1c;
  --carrot-dk: #c95500;
  --leaf: #39d353;
  --leaf-dk: #1c8a2f;
  --gem-red: #ff3b5c;
  --gem-blue: #2fb7ff;
  --gold: #ffd23a;
  --magenta: #ff4fd8;
  --verified: #39d353;
  --implemented: #2fb7ff;
  --approx: #ffd23a;
  --na: #7d74a8;
  --title: "JJ2 Menu", "Lilita One", "Nunito", sans-serif;
  --body: "Nunito", system-ui, sans-serif;
  --pixel: "Press Start 2P", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font: 17px/1.6 var(--body);
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 45%, var(--sky-low) 100%) fixed;
  background-color: var(--sky-top);
  overflow-x: hidden;
}
#stars { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; }
a { color: var(--gold); }
a:hover { color: var(--carrot); }

/* ---------- Rainbow menu-font title ---------- */
.jj-title {
  font-family: var(--title);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1;
  margin: 0;
  background: linear-gradient(180deg, #fff6a8 0%, var(--gold) 22%, var(--carrot) 48%, var(--gem-red) 70%, var(--magenta) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px #1a0840;
  paint-order: stroke fill;
  filter: drop-shadow(4px 4px 0 #1a0840) drop-shadow(0 0 18px rgba(255, 138, 28, .35));
  transform: skewX(-8deg);
  display: inline-block;
}
.jj-title.green {
  background-image: linear-gradient(180deg, #e9ffb0 0%, #9cff5a 35%, var(--leaf) 60%, var(--leaf-dk) 100%);
  filter: drop-shadow(3px 3px 0 #0b2a10);
}
.jj-title.blue {
  background-image: linear-gradient(180deg, #e3fbff 0%, #7fdcff 35%, var(--gem-blue) 60%, #1655c9 100%);
  filter: drop-shadow(3px 3px 0 #0a1a4a);
}
.wave span { display: inline-block; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .wave span { animation: none; } }

/* ---------- Layout ---------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
header.hero { text-align: center; padding: 72px 0 40px; position: relative; }
.hero h1 { font-size: clamp(54px, 13vw, 132px); }
.hero .sub {
  font-family: var(--title); font-size: clamp(20px, 3.6vw, 32px);
  color: var(--ink); margin: 18px 0 6px; text-shadow: 3px 3px 0 #1a0840;
}
.hero .tag { color: var(--ink-dim); max-width: 720px; margin: 10px auto 0; }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.badge {
  font-family: var(--pixel); font-size: 10px; letter-spacing: .05em;
  padding: 9px 12px; border-radius: 4px; background: #120a3a;
  border: 2px solid var(--panel-edge); box-shadow: 3px 3px 0 #05021a; color: var(--ink);
}
.badge b { color: var(--gold); font-weight: 400; }

nav.top {
  position: sticky; top: 0; z-index: 10;
  background: rgba(11, 6, 48, .9); backdrop-filter: blur(6px);
  border-bottom: 3px solid var(--panel-edge);
}
nav.top ul { list-style: none; margin: 0 auto; padding: 0 16px; display: flex; gap: 4px; overflow-x: auto; max-width: 1120px; }
nav.top a {
  display: block; padding: 12px 12px; white-space: nowrap; text-decoration: none;
  font-family: var(--title); font-size: 19px; color: var(--ink-dim);
}
nav.top a:hover, nav.top a:focus { color: var(--gold); }

section { padding: 56px 0 8px; }
section h2 { font-size: clamp(34px, 6vw, 54px); margin-bottom: 8px; }
section .lead { color: var(--ink-dim); max-width: 780px; margin: 10px 0 24px; }

/* ---------- Bevelled panels (HUD look) ---------- */
.panel {
  background: var(--panel);
  border: 3px solid var(--panel-edge);
  border-radius: 10px;
  box-shadow: inset 2px 2px 0 var(--panel-hi), inset -3px -3px 0 #24127a, 6px 6px 0 #05021a;
  padding: 22px;
}
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.panel h3 { font-family: var(--title); font-weight: 400; font-size: 25px; margin: 0 0 8px; color: var(--gold); text-shadow: 2px 2px 0 #1a0840; }
.panel p { margin: 0 0 10px; }
.panel ul { margin: 0; padding-left: 20px; }
.panel li { margin: 4px 0; }

/* ---------- Stat tiles ---------- */
.stat { text-align: center; padding: 18px 12px; }
.stat .num { font-family: var(--title); font-size: 46px; line-height: 1; color: var(--ink); text-shadow: 3px 3px 0 #1a0840; }
.stat .num small { font-size: 24px; color: var(--ink-dim); }
.stat .lbl { font-size: 14px; color: var(--ink-dim); margin-top: 8px; }
.stat .gem { width: 26px; height: 26px; margin: 0 auto 10px; }

/* ---------- Segmented progress bars ---------- */
.bar-row { margin: 14px 0; }
.bar-head { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; }
.bar-head span:last-child { font-family: var(--pixel); font-size: 12px; color: var(--gold); align-self: center; }
.bar {
  height: 22px; margin-top: 6px; background: #0a0526; border: 2px solid #05021a;
  border-radius: 4px; overflow: hidden; box-shadow: inset 0 2px 0 rgba(0,0,0,.6);
}
.bar > i {
  display: block; height: 100%; width: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,0,0,.35) 18px 21px),
    linear-gradient(180deg, #c7ff8a, var(--leaf) 45%, var(--leaf-dk));
  transition: width 1.4s cubic-bezier(.2,.8,.2,1);
}
.bar.orange > i { background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,0,0,.35) 18px 21px), linear-gradient(180deg, #ffd9a0, var(--carrot) 45%, var(--carrot-dk)); }
.bar.blue > i { background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,0,0,.35) 18px 21px), linear-gradient(180deg, #c8f1ff, var(--gem-blue) 45%, #1655c9); }
.note { font-size: 14px; color: var(--ink-dim); }

/* ---------- Feature table ---------- */
.ftable { width: 100%; border-collapse: collapse; font-size: 15px; }
.ftable th, .ftable td { padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(169, 155, 255, .2); vertical-align: top; }
.ftable th { font-family: var(--pixel); font-size: 10px; color: var(--ink-dim); font-weight: 400; }
.ftable td:first-child { font-family: var(--pixel); font-size: 11px; color: var(--ink-dim); white-space: nowrap; }
.pill { display: inline-block; font-family: var(--pixel); font-size: 9px; padding: 5px 7px; border-radius: 3px; color: #0b0630; white-space: nowrap; }
.pill.verified { background: var(--verified); }
.pill.implemented { background: var(--implemented); }
.pill.approx { background: var(--approx); }
.pill.na { background: var(--na); color: #fff; }
.pill.closed { background: var(--verified); }
.pill.impl { background: var(--carrot); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 14px; font-size: 14px; color: var(--ink-dim); }
.table-scroll { overflow-x: auto; }

/* ---------- Chart ---------- */
#parity-chart { width: 100%; height: auto; display: block; }
#parity-chart text { fill: var(--ink-dim); font-family: var(--body); font-size: 12px; }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 4px; background: repeating-linear-gradient(180deg, var(--carrot) 0 10px, var(--gold) 10px 20px); border-radius: 2px; }
.timeline li { position: relative; margin: 0 0 22px; }
.timeline li::before {
  content: ""; position: absolute; left: -26px; top: 6px; width: 16px; height: 16px;
  background: var(--gem-red); transform: rotate(45deg); border: 2px solid #1a0840; box-shadow: 0 0 10px var(--gem-red);
}
.timeline li.blue::before { background: var(--gem-blue); box-shadow: 0 0 10px var(--gem-blue); }
.timeline li.green::before { background: var(--leaf); box-shadow: 0 0 10px var(--leaf); }
.timeline time { font-family: var(--pixel); font-size: 11px; color: var(--gold); }
.timeline h4 { margin: 4px 0 2px; font-size: 19px; }
.timeline p { margin: 0; color: var(--ink-dim); }

/* ---------- Tech chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { font-size: 14px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: #1d1060; border: 2px solid #4b35c9; }

/* ---------- Roadmap ---------- */
.road .panel h3 { display: flex; align-items: center; gap: 10px; }
.road .lvl { font-family: var(--pixel); font-size: 10px; color: #0b0630; background: var(--carrot); padding: 5px 7px; border-radius: 3px; }

/* ---------- Ground strip + footer ---------- */
.ground {
  margin-top: 70px; height: 46px;
  background:
    linear-gradient(180deg, #7cff5c 0 8px, #2fa53e 8px 14px, transparent 14px),
    repeating-linear-gradient(90deg, #8a4b1e 0 32px, #6e3a15 32px 64px);
  border-top: 3px solid #0b2a10;
}
footer { background: #3a1d0c; color: #f3d9c2; padding: 22px 0 34px; font-size: 14px; }
footer p { margin: 6px 0; }
footer code { color: var(--gold); }

code { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: .9em; background: rgba(0,0,0,.3); padding: 1px 5px; border-radius: 4px; }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .panel { padding: 16px; }
  .stat .num { font-size: 38px; }
  .jj-title { -webkit-text-stroke: 1.5px #1a0840; }
}

/* ---------- Roadmap stages ---------- */
h3.stage { font-family: var(--title); font-weight: 400; font-size: 28px; margin: 40px 0 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; text-shadow: 3px 3px 0 #1a0840; }
h3.stage small { font-family: var(--pixel); font-size: 10px; color: var(--leaf); text-shadow: none; }
h3.stage + .lead { margin-top: 0; }
.milestone { border-color: var(--gold); box-shadow: inset 2px 2px 0 #fff3a8, inset -3px -3px 0 #8a5a00, 6px 6px 0 #05021a; }
.milestone h3 { color: var(--gold); }