/* RPG test sprite sheets (100x100 frames) — assets/images/rpg-test/ */

.cq-rpg-sprite {
  /* Frames have lots of transparent padding; zoom crops into the character. */
  --cq-rpg-w: 100px;
  --cq-rpg-h: 100px;
  --cq-rpg-frames: 6;
  --cq-rpg-sheet: none;
  --cq-rpg-duration: 0.9s;
  --cq-rpg-zoom: 3.8;
  --cq-rpg-nudge-x: 0px;
  --cq-rpg-nudge-y: 12px;
  width: var(--cq-rpg-w);
  height: var(--cq-rpg-h);
  background-color: transparent;
  background-image: var(--cq-rpg-sheet);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: calc(var(--cq-rpg-w) * var(--cq-rpg-frames)) var(--cq-rpg-h);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex-shrink: 0;
  pointer-events: none;
  transform: translate(var(--cq-rpg-nudge-x), var(--cq-rpg-nudge-y)) scale(var(--cq-rpg-zoom));
  transform-origin: center center;
}

.cq-rpg-sprite--sm {
  --cq-rpg-w: 96px;
  --cq-rpg-h: 96px;
  --cq-rpg-zoom: 3.6;
  --cq-rpg-nudge-y: 10px;
}

.cq-rpg-sprite--md {
  --cq-rpg-w: 112px;
  --cq-rpg-h: 112px;
  --cq-rpg-zoom: 3.8;
  --cq-rpg-nudge-y: 12px;
}

.cq-rpg-sprite--lg {
  --cq-rpg-w: 140px;
  --cq-rpg-h: 140px;
  --cq-rpg-zoom: 4;
  --cq-rpg-nudge-y: 14px;
}

.cq-rpg-sprite--soldier-idle {
  --cq-rpg-frames: 6;
  --cq-rpg-duration: 1s;
  --cq-rpg-sheet: url('../../images/rpg-test/soldier-idle.png');
  animation: cq-rpg-sheet var(--cq-rpg-duration) steps(var(--cq-rpg-frames)) infinite;
}

.cq-rpg-sprite--soldier-walk {
  --cq-rpg-frames: 8;
  --cq-rpg-duration: 0.75s;
  --cq-rpg-sheet: url('../../images/rpg-test/soldier-walk.png');
  animation: cq-rpg-sheet var(--cq-rpg-duration) steps(var(--cq-rpg-frames)) infinite;
}

.cq-rpg-sprite--orc-idle {
  --cq-rpg-frames: 6;
  --cq-rpg-duration: 0.85s;
  --cq-rpg-sheet: url('../../images/rpg-test/orc-idle.png');
  --cq-rpg-zoom: 4.3;
  --cq-rpg-nudge-x: -6px;
  --cq-rpg-nudge-y: 4px;
  animation: cq-rpg-sheet var(--cq-rpg-duration) steps(var(--cq-rpg-frames)) infinite;
}

.cq-rpg-sprite--orc-walk {
  --cq-rpg-frames: 8;
  --cq-rpg-duration: 0.7s;
  --cq-rpg-sheet: url('../../images/rpg-test/orc-walk.png');
  --cq-rpg-zoom: 4.3;
  --cq-rpg-nudge-x: -6px;
  --cq-rpg-nudge-y: 4px;
  animation: cq-rpg-sheet var(--cq-rpg-duration) steps(var(--cq-rpg-frames)) infinite;
}

@keyframes cq-rpg-sheet {
  from {
    background-position: 0 0;
  }
  to {
    background-position: calc(-1 * var(--cq-rpg-w) * var(--cq-rpg-frames)) 0;
  }
}

/* Fit animated sheets into existing portrait / hero frames */
.cq-hero-card__sprite:has(.cq-rpg-sprite),
.pixel-dialogue__portrait:has(.cq-rpg-sprite) {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 70%, rgba(77, 150, 255, 0.18), transparent 65%),
              var(--bg-dark);
}

.cq-hero-card__sprite:has(.cq-rpg-sprite) {
  width: 128px;
  height: 128px;
}

.cq-hero-card__sprite .cq-rpg-sprite--sm {
  --cq-rpg-w: 100px;
  --cq-rpg-h: 100px;
  --cq-rpg-zoom: 3.6;
  --cq-rpg-nudge-y: 10px;
}

.pixel-dialogue__portrait:has(.cq-rpg-sprite) {
  width: 128px;
  height: 128px;
}

.pixel-dialogue__portrait .cq-rpg-sprite--md {
  --cq-rpg-w: 100px;
  --cq-rpg-h: 100px;
  --cq-rpg-zoom: 3.9;
  --cq-rpg-nudge-y: 12px;
}

/* Orc sheets: keep axe inside the frame with right-side breathing room */
.pixel-dialogue__portrait .cq-rpg-sprite--orc-idle,
.pixel-dialogue__portrait .cq-rpg-sprite--orc-walk {
  --cq-rpg-zoom: 4.2;
  --cq-rpg-nudge-x: -8px;
  --cq-rpg-nudge-y: 2px;
}

.cq-hero-card__sprite:has(.cq-rpg-sprite) img,
.pixel-dialogue__portrait:has(.cq-rpg-sprite) img {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .cq-rpg-sprite {
    animation: none !important;
    background-position: 0 0 !important;
  }
}

@media (max-width: 479px) {
  .pixel-dialogue__portrait:has(.cq-rpg-sprite) {
    width: 88px;
    height: 88px;
  }

  .pixel-dialogue__portrait .cq-rpg-sprite--md {
    --cq-rpg-w: 80px;
    --cq-rpg-h: 80px;
    --cq-rpg-zoom: 3.4;
    --cq-rpg-nudge-y: 8px;
  }

  .pixel-dialogue__portrait .cq-rpg-sprite--orc-idle,
  .pixel-dialogue__portrait .cq-rpg-sprite--orc-walk {
    --cq-rpg-zoom: 3.8;
    --cq-rpg-nudge-x: -6px;
    --cq-rpg-nudge-y: 0px;
  }
}