fix: improve responsive layout and mobile experience

- Add responsive breakpoints for better mobile support
- Improve stats grid layout for small screens (1 col → 2 col → auto-fit)
- Fix main content layout to stack properly on mobile
- Adjust padding, margins, and font sizes for different screen sizes
- Make header, controls, and forms more mobile-friendly
- Optimize incident log height and spacing for mobile devices
- Ensure nuclear option button scales appropriately

www/index.html

@@ -30,10 +30,16 @@
       background: var(--terminal-bg);
       color: var(--terminal-text);
       min-height: 100vh;
-      padding: 20px;
+      padding: 10px;
       overflow-x: hidden;
       position: relative;
     }
+
+    @media (min-width: 768px) {
+      body {
+        padding: 20px;
+      }
+    }
     
     body::before {
       content: '';
@@ -72,13 +78,20 @@
     
     .header {
       text-align: center;
-      margin-bottom: 30px;
+      margin-bottom: 20px;
-      padding: 20px;
+      padding: 15px;
       border: 3px solid var(--terminal-red);
       background: rgba(255, 0, 0, 0.1);
       position: relative;
       overflow: hidden;
     }
+
+    @media (min-width: 768px) {
+      .header {
+        margin-bottom: 30px;
+        padding: 20px;
+      }
+    }
     
     .header::before {
       content: '⚠ WARNING: DUSTIN DETECTED ⚠';
@@ -100,11 +113,25 @@
     
     .title {
       font-family: 'Share Tech Mono', monospace;
-      font-size: 3.5em;
+      font-size: 2em;
       color: var(--terminal-red);
       text-shadow: 0 0 10px var(--terminal-red);
-      margin: 20px 0;
+      margin: 15px 0;
-      letter-spacing: 2px;
+      letter-spacing: 1px;
+    }
+
+    @media (min-width: 480px) {
+      .title {
+        font-size: 2.5em;
+        letter-spacing: 2px;
+      }
+    }
+
+    @media (min-width: 768px) {
+      .title {
+        font-size: 3.5em;
+        margin: 20px 0;
+      }
     }
     
     .subtitle {
@@ -121,19 +148,38 @@
     
     .stats-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      grid-template-columns: 1fr;
-      gap: 20px;
+      gap: 15px;
       margin-bottom: 30px;
     }
+
+    @media (min-width: 480px) {
+      .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    @media (min-width: 768px) {
+      .stats-grid {
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 20px;
+      }
+    }
     
     .stat-card {
       background: rgba(0, 255, 0, 0.05);
       border: 1px solid var(--terminal-green);
-      padding: 20px;
+      padding: 15px;
       border-radius: 5px;
       position: relative;
       overflow: hidden;
     }
+
+    @media (min-width: 768px) {
+      .stat-card {
+        padding: 20px;
+      }
+    }
     
     .stat-card.critical {
       border-color: var(--terminal-red);
@@ -155,10 +201,22 @@
     }
     
     .stat-value {
-      font-size: 2.5em;
+      font-size: 1.8em;
       font-weight: bold;
       color: var(--terminal-red);
     }
+
+    @media (min-width: 480px) {
+      .stat-value {
+        font-size: 2.2em;
+      }
+    }
+
+    @media (min-width: 768px) {
+      .stat-value {
+        font-size: 2.5em;
+      }
+    }
     
     .stat-value.green {
       color: var(--terminal-green);
@@ -170,34 +228,50 @@
     
     .main-content {
       display: grid;
-      grid-template-columns: 2fr 1fr;
+      grid-template-columns: 1fr;
-      gap: 30px;
+      gap: 20px;
       margin-bottom: 30px;
     }
-    
+
-    @media (max-width: 768px) {
+    @media (min-width: 1024px) {
       .main-content {
-        grid-template-columns: 1fr;
+        grid-template-columns: 2fr 1fr;
+        gap: 30px;
       }
     }
     
     .incident-log {
       background: rgba(0, 0, 0, 0.8);
       border: 2px solid var(--terminal-green);
-      padding: 20px;
+      padding: 15px;
       border-radius: 5px;
-      max-height: 600px;
+      max-height: 400px;
       overflow-y: auto;
     }
+
+    @media (min-width: 768px) {
+      .incident-log {
+        padding: 20px;
+        max-height: 600px;
+      }
+    }
     
     .log-header {
       display: flex;
-      justify-content: space-between;
+      flex-direction: column;
-      align-items: center;
+      gap: 15px;
       margin-bottom: 20px;
       padding-bottom: 10px;
       border-bottom: 1px solid var(--terminal-green);
     }
+
+    @media (min-width: 768px) {
+      .log-header {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+      }
+    }
     
     .log-title {
       font-size: 1.5em;
@@ -206,7 +280,15 @@
     
     .controls {
       display: flex;
+      flex-wrap: wrap;
       gap: 10px;
+      justify-content: center;
+    }
+
+    @media (min-width: 768px) {
+      .controls {
+        justify-content: flex-end;
+      }
     }
     
     .control-btn {
@@ -299,15 +381,27 @@
     .sidebar {
       display: flex;
       flex-direction: column;
-      gap: 20px;
+      gap: 15px;
+    }
+
+    @media (min-width: 1024px) {
+      .sidebar {
+        gap: 20px;
+      }
     }
     
     .blame-generator {
       background: rgba(255, 0, 0, 0.1);
       border: 2px solid var(--terminal-red);
-      padding: 20px;
+      padding: 15px;
       border-radius: 5px;
     }
+
+    @media (min-width: 768px) {
+      .blame-generator {
+        padding: 20px;
+      }
+    }
     
     .blame-title {
       color: var(--terminal-red);
@@ -369,9 +463,15 @@
     .apology-generator {
       background: rgba(0, 255, 255, 0.1);
       border: 2px solid var(--terminal-cyan);
-      padding: 20px;
+      padding: 15px;
       border-radius: 5px;
     }
+
+    @media (min-width: 768px) {
+      .apology-generator {
+        padding: 20px;
+      }
+    }
     
     .apology-title {
       color: var(--terminal-cyan);
@@ -410,11 +510,19 @@
     
     .footer {
       text-align: center;
-      margin-top: 40px;
+      margin-top: 20px;
-      padding-top: 20px;
+      padding-top: 15px;
       border-top: 1px solid var(--terminal-green);
       color: var(--terminal-cyan);
-      font-size: 0.9em;
+      font-size: 0.8em;
+    }
+
+    @media (min-width: 768px) {
+      .footer {
+        margin-top: 40px;
+        padding-top: 20px;
+        font-size: 0.9em;
+      }
     }
     
     .easter-egg {
@@ -515,16 +623,26 @@
       background: linear-gradient(45deg, #ff0000, #ff9900, #ffff00);
       color: black;
       border: none;
-      padding: 15px 30px;
+      padding: 12px 20px;
       font-family: 'IBM Plex Mono', monospace;
       font-weight: bold;
       cursor: pointer;
       border-radius: 5px;
-      margin-top: 20px;
+      margin-top: 15px;
       text-transform: uppercase;
-      letter-spacing: 2px;
+      letter-spacing: 1px;
+      font-size: 0.9em;
       animation: nuclear-pulse 2s infinite;
     }
+
+    @media (min-width: 768px) {
+      .nuclear-option {
+        padding: 15px 30px;
+        letter-spacing: 2px;
+        font-size: 1em;
+        margin-top: 20px;
+      }
+    }
     
     @keyframes nuclear-pulse {
       0%, 100% { box-shadow: 0 0 10px #ff0000; }