fix(ftw): tighten lobby layout and align rules row

- Hero/intro panels now align to start so the rules pills sit at the
  top of the row instead of vertically centering against the stat
  card. Reads cleaner when the description wraps.
- Rules list rendered as small chips (one per rule) instead of an
  inline run-on. The 6 pts / 1 pt / 0 cases are visually parallel.
- Active topic chip becomes pink in light mode (was near-black, fought
  the new pink primary CTA). Dark mode unchanged.
- Solo run / Host room / Join input share the same 42px height so the
  control row doesn't stair-step.
- Leaderboard / recent panels stretch equal heights, empty states
  render as boxed dashed messages so the two cards balance.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: 2 people

app/globals.css

@@ -5546,7 +5546,7 @@ html:not(.dark) .typewriter-cursor {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 24px;
-  align-items: center;
+  align-items: start;
   padding: 24px 28px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-card);
@@ -5563,24 +5563,35 @@ html:not(.dark) .typewriter-cursor {
 
 .ftw-intro p {
   color: var(--color-muted);
-  margin: 0 0 12px;
+  margin: 0 0 14px;
   max-width: 56ch;
   line-height: 1.55;
 }
 
 .ftw-rules {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px 14px;
+  gap: 8px;
   list-style: none;
   padding: 0;
   margin: 0;
   color: var(--color-muted);
-  font-size: 0.92rem;
+  font-size: 0.85rem;
+}
+
+.ftw-rules li {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--color-surface-alt);
+  border: 1px solid var(--color-border);
 }
 
 .ftw-rules strong {
   color: var(--color-pink);
+  font-weight: 800;
 }
 
 .ftw-hero-stat {
@@ -5592,6 +5603,7 @@ html:not(.dark) .typewriter-cursor {
   border-radius: var(--radius-card);
   background: var(--color-surface-alt);
   color: var(--color-pink);
+  min-width: 180px;
 }
 
 .ftw-hero-stat strong {
@@ -5651,13 +5663,13 @@ html:not(.dark) .typewriter-cursor {
 }
 
 .ftw-tag.is-active {
-  background: var(--color-text-strong);
-  border-color: var(--color-text-strong);
-  color: var(--color-surface);
+  background: var(--color-pink);
+  border-color: var(--color-pink);
+  color: #ffffff;
 }
 
 .ftw-tag.is-active span {
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, 0.78);
 }
 
 html.dark .ftw-tag.is-active,
@@ -5681,6 +5693,12 @@ html:not(.light) .ftw-tag.is-active {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 20px;
+  align-items: stretch;
+}
+
+.ftw-grid > .panel {
+  display: flex;
+  flex-direction: column;
 }
 
 @media (max-width: 720px) {
@@ -5698,11 +5716,18 @@ html:not(.light) .ftw-tag.is-active {
   flex-direction: column;
   gap: 6px;
   padding-top: 6px;
+  flex: 1;
 }
 
 .ftw-empty {
   color: var(--color-muted);
-  margin: 8px 0;
+  margin: 0;
+  padding: 18px 6px;
+  text-align: center;
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-card);
+  background: var(--color-surface-alt);
+  font-size: 0.88rem;
 }
 
 .ftw-leader-row {
@@ -6139,6 +6164,11 @@ html:not(.light) .ftw-rank.rank-1 {
   flex-wrap: wrap;
 }
 
+.ftw-mode-row .primary-action,
+.ftw-mode-row .secondary-action {
+  min-height: 42px;
+}
+
 .ftw-join-row {
   display: flex;
   gap: 8px;
@@ -6148,9 +6178,14 @@ html:not(.light) .ftw-rank.rank-1 {
   color: var(--color-muted);
 }
 
+.ftw-join-row .secondary-action {
+  min-height: 42px;
+}
+
 .ftw-code-input {
   flex: 1;
-  max-width: 160px;
+  max-width: 180px;
+  height: 42px;
   text-transform: uppercase;
   letter-spacing: 0.18em;
   font-weight: 800;