:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#e7ebe7;background:#142127;font-synthesis:none;--accent:#7bdac9;--panel:rgba(14,25,30,.96);--line:#34434a;--muted:#9daeb0;--gold:#ead09b}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,select{font:inherit}button{cursor:pointer;color:inherit;border:1px solid var(--line);background:#1d2b30;transition:background .15s,border-color .15s,transform .15s}button:hover{background:#2c3f43;border-color:#7faaa2}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:not-allowed;transform:none}button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.hidden{display:none!important}#battlefield,#overlay{position:fixed;width:100%;height:100%;inset:0;display:block}#battlefield{outline:none}#overlay{pointer-events:none}#loading{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;background:#142127;color:#cdded8}#loading span:last-child{font-size:11px;letter-spacing:3px;color:#a5b4b2}.loader{border:2px solid #405758;border-top-color:#a2e9d3;border-radius:50%;width:36px;height:36px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#menu{position:fixed;inset:0;z-index:20;background:linear-gradient(90deg,rgba(11,22,28,.97),rgba(11,22,28,.93) 30%,rgba(11,22,28,.45) 51%,transparent 75%);overflow-y:auto}.menu-panel{width:440px;padding:40px 42px 24px;min-height:100%}.brand{display:flex;gap:15px;align-items:center;font-size:10px;letter-spacing:3px;color:#b1c7c8;margin-bottom:40px}.brand strong{display:block;color:#edf4e8;font-size:24px;font-weight:750;letter-spacing:4px;margin-top:4px}.brand-mark{font-size:35px;line-height:40px;color:var(--gold);width:52px;border-top:3px solid var(--gold);border-bottom:1px solid #70817d}.brand-mark span{font-size:11px;letter-spacing:0;margin-left:6px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--accent)}h1{font-size:43px;letter-spacing:-1.4px;line-height:1.05;font-weight:650;margin:13px 0 17px}p.intro{font-size:14px;line-height:1.65;color:#c3cec9;margin-bottom:25px}.faction-card{display:flex;text-align:left;gap:15px;align-items:center;width:100%;padding:14px 15px;margin-bottom:8px;background:rgba(25,40,45,.65);border:1px solid #3d5053;position:relative}.faction-card.active{border-color:var(--accent);background:rgba(52,77,76,.64)}.faction-card.active:after{content:'✓';position:absolute;right:12px;top:12px;color:var(--accent);font-size:12px}.faction-emblem{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;font-size:23px;font-weight:800;color:var(--accent);border:1px solid #6d8881;transform:rotate(45deg)}.faction-emblem span{transform:rotate(-45deg)}.faction-info{padding-right:12px}.faction-info small{font-size:8px;letter-spacing:1.2px;color:#a7b7b4;display:block;margin-bottom:4px}.faction-info strong{font-size:17px;font-weight:600}.faction-info p{font-size:10px;color:#b6c5c0;margin:5px 0 0}.settings-row{margin:24px 0 15px}.settings-row label{display:block;font-size:9px;letter-spacing:1.7px;color:#a0b5b4;margin-bottom:9px}select{width:100%;color:#dfe7dc;border:1px solid #4c6060;background:#17272d;padding:12px;font-size:12px}.primary{width:100%;background:#c9dfb5;border-color:#c9dfb5;color:#162b29;font-weight:700;padding:15px 19px;text-align:left;display:flex;justify-content:space-between}.primary:hover{background:#e0edcd;color:#10211f}.primary span{font-size:18px;line-height:16px}.secondary{width:100%;padding:12px;margin-top:9px;background:transparent;font-size:12px}.menu-note{font-size:10px;line-height:1.8;color:#93a5a5;margin-top:18px}.map-title{position:absolute;right:38px;bottom:36px;text-shadow:0 2px 15px #0009;text-align:right;color:#f1f0df}.map-title span{font-size:10px;letter-spacing:3px}.map-title strong{display:block;font-size:42px;letter-spacing:6px;margin-top:7px}.map-title div{font-size:10px;letter-spacing:3px;margin-top:4px}header{height:64px;position:absolute;top:0;left:0;right:0;display:flex;align-items:center;padding:0 23px;gap:28px;background:linear-gradient(#122129fa,#14272bed);border-bottom:1px solid #4d625d;box-shadow:0 5px 24px #08131836}.hud-brand{min-width:170px;display:flex;flex-direction:column;gap:5px}.hud-brand b{letter-spacing:3px;font-size:16px}.hud-brand span{font-size:8px;letter-spacing:2px;color:#a7bcb6}.resources{display:flex;gap:26px;flex:1;align-items:center;justify-content:center}.resources>div{display:grid;grid-template-columns:24px auto;grid-template-rows:21px 12px;gap:0 6px;min-width:112px}.resources i{grid-row:span 2;font-size:27px;color:#cee1ad;font-style:normal;line-height:32px}.resources strong{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}.resources span{font-size:8px;letter-spacing:1.4px;color:#b1c2bb}.header-actions{display:flex;gap:7px;align-items:center}.header-actions>span{font-size:12px;color:#bdd0c5;min-width:45px;margin-right:4px;font-variant-numeric:tabular-nums}.header-actions button{height:32px;min-width:32px;font-size:12px;padding:0 11px}.mission{position:absolute;top:80px;left:23px;padding:10px 14px;background:#14262ce0;display:flex;gap:9px;align-items:center;border-left:2px solid var(--gold);font-size:11px;color:#deeadc;box-shadow:0 3px 15px #11242b29}.status-dot{width:5px;height:5px;border-radius:50%;background:#d3dfa7}#connection{position:absolute;top:80px;right:25px;background:#864d2b;padding:12px;font-size:12px}#paused{position:absolute;top:25%;left:50%;transform:translateX(-50%);background:#15282ef0;box-shadow:0 10px 50px #0005;border:1px solid #6b8982;padding:22px 35px;display:flex;align-items:center;gap:25px}#paused b{font-size:13px;letter-spacing:2px}#paused button{padding:11px 20px}#bottom{position:absolute;bottom:0;left:0;right:0;padding:0 14px 13px;display:grid;grid-template-columns:226px 204px minmax(450px,1fr);gap:10px;align-items:end;pointer-events:none;background:linear-gradient(transparent,#091b2480)}#bottom>section{background:var(--panel);border:1px solid #465a5a;box-shadow:0 10px 20px #0003;pointer-events:auto}.panel-label{font-size:9px;letter-spacing:1.6px;display:flex;justify-content:space-between;color:#b4c5be;padding:11px 12px;border-bottom:1px solid var(--line)}.panel-label span{color:var(--gold);font-size:8px;letter-spacing:.6px}#minimap{display:block;width:calc(100% - 16px);height:144px;margin:7px 8px;cursor:crosshair;outline:1px solid #899c854a}.map-tools{display:flex;gap:4px;padding:0 7px 8px}.map-tools button{font-size:8px;padding:5px;flex:1;white-space:nowrap;background:#17292e}.selection-panel{height:214px}#selection{padding:12px;min-height:124px}#selection h3{font-size:14px;margin:0 0 8px;font-weight:600;color:#eff3df}#selection p{font-size:10px;color:#b2c3bf;line-height:1.6;margin:0}#selection .unit-hp{height:3px;background:#2d4646;margin:8px 0}#selection .unit-hp span{display:block;background:#85d1a8;height:100%}.selection-tags{font-size:8px!important;color:var(--gold)!important;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px!important}#orders{display:flex;gap:4px;padding:7px 8px;border-top:1px solid var(--line)}#orders button{font-size:9px;flex:1;padding:8px 2px;white-space:nowrap}.command-panel{height:214px;min-width:0}.tabs{display:flex;border-bottom:1px solid var(--line);height:36px;align-items:stretch}.tabs button{font-size:10px;letter-spacing:1px;border:0;border-right:1px solid var(--line);padding:0 18px;background:#15252b;color:#9fb5b0}.tabs button.active{color:#e9efda;background:#31423e;border-bottom:2px solid #c9dfb5}.tabs>span{padding:12px 12px;font-size:9px;color:#c8bd92;margin-left:auto}#cards{height:143px;display:grid;grid-template-columns:repeat(5,minmax(78px,1fr));gap:6px;padding:10px;overflow-x:auto}#cards.build-cards{grid-template-columns:repeat(6,minmax(75px,1fr))}.unit-card{padding:8px 7px 7px;position:relative;background:linear-gradient(135deg,#2b3c3f,#1c2a30);text-align:left;border-color:#495b59;display:flex;flex-direction:column;justify-content:space-between;min-width:0}.unit-card:hover{border-color:var(--accent);background:linear-gradient(135deg,#3a5250,#22373c)}.unit-card svg{width:62px;height:40px;color:#c7d5c5;align-self:center;filter:drop-shadow(0 4px 2px #091b22);stroke-linejoin:round}.unit-card strong{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.unit-card small{color:#cecfab;font-size:10px;margin-top:3px}.unit-card .key{position:absolute;right:5px;top:4px;color:#a1b6b1;font-size:8px}.unit-card.unavailable{opacity:.45}.unit-card.placing{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}.unit-card .count{position:absolute;left:5px;top:4px;min-width:17px;text-align:center;background:#c0dbaf;color:#102920;font-size:10px;padding:2px}.command-footer{height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 11px;border-top:1px solid var(--line);font-size:9px;color:#9aafab}.command-footer button{font-size:8px;border:0;background:none;letter-spacing:1px;color:#dfd8b1;padding:4px 0}.production-item{display:inline-block;font-size:9px;padding:4px 5px;margin-right:3px;margin-top:7px;background:#2b4242}.production-item button{padding:0 3px;border:0;margin-left:4px;background:transparent;color:#c9bcb4}.progress{height:3px;background:#3b4e4b;margin-top:7px}.progress span{height:100%;background:var(--gold);display:block}#toast{position:absolute;bottom:250px;left:50%;transform:translateX(-50%) translateY(8px);background:#10262cf5;border:1px solid #749286;box-shadow:0 4px 20px #0003;padding:13px 22px;font-size:12px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:600px;text-align:center;z-index:70}#toast.visible{opacity:1;transform:translateX(-50%)}#toast.error{border-color:#bd7b65;color:#ffd5bd}#placementHint{position:absolute;top:130px;left:23px;background:#19302ce8;padding:12px 17px;border-left:2px solid var(--accent);font-size:12px;color:#d6e7d0;max-width:450px}dialog{border:1px solid #71948a;background:#15272d;color:#e0e9df;padding:32px;max-width:760px;width:calc(100% - 40px);box-shadow:0 25px 80px #0008}dialog::backdrop{background:#07141db0;backdrop-filter:blur(5px)}dialog h2{font-size:31px;letter-spacing:-.6px;margin:13px 0 24px}.close-dialog{position:absolute;right:15px;top:12px;border:0;background:transparent;font-size:24px}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;font-size:12px}.help-grid b{font-size:14px;color:#d6dfb7}.help-grid p,.help-tip{color:#bacac4;line-height:1.75;font-size:12px}.help-tip{padding:15px;background:#22363a;border-left:2px solid var(--gold);margin:20px 0}kbd{font-size:10px;white-space:nowrap;padding:2px 4px;background:#34464b;border:1px solid #5a6d6d;border-radius:2px}#resultDialog{max-width:500px}#resultStats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}#resultStats div{padding:13px;background:#273d3e}#resultStats b{font-size:21px;display:block;color:var(--gold)}#resultStats span{font-size:9px;color:#b5c6bd;text-transform:uppercase;letter-spacing:1px}#resultReason{font-size:13px;color:#b5c6bd}.energy-low{color:#ffc085!important}.energy-low:after{content:' !'}@media(max-width:1140px){#bottom{grid-template-columns:205px minmax(450px,1fr)}.selection-panel{display:none}.resources{gap:13px}.resources>div{min-width:90px}.hud-brand{min-width:130px}.hud-brand b{font-size:13px}.tabs>span{display:none}.header-actions{gap:4px}.menu-panel{padding-top:25px}.brand{margin-bottom:24px}}@media(max-height:780px){.menu-panel{padding-top:25px;padding-bottom:14px}.brand{margin-bottom:22px}h1{font-size:36px}.faction-card{padding:10px 14px}.settings-row{margin-top:17px}.intro{margin-bottom:18px!important}.menu-note{margin-top:12px}.map-title strong{font-size:34px}}@media(max-width:750px){.menu-panel{width:380px;padding-left:25px;padding-right:25px}#menu{background:linear-gradient(90deg,#10202bf5,#10202bbd 75%,#10202b33)}.map-title{display:none}#bottom{grid-template-columns:150px minmax(400px,1fr);padding:0 5px 5px;gap:5px}.minimap-panel{height:214px}#minimap{height:155px}.map-tools{gap:0}.map-tools button{font-size:7px}.resources>div{min-width:70px}.resources i{display:none}.resources{gap:5px}.resources strong{font-size:13px}.resources span{font-size:7px}.resources>div{grid-template-columns:1fr}.hud-brand{display:none}header{gap:10px;padding:0 10px}.header-actions button{font-size:10px;padding:0 7px}.command-footer{font-size:7px}.tabs button{font-size:8px;padding:0 9px}.unit-card strong{font-size:9px}.help-grid{grid-template-columns:1fr}#paused{max-width:95%;padding:15px;gap:12px}#paused b{font-size:10px}}

