/* ============================================================================
   ANÚNCIO DO EVENTO ZUMBI
   ----------------------------------------------------------------------------
   Painel de página inteira, aberto pelo quarto card de "Novidades" ou direto
   pela URL (#evento-zumbi). Diferente do resto do site de propósito: aqui o
   dourado divide espaço com o vermelho-sangue, porque o evento é a única coisa
   do reino que não pertence ao reino.

   A arte sem fundo (site.config.js -> zumbi.plate) é a peça central: ela flutua
   sobre o escuro, sem moldura nenhuma. Por isso o fundo desta tela é bem mais
   fechado que o das outras.

   Onde mexer:
   - largura do painel ....... .zumbi-shell -> width
   - cor do evento ........... --zumbi-blood / --zumbi-blood-soft aqui embaixo
   - conteúdo e textos ....... site.config.js -> zumbi
   - traduções ............... i18n/<idioma>.js -> content.zumbi
   ========================================================================== */

.zumbi-panel[hidden] { display: none; }

.zumbi-panel {
  --zumbi-blood: #b3161c;
  --zumbi-blood-soft: rgba(179, 22, 28, .35);
  --zumbi-ash: #9a9791;
  position: fixed;
  inset: 0;
  z-index: 1150;
  /* Quem rola é a moldura (.zumbi-shell), não o painel. O painel só enquadra.
     Assim a roda do mouse nunca cai no vazio: a página de trás está travada e
     o único trecho rolável embaixo do cursor é sempre a leitura. */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  overscroll-behavior: contain;
  padding: clamp(14px, 3vw, 44px) clamp(10px, 3vw, 40px);
  opacity: 0;
  transition: opacity .28s ease;
}

.zumbi-panel.is-open { opacity: 1; }

.zumbi-panel-backdrop {
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(60, 6, 9, .55), rgba(3, 4, 6, .93) 62%), rgba(3, 4, 6, .9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Névoa vermelha que atravessa a tela devagar. São três manchas grandes com
   tempos diferentes, o suficiente pra tela nunca ficar parada sem custar GPU. */
.zumbi-fog {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.zumbi-fog span {
  position: absolute;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .3;
  background: radial-gradient(circle, rgba(150, 16, 22, .75), transparent 68%);
  animation: zumbiDrift 34s ease-in-out infinite;
}

.zumbi-fog span:nth-child(2) { left: 52%; top: 34%; opacity: .22; animation-duration: 46s; animation-delay: -12s; background: radial-gradient(circle, rgba(28, 74, 140, .6), transparent 68%); }
.zumbi-fog span:nth-child(3) { left: 12%; top: 62%; opacity: .18; animation-duration: 58s; animation-delay: -26s; }
.zumbi-fog span:first-child { left: -14%; top: -18%; }

@keyframes zumbiDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6vw, 5vh, 0) scale(1.14); }
}

/* ---------- Moldura ---------- */

.zumbi-shell {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-height: 100%;
  overflow-y: auto;
  /* Nada rola pro lado aqui dentro. A arte do topo encosta nas duas bordas de
     propósito, e sem isto ela criava uma barra horizontal de um fio. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  border: 1px solid rgba(227, 189, 111, .22);
  background: linear-gradient(168deg, #14090b 0%, #0a0a0d 48%, #08090c 100%);
  box-shadow: 0 40px 130px rgba(0, 0, 0, .7);
  animation: zumbiRise .4s cubic-bezier(.19, 1, .22, 1);
}

.zumbi-shell::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--zumbi-blood), var(--gold), transparent);
  opacity: .8;
}

@keyframes zumbiRise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* Barra de rolagem do painel, no sangue do evento em vez do cinza do sistema.
   O Chrome usa os pseudo-elementos abaixo. O Firefox não os conhece, e recebe a
   versão simples logo no fim deste bloco. Os dois juntos no mesmo seletor não
   funcionam: quando `scrollbar-color` existe, o Chrome ignora o resto. */
.zumbi-shell::-webkit-scrollbar { width: 11px; }

.zumbi-shell::-webkit-scrollbar-button { display: none; }

.zumbi-shell::-webkit-scrollbar-track {
  background: rgba(8, 6, 8, .75);
  border-left: 1px solid rgba(227, 189, 111, .12);
}

.zumbi-shell::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c4191f, #5e0b0f);
  border: 1px solid rgba(227, 189, 111, .28);
  box-shadow: 0 0 10px rgba(179, 22, 28, .5) inset;
}

