// scenes-4-5.jsx — Live hand example & Range bar
// ═════════════════════════════════════════════════════════════════════════════
// SCENE 4 — LIVE HAND (62 → 102s) — A real hand played out, SPR updating
// ═════════════════════════════════════════════════════════════════════════════
function Scene4_LiveHand() {
  return (
    <Sprite start={62} end={102}>
      {({ localTime }) => {
        const t = localTime;

        // Phase 0: title in (0 → 1.5)
        const titleOp = clamp(t / 0.6, 0, 1) * clamp((39 - t) / 0.8, 0, 1);

        // Action timeline:
        // t=2: blinds posted
        // t=4: CO opens 2.5€ (chip slides)
        // t=6.5: BTN calls 2.5€
        // t=8.5: flop dealt (3 cards)
        // t=11: SPR badge appears = 15
        // t=14: CO bets 4€ (continuation)
        // t=16: BTN calls
        // t=18.5: turn dealt
        // t=21: SPR updates = 6
        // t=24: CO bets 9€
        // t=26: BTN calls
        // t=28.5: river dealt
        // t=30: SPR updates = 2
        // t=33: emphasis on commitment
        // t=37: outro

        const phaseFlop = t > 8.5;
        const phaseTurn = t > 18.5;
        const phaseRiver = t > 28.5;

        // Hero cards always
        const heroCardsOp = clamp((t - 0.6) / 0.6, 0, 1);

        // Board cards
        const flopT = clamp((t - 8.5) / 0.8, 0, 1);
        const turnT = clamp((t - 18.5) / 0.6, 0, 1);
        const riverT = clamp((t - 28.5) / 0.6, 0, 1);

        // Stack values (heroes' effective stacks)
        // Pre flop both 100. After preflop: 97.5. After flop bet+call: 93.5. After turn bet+call: 84.5.
        // Pots: Preflop 6.5 → after flop 14.5 → after turn 32.5
        const sprValues = [
          { time: 11, value: 15.0, label: 'Flop' },
          { time: 21, value: 6.4, label: 'Turn' },
          { time: 30, value: 2.6, label: 'River' },
        ];

        // Action log entries
        const actions = [
          { time: 2, text: 'Blinds publicadas', color: 'rgba(243,241,234,0.5)' },
          { time: 4, text: 'CO abre a 2.5€', color: '#f3f1ea' },
          { time: 6.5, text: 'BTN paga (tú)', color: '#d4a24a' },
          { time: 9, text: 'Flop · A♠ 8♥ 3♣ — Bote 6.5€', color: '#4fd1c5' },
          { time: 14, text: 'CO apuesta 4€', color: '#f3f1ea' },
          { time: 16, text: 'BTN paga · Bote 14.5€', color: '#d4a24a' },
          { time: 19, text: 'Turn · 6♦ — Bote 14.5€', color: '#4fd1c5' },
          { time: 24, text: 'CO apuesta 9€', color: '#f3f1ea' },
          { time: 26, text: 'BTN paga · Bote 32.5€', color: '#d4a24a' },
          { time: 29, text: 'River · 2♠ — Bote 32.5€', color: '#4fd1c5' },
        ];

        // Current SPR (latest one whose time has passed)
        const currentSPR = sprValues.filter(s => t >= s.time).slice(-1)[0];
        const sprBadgeOp = currentSPR ? clamp((t - currentSPR.time) / 0.6, 0, 1) : 0;

        // SPR pulse on update
        let pulseScale = 1;
        if (currentSPR) {
          const dt = t - currentSPR.time;
          if (dt < 0.6) pulseScale = 1 + 0.15 * (1 - dt / 0.6);
        }

        const exitOp = clamp((40 - t) / 1.2, 0, 1);

        return (
          <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
            {/* Header */}
            <div style={{
              position: 'absolute',
              top: 130, left: 0, right: 0,
              textAlign: 'center',
              opacity: titleOp,
            }}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 12,
                letterSpacing: '0.32em',
                textTransform: 'uppercase',
                color: 'rgba(212,162,74,0.8)',
                marginBottom: 12,
              }}>03 · La mano vive</div>
              <div style={{
                fontFamily: 'Inter, system-ui, sans-serif',
                fontSize: 44,
                fontWeight: 500,
                letterSpacing: '-0.02em',
                color: '#f3f1ea',
              }}>Cómo cambia el SPR calle a calle</div>
            </div>

            {/* Felt table */}
            <div style={{
              position: 'absolute',
              top: 280, left: 280,
              width: 880, height: 440,
              background: 'radial-gradient(ellipse at center, #163e34 0%, #0e2a23 70%, #082019 100%)',
              borderRadius: 220,
              border: '6px solid #1a4a3a',
              boxShadow: 'inset 0 0 60px rgba(0,0,0,0.6), 0 20px 60px rgba(0,0,0,0.5)',
            }}>
              {/* inner felt edge */}
              <div style={{
                position: 'absolute', inset: 16,
                borderRadius: 200,
                border: '1px solid rgba(212,162,74,0.18)',
              }}/>
            </div>

            {/* Board cards */}
            <div style={{ position: 'absolute', top: 470, left: 600 }}>
              {/* Flop */}
              {phaseFlop && [
                { rank: 'A', suit: 's' },
                { rank: '8', suit: 'h' },
                { rank: '3', suit: 'c' },
              ].map((c, i) => {
                const cardT = clamp((t - 8.5 - i * 0.18) / 0.5, 0, 1);
                return (
                  <PlayingCard key={'f'+i}
                    rank={c.rank} suit={c.suit}
                    width={70}
                    x={i * 80}
                    y={(1 - Easing.easeOutCubic(cardT)) * -30}
                    opacity={cardT}
                    scale={0.85 + 0.15 * Easing.easeOutCubic(cardT)}
                  />
                );
              })}
              {phaseTurn && (() => {
                const cardT = clamp((t - 18.5) / 0.5, 0, 1);
                return (
                  <PlayingCard rank="6" suit="d" width={70}
                    x={3 * 80}
                    y={(1 - Easing.easeOutCubic(cardT)) * -30}
                    opacity={cardT}
                    scale={0.85 + 0.15 * Easing.easeOutCubic(cardT)}
                  />
                );
              })()}
              {phaseRiver && (() => {
                const cardT = clamp((t - 28.5) / 0.5, 0, 1);
                return (
                  <PlayingCard rank="2" suit="s" width={70}
                    x={4 * 80}
                    y={(1 - Easing.easeOutCubic(cardT)) * -30}
                    opacity={cardT}
                    scale={0.85 + 0.15 * Easing.easeOutCubic(cardT)}
                  />
                );
              })()}
            </div>

            {/* Pot in middle */}
            {(() => {
              let potValue = 0;
              if (t > 6.5) potValue = 6.5;
              if (t > 16) potValue = 14.5;
              if (t > 26) potValue = 32.5;
              const chipsCount = Math.min(35, Math.round(potValue / 1.2));
              return (
                <div style={{
                  position: 'absolute',
                  top: 620, left: 720,
                  opacity: clamp((t - 2) / 0.5, 0, 1),
                }}>
                  <ChipPile count={chipsCount} x={0} y={0} radius={45} color="#d4a24a" edge="#8a6520" label={`Bote · ${potValue.toFixed(1)}€`}/>
                </div>
              );
            })()}

            {/* Hero (BTN) cards bottom-center */}
            <div style={{
              position: 'absolute',
              top: 740, left: 700,
              opacity: heroCardsOp,
            }}>
              <PlayingCard rank="A" suit="d" width={88} x={0} y={0} rotate={-6}/>
              <PlayingCard rank="K" suit="s" width={88} x={62} y={0} rotate={6}/>
              <div style={{
                position: 'absolute',
                top: 130, left: 30,
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 12,
                letterSpacing: '0.18em',
                color: '#d4a24a',
                textTransform: 'uppercase',
              }}>BTN · Tú · AKo</div>
            </div>

            {/* Position labels */}
            <div style={{
              position: 'absolute', top: 320, left: 600,
              fontFamily: 'JetBrains Mono, monospace',
              fontSize: 12,
              color: 'rgba(243,241,234,0.5)',
              letterSpacing: '0.2em',
              textTransform: 'uppercase',
              opacity: clamp((t - 0.4) / 0.5, 0, 1),
            }}>
              CO · Villano
            </div>

            {/* Action log right rail */}
            <div style={{
              position: 'absolute',
              top: 280, right: 80,
              width: 380,
              padding: '24px 24px',
              background: 'rgba(13,15,23,0.78)',
              border: '1px solid rgba(255,255,255,0.08)',
              borderRadius: 12,
              backdropFilter: 'blur(8px)',
            }}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 11,
                letterSpacing: '0.18em',
                color: 'rgba(212,162,74,0.85)',
                textTransform: 'uppercase',
                marginBottom: 16,
              }}>Hand history · live</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {actions.map((a, i) => {
                  const op = clamp((t - a.time) / 0.4, 0, 1);
                  return (
                    <div key={i} style={{
                      opacity: op,
                      transform: `translateY(${(1 - op) * 8}px)`,
                      fontFamily: 'JetBrains Mono, monospace',
                      fontSize: 13,
                      color: a.color,
                      letterSpacing: '0.01em',
                      transition: 'opacity 200ms',
                    }}>
                      <span style={{ color: 'rgba(243,241,234,0.3)', marginRight: 8 }}>›</span>
                      {a.text}
                    </div>
                  );
                })}
              </div>
            </div>

            {/* SPR badge - left rail */}
            {currentSPR && (
              <div style={{
                position: 'absolute',
                top: 280, left: 80,
                width: 280,
                padding: '32px 28px',
                background: 'rgba(13,15,23,0.78)',
                border: '1px solid rgba(212,162,74,0.4)',
                borderRadius: 12,
                opacity: sprBadgeOp,
                transform: `scale(${pulseScale})`,
                transformOrigin: '50% 50%',
                boxShadow: '0 0 0 1px rgba(212,162,74,0.15), 0 12px 40px rgba(212,162,74,0.15)',
                transition: 'transform 200ms',
              }}>
                <div style={{
                  fontFamily: 'JetBrains Mono, monospace',
                  fontSize: 11,
                  letterSpacing: '0.2em',
                  color: 'rgba(212,162,74,0.85)',
                  textTransform: 'uppercase',
                }}>SPR en {currentSPR.label}</div>
                <div style={{
                  fontFamily: 'Inter, system-ui, sans-serif',
                  fontSize: 100,
                  fontWeight: 700,
                  letterSpacing: '-0.04em',
                  color: currentSPR.value > 13 ? '#e0556a' : currentSPR.value > 4 ? '#e8b95c' : '#4fd1c5',
                  fontVariantNumeric: 'tabular-nums',
                  lineHeight: 1,
                  marginTop: 12,
                }}>{currentSPR.value.toFixed(1)}</div>
                <div style={{
                  fontSize: 14,
                  color: 'rgba(243,241,234,0.55)',
                  marginTop: 12,
                  lineHeight: 1.4,
                }}>
                  {currentSPR.value > 13 && 'Profundo · necesitas manos nutrias para todo el stack'}
                  {currentSPR.value > 4 && currentSPR.value <= 13 && 'Medio · TPTK = tres calles de valor'}
                  {currentSPR.value <= 4 && 'Bajo · top pair vale para todo el stack'}
                </div>

                {/* SPR history mini-chart */}
                <div style={{
                  marginTop: 20,
                  paddingTop: 16,
                  borderTop: '1px solid rgba(255,255,255,0.06)',
                  display: 'flex', justifyContent: 'space-between',
                }}>
                  {sprValues.map((s, i) => {
                    const passed = t >= s.time;
                    const isCurrent = currentSPR && currentSPR.label === s.label;
                    return (
                      <div key={i} style={{ textAlign: 'center', opacity: passed ? 1 : 0.25 }}>
                        <div style={{
                          fontFamily: 'JetBrains Mono, monospace',
                          fontSize: 10,
                          letterSpacing: '0.16em',
                          color: 'rgba(243,241,234,0.5)',
                          textTransform: 'uppercase',
                        }}>{s.label}</div>
                        <div style={{
                          fontFamily: 'JetBrains Mono, monospace',
                          fontSize: 18,
                          fontWeight: 600,
                          color: isCurrent ? '#d4a24a' : passed ? '#f3f1ea' : 'rgba(243,241,234,0.3)',
                          marginTop: 4,
                          fontVariantNumeric: 'tabular-nums',
                        }}>{passed ? s.value.toFixed(1) : '—'}</div>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}

            {/* Final emphasis */}
            {t > 33 && t < 38 && (() => {
              const op = clamp((t - 33) / 0.6, 0, 1) * clamp((38 - t) / 0.6, 0, 1);
              return (
                <div style={{
                  position: 'absolute',
                  top: 880, left: 0, right: 0,
                  textAlign: 'center',
                  opacity: op,
                  fontFamily: 'Inter, system-ui, sans-serif',
                  fontSize: 26,
                  fontWeight: 400,
                  color: 'rgba(243,241,234,0.85)',
                  letterSpacing: '-0.005em',
                }}>
                  Cada calle <span style={{color:'#d4a24a',fontStyle:'italic'}}>baja</span> el SPR. El compromiso del stack se acerca.
                </div>
              );
            })()}
          </div>
        );
      }}
    </Sprite>
  );
}

// ═════════════════════════════════════════════════════════════════════════════
// SCENE 5 — RANGE BAR (102 → 152s) — Low/Mid/High SPR with hand requirements
// ═════════════════════════════════════════════════════════════════════════════
function Scene5_RangeBar() {
  return (
    <Sprite start={102} end={152}>
      {({ localTime }) => {
        const t = localTime;

        const titleOp = clamp(t / 0.6, 0, 1) * clamp((49 - t) / 1, 0, 1);

        // Bar appears 0 → 2s
        const barT = clamp(t / 1.5, 0, 1);

        // Three zones reveal in sequence with detailed cards
        // Low (4 → 16s)
        // Mid (16 → 28s)
        // High (28 → 42s)
        // Comparison/summary (42 → 50s)

        // Each panel: fades in at its start, fades OUT before the next one fades in
        // so they never stack on top of each other.
        const lowT  = clamp((t - 4)  / 0.6, 0, 1) * clamp((16  - t) / 0.6, 0, 1);
        const midT  = clamp((t - 16) / 0.6, 0, 1) * clamp((28  - t) / 0.6, 0, 1);
        const highT = clamp((t - 28) / 0.6, 0, 1) * clamp((49  - t) / 0.6, 0, 1);

        // Marker on bar
        let markerSPR = 0;
        if (t >= 4 && t < 16) markerSPR = 2;
        else if (t >= 16 && t < 28) markerSPR = 8;
        else if (t >= 28) markerSPR = 18;

        // Bar log scale: 0 → 25 mapped 0 → 1240px
        const sprToX = (spr) => {
          // log scale, clamp 0..25 to 0..1
          const c = clamp(spr / 25, 0, 1);
          return 280 + c * 1360;
        };

        const exitOp = clamp((50 - t) / 1.2, 0, 1);

        return (
          <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
            {/* Header */}
            <div style={{
              position: 'absolute',
              top: 130, left: 0, right: 0,
              textAlign: 'center',
              opacity: titleOp,
            }}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 12,
                letterSpacing: '0.32em',
                textTransform: 'uppercase',
                color: 'rgba(212,162,74,0.8)',
                marginBottom: 12,
              }}>04 · Rangos de SPR</div>
              <div style={{
                fontFamily: 'Inter, system-ui, sans-serif',
                fontSize: 44,
                fontWeight: 500,
                letterSpacing: '-0.02em',
                color: '#f3f1ea',
              }}>¿Qué mano vale lo suficiente para el stack?</div>
            </div>

            {/* Spectrum bar */}
            <div style={{
              position: 'absolute',
              top: 320, left: 0, right: 0, height: 80,
              opacity: barT,
            }}>
              <div style={{
                position: 'absolute',
                left: 280, right: 280, top: 30,
                height: 16,
                borderRadius: 8,
                background: 'linear-gradient(90deg, #4fd1c5 0%, #4fd1c5 16%, #e8b95c 16%, #e8b95c 52%, #e0556a 52%, #e0556a 100%)',
                boxShadow: '0 8px 24px rgba(0,0,0,0.4)',
              }}/>
              {/* Tick marks */}
              {[0, 4, 13, 25].map((v, i) => (
                <div key={i} style={{
                  position: 'absolute',
                  left: sprToX(v),
                  top: 22,
                  transform: 'translateX(-50%)',
                  textAlign: 'center',
                }}>
                  <div style={{
                    width: 1, height: 30,
                    background: 'rgba(255,255,255,0.3)',
                    margin: '0 auto',
                  }}/>
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace',
                    fontSize: 13,
                    color: 'rgba(243,241,234,0.6)',
                    marginTop: 6,
                    fontVariantNumeric: 'tabular-nums',
                  }}>{v === 25 ? '25+' : v}</div>
                </div>
              ))}
              {/* Zone labels */}
              {[
                { x: (sprToX(0) + sprToX(4)) / 2, label: 'BAJO', sub: '< 4', color: '#4fd1c5' },
                { x: (sprToX(4) + sprToX(13)) / 2, label: 'MEDIO', sub: '4 — 13', color: '#e8b95c' },
                { x: (sprToX(13) + sprToX(25)) / 2, label: 'ALTO', sub: '> 13', color: '#e0556a' },
              ].map((z, i) => (
                <div key={i} style={{
                  position: 'absolute',
                  left: z.x, top: -6,
                  transform: 'translateX(-50%)',
                  textAlign: 'center',
                }}>
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace',
                    fontSize: 12,
                    letterSpacing: '0.24em',
                    color: z.color,
                    fontWeight: 600,
                  }}>{z.label}</div>
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace',
                    fontSize: 13,
                    color: 'rgba(243,241,234,0.5)',
                    marginTop: 2,
                    fontVariantNumeric: 'tabular-nums',
                  }}>SPR {z.sub}</div>
                </div>
              ))}

              {/* Current marker */}
              {markerSPR > 0 && (
                <div style={{
                  position: 'absolute',
                  left: sprToX(markerSPR),
                  top: 18,
                  transform: 'translateX(-50%)',
                  width: 4, height: 40,
                  background: '#f3f1ea',
                  boxShadow: '0 0 12px rgba(255,255,255,0.6)',
                  transition: 'left 600ms cubic-bezier(0.65, 0, 0.35, 1)',
                  borderRadius: 2,
                }}/>
              )}
            </div>

            {/* Detail panels - one shown at a time */}
            {lowT > 0 && (
              <ZonePanel opacity={lowT} accent="#4fd1c5" zoneNum="01" zoneTitle="SPR bajo · < 4"
                lead="Top pair = todo el stack"
                desc="Solo hay dos botes en juego. Con TPTK en el flop y un raise del rival, hacer call es prácticamente automático."
                example={{ board: ['A','7','2'], boardSuits: ['s','d','c'], hero: ['A','J'], heroSuits: ['s','c'], pot: '40€', stack: '60€', spr: '1.5', verdict: 'All-in correcto · top pair top kicker' }}
                showAt={4} t={t}
              />
            )}
            {midT > 0 && (
              <ZonePanel opacity={midT} accent="#e8b95c" zoneNum="02" zoneTitle="SPR medio · 4 — 13"
                lead="Cash 100BB estándar"
                desc="TPTK es una mano de tres calles de valor — pero no necesariamente para empujar el stack en el flop. Un raise del rival merece pausa."
                example={{ board: ['A','7','2'], boardSuits: ['s','d','c'], hero: ['A','J'], heroSuits: ['s','c'], pot: '14€', stack: '90€', spr: '6.4', verdict: 'Bet/call sí · all-in todavía no' }}
                showAt={16} t={t}
              />
            )}
            {highT > 0 && (
              <ZonePanel opacity={highT} accent="#e0556a" zoneNum="03" zoneTitle="SPR alto · > 13"
                lead="Stacks profundos, manos nutrias"
                desc="Para comprometer todo el stack necesitas sets, colores o escaleras. Un par alto es peligroso de sobre-comprometer; los botes implícitos de los draws son enormes."
                example={{ board: ['A','7','2'], boardSuits: ['s','d','c'], hero: ['7','7'], heroSuits: ['s','d'], pot: '8€', stack: '200€', spr: '25', verdict: 'Set · estás encantado de meter el stack' }}
                showAt={28} t={t}
              />
            )}
          </div>
        );
      }}
    </Sprite>
  );
}

