/* HUD (Frente C): canto direito e painel Batalha (C4). Só consome var(--au-*) e as dimensões --au-hud-* de hud.css.
   Seletores começam por .au-hud, .hud[data-hud ou [data-. */
:root {
  --au-hud-radar: 150px;
  --au-hud-radar-celular: 96px;
  --au-hud-barra-inimigo: 6px;
  --au-hud-anel: 2px;
  --au-hud-fio: 1px;
}

/* ---- painel Batalha ---- */
.au-hud-batalha {
  width: var(--au-hud-col-dir-w);
  max-width: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: var(--au-borda);
  border-radius: var(--au-raio-2);
  background: var(--au-vidro);
  font-family: var(--au-fonte-texto);
  color: var(--au-texto);
}
.au-hud-batalha__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--au-esp-2);
  padding: var(--au-esp-1) var(--au-esp-2);
  font-family: var(--au-fonte-titulo);
  font-size: var(--au-t-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.au-hud-batalha__topo::-webkit-details-marker {
  display: none;
}
.au-hud-batalha__topo b {
  font-family: var(--au-fonte-num);
  color: var(--au-valor);
}
.au-hud-batalha__lista {
  margin: 0;
  padding: 0 var(--au-esp-1) var(--au-esp-1);
  list-style: none;
  display: grid;
  gap: var(--au-esp-1);
}
.au-hud-inimigo {
  display: grid;
  grid-template-columns: var(--au-esp-3) auto 1fr;
  align-items: center;
  gap: var(--au-esp-1);
  padding: var(--au-esp-1);
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-radius: var(--au-raio-1);
}
.au-hud-inimigo[data-estado="agressivo"] {
  border-color: var(--au-aviso);
}
.au-hud-inimigo[data-estado="alvo"] {
  border-color: var(--au-sistema);
  background: var(--au-superficie);
}
.au-hud-inimigo__marca {
  font-weight: 700;
  text-align: center;
}
.au-hud-inimigo[data-estado="agressivo"] .au-hud-inimigo__marca {
  color: var(--au-aviso);
}
.au-hud-inimigo[data-estado="alvo"] .au-hud-inimigo__marca {
  color: var(--au-sistema);
}
.au-hud-inimigo__retrato {
  width: var(--au-esp-5);
  height: var(--au-esp-5);
  image-rendering: pixelated;
  object-fit: contain;
}
.au-hud-inimigo__corpo {
  display: grid;
  gap: var(--au-esp-1);
  min-width: 0;
}
.au-hud-inimigo__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--au-esp-1);
  font-size: var(--au-t-1);
  min-width: 0;
}
.au-hud-inimigo__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.au-hud-inimigo__nivel {
  margin-left: auto;
  font-style: normal;
  font-family: var(--au-fonte-num);
  color: var(--au-texto-suave);
}
.au-hud-inimigo__dica {
  color: var(--au-texto-fraco);
  text-transform: uppercase;
  font-size: var(--au-t-1);
}
.au-hud-inimigo .au-barra {
  height: var(--au-hud-barra-inimigo);
}
.au-hud-inimigo .au-barra__rotulo {
  display: none;
}
.au-hud-batalha__topo:focus-visible,
.au-hud-online:focus-visible {
  outline: var(--au-hud-anel) solid var(--au-sistema);
  outline-offset: var(--au-hud-anel);
}

/* ---- status do líder ---- */
.au-hud-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--au-esp-1);
  margin-bottom: var(--au-esp-1);
  font-size: var(--au-t-1);
}
.au-hud-status__nome {
  color: var(--au-texto-suave);
}

/* ---- rota, online, radar ---- */
.au-hud-rota__curto {
  display: none;
}
.au-hud-online {
  display: inline-flex;
  align-items: center;
  gap: var(--au-esp-1);
  min-height: var(--au-toque);
  padding: 0 var(--au-esp-2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--au-borda);
  border-radius: var(--au-raio-pilula);
  background: var(--au-vidro);
  color: var(--au-texto);
  font-family: var(--au-fonte-texto);
  font-size: var(--au-t-1);
  cursor: pointer;
}
.au-hud-online__luz {
  width: var(--au-esp-2);
  height: var(--au-esp-2);
  border-radius: var(--au-raio-pilula);
  background: var(--au-ok);
}
.au-hud-online[data-estado="offline"] .au-hud-online__luz {
  background: var(--au-perigo);
}
.au-hud-online__num {
  font-family: var(--au-fonte-num);
}
.au-hud-online__texto {
  text-transform: uppercase;
  color: var(--au-texto-suave);
}
.au-hud-radar canvas {
  display: block;
  width: var(--au-hud-radar);
  height: var(--au-hud-radar);
  border-width: 2px;
  border-style: solid;
  border-color: var(--au-borda-forte);
  border-radius: var(--au-raio-2);
  background: var(--au-poco);
}

/* ---- moldura do medalhão de Tarefas (só reaponta cores para tokens) ---- */
[data-hud="dir"] .daily-medalhao {
  background: conic-gradient(from -90deg, var(--au-valor) calc(var(--p) * 1%), var(--au-borda) 0);
  box-shadow: 0 0 0 var(--au-hud-fio) var(--au-borda-forte);
}
[data-hud="dir"] .daily-medalhao::before {
  background: var(--au-poco);
  box-shadow: inset 0 0 0 var(--au-hud-fio) var(--au-borda);
}
[data-hud="dir"] .daily-medalhao b {
  background: var(--au-valor);
  color: var(--au-poco);
  font-family: var(--au-fonte-titulo);
}
[data-hud="dir"] .daily-medalhao-casa .daily-medalhao-conta {
  background: var(--au-vidro);
  color: var(--au-valor);
  font-family: var(--au-fonte-num);
}
[data-hud="dir"] .daily-medalhao.m-completo {
  background: conic-gradient(from -90deg, var(--au-ok) 100%, var(--au-borda) 0);
}
[data-hud="dir"] .daily-medalhao:focus-visible {
  outline: var(--au-hud-anel) solid var(--au-sistema);
  outline-offset: var(--au-hud-anel);
}

/* ---- celular ---- */
@media (max-width: 640px) {
  .au-hud-batalha {
    width: var(--au-hud-col-dir-w);
  }
  .au-hud-batalha[data-compacto]:not([open]) .au-hud-batalha__lista {
    display: none;
  }
  .au-hud-rota__curto {
    display: inline;
  }
  .au-hud-rota .au-selo {
    display: none;
  }
  .au-hud-radar canvas {
    width: var(--au-hud-radar-celular);
    height: var(--au-hud-radar-celular);
  }
}

@media (prefers-reduced-motion: reduce) {
  .au-hud-batalha,
  .au-hud-batalha *,
  .au-hud-online {
    animation: none;
    transition: none;
  }
}

/* ---- ganchos que o ui.js emite (C12): contêineres do radar e do online, e partes de status/online/time ---- */
.au-hud-lugar {
  display: flex;
  justify-content: center;
  margin-top: var(--au-esp-1);
}
.au-hud-caixa-online {
  display: flex;
  justify-content: center;
  margin-top: var(--au-esp-1);
  cursor: pointer;
}
.au-hud-online__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--au-texto-suave);
}
.au-hud-status__item {
  display: inline-flex;
}