/* Weird World landing — shared styles (index + legal pages).
   Static, no build step. Colours follow the in-game palette. */

:root {
  --bg: #0E0626;
  --bg2: #170C33;
  --card: #1E1142;
  --card2: #26164F;
  --line: rgba(190, 150, 255, .18);
  --text: #F6F0FF;
  --dim: #BDAEDD;
  --magenta: #FF3CAC;
  --magenta2: #FF6BD6;
  --orange: #EB8D04;
  --orange2: #FFA53C;
  --mint: #5CF2C0;
  --mint2: #7DFFC8;
  --gold: #FFD166;
  --cyan: #3FE3F5; /* Moonwalk Fitness accent (fitness section) */
  --display: "Bungee", "Impact", system-ui, sans-serif;
  --tech: "Chakra Petch", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 16px;
  --max: 1200px;
  --radius: 22px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
@media (min-width: 700px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
/* Clip on html too: the tilted marquee and the giant ghost letters poke past
   the viewport, and body alone didn't stop the page scrolling sideways. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--body);
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--magenta); color: #12061f; }

:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--mint); color: #08140f; padding: 10px 16px;
  border-radius: 10px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- global texture: grain + scanlines ---------- */
body::before, body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60;
}
body::before {
  opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
  opacity: .25;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .22) 2px 3px);
}

