#board {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: center;
  align-items: flex-end;
  margin-top: 56px;
  max-width: 900px;
  min-height: 260px;
}

.tube {
  position: relative;
  width: 62px;
  height: 226px;
  cursor: pointer;
  transform-origin: 50% 100%;
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1);
}
.tube.selected { transform: translateY(-18px); }
.tube.selected .glass { border-color: rgba(167, 139, 250, .9); box-shadow: 0 0 22px rgba(139, 92, 246, .45), inset 0 0 14px rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.35); }
.tube.pouring {
  z-index: 30;
  transition: transform .38s ease-in-out;
  transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
}

.glass {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, .26);
  border-top: none;
  border-radius: 4px 4px 30px 30px;
  background: linear-gradient(105deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 45%, rgba(255,255,255,.09) 100%);
  backdrop-filter: blur(4px);
  overflow: hidden;
  box-shadow: inset 0 0 14px rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.35);
}
/* glass highlight stripe */
.glass::after {
  content: "";
  position: absolute;
  top: 6px; bottom: 18px; left: 7px;
  width: 6px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.05));
  pointer-events: none;
}
/* mouth rim */
.tube::before {
  content: "";
  position: absolute;
  top: -4px; left: -5px; right: -5px;
  height: 9px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  pointer-events: none;
}
.tube.complete .glass {
  border-color: rgba(110, 231, 183, .75);
  box-shadow: 0 0 20px rgba(52, 211, 153, .4), inset 0 0 14px rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.35);
}

.layers {
  position: absolute;
  left: 5px; right: 5px; bottom: 5px; top: 6px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: 2px;
}

.layer { flex: 0 0 auto; border-radius: 5px; position: relative; }
.layer.top { border-radius: 12px 12px 5px 5px; }
.layer.top::before {
  content: "";
  position: absolute;
  top: 2px; left: 8%; right: 8%;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .35);
}
.layer.fresh { animation: settle .32s cubic-bezier(.34, 1.56, .64, 1); transform-origin: bottom; }
@keyframes settle {
  from { transform: translateY(-120%) scaleY(.6); opacity: .5; }
  to   { transform: none; opacity: 1; }
}

.tube.shake { animation: shake .28s ease; }
@keyframes shake {
  25% { transform: translateX(-6px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

.pour-stream {
  position: fixed;
  width: 8px;
  margin-left: -4px;
  border-radius: 4px;
  transform-origin: top;
  transform: scaleY(0);
  animation: stream .22s ease-out forwards;
  pointer-events: none;
  z-index: 60;
  box-shadow: 0 0 10px rgba(255,255,255,.25);
}
@keyframes stream { to { transform: scaleY(1); } }