/* ============================================================
   Responsive overrides
   Base rules are fluid (clamp/min/max) so these blocks only need
   to fix layout *structure* per form factor, not font sizes.
   ============================================================ */

/* ---------- Touch devices: free up the bottom of the screen ---- */
html.is-touch .hud-ability-bar {
    display: none;
}

html.is-touch .hud-level,
html.is-touch .hud-weapon {
    display: none;
}

html.is-touch .minimap {
    /* Sits directly above the thumb cluster, whose measured height is
       published by HUD.measureTouchLayout() as --mc-h. */
    top: auto;
    bottom: calc(var(--mc-h, 0px) + 14px + var(--safe-b));
    right: calc(8px + var(--safe-r));
    transform: none;
}

/* On touch the energy readout joins the left status column (HUD.init
   moves the node there) so it can never fight the thumb controls. */
html.is-touch .hud-bottom {
    position: static;
    transform: none;
    text-align: left;
    width: 100%;
}

/* ---------- Short viewports (landscape phones) ----------------- */
@media (max-height: 480px) {
    :root {
        --gap: clamp(6px, 1.6vh, 12px);
        --pad: clamp(8px, 2.2vh, 18px);
    }

    .menu-content {
        gap: var(--gap);
    }

    .mode-card p {
        display: none;
    }

    .mode-card {
        padding: 10px 12px;
    }

    .hud-ability-bar {
        bottom: calc(8px + var(--safe-b));
    }

    /* Desktop only: the ability bar owns the bottom strip here. Touch
       keeps the energy bar in the top-left column. */
    .hud-bottom {
        display: none;
    }

    /* Keep banners clear of the minimap on short landscape screens. */
    .hud-objective,
    .hud-alert {
        max-width: min(80%, 520px);
    }

    html.is-touch .joystick-area {
        height: 78%;
        min-height: 130px;
    }
}

/* Ability slots get too small for key hints and energy costs; the
   upgrade screen and help screen still document both. */
@media (max-width: 560px), (max-height: 640px) {
    .ability-key,
    .ability-energy {
        display: none;
    }
}

/* Very narrow screens: let the objective wrap instead of clipping. */
@media (max-width: 460px) {
    .hud-objective,
    .hud-alert {
        white-space: normal;
        text-align: center;
        letter-spacing: 1px;
        line-height: 1.25;
    }
}

/* Very short landscape: keep the action cluster from stacking up */
@media (max-height: 380px) {
    .joystick-base {
        width: clamp(84px, 26vmin, 120px);
        height: clamp(84px, 26vmin, 120px);
    }

    .ability-btn {
        width: clamp(32px, 9vmin, 44px);
        height: clamp(32px, 9vmin, 44px);
    }

    .fire-btn {
        width: clamp(56px, 17vmin, 80px);
        height: clamp(56px, 17vmin, 80px);
    }

    .boost-btn {
        width: clamp(44px, 13vmin, 64px);
        height: clamp(44px, 13vmin, 64px);
    }

    .ability-name,
    .hud-wave,
    .hud-level,
    .hud-weapon {
        display: none;
    }
}

/* ---------- Landscape: two-column help grid -------------------- */
@media (orientation: landscape) and (min-width: 620px) {
    .help-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--gap) 20px;
        text-align: left;
    }
}

/* ---------- Portrait phones ----------------------------------- */
@media (orientation: portrait) and (max-width: 820px) {
    .mode-cards {
        flex-direction: column;
        align-items: center;
        gap: clamp(6px, 1.4vh, 10px);
    }

    .mode-card {
        width: min(340px, 88vw);
        max-width: 100%;
    }

    .joystick-area {
        width: 52%;
        height: 52%;
    }

    .mobile-actions {
        max-width: 46vw;
    }
}

/* ---------- Small phones -------------------------------------- */
@media (max-width: 400px) {
    .menu-buttons {
        width: min(260px, 88vw);
    }

    .settings-list,
    .gameover-stats {
        width: min(300px, 90vw);
    }

    .mobile-actions {
        right: calc(6px + var(--safe-r));
        bottom: calc(6px + var(--safe-b));
    }

    .mobile-ability-row {
        gap: 3px;
    }

    .ability-name {
        display: none;
    }
}

/* ---------- Tablets / small laptops ---------------------------- */
@media (min-width: 700px) and (max-width: 1024px) {
    .joystick-area {
        width: 40%;
        height: 58%;
    }
}

/* ---------- Large screens ------------------------------------- */
@media (min-width: 1600px) {
    .menu-buttons {
        width: 340px;
    }

    .menu-content {
        gap: clamp(20px, 3vh, 30px);
    }
}

@media (min-width: 2200px) {
    :root {
        --fs-base: 19px;
    }

    .menu-buttons {
        width: 380px;
    }
}

/* ---------- Coarse pointers: kill hover-only affordances ------- */
@media (hover: none) and (pointer: coarse) {
    .btn:hover {
        transform: none;
    }

    .btn-primary:hover {
        box-shadow: 0 0 20px rgba(0, 180, 255, 0.3);
    }

    .mode-card:hover {
        transform: none;
        background: var(--glass);
        border-color: var(--glass-border);
    }

    .fullscreen-btn:hover {
        background: var(--glass);
        border-color: var(--glass-border);
        color: var(--text);
    }
}

/* ---------- Reduced motion ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hud-alert,
    .boss-warn,
    .wave-text,
    .boss-announce-name {
        animation: none;
    }
}