.deployment-heading { position:absolute; z-index:12; top:24px; left:28px; right:28px; display:flex; justify-content:space-between; align-items:start; gap:16px; }
.deployment-heading h1 { margin:4px 0; font-size:26px; }
.deployment-heading p { margin:4px 0; }
.deployment-heading > div { background:#161c18ed; padding:12px 16px; border-radius:8px; }
.deployment-camera { position:absolute; z-index:12; right:28px; top:100px; display:flex; gap:8px; }
.deployment-panel { position:absolute; z-index:12; bottom:max(16px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(720px,calc(100% - 32px)); background:#171c19f5; padding:16px; border:1px solid #526154; border-radius:12px; }
.deployment-panel > p { margin:0 0 12px; min-height:24px; font-size:14px; }
.deployment-roster { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.deployment-creature { min-height:100px; min-width:0; display:flex; flex-direction:column; align-items:center; border:1px solid #69756b; border-radius:8px; background:#252d27; color:#fff; padding:4px; font:inherit; cursor:pointer; }
.deployment-creature img { object-fit:contain; image-rendering:pixelated; }
.deployment-creature span { font-size:12px; }
.deployment-creature small { color:#c7d5c9; }
.deployment-creature[aria-pressed="true"] { border:2px solid #d4b8ff; background:#3b304b; }
.deployment-creature:focus-visible { outline:3px solid #03dac6; outline-offset:3px; }
.deployment-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.deployment-actions p { font-size:12px; color:#c7d5c9; margin:0; }
.deployment-screen .scene-viewport { --scene-safe-top:140px; --scene-safe-bottom:240px; }
.iso-cell.is-deployment-cell { border:3px solid #d4b8ff; background:#bb86fc40; }
.iso-cell.is-deployment-cell .iso-action-label { color:#fff; text-shadow:0 1px 3px #000; }
@media(max-width:600px) {
 .deployment-heading { top:12px; left:12px; right:12px; gap:8px; }
 .deployment-heading h1 { font-size:20px; }
 .deployment-heading p { font-size:11px; }
 .deployment-heading > div { padding:8px; }
 .deployment-camera { right:12px; top:112px; }
 .deployment-panel { width:calc(100% - 16px); padding:10px; bottom:8px; }
 .deployment-panel > p { font-size:12px; }
 .deployment-roster { gap:4px; }
 .deployment-creature { min-height:94px; }
 .deployment-creature img { width:48px; height:48px; }
 .deployment-creature span { font-size:10px; overflow-wrap:anywhere; }
 .deployment-actions { margin-top:8px; }
 .deployment-actions p { max-width:140px; }
}
.iso-cell.is-deployment-cell .iso-target { stroke:#d4b8ff; stroke-width:3; stroke-dasharray:5 3; fill:#bb86fc30; }
.iso-cell.is-deployment-cell:focus-visible .iso-target { stroke:#03dac6; stroke-width:5; stroke-dasharray:none; }
/* Formation selection lives in the roster. Sprite hit areas must not cover
   neighboring placement tiles, especially at the compact overview scale. */
.deployment-screen .iso-piece-hit { pointer-events:none; }
.deployment-placement { display:flex; align-items:center; gap:8px; margin-top:12px; }
.deployment-placement label { font-size:12px; color:#e0e9e1; }
.deployment-placement select { min-height:48px; min-width:72px; padding:8px 12px; border:1px solid #859287; border-radius:6px; background:#252d27; color:#fff; font:inherit; }
.deployment-placement select:focus-visible { outline:3px solid #03dac6; outline-offset:2px; }
.deployment-placement button { min-height:48px; }
@media(max-width:600px) { .deployment-placement { margin-top:8px; } .deployment-placement label { flex:1; } }