// Pages

const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP, useRef: useRefP } = React;

// ============================================================
// HOME
// ============================================================
function HomePage({ setPage, openTrailer }) {
  return (
    <div className="page-fade" data-screen-label="01 Home">
      {/* Top status bar */}
      <div className="container" style={{ paddingTop: 14, paddingBottom: 14, display: "flex", alignItems: "center", gap: 24 }}>
        <span className="pill text-pink" style={{ borderColor: "var(--pink)" }}>
          <span className="dot pulse-dot" /> Closed Test Active
        </span>
        <span className="mono-tag text-dim">v0.39.0 ‹AUTHORED FLOORS› · DEPLOYED 2026.05.18 · 101 RELEASES INDEXED</span>
        <span className="mono-tag ml-auto text-dim">TESTERS <span className="text-cyan">38</span> ACTIVE · DEEPEST FLOOR <span className="text-pink">F165</span> · P10 SINGULARITY</span>
      </div>

      <div className="hairline" />

      {/* HERO */}
      <section className="container" style={{ paddingTop: 48, paddingBottom: 80, position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 380px", gap: 48, alignItems: "end" }}>
          <div>
            <div style={{ display: "flex", gap: 24, marginBottom: 32, alignItems: "center" }}>
              <span className="mono-label">// 公開 · 01 / hero broadcast</span>
              <span style={{ flex: 1, height: 1, background: "var(--line)" }} />
              <span className="mono-tag text-cyan">TYG-001 · S/N 22593158</span>
            </div>
            <h1 className="display-xxl">
              <span style={{ display: "block" }}>WE BUILD</span>
              <span style={{ display: "block" }} className="text-pink">
                <Glitch>STRANGE</Glitch>
              </span>
              <span style={{ display: "block" }}>
                <span style={{ color: "var(--ink)" }}>GAMES</span>
                <span style={{ color: "var(--cyan)" }}>.</span>
              </span>
            </h1>
            <div style={{ marginTop: 32, display: "flex", alignItems: "center", gap: 24 }}>
              <button className="btn btn-primary" onClick={() => setPage("nemesis")}>
                <span>Enter Nemesis</span>
                <span className="arrow">→</span>
              </button>
              <button className="btn" onClick={openTrailer}>
                <span style={{ width: 8, height: 8, background: "currentColor", clipPath: "polygon(0 0, 100% 50%, 0 100%)" }} />
                <span>Watch Trailer</span>
                <span className="text-faint" style={{ marginLeft: 8 }}>01:42</span>
              </button>
              <span className="mono-tag text-dim">↳ or scroll for intel</span>
            </div>
          </div>

          {/* Mini terminal panel */}
          <div className="panel corners" style={{ padding: 22 }}>
            <span className="corner-tl" /><span className="corner-br" />
            <div className="mono-label text-cyan" style={{ marginBottom: 14 }}>// STUDIO_DOSSIER.txt</div>
            <div style={{ fontFamily: "var(--mono)", fontSize: 12, lineHeight: 1.7 }}>
              <div><span className="text-faint">name....:</span> Tiny Gang Studios</div>
              <div><span className="text-faint">domain..:</span> tinygang.dev</div>
              <div><span className="text-faint">contact.:</span> contact@tinygang.dev</div>
              <div><span className="text-faint">stack...:</span> Web · Android · Next.js</div>
              <div><span className="text-faint">discord.:</span> discord.gg/BNuwAzDaxs</div>
              <div><span className="text-faint">build...:</span> <span className="text-cyan">v0.39.0</span> · 101 releases</div>
              <div><span className="text-faint">status..:</span> <span className="text-green">shipping</span></div>
              <div style={{ marginTop: 10, paddingTop: 10, borderTop: "1px dashed var(--line)" }}>
                <span className="text-pink">▌</span> Currently: Nemesis — Cyberpunk Idle Roguelike, closed test on Google Play.
              </div>
            </div>
          </div>
        </div>

        {/* Floating bracket */}
        <div className="deco-shape" style={{ top: 12, right: -8 }}>
          <svg width="120" height="80" viewBox="0 0 120 80" fill="none" stroke="var(--cyan)" strokeWidth="1">
            <path d="M2 2 L40 2 L40 8 L8 8 L8 78 L2 78 Z M118 2 L80 2 L80 8 L112 8 L112 78 L118 78 Z" />
          </svg>
        </div>
      </section>

      {/* Ticker */}
      <Marquee duration={45}>
        <span className="display-md text-pink"><Glitch>NEMESIS</Glitch></span>
        <span className="display-md">CYBERPUNK · IDLE · ROGUELIKE</span>
        <span className="display-md text-cyan">CLOSED TEST · ANDROID</span>
        <span className="display-md">SIGNUPS OPEN</span>
        <span className="display-md text-amber">38 TESTERS · GROWING</span>
      </Marquee>

      {/* FEATURED PROJECT */}
      <section className="container" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <SectionHead
          code="02"
          kicker="featured project"
          title="Nemesis — Cyberpunk Idle"
          right={
            <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
              <span className="pill text-amber" style={{ borderColor: "var(--amber)" }}>
                <span className="dot" /> Closed Test
              </span>
              <button className="btn" onClick={() => setPage("nemesis")}>
                <span>Open Project</span><span className="arrow">→</span>
              </button>
            </div>
          }
        />
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 24 }}>
          <GameImage src="img/banner.jpg" ratio="590/280" label="// Key Art · Nemesis" />
          <div style={{ display: "grid", gridTemplateRows: "1fr 1fr", gap: 24 }}>
            <GameImage src="img/screen-combat.jpg" ratio="16/9" label="// Combat HUD" objectPosition="center 30%" />
            <GameImage src="img/screen-equipment.jpg" ratio="16/9" label="// Equipment Drop" objectPosition="center 40%" />
          </div>
        </div>

        {/* Stat grid */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, marginTop: 24, background: "var(--line)", border: "1px solid var(--line)" }}>
          <Stat label="// Genre" value="Idle RPG" sub="roguelike loop" accent="var(--pink)" />
          <Stat label="// Platform" value="Android" sub="iOS Q3 2026" accent="var(--cyan)" />
          <Stat label="// Build" value="v0.39.0" sub="101 releases" accent="var(--amber)" />
          <Stat label="// MAU goal" value="50K" sub="soft launch" accent="var(--green)" />
        </div>
      </section>

      {/* Meet the Operatives */}
      <section className="container" style={{ paddingBottom: 80 }}>
        <SectionHead
          code="03"
          kicker="archive · cast of misfits"
          title="Meet the Operatives"
          right={<button className="btn btn-ghost" onClick={() => setPage("nemesis")}>See Nemesis →</button>}
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          {[
            { src: "img/class-samurai.jpg", tag: "STREET SAMURAI", title: "Blade Discipline", sub: "Melee. Sword-bound zealots and golem heavies", tone: "pink" },
            { src: "img/class-ghosts.jpg", tag: "GHOST", title: "Cold Insertion", sub: "Stealth ops. Surgical loadouts, paranoid playstyle", tone: "cyan" },
            { src: "img/class-netrunner.jpg", tag: "NETRUNNER", title: "Signal Architect", sub: "Hackers. Pull damage out of the grid", tone: "amber" },
            { src: "img/class-rigger.jpg", tag: "RIGGER", title: "Drone Jockey", sub: "Drones, mechs, swarm-volley engineers", tone: "pink" },
          ].map((p) => (
            <div key={p.title} className="panel" style={{ padding: 0, overflow: "hidden", cursor: "none" }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--ink)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; }}>
              <GameImage src={p.src} ratio="1/1" objectPosition="center top" />
              <div style={{ padding: 18 }}>
                <div className={`mono-tag text-${p.tone}`}>{p.tag}</div>
                <div className="display-md hover-glitch" style={{ marginTop: 6, fontSize: 22 }}>{p.title}</div>
                <div className="text-dim" style={{ marginTop: 4, fontSize: 12 }}>{p.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <Marquee duration={60} reverse separator="◢">
        <span className="display-md text-cyan">SIGNAL · STRONG</span>
        <span className="display-md">2026 · 立花 · NEON</span>
        <span className="display-md text-pink">TINY GANG · TINY GANG · TINY GANG</span>
        <span className="display-md">BUILT IN PUBLIC</span>
      </Marquee>

      {/* CTA */}
      <section className="container" style={{ paddingTop: 80, paddingBottom: 40 }}>
        <div className="panel" style={{ padding: "48px 48px", display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center", position: "relative" }}>
          <div>
            <div className="mono-label" style={{ marginBottom: 14 }}>// access request · clearance level α</div>
            <h2 className="display-lg">
              <Glitch>Want In?</Glitch>
            </h2>
            <p className="text-dim" style={{ marginTop: 14, maxWidth: 520, fontSize: 14 }}>
              We're letting in batches of 50 testers per week. New build pushed every Friday.
              Bring your worst Android phone — we want it to break.
            </p>
          </div>
          <button className="btn btn-primary" style={{ padding: "18px 28px", fontSize: 13 }} onClick={() => setPage("signup")}>
            Apply for Closed Test <span className="arrow">→</span>
          </button>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// NEMESIS
// ============================================================
function NemesisPage({ setPage, openTrailer }) {
  const [activeShot, setActiveShot] = useStateP(0);
  const shots = [
    { label: "Operative · Tinytoes / Street Samurai", src: "img/screen-operative.jpg" },
    { label: "Combat · F3 Neon Undercity", src: "img/screen-combat.jpg" },
    { label: "Equipment Drop · Mythic", src: "img/screen-equipment.jpg" },
    { label: "Companion · Ember Kit encounter", src: "img/screen-companion.jpg" },
    { label: "Portfolio · 2 ops, F165 deepest", src: "img/screen-portfolio.jpg" },
  ];
  return (
    <div className="page-fade" data-screen-label="02 Nemesis">
      <div className="container" style={{ paddingTop: 24, paddingBottom: 32 }}>
        <div className="mono-tag text-dim" style={{ marginBottom: 8 }}>
          <span onClick={() => setPage("home")} style={{ cursor: "none" }}>← HOME</span> / <span className="text-pink">NEMESIS</span>
        </div>
      </div>

      {/* Splash */}
      <section className="container" style={{ position: "relative", paddingBottom: 32 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, alignItems: "end" }}>
          <div>
            <div className="mono-label text-cyan" style={{ marginBottom: 20 }}>// PROJECT 001 · CYBERPUNK IDLE</div>
            <h1 className="display-xxl text-pink" style={{ fontSize: "clamp(64px, 10vw, 168px)", whiteSpace: "nowrap" }}>
              <Glitch>NEMESIS</Glitch>
            </h1>
            <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.55, maxWidth: 520, color: "var(--ink-dim)" }}>
              An <span className="text-cyan">idle roguelike RPG</span> set in a fractured neon megacity. Hunt your enemies while you sleep.
              Wake up richer, angrier, and one prestige closer to ending them.
            </p>
            <div className="row gap-4" style={{ marginTop: 24, flexWrap: "wrap" }}>
              {["IDLE", "ROGUELIKE", "RPG", "CYBERPUNK", "GACHA-LITE", "PVE"].map(t => (
                <span key={t} className="pill" style={{ borderColor: "var(--line)", color: "var(--ink-dim)" }}>{t}</span>
              ))}
            </div>
            <div className="row gap-3" style={{ marginTop: 32 }}>
              <button className="btn btn-primary" onClick={() => setPage("signup")}>
                Join Closed Test <span className="arrow">→</span>
              </button>
              <button className="btn" onClick={openTrailer}>
                <span style={{ width: 8, height: 8, background: "currentColor", clipPath: "polygon(0 0, 100% 50%, 0 100%)" }} />
                <span>Trailer</span>
              </button>
              <button className="btn btn-ghost">Press Kit ↗</button>
            </div>
          </div>

          {/* Vertical phone-ratio art */}
          <div style={{ display: "flex", justifyContent: "flex-end" }}>
            <div style={{ width: 340, position: "relative" }}>
              <div style={{ position: "absolute", top: -20, right: -20, fontFamily: "var(--terminal)", fontSize: 13, color: "var(--cyan)", letterSpacing: "0.18em" }}>
                v0.39.0
              </div>
              <GameImage src={shots[activeShot].src} label={shots[activeShot].label} ratio="9/19.5" style={{ border: "1px solid var(--cyan)", boxShadow: "0 0 0 1px var(--bg-0), 6px 6px 0 var(--pink), 12px 12px 0 var(--cyan)" }} objectPosition="center top" />
              {/* Thumb strip */}
              <div style={{ display: "grid", gridTemplateColumns: `repeat(${shots.length}, 1fr)`, gap: 6, marginTop: 14 }}>
                {shots.map((s, i) => (
                  <button key={i} onClick={() => setActiveShot(i)} style={{
                    all: "unset", cursor: "none",
                    aspectRatio: "1", padding: 0,
                    background: i === activeShot ? "var(--pink)" : "oklch(0.10 0.02 270)",
                    border: `1px solid ${i === activeShot ? "var(--pink)" : "var(--line)"}`,
                    display: "flex", alignItems: "center", justifyContent: "center",
                    color: i === activeShot ? "var(--bg-0)" : "var(--ink-dim)",
                    fontFamily: "var(--mono)", fontSize: 11, fontWeight: 600,
                  }}>
                    {String(i+1).padStart(2,"0")}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Stat strip */}
      <section className="container" style={{ paddingBlock: 24 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 1, background: "var(--line)", border: "1px solid var(--line)" }}>
          <Stat label="Status" value="Closed Test" sub="Google Play" accent="var(--amber)" />
          <Stat label="Testers" value="38" sub="active in closed test" accent="var(--pink)" />
          <Stat label="Deepest Floor" value="F165" sub="P10 · Singularity" accent="var(--cyan)" />
          <Stat label="Prestige Cap" value="P10" sub="Mortal → Singularity" accent="var(--green)" />
          <Stat label="Classes × Races" value="20" sub="4 classes · 5 metatypes" accent="var(--pink)" />
        </div>
      </section>

      {/* PILLARS */}
      <section className="container" style={{ paddingTop: 64, paddingBottom: 64 }}>
        <SectionHead code="01" kicker="design pillars" title="What it is" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--line)", border: "1px solid var(--line)" }}>
          {[
            { n: "01", t: "Idle that respects you", b: "Offline shards scale with your parked floor. No timers, no FOMO, no daily quests guilting you back. Auto Run tokens let your operative grind while you work.", c: "var(--pink)" },
            { n: "02", t: "Roguelike depth", b: "10 prestige ranks — Mortal → Singularity. Each rebirth resets your build but stacks Echo Shrine bonuses, Ripperdoc chrome, and mythic gear grades. F400 endgame and counting.", c: "var(--cyan)" },
            { n: "03", t: "Cyberpunk, no cynicism", b: "F2P. No gacha, no ads, no battle pass. Cosmetic plates and global Boost tokens are the only purchases — never P2W. Hand-sliced sprites, original synthwave score.", c: "var(--amber)" },
          ].map(p => (
            <div key={p.n} style={{ background: "var(--bg-1)", padding: 32 }}>
              <div className="mono-label" style={{ color: p.c, marginBottom: 24 }}>// {p.n}</div>
              <h3 className="display-md" style={{ marginBottom: 14 }}>{p.t}</h3>
              <p className="text-dim" style={{ fontSize: 14, lineHeight: 1.55 }}>{p.b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* GAMEPLAY LOOP */}
      <section className="container" style={{ paddingBottom: 64 }}>
        <SectionHead code="02" kicker="core loop" title="The Loop" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr) auto", gap: 16, alignItems: "stretch" }}>
          {[
            ["IDLE", "Park & farm", "Offline shard accrual scales with your deepest floor. Auto Run tokens grind in the background while you're at work."],
            ["BUILD", "Spec the operative", "Dual A/B loadouts. 3 specs per class. Tech Tree, Echo Shrine, Ripperdoc chrome, mythic gear with 5-stat affix rolls."],
            ["RAID", "Push the floors", "Active boss fights from F1 → F400+. Daily Hunt + Weekly Hunt with multi-attempt windows. 3v3 trainer battles."],
            ["BURN", "Prestige", "Rebirth Protocol. P1 Initiate → P10 Singularity. Echoes persist. Permanent chrome persists. Soul-shards multiply forever."],
          ].map(([n, t, b], i) => (
            <React.Fragment key={n}>
              <div className="panel" style={{ padding: 22 }}>
                <div className="mono-tag text-cyan" style={{ marginBottom: 14 }}>0{i+1} · {n}</div>
                <div style={{ fontFamily: "var(--display)", fontSize: 24, fontWeight: 700, textTransform: "uppercase", marginBottom: 10 }}>{t}</div>
                <p className="text-dim" style={{ fontSize: 13, lineHeight: 1.55 }}>{b}</p>
              </div>
              {i < 3 && <div style={{ display: "flex", alignItems: "center", justifyContent: "center", color: "var(--pink)", fontSize: 22 }}>→</div>}
            </React.Fragment>
          ))}
        </div>
      </section>

      {/* CLASSES */}
      <section className="container" style={{ paddingBottom: 64 }}>
        <SectionHead code="03" kicker="cast · operatives" title="Pick your kind of trouble" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
          {[
            {
              src: "img/class-samurai.jpg", tag: "// 01 · STREET SAMURAI", name: "Blade Discipline",
              b: "Melee specialists. Sword-bound revenants and golem-class heavies. Scale with risk — the chrome is meant to break.",
              c: "var(--pink)"
            },
            {
              src: "img/class-ghosts.jpg", tag: "// 02 · GHOST", name: "Cold Insertion",
              b: "Ranged and stealth ops. Hooded killers in unmarked synthwear. Surgical loadouts, paranoid playstyle.",
              c: "var(--cyan)"
            },
            {
              src: "img/class-netrunner.jpg", tag: "// 03 · NETRUNNER", name: "Signal Architect",
              b: "Hackers and data-witches. Pull damage out of the grid. Copy enemy abilities mid-fight. Read the room before it reads you.",
              c: "var(--amber)"
            },
            {
              src: "img/class-rigger.jpg", tag: "// 04 · RIGGER", name: "Steel Handlers",
              b: "Combined-arms with mech back-up. Buff your crew, command your drones, never get your hands dirty. The crew's force multiplier.",
              c: "var(--green)"
            },
          ].map(c => (
            <div key={c.name} className="panel" style={{ padding: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
              <GameImage src={c.src} ratio="1/1" objectPosition="center top" />
              <div style={{ padding: 22, display: "flex", flexDirection: "column", justifyContent: "space-between", flex: 1 }}>
                <div>
                  <div className="mono-tag" style={{ color: c.c, marginBottom: 10 }}>{c.tag}</div>
                  <h3 className="display-md" style={{ marginBottom: 10, fontSize: 24 }}>{c.name}</h3>
                  <p className="text-dim" style={{ fontSize: 13, lineHeight: 1.55 }}>{c.b}</p>
                </div>
                <div className="mono-tag text-faint" style={{ marginTop: 16 }}>more variants unlock at prestige tier 3+</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* FEATURES BENTO */}
      <section className="container" style={{ paddingBottom: 64 }}>
        <SectionHead code="04" kicker="features" title="What's in the box" />
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gridTemplateRows: "auto auto", gap: 16 }}>
          <div className="panel" style={{ padding: 28, gridRow: "span 2" }}>
            <div className="mono-label text-pink" style={{ marginBottom: 16 }}>// flagship</div>
            <h3 className="display-md" style={{ marginBottom: 16 }}>Mythic gear with 5-stat affix rolls</h3>
            <p className="text-dim" style={{ fontSize: 14, marginBottom: 18 }}>
              Eclipse → Eclipse+ → Singularity → Override → Wraith → Apex Daemon. Each prestige unlocks a new mythic grade.
              Reforge affixes and lock the lines you love. Enhance +1/+2/+3 for endgame polish.
            </p>
            <GameImage src="img/screen-equipment.jpg" ratio="9/16" label="// EQUIPMENT DROP" objectPosition="center 35%" />
          </div>
          <div className="panel" style={{ padding: 22 }}>
            <div className="mono-label text-cyan" style={{ marginBottom: 12 }}>// companions</div>
            <div className="display-md" style={{ marginBottom: 8, fontSize: 26 }}>16 Species</div>
            <div className="text-dim" style={{ fontSize: 13 }}>Chrome Beasts, Digital Spirits, Sentient Drones. Catch wild, level to 50, evolve at Lv.20 and Lv.40. 5 rarity tiers.</div>
          </div>
          <div className="panel" style={{ padding: 22 }}>
            <div className="mono-label text-amber" style={{ marginBottom: 12 }}>// chrome</div>
            <div className="display-md" style={{ marginBottom: 8, fontSize: 26 }}>Ripperdoc</div>
            <div className="text-dim" style={{ fontSize: 13 }}>6 body slots. 3 grades. Permanent augments that persist through prestige. Crit, lifesteal, dodge, regen — your call.</div>
          </div>
          <div className="panel" style={{ padding: 22 }}>
            <div className="mono-label text-pink" style={{ marginBottom: 12 }}>// arena</div>
            <div className="display-md" style={{ marginBottom: 8, fontSize: 26 }}>3v3 Battles</div>
            <div className="text-dim" style={{ fontSize: 13 }}>Sequential Pokémon-style trainer fights. Async PvP with defense teams. 10 dungeon trainers unlocked at F100.</div>
          </div>
          <div className="panel" style={{ padding: 22 }}>
            <div className="mono-label text-cyan" style={{ marginBottom: 12 }}>// boss hunts</div>
            <div className="display-md" style={{ marginBottom: 8, fontSize: 26 }}>Daily + Weekly</div>
            <div className="text-dim" style={{ fontSize: 13 }}>One hand-picked boss per day, three attempts. Weekly elite boss, five attempts. Scaled to your deepest floor.</div>
          </div>
        </div>
      </section>

      {/* ROADMAP */}
      <section className="container" style={{ paddingBottom: 64 }}>
        <SectionHead code="05" kicker="roadmap · 2026" title="Where we're going" />
        <div style={{ position: "relative" }}>
          <div style={{ position: "absolute", left: 0, right: 0, top: 30, height: 1, background: "var(--line)" }} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 16 }}>
            {[
              { q: "Q1 26", t: "Closed Test", s: "live", c: "var(--green)" },
              { q: "Now", t: "v0.38.x polish", s: "active", c: "var(--pink)" },
              { q: "Soon", t: "Open Test", s: "queued", c: "var(--cyan)" },
              { q: "Next", t: "iOS launch", s: "scoped", c: "var(--amber)" },
              { q: "Later", t: "Crew co-op raids", s: "design", c: "var(--ink-dim)" },
            ].map((r, i) => (
              <div key={r.q} style={{ display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
                <div style={{ width: 14, height: 14, border: `1px solid ${r.c}`, background: r.s === "done" || r.s === "active" ? r.c : "var(--bg-0)", borderRadius: "50%", marginBottom: 14, position: "relative", zIndex: 1 }} />
                <div className="mono-tag" style={{ color: r.c, marginBottom: 6 }}>{r.q} · {r.s.toUpperCase()}</div>
                <div style={{ fontFamily: "var(--display)", fontSize: 22, fontWeight: 700, textTransform: "uppercase" }}>{r.t}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="container" style={{ paddingBottom: 32 }}>
        <div className="panel" style={{ padding: 48, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32, borderColor: "var(--pink)", boxShadow: "0 0 0 0 transparent, 6px 6px 0 var(--cyan)" }}>
          <div>
            <div className="mono-label text-cyan" style={{ marginBottom: 12 }}>// final transmission</div>
            <h2 className="display-lg"><Glitch>Help us break it.</Glitch></h2>
            <p className="text-dim" style={{ marginTop: 12, maxWidth: 560 }}>
              38 testers active. We're adding more in small batches — your @gmail goes straight into the Google Group.
            </p>
          </div>
          <button className="btn btn-primary" style={{ padding: "20px 32px", fontSize: 14 }} onClick={() => setPage("signup")}>
            Request Access <span className="arrow">→</span>
          </button>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// SIGNUP
// ============================================================
function SignupPage({ setPage }) {
  const [form, setForm] = useStateP({
    handle: "", email: "", gmail: "", device: "", android: "", playtime: "", experience: "casual", nda: false, marketing: false, reason: ""
  });
  const [errs, setErrs] = useStateP({});
  const [submitted, setSubmitted] = useStateP(false);
  const [submitting, setSubmitting] = useStateP(false);
  const [submitError, setSubmitError] = useStateP(null);

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const validate = () => {
    const e = {};
    if (!form.handle || form.handle.length < 2) e.handle = "Handle required · min 2 chars";
    if (!form.email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "Valid email required";
    if (!form.gmail || !/^[^\s@]+@gmail\.com$/i.test(form.gmail)) e.gmail = "Must be a @gmail.com address — required by Google Play";
    if (!form.device) e.device = "Tell us your phone — we need to break it";
    if (!form.android) e.android = "Android version required";
    if (!form.playtime) e.playtime = "Pick a playtime";
    if (!form.nda) e.nda = "Closed test requires NDA agreement";
    setErrs(e);
    return Object.keys(e).length === 0;
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!validate()) return;
    setSubmitting(true);
    setSubmitError(null);

    // POST to Discord webhook. If unset (during local preview), fall through and
    // show success anyway so you can see the success state.
    const webhook = window.NEMESIS_SIGNUP_WEBHOOK;
    if (webhook) {
      try {
        const payload = {
          username: "NEMESIS · Closed Test Bot",
          embeds: [{
            title: "🔔 New Closed Test Signup",
            color: 0xff2d95, // pink
            fields: [
              { name: "Handle", value: `@${form.handle}`, inline: true },
              { name: "Gmail", value: form.gmail, inline: true },
              { name: "Email", value: form.email, inline: true },
              { name: "Device", value: `${form.device} · Android ${form.android}`, inline: true },
              { name: "Playtime", value: form.playtime, inline: true },
              { name: "Experience", value: form.experience, inline: true },
              { name: "Why", value: form.reason || "_(none)_" },
              { name: "Marketing opt-in", value: form.marketing ? "yes" : "no", inline: true },
              { name: "NDA accepted", value: form.nda ? "yes" : "no", inline: true },
            ],
            timestamp: new Date().toISOString(),
            footer: { text: "tinygang.dev/tiny-gang" }
          }]
        };
        const res = await fetch(webhook, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload)
        });
        if (!res.ok) throw new Error(`Webhook returned ${res.status}`);
      } catch (err) {
        setSubmitError("Couldn't transmit to ops. Email contact@tinygang.dev directly — we'll add you manually.");
        setSubmitting(false);
        return;
      }
    }

    setSubmitting(false);
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="page-fade container" data-screen-label="03 Signup · success" style={{ paddingTop: 60, paddingBottom: 120, maxWidth: 760 }}>
        <div className="mono-label text-cyan" style={{ marginBottom: 14 }}>// TRANSMISSION RECEIVED · 200 OK</div>
        <h1 className="display-xl"><Glitch>You're in queue.</Glitch></h1>
        <p style={{ marginTop: 18, color: "var(--ink-dim)", fontSize: 16, lineHeight: 1.6 }}>
          Welcome, <span className="text-pink">@{form.handle}</span>. We received your closed-test request.
          Next steps:
        </p>
        <ol style={{ marginTop: 18, paddingLeft: 22, color: "var(--ink-dim)", fontSize: 14, lineHeight: 1.9 }}>
          <li>We'll add <span className="text-cyan">{form.gmail}</span> to the Nemesis Closed Test Google Group within 48 hours.</li>
          <li>You'll get an email from Google Play with the install link.</li>
          <li>Hop into <a href="https://discord.gg/BNuwAzDaxs" target="_blank" rel="noopener" className="text-cyan">Discord</a> for tester role + private channels.</li>
        </ol>
        <div className="panel" style={{ padding: 24, marginTop: 32 }}>
          <div className="mono-label" style={{ marginBottom: 12 }}>// receipt</div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 13, lineHeight: 1.8 }}>
            <div><span className="text-faint">request_id...:</span> NMS-{Math.random().toString(36).slice(2,10).toUpperCase()}</div>
            <div><span className="text-faint">handle.......:</span> @{form.handle}</div>
            <div><span className="text-faint">gmail........:</span> {form.gmail}</div>
            <div><span className="text-faint">device.......:</span> {form.device} · Android {form.android}</div>
            <div><span className="text-faint">status.......:</span> <span className="text-amber">queued · pending Group add</span></div>
            <div><span className="text-faint">contact......:</span> <a href="mailto:contact@tinygang.dev" className="text-cyan">contact@tinygang.dev</a></div>
          </div>
        </div>
        <p className="text-dim" style={{ marginTop: 24, fontSize: 13 }}>
          We'll email <span className="text-cyan">{form.email}</span> with a confirmation.
          Watch your spam — Google Play's transactional mail loves to land there.
        </p>
        <div className="row gap-3" style={{ marginTop: 32 }}>
          <button className="btn" onClick={() => setPage("home")}>← Back to Home</button>
          <a className="btn btn-primary" href="https://discord.gg/BNuwAzDaxs" target="_blank" rel="noopener">Join Discord →</a>
        </div>
      </div>
    );
  }

  return (
    <div className="page-fade container" data-screen-label="03 Signup" style={{ paddingTop: 48, paddingBottom: 80 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64 }}>
        {/* LEFT: brief */}
        <div>
          <div className="mono-label" style={{ marginBottom: 18 }}>// 03 · access request</div>
          <h1 className="display-xl">
            <span style={{ display: "block" }}>CLOSED</span>
            <span style={{ display: "block" }} className="text-pink"><Glitch>TEST</Glitch></span>
          </h1>
          <p style={{ marginTop: 24, color: "var(--ink-dim)", fontSize: 15, lineHeight: 1.55 }}>
            Nemesis is running a Google Play closed test. We add testers in batches via a Google Group —
            once you're in, the Play Store install appears in your library automatically.
          </p>

          <div className="panel" style={{ padding: 24, marginTop: 32 }}>
            <div className="mono-label text-cyan" style={{ marginBottom: 14 }}>// the 3-step flow</div>
            <ol style={{ paddingLeft: 18, margin: 0, color: "var(--ink-dim)", fontSize: 13, lineHeight: 1.9 }}>
              <li>Submit the form &rarr; or email <a href="mailto:contact@tinygang.dev" className="text-cyan">contact@tinygang.dev</a></li>
              <li>We add your <span className="text-pink">@gmail.com</span> to the Closed Test Google Group</li>
              <li>Open the Play Store invite link &rarr; install &rarr; play</li>
            </ol>
          </div>

          <div className="panel" style={{ padding: 24, marginTop: 16 }}>
            <div className="mono-label text-pink" style={{ marginBottom: 14 }}>// what you get</div>
            <ul style={{ paddingLeft: 18, margin: 0, color: "var(--ink-dim)", fontSize: 13, lineHeight: 1.9 }}>
              <li>Early Play Store install of Nemesis</li>
              <li>Discord tester role + private channels</li>
              <li>Direct line to the devs — we read everything</li>
              <li>In-game founder tag once 1.0 ships</li>
            </ul>
          </div>

          <div className="panel" style={{ padding: 24, marginTop: 16 }}>
            <div className="mono-label text-amber" style={{ marginBottom: 14 }}>// what we ask</div>
            <ul style={{ paddingLeft: 18, margin: 0, color: "var(--ink-dim)", fontSize: 13, lineHeight: 1.9 }}>
              <li>Play a little. Idle is forgiving.</li>
              <li>Report bugs in Discord with steps</li>
              <li>Don't be a dick</li>
            </ul>
          </div>

          <div style={{ marginTop: 24, padding: 18, border: "1px dashed var(--line)" }}>
            <div className="mono-tag text-dim">// PREFER EMAIL?</div>
            <a href="mailto:contact@tinygang.dev?subject=Nemesis%20Closed%20Test%20Signup" style={{ display: "block", marginTop: 8, fontFamily: "var(--display)", fontSize: 20, textTransform: "uppercase", letterSpacing: "0.04em" }} className="hover-glitch text-cyan">
              contact@tinygang.dev →
            </a>
            <div className="text-faint" style={{ fontSize: 11, marginTop: 6 }}>Send us your @gmail.com address — we add you to the Group.</div>
          </div>
        </div>

        {/* RIGHT: form */}
        <form onSubmit={onSubmit} className="panel corners" style={{ padding: 36, position: "relative", height: "fit-content" }}>
          <span className="corner-tl" /><span className="corner-br" />
          <div className="row between" style={{ marginBottom: 24, alignItems: "baseline" }}>
            <div className="mono-label text-cyan">// FORM_NMS_CT_001.req</div>
            <div className="mono-tag text-dim">7 FIELDS · ~2 MIN</div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
            <div style={{ gridColumn: "span 1" }}>
              <div className="field-label"><span>// Handle</span><span className="text-faint">required</span></div>
              <input className={`field ${errs.handle ? "error" : ""}`} placeholder="razor_kid_94" value={form.handle} onChange={e => update("handle", e.target.value)} />
              {errs.handle && <div className="field-error">! {errs.handle}</div>}
            </div>
            <div>
              <div className="field-label"><span>// Contact Email</span><span className="text-faint">required</span></div>
              <input className={`field ${errs.email ? "error" : ""}`} placeholder="you@somewhere.net" value={form.email} onChange={e => update("email", e.target.value)} />
              {errs.email && <div className="field-error">! {errs.email}</div>}
            </div>
            <div style={{ gridColumn: "span 2" }}>
              <div className="field-label"><span>// Gmail (for Play Store invite)</span><span className="text-faint">required · @gmail.com</span></div>
              <input className={`field ${errs.gmail ? "error" : ""}`} placeholder="you@gmail.com" value={form.gmail} onChange={e => update("gmail", e.target.value)} />
              {errs.gmail && <div className="field-error">! {errs.gmail}</div>}
            </div>
            <div>
              <div className="field-label"><span>// Phone Model</span><span className="text-faint">make + model</span></div>
              <input className={`field ${errs.device ? "error" : ""}`} placeholder="Pixel 7a / Galaxy S22 / etc." value={form.device} onChange={e => update("device", e.target.value)} />
              {errs.device && <div className="field-error">! {errs.device}</div>}
            </div>
            <div>
              <div className="field-label"><span>// Android Version</span></div>
              <select className={`field ${errs.android ? "error" : ""}`} value={form.android} onChange={e => update("android", e.target.value)}>
                <option value="">— select —</option>
                <option>15</option><option>14</option><option>13</option><option>12</option><option>11</option><option>10 or older</option>
              </select>
              {errs.android && <div className="field-error">! {errs.android}</div>}
            </div>
            <div style={{ gridColumn: "span 2" }}>
              <div className="field-label"><span>// Weekly playtime</span></div>
              <div className="row gap-2" style={{ flexWrap: "wrap" }}>
                {["<30 min", "30–60 min", "1–3 hrs", "3–6 hrs", "It's a problem"].map(p => (
                  <button type="button" key={p} onClick={() => update("playtime", p)} style={{
                    all: "unset", cursor: "none",
                    padding: "10px 14px",
                    border: `1px solid ${form.playtime === p ? "var(--cyan)" : "var(--line)"}`,
                    color: form.playtime === p ? "var(--cyan)" : "var(--ink-dim)",
                    background: form.playtime === p ? "oklch(0.85 0.18 200 / 0.08)" : "transparent",
                    fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase"
                  }}>{p}</button>
                ))}
              </div>
              {errs.playtime && <div className="field-error">! {errs.playtime}</div>}
            </div>
            <div style={{ gridColumn: "span 2" }}>
              <div className="field-label"><span>// Idle game experience</span></div>
              <div className="row gap-2">
                {[
                  ["casual", "Tried a few"],
                  ["regular", "Play regularly"],
                  ["veteran", "AdCap / Cookie / Realm vet"],
                  ["designer", "I design them"]
                ].map(([v, l]) => (
                  <button type="button" key={v} onClick={() => update("experience", v)} style={{
                    all: "unset", cursor: "none", flex: 1, textAlign: "center",
                    padding: "10px 14px",
                    border: `1px solid ${form.experience === v ? "var(--pink)" : "var(--line)"}`,
                    color: form.experience === v ? "var(--pink)" : "var(--ink-dim)",
                    background: form.experience === v ? "oklch(0.68 0.28 350 / 0.08)" : "transparent",
                    fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase"
                  }}>{l}</button>
                ))}
              </div>
            </div>
            <div style={{ gridColumn: "span 2" }}>
              <div className="field-label"><span>// Why you</span><span className="text-faint">optional · max 200</span></div>
              <textarea className="field" placeholder="Tell us anything. We read all of these." value={form.reason} onChange={e => update("reason", e.target.value.slice(0, 200))} />
              <div className="mono-tag text-faint" style={{ marginTop: 6 }}>{form.reason.length} / 200</div>
            </div>
          </div>

          {/* Checkboxes */}
          <div className="hairline" style={{ marginTop: 24, paddingTop: 20 }}>
            <label style={{ display: "flex", gap: 12, alignItems: "flex-start", cursor: "none", padding: 8 }}>
              <input type="checkbox" checked={form.nda} onChange={e => update("nda", e.target.checked)} style={{ accentColor: "var(--pink)", marginTop: 2 }}/>
              <span style={{ fontSize: 13, color: "var(--ink-dim)" }}>
                I agree not to stream, post screenshots, or discuss specific game content publicly until <span className="text-cyan">2026-06-01</span>.
              </span>
            </label>
            {errs.nda && <div className="field-error" style={{ marginLeft: 32 }}>! {errs.nda}</div>}
            <label style={{ display: "flex", gap: 12, alignItems: "flex-start", cursor: "none", padding: 8 }}>
              <input type="checkbox" checked={form.marketing} onChange={e => update("marketing", e.target.checked)} style={{ accentColor: "var(--cyan)", marginTop: 2 }}/>
              <span style={{ fontSize: 13, color: "var(--ink-dim)" }}>
                Email me when Nemesis hits open beta and 1.0. Nothing else.
              </span>
            </label>
          </div>

          <button type="submit" disabled={submitting} className="btn btn-primary" style={{ marginTop: 24, width: "100%", justifyContent: "center", padding: 18, opacity: submitting ? 0.5 : 1 }}>
            {submitting ? "Transmitting..." : "Transmit Application"} <span className="arrow">→</span>
          </button>
          {submitError && (
            <div className="field-error" style={{ marginTop: 12, textAlign: "center" }}>! {submitError}</div>
          )}
        </form>
      </div>
    </div>
  );
}

// ============================================================
// DEVLOG
// ============================================================
function DevlogPage({ setPage }) {
  const [active, setActive] = useStateP("all");
  const posts = [
    { d: "2026.05.18", v: "v0.39.0", tag: "FEATURE", c: "cyan", t: "Authored Floor Layouts + Bigger Enemies", x: "F1 and F2 are no longer pure procgen — they spawn into hand-crafted street layouts (storefronts, road, sidewalks, drains, dumpsters) with procedural terrain still generating around them. Enemy sprites scaled up 28 → 56 px (~35% → ~70% of player height) with HP bars and auras repositioned to match. 80+ tile slices re-aligned to the iso grid. New cyberpunk studio site at tinygang.dev/tiny-gang.", min: 4 },
    { d: "2026.05.06", v: "v0.38.2", tag: "PATCH", c: "pink", t: "Milestone Floor Tips", x: "One-shot tips pop at every 5-floor milestone (F5–F50) teaching speed control, upgrades, crafting, arena. Spotlight highlights the relevant UI. Per-character tracking so each operative gets fresh tips on roll.", min: 2 },
    { d: "2026.05.06", v: "v0.37.0", tag: "FEATURE", c: "cyan", t: "Player Inspection · Specializations · Dual Loadouts", x: "Tap any operative on the leaderboard, your crew, or in arena to open their Dossier. Each class now has 3 Specs mapped to tech-tree paths — lock a Primary Spec to unlock T3 capstones. Two A/B loadout slots let you maintain separate spec + tech builds.", min: 7 },
    { d: "2026.05.05", v: "v0.36.15", tag: "BALANCE", c: "amber", t: "Pre-Launch Balance Audit — 8 Surgical Fixes", x: "Iron Plating now works. Scavenger Protocol now works. Crit chance hard-cap at 85% with diminishing returns past 50%. Lifesteal cap at 25%. Golem attack-speed penalty softened. War Factory boon adjusted. System Shock T5 smoothed. Scaling boons cap at 4 stacks.", min: 6 },
    { d: "2026.05.05", v: "v0.36.14", tag: "FEATURE", c: "cyan", t: "Operative Codex — You First, Then The Field", x: "A new \"you first\" panel above the global leaderboard aggregates your best across every operative in 10 stat categories. Hero card with class-tinted neon border. Tier badges — APEX / ELITE / VETERAN / RECRUIT. Per-operative drill-down with constellation grid.", min: 5 },
    { d: "2026.05.05", v: "v0.36.13", tag: "POLISH", c: "pink", t: "Mythic Names · Floor Unlocks · Upgrade Clarity", x: "Mythic grade names — Eclipse, Singularity, Override, Wraith, Apex Daemon — now show on paper-doll slot corners. Echo Shrine unlocks at F10 with a tutorial. Tech Tree unlocks at F20. Permanent Upgrades copy clarified — they persist through death but RESET on prestige.", min: 4 },
    { d: "2026.05.05", v: "v0.36.11", tag: "FEATURE", c: "cyan", t: "Pet Evolution-on-Level-Up", x: "Wild captures now always start in base form. Catch at Lv.24, level once to Lv.25, evolution fires immediately with +30% stat boost. Push to Lv.41 and trigger the final form with +65% total. Form-aware stat scaling. Existing pets preserved via silent migration.", min: 4 },
    { d: "2026.05.05", v: "v0.36.9", tag: "FEATURE", c: "pink", t: "Pet Evolution Cinematic", x: "Hit Lv.20 or Lv.40 and your companion triggers a full-screen evolution sequence: charge-up energy rings, white-flash burst, triumphant reveal of the new form. Three procedural synthwave SFX composed in pure Web Audio. Fires from every XP source.", min: 3 },
    { d: "2026.05.04", v: "v0.36.0", tag: "ART", c: "amber", t: "Personalized Portraits + Arena Refresh", x: "Every class × race × gender combo now has its own portrait + 6-pose sprite set. 40 combos, 280 freshly-sliced poses, zero placeholder art across Ghost, Netrunner, Rigger, and Street Samurai. Race cards now cycle through class portraits as a synced demo reel.", min: 5 },
    { d: "2026.05.03", v: "v0.33.0", tag: "MILESTONE", c: "pink", t: "Fresh Start — The Wipe", x: "All operatives, gear, crews, chat, achievements, run records reset. Account and login preserved. New first-time guided walkthrough. Improved in-run coachmark system with glowing spotlight. Full comma-separated number display — no more K/M/B abbreviations.", min: 4 },
    { d: "2026.04.29", v: "v0.31.0", tag: "FEATURE", c: "cyan", t: "Ripperdoc — Permanent Chrome", x: "New back-alley chrome surgeon. 6 body slots — Neural Core, Optics, Arms, Spine, Legs, Cardio — each with 3 augment choices. 3 upgrade grades Mk.I → Mk.III. 18 player augments. 3 pet chrome slots. Unlocks at F100. Persists through prestige.", min: 6 },
    { d: "2026.04.29", v: "v0.30.0", tag: "FEATURE", c: "amber", t: "3v3 Trainer Battles", x: "Sequential Pokémon-style trainer encounters. When a companion faints, the next swaps in. F80+ dungeon trainers (5-8% chance). Pick your 3 best before each fight. Arena 3v3 tab unlocks at F100. No penalty on loss.", min: 5 },
    { d: "2026.04.29", v: "v0.28.0", tag: "CLASS", c: "pink", t: "New Class — RIGGER", x: "Drone-jockeying combat engineer. HP 120 · ATK 11 · DEF 6. Three abilities — Drone Strike, Swarm Volley, Field Repair. Three skills — Overclock, Hardened Chassis, Scavenger Protocol. Full front + back sprite sheets across idle / attack / hurt / walk.", min: 4 },
    { d: "2026.04.29", v: "v0.27.0", tag: "FEATURE", c: "cyan", t: "Metatype System + Character Creation Overhaul", x: "Five metatypes — Human, Replicant, Chromer, Wraith, Golem — each with unique passive bonuses. HP/ATK/DEF multipliers, dodge, crit, attack speed, XP boost, loot luck, HP regen. New 4-step wizard with live stat previews. Existing operatives get a one-time selection prompt.", min: 5 },
    { d: "2026.04.28", v: "v0.26.0", tag: "FEATURE", c: "amber", t: "Pet Arena — PvE Trainers & PvP Battles", x: "5 tiers of PvE trainers (15 total). Beat all in a tier to unlock the next. Async PvP — set a defense companion and challenge other players. Win/loss tracking. Injured sprites at sub-25% HP. Arena rewards in Soul Shards + Data Cores.", min: 4 },
    { d: "2026.04.28", v: "v0.25.0", tag: "FEATURE", c: "pink", t: "Companions — Chrome Beasts, Digital Spirits & Sentient Drones", x: "8 unique cyberpunk creatures across 3 categories. Hatch from Data Cores. Levels 1-50. Bond system. 4-move loadouts. Pokémon-style 7-type chart — Thermal, Hydro, Volt, Synth, Toxic, Chrome, Cryo. Wild encounters on F50+. Companion auto-attack alongside you in runs.", min: 6 },
    { d: "2026.04.27", v: "v0.24.0", tag: "WORLD", c: "cyan", t: "Nullspace Sprites · The Deep Void · Void Maps", x: "All 7 Nullspace enemies (F50-80) get dedicated full-body sprites. New biome — The Deep Void (F81-100), a purple abyss with 6 new enemies and the VOID://NULL boss. F50+ uses an entirely different tileset: cracked void floors, crystalline walls, floating energy wisps.", min: 5 },
    { d: "2026.04.27", v: "v0.22.0", tag: "BALANCE", c: "amber", t: "Boon Rerolls · Scaling Boons · Loot Overhaul", x: "First reroll on each boon offer is FREE. Subsequent rerolls scale ¢100 → ¢200 → ¢400. Past F34 every 5 floors offers a choice of three powerful scaling boons that stack infinitely. Gear drops now use your highest floor ever cleared — farm early floors without sacrificing power.", min: 5 },
    { d: "2026.04.26", v: "v0.20.3", tag: "BALANCE", c: "amber", t: "Tempered Endgame · F100+ Now Tractable", x: "Past F20, enemy HP and ATK curves decay toward soft floors. F100 enemies are several thousand× lighter than before. F1-F20 unchanged — early game is exactly as you knew it. Gear stats get a 1.05^(floor − 25) exponential boost past F25. Upgrade ladder extends to T100.", min: 7 },
    { d: "2026.04.26", v: "v0.20.2", tag: "REBRAND", c: "pink", t: "Cyberpunk Rebrand · Endless Upgrades · Dodge Fix", x: "Mythic gear now wears thematic names instead of \"Mythic+\". The ladder runs Eclipse → Singularity → Override → Wraith → Apex Daemon. Prestige cap raised P5 → P10 with new rank titles Mortal → Singularity. Mythic grade stats now exponential (~4.4× from P1 to P9). Dodge hard-capped at 75% effective.", min: 8 },
    { d: "2026.04.26", v: "v0.19.0", tag: "FEATURE", c: "cyan", t: "Auto Run Tokens", x: "Spend an Auto Token from the hub to have a run play itself. Pick a target floor. Abilities fire on cooldown, boon caches auto-skip, loot auto-scraps. Survive your target and keep ALL rewards. Die before target and shards are forfeit. Every operative starts with 10 free tokens per environment.", min: 5 },
    { d: "2026.04.25", v: "v0.17.0", tag: "FEATURE", c: "amber", t: "Weekly Hunt + 2× Boost Rewards", x: "Second harder boss arena alongside Daily Hunt. ~2× HP/ATK/DEF, resets Monday 00:00 UTC. 5 attempts per week. Guaranteed legendary+ drop. Mythic chance scales with floor. Activating Global Boost now also grants 2× rewards across XP, shards, echoes, and mat drops.", min: 4 },
    { d: "2026.04.25", v: "v0.16.33", tag: "FEATURE", c: "pink", t: "Daily Hunt — One Boss, One Shot, Every UTC Day", x: "New magenta hub tile. Face one hand-picked boss every UTC day. HP/ATK/DEF scale to your highest cleared floor. Server-resolved combat with animated tick log. Rewards scale with floor — 150 + 5×F shards, 1500 + 200×F credits, echoes, mats. Win counts toward Boss Slayer achievement.", min: 5 },
    { d: "2026.04.25", v: "v0.16.31", tag: "FEATURE", c: "cyan", t: "Reforge — Re-roll Affixes, Lock Lines You Love", x: "New magenta Reforge button on every Rare+ item. Toggle 🔒 on the lines to keep, re-roll the rest. Affix count is preserved, values can land higher or lower — true gambling. Locking lines multiplies cost (×2.5 / ×4 / ×5.5). Flat per-tier credit + material fees.", min: 5 },
    { d: "2026.04.25", v: "v0.16.17", tag: "EVENT", c: "amber", t: "Global 8x Boost · Hypercode Window", x: "Admins can trigger a server-wide 8× speed window affecting every active operative simultaneously. Combat, movement, ability cooldowns all run at 8× across the grid. Stacking with 3h hard ceiling. New 8× chip slot in run view auto-selects when boost goes live.", min: 4 },
  ];
  const filtered = active === "all" ? posts : posts.filter(p => p.tag.toLowerCase() === active);
  const tags = ["all", "feature", "patch", "balance", "polish", "class", "feature", "event"]
    .filter((t, i, a) => a.indexOf(t) === i);

  return (
    <div className="page-fade container" data-screen-label="04 Devlog" style={{ paddingTop: 48, paddingBottom: 80 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40, borderBottom: "1px solid var(--line)", paddingBottom: 24 }}>
        <div>
          <div className="mono-label" style={{ marginBottom: 14 }}>// 04 · log · 101 releases indexed</div>
          <h1 className="display-xl"><Glitch>DEVLOG</Glitch></h1>
          <p className="text-dim" style={{ marginTop: 14, maxWidth: 600, fontSize: 14 }}>
            Real patch history. NEMESIS is an evolving cyberpunk idle roguelike — updates roll out continuously,
            no reinstall required. Latest at the top. Full archive at <a href="https://tinygang.dev/patch-notes" target="_blank" rel="noopener" className="text-cyan hover-glitch">tinygang.dev/patch-notes</a>.
          </p>
        </div>
        <div className="row gap-2" style={{ flexWrap: "wrap", maxWidth: 420, justifyContent: "flex-end" }}>
          {tags.map(t => (
            <button key={t} onClick={() => setActive(t)} className="pill" style={{
              cursor: "none",
              borderColor: active === t ? "var(--pink)" : "var(--line)",
              color: active === t ? "var(--pink)" : "var(--ink-dim)",
              background: active === t ? "oklch(0.68 0.28 350 / 0.08)" : "transparent"
            }}>{t}</button>
          ))}
        </div>
      </div>

      {/* Latest hero post */}
      {filtered[0] && (
        <article className="panel" style={{ padding: 0, marginBottom: 32, display: "grid", gridTemplateColumns: "1.2fr 1fr" }}>
          <GameImage src="img/screen-portfolio.jpg" ratio="16/10" label={`${filtered[0].v} · LATEST`} objectPosition="center 20%" />
          <div style={{ padding: 36, display: "flex", flexDirection: "column", gap: 18 }}>
            <div className="row gap-3" style={{ alignItems: "center" }}>
              <span className={`pill text-${filtered[0].c}`} style={{ borderColor: `var(--${filtered[0].c})` }}>{filtered[0].tag}</span>
              <span className="mono-tag text-cyan">{filtered[0].v}</span>
              <span className="mono-tag text-dim">{filtered[0].d}</span>
              <span className="mono-tag text-faint">· {filtered[0].min} min</span>
            </div>
            <h2 className="display-lg hover-glitch">{filtered[0].t}</h2>
            <p className="text-dim" style={{ fontSize: 14, lineHeight: 1.6 }}>{filtered[0].x}</p>
            <a href="https://tinygang.dev/patch-notes" target="_blank" rel="noopener" className="btn" style={{ alignSelf: "flex-start" }}>Read on tinygang.dev <span className="arrow">↗</span></a>
          </div>
        </article>
      )}

      {/* Timeline list */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
        {filtered.slice(1).map((p) => (
          <article key={p.v + p.t} className="panel" style={{ padding: 28, cursor: "none" }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--ink)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; }}>
            <div className="row between" style={{ marginBottom: 14, alignItems: "baseline" }}>
              <div className="row gap-2" style={{ alignItems: "center" }}>
                <span className={`pill text-${p.c}`} style={{ borderColor: `var(--${p.c})` }}>{p.tag}</span>
                <span className="mono-tag text-cyan">{p.v}</span>
              </div>
              <span className="mono-tag text-dim">{p.d}</span>
            </div>
            <h3 className="display-md hover-glitch" style={{ marginBottom: 10, fontSize: 22 }}>{p.t}</h3>
            <p className="text-dim" style={{ fontSize: 13, lineHeight: 1.6 }}>{p.x}</p>
            <div className="row between" style={{ marginTop: 18, alignItems: "center" }}>
              <span className="mono-tag text-faint">{p.min} MIN · FULL LOG ↗</span>
              <span style={{ color: "var(--ink-dim)" }}>↗</span>
            </div>
          </article>
        ))}
      </div>

      {/* Subscribe */}
      <div className="panel" style={{ padding: 32, marginTop: 48, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, alignItems: "center" }}>
        <div>
          <div className="mono-label text-cyan" style={{ marginBottom: 10 }}>// stay in the loop</div>
          <h3 className="display-md">101 releases. More on the way.</h3>
          <p className="text-dim" style={{ fontSize: 13, marginTop: 8 }}>Every patch first lands in Discord. Hop in for build notes, balance debates, and direct devs.</p>
        </div>
        <div className="row gap-2" style={{ justifyContent: "flex-end" }}>
          <a className="btn btn-primary nowrap" href="https://discord.gg/BNuwAzDaxs" target="_blank" rel="noopener">Join Discord ↗</a>
          <a className="btn btn-ghost nowrap" href="https://tinygang.dev/patch-notes" target="_blank" rel="noopener">Full Archive ↗</a>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// ABOUT
// ============================================================
function AboutPage({ setPage }) {
  return (
    <div className="page-fade" data-screen-label="05 About">
      <div className="container" style={{ paddingTop: 48 }}>
        <div className="mono-label" style={{ marginBottom: 18 }}>// 05 · the gang · two humans + cat</div>
        <h1 className="display-xxl" style={{ fontSize: "clamp(64px, 11vw, 180px)" }}>
          <span style={{ display: "block" }}>TINY</span>
          <span style={{ display: "block" }} className="text-pink"><Glitch>GANG</Glitch></span>
        </h1>
      </div>

      <Marquee duration={50}>
        <span className="display-md">2 PEOPLE</span>
        <span className="display-md text-pink">0 OFFICES</span>
        <span className="display-md">1 CAT</span>
        <span className="display-md text-cyan">∞ COFFEE</span>
        <span className="display-md">100% INDIE</span>
      </Marquee>

      {/* Manifesto */}
      <section className="container" style={{ paddingTop: 64, paddingBottom: 64 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 64 }}>
          <div>
            <div className="mono-label text-cyan" style={{ marginBottom: 12 }}>// 01 · manifesto</div>
            <h2 className="display-lg">A studio<br/>built like<br/>a band.</h2>
          </div>
          <div style={{ fontSize: 17, lineHeight: 1.7, color: "var(--ink)" }}>
            <p style={{ marginTop: 0 }}>
              We started Tiny Gang because the games we wanted to play had stopped being made.
              Mid-budget, weird, finished. Premium-feeling free-to-play with no live-service
              treadmill, no battle pass, no dailies guilting you back.
            </p>
            <p>
              We work async, ship in public, and answer our own email. No publisher, no investors,
              no quarterly KPIs. We make what we want, when we want.
            </p>
            <p className="text-pink" style={{ fontFamily: "var(--display)", fontSize: 28, fontWeight: 600, textTransform: "uppercase", letterSpacing: "-0.01em", marginTop: 32 }}>
              <Glitch>The plan is to stay tiny.</Glitch>
            </p>
          </div>
        </div>
      </section>

      {/* Currently Shipping */}
      <section className="container" style={{ paddingBottom: 64 }}>
        <SectionHead code="02" kicker="currently shipping" title="Nemesis · Closed Test" right={
          <button className="btn" onClick={() => setPage("nemesis")}>Open Project →</button>
        } />
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 16 }}>
          <GameImage src="img/banner.jpg" ratio="590/280" label="// NEMESIS · CYBERPUNK IDLE ROGUELIKE" />
          <div className="panel" style={{ padding: 28, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
            <div>
              <div className="mono-label text-cyan" style={{ marginBottom: 12 }}>// elevator</div>
              <h3 className="display-md" style={{ marginBottom: 12, fontSize: 26 }}>An idle roguelike RPG. Cyberpunk-flavored. No gacha, no dailies.</h3>
              <p className="text-dim" style={{ fontSize: 13, lineHeight: 1.55 }}>
                Build your crew. Push the floors. Sleep. Wake up richer. Prestige. Repeat.
              </p>
            </div>
            <div className="row gap-2" style={{ marginTop: 18 }}>
              <button className="btn btn-primary" onClick={() => setPage("signup")}>Join Test →</button>
              <a className="btn btn-ghost" href="https://discord.gg/BNuwAzDaxs" target="_blank" rel="noopener">Discord ↗</a>
            </div>
          </div>
        </div>
      </section>

      {/* Principles */}
      <section className="container" style={{ paddingBottom: 64 }}>
        <SectionHead code="03" kicker="house rules" title="How we work" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 1, background: "var(--line)", border: "1px solid var(--line)" }}>
          {[
            { n: "01", t: "Tiny on purpose", b: "Small team, small scope, small footprint. Constraints make the work better." },
            { n: "02", t: "Ship < perfect", b: "Closed test is the real design tool. We update when we have something worth shipping." },
            { n: "03", t: "Premium feel, F2P price", b: "Free, no gacha, no ads, no subscriptions. We'd rather make less and like the game." },
            { n: "04", t: "Built in public", b: "Public devlog. Public roadmap. You see us iterate in real time — including the misses." },
          ].map(p => (
            <div key={p.n} style={{ background: "var(--bg-1)", padding: 32 }}>
              <div className="mono-tag text-pink" style={{ marginBottom: 14 }}>// {p.n}</div>
              <h3 className="display-md">{p.t}</h3>
              <p className="text-dim" style={{ fontSize: 14, marginTop: 10 }}>{p.b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Timeline */}
      <section className="container" style={{ paddingBottom: 64 }}>
        <SectionHead code="04" kicker="history" title="The path so far" />
        <div style={{ position: "relative", paddingLeft: 28 }}>
          <div style={{ position: "absolute", left: 6, top: 0, bottom: 0, width: 1, background: "var(--line)" }} />
          {[
            ["Founded", "Tiny Gang Studios formed. tinygang.dev goes online."],
            ["First playable", "Nemesis prototype — idle backbone, combat loop, the bare minimum to feel."],
            ["v0.16 era", "Daily Hunt arena. Global 8× boost windows. Cyberpunk rebrand — mythic grades named, prestige ladder extended to P10."],
            ["v0.20.3", "Tempered endgame balance pass. F100+ finally tractable. Gear power curve scales past F400."],
            ["v0.25", "Companions ship. Chrome Beasts, Digital Spirits, Sentient Drones. Pet Arena follows."],
            ["v0.27", "Metatype system — 5 races. Character creation overhaul."],
            ["v0.28", "Fourth class: RIGGER."],
            ["v0.33", "Full wipe + new onboarding. Closed test begins on Google Play."],
            ["v0.37", "Specializations + Dual Loadouts."],
            ["v0.38 · now", <span className="text-pink">You are here. <span className="blink">▌</span></span>],
          ].map(([d, t], i) => (
            <div key={i} style={{ position: "relative", paddingBottom: 24 }}>
              <div style={{ position: "absolute", left: -28, top: 4, width: 13, height: 13, border: "1px solid var(--cyan)", background: "var(--bg-0)", borderRadius: "50%" }} />
              <div className="mono-tag text-cyan" style={{ marginBottom: 4 }}>{d}</div>
              <div style={{ color: "var(--ink)", fontSize: 15 }}>{t}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Join */}
      <section className="container" style={{ paddingBottom: 32 }}>
        <div className="panel" style={{ padding: 48, display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center" }}>
          <div>
            <div className="mono-label text-cyan" style={{ marginBottom: 12 }}>// say hi</div>
            <h2 className="display-lg"><Glitch>Hang out with us.</Glitch></h2>
            <p className="text-dim" style={{ marginTop: 12, maxWidth: 560 }}>
              The Discord is small, weird, and where most of the real conversation happens.
              Ask anything, share builds, file bugs.
            </p>
          </div>
          <a className="btn btn-primary" href="https://discord.gg/BNuwAzDaxs" target="_blank" rel="noopener" style={{ padding: "18px 28px" }}>Join Discord <span className="arrow">→</span></a>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// CONTACT
// ============================================================
function ContactPage({ setPage }) {
  const [form, setForm] = useStateP({ name: "", email: "", topic: "press", msg: "" });
  const [errs, setErrs] = useStateP({});
  const [sent, setSent] = useStateP(false);
  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const submit = (e) => {
    e.preventDefault();
    const er = {};
    if (!form.name) er.name = "Required";
    if (!form.email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) er.email = "Valid email required";
    if (!form.msg || form.msg.length < 10) er.msg = "Min 10 characters — tell us something";
    setErrs(er);
    if (Object.keys(er).length === 0) setSent(true);
  };

  return (
    <div className="page-fade container" data-screen-label="06 Contact" style={{ paddingTop: 48, paddingBottom: 80 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 64 }}>
        <div>
          <div className="mono-label" style={{ marginBottom: 14 }}>// 06 · radio · transmissions</div>
          <h1 className="display-xl">
            <span style={{ display: "block" }}>SAY</span>
            <span style={{ display: "block" }} className="text-cyan"><Glitch>HELLO</Glitch>.</span>
          </h1>
          <p style={{ marginTop: 24, fontSize: 15, color: "var(--ink-dim)", maxWidth: 420, lineHeight: 1.6 }}>
            Press inquiries, partnership pitches, fan mail, bug reports — all welcome.
            We read everything within 48 hours. Most things faster.
          </p>

          <div style={{ marginTop: 40 }}>
            {[
              { l: "// General", v: "contact@tinygang.dev", c: "var(--cyan)", href: "mailto:contact@tinygang.dev" },
              { l: "// Closed Test", v: "contact@tinygang.dev", c: "var(--pink)", href: "mailto:contact@tinygang.dev?subject=Nemesis%20Closed%20Test" },
              { l: "// Discord", v: "discord.gg/BNuwAzDaxs", c: "var(--green)", href: "https://discord.gg/BNuwAzDaxs" },
              { l: "// Site", v: "tinygang.dev", c: "var(--amber)", href: "https://tinygang.dev" },
            ].map(c => (
              <a key={c.l} href={c.href} target={c.href.startsWith("http") ? "_blank" : undefined} rel="noopener" className="hairline" style={{ padding: "16px 0", display: "flex", justifyContent: "space-between", alignItems: "baseline", cursor: "none" }}>
                <span className="mono-label" style={{ color: c.c }}>{c.l}</span>
                <span style={{ fontFamily: "var(--display)", fontSize: 18, fontWeight: 600, letterSpacing: "0.01em" }}>{c.v}</span>
              </a>
            ))}
          </div>

          <div className="panel" style={{ padding: 22, marginTop: 32 }}>
            <div className="mono-label text-cyan" style={{ marginBottom: 12 }}>// SIGNAL</div>
            <div style={{ fontFamily: "var(--mono)", fontSize: 12, lineHeight: 1.7, color: "var(--ink-dim)" }}>
              <div>Built remotely · async-first</div>
              <div>Reply time: usually &lt; 48 hours</div>
              <div>Faster on Discord</div>
            </div>
          </div>
        </div>

        {sent ? (
          <div className="panel corners" style={{ padding: 48, height: "fit-content" }}>
            <span className="corner-tl" /><span className="corner-br" />
            <div className="mono-label text-cyan" style={{ marginBottom: 14 }}>// MSG_RX · 200 OK</div>
            <h2 className="display-lg"><Glitch>Sent.</Glitch></h2>
            <p className="text-dim" style={{ marginTop: 18, fontSize: 14, lineHeight: 1.6 }}>
              Thanks, <span className="text-cyan">{form.name}</span>. We'll reply to <span className="text-pink">{form.email}</span> within 48 hours.
            </p>
            <button className="btn" style={{ marginTop: 24 }} onClick={() => { setSent(false); setForm({ name: "", email: "", topic: "press", msg: "" }); }}>Send another</button>
          </div>
        ) : (
          <form onSubmit={submit} className="panel corners" style={{ padding: 36, height: "fit-content" }}>
            <span className="corner-tl" /><span className="corner-br" />
            <div className="row between" style={{ marginBottom: 24, alignItems: "baseline" }}>
              <div className="mono-label text-cyan">// TRANSMISSION_FORM_001</div>
              <div className="mono-tag text-dim">3 FIELDS · &lt; 60s</div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
              <div>
                <div className="field-label"><span>// Your name</span></div>
                <input className={`field ${errs.name ? "error" : ""}`} value={form.name} onChange={e => upd("name", e.target.value)} placeholder="J. Smith" />
                {errs.name && <div className="field-error">! {errs.name}</div>}
              </div>
              <div>
                <div className="field-label"><span>// Email</span></div>
                <input className={`field ${errs.email ? "error" : ""}`} value={form.email} onChange={e => upd("email", e.target.value)} placeholder="you@studio.com" />
                {errs.email && <div className="field-error">! {errs.email}</div>}
              </div>
              <div style={{ gridColumn: "span 2" }}>
                <div className="field-label"><span>// Topic</span></div>
                <div className="row gap-2" style={{ flexWrap: "wrap" }}>
                  {[["press", "Press"], ["biz", "Partnership"], ["bug", "Bug"], ["love", "Fan mail"], ["other", "Other"]].map(([v, l]) => (
                    <button type="button" key={v} onClick={() => upd("topic", v)} style={{
                      all: "unset", cursor: "none", padding: "10px 16px",
                      border: `1px solid ${form.topic === v ? "var(--pink)" : "var(--line)"}`,
                      color: form.topic === v ? "var(--pink)" : "var(--ink-dim)",
                      background: form.topic === v ? "oklch(0.68 0.28 350 / 0.08)" : "transparent",
                      fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase"
                    }}>{l}</button>
                  ))}
                </div>
              </div>
              <div style={{ gridColumn: "span 2" }}>
                <div className="field-label"><span>// Message</span></div>
                <textarea className={`field ${errs.msg ? "error" : ""}`} value={form.msg} onChange={e => upd("msg", e.target.value)} placeholder="Hit us with it." style={{ minHeight: 180 }} />
                {errs.msg && <div className="field-error">! {errs.msg}</div>}
              </div>
            </div>
            <button type="submit" className="btn btn-primary" style={{ marginTop: 24, width: "100%", justifyContent: "center", padding: 18 }}>
              Transmit <span className="arrow">→</span>
            </button>
          </form>
        )}
      </div>
    </div>
  );
}

// ============================================================
// TRAILER MODAL CONTENT
// ============================================================
function TrailerContent({ onClose }) {
  const [playing, setPlaying] = useStateP(false);
  return (
    <div className="panel corners" style={{ padding: 0, background: "var(--bg-0)" }}>
      <span className="corner-tl" /><span className="corner-br" />
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 20px", borderBottom: "1px solid var(--line)" }}>
        <div className="row gap-3" style={{ alignItems: "center" }}>
          <span className="dot pulse-dot" style={{ width: 8, height: 8, background: "var(--pink)", borderRadius: "50%", display: "inline-block" }} />
          <span className="mono-label text-pink">// NEMESIS · OFFICIAL TRAILER · YOUTUBE</span>
        </div>
        <button onClick={onClose} className="mono-tag" style={{ all: "unset", cursor: "none", padding: "6px 12px", border: "1px solid var(--line)" }}>ESC ✕</button>
      </div>
      <div style={{ position: "relative", aspectRatio: "16/9", overflow: "hidden", background: "var(--bg-0)" }}>
        {playing ? (
          <iframe
            src="https://www.youtube.com/embed/MeTZrzhx8-M?autoplay=1&rel=0&modestbranding=1"
            title="Nemesis Trailer"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
            style={{ width: "100%", height: "100%", border: 0, display: "block" }}
          />
        ) : (
          <>
            <img src={`https://img.youtube.com/vi/MeTZrzhx8-M/maxresdefault.jpg`} alt="Nemesis trailer thumbnail" style={{ width: "100%", height: "100%", objectFit: "cover" }} onError={(e) => { e.currentTarget.src = "img/banner.jpg"; }} />
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, oklch(0 0 0 / 0.2), oklch(0 0 0 / 0.6))" }} />
            <button onClick={() => setPlaying(true)} style={{ all: "unset", cursor: "none", position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }} aria-label="Play trailer">
              <span style={{ width: 96, height: 96, borderRadius: "50%", border: "2px solid var(--cyan)", display: "flex", alignItems: "center", justifyContent: "center", background: "oklch(0 0 0 / 0.5)", boxShadow: "0 0 40px oklch(0.85 0.18 200 / 0.5)" }}>
                <span style={{ width: 24, height: 28, background: "var(--cyan)", clipPath: "polygon(0 0, 100% 50%, 0 100%)", marginLeft: 6 }} />
              </span>
            </button>
            <div style={{ position: "absolute", top: 16, left: 16, fontFamily: "var(--mono)", fontSize: 11, color: "var(--cyan)", letterSpacing: "0.18em", padding: "4px 10px", border: "1px solid var(--cyan)", background: "oklch(0 0 0 / 0.6)" }}>
              ◉ TAP TO PLAY · YOUTUBE
            </div>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { HomePage, NemesisPage, SignupPage, DevlogPage, AboutPage, ContactPage, TrailerContent });