/* USTUN 1 SETTINGS — clean card UI, no hidden settings on notebook screens */

/* Single-player settings: open as a centered modal card instead of a small
   dropdown, so the whole settings surface stays inside the viewport. */
#pageUstun #u1HeroSettingsDrop{
  position:fixed !important;
  top:50% !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  z-index:5000 !important;
  width:min(760px,calc(100vw - 32px)) !important;
  max-width:calc(100vw - 32px) !important;
  max-height:calc(100dvh - 28px) !important;
  padding:16px !important;
  display:flex;
  flex-direction:column;
  gap:9px !important;
  overflow:hidden !important;
  box-sizing:border-box;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,250,255,.98)) !important;
  border:1px solid rgba(148,163,184,.24) !important;
  border-radius:24px !important;
  box-shadow:0 28px 80px rgba(15,23,42,.24),0 8px 28px rgba(59,130,246,.10) !important;
  backdrop-filter:blur(18px);
}

#pageUstun #u1HeroSettingsDrop::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,#2563eb,#7c3aed,#f59e0b);
  border-radius:24px 24px 0 0;
  pointer-events:none;
}

#u1HeroSettingsDrop .mb-settings-head{
  flex:0 0 auto;
  min-height:44px;
  display:grid !important;
  grid-template-columns:44px 1fr auto;
  align-items:center;
  gap:8px;
  padding:2px 2px 8px !important;
  border-bottom:1px solid #e8edf5;
}
#u1HeroSettingsDrop .mb-settings-head-title{
  text-align:center;
  font-family:'Inter',sans-serif;
  font-size:15px;
  font-weight:900;
  color:#172554;
  letter-spacing:-.02em;
}
#u1HeroSettingsDrop .mb-settings-head-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
#u1HeroSettingsDrop .mb-settings-icon{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  border:0 !important;
  border-radius:12px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  font-size:17px !important;
  font-weight:900 !important;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
#u1HeroSettingsDrop .mb-settings-back{background:#eef4ff !important;color:#2563eb !important;}
#u1HeroSettingsDrop .mb-settings-apply{background:linear-gradient(135deg,#2563eb,#4f46e5) !important;color:#fff !important;box-shadow:0 6px 16px rgba(37,99,235,.22);}
#u1HeroSettingsDrop .mb-settings-close{background:#fef2f2 !important;color:#dc2626 !important;}
#u1HeroSettingsDrop .mb-settings-icon:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(15,23,42,.12);}

#pageUstun #u1HeroSettingsDrop .quick-settings-card{
  margin:0 !important;
  padding:10px 11px !important;
  border-radius:15px !important;
  border:1px solid #e7ebf3 !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:0 4px 14px rgba(15,23,42,.045) !important;
  flex:0 0 auto;
}
#pageUstun #u1HeroSettingsDrop .quick-settings-card:hover{
  border-color:#d7e2fb !important;
  box-shadow:0 7px 18px rgba(37,99,235,.07) !important;
}
#pageUstun #u1HeroSettingsDrop .quick-settings-card label{
  margin-bottom:6px !important;
  font-family:'Inter',sans-serif !important;
  font-size:10px !important;
  letter-spacing:.07em !important;
  color:#475569 !important;
}
#pageUstun #u1HeroSettingsDrop .u1-type-grid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:7px !important;
  margin:0 !important;
}
#pageUstun #u1HeroSettingsDrop .u1-type-card{
  min-width:0 !important;
  min-height:72px !important;
  padding:8px 5px !important;
  border-radius:12px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}
#pageUstun #u1HeroSettingsDrop .u1-type-card .u1-icon{font-size:18px !important;margin-bottom:2px !important;}
#pageUstun #u1HeroSettingsDrop .u1-type-card .u1-name{font-size:11.5px !important;line-height:1.15 !important;white-space:nowrap;}
#pageUstun #u1HeroSettingsDrop .u1-type-card .u1-desc{font-size:8.5px !important;line-height:1.12 !important;margin-top:2px !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

#pageUstun #u1HeroSettingsDrop .u1-op-row{gap:6px !important;}
#pageUstun #u1HeroSettingsDrop .u1-op-btn{
  min-height:34px !important;
  padding:5px 10px !important;
  border-radius:10px !important;
  font-size:12px !important;
}
#pageUstun #u1HeroSettingsDrop .u1-stepper{gap:6px !important;}
#pageUstun #u1HeroSettingsDrop .u1-stepper button{height:34px !important;width:42px !important;border-radius:10px !important;}
#pageUstun #u1HeroSettingsDrop .u1-stepper input{height:34px !important;border-radius:10px !important;font-size:14px !important;}
#pageUstun #u1HeroSettingsDrop #u1NamesToggleBtn{margin-top:7px !important;padding:7px 10px !important;min-height:32px;}

/* Multi-player settings overlays: larger, cleaner card and enough width to
   keep the five choices on one row on desktop/notebook screens. */
