Start switching the layout to use CSS grids

game.js

@@ -5293,7 +5293,9 @@ function startGame(e) {
 
   enable_growth_part("paws");
 
-  document.getElementById("log-area").style.display = 'inline';
+  document.querySelector(".game-area").style.display = 'grid';
+  document.getElementById("log").style.display = 'inline';
+  document.getElementById("react-log").style.display = 'inline';
   document.getElementById("character-build-area").style.display = 'none';
   document.getElementById("action-panel").style.display = 'flex';
 

stroll.html

@@ -185,32 +185,32 @@
             <option class="growth-part" id="option-growth-musk" value="musk">Musk</option>
             <option class="growth-part" id="option-growth-stench" value="stench">Stench</option>
           </select>
-          <button class="growth-amount" id="button-growth-1.1">1.1x</button>
-          <button class="growth-amount" id="button-growth-1.5">1.5x</button>
-          <button class="growth-amount" id="button-growth-2">2x</button>
-          <button class="growth-amount" id="button-growth-5">5x</button>
-          <button class="growth-amount" id="button-growth-20">20x</button>
-          <button class="growth-amount" id="button-growth-100">100x</button>
+          <div id="growth-amount-buttons">
+            <button class="growth-amount" id="button-growth-1.1">1.1x</button>
+            <button class="growth-amount" id="button-growth-1.5">1.5x</button>
+            <button class="growth-amount" id="button-growth-2">2x</button>
+            <button class="growth-amount" id="button-growth-5">5x</button>
+            <button class="growth-amount" id="button-growth-20">20x</button>
+            <button class="growth-amount" id="button-growth-100">100x</button>
+          </div>
         </div>
         <div id="growth-box-right">
         </div>
       </div>
     </div>
-    <div id="log-area">
-      <div class="log" id="log">
-        <div>Welcome to Stroll</div>
-        <div>&nbsp;</div>
-        <div class="version"></div>
-        <div>&nbsp;</div>
-        <div><b>This game features 18+ content</b></div>
-        <div>&nbsp;</div>
-      </div>
-      <div class="log" id="react-log">
-        <div>It's a nice day for a walk.</div>
-        <div>&nbsp;</div>
-        <div>This log will show automatic actions.</div>
-        <div>&nbsp;</div>
-      </div>
+    <div class="log" id="log">
+      <div>Welcome to Stroll</div>
+      <div>&nbsp;</div>
+      <div class="version"></div>
+      <div>&nbsp;</div>
+      <div><b>This game features 18+ content</b></div>
+      <div>&nbsp;</div>
+    </div>
+    <div class="log" id="react-log">
+      <div>It's a nice day for a walk.</div>
+      <div>&nbsp;</div>
+      <div>This log will show automatic actions.</div>
+      <div>&nbsp;</div>
     </div>
     <div class="sidebar" id="action-panel">
 

style.css

@@ -5,6 +5,10 @@
   font-family: Arial;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 .dark {
   color: #eee;
   font-family: Arial; 
@@ -56,86 +60,71 @@ body.dark div {
 }
 
 .game-area {
-  display: flex;
+  display: none;
   margin: auto;
+  width: 100vw;
+  height: 100vh;
+}
+
+#stat-container {
+  grid-area: stats;
+}
+#action-panel {
+  grid-area: actions;
+}
+#log {
+  grid-area: log;
+  display: none;
+}
+#react-log {
+  grid-area: react-log;
+  display: none;
+}
+
+#growth-amount-buttons {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  grid-auto-rows: 48pt;
 }
 
 @media (max-aspect-ratio: 1/1){
   .game-area {
-    width: 100%;
-    height: 60%;
+    grid-template-areas: 
+      "stats actions"
+      "log react-log";
+    grid-template-columns: 1fr 1fr;
   }
   #stat-container {
-    position: fixed;
-    top: 0%;
-    left: 0%;
-    max-width: 50%;
-    max-height: 50%;
+
   }
   #action-panel {
-    position: fixed;
-    right: 0%;
-    top: 0%;
-    max-width: 50%;
-    max-height: 50%;
+
   }
   #log {
-    position: fixed;
-    left: 0%;
-    bottom: 0%;
-    width: 48%;
-    height: 50%;
-    max-height: 50%;
-    margin-left: 1vw;
+
   }
   #react-log {
-    position: fixed;
-    right: 0%;
-    bottom: 0%;
-    width: 48%;
-    height: 50%;
-    max-height: 50%;
-    margin-right: 1vw;
-  }
-  .growth-part {
-    width: 100px !important;
-  }
-  #growth-part-select {
-    width: 100px !important;
-  }
-  .growth-amount {
-    width: 100px !important;
-  }
-  .action-part-button {
-    width: 33% !important;
-  }
-  .action-part-container {
-    width: 50vw !important;
-  }
-  .action-button {
-    width: 16.6667vw !important;
+
   }
+
 }
 
 @media (min-aspect-ratio: 1/1){
   .game-area {
-    width: 90%
+    grid-template-areas: 
+      "stats log react-log actions";
+    grid-template-columns: 1fr 2fr 2fr 1fr;
+    width: 90vw;
+    height: 90vh;
   }
+  
   #log {
-    float: left;
-    height: 75vh;
-    width: 48%;
+  
   }
   #react-log {
-    float: right;
-    height: 75vh;
-    width: 48%;
-  }
-}
 
-#log-area {
-  flex: 5;
-  display:none;
+  }
 }
 
 .log {
@@ -232,12 +221,7 @@ progress {
 
 .sidebar {
   display: none;
-  flex-wrap: wrap;
   flex-direction: column;
-  text-align: right;
-  min-width: 250px;
-  flex: 1;
-  padding: 25px;
 }
 
 .preset-selector {
@@ -777,12 +761,6 @@ body.dark .meterLabel {
   flex: 0 1 400px;
 }
 
-.growth-box > div > * {
-  margin: 0px;
-  width: 100%;
-  height: 50px;
-}
-
 #growth-box-left {
   height: 100%;
 }
@@ -790,7 +768,9 @@ body.dark .meterLabel {
 #growth-part-select {
   display: block;
   height: 100px;
-  font-size: 20px;
+  width: 100%;
+  font-size: 48px;
+  text-align: center;
 }
 
 .growth-part {
@@ -803,6 +783,7 @@ body.dark .meterLabel {
 
 .growth-amount {
   display: block;
+  font-size: 200%;
 }
 
 .save-version {
@@ -913,6 +894,11 @@ body {
   --gross-order: 9;
   --magic-order-banner: 10;
   --magic-order: 11;
+
+  display: flex;
+  justify-content: center;
+  min-height: 100vh;
+  margin: 0;
 }
 
 .sheet-group-main {