diff --git a/css/japanese-mobile.css b/css/japanese-mobile.css
new file mode 100644
index 00000000..47195686
--- /dev/null
+++ b/css/japanese-mobile.css
@@ -0,0 +1,40 @@
+/* Mobile-only overrides for the Japanese mode tabs.
+ Kept separate from japanese.css to avoid PR conflicts in the main stylesheet. */
+@media (max-width: 768px) {
+ .jp-modes {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 0.5rem;
+ }
+
+ .jp-mode {
+ min-width: 0;
+ min-height: 58px;
+ box-sizing: border-box;
+ }
+
+ .jp-mode-name { font-size: 0.88rem; }
+}
+
+@media (max-width: 480px) {
+ .jp-page { padding-left: 1rem; padding-right: 1rem; }
+
+ .jp-modes {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 0.55rem;
+ }
+
+ .jp-mode {
+ flex-direction: row;
+ justify-content: center;
+ min-height: 52px;
+ padding: 0.65rem 0.55rem;
+ }
+
+ .jp-mode:last-child { grid-column: 1 / -1; }
+ .jp-mode-name { font-size: 0.95rem; }
+}
+
+@media (max-width: 340px) {
+ .jp-modes { grid-template-columns: 1fr; }
+ .jp-mode:last-child { grid-column: auto; }
+}
diff --git a/japanese/index.html b/japanese/index.html
index 3a216e76..0cfe60a8 100644
--- a/japanese/index.html
+++ b/japanese/index.html
@@ -9,6 +9,7 @@
+