diff --git a/input/mobile.jpeg b/input/mobile.jpeg
new file mode 100644
index 0000000..10c2527
Binary files /dev/null and b/input/mobile.jpeg differ
diff --git a/src/web/static/index.html b/src/web/static/index.html
index 33640c1..fb09de0 100644
--- a/src/web/static/index.html
+++ b/src/web/static/index.html
@@ -475,7 +475,7 @@ html, body {
 }
 #input-area input::placeholder { color: var(--text-muted); }
 #input-area input:disabled {
-  opacity: 0.4;
+  opacity: 0.7;
   cursor: not-allowed;
 }
 #btn-send {
@@ -663,6 +663,62 @@ html, body {
   #sidebar.open { left: 0; }
   #sidebar-backdrop.open { display: block; }
 
+  #app { flex-direction: column; height: 100dvh; }
+
+  #header {
+    padding: 0 12px;
+    gap: 10px;
+    min-height: 48px;
+    height: 48px;
+  }
+  #header h1 { font-size: 14px; letter-spacing: 1px; }
+  #header .turn-badge { font-size: 11px; }
+
+  #main {
+    width: 100%;
+    min-height: 0;
+  }
+
+  #chat {
+    padding: 12px;
+    gap: 10px;
+    font-size: 15px;
+  }
+
+  #input-area {
+    padding: 10px 12px;
+    padding-bottom: max(12px, env(safe-area-inset-bottom));
+    gap: 8px;
+  }
+  #input-area input {
+    font-size: 16px;
+    padding: 12px;
+    min-height: 44px;
+  }
+  #btn-send {
+    width: 44px;
+    height: 44px;
+    font-size: 20px;
+    flex-shrink: 0;
+  }
+
+  /* Welcome screen */
+  #welcome h1 { font-size: 28px; }
+  #welcome .subtitle { font-size: 14px; }
+  .camp-list { max-width: 100%; padding: 0 12px; }
+  #new-camp-form { width: 100%; max-width: 100%; padding: 0 12px; }
+
+  /* Sidebar content */
+  .sidebar-section { padding: 10px 12px; }
+  .sidebar-section h2 { font-size: 10px; }
+  .char-name { font-size: 14px; }
+  .stat-grid { gap: 3px; }
+  .stat-row { font-size: 12px; }
+  .area-item { font-size: 12px; }
+}
+  #sidebar.open { left: 0; }
+  #sidebar-backdrop.open { display: block; }
+
   #app { flex-direction: column; }
 
   #header {