/* SECURITY QUEST RPG UI */
.rpg-window {
    background: #000;
    border: 4px solid #fff;
    border-radius: 4px;
    box-shadow: inset 0 0 0 4px #000;
    padding: 16px;
}
.rpg-text {
    font-family: 'JetBrains Mono', monospace;
    color: #fff;
    line-height: 1.6;
    font-size: 16px;
    text-transform: uppercase;
}
.rpg-command {
    cursor: pointer;
    padding: 4px 8px;
    transition: all 0.2s;
}
.rpg-command:hover { background: #fff; color: #000; }

/* Cyber Map Styles */
.cyber-map-container {
    width: 100%;
    height: 400px;
    position: relative;
    background: #020617;
    overflow: hidden;
    border: 4px solid #fff;
}
.map-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-template-rows: repeat(10, 1fr);
    background-image: 
        linear-gradient(rgba(34, 211, 238, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 211, 238, 0.1) 1px, transparent 1px);
    background-size: calc(100% / 15) calc(100% / 10);
}
.player-avatar {
    position: absolute;
    width: calc(100% / 15);
    height: calc(100% / 10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(34, 211, 238, 0.6);
    border: 2px solid #22d3ee;
    border-radius: 4px;
    transition: all 0.1s;
    filter: drop-shadow(0 0 10px #22d3ee);
    z-index: 100;
}
.map-obstacle {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(239, 68, 68, 0.4);
    font-size: 8px;
}
.map-castle { 
    background: rgba(34, 211, 238, 0.1); 
    border: 2px solid #fff; 
    color: #fff; 
}
.map-tower { 
    background: rgba(168, 85, 247, 0.1); 
    border: 2px solid #fff; 
    color: #fff; 
}

/* Battle Scene Styles */
.battle-scene {
    position: relative;
    width: 100%;
    height: 320px;
    background: linear-gradient(to bottom, #000000 0%, #0c0a1f 60%, #1e1b4b 100%);
    overflow: hidden;
    border-bottom: 2px solid rgba(34, 211, 238, 0.3);
}
.digital-mountains {
    position: absolute;
    bottom: 40px;
    width: 200%;
    height: 140px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100' viewBox='0 0 400 100'%3E%3Cpath d='M0 100 L40 30 L80 80 L120 10 L160 90 L220 20 L280 85 L340 30 L400 100' fill='none' stroke='rgba(34, 211, 238, 0.4)' stroke-width='2'/%3E%3Cpath d='M0 100 L60 50 L120 95 L180 40 L240 85 L300 20 L360 70 L400 100' fill='none' stroke='rgba(34, 211, 238, 0.15)' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    animation: mountain-scroll 45s linear infinite;
    opacity: 0.8;
    pointer-events: none;
}
@keyframes mountain-scroll {
    from { background-position: 0 0; }
    to { background-position: -400px 0; }
}
.wasteland-grid {
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 120px;
    left: -50%;
    background-image: 
        linear-gradient(rgba(34, 211, 238, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 211, 238, 0.4) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(120px) rotateX(65deg);
    transform-origin: center bottom;
    animation: grid-scroll 3s linear infinite;
}
@keyframes grid-scroll { 
    from { background-position: 0 0; } 
    to { background-position: 0 50px; } 
}
.data-rain {
    position: absolute;
    top: 0; 
    width: 100%; 
    height: 100%;
    background: repeating-linear-gradient(0deg, transparent, transparent 98%, rgba(34, 211, 238, 0.1) 98%, rgba(34, 211, 238, 0.1) 100%);
    background-size: 100% 40px; 
    animation: rain 6s linear infinite; 
    pointer-events: none;
}
@keyframes rain { 
    from { background-position: 0 0; } 
    to { background-position: 0 1000px; } 
}

.enemy-aura {
    position: absolute; 
    width: 200px; 
    height: 200px;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.25) 0%, transparent 75%);
    border-radius: 50%; 
    animation: aura-pulse 1.5s ease-in-out infinite;
}
@keyframes aura-pulse { 
    0%, 100% { transform: scale(1); opacity: 0.4; } 
    50% { transform: scale(1.3); opacity: 0.7; } 
}
.enemy-sprite { 
    z-index: 10; 
    transition: all 0.1s; 
}
.enemy-shake { 
    animation: shake 0.3s ease-in-out; 
}
.enemy-flash { 
    animation: flash 0.15s 4; 
}
@keyframes shake { 
    0%, 100% { transform: translateX(0); } 
    25% { transform: translateX(-20px); } 
    75% { transform: translateX(20px); } 
}
@keyframes flash { 
    0%, 100% { opacity: 1; filter: brightness(1); } 
    50% { opacity: 0.2; filter: brightness(10); } 
}

.encounter-flash {
    position: absolute; inset: 0; background: #ef4444; opacity: 0; z-index: 150; pointer-events: none;
}
.is-flashing { animation: flash-warning 0.2s 4; }
@keyframes flash-warning { 0%, 100% { opacity: 0; } 50% { opacity: 0.8; } }