/* =====================================================
   BOSS BATTLE SYSTEM - Neomon Style Pixel Combat
   The Codex of Neovim
   ===================================================== */

/* ==================== RETRO COLOR PALETTE ==================== */
:root {
    /* Retro GBA inspired palette */
    --pixel-black: #0f0f0f;
    --pixel-white: #f8f8f8;
    --pixel-red: #e03030;
    --pixel-blue: #3050f8;
    --pixel-green: #30a030;
    --pixel-yellow: #f8d030;
    --pixel-gray: #a0a0a0;
    --pixel-gray-dark: #505050;
    --pixel-brown: #a05000;
    --pixel-purple: #9040d0;

    /* HP bar colors */
    --hp-high: #30a030;
    --hp-mid: #f8d030;
    --hp-low: #e03030;

    /* Battle UI colors */
    --pixel-border: #303030;
    --pixel-bg: #f8f8f8;
    --pixel-text-box: #f8f8f8;
    --pixel-shadow: #181818;

    /* Pixel font */
    --font-pixel: 'Press Start 2P', monospace;
}

/* ==================== PIXEL SPRITE SYSTEM ==================== */
/* Base pixel sprite class - scaled up for visibility */
.pixel-sprite {
    width: 4px;
    height: 4px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    transform: scale(3);
    transform-origin: top left;
    /* Offset to visually center the sprite (box-shadow expands right/down) */
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;  /* Adjusted for visual center of sprite artwork */
    margin-top: -30px;
}

/* Sprite wrapper to contain scaled sprite */
.sprite-wrapper {
    width: 80px;
    height: 80px;
    overflow: visible;
    position: relative;
    transform: scale(3);
    transform-origin: center center;
}

