/* r25（2026-10-11）：最初の音の選択（♪ON／♪OFF）の画面だけを、落ち着いたネイビーグレーの夜空に。
   対象は #modal:has(#playWithSound) だけ（Tap to Start・結果画面・ステージ選択などは対象外）。
   飾り（空・月・雲・星）は sound-night-v1.mjs が #modal の一番奥に置く .sn-sky の中だけ。押せない（pointer-events: none）。
   ボタン（♪ON・♪OFF・×）の形・押した時の動き・処理は今まで通り。色だけ夜空に合わせて見やすく。 */
#modal:has(#playWithSound) {
  border-color: #e9c98f;
  background: #2f3653;
  box-shadow: inset 0 1px 1px #ffffff2e, 0 5px 0 #8c6fa6, 0 25px 90px #0d122888;
}
#modal:has(#playWithSound)::backdrop { background: #1a2034aa; }
#modal:has(#playWithSound) > :not(.sn-sky) { position: relative; z-index: 1; }
#modal:has(#playWithSound) .close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 10px;
  color: #6b3f97; background: #fbf0d6; box-shadow: 0 2px 0 #c7a46f, 0 3px 10px #0004;
  font-size: 22px; line-height: 34px;
}

/* 夜空：ネイビーグレーのグラデーション、地平線に近いほど少しラベンダー */
.sn-sky {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit;
  pointer-events: none; display: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% 78%, #a98fc63a, transparent 70%),
    linear-gradient(180deg, #252b45 0%, #2f3756 42%, #464a6e 74%, #5d5a7f 100%);
}
#modal:has(#playWithSound) .sn-sky { display: block; }

/* 遠くの小さな星（動かない）：ごく薄い点を散らす */
.sn-dust {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff8 50%, transparent 52%),
    radial-gradient(1px 1px at 27% 9%, #fff7 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 46% 15%, #fffa 50%, transparent 52%),
    radial-gradient(1px 1px at 61% 7%, #fff6 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 74% 22%, #fff8 50%, transparent 52%),
    radial-gradient(1px 1px at 88% 30%, #fff6 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 7% 44%, #fff7 50%, transparent 52%),
    radial-gradient(1px 1px at 94% 52%, #fff6 50%, transparent 52%),
    radial-gradient(1px 1px at 36% 4%, #fff5 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 57% 27%, #fff6 50%, transparent 52%);
}

/* 三日月：左上。やわらかい光の輪の中に、内側の影で欠けた形を作る */
.sn-moon-glow {
  position: absolute; left: -2px; top: -6px; width: 104px; height: 104px; border-radius: 50%;
  background: radial-gradient(closest-side, #ffe7a866, #ffe7a822 55%, transparent);
}
.sn-moon {
  position: absolute; left: 28px; top: 20px; width: 44px; height: 44px; border-radius: 50%;
  box-shadow: inset 11px -5px 0 0 #ffe2a0;
  filter: drop-shadow(0 0 6px #ffe2a0aa);
  transform: rotate(-18deg);
}

/* やわらかい雲：ふわふわの丸を重ねた雲（上側が少し明るい）。3匹の後ろの地平線と、下の両脇に。動かない */
.sn-cloud { position: absolute; filter: blur(2.5px); }
.sn-cloud::before, .sn-cloud::after { content: ''; position: absolute; inset: 0; }
.sn-cloud {
  background:
    radial-gradient(ellipse 22% 40% at 18% 62%, var(--c) 97%, transparent 100%),
    radial-gradient(ellipse 26% 52% at 40% 48%, var(--c) 97%, transparent 100%),
    radial-gradient(ellipse 24% 46% at 63% 55%, var(--c) 97%, transparent 100%),
    radial-gradient(ellipse 20% 36% at 83% 66%, var(--c) 97%, transparent 100%),
    radial-gradient(ellipse 48% 30% at 50% 82%, var(--c) 97%, transparent 100%);
}
.sn-cloud::before {   /* 上の縁がほんのり明るい */
  background:
    radial-gradient(ellipse 24% 36% at 40% 40%, var(--hi) 0%, transparent 70%),
    radial-gradient(ellipse 20% 30% at 64% 46%, var(--hi) 0%, transparent 70%);
}
.sn-cloud.back1 { --c: #4e5478c8; --hi: #8d88b866; left: -10%; top: 30%; width: 62%; height: 22%; }
.sn-cloud.back2 { --c: #565b80c0; --hi: #9a93c25e; right: -12%; top: 26%; width: 66%; height: 24%; }
.sn-cloud.left  { --c: #74709cd0; --hi: #c2b5e070; left: -16%; bottom: 14%; width: 52%; height: 24%; }
.sn-cloud.right { --c: #7a75a2d0; --hi: #c8bbe470; right: -18%; bottom: 18%; width: 56%; height: 25%; }
.sn-cloud.bottom { --c: #8580ace0; --hi: #d4c8ec70; left: 6%; bottom: -8%; width: 88%; height: 26%; }
/* 3匹の後ろのやわらかい光と、足元の明るい雲 */
.sn-aura {
  position: absolute; left: 50%; width: 96%; height: 34%; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, #f2d9a83a, #c9aee022 55%, transparent);
}
.sn-ground {
  position: absolute; left: 50%; width: 92%; height: 18%; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, #ddd0f080, #b7a3d830 60%, transparent);
}
/* 四隅を少し暗く（夜の奥行き） */
.sn-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 60%, #161a2e88 100%); }
/* いつも見えている星（形のある小さな星）。ふわっと光る */
.sn-star {
  position: absolute; width: var(--z, 9px); height: var(--z, 9px); margin: calc(var(--z, 9px) / -2) 0 0 calc(var(--z, 9px) / -2);
  background: #ffe9ad; filter: drop-shadow(0 0 3px #ffdf8f);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
/* キランと輝く星（sound-night-v1.mjs が 1〜数個ずつ、場所とタイミングをばらばらに出す） */
.sn-twinkle {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; opacity: 0;
  background:
    radial-gradient(closest-side, #fffbe9, #ffe9a8cc 35%, transparent 70%),
    linear-gradient(90deg, transparent 44%, #fff6d0 50%, transparent 56%),
    linear-gradient(0deg, transparent 44%, #fff6d0 50%, transparent 56%);
  filter: drop-shadow(0 0 4px #ffe6a0);
}

/* 3匹：既存の切り分け画像（idle-*-halloween-v1.webp）を、元の絵（720×360）と同じ位置・大きさで重ねる。
   枠の大きさと contain の計算は今の .modalimg（260×142、350px以下は 238×136）と同じなので、止まっている時は元の絵とぴったり同じ */
.sn-dogs {
  --w: 260px; --h: 142px;
  --s: calc(var(--w) / 720);
  --y: calc((var(--h) - 360 * var(--s)) / 2);
  grid-column: 1 / -1; justify-self: center; position: relative;
  width: var(--w); height: var(--h); margin-top: 5px;
}
@media (max-width: 350px) { .sn-dogs { --w: 238px; --h: 136px; } }
#modal:has(#playWithSound) .sn-dogs .modalimg { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.sn-dogs.sn-ready .modalimg { opacity: 0; }
.sn-dog { position: absolute; display: none; bottom: calc(var(--y) + 10 * var(--s)); pointer-events: none; }
.sn-dogs.sn-ready .sn-dog { display: block; }
.sn-dog.rin { left: calc(46 * var(--s));  width: calc(266 * var(--s)); height: calc(330 * var(--s)); z-index: 2; }
.sn-dog.kuu { left: calc(268 * var(--s)); width: calc(206 * var(--s)); height: calc(264 * var(--s)); z-index: 1; }
.sn-dog.ran { left: calc(436 * var(--s)); width: calc(238 * var(--s)); height: calc(260 * var(--s)); z-index: 2; }
.sn-pose, .sn-body { position: absolute; inset: 0; display: block; will-change: transform; }
.sn-pose { transform-origin: 50% 96%; }
.sn-body { background: no-repeat 0 0 / 100% 100%; transform-origin: 50% 100%; animation: sn-breath var(--d, 3.6s) ease-in-out var(--delay, 0s) infinite; }
.sn-dog.rin .sn-body { background-image: url('idle-rin-halloween-v1.webp'); --d: 3.4s; --delay: -0.4s; }
.sn-dog.kuu .sn-body { background-image: url('idle-kuu-halloween-v1.webp'); --d: 3.9s; --delay: -1.8s; }
.sn-dog.ran .sn-body { background-image: url('idle-ran-halloween-v1.webp'); --d: 3.65s; --delay: -2.7s; }
/* ゆっくり呼吸：ほんの少し持ち上がって、胸がふくらむように縦にわずかに伸びる（形が崩れない量） */
@keyframes sn-breath {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-1.2px) scale(1.004, 1.016); }
}
@media (prefers-reduced-motion: reduce) {
  .sn-body { animation: none; }
  .sn-twinkle { display: none; }
}