/* RIDGELINE 战地风 HUD —— 暖白 + 军橙，斜切角细线，拒绝圆角卡片 */
:root {
  --ink: #f0e9dc;
  --ink-dim: #c9c0ae;
  --accent: #ff9a3c;
  --danger: #ff4b3a;
  --strip: rgba(14, 15, 11, 0.52);
  --line: rgba(240, 233, 220, 0.35);
  --font-num: 'Rajdhani', 'Saira Condensed', system-ui, sans-serif;
  --font-label: 'Saira Condensed', 'Rajdhani', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #12100c; }
body { font-family: var(--font-label); color: var(--ink); user-select: none; }
#game { position: fixed; inset: 0; display: block; }
.hidden { display: none !important; }

/* BF1 式胶片层：后处理已有暗角/颗粒，这里只做极轻脏色叠加 */
#atmos {
  position: fixed; inset: 0; pointer-events: none; z-index: 6;
  background:
    radial-gradient(ellipse 75% 70% at 50% 40%,
      transparent 35%,
      rgba(28, 22, 14, 0.14) 70%,
      rgba(10, 8, 6, 0.42) 100%),
    linear-gradient(180deg,
      rgba(36, 34, 38, 0.06) 0%,
      transparent 40%,
      rgba(24, 18, 10, 0.1) 100%);
  mix-blend-mode: multiply;
  opacity: 0.88;
}
#atmos::after {
  content: '';
  position: absolute; inset: -20%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
  animation: grain-shift 0.35s steps(2) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-1.5%, 1%); }
  100% { transform: translate(1%, -0.5%); }
}

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }

/* ---------- 据点条（BF 式 A/B/C） ---------- */
#obj-bar {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; align-items: center;
}
.obj-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--strip); padding: 4px 10px 4px 6px;
  border-left: 2px solid rgba(240,233,220,.35);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  min-width: 72px;
}
.obj-chip.mine { border-left-color: var(--accent); }
.obj-chip.enemy { border-left-color: var(--danger); }
.obj-letter {
  font: 700 16px var(--font-num); width: 20px; text-align: center;
  color: var(--ink);
}
.obj-chip.mine .obj-letter { color: var(--accent); }
.obj-chip.enemy .obj-letter { color: var(--danger); }
.obj-track {
  width: 42px; height: 4px; background: rgba(240,233,220,.15);
  overflow: hidden;
}
.obj-track i {
  display: block; height: 100%; width: 0;
  background: var(--ink-dim);
  transition: width .25s linear;
}
.obj-chip.mine .obj-track i { background: var(--accent); }
.obj-chip.enemy .obj-track i { background: var(--danger); }

/* 压制暗角：子弹擦脸时发灰发闷 */
#suppress-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 7;
  opacity: 0;
  background:
    radial-gradient(ellipse 55% 50% at 50% 50%,
      transparent 30%,
      rgba(40, 28, 18, 0.55) 78%,
      rgba(12, 8, 6, 0.82) 100%);
  mix-blend-mode: multiply;
  transition: opacity .08s linear;
}

/* ---------- 准星 ---------- */
#crosshair {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  --gap: 8px;
  transition: opacity .15s;
}
#crosshair .ch {
  position: absolute; background: var(--ink);
  box-shadow: 0 0 3px rgba(0,0,0,.9);
}
/* 载具视角：准星落在自己车身上 → 变灰变淡提示（打不到那儿） */
#crosshair.blocked .ch { background: #8a8a82; opacity: .45; box-shadow: none; }
#crosshair .t { width: 2px; height: 8px; left: -1px; top: calc(-1 * var(--gap) - 8px); }
#crosshair .b { width: 2px; height: 8px; left: -1px; top: var(--gap); }
#crosshair .l { width: 8px; height: 2px; top: -1px; left: calc(-1 * var(--gap) - 8px); }
#crosshair .r { width: 8px; height: 2px; top: -1px; left: var(--gap); }
#crosshair .dot { width: 2px; height: 2px; left: -1px; top: -1px; }

