/* 보스 화면(하이랜드 · LANES G9 · features/boss — boss.js). 2026-10-24 사용자 "보스 UI/UX 연출도 인기있는 모바일게임 레퍼런스 잘 찾아서 구현해줘 체력바라던가 보스패턴같은거".
   틀 = 흥행작 보스전 공통(G9-PLAN §3 — 리니지W · 오딘 · 메이플M · 로스트아크 모바일 · 디아블로 이모탈 캡처): 위 가운데 이름판(초상 · Lv · 이름 · 여러 줄 체력바 xN · 늦게 따라오는 꼬리 ·
   남은 시간 · 단계 ◆ · 아래 가는 전체 막대) → 그 아래 큰 패턴 경고 띠 → 등장 레터박스 + 명조 이름 → 결과 카드. 보스방에서는 위가 보스 막대만 남는다(재화 알약 · 퀘스트 알리미 숨김).
   크기(고품질UI · GUI 450): 이름판 폭 380 · 초상 40 · 막대 12(내 체력 바 01-hud .hp 12 와 같은 금선 테 · 홈 · 위 빛 · 흰 꼬리) · 글자 9.5~13 · 알약 28 · 도전 팝업 폭 404(10-25 EFZ 보스 창 결 두 칸 — ⑦).
   색 = 거의 무채 + 강조: 줄 색 6(boss.js PAL — 어두운 판에 맞춰 채도 낮춤) · 등급색(--g, grades.json) · 경고 적갈 #d9261b/#3c0806(01-hud .w-pbar 빨강 · 위험 적갈) · 포효 금 #c8aa6e(띠 금선 공통) ·
        무력화 호박 #e8c979(지갑 골드) · 결정 청록(18-popup-dark .btn.gold). 제목 = BossTitle(Noto Serif KR Black 부분 글꼴 — make_boss_title.py) + 진주빛 흰 · 띠 양 끝 흐림 · 위아래 1px 빛선(도깨비 제목 말씨). */
@font-face { font-family: "BossTitle"; src: url("BossTitle.woff2") format("woff2"); font-display: block; }

/* ---------------- 보스방에서 비키는 HUD: 퀘스트 알리미(그 자리 = 나가기 알약) · 지역 칭호 · 채팅 미리보기 · 재화 알약(이름판 자리 — 단추 줄은 제자리, 자리만 비움) · 알림 토스트는 경고 띠 아래로 */
#hud .hud-in.boss-on .qtrack, #hud .hud-in.boss-on .zone-card { display: none; }
#hud .hud-in.boss-on .top-r .coin { visibility: hidden; }
#hud .hud-in.boss-on .chat-hud, #hud.boss-on .chat-hud { display: none; }   /* 채팅 미리보기(social 10 — 오른쪽 위 34)는 이름판(가운데 380)과 겹친다 · 혼자 방이라 숨김(나가면 그대로) */
#hud .hud-in.boss-on .banner { top: 120px; }
#hud .hud-in.boss-res :is(.banner, .qnotice) { visibility: hidden; }   /* 결과 카드가 떠 있는 동안(퀘스트 진행 토스트가 카드와 겹치지 않게). opacity 는 토스트가 매 프레임 인라인으로 써서 못 덮는다(10-24 봇 캡처: 띠 뒤로 '퀘스트 완료 가능' 비침) */

