/* Pre-match commanders replace the asset picker; existing asset definitions stay live. */
.phone-ui #loadout-screen.pcmd-enabled #loadout-assets { display: none !important; }
.phone-ui #loadout-screen.pcmd-enabled .phone-loadout-scroll-hint { display: none; }
.pcmd-loadout-summary { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 49%; margin-left: auto; text-align: right; line-height: 1.2; }
.pcmd-loadout-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 12px 'Chakra Petch', sans-serif; color: #f4d99e; }
.pcmd-loadout-summary > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px 'Chakra Petch', sans-serif; color: #c0d0d9; }
.pcmd-grid { --pcmd-accent: #73c7c5; --pcmd-border: #477c83; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 9px; padding: 1px 0 5px; }
.pcmd-grid[data-faction="nod"] { --pcmd-accent: #f09883; --pcmd-border: #93514e; }
.phone-ui .pcmd-card { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--pcmd-border); border-radius: 7px; background: linear-gradient(155deg, #263743, #121c27); color: #f6f2e8; text-align: left; touch-action: manipulation; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.phone-ui .pcmd-card.pcmd-selected { border-color: #ffd276; background: linear-gradient(155deg, #3c4032, #19252b); box-shadow: inset 0 0 0 1px #ffd276, 0 2px 9px #0006; }
.phone-ui .pcmd-card:focus-visible { outline: 3px solid #fff0bd; outline-offset: -4px; }
.phone-ui .pcmd-card:disabled { cursor: default; opacity: .55; }
.pcmd-portrait { position: relative; display: block; flex: none; width: 100%; height: clamp(76px, 25vh, 112px); overflow: hidden; border-bottom: 1px solid var(--pcmd-border); background: radial-gradient(ellipse at 50% 35%, #3a5661, #13222d); }
.pcmd-grid[data-faction="nod"] .pcmd-portrait { background: radial-gradient(ellipse at 50% 35%, #6b3d3b, #211a22); }
.pcmd-portrait img { position: absolute; display: block; top: 0; left: 50%; width: auto; max-width: none; height: 155%; transform: translateX(-50%); object-fit: contain; object-position: center top; }
.pcmd-initials { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; font: 800 38px 'Barlow Condensed', sans-serif; color: var(--pcmd-accent); }
.pcmd-art-missing .pcmd-initials { display: flex; }
.pcmd-identity { display: flex; flex-direction: column; gap: 1px; padding: 7px 8px 4px; }
.pcmd-rank { font: 700 9px 'Chakra Petch', sans-serif; line-height: 1.2; letter-spacing: 1px; text-transform: uppercase; color: var(--pcmd-accent); }
.pcmd-name { font: 800 19px 'Barlow Condensed', sans-serif; line-height: 1.05; letter-spacing: .1px; }
.pcmd-asset { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding: 5px 8px 7px; }
.pcmd-asset small { font: 600 8px 'Chakra Petch', sans-serif; letter-spacing: .6px; line-height: 1.2; color: #aabcc7; }
.pcmd-asset strong { font: 700 12px 'Chakra Petch', sans-serif; line-height: 1.2; color: #e4d6b8; }
.pcmd-pick { display: block; padding: 4px 7px; border-top: 1px solid #50616b; background: #101a23a8; font: 800 9px 'Chakra Petch', sans-serif; letter-spacing: .6px; line-height: 1.2; color: #bacbd4; text-align: center; }
.pcmd-selected .pcmd-pick { color: #ffe0a0; border-color: #b39861; background: #48391f; }
@media (max-width: 720px) and (orientation: landscape) {
    .pcmd-name { font-size: 17px; }
    .pcmd-asset strong { font-size: 11px; }
    .pcmd-identity { padding-inline: 6px; }
    .pcmd-asset { padding-inline: 6px; }
    .pcmd-loadout-summary strong { font-size: 11px; }
    .pcmd-loadout-summary > span { font-size: 10px; }
}
@media (max-width: 560px) and (orientation: portrait) {
    .pcmd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .pcmd-portrait { height: 138px; }
    .pcmd-portrait img { position: relative; left: auto; width: 100%; height: 100%; transform: none; object-fit: cover; }
    .pcmd-name { font-size: 20px; }
    .pcmd-asset strong { font-size: 11px; }
    .pcmd-loadout-summary { max-width: 100%; flex: 1 0 100%; padding: 2px 0; text-align: left; }
    #loadout-screen.pcmd-enabled .phone-loadout-nav { flex-wrap: wrap; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .phone-ui .pcmd-card { transition: none; } }

/* Commander button on the Troops tab: portrait, name, asset and CHANGE. */
.phone-ui .pcmd-loadout-summary { display: flex; flex-direction: row; align-items: center; gap: 8px; max-width: 50%; margin-left: auto; padding: 3px 10px 3px 3px; min-height: 40px; box-sizing: border-box; border: 1px solid #b58a45; border-radius: 8px; background: linear-gradient(90deg, #3a2d16, #1d1912); color: #fff0d0; cursor: pointer; text-align: left; line-height: 1.1; }
.phone-ui .pcmd-loadout-summary[hidden] { display: none !important; }
.pcmd-summary-face { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; object-position: top; border: 1px solid #f2c46a; flex: none; background: #23303d; }
.pcmd-summary-copy { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.pcmd-summary-copy small { font: 700 8px 'Chakra Petch', sans-serif; letter-spacing: 1.5px; color: #e6b966; }
.phone-ui .pcmd-loadout-summary .pcmd-summary-copy strong { font: 800 14px 'Barlow Condensed', sans-serif; letter-spacing: .4px; color: #fff4dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-ui .pcmd-loadout-summary .pcmd-summary-copy > span { font: 500 10px 'Chakra Petch', sans-serif; color: #d8c9a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcmd-summary-cta { font: 800 11px 'Chakra Petch', sans-serif; font-style: normal; color: #1b1407; background: linear-gradient(#f6cc6a, #c8952d); border-radius: 5px; padding: 4px 8px; white-space: nowrap; margin-left: auto; }
.pcmd-loadout-summary.pcmd-attention { animation: pcmd-pulse 1.6s ease-in-out infinite; }
@keyframes pcmd-pulse { 0%, 100% { box-shadow: 0 0 0 0 #f2b02a00; } 50% { box-shadow: 0 0 0 4px #f2b02a66; } }
@media (prefers-reduced-motion: reduce) { .pcmd-loadout-summary.pcmd-attention { animation: none; box-shadow: 0 0 0 2px #f2b02a88; } }
@media (max-width: 760px) { .phone-ui .pcmd-loadout-summary { max-width: 100%; flex: 1 0 100%; } }

/* The commanders and troops now share the same scrolling catalog. */
.phone-ui #loadout-screen.pcmd-enabled .phone-loadout-nav { display: none !important; }
.phone-ui #loadout-screen.pcmd-enabled .loadout-section { margin-bottom: 14px; }
.phone-ui #loadout-screen.pcmd-enabled .loadout-section-head h2 { font-size: 14px; color: #f2d393; }
.pcmd-help { margin: 0 0 9px; color: #bdced8; font: 500 11px/1.4 'Chakra Petch', sans-serif; }
.pcmd-ability { color: var(--pcmd-accent); font: 500 10px/1.3 'Chakra Petch', sans-serif; }
.phone-ui .pcmd-card { touch-action: pan-y; }
.pcmd-pick { padding: 5px 7px; font-size: 10px; }