V1 bingo

app/admin/campaigns/[campaignId]/page.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useAuth } from "@/components/AuthProvider";
+import { ItemEditor } from "@/components/ItemEditor";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+
+type Campaign = {
+  id: string;
+  name: string;
+  gridSize: number;
+};
+
+export default function EditCampaignPage() {
+  const { user, loading: authLoading } = useAuth();
+  const params = useParams();
+  const router = useRouter();
+  const [campaign, setCampaign] = useState<Campaign | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (authLoading) return;
+    if (!user || !user.isAdmin) { router.push("/"); return; }
+
+    const campaignId = params.campaignId as string;
+    fetch("/api/campaigns")
+      .then(r => r.json())
+      .then(campaigns => {
+        const c = campaigns.find((c: Campaign) => c.id === campaignId);
+        if (c) setCampaign(c);
+      })
+      .finally(() => setLoading(false));
+  }, [user, authLoading, params.campaignId, router]);
+
+  if (authLoading || loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="text-center font-mono text-sm text-slate-600 animate-pulse">Loading...</div>
+      </div>
+    );
+  }
+
+  if (!campaign) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="text-center">
+          <div className="text-4xl mb-3">🗺️💀</div>
+          <p className="text-sm font-mono text-slate-500">Campaign not found</p>
+          <Button variant="outline" className="mt-4 font-mono text-xs" onClick={() => router.push("/admin")}>
+            ← Back
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="py-4 max-w-2xl mx-auto space-y-4">
+      <div className="flex items-center gap-3">
+        <Button variant="ghost" size="sm" onClick={() => router.push("/admin")} className="font-mono text-xs">
+          ← BACK
+        </Button>
+        <div>
+          <h1 className="text-xl font-mono text-cyan-300 uppercase tracking-wider">{campaign.name}</h1>
+          <p className="text-xs text-slate-500 font-mono">{campaign.gridSize}×{campaign.gridSize} grid</p>
+        </div>
+      </div>
+      <ItemEditor campaign={campaign} />
+    </div>
+  );
+}

app/admin/page.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useAuth } from "@/components/AuthProvider";
+import { AdminDashboard } from "@/components/AdminDashboard";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export default function AdminPage() {
+  const { user, loading } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user) { router.push("/"); return; }
+    if (!user.isAdmin) { router.push("/"); return; }
+  }, [user, loading, router]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="text-center font-mono text-sm text-slate-600 animate-pulse">
+          <div className="text-3xl mb-2">🔐</div>
+          Verifying command clearance...
+        </div>
+      </div>
+    );
+  }
+
+  if (!user || !user.isAdmin) {
+    return null;
+  }
+
+  return <AdminDashboard />;
+}

app/api/auth/login/route.ts

@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from "next/server";
+import { loginUser, deleteSession, getServerSession, SESSION_COOKIE } from "@/lib/auth";
+import { cookies } from "next/headers";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { nickname, password } = await req.json();
+    if (!nickname || !password) {
+      return NextResponse.json({ error: "Nickname and password required" }, { status: 400 });
+    }
+    const result = await loginUser(nickname, password);
+    if ("error" in result) {
+      return NextResponse.json(result, { status: 401 });
+    }
+    const res = NextResponse.json(result.user);
+    res.cookies.set(SESSION_COOKIE, result.sessionId, {
+      httpOnly: true,
+      secure: false,
+      sameSite: "lax",
+      path: "/",
+      maxAge: 7 * 86400,
+    });
+    return res;
+  } catch {
+    return NextResponse.json({ error: "Login failed" }, { status: 500 });
+  }
+}
+
+export async function DELETE() {
+  const session = await getServerSession();
+  if (session) {
+    const cookieStore = await cookies();
+    const token = cookieStore.get(SESSION_COOKIE)?.value;
+    if (token) await deleteSession(token);
+  }
+  const res = NextResponse.json({ ok: true });
+  res.cookies.set(SESSION_COOKIE, "", { httpOnly: true, path: "/", maxAge: 0 });
+  return res;
+}

app/api/auth/me/route.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from "next/server";
+import { getServerSession } from "@/lib/auth";
+
+export async function GET() {
+  const session = await getServerSession();
+  if (!session) {
+    return NextResponse.json({ user: null });
+  }
+  return NextResponse.json({ user: { id: session.id, nickname: session.nickname, isAdmin: session.isAdmin } });
+}

