/* ハロウィン・プレオープン版：Stage10 クリア後の終了画面（finale-halloween.mjs が開く <dialog class="finale">）。
   画像は縦横比を保ったまま画面に収め（切らない）、余った所は同じ画像をぼかして敷く。
   絵の中の「Wan-Coco Garden」「また遊びにきてね！」の上に、透明の押せる範囲を重ねる（位置は画像 941×1672 に対する割合） */
dialog.finale {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden;
  background: #1b2048; color: inherit;
}
/* r16：::backdrop は透明に。終了画面（画像とぼかした背景）がフェードで出てくる間、後ろの結果の画面が見えたまま自然に入れ替わる
   （以前は不透明なネイビーの ::backdrop がフェードせずに一気に出て、無地のネイビーが見えていた） */
dialog.finale::backdrop { background: transparent; }
dialog.finale::before {
  content: ''; position: absolute; inset: -40px;
  background: url('theme/halloween/thank-you-preopen-v2.webp?v=1') center / cover no-repeat;
  filter: blur(18px) brightness(.75);
}
dialog.finale[open] { display: grid; place-items: center; animation: finale-in .45s ease-out both; }
@keyframes finale-in { from { opacity: 0; } to { opacity: 1; } }
.finale-art {
  position: relative;
  width: min(100vw, calc(100vh * 941 / 1672));
  width: min(100vw, calc(100dvh * 941 / 1672));
  aspect-ratio: 941 / 1672; max-width: 100%;
}
.finale-art img { display: block; width: 100%; height: 100%; }
.finale-art button {
  position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent; border-radius: 999px;
}
.finale-art button:focus-visible { outline: 3px solid #fff8ee; outline-offset: 2px; }
.finale-garden { left: 15.5%; top: 79.8%; width: 69%; height: 8.2%; }
.finale-close { left: 28.5%; top: 89%; width: 43%; height: 4.6%; }
/* 「Wan-Coco Garden」：押したくなるように、ときどき光がすっと横切る（絵のボタンの形に合わせた丸い枠の中だけ） */
.finale-garden { overflow: hidden; }
.finale-garden::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -30%; width: 22%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 240, .55), rgba(255, 255, 255, 0));
  transform: skewX(-18deg); animation: finale-shine 3.2s ease-in-out 1.2s infinite;
}
@keyframes finale-shine { 0% { left: -30%; } 45%, 100% { left: 115%; } }
.finale-garden:active { background: rgba(255, 255, 255, .12); }
@media (prefers-reduced-motion: reduce) { dialog.finale[open], .finale-garden::after { animation: none; } .finale-garden::after { display: none; } }