From 5c7b5d8eda5e3b27f20f5759be4fc7c797eff54d Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Thu, 28 Aug 2025 00:51:37 -0700
Subject: [PATCH 01/17] style: attempt new glassmorphic analysis page design

---
 src/components/Analysis/AnalysisGameList.tsx  |  54 ++---
 src/components/Analysis/AnalysisSidebar.tsx   | 221 ++++++++++--------
 src/components/Analysis/BlunderMeter.tsx      |   4 +-
 .../Analysis/ConfigurableScreens.tsx          |   2 +-
 src/components/Analysis/ConfigureAnalysis.tsx |  53 +++--
 src/components/Analysis/Highlight.tsx         |  12 +-
 src/components/Analysis/MoveMap.tsx           |   2 +-
 src/components/Analysis/MoveTooltip.tsx       |   6 +-
 src/components/Analysis/MovesByRating.tsx     |   4 +-
 src/components/Board/BoardController.tsx      |  12 +-
 src/components/Board/MovesContainer.tsx       |  30 +--
 src/components/Common/GameInfo.tsx            |   2 +-
 src/components/Common/PlayerInfo.tsx          |   8 +-
 src/pages/analysis/[...id].tsx                |   8 +
 src/styles/tailwind.css                       |  15 ++
 tailwind.config.js                            |   6 +
 16 files changed, 253 insertions(+), 186 deletions(-)

