* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #050510; color: #c0c0d0; font-family: 'Courier New', monospace; min-height: 100vh; overflow: hidden; }
.hidden { display: none !important; }

#app { display: flex; background: #0a0a1a; border: 1px solid #2a2a4a; border-radius: 4px; overflow: hidden; transform-origin: top left; position: absolute; top: 0; left: 0; }
#game-container { position: relative; width: 1260px; height: 840px; }
#game-container canvas { position: absolute; top: 0; left: 0; width: 1260px; height: 840px; touch-action: none; }

#sidebar { width: 220px; height: 840px; background: #0d0d20; border-left: 1px solid #2a2a4a; padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
#game-title { font-size: 18px; font-weight: bold; text-align: center; color: #fff; text-shadow: 0 0 20px rgba(100,100,255,0.5); letter-spacing: 3px; padding-bottom: 10px; border-bottom: 1px solid #2a2a4a; }

#stats { display: flex; flex-direction: column; gap: 6px; }
.stat { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; background: #111128; border-radius: 4px; border: 1px solid #1a1a3a; }
.stat-label { font-size: 10px; color: #666; letter-spacing: 2px; }
.stat-value { font-size: 16px; font-weight: bold; color: #fff; }
#lives-value { color: #ff4444; } #lumens-value { color: #ffdd44; } #wave-value { color: #44aaff; }

.panel-title { font-size: 10px; color: #666; letter-spacing: 2px; margin-bottom: 6px; }
#tower-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.tower-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; background: #111128; border: 1px solid #2a2a4a; border-radius: 4px; color: #c0c0d0; font-family: 'Courier New', monospace; font-size: 10px; cursor: pointer; transition: all 0.15s; text-align: center; }
.tower-btn:hover { background: #1a1a3a; border-color: #4a4a6a; }
.tower-btn.selected { border-color: #fff; background: #1a1a40; box-shadow: 0 0 10px rgba(100,100,255,0.3); }
.tower-btn.disabled { opacity: 0.4; cursor: not-allowed; }
.tower-icon { width: 18px; height: 18px; border-radius: 3px; border: 2px solid; }
.tower-info { display: flex; flex-direction: column; align-items: center; }
.tower-name { font-size: 9px; color: #ddd; }
.tower-cost { font-size: 9px; color: #ffdd44; }
.tower-desc { display: none; }

#wave-controls { display: flex; gap: 6px; }
#send-wave-btn { flex: 1; padding: 10px; background: #1a1a40; border: 1px solid #4444aa; border-radius: 4px; color: #aaaaff; font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; letter-spacing: 1px; cursor: pointer; transition: all 0.15s; }
#send-wave-btn:hover { background: #2a2a60; border-color: #6666cc; color: #ccccff; box-shadow: 0 0 15px rgba(100,100,255,0.3); }
#send-wave-btn.disabled { opacity: 0.4; cursor: not-allowed; }
#send-wave-btn.early-wave { border-color: #aaaa44; color: #ffdd44; }
#send-wave-btn.early-wave:hover { background: #2a2a20; border-color: #dddd66; box-shadow: 0 0 15px rgba(255,221,68,0.2); }
#speed-btn { width: 44px; padding: 10px 0; background: #1a1a40; border: 1px solid #4444aa; border-radius: 4px; color: #aaaaff; font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; cursor: pointer; transition: all 0.15s; }
#speed-btn:hover { background: #2a2a60; border-color: #6666cc; }

#ability-controls { display: flex; gap: 6px; }
.ability-btn { flex: 1; padding: 8px; background: #1a1a20; border: 1px solid #666; border-radius: 4px; color: #ffdd44; font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold; cursor: pointer; transition: all 0.15s; }
.ability-btn:hover:not(.on-cooldown) { background: #2a2a30; border-color: #ffdd44; box-shadow: 0 0 10px rgba(255,221,68,0.2); }
.ability-btn.active { border-color: #fff; color: #fff; box-shadow: 0 0 15px rgba(255,255,255,0.3); }
.ability-btn.on-cooldown { opacity: 0.5; cursor: not-allowed; color: #888; }

#info-panel { height: 200px; overflow-y: auto; font-size: 11px; color: #555; line-height: 1.6; flex-shrink: 0; }
#info-panel p { margin-bottom: 3px; }

/* Tower info */
#tower-info { display: flex; flex-direction: column; gap: 6px; }
#tower-info-name { font-size: 13px; font-weight: bold; }
#tower-info-stats { font-size: 10px; color: #aaa; }
.stat-row { display: flex; justify-content: space-between; padding: 1px 0; }
#upgrade-desc { font-size: 9px; color: #777; font-style: italic; }
.t3-desc { font-size: 9px; color: #777; font-style: italic; margin-bottom: 4px; }
.t3-btn { background: #1a2a1a; border: 1px solid #448844; color: #88ff88; font-size: 11px; }
.t3-btn:hover:not(.disabled) { background: #2a3a2a; box-shadow: 0 0 10px rgba(100,255,100,0.2); }

.action-btn { width: 100%; padding: 7px; font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold; border-radius: 4px; cursor: pointer; transition: all 0.15s; letter-spacing: 1px; }
.action-btn.disabled { opacity: 0.4; cursor: not-allowed; }
#upgrade-btn { background: #2a2a10; border: 1px solid #888844; color: #ffdd44; }
#upgrade-btn:hover:not(.disabled) { background: #3a3a20; box-shadow: 0 0 10px rgba(255,221,68,0.2); }
#sell-btn { background: #2a1010; border: 1px solid #884444; color: #ff6644; }
#sell-btn:hover { background: #3a2020; box-shadow: 0 0 10px rgba(255,100,68,0.2); }
#deselect-btn { background: #1a1a30; border: 1px solid #3a3a5a; color: #8888aa; }
#deselect-btn:hover { background: #2a2a40; }

/* Menu */
#menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #050510; display: flex; justify-content: center; align-items: center; z-index: 200; }
#menu-content { text-align: center; padding: 20px; }
#menu-title { font-size: 48px; font-weight: bold; color: #fff; text-shadow: 0 0 30px rgba(100,100,255,0.5); letter-spacing: 5px; margin-bottom: 8px; font-family: 'Courier New', monospace; }
#menu-subtitle { color: #666; font-size: 14px; margin-bottom: 24px; font-family: 'Courier New', monospace; }
#menu-stars-total { color: #ffdd44; font-size: 16px; margin-bottom: 24px; font-family: 'Courier New', monospace; }
#map-select { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.map-card { width: 200px; padding: 24px 20px; background: #0d0d20; border: 1px solid #2a2a4a; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-family: 'Courier New', monospace; text-align: center; }
.map-card:hover:not(.locked) { border-color: #6666cc; box-shadow: 0 0 20px rgba(100,100,255,0.2); transform: translateY(-2px); }
.map-card.locked { opacity: 0.35; cursor: not-allowed; }
.map-name { font-size: 18px; color: #fff; margin-bottom: 8px; }
.map-stars { font-size: 28px; color: #ffdd44; }
.map-locked { font-size: 12px; color: #666; }

/* Overlays */
#game-over-overlay, #victory-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: flex; justify-content: center; align-items: center; z-index: 100; }
#game-over-content, #victory-content { text-align: center; padding: 40px; }
#game-over-content h1 { font-size: 48px; color: #ff4444; font-family: 'Courier New', monospace; text-shadow: 0 0 30px rgba(255,50,50,0.5); margin-bottom: 16px; }
#game-over-content p { font-size: 18px; font-family: 'Courier New', monospace; color: #aaa; margin-bottom: 24px; }
#victory-content h1 { font-size: 48px; color: #ffdd44; font-family: 'Courier New', monospace; text-shadow: 0 0 30px rgba(255,221,68,0.5); margin-bottom: 16px; }
#star-display { font-size: 48px; color: #ffdd44; margin-bottom: 16px; }
#victory-info { font-size: 16px; font-family: 'Courier New', monospace; color: #aaa; margin-bottom: 24px; }
.overlay-btn { display: block; width: 240px; margin: 8px auto; padding: 12px; background: #1a1a40; border: 1px solid #4444aa; border-radius: 4px; color: #aaaaff; font-family: 'Courier New', monospace; font-size: 14px; font-weight: bold; letter-spacing: 2px; cursor: pointer; transition: all 0.15s; }
.overlay-btn:hover { background: #2a2a60; border-color: #6666cc; color: #ccccff; box-shadow: 0 0 15px rgba(100,100,255,0.3); }

/* Branding */
.brand-menu { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 32px; text-decoration: none; opacity: 0.6; transition: opacity 0.2s; }
.brand-menu:hover { opacity: 1; }
.brand-logo { width: 60px; height: auto; filter: invert(1); }
.brand-tagline { font-size: 11px; color: #666; font-family: 'Courier New', monospace; }
.brand-credit { display: block; text-align: center; margin-top: auto; padding-top: 8px; opacity: 0.4; transition: opacity 0.2s; }
.brand-credit:hover { opacity: 0.8; }
.brand-logo-sm { width: 36px; height: auto; filter: invert(1); }