/* ════════════════════════════════════════════════════════════════════
   mp-arena-mobile.css — dedicated mobile styles for the Multiplayer Arena
   (host + joiner views). Loaded AFTER mobile-responsive-fixes.css so these
   authoritative rules win.

   Fixes:
   1. HOST: the live EmulatorJS canvas now fills the video frame instead of
      collapsing (#game / #game-display-area used to shrink to ~1px and the
      canvas escaped the frame, leaving only "Loading Game…" visible).
   2. HOST: the on-screen console gamepad (#mobileControls) is shown fixed at
      the bottom so the host can actually play on a phone, and the arena
      content reserves space so chat/players scroll clear of it.
   3. JOINER: the streamed video area sizes correctly inside the frame.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px), (pointer: coarse) {

    /* ─── HOST: emulator canvas must fill the green video frame ─────────── */
    /* Selectors are intentionally high-specificity (html + multiple classes +
       :has) so they beat the `:has(.mp-arena-v5)` rules in
       mobile-responsive-fixes.css that otherwise force height:auto. */
    html body.emulator-page.mp-host-mode:has(.mp-arena-v5) .mp-video-wrapper {
        /* Definite height so the percentage-height chain below resolves
           (min-height alone leaves the children collapsing to content). */
        height: clamp(240px, 46dvh, 460px) !important;
        min-height: clamp(240px, 46dvh, 460px) !important;
        max-height: 56dvh !important;
        aspect-ratio: auto !important;
        display: flex !important;
        overflow: hidden !important;
        background: #05060c !important;
    }

    html body.emulator-page.mp-host-mode:has(.mp-arena-v5) #mp-host-emulator-slot,
    html body.emulator-page.mp-host-mode:has(.mp-arena-v5) #game-display-area,
    html body.emulator-page.mp-host-mode:has(.mp-arena-v5) #game,
    html body.emulator-page.mp-host-mode:has(.mp-arena-v5) #game .ejs_parent,
    html body.emulator-page.mp-host-mode:has(.mp-arena-v5) #game .ejs_canvas_parent,
    html body.emulator-page.mp-host-mode:has(.mp-arena-v5) .ejs_canvas_parent {
        position: relative !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
    }

    html body.emulator-page.mp-host-mode:has(.mp-arena-v5) #game canvas,
    html body.emulator-page.mp-host-mode:has(.mp-arena-v5) canvas.ejs_canvas {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        display: block !important;
        image-rendering: pixelated !important;
        margin: 0 auto !important;
    }

    /* ─── HOST: show the console gamepad fixed at the bottom ────────────── */
    /* (#mobileControls is preserved by multiplayer-emulator.js setupLayout.)
       The detailed button layout comes from #mobile-gamepad-critical-fit in
       emulator.html; here we just guarantee visibility inside the arena. */
    body.mp-host-mode:not(.og-arcade-only) #mobileControls.mobile-gamepad {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 6000 !important;
        grid-row-gap: 4px !important;
        padding-top: 6px !important;
    }

    /* Compact the SNES-style ABXY diamond a touch in host mode so the bottom
       (B) button is never clipped by the viewport edge. High-specificity
       selectors (id + classes) so they beat console-gamepads.css. */
    html body.emulator-page.mp-host-mode:not(.og-arcade-only) #mobileControls.mobile-gamepad .gpad-abxy {
        grid-template-columns: 46px 46px 46px !important;
        grid-template-rows: 46px 46px 46px !important;
        gap: 6px !important;
    }
    html body.emulator-page.mp-host-mode:not(.og-arcade-only) #mobileControls.mobile-gamepad .gpad-action {
        width: 46px !important;
        height: 46px !important;
    }
    /* Match the analog stick to the smaller cluster height. */
    html body.emulator-page.mp-host-mode:not(.og-arcade-only) #mobileControls.mobile-gamepad .gpad-stick-zone {
        width: 104px !important;
        height: 104px !important;
    }

    /* Reserve room so the dock / players / chat can scroll fully into view
       above the fixed gamepad overlay. */
    body.mp-host-mode .mp-arena-v5 {
        padding-bottom: calc(230px + env(safe-area-inset-bottom)) !important;
    }

    /* Genesis / Master System / Game Gear have no shoulder row, so the pad is
       shorter — trim the reserved space a touch. */
    body.mp-host-mode[data-mp-no-shoulders] .mp-arena-v5 {
        padding-bottom: calc(196px + env(safe-area-inset-bottom)) !important;
    }

    /* ─── JOINER: streamed video sizes correctly inside the frame ──────── */
    body:has(.mp-arena-v5):not(.mp-host-mode) .mp-video-wrapper {
        min-height: 38dvh !important;
        background: #05060c !important;
    }

    body:has(.mp-arena-v5):not(.mp-host-mode) .mp-video-wrapper video,
    body:has(.mp-arena-v5):not(.mp-host-mode) .mp-video-wrapper canvas {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        display: block !important;
        background: #05060c !important;
    }
}

/* ─── HOST landscape: game on top, gamepad overlay, panels scroll ──────── */
@media (orientation: landscape) and (max-height: 560px) and (pointer: coarse),
       (orientation: landscape) and (max-height: 560px) and (max-width: 900px) {
    html body.emulator-page.mp-host-mode:has(.mp-arena-v5) .mp-video-wrapper {
        height: clamp(180px, 64dvh, 460px) !important;
        min-height: clamp(180px, 64dvh, 460px) !important;
        max-height: 82dvh !important;
        overflow: hidden !important;
    }
    body.mp-host-mode .mp-arena-v5 {
        padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
    }
}