app/api/auth/register/route.ts

@@ -0,0 +1,24 @@
+import { NextRequest, NextResponse } from "next/server";
+import { registerUser } from "@/lib/auth";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { nickname, password } = await req.json();
+    if (!nickname || !password) {
+      return NextResponse.json({ error: "Nickname and password required" }, { status: 400 });
+    }
+    if (nickname.length < 2 || nickname.length > 20) {
+      return NextResponse.json({ error: "Nickname 2-20 characters" }, { status: 400 });
+    }
+    if (password.length < 4) {
+      return NextResponse.json({ error: "Password min 4 characters" }, { status: 400 });
+    }
+    const result = await registerUser(nickname, password);
+    if ("error" in result) {
+      return NextResponse.json(result, { status: 409 });
+    }
+    return NextResponse.json(result);
+  } catch {
+    return NextResponse.json({ error: "Registration failed" }, { status: 500 });
+  }
+}

app/api/campaigns/[campaignId]/items/route.ts

@@ -0,0 +1,83 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getServerSession } from "@/lib/auth";
+import { db } from "@/lib/db";
+import { bingoItems } from "@/lib/db/schema";
+import { eq, and } from "drizzle-orm";
+import { v4 as uuidv4 } from "uuid";
+
+export async function GET(req: NextRequest, { params }: { params: Promise<{ campaignId: string }> }) {
+  const session = await getServerSession();
+  if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  const { campaignId } = await params;
+  const items = db.select().from(bingoItems).where(eq(bingoItems.campaignId, campaignId)).orderBy(bingoItems.gridIndex).all();
+  return NextResponse.json(items);
+}
+
+export async function POST(req: NextRequest, { params }: { params: Promise<{ campaignId: string }> }) {
+  const session = await getServerSession();
+  if (!session || !session.isAdmin) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+  try {
+    const { campaignId } = await params;
+    const { text, emoji, soundCategory, soundUrl, gridIndex } = await req.json();
+    if (!text) return NextResponse.json({ error: "Text required" }, { status: 400 });
+
+    const existing = db.select().from(bingoItems)
+      .where(and(eq(bingoItems.campaignId, campaignId), eq(bingoItems.gridIndex, gridIndex)))
+      .get();
+    if (existing) {
+      return NextResponse.json({ error: "Grid position taken" }, { status: 409 });
+    }
+
+    const id = uuidv4();
+    const now = new Date().toISOString();
+    db.insert(bingoItems).values({ id, campaignId, text, emoji: emoji || "💀", soundCategory: soundCategory || "horn", soundUrl: soundUrl || null, gridIndex, createdAt: now }).run();
+    return NextResponse.json({ id });
+  } catch {
+    return NextResponse.json({ error: "Failed to add item" }, { status: 500 });
+  }
+}
+
+export async function PUT(req: NextRequest, { params }: { params: Promise<{ campaignId: string }> }) {
+  const session = await getServerSession();
+  if (!session || !session.isAdmin) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+  try {
+    const { campaignId } = await params;
+    const body = await req.json();
+    if (!body.id) return NextResponse.json({ error: "Item ID required" }, { status: 400 });
+    const updates: Record<string, unknown> = {};
+    if (body.text) updates.text = body.text;
+    if (body.emoji) updates.emoji = body.emoji;
+    if (body.soundCategory) updates.soundCategory = body.soundCategory;
+    if (body.soundUrl !== undefined) updates.soundUrl = body.soundUrl;
+    if (body.gridIndex !== undefined) updates.gridIndex = body.gridIndex;
+    db.update(bingoItems).set(updates)
+      .where(and(eq(bingoItems.id, body.id), eq(bingoItems.campaignId, campaignId)))
+      .run();
+    return NextResponse.json({ ok: true });
+  } catch {
+    return NextResponse.json({ error: "Update failed" }, { status: 500 });
+  }
+}
+
+export async function DELETE(req: NextRequest, { params }: { params: Promise<{ campaignId: string }> }) {
+  const session = await getServerSession();
+  if (!session || !session.isAdmin) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+  try {
+    const { campaignId } = await params;
+    const url = new URL(req.url);
+    const itemId = url.searchParams.get("itemId");
+    if (!itemId) return NextResponse.json({ error: "itemId required" }, { status: 400 });
+    db.delete(bingoItems)
+      .where(and(eq(bingoItems.id, itemId), eq(bingoItems.campaignId, campaignId)))
+      .run();
+    return NextResponse.json({ ok: true });
+  } catch {
+    return NextResponse.json({ error: "Delete failed" }, { status: 500 });
+  }
+}