/* Player sprite - using img tag */
.player-sprite-img {
    width: 400px;
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Neomon sprite - using img tag */
.neomon-sprite-img {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    transform: scale(0.6) translateX(850px);
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Emoji sprite for Neomons */
.emoji-sprite {
    font-size: 280px;
    line-height: 1;
    text-align: center;
    display: block;
    filter: drop-shadow(6px 6px 0 rgba(0,0,0,0.4));
    animation: emojiFloat 2s ease-in-out infinite;
    position: relative;
    z-index: 100;
}

@keyframes emojiFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* GOLEM SPRITE - Rocky stone creature */
.sprite-golem {
    background: #705848;
    box-shadow:
        /* Row 0 - top */
        16px 0 #705848, 20px 0 #705848, 24px 0 #705848, 28px 0 #705848,
        /* Row 1 */
        12px 4px #705848, 16px 4px #a08878, 20px 4px #a08878, 24px 4px #a08878, 28px 4px #a08878, 32px 4px #705848,
        /* Row 2 - eyes */
        8px 8px #705848, 12px 8px #a08878, 16px 8px #ff0000, 20px 8px #a08878, 24px 8px #a08878, 28px 8px #ff0000, 32px 8px #a08878, 36px 8px #705848,
        /* Row 3 */
        8px 12px #705848, 12px 12px #a08878, 16px 12px #a08878, 20px 12px #a08878, 24px 12px #a08878, 28px 12px #a08878, 32px 12px #a08878, 36px 12px #705848,
        /* Row 4 - mouth */
        8px 16px #705848, 12px 16px #a08878, 16px 16px #403020, 20px 16px #403020, 24px 16px #403020, 28px 16px #403020, 32px 16px #a08878, 36px 16px #705848,
        /* Row 5 */
        4px 20px #705848, 8px 20px #a08878, 12px 20px #a08878, 16px 20px #a08878, 20px 20px #a08878, 24px 20px #a08878, 28px 20px #a08878, 32px 20px #a08878, 36px 20px #a08878, 40px 20px #705848,
        /* Row 6 - body */
        4px 24px #705848, 8px 24px #a08878, 12px 24px #c0a890, 16px 24px #c0a890, 20px 24px #c0a890, 24px 24px #c0a890, 28px 24px #c0a890, 32px 24px #c0a890, 36px 24px #a08878, 40px 24px #705848,
        /* Row 7 */
        4px 28px #705848, 8px 28px #a08878, 12px 28px #c0a890, 16px 28px #c0a890, 20px 28px #c0a890, 24px 28px #c0a890, 28px 28px #c0a890, 32px 28px #c0a890, 36px 28px #a08878, 40px 28px #705848,
        /* Row 8 - arms start */
        0 32px #705848, 4px 32px #a08878, 8px 32px #a08878, 12px 32px #c0a890, 16px 32px #c0a890, 20px 32px #c0a890, 24px 32px #c0a890, 28px 32px #c0a890, 32px 32px #c0a890, 36px 32px #a08878, 40px 32px #a08878, 44px 32px #705848,
        /* Row 9 */
        0 36px #705848, 4px 36px #a08878, 8px 36px #705848, 12px 36px #a08878, 16px 36px #c0a890, 20px 36px #c0a890, 24px 36px #c0a890, 28px 36px #c0a890, 32px 36px #a08878, 36px 36px #705848, 40px 36px #a08878, 44px 36px #705848,
        /* Row 10 */
        0 40px #705848, 4px 40px #705848, 12px 40px #a08878, 16px 40px #c0a890, 20px 40px #c0a890, 24px 40px #c0a890, 28px 40px #c0a890, 32px 40px #a08878, 44px 40px #705848, 40px 40px #705848,
        /* Row 11 - legs */
        12px 44px #705848, 16px 44px #a08878, 20px 44px #a08878, 24px 44px #a08878, 28px 44px #a08878, 32px 44px #705848,
        /* Row 12 */
        8px 48px #705848, 12px 48px #a08878, 16px 48px #a08878, 20px 48px #705848, 24px 48px #705848, 28px 48px #a08878, 32px 48px #a08878, 36px 48px #705848,
        /* Row 13 - feet */
        4px 52px #705848, 8px 52px #a08878, 12px 52px #a08878, 16px 52px #705848, 28px 52px #705848, 32px 52px #a08878, 36px 52px #a08878, 40px 52px #705848,
        4px 56px #705848, 8px 56px #705848, 12px 56px #705848, 32px 56px #705848, 36px 56px #705848, 40px 56px #705848;
}

/* DRAGON SPRITE - Red/orange dragon */
.sprite-dragon {
    background: #d04020;
    box-shadow:
        /* Head */
        24px 0 #d04020, 28px 0 #d04020,
        20px 4px #d04020, 24px 4px #f06040, 28px 4px #f06040, 32px 4px #d04020,
        16px 8px #d04020, 20px 8px #f06040, 24px 8px #ffffff, 28px 8px #f06040, 32px 8px #d04020, 36px 8px #d04020,
        12px 12px #d04020, 16px 12px #f06040, 20px 12px #f06040, 24px 12px #f06040, 28px 12px #f06040, 32px 12px #f06040, 36px 12px #d04020,
        /* Mouth */
        8px 16px #d04020, 12px 16px #f06040, 16px 16px #800000, 20px 16px #f06040, 24px 16px #f06040, 28px 16px #f06040, 32px 16px #d04020,
        /* Neck */
        12px 20px #d04020, 16px 20px #f06040, 20px 20px #f06040, 24px 20px #f06040, 28px 20px #d04020,
        /* Wings */
        0 24px #d04020, 4px 24px #f06040, 8px 24px #f06040, 12px 24px #d04020, 16px 24px #f06040, 20px 24px #f06040, 24px 24px #f06040, 28px 24px #d04020, 32px 24px #f06040, 36px 24px #f06040, 40px 24px #f06040, 44px 24px #d04020,
        0 28px #d04020, 4px 28px #f08060, 8px 28px #d04020, 16px 28px #f06040, 20px 28px #f08060, 24px 28px #f06040, 32px 28px #d04020, 36px 28px #f08060, 40px 28px #f06040, 44px 28px #d04020,
        /* Body */
        16px 32px #d04020, 20px 32px #f06040, 24px 32px #f08060, 28px 32px #f06040, 32px 32px #d04020,
        16px 36px #d04020, 20px 36px #f06040, 24px 36px #f06040, 28px 36px #f06040, 32px 36px #d04020,
        /* Legs */
        12px 40px #d04020, 16px 40px #f06040, 20px 40px #d04020, 28px 40px #d04020, 32px 40px #f06040, 36px 40px #d04020,
        8px 44px #d04020, 12px 44px #f06040, 16px 44px #d04020, 32px 44px #d04020, 36px 44px #f06040, 40px 44px #d04020,
        /* Tail */
        36px 48px #d04020, 40px 48px #f06040, 44px 48px #d04020,
        40px 52px #d04020, 44px 52px #f06040, 48px 52px #d04020,
        44px 56px #d04020, 48px 56px #d04020;
}

/* WIZARD SPRITE - Purple robed mage */
.sprite-wizard {
    background: #6030a0;
    box-shadow:
        /* Hat tip */
        24px 0 #6030a0,
        20px 4px #6030a0, 24px 4px #8050c0, 28px 4px #6030a0,
        16px 8px #6030a0, 20px 8px #8050c0, 24px 8px #8050c0, 28px 8px #8050c0, 32px 8px #6030a0,
        /* Hat brim */
        8px 12px #6030a0, 12px 12px #8050c0, 16px 12px #8050c0, 20px 12px #8050c0, 24px 12px #8050c0, 28px 12px #8050c0, 32px 12px #8050c0, 36px 12px #8050c0, 40px 12px #6030a0,
        /* Face */
        16px 16px #f0c0a0, 20px 16px #f0c0a0, 24px 16px #f0c0a0, 28px 16px #f0c0a0, 32px 16px #f0c0a0,
        16px 20px #f0c0a0, 20px 20px #000000, 24px 20px #f0c0a0, 28px 20px #000000, 32px 20px #f0c0a0,
        16px 24px #f0c0a0, 20px 24px #f0c0a0, 24px 24px #f0c0a0, 28px 24px #f0c0a0, 32px 24px #f0c0a0,
        20px 28px #ffffff, 24px 28px #ffffff, 28px 28px #ffffff,
        /* Robe */
        12px 32px #6030a0, 16px 32px #8050c0, 20px 32px #8050c0, 24px 32px #8050c0, 28px 32px #8050c0, 32px 32px #8050c0, 36px 32px #6030a0,
        8px 36px #6030a0, 12px 36px #8050c0, 16px 36px #8050c0, 20px 36px #f0d030, 24px 36px #8050c0, 28px 36px #f0d030, 32px 36px #8050c0, 36px 36px #8050c0, 40px 36px #6030a0,
        8px 40px #6030a0, 12px 40px #8050c0, 16px 40px #8050c0, 20px 40px #8050c0, 24px 40px #8050c0, 28px 40px #8050c0, 32px 40px #8050c0, 36px 40px #8050c0, 40px 40px #6030a0,
        /* Staff - on the side */
        0 20px #a06020, 0 24px #a06020, 0 28px #a06020, 0 32px #a06020, 0 36px #a06020, 0 40px #a06020, 0 44px #a06020, 0 48px #a06020,
        4px 16px #50f0f0, 0 16px #50f0f0, -4px 16px #50f0f0, 0 12px #50f0f0,
        /* Robe bottom */
        4px 44px #6030a0, 8px 44px #8050c0, 12px 44px #8050c0, 16px 44px #8050c0, 20px 44px #8050c0, 24px 44px #8050c0, 28px 44px #8050c0, 32px 44px #8050c0, 36px 44px #8050c0, 40px 44px #8050c0, 44px 44px #6030a0,
        4px 48px #6030a0, 8px 48px #8050c0, 12px 48px #8050c0, 16px 48px #6030a0, 20px 48px #6030a0, 24px 48px #6030a0, 28px 48px #6030a0, 32px 48px #6030a0, 36px 48px #8050c0, 40px 48px #8050c0, 44px 48px #6030a0,
        /* Feet */
        12px 52px #2020a0, 16px 52px #2020a0, 32px 52px #2020a0, 36px 52px #2020a0;
}

/* SERPENT SPRITE - Green coiled snake */
.sprite-serpent {
    background: #208020;
    box-shadow:
        /* Head */
        8px 8px #208020, 12px 8px #40a040, 16px 8px #40a040, 20px 8px #208020,
        4px 12px #208020, 8px 12px #40a040, 12px 12px #ff0000, 16px 12px #40a040, 20px 12px #ff0000, 24px 12px #208020,
        4px 16px #208020, 8px 16px #40a040, 12px 16px #40a040, 16px 16px #40a040, 20px 16px #40a040, 24px 16px #208020,
        8px 20px #208020, 12px 20px #40a040, 16px 20px #40a040, 20px 20px #208020,
        /* Body coils */
        12px 24px #208020, 16px 24px #40a040, 20px 24px #40a040, 24px 24px #40a040, 28px 24px #208020,
        16px 28px #208020, 20px 28px #40a040, 24px 28px #40a040, 28px 28px #40a040, 32px 28px #208020,
        20px 32px #208020, 24px 32px #40a040, 28px 32px #40a040, 32px 32px #40a040, 36px 32px #208020,
        24px 36px #208020, 28px 36px #40a040, 32px 36px #40a040, 36px 36px #40a040, 40px 36px #208020,
        20px 40px #208020, 24px 40px #40a040, 28px 40px #40a040, 32px 40px #40a040, 36px 40px #208020,
        16px 44px #208020, 20px 44px #40a040, 24px 44px #40a040, 28px 44px #40a040, 32px 44px #208020,
        /* Tail */
        12px 48px #208020, 16px 48px #40a040, 20px 48px #40a040, 24px 48px #208020,
        8px 52px #208020, 12px 52px #40a040, 16px 52px #208020,
        4px 56px #208020, 8px 56px #208020;
}


/* PHANTOM SPRITE - Ghostly white figure */
.sprite-phantom {
    background: rgba(200, 200, 255, 0.8);
    box-shadow:
        16px 0 rgba(200,200,255,0.8), 20px 0 rgba(200,200,255,0.8), 24px 0 rgba(200,200,255,0.8),
        12px 4px rgba(200,200,255,0.8), 16px 4px rgba(240,240,255,0.9), 20px 4px rgba(240,240,255,0.9), 24px 4px rgba(240,240,255,0.9), 28px 4px rgba(200,200,255,0.8),
        8px 8px rgba(200,200,255,0.8), 12px 8px rgba(240,240,255,0.9), 16px 8px #4040ff, 20px 8px rgba(240,240,255,0.9), 24px 8px #4040ff, 28px 8px rgba(240,240,255,0.9), 32px 8px rgba(200,200,255,0.8),
        8px 12px rgba(200,200,255,0.8), 12px 12px rgba(240,240,255,0.9), 16px 12px rgba(240,240,255,0.9), 20px 12px rgba(240,240,255,0.9), 24px 12px rgba(240,240,255,0.9), 28px 12px rgba(240,240,255,0.9), 32px 12px rgba(200,200,255,0.8),
        8px 16px rgba(200,200,255,0.8), 12px 16px rgba(240,240,255,0.9), 16px 16px #202060, 20px 16px #202060, 24px 16px #202060, 28px 16px rgba(240,240,255,0.9), 32px 16px rgba(200,200,255,0.8),
        8px 20px rgba(200,200,255,0.7), 12px 20px rgba(240,240,255,0.8), 16px 20px rgba(240,240,255,0.8), 20px 20px rgba(240,240,255,0.8), 24px 20px rgba(240,240,255,0.8), 28px 20px rgba(240,240,255,0.8), 32px 20px rgba(200,200,255,0.7),
        4px 24px rgba(180,180,255,0.6), 8px 24px rgba(200,200,255,0.7), 12px 24px rgba(220,220,255,0.8), 16px 24px rgba(220,220,255,0.8), 20px 24px rgba(220,220,255,0.8), 24px 24px rgba(220,220,255,0.8), 28px 24px rgba(220,220,255,0.8), 32px 24px rgba(200,200,255,0.7), 36px 24px rgba(180,180,255,0.6),
        4px 28px rgba(160,160,255,0.5), 8px 28px rgba(180,180,255,0.6), 12px 28px rgba(200,200,255,0.7), 16px 28px rgba(200,200,255,0.7), 20px 28px rgba(200,200,255,0.7), 24px 28px rgba(200,200,255,0.7), 28px 28px rgba(200,200,255,0.7), 32px 28px rgba(180,180,255,0.6), 36px 28px rgba(160,160,255,0.5),
        8px 32px rgba(140,140,255,0.4), 12px 32px rgba(160,160,255,0.5), 20px 32px rgba(180,180,255,0.6), 28px 32px rgba(160,160,255,0.5), 32px 32px rgba(140,140,255,0.4),
        12px 36px rgba(120,120,255,0.3), 20px 36px rgba(140,140,255,0.4), 28px 36px rgba(120,120,255,0.3);
}

/* BEAST SPRITE - Dark monster creature */
.sprite-beast {
    background: #403040;
    box-shadow:
        /* Ears */
        8px 0 #403040, 36px 0 #403040,
        8px 4px #604060, 12px 4px #403040, 32px 4px #403040, 36px 4px #604060,
        /* Head */
        12px 8px #403040, 16px 8px #604060, 20px 8px #604060, 24px 8px #604060, 28px 8px #604060, 32px 8px #403040,
        8px 12px #403040, 12px 12px #604060, 16px 12px #ff0000, 20px 12px #604060, 24px 12px #604060, 28px 12px #ff0000, 32px 12px #604060, 36px 12px #403040,
        8px 16px #403040, 12px 16px #604060, 16px 16px #604060, 20px 16px #604060, 24px 16px #604060, 28px 16px #604060, 32px 16px #604060, 36px 16px #403040,
        12px 20px #403040, 16px 20px #ffffff, 20px 20px #ffffff, 24px 20px #ffffff, 28px 20px #ffffff, 32px 20px #403040,
        /* Body */
        8px 24px #403040, 12px 24px #604060, 16px 24px #604060, 20px 24px #604060, 24px 24px #604060, 28px 24px #604060, 32px 24px #604060, 36px 24px #403040,
        4px 28px #403040, 8px 28px #604060, 12px 28px #604060, 16px 28px #805080, 20px 28px #604060, 24px 28px #604060, 28px 28px #805080, 32px 28px #604060, 36px 28px #604060, 40px 28px #403040,
        4px 32px #403040, 8px 32px #604060, 12px 32px #604060, 16px 32px #604060, 20px 32px #604060, 24px 32px #604060, 28px 32px #604060, 32px 32px #604060, 36px 32px #604060, 40px 32px #403040,
        /* Legs */
        8px 36px #403040, 12px 36px #604060, 16px 36px #403040, 28px 36px #403040, 32px 36px #604060, 36px 36px #403040,
        8px 40px #403040, 12px 40px #403040, 32px 40px #403040, 36px 40px #403040,
        /* Claws */
        4px 44px #808080, 8px 44px #808080, 12px 44px #808080, 32px 44px #808080, 36px 44px #808080, 40px 44px #808080;
}

/* TREANT SPRITE - Tree creature */
.sprite-treant {
    background: #405020;
    box-shadow:
        /* Leaves/Crown */
        12px 0 #306010, 16px 0 #408020, 20px 0 #408020, 24px 0 #408020, 28px 0 #306010,
        8px 4px #306010, 12px 4px #408020, 16px 4px #50a030, 20px 4px #50a030, 24px 4px #50a030, 28px 4px #408020, 32px 4px #306010,
        4px 8px #306010, 8px 8px #408020, 12px 8px #50a030, 16px 8px #50a030, 20px 8px #60b040, 24px 8px #50a030, 28px 8px #50a030, 32px 8px #408020, 36px 8px #306010,
        4px 12px #306010, 8px 12px #408020, 12px 12px #50a030, 16px 12px #50a030, 20px 12px #50a030, 24px 12px #50a030, 28px 12px #50a030, 32px 12px #408020, 36px 12px #306010,
        8px 16px #306010, 12px 16px #408020, 16px 16px #408020, 20px 16px #408020, 24px 16px #408020, 28px 16px #408020, 32px 16px #306010,
        /* Face */
        12px 20px #604020, 16px 20px #805030, 20px 20px #805030, 24px 20px #805030, 28px 20px #604020,
        12px 24px #604020, 16px 24px #ffff00, 20px 24px #805030, 24px 24px #ffff00, 28px 24px #604020,
        12px 28px #604020, 16px 28px #805030, 20px 28px #402010, 24px 28px #805030, 28px 28px #604020,
        /* Trunk */
        12px 32px #604020, 16px 32px #805030, 20px 32px #805030, 24px 32px #805030, 28px 32px #604020,
        8px 36px #604020, 12px 36px #805030, 16px 36px #805030, 20px 36px #906040, 24px 36px #805030, 28px 36px #805030, 32px 36px #604020,
        /* Roots */
        4px 40px #604020, 8px 40px #805030, 12px 40px #805030, 16px 40px #604020, 24px 40px #604020, 28px 40px #805030, 32px 40px #805030, 36px 40px #604020,
        0 44px #604020, 4px 44px #805030, 8px 44px #604020, 32px 44px #604020, 36px 44px #805030, 40px 44px #604020;
}

/* GUARDIAN SPRITE - Armored knight */
.sprite-guardian {
    background: #4080c0;
    box-shadow:
        /* Helmet */
        16px 0 #606080, 20px 0 #808098, 24px 0 #606080,
        12px 4px #606080, 16px 4px #808098, 20px 4px #a0a0b0, 24px 4px #808098, 28px 4px #606080,
        12px 8px #606080, 16px 8px #000020, 20px 8px #808098, 24px 8px #000020, 28px 8px #606080,
        12px 12px #606080, 16px 12px #808098, 20px 12px #808098, 24px 12px #808098, 28px 12px #606080,
        /* Shoulders */
        4px 16px #4080c0, 8px 16px #60a0e0, 12px 16px #808098, 16px 16px #808098, 20px 16px #808098, 24px 16px #808098, 28px 16px #808098, 32px 16px #60a0e0, 36px 16px #4080c0,
        /* Body armor */
        8px 20px #4080c0, 12px 20px #60a0e0, 16px 20px #60a0e0, 20px 20px #f0d030, 24px 20px #60a0e0, 28px 20px #60a0e0, 32px 20px #4080c0,
        8px 24px #4080c0, 12px 24px #60a0e0, 16px 24px #60a0e0, 20px 24px #60a0e0, 24px 24px #60a0e0, 28px 24px #60a0e0, 32px 24px #4080c0,
        8px 28px #4080c0, 12px 28px #60a0e0, 16px 28px #60a0e0, 20px 28px #60a0e0, 24px 28px #60a0e0, 28px 28px #60a0e0, 32px 28px #4080c0,
        /* Shield */
        0 24px #c0c0d0, 0 28px #c0c0d0, 0 32px #c0c0d0, 4px 24px #c0c0d0, 4px 28px #4080c0, 4px 32px #c0c0d0,
        /* Legs */
        12px 32px #4080c0, 16px 32px #60a0e0, 20px 32px #4080c0, 24px 32px #60a0e0, 28px 32px #4080c0,
        12px 36px #4080c0, 16px 36px #4080c0, 24px 36px #4080c0, 28px 36px #4080c0,
        /* Boots */
        12px 40px #404060, 16px 40px #404060, 24px 40px #404060, 28px 40px #404060;
}

/* ==================== NEOMON PIXEL SPRITES ==================== */

/* PRINTASAUR - Green dinosaur (Basics) */
.sprite-printasaur {
    background: #40a040;
    box-shadow:
        /* Head */
        16px 0 #40a040, 20px 0 #40a040, 24px 0 #40a040,
        12px 4px #40a040, 16px 4px #60c060, 20px 4px #60c060, 24px 4px #60c060, 28px 4px #40a040,
        8px 8px #40a040, 12px 8px #60c060, 16px 8px #000000, 20px 8px #60c060, 24px 8px #000000, 28px 8px #60c060, 32px 8px #40a040,
        8px 12px #40a040, 12px 12px #60c060, 16px 12px #60c060, 20px 12px #60c060, 24px 12px #60c060, 28px 12px #60c060, 32px 12px #40a040,
        12px 16px #40a040, 16px 16px #60c060, 20px 16px #f08080, 24px 16px #60c060, 28px 16px #40a040,
        /* Body */
        8px 20px #40a040, 12px 20px #60c060, 16px 20px #60c060, 20px 20px #60c060, 24px 20px #60c060, 28px 20px #40a040,
        4px 24px #40a040, 8px 24px #60c060, 12px 24px #80e080, 16px 24px #60c060, 20px 24px #80e080, 24px 24px #60c060, 28px 24px #40a040,
        4px 28px #40a040, 8px 28px #60c060, 12px 28px #60c060, 16px 28px #60c060, 20px 28px #60c060, 24px 28px #60c060, 28px 28px #40a040, 32px 28px #40a040,
        /* Tail */
        32px 24px #40a040, 36px 24px #60c060, 40px 24px #40a040,
        36px 28px #40a040, 40px 28px #60c060, 44px 28px #40a040,
        /* Legs */
        8px 32px #40a040, 12px 32px #40a040, 24px 32px #40a040, 28px 32px #40a040,
        8px 36px #308030, 12px 36px #308030, 24px 36px #308030, 28px 36px #308030;
}

/* PARAMOX - Orange fox (Functions) */
.sprite-paramox {
    background: #e07020;
    box-shadow:
        /* Ears */
        4px 0 #e07020, 8px 0 #f09040, 28px 0 #f09040, 32px 0 #e07020,
        4px 4px #f09040, 8px 4px #f8c080, 28px 4px #f8c080, 32px 4px #f09040,
        /* Head */
        8px 8px #e07020, 12px 8px #f09040, 16px 8px #f09040, 20px 8px #f09040, 24px 8px #f09040, 28px 8px #e07020,
        8px 12px #f09040, 12px 12px #000000, 16px 12px #f09040, 20px 12px #f09040, 24px 12px #000000, 28px 12px #f09040,
        8px 16px #f09040, 12px 16px #f8c080, 16px 16px #f8c080, 20px 16px #f8c080, 24px 16px #f8c080, 28px 16px #f09040,
        12px 20px #f09040, 16px 20px #202020, 20px 20px #202020, 24px 20px #f09040,
        /* Body */
        8px 24px #e07020, 12px 24px #f09040, 16px 24px #f8c080, 20px 24px #f8c080, 24px 24px #f09040, 28px 24px #e07020,
        8px 28px #e07020, 12px 28px #f09040, 16px 28px #f09040, 20px 28px #f09040, 24px 28px #f09040, 28px 28px #e07020,
        /* Legs */
        8px 32px #e07020, 12px 32px #e07020, 24px 32px #e07020, 28px 32px #e07020,
        /* Tail */
        32px 20px #e07020, 36px 20px #f09040, 40px 20px #f8c080,
        36px 24px #e07020, 40px 24px #f09040, 44px 24px #f8f8f8;
}

/* TABLION - Golden lion (Data) */
.sprite-tablion {
    background: #c08020;
    box-shadow:
        /* Mane */
        8px 0 #c08020, 12px 0 #d8a040, 16px 0 #d8a040, 20px 0 #d8a040, 24px 0 #d8a040, 28px 0 #c08020,
        4px 4px #c08020, 8px 4px #d8a040, 12px 4px #e8c060, 16px 4px #e8c060, 20px 4px #e8c060, 24px 4px #e8c060, 28px 4px #d8a040, 32px 4px #c08020,
        4px 8px #d8a040, 8px 8px #e8c060, 12px 8px #f8e080, 16px 8px #f8e080, 20px 8px #f8e080, 24px 8px #f8e080, 28px 8px #e8c060, 32px 8px #d8a040,
        /* Face */
        8px 12px #d8a040, 12px 12px #f0c060, 16px 12px #000000, 20px 12px #f0c060, 24px 12px #000000, 28px 12px #f0c060, 32px 12px #d8a040,
        8px 16px #d8a040, 12px 16px #f0c060, 16px 16px #f0c060, 20px 16px #f0c060, 24px 16px #f0c060, 28px 16px #f0c060, 32px 16px #d8a040,
        12px 20px #f0c060, 16px 20px #a06040, 20px 20px #f08080, 24px 20px #a06040, 28px 20px #f0c060,
        /* Body */
        12px 24px #c08020, 16px 24px #d8a040, 20px 24px #d8a040, 24px 24px #d8a040, 28px 24px #c08020,
        12px 28px #c08020, 16px 28px #d8a040, 20px 28px #d8a040, 24px 28px #d8a040, 28px 28px #c08020,
        /* Legs & Tail */
        12px 32px #c08020, 16px 32px #c08020, 24px 32px #c08020, 28px 32px #c08020,
        32px 28px #c08020, 36px 28px #d8a040, 40px 32px #e8c060;
}

/* LOOPEON - Purple dragon (Control) */
.sprite-loopeon {
    background: #8040c0;
    box-shadow:
        /* Horns */
        8px 0 #6030a0, 28px 0 #6030a0,
        8px 4px #8040c0, 28px 4px #8040c0,
        /* Head */
        12px 8px #8040c0, 16px 8px #a060e0, 20px 8px #a060e0, 24px 8px #8040c0,
        8px 12px #8040c0, 12px 12px #a060e0, 16px 12px #ff0000, 20px 12px #a060e0, 24px 12px #ff0000, 28px 12px #a060e0, 32px 12px #8040c0,
        8px 16px #8040c0, 12px 16px #a060e0, 16px 16px #a060e0, 20px 16px #a060e0, 24px 16px #a060e0, 28px 16px #a060e0, 32px 16px #8040c0,
        12px 20px #8040c0, 16px 20px #c080f0, 20px 20px #c080f0, 24px 20px #8040c0,
        /* Wings */
        0 16px #6030a0, 4px 12px #8040c0, 4px 16px #a060e0, 36px 12px #8040c0, 40px 16px #6030a0, 36px 16px #a060e0,
        /* Body */
        12px 24px #8040c0, 16px 24px #a060e0, 20px 24px #c080f0, 24px 24px #a060e0, 28px 24px #8040c0,
        12px 28px #8040c0, 16px 28px #a060e0, 20px 28px #a060e0, 24px 28px #a060e0, 28px 28px #8040c0,
        /* Legs & Tail */
        12px 32px #6030a0, 16px 32px #6030a0, 24px 32px #6030a0, 28px 32px #6030a0,
        32px 28px #8040c0, 36px 32px #a060e0, 40px 36px #c080f0;
}

/* VIMANDER - Blue lizard (API) */
.sprite-vimander {
    background: #2080c0;
    box-shadow:
        /* Head crest */
        16px 0 #40a0e0, 20px 0 #40a0e0,
        12px 4px #2080c0, 16px 4px #60c0f0, 20px 4px #60c0f0, 24px 4px #2080c0,
        /* Head */
        8px 8px #2080c0, 12px 8px #40a0e0, 16px 8px #40a0e0, 20px 8px #40a0e0, 24px 8px #40a0e0, 28px 8px #2080c0,
        8px 12px #40a0e0, 12px 12px #000000, 16px 12px #40a0e0, 20px 12px #40a0e0, 24px 12px #000000, 28px 12px #40a0e0,
        8px 16px #40a0e0, 12px 16px #60c0f0, 16px 16px #60c0f0, 20px 16px #60c0f0, 24px 16px #60c0f0, 28px 16px #40a0e0,
        12px 20px #40a0e0, 16px 20px #f08080, 20px 20px #f08080, 24px 20px #40a0e0,
        /* Body */
        8px 24px #2080c0, 12px 24px #40a0e0, 16px 24px #80d0f0, 20px 24px #80d0f0, 24px 24px #40a0e0, 28px 24px #2080c0,
        8px 28px #2080c0, 12px 28px #40a0e0, 16px 28px #40a0e0, 20px 28px #40a0e0, 24px 28px #40a0e0, 28px 28px #2080c0,
        /* Legs & Tail */
        8px 32px #2080c0, 12px 32px #2080c0, 24px 32px #2080c0, 28px 32px #2080c0,
        32px 24px #2080c0, 36px 24px #40a0e0, 40px 28px #2080c0;
}

/* AUTOCMD - Purple ghost (Events) */
.sprite-autocmd {
    background: rgba(160, 120, 200, 0.9);
    box-shadow:
        /* Head */
        12px 4px rgba(180,140,220,0.9), 16px 4px rgba(180,140,220,0.9), 20px 4px rgba(180,140,220,0.9), 24px 4px rgba(180,140,220,0.9),
        8px 8px rgba(160,120,200,0.9), 12px 8px rgba(200,160,240,0.9), 16px 8px rgba(200,160,240,0.9), 20px 8px rgba(200,160,240,0.9), 24px 8px rgba(200,160,240,0.9), 28px 8px rgba(160,120,200,0.9),
        8px 12px rgba(180,140,220,0.9), 12px 12px #000000, 16px 12px rgba(200,160,240,0.9), 20px 12px rgba(200,160,240,0.9), 24px 12px #000000, 28px 12px rgba(180,140,220,0.9),
        8px 16px rgba(180,140,220,0.9), 12px 16px rgba(200,160,240,0.9), 16px 16px rgba(200,160,240,0.9), 20px 16px rgba(200,160,240,0.9), 24px 16px rgba(200,160,240,0.9), 28px 16px rgba(180,140,220,0.9),
        12px 20px rgba(180,140,220,0.9), 16px 20px #303030, 20px 20px #303030, 24px 20px rgba(180,140,220,0.9),
        /* Body */
        8px 24px rgba(160,120,200,0.8), 12px 24px rgba(180,140,220,0.8), 16px 24px rgba(200,160,240,0.8), 20px 24px rgba(200,160,240,0.8), 24px 24px rgba(180,140,220,0.8), 28px 24px rgba(160,120,200,0.8),
        4px 28px rgba(140,100,180,0.6), 12px 28px rgba(160,120,200,0.7), 20px 28px rgba(160,120,200,0.7), 28px 28px rgba(160,120,200,0.7), 36px 28px rgba(140,100,180,0.6),
        8px 32px rgba(120,80,160,0.5), 16px 32px rgba(140,100,180,0.5), 24px 32px rgba(140,100,180,0.5), 32px 32px rgba(120,80,160,0.5);
}

/* WINOTTER - Teal otter (UI) */
.sprite-winotter {
    background: #20a0a0;
    box-shadow:
        /* Head */
        12px 4px #20a0a0, 16px 4px #40c0c0, 20px 4px #40c0c0, 24px 4px #20a0a0,
        8px 8px #20a0a0, 12px 8px #40c0c0, 16px 8px #40c0c0, 20px 8px #40c0c0, 24px 8px #40c0c0, 28px 8px #20a0a0,
        8px 12px #40c0c0, 12px 12px #000000, 16px 12px #40c0c0, 20px 12px #40c0c0, 24px 12px #000000, 28px 12px #40c0c0,
        8px 16px #40c0c0, 12px 16px #f8e8d0, 16px 16px #f8e8d0, 20px 16px #f8e8d0, 24px 16px #f8e8d0, 28px 16px #40c0c0,
        12px 20px #40c0c0, 16px 20px #202020, 20px 20px #f08080, 24px 20px #40c0c0,
        /* Body */
        8px 24px #20a0a0, 12px 24px #40c0c0, 16px 24px #f8e8d0, 20px 24px #f8e8d0, 24px 24px #40c0c0, 28px 24px #20a0a0,
        8px 28px #20a0a0, 12px 28px #40c0c0, 16px 28px #40c0c0, 20px 28px #40c0c0, 24px 28px #40c0c0, 28px 28px #20a0a0,
        /* Arms & Tail */
        4px 24px #40c0c0, 32px 24px #40c0c0,
        12px 32px #20a0a0, 16px 32px #20a0a0, 24px 32px #20a0a0, 28px 32px #20a0a0,
        32px 28px #20a0a0, 36px 28px #40c0c0, 40px 24px #60e0e0;
}

/* TREEMON - Green tree (Parsing) */
.sprite-treemon {
    background: #308030;
    box-shadow:
        /* Leaves */
        12px 0 #308030, 16px 0 #40a040, 20px 0 #40a040, 24px 0 #308030,
        8px 4px #308030, 12px 4px #40a040, 16px 4px #60c060, 20px 4px #60c060, 24px 4px #40a040, 28px 4px #308030,
        4px 8px #308030, 8px 8px #40a040, 12px 8px #60c060, 16px 8px #80e080, 20px 8px #60c060, 24px 8px #60c060, 28px 8px #40a040, 32px 8px #308030,
        4px 12px #40a040, 8px 12px #60c060, 12px 12px #60c060, 16px 12px #60c060, 20px 12px #60c060, 24px 12px #60c060, 28px 12px #60c060, 32px 12px #40a040,
        8px 16px #308030, 12px 16px #40a040, 16px 16px #40a040, 20px 16px #40a040, 24px 16px #40a040, 28px 16px #308030,
        /* Face */
        12px 20px #604020, 16px 20px #f8f800, 20px 20px #805030, 24px 20px #f8f800, 28px 20px #604020,
        12px 24px #604020, 16px 24px #805030, 20px 24px #402010, 24px 24px #805030, 28px 24px #604020,
        /* Trunk */
        12px 28px #604020, 16px 28px #805030, 20px 28px #906040, 24px 28px #805030, 28px 28px #604020,
        12px 32px #604020, 16px 32px #805030, 20px 32px #805030, 24px 32px #805030, 28px 32px #604020,
        /* Roots */
        8px 36px #604020, 12px 36px #805030, 28px 36px #805030, 32px 36px #604020;
}

/* ==================== MODAL CONTAINER ==================== */
.boss-battle-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: var(--pixel-black);
    overflow: hidden;
    font-family: var(--font-pixel);
}

.boss-battle-modal.hidden {
    display: none;
}

.battle-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--pixel-black);
    animation: backdropFade 0.5s ease-out;
}

