/* Sweet Shift Saga v4.5.1.14 — Map HUD Cleanup
   The map is the hero. Resources are grouped, core destinations stay visible,
   and secondary tools live in one deliberate More tray instead of a button wall. */

#screen-map.active{
  --ss14-hud-purple:#5f3f9f;
  --ss14-hud-purple-dark:#392770;
  --ss14-hud-pink:#d63b93;
  --ss14-hud-pink-dark:#8f2364;
  --ss14-hud-blue:#2c84c9;
  --ss14-hud-blue-dark:#1b5798;
  --ss14-hud-cream:#fffaf1;
  --ss14-hud-ink:#5b456a;
}

#screen-map.active .map-hud-layer{
  padding:15px 18px!important;
  gap:18px!important;
}

#screen-map.active .map-hud-right{
  pointer-events:auto!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;
  width:auto!important;
  max-width:min(620px,calc(100vw - 390px))!important;
}

#screen-map.active .map-hud-cluster{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  padding:0!important;
  pointer-events:auto!important;
}

/* Resource information reads as one piece of HUD, not two more menu buttons. */
#screen-map.active .map-resource-strip{
  display:flex!important;
  align-items:stretch!important;
  min-height:54px!important;
  border:3px solid rgba(255,255,255,.94)!important;
  border-radius:19px!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,244,250,.96))!important;
  box-shadow:0 4px 0 rgba(87,60,96,.28),0 8px 18px rgba(44,32,61,.12)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
#screen-map.active .map-resource-strip .map-square-stat{
  width:86px!important;
  min-width:86px!important;
  height:54px!important;
  min-height:54px!important;
  padding:6px 10px!important;
  display:grid!important;
  grid-template-columns:25px minmax(0,1fr)!important;
  align-items:center!important;
  justify-items:start!important;
  gap:7px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  color:var(--ss14-hud-ink)!important;
}
#screen-map.active .map-resource-strip .map-square-stat + .map-square-stat{
  border-left:2px solid rgba(118,87,126,.13)!important;
}
#screen-map.active .map-resource-strip .map-square-stat.sugar,
#screen-map.active .map-resource-strip .map-square-stat.stars{
  background:transparent!important;
}
#screen-map.active .map-resource-strip .map-square-stat>span{
  width:25px!important;
  height:25px!important;
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
  font-size:1rem!important;
  line-height:1!important;
}
#screen-map.active .map-resource-strip .map-square-stat>div{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:1px!important;
}
#screen-map.active .map-resource-strip .map-square-stat strong{
  color:#53385f!important;
  font-size:.7rem!important;
  line-height:1!important;
  max-width:48px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#screen-map.active .map-resource-strip .map-square-stat small{
  display:block!important;
  color:#8e7293!important;
  font-size:.43rem!important;
  font-weight:900!important;
  line-height:1!important;
  text-shadow:none!important;
  letter-spacing:.02em!important;
}

/* Permanent shortcuts: one primary destination and three compact utilities. */
#screen-map.active .map-primary-tools{
  display:flex!important;
  align-items:flex-start!important;
  gap:7px!important;
  pointer-events:auto!important;
}
#screen-map.active .map-primary-tools>.map-square-button,
#screen-map.active .map-more-wrap>.map-square-button{
  height:54px!important;
  min-height:54px!important;
  min-width:50px!important;
  width:50px!important;
  padding:5px!important;
  border-radius:17px!important;
  border-width:2px!important;
  gap:2px!important;
  box-shadow:0 4px 0 var(--map-ui-shadow),0 7px 14px rgba(28,25,61,.15),inset 0 2px 0 rgba(255,255,255,.2)!important;
}
#screen-map.active .map-primary-tools>.map-square-button .map-square-icon,
#screen-map.active .map-more-wrap>.map-square-button .map-square-icon{
  min-height:25px!important;
  font-size:1.05rem!important;
}
#screen-map.active .map-primary-tools>.map-square-button>small,
#screen-map.active .map-more-wrap>.map-square-button>small{
  max-width:46px!important;
  display:block!important;
  font-size:.4rem!important;
  line-height:1!important;
}

