diff --git a/apps/web/src/components/game/GameSetup.tsx b/apps/web/src/components/game/GameSetup.tsx
index 0266342..9315bc4 100644
--- a/apps/web/src/components/game/GameSetup.tsx
+++ b/apps/web/src/components/game/GameSetup.tsx
@@ -35,16 +35,18 @@ const SettingGroup = ({
   onSelect,
 }: SettingGroupProps) => (
   <div className="w-full">
-    <p className="text-sm font-medium text-purple-400 mb-2">{label}</p>
+    <p className="text-xs font-bold tracking-widest uppercase text-(--color-primary) mb-2">
+      {label}
+    </p>
     <div className="flex gap-2 flex-wrap">
       {options.map((option) => (
         <button
           key={option}
           onClick={() => onSelect(option)}
-          className={`py-2 px-5 rounded-xl font-semibold text-sm border-b-4 transition-all duration-200 cursor-pointer ${
+          className={`py-2 px-5 rounded-xl font-semibold text-sm border transition-all duration-200 cursor-pointer ${
             selected === option
-              ? "bg-purple-600 text-white border-purple-800"
-              : "bg-white text-purple-900 border-purple-200 hover:bg-purple-50 hover:border-purple-300"
+              ? "bg-(--color-primary) text-white border-(--color-primary-dark) shadow-sm"
+              : "bg-white text-(--color-primary-dark) border-(--color-primary-light) hover:bg-(--color-surface) hover:-translate-y-0.5 active:translate-y-0"
           }`}
         >
           {LABELS[option] ?? option}
@@ -91,12 +93,18 @@ export const GameSetup = ({ onStart }: GameSetupProps) => {
 
   return (
     <div className="flex flex-col items-center gap-6 w-full max-w-md mx-auto">
-      <div className="bg-white rounded-3xl shadow-lg p-8 w-full text-center">
-        <h1 className="text-3xl font-bold text-purple-900 mb-1">lila</h1>
-        <p className="text-sm text-gray-400">Set up your quiz</p>
+      <div className="relative overflow-hidden w-full rounded-3xl border border-(--color-primary-light) bg-white dark:bg-black/10 shadow-sm p-8 text-center">
+        <div className="absolute -top-16 -left-20 h-40 w-40 rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl" />
+        <div className="absolute -bottom-20 -right-20 h-44 w-44 rounded-full bg-(--color-primary) opacity-[0.12] blur-3xl" />
+        <h1 className="relative text-3xl font-black tracking-tight text-(--color-text) mb-1">
+          lila
+        </h1>
+        <p className="relative text-sm text-(--color-text-muted)">
+          Set up your quiz
+        </p>
       </div>
 
-      <div className="bg-white rounded-3xl shadow-lg p-6 w-full flex flex-col gap-5">
+      <div className="w-full rounded-3xl border border-(--color-primary-light) bg-white dark:bg-black/10 shadow-sm p-6 flex flex-col gap-5">
         <SettingGroup
           label="I speak"
           options={SUPPORTED_LANGUAGE_CODES}
@@ -131,9 +139,9 @@ export const GameSetup = ({ onStart }: GameSetupProps) => {
 
       <button
         onClick={handleStart}
-        className="w-full py-4 rounded-2xl text-xl font-bold bg-linear-to-r from-pink-400 to-purple-500 text-white border-b-4 border-purple-700 hover:-translate-y-0.5 active:translate-y-0 active:border-b-2 transition-all duration-200 cursor-pointer"
+        className="w-full py-4 rounded-2xl text-xl font-black bg-linear-to-r from-pink-400 to-purple-500 text-white shadow-sm hover:shadow-md hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200 cursor-pointer"
       >
-        Start Quiz
+        Start
       </button>
     </div>
   );
diff --git a/apps/web/src/components/game/OptionButton.tsx b/apps/web/src/components/game/OptionButton.tsx
index e01e4ae..783d25d 100644
--- a/apps/web/src/components/game/OptionButton.tsx
+++ b/apps/web/src/components/game/OptionButton.tsx
@@ -6,26 +6,39 @@ type OptionButtonProps = {
 
 export const OptionButton = ({ text, state, onSelect }: OptionButtonProps) => {
   const base =
-    "w-full py-3 px-6 rounded-2xl text-lg font-semibold transition-all duration-200 border-b-4 cursor-pointer";
+    "group relative w-full overflow-hidden py-3 px-6 rounded-2xl text-lg font-semibold transition-all duration-200 border cursor-pointer text-left";
 
   const styles = {
-    idle: "bg-white text-purple-900 border-purple-200 hover:bg-purple-50 hover:border-purple-300 hover:-translate-y-0.5 active:translate-y-0 active:border-b-2",
+    idle: "bg-white text-(--color-primary-dark) border-(--color-primary-light) hover:bg-(--color-surface) hover:-translate-y-0.5 active:translate-y-0",
     selected:
-      "bg-purple-100 text-purple-900 border-purple-400 ring-2 ring-purple-400",
-    disabled: "bg-gray-100 text-gray-400 border-gray-200 cursor-default",
-    correct: "bg-emerald-400 text-white border-emerald-600 scale-[1.02]",
-    wrong: "bg-pink-400 text-white border-pink-600",
+      "bg-(--color-surface) text-(--color-primary-dark) border-(--color-primary) ring-2 ring-(--color-primary)",
+    disabled:
+      "bg-(--color-surface) text-(--color-primary-light) border-(--color-primary-light) cursor-default",
+    correct:
+      "bg-emerald-400/90 text-white border-emerald-600 ring-2 ring-emerald-300 scale-[1.01]",
+    wrong: "bg-pink-500/90 text-white border-pink-700 ring-2 ring-pink-300",
   };
 
+  const motion =
+    state === "correct" ? "lila-pop" : state === "wrong" ? "lila-shake" : "";
+
   return (
     <button
-      className={`${base} ${styles[state]}`}
+      className={`${base} ${styles[state]} ${motion}`}
       onClick={onSelect}
       disabled={
         state === "disabled" || state === "correct" || state === "wrong"
       }
     >
-      {text}
+      <span className="absolute inset-0 -z-10 opacity-0 group-hover:opacity-100 transition-opacity">
+        <span className="absolute -top-10 -right-12 h-24 w-24 rounded-full bg-(--color-primary) opacity-[0.10] blur-2xl" />
+        <span className="absolute -bottom-10 -left-12 h-24 w-24 rounded-full bg-(--color-accent) opacity-[0.10] blur-2xl" />
+      </span>
+      <span className="flex items-center justify-between gap-3">
+        <span className="truncate">{text}</span>
+        {state === "correct" && <span aria-hidden>✓</span>}
+        {state === "wrong" && <span aria-hidden>✕</span>}
+      </span>
     </button>
   );
 };
diff --git a/apps/web/src/components/game/QuestionCard.tsx b/apps/web/src/components/game/QuestionCard.tsx
index f81ec0d..7878a5b 100644
--- a/apps/web/src/components/game/QuestionCard.tsx
+++ b/apps/web/src/components/game/QuestionCard.tsx
@@ -48,22 +48,31 @@ export const QuestionCard = ({
 
   return (
     <div className="flex flex-col items-center gap-6 w-full max-w-md mx-auto">
-      <div className="flex items-center gap-2 text-sm font-medium text-purple-400">
-        <span>
-          {questionNumber} / {totalQuestions}
-        </span>
+      <div className="w-full flex items-center justify-between">
+        <div className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-4 py-1 text-xs font-bold tracking-widest uppercase text-(--color-primary)">
+          Round {questionNumber}/{totalQuestions}
+        </div>
+        <div className="text-xs font-semibold text-(--color-text-muted)">
+          {currentResult ? "Checked" : selectedOptionId !== null ? "Ready" : "Pick one"}
+        </div>
       </div>
 
-      <div className="bg-white rounded-3xl shadow-lg p-8 w-full text-center">
-        <h2 className="text-3xl font-bold text-purple-900 mb-2">
+      <div className="relative w-full overflow-hidden rounded-3xl border border-(--color-primary-light) bg-white/40 dark:bg-black/10 backdrop-blur shadow-sm p-8 text-center">
+        <div className="absolute -top-16 -left-20 h-40 w-40 rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl" />
+        <div className="absolute -bottom-20 -right-20 h-44 w-44 rounded-full bg-(--color-primary) opacity-[0.12] blur-3xl" />
+
+        <h2 className="relative text-3xl font-black tracking-tight text-(--color-text) mb-2">
           {question.prompt}
         </h2>
         {question.gloss && (
-          <p className="text-sm text-gray-400 italic">{question.gloss}</p>
+          <p className="relative text-sm text-(--color-text-muted) italic">
+            {question.gloss}
+          </p>
         )}
       </div>
 
-      <div className="flex flex-col gap-3 w-full">
+      <div className="w-full rounded-3xl border border-(--color-primary-light) bg-white/55 dark:bg-black/10 backdrop-blur shadow-sm p-4">
+        <div className="flex flex-col gap-3">
         {question.options.map((option) => (
           <OptionButton
             key={option.optionId}
@@ -72,21 +81,22 @@ export const QuestionCard = ({
             onSelect={() => handleSelect(option.optionId)}
           />
         ))}
+        </div>
       </div>
 
       {!currentResult && selectedOptionId !== null && (
         <button
           onClick={handleSubmit}
-          className="w-full py-3 rounded-2xl text-lg font-bold bg-linear-to-r from-pink-400 to-purple-500 text-white border-b-4 border-purple-700 hover:-translate-y-0.5 active:translate-y-0 active:border-b-2 transition-all duration-200 cursor-pointer"
+          className="w-full py-3 rounded-2xl text-lg font-bold bg-linear-to-r from-pink-400 to-purple-500 text-white shadow-sm hover:shadow-md hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200 cursor-pointer"
         >
-          Submit
+          Lock it in
         </button>
       )}
 
       {currentResult && (
         <button
           onClick={handleNext}
-          className="w-full py-3 rounded-2xl text-lg font-bold bg-purple-600 text-white border-b-4 border-purple-800 hover:bg-purple-500 hover:-translate-y-0.5 active:translate-y-0 active:border-b-2 transition-all duration-200 cursor-pointer"
+          className="w-full py-3 rounded-2xl text-lg font-bold bg-(--color-primary) text-white shadow-sm hover:shadow-md hover:bg-(--color-primary-dark) hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200 cursor-pointer"
         >
           {questionNumber === totalQuestions ? "See Results" : "Next"}
         </button>
diff --git a/apps/web/src/components/game/ScoreScreen.tsx b/apps/web/src/components/game/ScoreScreen.tsx
index afd3295..ac64da2 100644
--- a/apps/web/src/components/game/ScoreScreen.tsx
+++ b/apps/web/src/components/game/ScoreScreen.tsx
@@ -1,4 +1,5 @@
 import type { AnswerResult } from "@lila/shared";
+import { ConfettiBurst } from "../ui/ConfettiBurst";
 
 type ScoreScreenProps = { results: AnswerResult[]; onPlayAgain: () => void };
 
@@ -17,30 +18,38 @@ export const ScoreScreen = ({ results, onPlayAgain }: ScoreScreenProps) => {
 
   return (
     <div className="flex flex-col items-center gap-8 w-full max-w-md mx-auto">
-      <div className="bg-white rounded-3xl shadow-lg p-10 w-full text-center">
-        <p className="text-lg font-medium text-purple-400 mb-2">Your Score</p>
-        <h2 className="text-6xl font-bold text-purple-900 mb-1">
+      <div className="relative overflow-hidden w-full rounded-3xl border border-(--color-primary-light) bg-white/40 dark:bg-black/10 backdrop-blur shadow-sm p-10 text-center">
+        {percentage === 100 && <ConfettiBurst />}
+        <div className="absolute -top-20 -left-24 h-56 w-56 rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl" />
+        <div className="absolute -bottom-24 -right-20 h-64 w-64 rounded-full bg-(--color-primary) opacity-[0.12] blur-3xl" />
+
+        <p className="relative inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-4 py-1 text-xs font-bold tracking-widest uppercase text-(--color-primary) mb-3">
+          Results
+        </p>
+        <h2 className="relative text-6xl font-black tracking-tight text-(--color-text) mb-1">
           {score}/{total}
         </h2>
-        <p className="text-2xl mb-6">{getMessage()}</p>
+        <p className="relative text-2xl mb-6">{getMessage()}</p>
 
-        <div className="w-full bg-purple-100 rounded-full h-4 mb-2">
+        <div className="relative w-full bg-(--color-surface) border border-(--color-primary-light) rounded-full h-4 mb-2 overflow-hidden">
           <div
             className="bg-linear-to-r from-pink-400 to-purple-500 h-4 rounded-full transition-all duration-700"
             style={{ width: `${percentage}%` }}
           />
         </div>
-        <p className="text-sm text-gray-400">{percentage}% correct</p>
+        <p className="relative text-sm text-(--color-text-muted)">
+          {percentage}% correct
+        </p>
       </div>
 
       <div className="flex flex-col gap-2 w-full">
         {results.map((result, index) => (
           <div
             key={result.questionId}
-            className={`flex items-center gap-3 py-2 px-4 rounded-xl text-sm ${
+            className={`flex items-center gap-3 py-2 px-4 rounded-xl text-sm border ${
               result.isCorrect
-                ? "bg-emerald-50 text-emerald-700"
-                : "bg-pink-50 text-pink-700"
+                ? "bg-emerald-50/60 text-emerald-700 border-emerald-200"
+                : "bg-pink-50/60 text-pink-700 border-pink-200"
             }`}
           >
             <span className="font-bold">{index + 1}.</span>
@@ -51,9 +60,9 @@ export const ScoreScreen = ({ results, onPlayAgain }: ScoreScreenProps) => {
 
       <button
         onClick={onPlayAgain}
-        className="py-3 px-10 rounded-2xl text-lg font-bold bg-purple-600 text-white border-b-4 border-purple-800 hover:bg-purple-500 hover:-translate-y-0.5 active:translate-y-0 active:border-b-2 transition-all duration-200 cursor-pointer"
+        className="w-full py-3 px-10 rounded-2xl text-lg font-black bg-(--color-primary) text-white shadow-sm hover:shadow-md hover:bg-(--color-primary-dark) hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200 cursor-pointer"
       >
-        Play Again
+        Play again
       </button>
     </div>
   );
diff --git a/apps/web/src/components/landing/FeatureCards.tsx b/apps/web/src/components/landing/FeatureCards.tsx
index 849afd0..e8085c2 100644
--- a/apps/web/src/components/landing/FeatureCards.tsx
+++ b/apps/web/src/components/landing/FeatureCards.tsx
@@ -12,29 +12,52 @@ const features = [
   },
   {
     emoji: "⚔️",
-    title: "Multiplayer coming",
-    description: "Challenge friends and see who has the bigger vocabulary.",
+    title: "Real-time multiplayer",
+    description: "Create a room, share the code, and race to the best score.",
   },
 ];
 
 const FeatureCards = () => {
   return (
-    <section className="py-16">
-      <h2 className="text-center text-3xl font-black tracking-tight text-(--color-text) mb-12">
-        Why lila
-      </h2>
+    <section className="py-14">
+      <div className="text-center">
+        <div className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-4 py-1 text-xs font-bold tracking-widest uppercase text-(--color-primary)">
+          Tiny rounds · big dopamine
+        </div>
+        <h2 className="text-3xl font-black tracking-tight text-(--color-text)">
+          Why lila
+        </h2>
+        <p className="mt-3 text-(--color-text-muted) max-w-2xl mx-auto">
+          Built to be fast to start, satisfying to finish, and fun to repeat.
+        </p>
+      </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <div className="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
         {features.map(({ emoji, title, description }) => (
           <div
             key={title}
-            className="flex flex-col gap-3 p-6 rounded-2xl border border-(--color-primary-light)"
+            className="group relative overflow-hidden rounded-2xl border border-(--color-primary-light) bg-(--color-bg) p-6 shadow-sm hover:shadow-lg transition-shadow"
           >
-            <span className="text-3xl">{emoji}</span>
-            <h3 className="text-lg font-bold text-(--color-text)">{title}</h3>
-            <p className="text-sm text-(--color-text-muted) leading-relaxed">
+            <div className="absolute -top-24 -right-24 h-48 w-48 rounded-full bg-(--color-primary) opacity-[0.08] blur-2xl transition-transform duration-300 group-hover:translate-x-2 group-hover:-translate-y-2" />
+            <div className="flex items-center gap-4">
+              <div className="relative h-12 w-12 rounded-2xl bg-(--color-surface) border border-(--color-primary-light) grid place-items-center text-2xl">
+                <span aria-hidden>{emoji}</span>
+              </div>
+              <h3 className="text-lg font-bold text-(--color-text)">{title}</h3>
+            </div>
+            <p className="mt-3 text-sm text-(--color-text-muted) leading-relaxed">
               {description}
             </p>
+            <div className="mt-5 flex flex-wrap gap-2">
+              <span className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-3 py-1 text-xs font-bold text-(--color-primary-dark)">
+                <span className="h-1.5 w-1.5 rounded-full bg-(--color-accent)" />
+                Instant feedback
+              </span>
+              <span className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-3 py-1 text-xs font-bold text-(--color-primary-dark)">
+                <span className="h-1.5 w-1.5 rounded-full bg-(--color-primary)" />
+                Type-safe API
+              </span>
+            </div>
           </div>
         ))}
       </div>
diff --git a/apps/web/src/components/landing/Hero.tsx b/apps/web/src/components/landing/Hero.tsx
index 0297e53..6a6de87 100644
--- a/apps/web/src/components/landing/Hero.tsx
+++ b/apps/web/src/components/landing/Hero.tsx
@@ -5,57 +5,132 @@ const Hero = () => {
   const { data: session } = useSession();
 
   return (
-    <section className="relative flex flex-col items-center text-center pt-20 pb-16">
-      <div className="-rotate-1 mb-2">
-        <span className="text-sm font-semibold tracking-widest uppercase text-(--color-accent)">
-          Vocabulary trainer
-        </span>
+    <section className="relative pt-10 md:pt-16 pb-10 md:pb-14">
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute -top-24 left-1/2 h-72 w-[46rem] -translate-x-1/2 rounded-full bg-(--color-primary) opacity-[0.10] blur-3xl" />
+        <div className="absolute -top-10 left-1/2 h-72 w-[46rem] -translate-x-1/2 rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl" />
       </div>
 
-      <h1 className="text-6xl font-black tracking-tight text-(--color-text) leading-tight">
-        Meet{" "}
-        <span className="inline-block rotate-1 px-3 py-1 bg-(--color-primary) text-white rounded-xl">
-          lila
-        </span>
-      </h1>
+      <div className="grid items-center gap-10 md:grid-cols-2">
+        <div className="text-center md:text-left">
+          <div className="-rotate-1 mb-3">
+            <span className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) px-4 py-1 text-xs font-semibold tracking-widest uppercase text-(--color-accent) border border-(--color-primary-light)">
+              Duolingo-style drills · real-time multiplayer
+            </span>
+          </div>
 
-      <p className="mt-6 text-xl font-medium text-(--color-text-muted) max-w-sm">
-        Learn words.{" "}
-        <span className="text-(--color-accent) font-bold">Beat friends.</span>
-      </p>
+          <h1 className="text-5xl md:text-6xl font-black tracking-tight text-(--color-text) leading-[1.05]">
+            Learn vocabulary fast,{" "}
+            <span className="inline-block rotate-1 px-3 py-1 bg-(--color-primary) text-white rounded-xl">
+              together
+            </span>
+            .
+          </h1>
 
-      <div className="mt-4 flex gap-2 flex-wrap justify-center">
-        {["🇬🇧", "🇮🇹", "🇩🇪", "🇫🇷", "🇪🇸"].map((flag) => (
-          <span key={flag} className="text-2xl">
-            {flag}
-          </span>
-        ))}
-      </div>
+          <p className="mt-5 text-lg md:text-xl font-medium text-(--color-text-muted) max-w-xl mx-auto md:mx-0">
+            A word appears. You pick the translation. You score points.
+            Then you queue up a room and{" "}
+            <span className="text-(--color-accent) font-bold">beat friends</span>{" "}
+            in real time.
+          </p>
 
-      <div className="mt-10 flex gap-4">
-        {session ? (
-          <Link
-            to="/play"
-            className="px-8 py-3 rounded-full text-white font-bold text-sm bg-(--color-primary) hover:bg-(--color-primary-dark)"
-          >
-            Start playing →
-          </Link>
-        ) : (
-          <>
-            <Link
-              to="/login"
-              className="px-8 py-3 rounded-full text-white font-bold text-sm bg-(--color-primary) hover:bg-(--color-primary-dark)"
-            >
-              Get started →
-            </Link>
-            <Link
-              to="/login"
-              className="px-8 py-3 rounded-full font-bold text-sm text-(--color-primary) border-2 border-(--color-primary) hover:bg-(--color-surface)"
-            >
-              Login
-            </Link>
-          </>
-        )}
+          <div className="mt-4 flex gap-2 flex-wrap justify-center md:justify-start">
+            {["🇬🇧", "🇮🇹", "🇩🇪", "🇫🇷", "🇪🇸"].map((flag) => (
+              <span key={flag} className="text-2xl" aria-hidden>
+                {flag}
+              </span>
+            ))}
+            <span className="sr-only">
+              Supported languages: English, Italian, German, French, Spanish
+            </span>
+          </div>
+
+          <div className="mt-8 flex gap-3 flex-wrap justify-center md:justify-start">
+            {session ? (
+              <>
+                <Link
+                  to="/play"
+                  className="px-7 py-3 rounded-full text-white font-bold text-sm bg-(--color-primary) hover:bg-(--color-primary-dark)"
+                >
+                  Play solo
+                </Link>
+                <Link
+                  to="/multiplayer"
+                  className="px-7 py-3 rounded-full font-bold text-sm text-(--color-primary) border-2 border-(--color-primary) hover:bg-(--color-surface)"
+                >
+                  Play with friends
+                </Link>
+              </>
+            ) : (
+              <>
+                <Link
+                  to="/login"
+                  className="px-7 py-3 rounded-full text-white font-bold text-sm bg-(--color-primary) hover:bg-(--color-primary-dark)"
+                >
+                  Get started
+                </Link>
+                <Link
+                  to="/login"
+                  className="px-7 py-3 rounded-full font-bold text-sm text-(--color-primary) border-2 border-(--color-primary) hover:bg-(--color-surface)"
+                >
+                  Log in
+                </Link>
+              </>
+            )}
+          </div>
+        </div>
+
+        <div className="relative">
+          <div className="rounded-3xl border border-(--color-primary-light) bg-white/40 dark:bg-black/20 backdrop-blur p-3 shadow-sm">
+            <div className="rounded-2xl bg-(--color-bg) border border-(--color-primary-light) overflow-hidden">
+              <div className="flex items-center justify-between px-4 py-3 bg-(--color-surface) border-b border-(--color-primary-light)">
+                <div className="flex items-center gap-2">
+                  <div className="h-2.5 w-2.5 rounded-full bg-(--color-accent)" />
+                  <div className="h-2.5 w-2.5 rounded-full bg-(--color-primary-light)" />
+                  <div className="h-2.5 w-2.5 rounded-full bg-(--color-text-muted) opacity-40" />
+                </div>
+                <span className="text-xs font-semibold text-(--color-text-muted)">
+                  Live preview
+                </span>
+              </div>
+
+              <div className="p-5 md:p-6">
+                <p className="text-xs font-semibold tracking-widest uppercase text-(--color-text-muted)">
+                  Translate
+                </p>
+                <div className="mt-2 rounded-2xl bg-(--color-surface) border border-(--color-primary-light) px-4 py-5">
+                  <div className="text-3xl font-black text-(--color-text)">
+                    finestra
+                  </div>
+                  <div className="mt-1 text-sm text-(--color-text-muted)">
+                    (noun) · A2
+                  </div>
+                </div>
+
+                <div className="mt-4 grid grid-cols-2 gap-3">
+                  {["window", "forest", "river", "kitchen"].map((opt) => (
+                    <div
+                      key={opt}
+                      className="rounded-xl border border-(--color-primary-light) bg-white/30 dark:bg-black/10 px-4 py-3 text-sm font-semibold text-(--color-text) hover:bg-(--color-surface)"
+                    >
+                      {opt}
+                    </div>
+                  ))}
+                </div>
+
+                <div className="mt-5 flex items-center justify-between">
+                  <div className="text-xs text-(--color-text-muted)">
+                    Round 2/10
+                  </div>
+                  <div className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-3 py-1 text-xs font-semibold text-(--color-text-muted)">
+                    <span className="h-2 w-2 rounded-full bg-(--color-accent)" />
+                    Multiplayer room
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </section>
   );
diff --git a/apps/web/src/components/landing/HowItWorks.tsx b/apps/web/src/components/landing/HowItWorks.tsx
index b9791a8..8255493 100644
--- a/apps/web/src/components/landing/HowItWorks.tsx
+++ b/apps/web/src/components/landing/HowItWorks.tsx
@@ -20,26 +20,55 @@ const steps = [
 
 const HowItWorks = () => {
   return (
-    <section className="py-16">
-      <h2 className="text-center text-3xl font-black tracking-tight text-(--color-text) mb-12">
-        How it works
-      </h2>
-
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        {steps.map(({ number, title, description }) => (
-          <div
-            key={number}
-            className="flex flex-col gap-3 p-6 rounded-2xl bg-(--color-surface) border border-(--color-primary-light)"
-          >
-            <span className="text-4xl font-black text-(--color-primary-light)">
-              {number}
-            </span>
-            <h3 className="text-lg font-bold text-(--color-text)">{title}</h3>
-            <p className="text-sm text-(--color-text-muted) leading-relaxed">
-              {description}
-            </p>
+    <section className="py-14">
+      <div className="relative -mx-6 px-6 py-12 rounded-3xl bg-(--color-surface) border border-(--color-primary-light) overflow-hidden">
+        <div className="absolute -top-20 -left-24 h-56 w-56 rounded-full bg-(--color-accent) opacity-[0.12] blur-3xl" />
+        <div className="absolute -bottom-24 -right-20 h-64 w-64 rounded-full bg-(--color-primary) opacity-[0.14] blur-3xl" />
+        <div className="text-center">
+          <div className="inline-flex items-center gap-2 rounded-full bg-(--color-bg) border border-(--color-primary-light) px-4 py-1 text-xs font-bold tracking-widest uppercase text-(--color-accent)">
+            Quick · satisfying · replayable
           </div>
-        ))}
+          <h2 className="mt-3 text-3xl font-black tracking-tight text-(--color-text)">
+            How it works
+          </h2>
+          <p className="mt-3 text-(--color-text-muted) max-w-2xl mx-auto">
+            Short rounds, instant feedback, and just enough pressure to make the
+            words stick.
+          </p>
+        </div>
+
+        <ol className="relative mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
+          {steps.map(({ number, title, description }) => (
+            <li
+              key={number}
+              className="group relative overflow-hidden rounded-2xl bg-(--color-bg) border border-(--color-primary-light) p-6 shadow-sm hover:shadow-lg transition-shadow"
+            >
+              <div className="absolute -top-24 -right-24 h-48 w-48 rounded-full bg-(--color-primary) opacity-[0.10] blur-2xl transition-transform duration-300 group-hover:translate-x-2 group-hover:-translate-y-2" />
+              <div className="absolute -bottom-24 -left-24 h-48 w-48 rounded-full bg-(--color-accent) opacity-[0.08] blur-2xl transition-transform duration-300 group-hover:-translate-x-2 group-hover:translate-y-2" />
+              <div className="relative flex items-start gap-4">
+                <div className="shrink-0">
+                  <div className="h-12 w-12 rounded-2xl bg-(--color-surface) border border-(--color-primary-light) grid place-items-center">
+                    <span className="text-sm font-black tracking-widest text-(--color-primary)">
+                      {number}
+                    </span>
+                  </div>
+                </div>
+                <div>
+                  <h3 className="text-lg font-bold text-(--color-text)">
+                    {title}
+                  </h3>
+                  <p className="mt-2 text-sm text-(--color-text-muted) leading-relaxed">
+                    {description}
+                  </p>
+                  <div className="mt-4 inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-3 py-1 text-xs font-bold text-(--color-primary-dark)">
+                    <span className="h-1.5 w-1.5 rounded-full bg-(--color-accent)" />
+                    Under 30 seconds
+                  </div>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ol>
       </div>
     </section>
   );
diff --git a/apps/web/src/components/multiplayer/MultiplayerScoreScreen.tsx b/apps/web/src/components/multiplayer/MultiplayerScoreScreen.tsx
index 5e95588..f530db8 100644
--- a/apps/web/src/components/multiplayer/MultiplayerScoreScreen.tsx
+++ b/apps/web/src/components/multiplayer/MultiplayerScoreScreen.tsx
@@ -1,5 +1,6 @@
 import { useNavigate } from "@tanstack/react-router";
 import type { LobbyPlayer } from "@lila/shared";
+import { ConfettiBurst } from "../ui/ConfettiBurst";
 
 type MultiplayerScoreScreenProps = {
   players: LobbyPlayer[];
@@ -26,19 +27,27 @@ export const MultiplayerScoreScreen = ({
     .join(" and ");
 
   return (
-    <div className="min-h-screen bg-linear-to-b from-purple-100 to-pink-50 flex items-center justify-center p-6">
-      <div className="bg-white rounded-2xl shadow-lg p-8 w-full max-w-md flex flex-col gap-6">
+    <div className="min-h-screen relative flex items-center justify-center p-6">
+      <div className="absolute inset-0 -z-10 bg-linear-to-b from-purple-100 to-pink-50" />
+      <div className="absolute -top-24 left-1/2 -translate-x-1/2 h-72 w-[46rem] rounded-full bg-(--color-primary) opacity-[0.12] blur-3xl -z-10" />
+      <div className="absolute -top-8 left-1/2 -translate-x-1/2 h-72 w-[46rem] rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl -z-10" />
+
+      <div className="w-full max-w-md rounded-3xl border border-(--color-primary-light) bg-white/50 dark:bg-black/10 backdrop-blur shadow-sm p-8 flex flex-col gap-6">
+        {isWinner && !isTie && <ConfettiBurst />}
         {/* Result header */}
         <div className="text-center flex flex-col gap-1">
-          <h1 className="text-2xl font-bold text-purple-800">
+          <div className="inline-flex mx-auto items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-4 py-1 text-xs font-bold tracking-widest uppercase text-(--color-primary)">
+            Multiplayer
+          </div>
+          <h1 className="mt-2 text-2xl font-black tracking-tight text-(--color-text)">
             {isTie ? "It's a tie!" : isWinner ? "You win! 🎉" : "Game over"}
           </h1>
-          <p className="text-sm text-gray-500">
+          <p className="text-sm text-(--color-text-muted)">
             {isTie ? `${winnerNames} tied` : `${winnerNames} wins!`}
           </p>
         </div>
 
-        <div className="border-t border-gray-200" />
+        <div className="border-t border-(--color-primary-light) opacity-60" />
 
         {/* Score list */}
         <div className="flex flex-col gap-2">
@@ -48,35 +57,35 @@ export const MultiplayerScoreScreen = ({
             return (
               <div
                 key={player.userId}
-                className={`flex items-center justify-between rounded-lg px-4 py-3 ${
+                className={`flex items-center justify-between rounded-2xl px-4 py-3 border ${
                   isCurrentUser
-                    ? "bg-purple-50 border border-purple-200"
-                    : "bg-gray-50"
+                    ? "bg-(--color-surface) border-(--color-primary-light)"
+                    : "bg-white/30 dark:bg-black/10 border-(--color-primary-light)"
                 }`}
               >
                 <div className="flex items-center gap-3">
-                  <span className="text-sm font-medium text-gray-400 w-4">
+                  <span className="text-sm font-bold text-(--color-text-muted) w-4">
                     {index + 1}.
                   </span>
                   <span
-                    className={`text-sm font-medium ${
-                      isCurrentUser ? "text-purple-800" : "text-gray-700"
+                    className={`text-sm font-semibold ${
+                      isCurrentUser ? "text-(--color-text)" : "text-(--color-text)"
                     }`}
                   >
                     {player.user.name}
                     {isCurrentUser && (
-                      <span className="text-xs text-purple-400 ml-1">
+                      <span className="text-xs text-(--color-primary) ml-1">
                         (you)
                       </span>
                     )}
                   </span>
                   {isPlayerWinner && (
-                    <span className="text-xs text-yellow-500 font-medium">
+                    <span className="text-xs font-medium" aria-label="Winner">
                       👑
                     </span>
                   )}
                 </div>
-                <span className="text-sm font-bold text-gray-700">
+                <span className="text-sm font-black text-(--color-text)">
                   {player.score} pts
                 </span>
               </div>
@@ -84,12 +93,12 @@ export const MultiplayerScoreScreen = ({
           })}
         </div>
 
-        <div className="border-t border-gray-200" />
+        <div className="border-t border-(--color-primary-light) opacity-60" />
 
         {/* Actions */}
         <div className="flex flex-col gap-3">
           <button
-            className="rounded bg-purple-600 px-4 py-2 text-white hover:bg-purple-500"
+            className="rounded-2xl bg-(--color-primary) px-4 py-3 text-white font-black hover:bg-(--color-primary-dark) shadow-sm hover:shadow-md transition-all"
             onClick={() => {
               void navigate({
                 to: "/multiplayer/lobby/$code",
@@ -100,7 +109,7 @@ export const MultiplayerScoreScreen = ({
             Play Again
           </button>
           <button
-            className="rounded bg-gray-100 px-4 py-2 text-gray-700 hover:bg-gray-200"
+            className="rounded-2xl bg-white/30 dark:bg-black/10 border border-(--color-primary-light) px-4 py-3 text-(--color-text) font-bold hover:bg-(--color-surface) transition-colors"
             onClick={() => {
               void navigate({ to: "/multiplayer" });
             }}
diff --git a/apps/web/src/components/ui/ConfettiBurst.tsx b/apps/web/src/components/ui/ConfettiBurst.tsx
new file mode 100644
index 0000000..66285d4
--- /dev/null
+++ b/apps/web/src/components/ui/ConfettiBurst.tsx
@@ -0,0 +1,103 @@
+import { useEffect, useMemo, useState, useId } from "react";
+
+type ConfettiBurstProps = {
+  className?: string;
+  colors?: string[];
+  count?: number;
+};
+
+type Piece = {
+  id: number;
+  style: React.CSSProperties & ConfettiVars;
+};
+
+type ConfettiVars = {
+  ["--x0"]: string;
+  ["--y0"]: string;
+  ["--x1"]: string;
+  ["--y1"]: string;
+};
+
+const hashStringToUint32 = (value: string) => {
+  // FNV-1a 32-bit
+  let hash = 2166136261;
+  for (let i = 0; i < value.length; i++) {
+    hash ^= value.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+};
+
+const mulberry32 = (seed: number) => {
+  return () => {
+    let t = (seed += 0x6d2b79f5);
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+};
+
+export const ConfettiBurst = ({
+  className,
+  colors = [
+    "var(--color-primary)",
+    "var(--color-accent)",
+    "var(--color-primary-light)",
+    "var(--color-accent-light)",
+  ],
+  count = 18,
+}: ConfettiBurstProps) => {
+  const [visible, setVisible] = useState(true);
+  const instanceId = useId();
+
+  useEffect(() => {
+    const t = window.setTimeout(() => setVisible(false), 1100);
+    return () => window.clearTimeout(t);
+  }, []);
+
+  const pieces = useMemo<Piece[]>(() => {
+    const seed = hashStringToUint32(`${instanceId}:${count}:${colors.join(",")}`);
+    const rand = mulberry32(seed);
+    const rnd = (min: number, max: number) => min + rand() * (max - min);
+
+    return Array.from({ length: count }).map((_, i) => {
+      const x0 = rnd(-6, 6);
+      const y0 = rnd(-6, 6);
+      const x1 = rnd(-160, 160);
+      const y1 = rnd(60, 220);
+      const delay = rnd(0, 120);
+      const rotate = rnd(0, 360);
+      const color = colors[i % colors.length];
+
+      return {
+        id: i,
+        style: {
+          left: "50%",
+          top: "0%",
+          backgroundColor: color,
+          transform: `translate(${x0}px, ${y0}px) rotate(${rotate}deg)`,
+          animationDelay: `${delay}ms`,
+          // consumed by keyframes
+          ["--x0"]: `${x0}px`,
+          ["--y0"]: `${y0}px`,
+          ["--x1"]: `${x1}px`,
+          ["--y1"]: `${y1}px`,
+        },
+      };
+    });
+  }, [colors, count, instanceId]);
+
+  if (!visible) return null;
+
+  return (
+    <div
+      className={`pointer-events-none absolute inset-0 overflow-visible ${className ?? ""}`}
+      aria-hidden
+    >
+      {pieces.map((p) => (
+        <span key={p.id} className="lila-confetti-piece" style={p.style} />
+      ))}
+    </div>
+  );
+};
+
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 65c98ab..c4b2853 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -26,3 +26,65 @@
     color: var(--color-text);
   }
 }
+
+@keyframes lila-pop {
+  0% {
+    transform: scale(1);
+  }
+  40% {
+    transform: scale(1.03);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lila-shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  20% {
+    transform: translateX(-3px);
+  }
+  40% {
+    transform: translateX(3px);
+  }
+  60% {
+    transform: translateX(-2px);
+  }
+  80% {
+    transform: translateX(2px);
+  }
+}
+
+@keyframes lila-confetti {
+  0% {
+    transform: translate(var(--x0), var(--y0)) rotate(0deg);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate(var(--x1), var(--y1)) rotate(540deg);
+    opacity: 0;
+  }
+}
+
+.lila-pop {
+  animation: lila-pop 220ms ease-out;
+}
+
+.lila-shake {
+  animation: lila-shake 260ms ease-in-out;
+}
+
+.lila-confetti-piece {
+  position: absolute;
+  width: 8px;
+  height: 12px;
+  border-radius: 3px;
+  animation: lila-confetti 900ms ease-out forwards;
+  will-change: transform, opacity;
+}
diff --git a/apps/web/src/routes/login.tsx b/apps/web/src/routes/login.tsx
index ff7e8d9..8451d41 100644
--- a/apps/web/src/routes/login.tsx
+++ b/apps/web/src/routes/login.tsx
@@ -16,7 +16,7 @@ const LoginPage = () => {
     <div className="flex flex-col items-center justify-center gap-4 p-8">
       <h1 className="text-2xl font-bold">sign in to lila</h1>
       <button
-        className="w-64 rounded bg-gray-800 px-4 py-2 text-white hover:bg-gray-700"
+        className="w-64 rounded-2xl bg-(--color-text) px-4 py-3 text-white font-bold hover:opacity-90 shadow-sm hover:shadow-md transition-all"
         onClick={() => {
           void signIn
             .social({ provider: "github", callbackURL: window.location.origin })
@@ -28,7 +28,7 @@ const LoginPage = () => {
         Continue with GitHub
       </button>
       <button
-        className="w-64 rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-500"
+        className="w-64 rounded-2xl bg-(--color-primary) px-4 py-3 text-white font-bold hover:bg-(--color-primary-dark) shadow-sm hover:shadow-md transition-all"
         onClick={() => {
           void signIn
             .social({ provider: "google", callbackURL: window.location.origin })
diff --git a/apps/web/src/routes/multiplayer/game.$code.tsx b/apps/web/src/routes/multiplayer/game.$code.tsx
index 4d38d79..c2c0041 100644
--- a/apps/web/src/routes/multiplayer/game.$code.tsx
+++ b/apps/web/src/routes/multiplayer/game.$code.tsx
@@ -112,9 +112,9 @@ function GamePage() {
   // Phase: playing
   return (
     <div className="min-h-screen bg-linear-to-b from-purple-100 to-pink-50 flex items-center justify-center p-6">
-      <div className="bg-white rounded-2xl shadow-lg p-8 w-full max-w-md flex flex-col gap-6">
+      <div className="w-full max-w-md rounded-3xl border border-(--color-primary-light) bg-white/50 dark:bg-black/10 backdrop-blur shadow-sm p-8 flex flex-col gap-6">
         {/* Progress */}
-        <p className="text-sm text-gray-500 text-center">
+        <p className="text-xs font-bold tracking-widest uppercase text-(--color-text-muted) text-center">
           Question {currentQuestion.questionNumber} of{" "}
           {currentQuestion.totalQuestions}
         </p>
@@ -150,7 +150,7 @@ function GamePage() {
         {/* Round results */}
         {answerResult && (
           <div className="flex flex-col gap-2">
-            <h3 className="text-sm font-semibold text-gray-700">
+            <h3 className="text-sm font-black text-(--color-text)">
               Round results
             </h3>
             {answerResult.players.map((player) => {
@@ -160,9 +160,9 @@ function GamePage() {
               return (
                 <div
                   key={player.userId}
-                  className="flex items-center justify-between text-sm"
+                  className="flex items-center justify-between text-sm text-(--color-text)"
                 >
-                  <span className="text-gray-700">{player.user.name}</span>
+                  <span className="font-semibold">{player.user.name}</span>
                   <span
                     className={
                       result?.isCorrect
@@ -176,7 +176,9 @@ function GamePage() {
                         ? "✓ Correct"
                         : "✗ Wrong"}
                   </span>
-                  <span className="text-gray-500">{player.score} pts</span>
+                  <span className="text-(--color-text-muted)">
+                    {player.score} pts
+                  </span>
                 </div>
               );
             })}
diff --git a/apps/web/src/routes/multiplayer/index.tsx b/apps/web/src/routes/multiplayer/index.tsx
index 55f2da6..ee757f4 100644
--- a/apps/web/src/routes/multiplayer/index.tsx
+++ b/apps/web/src/routes/multiplayer/index.tsx
@@ -76,8 +76,8 @@ function MultiplayerPage() {
 
   return (
     <div className="min-h-screen bg-linear-to-b from-purple-100 to-pink-50 flex items-center justify-center p-6">
-      <div className="bg-white rounded-2xl shadow-lg p-8 w-full max-w-md flex flex-col gap-6">
-        <h1 className="text-2xl font-bold text-center text-purple-800">
+      <div className="w-full max-w-md rounded-3xl border border-(--color-primary-light) bg-white/50 dark:bg-black/10 backdrop-blur shadow-sm p-8 flex flex-col gap-6">
+        <h1 className="text-2xl font-black tracking-tight text-center text-(--color-text)">
           Multiplayer
         </h1>
 
@@ -85,14 +85,14 @@ function MultiplayerPage() {
 
         {/* Create lobby */}
         <div className="flex flex-col gap-2">
-          <h2 className="text-lg font-semibold text-gray-700">
+          <h2 className="text-lg font-bold text-(--color-text)">
             Create a lobby
           </h2>
-          <p className="text-sm text-gray-500">
+          <p className="text-sm text-(--color-text-muted)">
             Start a new game and invite friends with a code.
           </p>
           <button
-            className="rounded bg-purple-600 px-4 py-2 text-white hover:bg-purple-500 disabled:opacity-50"
+            className="rounded-2xl bg-(--color-primary) px-4 py-3 text-white font-black hover:bg-(--color-primary-dark) shadow-sm hover:shadow-md transition-all disabled:opacity-50"
             onClick={() => {
               void handleCreate().catch((err) => {
                 console.error("Create lobby error:", err);
@@ -104,16 +104,16 @@ function MultiplayerPage() {
           </button>
         </div>
 
-        <div className="border-t border-gray-200" />
+        <div className="border-t border-(--color-primary-light) opacity-60" />
 
         {/* Join lobby */}
         <div className="flex flex-col gap-2">
-          <h2 className="text-lg font-semibold text-gray-700">Join a lobby</h2>
-          <p className="text-sm text-gray-500">
+          <h2 className="text-lg font-bold text-(--color-text)">Join a lobby</h2>
+          <p className="text-sm text-(--color-text-muted)">
             Enter the code shared by your host.
           </p>
           <input
-            className="rounded border border-gray-300 px-3 py-2 text-sm uppercase tracking-widest focus:outline-none focus:ring-2 focus:ring-purple-400"
+            className="rounded-2xl border border-(--color-primary-light) bg-white/30 dark:bg-black/10 px-4 py-3 text-sm uppercase tracking-widest text-(--color-text) placeholder:text-(--color-text-muted) focus:outline-none focus:ring-2 focus:ring-(--color-primary)"
             placeholder="Enter code (e.g. WOLF42)"
             value={joinCode}
             onChange={(e) => setJoinCode(e.target.value)}
@@ -128,7 +128,7 @@ function MultiplayerPage() {
             disabled={isCreating || isJoining}
           />
           <button
-            className="rounded bg-gray-800 px-4 py-2 text-white hover:bg-gray-700 disabled:opacity-50"
+            className="rounded-2xl bg-(--color-surface) border border-(--color-primary-light) px-4 py-3 text-(--color-text) font-black hover:bg-white/30 dark:hover:bg-black/10 shadow-sm hover:shadow-md transition-all disabled:opacity-50"
             onClick={() => {
               void handleJoin().catch((err) => {
                 console.error("Join lobby error:", err);
diff --git a/apps/web/src/routes/multiplayer/lobby.$code.tsx b/apps/web/src/routes/multiplayer/lobby.$code.tsx
index 53bc9d2..1b82d0a 100644
--- a/apps/web/src/routes/multiplayer/lobby.$code.tsx
+++ b/apps/web/src/routes/multiplayer/lobby.$code.tsx
@@ -88,12 +88,14 @@ function LobbyPage() {
 
   return (
     <div className="min-h-screen bg-linear-to-b from-purple-100 to-pink-50 flex items-center justify-center p-6">
-      <div className="bg-white rounded-2xl shadow-lg p-8 w-full max-w-md flex flex-col gap-6">
+      <div className="w-full max-w-md rounded-3xl border border-(--color-primary-light) bg-white/50 dark:bg-black/10 backdrop-blur shadow-sm p-8 flex flex-col gap-6">
         {/* Lobby code */}
         <div className="flex flex-col items-center gap-2">
-          <p className="text-sm text-gray-500">Lobby code</p>
+          <p className="text-xs font-bold tracking-widest uppercase text-(--color-text-muted)">
+            Lobby code
+          </p>
           <button
-            className="text-4xl font-bold tracking-widest text-purple-800 hover:text-purple-600 cursor-pointer"
+            className="text-4xl font-black tracking-widest text-(--color-text) hover:text-(--color-primary) cursor-pointer"
             onClick={() => {
               void navigator.clipboard.writeText(code);
             }}
@@ -101,21 +103,21 @@ function LobbyPage() {
           >
             {code}
           </button>
-          <p className="text-xs text-gray-400">Click to copy</p>
+          <p className="text-xs text-(--color-text-muted)">Click to copy</p>
         </div>
 
-        <div className="border-t border-gray-200" />
+        <div className="border-t border-(--color-primary-light) opacity-60" />
 
         {/* Player list */}
         <div className="flex flex-col gap-2">
-          <h2 className="text-lg font-semibold text-gray-700">
+          <h2 className="text-lg font-black text-(--color-text)">
             Players ({lobby.players.length})
           </h2>
           <ul className="flex flex-col gap-1">
             {lobby.players.map((player) => (
               <li
                 key={player.userId}
-                className="flex items-center gap-2 text-sm text-gray-700"
+                className="flex items-center gap-2 text-sm text-(--color-text)"
               >
                 <span className="w-2 h-2 rounded-full bg-green-400" />
                 {player.user.name}
@@ -135,7 +137,7 @@ function LobbyPage() {
         {/* Start button — host only */}
         {isHost && (
           <button
-            className="rounded bg-purple-600 px-4 py-2 text-white hover:bg-purple-500 disabled:opacity-50"
+            className="rounded-2xl bg-(--color-primary) px-4 py-3 text-white font-black hover:bg-(--color-primary-dark) shadow-sm hover:shadow-md transition-all disabled:opacity-50"
             onClick={handleStart}
             disabled={!canStart}
           >
@@ -149,7 +151,7 @@ function LobbyPage() {
 
         {/* Non-host waiting message */}
         {!isHost && (
-          <p className="text-sm text-gray-500 text-center">
+          <p className="text-sm text-(--color-text-muted) text-center">
             Waiting for host to start the game...
           </p>
         )}