Fix upload page for mobile

- Show "Tap to choose files" instead of drag & drop text on mobile
- Hide zip drop hint on small screens
- Stack options and actions vertically on mobile
- Shrink song banner thumbnails, font sizes, and spacing
- Full-width add button on mobile
- Larger touch targets for checkboxes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/pages/UploadPage.module.css

@@ -7,6 +7,7 @@
   flex-direction: column;
   align-items: center;
   padding: 2rem 1rem;
+  padding-top: 3.5rem;
   box-sizing: border-box;
 }
 
@@ -39,23 +40,24 @@
   color: rgba(255, 255, 255, 0.5);
   letter-spacing: 0.15em;
   font-size: 13px;
-  margin: 0 0 2rem;
+  margin: 0 0 1.5rem;
   text-align: center;
 }
 
 .dropZone {
   width: min(600px, 100%);
-  min-height: 200px;
+  min-height: 180px;
   border: 2px dashed rgba(255, 255, 255, 0.25);
   border-radius: 12px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 0.75rem;
-  padding: 2rem;
+  gap: 0.6rem;
+  padding: 1.5rem 1rem;
   cursor: pointer;
   transition: border-color 0.2s, background 0.2s;
+  text-align: center;
 }
 
 .dropZone:hover,
@@ -65,19 +67,27 @@
 }
 
 .dropIcon {
-  font-size: 48px;
+  font-size: 40px;
   opacity: 0.5;
 }
 
-.dropLabel {
+.dropLabelDesktop {
   font-size: 16px;
   letter-spacing: 0.1em;
 }
 
+.dropLabelMobile {
+  display: none;
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  color: #f0abfc;
+}
+
 .dropRequirements {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.6);
-  letter-spacing: 0.06em;
+  letter-spacing: 0.04em;
 }
 
 .dropRequired {
@@ -88,7 +98,13 @@
 .dropHint {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.4);
-  letter-spacing: 0.08em;
+  letter-spacing: 0.04em;
+}
+
+.dropHintDesktop {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.4);
+  letter-spacing: 0.04em;
 }
 
 .fileInput {
@@ -220,6 +236,8 @@
 
 .option input[type="checkbox"] {
   accent-color: #d946ef;
+  width: 18px;
+  height: 18px;
 }
 
 .actions {
@@ -228,6 +246,7 @@
   display: flex;
   gap: 1rem;
   justify-content: flex-end;
+  align-items: center;
 }
 
 .addBtn {
@@ -268,3 +287,96 @@
   font-size: 14px;
   letter-spacing: 0.1em;
 }
+
+/* ---- Mobile ---- */
+
+@media (max-width: 600px) {
+  .root {
+    padding: 1rem 0.75rem;
+    padding-top: 3.5rem;
+  }
+
+  .title {
+    font-size: 22px;
+    letter-spacing: 0.2em;
+  }
+
+  .subtitle {
+    font-size: 12px;
+    margin-bottom: 1rem;
+  }
+
+  .dropZone {
+    min-height: 140px;
+    padding: 1.25rem 0.75rem;
+    gap: 0.5rem;
+  }
+
+  .dropIcon {
+    font-size: 32px;
+  }
+
+  .dropLabelDesktop {
+    display: none;
+  }
+
+  .dropLabelMobile {
+    display: block;
+  }
+
+  .dropHintDesktop {
+    display: none;
+  }
+
+  .dropRequirements {
+    font-size: 11px;
+  }
+
+  .dropHint {
+    font-size: 11px;
+  }
+
+  .songHeader {
+    gap: 0.65rem;
+  }
+
+  .songBanner {
+    width: 56px;
+    height: 36px;
+  }
+
+  .songTitle {
+    font-size: 15px;
+  }
+
+  .songArtist {
+    font-size: 11px;
+  }
+
+  .songMeta {
+    font-size: 11px;
+  }
+
+  .options {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.6rem;
+  }
+
+  .optionWithHelp::after {
+    left: auto;
+    right: 0;
+    width: min(280px, 80vw);
+  }
+
+  .actions {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+
+  .addBtn {
+    width: 100%;
+    text-align: center;
+    padding: 0.85rem 1rem;
+  }
+}

src/pages/UploadPage.tsx

@@ -319,17 +319,20 @@ export function UploadPage() {
         tabIndex={0}
       >
         <div className={styles.dropIcon}>+</div>
-        <div className={styles.dropLabel}>
+        <div className={styles.dropLabelDesktop}>
           Drag & drop files here, or click to browse
         </div>
+        <div className={styles.dropLabelMobile}>
+          Tap to choose files
+        </div>
         <div className={styles.dropRequirements}>
-          <span className={styles.dropRequired}>Required:</span> audio file (.ogg, .mp3, .wav) + chart file (.ssc or .sm)
+          <span className={styles.dropRequired}>Required:</span> audio (.ogg, .mp3, .wav) + chart (.ssc/.sm)
         </div>
         <div className={styles.dropHint}>
-          Optional: background image (bg.png) &middot; banner image (bn.png)
+          Optional: background (bg.png) &middot; banner (bn.png)
         </div>
-        <div className={styles.dropHint}>
-          Or drop a .zip archive containing one or more song folders
+        <div className={styles.dropHintDesktop}>
+          Or drop a .zip with one or more song folders
         </div>
       </div>
       <input