feat: added reject image and migrated to tailwindcss

feat: made it smartphone friendly

.dockerignore

@@ -0,0 +1,21 @@
+# Dependencies and build outputs (reinstalled / rebuilt in image)
+node_modules
+**/node_modules
+.next
+**/.next
+
+# Git
+.git
+.gitignore
+
+# Other projects in the repo (not needed for the Next.js image)
+main-web
+tools
+twitch_chat_reader
+infra
+
+# Misc
+*.md
+.env
+.env.*
+!.env.example

.gitignore

@@ -4,3 +4,4 @@ util/*.json
 build/
 build.zip
 build.tar.gz
+cfc.tar

build.sh

@@ -1,63 +1,2 @@
-#!/bin/sh
-
-# create folder to pack all
-echo "Starting build process..."
-mkdir build
-
-# build janken tool and move
-cd tools/janken
-echo "Starting janken tool build..."
-npm run build
-cd ../../
-mv tools/janken/tool build
-echo "Finished janken tool build..."
-
-# build client and move
-cd main-web/client
-echo "Starting client build..."
-npm run build
-cd ../../
-mv main-web/client/client build
-echo "Finished client build..."
-
-# build admin and move
-cd main-web/admin
-echo "Starting admin ui build..."
-npm run build
-cd ../../
-mv main-web/admin/build build/admin
-echo "Finished admin ui build..."
-
-# build server and move
-cd main-web/server
-echo "Starting server build..."
-npm run build
-cd ../../
-cd build/
-echo "Starting retrieval of db credentials..."
-export catherine_db_endpoint=$(aws --region=ap-northeast-1 ssm get-parameter --name "db-endpoint" --with-decryption --output text --query Parameter.Value)
-export catherine_db_user=$(aws --region=ap-northeast-1 ssm get-parameter --name "db-username" --with-decryption --output text --query Parameter.Value)
-export catherine_db_pass=$(aws --region=ap-northeast-1 ssm get-parameter --name "db-password" --with-decryption --output text --query Parameter.Value)
-echo "Saving db credentials to .env file..."
-cat > .env <<EOL
-DB_ENDPOINT=${catherine_db_endpoint}
-DB_USER=${catherine_db_user}
-DB_PASS=${catherine_db_pass}
-EOL
-cd ../
-cp main-web/server/package.json build/
-cp main-web/server/tsconfig.json build/
-cp main-web/server/tslint.json build/
-mv main-web/server/build build/server
-echo "Finished server build..."
-
-echo "Compressing all files..."
-tar czf build.tar.gz build/
-echo "Finished compressing all files..."
-echo "Removing workfolder..."
-rm -rf build/
-echo "Removed workfolder..."
-
-echo "Upload built files to s3..."
-aws s3 cp build.tar.gz s3://catherine-fc-infra/
-echo "Finished build process..."
+APP_VERSION=1.0.3
+docker buildx build --platform linux/arm64 -f nextjs/Dockerfile -t cfc-web:$APP_VERSION .

build_script.sh

@@ -1,40 +0,0 @@
-#!/bin/sh
-
-# create folder to pack all
-echo "Starting build process..."
-mkdir build
-
-# build janken tool and move
-cd tools/janken
-echo "Starting janken tool build..."
-npm install
-npm run build
-cd ../../
-mv tools/janken/tool build
-echo "Finished janken tool build..."
-
-# build client and move
-cd main-web/client
-echo "Starting client build..."
-npm install
-npm run build
-cd ../../
-mv main-web/client/client build/client
-echo "Finished client build..."
-
-# build server and move
-cd main-web/server
-echo "Starting server build..."
-npm install
-npm run build
-cd ../../
-cd build/
-
-echo "Saving db credentials to .env file..."
-
-cd ../
-cp main-web/server/package.json build/
-cp main-web/server/tsconfig.json build/
-cp main-web/server/tslint.json build/
-mv main-web/server/build build/server
-echo "Finished server build..."

infra/db/admin_auth.sql

@@ -0,0 +1,42 @@
+-- Admin users and sessions for the Next.js admin area.
+-- Run after catherine_league schema exists: mysql ... < admin_auth.sql
+
+USE `catherine_league`;
+
+-- Passwords stored as bcrypt hashes (e.g. from bcryptjs), never plaintext.
+CREATE TABLE IF NOT EXISTS `admin_users` (
+  `id` INT UNSIGNED NOT NULL AUTO_INCREMENT,
+  `email` VARCHAR(255) NOT NULL,
+  `password_hash` VARCHAR(255) NOT NULL,
+  `is_approved` TINYINT(1) NOT NULL DEFAULT 0,
+  `is_admin` TINYINT(1) NOT NULL DEFAULT 0,
+  `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  PRIMARY KEY (`id`),
+  UNIQUE KEY `uk_admin_users_email` (`email`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- Opaque session tokens: store SHA-256 hex of the cookie value; never store raw tokens.
+CREATE TABLE IF NOT EXISTS `admin_sessions` (
+  `id` BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
+  `user_id` INT UNSIGNED NOT NULL,
+  `token_hash` CHAR(64) NOT NULL,
+  `expires_at` DATETIME NOT NULL,
+  `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (`id`),
+  UNIQUE KEY `uk_admin_sessions_token_hash` (`token_hash`),
+  KEY `idx_admin_sessions_user_id` (`user_id`),
+  KEY `idx_admin_sessions_expires_at` (`expires_at`),
+  CONSTRAINT `fk_admin_sessions_user`
+    FOREIGN KEY (`user_id`) REFERENCES `admin_users` (`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- Seed: first admin (change password immediately in production).
+-- Default password: ChangeMeOnFirstLogin!
+INSERT INTO `admin_users` (`email`, `password_hash`, `is_approved`, `is_admin`)
+SELECT
+  'admin@localhost',
+  '$2b$12$H6Y71zX/nmefp33e0MaMaOOBGSiVwxVE3L.Ie3Pfq1/6QZdLR7bTa',
+  1,
+  1
+WHERE NOT EXISTS (SELECT 1 FROM `admin_users` WHERE `email` = 'admin@localhost' LIMIT 1);

nextjs/.env.example

@@ -0,0 +1,7 @@
+# MySQL (same as main-web/server)
+DB_ENDPOINT=localhost
+DB_PORT=3306
+DB_USER=
+DB_PASS=
+
+# After DB is up, apply admin tables (see infra/db/admin_auth.sql)

nextjs/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

nextjs/.gitignore

@@ -0,0 +1,7 @@
+/node_modules
+/.next/
+/out/
+.env
+.env.local
+.env.*.local
+*.tsbuildinfo

nextjs/Dockerfile

@@ -0,0 +1,66 @@
+# syntax=docker/dockerfile:1
+#
+# Target: linux/arm64 (ARMv8 / aarch64). Build from the repository root:
+#   docker build -f nextjs/Dockerfile -t catherine-league-web .
+# Cross-build from amd64 (optional, requires QEMU/binfmt, e.g. Docker Desktop / buildx):
+#   docker buildx build --platform linux/arm64 -f nextjs/Dockerfile -t catherine-league-web .
+#
+# Run (set DB_* env vars as needed):
+#   docker run --rm -p 3000:3000 \
+#     -e DB_ENDPOINT=host.docker.internal \
+#     -e DB_PORT=3306 \
+#     -e DB_USER=... \
+#     -e DB_PASS=... \
+#     catherine-league-web
+
+FROM arm64v8/node:24-alpine AS deps
+RUN apk add --no-cache libc6-compat
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+COPY nextjs/package.json ./nextjs/
+
+RUN npm ci
+
+FROM arm64v8/node:24-alpine AS builder
+RUN apk add --no-cache libc6-compat
+
+WORKDIR /app
+
+COPY --from=deps /app/node_modules ./node_modules
+COPY --from=deps /app/package.json ./package.json
+COPY --from=deps /app/package-lock.json ./package-lock.json
+COPY nextjs ./nextjs
+
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN npm run build -w catherine-league-nextjs
+
+FROM arm64v8/node:24-alpine AS runner
+RUN apk add --no-cache libc6-compat
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs \
+  && adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/nextjs/public ./nextjs/public
+COPY --from=builder /app/nextjs/.next/standalone ./
+COPY --from=builder /app/nextjs/.next/static ./nextjs/.next/static
+
+RUN chown -R nextjs:nodejs /app
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME=0.0.0.0
+
+WORKDIR /app/nextjs
+
+CMD ["node", "server.js"]

nextjs/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

nextjs/next.config.mjs

@@ -0,0 +1,12 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+  outputFileTracingRoot: path.join(__dirname, '..'),
+};
+
+export default nextConfig;

nextjs/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "catherine-league-nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "bcryptjs": "^3.0.3",
+    "dotenv": "^16.4.5",
+    "i18next": "^23.10.1",
+    "mysql2": "^3.11.0",
+    "next": "^15.5.14",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^14.1.0",
+    "react-youtube": "^10.1.0"
+  },
+  "devDependencies": {
+    "@types/bcryptjs": "^2.4.6",
+    "@types/node": "^20.14.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.27",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^15.5.14",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.4.19",
+    "typescript": "^5.5.4"
+  }
+}

nextjs/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

nextjs/public/manifest.json

@@ -0,0 +1,9 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#ff2d7c",
+  "background_color": "#ffffff"
+}

nextjs/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

nextjs/src/app/(site)/about/page.tsx

@@ -0,0 +1,39 @@
+import { guideBody } from '@/lib/siteContentClasses';
+
+export default function AboutPage() {
+  return (
+    <div className={guideBody}>
+      <h2 className="text-xl sm:text-2xl">About</h2>
+      <hr />
+      <div className="relative mx-auto my-5 min-h-[400px] w-full max-w-[980px] bg-[url(https://static.catherine-fc.com/media/playerbg.png)] [background-repeat:no-repeat] [background-position:center] [background-size:100%_100%] p-6 font-mplus sm:p-10 md:h-[800px] md:min-h-0 md:bg-[length:980px_800px] md:p-[50px]">
+        <br className="hidden sm:block" />
+        <p>
+          Covid-19
+          の影響で、オフライン大会の実施なども困難であるため、オンラインによるランキングバトル（通称：ストレイシープ杯）を開催することになりました。
+        </p>
+        <p>
+          先日発売されたSwitch版＋各自の配信設備を用いて大会を実施するため、まずは少人数で進めていきます。（まずは第0回を実験的に開催）
+        </p>
+        <p>
+          キャサリンの対戦は、決着はわかりやすいですが、使われているテクニックなどが分かるともっと楽しめると思うので、解説なども交えながら実施する予定です。
+        </p>
+        <p>悪い点は改善し、良い点はつづけながら、継続的に続けていきたいと思います。</p>
+        <p>
+          もっとこうしてみては？次の大会から参加したい！などございましたら問い合わせフォームからご意見下さい！
+        </p>
+        <p>それでは、楽しんでいくめぇ。～</p>
+        <div className="relative mt-8 h-[200px] w-[120px] max-w-full bg-[url(https://static.catherine-fc.com/media/title_sheep.png)] bg-contain bg-left [background-repeat:no-repeat] sm:float-left sm:mt-[70px] sm:h-[280px] sm:w-[160px] md:h-[350px] md:w-[207px]" />
+        <div className="relative clear-both m-5 inline-block h-32 w-32 max-w-full bg-[url(https://static.catherine-fc.com/media/letterbox.png)] bg-[length:128px_128px] [background-repeat:no-repeat] sm:clear-none">
+          <a
+            className="block h-32 w-32 min-h-[44px] min-w-[44px]"
+            href="https://forms.gle/Dn4p7cFEPLK1zcTz5"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            &nbsp;
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

nextjs/src/app/(site)/archive/page.tsx

@@ -0,0 +1,9 @@
+import { ArchiveVideoList } from '@/components/ArchiveVideoList';
+import { getArchiveItems } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+export default async function ArchivePage() {
+  const items = await getArchiveItems();
+  return <ArchiveVideoList items={items} />;
+}

nextjs/src/app/(site)/contact/page.tsx

@@ -0,0 +1,9 @@
+import { ContactList } from '@/components/ContactList';
+import { getContactItems } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+export default async function ContactPage() {
+  const items = await getContactItems();
+  return <ContactList items={items} />;
+}

nextjs/src/app/(site)/guide/page.tsx

@@ -0,0 +1,9 @@
+import { GuideVideoList } from '@/components/GuideVideoList';
+import { getGuideItems } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+export default async function GuidePage() {
+  const items = await getGuideItems();
+  return <GuideVideoList items={items} />;
+}

nextjs/src/app/(site)/layout.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+
+import { SiteLayout } from '@/components/SiteLayout';
+
+export default function SiteChromeLayout({ children }: { children: ReactNode }) {
+  return <SiteLayout>{children}</SiteLayout>;
+}

nextjs/src/app/(site)/page.tsx

@@ -0,0 +1,48 @@
+export default function HomePage() {
+  return (
+    <div className="mx-auto my-5 flex w-full max-w-[980px] flex-col items-center justify-center px-4 sm:px-5 md:px-0">
+      <div className="mx-auto aspect-[500/320] w-full max-w-[500px] bg-[url(https://static.catherine-fc.com/media/reject_cfc.jpeg)] bg-contain bg-center [background-repeat:no-repeat]" />
+      <div className="mx-auto aspect-[500/471] w-full max-w-[500px] bg-[url(https://static.catherine-fc.com/media/evo_logo_2026_shadow_drop.png)] bg-contain bg-center [background-repeat:no-repeat]" />
+      <div className="mx-auto h-12 w-full max-w-[900px] sm:h-[100px]" />
+      <div className="mx-auto aspect-[846/285] w-full max-w-[846px] bg-[url(https://static.catherine-fc.com/media/kaisaikettei3.png)] bg-contain bg-center" />
+      <div className="mx-auto h-12 w-full max-w-[900px] sm:h-[100px]" />
+      <div className="mx-auto flex w-full max-w-[900px] flex-col items-stretch gap-4 bg-contain [background-repeat:no-repeat] md:flex-row md:gap-0">
+        <div className="flex w-full justify-center md:w-auto md:flex-1">
+          <div className="bg-[url(https://static.catherine-fc.com/media/catherine_logo_classic.png)] bg-contain bg-center [background-repeat:no-repeat]">
+            <a
+              className="mx-auto block aspect-[412/389] w-full max-w-[412px] min-h-[200px]"
+              href="https://tonamel.com/competition/u2GRP"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              &nbsp;
+            </a>
+          </div>
+        </div>
+        <div className="flex w-full justify-center md:w-auto md:flex-1">
+          <div className="bg-[url(https://static.catherine-fc.com/media/catherine_fullbody_logo.png)] bg-contain bg-center [background-repeat:no-repeat]">
+            <a
+              className="mx-auto block aspect-[517/319] w-full max-w-[517px] min-h-[180px]"
+              href="https://tonamel.com/competition/BxuNE"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              &nbsp;
+            </a>
+          </div>
+        </div>
+      </div>
+      <div className="mx-auto h-12 w-full max-w-[900px] sm:h-[100px]" />
+      <div className="mx-auto h-[70px] w-[113px] bg-[url(https://static.catherine-fc.com/media/twitch.png)] bg-contain [background-repeat:no-repeat]">
+        <a
+          className="block h-[70px] w-[113px]"
+          href="https://www.twitch.tv/catherine_faito_crab"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          &nbsp;
+        </a>
+      </div>
+    </div>
+  );
+}

nextjs/src/app/(site)/players/page.tsx

@@ -0,0 +1,35 @@
+import { redirect } from 'next/navigation';
+
+import { PlayersList } from '@/components/PlayersList';
+import { getAllPlayersPaged, PLAYERS_PAGE_SIZE } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+type PageProps = {
+  searchParams: Promise<{ page?: string }>;
+};
+
+export default async function PlayersPage({ searchParams }: PageProps) {
+  const { page: pageRaw } = await searchParams;
+  const parsed = parseInt(pageRaw ?? '1', 10);
+  const page = Number.isFinite(parsed) && parsed >= 1 ? Math.floor(parsed) : 1;
+
+  const { players, total } = await getAllPlayersPaged(page);
+  const totalPages = Math.max(1, Math.ceil(total / PLAYERS_PAGE_SIZE));
+
+  if (page > totalPages) {
+    redirect(totalPages <= 1 ? '/players' : `/players?page=${totalPages}`);
+  }
+
+  return (
+    <PlayersList
+      players={players}
+      pagination={{
+        page,
+        total,
+        pageSize: PLAYERS_PAGE_SIZE,
+        basePath: '/players',
+      }}
+    />
+  );
+}

nextjs/src/app/(site)/tournaments/[tournament_key]/players/page.tsx

@@ -0,0 +1,43 @@
+import { notFound, redirect } from 'next/navigation';
+
+import { PlayersList } from '@/components/PlayersList';
+import { getPlayersForTournamentPaged, PLAYERS_PAGE_SIZE } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+type PageProps = {
+  params: Promise<{ tournament_key: string }>;
+  searchParams: Promise<{ page?: string }>;
+};
+
+export default async function TournamentPlayersPage({ params, searchParams }: PageProps) {
+  const { tournament_key } = await params;
+  const { page: pageRaw } = await searchParams;
+  const parsed = parseInt(pageRaw ?? '1', 10);
+  const page = Number.isFinite(parsed) && parsed >= 1 ? Math.floor(parsed) : 1;
+
+  const result = await getPlayersForTournamentPaged(tournament_key, page);
+  if (result === null) {
+    notFound();
+  }
+
+  const { players, total } = result;
+  const totalPages = Math.max(1, Math.ceil(total / PLAYERS_PAGE_SIZE));
+  const basePath = `/tournaments/${encodeURIComponent(tournament_key)}/players`;
+
+  if (page > totalPages) {
+    redirect(totalPages <= 1 ? basePath : `${basePath}?page=${totalPages}`);
+  }
+
+  return (
+    <PlayersList
+      players={players}
+      pagination={{
+        page,
+        total,
+        pageSize: PLAYERS_PAGE_SIZE,
+        basePath,
+      }}
+    />
+  );
+}

nextjs/src/app/(site)/tournaments/[tournament_key]/scoreboard/page.tsx

@@ -0,0 +1,9 @@
+import { mainBody } from '@/lib/siteContentClasses';
+
+export default function ScoreboardPage() {
+  return (
+    <div className={mainBody}>
+      <div className="aspect-[567/485] w-full max-w-[567px] bg-[url(https://static.catherine-fc.com/media/scoreboard.png)] bg-contain bg-center [background-repeat:no-repeat]" />
+    </div>
+  );
+}

nextjs/src/app/(site)/tournaments/page.tsx

@@ -0,0 +1,7 @@
+export default function TournamentsPage() {
+  return (
+    <div>
+      <p>Tournaments</p>
+    </div>
+  );
+}

nextjs/src/app/admin/(dashboard)/archive/ArchiveAdminClient.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+
+import Link from 'next/link';
+
+import {
+  btn,
+  btnDanger,
+  card,
+  error as errorClass,
+  formWide,
+  hr,
+  input,
+  label,
+  rowActions,
+  sectionBlock,
+  sectionTitle,
+  title,
+} from '@/lib/adminUi';
+
+type ArchiveRow = {
+  id: number;
+  title: string;
+  youtube_id: string;
+};
+
+export function ArchiveAdminClient() {
+  const [items, setItems] = useState<ArchiveRow[]>([]);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [titleVal, setTitleVal] = useState('');
+  const [youtubeId, setYoutubeId] = useState('');
+
+  const load = useCallback(async () => {
+    setError('');
+    const res = await fetch('/api/admin/archive', { credentials: 'include' });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      setError((data as { error?: string }).error ?? 'Failed to load');
+      setLoading(false);
+      return;
+    }
+    setItems((data as { items: ArchiveRow[] }).items ?? []);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  function updateLocal(id: number, patch: Partial<ArchiveRow>) {
+    setItems((prev) => prev.map((r) => (r.id === id ? { ...r, ...patch } : r)));
+  }
+
+  async function save(row: ArchiveRow) {
+    setError('');
+    const res = await fetch(`/api/admin/archive/${row.id}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({ title: row.title, youtube_id: row.youtube_id }),
+    });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      setError((data as { error?: string }).error ?? 'Save failed');
+      return;
+    }
+    await load();
+  }
+
+  async function remove(id: number) {
+    if (!window.confirm('Delete?')) return;
+    setError('');
+    const res = await fetch(`/api/admin/archive/${id}`, { method: 'DELETE', credentials: 'include' });
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      setError((data as { error?: string }).error ?? 'Delete failed');
+      return;
+    }
+    await load();
+  }
+
+  async function add(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    const res = await fetch('/api/admin/archive', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({ title: titleVal, youtube_id: youtubeId }),
+    });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      setError((data as { error?: string }).error ?? 'Create failed');
+      return;
+    }
+    setTitleVal('');
+    setYoutubeId('');
+    await load();
+  }
+
+  return (
+    <div className={card}>
+      <p>
+        <Link href="/admin">← Dashboard</Link>
+      </p>
+      <h1 className={title}>Archive</h1>
+      {error ? <p className={errorClass}>{error}</p> : null}
+      {loading ? <p>Loading…</p> : null}
+      {!loading &&
+        items.map((row) => (
+          <div key={row.id} className={sectionBlock}>
+            <label className={label}>
+              title
+              <input
+                className={input}
+                value={row.title}
+                onChange={(e) => updateLocal(row.id, { title: e.target.value })}
+              />
+            </label>
+            <label className={label}>
+              youtube_id
+              <input
+                className={input}
+                value={row.youtube_id}
+                onChange={(e) => updateLocal(row.id, { youtube_id: e.target.value })}
+              />
+            </label>
+            <div className={rowActions}>
+              <button type="button" className={btn} onClick={() => save(row)}>
+                Save
+              </button>
+              <button type="button" className={btnDanger} onClick={() => remove(row.id)}>
+                Delete
+              </button>
+            </div>
+          </div>
+        ))}
+
+      <hr className={hr} />
+      <h2 className={sectionTitle}>New entry</h2>
+      <form className={formWide} onSubmit={add}>
+        <label className={label}>
+          title
+          <input className={input} value={titleVal} onChange={(e) => setTitleVal(e.target.value)} required />
+        </label>
+        <label className={label}>
+          youtube_id
+          <input className={input} value={youtubeId} onChange={(e) => setYoutubeId(e.target.value)} required />
+        </label>
+        <button className={btn} type="submit">
+          Add
+        </button>
+      </form>
+    </div>
+  );
+}

nextjs/src/app/admin/(dashboard)/archive/page.tsx

@@ -0,0 +1,8 @@
+import { requireAdmin } from '@/lib/auth/requireAdmin';
+
+import { ArchiveAdminClient } from './ArchiveAdminClient';
+
+export default async function AdminArchivePage() {
+  await requireAdmin();
+  return <ArchiveAdminClient />;
+}

nextjs/src/app/admin/(dashboard)/guide/GuideAdminClient.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+
+import Link from 'next/link';
+
+import {
+  btn,
+  btnDanger,
+  card,
+  error as errorClass,
+  formWide,
+  hr,
+  input,
+  label,
+  rowActions,
+  sectionBlock,
+  sectionTitle,
+  textarea,
+  title,
+} from '@/lib/adminUi';
+
+type GuideRow = {
+  id: number;
+  title: string;
+  description: string | null;
+  youtube_id: string;
+};
+
+const field = `${input} ${textarea}`;
+
+export function GuideAdminClient() {
+  const [items, setItems] = useState<GuideRow[]>([]);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [titleVal, setTitleVal] = useState('');
+  const [description, setDescription] = useState('');
+  const [youtubeId, setYoutubeId] = useState('');
+
+  const load = useCallback(async () => {
+    setError('');
+    const res = await fetch('/api/admin/guide', { credentials: 'include' });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      setError((data as { error?: string }).error ?? 'Failed to load');
+      setLoading(false);
+      return;
+    }
+    setItems((data as { items: GuideRow[] }).items ?? []);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  function updateLocal(id: number, patch: Partial<GuideRow>) {
+    setItems((prev) => prev.map((r) => (r.id === id ? { ...r, ...patch } : r)));
+  }
+
+  async function save(row: GuideRow) {
+    setError('');
+    const res = await fetch(`/api/admin/guide/${row.id}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({
+        title: row.title,
+        description: row.description ?? '',
+        youtube_id: row.youtube_id,
+      }),
+    });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      setError((data as { error?: string }).error ?? 'Save failed');
+      return;
+    }
+    await load();
+  }
+
+  async function remove(id: number) {
+    if (!window.confirm('Delete this entry?')) return;
+    setError('');
+    const res = await fetch(`/api/admin/guide/${id}`, { method: 'DELETE', credentials: 'include' });
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      setError((data as { error?: string }).error ?? 'Delete failed');
+      return;
+    }
+    await load();
+  }
+
+  async function add(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    const res = await fetch('/api/admin/guide', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({ title: titleVal, description, youtube_id: youtubeId }),
+    });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      setError((data as { error?: string }).error ?? 'Create failed');
+      return;
+    }
+    setTitleVal('');
+    setDescription('');
+    setYoutubeId('');
+    await load();
+  }
+
+  return (
+    <div className={card}>
+      <p>
+        <Link href="/admin">← Dashboard</Link>
+      </p>
+      <h1 className={title}>Guide</h1>
+      {error ? <p className={errorClass}>{error}</p> : null}
+      {loading ? <p>Loading…</p> : null}
+      {!loading &&
+        items.map((row) => (
+          <div key={row.id} className={sectionBlock}>
+            <label className={label}>
+              title
+              <input
+                className={input}
+                value={row.title}
+                onChange={(e) => updateLocal(row.id, { title: e.target.value })}
+              />
+            </label>
+            <label className={label}>
+              description
+              <textarea
+                className={field}
+                value={row.description ?? ''}
+                onChange={(e) => updateLocal(row.id, { description: e.target.value })}
+              />
+            </label>
+            <label className={label}>
+              youtube_id
+              <input
+                className={input}
+                value={row.youtube_id}
+                onChange={(e) => updateLocal(row.id, { youtube_id: e.target.value })}
+              />
+            </label>
+            <div className={rowActions}>
+              <button type="button" className={btn} onClick={() => save(row)}>
+                Save
+              </button>
+              <button type="button" className={btnDanger} onClick={() => remove(row.id)}>
+                Delete
+              </button>
+            </div>
+          </div>
+        ))}
+
+      <hr className={hr} />
+      <h2 className={sectionTitle}>New entry</h2>
+      <form className={formWide} onSubmit={add}>
+        <label className={label}>
+          title
+          <input className={input} value={titleVal} onChange={(e) => setTitleVal(e.target.value)} required />
+        </label>
+        <label className={label}>
+          description
+          <textarea className={field} value={description} onChange={(e) => setDescription(e.target.value)} />
+        </label>
+        <label className={label}>
+          youtube_id
+          <input className={input} value={youtubeId} onChange={(e) => setYoutubeId(e.target.value)} required />
+        </label>
+        <button className={btn} type="submit">
+          Add
+        </button>
+      </form>
+    </div>
+  );
+}

nextjs/src/app/admin/(dashboard)/guide/page.tsx

@@ -0,0 +1,8 @@
+import { requireAdmin } from '@/lib/auth/requireAdmin';
+
+import { GuideAdminClient } from './GuideAdminClient';
+
+export default async function AdminGuidePage() {
+  await requireAdmin();
+  return <GuideAdminClient />;
+}

nextjs/src/app/admin/(dashboard)/layout.tsx

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+
+import { requireLogin } from '@/lib/auth/requireAdmin';
+
+export default async function AdminDashboardLayout({ children }: { children: ReactNode }) {
+  await requireLogin();
+  return <>{children}</>;
+}

nextjs/src/app/admin/(dashboard)/page.tsx

@@ -0,0 +1,59 @@
+import Link from 'next/link';
+
+import { LogoutButton } from '@/components/admin/LogoutButton';
+import { card, error, sub, title } from '@/lib/adminUi';
+import { getSessionUser } from '@/lib/auth/session';
+
+export default async function AdminDashboardPage() {
+  const user = await getSessionUser();
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <div className={card}>
+      <h1 className={title}>Admin</h1>
+      <p className={sub}>
+        Signed in as <strong>{user.email}</strong>
+        {user.is_admin ? ' (administrator)' : ''}
+      </p>
+      {!user.is_admin && (
+        <p className={error}>
+          You do not have permission to edit content. Ask an administrator to grant admin access.
+        </p>
+      )}
+      {user.is_admin && (
+        <ul className="leading-relaxed">
+          <li>
+            <Link className="text-blue-600 hover:underline" href="/admin/users">
+              Users (approval &amp; roles)
+            </Link>
+          </li>
+          <li>
+            <Link className="text-blue-600 hover:underline" href="/admin/players">
+              Players
+            </Link>
+          </li>
+          <li>
+            <Link className="text-blue-600 hover:underline" href="/admin/guide">
+              Guide
+            </Link>
+          </li>
+          <li>
+            <Link className="text-blue-600 hover:underline" href="/admin/archive">
+              Archive
+            </Link>
+          </li>
+          <li>
+            <Link className="text-blue-600 hover:underline" href="/admin/qa">
+              Q&amp;A
+            </Link>
+          </li>
+        </ul>
+      )}
+      <div className="mt-4">
+        <LogoutButton />
+      </div>
+    </div>
+  );
+}

nextjs/src/app/admin/(dashboard)/players/PlayersAdminClient.tsx

@@ -0,0 +1,266 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+
+import Link from 'next/link';
+
+import {
+  btn,
+  btnDanger,
+  card,
+  error as errorClass,
+  formWide,
+  hr,
+  input,
+  label,
+  metaLine,
+  rowActions,
+  sectionBlock,
+  sectionTitle,
+  textarea,
+  title,
+} from '@/lib/adminUi';
+
+type Char = { id: number; name_id: string; name: string; name_jp: string };
+type PlayerRow = {
+  id: number;
+  player_key: string;
+  player_name: string;
+  description: string | null;
+  image: string | null;
+  character_id: string | null;
+  name_id?: string;
+  name_jp?: string;
+};
+
+const field = `${input} ${textarea}`;
+
+export function PlayersAdminClient() {
+  const [players, setPlayers] = useState<PlayerRow[]>([]);
+  const [characters, setCharacters] = useState<Char[]>([]);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  const [playerKey, setPlayerKey] = useState('');
+  const [playerName, setPlayerName] = useState('');
+  const [description, setDescription] = useState('');
+  const [image, setImage] = useState('');
+  const [characterId, setCharacterId] = useState('');
+
+  const load = useCallback(async () => {
+    setError('');
+    const [pr, cr] = await Promise.all([
+      fetch('/api/admin/players', { credentials: 'include' }),
+      fetch('/api/admin/characters', { credentials: 'include' }),
+    ]);
+    const pj = await pr.json().catch(() => ({}));
+    const cj = await cr.json().catch(() => ({}));
+    if (!pr.ok) {
+      setError((pj as { error?: string }).error ?? 'Failed to load players');
+      setLoading(false);
+      return;
+    }
+    if (!cr.ok) {
+      setError((cj as { error?: string }).error ?? 'Failed to load characters');
+      setLoading(false);
+      return;
+    }
+    setPlayers((pj as { players: PlayerRow[] }).players ?? []);
+    setCharacters((cj as { characters: Char[] }).characters ?? []);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  async function addPlayer(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    const res = await fetch('/api/admin/players', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({
+        player_key: playerKey,
+        player_name: playerName,
+        description,
+        image: image || null,
+        character_id: characterId,
+      }),
+    });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      setError((data as { error?: string }).error ?? 'Create failed');
+      return;
+    }
+    setPlayerKey('');
+    setPlayerName('');
+    setDescription('');
+    setImage('');
+    setCharacterId('');
+    await load();
+  }
+
+  function updateLocal(id: number, patch: Partial<PlayerRow>) {
+    setPlayers((prev) => prev.map((r) => (r.id === id ? { ...r, ...patch } : r)));
+  }
+
+  async function save(row: PlayerRow) {
+    setError('');
+    const cid = row.character_id != null && row.character_id !== '' ? String(row.character_id) : '';
+    if (!cid) {
+      setError('Character is required');
+      return;
+    }
+    const res = await fetch(`/api/admin/players/${row.id}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({
+        player_key: row.player_key,
+        player_name: row.player_name,
+        description: row.description ?? '',
+        image: row.image === '' || row.image == null ? null : row.image,
+        character_id: cid,
+      }),
+    });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      setError((data as { error?: string }).error ?? 'Save failed');
+      return;
+    }
+    await load();
+  }
+
+  async function remove(id: number) {
+    if (!window.confirm('Delete this player?')) return;
+    setError('');
+    const res = await fetch(`/api/admin/players/${id}`, { method: 'DELETE', credentials: 'include' });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      setError((data as { error?: string }).error ?? 'Delete failed');
+      return;
+    }
+    await load();
+  }
+
+  return (
+    <div className={card}>
+      <p>
+        <Link href="/admin">← Dashboard</Link>
+      </p>
+      <h1 className={title}>Players</h1>
+      {error ? <p className={errorClass}>{error}</p> : null}
+      {loading ? <p>Loading…</p> : null}
+      {!loading && (
+        <>
+          {players.map((p) => (
+            <div key={p.id} className={sectionBlock}>
+              <p className={metaLine}>
+                id: {p.id}
+                {p.name_jp ? ` · ${p.name_jp}` : ''}
+              </p>
+              <label className={label}>
+                player_key
+                <input
+                  className={input}
+                  value={p.player_key}
+                  onChange={(e) => updateLocal(p.id, { player_key: e.target.value })}
+                />
+              </label>
+              <label className={label}>
+                player_name
+                <input
+                  className={input}
+                  value={p.player_name}
+                  onChange={(e) => updateLocal(p.id, { player_name: e.target.value })}
+                />
+              </label>
+              <label className={label}>
+                description
+                <textarea
+                  className={field}
+                  value={p.description ?? ''}
+                  onChange={(e) => updateLocal(p.id, { description: e.target.value })}
+                />
+              </label>
+              <label className={label}>
+                image URL (optional)
+                <input
+                  className={input}
+                  value={p.image ?? ''}
+                  onChange={(e) => updateLocal(p.id, { image: e.target.value || null })}
+                />
+              </label>
+              <label className={label}>
+                character
+                <select
+                  className={input}
+                  value={p.character_id != null && p.character_id !== '' ? String(p.character_id) : ''}
+                  onChange={(e) => updateLocal(p.id, { character_id: e.target.value })}
+                  required
+                >
+                  <option value="">—</option>
+                  {characters.map((c) => (
+                    <option key={c.id} value={c.id}>
+                      {c.name_jp} ({c.name_id})
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <div className={rowActions}>
+                <button type="button" className={btn} onClick={() => save(p)}>
+                  Save
+                </button>
+                <button type="button" className={btnDanger} onClick={() => remove(p.id)}>
+                  Delete
+                </button>
+              </div>
+            </div>
+          ))}
+
+          <hr className={hr} />
+          <h2 className={sectionTitle}>Add player</h2>
+          <form className={formWide} onSubmit={addPlayer}>
+            <label className={label}>
+              player_key
+              <input className={input} value={playerKey} onChange={(e) => setPlayerKey(e.target.value)} required />
+            </label>
+            <label className={label}>
+              player_name
+              <input className={input} value={playerName} onChange={(e) => setPlayerName(e.target.value)} required />
+            </label>
+            <label className={label}>
+              description
+              <textarea className={field} value={description} onChange={(e) => setDescription(e.target.value)} />
+            </label>
+            <label className={label}>
+              image URL (optional)
+              <input className={input} value={image} onChange={(e) => setImage(e.target.value)} />
+            </label>
+            <label className={label}>
+              character
+              <select
+                className={input}
+                value={characterId}
+                onChange={(e) => setCharacterId(e.target.value)}
+                required
+              >
+                <option value="">—</option>
+                {characters.map((c) => (
+                  <option key={c.id} value={c.id}>
+                    {c.name_jp} ({c.name_id})
+                  </option>
+                ))}
+              </select>
+            </label>
+            <button className={btn} type="submit">
+              Add
+            </button>
+          </form>
+        </>
+      )}
+    </div>
+  );
+}

nextjs/src/app/admin/(dashboard)/players/page.tsx

@@ -0,0 +1,8 @@
+import { requireAdmin } from '@/lib/auth/requireAdmin';
+
+import { PlayersAdminClient } from './PlayersAdminClient';
+
+export default async function AdminPlayersPage() {
+  await requireAdmin();
+  return <PlayersAdminClient />;
+}

nextjs/src/app/admin/(dashboard)/qa/QaAdminClient.tsx

@@ -0,0 +1,171 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+
+import Link from 'next/link';
+
+import {
+  btn,
+  btnDanger,
+  card,
+  error as errorClass,
+  formWide,
+  hr,
+  input,
+  label,
+  rowActions,
+  sectionBlock,
+  sectionTitle,
+  textarea,
+  title,
+} from '@/lib/adminUi';
+
+type ContactRow = {
+  id: number;
+  question: string;
+  answer: string;
+};
+
+const field = `${input} ${textarea}`;
+
+export function QaAdminClient() {
+  const [items, setItems] = useState<ContactRow[]>([]);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [question, setQuestion] = useState('');
+  const [answer, setAnswer] = useState('');
+
+  const load = useCallback(async () => {
+    setError('');
+    const res = await fetch('/api/admin/contact', { credentials: 'include' });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      setError((data as { error?: string }).error ?? 'Failed to load');
+      setLoading(false);
+      return;
+    }
+    setItems((data as { items: ContactRow[] }).items ?? []);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  function updateLocal(id: number, patch: Partial<ContactRow>) {
+    setItems((prev) => prev.map((r) => (r.id === id ? { ...r, ...patch } : r)));
+  }
+
+  async function save(row: ContactRow) {
+    setError('');
+    const res = await fetch(`/api/admin/contact/${row.id}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({ question: row.question, answer: row.answer }),
+    });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      setError((data as { error?: string }).error ?? 'Save failed');
+      return;
+    }
+    await load();
+  }
+
+  async function remove(id: number) {
+    if (!window.confirm('Delete?')) return;
+    setError('');
+    const res = await fetch(`/api/admin/contact/${id}`, { method: 'DELETE', credentials: 'include' });
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      setError((data as { error?: string }).error ?? 'Delete failed');
+      return;
+    }
+    await load();
+  }
+
+  async function add(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    const res = await fetch('/api/admin/contact', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({ question, answer }),
+    });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      setError((data as { error?: string }).error ?? 'Create failed');
+      return;
+    }
+    setQuestion('');
+    setAnswer('');
+    await load();
+  }
+
+  return (
+    <div className={card}>
+      <p>
+        <Link href="/admin">← Dashboard</Link>
+      </p>
+      <h1 className={title}>Q&amp;A</h1>
+      {error ? <p className={errorClass}>{error}</p> : null}
+      {loading ? <p>Loading…</p> : null}
+      {!loading &&
+        items.map((row) => (
+          <div key={row.id} className={sectionBlock}>
+            <label className={label}>
+              question
+              <textarea
+                className={field}
+                value={row.question}
+                onChange={(e) => updateLocal(row.id, { question: e.target.value })}
+              />
+            </label>
+            <label className={label}>
+              answer
+              <textarea
+                className={field}
+                value={row.answer}
+                onChange={(e) => updateLocal(row.id, { answer: e.target.value })}
+              />
+            </label>
+            <div className={rowActions}>
+              <button type="button" className={btn} onClick={() => save(row)}>
+                Save
+              </button>
+              <button type="button" className={btnDanger} onClick={() => remove(row.id)}>
+                Delete
+              </button>
+            </div>
+          </div>
+        ))}
+
+      <hr className={hr} />
+      <h2 className={sectionTitle}>New Q&amp;A</h2>
+      <form className={formWide} onSubmit={add}>
+        <label className={label}>
+          question
+          <textarea
+            className={field}
+            value={question}
+            onChange={(e) => setQuestion(e.target.value)}
+            required
+          />
+        </label>
+        <label className={label}>
+          answer
+          <textarea
+            className={field}
+            value={answer}
+            onChange={(e) => setAnswer(e.target.value)}
+            required
+          />
+        </label>
+        <button className={btn} type="submit">
+          Add
+        </button>
+      </form>
+    </div>
+  );
+}

nextjs/src/app/admin/(dashboard)/qa/page.tsx

@@ -0,0 +1,8 @@
+import { requireAdmin } from '@/lib/auth/requireAdmin';
+
+import { QaAdminClient } from './QaAdminClient';
+
+export default async function AdminQaPage() {
+  await requireAdmin();
+  return <QaAdminClient />;
+}

nextjs/src/app/admin/(dashboard)/users/UsersAdminClient.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+
+import Link from 'next/link';
+
+import { card, error as errorClass, sub, table, th, thTd, title } from '@/lib/adminUi';
+
+type UserRow = {
+  id: number;
+  email: string;
+  is_approved: number | boolean;
+  is_admin: number | boolean;
+  created_at: string;
+};
+
+export function UsersAdminClient() {
+  const [users, setUsers] = useState<UserRow[]>([]);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  const load = useCallback(async () => {
+    setError('');
+    const res = await fetch('/api/admin/users', { credentials: 'include' });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      setError((data as { error?: string }).error ?? 'Failed to load');
+      setLoading(false);
+      return;
+    }
+    setUsers((data as { users: UserRow[] }).users ?? []);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  async function patch(id: number, body: { is_approved?: boolean; is_admin?: boolean }) {
+    setError('');
+    const res = await fetch(`/api/admin/users/${id}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify(body),
+    });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      setError((data as { error?: string }).error ?? 'Update failed');
+      return;
+    }
+    await load();
+  }
+
+  return (
+    <div className={card}>
+      <p>
+        <Link href="/admin">← Dashboard</Link>
+      </p>
+      <h1 className={title}>Users</h1>
+      <p className={sub}>Approve new accounts and grant admin role.</p>
+      {error ? <p className={errorClass}>{error}</p> : null}
+      {loading ? <p>Loading…</p> : null}
+      {!loading && (
+        <table className={table}>
+          <thead>
+            <tr>
+              <th className={`${thTd} ${th}`}>Email</th>
+              <th className={`${thTd} ${th}`}>Approved</th>
+              <th className={`${thTd} ${th}`}>Admin</th>
+              <th className={`${thTd} ${th}`}>Created</th>
+            </tr>
+          </thead>
+          <tbody>
+            {users.map((u) => (
+              <tr key={u.id}>
+                <td className={thTd}>{u.email}</td>
+                <td className={thTd}>
+                  <input
+                    type="checkbox"
+                    checked={Boolean(u.is_approved)}
+                    onChange={(e) => patch(u.id, { is_approved: e.target.checked })}
+                  />
+                </td>
+                <td className={thTd}>
+                  <input
+                    type="checkbox"
+                    checked={Boolean(u.is_admin)}
+                    onChange={(e) => patch(u.id, { is_admin: e.target.checked })}
+                  />
+                </td>
+                <td className={thTd}>{String(u.created_at)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}

nextjs/src/app/admin/(dashboard)/users/page.tsx

@@ -0,0 +1,8 @@
+import { requireAdmin } from '@/lib/auth/requireAdmin';
+
+import { UsersAdminClient } from './UsersAdminClient';
+
+export default async function AdminUsersPage() {
+  await requireAdmin();
+  return <UsersAdminClient />;
+}

nextjs/src/app/admin/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from 'next';
+import type { ReactNode } from 'react';
+
+import Link from 'next/link';
+
+import { nav, navLink, wrap } from '@/lib/adminUi';
+
+export const metadata: Metadata = {
+  title: 'Admin — Catherine League',
+  robots: 'noindex, nofollow',
+};
+
+export default function AdminRootLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className={wrap}>
+      <nav className={nav}>
+        <Link className={navLink} href="/">
+          ← Site
+        </Link>
+        <Link className={navLink} href="/admin/login">
+          Login
+        </Link>
+        <Link className={navLink} href="/admin/register">
+          Register
+        </Link>
+        <Link className={navLink} href="/admin">
+          Dashboard
+        </Link>
+      </nav>
+      {children}
+    </div>
+  );
+}

nextjs/src/app/admin/login/page.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+import Link from 'next/link';
+
+import { btn, card, error as errorClass, form, input, label, sub, title } from '@/lib/adminUi';
+
+export default function AdminLoginPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+        credentials: 'include',
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        setError((data as { error?: string }).error ?? 'Login failed');
+        setLoading(false);
+        return;
+      }
+      router.push('/admin');
+      router.refresh();
+    } catch {
+      setError('Network error');
+    }
+    setLoading(false);
+  }
+
+  return (
+    <div className={card}>
+      <h1 className={title}>Admin login</h1>
+      <p className={sub}>
+        No account? <Link href="/admin/register">Register</Link> — an administrator must approve you before you can sign in.
+      </p>
+      <form className={form} onSubmit={onSubmit}>
+        <label className={label}>
+          Email
+          <input
+            className={input}
+            type="email"
+            autoComplete="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+        </label>
+        <label className={label}>
+          Password
+          <input
+            className={input}
+            type="password"
+            autoComplete="current-password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+        </label>
+        {error ? <p className={errorClass}>{error}</p> : null}
+        <button className={btn} type="submit" disabled={loading}>
+          {loading ? 'Signing in…' : 'Sign in'}
+        </button>
+      </form>
+    </div>
+  );
+}

nextjs/src/app/admin/no-access/page.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link';
+
+import { card, sub, title } from '@/lib/adminUi';
+
+export default function AdminNoAccessPage() {
+  return (
+    <div className={card}>
+      <h1 className={title}>No admin access</h1>
+      <p className={sub}>
+        Your account is approved, but you do not have administrator privileges for content management. Ask an existing admin to
+        grant you the admin role.
+      </p>
+      <p>
+        <Link href="/admin">Dashboard</Link>
+      </p>
+    </div>
+  );
+}

nextjs/src/app/admin/pending/page.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link';
+
+import { card, sub, title } from '@/lib/adminUi';
+
+export default function AdminPendingPage() {
+  return (
+    <div className={card}>
+      <h1 className={title}>Account pending</h1>
+      <p className={sub}>
+        Your account has not been approved yet, or approval was revoked. You cannot use the admin area until an administrator
+        approves you.
+      </p>
+      <p>
+        <Link href="/admin/login">Back to login</Link>
+      </p>
+    </div>
+  );
+}

nextjs/src/app/admin/register/page.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { useState } from 'react';
+
+import Link from 'next/link';
+
+import { btn, card, error as errorClass, form, input, label, sub, success as successClass, title } from '@/lib/adminUi';
+
+export default function AdminRegisterPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    setSuccess('');
+    setLoading(true);
+    try {
+      const res = await fetch('/api/auth/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        setError((data as { error?: string }).error ?? 'Registration failed');
+        setLoading(false);
+        return;
+      }
+      setSuccess((data as { message?: string }).message ?? 'Registered.');
+      setEmail('');
+      setPassword('');
+    } catch {
+      setError('Network error');
+    }
+    setLoading(false);
+  }
+
+  return (
+    <div className={card}>
+      <h1 className={title}>Register</h1>
+      <p className={sub}>
+        After registering, wait for an administrator to approve your account. Then you can{' '}
+        <Link href="/admin/login">sign in</Link>.
+      </p>
+      <form className={form} onSubmit={onSubmit}>
+        <label className={label}>
+          Email
+          <input
+            className={input}
+            type="email"
+            autoComplete="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+        </label>
+        <label className={label}>
+          Password (min. 8 characters)
+          <input
+            className={input}
+            type="password"
+            autoComplete="new-password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            minLength={8}
+            required
+          />
+        </label>
+        {error ? <p className={errorClass}>{error}</p> : null}
+        {success ? <p className={successClass}>{success}</p> : null}
+        <button className={btn} type="submit" disabled={loading}>
+          {loading ? 'Submitting…' : 'Register'}
+        </button>
+      </form>
+    </div>
+  );
+}

nextjs/src/app/api/admin/archive/[id]/route.ts

@@ -0,0 +1,63 @@
+import { NextResponse } from 'next/server';
+import type { RowDataPacket } from 'mysql2';
+
+import { requireAdminApi } from '@/lib/auth/apiAuth';
+import { getPool } from '@/lib/db';
+
+export const dynamic = 'force-dynamic';
+
+type Ctx = { params: Promise<{ id: string }> };
+
+export async function PATCH(request: Request, context: Ctx) {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const { id: idParam } = await context.params;
+  const id = parseInt(idParam, 10);
+  if (Number.isNaN(id)) {
+    return NextResponse.json({ error: 'Invalid id' }, { status: 400 });
+  }
+
+  const body = await request.json();
+  const updates: string[] = [];
+  const values: unknown[] = [];
+
+  if (body.title !== undefined) {
+    updates.push('title = ?');
+    values.push(String(body.title).trim());
+  }
+  if (body.youtube_id !== undefined) {
+    updates.push('youtube_id = ?');
+    values.push(String(body.youtube_id).trim());
+  }
+
+  if (updates.length === 0) {
+    return NextResponse.json({ error: 'No fields to update' }, { status: 400 });
+  }
+
+  values.push(id);
+  const pool = getPool();
+  await pool.query(`UPDATE archive SET ${updates.join(', ')} WHERE id = ?`, values);
+
+  const [rows] = await pool.query<RowDataPacket[]>('SELECT * FROM archive WHERE id = ?', [id]);
+  return NextResponse.json({ item: rows[0] });
+}
+
+export async function DELETE(_request: Request, context: Ctx) {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const { id: idParam } = await context.params;
+  const id = parseInt(idParam, 10);
+  if (Number.isNaN(id)) {
+    return NextResponse.json({ error: 'Invalid id' }, { status: 400 });
+  }
+
+  const pool = getPool();
+  await pool.query('DELETE FROM archive WHERE id = ?', [id]);
+  return NextResponse.json({ ok: true });
+}

nextjs/src/app/api/admin/archive/route.ts

@@ -0,0 +1,37 @@
+import { NextResponse } from 'next/server';
+import type { RowDataPacket } from 'mysql2';
+
+import { requireAdminApi } from '@/lib/auth/apiAuth';
+import { getPool } from '@/lib/db';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>('SELECT * FROM archive ORDER BY id ASC');
+  return NextResponse.json({ items: rows });
+}
+
+export async function POST(request: Request) {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const body = await request.json();
+  const title = String(body.title ?? '').trim();
+  const youtubeId = String(body.youtube_id ?? '').trim();
+
+  if (!title || !youtubeId) {
+    return NextResponse.json({ error: 'title and youtube_id required' }, { status: 400 });
+  }
+
+  const pool = getPool();
+  await pool.query('INSERT INTO archive (title, youtube_id) VALUES (?, ?)', [title, youtubeId]);
+  return NextResponse.json({ ok: true });
+}

nextjs/src/app/api/admin/characters/route.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from 'next/server';
+import type { RowDataPacket } from 'mysql2';
+
+import { requireAdminApi } from '@/lib/auth/apiAuth';
+import { getPool } from '@/lib/db';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>(
+    'SELECT id, name_id, name, name_jp FROM characters ORDER BY id ASC'
+  );
+  return NextResponse.json({ characters: rows });
+}

nextjs/src/app/api/admin/contact/[id]/route.ts

@@ -0,0 +1,63 @@
+import { NextResponse } from 'next/server';
+import type { RowDataPacket } from 'mysql2';
+
+import { requireAdminApi } from '@/lib/auth/apiAuth';
+import { getPool } from '@/lib/db';
+
+export const dynamic = 'force-dynamic';
+
+type Ctx = { params: Promise<{ id: string }> };
+
+export async function PATCH(request: Request, context: Ctx) {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const { id: idParam } = await context.params;
+  const id = parseInt(idParam, 10);
+  if (Number.isNaN(id)) {
+    return NextResponse.json({ error: 'Invalid id' }, { status: 400 });
+  }
+
+  const body = await request.json();
+  const updates: string[] = [];
+  const values: unknown[] = [];
+
+  if (body.question !== undefined) {
+    updates.push('question = ?');
+    values.push(String(body.question).trim());
+  }
+  if (body.answer !== undefined) {
+    updates.push('answer = ?');
+    values.push(String(body.answer).trim());
+  }
+
+  if (updates.length === 0) {
+    return NextResponse.json({ error: 'No fields to update' }, { status: 400 });
+  }
+
+  values.push(id);
+  const pool = getPool();
+  await pool.query(`UPDATE contact SET ${updates.join(', ')} WHERE id = ?`, values);
+
+  const [rows] = await pool.query<RowDataPacket[]>('SELECT * FROM contact WHERE id = ?', [id]);
+  return NextResponse.json({ item: rows[0] });
+}
+
+export async function DELETE(_request: Request, context: Ctx) {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const { id: idParam } = await context.params;
+  const id = parseInt(idParam, 10);
+  if (Number.isNaN(id)) {
+    return NextResponse.json({ error: 'Invalid id' }, { status: 400 });
+  }
+
+  const pool = getPool();
+  await pool.query('DELETE FROM contact WHERE id = ?', [id]);
+  return NextResponse.json({ ok: true });
+}

nextjs/src/app/api/admin/contact/route.ts

@@ -0,0 +1,37 @@
+import { NextResponse } from 'next/server';
+import type { RowDataPacket } from 'mysql2';
+
+import { requireAdminApi } from '@/lib/auth/apiAuth';
+import { getPool } from '@/lib/db';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>('SELECT * FROM contact ORDER BY id ASC');
+  return NextResponse.json({ items: rows });
+}
+
+export async function POST(request: Request) {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const body = await request.json();
+  const question = String(body.question ?? '').trim();
+  const answer = String(body.answer ?? '').trim();
+
+  if (!question || !answer) {
+    return NextResponse.json({ error: 'question and answer required' }, { status: 400 });
+  }
+
+  const pool = getPool();
+  await pool.query('INSERT INTO contact (question, answer) VALUES (?, ?)', [question, answer]);
+  return NextResponse.json({ ok: true });
+}

nextjs/src/app/api/admin/guide/[id]/route.ts

@@ -0,0 +1,67 @@
+import { NextResponse } from 'next/server';
+import type { RowDataPacket } from 'mysql2';
+
+import { requireAdminApi } from '@/lib/auth/apiAuth';
+import { getPool } from '@/lib/db';
+
+export const dynamic = 'force-dynamic';
+
+type Ctx = { params: Promise<{ id: string }> };
+
+export async function PATCH(request: Request, context: Ctx) {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const { id: idParam } = await context.params;
+  const id = parseInt(idParam, 10);
+  if (Number.isNaN(id)) {
+    return NextResponse.json({ error: 'Invalid id' }, { status: 400 });
+  }
+
+  const body = await request.json();
+  const updates: string[] = [];
+  const values: unknown[] = [];
+
+  if (body.title !== undefined) {
+    updates.push('title = ?');
+    values.push(String(body.title).trim());
+  }
+  if (body.description !== undefined) {
+    updates.push('description = ?');
+    values.push(String(body.description));
+  }
+  if (body.youtube_id !== undefined) {
+    updates.push('youtube_id = ?');
+    values.push(String(body.youtube_id).trim());
+  }
+
+  if (updates.length === 0) {
+    return NextResponse.json({ error: 'No fields to update' }, { status: 400 });
+  }
+
+  values.push(id);
+  const pool = getPool();
+  await pool.query(`UPDATE guide SET ${updates.join(', ')} WHERE id = ?`, values);
+
+  const [rows] = await pool.query<RowDataPacket[]>('SELECT * FROM guide WHERE id = ?', [id]);
+  return NextResponse.json({ item: rows[0] });
+}
+
+export async function DELETE(_request: Request, context: Ctx) {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const { id: idParam } = await context.params;
+  const id = parseInt(idParam, 10);
+  if (Number.isNaN(id)) {
+    return NextResponse.json({ error: 'Invalid id' }, { status: 400 });
+  }
+
+  const pool = getPool();
+  await pool.query('DELETE FROM guide WHERE id = ?', [id]);
+  return NextResponse.json({ ok: true });
+}

nextjs/src/app/api/admin/guide/route.ts

@@ -0,0 +1,41 @@
+import { NextResponse } from 'next/server';
+import type { RowDataPacket } from 'mysql2';
+
+import { requireAdminApi } from '@/lib/auth/apiAuth';
+import { getPool } from '@/lib/db';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>('SELECT * FROM guide ORDER BY id ASC');
+  return NextResponse.json({ items: rows });
+}
+
+export async function POST(request: Request) {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const body = await request.json();
+  const title = String(body.title ?? '').trim();
+  const description = String(body.description ?? '');
+  const youtubeId = String(body.youtube_id ?? '').trim();
+
+  if (!title || !youtubeId) {
+    return NextResponse.json({ error: 'title and youtube_id required' }, { status: 400 });
+  }
+
+  const pool = getPool();
+  await pool.query(
+    'INSERT INTO guide (title, description, youtube_id) VALUES (?, ?, ?)',
+    [title, description, youtubeId]
+  );
+  return NextResponse.json({ ok: true });
+}

nextjs/src/app/api/admin/players/[id]/route.ts

@@ -0,0 +1,124 @@
+import { NextResponse } from 'next/server';
+import type { RowDataPacket } from 'mysql2';
+
+import { requireAdminApi } from '@/lib/auth/apiAuth';
+import { getPool } from '@/lib/db';
+
+export const dynamic = 'force-dynamic';
+
+type Ctx = { params: Promise<{ id: string }> };
+
+export async function GET(_request: Request, context: Ctx) {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const { id: idParam } = await context.params;
+  const id = parseInt(idParam, 10);
+  if (Number.isNaN(id)) {
+    return NextResponse.json({ error: 'Invalid id' }, { status: 400 });
+  }
+
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>(
+    `SELECT p.id, p.player_key, p.player_name, p.description, p.image, p.character_id,
+            c.name_id, c.name, c.name_jp
+     FROM players p
+     LEFT JOIN characters c ON c.id = p.character_id
+     WHERE p.id = ?`,
+    [id]
+  );
+
+  if (rows.length === 0) {
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  }
+
+  return NextResponse.json({ player: rows[0] });
+}
+
+export async function PATCH(request: Request, context: Ctx) {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const { id: idParam } = await context.params;
+  const id = parseInt(idParam, 10);
+  if (Number.isNaN(id)) {
+    return NextResponse.json({ error: 'Invalid id' }, { status: 400 });
+  }
+
+  const body = await request.json();
+  const updates: string[] = [];
+  const values: unknown[] = [];
+
+  if (body.player_key !== undefined) {
+    updates.push('player_key = ?');
+    values.push(String(body.player_key).trim());
+  }
+  if (body.player_name !== undefined) {
+    updates.push('player_name = ?');
+    values.push(String(body.player_name).trim());
+  }
+  if (body.description !== undefined) {
+    updates.push('description = ?');
+    values.push(String(body.description));
+  }
+  if (body.image !== undefined) {
+    updates.push('image = ?');
+    values.push(body.image == null ? null : String(body.image));
+  }
+  if (body.character_id !== undefined) {
+    updates.push('character_id = ?');
+    values.push(String(parseInt(String(body.character_id), 10)));
+  }
+
+  if (updates.length === 0) {
+    return NextResponse.json({ error: 'No fields to update' }, { status: 400 });
+  }
+
+  values.push(id);
+  const pool = getPool();
+  await pool.query(`UPDATE players SET ${updates.join(', ')} WHERE id = ?`, values);
+
+  const [rows] = await pool.query<RowDataPacket[]>(
+    `SELECT p.id, p.player_key, p.player_name, p.description, p.image, p.character_id,
+            c.name_id, c.name, c.name_jp
+     FROM players p
+     LEFT JOIN characters c ON c.id = p.character_id
+     WHERE p.id = ?`,
+    [id]
+  );
+
+  return NextResponse.json({ player: rows[0] });
+}
+
+export async function DELETE(_request: Request, context: Ctx) {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const { id: idParam } = await context.params;
+  const id = parseInt(idParam, 10);
+  if (Number.isNaN(id)) {
+    return NextResponse.json({ error: 'Invalid id' }, { status: 400 });
+  }
+
+  const pool = getPool();
+  try {
+    await pool.query('DELETE FROM players WHERE id = ?', [id]);
+  } catch (e: unknown) {
+    const code = (e as { errno?: number })?.errno;
+    if (code === 1451) {
+      return NextResponse.json(
+        { error: 'Cannot delete player: referenced by tournament or other records' },
+        { status: 409 }
+      );
+    }
+    throw e;
+  }
+
+  return NextResponse.json({ ok: true });
+}

nextjs/src/app/api/admin/players/route.ts

@@ -0,0 +1,52 @@
+import { NextResponse } from 'next/server';
+import type { RowDataPacket } from 'mysql2';
+
+import { requireAdminApi } from '@/lib/auth/apiAuth';
+import { getPool } from '@/lib/db';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>(
+    `SELECT p.id, p.player_key, p.player_name, p.description, p.image, p.character_id,
+            c.name_id, c.name, c.name_jp
+     FROM players p
+     LEFT JOIN characters c ON c.id = p.character_id
+     ORDER BY p.id ASC`
+  );
+
+  return NextResponse.json({ players: rows });
+}
+
+export async function POST(request: Request) {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const body = await request.json();
+  const playerKey = String(body.player_key ?? '').trim();
+  const playerName = String(body.player_name ?? '').trim();
+  const description = String(body.description ?? '');
+  const image = body.image != null ? String(body.image) : null;
+  const characterId = parseInt(String(body.character_id), 10);
+
+  if (!playerKey || !playerName || Number.isNaN(characterId)) {
+    return NextResponse.json({ error: 'player_key, player_name, character_id required' }, { status: 400 });
+  }
+
+  const pool = getPool();
+  await pool.query(
+    `INSERT INTO players (player_key, player_name, description, image, character_id)
+     VALUES (?, ?, ?, ?, ?)`,
+    [playerKey, playerName, description, image, String(characterId)]
+  );
+
+  return NextResponse.json({ ok: true });
+}

nextjs/src/app/api/admin/users/[id]/route.ts

@@ -0,0 +1,63 @@
+import { NextResponse } from 'next/server';
+import type { RowDataPacket } from 'mysql2';
+
+import { requireAdminApi } from '@/lib/auth/apiAuth';
+import { getPool } from '@/lib/db';
+
+export const dynamic = 'force-dynamic';
+
+type Ctx = { params: Promise<{ id: string }> };
+
+export async function PATCH(request: Request, context: Ctx) {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const { id: idParam } = await context.params;
+  const id = parseInt(idParam, 10);
+  if (Number.isNaN(id)) {
+    return NextResponse.json({ error: 'Invalid id' }, { status: 400 });
+  }
+
+  const body = await request.json();
+  const isApproved = typeof body.is_approved === 'boolean' ? body.is_approved : undefined;
+  const isAdmin = typeof body.is_admin === 'boolean' ? body.is_admin : undefined;
+
+  if (isApproved === undefined && isAdmin === undefined) {
+    return NextResponse.json({ error: 'No changes' }, { status: 400 });
+  }
+
+  const pool = getPool();
+
+  if (id === auth.user.id && isApproved === false) {
+    return NextResponse.json({ error: 'Cannot revoke your own approval' }, { status: 400 });
+  }
+  if (id === auth.user.id && isAdmin === false) {
+    return NextResponse.json({ error: 'Cannot remove your own admin role' }, { status: 400 });
+  }
+
+  const updates: string[] = [];
+  const values: unknown[] = [];
+  if (isApproved !== undefined) {
+    updates.push('is_approved = ?');
+    values.push(isApproved ? 1 : 0);
+  }
+  if (isAdmin !== undefined) {
+    updates.push('is_admin = ?');
+    values.push(isAdmin ? 1 : 0);
+  }
+  values.push(id);
+
+  await pool.query(
+    `UPDATE admin_users SET ${updates.join(', ')} WHERE id = ?`,
+    values
+  );
+
+  const [rows] = await pool.query<RowDataPacket[]>(
+    'SELECT id, email, is_approved, is_admin, created_at FROM admin_users WHERE id = ?',
+    [id]
+  );
+
+  return NextResponse.json({ user: rows[0] ?? null });
+}

nextjs/src/app/api/admin/users/route.ts

@@ -0,0 +1,23 @@
+import { NextResponse } from 'next/server';
+import type { RowDataPacket } from 'mysql2';
+
+import { requireAdminApi } from '@/lib/auth/apiAuth';
+import { getPool } from '@/lib/db';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  const auth = await requireAdminApi();
+  if (!auth.ok) {
+    return auth.response;
+  }
+
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>(
+    `SELECT id, email, is_approved, is_admin, created_at
+     FROM admin_users
+     ORDER BY created_at DESC`
+  );
+
+  return NextResponse.json({ users: rows });
+}

nextjs/src/app/api/archive/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+
+import { getArchiveItems } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  try {
+    const data = await getArchiveItems();
+    return NextResponse.json(data);
+  } catch (e) {
+    console.error(e);
+    return NextResponse.json([], { status: 500 });
+  }
+}

nextjs/src/app/api/auth/login/route.ts

@@ -0,0 +1,58 @@
+import { NextResponse } from 'next/server';
+
+import { verifyPassword } from '@/lib/auth/password';
+import { createSession } from '@/lib/auth/session';
+import { getPool } from '@/lib/db';
+import type { RowDataPacket } from 'mysql2';
+
+export const dynamic = 'force-dynamic';
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const email = typeof body.email === 'string' ? body.email.trim().toLowerCase() : '';
+    const password = typeof body.password === 'string' ? body.password : '';
+
+    if (!email || !password) {
+      return NextResponse.json({ error: 'Email and password required' }, { status: 400 });
+    }
+
+    const pool = getPool();
+    const [rows] = await pool.query<RowDataPacket[]>(
+      'SELECT id, email, password_hash, is_approved, is_admin FROM admin_users WHERE email = ?',
+      [email]
+    );
+
+    if (rows.length === 0) {
+      return NextResponse.json({ error: 'Invalid email or password' }, { status: 401 });
+    }
+
+    const row = rows[0];
+    const ok = verifyPassword(password, row.password_hash as string);
+    if (!ok) {
+      return NextResponse.json({ error: 'Invalid email or password' }, { status: 401 });
+    }
+
+    if (!row.is_approved) {
+      return NextResponse.json(
+        { error: 'Your account is not approved yet.', code: 'PENDING_APPROVAL' },
+        { status: 403 }
+      );
+    }
+
+    await createSession(row.id as number);
+
+    return NextResponse.json({
+      ok: true,
+      user: {
+        id: row.id,
+        email: row.email,
+        is_approved: Boolean(row.is_approved),
+        is_admin: Boolean(row.is_admin),
+      },
+    });
+  } catch (e) {
+    console.error(e);
+    return NextResponse.json({ error: 'Login failed' }, { status: 500 });
+  }
+}

nextjs/src/app/api/auth/logout/route.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from 'next/server';
+
+import { destroySession } from '@/lib/auth/session';
+
+export const dynamic = 'force-dynamic';
+
+export async function POST() {
+  await destroySession();
+  return NextResponse.json({ ok: true });
+}

nextjs/src/app/api/auth/me/route.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from 'next/server';
+
+import { getSessionUser } from '@/lib/auth/session';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ user: null }, { status: 401 });
+  }
+  return NextResponse.json({
+    user: {
+      id: user.id,
+      email: user.email,
+      is_approved: user.is_approved,
+      is_admin: user.is_admin,
+    },
+  });
+}

nextjs/src/app/api/auth/register/route.ts

@@ -0,0 +1,37 @@
+import { NextResponse } from 'next/server';
+
+import { hashPassword } from '@/lib/auth/password';
+import { getPool } from '@/lib/db';
+
+export const dynamic = 'force-dynamic';
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const email = typeof body.email === 'string' ? body.email.trim().toLowerCase() : '';
+    const password = typeof body.password === 'string' ? body.password : '';
+
+    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      return NextResponse.json({ error: 'Valid email is required' }, { status: 400 });
+    }
+    if (password.length < 8) {
+      return NextResponse.json({ error: 'Password must be at least 8 characters' }, { status: 400 });
+    }
+
+    const passwordHash = hashPassword(password);
+    const pool = getPool();
+    await pool.query(
+      `INSERT INTO admin_users (email, password_hash, is_approved, is_admin) VALUES (?, ?, 0, 0)`,
+      [email, passwordHash]
+    );
+
+    return NextResponse.json({ ok: true, message: 'Registration submitted. Wait for an administrator to approve your account.' });
+  } catch (e: unknown) {
+    const code = (e as { code?: string })?.code;
+    if (code === 'ER_DUP_ENTRY') {
+      return NextResponse.json({ error: 'Email already registered' }, { status: 409 });
+    }
+    console.error(e);
+    return NextResponse.json({ error: 'Registration failed' }, { status: 500 });
+  }
+}

nextjs/src/app/api/contact/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+
+import { getContactItems } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  try {
+    const data = await getContactItems();
+    return NextResponse.json(data);
+  } catch (e) {
+    console.error(e);
+    return NextResponse.json([], { status: 500 });
+  }
+}

nextjs/src/app/api/guide/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+
+import { getGuideItems } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  try {
+    const data = await getGuideItems();
+    return NextResponse.json(data);
+  } catch (e) {
+    console.error(e);
+    return NextResponse.json([], { status: 500 });
+  }
+}

nextjs/src/app/api/players/[key]/route.ts

@@ -0,0 +1,23 @@
+import { NextResponse } from 'next/server';
+
+import { getPlayersForTournament } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+type RouteContext = {
+  params: Promise<{ key: string }>;
+};
+
+export async function GET(_request: Request, context: RouteContext) {
+  try {
+    const { key } = await context.params;
+    const data = await getPlayersForTournament(key);
+    if (data === null) {
+      return NextResponse.json({ error: 'Tournament not found' }, { status: 404 });
+    }
+    return NextResponse.json(data);
+  } catch (e) {
+    console.error(e);
+    return NextResponse.json([], { status: 500 });
+  }
+}

nextjs/src/app/api/players/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+
+import { getAllPlayers } from '@/lib/data';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  try {
+    const data = await getAllPlayers();
+    return NextResponse.json(data);
+  } catch (e) {
+    console.error(e);
+    return NextResponse.json([], { status: 500 });
+  }
+}

nextjs/src/app/globals.css

@@ -0,0 +1,18 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply m-0 font-mplus antialiased;
+  }
+
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  }
+
+  html,
+  body {
+    @apply min-h-full overflow-x-hidden;
+  }
+}

nextjs/src/app/layout.tsx

@@ -0,0 +1,42 @@
+import type { Metadata, Viewport } from 'next';
+import { Indie_Flower, M_PLUS_Rounded_1c } from 'next/font/google';
+import type { ReactNode } from 'react';
+
+import { I18nProvider } from '@/components/I18nProvider';
+
+import './globals.css';
+
+const indieFlower = Indie_Flower({
+  weight: '400',
+  subsets: ['latin'],
+  variable: '--font-indie',
+  display: 'swap',
+});
+
+const mPlusRounded = M_PLUS_Rounded_1c({
+  weight: ['400', '700'],
+  subsets: ['latin'],
+  variable: '--font-mplus',
+  display: 'swap',
+  adjustFontFallback: false,
+});
+
+export const metadata: Metadata = {
+  title: 'キャサリン faito crab',
+  description: 'キャサリン faito crab',
+  manifest: '/manifest.json',
+};
+
+export const viewport: Viewport = {
+  themeColor: '#ff2d7c',
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="ja" className={`${indieFlower.variable} ${mPlusRounded.variable}`}>
+      <body>
+        <I18nProvider>{children}</I18nProvider>
+      </body>
+    </html>
+  );
+}

nextjs/src/app/not-found.tsx

@@ -0,0 +1,7 @@
+export default function NotFound() {
+  return (
+    <div>
+      <p>404</p>
+    </div>
+  );
+}

nextjs/src/components/ArchiveVideoList.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+import YouTube from 'react-youtube';
+
+import { centerVideo, characterBlock, guideBody } from '@/lib/siteContentClasses';
+import type { IGuideItem } from '@/models/IGuideItem';
+
+type Props = {
+  items: IGuideItem[];
+};
+
+const opts = {
+  height: '195',
+  width: '320',
+};
+
+export function ArchiveVideoList({ items }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <div className={guideBody}>
+      <h2 className="text-xl sm:text-2xl">{t('archive')}</h2>
+      <hr />
+      <br />
+      {items.map((el) => (
+        <div
+          key={`archiveItemsLoop-${el.id}`}
+          className={characterBlock}
+          style={{
+            animationDelay: `${el.id * 0.2}s`,
+          }}
+        >
+          <h4>{el.title}</h4>
+          <hr />
+          <div className={centerVideo}>
+            <div className="mx-auto w-full max-w-[360px] overflow-x-auto">
+              <YouTube videoId={el.youtube_id} opts={opts} />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

nextjs/src/components/ContactList.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+
+import { characterBlock, guideBody } from '@/lib/siteContentClasses';
+import type { IContactQuestion } from '@/models/IContactQuestion';
+
+type Props = {
+  items: IContactQuestion[];
+};
+
+export function ContactList({ items }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <div className={guideBody}>
+      <h2 className="text-xl sm:text-2xl">{t('qanda')}</h2>
+      <hr />
+      <div className="relative mx-auto my-5 h-32 w-32 bg-[url(https://static.catherine-fc.com/media/letterbox.png)] bg-[length:128px_128px] [background-repeat:no-repeat]">
+        <a
+          className="block h-32 w-32"
+          href="https://forms.gle/Dn4p7cFEPLK1zcTz5"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          &nbsp;
+        </a>
+      </div>
+      {items.map((el) => (
+        <div
+          key={`contactItemsLoop-${el.id}`}
+          className={characterBlock}
+          style={{
+            animationDelay: `${el.id * 0.2}s`,
+          }}
+        >
+          <h4>{el.question}</h4>
+          <hr />
+          <div>{el.answer}</div>
+        </div>
+      ))}
+    </div>
+  );
+}

nextjs/src/components/GuideVideoList.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+import YouTube from 'react-youtube';
+
+import { centerVideo, characterBlock, guideBody } from '@/lib/siteContentClasses';
+import type { IGuideItem } from '@/models/IGuideItem';
+
+type Props = {
+  items: IGuideItem[];
+};
+
+const opts = {
+  height: '195',
+  width: '320',
+};
+
+export function GuideVideoList({ items }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <div className={guideBody}>
+      <h2 className="text-xl sm:text-2xl">{t('guide')}</h2>
+      <hr />
+      <br />
+      {items.map((el) => (
+        <div
+          key={`guideItemsLoop-${el.id}`}
+          className={characterBlock}
+          style={{
+            animationDelay: `${el.id * 0.2}s`,
+          }}
+        >
+          <h4>{el.title}</h4>
+          <hr />
+          <div>{el.description}</div>
+          <div className={centerVideo}>
+            <div className="mx-auto w-full max-w-[360px] overflow-x-auto">
+              <YouTube videoId={el.youtube_id} opts={opts} />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

nextjs/src/components/I18nProvider.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import { I18nextProvider } from 'react-i18next';
+import type { ReactNode } from 'react';
+
+import i18n from '@/i18n/client';
+
+export function I18nProvider({ children }: { children: ReactNode }) {
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+}

nextjs/src/components/PlayersList.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import Link from 'next/link';
+import { useTranslation } from 'react-i18next';
+
+import { characterPortraitBox, characterPortraitStyle } from '@/lib/characterPortrait';
+import {
+  characterBlock,
+  guideBody,
+  titlePlayer,
+  titlePlayerBlock,
+} from '@/lib/siteContentClasses';
+import type { IPlayerInfo } from '@/models/IPlayerInfo';
+
+export type PlayersListPagination = {
+  page: number;
+  total: number;
+  pageSize: number;
+  basePath: string;
+};
+
+type Props = {
+  players: IPlayerInfo[];
+  pagination?: PlayersListPagination;
+};
+
+const linkClass =
+  'rounded border border-white/40 px-3 py-2 text-white underline-offset-4 hover:border-white hover:underline';
+const disabledClass = 'cursor-not-allowed rounded border border-white/20 px-3 py-2 opacity-40';
+
+export function PlayersList({ players, pagination }: Props) {
+  const { t } = useTranslation();
+
+  const totalPages =
+    pagination != null ? Math.max(1, Math.ceil(pagination.total / pagination.pageSize)) : 1;
+  const showPager = pagination != null && totalPages > 1;
+
+  function hrefForPage(p: number): string {
+    if (pagination == null) return '#';
+    return p <= 1 ? pagination.basePath : `${pagination.basePath}?page=${p}`;
+  }
+
+  return (
+    <div className={guideBody}>
+      <h2 className="text-xl sm:text-2xl">Players</h2>
+      <hr />
+      <br />
+      {players.map((el) => (
+        <div
+          key={`playerInfoLoop-${el.id}`}
+          className={characterBlock}
+          style={{
+            animationDelay: `${el.id * 0.2}s`,
+          }}
+        >
+          <div className={characterPortraitBox} style={characterPortraitStyle(el.name_id)} />
+          <div className={titlePlayer}>
+            <span className={titlePlayerBlock}>{t('player_name')}</span>
+          </div>
+          <div>{el.player_name}</div>
+          <div className={titlePlayer}>
+            <span className={titlePlayerBlock}>{t('use_character')}</span>
+          </div>
+          <div>{el.name_jp}</div>
+          <div className={titlePlayer}>
+            <span className={titlePlayerBlock}>{t('description')}</span>
+          </div>
+          <div>{el.description}</div>
+        </div>
+      ))}
+      {showPager && pagination != null ? (
+        <nav
+          className="mt-8 flex flex-wrap items-center justify-center gap-3 text-sm sm:gap-6"
+          aria-label="Pagination"
+        >
+          {pagination.page > 1 ? (
+            <Link className={linkClass} href={hrefForPage(pagination.page - 1)}>
+              ← Previous
+            </Link>
+          ) : (
+            <span className={disabledClass}>← 前</span>
+          )}
+          <span className="tabular-nums opacity-90">
+            {pagination.page} / {totalPages}　ページ
+          </span>
+          {pagination.page < totalPages ? (
+            <Link className={linkClass} href={hrefForPage(pagination.page + 1)}>
+              Next →
+            </Link>
+          ) : (
+            <span className={disabledClass}>次 →</span>
+          )}
+        </nav>
+      ) : null}
+    </div>
+  );
+}

nextjs/src/components/SiteLayout.tsx

@@ -0,0 +1,148 @@
+import Link from 'next/link';
+import type { ReactNode } from 'react';
+
+const navLinkClass =
+  'flex min-h-[44px] w-full items-center justify-center bg-black px-2 font-indie text-sm text-white hover:-rotate-[10deg] hover:font-bold hover:text-pink-300 sm:h-[30px] sm:min-h-0 sm:w-[90px] sm:flex-none sm:text-base';
+
+export function SiteLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex min-h-screen w-full max-w-[100vw] flex-col overflow-x-hidden bg-[url(https://static.catherine-fc.com/media/background.png)] bg-cover bg-top bg-no-repeat text-white md:bg-fixed">
+      <div className="relative h-[300px] w-full overflow-hidden bg-[url(https://static.catherine-fc.com/media/bgbg.png)] bg-top bg-no-repeat md:h-[460px] max-md:bg-cover max-md:bg-center">
+        {/* Outer: horizontal center only. Inner: animate-up-down sets transform and would override -translate-x-1/2 on a single node */}
+        <div className="absolute left-1/2 top-0 w-full max-w-[1366px] -translate-x-1/2">
+          <div
+            className="group h-[220px] w-full animate-up-down bg-[url(https://static.catherine-fc.com/media/bgimage.png)] bg-no-repeat [background-position:center_top] sm:h-[320px] md:h-[401px]"
+          >
+            <div
+              className="pointer-events-none absolute left-0 top-0 h-full w-full bg-[url(https://static.catherine-fc.com/media/bgimagenight.png)] bg-no-repeat [background-position:center_top] opacity-0 transition-opacity duration-500 ease-in-out group-hover:opacity-100"
+              aria-hidden
+            />
+          </div>
+        </div>
+        <div className="fixed bottom-0 right-0 top-0 z-[1] m-auto hidden h-[99px] w-[235px] min-[601px]:block">
+          <a
+            className="block h-[99px] w-[235px] bg-[url(https://static.catherine-fc.com/media/buynow.png)] hover:animate-bounce"
+            href="https://www.atlus.co.jp/news/13264/"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            &nbsp;
+          </a>
+        </div>
+        {/* Logo: always translate-centered; md+ uses original pixel size, narrow viewports scale width */}
+        <div className="absolute left-1/2 top-[-20px] z-[1] h-[200px] w-[min(92vw,577px)] max-w-[577px] -translate-x-1/2 bg-[url(https://static.catherine-fc.com/media/cat_fb_logo.png)] bg-contain bg-center bg-no-repeat sm:top-[-30px] sm:h-[280px] md:top-[-30px] md:h-[401px] md:w-[577px] md:bg-auto md:bg-top" />
+        <div className="absolute left-1/2 top-[150px] z-[1] h-12 w-[min(88vw,415px)] max-w-[415px] -translate-x-1/2 bg-[url(https://static.catherine-fc.com/media/faito_crab.png)] bg-contain bg-center bg-no-repeat sm:top-[240px] sm:h-14 md:top-[310px] md:h-16 md:w-[415px] md:bg-auto md:bg-top" />
+        <div className="absolute left-0 right-0 top-[180px] z-0 sm:top-[240px] md:top-[260px]">
+          <svg
+            className="relative -mb-[7px] h-[100px] min-h-[80px] w-full max-h-[200px] sm:h-[150px] md:h-[200px]"
+            viewBox="0 24 150 28"
+            preserveAspectRatio="none"
+            shapeRendering="auto"
+          >
+            <defs>
+              <path
+                id="gentle-wave"
+                d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
+              />
+            </defs>
+            <g>
+              <use
+                className="animate-wave-1"
+                x={48}
+                y={7}
+                href="#gentle-wave"
+                fill="rgba(255,45,124,0.7)"
+              />
+              <use
+                className="animate-wave-2"
+                x={48}
+                y={0}
+                href="#gentle-wave"
+                fill="#ff2d7c"
+              />
+            </g>
+          </svg>
+        </div>
+      </div>
+      <nav className="absolute left-0 right-0 top-[260px] z-[1] mx-auto max-w-[100vw] px-2 sm:top-[320px] md:top-[400px]">
+        <ul className="mx-auto grid max-w-[min(100%,420px)] list-none grid-cols-2 gap-2 sm:flex sm:max-w-none sm:flex-wrap sm:justify-center sm:gap-x-2.5 sm:gap-y-2">
+          <li>
+            <Link className={navLinkClass} href="/">
+              Home
+            </Link>
+          </li>
+          <li>
+            <Link className={navLinkClass} href="/players">
+              Players
+            </Link>
+          </li>
+          <li>
+            <Link className={navLinkClass} href="/guide">
+              Guide
+            </Link>
+          </li>
+          <li>
+            <Link className={navLinkClass} href="/archive">
+              Archive
+            </Link>
+          </li>
+          <li>
+            <Link className={navLinkClass} href="/about">
+              About
+            </Link>
+          </li>
+          <li>
+            <Link className={navLinkClass} href="/contact">
+              Q&A
+            </Link>
+          </li>
+        </ul>
+      </nav>
+      <div className="flex-grow px-4 pb-6 pt-28 sm:p-[30px]">{children}</div>
+      <div className="flex w-full flex-col flex-wrap items-center justify-center gap-6 bg-black p-5 text-center text-sm text-white sm:flex-row sm:text-left sm:text-base">
+        <div className="max-w-xl [&>p]:my-1.5">
+          <p>
+            <a href="https://www.atlus.co.jp/copyright/" rel="noopener noreferrer" target="_blank">
+              ©ATLUS
+            </a>{' '}
+            ©SEGA All Rights Reserved.
+          </p>
+          <p>本ページは、株式会社ATLUS様のページとは異なるユーザーサイトです。</p>
+          <p>問い合わせなどをATLUS様に出されないよう、ご注意ください。</p>
+        </div>
+        <div className="flex flex-wrap items-center justify-center gap-5">
+          <div className="h-[70px] w-[70px] bg-[url(https://static.catherine-fc.com/media/twitter.png)] bg-contain">
+            <a
+              className="block h-[70px] w-[70px]"
+              href="https://twitter.com/catherine_f_c"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              &nbsp;
+            </a>
+          </div>
+          <div className="h-[70px] w-[113px] bg-[url(https://static.catherine-fc.com/media/twitch.png)] bg-contain">
+            <a
+              className="block h-[70px] w-[113px]"
+              href="https://www.twitch.tv/catherine_faito_crab"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              &nbsp;
+            </a>
+          </div>
+          <div className="h-[70px] w-[100px] bg-[url(https://static.catherine-fc.com/media/youtube.png)] bg-contain">
+            <a
+              className="block h-[70px] w-[100px]"
+              href="https://www.youtube.com/channel/UC5cvyvCdOMbxwZqCT09cGNA/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              &nbsp;
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