@keyframes backdropFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==================== POKEMON SPIRAL TRANSITION ==================== */
.battle-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    pointer-events: none;
    overflow: hidden;
}

.battle-transition-overlay.hidden {
    display: none;
}

/* Fan/wedge segments - 8 pie slices from center */
.spiral-segment {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--pixel-black);
}

/* Spiral IN - all segments wipe simultaneously (thin line → full wedge) */
.battle-transition-overlay.spiral-in .spiral-segment:nth-child(1) {
    animation: wipeIn1 0.4s ease-out forwards;
}
.battle-transition-overlay.spiral-in .spiral-segment:nth-child(2) {
    animation: wipeIn2 0.4s ease-out forwards;
}
.battle-transition-overlay.spiral-in .spiral-segment:nth-child(3) {
    animation: wipeIn3 0.4s ease-out forwards;
}
.battle-transition-overlay.spiral-in .spiral-segment:nth-child(4) {
    animation: wipeIn4 0.4s ease-out forwards;
}
.battle-transition-overlay.spiral-in .spiral-segment:nth-child(5) {
    animation: wipeIn5 0.4s ease-out forwards;
}
.battle-transition-overlay.spiral-in .spiral-segment:nth-child(6) {
    animation: wipeIn6 0.4s ease-out forwards;
}
.battle-transition-overlay.spiral-in .spiral-segment:nth-child(7) {
    animation: wipeIn7 0.4s ease-out forwards;
}
.battle-transition-overlay.spiral-in .spiral-segment:nth-child(8) {
    animation: wipeIn8 0.4s ease-out forwards;
}

