.water-sort-container { max-width: 720px; } body.dark-mode .water-sort-header h1 { color: #f4f4f8; } body.dark-mode .water-sort-header p { color: #aeb2c3; }.water-sort-top-label { color: #16839d; font-size: .7rem; font-weight: 900; letter-spacing: .1em; }.water-sort-heading-icon { width: 70px; height: 70px; margin: 0 auto 12px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; background: #d9f4fa; font-size: 2.2rem; }.water-sort-panel { padding: clamp(16px, 4vw, 30px); }
.water-sort-toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 480px; margin: 0 auto 13px; }.water-sort-toolbar div { min-width: 0; padding: 10px 5px; border-radius: 13px; background: #e8f7fa; color: #167f97; text-align: center; }.water-sort-toolbar span { display: block; font-size: .59rem; font-weight: 900; letter-spacing: .07em; }.water-sort-toolbar strong { display: block; margin-top: 3px; color: var(--text-color, #202c34); font-size: 1.22rem; }.water-sort-status { min-height: 22px; margin: 0 0 12px; color: var(--muted-text, #74798a); text-align: center; font-size: .82rem; font-weight: 700; }
.water-sort-tubes { display: flex; justify-content: center; align-items: flex-end; gap: clamp(9px, 2.2vw, 17px); min-height: 265px; padding: 8px 4px 12px; overflow: hidden; }.water-tube { position: relative; width: clamp(41px, 10vw, 61px); height: clamp(180px, 43vw, 244px); flex: 0 0 auto; padding: 7px 5px 5px; border: 4px solid #79a7b1; border-top: 0; border-radius: 0 0 16px 16px; background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.1)); cursor: pointer; box-shadow: inset 6px 0 8px rgba(255,255,255,.35), inset -5px 0 9px rgba(25,82,97,.1), 0 5px 10px rgba(24,75,89,.11); transition: transform .18s ease, filter .18s ease, border-color .18s ease; touch-action: manipulation; }.water-tube::before { content: ""; position: absolute; z-index: 2; top: -5px; left: -4px; right: -4px; height: 9px; border: 4px solid #79a7b1; border-bottom: 0; border-radius: 15px 15px 0 0; pointer-events: none; }.water-tube:hover:not(:disabled) { transform: translateY(-4px); }.water-tube.selected { border-color: #174d5a; transform: translateY(-9px); filter: drop-shadow(0 8px 8px rgba(27,145,170,.24)); }.water-tube.selected::before { border-color: #174d5a; }.water-tube:disabled { cursor: default; }.water-layer { position: absolute; left: 5px; right: 5px; bottom: calc(5px + var(--layer) * 25%); height: 25%; background: var(--water-color); box-shadow: inset 0 3px 5px rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.12); }.water-layer:first-child { border-radius: 0 0 10px 10px; }.water-layer:last-child { border-radius: 10px 10px 2px 2px; }.water-layer::after { content: ""; position: absolute; top: 2px; left: 8%; width: 84%; height: 3px; border-radius: 50%; background: rgba(255,255,255,.28); }.water-sort-actions { margin-top: 12px; } body.dark-mode .water-sort-toolbar div { background: #183b45; color: #8bdfef; } body.dark-mode .water-sort-heading-icon { background: #173e4a; }
@media (max-width: 520px) { .water-sort-top-label { display: none; }.water-sort-tubes { gap: 8px; min-height: 215px; }.water-tube { width: min(13vw, 52px); height: min(49vw, 205px); border-width: 3px; }.water-tube::before { left: -3px; right: -3px; border-width: 3px; }.water-layer { left: 4px; right: 4px; bottom: calc(4px + var(--layer) * 25%); }.water-sort-actions { margin-top: 16px; } }
@media (max-width: 350px) { .water-sort-tubes { gap: 5px; }.water-tube { width: 12vw; } }
@media (prefers-reduced-motion: reduce) { .water-tube { transition: none; } }