/* =========================================================
   SCORCHED DIVIDE — in-match squad bar
   A portrait for each troop on the field, just above the card bar.
   ========================================================= */

.squad-bar {
    position: absolute;
    left: 50%;
    bottom: 132px;               /* replaced by JS so it always sits right above the card bar */
    transform: translateX(-50%);
    z-index: 31;
    display: flex;
    gap: 6px;
    padding: 0;
    max-width: calc(100vw - 16px);
    pointer-events: none;        /* only the portraits catch clicks; the field shows between them */
    touch-action: manipulation;
}

.squad-bar[hidden] { display: none; }
body:not(.rivals-mode) .squad-bar { display: none !important; }

.squad-chip {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 2px solid #3b4553;
    border-radius: 8px;
    background: #10151c;
    cursor: pointer;
    overflow: hidden;
    pointer-events: auto;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
    opacity: 0.92;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}

.squad-chip:hover { border-color: #8a96a8; opacity: 1; }
.squad-chip:active { transform: scale(0.94); }
.squad-chip:focus-visible { outline: 2px solid #e8e2d4; outline-offset: 1px; }

.squad-chip.selected {
    border-color: #00d2d3;
    box-shadow: 0 0 0 1px #00d2d3, 0 0 12px rgba(0, 210, 211, 0.6);
    opacity: 1;
}

.squad-art {
    position: absolute;
    inset: 0 0 6px 0;
    background-size: cover;
    background-position: center 25%;
}

.squad-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: #1b2430;
}

.squad-lvl {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    background: #f2a900;
    color: #1a1406;
    font: 700 10px/14px "Share Tech Mono", monospace;
    text-align: center;
}

.squad-hp {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: #2a1416;
}

.squad-hp i {
    display: block;
    height: 100%;
    background: #2ecc71;
}

.squad-chip.low .squad-hp i { background: #ff4757; }

/* Phones in landscape: smaller portraits, still a comfortable tap target */
@media (max-height: 600px) {
    .squad-bar { gap: 4px; }
    .squad-chip { width: 36px; height: 36px; border-radius: 6px; }
    .squad-icon { font-size: 18px; }
}

/* =========================================================
   Home screen: the two factions' battle tanks face off
   ========================================================= */
.mm-theater { position: relative; }

.mm-faceoff {
    position: absolute;
    right: 0;
    bottom: 128px;              /* just above the theater strip */
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    z-index: 0;
}

.mm-theater-info, .mm-strip-wrap { position: relative; z-index: 1; }

.mm-faceoff-unit {
    height: min(34vh, 330px);
    width: auto;
    filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.55));
}

/* Aegis rolls in from the west, Dominion from the east (mirrored to face it) */
.mm-faceoff-dominion {
    transform: scaleX(-1);
    margin-left: -6%;
}

@media (max-height: 760px) and (min-width: 1021px) {
    .mm-faceoff-unit { height: 26vh; }
}

/* No room for them on phones and narrow windows */
@media (max-height: 500px), (max-width: 1020px) {
    .mm-faceoff { display: none; }
}

/* Nuclear launch: clear the silo panel so the launch and climb can be seen */
body.nuke-in-flight .silo-tracker {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
body.nuke-in-flight #silo-status-text,
body.nuke-in-flight .silo-progress-track {
    opacity: 0;
    transition: opacity 0.3s ease;
}
body.nuke-in-flight #silo-announcement {
    top: 230px;
}

/* Asset card while its pillbox / spire / SAM is still standing */
.defense-card.asset-on-field .cooldown-overlay {
    border-color: rgba(243, 156, 18, 0.7);
}
.defense-card.asset-on-field .cooldown-overlay span {
    color: #f39c12;
    font-size: 13px;
    text-shadow: 0 0 8px rgba(243, 156, 18, 0.7);
}