/* Sweet Shift Saga v4.4.0.7 — Square Map HUD
   Keep the illustrated Saga map as the identity. The HUD is a small,
   consistent set of square controls that stays out of the path. */

#screen-map.active {
  --map-tile:64px;
  --map-tile-radius:17px;
  --map-ui-ink:#fff;
  --map-ui-dark:#3d2d72;
  --map-ui-dark-2:#273f7f;
  --map-ui-shadow:#251d5a;
}

/* ---------- HUD placement ---------- */
#screen-map.active .map-hud-layer {
  position:absolute !important;
  inset:0 0 auto 0 !important;
  z-index:150 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  padding:14px 16px !important;
  gap:16px !important;
  pointer-events:none !important;
}
#screen-map.active .map-hud-left,
#screen-map.active .map-hud-right,
#screen-map.active .map-square-row,
#screen-map.active .daily-candy-track {
  pointer-events:auto !important;
}
#screen-map.active .map-hud-left {
  position:relative !important;
  display:block !important;
  min-width:340px !important;
}
#screen-map.active .map-hud-right {
  display:block !important;
}
#screen-map.active .map-square-row {
  display:flex !important;
  align-items:flex-start !important;
  gap:8px !important;
}
#screen-map.active .map-square-row-right {
  justify-content:flex-end !important;
}

/* ---------- Shared square language ---------- */
#screen-map.active .map-square-button,
#screen-map.active .map-square-stat {
  position:relative !important;
  width:var(--map-tile) !important;
  min-width:var(--map-tile) !important;
  height:var(--map-tile) !important;
  min-height:var(--map-tile) !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:6px 5px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  border:2px solid rgba(255,255,255,.9) !important;
  border-radius:var(--map-tile-radius) !important;
  background:linear-gradient(180deg,rgba(84,67,160,.96),rgba(51,55,124,.97)) !important;
  color:var(--map-ui-ink) !important;
  box-shadow:0 4px 0 var(--map-ui-shadow),0 8px 18px rgba(25,24,69,.18),inset 0 2px 0 rgba(255,255,255,.18) !important;
  text-align:center !important;
  font:inherit !important;
  overflow:visible !important;
  backdrop-filter:blur(7px) !important;
  -webkit-backdrop-filter:blur(7px) !important;
}
#screen-map.active button.map-square-button {
  cursor:pointer !important;
  transition:transform .13s ease,filter .13s ease,box-shadow .13s ease !important;
}
#screen-map.active button.map-square-button:hover {
  transform:translateY(-2px) !important;
  filter:brightness(1.07) saturate(1.04) !important;
}
#screen-map.active button.map-square-button:active {
  transform:translateY(2px) !important;
  box-shadow:0 2px 0 var(--map-ui-shadow),0 4px 10px rgba(25,24,69,.16),inset 0 2px 0 rgba(255,255,255,.16) !important;
}
#screen-map.active button.map-square-button:focus-visible {
  outline:3px solid #ffe768 !important;
  outline-offset:3px !important;
}
#screen-map.active .map-square-button > small,
#screen-map.active .map-square-stat > small,
#screen-map.active .map-square-label {
  display:block !important;
  max-width:58px !important;
  color:#fff !important;
  font-size:.47rem !important;
  font-weight:1000 !important;
  line-height:1 !important;
  letter-spacing:.015em !important;
  white-space:nowrap !important;
  text-shadow:0 1px 1px rgba(32,23,66,.25) !important;
}
#screen-map.active .map-square-icon,
#screen-map.active .map-square-button > span[aria-hidden="true"] {
  display:grid !important;
  place-items:center !important;
  min-height:28px !important;
  font-size:1.2rem !important;
  line-height:1 !important;
}

/* Back is a normal member of the square system. */
#screen-map.active .map-square-back {
  background:linear-gradient(180deg,#6e58bd,#463390) !important;
}
#screen-map.active .map-square-back > span {
  font-size:1.75rem !important;
  margin-top:-3px !important;
}