#hitmarker {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0;
}
#hitmarker i {
  position: absolute; width: 2.5px; height: 11px; background: var(--ink);
  box-shadow: 0 0 4px rgba(0,0,0,.8);
}
#hitmarker i:nth-child(1) { transform: translate(-9px, -14px) rotate(45deg); }
#hitmarker i:nth-child(2) { transform: translate(7px, -14px) rotate(-45deg); }
#hitmarker i:nth-child(3) { transform: translate(-9px, 4px) rotate(-45deg); }
#hitmarker i:nth-child(4) { transform: translate(7px, 4px) rotate(45deg); }
#hitmarker.show { opacity: 1; }
#hitmarker.show.hs i { background: var(--accent); }
#hitmarker.show.kill i { background: var(--danger); height: 14px; }

/* Q 标记扫描圈：从准星往外扩一大圈 */
#mark-ring {
  position: absolute; left: 50%; top: 50%;
  width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 170, 80, 0.85);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(255, 140, 40, 0.35),
    inset 0 0 12px rgba(255, 160, 60, 0.15);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.35);
}
#mark-ring.pulse {
  animation: mark-ring-out 0.55s cubic-bezier(0.15, 0.85, 0.25, 1) forwards;
}
#mark-ring.pulse.ok {
  border-color: rgba(255, 150, 60, 0.95);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 0 22px rgba(255, 120, 30, 0.55),
    inset 0 0 14px rgba(255, 160, 60, 0.2);
}
#mark-ring.pulse.miss {
  border-color: rgba(180, 180, 170, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}
@keyframes mark-ring-out {
  0%   { opacity: 0.95; transform: scale(0.28); }
  55%  { opacity: 0.7; }
  100% { opacity: 0; transform: scale(4.2); }
}

/* ---------- 队伍分（顶中） ---------- */
#team-score {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 10px;
  font: 700 22px var(--font-num); letter-spacing: 2px;
  background: var(--strip); padding: 4px 18px 5px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  pointer-events: none; z-index: 12;
}
.ts-blue { color: #6ab0ff; }
.ts-orange { color: #ff9a3c; }
.ts-mid { color: var(--ink-dim); font-size: 13px; font-weight: 500; }

/* ---------- 罗盘 ---------- */
#compass {
  position: absolute; top: 48px; left: 50%; transform: translateX(-50%);
  width: min(420px, 70vw); height: 28px; overflow: hidden;
  pointer-events: none; z-index: 11;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
#compass-tape {
  position: absolute; left: 50%; top: 0; height: 100%;
  white-space: nowrap; font: 600 12px var(--font-label); letter-spacing: 1px;
  color: var(--ink-dim); will-change: transform;
}
#compass-tape span {
  display: inline-block; width: 48px; text-align: center;
  color: var(--ink-dim);
}
#compass-tape span.card { color: var(--ink); font-weight: 700; font-size: 13px; }
#compass-needle {
  position: absolute; left: 50%; top: 0; width: 2px; height: 10px;
  margin-left: -1px; background: var(--accent);
  box-shadow: 0 0 6px rgba(255,154,60,.6);
}
#compass-marks {
  position: absolute; inset: 0; pointer-events: none;
}
#compass-marks i {
  position: absolute; top: 12px; width: 0; height: 0;
  transform: translateX(-50%);
  font: 700 11px var(--font-num); letter-spacing: 0;
  text-shadow: 0 0 4px #000;
}
#compass-marks i.obj { color: #f0e9dc; }
#compass-marks i.obj.mine { color: #6ab0ff; }
#compass-marks i.obj.enemy { color: #ff9a3c; }
#compass-marks i.mark {
  color: #ff4b3a; font-size: 14px; top: 10px;
}

