/* Sweet Shift Saga — Proprietary Source Code
 * Copyright © 2026 Alex Brow / Mob Productions. All rights reserved.
 * Property of Alex Brow / Mob Productions.
 * Developed using the SOI Engine.
 * Unauthorized copying, redistribution, or commercial use of this source code is prohibited without permission.
 */

/* =====================================================================
   v4.1.0.8 — GOALS READABILITY REBUILD
   The goal card is now a strict two-column grid: icon + copy. The label and
   current/target value live on separate lines, so they cannot overlap.
   ===================================================================== */

#screen-game.active .saga-objective-hud {
  width:244px !important;
  min-width:244px !important;
  gap:9px !important;
}

#screen-game.active .future-goals {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:8px !important;
  padding:9px !important;
  overflow:visible !important;
}

#screen-game.active .future-goals .goal-row {
  --goal-progress:0%;
  position:relative !important;
  min-height:76px !important;
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) !important;
  grid-template-rows:1fr !important;
  align-items:center !important;
  justify-content:stretch !important;
  column-gap:10px !important;
  padding:10px 11px 13px !important;
  overflow:hidden !important;
  border:2px solid #dce7ef !important;
  border-radius:15px !important;
  background:#fff !important;
  box-shadow:0 3px 8px rgba(60,49,78,.06) !important;
}

#screen-game.active .future-goals .goal-row::before {
  content:"" !important;
  position:absolute !important;
  left:10px !important;
  right:10px !important;
  bottom:6px !important;
  width:auto !important;
  height:4px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#d95fa8 0 var(--goal-progress),#e7dce9 var(--goal-progress) 100%) !important;
  box-shadow:none !important;
}

#screen-game.active .future-goals .goal-icon {
  grid-column:1 !important;
  grid-row:1 !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  flex:none !important;
  display:grid !important;
  place-items:center !important;
  align-self:center !important;
  border:0 !important;
  border-radius:13px !important;
  background:#f2eaf5 !important;
  color:#65406d !important;
  box-shadow:none !important;
  font-size:1.08rem !important;
  line-height:1 !important;
}

#screen-game.active .future-goals .goal-copy {
  grid-column:2 !important;
  grid-row:1 !important;
  min-width:0 !important;
  width:100% !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  align-content:center !important;
  justify-items:start !important;
  gap:5px !important;
  overflow:hidden !important;
}

#screen-game.active .future-goals .goal-label {
  position:static !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  color:#806585 !important;
  font-size:.58rem !important;
  font-weight:900 !important;
  line-height:1.15 !important;
  letter-spacing:.035em !important;
  white-space:normal !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-align:left !important;
}

#screen-game.active .future-goals .goal-value,
#screen-game.active .future-goals .goal-row strong.goal-value {
  position:static !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:#4e3158 !important;
  font-size:.86rem !important;
  font-weight:1000 !important;
  line-height:1.05 !important;
  text-align:left !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  font-variant-numeric:tabular-nums !important;
}

#screen-game.active .future-goals .goal-row.close {
  border-color:#e9c068 !important;
  background:#fff9eb !important;
}
#screen-game.active .future-goals .goal-row.done {
  border-color:#90d0ad !important;
  background:#eef9f2 !important;
}
#screen-game.active .future-goals .goal-row.done::before {
  background:linear-gradient(90deg,#64bd88 0 var(--goal-progress),#dceadf var(--goal-progress) 100%) !important;
}

/* The mission is secondary, but it must still be readable. */
#screen-game.active .future-mission-card {
  min-height:72px !important;
  margin-top:0 !important;
  padding:9px 10px !important;
  opacity:1 !important;
  overflow:hidden !important;
}
#screen-game.active .future-mission-card header {
  min-width:0 !important;
  gap:7px !important;
}
#screen-game.active .future-mission-card header strong {
  font-size:.56rem !important;
  line-height:1.15 !important;
  white-space:normal !important;
}
#screen-game.active .future-mission-card header small {
  font-size:.39rem !important;
  line-height:1.1 !important;
}
#screen-game.active .future-mission-card .sweet-mission-meter {
  height:5px !important;
  margin-top:7px !important;
}

@media (max-width:1100px) {
  #screen-game.active .saga-objective-hud {
    width:min(244px,31vw) !important;
    min-width:190px !important;
  }
  #screen-game.active .future-goals .goal-row {
    grid-template-columns:38px minmax(0,1fr) !important;
    min-height:68px !important;
    padding:8px 9px 12px !important;
    column-gap:8px !important;
  }
  #screen-game.active .future-goals .goal-icon {
    width:38px !important;height:38px !important;min-width:38px !important;
  }
  #screen-game.active .future-goals .goal-value,
  #screen-game.active .future-goals .goal-row strong.goal-value {
    font-size:.72rem !important;
  }
}