/* ============================================================================
   Big Typing Quiz, front page.

   An arcade at night: the same tokens as css/app.css (deep indigo stage, cyan
   as the one interactive accent, amber for XP and currency, magenta for
   threats) worn as a landing page rather than as a tool. It is the sibling of
   Big World Quiz's daylight atlas and Big Piano Quiz's warm concert hall.

   This sheet is STANDALONE. It shares no code and no state with the app, so
   the palette is restated below rather than imported: change a value in
   css/app.css and copy it across, or the two halves of the site drift out of
   the same night. Every piece of artwork on the page is hand-built SVG, CSS or
   canvas, because an illustration that lives in a file is an illustration that
   can 404 on the one page a first-time visitor sees.

   No CSS nesting (there is no build step here and no autoprefixer), flat
   specificity, and every animation is switched off in one block at the end so
   nothing added above has to remember to opt out.
   ========================================================================= */

:root{
  /* Mirrored from css/app.css. Do not fork the values. */
  --bg:#080B14;
  --surface:#121829;
  --surface-2:#1B2238;
  --surface-3:#252E4A;

  --ink:#E9EFFF;
  --muted:#A4B2D2;
  --faint:#6B799C;

  --line:#222A44;
  --line-strong:#333D63;

  --brand:#38DFD2;
  --brand-2:#7BF5EC;
  --brand-deep:#128C84;
  --brand-ink:#04201E;
  --brand-tint:rgba(56,223,210,.13);

  --xp:#F2B33D;
  --xp-2:#FFD07A;

  --hazard:#FF5D8F;
  --violet:#8B7BFF;

  --good:#5BE59A;
  --bad:#FF6B6B;

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Rarity, mirrored from RARITY in js/loot.js. The rarity row on this page
     reads these, the app's plates read the copies in css/app.css, and the
     canvas reads the JS. All three have to agree. */
  --r-standard:#A4B2D2;
  --r-polished:#38DFD2;
  --r-rare:#8B7BFF;
  --r-elite:#F2B33D;
  --r-legendary:#FF5D8F;

  /* Page-local furniture. */
  --wrap:1160px;
  --glow:0 0 26px rgba(56,223,210,.32);
  --plate:linear-gradient(180deg,rgba(233,239,255,.05),rgba(233,239,255,.015));
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-padding-top:96px; background:var(--bg); -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
html,body{ margin:0; }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:rgba(56,223,210,.34); color:#F4FDFF; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--brand-2); outline-offset:3px; border-radius:5px; }
img,svg,canvas{ max-width:100%; }
img{ height:auto; }

/* Film grain over the stage, the same inline turbulence both sibling sites
   use, at the same low opacity. It is what stops a very dark flat page reading
   as a dead LCD: at 5% it is felt rather than seen. */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px 300px;
}
main,header,footer{ position:relative; z-index:1; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand); color:var(--brand-ink); padding:10px 16px;
  border-radius:0 0 10px 0; font:600 .9rem var(--sans);
}
.skip:focus{ left:0; }


