// ===== 演出 components =====
function rnd(a, b) { return a + Math.random() * (b - a); }

// A：立ちのぼる光（frame内に置く）
function FxA({ reduced }) {
  const parts = React.useMemo(() => Array.from({ length: 26 }, () => ({
    left: rnd(2, 98) + '%', s: rnd(3, 7) + 'px', x: rnd(-30, 30) + 'px', y: -rnd(120, 360) + 'px', d: rnd(.7, 1.15) + 's', dl: rnd(0, .35) + 's',
  })), []);
  if (reduced) return <div className="fxR" />;
  return (
    <div className="fx-layer">
      <div className="fxA-rise" />
      <div className="fxA-edge" />
      {parts.map((p, i) => <i key={i} className="fxA-p" style={{ left: p.left, '--s': p.s, '--x': p.x, '--y': p.y, '--d': p.d, '--dl': p.dl }} />)}
    </div>
  );
}

// B：光の輪（押した場所 x,y は frame基準px）
function FxB({ x, y, reduced }) {
  if (reduced) return <div className="fxR" />;
  return (
    <div className="fx-layer">
      <div className="fxB-flash" />
      <div className="fxB-ring" style={{ left: x, top: y }} />
      <div className="fxB-ring r2" style={{ left: x, top: y }} />
    </div>
  );
}

// C / C+：覚醒（画面全体）
function FxC({ aura, aura2, plus, reduced, title, onSkip }) {
  const T = plus ? 4 : 2.5;
  const parts = React.useMemo(() => Array.from({ length: plus ? 60 : 36 }, () => {
    const a = Math.random() * Math.PI * 2, r = rnd(180, plus ? 620 : 460);
    return { x: Math.cos(a) * r + 'px', y: Math.sin(a) * r + 'px', s: rnd(3, 8) + 'px' };
  }), [plus]);
  if (reduced) return <div className="fxR-full" style={{ '--aura': aura }} onClick={onSkip} />;
  return (
    <div className={'fxC' + (plus ? ' plus' : '')} style={{ '--aura': aura, '--aura2': aura2 || aura, '--T': T + 's' }}>
      <div className="fxC-dim" />
      <div className="fxC-in" />
      <div className="fxC-charge" />
      <div className="fxC-flood" />
      <div className="fxC-lines" />
      <div className="fxC-ring" />
      <div className="fxC-ring r2" />
      {parts.map((p, i) => <i key={i} className="fxC-p" style={{ '--x': p.x, '--y': p.y, '--s': p.s }} />)}
      <div className="fxC-word" style={{ fontSize: plus ? 'clamp(40px, 9vw, 84px)' : 'clamp(34px, 7vw, 64px)' }}>
        {plus ? 'ALL CLEAR' : 'STAGE CLEAR'}
        <small>{title}</small>
      </div>
    </div>
  );
}

Object.assign(window, { FxA, FxB, FxC });