// ============================================================
// BOSS — cooperative class-vs-boss game type
// 6 artboards across 5 sections
// ============================================================

// ─── Pathogen Prime boss illustration ────────────────────────────
function PathogenPrime({ size = 240 }) {
  return (
    <svg viewBox="0 0 200 200" width={size} height={size}>
      <defs>
        <radialGradient id="bb-pp-body" cx="35%" cy="30%">
          <stop offset="0%" stopColor="#e89b8b"/>
          <stop offset="60%" stopColor="#c47165"/>
          <stop offset="100%" stopColor="#5a2b22"/>
        </radialGradient>
        <radialGradient id="bb-pp-eye" cx="40%" cy="40%">
          <stop offset="0%" stopColor="#fff"/>
          <stop offset="60%" stopColor="#f5e4c3"/>
          <stop offset="100%" stopColor="#d6a85f"/>
        </radialGradient>
      </defs>
      {/* spike halo */}
      {Array.from({ length: 16 }).map((_, i) => {
        const a = (i / 16) * Math.PI * 2;
        const x1 = 100 + Math.cos(a) * 62;
        const y1 = 100 + Math.sin(a) * 62;
        const x2 = 100 + Math.cos(a) * 92;
        const y2 = 100 + Math.sin(a) * 92;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#8a3f33" strokeWidth="4" strokeLinecap="round"/>;
      })}
      {/* spike tips */}
      {Array.from({ length: 16 }).map((_, i) => {
        const a = (i / 16) * Math.PI * 2;
        const x = 100 + Math.cos(a) * 92;
        const y = 100 + Math.sin(a) * 92;
        return <circle key={i} cx={x} cy={y} r="6" fill="#c47165" stroke="#5a2b22" strokeWidth="2"/>;
      })}
      {/* body */}
      <circle cx="100" cy="100" r="64" fill="url(#bb-pp-body)" stroke="#3d1d18" strokeWidth="3"/>
      {/* surface dots / proteins */}
      {[[60,75],[140,80],[70,135],[135,135],[100,55],[100,150],[55,105],[148,108]].map(([x,y], i) => (
        <circle key={i} cx={x} cy={y} r="6" fill="#5a2b22" opacity="0.55"/>
      ))}
      {/* mouth */}
      <path d="M70 115 Q100 142 130 115" fill="none" stroke="#3d1d18" strokeWidth="5" strokeLinecap="round"/>
      <path d="M80 121 L86 130 M93 124 L97 134 M107 124 L103 134 M120 121 L114 130" stroke="#3d1d18" strokeWidth="2.5" strokeLinecap="round"/>
      {/* eyes — angry, glowing */}
      <ellipse cx="78" cy="88" rx="12" ry="14" fill="url(#bb-pp-eye)" stroke="#3d1d18" strokeWidth="2.5"/>
      <ellipse cx="122" cy="88" rx="12" ry="14" fill="url(#bb-pp-eye)" stroke="#3d1d18" strokeWidth="2.5"/>
      <ellipse cx="78" cy="92" rx="5" ry="7" fill="#3d1d18"/>
      <ellipse cx="122" cy="92" rx="5" ry="7" fill="#3d1d18"/>
      {/* angry brows */}
      <path d="M62 72 L94 80" stroke="#3d1d18" strokeWidth="4" strokeLinecap="round"/>
      <path d="M138 72 L106 80" stroke="#3d1d18" strokeWidth="4" strokeLinecap="round"/>
    </svg>
  );
}

function MiniBoss({ kind, size = 56 }) {
  // Small portrait for boss-pick grid — same shape simplified
  const colors = {
    bio:   { body: '#c47165', dark: '#5a2b22', eye: '#f5e4c3' },
    chem:  { body: '#9b7eb8', dark: '#3a285a', eye: '#e3dbef' },
    phy:   { body: '#5278a3', dark: '#1f3a5a', eye: '#dde6f0' },
    math:  { body: '#6d5b8a', dark: '#2c2444', eye: '#e3dbef' },
  };
  const c = colors[kind] || colors.bio;
  return (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      {/* spikes */}
      {Array.from({ length: 12 }).map((_, i) => {
        const a = (i / 12) * Math.PI * 2;
        const x1 = 50 + Math.cos(a) * 28;
        const y1 = 50 + Math.sin(a) * 28;
        const x2 = 50 + Math.cos(a) * 44;
        const y2 = 50 + Math.sin(a) * 44;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={c.dark} strokeWidth="2.5" strokeLinecap="round"/>;
      })}
      <circle cx="50" cy="50" r="30" fill={c.body} stroke={c.dark} strokeWidth="2"/>
      <ellipse cx="40" cy="44" rx="5" ry="6" fill={c.eye}/>
      <ellipse cx="60" cy="44" rx="5" ry="6" fill={c.eye}/>
      <circle cx="40" cy="46" r="2" fill={c.dark}/>
      <circle cx="60" cy="46" r="2" fill={c.dark}/>
      <path d="M38 60 Q50 70 62 60" stroke={c.dark} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
    </svg>
  );
}

