/* 퍼즐 화면 배경 모듈 스타일 */
.scene { position: fixed; z-index: -1; top: 0; bottom: 0; left: 50%; width: min(100%, 520px); transform: translateX(-50%); overflow: hidden; background: center / cover no-repeat; pointer-events: none; }
/* 그림이 없을 때의 월드별 바탕 */
.scene.w1 { background-color: #eaf6e4; } .scene.w1:not(.has-art) { background-image: linear-gradient(#dff1ff 0, #fff7f2 30%, #fff7f2 72%, #d9f0c9 100%); }
.scene.w2 { background-color: #ffeef2; } .scene.w2:not(.has-art) { background-image: linear-gradient(#ffdfe9 0, #fff7f2 30%, #fff7f2 72%, #ffd3df 100%); }
.scene.w3 { background-color: #e9f2e2; } .scene.w3:not(.has-art) { background-image: linear-gradient(#cfe6c9 0, #f6f7ea 30%, #f6f7ea 72%, #c9dfbd 100%); }
.scene.w4 { background-color: #e8f4ff; } .scene.w4:not(.has-art) { background-image: linear-gradient(#cfe8ff 0, #fff7f2 30%, #fff7f2 72%, #f6e6c8 100%); }
.scene.w5 { background-color: #efe9fb; } .scene.w5:not(.has-art) { background-image: linear-gradient(#d2c6f2 0, #f6f0fb 32%, #f6f0fb 72%, #dcd6ee 100%); }
.scene.w6 { background-color: #eef5fc; } .scene.w6:not(.has-art) { background-image: linear-gradient(#d6e6f7 0, #f8fbff 30%, #f8fbff 72%, #ffffff 100%); }
/* 보드가 놓이는 가운데는 살짝 밝혀서 그림이 판을 방해하지 않게 한다 */
.sc-veil { position: absolute; inset: 0; background: radial-gradient(ellipse 85% 44% at 50% 52%, rgba(255, 251, 247, .78) 0, rgba(255, 251, 247, .5) 55%, rgba(255, 251, 247, 0) 100%); }

.sc-p { position: absolute; display: block; will-change: transform, opacity; }
/* 구름: 천천히 가로질러 흐른다 */
.sc-cloud { left: 0; width: 28%; aspect-ratio: 2.6; background: #fff; border-radius: 999px; filter: blur(.5px); animation: sc-drift var(--d) linear var(--delay) infinite; }
.sc-cloud::before, .sc-cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.sc-cloud::before { width: 46%; aspect-ratio: 1; left: 14%; top: -52%; }
.sc-cloud::after { width: 36%; aspect-ratio: 1; right: 16%; top: -34%; }
@keyframes sc-drift { from { transform: translateX(-140%) scale(var(--s)); } to { transform: translateX(480%) scale(var(--s)); } }
/* 꽃잎·낙엽·눈: 흔들리며 떨어진다 */
.sc-petal, .sc-leaf, .sc-snow { top: -6%; animation: sc-fall var(--d) linear var(--delay) infinite; }
.sc-petal { width: 13px; height: 10px; background: linear-gradient(135deg, #ffd0dc, #ff9fbb); border-radius: 80% 10% 80% 10%; }
.sc-leaf { width: 14px; height: 9px; background: linear-gradient(135deg, #cfe6a8, #8fbf6e); border-radius: 80% 10% 80% 10%; }
.sc-snow { width: 9px; height: 9px; background: #fff; border-radius: 50%; box-shadow: 0 0 6px rgba(255, 255, 255, .9), 0 0 0 1px rgba(170, 195, 225, .25); }
@keyframes sc-fall {
  0% { transform: translate3d(0, 0, 0) rotate(0) scale(var(--s)); }
  25% { transform: translate3d(var(--sway), 27vh, 0) rotate(calc(var(--spin) * .25)) scale(var(--s)); }
  50% { transform: translate3d(calc(var(--sway) * -.6), 54vh, 0) rotate(calc(var(--spin) * .5)) scale(var(--s)); }
  75% { transform: translate3d(var(--sway), 81vh, 0) rotate(calc(var(--spin) * .75)) scale(var(--s)); }
  100% { transform: translate3d(0, 110vh, 0) rotate(var(--spin)) scale(var(--s)); }
}
/* 반딧불: 떠다니며 깜빡인다 */
.sc-firefly { width: 8px; height: 8px; border-radius: 50%; background: #fff6b0; box-shadow: 0 0 10px 4px rgba(255, 233, 120, .7); animation: sc-wander var(--d) ease-in-out var(--delay) infinite alternate, sc-blink calc(var(--d) * .37) ease-in-out var(--delay) infinite; }
@keyframes sc-wander { from { transform: translate(0, 0) scale(var(--s)); } to { transform: translate(var(--dx), var(--dy)) scale(var(--s)); } }
@keyframes sc-blink { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
/* 별과 반짝임 */
.sc-star, .sc-glint { width: 12px; height: 12px; background: #fff7c2; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: sc-twinkle var(--d) ease-in-out var(--delay) infinite; }
.sc-glint { background: #fff; }
@keyframes sc-twinkle { 0%, 100% { opacity: .15; transform: scale(calc(var(--s) * .5)) rotate(0); } 50% { opacity: 1; transform: scale(var(--s)) rotate(45deg); } }
/* 김과 물방울: 아래에서 피어오른다 */
.sc-steam, .sc-bubble { bottom: 4%; animation: sc-rise var(--d) ease-out var(--delay) infinite; }
.sc-steam { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, 0) 70%); }
.sc-bubble { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .95); background: rgba(255, 255, 255, .25); }
@keyframes sc-rise { 0% { opacity: 0; transform: translate(0, 0) scale(calc(var(--s) * .6)); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--sway), -26vh) scale(calc(var(--s) * 1.5)); } }
/* 나비: 굽이치며 날고 날개를 파닥인다 */
.sc-butterfly { left: 0; width: 18px; height: 14px; filter: hue-rotate(var(--hue)); animation: sc-flutter var(--d) linear var(--delay) infinite; }
.sc-butterfly b { position: absolute; top: 0; width: 50%; height: 100%; background: linear-gradient(135deg, #ffe08a, #ffb0c8); animation: sc-flap .28s ease-in-out infinite alternate; }
.sc-butterfly b:first-child { left: 0; border-radius: 80% 20% 40% 80%; transform-origin: 100% 50%; }
.sc-butterfly b:last-child { right: 0; border-radius: 20% 80% 80% 40%; transform-origin: 0 50%; animation-direction: alternate-reverse; }
@keyframes sc-flap { from { transform: scaleX(1); } to { transform: scaleX(.25); } }
@keyframes sc-flutter {
  0% { transform: translate(-8vw, 0) rotate(8deg); } 20% { transform: translate(18vw, -4vh) rotate(-6deg); } 40% { transform: translate(42vw, 2vh) rotate(10deg); }
  60% { transform: translate(64vw, -5vh) rotate(-8deg); } 80% { transform: translate(86vw, 1vh) rotate(6deg); } 100% { transform: translate(112vw, -3vh) rotate(0); }
}

/* 구경 냥이: 보드 틀 위에 걸터앉는다 */
.game .frame { position: relative; }
.scene-pal { position: absolute; right: 7%; bottom: calc(100% - 7px); width: 22%; aspect-ratio: 1; z-index: 2; cursor: pointer; }
.sp-body { position: absolute; inset: 0; transform-origin: 50% 100%; animation: sp-breathe 3.4s ease-in-out infinite; }
.sp-img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.sp-img .cat { width: 100%; height: 100%; }
.sp-img.sp-sit { transform: translateY(6.8%); }
.sp-img.sp-sleep { transform-origin: 50% 96%; transform: translateY(3.9%) scale(.92); }
.sp-body[data-pose="sit"] .sp-sit, .sp-body[data-pose="sleep"] .sp-sleep { opacity: 1; }
.sp-body:not(:has(.sp-sleep))[data-pose="sleep"] .sp-sit { opacity: 1; }
@keyframes sp-breathe { 50% { transform: scale(1.015, .97); } }
.sp-body.r-hop { animation: sp-hop .5s cubic-bezier(.3, 1.4, .5, 1); }
.sp-body.r-nod { animation: sp-nod .36s ease-out; }
.sp-body.r-shake { animation: sp-shake .5s ease-in-out; }
.sp-body.r-cheer { animation: sp-cheer .62s ease-in-out 4; }
@keyframes sp-hop { 0% { transform: scale(1.08, .86); } 40% { transform: translateY(-34%) scale(.95, 1.1); } 78% { transform: translateY(0) scale(1.1, .86); } 100% { transform: none; } }
@keyframes sp-nod { 40% { transform: scale(1.05, .92) rotate(4deg); } }
@keyframes sp-shake { 20% { transform: translateX(-7%) rotate(-7deg); } 45% { transform: translateX(7%) rotate(7deg); } 70% { transform: translateX(-4%) rotate(-4deg); } }
@keyframes sp-cheer { 0%, 100% { transform: scale(1.08, .88); } 45% { transform: translateY(-46%) scale(.94, 1.12) rotate(-6deg); } 60% { transform: translateY(-40%) scale(.96, 1.08) rotate(6deg); } }
.scene-say { position: absolute; left: 50%; bottom: 92%; font: 400 17px var(--display); color: #c2527a; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff; white-space: nowrap; pointer-events: none; animation: sc-say 1.5s ease-out forwards; }
@keyframes sc-say { from { opacity: 0; transform: translate(-50%, 6px) scale(.6); } 18% { opacity: 1; transform: translate(-50%, -4px) scale(1); } 70% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -20px); } }
@media (prefers-reduced-motion: reduce) { .sc-p, .sp-body { animation: none !important; } }