/* ==========================================================
   HEROHAZARD V5 — correção autenticação + reorganização
   ========================================================== */

@media (min-width: 901px) {
  .topbar {
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .topbar > .brand {
    margin-right: auto !important;
  }

  /* AO VIVO / OFFLINE continua sendo o componente original do Work,
     agora maior e imediatamente antes dos botões de autenticação. */
  .topbar .live-pill {
    order: 20;
    min-height: 36px;
    padding: 9px 15px !important;
    gap: 9px !important;
    font-size: 13px !important;
    border-width: 1px;
    box-shadow: 0 8px 25px #0003;
  }

  .topbar .live-pill i {
    width: 8px !important;
    height: 8px !important;
  }

  .topbar .live-pill small {
    font-size: 10px !important;
  }

  .hz-auth-actions {
    order: 30;
    position: static !important;
    inset: auto !important;
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
  }

  .hz-auth-actions button {
    min-height: 36px !important;
    padding: 0 15px !important;
    font-size: 10px !important;
  }

  /* Meta clonada: logo abaixo de Pagamento seguro / Alerta automático. */
  .hz-goal-inline {
    margin-top: 18px;
    width: min(100%, 520px);
    padding: 15px 17px !important;
    border-radius: 16px !important;
    position: relative;
    z-index: 4;
  }

  .hz-goal-inline .goal-head h3 {
    margin: 4px 0 !important;
    font-size: 15px !important;
  }

  .hz-goal-inline .goal-head strong {
    font-size: 23px !important;
  }

  .hz-goal-inline .progress {
    height: 8px !important;
    margin: 11px 0 7px !important;
  }

  .hz-goal-inline .goal-foot {
    font-size: 10px !important;
  }

  /* A meta original continua existindo para o React atualizar,
     mas fica invisível. O clone acima é sincronizado por JS. */
  .community > .goal-card {
    display: none !important;
  }

  .community {
    grid-template-columns: 1fr !important;
    max-width: 1180px;
    margin-bottom: 12px !important;
  }

  .community > .ranking-card {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .topbar {
    flex-wrap: wrap;
    height: auto !important;
    min-height: 76px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .topbar > .brand {
    margin-right: auto;
  }

  .topbar .live-pill {
    order: 20;
  }

  .hz-auth-actions {
    position: static !important;
    order: 30;
    width: 100%;
    justify-content: flex-end;
  }

  .hz-goal-inline {
    margin-top: 18px;
  }

  .community > .goal-card {
    display: none !important;
  }
}

/* O modal sempre fica acima do desfile dos personagens. */
.hz-modal-backdrop,
.hz-account-page {
  z-index: 1000 !important;
}