/* Keep the compact breakpoint aligned with index.html and court-responsive.js. */
.compact-panel-nav {
    display: none;
}
.brand-short { display: none; }

@media (max-width: 900px), (max-width: 1100px) and (max-aspect-ratio: 6/5), (max-width: 1100px) and (max-height: 540px) {
    .app-hero {
        min-height: 0;
    }

    .ui-panel {
        flex: 0 0 auto;
        box-sizing: border-box;
        max-height: 40vh;
        max-height: 40dvh;
        padding: calc(8px + var(--safe-top)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
        gap: 0;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
    }

    .header-top {
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 6px 8px;
    }

    .header-top h1 {
        width: auto;
        order: 0;
        margin: 0;
        font-size: clamp(0.64rem, 2.3vw, 0.9rem);
        letter-spacing: 1px;
        text-align: left;
    }

    .user-menu {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }

    .user-btn {
        min-height: 36px;
        max-width: 120px;
        box-sizing: border-box;
        padding: 4px 8px;
        font-size: 0.65rem;
    }

    #userNameDisplay {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .panel-toggle {
        display: inline-flex;
        grid-column: 3;
        grid-row: 1;
        min-width: 62px;
        padding: 0 10px;
        letter-spacing: 0.5px;
    }

    .scoreboard {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        max-width: 100%;
        min-height: 40px;
    }

    .score-box { flex: 1 1 0; }
    .score-info { padding: 3px 6px; }
    .score-team-name {
        max-width: none;
        font-size: 0.62rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .score-team-meta { font-size: 0.5rem; }
    .score-value { font-size: 1rem; margin-left: 4px; }
    .s-b .score-value { margin-left: 0; margin-right: 4px; }
    .score-minus, .score-plus { flex: 0 0 26px; width: 26px; }
    .score-center { min-width: 38px; padding: 0 2px; }
    .score-center .btn-score-reset { min-height: 34px; }

    .ui-panel .ui-panel-body {
        flex: 0 1 auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        align-items: stretch;
        gap: 8px;
        min-height: 0;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        pointer-events: none;
        margin-top: 0;
        padding: 0;
        transition: none;
    }

    .ui-panel.is-open .ui-panel-body {
        max-height: 220px;
        margin-top: 8px;
        padding: 0 0 2px;
        opacity: 1;
        visibility: visible;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        pointer-events: auto;
        -webkit-overflow-scrolling: touch;
    }

    .compact-panel-nav {
        position: sticky;
        top: 0;
        z-index: 10;
        display: flex;
        flex: 0 0 100%;
        gap: 4px;
        padding: 3px;
        box-sizing: border-box;
        background: #11131e;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
    }

    .compact-panel-nav button {
        flex: 1;
        min-height: 36px;
        background: transparent;
        color: #a9b1c5;
        font-size: 0.7rem;
    }

    .compact-panel-nav button[aria-pressed="true"] {
        background: rgba(0, 251, 255, 0.14);
        color: var(--primary);
    }

    .ui-panel-body .controls-row { display: contents; }
    .ui-panel-body[data-section="players"] [data-panel-group]:not([data-panel-group="players"]),
    .ui-panel-body[data-section="court"] [data-panel-group]:not([data-panel-group="court"]),
    .ui-panel-body[data-section="tactics"] [data-panel-group]:not([data-panel-group="tactics"]),
    .ui-panel-body[data-section="tools"] [data-panel-group]:not([data-panel-group="tools"]) {
        display: none !important;
    }

    .ui-panel-body .player-list {
        flex: 0 0 100%;
        min-width: 0;
        min-height: 44px;
        padding: 4px;
        box-sizing: border-box;
        touch-action: pan-x;
    }

    .ui-panel-body .input-group {
        flex: 1 0 100%;
        min-width: 0;
        min-height: 44px;
    }
    .ui-panel-body #playerName { font-size: 16px; }
    .ui-panel-body .btn-add { min-width: 60px; }
    .ui-panel-body .btn-gen { flex: 1 1 140px !important; min-height: 44px; width: auto; }
    .ui-panel-body .btn-roster { order: 1; }
    .ui-panel-body .btn-icon { flex: 1 0 56px; min-height: 44px; }
    .ui-panel-body .cam-split-btn { flex: 2 0 120px; }
    .ui-panel-body .draw-color-controls { flex: 2 0 112px; }
    .ui-panel-body .draw-color-btn { flex: 1; min-height: 44px; }
    .ui-panel-body .btn-labelled { min-height: 44px !important; }
    .ui-panel-body .cam-split-btn .btn-labelled { min-height: 44px !important; }
    .scene-container { min-height: 0; flex: 1 1 0; }
    .fullscreen-toggle { top: 10px; right: 10px; }

    /* Coach and Arena have a brand wrapper and additional score controls. */
    .coach-page .header-brand, .arena-page .header-brand {
        width: auto;
        min-width: 0;
        order: 0;
        justify-content: flex-start;
        gap: 6px;
    }
    .arena-page .header-brand h1 { min-width: 0; padding: 0; white-space: nowrap; }
    .arena-page .brand-full { display: none; }
    .arena-page .brand-short { display: inline; }
    .arena-page .back-button {
        position: static;
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        transform: none;
    }
    .arena-page .back-button:hover, .arena-page .back-button:active { transform: none; }
    .arena-page .ui-panel-body .input-group { order: 0; min-width: 0; min-height: 44px; }
    .arena-page .ui-panel-body .input-group #playerName { min-width: 0; padding: 8px; font-size: 16px; }
    .arena-page .ui-panel-body .input-group #teamSelect { flex: 0 0 84px; padding: 0 5px !important; }
    .arena-page .ui-panel-body .input-group .btn-add { flex: 0 0 54px; min-width: 54px; padding: 0 8px; }
    .arena-page .score-info { gap: 4px; }
    .arena-page .modal-content {
        box-sizing: border-box;
        width: calc(100% - 24px);
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        min-width: 0;
        padding: 16px;
        gap: 12px;
    }
    .arena-page .modal-header, .arena-page .modal-footer { flex-shrink: 0; }
    .arena-page .modal-body { min-height: 0; padding-right: 4px; }
    .arena-page .roster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .arena-page .roster-team-section, .arena-page .roster-item { min-width: 0; }
    .arena-page .roster-item { gap: 6px; padding: 6px; }
    .arena-page .roster-item input { min-width: 0; box-sizing: border-box; min-height: 40px; font-size: 16px; }
    .arena-page .roster-num { flex: 0 0 44px; }
    .arena-page .roster-remove { flex: 0 0 36px; min-height: 40px; font-size: 1rem; }
    .arena-page .modal-footer button { min-height: 44px; }
    .arena-page.modal-open #vh-agent-root .vh-agent-fab,
    .coach-page.modal-open #vh-agent-root .vh-agent-fab { visibility: hidden; pointer-events: none; }

    .coach-page .brand { display: flex; min-width: 0; }
    .coach-page .brand-logo, .coach-page .brand span { display: none; }
    .coach-page .brand h1 { font-size: clamp(0.64rem, 2.3vw, 0.9rem) !important; white-space: nowrap; }
    .coach-page .compact-panel-nav button[aria-pressed="true"] { color: #fff; background: rgba(0, 85, 255, 0.28); }
    body.coach-page .panel-toggle {
        display: inline-flex;
        min-width: 62px;
        height: 36px;
        padding: 0 10px;
        font-size: 0.68rem;
        letter-spacing: 0.5px;
        border-radius: 999px;
    }
    body.coach-page .scoreboard {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 2px;
        transform: none;
        overflow: hidden;
    }
    body.coach-page .score-info { min-width: 0; padding: 4px 6px; gap: 4px; }
    body.coach-page .score-info > div { min-width: 0; }
    body.coach-page .score-info .score-team-name { max-width: 100%; font-size: 0.62rem; }
    body.coach-page .score-info strong { min-width: 20px; font-size: 1.3rem !important; }
    body.coach-page .score-minus { min-width: 26px; min-height: 36px; padding: 0; font-size: 1rem; }
    body.coach-page .score-center { min-width: 38px; padding: 0 2px; gap: 0; }
    .coach-page .score-center-label { display: none; }
    body.coach-page .btn-score-reset { min-width: 30px; height: 32px; padding: 0 6px; }
    body.coach-page .ui-panel-body .cam-split-btn { display: contents; }
    body.coach-page .ui-panel-body .btn-icon {
        flex: 1 0 56px;
        min-width: 44px;
        min-height: 44px;
        height: 44px;
        padding: 0 8px;
        border-radius: 8px;
    }
    body.coach-page .ui-panel-body .coach-side-selector {
        flex: 1 0 150px;
        height: 44px;
        box-sizing: border-box;
        justify-content: center;
    }
    body.coach-page .ui-panel-body .coach-side-btn { min-height: 36px; }
    body.coach-page .ui-panel-body .draw-color-controls { flex-basis: 96px; }
    body.coach-page .tactical-phase-toggle.show {
        display: contents !important;
    }
    .coach-page #btnTacticalPos { flex: 0 1 112px; }
    .coach-page .tactical-mode-group,
    .coach-page .tactical-rot-group,
    .coach-page .tactical-steps-group {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        gap: 3px;
        justify-content: center;
    }
    .coach-page .tactical-rot-group { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .coach-page .tactical-mode-group { width: auto; flex: 1 1 150px; }
    .coach-page .tactical-rot-group, .coach-page .tactical-steps-group { flex: 1 0 100%; }
    .coach-page .tactical-steps-group { flex-wrap: wrap; }
    .coach-page .tactical-phase-toggle .phase-btn,
    .coach-page .tactical-phase-toggle .rot-btn,
    .coach-page .tactical-phase-toggle .step-btn {
        flex: 1;
        min-width: 0;
        min-height: 36px;
        padding: 0 5px;
        font-size: 0.64rem;
    }

    /* Fixed HUDs must also fit the square and landscape compact layouts. */
    .coach-page .hud-tactical { max-width: calc(50% - 24px); padding: 5px 7px; font-size: 0.58rem; }
    .coach-page #hud-a { left: 8px; bottom: 42px; }
    .coach-page #hud-b { right: 8px; left: auto; bottom: 78px; }

    @media (min-width: 600px) {
        .ui-panel-body .input-group { flex: 1 1 240px; }
    }

    @media (max-width: 650px) {
        .arena-page .roster-grid { grid-template-columns: minmax(0, 1fr); }
    }

    @media (max-height: 540px) {
        .compact-panel-nav { padding: 2px; }
        .compact-panel-nav button { min-height: 28px; }
        .ui-panel .ui-panel-body { gap: 6px; }
    }
}

/* A phone held sideways can keep the scoreboard on the same line. */
@media (min-width: 650px) and (max-width: 1100px) and (max-height: 540px) {
    .header-top { grid-template-columns: auto minmax(0, 1fr) auto auto; }
    .header-top h1 { font-size: 0.65rem; }
    .scoreboard { grid-column: 2; grid-row: 1; }
    .user-menu { grid-column: 3; }
    .panel-toggle { grid-column: 4; }
}

@media (max-width: 350px) {
    .header-top { gap: 6px; }
    .user-btn { max-width: 84px; padding: 4px 6px; }
    .score-info { padding: 3px; }
    .score-minus, .score-plus { flex-basis: 22px; width: 22px; }
}