Styling

src/App.vue

@@ -2,8 +2,7 @@
   <div class="app" :class="{ suspended: viewerSuspended }">
     <header class="app-header">
       <div>
-        <p class="eyebrow">Music Jeopardy</p>
+        <h1>Music Jeopardy</h1>
-        <h1>Track the Beat, Claim the Points</h1>
       </div>
       <div v-if="step === 'game'" class="selector-pill">
         <span class="label">Selecting</span>
@@ -200,7 +199,7 @@
                   Guessed
                 </span>
                 <span v-else-if="tileStatus(cIndex, qIndex) === 'won'">
-                  Won
+                  {{ winningTeamName(cIndex, qIndex) }}
                 </span>
                 <span v-else>Skipped</span>
               </button>
@@ -1032,6 +1031,13 @@ export default {
       if (!team) return {}
       return this.teamGradient(team)
     },
+    winningTeamName(cIndex: number, qIndex: number) {
+      const key = this.tileKey(cIndex, qIndex)
+      const teamId = this.tiles[key]?.lastTeamId
+      if (!teamId) return 'Won'
+      const team = this.teams.find((candidate) => candidate.id === teamId)
+      return team?.name?.trim() || 'Won'
+    },
     async handleTileClick(cIndex: number, qIndex: number) {
       if (!this.canControlGame) return
       const key = this.tileKey(cIndex, qIndex)

src/styles.css

@@ -75,8 +75,9 @@ code {
 .app-header h1 {
   margin: 0;
   font-family: 'Bebas Neue', sans-serif;
-  font-size: clamp(2.2rem, 2.5vw, 3rem);
+  font-size: clamp(3.1rem, 6vw, 5.2rem);
-  letter-spacing: 0.08em;
+  letter-spacing: 0.1em;
+  line-height: 0.95;
 }
 
 .eyebrow {
@@ -444,6 +445,9 @@ button {
 .tile.won {
   background: #2a2f3f;
   color: #0d0f1c;
+  font-size: 0.95rem;
+  line-height: 1.2;
+  word-break: break-word;
 }
 
 .tile.void {