/* Each segment sweeps from a line to a full 45° wedge */
@keyframes wipeIn1 {
    0%   { clip-path: polygon(50% 50%, 50% 0%, 50% 0%); }
    100% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%); }
}
@keyframes wipeIn2 {
    0%   { clip-path: polygon(50% 50%, 100% 0%, 100% 0%); }
    100% { clip-path: polygon(50% 50%, 100% 0%, 100% 50%); }
}
@keyframes wipeIn3 {
    0%   { clip-path: polygon(50% 50%, 100% 50%, 100% 50%); }
    100% { clip-path: polygon(50% 50%, 100% 50%, 100% 100%); }
}
@keyframes wipeIn4 {
    0%   { clip-path: polygon(50% 50%, 100% 100%, 100% 100%); }
    100% { clip-path: polygon(50% 50%, 100% 100%, 50% 100%); }
}
@keyframes wipeIn5 {
    0%   { clip-path: polygon(50% 50%, 50% 100%, 50% 100%); }
    100% { clip-path: polygon(50% 50%, 50% 100%, 0% 100%); }
}
@keyframes wipeIn6 {
    0%   { clip-path: polygon(50% 50%, 0% 100%, 0% 100%); }
    100% { clip-path: polygon(50% 50%, 0% 100%, 0% 50%); }
}
@keyframes wipeIn7 {
    0%   { clip-path: polygon(50% 50%, 0% 50%, 0% 50%); }
    100% { clip-path: polygon(50% 50%, 0% 50%, 0% 0%); }
}
@keyframes wipeIn8 {
    0%   { clip-path: polygon(50% 50%, 0% 0%, 0% 0%); }
    100% { clip-path: polygon(50% 50%, 0% 0%, 50% 0%); }
}