// ─── 1. Host Setup — pick boss ───────────────────────────────────
function BBHostSetup() {
  const bosses = [
    { id: 'pp', subj: 'bio',  name: 'Pathogen Prime',   sub: 'Module 7 · Infectious Disease', diff: 3, hp: '1 200', qs: 14, on: true  },
    { id: 'dc', subj: 'chem', name: 'The Decomposer',    sub: 'Module 6 · Acids & Bases',      diff: 4, hp: '1 600', qs: 16, on: false },
    { id: 'sg', subj: 'phy',  name: 'The Singularity',   sub: 'Module 4 · Gravity & Motion',   diff: 5, hp: '2 000', qs: 18, on: false },
    { id: 'vv', subj: 'math', name: 'Variable Voidwalker', sub: 'Module 2 · Functions',         diff: 2, hp: '900',   qs: 12, on: false },
  ];
  return (
    <SdScope theme="bio">
      <LaptopFrame url="hscscience.com.au/games/boss/new">
        <AppBar crumbs={['Multiplayer', 'New Boss battle']}/>

        <div className="bb-setup-hero">
          <div className="bb-setup-eyebrow">BOSS · CLASS VS. THE EXAMINER</div>
          <h1 className="bb-setup-title">Pick your boss.</h1>
          <p className="bb-setup-sub">A cooperative quiz battle. The whole class shares one HP bar. Correct answers do damage; misses give the boss a turn. Hit a 5-correct streak and your class can unleash an Ultimate.</p>
        </div>

        <div className="sd-setup-grid">
          <div className="sd-panel">
            <div className="sd-panel-h">
              <h3>Choose a boss</h3>
              <span className="sd-panel-h-meta">themed per subject</span>
            </div>

            <div className="bb-boss-pick">
              {bosses.map(b => (
                <div key={b.id} className={`bb-boss-card ${b.subj} ${b.on ? 'on' : ''}`}>
                  <div className="bb-boss-portrait">
                    <MiniBoss kind={b.subj} size={72}/>
                  </div>
                  <div className="bb-boss-tag-row">
                    <span className={`sd-lrow-tag ${b.subj}`}>{b.subj}</span>
                    <div className="bb-boss-difficulty">
                      {[1,2,3,4,5].map(i => <span key={i} className={i <= b.diff ? 'on' : ''}></span>)}
                    </div>
                  </div>
                  <div className="bb-boss-name">{b.name}</div>
                  <div className="bb-boss-sub">{b.sub}</div>
                  <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
                    <span style={{ fontSize: 10.5, color: 'var(--adv-muted)', fontWeight: 700 }}>HP <strong style={{ color: 'var(--adv-rose-deep)', fontFamily: 'var(--adv-mono)' }}>{b.hp}</strong></span>
                    <span style={{ fontSize: 10.5, color: 'var(--adv-muted)', fontWeight: 700 }}>· {b.qs} Qs</span>
                  </div>
                </div>
              ))}
            </div>

            <div className="sd-pool-summary" style={{ marginTop: 16 }}>
              <div className="sd-pool-num" style={{ color: 'var(--adv-rose-deep)' }}>14</div>
              <div className="sd-pool-label">
                <strong style={{ color: 'var(--adv-rose-deep)' }}>questions in the encounter.</strong><br/>
                Boss has <strong>3 phases</strong>; each phase unlocks at HP thresholds and changes the topic mix.<br/>
                <span style={{ color: 'var(--adv-muted)', fontSize: 11.5 }}>Phase 1: pathogen types · Phase 2: transmission · Phase 3: immune response.</span>
              </div>
            </div>
          </div>

          <div className="sd-panel">
            <div className="sd-panel-h">
              <h3>Battle rules</h3>
              <span className="sd-panel-h-meta">~14 min total</span>
            </div>

            <div className="sd-set-row">
              <div className="sd-set-label">
                Class HP
                <small>How forgiving the run is</small>
              </div>
              <div className="sd-radio-bar" style={{ width: 200 }}>
                <button>800</button>
                <button className="on">1000</button>
                <button>1400</button>
              </div>
            </div>

            <div className="sd-set-row">
              <div className="sd-set-label">
                Boss attack threshold
                <small>Misses needed before boss strikes</small>
              </div>
              <div className="sd-stepper">
                <button>−</button>
                <span className="v">3</span>
                <button>+</button>
              </div>
            </div>

            <div className="sd-set-row">
              <div className="sd-set-label">
                Ultimate streak required
                <small>Class-wide consecutive correct</small>
              </div>
              <div className="sd-stepper">
                <button>−</button>
                <span className="v">5</span>
                <button>+</button>
              </div>
            </div>

            <div className="sd-set-row">
              <div className="sd-set-label">
                Speed bonus damage
                <small>Faster answers do more damage</small>
              </div>
              <div className="sd-toggle on"></div>
            </div>

            <div className="sd-set-row">
              <div className="sd-set-label">
                Phase cutscenes
                <small>Mid-battle topic transitions</small>
              </div>
              <div className="sd-toggle on"></div>
            </div>

            <div className="sd-set-row">
              <div className="sd-set-label">
                Reward
                <small>If the class wins</small>
              </div>
              <div style={{
                background: 'var(--adv-gold-soft)', color: 'var(--adv-gold-deep)',
                padding: '6px 12px', borderRadius: 99,
                fontSize: 12, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 6,
              }}>
                <Icon name="trophy"/> Boss trophy + 10 coins each
              </div>
            </div>
          </div>
        </div>

        <div className="sd-setup-footer" style={{ background: 'linear-gradient(90deg, #1a1d2e, #4e4068)' }}>
          <div className="sd-setup-footer-left">
            <div className="sd-footer-stat"><small>BOSS</small><span>Pathogen Prime</span></div>
            <div className="sd-footer-stat"><small>HP</small><span>1 200 vs 1 000</span></div>
            <div className="sd-footer-stat"><small>PHASES</small><span>3</span></div>
            <div className="sd-footer-stat"><small>EST. RUNTIME</small><span>~14 minutes</span></div>
          </div>
          <button className="wc-cta wc-cta-gold" style={{ fontSize: 16 }}>
            Generate game code <Icon name="chevronR"/>
          </button>
        </div>
      </LaptopFrame>
    </SdScope>
  );
}

