/* Android phone landscape layout. Loaded after portrait rules. */

@media (orientation: landscape) and (max-height: 560px) and (max-width: 1000px) {
    :root {
        --landscape-page-padding: clamp(6px, 1.4vw, 12px);
        --landscape-gap: clamp(5px, 1vw, 9px);
        --landscape-card-padding: clamp(5px, 0.9vw, 8px);
        font-size: 12.5px;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        min-height: 100%;
        overflow: hidden;
    }

    body {
        font-size: 0.82rem;
        line-height: 1.22;
    }

    button,
    [role="button"],
    input[type="button"],
    input[type="submit"],
    select {
        min-height: 32px;
    }

    button,
    .btn,
    [class*="-btn"] {
        font-size: 0.72rem;
        line-height: 1.1;
    }

    input,
    select,
    textarea {
        min-width: 0;
        max-width: 100%;
        font-size: 12px;
    }

    select {
        padding-right: 1.7rem !important;
        background-position: 0 0, right 0.5rem center;
    }

    h1,
    .page-title,
    .records-title,
    .ranking-title {
        font-size: clamp(1.02rem, 2.8vw, 1.28rem) !important;
        line-height: 1.05 !important;
        letter-spacing: 0.01em !important;
        margin: 0 !important;
    }

    h2,
    .panel-head h2,
    .settings-block h2,
    .settings-card h2,
    .results-head h2 {
        font-size: 0.86rem !important;
        line-height: 1.1 !important;
        margin-bottom: 0.28rem !important;
    }

    h3,
    .subheading {
        font-size: 0.72rem !important;
        margin-top: 0.45rem !important;
        margin-bottom: 0.25rem !important;
    }

    .page-subtitle,
    .records-subtitle {
        display: none !important;
    }

    .block-hint,
    .field-help,
    .panel-head p,
    .footer-hint,
    .status-text,
    .hint-text {
        font-size: 0.6rem !important;
        line-height: 1.22 !important;
        letter-spacing: 0 !important;
    }

    .settings-container,
    .app-settings-container,
    .prep-container,
    .country-container,
    .cq-container,
    .cv-container,
    .page-container,
    .final-container,
    .manual-page,
    .picker-container,
    .records-container,
    .sf-container,
    .results-container {
        inset: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        min-height: 0 !important;
        padding: var(--landscape-page-padding) !important;
        overflow: hidden;
    }

    .page-header,
    .settings-header,
    .records-header,
    .picker-header,
    .manual-header,
    .compact-header {
        width: 100%;
        min-width: 0;
        flex: 0 0 auto;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.45rem !important;
        margin: 0 0 0.35rem !important;
        padding: 0 0 0.3rem !important;
    }

    .header-content,
    .header-copy,
    .header-left {
        width: auto !important;
        min-width: 0;
        flex: 1;
    }

    .header-actions,
    .control-buttons,
    .mode-action-row,
    .bias-actions,
    .data-actions {
        width: auto !important;
        display: flex;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap;
        gap: 0.28rem !important;
    }

    .back-btn,
    .utility-btn,
    .small-btn,
    .small-action-btn,
    .data-btn,
    .icon-btn {
        min-height: 29px !important;
        padding: 0.3rem 0.58rem !important;
        font-size: 0.62rem !important;
    }

    .settings-main,
    .records-main,
    .results-main,
    .picker-main,
    .manual-layout,
    .content-grid,
    .semis-wrapper,
    .countries-grid,
    .entries-grid {
        min-height: 0;
        gap: var(--landscape-gap) !important;
    }

    .settings-main,
    .records-main,
    .results-main,
    .picker-main,
    .manual-layout,
    .content-grid {
        overflow-y: auto !important;
        padding-right: 2px !important;
        -webkit-overflow-scrolling: touch;
    }

    .settings-block,
    .settings-card,
    .summary-card,
    .panel,
    .jury-panel,
    .finalists-panel,
    .points-panel,
    .semi-column,
    .winner-card,
    .season-card {
        padding: var(--landscape-card-padding) !important;
        border-radius: 8px !important;
        margin: 0 !important;
    }

    .settings-block h2,
    .settings-card h2,
    .panel-head {
        margin-bottom: 0.28rem !important;
    }

    .mode-options,
    .mode-grid,
    .saved-mode-list,
    .saved-mode-summary,
    .summary-card {
        gap: 0.32rem !important;
    }

    .mode-options,
    .mode-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .saved-mode-list,
    .saved-mode-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .mode-btn,
    .create-mode-btn,
    .saved-mode-btn,
    .toggle-btn {
        min-height: 32px !important;
        padding: 0.38rem 0.5rem !important;
        border-radius: 7px !important;
    }

    .saved-mode-btn {
        min-height: 44px !important;
    }

    .mode-title,
    .saved-mode-name {
        font-size: 0.68rem !important;
        margin-bottom: 0.08rem !important;
    }

    .mode-desc,
    .saved-mode-meta,
    .summary-label {
        font-size: 0.54rem !important;
        line-height: 1.15 !important;
    }

    .field-row {
        gap: 0.3rem !important;
        margin-bottom: 0.32rem !important;
        flex-wrap: wrap;
    }

    .field-row label,
    .field-label {
        font-size: 0.6rem !important;
    }

    .field-row input,
    .field-row select,
    .resolution-select {
        min-height: 30px !important;
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .toggle-options {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.28rem !important;
    }

    .page-footer,
    .settings-footer,
    .results-footer {
        flex: 0 0 auto;
        gap: 0.18rem !important;
        margin: 0 !important;
        padding: 0.35rem var(--landscape-page-padding) calc(0.25rem + var(--mobile-safe-bottom)) !important;
    }

    .page-footer .continue-btn,
    .settings-footer .continue-btn,
    .results-footer .action-btn,
    .page-footer .action-btn {
        width: min(190px, 34vw) !important;
        min-width: 0 !important;
        min-height: 32px !important;
        padding: 0.36rem 0.7rem !important;
        font-size: 0.65rem !important;
    }

    .footer-hint {
        display: none !important;
    }

    .modal,
    .dialog,
    [class*="modal-content"],
    [class*="dialog-content"] {
        width: min(86vw, 760px) !important;
        max-width: min(86vw, 760px) !important;
        max-height: calc(100dvh - 12px) !important;
        padding: 0.65rem !important;
        border-radius: 9px !important;
        overflow-y: auto !important;
    }

    /* Main menu: title on the left, two-column action grid on the right. */
    body > .container {
        display: grid !important;
        grid-template-columns: minmax(180px, 0.75fr) minmax(330px, 1.25fr);
        grid-template-rows: 1fr;
        column-gap: clamp(14px, 4vw, 42px);
        align-items: center;
        justify-content: center !important;
        width: 100%;
        height: 100dvh;
        min-height: 0 !important;
        padding: var(--landscape-page-padding) clamp(16px, 5vw, 56px) !important;
        overflow: hidden;
    }

    .title-section {
        margin: 0 !important;
    }

    .logo-container {
        margin-bottom: 0.3rem !important;
    }

    .heart-icon {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 0.2rem !important;
    }

    .main-title {
        font-size: clamp(1.35rem, 3.8vw, 2rem) !important;
        letter-spacing: 0.06em !important;
        margin-bottom: 0.15rem !important;
    }

    .subtitle {
        font-size: clamp(0.62rem, 1.7vw, 0.82rem) !important;
        letter-spacing: 0.48em !important;
        margin-left: 0.48em !important;
    }

    .tagline {
        margin-top: 0.3rem !important;
        font-size: 0.54rem !important;
        letter-spacing: 0.09em !important;
    }

    .menu {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.42rem !important;
        width: 100%;
        max-width: 480px;
        margin: 0 !important;
    }

    .menu-btn {
        width: 100% !important;
        min-height: 38px !important;
        gap: 0.42rem !important;
        padding: 0.48rem 0.65rem !important;
        font-size: 0.7rem !important;
        letter-spacing: 0.08em !important;
        border-radius: 22px !important;
    }

    .menu-btn .btn-icon {
        font-size: 0.66rem !important;
    }

    body > .container > .footer {
        display: none !important;
    }

    /* Country lists use the available width rather than tall stacks. */
    .controls-bar,
    .odds-controls {
        flex: 0 0 auto;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap;
        padding: 0.38rem 0.5rem !important;
        margin-bottom: 0.3rem !important;
        gap: 0.38rem !important;
        border-radius: 8px !important;
    }

    .country-section-grid,
    .countries-grid {
        grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)) !important;
        gap: 0.32rem !important;
        padding: 0.12rem !important;
    }

    .country-card {
        min-height: 0 !important;
        gap: 0.3rem !important;
        padding: 0.35rem !important;
        border-radius: 7px !important;
    }

    .country-section-grid .country-card {
        padding: 0.35rem 0.25rem !important;
    }

    .country-flag {
        width: 32px !important;
        height: 22px !important;
        margin-bottom: 0.12rem !important;
    }

    .country-name {
        font-size: 0.6rem !important;
        margin-bottom: 0.12rem !important;
    }

    .country-odds {
        gap: 0.18rem !important;
        margin-top: 0 !important;
    }

    .odds-badge {
        min-width: 30px !important;
        padding: 0.12rem 0.22rem !important;
    }

    .odds-label {
        font-size: 0.45rem !important;
    }

    .odds-value {
        font-size: 0.58rem !important;
    }

    /* Contest preparation cards become a compact multi-column editor. */
    .odds-controls {
        justify-content: center !important;
    }

    .control-group {
        gap: 0.28rem !important;
    }

    .control-group label {
        font-size: 0.56rem !important;
    }

    .control-group input[type="number"] {
        width: 55px !important;
        min-height: 29px !important;
        padding: 0.22rem 0.3rem !important;
    }

    .odds-controls .action-btn {
        min-height: 29px !important;
        padding: 0.3rem 0.52rem !important;
    }

    .entries-grid {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
        gap: 0.35rem !important;
        padding: 0.1rem 0.1rem 44px !important;
    }

    .entry-card {
        gap: 0.45rem !important;
        padding: 0.42rem !important;
        border-radius: 8px !important;
    }

    .entry-flag {
        width: 36px !important;
        height: 26px !important;
    }

    .entry-country,
    .entry-artist {
        font-size: 0.56rem !important;
        margin-bottom: 0.12rem !important;
    }

    .entry-song {
        font-size: 0.7rem !important;
        margin-bottom: 0.08rem !important;
    }

    .entry-genre,
    .entry-odds {
        margin: 0.18rem 0 !important;
        gap: 0.25rem !important;
    }

    .genre-select,
    .odds-input-group input[type="number"] {
        min-height: 28px !important;
        font-size: 11px !important;
    }

    /* Semi-final setup and custom voters stay side by side. */
    .semis-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        overflow-y: auto !important;
    }

    .content-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
        overflow: hidden !important;
    }

    .summary-card {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .semi-column,
    .panel {
        min-height: 0 !important;
    }

    .semi-list,
    .voter-list {
        gap: 0.25rem !important;
        margin-bottom: 0.35rem !important;
    }

    .list-item,
    .voter-row {
        gap: 0.35rem !important;
        padding: 0.32rem !important;
    }

    .item-flag,
    .voter-flag,
    .jury-badge {
        width: 28px !important;
        height: 20px !important;
    }

    .item-country,
    .voter-name {
        font-size: 0.64rem !important;
    }

    .item-song,
    .voter-subtitle,
    .voter-meta {
        font-size: 0.54rem !important;
    }

    .voter-actions,
    .round-group,
    .vote-type-group {
        gap: 0.18rem !important;
    }

    .round-btn,
    .vote-type-btn,
    .toggle-pill,
    .remove-btn {
        min-height: 27px !important;
        padding: 0.22rem 0.35rem !important;
        font-size: 0.54rem !important;
    }

    /* Manual jury returns to its natural three-panel landscape layout. */
    .manual-layout {
        grid-template-columns: minmax(150px, 0.72fr) minmax(180px, 0.86fr) minmax(230px, 1.2fr) !important;
        overflow: hidden !important;
    }

    .jury-panel,
    .finalists-panel,
    .points-panel {
        min-height: 0 !important;
        max-height: none !important;
    }

    .jury-list,
    .finalist-list,
    .point-selectors {
        gap: 0.22rem !important;
    }

    .jury-item,
    .finalist-item,
    .point-row {
        min-height: 29px !important;
    }

    .jury-item,
    .finalist-item {
        padding: 0.28rem !important;
    }

    .jury-name-row {
        grid-template-columns: 1fr auto !important;
        gap: 0.25rem !important;
    }

    .entry-summary {
        gap: 0.25rem !important;
        margin-top: 0.28rem !important;
    }

    .entry-summary > div {
        padding: 0.28rem !important;
    }

    .point-row {
        grid-template-columns: 38px 1fr !important;
        gap: 0.28rem !important;
    }

    .point-badge,
    .country-select {
        height: 29px !important;
        min-height: 29px !important;
    }

    /* Picker cards sit side by side with a compact center divider. */
    .stage-info {
        gap: 0.3rem !important;
        margin-bottom: 0.3rem !important;
    }

    .info-pill {
        min-width: 0 !important;
        padding: 0.25rem 0.42rem !important;
    }

    .matchup-grid {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        gap: 0.45rem !important;
        width: min(100%, 820px) !important;
        max-width: 820px !important;
    }

    .pick-card,
    .card-content {
        min-height: 118px !important;
    }

    .card-content {
        padding: 0.48rem !important;
    }

    .pick-country {
        font-size: 0.88rem !important;
    }

    .pick-song {
        font-size: 0.62rem !important;
    }

    .pick-stage {
        font-size: 0.5rem !important;
        padding: 0.16rem 0.32rem !important;
    }

    .vs-divider {
        min-width: 34px !important;
    }

    .vs-ring {
        width: 32px !important;
        height: 32px !important;
    }

    .result-tabs,
    .results-tabs,
    .records-tabs {
        gap: 0.25rem !important;
        margin-bottom: 0.3rem !important;
    }

    .result-tab,
    .tab-btn {
        min-height: 29px !important;
        padding: 0.28rem 0.48rem !important;
        font-size: 0.56rem !important;
        letter-spacing: 0.02em !important;
    }

    .semi-columns,
    .grand-final-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.3rem !important;
    }

    /* Live Grand Final scoreboard. */
    .current-voter {
        gap: 0.3rem !important;
        padding: 0.25rem 0.48rem !important;
        border-radius: 8px !important;
    }

    .voter-label,
    .voter-progress {
        font-size: 0.52rem !important;
        margin-left: 0 !important;
    }

    .voter-name {
        font-size: 0.64rem !important;
    }

    .scoreboard-stage {
        padding: 0 !important;
    }

    .sb-row {
        padding: 0 0.3rem !important;
        border-radius: 4px !important;
    }

    .sb-rank {
        width: 17px !important;
        font-size: 0.54rem !important;
    }

    .sb-flag {
        width: 17px !important;
        height: 12px !important;
        margin-right: 4px !important;
    }

    .sb-country,
    .sb-points,
    .current-points {
        font-size: 0.58rem !important;
    }

    .sb-points,
    .current-points {
        width: 25px !important;
    }

    .current-points {
        margin-right: 3px !important;
    }

    .control-bar {
        gap: 0.4rem !important;
        margin-top: 0.3rem !important;
        padding: 0.35rem 0.45rem !important;
        border-radius: 7px !important;
    }

    .status-message {
        flex: 1;
        min-width: 0;
        font-size: 0.6rem !important;
        line-height: 1.15;
    }

    .control-bar .action-btn {
        min-height: 30px !important;
        padding: 0.32rem 0.55rem !important;
        font-size: 0.58rem !important;
    }

    /* Result reveal, result matrices, and records. */
    .reveal-section {
        gap: 0.45rem !important;
        padding: 0.35rem !important;
    }

    .participants-panel {
        min-width: 180px !important;
        max-width: 240px !important;
        padding: 0.45rem !important;
    }

    .participants-list,
    .qualifiers-stage {
        gap: 0.25rem !important;
    }

    .participant-row,
    .qualifier-card {
        padding: 0.28rem !important;
    }

    .winner-celebration {
        margin-bottom: 0.3rem !important;
    }

    .winner-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center;
        gap: 0.45rem !important;
    }

    .winner-trophy {
        font-size: 1.25rem !important;
    }

    .winner-flag {
        width: 40px !important;
        height: 28px !important;
        margin: 0 !important;
    }

    .winner-name,
    .winner-points {
        font-size: 0.78rem !important;
        margin: 0 !important;
    }

    .winner-breakdown {
        gap: 0.4rem !important;
    }

    .results-navigation,
    .result-view-select {
        width: auto !important;
        min-width: 180px !important;
        min-height: 29px !important;
        font-size: 11px !important;
    }

    .results-main .scoreboard-wrapper,
    .results-main .grid-wrapper,
    #view-jury .grid-wrapper,
    #view-tele .grid-wrapper {
        padding: 0.3rem !important;
        border-radius: 6px !important;
    }

    .results-main .grid-wrapper,
    #view-jury .grid-wrapper,
    #view-tele .grid-wrapper {
        height: min(66vh, 280px) !important;
        max-height: min(66vh, 280px) !important;
    }

    .records-header {
        text-align: left !important;
    }

    .records-tabs {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .tag-filter-bar {
        justify-content: flex-start !important;
        margin-bottom: 0.3rem !important;
    }

    .tag-filter-bar select {
        min-width: 180px !important;
        min-height: 29px !important;
    }

    .seasons-list {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
        gap: 0.35rem !important;
        max-height: none !important;
        padding: 0.1rem 0.1rem 38px !important;
    }

    .season-number {
        font-size: 0.82rem !important;
        margin-bottom: 0.18rem !important;
    }

    .season-winner {
        gap: 0.3rem !important;
        margin-bottom: 0.18rem !important;
    }

    .season-winner-flag {
        width: 28px !important;
        height: 19px !important;
    }

    .season-winner-name,
    .season-winner-points,
    .season-date {
        font-size: 0.6rem !important;
    }

    .records-container > .back-btn {
        left: var(--landscape-page-padding) !important;
        bottom: calc(var(--landscape-page-padding) + var(--mobile-safe-bottom)) !important;
        z-index: 20;
    }

    /* App settings regional bias controls. */
    .bias-controls,
    .bias-row,
    .bias-add-row {
        gap: 0.3rem !important;
    }

    .bias-row {
        padding: 0.3rem !important;
    }

    .bias-row select {
        width: min(190px, 30vw) !important;
        min-height: 29px !important;
        font-size: 11px !important;
    }

    .bias-list {
        max-height: 180px !important;
        gap: 0.24rem !important;
    }
}

@media (orientation: landscape) and (max-height: 380px) and (max-width: 850px) {
    :root {
        font-size: 11.5px;
    }

    button,
    [role="button"],
    input[type="button"],
    input[type="submit"],
    select {
        min-height: 29px;
    }

    .page-header,
    .settings-header,
    .records-header,
    .picker-header,
    .manual-header,
    .compact-header {
        margin-bottom: 0.22rem !important;
        padding-bottom: 0.2rem !important;
    }

    .tagline,
    .footer-hint {
        display: none !important;
    }

    .heart-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .menu {
        gap: 0.3rem !important;
    }

    .menu-btn {
        min-height: 33px !important;
        padding: 0.38rem 0.55rem !important;
    }

    .settings-block,
    .settings-card,
    .summary-card,
    .panel,
    .jury-panel,
    .finalists-panel,
    .points-panel,
    .semi-column,
    .winner-card,
    .season-card {
        padding: 5px !important;
    }

    .pick-card,
    .card-content {
        min-height: 100px !important;
    }

    .results-main .grid-wrapper,
    #view-jury .grid-wrapper,
    #view-tele .grid-wrapper {
        height: min(64vh, 220px) !important;
        max-height: min(64vh, 220px) !important;
    }
}