/* 분신 용사 HUD — 키트 목업 규약(WU-5, 2026-09-27). 전 battle.js 캔버스 HUD(drawTopBar · drawHud · drawHpHud · drawFxTab · drawRespawn · drawFlash ·
   bunsin_stage drawStage · 머리 위 글자·막대·말풍선)를 옮긴 것. 목업 페이지(ui/mockup.html) · 게임(index.html) · Unity(목업 엔진)가 같은 이 파일을 쓴다.
   단위: 무대 = GUI(EFZ 화면 높이 450). 목업 무대 800x450(16:9, 이 게임이 허용하는 가장 좁은 가로). 게임은 .hud-in 을 zoom(--u = 캔버스 높이/450)으로만 키운다.
   가로가 16:9 보다 넓으면: .edge-l 은 왼쪽 끝, .edge-r 은 오른쪽 끝, .edge-fill 은 가로 전체, 나머지는 가운데 그대로(Unity 는 같은 클래스를 읽어 옮긴다: port 런타임 MockupEdges).
   값의 근거(전 battle.js): 조작 = EFZ 값(GUI 그대로), 머리줄 = 마이 티니 작은 판 × .75(z/g, 폰 높이에서 늘 같다; 바깥 여백 12·14 는 CSS px 그대로라 × 1.2), 캔버스 CSS px 상수는 기준 화면 812x375 에서 GUI(× 1.2).
   월드 글자(이름·막대·말풍선·피해 숫자 …)는 기준 화면의 EFZ px(× .9 GUI) 크기 틀(data-world). 게임이 화면 배율 차이만 scale 로 곱한다.
   색·그림자·판 그림은 이 파일과 ui/art(bake_art.mjs 가 옛 그리기 식으로 구운 PNG)에만 있다. 게임 JS 에 좌표·색 상수를 두지 않는다. */
@font-face { font-family: "GFUIFont"; src: url("fonts/NotoSansKR-SemiBold.ttf"); font-weight: 100 900; }
#hud { position: fixed; z-index: 4; pointer-events: none; overflow: hidden; --ui-font: "GFUIFont"; font-family: var(--ui-font); }
#hud [hidden] { display: none !important; }
#hud .hud-in { position: absolute; left: 0; top: 0; width: var(--hw, 800px); height: 450px; zoom: var(--u, 1); }
#hud .hud-in > * { position: absolute; }
#hud img { display: block; position: absolute; }
#hud .world, #hud .ctl { left: 0; top: 0; width: 100%; height: 450px; }
#hud .world > *, #hud .ctl > * { position: absolute; }
#hud .o { color: #fff; font-weight: 700; white-space: nowrap; line-height: 1;   /* 흰 글자 + 검은 테두리(캔버스 strokeText 3px 의 바깥 반) */
  text-shadow: 1.5px 0 #000, -1.5px 0 #000, 0 1.5px #000, 0 -1.5px #000, 1.1px 1.1px #000, -1.1px 1.1px #000, 1.1px -1.1px #000, -1.1px -1.1px #000; }

