Animate room rank changes

static/panel.css

@@ -89,7 +89,14 @@ svg { width: 22px; height: 22px; fill: currentColor; }
 
 /* Card */
 
-.app > .on-top { order: -1; } /* A playing card goes to the top */
+/* A playing card goes to the top. order does not transition, so the swap
+   rides on a view transition instead -- see placeCards() in app.js. */
+.app > .on-top { order: -1; }
+
+::view-transition-group(*) {
+  animation-duration: .4s;
+  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
+}
 
 .card {
   background: var(--card);
@@ -321,8 +328,8 @@ button.sources-btn.loading .icon { display: none; }
 
 /* Footer */
 
-.foot { margin: var(--space-xs) var(--space-xs) 0; min-height: 18px; font-size: 12px; color: var(--muted); text-align: center; }
-.foot.bad { color: var(--warn); }
+footer { margin: var(--space-xs) var(--space-xs) 0; min-height: 18px; font-size: 12px; color: var(--muted); text-align: center; }
+footer.bad { color: var(--warn); }
 
 /* Toast */