/*
   OldGames mobile responsive fixes
   Final layer loaded after the older mobile styles.
*/

@media (max-width: 768px), (pointer: coarse) {
    html {
        width: 100%;
        min-height: 100%;
        background: #030409 !important;
    }

    body {
        width: 100%;
        min-width: 0 !important;
        overscroll-behavior-y: contain;
        -webkit-text-size-adjust: 100%;
    }

    button,
    [role="button"],
    .mp-btn,
    .arcade-header-btn,
    .arcade-nav-btn,
    .multiplayer-create-btn,
    .multiplayer-join-btn,
    .multiplayer-play-btn,
    .multiplayer-close-btn {
        min-height: 44px;
        touch-action: manipulation;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Mobile ads: no side rails or floating ad frames over content */
@media (max-width: 1099px), (pointer: coarse) {
    #adsterra-left-rail,
    #adsterra-right-rail,
    .og-desktop-rail,
    [data-ad-slot="left-rail"],
    [data-ad-slot="right-rail"],
    [data-ad-slot="article-left"],
    [data-ad-slot="article-right"] {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
}

@media (max-width: 768px), (pointer: coarse) {
    body > div[data-og-pinned],
    body > div[id^="ad-container"],
    body > div[id^="adContainer"],
    body > div[id^="hta-"],
    body > div[id^="ha-"],
    body > div[id^="hadver-"],
    body > div[id^="hilltop-"],
    body > div[id^="masculine-"] {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }

    [data-ad-slot="mobile-top"],
    [data-ad-slot="mobile-bottom"] {
        max-width: 320px !important;
        max-height: 50px !important;
        margin: 0 auto !important;
        overflow: hidden !important;
    }
}

/* OldGames Live compact mobile card */
@media (max-width: 768px), (pointer: coarse) {
    .hero-panels-row {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 12px !important;
        gap: 12px !important;
        overflow: visible !important;
    }

    .hero-live-panel {
        width: 100% !important;
        max-width: 360px !important;
        min-height: 168px !important;
        max-height: 214px !important;
        height: 214px !important;
        margin: 0 auto !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        transform: none !important;
        animation: none !important;
        box-shadow:
            0 12px 30px rgba(0, 0, 0, .55),
            0 0 0 1px rgba(255, 45, 85, .34) !important;
    }

    .hero-live-panel::before,
    .hero-live-panel::after,
    .hero-live-panel .hero-canvas {
        display: none !important;
    }

    .hero-live-header {
        min-height: 38px !important;
        padding: 8px 10px !important;
        gap: 8px !important;
    }

    .hero-live-title {
        font-size: .78rem !important;
        letter-spacing: 1px !important;
    }

    .hero-live-count {
        min-width: 28px !important;
        height: 24px !important;
        font-size: .72rem !important;
    }

    .hero-live-content,
    .hero-live-carousel,
    .hero-live-stream {
        min-height: 0 !important;
        height: 100% !important;
        max-height: 176px !important;
        overflow: hidden !important;
    }

    .hero-live-video-wrapper {
        min-height: 110px !important;
        height: 116px !important;
        max-height: 116px !important;
        gap: 0 !important;
        border-radius: 0 !important;
    }

    .hero-live-video-area {
        min-height: 110px !important;
        height: 116px !important;
        max-height: 116px !important;
        border-radius: 0 !important;
    }

    .hero-live-cover-small,
    .hero-live-stream-counter,
    .hero-live-dots,
    .hero-live-progress,
    .hero-live-stream-viewers,
    .hero-live-stream-status {
        display: none !important;
    }

    .hero-live-badge-live,
    .hero-live-badge-playing,
    .hero-live-console-badge {
        top: 8px !important;
        padding: 4px 8px !important;
        font-size: .56rem !important;
        border-radius: 6px !important;
        letter-spacing: .8px !important;
    }

    .hero-live-stream-info {
        min-height: 52px !important;
        padding: 8px 10px !important;
        gap: 9px !important;
    }

    .hero-live-stream-avatar {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    .hero-live-stream-game {
        font-size: .78rem !important;
        line-height: 1.1 !important;
    }

    .hero-live-stream-user {
        font-size: .68rem !important;
        line-height: 1.15 !important;
    }

    .hero-live-nav {
        width: 32px !important;
        height: 32px !important;
        top: 54% !important;
        font-size: .82rem !important;
        z-index: 20 !important;
    }

    .hero-live-nav-prev {
        left: 8px !important;
    }

    .hero-live-nav-next {
        right: 8px !important;
    }

    .hero-live-stream::after {
        opacity: 1 !important;
        transform: translate(-50%, -50%) scale(.92) !important;
        padding: 8px 14px !important;
        font-size: .64rem !important;
        letter-spacing: 1px !important;
    }
}

/* OldGames Radio mobile: compact, reachable, and out of the way */
@media (max-width: 768px), (pointer: coarse) {
    .radio-player,
    body.modern-ui-theme .radio-player {
        left: max(12px, env(safe-area-inset-left)) !important;
        right: auto !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        transform: none !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        z-index: 9005 !important;
    }

    .radio-player.emu-hidden,
    body.modern-ui-theme .radio-player.emu-hidden {
        transform: translateY(14px) !important;
    }

    .radio-bar,
    body.modern-ui-theme .radio-bar {
        width: 152px !important;
        min-width: 0 !important;
        max-width: 152px !important;
        height: 38px !important;
        padding: 0 9px !important;
        border-radius: 12px !important;
        gap: 6px !important;
        background: linear-gradient(135deg, rgba(8, 11, 22, .96), rgba(24, 11, 36, .94)) !important;
        border-color: rgba(255, 225, 122, .32) !important;
        box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 45, 85, .16) !important;
    }

    .radio-glow-ring,
    body.modern-ui-theme .radio-glow-ring {
        border-radius: 12px !important;
        box-shadow: 0 0 0 1px rgba(255, 225, 122, .24), 0 0 18px rgba(255, 45, 85, .18) !important;
    }

    .radio-equalizer,
    body.modern-ui-theme .radio-equalizer {
        height: 18px !important;
        gap: 2px !important;
    }

    .radio-equalizer span,
    body.modern-ui-theme .radio-equalizer span {
        width: 3px !important;
        max-height: 18px !important;
        background: linear-gradient(to top, #ff2d55, #ffe47a) !important;
    }

    .radio-bar-center,
    body.modern-ui-theme .radio-bar-center {
        gap: 5px !important;
    }

    .radio-live-badge,
    body.modern-ui-theme .radio-live-badge {
        padding: 2px 5px !important;
        border-radius: 6px !important;
        background: rgba(34, 197, 94, .1) !important;
        border-color: rgba(34, 197, 94, .24) !important;
    }

    .radio-live-badge span:last-child,
    body.modern-ui-theme .radio-live-badge span:last-child {
        font-size: 0 !important;
        letter-spacing: 0 !important;
    }

    .radio-live-badge span:last-child::after,
    body.modern-ui-theme .radio-live-badge span:last-child::after {
        content: 'ON';
        font-size: 7px;
        color: #a7f3d0;
        letter-spacing: .6px;
    }

    .radio-marquee-wrap,
    body.modern-ui-theme .radio-marquee-wrap {
        max-width: 68px !important;
    }

    .radio-marquee,
    body.modern-ui-theme .radio-marquee {
        font-size: 8px !important;
        color: rgba(255, 255, 255, .86) !important;
        animation-duration: 14s !important;
    }

    .radio-chevron,
    body.modern-ui-theme .radio-chevron {
        width: 12px !important;
        height: 12px !important;
        color: rgba(255, 225, 122, .7) !important;
    }

    .radio-panel,
    body.modern-ui-theme .radio-panel {
        position: fixed !important;
        left: max(12px, env(safe-area-inset-left)) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        bottom: calc(max(12px, env(safe-area-inset-bottom)) + 48px) !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(52dvh, 360px) !important;
        overflow: hidden auto !important;
        transform: translateY(10px) scale(.98) !important;
        border-radius: 16px !important;
        background: linear-gradient(160deg, rgba(10, 12, 22, .98), rgba(20, 10, 34, .98)) !important;
        border-color: rgba(255, 225, 122, .26) !important;
        box-shadow: 0 -12px 44px rgba(0, 0, 0, .6), 0 0 40px rgba(255, 45, 85, .16) !important;
    }

    .radio-panel.open,
    body.modern-ui-theme .radio-panel.open {
        transform: translateY(0) scale(1) !important;
    }

    .radio-panel-header,
    .radio-panel-track,
    .radio-panel-controls,
    body.modern-ui-theme .radio-panel-header,
    body.modern-ui-theme .radio-panel-track,
    body.modern-ui-theme .radio-panel-controls {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .radio-track-title,
    body.modern-ui-theme .radio-track-title {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .radio-visualizer,
    body.modern-ui-theme .radio-visualizer {
        height: 38px !important;
        padding-bottom: 8px !important;
    }

    .radio-panel-controls,
    body.modern-ui-theme .radio-panel-controls {
        gap: 12px !important;
        padding-bottom: 14px !important;
    }

    .radio-play-btn,
    body.modern-ui-theme .radio-play-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }

    .radio-vol-row,
    body.modern-ui-theme .radio-vol-row {
        gap: 10px !important;
    }

    .radio-mute-btn,
    body.modern-ui-theme .radio-mute-btn {
        width: 38px !important;
        height: 38px !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, .06) !important;
    }

    .radio-slider,
    body.modern-ui-theme .radio-slider {
        height: 6px !important;
    }
}

@media (max-width: 380px) {
    .radio-bar,
    body.modern-ui-theme .radio-bar {
        width: 132px !important;
        max-width: 132px !important;
    }

    .radio-marquee-wrap,
    body.modern-ui-theme .radio-marquee-wrap {
        max-width: 48px !important;
    }
}

@media (max-width: 768px), (pointer: coarse) {
    html body.modern-ui-theme .radio-player {
        left: max(12px, env(safe-area-inset-left)) !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        transform: none !important;
    }

    html body.modern-ui-theme .radio-player .radio-bar {
        width: 152px !important;
        min-width: 0 !important;
        max-width: 152px !important;
        height: 38px !important;
        padding: 0 9px !important;
    }
}

@media (max-width: 380px) {
    html body.modern-ui-theme .radio-player .radio-bar {
        width: 132px !important;
        max-width: 132px !important;
    }
}

/* Emulator gameplay */
@media (max-width: 768px), (pointer: coarse) {
    body.emulator-page:not(:has(.mp-arena-v5)),
    body.arcade-player-ui:not(:has(.mp-arena-v5)) {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        overflow: hidden !important;
        background: #000 !important;
        touch-action: none;
    }

    body.emulator-page:not(:has(.mp-arena-v5)) #game-container,
    body.arcade-player-ui:not(:has(.mp-arena-v5)) #game-container {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        bottom: max(var(--mobile-controls-reserved, 0px), min(42dvh, 232px)) !important;
        width: 100vw !important;
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(0, 1fr) !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #000 !important;
        overflow: hidden !important;
    }

    body.emulator-page:not(:has(.mp-arena-v5)) #game-sidebar,
    body.arcade-player-ui:not(:has(.mp-arena-v5)) #game-sidebar,
    body.arcade-player-ui:not(:has(.mp-arena-v5)) #arcade-player-header {
        display: none !important;
    }

    body.emulator-page:not(:has(.mp-arena-v5)) #game-display-area,
    body.arcade-player-ui:not(:has(.mp-arena-v5)) #game-display-area,
    body.emulator-page:not(:has(.mp-arena-v5)) #game,
    body.arcade-player-ui:not(:has(.mp-arena-v5)) #game {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100vw !important;
        max-height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #000 !important;
        overflow: hidden !important;
    }

    body.emulator-page #game canvas,
    body.emulator-page #game iframe,
    body.arcade-player-ui #game canvas,
    body.arcade-player-ui #game iframe,
    body.emulator-page .ejs_parent,
    body.emulator-page .ejs_container,
    body.arcade-player-ui .ejs_parent,
    body.arcade-player-ui .ejs_container {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        background: #000 !important;
    }

    body.emulator-page .mobile-gamepad,
    body.arcade-player-ui .mobile-gamepad,
    .mobile-gamepad {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: min(42dvh, 232px) !important;
        padding-left: max(8px, env(safe-area-inset-left)) !important;
        padding-right: max(8px, env(safe-area-inset-right)) !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
        border-radius: 18px 18px 0 0 !important;
        background:
            linear-gradient(180deg, rgba(18, 21, 32, .96), rgba(4, 5, 10, .98)) !important;
        border-top: 1px solid rgba(255, 211, 92, .28) !important;
        box-shadow: 0 -18px 44px rgba(0, 0, 0, .55) !important;
        z-index: 100000 !important;
    }
}

@media (orientation: landscape) and (max-height: 560px) and (pointer: coarse),
       (orientation: landscape) and (max-height: 560px) and (max-width: 900px) {
    body.emulator-page:not(:has(.mp-arena-v5)) #game-container,
    body.arcade-player-ui:not(:has(.mp-arena-v5)) #game-container {
        bottom: 0 !important;
    }

    .mobile-gamepad {
        max-height: 36dvh !important;
        opacity: .94;
    }

    .mobile-gamepad .gpad-menu,
    .mobile-gamepad .menu-row {
        display: none !important;
    }
}

