/* Keep route arrows underneath transparent characters instead of across faces. */
body.pixel-preview .unit-layer { z-index: 6; }
body.pixel-preview .unit-marker::before {
  inset: auto;
  left: 3px;
  bottom: 5px;
  width: 42px;
  height: 16px;
  border: 1px solid #ffffff88;
  border-radius: 50%;
  clip-path: none;
  opacity: .6;
  filter: none;
}
/* Draw the HP ring behind both sprites; keep their board positions unchanged. */
body.pixel-preview .unit-marker > .hex-hp-bar { opacity: .75; z-index: 2; }
body.pixel-preview .unit-marker .pixel-sprite {
  position: absolute;
  display: block;
  inset: auto;
  --pixel-left: -8px;
  left: var(--pixel-left);
  top: -5px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 0;
  clip-path: none;
  background-image: var(--pixel-image);
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  filter: brightness(1.2) drop-shadow(0 1px 0 #080d18);
  z-index: 3;
}
body.pixel-preview .unit-marker .pixel-companion { --pixel-left: 15px; left: var(--pixel-left); top: 1px; z-index: 4; }
body.pixel-preview .unit-marker--separated-sub .pixel-sprite,
body.pixel-preview .unit-marker:not(.pixel-has-companion) .pixel-sprite { --pixel-left: 0px; left: var(--pixel-left); }
.pixel-companion { display: none; }
body.pixel-preview .pixel-companion[hidden] { display: none; }
body.pixel-preview .unit-marker .pixel-sprite[data-pixel-character] {
  background-image: var(--pixel-idle-image);
  background-size: 500% 100%;
  animation: pixel-character-idle 1.18s steps(1, end) infinite;
  animation-delay: var(--pixel-idle-delay, 0s);
}
@keyframes pixel-character-idle {
  0% { background-position: 0% 0; }
  30.5085% { background-position: 25% 0; }
  45.7627% { background-position: 50% 0; }
  67.7966% { background-position: 75% 0; }
  77.9661% { background-position: 100% 0; }
}
body.pixel-idle-paused .pixel-sprite:not(.is-pixel-na),
body.is-processing .pixel-sprite:not(.is-pixel-na),
body.pixel-preview .unit-marker.is-main-recovering .pixel-sprite { animation-play-state: paused !important; }
body.pixel-preview .unit-marker .pixel-sprite.is-pixel-na[data-pixel-character] {
  width: 72px;
  left: calc(var(--pixel-left) - 12px);
  background-image: var(--pixel-na-image);
  animation: pixel-character-na var(--pixel-na-duration, 450ms) steps(1, end) 1 both;
  transform: scaleX(var(--pixel-na-flip, 1));
  transform-origin: var(--pixel-na-anchor, 36px 45.75px);
  z-index: 6;
}
@keyframes pixel-character-na {
  0% { background-position: 0% 0; }
  17.7778% { background-position: 25% 0; }
  35.5556% { background-position: 50% 0; }
  64.4444% { background-position: 75% 0; }
  82.2222%, 100% { background-position: 100% 0; }
}
/* The old character NA atlas includes baked-in attack art. Shield NA uses
   the neutral body and the separate shield animation instead. */
body.pixel-preview .unit-marker .pixel-sprite.is-pixel-na[data-pixel-character][data-pixel-na-mode="shield"] {
  width: 48px;
  left: var(--pixel-left);
  background-image: var(--pixel-idle-image);
  background-size: 500% 100%;
  background-position: 0 0;
  animation: none;
  transform: none;
}
body.pixel-preview .unit-marker.is-selected::before { opacity: 1; border-color: #ffeb8c; }
body.pixel-preview .unit-marker.is-main-recovering .pixel-sprite { filter: grayscale(1) brightness(.5); }
@media (prefers-reduced-motion: reduce) {
  body.pixel-preview .pixel-sprite { animation-play-state: paused; }
  body.pixel-preview .unit-marker .pixel-sprite.is-pixel-na[data-pixel-character] {
    animation: none;
    background-position: 50% 0;
  }
}

/* Shared equipment stays behind both characters and above the HP ring.
   It is a separate layer, so existing idle / NA frames are untouched. */
.pixel-magitech {
  display: none;
  position: absolute;
  left: -8px;
  top: -17px;
  width: 48px;
  height: 20px;
  z-index: 3;
  pointer-events: none;
}
.pixel-magitech__device {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: var(--pixel-magitech-image) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  animation: pixel-magitech-idle 2s steps(1, end) infinite;
  animation-delay: var(--pixel-magitech-delay, 0s);
}
.pixel-magitech__device[data-chip-slot="sub"] {
  left: 28px;
  top: 0;
  animation-delay: calc(var(--pixel-magitech-delay, 0s) - .45s);
}
/* Main chip upper-left, sub chip upper-right of each 48px character.
   Paired characters intentionally share/overlap this space. */
body.pixel-preview.pixel-magitech-ready:not(.pixel-magitech-off) .pixel-magitech { display: block; }
body.pixel-preview .unit-marker .pixel-sprite { z-index: 4; }
body.pixel-preview .unit-marker .pixel-companion { z-index: 5; }
body.pixel-preview .unit-marker:not(.pixel-has-companion) .pixel-magitech,
body.pixel-preview .unit-marker--separated-sub .pixel-magitech { left: 0; }
body.pixel-preview .unit-marker .pixel-magitech--companion { left: 15px; top: -11px; }
@keyframes pixel-magitech-idle {
  0% { transform: translateY(0); }
  20% { transform: translateY(-1px); }
  40% { transform: translateY(-2px); }
  60% { transform: translateY(-1px); }
  80%, 100% { transform: translateY(0); }
}
body.pixel-idle-paused .pixel-magitech__device,
body.is-processing .pixel-magitech__device { animation-play-state: paused !important; }
/* The deployed main device is hidden separately; the sub stays at home.
   Keep the old fallback NA's equipment hidden when new assets are unavailable. */
body.pixel-preview .unit-marker .pixel-magitech:not(.is-magitech-deployed):has(+ .is-pixel-na),
body.pixel-preview .unit-marker.is-main-recovering .pixel-magitech,
body.pixel-preview .unit-marker.is-hidden-by-vision .pixel-magitech,
body.pixel-preview .unit-marker.is-separated-sub-inactive .pixel-magitech { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .pixel-magitech__device { animation-play-state: paused !important; }
}


/* One deployed main-chip machine; the other stays behind its owner. */
body.pixel-preview .pixel-magitech.is-magitech-deployed > [data-chip-slot="main"] { visibility: hidden; }
.pixel-magitech-attack { display: none; }
body.pixel-preview:not(.pixel-magitech-off) .pixel-magitech-attack {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  z-index: 8;
  pointer-events: none;
  image-rendering: pixelated;
  animation: pixel-magitech-deploy var(--machine-duration) steps(1, end) 1 both;
}
.pixel-magitech-attack__weapon {
  position: absolute;
  inset: 0;
  background: var(--pixel-magitech-image) center / 20px 20px no-repeat;
  animation: pixel-magitech-morph var(--machine-duration) steps(1, end) 1 both;
}
@keyframes pixel-magitech-deploy {
  0% { transform: translate(var(--machine-home-x), var(--machine-home-y)); }
  20% { transform: translate(var(--machine-hand-x), var(--machine-hand-y)); }
  40% { transform: translate(var(--machine-hit-x), var(--machine-hit-y)); }
  65% { transform: translate(var(--machine-hand-x), var(--machine-hand-y)); }
  85%, 100% { transform: translate(var(--machine-home-x), var(--machine-home-y)); }
}
@keyframes pixel-magitech-morph {
  0%, 85%, 100% { background-image: var(--pixel-magitech-image); background-size: 20px 20px; transform: none; }
  20% { background-image: var(--machine-weapon); background-size: var(--machine-weapon-size); transform: scaleX(var(--machine-facing)) rotate(var(--machine-wind-angle)); }
  40% { background-image: var(--machine-weapon); background-size: var(--machine-weapon-size); transform: scaleX(var(--machine-facing)) rotate(var(--machine-strike-angle)); }
  65% { background-image: var(--machine-weapon); background-size: var(--machine-weapon-size); transform: scaleX(var(--machine-facing)); }
}
/* A small code-native impact/projectile effect, emitted at the weapon itself. */
.pixel-magitech-attack__effect {
  position: absolute;
  left: var(--machine-emitter-x);
  top: var(--machine-emitter-y);
  width: 8px;
  height: 8px;
  background: #bcfff4;
  box-shadow: -3px 0 #369c93, 3px 0 #369c93, 0 -3px #369c93, 0 3px #369c93;
  opacity: 0;
  animation: pixel-magitech-projectile var(--machine-duration) steps(4, end) 1 both;
}
.pixel-magitech-attack[data-kind="fire"] .pixel-magitech-attack__effect {
  background: #ffef9a;
  box-shadow: -3px 0 #ff7833, 3px 0 #ff7833, 0 -3px #ff7833, 0 3px #ff7833, -6px 0 #bb3d2c;
}
.pixel-magitech-attack[data-kind="light"] .pixel-magitech-attack__effect { background: #fffed8; box-shadow: -3px 0 #a8ebae, 3px 0 #a8ebae, 0 -3px #a8ebae, 0 3px #a8ebae; }
.pixel-magitech-attack[data-kind="leaf"] .pixel-magitech-attack__effect { background: #deff96; box-shadow: -3px 0 #66b861, 3px 0 #66b861, 0 -3px #66b861, 0 3px #66b861; }
.pixel-magitech-attack[data-kind="slash"] .pixel-magitech-attack__effect { width: 3px; height: 22px; margin-top: -11px; box-shadow: 3px -3px #4cb4b0, -3px 3px #4cb4b0; }
.pixel-magitech-attack[data-kind="punch"] .pixel-magitech-attack__effect { width: 6px; height: 6px; background: #fff5c0; box-shadow: -4px 0 #d49443, 4px 0 #d49443, 0 -4px #d49443, 0 4px #d49443; }
@keyframes pixel-magitech-projectile {
  0%, 39% { opacity: 0; transform: translate(0, 0); }
  40% { opacity: 1; transform: translate(0, 0); }
  64% { opacity: 1; transform: translate(var(--machine-shot-x), var(--machine-shot-y)); }
  65%, 100% { opacity: 0; transform: translate(var(--machine-shot-x), var(--machine-shot-y)); }
}
/* Character body deliberately retains preview.css's original 5-frame NA.
   Only equipment motion is selected from the equipped main chip. */
body.pixel-preview .unit-marker:is(.is-hidden-by-vision, .is-main-recovering, .is-separated-sub-inactive) .pixel-magitech-attack { display: none; }
@media (prefers-reduced-motion: reduce) {
  body.pixel-preview .pixel-magitech-attack { animation: none; transform: translate(var(--machine-hand-x), var(--machine-hand-y)); }
  .pixel-magitech-attack__weapon { animation: none; background-image: var(--machine-weapon); background-size: var(--machine-weapon-size); transform: scaleX(var(--machine-facing)); }
  .pixel-magitech-attack__effect { display: none; }
}