/* ===== Base (fullscreen map, hidden page scroll) ===== */
html, body{
  margin:0; padding:0; height:100%;
  overflow:hidden;                 /* صفحه اسکرول نداشته باشه */
  font-family:sans-serif;
}

/* ظرف اصلی (اسکرولر واقعی رویش فیکس می‌شود) */
#forest-canvas{
  position:fixed; inset:0;
  overflow:hidden;                 /* اسکرول داخل zoom-wrapper (بعداً با SCROLLER FIX بازتعریف میشه) */
  background:#000;
  cursor:grab;
}
.tree .tree-hit{
  position:absolute; inset:0;
  background:transparent; border:0; padding:0;
  appearance:none; -webkit-appearance:none;
  cursor:inherit;
}

#forest-canvas:active{ cursor:grabbing; }

/* ظرف اسکرول (نوار مخفی) */
#zoom-wrapper{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:auto;                   /* اسکرول اینجاست */
  -ms-overflow-style:none;         /* IE/Edge */
  scrollbar-width:none;            /* Firefox */
}
#zoom-wrapper::-webkit-scrollbar{  /* Chrome/Safari */
  width:0; height:0; display:none;
}

/* بوم نقشه (ابعاد بزرگ) */
#map-content{
  position:relative;
  width:22000px;                   /* یا با JS از data-w ست کن */
  height:16000px;                  /* یا با JS از data-h ست کن */
  background: repeat;
  background-size:400px 400px;
  z-index:4;                       /* بالاتر از لایه‌های پارالاکس */
}

/* ===== Trees ===== */
.tree{
  position:absolute;
  width:70px;
  text-align:center;
  font-size:12px;
  color:#fff;
  text-shadow:0 0 2px #000;
  transform:translateX(-50%);      /* مبنا: مرکز کردن افقی */
  z-index:10;                      /* روی ابر (در حالت نقشه) */
  cursor:pointer;
  will-change:transform;
}
.tree img{ width:48px; height:48px; display:block; margin:auto; }

/* حالت خصوصی */
.tree[data-private="1"], .tree.is-private{ opacity:.85; filter:grayscale(.35); cursor:not-allowed; }
.tree[data-private="1"] img, .tree.is-private img{ opacity:.8; filter:grayscale(.4) contrast(.95); }

/* ===== Mobile App FAB Stack (fixed bottom corner) ===== */
:root{
  --fab-size: 56px;
  --fab-gap: 14px;
  --fab-right: 16px;
  --fab-bottom: 20px;
}

.jangal-fab{
  position: fixed;
  right: var(--fab-right);
  width: var(--fab-size); height: var(--fab-size);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.88);
  color: #222; font-size: 26px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  z-index: 99999;
  transition: transform .15s ease, box-shadow .15s ease;
}
.jangal-fab:hover{ transform: scale(1.07); box-shadow:0 8px 20px rgba(0,0,0,.3); }
.jangal-fab:active{ transform: scale(.95); }

/* ترتیب عمودی */
#go-home.jangal-fab   { bottom: var(--fab-bottom); }
#goto-me.jangal-fab   { bottom: calc(var(--fab-bottom) + var(--fab-size) + var(--fab-gap)); }
#center-map.jangal-fab{ bottom: calc(var(--fab-bottom) + 2*(var(--fab-size) + var(--fab-gap))); }

