Implement Specials feature, Admin UI enhancements, and Database Rebuild tool

app/page.tsx

@@ -10,17 +10,40 @@ const prisma = new PrismaClient();
 export default async function Home() {
   const dailyPuzzle = await getOrCreateDailyPuzzle(null); // Global puzzle
   const genres = await prisma.genre.findMany({ orderBy: { name: 'asc' } });
+  const specials = await prisma.special.findMany({ orderBy: { name: 'asc' } });
 
   return (
     <>
       <div style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6' }}>
-        <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap' }}>
+        <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
           <Link href="/" style={{ fontWeight: 'bold', textDecoration: 'underline' }}>Global</Link>
+
+          {/* Genres */}
           {genres.map(g => (
             <Link key={g.id} href={`/${g.name}`} style={{ color: '#4b5563', textDecoration: 'none' }}>
               {g.name}
             </Link>
           ))}
+
+          {/* Separator if both exist */}
+          {genres.length > 0 && specials.length > 0 && (
+            <span style={{ color: '#d1d5db' }}>|</span>
+          )}
+
+          {/* Specials */}
+          {specials.map(s => (
+            <Link
+              key={s.id}
+              href={`/special/${s.name}`}
+              style={{
+                color: '#be185d', // Pink-700
+                textDecoration: 'none',
+                fontWeight: '500'
+              }}
+            >
+              ★ {s.name}
+            </Link>
+          ))}
         </div>
       </div>
       <Game dailyPuzzle={dailyPuzzle} genre={null} />