/* ═══════════════════════════════════════════════════════════
   theme-lx.css — هماهنگ‌سازیِ کلِ اپ با زبانِ طراحیِ صفحه‌ی اول
   (آبیِ مدرن + سبزِ زمرد + خنثیِ تمیز)  ·  فقط ظاهر، بدونِ تغییرِ منطق
   بعد از style.css بارگذاری می‌شود.  (.lx لندینگ توکن‌های خودش را دارد و متأثر نمی‌شود)
════════════════════════════════════════════════════════════ */
:root{
  --p:#2563EB;  --p2:#1D4ED8;  --p3:#EFF4FF;
  --g:#10B981;  --g2:#059669;  --g3:#ECFDF5;
  --bg:#F6F8FC; --bg2:#FFFFFF; --bg3:#EFF4FF;
  --card:#FFFFFF; --card2:#F8FAFC;
  --border:#E7ECF3; --border2:#D6DEEA;
  --text:#0F172A; --text2:#334155; --text3:#64748B;
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 20px -12px rgba(15,23,42,.12);
  --shadow2:0 16px 34px -16px rgba(30,58,138,.24), 0 4px 12px -6px rgba(15,23,42,.10);
  --rad:16px; --radsm:11px;
}

/* پس‌زمینه‌ی تمیزتر — حباب‌های شناور را آرام می‌کنیم */
body{background:var(--bg)}
body::before,body::after{display:none!important}
::-webkit-scrollbar-track{background:#EAEFF6}
::-webkit-scrollbar-thumb{background:#C6D2E4}

/* ── سربرگِ خوش‌آمد (داشبورد) — تمیزتر، آیکونِ کوچک‌تر ── */
.hero{
  background:linear-gradient(135deg,var(--p2) 0%,var(--p) 60%,#3B82F6 100%);
  box-shadow:0 14px 30px -16px rgba(37,99,235,.5);
  border-radius:20px;padding:1.6rem 1.75rem;
}
.hero::before{background:rgba(255,255,255,.10)}
.hero-txt h2{font-size:1.35rem;letter-spacing:-.01em}
.hero-txt p{opacity:.85}
.hero-emoji{font-size:40px}

/* ── عنوان‌های بخش — یکدست و خوانا (به‌جای متنِ گرادیانی) ── */
.sec-head h2{
  font-size:1.4rem;font-weight:800;letter-spacing:-.01em;
  background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--text);
}
.sec-head p{color:var(--text3);font-size:.9rem}

/* ── کارت‌های آمار — مرزِ تمیز، آیکونِ متعادل ── */
.scard{border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:1.1rem 1.2rem}
.scard:hover{transform:translateY(-3px);border-color:var(--border2);box-shadow:var(--shadow2)}
.scard-ico{font-size:22px;margin-bottom:.5rem}
.scard-v{font-size:1.7rem;letter-spacing:-.01em;color:var(--text)}
.scard-l{color:var(--text3)}

/* ── کارت‌های ناوبریِ داشبورد — پرداختِ ظریف، آیکونِ کوچک‌تر ── */
.dnav-card{border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:1.2rem 1rem}
.dnav-card::before{height:3px}
.dnav-card:hover{transform:translateY(-4px);box-shadow:var(--shadow2)}
.dnav-ico{font-size:2rem;margin-bottom:.45rem}
.dnav-t{font-size:.95rem;font-weight:800;color:var(--text)}
.dnav-d{color:var(--text3)}

/* ── کارت‌های محتوا / جدول‌ها ── */
.ccard{border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.ccard-h{font-weight:800;color:var(--text)}
.tbl th{color:var(--text3);border-bottom:1px solid var(--border);font-weight:700}
.tbl td{border-bottom:1px solid var(--border)}
.tbl tr:hover td{background:var(--card2)}

/* ── دکمه‌ها ── */
.btn-add{
  background:var(--p);box-shadow:0 8px 18px -8px rgba(37,99,235,.55);
  border-radius:12px;padding:10px 18px;font-weight:700;
}
.btn-add:hover{background:var(--p2);transform:translateY(-1px);opacity:1}
.btn-edit{background:var(--p3);color:var(--p)}
.btn-sm{border-radius:9px}

/* ── نشان‌ها ── */
.pill-p{background:var(--p3);color:var(--p)}
.pill-g{background:var(--g3);color:var(--g2)}

/* ── info-box ── */
.info-box{border-radius:12px}

/* ── ورودی‌ها و تب‌ها (لمسِ سبک) ── */
.fg input,.fg select,.fg textarea{border-radius:12px}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--p);box-shadow:0 0 0 4px var(--p3)}
.tab.on{color:var(--p)}

/* ── سربرگِ خوش‌آمدِ کوچکِ داخلِ محتوا (sec-head/hero سازگاری موبایل) ── */
@media(max-width:560px){
  .hero{padding:1.3rem 1.25rem;border-radius:16px}
  .hero-txt h2{font-size:1.2rem}
  .hero-emoji{font-size:34px}
  .scard-v{font-size:1.5rem}
}

/* دسترس‌پذیری: فوکوسِ واضح روی عناصرِ تعاملی */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[onclick]:focus-visible{
  outline:3px solid var(--p3);outline-offset:2px;border-radius:8px;
}
@media(prefers-reduced-motion:reduce){
  .hero-emoji{animation:none}
}

/* ═══════════════════════════════════════════
   نوار ابزارِ داشبورد (مربع‌های کوچکِ افقی) + کارتِ گزارش
════════════════════════════════════════════ */
.dtoolbar{
  display:flex;flex-wrap:wrap;gap:10px;margin:0 0 1.1rem;
}
.dtool{
  flex:0 0 auto;width:84px;min-height:84px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  background:#fff;border:1px solid var(--border);border-radius:16px;
  cursor:pointer;font-family:inherit;padding:12px 6px;
  transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease;
  position:relative;
}
.dtool:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--dc,var(--p))}
.dtool:active{transform:translateY(0)}
.dtool-ico{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-size:1.35rem;background:#EFF4FF;background:color-mix(in srgb,var(--dc,#2563EB) 14%,#fff);
}
.dtool-t{font-size:.72rem;font-weight:700;color:var(--text2);text-align:center;line-height:1.3}
@media(max-width:560px){
  .dtoolbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .dtool{width:76px;min-height:76px}
  .dtool-ico{width:34px;height:34px;font-size:1.2rem}
}

