/* 게임 HUD. 반투명 흰색·회색, 좁은 폰트, 호박색 강조, 위험 빨강. 좀비 모드 = 진홍 테마 */
#hud { --hud: rgba(255, 255, 255, 0.92); --hud2: rgba(255, 255, 255, 0.62); --hud-dim: rgba(255, 255, 255, 0.32); --hud-bg: rgba(5, 8, 16, 0.55); --hud-line: rgba(255, 255, 255, 0.22); --acc: var(--amber); font-family: var(--f-kr); color: var(--hud); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
#hud.zombie { --acc: #ff2a3c; --hud: rgba(255, 220, 220, 0.95); --hud2: rgba(255, 170, 170, 0.7); --hud-bg: rgba(40, 0, 6, 0.55); --hud-line: rgba(255, 60, 70, 0.4); }
#hud.zombie::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(120, 0, 10, 0) 50%, rgba(120, 0, 10, 0.45) 100%); pointer-events: none; }
#hud.dead .h-bottom-left, #hud.dead .h-bottom-right, #hud.dead .h-inv, #hud.dead .h-objective, #hud.dead .h-compass, #hud.dead .h-crosshair, #hud.dead .h-prompt { opacity: 0.25; }
#hud.dead .h-lowhp, #hud.spectator .h-lowhp, #hud.extracted .h-lowhp, #hud.spectator .h-inv, #hud.extracted .h-inv { display: none; }
#hud.spectator .h-bottom-right, #hud.spectator .h-crosshair, #hud.extracted .h-bottom-right, #hud.extracted .h-crosshair { display: none; }
#hud .hp-label, #hud .cap { font-family: var(--f-cap); text-transform: uppercase; letter-spacing: 0.18em; font-size: 10px; color: var(--hud2); }
#hud .num { font-family: var(--f-num); font-weight: 700; font-variant-numeric: tabular-nums; }
#hud > * { position: absolute; }

