screens cleanup

css/style.css

@@ -20,12 +20,19 @@ canvas {
 }
 
 .maze-layout {
-  width: min(1200px, calc(100vw - 24px));
-  margin: 12px auto 20px;
+  width: 100vw;
+  margin: 0;
   display: grid;
-  grid-template-columns: 2fr 1fr;
-  gap: 16px;
+  grid-template-columns: 1fr;
+  gap: 0;
   align-items: start;
+  min-height: 100vh;
+}
+
+.maze-layout > .panel:first-child {
+  margin: 12px;
+  border-radius: 16px;
+  height: calc(100vh - 24px);
 }
 
 .panel {
@@ -162,6 +169,25 @@ canvas {
   pointer-events: none;
 }
 
+.p5-start-panel {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  background: rgba(0, 0, 0, 0.95);
+  z-index: 9999;
+}
+
+.p5-start-panel[hidden] {
+  display: none;
+  pointer-events: none;
+}
+
 .p5-sketch-container {
   position: relative;
   width: 100%;
@@ -224,6 +250,19 @@ canvas {
   max-height: 400px;
 }
 
+#control-panel-section {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  margin: 0;
+  border-radius: 16px 16px 0 0;
+  max-height: 40vh;
+  overflow-y: auto;
+  z-index: 1000;
+}
+
 .control-group {
   margin-bottom: 20px;
 }