/* USTUN 1 — compact PIN-style settings
   Blue/purple palette only; compact modal, no full-screen takeover. */
#pageUstun #u1HeroSettingsDrop{
  position:fixed !important;
  top:50% !important; left:50% !important; right:auto !important; bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  z-index:8000 !important;
  width:min(570px,calc(100vw - 28px)) !important;
  max-width:calc(100vw - 28px) !important;
  max-height:min(610px,calc(100dvh - 30px)) !important;
  overflow:hidden !important;
  padding:12px !important;
  border-radius:20px !important;
  border:1px solid rgba(99,102,241,.18) !important;
  background:linear-gradient(145deg,#ffffff 0%,#f7f7ff 55%,#f3f0ff 100%) !important;
  box-shadow:0 22px 60px rgba(49,46,129,.18),0 8px 24px rgba(59,130,246,.10) !important;
  backdrop-filter:blur(16px);
}
#pageUstun #u1HeroSettingsDrop::before{
  height:3px !important;
  background:linear-gradient(90deg,#2563eb,#6366f1,#8b5cf6) !important;
  border-radius:20px 20px 0 0 !important;
}
#pageUstun #u1HeroSettingsDrop .mb-settings-head{
  min-height:38px !important;
  grid-template-columns:34px 1fr auto !important;
  gap:7px !important;
  padding:0 0 7px !important;
  margin-bottom:7px !important;
  border-bottom:1px solid #e7e9f7 !important;
}
#pageUstun #u1HeroSettingsDrop .mb-settings-head-title{
  font-size:13px !important;
  color:#312e81 !important;
  letter-spacing:-.01em;
}
#pageUstun #u1HeroSettingsDrop .mb-settings-icon{
  width:32px !important; height:32px !important; min-width:32px !important;
  border-radius:10px !important; font-size:14px !important;
  box-shadow:none !important;
}
#pageUstun #u1HeroSettingsDrop .mb-settings-back{
  background:#eef2ff !important; color:#4f46e5 !important;
}
#pageUstun #u1HeroSettingsDrop .mb-settings-apply{
  background:linear-gradient(135deg,#2563eb,#6366f1) !important; color:#fff !important;
  box-shadow:0 5px 13px rgba(79,70,229,.18) !important;
}
#pageUstun #u1HeroSettingsDrop .mb-settings-close{
  background:#f1efff !important; color:#6d28d9 !important;
}

/* Two compact columns = PIN-style menu rather than a tall full-screen form. */
#pageUstun #u1HeroSettingsDrop > .quick-settings-card{
  margin:0 0 7px !important;
  padding:8px 9px !important;
  border-radius:13px !important;
  border:1px solid #e3e6f5 !important;
  background:rgba(255,255,255,.86) !important;
  box-shadow:0 3px 10px rgba(49,46,129,.035) !important;
}
#pageUstun #u1HeroSettingsDrop > .quick-settings-card:first-of-type{
  grid-column:1 / -1;
}
#pageUstun #u1HeroSettingsDrop .quick-settings-card label{
  color:#4c4a72 !important;
  font-size:9px !important;
  margin-bottom:4px !important;
  letter-spacing:.05em !important;
}
#pageUstun #u1HeroSettingsDrop .u1-type-grid{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:5px !important;
}
#pageUstun #u1HeroSettingsDrop .u1-type-card{
  min-height:57px !important;
  padding:6px 3px !important;
  border-radius:10px !important;
  border-color:#e1e5f4 !important;
  background:#fafaff !important;
}
#pageUstun #u1HeroSettingsDrop .u1-type-card.u1-active{
  border-color:#818cf8 !important;
  background:linear-gradient(145deg,#eef2ff,#f5f3ff) !important;
  box-shadow:0 4px 10px rgba(99,102,241,.10) !important;
}
#pageUstun #u1HeroSettingsDrop .u1-type-card .u1-icon{font-size:15px !important;margin-bottom:1px !important;}
#pageUstun #u1HeroSettingsDrop .u1-type-card .u1-name{font-size:9.5px !important;color:#37346b !important;line-height:1.05 !important;}
#pageUstun #u1HeroSettingsDrop .u1-type-card .u1-desc{display:none !important;}

#pageUstun #u1HeroSettingsDrop .u1-op-row{gap:5px !important;}
#pageUstun #u1HeroSettingsDrop .u1-op-btn{
  min-height:30px !important; padding:4px 8px !important; border-radius:9px !important;
  font-size:11px !important; background:#f5f6ff !important; color:#4c4a72 !important;
  border:1px solid #e1e4f3 !important;
}
#pageUstun #u1HeroSettingsDrop .u1-op-btn.u1-active{
  color:#fff !important; border-color:#6366f1 !important;
  background:linear-gradient(135deg,#2563eb,#6366f1) !important;
}
#pageUstun #u1HeroSettingsDrop .u1-stepper{gap:5px !important;}
#pageUstun #u1HeroSettingsDrop .u1-stepper button{
  width:34px !important; height:30px !important; border-radius:9px !important;
  background:#eef2ff !important; color:#4f46e5 !important; border:1px solid #dfe3f5 !important;
}
#pageUstun #u1HeroSettingsDrop .u1-stepper input{
  height:30px !important; border-radius:9px !important; font-size:13px !important;
  color:#312e81 !important; background:#fafaff !important; border:1px solid #dfe3f5 !important;
}
#pageUstun #u1HeroSettingsDrop input[type="range"]{accent-color:#6366f1 !important; height:4px !important;}
#pageUstun #u1HeroSettingsDrop #u1NamesToggleBtn{
  margin-top:6px !important; min-height:29px !important; padding:5px 8px !important;
  border-radius:9px !important; color:#4f46e5 !important; background:#eef2ff !important;
  border:1px solid #dfe3f5 !important; font-size:10px !important;
}

