body {
            margin: 0;
            overflow: hidden;
            background-color: #05050a;
            color: #eee;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            user-select: none;
        }

        #game-container {
            position: relative;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
            border: 2px solid #333;
        }

        canvas {
            display: block;
            background-color: #0b0b13;
            cursor: crosshair;
        }

        #ui-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        /* --- MAIN MENU STYLES --- */
        #main-menu {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba(5, 5, 10, 0.6); 
            backdrop-filter: blur(5px);
            z-index: 200;
            pointer-events: auto;
        }

        .menu-title {
            font-size: 80px;
            font-weight: 900;
            color: #fff;
            text-shadow: 0 0 20px #3498db, 0 0 40px #8e44ad;
            margin-bottom: 30px;
            letter-spacing: 5px;
            font-style: italic;
        }

        .menu-section {
            margin-bottom: 25px;
            text-align: center;
        }

        .menu-section h3 {
            color: #ccc;
            margin-bottom: 10px;
            font-size: 16px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .btn-group {
            display: flex;
            gap: 15px;
        }

        .menu-btn {
            background: rgba(30, 30, 40, 0.8);
            border: 2px solid #444;
            color: #fff;
            padding: 10px 20px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: 0.2s;
            text-transform: uppercase;
            min-width: 90px;
        }

        .menu-btn:hover {
            border-color: #fff;
            background: rgba(50, 50, 60, 0.9);
            transform: translateY(-2px);
        }

        .menu-btn.selected {
            background: #2ecc71;
            border-color: #27ae60;
            color: #05050a;
            box-shadow: 0 0 15px #2ecc71;
        }
        
        .menu-btn[data-diff="EASY"].selected { background: #2ecc71; box-shadow: 0 0 15px #2ecc71; }
        .menu-btn[data-diff="NORMAL"].selected { background: #3498db; box-shadow: 0 0 15px #3498db; }
        .menu-btn[data-diff="HARD"].selected { background: #e67e22; box-shadow: 0 0 15px #e67e22; }
        .menu-btn[data-diff="EXTREME"].selected { background: #e74c3c; box-shadow: 0 0 15px #e74c3c; }

        .map-card { background: rgba(255,255,255,0.05); border: 2px solid #444; padding: 6px; cursor: pointer; transition: 0.2s; text-align: center; }
        .map-card:hover { border-color: #3498db; background: rgba(52, 152, 219, 0.1); transform: scale(1.05); }
        .map-preview { background: #000; border: 1px solid #333; margin-bottom: 6px; display: block; margin-left: auto; margin-right: auto; }

        #play-btn {
            margin-top: 10px;
            padding: 15px 50px;
            font-size: 20px;
            background: transparent;
            border: 3px solid #fff;
            color: #fff;
            font-weight: 900;
            letter-spacing: 3px;
            cursor: pointer;
            transition: 0.3s;
            text-shadow: 0 0 10px #fff;
            box-shadow: 0 0 20px rgba(255,255,255,0.2);
        }

        #play-btn:hover {
            background: #fff;
            color: #000;
            box-shadow: 0 0 40px #fff;
        }

        .secondary-btn {
            margin-top: 15px;
            background: transparent;
            border: 1px solid #3498db;
            color: #3498db;
            padding: 8px 20px;
            cursor: pointer;
            font-family: monospace;
            font-size: 14px;
            transition: 0.2s;
            min-width: 150px;
        }
        .secondary-btn:hover { background: rgba(52, 152, 219, 0.1); box-shadow: 0 0 15px #3498db; }

        #game-ui {
            width: 100%;
            height: 100%;
            display: none; 
            flex-direction: column;
            justify-content: space-between;
            pointer-events: none;
        }

        /* --- GAME UI STYLES --- */
        #top-bar {
            background: linear-gradient(180deg, rgba(13, 13, 21, 0.95) 0%, rgba(13, 13, 21, 0.6) 100%);
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #333;
            pointer-events: auto;
            backdrop-filter: blur(4px);
        }

        .stat-box { display: flex; gap: 20px; font-size: 18px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
        .stat { display: flex; align-items: center; gap: 8px; }
        .stat span { color: #fff; text-shadow: 0 0 5px rgba(255,255,255,0.3); }
        .accent-money { color: #f1c40f; text-shadow: 0 0 10px #f1c40f; }
        .accent-lives { color: #e74c3c; text-shadow: 0 0 10px #e74c3c; }
        .accent-wave { color: #3498db; text-shadow: 0 0 10px #3498db; }

        #bottom-bar {
            background: linear-gradient(0deg, rgba(13, 13, 21, 0.95) 0%, rgba(13, 13, 21, 0.6) 100%);
            padding: 15px;
            display: flex;
            justify-content: center;
            gap: 10px;
            pointer-events: auto;
            backdrop-filter: blur(4px);
            z-index: 10;
        }

        .tower-btn {
            background: #1e1e28;
            border: 1px solid #444;
            border-radius: 6px;
            padding: 8px 6px;
            color: white;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 85px;
            position: relative;
            overflow: hidden;
        }

        .tower-btn:hover:not(.locked):not(.disabled) { background: #2a2a38; border-color: #888; transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
        .tower-btn.selected { border-color: #2ecc71; background: #1e2e25; box-shadow: 0 0 15px rgba(46, 204, 113, 0.2) inset; }
        .tower-btn.disabled { opacity: 0.6; cursor: not-allowed; filter: grayscale(0.8); }
        .tower-btn.locked { opacity: 0.4; cursor: default; background: #111; border-color: #222; }
        .tower-btn.locked::after { content: "🔒"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; }
        .tower-icon { width: 28px; height: 28px; margin-bottom: 6px; background-size: contain; background-repeat: no-repeat; background-position: center; }
        .tower-name { font-size: 10px; font-weight: bold; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
        .tower-cost { font-size: 10px; color: #f1c40f; font-weight: bold; }
        .unlock-info { font-size: 9px; color: #e74c3c; margin-top: 2px; display: none; }
        .tower-btn.locked .tower-cost { display: none; }
        .tower-btn.locked .unlock-info { display: block; }
        .hotkey { position: absolute; top: 2px; right: 4px; font-size: 9px; color: #666; font-weight: bold; }

        #game-over-screen {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.9); display: flex; flex-direction: column;
            align-items: center; justify-content: center; z-index: 100;
            display: none; pointer-events: auto;
        }

        h1 { margin: 0 0 10px 0; font-size: 56px; color: #e74c3c; text-shadow: 0 0 30px #e74c3c; letter-spacing: 4px; }
        
        button.restart-btn {
            background: transparent; color: #e74c3c; border: 2px solid #e74c3c;
            padding: 15px 50px; font-size: 20px; cursor: pointer; font-weight: bold;
            text-transform: uppercase; letter-spacing: 2px; transition: 0.2s; margin-top: 20px;
        }
        button.restart-btn:hover { background: #e74c3c; color: #000; box-shadow: 0 0 20px #e74c3c; }

        /* Top Bar Controls */
        .control-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        #start-wave-btn {
            background: #2ecc71; color: #fff; border: none; padding: 8px 20px;
            font-size: 14px; font-weight: 900; border-radius: 50px; cursor: pointer;
            box-shadow: 0 0 15px rgba(46, 204, 113, 0.4); pointer-events: auto;
            text-transform: uppercase; letter-spacing: 1px; animation: pulse 2s infinite;
            white-space: nowrap;
        }
        #start-wave-btn:hover { background: #27ae60; transform: scale(1.05); box-shadow: 0 0 20px rgba(46, 204, 113, 0.6); }

        #speed-btn {
            background: #34495e; color: #fff; border: 1px solid #7f8c8d; padding: 8px 15px;
            font-size: 14px; font-weight: bold; border-radius: 20px; cursor: pointer; transition: 0.2s;
            width: 70px; text-align: center; pointer-events: auto;
        }
        #speed-btn:hover { background: #2c3e50; }
        #speed-btn.active { background: #e67e22; border-color: #d35400; box-shadow: 0 0 10px #e67e22; }

        #music-btn {
            background: #8e44ad; color: #fff; border: 1px solid #9b59b6; padding: 8px 15px;
            font-size: 14px; font-weight: bold; border-radius: 20px; cursor: pointer; transition: 0.2s;
            width: 50px; text-align: center; pointer-events: auto;
        }
        #music-btn:hover { background: #9b59b6; }
        #music-btn.muted { background: #555; border-color: #777; opacity: 0.7; }

        /* Ability Buttons in Top Bar */
        .ability-btn {
            background: #2c3e50; color: #fff; border: 1px solid #7f8c8d;
            padding: 6px 12px; font-size: 12px; font-weight: bold; border-radius: 20px;
            cursor: pointer; position: relative; display: flex; align-items: center;
            justify-content: center; gap: 6px; transition: 0.2s; overflow: hidden;
            pointer-events: auto; min-width: 100px;
        }
        .ability-btn:hover { background: #34495e; border-color: #fff; }
        .ability-btn.cooldown { filter: grayscale(1); cursor: not-allowed; }
        .ability-btn.disabled { opacity: 0.5; cursor: not-allowed; }
        .ability-key { font-size: 9px; color: #ccc; background: rgba(0,0,0,0.5); padding: 1px 4px; border-radius: 3px; }
        .ability-overlay {
            position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.6);
            height: 0%; transition: height 0.1s linear; pointer-events: none;
        }
        .ability-cost { color: #f1c40f; margin-left: 2px; }

        #action-buttons {
            position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%);
            display: flex; gap: 15px; z-index: 100; pointer-events: none;
        }
        .action-btn {
            background: #444; color: #fff; border: none; padding: 10px 25px;
            font-size: 14px; font-weight: bold; border-radius: 30px; cursor: pointer;
            box-shadow: 0 0 20px rgba(0,0,0,0.5); pointer-events: auto;
            backdrop-filter: blur(4px); transition: all 0.2s; text-transform: uppercase;
            letter-spacing: 1px; display: none;
        }
        #sell-btn { background: rgba(192, 57, 43, 0.9); border: 1px solid #e74c3c; }
        #sell-btn:hover { background: #e74c3c; transform: scale(1.05); }
        #upgrade-btn { background: rgba(41, 128, 185, 0.9); border: 1px solid #3498db; }
        #upgrade-btn:hover { background: #3498db; transform: scale(1.05); }
        #upgrade-btn.disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(1); }
        #repair-btn { background: rgba(230, 126, 34, 0.9); border: 1px solid #d35400; }
        #repair-btn:hover { background: #d35400; transform: scale(1.05); }

        /* MODALS */
        .modal {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            background: #111; border: 2px solid #3498db; padding: 30px; border-radius: 10px;
            box-shadow: 0 0 50px rgba(52, 152, 219, 0.5); z-index: 300; display: none;
            pointer-events: auto; min-width: 350px;
        }
        .modal h2 { margin-top: 0; color: #3498db; text-align: center; text-transform: uppercase; }
        .setting-row { margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
        .setting-row label { color: #ccc; }
        .setting-row input { width: 80px; padding: 5px; background: #222; border: 1px solid #444; color: #fff; }
        .modal-btns { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
        .modal-btns button { padding: 8px 16px; cursor: pointer; border: none; border-radius: 4px; font-weight: bold; }
        .btn-save { background: #2ecc71; color: white; }
        .btn-reset { background: #e74c3c; color: white; }
        .btn-close { background: #555; color: white; }

        /* TECH LAB SPECIFIC */
        #tech-points-display { text-align: center; color: #f1c40f; font-size: 18px; margin-bottom: 20px; font-weight: bold; }
        .tech-item { background: rgba(255,255,255,0.05); padding: 10px; margin-bottom: 10px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; }
        .tech-info { display: flex; flex-direction: column; }
        .tech-name { color: #fff; font-weight: bold; font-size: 14px; }
        .tech-level { color: #888; font-size: 12px; }
        .tech-btn { background: #3498db; border: none; color: white; padding: 5px 10px; border-radius: 3px; cursor: pointer; font-size: 12px; }
        .tech-btn:disabled { opacity: 0.5; cursor: not-allowed; background: #555; }

        /* PERK MODAL SPECIFIC */
        #perk-modal { min-width: 500px; text-align: center; }
        #perk-options { display: flex; gap: 15px; justify-content: center; margin-top: 20px; }
        .perk-card {
            background: rgba(255,255,255,0.05); border: 2px solid #444; border-radius: 8px;
            padding: 15px; width: 140px; cursor: pointer; transition: 0.2s; position: relative;
        }
        .perk-card:hover { transform: translateY(-5px); border-color: #fff; background: rgba(255,255,255,0.1); }
        .perk-title { font-weight: bold; font-size: 16px; margin-bottom: 5px; display: block; }
        .perk-icon { font-size: 32px; margin-bottom: 10px; display: block; }
        .perk-desc { font-size: 11px; color: #aaa; }

        /* COMBO INFO */
        #combo-container { max-height: 400px; overflow-y: auto; padding-right: 10px; }
        .combo-item {
            background: rgba(52, 152, 219, 0.1); border-left: 4px solid #3498db;
            padding: 10px; margin-bottom: 10px; font-size: 14px; color: #ddd;
        }
        .combo-title { font-weight: bold; color: #fff; margin-bottom: 4px; display: block; text-transform: uppercase;}
        .combo-desc { font-style: italic; color: #aaa; font-size: 12px; }

        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(46, 204, 113, 0); }
            100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
        }

        #wave-notification {
            position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%);
            font-size: 48px; font-weight: 900; color: #fff;
            text-shadow: 0 0 20px rgba(52, 152, 219, 0.8); opacity: 0;
            transition: opacity 0.5s; pointer-events: none; letter-spacing: 5px; text-align: center;
        }
        #wave-notification span { display: block; font-size: 16px; margin-top: 10px; font-weight: normal; letter-spacing: 2px; color: #aaa; text-shadow: none; }

        /* CONTROL BAR */
        #bottom-container { display: flex; flex-direction: column; width: 100%; pointer-events: none; }
        #controls-bar {
            background: #0d0d15;
            padding: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            border-top: 1px solid #333;
            pointer-events: auto;
        }
        .ctrl-btn {
            background: #2c3e50; color: #fff; border: 1px solid #444;
            padding: 8px 16px; font-weight: bold; cursor: pointer;
            border-radius: 4px; font-size: 12px; transition: 0.2s;
            display: flex; align-items: center; gap: 5px;
            text-transform: uppercase;
        }
        .ctrl-btn:hover { background: #34495e; border-color: #fff; transform: translateY(-2px); }
        #extract-btn { background: #c0392b; border-color: #e74c3c; }
        #extract-btn:hover { background: #e74c3c; }