/* ============================================================================
 * WebRadar —— 战术雷达界面样式
 * 暗色军事风格 / 全屏地图 / 悬浮 HUD / 桌面 + 手机自适应
 * ========================================================================== */

/* ==================== 基础重置 ==================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* 表面与文字 */
  --bg: #05070a;
  --surface: rgba(11, 15, 19, 0.5);
  --surface-solid: #0b0f13;
  --surface-2: rgba(20, 26, 32, 0.55);
  --surface-3: rgba(30, 38, 46, 0.65);
  --border: rgba(122, 154, 176, 0.16);
  --border-strong: rgba(122, 154, 176, 0.3);
  --text: #e6eef4;
  --text-dim: #8ea0ad;
  --text-mute: #64757f;

  /* 主题色（选中态、开关、焦点框等）；改主题只需改 --accent-rgb */
  --accent-rgb: 255, 180, 0;
  --accent: rgb(var(--accent-rgb));

  /* 语义色：--ok 只表示“正常/健康”（在线、血条、已保存），不随主题变 */
  --ok: #23c55e;
  --warn: #ffc53d;
  --danger: #ff5c5c;
  --info: #5ab5ff;
  --gold: #ffc53d;
  --violet: #a855f7;

  /* 尺寸 */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --panel-w: 320px;
  --panel-w-left: 168px;
  --gap: 12px;
  --topbar-h: 46px;
  --bottombar-h: 48px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.45);
  --blur: saturate(140%) blur(14px);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --mono: 'SFMono-Regular', 'JetBrains Mono', Consolas, 'Liberation Mono', monospace;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  /* 禁止页面整体缩放：只允许滚动，双指/双击缩放交给地图自己处理 */
  touch-action: pan-x pan-y;
}

button,
select,
input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ==================== 地图 ==================== */
#map {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #06090c;
}

/* 非对局地图（大厅 / 未知地图）时的占位提示：盖住空白地图 */
.map-waiting {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(90, 181, 255, 0.06), transparent 62%),
    #06090c;
}

.map-waiting[hidden] {
  display: none;
}

.map-waiting-card {
  display: grid;
  gap: 6px;
  padding: 18px 26px;
  text-align: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.map-waiting-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
}

.map-waiting-sub {
  font-size: 12.5px;
  color: var(--text-mute);
}

.leaflet-container {
  background: #06090c;
  font-family: var(--font);
  outline: none;
  /* 地图自己处理手势（缩放/拖动），浏览器不要接管 */
  touch-action: none;
}

/* 瓦片保持官方原图：不加任何滤镜/遮罩（地图背景仅用于避免加载时的白边） */
.leaflet-container {
  background: #06090c;
}

/* ==================== HUD 容器 ==================== */
.hud {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.hud > * {
  pointer-events: auto;
}
@supports (height: 100dvh) {
  #map, .hud { bottom: auto; height: 100dvh; }
}

/* ==================== 顶部状态栏 ==================== */
.topbar {
  position: absolute;
  top: var(--gap);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100vw - 24px);
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-sm);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 6px;
  border-right: 1px solid var(--border);
  margin-right: 4px;
  min-width: 0;
}

.topbar-logo {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.9), rgba(170, 100, 0, 0.9));
  color: #04120b;
  flex: none;
}

.topbar-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar-map {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.topbar-sub {
  font-size: 10.5px;
  color: var(--text-mute);
  white-space: nowrap;
}

.stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  white-space: nowrap;
}

.stat + .stat {
  margin-left: 2px;
}

.stat-icon {
  display: grid;
  place-items: center;
  color: var(--text-dim);
  flex: none;
}

.stat-label {
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stat-value {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.stat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 8px currentColor;
  color: var(--danger);
  flex: none;
}

.stat-dot.online {
  background: var(--ok);
  color: var(--ok);
  animation: pulse 2.4s ease-in-out infinite;
}

.stat-dot.warn {
  background: var(--warn);
  color: var(--warn);
}

.stat.online .stat-value {
  color: var(--ok);
}

.stat.enemy .stat-icon {
  color: var(--danger);
}

.stat.enemy .stat-value {
  color: var(--danger);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 6px;
  margin-left: 2px;
  border-left: 1px solid var(--border);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-color: var(--border);
}

.icon-btn:active {
  transform: scale(0.95);
}

.icon-btn.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.35);
}

.icon-btn[hidden] {
  display: none;
}

/* ==================== 悬浮面板（玩家列表 / 高价值物品） ==================== */
.panel {
  position: absolute;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  background: rgba(11, 15, 19, 0.42);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0.32, 1), opacity 0.18s ease;
}

/* 两个面板都垂直居中于视口（移动端改为全高抽屉，见下方媒体查询） */
.panel-right {
  top: 50%;
  right: var(--gap);
  width: var(--panel-w);
  transform: translateY(-50%);
  max-height: calc(100vh - var(--topbar-h) - var(--bottombar-h) - 56px);
}

.panel-left {
  top: 50%;
  left: var(--gap);
  width: var(--panel-w-left);
  transform: translateY(-50%);
  /* 手机端/小屏：列表短一点，尽量不盖住地图 */
  max-height: min(42vh, 320px);
}

.panel.collapsed {
  display: none;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  flex: none;
}

.panel-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 7px;
}

.panel-title svg {
  color: var(--text-dim);
}

.panel-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-variant-numeric: tabular-nums;
}

.panel-toggle {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--text-mute);
}

.panel-toggle:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}

.panel-body::-webkit-scrollbar {
  width: 7px;
}

.panel-body::-webkit-scrollbar-track {
  background: transparent;
}

.panel-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 4px;
}

.panel-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.24);
}

.empty-state {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 18px 10px;
  text-align: center;
  color: var(--text-mute);
  font-size: 12.5px;
}

.empty-state svg {
  opacity: 0.5;
}

/* ==================== 玩家列表 ==================== */
.team-group {
  position: relative;
  margin-bottom: 8px;
  padding-left: 9px;
}

.team-group:last-child {
  margin-bottom: 2px;
}

.team-group::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 3px;
  background: var(--team-color, #2a343a);
  box-shadow: 0 0 10px var(--team-color, transparent);
}

.team-group.own::before {
  width: 4px;
}

.team-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 5px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.team-head .team-name {
  color: var(--team-color, var(--text-dim));
  font-weight: 700;
}

.team-head .team-tag {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.team-head .own-tag {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
}

.player-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.player-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.player-row.selected {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--team-color, var(--border-strong));
}