nextjs/src/components/admin/LogoutButton.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { btnGhost } from '@/lib/adminUi';
+
+export function LogoutButton() {
+  return (
+    <button
+      type="button"
+      className={btnGhost}
+      onClick={async () => {
+        await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' });
+        window.location.href = '/admin/login';
+      }}
+    >
+      Log out
+    </button>
+  );
+}

nextjs/src/i18n/client.ts

@@ -0,0 +1,22 @@
+'use client';
+
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import en from './en.json';
+import ja from './ja.json';
+
+if (!i18n.isInitialized) {
+  i18n.use(initReactI18next).init({
+    fallbackLng: 'ja',
+    resources: {
+      en: { translation: en },
+      ja: { translation: ja },
+    },
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+}
+
+export default i18n;

nextjs/src/i18n/en.json

@@ -0,0 +1,9 @@
+{
+  "use_character": "Character",
+  "player_name": "Playername",
+  "description": "Description",
+  "archive": "Archive",
+  "guide": "Guide",
+  "about": "About",
+  "qanda": "Q&A"
+}

nextjs/src/i18n/ja.json

@@ -0,0 +1,9 @@
+{
+  "use_character": "使用キャラクター",
+  "player_name": "プレイヤー名",
+  "description": "紹介文",
+  "archive": "Archive",
+  "guide": "Guide",
+  "about": "About",
+  "qanda": "Q&A"
+}

nextjs/src/lib/adminUi.ts

@@ -0,0 +1,54 @@
+/** Tailwind class bundles for admin (replaces admin.module.scss). */
+
+export const wrap = 'max-w-[960px] mx-auto px-4 py-6 pb-12 font-sans text-neutral-900';
+
+export const card = 'mb-5 rounded-lg border border-neutral-200 bg-white p-5';
+
+export const title = 'mb-2 text-2xl font-semibold';
+
+export const sub = 'mb-4 text-[0.95rem] text-neutral-600';
+
+export const form = 'flex max-w-[360px] flex-col gap-3';
+
+/** Same as `form` but max-width 480px (add/edit blocks). */
+export const formWide = 'flex max-w-[480px] flex-col gap-3';
+
+export const label = 'flex flex-col gap-1 text-sm';
+
+export const input = 'rounded border border-neutral-300 px-2.5 py-2 text-base';
+
+export const textarea = 'min-h-[100px] font-inherit';
+
+export const btn =
+  'cursor-pointer rounded border-none bg-blue-600 px-4 py-2.5 text-base text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60';
+
+export const btnDanger =
+  'cursor-pointer rounded border-none bg-red-600 px-4 py-2.5 text-base text-white hover:bg-red-700';
+
+export const btnGhost =
+  'cursor-pointer rounded border-none bg-neutral-100 px-4 py-2.5 text-base text-neutral-900 hover:bg-neutral-200';
+
+export const error = 'text-sm text-red-700';
+
+export const success = 'text-sm text-green-700';
+
+export const nav = 'mb-6 flex flex-wrap gap-3 border-b border-neutral-200 pb-4';
+
+export const navLink = 'text-blue-600 no-underline hover:underline';
+
+export const table = 'w-full border-collapse text-sm';
+
+export const thTd = 'border border-neutral-200 p-2 text-left align-top';
+
+export const th = 'bg-neutral-50';
+
+export const rowActions = 'flex flex-wrap gap-2';
+
+export const hr = 'my-4 border-0 border-t border-neutral-200';
+
+export const sectionBlock = 'mb-6 border-b border-neutral-200 pb-4';
+
+export const metaLine = 'mb-2 text-sm text-neutral-600';
+
+/** Smaller heading for “Add player” / “New entry” blocks (replaces title + inline font size). */
+export const sectionTitle = 'mb-2 text-[1.1rem] font-semibold';

nextjs/src/lib/auth/apiAuth.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from 'next/server';
+
+import type { AdminUserRow } from '@/lib/auth/session';
+import { getSessionUser } from '@/lib/auth/session';
+
+export async function requireAdminApi(): Promise<
+  { ok: true; user: AdminUserRow } | { ok: false; response: NextResponse }
+> {
+  const user = await getSessionUser();
+  if (!user) {
+    return { ok: false, response: NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) };
+  }
+  if (!user.is_approved) {
+    return { ok: false, response: NextResponse.json({ error: 'Pending approval' }, { status: 403 }) };
+  }
+  if (!user.is_admin) {
+    return { ok: false, response: NextResponse.json({ error: 'Forbidden' }, { status: 403 }) };
+  }
+  return { ok: true, user };
+}

nextjs/src/lib/auth/password.ts

@@ -0,0 +1,11 @@
+import bcrypt from 'bcryptjs';
+
+const SALT_ROUNDS = 12;
+
+export function hashPassword(plain: string): string {
+  return bcrypt.hashSync(plain, SALT_ROUNDS);
+}
+
+export function verifyPassword(plain: string, passwordHash: string): boolean {
+  return bcrypt.compareSync(plain, passwordHash);
+}

nextjs/src/lib/auth/requireAdmin.ts

@@ -0,0 +1,22 @@
+import { redirect } from 'next/navigation';
+
+import { getSessionUser } from '@/lib/auth/session';
+
+export async function requireLogin(): Promise<NonNullable<Awaited<ReturnType<typeof getSessionUser>>>> {
+  const user = await getSessionUser();
+  if (!user) {
+    redirect('/admin/login');
+  }
+  if (!user.is_approved) {
+    redirect('/admin/pending');
+  }
+  return user;
+}
+
+export async function requireAdmin(): Promise<NonNullable<Awaited<ReturnType<typeof getSessionUser>>>> {
+  const user = await requireLogin();
+  if (!user.is_admin) {
+    redirect('/admin/no-access');
+  }
+  return user;
+}

nextjs/src/lib/auth/session.ts

@@ -0,0 +1,88 @@
+import { createHash, randomBytes } from 'crypto';
+import type { RowDataPacket } from 'mysql2';
+import { cookies } from 'next/headers';
+
+import { getPool } from '@/lib/db';
+
+export const SESSION_COOKIE = 'admin_session';
+const SESSION_MAX_AGE_SEC = 60 * 60 * 24 * 7; // 7 days
+
+export type AdminUserRow = {
+  id: number;
+  email: string;
+  password_hash: string;
+  is_approved: boolean;
+  is_admin: boolean;
+};
+
+function hashToken(token: string): string {
+  return createHash('sha256').update(token, 'utf8').digest('hex');
+}
+
+export async function createSession(userId: number): Promise<string> {
+  const token = randomBytes(32).toString('hex');
+  const tokenHash = hashToken(token);
+  const expiresAt = new Date(Date.now() + SESSION_MAX_AGE_SEC * 1000);
+
+  const pool = getPool();
+  await pool.query(
+    `INSERT INTO admin_sessions (user_id, token_hash, expires_at) VALUES (?, ?, ?)`,
+    [userId, tokenHash, expiresAt]
+  );
+
+  const cookieStore = await cookies();
+  cookieStore.set(SESSION_COOKIE, token, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'lax',
+    maxAge: SESSION_MAX_AGE_SEC,
+    path: '/',
+  });
+
+  return token;
+}
+
+export async function destroySession(): Promise<void> {
+  const cookieStore = await cookies();
+  const token = cookieStore.get(SESSION_COOKIE)?.value;
+  if (token) {
+    const pool = getPool();
+    await pool.query(
+      'DELETE FROM admin_sessions WHERE token_hash = ?',
+      [hashToken(token)]
+    );
+  }
+  cookieStore.delete(SESSION_COOKIE);
+}
+
+export async function getSessionUser(): Promise<AdminUserRow | null> {
+  const cookieStore = await cookies();
+  const token = cookieStore.get(SESSION_COOKIE)?.value;
+  if (!token) {
+    return null;
+  }
+
+  const tokenHash = hashToken(token);
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>(
+    `SELECT u.id, u.email, u.password_hash, u.is_approved, u.is_admin
+     FROM admin_sessions s
+     JOIN admin_users u ON u.id = s.user_id
+     WHERE s.token_hash = ? AND s.expires_at > NOW()`,
+    [tokenHash]
+  );
+
+  if (rows.length === 0) {
+    cookieStore.delete(SESSION_COOKIE);
+    return null;
+  }
+
+  const row = rows[0] as Record<string, unknown>;
+  return {
+    id: row.id as number,
+    email: row.email as string,
+    password_hash: row.password_hash as string,
+    is_approved: Boolean(row.is_approved),
+    is_admin: Boolean(row.is_admin),
+  };
+}

