/* Sweet Shift Saga v4.2.1.6 — map composition refinement */
/* Keep the floating-HUD idea, but align it like one deliberate game HUD. */
#screen-map .map-hud-layer{
  padding:12px 14px!important;
  gap:14px!important;
}
#screen-map .map-hud-left{align-items:center!important;gap:9px!important}
#screen-map .map-hud-right{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
}
#screen-map .map-hud-currencies{gap:6px!important}
#screen-map .map-hud-tools{gap:5px!important}
#screen-map .map-hud-pill{
  min-width:62px!important;
  height:40px!important;
  padding:0 10px!important;
  border-radius:16px!important;
  border-width:2px!important;
  box-shadow:0 3px 0 rgba(26,50,100,.62),0 7px 15px rgba(19,51,91,.18),inset 0 1px 0 rgba(255,255,255,.16)!important;
}
#screen-map .map-hud-tools .map-tool-square{
  width:39px!important;
  min-width:39px!important;
  height:39px!important;
  min-height:39px!important;
  border-width:2px!important;
  border-radius:14px!important;
  box-shadow:0 3px 0 #39217f,0 7px 14px rgba(28,24,75,.18)!important;
}
#screen-map .map-hud-back{
  width:44px!important;
  height:44px!important;
  border-width:2px!important;
  border-radius:15px!important;
  box-shadow:0 4px 0 #34206f,0 8px 18px rgba(31,25,76,.26),inset 0 1px 0 rgba(255,255,255,.24)!important;
}
#screen-map .map-player-hud{
  width:clamp(205px,22vw,275px)!important;
  min-height:54px!important;
  border-width:2px!important;
  border-radius:18px!important;
  box-shadow:0 4px 0 rgba(36,34,91,.68),0 9px 19px rgba(17,45,80,.21),inset 0 1px 0 rgba(255,255,255,.18)!important;
}

/* The banner is the only informational card inside the scene. */
#screen-map .map4208-world-banner{
  top:78px!important;
  min-width:min(430px,54vw)!important;
  padding:9px 32px 10px!important;
  border-radius:18px 18px 24px 24px!important;
}
#screen-map .map4208-world-banner small{font-size:.65rem!important}
#screen-map .map4208-world-banner strong{font-size:1.38rem!important}
#screen-map .map4208-world-banner span{font-size:.7rem!important;opacity:.88!important}

/* Remove old redundant scene cards even if stale markup appears from an older cache. */
#screen-map .map4208-world-progress,
#screen-map .map4208-episode-card{display:none!important}

/* Episode paging: small, quiet, and out of the road's way. */
#screen-map .map4208-episode-dots{
  left:50%!important;
  bottom:10px!important;
  min-height:28px!important;
  padding:5px 10px!important;
  gap:7px!important;
  border-radius:999px!important;
  background:rgba(25,37,52,.52)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:0 5px 14px rgba(19,28,45,.16)!important;
  backdrop-filter:blur(8px)!important;
}
#screen-map .map4208-episode-dot{
  width:10px!important;
  height:10px!important;
  border-width:1.5px!important;
  border-color:rgba(255,255,255,.92)!important;
  box-shadow:none!important;
  transition:width .16s ease,transform .16s ease,background .16s ease!important;
}
#screen-map .map4208-episode-dot.entered{background:#a987dd!important}
#screen-map .map4208-episode-dot.complete{background:#71d79a!important}
#screen-map .map4208-episode-dot.active{
  width:20px!important;
  border-radius:999px!important;
  background:#f25cac!important;
  transform:none!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.16)!important;
}
#screen-map .map4208-episode-dot.future{opacity:.52!important;background:transparent!important}

/* Side arrows should frame the scene, not dominate it. */
#screen-map .map4208-page-arrow{
  width:48px!important;
  height:62px!important;
  font-size:2.9rem!important;
  border-width:2px!important;
  border-radius:20px!important;
  opacity:.94;
}
#screen-map .map4208-page-arrow.previous{left:16px!important}
#screen-map .map4208-page-arrow.next{right:16px!important}

/* A little more breathing room at the bottom of the road. */
#screen-map .map4208-player-pin{bottom:82px!important}

@media(max-width:1050px){
  #screen-map .map-hud-right{display:grid!important;gap:6px!important}
  #screen-map .map-hud-currencies,#screen-map .map-hud-tools{justify-content:flex-end!important}
}
@media(max-width:720px){
  #screen-map .map4208-world-banner{top:108px!important;min-width:min(330px,70vw)!important}
  #screen-map .map4208-page-arrow{width:42px!important;height:56px!important;font-size:2.5rem!important}
  #screen-map .map4208-page-arrow.previous{left:8px!important}
  #screen-map .map4208-page-arrow.next{right:8px!important}
  #screen-map .map4208-episode-dots{bottom:7px!important;gap:5px!important;padding:4px 8px!important}
  #screen-map .map4208-episode-dot{width:8px!important;height:8px!important}
  #screen-map .map4208-episode-dot.active{width:16px!important}
}