/* USTUN 1 — compact PIN-style settings, blue/purple only */

:root{
  --u1-pin-blue:#2563eb;
  --u1-pin-indigo:#6366f1;
  --u1-pin-purple:#7c3aed;
  --u1-pin-bg:#f7f8ff;
  --u1-pin-line:#dfe5ff;
  --u1-pin-text:#27356f;
}

/* Single-player: compact floating PIN menu instead of a full-screen modal */
#pageUstun #u1HeroSettingsDrop{
  position:fixed !important;
  top:78px !important;
  right:22px !important;
  left:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:min(570px,calc(100vw - 44px)) !important;
  max-width:570px !important;
  max-height:min(680px,calc(100dvh - 96px)) !important;
  padding:12px !important;
  gap:7px !important;
  overflow:auto !important;
  scrollbar-width:thin;
  background:linear-gradient(145deg,#ffffff 0%,#f7f8ff 72%,#f1efff 100%) !important;
  border:1px solid #dfe5ff !important;
  border-radius:20px !important;
  box-shadow:0 18px 48px rgba(71,85,180,.16),0 5px 18px rgba(37,99,235,.08) !important;
}
#pageUstun #u1HeroSettingsDrop::before{
  height:3px !important;
  background:linear-gradient(90deg,var(--u1-pin-blue),var(--u1-pin-indigo),var(--u1-pin-purple)) !important;
}
#u1HeroSettingsDrop .mb-settings-head{
  min-height:38px !important;
  padding:0 1px 7px !important;
  border-bottom:1px solid #e8eaff !important;
}
#u1HeroSettingsDrop .mb-settings-head-title{
  color:var(--u1-pin-text) !important;
  font-size:14px !important;
}
#u1HeroSettingsDrop .mb-settings-icon{
  width:32px !important;height:32px !important;min-width:32px !important;
  border-radius:10px !important;font-size:14px !important;
}
#u1HeroSettingsDrop .mb-settings-back{background:#edf2ff !important;color:var(--u1-pin-blue) !important;}
#u1HeroSettingsDrop .mb-settings-apply{background:linear-gradient(135deg,var(--u1-pin-blue),var(--u1-pin-indigo)) !important;box-shadow:0 5px 12px rgba(79,70,229,.18) !important;}
#u1HeroSettingsDrop .mb-settings-close{background:#f0edff !important;color:var(--u1-pin-purple) !important;}

/* Make the settings a compact PIN-like grid: type stays full width, controls
   become two-column cards so the whole menu is much shorter. */
#pageUstun #o1-settings-ustun{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px !important;
}
#pageUstun #o1-settings-ustun > .quick-settings-card:first-child{
  grid-column:1 / -1;
}
#pageUstun #u1HeroSettingsDrop .quick-settings-card{
  padding:8px 9px !important;
  border-radius:13px !important;
  border:1px solid var(--u1-pin-line) !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 3px 10px rgba(71,85,180,.045) !important;
}
#pageUstun #u1HeroSettingsDrop .quick-settings-card:hover{
  border-color:#c9d3ff !important;
  box-shadow:0 5px 14px rgba(79,70,229,.08) !important;
}
#pageUstun #u1HeroSettingsDrop .quick-settings-card label{
  color:#53639a !important;
  font-size:9px !important;
  margin-bottom:4px !important;
}
#pageUstun #u1HeroSettingsDrop .u1-type-grid{gap:5px !important;}
#pageUstun #u1HeroSettingsDrop .u1-type-card{
  min-height:62px !important;
  padding:6px 4px !important;
  border-radius:10px !important;
  border-color:#e0e5ff !important;
  background:#fafaff !important;
}
#pageUstun #u1HeroSettingsDrop .u1-type-card.u1-active{
  background:linear-gradient(145deg,#edf3ff,#f0edff) !important;
  border-color:#9db5ff !important;
  box-shadow:inset 0 0 0 1px rgba(99,102,241,.08) !important;
}
#pageUstun #u1HeroSettingsDrop .u1-type-card .u1-icon{font-size:16px !important;}
#pageUstun #u1HeroSettingsDrop .u1-type-card .u1-name{font-size:10.5px !important;color:#34447d !important;}
#pageUstun #u1HeroSettingsDrop .u1-type-card .u1-desc{font-size:7.7px !important;color:#7180aa !important;}
#pageUstun #u1HeroSettingsDrop .u1-op-row{gap:5px !important;}
#pageUstun #u1HeroSettingsDrop .u1-op-btn{
  min-height:31px !important;padding:4px 7px !important;border-radius:9px !important;
  font-size:11px !important;background:#f4f6ff !important;color:#46568e !important;border:1px solid #dfe5ff !important;
}
#pageUstun #u1HeroSettingsDrop .u1-op-btn.u1-active{
  background:linear-gradient(135deg,#e8f0ff,#eeeaff) !important;color:#3158c8 !important;border-color:#a9baff !important;
}
#pageUstun #u1HeroSettingsDrop .u1-stepper{gap:5px !important;}
#pageUstun #u1HeroSettingsDrop .u1-stepper button{
  height:31px !important;width:36px !important;border-radius:9px !important;
  background:#edf2ff !important;color:#3158c8 !important;border:1px solid #d7e0ff !important;
}
#pageUstun #u1HeroSettingsDrop .u1-stepper input{
  height:31px !important;border-radius:9px !important;font-size:13px !important;
  color:#314276 !important;background:#fafbff !important;border:1px solid #dfe5ff !important;
}
#pageUstun #u1HeroSettingsDrop input[type="number"]{
  border-color:#dfe5ff !important;background:#fafbff !important;color:#314276 !important;
}
#pageUstun #u1HeroSettingsDrop input[type="range"]{accent-color:var(--u1-pin-indigo);}

