@keyframes bubbleFloat { to { transform:translateY(-5px) scale(.86);opacity:.72; } }

  /* Fast pour feedback. The board has already committed the move when these
     classes are applied, so this layer is visual only and cannot desync play. */
  .tube.pour-placeholder { visibility: hidden; }
  .pour-fly {
    position: fixed !important;
    z-index: 120 !important;
    margin: 0 !important;
    pointer-events: none;
    transform-origin: 50% 5px;
    will-change: transform;
    filter: drop-shadow(0 12px 10px rgba(50,92,155,.28));
  }
  .tube.receiving {
    animation: receivePulse 360ms cubic-bezier(.2,.8,.3,1);
  }
  .droplet {
    position: fixed;
    z-index: 110;
    width: 9px;
    height: 13px;
    border-radius: 70% 45% 65% 45%;
    background: var(--color);
    box-shadow: inset 2px 2px 2px rgba(255,255,255,.45), 0 2px 4px rgba(35,55,95,.2);
    pointer-events: none;
    transform: translate(-50%, -12px) rotate(45deg) scale(.55);
    opacity: 0;
    animation: dropletFall 300ms cubic-bezier(.28,.05,.7,.45) forwards;
  }
  @keyframes receivePulse {
    0% { transform: translateY(0) scale(1); }
    45% { transform: translateY(3px) scale(1.045); filter: drop-shadow(0 0 11px var(--receive, rgba(108,99,255,.55))); }
    100% { transform: translateY(0) scale(1); }
  }
  @keyframes dropletFall {
    0% { opacity: 0; transform: translate(-50%, -12px) rotate(45deg) scale(.55); }
    18% { opacity: .95; }
    82% { opacity: .9; }
    100% { opacity: 0; transform: translate(-50%, 58px) rotate(45deg) scale(.9); }
  }
  .tube-cap { position:absolute;z-index:20;left:-8px;right:-8px;top:-15px;height:17px;border:3px solid #4a83bd;border-radius:9px 9px 5px 5px;background:linear-gradient(180deg,#ffe27a 0 30%,#ffb629 31% 72%,#e88a13 73%);box-shadow:0 4px 0 rgba(93,58,19,.16),0 0 12px rgba(255,185,40,.38);pointer-events:none;animation:capDrop .38s cubic-bezier(.2,1.45,.45,1) both; }
  .tube-cap:before { content:'';position:absolute;left:5px;right:5px;top:-7px;height:7px;border-radius:6px 6px 2px 2px;background:#ffd45b;border:2px solid #4a83bd;border-bottom:0; }
  @keyframes capDrop { from{opacity:0;transform:translateY(-20px) scale(.75)}to{opacity:1;transform:translateY(0) scale(1)} }
  /* Cute candy stopper for completed tubes. */
  .tube-cap { left:-7px;right:-7px;top:-7px;height:14px;border:3px solid #5b8fd7;border-radius:50%;background:linear-gradient(180deg,#ffb8ed 0%,#ff69c8 48%,#aa62ef 100%);box-shadow:inset 0 3px 2px rgba(255,255,255,.78),inset 0 -2px 2px rgba(85,37,149,.1),0 2px 5px rgba(185,72,201,.14);animation:none; }
  .tube-cap:before { content:'♥';left:50%;right:auto;top:-17px;width:22px;height:20px;transform:translateX(-50%);display:grid;place-items:center;border:0;background:none;color:#ffd83d;font-size:18px;line-height:1;-webkit-text-stroke:1.5px #e98b16;text-shadow:0 2px 0 #fff,0 4px 5px rgba(238,116,20,.3);animation:none; }
  .tube-cap:after { content:'';position:absolute;left:7px;top:2px;width:17px;height:5px;border-radius:50%;background:rgba(255,255,255,.65);transform:rotate(-8deg); }
  .tube-cap.animate { animation:candyCapDrop .48s cubic-bezier(.18,1.55,.35,1) both; }
  .tube-cap.animate:before { animation:heartPop .62s cubic-bezier(.18,1.55,.35,1) .25s both; }
  /* A completed tube keeps the normal glass depth. The previous gold outline
     plus green drop-shadow stacked over its regular shadow and made a dirty,
     dark halo around every full tube. */
  .tube.done {
    filter: none;
    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 5px 9px rgba(24,76,139,.12);
  }
  .tube.done .liquid {
    animation: completedLiquidGlow 1.35s ease-in-out infinite alternate;
  }
  .tube.done .liquid:before {
    width: 7px;
    height: 7px;
    top: 76%;
    background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.78);
    animation: completedBubbles 1.15s ease-in infinite;
  }
  .tube.done .liquid.top:after {
    animation: completedSurface 780ms ease-in-out infinite alternate;
    transform-origin: center;
  }
  @keyframes completedLiquidGlow {
    from { filter: brightness(1) saturate(1); }
    to { filter: brightness(1.08) saturate(1.08); }
  }
  @keyframes completedBubbles {
    0% { transform: translate(0,9px) scale(.45); opacity: 0; box-shadow: -17px 5px 0 -2px rgba(255,255,255,.62), 12px 10px 0 -1px rgba(255,255,255,.5); }
    22% { opacity: .9; }
    72% { opacity: .72; box-shadow: -13px -17px 0 -1px rgba(255,255,255,.5), 16px -9px 0 -2px rgba(255,255,255,.65); }
    100% { transform: translate(2px,-27px) scale(1.05); opacity: 0; box-shadow: -9px -28px 0 -2px rgba(255,255,255,.25), 9px -34px 0 -1px rgba(255,255,255,.2); }
  }
  @keyframes completedSurface {
    from { transform: translateY(0) scaleX(.98); }
    to { transform: translateY(-2px) scaleX(1.035); }
  }
  @keyframes candyCapDrop { 0%{opacity:0;transform:translateY(-24px) rotate(-8deg) scale(.65)}65%{opacity:1;transform:translateY(3px) rotate(3deg) scale(1.08)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)} }
  @keyframes heartPop { 0%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.35)}70%{opacity:1;transform:translateX(-50%) translateY(-3px) rotate(7deg) scale(1.18)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} }

  .controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 13px; }
  .control { border: 1.5px solid var(--line); border-radius: 16px; background: #fff; padding: 11px 5px; font-size: 11px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px rgba(50,31,46,.06); }
  .control:active, .icon:active { transform: scale(.94); }
  .control:disabled { opacity: .42; }
  .control i { font-style: normal; font-size: 18px; display: block; margin-bottom: 3px; }

  .overlay { position: fixed; z-index: 20; inset: 0; background: rgba(37,25,35,.48); backdrop-filter: blur(7px); display: none; align-items: center; justify-content: center; padding: 20px; }
  .overlay.show { display: flex; }
  .modal { width: min(100%, 370px); background: #fff; border-radius: 27px; padding: 24px; box-shadow: 0 25px 70px rgba(32,20,30,.28); animation: pop .32s cubic-bezier(.34,1.56,.64,1); }
  .modal .emoji { text-align: center; font-size: 48px; line-height: 1.1; }
  .modal h2 { text-align: center; font-family: 'Baloo 2', sans-serif; font-size: 26px; margin: 7px 0 5px; }
  .modal > p { text-align: center; color: var(--muted); font-size: 13px; line-height: 1.5; }
  .how { margin: 18px 0; }
  .how div { display: flex; gap: 12px; margin: 13px 0; align-items: flex-start; }
  .how span { font-size: 22px; }
  .how b { font-size: 12px; display: block; margin-bottom: 2px; }
  .how p { font-size: 11px; color: var(--muted); line-height: 1.45; }
  .primary { width: 100%; border: 0; border-radius: 15px; padding: 13px; background: linear-gradient(100deg, var(--pink), var(--purple)); color: #fff; font-weight: 800; box-shadow: 0 8px 20px rgba(139,92,246,.25); cursor: pointer; margin-top: 15px; }
  .secondary { width: 100%; border: 1.5px solid var(--line); border-radius: 15px; padding: 12px; background: #fff; font-weight: 800; cursor: pointer; margin-top: 9px; }
  .stars { text-align: center; font-size: 30px; letter-spacing: 5px; margin: 9px 0; }

  /* ── Leaderboard ── */
  .leaderboard-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; max-height: 50vh; overflow-y: auto; }
  .leaderboard-loading, .leaderboard-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 20px 0; }
  .lb-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg); }
  .lb-row.me { background: rgba(139,92,246,.15); border: 1.5px solid var(--purple); }
  .lb-rank { font-weight: 800; font-size: 13px; color: var(--muted); width: 22px; text-align: center; flex-shrink: 0; }
  .lb-row:nth-child(1) .lb-rank { color: #eab308; }
  .lb-row:nth-child(2) .lb-rank { color: #94a3b8; }
  .lb-row:nth-child(3) .lb-rank { color: #b45309; }
  .lb-name { flex: 1; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lb-score { font-weight: 800; font-size: 14px; color: var(--purple); }
  .wof-share-row { display: none; align-items: center; gap: 10px; margin-top: 14px; }
  .wof-thumb { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; }
  .btn-share { margin-top: 0 !important; flex: 1; }

  .confetti { position: fixed; z-index: 25; pointer-events: none; width: 9px; height: 15px; border-radius: 2px; animation: fall 1.6s linear forwards; }
  @keyframes pop { from { opacity: 0; transform: scale(.78); } to { opacity: 1; transform: scale(1); } }
  @keyframes fall { from { transform: translateY(-8vh) rotate(0); } to { transform: translateY(108vh) rotate(620deg); } }

  @media (max-width: 370px) { .tube { width: 44px; height: 130px; } .board { gap: 17px 12px; min-height: 300px; } .game { min-height: 380px; } }
  @media (min-width: 480px) { .tube { width: 54px; height: 156px; } .board { gap: 23px 20px; } }
  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .droplet { display: none !important; }
  }