From 6ac59b714a3c831077cd2e25cf6384bec39a4849 Mon Sep 17 00:00:00 2001
From: Arman Shaikh <arman.shaikh.work@gmail.com>
Date: Sun, 1 Mar 2026 10:45:53 +0000
Subject: [PATCH 1/3] refactor: simplify logic for disabling
 ProcrastinationDesktop component

---
 src/pages/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a353c31..9c7a03a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -378,7 +378,7 @@ const Index = () => {
   const shouldHideProcrastinationDesktop =
     Boolean(showPunishment) || isGameActive || state.stage === "outlook";
   const shouldDisableProcrastinationDesktop =
-    showBoss || state.stage === "teams" || state.stage === "zoom";
+    showBoss;
 
   return (
     <div

From 4f2761175165ac3ab8d0afa8c256aa4f9d6199c1 Mon Sep 17 00:00:00 2001
From: Arman Shaikh <arman.shaikh.work@gmail.com>
Date: Sun, 1 Mar 2026 10:48:21 +0000
Subject: [PATCH 2/3] refactor: update stage delay constants and enhance
 ProcrastinationDesktop visibility logic

---
 src/pages/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9c7a03a..9ae20e0 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -18,8 +18,8 @@ import { TeamsNotif } from "@/components/game/TeamsNotif";
 import { OutlookMockup } from "@/components/game/OutlookMockup";
 import { Video, LayoutList, Mail } from "lucide-react";
 
-const STAGE_DELAY_MS = 3000;
-const SECOND_DELAY_MS = 3000;
+const STAGE_DELAY_MS = 5000;
+const SECOND_DELAY_MS = 5000;
 const STAGE_METER_POINT_CUTOF = 9;
 
 const Index = () => {
@@ -378,7 +378,7 @@ const Index = () => {
   const shouldHideProcrastinationDesktop =
     Boolean(showPunishment) || isGameActive || state.stage === "outlook";
   const shouldDisableProcrastinationDesktop =
-    showBoss;
+    showBoss || state.stage === "teams" || state.stage === "zoom";
 
   return (
     <div

From 8c4183bc893fdeb2ca4f414c0ab5b6b434f20ae3 Mon Sep 17 00:00:00 2001
From: Arman Shaikh <arman.shaikh.work@gmail.com>
Date: Sun, 1 Mar 2026 10:49:19 +0000
Subject: [PATCH 3/3] Refactor code for improved readability and consistency

- Updated README.md to maintain formatting consistency for team member descriptions.
- Refactored BossBaby component for better destructuring of props.
- Improved formatting in DesktopIcons, EndScreen, IntroScreen, OutlookMockup, ProcrastinationDesktop, PunishmentScreen, TetrisGame, and ErrorPage components for better readability.
- Enhanced index.tsx for clearer state management and function definitions.
- Adjusted CSS for consistent cursor styling across various elements.
- Updated vite.config.ts for consistent formatting in plugin configuration.
---
 README.md                                     |   2 +-
 src/components/game/BossBaby.tsx              |  18 ++-
 src/components/game/DesktopIcons.tsx          |  16 ++-
 src/components/game/EndScreen.tsx             |   8 +-
 src/components/game/IntroScreen.tsx           |  34 +++---
 src/components/game/OutlookMockup.tsx         |   8 +-
 .../game/ProcrastinationDesktop.tsx           |  53 ++++++---
 src/components/game/PunishmentScreen.tsx      |   4 +-
 src/components/game/TetrisGame.tsx            |  33 +++++-
 src/index.css                                 |  94 +++++++++++-----
 src/pages/ErrorPage.tsx                       | 106 +++++++++---------
 src/pages/index.tsx                           |  64 ++++++++---
 vite.config.ts                                |   5 +-
 13 files changed, 282 insertions(+), 163 deletions(-)

diff --git a/README.md b/README.md
index fadbc63..9293132 100644
--- a/README.md
+++ b/README.md
@@ -54,7 +54,7 @@ We are a group of placement students currently being "wonderful" in the real wor
 - **[Charis Drain]** - Head of Corporate Yap
 - **[Himani Patney]** - Jira Ticket Architect
 - **[Vidhi Jalan]** - Boss Baby Handler
-- **[Lemar Tokham]** - Professional Email Ignorer 
+- **[Lemar Tokham]** - Professional Email Ignorer
 
 ---
 
diff --git a/src/components/game/BossBaby.tsx b/src/components/game/BossBaby.tsx
index 3079e50..99a8d6c 100644
--- a/src/components/game/BossBaby.tsx
+++ b/src/components/game/BossBaby.tsx
@@ -9,7 +9,13 @@ interface BossBabyProps {
   dismissLabel?: string;
 }
 
-export const BossBaby: React.FC<BossBabyProps> = ({ message, onDismiss, autoAdvanceDelay, altButton, dismissLabel }) => {
+export const BossBaby: React.FC<BossBabyProps> = ({
+  message,
+  onDismiss,
+  autoAdvanceDelay,
+  altButton,
+  dismissLabel,
+}) => {
   const [displayedText, setDisplayedText] = useState("");
   const [index, setIndex] = useState(0);
 
@@ -26,7 +32,11 @@ export const BossBaby: React.FC<BossBabyProps> = ({ message, onDismiss, autoAdva
 
   // Auto-advance after typing completes
   useEffect(() => {
-    if (autoAdvanceDelay !== undefined && displayedText === message && message.length > 0) {
+    if (
+      autoAdvanceDelay !== undefined &&
+      displayedText === message &&
+      message.length > 0
+    ) {
       const t = setTimeout(onDismiss, autoAdvanceDelay);
       return () => clearTimeout(t);
     }
@@ -97,7 +107,9 @@ export const BossBaby: React.FC<BossBabyProps> = ({ message, onDismiss, autoAdva
               </div>
 
               {/* Name Tag */}
-              <span className="text-sm font-bold text-card-foreground mt-2">Boss Baby</span>
+              <span className="text-sm font-bold text-card-foreground mt-2">
+                Boss Baby
+              </span>
             </div>
           </div>
         </div>
diff --git a/src/components/game/DesktopIcons.tsx b/src/components/game/DesktopIcons.tsx
index 0fd7610..4028b89 100644
--- a/src/components/game/DesktopIcons.tsx
+++ b/src/components/game/DesktopIcons.tsx
@@ -9,12 +9,16 @@ import {
 } from "lucide-react";
 
 const icons = [
-  { icon: <Monitor size={26} />,       label: "My Computer",        bg: "#1a6db5" },
-  { icon: <Trash2 size={26} />,        label: "Recycle Bin",        bg: "#6b7280" },
-  { icon: <FolderOpen size={26} />,    label: "My Documents",       bg: "#d97706" },
-  { icon: <FileSpreadsheet size={26}/>, label: "Sprint_FINAL_v3.xls", bg: "#16a34a" },
-  { icon: <MessageSquare size={26} />, label: "Slack",              bg: "#7c3aed" },
-  { icon: <Calendar size={26} />,      label: "Standup.exe",        bg: "#dc2626" },
+  { icon: <Monitor size={26} />, label: "My Computer", bg: "#1a6db5" },
+  { icon: <Trash2 size={26} />, label: "Recycle Bin", bg: "#6b7280" },
+  { icon: <FolderOpen size={26} />, label: "My Documents", bg: "#d97706" },
+  {
+    icon: <FileSpreadsheet size={26} />,
+    label: "Sprint_FINAL_v3.xls",
+    bg: "#16a34a",
+  },
+  { icon: <MessageSquare size={26} />, label: "Slack", bg: "#7c3aed" },
+  { icon: <Calendar size={26} />, label: "Standup.exe", bg: "#dc2626" },
 ];
 
 export const DesktopIcons: React.FC = () => (
diff --git a/src/components/game/EndScreen.tsx b/src/components/game/EndScreen.tsx
index 15b045f..241b424 100644
--- a/src/components/game/EndScreen.tsx
+++ b/src/components/game/EndScreen.tsx
@@ -38,9 +38,7 @@ export const EndScreen: React.FC<EndScreenProps> = ({ type, onRestart }) => {
 
   if (type === "fired") {
     return (
-      <div
-        className="fixed inset-0 z-[100] flex items-center justify-center bg-background"
-      >
+      <div className="fixed inset-0 z-[100] flex items-center justify-center bg-background">
         {confetti.map((c) => (
           <div
             key={c.id}
@@ -86,9 +84,7 @@ export const EndScreen: React.FC<EndScreenProps> = ({ type, onRestart }) => {
   }
 
   return (
-    <div
-      className="fixed inset-0 z-[100] flex items-center justify-center bg-background"
-    >
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-background">
       <div className="xp-window w-[min(95vw,680px)] z-10">
         <div className="xp-title-bar-inactive">
           <span>Human Resources</span>
diff --git a/src/components/game/IntroScreen.tsx b/src/components/game/IntroScreen.tsx
index b81f7a6..0476b98 100644
--- a/src/components/game/IntroScreen.tsx
+++ b/src/components/game/IntroScreen.tsx
@@ -50,17 +50,15 @@ export const IntroScreen: React.FC<IntroScreenProps> = ({
             <div className="xp-window w-full max-w-[535px]">
               <div className="xp-title-bar">
                 <div className="flex items-center gap-1.5">
-                  <span className="text-xs font-bold">
-                    BOSS MESSAGE
-                  </span>
+                  <span className="text-xs font-bold">BOSS MESSAGE</span>
                 </div>
               </div>
               <div className="xp-window-body flex flex-col gap-6 p-5">
                 <div className="flex items-center gap-4">
                   <div className="flex flex-col gap-14 flex-1 justify-center">
                     <p className="text-base font-bold leading-relaxed text-left whitespace-pre-wrap">
-                      "I hate liars and cheaters. Why are you hired if you don't do
-                      your job?{" "}
+                      "I hate liars and cheaters. Why are you hired if you don't
+                      do your job?{" "}
                       <span className="text-destructive">Focus on work!</span>"
                     </p>
                     <div className="flex justify-start">
@@ -81,7 +79,9 @@ export const IntroScreen: React.FC<IntroScreenProps> = ({
                         className="w-full h-full object-cover rounded-full border-2 border-primary"
                       />
                     </div>
-                    <span className="text-sm font-bold text-card-foreground mt-2">Boss Baby</span>
+                    <span className="text-sm font-bold text-card-foreground mt-2">
+                      Boss Baby
+                    </span>
                   </div>
                 </div>
               </div>
@@ -94,14 +94,16 @@ export const IntroScreen: React.FC<IntroScreenProps> = ({
         <div
           className="w-full max-w-[900px] flex items-center justify-between gap-3 px-3 py-2"
           style={{
-            background: "linear-gradient(180deg, hsl(0,0%,100%) 0%, hsl(0,0%,85%) 100%)",
+            background:
+              "linear-gradient(180deg, hsl(0,0%,100%) 0%, hsl(0,0%,85%) 100%)",
             border: "2px solid",
-            borderColor: "hsl(0,0%,100%) hsl(220,10%,55%) hsl(220,10%,55%) hsl(0,0%,100%)",
+            borderColor:
+              "hsl(0,0%,100%) hsl(220,10%,55%) hsl(220,10%,55%) hsl(0,0%,100%)",
           }}
         >
           <div className="text-xs text-foreground/80">
-            (Disclaimer: This is not representative of us developers; we are very,
-            very, very good employees.)
+            (Disclaimer: This is not representative of us developers; we are
+            very, very, very good employees.)
           </div>
 
           <div className="flex items-center">
@@ -119,9 +121,11 @@ export const IntroScreen: React.FC<IntroScreenProps> = ({
                   display: "inline-flex",
                   alignItems: "center",
                   justifyContent: "space-between",
-                  background: "linear-gradient(180deg, hsl(0,0%,100%) 0%, hsl(0,0%,85%) 100%)",
+                  background:
+                    "linear-gradient(180deg, hsl(0,0%,100%) 0%, hsl(0,0%,85%) 100%)",
                   border: "2px solid",
-                  borderColor: "hsl(0,0%,100%) transparent hsl(220,10%,55%) hsl(0,0%,100%)",
+                  borderColor:
+                    "hsl(0,0%,100%) transparent hsl(220,10%,55%) hsl(0,0%,100%)",
                   padding: "0 10px",
                   height: 40,
                   boxSizing: "border-box",
@@ -145,9 +149,11 @@ export const IntroScreen: React.FC<IntroScreenProps> = ({
               style={{
                 width: 40,
                 height: 40,
-                background: "linear-gradient(180deg, hsl(0,0%,100%) 0%, hsl(0,0%,85%) 100%)",
+                background:
+                  "linear-gradient(180deg, hsl(0,0%,100%) 0%, hsl(0,0%,85%) 100%)",
                 border: "2px solid",
-                borderColor: "hsl(0,0%,100%) hsl(220,10%,55%) hsl(220,10%,55%) hsl(0,0%,100%)",
+                borderColor:
+                  "hsl(0,0%,100%) hsl(220,10%,55%) hsl(220,10%,55%) hsl(0,0%,100%)",
                 borderRadius: 0,
                 display: "flex",
                 alignItems: "center",
diff --git a/src/components/game/OutlookMockup.tsx b/src/components/game/OutlookMockup.tsx
index 9ccb6ec..8b7f85e 100644
--- a/src/components/game/OutlookMockup.tsx
+++ b/src/components/game/OutlookMockup.tsx
@@ -70,8 +70,7 @@ export const OutlookMockup: React.FC<OutlookMockupProps> = ({
 
     const withDates = UNREAD_EMAILS.map((email) => {
       const randomOffset =
-        minOffsetMs +
-        Math.floor(Math.random() * (oneDayMs - minOffsetMs + 1));
+        minOffsetMs + Math.floor(Math.random() * (oneDayMs - minOffsetMs + 1));
       const timestamp = new Date(now - randomOffset);
       return { ...email, timestamp };
     }).sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime());
@@ -247,10 +246,7 @@ export const OutlookMockup: React.FC<OutlookMockupProps> = ({
         }}
       >
         <span>12 Items, 7 Unread</span>
-        <button
-          onClick={onPlayAgain}
-          className="xp-button text-xs px-3 py-0.5"
-        >
+        <button onClick={onPlayAgain} className="xp-button text-xs px-3 py-0.5">
           Close Inbox
         </button>
         <span>Connected to Exchange Server</span>
diff --git a/src/components/game/ProcrastinationDesktop.tsx b/src/components/game/ProcrastinationDesktop.tsx
index f029633..7cce336 100644
--- a/src/components/game/ProcrastinationDesktop.tsx
+++ b/src/components/game/ProcrastinationDesktop.tsx
@@ -178,7 +178,11 @@ export const ProcrastinationDesktop: React.FC<ProcrastinationDesktopProps> = ({
     >
       <div
         className="bg-[#ECE9D8] border-2 border-[#003c74] shadow-2xl flex flex-col"
-        style={{ width: "700px", fontFamily: "Tahoma, sans-serif", maxHeight: "500px" }}
+        style={{
+          width: "700px",
+          fontFamily: "Tahoma, sans-serif",
+          maxHeight: "500px",
+        }}
       >
         {/* Title Bar — drag handle */}
         <div
@@ -193,9 +197,15 @@ export const ProcrastinationDesktop: React.FC<ProcrastinationDesktopProps> = ({
             </span>
           </div>
           <div className="flex gap-1">
-            <div className="w-5 h-5 bg-[#d4d0c8] text-black text-[10px] flex items-center justify-center border border-black">_</div>
-            <div className="w-5 h-5 bg-[#d4d0c8] text-black text-[10px] flex items-center justify-center border border-black">□</div>
-            <div className="w-5 h-5 bg-[#d4d0c8] text-black text-[10px] flex items-center justify-center border border-black">✕</div>
+            <div className="w-5 h-5 bg-[#d4d0c8] text-black text-[10px] flex items-center justify-center border border-black">
+              _
+            </div>
+            <div className="w-5 h-5 bg-[#d4d0c8] text-black text-[10px] flex items-center justify-center border border-black">
+              □
+            </div>
+            <div className="w-5 h-5 bg-[#d4d0c8] text-black text-[10px] flex items-center justify-center border border-black">
+              ✕
+            </div>
           </div>
         </div>
 
@@ -214,30 +224,33 @@ export const ProcrastinationDesktop: React.FC<ProcrastinationDesktopProps> = ({
           <button
             type="button"
             onClick={() => setActiveTab("cricket")}
-            className={`${activeTab === "cricket"
-              ? "bg-[#ECE9D8] border-t border-l border-r border-white border-b-0 font-bold"
-              : "bg-[#c0c0c0] border border-[#808080]"
-              } px-3 py-1 text-[11px] flex items-center gap-1`}
+            className={`${
+              activeTab === "cricket"
+                ? "bg-[#ECE9D8] border-t border-l border-r border-white border-b-0 font-bold"
+                : "bg-[#c0c0c0] border border-[#808080]"
+            } px-3 py-1 text-[11px] flex items-center gap-1`}
           >
             🏏 Cricket Live
           </button>
           <button
             type="button"
             onClick={() => setActiveTab("cat")}
-            className={`${activeTab === "cat"
-              ? "bg-[#ECE9D8] border-t border-l border-r border-white border-b-0 font-bold"
-              : "bg-[#c0c0c0] border border-[#808080]"
-              } px-3 py-1 text-[11px] flex items-center gap-1`}
+            className={`${
+              activeTab === "cat"
+                ? "bg-[#ECE9D8] border-t border-l border-r border-white border-b-0 font-bold"
+                : "bg-[#c0c0c0] border border-[#808080]"
+            } px-3 py-1 text-[11px] flex items-center gap-1`}
           >
             🐱 Cat Videos
           </button>
           <button
             type="button"
             onClick={() => setActiveTab("youtube")}
-            className={`${activeTab === "youtube"
-              ? "bg-[#ECE9D8] border-t border-l border-r border-white border-b-0 font-bold"
-              : "bg-[#c0c0c0] border border-[#808080]"
-              } px-3 py-1 text-[11px] flex items-center gap-1`}
+            className={`${
+              activeTab === "youtube"
+                ? "bg-[#ECE9D8] border-t border-l border-r border-white border-b-0 font-bold"
+                : "bg-[#c0c0c0] border border-[#808080]"
+            } px-3 py-1 text-[11px] flex items-center gap-1`}
           >
             ▶️ YouTube
           </button>
@@ -279,7 +292,9 @@ export const ProcrastinationDesktop: React.FC<ProcrastinationDesktopProps> = ({
                 </div>
               </div>
               <div className="flex justify-center gap-6 text-xs mt-6">
-                <span className="underline cursor-pointer">Live Chat (2.4k)</span>
+                <span className="underline cursor-pointer">
+                  Live Chat (2.4k)
+                </span>
                 <span className="underline cursor-pointer">Scorecard</span>
                 <span className="underline cursor-pointer">Commentary</span>
               </div>
@@ -288,7 +303,9 @@ export const ProcrastinationDesktop: React.FC<ProcrastinationDesktopProps> = ({
 
           {activeTab === "cat" && (
             <div className="h-full flex flex-col items-center justify-center gap-4">
-              <h2 className="text-lg font-bold text-center">🐱 Cat Videos - LIVE</h2>
+              <h2 className="text-lg font-bold text-center">
+                🐱 Cat Videos - LIVE
+              </h2>
               <img
                 src="/cats.gif"
                 alt="Funny cat video"
diff --git a/src/components/game/PunishmentScreen.tsx b/src/components/game/PunishmentScreen.tsx
index effbd1e..230cbc8 100644
--- a/src/components/game/PunishmentScreen.tsx
+++ b/src/components/game/PunishmentScreen.tsx
@@ -140,9 +140,7 @@ export const PunishmentScreen: React.FC<PunishmentScreenProps> = ({
           {punishmentType === "email" ? (
             <OutlookMockup onPlayAgain={onComplete} />
           ) : (
-            <>
-              {punishment.content}
-            </>
+            <>{punishment.content}</>
           )}
         </div>
       </div>
diff --git a/src/components/game/TetrisGame.tsx b/src/components/game/TetrisGame.tsx
index c2dfa4e..1849f0d 100644
--- a/src/components/game/TetrisGame.tsx
+++ b/src/components/game/TetrisGame.tsx
@@ -9,11 +9,30 @@ const TIMER_SECONDS = 15;
 const DANGER_ROW = 7; // triggers when 10 of 15 rows are stacked
 
 const SHAPES = [
-  [[1, 1, 1, 1], [1, 1, 1, 1]],      // I: 2×4 slab
-  [[1, 1, 1], [1, 1, 1], [1, 1, 1]],  // O: 3×3 square
-  [[0, 1, 0], [1, 1, 1], [0, 1, 0]],  // T: 3×3 cross
-  [[1, 1, 0], [1, 1, 1], [1, 1, 1]],  // L: 3×3 chunky L
-  [[0, 1, 1], [0, 1, 1], [1, 1, 1]],  // J: 3×3 chunky J
+  [
+    [1, 1, 1, 1],
+    [1, 1, 1, 1],
+  ], // I: 2×4 slab
+  [
+    [1, 1, 1],
+    [1, 1, 1],
+    [1, 1, 1],
+  ], // O: 3×3 square
+  [
+    [0, 1, 0],
+    [1, 1, 1],
+    [0, 1, 0],
+  ], // T: 3×3 cross
+  [
+    [1, 1, 0],
+    [1, 1, 1],
+    [1, 1, 1],
+  ], // L: 3×3 chunky L
+  [
+    [0, 1, 1],
+    [0, 1, 1],
+    [1, 1, 1],
+  ], // J: 3×3 chunky J
 ];
 
 const PRIORITIES = ["CRIT", "HIGH", "MED", "LOW"];
@@ -280,7 +299,9 @@ export const TetrisGame: React.FC<TetrisGameProps> = ({
     <div className="flex flex-col items-center gap-2">
       <p className="text-[12px] font-semibold text-center text-card-foreground leading-snug w-full">
         Clear rows to reassign Jiras &mdash; let them stack and{" "}
-        <span className="text-destructive font-bold">they&apos;re all yours</span>
+        <span className="text-destructive font-bold">
+          they&apos;re all yours
+        </span>
       </p>
       <div className="flex justify-between w-full px-1">
         <span className="text-[10px] text-muted-foreground flex items-center gap-1">
diff --git a/src/index.css b/src/index.css
index e4ebce1..cad425a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,7 +11,10 @@ a,
 input,
 select,
 textarea {
-  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 1 L5 26 L10 20 L14 30 L18 28 L14 18 L21 18 Z' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 5 1, default !important;
+  cursor:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 1 L5 26 L10 20 L14 30 L18 28 L14 18 L21 18 Z' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")
+      5 1,
+    default !important;
 }
 
 @layer base {
@@ -96,20 +99,29 @@ textarea {
     font-size: 12px;
     overflow: hidden;
     user-select: none;
-    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 1 L5 26 L10 20 L14 30 L18 28 L14 18 L21 18 Z' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 5 1, default;
+    cursor:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 1 L5 26 L10 20 L14 30 L18 28 L14 18 L21 18 Z' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")
+        5 1,
+      default;
   }
 
   button,
   a,
   [role="button"],
   .cursor-pointer {
-    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 1 L5 26 L10 20 L14 30 L18 28 L14 18 L21 18 Z' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 5 1, default;
+    cursor:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 1 L5 26 L10 20 L14 30 L18 28 L14 18 L21 18 Z' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")
+        5 1,
+      default;
   }
 
   [style*="cursor: grab"],
   [style*="cursor:grab"],
   .cursor-grab {
-    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M12 8 C12 6 14 5 16 6 L16 12 M16 6 C16 4 18 3 20 5 L20 12 M20 5 C20 3 22 3 23 5 L23 12 M10 10 C9 8 10 6 12 8 L12 14 M10 10 L10 16 C10 20 14 23 18 23 L20 23 C24 23 26 20 26 16 L26 12 L23 12 L20 12 L16 12 L12 12 L12 14' fill='white' stroke='black' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 16 10, grab;
+    cursor:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M12 8 C12 6 14 5 16 6 L16 12 M16 6 C16 4 18 3 20 5 L20 12 M20 5 C20 3 22 3 23 5 L23 12 M10 10 C9 8 10 6 12 8 L12 14 M10 10 L10 16 C10 20 14 23 18 23 L20 23 C24 23 26 20 26 16 L26 12 L23 12 L20 12 L16 12 L12 12 L12 14' fill='white' stroke='black' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E")
+        16 10,
+      grab;
   }
 }
 
@@ -126,7 +138,10 @@ textarea {
     border-color: hsl(0 0% 95%) hsl(0 0% 50%) hsl(0 0% 50%) hsl(0 0% 95%);
     min-width: 75px;
     text-align: center;
-    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 1 L5 26 L10 20 L14 30 L18 28 L14 18 L21 18 Z' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 5 1, default !important;
+    cursor:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 1 L5 26 L10 20 L14 30 L18 28 L14 18 L21 18 Z' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")
+        5 1,
+      default !important;
   }
 
   .xp-button:active {
@@ -145,7 +160,10 @@ textarea {
     border-color: hsl(0 0% 95%) hsl(0 0% 50%) hsl(0 0% 50%) hsl(0 0% 95%);
     min-width: 75px;
     text-align: center;
-    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 1 L5 26 L10 20 L14 30 L18 28 L14 18 L21 18 Z' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 5 1, default !important;
+    cursor:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 1 L5 26 L10 20 L14 30 L18 28 L14 18 L21 18 Z' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")
+        5 1,
+      default !important;
     border: 2px solid hsl(var(--primary));
     outline: 1px dotted hsl(0 0% 0%);
     outline-offset: -4px;
@@ -153,17 +171,21 @@ textarea {
 
   .xp-window {
     border-style: solid;
-    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
     border-color: hsl(213 60% 60%);
     border-width: 3px;
     border-radius: 8px 8px 0 0;
   }
 
   .xp-title-bar {
-    background: linear-gradient(180deg,
-        hsl(var(--xp-title-start)) 0%,
-        hsl(213 75% 45%) 40%,
-        hsl(var(--xp-title-end)) 100%);
+    background: linear-gradient(
+      180deg,
+      hsl(var(--xp-title-start)) 0%,
+      hsl(213 75% 45%) 40%,
+      hsl(var(--xp-title-end)) 100%
+    );
     padding: 0.25rem 0.5rem;
     display: flex;
     align-items: center;
@@ -176,10 +198,12 @@ textarea {
   }
 
   .xp-title-bar-inactive {
-    background: linear-gradient(180deg,
-        hsl(0 0% 72%) 0%,
-        hsl(0 0% 58%) 40%,
-        hsl(0 0% 48%) 100%);
+    background: linear-gradient(
+      180deg,
+      hsl(0 0% 72%) 0%,
+      hsl(0 0% 58%) 40%,
+      hsl(0 0% 48%) 100%
+    );
     padding: 0.25rem 0.5rem;
     display: flex;
     align-items: center;
@@ -204,7 +228,10 @@ textarea {
     background: linear-gradient(180deg, hsl(0 70% 60%) 0%, hsl(0 65% 45%) 100%);
     color: white;
     border: 1px solid hsl(0 0% 30%);
-    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 1 L5 26 L10 20 L14 30 L18 28 L14 18 L21 18 Z' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 5 1, default !important;
+    cursor:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 1 L5 26 L10 20 L14 30 L18 28 L14 18 L21 18 Z' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")
+        5 1,
+      default !important;
   }
 
   .xp-close-btn:hover {
@@ -217,11 +244,13 @@ textarea {
   }
 
   .xp-taskbar {
-    background: linear-gradient(180deg,
-        hsl(213 40% 80%) 0%,
-        hsl(213 30% 68%) 5%,
-        hsl(213 25% 72%) 50%,
-        hsl(213 20% 60%) 100%);
+    background: linear-gradient(
+      180deg,
+      hsl(213 40% 80%) 0%,
+      hsl(213 30% 68%) 5%,
+      hsl(213 25% 72%) 50%,
+      hsl(213 20% 60%) 100%
+    );
     height: 2.5rem;
     display: flex;
     align-items: center;
@@ -233,9 +262,11 @@ textarea {
   }
 
   .xp-start-btn {
-    background: linear-gradient(180deg,
-        hsl(120 55% 45%) 0%,
-        hsl(120 55% 30%) 100%);
+    background: linear-gradient(
+      180deg,
+      hsl(120 55% 45%) 0%,
+      hsl(120 55% 30%) 100%
+    );
     padding-left: 0.75rem;
     padding-right: 0.75rem;
     height: 2rem;
@@ -248,13 +279,18 @@ textarea {
     border-radius: 0 0.5rem 0.5rem 0;
     color: hsl(var(--primary-foreground));
     border: 1px solid hsl(120 40% 20%);
-    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 1 L5 26 L10 20 L14 30 L18 28 L14 18 L21 18 Z' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 5 1, default !important;
+    cursor:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 1 L5 26 L10 20 L14 30 L18 28 L14 18 L21 18 Z' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")
+        5 1,
+      default !important;
   }
 
   .xp-start-btn:hover {
-    background: linear-gradient(180deg,
-        hsl(120 55% 50%) 0%,
-        hsl(120 55% 35%) 100%);
+    background: linear-gradient(
+      180deg,
+      hsl(120 55% 50%) 0%,
+      hsl(120 55% 35%) 100%
+    );
   }
 
   .teams-notification {
@@ -332,7 +368,6 @@ textarea {
 }
 
 @keyframes shake {
-
   0%,
   100% {
     transform: translateX(0);
@@ -355,7 +390,6 @@ textarea {
 }
 
 @keyframes blink {
-
   0%,
   100% {
     opacity: 1;
diff --git a/src/pages/ErrorPage.tsx b/src/pages/ErrorPage.tsx
index 04e46bd..0ffaa05 100644
--- a/src/pages/ErrorPage.tsx
+++ b/src/pages/ErrorPage.tsx
@@ -2,62 +2,64 @@ import { useEffect } from "react";
 import { Link, useLocation, useSearchParams } from "react-router-dom";
 
 interface ErrorPageProps {
-    code?: number;
+  code?: number;
 }
 
 const ErrorPage = ({ code = 404 }: ErrorPageProps) => {
-    const location = useLocation();
-    const [searchParams] = useSearchParams();
-
-    const queryCode = Number(searchParams.get("code"));
-    const statusCode =
-        Number.isInteger(queryCode) && queryCode >= 400 && queryCode <= 599
-            ? queryCode
-            : code;
-
-    const errorTitle =
-        statusCode === 404
-            ? "Page not found"
-            : statusCode === 500
-                ? "Internal server error"
-                : "Something went wrong";
-
-    useEffect(() => {
-        console.error(
-            `${statusCode} Error: User attempted to access route:`,
-            location.pathname,
-        );
-    }, [location.pathname, statusCode]);
-
-    return (
-        <div
-            className="min-h-screen flex items-center justify-center px-4 bg-cover bg-center"
-            style={{ backgroundImage: "url('/background.png')" }}
-        >
-            <div className="xp-window w-[min(95vw,620px)] overflow-hidden">
-                <div className="xp-title-bar-inactive">
-                    <span>System Error</span>
-                    <div className="xp-close-btn">×</div>
-                </div>
-
-                <div className="xp-window-body text-center py-8 px-6">
-                    <p className="text-xs text-muted-foreground mb-2">Error Code</p>
-                    <h1 className="pixel-text text-4xl md:text-5xl font-bold text-destructive mb-4">
-                        {statusCode}
-                    </h1>
-                    <p className="pixel-text text-xl md:text-2xl text-card-foreground mb-3">
-                        DEFINITELY FIRED.
-                    </p>
-                    <p className="text-base text-muted-foreground mb-2">{errorTitle}</p>
-                    <p className="text-sm text-muted-foreground mb-6">{location.pathname}</p>
-
-                    <Link to="/" className="xp-button-primary inline-block px-8 py-2">
-                        Return to Home
-                    </Link>
-                </div>
-            </div>
-        </div>
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+
+  const queryCode = Number(searchParams.get("code"));
+  const statusCode =
+    Number.isInteger(queryCode) && queryCode >= 400 && queryCode <= 599
+      ? queryCode
+      : code;
+
+  const errorTitle =
+    statusCode === 404
+      ? "Page not found"
+      : statusCode === 500
+        ? "Internal server error"
+        : "Something went wrong";
+
+  useEffect(() => {
+    console.error(
+      `${statusCode} Error: User attempted to access route:`,
+      location.pathname,
     );
+  }, [location.pathname, statusCode]);
+
+  return (
+    <div
+      className="min-h-screen flex items-center justify-center px-4 bg-cover bg-center"
+      style={{ backgroundImage: "url('/background.png')" }}
+    >
+      <div className="xp-window w-[min(95vw,620px)] overflow-hidden">
+        <div className="xp-title-bar-inactive">
+          <span>System Error</span>
+          <div className="xp-close-btn">×</div>
+        </div>
+
+        <div className="xp-window-body text-center py-8 px-6">
+          <p className="text-xs text-muted-foreground mb-2">Error Code</p>
+          <h1 className="pixel-text text-4xl md:text-5xl font-bold text-destructive mb-4">
+            {statusCode}
+          </h1>
+          <p className="pixel-text text-xl md:text-2xl text-card-foreground mb-3">
+            DEFINITELY FIRED.
+          </p>
+          <p className="text-base text-muted-foreground mb-2">{errorTitle}</p>
+          <p className="text-sm text-muted-foreground mb-6">
+            {location.pathname}
+          </p>
+
+          <Link to="/" className="xp-button-primary inline-block px-8 py-2">
+            Return to Home
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default ErrorPage;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9ae20e0..1ded61b 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -27,9 +27,15 @@ const Index = () => {
   const [skipTutorials, setSkipTutorials] = useState(true);
   const [showBoss, setShowBoss] = useState(false);
   const [bossMsg, setBossMsg] = useState("");
-  const [bossAutoAdvance, setBossAutoAdvance] = useState<number | undefined>(undefined);
-  const [bossAltButton, setBossAltButton] = useState<{ label: string; onAlt: () => void } | undefined>(undefined);
-  const [bossDismissLabel, setBossDismissLabel] = useState<string | undefined>(undefined);
+  const [bossAutoAdvance, setBossAutoAdvance] = useState<number | undefined>(
+    undefined,
+  );
+  const [bossAltButton, setBossAltButton] = useState<
+    { label: string; onAlt: () => void } | undefined
+  >(undefined);
+  const [bossDismissLabel, setBossDismissLabel] = useState<string | undefined>(
+    undefined,
+  );
   const [nextStageAfterBoss, setNextStageAfterBoss] =
     useState<GameStage | null>(null);
   const [showPunishment, setShowPunishment] = useState<GameStage | null>(null);
@@ -56,17 +62,31 @@ const Index = () => {
     };
   }, []);
 
-  const triggerBoss = useCallback((msg: string, nextStage: GameStage, autoAdvanceDelay?: number, altButton?: { label: string; onAlt: () => void }, dismissLabel?: string) => {
-    setBossMsg(msg);
-    setBossAutoAdvance(autoAdvanceDelay);
-    setBossAltButton(altButton);
-    setBossDismissLabel(dismissLabel);
-    setShowBoss(true);
-    setNextStageAfterBoss(nextStage);
-  }, []);
+  const triggerBoss = useCallback(
+    (
+      msg: string,
+      nextStage: GameStage,
+      autoAdvanceDelay?: number,
+      altButton?: { label: string; onAlt: () => void },
+      dismissLabel?: string,
+    ) => {
+      setBossMsg(msg);
+      setBossAutoAdvance(autoAdvanceDelay);
+      setBossAltButton(altButton);
+      setBossDismissLabel(dismissLabel);
+      setShowBoss(true);
+      setNextStageAfterBoss(nextStage);
+    },
+    [],
+  );
 
   const triggerBossWithDelay = useCallback(
-    (msg: string, nextStage: GameStage, delayMs = STAGE_DELAY_MS, altButton?: { label: string; onAlt: () => void }) => {
+    (
+      msg: string,
+      nextStage: GameStage,
+      delayMs = STAGE_DELAY_MS,
+      altButton?: { label: string; onAlt: () => void },
+    ) => {
       const timeout = setTimeout(() => {
         triggerBoss(msg, nextStage, undefined, altButton);
       }, delayMs);
@@ -221,7 +241,8 @@ const Index = () => {
       } else {
         moveMeter(10);
         setIsPunishment(true);
-        bossOnDismissRef.current = () => triggerPunishment("wordle-done", "wordle");
+        bossOnDismissRef.current = () =>
+          triggerPunishment("wordle-done", "wordle");
         triggerBoss(
           "Can't even decode corporate buzzwords?! Seems like you need to attend the meeting after all...",
           "wordle-done", // fallback, won't be used
@@ -245,7 +266,14 @@ const Index = () => {
         "Check your emails! 10 unread messages! You're on prod support!",
         skipTutorials ? "pacman" : "pacman-howto",
         SECOND_DELAY_MS,
-        { label: "Fine.", onAlt: () => { setShowBoss(false); setBossAltButton(undefined); setStage("outlook"); } },
+        {
+          label: "Fine.",
+          onAlt: () => {
+            setShowBoss(false);
+            setBossAltButton(undefined);
+            setStage("outlook");
+          },
+        },
       );
     }
   }, [
@@ -607,7 +635,13 @@ const Index = () => {
       {showBoss && (
         <>
           <div className="fixed inset-0 bg-foreground/50 z-40" />
-          <BossBaby message={bossMsg} onDismiss={dismissBoss} autoAdvanceDelay={bossAutoAdvance} altButton={bossAltButton} dismissLabel={bossDismissLabel} />
+          <BossBaby
+            message={bossMsg}
+            onDismiss={dismissBoss}
+            autoAdvanceDelay={bossAutoAdvance}
+            altButton={bossAltButton}
+            dismissLabel={bossDismissLabel}
+          />
         </>
       )}
 
diff --git a/vite.config.ts b/vite.config.ts
index 31441ff..f374874 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,15 +1,14 @@
 import path from "path";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
-import viteCompression from 'vite-plugin-compression';
-
+import viteCompression from "vite-plugin-compression";
 
 export default defineConfig({
   server: {
     host: "::",
     port: 8080,
   },
-  plugins: [react(), viteCompression({ algorithm: 'brotliCompress' })],
+  plugins: [react(), viteCompression({ algorithm: "brotliCompress" })],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),