.player-row.dead {
  opacity: 0.42;
  filter: grayscale(0.75);
}

.player-row.fading {
  opacity: 0.35;
}

.player-row.self {
  background: rgba(var(--accent-rgb), 0.08);
}

.avatar {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: none;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid var(--team-color, var(--border-strong));
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.player-main {
  flex: 1;
  min-width: 0;
  align-self: center;
}

.player-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 15px;
  line-height: 1.2;
}

/* 玩家列表只显示昵称，沿用原干员名的样式；状态标签紧跟在昵称后面 */
.player-name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}

.player-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  min-height: 17px;
  font-size: 10.5px;
  color: var(--text-mute);
}

.hp {
  display: flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-dim);
}

.hp-bar {
  width: 42px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.hp-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--ok);
  transition: width 0.25s ease, background 0.25s ease;
}

.hp-fill.mid { background: var(--warn); }
.hp-fill.low { background: var(--danger); }

.equip-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.equip {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--lv-color, var(--text-mute));
}

.equip svg {
  width: 12px;
  height: 12px;
}

.equip.empty {
  color: rgba(255, 255, 255, 0.16);
}

.weapon {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding-left: 6px;
  color: var(--text-dim);
}

.weapon svg {
  width: 20px;
  height: 20px;
  opacity: 0.9;
}

.weapon-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 20px;
  flex: none;
}

.weapon-icon img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.weapon-name {
  font-size: 10.5px;
  max-width: 62px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-mute);
}

/* 死亡 / 撤离 标签：跟在昵称后面，随名字行垂直居中 */
.status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  align-self: center;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
  box-sizing: border-box;
  background: rgba(255, 92, 92, 0.16);
  color: var(--danger);
  box-shadow: inset 0 0 0 1px rgba(255, 92, 92, 0.25);
}

.status-tag.dying {
  background: rgba(255, 197, 61, 0.16);
  color: var(--warn);
  box-shadow: inset 0 0 0 1px rgba(255, 197, 61, 0.25);
}

.status-tag.extracted {
  background: rgba(90, 181, 255, 0.16);
  color: var(--info);
  box-shadow: inset 0 0 0 1px rgba(90, 181, 255, 0.25);
}

/* ==================== 高价值物品 ==================== */
/* 左侧面板只有物品列表：一行一项（图标 + 名称 + 价值），尽量不遮挡地图 */
.panel-left .panel-body {
  padding: 4px;
}

.item-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 6px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
}

/* 点击高亮：叠一层金色，用 opacity 淡入淡出，不会被 hover 底色盖掉 */
.item-row::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 197, 61, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 197, 61, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

.item-row:hover,
.item-row.hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 197, 61, 0.28);
}

.item-row.selected::after {
  opacity: 1;
}

.item-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  /* 按明确等级着色，使用旧容器的深色半透明底框，不使用鲜亮等级色实底。 */
  padding: 3px;
  border-radius: 4px;
  flex: none;
  color: #ffffff;
  background: var(--item-icon-bg, rgba(40, 44, 48, 0.6));
  border: 1px solid var(--item-icon-border, #4b5563);
  overflow: hidden;
}

/* 绿/橙金/红沿用旧容器的 palette.normal/orange/red；白/蓝/紫为同风格深色扩展。 */
.item-icon[data-level="1"], .filter-row-icon[data-level="1"] { --item-icon-bg: rgba(89, 93, 96, 0.6); --item-icon-border: #999fa5; }
.item-icon[data-level="2"], .filter-row-icon[data-level="2"] { --item-icon-bg: rgba(19, 59, 40, 0.6); --item-icon-border: rgb(19, 59, 40); }
.item-icon[data-level="3"], .filter-row-icon[data-level="3"] { --item-icon-bg: rgba(30, 48, 74, 0.6); --item-icon-border: #31527a; }
.item-icon[data-level="4"], .filter-row-icon[data-level="4"] { --item-icon-bg: rgba(60, 39, 79, 0.6); --item-icon-border: #654280; }
.item-icon[data-level="5"], .filter-row-icon[data-level="5"] { --item-icon-bg: rgba(128, 76, 39, 0.6); --item-icon-border: #d1824e; }
.item-icon[data-level="6"], .filter-row-icon[data-level="6"] { --item-icon-bg: rgba(102, 39, 39, 0.6); --item-icon-border: #762324; }

.item-icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.9;
}

/* 物品图尺寸/宽高比不一：让图片元素自身等比缩放并居中（不依赖 object-fit 也能正确） */
.item-icon img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.item-name {
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 价值放在名称下面一行 */
.item-value {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

/* ==================== 底部控制栏 ==================== */
.bottombar {
  position: absolute;
  bottom: var(--gap);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-sm);
  max-width: calc(100vw - 24px);
  /* 高于移动端遮罩（1150），保证遮罩出现时底栏的齿轮等按钮仍可点 */
  z-index: 1120;
}

.view-select {
  position: relative;
  display: flex;
  align-items: center;
}

.view-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.view-btn:hover {
  background: rgba(255, 255, 255, 0.09);
}

.view-btn .chevron {
  color: var(--text-mute);
  transition: transform 0.18s ease;
}

.view-select.open .view-btn .chevron {
  transform: rotate(180deg);
}

.view-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 210px;
  max-height: 300px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
  display: none;
  z-index: 5;
}

.view-select.open .view-menu {
  display: block;
  animation: pop 0.14s ease;
}

@keyframes pop {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.view-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
  text-align: left;
}

.view-option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.view-option.active {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}

.view-option .team-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--team-color, #2a343a);
}

.divider-v {
  width: 1px;
  height: 24px;
  background: var(--border);
  flex: none;
}

.bottombar .icon-btn {
  width: 36px;
  height: 36px;
}

/* ==================== 地图标记 ==================== */
/* 锚点即圆点中心：容器 0×0，子元素相对锚点定位
   注意：不设置 position，交给 Leaflet 的 .leaflet-marker-icon（absolute）控制 */
.pm,
.im {
  width: 0;
  height: 0;
  background: none;
  border: 0;
}

.pm {
  --tc: #e05252;
  --tc-soft: rgba(224, 82, 82, 0.75);
  transition: opacity 0.4s ease;
}

.pm.fading {
  opacity: 0.15;
}

/* 中心圆球：直径26px，背景为队伍色彩 */
.pm-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--tc);
  border: 2.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 40; /* 头像最高：头像 40 > 箭头 30 > 标签 20/18 */
}

.pm-dot-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.pm-dot-num {
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  user-select: none;
}

.pm-core {
  display: none;
}

/* 自己 */
.pm.self .pm-dot {
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 5px var(--tc-soft), 0 0 12px var(--tc);
  animation: selfPulse 2.2s ease-out infinite;
}

@keyframes selfPulse {
  0% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px var(--tc-soft), 0 0 12px var(--tc); }
  70% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 0 0 9px rgba(255, 255, 255, 0), 0 0 12px var(--tc); }
  100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px var(--tc-soft), 0 0 12px var(--tc); }
}

