/* Mobile compositing guardrails. Keep this stylesheet last in the cascade. */
@media (max-width: 932px), (hover: none) and (pointer: coarse) {
    .modal.fade,
    .modal-backdrop.fade {
        transition: none !important;
    }

    .modal.fade .modal-dialog {
        transition: none !important;
        will-change: auto !important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .modal.show .modal-dialog {
        transform: translate3d(0, 0, 0) scale(1) !important;
    }

    .modal-backdrop,
    .modal-backdrop.show,
    .wheel-reward-popup,
    .blot-waiting-room,
    .blot-friend-invite,
    .blot-socket-notice {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
    }

    .modal-backdrop,
    .modal-backdrop.show {
        background: #061820 !important;
        opacity: .78 !important;
    }

    .modal-content,
    .profile-modal,
    .vip-modal,
    .payment-method-modal,
    .payment-success-modal,
    .not-enough-chips-modal,
    .game-leave-modal .modal-content,
    .game-resume-modal .modal-content,
    .friend-table-modal .modal-content,
    .account-blocked-modal .modal-content,
    .push-permission-modal .modal-content,
    .language-picker-modal .modal-content,
    .tournament-prizes-modal .modal-content,
    #tournamentResultsModal .modal-content,
    #playersModal .modal-content,
    #prizeModal .modal-content,
    .blot-trump-modal,
    .blot-score,
    .blot-result,
    .blot-levelup,
    .wheel-reward-modal {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .3) !important;
        contain: paint;
    }

    .modal-content::before,
    .modal-content::after,
    .profile-modal::before,
    .vip-modal::before,
    .payment-method-modal::before,
    .payment-success-modal::before,
    .wheel-reward-modal::before,
    .blot-levelup-glow {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .modal.show .modal-content,
    .wheel-reward-popup.active .wheel-reward-modal,
    .blot-trump-modal.blot-trump-show,
    .blot-score.blot-score-show,
    .blot-result.blot-result-show,
    .blot-levelup.blot-levelup-show {
        animation: none !important;
    }

    .modal,
    .modal-dialog,
    .modal-content,
    .wheel-reward-popup,
    .wheel-reward-modal,
    .blot-trump-modal,
    .blot-score,
    .blot-result,
    .blot-levelup {
        transition: none !important;
    }

    /* The profile has its own higher-specificity sheet transforms and two
       animated progress bars. Disable those on phones so it is painted once. */
    #profileModal.fade .profile-dialog,
    #profileModal.show .profile-dialog {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    #profileModal *,
    #profileModal *::before,
    #profileModal *::after {
        animation: none !important;
        transition: none !important;
    }

    #profileModal .profile-modal {
        contain: layout paint style;
    }

    body:has(.header-settings-dropdown > .dropdown-menu.show)::before {
        background: rgba(6, 24, 32, .78) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        animation: none !important;
        transition: none !important;
    }

    .header-settings-dropdown > .dropdown-menu,
    .header-settings-dropdown > .dropdown-menu.show,
    .header-settings-dropdown > .dropdown-menu > li,
    .header-settings-dropdown > .dropdown-menu.show > li {
        animation: none !important;
        transition: none !important;
        filter: none !important;
    }

    .header-settings-dropdown > .dropdown-menu {
        contain: layout paint style;
    }
}

@media (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
    .arcade-mode-slider > .arcade-tile,
    .arcade-mode-slider > .arcade-play-tile {
        transform: translateZ(0) scale(.94) !important;
        transition: transform .28s cubic-bezier(.16, .84, .28, 1), opacity .2s linear !important;
        will-change: transform, opacity !important;
    }

    .arcade-mode-slider > .arcade-tile.lobby-carousel-active {
        transform: translateZ(0) scale(1) !important;
    }

    .arcade-mode-slider > .arcade-tile,
    .arcade-mode-slider > .arcade-tile::before,
    .arcade-mode-slider > .arcade-tile::after,
    .arcade-mode-slider .arcade-play-icon,
    .arcade-mode-slider .arcade-mode-icon,
    .arcade-mode-slider .arcade-play-icon img,
    .arcade-mode-slider .arcade-mode-icon img {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .arcade-mode-slider > .arcade-tile::before {
        inset: 0 !important;
        transform: none !important;
    }
}

@media (max-width: 932px) and (prefers-reduced-motion: reduce) {
    .modal,
    .modal-dialog,
    .modal-backdrop,
    .wheel-reward-popup,
    .wheel-reward-modal,
    .blot-trump-modal,
    .blot-score,
    .blot-result,
    .blot-levelup {
        animation: none !important;
        transition: none !important;
    }
}