/* ============================================================
   نقش‌نامه — استایل نقشهٔ SVG
   اصل: هیچ فیلتر سنگینی روی کل نقشه؛ سایه فقط روی عنصر فعال
============================================================ */

/* پس‌زمینهٔ دریا */
#map-svg{background:linear-gradient(180deg,#9FC4DC 0%,#A9CBE0 40%,#B4D2E4 100%)}

#camera{will-change:transform}
#camera > *{transform-box:fill-box}

/* ─── زیرلایهٔ ناهمواری ─── */
.layer-relief{image-rendering:auto;opacity:1;transition:opacity .5s ease}
.layer-relief.loading{opacity:0}
.lowq .layer-relief{display:none}

/* ─── کشورهای همسایه ─── */
.layer-neighbors path{
  fill:#DFE5E9;fill-opacity:.82;stroke:#C3CDD4;stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.layer-neighbors text{fill:#7C8A93;font-weight:600;letter-spacing:.04em;opacity:.9}

/* ─── استان‌ها ─── */
.layer-geo path{
  stroke:#fff;stroke-width:1.1;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;transition:filter .16s ease,opacity .3s ease;
  cursor:pointer;
}
.layer-geo path.p0{fill:#7FA8DC}
.layer-geo path.p1{fill:#D9B380}
.layer-geo path.p2{fill:#AFC49B}
.layer-geo path.p3{fill:#CFA39A}
.layer-geo path.p4{fill:#9AA8CE}
.layer-geo path.p5{fill:#BCB0D9}
.layer-geo path{fill-opacity:.52}
.layer-geo path:hover,.layer-geo path.hov{
  fill-opacity:.66;filter:brightness(1.07) drop-shadow(0 0 6px rgba(11,27,58,.35));
}
.layer-geo path.sel{fill-opacity:.72;stroke:var(--amber);stroke-width:2;vector-effect:non-scaling-stroke}
.layer-geo path:focus{outline:none}
.layer-geo path.pulse{animation:provPulse 1.1s ease-out 1}
@keyframes provPulse{
  0%{stroke-width:2;stroke:#fff}
  35%{stroke-width:5;stroke:var(--amber)}
  100%{stroke-width:2;stroke:#fff}
}
/* انتخاب استان: بقیه کم‌رنگ */
.map-wrap.focused .layer-geo path:not(.sel){fill-opacity:.28;filter:saturate(.6)}
.map-wrap.focused .layer-neighbors{opacity:.5}
.map-wrap.focused .layer-labels .prov-lbl:not(.keep){opacity:.22}

/* ─── آب‌ها ─── */
.layer-waters .sea{fill:#A9CBE0;fill-opacity:.85;stroke:#8FB4CC;stroke-width:.8;vector-effect:non-scaling-stroke}
.layer-waters .lake{fill:#9FC4DC;stroke:#7FA8C8;stroke-width:.8;vector-effect:non-scaling-stroke}
.layer-rivers path,.layer-rivers polyline{
  fill:none;stroke:#6E9EC4;stroke-width:1.3;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9;
}
.map-wrap.strong .layer-waters .sea{animation:seaShift 14s ease-in-out infinite alternate}
@keyframes seaShift{
  from{fill:#A9CBE0}
  to{fill:#9FC6E0}
}

/* ─── جزیره‌ها و نقاط ─── */
.layer-islands circle{fill:#D9B380;stroke:#9A6B33;stroke-width:1;vector-effect:non-scaling-stroke}
.layer-islands path{fill:#D9B380;stroke:#9A6B33;stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer}
.layer-islands path:hover{filter:brightness(1.1)}

/* ─── نشانه‌ها: شهر/اثر/رویداد ─── */
.layer-points .city{cursor:pointer}
.layer-points .city circle{
  fill:#fff;stroke:#1D4ED8;stroke-width:1.6;vector-effect:non-scaling-stroke;
  transition:r .12s;
}
.layer-points .city.cap circle{fill:#1D4ED8;stroke:#fff}
.layer-points .city:hover circle{stroke:var(--amber)}
.layer-points .city text{
  fill:#12275C;font-weight:700;paint-order:stroke;stroke:#F2F6FB;stroke-width:3.4px;
  stroke-linejoin:round;pointer-events:none;
}
.layer-points .lm circle{fill:var(--amber);stroke:#fff;stroke-width:1.4;vector-effect:non-scaling-stroke}
.layer-points .lm text{fill:#5C3A00;font-weight:700;paint-order:stroke;stroke:#F6EFDC;stroke-width:3px;pointer-events:none}
.layer-points .ev .pin,.layer-ancient .pin{
  stroke:#fff;stroke-width:3;vector-effect:non-scaling-stroke;
  transform-box:fill-box;transform-origin:bottom center;
  animation:pinBob 3.4s ease-in-out infinite;
  animation-delay:var(--d,0s);
  transition:filter .2s ease;
}
.layer-points .ev .pin-gloss,.layer-ancient .pin-gloss{fill:rgba(255,255,255,.5)}
.layer-points .ev .pin-side,.layer-ancient .pin-side{fill:url(#nn-grad-side)}
.layer-points .ev .pin-dot,.layer-ancient .pin-dot{fill:#fff;opacity:.85}
.layer-points .ev .pin-shadow,.layer-ancient .pin-shadow{
  fill:rgba(11,27,58,.24);
  animation:pinShadow 3.4s ease-in-out infinite;
  animation-delay:var(--d,0s);
}
.layer-points .ev:hover .pin,.layer-ancient .anc-pin:hover .pin{
  animation-play-state:paused;
  filter:drop-shadow(0 0 8px rgba(245,158,11,.55)) drop-shadow(0 6px 8px rgba(11,27,58,.3));
}
@keyframes pinBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}
@keyframes pinShadow{
  0%,100%{opacity:.85;transform:scale(1)}
  50%{opacity:.4;transform:scale(.82)}
}
.lowq .layer-points .ev .pin,.lowq .layer-ancient .pin,
.lowq .layer-points .ev .pin-shadow,.lowq .layer-ancient .pin-shadow{animation:none}
@media (prefers-reduced-motion: reduce){
  .layer-points .ev .pin,.layer-ancient .pin,
  .layer-points .ev .pin-shadow,.layer-ancient .pin-shadow{animation:none}
}
.layer-points .ev text{fill:#4A2B00;font-weight:700;paint-order:stroke;stroke:#FFF7E8;stroke-width:4px;pointer-events:none}
.layer-points .isl text{fill:#6B4A1E;font-weight:700;paint-order:stroke;stroke:#F6EFDC;stroke-width:3px;pointer-events:none}
.layer-points .reg text{fill:#8A6D3B;font-weight:600;font-style:italic;letter-spacing:.06em;paint-order:stroke;stroke:#F2ECDC;stroke-width:3px;pointer-events:none}

/* ─── برچسب‌ها: اندازهٔ ثابت صفحه با متغیر --k و --s0 ─── */
.layer-labels text,.layer-points text{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  font-size:calc(var(--s0, .2) * var(--fs, 60) * 1px);
  transform:scale(calc(1 / var(--k, 1)));
  transform-box:fill-box;transform-origin:center;
}
.layer-labels .prov-lbl text{--fs:88}
.layer-labels .sea-lbl text{--fs:74}
.layer-neighbors text{--fs:56}
.layer-points .city text{--fs:54}
.layer-points .lm text{--fs:52}
.layer-points .ev text{--fs:46}
.layer-points .ev.imp3 text{--fs:56;font-weight:800}
.layer-points .isl text{--fs:50}
.layer-points .reg text{--fs:58}
.prov-lbl.small text{--fs:66}

/* دایره‌ها: اندازهٔ ثابت صفحه */
.layer-points .city circle,.layer-points .lm circle,
.layer-islands circle{
  transform:scale(calc(1 / var(--k, 1)));
  transform-box:fill-box;transform-origin:center;
}
.layer-points .city circle{r:calc(var(--s0, .2) * 17px)}
.layer-points .city.cap circle{r:calc(var(--s0, .2) * 22px)}
.layer-points .lm circle{r:calc(var(--s0, .2) * 16px)}

/* ─── لایهٔ کهن: پایتخت‌ها و شهرهای کهن دورهٔ فعال ─── */
.layer-ancient .anc-pin,.layer-ancient .anc-place{cursor:pointer}
.layer-ancient .pin{stroke:#fff;stroke-width:3;vector-effect:non-scaling-stroke}
.layer-ancient .pin-dot{fill:#fff;opacity:.9}
.layer-ancient .cap .pin-dot{fill:#7A4B00}
.layer-ancient .pin-shadow{fill:rgba(11,27,58,.2)}
.layer-ancient text{fill:#5C3A00;font-weight:800;paint-order:stroke;stroke:#FFF3D6;stroke-width:4px;stroke-linejoin:round;pointer-events:none}
/* برچسب‌های هم‌گروه با سنجاق: اندازه در واحد سنجاق؛ CSS دست نمی‌زند */
.layer-points .ev-lbl,.layer-ancient .anc-lbl{
  transform:none;font-size:30px;
  fill:#4A2B00;font-weight:700;paint-order:stroke;stroke:#FFF7E8;stroke-width:4px;stroke-linejoin:round;pointer-events:none;
}
.layer-points .ev.imp3 .ev-lbl{font-size:34px;font-weight:800}
.layer-ancient .anc-lbl{fill:#5C3A00;stroke:#FFF3D6}
.layer-ancient .anc-lbl.small{font-size:26px;font-weight:600;fill:#6B5A3A;stroke:#FFF6E0}
.layer-ancient .place-dot{
  fill:rgba(255,255,255,.9);stroke:#B08948;stroke-width:2.5;
  vector-effect:non-scaling-stroke;
}

/* ─── نشان دورهٔ فعال ─── */
.period-badge{
  position:absolute;top:12px;inset-inline-start:12px;z-index:21;
  background:rgba(255,255,255,.95);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow-sm);
  padding:8px 18px;font-size:12.5px;color:var(--tx-2);max-width:min(72%,440px);
  pointer-events:none;
}
.period-badge b{
  display:block;font-family:var(--font-display);font-weight:400;
  font-size:17px;color:var(--amber-dark);line-height:1.5;
}
.layer-labels .prov-lbl text{
  fill:#12325E;font-weight:800;paint-order:stroke;stroke:#F4F8FC;stroke-width:4.5px;
  stroke-linejoin:round;pointer-events:none;
}
.layer-labels .prov-lbl{pointer-events:none}
.layer-labels .sea-lbl text{
  fill:#3F6E93;font-weight:700;font-style:italic;letter-spacing:.14em;
  paint-order:stroke;stroke:#DDEBF5;stroke-width:4px;pointer-events:none;
}
.layer-labels .cn-lbl text{fill:#6E7E88;font-weight:600;letter-spacing:.08em;pointer-events:none}

/* سطوح زوم: چه چیزی دیده شود */
.layer-points .city,.layer-points .lm,.layer-points .isl{opacity:0;transition:opacity .25s ease;pointer-events:none}
[data-z="0"] .city.mz0,[data-z="1"] .city.mz0,[data-z="1"] .city.mz1,
[data-z="2"] .city.mz0,[data-z="2"] .city.mz1,[data-z="2"] .city.mz2,
[data-z="3"] .city,[data-z="4"] .city,[data-z="5"] .city,[data-z="6"] .city{opacity:1;pointer-events:auto}
[data-z="2"] .lm.mz0,[data-z="3"] .lm,[data-z="4"] .lm,[data-z="5"] .lm,[data-z="6"] .lm{opacity:1;pointer-events:auto}
[data-z="1"] .isl,[data-z="2"] .isl,[data-z="3"] .isl,[data-z="4"] .isl,[data-z="5"] .isl,[data-z="6"] .isl{opacity:1;pointer-events:auto}
.layer-points .reg,.layer-points .ev{transition:opacity .35s ease}
.layer-points .ev{opacity:0}
.layer-points .ev.show{opacity:1}

/* ─── حالت‌های خاص (تاریخ/بازی/تور): زمینه کم‌رنگ تا محتوا مشخص باشد ─── */
.map-wrap.mode-focus .layer-labels .prov-lbl{opacity:.24}
.map-wrap.mode-focus .layer-points .city{display:none !important}
.map-wrap.mode-focus .layer-neighbors{opacity:.4}
.map-wrap.mode-focus .layer-points .reg{opacity:.35}
.map-wrap.mode-focus .layer-labels .sea-lbl{opacity:.5}
.map-wrap.mode-focus .layer-islands{opacity:.55}
.map-wrap.mode-focus .layer-rivers{opacity:.35}

/* نشانه‌های رویداد: سنجاق با گرادیان و برچسب همیشگی (قواعد ظاهر در بالا) */

/* برچسب پنهان‌شدهٔ چیدمان، با نگه‌داشتن نشان نمایان می‌شود */
.layer-points .ev:hover .ev-lbl,.layer-ancient .anc-pin:hover .anc-lbl,
.layer-ancient .anc-place:hover .anc-lbl{visibility:visible !important}

/* حین ژست: برچسب‌های ثانویه خاموش (مسیرها pointer-events نگه می‌دارند؛ درگ با consumeDrag تفکیک می‌شود) */
#map-svg.gesturing .layer-points .city:not(.mz0) text,
#map-svg.gesturing .layer-points .lm text{opacity:0}
.lowq .layer-labels .sea-lbl,.lowq .layer-points .reg{display:none}

/* بازی: بدون برچسب (سختی متوسط/سخت) + نشانهٔ سوال */
#map-svg.no-labels .layer-labels,#map-svg.no-labels .layer-points text{opacity:0}
.layer-geo path.qmark{fill-opacity:.78;stroke:var(--amber);stroke-width:2.4;vector-effect:non-scaling-stroke;animation:provPulse 1.2s ease-out 1}

/* ─── خط زمان ─── */
.timeline{
  position:absolute;inset-inline:14px;bottom:14px;z-index:22;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  padding:12px 18px 30px;
}
.tl-top{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.tl-play{
  width:44px;height:44px;border-radius:50%;border:none;flex:none;
  background:var(--amber);color:var(--on-amber);display:grid;place-items:center;
  box-shadow:0 6px 16px -6px rgba(245,158,11,.65);transition:.15s;
}
.tl-play:hover{background:var(--amber-dark);color:#fff}
.tl-play svg{width:22px;height:22px}
.tl-year{display:flex;flex-direction:column;min-width:150px}
.tl-year strong{font-family:var(--font-display);font-weight:400;font-size:22px;color:var(--tx);line-height:1.3}
.tl-year span{font-size:11.5px;color:var(--tx-3)}
.tl-speed{margin-inline-start:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx-2)}
.tl-speed input{width:90px;accent-color:var(--acc)}
.tl-range{width:100%;accent-color:var(--acc);margin:6px 0 2px}
.tl-ruler{position:relative;height:18px;font-size:10px;color:var(--tx-3)}
.tl-ruler span{position:absolute;transform:translateX(50%);white-space:nowrap;top:0}
.tl-periods{position:relative;height:20px;margin-top:2px}
.tl-period{
  position:absolute;top:0;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;color:var(--tx-2);
  background:var(--panel-2);border:1px solid var(--line);border-radius:7px;
  overflow:hidden;white-space:nowrap;padding:0 4px;cursor:pointer;transition:.15s;
}
.tl-period:hover{color:var(--acc);border-color:var(--acc)}
.tl-period.on{background:var(--amber-tint);color:var(--amber-dark);border-color:#F4DCA8}

/* ─── هد بازی ─── */
.game-hud{
  position:absolute;inset-inline:14px;bottom:14px;z-index:22;
  background:rgba(255,255,255,.97);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow);padding:14px 20px;
}
.gh-question{font-size:17px;font-weight:800;color:var(--tx);margin-bottom:10px}
.gh-question .qnum{color:var(--tx-3);font-weight:600;font-size:13px;margin-inline-end:8px}
.gh-answers{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.gh-answers button{
  border:1.5px solid var(--line-2);background:#fff;border-radius:11px;
  padding:8px 18px;font-size:14px;font-weight:700;color:var(--tx);transition:.14s;
}
.gh-answers button:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-tint)}
.gh-answers button.ok{border-color:var(--ok);background:#E8F5EF;color:var(--ok)}
.gh-answers button.bad{border-color:var(--danger);background:#FDECEA;color:var(--danger);animation:shake .4s ease}
@keyframes shake{
  0%,100%{transform:none}25%{transform:translateX(3px)}50%{transform:translateX(-3px)}75%{transform:translateX(2px)}
}
.gh-stats{display:flex;align-items:center;gap:16px;font-size:12.5px;color:var(--tx-2);flex-wrap:wrap}
.gh-stats b{color:var(--acc);font-weight:900;font-size:15px}
.gh-stats .gh-timer{color:var(--amber-dark);font-weight:800}
.gh-feedback{font-size:13px;font-weight:700}
.gh-feedback.ok{color:var(--ok)}
.gh-feedback.bad{color:var(--danger)}

/* ─── کارت تور ─── */
.tour-card{
  position:absolute;bottom:16px;inset-inline-start:16px;z-index:24;
  width:min(420px,calc(100% - 32px));
  background:rgba(255,255,255,.97);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow-lg);padding:16px 20px;
}
.tour-card .gh-answers{margin-bottom:4px}
.tc-head{display:flex;flex-direction:column;gap:3px;margin-bottom:6px}
.tc-kicker{font-size:11px;font-weight:800;color:var(--amber-dark);background:var(--amber-tint);border-radius:99px;padding:2px 11px;align-self:flex-start}
#tc-title{font-family:var(--font-display);font-weight:400;font-size:21px;color:var(--tx)}
#tc-text{font-size:13.5px;color:var(--tx-2);margin:0 0 12px;line-height:2}
.tc-foot{display:flex;align-items:center;gap:10px}
.tc-dots{flex:1;display:flex;gap:5px;justify-content:center}
.tc-dots button{
  width:9px;height:9px;border-radius:99px;border:none;background:var(--line-2);
  padding:0;transition:.2s;cursor:pointer;
}
.tc-dots button.on{background:var(--acc);width:22px}

/* خط قرمز کلی: حالت چاپ/کم‌توان */
@media print{
  .topbar,.panel,.map-hud,.timeline,.game-hud{display:none}
}

/* ─── موبایل: خط زمان جمع‌وجور با دوره‌های اسکرول‌شونده ─── */
@media (max-width: 900px){
  /* بالای دستگیرهٔ برگهٔ پایین (۶۴px) بنشینند */
  .timeline,.game-hud,.tour-card{bottom:72px}
  .timeline{inset-inline:8px;padding:10px 14px 20px;border-radius:16px}
  .tl-top{gap:8px;margin-bottom:4px}
  .tl-year{min-width:0;flex:1}
  .tl-year strong{font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tl-year span{font-size:10.5px}
  .tl-play{width:38px;height:38px;flex:none}
  .tl-speed{gap:4px;font-size:10.5px;margin-inline-start:0}
  .tl-speed input{width:52px}
  .tl-ruler{display:none}
  .tl-periods{overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
  .tl-period{flex:none;height:24px;font-size:10px}
  .game-hud{inset-inline:8px;padding:11px 14px;border-radius:16px}
  .gh-question{font-size:15px}
  .gh-answers button{padding:7px 13px;font-size:13px}
  .tour-card{inset-inline-start:8px;width:calc(100% - 16px);padding:13px 16px}
  #tc-text{font-size:12.5px;margin-bottom:9px}

  /* دکمه‌های زوم: چپ‌بالا — تا با خط زمان و نشان دوره تصادم نکنند */
  .map-hud{inset-inline-start:auto;inset-inline-end:10px;top:12px;bottom:auto;flex-direction:column;gap:6px}
  .hud-btn{width:38px;height:38px}
  /* نشان دوره: جمع‌وجور */
  .period-badge{top:10px;inset-inline-start:10px;max-width:calc(100% - 78px);padding:6px 13px;border-radius:12px}
  .period-badge b{font-size:14.5px}
  .period-badge span{font-size:10.5px;line-height:1.7;display:block}
  /* برچسب رویداد و شهرهای کهن خواناتر */
  .layer-points .ev text{--fs:64}
  .layer-points .ev.imp3 text{--fs:74}
  .layer-ancient text{--fs:62}
  .layer-ancient .anc-lbl.small{--fs:54}
}