Optimize the layout for phones in portrait.

Lock the app to the viewport on screens <=600px wide so the page itself
never scrolls: the topbar becomes a slim rail and the play area fills the
rest. Cards, trays, and type shrink so a shop round or a battle fits on
one screen; the shop and deck rows scroll sideways when a full six-pet
deck outgrows the width, keeping each tray's height fixed. Arrange is the
one screen allowed to scroll past the viewport, since a battle line can
run long.

web/src/components/BattlePhase.tsx

@@ -592,24 +592,17 @@ export function BattlePhase({ view, send, step, setStep }: Props) {
           >
             Skip ⏭
           </button>
-          <div className="battle-speed" role="group" aria-label="Playback speed">
-            <span className="battle-speed-label" aria-hidden>
-              ⏱
-            </span>
-            {SPEED_OPTIONS.map((s) => (
           <button
-                key={s}
+            className="btn btn-ghost btn-sm battle-speed-toggle"
-                className={`btn btn-ghost btn-sm battle-speed-btn ${
+            onClick={() => {
-                  speed === s ? 'is-active' : ''
+              const i = SPEED_OPTIONS.indexOf(speed as (typeof SPEED_OPTIONS)[number])
-                }`}
+              setSpeed(SPEED_OPTIONS[(i + 1) % SPEED_OPTIONS.length])
-                onClick={() => setSpeed(s)}
+            }}
-                aria-pressed={speed === s}
+            title="Playback speed — tap to cycle"
-                title={`Play at ${s}× speed`}
+            aria-label={`Playback speed ${speed}×, tap to change`}
           >
-                {s}×
+            ⏱ {speed}×
           </button>
-            ))}
-          </div>
         </div>
       </div>
 

web/src/styles.css

@@ -1895,32 +1895,13 @@ h3 {
   gap: 18px;
 }
 
