/* 무대 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%); transform-origin: 50% 96%; pointer-events: auto; }   /* 자리·크기·앞뒤(z)는 shop.js 가 바닥 좌표로 */
.g1 .cust .char, .g1 .face .char { position: absolute; inset: 0; }

/* 캐릭터(character.js): 동작별 스프라이트 시트를 겹쳐 두고 data-anim 으로 하나만 보임. 보일 때 첫 칸부터 steps 로 넘김(가로 = 한 줄, 세로 = 줄 바꿈) */
.char { position: absolute; inset: 0; }
.char .body { position: absolute; inset: 0; }
.char .s { position: absolute; inset: 0; background-repeat: no-repeat; visibility: hidden; animation-name: none; }
@keyframes g1s-x { to { background-position-x: 100%; } }
@keyframes g1s-y { to { background-position-y: 100%; } }
.char[data-anim="idle"] .s-idle, .char[data-anim="walk"] .s-walk, .char[data-anim="talk"] .s-talk, .char[data-anim="wave"] .s-wave,
.char[data-anim="happy"] .s-happy, .char[data-anim="jump"] .s-jump, .char[data-anim="tilt"] .s-tilt,
.char[data-anim="walkb"] .s-walkb, .char[data-anim="carry"] .s-carry, .char[data-anim="hold"] .s-hold, .char[data-anim="look"] .s-look { visibility: visible; animation-name: g1s-x, g1s-y; animation-fill-mode: forwards; }
.char.alt .body { filter: hue-rotate(55deg); }                      /* 연습 손님: 같은 그림의 색 변형 */
.g1 .bang { position: absolute; width: 16%; left: 42%; top: 13%; animation: g1-bob 1s ease-in-out 6; }   /* 6초 뒤 멈춤(가만히 있을 때 애니메이션 0) */
@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%); }
/* 카드 = 배경 진열대의 흰 칸(tuning card). 칸은 배경 그림에 있으니 카드 자체는 투명, 그림만 얹는다. */
.g1 .card { position: absolute; width: 20.5%; height: 29%; border-radius: 2cqw; display: grid; place-items: center; }
.g1 .card img { width: 84%; height: 84%; 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: #fff; border: .5cqw solid #9b5cff; box-shadow: 0 .4cqw .6cqw #0002; pointer-events: auto; }
.g1 .face .char { inset: auto; left: -47.5%; top: -68%; width: 195%; height: 195%; }   /* 시트 칸 키 3.9 중 눈 높이 ≈ 1.35 → 얼굴이 창 가운데(g1.py FRAME) */
.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; }

/* 위쪽 띠·손 모양·셔터·멈춤 */
/* 장갑 손(ui/hand.webp): 손끝이 그림 위 가운데(x 45%) → (left, top)이 손끝이 되게 옮긴다 */
.g1 .hand { position: absolute; width: 7%; z-index: 50; pointer-events: none; transform: translate(-45%, -4%); 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(-45%, -4%) scale(.85); } }
.g1 .hand.point { animation: g1-point 1s ease-in-out infinite; }
@keyframes g1-point { 50% { transform: translate(-45%, 8%); } }
.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); } }