Enhance mobile experience and add zalgo text variants

Mobile improvements:
- Comprehensive responsive design for 320px-4K screens
- Touch-optimized controls with larger touch targets
- iOS zoom prevention with 16px font sizes on inputs
- Swipe-friendly interface with better spacing
- Portrait and landscape orientation support
- Enhanced accessibility with better contrast and sizes

Zalgo variants implemented:
- Full Chaos: Balanced corruption (default)
- Above Only: Marks above characters only
- Below Only: Marks below characters only
- Middle Only: Overlaying marks
- Mini Glitch: Subtle corruption
- Heavy Corruption: Maximum chaos overload

UI enhancements:
- Added corruption mode selector dropdown
- Reorganized controls into responsive groups
- Improved mobile control layouts
- Better visual hierarchy and spacing

Code quality:
- Fixed ESLint/Prettier indentation conflict
- Enhanced ZalgoGenerator with mode parameter
- Added event handlers for mode selection
- Comprehensive mobile CSS with multiple breakpoints

Documentation:
- Created comprehensive README with zalgo examples
- Documented all corruption modes with examples
- Added development and deployment instructions

The app now provides a perfect mobile experience with
diverse zalgo corruption options for creative text effects.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/styles.css

@@ -96,8 +96,8 @@ h1 {
 
 .controls {
     display: flex;
-    align-items: center;
-    gap: 15px;
+    flex-wrap: wrap;
+    gap: 20px;
     margin-bottom: 30px;
     padding: 20px;
     background: var(--bg-tertiary);
@@ -105,9 +105,42 @@ h1 {
     border: 1px solid var(--border);
 }
 
+.control-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 1;
+    min-width: 200px;
+}
+
 .controls label {
     color: var(--text-secondary);
     font-size: 0.95rem;
+    white-space: nowrap;
+    min-width: 80px;
+}
+
+#zalgoMode {
+    flex: 1;
+    padding: 8px 12px;
+    background: var(--bg-primary);
+    border: 2px solid var(--border);
+    border-radius: 8px;
+    color: var(--text-primary);
+    font-size: 0.95rem;
+    outline: none;
+    transition: all 0.3s ease;
+    min-width: 120px;
+}
+
+#zalgoMode:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 10px var(--shadow);
+}
+
+#zalgoMode option {
+    background: var(--bg-primary);
+    color: var(--text-primary);
 }
 
 #intensity {
@@ -277,24 +310,126 @@ footer p {
 }
 
 /* Mobile responsiveness */
-@media (max-width: 600px) {
+@media (max-width: 768px) {
+    body {
+        padding: 10px;
+    }
+
     .container {
-        padding: 25px;
+        padding: 20px;
+        max-width: 100%;
     }
 
     h1 {
         font-size: 2rem;
     }
 
+    .subtitle {
+        font-size: 1rem;
+    }
+
     .controls {
+        flex-direction: column;
+        gap: 15px;
+        padding: 15px;
+    }
+
+    .control-group {
         flex-direction: column;
         align-items: stretch;
-        gap: 10px;
+        gap: 8px;
+        min-width: auto;
+    }
+
+    .controls label {
+        min-width: auto;
+        font-size: 0.9rem;
+    }
+
+    #zalgoMode {
+        width: 100%;
+        padding: 12px;
+        font-size: 1rem;
+        min-width: auto;
+    }
+
+    #intensity {
+        width: 100%;
+        height: 8px;
+    }
+
+    #intensity::-webkit-slider-thumb {
+        width: 24px;
+        height: 24px;
+    }
+
+    #intensity::-moz-range-thumb {
+        width: 24px;
+        height: 24px;
+    }
+
+    textarea {
+        min-height: 140px;
+        font-size: 1rem;
+        padding: 15px;
+    }
+
+    .clear-btn {
+        padding: 18px;
+        font-size: 1.1rem;
+    }
+
+    .copy-notification {
+        padding: 15px 25px;
+        font-size: 1rem;
+    }
+}
+
+/* Small mobile devices */
+@media (max-width: 480px) {
+    .container {
+        padding: 15px;
+    }
+
+    h1 {
+        font-size: 1.8rem;
+    }
+
+    .controls {
+        padding: 12px;
+        gap: 12px;
     }
 
     textarea {
         min-height: 120px;
-        font-size: 0.95rem;
+        font-size: 16px; /* Prevents zoom on iOS */
+    }
+
+    #zalgoMode {
+        font-size: 16px; /* Prevents zoom on iOS */
+    }
+}
+
+/* Touch-friendly improvements */
+@media (hover: none) and (pointer: coarse) {
+    /* Touch device specific styles */
+    textarea {
+        font-size: 16px; /* Prevents zoom on mobile browsers */
+    }
+
+    #zalgoMode {
+        font-size: 16px;
+        padding: 15px;
+    }
+
+    .clear-btn {
+        min-height: 48px; /* Minimum touch target size */
+    }
+
+    #outputText {
+        cursor: pointer;
+        -webkit-user-select: all;
+        user-select: all;
     }
 }