/*! works-play — /works/ の遊び。world-pixel.css の後に読む。
    絵は「ぴよ氏の冒険」images/ の実物を無改変で流用している（assets/img/works/sprites/、
    手続きで描き直さない — 同作の ART_STYLE.md の厳命）。HUD の枠と文字は UI なので CSS で組む。
    飾りの約束は3つ：aria-hidden／本文と見出しに重ねない／動きを減らす設定では歩かない。
    tools/test-works-play.mjs がこの3つと遊びの挙動（加点・金のヒヨコ・CLEAR・保持）を検査する。 */

/* ── スプライト：64×64 の4コマを横に束ねた帯。等倍か整数倍でしか見せない ── */
.wp-sprite{display:block;width:64px;height:64px;background:no-repeat 0 0/256px 64px;
  image-rendering:pixelated;animation:wp-frames .64s steps(4) infinite}
@keyframes wp-frames{to{background-position:-256px 0}}
[data-kind="chick"] .wp-sprite{background-image:url(/assets/img/works/sprites/chick.webp)}
[data-kind="golden"] .wp-sprite{background-image:url(/assets/img/works/sprites/golden.webp)}
[data-kind="mama"] .wp-sprite{background-image:url(/assets/img/works/sprites/mama.webp)}
[data-kind="owl"] .wp-sprite{background-image:url(/assets/img/works/sprites/owl.webp)}
[data-kind="enaga"] .wp-sprite{background-image:url(/assets/img/works/sprites/enaga.webp)}
[data-kind="quail"] .wp-sprite{background-image:url(/assets/img/works/sprites/quail.webp)}
[data-kind="maid"] .wp-sprite{background-image:url(/assets/img/works/sprites/maid.webp)}
[data-kind="flychick"] .wp-sprite{background-image:url(/assets/img/works/sprites/flychick.webp);animation-duration:.36s}
[data-kind="snowowl"] .wp-sprite{background-image:url(/assets/img/works/sprites/snowowl.webp);animation-duration:.36s}

/* 押したときの跳ね（コマ送りはそのまま続ける） */
.wp-sprite.is-hop{animation:wp-frames .64s steps(4) infinite,wp-hop .42s cubic-bezier(.3,.8,.4,1)}
@keyframes wp-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-26px)}}

/* ── 節の境目のレーン。前の節の下の余白にまたがって置き、横は自分で切る（はみ出さない） ── */
.wp-lane{position:absolute;left:0;right:0;top:-40px;height:96px;overflow:hidden;
  pointer-events:none;container-type:inline-size;z-index:1}
