diff --git a/styles.css b/styles.css
index 57d7567..82ceb2a 100644
--- a/styles.css
+++ b/styles.css
@@ -1989,35 +1989,113 @@ textarea:focus {
   }
 }
 
-@media (max-width: 420px) {
+@media (max-width: 900px) {
   body[data-page="chrono"] .phase-header {
-    grid-template-columns: auto auto;
-    grid-template-areas:
-      "brand action"
-      "title title";
-    align-items: center;
-    row-gap: 0.28rem;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 0.35rem;
+  }
+
+  body[data-page="chrono"] .phase-title {
+    display: none;
   }
 
   body[data-page="chrono"] .brand-link-logo {
-    grid-area: brand;
     justify-self: start;
   }
 
   body[data-page="chrono"] .utility-button {
-    grid-area: action;
     justify-self: end;
   }
 
-  body[data-page="chrono"] .phase-title {
-    grid-area: title;
-    min-width: 0;
-    text-align: center;
+  body[data-page="chrono"] .phase-shell {
+    gap: 0.35rem;
+    padding:
+      calc(var(--phase-top-offset) + 0.55rem)
+      calc(var(--safe-right) + 0.5rem)
+      calc(var(--safe-bottom) + 0.55rem)
+      calc(var(--safe-left) + 0.5rem);
   }
 
-  body[data-page="chrono"] .phase-title h1 {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  body[data-page="chrono"] .status-strip {
+    gap: 0.3rem;
+  }
+
+  body[data-page="chrono"] .status-card {
+    min-height: 3.35rem;
+    padding: 0.35rem 0.25rem;
+    border-radius: 18px;
+  }
+
+  body[data-page="chrono"] .status-card span {
+    font-size: 0.66rem;
+    line-height: 1.1;
+  }
+
+  body[data-page="chrono"] .status-card strong {
+    font-size: 0.98rem;
+  }
+
+  body[data-page="chrono"] .faceoff-board {
+    gap: 0.35rem;
+  }
+
+  body[data-page="chrono"] .zone-inner {
+    grid-template-rows: auto minmax(0, 1fr);
+    padding: 0.5rem;
+    gap: 0.4rem;
+    border-radius: 20px;
+  }
+
+  body[data-page="chrono"] .zone-head h2 {
+    font-size: 1rem;
+  }
+
+  body[data-page="chrono"] .zone-stats strong {
+    font-size: 0.95rem;
+  }
+
+  body[data-page="chrono"] .zone-stats span {
+    font-size: 0.78rem;
+  }
+
+  body[data-page="chrono"] .seat-tag {
+    padding: 0.22rem 0.55rem;
+    font-size: 0.62rem;
+  }
+
+  body[data-page="chrono"] .zone-button {
+    min-height: clamp(92px, 12.5vh, 132px);
+    padding: 0.75rem;
+    border-radius: 22px;
+    font-size: clamp(1.35rem, 6.2vw, 2.05rem);
+  }
+
+  body[data-page="chrono"] .phase-spine {
+    gap: 0;
+  }
+
+  body[data-page="chrono"] .phase-spine .spine-card {
+    display: none;
+  }
+
+  body[data-page="chrono"] .spine-button {
+    min-height: 2.9rem;
+    padding: 0.7rem;
+    border-radius: 18px;
+    font-size: 0.96rem;
+  }
+}
+
+@media (max-width: 420px) {
+  body[data-page="chrono"] .phase-header {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  body[data-page="chrono"] .brand-link-logo {
+    justify-self: start;
+  }
+
+  body[data-page="chrono"] .utility-button {
+    justify-self: end;
   }
 }