html, body {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    background-color: #1a1a1a;
    color: #e0e0e0;
    margin: 0;
    padding: 0;
    height: 100%;
}

.game-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

.console-output {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background-color: #0d0d0d;
    border: 1px solid #333;
    border-radius: 4px;
    margin-bottom: 10px;
}

.console-output div {
    white-space: pre-wrap;
    line-height: 1.0;
    margin: 0;
}

.console-input {
    display: flex;
    align-items: center;
    background-color: #0d0d0d;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 10px;
}

.console-input .prompt {
    color: #00ff00;
    margin-right: 10px;
    font-weight: bold;
}

.console-input input {
    flex: 1;
    background: transparent;
    border: none;
    color: #00ff00;
    font-family: inherit;
    font-size: 16px;
    outline: none;
}

.console-input input::placeholder {
    color: #666;
}

/* Color classes */
.color-red { color: #ff4444; }
.color-green { color: #44ff44; }
.color-blue { color: #4444ff; }
.color-yellow { color: #ffff44; }
.color-cyan { color: #44ffff; }
.color-dim { color: #888888; }
.user-input { color: #00ff00; }

/* Combat begins glow animation */
.combat-glow {
    display: inline-block;
    font-size: 1.5em;
    font-weight: bold;
    color: #ff0000;
    text-align: center;
    text-shadow:
        0 0 10px #ff0000,
        0 0 20px #ff0000,
        0 0 30px #ff0000,
        0 0 40px #ff3333;
    animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        text-shadow:
            0 0 10px #ff0000,
            0 0 20px #ff0000,
            0 0 30px #ff0000,
            0 0 40px #ff3333;
        transform: scale(1);
    }
    50% {
        text-shadow:
            0 0 20px #ff0000,
            0 0 30px #ff0000,
            0 0 40px #ff0000,
            0 0 50px #ff3333,
            0 0 60px #ff6666;
        transform: scale(1.05);
    }
}

/* Fire damage - pulsing flames */
.fire-damage {
    color: #FF4500;
    font-weight: bold;
    text-shadow:
        0 0 5px #FF4500,
        0 0 10px #FF4500,
        0 0 15px #FF6347;
    animation: fire-pulse 0.8s ease-in-out infinite;
}

@keyframes fire-pulse {
    0%, 100% {
        text-shadow:
            0 0 5px #FF4500,
            0 0 10px #FF4500,
            0 0 15px #FF6347;
    }
    50% {
        text-shadow:
            0 0 10px #FF4500,
            0 0 20px #FF4500,
            0 0 30px #FF6347,
            0 0 40px #FFD700;
    }
}

/* Ice damage - shimmering frost */
.ice-damage {
    color: #87CEEB;
    font-weight: bold;
    text-shadow:
        0 0 5px #87CEEB,
        0 0 10px #B0E0E6,
        0 0 15px #FFFFFF;
    animation: ice-shimmer 1.2s ease-in-out infinite;
}

@keyframes ice-shimmer {
    0%, 100% {
        text-shadow:
            0 0 5px #87CEEB,
            0 0 10px #B0E0E6,
            0 0 15px #FFFFFF;
        filter: brightness(1);
    }
    50% {
        text-shadow:
            0 0 10px #87CEEB,
            0 0 20px #B0E0E6,
            0 0 30px #FFFFFF,
            0 0 40px #E0FFFF;
        filter: brightness(1.3);
    }
}

/* Lightning damage - crackling energy */
.lightning-damage {
    color: #FFFF00;
    font-weight: bold;
    text-shadow:
        0 0 5px #FFFF00,
        0 0 10px #FFFF00,
        0 0 15px #FFD700;
    animation: lightning-crackle 0.3s ease-in-out infinite;
}

@keyframes lightning-crackle {
    0%, 100% {
        text-shadow:
            0 0 5px #FFFF00,
            0 0 10px #FFFF00,
            0 0 15px #FFD700;
        opacity: 1;
    }
    50% {
        text-shadow:
            0 0 15px #FFFF00,
            0 0 25px #FFFF00,
            0 0 35px #FFD700,
            0 0 45px #FFF;
        opacity: 0.9;
    }
}

/* Poison damage - toxic corrosion */
.poison-damage {
    color: #39FF14;
    font-weight: bold;
    text-shadow:
        0 0 5px #00FF00,
        0 0 10px #39FF14,
        0 0 15px #32CD32,
        0 2px 3px rgba(0, 255, 0, 0.5);
    animation: poison-corrode 2s ease-in-out infinite;
}

@keyframes poison-corrode {
    0%, 100% {
        color: #39FF14;
        text-shadow:
            0 0 5px #00FF00,
            0 0 10px #39FF14,
            0 0 15px #32CD32,
            0 2px 3px rgba(0, 255, 0, 0.5);
        filter: brightness(1) saturate(1);
    }
    33% {
        color: #00FF41;
        text-shadow:
            0 0 8px #00FF00,
            0 0 15px #39FF14,
            0 0 25px #32CD32,
            0 0 35px #228B22,
            0 3px 5px rgba(0, 255, 0, 0.6);
        filter: brightness(1.3) saturate(1.2);
    }
    66% {
        color: #32CD32;
        text-shadow:
            0 0 3px #00FF00,
            0 0 8px #32CD32,
            0 0 12px #228B22,
            0 1px 2px rgba(0, 255, 0, 0.4);
        filter: brightness(0.85) saturate(0.9);
    }
}

/* Bleed damage - dripping blood */
.bleed-damage {
    color: #DC143C;
    font-weight: bold;
    text-shadow:
        0 0 5px #8B0000,
        0 0 10px #DC143C,
        0 0 15px #FF0000,
        0 2px 3px rgba(220, 20, 60, 0.5);
    animation: bleed-drip 1.5s ease-in-out infinite;
}

@keyframes bleed-drip {
    0%, 100% {
        color: #DC143C;
        text-shadow:
            0 0 5px #8B0000,
            0 0 10px #DC143C,
            0 0 15px #FF0000,
            0 2px 3px rgba(220, 20, 60, 0.5);
        filter: brightness(1);
    }
    50% {
        color: #FF0000;
        text-shadow:
            0 0 10px #8B0000,
            0 0 20px #DC143C,
            0 0 30px #FF0000,
            0 0 40px #FF4444,
            0 3px 5px rgba(220, 20, 60, 0.7);
        filter: brightness(1.2);
    }
}

/* Victory message - golden triumph */
.victory-glow {
    display: inline-block;
    font-weight: bold;
    color: #FFD700;
    text-align: center;
    text-shadow:
        0 0 10px #FFD700,
        0 0 20px #FFD700,
        0 0 30px #FFA500,
        0 0 40px #FF8C00;
    animation: victory-pulse 2s ease-in-out infinite;
}

@keyframes victory-pulse {
    0%, 100% {
        color: #FFD700;
        text-shadow:
            0 0 10px #FFD700,
            0 0 20px #FFD700,
            0 0 30px #FFA500,
            0 0 40px #FF8C00;
        transform: scale(1);
    }
    50% {
        color: #FFED4E;
        text-shadow:
            0 0 15px #FFD700,
            0 0 30px #FFD700,
            0 0 45px #FFA500,
            0 0 60px #FF8C00,
            0 0 75px #FFD700;
        transform: scale(1.05);
    }
}

/* Victory text - triumphant green */
.victory-text {
    color: #90FF90;
    font-weight: bold;
    text-shadow:
        0 0 5px #00FF00,
        0 0 10px #90FF90;
}

/* Stats bar - cyan status display */
.stats-bar {
    color: #44ffff;
}

/* Room title - orange header */
.room-title {
    color: #FA5A0A;
    font-weight: bold;
}

/* HP Bar glows - subtle pulsing */
.hp-bar-high {
    text-shadow:
        0 0 2px #90FF90,
        0 0 4px #00FF00;
}

.hp-bar-mid {
    text-shadow:
        0 0 2px #FCFC7F,
        0 0 4px #FFFF00;
}

.hp-bar-low {
    text-shadow:
        0 0 2px #FF9999,
        0 0 4px #FF0000;
}

/* EP Bar glows - subtle pulsing */
.ep-bar-high {
    text-shadow:
        0 0 2px #B388FF,
        0 0 4px #9575CD;
}

.ep-bar-mid {
    text-shadow:
        0 0 2px #9575CD,
        0 0 4px #7E57C2;
}

.ep-bar-low {
    text-shadow:
        0 0 2px #7E57C2,
        0 0 4px #673AB7;
}

#blazor-error-ui {
    background: #800;
    color: white;
    padding: 10px;
    display: none;
}