/* Profile replaces the old Player Level tub. */
#screen-map.active .map-profile-button {
  background:linear-gradient(180deg,#385ea2,#263f7b) !important;
  padding:5px !important;
}
#screen-map.active .map-profile-avatar {
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  border:2px solid rgba(255,255,255,.95) !important;
  border-radius:12px !important;
  box-shadow:0 2px 5px rgba(21,31,70,.28) !important;
  overflow:hidden !important;
}
#screen-map.active .map-profile-avatar img {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
#screen-map.active .map-profile-level {
  position:absolute !important;
  top:-6px !important;
  right:-7px !important;
  min-width:27px !important;
  height:23px !important;
  padding:0 5px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  border:2px solid #fff !important;
  border-radius:9px !important;
  background:linear-gradient(180deg,#ffcc4f,#e59620) !important;
  color:#593314 !important;
  box-shadow:0 3px 0 #9f641b,0 5px 8px rgba(83,51,15,.16) !important;
  z-index:3 !important;
}
#screen-map.active .map-profile-level small {
  font-size:.37rem !important;
  font-weight:1000 !important;
}
#screen-map.active .map-profile-level strong {
  font-size:.61rem !important;
  font-weight:1000 !important;
}

/* Stats are quiet squares, not giant currency pills. */
#screen-map.active .map-square-stat {
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,246,252,.96)) !important;
  color:#6b4169 !important;
  border-color:#fff !important;
  box-shadow:0 4px 0 rgba(94,64,93,.35),0 8px 16px rgba(56,41,67,.11),inset 0 2px 0 #fff !important;
}
#screen-map.active .map-square-stat.sugar { background:linear-gradient(180deg,#fff4fb,#ffe1f2) !important; }
#screen-map.active .map-square-stat.stars { background:linear-gradient(180deg,#fff9df,#ffe7a2) !important; }
#screen-map.active .map-square-stat > span {
  font-size:1rem !important;
  line-height:1 !important;
}
#screen-map.active .map-square-stat > strong {
  max-width:58px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  color:#674260 !important;
  font-size:.69rem !important;
  font-weight:1000 !important;
  line-height:1 !important;
}
#screen-map.active .map-square-stat > small {
  color:#916e8b !important;
  text-shadow:none !important;
}

/* Tool accents without separate outer containers. */
#screen-map.active #map-challenges-btn { background:linear-gradient(180deg,#d34b9e,#9f347d) !important; --map-ui-shadow:#74265b; }
#screen-map.active #map-inventory-btn { background:linear-gradient(180deg,#f08a4c,#c35c37) !important; --map-ui-shadow:#8d432b; }
#screen-map.active #map-settings-btn { background:linear-gradient(180deg,#697aab,#46557f) !important; --map-ui-shadow:#323d60; }
#screen-map.active #map-guide-btn { background:linear-gradient(180deg,#429bd2,#2875af) !important; --map-ui-shadow:#1c5582; }
#screen-map.active #map-level-maker-btn { background:linear-gradient(180deg,#7958bd,#54348e) !important; --map-ui-shadow:#3d276c; }
#screen-map.active .map-inventory-count {
  position:absolute !important;
  top:-7px !important;
  right:-7px !important;
  min-width:22px !important;
  height:22px !important;
  padding:0 5px !important;
  display:grid !important;
  place-items:center !important;
  border:2px solid #fff !important;
  border-radius:9px !important;
  background:#ef3f77 !important;
  color:#fff !important;
  font-size:.55rem !important;
  font-weight:1000 !important;
  box-shadow:0 3px 0 #9c2850 !important;
}
#screen-map.active .map-inventory-count:empty,
#screen-map.active .map-inventory-count[data-empty="true"] { display:none !important; }

/* ---------- Compact Daily Candy strip ---------- */
#screen-map.active .daily-candy-track.daily-candy-compact {
  position:absolute !important;
  top:72px !important;
  left:0 !important;
  width:300px !important;
  min-height:0 !important;
  margin:0 !important;
  padding:7px 9px 8px !important;
  display:grid !important;
  grid-template-columns:1fr auto !important;
  gap:4px 7px !important;
  border:2px solid rgba(255,255,255,.94) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,244,251,.95)) !important;
  box-shadow:0 4px 0 rgba(112,77,105,.28),0 8px 17px rgba(55,39,62,.11) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}
#screen-map.active .daily-candy-compact .daily-track-copy {
  display:flex !important;
  align-items:baseline !important;
  gap:6px !important;
  min-width:0 !important;
}
#screen-map.active .daily-candy-compact .daily-track-copy strong { font-size:.57rem !important; }
#screen-map.active .daily-candy-compact .daily-track-copy small { font-size:.43rem !important; }
#screen-map.active .daily-candy-compact .daily-track-reward {
  max-width:108px !important;
  gap:4px !important;
}
#screen-map.active .daily-candy-compact .daily-track-reward img {
  width:20px !important;
  height:20px !important;
}
#screen-map.active .daily-candy-compact .daily-track-reward b {
  max-width:75px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  font-size:.47rem !important;
}
#screen-map.active .daily-candy-compact .daily-track-meter {
  grid-column:1/-1 !important;
  height:12px !important;
  border-radius:999px !important;
}
#screen-map.active .daily-candy-compact .daily-track-meter span { font-size:.44rem !important; }
/* Tiers still exist in the system; the map does not need eight extra dots. */
#screen-map.active .daily-candy-compact .daily-track-milestones { display:none !important; }

