Assisted-by: Claude Opus 5.5 via Claude Code

diff --git a/public/css/app.css b/public/css/app.css
index 1978064..56f6029 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -222,27 +222,43 @@ main > header [popovertarget] { anchor-name: --rk-list-actions; }
 /* A thumbnail has no baseline for the rank to sit on. */
 .card > li:has(> .type-label:first-child):has(> [data-video]) { align-items: center; }
 
-/* Gloss centers a button's content, which would shrink the item to it. */
+/* Gloss centers a button's content, which would shrink the item to it
+   and float it mid-card when the other card is taller. */
 [data-matchup] [data-video] {
   flex-direction: column;
   align-items: stretch;
+  align-self: flex-start;
   width: 100%;
 }
 
 [data-matchup] [data-video] img { width: 100%; }
 
+/* A video synced without a thumbnail keeps its slot, so its title lines
+   up with the other card's. */
+[data-matchup] [data-video]:not(:has(> img))::before {
+  content: "";
+  aspect-ratio: 16 / 9;
+  background: var(--gl-color-surface-fill);
+  border-radius: var(--gl-radius-sm);
+}
+
 /* -------------------- */
 /* Compare */
 /* -------------------- */
 
 [data-matchup] {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  /* minmax(0, …) so a long unbroken title can't widen its column. */
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: var(--gl-space-xs);
 }
 
+/* The row stretches each choice's form (a Gloss flex column) to the
+   taller card; the button grows to fill it. */
 [data-matchup] button {
+  flex: 1;
   width: 100%;
+  overflow-wrap: anywhere;
   min-height: 8rem;
   padding: var(--gl-space-s);
   background: var(--gl-color-surface-card);