🐐

frontend/src/routes/play/+page.svelte

@@ -304,6 +304,7 @@
   {#if phase === 'idle'}
     <div class="lobby">
       <h1 class="lobby-title">Find a Match</h1>
+      <a href="/how-to-play" class="how-to-play-link">How to Play</a>
       {#if decks.length === 0}
         <p class="lobby-hint">You need a deck to play. <a href="/decks">Build one first.</a></p>
       {:else}
@@ -538,6 +539,18 @@
   .lobby-title.win  { color: #6aaa6a; }
   .lobby-title.lose { color: #c85050; }
 
+  .how-to-play-link {
+    font-family: 'Crimson Text', serif;
+    font-size: 14px;
+    font-style: italic;
+    color: rgba(240, 180, 80, 0.4);
+    text-decoration: underline;
+    transition: color 0.15s;
+    margin-top: -1rem;
+    padding-bottom: 20px;
+  }
+  .how-to-play-link:hover { color: rgba(240, 180, 80, 0.7); }
+
   .lobby-hint {
     font-family: 'Crimson Text', serif;
     font-size: 16px;
@@ -643,6 +656,8 @@
     color: #c85050;
     margin: 0;
     height: 1.4em;
+    margin-top: -1rem;
+    margin-bottom: -1rem;
   }
 
   .spinner {