/* 月（ムーンステージ）。漆黒の星空＋地球＋クレーターの銀白の地面。 */
.room-stage[data-scene="moon"] {
  background: linear-gradient(180deg,
    #060614 0%, #0b0b24 38%, #1a1a33 56%,
    #d3d3e0 57%, #c2c2d2 72%, #aeaec2 100%); /* 57%が地平線 */
}

.moon-set { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* 星空（複数のradial-gradientで小さな星を散らす） */
.moon-stars {
  position: absolute; left: 0; top: 0; width: 100%; height: 56%;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 28% 8%, #ffe9c9, transparent),
    radial-gradient(1.8px 1.8px at 41% 30%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 55% 12%, #cfe4ff, transparent),
    radial-gradient(1.5px 1.5px at 68% 26%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 82% 9%, #ffe9c9, transparent),
    radial-gradient(1.8px 1.8px at 91% 33%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 8% 44%, #cfe4ff, transparent),
    radial-gradient(1.5px 1.5px at 47% 47%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 74% 44%, #fff, transparent);
  animation: moonTwinkle 3.4s ease-in-out infinite alternate;
}
@keyframes moonTwinkle { from { opacity: .75; } to { opacity: 1; } }

/* 地球（アースライズ）：青い海＋緑の大陸＋大気の光 */
.moon-earth {
  position: absolute; right: 12%; top: 9%;
  width: clamp(56px, 17vw, 86px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #a8e6ff 0%, #55b1e8 34%, #2e7cc9 62%, #123a7a 100%);
  box-shadow: 0 0 20px rgba(120, 190, 255, .55), inset -8px -10px 18px rgba(6, 20, 60, .55);
}
.moon-earth::before, .moon-earth::after { content: ""; position: absolute; background: #5fbf6e; border-radius: 50%; opacity: .9; }
.moon-earth::before { left: 16%; top: 26%; width: 38%; height: 26%; transform: rotate(-18deg); border-radius: 60% 40% 55% 45%; }
.moon-earth::after  { left: 52%; top: 55%; width: 30%; height: 22%; transform: rotate(14deg);  border-radius: 45% 55% 40% 60%; }

/* クレーター（地面に散らす） */
.moon-crater {
  position: absolute; border-radius: 50%;
  background: radial-gradient(ellipse at 42% 34%, #bcbccd 0%, #9d9db4 58%, #8b8ba4 100%);
  box-shadow: inset 0 4px 7px rgba(40, 40, 70, .35), inset 0 -2px 4px rgba(255, 255, 255, .35);
}
.moon-crater.mc1 { left: 10%; top: 63%; width: 13%; height: 5.5%; }
.moon-crater.mc2 { left: 58%; top: 60%; width: 9%;  height: 4%; }
.moon-crater.mc3 { left: 80%; top: 72%; width: 15%; height: 6.5%; }
.moon-crater.mc4 { left: 30%; top: 82%; width: 11%; height: 5%; }
.moon-crater.mc5 { left: 3%;  top: 90%; width: 17%; height: 6.5%; }

/* ブヒ旗（鼻の旗） */
.moon-flag { position: absolute; right: 6%; top: 52%; width: clamp(26px, 8vw, 40px); }
.moon-flag svg { width: 100%; height: auto; display: block; }
.moon-flag .mf-pole { fill: #d8d8e6; }
.moon-flag .mf-flag { fill: #f27ca2; }
.moon-flag .mf-nose { fill: #e75f8e; }
.moon-flag .mf-hole { fill: #b23e66; }

/* 送迎UFO：入場時に左から右へすーっと横切って帰る */
.moon-ufo {
  position: absolute; top: 16%; left: -22%; width: clamp(44px, 13vw, 64px); z-index: 2; pointer-events: none;
  animation: moonUfoFly 4.4s ease-in-out forwards;
}
.moon-ufo svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 8px rgba(150, 230, 190, .55)); }
.moon-ufo .mu-dome { fill: rgba(180, 240, 255, .85); }
.moon-ufo .mu-body { fill: #9aa7b8; }
.moon-ufo .mu-light { fill: #ffe14d; }
@keyframes moonUfoFly {
  0%   { left: -22%; transform: translateY(0) rotate(-4deg); }
  45%  { transform: translateY(10px) rotate(3deg); }
  100% { left: 112%; transform: translateY(-6px) rotate(-3deg); }
}

/* 低重力：歩き＝ふわっと大きくバウンド（足踏みはしない） */
.room-stage[data-scene="moon"] .room-pig.walking { animation: moonHop 1.15s ease-in-out infinite; }
.room-stage[data-scene="moon"] .room-pig.walking .rp-leg-l,
.room-stage[data-scene="moon"] .room-pig.walking .rp-leg-r { animation: none; }
@keyframes moonHop {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-16px) rotate(2deg); }
}

/* うさこ：「月夜に跳ねる」高い2段ジャンプ */
.room-pig.moon-usagi-hop { animation: moonUsagiHop 1.4s ease-in-out; }
@keyframes moonUsagiHop {
  0%, 100% { transform: translateY(0); }
  26% { transform: translateY(-30px) rotate(-5deg); }
  50% { transform: translateY(0); }
  74% { transform: translateY(-22px) rotate(5deg); }
}