Stabilize mobile UI and update downloads

Author: life2harsh

css/crt.css

@@ -260,44 +260,36 @@
 @media (max-width: 767px) {
   .crt-monitor {
     width: 100vw;
-    height: var(--app-height, 100dvh);
+    height: var(--app-height, 100svh);
     max-height: none;
-    border-radius: 16px;
-    box-shadow:
-      inset 0 0 16px rgba(0, 0, 0, 0.55),
-      0 0 0 2px #0d0d1a,
-      0 0 0 4px #2a2a42,
-      0 0 0 6px #1a1a2e,
-      0 0 24px rgba(0, 0, 0, 0.75);
+    border-radius: 0;
+    box-shadow: none;
+    background: #0a0e1a;
   }
 
   .crt-monitor::before {
-    inset: -1px;
-    border-radius: 18px;
+    display: none;
   }
 
   .crt-screen {
-    inset: 4px;
-    border-radius: 12px;
+    inset: 0;
+    border-radius: 0;
     transform: none;
     filter: none;
-    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.45);
+    box-shadow: none;
   }
 
   .crt-screen::before,
   .crt-screen::after,
   .crt-chromatic,
   .crt-phosphor,
-  .crt-noise {
-    display: none;
-  }
-
+  .crt-noise,
   .crt-scanlines {
-    opacity: 0.32;
+    display: none;
   }
 
   .crt-vignette {
-    background: radial-gradient(ellipse 78% 72% at 50% 50%, transparent 56%, rgba(0, 0, 0, 0.32) 100%);
+    background: none;
   }
 }
 
