/* Sweet Shift Saga v4.2.0.8 — Gameplay HUD refinement
   Compact candy-style Goals/Score on the LEFT and Moves/Boosters on the RIGHT.
   This file intentionally overrides the v4.2.0.5 first-pass HUD without changing gameplay systems. */

/* Desktop layout is explicit so legacy CSS cannot swap the two side columns. */
@media (min-width:1101px) {
  #screen-game.active .futuristic-game-layout.classic-candy-hud-layout {
    display:grid !important;
    grid-template-columns:204px minmax(0,auto) 126px !important;
    column-gap:14px !important;
    align-items:center !important;
    justify-content:center !important;
  }
  #screen-game.active .classic-goals-column {
    grid-column:1 !important;
    grid-row:1 !important;
    width:204px !important;
    min-width:204px !important;
    justify-self:end !important;
  }
  #screen-game.active .saga-board-wrap {
    grid-column:2 !important;
    grid-row:1 !important;
    --game-tile:min(calc((100vw - 386px) / 9),calc(((var(--ss-vh) * 100) - 165px) / 9),88px) !important;
  }
  #screen-game.active .classic-action-column {
    grid-column:3 !important;
    grid-row:1 !important;
    width:126px !important;
    min-width:126px !important;
    justify-self:start !important;
  }
}

#screen-game.active .classic-goals-column,
#screen-game.active .classic-action-column {
  align-content:center !important;
  gap:10px !important;
}

/* -------------------------- GOALS -------------------------- */
#screen-game.active .classic-goals-card {
  width:198px !important;
  padding-top:14px !important;
  justify-self:center !important;
}
#screen-game.active .future-goal-heading {
  width:132px !important;
  min-height:35px !important;
  margin:0 0 -16px !important;
  padding:6px 12px !important;
  border:3px solid #e2c9f2 !important;
  border-radius:17px !important;
  background:linear-gradient(180deg,#734cc4 0%,#58309f 100%) !important;
  box-shadow:0 4px 0 #422477,0 7px 12px rgba(59,32,102,.20),inset 0 2px 0 rgba(255,255,255,.28) !important;
}
#screen-game.active .future-goal-heading span {
  font-size:.84rem !important;
  letter-spacing:.055em !important;
}
#screen-game.active .future-goals {
  width:198px !important;
  min-height:132px !important;
  grid-template-columns:repeat(2,76px) !important;
  grid-auto-rows:86px !important;
  justify-content:center !important;
  align-content:center !important;
  gap:4px 12px !important;
  padding:28px 12px 13px !important;
  border:3px solid #9149aa !important;
  border-radius:23px !important;
  background:linear-gradient(180deg,#ffe9ca 0%,#ffd7aa 100%) !important;
  box-shadow:0 6px 0 #6d347c,0 11px 21px rgba(79,42,87,.18),inset 0 2px 0 rgba(255,255,255,.72) !important;
}
#screen-game.active .future-goals:has(.goal-row:nth-child(3)) {
  min-height:188px !important;
}
#screen-game.active .future-goals .goal-row,
#screen-game.active .future-goals .goal-row:only-child {
  width:76px !important;
  min-width:76px !important;
  min-height:86px !important;
  grid-template-rows:61px 25px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