#screen-map.active #map-activities-btn{
  width:90px!important;
  min-width:90px!important;
  display:grid!important;
  grid-template-columns:27px minmax(0,1fr)!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  justify-items:start!important;
  padding:6px 11px!important;
  gap:6px!important;
  border-radius:19px!important;
  background:linear-gradient(180deg,#f24aa6,#b92f85)!important;
  --map-ui-shadow:#85205f!important;
}
#screen-map.active #map-activities-btn .map-square-icon{
  min-height:0!important;
  font-size:1.2rem!important;
}
#screen-map.active #map-activities-btn>small{
  display:block!important;
  max-width:none!important;
  font-size:.55rem!important;
  letter-spacing:.01em!important;
}
#screen-map.active #map-activities-btn .map-activities-badge{
  top:-7px!important;
  right:-6px!important;
}

#screen-map.active #map-inventory-btn{
  background:linear-gradient(180deg,#d57042,#a54828)!important;
  --map-ui-shadow:#74331f!important;
}
#screen-map.active #map-news-btn{
  background:linear-gradient(180deg,#c33d8f,#8f286d)!important;
  --map-ui-shadow:#641b4d!important;
}
#screen-map.active #map-more-btn{
  background:linear-gradient(180deg,#536da5,#344a7f)!important;
  --map-ui-shadow:#27375e!important;
}
#screen-map.active #map-more-btn .map-square-icon{
  font-size:.92rem!important;
  letter-spacing:.08em!important;
  transform:translateY(-1px)!important;
}

/* The old Challenges/Sweetfolio direct controls stay intentionally retired. */
#screen-map.active .activity-direct-retired{
  display:none!important;
}

/* Secondary tools are one popover instead of three permanent squares. */
#screen-map.active .map-more-wrap{
  position:relative!important;
  pointer-events:auto!important;
}
#screen-map.active .map-more-menu{
  position:absolute!important;
  top:66px!important;
  right:0!important;
  width:224px!important;
  padding:10px!important;
  display:grid!important;
  gap:7px!important;
  border:3px solid #fff!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,#fff9f3,#ffeaf6)!important;
  box-shadow:0 6px 0 rgba(106,66,103,.3),0 16px 30px rgba(40,28,56,.22)!important;
  z-index:420!important;
  transform-origin:top right!important;
}
#screen-map.active .map-more-menu.hidden{
  display:none!important;
}
#screen-map.active .map-more-menu::before{
  content:""!important;
  position:absolute!important;
  right:16px!important;
  top:-9px!important;
  width:16px!important;
  height:16px!important;
  background:#fff7f2!important;
  border-left:3px solid #fff!important;
  border-top:3px solid #fff!important;
  transform:rotate(45deg)!important;
}
#screen-map.active .map-more-heading{
  padding:3px 7px 7px!important;
  display:flex!important;
  align-items:baseline!important;
  justify-content:space-between!important;
  gap:8px!important;
  border-bottom:2px solid rgba(124,75,111,.1)!important;
}
#screen-map.active .map-more-heading small{
  color:#c43d89!important;
  font-size:.43rem!important;
  font-weight:1000!important;
  letter-spacing:.12em!important;
}
#screen-map.active .map-more-heading strong{
  color:#684e72!important;
  font-size:.68rem!important;
}
#screen-map.active .map-more-menu .map-more-item{
  width:100%!important;
  min-width:0!important;
  height:52px!important;
  min-height:52px!important;
  padding:6px 9px!important;
  display:grid!important;
  grid-template-columns:35px minmax(0,1fr)!important;
  align-items:center!important;
  justify-items:start!important;
  gap:9px!important;
  border:2px solid rgba(255,255,255,.95)!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,#745ab1,#50388e)!important;
  box-shadow:0 3px 0 #38276d,0 6px 10px rgba(55,36,76,.13)!important;
  text-align:left!important;
}
#screen-map.active .map-more-menu .map-more-item:hover{
  transform:translateY(-1px)!important;
}
#screen-map.active .map-more-menu .map-more-item .map-square-icon{
  width:34px!important;
  height:34px!important;
  min-height:34px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.14)!important;
  font-size:1rem!important;
}
#screen-map.active .map-more-menu .map-more-item>span:last-child{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:2px!important;
}
#screen-map.active .map-more-menu .map-more-item strong{
  color:#fff!important;
  font-size:.58rem!important;
  line-height:1!important;
}
#screen-map.active .map-more-menu .map-more-item small{
  max-width:none!important;
  color:rgba(255,255,255,.76)!important;
  font-size:.39rem!important;
  line-height:1.1!important;
  text-shadow:none!important;
}

