/* Sweet Shift Saga v4.4.0.0 — authoritative gameplay HUD refinement.
   One final layer intentionally replaces the accumulated legacy HUD overrides. */

/* ---------- TOP LEVEL HEADER ---------- */
#screen-game.active .game-mobile-header {
  min-height: 54px !important;
  padding: calc(5px + var(--ss-safe-top)) 12px 4px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#screen-game.active .game-mobile-header > div:nth-child(2) {
  min-height: 42px !important;
  min-width: min(430px, 52vw) !important;
  padding: 5px 16px 6px !important;
  border: 2px solid rgba(255,255,255,.78) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg,#67439a 0%,#4d2d78 100%) !important;
  box-shadow: 0 4px 0 rgba(60,31,91,.35),0 8px 16px rgba(54,31,79,.14),inset 0 1px 0 rgba(255,255,255,.24) !important;
}
#screen-game.active .game-mobile-header small {
  color: #e7d8f3 !important;
  font-size: .58rem !important;
  letter-spacing: .06em !important;
}
#screen-game.active .game-mobile-header strong {
  color: #fff !important;
  font-size: clamp(.9rem,1.35vw,1.08rem) !important;
  line-height: 1.05 !important;
}
#screen-game.active .game-header-meta { margin-top: 2px !important; }
#screen-game.active .game-header-meta > span { color:#e6d7ef !important;font-size:.55rem !important; }
#screen-game.active .game-difficulty-badge {
  min-height: 17px !important;
  padding: 1px 7px !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: .44rem !important;
  box-shadow: none !important;
}
#screen-game.active .ss-game-back-control {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border: 2px solid rgba(255,255,255,.82) !important;
  background: linear-gradient(180deg,#6b47a0,#4b2c76) !important;
  box-shadow: 0 4px 0 #3e245f,0 7px 12px rgba(59,34,82,.15) !important;
}
#screen-game.active .account-mini {
  padding: 6px 10px !important;
  border: 2px solid rgba(255,255,255,.8) !important;
  background: rgba(255,245,252,.94) !important;
  color: #684672 !important;
  box-shadow: 0 4px 10px rgba(76,43,83,.12) !important;
}
#screen-game.active .account-mini strong { color:#b53e86 !important; }

/* ---------- DESKTOP LAYOUT ---------- */
@media (min-width:1101px) {
  #screen-game.active .futuristic-game-layout.classic-candy-hud-layout {
    display: grid !important;
    grid-template-columns: 194px minmax(0,auto) 116px !important;
    column-gap: 16px !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 5px !important;
  }
  #screen-game.active .classic-goals-column {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 194px !important;
    min-width: 194px !important;
    justify-self: end !important;
  }
  #screen-game.active .saga-board-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
    --game-tile:min(calc((100vw - 372px) / 9),calc(((var(--ss-vh) * 100) - 142px) / 9),88px) !important;
  }
  #screen-game.active .classic-action-column {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 116px !important;
    min-width: 116px !important;
    justify-self: start !important;
  }
}

/* Side HUD containers should disappear visually: the cards themselves are the HUD. */
#screen-game.active .classic-goals-column,
#screen-game.active .classic-action-column {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#screen-game.active .classic-goals-column { display:grid !important;gap:9px !important;align-content:center !important; }
#screen-game.active .classic-action-column { display:grid !important;gap:10px !important;align-content:center !important;justify-items:center !important; }

