/* Mobile / compact layout for Battle, Team, and New Team only.
   Does not change global nav, footer, or ad-rail rules. */

/* -------------------------------------------------------------------------- */
/* Shared gameplay page gutters                                               */
/* -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .content:has(.battle-view),
    .content:has(.battle-switch-picker),
    .content:has(.battle-confirm),
    .content:has(.team-current-name-row),
    .content:has(.newteam-pokemon-select-row),
    .content:has(.newteam-edit-roster-strip) {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Battle field                                                               */
/* -------------------------------------------------------------------------- */

.battle-view {
    max-width: 800px;
    overflow-x: clip;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

.battle-hp-box {
    min-width: 0;
    overflow: hidden;
    word-break: break-word;
}

.battle-hp-box .progress {
    overflow: hidden;
}

.battle-sprite-cell {
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.battle-view .battle-sprite {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.battle-menu-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.battle-menu-stack .btn {
    margin: 0;
}

.battle-move-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
    align-items: stretch;
}

.battle-view .battle-move-btn {
    width: 100%;
    margin: 0;
    min-height: 2.75rem;
    white-space: normal;
    text-align: center;
    word-break: break-word;
    line-height: 1.2;
    padding: 0.4rem 0.35rem;
}

.battle-move-name {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: capitalize;
}

.battle-move-meta {
    font-size: 0.75rem;
    display: block;
}

.battle-switch-screen {
    overflow-x: clip;
}

.battle-switch-alive-btn {
    min-height: 44px;
    margin: 0 !important;
    padding: 0.25rem;
}

.battle-confirm .btn-lg {
    min-height: 44px;
}

.battle-need-team .btn {
    min-height: 44px;
}

.pokemon-info-card .progress {
    overflow: hidden;
}

/* Compact portrait phones */
@media (max-width: 576px) {
    .battle-view .battle-sprite {
        height: min(16vh, 112px);
        width: min(16vh, 112px);
        max-width: 42vw;
        max-height: 16vh;
    }

    .battle-hp-box {
        padding: 0.4rem !important;
        margin-bottom: 0.35rem !important;
        font-size: 0.85rem;
    }

    .battle-hp-box .progress {
        height: 10px;
    }

    .battle-log-panel {
        min-height: 0;
        max-height: 5.5rem;
        overflow-y: auto;
        margin-bottom: 0.5rem !important;
        padding: 0.45rem 0.55rem !important;
        font-size: 0.8rem;
    }

    .battle-controls-row {
        flex-direction: column;
        --bs-gutter-x: 0.5rem;
    }

    .battle-controls-row > [class*="col-"] {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .battle-controls-row h5 {
        font-size: 0.95rem;
        margin-bottom: 0.35rem;
    }

    /* Switch + Forfeit side-by-side so Fight stays on-screen */
    .battle-menu-stack {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .battle-menu-stack h5 {
        flex: 1 0 100%;
    }

    .battle-menu-stack .btn,
    .battle-controls-row > [class*="col-"] > .btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-height: 44px;
        margin: 0 !important;
    }

    .battle-controls-row > [class*="col-"]:not(:has(.battle-menu-stack)) {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: stretch;
    }

    .battle-controls-row > [class*="col-"]:not(:has(.battle-menu-stack)) > h5 {
        flex: 1 0 100%;
    }

    .battle-view .battle-move-btn {
        min-height: 48px;
        font-size: 0.85rem;
    }

    .battle-move-name {
        font-size: 0.8rem;
    }

    .battle-move-meta {
        font-size: 0.72rem;
    }

    .pokemon-info-card {
        min-height: 0 !important;
    }

    .battle-switch-picker > [class*="col-"],
    .battle-confirm .row > [class*="col-md-4"] {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
    }

    .battle-switch-picker .pokemon-info-sprite,
    .battle-switch-picker .team-pokemon-stats-sprite-img {
        height: 64px;
        width: 64px;
    }

    .battle-switch-picker .team-pokemon-stats-sprite-btn {
        width: 64px;
        height: 64px;
    }
}

/* Short landscape (phone on its side) */
@media (orientation: landscape) and (max-height: 500px) {
    .battle-view {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "opp ply"
            "log log"
            "ctl ctl";
        gap: 0.25rem 0.5rem;
        align-items: center;
        max-width: none;
    }

    .battle-view > .battle-field-row--opponent,
    .battle-view > .row.battle-field-row--opponent {
        grid-area: opp;
        margin: 0;
        --bs-gutter-x: 0.35rem;
    }

    .battle-view > .battle-field-row--player,
    .battle-view > .row.battle-field-row--player {
        grid-area: ply;
        margin: 0;
        --bs-gutter-x: 0.35rem;
    }

    .battle-view > .battle-log-panel {
        grid-area: log;
        min-height: 0;
        max-height: 3.25rem;
        overflow-y: auto;
        margin-bottom: 0 !important;
        padding: 0.3rem 0.5rem !important;
        font-size: 0.75rem;
    }

    .battle-view > .battle-controls-row {
        grid-area: ctl;
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: stretch;
        margin: 0;
        --bs-gutter-x: 0.4rem;
    }

    .battle-view > .battle-controls-row > .col-12 {
        width: auto;
        max-width: none;
        margin-bottom: 0 !important;
    }

    .battle-view > .battle-controls-row > .col-md-4 {
        flex: 0 0 9.5rem;
        width: 9.5rem;
        max-width: 9.5rem;
    }

    .battle-view > .battle-controls-row > .col-md-8 {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
    }

    .battle-view .battle-sprite {
        height: min(22vh, 72px);
        width: min(22vh, 72px);
        max-width: 18vw;
        max-height: 22vh;
    }

    .battle-hp-box {
        padding: 0.25rem 0.4rem !important;
        margin-bottom: 0 !important;
        font-size: 0.75rem;
    }

    .battle-hp-box .progress {
        height: 8px;
    }

    .battle-controls-row h5 {
        display: none;
    }

    .battle-menu-stack {
        flex-direction: column;
        gap: 0.35rem;
        height: 100%;
    }

    .battle-menu-stack .btn {
        min-height: 40px;
        font-size: 0.85rem;
    }

    .battle-view .battle-move-btn {
        min-height: 40px;
        padding: 0.25rem 0.3rem;
    }

    .battle-move-name {
        font-size: 0.75rem;
    }

    .battle-move-meta {
        font-size: 0.7rem;
    }

    .battle-move-grid {
        gap: 0.35rem;
    }

    .team-battle-cta-wrap {
        margin: 0.45rem 0 0.6rem;
    }

    .pokemon-info-card {
        padding: 0.3rem !important;
    }

    .gameplay-page.editor-canvas-row,
    .editor-canvas-row.gameplay-page {
        max-height: none;
        overflow-y: visible;
    }

    .editor-canvas-main {
        max-height: none;
        overflow-y: visible;
    }
}

/* -------------------------------------------------------------------------- */
/* Team                                                                       */
/* -------------------------------------------------------------------------- */

.pokemon-info-card {
    min-height: 160px;
    position: relative;
    overflow: hidden;
}

.pokemon-info-card h6 {
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
}

.pokemon-info-sprite {
    height: 80px;
    width: 80px;
    margin: auto;
    object-fit: contain;
    display: block;
}

.team-saved-lineup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.team-current-name-group {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
}

@media (max-width: 767.98px) {
    .team-current-name-row {
        font-size: 1.15rem;
        gap: 0.25rem 0.4rem;
    }

    .team-rename-editor {
        width: 100%;
    }

    .team-rename-input,
    .team-rename-editor .form-control {
        min-width: 0;
        max-width: 100%;
        flex: 1 1 10rem;
        font-size: 16px;
        min-height: 44px;
    }

    .team-rename-editor .btn,
    .team-saved-lineup-actions .btn,
    .team-lineup-rename-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .team-battle-cta-wrap {
        margin: 1rem 0 1.25rem;
        padding: 0;
    }

    .team-battle-cta-wrap:has(.team-lineup-edit-btn) > .btn {
        flex: 1 1 100%;
        max-width: none;
        padding: 0.85rem 1rem !important;
        font-size: 0.95rem !important;
        letter-spacing: 0.04em;
    }

    .team-page-grid > [class*="col-"],
    .editor-canvas-main .row:has(.pokemon-info-card) > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
    }

    .pokemon-info-card {
        min-height: 0;
        padding: 0.5rem !important;
    }

    .team-pokemon-stats-sprite-btn,
    .team-pokemon-stats-sprite-img {
        width: 64px;
        height: 64px;
    }

    .team-saved-lineup-actions .btn {
        flex: 1 1 auto;
        font-size: 0.9rem;
    }
}

/* -------------------------------------------------------------------------- */
/* New Team                                                                   */
/* -------------------------------------------------------------------------- */

.newteam-continue-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.75rem;
}

.newteam-moves-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

@media (max-width: 767.98px) {
    .newteam-continue-bar .btn,
    .newteam-moves-actions .btn {
        min-height: 44px;
        margin: 0 !important;
    }

    .newteam-continue-bar .form-control,
    .editor-canvas-main .form-control,
    .editor-canvas-main .form-select {
        font-size: 16px;
        min-height: 44px;
    }

    .row:has(.newteam-pokemon-select-row) > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .newteam-pokemon-select-row {
        min-height: 44px;
        gap: 0.15rem;
    }

    .newteam-pokemon-select-row .text-truncate {
        font-size: 0.8rem;
        line-height: 1.15;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .newteam-grid-sprite-btn {
        width: 44px;
        height: 44px;
    }

    .newteam-grid-sprite-btn img {
        width: 40px;
        height: 40px;
    }

    .newteam-edit-roster-strip {
        justify-content: flex-start;
        gap: 0.5rem;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }

    .newteam-edit-roster-card {
        width: 8.75rem;
        flex: 0 0 8.75rem;
        padding: 2rem 0.4rem 0.45rem;
    }

    .newteam-edit-roster-avatar-btn,
    .newteam-edit-roster-avatar,
    .newteam-edit-roster-avatar-placeholder {
        width: 72px;
        height: 72px;
    }

    .newteam-edit-roster-close-btn {
        min-width: 36px;
        min-height: 36px;
    }

    .newteam-stats-btn {
        min-height: 32px;
        padding: 0.2rem 0.45rem;
    }

    .newteam-edit-roster-pencil-btn {
        min-height: 36px;
        width: 100%;
    }

    .newteam-edit-roster-move {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .newteam-stats-modal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .newteam-stats-modal .modal-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .newteam-stats-modal .modal-footer .btn {
        min-height: 44px;
        flex: 1 1 auto;
    }

    .newteam-moves-card .form-select {
        font-size: 16px;
        min-height: 44px;
    }
}

@media (max-width: 400px) {
    .newteam-edit-roster-card {
        width: 8.25rem;
        flex: 0 0 8.25rem;
    }
}

/* Desktop spot-check: keep existing large sprites / CTAs above 991px */
@media (min-width: 992px) {
    .battle-view .battle-move-btn {
        min-height: 2.5rem;
    }
}