/* =========================================================
   Couplina — فاصله‌مون
   غروبِ پاییزی (اسپرسو · کهربایی · مرجانی · سبز مریم‌گلی) + رزِ عاشقانه؛ همان زبان بصری سایت
   صحنه: آسمان و ستاره‌ها، تپه‌ها، دو اورب درخشان، نخِ طلاییِ عشق، آغوشِ قلبی
   ========================================================= */
/* [EN] Full-screen overlay that hosts the whole Distance section. Colour palette lives in --ds-* variables.
   Hidden by default; the .open class turns it into a flex container. */
.ds-overlay{
  --ds-line:rgba(255,226,164,.2);--ds-gold:#ffd166;--ds-amber:#e8834a;--ds-coral:#dd6852;--ds-cream:#f7ecdc;--ds-muted:#d2b097;--ds-sage:#93b178;--ds-rose:#ff7ba0;
  position:fixed;inset:0;z-index:10060;display:none;align-items:center;justify-content:center;padding:18px;
  background:radial-gradient(circle at 50% 30%,rgba(120,40,40,.35),transparent 60%),rgba(10,5,4,.86);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  overflow:auto;direction:rtl;font-family:Vazirmatn,Tahoma,sans-serif;color:var(--ds-cream);
}
.ds-overlay.open{display:flex}
.ds-overlay *{box-sizing:border-box}
.ds-overlay button{font-family:inherit}

