/* ── 보노 라이브 연출 (live_fx.js와 한 쌍) ──
   ① 시작 화면 말 걸기  ② 대화 중 캔버스(듣기 파동 · 생각 신경망 · 말하기 빛)  ③ 결과 카드 획득 연출 */

/* 글자 줄바꿈: 단어 중간에서 끊지 않고(keep-all) 줄 길이를 고르게(balance) — 한 글자만 다음 줄로 넘어가는 모양 방지 */
.abub, #reveal .get, .jcard .name, .jcard .world > div, .stat .n, #setup p.asub { word-break:keep-all; overflow-wrap:anywhere; text-wrap:balance; }

/* 캔버스는 무대 뒤에 깔린다 */
#fx { position:fixed; inset:0; z-index:0; pointer-events:none; }
#stage { z-index:1; }
#face { transition:transform .18s ease, width .4s, height .4s, box-shadow .6s ease; }
#face.speaking { box-shadow:0 0 56px rgba(255,236,190,.75), 0 0 170px rgba(255,205,120,.35), inset -12px -16px 34px rgba(150,165,185,.28); }
#face.thinking { box-shadow:0 0 46px rgba(215,190,255,.6), 0 0 150px rgba(180,140,255,.3), inset -12px -16px 34px rgba(150,165,185,.28); }

/* ── ① 시작 화면: 말풍선 + 두드리면 시작하는 보노 + 숨 쉬는 버튼 ── */
#setup { gap:18px; }
#setup .big { cursor:pointer; }
.abub { position:relative; background:#fff; color:#15181d; font-size:clamp(18px, 3.2vmin, 26px); font-weight:700; padding:14px 26px; border-radius:28px; max-width:min(560px, 88vw); text-align:center; line-height:1.4; min-height:2.9em; display:flex; align-items:center; justify-content:center; transform-origin:50% 100%; animation:bubin .35s cubic-bezier(.2,.9,.3,1.3); }
.abub::after { content:''; position:absolute; left:50%; bottom:-11px; width:22px; height:22px; background:#fff; transform:translateX(-50%) rotate(45deg); border-radius:4px; }
.abub.re { animation:bubin .35s cubic-bezier(.2,.9,.3,1.3); }
@keyframes bubin { from{ transform:scale(.6); opacity:0 } to{ transform:scale(1); opacity:1 } }
.abub .cur { display:inline-block; width:2px; height:1.1em; background:#15181d; margin-left:2px; vertical-align:-2px; animation:cur .8s steps(2) infinite; }
@keyframes cur { 50%{ opacity:0 } }
#setup h1 { font-size:clamp(20px, 3.4vmin, 26px); }
#setup p.asub { font-size:15px; color:var(--sub); }
.start { position:relative; font-size:19px; font-weight:700; padding:15px 40px; background:var(--accent); color:#0e1116; border:none; box-shadow:0 0 36px rgba(143,179,255,.45); animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(143,179,255,.55), 0 0 36px rgba(143,179,255,.45) } 70%{ box-shadow:0 0 0 22px rgba(143,179,255,0), 0 0 36px rgba(143,179,255,.45) } }

/* ── ③ 결과: 미래 직업 카드 획득 ── */
#reveal { position:fixed; inset:0; z-index:8; background:radial-gradient(900px 700px at 50% 40%, rgba(40,52,80,.95), rgba(8,10,14,.98)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:18px; opacity:0; transition:opacity .5s; overflow:hidden; }
#reveal.on { opacity:1; }
#reveal .get { font-size:clamp(20px, 3.6vmin, 30px); font-weight:800; letter-spacing:-.5px; color:#fff; text-shadow:0 0 24px rgba(255,220,140,.8); opacity:0; transform:translateY(16px) scale(.9); }
#reveal .get.on { animation:getin .6s cubic-bezier(.2,.9,.3,1.3) forwards; }
@keyframes getin { to{ opacity:1; transform:none } }
.card3d { perspective:1200px; width:min(380px, 90vw); }
.jcard { position:relative; width:100%; border-radius:24px; padding:22px 22px 18px; background:linear-gradient(160deg, #1d2536 0%, #121722 60%, #0f131b 100%); border:2px solid rgba(255,255,255,.14); box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 60px var(--cardglow, rgba(143,179,255,.35)); transform:rotateY(90deg) scale(.8); opacity:0; color:var(--ink); }
.jcard.on { animation:flip .9s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes flip { 0%{ transform:rotateY(90deg) scale(.8); opacity:0 } 60%{ transform:rotateY(-12deg) scale(1.04); opacity:1 } 100%{ transform:none; opacity:1 } }
.jcard::before { content:''; position:absolute; inset:0; border-radius:22px; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 45%, transparent 60%); background-size:250% 100%; animation:shine 3.2s linear infinite; pointer-events:none; }
@keyframes shine { from{ background-position:120% 0 } to{ background-position:-120% 0 } }
.jcard .top { display:flex; align-items:center; gap:14px; }
.jcard .emoji { font-size:52px; line-height:1; filter:drop-shadow(0 0 14px var(--cardglow, rgba(143,179,255,.6))); }
.jcard .name { font-size:clamp(21px, 3.6vmin, 27px); font-weight:800; line-height:1.2; letter-spacing:-.5px; }
.jcard .field { display:inline-block; margin-top:6px; font-size:12px; color:#0e1116; background:var(--cardc, var(--accent)); padding:3px 10px; border-radius:999px; font-weight:700; }
.jcard .stars { margin-left:auto; font-size:18px; color:#ffd166; letter-spacing:2px; white-space:nowrap; }
.jcard .sec { margin-top:16px; opacity:0; transform:translateY(10px); transition:opacity .45s, transform .45s; }
.jcard .sec.on { opacity:1; transform:none; }
.jcard .sec > b { display:block; font-size:12px; color:var(--muted); letter-spacing:1px; margin-bottom:8px; }
.stat { display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center; margin-bottom:8px; }
.stat .n { font-size:14px; font-weight:600; } .stat .n small { color:var(--muted); font-weight:400; margin-left:6px; font-size:11px; }
.stat .v { font-size:13px; color:#ffd166; font-weight:700; font-variant-numeric:tabular-nums; }
.stat.plain { grid-template-columns:1fr; margin-bottom:10px; } .stat .d { font-size:12px; color:var(--muted); line-height:1.4; }
.stat .bar { grid-column:1 / -1; height:9px; border-radius:5px; background:#232a36; overflow:hidden; }
.stat .bar i { display:block; height:100%; width:0; border-radius:5px; background:linear-gradient(90deg, var(--cardc, var(--accent)), #ffd166); box-shadow:0 0 12px var(--cardglow, rgba(143,179,255,.6)); transition:width 1.1s cubic-bezier(.2,.8,.2,1); }
.jcard .world > div { display:grid; grid-template-columns:auto 1fr; gap:0 8px; align-items:baseline; font-size:14px; line-height:1.5; margin:6px 0; opacity:0; transform:translateX(-8px); transition:opacity .4s, transform .4s; }
.jcard .world > div.on { opacity:1; transform:none; }
.jcard .world span { color:var(--muted); font-size:12px; white-space:nowrap; }
#reveal .next { opacity:0; transition:opacity .4s; }
#reveal .next.on { opacity:1; }
.confetti { position:absolute; top:-12px; width:10px; height:14px; border-radius:2px; opacity:0; animation:fall linear forwards; }
@keyframes fall { 0%{ opacity:1; transform:translateY(0) rotate(0) } 100%{ opacity:0; transform:translateY(105vh) rotate(720deg) } }