Fable will fix it! Pt 3

frontend/src/pages/Admin.svelte

@@ -53,7 +53,8 @@
             <table class="w-full text-left bg-dark-900 rounded border border-gray-700">
                 <thead>
                     <tr class="border-b border-gray-700">
-                        <th class="p-3">Name</th>
+                        <th class="p-3">Pi-Rat</th>
+                        <th class="p-3">Player</th>
                         <th class="p-3">Role</th>
                         <th class="p-3">Status</th>
                         <th class="p-3">Rank</th>
@@ -63,6 +64,7 @@
                     {#each data.players as p}
                         <tr class="border-b border-gray-800">
                             <td class="p-3">{p.name}</td>
+                            <td class="p-3">{p.player_name || p.name}</td>
                             <td class="p-3">
                                 {#if p.role === 'deep'} 🌊 Deep
                                 {:else if p.role === 'pirat'} 🐀 Pi-Rat

frontend/src/pages/Dashboard.svelte

@@ -8,6 +8,7 @@
     import ScenePhase from '../components/ScenePhase.svelte';
     import UpkeepPhase from '../components/UpkeepPhase.svelte';
     import GameOverPhase from '../components/GameOverPhase.svelte';
+    import EventLog from '../components/EventLog.svelte';
 
     export let params = {};
     let gameId = params.id;
@@ -62,6 +63,12 @@
             <div class="card p-4">Unknown phase: {state.game.phase}</div>
         {/if}
     </div>
+
+    <EventLog {state} />
+
+    {#if state.player.is_creator}
+        <a class="admin-corner-link" href="#/game/{gameId}/admin" title="Open the Admin Panel">🛠️ Admin</a>
+    {/if}
 {:else if !error}
     <div class="loading-container">
         <p>Loading game state...</p>
@@ -69,6 +76,24 @@
 {/if}
 
 <style>
+    .admin-corner-link {
+        position: fixed;
+        top: 12px;
+        right: 16px;
+        z-index: 1001;
+        padding: 6px 14px;
+        border-radius: 16px;
+        background: rgba(10, 15, 25, 0.9);
+        border: 1px solid var(--gold, #d4af37);
+        color: var(--gold, #d4af37);
+        font-size: 0.85rem;
+        font-weight: 700;
+        text-decoration: none;
+        font-family: var(--font-heading);
+    }
+    .admin-corner-link:hover {
+        background: rgba(212, 175, 55, 0.15);
+    }
     .loading-container {
         display: flex;
         justify-content: center;

frontend/src/pages/Join.svelte

@@ -31,7 +31,11 @@
     </div>
 
     <div class="card creation-card">
-        <h2>Enter your Pi-Rat name</h2>
+        <h2>Enter your name</h2>
+        <p class="info-text" style="margin-bottom: 1rem;">
+            This is <strong>your</strong> name as a player, not your Pi-Rat's. Your Pi-Rat will be known
+            by their smell (e.g. "Recruit Gunpowder") until they earn a proper Name in play.
+        </p>
         <form on:submit|preventDefault={joinGame}>
             <div class="form-group">
                 <label for="playerName">Your Name</label>