/* Android portrait layout. Loaded after the shared desktop and mobile layers. */

@media (max-width: 700px) and (orientation: portrait) {
    :root {
        --mobile-page-padding: clamp(8px, 2.5vw, 12px);
        --mobile-section-gap: clamp(6px, 1.8vw, 10px);
        --mobile-card-padding: clamp(7px, 2vw, 10px);
        font-size: 14px;
    }

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

    body {
        font-size: 0.86rem;
        line-height: 1.3;
    }

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

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

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

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

    h1,
    .page-title,
    .records-title,
    .ranking-title {
        font-size: clamp(1.15rem, 5.4vw, 1.45rem) !important;
        line-height: 1.08 !important;
        letter-spacing: 0.01em !important;
        margin-bottom: 0.18rem !important;
    }

    h2,
    .panel-head h2,
    .settings-block h2,
    .settings-card h2,
    .results-head h2 {
        font-size: 0.95rem !important;
        line-height: 1.15 !important;
    }

    h3,
    .subheading {
        font-size: 0.8rem !important;
        margin-top: 0.65rem !important;
        margin-bottom: 0.35rem !important;
    }

    .page-subtitle,
    .records-subtitle,
    .block-hint,
    .field-help,
    .panel-head p,
    .footer-hint,
    .status-text,
    .hint-text {
        font-size: 0.68rem !important;
        line-height: 1.3 !important;
        letter-spacing: 0.01em !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(--mobile-page-padding) !important;
        overflow: hidden;
    }

    .page-header,
    .settings-header,
    .records-header,
    .picker-header,
    .manual-header,
    .compact-header {
        flex: 0 0 auto;
        gap: 0.42rem !important;
        margin: 0 0 0.5rem !important;
        padding: 0 0 0.45rem !important;
    }

    .header-content,
    .header-copy,
    .header-left {
        width: 100%;
        min-width: 0;
    }

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

    .back-btn,
    .utility-btn,
    .small-btn,
    .small-action-btn,
    .data-btn,
    .icon-btn {
        min-height: 34px !important;
        padding: 0.42rem 0.7rem !important;
        font-size: 0.7rem !important;
    }

    .settings-main,
    .records-main,
    .results-main,
    .picker-main,
    .manual-layout,
    .content-grid,
    .semis-wrapper,
    .countries-grid,
    .entries-grid {
        min-height: 0;
        gap: var(--mobile-section-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,
    .summary-row,
    .panel,
    .jury-panel,
    .finalists-panel,
    .points-panel,
    .semi-column,
    .winner-card,
    .season-card,
    .country-card,
    .entry-card,
    .voter-row,
    .qualifier-card,
    .result-chip,
    .gf-chip {
        border-radius: 9px !important;
    }

    .settings-block,
    .settings-card,
    .summary-card,
    .panel,
    .jury-panel,
    .finalists-panel,
    .points-panel,
    .semi-column,
    .winner-card,
    .season-card {
        padding: var(--mobile-card-padding) !important;
    }

    .settings-block,
    .settings-card {
        margin: 0 !important;
    }

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

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

    .mode-btn,
    .create-mode-btn,
    .saved-mode-btn,
    .toggle-btn {
        min-height: 38px !important;
        padding: 0.52rem 0.62rem !important;
        border-radius: 8px !important;
    }

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

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

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

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

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

    .field-row input,
    .field-row select,
    .resolution-select {
        width: 100% !important;
        min-height: 36px !important;
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }

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

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

    .page-footer .continue-btn,
    .settings-footer .continue-btn,
    .results-footer .action-btn,
    .page-footer .action-btn {
        width: min(220px, 72vw) !important;
        min-width: 0 !important;
        min-height: 38px !important;
        padding: 0.52rem 0.85rem !important;
        font-size: 0.76rem !important;
    }

    .footer-hint {
        margin-top: 0.2rem !important;
    }

    .modal,
    .dialog,
    [class*="modal-content"],
    [class*="dialog-content"] {
        width: calc(100vw - 18px) !important;
        max-width: calc(100vw - 18px) !important;
        max-height: calc(100dvh - 18px) !important;
        padding: 0.75rem !important;
        border-radius: 10px !important;
        overflow-y: auto !important;
    }

    /* Main menu */
    body > .container {
        justify-content: flex-start !important;
        min-height: 100dvh !important;
        height: 100dvh;
        padding: 0.65rem var(--mobile-page-padding) !important;
        overflow-y: auto;
    }

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

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

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

    .main-title {
        font-size: clamp(1.55rem, 8.5vw, 2rem) !important;
        letter-spacing: 0.07em !important;
        margin-bottom: 0.18rem !important;
    }

    .subtitle {
        font-size: 0.78rem !important;
        letter-spacing: 0.55em !important;
        margin-left: 0.55em !important;
    }

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

    .menu {
        width: min(240px, 78vw);
        gap: 0.42rem !important;
        margin-bottom: 0.4rem !important;
    }

    .menu-btn {
        width: 100% !important;
        min-height: 39px !important;
        gap: 0.55rem !important;
        padding: 0.55rem 1rem !important;
        font-size: 0.76rem !important;
        letter-spacing: 0.11em !important;
        border-radius: 24px !important;
    }

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

    body > .container > .footer {
        position: static !important;
        margin-top: auto;
        padding-top: 0.35rem;
    }

    body > .container > .footer p {
        font-size: 0.56rem !important;
        letter-spacing: 0.06em !important;
    }

    /* Country selection and custom qualifier lists */
    .controls-bar,
    .odds-controls {
        padding: 0.5rem !important;
        margin-bottom: 0.45rem !important;
        gap: 0.45rem !important;
        border-radius: 9px !important;
    }

    .country-section-grid,
    .countries-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.42rem !important;
        padding: 0.15rem !important;
    }

    .country-card {
        min-height: 0 !important;
        gap: 0.35rem !important;
        padding: 0.45rem !important;
    }

    .country-section-grid .country-card {
        padding: 0.5rem 0.3rem !important;
    }

    .country-flag {
        width: 38px !important;
        height: 27px !important;
        margin-bottom: 0.2rem !important;
    }

    .country-name {
        font-size: 0.68rem !important;
        margin-bottom: 0.2rem !important;
    }

    .country-odds {
        gap: 0.25rem !important;
        margin-top: 0.1rem !important;
    }

    .odds-badge {
        min-width: 35px !important;
        padding: 0.18rem 0.3rem !important;
    }

    /* Contest preparation */
    .odds-controls {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: space-between !important;
    }

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

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

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

    .odds-controls .action-btn {
        min-height: 34px !important;
        padding: 0.4rem 0.6rem !important;
    }

    .entries-grid {
        grid-template-columns: 1fr !important;
        padding: 0.15rem 0.15rem 58px !important;
        gap: 0.42rem !important;
    }

    .entry-card {
        gap: 0.55rem !important;
        padding: 0.55rem !important;
    }

    .entry-flag {
        width: 42px !important;
        height: 31px !important;
    }

    .entry-song {
        font-size: 0.8rem !important;
    }

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

    .entry-genre,
    .entry-odds {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

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

    /* Semi-final assignment and custom voters */
    .semis-wrapper,
    .content-grid {
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
    }

    .semi-column {
        min-height: 230px !important;
    }

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

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

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

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

    .round-btn,
    .vote-type-btn,
    .toggle-pill,
    .remove-btn {
        min-height: 31px !important;
        padding: 0.3rem 0.45rem !important;
        font-size: 0.62rem !important;
    }

    /* Manual jury */
    .manual-layout {
        grid-template-columns: 1fr !important;
    }

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

    .panel-head {
        margin-bottom: 0.45rem !important;
    }

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

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

    .entry-summary {
        gap: 0.35rem !important;
        margin-top: 0.4rem !important;
    }

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

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

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

    /* Picker */
    .stage-info {
        gap: 0.35rem !important;
        margin-bottom: 0.45rem !important;
    }

    .info-pill {
        min-width: 0 !important;
        padding: 0.35rem 0.5rem !important;
    }

    .matchup-grid {
        max-width: 100% !important;
        gap: 0.35rem !important;
    }

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

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

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

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

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

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

    .result-tab,
    .tab-btn {
        min-height: 34px !important;
        padding: 0.4rem 0.55rem !important;
        font-size: 0.65rem !important;
        letter-spacing: 0.03em !important;
    }

    /* Grand final live scoreboard */
    .current-voter {
        width: 100%;
        gap: 0.35rem !important;
        padding: 0.35rem 0.55rem !important;
        border-radius: 9px !important;
        flex-wrap: wrap;
    }

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

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

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

    .scoreboard-container {
        --gf-row-height: 34px;
    }

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

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

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

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

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

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

    .control-bar {
        gap: 0.45rem !important;
        margin-top: 0.45rem !important;
        padding: 0.45rem !important;
        border-radius: 8px !important;
    }

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

    .control-bar .action-btn {
        min-height: 36px !important;
        padding: 0.45rem 0.65rem !important;
        font-size: 0.68rem !important;
    }

    /* Results and records */
    .winner-celebration {
        margin-bottom: 0.45rem !important;
    }

    .winner-card {
        gap: 0.45rem !important;
    }

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

    .winner-flag {
        width: 46px !important;
        height: 32px !important;
    }

    .winner-name,
    .winner-points {
        font-size: 0.9rem !important;
    }

    .results-navigation,
    .result-view-select {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 34px !important;
        font-size: 12px !important;
    }

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

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

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

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

    .tag-filter-bar select {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 34px !important;
    }

    .seasons-list {
        grid-template-columns: 1fr !important;
        gap: 0.45rem !important;
        max-height: none !important;
        padding: 0.1rem 0.1rem 55px !important;
    }

    .season-number {
        font-size: 1rem !important;
        margin-bottom: 0.25rem !important;
    }

    .season-winner-flag {
        width: 32px !important;
        height: 22px !important;
    }

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

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

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

    .bias-row {
        flex-wrap: wrap;
        padding: 0.4rem !important;
    }

    .bias-row select {
        width: 100% !important;
        min-height: 34px !important;
        font-size: 12px !important;
    }

    .bias-list {
        max-height: 230px !important;
        gap: 0.3rem !important;
    }
}

@media (max-width: 400px) and (orientation: portrait) {
    :root {
        font-size: 12.5px;
    }

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

    input,
    select,
    textarea {
        font-size: 13px;
    }

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

    .menu {
        width: min(220px, 76vw);
        gap: 0.32rem !important;
    }

    .menu-btn {
        min-height: 36px !important;
        padding: 0.45rem 0.8rem !important;
    }

    .country-section-grid,
    .countries-grid {
        gap: 0.3rem !important;
    }

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

    .summary-card,
    .saved-mode-summary {
        grid-template-columns: 1fr !important;
    }

    .records-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}