/* CRT EFFECT - START                                                         */
    /* To remove: Delete everything between START and END comments.               */
    /* ========================================================================== */

    /* CRT Effect Overlay */
    /* This creates the scanlines, vignette, and subtle flicker */
    body.crt-enabled .crt-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: 9999;
      background:
        /* Scanlines - Increased opacity */
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.4) 50%),
        /* Vignette - Stronger */
        radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, 0.7) 100%),
        /* Scanline Mesh */
        linear-gradient(90deg, rgba(255, 0, 0, 0.08), rgba(0, 255, 0, 0.04), rgba(0, 0, 255, 0.08));
      background-size: 100% 2px, 100% 100%, 3px 100%;
      /* Animation for that slight 60Hz hum/flicker */
      animation: flicker 0.1s infinite;
      mix-blend-mode: overlay;
    }

    /* Keyframes for the CRT flicker - Amplified range */
    @keyframes flicker {
      0% {
        opacity: 0.92;
      }

      50% {
        opacity: 1.0;
      }

      100% {
        opacity: 0.94;
      }
    }

    /* ========================================================================== */
    /* CRT EFFECT - END                                                           */
    /* ========================================================================== */
    /* ========================================================================== */
    /* PHOSPHOR GLOW - START                                                      */
    /* To remove: Delete everything between START and END comments.               */
    /* ========================================================================== */

    /* Text Glow: Reduced to 40% */
    body.glow-enabled {
      /* Stacked shadows: tight bright core, medium glow, wide diffuse halo */
      text-shadow:
        0 0 2px rgba(0, 255, 255, 0.32),
        0 0 5px rgba(0, 204, 204, 0.24),
        0 0 10px rgba(0, 204, 204, 0.16);
    }

    body.glow-enabled .title-bar,
    body.glow-enabled .modal-title,
    body.glow-enabled button {
      text-shadow:
        0 0 5px rgba(0, 255, 255, 0.4),
        0 0 10px rgba(0, 204, 204, 0.32),
        0 0 20px rgba(0, 204, 204, 0.2);
    }

    /* Canvas Glow: NUCLEAR */
    /* heavy performance cost: disabled for now, testing text first? 
       Actually user asked for it. Let's try subtle bloom. */
    /* body.glow-enabled canvas {
      filter: drop-shadow(0 0 6px rgba(0, 204, 204, 0.9));
    } */


    /* Exceptions for specific colors to match their glow */
    /* We can't easily target pixels inside canvas with CSS, 
       so we use a generic teal glow which matches most things. 
       Spikes are orange/yellow, but a teal halo adds to the "display" feel. */

    /* ========================================================================== */
    /* PHOSPHOR GLOW - END                                                        */
    /* ========================================================================== */