Create the dashboard

src/routes/dashboard/+page.svelte

@@ -0,0 +1,234 @@
+<script>
+    import "$lib/global.css";
+    import DashboardNav from "./DashboardNav.svelte";
+</script>
+
+<div class="dashboard">
+
+    <DashboardNav />
+
+    <main>
+        <div class="welcome">
+            <div class="welcome-glow"></div>
+            <h1>Welcome back.</h1>
+            <p class="subtitle">Pick up where you left off, or start something new.</p>
+        </div>
+
+        <div class="actions">
+            <a href="/dashboard/tokens" class="card card-tokens">
+                <div class="card-icon">
+                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="12" cy="12" r="10"/>
+                        <path d="M12 6v12M9 9h4.5a2.5 2.5 0 0 1 0 5H9"/>
+                    </svg>
+                </div>
+                <div class="card-body">
+                    <h2>Add Tokens</h2>
+                    <p>Top up your balance to fuel your next adventure. Pay only for what you use.</p>
+                </div>
+                <div class="card-arrow">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M5 12h14M12 5l7 7-7 7"/>
+                    </svg>
+                </div>
+            </a>
+
+            <a href="/dashboard/games" class="card card-games">
+                <div class="card-icon">
+                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
+                        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
+                        <path d="M8 7h8M8 11h5"/>
+                    </svg>
+                </div>
+                <div class="card-body">
+                    <h2>My Games</h2>
+                    <p>Browse your ongoing campaigns and completed adventures.</p>
+                </div>
+                <div class="card-arrow">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M5 12h14M12 5l7 7-7 7"/>
+                    </svg>
+                </div>
+            </a>
+        </div>
+    </main>
+
+</div>
+
+<style>
+    .dashboard {
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        background: #0b0b10;
+    }
+
+
+    /* ── Main ── */
+    main {
+        flex: 1;
+        max-width: 860px;
+        width: 100%;
+        margin: 0 auto;
+        padding: 4rem 2rem 6rem;
+    }
+
+    /* ── Welcome ── */
+    .welcome {
+        position: relative;
+        margin-bottom: 3.5rem;
+        overflow: hidden;
+    }
+
+    .welcome-glow {
+        position: absolute;
+        top: -60px;
+        left: -80px;
+        width: 400px;
+        height: 300px;
+        background: radial-gradient(ellipse, rgba(192, 132, 252, 0.12) 0%, transparent 70%);
+        pointer-events: none;
+    }
+
+    .eyebrow {
+        font-size: 0.75rem;
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: #c084fc;
+        margin-bottom: 0.75rem;
+    }
+
+    h1 {
+        font-size: clamp(2.4rem, 6vw, 3.5rem);
+        font-weight: 800;
+        letter-spacing: -2px;
+        color: #e5e5ea;
+        line-height: 1.05;
+        margin-bottom: 1rem;
+    }
+
+    .subtitle {
+        font-size: 1.05rem;
+        color: #6b6b7a;
+        max-width: 440px;
+    }
+
+    /* ── Action cards ── */
+    .actions {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1.25rem;
+    }
+
+    .card {
+        display: flex;
+        flex-direction: column;
+        gap: 1.25rem;
+        padding: 2rem;
+        border-radius: 16px;
+        border: 1px solid #1e1e28;
+        background: #0f0f18;
+        text-decoration: none;
+        color: inherit;
+        position: relative;
+        overflow: hidden;
+        transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
+    }
+
+    .card::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        transition: opacity 0.2s;
+        border-radius: inherit;
+    }
+
+    .card-tokens::before {
+        background: radial-gradient(ellipse at top left, rgba(192, 132, 252, 0.08) 0%, transparent 70%);
+    }
+
+    .card-games::before {
+        background: radial-gradient(ellipse at top left, rgba(90, 90, 255, 0.08) 0%, transparent 70%);
+    }
+
+    .card:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.5);
+    }
+
+    .card-tokens:hover {
+        border-color: #c084fc;
+    }
+
+    .card-games:hover {
+        border-color: #5a5aff;
+    }
+
+    .card:hover::before {
+        opacity: 1;
+    }
+
+    .card-icon {
+        width: 56px;
+        height: 56px;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    .card-tokens .card-icon {
+        background: rgba(192, 132, 252, 0.1);
+        color: #c084fc;
+    }
+
+    .card-games .card-icon {
+        background: rgba(90, 90, 255, 0.1);
+        color: #7a7aff;
+    }
+
+    .card-body {
+        flex: 1;
+    }
+
+    .card-body h2 {
+        font-size: 1.2rem;
+        font-weight: 700;
+        color: #e5e5ea;
+        margin-bottom: 0.5rem;
+        letter-spacing: -0.3px;
+    }
+
+    .card-body p {
+        font-size: 0.9rem;
+        color: #6b6b7a;
+        line-height: 1.5;
+    }
+
+    .card-arrow {
+        color: #3a3a50;
+        align-self: flex-end;
+        transition: color 0.2s, transform 0.2s;
+    }
+
+    .card:hover .card-arrow {
+        transform: translateX(4px);
+    }
+
+    .card-tokens:hover .card-arrow { color: #c084fc; }
+    .card-games:hover .card-arrow  { color: #7a7aff; }
+
+    @media (max-width: 600px) {
+        .actions {
+            grid-template-columns: 1fr;
+        }
+
+        main {
+            padding: 2.5rem 1.25rem 4rem;
+        }
+    }
+</style>

src/routes/dashboard/DashboardNav.svelte

@@ -0,0 +1,62 @@
+<script>
+    import favicon from "$lib/assets/favicon.png";
+</script>
+
+<header>
+    <a href="/dashboard" class="logo">
+        <img src={favicon} alt="ChatRPG logo" width="32" height="32" />
+        <span>ChatRPG</span>
+    </a>
+    <nav>
+        <a href="/dashboard/tokens" class="nav-link">Tokens</a>
+        <a href="/dashboard/games" class="nav-link">Games</a>
+    </nav>
+</header>
+
+<style>
+    header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 2rem;
+        height: 64px;
+        border-bottom: 1px solid #1e1e28;
+        position: sticky;
+        top: 0;
+        background: rgba(11, 11, 16, 0.85);
+        backdrop-filter: blur(12px);
+        z-index: 50;
+    }
+
+    .logo {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        text-decoration: none;
+        color: #e5e5ea;
+        font-weight: 700;
+        font-size: 18px;
+        letter-spacing: -0.5px;
+    }
+
+    nav {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+    }
+
+    .nav-link {
+        padding: 0.4rem 0.9rem;
+        border-radius: 8px;
+        font-size: 0.9rem;
+        font-weight: 500;
+        color: #a1a1aa;
+        text-decoration: none;
+        transition: background 0.15s, color 0.15s;
+    }
+
+    .nav-link:hover {
+        background: #1a1a24;
+        color: #e5e5ea;
+    }
+</style>