/* =========================================================
   遊園地：サイズ・前後関係・軽量表示
   ========================================================= */

/* 広場を占有しすぎないサイズを維持する。 */
.room-stage[data-scene="park"] .park-carousel-world {
  top: 51%;
  width: clamp(198px, 70%, 302px);
}

.room-stage[data-scene="park"] .park-horse {
  width: 25%;
}

/*
 * メリーゴーランド全体を中間レイヤーへ置く。
 * 上側を歩くブタとどんぐりは遊具の奥、下側を歩くブタは手前になる。
 */
.room-stage[data-scene="park"] .park-set {
  z-index: 3;
}

.room-stage[data-scene="park"] .room-pig.park-depth-back:not(.carousel-riding) {
  z-index: 2;
}

.room-stage[data-scene="park"] .room-pig.park-depth-front:not(.carousel-riding) {
  z-index: 6;
}

/* どんぐりは拾い物なので遊具(z3)に隠さない（見えて・タップできることを優先） */
.room-stage[data-scene="park"] .room-acorn {
  z-index: 4;
}

/* 乗車待ちのブタは乗り場へ近づく間だけ手前に表示する。 */
.room-stage[data-scene="park"] .room-pig.park-depth-front:not(.carousel-riding) .roompig {
  filter: drop-shadow(0 2px 2px rgba(80,40,55,.27));
}

/* ---------- 5匹以上のときの軽量表示 ---------- */
.room-stage[data-scene="park"].park-performance-lite .park-flag,
.room-stage[data-scene="park"].park-performance-lite .park-balloon,
.room-stage[data-scene="park"].park-performance-lite .mc-bulb,
.room-stage[data-scene="park"].park-performance-lite .mc-platform-light {
  animation: none !important;
}

/* 馬は5頭ともつねに表示する（省略するとデザインが欠けて見え、
   見えない馬にブタが乗ることもあるため、軽量化はアニメ・影の停止で行う）。 */

.room-stage[data-scene="park"].park-performance-lite .park-horse svg,
.room-stage[data-scene="park"].park-performance-lite .mc-roof,
.room-stage[data-scene="park"].park-performance-lite .mc-valance,
.room-stage[data-scene="park"].park-performance-lite .mc-platform-rim,
.room-stage[data-scene="park"].park-performance-lite .mc-column,
.room-stage[data-scene="park"].park-performance-lite .roompig {
  filter: none !important;
}

.room-stage[data-scene="park"].park-performance-lite .park-cloud {
  opacity: .42;
  filter: none;
}

/* GPU合成対象を回転する馬と乗車中のブタだけに限定する。 */
.room-stage[data-scene="park"] .park-horse,
.room-stage[data-scene="park"] .room-pig.carousel-riding {
  will-change: transform;
}

.room-stage[data-scene="park"] .room-pig:not(.carousel-riding) {
  will-change: auto;
}

@media (max-width: 390px) {
  .room-stage[data-scene="park"] .park-carousel-world {
    top: 52%;
    width: 73%;
  }

  .room-stage[data-scene="park"] .park-horse {
    width: 26%;
  }
}