app/api/campaigns/[campaignId]/route.ts

@@ -0,0 +1,34 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getServerSession } from "@/lib/auth";
+import { db } from "@/lib/db";
+import { campaigns } from "@/lib/db/schema";
+import { eq } from "drizzle-orm";
+
+export async function DELETE(req: NextRequest, { params }: { params: Promise<{ campaignId: string }> }) {
+  const session = await getServerSession();
+  if (!session || !session.isAdmin) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+  const { campaignId } = await params;
+  db.delete(campaigns).where(eq(campaigns.id, campaignId)).run();
+  return NextResponse.json({ ok: true });
+}
+
+export async function PATCH(req: NextRequest, { params }: { params: Promise<{ campaignId: string }> }) {
+  const session = await getServerSession();
+  if (!session || !session.isAdmin) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+  try {
+    const { campaignId } = await params;
+    const body = await req.json();
+    const updates: Record<string, unknown> = {};
+    if (body.name) updates.name = body.name;
+    if (body.status) updates.status = body.status;
+    if (body.gridSize) updates.gridSize = body.gridSize;
+    db.update(campaigns).set(updates).where(eq(campaigns.id, campaignId)).run();
+    return NextResponse.json({ ok: true });
+  } catch {
+    return NextResponse.json({ error: "Update failed" }, { status: 500 });
+  }
+}

app/api/campaigns/route.ts

@@ -0,0 +1,37 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getServerSession } from "@/lib/auth";
+import { db } from "@/lib/db";
+import { campaigns } from "@/lib/db/schema";
+import { desc } from "drizzle-orm";
+import { v4 as uuidv4 } from "uuid";
+
+export async function GET() {
+  const session = await getServerSession();
+  if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const all = db.select().from(campaigns).orderBy(desc(campaigns.createdAt)).all();
+  return NextResponse.json(all);
+}
+
+export async function POST(req: NextRequest) {
+  const session = await getServerSession();
+  if (!session || !session.isAdmin) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+
+  try {
+    const { name, gridSize = 5 } = await req.json();
+    if (!name) return NextResponse.json({ error: "Name required" }, { status: 400 });
+    if (gridSize < 3 || gridSize > 10) {
+      return NextResponse.json({ error: "Grid size 3-10" }, { status: 400 });
+    }
+
+    const id = uuidv4();
+    const now = new Date().toISOString();
+    db.insert(campaigns).values({ id, name, gridSize, createdBy: session.id, createdAt: now }).run();
+
+    return NextResponse.json({ id, name, gridSize });
+  } catch {
+    return NextResponse.json({ error: "Failed to create campaign" }, { status: 500 });
+  }
+}

app/api/game/[campaignId]/state/route.ts

