/* 분신 용사 HUD — 키트 목업 규약(WU-5, 2026-09-27). 전 battle.js 캔버스 HUD(drawTopBar · drawHud · drawHpHud · drawFxTab · drawRespawn · drawFlash ·
   띠 글자 · 머리 위 글자·막대·말풍선)를 옮긴 것. 목업 페이지(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; }

/* ---------------- 머리줄 왼쪽: 프로필 칸 + 지금 자리 줄(2026-10-28 사용자 "왼쪽상단에 미니맵 … 제거 · 계정 프로필정보정도만 · 내 프로필사진이랑 이름 길드 칭호 랭킹칸
   (랭킹은 지금없으니까 랭킹아이콘이랑 랭킹 정보 없음 -) · 인기 모바일게임 좌상단 프로필 … 참고 · 프로필 밑에는 … 지역위치 · 누르면 지도 UI"). 값 = features/hud/profile_card.js.
   참고(10-28 직접 본 스토어 · 기사 화면 — 버섯커 키우기 · 라이즈 오브 킹덤즈 · 리니지W 좌상단 초상 / 나이트 크로우 · 로드나인 지역 띠):
   초상 = 원 + 금 테 · 화면 짧은 변 8~11%(GUI 450 → 42) · 모서리에 붙임 · 오른쪽 글자 = 짙은 반투명 띠(오른쪽으로 흐려짐) · 지역 = 위치 핀 + 이름 띠.
   크기 = 고품질UI(GUI 450): 이름 12.5 · 칭호 · 길드 · 랭킹 9.5 · 아이콘 11 · 지역 줄 높이 20(알약 28 보다 작게 — 머리줄 한쪽 글자 줄).
   색 = 금 테 #c8aa6e(작은 팝업 금선 18-popup-dark) · 판 #0d1011(퀘스트 알리미 판) · 칭호 금 #e8c979(지갑 골드 · 퀘스트 메인) · 회 #b9bcb4(EFZ 회 글자). */
#hud .top-l { left: 8px; top: 8px; pointer-events: none; }
#hud .pc-card { position: relative; display: flex; align-items: center; height: 46px; }
#hud .pc-face { position: relative; z-index: 1; flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #3a3f44, #121518 70%);
  box-shadow: 0 0 0 1.5px #c8aa6e, 0 0 0 2.5px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .55); }
#hud .pc-face img { left: 0; top: 0; width: 42px; height: 42px; object-fit: cover; image-rendering: pixelated; }
#hud .pc-txt { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 150px; height: 46px; margin-left: -16px; padding-left: 22px; box-sizing: border-box;
  background: linear-gradient(90deg, rgba(13, 16, 17, .78), rgba(13, 16, 17, .55) 62%, rgba(13, 16, 17, 0)); border-radius: 0 3px 3px 0; }
#hud .pc-txt::before, #hud .pc-txt::after { content: ""; position: absolute; left: 16px; right: 22%; height: 1px; background: linear-gradient(90deg, rgba(200, 170, 110, .55), rgba(200, 170, 110, 0)); }   /* 위아래 1px 금 빛선(제목 띠 말씨) */
#hud .pc-txt::before { top: 0; } #hud .pc-txt::after { bottom: 0; }
#hud .pc-ttl, #hud .pc-name, #hud .pc-sub { display: block; white-space: nowrap; overflow: hidden; line-height: 1.15; text-shadow: 0 1px 2px #000; }
#hud .pc-ttl { font-size: 9px; font-weight: 800; color: #e8c979; }
#hud .pc-ttl.none { color: #8d9089; font-weight: 700; }
#hud .pc-name { font-size: 12.5px; font-weight: 900; color: #f2f0e7; letter-spacing: .2px; }
#hud .pc-sub { display: flex; align-items: center; gap: 7px; font-size: 9.5px; font-weight: 700; color: #b9bcb4; }
#hud .pc-guild, #hud .pc-rank { display: flex; align-items: center; gap: 3px; min-width: 0; }
#hud .pc-guild b { overflow: hidden; text-overflow: ellipsis; max-width: 66px; }
#hud .pc-guild.none b { color: #8d9089; }
#hud .pc-emb { position: static; flex: none; width: 11px; height: 11px; }
#hud .pc-guild.none .pc-emb { display: none; }
#hud .pc-rank::before, #hud .pc-pin::before { content: ""; display: block; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
#hud .pc-rank::before { width: 11px; height: 11px; color: #e6e2d6; -webkit-mask-image: url(../assets/icons/menu-ranking.png); mask-image: url(../assets/icons/menu-ranking.png); }   /* 메뉴 [랭킹]과 같은 흰 선 아이콘 */
#hud .pc-rank b { color: #f2f0e7; }
/* 지금 자리 줄(로드나인 위치 핀 · 나이트 크로우 지역 띠): 지도 아이콘(메뉴 [지도]와 같은 흰 선) + 이름 + ›(누르면 지도 창 — battle topBarHit 'place') · 바뀌면 살짝 떠오름 */
#hud .pc-where { display: inline-flex; align-items: center; gap: 5px; height: 28px; min-width: 132px; box-sizing: border-box; margin-top: 4px; padding: 0 10px 0 8px; border-radius: 14px; white-space: nowrap; color: #f2f0e7;   /* 11-04 레이 R2 "[나의 하늘섬] 단추가 작아 프로필 · 퀘스트가 눌림": 20 → 알약 28(고품질UI) · 폭 132 이상, 퀘스트 알리미는 6 아래로(quest.css top 92) */
  background: linear-gradient(90deg, rgba(13, 16, 17, .72), rgba(13, 16, 17, .5)); box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .38); }