.zumbi-shell::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #e8262d, #8b1116);
  border-color: rgba(241, 213, 143, .5);
}

.zumbi-shell::-webkit-scrollbar-corner { background: transparent; }

@supports not selector(::-webkit-scrollbar) {
  .zumbi-shell {
    scrollbar-width: thin;
    scrollbar-color: rgba(179, 22, 28, .9) rgba(8, 6, 8, .6);
  }
}

.zumbi-close {
  position: sticky;
  top: 12px;
  float: right;
  z-index: 4;
  margin: 12px 12px 0 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(238, 230, 211, .26);
  background: rgba(8, 9, 12, .72);
  color: var(--gold-pale);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .25s;
}

/* Mesmo giro do X do guia de sistemas e do lightbox. */
.zumbi-close:hover {
  border-color: var(--zumbi-blood);
  color: #fff;
  background: rgba(120, 12, 16, .5);
  transform: rotate(90deg);
}
.zumbi-close svg { width: 17px; height: 17px; }

.zumbi-body {
  --zumbi-pad: clamp(18px, 4vw, 60px);
  position: relative;
  padding: clamp(26px, 4vw, 54px) var(--zumbi-pad) clamp(30px, 5vw, 60px);
}

/* Arte de fundo: a mesma do card de novidades, quase apagada, só pra dar
   textura atrás do topo do painel. */
.zumbi-art {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(560px, 62%);
  background-size: cover;
  background-position: center 26%;
  opacity: .22;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 86%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 86%);
  pointer-events: none;
}

/* ---------- Topo ---------- */

.zumbi-hero {
  position: relative;
  text-align: center;
  padding-top: 6px;
}

.zumbi-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  color: #e6b9ba;
  text-transform: uppercase;
  font: 600 10px "Barlow Condensed", sans-serif;
  letter-spacing: .19em;
}

.zumbi-eyebrow i {
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--zumbi-blood));
}

/* A arte sem fundo encosta nas duas bordas do painel: ela é o anúncio, e é
   grande de propósito. As margens negativas cancelam o respiro do .zumbi-body. */
.zumbi-plate-holder {
  position: relative;
  display: block;
  margin-inline: calc(var(--zumbi-pad, 0px) * -1);
}

.zumbi-plate-glow {
  position: absolute;
  /* Fica dentro da largura da moldura de propósito: com folga lateral ele
     empurrava a página 70px pro lado e criava a barra horizontal. */
  inset: -12% 0;
  background: radial-gradient(54% 55% at 50% 52%, rgba(140, 18, 24, .55), transparent 70%);
  filter: blur(28px);
  animation: zumbiPulse 5.5s ease-in-out infinite;
}

.zumbi-plate {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, .75));
  animation: zumbiFloat 9s ease-in-out infinite;
}

@keyframes zumbiFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@keyframes zumbiPulse {
  0%, 100% { opacity: .65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.zumbi-tagline {
  margin: 20px auto 0;
  color: var(--gold-pale);
  font: 500 italic 15px/1.5 Cinzel, serif;
  letter-spacing: .02em;
}

.zumbi-intro {
  max-width: 720px;
  margin: 16px auto 0;
  color: #b9b7b2;
  font-size: 13px;
  line-height: 1.78;
}

/* ---------- Números ---------- */

.zumbi-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(30px, 4vw, 48px) 0 0;
  background: rgba(227, 189, 111, .16);
  border: 1px solid rgba(227, 189, 111, .16);
}

.zumbi-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 20px 12px;
  background: linear-gradient(180deg, rgba(20, 10, 12, .92), rgba(8, 9, 12, .92));
  text-align: center;
}

.zumbi-stat b {
  font: 600 30px/1 Cinzel, serif;
  color: var(--gold);
}

.zumbi-stat span {
  color: #8f8d89;
  text-transform: uppercase;
  font: 600 10px/1.4 "Barlow Condensed", sans-serif;
  letter-spacing: .13em;
}

/* ---------- A crônica ----------
   Fica fechada por padrão: quem quer a história clica no título. O fundo é a
   arte da horda, escurecida ao ponto de dar clima sem atrapalhar a leitura.
   O único bloco do painel escrito como texto corrido e não como ficha. */

