/* =========================================================
   遊園地：クラシックなメリーゴーランド
   屋根・回転床・支柱・馬を同じ座標系で構成し、
   遠近感と一体感を持たせる。
   ========================================================= */

.room-stage[data-scene="park"] {
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.88) 0 5%, transparent 5.5%),
    radial-gradient(circle at 28% 12%, rgba(255,255,255,.72) 0 4%, transparent 4.5%),
    linear-gradient(180deg, #9fdbff 0%, #d7f1ff 43%, #effbe9 64%, #d2eca8 82%, #b7dc86 100%);
  border-image: repeating-linear-gradient(90deg, #ff6f91 0 13px, #ffd452 13px 26px, #62c8f5 26px 39px) 13;
}

.park-set {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

/* ---------- 空の装飾 ---------- */
.park-cloud {
  position: absolute;
  width: 58px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.64);
  filter: blur(.2px);
}
.park-cloud::before,
.park-cloud::after {
  content: "";
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: inherit;
}
.park-cloud::before { left: 9px; width: 25px; height: 25px; }
.park-cloud::after { right: 8px; width: 31px; height: 31px; }
.park-cloud-a { left: 8%; top: 14%; opacity: .78; }
.park-cloud-b { right: 8%; top: 25%; transform: scale(.72); opacity: .58; }

/* ---------- 万国旗 ---------- */
.park-bunting {
  position: absolute;
  left: -2%;
  top: 3%;
  width: 104%;
  height: 19px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-top: 2px solid rgba(110,79,58,.48);
  z-index: 5;
}
.park-flag {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 15px solid var(--fc);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.14));
  animation: parkFlag 2.8s ease-in-out infinite;
  transform-origin: top center;
}
.park-flag:nth-child(3n+2) { animation-delay: .45s; }
.park-flag:nth-child(3n) { animation-delay: .9s; }
@keyframes parkFlag {
  0%,100% { transform: skewX(-2deg) scaleY(1); }
  50% { transform: skewX(4deg) scaleY(.91); }
}

/* ---------- メリーゴーランド全体 ----------
   位置・サイズ（top/width）は park-layout-fix.css が一元管理する。ここには構造だけ置く。 */
.park-carousel-world {
  position: absolute;
  left: 50%;
  aspect-ratio: 240 / 220;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center;
  isolation: isolate;
  contain: layout style; /* paint は外す：乗っているブタが回転床レイヤーに入っても切れないように */
}

.park-carousel-back,
.park-carousel-front,
.park-ride {
  position: absolute;
  inset: 0;
}
.park-carousel-back { z-index: 0; }
.park-ride { z-index: 1; overflow: visible; }
.park-carousel-front { z-index: 4; }
/* 中心ポール（回転床レイヤー内・z2）：奥(z1)の馬/ブタの前、手前(z3)の後ろ＝棒の後ろに回ると隠れる。
   上端は天幕（前垂れ）に届かせて繋げる。前垂れ(z4)が重なり部分を隠すので飛び出さない。 */
