/*
 * Phone landscape only.
 *
 * Landscape phones are typically 667–956px wide, so they match the desktop
 * (min-width: 641px) rules: 250px sidebar, hidden hamburger, and width-based
 * table/card sizes that overflow the short viewport.
 *
 * Existing 641px / portrait queries are left unchanged so tablets, desktops,
 * and portrait phones keep their current layout. This file is loaded last and
 * only applies on short landscape viewports with a coarse pointer (phones /
 * phone WebViews), capped at 1023px wide.
 */
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
    /* ------------------------------------------------------------------ */
    /* App chrome: keep the compact top bar + hamburger, not the sidebar. */
    /* ------------------------------------------------------------------ */
    #mainLayout.page {
        flex-direction: column;
        --landscape-nav-height: 34px;
        --landscape-identity-height: 30px;
        --identity-row-height: var(--landscape-identity-height);
    }

    #mainLayout .sidebar {
        width: auto;
        min-width: 0;
        max-width: none;
        height: var(--landscape-nav-height);
        box-shadow: none;
        background: var(--top-row-background-color);
    }

    #mainLayout .top-row.navbar {
        height: var(--landscape-nav-height);
        border-bottom-width: thin;
        border-bottom-style: solid;
    }

    #mainLayout .navbar-side {
        min-height: 0;
        height: var(--landscape-nav-height);
    }

    #mainLayout .brand-name {
        font-size: 0.85rem;
        line-height: 1;
    }

    #mainLayout .brand-suits {
        font-size: 0.62rem;
        gap: 0.04rem;
        line-height: 1;
    }

    #mainLayout .navbar-brand-logo {
        line-height: 1.05;
    }

    #mainLayout .button-menu-toggler {
        display: inline-flex !important;
        position: relative !important;
        right: auto !important;
        min-height: 28px !important;
        min-width: 28px !important;
        padding: 0.1rem !important;
    }

    #mainLayout .button-menu-toggler svg {
        width: 18px !important;
        height: 18px !important;
    }

    #mainLayout .main-column > main > .top-row {
        height: var(--landscape-identity-height);
        padding-top: 0;
        padding-bottom: 0;
        font-size: 0.72rem;
        gap: 0.4rem;
    }

    #mainLayout .main-column > main > .top-row .circular_image {
        width: 22px;
        height: 22px;
    }

    #mainLayout .main-column > main > .top-row b,
    #mainLayout .main-column > main > .top-row a,
    #mainLayout .main-column > main > .top-row .rz-link {
        font-size: 0.72rem;
        line-height: 1.15;
    }

    #mainLayout .container-fluid {
        position: static;
        padding: 0;
    }

    #mainLayout .nav-menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: calc(var(--rz-dialog-zindex) - 2);
        background: transparent;
        cursor: default;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #mainLayout .nav-menu-backdrop.nav-menu-backdrop--visible {
        opacity: 1;
        pointer-events: auto;
    }

    #mainLayout .top-second-row {
        position: absolute;
        width: -webkit-fill-available;
        width: 100%;
        z-index: calc(var(--rz-dialog-zindex) - 1);
        border-bottom: solid;
        border-bottom-width: thin;
        background: var(--top-row-background-color);
        overflow: hidden;
        max-height: min(32rem, calc(100dvh - var(--landscape-nav-height)));
        opacity: 1;
        transform: translateY(0);
        transform-origin: top center;
        transition:
            max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
            border-bottom-color 0.28s ease;
    }

    #mainLayout .top-second-row.nav-menu-expanded {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #mainLayout .top-second-row.nav-menu-collapsed {
        max-height: 0;
        opacity: 0;
        transform: translateY(-0.35rem);
        border-bottom-color: transparent;
        pointer-events: none;
        overflow: hidden;
    }

    .cookie-consent {
        left: 0;
        width: 100%;
        max-width: 100vw;
    }

    /* Games: keep the tab strip at the bottom (thumb zone), not desktop-on-top. */
    #mainLayout .games-page-shell .mud-tabs,
    #mainLayout .games-page-shell .mud-tabs.mud-tabs-reverse {
        flex-direction: column-reverse;
    }

    #mainLayout .games-page-shell .mud-tabs-tabbar {
        border-top: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
        border-bottom: none;
        padding-bottom: 0;
    }

    #mainLayout .games-scroll-to-top {
        bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }

    #mainLayout .playground-page-back {
        display: block;
    }

    /* ------------------------------------------------------------------ */
    /* Playground: smaller felt so the hand does not collide with the trick. */
    /* ------------------------------------------------------------------ */
    .playground {
        --playground-table-circle-size: clamp(13.5rem, 26.5svw, 17.25rem);
        --playground-table-circle-center-y: 50%;
        --playground-bottom-seat-height: 2.85rem;
        --playground-bottom-seat-shift-y: min(-0.8svh, calc(var(--playground-bottom-seat-height) * -0.12));
    }

    .playground > .playground-corner-panels {
        justify-content: space-between;
        align-items: flex-start;
        top: 0.2rem;
        /* Clear the playground back button on the left. */
        left: 2.7rem;
        right: 0.25rem;
        gap: 0.4rem;
    }

    .playground > .playground-corner-panels > .game-goal-points,
    .playground > .playground-corner-panels > .gamepoints {
        width: auto;
        max-width: none;
        align-self: flex-start;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
    }

    .playground > .playground-corner-panels > .gamepoints {
        margin-left: 0;
    }

    .playground .gamepoints.playground-seat-info-box.mud-paper,
    .playground .game-goal-points.playground-seat-info-box.mud-paper {
        width: auto;
        max-width: none;
        padding: 0.12rem 0.35rem;
        min-height: 0;
        height: auto;
        align-items: center;
        box-sizing: border-box;
        overflow: visible;
    }

    .playground .gamepoints .gamepoints-bar.mud-stack,
    .playground .game-goal-points .gamepoints-bar.mud-stack {
        gap: 0.2rem !important;
        flex-wrap: nowrap;
    }

    .playground .game-goal-points .game-goal-points-icon-row {
        min-width: 1.35rem;
        padding-top: 0;
        padding-bottom: 0;
    }

    .playground .game-goal-points .game-goal-points-icon {
        font-size: 1.05rem !important;
        width: 1.05rem !important;
        height: 1.05rem !important;
    }

    .playground .gamepoints .gamepoints-team-summary>.mud-typography,
    .playground .game-goal-points .gamepoints-team-summary>.mud-typography {
        font-size: 0.58rem !important;
        line-height: 1.1;
    }

    .playground .gamepoints .gamepoints-team-summary>.mud-typography.mud-typography-h6,
    .playground .game-goal-points .gamepoints-team-summary>.mud-typography.mud-typography-h6 {
        font-size: 0.85rem !important;
    }

    .playground .gamepoints .gamepoints-details-row>.mud-typography {
        font-size: 0.62rem !important;
        line-height: 1.1;
        white-space: nowrap;
    }

    .playground .gamepoints .gamepoints-details-row .mud-icon-button {
        padding: 0.1rem;
    }

    .playground-game-table-seat {
        min-width: 6rem;
        max-width: 9.5rem;
        min-height: 2.35rem;
    }

    .playground-game-table-seat-top {
        transform: translate(-50%, 0);
    }

    .playground-game-table-seat-left,
    .playground-game-table-seat-right,
    .playground-game-table-seat-bottom {
        height: var(--playground-bottom-seat-height);
        min-height: var(--playground-bottom-seat-height);
        width: 8rem;
        min-width: 8rem;
        max-width: 8rem;
    }

    .playground-seat-nickname,
    .playground-starting-player-message,
    .playground-game-points-calculation-message,
    .playground-cards-distribution-message {
        font-size: clamp(0.58rem, 2.4svh, 0.72rem);
        max-width: 14ch;
        line-height: 1.15;
        letter-spacing: 0.01em;
    }

    .playground-seat-info-box:not(.gamepoints):not(.game-goal-points) {
        padding: 0.15rem 0.3rem;
        gap: 0.15rem;
        border-radius: 8px;
    }

    .suit-bet-statement {
        font-size: clamp(0.58rem, 2.4svh, 0.72rem);
    }

    .playground-round-journal-button {
        width: 1.85rem;
        height: 1.85rem;
        margin-top: 0.1rem;
    }

    .toppackofcards {
        height: min(22svh, 4.6rem);
    }

    .leftpackofcards,
    .rightpackofcards {
        height: 62%;
    }

    :root {
        --playground-played-card-max: 4.75rem;
    }

    .card.Main {
        width: clamp(3.25rem, 15svh, 4.85rem);
        min-width: 0;
        max-width: 4.85rem;
    }

    .card.Top,
    .card.Left,
    .card.Right {
        width: clamp(3.1rem, 14svh, 5rem);
    }

    .card.Left.displayed,
    .card.Right.displayed {
        width: min(5.5rem, 100%);
        height: 3.1rem;
    }

    .card.Top.displayed {
        max-width: 4.35rem;
    }

    .card.Main.played,
    .card.Top.played,
    .card.Left.played,
    .card.Right.played {
        width: clamp(2.6rem, 10svh, var(--playground-played-card-max));
    }

    .card.Main.played {
        transform: translate(-50%, -110%) rotate(180deg);
    }

    /* ------------------------------------------------------------------ */
    /* Games list / create: table cards must fit the short viewport.      */
    /* ------------------------------------------------------------------ */
    #mainLayout .game-table-card {
        width: min(14.5rem, calc(100svh - 12.5rem), 32vw);
        min-width: 10.5rem;
        max-width: 15rem;
    }

    #mainLayout .game-table-seat {
        min-width: 3.25rem;
        padding: 0.12rem 0.32rem;
        border-radius: 8px;
        border-width: 1px;
    }

    #mainLayout .game-table-seat .seat-value,
    #mainLayout .game-create-page .game-table-seat .seat-value {
        font-size: 0.62rem;
        line-height: 1.15;
    }

    #mainLayout .game-table-circle .host-name {
        font-size: 0.65rem;
        line-height: 1.15;
    }

    #mainLayout .game-table-seat-left,
    #mainLayout .game-table-seat-right {
        max-width: 4.25rem;
    }

    #mainLayout .game-table-circle-actions {
        gap: 0.25rem;
    }

    #mainLayout .game-table-circle-action-item {
        max-width: 4.4rem;
    }

    #mainLayout .game-table-card .mud-button {
        min-height: 1.45rem;
        min-width: 0;
        padding: 0.12rem 0.4rem;
        font-size: 0.62rem;
        line-height: 1.1;
        letter-spacing: 0.03em;
    }

    #mainLayout .game-table-card .mud-button .mud-button-label {
        font-size: 0.62rem;
        line-height: 1.1;
    }

    #mainLayout .game-table-card .game-table-circle-action-item .mud-typography {
        font-size: 0.62rem;
        line-height: 1.15;
    }

    #mainLayout .game-create-page {
        padding: 0.65rem 1rem 1rem;
    }

    #mainLayout .game-create-header {
        margin-bottom: 0.75rem;
    }

    #mainLayout .player-card {
        min-width: 0;
        padding: 0.7rem 0.9rem;
    }

    #mainLayout .game-table {
        --game-create-card-height: 4.75rem;
        gap: 0.55rem;
    }

    /* ------------------------------------------------------------------ */
    /* Welcome / dialogs / about: stop width-based type from overflowing. */
    /* ------------------------------------------------------------------ */
    .welcome-container {
        padding: 0.4rem 0.7rem;
    }

    .welcome-content-frame {
        padding: 0.7rem 1.1rem;
    }

    .card-text {
        font-size: clamp(1.1rem, 7.2svh, 1.7rem);
        padding: 0.3rem 0.65rem;
    }

    .welcome-suits-row {
        font-size: clamp(0.95rem, 5svh, 1.3rem);
        margin-bottom: 0.2rem;
    }

    .index-welcome-actions {
        margin-top: 0.45rem;
        gap: 0.4rem;
    }

    .card-card {
        width: 30px;
        height: 40px;
        font-size: 32px;
    }

    .card-card.top {
        top: -28px;
    }

    .card-card.bottom {
        bottom: -10px;
    }

    .card-card.left {
        left: -15px;
    }

    .card-card.right {
        right: -15px;
    }

    /*
     * Dialogs: smaller than desktop-on-landscape, but still comfortable.
     * (The previous 24rem / 20rem cap was too tight.)
     */
    .rz-dialog-wrapper {
        --rz-dialog-title-font-size: 1.05rem;
        --rz-dialog-title-line-height: 1.3;
        --rz-dialog-title-padding-block: 0.55rem 0;
        --rz-dialog-title-padding-inline: 1rem;
        --rz-dialog-content-padding: 0.85rem 1.1rem;
        --rz-dialog-close-font-size: 1.1rem;
        --rz-dialog-border-radius: 12px;
    }

    div.rz-dialog,
    div.rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
        width: min(30rem, calc(100vw - 2rem)) !important;
        min-width: 0 !important;
        max-width: min(30rem, calc(100vw - 2rem)) !important;
        height: auto !important;
        min-height: 66svh !important;
        max-height: 72svh !important;
        border-radius: var(--rz-dialog-border-radius) !important;
        overflow: hidden !important;
    }

    .rz-dialog-content,
    .rz-dialog-side-content {
        min-height: 0;
        overflow: auto;
    }

    .rz-dialog-content .rz-stack {
        gap: 0.85rem !important;
    }

    .rz-dialog-content .rz-image {
        width: clamp(2.1rem, 9svh, 2.85rem) !important;
        max-width: 2.85rem !important;
        height: auto !important;
    }

    .rz-dialog-content .mud-typography-h5 {
        font-size: 1.1rem !important;
        line-height: 1.3;
    }

    .rz-dialog-content .mud-typography-h6 {
        font-size: 0.95rem !important;
        line-height: 1.25;
    }

    .rz-dialog-content .rz-button,
    .rz-dialog-content .mud-button {
        min-height: 2rem;
        padding-block: 0.2rem;
        font-size: 0.85rem;
    }

    .mud-dialog {
        max-width: min(30rem, calc(100vw - 2rem));
        max-height: 72svh;
    }

    #mainLayout .game-details-dialog,
    .game-details-dialog {
        height: 100%;
        max-height: none;
        gap: 0.55rem;
        padding: 0;
        overflow: hidden;
    }

    .game-details-summary {
        gap: 0.5rem;
    }

    .game-details-team-tile {
        padding: 0.55rem 0.7rem;
        gap: 0.25rem;
        border-radius: 10px;
    }

    .game-details-team-label {
        font-size: 0.68rem;
    }

    .game-details-team-score {
        font-size: 1.25rem;
    }

    .game-journal-table th,
    .game-journal-table td {
        padding: 0.45rem 0.35rem;
        font-size: 0.82rem;
    }

    .journal-header-row {
        min-height: 0;
        font-size: 0.65rem;
    }

    .journal-data-row {
        min-height: 0;
    }

    .score-cell {
        font-size: 0.9rem;
    }

    #mainLayout .about-demo-video {
        max-height: calc(100svh - 7rem);
        width: auto;
        max-width: 100%;
    }
}