/* A restrained machined console: continuous rails, clear silhouettes, no ornamental image border. */
#battlefield{cursor:default;touch-action:none}
#bottom{grid-template-columns:220px 260px minmax(390px,1fr);gap:0;padding:0 12px 10px;background:linear-gradient(transparent,#08111bd9)}
#bottom>section{height:258px;border:1px solid #4c6171;border-image:none;background:linear-gradient(180deg,#1a2c3b,#0c1824 45%,#101d29);box-shadow:inset 0 1px #8599a647,inset 0 -4px #070f17,0 -8px 25px #0004;padding:8px 12px;position:relative;overflow:hidden}
#bottom>section::before{content:'';position:absolute;top:0;left:15px;right:15px;height:2px;background:linear-gradient(90deg,#c2a56b,#55717f 35%,#55717f 80%,#c2a56b)}
#bottom>.minimap-panel{border-radius:13px 0 0 0;border-right:0}
#bottom>.selection-panel{border-right:0;border-left-color:#344958}
#bottom>.command-panel{border-radius:0 13px 0 0;border-left-color:#344958}
.panel-label{height:20px;font-size:8px;letter-spacing:1.7px;padding:0 0 6px;color:#bacad4;border-color:#3d536277}
#minimap{height:175px;width:100%;margin:6px 0;outline:1px solid #667d88;box-shadow:0 0 0 3px #08121b;border-radius:2px}
.map-tools{gap:4px;padding:4px 0 0}.map-tools button{background:linear-gradient(#2c414f,#162632);border:1px solid #506270;box-shadow:inset 0 1px #7891a030;padding:5px 2px}
.selection-panel{display:flex}#selection{padding:8px 0 2px}#selection h3{font-size:13px;line-height:1.2;color:#e8e5d6;margin:2px 0 6px}#selection p{font-size:9px;color:#b1c6d0}#selection .selection-tags{font-size:6.5px!important;letter-spacing:.65px}
#selection .selected-model{width:112px;height:82px;object-fit:contain;float:left;margin:0 8px 5px -3px;filter:drop-shadow(0 6px 4px #0007)}
#selection .selected-portrait{height:102px;width:71px;border:0;border-radius:0;background:radial-gradient(ellipse,#44657988,#10212d00);margin:0 8px 4px 0}
#selection:has(.selected-model) .unit-hp{margin-left:117px}#selection:has(.selected-portrait) .unit-hp{margin-left:79px}
#orders{padding-top:6px;border-top:1px solid #344b5c;gap:3px}#orders button{font-size:7px;padding:6px 2px;border-color:#435a6b;background:linear-gradient(#2c4252,#192b3a);box-shadow:inset 0 1px #8fa3ad22}
.rally-button{font-size:9px;padding:4px 6px;margin-top:4px;background:linear-gradient(100deg,#5a4b2c55,#1b2c39);border-color:#7b704f}.rally-button small{font-size:7px}
.tabs{height:27px;gap:2px;border-color:#405767;flex-shrink:0}.tabs button{font-size:9px;letter-spacing:1.1px;padding:0 14px;color:#a7bcc9;background:none}.tabs button.active{color:#ffe3a3;border-bottom:2px solid #d6b575;background:linear-gradient(0deg,#e0bf7030,transparent)}
#cards,#cards.build-cards,#cards.hero-cards,#cards.tactic-cards,#cards:not(.build-cards):not(.hero-cards):not(.tactic-cards):not(.power-cards){display:grid;grid-template-columns:repeat(6,minmax(90px,1fr));grid-auto-rows:86px;align-content:start;gap:6px;padding:8px 0 6px;overflow-y:auto;overflow-x:hidden;min-height:0;height:auto}
.unit-card{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;position:relative;min-height:86px;min-width:0;padding:0 7px 4px;border:1px solid #425e71;border-top-color:#607988;border-radius:3px;background:linear-gradient(150deg,#30495c,#152b3c 60%,#102232);box-shadow:inset 0 1px #bedde516,inset 0 -2px #050e1755;text-align:left;overflow:hidden}
.unit-card:hover{border-color:#e0c583;background:linear-gradient(150deg,#48657a,#243e50 70%,#172d3c);box-shadow:inset 0 0 0 1px #e5c98044}
.unit-card .model-thumb{width:100%;height:55px;object-fit:contain;margin:0;flex-shrink:0;filter:drop-shadow(0 4px 3px #0009);pointer-events:none}
.unit-card strong{display:block;font-size:11px;line-height:13px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#ecede5;margin:0;align-self:stretch;flex-shrink:0;text-shadow:0 1px #0008}
.unit-card small{font-size:9px;line-height:12px;color:#d6c397;margin:0;flex-shrink:0}.unit-card small span{display:none}
.unit-card .key{top:4px;right:5px;font:9px ui-monospace,monospace;color:#c0ced3;background:#0b1a2799;padding:0 3px;border:1px solid #5a738177;border-radius:2px;z-index:1}
.unit-card .count{top:3px;left:3px;background:#e1bd75;color:#101f2b;font-size:8px;z-index:1}.unit-card.unavailable{opacity:.68;filter:saturate(.68)}.unit-card.placing{border-color:#ffe19a;box-shadow:inset 0 0 0 1px #eac480}
.unit-card .portrait{position:absolute;right:0;top:0;width:57px;height:86px;margin:0;border:0;border-radius:0;background:none;opacity:1}.unit-card .portrait svg{height:100%;width:100%;max-height:none;filter:drop-shadow(0 3px 3px #0006)}
.unit-card.hero-card{padding:8px 4px 4px 7px;justify-content:flex-end;min-width:0}.hero-card strong{font-size:10px;white-space:normal;width:58%;line-height:11px;z-index:1}.hero-card small{z-index:1}.hero-card .count{font-size:6px}
#cards.tactic-cards{grid-template-columns:repeat(4,minmax(90px,1fr));grid-auto-rows:172px}.tactic-cards .unit-card .model-thumb{height:116px}.tactic-cards .unit-card strong{font-size:11px;line-height:16px}.tactic-cards .unit-card small{font-size:9px;line-height:16px}
#cards.power-cards,#cards.power-cards:not(.build-cards):not(.hero-cards):not(.tactic-cards){grid-template-columns:repeat(3,minmax(100px,1fr));grid-auto-rows:172px;overflow:hidden}
.power-card{align-items:center;justify-content:center;gap:5px;border-color:#75694f;background:radial-gradient(ellipse at 50% 40%,#3d5b6d88,#142736 70%)}.power-card .power-rank{font-size:10px}.power-card .power-symbol{font-size:40px}.power-card strong{white-space:normal;text-align:center;font-size:12px;line-height:16px;align-self:center}.power-card small{font-size:8px}.power-card .power-timer{height:2px}.power-card.learned{border-color:#648c9c}
.command-footer{height:18px;min-height:18px;font-size:8px;padding:2px 0 0;border-color:#314b5d}.command-footer button{color:#d4bd83;letter-spacing:1px}.command-footer #commandHint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px}
.codex-card .model-thumb{width:100%;height:76px;object-fit:contain;filter:drop-shadow(0 4px 4px #0007)}#toast{bottom:280px}
@media(max-width:1400px){#bottom{grid-template-columns:200px 236px minmax(390px,1fr)}#cards,#cards.build-cards,#cards.hero-cards,#cards:not(.build-cards):not(.hero-cards):not(.tactic-cards):not(.power-cards){grid-template-columns:repeat(5,minmax(86px,1fr))}.tabs button{padding:0 10px;font-size:8px}#selection .selected-model{width:95px;height:77px}#selection:has(.selected-model) .unit-hp{margin-left:100px}}
@media(max-width:1150px){#bottom{grid-template-columns:174px 210px minmax(350px,1fr);padding:0 5px 5px}#bottom>section{padding:8px 8px}#cards,#cards.build-cards,#cards.hero-cards,#cards:not(.build-cards):not(.hero-cards):not(.tactic-cards):not(.power-cards){grid-template-columns:repeat(4,minmax(78px,1fr))}.tabs button{padding:0 6px;font-size:7px}.unit-card strong{font-size:8px}.selection-panel{display:flex!important}#selection .selected-model{width:82px;height:72px}.power-card strong{font-size:10px}}
/* Tactical instruments sit in three compact armoured housings, leaving the sky clear. */
#hud header{height:68px;padding:0 16px;background:none;border:0;box-shadow:none;gap:20px;align-items:flex-start;pointer-events:none}
#hud header>*{pointer-events:auto}.resources{order:0;gap:0;position:relative;flex:0 0 auto;padding:8px 16px 10px 10px;background:linear-gradient(180deg,#343e44,#19242c 45%,#0d171f);border:1px solid #61737b;border-top:0;border-radius:0 0 16px 3px;box-shadow:0 3px 0 #080f15,inset 0 -3px #a5b3b52a,0 8px 20px #0005}
.resources::after{content:'';position:absolute;bottom:3px;left:18px;right:25px;height:1px;background:linear-gradient(90deg,#e3ba70,#6d848a 50%,#71858b)}
.resources>div{min-width:128px;display:grid;grid-template-columns:32px auto;grid-template-rows:24px 12px;gap:0 9px;padding:0 16px;position:relative;border-right:1px solid #5c6b704d}.resources>div:last-child{border:0}.resources>div:first-child{min-width:146px}
.resource-symbol{height:29px;width:29px;grid-column:1;grid-row:1/3;align-self:center;fill:#447c82;stroke:#a4e5df;stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 2px 1px #0009)}
.resources>div:nth-child(2) .resource-symbol{fill:#88733b;stroke:#f2d78d}.resources>div:nth-child(3) .resource-symbol{fill:#69818a;stroke:#d6e5e7}
.resources strong{font:700 21px/24px 'Bahnschrift','Segoe UI',sans-serif;letter-spacing:.3px;font-variant-numeric:tabular-nums;color:#f7ecd4;text-shadow:0 2px 2px #0009;grid-column:2}.resources span{font-size:8px;letter-spacing:1.4px;color:#b7c2c4;grid-column:2}
.resource-meter{position:absolute;left:59px;right:16px;bottom:-4px;height:3px;background:#060c11;border:1px solid #2e4048}.resource-meter b{display:block;background:linear-gradient(90deg,#d8b45f,#f2d997);height:100%;max-width:100%}.resources>div:last-child .resource-meter b{background:#8fc8ca}.resources .energy-low{color:#ff8772}
#hud .hud-brand{order:1;margin:2px auto 0;min-width:160px;width:160px;height:57px;justify-content:center;filter:drop-shadow(0 3px 5px #0008)}#hud .hud-brand .hud-emblem{display:none}#hud .hud-brand .hud-wordmark{width:160px;height:57px}
.header-actions{order:2;display:flex;gap:5px;padding:9px 10px 11px 13px;background:linear-gradient(#303c43,#111c25);border:1px solid #5b6c75;border-top:0;border-radius:0 0 3px 13px;box-shadow:0 3px 0 #080f15,inset 0 -3px #a5b3b522}.header-actions #time{font:15px 'Bahnschrift','Segoe UI',sans-serif;letter-spacing:1px;padding:8px 8px;color:#dddfd3}.header-actions button{height:30px;min-width:31px;box-shadow:inset 0 1px #b6c9ce26,0 1px #000;border-color:#5a6a72;border-radius:2px;background:linear-gradient(#354854,#1b2a34);color:#dbe5e5}.header-actions #menuButton{padding:0 14px;color:#f0d39a}
#battleAlert{position:absolute;top:65px;left:50%;transform:translateX(-50%);padding:7px 17px;color:#ffe1c9;font-size:10px;letter-spacing:1.3px;background:linear-gradient(#812c23ee,#3c171bdd);border:1px solid #ef8b5f;border-radius:2px;box-shadow:0 3px 9px #0007;pointer-events:auto}#battleAlert span{margin-left:12px;color:#ffbc82}
#orders button.active{border-color:#c2b07c;color:#ffe2a6;background:linear-gradient(#455255,#24343c)}
.mission{top:78px}.camera-controls{top:79px}#commander{top:124px}
@media(max-width:1400px){.resources>div{min-width:108px;padding:0 12px;gap:0 7px}.resources>div:first-child{min-width:123px}.resources strong{font-size:18px}.resources .resource-symbol{width:25px;height:25px}.resource-meter{left:51px;right:12px}#hud header{gap:12px}.header-actions{gap:3px}#hud .hud-brand,#hud .hud-brand .hud-wordmark{width:139px;min-width:139px}}

.defense-level{color:#f3d38a;font-size:12px;padding:2px 6px;border:1px solid #8c7854;margin-left:5px}.defense-role{font-size:10px!important;line-height:1.5!important;color:#bad8d5!important}.defense-upgrade{width:100%;padding:9px 5px;background:linear-gradient(#3d4e46,#23342e);border:1px solid #8b9873;color:#f1dfaf;font-size:11px;font-weight:700}.defense-upgrade:disabled{opacity:.68}.defense-gains{font-size:10px!important;color:#c6cbaa!important}

#selection .defense-model{width:76px;height:76px;margin:0 8px 3px 0}.defense-gains{margin:5px 0!important;line-height:1.4!important}.defense-upgrade{padding:8px 4px}.defense-role{clear:both}

#selection:has(.defense-model) .unit-hp{margin-left:84px}