/* 게임 화면: 계절 하늘, 떨어지는 음식, 받아먹는 캐릭터 */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(130% 70% at 50% 0%, #3a2a55 0%, #14151c 62%); transition: background 0.8s ease; }
.sky__sun { position: absolute; width: 140px; height: 140px; right: 8%; top: 9%; border-radius: 50%; opacity: 0; transition: opacity 0.8s, background 0.8s; }
.hills { position: absolute; left: -10%; right: -10%; bottom: 0; height: 34%; opacity: 0; transition: opacity 0.8s, background 0.8s;
  background: radial-gradient(60% 70% at 20% 100%, var(--hill2, #5bb86a) 60%, transparent 61%), radial-gradient(70% 80% at 85% 100%, var(--hill2, #5bb86a) 60%, transparent 61%), radial-gradient(90% 55% at 50% 100%, var(--hill1, #79d07f) 70%, transparent 71%); }
body[data-season="spring"] .sky { background: linear-gradient(180deg, #ffc9de 0%, #ffe6ef 55%, #fff6f9 100%); }
body[data-season="summer"] .sky { background: linear-gradient(180deg, #5cc4ff 0%, #a8e2ff 55%, #e2f6ff 100%); }
body[data-season="autumn"] .sky { background: linear-gradient(180deg, #ff9f5a 0%, #ffcf98 55%, #fff0dc 100%); }
body[data-season="winter"] .sky { background: linear-gradient(180deg, #7f9cc9 0%, #bccde6 55%, #eef3fb 100%); }
body[data-season="spring"] .hills { opacity: 1; --hill1: #9ee39a; --hill2: #74c97a; }
body[data-season="summer"] .hills { opacity: 1; --hill1: #6fd36f; --hill2: #3fae55; }
body[data-season="autumn"] .hills { opacity: 1; --hill1: #e6a24c; --hill2: #c97b2e; }
body[data-season="winter"] .hills { opacity: 1; --hill1: #ffffff; --hill2: #dbe6f5; }
body[data-season="spring"] .sky__sun { opacity: 1; background: radial-gradient(circle, #fff 0%, #ffe9a8 45%, rgba(255,233,168,0) 70%); }
body[data-season="summer"] .sky__sun { opacity: 1; background: radial-gradient(circle, #fffbe0 0%, #ffd23f 40%, rgba(255,210,63,0) 70%); }
body[data-season="autumn"] .sky__sun { opacity: 1; background: radial-gradient(circle, #fff1d6 0%, #ff8a3d 42%, rgba(255,138,61,0) 70%); }
body[data-season="winter"] .sky__sun { opacity: 0.7; background: radial-gradient(circle, #fff 0%, #e8f0ff 45%, rgba(232,240,255,0) 70%); }
/* 계절 입자: 꽃잎·반짝이·낙엽·눈 */
.sky__fx { position: absolute; inset: 0; }
.pt { position: absolute; top: -24px; animation: fall linear infinite; }
.pt--petal { width: 12px; height: 9px; border-radius: 80% 0 80% 0; background: #ff9fc3; }
.pt--spark { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff; animation-name: float-up; top: auto; bottom: -10px; }
.pt--leaf { width: 14px; height: 10px; border-radius: 100% 0 100% 0; background: #e2632b; }
.pt--snow { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.9); }
@keyframes fall { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(30px, 55vh) rotate(180deg); } 100% { transform: translate(-10px, 110vh) rotate(360deg); } }
@keyframes float-up { from { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-90vh); opacity: 0; } }

/* 게임 화면 틀 */
.screen--play { padding: max(48px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom)); height: 100vh; height: 100dvh; min-height: 0; color: #2a2236; }
.hud { width: 100%; }
.hud__year { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; height: 10px; }
.hud__year span { border-radius: 99px; background: rgba(0,0,0,0.12); }
.hud__year span[data-s="spring"] { background: #ff9fc3; } .hud__year span[data-s="summer"] { background: #4fb7f0; } .hud__year span[data-s="autumn"] { background: #f0913c; } .hud__year span[data-s="winter"] { background: #9db4d8; }
.hud__year i { position: absolute; top: -5px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid #2a2236; transform: translateX(-50%); transition: left 0.5s cubic-bezier(0.3, 1.3, 0.5, 1); }
.hud__row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 14px; font-weight: 800; }
.hud__season { padding: 2px 10px; border-radius: 99px; background: rgba(255,255,255,0.7); }
.hud__bag { padding: 2px 10px; border-radius: 99px; background: rgba(42,34,54,0.85); color: #fff; }
.hud__bag b { color: var(--sun); font-variant-numeric: tabular-nums; }
.caption { width: 100%; text-align: center; margin-top: 8px; }
.caption__time { margin: 0; font-size: 13.5px; font-weight: 800; opacity: 0.7; }
.caption__q { margin: 2px 0 0; font-size: clamp(24px, 7vw, 30px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; }
.caption__hint { margin: 4px 0 0; font-size: 13px; font-weight: 700; opacity: 0.65; }
.caption__hint[hidden] { display: block; visibility: hidden; }
.field { position: relative; width: 100%; flex: 1; min-height: 200px; }
.food { position: absolute; top: 0; left: 0; width: 25%; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; will-change: transform; }
.food img { width: min(100px, 24vw); height: min(100px, 24vw); filter: drop-shadow(0 10px 8px rgba(0,0,0,0.22)); transition: transform 0.12s; }
.food span { margin-top: -4px; padding: 3px 9px; border-radius: 99px; background: #fff; color: #2a2236; font-weight: 900; font-size: 14px; box-shadow: 0 3px 0 rgba(0,0,0,0.15); white-space: nowrap; }
.food:active img { transform: scale(1.12); }
.food.is-gone { opacity: 0; transform: scale(0.4) !important; transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
.ground { position: relative; width: 100%; height: 132px; flex: none; }
.props { position: absolute; inset: 0; pointer-events: none; }
.props img { position: absolute; bottom: 14px; }
.hero { position: absolute; bottom: 8px; left: 50%; width: 128px; margin-left: -64px; transition: transform 0.28s cubic-bezier(0.3, 1.4, 0.5, 1); }
.hero img { display: block; width: 128px; height: 128px; filter: drop-shadow(0 12px 8px rgba(0,0,0,0.25)); transform-origin: 50% 100%; }
.hero.is-hop img { animation: hop 0.42s ease; }
.hero.is-chomp img { animation: chomp 0.36s ease; }
@keyframes hop { 0% { transform: scale(1, 1); } 25% { transform: translateY(-34px) scale(0.92, 1.08); } 60% { transform: translateY(0) scale(1.1, 0.88); } 100% { transform: none; } }
@keyframes chomp { 0% { transform: scale(1); } 40% { transform: scale(1.18, 0.86); } 100% { transform: scale(1); } }
.hero__say { position: absolute; left: 50%; top: -6px; transform: translate(-50%, 0) scale(0); padding: 3px 10px; border-radius: 12px; background: #fff; color: #2a2236; font-weight: 900; font-size: 16px; box-shadow: 0 3px 0 rgba(0,0,0,0.15); transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1); white-space: nowrap; }
.hero.is-chomp .hero__say { transform: translate(-50%, -20px) scale(1); }
.got { position: fixed; left: 50%; top: 38%; z-index: 15; width: min(88vw, 360px); transform: translate(-50%, -50%) scale(0.6); opacity: 0; pointer-events: none; text-align: center; padding: 14px 16px 16px; border-radius: 22px; background: rgba(22, 23, 29, 0.92); color: #fff; box-shadow: 0 20px 40px rgba(0,0,0,0.35); }
.got.is-on { animation: got 1.5s ease forwards; }
.got img { width: 84px; height: 84px; }
.got p { margin: 2px 0 0; font-size: 15px; color: #d7d3ca; }
.got b { display: block; font-size: clamp(24px, 7vw, 30px); font-weight: 900; color: var(--sun); letter-spacing: -0.02em; line-height: 1.15; }
.got.is-badge { border: 2px solid var(--mint); }
.got.is-badge small { display: block; font-size: 13px; color: var(--mint); font-weight: 800; letter-spacing: 0.08em; }
@keyframes got { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 22% { transform: translate(-50%, -50%) scale(1); } 82% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(0.96); } }
.got.is-badge.is-on { animation-duration: 2.1s; }
.bagrow { width: 100%; margin: 0; padding: 6px 8px; list-style: none; display: flex; gap: 2px; min-height: 52px; border-radius: 16px; background: rgba(42, 34, 54, 0.82); overflow: hidden; justify-content: flex-start; }
.bagrow li { flex: none; width: 40px; height: 40px; animation: pop-in 0.3s cubic-bezier(0.2, 1.6, 0.4, 1); }
.bagrow img { width: 40px; height: 40px; }
.spark { position: fixed; z-index: 14; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; }
.fly { position: fixed; z-index: 16; pointer-events: none; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .got.is-on { opacity: 1; transform: translate(-50%, -50%); } }
@media (max-height: 640px) { .ground { height: 110px; } .hero, .hero img { width: 104px; height: 104px; } .hero { margin-left: -52px; } .caption__hint { display: none; } }

@media (max-height: 480px) { .field { min-height: 110px; } .ground { height: 86px; } .hero, .hero img { width: 80px; height: 80px; } .hero { margin-left: -40px; } .caption__hint, .caption__time { display: none; } .bagrow { min-height: 40px; padding: 2px 8px; } .bagrow li, .bagrow img { width: 32px; height: 32px; } .food img { width: 64px; height: 64px; } }