/* ---------- GOALS ---------- */
#screen-game.active .classic-goals-card {
  position: relative !important;
  width: 188px !important;
  padding: 10px 10px 12px !important;
  box-sizing: border-box !important;
  border: 3px solid #8e56a8 !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg,#fff0d7 0%,#ffddb4 100%) !important;
  box-shadow: 0 5px 0 #6d3f83,0 10px 18px rgba(74,44,82,.14),inset 0 2px 0 rgba(255,255,255,.72) !important;
}
#screen-game.active .classic-goals-card .future-goal-heading {
  position: static !important;
  left: auto !important;
  transform: none !important;
  width: 104px !important;
  min-width: 104px !important;
  min-height: 30px !important;
  margin: -24px auto 7px !important;
  padding: 5px 10px !important;
  border: 2px solid #e9d8f4 !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg,#774fb4,#5a3590) !important;
  box-shadow: 0 3px 0 #45256d,0 5px 9px rgba(60,31,92,.18),inset 0 1px 0 rgba(255,255,255,.25) !important;
}
#screen-game.active .classic-goals-card .future-goal-heading > span {
  color:#fff !important;
  font-size:.7rem !important;
  letter-spacing:.08em !important;
  line-height:1 !important;
}
#screen-game.active .classic-goals-card .future-goals {
  width: 100% !important;
  min-height: 0 !important;
  padding: 2px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  grid-template-columns: repeat(2,72px) !important;
  grid-auto-rows: 78px !important;
  gap: 5px 8px !important;
}
#screen-game.active .classic-goals-card .future-goals:has(.goal-row:nth-child(3)) { min-height: 160px !important; }
#screen-game.active .future-goals .goal-row,
#screen-game.active .future-goals .goal-row:only-child {
  width: 72px !important;
  min-width: 72px !important;
  min-height: 78px !important;
  grid-template-rows: 56px 22px !important;
}
#screen-game.active .future-goals .goal-icon,
#screen-game.active .future-goals .goal-row:only-child .goal-icon {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 17px !important;
  background: radial-gradient(circle at 32% 24%,#fff 0 16%,#fff7ee 48%,#f3c99d 100%) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.6),0 3px 5px rgba(93,54,46,.13) !important;
}
#screen-game.active .future-goals .goal-icon .mini-blocker { width:50px !important;height:50px !important; }
#screen-game.active .future-goals .goal-icon .mini-candy,
#screen-game.active .future-goals .goal-icon .hud-goal-jelly,
#screen-game.active .future-goals .goal-icon .hud-goal-jam,
#screen-game.active .future-goals .goal-icon .hud-goal-light,
#screen-game.active .future-goals .goal-icon .hud-goal-ingredient,
#screen-game.active .future-goals .goal-icon .hud-goal-special { width:49px !important;height:49px !important; }
#screen-game.active .future-goals .goal-copy { height:22px !important; }
#screen-game.active .future-goals .goal-value,
#screen-game.active .future-goals .goal-row strong.goal-value,
#screen-game.active .future-goals .goal-row:only-child .goal-value {
  min-width: 30px !important;
  height: 22px !important;
  padding: 0 7px !important;
  border: 2px solid rgba(255,255,255,.76) !important;
  background: linear-gradient(180deg,#fffdf6,#f7e6cf) !important;
  color:#5d3846 !important;
  font-size:.84rem !important;
  box-shadow: 0 2px 0 rgba(135,82,62,.20) !important;
}

/* ---------- SCORE ---------- */
#screen-game.active .classic-score-card {
  width: 176px !important;
  margin: 0 auto !important;
  padding: 9px 9px 8px !important;
  border: 3px solid #8e56a8 !important;
  border-radius: 21px !important;
  background: linear-gradient(180deg,#fff0d7,#ffddb4) !important;
  box-shadow: 0 4px 0 #6d3f83,0 8px 14px rgba(74,44,82,.12),inset 0 2px 0 rgba(255,255,255,.68) !important;
}
#screen-game.active .classic-score-heading {
  width: auto !important;
  min-height: 0 !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color:#704781 !important;
  font-size:.58rem !important;
  letter-spacing:.09em !important;
}
#screen-game.active .classic-score-card .future-score-stack {
  min-height: 0 !important;
  padding: 2px 5px 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#screen-game.active .classic-score-card #score-value {
  color:#5a365f !important;
  font-size:1.45rem !important;
  text-shadow:none !important;
}
#screen-game.active .classic-score-card .future-score-stack > div:nth-child(2) {
  display:flex !important;
  justify-content:center !important;
  gap:4px !important;
  margin-top:1px !important;
}
#screen-game.active .classic-score-card .future-score-stack > div:nth-child(2) span,
#screen-game.active .classic-score-card .future-score-stack > div:nth-child(2) strong {
  color:#8c6b74 !important;
  font-size:.47rem !important;
}
#screen-game.active .classic-score-card .future-star-meter {
  width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 1px 7px 3px !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.42) !important;
  box-shadow: inset 0 1px 3px rgba(113,76,74,.10) !important;
}
#screen-game.active .classic-score-card .future-star-meter span[data-star] { font-size:1.22rem !important; }

/* ---------- SWEET MISSION ---------- */
#screen-game.active .classic-goals-column .future-mission-card {
  width: 176px !important;
  margin: 0 auto !important;
  padding: 8px !important;
  border: 2px solid rgba(126,80,145,.40) !important;
  border-radius: 16px !important;
  background: rgba(255,250,243,.94) !important;
  box-shadow: 0 4px 9px rgba(72,43,78,.09) !important;
}

