/* =====================================================================
   米费勒 · 共享合规中国地图样式（2026-11-09 定稿视觉恢复）
   ---------------------------------------------------------------------
   - 自包含：cities 页不加载 main.css，本文件内含全部点阵样式与 @keyframes，
     不依赖 main.css 的 .pulse / mapRipple / mapBeat / .mcity 任何规则。
   - 作用域：所有选择器限定在 .mlf-gridmap 容器内
     （首页 <svg class="mlf-gridmap">、cities 页 <div class="mlf-gridmap">），不污染全站。
   - 关键帧前缀 gmRipple / gmSpin / gmBeat，避免与 main.css 同名冲突。
   - 色值只在 .mlf-gridmap 上定义一次 CSS 变量，规则体一律 var() 引用。
   - 数值口径：旧版 440×424 viewBox → 1000×994.5 viewBox，装饰半径 / 线宽 / 字号按 ×2.27 换算。
   ===================================================================== */
.mlf-gridmap {
  --gm-orange: #E87722;
  --gm-white: #FFFFFF;
  --gm-core: rgba(255, 255, 255, 0.72);
  --gm-minor-core: rgba(240, 138, 60, 0.75);
  --gm-beat: #FFB37A;
  --gm-halo: rgba(240, 138, 60, 0.9);
  --gm-ring: rgba(240, 138, 60, 0.6);
  --gm-label: rgba(255, 255, 255, 0.74);
  --gm-label-strong: rgba(255, 255, 255, 0.95);
  --gm-label-cap: rgba(255, 255, 255, 0.97);
  --gm-stroke: rgba(9, 24, 15, 0.92);
  --gm-cap-red: #E0392C;
  --gm-cap-glow: rgba(224, 57, 44, 0.34);
  --gm-cap-star-stroke: rgba(255, 233, 228, 0.75);
  --gm-sea: rgba(255, 255, 255, 0.38);
  --gm-grid: rgba(255, 255, 255, 0.05);
  --gm-font: "Source Han Sans SC", "Source Han Sans", "Noto Sans SC",
    "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei Light", "Microsoft YaHei",
    "Helvetica Neue", Arial, sans-serif;
}

/* 静态示意图：不可 zoom / pan / 点击，不留键盘焦点入口 */
.mlf-gridmap,
.mlf-gridmap.mlf-gm-svg,
.mlf-gridmap .mlf-gm-svg {
  -webkit-user-select: none;
  user-select: none;
}
.mlf-gridmap.mlf-gm-svg,
.mlf-gridmap .mlf-gm-svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- 网格：3 横 3 竖，线宽 1.3（旧版 0.6 × 2.27），不盖过省界 ---------- */
.mlf-gridmap .map-grid line {
  fill: none;
  stroke: var(--gm-grid);
  stroke-width: 1.3;
}

/* ---------- 城市点阵：四层 .ring / .halo / .core / .beat ---------- */
.mlf-gridmap .mcity { cursor: default; }
.mlf-gridmap .mcity .core {
  fill: var(--gm-core);
  transition: fill 0.3s;
}
.mlf-gridmap .mcity.is-svc .core { fill: var(--gm-orange); }
.mlf-gridmap .mcity.is-minor .core { fill: var(--gm-minor-core); }

.mlf-gridmap .mcity .halo {
  fill: none;
  stroke: var(--gm-halo);
  stroke-width: 2.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}
/* 靶心环：定位城市专属静态外环，与扩散环构成「靶心 + 波纹」两层 */
.mlf-gridmap .mcity .ring {
  fill: none;
  stroke: var(--gm-ring);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}
/* 呼吸光斑：叠在中心点上做明暗呼吸 */
.mlf-gridmap .mcity .beat {
  fill: var(--gm-beat);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}

/* 次要点位（苏州，与上海过近）：只留小点，不出环、不标文字 */
.mlf-gridmap .mcity.is-minor .halo,
.mlf-gridmap .mcity.is-minor .ring,
.mlf-gridmap .mcity.is-minor .beat { display: none; }

/* ---------- 首都：红色五角星 + 光晕 ---------- */
.mlf-gridmap .mcity .cap-glow { fill: var(--gm-cap-glow); }
.mlf-gridmap .mcity .cap-star {
  fill: var(--gm-cap-red);
  stroke: var(--gm-cap-star-stroke);
  stroke-width: 1.1;
  stroke-linejoin: round;
}

/* ---------- 标签（旧版 10px × 2.27 ≈ 22px，描边 3 × 2.27 ≈ 6） ---------- */
.mlf-gridmap .mcity text {
  font-family: var(--gm-font);
  font-size: 22px;
  font-weight: 350;
  letter-spacing: 0;
  fill: var(--gm-label);
  paint-order: stroke;
  stroke: var(--gm-stroke);
  stroke-width: 6;
  stroke-linejoin: round;
  transition: fill 0.3s;
  pointer-events: none;
}
.mlf-gridmap .mcity.is-svc text { fill: var(--gm-label-strong); font-weight: 400; }
.mlf-gridmap .mcity.is-capital text { fill: var(--gm-label-cap); font-weight: 400; font-size: 24px; }

