Games now have a page and everything works on multiple size screens, but I need to do a serious refactoring to normalize all data to be Go style.

static/input_style.css

@@ -200,7 +200,7 @@ block.center-vertical {
 }
 
 bar {
-  @apply flex flex-row p-4 gap-4;
+  @apply flex flex-col sm:flex-row p-4 gap-4;
 }
 
 bar.center-horizontal {

static/style.css

@@ -247,6 +247,9 @@
   .flex {
     display: flex;
   }
+  .grid {
+    display: grid;
+  }
   .hidden {
     display: none;
   }
@@ -262,6 +265,9 @@
   .aspect-\[9\/12\]\! {
     aspect-ratio: 9/12 !important;
   }
+  .aspect-square {
+    aspect-ratio: 1 / 1;
+  }
   .aspect-square\! {
     aspect-ratio: 1 / 1 !important;
   }
@@ -308,12 +314,21 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .resize {
+    resize: both;
+  }
   .two-panel {
     grid-template-columns: repeat(1, minmax(0, 1fr));
     grid-template-rows: repeat(2, minmax(0, 1fr));
@@ -351,6 +366,9 @@
   .justify-evenly {
     justify-content: space-evenly;
   }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-0\! {
     gap: calc(var(--spacing) * 0) !important;
   }
@@ -414,6 +432,10 @@
     border-width: 1px !important;
     border-color: var(--color-red-900) !important;
   }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
   .border-1 {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -484,6 +506,9 @@
   .bg-gray-800 {
     background-color: var(--color-gray-800);
   }
+  .bg-green-400 {
+    background-color: var(--color-green-400);
+  }
   .bg-green-400\! {
     background-color: var(--color-green-400) !important;
   }
@@ -496,6 +521,9 @@
   .\!p-4 {
     padding: calc(var(--spacing) * 4) !important;
   }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
   .p-0\! {
     padding: calc(var(--spacing) * 0) !important;
   }
@@ -523,6 +551,9 @@
   .\!pb-20 {
     padding-bottom: calc(var(--spacing) * 20) !important;
   }
+  .pb-0 {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
   .pb-0\! {
     padding-bottom: calc(var(--spacing) * 0) !important;
   }
@@ -541,6 +572,9 @@
   .pb-8 {
     padding-bottom: calc(var(--spacing) * 8);
   }
+  .pb-10 {
+    padding-bottom: calc(var(--spacing) * 10);
+  }
   .pb-10\! {
     padding-bottom: calc(var(--spacing) * 10) !important;
   }
@@ -589,12 +623,18 @@
     --tw-font-weight: var(--font-weight-light);
     font-weight: var(--font-weight-light);
   }
+  .text-wrap {
+    text-wrap: wrap;
+  }
   .text-gray-50 {
     color: var(--color-gray-50);
   }
   .text-gray-300 {
     color: var(--color-gray-300);
   }
+  .text-gray-400 {
+    color: var(--color-gray-400);
+  }
   .text-gray-950 {
     color: var(--color-gray-950);
   }
@@ -604,15 +644,27 @@
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .\*\:\!p-0 {
+    :is(& > *) {
+      padding: calc(var(--spacing) * 0) !important;
+    }
+  }
   .\*\:text-xl {
     :is(& > *) {
       font-size: var(--text-xl);
@@ -1045,9 +1097,12 @@ block.center-vertical {
 }
 bar {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   gap: calc(var(--spacing) * 4);
   padding: calc(var(--spacing) * 4);
+  @media (width >= 40rem) {
+    flex-direction: row;
+  }
 }
 bar.center-horizontal {
   justify-content: center;