nextjs/src/lib/characterPortrait.ts

@@ -0,0 +1,32 @@
+import type { CSSProperties } from 'react';
+
+/** Character portrait background URLs (former .character-* SCSS). */
+
+const M = 'https://static.catherine-fc.com/media';
+
+const PORTRAIT_BY_NAME_ID: Record<string, string> = {
+  blue_cap: `${M}/00_bluecap_1204.png`,
+  red_cap: `${M}/00_redcap_1204.png`,
+  vincent_shirt: `${M}/01_vincent_1204.png`,
+  vincent_sheep: `${M}/01_sheep_vincent_1204.png`,
+  katherine: `${M}/02_katherine_1204.png`,
+  catherine: `${M}/03_catherine_1204.png`,
+  rin: `${M}/04_rin_1204.png`,
+  orlando: `${M}/05_orlando_1204.png`,
+  johny: `${M}/06_jonny_1204.png`,
+  tobby: `${M}/07_tobby_1204.png`,
+  erica: `${M}/08_erika_1204.png`,
+  master: `${M}/09_master_1204.png`,
+  joker: `${M}/13_joker_1204.png`,
+};
+
+export function characterPortraitStyle(nameId: string): CSSProperties {
+  const url = PORTRAIT_BY_NAME_ID[nameId];
+  if (!url) return {};
+  return {
+    backgroundImage: `url(${url})`,
+  };
+}
+
+export const characterPortraitBox =
+  'float-none mx-auto mb-4 h-[200px] w-[200px] shrink-0 bg-contain bg-no-repeat sm:float-left sm:mb-0 sm:mr-5 sm:h-[240px] sm:w-[240px] sm:mx-0';

