404.html

---
layout: default
title: 404 - Level Not Found
---

<div class="flex flex-col items-center justify-center text-center py-20 md:py-32">
    
    <!-- Neon Gamepad Icon with Pulse Animation -->
    <div class="mb-8 animate-pulse text-pink-500">
        <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="drop-shadow-[0_0_15px_rgba(236,72,153,0.8)]">
            <rect x="2" y="6" width="20" height="12" rx="2" ry="2"></rect>
            <path d="M6 12h4"></path>
            <path d="M8 10v4"></path>
            <line x1="15" y1="13" x2="15.01" y2="13" stroke-width="3"></line>
            <line x1="18" y1="11" x2="18.01" y2="11" stroke-width="3"></line>
        </svg>
    </div>

    <!-- Arcade Glitch Header -->
    <h1 class="font-mono text-7xl md:text-9xl font-black text-transparent bg-clip-text bg-gradient-to-r from-pink-500 via-purple-500 to-cyan-500 mb-4 tracking-tighter drop-shadow-sm">
        404
    </h1>
    <h2 class="font-mono text-2xl md:text-3xl font-bold uppercase tracking-widest mb-6 text-slate-800 dark:text-slate-200">
        Level Not Found
    </h2>
    
    <p class="text-lg text-slate-600 dark:text-slate-400 max-w-xl mx-auto mb-12 leading-relaxed">
        It looks like you've glitched outside the playable area, or perhaps the princess is in another castle. The requested URL does not exist in the current simulation.
    </p>

    <!-- Retro Button -->
    <a href="{{ '/' | relative_url }}" class="group relative inline-flex items-center justify-center px-8 py-4 font-mono font-bold text-pink-500 uppercase tracking-widest border-2 border-pink-500 hover:bg-pink-500 hover:text-white transition-all duration-300 gap-3 rounded-sm shadow-[0_0_15px_rgba(236,72,153,0.3)] hover:shadow-[0_0_25px_rgba(236,72,153,0.6)]">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
        Respawn at Start Menu
    </a>

</div>