/* ============================================================
   空を小さく横切る「まぼろしのキャラ」（ui_sky_flyers()）
   画像はコマを横一列に並べたもの。steps() でコマ送り＝羽ばたき・体のうねり
   ============================================================ */
.sky { position: absolute; inset: 0 0 auto 0; height: 45%; overflow: hidden; pointer-events: none; z-index: 1; }
.sky-flyer { position: absolute; top: var(--top); left: -30%; width: var(--size); aspect-ratio: var(--ratio, 1); opacity: 0;
  animation: sky-cross var(--sec) linear var(--delay) infinite; will-change: left; filter: drop-shadow(0 6px 6px rgba(0, 40, 80, .18)); }
.sky-flyer i { position: absolute; inset: 0; background: var(--img) 0 0 / calc(var(--frames) * 100%) 100% no-repeat;
  animation: sky-flap var(--flap, .6s) steps(var(--frames), jump-none) infinite, sky-bob 2.4s ease-in-out infinite; }
.sky-flyer--left { animation-name: sky-cross-left; }
@keyframes sky-cross { 0% { left: -18%; opacity: 0; } 3% { opacity: 1; } 55% { left: 108%; opacity: 1; } 56%, 100% { left: 108%; opacity: 0; } }
@keyframes sky-cross-left { 0% { left: 108%; opacity: 0; } 3% { opacity: 1; } 55% { left: -30%; opacity: 1; } 56%, 100% { left: -30%; opacity: 0; } }
@keyframes sky-flap { from { background-position-x: 0%; } to { background-position-x: 100%; } }
@keyframes sky-bob { 50% { translate: 0 -12px; } }
@media (max-width: 720px) { .sky-flyer { width: calc(var(--size) * .6); } }
@media (prefers-reduced-motion: reduce) { .sky { display: none; } }

/* タップできる神獣（js/sky.js） */
.sky-flyer { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.sky-flyer::before { content: ""; position: absolute; inset: -18px; }   /* 小さくても押しやすいように */
.sky-flyer.is-trick { z-index: 3; }
.sky-flyer.is-trick i { --flap: .25s; animation-duration: .25s, 2.4s; }
.sky-fx { position: fixed; inset: 0; z-index: 96; pointer-events: none; overflow: hidden; }
.sky-drop { position: absolute; width: 3px; height: 16px; border-radius: 3px; background: linear-gradient(180deg, rgba(160, 220, 255, 0), #7fcfff 60%, #fff); }
.sky-bow { position: absolute; width: 46px; height: 23px; border-radius: 46px 46px 0 0; background:
  radial-gradient(circle at 50% 100%, transparent 0 9px, #a05aff 9px 11px, #44b4ff 11px 13px, #5bd46a 13px 15px, #ffd93d 15px 17px, #ff9d2e 17px 19px, #ff5a5a 19px 21px, transparent 21px); }
.sky-feather { position: absolute; width: 14px; height: 30px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  background: linear-gradient(180deg, #fff3a0, #ffc21a 35%, #ff7a1a 75%, #e8412d); box-shadow: 0 0 10px rgba(255, 180, 40, .8); }
.sky-feather::after { content: ""; position: absolute; left: 50%; top: 10%; bottom: -6px; width: 1.5px; background: rgba(140, 60, 0, .5); transform: translateX(-50%); }
.sky-spark { position: absolute; width: 12px; height: 12px; background: #fff6b0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 6px #ffd23d); }
.sky-toast { position: absolute; left: 50%; top: 16%; margin: 0; padding: 12px 22px; border-radius: 999px; white-space: nowrap; max-width: calc(100vw - 24px);
  font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 900; font-size: clamp(16px, 2.4vw, 26px); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.sky-toast--dragon { background: linear-gradient(90deg, #1f9bff, #2cc1a4); text-shadow: 0 2px 0 rgba(0, 60, 90, .4); }
.sky-toast--phoenix { background: linear-gradient(90deg, #ff5a3c, #ffb400); text-shadow: 0 2px 0 rgba(120, 40, 0, .4); }
@media (max-width: 480px) { .sky-toast { white-space: normal; text-align: center; font-size: 16px; } }