.zumbi-lore {
  position: relative;
  margin: clamp(34px, 5vw, 56px) 0 0;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(6, 6, 9, .55);
  overflow: hidden;
}

.zumbi-lore::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--zumbi-lore-art);
  background-size: cover;
  background-position: center 22%;
  opacity: .5;
  transition: opacity .5s ease, transform .8s cubic-bezier(.19, 1, .22, 1);
  transform: scale(1.02);
}

/* Véu por cima da arte. Fechada ele é leve, aberta ele fecha pra valer, senão
   o texto disputa atenção com cinco zumbis olhando pra frente. */
.zumbi-lore::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 5, 7, .55), rgba(6, 5, 7, .78));
  transition: background .5s ease;
}

.zumbi-lore[open]::before { opacity: .3; transform: scale(1.06); }
.zumbi-lore[open]::after { background: linear-gradient(180deg, rgba(6, 5, 7, .84), rgba(6, 5, 7, .93)); }

/* ---------- Cabeçalho clicável ---------- */

.zumbi-lore-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: clamp(30px, 4vw, 46px) clamp(20px, 4vw, 46px);
  cursor: pointer;
  list-style: none;
  transition: background .25s;
}

.zumbi-lore-head::-webkit-details-marker { display: none; }
.zumbi-lore-head:hover { background: rgba(120, 12, 16, .18); }

.zumbi-lore-title {
  font: 600 clamp(20px, 3vw, 26px)/1.2 Cinzel, serif;
  color: var(--gold);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .9);
}

/* Seta que vira ao abrir. */
.zumbi-lore-toggle {
  width: 9px;
  height: 9px;
  border-right: 1px solid var(--gold-pale);
  border-bottom: 1px solid var(--gold-pale);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s ease;
}

.zumbi-lore[open] .zumbi-lore-toggle { transform: rotate(-135deg) translate(-2px, -2px); }

/* ---------- Corpo ---------- */

.zumbi-lore-body {
  position: relative;
  z-index: 1;
  padding: 0 clamp(22px, 4vw, 54px) clamp(30px, 4vw, 46px);
  text-align: center;
  animation: zumbiLoreOpen .45s cubic-bezier(.19, 1, .22, 1);
}

@keyframes zumbiLoreOpen {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

.zumbi-eyebrow-plain { margin-bottom: 20px; }

.zumbi-lore-text {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}

.zumbi-lore-text p {
  margin: 0 0 15px;
  color: #bcbab5;
  font-size: 13px;
  line-height: 1.85;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}

.zumbi-lore-text p:last-child { margin-bottom: 0; }

/* Capitular da primeira linha, como em crônica de livro. */
.zumbi-lore-open::first-letter {
  float: left;
  margin: 4px 12px 0 0;
  font: 700 52px/1 Cinzel, serif;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(179, 22, 28, .7);
}

/* ---------- A horda no fim do anúncio ----------
   Recorte sem fundo, subindo do escuro logo antes dos botões. Ela não tem
   moldura nem legenda: é só a última coisa que se vê antes de fechar. */

.zumbi-horda {
  position: relative;
  height: clamp(170px, 24vw, 290px);
  margin: clamp(24px, 3vw, 40px) calc(var(--zumbi-pad, 0px) * -1) calc(clamp(30px, 5vw, 60px) * -1);
  overflow: hidden;
  pointer-events: none;
}

.zumbi-horda img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
  mask-image: linear-gradient(180deg, transparent, #000 42%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 42%, #000 88%, transparent 100%);
  filter: drop-shadow(0 0 40px rgba(120, 12, 18, .5));
  animation: zumbiHorda 12s ease-in-out infinite;
}

@keyframes zumbiHorda {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.015) translateY(-5px); }
}

/* ---------- Faixas ---------- */

.zumbi-block { position: relative; margin-top: clamp(34px, 5vw, 56px); }

.zumbi-block-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  font: 600 21px/1.2 Cinzel, serif;
  color: #f0e6d2;
}

.zumbi-block-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(227, 189, 111, .3), transparent);
}

.zumbi-pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.zumbi-pillar {
  position: relative;
  padding: 22px 24px 24px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(160deg, rgba(24, 12, 14, .78), rgba(10, 11, 14, .78));
  transition: border-color .25s, transform .25s;
}