/* 被跟随的玩家 */
.pm.followed .pm-dot {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 5px rgba(90, 181, 255, 0.5), 0 0 14px var(--tc);
}

.pm-badge {
  display: none !important;
  pointer-events: none;
}

/* 朝向指示：以头像中心旋转，箭头完全位于头像外侧。 */
.pm-arrow {
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  transform-origin: 50% 50%;
  pointer-events: none;
  display: none;
  z-index: 30; /* 低于头像，高于名称、装备和武器标签 */
}

.pm.show-arrow .pm-arrow {
  display: block;
}

/* 触摸放大点击区：手指远没有 20px 圆点那么准，
   点偏一点就会落到地图空白上（那会解除跟随）。
   用一个透明圆盘把可点范围扩到 ~44px。 */
.pm-hit {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent;
  z-index: 5;
}

.pm-arrow svg {
  width: 64px;
  height: 64px;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 1px 2px #000);
}

.pm-heading-outline {
  fill: none;
  stroke: #05090d;
  stroke-width: 3;
  stroke-linejoin: round;
}

.pm-heading-head {
  fill: var(--tc);
  stroke: #fff;
  stroke-width: 1;
  stroke-linejoin: round;
}

/* 上方装备栏：精简圆角胶囊 */
.pm-equip {
  position: absolute;
  left: 0;
  bottom: 14px;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 5px;
  background: rgba(16, 20, 24, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 1.5px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  z-index: 20;
  /* 纯展示，不参与命中：点它也算点这个玩家 */
  pointer-events: none;
}

.pm.show-equip .pm-equip {
  display: flex;
}

.pm-equip .eq {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  color: var(--lv-color, #38bdf8);
}

.pm-equip .eq svg {
  width: 12px;
  height: 12px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.pm-equip .eq .eq-val {
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* 血条（紧贴在圆球正下方，细线简洁） */
.pm-hp {
  position: absolute;
  left: 0;
  top: 13px;
  transform: translateX(-50%);
  width: 22px;
  height: 2.5px;
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  display: none;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.15);
  z-index: 15;
  pointer-events: none;
}

.pm.show-hp .pm-hp {
  display: block;
}

.pm-hp i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ok);
}

.pm-hp i.mid { background: var(--warn); }
.pm-hp i.low { background: var(--danger); }

/* 下方名称胶囊：头像 + 蜂医/名字 */
.pm-label {
  position: absolute;
  left: 0;
  top: 17px;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  /* 手机上没有 hover，名字胶囊也要能点（点它 = 跟随该玩家），不然只有 20px 的小圆点能点 */
  pointer-events: auto;
  cursor: pointer;
  white-space: nowrap;
  z-index: 20;
}

.pm.show-label .pm-label {
  display: flex;
}

.pm-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 3px;
  border-radius: 999px;
  background: var(--tc-soft);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.pm-team-num {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.pm-name {
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  letter-spacing: 0.02em;
}

/* 武器图标在名字正下方 */
.pm-weapon-tag {
  position: absolute;
  left: 0;
  top: 48px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  white-space: nowrap;
  z-index: 18;
}

.pm-weapon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1;
}

.pm-weapon-img {
  height: 14px;
  max-width: 48px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95)) brightness(1.25) contrast(1.1);
}

.pm-weapon-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 9px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  background: rgba(14, 20, 26, 0.65);
  padding: 1px 4px;
  border-radius: 3px;
  display: none;
}

.pm-weapon:not(:has(.pm-weapon-img)) .pm-weapon-text {
  display: inline-block;
}
.pm-weapon.text-mode .pm-weapon-img { display: none; }
.pm-weapon.text-mode .pm-weapon-text { display: inline-block; }

/* 物品标记 */
.im {
  --ic: #ffc53d;
}

.im-body {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--ic);
  transform: rotate(45deg);
  box-shadow: 0 0 0 1.5px rgba(4, 6, 8, 0.85), 0 0 8px rgba(255, 197, 61, 0.5);
}

.im.poi .im-body {
  border-radius: 50%;
  transform: none;
}

.im-label {
  position: absolute;
  left: 0;
  top: 8px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  pointer-events: none;
  white-space: nowrap;
}

.im-name {
  padding: 0 5px;
  border-radius: 4px 4px 0 0;
  background: rgba(4, 7, 9, 0.72);
  color: #ffffff;
  font-size: var(--item-name-size, 10.5px);
  font-weight: 600;
  line-height: 1.55;
}

.im-value {
  padding: 0 5px;
  border-radius: 0 0 4px 4px;
  background: rgba(4, 7, 9, 0.72);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.im.no-label .im-label {
  display: none;
}

.im.hover .im-body,
.im.flash .im-body {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 16px rgba(255, 197, 61, 0.9);
}

.im.flash .im-body {
  animation: imFlash 0.55s ease-in-out 4;
}

@keyframes imFlash {
  0%, 100% { transform: rotate(45deg) scale(1); }
  50% { transform: rotate(45deg) scale(1.8); }
}

.im.poi.flash .im-body,
.im.level-point.flash .im-body {
  animation-name: imFlashPoi;
}

@keyframes imFlashPoi {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.8); }
}

/* ==================== 移动端抽屉 ==================== */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 1150;
  background: rgba(2, 4, 6, 0.55);
  backdrop-filter: blur(2px);
  display: none;
}

.backdrop.show {
  display: block;
}

/* ==================== 轻提示 ==================== */
.hud > .toast-wrap {
  pointer-events: none;
}