/* موبایل کوچیک‌تر */
@media (max-width:768px){
  :root{ --fab-size: 60px; --fab-gap: 12px; --fab-right: 14px; }
}
/* === MOBILE FIX for FABs (force bottom-right, safe-area, size) === */
@media (max-width: 768px), (hover: none) and (pointer: coarse){
  :root{
    --fab-size: 60px;
    --fab-gap: 12px;
    --fab-right: 14px;
    --fab-bottom: 12px;
  }

  /* سه دکمه را به راست‌پایین مجبور کن؛ هر left قبلی خنثی شود */
  #go-home.jangal-fab,
  #goto-me.jangal-fab,
  #center-map.jangal-fab{
    left: auto !important;
    right: calc(var(--fab-right) + env(safe-area-inset-right, 0px)) !important;
    bottom: calc(var(--fab-bottom) + env(safe-area-inset-bottom, 0px)) !important;
    width: var(--fab-size); height: var(--fab-size);
    font-size: 28px;
    z-index: 2147483647 !important;
    text-indent: 0;           /* اگر قبلاً پنهان کرده بودی، آیکون داخلی هم اوکی بماند */
  }

  /* چیدمان ستونی: خانه پایین، مکان بالاتر، 🎯 بالاترین */
  #go-home.jangal-fab{ transform: none; }
  #goto-me.jangal-fab{
    bottom: calc(var(--fab-bottom) + var(--fab-size) + var(--fab-gap) + env(safe-area-inset-bottom, 0px)) !important;
  }
  #center-map.jangal-fab{
    bottom: calc(var(--fab-bottom) + 2*(var(--fab-size) + var(--fab-gap)) + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* --- Keep popup above FABs --- */
#popup-container,
.popup-sheet-wrapper,
.popup-inner,
.popup-sheet{
  z-index: 100000 !important;   /* از دکمه‌ها بالاتر */
  position: fixed;              /* مطمئن شو روی ویو ثابت باشه */
}

/* --- FABs lower than popup --- */
#go-home.jangal-fab,
#goto-me.jangal-fab,
#center-map.jangal-fab,
#go-home,
#goto-me,
#center-map{
  z-index: 9999 !important;     /* کمتر از popup */
}

/* وقتی پاپ‌آپ باز است، دکمه‌ها پنهان و غیرکلیک‌پذیر شوند */
body.popup-open #go-home,
body.popup-open #goto-me,
body.popup-open #center-map{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(.95);
  transition: opacity .12s ease;
}
/* FAB Menu */
:root{ --fab-size:60px; --fab-gap:12px; }
#fab-menu{ position:fixed; right:16px; bottom:16px; z-index:10000; }
#fab-main{
  width:var(--fab-size); height:var(--fab-size); border-radius:999px;
  display:flex; align-items:center; justify-content:center; font-size:28px;
  background:rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 26px rgba(0,0,0,.22); backdrop-filter:blur(10px); cursor:pointer;
  transition:transform .15s ease;
}
#fab-main:active{ transform:scale(.95); }

#fab-items{
  position:absolute; right:0; bottom:calc(var(--fab-size) + 10px);
  display:flex; flex-direction:column; gap:var(--fab-gap);
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease;
}
/* دکمه‌های قبلی داخل منو: گرد و استاتیک */
#fab-items > *{
  position:static !important; width:56px; height:56px; border-radius:999px;
  display:flex !important; align-items:center; justify-content:center;
  background:rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 20px rgba(0,0,0,.22); font-size:26px; cursor:pointer;
}

/* حالت باز */
#fab-menu.open #fab-items{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* وقتی پاپ‌آپ بازه، منو مخفی */
body.popup-open #fab-menu{ opacity:.0; pointer-events:none; }