// Sub-component: detail panel for a single SPR zone
function ZonePanel({ opacity, accent, zoneNum, zoneTitle, lead, desc, example, showAt, t }) {
  return (
    <div style={{
      position: 'absolute',
      top: 480, left: 200, right: 200,
      opacity,
      display: 'grid',
      gridTemplateColumns: '1fr 580px',
      gap: 60,
      alignItems: 'flex-start',
    }}>
      {/* Left: text */}
      <div>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 12,
          letterSpacing: '0.2em',
          textTransform: 'uppercase',
          color: accent,
          marginBottom: 16,
        }}>{zoneNum} · {zoneTitle}</div>
        <div style={{
          fontFamily: 'Inter, system-ui, sans-serif',
          fontSize: 56,
          fontWeight: 600,
          letterSpacing: '-0.03em',
          color: '#f3f1ea',
          lineHeight: 1.05,
          marginBottom: 24,
          textWrap: 'balance',
        }}>{lead}</div>
        <div style={{
          fontFamily: 'Inter, system-ui, sans-serif',
          fontSize: 22,
          color: 'rgba(243,241,234,0.65)',
          lineHeight: 1.45,
          maxWidth: 600,
          textWrap: 'pretty',
        }}>{desc}</div>
      </div>

      {/* Right: example card */}
      <div style={{
        background: 'rgba(13,15,23,0.7)',
        border: `1px solid ${accent}40`,
        borderRadius: 14,
        padding: '32px 32px',
        boxShadow: `0 0 0 1px ${accent}1a, 0 24px 60px rgba(0,0,0,0.4)`,
      }}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 11,
          letterSpacing: '0.18em',
          color: 'rgba(212,162,74,0.8)',
          textTransform: 'uppercase',
          marginBottom: 20,
        }}>Ejemplo en mesa</div>

        {/* Board */}
        <div style={{
          display: 'flex', gap: 10, justifyContent: 'center',
          padding: '20px 0',
          background: 'radial-gradient(ellipse at center, rgba(22,62,52,0.6) 0%, rgba(8,32,25,0.2) 70%, transparent 100%)',
          borderRadius: 12,
          marginBottom: 24,
        }}>
          {example.board.map((r, i) => (
            <div key={i} style={{ position: 'relative', width: 56, height: 80 }}>
              <PlayingCard rank={r} suit={example.boardSuits[i]} width={56} x={28} y={40}/>
            </div>
          ))}
        </div>

        {/* Hero hand */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 16,
          marginBottom: 20,
        }}>
          <div style={{ position: 'relative', width: 100, height: 80 }}>
            <PlayingCard rank={example.hero[0]} suit={example.heroSuits[0]} width={50} x={28} y={40} rotate={-6}/>
            <PlayingCard rank={example.hero[1]} suit={example.heroSuits[1]} width={50} x={66} y={40} rotate={6}/>
          </div>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace',
            fontSize: 14,
            color: 'rgba(243,241,234,0.7)',
            letterSpacing: '0.04em',
          }}>Tu mano</div>
        </div>

        {/* Stats grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 16,
          paddingTop: 20,
          borderTop: '1px solid rgba(255,255,255,0.06)',
        }}>
          {[
            { label: 'Bote', val: example.pot },
            { label: 'Stack', val: example.stack },
            { label: 'SPR', val: example.spr, color: accent },
          ].map((s, i) => (
            <div key={i}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 10,
                letterSpacing: '0.18em',
                color: 'rgba(243,241,234,0.4)',
                textTransform: 'uppercase',
                marginBottom: 6,
              }}>{s.label}</div>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 28,
                fontWeight: 600,
                color: s.color || '#f3f1ea',
                fontVariantNumeric: 'tabular-nums',
                letterSpacing: '-0.02em',
              }}>{s.val}</div>
            </div>
          ))}
        </div>

        {/* Verdict */}
        <div style={{
          marginTop: 20,
          padding: '14px 16px',
          background: `${accent}14`,
          border: `1px solid ${accent}40`,
          borderRadius: 8,
          color: accent,
          fontFamily: 'Inter, system-ui, sans-serif',
          fontSize: 15,
          fontWeight: 500,
          letterSpacing: '-0.005em',
        }}>
          → {example.verdict}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Scene4_LiveHand, Scene5_RangeBar });