<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Volcano Base ~ [Template]</title>
    <style>
        /* --- 1. CORE VOLCANO ANIMATIONS --- */
        
        /* Bubbling Magma Glow */
        @keyframes magmaPulse {
            0% { border-color: #ff4500; box-shadow: 0 0 10px #8b0000; }
            50% { border-color: #ff8c00; box-shadow: 0 0 25px #ff4500; }
            100% { border-color: #ff4500; box-shadow: 0 0 10px #8b0000; }
        }

        /* Falling Ash Particles */
        @keyframes ashFall {
            0% { transform: translateY(-10vh) translateX(0); opacity: 0; }
            50% { opacity: 0.8; }
            100% { transform: translateY(110vh) translateX(20px); opacity: 0; }
        }

        /* Heat Haze (Slight Warping) */
        @keyframes heatHaze {
            0%, 100% { transform: skewX(0deg) scale(1); }
            50% { transform: skewX(1deg) scale(1.01); }
        }

        /* --- 2. BASE STYLING --- */
        body {
            background-color: #0d0200; /* Deep Obsidian */
            color: #ffdbca;
            font-family: 'Courier New', Courier, monospace;
            margin: 0;
            padding: 20px;
            overflow-x: hidden;
        }

        /* Tiled Lava Floor Background (Bottom Only) */
        body::after {
            content: "";
            position: fixed;
            bottom: 0; left: 0;
            width: 100%; height: 100px;
            background: linear-gradient(0deg, #ff4500, transparent);
            z-index: -1;
            opacity: 0.3;
        }

        /* --- 3. THE ASH OVERLAY --- */
        .ash-container {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            pointer-events: none;
            z-index: 99;
        }

        .ash {
            position: absolute;
            background: rgba(255, 255, 255, 0.2);
            width: 3px; height: 3px;
            border-radius: 50%;
            animation: ashFall linear infinite;
        }

        /* --- 4. LAYOUT ELEMENTS --- */
        .magma-container {
            max-width: 800px;
            margin: 40px auto;
            background: rgba(20, 5, 0, 0.9);
            border: 4px solid #ff4500;
            padding: 30px;
            animation: magmaPulse 3s infinite ease-in-out;
            position: relative;
        }

        h1 {
            color: #ff4500;
            text-align: center;
            font-size: 3.5em;
            text-transform: uppercase;
            margin: 0;
            text-shadow: 3px 3px 0px #4b0000, 0 0 15px #ff4500;
            animation: heatHaze 2s infinite alternate;
        }

        .warning-bar {
            background: #ff4500;
            color: #000;
            font-weight: bold;
            text-align: center;
            padding: 5px;
            margin: 20px -30px; /* Bleeds out of padding */
            transform: rotate(-1deg);
        }

        .grid-layout {
            display: grid;
            grid-template-columns: 1fr 200px;
            gap: 20px;
            margin-top: 20px;
        }

        /* Sidebar Window */
        .side-panel {
            border: 2px solid #8b0000;
            background: #1a0800;
            padding: 10px;
        }

        .side-panel h3 {
            background: #8b0000;
            color: #fff;
            margin: -10px -10px 10px -10px;
            padding: 5px;
            font-size: 0.9em;
            text-align: center;
        }

        /* Links */
        a { color: #ff8c00; text-decoration: none; border-bottom: 1px dashed; }
        a:hover { color: #ffffff; background: #8b0000; }

        .btn-zone {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 20px;
            filter: drop-shadow(0 0 5px #ff4500);
        }

        .btn-zone img { margin: 5px; border: 1px solid #ff4500; }
        
        iframe {
                border: 1px solid black;
                width: 100%;
        }
    </style>
<style class="injected-cursor-style">* { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ctext y='20' font-size='20'%3E👻%3C/text%3E%3C/svg%3E"), auto !important; }</style><!-- CRT SCANLINE OVERLAY -->

<!-- CRT SCANLINE OVERLAY -->

<!-- Y2K CHECKERBOARD BACKGROUND -->
<!-- CRT SCANLINE OVERLAY -->

<!-- Y2K CHECKERBOARD BACKGROUND -->
<!-- VAPORWAVE GRID BACKGROUND -->

<!-- PARALLAX SCROLLING STARS -->

<!-- PURE CSS TV STATIC -->

<!-- PURE CSS SNOWFALL -->

<!-- CSS FLOATING BUBBLES -->

<!-- PURE CSS WARP SPEED -->

<!-- PURE CSS BOUNCING SCREENSAVER -->

<!-- PURE CSS CYBERPUNK SCANNER -->

<!-- PURE CSS NEON STRIPES -->

<!-- PURE CSS PLASMA ORBS -->

<!-- CRT SCANLINE OVERLAY -->

<!-- Y2K CHECKERBOARD BACKGROUND -->
<!-- CRT SCANLINE OVERLAY -->
<style class="injected-bg-style">
.crt-overlay { pointer-events: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 2px, 3px 100%; }
</style>
</head>