/* =============================================================
   GAME: Water Sort
   ============================================================= */
.board-watersort {
  --tw: min(calc((100vw - 60px) / var(--per, 5) - 12px), 54px);
  --th: calc(var(--tw) * 3.3);
  --u: calc(var(--th) * .22);
  --ws-glow: #3de8ff;
  position: relative; min-height: calc(var(--th) + 60px); min-width: 200px; max-width: 100%;
}
.ws-rack {
  display: grid; grid-template-columns: repeat(var(--per), var(--tw)); justify-content: center;
  gap: 34px 12px; padding: 34px 14px 18px; border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(61, 232, 255, .14), transparent 60%),
    linear-gradient(180deg, rgba(10, 26, 48, .0), rgba(10, 26, 48, .7));
}
.ws-tube {
  position: relative; width: var(--tw); height: var(--th); padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  transform-origin: 50% 0; transition: transform .18s ease; outline: none; -webkit-tap-highlight-color: transparent;
}
.ws-glass {
  position: absolute; inset: 0; border-radius: 7px 7px calc(var(--tw) / 2) calc(var(--tw) / 2);
  background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 40%, rgba(255, 255, 255, .07));
  box-shadow: inset 0 0 0 2px rgba(190, 240, 255, .5), inset 0 -4px 10px rgba(61, 232, 255, .12), 0 6px 14px rgba(0, 0, 0, .35);
  overflow: hidden;
}
/* rim at the mouth */
.ws-glass::before {
  content: ""; position: absolute; left: -2px; right: -2px; top: 0; height: 5px; border-radius: 4px; z-index: 2;
  background: rgba(200, 245, 255, .55);
}
.ws-liquid { position: absolute; inset: 3px; border-radius: 4px 4px calc(var(--tw) / 2 - 3px) calc(var(--tw) / 2 - 3px); overflow: hidden; }
.ws-seg {
  position: absolute; left: 0; right: 0; bottom: calc(var(--b) * var(--u) - 1px); height: calc(var(--h) * var(--u) + 1px);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .22), transparent 30%, rgba(255, 255, 255, .22) 55%, transparent 70%, rgba(0, 0, 0, .25)),
    var(--c);
}
.ws-top::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: color-mix(in srgb, var(--c) 55%, #fff); opacity: .7; border-radius: 50%;
}
.ws-shine { position: absolute; left: 18%; top: 8%; width: 14%; height: 70%; border-radius: 99px; background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)); pointer-events: none; }
.ws-cap {
  position: absolute; left: -3px; right: -3px; top: -9px; height: 10px; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #ffe58a, #e0a020); box-shadow: 0 0 10px rgba(255, 210, 90, .7);
  transform: translateY(-14px) scaleX(.6); opacity: 0; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), opacity .2s;
}
.ws-done .ws-cap { transform: none; opacity: 1; }
.ws-done .ws-glass { box-shadow: inset 0 0 0 2px rgba(255, 230, 140, .8), 0 0 18px rgba(255, 210, 90, .35), 0 6px 14px rgba(0, 0, 0, .35); }
.ws-tube:hover .ws-glass { box-shadow: inset 0 0 0 2px var(--ws-glow), 0 0 16px rgba(61, 232, 255, .3), 0 6px 14px rgba(0, 0, 0, .35); }
.ws-tube:focus-visible .ws-glass { box-shadow: inset 0 0 0 3px var(--focus), 0 6px 14px rgba(0, 0, 0, .35); }
.ws-sel { transform: translateY(-14%); }
.ws-sel .ws-glass { box-shadow: inset 0 0 0 2px #fff, 0 0 22px rgba(61, 232, 255, .65), 0 10px 18px rgba(0, 0, 0, .4); }
.ws-hint-from .ws-glass, .ws-hint-to .ws-glass { animation: wshint .8s ease-in-out infinite alternate; }
@keyframes wshint { to { box-shadow: inset 0 0 0 3px #ffe14d, 0 0 22px rgba(255, 225, 77, .7); } }
.ws-hint-to::after { content: "▼"; position: absolute; left: 0; right: 0; top: -30px; text-align: center; color: #ffe14d; font-size: 14px; text-shadow: 0 0 8px rgba(255, 225, 77, .8); }
.ws-stream {
  position: absolute; width: 6px; margin-left: -3px; border-radius: 3px; transform-origin: 50% 0; pointer-events: none; z-index: 3;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000), var(--c), color-mix(in srgb, var(--c) 60%, #fff));
}
.ws-won .ws-tube { animation: wswin .6s ease-in-out infinite alternate; }
.ws-won .ws-tube:nth-child(2n) { animation-delay: .3s; }
@keyframes wswin { to { transform: translateY(-6px); } }
.ws-dot { background: linear-gradient(180deg, #3de8ff 0 50%, #ff4d6d 50%); }
.ws-note { color: #9ff3ff; }
.ws-best { color: #ffe58a; }
.ws-lvl select { max-width: 8.5em; }
@media (max-width: 600px) {
  .ws-rack { gap: 30px 8px; padding: 30px 6px 14px; }
  .board-watersort { --tw: min(calc((100vw - 52px) / var(--per, 5) - 8px), 50px); }
}