/* کارتِ گزارش/خلاصه */
.report-card{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:1.2rem 1.25rem;margin-bottom:1.1rem}
.report-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.report-head b{font-size:1.05rem;font-weight:800;color:var(--text)}
.report-head span{font-size:.78rem;color:var(--text3)}
.report-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:1.1rem}
.rstat{background:var(--card2);border:1px solid var(--border);border-radius:13px;padding:.85rem .5rem;text-align:center}
.rstat-v{font-size:1.5rem;font-weight:800;color:var(--text);letter-spacing:-.01em}
.rstat-l{font-size:.72rem;color:var(--text3);margin-top:2px}
.report-tasks-t{font-size:.82rem;font-weight:700;color:var(--text3);margin-bottom:.6rem}
.report-tasks{display:grid;gap:.5rem}
@media(min-width:600px){.report-tasks{grid-template-columns:1fr 1fr}}
.task-row{
  display:flex;align-items:center;gap:11px;padding:.6rem .7rem;border-radius:13px;
  border:1px solid var(--border);background:var(--card2);cursor:pointer;
  transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;text-decoration:none;
}
.task-row:hover{background:#fff;border-color:var(--p);transform:translateY(-1px);box-shadow:var(--shadow)}
.task-row .t-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:1.15rem;flex:none;background:#EFF4FF;background:color-mix(in srgb,var(--tc,#2563EB) 14%,#fff)}
.task-row .t-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.task-row .t-title{font-size:.9rem;font-weight:700;color:var(--text);line-height:1.4}
.task-row .t-sub{font-size:.74rem;color:var(--text3);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-row .t-arrow{flex:none;width:24px;height:24px;border-radius:50%;background:var(--bg3);color:var(--p);display:grid;place-items:center;font-size:1rem;font-weight:800}

/* ═══ کسرِ زیبا (صورت روی مخرج با خط) برای درسنامه‌ها ═══ */
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 3px;line-height:1.02;font-weight:700}
.fr>b{padding:0 6px 1px;border-bottom:2px solid currentColor}
.fr>i{font-style:normal;padding-top:1px}
.fr.big{font-size:1.15em}
/* بلوک‌های آموزشیِ کمکی */
.g6-steps{counter-reset:g6s;display:grid;gap:.6rem;margin:.4rem 0}
.g6-step{display:flex;gap:.6rem;align-items:flex-start;background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:.7rem .8rem}
.g6-step::before{counter-increment:g6s;content:counter(g6s);flex:none;width:24px;height:24px;border-radius:8px;background:var(--p);color:#fff;font-weight:800;font-size:.8rem;display:grid;place-items:center}
.g6-note{border-inline-start:4px solid var(--y);background:var(--y3);border-radius:10px;padding:.7rem .9rem;margin:.5rem 0;font-size:.9rem}
.g6-tip{border-inline-start:4px solid var(--g);background:var(--g3);border-radius:10px;padding:.7rem .9rem;margin:.5rem 0;font-size:.9rem}
.g6-warn{border-inline-start:4px solid var(--o);background:#FFF3EC;border-radius:10px;padding:.7rem .9rem;margin:.5rem 0;font-size:.9rem}

/* ═══ گرافیک و انیمیشنِ اعداد اعشاری (فصل ۳) ═══ */
.pvtab{width:100%;border-collapse:collapse;text-align:center;font-size:.8rem;margin:.5rem 0;overflow:hidden;border-radius:12px}
.pvtab th,.pvtab td{border:1px solid var(--border);padding:6px 4px}
.pvtab .h-int{background:#EFF4FF;color:var(--p2);font-weight:800}
.pvtab .h-dec{background:#FFF3EC;color:#C2410C;font-weight:800}
.pvtab .c-int{background:#F7F9FF}
.pvtab .c-dec{background:#FFF8F3}
.pvtab .comma{background:var(--p);color:#fff;font-weight:900}

/* نوارِ دهم‌ها (نمایشِ متحرکِ عدد اعشاری) */
.decbar{display:flex;gap:3px;max-width:300px;margin:.7rem auto}
.decbar i{flex:1;height:36px;border-radius:6px;background:var(--bg3);border:1px solid var(--border);transform-origin:bottom}
.decbar i.on{background:linear-gradient(180deg,#3B82F6,var(--p));border-color:var(--p);animation:decfill .45s ease both}
@keyframes decfill{from{transform:scaleY(.15);opacity:.2}to{transform:scaleY(1);opacity:1}}
.deccap{text-align:center;font-weight:800;color:var(--p);font-size:1.1rem;margin-top:2px}

/* شبکه‌ی صدم (۱۰×۱۰) */
.decgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;max-width:200px;margin:.7rem auto;aspect-ratio:1}
.decgrid span{background:var(--bg3);border-radius:2px;aspect-ratio:1}
.decgrid span.on{background:var(--g);animation:decpop .4s ease both}
@keyframes decpop{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}

/* ستونِ جمع/تفریقِ اعشاری با هم‌ترازیِ ممیز */
.colsum{display:inline-block;font-variant-numeric:tabular-nums;font-weight:800;font-size:1.15rem;background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:.7rem 1.1rem;direction:ltr;text-align:right;line-height:1.7}
.colsum .op{color:var(--p)}
.colsum .rule{border-top:2px solid var(--text);margin-top:3px;padding-top:3px}
.colsum .cma{color:var(--r)}

/* ورودِ نرمِ بلوک‌های درسنامه */
.learn-block{animation:g6up .5s ease both}
@keyframes g6up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .learn-block,.decbar i.on,.decgrid span.on{animation:none!important}
}

/* ═══════════════════════════════════════════
   🏰 قلمرو دانش — بازیِ دنیای بزرگ
   ═══════════════════════════════════════════ */
.qd-pick{background:linear-gradient(135deg,rgba(34,197,94,.14),rgba(37,99,235,.12));border:2px solid rgba(34,197,94,.4)}

/* تمام‌صفحه: بازی روی کلِ صفحه می‌نشیند */
body.qd-fullscreen{overflow:hidden}
.qd-root{position:fixed;inset:0;z-index:9999;overflow:hidden;background:#0E4E63}

.qd-viewport{position:absolute;inset:0;cursor:grab;touch-action:none;background:#0E4E63}
.qd-viewport.qd-grabbing{cursor:grabbing}

/* آبِ دریا این‌جا کشیده می‌شود — یک لایه‌ی ثابت، بدونِ بازترسیم */
.qd-stage{position:absolute;top:0;left:0;transform-origin:0 0;backface-visibility:hidden}
/* آبِ دریا: لایه‌ی ثابت و بی‌حرکت پشتِ صحنه — چون transform نمی‌گیرد، هرگز چشمک نمی‌زند */
.qd-sea{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(ellipse 90% 90% at 50% 40%, #5FC4D8 0%, #2E93B4 52%, #1D6E8C 100%)}
/* موجِ دریا: خطوطِ ملایمِ متحرک با گرادیان — روی لایه‌ی ثابت، پس هرگز چشمک نمی‌زند */
.qd-sea::before,.qd-sea::after{content:'';position:absolute;inset:-10% -10%;
  background-repeat:repeat;pointer-events:none;opacity:.5}
.qd-sea::before{
  background-image:repeating-linear-gradient(115deg,transparent 0 38px,rgba(185,238,245,.16) 38px 40px);
  animation:qdSeaMove 24s linear infinite}
.qd-sea::after{
  background-image:repeating-linear-gradient(65deg,transparent 0 52px,rgba(185,238,245,.12) 52px 54px);
  animation:qdSeaMove 38s linear infinite reverse}
@keyframes qdSeaMove{from{transform:translate3d(0,0,0)}to{transform:translate3d(60px,40px,0)}}
.qd-world{display:block;overflow:visible}

/* موجِ دریا — فقط به‌اندازه‌ی یک دوره‌ی الگو (۱۸۰px) می‌لغزد و تکرار می‌شود.
   will-change لایه را روی GPU می‌بَرد تا SVG بازترسیم نشود (رفعِ چشمک‌زدن). */
.qd-wave-layer{will-change:transform;transform:translateZ(0)}
.qd-wave-0{animation:qdWave 9s linear infinite}
.qd-wave-1{animation:qdWave 14s linear infinite reverse}
.qd-wave-2{animation:qdWave 19s linear infinite}
@keyframes qdWave{from{transform:translate3d(0,0,0)}to{transform:translate3d(180px,0,0)}}

/* خشکی */
.qd-shore{filter:url(#qd-shadow)}
.qd-label{font-family:'Lalezar','Vazirmatn',sans-serif;font-size:46px;paint-order:stroke;
  stroke:rgba(255,255,255,.78);stroke-width:7px;stroke-linejoin:round;pointer-events:none;user-select:none}

/* زمین‌ها */
.qd-plot{fill:rgba(255,255,255,.16);stroke:rgba(255,255,255,.38);stroke-width:1.4;cursor:pointer;
  transition:fill .18s ease,stroke .18s ease}
.qd-plot:hover{fill:rgba(255,255,255,.42);stroke:#fff;stroke-width:2.4}

/* زندگیِ محیط */
.qd-tree{transform-box:fill-box;transform-origin:bottom center;animation:qdSway 5.5s ease-in-out infinite;animation-delay:var(--qd-delay,0s)}
@keyframes qdSway{0%,100%{rotate:-1.6deg}50%{rotate:1.6deg}}
.qd-twinkle{animation:qdTwinkle 3s ease-in-out infinite;animation-delay:var(--qd-delay,0s);transform-box:fill-box}
@keyframes qdTwinkle{0%,100%{opacity:.55}50%{opacity:1}}
.qd-ember{animation:qdRise 4.2s ease-in-out infinite;animation-delay:var(--qd-delay,0s)}
@keyframes qdRise{0%{transform:translateY(0);opacity:.2}40%{opacity:1}100%{transform:translateY(-38px);opacity:0}}
.qd-bob{animation:qdBob 5.5s ease-in-out infinite;animation-delay:var(--qd-delay,0s)}
@keyframes qdBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.qd-led{animation:qdBlink 2.2s steps(1,end) infinite;animation-delay:var(--qd-delay,0s)}
@keyframes qdBlink{0%,60%{opacity:1}61%,100%{opacity:.25}}

/* ابر و پرنده */
.qd-drift{animation:qdCloud var(--qd-dur,120s) linear infinite;animation-delay:var(--qd-delay,0s)}
@keyframes qdCloud{to{transform:translateX(3800px)}}
.qd-flock{animation:qdFly var(--qd-dur,60s) linear infinite;animation-delay:var(--qd-delay,0s)}
@keyframes qdFly{from{transform:translate(-260px,var(--qd-y,400px))}to{transform:translate(3700px,var(--qd-y,400px))}}
.qd-bird{animation:qdFlap .42s ease-in-out infinite alternate;animation-delay:var(--qd-flap,0s);transform-box:fill-box;transform-origin:center}
@keyframes qdFlap{from{scale:1 .55}to{scale:1 1.15}}

/* رابطِ روی بازی */
.qd-hud{position:absolute;inset:0;pointer-events:none}
.qd-hud>*{pointer-events:auto}
.qd-top{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:rgba(255,253,247,.92);
  border:1px solid rgba(11,43,54,.1);border-radius:999px;padding:7px 20px;font-weight:800;font-size:.98rem;
  box-shadow:0 10px 30px -12px rgba(11,43,54,.35);white-space:nowrap;color:#0B2B36}
.qd-crown{color:#FF8A3D}
.qd-corner{position:absolute;top:12px;width:42px;height:42px;display:grid;place-items:center;
  background:rgba(255,253,247,.92);border:1px solid rgba(11,43,54,.1);border-radius:999px;cursor:pointer;
  box-shadow:0 10px 30px -12px rgba(11,43,54,.35);font-size:1.05rem;transition:transform .16s ease}
.qd-corner:hover{transform:scale(1.08)}
.qd-right{right:12px} .qd-left{left:12px}

.qd-bottom{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  width:min(720px,calc(100% - 24px));background:rgba(255,253,247,.92);border:1px solid rgba(11,43,54,.1);
  border-radius:20px;box-shadow:0 10px 30px -12px rgba(11,43,54,.35);padding:9px 14px;
  display:flex;align-items:center;gap:14px;min-height:58px}
.qd-stats{display:flex;gap:14px;flex:none}
.qd-stat{text-align:center}
.qd-val{font-weight:900;font-size:1.1rem;color:#0B2B36;line-height:1.1}
.qd-lbl{font-size:.66rem;color:#3D6373}
.qd-sep{width:1px;align-self:stretch;background:rgba(11,43,54,.1)}
.qd-slot{flex:1;text-align:center;color:#3D6373;font-size:.85rem}

@media(max-width:520px){
  .qd-slot{font-size:.74rem}
  .qd-top{font-size:.85rem;padding:6px 14px}
}
@media(prefers-reduced-motion:reduce){
  .qd-tree,.qd-twinkle,.qd-ember,.qd-bob,.qd-led,.qd-drift,.qd-flock,.qd-bird,
  .qd-wave-0,.qd-wave-1,.qd-wave-2{animation:none!important}
}

/* ── نوارِ پروفایلِ دانش‌آموز (مرحله ۲) ── */
.qd-who{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.qd-avatar{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;
  background:linear-gradient(135deg,#22C55E,#2563EB);font-size:1.15rem;flex:none}
.qd-idb{min-width:0}
.qd-name{font-weight:800;font-size:.9rem;color:#0B2B36;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qd-sub{font-size:.68rem;color:#3D6373;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qd-of{font-size:.62rem;color:#3D6373;font-weight:400}
.qd-err{color:#B91C1C;font-size:.8rem}

/* نوارِ راهنماییِ شناور بالای پروفایل */
.qd-hint-bar{position:absolute;bottom:86px;left:50%;transform:translateX(-50%);
  background:rgba(255,253,247,.92);border:1px solid rgba(11,43,54,.1);border-radius:999px;
  padding:6px 16px;font-size:.78rem;color:#3D6373;box-shadow:0 10px 30px -12px rgba(11,43,54,.35);
  white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}

@media(max-width:520px){
  .qd-avatar{width:32px;height:32px;font-size:1rem}
  .qd-name{font-size:.82rem}
  .qd-val{font-size:.95rem}
  .qd-hint-bar{font-size:.7rem;bottom:80px}
}

/* ═══ مرحله ۳: مالکیت، پنل، مینی‌مپ، افکت‌ها ═══ */

/* زمینِ صاحب‌دار */
.qd-plot.qd-owned{stroke-width:2}
.qd-plot.qd-mine{stroke-width:3;stroke:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}

/* افکتِ کلیک روی زمین */
.qd-plot.qd-flash{
  animation:qdFlash .5s ease-out;
  transform-box:fill-box;transform-origin:center;
}
@keyframes qdFlash{
  0%{filter:drop-shadow(0 0 0 rgba(255,255,255,0));scale:1}
  40%{filter:drop-shadow(0 0 14px rgba(255,255,255,.95));scale:1.28}
  100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0));scale:1}
}

/* دکمه‌ی نمای کلی */
.qd-corner.qd-ov{top:66px;left:12px}
.qd-corner.qd-home{top:120px;left:12px}

/* مینی‌مپ */
.qd-mini{position:absolute;top:12px;right:66px;width:150px;
  background:rgba(255,253,247,.9);border:2px solid rgba(255,255,255,.7);border-radius:14px;
  overflow:hidden;box-shadow:0 10px 30px -12px rgba(11,43,54,.5);pointer-events:none}
.qd-mini-svg{display:block;width:100%;height:100%;background:#2E93B4}
.qd-mini-frame{position:absolute;border:2px solid #fff;border-radius:4px;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);background:rgba(255,255,255,.15);pointer-events:none}

/* پنلِ اطلاعاتِ زمین */
.qd-panel{position:absolute;left:50%;bottom:96px;transform:translate(-50%,16px);
  width:min(360px,calc(100% - 24px));background:rgba(255,253,247,.98);
  border-radius:20px;box-shadow:0 20px 48px -16px rgba(11,43,54,.6);
  opacity:0;pointer-events:none;transition:opacity .26s ease,transform .26s ease;z-index:5;overflow:hidden}
.qd-panel.is-open{opacity:1;pointer-events:auto;transform:translate(-50%,0)}

.qd-panel-head{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-top:5px solid var(--own,#22C55E);background:linear-gradient(180deg,rgba(0,0,0,.03),transparent)}
.qd-panel-head.qd-panel-free{border-top-color:#94E0A6}
.qd-panel-ava{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;
  font-size:1.4rem;background:rgba(0,0,0,.05);flex:none}
.qd-panel-name{font-weight:900;font-size:1.05rem;color:#0B2B36}
.qd-panel-sub{font-size:.74rem;color:#3D6373}
.qd-panel-x{margin-inline-start:auto;width:34px;height:34px;border-radius:999px;
  background:rgba(11,43,54,.07);font-size:1rem;cursor:pointer;flex:none}
.qd-panel-x:hover{background:rgba(11,43,54,.14)}

.qd-panel-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:12px}
.qd-pcell{text-align:center;padding:8px 4px;border-radius:12px;background:rgba(11,43,54,.04)}
.qd-pico{font-size:1.1rem}
.qd-pval{font-weight:900;font-size:.95rem;color:#0B2B36;margin-top:2px}
.qd-plbl{font-size:.6rem;color:#3D6373;margin-top:1px}
.qd-panel-hint{padding:6px 16px 16px;font-size:.82rem;color:#3D6373;line-height:1.8}

@media(max-width:520px){
  .qd-mini{width:110px;top:64px;right:12px}
  .qd-corner.qd-ov{top:118px}
  .qd-panel{bottom:92px}
  .qd-pval{font-size:.82rem}
  .qd-pico{font-size:.95rem}
}

/* ═══ مرحله ۴: اقتصاد (فروشگاه، چرخ، صندوق، توست) ═══ */
.qd-econbar{position:absolute;left:12px;bottom:96px;display:flex;flex-direction:column;gap:8px;z-index:4}
.qd-econ-btn{display:flex;align-items:center;gap:6px;background:rgba(255,253,247,.94);
  border:1px solid rgba(11,43,54,.1);border-radius:999px;padding:8px 14px;font-weight:800;font-size:.82rem;
  color:#0B2B36;cursor:pointer;box-shadow:0 10px 30px -12px rgba(11,43,54,.4);transition:transform .15s ease}
.qd-econ-btn:hover{transform:translateX(3px)}
.qd-econ-btn span{font-size:.78rem}

.qd-chest{position:relative;background:linear-gradient(135deg,#F59E0B,#F97316);border:none;
  width:48px;height:48px;border-radius:14px;cursor:pointer;font-size:1.4rem;box-shadow:0 8px 20px -8px rgba(249,115,22,.7);
  animation:qdChestBob 2.4s ease-in-out infinite}
@keyframes qdChestBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
.qd-chest-open{animation:qdChestPop .9s ease}
@keyframes qdChestPop{0%{transform:scale(1)}30%{transform:scale(1.3) rotate(8deg)}100%{transform:scale(1)}}
.qd-chest-badge{position:absolute;top:-4px;right:-4px;background:#EF4444;color:#fff;font-size:.6rem;
  min-width:16px;height:16px;border-radius:999px;display:grid;place-items:center;font-weight:900}
.qd-chest-ico{filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}

/* overlayها */
.qd-overlay{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:16px;
  background:rgba(11,43,54,.5);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .26s ease}
.qd-overlay.is-open{opacity:1;pointer-events:auto}

/* فروشگاه */
.qd-shop-card{background:var(--paper,#FFFDF7);border-radius:22px;width:min(520px,100%);max-height:86%;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px -20px rgba(11,43,54,.7);
  transform:translateY(16px);transition:transform .26s ease}
.qd-overlay.is-open .qd-shop-card{transform:none}
.qd-shop-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(11,43,54,.08)}
.qd-shop-head h3{margin:0;font-size:1.2rem;font-family:'Lalezar',sans-serif;font-weight:400}
.qd-shop-bal{margin-inline-start:auto;font-weight:900;background:#FEF3C7;color:#92400E;padding:5px 12px;border-radius:999px;font-size:.9rem}
.qd-shop-body{overflow-y:auto;padding:14px 16px}
.qd-shop-gtitle{font-weight:800;color:#3D6373;font-size:.9rem;margin:8px 2px}
.qd-shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:8px}
.qd-item{background:#fff;border:1px solid rgba(11,43,54,.08);border-radius:16px;padding:12px;text-align:center;
  box-shadow:0 6px 16px -10px rgba(11,43,54,.4);transition:transform .15s ease}
.qd-item:hover{transform:translateY(-3px)}
.qd-item.is-locked{opacity:.55}
.qd-item-ico{font-size:2rem}
.qd-item-name{font-weight:900;font-size:.9rem;color:#0B2B36;margin-top:4px}
.qd-item-desc{font-size:.68rem;color:#3D6373;margin:3px 0 6px;min-height:2.2em}
.qd-item-pow{font-size:.72rem;color:#B45309;font-weight:700;margin-bottom:6px}
.qd-item-buy{position:relative;width:100%;background:#22C55E;color:#fff;border:none;border-radius:10px;
  padding:8px;font-weight:900;font-size:.85rem;cursor:pointer;box-shadow:0 4px 0 0 #16A34A;transition:transform .1s ease}
.qd-item-buy:active{transform:translateY(3px);box-shadow:0 1px 0 0 #16A34A}
.qd-item-buy:disabled{background:#CBD5E1;box-shadow:0 4px 0 0 #94A3B8;cursor:not-allowed}
.qd-item-buy.qd-bought{background:#F59E0B;box-shadow:0 4px 0 0 #D97706}
.qd-item-buy.qd-shake{animation:qdShake .4s}
@keyframes qdShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.qd-spark{position:absolute;inset:0;display:grid;place-items:center;font-size:1.3rem;animation:qdSparkUp .7s ease-out forwards;pointer-events:none}
@keyframes qdSparkUp{0%{opacity:0;transform:translateY(6px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translateY(-22px) scale(1.4)}}

/* آیتم روی زمین */
.qd-item-badge{animation:qdItemDrop .5s ease-out}
@keyframes qdItemDrop{0%{opacity:0;transform:translateY(-16px) scale(.4)}100%{opacity:1;transform:none}}

/* چرخِ شانس */
.qd-wheel-card{background:var(--paper,#FFFDF7);border-radius:22px;width:min(360px,100%);padding:0 0 18px;
  overflow:hidden;box-shadow:0 24px 60px -20px rgba(11,43,54,.7);text-align:center}
.qd-wheel-wrap{position:relative;width:230px;height:230px;margin:14px auto 8px}
.qd-wheel-pin{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-size:1.4rem;color:#EF4444;z-index:2;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.qd-wheel{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#FEF3C7,#FBCFE8,#DBEAFE,#DCFCE7,#FEF3C7,#FBCFE8,#DBEAFE,#DCFCE7);
  border:8px solid #F59E0B;box-shadow:inset 0 0 20px rgba(0,0,0,.12)}
.qd-wheel-seg{position:absolute;inset:0;display:flex;justify-content:center;padding-top:14px}
.qd-wheel-seg span{font-size:1.5rem;display:inline-block}
.qd-wheel-spin{background:#EF4444;color:#fff;border:none;border-radius:999px;padding:10px 30px;font-weight:900;
  font-size:1rem;cursor:pointer;box-shadow:0 5px 0 0 #B91C1C;margin-top:4px}
.qd-wheel-spin:active{transform:translateY(3px);box-shadow:0 2px 0 0 #B91C1C}
.qd-wheel-note{font-size:.72rem;color:#3D6373;margin-top:8px}

/* توست دستاورد */
.qd-toast{position:absolute;top:70px;left:50%;transform:translate(-50%,-14px);background:#0B2B36;color:#fff;
  padding:9px 18px;border-radius:999px;font-weight:800;font-size:.85rem;z-index:12;opacity:0;
  transition:opacity .3s ease,transform .3s ease;white-space:nowrap;box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}
.qd-toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:520px){
  .qd-econbar{bottom:150px}
  .qd-econ-btn span{display:none}
  .qd-econ-btn{padding:9px}
  .qd-shop-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .qd-chest,.qd-item-badge,.qd-spark{animation:none!important}
}

/* ═══ مرحله ۵: نبردِ آموزشی (کارتونی، بدونِ خشونت) ═══ */
.qd-attack-wrap{padding:0 12px 12px;text-align:center}
.qd-attack-btn{width:100%;background:linear-gradient(135deg,#EF4444,#F97316);color:#fff;border:none;
  border-radius:12px;padding:12px;font-weight:900;font-size:1rem;cursor:pointer;box-shadow:0 5px 0 0 #B91C1C}
.qd-attack-btn:active{transform:translateY(3px);box-shadow:0 2px 0 0 #B91C1C}
.qd-attack-note{font-size:.68rem;color:#3D6373;margin-top:5px}
.qd-attack-blocked{background:#F1F5F9;color:#64748B;border-radius:12px;padding:10px;font-size:.8rem;font-weight:700}

.qd-battle-card{background:var(--paper,#FFFDF7);border-radius:22px;width:min(420px,100%);padding:22px;
  text-align:center;box-shadow:0 24px 60px -20px rgba(11,43,54,.7);transform:translateY(16px);transition:transform .26s ease}
.qd-overlay.is-open .qd-battle-card{transform:none}

/* آماده‌سازیِ ارتش */
.qd-army{margin-bottom:14px}
.qd-army-row{font-size:2rem;letter-spacing:4px;animation:qdMarch 1s ease-in-out infinite}
@keyframes qdMarch{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
.qd-flags{font-size:1.6rem;animation:qdWave2 1.2s ease-in-out infinite}
@keyframes qdWave2{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.qd-battle-title{font-family:'Lalezar',sans-serif;font-size:1.4rem;color:#0B2B36}
.qd-battle-sub{color:#3D6373;font-size:.9rem;margin-top:6px}

/* سؤالِ نبرد */
.qd-battle-prog{font-size:.78rem;color:#B45309;font-weight:800;margin-bottom:10px}
.qd-q-text{font-weight:800;font-size:1.05rem;color:#0B2B36;line-height:1.9;margin-bottom:10px}
.qd-q-img{max-width:100%;border-radius:12px;margin-bottom:10px}
.qd-q-opts{display:grid;gap:8px}
.qd-q-opt{background:#fff;border:2px solid rgba(11,43,54,.12);border-radius:12px;padding:12px;
  font-weight:700;font-size:.95rem;color:#0B2B36;cursor:pointer;transition:all .15s ease}
.qd-q-opt:hover:not(:disabled){border-color:#3B82F6;transform:translateY(-2px)}
.qd-q-opt.is-correct{background:#DCFCE7;border-color:#22C55E;color:#166534}
.qd-q-opt.is-wrong{background:#FEE2E2;border-color:#EF4444;color:#991B1B}
.qd-q-opt:disabled{cursor:default;opacity:.85}

/* نتیجه */
.qd-result-emoji{font-size:3.4rem;animation:qdPop .5s ease}
@keyframes qdPop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.qd-result-title{font-family:'Lalezar',sans-serif;font-size:1.7rem;margin:6px 0}
.qd-result--win .qd-result-title{color:#16A34A}
.qd-result--draw .qd-result-title{color:#D97706}
.qd-result--lose .qd-result-title{color:#DC2626}
.qd-result-msg{color:#3D6373;margin-bottom:8px}
.qd-result-note{font-size:.7rem;color:#94A3B8;margin-bottom:10px}

@media(prefers-reduced-motion:reduce){
  .qd-army-row,.qd-flags,.qd-result-emoji{animation:none!important}
}

/* ═══ مرحله ۶: پنلِ بازیِ معلم ═══ */
.qdp{max-width:820px;margin:0 auto}
.qdp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.qdp-head h2{margin:0;font-size:1.3rem}
.qdp-grade{padding:8px 14px;border-radius:10px;border:1px solid var(--border,#e5e7eb);font-family:inherit;background:#fff}
.qdp-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;border-bottom:2px solid rgba(11,43,54,.08);padding-bottom:8px}
.qdp-tab{padding:8px 14px;border-radius:10px;background:#F1F5F9;font-weight:700;font-size:.85rem;color:#475569;cursor:pointer;transition:all .15s ease}
.qdp-tab.on{background:linear-gradient(135deg,#22C55E,#2563EB);color:#fff}
.qdp-hint,.qdp-note{font-size:.82rem;color:#3D6373;line-height:1.9;margin-bottom:12px;background:#F0F9FF;padding:10px 14px;border-radius:12px}
.qdp-note{background:#FEF9E7;color:#92610A}

.qdp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.qdp-card{background:#fff;border:1px solid rgba(11,43,54,.08);border-radius:16px;padding:16px;text-align:center;box-shadow:0 6px 16px -10px rgba(11,43,54,.4)}
.qdp-ci{font-size:1.8rem}
.qdp-cv{font-weight:900;font-size:1.15rem;color:#0B2B36;margin-top:4px}
.qdp-cl{font-size:.72rem;color:#3D6373}

.qdp-sub{margin-bottom:16px}
.qdp-subt{font-weight:800;color:#0B2B36;margin-bottom:8px;font-size:.95rem}
.qdp-empty{font-size:.8rem;color:#94A3B8;padding:8px}
.qdp-chips{display:flex;flex-wrap:wrap;gap:8px}
.qdp-chip{display:flex;align-items:center;gap:6px;background:#fff;border:2px solid rgba(11,43,54,.1);border-radius:999px;padding:7px 14px;cursor:pointer;font-size:.82rem;font-weight:600;transition:all .15s ease}
.qdp-chip.on{background:#DCFCE7;border-color:#22C55E;color:#166534}
.qdp-chip input{accent-color:#22C55E}

.qdp-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.qdp-field{display:flex;flex-direction:column;gap:5px;font-size:.82rem;font-weight:700;color:#334155}
.qdp-field input{padding:9px 12px;border-radius:10px;border:1px solid var(--border,#e5e7eb);font-family:inherit;font-size:.95rem}
.qdp-field input:focus{outline:none;border-color:#3B82F6}

.qdp-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 16px -10px rgba(11,43,54,.4)}
.qdp-table td{padding:11px 14px;border-bottom:1px solid rgba(11,43,54,.06);font-size:.88rem}
.qdp-table td:last-child{text-align:left;font-weight:800;color:#0B2B36}

@media(max-width:520px){
  .qdp-tab{font-size:.78rem;padding:7px 10px}
  .qdp-form{grid-template-columns:1fr}
}

/* ═══ مرحله ۷: منو، مأموریت، اعلان، تنظیمات ═══ */
.qd-corner.qd-menu{top:174px;left:12px}

.qd-menu-card{background:var(--paper,#FFFDF7);border-radius:22px;width:min(440px,100%);max-height:86%;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px -20px rgba(11,43,54,.7);
  transform:translateY(16px);transition:transform .26s ease}
.qd-overlay.is-open .qd-menu-card{transform:none}
.qd-menu-tabs{display:flex;gap:6px}
.qd-mt{padding:7px 12px;border-radius:10px;background:#F1F5F9;font-weight:700;font-size:.8rem;color:#475569;cursor:pointer}
.qd-mt.on{background:linear-gradient(135deg,#22C55E,#2563EB);color:#fff}
.qd-menu-body{overflow-y:auto;padding:14px 16px}
.qd-empty2{text-align:center;color:#94A3B8;padding:24px;font-size:.9rem}

.qd-mgroup{margin-bottom:14px}
.qd-mgt{font-weight:800;color:#3D6373;font-size:.85rem;margin-bottom:8px}
.qd-mission{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(11,43,54,.08);
  border-radius:14px;padding:10px 12px;margin-bottom:8px}
.qd-mission.done{background:#F0FDF4;border-color:#86EFAC}
.qd-mi-main{flex:1;min-width:0}
.qd-mi-title{font-weight:700;font-size:.85rem;color:#0B2B36}
.qd-mi-bar{height:6px;background:#E2E8F0;border-radius:999px;overflow:hidden;margin:5px 0 3px}
.qd-mi-bar span{display:block;height:100%;background:linear-gradient(90deg,#22C55E,#2563EB);border-radius:999px;transition:width .4s ease}
.qd-mi-prog{font-size:.68rem;color:#3D6373}
.qd-mi-claim{background:#F59E0B;color:#fff;border:none;border-radius:10px;padding:8px 12px;font-weight:800;font-size:.78rem;cursor:pointer;white-space:nowrap}
.qd-mi-claim:disabled{background:#CBD5E1;cursor:default}

.qd-notif-item{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid rgba(11,43,54,.06)}
.qd-ni-ico{font-size:1.4rem}
.qd-ni-t{font-weight:700;font-size:.85rem;color:#0B2B36}
.qd-ni-time{font-size:.68rem;color:#94A3B8}

.qd-setrow{display:flex;align-items:center;justify-content:space-between;padding:12px 4px;border-bottom:1px solid rgba(11,43,54,.06);font-weight:700;font-size:.9rem;color:#334155}
.qd-setrow input[type=checkbox]{width:20px;height:20px;accent-color:#22C55E}
.qd-setrow select{padding:6px 12px;border-radius:8px;border:1px solid var(--border,#e5e7eb);font-family:inherit}

/* حالتِ شب برای بازی */
.qd-viewport.qd-dark .qd-top,.qd-viewport.qd-dark .qd-corner,.qd-viewport.qd-dark .qd-bottom,
.qd-viewport.qd-dark .qd-hint-bar,.qd-viewport.qd-dark .qd-mini{background:rgba(15,30,40,.92);color:#E4F1FA;border-color:rgba(255,255,255,.1)}
.qd-viewport.qd-dark .qd-name,.qd-viewport.qd-dark .qd-val{color:#E4F1FA}
/* خاموش‌کردنِ انیمیشن‌ها */
.qd-no-anim *{animation:none!important;transition:none!important}

/* ═══ کیفیتِ پایین: خاموش‌کردنِ افکت‌های سنگین برای FPS بهتر ═══ */
.qd-low .qd-sea::before,.qd-low .qd-sea::after{animation:none!important}
.qd-low .qd-tree,.qd-low .qd-twinkle,.qd-low .qd-ember,.qd-low .qd-bob,
.qd-low .qd-led,.qd-low .qd-cloud,.qd-low .qd-flock,.qd-low .qd-bird{animation:none!important}

/* ═══ حالتِ شب: تیره‌کردنِ کلِ صحنه ═══ */
.qd-viewport.qd-dark{filter:brightness(0.62) saturate(0.85)}
.qd-viewport.qd-dark .qd-top,.qd-viewport.qd-dark .qd-corner,.qd-viewport.qd-dark .qd-bottom,
.qd-viewport.qd-dark .qd-hint-bar,.qd-viewport.qd-dark .qd-mini,.qd-viewport.qd-dark .qd-econ-btn{
  filter:brightness(1.5)}
.qdp-cloud{font-size:.65rem;font-weight:700;background:#F1F5F9;color:#475569;border-radius:999px;padding:4px 10px;vertical-align:middle;margin-inline-start:8px}

/* ── نبرد: نوارِ بالا (پیشرفت + ساعت) و اطلاعاتِ قدرت ── */
.qd-battle-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.qd-battle-clock{background:#EEF2FF;color:#3730A3;font-weight:900;font-size:.9rem;padding:5px 12px;border-radius:999px}
.qd-battle-clock.qd-clock-warn{background:#FEE2E2;color:#B91C1C;animation:qdClockPulse 1s ease-in-out infinite}
@keyframes qdClockPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.qd-battle-info{margin-top:12px;background:rgba(0,0,0,.04);border-radius:12px;padding:8px 12px;font-size:.82rem;color:#3D6373;font-weight:700}
@media(prefers-reduced-motion:reduce){.qd-battle-clock.qd-clock-warn{animation:none!important}}

/* ── حین حرکتِ دوربین: همه‌ی انیمیشن‌های دنیا موقتاً خاموش (رفعِ لگ) ── */
.qd-viewport.qd-moving .qd-tree,.qd-viewport.qd-moving .qd-twinkle,
.qd-viewport.qd-moving .qd-ember,.qd-viewport.qd-moving .qd-bob,
.qd-viewport.qd-moving .qd-led,.qd-viewport.qd-moving .qd-drift,
.qd-viewport.qd-moving .qd-flock,.qd-viewport.qd-moving .qd-bird,
.qd-viewport.qd-moving .qd-sea::before,.qd-viewport.qd-moving .qd-sea::after{
  animation-play-state:paused!important}
.qd-claim-btn{width:100%;background:linear-gradient(135deg,#22C55E,#10B981);color:#fff;border:none;
  border-radius:12px;padding:12px;font-weight:900;font-size:1rem;cursor:pointer;box-shadow:0 5px 0 0 #15803D}
.qd-claim-btn:active{transform:translateY(3px);box-shadow:0 2px 0 0 #15803D}

/* هر قاره یک واحدِ رندرِ مستقل — مرورگر خارجِ دید را نقاشی نمی‌کند */
.qd-continent{contain:layout style paint}

/* ═══════════════════════════════════════════════════════════
   قلمرو دانش — ارتقای گرافیکِ کودک‌پسند (۲۰۲۶-۰۷)
   بلوکِ افزایشی: فقط رنگ/سایه/انیمیشنِ سبک، بدونِ تغییرِ ساختار.
   ═══════════════════════════════════════════════════════════ */

/* آسمان‌به‌دریا شادتر + هاله‌ی خورشید */
.qd-root, .qd-viewport{ background:#7FD8EE }
.qd-sea{
  background:
    radial-gradient(120% 80% at 50% -8%, #EAF9FF 0%, #A9E8F6 20%, transparent 46%),
    radial-gradient(60% 40% at 82% 10%, rgba(255,241,178,.75) 0%, transparent 40%),
    radial-gradient(ellipse 95% 95% at 50% 55%, #6FD0E4 0%, #2E9FC0 50%, #1C6E8C 100%);
}

/* عنوانِ بالا: شیشه‌ای‌تر با تاجِ درخشان */
.qd-top{
  background:linear-gradient(180deg,#FFFFFF,#FFF6E9);
  border:2px solid #FFE1A8;
  box-shadow:0 14px 34px -12px rgba(11,43,54,.45), inset 0 0 0 2px rgba(255,255,255,.6);
  font-size:1.05rem;
}
.qd-crown{ color:#FF8A3D; display:inline-block; animation:qdCrownPop 2.4s ease-in-out infinite; filter:drop-shadow(0 2px 2px rgba(255,138,61,.4)) }
@keyframes qdCrownPop{ 0%,100%{transform:translateY(0) rotate(-6deg)} 50%{transform:translateY(-3px) rotate(6deg)} }

/* دکمه‌های گوشه: رنگی، تپلی، با پرشِ شاد */
.qd-corner{
  width:48px; height:48px; font-size:1.25rem;
  background:linear-gradient(180deg,#FFFFFF,#F1FBFF);
  border:2px solid #BDEBF7;
  box-shadow:0 12px 26px -10px rgba(11,43,54,.5), inset 0 -3px 0 rgba(11,43,54,.06);
}
.qd-corner:hover{ transform:translateY(-3px) scale(1.1); border-color:#7FD8EE }
.qd-corner:active{ transform:translateY(0) scale(.94) }
.qd-corner.qd-menu{ background:linear-gradient(180deg,#FFD98A,#FFB53D); border-color:#FFC96A }
.qd-corner.qd-home{ background:linear-gradient(180deg,#B8F0C6,#7BDC99); border-color:#9DE7B3 }
.qd-corner.qd-left{ background:linear-gradient(180deg,#FFC2CE,#FF8FA6); border-color:#FFB0C0 }

/* زمین‌ها: براق‌تر و با هاله برای زمینِ مالک‌دار */
.qd-plot{ transition:fill .18s ease, stroke .18s ease, filter .18s ease }
.qd-plot:hover{ fill:rgba(255,255,255,.5); stroke:#fff; stroke-width:2.6; filter:drop-shadow(0 0 6px rgba(255,255,255,.8)) }
.qd-plot.qd-owned{ filter:drop-shadow(0 0 5px rgba(255,255,255,.55)); animation:qdOwnPulse 3.4s ease-in-out infinite }
@keyframes qdOwnPulse{ 0%,100%{stroke-opacity:.85} 50%{stroke-opacity:1} }

/* نوارِ اقتصاد: دکمه‌های شاد و برجسته */
.qd-econ-btn{
  background:linear-gradient(180deg,#FFFFFF,#FFF3DB);
  border:2px solid #FFD98A;
  box-shadow:0 10px 24px -10px rgba(180,120,0,.5);
  border-radius:16px; font-weight:800;
  transition:transform .14s ease, box-shadow .14s ease;
}
.qd-econ-btn:hover{ transform:translateY(-2px) scale(1.04) }
.qd-econ-btn:active{ transform:scale(.95) }

/* سرِ پنل‌ها: رنگارنگ‌تر */
.qd-panel{ border-radius:22px; box-shadow:0 24px 60px -20px rgba(11,43,54,.55) }
.qd-panel-head{ background:linear-gradient(180deg,#FFF9EF,#FFEFD6) }

/* برچسبِ قاره‌ها: کمی گرم‌تر و خوانا */
.qd-label{ stroke:rgba(255,255,255,.9); fill:#123B47 }

/* ── روانیِ موبایل: انیمیشن‌های سنگینِ محیط روی صفحه‌ی کوچک خاموش می‌شوند ──
   (المان‌ها می‌مانند، فقط بی‌حرکت — نقشه روی گوشی روان می‌ماند) */
@media (max-width: 820px){
  .qd-tree, .qd-twinkle, .qd-ember, .qd-bob, .qd-led,
  .qd-flock, .qd-bird, .qd-drift{ animation:none !important }
  .qd-sea::before, .qd-sea::after{ animation-duration:60s !important }
}
/* هنگامِ کشیدن/حرکتِ نقشه، همه‌ی انیمیشن‌های محیط لحظه‌ای می‌ایستند تا فریم نیفتد */
.qd-viewport.qd-moving .qd-life *,
.qd-viewport.qd-moving .qd-cloud,
.qd-viewport.qd-moving .qd-flock{ animation-play-state:paused !important }