/* =========================================================
   SCORCHED DIVIDE — TOUCH & PHONE FIXES
   Loaded last. style.css sets `touch-action: none` on every
   element so the battlefield never scrolls or zooms; the
   screens below must still scroll with a finger.
   ========================================================= */

#main-menu, #main-menu *,
#loadout-screen, #loadout-screen *,
#locker-modal, #locker-modal *,
#game-over-modal, #game-over-modal *,
#orientation-warning, #orientation-warning * {
    touch-action: manipulation;
}

/* The in-match card bar scrolls sideways on very narrow phones */
#deck-panel, #deck-panel * {
    touch-action: pan-x;
}

button, .tactical-card, .terrain-card {
    -webkit-tap-highlight-color: transparent;
}

/* Nothing in the card bar may shrink: a squeezed button is an untappable button */
#deck-panel > *,
#deck-cards > * {
    flex: 0 0 auto;
}

/* Keyboard shortcut labels mean nothing on a touchscreen */
body.touch-ui .key-hint,
body.touch-ui .card-key {
    display: none !important;
}

/* ---------- Narrow phones in landscape (e.g. 740x360, 667x375) ---------- */
@media (max-width: 820px) and (max-height: 600px) {
    #deck-panel {
        gap: 4px;
        padding: 3px 5px;
        max-width: calc(100vw - 8px);
    }

    #deck-cards { gap: 4px; }

    .tactical-card {
        width: 58px;
        height: 80px;
    }

    .card-thumb { height: 38px; }

    #commander-ability-btn,
    .harvester-btn {
        width: 52px;
        height: 80px;
    }

    #btn-quick-deploy,
    .army-select-btn {
        width: 48px;
        height: 80px;
    }

    .field-cap {
        min-width: 0;
        padding-left: 4px;
        padding-right: 4px;
    }
}

@media (max-width: 900px) and (max-height: 600px) and (min-width: 821px) {
    .tactical-card { width: 62px; }
}

@media (max-width: 700px) and (max-height: 600px) {
    .tactical-card { width: 50px; }
    #commander-ability-btn, .harvester-btn { width: 48px; }
    #btn-quick-deploy, .army-select-btn { width: 44px; }
    .card-role { display: none; }
    .harvester-btn .btn-content .txt,
    #commander-ability-btn .btn-content .txt { font-size: 7.5px; letter-spacing: 0; }
}

/* Tablets: the full-size card bar is a little wider than an iPad in landscape */
@media (min-width: 901px) and (max-width: 1280px) and (min-height: 601px) {
    #deck-panel { gap: 7px; padding: 7px 10px; }
    #deck-cards { gap: 7px; }
    .tactical-card { width: 88px; }
}