/* Water Sort Specific Styles */

body::before {
    background: radial-gradient(circle at 50% 10%, rgba(245, 158, 11, 0.15), transparent 50%);
}

.btn-restart {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s;
}
.btn-restart img {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.btn-restart:active { transform: scale(0.9); }

.game-board {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    width: 100%;
    max-width: 400px;
    margin-top: 50px;
}

.tube-container {
    width: 60px;
    height: 180px;
    background: rgba(255, 255, 255, 0.05);
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: none;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    position: relative;
    display: flex;
    flex-direction: column-reverse; /* Bottom fills first */
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: inset 0 -10px 20px rgba(0,0,0,0.5), 0 10px 15px rgba(0,0,0,0.3);
}

.tube-container.selected {
    transform: translateY(-30px);
    border-color: #f59e0b;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}

/* Glass shine effect */
.tube-container::after {
    content: '';
    position: absolute;
    top: 0; left: 5px; right: 35px; bottom: 0;
    background: linear-gradient(to right, rgba(255,255,255,0.2), transparent);
    pointer-events: none;
    z-index: 10;
}

.water-layer {
    width: 100%;
    height: 25%; /* 4 layers max */
    transition: height 0.4s ease-in-out, background 0.4s ease-in-out;
    position: relative;
    z-index: 5;
}

/* Color palettes */
.color-red { background: linear-gradient(180deg, #f87171, #ef4444); }
.color-blue { background: linear-gradient(180deg, #60a5fa, #3b82f6); }
.color-green { background: linear-gradient(180deg, #34d399, #10b981); }
.color-yellow { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.color-purple { background: linear-gradient(180deg, #a78bfa, #8b5cf6); }

/* Win animation */
.tube-container.done {
    animation: tubeWin 1s forwards;
    border-color: #4ade80;
}

@keyframes tubeWin {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.05); }
    100% { transform: translateY(0) scale(1); box-shadow: 0 0 30px rgba(74, 222, 128, 0.6); }
}