.zumbi-pillar:hover { border-color: var(--zumbi-blood-soft); transform: translateY(-2px); }

.zumbi-pillar-index {
  display: block;
  margin-bottom: 10px;
  color: rgba(179, 22, 28, .9);
  font: 600 12px "Barlow Condensed", sans-serif;
  letter-spacing: .2em;
}

.zumbi-pillar h4 {
  margin: 0 0 9px;
  font: 600 16px/1.25 Cinzel, serif;
  color: var(--gold-pale);
}

.zumbi-pillar p {
  margin: 0;
  color: #b0aeaa;
  font-size: 12.5px;
  line-height: 1.72;
}

/* ---------- A travessia das arenas ---------- */

.zumbi-arenas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.zumbi-arena {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(160deg, rgba(24, 12, 14, .8), rgba(10, 11, 14, .8));
  overflow: hidden;
  transition: border-color .25s, transform .25s;
}

.zumbi-arena:hover { border-color: var(--zumbi-blood-soft); transform: translateY(-2px); }

/* Captura do mapa. Se o arquivo não existir ainda, o quadro some sozinho
   (ver o ouvinte de erro de imagem em app.js) e o card segue de pé. */
.zumbi-shot { position: relative; overflow: hidden; }
.zumbi-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

.zumbi-shot-arena {
  height: 156px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.zumbi-shot-arena::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(10, 8, 10, .85));
}

.zumbi-arena-copy { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 7px; flex: 1; }

.zumbi-arena-order {
  color: rgba(179, 22, 28, .95);
  text-transform: uppercase;
  font: 600 10px "Barlow Condensed", sans-serif;
  letter-spacing: .2em;
}

.zumbi-arena h4 {
  margin: 0;
  font: 600 19px/1.2 Cinzel, serif;
  color: var(--gold-pale);
}

.zumbi-arena-meta {
  color: #8f8d89;
  font: 600 10px "Barlow Condensed", sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.zumbi-arena p {
  margin: 5px 0 0;
  color: #adaba7;
  font-size: 12.5px;
  line-height: 1.7;
}

.zumbi-arena-guardian {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: #e6b9ba;
  font: 600 11px "Barlow Condensed", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.zumbi-arena-guardian i {
  width: 5px;
  height: 5px;
  background: var(--zumbi-blood);
  transform: rotate(45deg);
}

/* ---------- Blocos de recompensa ---------- */

.zumbi-phases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.zumbi-phase {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 22px 26px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(180deg, rgba(28, 12, 14, .8), rgba(9, 10, 13, .82));
}

.zumbi-phase:last-child {
  border-color: rgba(227, 189, 111, .3);
  background: linear-gradient(180deg, rgba(46, 14, 16, .85), rgba(12, 10, 12, .85));
}

.zumbi-phase-bar {
  height: 3px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, .07);
}

.zumbi-phase-bar i {
  display: block;
  height: 100%;
  width: var(--zumbi-bar, 40%);
  background: linear-gradient(90deg, var(--zumbi-blood), var(--gold));
}

.zumbi-phase-tier {
  color: #8f8d89;
  text-transform: uppercase;
  font: 600 10px "Barlow Condensed", sans-serif;
  letter-spacing: .16em;
}

.zumbi-phase-box {
  font: 600 20px/1.2 Cinzel, serif;
  color: var(--gold);
}

.zumbi-phase-waves {
  color: #e6b9ba;
  font: 600 11px "Barlow Condensed", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.zumbi-phase p {
  margin: 6px 0 0;
  color: #aeaca8;
  font-size: 12.5px;
  line-height: 1.7;
}

.zumbi-phase-drops {
  margin-top: auto;
  padding-top: 14px;
  color: #8b8985;
  font-size: 11.5px;
  line-height: 1.6;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

/* ---------- Destaques ---------- */

.zumbi-highlights { display: grid; gap: 12px; }

.zumbi-highlight {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-left: 2px solid var(--zumbi-blood-soft);
  background: linear-gradient(90deg, rgba(30, 12, 14, .6), transparent 82%);
}

.zumbi-highlight .zumbi-mark { align-self: flex-start; }
/* O quadro da imagem também é <div>: sem o :not ele crescia junto com o texto. */
.zumbi-highlight > div:not(.zumbi-shot) { flex: 1; }

/* Miniatura à direita do destaque (orb, guardião, armas, set). São recortes com
   fundo transparente, então eles flutuam na linha: nada de moldura em volta, e
   `contain` pra nunca cortar cabeça nem ponta de arma. */
.zumbi-shot-wide {
  flex: 0 0 clamp(150px, 24%, 250px);
  height: 168px;
  align-self: center;
}

.zumbi-shot-wide img {
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .6));
}

/* Print do jogo (assets/zumbi/print-*.webp): enche o quadro, com moldura fina,
   em vez do recorte transparente flutuando. */
.zumbi-shot-wide:has(img[src*="/print-"]) {
  flex: 0 0 clamp(180px, 34%, 340px);
  height: 190px;
  border: 1px solid rgba(227, 189, 111, .22);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .5);
}
.zumbi-shot-wide img[src*="/print-"] { object-fit: cover; filter: none; }

