/* ═══ DESKTOP_V1 — نسخه‌ی کامپیوتر ═══
   همه‌چیز این فایل فقط روی کامپیوتر اعمال می‌شود (ماوس + صفحه‌ی عریض).
   گوشی و تبلت لمسی (hover:none / pointer:coarse) هیچ تغییری نمی‌بینند.
   برای برگشت: دو خط desktop.css و desktop.js را از index.html بردار. */

/* ── ماوس (هر عرضی): hover، اسکرول‌بار تیره، فوکوس کیبورد ── */
@media (hover: hover) and (pointer: fine) {
  button:not(:disabled), .hud-ic, .nav-tab, #dockChat, .cc-tab, .cat-head,
  #topBar > span[onclick], #lobbyScreen .lob-nav button, #lobbyScreen .rchip { cursor: pointer; }

  button:not(:disabled):hover, .hud-ic:hover, .cat-head:hover,
  #topBar > span[onclick]:hover, #lobbyScreen .rchip:hover { filter: brightness(1.18); }
  #lobbyScreen .lob-nav button:not(.on):hover { color: #9fd8ff; }

  :focus-visible { outline: 2px solid #5ec8ff; outline-offset: 2px; }
  .leaflet-container:focus, .leaflet-container:focus-visible { outline: none; }

  /* فقط ::-webkit-scrollbar (نه scrollbar-width) تا نوارهایی که عمداً مخفی‌اند مخفی بمانند */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(120,170,255,.28); border-radius: 8px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(120,170,255,.45); }
}

/* ── چیدمان کامپیوتر: عرض ۱۰۲۴ به بالا + ماوس ── */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {

  /* نوار بالا در یک ردیف: پروفایل · منابع · دکمه‌ها */
  #topHud { flex-direction: row !important; align-items: center; gap: 14px; }
  #profileRow { display: contents; }
  #profileAvatar { order: 1; }
  #profileInfo { order: 2; flex: 0 1 210px; }
  #topHud #topBar {
    order: 3; flex: 0 1 780px; width: auto; max-width: 780px; margin: 0 auto;
    padding: 6px 8px; border-radius: 16px;
  }
  .hud-icons { order: 4; }
  #topBar > span { flex-direction: row; gap: 6px; font-size: 14px; padding: 4px 6px; min-height: 34px; }
  #topBar > span > div { font-size: 10px !important; margin-top: 0 !important; }
  #topBar > span:hover { filter: brightness(1.18); }

  /* لابی: پنل کنار نقشه (سمت راست) به‌جای وسط صفحه */
  #lobbyScreen {
    left: auto; right: 0; width: 460px; max-width: none; margin: 0;
    border-left: 1px solid rgba(120,170,255,.22);
    box-shadow: -28px 0 70px rgba(0,4,16,.55);
  }
  #lobbyScreen .resbar { overflow-x: visible; }
  #lobbyScreen .rchip { flex: 1 1 0; min-width: 0; }
  body:has(#lobbyScreen.on) #topHud { right: 476px; }
  /* لابی خودش پروفایل و دکمه‌ها را دارد (روی گوشی هم این‌ها زیر لابی پنهان‌اند) */
  body:has(#lobbyScreen.on) #profileAvatar,
  body:has(#lobbyScreen.on) #profileInfo,
  body:has(#lobbyScreen.on) #bottomMenu { display: none !important; }

  /* پنجره‌ی کشور: پنل سمت چپ؛ نقشه پشتش دیده می‌شود */
  #overlay {
    background: rgba(2,6,18,.18) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  #countryPopup {
    top: 92px !important; left: 20px !important; right: auto !important; bottom: auto !important;
    transform: none !important; width: 400px !important; max-height: calc(100vh - 116px) !important;
    animation: gwDeskIn .25s ease both !important;
  }

  /* چت: پنل پایین-چپ، بلندتر */
  html body #chatContainer #chatBox.cc.show {
    left: 20px !important; right: auto !important; bottom: 20px !important;
    transform: none !important; width: 400px !important; max-width: 400px !important;
    animation: gwDeskIn .2s ease both;
  }
  #chatBox.cc .cc-msgs { height: clamp(240px, calc(100vh - 430px), 560px) !important; }
  body:has(#chatBox.cc.show) #bottomMenu { left: 440px !important; }

  /* پنجره‌ی ابزار: وسط صفحه به‌جای چسبیده به لبه */
  #gwToolsPop { align-items: center !important; justify-content: center !important; }
  #gwToolsCard { border-radius: 22px !important; }
  #gwToolsCard > div:last-child > button { padding: 18px 6px 14px !important; }

  /* پنجره‌ها: کمی جادارتر */
  .modal-box { max-height: 86vh; }

  @keyframes gwDeskIn { from { opacity: 0; } to { opacity: 1; } }
}

/* راهنمای میانبرها (با ؟ باز می‌شود) */
#gwKeysHelp {
  position: fixed; inset: 0; z-index: 9700; display: flex; align-items: center; justify-content: center;
  background: rgba(4,10,20,.66); direction: rtl; font-family: Vazirmatn, sans-serif;
}
#gwKeysHelp .kh-box {
  width: min(460px, 92vw); max-height: 86vh; overflow-y: auto; padding: 20px 20px 16px;
  background: linear-gradient(165deg,#141f36,#0c1526); border: 1px solid #24466F; border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,6,24,.7); color: #eaf2ff;
}
#gwKeysHelp h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
#gwKeysHelp .kh-sub { font-size: 11.5px; color: #8fa3c0; margin-bottom: 14px; }
#gwKeysHelp .kh-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 2px; border-bottom: 1px solid rgba(120,170,255,.08); font-size: 13px; }
#gwKeysHelp .kh-row:last-of-type { border-bottom: 0; }
#gwKeysHelp kbd {
  display: inline-block; min-width: 26px; padding: 3px 8px; border-radius: 7px; text-align: center;
  background: #1a2b45; border: 1px solid #2c4a75; border-bottom-width: 3px;
  font: 700 12px/1.2 Vazirmatn, sans-serif; color: #cfe3ff; direction: ltr;
}
#gwKeysHelp .kh-close {
  margin-top: 14px; width: 100%; padding: 11px; border: 0; border-radius: 12px;
  background: #1a2b45; color: #b9cbe6; font: 700 13px Vazirmatn, sans-serif; cursor: pointer;
}