/* A morte na tela de todos (mortes.js): o banner no alto da tela, um por vez (embaixo do banner de drop, se houver) */
.mt-ban {
  --mt-cor: #ff5a4e; --mt-cor-2: #b3201a; --mt-borda: rgba(255, 90, 78, .42);
  position: absolute; top: 58px; left: 50%; z-index: 11; width: min(360px, calc(100vw - 32px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 8px 6px 11px 10px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(100deg, rgba(58, 12, 12, .97), rgba(18, 10, 12, .97) 58%);
  border: 1px solid var(--mt-borda); border-left: 3px solid var(--mt-cor);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55), 0 0 20px rgba(200, 30, 20, .22);
  color: #f1e4e2; pointer-events: auto; animation: mt-entra .35s cubic-bezier(.2, .8, .2, 1);
}
/* a propria morte: por cima da janela de morte (o #gModal, z 20/21, no mesmo .g) */
.mt-ban.eu { z-index: 22; --mt-cor: #ff2d2d; --mt-borda: rgba(255, 45, 45, .7); box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 28px rgba(255, 30, 30, .4); }
.mt-ban.pvp { --mt-cor: #ff8a3d; --mt-cor-2: #c2410c; --mt-borda: rgba(255, 138, 61, .45); }
.mt-ban.grupo { --mt-cor: #c9b8b6; --mt-cor-2: #6b5f5d; --mt-borda: rgba(201, 184, 182, .35); }
.mt-ban.sai { animation: mt-sai .2s ease-in forwards; }
@keyframes mt-entra { from { opacity: 0; transform: translate(-50%, -12px) scale(.98); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes mt-sai { to { opacity: 0; transform: translate(-50%, -8px); } }
.mt-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-size: 17px; line-height: 1;
  background: radial-gradient(circle at 50% 40%, rgba(255, 90, 78, .35), rgba(40, 8, 8, .9) 70%); border: 1px solid var(--mt-borda);
  box-shadow: 0 0 12px rgba(255, 60, 50, .3); }
.mt-ban.grupo .mt-ic { background: radial-gradient(circle at 50% 40%, rgba(220, 210, 205, .22), rgba(24, 20, 20, .9) 70%); box-shadow: none; }
.mt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mt-l1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.mt-l1 .mt-nome { color: #fff; font-weight: 800; font-size: 14.5px; letter-spacing: .01em; }
.mt-l1 small { color: #c7a9a5; font-size: 12px; }
.mt-l2 { color: #dcc6c3; font-size: 12.5px; line-height: 1.3; overflow-wrap: anywhere; }
.mt-l2 b { font-weight: 700; color: #fff; }
.mt-l2 .mt-quem { color: var(--mt-cor); }
.mt-l2 .mt-onde { color: #e9c98a; font-weight: 600; }
.mt-ban.grupo .mt-l2 { font-size: 13px; }
.g .mt-x { align-self: flex-start; flex: none; width: 24px; height: 24px; margin-top: -2px; border-radius: 6px; color: #c7a9a5; font-size: 17px; line-height: 1;
  display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
.g .mt-x:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.mt-barra { position: absolute; left: 0; right: 0; bottom: 0; display: block; height: 3px; background: rgba(255, 255, 255, .05); }
.mt-barra > i { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, var(--mt-cor-2), var(--mt-cor));
  animation: mt-tempo var(--mt-ms, 6500ms) linear forwards; }
.mt-ban.parado .mt-barra > i { animation-play-state: paused; }
@keyframes mt-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 759px) {
  .mt-ban { top: 50px; padding: 7px 4px 10px 8px; gap: 8px; }
  .mt-ic { width: 30px; height: 30px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-ban, .mt-ban.sai { animation: none; }
}