/* @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; } }