/* ---------- MOVES ---------- */
#screen-game.active .classic-action-column .future-moves-panel {
  position: relative !important;
  width: 104px !important;
  min-height: 104px !important;
  height: 104px !important;
  display: grid !important;
  grid-template-rows: 30px 1fr !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 3px solid #fff !important;
  border-radius: 27px !important;
  background: linear-gradient(180deg,#ec5cb6 0%,#cb3297 100%) !important;
  box-shadow: 0 5px 0 #8e256f,0 10px 17px rgba(91,29,82,.17),inset 0 2px 0 rgba(255,255,255,.28) !important;
}
#screen-game.active .classic-action-column .future-moves-panel::before,
#screen-game.active .classic-action-column .future-moves-panel::after,
#screen-game.active .classic-action-column .future-moves-panel > i,
#screen-game.active .classic-action-column .moves-star-shelf { display:none !important; }
#screen-game.active .classic-action-column .future-moves-panel > small {
  position: static !important;
  width: 100% !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 7px 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(118,24,92,.18) !important;
  color:#fff !important;
  font-size:.62rem !important;
  letter-spacing:.1em !important;
  text-shadow:0 1px 1px rgba(99,24,80,.25) !important;
}
#screen-game.active .classic-action-column #moves-left {
  min-height: 0 !important;
  height: auto !important;
  padding: 2px 0 8px !important;
  display:grid !important;
  place-items:center !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#fff !important;
  font-size:3.45rem !important;
  line-height:.95 !important;
  text-shadow:0 3px 0 rgba(122,27,91,.35) !important;
}
#screen-game.active .future-moves-panel.low { background:linear-gradient(180deg,#f18a49,#dd542c) !important; }
#screen-game.active .future-moves-panel.critical { background:linear-gradient(180deg,#ef5b69,#bd263c) !important; }

/* ---------- BOOSTERS: three detached candy buttons ---------- */
#screen-game.active .classic-action-column .future-booster-tray.booster-rail {
  position: relative !important;
  width: 92px !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: 72px !important;
  justify-items: center !important;
  gap: 8px !important;
  margin: 5px auto 0 !important;
  padding: 15px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#screen-game.active .classic-action-column .future-booster-tray.booster-rail::before {
  content: "BOOSTERS" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(86,57,95,.72) !important;
  font-size: .48rem !important;
  font-weight: 1000 !important;
  letter-spacing: .08em !important;
  text-align: center !important;
  z-index: 1 !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control {
  position: relative !important;
  width: 70px !important;
  min-width: 70px !important;
  height: 70px !important;
  min-height: 70px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#screen-game.active .future-booster-tray.booster-rail .booster-art {
  position: relative !important;
  width: 62px !important;
  height: 62px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 33% 25%,#eaffff 0 12%,#8ce8fb 42%,#2e9fd4 100%) !important;
  box-shadow: 0 4px 0 #22739d,0 8px 12px rgba(24,94,129,.18),inset 0 2px 0 rgba(255,255,255,.62) !important;
  transition: transform .14s ease,box-shadow .14s ease !important;
}
#screen-game.active .future-booster-tray.booster-rail .booster-art::before { display:none !important; }
#screen-game.active .future-booster-tray.booster-rail .booster-art::after {
  content:"" !important;
  position:absolute !important;
  inset:-5px !important;
  border-radius:50% !important;
  box-shadow:none !important;
  pointer-events:none !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control:hover:not(:disabled) .booster-art {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 5px 0 #22739d,0 10px 14px rgba(24,94,129,.20),inset 0 2px 0 rgba(255,255,255,.68) !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control.active .booster-art::after {
  box-shadow: 0 0 0 4px #ffd94e,0 0 16px rgba(255,211,65,.48) !important;
}
#screen-game.active .future-booster-tray.booster-rail .booster-art img,
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control[data-booster="hand"] .booster-art img {
  position: relative !important;
  z-index: 1 !important;
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 2px rgba(72,36,86,.13)) !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control small {
  position:absolute !important;
  width:1px !important;height:1px !important;
  overflow:hidden !important;clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
}
#screen-game.active .future-booster-tray.booster-rail .booster-count {
  position: absolute !important;
  right: -2px !important;
  bottom: -1px !important;
  z-index: 4 !important;
  min-width: 27px !important;
  height: 25px !important;
  padding: 0 6px !important;
  display: grid !important;
  place-items: center !important;
  border: 3px solid #fff !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg,#7fe45b,#32aa29) !important;
  color:#fff !important;
  font-size:.68rem !important;
  font-weight:1000 !important;
  line-height:1 !important;
  text-shadow:0 1px 1px rgba(38,91,28,.35) !important;
  box-shadow:0 3px 0 #287f21,0 5px 8px rgba(36,99,27,.17) !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control:disabled {
  opacity:.58 !important;
  filter:grayscale(.14) saturate(.82) !important;
}

