/* ============================================================
   OUTBREAK — HUD / UI
   军事 + 生物实验风格：低饱和底色 + 警戒橙红 + 生化绿
   ============================================================ */

:root{
  --bg:#08090c;
  --panel:rgba(10,13,17,.62);
  --panel-brd:rgba(150,175,190,.18);
  --txt:#c8d6de;
  --txt-dim:#7c8b95;
  --human:#4fc3f7;
  --infected:#7ef07a;
  --infected-hot:#ff4d4d;
  --warn:#ff8a1f;
  --gold:#ffcf5c;
  --mono:'Consolas','SF Mono','Menlo','DejaVu Sans Mono',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#000;color:var(--txt);
  font-family:'Segoe UI','Microsoft YaHei',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;user-select:none;}
#app{position:fixed;inset:0}
canvas#scene{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.hidden{display:none !important}

/* ---------------- HUD 容器 ---------------- */
#hud{position:absolute;inset:0;pointer-events:none;font-family:var(--mono)}

/* ---------------- 准星 ---------------- */
#crosshair{position:absolute;left:50%;top:50%;width:0;height:0;--spread:8px}
#crosshair .ch-line{position:absolute;background:rgba(230,245,250,.92);
  box-shadow:0 0 3px rgba(0,0,0,.9);transition:opacity .1s}
#crosshair .ch-t{left:-1px;top:calc(-1 * var(--spread) - 8px);width:2px;height:8px}
#crosshair .ch-b{left:-1px;top:var(--spread);width:2px;height:8px}
#crosshair .ch-l{top:-1px;left:calc(-1 * var(--spread) - 8px);height:2px;width:8px}
#crosshair .ch-r{top:-1px;left:var(--spread);height:2px;width:8px}
#crosshair .ch-dot{position:absolute;left:-1px;top:-1px;width:2px;height:2px;border-radius:50%;
  background:rgba(255,255,255,.85);box-shadow:0 0 3px #000}
#crosshair.hostile .ch-line{background:#ff6b6b}
#crosshair.no-ammo .ch-line{background:#ff3b3b}

/* ---------------- 命中标记 ---------------- */
#hitmarker{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0}
#hitmarker span{position:absolute;width:9px;height:2px;background:#fff;transform-origin:center}
#hitmarker span:nth-child(1){transform:translate(-16px,-9px) rotate(45deg)}
#hitmarker span:nth-child(2){transform:translate(8px,-9px) rotate(-45deg)}
#hitmarker span:nth-child(3){transform:translate(-16px,8px) rotate(-45deg)}
#hitmarker span:nth-child(4){transform:translate(8px,8px) rotate(45deg)}
#hitmarker.show{animation:hm .22s ease-out}
#hitmarker.kill span{background:#ff4d4d;height:3px;width:13px}
#hitmarker.head span{background:#ffd34d;height:3px;width:13px}
@keyframes hm{0%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}

/* ---------------- 受伤方向 ---------------- */
#damage-dirs{position:absolute;left:50%;top:50%;width:0;height:0}
.dmg-arrow{position:absolute;left:0;top:0;width:0;height:0;opacity:0}
.dmg-arrow::before{content:'';position:absolute;left:-13px;top:-140px;width:26px;height:26px;
  border-top:3px solid #ff3b3b;border-left:3px solid #ff3b3b;border-right:3px solid #ff3b3b;
  transform-origin:50% 140px;
  filter:drop-shadow(0 0 6px rgba(255,40,40,.9))}

/* ---------------- 全屏效果层 ---------------- */
#fx-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.55) 100%)}
#fx-damage{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,transparent 35%,rgba(190,10,10,.85) 100%);
  transition:opacity .28s ease-out}
#fx-lowhp{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,transparent 42%,rgba(150,0,0,.5) 100%)}
#fx-infected{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:
    radial-gradient(ellipse at center,rgba(126,240,122,.16) 0%,rgba(20,60,20,.86) 95%),
    repeating-linear-gradient(0deg,rgba(126,240,122,.09) 0 3px,transparent 3px 7px);
  transition:opacity .5s ease-out}
#fx-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:#fff}

/* ---------------- 面板通用 ---------------- */
#panel-status,#panel-top,#panel-score,#panel-weapon,#panel-threat{
  position:absolute;background:var(--panel);border:1px solid var(--panel-brd);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:9px 13px;border-radius:3px}

/* 左上 状态 */
#panel-status{left:18px;top:18px;min-width:236px}
.faction-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
#faction-badge{font-weight:700;letter-spacing:2px;font-size:13px;color:var(--human);
  text-shadow:0 0 10px rgba(79,195,247,.5)}