#pageUstun .ekm-settings-overlay[id^="u1m"]{
  z-index:6000 !important;
  padding:14px !important;
  background:rgba(15,23,42,.48) !important;
  backdrop-filter:blur(5px);
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .ekm-settings-modal{
  position:relative;
  width:min(700px,calc(100vw - 28px)) !important;
  max-width:calc(100vw - 28px) !important;
  max-height:calc(100dvh - 28px) !important;
  overflow:hidden !important;
  padding:16px !important;
  border:1px solid rgba(148,163,184,.25) !important;
  border-radius:24px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,250,255,.98)) !important;
  box-shadow:0 30px 90px rgba(15,23,42,.28),0 8px 30px rgba(59,130,246,.12) !important;
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .ekm-settings-modal::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#2563eb,#7c3aed,#f59e0b);
  border-radius:24px 24px 0 0;
}
#pageUstun .ekm-settings-titlebar{
  min-height:42px;
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 0 9px !important;
  margin:0 0 8px !important;
  border-bottom:1px solid #e8edf5;
}
#pageUstun .ekm-settings-titlebar > span{
  font-family:'Inter',sans-serif;
  font-size:15px;
  font-weight:900;
  color:#172554;
}
#pageUstun .ekm-settings-close{
  width:36px;height:36px;min-width:36px;
  border:0;border-radius:11px;
  display:grid;place-items:center;
  background:#fef2f2;color:#dc2626;
  font-size:16px;font-weight:900;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
#pageUstun .ekm-settings-close:hover{transform:translateY(-1px);background:#fee2e2;box-shadow:0 7px 16px rgba(220,38,38,.14);}
#pageUstun .ekm-settings-overlay[id^="u1m"] .quick-settings-card{
  margin:0 0 8px !important;
  padding:9px 10px !important;
  border-radius:14px !important;
  border:1px solid #e7ebf3 !important;
  background:rgba(255,255,255,.9) !important;
  box-shadow:0 4px 14px rgba(15,23,42,.04) !important;
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .quick-settings-card label{
  margin-bottom:5px !important;
  font-family:'Inter',sans-serif !important;
  font-size:10px !important;
  color:#475569 !important;
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .op-btn-group,
#pageUstun .ekm-settings-overlay[id^="u1m"] .small-btn-group{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:6px !important;
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .s-btn{
  flex:1 1 0 !important;
  min-width:0 !important;
  min-height:34px !important;
  padding:5px 7px !important;
  border-radius:10px !important;
  font-size:11px !important;
  font-weight:800 !important;
}
#pageUstun .ekm-settings-overlay[id^="u1m"] .stepper{gap:6px !important;}
#pageUstun .ekm-settings-overlay[id^="u1m"] .stepper button{height:34px !important;width:42px !important;border-radius:10px !important;}
#pageUstun .ekm-settings-overlay[id^="u1m"] .stepper input{height:34px !important;border-radius:10px !important;font-size:14px !important;}
#pageUstun .ekm-settings-overlay[id^="u1m"] .ekm-settings-modal > div:last-child{margin-top:4px !important;}
#pageUstun .ekm-settings-overlay[id^="u1m"] .ekm-settings-modal > div:last-child button{min-height:36px;border-radius:11px !important;font-size:11px !important;font-weight:800;}

/* Desktop/notebook: keep the full menu comfortably inside 768px height. */
@media (min-width:900px) and (min-height:650px){
  #pageUstun #u1HeroSettingsDrop{width:min(780px,calc(100vw - 36px)) !important;}
  #pageUstun .ekm-settings-overlay[id^="u1m"] .ekm-settings-modal{width:min(720px,calc(100vw - 32px)) !important;}
}

/* Smaller screens: retain the no-hidden-settings look as far as practical;
   only the type cards wrap when the viewport is genuinely narrow. */
@media (max-width:680px){
  #pageUstun #u1HeroSettingsDrop{
    width:calc(100vw - 18px) !important;
    max-width:calc(100vw - 18px) !important;
    max-height:calc(100dvh - 18px) !important;
    padding:10px !important;
    gap:6px !important;
    border-radius:19px !important;
  }
  #u1HeroSettingsDrop .mb-settings-head{min-height:38px !important;grid-template-columns:36px 1fr auto !important;padding-bottom:6px !important;}
  #u1HeroSettingsDrop .mb-settings-head-title{font-size:12px !important;}
  #u1HeroSettingsDrop .mb-settings-icon{width:32px !important;height:32px !important;min-width:32px !important;font-size:14px !important;}
  #u1HeroSettingsDrop .u1-type-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  #u1HeroSettingsDrop .u1-type-card{min-height:58px !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:11px !important;border-radius:19px !important;}
  #pageUstun .ekm-settings-overlay[id^="u1m"] .ekm-settings-titlebar > span{font-size:12px !important;}
  #pageUstun .ekm-settings-overlay[id^="u1m"] .ekm-settings-close{width:32px;height:32px;min-width:32px;}
  #pageUstun .ekm-settings-overlay[id^="u1m"] .op-btn-group,
  #pageUstun .ekm-settings-overlay[id^="u1m"] .small-btn-group{gap:4px !important;}
  #pageUstun .ekm-settings-overlay[id^="u1m"] .s-btn{font-size:9px !important;padding:4px 3px !important;min-height:30px !important;}
}

@media (max-width:390px){
  #pageUstun #u1HeroSettingsDrop .u1-type-grid{grid-template-columns:1fr 1fr !important;}
  #pageUstun .ekm-settings-overlay[id^="u1m"] .quick-settings-card{padding:7px !important;margin-bottom:5px !important;}
  #pageUstun .ekm-settings-overlay[id^="u1m"] .quick-settings-card label{font-size:9px !important;margin-bottom:3px !important;}
}