/* Keep the left side balanced with the lighter right side. */
#screen-map.active .map-hud-left{
  min-width:330px!important;
}
#screen-map.active .daily-candy-track.daily-candy-compact{
  top:70px!important;
  width:292px!important;
}

@media(max-width:1180px){
  #screen-map.active .map-hud-right{
    max-width:calc(100vw - 340px)!important;
  }
  #screen-map.active .map-resource-strip .map-square-stat{
    width:76px!important;
    min-width:76px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
  #screen-map.active #map-activities-btn{
    width:82px!important;
    min-width:82px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
}

@media(max-width:900px){
  #screen-map.active .map-hud-layer{
    padding:10px!important;
  }
  #screen-map.active .map-hud-left{
    min-width:248px!important;
  }
  #screen-map.active .daily-candy-track.daily-candy-compact{
    top:61px!important;
    width:238px!important;
  }
  #screen-map.active .map-hud-right{
    max-width:calc(100vw - 280px)!important;
  }
  #screen-map.active .map-hud-cluster{
    gap:7px!important;
  }
  #screen-map.active .map-resource-strip .map-square-stat{
    width:66px!important;
    min-width:66px!important;
    height:50px!important;
    min-height:50px!important;
    grid-template-columns:20px minmax(0,1fr)!important;
    gap:5px!important;
    padding:5px 6px!important;
  }
  #screen-map.active .map-resource-strip .map-square-stat>span{
    width:20px!important;
    height:20px!important;
    font-size:.86rem!important;
  }
  #screen-map.active .map-resource-strip .map-square-stat strong{
    font-size:.58rem!important;
  }
  #screen-map.active .map-resource-strip .map-square-stat small{
    font-size:.36rem!important;
  }
  #screen-map.active .map-primary-tools>.map-square-button,
  #screen-map.active .map-more-wrap>.map-square-button{
    width:47px!important;
    min-width:47px!important;
    height:50px!important;
    min-height:50px!important;
  }
  #screen-map.active #map-activities-btn{
    width:74px!important;
    min-width:74px!important;
    grid-template-columns:22px minmax(0,1fr)!important;
    gap:4px!important;
  }
  #screen-map.active #map-activities-btn>small{
    font-size:.48rem!important;
  }
}

@media(max-width:700px){
  #screen-map.active .map-resource-strip{
    display:none!important;
  }
  #screen-map.active .map-hud-right{
    max-width:205px!important;
  }
  #screen-map.active .map-primary-tools{
    gap:5px!important;
  }
  #screen-map.active #map-activities-btn{
    width:70px!important;
    min-width:70px!important;
  }
  #screen-map.active .map-primary-tools>.map-square-button,
  #screen-map.active .map-more-wrap>.map-square-button{
    width:42px!important;
    min-width:42px!important;
  }
  #screen-map.active .map-primary-tools>.map-square-button>small,
  #screen-map.active .map-more-wrap>.map-square-button>small{
    display:none!important;
  }
  #screen-map.active .map-more-menu{
    width:210px!important;
  }
}