body { background-color: #202020; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: "Courier New", monospace; }
.game-container { width: 600px; height: 400px; background-color: #f8f8f8; border: 4px solid #fff; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }

.battle-scene {
    flex: 3; position: relative; padding: 20px; background-color: #2c1b3f;
    background-image: linear-gradient(to bottom, rgba(60, 40, 90, 0.4) 0%, rgba(20, 10, 30, 0.9) 100%), linear-gradient(rgba(10, 5, 20, 0.6) 2px, transparent 2px), linear-gradient(90deg, rgba(10, 5, 20, 0.6) 2px, transparent 2px);
    background-size: 100% 100%, 100% 60px, 120px 100%;
}

.hud { background: white; border: 2px solid #333; border-radius: 5px; padding: 10px; position: absolute; width: 180px; z-index: 10; }
.enemy-hud { top: 20px; left: 20px; }
.player-hud { bottom: 20px; right: 20px; }
.hp-bar-container { width: 100%; height: 10px; background-color: #ddd; margin-top: 5px; border: 1px solid #333; border-radius: 5px; overflow: hidden; }
.hp-fill { height: 100%; background-color: #4caf50; width: 100%; transition: width 0.5s; }

.sprite { width: 100px; height: 100px; position: absolute; border-radius: 10px; box-shadow: 0 10px 10px rgba(0,0,0,0.3); }
#enemy-sprite-box { background-color: #ff6b6b; top: 60px; right: 50px; }
.dark-blizzard-style { background-color: #89c4f4 !important; }
.king-blizzard-style { background-color: #2e0854 !important; border: 3px solid #ff00ff; }
#player-sprite-box { background-color: #4dabf7; bottom: 40px; left: 50px; }

.ui-container { flex: 1.5; background-color: #333; color: white; display: flex; border-top: 4px solid #000; }
.message-box { flex: 1.2; padding: 15px; font-size: 14px; border-right: 2px solid #555; line-height: 1.5; }
.command-box { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 10px; }

button { cursor: pointer; background: #fff; border: 2px solid #000; font-weight: bold; border-radius: 4px; font-family: inherit; font-size: 11px; }
button:disabled { background-color: #888; color: #ccc; }
.span-wide { grid-column: 1 / 3; }

.final-bolt-style { background-color: #ff4444 !important; color: white !important; animation: fb-pulse 0.8s infinite; }
@keyframes fb-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,0,0,0.7); } 70% { box-shadow: 0 0 0 10px rgba(255,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,0,0,0); } }

.ending-container { background-color: #e0e0e0; color: #333; justify-content: center; align-items: center; text-align: center; }
.true-ending-container { background: linear-gradient(135deg, #fff9db 0%, #ffd43b 100%); color: #444; justify-content: center; align-items: center; text-align: center; border: 10px double #f08c00; }
.sacrifice-container { background-color: #4a4a4a; color: #e0e0e0; justify-content: center; align-items: center; text-align: center; }
.game-over-container { background-color: #1a0000; color: #cc0000; justify-content: center; align-items: center; text-align: center; }

.crash-animation { animation: shake 0.2s infinite, flash 0.3s infinite; }
@keyframes shake { 0% { transform: translate(0,0); } 25% { transform: translate(10px, 10px); } 50% { transform: translate(-10px, -10px); } 100% { transform: translate(0,0); } }
@keyframes flash { 0% { filter: invert(0); } 50% { filter: invert(1); } 100% { filter: invert(0); } }