Fix vertical overflow due to miscalculated console height

src/app/page.tsx

@@ -18,7 +18,8 @@ import { useEffect } from 'react';
  */
 
 export default function Home() {
-  let consoleHeight = 'calc(100vh - 2.25rem - 2.25rem - 1rem - 1rem - 8rem)'; // css calc() hack for greedy fluid height of console
+  let consoleHeight =
+    'calc(100vh - 2.25rem - 2.25rem - 1rem - 1rem - 1rem - 8rem)'; // css calc() hack for greedy fluid height of console
 
   useEffect(() => {
     const player = createNewLife();

src/components/ButtonGroup.tsx

@@ -38,7 +38,7 @@ const AgeUpButton = () => {
     <button
       onClick={() => ageUp()}
       ref={ageUpButtonRef}
-      className="flex w-full items-center justify-center rounded-xl border border-dark-700 bg-dark-900 text-zinc-200 shadow-md transition delay-100 duration-200 ease-linear hover:border-sky-500 hover:bg-sky-500 hover:text-white"
+      className="flex w-full items-center justify-center rounded-xl border border-dark-700 bg-dark-900 text-zinc-200 shadow-md transition delay-100 duration-300 ease-in hover:border-sky-500 hover:bg-sky-500 hover:text-white"
     >
       Age 1 month
     </button>

src/lib/store/player.ts

@@ -1,3 +1,4 @@
+import { v4 as uuidv4 } from 'uuid';
 import { create } from 'zustand';
 import { immer } from 'zustand/middleware/immer';
 
@@ -12,6 +13,7 @@ import { immer } from 'zustand/middleware/immer';
  */
 
 export interface PlayerState {
+  id: string;
   name: string;
   country: string;
   gender: 'male' | 'female';
@@ -44,6 +46,7 @@ export interface PlayerMutations {
 
 export const usePlayer = create<PlayerState & PlayerMutations>()(
   immer((set) => ({
+    id: uuidv4(),
     name: 'Player',
     gender: 'male',
     country: 'Undefined',