/* Itens 4–6: mundo mais vivo, HUD legível e menus com hierarquia clara. */
#app::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:var(--hda-layer-ambient,2);
  background:radial-gradient(ellipse at 50% 55%, transparent 45%, rgba(8,5,16,.18) 100%);
  animation:hda-ambiente 8s ease-in-out infinite alternate;
}
#hud { z-index:var(--hda-layer-hud,10); }
#touch-controls { z-index:var(--hda-layer-controls,12); }
#mensagem-topo { z-index:var(--hda-layer-message,15); }
#modal-overlay { z-index:var(--hda-layer-modal,50); }
@keyframes hda-ambiente { from { opacity:.35; } to { opacity:.75; } }

/* Barras respondem imediatamente a dano, cura e XP; o valor textual fica
   junto da barra para leitura rápida em telas pequenas. */
#hud .barra-fill { transition:width .28s ease-out, filter .2s ease; }
#hud .barra-wrap:focus-within, #hud .hud-ficha:focus-within { filter:brightness(1.2); }
#hud-hp { background:linear-gradient(90deg,#b93535,#ef6b57); }
#hud-mp { background:linear-gradient(90deg,#3878c8,#68b9ff); }
#hud-xp { background:linear-gradient(90deg,#8d59bd,#d28aff); }

/* Cartões: título, descrição e ação deixam de competir entre si. */
.hda-modal-corpo > .card, #modal-corpo > .card, .card {
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.card:hover { transform:translateY(-2px); border-color:rgba(245,165,36,.7); background:rgba(48,35,23,.72); }
.card h3, .card h4 { color:var(--hda-gold,#f5a524); margin-top:0; }
.card button.primario { box-shadow:0 2px 0 rgba(0,0,0,.35); }
button:focus-visible, [tabindex]:focus-visible { outline:2px solid #ffe066; outline-offset:2px; }

/* Exploração: mensagens e marcadores têm presença sem cobrir o mapa. */
#mensagem-topo:not(.hidden) { animation:hda-mensagem-entra .22s ease-out both; }
@keyframes hda-mensagem-entra { from { opacity:0; transform:translate(-50%,-8px); } to { opacity:1; transform:translate(-50%,0); } }
.marcador, .ponto-interesse { animation:hda-ponto-pulso 2.2s ease-in-out infinite; }
@keyframes hda-ponto-pulso { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.18) drop-shadow(0 0 4px rgba(245,165,36,.35)); } }

@media (prefers-reduced-motion: reduce) {
  #app::after, #mensagem-topo:not(.hidden), .marcador, .ponto-interesse { animation:none; }
  .card, #hud .barra-fill { transition:none; }
}

/* Chefe e recrutamento têm uma assinatura visual própria. */
.preparacao-chefe-modal { border-color:rgba(224,85,85,.72); box-shadow:0 0 0 1px rgba(224,85,85,.18), 0 12px 36px rgba(0,0,0,.35); }
.preparacao-chefe { margin:12px 0; padding:10px 12px; border-left:3px solid #e05555; background:rgba(224,85,85,.1); border-radius:6px; }
.preparacao-chefe h3 { margin:0 0 5px; color:#ffb0a8; font-size:.95em; }
.preparacao-chefe ul { margin:0; padding-left:20px; line-height:1.5; }
.recrutar-aliado { animation:hda-convite 1.8s ease-in-out infinite; }
@keyframes hda-convite { 0%,100% { box-shadow:0 0 0 rgba(245,165,36,0); } 50% { box-shadow:0 0 14px rgba(245,165,36,.42); } }

/* Toque: alvos maiores e menus que respeitam a área segura do aparelho. */
@media (pointer:coarse) {
  button, select { min-height:42px; }
  #touch-controls { padding-bottom:env(safe-area-inset-bottom); }
  .btn-alvo, .recrutar-aliado { min-width:120px; }
  .hda-modal-acoes { padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
}

/* Alto contraste: mantém significado por cor e texto, com contornos fortes. */
body.alto-contraste .card, body.alto-contraste button, body.alto-contraste select { border-color:#fff; }
body.alto-contraste .preparacao-chefe { border-left-color:#fff; background:#000; }
body.alto-contraste #hud .barra { outline:1px solid #fff; }