nextjs/src/lib/data.ts

@@ -0,0 +1,142 @@
+import type { RowDataPacket } from 'mysql2';
+import { getPool } from './db';
+import type { IContactQuestion } from '@/models/IContactQuestion';
+import type { IGuideItem } from '@/models/IGuideItem';
+import type { IPlayerInfo } from '@/models/IPlayerInfo';
+
+/** Public players list: items per page (main /tournaments/.../players). */
+export const PLAYERS_PAGE_SIZE = 5;
+
+let tournamentIdByKeyPromise: Promise<Record<string, number>> | null = null;
+
+async function loadTournamentMap(): Promise<Record<string, number>> {
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>(
+    'SELECT id, tournament_key FROM tournaments'
+  );
+  const map: Record<string, number> = {};
+  for (const row of rows) {
+    map[row.tournament_key as string] = row.id as number;
+  }
+  return map;
+}
+
+export async function getTournamentIdByKey(): Promise<Record<string, number>> {
+  if (!tournamentIdByKeyPromise) {
+    tournamentIdByKeyPromise = loadTournamentMap();
+  }
+  return tournamentIdByKeyPromise;
+}
+
+export async function getAllPlayers(): Promise<IPlayerInfo[]> {
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>(
+    `SELECT p.id, p.player_key, p.player_name, p.description, p.image, c.name_id, c.name, c.name_jp
+     FROM players p
+     JOIN characters c ON c.id = p.character_id
+     ORDER BY p.id`
+  );
+  return rows as IPlayerInfo[];
+}
+
+export async function getAllPlayersPaged(
+  page: number
+): Promise<{ players: IPlayerInfo[]; total: number }> {
+  const pool = getPool();
+  const pageSize = PLAYERS_PAGE_SIZE;
+  const offset = (page - 1) * pageSize;
+
+  const [countRows] = await pool.query<RowDataPacket[]>(
+    `SELECT COUNT(*) AS cnt
+     FROM players p
+     JOIN characters c ON c.id = p.character_id`
+  );
+  const total = Number((countRows[0] as { cnt: number }).cnt);
+
+  const [rows] = await pool.query<RowDataPacket[]>(
+    `SELECT p.id, p.player_key, p.player_name, p.description, p.image, c.name_id, c.name, c.name_jp
+     FROM players p
+     JOIN characters c ON c.id = p.character_id
+     ORDER BY p.id
+     LIMIT ? OFFSET ?`,
+    [pageSize, offset]
+  );
+
+  return { players: rows as IPlayerInfo[], total };
+}
+
+export async function getPlayersForTournament(
+  tournamentKey: string
+): Promise<IPlayerInfo[] | null> {
+  const tournaments = await getTournamentIdByKey();
+  const tournamentId = tournaments[tournamentKey];
+  if (tournamentId === undefined) {
+    return null;
+  }
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>(
+    `SELECT p.id, p.player_key, p.player_name, p.description, p.image, c.name_id, c.name, c.name_jp
+     FROM players p
+     JOIN player_to_tournament ptt ON p.id = ptt.player_id
+     JOIN characters c ON c.id = p.character_id
+     WHERE ptt.tournament_id = ?
+     ORDER BY p.id`,
+    [tournamentId]
+  );
+  return rows as IPlayerInfo[];
+}
+
+export async function getPlayersForTournamentPaged(
+  tournamentKey: string,
+  page: number
+): Promise<{ players: IPlayerInfo[]; total: number } | null> {
+  const tournaments = await getTournamentIdByKey();
+  const tournamentId = tournaments[tournamentKey];
+  if (tournamentId === undefined) {
+    return null;
+  }
+  const pool = getPool();
+  const pageSize = PLAYERS_PAGE_SIZE;
+  const offset = (page - 1) * pageSize;
+
+  const [countRows] = await pool.query<RowDataPacket[]>(
+    `SELECT COUNT(*) AS cnt
+     FROM players p
+     JOIN player_to_tournament ptt ON p.id = ptt.player_id
+     JOIN characters c ON c.id = p.character_id
+     WHERE ptt.tournament_id = ?`,
+    [tournamentId]
+  );
+  const total = Number((countRows[0] as { cnt: number }).cnt);
+
+  const [rows] = await pool.query<RowDataPacket[]>(
+    `SELECT p.id, p.player_key, p.player_name, p.description, p.image, c.name_id, c.name, c.name_jp
+     FROM players p
+     JOIN player_to_tournament ptt ON p.id = ptt.player_id
+     JOIN characters c ON c.id = p.character_id
+     WHERE ptt.tournament_id = ?
+     ORDER BY p.id
+     LIMIT ? OFFSET ?`,
+    [tournamentId, pageSize, offset]
+  );
+
+  return { players: rows as IPlayerInfo[], total };
+}
+
+export async function getGuideItems(): Promise<IGuideItem[]> {
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>('SELECT * FROM guide');
+  return rows as IGuideItem[];
+}
+
+export async function getArchiveItems(): Promise<IGuideItem[]> {
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>('SELECT * FROM archive');
+  return rows as IGuideItem[];
+}
+
+export async function getContactItems(): Promise<IContactQuestion[]> {
+  const pool = getPool();
+  const [rows] = await pool.query<RowDataPacket[]>('SELECT * FROM contact');
+  return rows as IContactQuestion[];
+}

