diff --git a/css/legacy.css b/css/legacy.css
index 9cb2e04..ea94b89 100644
--- a/css/legacy.css
+++ b/css/legacy.css
@@ -1,75 +1,97 @@
-/* ===== BODY (same vibe) ===== */
+/* ===== BODY (DSi/3DS SAFE) ===== */
 body {
-    background: url("http://www.veltron.net/images/wallpaper.png") no-repeat center center fixed;
+    background: url("http://www.veltron.net/images/wallpaper.png") no-repeat center top;
     background-size: cover;
-    font-family: "Roboto", arial, serif;
+
+    font-family: "Roboto", Arial, serif;
     margin: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
+    padding: 0;
+
+    text-align: center;
+    min-height: 100%;
 }
 
 /* ===== CONSOLE FRAME ===== */
 #console {
-display: flex;
-flex-direction: column;
-align-items: center;
+display: block;
+margin: 0 auto;
+width: 100%;
 }
 
 /* ===== SCREENS ===== */
 .screen {
-    width: 360px;
+    width: 95%;
+    max-width: 360px;
+
     border: 2px solid #6f2020;
     border-radius: 14px;
     overflow: hidden;
+
+    margin: 0 auto;
 }
 
 /* TOP SCREEN */
 .top-screen {
     height: 160px;
-    background: url("http://www.veltron.net/images/dots.png"),
+
+    background:
+    url("http://www.veltron.net/images/dots.png"),
     linear-gradient(to bottom, #ff8080 0%, #da3636 40%, #e04343 100%);
+    background-repeat: repeat, no-repeat;
 }
 
-/* reuse your header */
+/* HEADER */
 #header {
-display: flex;
-justify-content: center;
-align-items: center;
+display: block;
 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 {
-    width: 380px;
+    width: 95%;
+    max-width: 380px;
     height: 16px;
+
     background: #6f2020;
-    margin: 4px 0;
+    margin: 4px auto;
+
     border-radius: 4px;
 }
 
 /* BOTTOM SCREEN */
 .bottom-screen {
-    height: 280px;
+    height: auto;
+    min-height: 280px;
+
     padding: 8px;
-    background: url("http://www.veltron.net/images/dots.png"),
+
+    background:
+    url("http://www.veltron.net/images/dots.png"),
     linear-gradient(200deg, #f15a5a 60%, #eb4949 90%);
+    background-repeat: repeat, no-repeat;
 }
 
-/* ===== NAV (reuse style) ===== */
+/* ===== NAVIGATION (NO GRID, NO FLEX) ===== */
 .nav-categories {
     background-color: #da3e3e;
     border: 1px solid #6f2020;
     border-radius: 8px;
+
     padding: 5px;
     margin-bottom: 8px;
 }
@@ -77,54 +99,62 @@ padding: 6px 20px;
 .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;
 }
 
-/* GRID INSTEAD OF SIDEBAR */
+/* SAFE 2-COLUMN LAYOUT (FLOATS) */
 .nav-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 5px;
+    display: block;
+    overflow: hidden;
 }
 
 .nav-grid a {
-    text-align: center;
+    display: block;
+    float: left;
+
+    width: 48%;
+    margin: 1%;
     padding: 6px;
+
+    text-align: center;
     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: 140px;
-    overflow-y: auto;
+
+    height: auto;
+    max-height: 140px;
+    overflow: auto;
+
+    -webkit-overflow-scrolling: touch;
 }
 
-/* reuse your pattern */
-.text-containers-main-bg {
-    background-color: #aabdff;
-    background-image: repeating-linear-gradient(
-        45deg,
-        #faa0a0 25%,
-        transparent 25%,
-        transparent 75%,
-        #faa0a0 75%
-    );
-    border: 1px solid #a14c4c;
-}
-
-
+/* ===== PATTERN BACKGROUND (SIMPLIFIED SAFE VERSION) ===== */
 .text-containers-main-bg {
     background-color: #aabdff;
 
@@ -134,27 +164,25 @@ padding: 6px 20px;
         #faa0a0 25%,
         transparent 25%,
         transparent 75%,
-        #faa0a0 75%,
-        #faa0a0
-    ),
-    repeating-linear-gradient(
-        45deg,
-        #faa0a0 25%,
-        #faa 25%,
-        #faa 75%,
-        #faa0a0 75%,
-        #faa0a0
+        #faa0a0 75%
     );
 
-    background-position: 0 0, 26px 26px;
-    background-size: 52px 52px;
+    background-size: 40px 40px;
 
     border: 1px solid #a14c4c;
 }
 
-
-/* ===== DSI MODE ===== */
-body.console-dsi .screen {
-    width: 320px;
+/* ===== DSI MODE OVERRIDES ===== */
+body.console-dsi {
+    font-size: 12px;
 }
 
+body.console-dsi .screen {
+    width: 300px;
+}
+
+body.console-dsi .nav-grid a {
+    float: none;
+    width: 100%;
+    margin: 4px 0;
+}