// ============================================================
// HEIST — cooperative crew with asymmetric roles + variable reward
// Behavioral spine: variable-ratio loot · role identity · interdependence
// ============================================================

// ─── Role tokens ─────────────────────────────────────────────────
const HEIST_ROLES = {
  cracksman: { label: 'Cracksman', tag: 'Calculation', glyph: '◐', color: '#d6a85f', deep: '#a87f3f',
              kit: 'Stoichiometry · formulae · timed math', char: 'beaker' },
  brain:     { label: 'Brain',     tag: 'Conceptual',  glyph: '◇', color: '#9b7eb8', deep: '#5b3f7a',
              kit: 'Theory · explanation · long-form',  char: 'helix' },
  lookout:   { label: 'Lookout',   tag: 'Recognition', glyph: '◉', color: '#e89b8b', deep: '#c47165',
              kit: 'Diagrams · quick identify · pattern', char: 'cell' },
  getaway:   { label: 'Getaway',   tag: 'Speed',       glyph: '➤', color: '#6b9b7c', deep: '#3d6b50',
              kit: 'Speed round · 8s questions · combo',  char: 'bolt' },
};

// ─── Vault SVG ───────────────────────────────────────────────────
function VaultSVG({ size = 100, cracked = 0.65, accent = '#d6a85f', deep = '#a87f3f' }) {
  const r = 40;
  const c = 2 * Math.PI * r;
  return (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <defs>
        <radialGradient id={`vault-bg-${accent}`} cx="40%" cy="35%">
          <stop offset="0%" stopColor="#2d2418"/>
          <stop offset="100%" stopColor="#0d0e18"/>
        </radialGradient>
      </defs>
      <circle cx="50" cy="50" r="46" fill={`url(#vault-bg-${accent})`} stroke={deep} strokeWidth="2"/>
      <circle cx="50" cy="50" r={r} fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth="6"/>
      <circle cx="50" cy="50" r={r} fill="none" stroke={accent} strokeWidth="6"
        strokeLinecap="round" strokeDasharray={`${c*cracked} ${c}`} transform="rotate(-90 50 50)"/>
      {/* dial spokes */}
      {[0,45,90,135,180,225,270,315].map(d => (
        <line key={d} x1="50" y1="50" x2={50 + Math.cos(d*Math.PI/180)*30} y2={50 + Math.sin(d*Math.PI/180)*30}
          stroke="rgba(255,255,255,0.08)" strokeWidth="1.5"/>
      ))}
      <circle cx="50" cy="50" r="10" fill={accent} stroke={deep} strokeWidth="2"/>
      <text x="50" y="54" textAnchor="middle" fontSize="9" fontWeight="800" fill="#1a120a" fontFamily="Outfit">
        {Math.round(cracked * 100)}
      </text>
    </svg>
  );
}

// ─── Loot crate (mini) ───────────────────────────────────────────
function LootCrate({ rarity = 'common', size = 70 }) {
  const palette = {
    common:    { base: '#6b7a8a', edge: '#3a4453', glow: 'rgba(140,160,180,0.4)' },
    rare:      { base: '#5b8ec4', edge: '#2e5688', glow: 'rgba(91,142,196,0.55)' },
    epic:      { base: '#9b7eb8', edge: '#5b3f7a', glow: 'rgba(155,126,184,0.6)' },
    legendary: { base: '#d6a85f', edge: '#a87f3f', glow: 'rgba(214,168,95,0.75)' },
  }[rarity];
  return (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <ellipse cx="50" cy="92" rx="34" ry="5" fill={palette.glow}/>
      <path d="M22 38 L50 22 L78 38 L78 78 L50 90 L22 78 Z" fill={palette.base} stroke={palette.edge} strokeWidth="2.5"/>
      <path d="M22 38 L50 54 L78 38" fill="none" stroke={palette.edge} strokeWidth="2.5"/>
      <path d="M50 54 L50 90" stroke={palette.edge} strokeWidth="2.5"/>
      <rect x="44" y="62" width="12" height="14" rx="2" fill={palette.edge}/>
      <circle cx="50" cy="68" r="2" fill={palette.base}/>
    </svg>
  );
}