/* ---------------- ① 이름판(위 가운데) */
#hud .boss-plate { left: 50%; top: 8px; width: 380px; height: 40px; transform: translateX(-50%); display: grid; grid-template-columns: 40px 1fr auto; align-items: center; column-gap: 7px; z-index: 5; pointer-events: none; --g: #9a5cd0; --c: #c9483e; --u: transparent; }
#hud .boss-plate.in { animation: bp-in .36s cubic-bezier(.2, .9, .3, 1) both; }   /* 등장 카드가 걷힐 때 위에서 내려옴(막대 차오름 600 ms 는 boss.js) */
#hud .bp-face { position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 40%, #3a3f42, #121516 75%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 1.5px var(--g), 0 0 9px -1px var(--g), 0 2px 5px rgba(0, 0, 0, .55); }
#hud .bp-face canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#hud .bp-face.none canvas { display: none; }
#hud .bp-face.none::after { content: ""; position: absolute; inset: 9px; background: #cfcac0; -webkit-mask: url(icon-boss.png) center / contain no-repeat; mask: url(icon-boss.png) center / contain no-repeat; }   /* 그림 못 읽음 = 무채 보스 글리프 */
#hud .boss-plate.groggy .bp-face { animation: bp-ring-groggy .5s ease-in-out infinite alternate; }
#hud .boss-plate.enr .bp-face { animation: bp-ring-enr 1.047s ease-in-out infinite alternate; }
#hud .bp-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#hud .bp-top { display: flex; align-items: center; gap: 5px; height: 15px; min-width: 0; white-space: nowrap; }
#hud .bp-lv { flex: none; font-size: 10px; font-weight: 900; color: #e8c979; text-shadow: 0 1px 2px #000; }
#hud .bp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: "BossTitle", "QuestTitle", "GwTitle", var(--ui-font), serif; font-size: 13px; font-weight: 900; letter-spacing: .04em; color: #fbf6ea;
  text-shadow: 0 0 8px rgba(255, 236, 190, .35), 0 1px 2px #000, 1px 0 1px #000, -1px 0 1px #000; }
