feat(web): add minimal playable quiz at /play

- Add Vite proxy for /api → localhost:3000 (no CORS needed in dev)
- Create /play route with hardcoded game settings (en→it, nouns, easy)
- Three-phase state machine: loading → playing → finished
- Show prompt, optional gloss, and 4 answer buttons per question
- Submit answers to /api/v1/game/answer, show correct/wrong feedback
- Manual Next button to advance after answering
- Score screen on completion
- Add selectedOptionId to AnswerResult schema (discovered during
  frontend work that the result needs to be self-contained for
  rendering feedback without separate client state)

Intentionally unstyled — component extraction and polish come next.

apps/web/src/routes/play.tsx

@@ -0,0 +1,123 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useState, useEffect } from "react";
+import type { GameSession, AnswerResult } from "@glossa/shared";
+
+const GAME_SETTINGS = {
+  source_language: "en",
+  target_language: "it",
+  pos: "noun",
+  difficulty: "easy",
+  rounds: "3",
+} as const;
+
+function Play() {
+  const [gameSession, setGameSession] = useState<GameSession | null>(null);
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+  const [results, setResults] = useState<AnswerResult[]>([]);
+  const [currentResult, setCurrentResult] = useState<AnswerResult | null>(null);
+
+  useEffect(() => {
+    const startGame = async () => {
+      const response = await fetch("/api/v1/game/start", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(GAME_SETTINGS),
+      });
+      const data = await response.json();
+      setGameSession(data.data);
+    };
+    startGame();
+  }, []);
+
+  const handleAnswer = async (optionId: number) => {
+    if (!gameSession || currentResult) return;
+
+    const question = gameSession.questions[currentQuestionIndex];
+    if (!question) return;
+
+    const response = await fetch("/api/v1/game/answer", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        sessionId: gameSession.sessionId,
+        questionId: question.questionId,
+        selectedOptionId: optionId,
+      }),
+    });
+    const data = await response.json();
+    setCurrentResult(data.data);
+  };
+
+  const handleNext = () => {
+    if (!currentResult) return;
+    setResults((prev) => [...prev, currentResult]);
+    setCurrentQuestionIndex((prev) => prev + 1);
+    setCurrentResult(null);
+  };
+
+  // Phase: loading
+  if (!gameSession) {
+    return <p>Loading...</p>;
+  }
+
+  // Phase: finished
+  if (currentQuestionIndex >= gameSession.questions.length) {
+    const score = results.filter((r) => r.isCorrect).length;
+    return (
+      <div>
+        <h2>
+          {score} / {results.length}
+        </h2>
+        <p>Game over!</p>
+      </div>
+    );
+  }
+
+  // Phase: playing
+  const question = gameSession.questions[currentQuestionIndex]!;
+
+  return (
+    <div>
+      <p>
+        Question {currentQuestionIndex + 1} / {gameSession.questions.length}
+      </p>
+      <h2>{question.prompt}</h2>
+      {question.gloss && <p>{question.gloss}</p>}
+      <div>
+        {question.options.map((option) => {
+          let style = {};
+          if (currentResult) {
+            if (option.optionId === currentResult.correctOptionId) {
+              style = { backgroundColor: "green", color: "white" };
+            } else if (option.optionId === currentResult.selectedOptionId) {
+              style = { backgroundColor: "red", color: "white" };
+            }
+          }
+
+          return (
+            <button
+              key={option.optionId}
+              onClick={() => handleAnswer(option.optionId)}
+              disabled={!!currentResult}
+              style={{
+                display: "block",
+                margin: "4px 0",
+                padding: "8px 16px",
+                ...style,
+              }}
+            >
+              {option.text}
+            </button>
+          );
+        })}
+      </div>
+      {currentResult && (
+        <button onClick={handleNext} style={{ marginTop: "16px" }}>
+          Next
+        </button>
+      )}
+    </div>
+  );
+}
+
+export const Route = createFileRoute("/play")({ component: Play });