/* Make the cards compact as a grid on desktop/notebook. */
@media (min-width:681px){
  /* MUHIM: bu yerda ILGARI "#pageUstun #u1HeroSettingsDrop{display:grid !important;...}"
     — HECH QANDAY sharttsiz — yozilgan edi. Bu qoida JS orqali (✓/✕ tugmalari
     bosilganda) qo'yiladigan "display:none" inline uslubidan HAM kuchliroq edi
     (chunki stylesheet'dagi !important har doim oddiy inline style'ni yengadi),
     shu sabab katta ekranlarda (>=681px, deyarli barcha kompyuter/noutbuklar)
     panel HECH QACHON yopilmasdi — ✓ yoki ✕ bossa ham ko'rinishda qolaverardi.
     Endi qoida FAQAT panel ochiq holatda (JS uni "flex" qilib qo'yganda) ishlaydi
     — panel yopilganda (style="display:none") bu selektor mos kelmay qoladi va
     panel haqiqatan ham yashiriladi. */
  #pageUstun #u1HeroSettingsDrop[style*="flex"]{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    align-content:start !important;
    gap:7px !important;
  }
  #pageUstun #u1HeroSettingsDrop .mb-settings-head{grid-column:1 / -1 !important;}
  #pageUstun #u1HeroSettingsDrop > .quick-settings-card:nth-of-type(2),
  #pageUstun #u1HeroSettingsDrop > .quick-settings-card:nth-of-type(3),
  #pageUstun #u1HeroSettingsDrop > .quick-settings-card:nth-of-type(4),
  #pageUstun #u1HeroSettingsDrop > .quick-settings-card:nth-of-type(5){min-width:0;}
}

/* Multi-player PIN-style windows: smaller and purple-blue, never black. */
#pageUstun .ekm-settings-overlay[id^="u1m"]{
  background:rgba(99,102,241,.10) !important;
  backdrop-filter:blur(7px) !important;
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .ekm-settings-modal{
  width:min(560px,calc(100vw - 28px)) !important;
  max-width:calc(100vw - 28px) !important;
  max-height:min(600px,calc(100dvh - 30px)) !important;
  overflow:hidden !important;
  padding:12px !important;
  border-radius:20px !important;
  border:1px solid rgba(99,102,241,.18) !important;
  background:linear-gradient(145deg,#ffffff,#f7f7ff,#f3f0ff) !important;
  box-shadow:0 22px 60px rgba(49,46,129,.18) !important;
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .ekm-settings-modal::before{
  height:3px !important;
  background:linear-gradient(90deg,#2563eb,#6366f1,#8b5cf6) !important;
}
#pageUstun .ekm-settings-titlebar > span{color:#312e81 !important;font-size:13px !important;}
#pageUstun .ekm-settings-close{
  width:32px !important;height:32px !important;min-width:32px !important;
  background:#f1efff !important;color:#6d28d9 !important;
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .quick-settings-card{
  margin:0 0 6px !important;padding:8px 9px !important;border-radius:12px !important;
  border:1px solid #e3e6f5 !important;background:rgba(255,255,255,.88) !important;
  box-shadow:0 3px 10px rgba(49,46,129,.035) !important;
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .quick-settings-card label{font-size:9px !important;color:#4c4a72 !important;margin-bottom:4px !important;}
#pageUstun .ekm-settings-overlay[id^="u1m"] .s-btn{
  min-height:30px !important;padding:4px 6px !important;border-radius:9px !important;
  font-size:10px !important;background:#f5f6ff !important;color:#4c4a72 !important;border:1px solid #e1e4f3 !important;
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .s-btn.active{
  background:linear-gradient(135deg,#2563eb,#6366f1) !important;color:#fff !important;border-color:#6366f1 !important;
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .stepper button{
  height:30px !important;width:34px !important;border-radius:9px !important;background:#eef2ff !important;color:#4f46e5 !important;
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .stepper input{height:30px !important;border-radius:9px !important;color:#312e81 !important;background:#fafaff !important;border-color:#dfe3f5 !important;}

@media (max-width:680px){
  #pageUstun #u1HeroSettingsDrop{width:calc(100vw - 18px) !important;max-width:calc(100vw - 18px) !important;max-height:calc(100dvh - 18px) !important;padding:9px !important;border-radius:17px !important;}
  #pageUstun #u1HeroSettingsDrop .u1-type-grid{grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:3px !important;}
  #pageUstun #u1HeroSettingsDrop .u1-type-card{min-height:52px !important;padding:5px 2px !important;}
  #pageUstun #u1HeroSettingsDrop .u1-type-card .u1-name{font-size:8.5px !important;}
  #pageUstun .ekm-settings-overlay[id^="u1m"] .ekm-settings-modal{width:calc(100vw - 18px) !important;max-width:calc(100vw - 18px) !important;max-height:calc(100dvh - 18px) !important;padding:9px !important;border-radius:17px !important;}
}