.qr-game{position:relative;overflow:hidden;isolation:isolate;touch-action:auto;background:#102f4c;color:#f6ecd5;font-family:inherit;min-height:480px;user-select:none}
.qr-game .qd2-stage{touch-action:none;position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.qr-game .qr-atlas{display:block;overflow:visible}.qr-game button,.qr-game select{font:inherit;cursor:pointer;min-height:42px;border:1px solid #93c5c440;border-radius:12px;color:#f5ecd5;background:#193c50;padding:8px 12px}.qr-game button:hover{background:#28596a}.qr-game button:disabled{opacity:.5;cursor:default}.qr-game button:focus-visible,.qr-game select:focus-visible{outline:3px solid #f6c975;outline-offset:2px}
.qr-top{position:absolute;z-index:3;top:12px;left:12px;right:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;pointer-events:none}.qr-top>*{pointer-events:auto}.qr-brand{background:#112c40e8;border:1px solid #c3c6a840;border-radius:14px;padding:9px 16px;box-shadow:0 8px 25px #001a2a40}.qr-brand b{display:block;color:#f4d69c}.qr-brand small{font-size:10px;letter-spacing:2px;color:#a8c8c8}.qr-wallet{margin-inline-start:auto;background:#172f42ed;padding:10px 14px;border-radius:12px;border:1px solid #e7b96877;font-weight:bold}.qr-nav{position:absolute;left:12px;top:130px;z-index:3;display:grid;gap:7px}.qr-nav button{width:44px;height:44px;padding:0;font-size:20px;background:#123248e8}.qr-bottom{position:absolute;bottom:12px;left:12px;right:12px;z-index:3;display:flex;justify-content:space-between;gap:8px;pointer-events:none}.qr-bottom>*{pointer-events:auto}.qr-status{background:#112b40e8;padding:10px 14px;border-radius:12px;max-width:70%;font-size:12px;line-height:1.8}.qr-panel{position:absolute;z-index:5;right:12px;top:105px;width:min(335px,calc(100% - 24px));max-height:calc(100% - 180px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y;box-sizing:border-box;padding:18px;border-radius:20px;border:1px solid #a9c0ae70;background:linear-gradient(145deg,#193e52f5,#102a40fa);box-shadow:0 18px 50px #06182466;backdrop-filter:blur(12px)}.qr-panel[hidden]{display:none}.qr-panel h3{font-size:18px;margin:0 0 12px}.qr-panel p{font-size:13px;line-height:1.9;margin:8px 0;color:#c6dddb}.qr-panel .qr-main{display:block;width:100%;background:linear-gradient(100deg,#f0ce89,#dba961);color:#243c45;font-weight:800;margin-top:12px;border:0}.qr-panel .qr-x{float:left;min-height:28px;padding:2px 8px}.qr-stats{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.qr-stats span{border:1px solid #90b5b34d;padding:7px;border-radius:9px;font-size:12px}.qr-shop-row{border-top:1px solid #a1bdb72b;padding:12px 0}.qr-shop-row button{width:100%;margin-top:5px}.qr-rank-row{display:flex;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid #92b5b329}.qr-rank-row i{width:10px;height:10px;border-radius:50%}.qr-rank-row strong{margin-inline-start:auto}.qr-cell{cursor:pointer;transition:fill .22s;stroke-linejoin:round}.qr-cell:hover{fill:#fff5c430!important;stroke:#fff1bd88!important}.qr-cell.selected{fill:#fff3b844!important;stroke:#fff0b4!important;stroke-width:4;filter:drop-shadow(0 0 5px #e7d39b)}.qr-continent-name{fill:#f1e7c9;font:700 32px Tahoma;paint-order:stroke;stroke:#133648;stroke-width:7px;stroke-linejoin:round;letter-spacing:1px}.qr-near .qr-continent-name{opacity:0}.qr-labels{opacity:0;transition:opacity .25s}.qr-near .qr-labels{opacity:1}.qr-owner{display:none}.qr-close .qr-owner{display:block}.qr-ship{animation:qr-sail 12s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}.qr-flag{animation:qr-flag 3s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:left center}.qr-sails{transform-origin:44px 37px;animation:qr-spin 24s linear infinite}@keyframes qr-sail{to{transform:translate(30px,-8px) rotate(3deg)}}@keyframes qr-flag{to{transform:scaleX(.8) skewY(7deg)}}@keyframes qr-spin{to{transform:rotate(360deg)}}
.qr-modal{position:fixed;inset:0;z-index:99999;background:#071b30db;display:grid;place-items:center;padding:16px;direction:rtl}.qr-dialog{box-sizing:border-box;width:min(520px,100%);max-height:90dvh;overflow:auto;border:1px solid #bccaa166;border-radius:22px;padding:24px;background:#15354a;color:#f5ecd5;font-family:inherit}.qr-dialog h3{margin-top:0;line-height:1.8}.qr-dialog p{line-height:1.9}.qr-dialog button{font:inherit;border-radius:12px;border:1px solid #9bc2bd66;background:#234b5e;color:#fff2d3;padding:12px;cursor:pointer}.qr-options{display:grid;gap:10px}.qr-options button{text-align:right}.qr-options button[aria-pressed=true]{background:#dabc79;color:#183248;border-color:#fff0bb}.qr-dialog footer{display:flex;justify-content:space-between;gap:8px;margin-top:20px}.qr-toast{position:absolute;z-index:10;bottom:75px;left:50%;transform:translateX(-50%);background:#f0d293;color:#17394c;padding:12px 18px;border-radius:12px;max-width:85%;text-align:center;line-height:1.7;box-shadow:0 8px 24px #08223788}
@media(max-width:600px){.qr-game{min-height:540px}.qr-top{top:8px;left:8px;right:8px;gap:5px}.qr-brand{padding:6px 10px}.qr-brand small{display:none}.qr-game .qr-top button,.qr-game .qr-top select{font-size:12px;padding:7px;min-height:38px}.qr-wallet{font-size:12px;padding:9px}.qr-top select{max-width:145px}.qr-panel{top:auto;bottom:66px;right:8px;left:8px;width:auto;max-height:43%;padding:14px;border-radius:17px}.qr-panel p{font-size:12px}.qr-nav{top:140px;left:8px}.qr-status{max-width:calc(100% - 85px);font-size:11px;padding:8px}.qr-bottom{left:8px;right:8px;bottom:8px}.qr-dialog{padding:18px}.qr-dialog h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){.qr-game *{animation:none!important;transition:none!important}}
.qr-current{animation:qr-flow 8s linear infinite}@keyframes qr-flow{to{stroke-dashoffset:-62}}
.qr-cell.qr-capture{animation:qr-capture .6s ease-in-out 3}@keyframes qr-capture{50%{fill:#fff3aacc;stroke:#fff9c8;stroke-width:8}}

/* ═══════════════════════════════════════════════════════════
   ⚡ روانیِ نقشه روی گوشی — شهریور ۱۴۰۵

   شکایتِ کارفرما: «صفحه هی خاموش روشن می‌شود، همه چیز می‌گیرد،
   تکان دادنِ صفحه سخت است.»

   سه گناهِ اصلی پیدا شد و هر سه اینجا درمان می‌شوند.
   ═══════════════════════════════════════════════════════════ */

/*  ۱) backdrop-filter: blur(12px) روی پنلِ کناری.
    گران‌ترین چیزی است که می‌شود روی گوشی گذاشت: تا وقتی پنل باز
    است، مرورگر باید در *هر فریم* هر چه پشتش است را دوباره محو کند —
    و پشتش نقشه‌ای است که داریم جابه‌جایش می‌کنیم.
    روی دسکتاپ می‌ماند، روی گوشی با یک پس‌زمینه‌ی تیره جایگزین. */
@media (max-width: 900px), (hover: none) {
  .qr-panel{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: linear-gradient(145deg,#183B4FFC,#0F2840FE) !important;
  }
}

/*  ۲) تا وقتی انگشت روی نقشه است، هیچ تزئینی نجنبد.
    کشتی، پرچم، بادبان و جریانِ آب هر کدام یک انیمیشنِ بی‌پایان‌اند
    که مرورگر را وادار می‌کنند در همان فریمِ جابه‌جایی، آن‌ها را هم
    از نو بکشد. `qd2-busy` را خودِ دوربینِ نقشه می‌گذارد و برمی‌دارد. */
.qd2-busy *,
.qd2-busy *::before,
.qd2-busy *::after{
  animation-play-state: paused !important;
  transition: none !important;
}
/*  سایه‌ی زمینِ انتخاب‌شده هم در حینِ حرکت، دوباره‌رَستری می‌شود */
.qd2-busy .qr-cell.selected{ filter: none !important; }
/*  ⚠️ روی خودِ صحنه نباید pointer-events را قطع کنیم — وگرنه
    کشیدن قطع می‌شود. فقط تزئین خاموش می‌شود، نه لمس. */

/*  ۳) به مرورگر بگو این لایه قرار است حرکت کند.
    بدونِ این، هر بار که transform عوض می‌شود لایه‌ی گرافیکی از نو
    ساخته می‌شود — همان «خاموش‌روشن»ی که دیده می‌شد. */
.qd2-stage{
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/*  ۴) انیمیشنِ جریانِ آب (stroke-dashoffset) روی کارتِ گرافیک
    نمی‌رود و هر فریم مسیر را از نو می‌کشد. آهسته‌ترش می‌کنیم و
    روی گوشی کلاً خاموش. */
@media (max-width: 900px), (hover: none) {
  .qr-current{ animation: none !important; }
  .qr-sails{ animation-duration: 40s !important; }
}