#hud .pc-pin::before { width: 14px; height: 14px; color: #e8c979; -webkit-mask-image: url(../assets/icons/menu-map.png); mask-image: url(../assets/icons/menu-map.png); }
#hud .pc-place { flex: 1; font-size: 12px; font-weight: 800; text-shadow: 0 1px 2px #000; }
#hud .pc-go { font-style: normal; font-size: 12px; font-weight: 900; line-height: 1; color: #b9bcb4; margin-top: -1px; }
#hud .pc-go::before { content: "›"; }
#hud .pc-where.in .pc-place { animation: pc-where-in .32s ease-out both; }
#hud .pc-where.press { animation: pc-press .22s ease-out both; }   /* 누름 .92 → 1.06(고품질UI 연출) */
#hud .pc-card.press { animation: pc-press .22s ease-out both; }
/* 받은 친구 신청 점(11-04 W15 — 친구 칸이 메뉴에서 내 프로필 [친구] 탭으로 옮겨 감): 얼굴 칸 오른쪽 위, 내 프로필 탭 점(10-social .mp-dot)과 같은 빨강 · 숨쉬기 */
#hud .pc-dot { position: absolute; z-index: 2; left: 34px; top: 1px; width: 9px; height: 9px; border-radius: 50%; background: #ff5a4a; border: 1.5px solid #fff4e0; box-shadow: 0 0 5px #ff5a4a; animation: pc-dot 1.4s ease-in-out infinite; pointer-events: none; display: none; }
#hud .pc-card.req .pc-dot { display: block; }
@keyframes pc-dot { 50% { transform: scale(1.3); } }
@keyframes pc-where-in { from { opacity: 0; transform: translateY(-3px); } }
@keyframes pc-press { 0% { transform: scale(1); } 27% { transform: scale(.92); } 65% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* ---------------- 머리줄 오른쪽: 골드·다이아 알약(마이 티니 .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; }
  color: #fff; font-size: 10.8px; font-weight: 700; line-height: 20px; text-align: center; white-space: nowrap; }
#hud .hair-tab { right: 16.8px; top: 80.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; }   /* 검법 탭 바로 아래(4px 틈) — 개발 서버에서만 */

/* ---------------- 체력 바(EFZ 화면 아래 가운데 캡슐, 가로 = clamp(무대 가로 × .24, 192, 240) — 게임이 글루 값으로 넓힌다)
   2026-10-24 사용자 "체력이랑 경험치바 디자인이 너무 플랫하고 구리거든 인기 모바일게임 레퍼런스조사해서 퀄리티좀 상승 · 눈에 잘 안띔":
   흥행작 HUD 캡처(메이플스토리 PC · 메이플스토리M 2016 · 메이플 키우기 · 리니지W · 나이트 크로우 · 오딘 · 버섯커 키우기 — .local/tmp/hudbuff/ref, git 밖) 공통 =
   바는 두껍지 않고 테 · 홈 · 위아래 밝기 차이 · 채움 끝 빛으로 바탕과 떨어진다. 중세라 메이플M(2016) · 버섯커 결 금선 테:
   테 = 검은 1px + 금 1px(#c9a24a) + 검은 1px(바깥 상자 그림자 — 안쪽 크기 · 트레일 자리는 그대로) · 홈 = 짙은 적흑 + 위 안쪽 그림자 ·
   채움 = 불투명 붉은 세로 4단(위 1~2px 밝은 띠 · 아래 어두움, 메이플 PC #faa0da/#df3e72 · 오딘 #dc0002/#ab0500 결) + 끝 빛(리니지W) ·
   저체력(30% 아래) = 테가 붉게 맥박(1047 ms, ui-juice 등급 빛 주기). 숫자 = 가운데 흰 글자 + 검은 외곽선(공통). */
#hud .hp { left: 304px; top: 398px; width: 192px; height: 12px; }
#hud .hp-bg { position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(#0d0507, #26100f 55%, #1c0b0c);
  box-shadow: inset 0 1.5px 2px #000, 0 0 0 1px #140a04, 0 0 0 2px #c9a24a, 0 0 0 3px #120a05, 0 2px 5px 3px rgba(0, 0, 0, .45); }
#hud .hp.low .hp-bg { animation: hp-low 1.05s ease-in-out infinite alternate; }
#hud .hp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 6px; overflow: hidden;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 14px, rgba(255, 255, 255, .09) 18px 24px, rgba(255, 255, 255, 0) 28px 40px) 0 0 / 40px 100%,
              linear-gradient(#ff9a9a, #ee4152 22%, #c8213a 60%, #86101f);
  animation: hp-flow 2.6s linear infinite; }   /* 가만히 있을 때(10-24 사용자 "가만이있을때도 체력바 연출"): 안쪽 옅은 빗금 빛이 오른쪽으로 흐름(물약이 차 있는 결) + 아래 빛 쓸기 */
#hud .hp-fill::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(90deg, rgba(255, 240, 200, 0), rgba(255, 240, 200, .75)); }   /* 채움 끝 빛(리니지W HP 끝 빛 점 결) */
#hud .hp-fill::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent); animation: hp-sheen 3.6s ease-in-out 1.5s infinite; }   /* 가끔 지나가는 빛(10-24 더 밝게 .22 → .34, 4.2 → 3.6 s) */
#hud .hp-trail { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: linear-gradient(#fff6dc, #ffd08c 60%, #e09a50); }   /* 트레일: 채움 끝(둥근 끝 6px 밑으로 들어가 틈 없이)부터 지난 체력까지 — 호스트가 left·width 를 준다 */
#hud .hp-shine { position: absolute; left: 3px; right: 3px; top: 1px; height: 3.5px; border-radius: 2px; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .08)); }
/* 10% 눈금은 걷음(10-24 사용자 "체력바 중간에 검은색 격자 칸막이 지워줘 안이쁨"). ::after = 피격 · 회복 때 테 둘레 번쩍(아래) */
#hud .hp::after { content: ""; position: absolute; inset: -3px; border-radius: 8px; pointer-events: none; opacity: 0; }
/* 피격 · 회복(10-24 사용자 "체력피해를입는다거나 회복할떄 연출", host 01 frame 이 hit · big · heal 을 다시 건다):
   피격 = 바가 짧게 흔들림(큰 피해 = 깎인 양 8% 이상이면 더 세고 길게) + 채움 흰 번쩍 + 테 둘레 붉은 빛 — 트레일(.hp-trail)이 깎인 양을 잠깐 남김.
   회복 = 채움이 밝아졌다 돌아옴 + 빛 한 번 쓸기 + 새로 찬 칸(.hp-gain)이 연두빛으로 떴다 사라짐 + 테 둘레 연두 빛 */
#hud .hp.hit { animation: hp-shake .26s ease-out; }
#hud .hp.hit.big { animation: hp-shake-big .42s ease-out; }
#hud .hp.hit .hp-fill { animation: hp-flow 2.6s linear infinite, hp-hit-flash .24s ease-out; }
#hud .hp.hit::after { box-shadow: 0 0 0 2px rgba(255, 96, 70, .95), 0 0 10px 3px rgba(255, 50, 30, .7); animation: hp-ring .34s ease-out; }
#hud .hp.hit.big::after { animation-duration: .5s; }
#hud .hp.heal .hp-fill { animation: hp-flow 2.6s linear infinite, hp-heal-glow .6s ease-out; }
#hud .hp.heal .hp-fill::before { animation: hp-sheen-once .55s ease-out; }
#hud .hp.heal::after { box-shadow: 0 0 0 2px rgba(170, 255, 140, .9), 0 0 10px 3px rgba(120, 255, 110, .55); animation: hp-ring .6s ease-out; }
#hud .hp-gain { position: absolute; top: 0; bottom: 0; width: 0; border-radius: 6px; pointer-events: none; opacity: 0;
  background: linear-gradient(#f6ffe6, #b6ff9a 55%, #6fd85a); box-shadow: 0 0 6px 1px rgba(170, 255, 140, .8); }
#hud .hp-gain.on { animation: hp-gain .7s ease-out; }
@keyframes hp-flow { to { background-position: 40px 0, 0 0; } }
@keyframes hp-shake { 0% { transform: translate(0, 0); } 20% { transform: translate(-2px, 1px); } 45% { transform: translate(2px, -1px); } 70% { transform: translate(-1px, 0); } 100% { transform: translate(0, 0); } }
@keyframes hp-shake-big { 0% { transform: translate(0, 0); } 12% { transform: translate(-4px, 1.5px); } 28% { transform: translate(4px, -1.5px); } 44% { transform: translate(-3px, 1px); } 62% { transform: translate(2px, 0); } 80% { transform: translate(-1px, 0); } 100% { transform: translate(0, 0); } }
@keyframes hp-hit-flash { 0% { filter: brightness(2.4) saturate(.25); } 100% { filter: none; } }
@keyframes hp-heal-glow { 0% { filter: brightness(1.7) saturate(1.2); } 100% { filter: none; } }
@keyframes hp-ring { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hp-gain { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes hp-sheen-once { 0% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(320%) skewX(-20deg); } }
#hud .hp-text { position: absolute; left: 0; right: 0; top: 0; height: 12px; z-index: 1; line-height: 12.5px; text-align: center; font-size: 8.6px; font-weight: 800; color: #fff;   /* 10-24 사용자 "체력 숫자 글씨가 너무 큼 1.25배 줄여": 10.8 → 8.6 */
  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; }
@keyframes hp-sheen { 0% { transform: translateX(-120%) skewX(-20deg); } 40%, 100% { transform: translateX(320%) skewX(-20deg); } }
@keyframes hp-low { to { box-shadow: inset 0 1.5px 2px #000, 0 0 0 1px #140a04, 0 0 0 2px #ff5a4a, 0 0 0 3px #120a05, 0 0 9px 4px rgba(255, 50, 40, .55); } }

/* 경험치 바 · 레벨(2026-10-18 사용자 "체력바 밑에 경험치 바, 체력바·경험치바 옆에 레벨"): 체력 바와 같은 가로·자리(호스트가 left·width 를 같이 맞춤) 바로 밑, 높이 7.
   10-24 같은 금선 테(한 단 얇게: 검은 1px + 금 1px) · 테끼리 붙지 않게 체력 바 아래 6px(옛 3px) · 채움 = 연두(메이플 PC #b0ca05 · 위 #ddf269, 오딘 #8ec301 — 흥행작 EXP 공통색) + 끝 흰 빛(눈금은 체력 바와 같이 걷음).
   레벨 = 두 바 왼쪽(바 왼끝 − 6px 에 오른쪽 맞춤) 금선 테 짙은 판(메이플M 금테 Lv 배지 · 리니지W 메달 결): 작은 금 "Lv" + 큰 흰 숫자, 두 바를 다 덮는 높이. 오르면 톡 튐 · 경험치 채움은 흰빛 번쩍 */
#hud .xp { left: 304px; top: 416px; width: 192px; height: 7px; }
#hud .xp-bg { position: absolute; inset: 0; border-radius: 3.5px; background: linear-gradient(#060904, #121a0c);
  box-shadow: inset 0 1px 1.5px #000, 0 0 0 1px #140a04, 0 0 0 2px rgba(201, 162, 74, .9), 0 2px 4px 2px rgba(0, 0, 0, .4); }
#hud .xp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 3.5px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) calc(100% - 5px), rgba(255, 255, 230, .7)), linear-gradient(#e6f56a, #b0ca05 45%, #6f8a02); }
#hud .xp-shine { position: absolute; left: 1px; right: 1px; top: .5px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .35); }
#hud .xp.up .xp-fill { animation: xp-flash .5s ease-out; }
#hud .xp-text { position: absolute; left: 0; right: 0; top: -1px; height: 9px; z-index: 1; line-height: 9px; text-align: center; font-size: 7.5px; font-weight: 800; color: #fffbe6;
  text-shadow: 1px 0 #000d, -1px 0 #000d, 0 1px #000d, 0 -1px #000d; }
#hud .lvl { top: 396px; height: 28px; box-sizing: border-box; padding: 0 7px 0 6px; display: flex; align-items: center; gap: 2px; white-space: nowrap; transform-origin: 100% 50%;
  border-radius: 6px; background: linear-gradient(#3a2a18, #170e07); box-shadow: inset 0 1px 0 rgba(255, 230, 170, .25), 0 0 0 1px #120a05, 0 0 0 2px #c9a24a, 0 0 0 3px #120a05, 0 2px 5px 3px rgba(0, 0, 0, .45);
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 0 1.5px 1px #000; }
#hud .lvl b { font-size: 9px; font-weight: 900; line-height: 1; color: #ffd76a; margin-top: 3px; }
#hud .lvl .lvl-n { font-size: 17px; font-weight: 900; line-height: 1; background: linear-gradient(#ffffff, #fff1c4 55%, #f3c867); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000); text-shadow: none; }
#hud .lvl.up { animation: lvl-pop .6s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes lvl-pop { 0% { transform: scale(1); } 35% { transform: scale(1.3); filter: brightness(1.6); } 100% { transform: scale(1); } }
@keyframes xp-flash { 0% { filter: brightness(2.2); } 100% { filter: none; } }

/* ---------------- 조작(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; }   /* 자리·크기는 설정 조작 탭 버튼 배치(controls applyControls)가 덮는다 — 누름 원은 화면 사각형(circle)이라 같이 움직인다 */
#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 + 남은 초) · 피격 붉은 가장자리(비네트 — 불투명도 · 안쪽 빈 원 --hv 는 게임이 준다, hud host hurtFx) */
#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 { --hv: 50%; left: 0; right: 0; top: 0; height: 450px; opacity: .5;
  background: radial-gradient(ellipse 72% 78% at 50% 50%, transparent var(--hv), rgba(150, 0, 0, .6) calc(var(--hv) + 20%), rgba(110, 0, 0, .95) calc(var(--hv) + 42%)); }


/* ---------------- 판별 HUD(#hud[data-field] — host fieldMode · battle.hudField, 2026-10-28 사용자 "다른사람 섬이나 내 섬에 있을때는 왼쪽하단이랑 오른쪽하단에있는 조이스틱만 있는거야
   스킬버튼 안보이고 자동사냥 버튼도없음 체력바나 레벨 이런것도 없고 / 통통초원섬같은 사냥터에 오면 기본적으로 자동사냥 활성화가 되는거고, 이동버튼이나 우측 공격 점프 상호작용 버튼 사라지고
   스킬버튼만 남는데 스킬 버튼도 공격버튼쪽에다가 잘 배치해줘 모바일게임들 액션게임들 보면 … 스킬버튼은 잘 쓰고 있는지, 쿨타임만 볼 수 있으면 되잖아 체력이랑 레벨 경험치바 이런건 남겨줘").
   isle(내 섬 · 남의 섬 · 하늘배) = 조이스틱 + 점프 · 상호작용만(같은 날 2차 "섬에서는 공격버튼 제거해주고 상호작용 버튼이랑 점프 버튼만 있으면 될거같아"):
     공격 · 스킬 · 버프 칸 · 걸린 버프 줄 · 변신 · 물약 · 자동 단추 · AUTO 띠 · 체력 · 경험치 · 레벨을 숨긴다.
     자리(같은 날 3차 "조이스틱 버튼들 … 화면크기비율에따라 이상한거같음 인기있는 모바일게임 참고해서 자연스럽게"): 옛 판은 공격 단추만 숨겨 점프 · 상호작용이 빈 모서리 옆
     가운데에 떠 있었다 → 원신 · 디아블로 이모탈 · 리니지W 공통 = 왼쪽 아래 조이스틱(화면 높이 30% 안팎, 가운데 = 왼쪽 · 아래에서 높이의 27% 안팎) +
     오른쪽 아래 모서리에 가장 자주 누르는 큰 단추 하나 + 그 왼쪽 위 호에 다음 단추:
       조이스틱 = 판 176 × .82 = 144(32%) · 가운데 왼쪽 124 · 위 328(아래 122) / 점프 = 모서리 큰 단추 65 × 1.3 = 85 · 가운데 오른쪽 88 · 위 356 /
       상호작용 72 = 점프에서 145° · 100(가운데 오른쪽 170 · 위 299). 자리는 모두 가장자리 기준이라 화면비가 바뀌어도 같은 손자리.
     조작 탭 [버튼 위치 · 크기 조정](controls 10-ctl-edit)이 이 셋을 고친다(인라인 left · top · scale 이 이 기본값을 덮는다 — 섬 판만).
   hunt(하늘섬 사냥터 — 자동사냥 늘 켬, autohunt 58k) = 조이스틱 · 공격 · 점프 · 상호작용 · 자동 단추를 숨기고(자동이 늘 켜져 있어 끌 단추를 두지 않는다 — 꺼지면 걸을 조작이 없다),
   스킬 칸을 옛 공격 단추 자리(가운데 오른쪽 110 · 위 360)에 액션 모바일 게임 결로 모은다(디아블로 이모탈 · 와일드 리프트 · 리니지2 레볼루션 공통 = 모서리 큰 단추 + 둘레 호 스킬):
     모서리 C(오른쪽 100 · 위 358) = 마지막 스킬(가장 높은 단계 — 궁극기 육각 테) 64 · 안쪽 호 반지름 76 = 나머지 스킬 52 를 195° · 145° · 95° · 45°(왼쪽 아래 → 위 → 오른쪽 위, 1단계가 엄지 왼쪽) ·
     바깥 호 반지름 136 = 물약 46(192° — 스킬 1 바로 왼쪽, 아래 여백 41) → 버프 44(168° · 146° · 124°) → 변신(버프 다음 칸, 65 × .8 = 52)을 24° 간격으로 이어 붙인다
     (같은 날 3차: 옛 판은 물약이 아래 가장자리에 붙고(205°) 버프 · 변신이 떨어져 떠 있었다 — 버프 수는 #hud[data-buffs], askill 10d). 각도 = 수학 각(0° 오른쪽 · 90° 위), 자리 = 가운데 − 반 폭.
   숨은 칸은 누를 수 없다(host circle — 크기 0 = 먼 자리). 조작 편집 화면이 열리면 섬 판으로 보인다(조이스틱 · 점프 · 상호작용만 — 스킬 칸 GPU 캔버스를 깨우지 않는다). */
/* 섬 = 전투 HUD 를 숨기되 왼쪽 위 버프 줄(.bf-row — 음식 · 변신)은 남긴다(음식은 섬 요리솥에서 먹는다). */
#hud[data-field="isle"] .joy { left: 36px; top: 240px; transform: scale(.82); }
#hud[data-field="isle"] .b-jump { right: 55.5px; top: 323.5px; transform: scale(1.3); }
#hud[data-field="isle"] .b-hand { right: 134px; top: 263px; }
#hud[data-field="isle"] .b-atk, #hud[data-field="isle"] .hp, #hud[data-field="isle"] .xp, #hud[data-field="isle"] .lvl, #hud[data-field="isle"] .sk-bar,
#hud[data-field="isle"] .b-roll, #hud[data-field="isle"] .pq-btn, #hud[data-field="isle"] .ah-band, #hud[data-field="isle"] .gf-slot-btn.h-autohunt,
#hud[data-field="hunt"] .joy, #hud[data-field="hunt"] .ctl, #hud[data-field="hunt"] .b-atk, #hud[data-field="hunt"] .b-jump, #hud[data-field="hunt"] .b-hand,
#hud[data-field="hunt"] .gf-slot-btn.h-autohunt { display: none; }
/* 사냥터 판 자동 끔(11-06 유저 "자동사냥 on/off 버튼" — AUTO 단추 = autohunt 58k .ah-btn, #hud[data-ah] 도 그곳이 쓴다) = 조이스틱을 섬 판 자리로 꺼내 손으로 걷고, 공격은 스킬 칸 */
#hud[data-field="hunt"][data-ah="off"] .joy { display: block; left: 36px; top: 240px; transform: scale(.82); }
#hud[data-field="hunt"][data-ah="off"] .ctl { display: block; }   /* 조이스틱 손잡이 · 미는 호 틀 */
#hud[data-field="hunt"] .sk-btn.s0 { right: 147.4px; top: 351.7px; }
#hud[data-field="hunt"] .sk-btn.s1 { right: 136.3px; top: 288.4px; }
#hud[data-field="hunt"] .sk-btn.s2 { right: 80.6px; top: 256.3px; }
#hud[data-field="hunt"] .sk-btn.s3 { right: 20.3px; top: 278.3px; }
#hud[data-field="hunt"] .sk-bar[data-n="5"] .sk-btn.s4, #hud[data-field="hunt"] .sk-bar[data-n="4"] .sk-btn.s3, #hud[data-field="hunt"] .sk-bar[data-n="3"] .sk-btn.s2 {
  right: 68px; top: 326px; width: 64px; height: 64px; }
#hud[data-field="hunt"] .sk-bar[data-n="5"] .s4 .sk-sec, #hud[data-field="hunt"] .sk-bar[data-n="4"] .s3 .sk-sec, #hud[data-field="hunt"] .sk-bar[data-n="3"] .s2 .sk-sec { line-height: 64px; font-size: 20px; }
#hud[data-field="hunt"] .sk-btn.sk-buff.b0 { right: 211px; top: 307.7px; }
#hud[data-field="hunt"] .sk-btn.sk-buff.b1 { right: 190.8px; top: 260px; }
#hud[data-field="hunt"] .sk-btn.sk-buff.b2 { right: 154px; top: 223.3px; }
#hud[data-field="hunt"] .b-roll { left: auto !important; right: 180.3px !important; top: 249.5px !important; transform: scale(.8) !important; }   /* 버프 1칸(146°) — 인라인보다 앞선다 */
#hud[data-field="hunt"][data-buffs="0"] .b-roll { right: 200.5px !important; top: 297.2px !important; }   /* 168° */
#hud[data-field="hunt"][data-buffs="2"] .b-roll { right: 143.5px !important; top: 212.8px !important; }   /* 124° */
#hud[data-field="hunt"][data-buffs="3"] .b-roll { right: 91.1px !important; top: 191.5px !important; }    /* 100° */
#hud[data-field="hunt"] .pq-btn { zoom: var(--u, 1); right: 210px; top: 363.3px; }   /* 물약 칸은 #hud 바로 아래(potion.js — 무대 배율 .hud-in 밖, 화면 px)라 무대 배율을 따로 걸어 GUI 자리에 맞춘다 */
#hud[data-field="hunt"] .sk-gl { top: 200px; width: 290px; height: 250px; }   /* 테 빛 캔버스(askill 10e — 자리 · 크기를 CSS 에서 잰다) = 묶음 + 1.5배 고리 */
/* ---------------- 알림 토스트(b.banner — 조작 칸 저장 등 시스템 알림). 2026-10-18 사용자 "글자만 쓰면 어색" — 가운데 30px 흰 글자 → EFZ 알림 판.
   틀 = EFZ obj_npc_quest_toast(Draw_64): 가운데 위(중심 y 48 · GUI 높이 450 = 이 HUD 무대), 폭 ≤ min(430, 화면 폭 − 20), 왼쪽 표식 + 오른쪽 글(font_basic),
   그림자(오른쪽 2 · 아래 5 · α .28). 판 = 작은 팝업과 같은 어두운 둥근 판(windows-css 18-popup-dark: #25292b → #1b1e20 · 1px 밝은 테) + 위아래 가는 금선(#c8aa6e, 아이템 토스트 결).
   2026-10-24 사용자 "자동사냥 ON 토스트 나인패치 전에 제거해달라고 했던 건데 왜 여전히 있는지" — 10-23 크림 나인패치 교체(c7829b03d)가 창(panel.webp)만 바꾸고
   이 HUD 토스트의 양피지 칸(assets/hud/slot.webp)을 빠뜨렸다 → border-image 걷고 판 · 글자색을 어두운 판 값으로.
   한 줄 시스템 알림이라 높이는 진행 막대 줄을 뺀 40. 글 14px Noto(EFZ font_basic 12pt 장체와 같은 폭). 움직임(내려옴 · 머묾 · 사라짐 · 갱신 팝)은 host.js toast() */
#hud .banner { left: 50%; top: 48px; z-index: 6; height: 40px; box-sizing: border-box; min-width: 180px; max-width: min(430px, calc(var(--hw, 800px) - 20px));
  display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 18px 0 11px;
  border: 0; border-image: none; border-radius: 10px; background: linear-gradient(rgba(37, 41, 43, .94), rgba(27, 30, 32, .94));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 2px 5px 6px rgba(0, 0, 0, .35);
  transform: translate(-50%, -50%); transform-origin: 50% 50%; will-change: transform, opacity; }
#hud .banner img { position: static; flex: none; width: 26px; height: 26px; }
#hud .banner .banner-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f2f0e7; font-size: 14px; font-weight: 800; line-height: 18px; }
#hud .banner::before, #hud .banner::after { content: ""; position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, #c8aa6e, transparent); opacity: .7; pointer-events: none; }
#hud .banner::before { top: 0; } #hud .banner::after { bottom: 0; }
/* ---------------- 월드 고정 글자(기준 화면 EFZ px × .9). 기준점(data-world-pivot)이 투영한 점에 온다 */
#hud .w-name { font-size: 12px; }
/* 닉네임 변경 성공(10-20): 내 이름표 fresh(2.4초, host drawPlayerName) = 금빛 번쩍 → 식으며 흰 글자, 뒤에 빛 번쩍(::after 십자 반짝 + 둥근 빛) · 둘레로 빛 점 8개 터짐(::before).
   크기 톡 튐은 호스트 pop(기준점 아래 가운데). isolation = 빛이 글자 뒤(z-index −1)에 머문다 */
#hud .w-name.fresh { isolation: isolate; animation: nick-gold 2.4s ease-out both; }
#hud .w-name.fresh::before, #hud .w-name.fresh::after { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none; }
#hud .w-name.fresh::before { width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; animation: nick-burst .9s .05s ease-out both; }
#hud .w-name.fresh::after { width: 64px; height: 64px; margin: -32px 0 0 -32px; animation: nick-flash .6s ease-out both;
  background: linear-gradient(90deg, transparent 8%, rgba(255,250,220,.95) 50%, transparent 92%) center / 100% 2px no-repeat,
    linear-gradient(0deg, transparent 20%, rgba(255,250,220,.9) 50%, transparent 80%) center / 2px 70% no-repeat,
    radial-gradient(closest-side, rgba(255,244,190,.9), rgba(255,201,60,.45) 45%, rgba(255,201,60,0)); }
@keyframes nick-gold { 0% { color: #fff; filter: brightness(2) drop-shadow(0 0 5px #fff1a8); } 12% { color: #ffe27a; filter: brightness(1.35) drop-shadow(0 0 6px #ffc93c); }
  70% { color: #ffe27a; filter: drop-shadow(0 0 3px rgba(255,201,60,.6)); } 100% { color: #fff; filter: drop-shadow(0 0 0 rgba(255,201,60,0)); } }
@keyframes nick-flash { 0% { opacity: 0; transform: scale(.3) rotate(0deg); } 18% { opacity: 1; } 100% { opacity: 0; transform: scale(1.7) rotate(25deg); } }
@keyframes nick-burst {
  0% { opacity: 1; box-shadow: 0 0 0 2px #fff6c8, 0 0 0 2px #ffd36b, 0 0 0 2px #fff6c8, 0 0 0 2px #ffd36b, 0 0 0 2px #fff6c8, 0 0 0 2px #ffd36b, 0 0 0 2px #fff6c8, 0 0 0 2px #ffd36b; }
  100% { opacity: 0; box-shadow: 48px 0 0 0 #fff6c8, 34px -14px 0 0 #ffd36b, 0 -20px 0 0 #fff6c8, -34px -14px 0 0 #ffd36b, -48px 0 0 0 #fff6c8, -34px 14px 0 0 #ffd36b, 0 20px 0 0 #fff6c8, 34px 14px 0 0 #ffd36b; } }
#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; }
/* 다른 유저 체력바(2026-10-24 사용자 "다른사람 체력바가 좀 촌스러운데 … 깔끔하고 이쁘게"): 몬스터 그림 막대(ebar) 대신 얇은 둥근 줄.
   결 = 내 HUD 체력 줄(01-hud .hp: 어두운 반투명 바탕 · 빨강 그라데이션 · 크림 트레일 · 위 빛)을 작게 — 도깨비의 세계 "캐릭터 위 이름판 + 작은 HP 줄"(분석 문서 §5).
   44×4(전 ebar 51×7.2) · 테 = 검은 1px 그림자(테 그림 없음) · 맞으면 채움은 바로, 크림 트레일은 .28초 뒤 따라 줄어든다(호스트 look 이 둘 다 같은 폭을 준다) */
#hud .w-pbar { width: 44px; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(8,9,12,.62); box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4); }
#hud .w-pbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 2px; }
#hud .w-pbar .trail { background: rgba(255,236,204,.88); transition: width .45s cubic-bezier(.3,0,.2,1) .28s; }   /* 01-hud .hp-trail 크림 */
#hud .w-pbar .fill { background: linear-gradient(#ff6a58, #d9261b); transition: width 80ms linear; }   /* 01-hud .hp-fill 빨강(불투명) */
#hud .w-pbar .fill::after { content: ''; position: absolute; left: 1px; right: 1px; top: 0; height: 1.3px; border-radius: 1px; background: rgba(255,255,255,.3); }   /* 01-hud .hp-shine 위 빛 */
#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; }
/* 말풍선(2026-10-18 사용자 "꼬리가 끊어짐 · 말이 길면 세로로 길어져야 · 글씨가 밑으로"): 칸 + 꼬리를 세로로 쌓고(꼬리가 칸 아래 테를 덮는다) 그림자는 둘을 한 덩어리로(drop-shadow).
   글자 = 한 흐름: 찍힌 글자(.typed) 뒤에 남은 글자(.full, 투명)가 이어져 칸 크기·줄바꿈이 처음부터 끝 문장 그대로다. 가로 max-width 를 넘으면 낱말 단위로 줄을 고르게 나눈다.
   Noto Sans KR 은 글자가 줄 상자 가운데보다 조금 아래에 앉아 위 안쪽 여백을 아래보다 조금 작게 준다(실측 위·아래 같은 틈). 기준점 = 꼬리 끝(아래 가운데). */
#hud .w-bubble { display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 1.8px 2.4px rgba(40,30,20,.3)); }
/* 판 = 나인패치(10-18 사용자 "완전 흰색은 뭐고 — 말풍선 나인패치 레퍼런스 참고": ui/art/chat-bubble-box.png 양피지 크림 + 짙은 갈색 2단 테, slice 24 → 화면 9 px,
   채팅 말 칸 · 얼굴 액자와 한 세트 — ui/art/chat-ninepatch.receipt.json). NPC 말풍선 · 채팅 말풍선이 같이 쓴다. 꼬리 = 따로 그린 조각(chat-bubble-tail.png) */
/* 반투명(10-22 사용자 "말풍선 여기에 투명도 적용"): 판(::before) · 꼬리만 .8, 글자는 그대로 진하게. 판은 꼬리가 덮는 아래 테 자리(꼬리 폭 × 2.2)를 잘라 겹쳐 비치지 않게 */
#hud .w-bubble .pill { position: relative; isolation: isolate; display: block; width: max-content; max-width: 140px; box-sizing: border-box; padding: 4.1px 10.5px 4.5px; border: 1px solid transparent;
  color: #5e3d22; font-size: 13.2px; font-weight: 700; line-height: 16.2px; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; text-align: center; }
#hud .w-bubble .pill::before { content: ''; position: absolute; inset: -1px; z-index: -1; box-sizing: border-box; border: 1px solid transparent; opacity: .8;
  border-image: url(art/chat-bubble-box.png) 24 fill / 9px stretch;
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + 7.8px) 100%, calc(50% + 7.8px) calc(100% - 2.2px), calc(50% - 7.8px) calc(100% - 2.2px), calc(50% - 7.8px) 100%, 0 100%); }
#hud .w-bubble .full { color: transparent; }
#hud .w-bubble img { position: relative; flex: none; width: 15.6px; height: 9.5px; margin: -2.2px 0 0; opacity: .8; }   /* 꼬리 조각(82x50, 위가 열린 끝) — 판 아래 테를 덮고 끝 = 요소 아래(기준점) */
#hud .w-dmg { font-size: 14.4px; font-weight: 900; }
#hud .w-dmg.good { color: #ffd36b; }   /* 떨어뜨린 물품 이름(키트 상태 good = 모양만) */
#hud .w-dmg.hurt { color: #ff6b5a; }   /* 받은 피해(주인공이 맞음) — dungeon-idle 받은 피해 색과 같다 */
#hud .w-dmg.small { font-size: 12px; }   /* 능력 지속 피해(포자 장판 틱 등) = 작은 숫자(dungeon-idle 6 → 5) */
#hud .w-inv { font-size: 12px; color: #808080; }
#hud .w-net { font-size: 11px; font-weight: 800; color: #d7f5c8; }   /* 멀티: 다른 유저 이름(발 밑 — 내 이름표와 같은 자리, 10-20 · 옛 캔버스 netLabels 800 11px #d7f5c8) */
/* 이름표 밑 길드(10-19, EFZ 식 문장 + 길드 이름): 줄 높이 고정 13 — guild · guild-net = 내 · 다른 유저 이름(둘 다 발 밑 아래 기준, 10-20) 바로 밑 */
#hud .w-guild { display: flex; align-items: center; gap: 2px; height: 13px; font-size: 10px; font-weight: 800; color: #ffe08a; }
/* 이름표 밑 칭호(10-25, 이름 · 칭호 · 길드 순): 줄 높이 13 = 길드 줄과 같다, 색·크기 = 프로필 창 칭호(windows-css 10-social .pf-title) */
#hud .w-title { height: 13px; line-height: 13px; font-size: 10px; font-weight: 900; color: #e8c979; white-space: nowrap; }   /* 테두리 = 공용 .o 검은 외곽선(빛 그림자로 덮으면 땅 위에서 흐려진다 — sandbox 캡처 10-25) */
#hud .w-guild canvas { position: relative; flex: none; width: 13px; height: 13px; }
#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%; }
#hud .w-push img { mix-blend-mode: plus-lighter; }   /* 미는 호 = 더하기 섞기(EFZ scr_hud_ctrl_dial_draw 의 bm_add) — 판 테두리 위에서 빛이 겹쳐 밝아진다(2026-10-18 조이스틱 연출) */

/* ---------------- 첫 화면(title) — 공용 gf_onboard.js(POLISH 2026-09-30). 원작 4작 RoomTitle 구조(EFZ scr_title_screen_draw:
   살아 있는 장면 위 로고 · 시작 · 이름/접속 상태 · 왼쪽 아래 버전). 대표 캐릭터 = 스토어 아이콘·그래픽 이미지와 같은 토순이(master.png 자른 ui/art/title-cast.png).
   로고는 디자인 로고 그림(brand.logo)이 오기 전까지 글자 로고. 첫 실행 조작 안내(help) 막은 없다(2026-10-01 사용자). */
#hud .title-in { position: absolute; left: 0; top: 0; width: var(--hw, 800px); height: 450px; zoom: var(--u, 1); pointer-events: auto; }
#hud .title-in > * { position: absolute; }
#hud .t-shade { left: 0; right: 0; top: 0; height: 450px; background: rgba(8,10,14,.5); }
#hud .t-cast { right: 40px; top: 50px; width: 320px; height: 400px; }
#hud .t-logo { left: 40px; top: 110px; width: 400px; height: 60px; line-height: 60px; text-align: center; font-size: 54px; font-weight: 900; color: #ffe39a; }
#hud .t-start { left: 40px; top: 290px; width: 400px; height: 26px; line-height: 26px; text-align: center; font-size: 22px; font-weight: 800; }
#hud .t-account { left: 40px; top: 328px; width: 400px; height: 18px; line-height: 18px; text-align: center; font-size: 14px; color: #d9e2ec; }
#hud .t-ver { left: 24px; top: 420px; height: 14px; line-height: 14px; font-size: 11px; color: #c9d2dc; }

/* 재화 옆 무료 광고(release-0930 SHOP-ADS, 키트 bm.shop-paid-only: 광고 보상은 상점 밖 그 재화 옆) — 알약 오른쪽 끝 AD 딱지 + 볼 수 있으면 빨간 점. 누름 = 알약(battle.js 머리줄 wallet) */
#hud .coin .ad-mark { position: absolute; right: -8px; bottom: -7px; padding: 0 3px; border-radius: 4px; background: #3f7d2c; color: #fffce7; font-size: 7.5px; font-style: normal; font-weight: 900; line-height: 10px; }
body.gf-no-paid #hud .coin .ad-mark, body.gf-no-paid #hud .coin .dot, body.gf-no-paid #ui .menu-item.m-shop, body.gf-no-paid #ui .shop-dot { display: none; }   /* production 웹: 결제·광고 없음 → 상점 진입 · AD 딱지 · 점 숨김(windows.js paid) */
#hud .coin .dot { position: absolute; right: -12px; top: -11px; width: 9px; height: 9px; border-radius: 50%; background: #e2412f; border: 2px solid #fff4e0; }   /* 13 px(10 px 점은 가장자리 번짐만으로 Unity 와 갈린다) */
/* ---------------- 조작 버튼 배치 편집(2026-10-18, EFZ [전체 버튼 조정]): 화면이 어두워지고 버튼마다 금빛 점선 테가 숨쉬듯 빛남 · 이름표 · 아래 판이 미끄러져 올라옴 */
#hud.ctl-editing::before { content: ""; position: absolute; inset: 0; background: rgba(8, 12, 18, .5); pointer-events: none; animation: ctl-dim .25s ease-out both; }
@keyframes ctl-dim { from { opacity: 0; } }
#hud.ctl-editing .joy, #hud.ctl-editing .b-jump, #hud.ctl-editing .b-hand {   /* 편집 열쇠 = 섬 판 조이스틱 · 점프 · 상호작용(10-28) */
  pointer-events: auto; cursor: grab; touch-action: none; border-radius: 50%; animation: ctl-glow 1.4s ease-in-out infinite; }
#hud.ctl-editing .b-hand.off .i { opacity: .39; }
@keyframes ctl-glow { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 211, 107, .55), 0 0 10px rgba(255, 211, 107, .25); } 50% { box-shadow: 0 0 0 3px rgba(255, 224, 140, .95), 0 0 22px rgba(255, 211, 107, .6); } }
#hud.ctl-editing .ctl-sel { animation: ctl-sel 0.9s ease-in-out infinite; }
@keyframes ctl-sel { 0%, 100% { box-shadow: 0 0 0 3px #ffe08a, 0 0 22px rgba(255, 220, 120, .8); } 50% { box-shadow: 0 0 0 4px #fff3c4, 0 0 34px rgba(255, 230, 150, 1); } }
#hud.ctl-editing .ctl-drag { cursor: grabbing; }
#hud .ctl-tag { display: none; }
#hud.ctl-editing .ctl-tag { display: block; position: absolute; left: 50%; top: -24px; transform: translateX(-50%); padding: 2px 9px; border-radius: 999px; white-space: nowrap;   /* 이름표 = 어두운 알약(18-popup-dark 판 색 · 글자 --ink) — 10-28 옛 갈색 판 + 금 테 */
  background: rgba(27, 30, 32, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 2px 4px rgba(0, 0, 0, .4); color: #f2f0e7; font-size: 11px; font-weight: 700; pointer-events: none; animation: ctl-tag .3s ease-out both; }
@keyframes ctl-tag { from { opacity: 0; transform: translate(-50%, 6px); } }
/* 아래 판 = 작은 팝업 공용 어두운 판(windows-css 18-popup-dark — #25292b → #1b1e20 · 둥근 12 · 짙은 1.5 테 · 모서리 아칸서스 + 네 변 1px #4d4944 .7).
   10-28 사용자 "두번째사진 보면 게임에 UI 스타일이랑 달라 예전 UI스타일같아" — 옛 판 = 크림 #fbf1dc · 갈색 테 #b48a4f · 초록 저장 #8fae4c · 판 폭 3칸 단추(10-18 그대로 남아 있던 것).
   크기 = 설정 창 값(10-24 폭 330 · 글자 11~12.5 · 단추 28), 막대 = 설정 소리 막대 그림(ui/art/vol-track · vol-fill · vol-knob, 02-sheet-settings · 18-popup-dark .settings 높이 26 · 손잡이 22),
   단추 = 글자 폭 알약(기본값 = 보조 반투명 왼쪽 · 취소 = 베이지 · 저장 = 청록 결정 — 01-popup 알약 색). 연출 = 판이 미끄러져 올라옴(ctl-up) · 누름 .92 → 뗄 때 튕김 · 손잡이 잡으면 1.12 */
#hud .ctl-edit-panel { --ink: #f2f0e7; --ink-soft: #9a9d98; position: absolute; left: 50%; bottom: 10px; width: 330px; transform: translateX(-50%); z-index: 5; pointer-events: auto; padding: 11px 18px 13px; border-radius: 12px;
  background: linear-gradient(#25292b, #1b1e20); box-shadow: 0 0 0 1.5px rgba(8, 9, 10, .85), 0 14px 32px rgba(0, 0, 0, .6); color: var(--ink); font-weight: 700; }
#hud .ctl-edit-panel::after { content: ""; position: absolute; inset: -2.5px; clip-path: inset(4px round 10.5px); pointer-events: none; background: #4d4944; opacity: .7;
  -webkit-mask: url(../assets/ui/popup-corner-tl.png) left top / auto min(44px, 36%) no-repeat, url(../assets/ui/popup-corner-tr.png) right top / auto min(44px, 36%) no-repeat,
    url(../assets/ui/popup-corner-bl.png) left bottom / auto min(44px, 36%) no-repeat, url(../assets/ui/popup-corner-br.png) right bottom / auto min(44px, 36%) no-repeat,
    linear-gradient(#000 0 0) left 4px top 4px / calc(100% - 8px) 1px no-repeat, linear-gradient(#000 0 0) left 4px bottom 4px / calc(100% - 8px) 1px no-repeat,
    linear-gradient(#000 0 0) left 4px top 4px / 1px calc(100% - 8px) no-repeat, linear-gradient(#000 0 0) right 4px top 4px / 1px calc(100% - 8px) no-repeat;
  mask: url(../assets/ui/popup-corner-tl.png) left top / auto min(44px, 36%) no-repeat, url(../assets/ui/popup-corner-tr.png) right top / auto min(44px, 36%) no-repeat,
    url(../assets/ui/popup-corner-bl.png) left bottom / auto min(44px, 36%) no-repeat, url(../assets/ui/popup-corner-br.png) right bottom / auto min(44px, 36%) no-repeat,
    linear-gradient(#000 0 0) left 4px top 4px / calc(100% - 8px) 1px no-repeat, linear-gradient(#000 0 0) left 4px bottom 4px / calc(100% - 8px) 1px no-repeat,
    linear-gradient(#000 0 0) left 4px top 4px / 1px calc(100% - 8px) no-repeat, linear-gradient(#000 0 0) right 4px top 4px / 1px calc(100% - 8px) no-repeat; }
#hud .ctl-edit-panel.in { animation: ctl-up .28s cubic-bezier(.2, .9, .3, 1.2) both; }
#hud .ctl-edit-panel.out { animation: ctl-down .2s ease-in both; }
@keyframes ctl-up { from { opacity: 0; transform: translate(-50%, 46px); } }
@keyframes ctl-down { to { opacity: 0; transform: translate(-50%, 46px); } }
#hud .ctl-edit-title { display: block; padding-bottom: 7px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .1); text-align: center; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
#hud .ctl-edit-row { display: flex; align-items: center; font-size: 12px; }
#hud .ctl-edit-name { width: 56px; white-space: nowrap; }
#hud .ctl-edit-pct { width: 40px; text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* 막대: 보이는 홈 · 채움 · 손잡이는 설정 소리 막대 그림, 끄는 것은 그 위에 투명하게 덮은 range(손잡이 폭 22 = 그림 손잡이 — 값 자리와 그림 손잡이 가운데가 같다) */
#hud .ctl-edit-bar { position: relative; flex: 1; min-width: 0; height: 26px; margin: 0 8px; }
#hud .ctl-edit-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 14px; margin-top: -7px; border-image: url(art/vol-track.png) 0 24 fill / 0 7px stretch; }
#hud .ctl-edit-in { position: absolute; left: 3px; right: 3px; top: 50%; height: 8px; margin-top: -4px; pointer-events: none; }
#hud .ctl-edit-fill { position: absolute; left: 0; top: 0; bottom: 0; display: block; border-image: url(art/vol-fill.png) 0 18 fill / 0 4px stretch; }
#hud .ctl-edit-knob { position: absolute; right: -11px; top: 50%; width: 22px; height: 22px; margin-top: -11px; background: url(art/vol-knob.png) center / 100% 100% no-repeat; transition: transform .12s; }
#hud .ctl-edit-bar:active .ctl-edit-knob { transform: scale(1.12); }
#hud .ctl-edit-size { position: absolute; left: -8px; top: 0; width: calc(100% + 16px); height: 100%; margin: 0; opacity: 0; cursor: pointer; touch-action: none; -webkit-appearance: none; appearance: none; background: none; }
#hud .ctl-edit-size::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 26px; }
#hud .ctl-edit-size::-moz-range-thumb { width: 22px; height: 26px; border: 0; }
#hud .ctl-edit-btns { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
#hud .ctl-edit-btns button { flex: none; min-width: 60px; height: 28px; padding: 0 14px; border: 0; border-radius: 999px; background: linear-gradient(#ece4d3, #c9bda6); color: #2b261e; font-family: inherit; font-size: 12.5px; font-weight: 800;
  white-space: nowrap; box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 2px 4px rgba(0, 0, 0, .35); transition: transform .24s cubic-bezier(.3, 2.6, .5, 1); }
#hud .ctl-edit-btns button:active { transform: scale(.92); transition: transform .06s ease-out; }
#hud .ctl-edit-btns .ctl-reset { margin-right: auto; background: rgba(255, 255, 255, .12); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
#hud .ctl-edit-btns .ctl-save { background: linear-gradient(#83c3bf, #548f8c); color: #fff; }
/* ---------------- 액티브 스킬 칸(features/askill — host 10d skillBar): 공격 버튼 위 3칸 × 2줄(칸 0~2 아래 줄 · 3~5 윗줄), 52 원 · 쿨 부채꼴 · 남은 초 · 단축키 */
#hud .sk-bar { position: absolute; right: 0; top: 0; width: 0; height: 0; }
#hud .sk-btn { position: absolute; width: 52px; height: 52px; border-radius: 50%; pointer-events: auto; touch-action: none; background: rgba(6, 7, 10, .55);
  box-shadow: 0 0 0 2px rgba(232, 201, 121, .85), 0 2px 4px #000a; transition: transform .08s ease; }
#hud .sk-btn.s0 { right: 24px; top: 170px; } #hud .sk-btn.s1 { right: 84px; top: 162px; } #hud .sk-btn.s2 { right: 144px; top: 156px; }   /* 구르기(top 215.5) · 헤어 탭(top 103 까지)과 겹치지 않게 */
#hud .sk-btn.s3 { right: 24px; top: 112px; } #hud .sk-btn.s4 { right: 84px; top: 104px; } #hud .sk-btn.s5 { right: 144px; top: 98px; }
#hud .sk-btn.sk-buff { right: 204px; top: 150px; width: 44px; height: 44px; }   /* 버프(심법) 칸 — 스킬 칸 아래 줄 왼쪽, 한 단계 작게(44) */
#hud .sk-btn.sk-buff.b1 { top: 98px; } #hud .sk-btn.sk-buff.b2 { right: 256px; top: 124px; }   /* 백팔검형 버프 3칸(10-22): 1단계 아래 · 2단계 위(스킬 윗줄 높이) · 3단계 그 둘 사이 왼쪽 — 채팅 줄(top ~55)·스킬 칸과 겹치지 않게 */
#hud .sk-btn.sk-buff .sk-sec { line-height: 44px; font-size: 15px; }
#hud .sk-btn.sk-buff::after { content: ""; position: absolute; left: 50%; top: 5px; width: 7px; height: 7px; border: solid #fff; border-width: 2px 0 0 2px; transform: translateX(-50%) rotate(45deg); filter: drop-shadow(0 0 2px #000); }   /* 버프 표시 = 흰 선 위 꺾쇠(올림) — 같은 무공 아이콘의 스킬 칸과 구분 */
#hud .sk-btn.sk-buff.live { box-shadow: 0 0 0 2px #ffd770, 0 0 10px 2px #ffcf5a99, 0 2px 4px #000a; animation: sk-buff-live 1.05s ease-in-out infinite alternate; }   /* 켜진 동안 = 고른 칸 금테 결(15-skills .sk-cell.on) + 등급 빛 맥동 1047 ms(ui-juice) */
#hud .sk-btn.sk-buff.live .sk-sec { color: #ffe39a; }
@keyframes sk-buff-live { to { box-shadow: 0 0 0 2px #ffd770, 0 0 16px 4px #ffcf5acc, 0 2px 4px #000a; } }
#hud .sk-btn.on { transform: scale(.9); }
#hud .sk-face { position: absolute; inset: 4px; border-radius: 50%; overflow: hidden; background: #1b1d24 url(../shared/skill_badges/skill_badges.webp) no-repeat; opacity: .92; }
#hud .sk-cd { position: absolute; inset: 0; border-radius: 50%; --cd: 0; background: conic-gradient(rgba(0, 0, 0, .68) calc(var(--cd) * 360deg), transparent 0); }
#hud .sk-btn.cool .sk-cd { background: conic-gradient(rgba(0, 0, 0, .68) calc(var(--cd) * 360deg), rgba(255, 236, 190, .9) calc(var(--cd) * 360deg) calc(var(--cd) * 360deg + 4deg), transparent 0); }   /* 쿨 부채꼴의 밝은 앞날(도는 바늘) */
#hud .sk-btn.cool .sk-face { filter: grayscale(.6) brightness(.75); }
#hud .sk-sec { position: absolute; inset: 0; line-height: 52px; text-align: center; font-size: 18px; font-weight: 900; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
#hud .sk-btn em { position: absolute; right: -3px; bottom: -3px; min-width: 15px; height: 15px; border-radius: 8px; font-size: 10px; font-style: normal; font-weight: 900; line-height: 15px; text-align: center;
  color: #26221c; background: #e8c979; box-shadow: 0 1px 2px #0008; }
/* ---- 스킬 단추 손맛(2026-10-22 사용자 "스킬 버튼을 눌렀을때 돌아가는 연출 · 스킬 다시 사용 가능하면 활성화되는 연출 · 사용 가능할 때 희미하게 빛난다거나"
   → "오버워치 궁극기 활성화처럼? 근데 스킬 전부 다 그런게 아니라 1단계 5단계 연출도 레벨디자인" → "애니메이션을 … 파티클이라던가 쉐이더"
   → "그냥 불타는 것만 쳐넣어놨네 … 스킬칸이랑 이펙트가 맞지도 않네 … 잘나가는 모바일게임 스킬칸 이펙트 조사" → "그래 너 이야기대로 한번 만들어봐"):
   근거 = 레퍼런스 조사(docs/one-click-game-factory/analysis/skill-slot-fx-reference.md — 도깨비의세계 · 오버워치 2 · 원신 · 와일드 리프트 · 어라이즈 등 12작):
     일반 스킬은 쓸 수 있는 동안 움직이는 연출이 없다(색이 돌아온 아이콘이 말함) · 다 찬 순간만 칸 안을 0.3~0.5 초 채웠다 빼고 얇은 고리 하나(≤1.3배) ·
     계속 도는 빛은 궁극기만, 칸 모양(원 · 육각)을 따라 1.2~1.5배 안. 옛 판(모든 칸 둘레 불꽃 고리 · 숨쉬는 빛)은 걷음.
   단계(t1~t5 = 스킬 단계, 버프 = t1):
     t1 · t2 = 다 참 → 흰 채움 + 얇은 고리 · t3 = 금 테 + 금 채움 + 빛 한 번 쓸기 + 테 안쪽 정지 빛 · t4 = + 테 위 빛점 하나(6 초 한 바퀴) + 불티 몇 개 ·
     t5 = 육각 테를 따라 흐르는 에너지 + 다 참 = 오버워치식 줄었다(0.15 초) → 번쩍 → 불꽃 갈래 → 루프.
   테 그림 = Codex 이미지(assets/skillfx/skill_slot.webp). 테를 따라 움직이는 빛 · 고리 · 불티 = 칸 묶음 위 GPU 캔버스(.sk-gl, host 10e-skill-fire · skill_gl.js ButtonRim),
   여기 CSS = 튕김 · 칸 안 채움 · 빛 쓸기 · 흔들림. */
#hud .sk-btn { box-shadow: 0 2px 5px #000b; }   /* 테 = 그림(sk-frame) — 옛 금 선 테(box-shadow)는 걷음 */
#hud .sk-frame { position: absolute; inset: -4px; pointer-events: none; background: url(../assets/skillfx/skill_slot.webp) 0 0 / 300% 100% no-repeat; }
#hud .sk-btn.t3 .sk-frame, #hud .sk-btn.t4 .sk-frame { background-position: 50% 0; }
#hud .sk-btn.t5 .sk-frame { inset: -8px; background-position: 100% 0; }
#hud .sk-btn.sk-buff .sk-frame { inset: -3px; }
#hud .sk-gl { position: absolute; right: 0; top: 36px; width: 340px; height: 230px; pointer-events: none; }   /* GPU 캔버스(10e CW · CH · TOP 과 같은 값) */
/* 쓸 수 있는 3~5단 = 테 안쪽 정지 빛(밝기가 오르내리지 않음 — 조사: 대기 중 숨쉬는 빛은 어느 게임에도 없음) */
#hud .sk-glow { position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .25s;
  box-shadow: 0 0 8px 2px rgba(255, 222, 140, .7), inset 0 0 6px rgba(255, 236, 180, .5); }
#hud .sk-btn.t3:not(.cool) .sk-glow, #hud .sk-btn.t4:not(.cool) .sk-glow { opacity: .3; }
#hud .sk-btn.t5:not(.cool) .sk-glow { opacity: .45; }
#hud .sk-face::after { content: ""; position: absolute; inset: 0; transform: translateX(-130%) skewX(-18deg); background: linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); }
/* 누름(0.92 → 1.06 튕김 + 얼굴 섬광, GPU = 1.3배 고리) */
#hud .sk-btn.cast { animation: sk-cast .3s cubic-bezier(.2, .9, .3, 1.25); }
#hud .sk-btn.cast .sk-face { animation: sk-lit .26s ease-out; }
@keyframes sk-cast { 0% { transform: scale(.92); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes sk-lit { 0% { filter: brightness(1.9); } 100% { filter: brightness(1); } }
/* 다 차는 순간: 칸 안 채움(도깨비의세계 크림 · 금 채움 0.5 초) · 3단부터 빛 한 번 쓸기 · 궁극기 = 줄었다 튐 */
#hud .sk-btn.ready-pop { animation: sk-ready .4s cubic-bezier(.3, .7, .3, 1); }
#hud .sk-btn.ready-pop .sk-face { animation: sk-fill .42s ease-out; }
#hud .sk-btn.t3.ready-pop .sk-face, #hud .sk-btn.t4.ready-pop .sk-face { animation-name: sk-fill-gold; animation-duration: .48s; }
#hud .sk-btn.t3.ready-pop .sk-face::after, #hud .sk-btn.t4.ready-pop .sk-face::after { animation: sk-shine-once .5s ease-out .05s; }
#hud .sk-btn.t5.ready-pop { animation: sk-ready-ult .7s cubic-bezier(.3, .7, .3, 1); }
#hud .sk-btn.t5.ready-pop .sk-face { animation: sk-fill-gold .6s ease-out .12s both; }
#hud .sk-btn.t5.ready-pop .sk-face::after { animation: sk-shine-once .5s ease-out .2s; }
@keyframes sk-ready { 0% { transform: scale(1); } 35% { transform: scale(1.1); } 65% { transform: scale(.98); } 100% { transform: scale(1); } }
@keyframes sk-ready-ult { 0% { transform: scale(1); } 20% { transform: scale(.9); } 34% { transform: scale(1.14); } 60% { transform: scale(.97); } 80% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes sk-fill { 0% { box-shadow: inset 0 0 0 30px rgba(255, 250, 236, .85); } 100% { box-shadow: inset 0 0 0 30px rgba(255, 250, 236, 0); } }
@keyframes sk-fill-gold { 0% { box-shadow: inset 0 0 0 30px rgba(255, 214, 128, .88); } 100% { box-shadow: inset 0 0 0 30px rgba(255, 214, 128, 0); } }
@keyframes sk-shine-once { 0% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(130%) skewX(-18deg); } }
#hud .sk-btn.deny { animation: sk-deny .24s linear; }
@keyframes sk-deny { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3px); } 45% { transform: translateX(3px); } 70% { transform: translateX(-2px); } 88% { transform: translateX(1px); } }
/* ---------------- 걸린 버프 줄(features/askill — host 10f buffStatus, 2026-10-24 사용자 "미니맵 오른쪽에 버프아이콘 · 누르면 무슨 효과인지 팝업 · 메이플방식 그대로"):
   메이플 PC 버프 줄 캡처(.local/tmp/hudbuff/crop/mspc_buff.png, git 밖) 결 = 둥근 네모 아이콘이 틈 거의 없이 한 줄 · 옅은 밝은 1px 테 ·
   남은 초 = 아이콘 왼쪽 아래 작은 흰 숫자(검은 테두리). 끝나기 5 초 전 깜빡임 · 누르면 이름/효과/남은 시간 툴팁.
   자리 = 왼쪽 위 칸(.top-l) 오른쪽 위 — 10-28 미니맵 대신 프로필 칸(hud 01 .pc-card 폭 176) 오른쪽 (182, 2). 아이콘 22(GUI 450 — 메이플 PC 2.5% 보다 크게: 손가락으로 누르는 칸), 사이 2. */
#hud .bf-row { position: absolute; left: 182px; top: 2px; display: flex; gap: 2px; pointer-events: none; }
#hud .bf-ic { position: relative; width: 22px; height: 22px; flex: none; pointer-events: auto; touch-action: none; border-radius: 3px;
  background: rgba(6, 7, 10, .6); box-shadow: 0 0 0 1px rgba(225, 232, 245, .55), 0 0 0 2px rgba(0, 0, 0, .55), 0 1px 3px #000a; }
#hud .bf-ic .bf-face { position: absolute; inset: 1px; border-radius: 2px; }
#hud .bf-face { background: #1b1d24 url(../shared/skill_badges/skill_badges.webp) no-repeat; }   /* 10d 스킬 칸 · 버프 칸과 같은 아이콘 장 */
#hud .bf-cd { position: absolute; inset: 1px; border-radius: 2px; --cd: 0; background: conic-gradient(rgba(0, 0, 0, .62) calc(var(--cd) * 360deg), transparent 0); }   /* 지난 시간 덮개(10-24 사용자 "남은시간에따라 어두워지는거") — 12 시부터 시계 방향, 스킬 칸 쿨 부채꼴(07-askill .sk-cd)과 같은 짙기 */
#hud .bf-sec { position: absolute; left: 1px; bottom: 0; font-size: 7.3px; font-weight: 900; line-height: 8px; color: #fff; white-space: nowrap;
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000; }   /* 메이플: 남은 초 = 왼쪽 아래 흰 숫자(10-24 사용자 "1.1배 줄여": 8 → 7.3) */
#hud .bf-ic.on { box-shadow: 0 0 0 1px #ffe39a, 0 0 0 2px rgba(0, 0, 0, .55), 0 0 7px 2px rgba(255, 214, 120, .6); }   /* 팝업이 열린 칸 = 금 테(고른 칸 빛, hq-ui §1) */
#hud .bf-ic.in { animation: bf-in .42s cubic-bezier(.2, .9, .3, 1.3) both; }   /* 걸리는 순간 톡(보상 칸 420 ms 팝 결, ui-juice) */
#hud .bf-ic.in .bf-face { animation: sk-lit .4s ease-out; }
#hud .bf-ic.end .bf-face { animation: bf-blink .5s steps(2, jump-none) infinite; }   /* 끝나기 5 초 전 깜빡임 */
@keyframes bf-in { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes bf-blink { 0% { opacity: 1; } 100% { opacity: .35; } }
/* 팝업 = 아이템 정보 카드(.icard, features/bag/inv_fx.css) 결: 무채 검은 판 + 회색 1px 테 · 구획 점선 · 글자 10 / 8.5(10-24 정규화 값) */
#hud .bf-tip { position: absolute; top: 30px; z-index: 3; min-width: 104px; max-width: 170px; padding: 6px 8px 7px; border-radius: 6px; pointer-events: auto;
  color: #f2f0e7; background: linear-gradient(rgba(22, 23, 24, .9), rgba(12, 13, 14, .9)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 3px 8px #000a; }
#hud .bf-tip[hidden] { display: none; }
#hud .bf-tip.in { animation: fx-pop .26s cubic-bezier(.2, .9, .25, 1.15) both; transform-origin: 12px 0; }
#hud .bf-tip .bf-head { display: flex; align-items: center; gap: 6px; padding-bottom: 5px; border-bottom: 1px dashed rgba(255, 255, 255, .22); }
#hud .bf-tip .bf-head .bf-face { position: relative; width: 22px; height: 22px; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
#hud .bf-tip .bf-head b { font-size: 10px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
#hud .bf-tip p { margin: 4px 0 0; font-size: 8.5px; line-height: 11.5px; white-space: nowrap; }
#hud .bf-tip .bf-eff { color: #9fe36f; }   /* 좋아짐 = 초록(hq-ui §1 강조색) */
#hud .bf-tip .bf-left { color: #9a9d98; }
/* ---------------- 지역 진입 칭호(2026-10-19 사용자 "도깨비의세계 참고해서 UI 퀄리티", zones 10-zone-card) — v2(10-19 사용자 "왜 이렇게 구리지 · 색상도 레트로하고 구식"):
   남색 벨벳 · 겨자 금 · 다마스크 무늬 · 돋을새김 금 덩굴 · 금 글자 + 남색 테두리 = 2000년대 느낌 → 도깨비의세계 제목 말씨 그대로 현대식으로:
   무늬 없는 짙은 반투명 띠(양 끝 흐림, 길드 대항전 13d 띠와 같은 방식) · 위아래 1px 흰 빛선 · 흰·은빛 가는 선 장식(중세 스크롤 · 문장 걸이, 무협 장식 아님)
   · 명조 이름(ZoneTitle = Noto Serif KR Black 부분집합, ui/fonts/ZoneTitle.json) 진주빛 흰 글자 + 부드러운 빛 · 자간 넓은 작은 레벨 줄.
   그림 = Codex(ui/art/zone-flank · zone-pennant(png) · zone-flare(webp), 영수증 zone-banner.receipt.json). 연출: 띠 열림 + 빛선 뻗음 → 빛 번쩍 → 이름이 흐림에서 또렷해지며 자간 모임
   → 장식 모임 → 걸이 흔들림 → 빛 훑음 → 떠오르며 흐려짐. 위험 = 핏빛 띠 · 붉은 빛선 · 옅은 장밋빛 글자 */
@font-face { font-family: "ZoneTitle"; src: url("fonts/ZoneTitle.woff2") format("woff2"); font-display: block; }
#hud .zone-card { position: absolute; left: 50%; top: 56px; width: 520px; height: 60px; margin-left: -260px; pointer-events: none; opacity: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
#hud .zone-card .zc-band { position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(90deg, transparent, rgba(9, 11, 19, .62) 20%, rgba(9, 11, 19, .78) 50%, rgba(9, 11, 19, .62) 80%, transparent); }
#hud .zone-card.danger .zc-band { background: linear-gradient(90deg, transparent, rgba(34, 6, 10, .66) 20%, rgba(44, 7, 11, .82) 50%, rgba(34, 6, 10, .66) 80%, transparent); }
/* 빛 훑음: 띠 안에서만(overflow hidden) */
#hud .zone-card .zc-band::before { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; left: -100px; transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent); }
#hud .zone-card .zc-line { position: absolute; left: 6%; right: 6%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226, 230, 255, .28) 24%, #fff 50%, rgba(226, 230, 255, .28) 76%, transparent);
  filter: drop-shadow(0 0 2px rgba(205, 215, 255, .8)); }
#hud .zone-card .zc-line.t { top: 0; }
#hud .zone-card .zc-line.b { bottom: 0; }
#hud .zone-card.danger .zc-line { background: linear-gradient(90deg, transparent, rgba(255, 150, 140, .3) 24%, #ffd2cc 50%, rgba(255, 150, 140, .3) 76%, transparent);
  filter: drop-shadow(0 0 2px rgba(255, 70, 60, .85)); }
/* 위 빛선 가운데 빛(투명 바탕 그림 — screen 합성은 카드 opacity 연출이 합성을 가둬 검은 바탕이 상자로 보였다) */
#hud .zone-card .zc-flare { position: absolute; left: 50%; top: -25px; width: 460px; height: 51px; margin-left: -230px; opacity: .55;
  background: url(art/zone-flare.webp) center / 100% 100% no-repeat; }
#hud .zone-card.danger .zc-flare { opacity: .3; }
#hud .zone-card .zc-pennant { position: absolute; right: 68px; top: 56px; width: 16px; height: 72px; background: url(art/zone-pennant.png) top center / contain no-repeat;
  transform-origin: 50% 0; filter: drop-shadow(0 0 3px rgba(150, 170, 255, .55)) drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
#hud .zone-card .zc-row { position: relative; display: flex; align-items: center; gap: 12px;
  filter: drop-shadow(0 0 7px rgba(150, 165, 255, .4)) drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
#hud .zone-card.danger .zc-row { filter: drop-shadow(0 0 7px rgba(255, 70, 60, .45)) drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
#hud .zone-card .zc-flank { width: 104px; height: 20px; background: url(art/zone-flank.png) center / contain no-repeat; }
#hud .zone-card .zc-flank.r { transform: scaleX(-1); }   /* 그림 = 왼쪽 장식(오른쪽 끝 스크롤 · 왼쪽으로 가는 선). 오른쪽은 좌우 뒤집기 */
/* 글자: 진주빛 흰 그라데이션(위 흰빛 → 아래 옅은 라일락 · 민트, 도깨비의세계 제목 글자). 테두리 없이 부드러운 빛 + 얇은 그림자(.zc-row) */
#hud .zone-card .zc-name { position: relative; font-size: 25px; font-weight: 900; letter-spacing: 3px; line-height: 30px; color: #fff;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 42%, #e6e2fa 72%, #cfe8ee 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#hud .zone-card.serif .zc-name { font-family: "ZoneTitle", GFUIFont, sans-serif; font-size: 26px; letter-spacing: 4px; }
#hud .zone-card.danger .zc-name { background-image: linear-gradient(180deg, #ffffff 0%, #fff4f2 42%, #ffd0c8 72%, #f3a397 100%); }
#hud .zone-card .zc-lv { position: relative; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; line-height: 14px;
  color: rgba(236, 239, 250, .88); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
#hud .zone-card .zc-lv::before, #hud .zone-card .zc-lv::after { content: ""; width: 4px; height: 4px; border: 1px solid currentColor; transform: rotate(45deg); opacity: .8; }
#hud .zone-card.town .zc-lv { display: none; }   /* 마을 = 레벨대 없이 이름만(띠 가운데) */
#hud .zone-card.danger .zc-lv { color: #ffbcb2; }
#hud .zone-card.show { animation: zc-fade .2s ease-out both; }
#hud .zone-card.show .zc-band { animation: zc-band .6s cubic-bezier(.25, .8, .3, 1) both; }
#hud .zone-card.show .zc-band::before { animation: zc-shine 1s .8s ease-in-out both; }
#hud .zone-card.show .zc-line { animation: zc-line .8s .05s cubic-bezier(.2, .8, .2, 1) both; }
#hud .zone-card.show .zc-flare { animation: zc-flare 1.1s .25s ease-out both; }
#hud .zone-card.danger.show .zc-flare { animation-name: zc-flare-d; }
#hud .zone-card.show .zc-flank.l { animation: zc-flank-l .6s .3s cubic-bezier(.2, .9, .3, 1) both; }
#hud .zone-card.show .zc-flank.r { animation: zc-flank-r .6s .3s cubic-bezier(.2, .9, .3, 1) both; }
#hud .zone-card.show .zc-name { animation: zc-name .75s .2s cubic-bezier(.2, .7, .3, 1) both; }
#hud .zone-card.show .zc-lv { animation: zc-sub .45s .5s ease-out both; }
#hud .zone-card.show .zc-pennant { animation: zc-drop .35s .5s ease-out both, zc-swing 1.8s .85s ease-in-out both; }
#hud .zone-card.hide { animation: zc-close .45s ease-in both; }
/* 띠는 가운데서 양옆으로 열린다(비율 유지 — 한 축만 눌러 찌그러뜨리지 않는다) */
@keyframes zc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes zc-band { from { opacity: 0; clip-path: inset(0 50% 0 50%); } 30% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes zc-line { from { opacity: 0; transform: scaleX(0); } 25% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes zc-flare { from { opacity: 0; transform: scaleX(.2); } 30% { opacity: 1; transform: scaleX(1.05); } to { opacity: .55; transform: none; } }
@keyframes zc-flare-d { from { opacity: 0; transform: scaleX(.2); } 30% { opacity: .7; transform: scaleX(1.05); } to { opacity: .3; transform: none; } }
@keyframes zc-flank-l { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes zc-flank-r { from { opacity: 0; transform: scaleX(-1) translateX(-24px); } to { opacity: 1; transform: scaleX(-1); } }
@keyframes zc-name { from { opacity: 0; letter-spacing: 14px; filter: blur(6px); } 60% { filter: blur(0); } to { opacity: 1; filter: blur(0); } }
@keyframes zc-sub { from { opacity: 0; transform: translateY(-5px); } }
@keyframes zc-drop { from { opacity: 0; transform: translateY(-14px); } }
@keyframes zc-swing { 0% { transform: rotate(0); } 20% { transform: rotate(9deg); } 45% { transform: rotate(-6deg); } 70% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
@keyframes zc-close { from { opacity: 1; transform: none; filter: blur(0); } to { opacity: 0; transform: translateY(-12px); filter: blur(3px); } }
@keyframes zc-shine { from { left: -100px; } to { left: 110%; } }
@keyframes zc-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
/* 위험 경고 글자: 판(아래 끝 116px · 깃발 112px) 밑에 붉은 글자 + 검은 외곽선, 그것만 흔들림 → 판이 사라지면 위쪽(62px)으로 올라가 남아 맥동 */
#hud .zone-alert { position: absolute; left: 50%; top: 124px; transform: translateX(-50%); display: none; align-items: center; gap: 6px; pointer-events: none; z-index: 3; white-space: nowrap;
  transition: top .35s cubic-bezier(.3, .8, .3, 1); }
#hud .zone-alert.on { display: flex; }
#hud .zone-alert b { font-size: 16px; font-weight: 900; line-height: 20px; color: #ff3b2f; letter-spacing: .5px;
  text-shadow: 1.6px 0 #000, -1.6px 0 #000, 0 1.6px #000, 0 -1.6px #000, 1.2px 1.2px #000, -1.2px 1.2px #000, 1.2px -1.2px #000, -1.2px -1.2px #000, 0 0 10px rgba(255, 40, 20, .55); }
#hud .zone-alert .za-mark { width: 18px; height: 16px; background: #ff3b2f; clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 0 1.5px #000) drop-shadow(0 0 1px #000); position: relative; }
#hud .zone-alert .za-mark::after { content: "!"; position: absolute; left: 0; right: 0; top: 3px; text-align: center; font-size: 11px; font-weight: 900; line-height: 12px; color: #000; }
#hud .zone-alert.fresh { animation: za-in .3s .35s ease-out both, za-shake .45s .65s ease-in-out 3; }
#hud .zone-alert.docked { top: 62px; animation: za-pulse 1.4s ease-in-out infinite; }
@keyframes za-in { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes za-shake { 0%, 100% { transform: translateX(-50%); } 20% { transform: translateX(calc(-50% - 6px)); } 40% { transform: translateX(calc(-50% + 6px)); } 60% { transform: translateX(calc(-50% - 4px)); } 80% { transform: translateX(calc(-50% + 4px)); } }
@keyframes za-pulse { 0%, 100% { opacity: .75; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } }
/* 필드 PvP 안내 줄(10-30, 10-zone-card zonePvp): 위험 경고 글자 결 그대로 한 단계 작게(14) · 흔들림 없이 내려앉기만 · 레벨 위험과 같이 뜨면 그 아래 줄 */
#hud .zone-pvp b { font-size: 14px; line-height: 18px; }
#hud .zone-pvp.below { top: 148px; }
#hud .zone-pvp.fresh { animation: za-in .3s .45s ease-out both; }
/* 화면 위험 표시: 위험 지역 안에 있는 동안 가장자리 붉은 기운이 맥동(들어온 순간 세 번 강하게) */
#hud.zone-danger::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 70px rgba(200, 20, 10, .55); animation: zc-pulse 1.1s ease-in-out 3, zc-hold 2.2s 3.3s ease-in-out infinite; }
@keyframes zc-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes zc-hold { 0%, 100% { opacity: .22; } 50% { opacity: .5; } }
/* ---------------- 하늘배 남은 시간 막대(features/continent 58i sailBar — 배 위에서만): 지역 칭호(zones 06 zone-card) 자리 가운데 위 · 글자 폭 먹빛 알약
   가는 섬 이름 12.5 굵게 + 남은 m:ss 12(고정 폭 숫자) · 아래 4 px 막대(채움 = 진주빛 흰 → 하늘빛, 칭호 이름 그라데이션 결). 나타날 때 .28 s 위에서 내려옴, 끝나면 흐려짐 */
#hud .sail-bar { left: 50%; top: 14px; transform: translate(-50%, -8px); display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 12px; row-gap: 5px;
  padding: 6px 14px 7px; border-radius: 12px; background: rgba(12, 13, 15, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 3px 10px rgba(0, 0, 0, .35);
  opacity: 0; pointer-events: none; z-index: 3; transition: opacity .28s ease-out, transform .28s cubic-bezier(.2, .9, .3, 1.2); }
#hud .sail-bar.on { opacity: 1; transform: translate(-50%, 0); }
#hud .sail-bar .sb-to { font-size: 12.5px; font-weight: 800; line-height: 16px; color: #f4f1ea; white-space: nowrap; }
#hud .sail-bar .sb-left { font-style: normal; font-size: 12px; font-weight: 800; line-height: 16px; color: #e6f4ff; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
#hud .sail-bar .sb-track { grid-column: 1 / -1; position: relative; display: block; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .14); }
#hud .sail-bar .sb-fill { position: absolute; inset: 0; display: block; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #ffffff, #cfe8ee); transition: transform .25s linear; }