// ─── 1. CREW LOBBY (pre-heist, mobile) ──────────────────────────
function HeCrew() {
  return (
    <SdScope theme="mixed">
      <PhoneFrame time="6:42">
        <div className="he-crew">
          <div className="he-crew-head">
            <div className="he-crew-eyebrow">FRIDAY HEIST · OPENS 7:00 PM</div>
            <div className="he-crew-title">The Mendeleev<br/><em>Vault Job</em></div>
            <div className="he-crew-sub">Chemistry · Module 5 · 6-minute window</div>
          </div>

          <div className="he-crew-stage">
            <div className="he-crew-stage-tag">YOUR CREW · 4 OF 4 LOCKED IN</div>
            <div className="he-crew-roster">
              {[
                { r: 'cracksman', name: 'Maya K.', me: true,   status: 'READY' },
                { r: 'brain',     name: 'Felix W.', me: false,  status: 'READY' },
                { r: 'lookout',   name: 'Priya S.', me: false,  status: 'READY' },
                { r: 'getaway',   name: 'Jordan T.', me: false, status: 'READY' },
              ].map((m, i) => {
                const role = HEIST_ROLES[m.r];
                return (
                  <div key={i} className={`he-crew-card ${m.me ? 'me' : ''}`}
                    style={{ '--he-role': role.color, '--he-role-deep': role.deep }}>
                    <div className="he-crew-card-top">
                      <CharGlyph kind={role.char} size={36}/>
                      <div className="he-crew-card-glyph">{role.glyph}</div>
                    </div>
                    <div className="he-crew-card-role">{role.label}</div>
                    <div className="he-crew-card-name">{m.name}{m.me && <small> · you</small>}</div>
                    <div className="he-crew-card-status">{m.status}</div>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="he-crew-payoff">
            <div className="he-crew-payoff-row">
              <div className="he-crew-payoff-icon"><LootCrate rarity="rare" size={36}/></div>
              <div className="he-crew-payoff-text">
                <strong>4 personal crates</strong>
                <small>+ 1 crew vault if all roles crack</small>
              </div>
              <div className="he-crew-payoff-tier">
                <span className="he-tier common"></span>
                <span className="he-tier rare"></span>
                <span className="he-tier epic"></span>
                <span className="he-tier legendary"></span>
              </div>
            </div>
            <div className="he-crew-payoff-row">
              <div className="he-crew-payoff-icon" style={{ background: '#1a1d2e' }}>
                <Icon name="timer" style={{ color: '#d6a85f', width: 22, height: 22 }}/>
              </div>
              <div className="he-crew-payoff-text">
                <strong>6 minutes when the timer starts</strong>
                <small>Each wrong answer adds <strong>15s</strong> to the alarm</small>
              </div>
            </div>
          </div>

          <div className="he-crew-cta">
            <button className="he-btn-ready">
              <Icon name="check" style={{ width: 14, height: 14 }}/> READY · DOORS OPEN 7:00
            </button>
            <div className="he-crew-cta-sub">
              <strong>1 847</strong> crews lining up tonight · Last week's top haul: <strong>2 of 41</strong> legendary
            </div>
          </div>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

// ─── 2. BIG SCREEN — THE BLUEPRINT (host/projector) ──────────────
function HeBlueprint() {
  return (
    <SdScope theme="chem">
      <ProjectorFrame tag="HEIST · IN PROGRESS · 04:18 / 06:00">
        <div className="he-blueprint">
          <div className="he-bp-head">
            <div className="he-bp-eyebrow">THE MENDELEEV VAULT JOB · CHEMISTRY · MOD 5</div>
            <div className="he-bp-row">
              <div className="he-bp-title">Crew 0184 · <em>The Catalysts</em></div>
              <div className="he-bp-timer">
                <div className="he-bp-timer-num">04:18</div>
                <div className="he-bp-timer-label">REMAINING</div>
              </div>
              <div className="he-bp-alarm">
                <div className="he-bp-alarm-dots">
                  <span className="on"></span><span className="on"></span><span className="on"></span><span></span><span></span>
                </div>
                <div className="he-bp-alarm-label">ALARM · 3 / 5</div>
              </div>
            </div>
          </div>

          <div className="he-bp-stage">
            {/* faux blueprint grid */}
            <svg className="he-bp-grid" viewBox="0 0 1000 500" preserveAspectRatio="none">
              <defs>
                <pattern id="bp-grid" width="40" height="40" patternUnits="userSpaceOnUse">
                  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(214,168,95,0.10)" strokeWidth="0.8"/>
                </pattern>
              </defs>
              <rect width="1000" height="500" fill="url(#bp-grid)"/>
              {/* connecting lines between vaults */}
              <path d="M 200 140 L 500 220 L 800 140 M 200 360 L 500 280 L 800 360" stroke="rgba(214,168,95,0.18)" strokeWidth="1.5" strokeDasharray="6 4" fill="none"/>
              <circle cx="500" cy="250" r="48" fill="none" stroke="rgba(214,168,95,0.25)" strokeWidth="2"/>
              <circle cx="500" cy="250" r="68" fill="none" stroke="rgba(214,168,95,0.12)" strokeWidth="1.5"/>
            </svg>

            {/* 4 vault dials, each shows a role's progress */}
            <div className="he-bp-vault topL">
              <VaultSVG size={120} cracked={0.78} accent={HEIST_ROLES.cracksman.color} deep={HEIST_ROLES.cracksman.deep}/>
              <div className="he-bp-vault-tag">
                <CharGlyph kind="beaker" size={20}/>
                <div>
                  <strong>Maya · Cracksman</strong>
                  <small>7 / 9 · last 4.2s</small>
                </div>
              </div>
            </div>
            <div className="he-bp-vault topR">
              <VaultSVG size={120} cracked={0.55} accent={HEIST_ROLES.brain.color} deep={HEIST_ROLES.brain.deep}/>
              <div className="he-bp-vault-tag right">
                <div>
                  <strong>Felix · Brain</strong>
                  <small>5 / 9 · long-form</small>
                </div>
                <CharGlyph kind="helix" size={20}/>
              </div>
            </div>
            <div className="he-bp-vault botL">
              <VaultSVG size={120} cracked={0.92} accent={HEIST_ROLES.lookout.color} deep={HEIST_ROLES.lookout.deep}/>
              <div className="he-bp-vault-tag">
                <CharGlyph kind="cell" size={20}/>
                <div>
                  <strong>Priya · Lookout</strong>
                  <small>8 / 9 · <em style={{ color: '#e89b8b' }}>almost cracked</em></small>
                </div>
              </div>
            </div>
            <div className="he-bp-vault botR">
              <VaultSVG size={120} cracked={0.34} accent={HEIST_ROLES.getaway.color} deep={HEIST_ROLES.getaway.deep}/>
              <div className="he-bp-vault-tag right">
                <div>
                  <strong>Jordan · Getaway</strong>
                  <small>3 / 9 · <em style={{ color: '#e89b8b' }}>under fire</em></small>
                </div>
                <CharGlyph kind="bolt" size={20}/>
              </div>
            </div>

            {/* central master vault */}
            <div className="he-bp-master">
              <div className="he-bp-master-ring">
                <VaultSVG size={140} cracked={0.65} accent="#d6a85f" deep="#a87f3f"/>
              </div>
              <div className="he-bp-master-label">
                <small>MASTER VAULT</small>
                <strong>65%</strong>
              </div>
            </div>
          </div>

          <div className="he-bp-feed">
            <div className="he-bp-feed-row gold">
              <CharGlyph kind="cell" size={20}/>
              <strong>Priya</strong> · cracked dial 8 · <span className="he-time">1.9s</span>
              <span className="he-bp-feed-tag">SAFE</span>
            </div>
            <div className="he-bp-feed-row">
              <CharGlyph kind="beaker" size={20}/>
              <strong>Maya</strong> · solved 7 / 9 · <span className="he-time">4.2s</span>
              <span className="he-bp-feed-tag">+220</span>
            </div>
            <div className="he-bp-feed-row alarm">
              <CharGlyph kind="bolt" size={20}/>
              <strong>Jordan</strong> · missed · <span className="he-time">+15s alarm</span>
              <span className="he-bp-feed-tag bad">!</span>
            </div>
            <div className="he-bp-feed-row">
              <CharGlyph kind="helix" size={20}/>
              <strong>Felix</strong> · solved 5 / 9 · long-form · <span className="he-time">7.4s</span>
              <span className="he-bp-feed-tag">+180</span>
            </div>
          </div>
        </div>
      </ProjectorFrame>
    </SdScope>
  );
}

// ─── 3. STUDENT PHONE DURING THE JOB ─────────────────────────────
function HeLive() {
  return (
    <SdScope theme="chem">
      <PhoneFrame time="7:04">
        <div className="he-live">
          <div className="he-live-head">
            <div className="he-live-head-top">
              <div className="he-live-role-tag" style={{ '--he-role': HEIST_ROLES.cracksman.color }}>
                <span className="he-live-role-dot">◐</span> CRACKSMAN
              </div>
              <div className="he-live-timer">04:18</div>
            </div>
            <div className="he-live-vault">
              <VaultSVG size={64} cracked={0.78} accent={HEIST_ROLES.cracksman.color} deep={HEIST_ROLES.cracksman.deep}/>
              <div className="he-live-vault-bar">
                <div className="he-live-vault-bar-label">
                  <strong>Vault 78%</strong>
                  <small>7 / 9 dials cracked</small>
                </div>
                <div className="he-live-vault-bar-track">
                  <div className="he-live-vault-bar-fill" style={{ width: '78%' }}></div>
                </div>
                <div className="he-live-vault-bar-foot">
                  <span><Icon name="bolt" style={{ width: 11, height: 11 }}/> 4.2s avg</span>
                  <span>+220 streak</span>
                </div>
              </div>
            </div>
          </div>

          <div className="he-live-q">
            <div className="he-live-q-eyebrow">DIAL 8 · STOICHIOMETRY</div>
            <div className="he-live-q-text">
              How many grams of <strong>O₂</strong> are needed to react with 4.40&nbsp;g of <strong>C₃H₈</strong> completely?
            </div>
            <div className="he-live-q-formula">C₃H₈ + 5 O₂ → 3 CO₂ + 4 H₂O</div>
            <div className="he-live-options">
              <button className="he-live-opt"><span className="he-live-opt-k">A</span> 12.8 g</button>
              <button className="he-live-opt selected"><span className="he-live-opt-k">B</span> 16.0 g</button>
              <button className="he-live-opt"><span className="he-live-opt-k">C</span> 20.0 g</button>
              <button className="he-live-opt"><span className="he-live-opt-k">D</span> 32.0 g</button>
            </div>
          </div>

          <div className="he-live-crew">
            <div className="he-live-crew-label">CREW STATUS</div>
            <div className="he-live-crew-row">
              <div className="he-live-crew-pill" style={{ '--he-role': HEIST_ROLES.brain.color }}>
                <CharGlyph kind="helix" size={20}/>
                <div className="he-live-crew-pill-text">Felix · 5/9</div>
                <div className="he-live-crew-pill-bar"><div style={{ width: '55%', background: HEIST_ROLES.brain.color }}></div></div>
              </div>
              <div className="he-live-crew-pill" style={{ '--he-role': HEIST_ROLES.lookout.color }}>
                <CharGlyph kind="cell" size={20}/>
                <div className="he-live-crew-pill-text">Priya · 8/9 🔥</div>
                <div className="he-live-crew-pill-bar"><div style={{ width: '92%', background: HEIST_ROLES.lookout.color }}></div></div>
              </div>
              <div className="he-live-crew-pill alarmed" style={{ '--he-role': HEIST_ROLES.getaway.color }}>
                <CharGlyph kind="bolt" size={20}/>
                <div className="he-live-crew-pill-text">Jordan · 3/9 <span style={{ color: '#e89b8b' }}>!</span></div>
                <div className="he-live-crew-pill-bar"><div style={{ width: '34%', background: HEIST_ROLES.getaway.color }}></div></div>
              </div>
            </div>
          </div>

          <div className="he-live-alarm">
            <div className="he-live-alarm-dots">
              <span className="on"></span><span className="on"></span><span className="on"></span><span></span><span></span>
            </div>
            <div className="he-live-alarm-text">
              <strong>3 / 5 alarms triggered.</strong> Two more and the job blows.
            </div>
          </div>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

// ─── 4. LOOT REVEAL — variable reward (phone) ────────────────────
function HeLoot() {
  return (
    <SdScope theme="mixed">
      <PhoneFrame time="7:09">
        <div className="he-loot">
          <div className="he-loot-head">
            <div className="he-loot-eyebrow">HEIST · COMPLETE · 5:47 / 6:00</div>
            <div className="he-loot-title">You cracked it.</div>
            <div className="he-loot-sub">
              <strong style={{ color: '#fff' }}>Crew 0184 · The Catalysts</strong> · 4 / 4 vaults · 2 alarms left
            </div>
          </div>

          <div className="he-loot-stage">
            <div className="he-loot-stage-label">YOUR CRATE</div>
            <div className="he-loot-main">
              <div className="he-loot-main-rays">
                <svg viewBox="0 0 200 200" width="220" height="220">
                  {Array.from({ length: 18 }).map((_, i) => {
                    const a = (i / 18) * Math.PI * 2;
                    const x = 100 + Math.cos(a) * 100;
                    const y = 100 + Math.sin(a) * 100;
                    return <line key={i} x1="100" y1="100" x2={x} y2={y} stroke="rgba(214,168,95,0.4)" strokeWidth="2"/>;
                  })}
                </svg>
              </div>
              <LootCrate rarity="legendary" size={140}/>
            </div>
            <div className="he-loot-main-rarity">
              <span className="he-loot-main-rarity-dot legendary"></span>
              LEGENDARY · 1 IN 247
            </div>
            <div className="he-loot-main-name">"Periodic Cipher"</div>
            <div className="he-loot-main-desc">
              Limited avatar frame · Friday Heist · Mod 5
            </div>
          </div>

          <div className="he-loot-other">
            <div className="he-loot-other-label">CREW PULLS</div>
            <div className="he-loot-other-row">
              <CharGlyph kind="helix" size={28}/>
              <div className="he-loot-other-name">Felix</div>
              <LootCrate rarity="rare" size={30}/>
              <div className="he-loot-other-tag rare">RARE</div>
            </div>
            <div className="he-loot-other-row">
              <CharGlyph kind="cell" size={28}/>
              <div className="he-loot-other-name">Priya</div>
              <LootCrate rarity="epic" size={30}/>
              <div className="he-loot-other-tag epic">EPIC · BLOOK</div>
            </div>
            <div className="he-loot-other-row">
              <CharGlyph kind="bolt" size={28}/>
              <div className="he-loot-other-name">Jordan</div>
              <LootCrate rarity="common" size={30}/>
              <div className="he-loot-other-tag common">+220 XP</div>
            </div>
          </div>

          <div className="he-loot-progress">
            <div className="he-loot-progress-label">
              <span>HEIST COLLECTION · Chemistry</span>
              <strong>11 / 16</strong>
            </div>
            <div className="he-loot-progress-track">
              {Array.from({ length: 16 }).map((_, i) => (
                <span key={i} className={`he-loot-progress-cell ${i < 11 ? 'on' : ''} ${i === 10 ? 'just' : ''}`}></span>
              ))}
            </div>
            <div className="he-loot-progress-foot">
              5 more pieces to complete the Mendeleev set · +1 legendary on completion
            </div>
          </div>

          <div className="he-loot-cta">
            <button className="he-loot-cta-primary">View in Collection →</button>
            <button className="he-loot-cta-ghost">Share haul</button>
          </div>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

// ─── OVERVIEW ────────────────────────────────────────────────────
function HeOverview() {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: '#0d0e18',
      padding: 32,
      display: 'flex', flexDirection: 'column', gap: 18,
      fontFamily: 'DM Sans, system-ui, sans-serif',
      color: '#f5e4c3',
      overflow: 'hidden',
    }}>
      <div>
        <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '1.8px', color: '#d6a85f', textTransform: 'uppercase', marginBottom: 4 }}>
          HSCSCIENCE · MULTIPLAYER · GAME TYPE 6 · CREW CO-OP
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em', color: '#fff' }}>Heist</div>
          <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.55)', fontWeight: 500 }}>— a 4-person crew with 4 different jobs cracking one master vault.</div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 14 }}>
        <div style={{ background: 'linear-gradient(140deg, #0d0e18 0%, #2a1b40 45%, #d6a85f 110%)', borderRadius: 14, padding: 22, color: '#fff', border: '1.5px solid rgba(214,168,95,0.25)' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 11, fontWeight: 800, letterSpacing: '1.6px', color: '#f5e4c3', textTransform: 'uppercase', marginBottom: 4 }}>THE BEHAVIORAL HOOK</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 22, fontWeight: 800, lineHeight: 1.15, marginBottom: 10 }}>
            Variable reward + role identity + interdependence.
          </div>
          <div style={{ fontSize: 13.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.85)' }}>
            The Skinner box (random loot crates) is the strongest engagement mechanic ever discovered. We pair it with <strong>asymmetric roles</strong> — your Cracksman questions are different from the Brain's — so you're <em>specialised</em>, not interchangeable. Your team depends on <em>you specifically</em>. Loot pulls happen in front of the crew, so legendary drops are <strong>social events</strong>.
          </div>
        </div>
        <div style={{ background: '#16182a', borderRadius: 14, padding: 18, border: '1.5px solid rgba(214,168,95,0.15)' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 10, fontWeight: 800, letterSpacing: '1.4px', color: 'rgba(214,168,95,0.7)', textTransform: 'uppercase', marginBottom: 6 }}>RETENTION · 1</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4, color: '#fff' }}>Role specialisation</div>
          <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.7)', lineHeight: 1.5 }}>
            4 distinct question modes — Calculation / Conceptual / Recognition / Speed. Picking a role becomes identity ("I'm a Brain main"). Drives variety + skill mastery.
          </div>
        </div>
        <div style={{ background: '#16182a', borderRadius: 14, padding: 18, border: '1.5px solid rgba(214,168,95,0.15)' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 10, fontWeight: 800, letterSpacing: '1.4px', color: 'rgba(214,168,95,0.7)', textTransform: 'uppercase', marginBottom: 6 }}>RETENTION · 2</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4, color: '#fff' }}>Collection sets per module</div>
          <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.7)', lineHeight: 1.5 }}>
            Each module has a 16-piece set. Completionism + sunk cost. "I'm 5 pieces from finishing Mod 5" pulls you back next Friday.
          </div>
        </div>
        <div style={{ background: '#16182a', borderRadius: 14, padding: 18, border: '1.5px solid rgba(214,168,95,0.15)' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 10, fontWeight: 800, letterSpacing: '1.4px', color: 'rgba(214,168,95,0.7)', textTransform: 'uppercase', marginBottom: 6 }}>RETENTION · 3</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4, color: '#fff' }}>Crew bond = social pressure</div>
          <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.7)', lineHeight: 1.5 }}>
            Your 3 mates need you specifically. Hardest possible no-show: you can't sub yourself out. Crews persist across heists → bonus loot for repeat crews.
          </div>
        </div>
      </div>

      <div style={{
        background: '#16182a', border: '1.5px solid rgba(214,168,95,0.2)', borderRadius: 14,
        padding: '14px 18px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8,
      }}>
        {['Crew lobby · pick role', 'Big screen · 4 vaults', 'Phone · solve your dials', 'Loot crates open'].map((label, i) => (
          <div key={i} style={{
            background: 'rgba(214,168,95,0.1)', borderRadius: 10, padding: '10px 12px',
            display: 'flex', flexDirection: 'column', gap: 4, border: '1px solid rgba(214,168,95,0.18)',
          }}>
            <div style={{
              width: 22, height: 22, borderRadius: 6, background: '#d6a85f', color: '#1a120a',
              fontFamily: 'Outfit, sans-serif', fontSize: 12, fontWeight: 800,
              display: 'grid', placeItems: 'center',
            }}>{i+1}</div>
            <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 13, fontWeight: 700, color: '#fff' }}>{label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── App ─────────────────────────────────────────────────────────
function App() {
  return (
    <div className="wc-scope" style={{ background: '#f0eee9', padding: '32px', minHeight: '100vh', overflowY: 'auto' }}>
      <HeOverview/>
      <HeCrew/>
      <HeBlueprint/>
      <HeLive/>
      <HeLoot/>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);