@@ -0,0 +1,74 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getServerSession } from "@/lib/auth";
+import { db } from "@/lib/db";
+import { campaigns, bingoItems, marks, users } from "@/lib/db/schema";
+import { eq, inArray, desc } from "drizzle-orm";
+
+export async function GET(req: NextRequest, { params }: { params: Promise<{ campaignId: string }> }) {
+  const session = await getServerSession();
+  if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  try {
+    const { campaignId } = await params;
+    const campaign = db.select().from(campaigns).where(eq(campaigns.id, campaignId)).get();
+    if (!campaign) return NextResponse.json({ error: "Campaign not found" }, { status: 404 });
+
+    const items = db.select().from(bingoItems).where(eq(bingoItems.campaignId, campaignId)).orderBy(bingoItems.gridIndex).all();
+    const allMarks = db.select().from(marks).where(eq(marks.campaignId, campaignId)).orderBy(desc(marks.createdAt)).all();
+
+    const userIds = [...new Set(allMarks.map(m => m.userId))];
+    const userMap: Record<string, string> = {};
+    if (userIds.length > 0) {
+      const markedUsers = db.select({ id: users.id, nickname: users.nickname })
+        .from(users).where(inArray(users.id, userIds)).all();
+      markedUsers.forEach(u => { userMap[u.id] = u.nickname; });
+    }
+
+    const itemMap: Record<string, typeof items[0]> = {};
+    items.forEach(it => { itemMap[it.id] = it; });
+
+    const markedItemIds = allMarks.map(m => m.itemId);
+    const markCountMap: Record<string, number> = {};
+    const markUsersMap: Record<string, string[]> = {};
+    for (const m of allMarks) {
+      markCountMap[m.itemId] = (markCountMap[m.itemId] || 0) + 1;
+      if (!markUsersMap[m.itemId]) markUsersMap[m.itemId] = [];
+      if (!markUsersMap[m.itemId].includes(userMap[m.userId] || "???")) {
+        markUsersMap[m.itemId].push(userMap[m.userId] || "???");
+      }
+    }
+
+    const activityLog = allMarks.slice(0, 20).map(m => {
+      const nickname = userMap[m.userId] || "???";
+      const item = itemMap[m.itemId];
+      const emoji = item?.emoji || "💀";
+      const text = item?.text || "unknown";
+      const time = new Date(m.createdAt).toLocaleTimeString();
+      return `${time} ${nickname} marked ${emoji} "${text}"`;
+    });
+
+    const totalCells = campaign.gridSize * campaign.gridSize;
+    const grid: Array<{
+      index: number;
+      item: typeof items[0] | null;
+      marked: boolean;
+      markedBy: string[];
+      markCount: number;
+    }> = [];
+
+    for (let i = 0; i < totalCells; i++) {
+      const item = items.find(it => it.gridIndex === i) || null;
+      grid.push({
+        index: i,
+        item,
+        marked: markedItemIds.includes(item?.id || ""),
+        markedBy: markUsersMap[item?.id || ""] || [],
+        markCount: markCountMap[item?.id || ""] || 0,
+      });
+    }
+
+    return NextResponse.json({ campaign, grid, activityLog });
+  } catch {
+    return NextResponse.json({ error: "Failed to load game state" }, { status: 500 });
+  }
+}

app/api/game/mark/route.ts

@@ -0,0 +1,58 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getServerSession } from "@/lib/auth";
+import { db } from "@/lib/db";
+import { marks, bingoItems } from "@/lib/db/schema";
+import { eq, and } from "drizzle-orm";
+import { v4 as uuidv4 } from "uuid";
+
+export async function POST(req: NextRequest) {
+  const session = await getServerSession();
+  if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  try {
+    const { campaignId, itemId } = await req.json();
+    if (!campaignId || !itemId) {
+      return NextResponse.json({ error: "campaignId and itemId required" }, { status: 400 });
+    }
+
+    const item = db.select().from(bingoItems)
+      .where(and(eq(bingoItems.id, itemId), eq(bingoItems.campaignId, campaignId)))
+      .get();
+    if (!item) return NextResponse.json({ error: "Item not found" }, { status: 404 });
+
+    const existing = db.select().from(marks)
+      .where(and(eq(marks.campaignId, campaignId), eq(marks.itemId, itemId)))
+      .get();
+    if (existing) {
+      return NextResponse.json({ error: "Already marked", mark: existing }, { status: 409 });
+    }
+
+    const id = uuidv4();
+    const now = new Date().toISOString();
+    db.insert(marks).values({ id, campaignId, itemId, userId: session.id, createdAt: now }).run();
+
+    return NextResponse.json({ id, markedBy: session.nickname });
+  } catch {
+    return NextResponse.json({ error: "Failed to mark" }, { status: 500 });
+  }
+}
+
+export async function DELETE(req: NextRequest) {
+  const session = await getServerSession();
+  if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  try {
+    const { campaignId, itemId } = await req.json();
+    if (!campaignId || !itemId) {
+      return NextResponse.json({ error: "campaignId and itemId required" }, { status: 400 });
+    }
+
+    db.delete(marks)
+      .where(and(eq(marks.campaignId, campaignId), eq(marks.itemId, itemId)))
+      .run();
+
+    return NextResponse.json({ ok: true });
+  } catch {
+    return NextResponse.json({ error: "Failed to unmark" }, { status: 500 });
+  }
+}

