(function () {
  // === UTILITY FUNCTIONS ===
  const createElement = (tag, className, styles = {}) => {
    const element = document.createElement(tag);
    if (className) element.className = className;
    Object.assign(element.style, styles);
    return element;
  };

  // === STYLES ===
  const applyStyles = () => {
    const style = createElement('style');
    style.textContent = `
      /* Crosshair Styles */
      .kour-crosshair {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 99999;
      }
      .crosshair-1, .crosshair-2, .crosshair-3, .crosshair-custom,
      .crosshair-4, .crosshair-5, .crosshair-6, .crosshair-7,
      .crosshair-8, .crosshair-9, .crosshair-10, .crosshair-11,
      .crosshair-12, .crosshair-13, .crosshair-14, .crosshair-15, .crosshair-16 {
        width: 80px;
        height: 80px;
        transition: width 0.3s ease, height 0.3s ease;
      }
      .crosshair-1::before, .crosshair-2::before, .crosshair-4::before,
      .crosshair-5::before, .crosshair-6::before, .crosshair-15::before {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        width: 100%; height: 100%;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: pulse 2s infinite ease-in-out;
      }
      .crosshair-1::before {
        box-shadow: 0 0 10px 4px red, 0 0 20px 10px orange inset;
      }
      .crosshair-2::before {
        box-shadow: 0 0 8px 3px blue, 0 0 14px 7px cyan inset;
      }
      .crosshair-3 {
        background: transparent;
        box-sizing: border-box;
      }
      .crosshair-3::before, .crosshair-3::after {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 100%; height: 100%;
      }
      .crosshair-3::before {
        border: 2px solid black;
        border-radius: 50%;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
      }
      .crosshair-3::after {
        width: 75%; height: 75%;
        border: 1px solid black;
        border-radius: 50%;
      }
      .crosshair-3 .plus-v,
      .crosshair-3 .plus-h,
      .crosshair-3 .tick-n,
      .crosshair-3 .tick-s,
      .crosshair-3 .tick-e,
      .crosshair-3 .tick-w {
        position: absolute;
        background: black;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
      }
      .crosshair-3 .plus-v {
        width: 2px;
        height: 20%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .crosshair-3 .plus-h {
        width: 20%;
        height: 2px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .crosshair-3 .tick-n {
        width: 2px;
        height: 10%;
        left: 50%;
        top: 10%;
        transform: translateX(-50%);
      }
      .crosshair-3 .tick-s {
        width: 2px;
        height: 10%;
        left: 50%;
        bottom: 10%;
        transform: translateX(-50%);
      }
      .crosshair-3 .tick-e {
        width: 10%;
        height: 2px;
        right: 10%;
        top: 50%;
        transform: translateY(-50%);
      }
      .crosshair-3 .tick-w {
        width: 10%;
        height: 2px;
        left: 10%;
        top: 50%;
        transform: translateY(-50%);
      }
      .crosshair-4::before {
        box-shadow: 0 0 12px 5px #ff00ff, 0 0 18px 9px #aa00ff inset;
      }
      .crosshair-5::before {
        box-shadow: 0 0 10px 4px #00ff00, 0 0 16px 8px #00aa00 inset;
        background: repeating-linear-gradient(
          45deg,
          transparent,
          transparent 5px,
          rgba(0, 255, 0, 0.2) 5px,
          rgba(0, 255, 0, 0.2) 10px
        );
      }
      .crosshair-6::before {
        box-shadow: 0 0 15px 6px #ff4500, 0 0 20px 10px #ff0000 inset;
        background: radial-gradient(circle, #ff4500 20%, transparent 70%);
      }
      .crosshair-7 {
        background: transparent;
      }
      .crosshair-7::before {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        width: 60%; height: 60%;
        border: 2px solid #00ffff;
        transform: translate(-50%, -50%) rotate(45deg);
        box-shadow: 0 0 8px #00ffff;
      }
      .crosshair-7::after {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        width: 2px; height: 2px;
        background: #00ffff;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 5px #00ffff;
      }
      .crosshair-8 {
        background: transparent;
      }
      .crosshair-8::before {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        width: 100%; height: 100%;
        background: radial-gradient(circle, #ffd700 10%, transparent 50%);
        transform: translate(-50%, -50%);
        clip-path: polygon(
          50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
          50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
        );
        box-shadow: 0 0 10px #ffd700;
      }
      .crosshair-9 {
        background: transparent;
      }
      .crosshair-9::before {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        width: 80%; height: 80%;
        border: 1px solid #00b7eb;
        transform: translate(-50%, -50%);
        background: repeating-linear-gradient(
          0deg,
          transparent,
          transparent 5px,
          rgba(0, 183, 235, 0.3) 5px,
          rgba(0, 183, 235, 0.3) 6px
        );
        box-shadow: 0 0 8px #00b7eb;
      }
      .crosshair-9::after {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        width: 2px; height: 2px;
        background: #00b7eb;
        transform: translate(-50%, -50%);
      }
      .crosshair-10 {
        background: transparent;
      }
      .crosshair-10::before, .crosshair-10::after {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 1px solid #ff00ff;
        box-shadow: 0 0 6px #ff00ff;
      }
      .crosshair-10::before {
        width: 100%; height: 100%;
      }
      .crosshair-10::after {
        width: 60%; height: 60%;
      }
      .crosshair-10 .dot,
      .crosshair-13 .dot {
        position: absolute;
        top: 50%; left: 50%;
        width: 4px; height: 4px;
        background: #ff00ff;
        transform: translate(-50%, -50%);
        border-radius: 50%;
      }
      .crosshair-11 {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }
      .crosshair-custom, .crosshair-11 {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }
      /* Crosshair 12: Electric Bolt */
      .crosshair-12 {
        background: transparent;
      }
      .crosshair-12::before {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        width: 100%; height: 100%;
        transform: translate(-50%, -50%);
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="yellow"><path d="M14 2h-4l-6 9h4v11l6-9h-4z"/></svg>') no-repeat center;
        background-size: contain;
        animation: electricPulse 0.5s infinite alternate;
        box-shadow: 0 0 10px yellow;
      }
      @keyframes electricPulse {
        0% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.9); }
        100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      }
      /* Crosshair 13: Neon Cross */
      .crosshair-13 {
        background: transparent;
      }
      .crosshair-13::before, .crosshair-13::after {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        background: #00ffcc;
        box-shadow: 0 0 8px #00ffcc;
      }
      .crosshair-13::before {
        width: 60%; height: 4px;
        transform: translate(-50%, -50%);
      }
      .crosshair-13::after {
        width: 4px; height: 60%;
        transform: translate(-50%, -50%);
      }
      .crosshair-13 .dot {
        background: #00ffcc;
        box-shadow: 0 0 5px #00ffcc;
      }
      /* Crosshair 14: Cyber Triangle */
      .crosshair-14 {
        background: transparent;
      }
      .crosshair-14::before {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        width: 50%; height: 50%;
        border: 2px solid #ff00ff;
        transform: translate(-50%, -50%) rotate(45deg);
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        box-shadow: 0 0 10px #ff00ff;
        animation: rotateSlow 5s infinite linear;
      }
      /* Crosshair 15: Plasma Orb */
      .crosshair-15::before {
        background: radial-gradient(circle, #ff00ff 20%, #00ffcc 70%, transparent 100%);
        box-shadow: 0 0 15px #ff00ff, 0 0 20px #00ffcc inset;
      }
      /* Crosshair 16: Holo Hexagon */
      .crosshair-16 {
        background: transparent;
      }
      .crosshair-16::before {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        width: 70%; height: 70%;
        border: 2px solid #00b7eb;
        transform: translate(-50%, -50%);
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        box-shadow: 0 0 10px #00b7eb;
        animation: rotateSlow 4s infinite linear;
      }
      @keyframes rotateSlow {
        0% { transform: translate(-50%, -50%) rotate(0deg); }
        100% { transform: translate(-50%, -50%) rotate(360deg); }
      }
      .crosshair-animated::before {
        animation: spinPulse 3s infinite ease-in-out;
      }
      .comic-effect {
        filter: contrast(1.5) brightness(1.1) saturate(1.5);
        position: relative;
      }
      .comic-effect::after {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="2" fill="rgba(0,0,0,0.3)" /></svg>') repeat;
        background-size: 8px 8px;
        opacity: 0.5;
        pointer-events: none;
      }
      @keyframes pulse {
        0%, 100% { transform: translate(-50%, -50%) scale(1); }
        50% { transform: translate(-50%, -50%) scale(1.1); }
      }
      @keyframes spinPulse {
        0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
        50% { transform: translate(-50%, -50%) scale(1.1) rotate(180deg); }
      }
      @keyframes vortexSpin {
        0% { transform: translate(-50%, -50%) rotate(0deg); }
        100% { transform: translate(-50%, -50%) rotate(360deg); }
      }

      /* Settings Panel Styles */
      .kour-settings {
        position: fixed;
        right: 20px;
        top: 20%;
        background: rgba(20, 20, 20, 0.95);
        border: 2px solid #666;
        padding: 15px;
        border-radius: 15px;
        color: white;
        font-family: sans-serif;
        z-index: 100000;
        max-height: 75vh;
        overflow-y: auto;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
        transition: opacity 0.3s ease;
      }
      .kour-settings.hidden {
        display: none;
      }
      .kour-settings button {
        margin: 5px 0;
        padding: 6px 12px;
        border: none;
        border-radius: 5px;
        background: #444;
        color: white;
        cursor: pointer;
        font-size: 14px;
        transition: background 0.2s ease, transform 0.1s ease;
      }
      .kour-settings button:hover {
        background: #666;
        transform: scale(1.05);
      }
      .kour-settings .section-title {
        font-weight: bold;
        margin: 10px 0 5px;
        color: #fff;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
      }
      .kour-settings .section {
        padding: 10px;
        margin: 10px 0;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      }
      .crosshair-section {
        background: linear-gradient(135deg, #00b7eb, #00ff88);
      }
      .color-section {
        background: linear-gradient(135deg, #ff00ff, #ff5555);
      }
      .effects-section {
        background: linear-gradient(135deg, #ffaa00, #ffd700);
      }
      .vip-section {
        background: linear-gradient(135deg, #ffd700, #ff4500);
      }
      .kour-settings .slider-label {
        font-size: 12px;
        color: #fff;
        margin-top: 5px;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
      }
      .kour-slider, .kour-file-input, .kour-code-input {
        width: 100%;
        margin: 5px 0;
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #666;
        background: #333;
        color: white;
      }
      .kour-sub-message {
        font-size: 14px;
        color: #ff4444;
        text-align: center;
        margin-bottom: 15px;
        font-weight: bold;
        text-shadow: 0 0 8px rgba(255, 68, 68, 0.9);
        background: rgba(0, 0, 0, 0.5);
        padding: 5px;
        border-radius: 5px;
      }
      .kour-vip-message {
        font-size: 16px;
        color: #ffd700;
        text-align: center;
        margin-bottom: 15px;
        font-weight: bold;
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.9);
        background: rgba(0, 0, 0, 0.5);
        padding: 5px;
        border-radius: 5px;
      }

      /* Overlay and Effects Styles */
      .kour-overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        pointer-events: none;
        z-index: 9999;
        mix-blend-mode: hue;
        transition: background-color 0.3s ease;
      }
      .kour-particles {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        pointer-events: none;
        z-index: 9996;
      }
      .kour-confetti {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        pointer-events: none;
        z-index: 9997;
      }
      .kour-glitch {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        pointer-events: none;
        z-index: 9995;
        background: repeating-linear-gradient(
          to bottom,
          transparent,
          transparent 2px,
          rgba(255, 255, 255, 0.05) 2px,
          rgba(255, 255, 255, 0.05) 4px
        );
        animation: glitch 0.5s infinite;
        opacity: 0;
      }
      @keyframes glitch {
        0% { transform: translate(0); }
        20% { transform: translate(-2px, 2px); }
        40% { transform: translate(2px, -2px); }
        60% { transform: translate(-1px, -1px); }
        80% { transform: translate(1px, 1px); }
      }
      .kour-vignette {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        pointer-events: none;
        z-index: 9994;
        background: radial-gradient(circle, transparent 50%, rgba(0, 0, 0, 0.7) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      .kour-gear {
        position: fixed;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: rgba(20, 20, 20, 0.9);
        border: 2px solid #666;
        border-radius: 50%;
        color: white;
        font-size: 24px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        z-index: 100001;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        transition: background 0.2s ease, transform 0.2s ease;
      }
      .kour-gear:hover {
        background: rgba(40, 40, 40, 0.9);
        transform: translateY(-50%) scale(1.1);
      }
      .kour-hitmarker {
        position: fixed;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 40px; height: 40px;
        background: transparent;
        pointer-events: none;
        z-index: 99998;
        opacity: 0;
        transition: opacity 0.5s ease;
      }
      .kour-hitmarker::before, .kour-hitmarker::after {
        content: '';
        position: absolute;
        background: #ff0000;
        box-shadow: 0 0 5px #ff0000;
      }
      .kour-hitmarker::before {
        width: 20px; height: 2px;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
      }
      .kour-hitmarker::after {
        width: 20px; height: 2px;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
      }
      .kour-screen-flash {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        background: rgba(255, 255, 255, 0.3);
        pointer-events: none;
        z-index: 9993;
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      .kour-laser-beam {
        position: fixed;
        top: 50%; left: 50%;
        width: 2px; height: 100vh;
        background: #ff00ff;
        box-shadow: 0 0 10px #ff00ff;
        transform: translateX(-50%);
        pointer-events: none;
        z-index: 9992;
        opacity: 0;
        transition: opacity 0.2s ease;
      }
      .kour-shockwave {
        position: fixed;
        top: 50%; left: 50%;
        width: 0; height: 0;
        border: 2px solid #00ff00;
        border-radius: 50%;
        box-shadow: 0 0 15px #00ff00;
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 9991;
        opacity: 0;
        transition: all 0.5s ease;
      }
      @keyframes shockwaveExpand {
        0% { width: 0; height: 0; opacity: 1; }
        100% { width: 200px; height: 200px; opacity: 0; }
      }
      .kour-keyboard {
        position: fixed;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(20, 20, 20, 0.95);
        border: 2px solid #666;
        padding: 10px;
        border-radius: 10px;
        z-index: 100002;
        display: none;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
      }
      .kour-keyboard button {
        width: 40px;
        height: 40px;
        margin: 5px;
        border: none;
        border-radius: 5px;
        background: #444;
        color: white;
        font-size: 16px;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.1s ease;
      }
      .kour-keyboard button:hover {
        background: #666;
        transform: scale(1.05);
      }
      .kour-keyboard .space {
        width: 150px;
      }
      .kour-keyboard .backspace, .kour-keyboard .close {
        width: 60px;
      }
    `;
    document.head.appendChild(style);
  };
  applyStyles();

  // === CROSSHAIRS SETUP ===
  const setupCrosshairs = () => {
    const crosshairs = {};
    for (let i = 1; i <= 16; i++) {
      crosshairs[`ch${i}`] = createElement('div', `kour-crosshair crosshair-${i}`, { display: 'none' });
      if (i === 3 || i === 10 || i === 13) {
        crosshairs[`ch${i}`].innerHTML = `
          <div class="dot"></div>
          ${i === 3 ? `
            <div class="plus-v"></div>
            <div class="plus-h"></div>
            <div class="tick-n"></div>
            <div class="tick-s"></div>
            <div class="tick-e"></div>
            <div class="tick-w"></div>
          ` : ''}
        `;
      }
      if (i === 11) {
        crosshairs[`ch${i}`].style.backgroundImage = `url('https://i.imgur.com/5o5o5o5.png')`;
        crosshairs[`ch${i}`].style.animation = 'vortexSpin 4s infinite linear';
      }
      document.body.appendChild(crosshairs[`ch${i}`]);
    }
    const chCustom = createElement('div', 'kour-crosshair crosshair-custom', { display: 'none' });
    document.body.appendChild(chCustom);
    return { crosshairs, chCustom };
  };
  const { crosshairs, chCustom } = setupCrosshairs();

  // === COLOR OVERLAY ===
  const setupColorOverlay = () => {
    const overlay = createElement('div', 'kour-overlay', { backgroundColor: 'transparent' }); // Start with no color
    document.body.appendChild(overlay);
    let autoColor = false;
    let currentHue = 0;
    const updateColor = () => {
      if (autoColor) {
        currentHue = (currentHue + 1) % 360;
        overlay.style.backgroundColor = `hsl(${currentHue}, 100%, 50%)`;
      }
      requestAnimationFrame(updateColor);
    };
    updateColor();
    return { overlay, autoColor, currentHue };
  };
  const { overlay, autoColor: autoColorState, currentHue: initialHue } = setupColorOverlay();
  let autoColor = autoColorState;
  let currentHue = initialHue;

  // === PARTICLE EFFECTS ===
  const setupParticles = () => {
    const particleCanvas = createElement('canvas', 'kour-particles');
    document.body.appendChild(particleCanvas);
    particleCanvas.width = window.innerWidth;
    particleCanvas.height = window.innerHeight;
    const ctx = particleCanvas.getContext('2d');
    let particlesEnabled = false;
    let particleStyle = 'fire';
    let particles = [];
    let comicEffectEnabled = false;
    let comicIntensity = 0.5;
    let particleSize = 5;

    const initParticles = () => {
      particles = [];
      for (let i = 0; i < 20; i++) {
        particles.push({
          angle: Math.random() * Math.PI * 2,
          radius: Math.random() * 40 + 20,
          speed: Math.random() * 0.05 + 0.02,
          size: particleSize,
          opacity: Math.random() * 0.5 + 0.3
        });
      }
    };
    initParticles();

    const animateParticles = () => {
      ctx.clearRect(0, 0, particleCanvas.width, particleCanvas.height);
      if (particlesEnabled) {
        const centerX = window.innerWidth / 2;
        const centerY = window.innerHeight / 2;
        particles.forEach(p => {
          p.angle += p.speed;
          p.size = particleSize;
          const x = centerX + Math.cos(p.angle) * p.radius;
          const y = centerY + Math.sin(p.angle) * p.radius;
          ctx.beginPath();
          ctx.arc(x, y, p.size, 0, Math.PI * 2);
          if (particleStyle === 'fire') {
            ctx.fillStyle = `rgba(255, ${Math.floor(Math.random() * 100) + 100}, 0, ${p.opacity})`;
          } else if (particleStyle === 'neon') {
            ctx.fillStyle = `rgba(0, 255, 255, ${p.opacity})`;
          } else if (particleStyle === 'magic') {
            ctx.fillStyle = `rgba(${Math.floor(Math.random() * 255)}, 0, 255, ${p.opacity})`;
          }
          ctx.fill();
        });
      }
      requestAnimationFrame(animateParticles);
    };
    animateParticles();

    window.addEventListener('resize', () => {
      particleCanvas.width = window.innerWidth;
      particleCanvas.height = window.innerHeight;
    });

    return { particleCanvas, particlesEnabled, particleStyle, particles, comicEffectEnabled, comicIntensity, particleSize, initParticles };
  };
  const { particleCanvas, particlesEnabled: initialParticlesEnabled, particleStyle: initialParticleStyle, particles, comicEffectEnabled: initialComicEffectEnabled, comicIntensity: initialComicIntensity, particleSize: initialParticleSize, initParticles } = setupParticles();
  let particlesEnabled = initialParticlesEnabled;
  let particleStyle = initialParticleStyle;
  let comicEffectEnabled = initialComicEffectEnabled;
  let comicIntensity = initialComicIntensity;
  let particleSize = initialParticleSize;

  // === CONFETTI EFFECTS ===
  const setupConfetti = () => {
    const confettiCanvas = createElement('canvas', 'kour-confetti');
    document.body.appendChild(confettiCanvas);
    confettiCanvas.width = window.innerWidth;
    confettiCanvas.height = window.innerHeight;
    const confettiCtx = confettiCanvas.getContext('2d');
    let confettiEnabled = true;
    let confettiParticles = [];
    let confettiAmount = 100;

    const initConfetti = (centerX = window.innerWidth / 2, centerY = window.innerHeight / 2) => {
      confettiParticles = [];
      for (let i = 0; i < confettiAmount; i++) {
        confettiParticles.push({
          x: centerX,
          y: centerY,
          angle: Math.random() * Math.PI * 2,
          speed: Math.random() * 5 + 2,
          size: Math.random() * 5 + 3,
          color: `hsl(${Math.random() * 360}, 100%, 50%)`,
          life: 1,
          decay: Math.random() * 0.02 + 0.01
        });
      }
    };

    const animateConfetti = () => {
      confettiCtx.clearRect(0, 0, confettiCanvas.width, confettiCanvas.height);
      confettiParticles = confettiParticles.filter(p => p.life > 0);
      confettiParticles.forEach(p => {
        p.x += Math.cos(p.angle) * p.speed;
        p.y += Math.sin(p.angle) * p.speed + 1;
        p.life -= p.decay;
        confettiCtx.fillStyle = p.color;
        confettiCtx.globalAlpha = p.life;
        confettiCtx.fillRect(p.x, p.y, p.size, p.size);
      });
      if (confettiParticles.length > 0) requestAnimationFrame(animateConfetti);
    };

    return { confettiCanvas, confettiEnabled, confettiParticles, confettiAmount, initConfetti, animateConfetti };
  };
  const { confettiCanvas, confettiEnabled: initialConfettiEnabled, confettiParticles, confettiAmount: initialConfettiAmount, initConfetti, animateConfetti } = setupConfetti();
  let confettiEnabled = initialConfettiEnabled;
  let confettiAmount = initialConfettiAmount;

  // === OTHER EFFECTS ===
  const setupEffects = () => {
    const hitmarker = createElement('div', 'kour-hitmarker');
    document.body.appendChild(hitmarker);

    const screenFlash = createElement('div', 'kour-screen-flash');
    document.body.appendChild(screenFlash);

    const laserBeam = createElement('div', 'kour-laser-beam');
    document.body.appendChild(laserBeam);

    const shockwave = createElement('div', 'kour-shockwave');
    document.body.appendChild(shockwave);

    const glitch = createElement('div', 'kour-glitch');
    document.body.appendChild(glitch);
    let glitchEnabled = false;
    let glitchIntensity = 0.3;

    const vignette = createElement('div', 'kour-vignette');
    document.body.appendChild(vignette);
    let vignetteEnabled = false;
    let vignetteOpacity = 0.7;

    return { hitmarker, screenFlash, laserBeam, shockwave, glitch, glitchEnabled, glitchIntensity, vignette, vignetteEnabled, vignetteOpacity };
  };
  const { hitmarker, screenFlash, laserBeam, shockwave, glitch, glitchEnabled: initialGlitchEnabled, glitchIntensity: initialGlitchIntensity, vignette, vignetteEnabled: initialVignetteEnabled, vignetteOpacity: initialVignetteOpacity } = setupEffects();
  let glitchEnabled = initialGlitchEnabled;
  let glitchIntensity = initialGlitchIntensity;
  let vignetteEnabled = initialVignetteEnabled;
  let vignetteOpacity = initialVignetteOpacity;

  // === GEAR ICON ===
  const setupGearIcon = () => {
    const gearIcon = createElement('div', 'kour-gear');
    gearIcon.innerHTML = '⚙️';
    document.body.appendChild(gearIcon);
    return gearIcon;
  };
  const gearIcon = setupGearIcon();

  // === VIRTUAL KEYBOARD ===
  const setupKeyboard = () => {
    const keyboard = createElement('div', 'kour-keyboard', { display: 'none' });
    keyboard.innerHTML = `
      <div>
        <button>Q</button><button>W</button><button>E</button><button>R</button><button>T</button>
        <button>Y</button><button>U</button><button>I</button><button>O</button><button>P</button>
      </div>
      <div>
        <button>A</button><button>S</button><button>D</button><button>F</button><button>G</button>
        <button>H</button><button>J</button><button>K</button><button>L</button>
      </div>
      <div>
        <button>Z</button><button>X</button><button>C</button><button>V</button><button>B</button>
        <button>N</button><button>M</button>
      </div>
      <div>
        <button class="space">Space</button>
        <button class="backspace">⌫</button>
        <button class="close" style="background: #ff4444;">Close</button>
      </div>
    `;
    document.body.appendChild(keyboard);
    return keyboard;
  };
  const keyboard = setupKeyboard();

  // === SETTINGS PANEL ===
  const setupSettingsPanel = () => {
    const panel = createElement('div', 'kour-settings');
    panel.innerHTML = `
      <div class="kour-vip-message" id="vipMessage" style="display: none;">VIP Unlocked!</div>
      <div class="kour-sub-message">sub to @justkour yt NOW :)</div>
      <button id="closePanel" style="background: #ff4444;">Close Window</button>
      <button id="resetAll" style="background: #ffaa00; margin-left: 10px;">Reset Everything</button>
      <div class="section crosshair-section">
        <div class="section-title">🎯 Crosshair</div>
        <button id="cross1">Crosshair 1 (Red Glow)</button>
        <button id="cross2">Crosshair 2 (Blue Glow)</button>
        <button id="cross3">Crosshair 3 (Black Scope)</button>
        <button id="crossCustom">Custom Crosshair</button>
        <button id="crossOff">Turn Off</button>
        <div class="slider-label">Crosshair Size (20-1000px):</div>
        <input type="range" min="20" max="1000" value="80" class="kour-slider" id="crosshairSize">
        <input type="file" accept="image/*" class="kour-file-input" id="customCrosshair">
        <div class="slider-label">Custom Opacity:</div>
        <input type="range" min="0.1" max="1" step="0.1" value="1" class="kour-slider" id="customOpacity">
        <button id="crossAnim">Toggle Animation</button>
        <div class="slider-label">Animation Speed:</div>
        <input type="range" min="1" max="10" value="3" class="kour-slider" id="animSpeed">
      </div>
      <div class="section color-section">
        <div class="section-title">🎨 Color Tint</div>
        <input type="range" min="0" max="360" value="0" class="kour-slider" id="colorSlider">
        <button id="autoColor">Auto Cycle</button>
        <button id="colorOff">Disable Color</button>
        <div class="slider-label">Presets:</div>
        <button id="presetNeon">Neon</button>
        <button id="presetPastel">Pastel</button>
        <button id="presetMono">Monochrome</button>
      </div>
      <div class="section effects-section">
        <div class="section-title">💥 Effects</div>
        <button id="particlesToggle">Toggle Particles</button>
        <div class="slider-label">Particle Style:</div>
        <button id="particleFire">Fire</button>
        <button id="particleNeon">Neon</button>
        <button id="particleMagic">Magic</button>
        <div class="slider-label">Particle Size (2-20px):</div>
        <input type="range" min="2" max="20" value="5" class="kour-slider" id="particleSize">
        <button id="comicToggle">Toggle Comic Effect</button>
        <div class="slider-label">Comic Intensity:</div>
        <input type="range" min="0.1" max="1" step="0.1" value="0.5" class="kour-slider" id="comicIntensity">
        <button id="glitchToggle">Toggle Glitch</button>
        <div class="slider-label">Glitch Intensity:</div>
        <input type="range" min="0" max="1" step="0.1" value="0.3" class="kour-slider" id="glitchIntensity">
        <button id="vignetteToggle">Toggle Vignette</button>
        <div class="slider-label">Vignette Opacity:</div>
        <input type="range" min="0" max="1" step="0.1" value="0.7" class="kour-slider" id="vignetteOpacity">
      </div>
      <div class="section vip-section" id="vipSection">
        <div class="section-title">🔥 VIP Features</div>
        <div class="slider-label">Enter Code:</div>
        <input type="text" placeholder="Enter VIP Code" class="kour-code-input" id="vipCodeInput" readonly>
        <button id="checkCode">Check Code</button>
        <div class="section-title">🎯 VIP Crosshairs</div>
        <button id="cross4" style="display: none;">Crosshair 4 (Neon Purple)</button>
        <button id="cross5" style="display: none;">Crosshair 5 (Green Matrix)</button>
        <button id="cross6" style="display: none;">Crosshair 6 (Fiery Red)</button>
        <button id="cross7" style="display: none;">Crosshair 7 (Diamond Scope)</button>
        <button id="cross8" style="display: none;">Crosshair 8 (Starburst)</button>
        <button id="cross9" style="display: none;">Crosshair 9 (Holo Grid)</button>
        <button id="cross10" style="display: none;">Crosshair 10 (Futuristic Rings)</button>
        <button id="cross11" style="display: none;">Crosshair 11 (Vortex)</button>
        <button id="cross12" style="display: none;">Crosshair 12 (Electric Bolt)</button>
        <button id="cross13" style="display: none;">Crosshair 13 (Neon Cross)</button>
        <button id="cross14" style="display: none;">Crosshair 14 (Cyber Triangle)</button>
        <button id="cross15" style="display: none;">Crosshair 15 (Plasma Orb)</button>
        <button id="cross16" style="display: none;">Crosshair 16 (Holo Hexagon)</button>
        <div class="section-title">💥 VIP Shoot Effects</div>
        <button id="confettiToggle" style="display: none;">Toggle Confetti on Shoot</button>
        <div class="slider-label">Confetti Amount (50-200):</div>
        <input type="range" min="50" max="200" value="100" class="kour-slider" id="confettiAmount" style="display: none;">
        <button id="hitmarkerToggle" style="display: none;">Toggle Hitmarker</button>
        <div class="slider-label">Hitmarker Size (20-100px):</div>
        <input type="range" min="20" max="100" value="40" class="kour-slider" id="hitmarkerSize" style="display: none;">
        <button id="screenFlashToggle" style="display: none;">Toggle Screen Flash</button>
        <div class="slider-label">Screen Flash Intensity:</div>
        <input type="range" min="0.1" max="0.5" step="0.1" value="0.3" class="kour-slider" id="screenFlashIntensity" style="display: none;">
        <button id="laserBeamToggle" style="display: none;">Toggle Laser Beam</button>
        <div class="slider-label">Laser Beam Width (1-5px):</div>
        <input type="range" min="1" max="5" value="2" class="kour-slider" id="laserBeamWidth" style="display: none;">
        <button id="shockwaveToggle" style="display: none;">Toggle Shockwave</button>
        <div class="slider-label">Shockwave Size (100-500px):</div>
        <input type="range" min="100" max="500" value="200" class="kour-slider" id="shockwaveSize" style="display: none;">
        <div class="section-title">✨ VIP Visual Enhancements</div>
        <button id="glowEffectToggle" style="display: none;">Toggle Crosshair Glow</button>
        <div class="slider-label">Glow Intensity:</div>
        <input type="range" min="0" max="20" value="10" class="kour-slider" id="glowIntensity" style="display: none;">
        <button id="trailEffectToggle" style="display: none;">Toggle Crosshair Trail</button>
        <div class="slider-label">Trail Length (1-10):</div>
        <input type="range" min="1" max="10" value="5" class="kour-slider" id="trailLength" style="display: none;">
        <button id="soundEffectToggle" style="display: none;">Toggle Shoot Sound</button>
        <div class="slider-label">Sound Volume:</div>
        <input type="range" min="0" max="1" step="0.1" value="0.5" class="kour-slider" id="soundVolume" style="display: none;">
        <button id="crosshairColorToggle" style="display: none;">Toggle Crosshair Color Change</button>
        <div class="slider-label">Color Change Speed:</div>
        <input type="range" min="1" max="10" value="5" class="kour-slider" id="colorChangeSpeed" style="display: none;">
        <button id="dynamicZoomToggle" style="display: none;">Toggle Dynamic Zoom</button>
        <div class="slider-label">Zoom Sensitivity:</div>
        <input type="range" min="0.1" max="2" step="0.1" value="1" class="kour-slider" id="zoomSensitivity" style="display: none;">
      </div>
    `;
    document.body.appendChild(panel);
    return panel;
  };
  const panel = setupSettingsPanel();

  // === VIP FEATURES STATE ===
  let isVip = false;
  let hitmarkerEnabled = true;
  let screenFlashEnabled = true;
  let laserBeamEnabled = true;
  let shockwaveEnabled = true;
  let glowEffectEnabled = true;
  let trailEffectEnabled = true;
  let soundEffectEnabled = true;
  let crosshairColorEnabled = true;
  let dynamicZoomEnabled = true;
  let hitmarkerSize = 40;
  let screenFlashIntensity = 0.3;
  let laserBeamWidth = 2;
  let shockwaveSize = 200;
  let glowIntensity = 10;
  let trailLength = 5;
  let soundVolume = 0.5;
  let colorChangeSpeed = 5;
  let zoomSensitivity = 1;
  let crosshairHue = 0;

  // === SHOOT SOUND ===
  const setupShootSound = () => {
    const shootSound = new Audio('https://cdn.pixabay.com/audio/2022/03/10/audio_d5b3969f3a.mp3');
    shootSound.volume = soundVolume;
    return shootSound;
  };
  const shootSound = setupShootSound();

  // === TRAIL EFFECT ===
  const setupTrailEffect = () => {
    const trailCanvas = createElement('canvas', 'kour-particles');
    document.body.appendChild(trailCanvas);
    trailCanvas.width = window.innerWidth;
    trailCanvas.height = window.innerHeight;
    const trailCtx = trailCanvas.getContext('2d');
    let trailPositions = [];

    const updateTrail = () => {
      trailCtx.clearRect(0, 0, trailCanvas.width, trailCanvas.height);
      if (trailEffectEnabled && trailPositions.length > 0) {
        trailPositions.forEach((pos, i) => {
          trailCtx.beginPath();
          trailCtx.arc(pos.x, pos.y, 3, 0, Math.PI * 2);
          trailCtx.fillStyle = `hsla(${crosshairHue}, 100%, 50%, ${pos.opacity})`;
          trailCtx.fill();
          pos.opacity -= 0.05;
          if (pos.opacity <= 0) trailPositions.splice(i, 1);
        });
      }
      requestAnimationFrame(updateTrail);
    };
    updateTrail();

    window.addEventListener('resize', () => {
      trailCanvas.width = window.innerWidth;
      trailCanvas.height = window.innerHeight;
    });

    return { trailCanvas, trailPositions };
  };
  const { trailCanvas, trailPositions } = setupTrailEffect();

  // === EVENT LISTENERS ===
  const setupEventListeners = () => {
    let crossAnimEnabled = false;

    // Close Panel
    panel.querySelector('#closePanel').addEventListener('click', () => {
      panel.classList.add('hidden');
      gearIcon.style.display = 'block';
      keyboard.style.display = 'none';
    });

    // Gear Icon to Open Panel
    gearIcon.addEventListener('click', () => {
      panel.classList.remove('hidden');
      gearIcon.style.display = 'none';
    });

    // Reset Everything
    panel.querySelector('#resetAll').addEventListener('click', () => {
      // Reset Crosshairs
      Object.values(crosshairs).forEach(ch => {
        ch.style.display = 'none';
        ch.classList.remove('crosshair-animated');
        ch.classList.remove('comic-effect');
        ch.style.boxShadow = '';
        ch.style.filter = '';
      });
      chCustom.style.display = 'none';
      chCustom.classList.remove('crosshair-animated');
      chCustom.classList.remove('comic-effect');
      chCustom.style.boxShadow = '';
      chCustom.style.filter = '';
      particleCanvas.classList.remove('comic-effect');
      trailCanvas.classList.remove('comic-effect');
      crossAnimEnabled = false;
      panel.querySelector('#crossAnim').textContent = 'Toggle Animation';
      panel.querySelector('#crosshairSize').value = 80;
      Object.values(crosshairs).forEach(ch => {
        ch.style.width = '80px';
        ch.style.height = '80px';
      });
      chCustom.style.width = '80px';
      chCustom.style.height = '80px';
      panel.querySelector('#customOpacity').value = 1;
      chCustom.style.opacity = 1;
      panel.querySelector('#animSpeed').value = 3;
      document.querySelectorAll('.crosshair-animated').forEach(el => {
        el.style.animationDuration = '3s';
      });

      // Reset Color Tint
      autoColor = false;
      currentHue = 0;
      overlay.style.backgroundColor = 'transparent';
      panel.querySelector('#colorSlider').value = 0;
      panel.querySelector('#autoColor').textContent = 'Auto Cycle';

      // Reset Effects
      particlesEnabled = false;
      panel.querySelector('#particlesToggle').textContent = 'Toggle Particles';
      particleStyle = 'fire';
      panel.querySelector('#particleSize').value = 5;
      particleSize = 5;
      initParticles();
      comicEffectEnabled = false;
      panel.querySelector('#comicToggle').textContent = 'Toggle Comic Effect';
      panel.querySelector('#comicIntensity').value = 0.5;
      comicIntensity = 0.5;
      glitchEnabled = false;
      glitch.style.opacity = 0;
      panel.querySelector('#glitchToggle').textContent = 'Toggle Glitch';
      panel.querySelector('#glitchIntensity').value = 0.3;
      glitchIntensity = 0.3;
      vignetteEnabled = false;
      vignette.style.opacity = 0;
      panel.querySelector('#vignetteToggle').textContent = 'Toggle Vignette';
      panel.querySelector('#vignetteOpacity').value = 0.7;
      vignetteOpacity = 0.7;

      // Reset VIP Features
      isVip = false;
      panel.querySelector('#vipMessage').style.display = 'none';
      for (let i = 4; i <= 16; i++) {
        panel.querySelector(`#cross${i}`).style.display = 'none';
      }
      panel.querySelector('#confettiToggle').style.display = 'none';
      panel.querySelector('#confettiAmount').style.display = 'none';
      panel.querySelector('#hitmarkerToggle').style.display = 'none';
      panel.querySelector('#hitmarkerSize').style.display = 'none';
      panel.querySelector('#screenFlashToggle').style.display = 'none';
      panel.querySelector('#screenFlashIntensity').style.display = 'none';
      panel.querySelector('#laserBeamToggle').style.display = 'none';
      panel.querySelector('#laserBeamWidth').style.display = 'none';
      panel.querySelector('#shockwaveToggle').style.display = 'none';
      panel.querySelector('#shockwaveSize').style.display = 'none';
      panel.querySelector('#glowEffectToggle').style.display = 'none';
      panel.querySelector('#glowIntensity').style.display = 'none';
      panel.querySelector('#trailEffectToggle').style.display = 'none';
      panel.querySelector('#trailLength').style.display = 'none';
      panel.querySelector('#soundEffectToggle').style.display = 'none';
      panel.querySelector('#soundVolume').style.display = 'none';
      panel.querySelector('#crosshairColorToggle').style.display = 'none';
      panel.querySelector('#colorChangeSpeed').style.display = 'none';
      panel.querySelector('#dynamicZoomToggle').style.display = 'none';
      panel.querySelector('#zoomSensitivity').style.display = 'none';
      confettiEnabled = true;
      panel.querySelector('#confettiToggle').textContent = 'Toggle Confetti on Shoot';
      panel.querySelector('#confettiAmount').value = 100;
      confettiAmount = 100;
      hitmarkerEnabled = true;
      panel.querySelector('#hitmarkerToggle').textContent = 'Toggle Hitmarker';
      panel.querySelector('#hitmarkerSize').value = 40;
      hitmarkerSize = 40;
      hitmarker.style.width = `${hitmarkerSize}px`;
      hitmarker.style.height = `${hitmarkerSize}px`;
      screenFlashEnabled = true;
      panel.querySelector('#screenFlashToggle').textContent = 'Toggle Screen Flash';
      panel.querySelector('#screenFlashIntensity').value = 0.3;
      screenFlashIntensity = 0.3;
      laserBeamEnabled = true;
      panel.querySelector('#laserBeamToggle').textContent = 'Toggle Laser Beam';
      panel.querySelector('#laserBeamWidth').value = 2;
      laserBeamWidth = 2;
      laserBeam.style.width = `${laserBeamWidth}px`;
      shockwaveEnabled = true;
      panel.querySelector('#shockwaveToggle').textContent = 'Toggle Shockwave';
      panel.querySelector('#shockwaveSize').value = 200;
      shockwaveSize = 200;
      glowEffectEnabled = true;
      panel.querySelector('#glowEffectToggle').textContent = 'Toggle Crosshair Glow';
      panel.querySelector('#glowIntensity').value = 10;
      glowIntensity = 10;
      trailEffectEnabled = true;
      panel.querySelector('#trailEffectToggle').textContent = 'Toggle Crosshair Trail';
      panel.querySelector('#trailLength').value = 5;
      trailLength = 5;
      soundEffectEnabled = true;
      panel.querySelector('#soundEffectToggle').textContent = 'Toggle Shoot Sound';
      panel.querySelector('#soundVolume').value = 0.5;
      soundVolume = 0.5;
      shootSound.volume = soundVolume;
      crosshairColorEnabled = true;
      panel.querySelector('#crosshairColorToggle').textContent = 'Toggle Crosshair Color Change';
      panel.querySelector('#colorChangeSpeed').value = 5;
      colorChangeSpeed = 5;
      dynamicZoomEnabled = true;
      panel.querySelector('#dynamicZoomToggle').textContent = 'Toggle Dynamic Zoom';
      panel.querySelector('#zoomSensitivity').value = 1;
      zoomSensitivity = 1;
      crosshairHue = 0;
      panel.querySelector('#vipCodeInput').value = '';
    });

    // Crosshair Selection
    for (let i = 1; i <= 16; i++) {
      const button = panel.querySelector(`#cross${i}`);
      if (button) {
        button.addEventListener('click', () => {
          if (i > 3 && !isVip) {
            alert('Enter the VIP code to unlock this crosshair!');
            return;
          }
          Object.values(crosshairs).forEach(ch => ch.style.display = 'none');
          chCustom.style.display = 'none';
          crosshairs[`ch${i}`].style.display = 'block';
          if (crossAnimEnabled) crosshairs[`ch${i}`].classList.add('crosshair-animated');
          else crosshairs[`ch${i}`].classList.remove('crosshair-animated');
          if (comicEffectEnabled) crosshairs[`ch${i}`].classList.add('comic-effect');
          else crosshairs[`ch${i}`].classList.remove('comic-effect');
          if (glowEffectEnabled && isVip) {
            crosshairs[`ch${i}`].style.boxShadow = `0 0 ${glowIntensity}px #ff00ff`;
          }
        });
      }
    }

    // Custom Crosshair
    panel.querySelector('#crossCustom').addEventListener('click', () => {
      Object.values(crosshairs).forEach(ch => ch.style.display = 'none');
      chCustom.style.display = 'block';
      if (crossAnimEnabled) chCustom.classList.add('crosshair-animated');
      else chCustom.classList.remove('crosshair-animated');
      if (comicEffectEnabled) chCustom.classList.add('comic-effect');
      else chCustom.classList.remove('comic-effect');
      if (glowEffectEnabled && isVip) {
        chCustom.style.boxShadow = `0 0 ${glowIntensity}px #ff00ff`;
      }
    });

    // Turn Off Crosshair
    panel.querySelector('#crossOff').addEventListener('click', () => {
      Object.values(crosshairs).forEach(ch => ch.style.display = 'none');
      chCustom.style.display = 'none';
    });

    // Crosshair Size
    panel.querySelector('#crosshairSize').addEventListener('input', (e) => {
      const size = e.target.value;
      Object.values(crosshairs).forEach(ch => {
        ch.style.width = `${size}px`;
        ch.style.height = `${size}px`;
      });
      chCustom.style.width = `${size}px`;
      chCustom.style.height = `${size}px`;
    });

    // Custom Crosshair Upload
    panel.querySelector('#customCrosshair').addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (event) => {
          chCustom.style.backgroundImage = `url(${event.target.result})`;
          chCustom.style.display = 'block';
          Object.values(crosshairs).forEach(ch => ch.style.display = 'none');
          if (crossAnimEnabled) chCustom.classList.add('crosshair-animated');
          if (comicEffectEnabled) chCustom.classList.add('comic-effect');
          if (glowEffectEnabled && isVip) {
            chCustom.style.boxShadow = `0 0 ${glowIntensity}px #ff00ff`;
          }
        };
        reader.readAsDataURL(file);
      }
    });

    // Custom Crosshair Opacity
    panel.querySelector('#customOpacity').addEventListener('input', (e) => {
      chCustom.style.opacity = e.target.value;
    });

    // Toggle Crosshair Animation
    panel.querySelector('#crossAnim').addEventListener('click', () => {
      crossAnimEnabled = !crossAnimEnabled;
      const activeCrosshair = [...Object.values(crosshairs), chCustom].find(ch => ch.style.display === 'block');
      if (activeCrosshair) {
        if (crossAnimEnabled) activeCrosshair.classList.add('crosshair-animated');
        else activeCrosshair.classList.remove('crosshair-animated');
      }
      panel.querySelector('#crossAnim').textContent = crossAnimEnabled ? 'Disable Animation' : 'Toggle Animation';
    });

    // Animation Speed
    panel.querySelector('#animSpeed').addEventListener('input', (e) => {
      document.querySelectorAll('.crosshair-animated').forEach(el => {
        el.style.animationDuration = `${e.target.value}s`;
      });
    });

    // Color Tint Controls
    panel.querySelector('#colorSlider').addEventListener('input', (e) => {
      autoColor = false;
      currentHue = parseInt(e.target.value);
      overlay.style.backgroundColor = `hsl(${currentHue}, 100%, 50%)`;
      panel.querySelector('#autoColor').textContent = 'Auto Cycle';
    });

    panel.querySelector('#autoColor').addEventListener('click', () => {
      autoColor = !autoColor;
      panel.querySelector('#autoColor').textContent = autoColor ? 'Disable Auto Cycle' : 'Auto Cycle';
    });

    panel.querySelector('#colorOff').addEventListener('click', () => {
      autoColor = false;
      overlay.style.backgroundColor = 'transparent';
      panel.querySelector('#colorSlider').value = 0;
      panel.querySelector('#autoColor').textContent = 'Auto Cycle';
    });

    panel.querySelector('#presetNeon').addEventListener('click', () => {
      autoColor = false;
      currentHue = 180;
      overlay.style.backgroundColor = `hsl(180, 100%, 50%)`;
      panel.querySelector('#colorSlider').value = currentHue;
      panel.querySelector('#autoColor').textContent = 'Auto Cycle';
    });

    panel.querySelector('#presetPastel').addEventListener('click', () => {
      autoColor = false;
      currentHue = 300;
      overlay.style.backgroundColor = `hsl(300, 50%, 80%)`;
      panel.querySelector('#colorSlider').value = currentHue;
      panel.querySelector('#autoColor').textContent = 'Auto Cycle';
    });

    panel.querySelector('#presetMono').addEventListener('click', () => {
      autoColor = false;
      currentHue = 0;
      overlay.style.backgroundColor = `hsl(0, 0%, 50%)`;
      panel.querySelector('#colorSlider').value = currentHue;
      panel.querySelector('#autoColor').textContent = 'Auto Cycle';
    });

    // Particle Effects Controls
    panel.querySelector('#particlesToggle').addEventListener('click', () => {
      particlesEnabled = !particlesEnabled;
      if (particlesEnabled && comicEffectEnabled) {
        particleCanvas.classList.add('comic-effect');
      } else {
        particleCanvas.classList.remove('comic-effect');
      }
      panel.querySelector('#particlesToggle').textContent = particlesEnabled ? 'Disable Particles' : 'Toggle Particles';
    });

    panel.querySelector('#particleFire').addEventListener('click', () => {
      particleStyle = 'fire';
    });

    panel.querySelector('#particleNeon').addEventListener('click', () => {
      particleStyle = 'neon';
    });

    panel.querySelector('#particleMagic').addEventListener('click', () => {
      particleStyle = 'magic';
    });

    panel.querySelector('#particleSize').addEventListener('input', (e) => {
      particleSize = parseFloat(e.target.value);
      initParticles();
    });

    // Comic Effect
    panel.querySelector('#comicToggle').addEventListener('click', () => {
      comicEffectEnabled = !comicEffectEnabled;
      const activeCrosshair = [...Object.values(crosshairs), chCustom].find(ch => ch.style.display === 'block');
      if (comicEffectEnabled) {
        if (activeCrosshair) activeCrosshair.classList.add('comic-effect');
        if (particlesEnabled) particleCanvas.classList.add('comic-effect');
        if (trailEffectEnabled && isVip) trailCanvas.classList.add('comic-effect');
      } else {
        if (activeCrosshair) activeCrosshair.classList.remove('comic-effect');
        particleCanvas.classList.remove('comic-effect');
        trailCanvas.classList.remove('comic-effect');
      }
      panel.querySelector('#comicToggle').textContent = comicEffectEnabled ? 'Disable Comic Effect' : 'Toggle Comic Effect';
    });

    panel.querySelector('#comicIntensity').addEventListener('input', (e) => {
      comicIntensity = parseFloat(e.target.value);
      document.querySelectorAll('.comic-effect::after').forEach(el => {
        if (el) el.style.opacity = comicIntensity;
      });
    });

    // Glitch Effect
    panel.querySelector('#glitchToggle').addEventListener('click', () => {
      glitchEnabled = !glitchEnabled;
      glitch.style.opacity = glitchEnabled ? glitchIntensity : '0';
      panel.querySelector('#glitchToggle').textContent = glitchEnabled ? 'Disable Glitch' : 'Toggle Glitch';
    });

    panel.querySelector('#glitchIntensity').addEventListener('input', (e) => {
      glitchIntensity = parseFloat(e.target.value);
      if (glitchEnabled) glitch.style.opacity = glitchIntensity;
    });

    // Vignette Effect
    panel.querySelector('#vignetteToggle').addEventListener('click', () => {
      vignetteEnabled = !vignetteEnabled;
      vignette.style.opacity = vignetteEnabled ? vignetteOpacity : '0';
      panel.querySelector('#vignetteToggle').textContent = vignetteEnabled ? 'Disable Vignette' : 'Toggle Vignette';
    });

    panel.querySelector('#vignetteOpacity').addEventListener('input', (e) => {
      vignetteOpacity = parseFloat(e.target.value);
      if (vignetteEnabled) vignette.style.opacity = vignetteOpacity;
    });

    // Virtual Keyboard Functionality
    const vipCodeInput = panel.querySelector('#vipCodeInput');
    vipCodeInput.addEventListener('click', () => {
      keyboard.style.display = 'flex';
    });

    keyboard.querySelectorAll('button').forEach(btn => {
      btn.addEventListener('click', () => {
        const value = btn.textContent;
        if (value === 'Space') {
          vipCodeInput.value += ' ';
        } else if (value === '⌫') {
          vipCodeInput.value = vipCodeInput.value.slice(0, -1);
        } else if (value === 'Close') {
          keyboard.style.display = 'none';
        } else {
          vipCodeInput.value += value;
        }
      });
    });

    // VIP Features Unlock
    panel.querySelector('#checkCode').addEventListener('click', () => {
      const code = vipCodeInput.value.trim().toUpperCase();
      if (code === 'JUSTKOUR') {
        isVip = true;
        panel.querySelector('#vipMessage').style.display = 'block';
        for (let i = 4; i <= 16; i++) {
          const btn = panel.querySelector(`#cross${i}`);
          if (btn) btn.style.display = 'block';
        }
        panel.querySelector('#confettiToggle').style.display = 'block';
        panel.querySelector('#confettiAmount').style.display = 'block';
        panel.querySelector('#hitmarkerToggle').style.display = 'block';
        panel.querySelector('#hitmarkerSize').style.display = 'block';
        panel.querySelector('#screenFlashToggle').style.display = 'block';
        panel.querySelector('#screenFlashIntensity').style.display = 'block';
        panel.querySelector('#laserBeamToggle').style.display = 'block';
        panel.querySelector('#laserBeamWidth').style.display = 'block';
        panel.querySelector('#shockwaveToggle').style.display = 'block';
        panel.querySelector('#shockwaveSize').style.display = 'block';
        panel.querySelector('#glowEffectToggle').style.display = 'block';
        panel.querySelector('#glowIntensity').style.display = 'block';
        panel.querySelector('#trailEffectToggle').style.display = 'block';
        panel.querySelector('#trailLength').style.display = 'block';
        panel.querySelector('#soundEffectToggle').style.display = 'block';
        panel.querySelector('#soundVolume').style.display = 'block';
        panel.querySelector('#crosshairColorToggle').style.display = 'block';
        panel.querySelector('#colorChangeSpeed').style.display = 'block';
        panel.querySelector('#dynamicZoomToggle').style.display = 'block';
        panel.querySelector('#zoomSensitivity').style.display = 'block';
        alert('VIP Unlocked! Enjoy the exclusive features.');
        const activeCrosshair = [...Object.values(crosshairs), chCustom].find(ch => ch.style.display === 'block');
        if (activeCrosshair) {
          const crosshairRect = activeCrosshair.getBoundingClientRect();
          initConfetti(crosshairRect.left + crosshairRect.width / 2, crosshairRect.top + crosshairRect.height / 2);
        } else {
          initConfetti();
        }
        animateConfetti();
        keyboard.style.display = 'none';
      } else {
        alert('Invalid code! Please enter JUSTKOUR to unlock VIP features.');
      }
    });

    // VIP Shoot Effects
    panel.querySelector('#confettiToggle').addEventListener('click', () => {
      confettiEnabled = !confettiEnabled;
      panel.querySelector('#confettiToggle').textContent = confettiEnabled ? 'Disable Confetti on Shoot' : 'Toggle Confetti on Shoot';
    });

    panel.querySelector('#confettiAmount').addEventListener('input', (e) => {
      confettiAmount = parseInt(e.target.value);
    });

    panel.querySelector('#hitmarkerToggle').addEventListener('click', () => {
      hitmarkerEnabled = !hitmarkerEnabled;
      panel.querySelector('#hitmarkerToggle').textContent = hitmarkerEnabled ? 'Disable Hitmarker' : 'Toggle Hitmarker';
    });

    panel.querySelector('#hitmarkerSize').addEventListener('input', (e) => {
      hitmarkerSize = parseInt(e.target.value);
      hitmarker.style.width = `${hitmarkerSize}px`;
      hitmarker.style.height = `${hitmarkerSize}px`;
    });

    panel.querySelector('#screenFlashToggle').addEventListener('click', () => {
      screenFlashEnabled = !screenFlashEnabled;
      panel.querySelector('#screenFlashToggle').textContent = screenFlashEnabled ? 'Disable Screen Flash' : 'Toggle Screen Flash';
    });

    panel.querySelector('#screenFlashIntensity').addEventListener('input', (e) => {
      screenFlashIntensity = parseFloat(e.target.value);
    });

    panel.querySelector('#laserBeamToggle').addEventListener('click', () => {
      laserBeamEnabled = !laserBeamEnabled;
      panel.querySelector('#laserBeamToggle').textContent = laserBeamEnabled ? 'Disable Laser Beam' : 'Toggle Laser Beam';
    });

    panel.querySelector('#laserBeamWidth').addEventListener('input', (e) => {
      laserBeamWidth = parseInt(e.target.value);
      laserBeam.style.width = `${laserBeamWidth}px`;
    });

    panel.querySelector('#shockwaveToggle').addEventListener('click', () => {
      shockwaveEnabled = !shockwaveEnabled;
      panel.querySelector('#shockwaveToggle').textContent = shockwaveEnabled ? 'Disable Shockwave' : 'Toggle Shockwave';
    });

    panel.querySelector('#shockwaveSize').addEventListener('input', (e) => {
      shockwaveSize = parseInt(e.target.value);
    });

    // VIP Visual Enhancements
    panel.querySelector('#glowEffectToggle').addEventListener('click', () => {
      glowEffectEnabled = !glowEffectEnabled;
      const activeCrosshair = [...Object.values(crosshairs), chCustom].find(ch => ch.style.display === 'block');
      if (activeCrosshair) {
        if (glowEffectEnabled) {
          activeCrosshair.style.boxShadow = `0 0 ${glowIntensity}px #ff00ff`;
        } else {
          activeCrosshair.style.boxShadow = '';
        }
      }
      panel.querySelector('#glowEffectToggle').textContent = glowEffectEnabled ? 'Disable Crosshair Glow' : 'Toggle Crosshair Glow';
    });

    panel.querySelector('#glowIntensity').addEventListener('input', (e) => {
      glowIntensity = parseInt(e.target.value);
      const activeCrosshair = [...Object.values(crosshairs), chCustom].find(ch => ch.style.display === 'block');
      if (activeCrosshair && glowEffectEnabled) {
        activeCrosshair.style.boxShadow = `0 0 ${glowIntensity}px #ff00ff`;
      }
    });

    panel.querySelector('#trailEffectToggle').addEventListener('click', () => {
      trailEffectEnabled = !trailEffectEnabled;
      panel.querySelector('#trailEffectToggle').textContent = trailEffectEnabled ? 'Disable Crosshair Trail' : 'Toggle Crosshair Trail';
    });

    panel.querySelector('#trailLength').addEventListener('input', (e) => {
      trailLength = parseInt(e.target.value);
    });

    panel.querySelector('#soundEffectToggle').addEventListener('click', () => {
      soundEffectEnabled = !soundEffectEnabled;
      panel.querySelector('#soundEffectToggle').textContent = soundEffectEnabled ? 'Disable Shoot Sound' : 'Toggle Shoot Sound';
    });

    panel.querySelector('#soundVolume').addEventListener('input', (e) => {
      soundVolume = parseFloat(e.target.value);
      shootSound.volume = soundVolume;
    });

        panel.querySelector('#crosshairColorToggle').addEventListener('click', () => {
      crosshairColorEnabled = !crosshairColorEnabled;
      panel.querySelector('#crosshairColorToggle').textContent = crosshairColorEnabled ? 'Disable Crosshair Color Change' : 'Toggle Crosshair Color Change';
    });

    panel.querySelector('#colorChangeSpeed').addEventListener('input', (e) => {
      colorChangeSpeed = parseInt(e.target.value);
    });

    panel.querySelector('#dynamicZoomToggle').addEventListener('click', () => {
      dynamicZoomEnabled = !dynamicZoomEnabled;
      panel.querySelector('#dynamicZoomToggle').textContent = dynamicZoomEnabled ? 'Disable Dynamic Zoom' : 'Toggle Dynamic Zoom';
    });

    panel.querySelector('#zoomSensitivity').addEventListener('input', (e) => {
      zoomSensitivity = parseFloat(e.target.value);
    });

    // Crosshair Color Change Animation
    const updateCrosshairColor = () => {
      if (crosshairColorEnabled && isVip) {
        crosshairHue = (crosshairHue + colorChangeSpeed) % 360;
        const activeCrosshair = [...Object.values(crosshairs), chCustom].find(ch => ch.style.display === 'block');
        if (activeCrosshair) {
          activeCrosshair.style.filter = `hue-rotate(${crosshairHue}deg)`;
        }
      }
      requestAnimationFrame(updateCrosshairColor);
    };
    updateCrosshairColor();

    // Dynamic Zoom on Mouse Move
    let baseCrosshairSize = 80;
    const updateDynamicZoom = (e) => {
      if (dynamicZoomEnabled && isVip) {
        const activeCrosshair = [...Object.values(crosshairs), chCustom].find(ch => ch.style.display === 'block');
        if (activeCrosshair) {
          const centerX = window.innerWidth / 2;
          const centerY = window.innerHeight / 2;
          const distance = Math.sqrt(Math.pow(e.clientX - centerX, 2) + Math.pow(e.clientY - centerY, 2));
          const zoomFactor = 1 - (distance / (window.innerWidth / 2)) * zoomSensitivity * 0.3;
          const newSize = baseCrosshairSize * Math.max(0.5, zoomFactor);
          activeCrosshair.style.width = `${newSize}px`;
          activeCrosshair.style.height = `${newSize}px`;
        }
      }
    };

    // Trail Effect on Mouse Move
    const updateTrailOnMove = (e) => {
      if (trailEffectEnabled && isVip) {
        const activeCrosshair = [...Object.values(crosshairs), chCustom].find(ch => ch.style.display === 'block');
        if (activeCrosshair) {
          const crosshairRect = activeCrosshair.getBoundingClientRect();
          trailPositions.push({
            x: crosshairRect.left + crosshairRect.width / 2,
            y: crosshairRect.top + crosshairRect.height / 2,
            opacity: 1
          });
          if (trailPositions.length > trailLength) {
            trailPositions.shift();
          }
        }
      }
    };

    // Mouse Move Events
    document.addEventListener('mousemove', (e) => {
      updateDynamicZoom(e);
      updateTrailOnMove(e);
    });

    // Shoot Effects on Mouse Down
    document.addEventListener('mousedown', (e) => {
      if (isVip) {
        const activeCrosshair = [...Object.values(crosshairs), chCustom].find(ch => ch.style.display === 'block');
        if (confettiEnabled) {
          if (activeCrosshair) {
            const crosshairRect = activeCrosshair.getBoundingClientRect();
            initConfetti(
              crosshairRect.left + crosshairRect.width / 2,
              crosshairRect.top + crosshairRect.height / 2
            );
          } else {
            initConfetti();
          }
          animateConfetti();
        }
        if (hitmarkerEnabled) {
          hitmarker.style.opacity = '1';
          setTimeout(() => {
            hitmarker.style.opacity = '0';
          }, 200);
        }
        if (screenFlashEnabled) {
          screenFlash.style.opacity = screenFlashIntensity;
          setTimeout(() => {
            screenFlash.style.opacity = '0';
          }, 100);
        }
        if (laserBeamEnabled) {
          laserBeam.style.opacity = '1';
          setTimeout(() => {
            laserBeam.style.opacity = '0';
          }, 50);
        }
        if (shockwaveEnabled) {
          shockwave.style.width = '0';
          shockwave.style.height = '0';
          shockwave.style.opacity = '1';
          shockwave.style.animation = 'none';
          setTimeout(() => {
            shockwave.style.width = `${shockwaveSize}px`;
            shockwave.style.height = `${shockwaveSize}px`;
            shockwave.style.opacity = '0';
            shockwave.style.animation = 'shockwaveExpand 0.5s ease forwards';
          }, 10);
        }
        if (soundEffectEnabled) {
          shootSound.currentTime = 0;
          shootSound.play();
        }
      }
    });

    // Crosshair Size Update (to sync with dynamic zoom base size)
    panel.querySelector('#crosshairSize').addEventListener('input', (e) => {
      baseCrosshairSize = parseInt(e.target.value);
      Object.values(crosshairs).forEach(ch => {
        ch.style.width = `${baseCrosshairSize}px`;
        ch.style.height = `${baseCrosshairSize}px`;
      });
      chCustom.style.width = `${baseCrosshairSize}px`;
      chCustom.style.height = `${baseCrosshairSize}px`;
    });
  };
  setupEventListeners();

  // === INITIALIZATION ===
  const initialize = () => {
    gearIcon.style.display = 'block';
    panel.classList.remove('hidden');
    window.addEventListener('resize', () => {
      confettiCanvas.width = window.innerWidth;
      confettiCanvas.height = window.innerHeight;
      particleCanvas.width = window.innerWidth;
      particleCanvas.height = window.innerHeight;
      trailCanvas.width = window.innerWidth;
      trailCanvas.height = window.innerHeight;
    });
  };
  initialize();
})();

<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>