.camera-controls{position:absolute;right:23px;top:80px;display:flex;gap:5px}.camera-controls button{min-width:35px;height:34px;font-size:18px}.camera-controls #codex{font-size:9px;padding:0 12px}#commander{position:absolute;top:122px;right:23px;color:#e4cc92;font-size:10px;letter-spacing:1px;padding:8px;background:#13252be8}.settings-row{margin:13px 0}.menu-panel{overflow-y:auto;max-height:100vh}.portrait{display:block;flex-shrink:0;width:72px;height:70px;background-repeat:no-repeat;background-color:#152733;border-radius:4px;border:1px solid #496573}.hero-card .portrait{align-self:center;width:68px;height:68px}.selected-portrait{float:right;width:55px;height:55px;margin:0 0 6px 7px}.rank{color:#ebc981!important}.selection-panel{height:245px;display:flex;flex-direction:column}#selection{overflow-y:auto;flex:1;padding:10px}#orders{flex-wrap:wrap}#orders button{flex:1 1 27%;padding:5px 2px}.command-panel{height:245px}#cards{height:174px}#cards.build-cards{grid-template-columns:repeat(9,minmax(90px,1fr))}#cards.hero-cards{grid-template-columns:repeat(7,minmax(98px,1fr))}#cards.tactic-cards{grid-template-columns:repeat(4,minmax(120px,1fr))}.tabs button{padding:0 12px;white-space:nowrap}.tabs>span{font-size:8px;white-space:nowrap;padding-left:6px;padding-right:6px}#codexDialog{max-width:1000px;max-height:85vh;overflow:auto}#codexDialog>p{color:#b1c7c7;font-size:12px}#codexGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}#codexGrid article{background:#243b44;padding:10px;text-align:center}#codexGrid .portrait{margin:auto}#codexGrid strong{display:block;font-size:11px;margin:8px 0}#codexGrid p{font-size:10px;color:#b1c7c7}#toast{bottom:275px}.mission{max-width:calc(100% - 280px)}@media(max-width:1300px){.tabs>span{display:none}.tabs button{font-size:9px;padding:0 9px}}@media(max-width:900px){#codexGrid{grid-template-columns:repeat(4,1fr)}}