#faction-badge.infected{color:var(--infected);text-shadow:0 0 12px rgba(126,240,122,.7)}
#round-state{font-size:10px;color:var(--txt-dim);letter-spacing:1.5px}
#health-wrap{display:flex;align-items:center;gap:9px}
#health-bar{position:relative;flex:1;height:13px;background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.16);overflow:hidden}
#health-ghost{position:absolute;left:0;top:0;height:100%;width:100%;background:rgba(255,80,80,.42);
  transition:width .5s ease-out .12s}
#health-fill{position:absolute;left:0;top:0;height:100%;width:100%;z-index:2;
  background:linear-gradient(90deg,#2ee6a8,#7ef07a);transition:width .12s linear}
#health-fill.low{background:linear-gradient(90deg,#ff3b3b,#ff8a1f)}
#health-fill.infected{background:linear-gradient(90deg,#4ad14a,#c8ff3b)}
#health-text{font-size:11px;color:var(--txt-dim);min-width:78px;text-align:right}
#health-text b{color:#fff;font-size:15px}
.tag{display:inline-block;font-size:9px;letter-spacing:1.5px;padding:2px 6px;
  border:1px solid var(--gold);color:var(--gold);border-radius:2px}

/* 顶部中央 */
#panel-top{left:50%;top:14px;transform:translateX(-50%);text-align:center;min-width:280px;padding:7px 20px 9px}
#timer{font-size:31px;font-weight:700;letter-spacing:2px;line-height:1;
  text-shadow:0 0 14px rgba(255,255,255,.18)}
#timer.urgent{color:var(--warn);animation:blink .6s steps(2,end) infinite}
#phase-label{font-size:9.5px;letter-spacing:3.5px;color:var(--txt-dim);margin-top:3px}
#counts{display:flex;justify-content:center;gap:20px;margin-top:6px}
.cnt{display:flex;align-items:center;gap:5px;font-size:11px}
.cnt i{width:8px;height:8px;border-radius:50%;display:inline-block}
.cnt.humans i{background:var(--human);box-shadow:0 0 8px var(--human)}
.cnt.infected i{background:var(--infected);box-shadow:0 0 8px var(--infected)}
.cnt span{font-size:16px;font-weight:700;color:#fff}
.cnt em{font-style:normal;font-size:8.5px;letter-spacing:1.4px;color:var(--txt-dim)}
#objective{font-size:10px;letter-spacing:2.4px;color:var(--warn);margin-top:5px;min-height:12px}

@keyframes blink{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}

/* 右上得分 */
#panel-score{right:18px;top:18px;text-align:right;min-width:186px}
.score-row{display:flex;justify-content:space-between;align-items:baseline}
.score-row span{font-size:9.5px;letter-spacing:2.4px;color:var(--txt-dim)}
.score-row b{font-size:23px;color:var(--gold);text-shadow:0 0 12px rgba(255,207,92,.35)}
.score-sub{font-size:9.5px;color:var(--txt-dim);margin-top:3px;letter-spacing:.6px}

/* 左下武器 */
#panel-weapon{left:18px;bottom:18px;min-width:250px}
#weapon-name{font-size:12px;letter-spacing:2.6px;color:#fff}
#ammo{margin-top:2px;display:flex;align-items:baseline;gap:5px}
#ammo b{font-size:34px;line-height:1;color:#fff}
#ammo.low b{color:var(--warn)}
#ammo.empty b{color:#ff4d4d}
#ammo-sep{color:var(--txt-dim);font-size:17px}
#ammo-reserve{font-size:17px;color:var(--txt-dim)}
#weapon-slots{display:flex;gap:8px;margin-top:7px}
.slot{font-size:9px;letter-spacing:1.4px;color:var(--txt-dim);border:1px solid transparent;
  padding:2px 6px;border-radius:2px}
.slot i{font-style:normal;opacity:.5;margin-right:4px}
.slot.on{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.07)}
#reload-hint{margin-top:5px;font-size:10px;letter-spacing:2.4px;color:var(--warn);
  animation:blink .5s steps(2,end) infinite}

/* 右下威胁 */
#panel-threat{right:18px;bottom:18px;width:212px;text-align:right}
#threat-bar{height:6px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14);overflow:hidden}
#threat-fill{height:100%;width:12%;background:linear-gradient(90deg,#4ad14a,#ff8a1f,#ff3b3b);
  transition:width .8s ease-out}
#threat-text{font-size:9px;letter-spacing:2.2px;color:var(--txt-dim);margin-top:4px}

/* 中央警告 */
#center-warning{position:absolute;left:50%;top:24%;transform:translateX(-50%);
  font-size:44px;font-weight:800;letter-spacing:9px;color:var(--infected-hot);
  text-shadow:0 0 26px rgba(255,40,40,.75),0 3px 0 rgba(0,0,0,.7);
  opacity:0;white-space:nowrap;text-align:center}