/* Miniatura da box, no topo do bloco de recompensa. */
.zumbi-shot-box {
  height: 190px;
  margin: 4px 0 16px;
  background: radial-gradient(58% 66% at 50% 56%, rgba(150, 20, 26, .45), transparent 72%);
}

.zumbi-shot-box img {
  object-fit: contain;
  /* A arte original é escura. Sem esta correção a box some no fundo do card. */
  filter: brightness(1.22) contrast(1.06) drop-shadow(0 10px 20px rgba(0, 0, 0, .7));
}

.zumbi-mark { color: var(--zumbi-blood); font-size: 13px; line-height: 1.7; }

.zumbi-highlight h4 {
  margin: 0 0 6px;
  font: 600 15px/1.3 Cinzel, serif;
  color: var(--gold-pale);
}

.zumbi-highlight p {
  margin: 0;
  color: #adaba7;
  font-size: 12.5px;
  line-height: 1.72;
}

/* ---------- Onda 100: o que não se mostra ---------- */

.zumbi-mystery {
  position: relative;
  margin-top: clamp(34px, 5vw, 56px);
  padding: clamp(30px, 4vw, 44px);
  text-align: center;
  border: 1px solid rgba(227, 189, 111, .3);
  background: radial-gradient(80% 120% at 50% 0%, rgba(120, 16, 20, .45), rgba(9, 9, 12, .9) 70%);
}

/* ---------- O palco do boss ----------
   No lugar da arte, a sombra dela. A silhueta é o próprio recorte pintado de
   preto, e tudo que dá volume vem daqui: o halo pulsando atrás, a luz vermelha
   que varre a forma de cima a baixo (recortada pela máscara da própria imagem,
   então ela só acende dentro do corpo) e a interrogação no peito. */

.zumbi-mystery-stage {
  position: relative;
  width: min(430px, 76%);
  margin: 0 auto 26px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.zumbi-mystery-halo {
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(46% 46% at 50% 52%, rgba(196, 25, 31, .55), transparent 68%),
    radial-gradient(70% 70% at 50% 50%, rgba(90, 8, 12, .55), transparent 72%);
  filter: blur(18px);
  animation: zumbiBossHalo 6s ease-in-out infinite;
}

.zumbi-mystery-figure {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* O contorno vermelho é o que separa o preto do boss do preto do fundo. */
  filter:
    drop-shadow(0 0 2px rgba(255, 90, 90, .55))
    drop-shadow(0 0 22px rgba(179, 22, 28, .75))
    drop-shadow(0 18px 30px rgba(0, 0, 0, .8));
  animation: zumbiBossBreathe 7s ease-in-out infinite;
}

/* A varredura usa a silhueta como máscara: a luz nunca escapa do corpo. */
.zumbi-mystery-scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(255, 108, 108, .5) 50%, transparent 58%);
  background-size: 100% 260%;
  mask-image: var(--zumbi-boss);
  -webkit-mask-image: var(--zumbi-boss);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mix-blend-mode: screen;
  animation: zumbiBossScan 7s linear infinite;
}

.zumbi-mystery-mark {
  position: absolute;
  z-index: 3;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: 700 clamp(64px, 12vw, 104px)/1 Cinzel, serif;
  color: #ffe6b0;
  text-shadow:
    0 0 10px rgba(255, 210, 140, .9),
    0 0 34px rgba(196, 25, 31, .95),
    0 0 70px rgba(140, 12, 18, .9);
  animation: zumbiBossMark 4.5s ease-in-out infinite;
}