#screen-game.active .future-goals .goal-row:nth-child(odd):last-child,
#screen-game.active .future-goals .goal-row:only-child {
  grid-column:1 / -1 !important;
  width:76px !important;
  justify-self:center !important;
}
#screen-game.active .future-goals .goal-icon,
#screen-game.active .future-goals .goal-row:only-child .goal-icon {
  position:relative !important;
  width:61px !important;
  height:61px !important;
  min-width:61px !important;
  border-radius:17px !important;
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.94),rgba(255,255,255,.55) 28%,rgba(255,255,255,.26) 70%) !important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.44),0 3px 5px rgba(90,51,54,.14) !important;
  filter:none !important;
}
#screen-game.active .future-goals .goal-icon .mini-blocker { width:55px !important;height:55px !important; }
#screen-game.active .future-goals .goal-icon .mini-candy { width:53px !important;height:53px !important; }
#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:53px !important;height:53px !important; }
#screen-game.active .future-goals .goal-copy {
  width:100% !important;
  height:25px !important;
  display:grid !important;
  place-items:center !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 {
  display:inline-grid !important;
  place-items:center !important;
  min-width:29px !important;
  height:25px !important;
  padding:0 6px !important;
  border-radius:999px !important;
  background:#fff8e9 !important;
  color:#56313f !important;
  font-size:1rem !important;
  font-weight:1000 !important;
  line-height:1 !important;
  box-shadow:0 2px 0 rgba(137,78,61,.22),inset 0 0 0 1px rgba(145,77,75,.10) !important;
  text-shadow:none !important;
}
#screen-game.active .future-goals .goal-row.close .goal-value { background:#fff0cc !important;color:#b15a22 !important; }
#screen-game.active .future-goals .goal-row.done .goal-value { background:#e9ffe9 !important;color:#238253 !important; }
#screen-game.active .future-goals .goal-row.done .goal-icon { opacity:.68 !important; }

/* -------------------------- SCORE -------------------------- */
#screen-game.active .classic-score-card {
  width:184px !important;
  margin-top:1px !important;
  padding-top:13px !important;
}
#screen-game.active .classic-score-heading {
  width:116px !important;
  min-height:31px !important;
  margin:0 0 -13px !important;
  padding:5px 10px !important;
  border-radius:16px !important;
  font-size:.78rem !important;
}
#screen-game.active .classic-score-card .future-score-stack {
  min-height:66px !important;
  padding:21px 9px 7px !important;
  border-radius:20px 20px 13px 13px !important;
}
#screen-game.active .classic-score-card #score-value {
  font-size:1.48rem !important;
}
#screen-game.active .classic-score-card .future-score-stack > div:nth-child(2) {
  margin-top:3px !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 {
  font-size:.49rem !important;
}
#screen-game.active .classic-score-card .future-star-meter {
  width:94% !important;
  height:32px !important;
  min-height:32px !important;
  margin:-2px 0 0 !important;
  padding:2px 8px 3px !important;
}
#screen-game.active .classic-score-card .future-star-meter span[data-star] { font-size:1.36rem !important; }
#screen-game.active .classic-score-card .future-star-meter .star-meter { height:5px !important;bottom:4px !important; }

/* ---------------------- MOVES TOWER ------------------------ */
#screen-game.active .classic-action-column .future-moves-panel {
  width:104px !important;
  min-height:146px !important;
  grid-template-rows:36px 76px 38px !important;
  margin:0 auto !important;
  border-radius:21px !important;
  background:linear-gradient(180deg,#ef60ba 0%,#cc3a9f 76%,transparent 76%) !important;
}
#screen-game.active .classic-action-column .future-moves-panel > small {
  width:108% !important;
  min-height:35px !important;
  margin-top:-5px !important;
  border-radius:17px !important;
  font-size:.75rem !important;
}
#screen-game.active .classic-action-column #moves-left {
  min-height:76px !important;
  padding:4px 4px 7px !important;
  border-radius:0 0 20px 20px !important;
  font-size:3.35rem !important;
}
#screen-game.active .classic-action-column .moves-star-shelf {
  width:114% !important;
  height:39px !important;
  margin-top:-3px !important;
  padding:1px 8px 4px !important;
  border-radius:17px !important;
}
#screen-game.active .classic-action-column .moves-star-shelf span { font-size:1.36rem !important; }

