[hidden] { display: none !important; }
.match-hud { flex: 0 0 auto; padding: 12px 36px; background: #202c27; border-bottom: 1px solid #a9bf8e35; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.match-info { display: flex; align-items: center; gap: 14px; font-size: 11px; color: #a7b5a5; }
.match-info strong { font-family: ui-monospace, monospace; color: #e2d39d; font-size: 12px; font-weight: 500; }
.seat-badge { padding: 5px 8px; border: 1px solid #ffffff20; border-radius: 3px; font-size: 10px; }
.seat-badge.blue { color: #b7dbed; background: #507e9e33; }
.seat-badge.red { color: #edbfb7; background: #9e605033; }
#match-status { margin: 7px 0 0; font-size: 10px; color: #bac7b2; }
.match-actions { display: flex; align-items: center; gap: 18px; }
#opponent-status { font-size: 10px; color: #d6b58b; }
#opponent-status[data-connected="true"] { color: #b7ce9e; }
#leave-match { border: 1px solid #9aa78a66; border-radius: 3px; background: #a3b3930c; padding: 8px 12px; color: #dae3d0; font-size: 11px; }
#leave-match:hover { background: #a3b39322; }
#leave-match:disabled { opacity: .5; cursor: wait; }
.opponent-unit { cursor: default; pointer-events: none; }
.live-match .preview-badge { color: #b8c5ad; }
.live-match .data-link { display:none; }
.live-match .page-label { margin-left:28px; }
.player-perspectives { display:flex; align-items:center; gap:8px; margin-left:auto; }
.player-portrait { display:flex; align-items:center; gap:7px; padding:3px 8px 3px 3px; border:1px solid #9daf8b35; border-radius:6px; background:#22312c; color:#cbd5c5; text-align:left; cursor:pointer; }
.player-portrait img { width:38px; height:38px; object-fit:contain; border-radius:4px; background:#425244; }
.player-portrait strong { display:block; font-size:10px; font-weight:600; }
.player-portrait small { display:block; margin-top:4px; font-size:9px; color:#a8b9a3; }
.player-portrait i { width:5px; height:5px; border-radius:50%; background:#b59472; }
.player-portrait[data-connected="true"] i { background:#a9c68d; }
.player-portrait[aria-pressed="true"] { border-color:#c8b17a; background:#384337; box-shadow:0 0 12px #d9c38c12; }
.player-portrait:hover,.player-portrait:focus-visible { border-color:#e9d497; outline:none; }
.player-portrait:disabled { cursor:wait; opacity:.65; }
.spectating #units .unit { cursor:help; }
@media(max-width:800px) { .live-match .page-label { display:none; } }
@media(max-width:500px) {
  .live-match .topbar { padding:6px 12px; }
  .live-match .brand { font-size:10px; gap:6px; }
  .player-perspectives { gap:5px; }
  .player-portrait { padding-right:5px; gap:4px; }
  .player-portrait img { width:28px; height:32px; }
  .player-portrait strong { font-size:9px; }
  .player-portrait small { font-size:8px; }
  .player-portrait i { display:none; }
}
@media (max-width: 700px) {
  .match-hud { padding: 10px 16px; align-items: flex-start; gap: 10px; }
  .match-info { gap: 7px; flex-wrap: wrap; font-size: 9px; }
  .match-info strong { font-size: 10px; }
  .seat-badge { font-size: 9px; padding: 4px 5px; }
  .match-actions { flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; }
  #opponent-status { font-size: 8px; }
  #match-status { font-size: 8px; line-height: 1.5; max-width: 220px; }
  #leave-match { font-size: 10px; padding: 6px 9px; }
}