Blend the liquid drop into its card and let it be spun by hand

The rim hue drifted with play time until it left the card's colour altogether, so a
pink card could carry a green drop. It now only sways around the accent. The edge
fades into the page, a halo in the accent pulses behind it like the plain artwork's
glow, the surface reflects the accent from above, and the title and the rest of the
card sit on top where the drop spills over them.

Dragging the drop turns it (sideways only on touch, where up and down turn the page).
A flick keeps it spinning; it slows down and a weak spring wobbles it back to face the
front. Spun fast it flattens a little and sloshes, and the artwork blurs into colour
where it is seen from the side. A spin is not a tap, so it does not pause.

web/src/style.css

@@ -262,8 +262,22 @@ button.danger:not(.link) { background: var(--accent); border: none; color: #fff;
   height: 200%;
   pointer-events: none;
 }
-.card.liquid .art { background-image: none !important; background-color: transparent; box-shadow: none; scale: 1; }
+/* The halo stays behind the drop and pulses with it; the text sits on top where
+   the drop spills over it. */
+.card.liquid .art {
+  z-index: 0;
+  background-image: none !important;
+  background-color: transparent;
+  box-shadow: 0 0 calc(30px + var(--energy) * 80px) color-mix(in oklab, var(--card-accent) calc(18% + var(--energy) * 40%), transparent);
+  scale: 1;
+}
+.card.liquid .content > :not(.art) { position: relative; z-index: 1; }
+.card.liquid .title { text-shadow: 0 2px 16px #000b; }
 .card.liquid .initial { display: none; }
+@media (pointer: fine) {
+  .card.liquid .art { cursor: grab; }
+  .card.turning, .card.turning .art { cursor: grabbing; }
+}
 .paused-badge, .spinner { z-index: 1; }
 
 .audio-debug {