/* [EN] The centred card (a bottom sheet on phones). Scrolls internally; scrollbar hidden. */
.ds-card{
  position:relative;width:min(560px,100%);max-height:96vh;overflow-x:hidden;overflow-y:auto;border-radius:34px;
  border:1px solid var(--ds-line);
  background:linear-gradient(160deg,#2a1713,#3a2018 50%,#1b0f0c);
  box-shadow:0 44px 120px rgba(0,0,0,.66),0 0 0 1px rgba(255,242,211,.05) inset,0 0 80px rgba(232,131,74,.12);
  scrollbar-width:none;
  animation:dsIn .55s cubic-bezier(.2,.9,.3,1.1) both;
  transition:box-shadow 1s;
}
.ds-card::-webkit-scrollbar{display:none}
.ds-card.is-hug{box-shadow:0 44px 120px rgba(0,0,0,.66),0 0 0 1px rgba(255,200,215,.12) inset,0 0 110px rgba(255,93,138,.34)}
/* [EN] Card entrance animation. */
@keyframes dsIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- سربرگ روی صحنه ---------- */
/* [EN] Header floating over the scene: brand (icon + title) and the close button. */
.ds-top{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 30px;
  background:linear-gradient(180deg,rgba(14,6,10,.62),rgba(14,6,10,0))}
.ds-brand{display:flex;align-items:center;gap:12px;min-width:0}
.ds-disc{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:23px;flex:none;
  background:linear-gradient(145deg,#ffe3a1,#e8a13e 55%,#c9702c);color:#4a2810;
  box-shadow:0 8px 22px rgba(232,131,74,.42),inset 0 1px 0 rgba(255,255,255,.55)}
.ds-brand h2{margin:0;font-size:20px;line-height:1.3;color:#fff3dc;font-family:Estedad,Vazirmatn,Tahoma,sans-serif;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.ds-brand p{margin:1px 0 0;font-size:11.5px;color:#f0d8c0;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.ds-x{width:40px;height:40px;border-radius:13px;border:1px solid rgba(255,226,164,.28);background:rgba(20,8,10,.45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ds-gold);font-size:23px;line-height:1;cursor:pointer;flex:none;transition:.2s}
.ds-x:hover{background:rgba(255,209,102,.2);transform:rotate(90deg)}

/* ---------- صحنه ---------- */
/* [EN] The animated scene (sunset sky, hills, stars, orbs, thread), fixed aspect ratio 400:262.
   Built from stacked <svg> layers (.ds-bg static, .ds-stars, .ds-fg animated) plus fireflies. */
.ds-stage{position:relative;width:100%;aspect-ratio:400/262;overflow:hidden;background:#150a12}
.ds-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* [EN] Twinkling stars. */
.ds-star{fill:#fff3d6;opacity:.8;animation:dsTw 3.2s ease-in-out infinite}
.ds-star.s1{animation-duration:4.1s}.ds-star.s2{animation-duration:2.6s}.ds-star.s3{animation-duration:5s}
@keyframes dsTw{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}
.ds-star{transform-box:fill-box;transform-origin:center}
.sky-rose{opacity:0;transition:opacity 1.2s}
.ds-stage[data-mode=hug] .sky-rose{opacity:.92}
.sun{transition:opacity 1s}
.hill.h3{fill:#5a3320}.hill.h2{fill:#35201a}.hill.h1{fill:#1d0f0d}
.trees g{fill:#2a1912}
.ds-stage[data-mode=hug] .hill.h3{fill:#6a2a3a}
.hill{transition:fill 1.2s}

/* کرم‌شب‌تاب‌ها */
/* [EN] Fireflies: small glowing dots drifting upwards. */
.ds-fireflies{position:absolute;inset:0;pointer-events:none}
.ds-fireflies i{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffe9a8;box-shadow:0 0 10px 3px rgba(255,214,120,.7);opacity:0;animation:dsFly 7s ease-in-out infinite}
.ds-fireflies i:nth-child(1){left:12%;top:60%;animation-delay:0s}
.ds-fireflies i:nth-child(2){left:28%;top:74%;animation-delay:1.4s;animation-duration:8s}
.ds-fireflies i:nth-child(3){left:46%;top:66%;animation-delay:2.6s}
.ds-fireflies i:nth-child(4){left:63%;top:78%;animation-delay:.8s;animation-duration:9s}
.ds-fireflies i:nth-child(5){left:80%;top:64%;animation-delay:3.4s}
.ds-fireflies i:nth-child(6){left:92%;top:72%;animation-delay:2s;animation-duration:8s}
@keyframes dsFly{0%{opacity:0;transform:translate(0,0)}20%{opacity:.95}50%{transform:translate(14px,-22px)}80%{opacity:.8}100%{opacity:0;transform:translate(-8px,-46px)}}
.ds-stage[data-mode=hug] .ds-fireflies i{background:#ffc2d6;box-shadow:0 0 10px 3px rgba(255,140,180,.75)}

/* ---------- نخِ عشق ---------- */
/* [EN] The love thread: flowing dashes, soft glow, pulsing middle heart.
   In states without a distance it becomes faint and dashed. */
.t-flow{animation:dsFlow 1.4s linear infinite}
@keyframes dsFlow{to{stroke-dashoffset:-18}}
.t-glow{opacity:.75;animation:dsGlowP 2.8s ease-in-out infinite}
@keyframes dsGlowP{0%,100%{opacity:.45}50%{opacity:.95}}
.t-mid{animation:dsBeatS 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes dsBeatS{0%,100%{opacity:1}50%{opacity:.75}}
.thread{transition:opacity .8s}
.ds-stage[data-mode=hug] .thread{opacity:0}
/* حالت‌های بدون فاصله: نخ کم‌رنگ و خط‌چین، بدون قلب‌های در حال سفر */
.ds-stage:not([data-mode=ok]):not([data-mode=hug]) .t-main{stroke-dasharray:2 10;opacity:.4}
.ds-stage:not([data-mode=ok]):not([data-mode=hug]) .t-glow,
.ds-stage:not([data-mode=ok]):not([data-mode=hug]) .t-flow,
.ds-stage:not([data-mode=ok]):not([data-mode=hug]) .t-hearts,
.ds-stage:not([data-mode=ok]):not([data-mode=hug]) .t-mid{display:none}

/* ---------- اورب‌ها ---------- */
/* [EN] The two avatar orbs: halo, pulse rings, name label; greyed out + badge when that side has a problem. */
.ds-orb{transition:opacity .7s,filter .7s}
.ds-orb .halo{animation:dsHalo 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes dsHalo{0%,100%{transform:scale(.9);opacity:.8}50%{transform:scale(1.12);opacity:1}}
.ds-orb .pulse{transform-box:fill-box;transform-origin:center;animation:dsPing 2.8s ease-out infinite;opacity:0}
.ds-orb .pulse.p2{animation-delay:1.4s}
@keyframes dsPing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.ds-orb .disc{filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.ds-orb .ini{font-size:27px;font-weight:800;fill:#3b2012;font-family:Estedad,Vazirmatn,Tahoma,sans-serif}
.ds-orb.them .ini{fill:#5a1730}
.ds-orb .nm{font-size:12.5px;font-weight:700;fill:#fff3dc;paint-order:stroke;stroke:rgba(20,8,10,.9);stroke-width:3.4px;stroke-linejoin:round;font-family:Vazirmatn,Tahoma,sans-serif}
.ds-orb .badge{display:none}
.ds-stage[data-mode=hug] .ds-orb{opacity:0}
/* اوربِ طرفی که مشکل داره، کم‌رنگ و خاکستری می‌شه + نشان */
.ds-stage[data-mode=partner_off] #dsThem .disc,.ds-stage[data-mode=partner_lock] #dsThem .disc,
.ds-stage[data-mode=me_off] #dsMe .disc,.ds-stage[data-mode=me_lock] #dsMe .disc,
.ds-stage[data-mode=partner_off] #dsThem .face,.ds-stage[data-mode=partner_lock] #dsThem .face,
.ds-stage[data-mode=me_off] #dsMe .face,.ds-stage[data-mode=me_lock] #dsMe .face{filter:grayscale(1) brightness(.62)}
.ds-stage[data-mode=partner_off] #dsThem .halo,.ds-stage[data-mode=partner_lock] #dsThem .halo,
.ds-stage[data-mode=me_off] #dsMe .halo,.ds-stage[data-mode=me_lock] #dsMe .halo{opacity:.15;animation:none}
.ds-stage[data-mode=partner_off] #dsThem .pulse,.ds-stage[data-mode=partner_lock] #dsThem .pulse,
.ds-stage[data-mode=me_off] #dsMe .pulse,.ds-stage[data-mode=me_lock] #dsMe .pulse{display:none}
.ds-stage[data-mode=partner_off] #dsThem .badge.off,.ds-stage[data-mode=me_off] #dsMe .badge.off,
.ds-stage[data-mode=partner_lock] #dsThem .badge.lock,.ds-stage[data-mode=me_lock] #dsMe .badge.lock{display:block;animation:dsBadge .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes dsBadge{from{transform:scale(0)}to{transform:scale(1)}}

/* ---------- آغوش ---------- */
/* [EN] "Hug" mode: big beating heart, bloom and petals when the distance is about zero. */
.ds-hugg{opacity:0;pointer-events:none;transition:opacity .5s}
.ds-stage[data-mode=hug] .ds-hugg{opacity:1}
.bigheart{transform-box:fill-box;transform-origin:center;transform:scale(0);filter:drop-shadow(0 10px 22px rgba(255,93,138,.65))}
.ds-stage[data-mode=hug] .bigheart{animation:dsPop .9s cubic-bezier(.2,1.5,.35,1) .1s forwards,dsBeat 1.35s ease-in-out 1s infinite}
@keyframes dsPop{from{transform:scale(0) rotate(-14deg)}to{transform:scale(1.15) rotate(0)}}
@keyframes dsBeat{0%,100%{transform:scale(1.12)}14%{transform:scale(1.26)}28%{transform:scale(1.12)}42%{transform:scale(1.2)}}
.bloom{transform-box:fill-box;transform-origin:center;opacity:0}
.ds-stage[data-mode=hug] .bloom{animation:dsBloom 1.35s ease-in-out infinite}
@keyframes dsBloom{0%,100%{opacity:.55;transform:scale(.9)}20%{opacity:1;transform:scale(1.15)}}
.petals .pt{opacity:0;font-family:Arial,sans-serif}
.ds-stage[data-mode=hug] .petals .pt{animation:dsBurst 3.4s ease-out var(--d) infinite}
@keyframes dsBurst{0%{opacity:0;transform:translate(0,0) scale(.3)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.15) rotate(40deg)}}

/* ---------- پنل اطلاعات (شیشه‌ای، روی لبه‌ی صحنه) ---------- */
/* [EN] Glass-like info panel overlapping the bottom of the scene (number, chips, stats). */
.ds-info{position:relative;z-index:3;margin:-34px 16px 16px;padding:20px 18px 18px;border-radius:28px;min-height:120px;
  border:1px solid var(--ds-line);
  background:linear-gradient(160deg,rgba(54,30,24,.9),rgba(30,16,13,.92));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 18px 44px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,242,211,.1)}
.ds-card.is-hug .ds-info{border-color:rgba(255,190,210,.32);background:linear-gradient(160deg,rgba(84,26,50,.92),rgba(40,14,28,.94))}

/* [EN] Loading spinner. */
.ds-loading{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--ds-muted);font-size:13px;padding:22px 0}
.ds-loading i{width:30px;height:30px;border-radius:50%;border:3px solid rgba(255,209,102,.2);border-top-color:var(--ds-gold);animation:dsSpin 1s linear infinite}
@keyframes dsSpin{to{transform:rotate(360deg)}}

/* عدد فاصله */
/* [EN] Distance number (gradient text), closer/farther chip, accuracy and live-status cards. */
.ds-ok{text-align:center}
.ds-num{display:flex;align-items:flex-end;justify-content:center;gap:10px;flex-wrap:wrap;line-height:1.05;margin-top:2px}
.ds-num em{font-style:normal;font-size:16px;color:var(--ds-muted);padding-bottom:12px}
.ds-unit{display:flex;align-items:baseline;gap:6px}
.ds-unit b{font-size:clamp(38px,11vw,60px);font-weight:800;font-family:Estedad,Vazirmatn,Tahoma,sans-serif;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff6e0,#ffd166 55%,#ff9a8a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 18px rgba(255,170,90,.28))}
.ds-unit span{font-size:17px;color:var(--ds-gold);font-weight:700}
.ds-sub2{margin-top:4px;font-size:12.5px;color:var(--ds-muted)}
.ds-meta{margin-top:12px;min-height:34px;display:flex;justify-content:center}
.ds-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:99px;font-size:13px;font-weight:700;animation:dsFade .45s both}
.ds-chip b{font-size:15px}
.ds-chip.closer{background:rgba(147,177,120,.22);color:#cfeab0;box-shadow:0 0 0 1px rgba(147,177,120,.35) inset}
.ds-chip.farther{background:rgba(221,104,82,.22);color:#ffc0b0;box-shadow:0 0 0 1px rgba(221,104,82,.4) inset}
.ds-chip.steady{background:rgba(255,255,255,.07);color:var(--ds-muted)}
.ds-chip.hug{background:rgba(255,93,138,.24);color:#ffd0de;box-shadow:0 0 0 1px rgba(255,140,175,.4) inset}
@keyframes dsFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.ds-stats{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ds-stat{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:18px;text-align:right;background:rgba(255,255,255,.05);border:1px solid rgba(255,226,164,.12)}
.ds-stat.wide{grid-column:1/-1}
.ds-stat>span{width:34px;height:34px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:17px;background:rgba(255,209,102,.12)}
.ds-stat b{display:block;font-size:13.5px;color:#fff3dc}
.ds-stat small{display:block;margin-top:2px;font-size:11px;line-height:1.7;color:var(--ds-muted)}
.ds-stat .live{background:rgba(147,177,120,.18)}
.ds-stat .live i{width:10px;height:10px;border-radius:50%;background:#9ad56a;box-shadow:0 0 0 0 rgba(154,213,106,.7);animation:dsLive 1.6s ease-out infinite}
@keyframes dsLive{0%{box-shadow:0 0 0 0 rgba(154,213,106,.7)}100%{box-shadow:0 0 0 12px rgba(154,213,106,0)}}

/* آغوش */
/* [EN] Text shown in hug mode. */
.ds-hugtext{text-align:center;padding-top:2px}
.ds-hugtext h3{margin:4px 0 6px;font-size:23px;color:#ffe0ea;font-family:Estedad,Vazirmatn,Tahoma,sans-serif;text-shadow:0 4px 20px rgba(255,93,138,.5)}
.ds-hugtext p{margin:0;font-size:13.5px;color:#f7dce6;line-height:1.9}

/* پیام‌ها */
/* [EN] Message cards (permission / GPS problems) and the main button style. */
.ds-msg{text-align:center;padding:4px 2px 2px;animation:dsFade .5s both}
.ds-msg-ic{width:62px;height:62px;margin:0 auto 10px;border-radius:21px;display:grid;place-items:center;font-size:30px;background:rgba(255,255,255,.06);border:1px solid var(--ds-line)}
.ds-msg.warn .ds-msg-ic{background:rgba(221,104,82,.18);border-color:rgba(221,104,82,.45)}
.ds-msg.soft .ds-msg-ic{background:rgba(255,209,102,.13);border-color:rgba(255,209,102,.32)}
.ds-msg h3{margin:0 0 6px;font-size:19px;color:#fff3dc;font-family:Estedad,Vazirmatn,Tahoma,sans-serif}
.ds-msg p{margin:0 auto;max-width:400px;font-size:14px;line-height:2;color:var(--ds-cream)}
.ds-msg .ds-hint{margin-top:8px;font-size:12.5px;color:var(--ds-muted)}
.ds-sub{display:block;margin-top:10px;font-size:11.5px;color:var(--ds-muted)}
.ds-btn{margin-top:16px;border:0;border-radius:16px;padding:12px 22px;font-size:14px;font-weight:700;cursor:pointer;color:#4a2810;
  background:linear-gradient(145deg,#ffe3a1,#e8a13e 60%,#d9812f);box-shadow:0 10px 24px rgba(232,131,74,.34);transition:.2s}
.ds-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(232,131,74,.44)}

/* [EN] Phone layout: bottom sheet and tighter paddings. */
@media (max-width:520px){
  .ds-overlay{padding:0;align-items:flex-end}
  .ds-card{border-radius:30px 30px 0 0;max-height:97vh;width:100%}
  .ds-top{padding:14px 14px 26px}
  .ds-brand h2{font-size:18px}.ds-brand p{font-size:11px}
  .ds-disc{width:40px;height:40px;font-size:20px;border-radius:13px}
  .ds-info{margin:-26px 12px 14px;padding:18px 14px 16px}
  .ds-stats{gap:8px}
}
/* [EN] Respect "reduce motion": turn off decorative animations. */
@media (prefers-reduced-motion:reduce){
  .ds-star,.ds-fireflies i,.t-flow,.t-glow,.t-mid,.ds-orb .halo,.ds-orb .pulse,.bloom,.petals .pt,.bigheart{animation:none!important}
  .ds-stage[data-mode=hug] .bigheart{transform:scale(1.15)}
}

/* =========================================================
   لایو لوکیشن (نقشه‌ی زنده)
   ========================================================= */
/* [EN] The HTML [hidden] attribute must always win inside the overlay. */
.ds-overlay [hidden]{display:none!important}

/* تب‌ها — نوار تیره‌ی هم‌رنگ آسمان، زیر سربرگ و بالای صحنه/نقشه */
/* [EN] Tabs (Distance / Live location) below the header. */
.ds-tabbar{position:relative;z-index:6;display:flex;justify-content:center;padding:70px 12px 12px;background:#150a12}
.ds-tabs{display:flex;gap:4px;padding:4px;border-radius:99px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,226,164,.26);
  box-shadow:0 8px 24px rgba(0,0,0,.35);white-space:nowrap}
.ds-tabs button{border:0;border-radius:99px;padding:8px 16px;font-size:13px;font-weight:700;color:#f0d8c0;background:transparent;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:6px}
.ds-tabs button span{font-size:14px}
.ds-tabs button:hover{color:#fff3dc}
.ds-tabs button.on{color:#4a2810;background:linear-gradient(145deg,#ffe3a1,#e8a13e 60%,#d9812f);box-shadow:0 6px 16px rgba(232,131,74,.38)}

/* جعبه‌ی نقشه */
/* [EN] Live-location tab: map box, loading/error states and the Leaflet controls skin. */
.ds-live{position:relative}
.ds-live.idle .ds-liveinfo{margin-top:14px}
.ds-mapbox{position:relative;z-index:0;isolation:isolate;width:100%;height:clamp(340px,52vh,460px);background:#1d0f0d;overflow:hidden}
#dsMap{position:absolute;inset:0;direction:ltr;font-family:Vazirmatn,Tahoma,sans-serif}
#dsMap.leaflet-container{background:#1d0f0d}
.ds-maploading{position:absolute;z-index:400;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--ds-muted);font-size:13px;text-align:center;padding:0 24px;pointer-events:none}
.ds-maploading i{width:30px;height:30px;border-radius:50%;border:3px solid rgba(255,209,102,.2);border-top-color:var(--ds-gold);animation:dsSpin 1s linear infinite}
.ds-maploading.fail{background:rgba(29,15,13,.9)}.ds-maploading.fail i{display:none}

/* دکمه‌های نقشه */
/* [EN] Floating map buttons (both / me / them / satellite). */
.ds-mapbtns{position:absolute;z-index:600;left:10px;bottom:44px;display:flex;flex-direction:column;gap:6px}
.ds-mapbtns button{border:1px solid rgba(255,226,164,.3);border-radius:12px;padding:7px 12px;font-size:12px;font-weight:700;color:#fff3dc;cursor:pointer;
  background:rgba(24,11,10,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:.2s;min-width:64px}
.ds-mapbtns button:hover{border-color:var(--ds-gold)}
.ds-mapbtns button.on{color:#4a2810;border-color:transparent;background:linear-gradient(145deg,#ffe3a1,#e8a13e 60%,#d9812f)}
#dsMap .leaflet-control-zoom{border:1px solid rgba(255,226,164,.3)!important;border-radius:12px;overflow:hidden;margin:0 10px 44px 0}
#dsMap .leaflet-control-zoom a{background:rgba(24,11,10,.82);color:#fff3dc;border-bottom-color:rgba(255,226,164,.2)}
#dsMap .leaflet-control-zoom a:hover{background:rgba(60,32,24,.95)}
#dsMap .leaflet-control-attribution{font-size:10px;background:rgba(24,11,10,.7);color:#d2b097}
#dsMap .leaflet-control-attribution a{color:#ffd166}

/* پین‌ها (آواتار) */
/* [EN] Round avatar pins on the map, and the distance label on the dashed line. */
.ds-pin{background:none!important;border:0!important;overflow:visible}
.ds-pin-in{width:50px;height:50px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#ffe9b4,#c9702c);
  border:3px solid #ffd166;box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 0 6px rgba(255,209,102,.22);animation:dsPinPulse 2.4s ease-out infinite}
.ds-pin.them .ds-pin-in{background:linear-gradient(145deg,#ffd0dd,#c94a77);border-color:#ff7ba0;box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 0 6px rgba(255,123,160,.24);animation-name:dsPinPulseR}
.ds-pin-in img{width:100%;height:100%;object-fit:cover;display:block}
.ds-pin-in b{font-size:22px;color:#4a2810;font-family:Estedad,Vazirmatn,Tahoma,sans-serif}
.ds-pin-nm{position:absolute;left:50%;top:58px;transform:translateX(-50%);padding:2px 9px;border-radius:99px;font-size:11px;font-weight:700;white-space:nowrap;
  color:#fff3dc;background:rgba(24,11,10,.85);border:1px solid rgba(255,226,164,.28);font-family:Vazirmatn,Tahoma,sans-serif;direction:rtl}
@keyframes dsPinPulse{0%{box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 0 0 rgba(255,209,102,.55)}100%{box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 0 18px rgba(255,209,102,0)}}
@keyframes dsPinPulseR{0%{box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 0 0 rgba(255,123,160,.55)}100%{box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 0 18px rgba(255,123,160,0)}}
.leaflet-tooltip.ds-linetip{background:rgba(24,11,10,.88);border:1px solid rgba(255,143,176,.5);color:#ffd0de;font-weight:700;font-size:12px;border-radius:99px;padding:3px 10px;
  box-shadow:0 4px 14px rgba(0,0,0,.4);font-family:Vazirmatn,Tahoma,sans-serif;direction:rtl}
.leaflet-tooltip.ds-linetip:before{display:none}

/* پنل اطلاعات نقشه */
/* [EN] Panel under the map: header with live dot + distance, and one card per person. */
.ds-liveinfo{margin-top:-26px;min-height:0}
.ds-livehead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:12px;font-size:13.5px;color:#fff3dc}
.ds-livehead .live{width:22px;height:22px;display:grid;place-items:center;border-radius:8px;background:rgba(147,177,120,.18)}
.ds-livehead .live i{width:9px;height:9px;border-radius:50%;background:#9ad56a;animation:dsLive 1.6s ease-out infinite}
.ds-livedist{padding:3px 12px;border-radius:99px;background:rgba(255,209,102,.14);color:var(--ds-gold);font-weight:700;font-size:12.5px}
.ds-people{display:grid;gap:9px}
.ds-person{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:18px;text-align:right;background:rgba(255,255,255,.05);border:1px solid rgba(255,226,164,.12)}
.ds-pdot{width:14px;height:14px;border-radius:50%;flex:none;background:#ffd166;box-shadow:0 0 0 5px rgba(255,209,102,.2)}
.ds-person.them .ds-pdot{background:#ff7ba0;box-shadow:0 0 0 5px rgba(255,123,160,.22)}
.ds-pcopy{min-width:0;flex:1}
.ds-pcopy b{display:block;font-size:13.5px;color:#fff3dc}
.ds-coord{display:block;margin-top:2px;font-size:12.5px;color:var(--ds-gold);font-variant-numeric:tabular-nums;letter-spacing:.2px;text-align:right;unicode-bidi:plaintext}
.ds-pcopy small{display:block;margin-top:2px;font-size:11px;line-height:1.7;color:var(--ds-muted)}
.ds-lowacc{font-style:normal;margin-right:6px;white-space:nowrap;font-weight:400;padding:1px 8px;border-radius:99px;background:rgba(221,104,82,.22);color:#ffc0b0;font-size:10.5px}
.ds-ext{flex:none;width:34px;height:34px;border-radius:12px;display:grid;place-items:center;text-decoration:none;font-size:17px;color:var(--ds-gold);background:rgba(255,209,102,.12);border:1px solid rgba(255,209,102,.25);transition:.2s}
.ds-ext:hover{background:rgba(255,209,102,.24)}

@media (max-width:520px){
  .ds-tabbar{padding-top:62px}
  .ds-tabs button{padding:7px 13px;font-size:12.5px}
  .ds-mapbox{height:clamp(320px,50vh,420px)}
}

/* [EN] Keep the header above the tabs. */
.ds-overlay .ds-top{z-index:8}
.ds-tabbar{background:linear-gradient(180deg,#150a12,#150a12)}

/* =========================================================
   بهینه‌سازی گوشی (لگ و پرش)
   - صحنه سه لایه‌ی جداست؛ پس‌زمینه هیچ‌وقت دوباره رسم نمی‌شود
   - انیمیشن‌ها فقط opacity/transform (بدون فیلتر و سایه‌ی متحرک)
   - بلور شیشه‌ای (backdrop-filter) روی گوشی خاموش است
   ========================================================= */
.ds-svg{pointer-events:none}
.ds-stage{contain:layout paint;isolation:isolate}
.ds-card{max-height:96vh;max-height:96dvh;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ds-overlay{-webkit-tap-highlight-color:transparent}
.ds-overlay button,.ds-overlay [data-tab]{touch-action:manipulation}

/* ستاره‌ها و هاله فقط با opacity (تغییر scale روی SVG سنگینه) */
@keyframes dsTw{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes dsHalo{0%,100%{opacity:.75}50%{opacity:1}}
.ds-star{transform:none}
.ds-orb .halo{transform:none}

/* لمس نقشه نباید کارت را اسکرول کند (نقشه خودش جابه‌جا می‌شود) */
.ds-mapbox,#dsMap{touch-action:none}
#dsMap.leaflet-container{-webkit-tap-highlight-color:transparent}

@media (max-width:900px),(pointer:coarse){
  .ds-overlay{-webkit-backdrop-filter:none;backdrop-filter:none;
    background:radial-gradient(circle at 50% 30%,rgba(120,40,40,.3),transparent 60%),rgba(10,5,4,.95)}
  .ds-info{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(160deg,rgba(54,30,24,.98),rgba(30,16,13,.99))}
  .ds-card.is-hug .ds-info{background:linear-gradient(160deg,rgba(84,26,50,.98),rgba(40,14,28,.99))}
  .ds-x,.ds-mapbtns button{-webkit-backdrop-filter:none;backdrop-filter:none}
  .ds-x{background:rgba(20,8,10,.7)}
  .ds-mapbtns button{background:rgba(24,11,10,.92)}
  .ds-card{box-shadow:0 20px 50px rgba(0,0,0,.55)}
  .ds-card.is-hug{box-shadow:0 20px 50px rgba(0,0,0,.55),0 0 50px rgba(255,93,138,.22)}
  .ds-orb .disc{filter:none}
  .ds-unit b{filter:none}
  .ds-orb .pulse.p2{display:none}
  .ds-orb .halo{animation:none;opacity:.9}
  .t-glow{animation:none;opacity:.55}
  .t-mid{animation:none}
  .t-hearts .th:nth-child(3){display:none}
  .ds-fireflies i:nth-child(n+4){display:none}
  .ds-star:nth-child(2n){animation:none;opacity:.7}
  .bigheart{filter:none}
  .ds-stage[data-mode=hug] .petals .pt:nth-child(2n){display:none}
}

/* حالت سبک (وقتی گوشی کند تشخیص داده شد یا کاربر روشنش کرد) */
html.lite .ds-star,html.lite .ds-fireflies i,html.lite .t-flow,html.lite .t-glow,html.lite .t-mid,
html.lite .ds-orb .halo,html.lite .ds-orb .pulse,html.lite .bloom{animation:none!important}
html.lite .ds-fireflies{display:none}
html.lite .t-hearts{display:none}
html.lite .ds-overlay,html.lite .ds-info,html.lite .ds-x,html.lite .ds-mapbtns button{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.lite .ds-orb .disc,html.lite .ds-unit b,html.lite .bigheart{filter:none!important}