/* ---------- 聊天 ---------- */
#chat-log {
  position: absolute; left: 22px; bottom: 118px; width: min(360px, 42vw);
  max-height: 160px; overflow: hidden; pointer-events: none; z-index: 14;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
}
.chat-line {
  font: 500 13px var(--font-label); letter-spacing: 0.5px;
  color: rgba(240,233,220,.92);
  text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,.5);
  background: rgba(10,11,8,.35); padding: 2px 8px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  animation: chat-in .15s ease-out;
}
.chat-line .cn { font-weight: 700; margin-right: 6px; }
.chat-line .cn.blue { color: #6ab0ff; }
.chat-line .cn.orange { color: #ff9a3c; }
.chat-line.fade { opacity: 0; transition: opacity .6s; }
@keyframes chat-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#chat-input-wrap {
  position: absolute; left: 22px; bottom: 88px; z-index: 20;
  display: flex; align-items: center; gap: 6px;
  background: rgba(10,11,8,.82); border-left: 2px solid var(--accent);
  padding: 6px 12px; min-width: 280px;
}
#chat-input-wrap .chat-prefix { color: var(--accent); font: 600 13px var(--font-label); }
#chat-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--ink); font: 500 14px var(--font-label); letter-spacing: 0.5px;
  min-width: 200px;
}

/* ---------- 部署小地图 ---------- */
.deploy-label {
  margin: 10px 0 6px; font: 500 12px var(--font-label); letter-spacing: 2px;
  color: var(--ink-dim);
}
#deploy-map {
  position: relative; width: 220px; height: 220px; margin: 0 auto 12px;
  background: rgba(20,18,14,.85);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
#deploy-map .dp {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 1px; cursor: pointer;
  background: rgba(240,233,220,.35); border: 1px solid rgba(240,233,220,.5);
}
#deploy-map .dp:hover, #deploy-map .dp.sel {
  background: var(--accent); border-color: #fff; box-shadow: 0 0 8px rgba(255,154,60,.6);
}
#deploy-map .dp.obj {
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  background: rgba(100,100,100,.5); font: 700 10px var(--font-num);
  color: #fff; display: flex; align-items: center; justify-content: center;
}
#deploy-map .dp.obj.mine { background: rgba(74,159,255,.75); }
#deploy-map .dp.obj.locked { opacity: 0.35; cursor: not-allowed; }

/* ---------- 回合结算 ---------- */
#round-overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,7,5,.72); pointer-events: none;
}
#round-overlay .round-box { text-align: center; }
#round-title {
  font: 700 48px var(--font-num); letter-spacing: 8px;
  color: var(--accent); text-shadow: 0 0 24px rgba(255,154,60,.4);
}
#round-title.lose { color: #ff4b3a; text-shadow: 0 0 24px rgba(255,75,58,.35); }
#round-sub { margin-top: 8px; font: 500 16px var(--font-label); letter-spacing: 3px; color: var(--ink-dim); }
#round-score { margin-top: 18px; font: 700 28px var(--font-num); letter-spacing: 4px; }
#round-timer { margin-top: 22px; font: 500 13px var(--font-label); letter-spacing: 2px; color: var(--ink-dim); }

