.sort-puzzle-board{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);padding:20px;border-radius:15px;margin:0 auto;display:flex;justify-content:center;align-items:center;min-height:300px}.tubes-container{display:flex;justify-content:center;align-items:flex-end;gap:12px;flex-wrap:wrap}.test-tube{width:50px;height:200px;position:relative;cursor:pointer;transition:all .3s ease;margin:5px}.test-tube:hover{transform:translateY(-5px)}.test-tube.selected{transform:translateY(-8px) scale(1.05);filter:drop-shadow(0 8px 16px #007bff4d)}.test-tube.invalid-target{animation:shakeX .3s ease}@keyframes shakeX{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}.tube-body{width:40px;height:180px;background:linear-gradient(135deg,#ffffffe6,#ffffffb3);border:3px solid #666;border-top:0;border-radius:0 0 20px 20px;position:absolute;bottom:1px;left:3px;overflow:hidden;box-shadow:inset 0 0 10px #0000001a 0 4px 8px #00000026}.tube-rim{width:46px;height:12px;background:linear-gradient(135deg,#ddd,#bbb);border:3px solid #666;border-radius:6px;position:absolute;top:8px;left:0;box-shadow:0 2px 4px #0003;z-index:10}.liquid-container{position:absolute;bottom:0;left:0;width:34px;height:174px;display:flex;flex-direction:column-reverse}.liquid-block{width:100%;height:43px;position:relative;transition:all .4s ease;box-shadow:inset 0 2px 4px #ffffff4d inset 0 -2px 4px #0000001a}.liquid-bottom{border-radius:0 0 17px 17px}.liquid-block:not(.liquid-bottom){border-radius:0}.liquid-block::before{content:'';position:absolute;top:0;left:0;right:0;height:30%;background:linear-gradient(to bottom,#fff6,transparent);border-radius:2px 2px 0 0}.liquid-block::after{content:'';position:absolute;bottom:0;left:0;right:0;height:20%;background:linear-gradient(to top,#0000001a,transparent);border-radius:0 0 2px 2px}.tube-pouring{animation:pouringAnimation .8s ease;z-index:10;transform-origin:bottom center}@keyframes pouringAnimation{0%{transform:rotate(0deg)}30%{transform:rotate(var(--tilt-angle,-10deg))}70%{transform:rotate(calc(var(--tilt-angle,-10deg) * 0.8))}100%{transform:rotate(0deg)}}.tube-receiving{animation:receivingAnimation .8s ease;z-index:5}@keyframes receivingAnimation{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}.tube-completed{animation:tubeComplete 1s ease}@keyframes tubeComplete{0%{transform:scale(1)}50%{transform:scale(1.1);filter:brightness(1.2)}100%{transform:scale(1)}}.liquid-red{background:linear-gradient(135deg,#ff6b6b,#ee5a52)}.liquid-blue{background:linear-gradient(135deg,#4dabf7,#339af0)}.liquid-green{background:linear-gradient(135deg,#51cf66,#40c057)}.liquid-yellow{background:linear-gradient(135deg,#ffd43b,#fcc419)}.liquid-purple{background:linear-gradient(135deg,#da77f2,#cc5de8)}.liquid-orange{background:linear-gradient(135deg,#ff922b,#fd7e14)}.liquid-pink{background:linear-gradient(135deg,#f783ac,#e64980)}.liquid-cyan{background:linear-gradient(135deg,#22d3ee,#06b6d4)}.liquid-lime{background:linear-gradient(135deg,#84cc16,#65a30d)}.liquid-indigo{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.move-counter{font-family:'Courier New',monospace;font-weight:700}@media (max-width: 768px){.sort-puzzle-board{padding:10px;min-height:250px}.test-tube{width:40px;height:160px;margin:3px}.tube-body{width:32px;height:144px;left:4px}.tube-rim{width:38px;height:10px;left:1px}.liquid-container{width:26px;height:138px}.liquid-block{height:34px}.tubes-container{gap:8px}}@media (max-width: 480px){.test-tube{width:35px;height:140px;margin:2px}.tube-body{width:28px;height:126px;left:3px}.tube-rim{width:33px;height:8px;left:1px}.liquid-container{width:22px;height:120px}.liquid-block{height:29px}.tubes-container{gap:6px}}.game-complete{animation:gameCompleteGlow 2s ease}@keyframes gameCompleteGlow{0%{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%)}50%{background:linear-gradient(135deg,#fff3cd 0%,#ffeaa7 100%)}100%{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%)}}.sort-puzzle-stats .stat-number{color:#6f42c1}.test-tube.solution-highlight-from{border:3px solid #ffc107!important;box-shadow:0 0 15px #ffc10799;animation:pulseGlow 1.5s ease-in-out infinite}.test-tube.solution-highlight-to{border:3px solid #28a745!important;box-shadow:0 0 15px #28a74599;animation:pulseGlow 1.5s ease-in-out infinite}@keyframes pulseGlow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}.solution-steps{max-height:400px;overflow-y:auto}.step-item{transition:all .3s ease}.step-item:hover{background-color:#e9ecef!important;transform:translateX(5px)}