/* Spiral OUT - all segments wipe simultaneously (full wedge → thin line) */
.battle-transition-overlay.spiral-out .spiral-segment:nth-child(1) {
    animation: wipeOut1 0.4s ease-in forwards;
}
.battle-transition-overlay.spiral-out .spiral-segment:nth-child(2) {
    animation: wipeOut2 0.4s ease-in forwards;
}
.battle-transition-overlay.spiral-out .spiral-segment:nth-child(3) {
    animation: wipeOut3 0.4s ease-in forwards;
}
.battle-transition-overlay.spiral-out .spiral-segment:nth-child(4) {
    animation: wipeOut4 0.4s ease-in forwards;
}
.battle-transition-overlay.spiral-out .spiral-segment:nth-child(5) {
    animation: wipeOut5 0.4s ease-in forwards;
}
.battle-transition-overlay.spiral-out .spiral-segment:nth-child(6) {
    animation: wipeOut6 0.4s ease-in forwards;
}
.battle-transition-overlay.spiral-out .spiral-segment:nth-child(7) {
    animation: wipeOut7 0.4s ease-in forwards;
}
.battle-transition-overlay.spiral-out .spiral-segment:nth-child(8) {
    animation: wipeOut8 0.4s ease-in forwards;
}

/* Each segment sweeps from full wedge back to a line */
@keyframes wipeOut1 {
    0%   { clip-path: polygon(50% 50%, 50% 0%, 100% 0%); }
    100% { clip-path: polygon(50% 50%, 100% 0%, 100% 0%); }
}
@keyframes wipeOut2 {
    0%   { clip-path: polygon(50% 50%, 100% 0%, 100% 50%); }
    100% { clip-path: polygon(50% 50%, 100% 50%, 100% 50%); }
}
@keyframes wipeOut3 {
    0%   { clip-path: polygon(50% 50%, 100% 50%, 100% 100%); }
    100% { clip-path: polygon(50% 50%, 100% 100%, 100% 100%); }
}
@keyframes wipeOut4 {
    0%   { clip-path: polygon(50% 50%, 100% 100%, 50% 100%); }
    100% { clip-path: polygon(50% 50%, 50% 100%, 50% 100%); }
}
@keyframes wipeOut5 {
    0%   { clip-path: polygon(50% 50%, 50% 100%, 0% 100%); }
    100% { clip-path: polygon(50% 50%, 0% 100%, 0% 100%); }
}
@keyframes wipeOut6 {
    0%   { clip-path: polygon(50% 50%, 0% 100%, 0% 50%); }
    100% { clip-path: polygon(50% 50%, 0% 50%, 0% 50%); }
}
@keyframes wipeOut7 {
    0%   { clip-path: polygon(50% 50%, 0% 50%, 0% 0%); }
    100% { clip-path: polygon(50% 50%, 0% 0%, 0% 0%); }
}
@keyframes wipeOut8 {
    0%   { clip-path: polygon(50% 50%, 0% 0%, 50% 0%); }
    100% { clip-path: polygon(50% 50%, 50% 0%, 50% 0%); }
}

.battle-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--pixel-white);
    border: none;
    border-radius: 0;
    padding: 0;
    animation: battleModalAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    box-shadow: none;
    image-rendering: pixelated;
}

/* ==================== POKEMON BATTLE ARENA (GBA STYLE) ==================== */
.neomon-arena {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Pixel art forest background */
    background: url('../images/battle-background.jpg') center center / cover no-repeat;
    background-color: #88c070; /* Fallback color */
    position: relative;
    min-height: 320px;
    border-bottom: 4px solid var(--pixel-black);
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}


/* Enemy info - TOP LEFT (GBA style with tail pointing right) */
.neomon-boss-info {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    right: auto !important;
    background: linear-gradient(180deg, #f8f8f8 0%, #d8d8d8 100%);
    border: 3px solid #404040;
    border-radius: 0 12px 12px 0;
    padding: 10px 20px 10px 15px;
    min-width: 200px;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
    z-index: 10 !important;
}

/* Enemy sprite - RIGHT side with shadow attached */
.neomon-boss-area {
    position: absolute !important;
    top: 35% !important;
    right: 18% !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    overflow: visible !important;
    align-items: center;
    z-index: 20;
}


#boss-sprite {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Ensure boss sprite container is visible */
#boss-sprite-container {
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
}