/* ---------- 左上信息 ---------- */
#topbar { position: absolute; top: 22px; left: 26px; }
.server-tag {
  font: 700 17px var(--font-label); letter-spacing: 3px;
  color: var(--ink); padding: 4px 14px 4px 10px;
  background: var(--strip);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  border-left: 2px solid var(--accent);
}
.server-sub { font: 500 13px var(--font-label); letter-spacing: 1.5px; color: var(--ink-dim); margin: 5px 0 0 12px; }
.my-team-tag {
  margin: 8px 0 0 10px;
  display: inline-block;
  font: 700 14px var(--font-label); letter-spacing: 2px;
  padding: 3px 12px 3px 8px;
  border-left: 3px solid;
  background: var(--strip);
}
.my-team-tag.blue { color: #7ec0ff; border-color: #4a9fff; }
.my-team-tag.orange { color: #ffb06a; border-color: #ff9a3c; }
.team-legend {
  margin: 4px 0 0 12px;
  font: 500 12px var(--font-label); letter-spacing: 1px; color: var(--ink-dim);
}
.team-legend .tl.blue { color: #7ec0ff; }
.team-legend .tl.orange { color: #ffb06a; }
.team-badge {
  display: inline-block; font: 700 11px var(--font-label); letter-spacing: 1px;
  padding: 0 5px; margin-right: 6px; vertical-align: 1px;
}
.team-badge.blue { color: #7ec0ff; background: rgba(74,159,255,.15); }
.team-badge.orange { color: #ffb06a; background: rgba(255,154,60,.15); }
#scoreboard tr.ally td:first-child { box-shadow: inset 3px 0 0 #4a9fff; }
#scoreboard tr.enemy td:first-child { box-shadow: inset 3px 0 0 #ff9a3c; }
.feed-row .k.ally { color: #7ec0ff; }
.feed-row .k.enemy { color: #ffc090; }
.feed-row .v.ally { color: #7ec0ff; }
.feed-row .v.enemy { color: var(--danger); }

/* ---------- 击杀信息流 ---------- */
#killfeed { position: absolute; top: 22px; right: 26px; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.feed-row {
  font: 600 14px var(--font-label); letter-spacing: 1px;
  background: var(--strip); padding: 3px 12px;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%);
  transition: opacity .6s;
  animation: feed-in .28s ease-out;
}
.feed-row.fade { opacity: 0; }
.feed-row .k { color: var(--ink); }
.feed-row .wpn { color: var(--accent); margin: 0 8px; font-size: 12px; }
.feed-row .v { color: var(--danger); }

/* ---------- 提示 ---------- */
#toasts { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.toast {
  font: 500 13px var(--font-label); letter-spacing: 2px; color: var(--ink-dim);
  background: var(--strip); padding: 3px 16px; transition: opacity .6s;
}
.toast.fade { opacity: 0; }

#kill-confirm {
  position: absolute; left: 50%; top: 54%; transform: translateX(-50%);
  text-align: center; opacity: 0; pointer-events: none;
  min-width: 220px;
}
#kill-confirm-title {
  font: 700 26px var(--font-num); letter-spacing: 6px; color: var(--accent);
  text-shadow: 0 0 18px rgba(255, 154, 60, .55), 0 2px 4px rgba(0,0,0,.85);
  text-transform: uppercase;
}
#kill-confirm-sub {
  margin-top: 4px;
  font: 600 13px var(--font-label); letter-spacing: 3px; color: var(--ink-dim);
}
#kill-confirm.show { animation: confirm-pop 1.85s ease-out forwards; }
#kill-confirm.show.multi #kill-confirm-title { color: #ff6a3c; letter-spacing: 5px; }
#kill-confirm.show.ace #kill-confirm-title { color: #ffd27a; }
@keyframes confirm-pop {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.86); }
  10% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.08); }
  20% { transform: translateX(-50%) scale(1); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.98); }
}
#kill-score {
  position: absolute; left: 50%; top: 62%; transform: translateX(-50%);
  font: 700 18px var(--font-num); letter-spacing: 2px; color: var(--ink);
  text-shadow: 0 0 10px rgba(255,154,60,.35), 0 1px 3px #000;
  opacity: 0; pointer-events: none;
}
#kill-score.show { animation: score-rise 1.5s ease-out forwards; }
@keyframes score-rise {
  0% { opacity: 0; transform: translateX(-50%) translateY(6px); }
  15% { opacity: 1; }
  70% { opacity: 1; transform: translateX(-50%) translateY(-10px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-18px); }
}

@keyframes feed-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---------- 生命 ---------- */
#hp-panel { position: absolute; left: 26px; bottom: 24px; }
#hp-num {
  font: 700 54px/1 var(--font-num); color: var(--ink);
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
}
.hp-track {
  width: 210px; height: 5px; margin-top: 6px;
  background: rgba(240,233,220,.16);
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
#hp-bar {
  width: 100%; height: 100%; background: var(--ink);
  transform-origin: left; transition: transform .18s ease-out;
}
#hp-bar.low { background: var(--danger); }
.hp-label { font: 600 12px var(--font-label); letter-spacing: 3px; color: var(--ink-dim); margin-top: 5px; }

