/* Project Mecha 웹 전투 목업 — HUD·오버레이
   v0.35.0 TASK19 시안(Art/UI/mockup-r1) 기준 통일: 짙은 남청 반투명 패널 · 1px 청회색 테두리 + 모서리 꺾쇠 · 호박 강조(선택 발광) ·
   파랑/빨강 팀색 · 증가 초록/감소 빨강 · 각진 SF 글꼴(Chakra Petch, OFL) + 고정폭 숫자(Share Tech Mono, OFL) — web/vendor/fonts (CDN 없음) */
@font-face { font-family: "Chakra Petch"; font-weight: 500; font-display: swap; src: url("vendor/fonts/ChakraPetch-Medium.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-display: swap; src: url("vendor/fonts/ChakraPetch-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-display: swap; src: url("vendor/fonts/ChakraPetch-Bold.woff2") format("woff2"); }
@font-face { font-family: "Share Tech Mono"; font-weight: 400; font-display: swap; src: url("vendor/fonts/ShareTechMono-Regular.woff2") format("woff2"); }

:root {
  /* 디자인 토큰 */
  --k-bg: #0b131c; --k-bg2: #101b27; --k-panel: rgba(11, 19, 28, 0.88); --k-panel2: rgba(19, 31, 44, 0.86);
  --k-line: rgba(120, 150, 180, 0.26); --k-line2: rgba(160, 188, 214, 0.55);
  --k-ink: #e1e8ef; --k-dim: #8696a6; --k-dim2: #56687a;
  --k-amber: #f5a623; --k-amber2: #ffc457; --k-amber-glow: rgba(245, 166, 35, 0.5);
  --k-blue: #3d8bff; --k-blue2: #78b4ff; --k-red: #ff4a4a; --k-red2: #ff8070;
  --k-pos: #4fe08a; --k-neg: #ff5a5a;
  --k-font: "Chakra Petch", "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --k-mono: "Share Tech Mono", "Consolas", "D2Coding", ui-monospace, monospace;
  /* 예전 이름 (HUD) → 토큰 */
  --amber: var(--k-amber); --amber2: #ff9a1a; --red: var(--k-red); --blue: var(--k-blue2);
  --ink: var(--k-ink); --dim: var(--k-dim); --bg: rgba(11, 19, 28, 0.78); --line: var(--k-line);
  font-family: var(--k-font);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #a7adb3; color: var(--ink); user-select: none; }
#app { position: fixed; inset: 0; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#view.playing { cursor: none; }
canvas.speedlines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#ver { position: absolute; right: 8px; top: 6px; font: 11px var(--k-mono); color: rgba(0, 0, 0, 0.45); pointer-events: none; }
#fatal { display: none; position: absolute; left: 50%; top: 40%; transform: translateX(-50%); background: #300; color: #fff; padding: 16px 24px; }
button { font-family: var(--k-font); }

/* ── 공통 부품 (src/ui/kit.js) ─────────────────────────────── */
/* 꺾쇠 프레임: .kf (+ .on = 호박색 선택 발광). 네 모서리 = ::before 배경 8장 */
.kf { position: relative; border: 1px solid var(--k-line); }
.kf::before, .hud-cf::before { content: ""; position: absolute; inset: -1px; pointer-events: none; --c: var(--k-line2);
  background: linear-gradient(var(--c), var(--c)) left top / 12px 2px no-repeat, linear-gradient(var(--c), var(--c)) left top / 2px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 12px 2px no-repeat, linear-gradient(var(--c), var(--c)) right top / 2px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 12px 2px no-repeat, linear-gradient(var(--c), var(--c)) left bottom / 2px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 12px 2px no-repeat, linear-gradient(var(--c), var(--c)) right bottom / 2px 12px no-repeat; }
.kf.on { border-color: var(--k-amber); box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.6), 0 0 22px var(--k-amber-glow), inset 0 0 24px rgba(245, 166, 35, 0.1); }
.kf.on::before { --c: var(--k-amber2); }
.k-panel { background: var(--k-panel); }
.k-ph { display: flex; align-items: baseline; gap: 14px; padding: 8px 14px 7px; border-bottom: 1px solid var(--k-line); }
.k-ph b { font: 700 19px/1.1 var(--k-font); letter-spacing: 3px; color: #f1f5f9; }
.k-ph small { font-size: 10.5px; letter-spacing: 1.8px; color: var(--k-dim); }
.k-ph small em { font-style: normal; letter-spacing: 0; margin-left: 10px; color: var(--k-dim2); }
.k-ph .k-phr { margin-left: auto; font: 12px var(--k-mono); letter-spacing: 2px; color: var(--k-dim); }
.k-ph.slim { padding: 6px 12px 5px; }
.k-ph.slim b { font-size: 12px; letter-spacing: 2.5px; color: var(--k-dim); font-weight: 600; }
.k-ic { display: inline-flex; width: 18px; height: 18px; flex: none; font-style: normal; }
.k-ic svg { width: 100%; height: 100%; display: block; }
.k-d { font: normal 12px var(--k-mono); white-space: nowrap; }
.k-d.pos { color: var(--k-pos); } .k-d.neg { color: var(--k-neg); } .k-d.z { color: var(--k-dim2); }
.k-sb { position: relative; display: block; height: 6px; background: rgba(255, 255, 255, 0.07); }
.k-sb em { position: absolute; left: 0; top: 0; bottom: 0; background: var(--k-blue); }
.k-sb s { position: absolute; top: 0; bottom: 0; }
.k-sb s.pos { background: var(--k-pos); } .k-sb s.neg { background: var(--k-neg); opacity: 0.85; }
.k-g { display: flex; flex-direction: column; gap: 3px; }
.k-gl { display: flex; align-items: baseline; gap: 10px; }
.k-gl span { font-size: 11px; letter-spacing: 2px; color: var(--k-dim); min-width: 34px; }
.k-gl b { font: 20px/1 var(--k-mono); color: var(--k-amber); }
.k-gl b.big { font-size: 28px; }
.k-gl b small { font-size: 0.6em; margin-left: 1px; }
.k-g.en .k-gl b { color: var(--k-blue2); }
.k-gl em { margin-left: auto; font: normal 14px var(--k-mono); color: var(--k-ink); }
.k-gl em small { color: var(--k-dim); }
.k-gl em .k-d { margin-left: 6px; }
.k-gb { position: relative; height: 9px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(160, 188, 214, 0.2); }
.k-gb i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #b8741a, var(--k-amber)); }
.k-g.en .k-gb i { background: linear-gradient(90deg, #1f5bb8, var(--k-blue)); }
.k-gb s { position: absolute; left: 0; top: -5px; height: 2px; background: rgba(255, 255, 255, 0.65); }
.k-gb u { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--k-ink); }
.k-gb u.max { background: var(--k-red); box-shadow: 0 0 6px var(--k-red); }
.k-gn { font-size: 10.5px; color: var(--k-dim); }
.k-g.warn .k-gb i { background: linear-gradient(90deg, #a05a10, #ff8a1a); }
.k-g.warn .k-gl b, .k-g.warn .k-gn { color: #ff9a3c; }
.k-g.over .k-gb i { background: linear-gradient(90deg, #801a10, var(--k-red)); }
.k-g.over .k-gl b, .k-g.over .k-gn { color: var(--k-red); }
.k-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px; cursor: pointer;
  font: 600 15px var(--k-font); letter-spacing: 3px; color: var(--k-ink); background: rgba(16, 27, 39, 0.92); border: 1px solid var(--k-line2); }
.k-btn:hover { border-color: var(--k-amber); color: var(--k-amber2); box-shadow: 0 0 14px rgba(245, 166, 35, 0.25); }
.k-btn span { display: inline-flex; align-items: center; gap: 14px; }
.k-btn .k-ic { width: 24px; height: 24px; }
.k-btn.go { color: #1d1204; font-weight: 700; border: 1px solid var(--k-amber2); background: linear-gradient(#ffcb62, var(--k-amber) 55%, #d88a12);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 24px rgba(245, 166, 35, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.k-btn.go:hover { color: #1d1204; background: linear-gradient(#ffd77f, #ffb43a 55%, #e3961c); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 32px rgba(245, 166, 35, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.k-btn.go.warn { color: var(--k-amber); background: rgba(40, 26, 6, 0.85); box-shadow: inset 0 0 0 1px var(--k-amber); }
.k-btn[disabled], .k-btn[disabled]:hover { cursor: not-allowed; color: #6f7c88; background: rgba(40, 46, 54, 0.85); border-color: #3a4552; box-shadow: none; }
.k-btn.sm { padding: 5px 10px; font-size: 11px; letter-spacing: 2px; gap: 6px; }
.k-btn.sm .k-ic { width: 14px; height: 14px; }
.k-btn kbd { margin: 0 0 0 4px; }
.k-hatch { display: inline-block; width: 150px; height: 10px; background: repeating-linear-gradient(-60deg, var(--k-dim2) 0 3px, transparent 3px 8px); opacity: 0.8; }
.k-note { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--k-dim); }
.k-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 10px; letter-spacing: 2px; color: var(--k-dim2); border-top: 1px solid rgba(120, 150, 180, 0.14); padding-top: 4px; }
.k-foot i { font-style: normal; margin: 0 6px; }
kbd { display: inline-block; min-width: 20px; padding: 0 5px; margin-right: 3px; border: 1px solid rgba(160, 188, 214, 0.45); border-bottom-width: 2px; border-radius: 2px;
  background: rgba(16, 27, 39, 0.9); color: var(--k-ink); font: 11px/1.6 var(--k-mono); text-align: center; letter-spacing: 0; }
.r-assault { color: #ffd27a; } .r-melee { color: #ff8a6a; } .r-sniper { color: #8fd8ff; } .r-artillery { color: #ffb070; } .r-support { color: #8dffb6; }

/* 1600×900 기준 화면 (kit.fitStage 가 --ks 로 확대·축소) */
.k-stage { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; transform: translate(-50%, -50%) scale(var(--ks, 1)); font-size: 13px; }

/* ── HUD (전투) ─────────────────────────────────────────────── */
#hud { position: absolute; inset: 0; pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.hud-layer { position: absolute; inset: 0; }
/* HUD 패널 공통: 남청 반투명 + 청회색 선 + 모서리 꺾쇠 */
.hud-top, .hud-obj, .hud-diag, .hud-weap .w, .hud-weap .cd, .hud-weap .role, .respawn, .duel-log, .duel-box, .minimap-wrap { border: 1px solid var(--k-line); background: var(--bg); }
.hud-top::before, .hud-obj::before, .hud-diag::before, .hud-weap .w::before, .respawn::before, .duel-log::before, .overlay .panel::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; --c: var(--k-line2);
  background: linear-gradient(var(--c), var(--c)) left top / 9px 2px no-repeat, linear-gradient(var(--c), var(--c)) left top / 2px 9px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 9px 2px no-repeat, linear-gradient(var(--c), var(--c)) right top / 2px 9px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 9px 2px no-repeat, linear-gradient(var(--c), var(--c)) left bottom / 2px 9px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 9px 2px no-repeat, linear-gradient(var(--c), var(--c)) right bottom / 2px 9px no-repeat; }

/* 위 */
.hud-top { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 18px; align-items: center; padding: 6px 16px; font-size: 14px; }
.hud-top .enemies b { color: var(--red); font: 20px var(--k-mono); margin-left: 6px; }
.hud-top .lbl { color: var(--dim); font-size: 11px; letter-spacing: 2px; }
.hud-top .time { font: 20px var(--k-mono); letter-spacing: 1px; }
.hud-top .wave { color: var(--dim); font-size: 12px; }

/* 왼쪽 아래: 무기 */
.hud-weap { position: absolute; left: 18px; bottom: 18px; width: 300px; display: flex; flex-direction: column; gap: 6px; }
.hud-weap .w { position: relative; display: flex; gap: 10px; align-items: center; border-left: 3px solid var(--amber); padding: 6px 10px; }
.hud-weap .w i { width: 64px; height: 24px; color: var(--ink); flex: none; }
.hud-weap svg { width: 100%; height: 100%; display: block; }
.hud-weap .info { flex: 1; }
.hud-weap .nm { font-size: 12px; color: var(--ink); font-weight: 600; letter-spacing: 0.5px; }
.hud-weap .nm small { color: var(--amber); margin-left: 4px; font-size: 10px; font-weight: 500; }
.hud-weap .ammo b { font: 26px/1.1 var(--k-mono); }
.hud-weap .ammo b.low { color: var(--red); }
.hud-weap .ammo span { color: var(--dim); margin-left: 4px; font-family: var(--k-mono); }
.hud-weap .bar { height: 4px; background: rgba(255, 255, 255, 0.1); margin-top: 3px; }
.hud-weap .bar div { height: 100%; background: var(--amber); width: 100%; }
.hud-weap .bar.reload div { background: var(--k-blue2); }
.hud-weap .pips { display: flex; gap: 5px; margin-top: 5px; }
.hud-weap .pips span { width: 26px; height: 6px; background: rgba(255, 255, 255, 0.15); transform: skewX(-20deg); }
.hud-weap .pips span.on { background: var(--amber2); box-shadow: 0 0 8px var(--amber2); }
.hud-weap .dead { opacity: 0.35; border-left-color: #000; }
.hud-weap .dead i { color: #222; }
.hud-weap .sub { display: flex; gap: 6px; }
.hud-weap .cd { flex: 1; padding: 5px 8px; display: grid; grid-template-columns: 22px 1fr; align-items: center; column-gap: 6px; }
.hud-weap .cd i { width: 20px; height: 20px; grid-row: span 2; color: var(--dim); }
.hud-weap .cd.ready i { color: var(--amber); }
.hud-weap .cd .bar div { background: var(--dim); }
.hud-weap .cd.ready .bar div { background: var(--amber); }
.hud-weap .slots { display: flex; gap: 4px; }
.hud-weap .slots span { flex: 1; text-align: center; font-size: 11px; padding: 2px 0; background: var(--bg); border: 1px solid var(--line); color: var(--dim); }
.hud-weap .slots span.on { color: var(--ink); border-color: var(--amber); background: rgba(245, 166, 35, 0.18); }
.hud-weap .slots span.next { border-style: dashed; border-color: var(--amber); }
.hud-weap .blocked { opacity: 0.45; }
.hud-weap .role { font-size: 11px; letter-spacing: 1.5px; color: var(--dim); padding: 3px 8px; }
.hud-weap .role b { color: var(--amber); font-weight: 700; letter-spacing: 2px; }
.hud-weap .role small { float: right; color: var(--dim); font-size: 10px; letter-spacing: 0; margin-top: 2px; }
.hud-weap .ammo span.low { color: var(--red); }
.hud-weap .ammo-warn { background: rgba(120, 20, 20, 0.78); border: 1px solid var(--red); color: #ffd0c8; font-size: 12px; padding: 4px 10px; }
.hud-weap .ammo-warn.empty { animation: blink 0.5s steps(2) infinite; }

/* 아래 가운데: 코어·EN — v0.47.0 얇은 흰 막대 + 검은 그림자 (참고: 메시지 1564992539977711747 이미지) */
.hud-bars { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 520px; display: flex; flex-direction: column; gap: 9px; }
.hud-bars .row { display: grid; grid-template-columns: 26px 1fr 46px; align-items: center; gap: 10px 16px; }
.hud-bars .lbl { font: 700 12px var(--k-mono); letter-spacing: 1px; color: #fff; text-align: left; text-shadow: 0 0 2px #000, 0 0 4px #000, 0 1px 2px #000; }
.hud-bars .num, .hud-bars small { text-shadow: 0 0 2px #000, 0 0 4px #000, 0 1px 2px #000; }
.hud-bars .num { font: 17px var(--k-mono); color: #fff; text-align: left; }
.hud-bars .bar, .hud-bars .segs span { position: relative; background: rgba(0, 0, 0, 0.42); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.7); }
.hud-bars .bar { height: 7px; }
.hud-bars .fill, .hud-bars .ghost { position: absolute; left: 0; top: 0; bottom: 0; }
.hud-bars .hp .fill { background: #f6f8fa; z-index: 2; }
.hud-bars .hp .ghost { background: #ff5a48; z-index: 1; }
/* 끝 눈금 (참고 이미지 HP 막대 오른쪽 세로선) */
.hud-bars .hp .bar::after { content: ''; position: absolute; right: -9px; top: -4px; bottom: -4px; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); }
.hud-bars .hp.low .fill { background: #ff5a3c; animation: blink 0.5s steps(2) infinite; }
.hud-bars .hp.low .num { color: #ff8a70; }
.hud-bars .segs { display: flex; gap: 5px; }
.hud-bars .segs span { flex: 1; height: 4px; }
.hud-bars .segs span i { position: absolute; left: 0; top: 0; bottom: 0; background: #f6f8fa; }
.hud-bars .en.over .segs span i { background: var(--red); animation: blink 0.25s steps(2) infinite; }
.hud-bars .en.over .num { color: #ff8a70; font-size: 13px; }
/* v0.36.1 호버·버스트 막힌 이유 (EN 게이지 위) */
.hud-bars .deny { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); white-space: nowrap; padding: 3px 12px; font-size: 13px; font-weight: 600; color: #ffb4a8; background: rgba(40, 8, 6, 0.85); border: 1px solid var(--red); opacity: 0; pointer-events: none; }
.hud-bars .deny.on { animation: denyFlash 1.1s ease-out forwards; }
@keyframes denyFlash { 0% { opacity: 1; transform: translate(-50%, 4px); } 12% { transform: translate(-50%, 0); } 70% { opacity: 1; } 100% { opacity: 0; } }
.hud-bars .bst .chg { display: flex; gap: 4px; flex: 1; }
.hud-bars .bst .chg span { flex: 1; height: 8px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line); position: relative; overflow: hidden; }
.hud-bars .bst .chg span i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(245, 166, 35, 0.45); }
.hud-bars .bst .chg span.full i { background: var(--amber); }
.hud-bars .bst small { color: var(--amber); font-size: 10px; margin-left: 6px; }
/* 3단계 스탠스·패링 */
.hud-bars .row.stn .sts { display: flex; gap: 4px; }
.hud-bars .row.stn .sts span { padding: 0 5px; font-size: 11px; color: var(--ink); background: var(--bg); border: 1px solid var(--k-line); }
.hud-bars .row.stn .sts span.on[data-s=attack] { color: #111; background: #ff7a5a; border-color: #ff7a5a; }
.hud-bars .row.stn .sts span.on[data-s=defense] { color: #111; background: #6ab8ff; border-color: #6ab8ff; }
.hud-bars .row.stn .sts span.on[data-s=evade] { color: #111; background: #6cf09a; border-color: #6cf09a; }
.hud-bars .row.pry .pv { font-weight: 600; font-size: 12px; min-width: 90px; padding: 0 6px; background: var(--bg); }
.hud-bars .row.pry .pv.ok { color: var(--dim); }
.hud-bars .row.pry .pv.act { color: #bfe8ff; }
.hud-bars .row.pry .pv.ctr { color: #ffd27a; }
.hud-bars .row.pry .pv.wait { color: #ff8a6a; }

/* 오른쪽 아래: 부위 도면 */
.hud-diag { position: absolute; right: 18px; bottom: 18px; width: 150px; padding: 8px; }
.hud-diag:has(.ph:not([style*="none"])) { width: 164px; }   /* v0.92.0 부위별 HP 표시 중 */
.hud-diag .diag { width: 100%; display: block; }
.hud-diag g path { stroke: rgba(0, 0, 0, 0.6); stroke-width: 1.2; }
.hud-diag g.ok path { fill: #8fa2b5; }
.hud-diag g.dmg path { fill: var(--red); animation: blink 0.45s steps(2) infinite; }
.hud-diag g.dead path { fill: #111; }
.hud-diag g.x path { stroke: var(--red); stroke-width: 3; fill: none; }
.hud-diag .cls { text-align: center; font-size: 12px; letter-spacing: 2px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.hud-diag .cls small { display: block; color: var(--amber); letter-spacing: 0; font-weight: 500; }

@keyframes blink { 50% { opacity: 0.35; } }

/* v0.67.0 기체 둘레 탄약 링 (CFG.ammoRing) — 트랙 = 검은 테두리 겸 빈 칸, 채움 = 남은 탄·장전 진행 */
.ammo-ring { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.ammo-ring path { fill: none; stroke-linecap: butt; }
.ammo-ring .tr { stroke: rgba(0, 0, 0, 0.5); }
.ammo-ring .fl { filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)); }
/* v0.116.0 소리 크기 조절 칸 (ui/volume.js) — 메뉴·일시정지·브리핑 화면 오른쪽 아래 */
.vol-ctl { position: fixed; right: 14px; bottom: 44px;   /* v0.119.1 화면 아래 VER. 줄(k-foot) 위로 */ z-index: 60; display: none; align-items: center; gap: 10px; padding: 7px 12px;
  background: rgba(12, 17, 23, 0.9); border: 1px solid rgba(255, 255, 255, 0.18); font: 600 12px var(--k-font); color: #e8edf2; letter-spacing: 1px; }
.vol-ctl.docked { position: static; z-index: auto; }   /* v0.119.3 브리핑 왼쪽 칸 · 일시정지 창 안 */
.st-map .vol-ctl.docked { margin: auto 12px 12px; }
.overlay .panel.small .vol-ctl.docked { margin: 16px 0 0; justify-content: center; }
.vol-ctl .vm { width: 30px; height: 26px; padding: 0; font-size: 16px; line-height: 1; background: #1f2a36; border: 1px solid #3a4756; color: #fff; cursor: pointer; }
.vol-ctl .vm:hover { border-color: #e09a48; }
.vol-ctl .vl small { color: #8f9ba8; font-weight: 500; margin-left: 3px; letter-spacing: 0; }
.vol-ctl input[type=range] { width: 150px; accent-color: #e09a48; cursor: pointer; }
.vol-ctl .vn { min-width: 42px; text-align: right; font-family: var(--k-mono); }
.vol-ctl.muted .vn { color: #ff7a6a; }
/* 조준점 — v0.53.0 흰 십자 4선 + 점 + 고리, 전부 검은 테두리 (CFG.crosshair → --ch-*) */
.crosshair { position: absolute; left: 0; top: 0; width: 0; height: 0;
  --ch-col: #fff; --ch-en: #ff3b30; --ch-len: 11px; --ch-th: 3px; --ch-gap: 6px; --ch-dot: 4px; --ch-ol: 1.5px; --ch-ring: 40px; --ch-rth: 2px; --ch-ra: 0.9;
  --ch-c: var(--ch-col); }
.crosshair.on-unit { --ch-c: var(--ch-en); }
.crosshair .c { position: absolute; width: var(--ch-dot); height: var(--ch-dot); left: calc(var(--ch-dot) / -2); top: calc(var(--ch-dot) / -2);
  background: var(--ch-c); border-radius: 50%; box-shadow: 0 0 0 var(--ch-ol) rgba(0, 0, 0, 0.85); }
.crosshair .tk { position: absolute; left: 0; top: 0; transition: transform 0.08s; }
.crosshair .tk i { position: absolute; background: var(--ch-c); box-shadow: 0 0 0 var(--ch-ol) rgba(0, 0, 0, 0.85); }
.crosshair .tk i:nth-child(1), .crosshair .tk i:nth-child(2) { width: var(--ch-len); height: var(--ch-th); top: calc(var(--ch-th) / -2); }
.crosshair .tk i:nth-child(3), .crosshair .tk i:nth-child(4) { width: var(--ch-th); height: var(--ch-len); left: calc(var(--ch-th) / -2); }
.crosshair .tk i:nth-child(1) { right: var(--ch-gap); }
.crosshair .tk i:nth-child(2) { left: var(--ch-gap); }
.crosshair .tk i:nth-child(3) { bottom: var(--ch-gap); }
.crosshair .tk i:nth-child(4) { top: var(--ch-gap); }
.crosshair.on-unit .tk { transform: scale(0.8); }
.crosshair .ring { position: absolute; width: var(--ch-ring); height: var(--ch-ring); left: calc(var(--ch-ring) / -2); top: calc(var(--ch-ring) / -2); box-sizing: border-box;
  border: var(--ch-rth) solid var(--ch-c); border-radius: 50%; opacity: var(--ch-ra);
  filter: drop-shadow(0 0 var(--ch-ol) rgba(0, 0, 0, 0.9)) drop-shadow(0 0 1px #000);
  clip-path: polygon(0 0, 35% 0, 35% 100%, 65% 100%, 65% 0, 100% 0, 100% 35%, 0 35%, 0 65%, 100% 65%, 100% 100%, 0 100%); transition: transform 0.08s; }
.crosshair.on-unit .ring { transform: scale(0.8) rotate(45deg); }
.crosshair.tps .ring { width: calc(var(--ch-ring) * 0.7); height: calc(var(--ch-ring) * 0.7); left: calc(var(--ch-ring) * -0.35); top: calc(var(--ch-ring) * -0.35); }
.crosshair.reload { --ch-c: #5ec8ff; }
.crosshair.reload .ring { animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.lock { position: absolute; left: 0; top: 0; width: 0; height: 0; display: none; pointer-events: none;
  /* v0.63.1 블룸: 컨테이너에 빛 번짐 두 겹 (clip-path 된 틀 밖으로도 번지게 부모에 건다) */
  filter: drop-shadow(0 0 calc(var(--lk-glow, 4px) * 0.5) var(--lk-gc, #3dff6e)) drop-shadow(0 0 var(--lk-glow, 4px) var(--lk-gc, #3dff6e)); }
.lock.done { --lk-gc: #ff3b30; }
.lock .lk-box { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; box-sizing: border-box; border: var(--lk-w, 1px) solid var(--lk-c, #3dff6e); opacity: var(--lk-a, 0.6);
  clip-path: polygon(0 0, 30% 0, 30% 8%, 8% 8%, 8% 30%, 0 30%, 0 70%, 8% 70%, 8% 92%, 30% 92%, 30% 100%, 70% 100%, 70% 92%, 92% 92%, 92% 70%, 100% 70%, 100% 30%, 92% 30%, 92% 8%, 70% 8%, 70% 0, 100% 0, 100% 100%, 0 100%); }
.lock .lk-tag { position: absolute; left: 0; top: 30px; transform: translateX(-50%); white-space: nowrap; font: 700 10px var(--k-font); color: var(--lk-c, #3dff6e); letter-spacing: 2px; opacity: 0.85; }
.lock .lk-dia { display: none; position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; box-sizing: border-box; border: var(--lk-w, 1px) solid #ff3b30; transform: rotate(calc(45deg + var(--spin, 0deg))); }
.lock .lk-burst { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; box-sizing: border-box; border: calc(var(--lk-w, 1px) * 1.5) solid #fff; border-radius: 50%; opacity: 0; }
.lock .lk-burst.go { animation: lockBurst 0.45s ease-out forwards; }
@keyframes lockBurst { 0% { transform: scale(0.6); opacity: var(--lk-a, 0.6); border-color: #fff; } 60% { border-color: #ff3b30; } 100% { transform: scale(2.4); opacity: 0; border-color: #ff3b30; } }
.lock.done .lk-box { border-color: color-mix(in srgb, #fff calc(var(--snap, 0) * 100%), #ff3b30); border-width: calc(var(--lk-w, 1px) * 1.5); }
.lock.done .lk-dia { display: block; animation: lockPulse 0.5s ease-in-out infinite alternate; }
.lock.done .lk-tag { color: #fff; background: rgba(255, 59, 48, 0.75); padding: 1px 6px; top: 36px; font-size: 12px; opacity: 1; animation: lockBlink 0.5s steps(2) infinite; }
@keyframes lockPulse { from { opacity: calc(var(--lk-a, 0.6) * 0.5); } to { opacity: var(--lk-a, 0.6); } }
@keyframes lockBlink { 50% { background: rgba(179, 18, 10, 0.75); } }
/* v0.64.2 직접 요격 — 날아오는 적 미사일 표시 */
.msl-mk { position: absolute; left: 0; top: 0; display: none; pointer-events: none; }
.msl-mk i { position: absolute; left: -9px; top: -9px; width: 14px; height: 14px; border: 2px solid #ffd24d; transform: rotate(45deg); box-shadow: 0 0 6px rgba(0,0,0,.6); }
.msl-mk b { position: absolute; left: 12px; top: -7px; font: 700 11px/1 monospace; color: #ffd24d; text-shadow: 0 0 3px #000; white-space: nowrap; }
.msl-mk.near i { border-color: #ff8a3d; } .msl-mk.near b { color: #ff8a3d; }
.msl-mk.aim i { border-color: #ff3b30; background: rgba(255,59,48,.25); left: -12px; top: -12px; width: 20px; height: 20px; } .msl-mk.aim b { color: #ff3b30; }
.msl-mk s { display: none; position: absolute; left: -12px; top: 12px; width: 24px; height: 4px; background: rgba(0,0,0,.6); border: 1px solid #000; }
.msl-mk s u { display: block; height: 100%; width: 100%; background: #ffd24d; }
.msl-mk.aim s u { background: #ff3b30; }
.lock-caret { position: absolute; left: -7px; top: -16px; display: none; pointer-events: none; font: 400 14px/1 sans-serif; color: #ff3b30; opacity: var(--lk-a, 0.6);
  filter: drop-shadow(0 0 calc(var(--lk-glow, 4px) * 0.5) #ff3b30) drop-shadow(0 0 var(--lk-glow, 4px) #ff3b30); animation: caretBob 0.6s ease-in-out infinite alternate; }
@keyframes caretBob { from { margin-top: -4px; } to { margin-top: 2px; } }
.crosshair.locked { --ch-c: #ff3b30; }
.crosshair .lock-circle { display: none; position: absolute; box-sizing: border-box; border-radius: 50%; border: var(--lk-w, 1px) dashed #3dff6e; opacity: calc(var(--lk-a, 0.6) * 0.6); pointer-events: none;
  filter: drop-shadow(0 0 calc(var(--lk-glow, 4px) * 0.5) #3dff6e); }
.crosshair .lock-circle.busy { border-style: solid; opacity: var(--lk-a, 0.6); }
.crosshair.locked .lock-circle { border-color: #ff3b30; filter: drop-shadow(0 0 calc(var(--lk-glow, 4px) * 0.5) #ff3b30); }
.crosshair .lock-cross { display: none; position: absolute; left: 50%; top: 34px; transform: translateX(-50%); white-space: nowrap; font: 700 11px var(--k-font); color: #fff; background: #ff3b30; padding: 1px 6px; letter-spacing: 2px; }
.crosshair.scope { --ch-c: #ff5a3a; }
.crosshair.scope .ring { width: 90px; height: 90px; left: -45px; top: -45px; }
.crosshair.scope .tk { display: none; }
/* 저격 피드백 (v0.16.0) */
.crosshair .hm { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
.crosshair .hm i { position: absolute; width: 14px; height: 3px; background: #fff; box-shadow: 0 0 6px #fff; left: -7px; top: -1.5px; }
.crosshair .hm i:nth-child(1) { transform: rotate(45deg) translate(-16px); }
.crosshair .hm i:nth-child(2) { transform: rotate(135deg) translate(-16px); }
.crosshair .hm i:nth-child(3) { transform: rotate(225deg) translate(-16px); }
.crosshair .hm i:nth-child(4) { transform: rotate(315deg) translate(-16px); }
.crosshair .hmt { position: absolute; left: 30px; top: -34px; white-space: nowrap; font: 700 18px/1 var(--k-font); color: #fff; text-shadow: 0 0 6px rgba(0,0,0,.9), 0 0 2px #000; opacity: 0; pointer-events: none; }
.crosshair.hit .hm { animation: hmPop var(--hm-t, 0.45s) ease-out; }
/* v0.77.0 모든 무기 명중 ✕ — 부위 파괴 주황 · 격파 빨강 · 피해 0 회색 */
.crosshair.hm-br .hm i { background: #ff9a3d; box-shadow: 0 0 8px #ff9a3d; height: 4px; }
.crosshair.hm-kill .hm i { background: #ff3b30; box-shadow: 0 0 10px #ff3b30, 0 0 3px #fff; height: 4px; }
.crosshair.hm-neg .hm i { background: #9aa0a6; box-shadow: none; }
.crosshair.hit .hmt { animation: hmTxt 1.1s ease-out; }
.crosshair.crit .hm i { background: #ff4a2a; box-shadow: 0 0 8px #ff4a2a; }
.crosshair.crit .hmt { color: #ffcf4a; font-size: 24px; }
@keyframes hmPop { 0% { opacity: 1; transform: scale(calc(var(--hm-s, 1) * 1.8)); } 40% { opacity: 1; transform: scale(var(--hm-s, 1)); } 100% { opacity: 0; transform: scale(calc(var(--hm-s, 1) * 1.1)); } }
@keyframes hmTxt { 0% { opacity: 0; transform: translateY(8px) scale(1.4); } 15% { opacity: 1; transform: translateY(0) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.crosshair.kick .ring { animation: ringKick 0.35s ease-out; }
@keyframes ringKick { 0% { transform: scale(2.4); border-color: #fff; } 100% { transform: scale(1); } }
.scope-ov { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .12s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), transparent 0, transparent 30vmin, rgba(0,0,0,.55) 31vmin, rgba(0,0,0,.88) 48vmin); }
.scope-ov.on { opacity: calc(0.35 + var(--k, 0) * 0.65); }
.scope-ov .ln { position: absolute; background: rgba(255, 90, 60, .55); }
.scope-ov .ln.h { left: calc(var(--mx, 50%) - 30vmin); width: 60vmin; top: var(--my, 50%); height: 1px; }
.scope-ov .ln.v { top: calc(var(--my, 50%) - 30vmin); height: 60vmin; left: var(--mx, 50%); width: 1px; }
.scope-ov.kick { animation: scopeKick 0.3s ease-out; }
@keyframes scopeKick { 0% { transform: translateY(-3vmin) scale(1.04); filter: brightness(2.2); } 100% { transform: none; filter: none; } }

/* 봇 머리 위 체력 */
.ubar { position: absolute; left: -40px; top: -14px; width: 80px; text-align: center; }
.ubar .nm { font-size: 10px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ubar .bar { height: 5px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(0, 0, 0, 0.7); }
.ubar .bar div { height: 100%; }
.ubar.red .bar div { background: var(--k-red); }
.ubar.blue .bar div { background: var(--k-blue); }
.ubar.radar { opacity: 0.55; }

/* 알림 */
.engage-warn { position: absolute; top: 108px; left: 50%; transform: translateX(-50%); display: none; padding: 6px 16px; border: 1px solid var(--red); background: rgba(70, 10, 10, 0.78); color: #ffd2c8; font-size: 15px; letter-spacing: 1px; text-align: center; animation: engpulse 0.7s ease-in-out infinite alternate; }
.engage-warn.on { display: block; }
.engage-warn.mine { border-color: var(--amber); background: rgba(60, 40, 5, 0.78); color: #ffe2b0; animation: none; }
.engage-warn b { color: #fff; }
.engage-warn small { display: block; font-size: 11px; opacity: 0.8; letter-spacing: 0; }
@keyframes engpulse { from { box-shadow: 0 0 0 rgba(255, 60, 40, 0); } to { box-shadow: 0 0 16px rgba(255, 60, 40, 0.7); } }
.toasts { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.toast { background: var(--bg); border: 1px solid var(--k-line); border-left: 3px solid var(--dim); padding: 5px 14px; font-size: 14px; transition: opacity 0.5s; }
.toast.warn { border-left-color: var(--red); color: #ffb4a8; }
.toast.dmg { border-left-color: #ff7a5a; }
.toast.good { border-left-color: var(--amber); color: var(--k-amber2); }
.toast.info { border-left-color: var(--k-blue); }
.toast.out { opacity: 0; }

/* 티켓·거점 (위 가운데, v0.23.0) */
.hud-obj { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 210px auto 210px; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 6px 14px 4px; }
.hud-obj .tk { display: flex; align-items: center; gap: 8px; }
.hud-obj .tk b { font: 22px var(--k-mono); min-width: 44px; }
.hud-obj .tk.blue b { color: var(--k-blue2); text-align: right; }
.hud-obj .tk.red b { color: var(--k-red2); }
.hud-obj .tk .bar { flex: 1; height: 10px; background: rgba(255, 255, 255, 0.1); position: relative; }
.hud-obj .tk.blue .bar div { position: absolute; right: 0; top: 0; bottom: 0; background: var(--k-blue); }
.hud-obj .tk.red .bar div { position: absolute; left: 0; top: 0; bottom: 0; background: var(--k-red); }
.hud-obj .tk.low b { animation: blink 0.6s steps(2) infinite; }
.hud-obj .tk.bleed .bar { box-shadow: 0 0 0 1px var(--amber); }
.hud-obj .pts { display: flex; gap: 8px; }
.hud-obj .pt { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, 0.12) 0); }
.hud-obj .pt span { width: 28px; height: 28px; border-radius: 50%; background: var(--k-bg); display: grid; place-items: center; font-weight: 700; font-size: 15px; color: var(--o); border: 2px solid var(--o); }
.hud-obj .pt.contest span { animation: blink 0.4s steps(2) infinite; border-color: var(--amber); }
.hud-obj .otime { grid-column: 1 / 4; text-align: center; font: 13px var(--k-mono); color: var(--ink); }
.hud-obj .omode { grid-column: 1 / 4; text-align: center; font-size: 10.5px; letter-spacing: 2px; color: var(--dim); }

/* 리스폰 대기 */
.scoreboard { display: none; position: absolute; left: 50%; top: 12%; transform: translateX(-50%); min-width: 640px; max-width: 92vw; max-height: 72vh; overflow: auto; pointer-events: none; background: var(--k-panel); border: 1px solid var(--k-line); padding: 10px 14px; z-index: 5; }
.scoreboard .ph-tag { font: 12px var(--k-mono); letter-spacing: 2px; color: var(--dim); margin-bottom: 4px; }
.scoreboard .ph-tag span { float: right; letter-spacing: 0; font-family: var(--k-font); }
.scoreboard .ph-tag b { color: var(--amber); }
.scoreboard .sb-on { color: #7fe08a; } .scoreboard .sb-dn { color: var(--amber); } .scoreboard .sb-out { color: var(--dim); }
.spec-bar { display: none; position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); pointer-events: auto; text-align: center; background: var(--k-panel); border: 1px solid var(--k-line); padding: 6px 14px; font-size: 14px; letter-spacing: 1px; white-space: nowrap; }
.spec-bar .sb-lbl { color: var(--dim); font: 12px var(--k-mono); letter-spacing: 2px; }
.spec-bar .sb-nm { color: var(--amber); }
.spec-bar .sb-arr { cursor: pointer; color: var(--amber); padding: 0 8px; user-select: none; }
.spec-bar .sb-help { display: block; font-size: 11px; color: var(--dim); letter-spacing: 0; margin-top: 2px; }
.respawn { display: none; position: absolute; left: 50%; top: max(22%, 200px); transform: translateX(-50%); pointer-events: auto; text-align: center; background: var(--k-panel); padding: 12px 16px; }
.respawn h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; letter-spacing: 3px; }
.respawn h3 b { color: var(--amber); font: 30px var(--k-mono); margin: 0 4px; }
.respawn h3 small { display: block; font-size: 11px; letter-spacing: 0; color: var(--dim); font-weight: 500; }
.respawn .rs-los { display: flex; gap: 8px; }
.respawn .rs-lo { width: 126px; cursor: pointer; padding: 6px 8px; border: 1px solid var(--line); background: var(--k-panel2); text-align: left; position: relative; }
.respawn .rs-lo i { position: absolute; right: 6px; top: 4px; font: normal 13px var(--k-mono); color: var(--dim); }
.respawn .rs-lo b { display: block; font-size: 13px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.respawn .rs-lo span { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; }
.respawn .rs-lo small { display: block; color: var(--dim); font-size: 11px; }
.respawn .rs-lo.on { border-color: var(--amber); background: rgba(245, 166, 35, 0.12); box-shadow: 0 0 12px rgba(245, 166, 35, 0.35); }
.respawn .rs-lo.on i { color: var(--amber); }
.respawn .rs-lo.bad { opacity: 0.45; cursor: not-allowed; }
.respawn .rs-help { display: block; margin-top: 8px; color: var(--dim); font-size: 11px; }

/* 미니맵 (Tab, 오른쪽 위) */
.minimap { position: absolute; right: 18px; top: 24px; width: 176px; height: 176px; border: 1px solid var(--k-line2); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }

/* ── 오버레이 (첫 화면·조작 안내·일시정지·결과) ─────────────── */
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(6, 11, 17, 0.62); backdrop-filter: blur(2px); z-index: 10; }
.overlay.hidden { display: none; }
.overlay.full { background: radial-gradient(ellipse at 50% 30%, #13202e, #070c12 75%); backdrop-filter: none; overflow: hidden; }
.overlay.full::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(120, 150, 180, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 150, 180, 0.045) 1px, transparent 1px); background-size: 40px 40px; }
.overlay .panel { position: relative; background: var(--k-panel); border: 1px solid var(--k-line); padding: 24px 30px; max-width: 760px; }
.overlay .panel.small { min-width: 360px; text-align: center; }
.overlay h1 { margin: 0 0 4px; letter-spacing: 6px; font-size: 30px; font-weight: 700; }
.overlay h1 small { font-size: 12px; color: var(--dim); letter-spacing: 2px; margin-left: 10px; font-weight: 500; }
.overlay h2 { margin: 0 0 14px; letter-spacing: 6px; font-size: 30px; font-weight: 700; }
.overlay h2 small { display: block; font-size: 13px; letter-spacing: 1px; font-weight: 500; color: var(--dim); margin-top: 4px; }
.overlay .sub { color: var(--dim); margin: 0 0 14px; font-size: 13px; }
.overlay .keys { border-collapse: collapse; font-size: 13px; width: 100%; }
.overlay .keys td { padding: 4px 8px; border-bottom: 1px solid rgba(120, 150, 180, 0.12); }
.overlay .keys td:first-child { white-space: nowrap; color: var(--dim); }
.overlay .note { color: var(--dim); font-size: 12.5px; }
.overlay .panel > button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 10px; font: 600 15px var(--k-font); letter-spacing: 3px; cursor: pointer;
  color: var(--k-ink); background: var(--k-panel2); border: 1px solid var(--k-line2); }
.overlay .panel > button:hover { border-color: var(--amber); color: var(--k-amber2); }
.overlay .panel > button.go, .overlay .result .restart { color: #1d1204; font-weight: 700; border-color: var(--k-amber2); background: linear-gradient(#ffcb62, var(--k-amber) 55%, #d88a12); box-shadow: 0 0 18px rgba(245, 166, 35, 0.35); }
.overlay .panel > button.go:hover, .overlay .result .restart:hover { color: #1d1204; background: linear-gradient(#ffd77f, #ffb43a 55%, #e3961c); }
.overlay .panel > button small { opacity: 0.75; font-size: 11px; letter-spacing: 1px; }
.overlay .result.win h2 { color: var(--k-amber2); text-shadow: 0 0 18px rgba(245, 166, 35, 0.5); }
.overlay .result.lose h2 { color: var(--k-red); }
.overlay .stats { margin: 0 auto 8px; font-size: 13px; border-collapse: collapse; }
.overlay .stats td { padding: 3px 12px; text-align: left; }
.overlay .stats td:first-child { color: var(--dim); font-size: 11px; letter-spacing: 2px; }
.overlay .stats td:last-child { font-family: var(--k-mono); font-size: 15px; }
.overlay small { opacity: 0.75; font-size: 11px; }
.overlay .panel.help { max-width: 820px; max-height: 94vh; overflow: auto; }
.overlay .panel .ph-tag { font-size: 10.5px; letter-spacing: 3px; color: var(--amber); margin-bottom: 6px; }
/* 결과: 병과별 기여 */
.overlay .panel.result.wide { width: min(900px, 94vw); }
.contrib { width: 100%; border-collapse: collapse; font-size: 12px; margin: 6px 0 10px; }
.contrib th { color: var(--dim); font-weight: 600; font-size: 10px; letter-spacing: 1.5px; text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.contrib td { padding: 3px 6px; font-family: var(--k-mono); font-size: 13px; }
.contrib td:first-child, .contrib td:nth-child(2) { font-family: var(--k-font); font-weight: 600; letter-spacing: 1px; font-size: 12px; }
.contrib small { color: var(--dim); }
.contrib tbody.blue td:first-child { border-left: 3px solid var(--k-blue); }
.contrib tbody.red td:first-child { border-left: 3px solid var(--k-red); }
.contrib tbody.red tr:first-child td { border-top: 1px solid var(--line); }
.contrib tr.me td { background: rgba(245, 166, 35, 0.1); }

/* 튜닝 패널 (?panel=1) */
.tune { position: absolute; top: 8px; right: 8px; width: 330px; max-height: calc(100% - 200px); overflow: auto; background: var(--k-panel); border: 1px solid var(--line); font-size: 11px; z-index: 20; }
.tune .hd { display: flex; gap: 4px; align-items: center; padding: 6px; position: sticky; top: 0; background: var(--k-bg2); }
.tune .hd b { flex: 1; letter-spacing: 1px; }
.tune button { font: inherit; background: #23303e; color: var(--ink); border: 1px solid var(--line); padding: 3px 6px; cursor: pointer; }
.tune .grp { padding: 6px 8px 2px; color: var(--amber); }
.tune .row { display: grid; grid-template-columns: 120px 1fr 44px; gap: 4px; align-items: center; padding: 1px 8px; }
.tune .row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.tune .row input { width: 100%; }
.tune .row .val { text-align: right; font-family: var(--k-mono); }
.tune .ft { padding: 6px 8px; color: var(--dim); }
.tune.folded .body, .tune.folded .ft { display: none; }

/* ── 전략 구성 (시안 strategy-loadout.png) ─────────────────── */
.st { display: grid; grid-template-columns: 440px minmax(0, 1fr) 318px; grid-template-rows: 78px minmax(0, 1fr) 152px 18px; gap: 12px 14px; padding: 14px 16px 6px;
  grid-template-areas: "top top top" "map lo teams" "map det act" "foot foot foot"; }
.st .no { font: 13px var(--k-mono); color: var(--k-dim); }
.st button.arr { background: none; border: 0; color: var(--k-dim); font: 600 22px/1 var(--k-font); cursor: pointer; padding: 0 6px; }
.st button.arr:hover { color: var(--k-amber2); }
.st-top { grid-area: top; display: grid; grid-template-columns: 440px minmax(0, 1fr) 300px 150px 150px; gap: 14px; align-items: stretch; }
.st-mode { display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--k-panel); }
.st-mode .mi { width: 46px; height: 46px; color: #cfd9e3; }
.st-mode .mt { min-width: 0; }
.st-mode .mn { display: flex; align-items: center; gap: 2px; }
.st-mode .mn b { font: 700 32px/1 var(--k-font); letter-spacing: 4px; cursor: pointer; white-space: nowrap; }
.st-mode .mn kbd { margin-left: 8px; }
.st-mode small { display: block; margin-top: 5px; font-size: 11.5px; letter-spacing: 2.2px; color: #b7c3cf; white-space: nowrap; }
.st-mapt { display: flex; flex-direction: column; justify-content: center; padding: 0 10px; min-width: 0; border-bottom: 1px solid var(--k-line); }
.st-mapt b { font: 700 28px/1 var(--k-font); letter-spacing: 6px; }
.st-mapt small { margin-top: 8px; font-size: 11px; letter-spacing: 2.4px; color: var(--k-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-mapt small i { font-style: normal; margin: 0 6px; color: var(--k-dim2); }
.st-stat { display: grid; align-content: center; padding: 0 16px; background: var(--k-panel); }
.st-stat span { font-size: 10.5px; letter-spacing: 2.5px; color: var(--k-dim); }
.st-stat b { font: 700 32px/1.05 var(--k-font); letter-spacing: 5px; color: var(--k-amber); text-shadow: 0 0 14px rgba(245, 166, 35, 0.45); }
.st-stat small { font-size: 10.5px; color: var(--k-dim); }
.st-stat.bad b { color: var(--k-red); text-shadow: 0 0 14px rgba(255, 74, 74, 0.4); }
.st-vs { display: flex; flex-direction: column; justify-content: center; padding-left: 14px; border-left: 1px solid var(--k-line); }
.st-vs b { font: 20px var(--k-mono); letter-spacing: 2px; }
.st-vs small { font-size: 10px; color: var(--k-dim); line-height: 1.4; }
.st-adapt { font-style: normal; margin-left: 6px; padding: 0 5px; border: 1px solid var(--k-line); color: var(--k-dim); cursor: pointer; letter-spacing: 1px; }   /* v0.122.0 실력 맞춤 */
.st-adapt.on { color: #8dffb6; border-color: rgba(141, 255, 182, 0.5); }
.adapt-line { margin: 12px 0 0; font-size: 12px; color: #cfd9e3; } .adapt-line small { color: #8f9ba8; }
.st-lv { cursor: pointer; } .st-lv .mn { display: flex; align-items: center; gap: 4px; } .st-lv b { font-size: 16px; } .st-lv kbd { font: 9px var(--k-mono); color: var(--k-dim); border: 1px solid var(--k-line); padding: 0 3px; }   /* v0.85.0 봇 난이도 */
/* 전술 지도 */
.st-map { grid-area: map; display: flex; flex-direction: column; min-height: 0; }
.st-map .mapbox { position: relative; margin: 12px 12px 0; aspect-ratio: 1; border: 1px solid var(--k-line); }
.st-map .tmap { width: 100%; height: 100%; display: block; }
.st-map .north { position: absolute; left: 10px; top: 8px; font: 600 11px/1.1 var(--k-font); color: #cfd9e3; text-align: center; }
.st-map .legend { margin: 10px 12px 0; padding: 8px 10px; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; border: 1px solid var(--k-line); font-size: 10.5px; letter-spacing: 1px; }
.st-map .legend li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.st-map .legend small { color: var(--k-dim); letter-spacing: 0; font-size: 10px; opacity: 1; }
.lg { width: 16px; height: 16px; flex: none; display: grid; place-items: center; font: normal 700 9px var(--k-font); }
.lg.pt { border: 1.5px solid #e8edf3; border-radius: 50%; color: #e8edf3; }
.lg.sp { border: 1.5px solid; clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%); }
.lg.sp.blue { border-color: var(--k-blue); background: rgba(61, 139, 255, 0.35); }
.lg.sp.red { border-color: var(--k-red); background: rgba(255, 74, 74, 0.35); }
.lg.sup { border: 1.5px dashed var(--k-blue2); border-radius: 50%; }
.lg.tur { width: 9px; height: 9px; background: #e6c56a; transform: rotate(45deg); margin: 0 3.5px; }
.lg.fo { border: 1.5px dotted #6eaa82; border-radius: 50%; background: rgba(70, 120, 90, 0.3); }
.lg.cv { width: 14px; height: 10px; background: rgba(150, 170, 190, 0.65); }
.st-map .scale { position: absolute; right: 8px; bottom: 8px; padding: 4px 8px; background: rgba(11, 19, 28, 0.8); display: flex; flex-direction: column; gap: 3px; font-size: 9.5px; letter-spacing: 1.5px; color: var(--k-dim); padding-bottom: 2px; }
.st-map .scale .sb { display: flex; height: 6px; border: 1px solid #cfd9e3; }
.st-map .scale .sb i { flex: 1; } .st-map .scale .sb i:first-child { background: #cfd9e3; }
.st-map .scale .sl { display: flex; justify-content: space-between; font: 10px var(--k-mono); }
.st-map .scale .sl em { font-style: normal; }
.st-map .k-note { margin: 12px 12px 12px; }
/* YOUR LOADOUT */
.st-lo { grid-area: lo; display: flex; flex-direction: column; min-height: 0; }
.st-lo .cards { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 12px 12px 10px; }
.st-lo .card { display: flex; flex-direction: column; min-height: 0; cursor: pointer; background: linear-gradient(rgba(25, 40, 56, 0.85), rgba(12, 21, 31, 0.92)); }
.st-lo .card:hover:not(.on) { border-color: rgba(245, 166, 35, 0.55); }
.st-lo .card .ch { padding: 8px 10px 0; }
.st-lo .card .ch b { display: block; font: 700 18px/1.15 var(--k-font); letter-spacing: 2.5px; }
.st-lo .card .ch small { display: block; font-size: 10.5px; color: var(--k-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 1; }
.st-lo .card.on .no { color: var(--k-amber2); }
.st-lo .card .cth { flex: 1; min-height: 0; margin: 2px 4px; background: radial-gradient(ellipse at 50% 70%, rgba(110, 140, 175, 0.22), transparent 68%); }
.st-lo .card .cth img, .st-det .dth img, .st-m .tth img, .hg-card .th img { width: 100%; height: 100%; object-fit: contain; display: block; opacity: 0; transition: opacity 0.2s; }
.k-stage img.ok { opacity: 1 !important; }
.st-lo .card .cbars { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.st-lo .cb span { display: block; font-size: 9.5px; letter-spacing: 1.5px; color: var(--k-dim); }
.st-lo .cb i { display: block; height: 5px; background: rgba(255, 255, 255, 0.08); }
.st-lo .cb s { display: block; height: 100%; background: var(--k-blue); }
.st-lo .card.on .cb s { background: var(--k-amber); }
.st-lo .card.bad { border-color: rgba(255, 74, 74, 0.6); }
.st-lo .card .cbad { position: absolute; left: 8px; right: 8px; top: 46%; padding: 6px; text-align: center; font: normal 700 12px var(--k-font); letter-spacing: 2px; color: #fff; background: rgba(120, 20, 20, 0.85); border: 1px solid var(--k-red); }
.st-q { margin: 0 12px 12px; padding: 6px 12px 8px; background: rgba(11, 19, 28, 0.7); }
.st-q .qh { font-size: 10.5px; letter-spacing: 2.5px; color: var(--k-dim); margin-bottom: 4px; }
.st-q .qh small { letter-spacing: 0; margin-left: 10px; color: var(--k-dim2); opacity: 1; }
.st-q .qo { display: grid; grid-template-columns: 26px 74px 22px 190px 22px minmax(0, 1fr) 30px; align-items: center; height: 32px; border-top: 1px solid rgba(120, 150, 180, 0.12); }
.st-q .qo .k-ic { width: 20px; height: 20px; color: #cfd9e3; }
.st-q .qo > span { font-size: 11px; letter-spacing: 2px; }
.st-q .qo > b { text-align: center; font-size: 12.5px; letter-spacing: 2px; padding: 3px 0; border: 1px solid var(--k-line); background: rgba(0, 0, 0, 0.25); }
.st-q .qo small { padding-left: 14px; font-size: 11px; color: var(--k-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 1; }
.st-q .qo .qn { font: normal 11px var(--k-mono); color: var(--k-dim2); text-align: right; }
/* v0.57.0 개인전 출격 기체 칸 (QUICK OPTIONS 자리) */
.st-sq .sq-row { display: flex; gap: 8px; }
.st-sq .sq { flex: 1; min-width: 0; display: grid; grid-template-columns: 16px 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 3px 6px; cursor: pointer; background: rgba(0, 0, 0, 0.25); }
.st-sq .sq.on { border-color: var(--k-amber); }
.st-sq .sq.bad { border-color: rgba(255, 74, 74, 0.7); }
.st-sq .sq .no { grid-row: 1 / 3; font: 700 15px var(--k-mono); color: var(--k-dim); }
.st-sq .sq.on .no { color: var(--k-amber2); }
.st-sq .sq .sth { grid-row: 1 / 3; height: 40px; }
.st-sq .sq .sth img { width: 100%; height: 100%; object-fit: contain; display: block; opacity: 0; transition: opacity 0.2s; }
.st-sq .sq .sn b { display: block; font: 700 12.5px/1.1 var(--k-font); letter-spacing: 1.5px; }
.st-sq .sq .sn small { display: block; font-size: 10px; color: var(--k-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 1; }
.st-sq .sq .sb { display: flex; gap: 2px; }
.st-sq .sq .sb button { min-width: 18px; height: 18px; padding: 0 3px; font-size: 13px; line-height: 1; }
.st-sq .sq .sb .sqe { margin-left: auto; background: rgba(61, 139, 255, 0.18); color: #cfe3ff; border: 1px solid rgba(61, 139, 255, 0.6); cursor: pointer; font: 600 9.5px var(--k-font); letter-spacing: 1px; }
.st-sq .sq .sb button:disabled { opacity: 0.3; }
/* 리스폰 대기 (개인전) · HUD 남은 기체 */
.respawn .rs-next { font-size: 14px; letter-spacing: 1px; margin: 2px 0 6px; }
.respawn .rs-next b { color: #fff; }
.respawn .rs-lives, .hud-top .lives b { color: var(--amber); letter-spacing: 3px; font-size: 18px; }
.hud-top .lives { display: none; margin-left: 14px; }
.hud-top .lives.on { display: inline-block; }
.netl .sqsel { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.netl .sqsel em { font-style: normal; opacity: 0.6; font-size: 12px; }
/* SELECTED LOADOUT DETAILS */
.st-det { grid-area: det; display: flex; flex-direction: column; min-height: 0; }
.st-det .k-ph { padding: 6px 14px 5px; }
.st-det .k-ph b { font-size: 12px; letter-spacing: 3px; color: var(--k-dim); font-weight: 600; }
.st-det .dd { flex: 1; min-height: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr) 236px; gap: 16px; padding: 8px 14px 10px; }
.st-det .d1 { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; min-width: 0; }
.st-det .dth { height: 96px; border: 1px solid var(--k-line); background: radial-gradient(ellipse at 50% 70%, rgba(110, 140, 175, 0.22), transparent 70%); }
.st-det .dn { display: flex; align-items: baseline; gap: 10px; }
.st-det .dn .no { font-size: 22px; color: var(--k-amber); }
.st-det .dn b { font: 700 22px var(--k-font); letter-spacing: 3px; }
.st-det .d1 small { display: block; font-size: 11px; color: var(--k-dim); opacity: 1; }
.st-det .d1 p { margin: 4px 0 0; font-size: 11px; line-height: 1.45; color: #b7c3cf; }
.st-det .d2 { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--k-line); border-right: 1px solid var(--k-line); padding: 0 14px; }
.st-det .wr { display: grid; grid-template-columns: 22px 84px minmax(0, 1fr); align-items: center; height: 23px; border-bottom: 1px dotted rgba(120, 150, 180, 0.18); }
.st-det .wr .k-ic { width: 15px; height: 15px; color: var(--k-dim); }
.st-det .wr span { font-size: 10px; letter-spacing: 2px; color: var(--k-dim); }
.st-det .wr b { font-size: 12.5px; letter-spacing: 1.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-det .wr b small { font-size: 10.5px; font-weight: 500; letter-spacing: 0; color: var(--k-dim); opacity: 1; margin-left: 6px; }
.st-det .d3 { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
/* 팀 명단 */
.st-teams { grid-area: teams; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.st-teams .tm { flex: none; }
.st-teams .tm .k-ph { border-left: 3px solid; padding: 7px 12px 6px; }
.st-teams .tm.blue .k-ph { border-left-color: var(--k-blue); } .st-teams .tm.blue .k-ph b, .st-teams .tm.blue .k-phr { color: var(--k-blue2); }
.st-teams .tm.red .k-ph { border-left-color: var(--k-red); } .st-teams .tm.red .k-ph b, .st-teams .tm.red .k-phr { color: var(--k-red2); }
.st-m { display: grid; grid-template-columns: 26px 22px 74px minmax(0, 1fr) 74px; align-items: center; column-gap: 6px; height: 44px; padding: 0 6px 0 10px; border-top: 1px solid rgba(120, 150, 180, 0.12); }
.st-m .ri { width: 18px; height: 18px; color: #dbe3ea; }
.st-m .rl { font-size: 9.5px; letter-spacing: 1.2px; color: #b7c3cf; }
.st-m .nm { min-width: 0; }
.st-m .nm b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-m .nm small { display: block; font-size: 9.5px; letter-spacing: 1.5px; font-weight: 600; opacity: 1; }
.st-m .nm small.rd { color: var(--k-pos); } .st-m .nm small.nr { color: var(--k-amber); }
.st-m .tth { height: 38px; overflow: hidden; }
.tm.blue .st-m .tth { background: linear-gradient(90deg, transparent, rgba(61, 139, 255, 0.18)); }
.tm.red .st-m .tth { background: linear-gradient(90deg, transparent, rgba(255, 74, 74, 0.18)); }
.tm.red .st-m .nm small { color: var(--k-dim); }
.st-m.me { background: rgba(245, 166, 35, 0.07); box-shadow: inset 2px 0 0 var(--k-amber); }
.st-m.bot { cursor: pointer; }
.st-m.bot:hover { background: rgba(61, 139, 255, 0.1); }
.st-m.bad { background: rgba(255, 74, 74, 0.14); box-shadow: inset 2px 0 0 var(--k-red); }
.st-teams .rlim { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: 10.5px; letter-spacing: 1.5px; color: var(--k-amber); border: 1px solid rgba(245, 166, 35, 0.4); background: rgba(245, 166, 35, 0.06); }
.st-teams .rlim .k-ic { width: 15px; height: 15px; }
.st-teams .rlim b { margin-left: auto; font-weight: 600; }
.st-teams .rlim.bad { color: var(--k-red2); border-color: rgba(255, 74, 74, 0.6); background: rgba(255, 74, 74, 0.1); }
/* 버튼 */
.st-act { grid-area: act; display: flex; flex-direction: column; gap: 10px; }
.st-act .go { height: 76px; font-size: 32px; letter-spacing: 6px; }
.st-act .go .k-ic { width: 28px; height: 28px; }
.st-act .row { flex: 1; display: flex; gap: 10px; }
.st-act .sub { flex: 1; font-size: 22px; letter-spacing: 4px; }
.st-act .sq { width: 82px; flex-direction: column; gap: 3px; padding: 6px; }
.st-act .sq .k-ic { width: 26px; height: 26px; }
.st-act .sq small { font-size: 9px; letter-spacing: 1.5px; opacity: 1; }
.st .k-foot { grid-area: foot; }

/* ── 행거 (시안 hangar.png) ─────────────────────────────────── */
.hg { display: grid; grid-template-columns: 330px minmax(0, 1fr) 344px; grid-template-rows: 56px minmax(0, 1fr) 172px 16px; gap: 12px; padding: 12px 16px 6px;
  grid-template-areas: "top top top" "left view right" "bot bot bot" "foot foot foot"; }
.hg-top { grid-area: top; display: flex; align-items: stretch; gap: 12px; }
.hg-title { width: 206px; flex: none; font: 700 44px/56px var(--k-font); letter-spacing: 5px; color: #eef3f8; }
.hg-tabs { flex: 1; min-width: 0; display: flex; gap: 10px; padding: 6px 0; }
.hg-tab { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 14px; cursor: pointer; background: var(--k-panel); }
.hg-tab i { font: normal 15px var(--k-mono); width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--k-line2); color: var(--k-dim); flex: none; }
.hg-tab b { flex: 1; min-width: 0; text-align: center; font-size: 14.5px; font-weight: 600; letter-spacing: 2.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-tab u { position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; background: currentColor; opacity: 0.55; }
.hg-tab:hover:not(.on) { border-color: rgba(245, 166, 35, 0.5); }
.hg-tab.on { color: var(--k-amber2); }
.hg-tab.on i { border-color: var(--k-amber); color: var(--k-amber2); }
.hg-tab.on b { color: var(--k-amber2); }
.hg-tab.bad { border-color: rgba(255, 74, 74, 0.6); }
.hg-stat { width: 220px; flex: none; display: grid; align-content: center; padding: 0 14px; background: var(--k-panel); }
.hg-stat span { font-size: 9.5px; letter-spacing: 2.5px; color: var(--k-dim); }
.hg-stat b { font: 700 19px/1.1 var(--k-font); letter-spacing: 3px; color: var(--k-pos); }
.hg-stat small { font: 10.5px var(--k-mono); color: var(--k-dim); opacity: 1; }
.hg-stat.bad b { color: var(--k-red); }
.hg-top .back { flex: none; align-self: center; height: 40px; }
/* 왼쪽 슬롯 */
.hg-left { grid-area: left; display: flex; flex-direction: column; min-height: 0; }
.hg-lh { display: grid; grid-template-columns: 1fr 18px auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 10px 12px 8px; }
.hg-lh .lno { grid-column: 1 / -1; font-size: 10px; letter-spacing: 2.5px; color: var(--k-dim); opacity: 1; }
.hg-lh .nm { min-width: 0; font: 700 24px var(--k-font); letter-spacing: 2.5px; color: var(--k-ink); background: transparent; border: 0; border-bottom: 1px dashed transparent; padding: 0; outline: none; user-select: text; }
.hg-lh .nm:hover, .hg-lh .nm:focus { border-bottom-color: var(--k-amber); }
.hg-lh .k-ic { color: var(--k-dim2); width: 16px; height: 16px; }
.hg-sl { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px; overflow: auto; }
.hg-slot { flex: none; display: grid; grid-template-columns: 50px minmax(0, 1fr) 40px; align-items: center; height: 58px; cursor: pointer; background: var(--k-panel2); }
.hg-slot > .k-ic { width: 34px; height: 34px; justify-self: center; color: #c7d2dd; }
.hg-slot .sx { min-width: 0; display: flex; flex-direction: column; }
.hg-slot .sx span { font-size: 9.5px; letter-spacing: 2.5px; color: var(--k-dim); }
.hg-slot .sx b { font-size: 14px; font-weight: 600; letter-spacing: 1.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-slot .sx small { font: 10px var(--k-mono); color: var(--k-dim); opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-slot .ed { width: 18px; height: 18px; justify-self: center; color: var(--k-dim2); border-left: 1px solid var(--k-line); padding-left: 10px; box-sizing: content-box; }
.hg-slot:hover:not(.on) { border-color: rgba(245, 166, 35, 0.5); }
.hg-slot.on .sx span, .hg-slot.on > .k-ic, .hg-slot.on .ed { color: var(--k-amber2); }
/* 가운데 정비 베이 */
.hg-view { grid-area: view; min-height: 0; overflow: hidden; background: #0a1018 url("assets/ui/hangar_bay.jpg") 50% 58% / cover no-repeat; }
.hg-view::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px rgba(4, 8, 12, 0.85); background: linear-gradient(transparent 70%, rgba(4, 8, 12, 0.5)); }
.hg-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; z-index: 1; }
.hg-cv:active { cursor: grabbing; }
.hg-ov { position: absolute; pointer-events: none; z-index: 2; font-size: 12px; text-shadow: 0 1px 3px #000; }
.hg-ov.tl { left: 16px; top: 12px; display: flex; flex-direction: column; }
.hg-ov.tl span { font-size: 10px; letter-spacing: 2.5px; color: var(--k-dim); }
.hg-ov.tl b { font-size: 20px; letter-spacing: 2px; }
.hg-ov.tl small { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; opacity: 1; }
.hg-ov.tl em { font-style: normal; font-size: 11px; color: #b7c3cf; margin-top: 2px; }
.hg-ov.tr { right: 16px; top: 12px; text-align: right; color: var(--k-dim); line-height: 1.6; letter-spacing: 1.5px; }
.hg-ov.tr i { font-style: normal; color: var(--k-amber); letter-spacing: 3px; margin-right: 6px; }
.hg-ov.tr span { color: var(--k-ink); }
.hg-ov.tr .pv { color: var(--k-amber2); }
.hg-ov.tr small { display: block; letter-spacing: 0; }
.hg-ov.drag { left: 50%; bottom: 12px; transform: translateX(-50%); display: grid; grid-template-columns: auto 40px auto 40px auto; align-items: center; gap: 6px; color: #b7c3cf; justify-items: center; }
.hg-ov.drag .k-ic { width: 16px; height: 16px; }
.hg-ov.drag .ln { height: 1px; width: 40px; background: linear-gradient(90deg, transparent, #b7c3cf); }
.hg-ov.drag .ln:nth-of-type(2) { background: linear-gradient(90deg, #b7c3cf, transparent); }
.hg-ov.drag small { grid-column: 1 / -1; font-size: 10px; letter-spacing: 3px; opacity: 1; }
.hg-ov.br { right: 16px; bottom: 12px; font-size: 11px; letter-spacing: 2px; font-weight: 600; }
.hg-ov.br .ok { color: var(--k-pos); }
.hg-ov.br .bad { color: var(--k-red); animation: blink 0.8s steps(2) infinite; }
/* 오른쪽 파츠 카드 */
.hg-right { grid-area: right; display: flex; flex-direction: column; min-height: 0; }
.hg-ph { display: grid; grid-template-columns: 30px 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; padding: 10px 14px 8px; border-bottom: 1px solid var(--k-line); }
.hg-ph .k-ic { grid-row: span 2; width: 28px; height: 28px; color: var(--k-amber2); }
.hg-ph b { font: 700 21px/1.1 var(--k-font); letter-spacing: 3px; }
.hg-ph span { grid-column: 3; grid-row: 1 / 3; font: 16px var(--k-mono); color: var(--k-dim); letter-spacing: 2px; }
.hg-ph small { grid-column: 2; grid-row: 2; font-size: 10.5px; color: var(--k-dim); opacity: 1; }
.hg-ph b { grid-column: 2; grid-row: 1; }
.hg-list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 2px; }
.hg-card { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 6px; align-items: center; padding: 9px 10px 9px 12px; cursor: pointer; background: var(--k-panel2); }
.hg-card:hover:not(.on) { border-color: rgba(245, 166, 35, 0.6); }
.hg-card.eq:not(.on) { border-color: rgba(245, 166, 35, 0.35); }
.hg-card .ct { min-width: 0; }
.hg-card .ct > b { display: block; font-size: 15px; font-weight: 700; letter-spacing: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-card.on .ct > b { color: var(--k-amber2); }
.hg-card .ct > small { display: block; font-size: 11px; color: #b7c3cf; opacity: 1; }
.hg-card .kv { display: grid; grid-template-columns: auto auto 1fr; column-gap: 10px; margin-top: 6px; padding: 3px 8px; border: 1px solid var(--k-line); font-size: 11px; width: max-content; }
.hg-card .kv span { font-size: 9.5px; letter-spacing: 1.5px; color: var(--k-dim); }
.hg-card .kv b { font: 400 13px var(--k-mono); text-align: right; }
.hg-card .kv i { font-size: 12px; }
.hg-card .th { height: 84px; }
.hg-card .th .none { height: 100%; display: grid; place-items: center; font: 11px var(--k-mono); letter-spacing: 3px; color: var(--k-dim2); }
.hg-card em { position: absolute; right: 8px; top: 6px; font: normal 600 9px var(--k-font); letter-spacing: 1.5px; color: #1d1204; background: var(--k-amber); padding: 1px 6px; }
.hg-desc { margin: 8px 10px 10px; padding: 7px 10px; min-height: 46px; font-size: 11.5px; line-height: 1.5; color: var(--k-ink); background: rgba(245, 166, 35, 0.06); border-left: 2px solid var(--k-amber); }
/* 아래: 수치 비교 · 게이지 · 출격 */
.hg-bot { grid-area: bot; display: grid; grid-template-columns: minmax(0, 1fr) 400px 344px; gap: 12px; min-height: 0; }
.hg-cmp, .hg-gau { display: flex; flex-direction: column; min-height: 0; }
.hg-cmp .k-ph small { letter-spacing: 0; }
.cmp-rows { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, 1fr); grid-auto-flow: column; column-gap: 26px; padding: 4px 14px 8px; }
.cmp-rows .cr { display: grid; grid-template-columns: 16px 64px 50px 12px 50px 60px minmax(0, 1fr); align-items: center; column-gap: 6px; font-size: 11.5px; }
.cmp-rows .cr .k-ic { width: 13px; height: 13px; color: var(--k-dim); }
.cmp-rows .cr span { font-size: 10px; letter-spacing: 1.5px; color: #b7c3cf; }
.cmp-rows .cr b { font: 400 13px var(--k-mono); text-align: right; }
.cmp-rows .cr b.pos { color: var(--k-pos); } .cmp-rows .cr b.neg { color: var(--k-neg); }
.cmp-rows .cr u { text-decoration: none; font-size: 8px; color: var(--k-dim2); text-align: center; }
.cmp-rows .cr.chg { background: linear-gradient(90deg, rgba(245, 166, 35, 0.07), transparent); }
.hg-gau .gg { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 4px 14px 8px; }
.hg-role { font-size: 11px; color: #b7c3cf; }
.hg-role i { font-style: normal; font-size: 9.5px; letter-spacing: 2px; color: var(--k-amber); margin-right: 8px; }
.hg-go { display: flex; flex-direction: column; gap: 6px; }
.hg-go .sortie { flex: 1; font-size: 42px; letter-spacing: 8px; }
.hg-go .sortie .k-ic { width: 32px; height: 32px; }
.hg-go .sn { text-align: center; font-size: 10.5px; color: var(--k-dim); opacity: 1; }
.hg .k-foot { grid-area: foot; }

/* ── 1:1 교전 테스트 (duel/) ─────────────────────────────────── */
.duel-layer { position: absolute; inset: 0; pointer-events: none; }
.dpop { position: absolute; left: 0; top: 0; margin: -10px 0 0 -20px; width: 40px; text-align: center; font: 700 15px var(--k-mono); color: #fff3c4; text-shadow: 0 0 3px #000, 0 1px 2px #000; white-space: nowrap; }
.dpop.big { font-size: 22px; color: #ffcf6a; }
.dpop.rear { color: #ff7b5a; }
.dpop.mine { color: #8fd8ff; font-size: 13px; }
.dpop.txt { font: 700 14px var(--k-font); width: 60px; margin-left: -30px; }
.dpop.neg { color: #9dffb0; }
.dpop.stg { color: #ffd060; }
.duel-log { position: absolute; left: 18px; top: 12px; width: 300px; padding: 6px 10px; font-size: 12px; }
.duel-log .hd { color: var(--amber); margin-bottom: 4px; font-weight: 700; letter-spacing: 2px; }
.duel-log .hd small { color: var(--dim); margin-left: 6px; letter-spacing: 0; font-weight: 500; }
.duel-log .sum { display: flex; gap: 14px; margin-bottom: 4px; }
.duel-log .sum b { font: 20px var(--k-mono); }
.duel-log .g b, .duel-log b.g { color: #ffd27a; }
.duel-log .r b, .duel-log b.r { color: #8fd8ff; }
.duel-log .rows div { color: var(--dim); line-height: 1.5; }
.duel-log .rows i { color: #ff7b5a; font-style: normal; }
.duel-log .eng { margin: 2px 0 6px; padding: 3px 6px; background: rgba(255, 255, 255, 0.05); color: var(--dim); }
.duel-log .eng.mine { background: rgba(245, 166, 35, 0.18); color: #ffe2b0; }
.duel-log .eng.bad { background: rgba(255, 74, 74, 0.2); color: #ffd2c8; }
.duel-log .eng b { color: #fff; margin-right: 4px; }
.duel-box { position: absolute; top: 8px; right: 8px; width: 270px; max-height: calc(100% - 210px); overflow: auto; background: var(--k-panel); font-size: 12px; z-index: 21; pointer-events: auto; }
.duel-box .hd { display: flex; align-items: center; padding: 6px 8px; background: var(--k-bg2); border-bottom: 1px solid var(--k-line); position: sticky; top: 0; }
.duel-box .hd b { flex: 1; color: var(--amber); letter-spacing: 2px; }
.duel-box .body { padding: 4px 8px 8px; }
.duel-box.folded .body { display: none; }
.duel-box .grp { color: var(--dim); margin: 8px 0 3px; font-size: 10.5px; letter-spacing: 1.5px; font-weight: 600; border-bottom: 1px solid rgba(120, 150, 180, 0.14); padding-bottom: 2px; }
.duel-box .grp small { color: var(--dim); opacity: 0.8; letter-spacing: 0; font-weight: 500; }
.duel-box button { font: 500 12px var(--k-font); background: var(--k-panel2); color: var(--ink); border: 1px solid var(--k-line); padding: 3px 7px; margin: 0 3px 3px 0; cursor: pointer; }
.duel-box button:hover { border-color: var(--amber); }
.duel-box button.on { background: var(--amber); color: #1d1204; border-color: var(--amber); font-weight: 700; }
.duel-box button kbd { font-size: 10px; opacity: 0.7; }
.duel-box .ck { display: block; line-height: 1.7; cursor: pointer; }
.duel-box .ck input { accent-color: var(--k-amber); }
.duel-box input[type=range] { width: 100%; accent-color: var(--k-amber); }
.duel-box .pr { display: grid; grid-template-columns: 40px 1fr 64px; gap: 6px; align-items: center; line-height: 1.6; }
.duel-box .pr .bar { height: 6px; background: rgba(255, 255, 255, 0.08); }
.duel-box .pr .bar div { height: 100%; background: #b9c6d3; }
.duel-box .pr.dmg .bar div { background: var(--red); }
.duel-box .pr.dead span { text-decoration: line-through; color: var(--red); }
.duel-box .pr b { font: 400 12px var(--k-mono); text-align: right; color: var(--dim); }
.duel-box .btns { margin-top: 8px; }
.duel-box .ft { margin-top: 6px; color: var(--dim); }
.duel-box a { color: var(--k-blue2); }
.duel-box .feel .ck { line-height: 1.45; margin-bottom: 3px; }
.duel-box .bal { margin: 4px 0 2px; padding: 4px 6px; background: rgba(255, 255, 255, 0.05); color: var(--dim); line-height: 1.6; }
.duel-box .bal b { color: var(--ink); font-weight: 600; }
.duel-box .bal b.g { color: #ffd27a; } .duel-box .bal b.r { color: #8fd8ff; }
.duel-box .est { margin: 2px 0 4px; color: var(--dim); }
.duel-box .est b { color: var(--ink); }
.duel-box .est b.p { color: #bfe8ff; } .duel-box .est b.s { color: #ffd060; }

/* v0.40.0 속도·이펙트 테스트 페이지 (/speed/) */
.speedlab { position: absolute; top: 8px; right: 8px; width: 340px; max-height: calc(100% - 16px); overflow: auto; background: var(--k-panel); border: 1px solid var(--k-line); font-size: 12px; z-index: 30; }
.speedlab .hd { display: flex; align-items: center; gap: 6px; padding: 6px 8px; position: sticky; top: 0; background: #151b22; z-index: 1; }
.speedlab .hd b { flex: 1; color: var(--amber); letter-spacing: 1px; }
.speedlab.folded .body { display: none; }
.speedlab button { background: #2d353d; color: #e6e8ea; border: 1px solid #4a545e; padding: 3px 7px; cursor: pointer; font: inherit; }
.speedlab button:hover { background: #3a444e; }
.speedlab button.on { background: #b8752a; border-color: #e09a48; }
.speedlab .btns { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 8px; }
.speedlab .st { display: block; padding: 0 8px 4px; color: var(--dim); }   /* v0.52.2 전역 .st(출격 화면 grid)와 이름 겹침 → 빈 칸 288px */
.speedlab .grp { padding: 8px 8px 2px; color: var(--amber); font-weight: 600; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 4px; }
.speedlab .grp small { color: var(--dim); font-weight: 400; }
.speedlab .ck { display: block; padding: 2px 8px; color: #c9d0d6; }
.speedlab .row { display: grid; grid-template-columns: 120px 1fr 44px; gap: 6px; align-items: center; padding: 2px 8px; }
.speedlab .row .nm { color: #b9c0c7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.speedlab .row.chg .nm { color: #ffd27a; }
.speedlab .row .val { text-align: right; font-family: var(--k-mono, Consolas, monospace); color: #fff; }
.speedlab .row input[type=range] { width: 100%; }
.speedlab .tabs button { flex: 1 1 auto; }
.speedlab .ptitle { margin: 6px 8px 0; padding: 4px 6px; background: rgba(184,117,42,0.18); border-left: 3px solid #e09a48; color: #ffd27a; }
.speedlab .ft { padding: 8px; color: var(--dim); line-height: 1.5; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 6px; }
.speedlab .ft a { color: #8fd8ff; }
/* v0.64.5 /hit/ 패널 정리 — 탭 · 검색 · 그룹 접기 */
body.hitlab .speedlab { width: 380px; }
.speedlab .hd .q { width: 120px; background: #0e1318; color: #e6e8ea; border: 1px solid #4a545e; padding: 2px 6px; font: inherit; }
.speedlab .sec { margin: 4px 8px; padding: 0 0 4px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
.speedlab .sech { padding: 5px 8px; color: var(--amber); font-weight: 600; cursor: pointer; user-select: none; }
.speedlab .sech small { color: #c9d0d6; font-weight: 400; margin-left: 6px; }
.speedlab .sech .tw { display: inline-block; width: 10px; transition: transform .1s; }
.speedlab .sec.closed { padding-bottom: 0; } .speedlab .sec.closed .secb { display: none; } .speedlab .sec.closed .sech .tw { transform: rotate(-90deg); }
.speedlab .kv { display: grid; grid-template-columns: 52px 1fr; align-items: start; }
.speedlab .kv > span { padding: 6px 0 0 8px; color: #9aa3ab; }
.speedlab .kv .btns { padding: 2px 6px 2px 0; gap: 3px; }
.speedlab .kv .btns button { padding: 2px 6px; }
.speedlab .lb { padding: 6px 8px 0; color: #c9d0d6; font-weight: 600; }
.speedlab .lb small { color: var(--dim); font-weight: 400; }
.speedlab .hint { padding: 4px 8px; color: var(--dim); }
.speedlab .sec .btns { padding: 3px 8px; }
.speedlab .btns.tabs { position: sticky; top: 33px; z-index: 1; background: #151b22; padding: 6px 8px; border-bottom: 1px solid #e09a48; flex-wrap: nowrap; }
.speedlab .btns.tabs button { flex: 1 1 0; padding: 5px 4px; font-weight: 600; }
.speedlab .btns.tabs button i { font-style: normal; color: #ffd27a; }
.speedlab .btns.tabs button.on i { color: #fff; }
.speedlab .pane { display: none; }
.speedlab .pane.show { display: block; }
.speedlab .pane .tools { padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.speedlab.searching .pane { display: block; }
.speedlab.searching .pane .tools, .speedlab.searching .btns.tabs { display: none; }
.speedlab .gbox .grp { cursor: pointer; user-select: none; }
.speedlab .gbox .grp:hover { background: rgba(255,255,255,0.04); }
.speedlab .gbox .grp .tw { display: inline-block; width: 10px; transition: transform .1s; }
.speedlab .gbox .grp em { float: right; font-style: normal; font-weight: 400; color: #ffd27a; }
.speedlab .gbox.closed .row { display: none !important; }
.speedlab .gbox.closed .grp .tw { transform: rotate(-90deg); }
body.hitlab .speedlab .row { grid-template-columns: 150px 1fr 44px; }
body.hitlab .speedlab .row .nm { white-space: normal; line-height: 1.2; }
.speedlab-meter { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); min-width: 260px; padding: 6px 14px; text-align: center; background: rgba(12, 16, 20, 0.72); border: 1px solid var(--k-line); pointer-events: none; z-index: 20; }
.speedlab-meter .v b { font: 700 34px var(--k-mono, Consolas, monospace); color: #fff; }
.speedlab-meter .v small { margin-left: 4px; color: var(--dim); }
.speedlab-meter .km { color: var(--dim); font-size: 12px; }
.speedlab-meter .row2 { display: flex; gap: 10px; justify-content: center; font-size: 12px; margin-top: 2px; }
.speedlab-meter .state { color: var(--amber); font-weight: 700; }
.speedlab-meter .peak { color: #c9d0d6; }
.speedlab-meter .bar { height: 4px; background: rgba(255,255,255,0.1); margin-top: 5px; }
.speedlab-meter .bar i { display: block; height: 100%; width: 0; background: var(--amber); }
/* v0.49.2 명중률 계측 */
.speedlab-meter .acc { display: flex; gap: 10px; justify-content: center; font-size: 13px; margin-top: 6px; }
.speedlab-meter .acc .hr { color: #8fe3a0; font-weight: 700; }
.speedlab-meter .acc .tg { color: #c9d0d6; }
.speedlab-meter .dist { pointer-events: auto; display: flex; gap: 4px; justify-content: center; margin-top: 4px; }
.speedlab-meter .dist button { font-size: 11px; padding: 2px 6px; background: rgba(255,255,255,0.08); color: #dfe5ea; border: 1px solid rgba(255,255,255,0.18); cursor: pointer; }
.speedlab-meter .dist button:hover { background: rgba(255,190,80,0.25); }
/* v0.51.0 재밍 테스트 상태판 */
.jamlab-state { position: absolute; left: 10px; top: 34px; z-index: 30; min-width: 260px; padding: 8px 12px; background: rgba(12,16,20,0.82); border: 1px solid rgba(255,255,255,0.15); font-size: 13px; color: #dfe5ea; pointer-events: none; }
.jamlab-state b { display: block; color: #8fe3a0; margin-bottom: 4px; }
.jamlab-state b.on { color: #d9a0ff; }
.jamlab-state ul { list-style: none; margin: 6px 0; padding: 0; }
.jamlab-state li { padding: 1px 0; color: #8fe3a0; }
.jamlab-state li.x { color: #ff7a6a; }
.jamlab-state li small, .jamlab-state .sub { color: #9aa3ab; font-size: 12px; }
/* v0.52.0 재밍 UI: #hud.jammed 동안 노이즈·주사선·떨림·색 번짐. 세기 = --jam-k (abilities.jam.uiNoise) */
.jam-ov { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.15s; overflow: hidden; }
#hud.jammed .jam-ov { opacity: 1; }
.jam-ov .nz { position: absolute; inset: -50%; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 -0.35'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>"); opacity: calc(0.16 * var(--jam-k, 1)); mix-blend-mode: screen; animation: jamNoise 0.18s steps(4) infinite; }
.jam-ov .scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,calc(0.22 * var(--jam-k, 1))) 2px 4px); }
.jam-ov .band { position: absolute; left: 0; right: 0; height: 9%; background: linear-gradient(180deg, transparent, rgba(190,140,255,calc(0.16 * var(--jam-k, 1))) 45%, rgba(255,255,255,calc(0.10 * var(--jam-k, 1))) 50%, transparent); animation: jamBand 2.3s linear infinite; }
#hud.jammed .jam-ov::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 160px rgba(120,60,200,calc(0.45 * var(--jam-k, 1))); }
@keyframes jamNoise { 0% { transform: translate(0,0); } 25% { transform: translate(-7%,4%); } 50% { transform: translate(5%,-6%); } 75% { transform: translate(-3%,-2%); } 100% { transform: translate(6%,5%); } }
@keyframes jamBand { 0% { top: -10%; } 100% { top: 105%; } }
.jam-warn { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 2px; padding: 6px 22px; border: 1px solid rgba(200,150,255,0.7); background: rgba(40,16,60,0.62); font-family: var(--k-mono); color: #e6ccff; letter-spacing: 1px; text-shadow: 0 0 6px rgba(190,120,255,0.9); }
#hud.jammed .jam-warn { display: flex; animation: jamBlink 0.9s steps(2) infinite; }
.jam-warn b { font-size: 18px; letter-spacing: 3px; }
.jam-warn span { font-size: 13px; color: #fff; }
.jam-warn small { font: 12px sans-serif; color: #d6c2ee; letter-spacing: 0; }
@keyframes jamBlink { 0% { opacity: 1; } 100% { opacity: 0.72; } }
/* HUD 패널 떨림·RGB 번짐 (재밍 중 상시 약하게, jam-hit 순간 강하게) */
#hud.jammed .hud-bars, #hud.jammed .hud-weap, #hud.jammed .hud-diag, #hud.jammed .hud-top, #hud.jammed .crosshair, #hud.jammed .minimap { animation: jamShake 0.12s steps(2) infinite; text-shadow: calc(-1.5px * var(--jam-k, 1)) 0 rgba(255,40,90,0.75), calc(1.5px * var(--jam-k, 1)) 0 rgba(40,220,255,0.75); }
#hud.jammed .hud-diag { filter: saturate(0.4) hue-rotate(40deg); opacity: 0.75; }
#hud.jammed .crosshair .ring { border-style: dashed; opacity: 0.55; }
#hud.jammed.jam-hit .hud-bars, #hud.jammed.jam-hit .hud-weap { animation: jamTear 0.09s steps(1) infinite; filter: contrast(1.6) brightness(1.25); }
#hud.jammed.jam-hit .hud-diag { opacity: 0.25; }
@keyframes jamShake { 0% { translate: calc(1px * var(--jam-k, 1)) 0; } 50% { translate: calc(-1.5px * var(--jam-k, 1)) calc(1px * var(--jam-k, 1)); } 100% { translate: 0 calc(-1px * var(--jam-k, 1)); } }
@keyframes jamTear { 0% { translate: calc(7px * var(--jam-k, 1)) 0; clip-path: inset(0 0 55% 0); } 50% { translate: calc(-5px * var(--jam-k, 1)) 0; clip-path: inset(30% 0 0 0); } 100% { translate: 0 0; clip-path: none; } }
body.jamlab .duel-box, body.jamlab .duel-log { display: none !important; }
body.jamlab .jamlab-state { top: 12px; }
body.hitlab .duel-box, body.hitlab .duel-log { display: none !important; }   /* v0.56.2 /hit/ */
body.hitlab .jamlab-state { top: 12px; }
/* v0.60.2 /pad/ 게임패드 테스트 */
body.padlab .duel-box, body.padlab .duel-log { display: none !important; }
body.padlab .jamlab-state { top: 12px; }
.padlab-state { width: 340px; }
.padlab-state b.pl-h { color: #9aa3ab; }
.padlab-state b.pl-h.on { color: #8fe3a0; }
.pl-pad { display: block; margin: 4px 0; }
.pl-pad .k, .pl-pad .t { fill: #2d353d; stroke: #6a747e; stroke-width: 1.2; }
.pl-pad .k.on, .pl-pad .t.on { fill: #e09a48; stroke: #ffd27a; }
.pl-pad .tf { fill: rgba(224,154,72,0.75); }
.pl-pad .well { fill: #10161b; stroke: #3a444e; }
.pl-pad .dz { fill: rgba(255,122,106,0.18); }
.pl-pad .raw { fill: #8fd8ff; }
.pl-pad .lbl { fill: #e6e8ea; font: 700 10px Consolas, monospace; text-anchor: middle; pointer-events: none; }
.pl-log div { color: #9aa3ab; font-size: 12px; }
.pl-log div.new { color: #ffd27a; }
.speedlab .map .row { grid-template-columns: 112px 1fr 34px; }
.speedlab .map select { width: 100%; background: #10161b; color: #e6e8ea; border: 1px solid #4a545e; font: inherit; }
.speedlab .map .row.hit { background: rgba(224,154,72,0.25); }
.speedlab .map .row.hit .nm { color: #ffd27a; }

/* v0.55.0 개인전 · 네트워크 FFA */
.ubar.pc .nm { color: #ffd23a; }
.st-act .row .net { font-size: 18px; letter-spacing: 2px; }
.netl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(6, 10, 16, 0.86); z-index: 30; font-family: "Chakra Petch", sans-serif; color: #e6edf4; }
.netl .box { width: min(860px, 94vw); max-height: 92vh; overflow: auto; background: #0e1722; border: 1px solid rgba(120, 150, 180, 0.35); padding: 18px 22px; }
.netl h2 { margin: 0 0 4px; letter-spacing: 3px; font-size: 22px; } .netl h2 small { font-size: 12px; margin-left: 10px; opacity: 0.7; letter-spacing: 1px; }
.netl .row { display: flex; gap: 10px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.netl input, .netl select { background: #071019; color: #e6edf4; border: 1px solid rgba(120, 150, 180, 0.45); padding: 6px 8px; font: inherit; }
.netl input.code { width: 110px; text-transform: uppercase; letter-spacing: 4px; font-weight: 700; }
.netl button { background: #17324f; color: #e6edf4; border: 1px solid #3d8bff; padding: 7px 14px; font: inherit; font-weight: 600; letter-spacing: 1px; cursor: pointer; }
.netl button:disabled { opacity: 0.4; cursor: default; }
.netl button.go { background: #2a5c2a; border-color: #7dff9a; font-size: 18px; padding: 9px 26px; }
.netl button.ghost { background: transparent; border-color: rgba(120, 150, 180, 0.5); }
.netl .code-big { font-size: 30px; letter-spacing: 8px; font-weight: 700; color: #ffd23a; }
.netl table { width: 100%; border-collapse: collapse; font-size: 13px; }
.netl td, .netl th { padding: 5px 6px; border-top: 1px solid rgba(120, 150, 180, 0.15); text-align: left; }
.netl tr.me td { background: rgba(245, 166, 35, 0.08); }
.netl tr.closed td { opacity: 0.45; }
.netl .msg { color: #ffb347; min-height: 1.2em; font-size: 13px; }
.netl .dim { opacity: 0.65; font-size: 12px; }

/* v0.72.0 포격 경고 UI (바닥 예고 원 대신) */
.aw-banner { position: absolute; top: 108px; left: 50%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 2px; padding: 6px 26px; border: 1px solid rgba(255,140,60,.85); background: rgba(70,24,8,.72); color: #ffb070; font: 700 13px/1.2 sans-serif; letter-spacing: .5px; pointer-events: none; animation: awBlink .5s steps(2) infinite; }
.aw-banner b { font-size: 17px; color: #ffd24d; }
.aw-banner.hit { border-color: #ff3b30; background: rgba(110,10,6,.8); color: #fff; animation-duration: .25s; }
.aw-banner.hit b { color: #fff; }
@keyframes awBlink { 50% { opacity: .55; } }
.aw-vig { position: absolute; inset: 0; display: none; pointer-events: none; box-shadow: inset 0 0 120px 30px rgba(255,40,20,.55); animation: awBlink .25s steps(2) infinite; }
.aw-mk { position: absolute; left: 0; top: 0; display: none; pointer-events: none; }
.aw-mk i { position: absolute; left: -13px; top: -15px; width: 26px; text-align: center; font: 700 22px/1 sans-serif; color: #ff8a3d; text-shadow: 0 0 4px #000, 0 0 2px #000; font-style: normal; }
.aw-mk b { position: absolute; left: 14px; top: -9px; font: 700 12px/1 monospace; color: #ff8a3d; text-shadow: 0 0 3px #000; white-space: nowrap; }
.aw-mk em { display: none; position: absolute; left: -8px; top: -9px; font: 700 16px/1 sans-serif; color: #ff3b30; font-style: normal; text-shadow: 0 0 3px #000; }
.aw-mk.near i, .aw-mk.near b { color: #ff3b30; } .aw-mk.near i { animation: awBlink .3s steps(2) infinite; }
.aw-mk.hit i { font-size: 30px; left: -17px; top: -20px; width: 34px; }
.aw-mk.ally i, .aw-mk.ally b { color: #6fb6ff; } .aw-mk.ally i { font-size: 15px; left: -9px; top: -10px; width: 18px; animation: none; }
.aw-mk.off i { left: -34px; top: -11px; font-size: 18px; width: 22px; } .aw-mk.off em { display: block; } .aw-mk.off b { left: -40px; top: 9px; }

/* v0.79.0 피격 방향 HUD — 기체 둘레 위협 링 · 빨간 호 · 화살촉 태그 · THREAT 괄호 */
.thr { position: absolute; left: 0; top: 0; display: none; pointer-events: none; }
.thr-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.thr-ring circle { fill: none; stroke: rgba(140,220,255,.35); stroke-width: 1; stroke-dasharray: 2 5; }
.thr-ring line { stroke: rgba(140,220,255,.55); stroke-width: 1.2; }
.thr-arc { fill: none; stroke: #ff3b30; stroke-linecap: butt; filter: drop-shadow(0 0 4px rgba(255,59,48,.9)); }
.thr-chev { position: absolute; left: 0; top: 0; display: none; }
.thr-chev i { position: absolute; left: -7px; top: -8px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid #ff3b30; filter: drop-shadow(0 0 3px rgba(0,0,0,.9)); }
.thr-chev.fresh i { border-bottom-color: #fff; }
.thr-chev b { position: absolute; left: 12px; top: -7px; font: 700 10px/1 monospace; letter-spacing: .5px; color: #ff6a5c; background: rgba(40,0,0,.55); border-left: 2px solid #ff3b30; padding: 2px 4px; white-space: nowrap; text-shadow: 0 0 2px #000; }
.thr-chev b.lf { left: auto; right: 12px; border-left: none; border-right: 2px solid #ff3b30; }
.thr-chev.rear b { color: #fff; background: rgba(140,10,0,.7); }
.thr-bk { position: absolute; left: 0; top: 0; display: none; pointer-events: none; --bk: 40px; }
.thr-bk s { position: absolute; width: 9px; height: 9px; border: 0 solid #ff3b30; filter: drop-shadow(0 0 3px rgba(255,59,48,.8)); animation: awBlink .3s steps(2) 3; }
.thr-bk s:nth-child(1) { left: calc(var(--bk) / -2); top: calc(var(--bk) / -2); border-left-width: 2px; border-top-width: 2px; }
.thr-bk s:nth-child(2) { right: calc(var(--bk) / -2); top: calc(var(--bk) / -2); border-right-width: 2px; border-top-width: 2px; }
.thr-bk s:nth-child(3) { left: calc(var(--bk) / -2); bottom: calc(var(--bk) / -2); border-left-width: 2px; border-bottom-width: 2px; }
.thr-bk s:nth-child(4) { right: calc(var(--bk) / -2); bottom: calc(var(--bk) / -2); border-right-width: 2px; border-bottom-width: 2px; }
.thr-bk b { position: absolute; left: calc(var(--bk) / 2 + 4px); top: calc(var(--bk) / -2); font: 700 9px/1 monospace; letter-spacing: 1px; color: #ff3b30; text-shadow: 0 0 3px #000; }

/* v0.80.0 격파 확인 문구 — 메카 HUD 식: 윗줄 영문(모노) · 괄호선 사이 큰 글자 · 아랫줄 정보 / 스캔선 쓸고 지나감 */
.kc { position: absolute; left: 50%; top: 33%; transform: translate(-50%, -50%) scale(var(--kc-s, 1)); display: none; pointer-events: none; text-align: center; z-index: 6; --kc-t: 1.9s; --kc-c: #ff4a3d; }
.kc.on { display: block; animation: kcLife var(--kc-t) linear forwards; }
.kc.multi { --kc-c: #ffb02e; }
.kc-top { font: 700 11px/1 monospace; letter-spacing: 4px; color: var(--kc-c); opacity: .9; text-shadow: 0 0 6px var(--kc-c), 0 0 2px #000; margin-bottom: 4px; }
.kc.on .kc-top { animation: kcType .28s steps(8) both; }
.kc-main { display: flex; align-items: center; justify-content: center; gap: 10px; }
.kc-main b { position: relative; font: 900 30px/1.05 sans-serif; letter-spacing: 3px; color: #fff; padding: 2px 12px; background: linear-gradient(90deg, transparent, rgba(120,0,0,.55) 18%, rgba(120,0,0,.55) 82%, transparent); text-shadow: 0 0 10px var(--kc-c), 0 0 2px #000; overflow: hidden; }
.kc-main b::after { content: ''; position: absolute; left: -30%; top: 0; width: 25%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); }
.kc.on .kc-main b { animation: kcPop .32s cubic-bezier(.2,1.6,.4,1) both; }
.kc.on .kc-main b::after { animation: kcScan .5s .12s ease-out both; }
.kc-main s { display: block; width: 46px; height: 12px; border: 2px solid var(--kc-c); filter: drop-shadow(0 0 4px var(--kc-c)); }
.kc-main s:first-child { border-right: none; }
.kc-main s:last-child { border-left: none; }
.kc.on .kc-main s:first-child { animation: kcBrL .3s ease-out both; }
.kc.on .kc-main s:last-child { animation: kcBrR .3s ease-out both; }
.kc-sub { margin-top: 5px; font: 700 11px/1 monospace; letter-spacing: 1.5px; color: #ffd2cc; text-shadow: 0 0 3px #000; }
@keyframes kcLife { 0% { opacity: 0; } 4% { opacity: 1; } 10% { opacity: .55; } 14% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kcPop { 0% { transform: scale(1.6); filter: brightness(2.5); } 100% { transform: scale(1); filter: none; } }
@keyframes kcScan { 0% { left: -30%; } 100% { left: 110%; } }
@keyframes kcType { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes kcBrL { 0% { transform: translateX(-26px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes kcBrR { 0% { transform: translateX(26px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* v0.88.0 차폐 예고 — 조준점 '차폐' · 막히는 곳 ✕ BLOCKED · 총구→막히는 곳 점선 */
.cw-line { position: absolute; left: 0; top: 0; height: 0; border-top: 2px dashed rgba(255,70,50,.85); transform-origin: 0 0; display: none; pointer-events: none; filter: drop-shadow(0 0 2px #000); }
.cw-mark { position: absolute; left: 0; top: 0; display: none; pointer-events: none; }
.cw-mark i { position: absolute; left: -9px; top: -1.5px; width: 18px; height: 3px; background: #ff3b30; box-shadow: 0 0 6px #ff3b30, 0 0 1px #000; transform: rotate(45deg); }
.cw-mark i + i { transform: rotate(-45deg); }
.cw-mark b { position: absolute; left: 13px; top: -6px; font: 700 10px/1 monospace; letter-spacing: 1px; color: #ff6a5c; text-shadow: 0 0 3px #000; white-space: nowrap; animation: awBlink .5s steps(2) infinite; }
.cw-tag { position: absolute; left: 0; top: 0; display: none; pointer-events: none; transform-origin: 0 0; margin-left: -60px; width: 120px; text-align: center; font: 700 11px/1.2 sans-serif; color: #fff; background: rgba(150,20,10,.75); border: 1px solid #ff3b30; padding: 2px 0; text-shadow: 0 0 2px #000; }
.crosshair.cw-on .ring { border-color: #ff3b30 !important; border-style: dashed !important; }
.crosshair.cw-on .tk i, .crosshair.cw-on .c { background: #ff3b30 !important; }

/* v0.90.0 체력 낮을 때 경고 — 붉은 테두리(JS 가 opacity 로 깜빡임) · 아래쪽 CORE xx% 글자 */
.lh-vig { position: absolute; inset: 0; display: none; pointer-events: none; box-shadow: inset 0 0 160px 40px rgba(255,30,10,.85); border: 2px solid rgba(255,40,20,.5); }
.lh-vig.crit { box-shadow: inset 0 0 200px 60px rgba(255,20,0,.95); border-color: rgba(255,40,20,.85); }
.lh-tag { position: absolute; left: 50%; bottom: 178px; transform: translateX(-50%); display: none; pointer-events: none; text-align: center; }
.lh-tag b { display: block; font: 700 13px/1 monospace; letter-spacing: 3px; color: #ffb02e; text-shadow: 0 0 6px rgba(255,140,0,.8), 0 0 2px #000; }
.lh-tag small { display: block; margin-top: 3px; font: 700 11px/1 sans-serif; color: #ffd9b0; text-shadow: 0 0 2px #000; }
.lh-tag.crit b { color: #ff3b30; text-shadow: 0 0 8px rgba(255,40,20,.9), 0 0 2px #000; }
.lh-tag.crit small { color: #ffc9c4; }

/* v0.92.0 부위 도면 아래 부위별 HP 막대 */
.hud-diag .ph { margin-top: 5px; display: grid; gap: 3px; }
.hud-diag .ph-r { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 5px; font-size: 11px; line-height: 1; }
.hud-diag .ph-r span { color: var(--dim); }
.hud-diag .ph-r i { position: relative; height: 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.hud-diag .ph-r s { position: absolute; left: 0; top: 0; bottom: 0; background: #8fa2b5; transition: width .15s; }
.hud-diag .ph-r b { text-align: right; font: 700 11px/1 monospace; color: var(--ink); }
.hud-diag .ph-r.mid s { background: var(--amber, #ffb02e); }
.hud-diag .ph-r.low s { background: var(--red, #ff3b30); }
.hud-diag .ph-r.low b { color: var(--red, #ff3b30); }
.hud-diag .ph-r.dead span, .hud-diag .ph-r.dead b { color: var(--red, #ff3b30); }
.hud-diag .ph-r.dead i { border-color: rgba(255,59,48,.5); }

/* v0.92.1 부위 그림 자체가 HP 게이지 — 빈 부분은 어둡게, 남은 HP 만큼 아래에서 색이 참 */
.hud-diag .pg, .hud-diag .pn { display: none; }
.hud-diag.pg-on .pg { display: inline; }
.hud-diag.pg-on g[data-part].ok path, .hud-diag.pg-on g[data-part].dmg path { fill: #1d252d; animation: none; }
.hud-diag.pg-on .pg rect { fill: #8fa2b5; }
.hud-diag.pg-on .pg rect.mid { fill: var(--amber); }
.hud-diag.pg-on .pg rect.low { fill: var(--red); animation: blink 0.45s steps(2) infinite; }
.hud-diag.pg-on .pg rect.dead { fill: none; }
.hud-diag.pn-on .pn { display: inline; font: 700 9px/1 monospace; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.85); stroke-width: 2.4px; pointer-events: none; }

/* v0.94.0 화면 가장자리 위협 표시 — 큰 빨간 >>> (바깥쪽, 쏜 적 방향) + 가장자리 붉은 빛 */
.thr-edge { position: absolute; left: 0; top: 0; display: none; pointer-events: none; --es: 1; z-index: 3; }
.thr-edge i { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; }
.thr-edge s { position: absolute; top: calc(-16px * var(--es)); width: calc(20px * var(--es)); height: calc(32px * var(--es)); background: #ff2a1f;
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%); filter: drop-shadow(0 0 4px rgba(255,40,20,.9)); opacity: .35; animation: thrEdge .6s linear infinite; }
.thr-edge s:nth-child(1) { left: calc(-34px * var(--es)); animation-delay: 0s; }
.thr-edge s:nth-child(2) { left: calc(-19px * var(--es)); animation-delay: .1s; }
.thr-edge s:nth-child(3) { left: calc(-4px * var(--es)); animation-delay: .2s; }
.thr-edge.fresh s { background: #fff1e8; filter: drop-shadow(0 0 7px #ff2a1f); }
.thr-edge.rear s { background: #ff7a00; }
.thr-edge b { position: absolute; left: 0; top: calc(22px * var(--es)); transform: translateX(-50%); white-space: nowrap; font: 700 11px/1 monospace; letter-spacing: 1px;
  color: #fff; background: rgba(170,10,0,.8); padding: 2px 5px; border: 1px solid #ff3b30; }
.thr-edge.dn b { top: auto; bottom: calc(22px * var(--es)); }
@keyframes thrEdge { 0% { opacity: .25; } 35% { opacity: 1; } 100% { opacity: .25; } }
.thr-glow { position: absolute; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; display: none; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,30,10,.55), rgba(255,30,10,.18) 55%, rgba(255,30,10,0)); z-index: 2; }

/* v0.95.0 피해 숫자 — 맞힌 적 머리 위에 떠오름 */
.dn { position: absolute; left: 0; top: 0; display: none; pointer-events: none; text-align: center; white-space: nowrap; z-index: 4; transform-origin: 50% 100%; }
.dn b { display: block; font: 800 1em/1 'Consolas', monospace; color: #fff; letter-spacing: 0.5px;
  text-shadow: 0 0 2px #000, 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000, 0 0 8px rgba(120,190,255,.55); }
.dn small { display: block; margin-top: 1px; font: 700 11px/1 sans-serif; letter-spacing: 1px; color: #fff; text-shadow: 0 0 2px #000, 1px 1px 0 #000; }
.dn small:empty { display: none; }
.dn.head b { color: #ffe14a; text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000, 0 0 10px rgba(255,210,40,.8); }
.dn.head small { color: #ffe14a; }
.dn.rear b { color: #ff9a2e; text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000, 0 0 10px rgba(255,130,20,.8); }
.dn.rear small { color: #ffb45e; }
.dn.tg small { color: #ff5a3c; font-size: 12px; }
.dn.taken b { color: #ff4636; text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000, 0 0 8px rgba(255,40,20,.7); }

/* v0.99.0 리플레이 (메시지 1566674624249598043): 목록 · 재생 하단 바 · 재생 중 HUD = 내 기체 조작 표시 숨김 (킬피드·점수·거점·미니맵은 그대로) */
.overlay .panel.replay-list { width: min(1060px, 96vw); }
.replay-list .rl-scroll { max-height: 62vh; overflow: auto; }
.replay-list .rl td { vertical-align: middle; white-space: nowrap; }
.replay-list .rl td small { display: block; color: var(--dim); font-size: 10.5px; }
.replay-list .rl tr.r-win .res { color: var(--k-amber2); }
.replay-list .rl tr.r-lose .res { color: var(--k-red); }
.replay-list .rl tr.old td { opacity: 0.5; }
.replay-list .rl tr.old td.act { opacity: 1; }
.replay-list .rl .act { text-align: right; }
.replay-list .rl .act button { font: 600 12px var(--k-font); letter-spacing: 2px; padding: 4px 12px; margin-left: 6px; cursor: pointer; color: var(--k-ink); background: var(--k-panel2); border: 1px solid var(--k-line2); }
.replay-list .rl .act button.play { color: #1d1204; border-color: var(--k-amber2); background: linear-gradient(#ffcb62, var(--k-amber) 55%, #d88a12); }
.replay-list .rl .act button.del:hover { border-color: var(--k-red); color: var(--k-red); }
.replay-list .rl .oldv { color: var(--dim); font-size: 11px; }
.replay-list .rl-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.replay-list .rl-foot .load { cursor: pointer; }
.replay-list .rl-msg { color: var(--dim); font-size: 12px; }
.replay-list .rl-msg.bad { color: var(--k-red); }
.replay-bar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(980px, 94vw); z-index: 9; background: var(--bg); border: 1px solid var(--k-line); padding: 6px 10px; font-size: 12px; user-select: none; }
.replay-bar .rb-top { display: flex; gap: 12px; align-items: baseline; margin-bottom: 4px; }
.replay-bar .rb-tag { color: var(--k-red); font-weight: 700; letter-spacing: 3px; }
.replay-bar .rb-tag::before { content: "● "; }
.replay-bar .rb-who b { color: var(--k-amber2); }
.replay-bar .rb-keys { margin-left: auto; color: var(--dim); font-size: 10.5px; }
.replay-bar .rb-row { display: flex; gap: 6px; align-items: center; }
.replay-bar button { font: 600 12px var(--k-mono); padding: 3px 8px; cursor: pointer; color: var(--k-ink); background: var(--k-panel2); border: 1px solid var(--k-line2); }
.replay-bar button:hover, .replay-bar button.on { border-color: var(--amber); color: var(--k-amber2); }
.replay-bar .rb-play { min-width: 34px; }
.replay-bar .rb-time { font-family: var(--k-mono); min-width: 96px; text-align: center; }
.replay-bar .rb-seek { flex: 1; accent-color: var(--k-amber); }
.replay-bar .rb-sp { display: flex; gap: 2px; }
/* v0.99.4 (메시지 1566719258942242868) 리플레이도 HP·EN·부위·무기 HUD 표시 (따라가는 기체) — 재생 바 위로 올림, 조작 키 안내는 숨김 */
#hud.replay .hud-bars { bottom: 104px; }
#hud.replay .hud-weap, #hud.replay .hud-diag { bottom: 104px; }
#hud.replay .hud-weap .bk, #hud.replay .hud-weap .role small, #hud.replay .hud-bars .row small, #hud.replay .ammo-warn { display: none !important; }
#hud.replay .crosshair, #hud.replay .scope-ov, #hud.replay .ammo-ring,
#hud.replay .respawn, #hud.replay .spec-bar, #hud.replay .engage-warn, #hud.replay .jam-ov, #hud.replay .jam-warn { display: none !important; }

/* v0.103.0 정비 연결 UI (ui/hud.js updateRepairLink) */
.rep-link { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.rep-link svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rep-link line { stroke: #7dffb0; stroke-width: 3; stroke-dasharray: 10 8; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(60,255,140,.9)); animation: repDash .5s linear infinite; opacity: .85; }
@keyframes repDash { to { stroke-dashoffset: -18; } }
.rp-tag { position: absolute; transform: translate(-50%, -100%); text-align: center; white-space: nowrap; padding: 4px 10px 6px; border: 1.5px solid #5dff9a; border-radius: 4px; background: rgba(4,30,14,.78); box-shadow: 0 0 12px rgba(60,255,140,.55); }
.rp-tag b { display: block; font: 700 14px/1.2 sans-serif; color: #b9ffd4; text-shadow: 0 0 6px rgba(60,255,140,.9); letter-spacing: 1px; }
.rp-tag small { display: block; font: 600 12px/1.3 monospace; color: #e6fff0; }
.rp-tag i { display: block; height: 5px; margin-top: 3px; background: rgba(255,255,255,.15); border-radius: 2px; overflow: hidden; }
.rp-tag i u { display: block; height: 100%; background: linear-gradient(90deg, #3dff8a, #c8ffdc); transition: width .12s linear; }
.rp-tag.full { border-color: #8fd6ff; box-shadow: 0 0 10px rgba(120,200,255,.5); }
.rp-tag.full b { color: #cfeaff; }

/* v0.106.0 정비 연결 HUD 형 (repairFx.style 2): 반투명 패널 · 칸 나뉜 게이지 · 블룸(옅은 빛 번짐) · 조준 괄호 */
.rep-link.hud line { stroke: rgba(125,255,176,.55); stroke-width: 1.2; stroke-dasharray: 2 5; animation: repDash 1.2s linear infinite; filter: drop-shadow(0 0 3px rgba(80,255,150,.7)) drop-shadow(0 0 8px rgba(80,255,150,.35)); }
.rep-link .rp-br { fill: none; stroke: rgba(150,255,195,.85); stroke-width: 2; filter: drop-shadow(0 0 3px rgba(80,255,150,.8)) drop-shadow(0 0 9px rgba(80,255,150,.35)); }
.rep-link.hud .rp-tag { transform: none; text-align: left; padding: 4px 8px 5px; min-width: 130px; border: 1px solid rgba(125,255,176,.45); border-left: 2px solid rgba(160,255,200,.85); border-radius: 0;
  background: linear-gradient(90deg, rgba(20,80,45,.38), rgba(10,40,24,.18)); box-shadow: 0 0 10px rgba(60,255,140,.22), inset 0 0 12px rgba(60,255,140,.10); backdrop-filter: blur(1.5px); }
.rep-link.hud .rp-tag b { font: 600 10px/1.2 monospace; letter-spacing: 2px; color: rgba(190,255,215,.9); text-shadow: 0 0 4px rgba(80,255,150,.9), 0 0 10px rgba(80,255,150,.45); }
.rep-link.hud .rp-tag small { font: 600 11px/1.35 monospace; color: rgba(225,255,235,.85); text-shadow: 0 0 5px rgba(80,255,150,.55); }
.rep-link.hud .rp-tag i { height: 4px; margin-top: 4px; border-radius: 0; background: rgba(125,255,176,.12); }
.rep-link.hud .rp-tag i u { background: rgba(140,255,190,.8); box-shadow: 0 0 6px rgba(80,255,150,.9);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px); mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px); }
.rep-link.hud .rp-tag.full { border-color: rgba(143,214,255,.45); border-left-color: rgba(180,225,255,.85); }
.rep-link.hud .rp-tag.full b { color: rgba(207,234,255,.9); }

/* v0.111.0 리플레이 자세히 보기 (replay/detail.js) */
.replay-list .rl .act button.det { color: var(--k-amber2); }
.overlay .panel.replay-detail { width: min(1180px, 97vw); }
.replay-detail .rd-scroll { max-height: 72vh; overflow: auto; padding-right: 6px; }
.replay-detail h2 small b.rd-res.r-win { color: var(--k-amber2); } .replay-detail h2 small b.rd-res.r-lose { color: var(--k-red); }
.replay-detail .lb { margin: 12px 0 4px; font: 600 11px var(--k-font); letter-spacing: 2px; color: var(--k-ink); }
.replay-detail .lb small { color: var(--dim); letter-spacing: 0; margin-left: 6px; font-weight: 400; }
.replay-detail .lb small em { font-style: normal; } .replay-detail em.d { color: #f5a623; } .replay-detail em.t { color: #ff5a4d; } .replay-detail em.k { color: #ffffff; }
.replay-detail .rd-name { font-size: 15px; margin-top: 4px; }
.replay-detail .contrib td.top { color: var(--k-amber2); font-weight: 700; }
.replay-detail .contrib tr.sum td { color: var(--dim); font-size: 11.5px; border-top: 1px dashed var(--line); }
.replay-detail td.rd-bar { position: relative; min-width: 120px; }
.replay-detail td.rd-bar i { position: absolute; left: 6px; top: 5px; bottom: 5px; max-width: calc(100% - 12px); background: rgba(245,166,35,.28); border-right: 2px solid rgba(245,166,35,.8); }
.replay-detail td.rd-bar.top span { color: var(--k-amber2); font-weight: 700; }
.replay-detail td.rd-bar span { position: relative; }
.replay-detail .rd-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; }
.replay-detail .rd-kf { max-height: 360px; overflow: auto; font-size: 12.5px; line-height: 1.7; }
.replay-detail .rd-kf .t { font-family: var(--k-mono); color: var(--dim); margin-right: 4px; }
.replay-detail .rd-kf small { color: var(--dim); }
.replay-detail b.me { color: var(--k-amber2); } .replay-detail b.ally { color: #7cc4ff; } .replay-detail b.foe { color: #ff7a6e; }
.replay-detail .rd-kv { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--dim); margin: 4px 0; }
.replay-detail .rd-kv b { color: var(--k-ink); font-family: var(--k-mono); font-size: 13px; }
.replay-detail .rd-kv.big b { font-size: 16px; color: var(--k-amber2); }
.replay-detail .rd-parts { display: flex; gap: 6px; }
.replay-detail .rd-parts span { flex: 1; text-align: center; border: 1px solid var(--line); padding: 4px 0; }
.replay-detail .rd-parts small { display: block; color: var(--dim); font-size: 10.5px; } .replay-detail .rd-parts b { font-family: var(--k-mono); }
.replay-detail .rd-graph { width: 100%; height: 110px; display: block; }
.replay-detail .rd-graph rect.d { fill: rgba(245,166,35,.75); } .replay-detail .rd-graph rect.t { fill: rgba(255,90,77,.65); }
.replay-detail .rd-graph circle.k { fill: #fff; } .replay-detail .rd-graph line { stroke: var(--line); }
.replay-detail .rd-graph text { fill: var(--dim); font: 9px var(--k-mono); }
.replay-detail .rd-tk div { display: grid; grid-template-columns: 110px 1fr 50px; gap: 8px; align-items: center; font-size: 12px; }
.replay-detail .rd-tk i { height: 6px; background: rgba(255,255,255,.08); } .replay-detail .rd-tk u { display: block; height: 100%; background: rgba(255,90,77,.7); }
.replay-detail .rd-tk b { font-family: var(--k-mono); text-align: right; }
.replay-detail .rd-picks button { font: 600 12px var(--k-font); padding: 4px 10px; margin: 0 6px 6px 0; cursor: pointer; color: var(--k-ink); background: var(--k-panel2); border: 1px solid var(--k-line, #3a4652); border-left: 3px solid #7cc4ff; }
.replay-detail .rd-picks button.foe { border-left-color: #ff7a6e; }
.replay-detail .rd-picks button.on { border-color: var(--k-amber2); color: var(--k-amber2); }

/* v0.111.1 자세히 보기 요약 칸 (결과·K/D·시간·seed …) · 목록 PLAY 옛 버전 표시 */
.replay-detail .rd-sum { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 2px 0 6px; }
.replay-detail .rd-sum span { border: 1px solid var(--line); padding: 5px 12px; min-width: 70px; }
.replay-detail .rd-sum small { display: block; color: var(--dim); font-size: 10px; letter-spacing: 1.5px; }
.replay-detail .rd-sum b { font: 700 16px var(--k-mono); color: var(--k-ink); }
.replay-detail .rd-sum em { display: block; font-style: normal; color: var(--dim); font-size: 11px; }
.replay-detail .rd-sum .res.r-win b { color: var(--k-amber2); } .replay-detail .rd-sum .res.r-lose b { color: var(--k-red); }
.replay-detail .rd-sum .rd-play { margin-left: auto; font: 700 14px var(--k-font); letter-spacing: 3px; padding: 6px 26px; cursor: pointer; color: #1d1204; border: 1px solid var(--k-amber2); background: linear-gradient(#ffcb62, var(--k-amber) 55%, #d88a12); }
.replay-list .rl .act button.play small { font-size: 9.5px; letter-spacing: 0; opacity: .8; }

/* v0.128.0 근접 락온 HUD (ui/hud.js updateMeleeLink) — 내 락온 = 호박·붉은, 적이 나를 락온 = 붉은 */
.ml-link { position: absolute; inset: 0; pointer-events: none; z-index: 4; --mc: 255,140,60; }
.ml-link.foe { --mc: 255,70,60; }
.ml-link svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ml-link .ml-ln { stroke: rgba(var(--mc),.9); stroke-width: 2.5; stroke-dasharray: 8 6; stroke-linecap: round; animation: mlDash .4s linear infinite; filter: drop-shadow(0 0 3px rgba(var(--mc),.9)) drop-shadow(0 0 9px rgba(var(--mc),.45)); }
@keyframes mlDash { to { stroke-dashoffset: -14; } }
.ml-link .ml-br { fill: none; stroke: rgba(var(--mc),.95); stroke-width: 2.5; filter: drop-shadow(0 0 4px rgba(var(--mc),.9)) drop-shadow(0 0 10px rgba(var(--mc),.4)); animation: mlPulse .5s ease-in-out infinite alternate; }
.ml-link .ml-br2 { fill: none; stroke: rgba(var(--mc),.55); stroke-width: 1.5; }
@keyframes mlPulse { from { opacity: 1; } to { opacity: .6; } }
.ml-tag { position: absolute; text-align: left; white-space: nowrap; padding: 4px 8px 5px; min-width: 130px; border: 1px solid rgba(var(--mc),.5); border-left: 3px solid rgba(var(--mc),.95);
  background: linear-gradient(90deg, rgba(80,24,8,.5), rgba(40,10,4,.2)); box-shadow: 0 0 10px rgba(var(--mc),.25), inset 0 0 12px rgba(var(--mc),.1); }
.ml-tag b { display: block; font: 700 11px/1.2 monospace; letter-spacing: 2px; color: rgb(255,214,180); text-shadow: 0 0 4px rgba(var(--mc),.95), 0 0 10px rgba(var(--mc),.5); }
.ml-link.foe .ml-tag b { color: rgb(255,190,180); }
.ml-tag small { display: block; font: 600 11px/1.35 monospace; color: rgba(255,236,225,.9); }
.ml-tag i { display: block; height: 4px; margin-top: 4px; background: rgba(var(--mc),.15); }
.ml-tag i u { display: block; height: 100%; background: rgba(var(--mc),.85); box-shadow: 0 0 6px rgba(var(--mc),.9);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px); mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px); }
.ml-tag.warn { animation: mlWarn .3s steps(2) infinite; }
@keyframes mlWarn { 50% { border-color: rgba(255,240,200,.9); } }

/* v0.137.0 (TASK48) 줍기 안내 + 원형 게이지 · 주운 총 '재장전 불가' */
.pick-hint { position: absolute; left: 50%; bottom: 23%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 8px;
  background: rgba(10, 16, 22, 0.72); border: 1px solid rgba(255, 179, 71, 0.55); border-radius: 18px; color: #ffe2b0; font-size: 14px; pointer-events: none; white-space: nowrap; }
.pick-hint svg { width: 26px; height: 26px; transform: rotate(-90deg); }
.pick-hint circle { fill: none; stroke-width: 4; }
.pick-hint .bg { stroke: rgba(255, 255, 255, 0.18); }
.pick-hint .fg { stroke: #ffb347; stroke-linecap: round; stroke-dasharray: 0 101; }
.pick-hint.near .fg { stroke-dasharray: 0 101 !important; }
.pick-hint.on { border-color: #ffb347; color: #fff; }
.pick-hint small { color: #c9b28d; }
#hud.replay .pick-hint { display: none !important; }