#briefing{color:#c1d0c7;font-size:11px;line-height:1.5;margin:9px 0 13px}.menu-panel .intro{margin-bottom:14px}.menu-panel .brand{margin-bottom:20px}.menu-panel h1{margin-top:12px}.menu-panel select{padding:9px}.menu-panel .faction-card{padding:10px 14px}

.codex-tabs{display:flex;gap:8px;margin-bottom:15px}.codex-tabs button{padding:10px 15px;font-size:11px}.codex-body{display:grid;grid-template-columns:300px 1fr;gap:20px}.codex-body aside{align-self:start;position:sticky;top:0}#modelPreview{display:block;width:300px;height:300px;cursor:grab}#profileInfo,.codex-body small{font-size:11px;line-height:1.6;color:#b1c7c7}#codexGrid{grid-template-columns:repeat(4,minmax(95px,1fr));align-items:start}.codex-card{padding:10px 5px;text-align:center}.codex-card .portrait{margin:auto}.codex-card strong{display:block;font-size:10px;margin:7px 0}.codex-card span:last-child{font-size:8px;color:#acc5c3}@media(max-width:900px){.codex-body{grid-template-columns:240px 1fr}#modelPreview{width:240px;height:240px}#codexGrid{grid-template-columns:repeat(3,minmax(85px,1fr))}}

.portrait svg,.unit-card .portrait svg{width:100%;height:100%;display:block;filter:none}

/* Eight unit classes remain accessible on narrower screens. */
#cards:not(.build-cards):not(.hero-cards):not(.tactic-cards){grid-template-columns:repeat(8,minmax(94px,1fr));overflow-x:auto}

.codex-card>svg{width:72px;height:70px;display:block;margin:auto;color:var(--accent)}

#commanderPreview{display:flex;align-items:center;gap:10px;min-height:62px;border-left:2px solid var(--accent);padding:5px 10px;margin:6px 0 12px;background:#15272c}
#commanderPreview .portrait{width:58px;height:58px}#commanderPreview strong{font-size:12px;display:block}#commanderPreview span,#commanderPreview small{display:block;font-size:10px;line-height:1.5;color:#b8ccca}#commanderPreview p{font-size:10px;line-height:1.5;color:#b8ccca;margin:0}
.menu-panel .brand{margin-bottom:12px}.menu-panel .intro{margin-bottom:10px}.menu-panel .faction-card{padding:8px 12px}.menu-panel .settings-row{margin:9px 0}