:root {
  --zombie-v3-ink: #071c27;
  --zombie-v3-cream: #fff4d1;
  --zombie-v3-coral: #ff715d;
  --zombie-v3-aqua: #35e1df;
}

/* The environment is a true background-only image. Interactive art lives in
   separate DOM layers and never gets baked into this scene. */
.zombie-arena {
  background:
    linear-gradient(180deg, rgba(2, 17, 28, .12), rgba(2, 14, 23, .03) 50%, rgba(2, 15, 24, .28)),
    url("./assets/word-arcade-commercial-v2/runtime/background-zombie.webp") center 54% / cover no-repeat;
}

.night-sky,
.ruined-city,
.road-grid {
  display: none;
}

.fog {
  z-index: 4;
  opacity: .34;
  background: rgba(153, 238, 255, .12);
}

.zombie-layer {
  z-index: 6;
}

.zombie {
  --tag: var(--cyan);
  width: 168px;
  height: 184px;
  filter: drop-shadow(0 15px 11px rgba(0, 10, 18, .42));
  transform-origin: 50% 92%;
}

/* Practice begins with exactly three stationary targets placed on the far
   line.  Live waves reuse the moving target rules below and never exceed the
   JavaScript cap of three simultaneous word images. */
.zombie.practice-target {
  width: 154px;
  height: 168px;
  filter: drop-shadow(0 12px 10px rgba(0, 10, 18, .38));
}

.zombie.practice-target .zombie-figure { animation: none; }
.zombie.practice-target .zombie-health { display: none; }
.zombie.practice-target.practice-correct .zombie-figure {
  border-color: var(--lime);
  box-shadow: 0 0 0 5px rgba(199, 255, 79, .24), 0 0 28px rgba(199, 255, 79, .5);
}

.zombie.korean {
  --tag: var(--pink);
}

.zombie-shadow {
  right: 13%;
  bottom: 2px;
  left: 13%;
  height: 13px;
  background: rgba(0, 9, 17, .48);
}

.zombie-figure {
  inset: 0;
  display: block;
  overflow: hidden;
  border: 5px solid var(--tag);
  border-radius: 28px;
  background: rgba(255, 255, 255, .97);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .72), 0 9px 20px rgba(0, 15, 25, .28);
  animation: word-target-float .74s ease-in-out infinite alternate;
}

@keyframes word-target-float { from { transform: translateY(0); } to { transform: translateY(3px); } }

.zombie-art {
  position: absolute;
  inset: 8px 8px 46px;
  width: calc(100% - 16px);
  height: calc(100% - 54px);
  object-fit: contain;
  border-radius: 18px;
  background: #fff;
  pointer-events: none;
  user-select: none;
}

.word-tag {
  top: auto;
  right: 8px;
  bottom: 8px;
  left: 8px;
  display: grid;
  width: auto;
  min-height: 34px;
  place-items: center;
  min-width: 0;
  padding: 4px 7px;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--zombie-v3-ink);
  box-shadow: 0 4px 10px rgba(0, 15, 25, .22);
  font-family: "Noto Sans KR", sans-serif;
  font-size: clamp(13px, 1.55vw, 21px);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-overflow: ellipsis;
  text-shadow: none;
  transform: none;
}

.zombie.runner .zombie-figure { border-style: double; }
.zombie.armored .zombie-figure { border-width: 8px; }

.word-tag small {
  display: none;
}

.zombie-health {
  right: 17%;
  bottom: -7px;
  left: 17%;
  height: 7px;
  border-color: rgba(255, 255, 255, .68);
  background: rgba(0, 12, 20, .72);
}

.zombie-speech {
  top: -26px;
  border-color: var(--tag);
  color: var(--zombie-v3-ink);
}

.zombie.boss {
  width: 250px;
  height: 272px;
  filter: drop-shadow(0 24px 18px rgba(0, 7, 15, .65));
}

.zombie.boss .word-tag {
  top: auto;
  right: 12px;
  bottom: 12px;
  left: 12px;
  width: auto;
  min-width: 0;
  padding: 0 5px;
  color: #fff;
  font-size: clamp(19px, 2.1vw, 30px);
}

.zombie.boss.shield-swap .word-tag {
  animation: zombie-v3-shield-swap 420ms ease;
}

@keyframes zombie-v3-shield-swap {
  50% {
    transform: translate(-50%, -50%) scale(1.18);
    filter: brightness(1.55);
  }
}

.zombie.boss .zombie-health {
  right: 20%;
  bottom: -2px;
  left: 20%;
}

.weapon-view {
  --aim-x: 0px;
  --aim-y: 0px;
  --aim-rotate: 0deg;
  position: absolute;
  z-index: 24;
  right: -1%;
  bottom: -5px;
  width: min(34vw, 430px);
  transform: translate3d(var(--aim-x), var(--aim-y), 0) rotate(var(--aim-rotate));
  transform-origin: 84% 90%;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  filter: drop-shadow(0 18px 14px rgba(0, 8, 15, .45));
  transition: width 150ms ease, right 150ms ease, transform 55ms linear, opacity 130ms ease;
}

.weapon-view[hidden] {
  display: none;
}

.weapon-view img {
  display: block;
  width: 100%;
  height: auto;
}

.weapon-view[data-weapon="pistol"] {
  right: 1%;
  width: min(25vw, 320px);
}

.weapon-view[data-weapon="dual"] {
  right: 50%;
  width: min(48vw, 600px);
  transform: translate3d(calc(50% + var(--aim-x)), var(--aim-y), 0) rotate(var(--aim-rotate));
  transform-origin: 50% 90%;
}

.weapon-view[data-weapon="smg"] {
  right: 4%;
  width: min(42vw, 520px);
}

.weapon-view[data-pose="fire"] {
  filter: drop-shadow(0 0 16px rgba(255, 210, 85, .38)) drop-shadow(0 18px 14px rgba(0, 8, 15, .45));
}

.weapon-view[data-pose="recoil"] {
  --aim-y: 8px;
}

.weapon-view[data-pose="reload"] {
  --aim-y: 18px;
}

.zombie-app.paused .weapon-view {
  opacity: .32;
}

@media (max-width: 760px) {
  .zombie {
    width: 164px;
    height: 122px;
  }

  .word-tag {
    font-size: 12px;
  }

  .zombie.boss {
    width: 260px;
    height: 185px;
  }

  .zombie.boss .word-tag {
    font-size: 19px;
  }

  .weapon-view[data-weapon="pistol"] {
    right: -4%;
    width: min(45vw, 280px);
  }

  .weapon-view[data-weapon="dual"] {
    width: min(78vw, 500px);
  }

  .weapon-view[data-weapon="smg"] {
    right: -8%;
    width: min(70vw, 440px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .weapon-view {
    transition: none;
  }
}