.toast-wrap {
  position: absolute;
  left: 50%;
  bottom: calc(var(--bottombar-h) + var(--gap) + 18px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 30;
}

.toast {
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(9, 13, 17, 0.92);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.item {
  border-color: rgba(255, 197, 61, 0.4);
  color: #ffffff;
}

.toast.warn {
  border-color: rgba(255, 92, 92, 0.45);
  color: var(--danger);
}

/* ==================== 响应式 ==================== */
@media (max-width: 1180px) {
  :root {
    --panel-w: 300px;
    --panel-w-left: 156px;
  }

  .stat-label {
    display: none;
  }
}

@media (max-width: 900px) {
  :root {
    --gap: 8px;
    --topbar-h: 36px;
    --bottombar-h: 48px;
  }

  body {
    font-size: 13px;
  }

  .icon-btn {
    width: 28px;
    height: 28px;
  }

  /* 手机列表按需从底部打开，保留上方地图和底部工具栏。 */
  .panel.panel-left, .panel.panel-right {
    position: fixed;
    top: auto;
    bottom: calc(var(--bottombar-h) + var(--gap) * 2 + var(--safe-bottom));
    left: calc(var(--gap) + var(--safe-left));
    right: calc(var(--gap) + var(--safe-right));
    width: auto;
    max-height: min(44vh, 360px);
    max-height: min(44dvh, 360px);
    border-radius: var(--radius-lg);
    background: rgba(11, 15, 19, 0.96);
    z-index: 1160;
    transform: none;
  }
  .panel.panel-left:not(.open), .panel.panel-right:not(.open) { display: none; }
  .panel.panel-left .panel-head, .panel.panel-right .panel-head { min-height: 44px; padding: 6px 10px; }
  .panel.panel-left .panel-title { font-size: 13px; }
  .panel .panel-toggle { width: 32px; height: 32px; }
  .panel.panel-left .panel-body { padding: 4px; }
  .panel.panel-left .item-main { flex-direction: row; align-items: center; gap: 8px; }
  .panel.panel-left .item-name { flex: 1; }
  .panel.panel-left .item-value { flex: none; }

  .item-row {
    gap: 7px;
    padding: 6px 7px;
  }

  .item-icon {
    width: 26px;
    height: 26px;
  }

  .item-icon svg {
    width: 16px;
    height: 16px;
  }

  .item-name,
  .item-value {
    font-size: 12px;
  }

  .panel-left.collapsed {
    display: none;
  }

  .panel-head {
    padding: 12px;
  }

  .topbar {
    top: calc(var(--gap) + var(--safe-top));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: calc(100vw - 16px - var(--safe-left) - var(--safe-right));
    flex-wrap: wrap;
    z-index: 1165;
    justify-content: flex-start;
    padding: 4px 6px;
    min-height: var(--topbar-h);
  }

  .topbar-brand {
    max-width: 34vw;
  }

  .topbar-map {
    max-width: 30vw;
  }

  .stat {
    padding: 4px 6px;
    min-height: 28px;
    display: flex;
    align-items: center;
  }

  .topbar .stat.bandwidth {
    display: none;
  }

  .bottombar {
    bottom: calc(var(--gap) + var(--safe-bottom));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: calc(100vw - 16px - var(--safe-left) - var(--safe-right));
    justify-content: flex-start;
    padding: 4px 6px;
    min-height: var(--bottombar-h);
  }

  /* 移动端遮罩只盖到工具条上沿：底栏保持可见可点（齿轮再点一次即可关掉面板） */
  .backdrop {
    inset: 0 0 calc(var(--bottombar-h) + var(--gap) * 2 + var(--safe-bottom)) 0;
  }
  .toast-wrap { bottom: calc(var(--bottombar-h) + var(--gap) * 2 + var(--safe-bottom) + 10px); }
}

@media (max-width: 560px) {
  .topbar-brand .topbar-title {
    display: none;
  }

  .topbar-logo {
    width: 30px;
    height: 30px;
  }

  .stat {
    padding: 4px 6px;
    gap: 4px;
  }

  .stat-value {
    font-size: 12px;
  }

  .topbar .stat.online-stat .stat-label {
    display: none;
  }

  .bottombar .icon-btn {
    width: 32px;
    height: 32px;
  }

  .view-btn {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }

  .view-menu {
    min-width: 180px;
  }

  .pm-label .pm-name {
    font-size: 10.5px;
  }

  .pm-weapon {
    display: none;
  }
}

/* 触摸设备：加大点击区域 */
@media (hover: none) {
  .player-row {
    padding: 8px 7px;
  }

  /* 物品行保持紧凑（用户要求尽量不遮挡地图），但整行满宽可点，容易点中 */
  .item-row {
    padding: 5px 7px;
  }

  .icon-btn {
    width: 38px;
    height: 38px;
  }
}

/* 尊重系统的减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==================== 设置面板 ====================
 * 桌面：左侧分页导航 + 右侧单列分组卡片；手机（≤640px）：分页改为顶部横排。
 * 卡片内每行一项，行与行之间细线分隔；.cols-2 把短开关排成两列。
 * .settings-sub 是上一行开关的子选项（左侧主题色条），[data-depends] 在依赖开关关闭时变暗。 */
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  padding: 12px;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}

.settings-overlay.open {
  display: flex;
}

.settings-modal {
  width: min(760px, 100%);
  height: min(680px, calc(100svh - 24px));
  min-height: 0;
  background: rgba(14, 19, 23, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: pop 0.16s ease;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 12px 18px;
  border-bottom: 1px solid var(--border);
  flex: none;
}

.settings-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}

.settings-title .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.settings-close-btn {
  width: 32px;
  height: 32px;
}

.settings-body {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
}

/* ---------- 分页导航 ---------- */
.settings-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  border-right: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.14);
}

.settings-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.settings-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.settings-tab.active {
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.12);
}

.settings-tab.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.settings-tab-icon {
  display: flex;
  flex: none;
  color: var(--text-mute);
}

.settings-tab.active .settings-tab-icon {
  color: var(--accent);
}

