/* v4.2.1.8 — Jelly/Belt fix retained + in-level booster HUD redesign */

/* Jelly must remain visible when a cell also has a belt. */
.saga-board .board-cell > .jelly-mark,
.saga-board .board-cell > .jelly-mark.layer2 {
  z-index: 4 !important;
}
.saga-board .board-cell > .belt-spot {
  z-index: 3 !important;
}

/* Clean booster rail: circular candy slots with counts underneath. */
#screen-game.active .classic-action-column .future-booster-tray.booster-rail {
  width: 94px !important;
  min-height: 252px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: min-content !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 10px 7px 12px !important;
  border: 3px solid #bf795f !important;
  border-radius: 18px 18px 24px 24px !important;
  background: linear-gradient(180deg,#ffe5bf 0%,#f7c98f 100%) !important;
  box-shadow: 0 5px 0 #925c49,0 9px 16px rgba(79,47,48,.15),inset 0 2px 0 rgba(255,255,255,.56) !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control {
  position: relative !important;
  width: 72px !important;
  min-width: 72px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 0 2px !important;
  display: grid !important;
  grid-template-rows: 54px 22px !important;
  justify-items: center !important;
  align-items: start !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control:hover:not(:disabled) {
  transform: translateY(-2px) !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control:active:not(:disabled) {
  transform: translateY(1px) !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control.active {
  outline: none !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control:disabled {
  opacity: .54 !important;
  filter: grayscale(.22) !important;
}
#screen-game.active .future-booster-tray.booster-rail .booster-art {
  position: relative !important;
  width: 56px !important;
  height: 56px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  border: 3px solid #3a9dc9 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 28%,#b5fbff 0 10%,#63d7ef 38%,#228fca 100%) !important;
  box-shadow: 0 4px 0 #166b9f,0 7px 10px rgba(26,97,131,.18),inset 0 2px 0 rgba(255,255,255,.58) !important;
  filter: none !important;
}
#screen-game.active .future-booster-tray.booster-rail .booster-art::after {
  content: "" !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 0 rgba(255,228,88,0) !important;
  transition: box-shadow .16s ease !important;
  pointer-events: none !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control.active .booster-art::after {
  box-shadow: 0 0 0 4px rgba(255,227,79,.96), 0 0 18px rgba(255,225,89,.42) !important;
}
#screen-game.active .future-booster-tray.booster-rail .booster-art img {
  display: block !important;
  width: 46px !important;
  height: 46px !important;
  object-fit: contain !important;
  pointer-events: none !important;
  filter: drop-shadow(0 2px 2px rgba(87,39,94,.16)) !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control small {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
#screen-game.active .future-booster-tray.booster-rail .booster-count {
  position: static !important;
  min-width: 30px !important;
  height: 20px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 8px !important;
  margin: 0 !important;
  border: 2px solid #efffff !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg,#82e748,#3cb227) !important;
  color: #fff !important;
  font-size: .76rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 1px rgba(25,92,18,.36) !important;
  box-shadow: 0 3px 0 #2e7d1f,0 4px 6px rgba(41,96,31,.18) !important;
  z-index: auto !important;
}
@media (max-width: 1100px) {
  #screen-game.active .classic-action-column .future-booster-tray.booster-rail {
    width: 90px !important;
    min-height: 240px !important;
    gap: 7px !important;
  }
  #screen-game.active .future-booster-tray.booster-rail .ss-booster-control {
    width: 68px !important;
    grid-template-rows: 52px 20px !important;
  }
  #screen-game.active .future-booster-tray.booster-rail .booster-art {
    width: 54px !important;
    height: 54px !important;
  }
  #screen-game.active .future-booster-tray.booster-rail .booster-art img {
    width: 44px !important;
    height: 44px !important;
  }
}


/* v4.3.0.3 — Booster HUD visual polish */
#screen-game.active .classic-action-column .future-booster-tray.booster-rail {
  width: 98px !important;
  min-height: 272px !important;
  padding: 12px 7px 14px !important;
  gap: 10px !important;
  border: 4px solid #c37c5f !important;
  border-radius: 20px 20px 26px 26px !important;
  background: linear-gradient(180deg,#ffe7c9 0%,#f9d39a 100%) !important;
  box-shadow: 0 5px 0 #9d6851,0 11px 18px rgba(85,51,49,.14),inset 0 2px 0 rgba(255,255,255,.58) !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control {
  width: 76px !important;
  grid-template-rows: 60px 22px !important;
  gap: 6px !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control.active {
  transform: translateY(-2px) !important;
}
#screen-game.active .future-booster-tray.booster-rail .booster-art {
  width: 60px !important;
  height: 60px !important;
  border: 3px solid #3b9eca !important;
  background: radial-gradient(circle at 35% 25%, #f8ffff 0 24%, #91ecff 42%, #2fa2d8 100%) !important;
  box-shadow: 0 4px 0 #1f6f9d,0 8px 12px rgba(19,87,124,.18), inset 0 3px 0 rgba(255,255,255,.76) !important;
  isolation: isolate !important;
}
#screen-game.active .future-booster-tray.booster-rail .booster-art::before {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.72), rgba(255,255,255,.16) 44%, rgba(255,255,255,0) 68%) !important;
  z-index: 0 !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control .booster-art img {
  position: relative !important;
  z-index: 1 !important;
  width: 50px !important;
  height: 50px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 3px rgba(80,29,92,.15)) !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control[data-booster="hand"] .booster-art img {
  width: 48px !important;
  height: 48px !important;
}
#screen-game.active .future-booster-tray.booster-rail .booster-count {
  min-width: 34px !important;
  height: 21px !important;
  padding: 0 8px !important;
  border: 2px solid #effff2 !important;
  background: linear-gradient(180deg,#8ff05b,#35b629) !important;
  box-shadow: 0 3px 0 #2e851f,0 5px 8px rgba(47,119,34,.18) !important;
  font-size: .8rem !important;
  letter-spacing: .01em !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control:disabled {
  opacity: .62 !important;
  filter: grayscale(.12) saturate(.86) !important;
}
#screen-game.active .future-booster-tray.booster-rail .ss-booster-control:disabled .booster-art {
  box-shadow: 0 4px 0 #4c84a2,0 7px 10px rgba(19,87,124,.12), inset 0 3px 0 rgba(255,255,255,.55) !important;
}