<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="robots" content="noindex, nofollow, noarchive" />
  <title>404 - Are You Lost?</title>
  <style>
    body {
      background-color: black;
      color: #00FF00;
      font-family: 'Courier New', Courier, monospace;
      white-space: pre;
      padding: 20px;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-height: 100vh;
      margin: 0;
      overflow: hidden;
      position: relative;
    }

    .screen {
      width: 100%;
      max-width: 1200px;
      padding: 20px;
      position: relative;
      z-index: 2;
    }

    .ascii-art-wrapper {
      width: 100%;
      overflow-x: auto;
      display: flex;
      justify-content: center;
    }

    .ascii-art {
      text-align: center;
      font-size: 12px;
      transform: scale(1);
      transform-origin: top center;
      display: inline-block;
    }

    @media (max-width: 1000px) {
      .ascii-art { transform: scale(0.9); }
    }

    @media (max-width: 600px) {
      .ascii-art { transform: scale(0.75); }
    }

    @media (max-width: 400px) {
      .ascii-art { transform: scale(0.5); }
    }

    .console {
      text-align: center;
      margin-top: 20px;
      font-size: 12px;
    }

    .cursor {
      display: inline-block;
      width: 10px;
      animation: blink 1s step-start infinite;
    }

    @keyframes blink {
      50% { opacity: 0; }
    }

    /* CRT overlay */
    .crt-overlay {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 3;
      background: repeating-linear-gradient(
        to bottom,
        rgba(0, 255, 0, 0.03) 0px,
        rgba(0, 255, 0, 0.03) 1px,
        transparent 1px,
        transparent 2px
      );
      animation: flicker 0.15s infinite;
    }

    @keyframes flicker {
      0%, 100% { opacity: 0.97; }
      50% { opacity: 0.9; }
    }

    .glitch-burst {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background: black;
      opacity: 0;
      z-index: 4;
      mix-blend-mode: difference;
      animation: glitchFlash 0.25s linear forwards;
    }

    @keyframes glitchFlash {
      0% { opacity: 0.6; }
      100% { opacity: 0; }
    }
  </style>
</head>
<body>
  <div class="screen">
    <div class="ascii-art-wrapper">
      <div class="ascii-art" id="ascii-art"></div>
    </div>
    <div class="console" id="console"></div>
  </div>

  <div class="crt-overlay"></div>

  <script>
    const asciiArt = `
                                                                    
_█████╗ ██████╗ ███████╗    ██╗   ██╗ ██████╗ ██╗   ██╗
██╔══██╗██╔══██╗██╔════╝    ╚██╗ ██╔╝██╔═══██╗██║   ██║
███████║██████╔╝█████╗       ╚████╔╝ ██║   ██║██║   ██║
██╔══██║██╔══██╗██╔══╝        ╚██╔╝  ██║   ██║██║   ██║
██║  ██║██║  ██║███████╗       ██║   ╚██████╔╝╚██████╔╝
╚═╝  ╚═╝╚═╝  ╚═╝╚══════╝       ╚═╝    ╚═════╝  ╚═════╝ 
                                                       
           ██╗      ██████╗ ███████╗████████╗██████╗              
           ██║     ██╔═══██╗██╔════╝╚══██╔══╝╚════██╗             
           ██║     ██║   ██║███████╗   ██║     ▄███╔╝             
           ██║     ██║   ██║╚════██║   ██║     ▀▀══╝              
           ███████╗╚██████╔╝███████║   ██║     ██╗                
           ╚══════╝ ╚═════╝ ╚══════╝   ╚═╝     ╚═╝                

						_`;
    const asciiLines = asciiArt.trim().split("\n");
    const asciiContainer = document.getElementById('ascii-art');
    const consoleDiv = document.getElementById('console');

    asciiLines.forEach((line, index) => {
      setTimeout(() => {
        const div = document.createElement('div');
        div.textContent = line;
        asciiContainer.appendChild(div);
      }, index * 30);
    });

    setTimeout(() => {
      const line = document.createElement('div');
      line.className = 'console-line';
      line.textContent = "C:\\ImmortalKing\\404\\>";
      const cursor = document.createElement('span');
      cursor.className = 'cursor';
      cursor.textContent = "_";
      line.appendChild(cursor);
      consoleDiv.appendChild(line);
    }, asciiLines.length * 30 + 500);

    function corruptAsciiArt(strong = false) {
      const lines = asciiContainer.querySelectorAll('div');
      if (lines.length === 0) return;

      const count = strong ? 20 : Math.floor(Math.random() * 3) + 1;
      for (let i = 0; i < count; i++) {
        const line = lines[Math.floor(Math.random() * lines.length)];
        const text = line.textContent;
        if (!text.length) continue;

        const index = Math.floor(Math.random() * text.length);
        const chars = '!@#$%^&*()_+=-{}[]|:;<>?,./~ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        const corrupted = chars[Math.floor(Math.random() * chars.length)];
        const newText = text.substring(0, index) + corrupted + text.substring(index + 1);
        line.textContent = newText;

        setTimeout(() => {
          const idx = Array.from(lines).indexOf(line);
          line.textContent = asciiLines[idx] || '';
        }, strong ? 600 : 200);
      }
    }

    function glitchBurst() {
      corruptAsciiArt(true);
      const flash = document.createElement('div');
      flash.className = 'glitch-burst';
      document.body.appendChild(flash);
      setTimeout(() => flash.remove(), 300);
    }

    setInterval(() => corruptAsciiArt(false), 1200);
    setInterval(glitchBurst, 15000 + Math.random() * 5000);
  </script>
</body>
</html>
