/* ══════════════════════════════════════════════════════════════════
   AVISO DO MARCO DE MORTE — o balão que anuncia o Baú de Nível ganho.
   ══════════════════════════════════════════════════════════════════ */

.marco-aviso {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 340px);
  padding: 12px 16px 12px 12px;
  border: 1px solid var(--gold-900, #6b4a10);
  border-radius: var(--r-md, 8px);
  background:
    radial-gradient(120% 160% at 0% 50%, rgb(240 196 74 / 0.2), transparent 70%),
    linear-gradient(180deg, #17110a, #0a0705);
  box-shadow: 0 8px 26px rgb(0 0 0 / 0.55);
  cursor: pointer;
  animation: marco-entra 0.34s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}

.marco-aviso--saindo {
  animation: marco-sai 0.38s ease forwards;
}

@keyframes marco-entra {
  from { opacity: 0; translate: 0 18px; scale: 0.94; }
  to   { opacity: 1; translate: 0 0;    scale: 1; }
}

@keyframes marco-sai {
  to { opacity: 0; translate: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .marco-aviso,
  .marco-aviso--saindo { animation: none; }
}

.marco-aviso__bau {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  object-fit: contain;
}

.marco-aviso__txt {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.marco-aviso__txt strong {
  font-size: var(--fs-400, 14px);
  color: var(--gold-300, #f0c44a);
}

.marco-aviso__txt span {
  font-size: 11px;
  color: var(--text, #e8eef6);
}

.marco-aviso__txt em {
  font-size: 10px;
  font-style: normal;
  color: var(--text-muted, #9fb0c4);
}