/* HUD (Frente C): espinha comum. Dimensões (únicos px do HUD), posição dos containers de #game e blocos comuns.
   Os containers mantêm ids e classes antigas (.hud-topo etc.); as regras daqui usam .hud[data-hud] (0,2,0) para
   vencer as de orig/app.css (0,1,0) sem editá-lo. Só valem em tela de mesa: no celular o leiaute antigo segue até a C12. */
:root {
  --au-hud-topo-h: 56px;
  --au-hud-icone: 18px;
  --au-hud-cartao-time-h: 84px;
  --au-hud-col-esq-w: 290px;
  --au-hud-col-dir-w: 220px;
  --au-hud-slot: 56px;
  --au-hud-vao: var(--au-esp-1);
}

@media (min-width: 769px) and (min-height: 521px) {
  .hud[data-hud="topo"] {
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
  }
  .hud[data-hud="esq"] {
    top: calc(var(--hud-topo-h, var(--au-hud-topo-h)) + var(--au-esp-5) + var(--au-esp-1));
    left: var(--au-esp-3);
    max-width: var(--au-hud-col-esq-w);
    pointer-events: none;
  }
  .hud[data-hud="dir"] {
    top: calc(var(--hud-topo-h, var(--au-hud-topo-h)) + var(--au-esp-5) + var(--au-esp-1));
    right: var(--au-esp-3);
    max-width: var(--au-hud-col-dir-w);
    pointer-events: none;
  }
  .hud[data-hud="bolsa"],
  .hud[data-hud="golpes"] {
    pointer-events: auto;
  }
  /* o container deixa o mapa passar o clique; cada filho volta a recebê-lo */
  .hud[data-hud="esq"] > *,
  .hud[data-hud="dir"] > * {
    pointer-events: auto;
  }
}

@media (max-width: 640px) {
  :root {
    --au-hud-slot: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hud[data-hud],
  .hud[data-hud] * {
    animation: none !important;
    transition: none !important;
  }
}