.tubes { --tw:clamp(46px, 11vw, 64px); display:flex; flex-wrap:wrap; justify-content:center; gap:20px 14px; width:100%; padding:10px 0 4px; }
.tube { position:relative; width:var(--tw); height:calc(var(--tw) * 3.3); padding:4px 4px 5px; display:flex; flex-direction:column-reverse; gap:3px; border:3px solid var(--line); border-top-color:transparent; border-radius:6px 6px calc(var(--tw) * .5) calc(var(--tw) * .5); background:color-mix(in srgb, var(--panel) 70%, transparent); transition:transform .15s ease, border-color .15s ease; }
.tube:hover:not(:disabled) { border-color:var(--accent); border-top-color:transparent; }
.tube.sel { transform:translateY(-14px); border-color:var(--accent); border-top-color:transparent; box-shadow:0 8px 14px rgba(0,0,0,.2); }
.tube.hint { animation:wsHint .9s ease 2; }
.tube.done { border-color:#4ade80; border-top-color:transparent; }
.liq { flex:1 1 0; display:grid; place-items:center; border-radius:4px; color:rgba(0,0,0,.55); font:800 calc(var(--tw) * .3)/1 system-ui,sans-serif; box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.18); animation:wsDrop .18s ease; }
.liq:last-child { border-top-left-radius:6px; border-top-right-radius:6px; }
.tube:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
@keyframes wsHint { 50% { box-shadow:0 0 0 4px var(--accent); } }
@keyframes wsDrop { from { transform:scaleY(.4); opacity:.4; } }
.bar button { min-height:44px; }