new colors

src/Components/LifeCounter/LifeCounter.tsx

@@ -30,7 +30,7 @@ const PlayerLostWrapper = twc.div<RotationDivProps>((props) => [
     : '',
 ]);
 
-const DynamicText = twc.div`text-[8vmin]`;
+const DynamicText = twc.div`text-[8vmin] whitespace-nowrap`;
 
 const hasCommanderDamageReached21 = (player: Player) => {
   const commanderDamageTotals = player.commanderDamage.map(
@@ -131,7 +131,11 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
             <StartingPlayerNoticeWrapper
               style={{ rotate: `${calcRotation}deg` }}
             >
-              <DynamicText style={{ rotate: `${calcTextRotation}deg` }}>
+              <DynamicText
+                style={{
+                  rotate: `${calcTextRotation}deg`,
+                }}
+              >
                 You start!
               </DynamicText>
             </StartingPlayerNoticeWrapper>

src/Components/Misc/Separator.tsx

@@ -7,7 +7,7 @@ export const Separator = ({
 }) => {
   return (
     <div
-      className={`bg-common-black bg-opacity-30 rounded-full mt-2 mb-2`}
+      className={`bg-common-white bg-opacity-30 rounded-full mt-2 mb-2`}
       style={{ width, height }}
     />
   );

tailwind.config.ts

@@ -39,14 +39,15 @@ export default {
       },
       colors: {
         primary: {
-          main: '#7F9172',
+          main: '#3E7D78',
-          dark: '#57654F',
+          dark: '#2D5F5B',
         },
         secondary: {
-          main: '#5E714C',
+          main: '#284F4C',
+          dark: '#1B3B38',
         },
         background: {
-          default: '#495E35',
+          default: '#08253B',
           backdrop: 'rgba(0, 0, 0, 0.3)',
           settings: 'rgba(20, 20, 0, 0.9)',
         },
@@ -95,3 +96,4 @@ export default {
   },
   plugins: [tailwindcssGridAreas],
 } satisfies Config;
+// #98FF98