#hud .bp-tags { display: flex; gap: 3px; flex: none; }
#hud .bp-tag { display: none; font-style: normal; font-size: 9px; font-weight: 900; line-height: 13px; padding: 0 4px; border-radius: 3px; }
#hud .bp-tag.on { display: block; animation: bp-tag-in .22s cubic-bezier(.2, .9, .3, 1.3) both; }
#hud .bp-tag.t-immune { color: #e6ebef; background: rgba(91, 102, 112, .92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }   /* 무적 = 무채(맞아도 안 깎임) */
#hud .bp-tag.t-groggy { color: #1d1608; background: #e8c979; }   /* 무력화 = 호박 — 지금 치라는 표시 */
#hud .bp-tag.t-groggy.on { animation: bp-tag-in .22s cubic-bezier(.2, .9, .3, 1.3) both, bp-blink .5s ease-in-out .22s infinite alternate; }
#hud .bp-tag.t-enr { color: #fff; background: #b8322a; }
#hud .bp-tag.t-enr.on { animation: bp-tag-in .22s cubic-bezier(.2, .9, .3, 1.3) both, bp-blink 1.047s ease-in-out .22s infinite alternate; }
#hud .bp-phase { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; padding-right: 2px; }
#hud .bp-phase i { width: 6px; height: 6px; transform: rotate(45deg); box-shadow: inset 0 0 0 1px #6d716c; background: rgba(0, 0, 0, .45); }
#hud .bp-phase i.on { background: #8c7a52; box-shadow: inset 0 0 0 1px #c8aa6e; }
#hud .bp-phase i.now { background: #ffd36b; box-shadow: 0 0 6px rgba(255, 211, 107, .85); animation: bp-pip .36s cubic-bezier(.2, .9, .3, 1.4) both; }
#hud .bp-time { flex: none; min-width: 34px; text-align: right; font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; color: #f2f0e7; text-shadow: 0 1px 2px #000, 1px 0 1px #000, -1px 0 1px #000; }
#hud .bp-time.hot { color: #ff6a58; animation: bp-blink .5s ease-in-out infinite alternate; }   /* 마지막 30초(광폭화) */
/* 체력 막대: 홈(짙은 적흑) · 금선 테 = 01-hud .hp 와 같은 값. 밑 = 다음 줄 색(--u, 마지막 줄이면 홈) · 꼬리 = 지금 줄 색의 옅은 색 · 채움 = 지금 줄 색(--c) + 위 밝은 띠 · 아래 어두움 */
#hud .bp-bar { position: relative; height: 12px; 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 2px rgba(0, 0, 0, .45); }
#hud .bp-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
#hud .bp-under { width: 100%; background: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, .3)), var(--u); opacity: .85; }
#hud .bp-tail { width: 0; background: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .18)), color-mix(in srgb, var(--c) 45%, #fff); }   /* 지금 줄 색의 옅은 색(던파 결 — 2026-10-31 사용자, 흰 꼬리 대신) */
#hud .bp-fill { width: 100%; overflow: hidden; background: linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .06) 30%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .32)), var(--c); }
#hud .bp-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, .7)); }   /* 채움 끝 빛(01-hud .hp-fill::after) */
#hud .bp-bar > .bp-shine { left: 3px; right: 3px; top: 1px; bottom: auto; height: 3.5px; border-radius: 2px; background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .06)); }
#hud .bp-flash { width: 100%; background: #fff; opacity: 0; }
#hud .boss-plate.hit .bp-flash { animation: bp-flash .18s ease-out; }   /* 맞음 = 흰 번쩍(연타는 boss.js 가 120 ms 에 한 번) */
#hud .boss-plate.hit .bp-bar { animation: bp-hit .16s ease-out; }
#hud .boss-plate.enr .bp-bar { animation: bp-frame-enr 1.047s ease-in-out infinite alternate; }   /* 광폭화 = 테가 붉게 맥박(01-hud hp-low 와 같은 결) */
#hud .bp-pct { position: absolute; left: 0; right: 0; top: 0; height: 12px; z-index: 1; line-height: 13px; text-align: center; font-size: 9.5px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 1.2px 0 #000c, -1.2px 0 #000c, 0 1.2px #000c, 0 -1.2px #000c, 1px 1px #000c, -1px 1px #000c, 1px -1px #000c, -1px -1px #000c; }
/* 전체 막대(가는 금 · 단계 넘는 자리 흰 눈금) */
#hud .bp-total { position: relative; height: 3px; margin: 1px 2px 0; border-radius: 2px; background: rgba(0, 0, 0, .6); box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .22); }
#hud .bp-tfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: linear-gradient(90deg, #a8894e, #ffd36b); }
#hud .bp-tick { position: absolute; top: -1.5px; bottom: -1.5px; width: 1.5px; margin-left: -.75px; background: #fbf6ea; opacity: .85; box-shadow: 0 0 3px rgba(0, 0, 0, .8); }
/* 줄 수 xN(막대 오른쪽 — 로스트아크 · 리니지W 결): 줄이 넘어가면 톡 튐 + 금빛 */
#hud .bp-count { align-self: start; margin-top: 16px; min-width: 30px; font-size: 15px; font-weight: 900; font-style: italic; line-height: 16px; letter-spacing: .02em; color: #fbf6ea; font-variant-numeric: tabular-nums;
  text-shadow: 1.4px 0 #000, -1.4px 0 #000, 0 1.4px #000, 0 -1.4px #000, 1px 1px #000, -1px 1px #000, 0 0 8px rgba(0, 0, 0, .6); }