/* 나침반 띠 (위 가운데) */
.h-compass { top: 12px; left: 50%; transform: translateX(-50%); width: 440px; height: 44px; display: flex; flex-direction: column; align-items: center; }
.h-compass .strip { position: relative; width: 100%; height: 26px; overflow: hidden; border-bottom: 1px solid var(--hud-line); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.h-compass .ticks { position: absolute; top: 0; left: 50%; height: 100%; will-change: transform; }
.h-compass .tick { position: absolute; top: 19px; width: 1px; height: 6px; background: var(--hud-dim); }
.h-compass .tick.major { top: 15px; height: 10px; background: var(--hud2); }
.h-compass .lab { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--f-kr); font-weight: 700; font-size: 12px; color: var(--hud); white-space: nowrap; line-height: 14px; }
.h-compass .lab.minor { font-size: 10px; font-weight: 500; color: var(--hud2); }
.h-compass .lab.deg { font-family: var(--f-num); font-weight: 600; font-size: 9px; color: var(--hud-dim); top: 3px; }
.h-compass .markers { position: absolute; inset: 0; }
.h-compass .mk { position: absolute; top: 0; left: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; transition: opacity 0.2s; }
.h-compass .mk i { width: 10px; height: 10px; display: block; background: var(--acc); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 6px var(--acc); }
.h-compass .mk.vip i { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); clip-path: circle(50%); }
.h-compass .mk.lz i { background: var(--green); box-shadow: 0 0 6px var(--green); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.h-compass .mk.ally i { background: #6fb6ff; box-shadow: none; width: 7px; height: 7px; clip-path: circle(50%); }
.h-compass .mk.loot i { background: var(--hud2); width: 6px; height: 6px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: none; }
.h-compass .mk.surv i { background: #9fe39b; box-shadow: 0 0 5px #9fe39b; width: 8px; height: 8px; clip-path: circle(50%); }
.h-compass .mk.card i { background: #7cc8ff; box-shadow: 0 0 7px #7cc8ff; width: 13px; height: 9px; border-radius: 2px; clip-path: none; }   /* 카드키 (ui.keycard.marker, 2026-10-21) */
.h-compass .mk .d { font-family: var(--f-num); font-weight: 600; font-size: 9px; color: var(--hud2); }
.h-compass .center { position: absolute; left: 50%; bottom: 0; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid var(--acc); transform: translateX(-50%); filter: drop-shadow(0 0 4px var(--acc)); }
.h-compass .heading { font-family: var(--f-num); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; margin-top: 3px; color: var(--hud); }
.h-compass .heading small { font-size: 9px; color: var(--hud2); margin-left: 2px; }

/* 목표 (왼쪽 위) */
.h-objective { top: 22px; left: 26px; width: 320px; }
.h-objective .head { display: flex; align-items: center; gap: 10px; }
.h-objective .head .bar { width: 3px; height: 22px; background: var(--acc); box-shadow: 0 0 8px var(--acc); }
.h-objective .title { font-family: var(--f-kr); font-weight: 700; font-size: 17px; color: #fff; }
.h-objective .text { margin: 5px 0 0 13px; font-size: 12.5px; color: var(--hud2); line-height: 1.45; max-width: 300px; }
.h-objective .timer { margin: 6px 0 0 13px; display: flex; align-items: baseline; gap: 8px; }
.h-objective .timer .num { font-size: 24px; color: var(--hud); line-height: 1; }
.h-objective .timer.urgent .num { color: var(--danger); animation: pulse 1s infinite; }
.h-objective .prog { margin: 6px 0 0 13px; width: 220px; height: 3px; background: rgba(255, 255, 255, 0.15); }
.h-objective .prog i { display: block; height: 100%; background: var(--acc); width: 0; transition: width 0.25s linear; }
.h-objective .loc { margin: 12px 0 0 13px; display: flex; align-items: center; gap: 8px; }
.h-objective .loc .area { font-size: 12px; color: var(--hud2); }
.h-objective .loc .floor { font-family: var(--f-num); font-weight: 700; font-size: 15px; color: var(--hud); padding: 0 6px; border: 1px solid var(--hud-line); border-radius: 2px; line-height: 20px; }
.h-objective .zinfo { margin: 10px 0 0 13px; font-size: 12px; color: var(--hud2); }

/* 킬피드 (오른쪽 위) */
.h-killfeed { top: 22px; right: 26px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.h-killfeed .kf { display: flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--hud-bg); border-right: 2px solid var(--hud-line); font-size: 12px; animation: slideInR 0.25s var(--ease) both; transition: opacity 0.6s; }
.h-killfeed .kf.out { opacity: 0; }
.h-killfeed .kf .k { font-weight: 700; color: #fff; }
.h-killfeed .kf .v { color: var(--hud2); }
.h-killfeed .kf .w { font-family: var(--f-cap); font-size: 10px; letter-spacing: 0.1em; color: var(--acc); text-transform: uppercase; padding: 0 5px; border: 1px solid var(--hud-line); border-radius: 2px; }
.h-killfeed .kf.head .w { color: var(--amber); border-color: rgba(255, 178, 30, 0.5); }
.h-killfeed .kf.me { border-right-color: var(--acc); background: rgba(255, 178, 30, 0.14); }
.h-killfeed .kf.p { border-right-color: var(--danger); }
@keyframes slideInR { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.h-net { top: 6px; right: 26px; display: flex; gap: 10px; font-family: var(--f-num); font-weight: 600; font-size: 11px; color: var(--hud-dim); }
.h-net span b { color: var(--hud2); font-weight: 600; margin-left: 3px; }
.h-net span.bad b { color: var(--danger); }

/* 분대 (왼쪽 아래) */
.h-squad { left: 26px; bottom: 150px; width: 210px; display: flex; flex-direction: column; gap: 5px; }
.h-squad .cap { margin-bottom: 2px; }
.h-squad .sq { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 4px 8px; background: var(--hud-bg); border-left: 2px solid var(--hud-line); }
.h-squad .sq.me { border-left-color: var(--acc); }
.h-squad .sq .n { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-squad .sq .s { font-family: var(--f-cap); font-size: 9px; letter-spacing: 0.14em; color: var(--hud2); text-transform: uppercase; }
.h-squad .sq .s.inf { color: var(--poison); }
.h-squad .sq .s.dead, .h-squad .sq .s.zombie { color: var(--danger); }
.h-squad .sq .s.extracted { color: var(--green); }
.h-squad .sq .b { grid-column: 1 / -1; height: 3px; background: rgba(255, 255, 255, 0.14); }
.h-squad .sq .b i { display: block; height: 100%; background: var(--hud); width: 100%; transition: width 0.2s; }
.h-squad .sq.low .b i { background: var(--danger); }
.h-squad .sq.gone { opacity: 0.45; }

/* 아래 왼쪽: 체력·감염·스태미나 */
.h-bottom-left { left: 26px; bottom: 28px; width: 300px; }
.h-vitals .row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.h-vitals .hpnum { font-size: 34px; line-height: 1; color: #fff; }
.h-vitals .hpnum small { font-size: 13px; color: var(--hud2); margin-left: 3px; }
.h-vitals .hpbar { position: relative; height: 10px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--hud-line); overflow: hidden; }
.h-vitals .hpbar .fill { position: absolute; inset: 0; width: 100%; transform-origin: left; background: linear-gradient(90deg, #ffffff, #d8dee8); transition: transform 0.18s var(--ease); }
.h-vitals .hpbar .ghost { position: absolute; inset: 0; width: 100%; transform-origin: left; background: rgba(255, 59, 48, 0.55); transition: transform 0.7s 0.25s var(--ease); }
.h-vitals .hpbar .segs { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0, 0, 0, 0.55) calc(10% - 1px) 10%); }
.h-vitals.low .hpbar .fill { background: linear-gradient(90deg, #ff6b63, #ff3b30); animation: pulse 0.9s infinite; }
.h-vitals.infected .hpbar .fill { background: linear-gradient(90deg, #7dff8f, #2ec44a); }
.h-vitals.infected .hpbar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0) 0 6px, rgba(0, 0, 0, 0.25) 6px 9px); animation: crawl 1.2s linear infinite; }
@keyframes crawl { from { background-position: 0 0; } to { background-position: 26px 0; } }
.h-vitals .inf { display: none; margin-top: 6px; align-items: center; gap: 8px; }
.h-vitals.infected .inf { display: flex; }
.h-vitals .inf .cap { color: var(--poison); letter-spacing: 0.24em; }
.h-vitals .inf .bar { flex: 1; height: 4px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(57, 211, 83, 0.35); }
.h-vitals .inf .bar i { display: block; height: 100%; width: 0; background: var(--poison); box-shadow: 0 0 8px var(--poison); transition: width 0.3s; }
.h-vitals .inf .pct { font-family: var(--f-num); font-weight: 700; font-size: 12px; color: var(--poison); min-width: 32px; text-align: right; }
/* 감염: 초당 깎이는 체력 한 줄 + 체력이 줄 때마다 은은한 붉은 맥박 (2026-10-21 영구 감염) */
.h-vitals .infrate { display: none; margin-top: 3px; font-size: 11px; color: rgba(255, 140, 120, 0.85); letter-spacing: 0.02em; }
.h-vitals.infected .infrate { display: block; }
.h-vitals.infected.drain .hpbar { animation: zs-inf-drain 0.9s ease-out; }
.h-vitals.infected.drain .hpbar .fill { animation: zs-inf-drain-fill 0.9s ease-out; }
@keyframes zs-inf-drain { 0% { box-shadow: 0 0 0 rgba(255, 40, 30, 0); } 25% { box-shadow: 0 0 14px rgba(255, 40, 30, 0.75); } 100% { box-shadow: 0 0 0 rgba(255, 40, 30, 0); } }
@keyframes zs-inf-drain-fill { 0% { filter: none; } 25% { filter: brightness(1.6) saturate(1.4); } 100% { filter: none; } }
.h-vitals .stam { margin-top: 6px; height: 3px; background: rgba(0, 0, 0, 0.45); width: 220px; }
.h-vitals .stam i { display: block; height: 100%; width: 100%; transform-origin: left; background: var(--hud2); transition: transform 0.1s linear, background 0.2s; }
.h-vitals .stam.low i { background: var(--danger); }
/* 손전등 건전지 막대 (2026-10-22 W7-B, ui/hud.js setBattery): 손전등 그림 + 남은 양. 켜 있으면 밝게, 낮으면 빨갛게 깜빡, 다 닳으면 빈 막대 */
.h-vitals .bat { margin-top: 6px; display: flex; align-items: center; gap: 6px; width: 220px; }
.h-vitals .bat .ico { width: 18px; height: 9px; fill: var(--hud-dim); flex: none; }
.h-vitals .bat .bbar { flex: 1; height: 3px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--hud-line); }
.h-vitals .bat .bbar i { display: block; height: 100%; width: 100%; transform-origin: left; background: #ffe7a3; opacity: 0.55; transition: transform 0.25s linear, background 0.2s; }
.h-vitals .bat.on .ico { fill: #ffe7a3; filter: drop-shadow(0 0 4px rgba(255, 220, 140, 0.8)); }
.h-vitals .bat.on .bbar i { opacity: 1; }
.h-vitals .bat.low .ico { fill: var(--danger); }
.h-vitals .bat.low .bbar i { background: var(--danger); opacity: 1; animation: pulse 0.9s infinite; }
.h-vitals .bat.empty .ico { fill: var(--danger); opacity: 0.6; }
.h-vitals .bat.empty .bbar { border-color: rgba(255, 59, 48, 0.55); }
#hud.zombie .h-vitals .bat { display: none; }
#hud.zombie .h-vitals .hpbar .fill { background: linear-gradient(90deg, #ff5a68, #b3001b); }
#hud.zombie .h-vitals .stam i { background: #ff2a3c; }

/* 아래 오른쪽: 무기·탄 */
.h-bottom-right { right: 26px; bottom: 28px; width: 300px; display: flex; flex-direction: column; align-items: flex-end; }
.h-weapon { display: flex; align-items: flex-end; gap: 14px; }
.h-weapon .wicon { width: 96px; height: 52px; object-fit: contain; object-position: right bottom; opacity: 0.92; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)); margin-bottom: 6px; }
.h-weapon .wicon.hidden { display: none; }
.h-weapon .ring { position: relative; width: 54px; height: 54px; margin-bottom: 4px; display: none; }
.h-weapon.reloading .ring { display: block; }
.h-weapon .ring svg { width: 54px; height: 54px; transform: rotate(-90deg); }
.h-weapon .ring circle { fill: none; stroke-width: 3; }
.h-weapon .ring .bg { stroke: rgba(255, 255, 255, 0.15); }
.h-weapon .ring .fg { stroke: var(--acc); stroke-linecap: butt; stroke-dasharray: 150.8; stroke-dashoffset: 150.8; }
.h-weapon .ring .lab { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-cap); font-size: 9px; letter-spacing: 0.08em; color: var(--hud2); text-transform: uppercase; }
.h-weapon .info { text-align: right; }
.h-weapon .wname { font-family: var(--f-cap); text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: var(--hud2); }
.h-weapon .wname b { color: var(--hud); font-weight: 500; }
.h-weapon .ammo { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; line-height: 1; margin-top: 2px; }
.h-weapon .ammo .mag { font-size: 50px; color: #fff; }
.h-weapon .ammo .sep { font-size: 22px; color: var(--hud-dim); }
.h-weapon .ammo .res { font-size: 22px; color: var(--hud2); min-width: 40px; text-align: left; }
.h-weapon.lowammo .ammo .mag { color: var(--danger); }
.h-weapon.empty .ammo .mag { color: var(--danger); animation: pulse 0.8s infinite; }
.h-weapon .ammo.melee .mag { font-size: 30px; }
.h-weapon .mode { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.h-weapon .mode .m { font-family: var(--f-cap); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; padding: 1px 6px; border: 1px solid var(--hud-line); color: var(--hud2); border-radius: 2px; }
.h-weapon .mode .m.on { border-color: var(--acc); color: var(--acc); }
.h-weapon .ammo .unit { font-size: 14px; color: var(--hud2); margin-left: -2px; }
.h-weapon .ammo .res.hascap { min-width: 30px; text-align: right; }
.h-weapon .ammo .cap { font-size: 12px; color: var(--hud-dim); margin-left: -4px; min-width: 30px; }   /* 가방 탄 보유 한도 (작게) */
.h-weapon .ammo .cap.full { color: var(--acc); }
.h-weapon .whint { font-size: 11px; color: var(--hud2); margin-top: 4px; white-space: nowrap; }
/* 가방 밖 남은 탄 줄 (2026-10-23 "탄창은 아이템창에서 빼줘"): 탄 그림 + 발 수, 든 총의 탄은 밝게 */
.h-weapon .reserves { display: flex; justify-content: flex-end; gap: 10px; margin-top: 5px; }
.h-weapon .reserves.hidden { display: none; }
.h-weapon .reserves .r { display: inline-flex; align-items: center; gap: 3px; opacity: 0.55; }
.h-weapon .reserves .r img { width: 20px; height: 14px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)); }
.h-weapon .reserves .r .n { font-size: 12px; color: var(--hud2); min-width: 18px; text-align: left; }
.h-weapon .reserves .r.cur { opacity: 1; }
.h-weapon .reserves .r.cur .n { color: #fff; }
.h-weapon .reserves .r.zero .n { color: var(--danger); }
.h-weapon .reserves .r.full .n { color: var(--acc); }
.h-weapon.throw .ammo .mag { font-size: 44px; color: var(--acc); }
.h-weapon.quest .wname b { color: var(--cyan); }
.h-weapon.quest .wicon { filter: drop-shadow(0 0 8px rgba(79, 209, 255, 0.55)); }
.h-weapon .zombie-atk { display: none; gap: 8px; }
#hud.zombie .h-weapon .zombie-atk { display: flex; }
.h-weapon .zombie-atk .za { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 12px; border: 1px solid var(--hud-line); background: var(--hud-bg); min-width: 72px; }
.h-weapon .zombie-atk .za .k { font-family: var(--f-num); font-weight: 700; font-size: 12px; color: var(--acc); }
.h-weapon .zombie-atk .za .t { font-size: 11px; }

/* 장비 5칸 + 가방 6칸 (아래 가운데). 1 주무기(넓은 칸) / 2·3 근접 / 4 특수무기(개수 배지) / 5 퀘스트(반짝임) */
.h-inv { left: 50%; bottom: 44px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.h-equip { display: flex; gap: 6px; align-items: flex-end; }
.h-equip .sl { position: relative; width: 62px; height: 50px; border: 1px solid var(--hud-line); background: var(--hud-bg); display: grid; place-items: center; transition: border-color 0.12s, background 0.12s, transform 0.12s var(--ease), opacity 0.12s; }
.h-equip .sl.k0 { width: 104px; }
.h-equip .sl .key { position: absolute; top: 2px; left: 5px; font-family: var(--f-num); font-weight: 700; font-size: 11px; color: var(--hud-dim); line-height: 1; }
.h-equip .sl img { width: 38px; height: 34px; object-fit: contain; opacity: 0.92; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)); margin-top: 3px; }
.h-equip .sl.k0 img { width: 80px; height: 36px; }
.h-equip .sl .cnt { position: absolute; right: 4px; bottom: 2px; font-family: var(--f-num); font-weight: 700; font-size: 12px; color: var(--hud); line-height: 1; }
.h-equip .sl.k3 .cnt { right: -5px; top: -7px; bottom: auto; min-width: 22px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--acc); color: #15120a; font-size: 11px; display: grid; place-items: center; box-shadow: 0 0 8px rgba(255, 178, 30, 0.6); }
.h-equip .sl.k3 .cnt:empty { display: none; }
.h-equip .sl .nm { position: absolute; left: 0; right: 0; bottom: -16px; text-align: center; font-family: var(--f-cap); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hud-dim); white-space: nowrap; line-height: 1; }
.h-equip.nonames .sl .nm { display: none; }
.h-equip .sl.sel { border-color: var(--acc); background: rgba(255, 178, 30, 0.16); transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255, 178, 30, 0.25), 0 6px 18px rgba(0, 0, 0, 0.5); }
.h-equip .sl.sel .nm, .h-equip .sl.sel .key { color: var(--acc); }
.h-equip .sl.empty { opacity: 0.5; }
.h-equip .sl.empty img { display: none; }
.h-equip .sl.empty::after { content: ''; width: 4px; height: 4px; background: var(--hud-dim); border-radius: 50%; margin-top: 4px; }
.h-equip .sl.quest.has { border-color: rgba(79, 209, 255, 0.7); animation: questGlow 1.6s ease-in-out infinite; }   /* 옛 설정 5번 = 퀘스트 칸 */
.h-equip .sl.quest.has .key, .h-equip .sl.quest.has .nm { color: var(--cyan); }
.h-equip .sl.quest.has.sel { border-color: var(--acc); animation: none; }
/* 5번 붕대 칸 (2026-10-23): 개수 배지 (1개여도) */
.h-equip .sl.heal .cnt { right: -5px; top: -7px; bottom: auto; min-width: 22px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ece6da; color: #15120a; font-size: 11px; display: grid; place-items: center; box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); }
.h-equip .sl.heal .cnt:empty { display: none; }
@keyframes questGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(79, 209, 255, 0); } 50% { box-shadow: 0 0 14px 2px rgba(79, 209, 255, 0.45); } }
.h-bag { display: flex; align-items: center; gap: 8px; }
.h-bag .row { display: flex; gap: 4px; }
.h-bag .bs { position: relative; width: 34px; height: 30px; border: 1px solid var(--hud-line); background: var(--hud-bg); display: grid; place-items: center; }
.h-bag .bs img { width: 22px; height: 20px; object-fit: contain; opacity: 0.9; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)); }
.h-bag .bs .cnt { position: absolute; right: 2px; bottom: 0; font-family: var(--f-num); font-weight: 700; font-size: 10px; color: var(--hud); line-height: 1.2; }
.h-bag .bs.empty { opacity: 0.4; }
.h-bag .bs.empty img { display: none; }
.h-bag .bs.empty::after { content: ''; width: 3px; height: 3px; background: var(--hud-dim); border-radius: 50%; }
.h-bag .bs.off { display: none; }   /* 서버 가방 칸 수(bag.slots, 기본 3) 밖 칸 */
/* 가방 = 퀘스트 아이템 (2026-10-23): 칸 왼쪽 위 숫자키 6~8, 든 칸은 하늘색 테두리 */
.h-bag .bs .key { position: absolute; top: 1px; left: 3px; font-family: var(--f-num); font-weight: 700; font-size: 9px; color: var(--hud-dim); line-height: 1; }
.h-bag .bs:not(.empty) { border-color: rgba(79, 209, 255, 0.6); }
.h-bag .bs:not(.empty) .key { color: var(--cyan); }
.h-bag .bs.sel { border-color: var(--acc); background: rgba(255, 178, 30, 0.16); }   /* 숫자키로 골라 둔 칸 (G = 내려놓기) */
.h-bag .bs.sel .key { color: var(--acc); }
.h-bag .cap { display: flex; align-items: center; gap: 6px; font-size: 9.5px; letter-spacing: 0.14em; }
.h-bag .cap .kbd { height: 16px; min-width: 16px; padding: 0 4px; font-size: 10px; border-color: var(--hud-line); color: var(--hud2); background: rgba(0, 0, 0, 0.35); }
.h-bag .cap .hint { font-family: var(--f-kr); letter-spacing: 0; text-transform: none; color: var(--hud-dim); }
/* 열쇠 주머니 (층 카드키, 2026-10-22 W7-A): 가방 위 작은 카드 칩 줄 (가방 칸을 안 씀) */
.h-keys { display: flex; align-items: center; gap: 6px; }
.h-keys.hidden { display: none; }
.h-keys .cap { font-size: 9.5px; letter-spacing: 0.08em; color: var(--hud-dim); font-family: var(--f-kr); }
.h-keys .row { display: flex; gap: 4px; }
.h-keys .kc { display: flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px 0 3px; border: 1px solid rgba(86, 198, 255, 0.55); background: rgba(10, 30, 46, 0.6); }
.h-keys .kc img { width: 16px; height: 14px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)); }
.h-keys .kc .fl { font-family: var(--f-kr); font-size: 10.5px; font-weight: 700; color: #bfe8ff; line-height: 1; }
#hud.zombie .h-inv { display: none; }

/* 크로스헤어 */
.h-crosshair { left: 50%; top: 50%; width: 0; height: 0; }
.h-crosshair .l { position: absolute; background: var(--hud); box-shadow: 0 0 2px rgba(0, 0, 0, 0.9); }
.h-crosshair .l.t, .h-crosshair .l.b { width: 2px; height: 8px; left: -1px; }
.h-crosshair .l.l, .h-crosshair .l.r { height: 2px; width: 8px; top: -1px; }
.h-crosshair .dot { position: absolute; width: 2px; height: 2px; left: -1px; top: -1px; background: var(--hud); }
.h-crosshair .ring { position: absolute; width: 22px; height: 22px; left: -11px; top: -11px; border: 1.5px solid var(--hud2); border-radius: 50%; display: none; }
.h-crosshair.melee .l { display: none; }
.h-crosshair.melee .ring { display: block; }
.h-crosshair.zombie .l { display: none; }
.h-crosshair.zombie .ring { display: block; border-color: #ff2a3c; border-style: dashed; width: 30px; height: 30px; left: -15px; top: -15px; }
.h-crosshair.zombie .dot { background: #ff2a3c; width: 4px; height: 4px; left: -2px; top: -2px; }
.h-crosshair.none { display: none; }

/* 히트마커 */
.h-hit { left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.h-hit .x { position: absolute; left: 0; top: 0; opacity: 0; }
.h-hit .x i { position: absolute; width: 2px; height: 9px; left: -1px; top: -1px; background: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.9); transform-origin: 50% 0; }
.h-hit .x i:nth-child(1) { transform: rotate(45deg) translateY(5px); }
.h-hit .x i:nth-child(2) { transform: rotate(135deg) translateY(5px); }
.h-hit .x i:nth-child(3) { transform: rotate(225deg) translateY(5px); }
.h-hit .x i:nth-child(4) { transform: rotate(315deg) translateY(5px); }
.h-hit .x.head i { background: var(--amber); height: 11px; }
.h-hit .x.kill i { background: var(--danger); height: 13px; width: 3px; left: -1.5px; }
.h-hit .x.show { animation: hitpop 0.22s var(--ease) both; }
@keyframes hitpop { 0% { opacity: 1; transform: scale(1.35); } 100% { opacity: 0; transform: scale(1); } }

/* 피격 방향 */
.h-damage { left: 50%; top: 50%; width: 0; height: 0; }
.h-damage .d { position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; transform-origin: 50% 50%; opacity: 0; }
.h-damage .d::before { content: ''; position: absolute; left: 50%; top: -12px; width: 60px; height: 34px; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 0%, rgba(255, 59, 48, 0.95) 0%, rgba(255, 59, 48, 0) 70%); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.h-damage .d.show { animation: dmgfade 0.9s ease-out both; }
@keyframes dmgfade { 0% { opacity: 1; } 100% { opacity: 0; } }
/* 피격 순간 가장자리가 핏빛으로 (고르지 않은 얼룩) */
.h-damage-vign { inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.15s;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 0, 0, 0) 48%, rgba(150, 0, 4, 0.55) 100%), radial-gradient(ellipse at 8% 20%, rgba(120, 0, 6, 0.7) 0, rgba(120, 0, 6, 0) 26%), radial-gradient(ellipse at 92% 78%, rgba(120, 0, 6, 0.6) 0, rgba(120, 0, 6, 0) 24%), radial-gradient(ellipse at 88% 12%, rgba(90, 0, 4, 0.5) 0, rgba(90, 0, 4, 0) 18%), radial-gradient(ellipse at 12% 86%, rgba(90, 0, 4, 0.5) 0, rgba(90, 0, 4, 0) 20%); }
.h-damage-vign.show { opacity: 1; transition: opacity 0.05s; }
/* 피 튐 (맞은 방향 가장자리에 핏자국이 찍혔다 마름) */
.h-blood { inset: 0; pointer-events: none; overflow: hidden; }
.h-blood .sp { position: absolute; width: 320px; height: 320px; margin: -160px 0 0 -160px; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0; filter: saturate(1) brightness(0.55) contrast(1.15); will-change: opacity, transform; }
.h-blood .sp.css { background-image: radial-gradient(circle at 50% 50%, rgba(120, 0, 8, 0.92) 0 16%, rgba(120, 0, 8, 0) 17%), radial-gradient(circle at 36% 42%, rgba(120, 0, 8, 0.85) 0 8%, rgba(120, 0, 8, 0) 9%), radial-gradient(circle at 63% 38%, rgba(120, 0, 8, 0.85) 0 6%, rgba(120, 0, 8, 0) 7%), radial-gradient(circle at 58% 66%, rgba(120, 0, 8, 0.8) 0 5%, rgba(120, 0, 8, 0) 6%), radial-gradient(circle at 30% 64%, rgba(120, 0, 8, 0.8) 0 4%, rgba(120, 0, 8, 0) 5%), radial-gradient(ellipse at 50% 78%, rgba(120, 0, 8, 0.7) 0 3%, rgba(120, 0, 8, 0) 4%); }
.h-blood .sp.show { animation: splat 1.6s ease-out both; }
@keyframes splat { 0% { opacity: 0; transform: rotate(var(--rot, 0deg)) scale(calc(var(--sc, 1) * 0.72)); } 7% { opacity: 0.72; transform: rotate(var(--rot, 0deg)) scale(calc(var(--sc, 1) * 1.04)); } 45% { opacity: 0.6; transform: rotate(var(--rot, 0deg)) scale(var(--sc, 1)); } 100% { opacity: 0; transform: rotate(var(--rot, 0deg)) scale(var(--sc, 1)); } }
/* 저체력 맥박 (체력 30% 아래) */
.h-lowhp { inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.5s; background: radial-gradient(ellipse at center, rgba(120, 0, 0, 0) 38%, rgba(140, 0, 2, 0.62) 100%), radial-gradient(ellipse at 0% 50%, rgba(80, 0, 0, 0.5) 0, rgba(80, 0, 0, 0) 30%), radial-gradient(ellipse at 100% 50%, rgba(80, 0, 0, 0.5) 0, rgba(80, 0, 0, 0) 30%); }
.h-lowhp.on { opacity: 1; animation: heartbeat calc(1.25s - var(--low, 0) * 0.45s) ease-in-out infinite; }
@keyframes heartbeat { 0%, 100% { opacity: calc(0.35 + var(--low, 0) * 0.3); } 12% { opacity: calc(0.75 + var(--low, 0) * 0.25); } 24% { opacity: calc(0.45 + var(--low, 0) * 0.3); } 36% { opacity: calc(0.7 + var(--low, 0) * 0.3); } 60% { opacity: calc(0.35 + var(--low, 0) * 0.3); } }
.h-vitals .lowtag { display: none; margin-right: 8px; padding: 0 5px; border: 1px solid var(--danger); color: var(--danger); border-radius: 2px; font-size: 9px; letter-spacing: 0.2em; animation: pulse 0.9s infinite; }
.h-vitals.low .lowtag { display: inline-block; }
.h-vitals.low .hpnum { color: var(--danger); text-shadow: 0 0 14px rgba(255, 59, 48, 0.5); }

/* 상호작용 안내·진행 */
.h-prompt { left: 50%; top: calc(50% + 48px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; background: var(--hud-bg); border: 1px solid var(--hud-line); font-size: 12.5px; white-space: nowrap; }
.h-prompt .kbd { height: 22px; min-width: 22px; font-size: 12px; border-color: var(--acc); color: var(--acc); background: rgba(0, 0, 0, 0.4); }
.h-interact { left: 50%; top: calc(50% + 60px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.h-interact svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.h-interact circle { fill: none; stroke-width: 3; }
.h-interact .bg { stroke: rgba(255, 255, 255, 0.18); }
.h-interact .fg { stroke: var(--acc); stroke-dasharray: 119.4; stroke-dashoffset: 119.4; }
.h-interact .lab { font-size: 12px; color: var(--hud); }

/* 토스트 (위 가운데, 나침반 아래) */
.h-toasts { top: 74px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.h-toast { padding: 6px 14px; background: var(--hud-bg); border-left: 3px solid var(--hud2); font-size: 13px; animation: riseIn 0.25s var(--ease) both; transition: opacity 0.4s; max-width: 520px; text-align: center; }
.h-toast.out { opacity: 0; }
.h-toast.info { border-left-color: var(--hud2); }
.h-toast.warn { border-left-color: var(--amber); }
.h-toast.objective { border-left-color: var(--amber); background: rgba(255, 178, 30, 0.16); }
.h-toast.danger { border-left-color: var(--danger); background: rgba(255, 59, 48, 0.18); }
.h-toast.success { border-left-color: var(--green); background: rgba(93, 255, 122, 0.14); }

/* 가운데 큰 알림 */
.h-big { left: 50%; top: 30%; transform: translate(-50%, -50%); text-align: center; opacity: 0; pointer-events: none; }
.h-big.show { animation: bigin 0.5s var(--ease) both; opacity: 1; }
/* 사라질 때도 애니메이션으로 (들어올 때 애니메이션이 opacity 1 을 붙잡고 있어서 opacity 만 바꾸면 안 사라졌음) */
.h-big.out { animation: bigout 0.5s ease both; opacity: 0; }
.h-big .t { font-family: var(--f-title); font-size: 46px; color: #fff; line-height: 1.05; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8); letter-spacing: 0.01em; }
.h-big .s { font-size: 14px; color: var(--hud2); margin-top: 6px; }
.h-big .ln { width: 80px; height: 2px; background: var(--acc); margin: 10px auto 0; }
.h-big.danger .t { color: #ff5a4f; }
@keyframes bigin { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); letter-spacing: 0.2em; } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes bigout { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.98); } }

/* 채팅 (왼쪽, 분대 위) */
.h-chat { left: 26px; bottom: 310px; width: 360px; display: flex; flex-direction: column; gap: 6px; }
.h-chat .log { display: flex; flex-direction: column; gap: 2px; max-height: 150px; overflow: hidden; justify-content: flex-end; }
.h-chat .log .m { font-size: 12.5px; padding: 2px 8px; background: var(--hud-bg); align-self: flex-start; transition: opacity 0.8s; max-width: 100%; word-break: break-word; }
.h-chat .log .m .n { color: var(--amber2); font-weight: 500; margin-right: 6px; }
.h-chat .log .m.sys { color: var(--hud2); }
.h-chat .log .m.out { opacity: 0; }
.h-chat.open .log .m.out { opacity: 1; }
.h-chat form { display: none; gap: 6px; align-items: center; pointer-events: auto; }
.h-chat.open form { display: flex; }
.h-chat form .input { height: 32px; background: rgba(0, 0, 0, 0.55); border-color: var(--hud-line); font-size: 13px; }
.h-chat form .hint { font-size: 10px; color: var(--hud-dim); white-space: nowrap; }

/* 점수판 */
.h-score { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 560px; background: rgba(5, 8, 16, 0.86); border: 1px solid var(--hud-line); backdrop-filter: blur(8px); padding: 0; }
.h-score .head { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 18px; border-bottom: 1px solid var(--hud-line); }
.h-score .head .t { font-family: var(--f-title); font-size: 22px; }
.h-score table { width: 100%; border-collapse: collapse; }
.h-score th { font-family: var(--f-cap); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hud2); font-weight: 500; text-align: left; padding: 8px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.h-score td { padding: 7px 18px; font-size: 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.h-score td.num, .h-score th.num { text-align: right; }
.h-score td.num { font-family: var(--f-num); font-weight: 700; font-size: 15px; }
.h-score tr.me td { color: var(--amber2); }
.h-score tr.me td:first-child { border-left: 2px solid var(--amber); }
.h-score .st { font-family: var(--f-cap); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.h-score .st.inf { color: var(--poison); }
.h-score .st.dead, .h-score .st.zombie { color: var(--danger); }
.h-score .st.extracted { color: var(--green); }

/* 사망 화면 */
.h-death { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: radial-gradient(ellipse at center, rgba(60, 0, 6, 0.3) 0%, rgba(20, 0, 2, 0.85) 100%); animation: fadeIn 0.6s both; }
.h-death .t { font-family: var(--f-title); font-size: 64px; color: #ff4a40; line-height: 1; text-shadow: 0 0 30px rgba(255, 59, 48, 0.5); }
.h-death .s { font-size: 15px; color: var(--hud2); }
.h-death .cd { font-family: var(--f-num); font-weight: 700; font-size: 44px; color: #fff; margin-top: 10px; line-height: 1; }
.h-death .cdl { font-family: var(--f-cap); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--hud2); }
/* 영어 제목 YOU DIED · INFECTED (대표님 2026-10-22, 문구 copy death.title · infect.title): 영문 굵은 글꼴, 넓은 자간. 카운트다운 숫자는 그 아래 그대로 */
.h-death .t.en { font-family: var(--f-cap); font-weight: 700; font-size: 92px; letter-spacing: 0.16em; padding-left: 0.16em; text-transform: uppercase; }
.h-death .t.en + .s.hidden + .cd { margin-top: 18px; }
.h-big.en .t { font-family: var(--f-cap); font-weight: 700; font-size: 64px; letter-spacing: 0.18em; padding-left: 0.18em; text-transform: uppercase; }
.h-big.infected .t { color: var(--poison); text-shadow: 0 0 26px rgba(57, 211, 83, 0.45), 0 2px 18px rgba(0, 0, 0, 0.85); }
.h-big.infected .ln { background: var(--poison); }
.h-big.nosub .s { display: none; }

/* 전망대 망원경 보는 중 (game/telescope.js, 서버 ui.telescope): 크로스헤어·목표·장비 칸·무기 칸·나침반·분대·안내 숨김 (체력·알림·무전 자막은 그대로) */
#hud.scoping .h-crosshair, #hud.scoping .h-hit, #hud.scoping .h-prompt, #hud.scoping .h-interact, #hud.scoping .h-inv, #hud.scoping .h-bottom-right,
#hud.scoping .h-objective, #hud.scoping .h-compass, #hud.scoping .h-squad, #hud.scoping .h-killfeed, #hud.scoping .h-perf, #hud.scoping .h-net { visibility: hidden; }
/* 쌍안경 가림 (검은 판에 원 구멍, SVG). #hud(z 20) 아래 · 3D 화면 위, 클릭 통과 */
.zs-scope { position: fixed; inset: 0; z-index: 19; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--scope-in, 0.3s) ease, visibility 0s linear var(--scope-in, 0.3s); }
.zs-scope.on { opacity: 1; visibility: visible; transition: opacity var(--scope-in, 0.3s) ease, visibility 0s; }
.zs-scope svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.zs-scope-hint { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; font-family: var(--f-kr); font-size: 13px; color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); white-space: nowrap; }
.zs-scope-hint .kbd { height: 24px; min-width: 26px; font-size: 12px; }
.zs-scope-hint .sub { color: rgba(255, 255, 255, 0.5); font-size: 12px; margin-left: 6px; }

/* 모드 라벨 (관전·탈출) */
.h-mode { left: 50%; top: 110px; transform: translateX(-50%); text-align: center; display: none; }
#hud.spectator .h-mode, #hud.extracted .h-mode { display: block; }
.h-mode .t { font-family: var(--f-cap); font-size: 13px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--hud); padding: 4px 14px; border: 1px solid var(--hud-line); background: var(--hud-bg); }
.h-mode .s { font-size: 12px; color: var(--hud2); margin-top: 6px; }
#hud.extracted .h-mode .t { border-color: var(--green); color: var(--green); }

/* 좀비 모드 라벨 */
.h-zlabel { right: 26px; top: 56px; display: none; align-items: center; gap: 10px; }
#hud.zombie .h-zlabel { display: flex; }
.h-zlabel .t { font-family: var(--f-title); font-size: 20px; color: #ff2a3c; text-shadow: 0 0 16px rgba(255, 42, 60, 0.6); }
.h-zlabel .s { font-size: 11px; color: var(--hud2); }

/* 가벼운 HUD (html.zs-lite-game: 낮음·최저 품질 또는 그래픽 가속 꺼짐). 화면 전체 합성 비용을 줄이려고 마스크·필터·계속 도는 효과를 끔 */
.zs-lite-game #hud { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9); }
.zs-lite-game .h-compass .strip { -webkit-mask-image: none; mask-image: none; }
.zs-lite-game .h-compass .center, .zs-lite-game .h-weapon .wicon, .zs-lite-game .h-equip .sl img, .zs-lite-game .h-bag .bs img, .zs-lite-game .h-blood .sp { filter: none; }
.zs-lite-game .h-lowhp.on { animation: none; opacity: calc(0.55 + var(--low, 0) * 0.35); }
.zs-lite-game .h-vitals.infected .hpbar::after, .zs-lite-game .h-equip .sl.k4.has { animation: none; }
.zs-lite-game .h-score { backdrop-filter: none; background: rgba(5, 8, 16, 0.95); }
/* 그래픽 가속 꺼짐 알약 (오른쪽 아래, 무기 위. js/ui/perfcheck.js perfBadge). 마우스가 잠겨 있으면 클릭이 캔버스로 가서 눌리지 않고, 풀려 있을 때만 눌러 고치는 방법 창을 엶 */
.h-perf { right: 26px; bottom: 172px; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 9px; border-radius: 14px; border: 1px solid rgba(255, 178, 30, 0.45); background: rgba(5, 8, 16, 0.6); color: var(--hud); font-family: var(--f-kr); font-size: 12px; line-height: 1; white-space: nowrap; pointer-events: auto; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.h-perf:hover { border-color: var(--amber); background: rgba(16, 11, 4, 0.85); }
.h-perf .pw-ico { flex: none; width: 14px; height: 14px; color: var(--amber); }
.h-perf .pw-ico svg { width: 100%; height: 100%; display: block; }
.h-perf .t { font-weight: 500; }
.h-perf .kbd { height: 18px; min-width: 0; padding: 0 5px; margin-left: 2px; font-size: 10.5px; border-color: var(--hud-line); border-bottom-width: 1px; color: var(--hud2); background: rgba(0, 0, 0, 0.35); }
.h-perf .hint { color: var(--hud2); margin-left: -2px; }
/* 일시정지 화면이 열려 있으면 그 화면 오른쪽에 같은 안내 카드가 있으니 알약은 숨김 */
body:has(.s-pause) #hud .h-perf { visibility: hidden; }

/* 종로타워 2판: 목표 아래 '내 층' 안내 한 줄 (map.gates 기준) */
.h-objective .sub { margin: 6px 0 0 13px; padding-left: 8px; border-left: 2px solid var(--amber); font-size: 12.5px; font-weight: 500; color: #ffe2a8; line-height: 1.4; max-width: 300px; }
/* 목표 갱신 연출 (ui/objfx.js, 서버 ui.hud.objectiveFx): 테두리가 잠깐 호박색으로 빛남(upd-glow, 길이 --obj-glow) · 줄이 왼쪽에서 살짝 밀려 들어옴(upd-slide) · 치는 줄 끝 깜빡이 커서 */
.h-objective { --obj-glow: 1.4s; }
.h-objective::before { content: ''; position: absolute; inset: -9px -14px -8px -12px; border: 1px solid transparent; border-radius: 4px; pointer-events: none; opacity: 0; }
.h-objective.upd-glow::before { animation: objGlow var(--obj-glow) ease-out 1 both; }
.h-objective.upd-glow .head .bar { animation: objBar var(--obj-glow) ease-out 1; }
.h-objective.upd-slide .head, .h-objective.upd-slide .text, .h-objective.upd-slide .sub { animation: objSlide 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) 1; }
.h-objective .typing::after { content: ''; display: inline-block; width: 0.45em; height: 0.95em; margin-left: 2px; vertical-align: -0.1em; background: currentColor; opacity: 0.7; animation: objCaret 0.42s steps(1) infinite; }
@keyframes objGlow {
  0% { opacity: 1; border-color: rgba(255, 210, 120, 0.95); background: rgba(255, 168, 40, 0.14); box-shadow: 0 0 22px rgba(255, 168, 40, 0.5), inset 0 0 16px rgba(255, 168, 40, 0.22); }
  55% { opacity: 0.55; }
  100% { opacity: 0; border-color: rgba(255, 210, 120, 0); background: rgba(255, 168, 40, 0); box-shadow: 0 0 0 rgba(255, 168, 40, 0); }
}
@keyframes objBar { 0% { background: #ffe0a0; box-shadow: 0 0 18px #ffb02e, 0 0 6px #fff; transform: scaleY(1.35); } 100% { transform: none; } }
@keyframes objSlide { 0% { transform: translateX(-16px); opacity: 0.15; } 100% { transform: none; opacity: 1; } }
@keyframes objCaret { 50% { opacity: 0; } }
/* 처음 들어간 층 알림 */
.h-toast.floor { border-left-color: var(--hud); background: rgba(5, 8, 16, 0.7); font-weight: 700; letter-spacing: 0.04em; }

/* 무전 자막 (js/ui/comms.js, 서버 ui.comms). #hud 밖 형제 요소 = 오프닝(HUD 숨김) 중에도 보임. 장비 칸 위 가운데, 크로스헤어·탄약 칸을 안 가림 */
.zs-comms { position: fixed; left: 50%; bottom: 178px; transform: translateX(-50%); z-index: 22; width: min(760px, 92vw); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; font-family: var(--f-kr); }
.zs-comms.top { top: 112px; bottom: auto; }
/* 헬기 오프닝 중 (render/opening.js: html.zs-opening-on, --zs-letterbox = 아래 검은 띠 높이): 장비 칸이 숨으니 띠 바로 위에 영화 자막처럼 */
html.zs-opening-on .zs-comms:not(.top) { bottom: calc(var(--zs-letterbox, 0px) + 7.5vh); }
.zs-comms.hidden { display: none; }
.zs-comms .cl { max-width: 100%; padding: 7px 16px 8px; background: rgba(4, 7, 14, 0.66); border-radius: 3px; color: #fff; font-size: 15.5px; font-weight: 500; line-height: 1.45; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); animation: commsIn 0.22s ease-out both; transition: opacity 0.45s; }
.zs-comms .cl .who { font-weight: 700; margin-right: 10px; color: #6db8ff; }
.zs-comms .cl.out { opacity: 0; }
@keyframes commsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.zs-lite-game .zs-comms .cl { animation: none; }
@media (max-height: 640px) { .zs-comms { bottom: 160px; } .zs-comms .cl { font-size: 14px; } }
/* 보이스톡 (V12 2026-10-24, ui/hud.js voice): 분대 머리 오른쪽 마이크 그림 + 키 칸. 상태 = na 못 씀(흐리게·빗금) · off 꺼짐(빗금) · wait 여는 중 · ready 누르는 동안 방식 기다림 · on 켜짐 · live 말하는 중 */
.h-squad .sq-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.h-squad .sq-head .cap { margin-bottom: 0; }
.h-mic { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 6px 0 5px; border: 1px solid var(--hud-line); border-radius: 11px; background: var(--hud-bg); color: var(--hud2); pointer-events: auto; cursor: pointer; font: inherit; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.h-mic.hidden { display: none; }
.h-mic .ico { width: 14px; height: 14px; display: block; }
.h-mic .ico .m { fill: currentColor; }
.h-mic .ico .sl { stroke: var(--danger); opacity: 0; }
.h-mic .kc { min-width: 15px; height: 15px; padding: 0 3px; border: 1px solid rgba(255, 255, 255, 0.28); border-bottom-width: 2px; border-radius: 3px; font-family: var(--f-cap); font-size: 9.5px; line-height: 12px; letter-spacing: 0.04em; text-align: center; color: var(--hud); box-sizing: border-box; }
.h-mic .kc:empty { display: none; }
.h-mic.off .ico .sl, .h-mic.na .ico .sl, .h-mic.denied .ico .sl { opacity: 1; }
.h-mic.off { color: var(--hud-dim); }
.h-mic.na { opacity: 0.38; pointer-events: none; color: var(--hud-dim); }
.h-mic.na .ico .sl { stroke: var(--hud2); }
.h-mic.denied { opacity: 0.55; color: var(--hud-dim); }
.h-mic.wait { color: var(--hud2); animation: pulse 1s infinite; }
.h-mic.ready { color: var(--hud); }
.h-mic.on { color: var(--hud); border-color: rgba(93, 255, 122, 0.45); }
.h-mic.live { color: var(--green); border-color: rgba(93, 255, 122, 0.85); background: rgba(10, 60, 24, 0.55); box-shadow: 0 0 8px rgba(93, 255, 122, 0.35); }
.h-mic:hover { border-color: rgba(255, 255, 255, 0.5); }
/* 분대 줄: 말하는 사람 = 초록 줄 + 이름 앞 작은 마이크, 음소거 = 이름 뒤 빗금 스피커 */
.h-squad .sq.talk { border-left-color: var(--green); box-shadow: inset 2px 0 6px -2px rgba(93, 255, 122, 0.7); }
.h-squad .sq.talk .n::before, .h-squad .sq.vmute .n::after { content: ''; display: inline-block; width: 10px; height: 10px; vertical-align: -1px; background: currentColor; -webkit-mask: var(--zs-vico) center / contain no-repeat; mask: var(--zs-vico) center / contain no-repeat; }
.h-squad .sq.talk .n::before { --zs-vico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14.5a3.5 3.5 0 0 0 3.5-3.5V5.5a3.5 3.5 0 0 0-7 0V11a3.5 3.5 0 0 0 3.5 3.5Zm6-3.5h-1.8a4.2 4.2 0 0 1-8.4 0H6a6 6 0 0 0 5.1 5.9V20H9v1.8h6V20h-2.1v-3.1A6 6 0 0 0 18 11Z'/%3E%3C/svg%3E"); margin-right: 4px; color: var(--green); }
.h-squad .sq.vmute .n::after { --zs-vico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='M16 9l5 6M21 9l-5 6' stroke='black' stroke-width='2.2' fill='none'/%3E%3C/svg%3E"); margin-left: 5px; color: var(--hud-dim); }