.territory-war-hud { position: fixed; z-index: 18; top: var(--territory-war-top, max(16px, env(safe-area-inset-top))); left: var(--territory-war-left, max(16px, env(safe-area-inset-left))); display: grid; gap: 6px; width: min(264px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; scrollbar-width: thin; pointer-events: none; color: #d1c8ad; font: 16px/1.1 'Street Terminal', 'Courier New', monospace; text-shadow: 1px 1px #0c0e0a; }
.territory-war-hud *, .territory-war-hud *::before, .territory-war-hud *::after { box-sizing: border-box; }
.territory-war-hud[hidden], .territory-war-hud [hidden] { display: none !important; }
.territory-war-card { --war-color: #bcc99b; min-width: 0; border: 1px solid #77705a; border-left: 3px solid var(--war-color); border-bottom: 2px solid #4d4837; background: var(--wear, repeating-linear-gradient(0deg, #aaa08004 0 1px, transparent 1px 4px)), #191d17ed; box-shadow: 2px 3px #090e09a0; pointer-events: auto; }
.territory-war-card[data-role="defend"] { --war-color: #e3a483; }
.territory-war-card[data-in-zone="true"] { border-color: var(--war-color); }
.territory-war-heading { display: flex; align-items: center; min-width: 0; }
.territory-war-route { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; min-height: 42px; flex: 1; padding: 7px 9px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.territory-war-role { color: var(--war-color); font-size: 14px; font-weight: 400; letter-spacing: .7px; }
.territory-war-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.territory-war-cancel { align-self: stretch; padding: 5px 8px; border: 0; border-left: 1px solid #78755c50; background: transparent; color: #c8bea5; font: inherit; font-size: 14px; cursor: pointer; }
.territory-war-route:hover, .territory-war-cancel:hover { background: #e9debd0c; color: #fff3d7; }
.territory-war-route:focus-visible, .territory-war-cancel:focus-visible { outline: 2px dashed #d0b880; outline-offset: -3px; }
.territory-war-details { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 8px; padding: 0 9px 9px; font-variant-numeric: tabular-nums; }
.territory-war-round { color: var(--war-color); font-size: 14px; white-space: nowrap; }
.territory-war-status { min-width: 0; text-align: right; overflow-wrap: anywhere; font-size: 14px; color: #c6bfa9; }
.territory-war-progress { grid-column: 1 / -1; display: block; width: 100%; height: 3px; border: 0; appearance: none; background: #756b473d; color: var(--war-color); }
.territory-war-progress::-webkit-progress-bar { background: #756b473d; }
.territory-war-progress::-webkit-progress-value { background: var(--war-color); }
.territory-war-progress::-moz-progress-bar { background: var(--war-color); }
@media (max-width: 600px), (max-height: 520px) and (pointer: coarse) {
  .territory-war-hud { top: var(--territory-war-top, calc(160px + env(safe-area-inset-top))); left: var(--territory-war-left, max(12px, env(safe-area-inset-left))); width: min(132px, calc(100vw - 192px)); max-height: calc(100dvh - 180px - env(safe-area-inset-top)); gap: 4px; }
  .territory-war-route { grid-template-columns: minmax(0, 1fr); min-height: 44px; gap: 2px; padding: 6px 7px; }
  .territory-war-role { font-size: 13px; }
  .territory-war-name { font-size: 15px; }
  .territory-war-cancel { width: 24px; flex: 0 0 24px; padding: 0; font-size: 0; }
  .territory-war-cancel::before { content: '×'; font-size: 16px; }
  .territory-war-details { grid-template-columns: minmax(0, 1fr); padding: 0 7px 7px; gap: 3px; }
  .territory-war-round, .territory-war-status { font-size: 14px; text-align: left; }
}
@media (max-height: 520px) and (max-width: 600px), (max-height: 520px) and (pointer: coarse) {
  .territory-war-hud { max-height: max(48px, calc(100dvh - 320px - env(safe-area-inset-top))); }
}