#hud .bp-count.tick { animation: bp-count .32s ease-out; }
@keyframes bp-in { from { transform: translate(-50%, -16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes bp-flash { from { opacity: .55; } to { opacity: 0; } }
@keyframes bp-hit { 0% { transform: translateX(0); } 30% { transform: translateX(-1.2px); } 65% { transform: translateX(1px); } 100% { transform: none; } }
@keyframes bp-count { 0% { transform: scale(1); } 35% { transform: scale(1.35); color: #ffe3a6; } 100% { transform: scale(1); } }
@keyframes bp-tag-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bp-pip { from { transform: rotate(45deg) scale(1.9); } to { transform: rotate(45deg) scale(1); } }
@keyframes bp-blink { from { opacity: 1; } to { opacity: .55; } }
@keyframes bp-ring-groggy { from { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 1.5px #e8c979, 0 0 6px #e8c979; } to { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 2px #ffe3a6, 0 0 14px #e8c979; } }
@keyframes bp-ring-enr { from { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 1.5px #c9483e, 0 0 6px #c9483e; } to { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 2px #ff6a58, 0 0 14px #ff3a2a; } }
@keyframes bp-frame-enr { 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, .5); } }

/* ---------------- ② 큰 패턴 경고 띠(이름판 아래 — 바닥 예고 58m 와 같은 순간): 붉은 ◆! + 패턴 이름. 짙은 띠 양 끝 흐림 + 위아래 1px 선 */
#hud .boss-warn { left: 50%; top: 62px; height: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 0 56px; z-index: 5; pointer-events: none; white-space: nowrap;
  background: linear-gradient(90deg, transparent, rgba(60, 8, 6, .84) 22%, rgba(60, 8, 6, .84) 78%, transparent); --wl: #e2583a; --wm: #d9261b; --wg: rgba(255, 60, 40, .75); }
#hud .boss-warn::before, #hud .boss-warn::after { content: ""; position: absolute; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, var(--wl), transparent); }
#hud .boss-warn::before { top: 0; } #hud .boss-warn::after { bottom: 0; }
#hud .boss-warn.k-roar { --wl: #c8aa6e; --wm: #b8892e; --wg: rgba(255, 211, 107, .7); background: linear-gradient(90deg, transparent, rgba(44, 32, 8, .86) 22%, rgba(44, 32, 8, .86) 78%, transparent); }   /* 포효 = 단계 넘어감(금) */
#hud .boss-warn.k-enr { --wg: rgba(255, 40, 20, .95); background: linear-gradient(90deg, transparent, rgba(84, 6, 4, .9) 22%, rgba(84, 6, 4, .9) 78%, transparent); }
#hud .boss-warn.k-skill .bw-mark { display: none; }   /* 패턴 = 스킬 이름만(10-28 — 느낌표 · 피하기 안내 없이) */
#hud .bw-mark { position: relative; isolation: isolate; flex: none; width: 18px; height: 18px; display: grid; place-items: center; font-style: normal; font-size: 12.5px; font-weight: 900; line-height: 1; color: #fff; }
#hud .bw-mark::before { content: ""; position: absolute; inset: 2.5px; z-index: -1; border-radius: 2px; transform: rotate(45deg); background: var(--wm); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 0 9px var(--wg); }
#hud .boss-warn.on .bw-mark { animation: bw-mark .45s ease-in-out infinite alternate; }
#hud .bw-text { font-size: 13px; font-weight: 900; letter-spacing: .06em; color: #fff1e8; text-shadow: 0 1px 3px #000, 0 0 10px var(--wg); }
#hud .boss-warn.on { animation: bw-in .26s cubic-bezier(.2, .9, .3, 1) both; }
#hud .boss-warn.on .bw-text { animation: bw-text .34s ease-out both; }
#hud .boss-warn.out { animation: bw-out .3s ease-in both; }
@keyframes bw-in { from { transform: translateX(-50%) scaleX(.3); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@keyframes bw-out { to { transform: translate(-50%, -6px); opacity: 0; } }
@keyframes bw-text { from { letter-spacing: .5em; opacity: 0; } to { letter-spacing: .06em; opacity: 1; } }
@keyframes bw-mark { from { transform: scale(1); } to { transform: scale(1.18); } }

/* ---------------- ③ 등장: 위아래 레터박스(52) + 아래쪽 이름 카드(보스가 내려앉는 가운데를 가리지 않게) → '전투 시작' */
#hud .boss-intro { left: 0; top: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; overflow: hidden; }
#hud .bi-lb { position: absolute; left: 0; right: 0; height: 52px; background: #050607; opacity: .92; transition: transform .42s cubic-bezier(.2, .9, .3, 1); }
#hud .bi-lb.top { top: 0; transform: translateY(-100%); } #hud .bi-lb.bot { bottom: 0; transform: translateY(100%); }
#hud .boss-intro.on .bi-lb { transform: none; }
#hud .boss-intro.out .bi-lb.top { transform: translateY(-100%); } #hud .boss-intro.out .bi-lb.bot { transform: translateY(100%); }
#hud .bi-card { position: absolute; left: 50%; top: 300px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 130px 9px; white-space: nowrap;
  background: linear-gradient(90deg, transparent, rgba(10, 12, 14, .74) 22%, rgba(10, 12, 14, .74) 78%, transparent); opacity: 0; }
#hud .bi-card::before, #hud .bi-card::after { content: ""; position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, #c8aa6e, transparent); }
#hud .bi-card::before { top: 0; } #hud .bi-card::after { bottom: 0; }
#hud .boss-intro.on .bi-card { animation: bi-open .34s cubic-bezier(.2, .9, .3, 1) .25s both; }
#hud .boss-intro.out .bi-card { animation: bi-leave .4s ease-in both; }
#hud .bi-tag { font-size: 10.5px; font-weight: 900; letter-spacing: .32em; color: #ff8a72; text-shadow: 0 0 8px rgba(255, 70, 40, .6), 0 1px 2px #000; }
#hud .bi-name { font-family: "BossTitle", "QuestTitle", "GwTitle", var(--ui-font), serif; font-size: 30px; font-weight: 900; line-height: 38px; letter-spacing: 8px; color: #fbf6ea;
  text-shadow: 0 0 14px rgba(255, 236, 190, .55), 0 2px 4px rgba(0, 0, 0, .85); }
#hud .boss-intro.on .bi-name { animation: bi-gather .55s ease-out .35s both; }
#hud .bi-sub { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: #c8c3b5; text-shadow: 0 1px 2px #000; }
#hud .boss-intro.on .bi-sub { animation: bi-fade .4s ease-out .6s both; }
#hud .bi-go { position: absolute; left: 50%; top: 150px; transform: translate(-50%, -50%); padding: 6px 90px; white-space: nowrap; opacity: 0;
  font-family: "BossTitle", "QuestTitle", "GwTitle", var(--ui-font), serif; font-size: 26px; font-weight: 900; letter-spacing: 10px; color: #ffe3a6; text-shadow: 0 0 16px rgba(255, 190, 90, .75), 0 2px 4px rgba(0, 0, 0, .9);
  background: linear-gradient(90deg, transparent, rgba(10, 12, 14, .6) 25%, rgba(10, 12, 14, .6) 75%, transparent); }
#hud .boss-intro.go .bi-go { animation: bi-go 1.05s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes bi-open { from { transform: translateX(-50%) scaleX(.2); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@keyframes bi-leave { from { transform: translateX(-50%); opacity: 1; } to { transform: translate(-50%, -14px); opacity: 0; } }
@keyframes bi-gather { from { letter-spacing: 30px; opacity: 0; filter: blur(3px); } to { letter-spacing: 8px; opacity: 1; filter: none; } }
@keyframes bi-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes bi-go { 0% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; letter-spacing: 22px; } 22% { transform: translate(-50%, -50%) scale(1); opacity: 1; letter-spacing: 10px; }
  70% { opacity: 1; } 100% { transform: translate(-50%, -62%); opacity: 0; } }

/* ---------------- ④ 광폭화 = 화면 가장자리 붉은 맥동(등급 빛 1047 ms) */
#hud .boss-vig { left: 0; top: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 70% 62% at 50% 50%, transparent 58%, rgba(190, 18, 8, .5) 100%); opacity: 0; }
#hud .boss-vig.on { animation: bv-pulse 1.047s ease-in-out infinite alternate; }
@keyframes bv-pulse { from { opacity: .35; } to { opacity: .9; } }

/* ---------------- ⑤ 결과 카드(토벌 성공 = 금 글자 + 도는 빛살 · 실패 = 무채): 띠 열림 → 글자 모임 → 보상 판 순차 팝(quest.css .qr-grid) → 돌아가는 초 */
#hud .boss-result { left: 0; right: 0; top: 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 7; pointer-events: none; }
#hud .boss-result.on { animation: bi-fade .2s ease-out both; }
#hud .boss-result::before { content: ""; position: absolute; left: 0; right: 0; top: -64px; height: 450px; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse 62% 56% at 50% 46%, rgba(8, 10, 12, .66), rgba(8, 10, 12, .38) 64%, rgba(8, 10, 12, .2)); }   /* 장면 어둡게(흥행작 결과 화면 공통) — 가운데 캐릭터 · 이름표가 보상 칸 뒤로 비치지 않게(10-24 봇 캡처) */
#hud .br-rays { position: absolute; left: 50%; top: 24px; width: 340px; height: 340px; margin: -170px 0 0 -170px; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 150, .2) 0 5deg, transparent 5deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 66%); mask: radial-gradient(circle, #000 0 18%, transparent 66%); animation: br-rays .7s ease-out both, br-spin 16s linear infinite; }
#hud .boss-result.no .br-rays { display: none; }
#hud .br-band { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 130px 8px; white-space: nowrap;
  background: linear-gradient(90deg, transparent, rgba(10, 12, 14, .78) 22%, rgba(10, 12, 14, .78) 78%, transparent); animation: bi-open-c .32s cubic-bezier(.2, .9, .3, 1) both; }
#hud .br-band::before, #hud .br-band::after { content: ""; position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, #c8aa6e, transparent); }
#hud .br-band::before { top: 0; } #hud .br-band::after { bottom: 0; }
#hud .boss-result.no .br-band::before, #hud .boss-result.no .br-band::after { background: linear-gradient(90deg, transparent, #8a5048, transparent); }
#hud .br-big { font-family: "BossTitle", "QuestTitle", "GwTitle", var(--ui-font), serif; font-size: 28px; font-weight: 900; line-height: 36px; letter-spacing: 8px; color: #ffe3a6;
  text-shadow: 0 0 14px rgba(255, 210, 130, .6), 0 2px 4px rgba(0, 0, 0, .85); animation: bi-gather .5s ease-out .08s both; }
#hud .boss-result.no .br-big { color: #d8d2c6; text-shadow: 0 0 10px rgba(160, 60, 50, .45), 0 2px 4px rgba(0, 0, 0, .85); }
#hud .br-sub { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: #c8c3b5; text-shadow: 0 1px 2px #000; animation: bi-fade .4s ease-out .3s both; }
#hud .br-cells-l { font-size: 11px; font-weight: 800; color: #b9bcb4; text-shadow: 0 1px 2px #000; animation: bi-fade .3s ease-out .45s both; }
#hud .boss-result .qr-grid { --d0: .4s; }
#hud .boss-result .qr-cell[data-it] { pointer-events: auto; }   /* 거둔 보상 칸 누름 → 아이템 정보(features/itemtip) — 결과 판 나머지는 그대로 누름이 지나간다 */
#hud .br-back { margin-top: 2px; padding: 2px 10px; border-radius: 9px; font-size: 11px; font-weight: 700; color: #c8c3b5; text-shadow: 0 1px 2px #000;
  background: rgba(10, 12, 14, .62); animation: bi-fade .3s ease-out .7s both; }   /* 처치 빛 고리 위에서도 읽히게 어두운 알약(10-24 캡처: 맨 글자 #9a9d98 은 빛 위에서 묻힘) */
#hud .br-back:empty { display: none; }
@keyframes bi-open-c { from { transform: scaleX(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes br-rays { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes br-spin { to { rotate: 360deg; } }

/* ---------------- ⑥ 알약: 나가기(알리미 자리 — 미니맵 아래) · 보스 도전(둥지 안 · 아래 가운데, 결정 = 청록 + 금빛 고리 맥박). 글자 폭 · 높이 28 · 누름 .92 → 1.06 */
#hud .boss-pill { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 14px 0 4px; border-radius: 14px; white-space: nowrap; pointer-events: auto; cursor: pointer; color: #f2f0e7; --tx: 0;
  background: linear-gradient(90deg, rgba(13, 16, 17, .8), rgba(13, 16, 17, .62)); box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .45), 0 2px 6px rgba(0, 0, 0, .4); animation: bpl-in .28s cubic-bezier(.2, .9, .3, 1.2) both; }
#hud .boss-pill b { font-size: 12px; font-weight: 900; text-shadow: 0 1px 2px #000; }
#hud .boss-pill.press { animation: bpl-press .22s ease-out both; }
#hud .bpl-ic { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); }
#hud .bpl-ic::after { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
#hud .bpl-ic.exit::after { -webkit-mask-image: url(../../assets/icons/talk-end.svg); mask-image: url(../../assets/icons/talk-end.svg); }
#hud .boss-leave { left: 10px; top: 92px; }   /* 퀘스트 알리미 자리(quest.css — 10-28 프로필 칸 · 지금 자리 줄 아래 6) */
#hud .boss-go { right: 10px; top: 66px; padding-left: 3px; }   /* 보스 도전(11-04 레이 R15 — 보스방 밖 · 조건을 채웠을 때만): 채팅 미리보기(오른쪽 위 34, 높이 26) 아래 6 · 초상 22 + 글자 폭 */
#hud .bpl-face { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; background: #1a1513; box-shadow: 0 0 0 1px #c8aa6e; animation: bpl-ring 1.6s ease-in-out infinite; }
#hud .bpl-face canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#hud .boss-go.wait { color: #b9b4aa; }
#hud .boss-go.wait .bpl-face { animation: none; box-shadow: 0 0 0 1px rgba(200, 170, 110, .45); filter: grayscale(.8); }
@keyframes bpl-ring { 50% { box-shadow: 0 0 0 1px #c8aa6e, 0 0 6px 1px rgba(200, 170, 110, .55); } }
@keyframes bpl-in { from { transform: translateX(var(--tx)) scale(.6); opacity: 0; } to { transform: translateX(var(--tx)); opacity: 1; } }
@keyframes bpl-press { 0% { transform: translateX(var(--tx)) scale(1); } 27% { transform: translateX(var(--tx)) scale(.92); } 65% { transform: translateX(var(--tx)) scale(1.06); } 100% { transform: translateX(var(--tx)) scale(1); } }

/* ---------------- ⑦ 도전 확인 팝업(공용 작은 팝업 18-popup-dark — 판 · 모서리 · 알약은 거기, 여기는 안 배치만)
   10-25 사용자 "제한 시간 3분만 보여주고 밑에 보상만 보여주자 efz 보스창 참고해서 보스도전 UI 이렇게 허접하게 짜지말고 퀄리티있게해":
   틀 = EFZ 보스 선택 창(scr_boss_victor_select_draw): 왼쪽 무대(어두운 판 · 등급색 고리 맥박 · 보스 서기 동작 · 이름) | 오른쪽(제한 시간 · 보상 칸 · 입장 단추).
   크기(GUI 450): 폭 404 · 무대 140 · 보스 칸 132 × 88 · 이름 16 · 보상 칸 52(quest.css .qr-cell.big) · 알약 28. 색 = 무채 + 등급색(--g) · 결정 청록. */
#ui .popup.bask { width: 404px; --g: #3d8eb9; }
#ui .popup.bask .popup-head h2 { font-size: 15px; }
#ui .bask-body { display: grid; grid-template-columns: 140px 1fr; gap: 14px; }
#ui .bask-stage { position: relative; height: 184px; border-radius: 9px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 9px;
  background: radial-gradient(ellipse 80% 46% at 50% 54%, color-mix(in srgb, var(--g) 26%, transparent), transparent 72%), linear-gradient(#17191b, #0d0f10);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 34%, rgba(255, 255, 255, .06)), inset 0 -30px 30px -18px rgba(0, 0, 0, .7); }
/* 바닥 고리 = EFZ 무대 고리(붉은 원 4겹 맥박)를 등급색 타원 2겹으로 — 등급 빛 1047 ms(ui-juice) */
#ui .bask-ring { position: absolute; left: 50%; top: 100px; width: 112px; height: 34px; margin: -17px 0 0 -56px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--g) 70%, transparent), 0 0 12px color-mix(in srgb, var(--g) 45%, transparent); animation: bask-ring 2.094s ease-out infinite; }
#ui .bask-ring.r2 { animation-delay: -1.047s; }
#ui .bask-boss { position: absolute; left: 50%; top: 104px; transform: translate(-50%, -100%); display: grid; place-items: end center; animation: bask-boss .42s cubic-bezier(.2, .9, .3, 1) .08s both; }
#ui .bask-boss canvas { display: block; image-rendering: pixelated; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .55)); }
#ui .bask-boss.none canvas { display: none; }
#ui .bask-boss.none::after { content: ""; width: 54px; height: 54px; margin-bottom: 10px; background: #cfcac0; -webkit-mask: url(icon-boss.png) center / contain no-repeat; mask: url(icon-boss.png) center / contain no-repeat; }
#ui .bask-id { position: relative; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0 6px; text-align: center; }
#ui .bask-id small { max-width: 100%; font-size: 9.5px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .bask-id b { max-width: 100%; font-family: "BossTitle", "QuestTitle", "GwTitle", var(--ui-font, GFUIFont), serif; font-size: 16px; font-weight: 900; line-height: 20px; letter-spacing: .08em; color: #fbf6ea;
  text-shadow: 0 0 8px rgba(255, 236, 190, .3), 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .bask-id em { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--ink-soft); }
#ui .bask-g { font-style: normal; margin-right: 5px; color: var(--g); font-weight: 900; }
#ui .bask-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
#ui .bask-time { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 11px; border-radius: 7px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
#ui .bask-time span { font-size: 11.5px; font-weight: 700; color: #b9bcb4; }
#ui .bask-time b { font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .03em; color: #f2f0e7; }
#ui .bask-rwh { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
#ui .bask-rwh b { flex: none; font-size: 12px; font-weight: 900; color: #e8c979; }   /* 보상 머리 = 지갑 골드(EFZ 보상 제목 #ffe0a1 결) */
#ui .bask-rwh span { min-width: 0; font-size: 10.5px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .bask-cells { display: flex; flex-wrap: wrap; gap: 6px; }
#ui .bask-cells .qr-cell { animation-delay: calc(.12s + var(--i, 0) * 70ms); }   /* 창 팝 뒤 70 ms 순차(ui-juice) */
#ui .bask-cells.off .qr-cell { filter: grayscale(.7); opacity: .5; }
#ui .bask-need { margin: 6px 0 0; font-size: 10.5px; font-weight: 700; color: #ff9a8a; }
#ui .bask-foot { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
#ui .bask-foot .btn { flex: none; min-width: 72px; }
#ui .bask-lv { margin-right: auto; font-size: 11px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
#ui .bask-lv.low { color: #ff7a6a; }
#ui .popup.bask .btn.busy { opacity: .7; pointer-events: none; }
@keyframes bask-ring { from { transform: scale(.55); opacity: 0; } 25% { opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
@keyframes bask-boss { from { transform: translate(-50%, calc(-100% + 8px)); opacity: 0; } to { transform: translate(-50%, -100%); opacity: 1; } }
#ui .bask-rwh.q { margin-top: 9px; }   /* 처치 보상 줄 아래 퀘스트 보상 줄(11-04 피드백 1-4) */
/* 확률 드롭(11-05 N 5): 왼쪽 무대 아래 2 × 2(오른쪽 보상 줄이 길어 판이 폰 높이를 넘지 않게) · 머리 [?] = 보스 확률표(boss-odds-dim) · 칸 아래 확률 글자 */
#ui .bask-left { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
#ui .bask-rolls .bask-rwh { margin-bottom: 5px; }
#ui .bask-rolls .bask-cells { display: grid; grid-template-columns: repeat(2, 44px); justify-content: center; gap: 4px 14px; }
#ui .bask-rwh .bask-q { flex: none; align-self: center; width: 15px; height: 15px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 900; line-height: 15px; text-align: center;
  color: #26221c; background: #e8c979; box-shadow: 0 1px 2px #000a; cursor: pointer; }
#ui .bask-roll { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#ui .bask-roll small { font-size: 9.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: #e8c979; }