/* ---------- UTILITY CONTROLS ---------- */
#screen-game.active .classic-action-column .future-action-stack {
  width: 110px !important;
  display:grid !important;
  grid-template-columns:repeat(3,34px) !important;
  gap:4px !important;
  justify-content:center !important;
  margin:2px auto 0 !important;
}
#screen-game.active .classic-action-column .ss-game-control {
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border:2px solid #fff !important;
  border-radius:50% !important;
  background:linear-gradient(180deg,#56bde8,#238cc7) !important;
  color:#fff !important;
  box-shadow:0 3px 0 #176796,0 6px 9px rgba(25,91,126,.15) !important;
}
#screen-game.active .classic-action-column .ss-game-control::before {
  margin:0 !important;
  color:#fff !important;
  font-size:.9rem !important;
  text-shadow:0 1px 1px rgba(26,83,119,.28) !important;
}
#screen-game.active .classic-action-column .ss-game-control span {
  position:absolute !important;
  width:1px !important;height:1px !important;
  overflow:hidden !important;clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
}
#screen-game.active .classic-action-column .ss-game-control:hover {
  transform:translateY(-1px) !important;
  background:linear-gradient(180deg,#6fcaf0,#2e9ed9) !important;
}

/* ---------- TABLET / MOBILE ---------- */
@media (max-width:1100px) {
  #screen-game.active .classic-action-column {
    width:min(560px,96vw) !important;
    grid-template-columns:104px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    gap:8px 12px !important;
    align-items:center !important;
  }
  #screen-game.active .classic-action-column .future-moves-panel {
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    width:98px !important;
    height:98px !important;
    min-height:98px !important;
  }
  #screen-game.active .classic-action-column #moves-left { font-size:3.1rem !important; }
  #screen-game.active .classic-action-column .future-booster-tray.booster-rail {
    grid-column:2 !important;
    grid-row:1 !important;
    width:auto !important;
    display:grid !important;
    grid-template-columns:repeat(3,68px) !important;
    grid-auto-rows:68px !important;
    gap:8px !important;
    padding:14px 4px 0 !important;
    margin:0 !important;
    justify-content:start !important;
  }
  #screen-game.active .classic-action-column .future-action-stack {
    grid-column:2 !important;
    grid-row:2 !important;
    justify-self:start !important;
    margin:0 0 0 3px !important;
  }
  #screen-game.active .classic-goals-column {
    width:min(410px,96vw) !important;
    grid-template-columns:188px 176px !important;
    justify-content:center !important;
    gap:9px !important;
  }
  #screen-game.active .classic-goals-card { grid-column:1 !important; }
  #screen-game.active .classic-score-card { grid-column:2 !important; }
  #screen-game.active .classic-goals-column .future-mission-card { grid-column:1 / -1 !important; }
}
@media (max-width:560px) {
  #screen-game.active .game-mobile-header > div:nth-child(2) { min-width:0 !important; }
  #screen-game.active .account-mini { display:none !important; }
  #screen-game.active .classic-goals-column { grid-template-columns:1fr !important; }
  #screen-game.active .classic-goals-card,
  #screen-game.active .classic-score-card,
  #screen-game.active .classic-goals-column .future-mission-card { grid-column:1 !important;justify-self:center !important; }
  #screen-game.active .classic-action-column { width:min(360px,96vw) !important; }
  #screen-game.active .classic-action-column .future-booster-tray.booster-rail { grid-template-columns:repeat(3,62px) !important;gap:5px !important; }
  #screen-game.active .future-booster-tray.booster-rail .ss-booster-control { width:64px !important;height:64px !important;min-width:64px !important;min-height:64px !important; }
  #screen-game.active .future-booster-tray.booster-rail .booster-art { width:57px !important;height:57px !important; }
  #screen-game.active .future-booster-tray.booster-rail .booster-art img,
  #screen-game.active .future-booster-tray.booster-rail .ss-booster-control[data-booster="hand"] .booster-art img { width:49px !important;height:49px !important; }
}