.park-pole {
  position: absolute; left: 50%; top: 47%; width: 4.4%; height: 38%;
  transform: translateX(-50%); z-index: 2; border-radius: 3px 3px 4px 4px;
  background: linear-gradient(90deg, #9b7020 0%, #d7b54b 24%, #fff5bd 52%, #f4db78 70%, #b98f2f 100%);
  box-shadow: 0 1px 3px rgba(74, 58, 28, .28);
}

.park-carousel-back svg,
.park-carousel-front svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ---------- 本体：屋根・床・支柱 ---------- */
.park-carousel-back .mc-ground-shadow {
  fill: rgba(77,65,50,.18);
  filter: blur(2.2px);
}
.park-carousel-back .mc-platform-top {
  stroke: #c7acd8;
  stroke-width: 1.3;
}
.park-carousel-back .mc-platform-back {
  fill: rgba(255,255,255,.38);
  stroke: rgba(174,145,197,.55);
  stroke-width: 1;
}
.park-carousel-back .mc-column {
  stroke: #a27c29;
  stroke-width: 1.2;
  filter: drop-shadow(2px 2px 2px rgba(74,58,28,.18));
}
.park-carousel-back .mc-column-ring {
  fill: #f5dd7e;
  stroke: #aa822d;
  stroke-width: 1;
}
.park-carousel-back .mc-roof {
  filter: drop-shadow(0 4px 3px rgba(66,63,83,.18));
}
.park-carousel-back .mc-roof-outline {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.2;
}
.park-carousel-back .mc-roof-shadow {
  fill: #d8b7cf;
  stroke: #b888ac;
  stroke-width: 1;
}
.park-carousel-back .mc-finial-pole {
  fill: none;
  stroke: #b58c2b;
  stroke-width: 3;
  stroke-linecap: round;
}
.park-carousel-back .mc-finial {
  fill: #ffd452;
  stroke: #c99424;
  stroke-width: 1.5;
}
.park-carousel-back .mc-finial-flag {
  fill: #ff6f91;
  stroke: #ca486d;
  stroke-width: 1;
}

.park-carousel-front .mc-valance {
  stroke: #ce9eb8;
  stroke-width: 1.1;
  filter: drop-shadow(0 2px 2px rgba(72,53,68,.18));
}
.park-carousel-front .mc-platform-rim {
  stroke: #785a9c;
  stroke-width: 1.2;
  filter: drop-shadow(0 3px 3px rgba(64,48,78,.23));
}
.park-carousel-front .mc-platform-trim {
  fill: none;
  stroke: rgba(255,255,255,.76);
  stroke-width: 2;
}
.park-carousel-front .mc-bulb,
.park-carousel-front .mc-platform-light {
  filter: drop-shadow(0 0 2px rgba(255,246,173,.9));
  animation: carouselLight 2.2s ease-in-out infinite;
}
.park-carousel-front .mc-platform-light { fill: #fff3a5; }
.park-carousel-front .mc-bulb:nth-child(3n+2),
.park-carousel-front .mc-platform-light:nth-child(even) { animation-delay: .7s; }
@keyframes carouselLight {
  0%,100% { opacity: .72; }
  50% { opacity: 1; }
}

/* ---------- 回る馬 ---------- */
.park-horse {
  position: absolute;
  left: 0;
  top: 0;
  /* width は park-layout-fix.css が一元管理 */
  transform-origin: center center;
  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: layout paint;
}
.park-horse svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 3px 3px rgba(75,55,73,.24));
}
.park-horse .mh-pole {
  stroke: #9b7424;
  stroke-width: 1;
}
.park-horse .mh-body,
.park-horse .mh-neck,
.park-horse .mh-head,
.park-horse .mh-ear,
.park-horse .mh-leg {
  fill: var(--horse);
  stroke: #caa8bd;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.park-horse .mh-mane,
.park-horse .mh-tail { fill: var(--mane); }
.park-horse .mh-saddle {
  fill: var(--saddle);
  stroke: rgba(65,76,116,.55);
  stroke-width: 1;
}
.park-horse .mh-blanket {
  fill: var(--blanket);
  stroke: rgba(112,92,130,.36);
  stroke-width: .9;
}
.park-horse .mh-hoof { fill: #9d7790; }
.park-horse .mh-bridle {
  fill: none;
  stroke: #ae7f45;
  stroke-width: 1.3;
  stroke-linecap: round;
}
.park-horse .mh-eye { fill: #46364c; }
.park-horse .mh-cheek { fill: #f3a2b8; opacity: .75; }

/* 乗車中は通常歩行・呼吸アニメを止め、メリーゴーランド側の滑らかな動きだけを使う。 */
.room-stage[data-scene="park"] .room-pig.carousel-riding {
  left: 0;
  top: 0;
  animation: none !important;
  transition: none !important;
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
}
.room-stage[data-scene="park"] .room-pig.carousel-riding .roompig,
.room-stage[data-scene="park"] .room-pig.carousel-riding .rp-leg-l,
.room-stage[data-scene="park"] .room-pig.carousel-riding .rp-leg-r {
  animation: none !important;
}

/* ---------- 風船 ---------- */
.park-balloon {
  position: absolute;
  width: 25px;
  height: 31px;
  z-index: 3;
}
.park-balloon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.82), var(--bc) 57%);
  box-shadow: 0 2px 3px rgba(0,0,0,.15);
}
.park-balloon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 96%;
  width: 1px;
  height: 28px;
  background: rgba(110,100,90,.48);
}
.park-balloon-l { left: 7%; top: 28%; animation: parkFloat 4.8s ease-in-out infinite; }
.park-balloon-r { right: 7%; top: 22%; animation: parkFloat 5.6s ease-in-out infinite .9s; }
@keyframes parkFloat {
  0%,100% { transform: translate3d(0,0,0) rotate(-3deg); }
  50% { transform: translate3d(0,-8px,0) rotate(3deg); }
}

/* 小画面のサイズ調整も park-layout-fix.css 側で一元管理 */

@media (prefers-reduced-motion: reduce) {
  .park-flag,
  .park-balloon-l,
  .park-balloon-r,
  .park-carousel-front .mc-bulb,
  .park-carousel-front .mc-platform-light {
    animation: none;
  }
}