style: enhance hexagon button styles and update spacing utilities in CSS

src/theme/ItemNumber.css

@@ -622,3 +622,68 @@ span.number-label {
   );
   animation: rippleFadeHighlight 1s ease infinite;
 }
+
+.hexagon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  aspect-ratio: 1;
+  clip-path: polygon(
+    98.66024% 45%,
+    99.39693% 46.5798%,
+    99.84808% 48.26352%,
+    100% 50%,
+    99.84808% 51.73648%,
+    99.39693% 53.4202%,
+    98.66025% 55%,
+    78.66025% 89.64102%,
+    77.66044% 91.06889%,
+    76.42788% 92.30146%,
+    75% 93.30127%,
+    73.4202% 94.03794%,
+    71.73648% 94.48909%,
+    70% 94.64102%,
+    30% 94.64102%,
+    28.26352% 94.48909%,
+    26.5798% 94.03794%,
+    25% 93.30127%,
+    23.57212% 92.30146%,
+    22.33956% 91.06889%,
+    21.33975% 89.64102%,
+    1.33975% 55%,
+    0.60307% 53.4202%,
+    0.15192% 51.73648%,
+    0% 50%,
+    0.15192% 48.26352%,
+    0.60307% 46.5798%,
+    1.33975% 45%,
+    21.33975% 10.35898%,
+    22.33956% 8.93111%,
+    23.57212% 7.69854%,
+    25% 6.69873%,
+    26.5798% 5.96206%,
+    28.26352% 5.51091%,
+    30% 5.35898%,
+    70% 5.35898%,
+    71.73648% 5.51091%,
+    73.4202% 5.96206%,
+    75% 6.69873%,
+    76.42788% 7.69854%,
+    77.66044% 8.93111%,
+    78.66025% 10.35898%
+  );
+  background: transparent;
+  box-shadow:
+    0rem 0.125rem 0.5125rem #73ff60 inset,
+    0px 0.5px 5px #f4f9f4 inset;
+  cursor: pointer;
+}
+
+.butt-num:hover .hexagon {
+  background: #abff3d;
+  box-shadow:
+    0rem 0.125rem 0.5125rem #0efa3e inset,
+    0px 0.5px 5px #d0ff01 inset;
+  transition: all 0.2s;
+}

src/theme/ShuffleGrid.css

@@ -15,6 +15,7 @@
 }
 
 .grid-item {
+  width: 8vmin;
   aspect-ratio: 1;
   display: flex;
   justify-content: center;

src/theme/tailwind.css

@@ -703,6 +703,9 @@ video {
 .mb-0 {
   margin-bottom: 0px;
 }
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
 .mb-12 {
   margin-bottom: 3rem;
 }
@@ -829,9 +832,6 @@ video {
 .h-screen {
   height: 100vh;
 }
-.h-\[60\%\] {
-  height: 60%;
-}
 .max-h-screen {
   max-height: 100vh;
 }
@@ -931,12 +931,12 @@ video {
 .flex-\[2\] {
   flex: 2;
 }
-.flex-auto {
-  flex: 1 1 auto;
-}
 .flex-\[3\] {
   flex: 3;
 }
+.flex-auto {
+  flex: 1 1 auto;
+}
 .flex-grow {
   flex-grow: 1;
 }
@@ -1110,6 +1110,9 @@ video {
 .gap-20 {
   gap: 5rem;
 }
+.gap-3 {
+  gap: 0.75rem;
+}
 .gap-4 {
   gap: 1rem;
 }
@@ -1119,9 +1122,6 @@ video {
 .gap-8 {
   gap: 2rem;
 }
-.gap-3 {
-  gap: 0.75rem;
-}
 .gap-x-4 {
   column-gap: 1rem;
 }
@@ -1146,6 +1146,9 @@ video {
 .text-wrap {
   text-wrap: wrap;
 }
+.text-balance {
+  text-wrap: balance;
+}
 .break-words {
   overflow-wrap: break-word;
 }
@@ -1252,6 +1255,9 @@ video {
   font-size: 4.5rem;
   line-height: 1;
 }
+.text-\[1\.5vmin\] {
+  font-size: 1.5vmin;
+}
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1272,33 +1278,6 @@ video {
   font-size: 0.75rem;
   line-height: 1rem;
 }
-.text-\[10px\] {
-  font-size: 10px;
-}
-.text-\[0\.5rem\] {
-  font-size: 0.5rem;
-}
-.text-\[0\.2rem\] {
-  font-size: 0.2rem;
-}
-.text-\[0\.4rem\] {
-  font-size: 0.4rem;
-}
-.text-\[0\.4vw\] {
-  font-size: 0.4vw;
-}
-.text-\[1vw\] {
-  font-size: 1vw;
-}
-.text-\[1vmin\] {
-  font-size: 1vmin;
-}
-.text-\[2vmin\] {
-  font-size: 2vmin;
-}
-.text-\[1\.5vmin\] {
-  font-size: 1.5vmin;
-}
 .font-bold {
   font-weight: 700;
 }
@@ -1519,7 +1498,6 @@ ion-toolbar {
   align-items: center;
   justify-content: center;
   align-self: center;
-  padding: 0.5rem;
 }
 
 .text-shadow-base {

tailwind.css

@@ -8,7 +8,7 @@ ion-toolbar {
 }
 
 .base-style {
-  @apply flex items-center justify-center self-center p-2;
+  @apply flex items-center justify-center self-center;
 }
 
 .text-shadow-base {