:root{
  --amber:#e0a94a; --purple:#7c5bd0; --maroon:#4a1230;
  --radius:16px; --maxw:1100px;
}
[data-theme="dark"]{
  --bg:#141018; --bg2:#1e1726; --panel:rgba(30,23,38,.72); --panel-solid:#241b30;
  --text:#f3ecf7; --muted:#b7a9c6; --border:rgba(255,255,255,.10);
  --accent:var(--amber); --accent2:var(--purple);
  --bg-image:url("../img/bg-dark.png");
}
[data-theme="light"]{
  --bg:#efe7d6; --bg2:#e6dcc6; --panel:rgba(255,252,245,.82); --panel-solid:#fffdf7;
  --text:#2a2130; --muted:#6c5f52; --border:rgba(60,40,20,.16);
  --accent:#9a5b12; --accent2:#5a3ba8;
  --bg-image:url("../img/bg-light.png");
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Vazirmatn,Tahoma,"Segoe UI",system-ui,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.8;
  min-height:100vh; transition:background .3s,color .3s;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background-image:var(--bg-image); background-size:cover; background-position:center;
  opacity:.16; filter:saturate(.9);
}
[lang="fa"],[dir="rtl"]{direction:rtl}
[lang="en"]{direction:ltr}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* header */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
  background:var(--panel); border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; gap:14px; height:66px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color:var(--text)}
.brand img{width:38px; height:38px; object-fit:contain}
.spacer{flex:1}
.btn{
  cursor:pointer; border:1px solid var(--border); background:var(--panel-solid);
  color:var(--text); border-radius:999px; padding:8px 14px; font-family:inherit;
  font-size:14px; display:inline-flex; align-items:center; gap:6px; transition:.2s;
}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn.primary{background:var(--accent); color:#1a1020; border-color:transparent; font-weight:700}
.btn.primary:hover{opacity:.9; color:#1a1020}

/* hero */
.hero{text-align:center; padding:64px 20px 34px}
.hero img.logo{width:96px; height:96px; object-fit:contain; margin-bottom:10px}
.hero h1{font-size:40px; margin:6px 0}
.hero p{color:var(--muted); font-size:18px; max-width:620px; margin:8px auto 22px}
.hero .cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* search + filters */
.toolbar{display:flex; gap:12px; flex-wrap:wrap; margin:26px 0 10px}
.toolbar input,.toolbar select{
  flex:1; min-width:150px; padding:11px 14px; border-radius:12px;
  border:1px solid var(--border); background:var(--panel-solid); color:var(--text); font-family:inherit; font-size:15px;
}

/* cards grid */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; margin:24px 0 60px}
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; transition:.2s; display:flex; flex-direction:column; gap:8px;
}
.card:hover{transform:translateY(-3px); border-color:var(--accent)}
.card h3{margin:0; font-size:19px}
.card .meta{font-size:13px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap}
.tag{background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent);
  padding:2px 9px; border-radius:999px; font-size:12px; border:1px solid var(--border)}
.card .excerpt{color:var(--muted); font-size:14px}
.card .author{font-size:12px; color:var(--muted); margin-top:auto}
.badge-en{font-size:11px; border:1px solid var(--accent2); color:var(--accent2); border-radius:6px; padding:1px 6px}