#center-warning.show{animation:cw 1.5s ease-out}
#center-warning .sub{display:block;font-size:13px;letter-spacing:5px;color:#fff;margin-top:8px;font-weight:500}
@keyframes cw{0%{opacity:0;transform:translateX(-50%) scale(1.25)}
  12%{opacity:1;transform:translateX(-50%) scale(1)}70%{opacity:1}100%{opacity:0}}
#big-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:64px;font-weight:900;letter-spacing:16px;color:#c8ff3b;opacity:0;text-align:center;
  text-shadow:0 0 40px rgba(126,240,122,.8),0 0 4px #000}
#big-status.show{animation:bs 2.1s ease-out}
@keyframes bs{0%{opacity:0;letter-spacing:44px}15%{opacity:1;letter-spacing:16px}75%{opacity:1}100%{opacity:0}}

/* 信息流 */
#feed{position:absolute;right:18px;top:96px;width:330px;display:flex;flex-direction:column;
  align-items:flex-end;gap:3px}
.feed-item{background:rgba(8,11,14,.72);border-left:2px solid var(--txt-dim);
  padding:3px 8px;font-size:11px;letter-spacing:.5px;animation:fd .25s ease-out;white-space:nowrap}
.feed-item .k{color:#fff}
.feed-item .z{color:var(--infected)}
.feed-item.inf{border-left-color:var(--infected)}
.feed-item.kill{border-left-color:var(--warn)}
.feed-item .hd{color:var(--gold)}
@keyframes fd{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}

/* 头顶标签 */
#nametags{position:absolute;inset:0;overflow:hidden}
.nametag{position:absolute;transform:translate(-50%,-100%);text-align:center;
  font-size:10px;letter-spacing:.6px;will-change:transform;pointer-events:none}
.nt-bar{width:46px;height:3px;background:rgba(0,0,0,.65);border:1px solid rgba(0,0,0,.6);
  margin:0 auto 2px;overflow:hidden}
.nt-fill{height:100%;background:var(--human);transition:width .12s linear}
.nt-name{color:#a9c4d2;text-shadow:0 1px 3px #000;white-space:nowrap}
.ntag.infected .nt-fill{background:var(--infected)}
.ntag.infected .nt-name{color:#9dfd94}
.ntag.brute .nt-name{color:#ffb066;font-weight:700}
.ntag.elite{color:#ffd76a}

/* ---------------- 调试面板 ---------------- */
#debug-panel{position:absolute;right:18px;top:180px;width:268px;
  background:rgba(6,9,12,.86);border:1px solid rgba(126,240,122,.28);
  font-family:var(--mono);font-size:10.5px;padding:9px 11px;border-radius:3px;
  box-shadow:0 0 26px rgba(0,0,0,.65)}
.dp-head{display:flex;justify-content:space-between;color:var(--infected);
  font-size:9.5px;letter-spacing:1.4px;margin-bottom:7px;
  border-bottom:1px solid rgba(126,240,122,.2);padding-bottom:5px}
#dp-toggle-hint{color:#5d6b73;letter-spacing:0}
.dp-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px}
.dp-grid div{display:flex;justify-content:space-between}
.dp-grid i{font-style:normal;color:#6b7a82}
.dp-grid b{color:#e8f6ff;font-weight:600}
.dp-sec{color:var(--infected);font-size:9px;letter-spacing:2px;margin:9px 0 5px;
  border-top:1px solid rgba(126,240,122,.16);padding-top:6px}
.dp-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.dp-row label{color:#8a99a2}
.seg{display:flex;border:1px solid rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.seg button{background:transparent;border:0;border-left:1px solid rgba(255,255,255,.12);
  color:#93a3ac;font-family:var(--mono);font-size:9.5px;padding:3px 6px;cursor:pointer}
.seg button:first-child{border-left:0}
.seg button:hover{background:rgba(255,255,255,.08);color:#fff}
.seg button.on{background:rgba(126,240,122,.2);color:#d7ffcf}
.dp-foot{display:flex;gap:6px;margin-top:9px}
.dp-foot button{flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  color:#dfe9ee;font-family:var(--mono);font-size:9.5px;padding:5px 4px;cursor:pointer;letter-spacing:.6px}
.dp-foot button:hover{background:rgba(126,240,122,.2)}
#dp-selftest-out{margin-top:8px;max-height:190px;overflow:auto;font-size:9px;line-height:1.5;
  color:#b9c8cf;border-top:1px solid rgba(255,255,255,.12);padding-top:6px;white-space:pre-wrap}
#dp-selftest-out .ok{color:#7ef07a}
#dp-selftest-out .bad{color:#ff6b6b}

/* ---------------- 覆盖层 ---------------- */
#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%,rgba(18,26,30,.9),rgba(2,3,4,.97));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);overflow:auto}
.screen{width:min(1080px,92vw);padding:26px 30px;text-align:center}
.logo-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:7px;color:var(--infected)}
.logo h1{font-size:78px;letter-spacing:16px;font-weight:900;line-height:1;margin:4px 0 2px;
  background:linear-gradient(180deg,#eafcff 10%,#7ef07a 60%,#2f8f3a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(126,240,122,.35))}
.logo-line{font-family:var(--mono);font-size:11px;letter-spacing:3.5px;color:var(--txt-dim)}
.menu-cols{display:flex;gap:14px;margin:26px 0 20px;text-align:left;flex-wrap:wrap;justify-content:center}
.menu-card{flex:1 1 260px;max-width:340px;background:rgba(12,16,20,.6);
  border:1px solid var(--panel-brd);border-radius:3px;padding:14px 16px}
.menu-card h3{font-family:var(--mono);font-size:10.5px;letter-spacing:3px;color:var(--infected);
  margin-bottom:10px;font-weight:600}
.menu-card p{font-size:12px;line-height:1.75;color:#a8b7c0;margin-bottom:7px}
.menu-card p b{color:#e8f4fa}
.win-h{color:var(--human) !important}
.win-i{color:var(--infected) !important}
.tip{color:#6f7e87 !important;font-size:11px !important}
.keys{list-style:none;font-family:var(--mono);font-size:11px}
.keys li{display:flex;align-items:center;gap:5px;padding:2.5px 0;color:#9fb0ba}
.keys li span{margin-left:7px;color:#75848d}
kbd{display:inline-block;min-width:20px;text-align:center;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2);border-bottom-width:2px;border-radius:3px;
  padding:1px 5px;font-size:9.5px;color:#e6f2f8}
.menu-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.menu-row label{font-family:var(--mono);font-size:10.5px;color:#93a3ac}
.big-btn{font-family:var(--mono);font-size:15px;letter-spacing:4px;font-weight:700;
  background:linear-gradient(180deg,rgba(126,240,122,.22),rgba(126,240,122,.08));
  border:1px solid rgba(126,240,122,.6);color:#ddffdd;padding:13px 46px;cursor:pointer;
  border-radius:3px;transition:.15s;text-shadow:0 0 12px rgba(126,240,122,.6)}
.big-btn:hover{background:rgba(126,240,122,.3);box-shadow:0 0 34px rgba(126,240,122,.34);transform:translateY(-1px)}
.alt-btn{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:2.5px;
  background:transparent;border:1px solid rgba(255,255,255,.24);color:#b9c8cf;
  padding:9px 26px;cursor:pointer;border-radius:3px}
.alt-btn:hover{background:rgba(255,255,255,.09)}
.foot-note{margin-top:12px;font-family:var(--mono);font-size:10px;color:#5d6b73;letter-spacing:1.4px}
h2{font-family:var(--mono);font-size:46px;letter-spacing:12px;margin-bottom:16px}
h2.err{color:#ff5b5b}
#screen-pause .pause-stats{font-family:var(--mono);font-size:12px;color:#9fb0ba;line-height:2;
  margin-bottom:20px}
#result-banner{font-size:56px;font-weight:900;letter-spacing:12px;font-family:var(--mono)}
#result-banner.human{color:var(--human);text-shadow:0 0 34px rgba(79,195,247,.5)}
#result-banner.infected{color:var(--infected);text-shadow:0 0 34px rgba(126,240,122,.55)}
#result-sub{font-family:var(--mono);font-size:11px;letter-spacing:6px;color:var(--txt-dim);margin-bottom:22px}
#result-table{margin:0 auto 18px;border-collapse:collapse;font-family:var(--mono);font-size:12.5px}
#result-table td{padding:5px 20px;border-bottom:1px solid rgba(255,255,255,.08);color:#a8b7c0}
#result-table td:last-child{text-align:right;color:#fff;font-weight:600}
#result-table tr.head td{color:var(--infected);letter-spacing:2.5px;font-size:10px}
#result-score{margin:0 auto 22px;max-width:420px}
.rs-line{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);padding:7px 0;border-top:1px solid rgba(255,255,255,.14)}
.rs-line span{font-size:10px;letter-spacing:2.5px;color:var(--txt-dim)}
.rs-line b{font-size:30px;color:var(--gold)}
.rs-line.small b{font-size:16px;color:#e8f4fa}
#error-text{font-family:var(--mono);font-size:12px;color:#ff8f8f;background:rgba(0,0,0,.5);
  padding:12px;text-align:left;max-width:640px;margin:0 auto 14px;white-space:pre-wrap}

@media (max-width:900px){
  .logo h1{font-size:48px}
  #debug-panel{display:none}
}