/* HUD da luta: tábuas de vida (3D, só o lugar delas), barras, rótulos, cartão de abertura, aviso de finalização e
   botão de pausa. */
.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hud__top,
.hud__bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 560px);
}

.hud__top {
  top: calc(10px + var(--safe-top));
}

.hud__bottom {
  bottom: calc(12px + var(--safe-bottom));
}

/* Só o estado do oponente no treino ("guarda ◀", "ABERTO!"); o nome vai gravado na tábua. A altura mínima segura a
   tábua no lugar quando o estado fica vazio. */
.hud__name-row {
  display: flex;
  justify-content: flex-end;
  min-height: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  font-size: 15px;
  margin-bottom: 4px;
}

#opponent-status {
  color: var(--color-accent);
  font-size: 12px;
  align-self: end;
}

.hud__meter-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hud__meter-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

/* "MAX" do Fluxo cheio, pulsando (a barra também pulsa; o texto e a cor vêm do HUD). */
#flow-label {
  font-weight: 900;
  font-size: 12px;
  min-width: 30px;
  text-align: center;
  color: var(--color-flow-full);
  animation: flow-pulse 0.5s ease-in-out infinite alternate;
}

/* ---------- tábuas de vida (ART-09) ----------
   A tábua é um modelo 3D desenhado pela camada do HUD (adapters/rendering/hud) no canvas do jogo; o contêiner só
   reserva o lugar e a altura dela (os rosetões das pontas ficam dentro da largura). */
.health-plank {
  position: relative;
  height: var(--plank-height);
  margin: 6px 0;
}

/* ---------- barras ---------- */
.bar {
  position: relative;
  height: 12px;
  border-radius: 7px;
  background: var(--color-panel);
  border: 2px solid rgba(255, 255, 255, 0.75);
  overflow: hidden;
  margin: 3px 0;
}

.bar__fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transition: transform 0.12s ease-out;
}

.bar--posture {
  height: 8px;
  width: 70%;
  margin-left: 15%;
  border-width: 1.5px;
}

.bar--posture .bar__fill {
  transform-origin: center;
  background: var(--gradient-posture);
  transform: scaleX(0);
}

.bar--flow {
  flex: 1;
  height: 10px;
}

.bar--flow .bar__fill {
  background: var(--color-flow-base);
  transform: scaleX(0);
}

/* Fluxo cheio (o único nível com bônus): a barra fica dourada e pulsa. */
.bar--flow.is-full {
  border-color: var(--color-flow-full);
  animation: flow-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes flow-pulse {
  from {
    box-shadow: 0 0 2px var(--color-flow-full);
  }
  to {
    box-shadow: 0 0 10px var(--color-flow-full);
    opacity: 0.85;
  }
}

.bar--stamina {
  flex: 1;
  height: 9px;
}

.bar--stamina .bar__fill {
  background: var(--gradient-stamina);
}

.bar--stamina.is-low {
  border-color: #ff6b6b;
}

.bar--stamina.is-low .bar__fill {
  background: #ff5a3c;
  animation: blink 0.35s infinite alternate;
}

@keyframes blink {
  to {
    opacity: 0.45;
  }
}

/* ---------- rótulos ---------- */
#combo {
  position: absolute;
  right: 14px;
  top: 38%;
  font-weight: 900;
  font-size: 22px;
  opacity: 0;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
  transition: opacity 0.2s;
}

#action-label {
  position: absolute;
  left: 50%;
  bottom: calc(92px + var(--safe-bottom));
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.25s;
  white-space: nowrap;
  background: rgba(8, 20, 38, 0.45);
  padding: 3px 10px;
  border-radius: 10px;
}

/* ---------- lado da defesa (◀ ● ▶), enquanto o jogador defende ---------- */
.guard-indicator {
  position: absolute;
  left: 50%;
  bottom: calc(118px + var(--safe-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  font-size: 18px;
  font-weight: 900;
}

.guard-indicator span {
  opacity: 0.25;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  transition:
    opacity 0.08s,
    transform 0.08s;
}

.guard-indicator .guard-indicator__side--active {
  opacity: 1;
  color: var(--color-accent);
  transform: scale(1.3);
}

/* ---------- botão de pausa ----------
   Fica logo abaixo do bloco de cima, que muda de altura com o modo do HUD. */
#pause-button {
  position: absolute;
  top: calc(92px + var(--safe-top));
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background: rgba(8, 20, 38, 0.5);
  color: #fff;
  font-size: 13px;
  z-index: 5;
}

.hud.is-clean ~ #pause-button {
  top: calc(66px + var(--safe-top));
}

.hud.is-health-only ~ #pause-button {
  top: calc(52px + var(--safe-top));
}

/* ---------- cartão "estudou você" ---------- */
#intro-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  width: min(88vw, 420px);
  text-align: center;
  background: rgba(8, 20, 38, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 12px 16px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#intro-card b {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  text-transform: uppercase;
}

#intro-card span {
  font-size: 18px;
  font-weight: 800;
}

#intro-card small {
  font-size: 13px;
  opacity: 0.85;
}

/* ---------- interface limpa (fora do treino) ----------
   Menos é mais: fora do treino com o Boneco, a luta não tem textos. Ficam as tábuas de vida (o nome do oponente vai
   gravado na dele), as barras sem legendas, os anúncios (LUTE!, FINALIZE!, K.O.) e o círculo da finalização (sem a
   instrução). */
.hud.is-clean .hud__meter-label,
.hud.is-clean #flow-label,
.hud.is-clean .hud__name-row,
.hud.is-clean #combo,
.hud.is-clean #action-label,
.hud.is-clean #guard-indicator,
#finisher-prompt.is-clean b,
#finisher-prompt.is-clean span {
  display: none;
}

/* ---------- só a vida (fora do treino, GAME_CONFIG.hud) ----------
   Sem postura e sem Fluxo; o Fôlego fica guardado (ocupando o lugar, para a tábua não pular) e só aparece, piscando,
   quando está baixo. */
.hud.is-health-only .bar--posture,
.hud.is-health-only .hud__meter-row--flow {
  display: none;
}

.hud.is-health-only .hud__meter-row--stamina {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s ease-out,
    visibility 0s linear 0.5s;
}

.hud.is-health-only .hud__meter-row--stamina.is-alerting {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-out;
}

/* ---------- finalização ---------- */
#finisher-prompt {
  position: absolute;
  left: 50%;
  bottom: calc(120px + var(--safe-bottom));
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#finisher-prompt svg {
  width: 84px;
  height: 84px;
  animation: spin 1.1s linear infinite;
}

#finisher-prompt circle {
  fill: none;
  stroke: var(--color-danger);
  stroke-width: 7;
  stroke-dasharray: 200 40;
  stroke-linecap: round;
}

#finisher-prompt path {
  fill: var(--color-danger);
}

#finisher-prompt b {
  font-size: 30px;
  font-weight: 900;
  color: var(--color-danger);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
  letter-spacing: 0.05em;
}

#finisher-prompt span {
  font-size: 13px;
  font-weight: 700;
  background: var(--color-panel);
  padding: 3px 10px;
  border-radius: 10px;
}

#finisher-prompt i {
  display: block;
  width: 160px;
  height: 5px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

#finisher-prompt em {
  display: block;
  height: 100%;
  background: var(--color-danger);
  transform-origin: left;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}