diff --git a/src/components/Analysis/AnalysisGameList.tsx b/src/components/Analysis/AnalysisGameList.tsx
index 66611a4c..e2f8af2f 100644
--- a/src/components/Analysis/AnalysisGameList.tsx
+++ b/src/components/Analysis/AnalysisGameList.tsx
@@ -584,10 +584,10 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
   return analysisTournamentList ? (
     <div
       id="analysis-game-list"
-      className="flex h-full flex-col items-start justify-start overflow-hidden bg-background-1 md:rounded"
+      className="flex h-full flex-col items-start justify-start overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md"
     >
       <div className="flex h-full w-full flex-col">
-        <div className="flex select-none items-center border-b-2 border-white border-opacity-10">
+        <div className="flex select-none items-center border-b border-white/10">
           <Header
             label="★"
             name="favorites"
@@ -630,35 +630,35 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
 
         {/* H&B Subsections */}
         {selected === 'hb' && (
-          <div className="flex border-b border-white border-opacity-10">
+          <div className="flex border-b border-white/10">
             <button
               onClick={() => setHbSubsection('hand')}
-              className={`flex-1 px-3 text-sm ${
+              className={`flex-1 px-3 text-sm transition-colors ${
                 hbSubsection === 'hand'
-                  ? 'bg-background-2 text-primary'
-                  : 'bg-background-1/50 text-secondary hover:bg-background-2'
+                  ? 'bg-white/10 text-white'
+                  : 'bg-white/5 text-white/80 hover:bg-white/10'
               }`}
             >
               <div className="flex items-center justify-center gap-1">
-                <span className="material-symbols-outlined !text-lg">
+                <span className="material-symbols-outlined !text-lg text-white/80">
                   hand_gesture
                 </span>
-                <span className="text-xs">Hand</span>
+                <span className="text-xs text-white/90">Hand</span>
               </div>
             </button>
             <button
               onClick={() => setHbSubsection('brain')}
-              className={`flex-1 px-3 text-sm ${
+              className={`flex-1 px-3 text-sm transition-colors ${
                 hbSubsection === 'brain'
-                  ? 'bg-background-2 text-primary'
-                  : 'bg-background-1/50 text-secondary hover:bg-background-2'
+                  ? 'bg-white/10 text-white'
+                  : 'bg-white/5 text-white/80 hover:bg-white/10'
               }`}
             >
               <div className="flex items-center justify-center gap-1">
-                <span className="material-symbols-outlined !text-lg">
+                <span className="material-symbols-outlined !text-lg text-white/80">
                   neurology
                 </span>
-                <span className="text-xs">Brain</span>
+                <span className="text-xs text-white/90">Brain</span>
               </div>
             </button>
           </div>
@@ -703,12 +703,12 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
                     return (
                       <div
                         key={index}
-                        className={`group flex w-full items-center gap-2 ${selectedGame ? 'bg-background-2 font-bold' : index % 2 === 0 ? 'bg-background-1/30 hover:bg-background-2' : 'bg-background-1/10 hover:bg-background-2'}`}
+                        className={`group flex w-full items-center gap-2 ${selectedGame ? 'bg-glass-strong' : 'hover:bg-glass-hover'}`}
                       >
                         <div
-                          className={`flex h-full w-9 items-center justify-center ${selectedGame ? 'bg-background-3' : 'bg-background-2 group-hover:bg-white/5'}`}
+                          className={`flex h-full w-9 items-center justify-center ${selectedGame ? 'bg-glass-strong' : 'group-hover:bg-glass-hover'}`}
                         >
-                          <p className="text-sm text-secondary">
+                          <p className="text-sm text-white/70">
                             {selected === 'play' ||
                             selected === 'hb' ||
                             selected === 'favorites'
@@ -732,13 +732,13 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
                           className="flex flex-1 cursor-pointer items-center justify-between overflow-hidden py-1"
                         >
                           <div className="flex items-center gap-2 overflow-hidden">
-                            <p className="overflow-hidden text-ellipsis whitespace-nowrap text-sm text-primary">
+                            <p className="overflow-hidden text-ellipsis whitespace-nowrap text-sm text-white/90">
                               {displayName}
                             </p>
                             {selected === 'favorites' &&
                               (game.type === 'hand' ||
                                 game.type === 'brain') && (
-                                <span className="material-symbols-outlined flex-shrink-0 !text-sm text-secondary">
+                                <span className="material-symbols-outlined flex-shrink-0 !text-sm text-white/70">
                                   {game.type === 'hand'
                                     ? 'hand_gesture'
                                     : 'neurology'}
@@ -753,7 +753,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
                                     e.stopPropagation()
                                     handleFavoriteGame(game)
                                   }}
-                                  className="flex items-center justify-center text-secondary transition hover:text-primary"
+                                  className="flex items-center justify-center text-white/70 transition hover:text-white"
                                   title="Edit favourite"
                                 >
                                   <span className="material-symbols-outlined !text-xs">
@@ -798,7 +798,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
                                 </span>
                               </button>
                             )}
-                            <p className="whitespace-nowrap text-sm font-light text-secondary">
+                            <p className="whitespace-nowrap text-sm font-light text-white/70">
                               {game.result
                                 .replace('1/2', '½')
                                 .replace('1/2', '½')}
@@ -862,7 +862,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
             getCurrentGames().length === 0 &&
             !loading && (
               <div className="flex flex-1 items-start justify-center gap-1 py-2 md:items-center">
-                <p className="text-center text-xs text-secondary">
+                <p className="text-center text-xs text-white/70">
                   {selected === 'favorites'
                     ? ' ⭐ Hit the star to favourite games...'
                     : 'Play more games... ^. .^₎⟆'}
@@ -873,12 +873,12 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
         {onCustomAnalysis && (
           <button
             onClick={onCustomAnalysis}
-            className="flex w-full items-center gap-2 bg-background-4/40 px-3 py-1.5 transition duration-200 hover:bg-background-4/80"
+            className="flex w-full items-center gap-2 border-t border-white/10 bg-white/5 px-3 py-1.5 text-white/80 transition duration-200 hover:bg-white/10"
           >
-            <span className="material-symbols-outlined text-xs text-secondary">
+            <span className="material-symbols-outlined text-xs text-white/70">
               add
             </span>
-            <span className="text-xs text-secondary">
+            <span className="text-xs text-white/80">
               Analyze Custom PGN/FEN
             </span>
           </button>
@@ -915,11 +915,11 @@ function Header({
   return (
     <button
       onClick={() => setSelected(name)}
-      className={`relative flex items-center justify-center md:py-1 ${selected === name ? 'bg-human-4/30' : 'bg-background-1/80 hover:bg-background-2'} ${name === 'favorites' ? 'px-3' : ''}`}
+      className={`relative flex items-center justify-center md:py-1 ${selected === name ? 'bg-white/10' : 'bg-white/5 hover:bg-white/10'} ${name === 'favorites' ? 'px-3' : ''}`}
     >
       <div className="flex items-center justify-start">
         <p
-          className={`text-xs transition duration-200 ${selected === name ? 'text-human-2' : 'text-primary'}`}
+          className={`text-xs transition duration-200 ${selected === name ? 'text-white' : 'text-white/90'}`}
         >
           {label}
         </p>
@@ -927,7 +927,7 @@ function Header({
       {selected === name && (
         <motion.div
           layoutId="underline"
-          className="absolute -bottom-0.5 h-0.5 w-full bg-human-2/80"
+          className="absolute -bottom-0.5 h-0.5 w-full bg-white/70"
         ></motion.div>
       )}
     </button>
diff --git a/src/components/Analysis/AnalysisSidebar.tsx b/src/components/Analysis/AnalysisSidebar.tsx
index b3eacca7..9d7a0e08 100644
--- a/src/components/Analysis/AnalysisSidebar.tsx
+++ b/src/components/Analysis/AnalysisSidebar.tsx
@@ -80,90 +80,93 @@ export const AnalysisSidebar: React.FC<Props> = ({
       className="desktop-right-column-container flex flex-col gap-2"
       style={{ willChange: 'transform, opacity' }}
     >
-      {/* Analysis Toggle Bar */}
-      <div className="flex h-10 min-h-10 items-center justify-between rounded bg-background-1 px-4">
-        <div className="flex items-center gap-2">
-          <span className="material-symbols-outlined text-xl">analytics</span>
-          <h3 className="font-semibold">Analysis</h3>
-        </div>
-        <button
-          onClick={handleToggleAnalysis}
-          className={`flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${
-            analysisEnabled
-              ? 'bg-human-4 text-white hover:bg-human-4/80'
-              : 'bg-background-2 text-secondary hover:bg-background-3'
-          }`}
-        >
-          <span className="material-symbols-outlined !text-xs">
-            {analysisEnabled ? 'visibility' : 'visibility_off'}
-          </span>
-          {analysisEnabled ? 'Visible' : 'Hidden'}
-        </button>
-      </div>
-
       {/* Large screens : 2-row layout */}
       <div className="hidden xl:flex xl:h-full xl:flex-col xl:gap-2">
         {/* Combined Highlight + MovesByRating container */}
         <div className="desktop-analysis-big-row-1-container relative flex gap-2">
-          <div className="flex h-full w-full overflow-hidden rounded border-[0.5px] border-white/40">
-            <div className="flex h-full w-auto min-w-[40%] max-w-[40%] border-r-[0.5px] border-white/40">
-              <Highlight
-                hover={analysisEnabled ? hover : mockHover}
-                makeMove={analysisEnabled ? makeMove : mockMakeMove}
-                currentMaiaModel={controller.currentMaiaModel}
-                setCurrentMaiaModel={controller.setCurrentMaiaModel}
-                recommendations={
-                  analysisEnabled
-                    ? controller.moveRecommendations
-                    : emptyRecommendations
-                }
-                moveEvaluation={
-                  analysisEnabled
-                    ? (controller.moveEvaluation as {
-                        maia?: MaiaEvaluation
-                        stockfish?: StockfishEvaluation
-                      })
-                    : {
-                        maia: undefined,
-                        stockfish: undefined,
-                      }
-                }
-                colorSanMapping={
-                  analysisEnabled ? controller.colorSanMapping : {}
-                }
-                boardDescription={
-                  analysisEnabled
-                    ? controller.boardDescription
-                    : {
-                        segments: [
-                          {
-                            type: 'text',
-                            content:
-                              'Analysis is disabled. Enable analysis to see detailed move evaluations and recommendations.',
-                          },
-                        ],
-                      }
-                }
-                currentNode={controller.currentNode ?? undefined}
-              />
+          <div className="border-glassBorder bg-glass-strong flex h-full w-full flex-col overflow-hidden rounded-md border backdrop-blur-md">
+            {/* Merged header with toggle */}
+            <div className="border-glassBorder flex h-10 min-h-10 items-center justify-between border-b bg-transparent px-4 text-white/90">
+              <div className="flex items-center gap-2">
+                <span className="material-symbols-outlined text-xl text-white/80">
+                  analytics
+                </span>
+                <h3 className="font-semibold text-white">Analysis</h3>
+              </div>
+              <button
+                onClick={handleToggleAnalysis}
+                className={`border-glassBorder bg-glass flex items-center gap-1 rounded-md border px-2 py-1 text-xs transition-colors ${
+                  analysisEnabled ? 'text-white' : 'text-white/80'
+                } hover:bg-glass-hover`}
+              >
+                <span className="material-symbols-outlined !text-xs text-white/80">
+                  {analysisEnabled ? 'visibility' : 'visibility_off'}
+                </span>
+                <span className="text-white/90">
+                  {analysisEnabled ? 'Visible' : 'Hidden'}
+                </span>
+              </button>
             </div>
-            <div className="flex h-full w-full bg-background-1">
-              <MovesByRating
-                moves={analysisEnabled ? controller.movesByRating : undefined}
-                colorSanMapping={
-                  analysisEnabled ? controller.colorSanMapping : {}
-                }
-              />
+            <div className="flex h-full w-full flex-1">
+              <div className="flex h-full w-auto min-w-[40%] max-w-[40%] border-r border-white/10">
+                <Highlight
+                  hover={analysisEnabled ? hover : mockHover}
+                  makeMove={analysisEnabled ? makeMove : mockMakeMove}
+                  currentMaiaModel={controller.currentMaiaModel}
+                  setCurrentMaiaModel={controller.setCurrentMaiaModel}
+                  recommendations={
+                    analysisEnabled
+                      ? controller.moveRecommendations
+                      : emptyRecommendations
+                  }
+                  moveEvaluation={
+                    analysisEnabled
+                      ? (controller.moveEvaluation as {
+                          maia?: MaiaEvaluation
+                          stockfish?: StockfishEvaluation
+                        })
+                      : {
+                          maia: undefined,
+                          stockfish: undefined,
+                        }
+                  }
+                  colorSanMapping={
+                    analysisEnabled ? controller.colorSanMapping : {}
+                  }
+                  boardDescription={
+                    analysisEnabled
+                      ? controller.boardDescription
+                      : {
+                          segments: [
+                            {
+                              type: 'text',
+                              content:
+                                'Analysis is disabled. Enable analysis to see detailed move evaluations and recommendations.',
+                            },
+                          ],
+                        }
+                  }
+                  currentNode={controller.currentNode ?? undefined}
+                />
+              </div>
+              <div className="flex h-full w-full">
+                <MovesByRating
+                  moves={analysisEnabled ? controller.movesByRating : undefined}
+                  colorSanMapping={
+                    analysisEnabled ? controller.colorSanMapping : {}
+                  }
+                />
+              </div>
             </div>
           </div>
           {!analysisEnabled && (
-            <div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded bg-background-1/80 backdrop-blur-sm">
-              <div className="rounded bg-background-2/90 p-4 text-center shadow-lg">
-                <span className="material-symbols-outlined mb-2 text-3xl text-human-3">
+            <div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded-lg bg-black/40 backdrop-blur-sm">
+              <div className="rounded-md border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-4 text-center">
+                <span className="material-symbols-outlined mb-2 text-3xl text-white/80">
                   lock
                 </span>
-                <p className="font-medium text-primary">Analysis Disabled</p>
-                <p className="text-sm text-secondary">
+                <p className="font-medium text-white">Analysis Disabled</p>
+                <p className="text-sm text-white/80">
                   Enable analysis to see move evaluations
                 </p>
               </div>
@@ -197,13 +200,13 @@ export const AnalysisSidebar: React.FC<Props> = ({
             }
           />
           {!analysisEnabled && (
-            <div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded bg-background-1/80 backdrop-blur-sm">
-              <div className="rounded bg-background-2/90 p-4 text-center shadow-lg">
-                <span className="material-symbols-outlined mb-2 text-3xl text-human-3">
+            <div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded-lg bg-black/40 backdrop-blur-sm">
+              <div className="rounded-md border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-4 text-center">
+                <span className="material-symbols-outlined mb-2 text-3xl text-white/80">
                   lock
                 </span>
-                <p className="font-medium text-primary">Analysis Disabled</p>
-                <p className="text-sm text-secondary">
+                <p className="font-medium text-white">Analysis Disabled</p>
+                <p className="text-sm text-white/80">
                   Enable analysis to see position evaluation
                 </p>
               </div>
@@ -215,8 +218,32 @@ export const AnalysisSidebar: React.FC<Props> = ({
       {/* Smaller screens: 3-row layout */}
       <div className="flex h-full flex-col gap-2 xl:hidden">
         {/* Row 1: Combined Highlight + BlunderMeter container */}
-        <div className="desktop-analysis-small-row-1-container relative flex overflow-hidden rounded border-[0.5px] border-white/40 bg-background-1">
-          <div className="flex h-full w-full border-r-[0.5px] border-white/40">
+        <div className="desktop-analysis-small-row-1-container border-glassBorder bg-glass-strong relative flex overflow-hidden rounded-md border backdrop-blur-md">
+          {/* Merged header with toggle (mobile/smaller screens) */}
+          <div className="border-glassBorder absolute left-0 top-0 z-10 flex h-10 w-full items-center justify-between border-b bg-transparent px-3 text-white/90 backdrop-blur-md">
+            <div className="flex items-center gap-2">
+              <span className="material-symbols-outlined text-xl text-white/80">
+                analytics
+              </span>
+              <h3 className="text-sm font-semibold text-white">Analysis</h3>
+            </div>
+            <button
+              onClick={handleToggleAnalysis}
+              className={`flex items-center gap-1 rounded-md border bg-[rgb(var(--color-surface-2))] px-2 py-1 text-xs transition-colors ${
+                analysisEnabled
+                  ? 'border-white/10 text-white'
+                  : 'border-white/10 text-white/80'
+              }`}
+            >
+              <span className="material-symbols-outlined !text-xs text-white/80">
+                {analysisEnabled ? 'visibility' : 'visibility_off'}
+              </span>
+              <span className="text-white/90">
+                {analysisEnabled ? 'Visible' : 'Hidden'}
+              </span>
+            </button>
+          </div>
+          <div className="mt-10 flex h-full w-full border-r border-white/10">
             <Highlight
               hover={analysisEnabled ? hover : mockHover}
               makeMove={analysisEnabled ? makeMove : mockMakeMove}
@@ -257,7 +284,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
               currentNode={controller.currentNode ?? undefined}
             />
           </div>
-          <div className="flex h-full w-auto min-w-[40%] max-w-[40%] bg-background-1 p-3">
+          <div className="flex h-full w-auto min-w-[40%] max-w-[40%] p-3">
             <div className="h-full w-full">
               <BlunderMeter
                 hover={analysisEnabled ? hover : mockHover}
@@ -278,13 +305,13 @@ export const AnalysisSidebar: React.FC<Props> = ({
             </div>
           </div>
           {!analysisEnabled && (
-            <div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded bg-background-1/80 backdrop-blur-sm">
-              <div className="rounded bg-background-2/90 p-4 text-center shadow-lg">
-                <span className="material-symbols-outlined mb-2 text-3xl text-human-3">
+            <div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded-lg bg-black/40 backdrop-blur-sm">
+              <div className="rounded-md border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-4 text-center">
+                <span className="material-symbols-outlined mb-2 text-3xl text-white/80">
                   lock
                 </span>
-                <p className="font-medium text-primary">Analysis Disabled</p>
-                <p className="text-sm text-secondary">
+                <p className="font-medium text-white">Analysis Disabled</p>
+                <p className="text-sm text-white/80">
                   Enable analysis to see move evaluations
                 </p>
               </div>
@@ -307,13 +334,13 @@ export const AnalysisSidebar: React.FC<Props> = ({
             />
           </div>
           {!analysisEnabled && (
-            <div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded bg-background-1/80 backdrop-blur-sm">
-              <div className="rounded bg-background-2/90 p-4 text-center shadow-lg">
-                <span className="material-symbols-outlined mb-2 text-3xl text-human-3">
+            <div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded-lg bg-black/40 backdrop-blur-sm">
+              <div className="rounded-md border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-4 text-center">
+                <span className="material-symbols-outlined mb-2 text-3xl text-white/80">
                   lock
                 </span>
-                <p className="font-medium text-primary">Analysis Disabled</p>
-                <p className="text-sm text-secondary">
+                <p className="font-medium text-white">Analysis Disabled</p>
+                <p className="text-sm text-white/80">
                   Enable analysis to see position evaluation
                 </p>
               </div>
@@ -332,13 +359,13 @@ export const AnalysisSidebar: React.FC<Props> = ({
             />
           </div>
           {!analysisEnabled && (
-            <div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded bg-background-1/80 backdrop-blur-sm">
-              <div className="rounded bg-background-2/90 p-4 text-center shadow-lg">
-                <span className="material-symbols-outlined mb-2 text-3xl text-human-3">
+            <div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded-lg bg-black/40 backdrop-blur-sm">
+              <div className="rounded-md border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-4 text-center">
+                <span className="material-symbols-outlined mb-2 text-3xl text-white/80">
                   lock
                 </span>
-                <p className="font-medium text-primary">Analysis Disabled</p>
-                <p className="text-sm text-secondary">
+                <p className="font-medium text-white">Analysis Disabled</p>
+                <p className="text-sm text-white/80">
                   Enable analysis to see move evaluations
                 </p>
               </div>
diff --git a/src/components/Analysis/BlunderMeter.tsx b/src/components/Analysis/BlunderMeter.tsx
index 00636ce7..de6cb455 100644
--- a/src/components/Analysis/BlunderMeter.tsx
+++ b/src/components/Analysis/BlunderMeter.tsx
@@ -64,7 +64,7 @@ const DesktopBlunderMeter: React.FC<Props> = ({
   return (
     <div
       id="analysis-blunder-meter"
-      className={`flex h-64 max-h-full w-full flex-col gap-2 overflow-hidden rounded ${showContainer ? 'bg-background-1/60 p-3 md:w-auto md:min-w-[40%] md:max-w-[40%]' : ''} md:h-full`}
+      className={`flex h-64 max-h-full w-full flex-col gap-2 overflow-hidden rounded-md ${showContainer ? 'border-glassBorder bg-glass border p-3 backdrop-blur-md md:w-auto md:min-w-[40%] md:max-w-[40%]' : ''} md:h-full`}
     >
       <p className="text-sm text-primary xl:text-base">Blunder Meter</p>
       <div className="flex h-full w-full flex-col overflow-hidden">
@@ -119,7 +119,7 @@ const MobileBlunderMeter: React.FC<Props> = ({
   return (
     <div
       id="analysis-blunder-meter"
-      className={`flex w-full flex-col gap-2 overflow-hidden rounded ${showContainer ? 'bg-background-1/60 p-3' : ''}`}
+      className={`flex w-full flex-col gap-2 overflow-hidden rounded-md ${showContainer ? 'border-glassBorder bg-glass border p-3 backdrop-blur-md' : ''}`}
     >
       <p className="text-base text-primary">Blunder Meter</p>
       <div className="flex w-full flex-col gap-1">
diff --git a/src/components/Analysis/ConfigurableScreens.tsx b/src/components/Analysis/ConfigurableScreens.tsx
index 8b1c10fb..9749d8b1 100644
--- a/src/components/Analysis/ConfigurableScreens.tsx
+++ b/src/components/Analysis/ConfigurableScreens.tsx
@@ -150,7 +150,7 @@ export const ConfigurableScreens: React.FC<Props> = ({
           )
         })}
       </div>
-      <div className="red-scrollbar flex flex-1 flex-col items-start justify-start overflow-y-scroll bg-backdrop/30">
+      <div className="red-scrollbar flex flex-1 flex-col items-start justify-start overflow-y-scroll">
         {screen.id === 'configure' ? (
           <ConfigureAnalysis
             currentMaiaModel={currentMaiaModel}
diff --git a/src/components/Analysis/ConfigureAnalysis.tsx b/src/components/Analysis/ConfigureAnalysis.tsx
index 63e13852..8772e8f3 100644
--- a/src/components/Analysis/ConfigureAnalysis.tsx
+++ b/src/components/Analysis/ConfigureAnalysis.tsx
@@ -35,33 +35,42 @@ export const ConfigureAnalysis: React.FC<Props> = ({
   autoSave,
 }: Props) => {
   return (
-    <div className="flex w-full flex-col items-start justify-start gap-1 p-3">
+    <div className="border-glassBorder bg-glass flex w-full flex-col items-start justify-start gap-2 rounded-md border p-3 text-white/90 backdrop-blur-md">
       <div className="flex w-full flex-col gap-0.5">
-        <p className="text-xs text-secondary">Analyze using:</p>
-        <select
-          value={currentMaiaModel}
-          className="cursor-pointer rounded-sm border-none bg-human-4/60 p-1 text-xs text-primary/70 outline-none transition duration-300 hover:bg-human-4/80 hover:text-primary"
-          onChange={(e) => setCurrentMaiaModel(e.target.value)}
-        >
-          {MAIA_MODELS.map((model) => (
-            <option value={model} key={model}>
-              {model.replace('maia_kdd_', 'Maia ')}
-            </option>
-          ))}
-        </select>
+        <p className="text-xs text-white/70">Analyze using:</p>
+        <div className="relative inline-flex w-full items-center">
+          <select
+            value={currentMaiaModel}
+            className="border-glassBorder bg-glass hover:bg-glass-hover w-full cursor-pointer appearance-none rounded-md border p-1 pr-6 text-xs text-white/90 outline-none transition duration-200"
+            onChange={(e) => setCurrentMaiaModel(e.target.value)}
+          >
+            {MAIA_MODELS.map((model) => (
+              <option
+                value={model}
+                key={model}
+                className="bg-transparent text-white"
+              >
+                {model.replace('maia_kdd_', 'Maia ')}
+              </option>
+            ))}
+          </select>
+          <span className="material-symbols-outlined pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-xs text-white/70">
+            keyboard_arrow_down
+          </span>
+        </div>
       </div>
       <ContinueAgainstMaia
         launchContinue={launchContinue}
-        background="bg-human-4/60 !rounded-sm hover:bg-human-4/80 text-primary/70 hover:text-primary !px-2 !py-1 !text-xs"
+        background="!rounded-md border border-glassBorder bg-glass text-white/90 hover:bg-glass-hover !px-2 !py-1 !text-xs"
       />
       {onAnalyzeEntireGame && (
         <button
           onClick={onAnalyzeEntireGame}
           disabled={isAnalysisInProgress || isLearnFromMistakesActive}
-          className="flex w-full items-center gap-1.5 rounded-sm bg-human-4/60 !px-2 !py-1 !text-sm text-primary/70 transition duration-200 hover:bg-human-4/80 hover:text-primary disabled:cursor-not-allowed disabled:opacity-50"
+          className="border-glassBorder bg-glass hover:bg-glass-hover flex w-full items-center gap-1.5 rounded-md border !px-2 !py-1 !text-sm text-white/90 transition duration-200 disabled:cursor-not-allowed disabled:opacity-50"
         >
           <div className="flex items-center justify-center gap-1.5">
-            <span className="material-symbols-outlined !text-sm">
+            <span className="material-symbols-outlined !text-sm text-white/80">
               network_intelligence
             </span>
             <span className="text-xs">
@@ -76,10 +85,12 @@ export const ConfigureAnalysis: React.FC<Props> = ({
         <button
           onClick={onLearnFromMistakes}
           disabled={isAnalysisInProgress || isLearnFromMistakesActive}
-          className="flex w-full items-center gap-1.5 rounded-sm bg-human-4/60 !px-2 !py-1 !text-sm text-primary/70 transition duration-200 hover:bg-human-4/80 hover:text-primary disabled:cursor-not-allowed disabled:opacity-50"
+          className="border-glassBorder bg-glass hover:bg-glass-hover flex w-full items-center gap-1.5 rounded-md border !px-2 !py-1 !text-sm text-white/90 transition duration-200 disabled:cursor-not-allowed disabled:opacity-50"
         >
           <div className="flex items-center justify-center gap-1.5">
-            <span className="material-symbols-outlined !text-sm">school</span>
+            <span className="material-symbols-outlined !text-sm text-white/80">
+              school
+            </span>
             <span className="text-xs">
               {isLearnFromMistakesActive
                 ? 'Learning in progress...'
@@ -93,8 +104,8 @@ export const ConfigureAnalysis: React.FC<Props> = ({
           <div className="flex items-center gap-1.5">
             {autoSave.status === 'saving' && (
               <>
-                <div className="h-2 w-2 animate-spin rounded-full border border-secondary border-t-primary"></div>
-                <span className="text-xs text-secondary">
+                <div className="h-2 w-2 animate-spin rounded-full border border-white/50 border-t-white"></div>
+                <span className="text-xs text-white/70">
                   Saving analysis...
                 </span>
               </>
@@ -126,7 +137,7 @@ export const ConfigureAnalysis: React.FC<Props> = ({
         <div className="mt-2 w-full">
           <button
             onClick={onDeleteCustomGame}
-            className="text-xs text-secondary transition duration-200 hover:text-human-4"
+            className="text-xs text-white/70 transition duration-200 hover:text-white"
           >
             <span className="underline">Delete</span> this stored Custom Game
           </button>
diff --git a/src/components/Analysis/Highlight.tsx b/src/components/Analysis/Highlight.tsx
index 2edddae1..b000d523 100644
--- a/src/components/Analysis/Highlight.tsx
+++ b/src/components/Analysis/Highlight.tsx
@@ -238,10 +238,10 @@ export const Highlight: React.FC<Props> = ({
   return (
     <div
       id="analysis-highlight"
-      className="flex h-full w-full flex-col border-white/40 bg-background-1"
+      className="flex h-full w-full flex-col border-white/10 bg-transparent"
     >
-      <div className="grid grid-cols-2 border-b border-white/20">
-        <div className="flex flex-col items-center justify-start gap-0.5 border-r border-white/20 bg-human-3/5 xl:gap-1">
+      <div className="grid grid-cols-2 border-b border-white/10">
+        <div className="flex flex-col items-center justify-start gap-0.5 border-r border-white/10 xl:gap-1">
           <div className="relative flex w-full flex-col border-b border-white/5">
             {isHomePage ? (
               <div className="py-2 text-center text-sm font-semibold text-human-1 md:text-xxs lg:text-xs">
@@ -258,7 +258,7 @@ export const Highlight: React.FC<Props> = ({
                     <option
                       value={model}
                       key={model}
-                      className="bg-background-1 text-human-1"
+                      className="bg-transparent text-human-1"
                     >
                       Maia {model.slice(-4)}
                     </option>
@@ -315,7 +315,7 @@ export const Highlight: React.FC<Props> = ({
             })}
           </div>
         </div>
-        <div className="flex flex-col items-center justify-start gap-0.5 bg-engine-3/5 xl:gap-1">
+        <div className="flex flex-col items-center justify-start gap-0.5 xl:gap-1">
           <div className="flex w-full flex-col border-b border-white/5 py-2">
             <p className="whitespace-nowrap text-center text-base font-semibold text-engine-1 md:text-xxs lg:text-xs">
               Stockfish 17
@@ -395,7 +395,7 @@ export const Highlight: React.FC<Props> = ({
           </div>
         </div>
       </div>
-      <div className="flex flex-col items-start justify-start bg-background-1/80 p-2 text-sm">
+      <div className="flex flex-col items-start justify-start bg-transparent p-2 text-sm">
         <AnimatePresence mode="wait">
           {boardDescription?.segments?.length > 0 ? (
             <motion.div
diff --git a/src/components/Analysis/MoveMap.tsx b/src/components/Analysis/MoveMap.tsx
index 70ed1ab9..41bf325a 100644
--- a/src/components/Analysis/MoveMap.tsx
+++ b/src/components/Analysis/MoveMap.tsx
@@ -259,7 +259,7 @@ export const MoveMap: React.FC<Props> = ({
   return (
     <div
       id="analysis-move-map"
-      className="flex h-64 max-h-full w-full flex-col overflow-hidden bg-background-1/60 md:h-full md:rounded"
+      className="flex h-64 max-h-full w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md md:h-full"
       onMouseLeave={onContainerMouseLeave}
     >
       <h2 className="p-3 text-base text-primary md:text-sm xl:text-base">
diff --git a/src/components/Analysis/MoveTooltip.tsx b/src/components/Analysis/MoveTooltip.tsx
index 99494fdc..f5bb35b2 100644
--- a/src/components/Analysis/MoveTooltip.tsx
+++ b/src/components/Analysis/MoveTooltip.tsx
@@ -39,7 +39,7 @@ export const MoveTooltip: React.FC<MoveTooltipProps> = ({
 
   const tooltipContent = (
     <div
-      className={`fixed z-50 flex w-auto min-w-[12rem] flex-col overflow-hidden rounded-lg border border-white/30 bg-background-1 text-primary backdrop-blur-sm ${onClickMove ? 'pointer-events-auto cursor-pointer' : 'pointer-events-none'}`}
+      className={`fixed z-50 flex w-auto min-w-[12rem] flex-col overflow-hidden rounded-md border border-glassBorder bg-glass text-primary backdrop-blur-md ${onClickMove ? 'pointer-events-auto cursor-pointer' : 'pointer-events-none'}`}
       style={{
         left: position.x + 15,
         top: position.y - 10,
@@ -53,14 +53,14 @@ export const MoveTooltip: React.FC<MoveTooltipProps> = ({
       aria-label={onClickMove ? `Make move ${san}` : undefined}
     >
       {/* Header */}
-      <div className="flex w-full justify-between border-b border-white/20 bg-gradient-to-r from-background-2/90 to-background-2/70 px-3 py-1.5">
+      <div className="flex w-full justify-between border-b border-glassBorder bg-glass px-3 py-1.5">
         <span style={{ color }} className="font-medium">
           {san}
         </span>
       </div>
 
       {/* Content */}
-      <div className="flex flex-col items-start justify-start gap-1 bg-gradient-to-b from-background-1 to-background-1/90 px-3 py-1.5 text-sm">
+      <div className="flex flex-col items-start justify-start gap-1 bg-transparent px-3 py-1.5 text-sm">
         {/* Maia Probability */}
         {maiaProb !== undefined && (
           <div className="flex w-full items-center justify-between gap-2 font-mono">
diff --git a/src/components/Analysis/MovesByRating.tsx b/src/components/Analysis/MovesByRating.tsx
index 74aece5c..8ec73496 100644
--- a/src/components/Analysis/MovesByRating.tsx
+++ b/src/components/Analysis/MovesByRating.tsx
@@ -41,7 +41,7 @@ export const MovesByRating: React.FC<Props> = ({
   return (
     <div
       id="analysis-moves-by-rating"
-      className="flex h-64 w-full flex-col bg-background-1/60 md:h-full md:rounded"
+      className="flex h-64 w-full flex-col bg-transparent md:h-full md:rounded"
     >
       <h2 className="p-3 text-base text-primary md:text-sm xl:text-base">
         Moves by Rating
@@ -242,7 +242,7 @@ export const MovesByRating: React.FC<Props> = ({
           <Tooltip
             content={({ payload }) => {
               return (
-                <div className="flex w-32 flex-col rounded border border-white/10 bg-background-1 pb-2">
+                <div className="flex w-32 flex-col rounded-md border border-glassBorder bg-glass pb-2 backdrop-blur-md">
                   <div className="flex px-3 py-2">
                     {payload ? (
                       <p className="text-sm">{payload[0]?.payload.rating}</p>
diff --git a/src/components/Board/BoardController.tsx b/src/components/Board/BoardController.tsx
index 5f2fdbdf..e42b9335 100644
--- a/src/components/Board/BoardController.tsx
+++ b/src/components/Board/BoardController.tsx
@@ -123,39 +123,39 @@ export const BoardController: React.FC<Props> = ({
   ])
 
   return (
-    <div className="flex w-full flex-row items-center gap-[1px] md:rounded">
+    <div className="flex w-full flex-row items-center gap-[1px] rounded-md border border-glassBorder bg-glass p-1 backdrop-blur-md">
       <button
         onClick={disableFlip ? undefined : toggleBoardOrientation}
         disabled={disableFlip}
-        className="flex h-7 flex-1 items-center justify-center bg-button-secondary transition duration-200 hover:bg-human-3 disabled:bg-button-secondary/40 md:rounded-sm"
+        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:opacity-40"
       >
         {FlipIcon}
       </button>
       <button
         onClick={disableNavigation ? undefined : getFirst}
         disabled={!hasPrevious || disablePrevious || disableNavigation}
-        className="flex h-7 flex-1 items-center justify-center bg-button-secondary transition duration-200 hover:bg-human-3 disabled:bg-button-secondary/40 md:rounded-sm"
+        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:opacity-40"
       >
         &#8249;&#8249;&#8249;
       </button>
       <button
         onClick={disableNavigation ? undefined : getPrevious}
         disabled={!hasPrevious || disablePrevious || disableNavigation}
-        className="flex h-7 flex-1 items-center justify-center bg-button-secondary transition duration-200 hover:bg-human-3 disabled:bg-button-secondary/40 md:rounded-sm"
+        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:opacity-40"
       >
         &#8249;
       </button>
       <button
         onClick={disableNavigation ? undefined : getNext}
         disabled={!hasNext || disableNavigation}
-        className="flex h-7 flex-1 items-center justify-center bg-button-secondary transition duration-200 hover:bg-human-3 disabled:bg-button-secondary/40 md:rounded-sm"
+        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:opacity-40"
       >
         &#8250;
       </button>
       <button
         onClick={disableNavigation ? undefined : getLast}
         disabled={!hasNext || disableNavigation}
-        className="flex h-7 flex-1 items-center justify-center bg-button-secondary transition duration-200 hover:bg-human-3 disabled:bg-button-secondary/40 md:rounded-sm"
+        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-[rgb(var(--color-surface-2))] transition duration-200 hover:opacity-90 disabled:opacity-40"
       >
         &#8250;&#8250;&#8250;
       </button>
diff --git a/src/components/Board/MovesContainer.tsx b/src/components/Board/MovesContainer.tsx
index f1a1d0ec..b3561c8b 100644
--- a/src/components/Board/MovesContainer.tsx
+++ b/src/components/Board/MovesContainer.tsx
@@ -258,7 +258,7 @@ export const MovesContainer: React.FC<Props> = (props) => {
         <div className="flex flex-row items-center gap-1">
           {mobileMovePairs.map((pair, pairIndex) => (
             <React.Fragment key={pairIndex}>
-              <div className="flex min-w-fit items-center rounded px-1 py-1 text-xs text-secondary">
+              <div className="flex min-w-fit items-center rounded px-1 py-1 text-xs text-white/70">
                 {pair.moveNumber}.{!pair.whiteMove ? '..' : ''}
               </div>
               {pair.whiteMove && (
@@ -273,11 +273,11 @@ export const MovesContainer: React.FC<Props> = (props) => {
                       controller.goToNode(pair.whiteMove as GameNode)
                     }
                   }}
-                  className={`flex min-w-fit cursor-pointer flex-row items-center rounded px-2 py-1 text-sm ${
+                  className={`flex min-w-fit cursor-pointer flex-row items-center rounded-md px-2 py-1 text-sm ${
                     controller.currentNode === pair.whiteMove
-                      ? 'bg-human-4/20'
-                      : 'hover:bg-background-2'
-                  } ${highlightSet.has(pairIndex * 2 + 1) ? 'bg-human-3/80' : ''}`}
+                      ? 'bg-white/10'
+                      : 'hover:bg-white/10'
+                  } ${highlightSet.has(pairIndex * 2 + 1) ? 'bg-white/15' : ''}`}
                 >
                   <span
                     style={{
@@ -313,11 +313,11 @@ export const MovesContainer: React.FC<Props> = (props) => {
                       controller.goToNode(pair.blackMove as GameNode)
                     }
                   }}
-                  className={`flex min-w-fit cursor-pointer flex-row items-center rounded px-2 py-1 text-sm ${
+                  className={`flex min-w-fit cursor-pointer flex-row items-center rounded-md px-2 py-1 text-sm ${
                     controller.currentNode === pair.blackMove
-                      ? 'bg-human-4/20'
-                      : 'hover:bg-background-2'
-                  } ${highlightSet.has(pairIndex * 2 + 2) ? 'bg-human-3/80' : ''}`}
+                      ? 'bg-white/10'
+                      : 'hover:bg-white/10'
+                  } ${highlightSet.has(pairIndex * 2 + 2) ? 'bg-white/15' : ''}`}
                 >
                   <span
                     style={{
@@ -345,7 +345,7 @@ export const MovesContainer: React.FC<Props> = (props) => {
           ))}
           {termination && (
             <div
-              className="min-w-fit cursor-pointer border border-primary/10 bg-background-1/90 px-4 py-1 text-sm opacity-90"
+              className="min-w-fit cursor-pointer rounded-md border border-white/10 bg-[rgb(var(--color-surface-2))] px-4 py-1 text-sm text-white/90"
               onClick={() => {
                 if (!disableMoveClicking) {
                   controller.goToNode(mainLineNodes[mainLineNodes.length - 1])
@@ -367,12 +367,12 @@ export const MovesContainer: React.FC<Props> = (props) => {
   return (
     <div
       ref={containerRef}
-      className="red-scrollbar grid h-48 auto-rows-min grid-cols-5 overflow-y-auto overflow-x-hidden whitespace-nowrap rounded-sm bg-background-1/60 md:h-full md:w-full"
+      className="red-scrollbar grid h-48 auto-rows-min grid-cols-5 overflow-y-auto overflow-x-hidden whitespace-nowrap rounded-md border border-glassBorder bg-glass text-white/90 backdrop-blur-md md:h-full md:w-full"
     >
       {moves.map(([whiteNode, blackNode], index) => {
         return (
           <>
-            <span className="flex h-7 items-center justify-center bg-background-2 text-sm text-secondary">
+            <span className="flex h-7 items-center justify-center bg-glass-strong text-sm text-white/70">
               {(whiteNode || blackNode)?.moveNumber}
             </span>
             <div
@@ -383,7 +383,7 @@ export const MovesContainer: React.FC<Props> = (props) => {
                 }
               }}
               data-index={index * 2 + 1}
-              className={`col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm hover:bg-background-2 ${controller.currentNode === whiteNode && 'bg-human-4/10'} ${highlightSet.has(index * 2 + 1) && 'bg-human-3/80'}`}
+              className={`col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm hover:bg-glass-hover ${controller.currentNode === whiteNode && 'bg-glass-strong'} ${highlightSet.has(index * 2 + 1) && 'bg-glass-strong'}`}
             >
               <span
                 style={{
@@ -424,7 +424,7 @@ export const MovesContainer: React.FC<Props> = (props) => {
                 }
               }}
               data-index={index * 2 + 2}
-              className={`col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm hover:bg-background-2 ${controller.currentNode === blackNode && 'bg-human-4/10'} ${highlightSet.has(index * 2 + 2) && 'bg-human-3/80'}`}
+              className={`col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm hover:bg-glass-hover ${controller.currentNode === blackNode && 'bg-glass-strong'} ${highlightSet.has(index * 2 + 2) && 'bg-glass-strong'}`}
             >
               <span
                 style={{
@@ -462,7 +462,7 @@ export const MovesContainer: React.FC<Props> = (props) => {
       })}
       {termination && !isMobile && (
         <div
-          className="col-span-5 cursor-pointer rounded-sm border border-primary/10 bg-background-1/90 p-5 text-center opacity-90"
+          className="col-span-5 cursor-pointer rounded-md border border-glassBorder bg-glass p-5 text-center text-white/90 backdrop-blur-md"
           onClick={() => {
             if (!disableMoveClicking) {
               controller.goToNode(mainLineNodes[mainLineNodes.length - 1])
diff --git a/src/components/Common/GameInfo.tsx b/src/components/Common/GameInfo.tsx
index e5ab4528..3329714b 100644
--- a/src/components/Common/GameInfo.tsx
+++ b/src/components/Common/GameInfo.tsx
@@ -37,7 +37,7 @@ export const GameInfo: React.FC<Props> = ({
   return (
     <div
       id="analysis-game-list"
-      className="flex w-full flex-col items-start justify-start gap-1 overflow-hidden bg-background-1 p-1.5 md:rounded md:p-3"
+      className="flex w-full flex-col items-start justify-start gap-1 overflow-hidden rounded-md border border-glassBorder bg-glass p-3 backdrop-blur-md"
     >
       <div className="flex w-full items-center justify-between">
         <div className="flex items-center justify-start gap-1.5">
diff --git a/src/components/Common/PlayerInfo.tsx b/src/components/Common/PlayerInfo.tsx
index 1384c99a..a6636f98 100644
--- a/src/components/Common/PlayerInfo.tsx
+++ b/src/components/Common/PlayerInfo.tsx
@@ -54,7 +54,7 @@ export const PlayerInfo: React.FC<PlayerInfoProps> = ({
   }
 
   return (
-    <div className="flex h-10 w-full items-center justify-between bg-background-1 px-4">
+    <div className="flex h-10 w-full items-center justify-between rounded-md border border-glassBorder bg-glass px-4 backdrop-blur-md">
       <div className="flex items-center gap-1.5">
         <div
           className={`h-2.5 w-2.5 rounded-full ${color === 'white' ? 'bg-white' : 'border bg-black'}`}
@@ -85,13 +85,13 @@ export const PlayerInfo: React.FC<PlayerInfoProps> = ({
         )}
         {clock && (
           <div
-            className={`flex items-center px-2 py-1 ${
-              clock.isActive ? 'bg-primary' : 'bg-background-2'
+            className={`flex items-center rounded bg-glass px-2 py-1 ${
+              clock.isActive ? 'bg-primary text-black' : ''
             }`}
           >
             <span
               className={`font-mono text-xs font-medium ${
-                clock.isActive ? 'text-black' : 'text-secondary/80'
+                clock.isActive ? '' : 'text-secondary/80'
               } ${currentTime < 60 && clock.isActive ? 'text-red-700' : ''}`}
             >
               {formatTime(currentTime)}
diff --git a/src/pages/analysis/[...id].tsx b/src/pages/analysis/[...id].tsx
index c83531a8..48bfcf26 100644
--- a/src/pages/analysis/[...id].tsx
+++ b/src/pages/analysis/[...id].tsx
@@ -1264,6 +1264,14 @@ const Analysis: React.FC<Props> = ({
           }
         />
       </Head>
+      {/* Radial gradient backdrop to match new design language */}
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background:
+            'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
+        }}
+      />
       <AnimatePresence>
         {controller.maia.status === 'no-cache' ||
         controller.maia.status === 'downloading' ? (
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 3a8c5623..3bbaf0f5 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -93,8 +93,23 @@ h5 {
   --color-engine-accent2: 90 157 215;
   --color-engine-accent3: 63 140 208;
   --color-engine-accent4: 35 124 201;
+
+  /* New solid surfaces for glass-style data cards (non-transparent) */
+  /* Opaque, neutral (no tint) surfaces */
+  --color-surface: 32 32 32; /* bright primary surface ~#202020 */
+  --color-surface-2: 24 24 24; /* dim secondary surface ~#181818 */
+
+  /* Glass variables (white, semi-transparent look) */
+  --glass-bg: 255 255 255;
+  --glass-bg-opacity: 0.03; /* base backdrop */
+  --glass-bg-hover-opacity: 0.05; /* hover / selected */
+  --glass-bg-strong-opacity: 0.07; /* stronger emphasis */
+  --glass-border: 255 255 255;
+  --glass-border-opacity: 0.09;
 }
 
+/* Removed gradient surface helpers per design direction */
+
 svg {
   fill: rgb(var(--color-text-primary));
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 131ec643..364b0eb3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,6 +12,12 @@ module.exports = {
         backdrop: 'rgb(var(--color-backdrop))',
         primary: 'rgb(var(--color-text-primary))',
         secondary: 'rgb(var(--color-text-secondary))',
+        glass: {
+          DEFAULT: 'rgb(var(--glass-bg) / var(--glass-bg-opacity))',
+          hover: 'rgb(var(--glass-bg) / var(--glass-bg-hover-opacity))',
+          strong: 'rgb(var(--glass-bg) / var(--glass-bg-strong-opacity))',
+        },
+        glassBorder: 'rgb(var(--glass-border) / var(--glass-border-opacity))',
         button: {
           primary: 'rgb(var(--color-button-primary))',
           secondary: 'rgb(var(--color-button-secondary))',

From 4b7c566c95a2bfb38cf042006305f5d35fc0bc50 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Thu, 28 Aug 2025 01:06:42 -0700
Subject: [PATCH 02/17] style: improve colours + layout for analysis

---
 src/components/Analysis/AnalysisGameList.tsx  |  8 ++-
 .../Analysis/ConfigurableScreens.tsx          |  2 +-
 src/components/Analysis/ConfigureAnalysis.tsx |  2 +-
 src/components/Board/BoardController.tsx      | 11 +++-
 src/components/Board/MovesContainer.tsx       | 22 +++++--
 src/components/Common/ExportGame.tsx          |  4 +-
 src/components/Common/GameInfo.tsx            |  8 ++-
 src/pages/analysis/[...id].tsx                | 65 ++++++++++++-------
 8 files changed, 83 insertions(+), 39 deletions(-)

diff --git a/src/components/Analysis/AnalysisGameList.tsx b/src/components/Analysis/AnalysisGameList.tsx
index e2f8af2f..cde26eff 100644
--- a/src/components/Analysis/AnalysisGameList.tsx
+++ b/src/components/Analysis/AnalysisGameList.tsx
@@ -48,6 +48,7 @@ interface AnalysisGameListProps {
   onCustomAnalysis?: () => void
   onGameSelected?: () => void // Called when a game is selected (for mobile popup closing)
   refreshTrigger?: number // Used to trigger refresh when custom analysis is added
+  embedded?: boolean // Render without outer card container
 }
 
 export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
@@ -56,6 +57,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
   onGameSelected,
   refreshTrigger,
   loadNewWorldChampionshipGame,
+  embedded = false,
 }) => {
   const router = useRouter()
   const { analysisLichessList, analysisTournamentList } =
@@ -584,7 +586,11 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
   return analysisTournamentList ? (
     <div
       id="analysis-game-list"
-      className="flex h-full flex-col items-start justify-start overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md"
+      className={
+        embedded
+          ? 'flex h-full flex-col items-start justify-start overflow-hidden border-t border-b border-glassBorder bg-transparent'
+          : 'flex h-full flex-col items-start justify-start overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md'
+      }
     >
       <div className="flex h-full w-full flex-col">
         <div className="flex select-none items-center border-b border-white/10">
diff --git a/src/components/Analysis/ConfigurableScreens.tsx b/src/components/Analysis/ConfigurableScreens.tsx
index 9749d8b1..06c27df7 100644
--- a/src/components/Analysis/ConfigurableScreens.tsx
+++ b/src/components/Analysis/ConfigurableScreens.tsx
@@ -120,7 +120,7 @@ export const ConfigurableScreens: React.FC<Props> = ({
 
   // Normal state with configure/export tabs
   return (
-    <div className="flex w-full flex-1 flex-col overflow-hidden bg-background-1/60 md:w-auto md:rounded">
+    <div className="bg-glass flex w-full flex-1 flex-col overflow-hidden md:w-auto md:rounded">
       <div className="flex flex-row border-b border-white/10">
         {screens.map((s) => {
           const selected = s.id === screen.id
diff --git a/src/components/Analysis/ConfigureAnalysis.tsx b/src/components/Analysis/ConfigureAnalysis.tsx
index 8772e8f3..3c9c8ef0 100644
--- a/src/components/Analysis/ConfigureAnalysis.tsx
+++ b/src/components/Analysis/ConfigureAnalysis.tsx
@@ -35,7 +35,7 @@ export const ConfigureAnalysis: React.FC<Props> = ({
   autoSave,
 }: Props) => {
   return (
-    <div className="border-glassBorder bg-glass flex w-full flex-col items-start justify-start gap-2 rounded-md border p-3 text-white/90 backdrop-blur-md">
+    <div className="flex w-full flex-col items-start justify-start gap-2 rounded-md p-3 text-white/90">
       <div className="flex w-full flex-col gap-0.5">
         <p className="text-xs text-white/70">Analyze using:</p>
         <div className="relative inline-flex w-full items-center">
diff --git a/src/components/Board/BoardController.tsx b/src/components/Board/BoardController.tsx
index e42b9335..c98d1cb2 100644
--- a/src/components/Board/BoardController.tsx
+++ b/src/components/Board/BoardController.tsx
@@ -20,7 +20,7 @@ interface Props {
   disableNavigation?: boolean
 }
 
-export const BoardController: React.FC<Props> = ({
+export const BoardController: React.FC<Props & { embedded?: boolean }> = ({
   orientation,
   setOrientation,
   currentNode,
@@ -35,6 +35,7 @@ export const BoardController: React.FC<Props> = ({
   disablePrevious = false,
   disableKeyboardNavigation = false,
   disableNavigation = false,
+  embedded = false,
 }: Props) => {
   const { width } = useWindowSize()
 
@@ -123,7 +124,13 @@ export const BoardController: React.FC<Props> = ({
   ])
 
   return (
-    <div className="flex w-full flex-row items-center gap-[1px] rounded-md border border-glassBorder bg-glass p-1 backdrop-blur-md">
+    <div
+      className={`flex w-full flex-row items-center gap-[1px] ${
+        embedded
+          ? 'border-t border-glassBorder bg-transparent'
+          : 'rounded-md border border-glassBorder bg-glass backdrop-blur-md'
+      }`}
+    >
       <button
         onClick={disableFlip ? undefined : toggleBoardOrientation}
         disabled={disableFlip}
diff --git a/src/components/Board/MovesContainer.tsx b/src/components/Board/MovesContainer.tsx
index b3561c8b..a0e75259 100644
--- a/src/components/Board/MovesContainer.tsx
+++ b/src/components/Board/MovesContainer.tsx
@@ -35,7 +35,9 @@ const getMoveClassification = (node: GameNode | null) => {
   }
 }
 
-export const MovesContainer: React.FC<Props> = (props) => {
+export const MovesContainer: React.FC<
+  Props & { embedded?: boolean; heightClass?: string }
+> = (props) => {
   const {
     game,
     termination,
@@ -46,7 +48,9 @@ export const MovesContainer: React.FC<Props> = (props) => {
     disableMoveClicking = false,
     startFromNode,
     restrictNavigationBefore,
-  } = props
+    embedded = false,
+    heightClass = 'h-48',
+  } = props as Props & { embedded?: boolean; heightClass?: string }
   const { isMobile } = useContext(WindowSizeContext)
   const containerRef = useRef<HTMLDivElement>(null)
   const currentMoveRef = useRef<HTMLDivElement>(null)
@@ -367,12 +371,16 @@ export const MovesContainer: React.FC<Props> = (props) => {
   return (
     <div
       ref={containerRef}
-      className="red-scrollbar grid h-48 auto-rows-min grid-cols-5 overflow-y-auto overflow-x-hidden whitespace-nowrap rounded-md border border-glassBorder bg-glass text-white/90 backdrop-blur-md md:h-full md:w-full"
+      className={`red-scrollbar grid ${heightClass} auto-rows-min grid-cols-5 overflow-y-auto overflow-x-hidden whitespace-nowrap text-white/90 md:h-full md:w-full ${
+        embedded
+          ? 'border-glassBorder border-b bg-transparent'
+          : 'border-glassBorder bg-glass rounded-md border backdrop-blur-md'
+      }`}
     >
       {moves.map(([whiteNode, blackNode], index) => {
         return (
           <>
-            <span className="flex h-7 items-center justify-center bg-glass-strong text-sm text-white/70">
+            <span className="bg-glass-strong flex h-7 items-center justify-center text-sm text-white/70">
               {(whiteNode || blackNode)?.moveNumber}
             </span>
             <div
@@ -383,7 +391,7 @@ export const MovesContainer: React.FC<Props> = (props) => {
                 }
               }}
               data-index={index * 2 + 1}
-              className={`col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm hover:bg-glass-hover ${controller.currentNode === whiteNode && 'bg-glass-strong'} ${highlightSet.has(index * 2 + 1) && 'bg-glass-strong'}`}
+              className={`hover:bg-glass-hover col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm ${controller.currentNode === whiteNode && 'bg-glass-strong'} ${highlightSet.has(index * 2 + 1) && 'bg-glass-strong'}`}
             >
               <span
                 style={{
@@ -424,7 +432,7 @@ export const MovesContainer: React.FC<Props> = (props) => {
                 }
               }}
               data-index={index * 2 + 2}
-              className={`col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm hover:bg-glass-hover ${controller.currentNode === blackNode && 'bg-glass-strong'} ${highlightSet.has(index * 2 + 2) && 'bg-glass-strong'}`}
+              className={`hover:bg-glass-hover col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm ${controller.currentNode === blackNode && 'bg-glass-strong'} ${highlightSet.has(index * 2 + 2) && 'bg-glass-strong'}`}
             >
               <span
                 style={{
@@ -462,7 +470,7 @@ export const MovesContainer: React.FC<Props> = (props) => {
       })}
       {termination && !isMobile && (
         <div
-          className="col-span-5 cursor-pointer rounded-md border border-glassBorder bg-glass p-5 text-center text-white/90 backdrop-blur-md"
+          className="border-glassBorder bg-glass col-span-5 cursor-pointer rounded-md border p-5 text-center text-white/90 backdrop-blur-md"
           onClick={() => {
             if (!disableMoveClicking) {
               controller.goToNode(mainLineNodes[mainLineNodes.length - 1])
diff --git a/src/components/Common/ExportGame.tsx b/src/components/Common/ExportGame.tsx
index c139b776..f3205fb7 100644
--- a/src/components/Common/ExportGame.tsx
+++ b/src/components/Common/ExportGame.tsx
@@ -117,7 +117,7 @@ export const ExportGame: React.FC<Props> = (props) => {
           role="button"
           tabIndex={0}
           onClick={() => copy(fen)}
-          className="border-1 group flex w-full cursor-pointer overflow-x-hidden rounded border border-white/5 bg-background-1/50 p-1"
+          className="border-1 group flex w-full cursor-pointer overflow-x-hidden rounded border border-white/5 p-1"
         >
           <p className="whitespace-nowrap text-xxs text-secondary group-hover:text-secondary/80">
             {fen}
@@ -144,7 +144,7 @@ export const ExportGame: React.FC<Props> = (props) => {
           role="button"
           tabIndex={0}
           onClick={() => copy(pgn)}
-          className="group flex w-full cursor-pointer overflow-x-hidden overflow-y-scroll rounded border border-white/5 bg-background-1/50 p-1"
+          className="group flex w-full cursor-pointer overflow-x-hidden overflow-y-scroll rounded border border-white/5 p-1"
         >
           <p className="whitespace-pre-wrap text-xxs text-secondary group-hover:text-secondary/80">
             {pgn}
diff --git a/src/components/Common/GameInfo.tsx b/src/components/Common/GameInfo.tsx
index 3329714b..2d111af7 100644
--- a/src/components/Common/GameInfo.tsx
+++ b/src/components/Common/GameInfo.tsx
@@ -18,6 +18,7 @@ interface Props {
     error: string | null
     gameEnded: boolean
   }
+  embedded?: boolean
 }
 
 export const GameInfo: React.FC<Props> = ({
@@ -31,13 +32,18 @@ export const GameInfo: React.FC<Props> = ({
   showGameListButton,
   onGameListClick,
   streamState,
+  embedded = false,
 }: Props) => {
   const { startTour } = useTour()
 
   return (
     <div
       id="analysis-game-list"
-      className="flex w-full flex-col items-start justify-start gap-1 overflow-hidden rounded-md border border-glassBorder bg-glass p-3 backdrop-blur-md"
+      className={
+        embedded
+          ? 'flex w-full flex-col items-start justify-start gap-1 overflow-hidden border-b border-glassBorder bg-transparent p-3'
+          : 'flex w-full flex-col items-start justify-start gap-1 overflow-hidden rounded-md border border-glassBorder bg-glass p-3 backdrop-blur-md'
+      }
     >
       <div className="flex w-full items-center justify-between">
         <div className="flex items-center justify-start gap-1.5">
diff --git a/src/pages/analysis/[...id].tsx b/src/pages/analysis/[...id].tsx
index 48bfcf26..f7d4e84f 100644
--- a/src/pages/analysis/[...id].tsx
+++ b/src/pages/analysis/[...id].tsx
@@ -630,31 +630,44 @@ const Analysis: React.FC<Props> = ({
       <div className="flex h-full w-[90%] flex-row gap-2">
         <motion.div
           id="navigation"
-          className="desktop-left-column-container flex flex-col gap-2 overflow-hidden"
+          className="desktop-left-column-container flex flex-col overflow-hidden"
           variants={itemVariants}
           style={{ willChange: 'transform, opacity' }}
         >
-          <GameInfo title="Analysis" icon="bar_chart" type="analysis">
-            <NestedGameInfo />
-          </GameInfo>
-          <div className="flex max-h-[25vh] min-h-[25vh] flex-col bg-backdrop/30">
-            <AnalysisGameList
-              currentId={currentId}
-              loadNewWorldChampionshipGame={(newId, setCurrentMove) =>
-                getAndSetTournamentGame(newId, setCurrentMove)
-              }
-              loadNewLichessGame={(id, pgn, setCurrentMove) =>
-                getAndSetLichessGame(id, pgn, setCurrentMove)
-              }
-              loadNewMaiaGame={(id, type, setCurrentMove) =>
-                getAndSetUserGame(id, type, setCurrentMove)
-              }
-              onCustomAnalysis={() => setShowCustomModal(true)}
-              refreshTrigger={refreshTrigger}
-            />
-          </div>
-          <div className="flex h-1/2 w-full flex-1 flex-col gap-2">
-            <div className="flex h-full flex-col overflow-y-scroll">
+          <div className="border-glassBorder bg-glass flex h-full w-full flex-col overflow-hidden rounded-md border backdrop-blur-md">
+            {/* Game info header */}
+            <GameInfo
+              title="Analysis"
+              icon="bar_chart"
+              type="analysis"
+              embedded
+            >
+              <NestedGameInfo />
+            </GameInfo>
+            {/* Game list */}
+            <div className="flex flex-col overflow-hidden">
+              <div className="h-4" />
+              <div className="max-h-[32vh] min-h-[32vh]">
+                <AnalysisGameList
+                  currentId={currentId}
+                  loadNewWorldChampionshipGame={(newId, setCurrentMove) =>
+                    getAndSetTournamentGame(newId, setCurrentMove)
+                  }
+                  loadNewLichessGame={(id, pgn, setCurrentMove) =>
+                    getAndSetLichessGame(id, pgn, setCurrentMove)
+                  }
+                  loadNewMaiaGame={(id, type, setCurrentMove) =>
+                    getAndSetUserGame(id, type, setCurrentMove)
+                  }
+                  onCustomAnalysis={() => setShowCustomModal(true)}
+                  refreshTrigger={refreshTrigger}
+                  embedded
+                />
+              </div>
+            </div>
+            {/* Moves + controller */}
+            <div className="red-scrollbar flex h-full flex-1 flex-col overflow-y-auto">
+              <div className="h-4" />
               <MovesContainer
                 game={analyzedGame}
                 termination={analyzedGame.termination}
@@ -666,7 +679,10 @@ const Analysis: React.FC<Props> = ({
                 disableMoveClicking={
                   controller.learnFromMistakes.state.isActive
                 }
+                embedded
+                heightClass="h-40"
               />
+              {/* No spacer here to keep controller tight to moves */}
               <BoardController
                 gameTree={controller.gameTree}
                 orientation={controller.orientation}
@@ -682,6 +698,7 @@ const Analysis: React.FC<Props> = ({
                   controller.learnFromMistakes.state.isActive
                 }
                 disableNavigation={controller.learnFromMistakes.state.isActive}
+                embedded
               />
             </div>
           </div>
@@ -1265,13 +1282,13 @@ const Analysis: React.FC<Props> = ({
         />
       </Head>
       {/* Radial gradient backdrop to match new design language */}
-      <div
+      {/* <div
         className="pointer-events-none absolute inset-0"
         style={{
           background:
             'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
         }}
-      />
+      /> */}
       <AnimatePresence>
         {controller.maia.status === 'no-cache' ||
         controller.maia.status === 'downloading' ? (

From aef74030979a24dc7d4a2d4afd9d45672d440b19 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Thu, 28 Aug 2025 18:36:06 -0700
Subject: [PATCH 03/17] style: improve dropdowns+tooltips

---
 src/components/Analysis/MoveTooltip.tsx          |  6 ++++--
 src/components/Analysis/MovesByRating.tsx        |  8 +++++++-
 .../Leaderboard/LeaderboardNavBadge.tsx          | 16 ++++++++++------
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/Analysis/MoveTooltip.tsx b/src/components/Analysis/MoveTooltip.tsx
index f5bb35b2..3a9e1d9a 100644
--- a/src/components/Analysis/MoveTooltip.tsx
+++ b/src/components/Analysis/MoveTooltip.tsx
@@ -39,12 +39,14 @@ export const MoveTooltip: React.FC<MoveTooltipProps> = ({
 
   const tooltipContent = (
     <div
-      className={`fixed z-50 flex w-auto min-w-[12rem] flex-col overflow-hidden rounded-md border border-glassBorder bg-glass text-primary backdrop-blur-md ${onClickMove ? 'pointer-events-auto cursor-pointer' : 'pointer-events-none'}`}
+      className={`fixed z-50 flex w-auto min-w-[12rem] flex-col overflow-hidden rounded-md border border-white/10 text-white/90 ${onClickMove ? 'pointer-events-auto cursor-pointer' : 'pointer-events-none'}`}
       style={{
         left: position.x + 15,
         top: position.y - 10,
         transform:
           position.x > window.innerWidth - 250 ? 'translateX(-100%)' : 'none',
+        background:
+          'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), #171214',
       }}
       onClick={onClickMove ? () => onClickMove(move) : undefined}
       onKeyDown={onClickMove ? handleKeyDown : undefined}
@@ -53,7 +55,7 @@ export const MoveTooltip: React.FC<MoveTooltipProps> = ({
       aria-label={onClickMove ? `Make move ${san}` : undefined}
     >
       {/* Header */}
-      <div className="flex w-full justify-between border-b border-glassBorder bg-glass px-3 py-1.5">
+      <div className="flex w-full justify-between border-b border-white/10 bg-transparent px-3 py-1.5">
         <span style={{ color }} className="font-medium">
           {san}
         </span>
diff --git a/src/components/Analysis/MovesByRating.tsx b/src/components/Analysis/MovesByRating.tsx
index 8ec73496..a37529c4 100644
--- a/src/components/Analysis/MovesByRating.tsx
+++ b/src/components/Analysis/MovesByRating.tsx
@@ -242,7 +242,13 @@ export const MovesByRating: React.FC<Props> = ({
           <Tooltip
             content={({ payload }) => {
               return (
-                <div className="flex w-32 flex-col rounded-md border border-glassBorder bg-glass pb-2 backdrop-blur-md">
+                <div
+                  className="flex w-32 flex-col rounded-md border border-white/10 pb-2 text-white/90"
+                  style={{
+                    background:
+                      'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), #171214',
+                  }}
+                >
                   <div className="flex px-3 py-2">
                     {payload ? (
                       <p className="text-sm">{payload[0]?.payload.rating}</p>
diff --git a/src/components/Leaderboard/LeaderboardNavBadge.tsx b/src/components/Leaderboard/LeaderboardNavBadge.tsx
index d9fafd71..b23303cf 100644
--- a/src/components/Leaderboard/LeaderboardNavBadge.tsx
+++ b/src/components/Leaderboard/LeaderboardNavBadge.tsx
@@ -49,10 +49,14 @@ export const LeaderboardNavBadge: React.FC<LeaderboardNavBadgeProps> = ({
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -10 }}
             transition={{ duration: 0.2 }}
-            className="absolute right-0 top-full z-50 w-64 overflow-hidden rounded border border-white/10 bg-background-1 shadow-lg"
+            className="absolute right-0 top-full z-50 w-64 overflow-hidden rounded-md border border-white/10 text-white/90 shadow-lg"
+            style={{
+              background:
+                'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), #171214',
+            }}
           >
-            <div className="border-b border-background-3 px-3 py-2">
-              <h3 className="text-sm font-medium text-primary">
+            <div className="border-b border-white/10 px-3 py-2">
+              <h3 className="text-sm font-medium text-white/90">
                 You&apos;re on the leaderboard!
               </h3>
             </div>
@@ -61,10 +65,10 @@ export const LeaderboardNavBadge: React.FC<LeaderboardNavBadgeProps> = ({
                 <Link
                   key={position.gameType}
                   href="/leaderboard"
-                  className="flex items-center justify-between px-3 py-2 hover:bg-background-2/60"
+                  className="flex items-center justify-between px-3 py-2 text-white/90 transition-colors hover:bg-[rgba(255,255,255,0.04)]"
                 >
                   <div className="flex flex-col">
-                    <span className="text-sm font-medium">
+                    <span className="text-sm font-medium text-white/90">
                       {position.gameName}
                     </span>
                     <span className="text-xs text-secondary">
@@ -84,7 +88,7 @@ export const LeaderboardNavBadge: React.FC<LeaderboardNavBadgeProps> = ({
                 </Link>
               ))}
             </div>
-            <div className="border-t border-background-3 px-3 py-2">
+            <div className="border-t border-white/10 px-3 py-2">
               <Link
                 href="/leaderboard"
                 className="text-xs text-secondary hover:text-primary"

From 338b685a93b65a6abfb86c77c910cdbfc29d0f23 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Thu, 28 Aug 2025 18:36:27 -0700
Subject: [PATCH 04/17] style: improve analysis left sidebar

---
 src/components/Analysis/AnalysisGameList.tsx | 34 +++++++++++---------
 src/components/Board/BoardController.tsx     | 11 ++++---
 src/components/Board/MovesContainer.tsx      | 16 ++++-----
 3 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/src/components/Analysis/AnalysisGameList.tsx b/src/components/Analysis/AnalysisGameList.tsx
index cde26eff..9728081d 100644
--- a/src/components/Analysis/AnalysisGameList.tsx
+++ b/src/components/Analysis/AnalysisGameList.tsx
@@ -588,7 +588,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
       id="analysis-game-list"
       className={
         embedded
-          ? 'flex h-full flex-col items-start justify-start overflow-hidden border-t border-b border-glassBorder bg-transparent'
+          ? 'flex h-full flex-col items-start justify-start overflow-hidden border-b border-t border-glassBorder bg-transparent'
           : 'flex h-full flex-col items-start justify-start overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md'
       }
     >
@@ -634,6 +634,22 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
           </div>
         </div>
 
+        {selected === 'custom' && onCustomAnalysis && (
+          <div className="flex border-b border-white/10">
+            <button
+              onClick={onCustomAnalysis}
+              className="flex w-full items-center gap-2 bg-white/5 px-3 py-1.5 text-white/80 transition duration-200 hover:bg-white/10"
+            >
+              <span className="material-symbols-outlined text-xs text-white/70">
+                add
+              </span>
+              <span className="text-xs text-white/80">
+                Analyze Custom PGN/FEN
+              </span>
+            </button>
+          </div>
+        )}
+
         {/* H&B Subsections */}
         {selected === 'hb' && (
           <div className="flex border-b border-white/10">
@@ -712,7 +728,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
                         className={`group flex w-full items-center gap-2 ${selectedGame ? 'bg-glass-strong' : 'hover:bg-glass-hover'}`}
                       >
                         <div
-                          className={`flex h-full w-9 items-center justify-center ${selectedGame ? 'bg-glass-strong' : 'group-hover:bg-glass-hover'}`}
+                          className={`flex h-full w-10 items-center justify-center ${selectedGame ? 'bg-glass-strong' : 'group-hover:bg-glass-hover'}`}
                         >
                           <p className="text-sm text-white/70">
                             {selected === 'play' ||
@@ -876,19 +892,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
               </div>
             )}
         </div>
-        {onCustomAnalysis && (
-          <button
-            onClick={onCustomAnalysis}
-            className="flex w-full items-center gap-2 border-t border-white/10 bg-white/5 px-3 py-1.5 text-white/80 transition duration-200 hover:bg-white/10"
-          >
-            <span className="material-symbols-outlined text-xs text-white/70">
-              add
-            </span>
-            <span className="text-xs text-white/80">
-              Analyze Custom PGN/FEN
-            </span>
-          </button>
-        )}
+        {/* Removed bottom "Analyze Custom" button; now shown only under Custom tab */}
       </div>
       <FavoriteModal
         isOpen={favoriteModal.isOpen}
diff --git a/src/components/Board/BoardController.tsx b/src/components/Board/BoardController.tsx
index c98d1cb2..1520bd67 100644
--- a/src/components/Board/BoardController.tsx
+++ b/src/components/Board/BoardController.tsx
@@ -18,6 +18,7 @@ interface Props {
   disablePrevious?: boolean
   disableKeyboardNavigation?: boolean
   disableNavigation?: boolean
+  embedded?: boolean
 }
 
 export const BoardController: React.FC<Props & { embedded?: boolean }> = ({
@@ -134,35 +135,35 @@ export const BoardController: React.FC<Props & { embedded?: boolean }> = ({
       <button
         onClick={disableFlip ? undefined : toggleBoardOrientation}
         disabled={disableFlip}
-        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:opacity-40"
+        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:bg-black/5"
       >
         {FlipIcon}
       </button>
       <button
         onClick={disableNavigation ? undefined : getFirst}
         disabled={!hasPrevious || disablePrevious || disableNavigation}
-        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:opacity-40"
+        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:bg-black/5"
       >
         &#8249;&#8249;&#8249;
       </button>
       <button
         onClick={disableNavigation ? undefined : getPrevious}
         disabled={!hasPrevious || disablePrevious || disableNavigation}
-        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:opacity-40"
+        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:bg-black/5"
       >
         &#8249;
       </button>
       <button
         onClick={disableNavigation ? undefined : getNext}
         disabled={!hasNext || disableNavigation}
-        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:opacity-40"
+        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:bg-black/5"
       >
         &#8250;
       </button>
       <button
         onClick={disableNavigation ? undefined : getLast}
         disabled={!hasNext || disableNavigation}
-        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-[rgb(var(--color-surface-2))] transition duration-200 hover:opacity-90 disabled:opacity-40"
+        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:bg-black/5"
       >
         &#8250;&#8250;&#8250;
       </button>
diff --git a/src/components/Board/MovesContainer.tsx b/src/components/Board/MovesContainer.tsx
index a0e75259..525d7019 100644
--- a/src/components/Board/MovesContainer.tsx
+++ b/src/components/Board/MovesContainer.tsx
@@ -349,7 +349,7 @@ export const MovesContainer: React.FC<
           ))}
           {termination && (
             <div
-              className="min-w-fit cursor-pointer rounded-md border border-white/10 bg-[rgb(var(--color-surface-2))] px-4 py-1 text-sm text-white/90"
+              className="min-w-fit cursor-pointer border-b border-t border-white/10 bg-[rgb(var(--color-surface-2))] px-4 py-1 text-sm text-white/90"
               onClick={() => {
                 if (!disableMoveClicking) {
                   controller.goToNode(mainLineNodes[mainLineNodes.length - 1])
@@ -371,16 +371,16 @@ export const MovesContainer: React.FC<
   return (
     <div
       ref={containerRef}
-      className={`red-scrollbar grid ${heightClass} auto-rows-min grid-cols-5 overflow-y-auto overflow-x-hidden whitespace-nowrap text-white/90 md:h-full md:w-full ${
+      className={`red-scrollbar grid ${heightClass} auto-rows-min grid-cols-[2.5rem_1fr_1fr_1fr_1fr] overflow-y-auto overflow-x-hidden whitespace-nowrap text-white/90 md:h-full md:w-full ${
         embedded
-          ? 'border-glassBorder border-b bg-transparent'
-          : 'border-glassBorder bg-glass rounded-md border backdrop-blur-md'
+          ? 'border-b border-glassBorder bg-transparent'
+          : 'rounded-md border border-glassBorder bg-glass backdrop-blur-md'
       }`}
     >
       {moves.map(([whiteNode, blackNode], index) => {
         return (
           <>
-            <span className="bg-glass-strong flex h-7 items-center justify-center text-sm text-white/70">
+            <span className="flex h-7 items-center justify-center bg-glass-strong text-sm text-white/70">
               {(whiteNode || blackNode)?.moveNumber}
             </span>
             <div
@@ -391,7 +391,7 @@ export const MovesContainer: React.FC<
                 }
               }}
               data-index={index * 2 + 1}
-              className={`hover:bg-glass-hover col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm ${controller.currentNode === whiteNode && 'bg-glass-strong'} ${highlightSet.has(index * 2 + 1) && 'bg-glass-strong'}`}
+              className={`col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm hover:bg-glass-hover ${controller.currentNode === whiteNode && 'bg-glass-strong'} ${highlightSet.has(index * 2 + 1) && 'bg-glass-strong'}`}
             >
               <span
                 style={{
@@ -432,7 +432,7 @@ export const MovesContainer: React.FC<
                 }
               }}
               data-index={index * 2 + 2}
-              className={`hover:bg-glass-hover col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm ${controller.currentNode === blackNode && 'bg-glass-strong'} ${highlightSet.has(index * 2 + 2) && 'bg-glass-strong'}`}
+              className={`col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm hover:bg-glass-hover ${controller.currentNode === blackNode && 'bg-glass-strong'} ${highlightSet.has(index * 2 + 2) && 'bg-glass-strong'}`}
             >
               <span
                 style={{
@@ -470,7 +470,7 @@ export const MovesContainer: React.FC<
       })}
       {termination && !isMobile && (
         <div
-          className="border-glassBorder bg-glass col-span-5 cursor-pointer rounded-md border p-5 text-center text-white/90 backdrop-blur-md"
+          className="col-span-5 cursor-pointer border-b border-t border-glassBorder bg-glass p-5 text-center text-white/90 backdrop-blur-md"
           onClick={() => {
             if (!disableMoveClicking) {
               controller.goToNode(mainLineNodes[mainLineNodes.length - 1])

From 693bb9b727d035e09806adb75f22640792912d4f Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Thu, 28 Aug 2025 18:36:34 -0700
Subject: [PATCH 05/17] style: improve analysis ui

---
 src/components/Analysis/ConfigureAnalysis.tsx | 10 +++++-----
 src/pages/analysis/[...id].tsx                |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Analysis/ConfigureAnalysis.tsx b/src/components/Analysis/ConfigureAnalysis.tsx
index 3c9c8ef0..b53541da 100644
--- a/src/components/Analysis/ConfigureAnalysis.tsx
+++ b/src/components/Analysis/ConfigureAnalysis.tsx
@@ -35,13 +35,13 @@ export const ConfigureAnalysis: React.FC<Props> = ({
   autoSave,
 }: Props) => {
   return (
-    <div className="flex w-full flex-col items-start justify-start gap-2 rounded-md p-3 text-white/90">
+    <div className="flex w-full flex-col items-start justify-start gap-1.5 rounded-md p-3 text-white/90">
       <div className="flex w-full flex-col gap-0.5">
         <p className="text-xs text-white/70">Analyze using:</p>
         <div className="relative inline-flex w-full items-center">
           <select
             value={currentMaiaModel}
-            className="border-glassBorder bg-glass hover:bg-glass-hover w-full cursor-pointer appearance-none rounded-md border p-1 pr-6 text-xs text-white/90 outline-none transition duration-200"
+            className="w-full cursor-pointer appearance-none rounded border border-glassBorder bg-glass py-[5px] pl-2.5 pr-6 text-xs text-white/90 outline-none transition duration-200 hover:bg-glass-hover"
             onChange={(e) => setCurrentMaiaModel(e.target.value)}
           >
             {MAIA_MODELS.map((model) => (
@@ -61,13 +61,13 @@ export const ConfigureAnalysis: React.FC<Props> = ({
       </div>
       <ContinueAgainstMaia
         launchContinue={launchContinue}
-        background="!rounded-md border border-glassBorder bg-glass text-white/90 hover:bg-glass-hover !px-2 !py-1 !text-xs"
+        background="!rounded border border-glassBorder bg-glass text-white/90 hover:bg-glass-hover !px-2.5 !py-[5px] !text-xs"
       />
       {onAnalyzeEntireGame && (
         <button
           onClick={onAnalyzeEntireGame}
           disabled={isAnalysisInProgress || isLearnFromMistakesActive}
-          className="border-glassBorder bg-glass hover:bg-glass-hover flex w-full items-center gap-1.5 rounded-md border !px-2 !py-1 !text-sm text-white/90 transition duration-200 disabled:cursor-not-allowed disabled:opacity-50"
+          className="flex w-full items-center gap-1.5 rounded border border-glassBorder bg-glass !px-2.5 !py-[5px] !text-sm text-white/90 transition duration-200 hover:bg-glass-hover disabled:cursor-not-allowed disabled:opacity-50"
         >
           <div className="flex items-center justify-center gap-1.5">
             <span className="material-symbols-outlined !text-sm text-white/80">
@@ -85,7 +85,7 @@ export const ConfigureAnalysis: React.FC<Props> = ({
         <button
           onClick={onLearnFromMistakes}
           disabled={isAnalysisInProgress || isLearnFromMistakesActive}
-          className="border-glassBorder bg-glass hover:bg-glass-hover flex w-full items-center gap-1.5 rounded-md border !px-2 !py-1 !text-sm text-white/90 transition duration-200 disabled:cursor-not-allowed disabled:opacity-50"
+          className="flex w-full items-center gap-1.5 rounded border border-glassBorder bg-glass !px-2.5 !py-[5px] !text-sm text-white/90 transition duration-200 hover:bg-glass-hover disabled:cursor-not-allowed disabled:opacity-50"
         >
           <div className="flex items-center justify-center gap-1.5">
             <span className="material-symbols-outlined !text-sm text-white/80">
diff --git a/src/pages/analysis/[...id].tsx b/src/pages/analysis/[...id].tsx
index f7d4e84f..e9a59c6d 100644
--- a/src/pages/analysis/[...id].tsx
+++ b/src/pages/analysis/[...id].tsx
@@ -634,7 +634,7 @@ const Analysis: React.FC<Props> = ({
           variants={itemVariants}
           style={{ willChange: 'transform, opacity' }}
         >
-          <div className="border-glassBorder bg-glass flex h-full w-full flex-col overflow-hidden rounded-md border backdrop-blur-md">
+          <div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md">
             {/* Game info header */}
             <GameInfo
               title="Analysis"
@@ -667,7 +667,7 @@ const Analysis: React.FC<Props> = ({
             </div>
             {/* Moves + controller */}
             <div className="red-scrollbar flex h-full flex-1 flex-col overflow-y-auto">
-              <div className="h-4" />
+              <div className="h-4 border-b border-glassBorder" />
               <MovesContainer
                 game={analyzedGame}
                 termination={analyzedGame.termination}
@@ -1282,13 +1282,13 @@ const Analysis: React.FC<Props> = ({
         />
       </Head>
       {/* Radial gradient backdrop to match new design language */}
-      {/* <div
+      <div
         className="pointer-events-none absolute inset-0"
         style={{
           background:
             'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
         }}
-      /> */}
+      />
       <AnimatePresence>
         {controller.maia.status === 'no-cache' ||
         controller.maia.status === 'downloading' ? (

From 4cd14b5252217260544421df893ebbbd574be457 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Thu, 28 Aug 2025 19:56:00 -0700
Subject: [PATCH 06/17] style: improve padding, consistency, and ui for
 analysis page

---
 src/components/Analysis/AnalysisSidebar.tsx | 50 ++++++++++++++++-----
 src/components/Common/PlayerInfo.tsx        | 13 +++++-
 src/pages/analysis/[...id].tsx              | 12 ++---
 src/styles/tailwind.css                     |  7 ++-
 4 files changed, 64 insertions(+), 18 deletions(-)

diff --git a/src/components/Analysis/AnalysisSidebar.tsx b/src/components/Analysis/AnalysisSidebar.tsx
index 9d7a0e08..745eb2ab 100644
--- a/src/components/Analysis/AnalysisSidebar.tsx
+++ b/src/components/Analysis/AnalysisSidebar.tsx
@@ -77,13 +77,13 @@ export const AnalysisSidebar: React.FC<Props> = ({
     <motion.div
       id="analysis"
       variants={itemVariants ?? {}}
-      className="desktop-right-column-container flex flex-col gap-2"
+      className="desktop-right-column-container flex flex-col gap-3"
       style={{ willChange: 'transform, opacity' }}
     >
       {/* Large screens : 2-row layout */}
-      <div className="hidden xl:flex xl:h-full xl:flex-col xl:gap-2">
+      <div className="hidden xl:flex xl:h-full xl:flex-col xl:gap-3">
         {/* Combined Highlight + MovesByRating container */}
-        <div className="desktop-analysis-big-row-1-container relative flex gap-2">
+        <div className="desktop-analysis-big-row-1-container relative flex gap-3">
           <div className="border-glassBorder bg-glass-strong flex h-full w-full flex-col overflow-hidden rounded-md border backdrop-blur-md">
             {/* Merged header with toggle */}
             <div className="border-glassBorder flex h-10 min-h-10 items-center justify-between border-b bg-transparent px-4 text-white/90">
@@ -160,7 +160,13 @@ export const AnalysisSidebar: React.FC<Props> = ({
             </div>
           </div>
           {!analysisEnabled && (
-            <div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded-lg bg-black/40 backdrop-blur-sm">
+            <div
+              className="absolute left-0 right-0 bottom-0 top-10 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
+              style={{
+                background:
+                  'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
+              }}
+            >
               <div className="rounded-md border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-4 text-center">
                 <span className="material-symbols-outlined mb-2 text-3xl text-white/80">
                   lock
@@ -175,7 +181,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
         </div>
 
         {/* MoveMap + BlunderMeter container */}
-        <div className="desktop-analysis-big-row-2-container relative flex flex-row gap-2">
+        <div className="desktop-analysis-big-row-2-container relative flex flex-row gap-3">
           <div className="flex h-full w-full flex-col">
             <MoveMap
               moveMap={analysisEnabled ? controller.moveMap : undefined}
@@ -200,7 +206,13 @@ export const AnalysisSidebar: React.FC<Props> = ({
             }
           />
           {!analysisEnabled && (
-            <div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded-lg bg-black/40 backdrop-blur-sm">
+            <div
+              className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
+              style={{
+                background:
+                  'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
+              }}
+            >
               <div className="rounded-md border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-4 text-center">
                 <span className="material-symbols-outlined mb-2 text-3xl text-white/80">
                   lock
@@ -216,7 +228,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
       </div>
 
       {/* Smaller screens: 3-row layout */}
-      <div className="flex h-full flex-col gap-2 xl:hidden">
+      <div className="flex h-full flex-col gap-3 xl:hidden">
         {/* Row 1: Combined Highlight + BlunderMeter container */}
         <div className="desktop-analysis-small-row-1-container border-glassBorder bg-glass-strong relative flex overflow-hidden rounded-md border backdrop-blur-md">
           {/* Merged header with toggle (mobile/smaller screens) */}
@@ -305,7 +317,13 @@ export const AnalysisSidebar: React.FC<Props> = ({
             </div>
           </div>
           {!analysisEnabled && (
-            <div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded-lg bg-black/40 backdrop-blur-sm">
+            <div
+              className="absolute left-0 right-0 bottom-0 top-10 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
+              style={{
+                background:
+                  'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
+              }}
+            >
               <div className="rounded-md border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-4 text-center">
                 <span className="material-symbols-outlined mb-2 text-3xl text-white/80">
                   lock
@@ -334,7 +352,13 @@ export const AnalysisSidebar: React.FC<Props> = ({
             />
           </div>
           {!analysisEnabled && (
-            <div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded-lg bg-black/40 backdrop-blur-sm">
+            <div
+              className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
+              style={{
+                background:
+                  'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
+              }}
+            >
               <div className="rounded-md border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-4 text-center">
                 <span className="material-symbols-outlined mb-2 text-3xl text-white/80">
                   lock
@@ -359,7 +383,13 @@ export const AnalysisSidebar: React.FC<Props> = ({
             />
           </div>
           {!analysisEnabled && (
-            <div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded-lg bg-black/40 backdrop-blur-sm">
+            <div
+              className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
+              style={{
+                background:
+                  'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
+              }}
+            >
               <div className="rounded-md border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-4 text-center">
                 <span className="material-symbols-outlined mb-2 text-3xl text-white/80">
                   lock
diff --git a/src/components/Common/PlayerInfo.tsx b/src/components/Common/PlayerInfo.tsx
index a6636f98..8c643c10 100644
--- a/src/components/Common/PlayerInfo.tsx
+++ b/src/components/Common/PlayerInfo.tsx
@@ -9,6 +9,7 @@ interface PlayerInfoProps {
     isActive: boolean
     lastUpdateTime: number
   }
+  rounded?: 'all' | 'top' | 'bottom' | 'none'
 }
 
 import { useState, useEffect } from 'react'
@@ -20,6 +21,7 @@ export const PlayerInfo: React.FC<PlayerInfoProps> = ({
   termination,
   showArrowLegend = false,
   clock,
+  rounded = 'all',
 }) => {
   const [currentTime, setCurrentTime] = useState<number>(
     clock?.timeInSeconds || 0,
@@ -53,8 +55,17 @@ export const PlayerInfo: React.FC<PlayerInfoProps> = ({
     return `${mins}:${secs.toString().padStart(2, '0')}`
   }
 
+  const roundedClass =
+    rounded === 'top'
+      ? 'rounded-t-md'
+      : rounded === 'bottom'
+        ? 'rounded-b-md'
+        : rounded === 'none'
+          ? ''
+          : 'rounded-md'
+
   return (
-    <div className="flex h-10 w-full items-center justify-between rounded-md border border-glassBorder bg-glass px-4 backdrop-blur-md">
+    <div className={`flex h-10 w-full items-center justify-between ${roundedClass} border border-glassBorder bg-glass px-4 backdrop-blur-md`}>
       <div className="flex items-center gap-1.5">
         <div
           className={`h-2.5 w-2.5 rounded-full ${color === 'white' ? 'bg-white' : 'border bg-black'}`}
diff --git a/src/pages/analysis/[...id].tsx b/src/pages/analysis/[...id].tsx
index e9a59c6d..bc6ffd98 100644
--- a/src/pages/analysis/[...id].tsx
+++ b/src/pages/analysis/[...id].tsx
@@ -627,7 +627,7 @@ const Analysis: React.FC<Props> = ({
       exit="exit"
       style={{ willChange: 'transform, opacity' }}
     >
-      <div className="flex h-full w-[90%] flex-row gap-2">
+      <div className="flex h-full w-[90%] flex-row gap-3">
         <motion.div
           id="navigation"
           className="desktop-left-column-container flex flex-col overflow-hidden"
@@ -646,7 +646,7 @@ const Analysis: React.FC<Props> = ({
             </GameInfo>
             {/* Game list */}
             <div className="flex flex-col overflow-hidden">
-              <div className="h-4" />
+              <div className="h-3" />
               <div className="max-h-[32vh] min-h-[32vh]">
                 <AnalysisGameList
                   currentId={currentId}
@@ -667,7 +667,7 @@ const Analysis: React.FC<Props> = ({
             </div>
             {/* Moves + controller */}
             <div className="red-scrollbar flex h-full flex-1 flex-col overflow-y-auto">
-              <div className="h-4 border-b border-glassBorder" />
+              <div className="h-3 border-b border-glassBorder" />
               <MovesContainer
                 game={analyzedGame}
                 termination={analyzedGame.termination}
@@ -704,12 +704,13 @@ const Analysis: React.FC<Props> = ({
           </div>
         </motion.div>
         <motion.div
-          className="desktop-middle-column-container flex flex-col gap-2"
+          className="desktop-middle-column-container flex flex-col gap-3"
           variants={itemVariants}
           style={{ willChange: 'transform, opacity' }}
         >
-          <div className="flex w-full flex-col overflow-hidden rounded">
+          <div className="flex w-full flex-col overflow-hidden">
             <PlayerInfo
+              rounded="top"
               name={
                 controller.orientation === 'white'
                   ? analyzedGame.blackPlayer.name
@@ -780,6 +781,7 @@ const Analysis: React.FC<Props> = ({
               ) : null}
             </div>
             <PlayerInfo
+              rounded="bottom"
               name={
                 controller.orientation === 'white'
                   ? analyzedGame.whitePlayer.name
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 3bbaf0f5..cc954eb5 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -146,14 +146,17 @@ svg {
 }
 
 .desktop-analysis-big-row-1-container {
-  height: calc((85vh - 2.5rem - 1rem) / 2);
+  /* 2.5rem header + 0.75rem gap between two rows */
+  height: calc((85vh - 2.5rem - 0.75rem) / 2);
 }
 
 .desktop-analysis-big-row-2-container {
-  height: calc((85vh - 2.5rem - 1rem) / 2);
+  /* 2.5rem header + 0.75rem gap between two rows */
+  height: calc((85vh - 2.5rem - 0.75rem) / 2);
 }
 
 .desktop-analysis-small-row-1-container {
+  /* 2.5rem header + 1.5rem total gaps between three rows (two gaps @ 0.75rem) */
   height: calc((85vh - 2.5rem - 1.5rem) * 0.4);
 }
 

From cb444d1401bc6ac1eb433556b9f6df179c3c5a59 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Thu, 28 Aug 2025 20:00:16 -0700
Subject: [PATCH 07/17] style: minor ui improvements

---
 src/components/Analysis/AnalysisGameList.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Analysis/AnalysisGameList.tsx b/src/components/Analysis/AnalysisGameList.tsx
index 9728081d..ab7619af 100644
--- a/src/components/Analysis/AnalysisGameList.tsx
+++ b/src/components/Analysis/AnalysisGameList.tsx
@@ -662,8 +662,8 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
               }`}
             >
               <div className="flex items-center justify-center gap-1">
-                <span className="material-symbols-outlined !text-lg text-white/80">
-                  hand_gesture
+                <span className="material-symbols-outlined material-symbols-filled !text-base text-white/80">
+                  back_hand
                 </span>
                 <span className="text-xs text-white/90">Hand</span>
               </div>
@@ -840,7 +840,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
                           disabled={currentPage === 1}
                           className="flex items-center justify-center text-secondary hover:text-primary disabled:opacity-50"
                         >
-                          <span className="material-symbols-outlined">
+                          <span className="material-symbols-outlined !text-lg">
                             first_page
                           </span>
                         </button>
@@ -849,11 +849,11 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
                           disabled={currentPage === 1}
                           className="flex items-center justify-center text-secondary hover:text-primary disabled:opacity-50"
                         >
-                          <span className="material-symbols-outlined">
+                          <span className="material-symbols-outlined !text-xs">
                             arrow_back_ios
                           </span>
                         </button>
-                        <span className="text-sm text-secondary">
+                        <span className="text-xs text-secondary">
                           Page {currentPage} of {totalPages}
                         </span>
                         <button
@@ -861,7 +861,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
                           disabled={currentPage === totalPages}
                           className="flex items-center justify-center text-secondary hover:text-primary disabled:opacity-50"
                         >
-                          <span className="material-symbols-outlined">
+                          <span className="material-symbols-outlined !text-xs">
                             arrow_forward_ios
                           </span>
                         </button>
@@ -870,7 +870,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
                           disabled={currentPage === totalPages}
                           className="flex items-center justify-center text-secondary hover:text-primary disabled:opacity-50"
                         >
-                          <span className="material-symbols-outlined">
+                          <span className="material-symbols-outlined !text-lg">
                             last_page
                           </span>
                         </button>

From 2877a52351f131986ab6e7b4162fdba1f9c6059e Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Thu, 28 Aug 2025 21:48:40 -0700
Subject: [PATCH 08/17] style: make stream ui consistent with analysis

---
 src/components/Analysis/StreamAnalysis.tsx | 32 ++++++++++++++--------
 src/pages/analysis/stream/[gameId].tsx     |  9 ++++++
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/components/Analysis/StreamAnalysis.tsx b/src/components/Analysis/StreamAnalysis.tsx
index 76995673..d3c1925d 100644
--- a/src/components/Analysis/StreamAnalysis.tsx
+++ b/src/components/Analysis/StreamAnalysis.tsx
@@ -278,29 +278,35 @@ export const StreamAnalysis: React.FC<Props> = ({
       exit="exit"
       style={{ willChange: 'transform, opacity' }}
     >
-      <div className="flex h-full w-[90%] flex-row gap-2">
+      <div className="flex h-full w-[90%] flex-row gap-3">
         <motion.div
           id="navigation"
-          className="desktop-left-column-container flex flex-col gap-2 overflow-hidden"
+          className="desktop-left-column-container flex flex-col overflow-hidden"
           variants={itemVariants}
           style={{ willChange: 'transform, opacity' }}
         >
-          <GameInfo
-            title="Analysis"
-            icon="live_tv"
-            type="analysis"
-            streamState={streamState}
-          >
-            <NestedGameInfo />
-          </GameInfo>
-          <div className="flex h-1/2 w-full flex-1 flex-col gap-2">
-            <div className="flex h-full flex-col overflow-y-scroll">
+          <div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md">
+            {/* Header */}
+            <GameInfo
+              title="Analysis"
+              icon="live_tv"
+              type="analysis"
+              streamState={streamState}
+              embedded
+            >
+              <NestedGameInfo />
+            </GameInfo>
+            {/* Moves + controller */}
+            <div className="red-scrollbar flex h-full flex-1 flex-col overflow-y-auto">
+              <div className="h-3 border-b border-glassBorder" />
               <MovesContainer
                 game={game}
                 termination={game.termination}
                 showAnnotations={true}
                 disableKeyboardNavigation={false}
                 disableMoveClicking={false}
+                embedded
+                heightClass="h-40"
               />
               <BoardController
                 gameTree={analysisController.gameTree}
@@ -314,6 +320,7 @@ export const StreamAnalysis: React.FC<Props> = ({
                 goToRootNode={analysisController.goToRootNode}
                 disableKeyboardNavigation={false}
                 disableNavigation={false}
+                embedded
               />
             </div>
           </div>
@@ -503,6 +510,7 @@ export const StreamAnalysis: React.FC<Props> = ({
                 goToRootNode={analysisController.goToRootNode}
                 disableKeyboardNavigation={false}
                 disableNavigation={false}
+                embedded
               />
             </div>
             <div className="relative bottom-0 h-48 max-h-48 flex-1 overflow-auto overflow-y-hidden">
diff --git a/src/pages/analysis/stream/[gameId].tsx b/src/pages/analysis/stream/[gameId].tsx
index 2aa0f52f..fec1727d 100644
--- a/src/pages/analysis/stream/[gameId].tsx
+++ b/src/pages/analysis/stream/[gameId].tsx
@@ -172,6 +172,15 @@ const StreamAnalysisPage: NextPage = () => {
         />
       </Head>
 
+      {/* Radial gradient backdrop to match new design language */}
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background:
+            'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
+        }}
+      />
+
       <AnimatePresence>
         {analysisController &&
         (analysisController.maia.status === 'no-cache' ||

From 9377e2431ec8354dd85332f5c35f0d7f84e8c106 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 10 Sep 2025 12:47:05 -0400
Subject: [PATCH 09/17] style: make download model modal glassmorphic

---
 src/components/Common/DownloadModelModal.tsx | 177 ++++++++++---------
 1 file changed, 98 insertions(+), 79 deletions(-)

diff --git a/src/components/Common/DownloadModelModal.tsx b/src/components/Common/DownloadModelModal.tsx
index 1838d402..735b4cfa 100644
--- a/src/components/Common/DownloadModelModal.tsx
+++ b/src/components/Common/DownloadModelModal.tsx
@@ -67,7 +67,7 @@ export const DownloadModelModal: React.FC<Props> = ({
   }
   return (
     <motion.div
-      className="absolute left-0 top-0 z-20 flex h-screen w-screen flex-col items-center justify-center bg-black/90 px-4 md:px-0"
+      className="fixed inset-0 z-50 flex items-center justify-center px-4 md:px-0"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
@@ -75,90 +75,109 @@ export const DownloadModelModal: React.FC<Props> = ({
       data-testid="download-modal"
       onTouchMove={(e) => e.preventDefault()}
     >
+      <div className="pointer-events-auto absolute inset-0 bg-black/80 backdrop-blur-sm" />
+
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background:
+            'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
+        }}
+      />
       <motion.div
-        className="flex w-full flex-col gap-5 rounded-md border border-background-1 bg-backdrop p-5 md:w-[min(750px,50vw)] md:p-8"
+        className="relative z-10 w-full max-w-[min(750px,50vw)]"
         initial={{ y: 10, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         exit={{ y: 10, opacity: 0 }}
-        transition={{ duration: 0.6 }}
+        transition={{ duration: 0.2 }}
       >
-        <div className="flex items-center gap-2">
-          <span className="material-symbols-outlined text-2xl md:text-3xl">
-            auto_awesome
-          </span>
-          <h1 className="text-2xl font-bold md:text-3xl">
-            Download Our New Model
-          </h1>
-        </div>
-        <div className="flex flex-col gap-3 text-sm md:text-base">
-          <p className="text-primary/80">
-            Our newest model, Maia 2, provides richer and more in-depth
-            analysis, allowing for:
-          </p>
-          <ul className="flex list-inside flex-col gap-1.5 pl-2 text-primary/80">
-            <li>
-              ✨ Detailed move evaluations tailored to different rating levels
-            </li>
-            <li>
-              🧠 Insights into how players of various strengths approach the
-              game
-            </li>
-            <li>
-              ⚡ Faster, local analysis without needing to send data to a server
-            </li>
-          </ul>
-          <p className="text-primary/80">
-            Maia 2 will run entirely on your device but requires a one-time 90mb
-            download.
-          </p>
-        </div>
-        <div className="mt-6 flex w-full flex-col items-end justify-end gap-2 md:flex-row">
-          {progress ? (
-            <div className="relative order-2 flex h-8 w-full items-center justify-start overflow-hidden rounded bg-human-4/20 px-3 md:order-1 md:h-10 md:w-auto md:flex-1">
-              <p className="z-10 text-xs text-primary md:text-base">
-                {Math.round(progress)}%
-              </p>
-              <div
-                className="absolute left-0 top-0 z-0 h-10 rounded-l bg-human-4/80 transition-all duration-500 ease-out"
-                style={{ width: `${progress}%` }}
-              />
-            </div>
-          ) : null}
-          <div className="order-1 flex flex-row gap-2 md:order-2">
-            <Link
-              href="/"
-              className="order-2 flex h-8 cursor-pointer select-none items-center gap-1 self-end rounded bg-background-2 px-3 text-sm transition duration-200 hover:bg-background-3 md:order-3 md:h-10 md:px-4 md:text-base"
-            >
-              <p>Return Home</p>
-            </Link>
-            <div
-              tabIndex={0}
-              role="button"
-              className={`order-2 flex h-8 select-none items-center gap-1 self-end rounded px-3 text-sm transition duration-200 md:order-3 md:h-10 md:px-4 md:text-base ${
-                isDownloading || progress >= 100
-                  ? 'cursor-not-allowed bg-human-4/50'
-                  : 'cursor-pointer bg-human-4 hover:bg-human-4/90'
-              }`}
-              onClick={handleDownload}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  handleDownload()
-                }
-              }}
-            >
-              {isDownloading ? (
-                <span className="material-symbols-outlined animate-spin text-lg md:text-xl">
-                  progress_activity
-                </span>
-              ) : (
-                <span className="material-symbols-outlined text-lg md:text-xl">
-                  download
+        <div className="group relative flex w-full flex-col gap-5 overflow-hidden rounded-lg border border-glassBorder bg-glass p-5 text-left text-white backdrop-blur-xl transition-all duration-300 md:p-8">
+          <div className="flex items-center gap-3">
+            <span className="material-symbols-outlined material-symbols-filled text-3xl text-white/90">
+              auto_awesome
+            </span>
+            <h1 className="text-2xl font-bold text-white md:text-3xl">
+              Download Our New Model
+            </h1>
+          </div>
+
+          <div className="flex flex-col gap-3 text-sm md:text-base">
+            <p className="text-white/80">
+              Our newest model, Maia 2, provides richer and more in-depth
+              analysis, allowing for:
+            </p>
+            <ul className="flex list-inside flex-col gap-1.5 pl-2 text-white/80">
+              <li>
+                ✨ Detailed move evaluations tailored to different rating levels
+              </li>
+              <li>
+                🧠 Insights into how players of various strengths approach the
+                game
+              </li>
+              <li>
+                ⚡ Faster, local analysis without needing to send data to a
+                server
+              </li>
+            </ul>
+            <p className="text-white/80">
+              Maia 2 runs entirely on your device and requires a one-time 90mb
+              download.
+            </p>
+          </div>
+
+          <div className="mt-4 flex w-full flex-col items-end justify-end gap-2 md:mt-6 md:flex-row">
+            {progress ? (
+              <div className="relative order-2 flex h-8 w-full items-center overflow-hidden rounded-md border border-glassBorder bg-[rgb(var(--color-surface-2))] px-3 md:order-1 md:h-10 md:flex-1">
+                <p className="z-10 text-xs text-white/90 md:text-sm">
+                  {Math.round(progress)}%
+                </p>
+                <div
+                  className="absolute left-0 top-0 z-0 h-full rounded-l-md bg-human-4 transition-all duration-500 ease-out"
+                  style={{ width: `${progress}%` }}
+                />
+              </div>
+            ) : null}
+
+            <div className="order-1 flex flex-row gap-2 md:order-2">
+              <Link
+                href="/"
+                className="group flex h-8 cursor-pointer select-none items-center gap-2 rounded-md border border-glassBorder bg-[rgb(var(--color-surface-2))] px-3 text-sm text-white/90 transition-all duration-200 hover:bg-[rgb(var(--color-surface))] md:h-10 md:px-4"
+              >
+                <span className="material-symbols-outlined text-base text-white/70 group-hover:text-white/90 md:text-lg">
+                  home
                 </span>
-              )}
-              <p>
-                {isDownloading ? 'Downloading...' : 'Download Maia 2'}{' '}
-                <span className="text-xs text-primary/60">(90mb)</span>
-              </p>
+                <p>Return Home</p>
+              </Link>
+
+              <div
+                tabIndex={0}
+                role="button"
+                className={`flex h-8 select-none items-center gap-2 rounded-md px-3 text-sm text-white transition-all duration-200 md:h-10 md:px-4 ${
+                  isDownloading || progress >= 100
+                    ? 'cursor-not-allowed border border-human-4/30 bg-human-4/50'
+                    : 'cursor-pointer border border-human-4/30 bg-human-4 hover:border-human-4/50 hover:bg-human-4/90'
+                }`}
+                onClick={handleDownload}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    handleDownload()
+                  }
+                }}
+              >
+                {isDownloading ? (
+                  <span className="material-symbols-outlined animate-spin text-lg md:text-xl">
+                    progress_activity
+                  </span>
+                ) : (
+                  <span className="material-symbols-outlined text-lg md:text-xl">
+                    download
+                  </span>
+                )}
+                <p className="font-medium">
+                  {isDownloading ? 'Downloading...' : 'Download Maia 2'}{' '}
+                  <span className="text-xs text-white/70">(90mb)</span>
+                </p>
+              </div>
             </div>
           </div>
         </div>

From e9f69676a3414677546720aef3c9c338282cf1eb Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 10 Sep 2025 13:06:44 -0400
Subject: [PATCH 10/17] style: redesign puzzle page

---
 src/components/Common/StatsDisplay.tsx |  10 ++-
 src/components/Puzzles/Feedback.tsx    |  10 ++-
 src/components/Puzzles/PuzzleLog.tsx   |  12 ++-
 src/pages/puzzles.tsx                  | 104 ++++++++++++++-----------
 4 files changed, 87 insertions(+), 49 deletions(-)

diff --git a/src/components/Common/StatsDisplay.tsx b/src/components/Common/StatsDisplay.tsx
index be48ec7f..fd9554eb 100644
--- a/src/components/Common/StatsDisplay.tsx
+++ b/src/components/Common/StatsDisplay.tsx
@@ -65,12 +65,14 @@ interface Props {
   stats: AllStats
   hideSession?: boolean
   isGame?: boolean
+  embedded?: boolean
 }
 
 export const StatsDisplay: React.FC<Props> = ({
   hideSession,
   stats,
   isGame,
+  embedded = false,
 }: Props) => {
   const [cachedRating, setCachedRating] = useState<number | undefined>(0)
 
@@ -82,7 +84,13 @@ export const StatsDisplay: React.FC<Props> = ({
   }, [stats])
 
   return (
-    <div className="flex flex-col gap-3 rounded-l bg-background-1/90 p-4">
+    <div
+      className={
+        embedded
+          ? 'flex flex-col gap-3 border-t border-glassBorder bg-transparent p-3'
+          : 'flex flex-col gap-3 rounded-md border border-glassBorder bg-glass p-3 backdrop-blur-md'
+      }
+    >
       <div className="flex flex-col">
         <div className="text-sm uppercase">Your rating</div>
         <div
diff --git a/src/components/Puzzles/Feedback.tsx b/src/components/Puzzles/Feedback.tsx
index d136fbfa..23278d98 100644
--- a/src/components/Puzzles/Feedback.tsx
+++ b/src/components/Puzzles/Feedback.tsx
@@ -14,6 +14,7 @@ interface Props {
   controller: ReturnType<typeof useTrainingController>
   lastAttemptedMove: string | null
   setLastAttemptedMove: Dispatch<SetStateAction<string | null>>
+  embedded?: boolean
 }
 
 export const Feedback: React.FC<Props> = ({
@@ -25,6 +26,7 @@ export const Feedback: React.FC<Props> = ({
   controller: controller,
   lastAttemptedMove,
   setLastAttemptedMove,
+  embedded = false,
 }: Props) => {
   const { targetIndex } = game
 
@@ -71,7 +73,13 @@ export const Feedback: React.FC<Props> = ({
   }, [defaultContent, incorrectContent, correctContent, status, targetIndex])
 
   return (
-    <div className="flex w-screen flex-1 flex-col rounded-sm bg-background-1 p-3 md:w-auto md:p-5 lg:justify-between">
+    <div
+      className={
+        embedded
+          ? 'flex w-screen flex-1 flex-col border-t border-glassBorder bg-transparent p-3 md:w-auto md:p-5 lg:justify-between'
+          : 'flex w-screen flex-1 flex-col rounded-md border border-glassBorder bg-glass p-3 backdrop-blur-md md:w-auto md:p-5 lg:justify-between'
+      }
+    >
       <div>
         <Markdown>{content.trim()}</Markdown>
         {(status === 'forfeit' || status === 'correct') && (
diff --git a/src/components/Puzzles/PuzzleLog.tsx b/src/components/Puzzles/PuzzleLog.tsx
index f76ffbd0..085560e4 100644
--- a/src/components/Puzzles/PuzzleLog.tsx
+++ b/src/components/Puzzles/PuzzleLog.tsx
@@ -8,15 +8,23 @@ interface Props {
     ratingDiff?: number
   })[]
   setCurrentIndex: Dispatch<SetStateAction<number>>
+  embedded?: boolean
 }
 
 export const PuzzleLog: React.FC<Props> = ({
   previousGameResults,
   setCurrentIndex,
+  embedded = false,
 }: Props) => {
   return (
-    <div className="flex h-full flex-col overflow-hidden rounded bg-background-1">
-      <div className="border-b border-white border-opacity-10 px-3 py-2">
+    <div
+      className={
+        embedded
+          ? 'flex h-full flex-col overflow-hidden border-t border-glassBorder bg-transparent'
+          : 'flex h-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md'
+      }
+    >
+      <div className={embedded ? 'border-b border-glassBorder px-3 py-2' : 'border-b border-glassBorder px-3 py-2'}>
         <h3 className="text-sm font-medium text-primary">Puzzle History</h3>
       </div>
       <div className="red-scrollbar flex flex-1 flex-col overflow-y-auto">
diff --git a/src/pages/puzzles.tsx b/src/pages/puzzles.tsx
index bbe75550..6333b0c0 100644
--- a/src/pages/puzzles.tsx
+++ b/src/pages/puzzles.tsx
@@ -34,7 +34,6 @@ import {
   PuzzleLog,
   StatsDisplay,
   BoardController,
-  ContinueAgainstMaia,
   AuthenticatedWrapper,
   GameBoard,
   PromotionOverlay,
@@ -247,11 +246,20 @@ const TrainPage: NextPage = () => {
         setLastAttemptedMove={setLastAttemptedMove}
         gamesController={
           <>
-            <div className="relative bottom-0 flex h-full min-h-[38px] flex-1 flex-col justify-end overflow-auto">
-              <PuzzleLog
-                previousGameResults={previousGameResults}
-                setCurrentIndex={setCurrentIndex}
-              />
+            <div className="relative bottom-0 flex h-full min-h-[38px] flex-1 flex-col justify-start overflow-auto">
+              <div className="hidden md:block">
+                <PuzzleLog
+                  previousGameResults={previousGameResults}
+                  setCurrentIndex={setCurrentIndex}
+                  embedded
+                />
+              </div>
+              <div className="md:hidden">
+                <PuzzleLog
+                  previousGameResults={previousGameResults}
+                  setCurrentIndex={setCurrentIndex}
+                />
+              </div>
             </div>
           </>
         }
@@ -583,14 +591,7 @@ const Train: React.FC<Props> = ({
     setStatus('forfeit')
   }, [trainingGame.id, logGuess, setStatus, stats.rating])
 
-  const launchContinue = useCallback(() => {
-    const currentNode =
-      analysisEnabled && showAnalysis
-        ? analysisController.currentNode
-        : controller.currentNode
-    const url = '/play' + '?fen=' + encodeURIComponent(currentNode.fen)
-    window.open(url)
-  }, [controller, analysisController, analysisEnabled, showAnalysis])
+  // Removed "Continue Against Maia" from puzzles page; no need for launcher
 
   const hover = useCallback(
     (move?: string) => {
@@ -708,37 +709,45 @@ const Train: React.FC<Props> = ({
       exit="exit"
       style={{ willChange: 'transform, opacity' }}
     >
-      <div className="flex h-full w-[90%] flex-row gap-2">
+      <div className="flex h-full w-[90%] flex-row gap-3">
         <motion.div
-          className="desktop-left-column-container flex flex-col gap-2 overflow-hidden"
+          className="desktop-left-column-container flex flex-col overflow-hidden"
           variants={itemVariants}
           style={{ willChange: 'transform, opacity' }}
         >
-          <GameInfo title="Puzzles" icon="target" type="train">
-            <div className="flex w-full flex-col justify-start text-sm text-secondary 2xl:text-base">
-              <span>
-                Puzzle{' '}
-                <span className="text-secondary/60">#{trainingGame.id}</span>
-              </span>
-              <span>
-                Rating:{' '}
-                {status !== 'correct' && status !== 'forfeit' ? (
-                  <span className="text-secondary/60">hidden</span>
-                ) : (
-                  <span className="text-human-2">
-                    {trainingGame.puzzle_elo}
-                  </span>
-                )}
-              </span>
+          <div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md">
+            {/* Header */}
+            <GameInfo title="Puzzles" icon="target" type="train" embedded>
+              <div className="flex w-full flex-col justify-start text-sm text-secondary 2xl:text-base">
+                <span>
+                  Puzzle{' '}
+                  <span className="text-secondary/60">#{trainingGame.id}</span>
+                </span>
+                <span>
+                  Rating:{' '}
+                  {status !== 'correct' && status !== 'forfeit' ? (
+                    <span className="text-secondary/60">hidden</span>
+                  ) : (
+                    <span className="text-human-2">
+                      {trainingGame.puzzle_elo}
+                    </span>
+                  )}
+                </span>
+              </div>
+            </GameInfo>
+
+            {/* Puzzle log */}
+            <div className="flex min-h-0 flex-1 flex-col">
+              <div className="h-3" />
+              {gamesController}
             </div>
-          </GameInfo>
-          <ContinueAgainstMaia
-            launchContinue={launchContinue}
-            sourcePage="puzzles"
-            currentFen={controller.currentNode?.fen || ''}
-          />
-          {gamesController}
-          <StatsDisplay stats={stats} />
+
+            {/* Stats */}
+            <div className="flex flex-col">
+              <div className="h-3" />
+              <StatsDisplay stats={stats} embedded />
+            </div>
+          </div>
         </motion.div>
 
         <motion.div
@@ -841,6 +850,7 @@ const Train: React.FC<Props> = ({
                 ? analysisController.gameTree
                 : controller.gameTree
             }
+            embedded
           />
           <div className="flex w-full flex-1">
             <Feedback
@@ -999,6 +1009,7 @@ const Train: React.FC<Props> = ({
                     ? analysisController.gameTree
                     : controller.gameTree
                 }
+                embedded
               />
             </div>
             <div className="flex w-full">
@@ -1014,11 +1025,6 @@ const Train: React.FC<Props> = ({
               />
             </div>
             <StatsDisplay stats={stats} />
-            <ContinueAgainstMaia
-              launchContinue={launchContinue}
-              sourcePage="puzzles"
-              currentFen={controller.currentNode?.fen || ''}
-            />
             <div
               id="analysis"
               className="flex w-full flex-col gap-1 overflow-hidden"
@@ -1236,6 +1242,14 @@ const Train: React.FC<Props> = ({
           content="Train with Maia as your coach using human-centered puzzles. Curated based on how millions of players improve, with data showing how different ratings approach each position."
         />
       </Head>
+      {/* Radial gradient backdrop to match new design language */}
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background:
+            'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
+        }}
+      />
       <AnimatePresence>
         {analysisController.maia.status === 'no-cache' ||
         analysisController.maia.status === 'downloading' ? (

From d65444759801127c68f31afd44cb8a1d5eaa8694 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 10 Sep 2025 13:12:51 -0400
Subject: [PATCH 11/17] style: redesign turing page

---
 src/components/Turing/TuringLog.tsx        |  12 +-
 src/components/Turing/TuringSubmission.tsx |  26 ++++-
 src/pages/turing.tsx                       | 122 +++++++++++----------
 3 files changed, 96 insertions(+), 64 deletions(-)

diff --git a/src/components/Turing/TuringLog.tsx b/src/components/Turing/TuringLog.tsx
index da3f7a80..3fe451e3 100644
--- a/src/components/Turing/TuringLog.tsx
+++ b/src/components/Turing/TuringLog.tsx
@@ -1,14 +1,20 @@
 import { useContext } from 'react'
 import { TuringControllerContext } from 'src/contexts'
 
-export const TuringLog: React.FC = () => {
+export const TuringLog: React.FC<{ embedded?: boolean }> = ({ embedded = false }) => {
   const { games, gameIds, setCurrentIndex, currentIndex } = useContext(
     TuringControllerContext,
   )
 
   return (
-    <div className="flex h-full flex-col overflow-hidden rounded bg-background-1">
-      <div className="border-b border-white border-opacity-10 px-3 py-2">
+    <div
+      className={
+        embedded
+          ? 'flex h-full flex-col overflow-hidden border-t border-glassBorder bg-transparent'
+          : 'flex h-full flex-col overflow-hidden rounded bg-background-1'
+      }
+    >
+      <div className={embedded ? 'border-b border-glassBorder px-3 py-2' : 'border-b border-white border-opacity-10 px-3 py-2'}>
         <h3 className="text-sm font-medium text-primary">Game History</h3>
       </div>
       <div className="red-scrollbar flex flex-1 flex-col overflow-y-auto">
diff --git a/src/components/Turing/TuringSubmission.tsx b/src/components/Turing/TuringSubmission.tsx
index 719496a2..25cbeb4b 100644
--- a/src/components/Turing/TuringSubmission.tsx
+++ b/src/components/Turing/TuringSubmission.tsx
@@ -3,7 +3,13 @@ import { useCallback, useContext, useEffect, useState } from 'react'
 
 import { TuringControllerContext } from 'src/contexts'
 
-export const TuringSubmission = ({ rating }: { rating: number }) => {
+export const TuringSubmission = ({
+  rating,
+  embedded = false,
+}: {
+  rating: number
+  embedded?: boolean
+}) => {
   const { game, submitGuess, getNewGame, commentController } = useContext(
     TuringControllerContext,
   )
@@ -22,7 +28,13 @@ export const TuringSubmission = ({ rating }: { rating: number }) => {
 
   if (game?.result)
     return (
-      <div className="flex flex-col gap-5 bg-background-1 p-4">
+      <div
+        className={
+          embedded
+            ? 'flex flex-col gap-5 border-t border-glassBorder bg-transparent p-3'
+            : 'flex flex-col gap-5 bg-background-1 p-4 rounded'
+        }
+      >
         <h2 className="text-2xl">
           Guess {game.result.correct ? 'correct' : 'incorrect'}, <br />
           {game.result.bot} was the bot
@@ -60,8 +72,8 @@ export const TuringSubmission = ({ rating }: { rating: number }) => {
     )
 
   return (
-    <div className="flex flex-col gap-1">
-      <div className="flex flex-col gap-3 p-4">
+    <div className={embedded ? 'flex flex-col gap-1 border-t border-glassBorder' : 'flex flex-col gap-1'}>
+      <div className={embedded ? 'flex flex-col gap-3 p-3' : 'flex flex-col gap-3 p-4'}>
         <h2 className="text-2xl font-semibold">Who is the bot?</h2>
         <div className="flex flex-1 flex-row items-center justify-between">
           <button
@@ -105,7 +117,11 @@ export const TuringSubmission = ({ rating }: { rating: number }) => {
         </div>
       </div>
       <textarea
-        className="rounded bg-background-2 p-2 text-sm text-secondary outline-none placeholder:text-secondary"
+        className={`${
+          embedded
+            ? 'border-glassBorder bg-transparent p-2 text-sm text-secondary outline-none placeholder:text-secondary border rounded-md'
+            : 'rounded bg-background-2 p-2 text-sm text-secondary outline-none placeholder:text-secondary'
+        }`}
         placeholder="Optional justification"
         value={comment}
         onChange={(e) => setComment(e.target.value)}
diff --git a/src/pages/turing.tsx b/src/pages/turing.tsx
index 474c4974..2371d273 100644
--- a/src/pages/turing.tsx
+++ b/src/pages/turing.tsx
@@ -18,7 +18,6 @@ import {
   MovesContainer,
   BoardController,
   TuringSubmission,
-  ContinueAgainstMaia,
 } from 'src/components'
 import { AllStats } from 'src/hooks/useStats'
 import { TuringGame } from 'src/types/turing'
@@ -172,20 +171,15 @@ const Turing: React.FC<Props> = (props: Props) => {
             variants={itemVariants}
             className="flex h-[75vh] min-w-64 flex-grow flex-col justify-between"
           >
-            <div className="flex w-full flex-col gap-2">
-              <GameInfo title="Bot or Not" icon="smart_toy" type="turing">
+            <div className="border-glassBorder bg-glass flex h-full w-full flex-col overflow-hidden rounded-md border backdrop-blur-md">
+              <GameInfo title="Bot or Not" icon="smart_toy" type="turing" embedded>
                 {Info}
               </GameInfo>
-              <ContinueAgainstMaia
-                launchContinue={launchContinue}
-                sourcePage="openings"
-                currentFen={controller.currentNode?.fen || ''}
-              />
-              <div className="relative bottom-0 flex h-full min-h-[38px] flex-1 flex-col justify-end overflow-auto">
-                <TuringLog />
+              <div className="relative bottom-0 flex h-full min-h-[38px] flex-1 flex-col justify-end overflow-hidden">
+                <TuringLog embedded />
               </div>
+              <StatsDisplay stats={stats} embedded />
             </div>
-            <StatsDisplay stats={stats} />
           </motion.div>
           <motion.div
             variants={itemVariants}
@@ -200,26 +194,34 @@ const Turing: React.FC<Props> = (props: Props) => {
           </motion.div>
           <motion.div
             variants={itemVariants}
-            className="flex h-[75vh] min-w-64 flex-grow flex-col gap-1"
+            className="flex h-[75vh] min-w-64 flex-grow flex-col"
           >
-            <div className="relative bottom-0 h-full min-h-[38px] flex-1">
-              <MovesContainer game={game} termination={game.termination} />
-            </div>
-            <div id="turing-submission">
-              <TuringSubmission rating={stats.rating ?? 0} />
-            </div>
-            <div className="flex-none">
-              <BoardController
-                orientation={controller.orientation}
-                setOrientation={controller.setOrientation}
-                currentNode={controller.currentNode}
-                plyCount={controller.plyCount}
-                goToNode={controller.goToNode}
-                goToNextNode={controller.goToNextNode}
-                goToPreviousNode={controller.goToPreviousNode}
-                goToRootNode={controller.goToRootNode}
-                gameTree={controller.gameTree}
-              />
+            <div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md">
+              <div className="relative bottom-0 min-h-[38px] flex-1 overflow-hidden">
+                <MovesContainer
+                  game={game}
+                  termination={game.termination}
+                  embedded
+                  heightClass="h-full"
+                />
+              </div>
+              <div id="turing-submission" className="border-t border-glassBorder">
+                <TuringSubmission rating={stats.rating ?? 0} embedded />
+              </div>
+              <div className="flex-none border-t border-glassBorder">
+                <BoardController
+                  orientation={controller.orientation}
+                  setOrientation={controller.setOrientation}
+                  currentNode={controller.currentNode}
+                  plyCount={controller.plyCount}
+                  goToNode={controller.goToNode}
+                  goToNextNode={controller.goToNextNode}
+                  goToPreviousNode={controller.goToPreviousNode}
+                  goToRootNode={controller.goToRootNode}
+                  gameTree={controller.gameTree}
+                  embedded
+                />
+              </div>
             </div>
           </motion.div>
         </div>
@@ -257,32 +259,33 @@ const Turing: React.FC<Props> = (props: Props) => {
               orientation={controller.orientation}
             />
           </div>
-          <div className="flex h-auto w-full flex-col gap-1">
-            <div className="relative bottom-0 h-full flex-1 overflow-auto">
-              <MovesContainer game={game} termination={game.termination} />
-            </div>
-            <div className="flex-none">
-              <BoardController
-                orientation={controller.orientation}
-                setOrientation={controller.setOrientation}
-                currentNode={controller.currentNode}
-                plyCount={controller.plyCount}
-                goToNode={controller.goToNode}
-                goToNextNode={controller.goToNextNode}
-                goToPreviousNode={controller.goToPreviousNode}
-                goToRootNode={controller.goToRootNode}
-                gameTree={controller.gameTree}
-              />
-            </div>
-            <div id="turing-submission" className="w-screen">
-              <TuringSubmission rating={stats.rating ?? 0} />
-            </div>
-            <div className="flex w-full">
-              <ContinueAgainstMaia
-                launchContinue={launchContinue}
-                sourcePage="openings"
-                currentFen={controller.currentNode?.fen || ''}
-              />
+            <div className="flex h-auto w-full flex-col gap-2">
+            <div className="flex w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md">
+              <div className="relative bottom-0 flex-1 overflow-hidden">
+                <MovesContainer
+                  game={game}
+                  termination={game.termination}
+                  embedded
+                  heightClass="h-full"
+                />
+              </div>
+              <div className="border-t border-glassBorder">
+                <BoardController
+                  orientation={controller.orientation}
+                  setOrientation={controller.setOrientation}
+                  currentNode={controller.currentNode}
+                  plyCount={controller.plyCount}
+                  goToNode={controller.goToNode}
+                  goToNextNode={controller.goToNextNode}
+                  goToPreviousNode={controller.goToPreviousNode}
+                  goToRootNode={controller.goToRootNode}
+                  gameTree={controller.gameTree}
+                  embedded
+                />
+              </div>
+              <div id="turing-submission" className="border-t border-glassBorder w-full">
+                <TuringSubmission rating={stats.rating ?? 0} embedded />
+              </div>
             </div>
           </div>
         </motion.div>
@@ -308,6 +311,13 @@ const Turing: React.FC<Props> = (props: Props) => {
           content="Test your ability to distinguish between human and AI chess play. This Turing Test for chess is a fun way to see if you understand the differences between human and engine moves."
         />
       </Head>
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background:
+            'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
+        }}
+      />
       <TuringControllerContext.Provider value={controller}>
         <TreeControllerContext.Provider value={controller}>
           <AnimatePresence mode="wait">

From b07a1801c9e9d809407c4590ef108b345fa10ffd Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 10 Sep 2025 13:19:11 -0400
Subject: [PATCH 12/17] style: redesign opening page

---
 .../Openings/OpeningDrillSidebar.tsx          |  44 ++++---
 .../Openings/OpeningSelectionModal.tsx        |  79 ++++++------
 src/pages/openings/index.tsx                  | 117 ++++++++++--------
 3 files changed, 135 insertions(+), 105 deletions(-)

diff --git a/src/components/Openings/OpeningDrillSidebar.tsx b/src/components/Openings/OpeningDrillSidebar.tsx
index 80004c1f..79f0d2b1 100644
--- a/src/components/Openings/OpeningDrillSidebar.tsx
+++ b/src/components/Openings/OpeningDrillSidebar.tsx
@@ -13,6 +13,7 @@ interface Props {
   onChangeSelections?: () => void
   onLoadCompletedDrill?: (drill: CompletedDrill) => void
   onNavigateToDrill?: (drillIndex: number) => void
+  embedded?: boolean
 }
 
 export const OpeningDrillSidebar: React.FC<Props> = ({
@@ -26,25 +27,38 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
   onChangeSelections,
   onLoadCompletedDrill,
   onNavigateToDrill,
+  embedded = false,
 }) => {
+  const containerClass = embedded
+    ? 'flex h-full w-full flex-col 2xl:min-w-72'
+    : 'flex h-full w-full flex-col border-r border-white/10 bg-background-1 2xl:min-w-72'
+
+  const sectionHeaderClass = embedded
+    ? 'px-4 pt-4'
+    : 'border-b border-white/10 p-4'
+
+  const listHeaderClass = embedded
+    ? 'px-4 pb-2'
+    : 'border-b border-white/10 px-3 py-2'
+
   return (
-    <div className="flex h-full w-full flex-col border-r border-white/10 bg-background-1 2xl:min-w-72">
+    <div className={containerClass}>
       {/* Current Drill Info */}
-      <div className="border-b border-white/10 p-4">
-        <h2 className="mb-2 text-lg font-bold text-primary">Current Drill</h2>
+      <div className={sectionHeaderClass}>
+        <h2 className="mb-2 text-base font-semibold text-white/95">Current Drill</h2>
         {currentDrill ? (
           <div className="space-y-2">
             <div>
-              <p className="text-sm font-medium text-primary">
+              <p className="text-sm font-medium text-white/95">
                 {currentDrill.opening.name}
               </p>
               {currentDrill.variation && (
-                <p className="text-xs text-secondary">
+                <p className="text-xs text-white/70">
                   {currentDrill.variation.name}
                 </p>
               )}
             </div>
-            <div className="flex items-center gap-2 text-xs text-secondary">
+            <div className="flex items-center gap-2 text-xs text-white/70">
               <div className="relative h-4 w-4">
                 <Image
                   src={
@@ -80,21 +94,21 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
             </div> */}
           </div>
         ) : (
-          <p className="text-sm text-secondary">No drill selected</p>
+          <p className="text-sm text-white/70">No drill selected</p>
         )}
       </div>
 
       {/* All Drills List */}
       <div className="flex h-96 flex-col overflow-hidden">
-        <div className="border-b border-white/10 px-3 py-2">
-          <h3 className="text-sm font-medium text-primary">
+        <div className={listHeaderClass}>
+          <h3 className="text-sm font-medium text-white/90">
             Drill Progress ({currentDrillIndex + 1} of {totalDrills})
           </h3>
         </div>
         <div className="red-scrollbar flex h-full flex-col overflow-y-auto">
           {drillSequence.length === 0 ? (
             <div className="flex h-full items-center justify-center">
-              <p className="max-w-[12rem] text-center text-xs text-secondary">
+              <p className="max-w-[12rem] text-center text-xs text-white/70">
                 No drills selected
               </p>
             </div>
@@ -159,7 +173,7 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
                     <div className="flex items-start justify-between">
                       <div className="min-w-0 flex-1">
                         <div className="flex items-center justify-between">
-                          <p className="text-xs font-medium text-primary">
+                          <p className="text-xs font-medium text-white/90">
                             Drill #{drillNumber}
                           </p>
                           <span
@@ -170,11 +184,11 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
                         </div>
                         {!shouldHide && (
                           <>
-                            <p className="text-xs text-primary">
+                            <p className="text-xs text-white/90">
                               {drill.opening.name}
                             </p>
                             {drill.variation && (
-                              <p className="text-xs text-secondary">
+                              <p className="text-xs text-white/70">
                                 {drill.variation.name}
                               </p>
                             )}
@@ -193,11 +207,11 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
                                 alt={`${drill.playerColor} king`}
                               />
                             </div>
-                            <span className="text-secondary">
+                            <span className="text-white/70">
                               vs Maia{' '}
                               {drill.maiaVersion.replace('maia_kdd_', '')}
                             </span>
-                            <span className="text-secondary">
+                            <span className="text-white/70">
                               • {drill.targetMoveNumber} moves
                             </span>
                           </div>
diff --git a/src/components/Openings/OpeningSelectionModal.tsx b/src/components/Openings/OpeningSelectionModal.tsx
index cc9960a9..df16b52f 100644
--- a/src/components/Openings/OpeningSelectionModal.tsx
+++ b/src/components/Openings/OpeningSelectionModal.tsx
@@ -61,7 +61,7 @@ const MobileOpeningPopup: React.FC<MobileOpeningPopupProps> = ({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <div className="mx-4 w-full max-w-sm rounded-lg bg-background-1 p-4">
+      <div className="from-white/8 to-white/4 mx-4 w-full max-w-sm rounded-lg border border-white/10 bg-gradient-to-br p-4 backdrop-blur-md">
         <div className="mb-4">
           <h3 className="text-lg font-bold">{opening.name}</h3>
           {variation && (
@@ -90,10 +90,10 @@ const MobileOpeningPopup: React.FC<MobileOpeningPopupProps> = ({
             <div className="flex gap-2">
               <button
                 onClick={() => setSelectedColor('white')}
-                className={`flex items-center gap-2 rounded px-3 py-2 text-sm transition-colors ${
+                className={`flex items-center gap-2 rounded border px-3 py-2 text-sm transition-colors ${
                   selectedColor === 'white'
-                    ? 'bg-human-4 text-white'
-                    : 'bg-background-2 hover:bg-background-3'
+                    ? 'border-white/20 bg-white/10 text-white'
+                    : 'border-white/10 bg-white/5 text-white/90 hover:bg-white/10'
                 }`}
               >
                 <div className="relative h-4 w-4">
@@ -107,10 +107,10 @@ const MobileOpeningPopup: React.FC<MobileOpeningPopupProps> = ({
               </button>
               <button
                 onClick={() => setSelectedColor('black')}
-                className={`flex items-center gap-2 rounded px-3 py-2 text-sm transition-colors ${
+                className={`flex items-center gap-2 rounded border px-3 py-2 text-sm transition-colors ${
                   selectedColor === 'black'
-                    ? 'bg-human-4 text-white'
-                    : 'bg-background-2 hover:bg-background-3'
+                    ? 'border-white/20 bg-white/10 text-white'
+                    : 'border-white/10 bg-white/5 text-white/90 hover:bg-white/10'
                 }`}
               >
                 <div className="relative h-4 w-4">
@@ -129,21 +129,21 @@ const MobileOpeningPopup: React.FC<MobileOpeningPopupProps> = ({
         <div className="flex gap-2">
           <button
             onClick={onClose}
-            className="flex-1 rounded bg-background-2 py-2 text-sm font-medium transition-colors hover:bg-background-3"
+            className="flex-1 rounded border border-white/10 bg-white/5 py-2 text-sm font-medium text-white/90 backdrop-blur-sm transition-colors hover:bg-white/10"
           >
             Cancel
           </button>
           {isSelected ? (
             <button
               onClick={onRemove}
-              className="flex-1 rounded bg-human-4 py-2 text-sm font-medium transition-colors"
+              className="flex-1 rounded border border-white/10 bg-white/5 py-2 text-sm font-medium text-white backdrop-blur-sm transition-colors hover:bg-white/10"
             >
               Remove
             </button>
           ) : (
             <button
               onClick={() => onAdd(selectedColor)}
-              className="flex-1 rounded bg-human-4 py-2 text-sm font-medium transition-colors hover:bg-human-4/80"
+              className="flex-1 rounded border border-white/10 bg-white/5 py-2 text-sm font-medium text-white backdrop-blur-sm transition-colors hover:bg-white/10"
             >
               Add Drill
             </button>
@@ -273,7 +273,7 @@ const BrowsePanel: React.FC<{
             placeholder="Search openings..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full rounded bg-background-2 py-2 pl-10 pr-4 text-sm text-primary placeholder-secondary focus:outline-none focus:ring-1 focus:ring-human-4"
+            className="w-full rounded border border-white/10 bg-white/5 py-2 pl-10 pr-4 text-sm text-white placeholder-white/60 backdrop-blur-sm focus:outline-none focus:ring-1 focus:ring-white/20"
           />
         </div>
       </div>
@@ -296,13 +296,13 @@ const BrowsePanel: React.FC<{
                 className={`group transition-colors ${
                   isMobile
                     ? openingIsSelected
-                      ? 'bg-human-2/20'
+                      ? 'bg-white/5'
                       : ''
                     : openingIsSelected
-                      ? 'bg-human-2/20'
+                      ? 'bg-white/5'
                       : openingIsBeingPreviewed
-                        ? 'bg-human-2/10'
-                        : 'hover:bg-human-2/10'
+                        ? 'bg-white/5'
+                        : 'hover:bg-white/5'
                 }`}
               >
                 <div className="flex items-center">
@@ -352,7 +352,7 @@ const BrowsePanel: React.FC<{
                         e.stopPropagation()
                         removeOpeningSelection(opening, null)
                       }}
-                      className="mr-3 rounded p-1 text-human-3 transition-colors hover:text-human-4"
+                      className="mr-3 rounded p-1 text-white/70 transition-colors hover:text-white"
                       title="Remove opening from selection"
                     >
                       <span className="material-symbols-outlined !text-base">
@@ -391,13 +391,13 @@ const BrowsePanel: React.FC<{
                     className={`group transition-colors ${
                       isMobile
                         ? variationIsSelected
-                          ? 'bg-human-2/20'
+                          ? 'bg-white/5'
                           : ''
                         : variationIsSelected
-                          ? 'bg-human-2/20'
+                          ? 'bg-white/5'
                           : variationIsBeingPreviewed
-                            ? 'bg-human-2/10'
-                            : 'hover:bg-human-2/10'
+                            ? 'bg-white/5'
+                            : 'hover:bg-white/5'
                     }`}
                   >
                     <div className="flex items-center">
@@ -446,7 +446,7 @@ const BrowsePanel: React.FC<{
                             e.stopPropagation()
                             removeOpeningSelection(opening, variation)
                           }}
-                          className="mr-3 rounded p-1 text-human-3 transition-colors hover:text-human-4"
+                          className="mr-3 rounded p-1 text-white/70 transition-colors hover:text-white"
                           title="Remove variation from selection"
                         >
                           <span className="material-symbols-outlined !text-base">
@@ -533,10 +533,10 @@ const PreviewPanel: React.FC<{
           <div className="flex gap-2">
             <button
               onClick={() => setSelectedColor('white')}
-              className={`flex items-center gap-2 rounded px-2 py-1 text-xs transition-colors md:px-3 md:py-2 md:text-sm ${
+              className={`flex items-center gap-2 rounded border px-2 py-1 text-xs transition-colors md:px-3 md:py-2 md:text-sm ${
                 selectedColor === 'white'
-                  ? 'bg-human-4 text-white'
-                  : 'bg-background-2 hover:bg-background-3'
+                  ? 'border-white/20 bg-white/10 text-white'
+                  : 'border-white/10 bg-white/5 text-white/90 hover:bg-white/10'
               }`}
             >
               <div className="relative h-4 w-4 md:h-5 md:w-5">
@@ -550,10 +550,10 @@ const PreviewPanel: React.FC<{
             </button>
             <button
               onClick={() => setSelectedColor('black')}
-              className={`flex items-center gap-2 rounded px-2 py-1 text-xs transition-colors md:px-3 md:py-2 md:text-sm ${
+              className={`flex items-center gap-2 rounded border px-2 py-1 text-xs transition-colors md:px-3 md:py-2 md:text-sm ${
                 selectedColor === 'black'
-                  ? 'bg-human-4 text-white'
-                  : 'bg-background-2 hover:bg-background-3'
+                  ? 'border-white/20 bg-white/10 text-white'
+                  : 'border-white/10 bg-white/5 text-white/90 hover:bg-white/10'
               }`}
             >
               <div className="relative h-4 w-4 md:h-5 md:w-5">
@@ -585,11 +585,11 @@ const PreviewPanel: React.FC<{
         </div>
       </div>
 
-      <div className="flex-shrink-0 border-t border-white/10 bg-background-1 p-3 md:p-4">
+      <div className="flex-shrink-0 border-t border-white/10 p-3 md:p-4">
         <button
           onClick={addSelection}
           disabled={isDuplicateSelection(previewOpening, previewVariation)}
-          className="w-full rounded bg-human-4 py-2 text-sm font-medium transition-colors hover:bg-human-4/80 disabled:cursor-not-allowed disabled:opacity-50"
+          className="w-full rounded border border-white/10 bg-white/5 py-2 text-sm font-medium text-white backdrop-blur-sm transition-colors hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50"
           title={
             isDuplicateSelection(previewOpening, previewVariation)
               ? 'Already added with same settings'
@@ -690,7 +690,7 @@ const SelectedPanel: React.FC<{
                     }
                   }}
                   onClick={() => removeSelection(selection.id)}
-                  className="ml-2 text-secondary transition-colors hover:text-human-4"
+                  className="ml-2 text-secondary transition-colors hover:text-white"
                 >
                   <span className="material-symbols-outlined !text-lg">
                     close
@@ -704,7 +704,7 @@ const SelectedPanel: React.FC<{
     </div>
 
     {/* Fixed button section - always visible */}
-    <div className="flex-shrink-0 border-t border-white/10 bg-background-1 p-3 md:p-4">
+    <div className="flex-shrink-0 border-t border-white/10 p-3 md:p-4">
       {/* Opponent Selection */}
       <div className="mb-3 md:mb-4">
         <p className="mb-1 text-xs font-medium md:mb-2 md:text-sm">Opponent:</p>
@@ -718,7 +718,7 @@ const SelectedPanel: React.FC<{
               setSelectedMaiaVersion(version)
             }
           }}
-          className="w-full rounded bg-background-2 p-2 text-xs focus:outline-none md:text-sm"
+          className="w-full rounded border border-white/10 bg-white/5 p-2 text-xs text-white/90 backdrop-blur-sm focus:outline-none focus:ring-1 focus:ring-white/20 md:text-sm"
         >
           {MAIA_MODELS_WITH_NAMES.map((version) => (
             <option key={version.id} value={version.id}>
@@ -750,7 +750,7 @@ const SelectedPanel: React.FC<{
       <button
         onClick={handleStartDrilling}
         disabled={selections.length === 0}
-        className="w-full rounded bg-human-4 py-2 text-sm font-medium transition-colors hover:bg-human-4/80 disabled:cursor-not-allowed disabled:opacity-50"
+        className="w-full rounded border border-white/10 bg-white/5 py-2 text-sm font-medium text-white backdrop-blur-sm transition-colors hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50"
       >
         Start Drilling ({selections.length} opening
         {selections.length !== 1 ? 's' : ''})
@@ -1058,8 +1058,17 @@ export const OpeningSelectionModal: React.FC<Props> = ({
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
-        className="relative flex h-[90vh] max-h-[900px] w-[98vw] max-w-[1400px] flex-col items-start justify-start overflow-hidden rounded-lg bg-background-1 shadow-2xl md:h-[90vh]"
+        className="from-white/8 to-white/4 relative flex h-[90vh] max-h-[900px] w-[98vw] max-w-[1400px] flex-col items-start justify-start overflow-hidden rounded-lg border border-white/10 bg-gradient-to-br backdrop-blur-md md:h-[90vh]"
       >
+        <div
+          className="pointer-events-none absolute inset-0"
+          style={{
+            background: [
+              'radial-gradient(ellipse 90% 80% at 0% 100%, rgba(239, 68, 68, 0.10) 0%, transparent 72%)',
+              'radial-gradient(ellipse 90% 80% at 100% 0%, rgba(239, 68, 68, 0.08) 0%, transparent 72%)',
+            ].join(', '),
+          }}
+        />
         {/* Close Button - Top Right of Modal */}
         <button
           onClick={onClose}
@@ -1081,7 +1090,7 @@ export const OpeningSelectionModal: React.FC<Props> = ({
                 </h1>
                 <button
                   type="button"
-                  className="material-symbols-outlined text-lg text-secondary duration-200 hover:text-human-3 focus:outline-none"
+                  className="material-symbols-outlined text-lg text-secondary duration-200 hover:text-white focus:outline-none"
                   onClick={handleStartTour}
                   title="Start tour"
                 >
diff --git a/src/pages/openings/index.tsx b/src/pages/openings/index.tsx
index 3382912b..049a7e2f 100644
--- a/src/pages/openings/index.tsx
+++ b/src/pages/openings/index.tsx
@@ -482,10 +482,11 @@ const OpeningsPage: NextPage = () => {
 
   const desktopLayout = () => (
     <div className="flex h-full w-full flex-col items-center py-4">
-      <div className="flex h-full w-[90%] flex-row gap-2">
-        {/* Left Sidebar */}
-        <div className="desktop-left-column-container flex flex-col gap-2 overflow-hidden rounded">
-          <div className="flex w-full flex-col">
+      <div className="flex h-full w-[90%] flex-row gap-3">
+        {/* Left Sidebar - unified glass container */}
+        <div className="desktop-left-column-container flex flex-col overflow-hidden">
+          <div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md">
+            {/* Opening drill info and drill list */}
             <OpeningDrillSidebar
               currentDrill={controller.currentDrill}
               completedDrills={[]}
@@ -496,50 +497,48 @@ const OpeningsPage: NextPage = () => {
               onResetCurrentDrill={controller.resetCurrentDrill}
               onChangeSelections={handleChangeSelections}
               onLoadCompletedDrill={() => console.log('Load completed drill')}
+              embedded
             />
-          </div>
-
-          {/* Moves Container with Board Controller */}
-          <div className="flex h-[30vh] flex-col overflow-hidden">
+            {/* Spacer + separator before moves/controller */}
+            <div className="h-3 border-b border-glassBorder" />
+            {/* Moves + Board controller embedded */}
             {controller.currentDrillGame && (
-              <div className="flex h-full flex-col">
-                <div className="flex-1 overflow-hidden">
-                  <MovesContainer
-                    game={
-                      gameForContainer || {
-                        id: controller.currentDrillGame.id,
-                        tree: controller.gameTree,
-                        moves: [],
-                      }
-                    }
-                    startFromNode={
-                      controller.currentDrillGame?.openingEndNode || undefined
-                    }
-                    restrictNavigationBefore={
-                      controller.currentDrillGame?.openingEndNode || undefined
+              <div className="red-scrollbar flex h-full flex-1 flex-col overflow-y-auto">
+                <MovesContainer
+                  game={
+                    gameForContainer || {
+                      id: controller.currentDrillGame.id,
+                      tree: controller.gameTree,
+                      moves: [],
                     }
-                    showAnnotations={
-                      controller.analysisEnabled ||
-                      controller.continueAnalyzingMode
-                    }
-                    showVariations={controller.continueAnalyzingMode}
-                  />
-                </div>
-                <div className="border-t border-white/10">
-                  <BoardController
-                    gameTree={controller.gameTree}
-                    orientation={controller.orientation}
-                    setOrientation={noOpSetOrientation}
-                    currentNode={controller.currentNode}
-                    plyCount={controller.plyCount}
-                    goToNode={controller.goToNode}
-                    goToNextNode={controller.goToNextNode}
-                    goToPreviousNode={customGoToPreviousNode}
-                    goToRootNode={customGoToRootNode}
-                    disableFlip={true}
-                    disablePrevious={controller.isAtOpeningEnd}
-                  />
-                </div>
+                  }
+                  startFromNode={
+                    controller.currentDrillGame?.openingEndNode || undefined
+                  }
+                  restrictNavigationBefore={
+                    controller.currentDrillGame?.openingEndNode || undefined
+                  }
+                  showAnnotations={
+                    controller.analysisEnabled || controller.continueAnalyzingMode
+                  }
+                  showVariations={controller.continueAnalyzingMode}
+                  embedded
+                  heightClass="h-40"
+                />
+                <BoardController
+                  gameTree={controller.gameTree}
+                  orientation={controller.orientation}
+                  setOrientation={noOpSetOrientation}
+                  currentNode={controller.currentNode}
+                  plyCount={controller.plyCount}
+                  goToNode={controller.goToNode}
+                  goToNextNode={controller.goToNextNode}
+                  goToPreviousNode={customGoToPreviousNode}
+                  goToRootNode={customGoToRootNode}
+                  disableFlip={true}
+                  disablePrevious={controller.isAtOpeningEnd}
+                  embedded
+                />
               </div>
             )}
           </div>
@@ -583,16 +582,16 @@ const OpeningsPage: NextPage = () => {
 
           {/* Drill progress with next drill button */}
           {controller.currentDrillGame && controller.currentDrill && (
-            <div className="flex w-full items-center gap-3 rounded bg-background-1 p-3">
+            <div className="flex w-full items-center gap-3 rounded-md border border-glassBorder bg-glass p-3 backdrop-blur-md">
               <div className="flex-1">
                 <div className="mb-1 flex justify-between text-xs">
-                  <span className="text-secondary">Move Progress</span>
-                  <span className="font-medium text-primary">
+                  <span className="text-white/70">Move Progress</span>
+                  <span className="font-medium text-white/90">
                     {controller.currentDrillGame.playerMoveCount}/
                     {controller.currentDrill.targetMoveNumber}
                   </span>
                 </div>
-                <div className="h-2 w-full rounded bg-background-3">
+                <div className="h-2 w-full rounded bg-white/10">
                   <div
                     className="h-full rounded bg-human-3 transition-all duration-300"
                     style={{
@@ -612,7 +611,7 @@ const OpeningsPage: NextPage = () => {
                 !controller.showPerformanceModal && (
                   <button
                     onClick={controller.showCurrentPerformance}
-                    className="rounded bg-background-2 px-4 py-2 text-sm font-medium transition-colors hover:bg-background-3"
+                    className="rounded-md border border-glassBorder bg-glass px-4 py-2 text-sm font-medium text-white/90 transition-colors hover:bg-glass-hover"
                   >
                     View Performance
                   </button>
@@ -740,6 +739,7 @@ const OpeningsPage: NextPage = () => {
               gameTree={controller.gameTree}
               disableFlip={true}
               disablePrevious={controller.isAtOpeningEnd}
+              embedded
             />
           </div>
 
@@ -770,16 +770,16 @@ const OpeningsPage: NextPage = () => {
 
           {/* Drill Progress */}
           {controller.currentDrillGame && controller.currentDrill && (
-            <div className="flex w-full items-center gap-3 rounded bg-background-1 p-3">
+            <div className="flex w-full items-center gap-3 rounded-md border border-glassBorder bg-glass p-3 backdrop-blur-md">
               <div className="flex-1">
                 <div className="mb-1 flex justify-between text-xs">
-                  <span className="text-secondary">Move Progress</span>
-                  <span className="font-medium text-primary">
+                  <span className="text-white/70">Move Progress</span>
+                  <span className="font-medium text-white/90">
                     {controller.currentDrillGame.playerMoveCount}/
                     {controller.currentDrill.targetMoveNumber}
                   </span>
                 </div>
-                <div className="h-2 w-full rounded bg-background-3">
+                <div className="h-2 w-full rounded bg-white/10">
                   <div
                     className="h-full rounded bg-human-3 transition-all duration-300"
                     style={{
@@ -804,7 +804,7 @@ const OpeningsPage: NextPage = () => {
               !controller.showPerformanceModal && (
                 <button
                   onClick={controller.showCurrentPerformance}
-                  className="w-full rounded bg-background-2 px-6 py-2 text-sm font-medium"
+                  className="w-full rounded-md border border-glassBorder bg-glass px-6 py-2 text-sm font-medium text-white/90 hover:bg-glass-hover"
                 >
                   View Performance
                 </button>
@@ -852,6 +852,13 @@ const OpeningsPage: NextPage = () => {
           content="Master chess openings with interactive drills against Maia AI. Practice popular openings, learn key variations, and get performance analysis to improve your opening repertoire."
         />
       </Head>
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background:
+            'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
+        }}
+      />
       <TreeControllerContext.Provider
         value={{
           gameTree: controller.gameTree,

From 3165afafa072f67eef38e0f5f8311e457edc39a7 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 10 Sep 2025 13:19:54 -0400
Subject: [PATCH 13/17] style: redesign broadcast page

---
 src/components/Analysis/BroadcastAnalysis.tsx | 56 +++++++++-------
 src/components/Analysis/BroadcastGameList.tsx | 67 ++++++++++++-------
 .../broadcast/[broadcastId]/[roundId].tsx     |  8 +++
 3 files changed, 85 insertions(+), 46 deletions(-)

diff --git a/src/components/Analysis/BroadcastAnalysis.tsx b/src/components/Analysis/BroadcastAnalysis.tsx
index 7822b8b3..6da62abb 100644
--- a/src/components/Analysis/BroadcastAnalysis.tsx
+++ b/src/components/Analysis/BroadcastAnalysis.tsx
@@ -267,35 +267,43 @@ export const BroadcastAnalysis: React.FC<Props> = ({
       exit="exit"
       style={{ willChange: 'transform, opacity' }}
     >
-      <div className="flex h-full w-[90%] flex-row gap-2">
+      <div className="flex h-full w-[90%] flex-row gap-3">
         <motion.div
           id="navigation"
-          className="desktop-left-column-container flex flex-col gap-2 overflow-hidden"
+          className="desktop-left-column-container flex flex-col overflow-hidden"
           variants={itemVariants}
           style={{ willChange: 'transform, opacity' }}
         >
-          <GameInfo
-            title="Broadcast"
-            icon="live_tv"
-            type="analysis"
-            streamState={broadcastController.broadcastState}
-          >
-            <NestedGameInfo />
-          </GameInfo>
-          <div className="flex h-1/2 w-full flex-1 flex-col gap-2">
-            <div className="flex h-full flex-col">
-              <div className="flex-1 overflow-hidden">
-                <BroadcastGameList broadcastController={broadcastController} />
-              </div>
-              <div className="flex-1 overflow-hidden">
-                <MovesContainer
-                  game={game}
-                  termination={game.termination}
-                  showAnnotations={true}
-                  disableKeyboardNavigation={false}
-                  disableMoveClicking={false}
+          <div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md">
+            <GameInfo
+              title="Broadcast"
+              icon="live_tv"
+              type="analysis"
+              streamState={broadcastController.broadcastState}
+              embedded
+            >
+              <NestedGameInfo />
+            </GameInfo>
+            <div className="flex flex-col overflow-hidden">
+              <div className="h-3" />
+              <div className="max-h-[32vh] min-h-[32vh]">
+                <BroadcastGameList
+                  broadcastController={broadcastController}
+                  embedded
                 />
               </div>
+            </div>
+            <div className="red-scrollbar flex h-full flex-1 flex-col overflow-y-auto">
+              <div className="h-3 border-b border-glassBorder" />
+              <MovesContainer
+                game={game}
+                termination={game.termination}
+                showAnnotations={true}
+                disableKeyboardNavigation={false}
+                disableMoveClicking={false}
+                embedded
+                heightClass="h-40"
+              />
               <BoardController
                 gameTree={analysisController.gameTree}
                 orientation={analysisController.orientation}
@@ -308,12 +316,13 @@ export const BroadcastAnalysis: React.FC<Props> = ({
                 goToRootNode={analysisController.goToRootNode}
                 disableKeyboardNavigation={false}
                 disableNavigation={false}
+                embedded
               />
             </div>
           </div>
         </motion.div>
         <motion.div
-          className="desktop-middle-column-container flex flex-col gap-2"
+          className="desktop-middle-column-container flex flex-col gap-3"
           variants={itemVariants}
           style={{ willChange: 'transform, opacity' }}
         >
@@ -489,6 +498,7 @@ export const BroadcastAnalysis: React.FC<Props> = ({
                 goToRootNode={analysisController.goToRootNode}
                 disableKeyboardNavigation={false}
                 disableNavigation={false}
+                embedded
               />
             </div>
             <div className="relative bottom-0 h-48 max-h-48 flex-1 overflow-auto overflow-y-hidden">
diff --git a/src/components/Analysis/BroadcastGameList.tsx b/src/components/Analysis/BroadcastGameList.tsx
index 5881c1ee..3df0f907 100644
--- a/src/components/Analysis/BroadcastGameList.tsx
+++ b/src/components/Analysis/BroadcastGameList.tsx
@@ -5,11 +5,13 @@ import { BroadcastStreamController, BroadcastGame } from 'src/types'
 interface BroadcastGameListProps {
   broadcastController: BroadcastStreamController
   onGameSelected?: () => void
+  embedded?: boolean
 }
 
 export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
   broadcastController,
   onGameSelected,
+  embedded = false,
 }) => {
   const [selectedRoundId, setSelectedRoundId] = useState<string>(
     broadcastController.currentRound?.id || '',
@@ -61,12 +63,29 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
   }
 
   return (
-    <div className="flex h-full flex-col items-start justify-start overflow-hidden bg-background-1 md:rounded">
-      <div className="flex w-full flex-col items-start justify-start gap-2 border-b-2 border-white border-opacity-10 p-3">
+    <div
+      className={
+        embedded
+          ? 'flex h-full flex-col items-start justify-start overflow-hidden'
+          : 'flex h-full flex-col items-start justify-start overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md'
+      }
+    >
+      <div
+        className={
+          embedded
+            ? 'flex w-full flex-col items-start justify-start gap-2 border-b border-glassBorder bg-transparent px-3 py-2'
+            : 'flex w-full flex-col items-start justify-start gap-2 border-b border-glassBorder bg-transparent px-3 py-2'
+        }
+      >
         <div className="w-full overflow-hidden">
-          <h3 className="truncate text-sm font-semibold text-primary">
-            {broadcastController.currentBroadcast?.tour.name ||
-              'Live Broadcast'}
+          <h3
+            className={
+              embedded
+                ? 'truncate text-sm font-semibold text-white/95'
+                : 'truncate text-sm font-semibold text-white/95'
+            }
+          >
+            {broadcastController.currentBroadcast?.tour.name || 'Live Broadcast'}
           </h3>
         </div>
 
@@ -76,7 +95,7 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
             id="round-selector"
             value={selectedRoundId}
             onChange={(e) => handleRoundChange(e.target.value)}
-            className="w-full rounded bg-background-2 px-2 py-1 text-xs text-primary focus:outline-none focus:ring-1 focus:ring-human-4"
+            className="w-full rounded-md border border-glassBorder bg-glass px-2 py-1 text-xs text-white/90 backdrop-blur-sm focus:outline-none focus:ring-1 focus:ring-human-4"
           >
             {broadcastController.currentBroadcast.rounds.map((round) => (
               <option key={round.id} value={round.id}>
@@ -88,7 +107,7 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
 
         {/* Connection Status */}
         {broadcastController.broadcastState.error && (
-          <div className="mb-2 rounded bg-red-500/20 p-2 text-xs text-red-400">
+          <div className="mb-2 rounded-md border border-red-500/30 bg-red-500/10 p-2 text-xs text-red-400 backdrop-blur-sm">
             <div className="flex items-center justify-between">
               <span>Connection Error</span>
               <button
@@ -102,9 +121,9 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
         )}
 
         {broadcastController.broadcastState.isConnecting && (
-          <div className="mb-2 rounded bg-background-2 p-2 text-xs text-secondary">
+          <div className="mb-2 rounded-md border border-glassBorder bg-glass p-2 text-xs text-secondary backdrop-blur-sm">
             <div className="flex items-center gap-2">
-              <div className="h-3 w-3 animate-spin rounded-full border-b border-white"></div>
+              <div className="h-3 w-3 animate-spin rounded-full border-b border-white/80"></div>
               <span>Connecting...</span>
             </div>
           </div>
@@ -136,22 +155,18 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
               return (
                 <div
                   key={game.id}
-                  className={`group flex w-full items-center ${
+                  className={`group flex w-full items-center transition-colors ${
                     isSelected
-                      ? 'bg-background-2 font-bold'
-                      : index % 2 === 0
-                        ? 'bg-background-1/30 hover:bg-background-2'
-                        : 'bg-background-1/10 hover:bg-background-2'
+                      ? 'bg-white/10 font-semibold'
+                      : 'hover:bg-white/5'
                   }`}
                 >
                   <div
                     className={`flex h-full w-9 items-center justify-center ${
-                      isSelected
-                        ? 'bg-background-3'
-                        : 'bg-background-2 group-hover:bg-white/5'
+                      isSelected ? 'bg-white/10' : 'bg-transparent group-hover:bg-white/5'
                     }`}
                   >
-                    <p className="text-sm text-secondary">{index + 1}</p>
+                    <p className="text-sm text-white/70">{index + 1}</p>
                   </div>
                   <button
                     onClick={() => handleGameSelect(game)}
@@ -161,13 +176,13 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
                       <div className="flex flex-col items-start overflow-hidden">
                         <div className="flex items-center gap-1">
                           <div className="h-2 w-2 rounded-full bg-white" />
-                          <span className="overflow-hidden text-ellipsis whitespace-nowrap text-xs text-primary">
+                          <span className="overflow-hidden text-ellipsis whitespace-nowrap text-xs text-white/90">
                             {formatPlayerName(game.white, game.whiteElo)}
                           </span>
                         </div>
                         <div className="mt-0.5 flex items-center gap-1">
                           <div className="h-2 w-2 rounded-full border-[0.5px] bg-black" />
-                          <span className="overflow-hidden text-ellipsis whitespace-nowrap text-xs text-primary">
+                          <span className="overflow-hidden text-ellipsis whitespace-nowrap text-xs text-white/90">
                             {formatPlayerName(game.black, game.blackElo)}
                           </span>
                         </div>
@@ -192,15 +207,21 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
       </div>
 
       {/* Footer with broadcast info */}
-      <div className="w-full border-t border-white border-opacity-10 p-2">
-        <div className="text-center text-xs text-secondary">
+      <div
+        className={
+          embedded
+            ? 'w-full border-t border-glassBorder p-2'
+            : 'w-full border-t border-glassBorder p-2'
+        }
+      >
+        <div className="text-center text-xs text-white/70">
           <p>
             Watch on{' '}
             <a
               href={broadcastController.currentBroadcast?.tour.url}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-primary/60 underline hover:text-primary"
+              className="text-white/80 underline hover:text-white"
             >
               Lichess
             </a>
diff --git a/src/pages/broadcast/[broadcastId]/[roundId].tsx b/src/pages/broadcast/[broadcastId]/[roundId].tsx
index c400531f..eb5b55fd 100644
--- a/src/pages/broadcast/[broadcastId]/[roundId].tsx
+++ b/src/pages/broadcast/[broadcastId]/[roundId].tsx
@@ -246,6 +246,14 @@ const BroadcastAnalysisPage: NextPage = () => {
         <title>{pageTitle}</title>
         <meta name="description" content={pageDescription} />
       </Head>
+      {/* Radial gradient backdrop to match new design language */}
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background:
+            'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
+        }}
+      />
 
       <AnimatePresence>
         {analysisController &&

From fbad428f14db54e10df9666f6caf71aeee66c8e3 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 10 Sep 2025 15:01:34 -0400
Subject: [PATCH 14/17] style: redesign blog page

---
 src/pages/blog/[id].tsx  | 113 +++++++++++++++++++++------------------
 src/pages/blog/index.tsx |  17 ++++--
 2 files changed, 74 insertions(+), 56 deletions(-)

diff --git a/src/pages/blog/[id].tsx b/src/pages/blog/[id].tsx
index 5293591e..18723601 100644
--- a/src/pages/blog/[id].tsx
+++ b/src/pages/blog/[id].tsx
@@ -19,7 +19,7 @@ const BlogPost = ({ post }: BlogPostProps) => {
   }
 
   return (
-    <div className="flex h-full flex-col items-center justify-center gap-5 py-[10%] md:py-[2%]">
+    <>
       <Head>
         <title>{post.title} – Maia Chess</title>
         <meta name="description" content={post.excerpt} />
@@ -59,61 +59,70 @@ const BlogPost = ({ post }: BlogPostProps) => {
         <meta name="robots" content="index, follow" />
         <link rel="canonical" href={`https://maiachess.com/blog/${post.id}`} />
       </Head>
-      <div className="flex max-w-[90%] flex-col items-center justify-center overflow-x-hidden md:max-w-[80ch]">
-        <div className="mb-8 flex w-full flex-col gap-2">
-          <Link href="/blog">
-            <p className="hover:opacity-75">← Go back</p>
-          </Link>
-          <h1 className="text-2xl font-bold md:text-4xl">{post.title}</h1>
-          <div className="flex flex-wrap items-center gap-2 md:gap-4">
-            <p>
-              {new Date(post.date).toLocaleDateString('en-US', {
-                month: 'short',
-                day: 'numeric',
-                year: 'numeric',
-              })}
-            </p>
-            {post.github && (
-              <a
-                href={post.github}
-                target="_blank"
-                rel="noreferrer"
-                className="underline"
-              >
-                GitHub
-              </a>
-            )}
-            {post.arxiv && (
-              <a
-                href={post.arxiv}
-                target="_blank"
-                rel="noreferrer"
-                className="underline"
-              >
-                arXiv
-              </a>
-            )}
-            {post.journal && <p>{post.journal}</p>}
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background:
+            'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
+        }}
+      />
+      <div className="relative flex h-full flex-col items-center justify-center gap-5 py-[10%] md:py-[2%]">
+        <div className="flex max-w-[90%] flex-col items-center justify-center overflow-x-hidden md:max-w-[80ch]">
+          <div className="mb-8 flex w-full flex-col gap-2">
+            <Link href="/blog">
+              <p className="hover:opacity-75">← Go back</p>
+            </Link>
+            <h1 className="text-2xl font-bold md:text-4xl">{post.title}</h1>
+            <div className="flex flex-wrap items-center gap-2 md:gap-4">
+              <p>
+                {new Date(post.date).toLocaleDateString('en-US', {
+                  month: 'short',
+                  day: 'numeric',
+                  year: 'numeric',
+                })}
+              </p>
+              {post.github && (
+                <a
+                  href={post.github}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="underline"
+                >
+                  GitHub
+                </a>
+              )}
+              {post.arxiv && (
+                <a
+                  href={post.arxiv}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="underline"
+                >
+                  arXiv
+                </a>
+              )}
+              {post.journal && <p>{post.journal}</p>}
+            </div>
+            <div className="no-scrollbar mt-1 flex items-center gap-2 overflow-x-scroll">
+              {post.tags.map((tag, index) => (
+                <div
+                  key={index}
+                  className="flex items-center justify-center gap-2 rounded-sm bg-background-1 px-3 py-1"
+                >
+                  <div className="h-2 w-2 rounded-full bg-human-3" />
+                  <p className="whitespace-nowrap text-sm text-secondary">
+                    {tag}
+                  </p>
+                </div>
+              ))}
+            </div>
           </div>
-          <div className="no-scrollbar mt-1 flex items-center gap-2 overflow-x-scroll">
-            {post.tags.map((tag, index) => (
-              <div
-                key={index}
-                className="flex items-center justify-center gap-2 rounded-sm bg-background-1 px-3 py-1"
-              >
-                <div className="h-2 w-2 rounded-full bg-human-3" />
-                <p className="whitespace-nowrap text-sm text-secondary">
-                  {tag}
-                </p>
-              </div>
-            ))}
+          <div className="prose prose-sm prose-invert w-full max-w-none leading-relaxed md:prose-lg lg:prose-xl prose-headings:mb-2 prose-a:text-human-2 hover:prose-a:underline prose-ul:list-inside prose-ul:list-disc prose-li:text-sm prose-img:mb-2 prose-hr:my-8 prose-hr:opacity-20 lg:max-w-[80ch]">
+            <Markdown>{post.content}</Markdown>
           </div>
         </div>
-        <div className="prose prose-sm prose-invert w-full max-w-none leading-relaxed md:prose-lg lg:prose-xl prose-headings:mb-2 prose-a:text-human-2 hover:prose-a:underline prose-ul:list-inside prose-ul:list-disc prose-li:text-sm prose-img:mb-2 prose-hr:my-8 prose-hr:opacity-20 lg:max-w-[80ch]">
-          <Markdown>{post.content}</Markdown>
-        </div>
       </div>
-    </div>
+    </>
   )
 }
 
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 933bd2f5..f0d10bd9 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -5,7 +5,7 @@ import { getSortedPostsData } from 'src/lib/blog/posts'
 
 export default function Blog({ posts }: { posts: Post[] }) {
   return (
-    <div className="mx-auto flex h-full w-[90%] flex-col items-start justify-center gap-5 py-[10%] md:py-[2%]">
+    <>
       <Head>
         <title>Blog – Maia Chess</title>
         <meta
@@ -44,8 +44,16 @@ export default function Blog({ posts }: { posts: Post[] }) {
         <meta name="robots" content="index, follow" />
         <link rel="canonical" href="https://maiachess.com/blog" />
       </Head>
-      <h1 className="text-4xl font-bold">Blog</h1>
-      <div className="flex w-full flex-col gap-6 overflow-x-hidden">
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background:
+            'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
+        }}
+      />
+      <div className="relative mx-auto flex h-full w-[90%] flex-col items-start justify-center gap-5 py-[10%] md:py-[2%]">
+        <h1 className="text-4xl font-bold">Blog</h1>
+        <div className="flex w-full flex-col gap-6 overflow-x-hidden">
         {posts.map((post, index) => (
           <Link href={`/blog/${post.id}`} key={index}>
             <div className="flex w-full cursor-pointer flex-col gap-2 overflow-hidden hover:opacity-80 md:w-auto md:max-w-2xl">
@@ -76,8 +84,9 @@ export default function Blog({ posts }: { posts: Post[] }) {
             </div>
           </Link>
         ))}
+        </div>
       </div>
-    </div>
+    </>
   )
 }
 

From 9135dd4c7ba80248be607728a1fd397771192fea Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 10 Sep 2025 15:01:52 -0400
Subject: [PATCH 15/17] style: redesign landing page CTAs

---
 src/components/Home/AboutMaia.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Home/AboutMaia.tsx b/src/components/Home/AboutMaia.tsx
index a044e2e5..39492328 100644
--- a/src/components/Home/AboutMaia.tsx
+++ b/src/components/Home/AboutMaia.tsx
@@ -130,7 +130,7 @@ const PaperCard = ({
   className?: string
 }) => (
   <motion.div
-    className={`group relative flex h-full flex-col rounded-lg bg-background-1 transition-all duration-200 ${featured ? '' : 'hover:scale-[1.02]'} ${className} ${featured ? 'overflow-hidden' : 'p-4 md:p-6'}`}
+    className={`from-white/8 to-white/4 hover:from-white/12 hover:to-white/6 group relative flex h-full flex-col rounded-lg border border-white/10 bg-gradient-to-br backdrop-blur-md transition-all duration-200 hover:border-white/20 ${featured ? '' : 'hover:scale-[1.02]'} ${className} ${featured ? 'overflow-hidden' : 'p-4 md:p-6'}`}
     initial={{ opacity: 0, y: 20 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true }}
@@ -214,7 +214,7 @@ export const AboutMaia = () => {
     <div>
       <section
         id="main_info"
-        className="relative flex flex-col items-center justify-center bg-background-2 py-20 text-center"
+        className="relative flex flex-col items-center justify-center bg-transparent py-20 text-center"
         ref={projectRef}
       >
         <div className="flex max-w-3xl flex-col items-center justify-center px-4 md:px-0">
@@ -295,7 +295,7 @@ export const AboutMaia = () => {
 
       <section
         id="team_info"
-        className="relative overflow-hidden bg-background-1 py-16"
+        className="relative overflow-hidden bg-transparent py-16"
         ref={teamRef}
       >
         <div className="relative z-10 mx-auto my-0 flex max-w-[1200px] flex-col items-center justify-center gap-8">
@@ -311,7 +311,7 @@ export const AboutMaia = () => {
       </section>
 
       <section
-        className="relative flex flex-col items-center justify-center gap-2 overflow-hidden bg-background-2 py-20"
+        className="relative flex flex-col items-center justify-center gap-2 overflow-hidden bg-transparent py-20"
         ref={acknowledgementsRef}
       >
         <h3 className="text-center text-xl font-bold uppercase">

From 035fad1cbb905d038412bb5b0f8e50f95d8e5c37 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 10 Sep 2025 15:23:10 -0400
Subject: [PATCH 16/17] style: redesign landing page

---
 src/components/Home/AboutMaia.tsx             |  2 +-
 src/components/Home/PageNavigation.tsx        |  2 +-
 .../Sections/AdditionalFeaturesSection.tsx    |  4 +-
 .../Home/Sections/AnalysisSection.tsx         | 18 ++++----
 src/components/Home/Sections/PlaySection.tsx  |  6 +--
 src/components/Home/Sections/TrainSection.tsx | 14 +++---
 src/pages/index.tsx                           | 44 +++++++++++++++++--
 7 files changed, 63 insertions(+), 27 deletions(-)

diff --git a/src/components/Home/AboutMaia.tsx b/src/components/Home/AboutMaia.tsx
index 39492328..848cb2c7 100644
--- a/src/components/Home/AboutMaia.tsx
+++ b/src/components/Home/AboutMaia.tsx
@@ -46,7 +46,7 @@ const teamMembers = [
     image: '/assets/team/kevin.jpg',
     name: 'Kevin Thomas',
     website: 'https://kevinjosethomas.com/',
-    institution: 'Burnaby South Secondary',
+    institution: 'University of Waterloo',
     role: 'Web Developer',
     github: 'kevinjosethomas',
   },
diff --git a/src/components/Home/PageNavigation.tsx b/src/components/Home/PageNavigation.tsx
index ac8c2706..f4f46212 100644
--- a/src/components/Home/PageNavigation.tsx
+++ b/src/components/Home/PageNavigation.tsx
@@ -3,7 +3,7 @@ import { motion } from 'framer-motion'
 export const PageNavigation = () => {
   return (
     <motion.div
-      className="sticky top-0 z-20 flex flex-row flex-wrap items-center justify-center gap-3 border-y border-background-3/20 bg-background-2 px-3 py-4 text-sm uppercase tracking-wider backdrop-blur-md md:gap-6"
+      className="sticky top-0 z-20 flex flex-row flex-wrap items-center justify-center gap-3 border-b border-t border-white/10 bg-black px-3 py-4 text-sm uppercase tracking-wider md:gap-6"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.3 }}
diff --git a/src/components/Home/Sections/AdditionalFeaturesSection.tsx b/src/components/Home/Sections/AdditionalFeaturesSection.tsx
index 5a5a5207..f202abe5 100644
--- a/src/components/Home/Sections/AdditionalFeaturesSection.tsx
+++ b/src/components/Home/Sections/AdditionalFeaturesSection.tsx
@@ -69,7 +69,7 @@ const FeatureCard = ({
 
   return (
     <motion.div
-      className="flex flex-col overflow-hidden rounded-lg bg-background-2 shadow-lg transition-transform duration-200"
+      className="from-white/8 to-white/4 hover:from-white/12 hover:to-white/6 flex flex-col overflow-hidden rounded-lg border border-white/10 bg-gradient-to-br backdrop-blur-md transition-all duration-200 hover:border-white/20"
       variants={variants}
     >
       <div className="flex flex-col p-5">
@@ -169,7 +169,7 @@ export const AdditionalFeaturesSection = ({
   return (
     <section
       id={id}
-      className="relative w-full flex-col items-center overflow-hidden bg-background-1 py-10 md:py-16"
+      className="relative w-full flex-col items-center overflow-hidden bg-transparent py-10 md:py-16"
       ref={ref}
     >
       <div className="mx-auto flex w-full max-w-[95%] flex-col px-2 md:max-w-[90%] md:px-4">
diff --git a/src/components/Home/Sections/AnalysisSection.tsx b/src/components/Home/Sections/AnalysisSection.tsx
index 94dc55ec..a795e547 100644
--- a/src/components/Home/Sections/AnalysisSection.tsx
+++ b/src/components/Home/Sections/AnalysisSection.tsx
@@ -216,7 +216,7 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
   return (
     <section
       id={id}
-      className="relative flex w-full flex-col items-center justify-center overflow-hidden bg-background-1 py-6 md:py-8"
+      className="relative flex w-full flex-col items-center justify-center overflow-hidden bg-transparent py-6 md:py-8"
       ref={ref}
     >
       <div className="mx-auto flex w-full max-w-[95%] flex-col-reverse items-center px-2 md:max-w-[90%] md:flex-row md:gap-8 md:px-4 lg:gap-12">
@@ -226,12 +226,12 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
           animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
           transition={{ duration: 0.4, ease: 'easeOut' }}
         >
-          <div className="relative w-full overflow-hidden rounded-lg border border-background-3/20 bg-background-2 shadow-xl">
+          <div className="relative w-full overflow-hidden rounded-lg border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
             <div className="flex flex-col gap-3 p-3">
               <div className="flex flex-col gap-3 md:flex-row">
                 <div className="flex flex-col md:w-1/2">
-                  <div className="flex flex-col overflow-hidden rounded border border-white/10">
-                    <div className="w-full rounded-t-sm bg-background-1/60 p-2 text-left text-sm font-medium text-primary/80">
+                  <div className="flex flex-col overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
+                    <div className="w-full rounded-t-sm bg-white/5 p-2 text-left text-sm font-medium text-primary/80">
                       Spassky, Boris V.
                     </div>
                     <div className="relative aspect-square w-full">
@@ -239,14 +239,14 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
                         <AnalysisChessboard forceKey={renderKey} />
                       </div>
                     </div>
-                    <div className="rounded-b-sm bg-background-1/60 p-2 text-left text-sm font-medium text-primary/80">
+                    <div className="rounded-b-sm bg-white/5 p-2 text-left text-sm font-medium text-primary/80">
                       Petrosian, Tigran V
                     </div>
                   </div>
                 </div>
                 <div className="flex flex-col gap-3 md:w-1/2">
                   <motion.div
-                    className="min-h-0 flex-1 overflow-hidden rounded border border-white/10"
+                    className="min-h-0 flex-1 overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md"
                     initial={{ opacity: 0, y: 20 }}
                     animate={
                       inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
@@ -274,7 +274,7 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
                     />
                   </motion.div>
                   <motion.div
-                    className="flex-shrink-0 overflow-hidden rounded border border-white/10"
+                    className="flex-shrink-0 overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md"
                     initial={{ opacity: 0, y: 20 }}
                     animate={
                       inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
@@ -294,7 +294,7 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
                   }
                   transition={{ duration: 0.3, delay: 0.6 }}
                 >
-                  <div className="h-full w-full overflow-hidden rounded border border-white/10 bg-background-1/60">
+                  <div className="h-full w-full overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
                     <MovesByRating
                       moves={analysisMockData.movesByRating}
                       colorSanMapping={analysisMockData.colorSanMapping}
@@ -303,7 +303,7 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
                   </div>
                 </motion.div>
                 <motion.div
-                  className="h-64 overflow-hidden rounded border border-white/10 md:w-1/2"
+                  className="h-64 overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md md:w-1/2"
                   initial={{ opacity: 0, y: 20 }}
                   animate={
                     inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
diff --git a/src/components/Home/Sections/PlaySection.tsx b/src/components/Home/Sections/PlaySection.tsx
index 216eb866..4d5d936f 100644
--- a/src/components/Home/Sections/PlaySection.tsx
+++ b/src/components/Home/Sections/PlaySection.tsx
@@ -47,7 +47,7 @@ export const PlaySection = ({ id }: PlaySectionProps) => {
   return (
     <section
       id={id}
-      className="relative flex min-h-[80vh] w-full flex-col items-center justify-center overflow-hidden bg-background-1 py-10 md:py-16"
+      className="relative flex min-h-[80vh] w-full flex-col items-center justify-center overflow-hidden bg-transparent py-10 md:py-16"
       ref={ref}
     >
       <div className="mx-auto flex w-full max-w-[95%] flex-col items-center px-2 md:max-w-[90%] md:flex-row md:gap-12 md:px-4 lg:gap-16">
@@ -84,11 +84,11 @@ export const PlaySection = ({ id }: PlaySectionProps) => {
           transition={{ duration: 0.4, ease: 'easeOut' }}
         >
           <div className="relative flex aspect-square w-full items-center justify-center">
-            <div className="absolute left-0 top-0 grid h-3/4 w-3/4 grid-cols-6 grid-rows-6 gap-0.5 bg-background-2">
+            <div className="absolute left-0 top-0 grid h-3/4 w-3/4 grid-cols-6 grid-rows-6 gap-0.5 bg-transparent">
               <AnimatedTrainingBoards inView={inView} />
             </div>
             <motion.div
-              className="absolute bottom-0 right-0 z-10 h-3/4 w-3/4 overflow-hidden border border-background-3/20 bg-background-1 shadow-lg"
+              className="absolute bottom-0 right-0 z-10 h-3/4 w-3/4 overflow-hidden border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md"
               initial={{ scale: 0.95, opacity: 0 }}
               animate={{ scale: 1, opacity: 1 }}
               transition={{ duration: 0.5 }}
diff --git a/src/components/Home/Sections/TrainSection.tsx b/src/components/Home/Sections/TrainSection.tsx
index 2e8c095e..5a88dcaa 100644
--- a/src/components/Home/Sections/TrainSection.tsx
+++ b/src/components/Home/Sections/TrainSection.tsx
@@ -213,7 +213,7 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
   return (
     <section
       id={id}
-      className="relative w-full flex-col items-center overflow-hidden py-10 md:py-16"
+      className="relative w-full flex-col items-center overflow-hidden bg-transparent py-10 md:py-16"
       ref={ref}
     >
       <div className="z-10 mx-auto flex w-full max-w-[95%] flex-col items-center px-2 md:max-w-[90%] md:flex-row md:gap-12 md:px-4 lg:gap-16">
@@ -253,15 +253,15 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
           animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
           transition={{ duration: 0.4, ease: 'easeOut' }}
         >
-          <div className="flex flex-col overflow-hidden rounded-lg bg-background-2 shadow-xl">
-            <div className="border-b border-background-3/20 px-4 pt-4">
+          <div className="flex flex-col overflow-hidden rounded-lg border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
+            <div className="border-b border-white/10 px-4 pt-4">
               <div className="flex items-center justify-between">
                 <div className="flex items-center">
                   <div className="mr-2 h-2 w-2 rounded-full bg-human-3" />
                   <p className="font-medium text-primary">Tactical Puzzle</p>
                 </div>
                 <div className="flex gap-2">
-                  <span className="rounded bg-background-3/80 px-2 py-1 text-xs text-primary/60">
+                  <span className="rounded bg-white/10 px-2 py-1 text-xs text-primary/70">
                     Intermediate
                   </span>
                 </div>
@@ -280,7 +280,7 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
                     transform: 'translateZ(0)',
                   }}
                 >
-                  <div className="flex flex-col overflow-hidden rounded border border-white/10">
+                  <div className="flex flex-col overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
                     <div
                       className="relative w-full"
                       style={{
@@ -312,7 +312,7 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
                   }
                   transition={{ duration: 0.3, delay: 0.5 }}
                 >
-                  <div className="h-full w-full rounded border border-white/10 bg-background-1/60">
+                  <div className="h-full w-full rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
                     <MovesByRating
                       moves={puzzleMockData.movesByRating}
                       colorSanMapping={puzzleMockData.colorSanMapping}
@@ -323,7 +323,7 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
 
                 {/* Position Analysis */}
                 <motion.div
-                  className="mt-3 overflow-hidden rounded border border-white/10 bg-background-1/60 p-3"
+                  className="mt-3 overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 p-3 backdrop-blur-md"
                   initial={{ opacity: 0, y: 20 }}
                   animate={
                     inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 7851da2d..8527c5d3 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -44,18 +44,54 @@ const Home: NextPage = () => {
       <GameCarousel />
       <PageNavigation />
       <div ref={featuresRef}>
-        <div className="bg-background-1">
+        {/* Play Section with subtle radial overlays */}
+        <div className="relative bg-transparent">
+          <div
+            className="pointer-events-none absolute inset-0"
+            style={{
+              background:
+                'radial-gradient(ellipse 90% 80% at 0% 20%, rgba(239, 68, 68, 0.08) 0%, transparent 72%), radial-gradient(ellipse 70% 60% at 100% 60%, rgba(239, 68, 68, 0.06) 0%, transparent 75%)',
+            }}
+          />
           <PlaySection id="play-section" />
         </div>
-        <div className="bg-background-2">
+
+        {/* Analysis Section with mirrored edge glows */}
+        <div className="relative bg-transparent">
+          <div
+            className="pointer-events-none absolute inset-0"
+            style={{
+              background:
+                'radial-gradient(ellipse 95% 85% at 100% 15%, rgba(239, 68, 68, 0.08) 0%, transparent 72%), radial-gradient(ellipse 80% 70% at 0% 70%, rgba(239, 68, 68, 0.06) 0%, transparent 75%)',
+            }}
+          />
           <AnalysisSection id="analysis-section" />
         </div>
-        <div className="bg-background-1">
+
+        {/* Train Section with lower-edge emphasis */}
+        <div className="relative bg-transparent">
+          <div
+            className="pointer-events-none absolute inset-0"
+            style={{
+              background:
+                'radial-gradient(ellipse 100% 85% at 0% 90%, rgba(239, 68, 68, 0.07) 0%, transparent 75%), radial-gradient(ellipse 75% 65% at 100% 40%, rgba(239, 68, 68, 0.05) 0%, transparent 75%)',
+            }}
+          />
           <TrainSection id="train-section" />
         </div>
-        <div className="bg-background-2">
+
+        {/* Additional Features with diagonal accents */}
+        <div className="relative bg-transparent">
+          <div
+            className="pointer-events-none absolute inset-0"
+            style={{
+              background:
+                'radial-gradient(ellipse 90% 80% at 100% 85%, rgba(239, 68, 68, 0.08) 0%, transparent 72%), radial-gradient(ellipse 80% 70% at 0% 10%, rgba(239, 68, 68, 0.06) 0%, transparent 75%)',
+            }}
+          />
           <AdditionalFeaturesSection id="more-features" />
         </div>
+
         <AboutMaia />
       </div>
     </>

From 2f5b88c24596cf3d4f0f77af7e0e53e33b4ddbf5 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Wed, 10 Sep 2025 15:28:35 -0400
Subject: [PATCH 17/17] fix: lint errors

---
 src/components/Analysis/AnalysisSidebar.tsx   | 20 +++----
 src/components/Analysis/BlunderMeter.tsx      |  4 +-
 src/components/Analysis/BroadcastGameList.tsx |  7 ++-
 .../Analysis/ConfigurableScreens.tsx          |  2 +-
 src/components/Common/PlayerInfo.tsx          |  4 +-
 .../Home/Sections/AnalysisSection.tsx         | 12 ++--
 src/components/Home/Sections/PlaySection.tsx  |  2 +-
 src/components/Home/Sections/TrainSection.tsx |  8 +--
 .../Openings/OpeningDrillSidebar.tsx          |  4 +-
 src/components/Puzzles/PuzzleLog.tsx          |  8 ++-
 src/components/Turing/TuringLog.tsx           | 12 +++-
 src/components/Turing/TuringSubmission.tsx    | 18 ++++--
 src/pages/blog/index.tsx                      | 58 +++++++++----------
 src/pages/openings/index.tsx                  |  3 +-
 src/pages/turing.tsx                          | 21 +++++--
 15 files changed, 113 insertions(+), 70 deletions(-)

diff --git a/src/components/Analysis/AnalysisSidebar.tsx b/src/components/Analysis/AnalysisSidebar.tsx
index 745eb2ab..7a8b25af 100644
--- a/src/components/Analysis/AnalysisSidebar.tsx
+++ b/src/components/Analysis/AnalysisSidebar.tsx
@@ -84,9 +84,9 @@ export const AnalysisSidebar: React.FC<Props> = ({
       <div className="hidden xl:flex xl:h-full xl:flex-col xl:gap-3">
         {/* Combined Highlight + MovesByRating container */}
         <div className="desktop-analysis-big-row-1-container relative flex gap-3">
-          <div className="border-glassBorder bg-glass-strong flex h-full w-full flex-col overflow-hidden rounded-md border backdrop-blur-md">
+          <div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass-strong backdrop-blur-md">
             {/* Merged header with toggle */}
-            <div className="border-glassBorder flex h-10 min-h-10 items-center justify-between border-b bg-transparent px-4 text-white/90">
+            <div className="flex h-10 min-h-10 items-center justify-between border-b border-glassBorder bg-transparent px-4 text-white/90">
               <div className="flex items-center gap-2">
                 <span className="material-symbols-outlined text-xl text-white/80">
                   analytics
@@ -95,7 +95,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
               </div>
               <button
                 onClick={handleToggleAnalysis}
-                className={`border-glassBorder bg-glass flex items-center gap-1 rounded-md border px-2 py-1 text-xs transition-colors ${
+                className={`flex items-center gap-1 rounded-md border border-glassBorder bg-glass px-2 py-1 text-xs transition-colors ${
                   analysisEnabled ? 'text-white' : 'text-white/80'
                 } hover:bg-glass-hover`}
               >
@@ -161,7 +161,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
           </div>
           {!analysisEnabled && (
             <div
-              className="absolute left-0 right-0 bottom-0 top-10 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
+              className="pointer-events-none absolute bottom-0 left-0 right-0 top-10 z-10 flex items-center justify-center overflow-hidden"
               style={{
                 background:
                   'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
@@ -207,7 +207,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
           />
           {!analysisEnabled && (
             <div
-              className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
+              className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center overflow-hidden"
               style={{
                 background:
                   'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
@@ -230,9 +230,9 @@ export const AnalysisSidebar: React.FC<Props> = ({
       {/* Smaller screens: 3-row layout */}
       <div className="flex h-full flex-col gap-3 xl:hidden">
         {/* Row 1: Combined Highlight + BlunderMeter container */}
-        <div className="desktop-analysis-small-row-1-container border-glassBorder bg-glass-strong relative flex overflow-hidden rounded-md border backdrop-blur-md">
+        <div className="desktop-analysis-small-row-1-container relative flex overflow-hidden rounded-md border border-glassBorder bg-glass-strong backdrop-blur-md">
           {/* Merged header with toggle (mobile/smaller screens) */}
-          <div className="border-glassBorder absolute left-0 top-0 z-10 flex h-10 w-full items-center justify-between border-b bg-transparent px-3 text-white/90 backdrop-blur-md">
+          <div className="absolute left-0 top-0 z-10 flex h-10 w-full items-center justify-between border-b border-glassBorder bg-transparent px-3 text-white/90 backdrop-blur-md">
             <div className="flex items-center gap-2">
               <span className="material-symbols-outlined text-xl text-white/80">
                 analytics
@@ -318,7 +318,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
           </div>
           {!analysisEnabled && (
             <div
-              className="absolute left-0 right-0 bottom-0 top-10 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
+              className="pointer-events-none absolute bottom-0 left-0 right-0 top-10 z-10 flex items-center justify-center overflow-hidden"
               style={{
                 background:
                   'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
@@ -353,7 +353,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
           </div>
           {!analysisEnabled && (
             <div
-              className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
+              className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center overflow-hidden"
               style={{
                 background:
                   'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
@@ -384,7 +384,7 @@ export const AnalysisSidebar: React.FC<Props> = ({
           </div>
           {!analysisEnabled && (
             <div
-              className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden pointer-events-none"
+              className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center overflow-hidden"
               style={{
                 background:
                   'radial-gradient(ellipse 110% 90% at 20% 10%, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.06) 35%, transparent 75%), rgba(23, 18, 20, 0.9)',
diff --git a/src/components/Analysis/BlunderMeter.tsx b/src/components/Analysis/BlunderMeter.tsx
index de6cb455..38fa2cb0 100644
--- a/src/components/Analysis/BlunderMeter.tsx
+++ b/src/components/Analysis/BlunderMeter.tsx
@@ -64,7 +64,7 @@ const DesktopBlunderMeter: React.FC<Props> = ({
   return (
     <div
       id="analysis-blunder-meter"
-      className={`flex h-64 max-h-full w-full flex-col gap-2 overflow-hidden rounded-md ${showContainer ? 'border-glassBorder bg-glass border p-3 backdrop-blur-md md:w-auto md:min-w-[40%] md:max-w-[40%]' : ''} md:h-full`}
+      className={`flex h-64 max-h-full w-full flex-col gap-2 overflow-hidden rounded-md ${showContainer ? 'border border-glassBorder bg-glass p-3 backdrop-blur-md md:w-auto md:min-w-[40%] md:max-w-[40%]' : ''} md:h-full`}
     >
       <p className="text-sm text-primary xl:text-base">Blunder Meter</p>
       <div className="flex h-full w-full flex-col overflow-hidden">
@@ -119,7 +119,7 @@ const MobileBlunderMeter: React.FC<Props> = ({
   return (
     <div
       id="analysis-blunder-meter"
-      className={`flex w-full flex-col gap-2 overflow-hidden rounded-md ${showContainer ? 'border-glassBorder bg-glass border p-3 backdrop-blur-md' : ''}`}
+      className={`flex w-full flex-col gap-2 overflow-hidden rounded-md ${showContainer ? 'border border-glassBorder bg-glass p-3 backdrop-blur-md' : ''}`}
     >
       <p className="text-base text-primary">Blunder Meter</p>
       <div className="flex w-full flex-col gap-1">
diff --git a/src/components/Analysis/BroadcastGameList.tsx b/src/components/Analysis/BroadcastGameList.tsx
index 3df0f907..ba285744 100644
--- a/src/components/Analysis/BroadcastGameList.tsx
+++ b/src/components/Analysis/BroadcastGameList.tsx
@@ -85,7 +85,8 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
                 : 'truncate text-sm font-semibold text-white/95'
             }
           >
-            {broadcastController.currentBroadcast?.tour.name || 'Live Broadcast'}
+            {broadcastController.currentBroadcast?.tour.name ||
+              'Live Broadcast'}
           </h3>
         </div>
 
@@ -163,7 +164,9 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
                 >
                   <div
                     className={`flex h-full w-9 items-center justify-center ${
-                      isSelected ? 'bg-white/10' : 'bg-transparent group-hover:bg-white/5'
+                      isSelected
+                        ? 'bg-white/10'
+                        : 'bg-transparent group-hover:bg-white/5'
                     }`}
                   >
                     <p className="text-sm text-white/70">{index + 1}</p>
diff --git a/src/components/Analysis/ConfigurableScreens.tsx b/src/components/Analysis/ConfigurableScreens.tsx
index 06c27df7..51778dd6 100644
--- a/src/components/Analysis/ConfigurableScreens.tsx
+++ b/src/components/Analysis/ConfigurableScreens.tsx
@@ -120,7 +120,7 @@ export const ConfigurableScreens: React.FC<Props> = ({
 
   // Normal state with configure/export tabs
   return (
-    <div className="bg-glass flex w-full flex-1 flex-col overflow-hidden md:w-auto md:rounded">
+    <div className="flex w-full flex-1 flex-col overflow-hidden bg-glass md:w-auto md:rounded">
       <div className="flex flex-row border-b border-white/10">
         {screens.map((s) => {
           const selected = s.id === screen.id
diff --git a/src/components/Common/PlayerInfo.tsx b/src/components/Common/PlayerInfo.tsx
index 8c643c10..3b4b42f3 100644
--- a/src/components/Common/PlayerInfo.tsx
+++ b/src/components/Common/PlayerInfo.tsx
@@ -65,7 +65,9 @@ export const PlayerInfo: React.FC<PlayerInfoProps> = ({
           : 'rounded-md'
 
   return (
-    <div className={`flex h-10 w-full items-center justify-between ${roundedClass} border border-glassBorder bg-glass px-4 backdrop-blur-md`}>
+    <div
+      className={`flex h-10 w-full items-center justify-between ${roundedClass} border border-glassBorder bg-glass px-4 backdrop-blur-md`}
+    >
       <div className="flex items-center gap-1.5">
         <div
           className={`h-2.5 w-2.5 rounded-full ${color === 'white' ? 'bg-white' : 'border bg-black'}`}
diff --git a/src/components/Home/Sections/AnalysisSection.tsx b/src/components/Home/Sections/AnalysisSection.tsx
index a795e547..e4f3a475 100644
--- a/src/components/Home/Sections/AnalysisSection.tsx
+++ b/src/components/Home/Sections/AnalysisSection.tsx
@@ -226,11 +226,11 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
           animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
           transition={{ duration: 0.4, ease: 'easeOut' }}
         >
-          <div className="relative w-full overflow-hidden rounded-lg border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
+          <div className="from-white/8 to-white/4 relative w-full overflow-hidden rounded-lg border border-white/10 bg-gradient-to-br backdrop-blur-md">
             <div className="flex flex-col gap-3 p-3">
               <div className="flex flex-col gap-3 md:flex-row">
                 <div className="flex flex-col md:w-1/2">
-                  <div className="flex flex-col overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
+                  <div className="from-white/8 to-white/4 flex flex-col overflow-hidden rounded border border-white/10 bg-gradient-to-br backdrop-blur-md">
                     <div className="w-full rounded-t-sm bg-white/5 p-2 text-left text-sm font-medium text-primary/80">
                       Spassky, Boris V.
                     </div>
@@ -246,7 +246,7 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
                 </div>
                 <div className="flex flex-col gap-3 md:w-1/2">
                   <motion.div
-                    className="min-h-0 flex-1 overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md"
+                    className="from-white/8 to-white/4 min-h-0 flex-1 overflow-hidden rounded border border-white/10 bg-gradient-to-br backdrop-blur-md"
                     initial={{ opacity: 0, y: 20 }}
                     animate={
                       inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
@@ -274,7 +274,7 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
                     />
                   </motion.div>
                   <motion.div
-                    className="flex-shrink-0 overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md"
+                    className="from-white/8 to-white/4 flex-shrink-0 overflow-hidden rounded border border-white/10 bg-gradient-to-br backdrop-blur-md"
                     initial={{ opacity: 0, y: 20 }}
                     animate={
                       inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
@@ -294,7 +294,7 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
                   }
                   transition={{ duration: 0.3, delay: 0.6 }}
                 >
-                  <div className="h-full w-full overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
+                  <div className="from-white/8 to-white/4 h-full w-full overflow-hidden rounded border border-white/10 bg-gradient-to-br backdrop-blur-md">
                     <MovesByRating
                       moves={analysisMockData.movesByRating}
                       colorSanMapping={analysisMockData.colorSanMapping}
@@ -303,7 +303,7 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
                   </div>
                 </motion.div>
                 <motion.div
-                  className="h-64 overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md md:w-1/2"
+                  className="from-white/8 to-white/4 h-64 overflow-hidden rounded border border-white/10 bg-gradient-to-br backdrop-blur-md md:w-1/2"
                   initial={{ opacity: 0, y: 20 }}
                   animate={
                     inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
diff --git a/src/components/Home/Sections/PlaySection.tsx b/src/components/Home/Sections/PlaySection.tsx
index 4d5d936f..5e16431e 100644
--- a/src/components/Home/Sections/PlaySection.tsx
+++ b/src/components/Home/Sections/PlaySection.tsx
@@ -88,7 +88,7 @@ export const PlaySection = ({ id }: PlaySectionProps) => {
               <AnimatedTrainingBoards inView={inView} />
             </div>
             <motion.div
-              className="absolute bottom-0 right-0 z-10 h-3/4 w-3/4 overflow-hidden border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md"
+              className="from-white/8 to-white/4 absolute bottom-0 right-0 z-10 h-3/4 w-3/4 overflow-hidden border border-white/10 bg-gradient-to-br backdrop-blur-md"
               initial={{ scale: 0.95, opacity: 0 }}
               animate={{ scale: 1, opacity: 1 }}
               transition={{ duration: 0.5 }}
diff --git a/src/components/Home/Sections/TrainSection.tsx b/src/components/Home/Sections/TrainSection.tsx
index 5a88dcaa..dd1c7e3f 100644
--- a/src/components/Home/Sections/TrainSection.tsx
+++ b/src/components/Home/Sections/TrainSection.tsx
@@ -253,7 +253,7 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
           animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
           transition={{ duration: 0.4, ease: 'easeOut' }}
         >
-          <div className="flex flex-col overflow-hidden rounded-lg border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
+          <div className="from-white/8 to-white/4 flex flex-col overflow-hidden rounded-lg border border-white/10 bg-gradient-to-br backdrop-blur-md">
             <div className="border-b border-white/10 px-4 pt-4">
               <div className="flex items-center justify-between">
                 <div className="flex items-center">
@@ -280,7 +280,7 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
                     transform: 'translateZ(0)',
                   }}
                 >
-                  <div className="flex flex-col overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
+                  <div className="from-white/8 to-white/4 flex flex-col overflow-hidden rounded border border-white/10 bg-gradient-to-br backdrop-blur-md">
                     <div
                       className="relative w-full"
                       style={{
@@ -312,7 +312,7 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
                   }
                   transition={{ duration: 0.3, delay: 0.5 }}
                 >
-                  <div className="h-full w-full rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 backdrop-blur-md">
+                  <div className="from-white/8 to-white/4 h-full w-full rounded border border-white/10 bg-gradient-to-br backdrop-blur-md">
                     <MovesByRating
                       moves={puzzleMockData.movesByRating}
                       colorSanMapping={puzzleMockData.colorSanMapping}
@@ -323,7 +323,7 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
 
                 {/* Position Analysis */}
                 <motion.div
-                  className="mt-3 overflow-hidden rounded border border-white/10 bg-gradient-to-br from-white/8 to-white/4 p-3 backdrop-blur-md"
+                  className="from-white/8 to-white/4 mt-3 overflow-hidden rounded border border-white/10 bg-gradient-to-br p-3 backdrop-blur-md"
                   initial={{ opacity: 0, y: 20 }}
                   animate={
                     inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
diff --git a/src/components/Openings/OpeningDrillSidebar.tsx b/src/components/Openings/OpeningDrillSidebar.tsx
index 79f0d2b1..6061f7ab 100644
--- a/src/components/Openings/OpeningDrillSidebar.tsx
+++ b/src/components/Openings/OpeningDrillSidebar.tsx
@@ -45,7 +45,9 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
     <div className={containerClass}>
       {/* Current Drill Info */}
       <div className={sectionHeaderClass}>
-        <h2 className="mb-2 text-base font-semibold text-white/95">Current Drill</h2>
+        <h2 className="mb-2 text-base font-semibold text-white/95">
+          Current Drill
+        </h2>
         {currentDrill ? (
           <div className="space-y-2">
             <div>
diff --git a/src/components/Puzzles/PuzzleLog.tsx b/src/components/Puzzles/PuzzleLog.tsx
index 085560e4..e1478cc3 100644
--- a/src/components/Puzzles/PuzzleLog.tsx
+++ b/src/components/Puzzles/PuzzleLog.tsx
@@ -24,7 +24,13 @@ export const PuzzleLog: React.FC<Props> = ({
           : 'flex h-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md'
       }
     >
-      <div className={embedded ? 'border-b border-glassBorder px-3 py-2' : 'border-b border-glassBorder px-3 py-2'}>
+      <div
+        className={
+          embedded
+            ? 'border-b border-glassBorder px-3 py-2'
+            : 'border-b border-glassBorder px-3 py-2'
+        }
+      >
         <h3 className="text-sm font-medium text-primary">Puzzle History</h3>
       </div>
       <div className="red-scrollbar flex flex-1 flex-col overflow-y-auto">
diff --git a/src/components/Turing/TuringLog.tsx b/src/components/Turing/TuringLog.tsx
index 3fe451e3..67adf5eb 100644
--- a/src/components/Turing/TuringLog.tsx
+++ b/src/components/Turing/TuringLog.tsx
@@ -1,7 +1,9 @@
 import { useContext } from 'react'
 import { TuringControllerContext } from 'src/contexts'
 
-export const TuringLog: React.FC<{ embedded?: boolean }> = ({ embedded = false }) => {
+export const TuringLog: React.FC<{ embedded?: boolean }> = ({
+  embedded = false,
+}) => {
   const { games, gameIds, setCurrentIndex, currentIndex } = useContext(
     TuringControllerContext,
   )
@@ -14,7 +16,13 @@ export const TuringLog: React.FC<{ embedded?: boolean }> = ({ embedded = false }
           : 'flex h-full flex-col overflow-hidden rounded bg-background-1'
       }
     >
-      <div className={embedded ? 'border-b border-glassBorder px-3 py-2' : 'border-b border-white border-opacity-10 px-3 py-2'}>
+      <div
+        className={
+          embedded
+            ? 'border-b border-glassBorder px-3 py-2'
+            : 'border-b border-white border-opacity-10 px-3 py-2'
+        }
+      >
         <h3 className="text-sm font-medium text-primary">Game History</h3>
       </div>
       <div className="red-scrollbar flex flex-1 flex-col overflow-y-auto">
diff --git a/src/components/Turing/TuringSubmission.tsx b/src/components/Turing/TuringSubmission.tsx
index 25cbeb4b..936edf23 100644
--- a/src/components/Turing/TuringSubmission.tsx
+++ b/src/components/Turing/TuringSubmission.tsx
@@ -32,7 +32,7 @@ export const TuringSubmission = ({
         className={
           embedded
             ? 'flex flex-col gap-5 border-t border-glassBorder bg-transparent p-3'
-            : 'flex flex-col gap-5 bg-background-1 p-4 rounded'
+            : 'flex flex-col gap-5 rounded bg-background-1 p-4'
         }
       >
         <h2 className="text-2xl">
@@ -72,8 +72,18 @@ export const TuringSubmission = ({
     )
 
   return (
-    <div className={embedded ? 'flex flex-col gap-1 border-t border-glassBorder' : 'flex flex-col gap-1'}>
-      <div className={embedded ? 'flex flex-col gap-3 p-3' : 'flex flex-col gap-3 p-4'}>
+    <div
+      className={
+        embedded
+          ? 'flex flex-col gap-1 border-t border-glassBorder'
+          : 'flex flex-col gap-1'
+      }
+    >
+      <div
+        className={
+          embedded ? 'flex flex-col gap-3 p-3' : 'flex flex-col gap-3 p-4'
+        }
+      >
         <h2 className="text-2xl font-semibold">Who is the bot?</h2>
         <div className="flex flex-1 flex-row items-center justify-between">
           <button
@@ -119,7 +129,7 @@ export const TuringSubmission = ({
       <textarea
         className={`${
           embedded
-            ? 'border-glassBorder bg-transparent p-2 text-sm text-secondary outline-none placeholder:text-secondary border rounded-md'
+            ? 'rounded-md border border-glassBorder bg-transparent p-2 text-sm text-secondary outline-none placeholder:text-secondary'
             : 'rounded bg-background-2 p-2 text-sm text-secondary outline-none placeholder:text-secondary'
         }`}
         placeholder="Optional justification"
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index f0d10bd9..8bf2dbe1 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -54,36 +54,36 @@ export default function Blog({ posts }: { posts: Post[] }) {
       <div className="relative mx-auto flex h-full w-[90%] flex-col items-start justify-center gap-5 py-[10%] md:py-[2%]">
         <h1 className="text-4xl font-bold">Blog</h1>
         <div className="flex w-full flex-col gap-6 overflow-x-hidden">
-        {posts.map((post, index) => (
-          <Link href={`/blog/${post.id}`} key={index}>
-            <div className="flex w-full cursor-pointer flex-col gap-2 overflow-hidden hover:opacity-80 md:w-auto md:max-w-2xl">
-              <div className="flex flex-col">
-                <p>
-                  {new Date(post.date).toLocaleDateString('en-US', {
-                    month: 'short',
-                    day: 'numeric',
-                    year: 'numeric',
-                  })}
-                </p>
-                <h2 className="text-2xl font-semibold">{post.title}</h2>
-                <p>{post.excerpt}</p>
+          {posts.map((post, index) => (
+            <Link href={`/blog/${post.id}`} key={index}>
+              <div className="flex w-full cursor-pointer flex-col gap-2 overflow-hidden hover:opacity-80 md:w-auto md:max-w-2xl">
+                <div className="flex flex-col">
+                  <p>
+                    {new Date(post.date).toLocaleDateString('en-US', {
+                      month: 'short',
+                      day: 'numeric',
+                      year: 'numeric',
+                    })}
+                  </p>
+                  <h2 className="text-2xl font-semibold">{post.title}</h2>
+                  <p>{post.excerpt}</p>
+                </div>
+                <div className="no-scrollbar flex items-center gap-2 overflow-x-scroll">
+                  {post.tags.map((tag, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center justify-center gap-2 rounded-sm bg-background-1 px-3 py-1"
+                    >
+                      <div className="h-2 w-2 rounded-full bg-human-3" />
+                      <p className="whitespace-nowrap text-sm text-secondary">
+                        {tag}
+                      </p>
+                    </div>
+                  ))}
+                </div>
               </div>
-              <div className="no-scrollbar flex items-center gap-2 overflow-x-scroll">
-                {post.tags.map((tag, index) => (
-                  <div
-                    key={index}
-                    className="flex items-center justify-center gap-2 rounded-sm bg-background-1 px-3 py-1"
-                  >
-                    <div className="h-2 w-2 rounded-full bg-human-3" />
-                    <p className="whitespace-nowrap text-sm text-secondary">
-                      {tag}
-                    </p>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </Link>
-        ))}
+            </Link>
+          ))}
         </div>
       </div>
     </>
diff --git a/src/pages/openings/index.tsx b/src/pages/openings/index.tsx
index 049a7e2f..6cb78601 100644
--- a/src/pages/openings/index.tsx
+++ b/src/pages/openings/index.tsx
@@ -519,7 +519,8 @@ const OpeningsPage: NextPage = () => {
                     controller.currentDrillGame?.openingEndNode || undefined
                   }
                   showAnnotations={
-                    controller.analysisEnabled || controller.continueAnalyzingMode
+                    controller.analysisEnabled ||
+                    controller.continueAnalyzingMode
                   }
                   showVariations={controller.continueAnalyzingMode}
                   embedded
diff --git a/src/pages/turing.tsx b/src/pages/turing.tsx
index 2371d273..b8709d32 100644
--- a/src/pages/turing.tsx
+++ b/src/pages/turing.tsx
@@ -171,8 +171,13 @@ const Turing: React.FC<Props> = (props: Props) => {
             variants={itemVariants}
             className="flex h-[75vh] min-w-64 flex-grow flex-col justify-between"
           >
-            <div className="border-glassBorder bg-glass flex h-full w-full flex-col overflow-hidden rounded-md border backdrop-blur-md">
-              <GameInfo title="Bot or Not" icon="smart_toy" type="turing" embedded>
+            <div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md">
+              <GameInfo
+                title="Bot or Not"
+                icon="smart_toy"
+                type="turing"
+                embedded
+              >
                 {Info}
               </GameInfo>
               <div className="relative bottom-0 flex h-full min-h-[38px] flex-1 flex-col justify-end overflow-hidden">
@@ -205,7 +210,10 @@ const Turing: React.FC<Props> = (props: Props) => {
                   heightClass="h-full"
                 />
               </div>
-              <div id="turing-submission" className="border-t border-glassBorder">
+              <div
+                id="turing-submission"
+                className="border-t border-glassBorder"
+              >
                 <TuringSubmission rating={stats.rating ?? 0} embedded />
               </div>
               <div className="flex-none border-t border-glassBorder">
@@ -259,7 +267,7 @@ const Turing: React.FC<Props> = (props: Props) => {
               orientation={controller.orientation}
             />
           </div>
-            <div className="flex h-auto w-full flex-col gap-2">
+          <div className="flex h-auto w-full flex-col gap-2">
             <div className="flex w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md">
               <div className="relative bottom-0 flex-1 overflow-hidden">
                 <MovesContainer
@@ -283,7 +291,10 @@ const Turing: React.FC<Props> = (props: Props) => {
                   embedded
                 />
               </div>
-              <div id="turing-submission" className="border-t border-glassBorder w-full">
+              <div
+                id="turing-submission"
+                className="w-full border-t border-glassBorder"
+              >
                 <TuringSubmission rating={stats.rating ?? 0} embedded />
               </div>
             </div>