/* Brasas subindo, três, com tempos diferentes. */
.zumbi-ember {
  position: absolute;
  z-index: 2;
  bottom: 14%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ff8a6a;
  box-shadow: 0 0 8px 2px rgba(255, 90, 50, .8);
  opacity: 0;
  animation: zumbiEmber 6s ease-in-out infinite;
}

.zumbi-ember:nth-of-type(1) { left: 34%; animation-delay: 0s; }
.zumbi-ember:nth-of-type(2) { left: 52%; animation-delay: 2.1s; }
.zumbi-ember:nth-of-type(3) { left: 66%; animation-delay: 4.3s; }

@keyframes zumbiBossHalo {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes zumbiBossBreathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.02) translateY(-6px); }
}

@keyframes zumbiBossScan {
  0% { background-position: 0 -130%; }
  60%, 100% { background-position: 0 130%; }
}

@keyframes zumbiBossMark {
  0%, 100% { opacity: .82; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes zumbiEmber {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-120px) scale(1.1); }
}

.zumbi-mystery-label {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid rgba(227, 189, 111, .35);
  color: var(--gold-pale);
  text-transform: uppercase;
  font: 600 10px "Barlow Condensed", sans-serif;
  letter-spacing: .2em;
}

.zumbi-mystery h3 {
  margin: 16px 0 10px;
  font: 700 27px/1.15 Cinzel, serif;
  color: var(--gold);
  text-shadow: 0 0 26px rgba(179, 22, 28, .55);
}

.zumbi-mystery p {
  max-width: 620px;
  margin: 0 auto;
  color: #b3b1ad;
  font-size: 12.5px;
  line-height: 1.75;
}

/* ---------- Comando de entrada ---------- */

.zumbi-command {
  position: relative;
  margin-top: clamp(28px, 4vw, 44px);
  padding: 26px 24px;
  text-align: center;
  border: 1px dashed rgba(179, 22, 28, .5);
  background: rgba(16, 8, 10, .6);
  overflow: hidden;
}

.zumbi-command.has-art { padding: clamp(34px, 5vw, 54px) 24px; }

/* Captura do Refúgio ao fundo, bem apagada, só como lugar. */
.zumbi-command-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 58%;
  opacity: .3;
}

.zumbi-command-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 100% at 50% 50%, rgba(10, 6, 8, .5), rgba(10, 6, 8, .92) 78%);
}

.zumbi-command-copy { position: relative; }

.zumbi-command code {
  display: inline-block;
  font: 700 30px/1 "Barlow Condensed", monospace;
  letter-spacing: .06em;
  color: #fff;
  text-shadow: 0 0 18px rgba(179, 22, 28, .9);
}

.zumbi-command p {
  max-width: 520px;
  margin: 12px auto 0;
  color: #a5a3a0;
  font-size: 12px;
  line-height: 1.7;
}

/* ---------- Rodapé ---------- */

.zumbi-foot {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  text-align: center;
}

.zumbi-foot-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.zumbi-foot-note {
  margin: 18px 0 0;
  color: #8b8985;
  font-size: 11.5px;
  letter-spacing: .04em;
}

/* ---------- Telas menores ---------- */

@media (max-width: 900px) {
  .zumbi-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zumbi-pillars, .zumbi-phases, .zumbi-arenas { grid-template-columns: 1fr; }
  .zumbi-block-title { font-size: 19px; }
  .zumbi-highlight { flex-wrap: wrap; }
  .zumbi-shot-wide,
  .zumbi-shot-wide:has(img[src*="/print-"]) { flex: 1 0 100%; height: 190px; }
}

@media (max-width: 540px) {
  .zumbi-plate-holder { margin-inline: -6px; }
  .zumbi-stat b { font-size: 25px; }
  .zumbi-command code { font-size: 24px; }
  .zumbi-foot-actions .button { width: 100%; justify-content: center; }
}

