diff --git a/frontend/src/components/JudgmentPanel.css b/frontend/src/components/JudgmentPanel.css
index 6424a6c..1350a1f 100644
--- a/frontend/src/components/JudgmentPanel.css
+++ b/frontend/src/components/JudgmentPanel.css
@@ -165,3 +165,16 @@
   0% { opacity: 1; transform: scale(1); }
   100% { opacity: 0.32; transform: scale(0.92); }
 }
+
+/* The four verdicts sit two-up by default. On a phone that leaves each
+   button too narrow for its rune plus label, so they go full width — these
+   are irreversible, consequential choices and must not be mis-tapped. */
+@media (max-width: 480px) {
+  .judgment-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .verdict-btn {
+    min-height: 44px;
+  }
+}
diff --git a/frontend/src/pages/SeancePage.css b/frontend/src/pages/SeancePage.css
index 4534dd3..674245c 100644
--- a/frontend/src/pages/SeancePage.css
+++ b/frontend/src/pages/SeancePage.css
@@ -1377,3 +1377,84 @@
     display: none;
   }
 }
+
+/* --- phones -------------------------------------------------------------
+   The 960px breakpoint above handles tablets by stacking the columns, but
+   left everything between 320px and 960px on one layout. Real phones sit at
+   390-430px, where the five mode tabs, the ask-form row, and the board all
+   need their own handling.
+
+   Principles: nothing horizontally scrolls the page; every interactive
+   target clears 44px (Apple's HIG floor, and Android's 48dp is close
+   enough that one rule serves both); and the board keeps enough height to
+   still read as a board rather than a strip. */
+@media (max-width: 560px) {
+  /* Mode tabs scroll horizontally rather than wrapping into a tall stack
+     that pushes the board off screen. */
+  .seance-modes {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .seance-modes::-webkit-scrollbar {
+    display: none;
+  }
+
+  .mode-tab {
+    flex: 0 0 auto;
+    min-height: 44px;
+    padding: 0.35rem 0.7rem;
+    font-size: 0.68rem;
+  }
+
+  /* The ask row is an input plus two buttons — far too much for one line
+     at this width. The input takes the full row, the buttons share the
+     next one. */
+  .seance-contact {
+    flex-wrap: wrap;
+  }
+
+  .seance-contact input {
+    flex: 1 1 100%;
+    min-height: 44px;
+    /* 16px exactly: iOS Safari zooms the whole page when a focused input
+       is any smaller, which then leaves the layout zoomed after blur. */
+    font-size: 16px;
+  }
+
+  .ask-btn,
+  .summon-btn {
+    flex: 1 1 0;
+    min-height: 44px;
+  }
+
+  .seance-board-wrap {
+    /* Shorter than the tablet stack so the transcript stays visible
+       without scrolling, but tall enough that the planchette still has a
+       board to wander. */
+    min-height: 240px;
+  }
+
+  .seance-topbar {
+    padding: 6px 8px;
+  }
+
+  /* Two columns of voice params is unreadable this narrow. */
+  .voice-params {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Very small / older phones (SE-class, 320-375px). */
+@media (max-width: 380px) {
+  .seance-board-wrap {
+    min-height: 200px;
+  }
+
+  .mode-tab {
+    font-size: 0.62rem;
+    padding: 0.3rem 0.55rem;
+  }
+}