/* legend page */
.article{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:34px; margin:30px 0 60px; max-width:820px}
.article h1{margin-top:0; font-size:34px}
.article .metabar{display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 22px; padding-bottom:18px; border-bottom:1px solid var(--border)}
.article img{max-width:100%; border-radius:12px}
.article blockquote{border-inline-start:4px solid var(--accent); margin:16px 0; padding:6px 16px; color:var(--muted); background:color-mix(in srgb,var(--accent) 8%,transparent)}
.article pre{background:#00000030; padding:14px; border-radius:10px; overflow:auto}
.article code{background:#00000030; padding:2px 6px; border-radius:6px; font-size:.9em}
.notice{background:color-mix(in srgb,var(--accent2) 14%,transparent); border:1px solid var(--accent2);
  border-radius:12px; padding:12px 16px; margin:16px 0; color:var(--text)}

/* footer */
.site-footer{border-top:1px solid var(--border); background:var(--panel); margin-top:40px}
.footer-inner{display:flex; gap:14px; flex-wrap:wrap; align-items:center; padding:22px 0; color:var(--muted); font-size:14px}
.empty{text-align:center; color:var(--muted); padding:50px}
/* contribute form (استایل مدرن، دو ستونه و گلس‌مورفیسم) */
.contrib-form, .form {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 760px;
  margin: 26px auto 60px;
  box-shadow: var(--shadow-2);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.contrib-form .full, .form .full {
  grid-column: 1 / -1;
}

.contrib-form label, .form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

.contrib-form input, .contrib-form select, .contrib-form textarea,
.form input, .form select, .form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel-solid);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
}

.contrib-form input:focus, .contrib-form textarea:focus,
.form input:focus, .form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

.contrib-form textarea, .form textarea {
  min-height: 200px;
  resize: vertical;
}

@media(max-width: 640px) {
  .contrib-form, .form {
    grid-template-columns: 1fr;
    padding: 20px 16px;
  }
}

/* ===================== 3D depth enhancements ===================== */
:root{
  --shadow-1:0 1px 2px rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.22);
  --shadow-2:0 8px 16px rgba(0,0,0,.30), 0 22px 48px rgba(0,0,0,.40);
}
[data-theme="light"]{
  --shadow-1:0 1px 2px rgba(60,40,20,.10), 0 6px 14px rgba(60,40,20,.12);
  --shadow-2:0 8px 16px rgba(60,40,20,.16), 0 22px 44px rgba(60,40,20,.20);
}

/* parallax-ish fixed backdrop */
body::before{ background-attachment:fixed; }

/* grid gets a shared perspective so cards tilt in real 3D space */
.grid{ perspective:1200px; }

.card{
  position:relative;
  transform-style:preserve-3d;
  box-shadow:var(--shadow-1);
  transition:transform .16s ease-out, box-shadow .25s ease, border-color .25s ease;
  will-change:transform;
}
/* glossy light sweep that appears on hover */
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,0) 45%);
  opacity:0; transition:opacity .25s; transform:translateZ(60px);
}
.card:hover{ box-shadow:var(--shadow-2); border-color:var(--accent); }
.card:hover::after{ opacity:1; }
/* lift the inner content forward in 3D */
.card > *{ transform:translateZ(24px); }
.card h3{ transform:translateZ(42px); }
.card .meta{ transform:translateZ(34px); }

/* floating, shadowed hero logo */
.hero img.logo{
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.45));
  animation:floaty 5s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-12px) rotate(1.5deg)} }

/* 3D-ish buttons */
.btn{ box-shadow:var(--shadow-1); }
.btn:active{ transform:translateY(2px) }
.btn.primary{ box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 45%,transparent) }

/* depth for panels */
.site-header{ box-shadow:0 6px 22px rgba(0,0,0,.22) }
.article,.form{ box-shadow:var(--shadow-2) }
.tag{ box-shadow:0 1px 2px rgba(0,0,0,.14) }
.toolbar input,.toolbar select{ box-shadow:var(--shadow-1) }

@media(prefers-reduced-motion:reduce){
  .hero img.logo{ animation:none }
  .card{ transition:box-shadow .2s, border-color .2s }
}