/* Quem pediu menos movimento no sistema recebe a tela parada. A escolha do
   visitante no aviso de movimento (.force-motion) continua valendo. */
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .zumbi-plate,
  html:not(.force-motion) .zumbi-plate-glow,
  html:not(.force-motion) .zumbi-fog span,
  html:not(.force-motion) .zumbi-shell,
  html:not(.force-motion) .zumbi-mystery-halo,
  html:not(.force-motion) .zumbi-mystery-figure,
  html:not(.force-motion) .zumbi-mystery-scan,
  html:not(.force-motion) .zumbi-mystery-mark,
  html:not(.force-motion) .zumbi-ember,
  html:not(.force-motion) .zumbi-horda img,
  html:not(.force-motion) .zumbi-lore-body { animation: none; }
  html:not(.force-motion) .zumbi-ember { display: none; }
}

/* ==========================================================================
   GALIAL CONTA O EVENTO (montagem em zumbi.js, roteiro em site.config.js)
   O Totem fica no canto de baixo do anúncio, por cima da leitura, e o trecho
   de que ele está falando acende com a borda de sangue.
   ========================================================================== */

.zg[hidden], .zg-chamar[hidden] { display: none; }

.zg {
  position: fixed;
  z-index: 6;
  left: max(18px, calc(50% - 590px + 22px));
  bottom: 22px;
  width: min(620px, calc(100% - 36px));
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: end;
  gap: 4px;
  pointer-events: none;
  animation: zgEntra .55s cubic-bezier(.3, 1.4, .5, 1) both;
}
.zg > * { pointer-events: auto; }

.zg-retrato { position: relative; width: 128px; height: 138px; }
.zg-pose {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .75)) drop-shadow(0 0 16px rgba(211, 165, 79, .22));
  transform-origin: 50% 92%;
  animation: zgRespira 4.4s ease-in-out infinite;
}
.zg-emote { position: absolute; width: 50px; height: 50px; right: -4px; top: -8px; animation: zgBalanca 2.6s ease-in-out .7s infinite; }
.zg-emote[hidden] { display: none; }
.zg.is-troca .zg-pose { animation: zgPulo .5s cubic-bezier(.3, 1.6, .5, 1), zgRespira 4.4s ease-in-out .5s infinite; }
.zg.is-troca .zg-emote { animation: zgEmote .55s cubic-bezier(.3, 1.8, .5, 1) both, zgBalanca 2.6s ease-in-out .7s infinite; }

