/* app-phone.css — phone breakpoints (max-width, phone-landscape).
   Split out of app.css. LOAD ORDER MATTERS: app.css -> app-tablet.css ->
   app-phone.css, so phone-landscape rules override the tablet ones. */

@media (orientation: landscape) and (max-height: 600px) {
    .cinema-hud {
        bottom: calc(50px + env(safe-area-inset-bottom)) !important;
    }

    /* Match phone portrait — a landscape phone can be wider than 767px, so the
       max-width toast rule misses it and it'd otherwise take the tablet size. */
    .toast {
        font-size: 16px !important;
    }

    .ch-fox-bug {
        width: 45vw !important;
    }

    .ch-top-bar {
        height: 38px !important;
    }

    .ch-logo-ring {
        width: 32px !important;
        height: 32px !important;
        padding: 1px !important;
    }

    .ch-team-logo {
        width: 26px !important;
        height: 26px !important;
    }

    .ch-team-abbr {
        font-size: 13px !important;
    }

    .ch-team-wp {
        font-size: 7px !important;
    }

    .ch-score-area {
        gap: 4px !important;
        padding: 0 6px !important;
        margin: 2px 0 !important;
    }

    .ch-score-sec {
        min-width: 24px !important;
    }

    .ch-score-val {
        font-size: 22px !important;
    }

    .ch-bottom-bar {
        height: 24px !important;
        font-size: 11px !important;
        padding: 0 10px !important;
    }

    .ch-quarter-pill {
        padding: 1px 6px !important;
        font-size: 9px !important;
    }

    .ch-playclock-ring {
        width: 20px !important;
        height: 20px !important;
    }

    #chPlayClock {
        font-size: 8px !important;
    }

    .ch-down-pill {
        padding: 1px 8px !important;
        font-size: 10px !important;
    }

    .ch-down-num {
        width: 14px !important;
        height: 14px !important;
        font-size: 8px !important;
    }

    .ch-to-dot {
        width: 2px !important;
        height: 6px !important;
    }

    .ch-audibles {
        gap: 2px !important;
    }

    .ch-ctrl svg {
        width: 18px;
        height: 18px;
    }

    #chDown {
        font-size: 9.5px !important;
        letter-spacing: -0.2px;
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    .screen-home {
        flex-direction: row !important;
        justify-content: space-evenly !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 10px 20px !important;
        overflow-y: auto !important;
    }

    .app-header {
        flex: 0 1 35%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .app-logo {
        width: 12vw !important;
        margin: 0 auto 6px !important;
    }

    .app-title {
        font-size: clamp(1.2rem, 5vh, 1.8rem) !important;
        line-height: 1.0;
        letter-spacing: 2px;
    }

    .app-subtitle {
        font-size: clamp(0.7rem, 3vh, 0.9rem) !important;
        margin-top: 4px !important;
    }

    .home-buttons {
        flex: 1 1 55%;
        max-width: 420px;
        gap: 6px !important;
        padding-bottom: 24px;
    }

    .home-row {
        gap: 6px !important;
    }

    .home-buttons .btn {
        font-size: 11px !important;
        padding: 6px 4px !important;
        border-radius: 6px !important;
    }

    .home-buttons .btn-subtitle {
        display: block !important;
        font-size: 8px !important;
        line-height: 1.1 !important;
    }

    .home-buttons .team-picker-card {
        padding: 3px 5px !important;
        gap: 6px !important;
    }

    .home-buttons .team-picker-logo {
        width: 28px !important;
        height: 28px !important;
    }

    .home-buttons .team-picker-label {
        font-size: 11px !important;
    }

    .home-buttons .team-picker-ratings {
        font-size: 9px !important;
    }

    .home-buttons .team-picker-chevron {
        width: 24px !important;
        height: 24px !important;
    }

    .home-buttons .team-picker-panel {
        max-height: 60vh !important;
    }

    /* Scale down the bottom corner clusters to fit the short landscape screen
       (the containers own the positioning; items just shrink). */
    .corner-left {
        left: calc(10px + env(safe-area-inset-left)) !important;
        bottom: calc(3px + env(safe-area-inset-bottom)) !important;
        gap: 12px !important;
    }

    .corner-right {
        right: calc(30px + env(safe-area-inset-right)) !important;
        bottom: calc(6px + env(safe-area-inset-bottom)) !important;
        gap: 4px !important;
    }

    .app-version,
    .privacy-link,
    .howto-link {
        font-size: 11px !important;
        height: 32px !important;
    }

    .share-site,
    .corner-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .share-site svg,
    .corner-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Scale down top-right elements (username badge & friend icon) on phone landscape */
    #acctTopRight {
        top: calc(6px + env(safe-area-inset-top)) !important;
        right: calc(30px + env(safe-area-inset-right)) !important;
        gap: 5px !important;
    }

    #friendBadge {
        width: 32px !important;
        height: 32px !important;
        position: relative !important;
    }

    #friendBadge svg {
        width: 16px !important;
        height: 16px !important;
    }

    .friend-badge-count {
        font-size: 10px !important;
        min-width: 16px !important;
        height: 16px !important;
        border-radius: 8px !important;
        top: -2px !important;
        right: -2px !important;
        border-width: 1px !important;
    }

    #acctBadge {
        font-size: 13px !important;
        padding: 5px 10px !important;        
    }

    /* Leaderboard Modal Phone Landscape refinements */
    .lb-card {
        max-height: 96vh !important;
        padding: 10px !important;
        width: min(94vw, 420px) !important;
    }

    .lb-head {
        margin-bottom: 6px !important;
    }

    .lb-head h3 {
        font-size: 15px !important;
    }

    .lb-jump {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    .lb-row {
        padding: 6px 8px !important;
    }

    .lb-name,
    .lb-elo,
    .lb-rank {
        font-size: 12px !important;
    }

    .lb-close {
        margin-top: 8px !important;
        padding: 8px !important;
        font-size: 12px !important;
    }

    /* User Profile / Account Modal Phone Landscape refinements */
    .acct-card {
        max-height: 96vh !important;
        padding: 10px !important;
        width: min(94vw, 380px) !important;
    }

    .acct-card h3 {
        margin-bottom: 6px !important;
        font-size: 15px !important;
    }

    .acct-card p {
        margin: 4px 0 !important;
        font-size: 12px !important;
    }

    .acct-key {
        font-size: 18px !important;
        margin: 6px 0 !important;
    }

    .acct-btn {
        margin-top: 6px !important;
        padding: 8px !important;
        font-size: 12px !important;
    }

    .acct-input {
        margin-top: 6px !important;
        padding: 8px !important;
        font-size: 14px !important;
    }

    .set-row {
        padding: 6px 2px !important;
    }

    .set-label {
        font-size: 12px !important;
    }

    .set-toggle {
        font-size: 11px !important;
        padding: 4px 0 !important;
    }

    .acct-stats {
        font-size: 12px !important;
        margin-top: 6px !important;
    }

    /* About Modal Phone Landscape refinements */
    .about-card {
        max-height: 96vh !important;
        padding: 10px !important;
        width: min(94vw, 420px) !important;
    }

    .about-logo {
        width: 50px !important;
        margin-bottom: 6px !important;
    }

    .about-title {
        font-size: 1.2rem !important;
        margin-bottom: 4px !important;
    }

    /* Lessen font sizes and heights for plays and season screen panels */
    .plays-bar {
        flex: 0 0 auto !important;
        min-height: 34px !important;
        gap: 6px !important;
        padding: 4px 8px !important;
    }

    .plays-bar:not(.plays-bar-bottom) {
        height: 34px !important;
        /* Keep Run + camera clear of the rounded corner / notch. */
        padding-right: 44px !important;
    }

    .plays-bar .btn-small {
        font-size: 11px !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
    }

    .play-select {
        height: 26px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
    }

    .plays-info {
        font-size: 11px !important;
    }

    .season-bar-title {
        font-size: 0.9rem !important;
    }

    /* Play designer buttons sizing */
    .designer-bar .btn,
    .designer-pick .btn,
    .plays-actions .btn {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }

    /* Lessen text and element sizing inside the season page body */
    .season-body {
        padding: 6px 8px calc(10px + env(safe-area-inset-bottom)) !important;
    }

    .season-week-card {
        padding: 8px !important;
        margin-bottom: 8px !important;
    }

    .season-week-no {
        font-size: 13px !important;
    }

    .season-matchup {
        font-size: 12px !important;
        margin: 4px 0 !important;
    }

    .season-matchup small {
        font-size: 10px !important;
    }

    .season-vs {
        font-size: 10px !important;
    }

    .season-actions .btn {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }

    .season-block>summary {
        font-size: 12px !important;
        padding: 6px 8px !important;
    }

    .season-conf-h,
    .season-bround-h {
        font-size: 11px !important;
        margin: 6px 0 4px !important;
    }

    .season-table {
        font-size: 10px !important;
    }

    .season-table th,
    .season-table td {
        padding: 3px 2px !important;
    }

    .season-bgame {
        padding: 4px !important;
        font-size: 10px !important;
    }

    .season-bteam {
        font-size: 10px !important;
    }

    .season-done {
        font-size: 14px !important;
        padding: 10px !important;
    }

    .season-hero {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }

    /* Sim overlays go full-bleed (the scorebug floats over the field) */
    .screen-sim .overlay {
        gap: 8px !important;
        padding: 6px 12px !important;
    }

    /* Three postgame awards stay fully visible on short phone-landscape
       screens: headline + score above one compact horizontal card row. */
    #banner:has(.pog) {
        gap: 5px !important;
        justify-content: center !important;
        overflow-y: auto !important;
    }

    #banner:has(.pog) .banner-text.matchup {
        width: min(96vw, 760px) !important;
        line-height: 1.1 !important;
    }

    #banner:has(.pog) .go-result {
        font-size: clamp(24px, 8vh, 38px) !important;
        margin-bottom: 2px !important;
    }

    #banner:has(.pog) .go-score {
        flex-wrap: nowrap !important;
        gap: 7px !important;
        margin: 2px 0 !important;
        font-size: 11px !important;
    }

    #banner:has(.pog) .go-team {
        overflow: hidden;
        max-width: 30vw;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #banner:has(.pog) .go-nums {
        flex: 0 0 auto;
        font-size: 21px !important;
    }

    #banner:has(.pog) .go-line {
        display: none !important;
    }

    #banner:has(.pog) .pog {
        width: min(96vw, 760px) !important;
        margin-top: 5px !important;
        padding: 6px !important;
        border-radius: 9px !important;
    }

    #banner:has(.pog) .pog-title {
        margin-bottom: 5px !important;
        font-size: 9px !important;
        letter-spacing: 1.4px !important;
    }

    #banner:has(.pog) .pog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    #banner:has(.pog) .pog-card {
        min-height: 65px !important;
        gap: 6px !important;
        padding: 6px !important;
        border-radius: 7px !important;
    }

    #banner:has(.pog) .pog-token {
        width: 38px !important;
        height: 38px !important;
        border-width: 2px !important;
    }

    #banner:has(.pog) .pog-abbr {
        font-size: 11px !important;
    }

    #banner:has(.pog) .pog-num,
    #banner:has(.pog) .pog-team,
    #banner:has(.pog) .pog-ovr {
        font-size: 8px !important;
    }

    #banner:has(.pog) .pog-info {
        padding-right: 0 !important;
        padding-top: 5px !important;
    }

    #banner:has(.pog) .pog-name {
        font-size: 11px !important;
    }

    #banner:has(.pog) .pog-stats {
        font-size: 8.5px !important;
        line-height: 1.15 !important;
    }

    #banner:has(.pog) .pog-label {
        top: 3px !important;
        right: 4px !important;
        font-size: 6px !important;
        letter-spacing: 0.3px !important;
    }

    #banner:has(.pog) #bannerBtn,
    #banner:has(.pog) .daily-retry-btn {
        margin-top: 5px !important;
        padding: 7px 12px !important;
        font-size: 11px !important;
    }

    /* Hide play-by-play commentary feed on phone landscape */
    .screen-sim #feedToggle,
    .screen-sim #commentaryFeed {
        display: none !important;
    }

    /* Play Chooser horizontal cards flow on phone landscape */
    .chooser-title {
        display: none !important;
    }

    /* …except on the 2-pt conversion chooser, where the title IS the question. */
    #playChooser.convo .chooser-title {
        display: block !important;
        flex: 1 1 100% !important;
        text-align: center !important;
        font-size: 14px !important;
    }

    /* Coach's pick: the gold aura alone marks it — the text tab is noise here. */
    .card-rec-badge {
        display: none !important;
    }

    .chooser-header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important; /* the hint drops to its own full row */
        justify-content: space-between !important;
        align-items: center !important;
        width: min(96vw, 680px) !important;
        gap: 8px !important;
    }

    /* Scouting hint: full-width row BELOW the buttons (order pushes it last). */
    .chooser-hint {
        flex: 1 1 100% !important;
        order: 10 !important;
        font-size: 11px !important;
        padding: 4px 10px !important;
        margin: 0 !important;
        max-width: none !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chooser-reroll {
        flex: 0 0 auto !important;
        font-size: 11px !important;
        padding: 4px 8px !important;
    }

    .chooser-cards {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        width: min(96vw, 680px) !important;
        gap: 8px !important;
    }

    .play-card {
        padding: 8px 10px !important;
        border-radius: 8px !important;
        gap: 3px !important;
    }

    .play-card .card-name {
        font-size: 12px !important;
    }

    .play-card .card-desc {
        font-size: 9.5px !important;
        line-height: 1.2 !important;
    }

    .play-card .badge {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }

}

