/* Sweet Shift Saga v4.2.2.0 — definitive Jelly-on-Belts rendering fix */

/* Normal Jelly stays above Belt machinery and below blockers/pieces. */
#board.saga-board .board-cell > .jelly-mark,
#board.saga-board .board-cell > .jelly-mark.layer2 {
  z-index: 5 !important;
}
#board.saga-board .board-cell > .belt-spot {
  z-index: 3 !important;
}

/* Belt tiles get a dedicated, high-contrast Jelly surface. The ordinary Jelly
   art remains in the DOM, but this overlay ensures the objective cannot blend
   into the dark-blue conveyor artwork. */
#board.saga-board .board-cell.has-jelly:has(> .belt-spot)::before {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  z-index: 6 !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  border-radius: calc(var(--tile) * .15) !important;
  border: 3px solid rgba(232,255,255,.98) !important;
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.94) 0 12%,transparent 25%),
    linear-gradient(135deg,rgba(126,244,255,.58),rgba(34,171,246,.46)) !important;
  box-shadow:
    inset 0 0 13px rgba(255,255,255,.72),
    inset 0 -6px 12px rgba(12,109,210,.22),
    0 0 0 2px rgba(105,225,255,.72),
    0 0 13px rgba(102,230,255,.72) !important;
}

/* Two-layer Jelly remains immediately distinguishable on a Belt. */
#board.saga-board .board-cell.has-jelly[data-jelly-layers="2"]:has(> .belt-spot)::before,
#board.saga-board .board-cell.has-jelly[data-jelly-layers="3"]:has(> .belt-spot)::before {
  border-color: rgba(255,255,255,1) !important;
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,1) 0 12%,transparent 25%),
    linear-gradient(135deg,rgba(194,119,255,.67),rgba(56,155,247,.56)) !important;
  box-shadow:
    inset 0 0 15px rgba(255,255,255,.78),
    inset 0 -7px 13px rgba(87,31,194,.25),
    0 0 0 2px rgba(184,126,255,.78),
    0 0 15px rgba(172,107,255,.72) !important;
}