From 1e06ee34f2be6015fa6b02d06dfd257a258285a1 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Sat, 11 Apr 2026 09:57:39 +0100
Subject: [PATCH 1/6] =?UTF-8?q?fix:=20v4=20polish=20=E2=80=94=20mobile=20n?=
 =?UTF-8?q?avbar,=20icons,=20modals,=20semantic=20unlimited?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Post-squash-merge fixes on top of the v4 feature branch:

- Mobile header: hide profile+settings below sm (sidebar-only)
- Trophy → BarChart2 for game results toggle
- Sidebar statistics → ChartNoAxesCombined icon
- Streak badge opens modal on all pages (not just game pages)
- StreakModal: sign-in CTA, shared StreakCalendar component
- SettingsModal: use login modal instead of direct Google auth
- Profile: remove passkey button, scroll to #badges hash
- Homepage: remove misleading per-card streak
- Semantic: unlimited mode (random target), Keep Playing/Play Again
- Semantic: daily revisit auto-opens modal, fix map clipping
- Page keys include play type for proper remount
- "Unlimited" accent color in header subtitle
---
 .github/workflows/test.yml                 |   9 +
 CONTRIBUTING.md                            |   1 +
 components/app/AppHeader.vue               |  19 +-
 components/app/AppShell.vue                |   6 +-
 components/app/AppSidebar.vue              |   6 +-
 components/app/SidebarItem.vue             |   2 +
 components/game/SettingsModal.vue          |  15 +-
 components/game/StreakModal.vue            | 218 ++--------------
 components/semantic/SemanticStatsModal.vue |  53 ++--
 components/shared/StreakCalendar.vue       | 280 +++++++++++++++++++++
 composables/useSemanticGame.ts             |   5 +-
 nuxt.config.ts                             |   7 +
 package.json                               |   2 +-
 pages/[lang]/semantic.vue                  |  24 +-
 pages/[lang]/speed.vue                     |   2 +-
 pages/index.vue                            |  17 +-
 pages/profile.vue                          | 234 ++---------------
 server/api/[lang]/semantic/start.post.ts   |   5 +-
 server/utils/prisma.ts                     |   3 +
 tests/setup-server.ts                      |  18 +-
 utils/streak-dates.ts                      |  20 +-
 21 files changed, 466 insertions(+), 480 deletions(-)
 create mode 100644 components/shared/StreakCalendar.vue

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index c3c6cc7c..6baa627a 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -80,6 +80,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Generate Prisma client
+        run: pnpm db:generate
+
       - name: Build Nuxt (pre-compiled server avoids 50s+ Nitro JIT)
         run: pnpm build
 
@@ -106,6 +109,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Generate Prisma client
+        run: pnpm db:generate
+
       - name: Build Nuxt
         run: pnpm build
 