@media (max-width: 767px) {

    .replay-pill,
    .highlight-pill {
        bottom: 18% !important;
    }

    .ch-controls {
        gap: 1.1rem;
    }

    .ch-ctrl svg {
        width: 18px;
        height: 18px;
    }

    .toast {
        font-size: 16px !important;
    }

    .home-buttons .team-picker-card {
        padding: 3px 5px !important;
        gap: 6px !important;
    }

    .home-buttons .team-picker-logo {
        width: 28px !important;
        height: 28px !important;
    }

    .home-buttons .team-picker-label {
        font-size: 11px !important;
    }

    .home-buttons .team-picker-ratings {
        font-size: 9px !important;
    }

    .home-buttons .team-picker-chevron {
        width: 24px !important;
        height: 24px !important;
    }

    /* Hide the play-by-play feed on phone portrait too (landscape already
       hides it) — the chooser stays play cards only. */
    .screen-sim #feedToggle,
    .screen-sim #commentaryFeed {
        display: none !important;
    }

    /* Play chooser, phone portrait: the cards already say which side you're
       calling — drop the title row. The 2-pt conversion chooser keeps it
       ('convo'): there the title is the actual question. */
    #playChooser:not(.convo) .chooser-title {
        display: none;
    }

    /* The strip keeps its own full-width row (it doesn't fit beside the
       reroll pill). The reroll pill takes the vacated title slot on the
       LEFT, so the top row reads reroll ←→ exit instead of two buttons
       bunched in the corner. */
    #playChooser:not(.convo) .chooser-reroll {
        grid-area: title;
        justify-self: start;
    }

    #playChooser:not(.convo) .chooser-downdist {
        font-size: 12px;
        gap: 8px;
    }

    /* Coach's pick: the gold aura alone marks it — the text tab is noise. */
    .card-rec-badge {
        display: none;
    }
}