/* A continuous field console: large visual dossiers, one card rail, explicit command keys. */
#hud{--console-height:306px;--plate:#263740;--edge:#73858a;--warm:#e0c086}
#hud #bottom{grid-template-columns:224px 312px minmax(0,1fr);gap:0;padding:0 12px 10px;background:linear-gradient(transparent,#060c12aa);align-items:end}
#hud #bottom>section{height:var(--console-height);border:1px solid var(--edge);border-image:none;border-bottom:4px solid #080e15;border-radius:0;padding:12px 14px;background:linear-gradient(130deg,#3a484c22,transparent 30%),linear-gradient(180deg,#273740,#142129 30%,#101a23);box-shadow:inset 0 2px #adbdbe44,inset 0 -2px #73858a38,0 -5px 18px #0006;overflow:hidden}
#hud #bottom>.minimap-panel{border-radius:18px 0 0 0;border-right:0;padding-top:16px}
#hud #bottom>.selection-panel{border-right:0;border-left-color:#43545d;display:flex;flex-direction:column}
#hud #bottom>.command-panel{border-left-color:#43545d;border-radius:0 18px 0 0;padding:8px 13px 8px;display:flex;flex-direction:column}
#hud #bottom>section::before{top:3px;left:20px;right:20px;background:linear-gradient(90deg,#d7b476,#60747a 35%,#60747a 85%,#d7b476)}
#hud .panel-label{font-size:10px;height:26px;letter-spacing:1.4px;color:#e2e3d9;border-bottom:1px solid #72818740;display:flex;justify-content:space-between;align-items:start;gap:5px}
#hud .panel-label span{font-size:8px;letter-spacing:.3px;color:#d8bb84}
#hud #minimap{height:205px;width:100%;margin:8px 0;border:3px solid #080f16;outline:1px solid #677d84;box-shadow:inset 0 0 20px #0008;border-radius:3px}
#hud .map-tools{padding-top:4px;gap:4px;display:flex}#hud .map-tools button{font-size:9px;height:30px;padding:0 3px;flex:1;background:linear-gradient(#35474f,#1a2a35);color:#dddcc9}
#hud #selection{padding:7px 0 0;overflow-y:auto;flex:1;min-height:0;scrollbar-width:thin}
#hud #selection h3{font:600 17px/1.16 Bahnschrift,'Segoe UI',sans-serif;color:#f4e7ca;margin:3px 0 8px}
#hud #selection p{font-size:12px;line-height:1.4;margin:5px 0;color:#c2d0d3}
#hud #selection small{font-size:10px;line-height:1.45;color:#adbec6}
#hud #selection .selection-tags{font-size:9px!important;letter-spacing:.6px;line-height:1.45;margin-bottom:7px!important}
#hud #selection .selected-model{width:138px;height:133px;float:left;object-fit:contain;margin:0 9px 4px -4px;filter:drop-shadow(0 9px 5px #0008)}
#hud #selection .infantry-thumb{height:190px;width:132px;object-fit:cover;object-position:50% 10%;border-bottom:1px solid #8ba8b755;background:radial-gradient(ellipse at 50% 40%,#718c9255,transparent 72%)}
#hud #selection .selected-portrait{height:202px;width:132px;float:left;border:0;display:block;margin:0 10px 6px 0;background:radial-gradient(ellipse at 50% 40%,#718c9255,transparent 72%);overflow:hidden}
#hud #selection .selected-portrait svg{width:100%;height:100%;max-height:none}
#hud #selection .unit-hp,#hud #selection:has(.selected-model) .unit-hp,#hud #selection:has(.selected-portrait) .unit-hp{height:5px;margin:8px 0;background:#070e13;overflow:hidden;box-shadow:0 0 0 1px #6c858355}
#hud #selection .unit-hp span{background:linear-gradient(90deg,#4d977f,#a3dfbc)}
#hud #selection .rank{font-size:10px;margin-top:6px}
#hud #selection .defense-role{font-size:10px!important;clear:both;line-height:1.5!important}
#hud #selection .defense-model{height:105px;width:120px}
#hud #selection .defense-upgrade{font-size:11px;min-height:35px;padding:7px 5px;clear:both}
#hud #selection .defense-gains{font-size:10px!important}
#hud #selection .rally-button,#hud #selection .specialist-action,#hud #selection [data-eject]{font-size:11px;min-height:34px;padding:6px 8px;clear:both;display:block;width:100%}
#hud #selection .rally-button small{font-size:9px}#hud .production-item{display:block;font-size:10px;padding:5px 7px;clear:both}
#hud .selection-idle{text-align:center;padding:0 8px}#hud .selection-idle img{width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 3px 8px #0008)}
#hud #support{height:32px;font-size:11px;margin-top:5px;flex-shrink:0}
#hud .squad-portraits{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#hud .squad-portraits>div{position:relative;background:linear-gradient(#2e454f,#14222d);border-bottom:2px solid #7d9a9b;text-align:center}
#hud .squad-portraits img{width:100%;height:83px;object-fit:contain}#hud .squad-portraits .infantry-thumb{height:83px;width:100%;object-fit:cover;margin:0}
#hud .squad-portraits b{position:absolute;top:4px;right:5px;color:#ffe2a5;text-shadow:0 1px 4px black}
#hud .squad-portraits span{display:block;font-size:9px;padding:3px;line-height:1.25}
#hud .tabs{height:35px;min-height:35px;border-bottom:1px solid #71878d60;gap:2px}
#hud .tabs button{font-size:11px;letter-spacing:1.1px;padding:0 12px;color:#b7c9d0;background:none}
#hud .tabs button.active{color:#ffe3a4;background:linear-gradient(0deg,#bba26533,transparent);border-bottom:2px solid #efcc88}
#hud .card-gallery{display:flex;align-items:stretch;min-height:0;flex:1;gap:7px;padding:8px 0}
#hud .gallery-arrow{padding:0;flex:0 0 22px;border:0;border-bottom:2px solid #6e7976;background:linear-gradient(#33464b,#14242e);font:32px Bahnschrift;color:#edce92;border-radius:2px}
#hud .gallery-arrow:disabled{opacity:.25;cursor:default}
#hud #cards,#hud #cards.build-cards,#hud #cards.hero-cards,#hud #cards.tactic-cards,#hud #cards.power-cards,#hud #cards:not(.build-cards):not(.hero-cards):not(.tactic-cards):not(.power-cards){display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;flex:1;min-width:0;height:auto;padding:0 0 4px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#9a8b6d #111d27;align-items:stretch;outline-offset:-2px}
#hud #cards>.unit-card{flex:0 0 148px;display:flex;flex-direction:column;min-width:0;min-height:0;padding:0 9px 7px;position:relative;scroll-snap-align:start;border:1px solid #71838a;border-bottom:3px solid #897653;border-radius:3px;background:radial-gradient(ellipse at 50% 37%,#718b9255,transparent 70%),linear-gradient(135deg,#30434b,#14232d 65%);box-shadow:inset 0 1px #c0d2cf40,0 3px 5px #0005;overflow:hidden}
#hud #cards>.unit-card:hover{border-color:#f3d498;background:radial-gradient(ellipse at 50% 37%,#8ca9ae66,transparent 72%),linear-gradient(#3d535c,#192d36)}
#hud #cards .model-thumb{width:calc(100% + 18px);margin:0 -9px;flex:1;min-height:0;height:110px;object-fit:contain;filter:drop-shadow(0 7px 5px #0009)}
#hud #cards .infantry-thumb{object-fit:cover;object-position:50% 14%;mask-image:linear-gradient(#000 80%,transparent)}
#hud #cards strong{font:600 13px/1.18 Bahnschrift,'Segoe UI',sans-serif;white-space:normal;overflow:hidden;max-height:32px;min-height:16px;flex:0 0 auto;color:#f7ead2;margin:2px 0 3px;width:100%;z-index:1;text-shadow:0 1px 3px #000}
#hud #cards small{font-size:12px;line-height:16px;color:#d8c296;flex:0 0 auto;z-index:1}#hud #cards small span{display:none}
#hud #cards .key{font-size:10px;padding:2px 5px;right:6px;top:5px;color:#d5e1df;background:#10232cdd;border:1px solid #93b1b24d}
#hud #cards .count{font-size:10px;padding:2px 6px;top:5px;left:5px}
#hud #cards .unavailable{opacity:.68;filter:saturate(.65)}
#hud #cards .portrait{position:relative;top:auto;right:auto;float:none;width:calc(100% + 18px);height:120px;min-height:0;flex:1;margin:0 -9px;border:0;border-radius:0;background:transparent;mask-image:linear-gradient(#000 80%,transparent)}
#hud #cards .portrait svg{width:100%;height:100%;max-height:none;filter:drop-shadow(0 2px 3px #0009)}
#hud #cards .power-card{flex-basis:calc((100% - 16px)/3);justify-content:center;gap:3px;text-align:center}
#hud #cards .power-card strong{align-self:center;font-size:13px;max-height:33px;min-height:30px}
#hud #cards .power-card .power-symbol{font-size:38px}#hud #cards .power-card small{font-size:10px;line-height:12px}
#hud #orders{height:47px;min-height:47px;padding:0;gap:6px;display:flex;flex-wrap:nowrap;border:0;margin:2px 0 7px}
#hud #orders button{position:relative;min-width:0;flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:5px 7px;font-size:12px;color:#e5e7dd;border:1px solid #5d737c;border-top-color:#92a3a4;border-radius:2px;background:linear-gradient(#394d55,#1d303a);box-shadow:inset 0 1px #d3e4de20,inset 0 -3px #07121a80;text-shadow:0 1px #0008}
#hud #orders svg{width:26px;height:26px;flex-shrink:0;fill:#4b6f77;stroke:#dfdbc2;stroke-width:1.8;stroke-linejoin:round}
#hud #orders kbd{position:absolute;right:3px;top:2px;font-size:8px;padding:0 2px;background:none;border:0;color:#9fb7bd}#hud #orders kbd:empty{display:none}
#hud #orders button.active{border-color:#d9bd7b;color:#ffe4aa;background:linear-gradient(#596056,#2d3b3b)}
#hud .command-footer{height:19px;min-height:19px;font-size:9px;border-top:1px solid #465b66;padding-top:4px}#hud .command-footer button{font-size:10px}
#toast{bottom:330px}
#codexDialog{max-width:1240px;width:calc(100% - 50px);max-height:92vh;padding:24px 30px;overflow:auto}
#codexDialog h2{margin:7px 0 15px;font-size:32px}#codexFactions{display:flex;gap:6px;flex-wrap:wrap}
#codexFactions button{flex:1;min-width:125px;padding:12px 14px;font-size:13px;background:linear-gradient(#2e434e,#172a35);border:1px solid #637c87;color:#c5d4d8}
#codexFactions button.active,#codexDialog .codex-tabs button.active{color:#ffe4aa;border-color:#d2b77b;background:linear-gradient(#4c5046,#263a40)}
#codexDoctrine{font-size:13px;line-height:1.5;color:#b9cacc;margin:12px 0}
#codexDialog .codex-body{grid-template-columns:330px minmax(0,1fr);gap:25px}
#codexDialog .codex-tabs{margin:15px 0;gap:6px}#codexDialog .codex-tabs button{font-size:11px;padding:9px 16px}
#codexDialog .codex-body aside{position:static;padding:12px;background:linear-gradient(#233b48,#142530);border:1px solid #506b76;align-self:start}
#codexDialog #modelPreview{width:100%;height:280px}#profileName{font-size:23px;margin:12px 0;color:#f2dfb7}
#profileInfo{font-size:13px;line-height:1.5}#profileStats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#6e879955;border:1px solid #6e879955;margin:15px 0}
#profileStats>div{padding:9px;background:#1d313c}#profileStats dt{font-size:10px;color:#a4bdc7}#profileStats dd{margin:3px 0 0;font:600 14px Bahnschrift,'Segoe UI',sans-serif;color:#e8dec3}
#profileTradeoffs{font-size:12px;line-height:1.5;color:#b9cace}#profileTradeoffs b{color:#e2ca94}#profileTradeoffs p{margin:7px 0}
#profileTradeoffs table{width:100%;border-collapse:collapse;font-size:11px;margin:12px 0}#profileTradeoffs caption{text-align:left;color:#e0d1aa;padding-bottom:6px}#profileTradeoffs td,#profileTradeoffs th{padding:5px;text-align:left;border-bottom:1px solid #66818b55}
#codexDialog #codexGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}#codexDialog .codex-card{padding:8px;border:1px solid #526f7c;background:radial-gradient(ellipse at 50% 35%,#47677977,#192c38 70%)}
#codexDialog .codex-card.active{border-color:#e5ca8e}#codexDialog .codex-card .model-thumb{height:130px;width:100%;object-fit:contain}#codexDialog .codex-card .infantry-thumb{object-fit:cover;object-position:top}
#codexDialog .codex-card .portrait{width:100%;height:145px;margin:0;border:0;background:transparent}#codexDialog .codex-card .portrait svg{width:100%;height:100%}
#codexDialog .codex-card strong{font-size:13px;line-height:1.3}#codexDialog .codex-card span:last-child{font-size:10px;line-height:1.4}
@media(max-width:1400px){#hud #bottom{grid-template-columns:194px 282px minmax(0,1fr)}#hud .tabs button{padding:0 8px;font-size:10px}#hud #orders button{font-size:11px;gap:5px;padding:4px}#hud #orders svg{width:23px;height:23px}#hud #cards>.unit-card{flex-basis:142px}#hud #selection .selected-portrait{width:115px}#codexDialog #codexGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-height:820px){#hud{--console-height:306px}#hud #minimap{height:205px}#hud #cards>.unit-card{flex-basis:138px}#hud #selection .selected-portrait{height:175px}#hud #selection .infantry-thumb{height:163px}#hud #selection .selected-model{height:110px}#hud #orders{height:44px;min-height:44px}#hud .selection-idle img{height:90px}#toast{bottom:306px}}
@media(max-width:1100px){#hud #bottom{grid-template-columns:158px 254px minmax(0,1fr);padding:0 5px 5px}#hud #bottom>section{padding-left:8px;padding-right:8px}#hud .tabs button{padding:0 6px;font-size:9px;letter-spacing:.4px}#hud #orders button{flex-direction:column;gap:2px;font-size:10px}#hud #orders svg{width:20px;height:20px}#hud #selection .selected-model{width:109px}#hud .panel-label{font-size:8px}#codexDialog .codex-body{grid-template-columns:285px 1fr}#codexDialog #codexGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

#codexDialog #codexGrid{align-content:start}