.zg-balao {
  position: relative;
  margin-bottom: 18px;
  padding: 14px 18px 14px;
  border: 1px solid rgba(227, 189, 111, .32);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(30, 18, 18, .97), rgba(12, 12, 16, .96));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .65), 0 0 0 1px rgba(179, 22, 28, .12) inset;
}
.zg-balao::before {
  content: ""; position: absolute; left: -8px; bottom: 34px; width: 14px; height: 14px;
  background: #1c1315; border-left: 1px solid rgba(227, 189, 111, .32); border-bottom: 1px solid rgba(227, 189, 111, .32);
  transform: rotate(45deg);
}
.zg-topo { display: flex; align-items: center; gap: 10px; }
.zg-nome { color: var(--gold); font: 600 11px "Barlow Condensed", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.zg-passo { color: #7f7a70; font: 600 10px "Barlow Condensed", sans-serif; letter-spacing: .12em; }
.zg-guardar { margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(227, 189, 111, .2); background: transparent; color: #a9a497; cursor: pointer; border-radius: 50%; }
.zg-guardar svg { width: 14px; height: 14px; }
.zg-guardar:hover { color: var(--gold-pale); border-color: var(--gold); }

.zg-fala { margin: 8px 0 10px; color: #ddd6c7; font-size: 14px; line-height: 1.7; min-height: 3.4em; cursor: default; }
.zg-fala em { font-style: normal; color: var(--gold-pale); }
.zg-emoji { display: inline-block; width: 1.4em; height: 1.4em; vertical-align: -.36em; object-fit: contain; }
.zg-w { display: inline-block; opacity: 0; transform: translateY(5px); animation: zgPalavra .32s ease forwards; animation-delay: calc(var(--d, 0) * 34ms); }
.zg-fala.is-pronta .zg-w { animation: none; opacity: 1; transform: none; }

.zg-trilha { display: flex; gap: 4px; margin-bottom: 11px; }
.zg-trilha i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .09); transition: background .3s; }
.zg-trilha i.is-lida { background: rgba(211, 165, 79, .45); }
.zg-trilha i.is-agora { background: linear-gradient(90deg, var(--zumbi-blood), var(--gold)); box-shadow: 0 0 10px rgba(179, 22, 28, .6); }

.zg-acoes { display: flex; align-items: center; gap: 8px; }
.zg-espaco { flex: 1; }
.zg-acoes button { white-space: nowrap; }
.zg-acoes button { cursor: pointer; font: 600 12px "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; transition: color .2s, background .2s, border-color .2s, transform .2s; }
.zg-leve { border: 0; background: none; color: #8d897f; padding: 6px 2px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(141, 137, 127, .4); }
.zg-leve:hover { color: var(--gold-pale); }
.zg-voltar { border: 1px solid rgba(227, 189, 111, .25); background: transparent; color: #cfc8b8; padding: 9px 13px; }
.zg-voltar:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-pale); }
.zg-voltar:disabled { opacity: .3; cursor: default; }
.zg-seguir { border: 0; background: linear-gradient(105deg, #b98630, #e2bd6a); color: #1b1408; padding: 10px 16px; box-shadow: 0 8px 20px rgba(156, 106, 26, .28); }
.zg-seguir:hover { transform: translateY(-2px); filter: brightness(1.08); }
.zg-seguir b { padding-left: 4px; }

/* Botãozinho que chama o Galial de volta. */
.zg-chamar {
  position: fixed; z-index: 6;
  left: max(18px, calc(50% - 590px + 22px)); bottom: 22px;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 6px;
  border: 1px solid rgba(227, 189, 111, .4); border-radius: 999px;
  background: linear-gradient(160deg, rgba(30, 18, 18, .97), rgba(12, 12, 16, .96));
  color: var(--gold-pale); cursor: pointer;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .6);
  font: 600 12px "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase;
  animation: zgEntra .45s cubic-bezier(.3, 1.4, .5, 1) both;
}
.zg-chamar img { width: 42px; height: 42px; object-fit: contain; border-radius: 50%; background: radial-gradient(circle, rgba(211, 165, 79, .22), transparent 70%); animation: zgBalanca 3s ease-in-out infinite; }
.zg-chamar:hover { border-color: var(--gold); }
.zg-chamar-dica { display: none; text-transform: none; letter-spacing: 0; font: 400 12.5px Manrope, sans-serif; color: #cfc8b8; }
.zg-chamar.is-dica .zg-chamar-dica { display: inline; }

/* Trecho de que o Galial está falando. */
.zg-foco { position: relative; animation: zgFoco 2.4s ease-out; border-radius: 4px; }

@keyframes zgEntra { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes zgRespira { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-.8deg); } }
@keyframes zgPulo { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-14px) scale(1.04, .97); } 70% { transform: translateY(2px) scale(.98, 1.03); } 100% { transform: none; } }
@keyframes zgEmote { 0% { opacity: 0; transform: scale(.2) translateY(12px); } 100% { opacity: 1; transform: none; } }
@keyframes zgBalanca { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(6deg); } }
@keyframes zgPalavra { to { opacity: 1; transform: none; } }
@keyframes zgFoco {
  0% { box-shadow: 0 0 0 0 rgba(179, 22, 28, 0); }
  20% { box-shadow: 0 0 0 2px rgba(211, 165, 79, .7), 0 0 40px rgba(179, 22, 28, .45); }
  100% { box-shadow: 0 0 0 1px rgba(211, 165, 79, 0), 0 0 0 rgba(179, 22, 28, 0); }
}

@media (max-width: 640px) {
  .zg { left: 10px; bottom: 10px; width: calc(100% - 20px); grid-template-columns: 72px minmax(0, 1fr); }
  .zg-retrato { width: 72px; height: 82px; }
  .zg-emote { width: 32px; height: 32px; right: -6px; top: -6px; }
  .zg-balao { padding: 11px 13px 11px; margin-bottom: 10px; }
  .zg-fala { font-size: 13px; line-height: 1.6; max-height: 38vh; overflow-y: auto; }
  .zg-acoes { gap: 6px; }
  .zg-leve { font-size: 10.5px; letter-spacing: .04em; }
  .zg-voltar { padding: 8px 10px; }
  .zg-seguir { padding: 9px 12px; }
  .zg-chamar { left: 10px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .zg, html:not(.force-motion) .zg-pose, html:not(.force-motion) .zg-emote,
  html:not(.force-motion) .zg-chamar, html:not(.force-motion) .zg-chamar img, html:not(.force-motion) .zg-foco { animation: none; }
}