/* ============ background polish (source image untouched — CSS overlays only) ============ */
/* soften the low-res map so pixelation reads as an intentional soft backdrop */
body::before{
  filter:saturate(.95) blur(1.4px);
  transform:scale(1.06);            /* hides the blur's transparent edge halo */
  opacity:.2;
}
/* ambient light + theme-aware vignette + fine grain, above the map, below content */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>"),
    radial-gradient(60% 45% at 50% 20%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 68%),
    radial-gradient(55% 45% at 82% 82%, color-mix(in srgb,var(--accent2) 18%,transparent), transparent 72%),
    radial-gradient(125% 95% at 50% 48%, transparent 50%, var(--bg) 118%);
  background-size:140px 140px, cover, cover, cover;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat;
}
/* a touch more depth on hero text so it lifts off the softened backdrop */
.hero h1{ text-shadow:0 2px 18px rgba(0,0,0,.35) }
[data-theme="light"] .hero h1{ text-shadow:0 2px 14px rgba(60,40,20,.18) }

/* ================= interactive map ================= */
.map-section{ margin:26px 0 8px }
.map-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px }
.map-head h2{ margin:0; font-size:1.4rem }
.map-head .hint{ color:var(--muted); font-size:.9rem }
.map-wrap{ position:relative; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, color-mix(in srgb,var(--card) 70%,transparent), transparent);
  box-shadow:var(--shadow-1); overflow:hidden; padding:6px }
.iran-svg{ width:100%; height:auto; display:block; touch-action:pan-y }
.map-layer{ transition:transform .1s linear }
.map-glow{ fill:var(--accent); opacity:.12; filter:blur(24px) }
.map-land{ fill:color-mix(in srgb,var(--accent) 9%,transparent); stroke:var(--accent); stroke-width:1.4; opacity:.55 }
.prov{ cursor:pointer }
.prov-dot{ fill:color-mix(in srgb,var(--accent) 45%,var(--card)); stroke:var(--accent); stroke-width:1.2; transition:.16s }
.prov.has .prov-dot{ fill:var(--accent) }
.prov-label{ fill:var(--muted); font-size:11px; font-family:inherit; opacity:0; transition:.16s; pointer-events:none }
.prov-count{ fill:var(--maroon); font-size:9px; font-weight:700; pointer-events:none }
[data-theme="dark"] .prov-count{ fill:#241019 }
.prov:hover .prov-label, .prov:focus .prov-label, .prov.active .prov-label{ opacity:1 }
.prov:hover .prov-dot, .prov:focus .prov-dot{ r:9; filter:drop-shadow(0 0 6px var(--accent)) }
.prov.active .prov-dot{ fill:var(--accent2); stroke:var(--accent2) }
.prov:focus{ outline:none }
.legend-dot{ fill:var(--accent2); stroke:#fff; stroke-width:1; opacity:.9; transition:.16s }
.legend-dot-link:hover .legend-dot{ r:8; filter:drop-shadow(0 0 6px var(--accent2)) }

/* ================= sort control ================= */
.toolbar{ flex-wrap:wrap }
.sortbar{ display:flex; align-items:center; gap:8px; margin:14px 0 2px; flex-wrap:wrap }
.sortbar .lbl{ color:var(--muted); font-size:.9rem }
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--card) }
.seg button{ border:0; background:transparent; color:var(--muted); padding:7px 14px; cursor:pointer; font:inherit; transition:.15s }
.seg button.active{ background:var(--accent); color:#241019; font-weight:700 }
.count-badge{ display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:.85rem }

/* ================= reading mode / legend extras ================= */
.legend-toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:12px 0 4px }
.read-time{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:.9rem }
.share{ position:relative; display:inline-block }
.share-menu{ position:absolute; inset-inline-end:0; top:110%; background:var(--card); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow-2); padding:6px; display:none; z-index:20; min-width:170px }
.share.open .share-menu{ display:block }
.share-menu a, .share-menu button{ display:flex; width:100%; gap:8px; align-items:center; padding:9px 12px; border:0;
  background:transparent; color:var(--text); text-decoration:none; border-radius:8px; cursor:pointer; font:inherit; text-align:start }
