body { background: radial-gradient(ellipse at 50% 20%, #243634, #111c24 75%); }
#app:has(#start-screen:not(.active)) { display: none; }
#gameCanvas { width: min(800px, calc(100vw - 460px), calc(100vh - 90px)); height: min(800px, calc(100vw - 460px), calc(100vh - 90px)); border: 1px solid #4b625c; border-radius: 10px; background: #101c24; }
#game-container { box-shadow: 0 24px 70px #0006; border-radius: 10px; }
#battle-labels { position: absolute; left: 1px; top: 1px; width: calc(100% - 2px); height: calc(100% - 2px); pointer-events: none; }
#game-layout { gap: 18px; align-items: flex-start; }
#left-panel { width: 180px; }
#right-panel { width: 220px; }
#hud, #tower-panel, #build-menu { background: #18272de8; border: 1px solid #41544e; border-radius: 10px; text-align: left; }
#builder { background: #314e43; border: 1px solid #8bb89d; letter-spacing: 0.12em; padding: 14px; }
#builder.selected { background: #405e4c; border-color: #eed398; box-shadow: 0 0 12px #d2b57533; }
#build-menu h3, #tower-panel-content h3 { color: #e0ceab; letter-spacing: 0.07em; }
#build-menu .build-item { padding: 10px 8px; background: #263a3c; border-left: 3px solid var(--tower-color, #899b8a); align-items: center; }
#build-menu .build-item:hover, #build-menu .build-item.selected { background: #385052; }
#build-menu .build-item small { display: block; color: #a9bab2; font-size: 10px; margin-top: 3px; }
#build-menu .build-item .cost { color: #e2cb92; }
.build-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#build-menu .build-heading h3 { margin: 0; }
#close-build-menu { border: 1px solid #637b70; border-radius: 5px; padding: 6px 8px; color: #e1e8db; background: #2b413a; cursor: pointer; }
.build-help { margin: 9px 0; font-size: 11px; color: #b4c5b9; }
#tower-panel-content button { background: #587963; }
.view-controls { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; gap: 5px; align-items: center; pointer-events: auto; }
.view-controls span { margin-right: auto; color: #bfccc6; font-size: 10px; letter-spacing: 0.12em; text-shadow: 0 1px 3px #000; }
.view-controls button { color: #dce5da; background: #203039ed; border: 1px solid #4c625e; border-radius: 5px; padding: 5px 9px; cursor: pointer; }
.view-controls button:hover { background: #466354; }
#status-bar { background: #162328; }
.exit-button { width: 100%; margin-top: 12px; padding: 11px; color: #d3b6aa; border: 1px solid #765e56; background: #302b2b; border-radius: 7px; cursor: pointer; letter-spacing: 0.08em; }
.exit-button:hover { background: #594039; color: #fff; }
.exit-button:disabled { opacity: 0.6; cursor: wait; }
#ui-layer { z-index: 2; }
.view-controls { z-index: 3; }
@media (max-width: 900px) {
    body { overflow: auto; align-items: flex-start; padding: 18px 10px 50px; }
    #game-layout { flex-wrap: wrap; gap: 10px; max-width: 800px; }
    #game-container { order: 1; }
    #left-panel { order: 2; width: calc(45% - 5px); }
    #right-panel { order: 3; width: calc(55% - 5px); }
    #gameCanvas { width: min(780px, calc(100vw - 24px)); height: min(780px, calc(100vw - 24px)); }
    #app { max-width: 100%; }
    #build-menu, #tower-panel { min-width: 0; }
}