/* --- GLOBAL SETTINGS --- */
body { margin: 0; background-color: #000; font-family: 'Orbitron', sans-serif; overflow: hidden; color: white; user-select: none; }
canvas { display: block; cursor: crosshair; }

/* --- UI LAYOUT --- */
.ui_container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: flex; justify-content: center; align-items: center; }

/* --- HUD --- */
#gameUI { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.hud_left { position: absolute; top: 30px; left: 40px; text-align: left; pointer-events: none; }
.hud_right { position: absolute; top: 30px; right: 40px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }

/* Status Bars */
.status_bars { margin-bottom: 20px; width: 250px; }
.bar_label { font-size: 0.7rem; color: #00ff00; letter-spacing: 2px; margin-bottom: 3px; font-weight: bold; }
.bar_bg { width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.health_bg { border: 1px solid #00ff00; }
#healthBar { height: 100%; background: #00ff00; box-shadow: 0 0 10px #00ff00; transition: width 0.2s; }

/* Score & Text */
.score_box { font-size: 2rem; font-weight: 700; color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }
.sub_text { font-size: 0.8rem; color: #888; letter-spacing: 2px; text-transform: uppercase; margin-top: 5px; }
.difficulty_display { color: #ff3366; font-size: 0.8rem; font-weight: bold; margin-top: 5px; letter-spacing: 2px; }

/* --- BUTTONS --- */
.action_btn { pointer-events: auto; background: rgba(0, 255, 255, 0.2); border: 2px solid #00ffff; color: #00ffff; padding: 10px 20px; font-family: 'Orbitron', sans-serif; font-weight: bold; cursor: pointer; text-transform: uppercase; transition: all 0.2s; }
.action_btn:hover { background: #00ffff; color: #000; box-shadow: 0 0 15px #00ffff; }
.action_btn:active { transform: scale(0.95); }

.small_btn { pointer-events: auto; padding: 8px 15px; font-size: 0.8rem; background: transparent; border: 1px solid rgba(255, 50, 50, 0.5); color: rgba(255, 50, 50, 0.8); cursor: pointer; font-family: 'Orbitron', sans-serif; }
.small_btn:hover { background: rgba(255, 50, 50, 0.2); color: #fff; border-color: #ff3333; box-shadow: 0 0 15px rgba(255, 0, 0, 0.5); }

/* --- MENUS --- */
#startMenu, #gameOverMenu, #scoreHistoryMenu, #shopMenu { 
    background: rgba(10, 10, 10, 0.95); padding: 3rem 4rem; border: 1px solid rgba(255, 255, 255, 0.15); 
    border-radius: 12px; text-align: center; pointer-events: auto; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); 
    display: flex; flex-direction: column; align-items: center; gap: 20px; backdrop-filter: blur(12px); z-index: 20; min-width: 350px; 
}
.game_title { font-size: 5rem; margin: 0; line-height: 0.9; color: #fff; text-shadow: 0 0 20px rgba(0, 255, 255, 0.4); }
.subtitle { font-size: 1rem; letter-spacing: 12px; color: #00ffff; margin-bottom: 20px; }
.game_over_title { font-size: 3rem; color: #ff3366; margin: 0; text-shadow: 0 0 20px rgba(255, 51, 102, 0.6); }
#bigScoreEl { font-size: 6rem; margin: 10px 0; }

/* Difficulty Selector */
.difficulty_container { width: 100%; margin-bottom: 10px; }
.label { font-size: 0.8rem; letter-spacing: 4px; color: #666; margin-bottom: 10px; }
.difficulty_buttons { display: flex; gap: 5px; justify-content: center; }
.diff_btn { background: transparent; border: 1px solid #444; color: #666; padding: 10px 15px; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.diff_btn:hover { color: #fff; border-color: #fff; }
.diff_btn.active { background: #fff; color: #000; border-color: #fff; box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); font-weight: bold; }

/* Main Buttons */
.button_group { display: flex; flex-direction: column; gap: 15px; width: 100%; }
button { font-family: 'Orbitron', sans-serif; text-transform: uppercase; cursor: pointer; }
#mainStartBtn, #restartBtn { background: linear-gradient(45deg, #00ffff, #00cccc); color: #000; border: none; padding: 18px 60px; border-radius: 4px; font-weight: 900; font-size: 1.1rem; letter-spacing: 2px; transition: all 0.2s ease; box-shadow: 0 0 20px rgba(0, 255, 255, 0.4); }
#mainStartBtn:hover, #restartBtn:hover { background: #fff; box-shadow: 0 0 40px #00ffff; transform: scale(1.05); }

/* Outline & Danger */
.outline_btn { background: transparent; border: 2px solid rgba(255, 255, 255, 0.2); color: #fff; padding: 15px 40px; font-weight: 700; letter-spacing: 1px; }
.outline_btn:hover { background: white; color: black; box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); }
.danger_btn { background: rgba(50, 0, 0, 0.3); border: 1px solid #880000; color: #ff5555; padding: 15px 20px; font-weight: 700; }
.danger_btn:hover { background: #ff0000; color: white; box-shadow: 0 0 20px #ff0000; }

/* Gold Button for Shop */
.gold_btn { background: rgba(255, 215, 0, 0.1); border: 2px solid #ffd700; color: #ffd700; padding: 15px 40px; font-weight: 700; letter-spacing: 1px; }
.gold_btn:hover { background: #ffd700; color: black; box-shadow: 0 0 20px #ffd700; }

/* --- SHOP STYLES --- */
.credits_display { font-size: 1.2rem; color: #aaa; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 10px; width: 100%; }
.shop_grid { display: flex; gap: 20px; width: 100%; justify-content: center; }
.shop_item { border: 1px solid #333; padding: 20px; border-radius: 8px; width: 200px; display: flex; flex-direction: column; align-items: center; background: rgba(0,0,0,0.3); }
.shop_item h3 { color: #00ffff; margin: 0 0 10px 0; font-size: 1rem; }
.item_desc { font-size: 0.7rem; color: #888; height: 30px; }
.current_lvl { font-size: 0.9rem; margin: 10px 0; font-weight: bold; }
.shop_buy_btn { background: #333; color: white; border: none; padding: 10px 15px; font-size: 0.8rem; width: 100%; margin-top: auto; }
.shop_buy_btn:hover { background: #00ff00; color: black; box-shadow: 0 0 10px #00ff00; }
.shop_buy_btn:disabled { background: #222; color: #555; cursor: not-allowed; box-shadow: none; }

/* History List */
.history_list_container { width: 100%; max-height: 200px; overflow-y: auto; margin-bottom: 15px; border-top: 1px solid #333; border-bottom: 1px solid #333; }
#scoreList { list-style: none; padding: 0; margin: 0; width: 100%; }
#scoreList li { display: flex; justify-content: space-between; align-items: center; padding: 10px 5px; border-bottom: 1px solid #222; font-size: 0.9rem; color: #ccc; }
.delete_x_btn { background: transparent; border: 1px solid #444; color: #666; font-weight: bold; cursor: pointer; padding: 2px 8px; margin-left: 10px; font-size: 0.7rem; border-radius: 4px; transition: all 0.2s; }
.delete_x_btn:hover { color: #ff3366; border-color: #ff3366; box-shadow: 0 0 8px rgba(255, 51, 102, 0.5); }
.history_actions { display: flex; gap: 10px; width: 100%; justify-content: center; }