// ─── 2. Boss reveal cinematic ────────────────────────────────────
function BBBossReveal() {
  return (
    <SdScope theme="bio">
      <ProjectorFrame tag="ENCOUNTER · LOADING">
        <div className="bb-reveal">
          <div className="bb-reveal-eyebrow">A BOSS APPROACHES</div>
          <div className="bb-boss-illo"><PathogenPrime size={240}/></div>
          <div className="bb-reveal-name"><em>Pathogen Prime</em></div>
          <div className="bb-reveal-title">Module 7 · Infectious Disease</div>
          <div className="bb-reveal-stats">
            <div className="bb-reveal-stat"><strong>1 200</strong><small>BOSS HP</small></div>
            <div className="bb-reveal-stat"><strong>1 000</strong><small>YOUR HP</small></div>
            <div className="bb-reveal-stat"><strong>3</strong><small>PHASES</small></div>
            <div className="bb-reveal-stat"><strong>14</strong><small>QUESTIONS</small></div>
            <div className="bb-reveal-stat"><strong>22</strong><small>HEROES</small></div>
          </div>
          <div className="bb-reveal-foot">
            Beat all three phases and the class earns the <strong>Pathogen Prime trophy</strong>.
          </div>
        </div>
      </ProjectorFrame>
    </SdScope>
  );
}

