/* ClaveViva · Zombies · capa de juego (ver js/themes/zombies-game.js) */

/* --- fila extra del HUD: tiempo, récord, sonido, pausa --- */
.cvz-btn.cvz-pausebtn{width:auto;padding:0 10px;display:inline-flex;align-items:center;gap:4px;font:800 11px/1 'Space Mono',monospace;letter-spacing:.3px;border-color:#ffe66d77}
.cvz-pausebtn kbd{font:800 10px/1 'Space Mono',monospace;padding:2px 5px;border-radius:5px;background:#ffe66d;color:#1a1400;border:0}
.cvz-pausebtn.on{background:#3a2d00;border-color:#ffe66d}
@media (max-width:640px){.cvz-pausebtn span{display:none}.cvz-btn.cvz-pausebtn{width:30px;padding:0;justify-content:center}}
.cvz-pause kbd{font:800 11px/1 'Space Mono',monospace;padding:3px 7px;border-radius:6px;background:#ffe66d;color:#1a1400;margin-left:6px}
.cvz-hudrow{grid-column:1/-1;display:flex;align-items:center;gap:8px}
.cvz-time{position:relative;flex:1;height:18px;border-radius:99px;border:1px solid #76ff7a40;background:#030a06dd;overflow:hidden;backdrop-filter:blur(8px)}
.cvz-time i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#2bd45a,#ffe66d 60%,#ff5577);opacity:.8;transition:width .25s linear}
.cvz-time span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 10px/1 'Space Mono',monospace;color:#fff;text-shadow:0 1px 3px #000}
.cvz-best{font:700 11px/1 'Space Mono',monospace;color:#ffe66d;padding:5px 9px;border-radius:99px;background:#030a06dd;border:1px solid #ffe66d33;white-space:nowrap}
.cvz-best b{font-weight:900}
.cvz-btn{pointer-events:auto;width:30px;height:26px;border-radius:9px;border:1px solid #76ff7a55;background:#030a06dd;color:#fff;font-size:13px;line-height:1;cursor:pointer;padding:0}
.cvz-btn:hover{background:#0c2214;border-color:#76ff7a99}

/* --- corazones, buffs, racha --- */
.cvz-hearts{display:flex;gap:2px;font-size:21px;line-height:1;filter:drop-shadow(0 0 8px #ff365c88);padding:0 4px}
.cvz-heart{color:#ff4466;transition:transform .2s}
.cvz-heart.lost{color:#555;opacity:.35;filter:grayscale(1)}
.cvz-heart.pop{animation:cvzHeartPop .6s ease-out}
.cvz-hearts.low .cvz-heart:not(.lost){animation:cvzBeat .95s infinite}
@keyframes cvzHeartPop{0%{transform:scale(2);color:#fff}100%{transform:scale(1)}}
@keyframes cvzBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.28)}30%{transform:scale(1)}45%{transform:scale(1.2)}}
.cvz-buffs{position:absolute;left:14px;top:154px;display:flex;flex-direction:column;gap:5px}
.cvz-chip{font:800 11px/1 'Space Mono',monospace;padding:6px 10px;border-radius:99px;background:#030a06dd;border:1px solid #fff3}
.cvz-chip.ice{color:#9fe3ff;border-color:#66ccff88;box-shadow:0 0 14px #66ccff55}
.cvz-combo{position:absolute;right:16px;top:152px;text-align:right;opacity:0;transition:opacity .2s;font-family:'Space Mono',monospace}
.cvz-combo.on{opacity:1}
.cvz-combo small{display:block;font:800 9px/1 'Space Mono',monospace;letter-spacing:.2em;color:#91ff9a}
.cvz-combo b{display:block;font:900 38px/1 'Space Mono',monospace;color:#fff;text-shadow:0 0 14px #76ff7a99,0 3px 0 #0008}
.cvz-combo.t1 b{color:#ffe66d;text-shadow:0 0 16px #ffe66dcc,0 3px 0 #0008}
.cvz-combo.t2 b{color:#ffa94d;text-shadow:0 0 20px #ff9a3acc,0 3px 0 #0008}
.cvz-combo.t3 b{color:#ff5577;text-shadow:0 0 26px #ff2244,0 0 8px #ffb347,0 3px 0 #0008}
.cvz-combo.pop b{animation:cvzComboPop .25s ease-out}
@keyframes cvzComboPop{0%{transform:scale(1.5)}100%{transform:scale(1)}}

/* --- mira y barras de vida sobre los zombis --- */
.cvz-bars,.cvz-reticle{position:absolute;left:0;top:0}
.cvz-hp{position:absolute;left:0;top:0;display:flex;gap:2px;padding:2px;border-radius:5px;background:#000a;will-change:transform}
.cvz-hp span{display:block;width:13px;height:6px;border-radius:2px;background:#3a1620}
.cvz-hp span.on{background:linear-gradient(#ff7a90,#ff2d55);box-shadow:0 0 6px #ff2d55aa}
.cvz-reticle{display:none;border:2px solid #ff5577;border-radius:50%;box-shadow:0 0 14px #ff365c99,inset 0 0 10px #ff365c55;will-change:transform;opacity:.9}
.cvz-reticle i{position:absolute;inset:-7px;border:2px dashed #ffb3c0aa;border-radius:50%;animation:cvzSpin 3s linear infinite}
.cvz-reticle.near{border-color:#ff2244;animation:cvzReticleNear .5s infinite}
@keyframes cvzSpin{to{transform:rotate(360deg)}}
@keyframes cvzReticleNear{50%{box-shadow:0 0 26px #ff2244,inset 0 0 16px #ff2244}}

/* --- flecha sobre la tecla objetivo --- */
.cvz-keymark{position:absolute;left:0;top:0;display:none;font:900 26px/1 'Space Mono',monospace;color:#ffd02e;text-shadow:0 0 12px #ffd02e,0 2px 0 #000a;will-change:transform}

/* --- avisos y números flotantes --- */
.cvz-banner{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);text-align:center;white-space:nowrap;animation:cvzBanner 1.9s ease-out forwards}
.cvz-banner b{display:block;font:900 clamp(26px,5.2vw,52px)/1.05 'Space Mono',monospace;color:#ffe66d;text-shadow:0 0 24px #ffe66d88,0 4px 0 #0009;letter-spacing:.04em}
.cvz-banner small{display:block;margin-top:8px;font:700 clamp(10px,1.5vw,14px)/1.2 'Space Mono',monospace;color:#d6ffdc;text-shadow:0 2px 4px #000}
.cvz-banner.boss b{color:#ff5577;text-shadow:0 0 28px #ff2244,0 4px 0 #0009}
.cvz-banner.blue b{color:#9fe3ff;text-shadow:0 0 28px #4fb8ff,0 4px 0 #0009}
.cvz-banner.good b{color:#7aff8a;text-shadow:0 0 28px #2bd45a,0 4px 0 #0009}
.cvz-banner.wave b{color:#fff;text-shadow:0 0 28px #ffb347,0 4px 0 #0009}
.cvz-banner.cd{top:36%;animation:cvzCount 1s ease-out forwards}
.cvz-banner.cd b{font-size:clamp(60px,14vw,140px);color:#fff;text-shadow:0 0 34px #76ff7acc,0 6px 0 #0009}
.cvz-banner.cd.go{animation-duration:1.2s}
.cvz-banner.cd.go b{font-size:clamp(34px,7vw,74px);color:#ffe66d;text-shadow:0 0 34px #ffe66d,0 5px 0 #0009}
@keyframes cvzBanner{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}22%{transform:translate(-50%,-50%) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) scale(1)}}
@keyframes cvzCount{0%{opacity:0;transform:translate(-50%,-50%) scale(2)}25%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.8)}}
.cvz-pop{position:absolute;transform:translate(-50%,-50%);font:900 20px/1 'Space Mono',monospace;text-shadow:0 2px 0 #000b,0 0 10px currentColor;animation:cvzPop 1s ease-out forwards;white-space:nowrap}
.cvz-pop.y{color:#ffe66d}.cvz-pop.g{color:#7aff8a}.cvz-pop.r{color:#ff6b84}.cvz-pop.c{color:#9fe3ff}.cvz-pop.w{color:#c9d3cc;font-size:13px}
@keyframes cvzPop{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
.zombie-stage.cvz-paused *{animation-play-state:paused!important}

/* --- viñeta y destellos --- */
.cvz-vig{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .4s}
.cvz-vig.low{opacity:1;background:radial-gradient(ellipse at center,transparent 52%,#ff0f3a55 100%);animation:cvzVig .95s infinite}
.cvz-vig.freeze{opacity:1;background:radial-gradient(ellipse at center,transparent 45%,#3fb6ff55 100%)}
.cvz-vig.low.freeze{background:radial-gradient(ellipse at center,transparent 45%,#7a6fff55 100%)}
.cvz-vig.wrong{animation:cvzWrong .3s}
@keyframes cvzVig{50%{opacity:.45}}
@keyframes cvzWrong{0%{opacity:1;background:radial-gradient(ellipse at center,transparent 60%,#ffffff22 100%);transform:translateX(-6px)}50%{transform:translateX(6px)}100%{transform:none}}
.cvz-flash{position:fixed;inset:0;z-index:71;pointer-events:none;opacity:0}
.cvz-flash.go{animation:cvzFlash .55s ease-out}
.cvz-flash.red{background:radial-gradient(ellipse at center,#ff1a3c33 30%,#ff1a3caa 100%)}
.cvz-flash.bolt{background:#dff1ffcc;animation-duration:.4s}
.cvz-flash.storm{background:#cfe0ff88;animation-duration:.35s}
.cvz-flash.ice{background:radial-gradient(ellipse at center,#66ccff22,#66ccffaa);animation-duration:.7s}
.cvz-flash.heal{background:radial-gradient(ellipse at center,#7aff8a22,#7aff8a88)}
.cvz-flash.gold{background:radial-gradient(ellipse at center,#ffe66d33,#ffe66daa);animation-duration:.8s}
@keyframes cvzFlash{0%{opacity:1}100%{opacity:0}}
/* destello de nota correcta: más suave y verde (antes era rojo) */
.zombie-hit-flash{background:#8bff9a1c!important}

/* --- pantalla final --- */
.cvz-stars{display:none;margin:2px 0 0;font-size:46px;line-height:1;letter-spacing:6px}
.cvz-stars span{display:inline-block;color:#2a3a2e;opacity:.5}
.cvz-stars span.on{color:#ffe66d;opacity:1;text-shadow:0 0 22px #ffe66d99;animation:cvzStar .55s cubic-bezier(.2,1.6,.4,1) both}
@keyframes cvzStar{0%{transform:scale(0) rotate(-90deg)}100%{transform:scale(1) rotate(0)}}
.cvz-resnote{display:flex;flex-direction:column;gap:5px;margin:-8px 0 16px;font:700 11px 'Space Mono',monospace;color:#9fb4a6}
.cvz-resnote .cvz-rec{color:#ffe66d;font-size:14px;font-weight:900;text-shadow:0 0 14px #ffe66d88;animation:cvzBeat 1.2s infinite}
.cvz-pause .zombie-card{width:min(440px,92vw)}

/* --- móvil horizontal / pantallas bajas --- */
@media (max-height:520px),(max-width:700px){
  .cvz-hearts{font-size:15px;gap:1px;padding:0 2px}
  .cvz-buffs{top:124px;left:8px}
  .cvz-combo{top:120px;right:10px}
  .cvz-combo b{font-size:26px}
  .cvz-time{height:15px}
  .cvz-time span{font-size:9px}
  .cvz-best{font-size:9px;padding:4px 7px}
  .cvz-btn{width:26px;height:22px;font-size:11px}
  .cvz-banner{top:34%}
  .cvz-pop{font-size:16px}
}

/* el aviso de jefe original quedaba bajo la fila de tiempo: se baja un poco */
.zombie-boss-label{top:24%!important}
.zombie-boss-bar{top:28.5%!important}
.cvz-banner{top:38%}
@media (max-height:520px),(max-width:700px){.zombie-boss-label{top:26%!important}.zombie-boss-bar{top:31%!important}.cvz-banner{top:40%}}

/* --- niveles: tienda nueva, chip de escudo, nombre de nota oculto --- */
.cvz-chip.sh{color:#b9f0ff;border-color:#8fe3ff88;box-shadow:0 0 14px #8fe3ff44}
#zombieTarget.cvz-blind{font-size:0!important}
#zombieTarget.cvz-blind::after{content:'?';font-size:25px;color:#ffe66d;text-shadow:0 0 18px #ffe66d66}
.zombie-shop-card{max-height:94vh;overflow:auto}
.zombie-shop-head p{line-height:1.5}
.cvz-items{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:980px){.cvz-items{grid-template-columns:repeat(3,1fr)}}
.cvz-item{padding:13px;border:1px solid #ffffff12;border-radius:15px;background:#071008;cursor:pointer;text-align:left;color:#fff;display:flex;flex-direction:column;gap:5px}
.cvz-item:hover{border-color:#ffe66d66;background:#0c160b}
.cvz-item.disabled{opacity:.42;cursor:not-allowed}
.cvz-item.done{border-color:#76ff7a33}
.cvz-item b{font-size:13px}
.cvz-item span{color:#91a394;font-size:10px;line-height:1.4;flex:1}
.cvz-ifoot{display:flex;justify-content:space-between;align-items:center;margin-top:3px}
.cvz-ifoot i{font-style:normal;color:#76ff7a;font-size:11px;letter-spacing:2px}
.cvz-ifoot em{font:800 11px 'Space Mono',monospace;color:#ffe66d;font-style:normal}
@media (max-height:520px),(max-width:700px){
  .zombie-shop{padding:8px}
  .zombie-shop-card{padding:14px}
  .zombie-shop-head{margin-bottom:10px}
  .cvz-item{padding:9px}
  .cvz-item b{font-size:11px}
}

.cvz-cue.ring{animation:cvzRing 2.6s ease-out}
@keyframes cvzRing{0%,60%{box-shadow:0 0 0 0 #ffe66dcc;border-color:#ffe66d}100%{box-shadow:0 0 0 12px #ffe66d00}}

.cvz-prn{display:block;margin-top:4px;font:800 10px/1 'Space Mono',monospace;font-style:normal;letter-spacing:.08em;color:#ffd86a;text-shadow:0 0 10px #ffb347aa;animation:cvzBeat 1s infinite}
.cvz-prn:empty{display:none}