/* Emulator mobile pad arbitration.
   The emulator shell is shared by console and arcade systems, so this
   final layer makes the ownership explicit:
   - console games: one authentic .mobile-gamepad
   - arcade / NeoGeo / MAME / FBNeo games: one .arcade-pad */
@media (max-width: 900px), (pointer: coarse) {
    body.emulator-page.og-arcade-only #mobileControls.mobile-gamepad,
    body.emulator-page.og-arcade-only .mobile-gamepad,
    body.emulator-page #mobileControls.mobile-gamepad[hidden] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.emulator-page.og-arcade-only .arcade-pad {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body.emulator-page:not(.og-arcade-only) .arcade-pad,
    body.emulator-page .arcade-pad[hidden] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.emulator-page:not(.og-arcade-only) #mobileControls.mobile-gamepad {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* Multiplayer game room */
@media (max-width: 900px), (pointer: coarse) {
    html:has(body.emulator-page .mp-arena-v5),
    body.emulator-page:has(.mp-arena-v5) {
        position: static !important;
        width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #030409 !important;
        touch-action: pan-y !important;
    }

    /* The floating "MP" controls button is redundant inside the arena
       (the action dock already has a "PAD Controls" button that opens the
       same modal) and it floats over the chat Send button. Hide it here. */
    body:has(.mp-arena-v5) #mpc-fab {
        display: none !important;
    }

    body.emulator-page:has(.mp-arena-v5) #game-container,
    body.emulator-page:has(.mp-arena-v5) #game-display-area {
        position: static !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .mp-arena-v5 {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        /* Game first (gets the tall row), then meta, then players/chat. */
        grid-template-rows: minmax(56dvh, auto) auto auto !important;
        gap: 10px !important;
        /* Reserve room at the bottom for the fixed virtual gamepad
           (max 42dvh / 232px) so the action dock + chat can scroll into
           view above it instead of being trapped behind it. */
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) calc(min(42dvh, 232px) + env(safe-area-inset-bottom) + 16px) max(8px, env(safe-area-inset-left)) !important;
        overflow: visible !important;
    }

    .mp-arena-v5 .mp-left-rail,
    .mp-arena-v5 .mp-main-content,
    .mp-arena-v5 .mp-right-rail {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        border-radius: 14px !important;
    }

    .mp-arena-v5 .mp-left-rail {
        /* Meta (brand/cover/game info/share) sits BELOW the game on mobile —
           the host needs the screen, not the cover art, front-and-center. */
        order: 2;
        display: grid !important;
        grid-template-columns: 94px minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        gap: 8px !important;
        padding: 8px !important;
        max-height: none !important;
    }

    .mp-arena-v5 .mp-room-brand {
        grid-column: 1 / -1;
        min-height: 38px !important;
        padding: 8px 10px !important;
        border-radius: 12px !important;
    }

    .mp-arena-v5 .mp-game-cover {
        min-height: 110px !important;
        height: 110px !important;
        padding: 6px !important;
    }

    .mp-arena-v5 .mp-game-info {
        min-height: 110px !important;
        padding: 10px !important;
    }

    /* Share Link button: span the full width of the left rail so the
       "LINK" badge and the "Share Link" label stop overlapping inside the
       narrow cover column. */
    .mp-arena-v5 .mp-room-info {
        grid-column: 1 / -1 !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .mp-arena-v5 .mp-room-info .mp-btn {
        width: 100% !important;
        min-height: 50px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 10px 14px !important;
    }

    .mp-arena-v5 .mp-room-info .mp-btn span:first-child {
        flex: 0 0 auto !important;
        min-width: 40px !important;
        height: 28px !important;
    }

    .mp-arena-v5 .mp-room-info .mp-btn span:last-child {
        flex: 0 1 auto !important;
        white-space: nowrap !important;
    }

    .mp-arena-v5 .mp-room-card,
    .mp-arena-v5 .mp-room-code-display {
        display: none !important;
    }

    .mp-arena-v5 .mp-main-content {
        order: 1;
        min-height: 58dvh !important;
        padding: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Inside the host panel, the GAME comes first, then the compact stats
       strip, then the action dock pinned at the bottom. */
    .mp-arena-v5 .mp-main-content .mp-game-display { order: 1; }
    .mp-arena-v5 .mp-main-content .mp-header { order: 2; }
    .mp-arena-v5 .mp-main-content .mp-action-dock { order: 3; }

    .mp-arena-v5 .mp-header {
        min-height: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    .mp-arena-v5 .mp-mode-badge {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        padding: 8px 10px !important;
        border-radius: 12px !important;
    }

    .mp-arena-v5 .mp-session-panel {
        flex: 1 1 100% !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .mp-arena-v5 .mp-session-panel .mp-stat {
        min-height: 52px !important;
        padding: 8px !important;
        border-radius: 10px !important;
    }

    .mp-arena-v5 .mp-stat-value {
        font-size: 1rem !important;
    }

    .mp-arena-v5 .mp-stat-label {
        font-size: .62rem !important;
    }

    .mp-arena-v5 .mp-streaming-indicator {
        width: 100% !important;
        min-height: 42px !important;
        justify-content: center !important;
    }

    .mp-arena-v5 .mp-game-display {
        flex: 1 1 auto !important;
        min-height: 46dvh !important;
        padding: 6px !important;
        border-radius: 14px !important;
    }

    .mp-arena-v5 .mp-video-wrapper {
        width: 100% !important;
        height: auto !important;
        min-height: 240px !important;
        aspect-ratio: 16 / 9;
        border-radius: 10px !important;
    }

    .mp-arena-v5 #mp-stream-video,
    .mp-arena-v5 #mp-host-emulator-slot,
    .mp-arena-v5 #game {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        object-fit: contain !important;
    }

    .mp-arena-v5 .mp-action-dock {
        /* Not sticky: the fixed virtual gamepad (z-index 100000) sits at the
           bottom, so a sticky dock would hide behind it. Let it scroll. */
        position: static !important;
        z-index: 25 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 7px !important;
        border-radius: 14px !important;
    }

    .mp-arena-v5 .mp-action-dock .mp-btn {
        min-height: 48px !important;
        padding: 6px 4px !important;
        border-radius: 11px !important;
        font-size: .72rem !important;
        line-height: 1.05 !important;
    }

    .mp-arena-v5 .mp-action-dock .mp-btn span:first-child {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        font-size: .72rem !important;
    }

    .mp-arena-v5 .mp-right-rail {
        order: 3;
        display: grid !important;
        grid-template-rows: auto auto !important;
        gap: 10px !important;
        padding: 8px !important;
        max-height: none !important;
    }

    .mp-arena-v5 .mp-players-section,
    .mp-arena-v5 .mp-room-chat {
        min-height: 0 !important;
        padding: 10px !important;
        border-radius: 14px !important;
    }

    .mp-arena-v5 .mp-players-list {
        gap: 8px !important;
    }

    .mp-arena-v5 .mp-player-card {
        min-height: 56px !important;
        padding: 8px !important;
        border-radius: 12px !important;
    }

    .mp-arena-v5 .mp-room-chat {
        min-height: 230px !important;
        max-height: 44dvh !important;
    }

    .mp-arena-v5 .mp-chat-messages {
        min-height: 128px !important;
    }

    .mp-arena-v5 .mp-chat-input-row {
        gap: 6px !important;
    }

    .mp-arena-v5 .mp-chat-input {
        min-width: 0 !important;
        min-height: 46px !important;
    }

    .mp-arena-v5 .mp-chat-send {
        min-width: 58px !important;
        min-height: 46px !important;
    }
}

@media (orientation: landscape) and (max-height: 560px) and (pointer: coarse),
       (orientation: landscape) and (max-height: 560px) and (max-width: 900px) {
    html:has(body.emulator-page .mp-arena-v5),
    body.emulator-page:has(.mp-arena-v5) {
        height: 100dvh !important;
        overflow: hidden !important;
    }

    .mp-arena-v5 {
        height: 100dvh !important;
        min-height: 100dvh !important;
        grid-template-columns: minmax(0, 1fr) minmax(210px, 28vw) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    .mp-arena-v5 .mp-left-rail {
        display: none !important;
    }

    .mp-arena-v5 .mp-main-content {
        order: 1;
        height: 100% !important;
        min-height: 0 !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
    }

    .mp-arena-v5 .mp-right-rail {
        order: 2;
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
    }

    .mp-arena-v5 .mp-header {
        gap: 6px !important;
    }

    .mp-arena-v5 .mp-session-panel {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    .mp-arena-v5 .mp-session-panel .mp-stat {
        min-height: 42px !important;
        padding: 5px !important;
    }

    .mp-arena-v5 .mp-game-display,
    .mp-arena-v5 .mp-video-wrapper {
        height: 100% !important;
        min-height: 0 !important;
    }

    .mp-arena-v5 .mp-action-dock {
        position: static !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        padding: 6px !important;
    }

    .mp-arena-v5 .mp-action-dock-player,
    .mp-arena-v5 .mp-action-dock:has(#mp-audio-settings-btn) {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .mp-arena-v5 .mp-action-dock .mp-btn {
        min-height: 42px !important;
    }

    .mp-arena-v5 .mp-room-chat {
        min-height: 0 !important;
        max-height: none !important;
    }
}

/* Multiplayer lobby modal */
@media (max-width: 768px), (pointer: coarse) {
    .multiplayer-lobby-modal {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        z-index: 100003 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #04050b !important;
    }

    .multiplayer-lobby-modal.active {
        display: block !important;
    }

    .multiplayer-lobby-content {
        width: 100% !important;
        min-height: 100dvh !important;
        height: 100dvh !important;
        max-width: none !important;
        padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .multiplayer-lobby-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
        margin: 0 0 10px !important;
        padding: 14px 52px 14px 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        text-align: left !important;
        border-radius: 14px !important;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .multiplayer-lobby-title h1,
    .multiplayer-lobby-title h2 {
        max-width: 100% !important;
        font-size: clamp(1.1rem, 7vw, 1.55rem) !important;
        line-height: 1.05 !important;
        justify-content: flex-start !important;
    }

    .multiplayer-lobby-title p {
        max-width: 100% !important;
        font-size: .78rem !important;
        line-height: 1.35 !important;
    }

    .multiplayer-close-btn {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
    }

    .multiplayer-lobby-stats {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .multiplayer-lobby-stats > *,
    .multiplayer-online-count {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        padding: 7px 8px !important;
        font-size: .68rem !important;
        white-space: normal !important;
    }

    .multiplayer-lobby-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .multiplayer-create-panel,
    .multiplayer-rooms-panel {
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 14px !important;
        border-radius: 14px !important;
    }

    .multiplayer-form-group {
        margin-bottom: 12px !important;
    }

    .multiplayer-input,
    .multiplayer-select {
        width: 100% !important;
        min-height: 48px !important;
        border-radius: 12px !important;
    }

    .multiplayer-create-btn {
        width: 100% !important;
        min-height: 50px !important;
        border-radius: 13px !important;
    }

    .multiplayer-game-dropdown {
        position: fixed !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        top: calc(74px + env(safe-area-inset-top)) !important;
        width: auto !important;
        max-height: calc(100dvh - 92px - env(safe-area-inset-top)) !important;
        z-index: 100006 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px !important;
    }

    .multiplayer-games-grid,
    .multiplayer-rooms-grid,
    .multiplayer-rooms-list {
        grid-template-columns: 1fr !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .multiplayer-filters,
    .multiplayer-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 6px !important;
        padding-bottom: 6px !important;
        -webkit-overflow-scrolling: touch;
    }

    .multiplayer-filter-btn,
    .multiplayer-tab {
        flex: 0 0 auto !important;
        min-height: 40px !important;
        white-space: nowrap !important;
    }

    .multiplayer-room-card,
    .room-card {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .multiplayer-room-game,
    .room-game-cover {
        width: 58px !important;
        height: 58px !important;
        border-radius: 12px !important;
    }

    .multiplayer-room-info,
    .room-card-main,
    .room-card-content {
        min-width: 0 !important;
    }

    .multiplayer-room-title,
    .multiplayer-room-game-name,
    .room-game-name {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .multiplayer-room-actions,
    .room-card-actions {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding-top: 8px !important;
        margin-top: 0 !important;
    }

    .multiplayer-room-actions button,
    .room-card-actions button {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 11px !important;
    }
}

@media (max-width: 420px) {
    .mp-arena-v5 .mp-session-panel,
    .multiplayer-lobby-stats {
        grid-template-columns: 1fr 1fr !important;
    }

    .mp-arena-v5 .mp-action-dock {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .mp-arena-v5 .mp-left-rail {
        grid-template-columns: 82px minmax(0, 1fr) !important;
    }

    .mp-arena-v5 .mp-game-cover,
    .mp-arena-v5 .mp-game-info,
    .mp-arena-v5 .mp-room-info {
        min-height: 96px !important;
        height: 96px !important;
    }
}

/* Console collection pages */
@media (max-width: 768px), (pointer: coarse) {
    .top-navbar {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        padding: max(10px, env(safe-area-inset-top)) 12px 10px !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .top-navbar .logo-link {
        min-width: 0 !important;
    }

    .top-navbar .logo-text {
        font-size: .86rem !important;
        max-width: 172px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .top-navbar .nav-links {
        flex: 0 0 auto !important;
        gap: 6px !important;
    }

    .top-navbar .nav-link {
        min-height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 7px 10px !important;
        font-size: .72rem !important;
        border: 1px solid rgba(255, 255, 255, .1) !important;
        background: rgba(255, 255, 255, .05) !important;
    }

    .og-hero {
        width: 100% !important;
        padding: 26px 14px 18px !important;
    }

    .og-hero-cover {
        width: min(45vw, 176px) !important;
        height: auto !important;
        max-height: 118px !important;
        margin-bottom: 14px !important;
    }

    .og-hero h1 {
        max-width: 100% !important;
        font-size: clamp(1.55rem, 11vw, 2.35rem) !important;
        line-height: 1.04 !important;
        letter-spacing: .6px !important;
        overflow-wrap: anywhere !important;
    }

    .og-hero p.lead {
        font-size: .92rem !important;
        line-height: 1.45 !important;
        max-width: 100% !important;
    }

    .og-hero-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 16px !important;
    }

    .og-stat {
        min-width: 0 !important;
        padding: 8px 5px !important;
        border-radius: 11px !important;
        background: rgba(255, 255, 255, .045) !important;
        border: 1px solid rgba(255, 255, 255, .075) !important;
    }

    .og-stat-num {
        font-size: 1.22rem !important;
    }

    .og-stat-lbl {
        font-size: .58rem !important;
        letter-spacing: .8px !important;
    }

    .og-search-wrap {
        width: 100% !important;
        margin-top: 16px !important;
    }

    .og-search-input {
        min-height: 48px !important;
        border-radius: 13px !important;
    }

    .og-console-nav-pills {
        width: 100% !important;
        margin: 16px 0 !important;
        padding: 0 12px 6px !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .og-console-nav-pills::-webkit-scrollbar {
        display: none;
    }

    .og-nav-pill {
        flex: 0 0 auto !important;
        min-height: 42px !important;
        padding: 7px 12px !important;
    }

    .og-about-block,
    .og-games-section {
        width: calc(100% - 24px) !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .og-about-block {
        padding: 14px !important;
        font-size: .86rem !important;
        border-radius: 13px !important;
    }

    .og-games-section h2 {
        font-size: 1rem !important;
        line-height: 1.25 !important;
        flex-wrap: wrap !important;
    }

    .og-games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .og-game-card {
        min-width: 0 !important;
        border-radius: 11px !important;
    }

    .og-card-cover {
        aspect-ratio: 1 / 1 !important;
    }

    .og-card-cover img {
        object-fit: cover !important;
    }

    .og-card-play {
        opacity: 1 !important;
        background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .78)) !important;
        justify-content: flex-end !important;
        padding-bottom: 10px !important;
        pointer-events: none !important;
    }

    .og-play-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: .9rem !important;
    }

    .og-play-text {
        display: none !important;
    }

    .og-card-meta {
        min-height: 52px !important;
        padding: 9px !important;
    }

    .og-card-title {
        font-size: .76rem !important;
        line-height: 1.28 !important;
    }

    .og-content-banner {
        width: min(100%, 320px) !important;
        height: 50px !important;
        margin: 14px auto !important;
    }
}

@media (max-width: 360px) {
    .og-games-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Legacy pages/console/play.html mobile emulator */
@media (max-width: 768px), (pointer: coarse) {
    body:has(.app #emulatorArea) {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    .app:has(#emulatorArea) {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        padding-top: env(safe-area-inset-top) !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        background: #000 !important;
    }

    .app:has(#emulatorArea) .top-bar {
        min-height: 50px !important;
        padding: 7px 8px !important;
        gap: 6px !important;
        background: linear-gradient(180deg, rgba(15, 17, 26, .98), rgba(4, 5, 10, .96)) !important;
        border-bottom-color: rgba(255, 211, 92, .18) !important;
    }

    .app:has(#emulatorArea) .btn-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 11px !important;
    }

    .app:has(#emulatorArea) .game-title-text {
        font-size: .86rem !important;
        max-width: 100% !important;
    }

    .app:has(#emulatorArea) .game-subtitle-text {
        gap: 5px !important;
        overflow: hidden !important;
    }

    .app:has(#emulatorArea) .platform-badge,
    .app:has(#emulatorArea) .gamepad-status {
        flex: 0 0 auto !important;
    }

    .app:has(#emulatorArea) .emulator-area,
    .app:has(#emulatorArea) .emulator-wrapper,
    .app:has(#emulatorArea) #game-container {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100vw !important;
        max-height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    .app:has(#emulatorArea) #game-container canvas,
    .app:has(#emulatorArea) #game-container iframe,
    .app:has(#emulatorArea) #game-container .ejs_container,
    .app:has(#emulatorArea) #game-container .ejs_parent {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        background: #000 !important;
    }

    .app:has(#emulatorArea) .quick-actions {
        min-height: 54px !important;
        padding: 5px max(8px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
        gap: 4px !important;
        background: linear-gradient(180deg, rgba(14, 16, 24, .96), rgba(5, 6, 12, .98)) !important;
        border-top-color: rgba(255, 211, 92, .18) !important;
    }

    .app:has(#emulatorArea) .quick-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 4px 2px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, .04) !important;
    }

    .app:has(#emulatorArea) .quick-btn-icon {
        font-size: 16px !important;
    }

    .app:has(#emulatorArea) .modal-overlay {
        align-items: stretch !important;
        padding-top: env(safe-area-inset-top) !important;
    }

    .app:has(#emulatorArea) .modal-sheet {
        width: 100% !important;
        max-height: 100dvh !important;
        height: auto !important;
        margin-top: auto !important;
        border-radius: 18px 18px 0 0 !important;
        padding: 16px 14px max(18px, env(safe-area-inset-bottom)) !important;
    }

    .app:has(#emulatorArea) .gamepad-map-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (orientation: landscape) and (max-height: 560px) and (pointer: coarse),
       (orientation: landscape) and (max-height: 560px) and (max-width: 900px) {
    .app:has(#emulatorArea) {
        grid-template-rows: minmax(0, 1fr) !important;
        padding-top: 0 !important;
    }

    .app:has(#emulatorArea) .top-bar,
    .app:has(#emulatorArea) .quick-actions {
        display: none !important;
    }

    .app:has(#emulatorArea) .emulator-area {
        height: 100dvh !important;
    }
}


/* Mobile emulator screen fit v1
   Keep the playable canvas at the native console ratio in portrait,
   instead of letting it stretch through the whole space above the pad. */
@media (max-width: 768px) and (orientation: portrait), (pointer: coarse) and (orientation: portrait) {
    html {
        --og-mobile-screen-cap: 54dvh;
        --og-mobile-screen-aspect-h: 75vw;
    }

    html[data-og-system="gba"],
    html[data-og-system="vba"],
    html[data-og-system="mgba"] {
        --og-mobile-screen-cap: 48dvh;
        --og-mobile-screen-aspect-h: 67vw;
    }

    html[data-og-system="gb"],
    html[data-og-system="gbc"],
    html[data-og-system="gambatte"] {
        --og-mobile-screen-cap: 52dvh;
        --og-mobile-screen-aspect-h: 90vw;
    }

    html[data-og-system="psp"] {
        --og-mobile-screen-cap: 42dvh;
        --og-mobile-screen-aspect-h: 57vw;
    }

    html[data-og-system="nds"],
    html[data-og-system="desmume"],
    html[data-og-system="melonds"] {
        --og-mobile-screen-cap: 58dvh;
        --og-mobile-screen-aspect-h: 104vw;
    }

    html:not(.og-arcade-only) body.emulator-page:not(:has(.mp-arena-v5)):not(.og-arcade-only) {
        --og-mobile-pad-space: max(var(--mobile-controls-reserved, 0px), 206px);
        --og-mobile-screen-height: min(var(--og-mobile-screen-cap), var(--og-mobile-screen-aspect-h), calc(100dvh - var(--og-mobile-pad-space) - max(8px, env(safe-area-inset-top))));
    }

    html:not(.og-arcade-only) body.emulator-page:not(:has(.mp-arena-v5)):not(.og-arcade-only) #game-container {
        top: max(0px, env(safe-area-inset-top)) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100vw !important;
        height: var(--og-mobile-screen-height) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - var(--og-mobile-pad-space)) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(0, 1fr) !important;
        background: #000 !important;
        border-bottom: 1px solid rgba(255, 211, 92, 0.18) !important;
        overflow: hidden !important;
    }

    html:not(.og-arcade-only) body.emulator-page:not(:has(.mp-arena-v5)):not(.og-arcade-only) #mobileControls.mobile-gamepad {
        display: grid !important;
        max-height: min(38dvh, 244px) !important;
        overflow: hidden !important;
    }
}