@@ -366,7 +358,7 @@
 }
 
 .crt-boot-scanline.expanding {
-  height: 100vh;
+  height: 100%;
   transform: scaleY(1);
   top: 0;
   opacity: 0;

css/responsive.css

@@ -127,28 +127,48 @@
    Still circular — NOT a vertical list!
    ============================================================ */
 @media (max-width: 767px) {
+  body {
+    display: block;
+  }
+
+  .website-container {
+    width: 100%;
+    height: 100%;
+  }
+
   .crt-monitor {
     width: 100vw;
-    height: var(--app-height, 100dvh);
+    height: var(--app-height, 100svh);
     max-width: none;
     max-height: none;
-    border-radius: 16px;
+    border-radius: 0;
   }
 
   .crt-screen {
-    inset: 4px;
-    border-radius: 12px;
+    inset: 0;
+    border-radius: 0;
   }
 
   /* ---- MENU SCREEN PADDING ---- */
   .menu-screen {
-    padding: 10px 8px calc(env(safe-area-inset-bottom, 0px) + 14px);
+    padding: max(10px, calc(env(safe-area-inset-top, 0px) + 8px)) 10px calc(env(safe-area-inset-bottom, 0px) + 14px);
     justify-content: flex-start;
     overflow-y: auto;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
   }
 
+  .menu-screen.active::before,
+  .menu-screen.active::after,
+  .arcade-hud::after,
+  .arcade-details-panel::before,
+  .arcade-details-panel::after,
+  .details-header-border::after,
+  .grid-node::before,
+  .grid-node.selected::before {
+    display: none;
+  }
+
   /* ---- COMPACT HUD ---- */
   .arcade-hud {
     width: 100%;
@@ -204,46 +224,52 @@
 
   /* ---- GRID ---- */
   .arcade-grid {
-    --grid-col-gap: 6px;
-    --grid-row-gap: 6px;
+    --grid-col-gap: 10px;
+    --grid-row-gap: 10px;
     gap: var(--grid-row-gap) var(--grid-col-gap);
     flex: 0 0 auto;
     width: 100%;
-    justify-content: center;
+    justify-content: space-between;
     align-content: flex-start;
   }
 
   .grid-node {
-    flex: 0 0 calc((100% - (var(--grid-col-gap) * 4)) / 5);
-    max-width: calc((100% - (var(--grid-col-gap) * 4)) / 5);
-    padding: 6px 4px;
-    border-width: 1px;
-    border-radius: 4px;
+    flex: 0 0 calc((100% - var(--grid-col-gap)) / 2);
+    max-width: calc((100% - var(--grid-col-gap)) / 2);
+    min-height: 84px;
+    aspect-ratio: auto;
+    padding: 10px 8px;
+    border-width: 1.5px;
+    border-radius: 6px;
+    animation: none;
+    backdrop-filter: none;
+    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
   }
 
   .grid-node.selected {
-    transform: translateY(-2px) scale(1.02);
+    transform: none;
+    animation: none;
   }
 
   .grid-node-icon {
-    width: 24px;
-    height: 24px;
-    margin-bottom: 4px;
+    width: 30px;
+    height: 30px;
+    margin-bottom: 6px;
   }
 
   .grid-node-label {
-    font-size: 6px;
-    line-height: 1.35;
-    letter-spacing: 0.2px;
+    font-size: 7px;
+    line-height: 1.4;
+    letter-spacing: 0.3px;
   }
 
   .grid-node[data-id="battleships"] .grid-node-icon {
-    width: 26px;
-    height: 26px;
+    width: 30px;
+    height: 30px;
   }
 
   .grid-node[data-id="battleships"] .grid-node-label {
-    font-size: 5px;
+    font-size: 6.4px;
   }
 
   /* ---- DETAILS PANEL ---- */
@@ -254,6 +280,8 @@
     padding: 10px;
     border-width: 2px;
     overflow: visible;
+    backdrop-filter: none;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
   }
 
   .details-header-border {
@@ -263,27 +291,30 @@
 
   .details-header {
     font-size: 8px;
+    animation: none;
   }
 
   .details-showcase {
-    gap: 7px;
-    margin-bottom: 8px;
+    gap: 10px;
+    margin-bottom: 10px;
+    animation: none;
   }
 
   .details-icon-wrapper {
-    width: 32px;
-    height: 32px;
+    width: 40px;
+    height: 40px;
   }
 
   .details-icon-wrapper svg,
   .details-icon-wrapper .grid-node-img {
-    width: 22px;
-    height: 22px;
+    width: 26px;
+    height: 26px;
   }
 
   .details-title {
-    font-size: 11px;
-    line-height: 1.25;
+    font-size: 12px;
+    line-height: 1.35;
+    text-shadow: none;
   }
 
   .details-stats-block {
@@ -293,23 +324,24 @@
   }
 
   .stat-row {
-    font-size: 7px;
+    font-size: 7.5px;
+    animation: none;
   }
 
   .details-info-box {
-    font-size: 8px;
-    line-height: 1.7;
+    font-size: 8.5px;
+    line-height: 1.75;
     max-height: none;
-    min-height: 120px;
+    min-height: 140px;
     flex: 1;
     overflow-y: auto;
-    margin-bottom: 8px;
+    margin-bottom: 10px;
     padding-right: 6px;
   }
 
   .details-action-btn {
-    padding: 8px 10px;
-    font-size: 7px;
+    padding: 10px 12px;
+    font-size: 7.5px;
     line-height: 1.5;
   }
 
@@ -321,6 +353,7 @@
     width: 100%;
     line-height: 1.5;
     margin-top: auto;
+    animation: none;
   }
 
   /* ---- SFX BUTTON ---- */
@@ -336,33 +369,49 @@
   .sfx-toggle:hover {
     opacity: 1;
   }
+
+  .hud-label,
+  .hud-value,
+  .details-icon-wrapper::after,
+  .stat-bar span,
+  .grid-node.selected .grid-node-label,
+  .grid-node.selected .grid-node-icon,
+  .grid-node.selected .grid-node-icon svg,
+  .grid-node.selected .grid-node-icon .grid-node-img {
+    animation: none;
+  }
+
+  .grid-node.selected .grid-node-label,
+  .grid-node.selected .grid-node-icon {
+    transform: none;
+  }
 }
 
 /* ============================================================
    VERY SMALL SCREENS (≤400px)
    ============================================================ */
 @media (max-width: 400px) {
   .grid-node-icon {
-    width: 22px;
-    height: 22px;
+    width: 28px;
+    height: 28px;
   }
 
   .grid-node-label {
-    font-size: 5.6px;
-    line-height: 1.3;
+    font-size: 6.4px;
+    line-height: 1.35;
   }
 
   .grid-node[data-id="battleships"] .grid-node-icon {
-    width: 24px;
-    height: 24px;
+    width: 28px;
+    height: 28px;
   }
 
   .grid-node[data-id="battleships"] .grid-node-label {
-    font-size: 4.5px;
+    font-size: 6px;
   }
 
   .details-info-box {
-    font-size: 7.5px;
+    font-size: 8px;
     max-height: none;
   }
 
@@ -387,23 +436,27 @@
   }
 
   .arcade-grid {
-    --grid-col-gap: 3px;
-    --grid-row-gap: 3px;
+    --grid-col-gap: 6px;
+    --grid-row-gap: 6px;
     gap: var(--grid-row-gap) var(--grid-col-gap);
+    justify-content: space-between;
   }
 
   .grid-node {
-    padding: 3px;
+    flex: 0 0 calc((100% - (var(--grid-col-gap) * 2)) / 3);
+    max-width: calc((100% - (var(--grid-col-gap) * 2)) / 3);
+    min-height: 64px;
+    padding: 6px 4px;
   }
 
   .grid-node-icon {
-    width: 18px;
-    height: 18px;
+    width: 20px;
+    height: 20px;
     margin-bottom: 2px;
   }
 
   .grid-node-label {
-    font-size: 5.5px;
+    font-size: 5.8px;
   }
 
   .details-stats-block {

css/start.css

@@ -219,6 +219,7 @@
     max-width: 100%;
     filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.35))
             drop-shadow(0 0 42px rgba(255, 140, 0, 0.18));
+    animation: none;
   }
 
   .start-tagline {
@@ -241,12 +242,19 @@
     padding: 12px 16px;
     font-size: clamp(11px, 3.5vw, 15px);
     letter-spacing: 2px;
+    animation: none;
   }
 
   .floating-mascot {
     right: 4%;
     bottom: 24%;
     width: clamp(52px, 16vw, 88px);
+    animation: none;
+  }
+
+  .start-particle,
+  .start-water::before {
+    animation: none;
   }
 }