.tube:before {
    content: ''; position: absolute; z-index: 5; left: -7px; right: -7px; top: -6px; height: 12px;
    border: 3px solid #6bb5ea; border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(16,102,181,.22) 0 47%, #dff7ff 50% 64%, #fff 67% 76%, #74c3f2 79%);
    box-shadow: inset 0 2px 1px #fff, 0 2px 0 #3479be, 0 4px 5px rgba(20,81,146,.18);
  }
  .tube.selected { transform: translateY(-13px); }
  .tube.done { box-shadow: inset 2px 0 0 rgba(255,255,255,.9), inset -2px 0 0 rgba(42,117,200,.18), 0 0 0 2px rgba(255,190,45,.35), 0 9px 15px rgba(24,76,139,.22); }
  .tube.hint { animation: pulse .85s ease-in-out 2; }
  @keyframes pulse { 50% { transform: translateY(-10px); filter: drop-shadow(0 8px 8px rgba(236,72,153,.35)); } }

  .liquid {
    position: absolute; left: 2px; right: 2px; height: 25%; bottom: var(--bottom);
    background: linear-gradient(100deg, color-mix(in srgb, var(--color), #000 13%) 0%, var(--color) 20%, color-mix(in srgb, var(--color), #fff 25%) 52%, var(--color) 70%, color-mix(in srgb, var(--color), #000 8%) 100%);
    box-shadow: inset 4px 0 5px rgba(255,255,255,.22), inset -3px 0 4px rgba(0,0,0,.09);
  }
  .liquid.bottom { border-radius: 2px 2px 18px 18px; }
  .liquid.top { border-radius: 7px 7px 1px 1px; }
  .liquid.top:after {
    content: ''; position: absolute; left: -2px; top: -6px; width: calc(100% + 4px); height: 13px;
    background: radial-gradient(ellipse at 48% 28%, rgba(255,255,255,.7) 0 8%, transparent 10%), color-mix(in srgb, var(--color), #fff 19%);
    box-shadow: inset 0 3px 2px rgba(255,255,255,.52), 0 2px 2px rgba(0,0,0,.1);
  }

  /* ── Pour animation: the tube leans in place (no travel across the board)
     and settles back; the liquid grow/shrink is handled per-element via the
     Web Animations API in game.js. ~350-500ms total, vs. the original's
     ~2.3s clone-travels-the-board + full-screen-canvas implementation. ── */
  .tube.pouring { transition: transform .18s cubic-bezier(.3,.7,.3,1); transform: rotate(var(--tilt, 0deg)) translateY(-6px); z-index: 6; }
  .tube.receiving { animation: receiveGlow .4s ease; }
  @keyframes receiveGlow { 50% { filter: drop-shadow(0 0 9px var(--receive, rgba(255,255,255,.7))); } }
  .droplet {
    position: fixed; z-index: 99; width: 6px; height: 8px; border-radius: 50% 50% 50% 0; pointer-events: none;
    background: color-mix(in srgb, var(--color), #fff 15%);
    box-shadow: 0 0 4px color-mix(in srgb, var(--color), transparent 40%);
    animation: dropletFall .38s cubic-bezier(.4,0,.7,1) both;
  }
  @keyframes dropletFall { from { transform: translateY(-4px) rotate(45deg); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(30px) rotate(45deg); opacity: 0; } }

  /* Restored tube/liquid renderer and canvas pour animation. */
  .game { overflow: visible; min-height: 430px; background: linear-gradient(180deg,rgba(255,255,255,.97),rgba(245,249,255,.92)); }
  .board { min-height: 355px; gap: 25px 17px; }
  /* Let the board occupy the full game area so a single row centers vertically. */
  .game { display:flex;flex-direction:column; }
  .board { flex:1;width:100%;align-content:center; }
  .tube { width:52px;height:150px;border:3px solid #75bdf0;border-top:0;border-radius:5px 5px 22px 22px;background:linear-gradient(90deg,rgba(110,196,255,.25),rgba(255,255,255,.72) 20%,rgba(218,244,255,.16) 52%,rgba(255,255,255,.62) 83%,rgba(83,168,231,.26));box-shadow:inset 2px 0 0 rgba(255,255,255,.9),inset -2px 0 0 rgba(42,117,200,.18),inset 0 -4px 0 rgba(255,255,255,.32),0 2px 0 #397ec5,0 9px 13px rgba(24,76,139,.2);overflow:visible;appearance:none;filter:none; }
  .tube:before { left:-7px;right:-7px;top:-6px;height:12px;border:3px solid #6bb5ea;background:radial-gradient(ellipse at center,rgba(16,102,181,.22) 0 47%,#dff7ff 50% 64%,#fff 67% 76%,#74c3f2 79%);box-shadow:inset 0 2px 1px #fff,0 2px 0 #3479be,0 4px 5px rgba(20,81,146,.18); }
  .tube:after { content:'';position:absolute;z-index:7;right:6px;top:13px;width:6px;height:105px;background:linear-gradient(#fff 0 24%,rgba(255,255,255,.8) 42%,rgba(255,255,255,.18) 85%,transparent);border-radius:9px;pointer-events:none; }
  .tube.selected { transform:translateY(-16px); }
  .tube.done { filter:drop-shadow(0 8px 7px rgba(32,190,135,.26)); }
  .liquid { left:2px;right:2px;height:25.3%;opacity:1;border-radius:5px 5px 1px 1px;background:linear-gradient(100deg,color-mix(in srgb,var(--color),#000 13%) 0%,var(--color) 20%,color-mix(in srgb,var(--color),#fff 25%) 52%,var(--color) 70%,color-mix(in srgb,var(--color),#000 8%) 100%);box-shadow:inset 4px 0 5px rgba(255,255,255,.22),inset -3px 0 4px rgba(0,0,0,.09);overflow:hidden; }
  .liquid:before { content:'';position:absolute;z-index:3;left:var(--bubble-x,58%);top:42%;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18);border:1.4px solid rgba(255,255,255,.62);box-shadow:-15px 8px 0 -1.5px rgba(255,255,255,.38),1px 1px 2px rgba(0,0,0,.1);animation:bubbleFloat 1.8s ease-in-out infinite alternate; }
  .liquid:after { display:none; }
  .liquid.top:after { content:'';display:block;position:absolute;left:-2px;top:-6px;width:calc(100% + 4px);height:13px;border-radius:50%;background:radial-gradient(ellipse at 48% 28%,rgba(255,255,255,.7) 0 8%,transparent 10%),color-mix(in srgb,var(--color),#fff 19%);box-shadow:inset 0 3px 2px rgba(255,255,255,.52),0 2px 2px rgba(0,0,0,.1); }
  .liquid.bottom { border-radius:2px 2px 18px 18px; }
  .liquid.top { border-radius:7px 7px 1px 1px; }
  /* A single layer is both .bottom and .top. Restore the curved tube base
     after .top's shorthand would otherwise overwrite it with square corners. */
  .liquid.bottom.top { border-radius:7px 7px 20px 20px / 7px 7px 17px 17px; }