.settings-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ---------- 内容区 ---------- */
.settings-content {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 20px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.settings-panel {
  display: none;
}

.settings-panel.active {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings-group {
  min-width: 0;
  margin: 0;
  transition: opacity 0.15s ease;
}

.settings-group-title {
  margin: 0 0 8px 2px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.settings-help {
  margin: -4px 2px 10px;
  color: var(--text-mute);
  font-size: 11.5px;
  line-height: 1.55;
}

/* 依赖的开关关闭时：变暗但仍可提前调整 */
[data-depends].is-off {
  opacity: 0.4;
}

/* ---------- 卡片与行 ---------- */
.settings-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
}

.settings-card > * + *,
.settings-sub > * + * {
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cols-2 > * + * {
  border-top: 0;
}

.cols-2 > :nth-child(n + 3) {
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.cols-2 > :nth-child(odd) {
  border-right: 1px solid rgba(255, 255, 255, 0.055);
}

/* 奇数项时最后一项独占整行：分隔线贯穿全宽，右侧不会留下没有边框的空格子 */
.cols-2 > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
  border-right: 0;
}

/* 子选项：左侧主题色条 + 稍暗底色，表示从属于上一行的开关 */
.settings-sub {
  background: rgba(0, 0, 0, 0.18);
  box-shadow: inset 3px 0 0 rgba(var(--accent-rgb), 0.45);
  transition: opacity 0.15s ease;
}

.settings-sub > .switch-row,
.settings-sub > .select-row {
  padding-left: 22px;
}

.settings-sub.cols-2 > :nth-child(even) {
  padding-left: 14px;
}

.settings-sub.flush {
  background: none;
  box-shadow: none;
}

.settings-sub.flush > .switch-row {
  padding-left: 14px;
}

.switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 44px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.14s ease;
}

.switch-row:hover {
  background: rgba(255, 255, 255, 0.035);
}

.switch-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.switch-row .switch-label {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
}

.switch-row .switch-hint {
  color: var(--text-mute);
  font-size: 11.5px;
  line-height: 1.4;
}

.switch {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.18s ease;
}

.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #dbe6ee;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s cubic-bezier(0.32, 0.72, 0.32, 1);
}

.switch-row input { position: absolute; width: 1px; height: 1px; opacity: 0; clip-path: inset(50%); }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 3px; }
.switch-row input:checked + .switch { background: rgba(var(--accent-rgb), 0.8); }
.switch-row input:checked + .switch::after { transform: translateX(16px); }

/* 开关行内的下拉框（如手持武器的显示方式）：DOM 在开关之后，靠 order 把开关排到最右 */
.switch-row .switch { order: 1; }

.switch-row-select {
  flex: none;
  width: 84px;
  height: 30px;
  margin-left: auto;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: #0b1014;
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
}

.switch-row-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* 每页顶部的总开关 */
.settings-master {
  transition: border-color 0.15s ease, background 0.15s ease;
}

.settings-master .switch-row {
  min-height: 58px;
  padding: 12px 16px;
}

.settings-master .switch-label {
  font-size: 14px;
  font-weight: 600;
}

.settings-master:has(input:checked) {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.06);
}

/* 下拉 / 数字输入：标签在左，控件在右 */
.select-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 7px 14px;
}

.select-row label {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
}

.select-row select,
.select-row input {
  flex: none;
  width: 168px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: #0b1014;
  color: var(--text);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.select-row select:focus-visible,
.select-row input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* 滑块：标签 | 滑块 | 数值 */
.range-row {
  display: grid;
  grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) 52px;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 8px 14px;
}

.range-row label {
  color: var(--text);
  font-size: 13px;
}