/* ---------- 武器 ---------- */
#wpn-panel { position: absolute; right: 26px; bottom: 24px; text-align: right; }
.wpn-title { font: 600 16px var(--font-label); letter-spacing: 2px; color: var(--ink-dim); }
.wpn-title #wpn-name { color: var(--ink); margin-right: 8px; }
.ammo-row { font: 700 54px/1 var(--font-num); margin-top: 2px; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
#ammo-mag.low { color: var(--danger); }
.ammo-sep { color: var(--ink-dim); font-size: 34px; margin: 0 8px; vertical-align: 6px; }
#ammo-res { font-size: 30px; color: var(--ink-dim); }
.nade-row {
  margin-top: 4px;
  font: 600 13px var(--font-label);
  letter-spacing: 1px;
  color: var(--ink-dim);
}
.nade-row b { color: var(--accent); font-family: var(--font-num); }
#nade-count {
  font: 700 18px var(--font-num);
  color: var(--ink);
  margin: 0 2px;
}
#nade-count.low { color: var(--danger); }
.wpn-keys { font: 500 11px var(--font-label); letter-spacing: 2px; color: rgba(201,192,174,.55); margin-top: 6px; }

/* ---------- 载具面板 ---------- */
#veh-panel {
  position: absolute; left: 26px; bottom: 128px;
  background: var(--strip); padding: 10px 18px 12px 14px;
  border-left: 2px solid var(--accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
#veh-name { font: 600 16px var(--font-label); letter-spacing: 2px; }
.veh-hp-row { margin: 2px 0 4px; }
#veh-hp-num {
  font: 700 14px var(--font-num);
  letter-spacing: 1px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.veh-track {
  width: 190px; height: 5px; margin-top: 7px;
  background: rgba(240,233,220,.16);
}
.veh-track.slim { height: 3px; width: 150px; margin-top: 4px; }
#veh-hp-bar, #veh-wpn-bar {
  width: 100%; height: 100%; background: var(--ink);
  transform-origin: left; transition: transform .15s;
}
#veh-hp-bar.low { background: var(--danger); }
#veh-wpn-bar { background: var(--accent); transform: scaleX(0); }
#veh-wpn-bar.low { background: var(--danger); }
.veh-wpn-row { margin-top: 8px; font: 500 11px var(--font-label); letter-spacing: 2px; color: var(--ink-dim); }
#veh-keys { margin-top: 9px; font: 500 12px var(--font-label); letter-spacing: 1px; color: var(--ink-dim); }
#veh-keys b { color: var(--accent); font-family: var(--font-num); }

/* ---------- 进场操作卡片 ---------- */
#controls-card {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  background: rgba(13, 14, 10, .82); border-right: 2px solid var(--accent);
  padding: 18px 22px 14px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.cc-title { font: 700 17px var(--font-label); letter-spacing: 4px; margin-bottom: 12px; }
.cc-title span { color: var(--ink-dim); font-size: 11px; letter-spacing: 3px; margin-left: 8px; }
.cc-grid {
  display: grid; grid-template-columns: repeat(3, auto); gap: 8px 20px;
  font: 500 12.5px var(--font-label); letter-spacing: 1px; color: var(--ink-dim);
}
.cc-grid b { color: var(--ink); font-family: var(--font-num); margin-right: 5px; }
.cc-grid .cc-wide {
  grid-column: 1 / -1;
  font-size: 11.5px;
  color: rgba(201, 192, 174, 0.75);
  padding-top: 4px;
  border-top: 1px solid rgba(201, 192, 174, 0.12);
  margin-top: 2px;
}
.cc-hint { margin-top: 12px; font: 500 10.5px var(--font-label); letter-spacing: 2px; color: rgba(201,192,174,.5); text-align: right; }

/* ---------- 交互提示 ---------- */
#interact-hint {
  position: absolute; left: 50%; bottom: 21%; transform: translateX(-50%);
  font: 500 15px var(--font-label); letter-spacing: 2px; color: var(--ink);
  background: var(--strip); padding: 6px 20px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