// ─── 3. Live battle (projector) ──────────────────────────────────
function BBBattle() {
  return (
    <SdScope theme="bio">
      <ProjectorFrame tag="PHASE 2 · TRANSMISSION">
        <div className="bb-battle">
          {/* HP bars + phase */}
          <div className="bb-battle-top">
            <div className="bb-hp-block class">
              <div className="bb-hp-head">
                <span className="bb-hp-name">⚔ Class</span>
                <span className="bb-hp-counter">740 / 1 000</span>
              </div>
              <div className="bb-hp-bar"><div className="bb-hp-fill" style={{ width: '74%' }}></div></div>
            </div>

            <div className="bb-phase">
              <span className="bb-phase-label">PHASE</span>
              <span className="bb-phase-name">2 of 3 — Transmission</span>
              <div className="bb-phase-dots">
                <span className="on"></span>
                <span className="on"></span>
                <span></span>
              </div>
            </div>

            <div className="bb-hp-block boss">
              <div className="bb-hp-head">
                <span className="bb-hp-counter">540 / 1 200</span>
                <span className="bb-hp-name">Pathogen Prime ⚕</span>
              </div>
              <div className="bb-hp-bar"><div className="bb-hp-fill" style={{ width: '45%' }}></div></div>
            </div>
          </div>

          {/* Boss + Q */}
          <div className="bb-battle-body">
            <div className="bb-boss-stage">
              <div className="bb-boss-stage-illo"><PathogenPrime size={240}/></div>
              <div className="bb-attack-feed">
                <div className="bb-attack-row hit">
                  <CharGlyph kind="helix" size={22}/>
                  <strong>Maya K.</strong> · 1.8s
                  <span className="bb-attack-dmg">−84 HP</span>
                </div>
                <div className="bb-attack-row hit">
                  <CharGlyph kind="cell" size={22}/>
                  <strong>Priya S.</strong> · 2.4s
                  <span className="bb-attack-dmg">−72 HP</span>
                </div>
                <div className="bb-attack-row miss">
                  <CharGlyph kind="atom" size={22}/>
                  <strong>Ben L.</strong> · wrong
                  <span className="bb-attack-dmg">boss +0</span>
                </div>
                <div className="bb-attack-row hit">
                  <CharGlyph kind="beaker" size={22}/>
                  <strong>Jordan T.</strong> · 3.1s
                  <span className="bb-attack-dmg">−60 HP</span>
                </div>
              </div>
            </div>

            <div className="bb-q-side">
              <div className="bb-q-card">
                <span className="bb-q-topic">PHASE 2 · TRANSMISSION ROUTES</span>
                <div className="bb-q-text">
                  A virus that spreads via respiratory droplets in classrooms is best described as transmitted by which route?
                </div>
                <div className="bb-answers">
                  <div className="bb-answer a">
                    <div className="bb-answer-shape"><AnswerShape letter="A"/></div>
                    Vector-borne
                  </div>
                  <div className="bb-answer b">
                    <div className="bb-answer-shape"><AnswerShape letter="B"/></div>
                    Airborne
                  </div>
                  <div className="bb-answer c">
                    <div className="bb-answer-shape"><AnswerShape letter="C"/></div>
                    Direct contact
                  </div>
                  <div className="bb-answer d">
                    <div className="bb-answer-shape"><AnswerShape letter="D"/></div>
                    Foodborne
                  </div>
                </div>
              </div>

              <div className="bb-ultimate">
                <div className="bb-ult-icon"><Icon name="sparkles"/></div>
                <div className="bb-ult-content">
                  <div className="bb-ult-label">ULTIMATE · READY</div>
                  <div className="bb-ult-name">Antibody Storm</div>
                  <div className="bb-ult-desc">Class streak hit 5 — next correct answer deals <strong>3× damage</strong>.</div>
                </div>
                <div className="bb-ult-meter">
                  <svg viewBox="0 0 56 56">
                    <circle cx="28" cy="28" r="24" fill="none" stroke="rgba(0,0,0,0.3)" strokeWidth="4"/>
                    <circle cx="28" cy="28" r="24" fill="none" stroke="#fff" strokeWidth="4"
                      strokeLinecap="round" strokeDasharray="150 150"/>
                  </svg>
                  <div className="v">⚡</div>
                </div>
              </div>
            </div>
          </div>

          {/* Bottom: timer + roster */}
          <div className="bb-battle-bottom">
            <div className="bb-bb-timer">
              <div className="bb-bb-time-num">14</div>
              <div className="bb-bb-time-bar"><div style={{ width: '70%' }}></div></div>
            </div>
            <div className="bb-bb-roster">
              <span className="bb-bb-roster-label">CLASS LOCKED IN</span>
              {[
                { c: 'helix',  a: true },
                { c: 'cell',   a: true },
                { c: 'atom',   a: true },
                { c: 'beaker', a: true },
                { c: 'leaf',   a: true },
                { c: 'pi',     a: true },
                { c: 'wave',   a: false },
                { c: 'bolt',   a: true },
              ].map((s, i) => (
                <div key={i} className={`bb-bb-mini ${s.a ? 'answered' : ''}`}>
                  <CharGlyph kind={s.c} size={26}/>
                </div>
              ))}
              <div className="bb-bb-more">+ 14 / 22</div>
            </div>
            <div className="bb-bb-streak">
              <Icon name="flame"/> Streak 5 / 5
            </div>
          </div>
        </div>
      </ProjectorFrame>
    </SdScope>
  );
}