/* ============ Type helpers ============ */
.eyebrow{
  font:500 .74rem var(--mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--brand); margin:0 0 18px;
}
h1,h2,h3{ font-family:var(--serif); font-optical-sizing:auto; margin:0; }
h1{
  font-size:clamp(2.5rem,5.6vw,4.4rem); font-weight:600; line-height:1.04;
  letter-spacing:-.018em; margin-bottom:24px;
}
h2{
  font-size:clamp(1.85rem,3.4vw,2.8rem); font-weight:600; line-height:1.12;
  letter-spacing:-.012em; margin-bottom:20px;
}
h3{ font-size:1.12rem; font-weight:600; letter-spacing:-.004em; margin-bottom:9px; }
.ink-cyan{
  background:linear-gradient(112deg,#B9FFF8 6%,var(--brand) 48%,var(--brand-deep) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ink-cyan em{ font-style:italic; }
.lede{
  font-size:clamp(1.02rem,1.4vw,1.14rem); color:var(--muted);
  max-width:660px; margin:0 0 30px;
}
.body{ color:var(--muted); margin:0 0 16px; max-width:540px; }
.body.dim{ color:var(--faint); }
.fine{ margin:14px 0 0; font-size:.86rem; color:var(--faint); }
.nb{ white-space:nowrap; }
.kbd-inline{
  font-family:var(--mono); font-size:.9em; color:var(--muted);
  border:1px solid var(--line-strong); border-radius:6px; padding:1px 7px;
  background:rgba(18,24,41,.8); white-space:nowrap;
}
.text-link{
  color:var(--brand); text-decoration:none; font-weight:600; font-size:.96rem;
  border-bottom:1px solid rgba(56,223,210,.35); padding-bottom:2px;
  display:inline-block;
}
.text-link:hover{ color:var(--brand-2); border-bottom-color:var(--brand-2); }
.text-link::after{ content:' \2192'; }


/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:999px; text-decoration:none; font:600 1rem var(--sans);
  padding:14px 28px; white-space:nowrap;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease,
             color .22s ease, filter .22s ease;
}
.btn.cyan{
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  color:var(--brand-ink);
  box-shadow:0 12px 32px -12px rgba(56,223,210,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn.cyan:hover{
  transform:translateY(-2px); filter:brightness(1.06);
  box-shadow:0 18px 40px -12px rgba(56,223,210,.75), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn.ghost{ border:1px solid var(--line-strong); color:var(--ink); }
.btn.ghost:hover{ border-color:var(--brand); color:var(--brand-2); transform:translateY(-2px); }
.btn.small{ padding:9px 18px; font-size:.86rem; }
.btn.big{ padding:18px 40px; font-size:1.1rem; }


/* ============ Scroll hairline & top bar ============ */
.scrollbar{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
  background:linear-gradient(90deg,var(--brand-2),var(--brand));
  transform-origin:0 50%; transform:scaleX(0);
}
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
/* Only once the page has moved does the bar earn a background: over the hero
   it should be furniture floating on the stage, not a shelf. */
.topbar.scrolled{
  background:rgba(8,11,20,.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
}
.topbar-inner{
  max-width:var(--wrap); margin:0 auto; padding:13px 24px;
  display:flex; align-items:center; gap:24px;
}
.wordmark{
  font-family:var(--serif); font-weight:700; font-size:1.16rem; letter-spacing:-.01em;
  text-decoration:none; display:inline-flex; align-items:center; gap:9px;
  flex:none; white-space:nowrap;
}
.wordmark em{ font-style:italic; color:var(--brand); }
/* The name sits in ONE span beside the mark: as bare flex children each word
   would become its own flex item, spaced by the gap and free to overflow. */
.wm-mark{ height:1.7em; width:auto; display:block; }
.topnav{
  display:flex; gap:20px; margin-left:auto; overflow-x:auto; max-width:100%;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.topnav::-webkit-scrollbar{ display:none; }
.topnav a{
  text-decoration:none; font:500 .88rem var(--sans); color:var(--muted);
  transition:color .2s ease; white-space:nowrap; padding:2px 0;
}
.topnav a:hover{ color:var(--brand); }
.topcta{ flex:none; }
@media (max-width:900px){ .topcta{ display:none; } }
@media (max-width:640px){ .topnav{ gap:15px; } .topnav a{ font-size:.82rem; } }


/* ============ Hero ============ */
.hero{ position:relative; overflow:hidden; padding:clamp(104px,13vh,148px) 0 clamp(56px,7vw,90px); }
.hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(56% 44% at 20% 4%, rgba(56,223,210,.15), transparent 68%),
    radial-gradient(44% 36% at 88% 12%, rgba(139,123,255,.14), transparent 70%),
    radial-gradient(72% 48% at 52% 104%, rgba(242,179,61,.08), transparent 64%);
}
/* A faint keyboard grid under the hero: the arcade's floor, drawn in two
   repeating gradients rather than an asset. */
.hero-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(51,61,99,.24) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(51,61,99,.18) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 34%, #000 12%, transparent 76%);
  mask-image:radial-gradient(72% 62% at 50% 34%, #000 12%, transparent 76%);
}
.hero-inner{
  position:relative; max-width:var(--wrap); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:minmax(320px,5fr) 6fr; gap:clamp(36px,5vw,72px);
  align-items:center;
}
.hero-copy{ min-width:0; }
.hero-fine{ margin:22px 0 0; font-size:.9rem; color:var(--faint); max-width:520px; }
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.cta-row.center{ justify-content:center; }
.hero-stage{ min-width:0; }


/* ============ The playable demo ============ */
.demo{
  border:1px solid var(--line); border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:0 30px 80px -32px rgba(0,0,0,.85);
}
.demo-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.live-hint{
  margin:0; display:flex; align-items:center; gap:9px;
  font:500 .72rem var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint);
}
.pulse-dot{
  width:7px; height:7px; border-radius:50%; background:var(--brand); flex:none;
  box-shadow:0 0 0 0 rgba(56,223,210,.5); animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(56,223,210,.5); }
  70%{ box-shadow:0 0 0 11px rgba(56,223,210,0); }
  100%{ box-shadow:0 0 0 0 rgba(56,223,210,0); }
}
.demo-read{ display:flex; align-items:center; gap:16px; }
.dr{ display:flex; align-items:baseline; gap:6px; }
.dr b{
  font:600 1rem var(--mono); font-variant-numeric:tabular-nums; color:var(--ink);
  min-width:1.4em; text-align:right;
}
.dr i{
  font:500 .64rem var(--mono); font-style:normal; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
}
.dr.hull{ gap:7px; align-items:center; }
.dr.hull .pips{ display:flex; gap:4px; }
.dr.hull .pip{
  width:9px; height:9px; border-radius:2px; background:var(--brand);
  box-shadow:0 0 8px rgba(56,223,210,.55);
}
.dr.hull .pip.out{ background:var(--surface-3); box-shadow:none; }

.demo-field{ position:relative; aspect-ratio:16/13; background:#060911; }
.demo-field canvas{ display:block; width:100%; height:100%; }
.demo-touch{
  position:absolute; left:0; right:0; bottom:0; padding:26px 16px 14px;
  display:flex; justify-content:center;
  background:linear-gradient(180deg,rgba(6,9,17,0),rgba(6,9,17,.9) 62%);
}
.demo-touch[hidden]{ display:none; }
.demo-foot{
  margin:0; padding:11px 16px; border-top:1px solid var(--line);
  font:400 .78rem var(--mono); color:var(--faint);
}
.demo-foot a{ color:var(--brand); text-decoration:none; }
.demo-foot a:hover{ text-decoration:underline; }
@media (max-width:1020px){ .demo-field{ aspect-ratio:16/10; } }
@media (max-width:520px){ .demo-field{ aspect-ratio:4/3; } .demo-read{ gap:12px; } }


/* ============ Stats band ============ */
.stats{
  background:linear-gradient(180deg,var(--surface),rgba(8,11,20,0));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stats-row{
  max-width:var(--wrap); margin:0 auto; padding:34px 24px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px 0;
}
.stat{ flex:1 1 190px; min-width:168px; text-align:center; padding:6px 20px; margin:0; }
.stat + .stat{ border-left:1px solid var(--line); }
.stat dt{
  font-family:var(--serif); font-weight:600; font-size:clamp(2rem,3.2vw,2.7rem);
  color:var(--brand); line-height:1; font-variant-numeric:tabular-nums;
}
.stat dd{ margin:9px 0 0; font-size:.85rem; color:var(--faint); }


/* ============ Band scaffolding ============ */
.band{ padding:clamp(84px,10vw,138px) 0; position:relative; }
.band.alt{
  background:linear-gradient(180deg,var(--surface),rgba(8,11,20,0) 92%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.band-head{ max-width:780px; margin-bottom:clamp(38px,5vw,60px); }
.band-note{
  max-width:780px; margin:clamp(38px,5vw,58px) auto 0; text-align:center;
  color:var(--muted); font-size:.96rem; padding-top:30px; position:relative;
}
.band-note::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:64px; height:1px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
}
.two-col{ display:grid; grid-template-columns:minmax(300px,5fr) 7fr; gap:clamp(40px,6vw,88px); align-items:start; }
.two-col.wide-right{ grid-template-columns:minmax(300px,5fr) 6fr; }
.two-col.flip{ grid-template-columns:6fr minmax(300px,5fr); }
.sticky-block{ position:sticky; top:104px; }

.card{
  background:var(--plate);
  border:1px solid var(--line); border-radius:18px; padding:26px;
  transition:border-color .3s ease, transform .3s ease;
}
.card:hover{ border-color:rgba(56,223,210,.3); }
.plain-card p{ margin:0 0 12px; font-size:.94rem; color:var(--faint); }
.plain-card p:last-of-type{ margin-bottom:0; }
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.chip-row{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; }
.chip-row li{
  font:500 .68rem var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line-strong); border-radius:999px;
  padding:5px 12px;
}
figure{ margin:0; }
figcaption{ color:var(--faint); }
.ic{
  width:44px; height:44px; margin-bottom:16px; overflow:visible;
  stroke:var(--brand); fill:none; stroke-width:1.5; stroke-linecap:round;
  stroke-linejoin:round; filter:drop-shadow(0 0 9px rgba(56,223,210,.28));
}
.ic .fill{ fill:var(--brand); stroke:none; }
.ic .thin{ stroke-width:1.1; opacity:.7; }


/* ============ Progression: the three tracks ============ */
.track-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.track-card p{ margin:0 0 12px; font-size:.95rem; color:var(--muted); }
.track-tag{
  display:inline-block; margin-bottom:14px;
  font:500 .64rem var(--mono); letter-spacing:.18em; text-transform:uppercase;
  border-radius:999px; padding:4px 11px;
}
.track-tag.lvl{ color:var(--brand); border:1px solid rgba(56,223,210,.4); background:var(--brand-tint); }
.track-tag.star{ color:var(--xp-2); border:1px solid rgba(242,179,61,.4); background:rgba(242,179,61,.1); }
.track-tag.chip{ color:var(--violet); border:1px solid rgba(139,123,255,.4); background:rgba(139,123,255,.1); }
.rate-list{ list-style:none; margin:18px 0 0; padding:0; }
.rate-list li{
  display:flex; align-items:baseline; gap:8px; padding:7px 0;
  border-top:1px solid var(--line);
}
.rate-list b{
  font:600 1rem var(--mono); font-variant-numeric:tabular-nums; color:var(--brand);
  min-width:2.6em; text-align:right;
}
.rate-list span{ font:500 .68rem var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.rate-list i{ font-style:normal; font-size:.85rem; color:var(--muted); margin-left:auto; }

.chart-fig{ margin:clamp(38px,5vw,56px) 0 0; }
.chart{ display:block; width:100%; height:auto; overflow:visible; }
.chart .axis line{ stroke:var(--line-strong); stroke-width:1; }
.chart .ticks line{ stroke:var(--line-strong); stroke-width:1; }
.chart .ticks text{
  font:500 .66rem var(--mono); fill:var(--faint); text-anchor:middle;
}
.chart .axis-name{ font:500 .66rem var(--mono); fill:var(--faint); letter-spacing:.14em; text-transform:uppercase; }
.chart .ln{ fill:none; stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; }
.chart .ln.xp{ stroke:var(--brand); filter:drop-shadow(0 0 8px rgba(56,223,210,.45)); }
.chart .ln.stars{ stroke:var(--xp); stroke-dasharray:7 6; stroke-width:2; }
.chart .ln.chips{ stroke:var(--violet); stroke-dasharray:2 6; stroke-width:2; }
.chart .lbl{ font:500 .72rem var(--mono); }
.chart .lbl.xp{ fill:var(--brand); }
.chart .lbl.stars{ fill:var(--xp); }
.chart .lbl.chips{ fill:var(--violet); }
.chart .dot.xp{ fill:var(--brand-2); }
.chart-fig figcaption{ margin-top:14px; text-align:center; font-size:.9rem; }


/* ============ Placement ============ */
.place-fig .place{ display:block; width:100%; height:auto; overflow:visible; }
.place .rail{ stroke:var(--line-strong); stroke-width:2; }
.place .rung line{ stroke:var(--line-strong); stroke-width:2; stroke-linecap:round; }
.place .rung line.mark{ stroke:var(--brand); stroke-width:3; }
.place .tick{ font:500 .74rem var(--mono); fill:var(--faint); text-anchor:middle; }
.place .tick.on{ font-size:1rem; font-weight:600; fill:var(--brand); }
.place .cap{ font:500 .68rem var(--mono); fill:var(--faint); }
.place .cap.start{ text-anchor:start; }
.place .cap.mid{ text-anchor:middle; fill:var(--brand); }
.place .cap.end{ text-anchor:end; }
.place .leap{
  fill:none; stroke:var(--brand); stroke-width:2; stroke-dasharray:5 6; opacity:.75;
}
.place .leap-head{ fill:var(--brand); }
.place .leap-lbl{
  font:500 .72rem var(--mono); fill:var(--brand); text-anchor:middle;
  letter-spacing:.12em; text-transform:uppercase;
}
.place-fig figcaption{ margin-top:16px; font-size:.9rem; max-width:520px; }


/* ============ The Academy ============ */
.academy-grid{ display:grid; grid-template-columns:7fr 5fr; gap:24px; align-items:start; }
.academy-side{ display:flex; flex-direction:column; gap:22px; }
.kb-card{ padding:0; overflow:hidden; }
.kb{ display:block; width:100%; background:linear-gradient(180deg,#0C1122,#080B14); padding:8px 0 0; }
.kb .krow rect{ fill:var(--surface-2); stroke:var(--line); stroke-width:1; }
.kb .krow.home rect{ fill:var(--surface-3); }
.kb .krow rect.lit{
  fill:rgba(242,179,61,.22); stroke:var(--xp); stroke-width:1.4;
}
.kb .klabel text{ font:500 .8rem var(--mono); fill:var(--faint); text-anchor:middle; }
.kb .klabel text.on{ fill:var(--xp-2); font-weight:600; }
.kb .bump line{ stroke:var(--xp-2); stroke-width:2.4; stroke-linecap:round; }
.kb .kcap{
  font:500 .68rem var(--mono); fill:var(--faint); text-anchor:middle;
  letter-spacing:.1em;
}
.kb-card figcaption{ padding:22px 26px 26px; }
.kb-card figcaption p{ margin:0; font-size:.93rem; }

.pullquote{
  margin:0; padding:26px 28px; border-radius:18px;
  border:1px solid rgba(56,223,210,.3);
  background:linear-gradient(150deg,var(--brand-tint),rgba(233,239,255,.02));
}
.pullquote p{
  margin:0 0 12px; font-family:var(--serif); font-weight:600; font-style:italic;
  font-size:clamp(1.35rem,2.4vw,1.75rem); line-height:1.2; color:var(--brand-2);
  letter-spacing:-.01em;
}
.pullquote cite{
  font-style:normal; font:500 .74rem var(--mono); color:var(--faint);
  letter-spacing:.04em; display:block;
}
.tick-list{ list-style:none; margin:0 0 14px; padding:0; }
.tick-list li{
  position:relative; padding:0 0 0 24px; margin-bottom:9px;
  font-size:.93rem; color:var(--muted);
}
.tick-list li::before{
  content:''; position:absolute; left:2px; top:.55em;
  width:8px; height:8px; border-radius:2px; background:var(--brand);
  box-shadow:0 0 8px rgba(56,223,210,.5);
}


/* ============ Game illustrations ============ */
.game-side{ display:flex; flex-direction:column; gap:22px; }
.art-card{ padding:0; overflow:hidden; }
.art{ display:block; width:100%; height:auto; background:linear-gradient(180deg,#070B16,#0B1120); }
.art-card figcaption{ padding:22px 26px 26px; }
.art-card figcaption p{ margin:0; font-size:.93rem; }
.art-card figcaption h3{ color:var(--ink); }

.starfall-art .stars circle{ fill:var(--faint); opacity:.5; }
.starfall-art .hull-shape{ fill:var(--surface-3); stroke:var(--line-strong); stroke-width:1.2; }
.starfall-art .rock .hull-shape{ fill:#1F2536; stroke:var(--faint); }
.starfall-art .plate{ fill:rgba(18,24,41,.9); stroke:var(--line-strong); stroke-width:1; }
.starfall-art .word{
  font:500 .82rem var(--mono); fill:var(--muted); text-anchor:middle;
  letter-spacing:.04em;
}
.starfall-art .locked .hull-shape{ stroke:var(--hazard); fill:#2A1524; }
.starfall-art .locked .plate{ stroke:var(--brand); fill:rgba(4,32,30,.85); }
.starfall-art .locked .word{ font-size:.92rem; }
.starfall-art .done{ fill:var(--brand); font-weight:600; }
.starfall-art .todo{ fill:var(--muted); }
.starfall-art .beam{
  stroke:var(--brand-2); stroke-width:2.5; stroke-linecap:round; opacity:.85;
  filter:drop-shadow(0 0 8px rgba(123,245,236,.75));
}
.starfall-art .dome{ fill:var(--surface-3); stroke:var(--brand); stroke-width:1.6; }
.starfall-art .turret{ fill:var(--brand); }
.starfall-art .deck{ fill:var(--surface-2); stroke:var(--line-strong); stroke-width:1; }
.starfall-art .hlab,.starfall-art .clab{
  font:500 .62rem var(--mono); fill:var(--faint); letter-spacing:.16em; text-transform:uppercase;
}
.starfall-art .htrack{ fill:var(--surface-2); stroke:var(--line); stroke-width:1; }
.starfall-art .hfill{ fill:var(--xp); }
.starfall-art .cval{ font:600 1rem var(--mono); fill:var(--xp-2); }

.sprint-art .watch .track{ fill:none; stroke:var(--surface-3); stroke-width:10; }
.sprint-art .watch .val{
  fill:none; stroke:var(--brand); stroke-width:10; stroke-linecap:round;
  stroke-dasharray:540; stroke-dashoffset:150;
  transform:rotate(-90deg); transform-origin:260px 140px;
  filter:drop-shadow(0 0 10px rgba(56,223,210,.4));
}
.sprint-art .stem{ fill:var(--surface-3); stroke:var(--line-strong); stroke-width:1; }
.sprint-art .big{
  font-family:var(--serif); font-weight:600; font-size:3rem; fill:var(--brand);
  text-anchor:middle;
}
.sprint-art .unit{
  font:500 .66rem var(--mono); fill:var(--faint); text-anchor:middle;
  letter-spacing:.18em; text-transform:uppercase;
}
.sprint-art .acc{ font:500 .74rem var(--mono); fill:var(--muted); text-anchor:middle; }
.sprint-art .line{ font:400 .92rem var(--mono); fill:var(--faint); }
.sprint-art .line.dim{ fill:var(--surface-3); }
.sprint-art .done{ fill:var(--ink); }
/* The character under the cursor, which is the only thing on that line that is
   neither typed nor waiting. */
.sprint-art .cur{ fill:var(--brand); font-weight:600; }
.sprint-art .todo{ fill:var(--faint); }
.sprint-art .ctrack{ fill:var(--surface-2); }
.sprint-art .cfill{ fill:var(--brand); opacity:.8; }

.soon-row{
  margin-top:clamp(40px,5vw,64px); padding:26px 28px; border-radius:18px;
  border:1px dashed var(--line-strong); background:rgba(18,24,41,.5);
}
.soon-lede{ margin:0 0 10px; font-size:.96rem; color:var(--muted); }
.soon-lede b{ color:var(--ink); }
.soon-fine{ margin:0; font-size:.86rem; color:var(--faint); }


/* ============ Gear & sectors ============ */
.portraits{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.portrait p{ margin:0 0 12px; font-size:.95rem; color:var(--muted); }
.p-tag{
  display:inline-block; margin-bottom:12px;
  font:500 .64rem var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint);
}
.loadout-fig{ margin:clamp(34px,4vw,52px) 0; }
.loadout{ display:block; width:100%; height:auto; }
.loadout .mount rect{ fill:rgba(18,24,41,.75); stroke:var(--line-strong); stroke-width:1.2; }
.loadout .mount.big rect{ stroke:var(--brand); fill:rgba(4,32,30,.4); }
.loadout .mount.big.alt2 rect{ stroke:var(--violet); fill:rgba(139,123,255,.08); }
.loadout .mount.socket rect{ stroke-dasharray:5 5; }
.loadout .m-name{
  font:500 .68rem var(--mono); fill:var(--faint); letter-spacing:.16em; text-transform:uppercase;
}
/* Sized so the longest item name in the board ("Recoil Damper") clears its
   socket: SVG text does not wrap and does not report an overflow, it simply
   runs out of the box. */
.loadout .m-item{ font:600 .84rem var(--mono); fill:var(--ink); }
.loadout .m-sub{ font:400 .74rem var(--mono); fill:var(--faint); }
.loadout .swap{
  font:500 .74rem var(--mono); fill:var(--muted); text-anchor:middle;
}
.loadout .foot-note{ font:400 .7rem var(--mono); fill:var(--faint); }
.gear-trio{ margin-top:8px; }


/* ============ Bosses & salvage ============ */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.tier-card{ display:flex; flex-direction:column; }
.tier-card p{ margin:0 0 12px; font-size:.93rem; color:var(--muted); }
.tier-art{
  display:block; width:100%; height:auto; margin-bottom:18px;
  border-radius:12px; background:rgba(8,11,20,.6);
  border:1px solid var(--line);
}
.tier-art .banner{ fill:rgba(139,123,255,.14); stroke:var(--violet); stroke-width:1.2; }
.tier-art .bolt{ fill:var(--xp-2); }
.tier-art .tname{
  font:600 .82rem var(--mono); fill:var(--ink); letter-spacing:.16em; text-anchor:start;
}
.tier-art .tmult{ font:500 .74rem var(--mono); fill:var(--xp-2); text-anchor:middle; }
.tier-art .tsec{ font:500 .68rem var(--mono); fill:var(--faint); text-anchor:middle; }
.tier-art .clock-track{ fill:none; stroke:var(--surface-3); stroke-width:6; }
.tier-art .clock-val{
  fill:none; stroke:var(--hazard); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:239; stroke-dashoffset:92;
  transform:rotate(-90deg); transform-origin:120px 58px;
}
.tier-art .mini-hull{ fill:var(--surface-3); stroke:var(--hazard); stroke-width:1.4; }
.tier-art .hp-track{ fill:var(--surface-2); stroke:var(--line); stroke-width:1; }
.tier-art .hp-fill{ fill:var(--hazard); opacity:.85; }
.tier-art .hp-seg{ stroke:var(--bg); stroke-width:2; }
.tier-art .bname{
  font:600 .84rem var(--mono); fill:var(--hazard); text-anchor:middle; letter-spacing:.16em;
}
.tier-art .shield{ fill:rgba(56,223,210,.12); stroke:var(--brand); stroke-width:1.2; }
.tier-art .sword{ font:600 .74rem var(--mono); fill:var(--brand-2); text-anchor:middle; letter-spacing:.1em; }

.salvage{
  margin-top:clamp(38px,5vw,56px);
  display:grid; grid-template-columns:7fr 5fr; gap:clamp(28px,4vw,52px); align-items:center;
}
.salvage-copy p{ margin:0 0 16px; color:var(--muted); font-size:.96rem; }
.rules{ list-style:none; margin:0; padding:0; }
.rules li{
  padding:12px 0; border-top:1px solid var(--line); font-size:.92rem; color:var(--faint);
}
.rules b{ color:var(--ink); font-weight:600; }
.rarity-row{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.rarity-row li{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding:12px 16px; border-radius:12px;
  border:1px solid var(--line); background:rgba(18,24,41,.6);
}
.rarity-row i{
  width:12px; height:12px; border-radius:3px; background:var(--c);
  box-shadow:0 0 12px var(--c);
}
.rarity-row b{ font:600 .92rem var(--mono); color:var(--c); font-weight:600; }
.rarity-row span{
  font:500 .66rem var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
}
.rarity-row .r-standard{ --c:var(--r-standard); }
.rarity-row .r-polished{ --c:var(--r-polished); }
.rarity-row .r-rare{ --c:var(--r-rare); }
.rarity-row .r-elite{ --c:var(--r-elite); }
.rarity-row .r-legendary{ --c:var(--r-legendary); }


/* ============ Versus ============ */
.vs{ display:block; width:100%; height:auto; }
.vs .lane-bg{ fill:rgba(18,24,41,.7); stroke:var(--line); stroke-width:1; }
.vs .who{
  font:500 .7rem var(--mono); fill:var(--faint); letter-spacing:.18em; text-transform:uppercase;
}
.vs .prog-track{ fill:var(--surface-3); }
.vs .prog-fill.me{ fill:var(--brand); filter:drop-shadow(0 0 8px rgba(56,223,210,.45)); }
.vs .prog-fill.you{ fill:var(--violet); }
.vs .wplate{ fill:rgba(8,11,20,.7); stroke:var(--line-strong); stroke-width:1; }
.vs .wplate.hit{ fill:rgba(4,32,30,.6); stroke:rgba(56,223,210,.45); }
.vs .wplate.live{ fill:rgba(56,223,210,.14); stroke:var(--brand); stroke-width:1.4; }
.vs .them .wplate.live{ fill:rgba(139,123,255,.14); stroke:var(--violet); }
.vs .words text{ font:500 .78rem var(--mono); fill:var(--muted); text-anchor:middle; }
.vs .seedline{
  font:500 .7rem var(--mono); fill:var(--faint); text-anchor:middle; letter-spacing:.1em;
}
.vs-fig figcaption{ margin-top:16px; font-size:.9rem; }


/* ============ Coda & footer ============ */
.coda{ position:relative; text-align:center; padding:clamp(100px,14vw,180px) 24px; overflow:hidden; }
.coda-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(52% 58% at 50% 44%, rgba(56,223,210,.14), transparent 72%);
}
.coda .eyebrow{ margin-bottom:20px; }
.coda-title{ font-size:clamp(2.8rem,8vw,5.6rem); letter-spacing:-.02em; margin-bottom:20px; }
.coda-title em{ font-style:italic; }
.coda .lede{ margin-left:auto; margin-right:auto; margin-bottom:34px; }

.foot{ border-top:1px solid var(--line); padding:52px 24px 68px; text-align:center; }
.foot-inner{ max-width:var(--wrap); margin:0 auto; }
.foot-brand{
  font-family:var(--serif); font-weight:700; font-size:1.26rem; margin:0 0 14px;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.foot-brand em{ font-style:italic; color:var(--brand); }
.foot-mark{ height:1.6em; }
.foot-nav{ display:flex; justify-content:center; gap:24px; flex-wrap:wrap; margin-bottom:18px; }
.foot-nav a{ color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:500; }
.foot-nav a:hover{ color:var(--brand); }
.foot-fine{ margin:0 auto; max-width:600px; font-size:.8rem; color:var(--faint); }


/* ============ Reveal on scroll ============
   Gated on html.js so a page with no JS (or with the script blocked) shows
   every section at full opacity rather than a blank scroll. */
html.js .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1);
}
html.js .reveal.d1{ transition-delay:.08s; }
html.js .reveal.d2{ transition-delay:.16s; }
html.js .reveal.d3{ transition-delay:.24s; }
html.js .reveal.d4{ transition-delay:.32s; }
html.js .reveal.in{ opacity:1; transform:none; }


/* ============ Responsive ============ */
@media (max-width:1020px){
  .hero-inner{ grid-template-columns:1fr; gap:40px; }
  .hero-stage{ max-width:620px; width:100%; }
  .two-col, .two-col.wide-right, .two-col.flip{ grid-template-columns:1fr; }
  .two-col.flip .col-intro{ order:-1; }
  .sticky-block{ position:static; }
  .track-grid, .tiers, .trio{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
  .academy-grid{ grid-template-columns:1fr; }
  .salvage{ grid-template-columns:1fr; }
  .stat + .stat{ border-left:0; }
  .stat{ flex-basis:150px; min-width:140px; }
}
@media (max-width:720px){
  .portraits{ grid-template-columns:1fr; }
  .band-note{ text-align:left; }
  .band-note::before{ left:0; transform:none; }
}
@media (max-width:520px){
  .btn{ padding:13px 22px; }
  .eyebrow{ letter-spacing:.17em; }
  .demo-head{ gap:10px; }
  .card{ padding:22px; }
  .foot-nav{ gap:16px; }
}


/* ============ Reduced motion ============
   One block, at the end, so nothing above has to remember. The demo's own
   motion is calmed inside js/home.js (no particles, no shake, a slower
   descent): it stays playable, because the descent IS the game. */
@media (prefers-reduced-motion: reduce){
  .pulse-dot{ animation:none; }
  html.js .reveal{ opacity:1; transform:none; transition:none; }
  .btn, .card, .topbar{ transition:none; }
  .btn.cyan:hover, .btn.ghost:hover{ transform:none; }
}