/* ---------- type ---------- */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 0;
  line-height: 1;
}
h2 { font-size: clamp(34px, 7.4vw, 76px); }
h3 { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.15; }
p { margin: 0; }
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 13px/1 var(--tech);
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 18px;
}
.kicker::before {
  content: ""; width: 28px; height: 2px; background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.lead { font-size: clamp(17px, 2vw, 20px); color: var(--dim); max-width: 34em; }
.grad-mo { background: linear-gradient(95deg, var(--magenta2), var(--magenta) 40%, var(--orange2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-cy { background: linear-gradient(95deg, var(--cyan), var(--mint2) 55%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-mg { background: linear-gradient(95deg, var(--mint2), var(--mint) 45%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.glow-m { text-shadow: 0 0 28px rgba(255, 60, 172, .45); }
.c-mint { color: var(--mint); } .c-gold { color: var(--gold); } .c-mag { color: var(--magenta2); } .c-orange { color: var(--orange2); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- top bar ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.bar.scrolled {
  background: rgba(14, 6, 38, .82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.bar .wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.bar .brand img { height: 44px; width: auto; filter: drop-shadow(0 4px 14px rgba(255, 60, 172, .4)); }
.bar nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.bar nav a.nl {
  font: 600 13px/1 var(--tech); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--dim); padding: 8px 0;
}
.bar nav a.nl:hover { color: var(--text); }
@media (max-width: 899px) { .bar nav a.nl { display: none; } }

/* ---------- buttons ---------- */
.btn {
  --h: 58px;
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  min-height: var(--h); padding: 10px 22px 10px 18px;
  font: 400 15px/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; color: #1A0718;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: transform .2s var(--ease), filter .2s;
}
.btn small {
  display: block; font: 700 10px/1.2 var(--tech); letter-spacing: .2em; opacity: .8; margin-bottom: 3px;
}
.btn svg { width: 26px; height: 26px; flex: none; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-primary {
  background: linear-gradient(100deg, var(--magenta) 0%, var(--magenta2) 45%, var(--orange2) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset;
}
.btn-primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: sheen 4.5s 1.5s infinite;
}
.btn-ghost {
  color: var(--text);
  background: linear-gradient(var(--bg2), var(--bg2)) padding-box,
              linear-gradient(100deg, var(--mint), var(--mint2)) border-box;
  border: 2px solid transparent;
}
.btn-ghost:hover { background: linear-gradient(rgba(92, 242, 192, .14), rgba(92, 242, 192, .14)) padding-box, linear-gradient(100deg, var(--mint), var(--mint2)) border-box; }
.btn-sm { --h: 42px; font-size: 12px; padding: 8px 16px; }
.btn-wrap { position: relative; display: inline-block; filter: drop-shadow(0 10px 26px rgba(255, 60, 172, .45)); }
.beta {
  display: inline-block; margin-left: 6px; padding: 3px 7px 2px;
  font: 700 10px/1 var(--tech); letter-spacing: .14em;
  color: #08140f; background: var(--mint); border-radius: 4px; vertical-align: 2px;
}
.ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@keyframes sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ---------- section scaffolding ---------- */
.screen {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: 104px 0 88px;
  overflow: hidden;
  isolation: isolate;
}
.screen > .wrap { position: relative; z-index: 2; }
.ghost {
  position: absolute; z-index: 0; left: 50%; top: 50%;
  font: 400 clamp(110px, 24vw, 340px)/0.85 var(--display);
  text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(190, 150, 255, .09);
  transform: translate(-50%, -50%); pointer-events: none; user-select: none;
}
.split { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 72px; }
  .split.media-left > .media { order: -1; }
}
.copy h2 { margin-bottom: 22px; }
.copy .lead { margin-bottom: 28px; }

/* bullet list */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 34px; color: var(--dim); }
.ticks li b { color: var(--text); font-weight: 700; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 18px;
  background: var(--mint); clip-path: polygon(0 0, 100% 50%, 0 100%, 28% 50%);
  filter: drop-shadow(0 0 6px var(--mint));
}
.ticks.mag li::before { background: var(--magenta2); }
.ticks.gold li::before { background: var(--gold); }
.ticks.orange li::before { background: var(--orange2); }
.ticks.cyan li::before { background: var(--cyan); filter: drop-shadow(0 0 6px var(--cyan)); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  font: 700 12px/1 var(--tech); letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: var(--text);
}
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }

/* ---------- phone frame + screenshot placeholders ---------- */
.phone {
  position: relative; margin: 0 auto;
  width: min(100%, 340px); aspect-ratio: 9 / 19.5;
  border-radius: 44px; padding: 11px;
  background: linear-gradient(160deg, #3a2a66, #120a26 40%, #2a1650);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .12) inset,
    0 40px 90px rgba(0, 0, 0, .65),
    0 0 80px var(--phone-glow, rgba(255, 60, 172, .28));
}
.phone::before { /* camera punch-hole */
  content: ""; position: absolute; z-index: 3; top: 22px; left: 50%; width: 12px; height: 12px;
  transform: translateX(-50%); border-radius: 50%; background: #05020c; box-shadow: 0 0 0 2px #1d1238;
}
.phone .screen-in {
  position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: var(--bg2);
}
.phone .screen-in img { width: 100%; height: 100%; object-fit: cover; }
.phone.sm { width: min(100%, 250px); border-radius: 36px; padding: 9px; }
.phone.sm .screen-in { border-radius: 28px; }
.phone.tilt-l { rotate: -4deg; }
.phone.tilt-r { rotate: 4deg; }

/* Placeholder look: neon map grid + caption. Replaced automatically when the
   file named in main.js (SHOTS) exists. */
.ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px 18px; gap: 8px;
  background:
    radial-gradient(120% 70% at 30% 20%, rgba(255, 60, 172, .35), transparent 60%),
    radial-gradient(90% 60% at 80% 85%, rgba(92, 242, 192, .25), transparent 60%),
    linear-gradient(rgba(190, 150, 255, .10) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(190, 150, 255, .10) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(160deg, #24124d, #0e0626);
}
.ph::before { /* fake street */
  content: ""; position: absolute; left: -20%; right: -20%; top: 42%; height: 26px;
  background: rgba(255, 209, 102, .12); border-top: 2px dashed rgba(255, 209, 102, .35);
  transform: rotate(-28deg);
}
.ph .ph-tag { font: 700 10px/1 var(--tech); letter-spacing: .24em; color: var(--mint); position: relative; }
.ph .ph-cap { font: 400 15px/1.15 var(--display); text-transform: uppercase; position: relative; }
.ph .ph-file { font: 600 11px/1.3 ui-monospace, Consolas, monospace; color: var(--dim); position: relative; word-break: break-all; }
.shot-loaded .ph { display: none; }

/* ---------- reveal on scroll ---------- */
.js .rv { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv-l { transform: translateX(-40px); }
.js .rv-r { transform: translateX(40px); }
.js .rv-z { transform: scale(.92); }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes marquee { to { transform: translateX(-50%); } }
.bob { animation: bob 5s ease-in-out infinite; }

/* =========================================================
   1. HERO
   ========================================================= */
.hero { padding-top: 96px; align-items: flex-end; }
@media (min-width: 900px) { .hero { align-items: center; } }
.hero .bg { position: absolute; inset: 0; z-index: -2; }
.hero .bg picture { display: block; height: 100%; }
.hero .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
@media (min-width: 900px) {
  .hero .bg img { filter: blur(3px) saturate(1.15); transform: scale(1.06); object-position: center; }
}
.hero::after { /* legibility shade */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--bg) 4%, rgba(14, 6, 38, .82) 38%, rgba(14, 6, 38, .15) 70%, rgba(14, 6, 38, .55)),
    radial-gradient(80% 60% at 0% 100%, rgba(255, 60, 172, .25), transparent 70%);
}
/* Phones: the key art carries its own big WEIRD WORLD logo, and the copy
   used to sit right on top of it. Keep the logo clear at the top and start
   the copy below it, on a solid fade. */
@media (max-width: 899px) {
  .hero { padding-top: 48vh; padding-top: 48svh; }
  .hero .bg { bottom: auto; height: 72vh; height: 72svh; }
  .hero .bg img { object-position: center top; }
  .hero::after {
    background:
      linear-gradient(to bottom, rgba(14, 6, 38, .25) 0%, rgba(14, 6, 38, 0) 18%, rgba(14, 6, 38, 0) 32%, rgba(14, 6, 38, .9) 46%, var(--bg) 60%),
      radial-gradient(80% 60% at 0% 100%, rgba(255, 60, 172, .25), transparent 70%);
  }
}
/* Phones: the CTA goes straight under the headline, so it is on the first
   screen; the paragraph follows it. */
@media (max-width: 899px) {
  .hero .copy-col { display: flex; flex-direction: column; }
  .hero .copy-col .ctas { order: 1; margin-bottom: 22px; }
  .hero .copy-col .lead { order: 2; margin-bottom: 0; }
  .hero .copy-col .meta { order: 3; }
  .hero .ctas .btn-wrap, .hero .ctas .btn { width: 100%; }
}
@media (min-width: 900px) {
  .hero::after {
    background:
      linear-gradient(90deg, rgba(14, 6, 38, .96) 8%, rgba(14, 6, 38, .72) 48%, rgba(14, 6, 38, .35)),
      linear-gradient(to top, var(--bg), transparent 30%);
  }
}
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr .85fr; } }
.hero h1 {
  /* Height-capped too: the main CTA ("Enter the Weird World") must be on
     the first screen of a laptop, under four lines of headline. */
  font-size: clamp(46px, min(11vw, 9vh), 112px); line-height: .9; letter-spacing: .01em;
  margin: 0 0 22px;
}
.hero h1 .l1 { display: block; color: var(--text); text-shadow: 0 6px 0 rgba(0, 0, 0, .35); }
.hero h1 .l2 {
  display: block;
  background: linear-gradient(95deg, var(--magenta2), var(--magenta) 35%, var(--orange2) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(255, 60, 172, .55));
}
.hero .lead { color: #E3D8FA; margin-bottom: 32px; }
.hero .logo-top { display: none; width: clamp(130px, min(26vw, 20vh), 230px); margin-bottom: 18px; filter: drop-shadow(0 8px 30px rgba(255, 60, 172, .5)); }
.hero .meta { margin-top: 22px; font: 600 13px/1.4 var(--tech); letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.hero .art { display: none; position: relative; justify-self: center; }
@media (min-width: 900px) { .hero .art { display: block; } .hero .logo-top { display: block; } }
.hero .card-art {
  /* vh cap: the card is 9:20, and its height sets the hero row's height. */
  width: min(380px, 32vw, 38vh); border-radius: 26px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 0 40px 100px rgba(0, 0, 0, .7), 0 0 90px rgba(255, 60, 172, .4);
  transform: perspective(1200px) rotateY(-12deg) rotateX(4deg);
}
.hero .dancer { position: absolute; width: 52%; left: -30%; bottom: -6%; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)); }
.scroll-hint {
  position: absolute; left: 50%; bottom: 22px; z-index: 3; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: 700 10px/1 var(--tech); letter-spacing: .3em; color: var(--dim); text-decoration: none;
}
.scroll-hint span { width: 2px; height: 34px; background: linear-gradient(var(--mint), transparent); animation: pulse 1.8s infinite; }
@media (max-width: 899px) { .scroll-hint { display: none; } }

/* marquee strip */
.strip {
  position: relative; z-index: 3; overflow: hidden; white-space: nowrap;
  background: linear-gradient(90deg, var(--magenta), var(--orange2));
  color: #1a0718; transform: rotate(-1.6deg); margin: -22px -10px 0;
  box-shadow: 0 10px 40px rgba(255, 60, 172, .35);
}
.strip .track { display: inline-flex; animation: marquee 32s linear infinite; }
.strip span { font: 400 clamp(16px, 2.4vw, 22px)/1 var(--display); letter-spacing: .06em; padding: 14px 18px; }
.strip span.dot { padding: 14px 0; opacity: .5; }

/* =========================================================
   2. STREETS
   ========================================================= */
.streets { background: radial-gradient(70% 60% at 85% 30%, rgba(92, 242, 192, .14), transparent 70%), var(--bg); }
.passes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 30px; }
.pass {
  background: linear-gradient(170deg, var(--card2), var(--card)); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px 12px; text-align: center;
}
.pass .em { font-size: 28px; line-height: 1; display: block; margin-bottom: 8px; }
.pass b { display: block; font: 400 15px/1 var(--display); text-transform: uppercase; }
.pass span { display: block; margin-top: 6px; font: 700 12px/1.2 var(--tech); color: var(--mint); letter-spacing: .08em; }
.note { margin-top: 14px; font-size: 13px; color: var(--dim); }
.streets .media { position: relative; }
.float-tag {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 14px;
  background: rgba(23, 12, 51, .9); border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 700 12px/1.2 var(--tech); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.float-tag .em { font-size: 22px; }
.float-tag small { display: block; color: var(--dim); font-weight: 600; letter-spacing: .04em; text-transform: none; font-family: var(--body); }
.ft-1 { top: 12%; left: max(0px, calc(50% - 250px)); --d: .2s; }
.ft-2 { bottom: 16%; right: max(0px, calc(50% - 260px)); --d: .35s; }
@media (max-width: 420px) { .ft-1 { left: 0; } .ft-2 { right: 0; } }

/* =========================================================
   3. CAPTURE
   ========================================================= */
.capture {
  background:
    radial-gradient(60% 60% at 15% 50%, rgba(255, 60, 172, .2), transparent 70%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}
.capture .media { position: relative; padding: 10px 0 40px; }
.capture .phone { --phone-glow: rgba(255, 165, 60, .35); }
.polaroid {
  position: absolute; z-index: 4; width: min(46%, 190px); right: max(0px, calc(50% - 250px)); bottom: 0;
  background: #f5f0ff; padding: 10px 10px 34px; border-radius: 6px; rotate: 7deg;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .6);
}
.polaroid .pic { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 3px; background: #222; }
.polaroid .pic img { width: 100%; height: 100%; object-fit: cover; }
.polaroid .pic .ph { padding: 10px; }
.polaroid .pic .ph-cap { font-size: 11px; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font: 700 12px/1 var(--tech); color: #2a1650; letter-spacing: .1em; text-transform: uppercase; }
.steps3 { counter-reset: s; display: grid; gap: 14px; margin-top: 8px; }
.steps3 li {
  list-style: none; counter-increment: s; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start;
  background: rgba(255, 255, 255, .035); border: 1px solid var(--line); border-radius: 16px; padding: 14px;
}
.steps3 li::before {
  content: counter(s, decimal-leading-zero);
  font: 400 22px/52px var(--display); text-align: center; color: #1a0718;
  background: linear-gradient(135deg, var(--orange2), var(--magenta)); border-radius: 12px; height: 52px;
}
.steps3 b { color: var(--text); display: block; font: 400 15px/1.2 var(--display); text-transform: uppercase; margin: 4px 0 4px; }
.steps3 span { color: var(--dim); font-size: 15px; }
.steps3 { padding: 0; margin: 0; }

/* =========================================================
   4. HEROES
   ========================================================= */
.heroes { background: radial-gradient(70% 50% at 50% 0%, rgba(255, 209, 102, .12), transparent 70%), var(--bg2); }
.heroes .wrap { display: flex; flex-direction: column; }
.heroes .top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.heroes .top .lead { margin-top: 18px; }
.car-nav { display: flex; gap: 10px; }
.car-nav button {
  width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer;
  background: var(--card); color: var(--text); font: 400 20px/1 var(--display);
  transition: background .2s, border-color .2s;
}
.car-nav button:hover { background: var(--card2); border-color: var(--mint); }
.carousel {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 280px); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
  padding: 10px var(--gutter) 26px; margin: 0 calc(var(--gutter) * -1);
  scrollbar-width: thin; scrollbar-color: var(--magenta) transparent;
  overscroll-behavior-x: contain;
}
@media (min-width: 900px) { .carousel { grid-auto-columns: 260px; } }
.hcard {
  --acc: var(--mint);
  scroll-snap-align: start; position: relative; overflow: hidden;
  border-radius: var(--radius); background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--line); display: flex; flex-direction: column;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.hcard:hover { transform: translateY(-6px); border-color: var(--acc); box-shadow: 0 20px 50px rgba(0, 0, 0, .45), 0 0 40px color-mix(in srgb, var(--acc) 30%, transparent); }
.hcard .port { position: relative; aspect-ratio: 1; overflow: hidden; background: #1a0d3a; }
.hcard .port img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.hcard .port::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 6, 38, .85), transparent 45%); }
.hcard .port .ph { padding: 16px; }
.hcard .badge {
  position: absolute; z-index: 2; top: 12px; left: 12px; padding: 5px 9px; border-radius: 6px;
  font: 700 10px/1 var(--tech); letter-spacing: .16em; text-transform: uppercase;
  background: var(--acc); color: #120620;
}
.hcard .body { padding: 4px 18px 20px; margin-top: -34px; position: relative; z-index: 2; }
.hcard h3 { font-size: 24px; color: var(--acc); text-shadow: 0 0 18px color-mix(in srgb, var(--acc) 50%, transparent); }
.hcard .role { display: block; margin: 6px 0 10px; font: 700 11px/1 var(--tech); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.hcard p { font-size: 14px; color: var(--dim); line-height: 1.5; }
.wardrobe { display: grid; gap: 28px; align-items: center; margin-top: 46px; }
@media (min-width: 900px) { .wardrobe { grid-template-columns: 1fr auto; } }
.looks { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.looks img {
  width: 84px; height: 84px; object-fit: contain; border-radius: 16px;
  background: radial-gradient(circle at 50% 60%, rgba(255, 107, 214, .25), var(--card) 70%);
  border: 1px solid var(--line);
}
.dance-row { display: flex; justify-content: center; align-items: flex-end; }
.dance-row img { width: clamp(110px, 16vw, 170px); margin: 0 -14px; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .5)); }
.dance-row img:nth-child(2) { width: clamp(140px, 20vw, 210px); z-index: 1; }

/* =========================================================
   5. MONSTERS
   ========================================================= */
.monsters {
  background:
    radial-gradient(60% 55% at 75% 40%, rgba(235, 141, 4, .2), transparent 70%),
    radial-gradient(40% 40% at 10% 90%, rgba(255, 60, 172, .15), transparent 70%),
    var(--bg);
}
.beast { position: relative; display: grid; place-items: center; margin: 0 auto; width: min(100%, 460px); aspect-ratio: 1; }
.beast .ring {
  position: absolute; inset: 6%; border-radius: 50%;
  border: 2px dashed rgba(255, 165, 60, .5);
  animation: spin 40s linear infinite;
}
.beast .ring.r2 { inset: 0; border: 1px solid rgba(255, 60, 172, .3); animation-duration: 70s; animation-direction: reverse; }
.beast .core {
  position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 165, 60, .35), rgba(255, 60, 172, .12) 55%, transparent 70%);
  animation: pulse 3.5s ease-in-out infinite;
}
.beast img.face { position: relative; width: 74%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7)) drop-shadow(0 0 30px rgba(255, 90, 40, .35)); }
/* 3D monster: the canvas sits over the rings; the picture is the fallback. */
.beast .stage { position: absolute; inset: 0; z-index: 2; }
.beast .stage model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: transparent; cursor: grab; }
.beast .stage model-viewer:active { cursor: grabbing; }
.beast.has-3d img.face { opacity: 0; transition: opacity .4s; }
.beast-hint { position: absolute; z-index: 3; left: 0; right: 0; bottom: -30px; margin: 0; text-align: center; font: 700 11px/1 var(--tech); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); opacity: 0; transition: opacity .4s; }
.beast.has-3d .beast-hint { opacity: .8; }
.roster { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 48px auto 0; max-width: 460px; }
.roster button {
  font: 700 12px/1 var(--tech); letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); background: rgba(18, 6, 31, .7); border: 1px solid rgba(255, 165, 60, .35);
  padding: 9px 12px; border-radius: 10px; cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.roster button:hover { color: var(--text); border-color: var(--orange2); }
.roster button.on { color: #1A0718; background: linear-gradient(100deg, var(--orange2), var(--magenta2)); border-color: transparent; }
.lvl {
  position: absolute; z-index: 3; font: 400 18px/1 var(--display); padding: 9px 14px; border-radius: 12px;
  background: #12061f; border: 2px solid var(--orange2); color: var(--orange2);
  box-shadow: 0 0 24px rgba(255, 165, 60, .5);
}
.lvl.a { top: 6%; right: 8%; font-size: 15px; }
.hpbar {
  position: absolute; z-index: 3; left: 10%; right: 10%; bottom: 4%;
  background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; padding: 4px;
}
.hpbar i { display: block; height: 12px; width: 64%; border-radius: 5px; background: linear-gradient(90deg, var(--magenta), var(--orange2)); box-shadow: 0 0 14px var(--magenta); }
.hpbar span { position: absolute; right: 8px; top: -22px; font: 700 11px/1 var(--tech); letter-spacing: .14em; color: var(--dim); }
.monster-shots { display: flex; justify-content: center; gap: 18px; margin-top: 56px; }
.monster-shots .phone { margin: 0; --phone-glow: rgba(255, 165, 60, .25); }
@media (max-width: 599px) { .monster-shots .phone + .phone { display: none; } }
.relics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.relics img { width: 60px; height: 60px; padding: 6px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }

/* =========================================================
   6. CLANS
   ========================================================= */
.clans {
  background:
    conic-gradient(from 200deg at 70% 50%, rgba(92, 242, 192, .10), rgba(255, 60, 172, .12), rgba(255, 209, 102, .08), rgba(92, 242, 192, .10)),
    var(--bg2);
}
.turf { position: relative; width: min(100%, 520px); margin: 0 auto; padding: 40px 0; }
.turf .phone { --phone-glow: rgba(92, 242, 192, .3); }
.crest {
  position: absolute; z-index: 4; width: clamp(78px, 20vw, 120px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .2); box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 0 30px var(--cg, rgba(92, 242, 192, .35));
}
.crest img { width: 100%; height: 100%; }
.crest.c1 { top: 4%; left: 0; --cg: rgba(255, 165, 60, .4); }
.crest.c2 { top: 16%; right: 0; --cg: rgba(170, 130, 255, .5); }
.crest.c3 { bottom: 16%; left: 2%; --cg: rgba(255, 60, 172, .45); }
.crest.c4 { bottom: 2%; right: 4%; --cg: rgba(92, 242, 192, .45); }
.clan-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.clan-list li { padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.clan-list b { display: block; font: 400 14px/1.1 var(--display); text-transform: uppercase; }
.clan-list span { font-size: 13px; color: var(--dim); }
.stat-row { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 28px; }
.stat b { display: block; font: 400 clamp(30px, 5vw, 44px)/1 var(--display); }
.stat span { font: 700 11px/1.3 var(--tech); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }

/* =========================================================
   7. EARN
   ========================================================= */
.earn { background: radial-gradient(70% 60% at 50% 100%, rgba(255, 209, 102, .14), transparent 70%), var(--bg); }
.earn .head { text-align: center; max-width: 820px; margin: 0 auto 46px; }
.earn .head .kicker { justify-content: center; }
.earn .head .lead { margin: 18px auto 0; }
.ecards { display: grid; gap: 16px; }
@media (min-width: 640px) { .ecards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ecards { grid-template-columns: repeat(3, 1fr); } }
.ecard {
  position: relative; overflow: hidden; padding: 24px; border-radius: var(--radius);
  background: linear-gradient(170deg, var(--card2), var(--card)); border: 1px solid var(--line);
}
.ecard::before {
  content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -80px; border-radius: 50%;
  background: radial-gradient(circle, var(--eg, rgba(92, 242, 192, .22)), transparent 70%);
}
.ecard .icons { display: flex; margin-bottom: 18px; position: relative; }
.ecard .icons img, .ecard .icons .ic {
  width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--card2); background: #12061f;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.ecard .icons > * + * { margin-left: -14px; }
.ecard .icons .ic { display: grid; place-items: center; font-size: 26px; }
.ecard h3 { margin-bottom: 10px; position: relative; }
.ecard p { color: var(--dim); font-size: 15px; position: relative; }
.ecard .tag {
  display: inline-block; margin-top: 14px; padding: 5px 9px; border-radius: 6px;
  font: 700 10px/1 var(--tech); letter-spacing: .16em; text-transform: uppercase;
  background: rgba(92, 242, 192, .14); color: var(--mint); position: relative;
}
.ecard .tag.soon { background: rgba(255, 209, 102, .14); color: var(--gold); }
.ecard .tag.free { background: rgba(255, 107, 214, .14); color: var(--magenta2); }
.fine {
  margin: 30px auto 0; max-width: 820px; text-align: center; font-size: 13px; color: var(--dim);
  padding: 14px 18px; border: 1px dashed var(--line); border-radius: 14px;
}

/* =========================================================
   8. FINAL CTA
   ========================================================= */
.final { text-align: center; background: radial-gradient(70% 60% at 50% 40%, rgba(255, 60, 172, .28), transparent 70%), linear-gradient(180deg, var(--bg), #08031a); }
.final .wrap { display: flex; flex-direction: column; align-items: center; }
.final h2 { font-size: clamp(42px, 10vw, 120px); margin: 10px 0 18px; }
.final .lead { margin: 0 auto 34px; }
.final .ctas { justify-content: center; }
.final .dancers { display: flex; justify-content: center; align-items: flex-end; margin-bottom: 8px; }
.final .dancers img { width: clamp(96px, 18vw, 160px); margin: 0 -10px; }
.final .dancers img:nth-child(2) { animation-delay: -1.2s; }
.final .dancers img:nth-child(3) { animation-delay: -2.4s; }
.final .dancers img:nth-child(4) { animation-delay: -3.6s; }
.later { margin-top: 22px; font: 700 12px/1.4 var(--tech); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

/* ---------- footer ---------- */
.foot { position: relative; z-index: 2; border-top: 1px solid var(--line); background: #08031a; padding: 36px 0 44px; color: var(--dim); font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; }
.foot .brand img { height: 52px; width: auto; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { text-decoration: none; padding: 6px 0; }
.foot a:hover { color: var(--text); }
.foot .copy-line { width: 100%; font-size: 12px; opacity: .8; }

/* ---------- legal stub pages ---------- */
.legal { min-height: 100vh; padding: 120px 0 80px; background: radial-gradient(60% 40% at 50% 0%, rgba(255, 60, 172, .18), transparent 70%), var(--bg); }
.legal .wrap { max-width: 820px; }
.legal h1 { font-size: clamp(36px, 8vw, 64px); margin: 0 0 18px; }
.legal h2 { font-size: 22px; margin: 34px 0 10px; }
.legal p, .legal li { color: var(--dim); }
.legal p + p { margin-top: 12px; }
.legal h3 { font-size: 17px; margin: 22px 0 8px; }
.legal table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; color: var(--dim); display: block; overflow-x: auto; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.legal th { color: var(--text); font-weight: 700; }
.legal .publisher { margin-top: 28px; font-size: 14px; }
.todo {
  margin: 28px 0; padding: 20px 22px; border-radius: 16px;
  border: 2px dashed var(--gold); background: rgba(255, 209, 102, .07); color: var(--text);
}
.todo strong { font: 700 12px/1 var(--tech); letter-spacing: .2em; color: var(--gold); display: block; margin-bottom: 8px; }
.back { display: inline-block; margin-top: 36px; color: var(--mint); font-weight: 700; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .strip .track { transform: none; }
}

/* =========================================================
   MOVE — steps, walk missions, Moonwalk $MF
   ========================================================= */
.fitness {
  background:
    radial-gradient(55% 50% at 78% 38%, rgba(63, 227, 245, .16), transparent 70%),
    radial-gradient(40% 40% at 8% 85%, rgba(92, 242, 192, .12), transparent 70%),
    var(--bg2);
}
.steps-card {
  position: relative; margin: 0 auto; width: min(100%, 400px); padding: 26px 22px 22px;
  background: linear-gradient(160deg, rgba(38, 22, 79, .95), rgba(18, 6, 31, .95));
  border: 1px solid rgba(63, 227, 245, .35); border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(63, 227, 245, .15);
}
.steps-ring {
  --p: 92%;
  width: 190px; aspect-ratio: 1; margin: 0 auto 20px; border-radius: 50%; padding: 14px;
  background: conic-gradient(var(--cyan) 0 var(--p), rgba(255, 255, 255, .08) var(--p) 100%);
  filter: drop-shadow(0 0 18px rgba(63, 227, 245, .45));
}
.steps-in {
  width: 100%; height: 100%; border-radius: 50%; background: #140928;
  display: grid; place-content: center; text-align: center;
}
.steps-in b { font: 400 34px/1 var(--display); color: var(--text); }
.steps-in span { font: 700 11px/1.6 var(--tech); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.steps-row > div { background: rgba(255, 255, 255, .05); border-radius: 12px; padding: 10px 4px; }
.steps-row b { display: block; font: 400 17px/1.1 var(--display); color: var(--cyan); }
.steps-row span { font: 700 10px/1.4 var(--tech); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.steps-row .mf b { color: var(--gold); }
.steps-row .mf img { width: 18px; height: 18px; display: inline-block; vertical-align: -2px; margin-right: 4px; }
.steps-row .mf b { display: inline; }
.steps-row .mf span { display: block; }
.steps-mission {
  margin-top: 14px; font: 600 14px/1.3 var(--tech); color: var(--dim);
  background: rgba(63, 227, 245, .07); border: 1px solid rgba(63, 227, 245, .2); border-radius: 12px; padding: 10px 12px;
}
.steps-mission b { color: var(--text); }
.steps-mission .tag-v { font: 700 10px/1 var(--tech); letter-spacing: .16em; color: #08140f; background: var(--cyan); border-radius: 4px; padding: 3px 6px 2px; margin-right: 8px; vertical-align: 1px; }
.steps-mission i { display: block; height: 8px; margin-top: 8px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.steps-mission em { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--mint2)); }
.mw-looks { display: flex; justify-content: center; margin: 22px auto 0; max-width: 460px; }
.mw-looks img { width: 22%; height: auto; margin: 0 -2%; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .55)); }
.mw-looks img:nth-child(odd) { transform: translateY(6px); }
.mw-note { margin: 14px auto 0; max-width: 400px; text-align: center; font-size: 12px; color: var(--dim); opacity: .75; }

/* =========================================================
   INSTALL — home-screen (PWA) how-to
   ========================================================= */
.install {
  background:
    radial-gradient(55% 45% at 50% 0%, rgba(92, 242, 192, .14), transparent 70%),
    var(--bg2);
}
.install .head { text-align: center; margin-bottom: 40px; }
.install .head .kicker { justify-content: center; }
.install .head .lead { margin: 18px auto 0; }
.steps-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }
.how {
  background: linear-gradient(160deg, rgba(38, 22, 79, .9), rgba(18, 6, 31, .9));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 18px;
}
.how-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.how-top h3 { margin: 0; font-size: 20px; flex: 1; }
.how-br { font: 700 11px/1 var(--tech); letter-spacing: .14em; text-transform: uppercase; color: var(--mint); border: 1px solid rgba(92, 242, 192, .4); border-radius: 6px; padding: 5px 7px 4px; }
.how-os { width: 28px; height: 28px; border-radius: 8px; flex: none; background: linear-gradient(135deg, #f6f0ff, #bdaedd); }
.how-os.android { background: linear-gradient(135deg, var(--mint2), var(--mint)); }
.how-os.wallet { background: linear-gradient(135deg, #AB9FF2, #FC7227); }
.how ol { margin: 0; padding-left: 22px; display: grid; gap: 10px; color: var(--dim); }
.how ol li::marker { color: var(--mint); font-weight: 700; }
.how ol b { color: var(--text); }
.how a { color: var(--mint); }
.kbd { display: inline-block; min-width: 22px; padding: 1px 6px; margin: 0 2px; text-align: center; border-radius: 6px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--text); font-size: 13px; line-height: 1.5; }
.how-note { margin: 14px 0 0; font-size: 13px; color: var(--dim); opacity: .85; }

/* Real screen recording inside a phone frame (Capture section). */
.screen-in video.screen-video { display: block; width: 100%; height: 100%; object-fit: cover; }