/* ——— نقشهٔ مشاهیر ——— */
#mapview { position: fixed; inset: 0; padding-top: 6px; z-index: 30; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); direction: rtl; opacity: 0; transform: translateY(12px); transition: opacity 0.22s, transform 0.22s; }
#mapview.in { opacity: 1; transform: none; }
.mv-head { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--safe-t, 0px) + 10px) 14px 6px; }
.mv-head h2 { margin: 0; font-size: 1.1rem; font-weight: 800; }
.mv-x { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.mv-bar { display: flex; align-items: center; gap: 6px; padding: 4px 14px 8px; overflow-x: auto; scrollbar-width: none; }
.mv-bar::-webkit-scrollbar { display: none; }
.mv-sep { flex: 1 0 8px; }
.mv-chip { flex: none; padding: 6px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: var(--accent-ink, var(--ink)); background: var(--surface); border: 1px solid var(--line-strong, var(--line)); }
.mv-chip.sm { font-weight: 600; padding: 5px 10px; }
.mv-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.mv-body { flex: 1; min-height: 0; display: flex; gap: 8px; padding: 0 10px; }
.mv-map { position: relative; flex: 1; min-width: 0; border-radius: 16px; overflow: hidden; background: var(--mv-sea); border: 1px solid var(--line); touch-action: none; }
.mv-svg { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; }
.mv-c { fill: var(--mv-l0); stroke: var(--mv-border); stroke-width: 0.7; vector-effect: non-scaling-stroke; }
.mv-cn { text-anchor: middle; fill: var(--mv-cn); opacity: 0.8; font-weight: 700; pointer-events: none; }
.mv-eraP { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.mv-rg { pointer-events: none; text-anchor: middle; }
.mv-r1 { font-weight: 800; fill: var(--ink-2); paint-order: stroke; stroke: var(--mv-halo); stroke-width: 0.35em; stroke-linejoin: round; }
.mv-r2 { fill: var(--ink-3); paint-order: stroke; stroke: var(--mv-halo); stroke-width: 0.35em; stroke-linejoin: round; }
.mv-dot { fill: #888; stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0.95; cursor: pointer; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }
.mv-dot.on { stroke: var(--ink); stroke-width: 2.2; }
.mv-hit { fill: transparent; cursor: pointer; }
.mv-heat { fill: #e0603c; pointer-events: none; }
.mv-hn { text-anchor: middle; font-weight: 800; fill: var(--ink); pointer-events: none; }
.mv-zoom { position: absolute; inset-inline-start: 8px; bottom: 8px; display: grid; gap: 6px; }
.mv-zoom button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.mv-tip { position: absolute; width: 180px; padding: 8px 10px; border-radius: 12px; font-size: 0.8rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong, var(--line)); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22); z-index: 3; }
.mv-tip[hidden] { display: none; }
.mv-ts { font-size: 0.7rem; color: var(--ink-2); margin: 3px 0 6px; line-height: 1.6; }
.mv-open { padding: 4px 12px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; color: #fff; background: var(--accent); }
/* نوار زمانی (سمت راست، دستگیرهٔ دایره‌ای) */
.mv-win { position: absolute; left: 50%; width: 10px; margin-left: -5px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 45%, transparent); pointer-events: none; min-height: 10px; }
.mv-knob { position: absolute; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 0 2px var(--accent); pointer-events: none; }
.mv-knob::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; opacity: .85; }
/* پالت نقشه بر پایهٔ تم */
:root { --mv-sea: #bfe0f5; --mv-border: #fff; --mv-cn: #3b4a5a; --mv-dot: #d6342c; --mv-dot-on: #ff9f1c;
  --mv-l0: #f3e6b8; --mv-l1: #d9ecc0; --mv-l2: #f6d7c2; --mv-l3: #e3d5ee; --mv-l4: #c8e8dc; --mv-l5: #f5e1a4; --mv-ir: #f0b55a; --mv-halo: rgba(255,255,255,.75); --ly-ir: #d6342c; --ly-w: #1f6fd0; --ly-m: #8e44ad; --ly-e: #138a54; }
:root[data-skin="tile"] { --mv-sea: #a9d6e6; --mv-border: #fbf6e6; --mv-cn: #0e3b5a; --mv-dot: #1b4f78; --mv-dot-on: #c0392b;
  --mv-l0: #f1e2b0; --mv-l1: #cfe4c4; --mv-l2: #f3cfa6; --mv-l3: #bcdbe6; --mv-l4: #e8d3a0; --mv-l5: #d7e9d8; --mv-ir: #e8c36a; --mv-halo: rgba(251,246,230,.8); --ly-ir: #b8321f; --ly-w: #1b5f86; --ly-m: #7a3f9e; --ly-e: #2a7a3b; }
:root[data-skin="astro"] { --mv-sea: #0b2147; --mv-border: #2f5a99; --mv-cn: #cfe3ff; --mv-dot: #ffe08a; --mv-dot-on: #ff8d6b;
  --mv-l0: #1c3a73; --mv-l1: #20457f; --mv-l2: #2a3f78; --mv-l3: #1a4a73; --mv-l4: #28407f; --mv-l5: #22497a; --mv-ir: #3a6bb8; --mv-halo: rgba(8,22,50,.8); --ly-ir: #ff8d6b; --ly-w: #6ec1ff; --ly-m: #d39cff; --ly-e: #6fe0a4; }
.mv-c.c0 { fill: var(--mv-l0); } .mv-c.c1 { fill: var(--mv-l1); } .mv-c.c2 { fill: var(--mv-l2); }
.mv-c.c3 { fill: var(--mv-l3); } .mv-c.c4 { fill: var(--mv-l4); } .mv-c.c5 { fill: var(--mv-l5); }
.mv-c.ir { fill: var(--mv-ir); }
:root[data-skin="tile"] .mv-head h2, :root[data-skin="astro"] .mv-head h2 { font-family: var(--font-title); }
:root[data-skin="tile"] .mv-map { border: 2px solid #e8c36a; }
:root[data-skin="astro"] .mv-map { box-shadow: var(--glow); border-color: var(--line-strong); }
:root[data-skin="astro"] .mv-heat { fill: #ffb25a; }
.mv-track { width: 52px; background: var(--surface-2); }
.mv-track::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 2px; margin-left: -1px; background: var(--line-strong); }
.mv-tick { background: none; }
.mv-tick span { inset-inline-end: auto; inset-inline-start: 3px; }
.mv-track { position: relative; width: 58px; flex: none; margin: 2px 0; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); touch-action: none; cursor: ns-resize; outline: none; }
.mv-track.off { opacity: 0.55; }
.mv-tick { position: absolute; inset-inline: 0; height: 1px; background: var(--line-strong, var(--line)); pointer-events: none; }
.mv-tick span { position: absolute; inset-inline-end: 4px; top: -8px; font-size: 0.6rem; color: var(--ink-3); background: var(--surface-2); padding: 0 2px; }
.mv-info { padding: 8px 14px calc(10px + env(safe-area-inset-bottom)); font-size: 0.82rem; }
.mv-note { margin-top: 3px; font-size: 0.7rem; color: var(--ink-2); line-height: 1.7; }
.mv-top { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.mv-pill { padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; background: color-mix(in srgb, #e0603c 15%, var(--surface)); border: 1px solid color-mix(in srgb, #e0603c 45%, transparent); }

/* فیلتر لایه‌ها */
.mv-bar { flex-wrap: wrap; overflow: visible; }
.mv-ly { display: inline-flex; align-items: center; gap: 6px; opacity: 0.6; }
.mv-ly.on { opacity: 1; background: var(--surface); color: var(--ink); }
.mv-ly .mv-n { font-weight: 600; opacity: 0.7; font-size: 0.68rem; }
.mv-sw { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-strong); background: var(--c, #999); flex: none; }
.ly-ir { --c: var(--ly-ir); } .ly-w { --c: var(--ly-w); } .ly-m { --c: var(--ly-m); } .ly-e { --c: var(--ly-e); }
.mv-ly:not(.on) .mv-sw { background: transparent; border-color: var(--c); box-shadow: none; }
.mv-ly.on { border-color: var(--c); box-shadow: 0 0 0 1px var(--c) inset; }
.mv-tl { display: flex; align-items: center; gap: 5px; font-size: 0.66rem; color: var(--ink-2); margin-bottom: 2px; }
.mv-cn { paint-order: stroke; stroke: var(--mv-halo); stroke-width: 0.35em; stroke-linejoin: round; }
.mv-b2 { flex-wrap: nowrap; gap: 4px; }
.mv-b2 .mv-chip { padding: 5px 9px; font-size: 0.74rem; }
.mv-b2 .mv-chip.sm { padding: 5px 7px; }
:root[data-skin="astro"] 
.mv-dot.dim { fill: #8c969c; opacity: 0.4; filter: none; }
.mv-dot.hl { stroke: var(--ink); stroke-width: 2.4; opacity: 1; }
.mv-hl-name { text-anchor: middle; font-weight: 800; fill: var(--ink); paint-order: stroke; stroke: var(--mv-halo); stroke-width: 0.4em; stroke-linejoin: round; pointer-events: none; }
.mv-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 5px; }
.mv-lg { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--ink-2); }