#interact-hint b {
  color: var(--accent); font-family: var(--font-num); font-weight: 700;
  border: 1px solid var(--accent); padding: 0 6px; margin-right: 8px;
}

/* ---------- 受击方向 ---------- */
#dmg-dir {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  --ang: 0deg; opacity: 0;
}
#dmg-dir::before {
  content: ''; position: absolute; left: -30px; top: -110px;
  width: 60px; height: 22px;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,75,58,.9), transparent 70%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform-origin: 50% 110px;
  transform: rotate(var(--ang));
}
#dmg-dir.show { animation: dmg-fade 1s ease-out forwards; }
@keyframes dmg-fade { 0% { opacity: 1; } 100% { opacity: 0; } }

#vignette {
  position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(140, 10, 5, .55) 100%);
}

/* ---------- 狙击镜 ---------- */
#scope-overlay { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
#scope-overlay::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 31%, rgba(4,4,3,.985) 33.5%);
}
.scope-ring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(66vh, 66vw); height: min(66vh, 66vw);
  border-radius: 50%; border: 2px solid rgba(240,233,220,.25);
}
.scope-cross { position: absolute; background: rgba(10,10,8,.9); }
.scope-cross.h { left: 0; right: 0; top: 50%; height: 1.5px; }
.scope-cross.v { top: 0; bottom: 0; left: 50%; width: 1.5px; }

/* ---------- 计分板 ---------- */
#scoreboard {
  position: fixed; inset: 0; z-index: 14; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 8, 6, .45);
}
.board-inner {
  min-width: 480px; background: rgba(13, 14, 10, .88);
  border-top: 2px solid var(--accent);
  padding: 22px 34px 26px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
.board-title { font: 700 22px var(--font-label); letter-spacing: 4px; margin-bottom: 16px; }
.board-title span { color: var(--ink-dim); font-size: 13px; letter-spacing: 3px; margin-left: 10px; }
#scoreboard table { width: 100%; border-collapse: collapse; }
#scoreboard th {
  font: 600 12px var(--font-label); letter-spacing: 2px; color: var(--ink-dim);
  text-align: left; padding: 4px 14px; border-bottom: 1px solid var(--line);
}
#scoreboard td { font: 600 16px var(--font-num); padding: 5px 14px; }
#scoreboard td:not(:first-child), #scoreboard th:not(:first-child) { text-align: right; }
#scoreboard tr.me td { color: var(--accent); }
.bot-tag {
  font: 600 10px var(--font-label); font-style: normal; letter-spacing: 1px;
  color: var(--ink-dim); border: 1px solid var(--line); padding: 0 4px; margin-left: 8px; vertical-align: 2px;
}

/* ---------- 死亡画面 ---------- */
#death-screen {
  position: fixed; inset: 0; z-index: 16;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(30,4,2,.35), rgba(12,3,2,.82));
  animation: death-in .5s ease-out;
}
@keyframes death-in { from { opacity: 0; } to { opacity: 1; } }
.death-inner { text-align: center; }
.death-title {
  font: 700 84px/1 var(--font-label); letter-spacing: 28px; text-indent: 28px;
  color: var(--danger); text-shadow: 0 0 30px rgba(255,75,58,.35);
}
.death-sub { font: 600 15px var(--font-label); letter-spacing: 8px; color: var(--ink-dim); margin-top: 8px; }
.death-by { font: 500 17px var(--font-label); letter-spacing: 2px; color: var(--ink-dim); margin-top: 34px; }
.death-by span { color: var(--ink); font-weight: 700; }
#death-timer { font: 700 30px var(--font-num); color: var(--ink-dim); margin-top: 10px; min-height: 38px; }
#redeploy-btn {
  margin-top: 18px; pointer-events: auto; cursor: pointer;
  font: 700 19px var(--font-label); letter-spacing: 5px; color: rgba(240,233,220,.4);
  background: transparent; border: 1px solid rgba(240,233,220,.25);
  padding: 12px 44px;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: all .2s;
}
#redeploy-btn.ready { color: #141209; background: var(--accent); border-color: var(--accent); }
#redeploy-btn.ready:hover { background: #ffb367; }

