/* 무대 16:10. 모든 자리는 무대 %(tuning.js 와 같은 값). */
.g1 { position: absolute; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none; font-family: "Baloo 2", "Nunito", system-ui, sans-serif; container-type: size; }
.g1 * { box-sizing: border-box; }
.g1 img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.g1 .scenes { position: absolute; inset: 0; isolation: isolate; }
.g1 .scene { position: absolute; inset: 0; }
.g1 .scene[hidden] { display: none; }
.g1 .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 가게: 손님 */
.g1 .cust { position: absolute; aspect-ratio: 1; transform: translateX(-50%); pointer-events: auto; }
.g1 .cust .char, .g1 .face .char { position: absolute; inset: 0; }
.g1 .char svg { width: 100%; height: 100%; display: block; overflow: visible; }
.g1 .cust.moving { transition: left .8s ease-in-out, bottom .8s ease-in-out, height .8s ease-in-out, opacity .8s; }
.g1 .cust .held { position: absolute; width: 27%; left: 16%; top: 60%; }
.g1 .bang { position: absolute; width: 16%; left: 42%; top: 2%; animation: g1-bob 1s ease-in-out infinite; }
@keyframes g1-bob { 50% { transform: translateY(-12%) scale(1.06); } }

/* 코인통·동전 */
.g1 .jar { position: absolute; left: 2%; top: 10%; width: 9%; height: 18%; object-fit: contain; z-index: 30; transition: opacity .25s, transform .25s; }
.g1 .jar.off { opacity: 0; transform: scale(.6); }
.g1 .coin { position: absolute; width: 5%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 31; pointer-events: auto; }
.g1 .sparkle { position: absolute; width: 9%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 30; pointer-events: none; background: radial-gradient(circle, #fff9 0 20%, #fff0 60%); border-radius: 50%; }
.g1 .dust { position: absolute; width: 7%; transform: translate(-50%, -50%); z-index: 20; }

/* 바구니 화면 */
.g1 .basketimg { position: absolute; left: 3%; top: 34%; width: 37%; height: 62%; }
.g1 .items { position: absolute; left: 3%; top: 34%; width: 37%; height: 62%; }
.g1 .item { position: absolute; width: 24.3%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.g1 .card { position: absolute; width: 24%; height: 34%; border-radius: 3cqw; background: #fffaf0; border: .35cqw solid #231f20; box-shadow: 0 .5cqw 0 #c89a66; display: grid; place-items: center; }
.g1 .card img { width: 86%; height: 86%; object-fit: contain; }
.g1 .card.empty { visibility: hidden; }
.g1 .card.swap { animation: g1-swap .3s ease-out; }
@keyframes g1-swap { from { transform: scale(.85); opacity: 0; } }
.g1 .card.wiggle { animation: g1-wiggle .45s ease-in-out 2; }
@keyframes g1-wiggle { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.g1 .ph { width: 86%; height: 86%; border-radius: 2cqw; display: grid; place-items: center; text-align: center; font-size: 2.2cqw; color: #231f20; background: #ffe7b3; }
.g1 .ph small { display: block; font-size: 1.2cqw; opacity: .6; }
.g1 .drag { position: absolute; width: 9%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(1.5); z-index: 40; pointer-events: none; filter: drop-shadow(0 .6cqw .3cqw #0003); }
.g1 .drag img, .g1 .item img, .g1 .drag .ph, .g1 .item .ph { width: 100%; height: 100%; object-fit: contain; }
.g1 .face { position: absolute; left: 3%; top: 10%; width: 12%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fbe3c8; border: .45cqw solid #231f20; box-shadow: 0 .4cqw 0 #c89a66; pointer-events: auto; }
.g1 .face .char { inset: auto; left: -38%; top: -19%; width: 180%; height: 180%; }
.g1 .face.shake { animation: g1-wiggle .3s 2; }
.g1 .speaker { position: absolute; left: 15.6%; top: 14%; width: 4%; opacity: 0; transition: opacity .15s; }
.g1 .speaker.on { opacity: 1; animation: g1-bob .6s infinite; }

/* 위쪽 띠·손 모양·셔터·멈춤 */
.g1 .gear { position: absolute; left: .8%; top: 1%; width: 4.5%; aspect-ratio: 1; z-index: 60; pointer-events: auto; opacity: .75; border-radius: 50%; }
.g1 .gear img { width: 100%; height: 100%; }
.g1 .gear::after { content: ""; position: absolute; inset: -12%; border-radius: 50%; background: conic-gradient(#ea7055 calc(var(--p, 0) * 1turn), transparent 0); mask: radial-gradient(circle, transparent 58%, #000 60%); }
.g1 .hand { position: absolute; width: 7%; z-index: 50; pointer-events: none; transform: translate(-32%, -8%); transition: left .6s ease-in-out, top .6s ease-in-out, opacity .3s; }
.g1 .hand.off { opacity: 0; }
.g1 .hand.tap { animation: g1-tap .45s ease-in-out 2; }
@keyframes g1-tap { 50% { transform: translate(-32%, -8%) scale(.85); } }
.g1 .hand.point { animation: g1-point 1s ease-in-out infinite; }
@keyframes g1-point { 50% { transform: translate(-32%, 4%); } }
.g1 .shutter { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 70; transform: translateY(-101%); transition: transform .7s cubic-bezier(.3, 1.2, .6, 1); }
.g1 .shutter.down { transform: none; }
.g1 .pause { position: absolute; inset: 0; z-index: 90; background: #231f2099; display: grid; place-items: center; pointer-events: auto; }
.g1 .pause[hidden] { display: none; }
.g1 .pause button { font: inherit; font-size: 3cqw; padding: 1.5cqw 4cqw; border-radius: 99px; border: .4cqw solid #231f20; background: #fdd26e; box-shadow: 0 .5cqw 0 #c89a66; }
.g1 .pause p { color: #fff; font-size: 2.4cqw; text-align: center; margin: 0 0 2cqw; }
.g1 .pop { animation: g1-popin .35s cubic-bezier(.3, 1.6, .6, 1); }
@keyframes g1-popin { from { transform: translate(-50%, -50%) scale(0); } }