app/api/upload/sound/route.ts

@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getServerSession } from "@/lib/auth";
+import { writeFile, mkdir } from "fs/promises";
+import path from "path";
+import { v4 as uuidv4 } from "uuid";
+
+const UPLOAD_DIR = path.join(process.cwd(), "public", "uploads", "sounds");
+
+export async function POST(req: NextRequest) {
+  const session = await getServerSession();
+  if (!session || !session.isAdmin) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+
+  try {
+    const formData = await req.formData();
+    const file = formData.get("file") as File | null;
+    if (!file) return NextResponse.json({ error: "No file" }, { status: 400 });
+
+    if (!file.name.toLowerCase().endsWith(".ogg")) {
+      return NextResponse.json({ error: "Only OGG files allowed" }, { status: 400 });
+    }
+
+    if (file.size > 2 * 1024 * 1024) {
+      return NextResponse.json({ error: "File too large (max 2MB)" }, { status: 400 });
+    }
+
+    await mkdir(UPLOAD_DIR, { recursive: true });
+    const ext = path.extname(file.name);
+    const filename = `${uuidv4()}${ext}`;
+    const filepath = path.join(UPLOAD_DIR, filename);
+    const bytes = await file.arrayBuffer();
+    await writeFile(filepath, Buffer.from(bytes));
+
+    return NextResponse.json({ url: `/uploads/sounds/${filename}` });
+  } catch {
+    return NextResponse.json({ error: "Upload failed" }, { status: 500 });
+  }
+}

app/game/[campaignId]/page.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useAuth } from "@/components/AuthProvider";
+import { BingoCard } from "@/components/BingoCard";
+import { useParams, useRouter } from "next/navigation";
+
+type Campaign = {
+  id: string;
+  name: string;
+  gridSize: number;
+  status: string;
+};
+
+type GridCell = {
+  index: number;
+  item: Item | null;
+  marked: boolean;
+  markedBy: string[];
+  markCount: number;
+};
+
+type Item = {
+  id: string;
+  text: string;
+  emoji: string;
+  soundCategory: string;
+  soundUrl?: string | null;
+  gridIndex: number;
+};
+
+export default function GamePage() {
+  const { user, loading: authLoading } = useAuth();
+  const params = useParams();
+  const router = useRouter();
+  const [campaign, setCampaign] = useState<Campaign | null>(null);
+  const [grid, setGrid] = useState<GridCell[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (authLoading) return;
+    if (!user) { router.push("/"); return; }
+
+    const campaignId = params.campaignId as string;
+
+    fetch(`/api/game/${campaignId}/state`)
+      .then(r => r.json())
+      .then(data => {
+        if (data.error) { setError(data.error); return; }
+        setCampaign(data.campaign);
+        setGrid(data.grid);
+      })
+      .catch(() => setError("Failed to load game state"))
+      .finally(() => setLoading(false));
+  }, [user, authLoading, params.campaignId, router]);
+
+  if (authLoading || loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="text-center font-mono text-sm text-slate-600 animate-pulse">
+          <div className="text-3xl mb-2">🔄</div>
+          Loading submarine systems...
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !campaign) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="text-center">
+          <div className="text-4xl mb-3">💀</div>
+          <h2 className="text-xl font-mono text-red-400 mb-2">Campaign Lost</h2>
+          <p className="text-sm font-mono text-slate-500 mb-4">{error || "Campaign not found"}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="py-4">
+      <BingoCard
+        campaign={campaign}
+        initialGrid={grid}
+        currentUserNickname={user!.nickname}
+        isAdmin={user!.isAdmin}
+      />
+    </div>
+  );
+}

app/globals.css