nextjs/src/lib/db.ts

@@ -0,0 +1,23 @@
+import mysql from 'mysql2/promise';
+
+function createPool(): mysql.Pool {
+  const port = process.env.DB_PORT ? parseInt(process.env.DB_PORT, 10) : 3306;
+  return mysql.createPool({
+    connectionLimit: 10,
+    port,
+    host: process.env.DB_ENDPOINT,
+    user: process.env.DB_USER,
+    password: process.env.DB_PASS,
+    database: 'catherine_league',
+    charset: 'utf8mb4',
+  });
+}
+
+let pool: mysql.Pool | undefined;
+
+export function getPool(): mysql.Pool {
+  if (!pool) {
+    pool = createPool();
+  }
+  return pool;
+}

nextjs/src/lib/siteContentClasses.ts

@@ -0,0 +1,19 @@
+/** Shared Tailwind class strings for public site (matches former web.module.scss). */
+
+export const guideBody =
+  'relative my-5 mx-auto w-full max-w-[980px] px-4 sm:px-5 md:px-0';
+
+/** Player/guide/archive Q&A cards. Use 100%×100% so the frame stretches with the box; 100%×auto only painted one band and tall content spilled past the art. */
+export const characterBlock =
+  'relative overflow-hidden break-words opacity-0 w-full max-w-[980px] min-h-0 md:h-[314px] h-auto my-5 mx-auto p-4 sm:p-6 md:p-[30px] bg-[url(https://static.catherine-fc.com/media/playerbg.png)] bg-no-repeat [background-position:center] [background-size:100%_100%] font-mplus odd:animate-slide-in-l even:animate-slide-in-r';
+
+export const titlePlayer = 'relative flex mb-2.5';
+
+export const titlePlayerBlock =
+  'px-2.5 py-1.5 bg-white -rotate-2 text-black font-mplus text-sm sm:text-base';
+
+export const centerVideo =
+  'w-full flex justify-center overflow-x-auto [&_iframe]:max-w-full';
+
+export const mainBody =
+  'flex my-5 mx-auto w-full max-w-[980px] items-center justify-center px-4 sm:px-5 md:px-0';