/* ===== Popup (desktop two-column + mobile sheet) ===== */
#popup-container{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.4); z-index:99999;
  justify-content:center; align-items:center; padding:20px; direction:rtl;
}
.popup-sheet-wrapper{
  box-sizing:border-box; display:flex; justify-content:center; align-items:center;
  position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:99999; padding:0 16px;
}
/* دسکتاپ */
.popup-inner{
  display:flex; background:#fff; border-radius:14px; padding:24px 20px 60px;
  width:90%; max-width:600px; box-shadow:0 4px 20px rgba(0,0,0,.2);
  position:relative; text-align:right;
}
.popup-left, .popup-right{ flex:1; padding:10px 20px; display:flex; flex-direction:column; justify-content:flex-start; }
.popup-left{ align-items:center; border-left:1px solid #ddd; }
.popup-left .avatar{ width:80px; height:80px; border-radius:50%; object-fit:cover; margin-bottom:10px; }
.username{ font-weight:bold; font-size:16px; text-align:center; }
.level-title{ font-size:13px; color:#777; margin-top:4px; text-align:center; }
.popup-right{ align-items:flex-start; }
.popup-right div{ margin-bottom:6px; }
.medals-scroll{
  max-height:120px; overflow-y:auto; margin-top:10px;
  display:flex; flex-wrap:wrap; justify-content:flex-start; gap:6px;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
}
.medal{ width:32px; height:32px; }
.close-btn{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  background:#dc3545; color:#fff; border:none; padding:8px 18px; border-radius:8px; cursor:pointer; font-size:14px;
}
/* موبایل: شیت مرکزی */
@media (max-width:768px){
  .popup-sheet{
    width:90%; max-width:360px; background:#fff; border-radius:16px;
    padding:24px 16px 70px; box-shadow:0 4px 20px rgba(0,0,0,.2);
    display:flex; flex-direction:column; align-items:center; text-align:center; position:relative;
    animation:fadeInCenter .3s ease-out;
  }
  .popup-sheet .avatar{ width:80px; height:80px; border-radius:50%; object-fit:cover; margin-bottom:10px; }
  .popup-sheet .username{ font-weight:bold; font-size:16px; margin-bottom:6px; }
  .popup-sheet .level-title{ font-size:13px; color:#777; margin-bottom:14px; }
  .popup-sheet hr{ width:100%; border:none; border-top:1px solid #eee; margin:12px 0; }
  .popup-sheet .leaf-counts{ font-size:14px; margin-bottom:12px; }
  .popup-sheet .popup-medals{ font-weight:bold; margin-bottom:8px; }
  .popup-sheet .popup-medal-list{
    display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
    max-height:100px; overflow-y:auto; scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  }
  .popup-sheet .medal{ width:32px; height:32px; }
  .popup-sheet .close-btn{
    position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
    background:#dc3545; color:#fff; border:none; padding:8px 18px; border-radius:8px; cursor:pointer; font-size:14px;
  }
  @keyframes fadeInCenter{ from{ transform:scale(.8); opacity:0; } to{ transform:scale(1); opacity:1; } }
}

/* ==== SCROLLER FIX ==== */
#forest-canvas{
  overflow: auto !important;          /* قبلاً hidden بود */
  direction: ltr !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#forest-canvas::-webkit-scrollbar{ display:none; }
#forest-canvas{ scrollbar-width: none; }
#zoom-wrapper{ position: relative !important; width: 22000px; height: 16000px; }
#map-content{ position: absolute; inset: 0; }

/* ===== PARALLAX LAYERS (three-depth) ===== */
.map-layer{
  position:absolute; top:0; left:0; width:100%; height:100%;
  background-repeat:repeat; background-size:400px 400px;
  will-change:transform, filter, opacity; pointer-events:none;
  filter: blur(1px); opacity:.96; transition: filter .6s ease, opacity .6s ease;
}

/* Map intro – واضح‌تر */
.jangal-enter{ opacity:0; transform:scale(1.03); }
.jangal-enter-active{
  opacity:1; transform:scale(1);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
/* وقتی اینترو فعال شد، لایه‌ها واضح شوند */
.jangal-enter-active ~ .map-layer, .map-layer{ filter: blur(0); opacity:1; }

/* subtle float for trees */
@keyframes treeFloat {
  0%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-3px)} 100%{transform:translateX(-50%) translateY(0)}
}

/* popup pop-in */
@keyframes popIn { from{ transform:scale(.92); opacity:0; } to{ transform:scale(1); opacity:1; } }
.popup-inner, .popup-sheet { animation: popIn .22s ease-out; }

/* کاهش حرکت */
@media (prefers-reduced-motion: reduce){
  .tree, .popup-inner, .popup-sheet { animation: none !important; }
  .jangal-enter-active, .map-layer { transition: none !important; }
}

/* ===== Clouds layer (default: روی درخت‌ها) ===== */
#jangal-clouds-layer{
  position:absolute; left:0; top:0; width:100%; height:100%;
  pointer-events:none; z-index:12;   /* ← ابرها روی درخت‌ها (نقشه) */
}
#jangal-clouds-layer.debug{ outline:2px dashed magenta; }
#jangal-clouds-layer .cloudPatch{
  position:absolute; width:512px; height:256px; overflow:visible; transform-origin:left top;
}
#jangal-clouds-layer .cloudPiece{
  position:absolute; left:50%; top:50%;
  width:128px; height:128px; margin:-64px 0 0 -64px;
  opacity:.9; will-change:transform,opacity; image-rendering:auto;
}
/* fallback وقتی cloud.png نیست */
#jangal-clouds-layer .cloudPuff{
  position:absolute; left:50%; top:50%;
  width:200px; height:140px; margin:-70px 0 0 -100px; border-radius:50%;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255,255,255,.92) 0 40%, rgba(255,255,255,0) 42%),
    radial-gradient(ellipse at 62% 48%, rgba(255,255,255,.88) 0 46%, rgba(255,255,255,0) 48%),
    radial-gradient(ellipse at 45% 60%, rgba(255,255,255,.80) 0 38%, rgba(255,255,255,0) 40%);
  filter: blur(4px); opacity:.85; will-change:transform,opacity;
}

