/* Global CRT overlays: scanlines, vignette, flicker, noise */
function CrtGlobalStyles() {
  const t = window.TWEAKS;
  return (
    <style dangerouslySetInnerHTML={{ __html: `
      @keyframes crt-flicker {
        0%, 100% { opacity: 1; }
        48% { opacity: 1; }
        50% { opacity: 0.92; }
        52% { opacity: 1; }
        78% { opacity: 0.96; }
      }
      @keyframes blink {
        0%, 49% { opacity: 1; }
        50%, 100% { opacity: 0; }
      }
      @keyframes marquee {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
      }
      @keyframes pulse-red {
        0%, 100% { opacity: 0.8; }
        50% { opacity: 1; text-shadow: 0 0 20px #ff3d2e; }
      }
      @keyframes boot-line {
        from { opacity: 0; transform: translateX(-6px); }
        to { opacity: 1; transform: translateX(0); }
      }
      @keyframes title-glitch {
        0%, 92%, 100% { text-shadow: 0 0 30px rgba(255,179,71,0.45), 0 0 70px rgba(255,179,71,0.22), 2px 0 0 ${t.accentMagenta}, -2px 0 0 ${t.accentCyan}; }
        93% { text-shadow: 0 0 30px rgba(255,179,71,0.45), 5px 0 0 ${t.accentMagenta}, -5px 0 0 ${t.accentCyan}; transform: translate(1px, 0); }
        95% { text-shadow: 0 0 30px rgba(255,179,71,0.45), -4px 0 0 ${t.accentMagenta}, 4px 0 0 ${t.accentCyan}; transform: translate(-1px, 0); }
        97% { text-shadow: 0 0 30px rgba(255,179,71,0.45), 2px 0 0 ${t.accentMagenta}, -2px 0 0 ${t.accentCyan}; transform: translate(0); }
      }
      .crt-title {
        animation: ${t.titleGlitch ? 'title-glitch 7s infinite steps(1, end)' : 'none'};
      }
      .cursor-blink { animation: ${t.cursorBlink ? 'blink 1.1s steps(1, end) infinite' : 'none'}; }
      .pulse-red { animation: ${t.overdosePulse ? 'pulse-red 1.5s ease-in-out infinite' : 'none'}; }
      .marquee-track { animation: ${t.marqueeTicker ? 'marquee 38s linear infinite' : 'none'}; }
      .crt-root {
        animation: ${t.crtFlicker ? 'crt-flicker 3.2s infinite steps(1, end)' : 'none'};
      }
      html, body { background: ${t.bg}; margin: 0; }
      body {
        font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
        color: ${t.cream};
        font-size: ${14 * t.fontScale}px;
        line-height: 1.55;
      }
      * { box-sizing: border-box; }
      ::selection { background: ${t.amber}; color: ${t.bg}; }
      button { font-family: inherit; }
      a { color: ${t.amber}; text-decoration: none; }
      a:hover { color: ${t.accentCyan}; }
    `}} />
  );
}

function CrtOverlays() {
  const t = window.TWEAKS;
  return (
    <>
      {/* scanlines */}
      <div style={{
        position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 9000,
        backgroundImage: `repeating-linear-gradient(0deg, rgba(0,0,0,${t.scanlineIntensity}) 0 1px, transparent 1px 3px)`,
        mixBlendMode: 'multiply',
      }} />
      {/* vignette */}
      {t.vignette && (
        <div style={{
          position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 8999,
          background: 'radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.6) 100%)',
        }} />
      )}
      {/* noise grain */}
      {t.noiseGrain && (
        <div style={{
          position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 8998,
          opacity: 0.07,
          backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.7 0 0 0 0 0.3 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")`,
        }} />
      )}
    </>
  );
}

Object.assign(window, { CrtGlobalStyles, CrtOverlays });