@@ -0,0 +1,89 @@
+@import "tailwindcss";
+
+@theme inline {
+  --color-background: #0a0e1a;
+  --color-foreground: #e0e0e0;
+  --font-sans: var(--font-geist-sans), ui-monospace, monospace;
+  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
+
+  --animate-shake: shake 0.3s ease-in-out;
+  --animate-glow-pulse: glow-pulse 2s ease-in-out;
+  --animate-scan: scan 4s linear infinite;
+  --animate-flicker: flicker 0.15s ease-in-out 3;
+  --animate-float: float 3s ease-in-out infinite;
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  20% { transform: translateX(-3px) rotate(-1deg); }
+  40% { transform: translateX(3px) rotate(1deg); }
+  60% { transform: translateX(-2px); }
+  80% { transform: translateX(2px); }
+}
+
+@keyframes glow-pulse {
+  0%, 100% { box-shadow: 0 0 5px rgba(0, 229, 255, 0.2); }
+  50% { box-shadow: 0 0 20px rgba(0, 229, 255, 0.4), 0 0 40px rgba(0, 229, 255, 0.1); }
+}
+
+@keyframes scan {
+  0% { transform: translateY(-100%); }
+  100% { transform: translateY(100vh); }
+}
+
+@keyframes flicker {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+
+body {
+  background: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-sans);
+  min-height: 100vh;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: #0a0e1a;
+}
+::-webkit-scrollbar-thumb {
+  background: #1e293b;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #334155;
+}
+
+/* Selection */
+::selection {
+  background: rgba(0, 229, 255, 0.2);
+  color: #e0e0e0;
+}
+
+/* Scanline overlay */
+body::after {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.03) 2px,
+    rgba(0, 0, 0, 0.03) 4px
+  );
+  pointer-events: none;
+  z-index: 9999;
+}

app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { AuthProvider } from "@/components/AuthProvider";
+import { Navbar } from "@/components/Navbar";
+
+const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
+const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "BaraBingo — Barotrauma Bingo",
+  description: "Chaotic bingo for Barotrauma crews",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className="dark">
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+        <AuthProvider>
+          <Navbar />
+          <main className="container mx-auto px-4 py-6 max-w-5xl">
+            {children}
+          </main>
+          {/* Floating bubbles */}
+          <div className="fixed bottom-0 left-0 w-full pointer-events-none z-0 opacity-[0.03]">
+            <div className="animate-float mx-auto w-16 h-16 rounded-full bg-cyan-400 blur-xl" style={{ marginLeft: '10%', animationDelay: '0s' }} />
+            <div className="animate-float mx-auto w-8 h-8 rounded-full bg-cyan-400 blur-lg" style={{ marginLeft: '30%', animationDelay: '1s' }} />
+            <div className="animate-float mx-auto w-12 h-12 rounded-full bg-cyan-400 blur-xl" style={{ marginLeft: '60%', animationDelay: '2s' }} />
+            <div className="animate-float mx-auto w-6 h-6 rounded-full bg-cyan-400 blur-md" style={{ marginLeft: '80%', animationDelay: '0.5s' }} />
+          </div>
+        </AuthProvider>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useAuth } from "@/components/AuthProvider";
+import { LoginForm } from "@/components/LoginForm";
+import { CampaignList } from "@/components/CampaignList";
+import { useRouter } from "next/navigation";
+
+export default function Home() {
+  const { user, loading } = useAuth();
+  const router = useRouter();
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="text-center font-mono text-sm text-slate-600 animate-pulse">
+          <div className="text-3xl mb-2">🔊</div>
+          Connecting to submarine network...
+        </div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="w-full max-w-md">
+          <div className="text-center mb-8">
+            <div className="text-5xl mb-3">🤡💥</div>
+            <h1 className="text-3xl font-bold font-mono text-cyan-300 tracking-wider uppercase mb-2">
+              BaraBingo
+            </h1>
+            <p className="text-sm font-mono text-slate-500">
+              Barotrauma Chaos Bingo — mark the madness as it happens
+            </p>
+          </div>
+          <LoginForm />
+          <div className="mt-6 text-center">
+            <p className="text-[10px] text-slate-700 font-mono">
+              First user to register as &ldquo;admin&rdquo; gets command access
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-center min-h-[60vh] pt-8 gap-6">
+      <div className="text-center">
+        <div className="text-4xl mb-2">🌊🎮</div>
+        <h1 className="text-2xl font-mono text-cyan-300 uppercase tracking-wider">
+          Welcome, {user.nickname}
+        </h1>
+        <p className="text-xs text-slate-500 font-mono mt-1">
+          Pick a campaign and dive in
+        </p>
+      </div>
+      <CampaignList onSelect={(id) => router.push(`/game/${id}`)} />
+    </div>
+  );
+}