/* Fim de jogo: a tela #dead (HTML gerado por ui/death.js) e a interface do
   jogo sumindo enquanto o mundo desaba (systems/outro.js). Carregado depois do style.css. */

/* ---------- Enquanto o mundo cai, a interface some junto ---------- */
/* (Só neste estado: na partida seguinte o HUD volta na hora, sem mexer no estilo dele.) */
body.fim-de-jogo #hud, body.fim-de-jogo #fx { opacity: 0; transition: opacity 0.9s ease; }
body.fim-de-jogo #banner { display: none !important; }

/* ---------- A tela: breu de verdade (o mundo já caiu) ---------- */
/* Tudo entra até --fim-pronto (READY_MS em death.js, 1,3 s): só daí os botões
   aceitam confirmar, voltar e clique (antes, quem vinha martelando A ou o
   clique do golpe recomeçava a partida sem ver o resumo). */
#dead.fim-tela {
  padding: 24px 16px;
  overflow: hidden;
  /* Um resto de brasa no meio do breu, onde o herói sumiu. */
  background:
    radial-gradient(ellipse 60% 46% at 50% 44%, rgba(70, 6, 9, 0.42), rgba(0, 0, 0, 0) 72%),
    radial-gradient(ellipse at center, #070404 0%, #000 78%);
  animation: fim-breu 0.5s ease-out both;
}
@keyframes fim-breu { from { opacity: 0; } }

#dead .fim { max-width: 980px; margin: 0 auto; }

/* Título surge do breu: desfocado e espalhado, depois firme. */
#dead .fim-titulo {
  margin: 0;
  font: 400 clamp(56px, 10.5vw, 138px) / 0.95 var(--title);
  letter-spacing: 0.06em;
  color: var(--paper);
  text-shadow: 0 0 2px #000, 4px 4px 0 #000, 0 0 42px rgba(179, 18, 28, 0.8);
  animation: fim-surge 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes fim-surge {
  0% { opacity: 0; filter: blur(18px); letter-spacing: 0.42em; transform: scale(1.07); }
  45% { opacity: 1; }
  100% { opacity: 1; filter: blur(0); letter-spacing: 0.06em; transform: scale(1); }
}

/* Traço de sangue que corre por baixo do título. */
#dead .fim-traco {
  width: min(620px, 82vw);
  height: 3px;
  margin: 16px auto 20px;
  background: linear-gradient(90deg, transparent, var(--blood) 18%, #e0141c 50%, var(--blood) 82%, transparent);
  box-shadow: 0 0 14px rgba(179, 18, 28, 0.7);
  transform-origin: center;
  animation: fim-traco 0.8s 0.35s cubic-bezier(0.3, 0.8, 0.3, 1) both;
}
@keyframes fim-traco { from { transform: scaleX(0); opacity: 0; } }

/* Frase de dedicatória (a mesma lista da abertura). */
#dead .fim-frase {
  max-width: 34em;
  margin: 0 auto 34px;
  font: italic clamp(17px, 1.9vw, 24px) / 1.45 var(--text);
  color: var(--paper);
  opacity: 0.9;
  text-shadow: 2px 2px 0 #000;
  animation: fim-sobe 0.8s 0.5s ease-out both;
}
@keyframes fim-sobe { from { opacity: 0; transform: translateY(12px); filter: blur(5px); } }

/* Estatísticas: números em mono (a fonte antiga desenha 0 como "o"). */
#dead .fim-stats {
  display: flex;
  justify-content: center;
  margin: 0 auto 36px;
  padding: 0;
  list-style: none;
}
#dead .fim-stats li {
  min-width: 128px;
  padding: 4px 24px;
  border-left: 1px solid rgba(232, 220, 194, 0.24);
  animation: fim-sobe 0.5s ease-out both;
}
#dead .fim-stats li:first-child { border-left: 0; }
#dead .fim-stats li:nth-child(1) { animation-delay: 0.55s; }
#dead .fim-stats li:nth-child(2) { animation-delay: 0.62s; }
#dead .fim-stats li:nth-child(3) { animation-delay: 0.69s; }
#dead .fim-stats li:nth-child(4) { animation-delay: 0.76s; }
#dead .fim-stats .v {
  display: block;
  font: 700 clamp(28px, 3.2vw, 40px) / 1.1 var(--mono);
  color: var(--paper);
  text-shadow: 3px 3px 0 #000;
}
#dead .fim-stats .k {
  display: block;
  margin-top: 4px;
  font: 14px var(--text);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.62;
}

/* As duas saídas: botão do dispositivo usado por último + clique do mouse.
   Terminam de entrar exatamente em --fim-pronto; antes disso não pegam clique. */
#dead .fim-acoes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  pointer-events: none;
  animation: fim-sobe 0.45s ease-out both;
  animation-delay: calc(var(--fim-pronto, 1.3s) - 0.45s);
}
#dead.fim-pronto .fim-acoes { pointer-events: auto; }
#dead .fim-btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 22px;
  font: 20px var(--text);
  color: var(--paper);
  background: rgba(0, 0, 0, 0.65);
  border: 2px solid rgba(232, 220, 194, 0.5);
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
}
#dead .fim-btn.principal {
  border-color: var(--paper);
  box-shadow: 3px 3px 0 #000, 0 0 18px rgba(179, 18, 28, 0.45);
}
/* Pronto para o toque: o botão principal começa a pulsar. */
#dead.fim-pronto .fim-btn.principal { animation: fim-pulsa 1.4s ease-in-out infinite alternate; }
@keyframes fim-pulsa { to { box-shadow: 3px 3px 0 #000, 0 0 30px rgba(179, 18, 28, 0.9); } }
#dead .fim-btn:hover, #dead .fim-btn:focus-visible {
  background: var(--blood-dark);
  border-color: var(--paper);
  outline: none;
}
#dead .fim-btn kbd {
  min-width: 26px;
  padding: 3px 8px;
  font: 700 14px var(--mono);
  color: var(--ink);
  background: var(--paper);
  border-radius: 3px;
  box-shadow: 2px 2px 0 #000;
}

/* Tela estreita: estatísticas em 2 x 2. */
@media (max-width: 640px) {
  #dead .fim-stats { flex-wrap: wrap; gap: 14px 0; }
  #dead .fim-stats li { min-width: 50%; border-left: 0; }
}

/* Quem pediu menos movimento no sistema vê tudo parado (os botões ficam
   apagados até aceitarem o toque). */
@media (prefers-reduced-motion: reduce) {
  #dead.fim-tela, #dead.fim-tela * { animation: none !important; }
  #dead .fim-acoes { opacity: 0.45; }
  #dead.fim-pronto .fim-acoes { opacity: 1; }
}