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,11 +30,17 @@
       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: '';
       position: fixed;
@@ -72,14 +78,21 @@
     
     .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 ⚠';
       position: absolute;
@@ -100,12 +113,26 @@
     
     .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: 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 {
       color: var(--terminal-yellow);
@@ -121,20 +148,39 @@
     
     .stats-grid {
       display: grid;
+      grid-template-columns: 1fr;
+      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;
-      margin-bottom: 30px;
+      }
     }
     
     .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);
       background: rgba(255, 0, 0, 0.1);
@@ -155,11 +201,23 @@
     }
     
     .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,35 +228,51 @@
     
     .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;
       color: var(--terminal-yellow);
@@ -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,16 +381,28 @@
     .sidebar {
       display: flex;
       flex-direction: column;
+      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);
       font-size: 1.3em;
@@ -369,10 +463,16 @@
     .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);
       font-size: 1.3em;
@@ -410,12 +510,20 @@
     
     .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.8em;
+    }
+
+    @media (min-width: 768px) {
+      .footer {
+        margin-top: 40px;
+        padding-top: 20px;
         font-size: 0.9em;
       }
+    }
     
     .easter-egg {
       cursor: pointer;
@@ -515,17 +623,27 @@
       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; }
       50% { box-shadow: 0 0 30px #ffff00; }