:root{color-scheme:dark;font-family:Segoe UI,system-ui,sans-serif;background:#111813;color:#e5e9da;font-size:13px}*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer;background:#273329;border:1px solid #465240;color:#e5e9da;border-radius:5px;padding:9px 12px}button:hover{background:#354330}button:disabled{opacity:.42;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #efbd68;outline-offset:2px}input,select{border:1px solid #465240;background:#162019;border-radius:5px;padding:10px;color:#e5e9da;min-width:0}.primary{background:#edbb63;color:#172019;border-color:#edbb63;font-weight:700}.primary:hover{background:#ffd489}
header{height:76px;flex-shrink:0;border-bottom:1px solid #39442f;display:flex;align-items:center;justify-content:space-between;padding:0 23px;gap:15px;background:#151d17}.brand{display:flex;align-items:center;gap:12px}.brand b{display:grid;place-items:center;width:42px;height:42px;background:#edbb63;color:#18201a;border-radius:3px;font-size:20px}.brand strong{display:block;letter-spacing:.16em;font-size:15px}.brand small{display:block;letter-spacing:.17em;font-size:9px;color:#92a089;margin-top:5px}.score{display:flex;gap:17px;align-items:center;font:26px Consolas,monospace}#blue-score{color:#89bfdd}#red-score{color:#e09780}.versus{font:10px Segoe UI,sans-serif;color:#a9b39c;letter-spacing:.2em}.session{display:flex;align-items:center;gap:12px}#timer{font:16px Consolas,monospace;color:#bec9b0}.pill{font-size:9px;letter-spacing:.1em;border:1px solid #647457;border-radius:20px;padding:6px 9px;color:#b5c7a3}
main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 286px}#battlefield{position:relative;min-width:0;min-height:0;background:#182319;overflow:hidden}#game{width:100%;height:100%;position:absolute;inset:0}#game canvas{display:block}#map-caption{position:absolute;left:20px;top:17px;color:#e5e9c6;letter-spacing:.18em;font-size:10px;pointer-events:none;text-shadow:0 2px 4px #000}
aside{padding:20px 18px;overflow-y:auto;border-left:1px solid #39442f;background:#151d17}.eyebrow{font-size:9px;letter-spacing:.15em;color:#edbb63;font-weight:600}#room-label{color:#b8c7a3;margin-left:7px;font-family:Consolas,monospace}.players{margin:12px 0;font-size:12px}.players div{display:flex;justify-content:space-between;gap:9px;padding:5px 0}.players small{color:#90a482}#ready{width:100%}.objective-title{font-size:10px;letter-spacing:.1em;color:#a9b69b;margin:22px 0 10px}#objectives div{display:flex;justify-content:space-between;gap:10px;padding:7px 9px;border:1px solid #39482f;margin:5px 0;border-radius:4px;font-size:10px}.blue{color:#89bfdd}.red{color:#e09780}.ally{color:#b48ee6}
.requisition{display:flex;align-items:center;justify-content:space-between;margin:23px 0 10px;border-top:1px solid #39442f;padding-top:18px}.requisition span{font-size:10px;letter-spacing:.1em;color:#adba9f}.requisition strong{font:22px Consolas,monospace;color:#edbb63}.deck{display:grid;grid-template-columns:1fr 1fr;gap:7px}.deck button{display:flex;flex-direction:column;align-items:flex-start;padding:9px;gap:5px}.deck b{font-size:11px}.deck strong{font:17px Consolas,monospace;color:#edbb63}.deck small{font-size:9px;color:#a2b497}.small{color:#8f9e82;font-size:10px;line-height:1.5}
#selection-info{font-size:11px;color:#b0bea4;min-height:40px;line-height:1.5}.orders{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 16px}.orders button{font-size:10px;padding:7px 8px}.orders button.active{border-color:#edbb63;color:#edbb63}kbd{font:9px Consolas,monospace;color:#9fad92;background:#111810;padding:2px 3px;margin-left:4px;border-radius:2px}#minimap{display:block;width:100%;height:auto;border:1px solid #607153;border-radius:3px;cursor:crosshair}.controls{display:grid;gap:5px;font-size:10px;color:#8a9f7c;margin-top:14px}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#11180fb0;backdrop-filter:blur(2px);z-index:5;padding:20px}.overlay[hidden]{display:none}.briefing{width:min(440px,100%);padding:33px;background:#18221af2;border:1px solid #637752;border-radius:9px;box-shadow:0 16px 80px #0007}.briefing h1{font-size:39px;letter-spacing:-.03em;margin:11px 0}.briefing h2{font-size:28px;margin:12px 0}.briefing p{color:#acbba1;line-height:1.65;font-size:13px}.briefing label{display:block;font-size:11px;color:#a0b18f;margin:22px 0 7px}.briefing>input,.briefing>select,.briefing>.primary{width:100%;margin-bottom:10px}.briefing small{display:block;color:#8a9f7b;font-size:10px;margin-top:20px}.join-row{display:flex;gap:8px}.join-row input{flex:1;letter-spacing:.16em;text-transform:uppercase}
#match-overlay{pointer-events:none;background:#11180f80}#match-overlay .briefing{max-width:380px;padding:26px}#order-hint{position:absolute;bottom:20px;left:20px;font-size:11px;color:#d2dfbf;border:1px solid #536347;background:#182219e6;border-radius:4px;padding:9px 13px;pointer-events:none}#toast{position:absolute;bottom:60px;left:20px;max-width:calc(100% - 40px);padding:10px 13px;background:#252d1bf0;border:1px solid #bd9853;border-radius:4px;color:#f0d292;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s}#toast.visible{opacity:1}
footer{height:31px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#111812;border-top:1px solid #39442f;font-size:10px;color:#899c79;gap:15px}
@media(max-width:900px){main{grid-template-columns:minmax(0,1fr) 230px}aside{padding:13px}header{padding:0 14px}.brand small{display:none}.session .pill{display:none}.score{gap:8px;font-size:21px}}@media(max-height:700px){header{height:60px}.objective-title{margin-top:14px}.requisition{margin-top:14px}.controls{gap:3px}}

#leave[hidden]{display:none}#mode-help{font-size:11px;min-height:36px;margin:4px 0 12px}.briefing{max-height:100%;overflow:auto}.briefing label[for="mode"]{margin-top:8px}

.exit-button{border-color:#906550;color:#ecc1a6;background:#34281f}.exit-button:hover{background:#493329}#leave{width:100%;margin-top:8px}#leave-overlay{pointer-events:auto;width:100%;margin-top:12px}
#pause-banner{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;background:#1d281cf0;border:1px solid #edbb63;color:#f2e6c4;border-radius:6px;padding:8px 14px;display:flex;flex-direction:column;align-items:center;gap:2px;letter-spacing:.06em}
#pause-banner strong{color:#edbb63;font-size:15px}
#pause-banner small{color:#b5c7a3;font-size:10px}
#pause.active,.orders button.active{border-color:#edbb63;color:#edbb63}
.legend{font-size:9.5px;color:#b5c7a3;margin:-8px 0 14px;line-height:1.9}
.badge{font-size:8.5px;letter-spacing:.08em;border-radius:3px;padding:1px 4px;color:#11180f;font-weight:700}
.badge.spotted{background:#e8a54a}.badge.engaged{background:#e0533f;color:#fff}.badge.ambush{background:#7fb59a}
.briefing [hidden]{display:none}.briefing label[for="difficulty"]{margin-top:8px}
.briefing label[for="map-choice"],.briefing label[for="mission"]{margin-top:8px}#mission-brief{margin:-4px 0 8px;color:#b5c7a3}
#mission-brief.alert{color:#edbb63;font-weight:600}
#pause-banner[hidden]{display:none}
.briefing label[for="pace"]{margin-top:8px}
.training-label{display:block;color:#a9b69b;font-size:9px;letter-spacing:.08em;margin:0 0 6px}#training{width:100%;padding:8px;margin-bottom:9px;font-size:11px}#selection-info{white-space:pre-line}.fieldwork-key{border-left:2px solid #c09b66;padding-left:8px}.support{align-items:center}.planning{margin-bottom:5px}.planning button{font-size:9px;padding:7px}#smoke:disabled,#bombard:disabled{opacity:.42}
#setup-banner{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);z-index:6;background:#1d281cf2;border:1px solid #8fc2dd;color:#f2e6c4;border-radius:6px;padding:10px 16px;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:min(520px,90%);text-align:center}
#setup-banner[hidden]{display:none}#setup-banner strong{color:#9bd0ec;letter-spacing:.08em}#setup-banner small{color:#b5c7a3;font-size:10.5px;line-height:1.5}

/* Battlefield first: fixed command deck with independently scrolling panels. */
main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 252px}
header{height:62px}.brand small{font-size:8px}
#command-dock{display:grid;grid-template-columns:216px minmax(350px,1fr) minmax(290px,390px);gap:0;padding:0;overflow:hidden;border-left:0;border-top:2px solid #798165;background:linear-gradient(#252b24,#161e18);box-shadow:0 -5px 20px #0005}
#command-dock>section{min-width:0;min-height:0;padding:12px 16px;border-right:1px solid #444c3c;overflow:auto}.overview .eyebrow{margin-bottom:9px}#minimap{max-height:120px;object-fit:contain;border-radius:0}#force-roster{display:flex;gap:4px;flex-wrap:wrap;margin-top:9px}#force-roster button{font:10px Consolas,monospace;padding:5px 6px}#force-roster button.active{border-color:#edbb63;color:#edbb63}
.card-heading{display:flex;justify-content:space-between;align-items:center;color:#8f9e82;font-size:9px;letter-spacing:.12em;margin-bottom:8px}.card-heading b{color:#edbb63}
#unit-card{min-height:105px;display:flex;gap:15px}.card-empty{color:#b0bea4;align-self:center;line-height:1.7}.unit-portrait{width:118px;flex-shrink:0;background:radial-gradient(ellipse,#414b36,#1a211b);border:1px solid #535b43;display:flex;align-items:center;justify-content:center;position:relative}.unit-portrait svg{width:100%;height:92px}.unit-portrait span{position:absolute;bottom:4px;color:#b7c19f;font:9px Consolas,monospace;letter-spacing:.1em}.unit-details{flex:1;min-width:0}.unit-details h2{font-size:18px;color:#ece5ca;margin:0 0 3px}.unit-details .crew{color:#aabb98;font-size:10px;line-height:1.4}.unit-meters{display:grid;grid-template-columns:1fr 1fr;gap:6px 15px;margin-top:8px}.unit-meter{font-size:9px;color:#bbc7aa}.unit-meter label{display:flex;justify-content:space-between;gap:4px}.unit-meter meter{display:block;width:100%;height:9px;accent-color:#a4b67c}
#selection-info{font-size:10px;min-height:0;margin-top:6px;line-height:1.45;max-height:42px;overflow:auto}.unit-console .orders{margin:8px 0 0;gap:5px}.unit-console .orders button{padding:7px;font-size:10px}
.operations nav{display:flex;gap:4px;border-bottom:1px solid #465240;padding-bottom:8px}.operations nav button{flex:1;font-size:10px;padding:6px 3px}.operations nav button.active{color:#edbb63;border-color:#a08d5e;background:#33382a}.operation-content{padding-top:8px}.dock-panel[hidden]{display:none}.requisition{margin:0 0 7px;padding:0;border:0}.requisition strong{font-size:19px}.training-label{display:none}#training{font-size:10px;padding:5px;margin-bottom:6px}.deck{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.deck button{padding:6px;gap:3px}.deck button small{display:none}.deck button b{font-size:10px}.deck button strong{font-size:14px}.deck button[data-kind="mortar"]{grid-column:auto;flex-direction:column;align-items:flex-start}.deck button[data-kind="mortar"] small{display:none}#requisition-help{margin:7px 0 0}.objective-title{margin:10px 0 5px}#objectives{display:flex;gap:4px}#objectives div{flex:1;flex-direction:column;padding:5px}.players{margin:5px 0}#ready,#leave{width:auto;padding:6px 9px}.legend{margin:0 0 9px}#order-hint{bottom:10px;padding:6px 10px;font-size:10px}#toast{bottom:45px}#setup-banner{bottom:46px;padding:8px 12px}.controls{margin-top:0}.briefing{padding:22px}.briefing h1{font-size:30px}.briefing label{margin-top:10px}
@media(max-width:1100px){#command-dock{grid-template-columns:170px minmax(320px,1fr) 290px}#command-dock>section{padding:10px}.unit-portrait{width:92px}.session{gap:6px}header{padding:0 12px}.brand strong{font-size:12px}}
@media(max-width:800px){main{grid-template-rows:minmax(0,1fr) 270px}#command-dock{grid-template-columns:minmax(270px,1fr) 250px}.overview{display:none}.brand small,#invite,.session .pill{display:none}.brand b{width:30px;height:30px}.brand strong{font-size:10px}.score{font-size:17px}.session button{font-size:10px;padding:6px}.unit-details h2{font-size:15px}.unit-portrait{width:75px}#tip{display:none}}
@media(max-height:720px){main{grid-template-rows:minmax(0,1fr) 220px}header{height:48px}#command-dock>section{padding:8px 12px}#unit-card{min-height:86px}.unit-portrait svg{height:76px}.unit-console .orders button{padding:5px}.unit-meter meter{height:7px}footer{height:23px}.briefing{padding:16px}.briefing p{margin:8px 0}.briefing label{margin-top:6px}.briefing>input,.briefing>select{padding:6px;margin-bottom:4px}.briefing small{margin-top:8px}}

body.compact-deck main{grid-template-rows:minmax(0,1fr) 190px}body.compact-deck #command-dock{grid-template-columns:170px minmax(350px,1fr) 360px}body.compact-deck #unit-card{min-height:76px}body.compact-deck .unit-portrait{width:80px}body.compact-deck .unit-portrait svg{height:65px}body.compact-deck .unit-details h2{font-size:16px}body.compact-deck .crew{display:none}body.compact-deck .unit-meters{margin-top:4px;gap:4px 12px}body.compact-deck #selection-info{max-height:15px}body.compact-deck .unit-console .orders button{padding:5px}body.compact-deck #minimap{max-height:92px}body.compact-deck #command-dock>section{padding:8px 12px}body.compact-deck .requisition{margin-bottom:4px}body.compact-deck .deck button{padding:4px}body.compact-deck #training{margin-bottom:4px}body.compact-deck #requisition-help{display:none}
@media(max-width:800px){body.compact-deck #command-dock{grid-template-columns:minmax(270px,1fr) 250px}body.compact-deck main{grid-template-rows:minmax(0,1fr) 210px}#layout-preview{font-size:9px}}

#force-roster button{background:linear-gradient(to right,#43523a var(--condition,100%),#352b24 var(--condition,100%));border-radius:2px}body.compact-deck #command-dock{grid-template-columns:235px minmax(350px,1fr) 340px}body.compact-deck .overview{display:flex;flex-direction:column;gap:6px;align-items:stretch}body.compact-deck .overview .eyebrow{grid-column:1/-1;margin-bottom:0}body.compact-deck #force-roster{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;gap:3px}body.compact-deck #force-roster button{padding:6px 3px;font-size:9px}body.compact-deck #minimap{width:160px;height:100px;max-height:100px;align-self:center;object-fit:contain}
@media(max-width:800px){body.compact-deck #command-dock{grid-template-columns:minmax(270px,1fr) 250px}body.compact-deck .overview{display:none}}

body.compact-deck .unit-details .crew{display:block;font-size:9px;line-height:1.25}body.compact-deck .requisition strong{font-size:16px}body.compact-deck .deck button strong{font-size:12px}body.compact-deck .deck button b{font-size:9px}body.compact-deck #training{padding:3px}body.compact-deck .operations{display:flex;flex-direction:column;overflow:hidden}body.compact-deck .operations nav{flex-shrink:0}body.compact-deck .operation-content{overflow:auto;min-height:0}

@media(min-width:801px) and (max-width:1000px){body.compact-deck #command-dock{grid-template-columns:170px minmax(280px,1fr) 280px}body.compact-deck #minimap{width:144px;height:90px}body.compact-deck #command-dock>section{padding:8px}.brand small{display:none}}

/* Unit tiles: aligned silhouettes, labels and a separate condition strip. */
#command-dock {background:linear-gradient(180deg,#2b3027 0%,#1b231d 100%);border-top-color:#8e9170}
#command-dock .eyebrow {color:#d6bc83;letter-spacing:.13em}
.unit-console .card-heading {padding-bottom:6px;border-bottom:1px solid #a7aa7626}
.unit-portrait {border-color:#737954;border-radius:4px;box-shadow:inset 0 0 20px #11180b88}
.unit-details h2 {font-weight:600;letter-spacing:.025em}.unit-meter label {color:#aebb9f}.unit-meter label span {color:#e0dcc1;font-family:Consolas,monospace}
#force-roster button,body.compact-deck #force-roster button {
  position:relative;display:grid;grid-template-columns:14px minmax(0,1fr);align-items:center;gap:2px;
  height:31px;min-width:0;padding:3px 3px 6px;background:linear-gradient(#394333,#252f24);
  border:1px solid #58614a;border-radius:3px;box-shadow:inset 0 1px #acb08a12;
}
.roster-symbol {display:flex;align-items:center;justify-content:center}.roster-symbol svg {width:18px;height:19px}
.roster-label {font:9px 'Segoe UI',sans-serif;color:#d6ddc3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.roster-condition {position:absolute;left:4px;right:4px;bottom:3px;height:2px;background:linear-gradient(to right,#9ebc77 var(--condition,100%),#171e15 var(--condition,100%))}
#force-roster button:hover {border-color:#aeb88a;background:#424d38}
#force-roster button.active {border-color:#e5c17e;background:linear-gradient(#5a5840,#393b2a);box-shadow:inset 0 0 0 1px #e6c17b30}
#force-roster button[data-state="engaged"],#force-roster button[data-state="pinned"] {border-color:#ce7e5e}
#force-roster button[data-state="pinned"] .roster-condition {background:#dfa55c}
body.compact-deck #minimap {width:134px;height:84px;max-height:84px;border-color:#778461;box-shadow:0 2px 8px #0004}
body.compact-deck .overview {gap:6px}
body.compact-deck #force-roster {gap:4px;grid-template-columns:repeat(4,minmax(0,1fr))}
.deck button,.deck button[data-kind="mortar"],body.compact-deck .deck button {
  display:grid;grid-template-columns:20px minmax(0,1fr);gap:2px 4px;padding:5px 5px;
  align-items:center;position:relative;border-radius:3px;background:linear-gradient(#303b2c,#222c22);border-color:#56604a;
}
.deck-symbol {grid-row:1/3;display:flex;align-items:center}.deck-symbol svg {width:22px;height:22px}
.deck button b,body.compact-deck .deck button b {font-size:9px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck button strong,body.compact-deck .deck button strong {font-size:11px;line-height:1.1;color:#d9bf85}
.deck button:hover:not(:disabled) {border-color:#d3b97d;background:#3a4330}
.operations nav button {border-radius:3px;letter-spacing:.025em}.operations nav button.active {background:#464733;border-color:#a28f60}
.unit-console .orders button {border-radius:3px;background:linear-gradient(#303a2c,#202a21);border-color:#505c45}
.unit-console .orders button:hover:not(:disabled) {border-color:#a9b182;background:#3d4934}
@media(min-width:801px) and (max-width:1000px){body.compact-deck #force-roster{grid-template-columns:repeat(3,minmax(0,1fr))}body.compact-deck #minimap{width:102px;height:64px}body.compact-deck #force-roster button{height:27px}.roster-label{font-size:8px}}

/* Paused battles still accept orders beneath the status banner. */
#pause-banner {pointer-events:none}
/* Room code on the waiting screen. */
#match-code{margin:18px 0 6px;padding:14px;border:1px dashed #637752;border-radius:7px;text-align:center}#match-code[hidden]{display:none}#match-code span{display:block;font-size:10px;letter-spacing:.14em;color:#a0b18f}#match-code strong{display:block;font:34px Consolas,monospace;letter-spacing:.18em;color:#edbb63;margin:6px 0 10px;user-select:all}#match-code .code-actions{display:flex;gap:6px}#match-code .code-actions button{flex:1}#ready-overlay{width:100%;margin:14px 0 8px}#ready-overlay[hidden]{display:none}

#copy-code {pointer-events:auto}

.unit-portrait img{width:100%;height:auto;object-fit:contain}.deck-symbol img,.roster-symbol img{width:100%;height:100%;object-fit:contain}
#copy-link,#ready-overlay,#match-code-value{pointer-events:auto}
#overlay-key{position:absolute;bottom:48px;left:20px;display:flex;gap:12px;font-size:10px;color:#d2dfbf;background:#182219d9;border:1px solid #536347;border-radius:4px;padding:5px 9px;pointer-events:none}#overlay-key[hidden],#overlay-key span[hidden]{display:none}#overlay-key span{display:flex;align-items:center;gap:6px}#overlay-key i{display:inline-block;width:16px;height:9px;border-radius:2px}#key-sight i{background:#f0d0861a;border:1.5px solid #f0d086}#key-range i{background:#e0844f14;border:1.5px solid #e0844f}

.weapon-status{font:10px Consolas,monospace;color:#e8bd73;margin:3px 0;}

/* Operation briefing fills the menu while retaining a clear route back to battle. */
#lobby{position:fixed;inset:62px 0 31px;z-index:40;overflow:auto;align-items:flex-start;padding:22px;background:radial-gradient(ellipse at 20% 0,#3e4938d9,#111912f5 75%)}
#lobby[hidden]{display:none}
#lobby .operation-shell{width:100%;max-width:1180px;max-height:none;overflow:visible;padding:24px;border:1px solid #657156;border-radius:8px;background:linear-gradient(120deg,#293327,#19251e);box-shadow:0 20px 60px #0008}
.operation-heading{height:auto;padding:0 0 18px;background:none;border:0;display:flex;justify-content:space-between;align-items:center}.operation-heading h1{font-size:29px;margin:5px 0 0}.operation-heading p{margin:0;color:#aab69d;font-size:12px;text-align:right;line-height:1.6}
.operation-tabs{display:flex;gap:6px;border-bottom:1px solid #57634b;padding-bottom:14px;margin-bottom:20px}.operation-tabs button{min-width:140px;border-radius:3px;background:#18251c}.operation-tabs button[aria-pressed="true"]{color:#f3c475;border-color:#c6a465;background:#454332}
.operation-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px}.operation-stage{min-width:0}.briefing-title{display:flex;justify-content:space-between;gap:15px;align-items:center}.briefing-title h2{font-size:23px;margin:5px 0 9px}.briefing-tag{font-size:9px;letter-spacing:.12em;white-space:nowrap;padding:7px;border:1px solid #59664d;color:#b8c49f}.operation-stage #briefing-objective{min-height:38px;font-size:12px;line-height:1.5;color:#c3cdb8;margin:0 0 13px}
.setup-map{position:relative;border:1px solid #788069;border-radius:4px;overflow:hidden;background:#34412d}#setup-map{width:100%;height:auto;display:block;aspect-ratio:1.6}.setup-map-key{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:16px;padding:7px 8px;background:#132018dd;font-size:9px;color:#e0e2ce}.setup-map-key span{display:flex;gap:5px;align-items:center}.setup-map-key i{width:10px;height:8px}.blue-zone{background:#87bcd4}.red-zone{background:#d48b73}#map-preview-note{font-size:10px;margin:7px 0 12px;color:#abb69b}
.briefing-facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:0 0 14px;padding:12px 0;border-top:1px solid #4b5844;border-bottom:1px solid #4b5844}.briefing-facts dt{color:#a3b093;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.briefing-facts dd{margin:5px 0 0;color:#f0d09a;font-size:12px}
.mission-controls,.setup-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.operation-shell label{display:block;font-size:11px;color:#b9c7a7;margin:10px 0 6px}.operation-shell input,.operation-shell select{width:100%;min-width:0;font-size:12px;padding:9px}.briefing-settings{border-left:1px solid #4b5844;padding-left:26px;min-width:0}.briefing-settings .primary{width:100%;margin:2px 0 15px;padding:12px}.briefing-settings #mode-help{min-height:44px;line-height:1.6;margin:12px 0}.briefing-settings .small{color:#a5b599;font-size:11px;line-height:1.6}.join-block{border-top:1px solid #4b5844;padding-top:7px}.join-row input{width:0;min-width:0}.join-row button{flex-shrink:0}
.scenario-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:20px}.scenario-list button{text-align:left;padding:10px;border-radius:3px}.scenario-list button b,.scenario-list button span{display:block}.scenario-list button b{font-size:12px;color:#e7d3a5;margin-bottom:3px}.scenario-list button span{font-size:10px;color:#b1bd9d}.scenario-list button[aria-pressed="true"]{border-color:#d0ae6b;background:#454332}.campaign-note{padding:35px 15px;min-height:330px}.campaign-note h2{font-size:26px;color:#e8c58a}.campaign-note p{max-width:480px;line-height:1.8;color:#b9c5aa}.operation-shell [hidden]{display:none!important}
@media(max-width:850px){#lobby{padding:14px}.operation-body{grid-template-columns:1fr}.briefing-settings{border-left:0;border-top:1px solid #4b5844;padding:18px 0 0}.operation-heading p{display:none}.operation-tabs button{flex:1;min-width:0;padding:9px 6px}.operation-shell .operation-heading h1{font-size:25px}#lobby .operation-shell{padding:18px}.briefing-tag{max-width:120px;overflow:hidden;text-overflow:ellipsis}}
@media(max-height:720px){#lobby{inset:48px 0 23px;padding:14px}.operation-heading{padding-bottom:12px}.operation-tabs{margin-bottom:14px;padding-bottom:10px}#lobby .operation-shell{padding:18px}.operation-body{gap:20px}}

.operation-shell[data-category='campaign'] .operation-body{grid-template-columns:minmax(0,1fr) 320px}
@media(max-width:850px){.operation-shell[data-category='campaign'] .operation-body{grid-template-columns:1fr}}

#setup-map{height:270px;object-fit:contain;aspect-ratio:auto;background:#1d2b21}.operation-shell[data-category='scenarios'] #setup-map{height:220px}
@media(max-width:850px){#setup-map,.operation-shell[data-category='scenarios'] #setup-map{height:230px}}

.scenario-list{grid-template-columns:repeat(4,minmax(0,1fr))}.map-force{position:absolute;top:46%;transform:translateY(-50%);width:135px;text-align:center;pointer-events:none}.friendly-force{left:16px}.enemy-force{right:16px}.map-force .eyebrow{font-size:8px}.map-force strong{display:block;font-size:11px;color:#d9d8bb}.map-force svg,.map-force img{width:100%;height:88px;object-fit:contain;display:block;margin:4px 0}
@media(max-width:850px){.scenario-list{grid-template-columns:repeat(2,minmax(0,1fr))}.map-force{display:none}}

.operation-tabs #cancel-setup{margin-left:auto;color:#ecc1a6;background:#34281f;border-color:#906550}
/* Connection errors and other feedback remain visible above the full menu. */
#toast{z-index:60}
body:has(#lobby:not([hidden])) #toast{position:fixed;bottom:42px;left:50%;transform:translateX(-50%);max-width:calc(100% - 28px)}

.cover-rating{font:10px Consolas,monospace;margin:3px 0;line-height:1.3;color:#a9afac}.cover-rating[data-grade="partial"]{color:#e9c45e}.cover-rating[data-grade="strong"]{color:#79c982}.cover-rating[data-grade="unknown"]{color:#858d87}

/* Visible border grips; resizing keeps the map and each panel usable. */
#command-dock,#command-dock>section{position:relative}
#command-dock{overflow:visible}#command-dock>section{overflow:auto}
.panel-resizer{position:absolute;z-index:20;touch-action:none;background:#b5b59a44;border:1px solid #b5b59a88;border-radius:3px}
.panel-resizer.horizontal{top:-5px;left:calc(50% - 28px);width:56px;height:8px;cursor:ns-resize}
.panel-resizer.vertical{left:0;top:8px;width:7px;height:35px;cursor:ew-resize}
.panel-resizer:hover,.panel-resizer:focus-visible{background:#edbb63;border-color:#fff1c3;outline:1px solid #fff1c3}
.resizing-panels{user-select:none}.resizing-panels canvas{pointer-events:none}
@media(max-width:800px){.panel-resizer.vertical{display:none}#reset-panels{font-size:9px;padding:5px}}
/* Engagement readiness: steady, shaken, broken and lost shares of the starting force. */
.score .side{display:flex;flex-direction:column;align-items:center;gap:4px}.ready-bar{display:flex;width:74px;height:5px;background:#2a2f27;border-radius:2px;overflow:hidden}.ready-bar i{display:block;height:100%}.ready-bar .steady{background:#9fc27a}.ready-bar .shaken{background:#e0a050}.ready-bar .broken{background:#e0604c}.ready-bar .lost{background:#3a3f36}

/* Selected unit situation: what it is doing, why it is (not) firing, what suppression costs it. */
.situation{display:grid;gap:3px;margin:5px 0 4px;font:11px/1.3 Consolas,monospace}.situation-row{display:grid;grid-template-columns:44px 1fr;gap:6px;color:#c9cfbf}.situation-row b{font-weight:600;color:#858d87;letter-spacing:.04em}.situation-row[data-tone="warn"]{color:#e9c45e}.situation-row[data-tone="bad"]{color:#f08a6b}

/* After-action report on the end-of-battle overlay. */
#after-action{margin:10px 0 12px;text-align:left;font-size:12px;max-width:min(760px,92vw)}#after-action p{margin:6px 0}#after-action .lessons{margin:6px 0 8px;padding-left:18px;color:#e9c45e}#after-action .lessons li{margin:2px 0}
#after-action .report-table{overflow-x:auto;max-height:38vh;overflow-y:auto}#after-action table{border-collapse:collapse;width:100%;font:11px/1.35 Consolas,monospace}#after-action th,#after-action td{padding:3px 8px;border-bottom:1px solid #2f362d;white-space:nowrap;text-align:left}#after-action th{color:#858d87;font-weight:600;position:sticky;top:0;background:#161b16}#after-action tr.lost td{color:#c48b7c}
/* The end-of-battle panel can be tall with the report: keep it inside the map area and scroll it, so its buttons stay reachable. */
#match-overlay .briefing{max-height:100%;overflow:auto;box-sizing:border-box}#match-overlay .briefing:has(#after-action:not([hidden])){width:min(780px,100%);max-width:none}#after-action .report-table{max-height:30vh}
/* The overlay lets clicks through to the map; the report (so it can scroll) and the replay button opt back in. */
#save-replay,#watch-replay{pointer-events:auto;width:100%;margin-top:8px}#after-action{pointer-events:auto}#match-overlay .briefing:has(#after-action:not([hidden])){pointer-events:auto}
/* Replay viewer: a control strip across the top of the battlefield. */
#replay-bar{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;width:min(820px,calc(100% - 32px));padding:7px 10px;background:#141d16ee;border:1px solid #4b5844;border-radius:7px;box-shadow:0 6px 18px #0008}
#replay-bar .eyebrow{color:#edbb63;letter-spacing:.16em;font-size:10px}#replay-bar button{padding:5px 10px;min-width:40px}#replay-bar select{padding:5px 6px;font-size:12px}
#replay-seek{flex:1 1 220px;min-width:120px;padding:0;accent-color:#edbb63}#replay-time{font-family:Consolas,monospace;font-size:12px;min-width:92px;text-align:center}#replay-scan{color:#a5b599;font-size:11px}
#replay-bar[hidden]{display:none}#replay-bar:not([hidden])~#map-caption{display:none}#open-replay{width:100%}

/* The campaign command desk reuses the game's unit art and readable force cards. */
#battlegroup[hidden]{display:none}#battlegroup{position:fixed;inset:0;z-index:80;background:#0e1713ee;overflow:auto;padding:20px}
.group-shell{max-width:1500px;margin:auto;border:1px solid #687157;background:linear-gradient(135deg,#303b2e,#17231e);box-shadow:0 10px 50px #0009;padding:22px}
.group-header{height:auto;padding:0 0 14px;background:none;align-items:flex-start;border-bottom:1px solid #667255}.group-header h1{margin:6px 0;color:#ead4a6;font-size:25px}.group-header p{margin:0;color:#b5c5a8;font-size:12px}.group-header>div:last-child{display:flex;align-items:center;gap:20px}#group-supply{color:#ecc479;font:20px Consolas,monospace}#group-brief{color:#cad0b4;line-height:1.6}
.group-body{display:grid;grid-template-columns:255px minmax(0,1fr);gap:16px}.group-pool{padding:12px;background:#15221d;border:1px solid #495844;min-width:0}.group-body h3{font-size:11px;letter-spacing:.08em;color:#cfc399;margin:0 0 12px}#group-reserves{display:flex;flex-direction:column;gap:7px}#group-platoons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.group-platoon{min-width:0;padding:12px;background:#253128;border:1px solid #52604b;display:flex;flex-direction:column;gap:8px}.group-platoon h3{margin:0 0 4px}.group-team{display:flex;gap:9px;align-items:center;text-align:left;min-height:108px;width:100%;padding:9px;background:linear-gradient(120deg,#3b4935,#202e26);border:1px solid #5c6a4f;border-radius:2px}.group-team:hover,.group-team.selected{border-color:#e4c379;background:linear-gradient(120deg,#51543a,#2c392b)}.group-team.destroyed{opacity:.45}.group-art{width:76px;flex-shrink:0}.group-art svg,.group-art img{width:100%;height:66px;object-fit:contain}.group-team-info{min-width:0;display:flex;flex-direction:column;gap:5px}.group-team b{color:#eee5c8;font-size:13px;overflow-wrap:anywhere}.group-team-info>span{font-size:11px;color:#cad1b5}.group-team small{font-size:10px;color:#b1be9f}.crew-dots{display:flex;gap:3px;flex-wrap:wrap}.crew-dots i{width:7px;height:8px;border:1px solid #9caf81;background:#84a16c}.crew-dots .missing{background:#30372e;border-color:#545c4e}.group-team.empty{border-style:dashed;justify-content:center;color:#96a489;background:#1c2922}.group-inspector{border:1px solid #687157;background:#17251e;margin-top:16px;padding:14px}.group-detail-art{width:110px;flex-shrink:0}.group-detail-art svg,.group-detail-art img{width:100%;height:90px;object-fit:contain}#group-details{display:flex;gap:18px;align-items:center}.group-detail-text h2{font-size:18px;color:#e4d3a7;margin:0 0 9px}.group-detail-text p{font-size:11px;color:#bdcbae;line-height:1.5;margin:4px 0}.group-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.group-actions input{max-width:200px;font-size:12px}.group-actions button{font-size:11px}.group-footer{display:flex;align-items:center;gap:14px;margin:14px 0}#group-feedback{flex:1;font-size:12px;color:#c5d2af;line-height:1.4}#group-ready{font:12px Consolas,monospace;color:#dbc68f}#group-history:empty{display:none}.group-result{border-top:1px solid #52604b;padding:12px 0}.group-result summary{cursor:pointer;color:#e2ca92}.group-result p{display:inline-block;width:33%;font-size:11px;color:#b7c5ab;margin:8px 0}.group-result .loss{color:#df9b83}
@media(max-width:1100px){.group-body{grid-template-columns:210px minmax(0,1fr)}.group-art{width:48px}.group-team{gap:5px;padding:7px}.group-platoon{padding:8px}.group-team b{font-size:11px}}
@media(max-width:800px){#battlegroup{padding:8px}.group-shell{padding:12px}.group-header{flex-wrap:wrap;gap:10px}.group-header h1{font-size:20px}.group-body{grid-template-columns:1fr}.group-pool{max-height:250px;overflow:auto}#group-reserves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#group-platoons{grid-template-columns:1fr}.group-platoon{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.group-platoon h3{grid-column:1/-1}.group-footer{flex-wrap:wrap}#group-feedback{flex-basis:100%}.group-result p{width:50%}}

#group-map-preview{margin:0 0 15px;color:#d5c190}#group-map-preview summary{cursor:pointer;font-size:12px;padding:6px 0}#group-map-canvas{display:block;width:min(100%,640px);height:auto;border:1px solid #657154;margin-top:8px}

/* Opposing force artwork faces inward; labels retain their normal direction. */
#preview-enemy-token svg,#preview-enemy-token img{transform:scaleX(-1)}

/* Deck codes: the compact deck shows one line per unit (icon, code, cost) so all twelve fit; full names stay in the detailed layout and the tooltip. */
.deck button i{display:none;font-style:normal}
body.compact-deck .deck{gap:3px}body.compact-deck .deck button{grid-template-columns:14px minmax(0,1fr) auto;grid-template-rows:auto;height:24px;padding:1px 4px;gap:0 3px}body.compact-deck .requisition{margin-bottom:4px}body.compact-deck #training{margin-bottom:4px}
body.compact-deck .deck button b{display:none}
body.compact-deck .deck button i{display:block;font-size:9.5px;letter-spacing:-.01em;font-weight:600;color:#d6ddc3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
body.compact-deck .deck-symbol{grid-row:auto}body.compact-deck .deck-symbol svg{width:14px;height:14px}
body.compact-deck .deck button strong{font-size:10px}