/* =====================================================================
   ドット絵（public/js/sprites）の表示
   ・<img class="px"> … にじませずに拡大（幅と高さは 元の大きさ × 整数倍 にすると、ドットがそろってきれい）
   ・.px-bob … 待機中に 1 ドット分ふわっと上下（戦闘のカードなど）
   ・.px-hit … ダメージを受けた瞬間に点滅　.px-down … 倒れた　.px-shadow … 足元の影　.px-glow … 暗い所で見やすく
   ===================================================================== */
img.px,
.px {
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
  display: inline-block;
  vertical-align: middle;
  max-width: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.px-bob { animation: pxBob 1.2s steps(1, end) infinite; }
.px-bob:nth-child(2n) { animation-delay: -.6s; }
@keyframes pxBob {
  0% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.px-hit { animation: pxHit .36s steps(1, end) 2; }
@keyframes pxHit {
  0% { filter: brightness(2.2) saturate(.2); }
  50% { filter: none; }
}

.px-down { filter: grayscale(1) brightness(.75); opacity: .55; }
.px-shadow { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.px-glow { filter: drop-shadow(0 0 1px rgba(255, 250, 230, .45)); }

/* 小さな絵（道・属性・素材・印）を文字の行に置くとき */
.px-inline { vertical-align: -0.2em; }

/* ---------------------------------------------------------------------
   景色（sceneryImage / sceneryStyle）。192×96 のドット絵を背景にして、にじませずに整数倍で拡大
   ・style="${sceneryStyle(q.scenery, 3)}" だけで足りる（背景の決まりも style に入るので、background の一括指定に負けない）
   ・URL だけ使うときは class="px-scene" ＋ style="background-image:url(…);--px-scale:3"（--px-scale が倍率。ふつう 2〜4）
     このときは同じ要素で background: の一括指定を使わない（くり返し・大きさが消える。background-color を使う）
   ・下ぞろえ・横にくり返し（景色の左右はつながっている）。下の 4 割ほどが地面
   ・上が足りないときは、background-color に sceneryInfo(id).top の色をしくと自然につながる
   --------------------------------------------------------------------- */
.px-scene {
  --px-scale: 3;
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: calc(192px * var(--px-scale)) calc(96px * var(--px-scale));
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

@media (prefers-reduced-motion: reduce) {
  .px-bob, .px-hit { animation: none; }
}