.neomon-boss-name {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: var(--pixel-black);
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.neomon-hp-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.neomon-hp-label {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: #f8a020;
    font-weight: bold;
    background: #484848;
    padding: 1px 4px;
    border-radius: 2px;
}

.neomon-hp-track {
    flex: 1;
    height: 6px;
    background: #484848;
    border-radius: 3px;
    padding: 1px;
    min-width: 100px;
}

.neomon-hp-fill {
    height: 100%;
    background: var(--hp-high);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.neomon-hp-fill.warning {
    background: var(--hp-mid);
}

.neomon-hp-fill.critical {
    background: var(--hp-low);
    animation: hpCriticalBlink 0.3s infinite;
}

@keyframes hpCriticalBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.neomon-boss-sprite {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    overflow: visible;
}

/* Make sure emoji sprites are visible */
.neomon-boss-sprite .emoji-sprite,
#boss-sprite .emoji-sprite {
    position: relative;
    z-index: 15;
}

/* Player area - BOTTOM LEFT with shadow attached */
.neomon-player-area {
    position: absolute !important;
    bottom: 8% !important;
    left: 18% !important;
    right: auto !important;
    top: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
    pointer-events: none;
}

.neomon-player-sprite {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
}

/* Player info - BOTTOM RIGHT (GBA style with tail pointing left) */
.neomon-player-info {
    position: absolute !important;
    bottom: 20px !important;
    right: 15px !important;
    left: auto !important;
    top: auto !important;
    background: linear-gradient(180deg, #f8f8f8 0%, #d8d8d8 100%);
    border: 3px solid #404040;
    border-radius: 12px 0 0 12px;
    padding: 10px 15px 10px 20px;
    min-width: 200px;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
    z-index: 50 !important;
    transition: transform 0.3s ease;
}

/* Shift player info up when code panel is open */
.battle-container.code-panel-open .neomon-player-info {
    transform: translateY(-210px);
}

.neomon-player-name {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--pixel-black);
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==================== POKEMON TEXT BOX (GBA STYLE) ==================== */
.neomon-textbox {
    background: var(--pixel-white);
    border: 4px solid var(--pixel-black);
    border-radius: 8px;
    margin: 0 8px 8px 8px;
    min-height: 100px;
    display: flex;
    flex-direction: row;
    position: relative;
    transition: transform 0.3s ease;
    z-index: 20;
}

.neomon-text {
    font-family: var(--font-pixel);
    font-size: 13px;
    line-height: 1.9;
    color: var(--pixel-black);
    flex: 1;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
}

.neomon-text .cursor {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--pixel-black);
    animation: cursorBlink 0.5s infinite;
    vertical-align: middle;
    margin-left: 4px;
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Neomon menu - RIGHT SIDE (GBA style 2x2 grid) */
.neomon-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    padding: 8px;
    background: var(--pixel-white);
    border-left: 3px solid var(--pixel-black);
    border-radius: 0 6px 6px 0;
    min-width: 200px;
}

.neomon-menu-btn {
    font-family: var(--font-pixel);
    font-size: 10px;
    padding: 8px 12px;
    background: var(--pixel-white);
    color: var(--pixel-black);
    border: 2px solid var(--pixel-black);
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.1s;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.neomon-menu-btn:hover {
    background: #e8e8e8;
}

.neomon-menu-btn:active {
    transform: scale(0.98);
}

.neomon-menu-btn.selected {
    background: #d0d0d0;
}

.neomon-menu-btn .menu-arrow {
    color: var(--pixel-black);
    font-size: 8px;
    margin-right: 2px;
}

.neomon-menu.hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* When menu is hidden, text takes full width */
.neomon-menu.hidden + .neomon-text,
.neomon-textbox:not(:has(.neomon-menu:not(.hidden))) .neomon-text {
    border-radius: 6px;
}

/* ==================== CODE PANEL (slides up) ==================== */
.neomon-code-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--pixel-white);
    border-top: 4px solid var(--pixel-black);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    height: 210px;
    display: flex;
    flex-direction: column;
    z-index: 2100;
    will-change: transform;
    overflow: hidden;
}

.neomon-code-panel.visible {
    transform: translateY(0);
}

/* Shift textbox up when code panel is open */
.battle-container.code-panel-open .neomon-textbox {
    transform: translateY(-210px);
}

.neomon-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    border-bottom: 2px solid var(--pixel-black);
    background: var(--pixel-gray);
    gap: 12px;
    flex-shrink: 0;
}

.neomon-code-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.neomon-code-close {
    font-family: var(--font-pixel);
    font-size: 12px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pixel-red);
    color: var(--pixel-white) !important;
    border: 2px solid var(--pixel-black);
    cursor: pointer;
}

.neomon-code-body {
    display: flex;
    flex-direction: row;
    padding: 8px;
    gap: 8px;
    overflow: hidden;
    height: calc(100% - 42px); /* Subtract header height */
    box-sizing: border-box;
}

.neomon-challenge {
    flex: 1;
    font-family: var(--font-pixel);
    font-size: 12px;
    color: var(--pixel-black);
    padding: 4px 8px;
    background: var(--pixel-yellow);
    border: 2px solid var(--pixel-black);
    display: flex;
    align-items: center;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neomon-code-editor-pane,
.neomon-code-console-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.neomon-editor {
    width: 100%;
    height: 105px !important;
    min-height: 105px !important;
    max-height: 105px !important;
    font-family: monospace;
    font-size: 13px;
    padding: 8px;
    border: 2px solid var(--pixel-black);
    background: #1a1a2e;
    color: #00ff00;
    resize: none;
    box-sizing: border-box;
}

.neomon-editor-label,
.neomon-console-label {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--pixel-gray);
    text-transform: uppercase;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.neomon-console,
.neomon-code-panel #battle-console-output {
    width: 100%;
    height: 105px !important;
    min-height: 105px !important;
    max-height: 105px !important;
    padding: 8px !important;
    background: var(--pixel-black);
    color: var(--pixel-green);
    font-family: monospace;
    font-size: 12px;
    overflow: auto;
    border: 2px solid var(--pixel-black) !important;
    box-sizing: border-box !important;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.neomon-console.error {
    color: #ff6b6b;
}

.neomon-console.success {
    color: var(--pixel-green);
}

.neomon-code-actions {
    display: flex;
    gap: 8px;
}

.neomon-code-btn {
    font-family: var(--font-pixel);
    font-size: 9px;
    padding: 6px 12px;
    border: 2px solid var(--pixel-black);
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 2px 2px 0 var(--pixel-shadow);
}

.neomon-code-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

.neomon-code-btn.attack {
    background: var(--pixel-green);
    color: var(--pixel-black);
}

.neomon-code-btn.attack:disabled {
    background: var(--pixel-gray);
    cursor: not-allowed;
    opacity: 0.6;
}

/* ==================== ROUND DOTS (Neomon style) ==================== */
.neomon-rounds {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    gap: 4px;
}

.neomon-round-dot {
    width: 12px;
    height: 12px;
    border: 2px solid var(--pixel-black);
    background: var(--pixel-white);
}

.neomon-round-dot.completed {
    background: var(--pixel-green);
}

.neomon-round-dot.current {
    background: var(--pixel-yellow);
    animation: currentDotPulse 1s infinite;
}

@keyframes currentDotPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ==================== MUSIC TOGGLE ==================== */
.neomon-music-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 16px;
    padding: 4px 8px;
    background: var(--pixel-white);
    border: 2px solid var(--pixel-black);
    cursor: pointer;
    z-index: 10;
}

/* ==================== POKEMON ANIMATIONS ==================== */

