/* @gb-frac v1 — frac.js 의 FRAC_CSS 사본. CSP 로 인라인 <style> 이 막힌 게임은 이 파일을 스타일시트에 넣는다. */
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;margin:0 .12em;font-size:.9em;font-variant-numeric:tabular-nums}
.frac-n{padding:0 .18em .06em;border-bottom:.09em solid currentColor}.frac-d{padding:.06em .18em 0}.frac-mixed{white-space:nowrap}.frac-mixed>.frac{margin-left:.06em}
/* @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}}
/* @gb-numpad v1 — numpad.js 의 NUMPAD_CSS 사본(CSP 게임용) */
.gb-numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(100%,340px);margin:10px auto 0;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.gb-numpad-key{min-height:56px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:inherit;font:inherit;font-size:1.5rem;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .06s,background .06s}
.gb-numpad-key.down,.gb-numpad-key:active{transform:scale(.94);background:rgba(255,255,255,.2)}
.gb-numpad-key.del{font-size:1.3rem}.gb-numpad-key.ok{background:linear-gradient(135deg,#1fb5a5,#6a5ae0);border-color:transparent;color:#fff;font-size:1.15rem}
/* 마지막 줄 «확인» 넓히기 — numpad.js NUMPAD_CSS 와 같은 규칙(CSP 게임은 이 파일만 먹는다) */
.gb-numpad-key.wide{grid-column:1/-1}.gb-numpad-key.wide2{grid-column:span 2}
/* @gb-story-css v1 — kit/story/story.js 대화창. 게임 스타일시트 끝에 붙인다(정본 = ~/.claude/skills/game-builder/kit/story/story.css).
   변수로 게임 색에 맞춘다: --gbs-box(대화창 바탕) --gbs-ink(글자) --gbs-accent(이름표·선택지 테두리) */
.gbs { position: fixed; inset: 0; z-index: 900; display: block; font-family: inherit; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.gbs[hidden] { display: none; }
.gbs-dim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 6, 20, .78) 0%, rgba(10, 6, 20, .35) 45%, rgba(10, 6, 20, .15) 100%); }
.gbs-stage { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; pointer-events: none; }
.gbs-face { position: absolute; bottom: calc(clamp(118px, 26vh, 190px) - 14px); height: min(62vh, 520px); max-width: 52vw; object-fit: contain; object-position: bottom; filter: brightness(.55) saturate(.8); transform: translateY(6px) scale(.97); transition: filter .18s, transform .18s; }
.gbs-face[hidden] { display: none; }
.gbs-face.left { left: max(2vw, 8px); transform-origin: bottom left; }
.gbs-face.right { right: max(2vw, 8px); transform-origin: bottom right; }
.gbs-face.speaking { filter: none; transform: none; }
.gbs-face.pop { animation: gbs-pop .22s ease-out; }
@keyframes gbs-pop { 0% { transform: translateY(14px) scale(.94); opacity: .4; } 100% { transform: none; opacity: 1; } }
.gbs-box { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(860px, calc(100vw - 24px)); min-height: clamp(104px, 22vh, 170px); box-sizing: border-box; padding: 26px 22px 18px; border-radius: 20px; background: var(--gbs-box, rgba(34, 22, 52, .95)); color: var(--gbs-ink, #fff6e6); box-shadow: 0 0 0 3px var(--gbs-accent, rgba(255, 214, 107, .75)), 0 14px 34px rgba(0, 0, 0, .45); }
.gbs-name { position: absolute; left: 18px; top: -18px; padding: 5px 16px; border-radius: 12px; background: var(--c, #ffd66b); color: #2a1a3d; font-weight: 800; font-size: 17px; }
.gbs-name[hidden] { display: none; }
.gbs-text { font-size: clamp(18px, 2.6vw, 23px); line-height: 1.55; font-weight: 700; min-height: 2.2em; white-space: pre-line; word-break: keep-all; }
.gbs.narr .gbs-text { font-style: italic; color: var(--gbs-narr, #e5d8ff); text-align: center; }
.gbs-next { position: absolute; right: 18px; bottom: 10px; width: 14px; height: 14px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg); opacity: 0; }
.gbs.ready .gbs-next { opacity: .85; animation: gbs-bob 0.9s ease-in-out infinite; }
@keyframes gbs-bob { 50% { translate: 0 4px; } }
.gbs-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.gbs-choices:empty { display: none; }
.gbs-choice { min-height: 52px; border-radius: 14px; border: 2px solid var(--gbs-accent, #ffd66b); background: rgba(255, 255, 255, .08); color: inherit; font: inherit; font-size: 19px; font-weight: 800; cursor: pointer; }
.gbs-choice:hover, .gbs-choice:focus-visible { background: rgba(255, 214, 107, .22); outline: none; }
/* 선택지 차례 — 빈 대사 칸·위 여백·«다음» 화살표를 걷어 단추 위아래 여백을 같게(10-20 사용자 «위아래 패딩이 너무 넓다») */
.gbs.choosing .gbs-box { min-height: 0; padding: 16px; }
.gbs.choosing .gbs-text:empty { display: none; }
.gbs.choosing .gbs-text:empty + .gbs-choices { margin-top: 0; }
.gbs.choosing .gbs-next { display: none; }
.gbs-tools { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; display: flex; gap: 8px; }
.gbs-btn { min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 12px; border: 0; background: rgba(34, 22, 52, .85); color: #fff6e6; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.gbs-log { position: absolute; inset: 8% 6%; z-index: 2; padding: 18px; border-radius: 18px; background: rgba(20, 12, 34, .96); color: #fff6e6; display: flex; flex-direction: column; gap: 10px; }
.gbs-log[hidden] { display: none; }
.gbs-log-in { flex: 1; overflow: auto; font-size: 17px; line-height: 1.6; }
.gbs-log-in b { color: var(--gbs-accent, #ffd66b); }
.gbs.out { opacity: 0; transition: opacity .18s; }
@media (max-aspect-ratio: 3/4) { .gbs-face { height: min(46vh, 420px); max-width: 64vw; } .gbs-face.left { left: -4vw; } .gbs-face.right { right: -4vw; } }
@media (prefers-reduced-motion: reduce) { .gbs-face, .gbs-face.pop, .gbs.ready .gbs-next { animation: none; transition: none; } }