.share-menu a:hover, .share-menu button:hover{ background:color-mix(in srgb,var(--accent) 16%,transparent) }
.audio-block{ margin:18px 0; padding:14px; border:1px solid var(--line); border-radius:var(--radius);
  background:color-mix(in srgb,var(--card) 70%,transparent); box-shadow:var(--shadow-1) }
.audio-block .cap{ display:flex; align-items:center; gap:8px; color:var(--muted); margin-bottom:8px; font-size:.92rem }
.audio-block audio{ width:100% }
body.reading .site-header, body.reading .site-footer, body.reading .metabar,
body.reading .legend-toolbar, body.reading .related, body.reading .comments{ display:none !important }
body.reading .article{ max-width:720px }
body.reading .body{ font-size:1.28rem; line-height:2.1 }
.reading-exit{ position:fixed; inset-block-start:16px; inset-inline-end:16px; z-index:50; display:none }
body.reading .reading-exit{ display:inline-flex }

/* ================= related ================= */
.related{ margin-top:34px }
.related h2{ font-size:1.2rem; margin-bottom:12px }
.related .grid{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) }

/* ================= comments ================= */
.comments{ margin-top:36px; border-top:1px solid var(--line); padding-top:18px }
.comments h2{ font-size:1.2rem; margin-bottom:10px }