/* ---------------------- BOOSTER RAIL ----------------------- */
#screen-game.active .classic-action-column .future-booster-tray.booster-rail {
  width:88px !important;
  min-height:216px !important;
  grid-auto-rows:66px !important;
  gap:3px !important;
  margin:-7px auto 0 !important;
  padding:12px 8px 10px !important;
  border:3px solid #bd795d !important;
  border-top-width:2px !important;
  border-radius:0 0 22px 22px !important;
  background:linear-gradient(180deg,#ffe8c8 0%,#f8c98f 100%) !important;
  box-shadow:0 6px 0 #925c49,0 10px 18px rgba(79,47,48,.15),inset 0 2px 0 rgba(255,255,255,.56) !important;
}
#screen-game.active .classic-action-column .future-booster-tray.booster-rail::before {
  content:"" !important;
  position:absolute !important;
  top:-8px !important;
  left:14px !important;
  right:14px !important;
  height:13px !important;
  border-left:3px solid #bd795d !important;
  border-right:3px solid #bd795d !important;
  background:#ffe5bf !important;
  z-index:-1 !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control {
  width:60px !important;
  height:60px !important;
  min-width:60px !important;
  min-height:60px !important;
  border-width:3px !important;
  background:radial-gradient(circle at 35% 28%,#a7f8ff 0 9%,#45c9ed 37%,#238ec9 100%) !important;
  box-shadow:0 4px 0 #176997,0 6px 9px rgba(27,96,130,.18),inset 0 2px 0 rgba(255,255,255,.5) !important;
}
#screen-game.active .future-booster-tray.booster-rail .booster-art,
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control > span {
  width:50px !important;
  height:50px !important;
  font-size:1.85rem !important;
}
#screen-game.active .future-booster-tray.booster-rail .booster-count {
  right:-10px !important;
  bottom:-2px !important;
  min-width:28px !important;
  height:28px !important;
  padding:0 4px !important;
  border-width:3px !important;
  font-size:.64rem !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control:disabled {
  opacity:.64 !important;
  filter:saturate(.72) !important;
}

/* Compact round utility controls, visually separated from the booster rail. */
#screen-game.active .classic-action-column .future-action-stack {
  width:102px !important;
  grid-template-columns:repeat(3,32px) !important;
  gap:3px !important;
  justify-content:center !important;
  margin-top:1px !important;
}
#screen-game.active .classic-action-column .ss-game-control {
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  min-height:32px !important;
  border-width:2px !important;
  box-shadow:0 3px 0 #1b5d8c,0 5px 8px rgba(30,78,115,.14) !important;
}

/* Optional mission should not overpower the core HUD. */
#screen-game.active .classic-goals-column .future-mission-card {
  width:184px !important;
  margin-top:1px !important;
  border-radius:14px !important;
  box-shadow:0 3px 0 rgba(91,48,102,.09) !important;
}

/* Tablet/mobile: put Moves above the board and Goals below, but keep panels compact. */
@media (max-width:1100px) {
  #screen-game.active .classic-action-column {
    width:min(560px,96vw) !important;
    grid-template-columns:106px minmax(0,1fr) !important;
    gap:8px !important;
  }
  #screen-game.active .classic-action-column .future-moves-panel {
    width:100px !important;
    min-height:138px !important;
    grid-template-rows:34px 70px 36px !important;
  }
  #screen-game.active .classic-action-column #moves-left { min-height:70px !important;font-size:3rem !important; }
  #screen-game.active .classic-action-column .future-booster-tray.booster-rail {
    width:100% !important;
    min-height:78px !important;
    grid-template-columns:repeat(3,60px) !important;
    grid-auto-rows:60px !important;
    gap:11px !important;
    border-radius:20px !important;
    margin:0 !important;
    padding:8px 15px !important;
  }
  #screen-game.active .classic-action-column .future-booster-tray.booster-rail::before { display:none !important; }
  #screen-game.active .classic-action-column .future-action-stack { width:auto !important; }
  #screen-game.active .classic-goals-column {
    width:min(440px,96vw) !important;
    grid-template-columns:198px 184px !important;
    justify-content:center !important;
    gap:10px !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;justify-self:center !important; }
}
@media (max-width:500px) {
  #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; }
}