// ─── 4. Phase transition overlay ─────────────────────────────────
function BBPhaseTransition() {
  return (
    <SdScope theme="bio">
      <ProjectorFrame tag="PHASE 1 → 2 · ENRAGED">
        <div className="bb-battle" style={{ position: 'relative' }}>
          {/* Faded battle behind */}
          <div className="bb-battle-top" style={{ opacity: 0.4 }}>
            <div className="bb-hp-block class">
              <div className="bb-hp-head"><span className="bb-hp-name">⚔ Class</span><span className="bb-hp-counter">820 / 1 000</span></div>
              <div className="bb-hp-bar"><div className="bb-hp-fill" style={{ width: '82%' }}></div></div>
            </div>
            <div className="bb-phase">
              <span className="bb-phase-label">PHASE</span>
              <span className="bb-phase-name">1 → 2</span>
              <div className="bb-phase-dots"><span className="on"></span><span></span><span></span></div>
            </div>
            <div className="bb-hp-block boss">
              <div className="bb-hp-head"><span className="bb-hp-counter">810 / 1 200</span><span className="bb-hp-name">Pathogen Prime ⚕</span></div>
              <div className="bb-hp-bar"><div className="bb-hp-fill" style={{ width: '67%' }}></div></div>
            </div>
          </div>
          <div className="bb-battle-body" style={{ opacity: 0.25 }}>
            <div className="bb-boss-stage"><div className="bb-boss-stage-illo"><PathogenPrime size={200}/></div></div>
            <div></div>
          </div>

          {/* Overlay */}
          <div className="bb-phase-overlay">
            <div className="bb-phase-over-eyebrow">PHASE 2</div>
            <div className="bb-phase-over-title">Enraged.</div>
            <div className="bb-phase-over-sub">
              Pathogen Prime drops its membrane and shifts to a new strain. The class faces a new topic — <strong style={{ color: '#fff' }}>transmission routes</strong> — and the boss hits harder on misses.
            </div>
            <div className="bb-phase-over-pill">RESUMING IN 3…</div>
          </div>
        </div>
      </ProjectorFrame>
    </SdScope>
  );
}