/* ================= contributors ================= */
.contrib-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:18px }
.contrib-card{ display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow-1) }
.contrib-ava{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-weight:800;
  color:#241019; background:linear-gradient(135deg,var(--accent),var(--accent2)); flex:0 0 auto }
.contrib-card .n{ font-weight:700 } .contrib-card .c{ color:var(--muted); font-size:.85rem }

/* ================= seasonal ================= */
[data-season="yalda"]{ --accent2:#c0304a }
[data-season="yalda"] .hero::after{ content:"🍉"; display:block; font-size:1.4rem; margin-top:6px; opacity:.85 }
#snow{ position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden }
#snow span{ position:absolute; top:-6%; color:#fff; opacity:.5; animation:fall linear infinite }
@keyframes fall{ 0%{ transform:translateY(-10vh) translateX(0) } 100%{ transform:translateY(110vh) translateX(20px) } }
@media (prefers-reduced-motion: reduce){ #snow{ display:none } }

/* ================= install button ================= */
#installBtn{ display:none }
@media (max-width:640px){
  .map-head h2{ font-size:1.2rem }
  .prov-label{ font-size:13px }
}

/* ============================================================
   ریسپانسیو موبایل — mobile responsive pass
   ============================================================ */

/* header: اجازه‌ی شکست خط + دکمه‌های جمع‌وجور در صفحه‌ی کوچک */
@media (max-width:820px){
  .header-inner{ height:auto; min-height:60px; flex-wrap:wrap; row-gap:8px; padding:10px 0 }
  .header-inner .spacer{ order:-1; flex-basis:100%; height:0 }
  .brand{ font-size:18px }
  .brand img,.brand-logo{ width:32px; height:32px }
  .site-header .btn{ padding:7px 11px; font-size:14px }
}

@media (max-width:640px){
  html{ -webkit-text-size-adjust:100% }
  .container{ padding:0 14px }

  /* header در موبایل: نوار دکمه‌ها قابل اسکرول افقی */
  .header-inner{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; gap:8px; padding:10px 0 }
  .header-inner::-webkit-scrollbar{ display:none }
  .header-inner .spacer{ display:none }
  .brand{ position:sticky; inset-inline-start:0; flex:0 0 auto }
  .site-header .btn{ flex:0 0 auto; white-space:nowrap; padding:7px 12px; font-size:13px }

  /* hero */
  .hero{ padding:34px 14px 22px }
  .hero h1{ font-size:28px }
  .hero p,.hero .tagline,.hero .hero-text{ font-size:15px }
  .hero img.logo{ width:74px; height:74px }
  .hero .cta,.hero-cta{ gap:8px }
  .hero .btn,.hero-cta .btn{ flex:1 1 auto; text-align:center }

  /* ابزارهای فیلتر: تمام‌عرض */
  .toolbar{ gap:8px; margin:16px 0 8px }
  .toolbar input,.toolbar select{ flex:1 1 100%; width:100%; min-width:0 }
  #seasonSel{ flex:1 1 100% }

  /* مرتب‌سازی */
  .sortbar{ gap:6px }
  .sortbar .spacer{ display:none }
  .count-badge{ flex-basis:100%; margin-top:2px }
  .seg{ width:100%; justify-content:space-between }
  .seg button{ flex:1 1 0; padding:8px 6px; font-size:13px; text-align:center }

  /* گرید تک‌ستونی */
  .grid{ grid-template-columns:1fr; gap:14px; margin:18px 0 44px; perspective:none }
  .card{ transform:none !important }

  /* نقشه */
  .map-section{ margin:18px 0 4px }
  .map-head h2{ font-size:1.15rem }
  .map-head .hint{ font-size:.8rem }
  .map-wrap{ padding:2px }
  .prov-label{ font-size:14px }
  .prov-count{ font-size:11px }

  /* مقاله/افسانه */
  .article{ padding:18px 4px }
  .body{ font-size:1.02rem; line-height:1.95 }
  body.reading .body{ font-size:1.14rem; line-height:2 }
  .legend-toolbar{ gap:6px }
  .legend-toolbar .btn,.read-time{ font-size:13px }

  /* منوی اشتراک‌گذاری در موبایل: تمام‌عرض پایین */
  .share-menu{ position:fixed; inset-inline:12px; inset-block-end:12px; top:auto; min-width:0; width:auto }
  .share.open .share-menu{ display:block }

  /* صدا و مشارکت‌کنندگان */
  .audio-block{ padding:12px }
  .contrib-grid{ grid-template-columns:1fr; gap:10px }
  .related .grid{ grid-template-columns:1fr }

  /* فرم مشارکت */
  .contrib-form{ display:grid; grid-template-columns:1fr; gap:12px }
  .contrib-form .full{ grid-column:1 }

  /* دکمه‌ی خروج از حالت مطالعه */
  .reading-exit{ inset-block-start:10px; inset-inline-end:10px }
}

@media (max-width:400px){
  .hero h1{ font-size:24px }
  .site-header .btn{ padding:6px 10px; font-size:12px }
  .seg button{ font-size:12px }
}

/* ============================================================
   منوی همبرگری موبایل (جایگزین نوار شلوغ) — mobile hamburger menu
   این بلوک عمداً آخر فایل است تا قوانین هدر قبلی را بازنویسی کند.
   ============================================================ */
.nav-drawer{ display:flex; align-items:center; gap:14px; margin-inline-start:auto }
.nav-toggle{ display:none; font-size:20px; line-height:1; padding:6px 13px }

@media (max-width:820px){
  .header-inner{ height:60px !important; min-height:60px; flex-wrap:nowrap !important;
    overflow:visible !important; position:relative }
  .brand{ position:static !important }
  .nav-toggle{ display:inline-flex; margin-inline-start:auto }
  .nav-drawer{
    position:absolute; top:calc(100% + 8px); inset-inline-end:0; margin:0;
    flex-direction:column; align-items:stretch; gap:8px;
    background:var(--panel-solid); border:1px solid var(--border); backdrop-filter:none; -webkit-backdrop-filter:none;
    border-radius:14px; padding:10px; min-width:min(240px,72vw);
    box-shadow:var(--shadow-2,0 12px 32px rgba(0,0,0,.4)); display:none; z-index:70;
  }
  .header-inner.nav-open .nav-drawer{ display:flex }
  .nav-drawer .btn{ width:100%; justify-content:center; white-space:nowrap; font-size:15px; padding:10px 12px }
  @keyframes navDrop{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
}