Combine Rules and Admin corner links into one upper-right menu

Replace the fixed Rules link (upper-left) and the creator-only Admin
link (upper-right) with a single collapsible ☰ Menu in the upper right,
leaving the event log alone in its corner. CornerMenu always lists the
Rules link; pages can contribute context-specific entries through the
extraMenuLinks store, which Dashboard uses for the creator-only Admin
link. This gives future misc sub-pages a home without eating more
screen corners.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/App.svelte

@@ -4,6 +4,7 @@
     import Join from './pages/Join.svelte';
     import Dashboard from './pages/Dashboard.svelte';
     import Admin from './pages/Admin.svelte';
+    import CornerMenu from './components/CornerMenu.svelte';
 
     const routes = {
         '/': Home,
@@ -15,26 +16,5 @@
 
 <main>
     <Router {routes} />
-    <a class="rules-corner-link" href="/rules" target="_blank" rel="noopener" title="Open the rulebook in a new tab">📖 Rules</a>
+    <CornerMenu />
 </main>
-
-<style>
-    .rules-corner-link {
-        position: fixed;
-        top: 12px;
-        left: 16px;
-        z-index: 1001;
-        padding: 6px 14px;
-        border-radius: 16px;
-        background: rgba(10, 15, 25, 0.9);
-        border: 1px solid var(--glass-border-focus);
-        color: var(--neon-cyan);
-        font-size: 0.85rem;
-        font-weight: 700;
-        text-decoration: none;
-        font-family: var(--font-heading);
-    }
-    .rules-corner-link:hover {
-        background: rgba(0, 242, 254, 0.1);
-    }
-</style>

frontend/src/components/CornerMenu.svelte

@@ -0,0 +1,87 @@
+<script>
+    import { extraMenuLinks } from '../lib/menu';
+
+    let open = false;
+
+    const baseLinks = [
+        { label: '📖 Rules', href: '/rules', external: true, title: 'Open the rulebook in a new tab' },
+    ];
+
+    $: links = [...$extraMenuLinks, ...baseLinks];
+
+    function handleWindowClick(event) {
+        if (open && !event.target.closest('.corner-menu')) {
+            open = false;
+        }
+    }
+</script>
+
+<svelte:window on:click={handleWindowClick} />
+
+<div class="corner-menu">
+    <button class="menu-toggle" class:open on:click={() => (open = !open)} title="Menu">
+        ☰ Menu
+    </button>
+    {#if open}
+        <nav class="menu-dropdown">
+            {#each links as link}
+                <a
+                    href={link.href}
+                    target={link.external ? '_blank' : undefined}
+                    rel={link.external ? 'noopener' : undefined}
+                    title={link.title}
+                    on:click={() => (open = false)}
+                >{link.label}</a>
+            {/each}
+        </nav>
+    {/if}
+</div>
+
+<style>
+    .corner-menu {
+        position: fixed;
+        top: 12px;
+        right: 16px;
+        z-index: 1001;
+        text-align: right;
+    }
+    .menu-toggle {
+        padding: 6px 14px;
+        border-radius: 16px;
+        background: rgba(10, 15, 25, 0.9);
+        border: 1px solid var(--glass-border-focus);
+        color: var(--neon-cyan);
+        font-size: 0.85rem;
+        font-weight: 700;
+        font-family: var(--font-heading);
+        cursor: pointer;
+    }
+    .menu-toggle:hover, .menu-toggle.open {
+        background: rgba(0, 242, 254, 0.1);
+    }
+    .menu-dropdown {
+        margin-top: 6px;
+        display: flex;
+        flex-direction: column;
+        background: rgba(10, 15, 25, 0.95);
+        border: 1px solid var(--glass-border-focus);
+        border-radius: 12px;
+        overflow: hidden;
+    }
+    .menu-dropdown a {
+        padding: 8px 16px;
+        color: var(--neon-cyan);
+        font-size: 0.85rem;
+        font-weight: 700;
+        text-decoration: none;
+        font-family: var(--font-heading);
+        text-align: right;
+        white-space: nowrap;
+    }
+    .menu-dropdown a:hover {
+        background: rgba(0, 242, 254, 0.1);
+    }
+    .menu-dropdown a + a {
+        border-top: 1px solid rgba(0, 242, 254, 0.15);
+    }
+</style>

frontend/src/lib/menu.js

@@ -0,0 +1,6 @@
+import { writable } from 'svelte/store';
+
+// Extra entries for the corner menu, set by pages that have context-specific
+// links (e.g. Dashboard adds the creator-only Admin link). Each entry is
+// { label, href, external?, title? }.
+export const extraMenuLinks = writable([]);

frontend/src/pages/Dashboard.svelte

@@ -1,7 +1,8 @@
 <script>
     import { onMount, onDestroy } from 'svelte';
     import { apiRequest } from '../lib/api';
-    
+    import { extraMenuLinks } from '../lib/menu';
+
     import LobbyPhase from '../components/LobbyPhase.svelte';
     import CharacterCreationPhase from '../components/CharacterCreationPhase.svelte';
     import SceneSetupPhase from '../components/SceneSetupPhase.svelte';
@@ -34,8 +35,16 @@
         intervalId = setInterval(fetchState, 2000);
     });
 
+    // Surface the creator-only Admin link in the corner menu
+    $: extraMenuLinks.set(
+        state?.player?.is_creator
+            ? [{ label: '🛠️ Admin', href: `#/game/${gameId}/admin`, title: 'Open the Admin Panel' }]
+            : []
+    );
+
     onDestroy(() => {
         if (intervalId) clearInterval(intervalId);
+        extraMenuLinks.set([]);
     });
 </script>
 
@@ -65,10 +74,6 @@
     </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>
@@ -76,24 +81,6 @@
 {/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;

src/pirats/rules.html

@@ -165,6 +165,9 @@ a { color: var(--neon-cyan); }
 
 .rules-body details[open] summary { margin-bottom: 0.75rem; }
 
+.rules-body details { scroll-margin-top: 1rem; }
+.rules-body summary h3 { display: inline; margin: 0; }
+
 .signature { color: var(--gold); font-style: italic; }
 
 .back-to-top { text-align: center; }
@@ -669,7 +672,8 @@ a { color: var(--neon-cyan); }
             pile! Players are encouraged to have a real life party as well! An absolute rager would be
             preferred, but a small celebration is acceptable.</p>
 
-            <h3 id="obstacles">The Obstacle List &amp; Type Charts</h3>
+            <details id="obstacles">
+            <summary><h3>The Obstacle List &amp; Type Charts</h3> <span class="aside">(click to expand — the app handles these automatically)</span></summary>
             <p>The Obstacle List tracks all potential threats and difficulties facing the Pi-Rats, and is
             made up of one or more cards from the deck that have been placed face up on a surface visible to
             all Players. After a Player plays a card during a Challenge, that card is placed in a column
@@ -764,6 +768,7 @@ a { color: var(--neon-cyan); }
                     <tr><th>K</th><td><strong>It's Alive</strong> — The ship is brought to life through magical means. It's not going to cooperate without an incentive, now that it has its own wants and needs.</td></tr>
                 </tbody>
             </table>
+            </details>
 
             <h3 id="challenges">Resolving Challenges</h3>
             <p>During the course of a Scene, Pi-Rats will eventually be challenged by the Deep using the
@@ -1300,5 +1305,15 @@ a { color: var(--neon-cyan); }
         <p class="back-to-top"><a class="top-link" href="#introduction">⬆ Back to top</a></p>
     </article>
 </div>
+<script>
+// Expand the collapsed obstacle reference when the TOC link (or a deep link) targets it
+function openObstaclesForHash() {
+    if (location.hash === '#obstacles') {
+        document.getElementById('obstacles').open = true;
+    }
+}
+window.addEventListener('hashchange', openObstaclesForHash);
+openObstaclesForHash();
+</script>
 </body>
 </html>