/* ---------- Difficulty is no longer player-facing ---------- */
#screen-map.active .map4311-difficulty-tag { display:none !important; }
#screen-game .game-difficulty-badge,
#level-start-modal #preview-difficulty { display:none !important; }

/* Profile is now the home of Player Level details. */
.profile-xp-summary {
  display:grid;
  gap:7px;
  margin:10px 0 4px;
  padding:10px 12px;
  border:1px solid #eadce7;
  border-radius:14px;
  background:linear-gradient(180deg,#fff,#faf3f8);
}
.profile-xp-summary > div:first-child {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.profile-xp-summary small {
  color:#9a718c;
  font-size:.52rem;
  font-weight:1000;
  letter-spacing:.06em;
}
.profile-xp-summary strong {
  color:#674260;
  font-size:.64rem;
}
.profile-xp-summary .account-xp-track {
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:#eadde6;
  box-shadow:inset 0 2px 4px rgba(77,44,69,.12);
}
.profile-xp-summary .account-xp-fill {
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#ffbc42,#f06aa9);
}

/* Leave the actual map as the star. */
#screen-map.active .map4208-world-banner { top:82px !important; }

@media(max-width:1100px){
  #screen-map.active { --map-tile:58px; --map-tile-radius:15px; }
  #screen-map.active .map-hud-left { min-width:300px !important; }
  #screen-map.active .daily-candy-track.daily-candy-compact { top:66px !important;width:276px !important; }
  #screen-map.active .map-square-button > small,
  #screen-map.active .map-square-stat > small,
  #screen-map.active .map-square-label { font-size:.42rem !important; }
}

@media(max-width:820px){
  #screen-map.active { --map-tile:52px; --map-tile-radius:14px; }
  #screen-map.active .map-hud-layer { padding:9px !important;gap:8px !important; }
  #screen-map.active .map-hud-left { min-width:252px !important; }
  #screen-map.active .map-square-row-right { max-width:300px !important;flex-wrap:wrap !important;gap:6px !important; }
  #screen-map.active .daily-candy-track.daily-candy-compact { top:60px !important;width:244px !important;padding:6px 8px !important; }
  #screen-map.active .daily-candy-compact .daily-track-copy small { display:none !important; }
  #screen-map.active .map-profile-avatar { width:29px !important;height:29px !important;min-width:29px !important;min-height:29px !important; }
  #screen-map.active .map-square-icon { font-size:1rem !important; }
  #screen-map.active .map4208-world-banner { top:116px !important; }
}

@media(max-width:620px){
  #screen-map.active { --map-tile:46px; --map-tile-radius:12px; }
  #screen-map.active .map-hud-left { min-width:210px !important; }
  #screen-map.active .map-square-row-right { max-width:210px !important; }
  #screen-map.active .daily-candy-track.daily-candy-compact { top:54px !important;width:206px !important; }
  #screen-map.active .daily-candy-compact .daily-track-reward b { display:none !important; }
  #screen-map.active .map-square-button > small,
  #screen-map.active .map-square-stat > small,
  #screen-map.active .map-square-label { display:none !important; }
  #screen-map.active .map-square-stat > strong { font-size:.57rem !important; }
}

@media(prefers-reduced-motion:reduce){
  #screen-map.active button.map-square-button { transition:none !important; }
}

#level-start-modal .preview-meta-bar.compact {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

/* v4.5.0.0 — World banner moved to the true bottom of the map */
#screen-map.active .map4208-world-banner {
  top:auto !important;
  bottom:max(10px, env(safe-area-inset-bottom)) !important;
}
#screen-map.active .map4208-episode-dots {
  bottom:104px !important;
}
@media(max-width:820px){
  #screen-map.active .map4208-world-banner {
    top:auto !important;
    bottom:max(8px, env(safe-area-inset-bottom)) !important;
  }
  #screen-map.active .map4208-episode-dots {
    bottom:96px !important;
  }
}
@media(max-width:620px){
  #screen-map.active .map4208-world-banner {
    top:auto !important;
    bottom:max(6px, env(safe-area-inset-bottom)) !important;
    min-width:min(310px,72vw) !important;
  }
  #screen-map.active .map4208-episode-dots {
    bottom:90px !important;
  }
}