/* Water Sort — game-specific */
.diff-seg { display:flex; gap:8px; }
.diff-seg button { flex:1; }
body.playful { touch-action:none; }

.board-wrap { flex:1; display:flex; align-items:center; justify-content:center; }
.ws-board { display:flex; flex-wrap:wrap; gap:18px; justify-content:center; align-items:flex-end; width:100%; }

.tube {
  width:56px; height:208px; position:relative; cursor:pointer;
  border:5px solid var(--stroke); border-top:none;
  border-radius:8px 8px 28px 28px;
  background:rgba(255,255,255,0.35);
  display:flex; flex-direction:column-reverse; overflow:hidden;
  box-shadow:inset 6px 0 8px rgba(255,255,255,0.4), inset -4px 0 6px rgba(0,0,0,0.08);
  transition:transform 0.18s var(--bounce);
}
/* glass rim */
.tube::before {
  content:''; position:absolute; top:-5px; left:-5px; right:-5px; height:8px;
  border:5px solid var(--stroke); border-bottom:none; border-radius:8px 8px 0 0;
}
.liquid {
  width:100%; height:46px; border-top:2px solid rgba(0,0,0,0.12);
  box-shadow:inset 0 6px 0 rgba(255,255,255,0.18), inset 0 -6px 0 rgba(0,0,0,0.12);
}
.liquid.pourIn { animation:pourIn 0.32s var(--bounce); transform-origin:bottom; }
@keyframes pourIn { 0%{ transform:scaleY(0); } 60%{ transform:scaleY(1.12); } 100%{ transform:scaleY(1); } }
.tube.selected { transform:translateY(-16px) scale(1.04); box-shadow:0 14px 12px -8px rgba(0,0,0,0.3); z-index:5; }
.tube.pouring { transform:translateY(-22px); z-index:6; }
.tube.pouring.pour-right { transform:translateY(-22px) rotate(16deg); }
.tube.pouring.pour-left  { transform:translateY(-22px) rotate(-16deg); }
.tube.pouring::after {
  content:''; position:absolute; top:100%; left:50%; width:7px; height:0;
  background:var(--pour-color, #fff); border-radius:0 0 5px 5px;
  transform:translateX(-50%); animation:streamDown 0.28s ease-in forwards;
}
@keyframes streamDown { 0%{ height:0; opacity:0.4; } 30%{ opacity:1; } 100%{ height:34px; opacity:0.9; } }
.tube.bad { animation:badShake 0.3s; }
@keyframes badShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px) rotate(-3deg);} 75%{transform:translateX(6px) rotate(3deg);} }