/* Free palette layout, scoped to Jelly Colors. */
body[data-game="jelly_colors"] .scene-jelly_colors {
  height: auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; padding: 22px 20px 18px;
}
body[data-game="jelly_colors"] .collection-bar { margin: 0; }
.palette-pumps { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 10px; position: relative; z-index: 4; }
.paint-pump {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 0; min-height: 134px; border: 2px solid #fff9; border-radius: 22px;
  background: #fffaf0ed; box-shadow: 0 5px 0 #936b3733; padding: 8px 4px;
  color: #365c55; touch-action: manipulation; transition: background .16s, transform .16s;
}
.paint-pump:active:not(:disabled) { transform: translateY(3px); }
.paint-pump:focus-visible, .mix-dish:focus-visible { outline: 4px solid #3c8b76; outline-offset: 3px; }
.paint-pump strong { font-size: 15px; line-height: 1.2; }
.pump-state { font-size: 11px; color: #758176; line-height: 1.3; }
.pump-drawing { position: relative; width: 64px; height: 77px; display: block; }
.paint-cap { position: absolute; left: 3px; top: 0; width: 58px; height: 14px; border-radius: 9px; background: var(--paint); border: 2px solid #54604d33; box-shadow: inset 0 3px 0 #ffffff65; transition: transform .2s; }
.paint-neck { position: absolute; left: 27px; top: 12px; width: 10px; height: 14px; background: #c5bb9f; }
.paint-tank { position: absolute; top: 24px; left: 7px; width: 50px; height: 38px; overflow: hidden; background: #eee9dc; border: 2px solid #5f614433; border-radius: 12px; }
.paint-liquid { position: absolute; inset: 0; background: var(--paint); transform-origin: bottom; transition: transform .35s; }
.paint-tank:after { content: ''; position: absolute; width: 9px; height: 18px; border-radius: 8px; top: 5px; left: 7px; background: #ffffff59; }
.paint-nozzle { position: absolute; width: 11px; height: 19px; left: 26px; top: 55px; background: var(--paint); border: 1px solid #5f614433; border-radius: 0 0 7px 7px; }
.paint-pump.is-used { background: #f4f0e6e6; box-shadow: 0 2px 0 #936b3722; cursor: default; opacity: 1; }
.paint-pump.is-used .paint-cap { transform: translateY(7px); }
.paint-pump.is-used .paint-liquid { transform: scaleY(.12); }
.paint-pump.is-used .paint-nozzle { background: #bdbba9; }
.paint-pump.is-used .pump-state { color: #4f7c64; font-weight: 700; }
.paint-pump.is-pouring .paint-nozzle { background: var(--paint); }
.mix-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding-top: 27px; }
.mix-dish {
  position: relative; width: min(290px,70%); height: 195px; display: grid; place-items: center;
  border: 6px solid #fffdf4; border-radius: 50%; background: #fff8e9;
  box-shadow: 0 8px 0 #d3c39f, 0 15px 24px #785b3424; touch-action: manipulation; padding: 14px;
}
.mix-shape { display: block; height: 160px; width: 178px; max-width: 100%; }
.mix-shape .object-art { display: block; width: 100%; height: 100%; filter: drop-shadow(0 4px 0 #806b3e22); }
.mix-dish.is-empty .object-art { opacity: .65; }
.mix-shape.mixing { animation: paint-wobble .5s ease-out; }
.mix-dish.wiped { animation: paint-clean .4s ease-out; }
.mix-recipe { display: flex; justify-content: center; align-items: center; gap: 7px; flex-wrap: wrap; min-height: 30px; color: #615e4d; font-size: 13px; text-align: center; }
.ingredient { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #fff8; background: #fffaf2ed; border-radius: 99px; padding: 5px 9px; color: #435e56; font-size: 12px; }
.ingredient i { width: 15px; height: 15px; border-radius: 50%; background: var(--paint); border: 1px solid #435e5638; }
.mix-plus { font-weight: 700; color: #6c6754; }
.paint-stream { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; filter: drop-shadow(0 2px 1px #60482222); }
.paint-stream path { stroke-dasharray: 1; animation: paint-flow .6s ease-out forwards; }
body[data-game="jelly_colors"] .controls { min-height: 56px; }
.clear-palette { min-width: 175px; }
.clear-palette:disabled { opacity: .48; cursor: default; }
@keyframes paint-flow { 0% { stroke-dashoffset: 1; opacity: 1; } 45% { stroke-dashoffset: 0; opacity: 1; } 75% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes paint-wobble { 35% { transform: scale(1.09,.91) rotate(-3deg); } 70% { transform: scale(.97,1.03) rotate(2deg); } }
@keyframes paint-clean { 45% { transform: scale(.96); background: #fff; } }
@media (max-width: 800px) {
  body[data-game="jelly_colors"] .scene-jelly_colors { min-height: 0; padding: 14px 12px 16px; }
  .palette-pumps { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
  .paint-pump { min-height: 110px; border-radius: 18px; padding: 5px 2px; gap: 1px; }
  .pump-drawing { transform: scale(.82); transform-origin: top; height: 65px; }
  .paint-pump strong { font-size: 13px; }
  .pump-state { font-size: 10px; }
  .mix-area { padding-top: 23px; gap: 14px; }
  .mix-dish { width: 230px; max-width: 86%; height: 150px; }
  .mix-shape { width: 144px; height: 122px; }
}
@media (max-width: 380px) {
  body[data-game="jelly_colors"] .scene-jelly_colors { padding: 12px 8px 14px; }
  .palette-pumps { gap: 7px; }
  .paint-pump strong { font-size: 12px; }
  .ingredient { padding: 4px 7px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .paint-stream path, .mix-shape.mixing, .mix-dish.wiped { animation-duration: .01ms !important; }
  .paint-liquid, .paint-cap { transition: none; }
}

/* The pumps, mixture and wipe button stay on screen as the viewport changes. */
body[data-game="jelly_colors"] .scene { width: min(1100px, 100%); align-self: center; }
body[data-game="jelly_colors"] .collection-bar,
body[data-game="jelly_colors"] .controls { flex: none; }
body[data-game="jelly_colors"] .game-shell > .word-card { display: none; }
body[data-game="jelly_colors"] .controls { min-height: 44px; }
.clear-palette { min-height: 44px; padding: 8px 22px; }
.mix-area { min-height: 0; gap: 12px; padding-top: 18px; }
.mix-dish { flex: 0 1 195px; min-height: 70px; }
.mix-shape { max-height: 100%; }
.mix-dish .mix-shape { position: absolute; inset: 12% 18%; width: auto; height: auto; max-width: none; max-height: none; }
.palette-pumps { flex: none; }
.mix-recipe { flex: none; }
@media (max-height: 850px) and (max-width: 800px) {
  .paint-pump { min-height: 90px; }
  .pump-drawing { height: 46px; transform: scale(.62); }
  .palette-pumps { gap: 7px; }
  .mix-area { gap: 8px; padding-top: 14px; }
  .mix-dish { flex-basis: 140px; }
  .mix-recipe { gap: 4px; font-size: 12px; }
  .ingredient { font-size: 10px; padding: 3px 6px; gap: 3px; }
  .ingredient i { width: 10px; height: 10px; }
}
@media (max-height: 700px) {
  body[data-game="jelly_colors"] .game-shell > .hint { display: none; }
  body[data-game="jelly_colors"] .scene { padding: 6px 0; }
  .paint-pump { min-height: 76px; padding: 4px 2px; gap: 1px; }
  .pump-drawing { height: 38px; transform: scale(.52); transform-origin: top; }
  .paint-pump strong { font-size: 12px; }
  .pump-state { font-size: 10px; }
  .mix-area { gap: 6px; padding-top: 10px; }
  .mix-dish { flex-basis: 110px; width: 200px; padding: 8px; }
  .mix-shape { height: 100%; width: 120px; }
}
@media (max-height: 500px) and (min-width: 501px) {
  body[data-game="jelly_colors"] .game-shell > footer { position: absolute; bottom: max(6px, env(safe-area-inset-bottom)); right: max(14px, env(safe-area-inset-right)); }
  body[data-game="jelly_colors"] #parent-note { left: auto; right: 0; transform: none; }
  body[data-game="jelly_colors"] .controls { padding-inline-end: 140px; }
  body[data-game="jelly_colors"] .scene { flex-direction: row; gap: 20px; }
  .palette-pumps { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); width: 56%; gap: 6px; min-height: 0; }
  .paint-pump { min-height: 44px; padding: 2px; border-radius: 14px; overflow: hidden; }
  .pump-drawing { height: 36px; transform: scale(.48); }
  .pump-state { display: none; }
  .mix-area { width: 40%; padding-top: 0; gap: 6px; }
  .mix-dish { width: 180px; flex-basis: 110px; min-height: 50px; }
  .mix-recipe { max-height: 55px; overflow: auto; min-height: 18px; }
  .mix-plus { display: none; }
}