.range-row input[type='range'] {
  width: 100%;
  min-width: 0;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.range-row output {
  color: var(--text-dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.chips-row {
  padding: 11px 14px 12px;
}

.chips-row-label {
  margin-bottom: 9px;
  color: var(--text);
  font-size: 13px;
}

/* ---------- 底栏 ---------- */
.settings-footer {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px 10px 18px;
  border-top: 1px solid var(--border);
  color: var(--text-mute);
  font-size: 11.5px;
}

.settings-save-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}

@media (max-width: 640px) {
  .settings-overlay { padding: 8px; }
  .settings-modal { height: calc(100svh - 16px); }
  .settings-header { padding: 8px 8px 8px 14px; }
  .settings-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .settings-tabs {
    flex-direction: row;
    gap: 4px;
    padding: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .settings-tab { flex: 1; justify-content: center; gap: 6px; padding: 9px 4px; font-size: 12.5px; }
  .settings-tab.active::before { top: auto; bottom: 0; left: 22%; right: 22%; width: auto; height: 2px; border-radius: 2px 2px 0 0; }
  .settings-content { padding: 14px 12px 20px; }
  .settings-panel.active { gap: 18px; }
  .cols-2 { grid-template-columns: minmax(0, 1fr); }
  .cols-2 > :nth-child(odd) { border-right: 0; }
  .cols-2 > * + * { border-top: 1px solid rgba(255, 255, 255, 0.055); }
  .settings-sub.cols-2 > :nth-child(even) { padding-left: 22px; }
  .settings-sub.flush.cols-2 > * { padding-left: 14px; }
  .switch-row { min-height: 48px; }
  .switch { width: 40px; height: 22px; }
  .switch::after { width: 18px; height: 18px; }
  .switch-row input:checked + .switch::after { transform: translateX(18px); }
  .select-row select, .select-row input { width: 136px; height: 34px; }
  .range-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 10px 14px; }
  .range-row input[type='range'] { grid-column: 1 / -1; grid-row: 2; height: 24px; }
}

@media (max-width: 380px) {
  .settings-tab-icon { display: none; }
}

/* ==================== 精简地图信息与工具栏 ==================== */
.topbar, .bottombar { width: max-content; }
.topbar .stat[hidden] { display: none; }
.stat.enemy .stat-label, #stat-enemy .stat-label { display: inline; }
.bottombar { gap: 6px; }
.bottombar .view-btn { max-width: 160px; }
#view-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn:focus-visible, .view-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.panel-left { width: 182px; max-height: min(46vh, 360px); }
.panel-left .panel-head { padding: 9px 10px; gap: 6px; }
.panel-left .panel-title { font-size: 12px; letter-spacing: 0; }
.panel-left .panel-count { padding: 1px 6px; }
.panel-left .panel-body { min-height: 0; scrollbar-color: var(--text-mute) transparent; }
.panel-scroll-hint { display: none; flex: none; justify-content: center; padding: 5px 8px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 10px; }
.panel-left.is-scrollable .panel-scroll-hint { display: flex; }
.pm-dot { width: 26px; height: 26px; border: 2px solid var(--tc); box-shadow: 0 1px 5px #000; }
.pm-dot-num { font-size: 9px; }
.pm.self .pm-dot { border-color: #fff; }
.pm.self .pm-dot-num { font-size: 20px; }
.pm.ai .pm-dot, .pm.boss .pm-dot { border-color: var(--tc); }
/* Fixed information lanes reserve space for the heading in every direction. */

.pm-label { left: 0; top: 20px; }
.pm-hp { top: 16px; }
/* Translucent glass with original label sizing; fixed lanes sit close to the portrait. */
.pm-equip, .pm-tag, .pm-weapon-text {
  background: rgba(18, 26, 32, .28);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}
.pm-equip { bottom: 18px; }
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .pm-equip, .pm-tag, .pm-weapon-text { background: rgba(18, 26, 32, .55); }
}
/* 磨砂背景包住两行，等级色条只属于第一行名称。 */
.im-label {
  background: rgba(18, 26, 32, .28);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  border: 0;
  border-radius: 4px;
  padding: 2px 3px;
}
.im-name, .im-value { background: none; border-radius: 0; padding: 0 2px; }
.im-name { border-left: 2px solid var(--ic); }
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .im-label { background: rgba(18, 26, 32, .55); }
}
.pm-tag { border: 0; border-left: 2px solid var(--tc); border-radius: 4px; padding: 3px 5px; gap: 4px; }
.pm-name { max-width: 68px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; font-weight: 500; letter-spacing: 0; }
.pm.self .pm-name, .pm.teammate .pm-name { font-weight: 700; }
.pm-team-num { width: auto; min-width: 12px; height: 12px; border: 0; border-radius: 0; background: none; color: var(--tc); font-variant-numeric: tabular-nums; }
.pm .pm-weapon-tag { display: none; top: 41px; }
.pm.show-weapon .pm-weapon-tag { display: flex; }
.im-body { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; box-shadow: 0 0 0 1px #05070a; }
.im::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; }
.im.level-point .im-body {
  width: var(--item-level-size, 18px);
  height: var(--item-level-size, 18px);
  margin: calc(var(--item-level-size, 18px) / -2) 0 0 calc(var(--item-level-size, 18px) / -2);
  background: none;
  transform: none;
  box-shadow: none;
}
.im.level-point.item-image .im-body {
  width: var(--item-image-size, 26px);
  height: var(--item-image-size, 26px);
  margin: calc(var(--item-image-size, 26px) / -2) 0 0 calc(var(--item-image-size, 26px) / -2);
}
.im-image { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 2px #000); }
/* leaflet.css 的 `.leaflet-container .leaflet-marker-pane img { width: auto }` 优先级更高，
   会让非正方形图片按高度撑开并贴左（偏心 / 溢出）。这里提高优先级，并用 flex 居中兜底。 */
.leaflet-marker-pane .im .im-body { display: flex; align-items: center; justify-content: center; }
.leaflet-marker-pane .im .im-image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.leaflet-marker-pane .pm .pm-dot-avatar { width: 100%; height: 100%; }
/* 地图容器只显示原图，不再添加底色、描边或内边距。 */
.im.level-point.container-image .im-body { background: none; border: 0; padding: 0; }
/* 尸体盒 SVG：已开启的盒子褪色变暗，未开启的保持原色 */
.im-deadbox { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 2px #000); }
.im.opened .im-deadbox { filter: grayscale(0.85) brightness(0.75) drop-shadow(0 1px 2px #000); opacity: 0.6; }
.im.level-point .im-label { top: calc(var(--item-level-size, 18px) / 2 + 3px); }
.im.level-point.item-image .im-label { top: calc(var(--item-image-size, 26px) / 2 + 3px); }
.im-label [hidden] { display: none; }
.im.poi .im-label { display: none; }
.im.poi:hover .im-label, .im.poi.flash .im-label { display: flex; }
@media (max-width: 900px) {
  .panel-left { width: 158px; max-height: min(42vh, 320px); }
}
@media (max-width: 560px) {
  .topbar { gap: 0; }
  .topbar-actions { gap: 2px; padding-left: 5px; }
  .topbar .stat { padding: 4px 5px; }
  .bottombar { gap: 4px; }
  .bottombar .view-btn { max-width: 126px; }
  .panel-left { width: 140px; }
  .panel-left .panel-title { font-size: 11px; }
  .pm.show-weapon .pm-weapon { display: inline-flex; }
}
@media (max-width: 380px) {
  .topbar .icon-btn { width: 30px; height: 36px; }
  .bottombar { gap: 2px; }
  .bottombar .view-btn { max-width: 110px; }
  .bottombar .divider-v { display: none; }
}

/* ==================== 用户可调尺寸 ====================
 * 设置面板的滑块写入 #map 上的 CSS 变量（见 radar.js SIZE_VARS），这里的回退值即默认尺寸。
 * 玩家标签的位置随头像半径推算，默认值与上面固定像素的布局完全一致。 */
.pm-dot { width: var(--pm-dot, 26px); height: var(--pm-dot, 26px); }
.pm-dot-num { font-size: calc(9px * var(--pm-k, 1)); }
.pm.self .pm-dot-num { font-size: calc(20px * var(--pm-k, 1)); }
.pm-arrow {
  width: calc(64px * var(--pm-k, 1));
  height: calc(64px * var(--pm-k, 1));
  margin: calc(-32px * var(--pm-k, 1)) 0 0 calc(-32px * var(--pm-k, 1));
}
.pm-arrow svg { width: 100%; height: 100%; }
.pm-hit { width: max(44px, calc(var(--pm-dot, 26px) + 18px)); height: max(44px, calc(var(--pm-dot, 26px) + 18px)); }
.pm-hp { top: calc(var(--pm-dot, 26px) / 2 + 3px); width: calc(22px * var(--pm-k, 1)); }
.pm-label { top: calc(var(--pm-dot, 26px) / 2 + 7px); }
.pm-equip { bottom: calc(var(--pm-dot, 26px) / 2 + 5px); }
.pm .pm-weapon-tag { top: calc(var(--pm-dot, 26px) / 2 + 16px + max(12px, var(--pm-name-size, 10px))); }
.pm-name { font-size: var(--pm-name-size, 10px); max-width: calc(var(--pm-name-size, 10px) * 6.8); }
.pm-team-num {
  font-size: var(--pm-name-size, 10px);
  min-width: calc(var(--pm-name-size, 10px) * 1.2);
  height: calc(var(--pm-name-size, 10px) * 1.2);
}
.pm-equip .eq svg { width: var(--pm-equip-size, 12px); height: var(--pm-equip-size, 12px); }
.pm-equip .eq .eq-val { font-size: var(--pm-equip-font, 10px); }
.pm-weapon-img { height: var(--pm-weapon-size, 14px); max-width: calc(var(--pm-weapon-size, 14px) * 3.43); }
.pm-weapon-text { font-size: var(--pm-weapon-font, 9px); }

.im-value { font-size: var(--item-value-size, 10px); }
.im.container .im-name, .im.container .im-value { font-size: var(--container-name-size, 10.5px); }
.im.poi:not(.container) .im-name, .im.poi:not(.container) .im-value { font-size: var(--poi-name-size, 10.5px); }
.im.poi:not(.level-point) .im-body {
  width: var(--poi-size, 7px);
  height: var(--poi-size, 7px);
  margin: calc(var(--poi-size, 7px) / -2) 0 0 calc(var(--poi-size, 7px) / -2);
}
.im.poi:not(.level-point) .im-label { top: calc(var(--poi-size, 7px) / 2 + 4.5px); }
.im.level-point.container-image .im-body {
  width: var(--container-image-size, 26px);
  height: var(--container-image-size, 26px);
  margin: calc(var(--container-image-size, 26px) / -2) 0 0 calc(var(--container-image-size, 26px) / -2);
}
.im.level-point.container-image .im-label { top: calc(var(--container-image-size, 26px) / 2 + 3px); }

/* 点位文字常驻：开关关闭的部分带 data-off，悬停或点击闪烁时仍完整显示 */
.im.poi.label-on .im-label { display: flex; }
.im.poi.label-on:not(:hover):not(.flash) .im-label [data-off] { display: none; }

/* 关注的物品：金色呼吸光圈；侧栏行名称前加星标 */
.im.watched .im-body::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid #ffd84d;
  box-shadow: 0 0 10px rgba(255, 216, 77, 0.7);
  pointer-events: none;
  animation: imWatch 1.6s ease-out infinite;
}
@keyframes imWatch {
  0% { transform: scale(0.85); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}
.item-row.watched .item-name::before { content: '★ '; color: #ffd84d; }

/* ==================== 设置面板：过滤 UI ==================== */
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.filter-chip.off { border-color: var(--border); background: transparent; color: var(--text-mute); text-decoration: line-through; }

.filter-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.filter-search {
  flex: 1 1 180px;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: #0b1014;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}
.filter-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.filter-seg { display: inline-flex; flex: none; max-width: 100%; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.filter-seg-btn {
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
}
.filter-seg-btn:last-child { border-right: 0; }
.filter-seg-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.filter-seg-btn.active { color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.filter-seg-btn b { margin-left: 2px; color: var(--text-mute); font-weight: 600; font-variant-numeric: tabular-nums; }
.filter-seg-btn.active b { color: inherit; }
.filter-seg-btn:focus-visible, .filter-chip:focus-visible, .filter-act:focus-visible, .container-chip:focus-visible, .settings-text-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.filter-list {
  max-height: 300px;
  margin: 0;
  background: rgba(255, 255, 255, 0.02);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.filter-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.filter-row:last-child { border-bottom: 0; }
.filter-row.watched { background: rgba(255, 216, 77, 0.06); }
.filter-row.blocked .filter-row-name { color: var(--text-mute); text-decoration: line-through; }
.filter-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 3px;
  border-radius: 5px;
  background: var(--item-icon-bg, rgba(40, 44, 48, 0.6));
  border: 1px solid var(--item-icon-border, #4b5563);
  color: var(--text-dim);
  overflow: hidden;
}
.filter-row-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.filter-row-main { flex: 1; min-width: 0; }
.filter-row-name { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.filter-row-meta { margin-top: 2px; overflow: hidden; color: var(--text-mute); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.filter-row-actions { display: flex; flex: none; gap: 4px; }
.filter-act {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-mute);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.filter-act:hover { color: var(--text); border-color: var(--border-strong); }
.filter-act-watch[aria-pressed="true"] { color: #ffd84d; border-color: rgba(255, 216, 77, 0.45); background: rgba(255, 216, 77, 0.12); }
.filter-act-block[aria-pressed="true"] { color: var(--danger); border-color: rgba(255, 92, 92, 0.45); background: rgba(255, 92, 92, 0.12); }
.filter-empty { padding: 18px 12px; color: var(--text-mute); font-size: 12px; text-align: center; }

.container-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.container-grid > .filter-empty { grid-column: 1 / -1; }
.container-tier { --tier: #6b8f7a; grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--text-dim); font-size: 10.5px; font-weight: 600; }
.container-tier:first-child { margin-top: 0; }
.container-tier::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--tier); }
.tier-red { --tier: #e5484d; }
.tier-orange { --tier: #e8954f; }
.tier-normal { --tier: #4f8f6a; }
.container-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--tier);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
}
.container-chip:hover { border-color: var(--border-strong); border-left-color: var(--tier); }
.container-chip.off { opacity: 0.4; filter: grayscale(1); }
.container-chip.off .container-chip-name { text-decoration: line-through; }
.container-chip-img { display: flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; color: var(--text-dim); }
.container-chip-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.container-chip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.container-chip-count { flex: none; padding: 1px 6px; border-radius: 999px; background: rgba(var(--accent-rgb), 0.15); color: var(--accent); font-size: 10px; font-variant-numeric: tabular-nums; }

.settings-footer-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-footer-actions { display: flex; flex: none; gap: 6px; }
.settings-text-btn {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.settings-text-btn:hover { color: var(--text); border-color: var(--border-strong); }
.settings-text-btn.danger:hover { color: var(--danger); border-color: rgba(255, 92, 92, 0.45); }

@media (max-width: 640px) {
  .filter-seg { width: 100%; }
  .filter-seg-btn { flex: 1; padding: 0 6px; }
  .filter-list { max-height: 46svh; }
  .container-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-footer-text { display: none; }
  .settings-footer-actions { margin-left: auto; }
}

/* ==================== 物品等级色效果（设置 → 物品 → 等级颜色效果） ====================
 * 颜色统一取 --ic（Core.levelColor），强度取 --item-fx。
 * 发光 / 描边用 drop-shadow，沿物品图片的实际轮廓，而不是方框。 */
.im.fx-glow .im-image {
  filter: drop-shadow(0 0 1px var(--ic)) drop-shadow(0 0 calc(var(--item-fx, 6px) / 2) var(--ic)) drop-shadow(0 0 var(--item-fx, 6px) var(--ic));
}
.im.fx-outline .im-image {
  filter:
    drop-shadow(calc(var(--item-fx, 6px) / 4) 0 0 var(--ic))
    drop-shadow(calc(var(--item-fx, 6px) / -4) 0 0 var(--ic))
    drop-shadow(0 calc(var(--item-fx, 6px) / 4) 0 var(--ic))
    drop-shadow(0 calc(var(--item-fx, 6px) / -4) 0 var(--ic))
    drop-shadow(0 1px 2px #000);
}
/* 光晕与底板画在图片后面的伪元素上 */
.im.fx-halo .im-body::before,
.im.fx-plate .im-body::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.im.fx-halo .im-body::before {
  inset: calc(var(--item-fx, 6px) * -1.2);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--ic) 0%, var(--ic) 35%, transparent 100%);
  opacity: 0.6;
}
.im.fx-plate .im-body::before {
  inset: -3px;
  border: 1.5px solid var(--ic);
  border-radius: 5px;
  background: rgba(12, 16, 20, 0.62);
  box-shadow: 0 0 var(--item-fx, 6px) var(--ic), inset 0 0 calc(var(--item-fx, 6px) * 1.5) var(--ic);
}

/* ==================== 锁定视角：距离 / 高度差 ==================== */
/* 玩家：放在头像右侧，避开上方装备栏和下方名称/武器标签；起点在朝向箭头外圈之外 */
.pm-dist {
  position: absolute;
  left: calc(24px * var(--pm-k, 1));
  top: 0;
  transform: translateY(-50%);
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(18, 26, 32, .55);
  border-left: 2px solid var(--tc);
  color: #ffffff;
  font-size: var(--pm-dist-size, 10px);
  font-weight: 600;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
  pointer-events: none;
  z-index: 19;
}
.pm-dist[hidden] { display: none; }

/* 物品 / 容器：标签最后一行 */
.im-dist {
  padding: 0 2px;
  color: #9fdcff;
  font-size: var(--item-dist-size, 10px);
  font-weight: 600;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.im.container .im-dist { font-size: var(--container-dist-size, 10px); }

/* ==================== 物品标签：紧凑样式 + 避让 ====================
 * 经典样式：.im-meta 为 display: contents，价值 / 距离仍各占一行（与旧版一致）。
 * 紧凑样式：名称一行（过长省略，悬停显示全名），价值与距离合并为第二行；
 *           等级色条从名称移到整块标签左侧，文字保持白色。 */
.im .im-meta { display: contents; }
.im.lbl-compact .im-label {
  padding: 1px 5px 1px 4px;
  border-left: 2px solid var(--ic);
  border-radius: 3px;
  background: rgba(12, 17, 22, .55);
}
.im.lbl-compact .im-name {
  max-width: 7.5em;
  padding: 0;
  border-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  line-height: 1.3;
}
.im.lbl-compact .im-meta { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.im.lbl-compact .im-value, .im.lbl-compact .im-dist { padding: 0; line-height: 1.3; }
.im.lbl-compact .im-dist { color: rgba(159, 220, 255, .9); font-weight: 500; }
.im.lbl-compact:hover .im-name, .im.lbl-compact.flash .im-name, .im.lbl-compact.hover .im-name { max-width: none; }

/* 被避让隐藏的标签：保留占位以便测量，悬停 / 列表悬停 / 点击闪烁时显示 */
.im.lbl-hidden .im-label { visibility: hidden; }
.im.lbl-hidden:hover .im-label, .im.lbl-hidden.hover .im-label, .im.lbl-hidden.flash .im-label { visibility: visible; }
.im:hover, .im.hover, .im.flash { z-index: 9000 !important; }

/* ==================== 视角菜单（自由视角 / 跟随自己 + 按队伍分组的玩家） ==================== */
.view-menu {
  width: 248px;
  min-width: 0;
  max-height: min(380px, 62svh);
  padding: 6px;
  background: rgba(14, 19, 24, 0.94);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.view-menu::-webkit-scrollbar { width: 6px; }
.view-menu::-webkit-scrollbar-track { background: transparent; }
.view-menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }

.view-mode, .view-player {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.view-mode { min-height: 36px; padding: 0 10px; font-size: 12.5px; font-weight: 600; }
.view-mode-icon { display: flex; flex: none; color: var(--text-mute); }
.view-mode-label { flex: none; }
.view-mode-sub { flex: 1; min-width: 0; overflow: hidden; color: var(--text-mute); font-size: 11px; font-weight: 500; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.view-mode:hover:not(:disabled), .view-player:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.view-mode.active { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
.view-mode.active .view-mode-icon { color: var(--accent); }
.view-mode:disabled { opacity: 0.4; cursor: default; }

.view-divider { height: 1px; margin: 6px 4px; background: var(--border); }

.view-group {
  position: sticky;
  top: -6px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px -6px 0;
  padding: 7px 16px 4px;
  background: rgba(14, 19, 24, 0.97);
  color: var(--text-mute);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.view-group-dot { width: 7px; height: 7px; flex: none; border-radius: 2px; background: var(--team-color, #64757f); }
.view-group-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-group-count { color: var(--text-mute); font-weight: 600; font-variant-numeric: tabular-nums; }

.view-player { min-height: 32px; padding: 0 10px 0 22px; font-size: 12.5px; }
.view-player-name { flex: 1; min-width: 0; overflow: hidden; color: var(--text); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.view-player-state { flex: none; padding: 1px 5px; border-radius: 3px; background: rgba(255, 197, 61, 0.15); color: var(--warn); font-size: 10px; font-weight: 600; }
.view-player.active { background: rgba(var(--accent-rgb), 0.12); box-shadow: inset 2px 0 0 var(--accent); }
.view-player.active .view-player-name { color: var(--accent); font-weight: 600; }
.view-mode:focus-visible, .view-player:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (max-width: 560px) {
  .view-menu { width: min(248px, calc(100vw - 24px)); }
}

/* ==================== 朝向射线 ====================
 * .pm-ray 是位于玩家中心的 0×0 旋转轴（JS 写入 rotate(θ)），内部线段默认指向 +X。
 * 线段从头像边缘起，长度取 --pm-ray-len（设置 → 玩家 → 朝向 → 射线长度），末端渐隐；
 * 层级低于名称 / 装备 / 武器标签（18–20），不遮挡文字。 */
.pm-ray {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  pointer-events: none;
  display: none;
  z-index: 10;
}
.pm.show-ray .pm-ray { display: block; }
.pm-ray i {
  position: absolute;
  left: calc(var(--pm-dot, 26px) / 2 + 1px);
  top: -1px;
  width: var(--pm-ray-len, 60px);
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--tc) 0%, var(--tc) 65%, transparent 100%);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9));
}
.pm.self .pm-ray i { height: 2.5px; top: -1.25px; }
/* 朝向样式下拉：「箭头 + 射线」比武器下拉的选项长 */
#settings-direction-style { width: 112px; }