/* MAERCHENPFAD_V95_MOBILE_JOKER_FIX
 * NUR Touchgeraete: Kartenleiste darf das Jokerfenster nicht ueberdecken.
 * Keine Aenderung fuer PCs mit normalem Mauszeiger.
 */
@media (pointer: coarse), (hover: none) {
    #gameScreen.game-screen > .mp-joker-modal-v88,
    #gameScreen .mp-joker-modal-v88 {
        position: fixed !important;
        inset: 0 !important;
        z-index: 20000 !important; /* ueber Hand (260) & Aktionsleiste (350) */
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        padding: max(8px, env(safe-area-inset-top))
                 max(8px, env(safe-area-inset-right))
                 max(8px, env(safe-area-inset-bottom))
                 max(8px, env(safe-area-inset-left)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        isolation: isolate !important;
        background: rgba(7, 8, 26, .94) !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    /* Der iPhone-Hochformat-Fallback setzt direkte Spielkinder auf hidden. */
    #gameScreen.game-screen > .mp-joker-modal-v88,
    #gameScreen.game-screen > .mp-joker-modal-v88 * {
        visibility: visible !important;
        pointer-events: auto !important;
    }
    #gameScreen .mp-joker-panel-v88 {
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 1 !important;
        flex: 0 1 auto !important;
        width: min(750px, 100%) !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        min-height: 0 !important;
        padding: 14px 16px 12px !important;
        margin: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        animation: mpV88PopIn .24s ease !important;
    }
    #gameScreen .mp-joker-header-v88 small {
        font-size: 10px !important;
        margin: 0 0 4px !important;
    }
    #gameScreen .mp-joker-header-v88 h3 {
        font-size: clamp(21px, 5vw, 28px) !important;
        line-height: 1.08 !important;
        margin: 0 !important;
    }
    #gameScreen .mp-joker-header-v88 p {
        font-size: 12px !important;
        line-height: 1.35 !important;
        margin: 6px 0 0 !important;
        max-width: none !important;
    }
    #gameScreen .mp-joker-score-v88 {
        margin: 0 !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
    }
    #gameScreen .mp-joker-score-v88 b {
        font-size: 21px !important;
    }
    #gameScreen .mp-joker-bubbles-v88 {
        flex: 0 1 auto !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 2px 1px 4px !important;
        overflow: visible !important;
    }
    #gameScreen .mp-joker-bubble-v88 {
        min-width: 0 !important;
        min-height: 94px !important;
        height: auto !important;
        padding: 6px 4px !important;
        border-radius: 14px !important;
        gap: 4px !important;
        touch-action: manipulation;
    }
    #gameScreen .mp-joker-bubble-v88 .fairy-card {
        width: 45px !important;
        height: 66px !important;
        min-width: 45px !important;
        min-height: 66px !important;
        max-width: 45px !important;
        max-height: 66px !important;
        transform: none !important;
        filter: none !important;
        pointer-events: none !important;
    }
    #gameScreen .mp-joker-bubble-v88 .card-png {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        opacity: 1 !important;
        object-fit: contain !important;
    }
    #gameScreen .mp-joker-bubble-v88 span:not(.fairy-card) {
        font-size: 10px !important;
        line-height: 1.12 !important;
        text-align: center !important;
        white-space: normal !important;
    }
    #gameScreen .mp-joker-bubble-v88.is-selected {
        border: 2px solid #ffe2a2 !important;
        background: rgba(222, 166, 59, .17) !important;
        box-shadow: inset 0 0 12px rgba(255, 216, 131, .16),
                    0 0 12px rgba(255, 211, 111, .28) !important;
    }
    #gameScreen .mp-joker-selection-v88 {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        flex: 0 0 auto !important;
    }
    #gameScreen .mp-joker-actions-v88 {
        margin: 0 !important;
        padding-top: 3px !important;
        display: flex !important;
        justify-content: stretch !important;
        gap: 9px !important;
        flex-wrap: nowrap !important;
        flex: 0 0 auto !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 2 !important;
        background: linear-gradient(180deg, rgba(18, 19, 46, .72), #151733 38%) !important;
    }
    #gameScreen .mp-joker-actions-v88 button {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 38px !important;
        font-size: 12px !important;
        line-height: 1.12 !important;
        white-space: normal !important;
        padding: 6px 10px !important;
        touch-action: manipulation;
    }
}

/* Breite iPhone-Querformate: jede Jokeroption in EINER Reihe. */
@media (pointer: coarse) and (orientation: landscape),
       (hover: none) and (orientation: landscape) {
    #gameScreen .mp-joker-panel-v88 {
        width: min(750px, 100%) !important;
        padding: 8px 12px 8px !important;
        gap: 4px !important;
    }
    #gameScreen .mp-joker-header-v88 h3 { font-size: clamp(19px, 3.7vh, 24px) !important; }
    #gameScreen .mp-joker-header-v88 p { font-size: 11px !important; line-height: 1.25 !important; margin-top: 3px !important; }
    #gameScreen .mp-joker-score-v88 { padding: 5px 10px !important; }
    #gameScreen .mp-joker-score-v88 b { font-size: 18px !important; }
    #gameScreen .mp-joker-bubbles-v88 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 7px !important; }
    #gameScreen .mp-joker-bubble-v88 { min-height: 81px !important; padding: 3px 2px !important; gap: 2px !important; }
    #gameScreen .mp-joker-bubble-v88 .fairy-card {
        width: 40px !important;
        height: 58px !important;
        min-width: 40px !important;
        min-height: 58px !important;
        max-width: 40px !important;
        max-height: 58px !important;
    }
    #gameScreen .mp-joker-selection-v88 { font-size: 11px !important; }
    #gameScreen .mp-joker-actions-v88 button { min-height: 32px !important; font-size: 11px !important; padding: 4px 8px !important; }
}

/* Hochformat mit schmaler Ansicht: zwei Joker nebeneinander, Rest scrollbar. */
@media (pointer: coarse) and (orientation: portrait) and (max-width: 480px),
       (hover: none) and (orientation: portrait) and (max-width: 480px) {
    #gameScreen .mp-joker-bubbles-v88 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #gameScreen .mp-joker-panel-v88 { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; }
}