/* Ataque Zumbi */
.campo-zumbi {
  position: relative; flex: 1 1 auto; min-height: 300px; border-radius: var(--raio); overflow: hidden; margin-bottom: 10px;
  box-shadow: var(--sombra); background: #14532d; user-select: none;
}
.ceu-zumbi {
  position: absolute; inset: 0 0 76% 0;
  background: radial-gradient(circle at 20% 40%, #fff 0 1px, transparent 2px), radial-gradient(circle at 60% 20%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 85% 60%, #fff9 0 1px, transparent 2px), radial-gradient(circle at 38% 75%, #fff8 0 1px, transparent 2px),
    linear-gradient(#0f172a, #3b0764 80%, #6b21a8);
}
.lua { position: absolute; right: 8%; top: 14%; font-size: clamp(2rem, 4vw, 3.6rem); filter: drop-shadow(0 0 18px #fef08a); }
.chao-zumbi {
  position: absolute; inset: 24% 0 0 0;
  background: repeating-linear-gradient(#166534 0 6%, #15803d 6% 12%), #166534;
}
.estrada {
  position: absolute; inset: 0; background: linear-gradient(#78716c, #a8a29e);
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%); opacity: .55;
}
.barricada {
  position: absolute; left: 0; right: 0; top: 84%; height: 4%; z-index: 150;
  background: repeating-linear-gradient(90deg, #b45309 0 22px, #78350f 22px 27px); box-shadow: 0 -3px 0 #92400e, 0 6px 12px rgba(0, 0, 0, .4);
}
.torre { position: absolute; left: 50%; bottom: 0; width: 0; height: 0; z-index: 160; }
.base-torre {
  position: absolute; left: -46px; bottom: -14px; width: 92px; height: 60px; border-radius: 46px 46px 10px 10px;
  background: radial-gradient(circle at 50% 30%, #94a3b8, #334155); border: 3px solid #1e293b;
}
.cano {
  position: absolute; left: 0; bottom: 30px; width: 18px; height: 58px; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(90deg, #475569, #cbd5e1, #475569); border: 2px solid #1e293b;
  transform: translateX(-50%); transform-origin: 50% 100%; transition: transform .06s;
}
.cano.disparo::before {
  content: ''; position: absolute; left: 50%; top: -16px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  background: radial-gradient(#fff, #fde047 40%, transparent 70%); animation: clarao-cano .12s forwards;
}
.cano.falhou { animation: tremer .2s; }
@keyframes clarao-cano { to { opacity: 0; transform: scale(1.6); } }

.zumbi {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; will-change: transform;
  pointer-events: none;
}
.zumbi .corpo { font-size: var(--tam, 50px); line-height: 1; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .45)); position: relative; }
.zumbi .corpo small { position: absolute; right: -.15em; top: -.2em; font-size: .5em; }
.zumbi .placa {
  background: #fff; color: #1e293b; border-radius: 9px; padding: 1px 9px; margin-bottom: 4px; white-space: nowrap;
  font: 600 clamp(1.05rem, .8rem + .7vw, 1.7rem) 'Fredoka', sans-serif; letter-spacing: .04em; box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}
.zumbi .placa i { font-style: normal; }
.zumbi .placa i.feito { color: #16a34a; text-decoration: underline; }
.zumbi.alvo .placa { background: #fde047; outline: 3px solid #f97316; }
.zumbi.chefe .placa { background: #fecaca; font-size: clamp(1rem, .75rem + .6vw, 1.5rem); }
.zumbi.chefe.alvo .placa { background: #fde047; }
.zumbi.corredor .placa { background: #fed7aa; }
.zumbi.caixa-poder .placa { background: #bfdbfe; }
.zumbi.caixa-poder .corpo { animation: flutuar 1.2s ease-in-out infinite; }
.zumbi.surgiu { animation: surgir .4s ease-out; }
.zumbi.atingido .corpo { animation: atingido .12s; }
.zumbi.derrotado .corpo { animation: derrotado .6s forwards; }
@keyframes atingido { 50% { filter: brightness(2.2) drop-shadow(0 0 8px #fde047); transform: translateX(3px); } }
@keyframes derrotado { 40% { transform: rotate(-20deg) scale(1.1); } to { transform: rotate(-90deg) translateX(-30%) scale(.6); opacity: 0; } }
@keyframes surgir { from { opacity: 0; transform: scale(.3); } }

.bala {
  position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; z-index: 170;
  background: #fef9c3; box-shadow: 0 0 10px 4px #facc15, 0 0 22px 8px rgba(250, 204, 21, .5);
}
.flutuante {
  position: absolute; z-index: 180; transform: translateX(-50%); font: 700 1.5rem 'Fredoka', sans-serif; color: #fde047;
  text-shadow: 0 2px 0 #713f12, 0 0 10px rgba(0, 0, 0, .5); animation: subir-sumir .9s forwards; pointer-events: none;
}
.flutuante.grande { font-size: 2.4rem; }
@keyframes subir-sumir { to { transform: translate(-50%, -60px); opacity: 0; } }

.aviso-onda {
  position: absolute; inset: 0; z-index: 190; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 700 clamp(2.4rem, 5vw, 4.5rem) 'Fredoka', sans-serif; color: #fff; text-shadow: 0 6px 0 #14532d, 0 0 30px rgba(0, 0, 0, .6);
  pointer-events: none; opacity: 0;
}
.aviso-onda small { font-size: .38em; color: #fecaca; }
.aviso-onda.mostrar { animation: onda-aparece 2.2s; }
@keyframes onda-aparece { 0% { opacity: 0; transform: scale(1.6); } 15%, 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

.campo-zumbi .digitado { position: absolute; top: 10px; right: 16px; z-index: 190; font: 600 1.6rem 'Fredoka'; color: #fde047; }
.campo-zumbi.tremer { animation: tremer .25s 2; }
.campo-zumbi.congelado::after {
  content: '❄️'; position: absolute; inset: 0; z-index: 140; display: grid; place-items: start center; padding-top: 2%;
  font-size: 2rem; background: rgba(147, 197, 253, .28); box-shadow: inset 0 0 60px rgba(191, 219, 254, .9); pointer-events: none;
}
.campo-zumbi.clarao::before {
  content: ''; position: absolute; inset: 0; z-index: 195; background: #fff; animation: clarao .5s forwards; pointer-events: none;
}
@keyframes clarao { from { opacity: .9; } to { opacity: 0; } }

.combo[data-nivel="2"] { background: #fef3c7; }
.combo[data-nivel="3"] { background: #fed7aa; }
.combo[data-nivel="4"] { background: #fecaca; }
.combo.subiu { animation: pulsar .4s; }

/* Layout de tela cheia, como os outros jogos */
.tela-zumbis { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 560px; padding-bottom: 14px; }
.tela-zumbis > * { flex-shrink: 0; }
.tela-zumbis .campo-zumbi { flex: 1 1 auto; }
.tela-zumbis #kb { flex: 0 1 30%; min-height: 150px; container-type: size; display: flex; justify-content: center; align-items: center; }
.tela-zumbis .teclado-wrap { --maos-h: 0px; }
@media (max-width: 900px) { .tela-zumbis { height: auto; min-height: 100vh; } .tela-zumbis .campo-zumbi { height: 60vh; } .tela-zumbis #kb { height: 40vw; } }

/* Modo adulto: mesmos elementos, tons sóbrios */
.adulto .zumbi .placa { font-family: 'JetBrains Mono', monospace; border-radius: 6px; }
.adulto .flutuante, .adulto .aviso-onda { font-family: 'Inter', sans-serif; }