/* Multi-player: same compact PIN look, with no dark overlay. */
#pageUstun .ekm-settings-overlay[id^="u1m"]{
  padding:12px !important;
  background:rgba(99,102,241,.08) !important;
  backdrop-filter:blur(3px);
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .ekm-settings-modal{
  width:min(600px,calc(100vw - 32px)) !important;
  max-width:600px !important;
  max-height:min(620px,calc(100dvh - 32px)) !important;
  padding:13px !important;
  overflow:auto !important;
  border:1px solid #dfe5ff !important;
  border-radius:20px !important;
  background:linear-gradient(145deg,#ffffff,#f7f8ff 72%,#f1efff) !important;
  box-shadow:0 18px 55px rgba(71,85,180,.18),0 5px 20px rgba(37,99,235,.08) !important;
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .ekm-settings-modal::before{
  height:3px !important;
  background:linear-gradient(90deg,var(--u1-pin-blue),var(--u1-pin-indigo),var(--u1-pin-purple)) !important;
}
#pageUstun .ekm-settings-titlebar{
  min-height:36px !important;padding:0 0 7px !important;margin:0 0 7px !important;
  border-color:#e8eaff !important;
}
#pageUstun .ekm-settings-titlebar > span{font-size:13px !important;color:var(--u1-pin-text) !important;}
#pageUstun .ekm-settings-close{
  width:32px !important;height:32px !important;min-width:32px !important;
  border-radius:10px !important;background:#f0edff !important;color:var(--u1-pin-purple) !important;
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .quick-settings-card{
  margin:0 0 6px !important;padding:7px 8px !important;border-radius:12px !important;
  border:1px solid var(--u1-pin-line) !important;background:rgba(255,255,255,.94) !important;
  box-shadow:0 3px 9px rgba(71,85,180,.04) !important;
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .quick-settings-card label{
  color:#53639a !important;font-size:9px !important;margin-bottom:4px !important;
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .s-btn{
  min-height:31px !important;padding:4px 6px !important;border-radius:9px !important;
  font-size:10px !important;background:#f4f6ff !important;color:#46568e !important;border:1px solid #dfe5ff !important;
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .s-btn.active{
  background:linear-gradient(135deg,#e8f0ff,#eeeaff) !important;color:#3158c8 !important;border-color:#a9baff !important;
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .stepper{gap:5px !important;}
#pageUstun .ekm-settings-overlay[id^="u1m"] .stepper button{
  height:31px !important;width:36px !important;border-radius:9px !important;
  background:#edf2ff !important;color:#3158c8 !important;border:1px solid #d7e0ff !important;
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .stepper input{
  height:31px !important;border-radius:9px !important;color:#314276 !important;background:#fafbff !important;border:1px solid #dfe5ff !important;
}

@media (min-width:700px){
  #pageUstun .ekm-settings-overlay[id^="u1m"] .ekm-settings-modal{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px !important;
    align-content:start;
  }
  #pageUstun .ekm-settings-overlay[id^="u1m"] .ekm-settings-titlebar,
  #pageUstun .ekm-settings-overlay[id^="u1m"] .ekm-settings-modal > div:last-child{
    grid-column:1 / -1;
  }
  #pageUstun .ekm-settings-overlay[id^="u1m"] .quick-settings-card{margin:0 !important;}
}

@media (max-width:699px){
  #pageUstun #u1HeroSettingsDrop{
    top:64px !important;right:9px !important;width:calc(100vw - 18px) !important;
    max-width:none !important;max-height:calc(100dvh - 74px) !important;padding:9px !important;
  }
  #pageUstun #o1-settings-ustun{grid-template-columns:1fr !important;}
  #pageUstun #o1-settings-ustun > .quick-settings-card:first-child{grid-column:auto !important;}
  #pageUstun #u1HeroSettingsDrop .u1-type-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  #pageUstun .ekm-settings-overlay[id^="u1m"] .ekm-settings-modal{
    width:calc(100vw - 18px) !important;max-width:none !important;max-height:calc(100dvh - 18px) !important;
  }
}

/* Never use black/dark modal chrome in Ustun 1 settings. */
#pageUstun #u1HeroSettingsDrop,
#pageUstun #u1HeroSettingsDrop * ,
#pageUstun .ekm-settings-overlay[id^="u1m"] .ekm-settings-modal,
#pageUstun .ekm-settings-overlay[id^="u1m"] .ekm-settings-modal *{
  --settings-dark:#314276;
}