Keep the phone topbar on one row, and tighten card corners.

- Force the topbar to a single row and let long player names truncate with an
  ellipsis, so the three-dot menu no longer wraps to a second line.
- Drop the card's outer corner radius from 14px to 9px so it matches the
  scene/panel boxes inside (7-8px) instead of dwarfing them.

web/src/styles.css

@@ -42,7 +42,9 @@
 
   --font-display: 'Lilita One', system-ui, sans-serif;
   --font-body: 'Nunito', system-ui, sans-serif;
-  --card-radius: 14px;
+  /* The card's outer corners echo the smaller radii of the scene/panel boxes
+     inside (7–8px) rather than towering over them. */
+  --card-radius: 9px;
 
   /* Reusable warm shadows so depth stays consistent everywhere. */
   --shadow-card: 0 10px 20px -6px rgba(20, 12, 4, 0.55), 0 2px 4px rgba(20, 12, 4, 0.4);
@@ -2927,10 +2929,12 @@ h3 {
     -webkit-overflow-scrolling: touch;
   }
 
-  /* --- topbar: a slim rail --- */
+  /* --- topbar: a slim rail, forced onto one row --- */
   .topbar {
     gap: 5px 8px;
     padding: 5px 9px;
+    /* Never wrap the ⋯ menu onto a second line — long names truncate instead. */
+    flex-wrap: nowrap;
   }
   /* Drop the wordmark entirely on a phone — the die, the player tags, and the
      ⋯ menu are all that's needed, and losing it helps the rail stay one row. */
@@ -2941,21 +2945,35 @@ h3 {
     width: 23px;
     height: 23px;
   }
-  /* Let the tags pack tight; the ⋯ menu is pushed to the right by margin-auto. */
+  /* Players take the middle and shrink; the die and ⋯ menu stay fixed. */
+  .topbar-round {
+    flex: 0 0 auto;
+  }
   .topbar-players {
-    flex: 0 1 auto;
+    flex: 1 1 auto;
+    min-width: 0;
     gap: 6px;
+    flex-wrap: nowrap;
+  }
+  .topbar-menu {
+    flex: 0 0 auto;
+    margin-left: 4px;
   }
   .topbar-menu-btn {
     padding: 4px 10px;
   }
-  .topbar-round {
+  /* Tags shrink and their names ellipsis so two players + the menu fit one row. */
-    font-size: 0.82rem;
-  }
   .topbar-player {
     padding: 3px 9px;
     font-size: 0.8rem;
     gap: 5px;
+    min-width: 0;
+  }
+  .topbar-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
   }
   .topbar-code {
     font-size: 0.8rem;

web/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/anim.ts","./src/api.ts","./src/main.tsx","./src/petArt.ts","./src/types.ts","./src/useBattleSpeed.ts","./src/useCatalog.ts","./src/useGame.ts","./src/vite-env.d.ts","./src/components/ArrangePhase.tsx","./src/components/BattlePhase.tsx","./src/components/CardView.tsx","./src/components/DebugPanel.tsx","./src/components/DiceRoll.tsx","./src/components/EventLog.tsx","./src/components/GameOver.tsx","./src/components/Home.tsx","./src/components/Lobby.tsx","./src/components/ShopPhase.tsx","./src/components/Table.tsx"],"version":"5.9.3"}
+{"root":["./src/App.tsx","./src/anim.ts","./src/api.ts","./src/main.tsx","./src/petArt.ts","./src/types.ts","./src/useBattleSpeed.ts","./src/useCatalog.ts","./src/useGame.ts","./src/useMediaQuery.ts","./src/vite-env.d.ts","./src/components/ArrangePhase.tsx","./src/components/BattlePhase.tsx","./src/components/CardView.tsx","./src/components/DebugPanel.tsx","./src/components/DiceRoll.tsx","./src/components/EventLog.tsx","./src/components/GameOver.tsx","./src/components/Home.tsx","./src/components/Lobby.tsx","./src/components/ShopPhase.tsx","./src/components/Table.tsx"],"version":"5.9.3"}