/* Orbit metal console, compact tactical slots and an unobstructed battlefield. */
#hud{--hud-gold:#efd495;--hud-ink:#09141e;user-select:none}
#hud header{height:52px;border-bottom:2px solid #6c7072;background:linear-gradient(180deg,#32414c,#111c27 65%,#0a1019);box-shadow:0 3px 0 #050a10,0 5px 18px #0006;padding:0 19px;gap:20px}
.hud-brand{min-width:145px}.hud-brand b{font-size:13px;letter-spacing:4px;color:#ead3a4}.hud-brand span{font-size:7px;letter-spacing:2px}
.resources{gap:32px}.resources>div{min-width:116px;grid-template-rows:20px 10px}.resources strong{font:600 17px 'Segoe UI',sans-serif;color:#f6e7c3}.resources i{font-size:25px;color:#8dddea}.resources span{font-size:7px;letter-spacing:2px}.header-actions button{border-color:#4c5862;background:linear-gradient(#30404b,#17232f);box-shadow:inset 0 1px #61717a33;font-size:10px}
.mission{top:64px;left:17px;max-width:52%;font-size:10px;padding:8px 13px;background:linear-gradient(90deg,#0c1823ed,#0c182380);border-left-color:#d7b877;box-shadow:none}
.camera-controls{top:66px;right:19px;gap:3px}.camera-controls button{background:linear-gradient(#263742ee,#101c27ee);border-color:#56636c;color:#d2d9de;font-size:9px;box-shadow:inset 0 1px #75869633}
#commander{position:absolute;left:18px;top:112px;right:auto;width:179px;cursor:pointer;padding:9px 12px 10px;border:1px solid #7f755b;border-left:3px solid #d4b574;background:linear-gradient(135deg,#27303bfa,#0c1723f5);box-shadow:inset 0 1px #f9e8c21a,0 5px 15px #0005;text-align:left}
#commander:hover{border-color:#f5d497;background:#283b48}.general-stars{display:flex;gap:8px;color:#ffe1a0;font-size:19px;text-shadow:0 0 8px #e6ad4133}.general-stars i{font-style:normal}.general-stars .dim{color:#4b5155;text-shadow:none}.general-rank{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:#d4d9de;margin-top:4px}.general-rank b{font-size:8px;color:#ffe1a0}.general-progress{display:block;height:3px;background:#070c13;margin-top:8px}.general-progress i{height:100%;display:block;background:linear-gradient(90deg,#aa8646,#ffe5a0);box-shadow:0 0 7px #efc87380}
#bottom{padding:0 10px 9px;grid-template-columns:230px 268px minmax(400px,1fr);gap:7px;background:linear-gradient(transparent,#060c18a8);align-items:end}
#bottom>section{height:238px;border:13px solid transparent;border-image:url('/assets/hud-metal.png') 110 fill stretch;box-shadow:0 -3px 20px #0006;background:#111b25;overflow:hidden}
.panel-label{padding:0 3px 7px;border-bottom:1px solid #46546277;color:#c9d5dc;font-size:8px;letter-spacing:2px;height:22px}.panel-label span{font-size:7px;color:#baa577}
#minimap{margin:6px 0;width:100%;height:157px;outline:1px solid #586b71;box-shadow:0 0 0 3px #070c14}
.map-tools{padding:3px 0 0;gap:3px}.map-tools button{font-size:7px;background:#1d2c39;border-color:#4b5965;padding:5px 3px;color:#bfccd6}
.selection-panel{display:flex;flex-direction:column}#selection{padding:8px 3px 3px;min-height:0;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#526173 #12202b}#selection h3{font-size:14px;font-weight:650;color:#fff0c6;margin:3px 0 6px}#selection p{font-size:9px;line-height:1.5;color:#c2cdd5}#selection .selection-tags{font-size:7px!important;letter-spacing:1px;margin:0 0 2px!important;color:#a9bac8!important}#selection .unit-hp{height:4px;margin:5px 0;box-shadow:0 0 0 1px #03080c}#selection .rank{color:#e4c989;font-size:8px;margin-top:4px}#selection .selected-portrait{float:left;width:77px;height:108px;margin:0 10px 5px 0;background:radial-gradient(ellipse,#62738455,#101b26);border:1px solid #6c7581}#selection .selected-portrait svg{width:100%;height:100%;max-height:none}
#orders{gap:2px;padding:5px 0 0;border-top:1px solid #59647155;flex-wrap:nowrap}#orders button{padding:6px 2px;font-size:8px;min-width:0;white-space:nowrap;background:linear-gradient(#33414c,#172530);border-color:#4c5d6c;color:#dce2df}
#support{width:100%;font-size:9px;margin:3px 0;padding:5px;border:1px solid #6e8c8c;background:linear-gradient(#294748,#132b32);color:#bcf1de}
.rally-button{display:block;width:100%;text-align:left;font-size:10px;color:#ffe1a0;padding:5px 7px;background:linear-gradient(#3b3b32,#202a2d);border:1px solid #736d50;margin-top:6px}.rally-button small{display:block;font-size:8px;color:#bdc4c7;margin-top:2px}.production-item{margin-top:3px;background:#263844;font-size:8px}.progress{margin-top:4px}
.command-panel{display:flex;flex-direction:column}.tabs{height:26px;flex-shrink:0;border-bottom:1px solid #57616b}.tabs button{padding:0 13px;background:transparent;color:#9eacb8;font-size:9px;letter-spacing:1px;border:0}.tabs button.active{color:#ffe5ab;background:linear-gradient(#72634a50,#302e29);border-bottom:2px solid #e7c17e}.tabs button:hover{color:#fff0c6}.tabs>span{display:none}
#cards,#cards.build-cards,#cards.hero-cards,#cards.tactic-cards{flex:1;height:auto;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(80px,1fr));grid-auto-rows:minmax(70px,1fr);gap:5px;padding:7px 0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#586878 #12202b}
.unit-card{background:linear-gradient(135deg,#34434e,#1a2835 55%,#101a26);border:1px solid #61717a;box-shadow:inset 0 1px #a9bbca22,inset 0 -2px #02060c80;padding:6px 7px;display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:1fr 19px;align-items:center;column-gap:7px;min-height:70px;min-width:0}.unit-card:hover{background:linear-gradient(135deg,#405969,#1d3546);border-color:#b7d5df}.unit-card svg{width:46px;height:38px;grid-column:1;grid-row:1/3;color:#cedae0}.unit-card strong{white-space:normal;font-size:10px;line-height:1.15;margin:3px 0;grid-column:2;grid-row:1;align-self:end;overflow:visible}.unit-card small{font-size:9px;color:#e2cb97;margin:0;grid-column:2;grid-row:2}.unit-card small span{display:none}.unit-card .key{font-size:7px;right:4px;top:2px;color:#a1b8c7}.unit-card .count{font-size:8px;left:3px;top:3px}.unit-card.unavailable{opacity:.55;filter:saturate(.5)}.unit-card .portrait{width:49px;height:58px;grid-row:1/3;grid-column:1;margin:0;background:#0b172280}.unit-card .portrait svg{width:100%;height:100%;max-height:none}.hero-card strong{font-size:10px}
.command-footer{height:20px;min-height:20px;padding:2px 2px 0;border-top:1px solid #4e607055;font-size:8px;color:#9baebd}.command-footer button{font-size:8px;color:#ceb98f}
#cards.power-cards{grid-template-columns:repeat(3,minmax(110px,1fr));overflow:hidden}.power-card{display:flex;align-items:center;justify-content:center;text-align:center;gap:4px;position:relative;overflow:hidden;border-color:#8b795d;background:radial-gradient(ellipse at 50% 35%,#42546c66,transparent 65%),linear-gradient(#253748,#101b29)}.power-card .power-rank{font-size:11px;letter-spacing:5px;color:#d9bd82}.power-card .power-symbol{font-size:43px;line-height:1.1;color:var(--power-color);text-shadow:0 0 18px var(--power-color)}.power-card strong{font-size:13px;align-self:center}.power-card small{font-size:8px;letter-spacing:.6px}.power-card .power-timer{position:absolute;bottom:0;left:0;height:3px;background:var(--power-color)}.power-card.learned{border-color:#8aaeb9}.power-empty{display:flex;flex-direction:column;justify-content:center;gap:10px;color:#e7d4aa;grid-column:1/-1;text-align:center}.power-empty span{font-size:12px;color:#aebcca}
#cards:not(.build-cards):not(.hero-cards):not(.tactic-cards):not(.power-cards){grid-template-columns:repeat(4,minmax(80px,1fr));overflow-x:hidden}
#cards.power-cards:not(.build-cards):not(.hero-cards):not(.tactic-cards){grid-template-columns:repeat(3,minmax(110px,1fr));overflow-x:hidden}
#placementHint{top:113px;left:215px;max-width:520px;font-size:11px;background:#0a1b2bea;border-color:#e9c98a}#toast{bottom:262px;background:#10202ef5;border-color:#9c8e6c}#connection{top:108px}#paused{background:linear-gradient(#33424d,#142432);border-color:#9d9175}
@media(max-width:1300px){#bottom{grid-template-columns:205px 235px minmax(400px,1fr)}.tabs button{padding:0 9px;font-size:8px}.unit-card{grid-template-columns:35px minmax(0,1fr);column-gap:5px;padding:5px}.unit-card svg{width:34px}.unit-card strong,.hero-card strong{font-size:9px}.unit-card .portrait{width:35px;height:55px}.resources{gap:12px}.power-card strong{font-size:12px}#selection h3{font-size:12px}#orders button{font-size:7px}}
@media(max-width:1000px){#bottom{grid-template-columns:170px 200px minmax(360px,1fr);padding:0 4px 4px;gap:3px}#bottom>section{border-width:9px}.selection-panel{display:flex}.tabs button{padding:0 5px;font-size:7px}.unit-card{grid-template-columns:27px 1fr}.unit-card svg{width:27px}.command-footer #commandHint{font-size:7px}.hud-brand{display:none}.mission{max-width:65%;font-size:9px}.camera-controls{top:104px}#commander{top:103px}.power-card .power-symbol{font-size:34px}}