Magnify cards on hover

Hovering any card portals a large copy beside the cursor that grows to
fit its full effect text, so small or clipped cards can be read at a
glance.

web/src/styles.css

@@ -1339,3 +1339,41 @@ h3 {
   flex-wrap: wrap;
   gap: 6px;
 }
+
+/* --- hover magnifier --- */
+
+.card-magnify {
+  position: fixed;
+  z-index: 200;
+  pointer-events: none;
+  transform: scale(1.5);
+  transform-origin: top left;
+  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55));
+  animation: magnify-in 90ms ease-out;
+}
+
+/* The magnifier exists to be read, so let the preview card grow to fit its
+   full effect text instead of clipping like a fixed-height card. */
+.card-magnify .card {
+  height: auto;
+  min-height: 176px;
+  padding-bottom: 10px;
+}
+
+.card-magnify .card-effect {
+  flex: 0 0 auto;
+  overflow: visible;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+@keyframes magnify-in {
+  from {
+    opacity: 0;
+    transform: scale(1.1);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1.5);
+  }
+}