-/* Speed picker in the playback controls. */
+/* Playback-speed toggle: one button that cycles through the speed options on
-.battle-speed {
+   each press. A fixed min-width keeps the controls row from reflowing as the
-  display: flex;
+   label swaps between 0.5× / 1× / 1.5× / 2× / 3×. */
-  align-items: center;
+.battle-speed-toggle {
-  gap: 2px;
   margin-left: 4px;
-  padding-left: 6px;
+  min-width: 3.6em;
-  border-left: 1px solid rgba(253, 243, 220, 0.18);
+  font-variant-numeric: tabular-nums;
-}
-
-.battle-speed-label {
-  font-size: 0.9rem;
-  opacity: 0.7;
-  margin-right: 2px;
-}
-
-.battle-speed-btn {
-  min-width: 2.6em;
-  padding: 3px 5px;
-  font-size: 0.78rem;
-}
-
-.battle-speed-btn.is-active {
-  background: var(--gold);
-  color: #2a1d0c;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
 }
 
 .battle-header {
@@ -2817,18 +2798,314 @@ h3 {
   background: rgba(217, 74, 56, 0.92);
 }
 
+/* ============================================================
+   Phones, portrait — fit the whole game on one screen.
+
+   A modern smartphone held upright (≤ 600px wide) locks the app to the
+   viewport height so the page itself never scrolls: the topbar is a slim
+   fixed rail and the play area fills the rest. Cards, trays, and type all
+   shrink so a round of shopping or a battle reads at a glance. Card rows
+   scroll sideways when a full six-pet deck outgrows the width, so the
+   vertical layout stays put. The one screen allowed to grow past the
+   viewport is Arrange — you can field a lot of pets, so it scrolls.
+   ============================================================ */
 @media (max-width: 600px) {
+  /* --- app shell: lock to the viewport; only the play area scrolls --- */
+  html,
+  body,
+  #root {
+    height: 100%;
+    min-height: 0;
+  }
+  body {
+    overflow: hidden;
+  }
+  .table {
+    height: 100vh; /* fallback for browsers without dvh */
+    height: 100dvh;
+    min-height: 0;
+    overflow: hidden;
+  }
+  .topbar {
+    flex-shrink: 0;
+  }
+  .table-body {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    /* Stretch the play field to the body's full height (overriding the base
+       flex-start) so its own overflow-y can scroll — otherwise the column is
+       only as tall as its content and anything past the fold (e.g. the
+       end-of-battle "Next round" button) gets clipped instead of scrolled. */
+    align-items: stretch;
+  }
+  /* The play field fills the space under the rail and scrolls internally when a
+     phase runs long — the end-of-battle result, or an Arrange line with lots of
+     pets. Everything else is sized to fit, so the scrollbar rarely appears. */
+  .table-main {
+    flex: 1;
+    min-height: 0;
+    max-width: none;
+    padding: 10px 10px 14px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* --- topbar: a slim rail --- */
+  .topbar {
+    gap: 5px 8px;
+    padding: 5px 9px;
+  }
+  .topbar-brand {
+    font-size: 1.05rem;
+  }
+  /* The wordmark is redundant next to the paw on a phone — drop it to buy width
+     so the rail packs onto fewer rows. */
+  .topbar-brand span {
+    display: none;
+  }
+  /* Let the tags pack tight instead of stretching across a whole row. */
+  .topbar-players {
+    flex: 0 1 auto;
+    gap: 6px;
+  }
+  .topbar-round {
+    font-size: 0.82rem;
+  }
+  .topbar-player {
+    padding: 3px 9px;
+    font-size: 0.8rem;
+    gap: 5px;
+  }
+  .topbar-code {
+    font-size: 0.8rem;
+    letter-spacing: 0.18em;
+    padding: 3px 7px 3px calc(7px + 0.18em);
+  }
+  .chip {
+    font-size: 0.76rem;
+  }
+
+  /* --- cards: printed small --- */
   .card {
-    width: 92px;
+    width: 78px;
-    height: 128px;
+    height: 108px;
+    padding: 4px;
+    gap: 3px;
   }
   .card-lg {
-    width: 104px;
+    width: 82px;
-    height: 146px;
+    height: 114px;
+  }
+  .card-sm {
+    width: 60px;
+    height: 82px;
+  }
+  .card-power {
+    width: 23px;
+    height: 23px;
+    font-size: 0.72rem;
+  }
+  .card-lg .card-power {
+    width: 25px;
+    height: 25px;
+    font-size: 0.78rem;
+  }
+  .card-name {
+    font-size: 0.62rem;
+  }
+  .card-lg .card-name {
+    font-size: 0.66rem;
+  }
+  .card-effect {
+    font-size: 0.48rem;
+  }
+  .card-lg .card-effect {
+    font-size: 0.5rem;
+  }
+  .card-art {
+    font-size: 1.7rem;
+  }
+  .card-lg .card-art {
+    font-size: 1.85rem;
+  }
+  /* A lift on tap would poke out of a sideways-scrolling strip and trip its
+     scrollbar; keep the feedback small on touch. */
+  .card.is-clickable:hover {
+    transform: translateY(-3px);
+  }
+
+  /* --- shop: compact trays, one horizontal row each --- */
+  .shop {
+    gap: 10px;
+  }
+  .shop-status {
+    font-size: 0.95rem;
+    min-height: 1.3em;
+  }
+  .shop-coins {
+    min-height: 26px;
+    margin-bottom: 0;
+    gap: 4px;
+  }
+  .coin-disc {
+    font-size: 1.35rem;
+  }
+  .section-label {
+    font-size: 0.82rem;
+    margin-bottom: 6px;
+  }
+  .section-label .muted {
+    font-size: 0.72rem;
+  }
+  .shop-row-wrap,
+  .deck-wrap {
+    padding: 9px 10px 11px;
+    border-radius: 14px;
+  }
+  /* A full six-pet deck (or the shop row on a very narrow phone) scrolls
+     sideways; each tray keeps its height so nothing else shifts. A row that
+     isn't wide enough to scroll stays centered. */
+  .shop-row,
+  .deck-row {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    gap: 8px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    padding-bottom: 2px;
+    scrollbar-width: thin;
+  }
+  .shop-row {
+    justify-content: center;
+  }
+  .hint {
+    font-size: 0.76rem;
+  }
+  .actions {
+    gap: 8px;
+  }
+  .actions .btn {
+    padding: 9px 13px;
+    font-size: 0.86rem;
+  }
+
+  /* --- avocado / trumpet / mana trays --- */
+  .avocado-zone {
+    padding: 8px 10px 10px;
+  }
+  .trumpet-indicator {
+    margin-top: 8px;
+    font-size: 0.9rem;
+    padding: 4px 12px;
+  }
+
+  /* --- arrange: the one screen that may scroll past the viewport --- */
+  .arrange {
+    gap: 10px;
+  }
+  .arrange-col {
+    min-height: 0;
+    padding: 12px 12px 14px;
+    gap: 10px;
+  }
+  .arrange-marker {
+    font-size: 0.85rem;
+  }
+  .arrange-controls {
+    margin-left: 8px;
+  }
+  .arrange-handle {
+    min-width: 34px;
+    min-height: 34px;
+    font-size: 1.25rem;
+  }
+
+  /* --- battle: fit both sides and the clash between the rails --- */
+  .battle {
+    gap: 8px;
+  }
+  .battle-header {
+    gap: 8px;
+  }
+  .battle-header h2 {
+    font-size: 1.1rem;
+  }
+  .battle-controls {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 5px;
+    padding: 4px 6px;
+  }
+  .battle-speed-toggle {
+    margin-left: 2px;
+  }
+  .battle-names {
+    font-size: 0.9rem;
+    gap: 10px;
+  }
+  .battlefield {
+    padding: 8px 8px;
+    min-height: 0;
+    gap: 3px;
+    border-radius: 16px;
+  }
+  .battle-center {
+    font-size: 1.2rem;
+    min-height: 1.5rem;
+  }
+  .battle-side {
+    gap: 5px;
   }
   .battle-unit .card {
-    width: 78px;
+    width: 66px;
-    height: 134px;
+    height: 112px;
+  }
+  .battle-unit-zone {
+    min-width: 72px;
+    min-height: 112px;
+  }
+  .card-back {
+    width: 56px;
+    height: 78px;
+  }
+  .card-back-count {
+    width: 28px;
+    height: 28px;
+    font-size: 0.95rem;
+  }
+  /* Apples fan tighter so a big stack doesn't shove the pet off-centre. */
+  .food-fan-card:not(:first-child) {
+    margin-left: -50px;
+  }
+  .battle-result {
+    gap: 8px;
+  }
+  .battle-result-title {
+    font-size: 1.7rem;
+  }
+  .battle-result .btn-big {
+    font-size: 1.05rem;
+    padding: 11px 22px;
+  }
+
+  /* --- modals & game over --- */
+  .modal {
+    padding: 18px 16px;
+  }
+  .gameover {
+    gap: 14px;
+    min-height: 0;
+    padding: 16px 0;
+  }
+  .gameover-emoji {
+    font-size: 3rem;
+  }
+  .gameover-title {
+    font-size: 2.2rem;
+  }
+  .gameover-scores {
+    padding: 14px 18px;
   }
 }