@@ -142,5 +148,8 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Generate Prisma client
+        run: pnpm db:generate
+
       - name: Build
         run: pnpm build
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 8181a4e8..74e57126 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -172,6 +172,7 @@ All SEO content (FAQ, HowTo, tips, value props, section headings) lives in the `
 
 ## Don't
 
+- **NEVER push to `main` without explicit user permission.** `main` auto-deploys to production on Render. Every push causes a multi-minute 502 outage for hundreds of active users. Work on feature branches; the user decides when to merge.
 - Change the daily word algorithm — breaks word selection globally
 - Add console.logs to production code
 - Modify `.nuxt/` or `.output/` manually (auto-generated)
diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue
index abbaa5b6..a688d038 100644
--- a/components/app/AppHeader.vue
+++ b/components/app/AppHeader.vue
@@ -64,7 +64,11 @@
                         border: 1px solid rgba(0, 0, 0, 0.1);
                     "
                 />
-                {{ subtitle }}
+                <template v-if="subtitle!.includes('Unlimited')">
+                    {{ subtitle!.replace('Unlimited', '')
+                    }}<span class="text-accent">Unlimited</span>
+                </template>
+                <template v-else>{{ subtitle }}</template>
             </button>
         </div>
 
@@ -84,13 +88,14 @@
                 aria-label="Game results"
                 @click="$emit('results')"
             >
-                <Trophy :size="20" aria-hidden="true" />
+                <BarChart2 :size="20" aria-hidden="true" />
             </button>
+            <!-- Profile + Settings: hidden on mobile (accessible via sidebar) -->
             <ClientOnly>
                 <NuxtLink
                     v-if="loggedIn"
                     to="/profile"
-                    class="p-2 text-muted hover:text-ink transition-colors"
+                    class="hidden sm:flex p-2 text-muted hover:text-ink transition-colors"
                     aria-label="Profile"
                 >
                     <img
@@ -104,18 +109,18 @@
                 </NuxtLink>
                 <button
                     v-else
-                    class="p-2 text-muted hover:text-ink transition-colors"
+                    class="hidden sm:flex p-2 text-muted hover:text-ink transition-colors"
                     aria-label="Sign in"
                     @click="openLoginModal()"
                 >
                     <User :size="20" aria-hidden="true" />
                 </button>
                 <template #fallback>
-                    <span class="p-2 text-muted"><User :size="20" /></span>
+                    <span class="hidden sm:flex p-2 text-muted"><User :size="20" /></span>
                 </template>
             </ClientOnly>
             <button
-                class="p-2 text-muted hover:text-ink transition-colors"
+                class="hidden sm:flex p-2 text-muted hover:text-ink transition-colors"
                 aria-label="Settings"
                 @click="$emit('settings')"
             >
@@ -126,7 +131,7 @@
 </template>
 
 <script setup lang="ts">
-import { Info, Menu, Settings, Trophy, User } from 'lucide-vue-next';
+import { Info, Menu, Settings, BarChart2, User } from 'lucide-vue-next';
 
 const { loggedIn, avatarUrl } = useAuth();
 const { openLoginModal } = useLoginModal();
diff --git a/components/app/AppShell.vue b/components/app/AppShell.vue
index b252db67..d1d54074 100644
--- a/components/app/AppShell.vue
+++ b/components/app/AppShell.vue
@@ -31,7 +31,7 @@
                     :show-streak="true"
                     :streak-count="streakCount"
                     @toggle-sidebar="sidebarOpen = !sidebarOpen"
-                    @streak="navigateTo('/profile')"
+                    @streak="showStreakModal = true"
                     @settings="showSettings = !showSettings"
                 />
             </div>
@@ -43,6 +43,9 @@
              is always available. Game-specific options (difficulty) are inert
              when no game is active. Labels fall back to English. -->
         <GameSettingsModal :visible="showSettings" @close="showSettings = false" />
+
+        <!-- Streak modal — available on all pages -->
+        <GameStreakModal :visible="showStreakModal" @close="showStreakModal = false" />
     </div>
 </template>
 
@@ -75,6 +78,7 @@ const props = withDefaults(
 
 const sidebarOpen = ref(false);
 const showSettings = ref(false);
+const showStreakModal = ref(false);
 
 // Product-wide streak — single source via composable (client-only, returns 0 during SSR)
 const { streak: streakCount } = useProductStreak();
diff --git a/components/app/AppSidebar.vue b/components/app/AppSidebar.vue
index 2edf2540..f1a486a2 100644
--- a/components/app/AppSidebar.vue
+++ b/components/app/AppSidebar.vue
@@ -234,7 +234,11 @@
                 <!-- You section -->
                 <div class="py-4 editorial-rule">
                     <div class="mono-label px-6 pb-2">You</div>
-                    <SidebarItem icon="BarChart2" label="Statistics" href="/profile#statistics" />
+                    <SidebarItem
+                        icon="ChartNoAxesCombined"
+                        label="Statistics"
+                        href="/profile#statistics"
+                    />
                     <SidebarItem icon="Award" label="Badges" href="/profile#badges" />
                     <SidebarItem icon="Calendar" label="Archive" :href="`/${langCode}/archive`" />
                     <SidebarItem
diff --git a/components/app/SidebarItem.vue b/components/app/SidebarItem.vue
index b6cedd45..1ff2ed70 100644
--- a/components/app/SidebarItem.vue
+++ b/components/app/SidebarItem.vue
@@ -56,6 +56,7 @@ import {
     Zap,
     Compass,
     BarChart2,
+    ChartNoAxesCombined,
     Award,
     Calendar,
     Settings,
@@ -92,6 +93,7 @@ const iconMap: Record<string, any> = {
     Zap,
     Compass,
     BarChart2,
+    ChartNoAxesCombined,
     Award,
     Calendar,
     Settings,
diff --git a/components/game/SettingsModal.vue b/components/game/SettingsModal.vue
index 6006a5ce..7b88b8e0 100644
--- a/components/game/SettingsModal.vue
+++ b/components/game/SettingsModal.vue
@@ -225,9 +225,12 @@
                 <div v-else>
                     <button
                         class="w-full px-4 py-2 bg-ink text-paper text-sm font-semibold rounded-md hover:opacity-90 transition-opacity"
-                        @click="authLoginWithGoogle()"
+                        @click="
+                            $emit('close');
+                            openLoginModal();
+                        "
                     >
-                        Sign in with Google
+                        Sign in
                     </button>
                     <p class="text-xs text-center text-muted mt-1">Sync settings across devices</p>
                 </div>
@@ -249,12 +252,8 @@ defineEmits<{ close: [] }>();
 const settings = useSettingsStore();
 const lang = useLanguageStore();
 const game = useGameStore();
-const {
-    loggedIn: authLoggedIn,
-    user: authUser,
-    loginWithGoogle: authLoginWithGoogle,
-    logout: authLogout,
-} = useAuth();
+const { loggedIn: authLoggedIn, user: authUser, logout: authLogout } = useAuth();
+const { openLoginModal } = useLoginModal();
 
 /** Easy mode (allow any word) — synced with game store. */
 const allowAnyWord = computed({
diff --git a/components/game/StreakModal.vue b/components/game/StreakModal.vue
index b71fa9ea..1bd09421 100644
--- a/components/game/StreakModal.vue
+++ b/components/game/StreakModal.vue
@@ -11,64 +11,21 @@
                     {{ currentStreak }}
                 </div>
                 <div class="mono-label mt-1">Day Streak</div>
-                <p class="text-xs text-muted mt-2">
-                    {{ motivationalText }}
+                <p
+                    class="text-xs text-muted italic mt-1.5"
+                    style="font-family: var(--font-display)"
+                >
+                    Any daily mode, any language
                 </p>
             </div>
 
             <div class="editorial-rule" />
 
-            <!-- Calendar heatmap: rolling 28 days -->
+            <!-- Calendar heatmap (shared component) -->
             <div class="py-3">
-                <div class="mono-label mb-2" style="font-size: 9px; letter-spacing: 0.15em">
-                    Last 28 Days
-                </div>
-                <div
-                    class="grid grid-cols-7 gap-0.5 mb-1"
-                    style="font-family: var(--font-mono); font-size: 8px; color: var(--color-muted)"
-                >
-                    <span
-                        v-for="(d, i) in ['M', 'T', 'W', 'T', 'F', 'S', 'S']"
-                        :key="i"
-                        class="text-center"
-                    >
-                        {{ d }}
-                    </span>
-                </div>
-                <div class="grid grid-cols-7 gap-0.5">
-                    <div
-                        v-for="(day, i) in calendarDays"
-                        :key="i"
-                        class="aspect-square rounded-sm flex items-center justify-center"
-                        :class="calendarDayClass(day)"
-                        style="
-                            font-family: var(--font-mono);
-                            font-size: 9px;
-                            color: var(--color-muted);
-                        "
-                    >
-                        <span v-if="day.date">{{ day.date }}</span>
-                    </div>
-                </div>
-                <!-- Legend -->
-                <div
-                    class="flex gap-3 mt-2 justify-center"
-                    style="font-size: 9px; color: var(--color-muted); font-family: var(--font-mono)"
-                >
-                    <span class="flex items-center gap-1"
-                        ><span class="w-2 h-2 rounded-sm bg-correct-soft inline-block" /> Won</span
-                    >
-                    <span class="flex items-center gap-1"
-                        ><span
-                            class="w-2 h-2 rounded-sm inline-block"
-                            style="background: var(--color-accent-soft, #e8d5d0)"
-                        />
-                        Lost</span
-                    >
-                    <span class="flex items-center gap-1"
-                        ><span class="w-2 h-2 rounded-sm bg-muted-soft inline-block" /> Missed</span
-                    >
-                </div>
+                <SharedStreakCalendar
+                    :game-results="statsStore.gameResults as Record<string, GameResult[]>"
+                />
             </div>
 
             <div class="editorial-rule" />
@@ -95,75 +52,33 @@
                 </div>
             </div>
 
-            <!-- Per-language breakdown: wins, not streaks -->
-            <div v-if="languageWins.length > 0" class="pt-3">
-                <div class="editorial-rule mb-3" />
-                <div class="mono-label mb-2" style="font-size: 9px; letter-spacing: 0.15em">
-                    Wins by Language
-                </div>
-                <div class="space-y-1.5">
-                    <div
-                        v-for="lw in visibleLanguageWins"
-                        :key="lw.lang"
-                        class="flex items-center justify-between text-sm"
-                    >
-                        <span class="flex items-center gap-1.5 text-ink capitalize">
-                            <img
-                                v-if="flagSrc(lw.lang)"
-                                :src="flagSrc(lw.lang)!"
-                                :alt="lw.lang"
-                                class="w-4 h-4 rounded-full"
-                            />
-                            {{ lw.lang }}
-                        </span>
-                        <span class="font-mono text-xs text-muted">
-                            {{ lw.wins }} {{ lw.wins === 1 ? 'win' : 'wins' }}
-                            <span v-if="lw.games > lw.wins" class="text-muted/60"
-                                >/ {{ lw.games }} played</span
-                            >
-                        </span>
-                    </div>
-                </div>
+            <!-- Sign-in CTA (logged out only) -->
+            <ClientOnly>
                 <button
-                    v-if="languageWins.length > 5"
-                    class="w-full text-center text-xs text-muted hover:text-ink transition-colors mt-2 py-1"
-                    style="font-family: var(--font-mono); letter-spacing: 0.05em"
-                    @click="showAllLangs = !showAllLangs"
+                    v-if="!loggedIn"
+                    class="w-full mt-3 px-4 py-2.5 bg-ink text-paper text-sm font-semibold rounded-md hover:opacity-90 transition-opacity"
+                    @click="
+                        $emit('close');
+                        openLoginModal();
+                    "
                 >
-                    {{ showAllLangs ? 'Show less' : `+${languageWins.length - 5} more` }}
+                    Sign in to protect your streak
                 </button>
-            </div>
-
-            <!-- Footer note -->
-            <div class="pt-3 mt-3 border-t border-rule">
-                <p class="text-[11px] text-muted text-center">
-                    Streak counts classic daily puzzles in any language.
-                    <br />
-                    Play once a day to keep it going.
-                </p>
-            </div>
+            </ClientOnly>
         </div>
     </SharedBaseModal>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { Flame } from 'lucide-vue-next';
-import { useFlag } from '~/composables/useFlag';
-import { toLocalDay, buildDailyResultMap } from '~/utils/streak-dates';
+import type { GameResult } from '~/utils/types';
 
 defineProps<{ visible: boolean }>();
 defineEmits<{ close: [] }>();
 
-// Memoized flag lookup
-const _flagCache = new Map<string, string | null>();
-function flagSrc(code: string): string | null {
-    if (_flagCache.has(code)) return _flagCache.get(code)!;
-    const f = useFlag(code);
-    _flagCache.set(code, f);
-    return f;
-}
-
+const { loggedIn } = useAuth();
+const { openLoginModal } = useLoginModal();
 const game = useGameStore();
 const statsStore = useStatsStore();
 
@@ -179,91 +94,4 @@ const motivationalText = computed(() => {
     if (s < 100) return 'Incredible dedication.';
     return 'Legendary.';
 });
-
-// --- Calendar heatmap: rolling 28 days ---
-
-interface CalendarDay {
-    date: number | null;
-    state: 'won' | 'lost' | 'missed' | 'today' | 'future' | 'empty';
-}
-
-function calendarDayClass(day: CalendarDay): string {
-    switch (day.state) {
-        case 'won':
-            return 'bg-correct-soft';
-        case 'lost':
-            return 'cal-lost';
-        case 'missed':
-            return 'bg-muted-soft';
-        case 'today':
-            return 'outline outline-2 outline-ink -outline-offset-1';
-        default:
-            return '';
-    }
-}
-
-const calendarDays = computed<CalendarDay[]>(() => {
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
-
-    const dayStates = buildDailyResultMap(statsStore.gameResults);
-
-    // Find the Monday that starts our 28-day window
-    // We want 4 complete weeks ending with today's week
-    const todayDow = (today.getDay() + 6) % 7; // Mon=0
-    const endOfWeek = new Date(today);
-    endOfWeek.setDate(endOfWeek.getDate() + (6 - todayDow)); // Sunday of this week
-    const startDate = new Date(endOfWeek);
-    startDate.setDate(startDate.getDate() - 27); // 28 days total
-
-    const days: CalendarDay[] = [];
-    const todayKey = toLocalDay(today);
-
-    for (let i = 0; i < 28; i++) {
-        const d = new Date(startDate);
-        d.setDate(d.getDate() + i);
-        const dayKey = toLocalDay(d);
-        const isToday = dayKey === todayKey;
-        const isFuture = d > today;
-
-        let state: CalendarDay['state'];
-        if (isToday) {
-            // Today: show won/lost if played, otherwise 'today' (outline)
-            const played = dayStates.get(dayKey);
-            state = played || 'today';
-        } else if (isFuture) {
-            state = 'future';
-        } else {
-            const played = dayStates.get(dayKey);
-            state = played || 'missed';
-        }
-
-        days.push({ date: d.getDate(), state });
-    }
-
-    return days;
-});
-
-// --- Per-language wins (not streaks) ---
-const showAllLangs = ref(false);
-
-const languageWins = computed(() => {
-    const result: { lang: string; wins: number; games: number }[] = [];
-    for (const [lang, stats] of Object.entries(statsStore.totalStats.game_stats)) {
-        if (stats.n_games > 0) {
-            result.push({ lang, wins: stats.n_wins, games: stats.n_games });
-        }
-    }
-    return result.sort((a, b) => b.wins - a.wins);
-});
-
-const visibleLanguageWins = computed(() =>
-    showAllLangs.value ? languageWins.value : languageWins.value.slice(0, 5)
-);
 </script>
-
-<style scoped>
-.cal-lost {
-    background: var(--color-accent-soft, #e8d5d0);
-}
-</style>
diff --git a/components/semantic/SemanticStatsModal.vue b/components/semantic/SemanticStatsModal.vue
index bf0c77e6..5ec79874 100644
--- a/components/semantic/SemanticStatsModal.vue
+++ b/components/semantic/SemanticStatsModal.vue
@@ -7,7 +7,7 @@
 -->
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { Sparkles, Trophy, XCircle } from 'lucide-vue-next';
 import type { Neighbour, SemanticGuess } from '~/composables/useSemanticGame';
 import { wordDetailPath } from '~/utils/wordUrls';
@@ -23,14 +23,30 @@ const props = defineProps<{
     dayIdx: number;
     lang: string;
     llmHintUsed: boolean;
+    /** Whether this is a daily game (affects Play Again vs Keep Playing). */
+    isDaily?: boolean;
 }>();
 
 const emit = defineEmits<{
     close: [];
     share: [];
     newGame: [];
+    keepPlaying: [];
 }>();
 
+// Share button feedback — self-contained, resets after 2s
+const shareCopied = ref(false);
+let shareTimer: ReturnType<typeof setTimeout> | null = null;
+
+function onShareClick() {
+    emit('share');
+    shareCopied.value = true;
+    if (shareTimer) clearTimeout(shareTimer);
+    shareTimer = setTimeout(() => {
+        shareCopied.value = false;
+    }, 2000);
+}
+
 function rankColor(rank: number): string {
     if (rank <= 10) return 'text-correct';
     if (rank <= 50) return 'text-semicorrect';
@@ -38,7 +54,6 @@ function rankColor(rank: number): string {
     return 'text-muted';
 }
 
-const sortedGuesses = computed(() => [...props.guesses].sort((a, b) => a.rank - b.rank));
 const bestRank = computed(() => {
     if (!props.guesses.length) return null;
     return Math.min(...props.guesses.map((g) => g.rank));
@@ -104,24 +119,6 @@ const bestRank = computed(() => {
                 </div>
             </div>
 
-            <!-- Guess list -->
-            <div class="section" v-if="sortedGuesses.length">
-                <div class="mono-label section-label">Your path</div>
-                <ol class="guess-list">
-                    <li
-                        v-for="g in sortedGuesses"
-                        :key="g.guessNumber + ':' + g.word"
-                        class="guess-item"
-                    >
-                        <span class="guess-num">{{ g.guessNumber }}</span>
-                        <span class="guess-word">{{ g.word }}</span>
-                        <span class="guess-sim" :class="rankColor(g.rank)">
-                            #{{ g.rank.toLocaleString() }}
-                        </span>
-                    </li>
-                </ol>
-            </div>
-
             <!-- Neighbours (what you didn't guess) -->
             <div class="section" v-if="neighbours.length">
                 <div class="mono-label section-label">Closest words you missed</div>
@@ -135,9 +132,19 @@ const bestRank = computed(() => {
 
             <!-- Actions -->
             <div class="action-row">
-                <button type="button" class="btn btn-ghost" @click="emit('close')">Close</button>
-                <button type="button" class="btn btn-primary" @click="emit('share')">
-                    Share result
+                <button
+                    v-if="isDaily"
+                    type="button"
+                    class="btn btn-ghost"
+                    @click="emit('keepPlaying')"
+                >
+                    Keep Playing
+                </button>
+                <button v-else type="button" class="btn btn-ghost" @click="emit('newGame')">
+                    Play Again
+                </button>
+                <button type="button" class="btn btn-primary" @click="onShareClick">
+                    {{ shareCopied ? 'Copied!' : 'Share result' }}
                 </button>
             </div>
         </div>
diff --git a/components/shared/StreakCalendar.vue b/components/shared/StreakCalendar.vue
new file mode 100644
index 00000000..07e2071e
--- /dev/null
+++ b/components/shared/StreakCalendar.vue
@@ -0,0 +1,280 @@
+<!--
+  StreakCalendar — 28-day rolling heatmap with mode icons + language flags.
+
+  Shared between StreakModal and profile page. Shows daily activity:
+  - Cell background: won (green), lost (pink), missed (gray), today (outlined)
+  - Mode icons: top row, up to 3 visible + overflow count
+  - Language flags: bottom row, up to 3 visible + overflow count
+
+  Props:
+  - gameResults: the raw game results record (from stats store)
+  - bestStreak: shown in the "Best" subtitle at top (optional)
+-->
+<template>
+    <div>
+        <!-- Header -->
+        <div class="mono-label mb-2" style="font-size: 9px; letter-spacing: 0.15em">
+            Last 28 Days
+        </div>
+
+        <!-- Day-of-week headers -->
+        <div
+            class="grid grid-cols-7 gap-0.5 mb-1"
+            style="font-family: var(--font-mono); font-size: 8px; color: var(--color-muted)"
+        >
+            <span
+                v-for="(d, i) in ['M', 'T', 'W', 'T', 'F', 'S', 'S']"
+                :key="i"
+                class="text-center"
+            >
+                {{ d }}
+            </span>
+        </div>
+
+        <!-- Calendar grid -->
+        <div class="grid grid-cols-7 gap-0.5">
+            <div
+                v-for="(day, i) in calendarDays"
+                :key="i"
+                class="aspect-square rounded-sm relative overflow-hidden"
+                :class="dayClass(day)"
+            >
+                <!-- Date number -->
+                <span
+                    v-if="day.date"
+                    class="cal-date"
+                    :class="day.modes.length > 0 ? 'cal-date-active' : 'cal-date-empty'"
+                >
+                    {{ day.date }}
+                </span>
+
+                <!-- Mode icons row (top area, below date) -->
+                <div v-if="day.modes.length > 0" class="cal-modes">
+                    <component
+                        :is="getModeIcon(m)"
+                        v-for="m in day.modes.slice(0, 3)"
+                        :key="m"
+                        :size="9"
+                        class="cal-icon"
+                        :class="day.wonModes.has(m) ? 'cal-icon-won' : 'cal-icon-lost'"
+                    />
+                    <span v-if="day.modes.length > 3" class="cal-overflow">
+                        +{{ day.modes.length - 3 }}
+                    </span>
+                </div>
+
+                <!-- Language flags row (bottom area) -->
+                <div v-if="day.langs.length > 0" class="cal-langs">
+                    <img
+                        v-for="lang in day.langs.slice(0, 3)"
+                        :key="lang"
+                        :src="flagSrc(lang)!"
+                        :alt="lang"
+                        class="cal-flag-img"
+                        :class="{ 'cal-flag-lost': !day.wonLangs.has(lang) }"
+                    />
+                    <span v-if="day.langs.length > 3" class="cal-overflow">
+                        +{{ day.langs.length - 3 }}
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Legend -->
+        <div
+            class="flex gap-3 mt-2 justify-center"
+            style="font-size: 9px; color: var(--color-muted); font-family: var(--font-mono)"
+        >
+            <span class="flex items-center gap-1">
+                <span class="w-2 h-2 rounded-sm bg-correct-soft inline-block" /> Won
+            </span>
+            <span class="flex items-center gap-1">
+                <span
+                    class="w-2 h-2 rounded-sm inline-block"
+                    style="background: var(--color-accent-soft, #e8d5d0)"
+                />
+                Lost
+            </span>
+            <span class="flex items-center gap-1">
+                <span class="w-2 h-2 rounded-sm bg-muted-soft inline-block" /> Missed
+            </span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Square } from 'lucide-vue-next';
+import { useFlag } from '~/composables/useFlag';
+import { toLocalDay, buildDailyResultMapDetailed } from '~/utils/streak-dates';
+import { GAME_MODES_UI } from '~/composables/useGameModes';
+import type { GameResult } from '~/utils/types';
+
+const props = defineProps<{
+    gameResults: Record<string, GameResult[]>;
+}>();
+
+// --- Helpers ---
+
+const _flagCache = new Map<string, string | null>();
+function flagSrc(code: string): string | null {
+    if (_flagCache.has(code)) return _flagCache.get(code)!;
+    const f = useFlag(code);
+    _flagCache.set(code, f);
+    return f;
+}
+
+function getModeIcon(mode: string | undefined) {
+    if (!mode) return Square;
+    return GAME_MODES_UI.find((m) => m.id === mode)?.icon || Square;
+}
+
+// --- Calendar data ---
+
+interface CalendarDay {
+    date: number | null;
+    state: 'won' | 'lost' | 'missed' | 'today' | 'future' | 'empty';
+    modes: string[];
+    langs: string[];
+    wonModes: Set<string>;
+    wonLangs: Set<string>;
+}
+
+function dayClass(day: CalendarDay): string {
+    switch (day.state) {
+        case 'won':
+            return 'bg-correct-soft';
+        case 'lost':
+            return 'cal-lost';
+        case 'missed':
+            return 'bg-muted-soft';
+        case 'today':
+            return 'outline outline-2 outline-ink -outline-offset-1';
+        default:
+            return '';
+    }
+}
+
+const calendarDays = computed<CalendarDay[]>(() => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    const dayDetails = buildDailyResultMapDetailed(props.gameResults);
+
+    // Align to full weeks: end on this week's Sunday
+    const todayDow = (today.getDay() + 6) % 7;
+    const endOfWeek = new Date(today);
+    endOfWeek.setDate(endOfWeek.getDate() + (6 - todayDow));
+    const startDate = new Date(endOfWeek);
+    startDate.setDate(startDate.getDate() - 27);
+
+    const days: CalendarDay[] = [];
+    const todayKey = toLocalDay(today);
+
+    for (let i = 0; i < 28; i++) {
+        const d = new Date(startDate);
+        d.setDate(d.getDate() + i);
+        const dayKey = toLocalDay(d);
+        const isToday = dayKey === todayKey;
+        const isFuture = d > today;
+        const detail = dayDetails.get(dayKey);
+
+        let state: CalendarDay['state'];
+        if (isToday) {
+            state = detail?.state || 'today';
+        } else if (isFuture) {
+            state = 'future';
+        } else {
+            state = detail?.state || 'missed';
+        }
+
+        days.push({
+            date: d.getDate(),
+            state,
+            modes: detail ? [...detail.modes] : [],
+            langs: detail ? [...detail.langs].filter((l) => flagSrc(l)) : [],
+            wonModes: detail?.wonModes ?? new Set(),
+            wonLangs: detail?.wonLangs ?? new Set(),
+        });
+    }
+
+    return days;
+});
+</script>
+
+<style scoped>
+.cal-lost {
+    background: var(--color-accent-soft, #e8d5d0);
+}
+
+.cal-date {
+    font-family: var(--font-mono);
+    line-height: 1;
+    color: var(--color-muted);
+}
+.cal-date-active {
+    position: absolute;
+    top: 1px;
+    left: 2px;
+    font-size: 7px;
+}
+.cal-date-empty {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 9px;
+}
+
+/* Mode icons: upper half of cell (below date) */
+.cal-modes {
+    position: absolute;
+    top: 35%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    gap: 1px;
+    align-items: center;
+}
+.cal-icon {
+    flex-shrink: 0;
+}
+.cal-icon-won {
+    color: var(--color-ink);
+    opacity: 0.7;
+}
+.cal-icon-lost {
+    color: var(--color-muted);
+    opacity: 0.35;
+}
+
+/* Language flags: lower half of cell */
+.cal-langs {
+    position: absolute;
+    top: 65%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    gap: 1px;
+    align-items: center;
+}
+.cal-flag-img {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    object-fit: cover;
+    flex-shrink: 0;
+}
+.cal-flag-lost {
+    opacity: 0.35;
+    filter: grayscale(0.6);
+}
+
+.cal-overflow {
+    font-family: var(--font-mono);
+    font-size: 6px;
+    color: var(--color-muted);
+    line-height: 1;
+}
+</style>
diff --git a/composables/useSemanticGame.ts b/composables/useSemanticGame.ts
index 90a74407..9da39e79 100644
--- a/composables/useSemanticGame.ts
+++ b/composables/useSemanticGame.ts
@@ -221,7 +221,9 @@ export function useSemanticGame(lang: string) {
     );
 
     // ── Actions ───────────────────────────────────────────────────────────
-    async function startGame(opts: { target?: string; debug?: boolean; forceNew?: boolean } = {}) {
+    async function startGame(
+        opts: { target?: string; debug?: boolean; forceNew?: boolean; play?: string } = {}
+    ) {
         starting.value = true;
         invalidMessage.value = '';
         mapMode.value = 'umap';
@@ -234,6 +236,7 @@ export function useSemanticGame(lang: string) {
                 body: {
                     target: opts.target,
                     debug: opts.debug,
+                    play: opts.play,
                 },
             });
             targetId.value = resp.targetId;
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 02d6da27..3c40ef6f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -96,6 +96,13 @@ export default defineNuxtConfig({
     nitro: {
         // Pre-load data at startup
         preset: 'node-server',
+        // Externalize Prisma — it's a CJS module that breaks when bundled into ESM
+        externals: {
+            inline: [],
+        },
+        rollupConfig: {
+            external: ['@prisma/client', '@prisma/adapter-pg'],
+        },
     },
 
     pwa: {
diff --git a/package.json b/package.json
index 416fd0eb..b16259cc 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "packageManager": "pnpm@10.17.1",
     "scripts": {
         "dev": "nuxt dev",
-        "build": "prisma generate --config prisma/prisma.config.ts && nuxt build",
+        "build": "nuxt build",
         "preview": "nuxt preview",
         "generate": "nuxt generate",
         "postinstall": "nuxt prepare",
diff --git a/pages/[lang]/semantic.vue b/pages/[lang]/semantic.vue
index b39859d1..814fc95f 100644
--- a/pages/[lang]/semantic.vue
+++ b/pages/[lang]/semantic.vue
@@ -20,7 +20,7 @@ import { buildSemanticGradientFromCSS, sampleGradient } from '~/utils/semanticCo
 
 definePageMeta({
     layout: 'game',
-    key: (route) => `${route.params.lang}-semantic`,
+    key: (route) => `${route.params.lang}-semantic-${route.query.play || 'daily'}`,
 });
 
 const route = useRoute();
@@ -163,6 +163,7 @@ onMounted(async () => {
         target: targetOverride,
         debug,
         forceNew: isUnlimited.value,
+        play: playType.value,
     });
 });
 
@@ -182,8 +183,9 @@ watch(
         }
 
         if (sem.neighbours.value.length > 0) {
-            // Restored from localStorage — show instantly
+            // Restored from localStorage — show instantly, auto-open modal for daily
             revealedNeighbourCount.value = sem.neighbours.value.length;
+            if (isDaily.value) showStatsModal.value = true;
         } else {
             // Live game-over — stagger once neighbours arrive
             needsStagger = true;
@@ -357,10 +359,16 @@ onUnmounted(() => {
     for (const t of neighbourRevealTimers) clearTimeout(t);
 });
 
-// --- New game (same daily, reset) ---
+// --- New game ---
 async function onNewGame() {
     showStatsModal.value = false;
-    await sem.startGame({ forceNew: true });
+    await sem.startGame({ forceNew: true, play: playType.value });
+}
+
+// --- Keep playing (daily → unlimited transition) ---
+function onKeepPlaying() {
+    showStatsModal.value = false;
+    navigateTo(`/${lang}/semantic?play=unlimited`);
 }
 </script>
 
@@ -533,9 +541,11 @@ async function onNewGame() {
             :day-idx="sem.dayIdx.value"
             :lang="lang"
             :llm-hint-used="sem.llmHintUsed.value"
+            :is-daily="isDaily"
             @close="showStatsModal = false"
             @share="onShare"
             @new-game="onNewGame"
+            @keep-playing="onKeepPlaying"
         />
         <template #seo>
             <GameSeoNoscript :lang="lang" mode="semantic" :seo="seo" :config="configVal" />
@@ -649,8 +659,9 @@ async function onNewGame() {
     align-items: center;
     min-height: 280px;
     /* Cap height so the input stays visible without scrolling.
-       Navbar ~50 + card header ~90 + input ~80 + card/body padding ~80 ≈ 300px. */
-    max-height: calc(100vh - 310px);
+       Navbar ~50 + card header ~90 + input ~80 + card/body padding ~80 ≈ 300px.
+       Use dvh to account for mobile browser chrome. */
+    max-height: calc(100dvh - 310px);
 }
 
 /* Map controls (expand, zoom, pan) are in shared MapFrame component */
@@ -780,7 +791,6 @@ async function onNewGame() {
     .map-canvas-wrap {
         min-height: 180px;
         max-height: 40vh;
-        overflow: hidden;
     }
     /* Fixed input bar: pinned to the bottom of the viewport so it
        remains accessible when the mobile keyboard opens. */
diff --git a/pages/[lang]/speed.vue b/pages/[lang]/speed.vue
index 2b80bad7..35aee193 100644
--- a/pages/[lang]/speed.vue
+++ b/pages/[lang]/speed.vue
@@ -10,7 +10,7 @@ import { Info } from 'lucide-vue-next';
 
 definePageMeta({
     layout: 'game',
-    key: (route) => `${route.params.lang}-speed`,
+    key: (route) => `${route.params.lang}-speed-${route.query.play || 'daily'}`,
 });
 
 const route = useRoute();
diff --git a/pages/index.vue b/pages/index.vue
index b1286809..f63307bc 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -40,7 +40,7 @@ const pwaInstall = import.meta.client
               hasPrompt: boolean;
               isIOS: boolean;
           };
-      }>('pwaInstall')
+      }>('pwaInstall', undefined)
     : undefined;
 const showPwaInstall = ref(false);
 
@@ -295,7 +295,6 @@ const continuePlayingCards = computed(() => {
         langName: string;
         title: string;
         subtitle: string;
-        streak: number;
         cta: string;
         borderColor: string;
         modeIcon: any;
@@ -345,7 +344,6 @@ const continuePlayingCards = computed(() => {
         const lastResult = entry.results[entry.results.length - 1]!;
         const isSolved = lastResult.won;
         const route = modeUI ? getModeRoute(modeUI, entry.code) : `/${entry.code}`;
-        const langStreak = getCurrentStreak(entry.code);
 
         cards.push({
             key: `${entry.code}_${entry.mode}`,
@@ -356,7 +354,6 @@ const continuePlayingCards = computed(() => {
             langName: lang.language_name_native,
             title: lang.language_name_native,
             subtitle: modeDef.label,
-            streak: langStreak,
             cta: isSolved ? 'Unlimited →' : 'Play →',
             borderColor: isSolved ? 'var(--color-correct, #2d8544)' : 'var(--color-rule, #d4cfc7)',
             modeIcon: MODE_CARD_ICONS[entry.mode] || Square,
@@ -840,14 +837,6 @@ function openMultiBoardPicker(): void {
                                     :size="16"
                                     class="text-correct"
                                 />
-                                <template v-else-if="card.streak > 0">
-                                    <Flame :size="14" class="text-flame" />
-                                    <span
-                                        class="mono-label"
-                                        style="color: var(--color-flame); font-size: 10px"
-                                        >{{ card.streak }}</span
-                                    >
-                                </template>
                                 <span
                                     v-else
                                     class="mono-label text-muted"
@@ -1087,10 +1076,6 @@ function openMultiBoardPicker(): void {
             />
         </div>
     </AppShell>
-
-    <!-- Footer SEO links removed — Nuxt SSR renders all language pages server-side,
-         so crawlers discover them via the sitemap and SSR-rendered language grid above.
-         The noscript fallback is also unnecessary with SSR. -->
 </template>
 
 <style scoped>
diff --git a/pages/profile.vue b/pages/profile.vue
index 5362eb9d..67c797d5 100644
--- a/pages/profile.vue
+++ b/pages/profile.vue
@@ -13,7 +13,7 @@ import { isClassicDailyStatsKey, GAME_MODE_CONFIG, GAME_MODE_ORDER } from '~/uti
 import type { GameMode } from '~/utils/game-modes';
 import type { SpeedAggregate } from '~/utils/types';
 import { createEmptyDistribution } from '~/utils/types';
-import { buildDailyResultMapDetailed, toLocalDay, stepBack } from '~/utils/streak-dates';
+
 import { useFlag } from '~/composables/useFlag';
 import type { GameResult } from '~/utils/types';
 
@@ -101,33 +101,6 @@ async function saveName() {
     }
 }
 
-// Passkey support detection
-const passkeySupported = ref(false);
-const passkeyRegistering = ref(false);
-const passkeyAdded = ref(false);
-
-if (import.meta.client) {
-    onMounted(() => {
-        passkeySupported.value = !!window.PublicKeyCredential;
-    });
-}
-
-// Must be at top level of setup
-const { register: registerPasskey } = useWebAuthn({ registerEndpoint: '/api/webauthn/register' });
-
-async function addPasskey() {
-    passkeyRegistering.value = true;
-    try {
-        await registerPasskey({
-            userName: authUser.value?.displayName || authUser.value?.email || 'user',
-        });
-        passkeyAdded.value = true;
-    } catch {
-        // User cancelled or failed
-    } finally {
-        passkeyRegistering.value = false;
-    }
-}
 const { openLoginModal } = useLoginModal();
 
 interface ProfileBadge {
@@ -205,6 +178,15 @@ if (import.meta.client) {
             } catch {
                 // Non-critical — badges won't show but page still works
             }
+
+            // Scroll to hash target after async content renders (e.g. #badges).
+            // Double nextTick: first flushes Vue reactivity, second waits for DOM update.
+            const hash = useRoute().hash;
+            if (hash) {
+                await nextTick();
+                await nextTick();
+                document.querySelector(hash)?.scrollIntoView({ behavior: 'smooth' });
+            }
         },
         { immediate: true }
     );
@@ -220,7 +202,7 @@ function formatDate(dateStr: string): string {
     }
 }
 
-import { LogOut, Fingerprint, Pencil } from 'lucide-vue-next';
+import { LogOut, Pencil } from 'lucide-vue-next';
 
 // Product-wide streak — single source via composable
 const { streak: productStreakRaw, bestStreak: productBestStreakRaw } = useProductStreak();
@@ -229,66 +211,7 @@ const productBestStreak = computed(() => productBestStreakRaw.value);
 const animProductStreak = useAnimatedNumber(productStreak);
 const streakExpanded = ref(false);
 
-// --- Calendar heatmap for streak (28-day rolling window) ---
-interface CalendarDay {
-    date: number | null;
-    state: 'won' | 'lost' | 'missed' | 'today' | 'future' | 'empty';
-    modes: string[];
-    langs: string[];
-}
-
-function calendarDayClass(day: CalendarDay): string {
-    switch (day.state) {
-        case 'won':
-            return 'bg-correct-soft';
-        case 'lost':
-            return 'cal-lost';
-        case 'missed':
-            return 'bg-muted-soft';
-        case 'today':
-            return 'outline outline-2 outline-ink -outline-offset-1';
-        default:
-            return '';
-    }
-}
-
-const calendarDays = computed<CalendarDay[]>(() => {
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
-    const dayDetails = buildDailyResultMapDetailed(
-        statsStore.gameResults as Record<string, GameResult[]>
-    );
-    const todayDow = (today.getDay() + 6) % 7;
-    const endOfWeek = new Date(today);
-    endOfWeek.setDate(endOfWeek.getDate() + (6 - todayDow));
-    const startDate = new Date(endOfWeek);
-    startDate.setDate(startDate.getDate() - 27);
-    const days: CalendarDay[] = [];
-    const todayKey = toLocalDay(today);
-    for (let i = 0; i < 28; i++) {
-        const d = new Date(startDate);
-        d.setDate(d.getDate() + i);
-        const dayKey = toLocalDay(d);
-        const isToday = dayKey === todayKey;
-        const isFuture = d > today;
-        const detail = dayDetails.get(dayKey);
-        let state: CalendarDay['state'];
-        if (isToday) {
-            state = detail?.state || 'today';
-        } else if (isFuture) {
-            state = 'future';
-        } else {
-            state = detail?.state || 'missed';
-        }
-        days.push({
-            date: d.getDate(),
-            state,
-            modes: detail ? [...detail.modes] : [],
-            langs: detail ? [...detail.langs] : [],
-        });
-    }
-    return days;
-});
+// Calendar heatmap uses SharedStreakCalendar component (DRY with StreakModal)
 
 // Classic daily (from store's calculateTotalStats)
 const totalGames = ref(0);
@@ -329,11 +252,13 @@ const availableTabs = computed<{ id: StatsTab; label: string }[]>(() => {
     return tabs;
 });
 
-const sortedModes = computed(() =>
-    [...modeStats.value].sort(
-        (a, b) => GAME_MODE_ORDER.indexOf(a.mode) - GAME_MODE_ORDER.indexOf(b.mode)
-    )
-);
+const sortedModes = computed(() => {
+    const classic = modeStats.value.filter((m) => m.mode === 'classic');
+    const rest = modeStats.value
+        .filter((m) => m.mode !== 'classic')
+        .sort((a, b) => b.games - a.games);
+    return [...classic, ...rest];
+});
 
 // Distribution mode picker — which mode's histogram to show
 const distMode = ref<GameMode | null>(null);
@@ -603,21 +528,6 @@ const languagesConquered = computed(() => {
 
                 <!-- Account actions -->
                 <div class="mt-6 flex items-center gap-4">
-                    <button
-                        v-if="passkeySupported"
-                        class="text-sm text-ink hover:text-accent transition-colors flex items-center gap-1"
-                        :disabled="passkeyRegistering"
-                        @click="addPasskey()"
-                    >
-                        <Fingerprint :size="14" />
-                        {{
-                            passkeyRegistering
-                                ? 'Registering...'
-                                : passkeyAdded
-                                  ? 'Passkey added'
-                                  : 'Add passkey'
-                        }}
-                    </button>
                     <button
                         class="text-sm text-muted hover:text-ink transition-colors flex items-center gap-1"
                         @click="authLogout()"
@@ -678,18 +588,10 @@ const languagesConquered = computed(() => {
                     </div>
                     <div class="mono-label mt-1">Day Streak</div>
                     <div
-                        v-if="productBestStreak > 0"
                         class="text-xs text-muted italic mt-1.5"
                         style="font-family: var(--font-display)"
                     >
-                        Best: {{ productBestStreak }} · Any daily mode, any language
-                    </div>
-                    <div
-                        v-else
-                        class="text-xs text-muted italic mt-1.5"
-                        style="font-family: var(--font-display)"
-                    >
-                        Play today's daily to start a streak
+                        Any daily mode, any language
                     </div>
 
                     <!-- Calendar heatmap (expands on click) -->
@@ -698,93 +600,9 @@ const languagesConquered = computed(() => {
                         class="mt-5 pt-4 border-t border-rule text-left"
                         @click.stop
                     >
-                        <div class="mono-label mb-2" style="font-size: 9px; letter-spacing: 0.15em">
-                            Last 28 Days
-                        </div>
-                        <div
-                            class="grid grid-cols-7 gap-0.5 mb-1"
-                            style="
-                                font-family: var(--font-mono);
-                                font-size: 8px;
-                                color: var(--color-muted);
-                            "
-                        >
-                            <span
-                                v-for="(d, i) in ['M', 'T', 'W', 'T', 'F', 'S', 'S']"
-                                :key="i"
-                                class="text-center"
-                                >{{ d }}</span
-                            >
-                        </div>
-                        <div class="grid grid-cols-7 gap-0.5">
-                            <div
-                                v-for="(day, i) in calendarDays"
-                                :key="i"
-                                class="aspect-square rounded-sm relative"
-                                :class="calendarDayClass(day)"
-                                style="
-                                    font-family: var(--font-mono);
-                                    font-size: 8px;
-                                    color: var(--color-muted);
-                                "
-                            >
-                                <!-- Date number: top-left when there's activity, centered otherwise -->
-                                <span
-                                    v-if="day.date"
-                                    class="absolute"
-                                    :class="
-                                        day.modes.length > 0
-                                            ? 'top-0.5 left-1'
-                                            : 'inset-0 flex items-center justify-center'
-                                    "
-                                    style="font-size: 8px; line-height: 1"
-                                    >{{ day.date }}</span
-                                >
-                                <!-- Mode icon centered (when there's activity) -->
-                                <div
-                                    v-if="day.modes.length > 0"
-                                    class="absolute inset-0 flex items-center justify-center"
-                                >
-                                    <component
-                                        :is="getModeIcon(day.modes[0]!)"
-                                        :size="16"
-                                        class="opacity-70"
-                                        :class="day.state === 'won' ? 'text-correct' : 'text-ink'"
-                                    />
-                                </div>
-                                <!-- Flag badge bottom-right -->
-                                <img
-                                    v-if="day.langs.length >= 1 && useFlag(day.langs[0]!)"
-                                    :src="useFlag(day.langs[0]!)!"
-                                    class="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 rounded-full object-cover border border-paper"
-                                    alt=""
-                                />
-                            </div>
-                        </div>
-                        <div
-                            class="flex gap-3 mt-2 justify-center"
-                            style="
-                                font-size: 9px;
-                                color: var(--color-muted);
-                                font-family: var(--font-mono);
-                            "
-                        >
-                            <span class="flex items-center gap-1"
-                                ><span class="w-2 h-2 rounded-sm bg-correct-soft inline-block" />
-                                Won</span
-                            >
-                            <span class="flex items-center gap-1"
-                                ><span
-                                    class="w-2 h-2 rounded-sm inline-block"
-                                    style="background: var(--color-accent-soft, #e8d5d0)"
-                                />
-                                Lost</span
-                            >
-                            <span class="flex items-center gap-1"
-                                ><span class="w-2 h-2 rounded-sm bg-muted-soft inline-block" />
-                                Missed</span
-                            >
-                        </div>
+                        <SharedStreakCalendar
+                            :game-results="statsStore.gameResults as Record<string, GameResult[]>"
+                        />
                         <!-- Current / Longest row -->
                         <div class="grid grid-cols-2 gap-px bg-rule mt-3">
                             <div class="bg-paper text-center py-3">
@@ -1130,9 +948,3 @@ const languagesConquered = computed(() => {
         </div>
     </AppShell>
 </template>
-
-<style scoped>
-.cal-lost {
-    background: var(--color-accent-soft, #e8d5d0);
-}
-</style>
diff --git a/server/api/[lang]/semantic/start.post.ts b/server/api/[lang]/semantic/start.post.ts
index 8388c508..dc3b0b95 100644
--- a/server/api/[lang]/semantic/start.post.ts
+++ b/server/api/[lang]/semantic/start.post.ts
@@ -38,16 +38,19 @@ export default defineEventHandler(async (event) => {
     const body = await readBody(event).catch(() => ({}));
     const override = (body?.target as string | undefined)?.toLowerCase().trim();
     const debug = Boolean(body?.debug);
+    const play = (body?.play as string | undefined) ?? 'daily';
 
     const data = loadSemanticDataSafe();
     // TZ-aware day index, 1-based from April 11 2026
     const classicIdx = getTodaysIdx();
     const dayIdx = toModeDayIdx(classicIdx) ?? 1;
 
-    // Daily pick (or override via debug)
+    // Daily pick, unlimited random, or override via debug
     let target: string;
     if (override && data.wordIndex.has(override)) {
         target = override;
+    } else if (play === 'unlimited') {
+        target = data.targets[Math.floor(Math.random() * data.targets.length)]!;
     } else {
         target = pickDailyTarget(data.targets, lang, dayIdx);
     }
diff --git a/server/utils/prisma.ts b/server/utils/prisma.ts
index 4779c57a..2d511410 100644
--- a/server/utils/prisma.ts
+++ b/server/utils/prisma.ts
@@ -1,3 +1,6 @@
+// @prisma/client is CJS — named ESM import breaks in vitest's ESM transform.
+// Default import + destructure works in both Nitro (Render) and vitest (CI).
+// See commits facb5e40, 2e14401c for the original debugging.
 import prismaClientPkg from '@prisma/client';
 const { PrismaClient } = prismaClientPkg;
 import { PrismaPg } from '@prisma/adapter-pg';
diff --git a/tests/setup-server.ts b/tests/setup-server.ts
index e0dcc2ee..ffe2aa04 100644
--- a/tests/setup-server.ts
+++ b/tests/setup-server.ts
@@ -59,10 +59,20 @@ export async function setup(): Promise<void> {
     // Use pre-built server if available (CI builds first to skip 50s+ Nitro JIT)
     const useBuild = existsSync(join(process.cwd(), '.output', 'server', 'index.mjs'));
     const cmd = useBuild
-        ? { bin: 'node', args: ['.output/server/index.mjs'], env: { PORT: String(port), HOST: '0.0.0.0' } }
-        : { bin: 'npx', args: ['nuxt', 'dev', '--port', String(port)], env: { NUXT_PORT: String(port) } };
-
-    console.log(`[setup-server] Starting ${useBuild ? 'pre-built' : 'dev'} server on port ${port}...`);
+        ? {
+              bin: 'node',
+              args: ['.output/server/index.mjs'],
+              env: { PORT: String(port), HOST: '0.0.0.0' },
+          }
+        : {
+              bin: 'npx',
+              args: ['nuxt', 'dev', '--port', String(port)],
+              env: { NUXT_PORT: String(port) },
+          };
+
+    console.log(
+        `[setup-server] Starting ${useBuild ? 'pre-built' : 'dev'} server on port ${port}...`
+    );
 
     serverProcess = spawn(cmd.bin, cmd.args, {
         cwd: process.cwd(),
diff --git a/utils/streak-dates.ts b/utils/streak-dates.ts
index 0ff666ea..462240b7 100644
--- a/utils/streak-dates.ts
+++ b/utils/streak-dates.ts
@@ -48,11 +48,15 @@ export interface DayDetail {
     state: 'won' | 'lost';
     modes: Set<string>;
     langs: Set<string>;
+    /** Modes where at least one game was won that day */
+    wonModes: Set<string>;
+    /** Languages where at least one game was won that day */
+    wonLangs: Set<string>;
 }
 
 /**
  * Enhanced daily result map — includes which modes and languages were played each day.
- * Used by the profile page calendar to show mode icons and language flags.
+ * Used by the streak calendar to show mode icons and language flags.
  */
 export function buildDailyResultMapDetailed(
     gameResults: Record<string, GameResult[]>
@@ -78,12 +82,22 @@ export function buildDailyResultMapDetailed(
             const dayKey = toLocalDay(new Date(r.date as string));
             let detail = dayMap.get(dayKey);
             if (!detail) {
-                detail = { state: 'lost', modes: new Set(), langs: new Set() };
+                detail = {
+                    state: 'lost',
+                    modes: new Set(),
+                    langs: new Set(),
+                    wonModes: new Set(),
+                    wonLangs: new Set(),
+                };
                 dayMap.set(dayKey, detail);
             }
             detail.modes.add(mode);
             detail.langs.add(lang);
-            if (r.won) detail.state = 'won';
+            if (r.won) {
+                detail.state = 'won';
+                detail.wonModes.add(mode);
+                detail.wonLangs.add(lang);
+            }
         }
     }
 

From 450600dde1bf7beb25f297b0d08df7b624c189ef Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Sat, 11 Apr 2026 10:17:34 +0100
Subject: [PATCH 2/6] ci: trigger CI run


From a0f0ac8d036fd00fd380778166d35a20d3338a41 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Sat, 11 Apr 2026 10:22:07 +0100
Subject: [PATCH 3/6] ci: add prisma generate + session secret for CI

---
 .github/workflows/test.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 6baa627a..8956456a 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -90,6 +90,7 @@ jobs:
         run: pnpm test
         env:
           NUXT_USE_BUILD: '1'
+          NUXT_SESSION_PASSWORD: 'ci-test-secret-min-32-chars-long!!'
 
   e2e:
     name: E2E Tests (Playwright)
@@ -120,6 +121,8 @@ jobs:
 
       - name: Run Playwright E2E tests
         run: pnpm test:e2e
+        env:
+          NUXT_SESSION_PASSWORD: 'ci-test-secret-min-32-chars-long!!'
 
       - name: Upload Playwright report
         uses: actions/upload-artifact@v4

From a2b63fb3ce3de410b1abe646ca8d4b8b8cb455c7 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Sat, 11 Apr 2026 10:23:18 +0100
Subject: [PATCH 4/6] ci: retrigger


From 981e633ff0717849eb76a232e6405d9ab7833c5e Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Sat, 11 Apr 2026 10:28:34 +0100
Subject: [PATCH 5/6] ci: fix @vue/reactivity alias for CI vitest resolution

---
 vitest.config.ts | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/vitest.config.ts b/vitest.config.ts
index 98d5bc83..1f1377e3 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -31,12 +31,9 @@ export default defineConfig({
         alias: {
             '~': resolve(__dirname, '.'),
             '@': resolve(__dirname, '.'),
-            // @vue/reactivity is used by game store for pauseTracking/resetTracking
-            // but isn't hoisted by pnpm — resolve it from the nested location
-            '@vue/reactivity': resolve(
-                __dirname,
-                'node_modules/.pnpm/node_modules/@vue/reactivity'
-            ),
+            // @vue/reactivity is used by game store for pauseTracking/resetTracking.
+            // pnpm hoisting varies between local and CI — try both locations.
+            '@vue/reactivity': resolve(__dirname, 'node_modules/@vue/reactivity'),
         },
     },
     plugins: [nuxtMetaPlugin()],

From 42b97e5abdee9ed9b3839d828cb8ac899ea92d5c Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Sat, 11 Apr 2026 10:37:07 +0100
Subject: [PATCH 6/6] fix: today's calendar cell keeps outline when won/lost

---
 components/shared/StreakCalendar.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/shared/StreakCalendar.vue b/components/shared/StreakCalendar.vue
index 07e2071e..5e97c534 100644
--- a/components/shared/StreakCalendar.vue
+++ b/components/shared/StreakCalendar.vue
@@ -134,6 +134,7 @@ function getModeIcon(mode: string | undefined) {
 interface CalendarDay {
     date: number | null;
     state: 'won' | 'lost' | 'missed' | 'today' | 'future' | 'empty';
+    isToday: boolean;
     modes: string[];
     langs: string[];
     wonModes: Set<string>;
@@ -141,13 +142,14 @@ interface CalendarDay {
 }
 
 function dayClass(day: CalendarDay): string {
+    const todayRing = day.isToday ? ' outline outline-2 outline-ink -outline-offset-1' : '';
     switch (day.state) {
         case 'won':
-            return 'bg-correct-soft';
+            return 'bg-correct-soft' + todayRing;
         case 'lost':
-            return 'cal-lost';
+            return 'cal-lost' + todayRing;
         case 'missed':
-            return 'bg-muted-soft';
+            return 'bg-muted-soft' + todayRing;
         case 'today':
             return 'outline outline-2 outline-ink -outline-offset-1';
         default:
@@ -191,6 +193,7 @@ const calendarDays = computed<CalendarDay[]>(() => {
         days.push({
             date: d.getDate(),
             state,
+            isToday,
             modes: detail ? [...detail.modes] : [],
             langs: detail ? [...detail.langs].filter((l) => flagSrc(l)) : [],
             wonModes: detail?.wonModes ?? new Set(),