/* Upright pixel operators and atlas scenery over the saved tactical collision grid. */
.tactical-screen { --field-dirt: #756d57; --field-grid: #d2d0a72b; --friendly: #9bd8d2; --hostile: #ef977d; --base-tile-size: 44px; display: flex; flex: 1; flex-direction: column; min-height: 0; min-width: 0; gap: 8px; color: #e0e0c8; }
#app:has(.tactical-screen) { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; background: #101b17; }
#app:has(.tactical-screen)>header,#app:has(.tactical-screen)>nav,#app:has(.tactical-screen)>footer { display: none; }
#app:has(.tactical-screen)>main { grid-column: 1; grid-row: 1; padding: 0 12px 8px; }
#app:has(.tactical-screen)>#message { grid-column: 1; grid-row: 2; font-size: .75rem; }
#workspace:has(.tactical-screen) { gap: 0; }
#workspace:has(.tactical-screen)>.command-heading { display: none; }
.tactical-screen button { margin: 0; font-family: 'Field Sans', sans-serif; text-transform: none; letter-spacing: normal; }
.tactical-topline { display: flex; align-items: center; gap: 18px; padding: 10px 0; border-bottom: 1px solid #84927366; }
.tactical-objective { flex: 1; min-width: 0; }
.tactical-eyebrow { color: #a2b29a; font: .7rem 'Command', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.tactical-objective h2 { margin: 3px 0; font-size: 1.45rem; color: #eee3c6; }
.tactical-objective-copy { color: #d8c186; margin: 0; font-size: .9rem; }
.tactical-phase { flex-shrink: 0; text-align: right; }
.tactical-phase strong { font: 1.5rem 'Command', sans-serif; letter-spacing: .12em; }
.tactical-phase p { font-size: .72rem; color: #c7c899; margin: 3px 0; }
.tactical-top-actions { display: flex; gap: 6px; }
.tactical-top-actions button { min-height: 34px; padding: 5px 12px; }
.tactical-area { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 252px; gap: 12px; min-height: 180px; }
.tactical-map-frame { min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid #84927399; background: #18241c; }
.tactical-map-toolbar { display: flex; align-items: center; gap: 15px; padding: 4px 10px; min-height: 30px; background: #19271f; font: .67rem 'Field Sans', sans-serif; color: #bec9b1; }
.tactical-map-toolbar>div { display: flex; gap: 5px; margin-left: auto; }
.tactical-map-toolbar button { min-width: 29px; min-height: 27px; padding: 0 5px; font-size: .72rem; }
.tactical-map-toolbar [aria-pressed=true] { background: #bfa86e; color: #15251e; }
.tactical-viewport { flex: 1; overflow: auto; min-height: 0; min-width: 0; position: relative; scrollbar-color: #88906c #222e23; background: #253025; overscroll-behavior: contain; user-select: none; }
.tactical-viewport.panning,.tactical-viewport.panning .tactical-tile { cursor: grabbing; }
.tactical-board { position:relative; --tile-size: calc(var(--base-tile-size) * var(--zoom, 1)); display: grid; width: max-content; min-width: 100%; min-height: 100%; padding: 28px 12px 12px; align-content: center; justify-content: center; background: #253025; isolation: isolate; }
.tactical-board::after { content: ''; position: absolute; width: calc(var(--tile-size) * var(--map-columns)); height: calc(var(--tile-size) * var(--map-rows)); left: 50%; top: calc(50% + 8px); translate: -50% -50%; outline: 1px solid #c4c4a940; box-shadow: 0 12px 35px #0a120c66; pointer-events: none; z-index: -1; }
.tactical-board .tactical-tile { width: var(--tile-size); height: var(--tile-size); min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: var(--ground-art) center/100% 100%, var(--field-dirt); color: #f3ecd3; box-shadow: none; position: relative; display: flex; align-items: center; justify-content: center; cursor: crosshair; font-size: 12px; overflow: visible; image-rendering: auto; }
.tactical-tile::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.tactical-board .tactical-tile.out-of-sight::before { background: #13221d57; }
.tactical-board .tactical-tile.reachable::before { background: #82c3c011; box-shadow: inset 0 0 0 1px #a8dad02b; }
.tactical-board .tactical-tile.route::before { background: #7bc4b85c; }
.tactical-board .tactical-tile.route::after { content: '·'; color: #d1ffe4; font-size: 25px; z-index: 2; }
.tactical-board.show-grid .tactical-tile::before { border: 1px solid var(--field-grid); }
.tactical-board .tactical-tile.destination { outline: 2px solid #e5d093; outline-offset: -3px; }
.tactical-board .tactical-tile:hover,.tactical-board .tactical-tile:focus-visible { outline: 2px solid #eee3b2; outline-offset: -2px; }
.structure-sprite { position: absolute; top: 0; left: 0; object-fit: fill; pointer-events: none; filter: drop-shadow(3px 5px 1px #171c1a66); }
.cover-sprite { position: absolute; left: 0; bottom: 0; width: 100%; height: 130%; object-fit: contain; object-position: center bottom; pointer-events: none; filter: drop-shadow(2px 3px 1px #171c1a66); }
.cover-low { height: 100%; }
.vehicle-sprite { width: calc(var(--tile-size) * 3); height: calc(var(--tile-size) * 1.5); max-width: none; object-fit: fill; }
.road-mark { position: absolute; top: 47%; left: 15%; width: 70%; height: 3px; background: #ccbe8e77; pointer-events: none; }
.out-of-sight .structure-sprite,.out-of-sight .cover-sprite { filter: brightness(.68) drop-shadow(2px 4px 1px #171c1a66); }
.field-debris { position: absolute; inset: 5%; width: 90%; height: 90%; object-fit: contain; pointer-events: none; }
.tactical-board .extraction-zone::before { background: #5ea7a51c; box-shadow: inset 0 0 0 1px #a7d2cd44; }
.extraction-symbol { color: #c2dfce; font: 600 13px 'Command', sans-serif; border: 1px solid #b0d4bb; padding: 3px; }
.objective-symbol { color: #ffdb80; font-size: 31px; text-shadow: 0 1px 5px #000; }
.tactical-board .objective-tile { box-shadow: inset 0 0 0 2px #d9bd6a; }
.grid-coordinate { position: absolute; top: 1px; left: 3px; color: #dbd8bcab; font-size: 9px; pointer-events: none; z-index: 2; display: none; }
.show-grid .grid-coordinate { display: block; }
.operator-sprite { position: absolute; width: calc(var(--tile-size) * 1.65); height: calc(var(--tile-size) * 1.65); max-width: none; left: -32.5%; bottom: 3%; object-fit: contain; pointer-events: auto; filter: drop-shadow(2px 3px 1px #10191188); transform-origin: 50% 90%; }
.unit-footprint { position: absolute; left: 9%; right: 9%; bottom: 2%; height: 28%; border-radius: 50%; border: 1px solid #94d4cf; background: #3b7b7966; pointer-events: none; z-index: 2; }
.hostile .unit-footprint { border-color: #f09070; background: #93493177; }
.selected-unit .unit-footprint { border: 2px solid #d0ffec; }
.targeted-unit .unit-footprint { border: 2px solid #ffcd9f; }
.tactical-board .targeted-unit { outline: 1px solid #ef977d; outline-offset: -2px; }
.unit-number { position: absolute; top: -16%; right: -2%; min-width: 14px; height: 16px; background: #174c4e; border: 1px solid #9bc8bb; color: #dcf5e9; font: 600 11px 'Command', sans-serif; z-index: 1000; pointer-events: none; }
.hostile .unit-number { background: #773f31; color: #ffe1ba; }
.unit-health { position: absolute; bottom: -2px; left: 3px; right: 3px; height: 3px; background: linear-gradient(90deg, #a9dbc5 var(--health), #1d3026 var(--health)); z-index: 1000; pointer-events: none; }
.hostile .unit-health { background: linear-gradient(90deg, #e6a17c var(--health), #392b21 var(--health)); }
.tactical-board .selected-unit { outline: 1px solid #a9e5df88; outline-offset: -1px; }
.unit-status { position: absolute; bottom: -13px; left: 0; right: 0; text-align: center; font: 600 9px 'Command',sans-serif; background: #15251ed9; color: #c8dec5; z-index: 1000; pointer-events: none; }
.hidden-unit .operator-sprite { opacity: .7; }.downed .operator-sprite { transform: rotate(75deg) scale(.8); filter: grayscale(.8); }
.tactical-inspector { min-height: 0; overflow: auto; min-width: 0; padding: 10px; background: #1a2a21; border: 1px solid #84927366; }
.tactical-selected { display: flex; gap: 10px; align-items: center; }.tactical-selected h3 { font-size: 1.2rem; margin: 3px 0; overflow-wrap: anywhere; }.tactical-selected p { margin: 0; color: #9bc5ae; font-size: .78rem; text-transform: capitalize; }
.tactical-portrait { width: 48px; height: 60px; object-fit: cover; border: 1px solid #abb49a; }
.tactical-vitals { display: flex; justify-content: space-between; margin-top: 12px; font: 1.1rem 'Command', sans-serif; color: #e9e1c5; }
.tactical-ap { display: flex; gap: 4px; margin: 6px 0 12px; }.tactical-ap span { height: 5px; flex: 1; background: #435447; }.tactical-ap .available { background: #d7c081; }
.tactical-weapon { margin: 0 0 3px; font-size: .85rem; }.tactical-weapon-stats { margin: 0 0 12px; font-size: .72rem; color: #acbca7; }
.tactical-orders { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }.tactical-orders button { padding: 7px 3px; min-height: 34px; font-size: .79rem; }.tactical-orders [aria-pressed=true] { background: #cab578; border-color: #e3cd93; color: #17261e; }
.tactical-preview { margin-top: 12px; border-top: 1px solid #84927366; padding: 10px 0; min-height: 64px; font-size: .8rem; }.tactical-preview p { margin: 0 0 8px; }.shot-chance { font: 2rem 'Command', sans-serif; color: #d8ca8d; }.tactical-preview .tactical-confirm { width: 100%; min-height: 36px; background: #bd9c58; color: #18231b; border-color: #e4c87b; font-weight: 600; }.tactical-reason { color: #efb493; margin-top: 7px!important; }
.tactical-contacts h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: #b3c1a8; margin: 4px 0; }.tactical-contacts p { font-size: .78rem; color: #9cb29c; }.tactical-contacts button { display: block; width: 100%; margin: 5px 0; font-size: .78rem; color: #edbb9b; padding: 6px; }
.tactical-help { border-top: 1px solid #84927355; margin-top: 12px; padding-top: 10px; font-size: .78rem; color: #bbcab4; }.tactical-help p { line-height: 1.5; }
.tactical-squad { display: flex; gap: 7px; overflow-x: auto; min-height: 67px; flex-shrink: 0; padding: 2px; }.tactical-squad .tactical-soldier { display: flex; align-items: center; text-align: left; gap: 8px; padding: 5px 9px 5px 5px; min-width: 150px; max-width: 230px; border-color: #61745e; background: #1c3024; }.tactical-soldier img { height: 46px; width: 37px; object-fit: cover; }.tactical-soldier>span { min-width: 0; }.tactical-soldier strong,.tactical-soldier small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.tactical-soldier strong { font-size: .83rem; }.tactical-soldier small { margin-top: 3px; font-size: .72rem; color: #b3c8ad; }.tactical-squad .tactical-soldier.active { border-color: #d2bf84; background: #3b4a32; box-shadow: inset 0 -2px #d2bf84; }.tactical-soldier.casualty { filter: grayscale(.8); }
.tactical-bottom { display: flex; align-items: center; gap: 7px; padding-top: 6px; border-top: 1px solid #84927366; flex-shrink: 0; }.tactical-bottom button { white-space: nowrap; padding: 7px 12px; min-height: 36px; font-size: .78rem; }.tactical-log { flex: 1; min-width: 0; font-size: .78rem; color: #c0cab1; position: relative; }.tactical-log summary { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }.tactical-log ol { position: absolute; bottom: 25px; left: 0; z-index: 10; background: #19291f; border: 1px solid #859475; padding: 14px 14px 14px 32px; width: min(480px, 80vw); max-height: 240px; overflow: auto; box-shadow: 0 5px 20px #0009; }.tactical-log li { margin: 5px 0; }.tactical-bottom .tactical-end-turn { background: #c6b178; border-color: #dbc893; color: #19271c; font-weight: 600; min-width: 120px; }
.environment-jungle { --field-dirt: #47583b; }.environment-arctic { --field-dirt: #87908c; }.environment-urban,.environment-underground { --field-dirt: #686c61; }.environment-maritime { --field-dirt: #526867; }.environment-mountain { --field-dirt: #6e6b5d; }
.tactical-staging { display: grid; place-content: center; justify-items: center; gap: 15px; flex: 1; text-align: center; padding: 24px; color: #ddd8bb; }.tactical-staging p { max-width: 560px; }.tactical-staging h2 { font-size: 2rem; }
@media(min-width:1600px) { .tactical-screen { --base-tile-size: 48px; }.tactical-area { grid-template-columns: minmax(0,1fr) 252px; } }
@media(max-width:1100px) { .tactical-area { grid-template-columns: minmax(0,1fr) 225px; }.tactical-map-toolbar>span:nth-child(2) { display: none; }.tactical-screen { --base-tile-size: 40px; }.tactical-topline { gap: 10px; }.tactical-objective h2 { font-size: 1.2rem; }.tactical-objective-copy { font-size: .8rem; }.tactical-bottom button { padding: 6px 8px; }.tactical-bottom { flex-wrap: wrap; }.tactical-log { flex-basis: 100%; } }
@media(max-width:650px) { #workspace:has(.tactical-screen) { overflow: auto; }.tactical-screen { flex: none; min-height: 850px; }.tactical-topline { flex-wrap: wrap; }.tactical-top-actions { width: 100%; }.tactical-top-actions button { flex: 1; }.tactical-area { display: flex; flex-direction: column; flex: none; min-height: 0; }.tactical-map-frame { height: 350px; flex-shrink: 0; }.tactical-inspector { max-height: none; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }.tactical-selected,.tactical-weapon,.tactical-weapon-stats,.tactical-vitals,.tactical-ap { grid-column: 1 / -1; margin: 0; }.tactical-orders { align-content: start; }.tactical-preview { margin-top: 0; min-width: 0; }.tactical-contacts,.tactical-help { grid-column: 1 / -1; }.tactical-help { margin-top: 0; }.tactical-squad { min-height: 67px; }.tactical-bottom .tactical-end-turn { flex: 1; }.tactical-phase strong { font-size: 1.2rem; }.tactical-phase p { font-size: .65rem; } }
/* Actual weapon assets and short, event-driven muzzle flashes. */
.tactical-weapon-art{width:100%;max-width:260px;height:56px;object-fit:contain;background:#d6d5c5;margin:4px 0 8px}
.tactical-inspector .tactical-character-cues{display:none}
.tactical-inspector>[data-command=switchWeapon]{width:100%;margin-bottom:10px;white-space:normal}
.tactical-muzzle{position:absolute;width:calc(var(--tile-size)*.7);height:calc(var(--tile-size)*.7);object-fit:contain;pointer-events:none;z-index:1000;transform:translate(-50%,-50%) rotate(var(--muzzle-angle)) scale(var(--muzzle-scale));animation:muzzle-discharge .12s ease-out forwards}
@keyframes muzzle-discharge{0%{opacity:1}35%{opacity:.9}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.tactical-muzzle{animation:none}}
[data-reduced-motion=true] .tactical-muzzle{animation:none!important;opacity:1}
.weapon-ballistics{font-size:.86rem;font-weight:600;line-height:1.5;color:var(--ink,#263b32)}
.recovered-weapons{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.recovered-weapons article{display:grid;align-content:start;padding:12px;background:var(--panel,#e7e3d6);border:1px solid var(--line,#b3b4a3)}
.recovered-weapons .item-art{width:100%;height:90px;object-fit:contain}
/* Armorer's bench: material panels, real model art and explicit mount controls. */
.workshop-dialog { width:min(1120px,96vw); max-width:96vw; }
.weapon-workshop { --bench-surface:#e4ddc9; --bench-ink:#24382e; --bench-line:#9c9d89; color:var(--bench-ink); }
.workshop-intro { font-weight:600; }
.workshop-controls { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px; }
.workshop-field { display:flex;flex-direction:column;gap:5px;font-size:.85rem;font-weight:600;min-width:0; }
.workshop-field select,.workshop-field input { width:100%;max-width:100%;min-width:0;box-sizing:border-box; }
.workshop-editor { display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start;border-block:1px solid var(--bench-line);padding-block:16px; }
.workshop-preview { background:var(--bench-surface);border:1px solid var(--bench-line);padding:16px;min-width:0; }
.workshop-receiver-art { display:block;width:100%;height:170px;object-fit:contain; }
.workshop-configuration { display:grid;gap:10px;min-width:0; }
.workshop-selected-parts { display:flex;gap:8px;flex-wrap:wrap; }
.workshop-selected-parts figure { margin:0;width:90px;text-align:center;font-size:.7rem; }
.workshop-selected-parts img { width:90px;height:60px;object-fit:contain; }
.workshop-stats { font-weight:700; }
.workshop-finish { display:flex;align-items:center;gap:8px;font-size:.85rem; }
.workshop-finish-swatch { display:inline-block;width:26px;height:18px;border:1px solid #384738; }
.workshop-actions { display:flex;flex-wrap:wrap;gap:8px; }
.workshop-reason { min-height:2em;font-size:.85rem; }
.workshop-parts-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.workshop-parts-grid article { padding:12px;border:1px solid var(--bench-line);min-width:0;display:flex;flex-direction:column; }
.workshop-parts-grid article>img { width:100%;height:100px;object-fit:contain; }
.workshop-parts-grid article>p { font-size:.82rem; }
.workshop-parts-grid article>button { margin-top:auto; }
.workshop-base-purchase,.workshop-recipes>div { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; }
.character-look { margin-block:12px;padding:10px;border:1px solid #829078; }
.character-look summary { cursor:pointer;font-weight:600; }
.tactical-character-cues { font-size:.72rem;color:#c4c9b5; }
.operator-sprite { filter:var(--operator-tint,none) drop-shadow(2px 3px 1px #10191188); }
@media(max-width:700px){ .workshop-controls,.workshop-editor { grid-template-columns:1fr; }.workshop-parts-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.workshop-dialog{padding:12px}.workshop-receiver-art{height:130px} }
@media(max-width:410px){ .workshop-parts-grid { grid-template-columns:1fr; } }
.supply-filters { display:flex;gap:12px;flex-wrap:wrap; }
.supply-filters input,.supply-filters select { min-width:0;flex:1 1 180px;width:100%; }
.supply-table-wrap { overflow-x:auto;max-width:100%; }
.supply-catalog table { width:100%;border-collapse:collapse;font-size:.85rem; }
.supply-catalog td,.supply-catalog th { padding:10px;vertical-align:top;text-align:left;border-bottom:1px solid #9fa48e;max-width:350px;overflow-wrap:anywhere; }
.supply-catalog small { display:block;font-size:.72rem;overflow-wrap:anywhere; }
.supply-catalog details p { overflow-wrap:anywhere; }
.character-roster-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px; }
.character-roster-grid article { border:1px solid #a0a389;padding:14px;min-width:0; }
.character-roster-grid article>img:first-child { width:100%;height:180px;object-fit:contain;object-position:center;background:#d7ceba; }
.character-roster-grid article p { font-size:.85rem; }
.character-field-proxy { width:96px;height:96px;image-rendering:pixelated; }
.workshop-native-proof img { display:block;width:100%;height:auto;object-fit:contain;background:#d9d1bb;margin-block:12px; }
@media(max-width:700px){.character-roster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.supply-catalog th,.supply-catalog td{padding:6px;font-size:.75rem}}
@media(max-width:410px){.character-roster-grid{grid-template-columns:1fr}}
.character-avatar-reference{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.character-avatar-reference>img{width:72px;height:90px;object-fit:cover;flex-shrink:0}
.character-avatar-reference h3{margin:0;font-size:1.1rem}
.character-avatar-reference p{font-size:.78rem;margin:6px 0}
.character-render-link{display:block;background:#c4bbab;border:1px solid #aba58f}
.character-roster-grid .character-concept-render{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:contain}
.character-roster-grid h4{font-size:1rem;margin-block:12px 4px}
button.character-render-link{width:100%;padding:0;cursor:zoom-in}
.character-render-viewer{width:min(760px,94vw);max-height:94vh;overflow:auto;padding:16px;box-sizing:border-box}
.character-render-viewer>img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;background:#c6bcac}

/* Transparent native actor frames keep the board's existing per-tile depth. */
.native-operator-frame { width:calc(var(--tile-size) * 2.1);height:calc(var(--tile-size) * 2.1);left:-55%;bottom:-35%;image-rendering:auto; }
.native-operator-frame .operator-fallback { position:absolute;width:78.57%;height:78.57%;left:10.715%;bottom:18%;object-fit:contain;image-rendering:pixelated;pointer-events:none; }
.native-operator { position:absolute;inset:0;width:100%;height:100%;pointer-events:none; }
.native-operator-frame:has([data-native-ready="true"]) .operator-fallback { visibility:hidden; }
.downed .native-operator-frame { transform:none;filter:grayscale(.5); }
/* The transparent render margin must not intercept neighboring soldiers/tiles. */
.native-operator-frame { pointer-events:none; }
.native-operator-hit { position:absolute;left:35%;right:35%;top:23%;bottom:15%;pointer-events:auto; }
/* Dismantling separates stored crafting materials from usable named attachments. */
.workshop-modes { display:flex;gap:8px;margin-bottom:16px; }
.workshop-modes button[aria-pressed="true"] { background:var(--bench-ink);color:#f5efd9;border-color:var(--bench-ink); }
.salvage-balances { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-block:16px; }
.salvage-balances>div { border:1px solid var(--bench-line);padding:12px;background:var(--bench-surface);min-width:0; }
.salvage-balances dt { font-size:.8rem; }
.salvage-balances dd { margin:6px 0 0;font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums; }
.salvage-preview { margin-block:16px;padding:16px;border:1px solid var(--bench-line);background:var(--bench-surface);overflow:auto; }
.salvage-preview h4 { margin-block:12px 4px; }
.salvage-preview p { margin-block:4px 10px; }
.salvage-source-art { float:right;width:38%;height:160px;object-fit:contain;margin-left:16px; }
.salvage-confirmation { border:2px solid #84583b;padding:16px;background:#e9dfc9;margin-block:12px; }
.salvage-confirmation h4 { margin-top:0; }
.salvage-confirmation button[data-action="confirmDismantle"] { background:#704431;color:#fff8e8; }
.salvage-notice { border-left:3px solid var(--bench-ink);padding:10px 12px;background:var(--bench-surface); }
@media(max-width:520px){.salvage-source-art{float:none;display:block;width:100%;height:115px;margin:0}.salvage-balances{grid-template-columns:repeat(2,minmax(0,1fr))}.salvage-confirmation .workshop-actions>button{width:100%}}

/* Counted inventory kits and tactical area tools. */
.utility-kit{margin:16px 0;padding:16px;border:1px solid #67715e;background:#20291f}.utility-kit-heading{display:flex;justify-content:space-between;gap:16px;align-items:baseline}.utility-kit-heading h3{margin:0}.utility-kit-heading strong{white-space:nowrap;color:#e8ce96}.utility-kit-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.utility-kit-item{display:grid;grid-template-columns:68px minmax(0,1fr);gap:10px;padding:12px;background:#293126;border:1px solid #63705b}.utility-kit-item>img{width:68px;height:68px;object-fit:cover}.utility-kit-copy h4{margin:0 0 6px}.utility-kit-copy p{font-size:.8rem;margin:5px 0}.utility-kit-count{color:#e8ce96}.utility-kit-controls{display:flex;flex-wrap:wrap;gap:6px;grid-column:1/-1}.utility-kit-controls button{min-height:36px}.utility-kit-summary{font-size:.8rem;color:#d9ceac}.tactical-utilities{margin-top:10px;border-top:1px solid #84927366;padding-top:8px;display:grid;gap:5px}.tactical-utilities h4{margin:0 0 3px}.tactical-utilities button{display:flex;gap:7px;align-items:center;text-align:left;font-size:.75rem;min-height:38px}.tactical-utilities button img{width:36px;height:36px;object-fit:cover}.tactical-utilities button[aria-pressed=true]{border-color:#e7cb80;background:#4c5233}.tactical-utilities p{font-size:.75rem;margin:0}.utility-friendly-warning{padding:9px;background:#4e3028;color:#ffe0b4;border-left:3px solid #e4ae70}.tactical-board .utility-area::before{background:#d8ac4844;border:1px solid #f0cf7699}.utility-smoke-cover{position:absolute;inset:0;background:url(assets/vfx/utility-smoke.png) center/125% 125%;opacity:.72;pointer-events:none;z-index:60}.utility-smoke-tile::before{background:#b5c0b77a!important}.utility-charge-marker{position:absolute;bottom:2px;right:2px;background:#c5ba75;color:#19261c;font-size:9px;font-weight:bold;padding:2px;z-index:65;pointer-events:none}.utility-disoriented{position:absolute;top:1px;left:1px;background:#dfcf7a;color:#282b17;padding:2px;z-index:66;font-size:8px;pointer-events:none}.utility-burst{position:absolute;width:calc(var(--tile-size)*var(--effect-size));height:calc(var(--tile-size)*var(--effect-size));left:50%;top:50%;translate:-50% -50%;z-index:61;background:url(assets/vfx/utility-blast.png) center/cover;pointer-events:none;animation:utility-burst .85s ease-out forwards}.utility-burst-flash{background-image:url(assets/vfx/utility-flash.png)}.utility-burst-smoke{background-image:url(assets/vfx/utility-smoke.png)}.utility-projectile{position:absolute;width:18px;height:18px;object-fit:contain;z-index:69;pointer-events:none;animation:utility-throw .5s ease-out forwards}@keyframes utility-burst{0%,35%{opacity:.65}100%{opacity:0}}@keyframes utility-throw{0%{transform:translate(calc(var(--throw-x)*var(--tile-size)),calc(var(--throw-y)*var(--tile-size)));opacity:1}45%{translate:0 -40px}90%{opacity:1}100%{transform:translate(0,0);opacity:0}}
@media(max-width:700px){.utility-kit-items{grid-template-columns:1fr}.utility-kit{padding:10px}.utility-kit-item{padding:10px}.utility-kit-heading{font-size:.85rem}.utility-kit-controls button{flex:1}.tactical-utilities{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}.tactical-utilities h4,.tactical-utilities p{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){.utility-burst,.utility-projectile{animation:none;display:none}}

/* The oblique 3D battlefield overlays the map frame; the DOM grid stays live in the
   background as the semantic and accessibility layer (roles, tab order, clicks).
   opacity keeps it in the accessibility tree and keyboard-focusable — visibility:hidden
   would remove both — while pointer-events pass to the world's canvas. */
.tactical-board.world-active { opacity: 0; pointer-events: none; }
.tactical-viewport.world-active { overflow: hidden; }
.tactical-world { position: absolute; inset: 0; z-index: 40; background: #101512; }
.tactical-world canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
@media(max-width:650px) {
  .tactical-inspector>.tactical-selected { grid-row:1; }
  .tactical-inspector>.tactical-vitals { grid-row:2; }
  .tactical-inspector>.tactical-ap { grid-row:3; }
  .tactical-inspector>.tactical-orders { grid-row:4;grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr)); }
  .tactical-orders button { min-height:44px;font-size:.75rem; }
  .tactical-inspector>.tactical-preview { grid-row:5;grid-column:1/-1; }
  .tactical-inspector>.tactical-weapon { grid-row:6; }
  .tactical-inspector>.tactical-weapon-stats { grid-row:7; }
  .tactical-map-toolbar { gap:5px;padding-inline:6px; }
  .tactical-map-toolbar>span { font-size:.6rem; }
}

/* Isolated, evidence-based practice guide. */
.practice-guide{padding:12px 16px;border:1px solid #7b886c;border-left:4px solid #d4b574;background:#263324;display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;margin:0 0 12px}.practice-guide-copy{flex:1 1 280px}.practice-guide-copy>strong{color:#e2c68e;font-size:.8rem;letter-spacing:.06em}.practice-guide-copy>p{margin:6px 0 0;font-size:.85rem;line-height:1.45}.practice-progress{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:6px 14px;flex:1 1 350px;font-size:.75rem;color:#e2c49a}.practice-progress>.complete{color:#b1d6ae}.practice-guide-actions{display:flex;flex-wrap:wrap;gap:7px}.practice-guide-actions>button{min-height:38px}.practice-stage-combat{padding:8px 12px;margin-bottom:8px}.practice-stage-combat .practice-guide-copy{flex:1 1 430px}.practice-stage-combat .practice-guide-copy>p{font-size:.78rem}.practice-debrief{max-width:1100px;margin:0 auto;padding:24px;border:1px solid #778167;background:#202c22}.practice-debrief>h1{font-size:2rem;margin:5px 0 14px}.practice-eyebrow{font-size:.75rem;color:#d8bd81;letter-spacing:.08em}.practice-score{display:flex;align-items:baseline;flex-wrap:wrap;gap:16px;color:#e2c485}.practice-score>strong{font-size:2.5rem}.practice-score>span{font-size:1.2rem}.practice-review-cards,.practice-squad-review{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.practice-review-card,.practice-squad-review>article{padding:14px;border:1px solid #66735e;background:#293629}.practice-review-card.strength{border-left:3px solid #a7c493}.practice-review-card.improve{border-left:3px solid #dbac6e}.practice-review-card>h2{font-size:1rem;margin:0 0 8px}.practice-review-card p,.practice-squad-review p{font-size:.85rem;line-height:1.55;margin:4px 0}.practice-squad-review h3{margin:0 0 8px}.practice-observations{padding:12px 0;margin-bottom:12px;border-top:1px solid #6a775e}.practice-observations dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;font-size:.8rem}.practice-observations dl>div{padding:8px;background:#293629}.practice-observations dt{text-transform:capitalize}.practice-observations dd{margin:4px 0 0;color:#e2c485;font-size:1.1rem}
@media(max-width:700px){.practice-guide{padding:10px;gap:10px}.practice-guide-copy,.practice-progress{flex-basis:100%}.practice-guide-actions{width:100%}.practice-guide-actions>button{flex:1}.practice-stage-combat .practice-guide-copy{flex-basis:100%}.practice-debrief{padding:14px}.practice-review-cards,.practice-squad-review{grid-template-columns:1fr}.practice-observations dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
.practice-review-cards{display:block}.practice-review-card{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;padding:15px 0;border:0;border-bottom:1px solid #65725d;background:transparent}.practice-review-card.strength,.practice-review-card.improve{border-left:0}.practice-review-card.strength>h2{color:#b9d6a8}.practice-review-card.improve>h2{color:#e4be85}.practice-review-card>h2{margin:4px 0}
@media(max-width:650px){.practice-review-card{grid-template-columns:1fr;gap:4px}.practice-review-card>h2{margin:0}}
/* Practice reports sit on dark field surfaces rather than the paper-form ink. */
.practice-guide{color:#e7e6d5;border-left-width:1px}
.practice-guide-copy>p{color:#e7e6d5}
.practice-debrief{color:#e7e6d5}
.practice-debrief :is(h1,h2,h3,p,dt,summary){color:inherit}
.practice-debrief>h1,.practice-debrief>h2{color:#f0dfb2}
.practice-debrief p.muted{color:#c6cfb8}
.practice-debrief .practice-review-card.strength>h2{color:#b9d6a8}
.practice-debrief .practice-review-card.improve>h2{color:#e4be85}

/* Combat is a single viewport: the field and its orders share a bounded layout.
   Only optional reference material opens above it; action panels never scroll. */
#workspace:has(.tactical-screen) { min-height:0; overflow:visible; }
.tactical-screen { display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; gap:6px; min-height:0; }
.tactical-topline { padding:7px 0; }
.tactical-area { flex:initial; min-height:0; grid-template-columns:minmax(0,1fr) 280px; gap:8px; }
.tactical-inspector { position:relative; display:flex; flex-direction:column; gap:7px; overflow:visible; padding:8px; }
.tactical-summary { position:relative; min-width:0; padding-right:0; }
.tactical-selected { gap:8px; }
.tactical-selected h3 { margin:0; font-size:1.1rem; }
.tactical-portrait { width:36px; height:44px; }
.tactical-vitals { margin-top:5px; font-size:.95rem; }
.tactical-ap { margin:4px 0 6px; }
.tactical-weapon { margin:0; }
.tactical-weapon-stats { margin:2px 0; font-size:.7rem; }
.tactical-weapon-details { font-size:.7rem; color:#d2c795; }
.tactical-weapon-details>summary { cursor:pointer; }
.tactical-weapon-details[open] { position:absolute; z-index:80; top:0; right:0; width:min(320px,85vw); padding:10px; background:#19291f; border:1px solid #849273; box-shadow:0 5px 20px #0009; }
.tactical-weapon-details[open]>.tactical-character-cues { display:block; }
.tactical-inspector>[data-command=switchWeapon] { min-height:34px; margin:0; padding:4px; font-size:.74rem; }
.tactical-orders { order:2; gap:4px; }
.tactical-orders button { min-height:34px; padding:4px 2px; }
.tactical-utilities { order:3; margin:0; padding:5px 0 0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
.tactical-utilities h4 { grid-column:1/-1; font-size:.7rem; margin:0; }
.tactical-utilities button { min-height:34px; padding:3px; gap:3px; font-size:.72rem; white-space:nowrap; }
.tactical-utilities button img { width:23px; height:23px; }
.tactical-preview { order:4; flex:0 0 auto; min-height:0; margin:0; padding:7px 0 0; font-size:.74rem; }
.tactical-preview p { margin:0 0 5px; }
.tactical-preview .tactical-confirm { min-height:34px; }
.tactical-preview .preview-explanation { display:none; }
.tactical-preview .muted,.tactical-utilities .muted { color:#bdc8b5; }
.tactical-intel { order:5; margin-top:auto; font-size:.74rem; color:#c9cbb3; }
.tactical-intel>summary { cursor:pointer; padding:4px 0; }
.tactical-intel-body { position:absolute; bottom:26px; right:0; width:min(470px,calc(100vw - 24px)); max-height:min(580px,75dvh); overflow:auto; z-index:75; padding:12px; border:1px solid #849273; background:#19291f; box-shadow:0 5px 20px #0009; }
.tactical-intel:not([open])>.tactical-intel-body { display:none; }
.tactical-squad { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); overflow:visible; min-height:0; padding:0; gap:5px; }
.tactical-squad .tactical-soldier { min-width:0; max-width:none; padding:4px; gap:5px; min-height:48px; }
.tactical-soldier img { width:30px; height:38px; }
.tactical-soldier strong { font-size:.76rem; }
.tactical-soldier small { font-size:.68rem; margin-top:1px; }
.tactical-bottom { flex-wrap:nowrap; padding-top:5px; }
.tactical-bottom button { min-height:34px; }
.tactical-log { flex-basis:auto; }
@media(max-height:800px) and (min-width:651px) {
 .tactical-topline { padding:5px 0; }
 .tactical-inspector { gap:5px; }
 .tactical-selected .tactical-eyebrow { display:none; }
 .tactical-portrait { height:32px; width:26px; }
 .tactical-selected h3 { font-size:1rem; }
 .tactical-ap { margin:3px 0; }
 .tactical-vitals { margin-top:3px; }
 .tactical-preview { padding-top:5px; }
 .tactical-utilities { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
 #app:has(.tactical-screen)>main { padding:0 5px 4px; }
 #app:has(.tactical-screen)>#message:not(:empty) { padding:2px 6px; font-size:.65rem; }
 .tactical-screen { flex:1; min-height:0; gap:4px; }
 .tactical-topline { flex-wrap:nowrap; gap:5px; padding:4px 0; min-width:0; }
 .tactical-objective .tactical-eyebrow { display:none; }
 .tactical-objective h2 { font-size:.9rem; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .tactical-objective-copy { font-size:.65rem; line-height:1.15; }
 .tactical-phase strong { font-size:.9rem; letter-spacing:.02em; }
 .tactical-phase p { font-size:.55rem; max-width:72px; margin:1px 0; }
 .tactical-top-actions { width:auto; gap:3px; }
 .tactical-top-actions button { min-height:32px; font-size:.65rem; padding:3px 5px; }
 .tactical-area { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(216px,1fr) auto; gap:4px; min-height:0; }
 .tactical-map-frame { height:auto; flex-shrink:1; min-height:0; }
 .tactical-map-toolbar { min-height:34px; gap:3px; padding:2px 4px; }
 .tactical-map-toolbar>span { display:none; }
 .tactical-map-toolbar>div { margin-left:0; flex:1; justify-content:space-between; }
 .tactical-map-toolbar button { min-height:29px; padding:1px 6px; }
 .tactical-inspector { display:grid; grid-template-columns:minmax(0,1fr); gap:4px; padding:5px; }
 .tactical-inspector>* { grid-column:1; grid-row:auto!important; }
 .tactical-summary { display:grid; grid-template-columns:minmax(0,1fr) auto; padding-right:61px; gap:0 6px; }
 .tactical-selected { grid-column:1; grid-row:1; gap:4px; min-width:0; }
 .tactical-selected>div { min-width:0; }
 .tactical-selected h3 { font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .tactical-selected .tactical-eyebrow,.tactical-selected p,.tactical-portrait,.tactical-ap { display:none; }
 .tactical-vitals { grid-column:2; grid-row:1; margin:0; gap:7px; font-size:.72rem; align-items:center; }
 .tactical-weapon { grid-column:1/-1; grid-row:2; font-size:.68rem; margin:0; }
 .tactical-weapon-stats { grid-column:1/-1; grid-row:3; font-size:.65rem; margin:0; }
 .tactical-weapon-details { position:absolute; right:0; top:19px; font-size:.57rem; }
 .tactical-weapon-details[open] { top:19px; font-size:.75rem; }
 .tactical-inspector>[data-command=switchWeapon] { min-height:30px; font-size:.69rem; }
 .tactical-inspector>.tactical-orders { order:2; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; }
 .tactical-orders button { min-height:34px; font-size:.7rem; padding:3px 0; }
 .tactical-utilities { order:3; grid-template-columns:repeat(auto-fit,minmax(60px,1fr)); padding-top:3px; gap:3px; }
 .tactical-utilities h4 { display:none; }
 .tactical-utilities button { justify-content:center; min-height:34px; font-size:.64rem; gap:2px; padding:2px; }
 .tactical-utilities button img { width:17px; height:17px; }
 .tactical-preview { order:4; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:3px 6px; padding-top:4px; font-size:.66rem; line-height:1.2; }
 .tactical-preview p { margin:0; }
 .tactical-preview>p:not(.tactical-reason):not(.utility-friendly-warning) { grid-column:1; }
 .tactical-preview .tactical-confirm { grid-column:2; grid-row:1 / span 3; width:auto; min-width:115px; min-height:36px; padding:4px 6px; font-size:.7rem; }
 .tactical-preview .shot-chance { grid-column:1; font-size:1rem; }
 .tactical-preview .tactical-reason,.tactical-preview .utility-friendly-warning { grid-column:1/-1; margin:0!important; padding:3px; font-size:.65rem; }
 .tactical-intel { position:absolute; right:5px; top:3px; margin:0; font-size:.66rem; }
 .tactical-intel>summary { padding:0; min-height:19px; }
 .tactical-intel-body { position:fixed; bottom:85px; right:8px; max-height:65dvh; }
 .tactical-squad { min-height:0; gap:3px; }
 .tactical-squad .tactical-soldier { min-height:40px; padding:3px; gap:4px; }
 .tactical-soldier img { width:24px; height:30px; }
 .tactical-soldier strong { font-size:.67rem; }
 .tactical-soldier small { font-size:.62rem; }
 .tactical-bottom { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; padding-top:3px; }
 .tactical-log { grid-column:1/-1; font-size:.62rem; }
 .tactical-bottom button,.tactical-bottom .tactical-end-turn { min-width:0; min-height:36px; padding:3px 1px; font-size:.65rem; white-space:normal; line-height:1.1; }
}

@media(max-width:650px) { .tactical-summary { line-height:1.2; }.tactical-preview .utility-friendly-warning { font-size:.61rem;line-height:1.1; } }
@media(max-height:800px) and (min-width:651px) {
 .tactical-orders { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .tactical-orders button { font-size:.67rem; }
 .tactical-utilities { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .tactical-utilities h4 { display:none; }
 .tactical-utilities button { justify-content:center; font-size:.64rem; gap:2px; padding:2px; }
 .tactical-utilities button img { width:15px; height:15px; }
 .tactical-preview .utility-friendly-warning { padding:5px; }
}
@media(max-width:650px) {
 .tactical-squad:has(.tactical-soldier:nth-child(5)) .tactical-soldier { flex-direction:column;gap:1px; }
 .tactical-squad:has(.tactical-soldier:nth-child(5)) .tactical-soldier img { display:none; }
 .tactical-squad:has(.tactical-soldier:nth-child(5)) .tactical-soldier strong { font-size:.61rem; }
 .tactical-squad:has(.tactical-soldier:nth-child(5)) .tactical-soldier small { font-size:.57rem; }
}
/* Save/status feedback is a brief field notification and does not resize orders. */
#app:has(.tactical-screen)>#message:not(:empty) { position:fixed; z-index:90; top:150px; left:24px; max-width:min(360px,75vw); padding:4px 8px; border:1px solid #84927366; background:#19291fed; pointer-events:none; }
@media(max-width:650px) { #app:has(.tactical-screen)>#message:not(:empty) { top:108px; left:12px; max-width:70vw; padding:3px 6px; } }

/* Coverage and reconnaissance remain visible beside the battlefield controls. */
.tactical-range-hud { display:flex; flex-wrap:wrap; gap:4px 16px; padding:4px 9px 2px; background:#18261f; font-size:.76rem; font-weight:700; font-variant-numeric:tabular-nums; }
.range-walk,.range-sneak { color:#a3e0da; }
.range-fire { color:#f0cb86; }
.tactical-map-legend { display:flex; flex-wrap:wrap; gap:3px 12px; padding:2px 9px 5px; background:#18261f; font-size:.64rem; line-height:1.25; color:#d0d8c8; }
.tactical-map-legend>span { white-space:nowrap; }
.legend-reachable { color:#a3e0da; }
.legend-fire { color:#f0cb86; }
.legend-explored { color:#a8b1a3; }
.legend-unexplored { color:#a0a8a2; }
.legend-controls { margin-left:auto; }
.tactical-board .tactical-tile.firing-range::after { content:''; position:absolute; inset:4px; border:1px solid #edbd5b88; background:#dca43b16; pointer-events:none; z-index:2; }
.tactical-board .tactical-tile.firing-range.route::after { content:'·'; }
.tactical-board .tactical-tile.reachable::before { background:#67d1cf35; box-shadow:inset 0 0 0 2px #8ae1df88; }
.tactical-board .tactical-tile.explored { filter:brightness(.55) saturate(.55); }
.tactical-board .tactical-tile.unexplored { background:#101917; background-image:none; }
.tactical-board .tactical-tile.unexplored::before { background:#101917; box-shadow:none; }
@media(max-width:650px) {
 .tactical-map-frame { position:relative; }
 .tactical-range-hud { position:absolute; top:35px; left:0; right:0; z-index:41; padding:3px 5px; gap:3px 12px; font-size:.65rem; background:#14221ff0; pointer-events:none; }
 .tactical-map-legend { position:absolute; bottom:0; left:0; right:0; z-index:41; padding:3px 5px; gap:2px 9px; font-size:.55rem; background:#14221ff0; pointer-events:none; }
 .legend-controls { margin-left:0; }
}