/* ---------------- 머리줄 왼쪽: 초상 + Lv 배지 + 이름판(마이 티니 .avatar · .level · .name-plate) */
#hud .top-l { left: 16.8px; top: 14.4px; height: 36px; display: flex; align-items: center; }
#hud .avatar { position: relative; z-index: 1; flex: none; width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%; border: 2.25px solid #c99a4f;
  background: radial-gradient(circle farthest-corner at 50% 38%, #fbf1d8, #e3cfa4); box-shadow: 0 0 0 1.5px #7b5226, 0 2.25px 0 #4a6a2e88, inset 0 1.5px 0 #fff8e6; }
#hud .avatar .portrait { left: 0; top: 0; width: 31.5px; height: 31.5px; }   /* 게임이 그리는 칸(그림 키 portrait: 서기 첫 자세 머리·어깨를 안쪽 원으로 자른 것) */
#hud .level { position: absolute; left: 50%; bottom: -7.5px; transform: translateX(-50%); padding: .75px 5.25px; border-radius: 6.75px; border: 1.5px solid #4f6a24;
  background: linear-gradient(#a6c35f, #7d9d3c); color: #fffbe8; font-size: 8.25px; font-weight: 900; line-height: 1.25; white-space: nowrap;
  text-shadow: 0 .75px #3f561c; box-shadow: 0 1.5px 0 #3f561c88; }
#hud .name-plate { margin-left: -10.5px; height: 36px; box-sizing: border-box; padding: 0 7.5px 0 10.5px; display: flex; flex-direction: column; justify-content: center;
  border: 9px solid transparent; border-image: url(../assets/hud/slot.webp) 72 fill / 9px stretch; filter: drop-shadow(0 1.5px 0 #4a6a2e88); color: #5e3d22; }
#hud .name-plate b { font-size: 10.5px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
#hud .rank { display: flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; line-height: 1.25; color: #8d6c47; white-space: nowrap; }
#hud .rank i { position: relative; flex: none; width: 9px; height: 9px; }
#hud .rank i img { left: -8.667px; top: -8.667px; width: 26.333px; height: 26.333px; }

/* ---------------- 머리줄 오른쪽: 골드·다이아 알약(마이 티니 .coin) + 우편·설정·메뉴(.tool) + 그 아래 검법 이름 탭 */
#hud .top-r { right: 16.8px; top: 14.4px; height: 36px; display: flex; align-items: center; }
#hud .coin { position: relative; flex: none; height: 22.5px; box-sizing: border-box; padding: 0 9px 0 22.5px; display: flex; align-items: center; border-radius: 11.25px;
  border: 1.5px solid #c9ac77; background: #fffaf0; box-shadow: inset 0 -1.5px 0 #ead9b4, 0 1.5px 0 #0000004d; }
#hud .coin + .coin { margin-left: 21px; }
#hud .coin img { left: -13.5px; top: 50%; width: 31.5px; height: 31.5px; transform: translateY(-50%); filter: drop-shadow(0 1.5px .75px #0005); }
#hud .coin b { font-size: 11.25px; font-weight: 900; line-height: 1; white-space: nowrap; }
#hud .coin .gold { color: #e0780f; } #hud .coin .diamond { color: #2f7fcf; }
#hud .tools { display: flex; gap: 4.5px; margin-left: 9px; flex: none; }
#hud .tool { position: relative; width: 33px; height: 33px; }
#hud .tool img { left: -6.5px; top: -6.5px; width: 46px; height: 46px; }
#hud .tool .pr { left: -4.66px; top: -4.66px; width: 42.32px; height: 42.32px; opacity: 0; }   /* 누름 = scale(.92) 그림(상태는 모양만 바꾼다) */
#hud .tool.on .up { opacity: 0; } #hud .tool.on .pr { opacity: 1; }
#hud .fx-tab { right: 16.8px; top: 54.9px; width: 96px; height: 22px; box-sizing: border-box; border-radius: 11px; background: rgba(6,7,10,.45); border: 1px solid rgba(232,238,246,.345);
  color: #fff; font-size: 10.8px; font-weight: 700; line-height: 20px; text-align: center; white-space: nowrap; }

/* ---------------- 체력 바(EFZ 화면 아래 가운데 캡슐, 가로 = clamp(무대 가로 × .24, 192, 240) — 게임이 글루 값으로 넓힌다) */
#hud .hp { left: 304px; top: 398px; width: 192px; height: 12px; }
#hud .hp-bg { position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(rgba(20,22,26,.45), rgba(6,7,10,.45)); }
#hud .hp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 6px; background: linear-gradient(rgba(255,90,74,.75), rgba(224,31,22,.75)); }   /* 전 globalAlpha .75 를 색에(겹 불투명도는 엔진이 층마다) */
#hud .hp-shine { position: absolute; left: 2px; right: 2px; top: 1px; height: 4.8px; border-radius: 2.4px; background: rgba(255,255,255,.165); }
#hud .hp-text { position: absolute; left: 0; right: 0; top: 0; height: 12px; line-height: 13px; text-align: center; font-size: 10.8px;
  text-shadow: 1.5px 0 #000c, -1.5px 0 #000c, 0 1.5px #000c, 0 -1.5px #000c, 1.1px 1.1px #000c, -1.1px 1.1px #000c, 1.1px -1.1px #000c, -1.1px -1.1px #000c; }

/* ---------------- 조작(EFZ scr_hud_ctrl_*, 판·아이콘·호 그림 = ui/art). 칸 = 누르는 원(지름 2r), 판 그림은 그림자만큼 10 바깥 */
#hud .pad { width: 176px; height: 176px; }
#hud .pad > img, #hud .btn > img.p { left: -10px; top: -10px; }
#hud .joy { left: 62px; top: 244px; }
#hud .joy > img { width: 196px; height: 196px; }
#hud .joy .run { left: -7px; top: -7px; width: 190px; height: 190px; }
#hud .joy .p-on, #hud .btn .p-on { opacity: 0; }
#hud .joy.on .p-on, #hud .btn.on .p-on { opacity: 1; }
#hud .joy.on .p-off, #hud .btn.on .p-off { opacity: 0; }
#hud .btn { width: 130px; height: 130px; }
#hud .btn > img.p { width: 150px; height: 150px; }
#hud .btn .i { opacity: .39; }          /* 아이콘 (눌림 .96 : .78) × .5 */
#hud .btn.on .i { opacity: .48; }
#hud .b-atk { right: 45px; top: 295px; }
#hud .b-atk .i { left: 20px; top: 20px; width: 90px; height: 90px; }
#hud .b-sm { width: 65px; height: 65px; }
#hud .b-sm > img.p { width: 85px; height: 85px; }
#hud .b-sm .i { left: 5.667px; top: 5.667px; width: 53.667px; height: 53.667px; }
#hud .b-jump { right: 174.5px; top: 271.5px; }
#hud .b-roll { right: 87.5px; top: 215.5px; }
#hud .b-hand { right: 188px; top: 338px; width: 72px; height: 72px; }
#hud .b-hand > img.p { width: 92px; height: 92px; }
#hud .b-hand .i { left: 7.167px; top: 7.167px; width: 57.667px; height: 57.667px; }
#hud .b-hand .p-idle { opacity: 0; }
#hud .b-hand.off .p-idle { opacity: 1; }
#hud .b-hand.off .p-off { opacity: 0; }
#hud .b-hand.off .i { opacity: .0858; }   /* 대상이 없으면 숨기지 않고 알파 .22(EFZ UM:5799-5800) */

/* ---------------- 전체 막: 부활 기다림(검은 .65 + 남은 초) · 피격 빨간 화면(전체 + 위아래 34 띠, 불투명도는 게임이 준다) */
#hud .respawn { left: 0; right: 0; top: 0; height: 450px; background: rgba(0,0,0,.65); }
#hud .respawn b { position: absolute; left: 0; right: 0; top: 200px; height: 50px; line-height: 50px; text-align: center; color: #fff; font-size: 40px; font-weight: 900; }
#hud .flash { left: 0; right: 0; top: 0; height: 450px; background: #f00; opacity: .18; }
#hud .flash-band { left: 0; right: 0; height: 34px; background: #f00; opacity: .1; }
#hud .flash-band.top { top: 0; } #hud .flash-band.bottom { top: 416px; }

/* ---------------- 스테이지 글자(bunsin_stage drawStage): 기록 중 초 · 결과 띠 */
#hud .stage-rec { left: 0; right: 0; top: 50px; height: 24px; line-height: 24px; text-align: center; font-size: 18px; font-weight: 800; color: #ffd36b; }
#hud .banner { left: 0; right: 0; top: 124px; height: 40px; line-height: 40px; text-align: center; font-size: 30px; font-weight: 800; }

/* ---------------- 월드 고정 글자(기준 화면 EFZ px × .9). 기준점(data-world-pivot)이 투영한 점에 온다 */
#hud .w-name { font-size: 12px; }
#hud .w-npc-title { font-size: 12px; color: #ffd36b; }
#hud .w-ebar { width: 68.4px; height: 7.2px; }
#hud .w-ebar i { position: absolute; left: 0; top: 0; bottom: 0; box-sizing: border-box; border: 1.8px solid transparent; }
#hud .w-ebar .bg { right: 0; opacity: .82; border-image: url(art/ebar-bg.png) 16 fill / 1.8px stretch; }
#hud .w-ebar .fill { width: 100%; border-image: url(art/ebar-fill.png) 16 fill / 1.8px stretch; }
#hud .w-prompt { display: flex; align-items: center; gap: 5.4px; font-size: 14.4px; }
#hud .w-prompt i, #hud .w-prompt-big i { position: relative; flex: none; width: 21.6px; height: 21.6px; }
#hud .w-prompt i img { left: -7.8px; top: -7.8px; width: 37.2px; height: 37.2px; }
#hud .w-prompt-big { display: flex; align-items: center; gap: 5.4px; font-size: 19.2px; }
#hud .w-prompt-big i { width: 26.4px; height: 26.4px; }
#hud .w-prompt-big i img { left: -9.533px; top: -9.533px; width: 45.467px; height: 45.467px; }
#hud .w-bubble { height: 31.2px; }
#hud .w-bubble .pill { position: relative; height: 25.8px; box-sizing: border-box; padding: 0 10.8px; border-radius: 12.9px; background: #fffdf8; border: .72px solid rgba(94,61,34,.22);
  box-shadow: 0 1.8px 5.4px rgba(40,30,20,.28); color: #5e3d22; font-size: 13.2px; font-weight: 700; line-height: 24.4px; white-space: nowrap; }
#hud .w-bubble .full { color: transparent; }
#hud .w-bubble .typed { position: absolute; left: 10.8px; top: 0; }
#hud .w-bubble img { left: 50%; top: 24.6px; width: 21.667px; height: 17.667px; transform: translateX(-50%); }
#hud .w-dmg { font-size: 14.4px; font-weight: 900; }
#hud .w-dmg.good { color: #ffd36b; }   /* 떨어뜨린 물품 이름(키트 상태 good = 모양만) */
#hud .w-inv { font-size: 12px; color: #808080; }
#hud .w-ghost { font-size: 11px; font-weight: 800; color: #bcd8ff; }
#hud .w-knob { width: 65.333px; height: 65.333px; }
#hud .w-knob img { left: 0; top: 0; width: 65.333px; height: 65.333px; }
#hud .w-knob .k-on { opacity: 0; }
#hud .w-knob.on .k-on { opacity: 1; } #hud .w-knob.on .k-off { opacity: 0; }
#hud .w-push { width: 185.333px; height: 185.333px; }
#hud .w-aim { width: 139.333px; height: 139.333px; }
#hud .w-push img, #hud .w-aim img { left: 0; top: 0; width: 100%; height: 100%; }

/* ---------------- 기록 확인 창(bunsin_stage stagePromptLayout: 300x150 가운데, 버튼 110x44) */
#hud .stage-in > * { position: absolute; }
#hud .stage-in .dim { left: 0; right: 0; top: 0; height: 450px; background: rgba(0,0,0,.45); }
#hud .ask { left: 250px; top: 150px; width: 300px; height: 150px; box-sizing: border-box; border-radius: 14px; background: rgba(24,26,32,.94); border: 2px solid rgba(255,255,255,.25); }
#hud .ask > * { position: absolute; }
#hud .ask-q { left: 0; right: 0; top: 34px; height: 24px; line-height: 24px; text-align: center; font-size: 20px; font-weight: 800; }
#hud .ask-yes, #hud .ask-no { top: 84px; width: 110px; height: 44px; border-radius: 10px; font-size: 17px; font-weight: 800; line-height: 44px; text-align: center; }
#hud .ask-yes { left: 28px; background: #e0a93a; } #hud .ask-no { left: 158px; background: #5b606b; }