nextjs/src/models/IArchiveItem.ts

@@ -0,0 +1,5 @@
+export interface IArchiveItem {
+  id: number;
+  title: string;
+  youtube_id: string;
+}

nextjs/src/models/IContactQuestion.ts

@@ -0,0 +1,5 @@
+export interface IContactQuestion {
+  id: number;
+  question: string;
+  answer: string;
+}

nextjs/src/models/IGuideItem.ts

@@ -0,0 +1,6 @@
+export interface IGuideItem {
+  id: number;
+  title: string;
+  description: string;
+  youtube_id: string;
+}

nextjs/src/models/IPlayerInfo.ts

@@ -0,0 +1,10 @@
+export interface IPlayerInfo {
+  id: number;
+  player_key: string;
+  player_name: string;
+  description: string;
+  image: string;
+  name_id: string;
+  name: string;
+  name_jp: string;
+}

nextjs/tailwind.config.ts

@@ -0,0 +1,47 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        indie: ['var(--font-indie)', 'cursive'],
+        mplus: ['var(--font-mplus)', 'sans-serif'],
+      },
+      keyframes: {
+        moveforever: {
+          '0%': { transform: 'translate3d(-90px, 0, 0)' },
+          '100%': { transform: 'translate3d(85px, 0, 0)' },
+        },
+        bounce: {
+          '0%, 20%, 60%, 100%': { transform: 'translateY(0)' },
+          '40%': { transform: 'translateY(-20px)' },
+          '80%': { transform: 'translateY(-10px)' },
+        },
+        slideInFromLeft: {
+          '0%': { transform: 'translateX(-100%)' },
+          '100%': { opacity: '1', transform: 'translateX(0)' },
+        },
+        slideInFromRight: {
+          '0%': { transform: 'translateX(100%)' },
+          '100%': { opacity: '1', transform: 'translateX(0)' },
+        },
+        upAndDown: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-5%)' },
+        },
+      },
+      animation: {
+        'up-down': 'upAndDown 10s linear infinite',
+        'wave-1': 'moveforever 2s cubic-bezier(0.55, 0.5, 0.45, 0.5) -2s infinite',
+        'wave-2': 'moveforever 5s cubic-bezier(0.55, 0.5, 0.45, 0.5) -4s infinite',
+        bounce: 'bounce 1s',
+        'slide-in-l': 'slideInFromLeft 1s forwards',
+        'slide-in-r': 'slideInFromRight 1s forwards',
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;

nextjs/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "target": "ES2017"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package.json

@@ -0,0 +1,7 @@
+{
+  "name": "catherine-league",
+  "private": true,
+  "workspaces": [
+    "nextjs"
+  ]
+}