/* @gb-juice-css v3 — kit/juice/juice.css. 게임 스타일시트 끝에 그대로 붙인다(CSP style-src 'self' 라 JS 가 <style> 을 넣지 않는다). */
.gbj-layer{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.gbj-pop{position:absolute;transform:translate(-50%,-50%) scale(var(--s));font:900 22px/1 system-ui,sans-serif;text-shadow:0 2px 0 #0008,0 0 12px currentColor;white-space:nowrap;animation:gbjPop .9s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes gbjPop{0%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--s)*.3))}15%{opacity:1;transform:translate(-50%,-80%) scale(calc(var(--s)*1.35))}35%{transform:translate(calc(-50% + var(--dx)),-120%) scale(var(--s))}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-260%) scale(calc(var(--s)*.9))}}
.gbj-punch{animation:gbjPunch .32s cubic-bezier(.2,2,.4,1)}
@keyframes gbjPunch{0%{transform:scale(1)}30%{transform:scale(var(--gbj-p))}100%{transform:scale(1)}}
.gbj-flash{position:absolute;inset:0;opacity:0}
.gbj-flash.gbj-go{animation:gbjFlash .35s ease-out forwards}
@keyframes gbjFlash{to{opacity:0}}
/* 가운데 큰 글자 — 자리는 게임이 --gbj-banner-top 으로 옮긴다(HUD 배너·선택 카드와 겹치지 않게 · 2026-10-12 끝까지 진화 실측). 좁은 화면에서 넘치지 않게 vw 로 줄인다  · 튀어나올 때 1.25배라 폭은 76vw(2026-10-14 술래가 번진다: 92vw 면 412px 폰에서 양옆이 잘렸다 — banner-fit 실측) */
.gbj-banner{position:absolute;left:50%;top:var(--gbj-banner-top,40%);transform:translate(-50%,-50%);font:900 clamp(20px,6.4vw,40px)/1.1 system-ui,sans-serif;text-align:center;opacity:0;text-shadow:0 3px 0 #000a,0 0 24px currentColor;max-width:76vw;width:max-content}
.gbj-banner.gbj-go{animation:gbjBan var(--d,1.4s) cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes gbjBan{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-8deg)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(2deg)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1.05)}}
/* v3 타격 묶음(DOM 게임용 — 캔버스 게임은 콜백으로 직접 그린다): 찌그러짐·튕겨남·화면 흔들림·하얀 번쩍 */
/* 한 요소에 셋이 같이 걸린다 — animation 하나를 서로 덮지 않게 갈래마다 칸(--gbj-a1~3)을 따로 둔다 */
.gbj-squash,.gbj-knock,.gbj-hitflash{animation:var(--gbj-a1,none),var(--gbj-a2,none),var(--gbj-a3,none)}
.gbj-squash{--gbj-a1:gbjSquash .28s cubic-bezier(.2,2.2,.4,1)}
@keyframes gbjSquash{0%{transform:scale(1)}25%{transform:scale(1.3,.7)}55%{transform:scale(.88,1.12)}100%{transform:scale(1)}}
.gbj-knock{--gbj-a2:gbjKnock .4s cubic-bezier(.2,1.8,.4,1)}
@keyframes gbjKnock{0%{translate:0 0}25%{translate:var(--kx,14px) var(--ky,0)}60%{translate:calc(var(--kx,14px)*-.25) calc(var(--ky,0px)*-.25)}100%{translate:0 0}}
.gbj-shake{animation:gbjShake .3s linear}
@keyframes gbjShake{0%,100%{translate:0 0}20%{translate:calc(var(--sh,5px)*-1) var(--sh,5px)}40%{translate:var(--sh,5px) calc(var(--sh,5px)*-.6)}60%{translate:calc(var(--sh,5px)*-.6) calc(var(--sh,5px)*-.4)}80%{translate:calc(var(--sh,5px)*.4) calc(var(--sh,5px)*.3)}}
.gbj-hitflash{--gbj-a3:gbjWhite .16s steps(1,end)}
@keyframes gbjWhite{0%{filter:brightness(0) invert(1)}100%{filter:none}}
@media (prefers-reduced-motion:reduce){.gbj-pop,.gbj-banner.gbj-go,.gbj-punch,.gbj-squash,.gbj-knock,.gbj-shake,.gbj-hitflash{animation-duration:.01s}}