diff --git a/src/client/GameModeSelector.ts b/src/client/GameModeSelector.ts
index 07c6d0feb..a65853313 100644
--- a/src/client/GameModeSelector.ts
+++ b/src/client/GameModeSelector.ts
@@ -299,7 +299,7 @@ export class GameModeSelector extends LitElement {
     return html`
       <button
         @click=${() => this.validateAndJoin(lobby)}
-        class="group relative w-full h-44 sm:h-full text-white uppercase rounded-2xl transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98] bg-surface"
+        class="group relative w-full h-44 sm:h-full text-white uppercase rounded-2xl transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] bg-surface hover:shadow-[var(--shadow-lobby-card-hover)]"
       >
         <!-- Image clipped separately so overflow-hidden doesn't block absolute children -->
         <div
diff --git a/src/client/styles.css b/src/client/styles.css
index 3e1db2116..4232caf91 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -31,6 +31,7 @@
   --shadow-malibu-blue-pill: 0 0 6px rgba(0, 132, 209, 0.35);
   --shadow-malibu-blue-ring-sm: 0 0 0 4px rgba(0, 132, 209, 0.2);
   --shadow-malibu-blue-ring-lg: 0 0 0 6px rgba(0, 132, 209, 0.3);
+  --shadow-lobby-card-hover: 0 0 0 2px #0084d1, 0 0 20px rgba(0, 132, 209, 0.5);
 }
 
 @layer base {