chore: fixes

css/legacy.css

@@ -1,100 +1,75 @@
-
-/* ===== BODY (DSi/3DS SAFE) ===== */
+/* ===== BODY (same vibe) ===== */
 body {
-    background: url("http://www.veltron.net/images/wallpaper.png") no-repeat center top;
+    background: url("http://www.veltron.net/images/wallpaper.png") no-repeat center center fixed;
     background-size: cover;
-
-    font-family: "Roboto", Arial, serif;
+    font-family: "Roboto", arial, serif;
     margin: 0;
-    padding: 0;
-
-    text-align: center;
-    min-height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
 }
 
 /* ===== CONSOLE FRAME ===== */
 #console {
-display: block;
-margin: 0 auto;
-width: 100%;
+display: flex;
+flex-direction: column;
+align-items: center;
 }
 
 /* ===== SCREENS ===== */
 .screen {
-    width: 95%;
-    max-width: 360px;
-
+    width: 360px;
     border: 2px solid #6f2020;
     border-radius: 14px;
     overflow: hidden;
-
-    margin: 0 auto;
 }
 
-/* ===== TOP SCREEN (FIXED RED BACKGROUND) ===== */
+/* TOP SCREEN */
 .top-screen {
     height: 160px;
-
-    /* fallback base color */
-    background-color: #da3636;
-
-    /* safer separation of layers */
-    background-image: url("http://www.veltron.net/images/dots.png");
-    background-repeat: repeat;
+    background: url("http://www.veltron.net/images/dots.png"),
+    linear-gradient(to bottom, #ff8080 0%, #da3636 40%, #e04343 100%);
 }
 
-/* HEADER */
+/* reuse your header */
 #header {
-display: block;
+display: flex;
+justify-content: center;
+align-items: center;
 height: 100%;
-text-align: center;
-
-line-height: 160px; /* vertical centering fallback */
 }
 
 #header h1 {
-display: inline-block;
-
 background: linear-gradient(to bottom, #ff8080 0%, #da3636 70%, #e04343 100%);
 border: 1px solid #8d2727;
-
 text-shadow: #2d459e 2px 2px 4px;
 color: white;
-
 padding: 6px 20px;
-line-height: normal;
 }
 
-/* ===== HINGE ===== */
+/* HINGE */
 .hinge {
-    width: 95%;
-    max-width: 380px;
+    width: 380px;
     height: 16px;
-
     background: #6f2020;
-    margin: 4px auto;
-
+    margin: 4px 0;
     border-radius: 4px;
 }
 
-/* ===== BOTTOM SCREEN (SAFE GRADIENT) ===== */
+/* BOTTOM SCREEN */
 .bottom-screen {
-    height: auto;
-    min-height: 280px;
-
+    height: 280px;
     padding: 8px;
-
-    background-color: #eb4949;
-    background-image: linear-gradient(to bottom, #f15a5a, #eb4949);
-    background-repeat: no-repeat;
+    background: url("http://www.veltron.net/images/dots.png"),
+    linear-gradient(200deg, #f15a5a 60%, #eb4949 90%);
 }
 
-/* ===== NAVIGATION (NO FLEX / NO GRID) ===== */
+/* ===== NAV (reuse style) ===== */
 .nav-categories {
     background-color: #da3e3e;
     border: 1px solid #6f2020;
     border-radius: 8px;
-
     padding: 5px;
     margin-bottom: 8px;
 }
@@ -102,66 +77,43 @@ line-height: normal;
 .nav-categories span {
     display: block;
     text-align: center;
-
     background: linear-gradient(to bottom, #e4d16b 0%, #c28435 60%, #d87d2c 100%);
     border: 1px solid #6f2020;
-
     color: #fff;
     margin-bottom: 5px;
 }
 
-/* FLOAT GRID (DSI SAFE) */
+/* GRID INSTEAD OF SIDEBAR */
 .nav-grid {
-    display: block;
-    overflow: hidden;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 5px;
 }
 
 .nav-grid a {
-    display: block;
-    float: left;
-
-    width: 48%;
-    margin: 1%;
-    padding: 6px;
-
     text-align: center;
-
+    padding: 6px;
     color: #e5e5f5;
     text-shadow: #2a2969 2px 2px 4px;
-
     background: rgba(0,0,0,0.15);
     border-radius: 6px;
-
     text-decoration: none;
-    box-sizing: border-box;
 }
 
 .nav-grid a:hover {
     text-decoration: underline;
 }
 
-/* CLEAR FLOATS */
-.nav-grid::after {
-    content: "";
-    display: block;
-    clear: both;
-}
-
 /* ===== CONTENT ===== */
 .content-box {
     padding: 8px;
-
-    height: auto;
-    max-height: 140px;
-    overflow: auto;
-
-    -webkit-overflow-scrolling: touch;
+    height: 140px;
+    overflow-y: auto;
 }
 
-/* ===== PATTERN BOX (SIMPLIFIED FOR OLD WEBKIT) ===== */
+/* reuse your pattern */
 .text-containers-main-bg {
     background-color: #aabdff;
-
     background-image: repeating-linear-gradient(
         45deg,
         #faa0a0 25%,
@@ -169,23 +121,23 @@ line-height: normal;
         transparent 75%,
         #faa0a0 75%
     );
+    border: 1px solid #a14c4c;
+}
 
-    background-size: 40px 40px;
+
+/* ===== FIXED STRIPES (STEP 1 FIX) ===== */
+.text-containers-main-bg {
+    background-color: #faa0a0; /* fallback for DSi/3DS */
+
+    /* SAFE STRIPES REMOVED (unsupported on old browsers) */
 
     border: 1px solid #a14c4c;
 }
 
+
+
 /* ===== DSI MODE ===== */
-body.console-dsi {
-    font-size: 12px;
-}
-
 body.console-dsi .screen {
-    width: 300px;
+    width: 320px;
 }
 
-body.console-dsi .nav-grid a {
-    float: none;
-    width: 100%;
-    margin: 4px 0;
-}