/* WiFiCom Battle Renderer v1.0.0: self-contained LCD battle scene. */
.wificom-battle-host { position: relative; overflow: hidden; }
.device-slots.battle-active > .device-slot,
.device-slots.battle-active > .device-slot-sprite,
.device-slots.battle-active > .cloud-attention,
.device-slots.battle-active > .cloud-poop-layer,
.device-slots.battle-active > .cloud-sick-idle,
.device-slots.battle-active > .cloud-pack-sleep,
.device-slots.battle-active > .cloud-pack-attention { visibility: hidden !important; }

.firmware-battle {
  position: absolute;
  z-index: 12;
  inset: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: #12170f;
  pointer-events: none;
  font: 800 clamp(11px, 2.2vw, 24px) ui-monospace, monospace;
  text-align: center;
}
.firmware-battle .battle-title,
.firmware-battle .battle-hit {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  margin: 0;
  line-height: 1;
  text-shadow: 1px 1px 0 #d9ef83;
}
.firmware-battle .battle-title { top: 40%; color: #ffe132; font-size: 1.55em; }
.firmware-battle:not([data-phase="intro"]) .battle-title { top: 7%; }
.firmware-battle .battle-hit { top: 7%; font-size: 1.15em; }
.firmware-battle .battle-pet {
  position: absolute;
  z-index: 2;
  top: 55%;
  left: 82%;
  width: clamp(34px, 14%, 64px);
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-size: 1200% 100%;
  image-rendering: pixelated;
  transform: translate(-50%, -50%);
  transform-origin: center;
}
.firmware-battle .battle-pet.is-mirrored { transform: translate(-50%, -50%) scaleX(-1); }
.firmware-battle .battle-pet.is-hidden { opacity: 0; }
.firmware-battle .battle-fire {
  position: absolute;
  z-index: 3;
  top: 48%;
  width: clamp(28px, 14%, 58px);
  height: auto;
  image-rendering: pixelated;
  transform: translate(-50%, -50%);
}
.firmware-battle .battle-fire-ltr { transform: translate(-50%, -50%) scaleX(-1); }
.firmware-battle .battle-fire-trail { top: 65%; opacity: .88; }
.firmware-battle .battle-emotes {
  position: absolute;
  z-index: 4;
  top: 20%;
  right: 10%;
  width: clamp(30px, 13%, 56px);
  aspect-ratio: 1;
  display: none;
}
.firmware-battle.has-hit .battle-emotes { display: block; }
.firmware-battle .battle-emotes img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.firmware-battle .battle-emotes img:last-child { animation: emote-swap 260ms steps(1, end) infinite; }
.firmware-battle[data-phase="result"] .battle-pet { top: 58%; }
.firmware-battle .battle-result-emotes { position: absolute; z-index: 4; top: 20%; right: 10%; width: clamp(30px, 13%, 56px); aspect-ratio: 1; display: none; }
.firmware-battle[data-phase="emotion"] .battle-result-emotes { display: block; }
.firmware-battle .battle-result-emotes img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.firmware-battle .battle-result-emotes img:last-child { animation: emote-swap 480ms steps(1, end) infinite; }
.firmware-battle[data-phase="emotion"] .battle-pet { top: 58%; }

@media (prefers-reduced-motion: reduce) {
  .firmware-battle .battle-emotes img:last-child,
  .firmware-battle .battle-result-emotes img:last-child { animation: none; }
}