.wp-lane::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:repeating-linear-gradient(90deg,#2A2842 0 8px,#201E33 8px 16px)}
.wp-walker{position:absolute;left:0;bottom:2px;pointer-events:auto;cursor:pointer;
  animation:wp-cross var(--dur,24s) linear var(--delay,0s) infinite;will-change:transform}
.wp-walker[data-dir="l"]{animation-name:wp-cross-l}
/* 100vw は cqi を解さない古いブラウザ用の保険（後の宣言が勝つ） */
@keyframes wp-cross{from{transform:translateX(-64px)}
  to{transform:translateX(100vw);transform:translateX(100cqi)}}
@keyframes wp-cross-l{from{transform:translateX(100vw);transform:translateX(100cqi)}
  to{transform:translateX(-64px)}}
/* 金のヒヨコも同じ歩き方で、周期（works-play.js の dur）が短い＝足が速いだけ。
   以前は周期の3割しか画面にいなかったが「いない時間が長い」ので、他の子と同じく出たらすぐ戻す */

/* ── ヒーローの床：アイコンの右をぴよ氏が往復する ── */
.wp-track{position:absolute;bottom:100%;left:calc(var(--pad) + 392px);right:var(--pad);height:64px;
  container-type:inline-size;pointer-events:none}
.wp-piyo{position:absolute;left:0;bottom:0;pointer-events:auto;cursor:pointer;
  animation:wp-patrol 24s linear infinite;will-change:transform}
.wp-piyo .wp-sprite{background-image:url(/assets/img/works/sprites/piyo-walk.webp)}
.wp-piyo.is-jump .wp-sprite{background-image:url(/assets/img/works/sprites/piyo-jump.webp);
  background-size:64px 64px;animation:wp-hop .5s cubic-bezier(.3,.8,.4,1)}
/* 右へ歩き、端で振り返って左へ。向きの切り替えは一瞬（0.1%）で済ませる */
@keyframes wp-patrol{
  0%{transform:translateX(0)}
  49.9%{transform:translateX(calc(100cqi - 64px))}
  50%{transform:translateX(calc(100cqi - 64px)) scaleX(-1)}
  99.9%{transform:translateX(0) scaleX(-1)}
  100%{transform:translateX(0)}}

/* 登場キャラクターの出典。床（aria-hidden）の外に置く、このページで唯一の本物のリンク */
.wp-cast{position:absolute;right:var(--pad);bottom:30px;z-index:2;
  font-family:'DotGothic16',sans-serif;font-size:12px;line-height:1.5;color:var(--acc);
  text-shadow:2px 2px 0 #000;border-bottom:2px solid transparent;transition:border-color .2s}
.wp-cast:hover{border-bottom-color:var(--acc)}

/* ── 押したときに出るコイン／金の卵と点数 ── */
.wp-pop{position:absolute;z-index:3;display:flex;align-items:center;gap:6px;pointer-events:none;
  font-family:'Press Start 2P',monospace;font-size:11px;line-height:1;color:var(--acc);
  text-shadow:2px 2px 0 #000;white-space:nowrap;animation:wp-pop .9s ease-out forwards}
.wp-pop img{display:block;width:32px;height:32px;image-rendering:pixelated}
.wp-pop.is-gold{color:#FFE9A8;font-size:13px}
.wp-pop.is-gold img{width:64px;height:64px}
@keyframes wp-pop{0%{opacity:0;transform:translateY(0) scale(.7)}
  15%{opacity:1;transform:translateY(-8px) scale(1)}100%{opacity:0;transform:translateY(-54px)}}

/* ── 見出しの右の HUD。見出しの行を押し広げないよう絶対配置 ── */
.wp-has-hud{position:relative}
.wp-hud{position:absolute;right:0;top:-2px;display:grid;justify-items:end;gap:10px;
  font-family:'Press Start 2P',monospace;font-size:11px;line-height:1;letter-spacing:.04em;
  color:var(--ink-mid);text-shadow:2px 2px 0 #000;white-space:nowrap;pointer-events:none}
.wp-hud i{font-style:normal}
.wp-hud-row{display:flex;align-items:center;gap:14px}
.wp-stage{color:var(--acc)}
.wp-hearts{display:flex;gap:4px}
.wp-hearts img{display:block;width:16px;height:16px}
.wp-score b{font-weight:400;color:var(--ink)}
.wp-clear{display:none;color:#6CE05E}
.wp-hud.is-clear .wp-clear{display:block;animation:wp-blink 1s steps(2) infinite}
@keyframes wp-blink{50%{opacity:0}}

/* 画面外のレーンは止めておく（works-play.js が .is-off を付け外しする） */
.is-off .wp-walker,.is-off .wp-piyo,.is-off .wp-sprite{animation-play-state:paused}

/* ── スマホ：境目は1本おき、HUD は見出しの行に収まる1行、ぴよ氏はその場に立つ ── */
@media (max-width:620px){
  .wp-lane.is-odd{display:none}
  .wp-hud{top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:10px;font-size:8px}
  .wp-hud-row{gap:0}
  .wp-hearts,.wp-hud i,.wp-hud .wp-clear{display:none!important}
  .wp-hud.is-clear .wp-score b{color:#6CE05E}
  .wp-track{left:auto;width:64px}
  .wp-piyo{animation:none}
  .wp-piyo:not(.is-jump) .wp-sprite{background-image:url(/assets/img/works/sprites/piyo-idle.webp);
    background-size:64px 64px;animation:none}
  .wp-cast{font-size:11px}
}

/* ── 動きを減らす設定：誰も歩かない。押せば点は入る（出るのは点滅なしのコインだけ） ── */
@media (prefers-reduced-motion:reduce){
  /* [data-dir] は animation-name を持つので、同じ強さで打ち消す */
  .wp-walker,.wp-walker[data-dir],
  .wp-piyo,.wp-sprite,.wp-sprite.is-hop,.wp-piyo.is-jump .wp-sprite{animation:none}
  .wp-walker{transform:translateX(var(--rest,40cqi))}
  .wp-pop{animation:wp-fade .9s ease-out forwards}
  .wp-hud.is-clear .wp-clear{animation:none}
}
@keyframes wp-fade{0%{opacity:0}15%{opacity:1}100%{opacity:0}}