/* Wild Neomon appeared! - slide in from right */
@keyframes neomonAppear {
    0% {
        transform: translateX(200px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Sprites start hidden until "appeared" class is added */
.neomon-boss-sprite {
    opacity: 0;
    transform: translateX(200px);
}

.neomon-boss-sprite.appearing {
    animation: neomonAppear 0.8s ease-out forwards;
}

.neomon-boss-sprite.appeared {
    opacity: 1;
    transform: translateX(0);
}

/* Player send out - slide in from left */
@keyframes playerAppear {
    0% {
        transform: translateX(-200px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Start player hidden */
.neomon-player-sprite {
    opacity: 0;
    transform: translateX(-200px);
}

.neomon-player-sprite.appearing {
    animation: playerAppear 0.8s ease-out 0.3s forwards;
}

.neomon-player-sprite.appeared {
    opacity: 1;
    transform: translateX(0);
}

/* Attack animation - slide forward and back */
@keyframes neomonAttack {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(30px); }
    35% { transform: translateX(25px); }
    50% { transform: translateX(0); }
}

.neomon-boss-sprite.attacking {
    animation: neomonAttack 0.6s ease-out;
}

@keyframes playerAttack {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(-30px); }
    35% { transform: translateX(-25px); }
    50% { transform: translateX(0); }
}

.neomon-player-sprite.attacking {
    animation: playerAttack 0.6s ease-out;
}

/* Damage animation - flash and shake */
@keyframes neomonDamage {
    0%, 100% { opacity: 1; transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { opacity: 0; transform: translateX(-5px); }
    20%, 40%, 60%, 80% { opacity: 1; transform: translateX(5px); }
}

.neomon-boss-sprite.hurt,
.neomon-player-sprite.hurt {
    animation: neomonDamage 0.6s ease-out;
}

/* Faint animation - sink down */
@keyframes neomonFaint {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(50px); opacity: 0; }
}

.neomon-boss-sprite.fainted {
    animation: neomonFaint 1s ease-in forwards;
}

/* Idle bobbing animation */
@keyframes neomonIdle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.neomon-boss-sprite .pixel-sprite,
.neomon-player-sprite .pixel-sprite {
    animation: neomonIdle 2s ease-in-out infinite;
}

/* Victory bounce */
@keyframes victoryBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.neomon-player-sprite.victory {
    animation: victoryBounce 0.5s ease-in-out 3;
}

/* ==================== VICTORY/DEFEAT OVERLAYS (Neomon style) ==================== */
.neomon-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.neomon-overlay.hidden {
    display: none;
}

.neomon-overlay-content {
    text-align: center;
    padding: 32px;
    background: var(--pixel-white);
    border: 4px solid var(--pixel-black);
    box-shadow: 8px 8px 0 var(--pixel-shadow);
}

.neomon-overlay-title {
    font-family: var(--font-pixel);
    font-size: 24px;
    color: var(--pixel-black);
    margin: 0 0 16px 0;
}

.neomon-overlay-title.victory {
    color: var(--pixel-green);
}

.neomon-overlay-title.defeat {
    color: var(--pixel-red);
}

.neomon-overlay-xp {
    font-family: var(--font-pixel);
    font-size: 16px;
    color: var(--pixel-blue);
    margin-bottom: 16px;
}

.neomon-overlay-btn {
    font-family: var(--font-pixel);
    font-size: 12px;
    padding: 12px 24px;
    background: var(--pixel-white);
    border: 3px solid var(--pixel-black);
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 3px 3px 0 var(--pixel-shadow);
    margin: 4px;
}

.neomon-overlay-btn:hover {
    background: var(--pixel-yellow);
}

.neomon-overlay-btn:active {
    transform: translate(3px, 3px);
    box-shadow: none;
}

/* ==================== DAMAGE NUMBER (Neomon style) ==================== */
.neomon-damage-number {
    position: absolute;
    font-family: var(--font-pixel);
    font-size: 24px;
    color: var(--pixel-red);
    text-shadow: 2px 2px 0 var(--pixel-black);
    z-index: 100;
    pointer-events: none;
    animation: damageFloatUp 1s ease-out forwards;
}

/* Boss damage - near the boss (top right area) */
.neomon-damage-number.boss-damage {
    top: 30%;
    right: 25%;
}

/* Player damage - near the player (bottom left area) */
.neomon-damage-number.player-damage {
    bottom: 40%;
    left: 25%;
}

@keyframes damageFloatUp {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    50% {
        transform: translateY(-15px) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translateY(-30px) scale(1);
        opacity: 0;
    }
}

/* Keep old arena classes for backwards compat but hide */
.battle-arena {
    display: none;
}

.battle-codelab {
    display: none;
}

.codelab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-default);
}

.codelab-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--mana-bright);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.code-editor-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.code-editor {
    flex: 1;
    width: 100%;
    min-height: 120px;
    background: var(--console-bg);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-bright);
    resize: none;
    outline: none;
}

.code-editor:focus {
    border-color: var(--mana-blue);
    box-shadow: 0 0 15px var(--mana-glow);
}

.code-console {
    margin-top: 0.5rem;
    background: var(--console-bg);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 0.5rem;
    min-height: 50px;
    max-height: 80px;
    overflow-y: auto;
}

.code-console-title {
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.code-console-output {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--console-text);
    white-space: pre-wrap;
}

.code-console-output.error {
    color: var(--console-error);
}

.code-console-output.success {
    color: var(--console-success);
}

/* Code Actions */
.code-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.run-code-btn {
    flex: 1;
    background: linear-gradient(135deg, var(--mana-blue), var(--mana-bright));
    color: #0a0a0f;
    border: none;
    box-shadow: 0 4px 15px var(--mana-glow);
}

.run-code-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--mana-glow);
}

.code-actions .attack-btn {
    flex: 1;
}

@keyframes battleModalAppear {
    0% {
        transform: scale(0.8) translateY(50px);
        opacity: 0;
    }
    50% {
        transform: scale(1.02) translateY(-10px);
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* ==================== BOSS AREA ==================== */
.boss-area {
    text-align: center;
    margin-bottom: 0.5rem;
}

.boss-intro-text {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    padding: 1rem;
    margin-bottom: 0.5rem;
    min-height: 60px;
    background: var(--bg-elevated);
    border: 1px solid var(--magic-purple);
    border-radius: 8px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.boss-intro-text:empty,
.boss-intro-text.hidden {
    display: none;
}

.boss-intro-text.visible {
    opacity: 1;
    transform: translateY(0);
}

.boss-intro-text strong {
    color: var(--fire-bright);
}

.boss-intro-text em {
    color: var(--text-muted);
    font-style: italic;
}

.boss-sprite-container {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 0.5rem;
}

/* Boss Entrance Animation */
.boss-sprite-container.boss-entrance {
    animation: bossEntrance 1.5s ease-out;
}

@keyframes bossEntrance {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
        filter: brightness(3) blur(20px);
    }
    50% {
        transform: scale(1.3) rotate(10deg);
        filter: brightness(2) blur(5px);
    }
    75% {
        transform: scale(0.95) rotate(-5deg);
    }
    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
        filter: brightness(1) blur(0);
    }
}

/* ==================== BOSS SPRITES ==================== */
.boss-sprite {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 70px;
    filter: drop-shadow(0 0 20px var(--fire-glow));
    transition: all 0.3s ease;
    animation: bossIdle 2s ease-in-out infinite;
}

@keyframes bossIdle {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.02);
    }
}

/* Boss Hurt Animation */
.boss-sprite.hurt {
    animation: bossHurt 0.5s ease-out !important;
}

@keyframes bossHurt {
    0% {
        transform: translateX(0);
        filter: brightness(1) drop-shadow(0 0 20px var(--fire-glow));
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-15px);
        filter: brightness(3) drop-shadow(0 0 40px white);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(15px);
        filter: brightness(0.5);
    }
    100% {
        transform: translateX(0);
        filter: brightness(1) drop-shadow(0 0 20px var(--fire-glow));
    }
}

/* Boss Attack Animation */
.boss-sprite.attacking {
    animation: bossAttack 0.6s ease-out !important;
}

@keyframes bossAttack {
    0% {
        transform: scale(1) translateY(0);
    }
    30% {
        transform: scale(1.4) translateY(-30px);
        filter: brightness(1.5) drop-shadow(0 0 50px var(--fire-red));
    }
    60% {
        transform: scale(0.9) translateY(20px);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

/* Boss targeted by attack */
.boss-sprite-container.targeted::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, var(--mana-glow) 0%, transparent 70%);
    animation: targetGlow 0.5s ease-out;
    pointer-events: none;
    border-radius: 50%;
}

@keyframes targetGlow {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

/* Boss Info */
.boss-info {
    margin-bottom: 0.5rem;
}

.boss-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--fire-bright);
    margin: 0 0 0.15rem;
    text-shadow: 0 0 20px var(--fire-glow);
    letter-spacing: 0.05em;
}

.boss-title {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ==================== BOSS HP BAR ==================== */
.boss-hp-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.boss-hp-bar {
    width: 280px;
    height: 24px;
    background: var(--bg-void);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--fire-red);
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5);
    position: relative;
}

.boss-hp-fill {
    height: 100%;
    background: linear-gradient(90deg,
        var(--fire-red) 0%,
        #ff6b6b 50%,
        var(--fire-bright) 100%);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    box-shadow: 0 0 15px var(--fire-glow);
}

.boss-hp-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
    border-radius: 10px 10px 0 0;
}

.boss-hp-fill.warning {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.boss-hp-fill.critical {
    background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%);
    animation: hpCritical 0.5s ease-in-out infinite;
}

@keyframes hpCritical {
    0%, 100% {
        box-shadow: 0 0 15px var(--fire-glow);
    }
    50% {
        box-shadow: 0 0 30px var(--fire-red);
    }
}

.boss-hp-text {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--fire-bright);
    min-width: 90px;
    text-shadow: 0 0 10px var(--fire-glow);
}

/* ==================== FLOATING DAMAGE NUMBERS ==================== */
.damage-numbers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: visible;
}

.floating-damage {
    position: absolute;
    top: 30%;
    left: 50%;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--fire-bright);
    text-shadow:
        0 0 10px var(--fire-red),
        0 0 20px var(--fire-glow),
        2px 2px 0 rgba(0,0,0,0.5);
    animation: floatUp 1s ease-out forwards;
    z-index: 100;
}

@keyframes floatUp {
    0% {
        transform: translate(-50%, 0) scale(0.5);
        opacity: 0;
    }
    20% {
        transform: translate(-50%, -20px) scale(1.3);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -100px) scale(1);
        opacity: 0;
    }
}

/* ==================== BATTLE LOG ==================== */
.battle-log {
    background: var(--bg-void);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 0.75rem;
    min-height: 100px;
    max-height: 140px;
    overflow-y: auto;
    margin-bottom: 0.75rem;
}

.battle-log-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.battle-log-entry {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    animation: logEntryAppear 0.3s ease-out;
}

@keyframes logEntryAppear {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.battle-log-entry.success {
    color: var(--nature-bright);
    background: var(--nature-soft);
}

.battle-log-entry.danger {
    color: var(--fire-bright);
    background: rgba(230, 57, 70, 0.15);
}

.battle-log-entry.system {
    color: var(--mana-bright);
    font-style: italic;
}

/* ==================== ROUND INDICATOR ==================== */
.round-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.round-label {
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.round-dots {
    display: flex;
    gap: 0.5rem;
}

.round-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.round-dot.pending {
    background: var(--bg-elevated);
    color: var(--text-muted);
    border: 2px solid var(--border-default);
}

.round-dot.current {
    background: var(--magic-soft);
    color: var(--magic-bright);
    border: 2px solid var(--magic-purple);
    box-shadow: 0 0 15px var(--magic-glow);
    animation: currentRoundPulse 1.5s ease-in-out infinite;
}

@keyframes currentRoundPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px var(--magic-glow);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 25px var(--magic-glow);
    }
}