/* لایه‌بندی نهایی (نقشه) */
#bg-far{ z-index:1; } #bg-mid{ z-index:2; } #bg-main{ z-index:3; }
#forest-ui, #popup-container{ z-index:20; } /* UI بالاترین */

/* ==================== RCP (Restrict Content Pro) OVERRIDES ==================== */
/* هدف: در صفحات RCP، ابرها پشت فرم باشند و روی موبایل به خاطر ابرها اسکرول اضافه نشود. */

/* اگر اسکریپت ابرها روی body سوار شده (صفحه RCP)، معمولاً فرم کلاس .rcp_form دارد.
   چون ابر بعد از فرم به body اضافه می‌شود، از sibling selector استفاده می‌کنیم: */
body .rcp_form ~ #jangal-clouds-layer{
  position:fixed;         /* ثابت به ویوپورت تا ارتفاع اضافه نسازد */
  inset:0;                /* تمام صفحه */
  height:100vh;           /* دقیقاً قد ویو */
  overflow:hidden;        /* هرچی بیرون زد، دیده نشه (بدون اسکرول اضافه) */
  z-index:1;              /* پشت فرم */
}

/* خود فرم را بالاتر از ابر نگه دار */
body .rcp_form{
  position:relative; 
  z-index:1000;           /* جلوتر از ابر */
}

/* اگر صفحه‌ی RCP بلند است، باز هم اطمینان: ابر ثابت است و اسکرول بابت ابر ایجاد نمی‌شود */
@media (max-width: 768px){
  body .rcp_form ~ #jangal-clouds-layer{
    position:fixed !important;
    inset:0 !important;
    height:100vh !important;
    overflow:hidden !important;
    z-index:1 !important; /* پشت فرم موبایل هم */
  }
  /* در موبایل اگر کل صفحه به‌خاطر ابر می‌لرزید، این خط کمک می‌کند: */
  html, body{ overscroll-behavior: none; }
}

/* اگر صفحه‌ی RCP بک‌گراند خودش را می‌پوشاند، می‌توانی شفافیت ابر را سبک‌تر کنی: */
body .rcp_form ~ #jangal-clouds-layer .cloudPiece{ opacity:.7; }

/* GPU-friendly hints */
#jangal-clouds-layer .cloudPiece{
  will-change: transform;
  backface-visibility: hidden;
}

/* سبز دقیقاً هم‌قد قرمز می‌شود */
#popup-container .popup-cta .jg-btn-store,
#popup-container .popup-cta .close-btn{
  box-sizing: border-box;
}

#popup-container .popup-cta .jg-btn-store{
  /* height را از یک متغیر می‌گیرد که در JS ست می‌کنیم */
  display:inline-flex; align-items:center; justify-content:center;
  height: var(--close-h, auto);
  padding: 0 18px;               /* چون height ثابت می‌شود */
  border-radius:8px; font-size:14px; line-height:1;
  background:#10b981; color:#fff; text-decoration:none; cursor:pointer;
}
/* داک‌کردن کانتینر دکمه‌ها در جای دکمه قرمزِ قبلی (پایین-وسط) */
#popup-container .popup-inner .popup-cta,
#popup-container .popup-sheet .popup-cta{
  position:absolute;
  bottom:16px; left:50%;
  transform:translateX(-50%);
  display:flex; gap:.6rem; justify-content:center; align-items:center;
  margin-top:0;   /* بی‌اثر */
}

/* قرمز رو از absolute خارج کن تا کنار سبز بیاد */
#popup-container .popup-cta .close-btn{
  position:static !important;
  left:auto !important; bottom:auto !important; transform:none !important;
  margin:0;
}

#popup-container .popup-cta .jg-btn-store:hover{ opacity:.9; }
#popup-container .popup-cta .jg-btn-store:focus{ outline:2px solid rgba(16,185,129,.5); outline-offset:2px; }