/**
 * Shared mobile layout: map centered, picks/bans on sides.
 * Used by draft.html (all modes) and last_pick_quiz.html.
 */
@media (max-width: 768px) {
    .map-layout-container,
    .lpq-map-layout {
        --map-side-pick-size: clamp(54px, 16vw, 72px);
        --map-side-slot-gap: 5px;
        --map-side-ban-size: clamp(24px, 7vw, 32px);
        --map-side-pick-stack-height: calc(var(--map-side-pick-size) * 3 + var(--map-side-slot-gap) * 2);
        --map-side-map-width: clamp(102px, 29vw, 138px);

        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        gap: clamp(3px, 1.2vw, 8px);
        margin-left: auto;
        margin-right: auto;
    }

    #map-draft-screen,
    #free-draft-screen {
        --map-side-pick-size: clamp(54px, 16vw, 72px);
        --map-side-slot-gap: 5px;
        --map-side-ban-size: clamp(24px, 7vw, 32px);
        --map-side-pick-stack-height: calc(var(--map-side-pick-size) * 3 + var(--map-side-slot-gap) * 2);
        --map-side-map-width: clamp(102px, 29vw, 138px);
        --draft-pick-size: var(--map-side-pick-size);
        --draft-slot-gap: var(--map-side-slot-gap);
        --draft-pick-stack-height: var(--map-side-pick-stack-height);
    }

    .lpq-map-layout {
        --lpq-pick-size: var(--map-side-pick-size);
        --lpq-slot-gap: var(--map-side-slot-gap);
    }

    .map-center-column,
    .lpq-map-center {
        width: var(--map-side-map-width) !important;
        max-width: none !important;
        height: auto !important;
        aspect-ratio: 22 / 35;
        order: unset !important;
        flex: 0 0 auto;
        align-self: flex-start;
    }

    .map-side-column,
    .lpq-map-side-column {
        order: unset !important;
        width: auto;
        max-width: none;
        flex: 0 0 auto;
        justify-content: flex-start;
        margin: 0;
        padding: 2px 3px 3px;
        gap: 3px;
    }

    .vertical-slots,
    .lpq-vertical-slots {
        flex-direction: column !important;
        gap: var(--map-side-slot-gap);
        height: auto;
    }

    .ban-column,
    .lpq-ban-column {
        height: var(--map-side-pick-stack-height);
        justify-content: space-between;
        gap: 0;
    }

    .ban-slot,
    .lpq-ban-slot {
        width: var(--map-side-ban-size);
        height: var(--map-side-ban-size);
    }

    .map-name-display,
    .lpq-map-name {
        font-size: clamp(0.62rem, 2.6vw, 0.78rem);
        line-height: 1.2;
    }

    .map-name-overlay,
    .lpq-map-name-overlay {
        padding: 4px 5px;
    }

    .map-change-overlay-btn {
        font-size: 0.58rem;
        padding: 2px 7px;
        bottom: 5px;
    }

    .battle-map-img,
    .lpq-map-img {
        object-fit: cover;
        object-position: center center;
    }

    .lpq-pick-slot.is-hidden .lpq-pick-img-box {
        font-size: clamp(0.95rem, 4vw, 1.15rem);
    }

    .draft-board {
        width: 100%;
        max-width: 100%;
    }

    .lpq-board-stack {
        width: 100%;
        max-width: 100%;
    }

    .lpq-map-layout {
        width: 100%;
    }
}