/* キャラクター待機モーション（リン・クウ・ラン）
   スマホ上部の帯 .mobile-dogs の静止画と同じ枠に、3匹を並べて表示する。飾りだけで、タップは受けない。
   画像は1匹1枚のスプライト（同じ大きさのセルが横に6コマ）。基準のコマで静止しているのが基本。
   idle-dogs.mjs が、まばたき・ごく小さい呼吸・ときどきの小さな仕草（首かしげ・にっこり等）を、3匹ばらばらに入れる。
   読み込みが終わるまでは元の静止画のまま（.idle-ready が付いてから入れ替える）。 */
.idle-dogs { display: none; }
.mobile-dogs.idle-ready > img { display: none; }
.mobile-dogs.idle-ready > .idle-dogs {
  --u: 1px;                 /* 375px幅の時の基準。350px以下は元の静止画と同じく 0.88倍 */
  display: block; position: relative; flex: 0 0 auto;
  width: calc(125 * var(--u)); height: 69px;
  pointer-events: none;
}
@media (max-width: 350px) {
  .mobile-dogs.idle-ready > .idle-dogs { --u: .88px; }
}

/* 1匹分の枠。大きさは「見えている面積」で合わせた：クウ＝ラン、リンだけ約8%大きい。
   bottom は3匹の足元が同じ線にそろう値（画像の下の余白の差を打ち消す）。足元の柔らかい影は枠に付けて動かさない */
.idle-dog { position: absolute; display: block; }
.idle-dog::before {
  content: ''; position: absolute; left: 14%; right: 14%; bottom: -2px; height: 6px; border-radius: 50%;
  background: radial-gradient(closest-side, #5e46705e, #5e467000);
}
.idle-rin { left: 0; bottom: calc(4.6 * var(--u)); width: calc(51.3 * var(--u)); height: calc(53.5 * var(--u)); z-index: 2; }
.idle-kuu { left: calc(39.8 * var(--u)); bottom: calc(3.2 * var(--u)); width: calc(48.1 * var(--u)); height: calc(53.1 * var(--u)); z-index: 1; }
.idle-ran { right: 0; bottom: calc(4.7 * var(--u)); width: calc(46 * var(--u)); height: calc(50.8 * var(--u)); z-index: 2; }

/* 仕草（首かしげ・左右を見る・ゆらゆら）は .idle-pose、呼吸とコマの切り替えは .idle-sprite。別々の要素なので動きが干渉しない */
.idle-pose, .idle-sprite { position: absolute; inset: 0; display: block; will-change: transform; }
.idle-pose { transform-origin: 50% 92%; }
.idle-sprite {
  background: var(--sheet) no-repeat var(--base) 0 / 600% 100%;
  transform-origin: 50% 100%;
}
/* コマ：基準（目を開けている）／まばたき・にっこり（目を閉じている）／ウインク（クウだけ）。位置は 0%, 20%, … 100% */
.idle-dog.is-blink .idle-sprite, .idle-dog.is-smile .idle-sprite { background-position: var(--blink) 0; }
.idle-dog.is-wink .idle-sprite { background-position: var(--wink) 0; }
.idle-rin { --sheet: url('idle-rin-v1.webp'); --base: 80%; --blink: 40%; --wink: 40%; }
.idle-kuu { --sheet: url('idle-kuu-v1.webp'); --base: 0%;  --blink: 60%; --wink: 40%; }
.idle-ran { --sheet: url('idle-ran-v1.webp'); --base: 0%;  --blink: 100%; --wink: 100%; }