// ─── 5. Student question (phone) ─────────────────────────────────
function BBStudentQuestion() {
  return (
    <SdScope theme="bio">
      <PhoneFrame time="9:46">
        <div className="bb-sq">
          <div className="bb-sq-head">
            <div className="bb-sq-head-row">
              <span><strong>BOSS · PATHOGEN PRIME</strong> · Phase 2 of 3</span>
              <span>Q 8/14</span>
            </div>
            <div className="bb-sq-hps">
              <div className="bb-sq-hp class">
                <div className="bb-sq-hp-name">⚔ CLASS<span>740/1000</span></div>
                <div className="bb-sq-hp-bar"><div className="bb-sq-hp-fill" style={{ width: '74%' }}></div></div>
              </div>
              <div className="bb-sq-hp boss">
                <div className="bb-sq-hp-name">BOSS<span>540/1200</span></div>
                <div className="bb-sq-hp-bar"><div className="bb-sq-hp-fill" style={{ width: '45%' }}></div></div>
              </div>
            </div>
          </div>

          <div className="bb-sq-mid">
            <div className="bb-sq-q">
              <div className="bb-sq-q-eyebrow">TRANSMISSION · MCQ</div>
              <div className="bb-sq-q-text">
                A virus that spreads via respiratory droplets in classrooms is best described as transmitted by which route?
              </div>
            </div>

            <div className="sd-sq-answers">
              <div className="sd-sq-answer a">
                <div className="sd-sq-answer-shape"><AnswerShape letter="A"/></div>
                <div className="sd-sq-answer-letter">A</div>
              </div>
              <div className="sd-sq-answer b locked">
                <div className="sd-sq-answer-shape"><AnswerShape letter="B"/></div>
                <div className="sd-sq-answer-letter">B</div>
              </div>
              <div className="sd-sq-answer c">
                <div className="sd-sq-answer-shape"><AnswerShape letter="C"/></div>
                <div className="sd-sq-answer-letter">C</div>
              </div>
              <div className="sd-sq-answer d">
                <div className="sd-sq-answer-shape"><AnswerShape letter="D"/></div>
                <div className="sd-sq-answer-letter">D</div>
              </div>
            </div>
          </div>

          <div className="bb-sq-foot">
            <div className="sd-sq-timer" style={{ padding: '4px 0' }}>
              <div className="sd-sq-time-num">14<small>SEC</small></div>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 6,
                background: 'var(--adv-gold-soft)', color: 'var(--adv-gold-deep)',
                padding: '6px 10px', borderRadius: 99,
                fontSize: 11, fontWeight: 800, letterSpacing: '0.06em', textTransform: 'uppercase',
              }}>
                <Icon name="sparkles"/> Ultimate ready
              </div>
            </div>
            <div className="bb-sq-dmg">
              <span className="bb-sq-dmg-label">YOUR DAMAGE IF CORRECT</span>
              <div className="bb-sq-dmg-val">~84<small>HP</small></div>
            </div>
            <div style={{ marginTop: 10, padding: '10px 12px', background: 'var(--adv-bg-deeper)', borderRadius: 10, fontSize: 11.5, color: 'var(--adv-ink-soft)', textAlign: 'center' }}>
              Locked in <strong style={{ color: 'var(--adv-ink)' }}>B · Airborne</strong> — wait for the class to finish.
            </div>
          </div>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

// ─── 6. Victory screen ───────────────────────────────────────────
function BBVictory() {
  return (
    <SdScope theme="bio">
      <ProjectorFrame tag="VICTORY">
        <div className="bb-victory">
          <div className="bb-victory-head">
            <div className="bb-victory-eyebrow">PATHOGEN PRIME · DEFEATED</div>
            <div className="bb-victory-title"><em>Boss down.</em></div>
            <div className="bb-victory-sub">22 students · 14 questions · 11m 04s</div>
          </div>

          <div className="bb-victory-stats">
            <div className="bb-vstat">
              <div className="bb-vstat-label">CLASS ACCURACY</div>
              <div className="bb-vstat-val">82%</div>
              <div className="bb-vstat-sub">Above your usual quiz average (74%).</div>
            </div>
            <div className="bb-vstat">
              <div className="bb-vstat-label">ULTIMATES UNLEASHED</div>
              <div className="bb-vstat-val">3</div>
              <div className="bb-vstat-sub">Each one cut Pathogen Prime by ~250 HP.</div>
            </div>
            <div className="bb-vstat">
              <div className="bb-vstat-label">MVP DAMAGE DEALER</div>
              <div className="bb-vstat-val">Maya K.</div>
              <div className="bb-vstat-sub">Dealt <strong style={{ color: '#fff' }}>286 HP</strong> across 11 hits.</div>
            </div>
            <div className="bb-vstat">
              <div className="bb-vstat-label">HARDEST PHASE</div>
              <div className="bb-vstat-val">Phase 3</div>
              <div className="bb-vstat-sub">Immune response — 64% class accuracy. Saved for revision.</div>
            </div>
          </div>

          <div className="bb-loot">
            <div className="bb-loot-icon"><Icon name="trophy"/></div>
            <div className="bb-loot-content">
              <div className="bb-loot-eyebrow">SHARED LOOT · EVERYONE EARNS</div>
              <div className="bb-loot-name">Pathogen Prime Trophy</div>
              <div className="bb-loot-desc">A trophy for your locker shelf, plus <strong style={{ color: '#fff' }}>10 coins each</strong> (capped). Phase 3 weak spots are now queued for personal revision.</div>
            </div>
            <div className="bb-loot-actions">
              <button className="wc-cta wc-cta-gold" style={{ fontSize: 13 }}>Claim loot <Icon name="chevronR"/></button>
              <button className="wc-cta wc-cta-soft" style={{ fontSize: 13, color: '#fff', background: 'rgba(255,255,255,0.1)', borderColor: 'rgba(255,255,255,0.2)', boxShadow: 'none' }}>
                Fight harder boss?
              </button>
            </div>
          </div>
        </div>
      </ProjectorFrame>
    </SdScope>
  );
}

