/* ── Phone landscape: shared scale ─────────────────────────────
   The board pages (/analysis, GameRoom, PuzzleRoom) keep the desktop split when the phone is
   turned sideways, but a phone lying down is ~375px tall: the board ends up around a third of
   its desktop size, and desktop type sits on it like a caption on a stamp. Everything around
   the board scales with it, off the tokens below, so the three pages stay consistent.

   The topbar is the single largest fixed cost on that screen — 3.5rem is 15% of the viewport —
   so it comes down too. Scoped to the board pages with :has(), because the pages that are
   about a board are the ones paying for the chrome; the lobby keeps the full-size bar.

   See docs/phone-landscape-layout.md. Loaded last in index.html, so equal specificity wins
   against the scoped component styles it overrides. */
@media (max-width: 1024px) and (max-height: 620px) and (orientation: landscape) {
    .page:has(.game-room-layout),
    .page:has(.puzzle-room-layout),
    .page:has(.pgn-reader) {
        --ls-topbar: 2.4rem;
        --ls-title: 0.82rem;
        --ls-text: 0.72rem;
        --ls-text-sm: 0.64rem;
        --ls-name: 0.85rem;
        --ls-btn: 1.55rem;
        --ls-glyph: 0.68rem;
        --ls-line: 1.5;
    }

    .page:has(.game-room-layout) .topbar,
    .page:has(.puzzle-room-layout) .topbar,
    .page:has(.pgn-reader) .topbar {
        min-height: var(--ls-topbar);
        gap: 0.85rem;
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .page:has(.game-room-layout) .topbar-logo,
    .page:has(.puzzle-room-layout) .topbar-logo,
    .page:has(.pgn-reader) .topbar-logo {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 0.4rem;
    }

    .page:has(.game-room-layout) .topbar-brand,
    .page:has(.puzzle-room-layout) .topbar-brand,
    .page:has(.pgn-reader) .topbar-brand {
        gap: 0.4rem;
    }

    .page:has(.game-room-layout) .topbar-wordmark,
    .page:has(.puzzle-room-layout) .topbar-wordmark,
    .page:has(.pgn-reader) .topbar-wordmark {
        font-size: 0.92rem;
    }

    .page:has(.game-room-layout) .topbar-nav .nav-link,
    .page:has(.puzzle-room-layout) .topbar-nav .nav-link,
    .page:has(.pgn-reader) .topbar-nav .nav-link {
        padding: 0.25rem 0.55rem;
        font-size: 0.82rem;
    }

    .page:has(.game-room-layout) .topbar-auth,
    .page:has(.puzzle-room-layout) .topbar-auth,
    .page:has(.pgn-reader) .topbar-auth {
        gap: 0.65rem;
        font-size: 0.82rem;
    }

    .page:has(.game-room-layout) .feedback-trigger,
    .page:has(.puzzle-room-layout) .feedback-trigger,
    .page:has(.pgn-reader) .feedback-trigger {
        font-size: 0.82rem;
    }

    .page:has(.game-room-layout) .topbar-auth .auth-links a.auth-signup-btn,
    .page:has(.puzzle-room-layout) .topbar-auth .auth-links a.auth-signup-btn,
    .page:has(.pgn-reader) .topbar-auth .auth-links a.auth-signup-btn {
        padding: 0.2rem 0.6rem;
        border-radius: 0.35rem;
    }

    .page:has(.game-room-layout) .topbar-auth .auth-links,
    .page:has(.puzzle-room-layout) .topbar-auth .auth-links,
    .page:has(.pgn-reader) .topbar-auth .auth-links {
        gap: 0.6rem;
    }
}