/* Unit names in side colours (js/command.js). */
.nm { font-weight: 600; white-space: nowrap; }
.nm-mine { color: #8fc8f5; }
.nm-foe { color: #f39a8c; }
.engagement-head .muted .nm, .dp-label .nm, #battle-log .nm { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }

/* hot seat: the handover banner and the second player's setup fields (js/hotseat.js) */
.hs-banner { position: absolute; left: 50%; top: 46%; transform: translateX(-50%); z-index: 30; pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 34px 12px; border-radius: 6px;
  background: rgba(6, 10, 15, 0.9); border: 1px solid var(--panel-edge); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  animation: hs-in 0.28s ease-out; transition: opacity 0.6s ease, transform 0.6s ease; }
.hs-banner b { font-family: var(--head); font-size: 26px; font-weight: 400; letter-spacing: 0.06em; }
.hs-banner small { font-family: var(--label); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #a9b6c2; }
.hs-banner.side-0 { border-top: 3px solid var(--blue); } .hs-banner.side-0 b { color: var(--blue); }
.hs-banner.side-1 { border-top: 3px solid var(--red); } .hs-banner.side-1 b { color: var(--red); }
.hs-banner.out { opacity: 0; transform: translateX(-50%) translateY(-8px); pointer-events: none; }
@keyframes hs-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } }
.hs-names { display: flex; gap: 18px; flex-wrap: wrap; }
.hs-names input { width: 150px; }
@media (max-width: 560px) { .hs-banner { padding: 12px 20px 10px; max-width: calc(100% - 32px); } .hs-banner b { font-size: 21px; } }