/* File: style.css - FULL UPDATE */
:root {
    --bg-color: #1a1a2e;
    --container-bg: #16213e;
    --accent-color: #0f3460;
    --text-color: #eaeaea;
    --highlight-green: #4cd137;
    --alert-red: #e84118;
    --warning-yellow: #f1c40f;
    --font-stack: 'Roboto', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-stack);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    height: 100vh;
    overflow: hidden;
    background-image: radial-gradient(circle at center, #232342 0%, #1a1a2e 100%);
}

/* --- MAIN MENU OVERLAY --- */
#main-menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 10, 20, 0.95);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-box {
    background: var(--container-bg);
    padding: 40px;
    border-radius: 15px;
    border: 3px solid var(--accent-color);
    text-align: center;
    max-width: 600px;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
}

.menu-title { color: var(--highlight-green); text-transform: uppercase; margin-bottom: 30px; }

.mode-selection { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; text-align: left; }
.mode-option {
    background: rgba(15, 52, 96, 0.5); padding: 15px; border-radius: 8px; cursor: pointer;
    border: 2px solid transparent; transition: all 0.3s; display: flex; align-items: center;
}
.mode-option:hover { border-color: var(--highlight-green); background: rgba(15, 52, 96, 0.8); }
.mode-option input[type="radio"] { margin-right: 15px; transform: scale(1.5); accent-color: var(--highlight-green); }
.mode-label { font-size: 18px; font-weight: bold; }
.mode-option.disabled { opacity: 0.5; cursor: not-allowed; }

.instructions { background: rgba(0,0,0,0.3); padding: 20px; border-radius: 8px; margin-bottom: 30px; text-align: left; font-size: 14px; }
.instructions h3 { color: var(--warning-yellow); margin-top: 0; }
.instr-content p strong { color: var(--highlight-green); }

#btn-start-game {
    padding: 15px 40px; font-size: 22px; font-weight: bold;
    background: var(--highlight-green); color: #000; border: none; border-radius: 50px;
    cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
}
#btn-start-game:hover { transform: scale(1.05); box-shadow: 0 0 20px var(--highlight-green); }

/* --- GAME CONTAINER --- */
#main-stage { padding: 20px; background: rgba(255, 255, 255, 0.05); border-radius: 15px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); }
#game-container { position: relative; width: 800px; height: 600px; background-color: var(--container-bg); border: 3px solid var(--accent-color); border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 50px rgba(0,0,0,0.8); background-image: linear-gradient(rgba(15, 52, 96, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 52, 96, 0.3) 1px, transparent 1px); background-size: 50px 50px; }

/* --- HUD & HP BAR --- */
#hud { display: flex; justify-content: space-between; padding: 15px 20px; background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0)); font-weight: bold; text-transform: uppercase; letter-spacing: 1px; z-index: 10; position: relative; }
.hud-left, .hud-right { display: flex; gap: 15px; }
.hud-item { background: rgba(15, 52, 96, 0.6); padding: 8px 15px; border-radius: 4px; border: 1px solid var(--accent-color); }
.highlight { color: var(--highlight-green); font-size: 1.2em; margin-left: 5px; }

.hp-container { display: flex; align-items: center; }
#hp-bar { display: flex; gap: 3px; margin-left: 10px; margin-right: 5px; }
.hp-point { width: 12px; height: 18px; background-color: var(--alert-red); border-radius: 2px; box-shadow: 0 0 5px var(--alert-red); transition: all 0.3s; }
.hp-point.lost { background-color: #333; box-shadow: none; }

/* --- GAME AREAS --- */
.game-mode-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

/* MODE 1: Falling Words */
.falling-word { position: absolute; top: -40px; color: #fff; background-color: rgba(232, 65, 24, 0.8); padding: 5px 10px; border-radius: 4px; font-weight: bold; font-size: 18px; text-shadow: 1px 1px 2px #000; white-space: nowrap; box-shadow: 0 0 10px var(--alert-red); border: 1px solid var(--alert-red); }

/* MODE 2: Flying Enemies (CẬP NHẬT MỚI) */
#enemy-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; 
    pointer-events: auto;
}

.enemy-unit {
    position: absolute; /* Để di chuyển tự do */
    background: rgba(15, 52, 96, 0.9);
    border: 2px solid var(--accent-color);
    border-radius: 8px;
    padding: 5px 10px;
    text-align: center;
    width: auto;
    min-width: 80px;
    z-index: 5;
    
    /* Transition chỉ màu sắc và scale, KHÔNG transition top/left để tránh giật */
    transition: background-color 0.2s, transform 0.2s, border-color 0.2s;
}

.enemy-icon { font-size: 40px; display: block; margin-bottom: 5px; }
.enemy-name {
    display: block; background: #000; color: var(--text-color); padding: 2px 6px; border-radius: 4px;
    font-weight: bold; font-size: 14px; border: 1px solid #555; margin-top: 2px;
}

/* Hiệu ứng báo động */
.enemy-unit.aiming { border-color: var(--alert-red); box-shadow: 0 0 15px var(--alert-red); z-index: 10; animation: shake 0.5s infinite; }
.enemy-unit.aiming .enemy-name { background: var(--alert-red); color: #fff; }

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

/* --- BOTTOM ZONE --- */
#bottom-zone { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background: linear-gradient(to top, rgba(0,0,0,0.9) 20%, transparent); padding-bottom: 20px; z-index: 20; }
#soldier-img { width: 80px; height: auto; z-index: 2; filter: drop-shadow(0 0 10px rgba(76, 209, 55, 0.5)); }
#typing-input { z-index: 3; padding: 12px 20px; font-size: 18px; text-align: center; width: 60%; border: 2px solid var(--highlight-green); border-radius: 30px; background-color: rgba(22, 33, 62, 0.9); color: var(--highlight-green); outline: none; font-family: var(--font-stack); font-weight: bold; transition: all 0.3s ease; box-shadow: 0 0 15px rgba(76, 209, 55, 0.2); }
#typing-input:focus { width: 65%; box-shadow: 0 0 25px rgba(76, 209, 55, 0.5); }
#typing-input.error { border-color: var(--alert-red); box-shadow: 0 0 15px var(--alert-red); animation: shake 0.3s; }

/* --- GAME OVER SCREEN --- */
#game-over { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26, 26, 46, 0.95); flex-direction: column; align-items: center; justify-content: center; z-index: 100; color: var(--alert-red); }
#game-over h2 { font-size: 3em; margin-bottom: 10px; text-shadow: 0 0 20px var(--alert-red); }
#game-over p { font-size: 1.5em; color: white; margin-bottom: 30px; }
.game-over-buttons { display: flex; gap: 20px; }
.btn-retry, .btn-menu { padding: 15px 30px; font-size: 18px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; transition: all 0.2s; }
.btn-retry { background-color: var(--highlight-green); color: #000; }
.btn-retry:hover { transform: scale(1.05); background-color: #fff; }
.btn-menu { background-color: var(--accent-color); color: var(--text-color); }
.btn-menu:hover { background-color: var(--text-color); color: var(--accent-color); }