/* Chapter 2 HUD — same family as the pencil chapter: navy glass panels, Jua headings, colored name tags, letterbox cutscenes. */
#balloonGame{position:fixed;inset:0;z-index:30;background:#0d1530;color:var(--ink,#efe9da);font-family:var(--f-body,"Gowun Dodum",sans-serif);overflow:hidden;
  --bori:#ff8b7b;--moa:#f3d98f;--air:#8fd8c0;--glass:rgba(15,25,39,.86);--edge:rgba(255,196,119,.38)}
#balloonGame *{box-sizing:border-box}
#balloonGame canvas{display:block;width:100%;height:100%}
#balloonGame kbd{font-family:inherit;font-size:13px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-bottom-width:2px;border-radius:6px;padding:1px 7px;margin:0 2px;color:var(--ink,#efe9da)}
#balloonGame b{color:var(--pencil,#f6c21f);font-weight:400}
.bb-hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;gap:12px;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));transition:opacity .5s}
.bb-hud button{pointer-events:auto}
.bb-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.bb-meter,.bb-chip,.bb-side,.bb-hint{background:var(--glass);border:1px solid var(--edge);border-radius:14px;backdrop-filter:blur(12px);box-shadow:0 6px 25px #0003}
.bb-meter{padding:12px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.bb-who{display:flex;align-items:center;gap:10px}
.bb-face{width:30px;height:34px;border-radius:50% 50% 48% 48%;background:radial-gradient(circle at 34% 30%,#fff6 0 12%,transparent 13%),var(--bori);position:relative;flex:none;box-shadow:inset -4px -5px 0 #0002}
.bb-face::before{content:"";position:absolute;left:8px;top:12px;width:5px;height:6px;border-radius:50%;background:#241c26;box-shadow:9px 0 0 #241c26}
.bb-face::after{content:"";position:absolute;left:50%;bottom:-6px;width:6px;height:6px;transform:translateX(-50%) rotate(45deg);background:var(--bori)}
#balloonGame[data-role=tape] .bb-face{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,#241c26 0 18%,#c99a62 19% 36%,var(--moa) 37%)}
#balloonGame[data-role=tape] .bb-face::before{top:3px;left:7px}
#balloonGame[data-role=tape] .bb-face::after{display:none}
.bb-name{font-family:var(--f-display,"Jua",sans-serif);font-size:22px;color:var(--ink,#efe9da)!important;line-height:1}
.bb-role{font-size:13px;color:var(--dim,#a9a99f)}
.bb-air{display:flex;align-items:center;gap:10px}
.bb-bd{position:relative;width:min(220px,44vw);height:16px;border-radius:10px;background:rgba(255,255,255,.12);overflow:hidden}
.bb-bd i{position:absolute;inset:0 auto 0 0;border-radius:10px;background:linear-gradient(#b7f0dc,var(--air) 55%,#4fae8f);transition:width .25s}
.bb-bd::after{content:"공기";position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:11px;color:#123;letter-spacing:.1em}
.bb-air.low .bb-bd i{background:linear-gradient(#ff9a7a,#e2553b 55%,#a8321f)}
.bb-pct{font-style:normal;font-family:var(--f-display,"Jua",sans-serif);font-size:18px;min-width:3.2em;font-variant-numeric:tabular-nums}
.bb-vit{font-size:13px;color:#d9d4c4}
.bb-chip{padding:12px 16px;max-width:min(400px,52vw);display:flex;flex-direction:column;gap:5px;text-align:right;align-items:flex-end}
.bb-stage{font-size:12px;letter-spacing:.24em;color:var(--lamp,#ffc477)}
.bb-goal{font-family:var(--f-display,"Jua",sans-serif);font-size:19px;line-height:1.3;color:var(--ink,#efe9da)!important;text-wrap:balance}
.bb-mode{font-size:12.5px;padding:3px 10px;border-radius:20px;background:rgba(255,255,255,.08);color:#d9d4c4}
.bb-mode[data-m=climb]{background:#ff8b7b33;color:#ffd2c8}
.bb-mode[data-m=valve]{background:#5aa0e033;color:#cfe2ff}
.bb-mode[data-m=gust]{background:#9db6ff33;color:#dfe6ff}
.bb-mode[data-m=final]{background:#ffd34d33;color:#fff0b8}
.bb-prog{width:100%;height:5px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.bb-prog i{display:block;height:100%;width:0;background:var(--pencil,#f6c21f);transition:width .12s}
.bb-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.bb-hint{padding:9px 14px;font-size:14px;line-height:1.8;max-width:min(640px,100%);border-radius:12px}
.bb-side{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.bb-mapwrap small{display:block;font-size:11px;color:var(--dim,#a9a99f);margin-bottom:5px}
.bb-map{width:150px;height:76px;position:relative;border-radius:40px/24px;overflow:hidden;background:radial-gradient(ellipse at 40% 35%,#ffb3a6,#ff7f6e 60%,#d9604f);box-shadow:inset 0 0 0 2px #0002}
.bb-map i{position:absolute;width:8px;height:8px;border-radius:50%;background:#241c26;box-shadow:0 0 0 2px #fff8;transform:translate(-50%,-50%)}
.bb-map i.me{background:var(--moa);width:10px;height:10px;box-shadow:0 0 0 3px #f3d98f55}
.bb-map i.valve{background:#5aa0e0;width:11px;height:11px;box-shadow:0 0 0 2px #fff}
.bb-btns{display:flex;gap:6px;flex-wrap:wrap}
.bb-btns button{font:inherit;font-size:12.5px;border:1px solid rgba(255,255,255,.3);border-radius:20px;color:var(--ink,#efe9da);background:transparent;padding:6px 11px;cursor:pointer}
.bb-btns button:hover:not(:disabled){border-color:var(--pencil,#f6c21f)}
.bb-btns button:disabled{opacity:.4;cursor:default}
.bb-cross{position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;background:#fff6df;box-shadow:0 0 0 3px #0005;transform:translate(-50%,-50%);pointer-events:none;display:none}
#balloonGame[data-role=tape] .bb-cross{display:block}
.bb-action{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);background:var(--glass);border:1px solid #8fd8c070;color:#e8f6ef;border-radius:30px;padding:9px 20px;font-size:14px;pointer-events:none;max-width:90vw;text-align:center}
.bb-notice{position:absolute;top:22%;left:50%;transform:translateX(-50%);background:var(--paper,#fff6df);color:var(--paper-ink,#2a2230);border:3px solid var(--paper-ink,#2a2230);border-radius:16px;padding:10px 18px;text-align:center;max-width:min(520px,90vw);font-size:15px;line-height:1.6;pointer-events:none;box-shadow:0 8px 0 #0003}
.bb-notice b{color:#c2410c!important}
.bb-gust{position:absolute;top:34%;left:50%;transform:translateX(-50%);font-family:var(--f-display,"Jua",sans-serif);font-size:clamp(22px,4vw,34px);color:#dfe6ff;text-shadow:0 3px 0 #1f2a48,0 0 20px #9db6ff;pointer-events:none;animation:bbShake .25s infinite}
@keyframes bbShake{50%{transform:translateX(calc(-50% + 4px))}}
/* cutscene */
.bb-bar{position:absolute;left:0;right:0;height:11vh;background:#000;pointer-events:none;transition:transform .8s cubic-bezier(.2,.7,.2,1);z-index:2}
.bb-top-bar{top:0;transform:translateY(-100%)}.bb-bot-bar{bottom:0;transform:translateY(100%)}
#balloonGame.bb-cine .bb-top-bar,#balloonGame.bb-cine .bb-bot-bar{transform:none}
#balloonGame.bb-cine .bb-hud{opacity:0}
.bb-card{position:absolute;left:max(24px,env(safe-area-inset-left,0px));top:calc(11vh + 18px);z-index:3;pointer-events:none;opacity:0;transform:translateY(8px)}
.bb-card small{display:block;font-size:13px;letter-spacing:.28em;color:var(--lamp,#ffc477)}
.bb-card h2{margin:6px 0 0;font-family:var(--f-display,"Jua",sans-serif);font-weight:400;font-size:clamp(28px,4.4vw,46px);text-shadow:0 3px 18px #0008}
.bb-card.on{animation:bbCard 3.6s ease forwards}
@keyframes bbCard{0%{opacity:0;transform:translateY(8px)}12%,78%{opacity:1;transform:none}100%{opacity:0}}
.bb-skip{position:absolute;z-index:4;right:max(16px,env(safe-area-inset-right,0px));top:calc(11vh + 14px);display:none;font:inherit;font-size:14px;color:var(--ink,#efe9da);background:#152332dd;border:1px solid rgba(255,255,255,.35);border-radius:30px;padding:7px 14px;cursor:pointer;backdrop-filter:blur(12px)}
#balloonGame.bb-cine .bb-skip{display:block}
.bb-cap{position:absolute;z-index:3;left:50%;bottom:max(18px,env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);width:min(860px,calc(100% - 32px));
  background:rgba(16,25,38,.96);border:1px solid #e8cb9270;border-radius:18px;padding:22px 26px 26px;opacity:0;pointer-events:none;transition:opacity .4s,transform .4s}
#balloonGame.bb-cine .bb-cap{opacity:1;transform:translate(-50%,0);pointer-events:auto;cursor:pointer}
.bb-nm{position:absolute;left:18px;top:-15px;color:#1d1708;font-family:var(--f-display,"Jua",sans-serif);font-size:16px;padding:3px 14px;border-radius:10px}
.bb-nm[hidden]{display:none}
.bb-tx{margin:0;font-size:clamp(17px,2.3vw,22px);line-height:1.6;white-space:pre-line;min-height:3.2em;text-wrap:pretty}
.bb-tx.narr{color:#e8dfc8;font-family:var(--f-hand,"Gaegu",cursive);font-size:clamp(20px,2.6vw,26px);line-height:1.45}
.bb-tx.in{animation:bbIn .45s ease}
@keyframes bbIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.bb-count{position:absolute;left:26px;bottom:7px;font-size:12px;color:var(--dim,#a9a99f)}
.bb-nx{position:absolute;right:20px;bottom:7px;font-style:normal;color:var(--lamp,#ffc477);font-size:14px;animation:bbNx 1s ease-in-out infinite}
@keyframes bbNx{50%{opacity:.35}}
/* end panels */
.bb-end{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(5,7,15,.72);padding:24px}
.bb-end[hidden]{display:none}
.bb-endp{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;max-width:520px}
.bb-endp small{font-size:14px;letter-spacing:.28em;color:var(--lamp,#ffc477)}
.bb-endp h2{margin:0;font-family:var(--f-display,"Jua",sans-serif);font-weight:400;font-size:clamp(36px,6vw,60px)}
.bb-endp p{margin:0;line-height:1.7;white-space:pre-line;color:#d9d4c4}
.bb-endb{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.bb-btn{font-family:var(--f-display,"Jua",sans-serif);font-size:20px;background:var(--pencil,#f6c21f);color:#1d1708;border:0;border-radius:14px;padding:12px 30px;cursor:pointer}
.bb-btn.ghost{background:transparent;color:var(--ink,#efe9da);border:1px solid rgba(255,255,255,.35)}
.bb-btn:focus-visible,.bb-btns button:focus-visible,.bb-skip:focus-visible{outline:3px solid var(--lamp,#ffc477);outline-offset:2px}
/* touch */
.bb-touch{position:absolute;bottom:150px;left:16px;display:none;grid-template-columns:repeat(3,46px);gap:5px;pointer-events:auto;z-index:2}
.bb-touch button{touch-action:none;width:46px;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.3);background:var(--glass);color:var(--ink,#efe9da);font:inherit;font-size:15px}
.bb-touch button:first-child{grid-column:2}
.bb-touch-r{left:auto;right:16px;grid-template-columns:repeat(2,58px)}
.bb-touch-r button{width:58px;font-size:12.5px}
@media (pointer:coarse){.bb-touch{display:grid}#balloonGame.bb-cine .bb-touch{display:none}}
@media (max-width:700px){.bb-top{flex-direction:column}.bb-chip{max-width:100%;text-align:left;align-items:flex-start}.bb-goal{font-size:16px}.bb-hint{font-size:12px}.bb-map{width:110px;height:56px}.bb-bottom{flex-direction:column;align-items:stretch}.bb-side{align-self:flex-end}}
@media (prefers-reduced-motion:reduce){.bb-gust,.bb-nx{animation:none}.bb-bar,.bb-cap{transition:none}}
/* over-inflation, patches, speed and spin */
.bb-bd s{position:absolute;right:0;top:0;bottom:0;width:0;background:repeating-linear-gradient(45deg,#ff6a5a 0 6px,#ffb3a6 6px 12px);transition:width .2s}
.bb-air.over .bb-pct{color:#ff8b7b}
.bb-map i.fix{background:#f6e4a8;width:7px;height:4px;border-radius:2px;box-shadow:none;transform:translate(-50%,-50%) rotate(30deg)}
.bb-speed{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(ellipse at center,transparent 45%,rgba(220,235,255,.18) 75%,rgba(220,235,255,.32))}
#balloonGame.bb-fast .bb-speed{opacity:1}
#balloonGame.bb-spin .bb-speed{opacity:1;background:radial-gradient(ellipse at center,transparent 40%,rgba(255,160,140,.22) 80%)}
.bb-timer{position:absolute;top:30%;left:50%;transform:translateX(-50%);font-family:var(--f-display,"Jua",sans-serif);font-size:clamp(18px,3vw,26px);color:#ffd2c8;background:var(--glass);border:1px solid #ff8b7b88;border-radius:30px;padding:8px 20px;pointer-events:none;animation:bbNx 1s ease-in-out infinite}
/* solo role pick */
.bb-pick{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,rgba(6,9,20,.92),rgba(6,9,20,.7));padding:24px}
.bb-pick[hidden]{display:none}
.bb-pickp{display:flex;flex-direction:column;gap:12px;max-width:720px;width:100%}
.bb-pickp small{font-size:13px;letter-spacing:.28em;color:var(--lamp,#ffc477)}
.bb-pickp h2{margin:0;font-family:var(--f-display,"Jua",sans-serif);font-weight:400;font-size:clamp(30px,5vw,48px)}
.bb-pickp p{margin:0;color:#d9d4c4;line-height:1.6}
.bb-pickc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:6px}
.bb-role-card{font:inherit;text-align:left;display:flex;flex-direction:column;gap:7px;padding:18px;background:var(--glass);color:var(--ink,#efe9da);border:1px solid var(--edge);border-radius:16px;cursor:pointer;transition:transform .2s,border-color .2s;min-width:0}
.bb-role-card:hover,.bb-role-card:focus-visible{transform:translateY(-3px);border-color:var(--pencil,#f6c21f);outline:none}
.bb-role-card b{font-family:var(--f-display,"Jua",sans-serif);font-size:24px;color:var(--ink,#efe9da)!important}
.bb-role-card span:not(.bb-pf){font-size:14px;color:#d9d4c4;line-height:1.55}
.bb-role-card em{font-style:normal;font-size:13px;color:#8fd8c0}
.bb-pf{width:52px;height:56px;border-radius:50% 50% 48% 48%;background:radial-gradient(circle at 34% 30%,#fff6 0 12%,transparent 13%),var(--bori);position:relative}
.bb-pf::before{content:"";position:absolute;left:14px;top:20px;width:8px;height:10px;border-radius:50%;background:#241c26;box-shadow:16px 0 0 #241c26}
.bb-pf.moa{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle,#241c26 0 16%,#c99a62 17% 34%,var(--moa) 35%)}
.bb-pf.moa::before{top:6px;left:14px}
@media (max-width:620px){.bb-pickc{grid-template-columns:1fr}}
.bb-cue{position:absolute;top:26%;left:50%;transform:translateX(-50%);font-family:var(--f-display,"Jua",sans-serif);font-size:clamp(24px,4.4vw,40px);color:#fff6df;text-shadow:0 3px 0 #7a2a20,0 0 24px #ff8b7b;pointer-events:none;text-align:center;white-space:nowrap;animation:bbPop .9s ease-in-out infinite}
.bb-cue kbd{font-size:.7em!important;padding:2px 10px!important;background:#ff8b7b!important;color:#1d1708!important;border-color:#fff6df!important}
.bb-cue.ok{color:#c8f5dc;text-shadow:0 3px 0 #1f5a45,0 0 24px #8fd8c0;animation:none}
.bb-timer.hot{color:#fff;border-color:#ff5a4a;background:#7a2a20cc}
@keyframes bbPop{50%{transform:translateX(-50%) scale(1.06)}}
@media (max-width:620px){.bb-cue{white-space:normal;width:90vw}}
/* ---- top HUD v2: light, no boxes ---- */
.bb-top{align-items:flex-start}
.bb-meter{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;padding:0!important;flex-direction:row!important;align-items:center;gap:12px!important;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
.bb-badge{position:relative;width:58px;height:58px;flex:none;display:grid;place-items:center}
.bb-badge .bb-face{width:36px;height:40px}
#balloonGame[data-role=tape] .bb-badge .bb-face{width:36px;height:36px}
.bb-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.bb-ring circle{fill:none;stroke:rgba(255,255,255,.16);stroke-width:3.5}
.bb-ring .bb-ringv{stroke:var(--air);stroke-linecap:round;stroke-dasharray:119.4;transition:stroke-dashoffset .25s,stroke .3s}
#balloonGame[data-air=low] .bb-ringv{stroke:#ff6a5a}
#balloonGame[data-air=over] .bb-ringv{stroke:#ffb3a6}
.bb-mcol{display:flex;flex-direction:column;gap:5px;min-width:0}
.bb-who{gap:8px!important;align-items:baseline!important}
.bb-name{font-size:24px!important;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.bb-role{font-size:12.5px!important;color:#e9e1cf!important;opacity:.85}
.bb-bd{height:10px!important;width:min(190px,40vw)!important;border-radius:10px!important;background:rgba(255,255,255,.16)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.bb-bd::after{display:none}
.bb-bd i{background:linear-gradient(90deg,#7fd3b8,#b7f0dc)!important}
.bb-air.low .bb-bd i{background:linear-gradient(90deg,#e2553b,#ff9a7a)!important}
.bb-pct{font-size:16px!important;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.bb-vit{display:flex;flex-wrap:wrap;gap:5px;font-size:12px!important}
.bb-vit .pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 7px;border-radius:20px;background:rgba(13,21,48,.62);color:#efe9da;border:1px solid rgba(255,255,255,.12)}
.bb-vit .pill.warn{background:rgba(122,42,32,.75);border-color:#ff8b7b88}
.bb-vit .pill.on{background:rgba(31,90,69,.8);border-color:#8fd8c088}
.bb-vit .pill.hot{background:#ff8b7b;color:#1d1708;border-color:transparent}
.bb-vit i{display:inline-block;width:8px;height:8px;border-radius:50%}
.ic-hole{background:#241c26;box-shadow:0 0 0 2px #ffb08a}
.ic-tape{background:#f6e4a8;border-radius:2px!important;width:10px!important;height:5px!important;transform:rotate(-20deg)}
.ic-he{background:#8fd8c0}
.bb-chip{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;padding:2px 0 0!important;gap:4px!important;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.bb-stage{font-size:11.5px!important;letter-spacing:.26em!important}
.bb-goal{font-size:21px!important;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.bb-mode{background:rgba(13,21,48,.62)!important;border:1px solid rgba(255,255,255,.12);font-size:12px!important}
.bb-prog{width:160px!important;height:4px!important;background:rgba(255,255,255,.15)!important}
.bb-hint{background:rgba(13,21,48,.55)!important;border:1px solid rgba(255,255,255,.1)!important;box-shadow:none!important}
.bb-side{background:rgba(13,21,48,.55)!important;border:1px solid rgba(255,255,255,.1)!important;box-shadow:none!important}
@media (max-width:700px){.bb-chip{align-items:flex-end!important;text-align:right!important}.bb-top{flex-direction:row!important}.bb-goal{font-size:15px!important}.bb-badge{width:46px;height:46px}.bb-vit .pill{font-size:11px}}
/* ---- bottom guide: plain text, shown once, N toggles ---- */
.bb-help{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.bb-hint{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;padding:0!important;font-size:14px!important;line-height:1.9!important;color:#f3ecdc;text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 10px rgba(0,0,0,.5);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;pointer-events:none}
#balloonGame.bb-showhelp .bb-hint{opacity:1;transform:none}
.bb-helptag{font-size:12px;color:#e9e1cf;opacity:.7;text-shadow:0 1px 3px rgba(0,0,0,.8)}
#balloonGame.bb-showhelp .bb-helptag{opacity:.45}
.bb-side{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;padding:0!important;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.bb-mapwrap small{text-shadow:0 1px 3px rgba(0,0,0,.8)}
.bb-btns button{background:rgba(13,21,48,.5)!important;border-color:rgba(255,255,255,.18)!important}
/* ---- v3: one refined glass language for everything else ---- */
#balloonGame{--glass2:rgba(14,20,40,.58);--hair:rgba(255,255,255,.14);--soft:0 10px 30px rgba(0,0,0,.28)}
/* toasts */
.bb-notice{top:max(18px,env(safe-area-inset-top,0px))!important;transform:translateX(-50%)!important;background:var(--glass2)!important;color:#f3ecdc!important;border:1px solid var(--hair)!important;border-radius:14px!important;box-shadow:var(--soft)!important;backdrop-filter:blur(14px) saturate(1.2);font-size:14px!important;padding:10px 18px!important;animation:bbToast .35s cubic-bezier(.2,.8,.2,1)}
.bb-notice b{color:#ffcf9a!important}
@keyframes bbToast{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
.bb-action{background:var(--glass2)!important;border:1px solid var(--hair)!important;color:#efe9da!important;font-size:13.5px!important;letter-spacing:.01em;padding:8px 18px!important;box-shadow:var(--soft);backdrop-filter:blur(12px)}
/* cues */
.bb-cue{font-size:clamp(22px,3.6vw,34px)!important;color:#fff!important;text-shadow:0 2px 18px rgba(0,0,0,.55)!important;letter-spacing:.01em;animation:bbBreath 1.6s ease-in-out infinite!important}
.bb-cue kbd{background:rgba(255,255,255,.92)!important;color:#1b2033!important;border:0!important;border-radius:8px!important;box-shadow:0 3px 0 rgba(0,0,0,.25);vertical-align:.12em}
.bb-cue.ok{color:#c8f5dc!important}
@keyframes bbBreath{50%{opacity:.78}}
.bb-gust{font-size:clamp(20px,3.2vw,30px)!important;color:#eaf0ff!important;text-shadow:0 2px 18px rgba(30,50,110,.8)!important}
.bb-timer{top:33%!important;font-size:clamp(15px,2.2vw,19px)!important;background:var(--glass2)!important;border:1px solid var(--hair)!important;color:#ffe2d8!important;box-shadow:var(--soft);backdrop-filter:blur(12px);animation:none!important;font-variant-numeric:tabular-nums}
.bb-timer.hot{background:rgba(160,40,30,.7)!important;border-color:rgba(255,140,120,.6)!important;color:#fff!important}
/* cutscene */
.bb-bar{height:9vh!important;background:#05070f!important}
.bb-cap{background:linear-gradient(180deg,rgba(14,20,40,.78),rgba(10,14,30,.9))!important;border:1px solid var(--hair)!important;border-radius:20px!important;box-shadow:0 18px 50px rgba(0,0,0,.4)!important;backdrop-filter:blur(16px);padding:24px 30px 30px!important}
.bb-nm{border-radius:20px!important;padding:4px 14px!important;font-size:15px!important;top:-14px!important;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.bb-tx{color:#f5efe1}
.bb-tx.narr{color:#e6dcc4!important}
.bb-count{color:rgba(255,255,255,.4)!important;font-variant-numeric:tabular-nums}
.bb-nx{color:rgba(255,207,154,.85)!important;font-size:13px!important}
.bb-skip{top:calc(9vh + 14px)!important;background:var(--glass2)!important;border:1px solid var(--hair)!important;font-size:13px!important;padding:6px 14px!important}
.bb-card{top:calc(9vh + 20px)!important}
.bb-card small{font-size:12px!important;color:#ffcf9a!important}
.bb-card h2{font-size:clamp(28px,4vw,42px)!important;text-shadow:0 2px 24px rgba(0,0,0,.6)!important}
/* side map + buttons */
.bb-map{border-radius:999px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 6px 18px rgba(0,0,0,.3)!important}
.bb-mapwrap small{font-size:11px!important;opacity:.7}
.bb-btns{gap:6px!important}
.bb-btns button{background:var(--glass2)!important;border:1px solid var(--hair)!important;border-radius:999px!important;font-size:12px!important;padding:6px 12px!important;color:#e9e1cf!important;backdrop-filter:blur(10px)}
.bb-btns button:hover:not(:disabled){border-color:rgba(255,207,154,.6)!important;color:#fff!important}
/* pick + end */
.bb-pick,.bb-end{background:radial-gradient(ellipse at 30% 40%,rgba(20,28,60,.78),rgba(5,7,15,.92))!important;backdrop-filter:blur(6px)}
.bb-role-card{background:rgba(255,255,255,.05)!important;border:1px solid var(--hair)!important;border-radius:20px!important;padding:22px!important;box-shadow:var(--soft)}
.bb-role-card:hover,.bb-role-card:focus-visible{background:rgba(255,255,255,.09)!important;border-color:rgba(255,207,154,.55)!important}
.bb-role-card em{color:#9fe0c8!important}
.bb-btn{border-radius:999px!important;font-size:18px!important;padding:11px 28px!important;box-shadow:0 8px 22px rgba(246,194,31,.25)}
.bb-btn.ghost{box-shadow:none;border-color:var(--hair)!important}
.bb-endp p{color:#d9d1bf!important}
/* bottom guide keys */
.bb-hint kbd,.bb-helptag kbd{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.22)!important;border-bottom-width:1px!important;border-radius:6px!important;font-size:12px!important}
.bb-touch button{background:var(--glass2)!important;border:1px solid var(--hair)!important;border-radius:16px!important;backdrop-filter:blur(10px)}
/* ---- v4: game HUD — no glass, no pills, no tracking-spaced labels; bold type and icons over the scene ---- */
#balloonGame{--ts:0 2px 0 rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.35)}
#balloonGame .bb-stage,#balloonGame .bb-card small,#balloonGame .bb-pickp small,#balloonGame .bb-endp small{letter-spacing:0!important;text-transform:none}
/* top-left: ring gauge + number, status as icon·number */
.bb-who{display:none!important}
.bb-pct{font-size:26px!important;font-family:var(--f-display,"Jua",sans-serif);text-shadow:var(--ts)!important;line-height:1}
.bb-bd{display:none!important}
.bb-badge{width:64px!important;height:64px!important}
.bb-ring circle{stroke-width:4.5!important}
.bb-vit{gap:12px!important;font-size:14px!important}
.bb-vit .pill{background:none!important;border:0!important;padding:0!important;font-family:var(--f-display,"Jua",sans-serif);font-size:15px;text-shadow:var(--ts)}
.bb-vit .pill.warn{color:#ff9a86}
.bb-vit .pill.on{color:#9fe0c8}
.bb-vit .pill.hot{color:#ffd34d;background:none!important}
/* top-right: just the goal */
.bb-stage{font-size:13px!important;color:#ffd9a8!important;text-shadow:var(--ts)}
.bb-goal{font-size:22px!important;text-shadow:var(--ts)!important}
.bb-mode{background:none!important;border:0!important;padding:0!important;font-size:13px!important;color:#e9e1cf!important;text-shadow:var(--ts)}
.bb-mode[data-m]{background:none!important}
.bb-prog{width:120px!important;height:5px!important;border-radius:0!important;background:rgba(0,0,0,.35)!important}
.bb-prog i{background:#ffd34d!important}
.bb-meter,.bb-chip,.bb-side{filter:none!important}
/* floating text instead of boxes */
.bb-notice,.bb-action,.bb-timer{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;animation:none!important;text-shadow:var(--ts);font-family:var(--f-display,"Jua",sans-serif)}
.bb-notice{font-size:19px!important;top:15%!important;color:#fff!important}
.bb-notice b{color:#ffd34d!important}
.bb-action{font-size:17px!important;color:#fff!important}
.bb-timer{font-size:22px!important;color:#ffe2d8!important}
.bb-timer.hot{color:#ff7a66!important;background:none!important}
.bb-cue{text-shadow:var(--ts)!important;animation:none!important}
.bb-cue kbd{box-shadow:none!important;border-radius:4px!important}
.bb-gust{text-shadow:var(--ts)!important;animation:bbShake .25s infinite!important}
/* dialogue: a plain solid box with a name tag, like the pencil chapter */
.bb-cap{background:#121a2b!important;border:2px solid #2b3550!important;border-radius:14px!important;box-shadow:0 6px 0 rgba(0,0,0,.35)!important;backdrop-filter:none!important}
.bb-nm{border-radius:6px!important;box-shadow:none!important;top:-15px!important}
.bb-skip{background:rgba(0,0,0,.4)!important;border:0!important;border-radius:6px!important;backdrop-filter:none!important}
.bb-card small{font-size:15px!important;color:#ffd9a8!important}
/* side: map and small text buttons */
.bb-mapwrap small{display:none}
.bb-map{border-radius:50%/38%!important;box-shadow:0 3px 0 rgba(0,0,0,.35)!important}
.bb-btns button{background:none!important;border:0!important;padding:4px 6px!important;font-family:var(--f-display,"Jua",sans-serif);font-size:14px!important;text-shadow:var(--ts);backdrop-filter:none!important}
.bb-btns button:hover:not(:disabled){color:#ffd34d!important}
/* pick & end: solid, centred, no frosted cards */
.bb-pick,.bb-end{background:rgba(6,9,20,.88)!important;backdrop-filter:none!important}
.bb-pickp small{font-size:15px!important;color:#ffd9a8!important}
.bb-role-card{background:#151d31!important;border:2px solid #263052!important;border-radius:14px!important;box-shadow:0 6px 0 rgba(0,0,0,.35)!important}
.bb-role-card:hover,.bb-role-card:focus-visible{background:#1b2540!important;border-color:#ffd34d!important;transform:translateY(-3px)}
.bb-btn{border-radius:12px!important;box-shadow:0 5px 0 #b88a0e!important}
.bb-btn.ghost{box-shadow:none!important;border:2px solid #3a4566!important}
.bb-touch button{background:rgba(0,0,0,.35)!important;border:2px solid rgba(255,255,255,.25)!important;backdrop-filter:none!important}
/* ---- balloon-shaped air gauge ---- */
.bb-meter{gap:10px!important;align-items:center!important}
.bb-air{display:none!important}
.bb-gauge{width:52px;height:73px;flex:none;overflow:visible;transform-origin:50% 40%;transition:transform .3s;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35)) drop-shadow(0 0 10px rgba(0,0,0,.3))}
.bb-gauge .g-bg{fill:rgba(20,16,30,.55)}
.bb-gauge .g-fill,.bb-gauge .g-wave{fill:#f2523f}
.bb-gauge .g-wave{fill:#ff8a76}
.bb-gauge .g-line{fill:none;stroke:#fff3e6;stroke-width:2.6}
.bb-gauge .g-shine{fill:rgba(255,255,255,.55)}
.bb-gauge .g-knot{fill:#fff3e6}
.bb-gauge .g-str{fill:none;stroke:#fff3e6;stroke-width:1.6;stroke-linecap:round}
.bb-gauge .g-face circle{fill:#241c26}
.bb-gauge .g-face path{fill:none;stroke:#241c26;stroke-width:2.2;stroke-linecap:round}
#balloonGame[data-air=low] .bb-gauge .g-line{stroke:#ff6a5a;animation:bbLow .6s ease-in-out infinite}
#balloonGame[data-air=low] .bb-gauge .g-face path{d:path("M25.5 39 Q30 35 34.5 39")}
#balloonGame[data-air=over] .bb-gauge .g-fill{fill:#ff3b2a}
@keyframes bbLow{50%{stroke:#fff3e6}}
.bb-num{display:flex;align-items:baseline;gap:1px;font-family:var(--f-display,"Jua",sans-serif);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.35);line-height:1}
.bb-num b{font-size:34px;font-weight:400;color:#fff!important;font-variant-numeric:tabular-nums;min-width:1.6em}
.bb-num small{font-size:16px;opacity:.85}
#balloonGame[data-air=low] .bb-num b{color:#ff8a76!important}
#balloonGame[data-air=over] .bb-num b{color:#ffb3a6!important}
.bb-mcol{gap:2px!important}
/* ---- meter layout: gauge | number over status ---- */
.bb-meter{display:grid!important;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:12px!important;row-gap:4px!important;align-items:end!important;padding-top:6px!important}
.bb-gauge{grid-row:1/3;width:62px;height:87px}
.bb-num{grid-column:2;grid-row:1;align-self:end}
.bb-mcol{grid-column:2;grid-row:2;align-self:start}
.bb-num b{font-size:40px}
.bb-vit{gap:14px!important}
.bb-vit .pill{font-size:16px!important}
.bb-vit i{width:9px!important;height:9px!important}
/* surface minimap: a small round balloon, only when it matters */
.bb-side{align-items:flex-end}
.bb-map{width:78px!important;height:78px!important;border-radius:50%!important;background:radial-gradient(circle at 35% 30%,#ff9a86,#f2523f 60%,#c23a2c)!important;box-shadow:0 0 0 2.5px #fff3e6,0 3px 0 3px rgba(0,0,0,.35)!important}
.bb-map i{width:9px!important;height:9px!important;box-shadow:0 0 0 1.5px #fff8!important}
.bb-map i.me{background:#ffe6a8!important;box-shadow:0 0 0 2px #241c26!important}
#balloonGame[data-role=pilot] .bb-mapwrap{display:none}
#balloonGame[data-role=tape] .bb-mapwrap{display:block}
.bb-btns{justify-content:flex-end}
/* ---- v5: no corner HUD. a paper tag on the balloon string; goal appears only when it changes (N shows all) ---- */
.bb-meter{display:none!important}
.bb-chip{opacity:0;transform:translateY(-6px);transition:opacity .5s,transform .5s}
#balloonGame.bb-showgoal .bb-chip{opacity:1;transform:none}
.bb-mode,.bb-prog{display:none!important}
.bb-tag{position:absolute;left:0;top:0;z-index:2;pointer-events:none;display:flex;align-items:baseline;gap:2px;padding:7px 12px 6px 22px;
  background:#f7ecd2;color:#3a2a30;border-radius:4px 10px 10px 4px;clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);
  font-family:var(--f-hand,"Gaegu",cursive);box-shadow:0 3px 0 rgba(0,0,0,.25);transform-origin:0 50%;will-change:transform}
.bb-tag[hidden]{display:none}
.bb-tag .tg-hole{position:absolute;left:9px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#3a2a30;opacity:.55}
.bb-tag .tg-air{font-size:24px;font-weight:700;color:#3a2a30!important;line-height:1;font-variant-numeric:tabular-nums}
.bb-tag .tg-unit{font-size:14px;font-weight:700;opacity:.7}
.bb-tag .tg-dots{display:flex;gap:3px;margin-left:6px;align-self:center}
.bb-tag .tg-dots i{width:7px;height:7px;border-radius:50%;background:#241c26;box-shadow:0 0 0 2px #ff9a86}
.bb-tag[data-s=leak]{background:#fbe3c9}
.bb-tag[data-s=low]{background:#ff8a76;color:#2a1210;animation:bbTagShake .35s ease-in-out infinite}
.bb-tag[data-s=over]{background:#ffd0c4}
@keyframes bbTagShake{50%{margin-left:3px}}
.bb-chip{margin-left:auto}
.bb-tag{padding:9px 15px 8px 26px}
.bb-tag .tg-air{font-size:30px}
.bb-tag .tg-unit{font-size:16px}
.bb-tag::before{content:"";position:absolute;left:-40px;top:50%;width:40px;height:1.5px;background:#f7f0e2;transform:rotate(-30deg);transform-origin:100% 50%}
.bb-arrow{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;font-family:var(--f-display,"Jua",sans-serif);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 12px rgba(0,0,0,.4)}
.bb-arrow[hidden]{display:none}
.bb-arrow i{width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:30px solid #ffd34d;filter:drop-shadow(0 2px 0 rgba(0,0,0,.5));transition:transform .12s}
.bb-arrow span{font-size:18px}
.bb-arrow.here i{border-bottom-color:#8fd8c0}
.bb-arrow.here span{color:#c8f5dc;font-size:22px}
/* world pointer: bounces over the target, or sits at the screen edge pointing toward it */
.bb-point{position:absolute;left:0;top:0;z-index:2;pointer-events:none;width:0;height:0}
.bb-point[hidden]{display:none}
.bb-point i{position:absolute;left:-15px;top:-34px;width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:26px solid #ffd34d;filter:drop-shadow(0 3px 0 rgba(0,0,0,.45));animation:bbBob .7s ease-in-out infinite}
.bb-point.ok i{border-top-color:#8fd8c0}
.bb-point.edge i{top:-13px;animation:none;border-top-color:#ffd34d;opacity:.9}
@keyframes bbBob{50%{transform:translateY(-8px)}}
.bb-gust{display:none!important}