.round-dot.completed {
    background: var(--nature-soft);
    color: var(--nature-bright);
    border: 2px solid var(--nature-green);
}

/* ==================== CHALLENGE AREA ==================== */
.challenge-area {
    background: var(--bg-elevated);
    border: 2px solid var(--mana-blue);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 0 20px var(--mana-glow);
}

.challenge-area.hidden {
    display: none;
}

.challenge-title {
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--mana-bright);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 0.75rem;
}

.challenge-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-bright);
    margin: 0 0 0.5rem;
    line-height: 1.4;
}

.challenge-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    background: var(--bg-parchment);
    border-radius: 6px;
    border-left: 3px solid var(--gold-ancient);
    font-family: var(--font-mono);
}

.challenge-hint strong {
    color: var(--gold-bright);
}

/* ==================== BATTLE ACTIONS ==================== */
.battle-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.battle-btn {
    padding: 0.875rem 1.5rem;
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.03em;
}

.attack-btn {
    background: linear-gradient(135deg, var(--nature-green), var(--nature-bright));
    color: #0a0a0f;
    border: none;
    box-shadow: 0 4px 15px rgba(82, 183, 136, 0.4);
}

.attack-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(82, 183, 136, 0.6);
}

.attack-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.attack-btn.casting {
    animation: codePulse 0.5s ease-in-out;
}

@keyframes codePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(82, 183, 136, 0.4);
    }
    50% {
        transform: scale(0.95);
        box-shadow: 0 0 30px var(--mana-blue), 0 0 60px var(--magic-purple);
    }
}

.retreat-btn {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 2px solid var(--border-default);
}

.retreat-btn:hover {
    background: var(--bg-hover);
    border-color: var(--fire-red);
    color: var(--fire-bright);
}

.continue-btn {
    display: block;
    margin: 0.5rem auto 1rem;
    padding: 0.6rem 1.5rem;
    background: var(--magic-soft);
    color: var(--magic-bright);
    border: 2px solid var(--magic-purple);
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.continue-btn:hover {
    background: rgba(157, 78, 221, 0.3);
    box-shadow: 0 0 20px var(--magic-glow);
}

.continue-btn.hidden {
    display: none;
}

/* ==================== SCREEN EFFECTS ==================== */

/* Screen Shake */
.boss-battle-modal.screen-shake .battle-container {
    animation: screenShake 0.5s ease-out;
}

@keyframes screenShake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-10px, -5px) rotate(-1deg); }
    20% { transform: translate(10px, 5px) rotate(1deg); }
    30% { transform: translate(-10px, 5px) rotate(0deg); }
    40% { transform: translate(10px, -5px) rotate(1deg); }
    50% { transform: translate(-5px, 10px) rotate(-1deg); }
    60% { transform: translate(5px, -10px) rotate(0deg); }
    70% { transform: translate(-5px, -5px) rotate(1deg); }
    80% { transform: translate(5px, 5px) rotate(-1deg); }
    90% { transform: translate(0, -5px) rotate(0deg); }
}

/* Damage Flash */
.boss-battle-modal.damage-flash::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--fire-red);
    opacity: 0;
    pointer-events: none;
    animation: damageFlash 0.3s ease-out;
    z-index: 10;
}

@keyframes damageFlash {
    0% { opacity: 0.6; }
    100% { opacity: 0; }
}

/* ==================== PARTICLES ==================== */
.particle-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    border-radius: 50%;
    animation: particleMove var(--duration, 0.8s) ease-out forwards;
}

.particle-code {
    width: 8px;
    height: 8px;
    background: var(--mana-bright);
    box-shadow: 0 0 10px var(--mana-blue);
}

.particle-damage {
    width: 10px;
    height: 10px;
    background: var(--fire-bright);
    box-shadow: 0 0 10px var(--fire-red);
}

.particle-boss-attack {
    width: 14px;
    height: 14px;
    background: var(--fire-red);
    box-shadow: 0 0 15px var(--fire-glow);
}

.particle-victory {
    width: 12px;
    height: 12px;
    background: var(--gold-bright);
    box-shadow: 0 0 10px var(--gold-glow);
}

@keyframes particleMove {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform:
            translate(
                calc(var(--dx, 0) * 1px),
                calc(var(--dy, 0) * 1px)
            )
            scale(0);
        opacity: 0;
    }
}

/* ==================== VICTORY OVERLAY ==================== */
.victory-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(8, 8, 16, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.5s ease-out;
    border-radius: 14px;
    z-index: 20;
}

.victory-overlay.hidden {
    display: none;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.victory-content {
    text-align: center;
    animation: victoryAppear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 2rem;
}

@keyframes victoryAppear {
    0% {
        transform: scale(0) rotate(-10deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.1) rotate(5deg);
    }
    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.victory-title {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--gold-ancient), var(--gold-bright), white, var(--gold-bright));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: victoryShine 2s ease-in-out infinite;
    margin: 0 0 1rem;
}

@keyframes victoryShine {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.victory-message {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
    max-width: 400px;
}

.victory-xp {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold-bright);
    text-shadow: 0 0 20px var(--gold-glow);
    margin-bottom: 1.5rem;
}

.victory-close-btn {
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, var(--gold-ancient), var(--gold-bright));
    color: #0a0a0f;
    border: none;
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 20px var(--gold-glow);
}

.victory-close-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 30px var(--gold-glow);
}

/* ==================== DEFEAT OVERLAY ==================== */
.defeat-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(8, 8, 16, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    z-index: 20;
}

.defeat-overlay.hidden {
    display: none;
}

.defeat-content {
    text-align: center;
    padding: 2rem;
}

.defeat-title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--fire-red);
    text-shadow: 0 0 30px var(--fire-glow);
    margin: 0 0 1rem;
}

.defeat-message {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin: 0 0 2rem;
}

.defeat-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.retry-btn,
.retreat-final-btn {
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.retry-btn {
    background: linear-gradient(135deg, var(--magic-purple), var(--magic-bright));
    color: white;
    border: none;
}

.retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--magic-glow);
}

.retreat-final-btn {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 2px solid var(--border-default);
}

/* ==================== BOSS BATTLE BUTTON IN EXERCISE ==================== */
.start-boss-battle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--pixel-red);
    color: var(--pixel-white);
    border: 4px solid var(--pixel-black);
    font-family: var(--font-pixel);
    font-size: 0.6rem;
    cursor: pointer;
    transition: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 4px 4px 0 var(--pixel-black);
}

.start-boss-battle-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--pixel-black);
}

.start-boss-battle-btn:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

.boss-battle-icon {
    font-size: 1rem;
}

/* ==================== RESPONSIVE (Neomon Style) ==================== */
@media (max-width: 900px) {
    .battle-container {
        width: 100%;
        height: 100%;
    }

    .neomon-arena {
        min-height: 250px;
    }

    .neomon-boss-area {
        right: 20px;
        top: 10px;
    }

    .neomon-player-area {
        left: 20px;
        bottom: 10px;
    }

    .neomon-player-info {
        right: 20px;
        bottom: 10px;
    }

    .neomon-boss-info,
    .neomon-player-info {
        min-width: 150px;
        padding: 6px 10px;
    }

    .neomon-boss-name,
    .neomon-player-name {
        font-size: 10px;
    }

    .neomon-textbox {
        padding: 12px;
        min-height: 100px;
    }

    .neomon-text {
        font-size: 12px;
    }

    .neomon-menu-btn {
        font-size: 10px;
        padding: 6px 12px;
    }
}

@media (max-width: 600px) {
    .boss-battle-modal {
        padding: 0;
    }

    .battle-container {
        border-width: 2px;
        box-shadow: 4px 4px 0 var(--pixel-shadow);
    }

    .neomon-arena {
        min-height: 200px;
    }

    .neomon-boss-sprite {
        width: 64px;
        height: 64px;
    }

    .neomon-player-sprite {
        width: 48px;
        height: 48px;
    }

    .pixel-sprite {
        transform: scale(2);
    }

    .neomon-boss-info,
    .neomon-player-info {
        min-width: 120px;
        padding: 4px 8px;
    }

    .neomon-boss-name,
    .neomon-player-name {
        font-size: 8px;
    }

    .neomon-hp-label {
        font-size: 6px;
    }

    .neomon-hp-track {
        height: 6px;
    }

    .neomon-textbox {
        padding: 8px;
        min-height: 80px;
    }

    .neomon-text {
        font-size: 10px;
        line-height: 1.6;
    }

    .neomon-menu {
        gap: 4px;
    }

    .neomon-menu-btn {
        font-size: 8px;
        padding: 4px 8px;
    }

    .neomon-code-panel {
        height: 210px;
    }

    .neomon-editor {
        font-size: 12px;
    }

    .neomon-overlay-title {
        font-size: 18px;
    }

    .neomon-overlay-xp {
        font-size: 12px;
    }

    .neomon-overlay-btn {
        font-size: 10px;
        padding: 8px 16px;
    }
}