diff --git a/.github/workflows/quality.yml b/.github/workflows/quality.yml
index 74e82d5..f1082db 100644
--- a/.github/workflows/quality.yml
+++ b/.github/workflows/quality.yml
@@ -43,7 +43,7 @@ jobs:
         run: bun run build
 
       - name: Install browser
-        run: bunx playwright install --with-deps chromium
+        run: bunx playwright install --with-deps chromium webkit
 
       - name: Browser tests
         run: bun run test:e2e
diff --git a/app/pingpong/CameraPanel.tsx b/app/pingpong/CameraPanel.tsx
index f1b9249..fbe97fc 100644
--- a/app/pingpong/CameraPanel.tsx
+++ b/app/pingpong/CameraPanel.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type CSSProperties } from "react";
 import { validCorners, type Corners, type XY } from "./vision/geometry";
 import type { Suggestion, VisionResult } from "./vision/tracker";
 import styles from "./pingpong.module.css";
@@ -27,6 +27,7 @@ export default function CameraPanel({
   onCameraLost,
 }: Props) {
   const video = useRef<HTMLVideoElement>(null);
+  const videoSize = useRef("");
   const stream = useRef<MediaStream | null>(null);
   const objectUrl = useRef<string | null>(null);
   const request = useRef(0);
@@ -55,6 +56,20 @@ export default function CameraPanel({
   useEffect(() => {
     callbacks.current.onReady(!!source && calibrated && !trackingError);
   }, [source, calibrated, trackingError]);
+  useEffect(() => {
+    const rotate = () => {
+      setCorners([]);
+      setResult(null);
+      callbacks.current.onReady(false);
+      callbacks.current.onCameraLost();
+    };
+    window.addEventListener("orientationchange", rotate);
+    window.screen.orientation?.addEventListener("change", rotate);
+    return () => {
+      window.removeEventListener("orientationchange", rotate);
+      window.screen.orientation?.removeEventListener("change", rotate);
+    };
+  }, []);
   useEffect(
     () => () => {
       request.current++;
@@ -65,6 +80,7 @@ export default function CameraPanel({
   );
 
   function releaseSource() {
+    videoSize.current = "";
     stream.current?.getTracks().forEach((track) => track.stop());
     stream.current = null;
     if (objectUrl.current) URL.revokeObjectURL(objectUrl.current);
@@ -140,8 +156,17 @@ export default function CameraPanel({
     setGeneration((value) => value + 1);
   }
   function metadata() {
-    if (video.current?.videoWidth)
-      setAspect(video.current.videoWidth / video.current.videoHeight);
+    const element = video.current;
+    if (!element?.videoWidth || !element.videoHeight) return;
+    const size = `${element.videoWidth}:${element.videoHeight}`;
+    if (videoSize.current && videoSize.current !== size) {
+      setCorners([]);
+      setResult(null);
+      callbacks.current.onReady(false);
+      callbacks.current.onCameraLost();
+    }
+    videoSize.current = size;
+    setAspect(element.videoWidth / element.videoHeight);
   }
 
   useEffect(() => {
@@ -282,12 +307,18 @@ export default function CameraPanel({
         <span className={styles.kicker}>02 / Cámara</span>
         <span className={styles.localBadge}>● Solo en tu teléfono</span>
       </div>
-      <div className={styles.videoFrame} style={{ aspectRatio: aspect }}>
+      <div
+        className={styles.videoFrame}
+        style={
+          { aspectRatio: aspect, "--camera-aspect": aspect } as CSSProperties
+        }
+      >
         <video
           ref={video}
           playsInline
           muted
           onLoadedMetadata={metadata}
+          onResize={metadata}
           onEnded={() => {
             callbacks.current.onCameraLost();
             setError("Terminó el video. Revisa el marcador.");
@@ -468,7 +499,7 @@ export default function CameraPanel({
               </span>
             </div>
             {!calibrated ? (
-              <p className={styles.instructions}>
+              <p id="calibration-help" className={styles.instructions}>
                 {corners.length < 4 ? (
                   <>
                     Toca la esquina{" "}
@@ -480,7 +511,7 @@ export default function CameraPanel({
                 )}
               </p>
             ) : (
-              <p className={styles.instructions}>
+              <p id="calibration-help" className={styles.instructions}>
                 Mesa calibrada.{" "}
                 {active
                   ? "El conteo experimental está activo."
diff --git a/app/pingpong/PingPongClient.tsx b/app/pingpong/PingPongClient.tsx
index a2fc1fd..5b0199b 100644
--- a/app/pingpong/PingPongClient.tsx
+++ b/app/pingpong/PingPongClient.tsx
@@ -134,6 +134,9 @@ export default function PingPongClient() {
     (item) => !item.finished && scoreMatch(item).winner === null,
   );
 
+  useEffect(() => {
+    window.scrollTo({ top: 0, left: 0, behavior: "instant" });
+  }, [screen]);
   useEffect(() => {
     activeMatch.current = match;
   }, [match]);
@@ -202,7 +205,7 @@ export default function PingPongClient() {
     };
     document.addEventListener("visibilitychange", visibility);
     const rotate = () => {
-      if (activeMatch.current?.mode !== "manual") {
+      if (activeMatch.current && activeMatch.current.mode !== "manual") {
         setPaused(true);
         setReady(false);
         setMessage(
@@ -211,9 +214,11 @@ export default function PingPongClient() {
       }
     };
     window.addEventListener("orientationchange", rotate);
+    window.screen.orientation?.addEventListener("change", rotate);
     return () => {
       document.removeEventListener("visibilitychange", visibility);
       window.removeEventListener("orientationchange", rotate);
+      window.screen.orientation?.removeEventListener("change", rotate);
     };
   }, []);
   useEffect(() => {
@@ -445,7 +450,11 @@ export default function PingPongClient() {
   const modalOpen = help || !!pending || sideChange || finishDialog;
 
   return (
-    <main id="main" lang="es" className={styles.app}>
+    <main
+      id="main"
+      lang="es"
+      className={`${styles.app} ${screen === "match" ? styles.matchScreen : ""}`}
+    >
       <div className={styles.container} inert={modalOpen ? true : undefined}>
         <header className={styles.header}>
           <button
@@ -674,6 +683,21 @@ export default function PingPongClient() {
                 <h1>{completed ? "Buen partido." : "Un punto más."}</h1>
               </div>
               <div className={styles.matchToggles}>
+                <button
+                  className={styles.smallButton}
+                  disabled={
+                    completed ||
+                    sideChange ||
+                    (!ready && match.mode !== "manual" && paused)
+                  }
+                  onClick={() => {
+                    setPaused(!paused);
+                    setPending(null);
+                  }}
+                >
+                  {paused ? "▶ Reanudar" : "Ⅱ Pausa"}
+                </button>
+
                 <button
                   className={styles.smallButton}
                   aria-pressed={sound}
@@ -717,7 +741,10 @@ export default function PingPongClient() {
                       }
                       key={player}
                     >
-                      <div className={styles.playerName}>
+                      <div
+                        className={styles.playerName}
+                        title={match.players[player]}
+                      >
                         {match.players[player]}
                       </div>
                       <div
@@ -799,20 +826,6 @@ export default function PingPongClient() {
                   >
                     Corregir último
                   </button>
-                  <button
-                    className={styles.smallButton}
-                    disabled={
-                      completed ||
-                      sideChange ||
-                      (!ready && match.mode !== "manual" && paused)
-                    }
-                    onClick={() => {
-                      setPaused(!paused);
-                      setPending(null);
-                    }}
-                  >
-                    {paused ? "▶ Reanudar" : "Ⅱ Pausa"}
-                  </button>
                   <button
                     className={styles.smallButton}
                     disabled={completed || paused}
diff --git a/app/pingpong/pingpong.module.css b/app/pingpong/pingpong.module.css
index 9d56b76..ed644ed 100644
--- a/app/pingpong/pingpong.module.css
+++ b/app/pingpong/pingpong.module.css
@@ -979,3 +979,217 @@
     transition: none;
   }
 }
+
+/* Keep the live view and score together on short, horizontal screens. */
+@media (orientation: landscape) and (max-height: 600px) {
+  .app {
+    padding: max(8px, env(safe-area-inset-top))
+      max(16px, env(safe-area-inset-right))
+      max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
+  }
+  .header {
+    padding: 0 0 4px;
+  }
+  .headerCaption {
+    display: none;
+  }
+  .brand {
+    font-size: 22px;
+  }
+  .brandMark {
+    width: 30px;
+    height: 30px;
+    font-size: 24px;
+  }
+  .iconButton {
+    width: 44px;
+    height: 44px;
+    flex-shrink: 0;
+  }
+  .hero {
+    padding: 24px 0;
+    grid-template-columns: 1.1fr 1fr;
+    gap: 20px;
+  }
+  .hero h1 {
+    font-size: clamp(38px, 6vw, 60px);
+    margin: 14px 0;
+  }
+  .heroVisual {
+    min-height: 260px;
+  }
+  .heroActions {
+    margin-top: 18px;
+  }
+  .matchHeading {
+    margin: 6px 0;
+    align-items: center;
+    gap: 8px;
+  }
+  .matchHeading .kicker {
+    display: none;
+  }
+  .matchHeading h1 {
+    font-size: 18px;
+    margin: 0;
+  }
+  .matchToggles {
+    flex-direction: row;
+    gap: 6px;
+  }
+  .matchToggles .smallButton {
+    min-height: 44px;
+    padding: 8px 10px;
+    font-size: 11px;
+  }
+  .matchScreen .matchGrid {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
+    max-width: none;
+    gap: 12px;
+  }
+  .matchScreen .manualGrid {
+    grid-template-columns: minmax(0, 1fr);
+    max-width: 850px;
+  }
+  .scorePanel,
+  .cameraPanel {
+    max-height: calc(
+      100dvh - 108px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
+    );
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+  }
+  .panelHead {
+    padding: 7px 12px;
+    min-height: 30px;
+    font-size: 9px;
+  }
+  .scoreboard {
+    padding: 8px 4px;
+  }
+  .playerOne,
+  .playerTwo {
+    padding-inline: 10px;
+  }
+  .playerName {
+    font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .bigScore,
+  .manualGrid .bigScore {
+    font-size: clamp(48px, 16dvh, 72px);
+    line-height: 1.1;
+  }
+  .playerMeta {
+    margin: 2px 0 6px;
+    font-size: 11px;
+    min-height: 16px;
+  }
+  .pointButton {
+    min-height: 44px;
+    font-size: 20px;
+  }
+  .gameStatus {
+    font-size: 12px;
+    margin: 0 12px 8px;
+  }
+  .setHistory {
+    padding: 0 12px 8px;
+    gap: 10px;
+  }
+  .matchControls {
+    padding: 8px;
+    gap: 6px;
+  }
+  .matchControls .smallButton {
+    flex: 1 1 auto;
+    padding-inline: 8px;
+  }
+  .matchFooter {
+    flex-wrap: wrap;
+    gap: 0 10px;
+    padding-inline: 12px;
+  }
+  .scorePanel > .instructions {
+    padding: 0 12px 8px;
+    font-size: 12px;
+  }
+  .videoFrame {
+    width: min(
+      100%,
+      calc(
+        (
+            100dvh - 208px - env(safe-area-inset-top) -
+              env(safe-area-inset-bottom)
+          ) *
+          var(--camera-aspect)
+      )
+    );
+    margin-inline: auto;
+  }
+  .videoFrame:has(.cameraPlaceholder) {
+    width: 100%;
+    height: 64px;
+  }
+  .cameraPlaceholder {
+    flex-direction: row;
+    gap: 10px;
+  }
+  .cameraPlaceholder svg {
+    width: 28px;
+    margin: 0;
+  }
+  .cameraPlaceholder strong {
+    font-size: 14px;
+  }
+  .cameraPlaceholder span {
+    display: none;
+  }
+  .cameraBody > .primary {
+    min-height: 44px;
+    padding-block: 10px;
+  }
+  .cameraBody {
+    padding: 8px 12px;
+  }
+  .instructions {
+    padding: 6px 0;
+    font-size: 12px;
+  }
+  .localBadge {
+    font-size: 8px;
+    letter-spacing: 0;
+  }
+  .modalBackdrop {
+    padding: max(12px, env(safe-area-inset-top))
+      max(16px, env(safe-area-inset-right))
+      max(12px, env(safe-area-inset-bottom))
+      max(16px, env(safe-area-inset-left));
+  }
+  .modal {
+    max-height: calc(
+      100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
+    );
+    padding: 18px 24px;
+    overscroll-behavior: contain;
+  }
+  .modal h2 {
+    font-size: 27px;
+    margin: 8px 0;
+  }
+  .modal p,
+  .modal ol {
+    margin-bottom: 12px;
+  }
+  .pendingChoices {
+    margin: 12px 0 8px;
+  }
+  .choiceCyan,
+  .choiceOrange {
+    min-height: 48px;
+    padding-block: 12px;
+  }
+}
diff --git a/docs/pingpong/README.md b/docs/pingpong/README.md
index b3fffb8..fe68d9f 100644
--- a/docs/pingpong/README.md
+++ b/docs/pingpong/README.md
@@ -40,11 +40,11 @@ bun run lint
 bun run typecheck
 bun run test
 bun run build
-bunx playwright install chromium
+bunx playwright install chromium webkit
 bun run test:e2e
 ```
 
-Playwright runs desktop and mobile-size Chromium against a production build. For a deployed build, set `PINGPONG_TEST_URL` to the deployment origin. Synthetic camera streams exercise capture, calibration and worker transport; they do not validate physical game accuracy. Unit tests use Node's existing test runner to avoid a second testing framework.
+Playwright runs desktop, portrait and two landscape phone sizes in Chromium, plus landscape camera/rotation/dialog checks in WebKit, against a production build. In landscape, camera and score share the screen, pause/resume stays above both panels, and secondary controls scroll inside each panel. Rotation or video dimension changes pause the match and clear calibration without clearing points. For a deployed build, set `PINGPONG_TEST_URL` to the deployment origin. Synthetic camera streams exercise capture, calibration and worker transport; they do not validate physical game accuracy. Unit tests use Node's existing test runner to avoid a second testing framework.
 
 ## PWA and privacy
 
diff --git a/docs/pingpong/validation-report.md b/docs/pingpong/validation-report.md
index 4d4f8c1..7bde1f5 100644
--- a/docs/pingpong/validation-report.md
+++ b/docs/pingpong/validation-report.md
@@ -7,8 +7,8 @@ Local production validation passed:
 - Formatting and ESLint: passed.
 - TypeScript and production build: passed.
 - Node tests: 18 passed (16 PingPong + 2 existing portfolio tests).
-- Playwright: 14 passed across desktop and mobile-size Chromium, including real worker transport and synthetic automatic proposal/correction.
-- Visual inspection: desktop landing and mobile landing/scoreboard screenshots; no horizontal overflow in viewport checks.
+- Playwright: 41 passed across desktop, portrait and landscape Chromium (844 × 390 and 568 × 320), plus landscape WebKit. Six landscape-only cases are excluded from portrait/desktop views. Includes real worker transport, synthetic automatic proposal/correction and assisted confirmation.
+- Visual inspection: desktop/portrait landing and horizontal phone camera/scoreboard screenshots. Viewport assertions cover scores, calibration view, pause/resume, long names and dialogs; no horizontal overflow.
 
 Deployment SHA and production status are recorded in the GitHub PR/deployment history. These results do not establish real-game precision.
 
@@ -18,7 +18,7 @@ Core: service rotation, deuce, win by two, set transitions, deciding-set side sw
 
 Vision: moving white/orange pixels, rejecting static bright pixels, requiring confirmation after a missing ball, and invalidating evidence after capture gaps. These are synthetic inputs, not filmed games.
 
-Browser: complete manual game, service, undo, correction, persist/reload, result and rematch; camera denial/manual fallback; synthetic camera capture/calibration/worker trail; help dialog keyboard handling and mobile layout; portfolio and privacy smoke checks.
+Browser: complete manual game, service, undo, correction, persist/reload, result and rematch; camera denial/manual fallback; synthetic camera capture/calibration/worker trail; help dialog keyboard handling and mobile layout; portfolio and privacy smoke checks. Landscape adds camera and score side by side, detection settings, scrolling short dialogs, portrait-to-landscape transitions, legacy/modern orientation events, frame-size changes and successful recalibration with points retained.
 
 ## Required physical evaluation
 
diff --git a/playwright.config.ts b/playwright.config.ts
index f50de36..b7e175d 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -14,6 +14,25 @@ export default defineConfig({
       name: "mobile",
       use: { ...devices["iPhone 13"], defaultBrowserType: "chromium" },
     },
+    {
+      name: "landscape",
+      use: {
+        ...devices["iPhone 13 landscape"],
+        defaultBrowserType: "chromium",
+      },
+    },
+    {
+      name: "compact-landscape",
+      use: {
+        ...devices["iPhone SE landscape"],
+        defaultBrowserType: "chromium",
+      },
+    },
+    {
+      name: "webkit-landscape",
+      testMatch: "**/pingpong-landscape.spec.ts",
+      use: { ...devices["iPhone 13 landscape"], browserName: "webkit" },
+    },
   ],
   webServer: process.env.PINGPONG_TEST_URL
     ? undefined
diff --git a/tests/e2e/pingpong-landscape.spec.ts b/tests/e2e/pingpong-landscape.spec.ts
new file mode 100644
index 0000000..dc3af03
--- /dev/null
+++ b/tests/e2e/pingpong-landscape.spec.ts
@@ -0,0 +1,213 @@
+import { expect, test, type Locator, type Page } from "@playwright/test";
+
+test.beforeEach(({ page }) => {
+  const size = page.viewportSize();
+  test.skip(!size || size.width < size.height || size.height > 600);
+});
+
+async function setup(page: Page, mode = "assisted") {
+  await page.goto("/pingpong");
+  await page
+    .getByRole("button", { name: "Nuevo partido", exact: false })
+    .click();
+  await page
+    .getByPlaceholder("Jugador 1", { exact: true })
+    .fill("Alejandro Sandoval");
+  await page
+    .getByPlaceholder("Jugador 2", { exact: true })
+    .fill("Amigo de Alejandro");
+  await page.locator(`input[name=mode][value=${mode}]`).check();
+  await page.getByRole("button", { name: "Empezar partido" }).click();
+}
+
+async function inViewport(locator: Locator, page: Page) {
+  const bounds = await locator.boundingBox();
+  const size = page.viewportSize()!;
+  expect(bounds).not.toBeNull();
+  expect(bounds!.x).toBeGreaterThanOrEqual(0);
+  expect(bounds!.y).toBeGreaterThanOrEqual(0);
+  expect(bounds!.x + bounds!.width).toBeLessThanOrEqual(size.width + 1);
+  expect(bounds!.y + bounds!.height).toBeLessThanOrEqual(size.height + 1);
+}
+
+async function fakeCamera(page: Page) {
+  await page.addInitScript(() => {
+    const canvas = document.createElement("canvas");
+    canvas.width = 640;
+    canvas.height = 360;
+    const context = canvas.getContext("2d")!;
+    let x = 0;
+    setInterval(() => {
+      context.fillStyle = "#14202a";
+      context.fillRect(0, 0, canvas.width, canvas.height);
+      context.fillStyle = "white";
+      context.beginPath();
+      context.arc(140 + (x++ % 100) * 3, 230, 4, 0, Math.PI * 2);
+      context.fill();
+    }, 33);
+    Object.defineProperty(navigator, "mediaDevices", {
+      value: { getUserMedia: () => Promise.resolve(canvas.captureStream(30)) },
+      configurable: true,
+    });
+    (window as typeof window & { rotateVideo: () => void }).rotateVideo =
+      () => {
+        canvas.width = 360;
+        canvas.height = 640;
+      };
+  });
+}
+
+async function calibrate(page: Page) {
+  const overlay = page.getByRole("img", {
+    name: "Vista de calibración de la mesa",
+  });
+  await inViewport(overlay, page);
+  const bounds = (await overlay.boundingBox())!;
+  for (const [x, y] of [
+    [0.1, 0.85],
+    [0.9, 0.85],
+    [0.9, 0.15],
+    [0.1, 0.15],
+  ]) {
+    await overlay.click({
+      position: { x: x * bounds.width, y: y * bounds.height },
+    });
+  }
+  await expect(
+    page.getByText("Mesa calibrada.", { exact: false }),
+  ).toBeVisible();
+  await expect(page.getByRole("button", { name: "Reanudar" })).toBeEnabled();
+}
+
+test("landscape keeps camera, scores and pause visible without page scrolling", async ({
+  page,
+}) => {
+  await fakeCamera(page);
+  await setup(page);
+  await expect(
+    page.getByRole("button", { name: "Activar cámara", exact: true }),
+  ).toBeVisible();
+  expect(await page.evaluate(() => window.scrollY)).toBe(0);
+  for (const selector of ["score-0", "score-1"])
+    await inViewport(page.getByTestId(selector), page);
+  await inViewport(page.getByRole("button", { name: "Reanudar" }), page);
+  await inViewport(
+    page.getByRole("button", {
+      name: "Punto para Alejandro Sandoval",
+      exact: true,
+    }),
+    page,
+  );
+  const score = (await page
+    .getByRole("region", { name: "Marcador", exact: true })
+    .boundingBox())!;
+  const camera = (await page
+    .getByRole("region", { name: "Cámara y seguimiento" })
+    .boundingBox())!;
+  expect(camera.x).toBeGreaterThan(score.x + score.width);
+  await page
+    .getByRole("button", { name: "Activar cámara", exact: true })
+    .click();
+  await calibrate(page);
+  await page.getByRole("button", { name: "Reanudar" }).click();
+  await inViewport(
+    page.getByRole("button", { name: "Pausa", exact: false }),
+    page,
+  );
+  await page
+    .getByRole("button", { name: "Punto para Alejandro Sandoval", exact: true })
+    .click();
+  await expect(page.getByTestId("score-0")).toHaveText("01");
+  await page.getByRole("button", { name: "Pausa", exact: false }).click();
+  await page.getByRole("button", { name: "Ajustar detección" }).click();
+  await page
+    .getByRole("combobox", { name: "Pelota", exact: true })
+    .selectOption("orange");
+  await expect(
+    page.getByRole("combobox", { name: "Pelota", exact: true }),
+  ).toHaveValue("orange");
+  expect(
+    await page.evaluate(
+      () => document.documentElement.scrollWidth <= innerWidth,
+    ),
+  ).toBe(true);
+});
+
+test("orientation events and resized camera frames invalidate calibration and can recover", async ({
+  page,
+}) => {
+  await fakeCamera(page);
+  await setup(page);
+  await page
+    .getByRole("button", { name: "Activar cámara", exact: true })
+    .click();
+  await calibrate(page);
+  await page.getByRole("button", { name: "Reanudar" }).click();
+  await page
+    .getByRole("button", { name: "Punto para Alejandro Sandoval", exact: true })
+    .click();
+  const landscape = page.viewportSize()!;
+  for (const modern of [false, true]) {
+    if (!modern)
+      await page.setViewportSize({
+        width: landscape.height,
+        height: landscape.width,
+      });
+    await page.evaluate((modern) => {
+      if (modern) screen.orientation.dispatchEvent(new Event("change"));
+      else window.dispatchEvent(new Event("orientationchange"));
+    }, modern);
+    await expect(page.getByRole("button", { name: "Reanudar" })).toBeDisabled();
+    await expect(page.locator("#calibration-help")).toContainText(
+      "cercana izquierda",
+    );
+    await expect(page.getByTestId("score-0")).toHaveText("01");
+    if (!modern) {
+      await page.setViewportSize(landscape);
+      await page.evaluate(() =>
+        window.dispatchEvent(new Event("orientationchange")),
+      );
+    }
+    await calibrate(page);
+    await page.getByRole("button", { name: "Reanudar" }).click();
+  }
+  await page.evaluate(() =>
+    (window as typeof window & { rotateVideo: () => void }).rotateVideo(),
+  );
+  await expect(page.locator("video")).toHaveJSProperty("videoWidth", 360);
+  await expect(page.getByRole("button", { name: "Reanudar" })).toBeDisabled();
+  await calibrate(page);
+  await page.getByRole("button", { name: "Reanudar" }).click();
+  await expect(
+    page.getByRole("button", { name: "Pausa", exact: false }),
+  ).toBeEnabled();
+});
+
+test("short-screen dialogs keep their actions reachable and manual play survives rotation", async ({
+  page,
+}) => {
+  await setup(page, "manual");
+  await inViewport(
+    page.getByRole("button", {
+      name: "Punto para Alejandro Sandoval",
+      exact: true,
+    }),
+    page,
+  );
+  await page.evaluate(() =>
+    window.dispatchEvent(new Event("orientationchange")),
+  );
+  await page
+    .getByRole("button", { name: "Punto para Alejandro Sandoval", exact: true })
+    .click();
+  await expect(page.getByTestId("score-0")).toHaveText("01");
+  await page
+    .getByRole("button", { name: "Terminar partido", exact: true })
+    .click();
+  await inViewport(page.getByRole("dialog"), page);
+  await page.getByRole("button", { name: "Volver al partido" }).click();
+  await page.getByRole("button", { name: "Cómo funciona" }).click();
+  await inViewport(page.getByRole("dialog"), page);
+  await page.getByRole("button", { name: "Entendido" }).click();
+  await expect(page.getByRole("dialog")).not.toBeVisible();
+});
diff --git a/tests/e2e/pingpong.spec.ts b/tests/e2e/pingpong.spec.ts
index 38aa1e9..f136445 100644
--- a/tests/e2e/pingpong.spec.ts
+++ b/tests/e2e/pingpong.spec.ts
@@ -144,66 +144,81 @@ test("portfolio and privacy still render", async ({ page }) => {
   await expect(page.locator("h1")).toBeVisible();
 });
 
-test("automatic beta scores a synthetic double-bounce proposal and it remains correctable", async ({
-  page,
-}) => {
-  await page.addInitScript(() => {
-    const canvas = document.createElement("canvas");
-    canvas.width = 640;
-    canvas.height = 360;
-    const context = canvas.getContext("2d")!;
-    const ys: number[] = [];
-    for (let i = 0; i < 15; i++) ys.push(65 - i * 3);
-    for (let i = 0; i < 15; i++) ys.push(23 + i * 3);
-    ys.push(67, 70, 73, 76, 73, 70, 67, 64, 62, 65, 68, 71, 74, 71, 68);
-    let index = -1;
-    (window as typeof window & { startRally: () => void }).startRally = () => {
-      index = 0;
-    };
-    setInterval(() => {
-      context.fillStyle = "#14202a";
-      context.fillRect(0, 0, 640, 360);
-      context.fillStyle = "white";
-      const x = index < 0 ? 60 : 60 + Math.min(index, ys.length - 1);
-      const y = index < 0 ? 65 : ys[Math.min(index, ys.length - 1)];
-      context.fillRect((x - 1) * 4, (y - 1) * 4, 12, 12);
-      if (index >= 0 && index < ys.length - 1) index++;
-    }, 33);
-    Object.defineProperty(navigator, "mediaDevices", {
-      value: { getUserMedia: () => Promise.resolve(canvas.captureStream(30)) },
-      configurable: true,
+for (const mode of ["automatic", "assisted"]) {
+  test(`${mode} mode handles a synthetic double-bounce proposal and correction`, async ({
+    page,
+  }) => {
+    await page.addInitScript(() => {
+      const canvas = document.createElement("canvas");
+      canvas.width = 640;
+      canvas.height = 360;
+      const context = canvas.getContext("2d")!;
+      const ys: number[] = [];
+      for (let i = 0; i < 15; i++) ys.push(65 - i * 3);
+      for (let i = 0; i < 15; i++) ys.push(23 + i * 3);
+      ys.push(67, 70, 73, 76, 73, 70, 67, 64, 62, 65, 68, 71, 74, 71, 68);
+      let index = -1;
+      (window as typeof window & { startRally: () => void }).startRally =
+        () => {
+          index = 0;
+        };
+      setInterval(() => {
+        context.fillStyle = "#14202a";
+        context.fillRect(0, 0, 640, 360);
+        context.fillStyle = "white";
+        const x = index < 0 ? 60 : 60 + Math.min(index, ys.length - 1);
+        const y = index < 0 ? 65 : ys[Math.min(index, ys.length - 1)];
+        context.fillRect((x - 1) * 4, (y - 1) * 4, 12, 12);
+        if (index >= 0 && index < ys.length - 1) index++;
+      }, 33);
+      Object.defineProperty(navigator, "mediaDevices", {
+        value: {
+          getUserMedia: () => Promise.resolve(canvas.captureStream(30)),
+        },
+        configurable: true,
+      });
     });
-  });
-  await setup(page, "automatic", "3");
-  await page
-    .getByRole("button", { name: "Activar cámara", exact: true })
-    .click();
-  const overlay = page.getByRole("img", {
-    name: "Vista de calibración de la mesa",
-  });
-  await expect(overlay).toBeVisible();
-  const bounds = await overlay.boundingBox();
-  if (!bounds) throw new Error("Missing camera");
-  for (const [x, y] of [
-    [0.1, 0.85],
-    [0.9, 0.85],
-    [0.9, 0.15],
-    [0.1, 0.15],
-  ])
-    await overlay.click({
-      position: { x: x * bounds.width, y: y * bounds.height },
+    await setup(page, mode, "3");
+    await page
+      .getByRole("button", { name: "Activar cámara", exact: true })
+      .click();
+    const overlay = page.getByRole("img", {
+      name: "Vista de calibración de la mesa",
     });
-  await page.getByRole("button", { name: "Reanudar" }).click();
-  await page.evaluate(() =>
-    (window as typeof window & { startRally: () => void }).startRally(),
-  );
-  await expect(page.getByTestId("score-1")).toHaveText("01", {
-    timeout: 10000,
+    await expect(overlay).toBeVisible();
+    const bounds = await overlay.boundingBox();
+    if (!bounds) throw new Error("Missing camera");
+    for (const [x, y] of [
+      [0.1, 0.85],
+      [0.9, 0.85],
+      [0.9, 0.15],
+      [0.1, 0.15],
+    ])
+      await overlay.click({
+        position: { x: x * bounds.width, y: y * bounds.height },
+      });
+    await page.getByRole("button", { name: "Reanudar" }).click();
+    await page.evaluate(() =>
+      (window as typeof window & { startRally: () => void }).startRally(),
+    );
+    if (mode === "assisted") {
+      const dialog = page.getByRole("dialog", { name: "Confirma el punto" });
+      await expect(dialog).toBeVisible({ timeout: 10000 });
+      const bounds = (await dialog.boundingBox())!;
+      expect(bounds.y).toBeGreaterThanOrEqual(0);
+      expect(bounds.y + bounds.height).toBeLessThanOrEqual(
+        page.viewportSize()!.height + 1,
+      );
+      await dialog.getByRole("button", { name: "Amigo +1" }).click();
+    }
+    await expect(page.getByTestId("score-1")).toHaveText("01", {
+      timeout: 10000,
+    });
+    await page.getByRole("button", { name: "Corregir último" }).click();
+    await expect(page.getByTestId("score-0")).toHaveText("01");
+    await expect(page.getByTestId("score-1")).toHaveText("00");
   });
-  await page.getByRole("button", { name: "Corregir último" }).click();
-  await expect(page.getByTestId("score-0")).toHaveText("01");
-  await expect(page.getByTestId("score-1")).toHaveText("00");
-});
+}
 
 test("undoing a deciding-set side change asks players to restore their positions", async ({
   page,