/* 密集区微调：长三角四城标签错位，避免互相压字（沿用 main.css §29 思路） */
.mlf-gridmap .mcity[data-city="上海"] text { font-size: 24px; }
.mlf-gridmap .mcity[data-city="苏州"] text,
.mlf-gridmap .mcity[data-city="南京"] text,
.mlf-gridmap .mcity[data-city="杭州"] text { font-size: 21px; }

.mlf-gridmap .map-sea-note {
  font-family: var(--gm-font);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.1em;
  fill: var(--gm-sea);
  paint-order: stroke;
  stroke: var(--gm-stroke);
  stroke-width: 4;
  pointer-events: none;
}

/* ---------- 定位层：3 个错时扩散环 + 常驻靶心环 + 中心呼吸 + 橙核心白心 ----------
   选择器挂「定位层容器 .mlf-gm-loc 的直接子组」而不是泛用的 .mcity.loc-here：
   首页 main.js 的旧版 applyCity() 会把 .loc-here 类搬到点阵城市（且 main.css §29 有旧动效），
   挂容器可保证两页动效载体恒定一致，不被既有 CMS 联动改写。 */
.mlf-gridmap .mlf-gm-loc > .mcity .halo {
  animation: gmRipple 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
.mlf-gridmap .mlf-gm-loc > .mcity .halo.gm-d2 { animation-delay: 0.87s; }
.mlf-gridmap .mlf-gm-loc > .mcity .halo.gm-d3 { animation-delay: 1.73s; }
.mlf-gridmap .mlf-gm-loc > .mcity .ring {
  opacity: 1;
  stroke-dasharray: 5 9;
  animation: gmSpin 14s linear infinite;
}
.mlf-gridmap .mlf-gm-loc > .mcity .beat { animation: gmBeat 2.6s ease-in-out infinite; }
.mlf-gridmap .mlf-gm-loc > .mcity .core { fill: var(--gm-orange); }
.mlf-gridmap .mlf-gm-loc > .mcity .gm-white { fill: var(--gm-white); }
.mlf-gridmap .mlf-gm-loc > .mcity text { fill: var(--gm-orange); font-weight: 600; }

@keyframes gmRipple {
  0%   { transform: scale(0.6); opacity: 0.95; }
  72%  { transform: scale(2.35); opacity: 0; }
  100% { transform: scale(2.35); opacity: 0; }
}
@keyframes gmSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes gmBeat {
  0%, 100% { opacity: 0.12; }
  50%      { opacity: 0.7; }
}

/* 移动端：地图整体缩小后标签更容易糊，字号回调一档、描边加厚 */
@media (max-width: 760px) {
  .mlf-gridmap .mcity text { font-size: 23px; stroke-width: 7; }
  .mlf-gridmap .mcity[data-city="上海"] text { font-size: 25px; }
  .mlf-gridmap .mcity[data-city="苏州"] text,
  .mlf-gridmap .mcity[data-city="南京"] text,
  .mlf-gridmap .mcity[data-city="杭州"] text { font-size: 22px; }
}

/* 静态模式：?noanim 与系统「减少动态效果」时保留光圈，只停动画，定位信息不丢 */
html.noanim .mlf-gridmap .mlf-gm-loc > .mcity .halo,
html.noanim .mlf-gridmap .mlf-gm-loc > .mcity .beat,
html.noanim .mlf-gridmap .mlf-gm-loc > .mcity .ring { animation: none; }
html.noanim .mlf-gridmap .mlf-gm-loc > .mcity .halo { opacity: 0.45; transform: scale(1.5); }
html.noanim .mlf-gridmap .mlf-gm-loc > .mcity .halo.gm-d2,
html.noanim .mlf-gridmap .mlf-gm-loc > .mcity .halo.gm-d3 { display: none; }
html.noanim .mlf-gridmap .mlf-gm-loc > .mcity .beat { opacity: 0.35; }

@media (prefers-reduced-motion: reduce) {
  .mlf-gridmap .mcity .halo,
  .mlf-gridmap .mcity .beat,
  .mlf-gridmap .mlf-gm-loc > .mcity .ring { animation: none !important; }
  .mlf-gridmap .mlf-gm-loc > .mcity .halo { opacity: 0.45; transform: scale(1.5); }
  .mlf-gridmap .mlf-gm-loc > .mcity .halo.gm-d2,
  .mlf-gridmap .mlf-gm-loc > .mcity .halo.gm-d3 { display: none; }
  .mlf-gridmap .mlf-gm-loc > .mcity .beat { opacity: 0.35; }
}