function CuartoTweaks({ tweaks, setTweak }) {
  // Live-apply accent color
  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accentColor);
  }, [tweaks.accentColor]);

  React.useEffect(() => {
    document.body.dataset.motion = tweaks.motionLevel;
  }, [tweaks.motionLevel]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Color" />
      <TweakColor label="Acento"
        value={tweaks.accentColor}
        onChange={(v) => setTweak('accentColor', v)} />

      <TweakSection label="Hero" />
      <TweakRadio label="Variante"
        value={tweaks.heroVariant}
        onChange={(v) => setTweak('heroVariant', v)}
        options={[
          { value: 'manifiesto', label: 'Intención' },
          { value: 'jugada', label: 'Jugada' },
          { value: 'imbatible', label: 'Imbatible' },
        ]} />

      <TweakSection label="Movimiento" />
      <TweakRadio label="Intensidad"
        value={tweaks.motionLevel}
        onChange={(v) => setTweak('motionLevel', v)}
        options={[
          { value: 'full', label: 'Total' },
          { value: 'reduced', label: 'Reducido' },
        ]} />
    </TweaksPanel>
  );
}
window.CuartoTweaks = CuartoTweaks;