@media (pointer: coarse) and (orientation: portrait) {
    .screen-layer {
        z-index: 8500;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .portrait-message {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.4);
        text-align: center;
        padding: 24px;
        border-radius: 16px;
        gap: 16px;
    }

    .mobile-device-rotation {
        height: 40px;
    }

    .mobile-device {
        height: 60px;
        animation: rotatingDevice 1.6s ease-out infinite;
        transform-origin: center;
    }

    @keyframes rotatingDevice {
        0% {
            transform: rotate(0deg);
        }

        80% {
            transform: rotate(90deg);
        }

        100% {
            transform: rotate(90deg);
        }
    }

    .device-portrait {
        font-size: 20px;
        font-weight: 400;
        text-align: center;
        padding: 16px;
    }
}

@media (pointer: coarse) {
    .mobile-btn-section {
        display: flex;
    }
}