// ─── Flow overview ─────────────────────────────────────────────────
function BBOverview() {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: '#faf3e5',
      padding: 32,
      display: 'flex', flexDirection: 'column', gap: 18,
      fontFamily: 'DM Sans, system-ui, sans-serif',
      color: '#2d3142',
    }}>
      <div>
        <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '1.8px', color: '#8a3f33', textTransform: 'uppercase', marginBottom: 4 }}>
          HSCSCIENCE · MULTIPLAYER · GAME TYPE 2
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em' }}>Boss</div>
          <div style={{ fontSize: 14, color: '#5b5d75', fontWeight: 500 }}>— the class teams up to fight a themed boss.</div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 14 }}>
        <div style={{ background: 'linear-gradient(140deg, #2c2444, #8a3f33)', borderRadius: 14, padding: 22, color: '#fff' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 11, fontWeight: 800, letterSpacing: '1.6px', color: '#d6a85f', textTransform: 'uppercase', marginBottom: 4 }}>THE PITCH</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 22, fontWeight: 800, lineHeight: 1.15, marginBottom: 10 }}>
            One enemy. One shared HP bar. No leaderboard.
          </div>
          <div style={{ fontSize: 13.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.78)' }}>
            Where Showdown is solo competition, Boss is pure cooperation. Bad-at-quiz kids aren't visible — they just contribute what they can to the shared damage pool. The class wins or loses together. Best for end-of-topic revision.
          </div>
        </div>
        <div style={{ background: '#fff', borderRadius: 14, padding: 18, border: '1.5px solid #e8d4ba' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 10, fontWeight: 800, letterSpacing: '1.4px', color: '#8a8aa3', textTransform: 'uppercase', marginBottom: 6 }}>NOVEL · 1</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4 }}>Shared HP — no winners or losers</div>
          <div style={{ fontSize: 12.5, color: '#5b5d75', lineHeight: 1.5 }}>
            Class HP vs. boss HP. Wrong answers stack up to a boss attack. Speed bonus on damage means fast confident answers carry the team.
          </div>
        </div>
        <div style={{ background: '#fff', borderRadius: 14, padding: 18, border: '1.5px solid #e8d4ba' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 10, fontWeight: 800, letterSpacing: '1.4px', color: '#8a8aa3', textTransform: 'uppercase', marginBottom: 6 }}>NOVEL · 2</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4 }}>Phases shift the topic</div>
          <div style={{ fontSize: 12.5, color: '#5b5d75', lineHeight: 1.5 }}>
            Boss has 3 phases. Each phase enrages the boss and switches to a sub-topic — pathogen types → transmission → immune response. Topic narrative built in.
          </div>
        </div>
        <div style={{ background: '#fff', borderRadius: 14, padding: 18, border: '1.5px solid #e8d4ba' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 10, fontWeight: 800, letterSpacing: '1.4px', color: '#8a8aa3', textTransform: 'uppercase', marginBottom: 6 }}>NOVEL · 3</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4 }}>Class Ultimate on streaks</div>
          <div style={{ fontSize: 12.5, color: '#5b5d75', lineHeight: 1.5 }}>
            A 5-correct streak across the class unlocks a once-per-phase "Ultimate" — next answer does 3× damage. Encourages cheering each other on.
          </div>
        </div>
      </div>

      <div style={{
        background: '#fff', border: '1.5px solid #e8d4ba', borderRadius: 14,
        padding: '14px 18px', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8,
      }}>
        {['Pick boss', 'Boss reveal', 'Live battle', 'Phase shift', 'Phone view', 'Victory'].map((label, i) => (
          <div key={i} style={{
            background: '#f4d8de', borderRadius: 10, padding: '10px 12px',
            display: 'flex', flexDirection: 'column', gap: 4,
          }}>
            <div style={{
              width: 22, height: 22, borderRadius: 6, background: '#8a3f33', color: '#fff',
              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 }}>{label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── App ─────────────────────────────────────────────────────────
function App() {
  return (
    <div className="wc-scope" style={{ background: '#f0eee9', padding: '32px', minHeight: '100vh', overflowY: 'auto' }}>
      <BBOverview/>
      <BBHostSetup/>
      <BBBossReveal/>
      <BBBattle/>
      <BBStudentQuestion/>
      <BBPhaseTransition/>
      <BBVictory/>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);