/* ---------- 暂停 / 断线 ---------- */
#pause-overlay, #disconnect-overlay {
  position: fixed; inset: 0; z-index: 18; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 8, 6, .55); backdrop-filter: blur(2px);
}
.pause-box { text-align: center; }
.pause-title { font: 700 40px var(--font-label); letter-spacing: 10px; }
.pause-sub { font: 500 14px var(--font-label); letter-spacing: 3px; color: var(--ink-dim); margin-top: 12px; }

/* ==================== 主菜单 ==================== */
#menu {
  position: fixed; inset: 0; z-index: 20;
  background: linear-gradient(100deg, rgba(10, 10, 7, .93) 0%, rgba(10, 10, 7, .78) 34%, rgba(10,10,7,.12) 62%, rgba(10,10,7,0) 80%);
  display: flex;
}
.menu-left {
  width: min(460px, 92vw); height: 100%;
  padding: 7vh 0 5vh 5vw;
  display: flex; flex-direction: column; justify-content: space-between;
}
.brand-line { width: 64px; height: 3px; background: var(--accent); margin-bottom: 20px; }
.menu-brand h1 {
  font: 700 64px/1 var(--font-label); letter-spacing: 10px; color: var(--ink);
}
.brand-cn { font: 600 30px var(--font-label); letter-spacing: 26px; color: var(--accent); margin-top: 6px; }
.brand-sub { font: 500 13px var(--font-label); letter-spacing: 4px; color: var(--ink-dim); margin-top: 14px; }

.menu-form { max-width: 330px; }
.field-label { font: 600 13px var(--font-label); letter-spacing: 4px; color: var(--ink-dim); display: block; margin-bottom: 8px; }
#name-input {
  width: 100%; background: rgba(240,233,220,.07);
  border: none; border-bottom: 2px solid rgba(240,233,220,.3);
  color: var(--ink); font: 600 22px var(--font-label); letter-spacing: 2px;
  padding: 10px 14px; outline: none; transition: border-color .2s;
}
#name-input:focus { border-bottom-color: var(--accent); }
#name-input::placeholder { color: rgba(201,192,174,.4); }

.quality-row { display: flex; gap: 8px; }
.quality-row label { flex: 1; cursor: pointer; }
.quality-row input { display: none; }
.quality-row span {
  display: block; text-align: center; padding: 9px 0;
  font: 600 15px var(--font-label); letter-spacing: 3px; color: var(--ink-dim);
  background: rgba(240,233,220,.06); border: 1px solid transparent;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  transition: all .15s;
}
.quality-row input:checked + span { color: #141209; background: var(--ink); font-weight: 700; }

#deploy-btn {
  width: 100%; margin-top: 34px; cursor: pointer;
  font: 700 21px var(--font-label); letter-spacing: 6px;
  color: #141209; background: var(--accent); border: none;
  padding: 15px 0;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  transition: background .15s, transform .1s;
}
#deploy-btn:hover:not(:disabled) { background: #ffb367; }
#deploy-btn:active:not(:disabled) { transform: scale(.985); }
#deploy-btn:disabled { opacity: .55; cursor: wait; }
#menu-error { min-height: 20px; margin-top: 10px; font: 500 14px var(--font-label); color: var(--danger); letter-spacing: 1px; }

.menu-keys {
  display: grid; grid-template-columns: repeat(3, auto); gap: 7px 22px;
  font: 500 12.5px var(--font-label); letter-spacing: 1px; color: rgba(201,192,174,.75);
  max-width: 400px;
}
.menu-keys b { color: var(--ink); font-family: var(--font-num); margin-right: 6px; }

@media (max-width: 720px) {
  .menu-keys { grid-template-columns: repeat(2, auto); }
  .death-title { font-size: 56px; letter-spacing: 16px; }
  #hp-num, .ammo-row { font-size: 42px; }
}