/* mFLIP v10.15.0 - Desktop Phone Frame */

@media (min-width: 1024px) {
    html { background: #080810 !important; }

    body {
        background: transparent !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100vh !important;
        min-height: 100vh !important;
        position: fixed !important;
        inset: 0 !important;
        overflow: hidden !important;
    }

    body::before {
        content: "";
        position: fixed;
        inset: -50%;
        width: 200%;
        height: 200%;
        z-index: 0;
        background:
            radial-gradient(circle at 25% 35%, rgba(99, 102, 241, 0.12) 0%, transparent 45%),
            radial-gradient(circle at 75% 25%, rgba(236, 72, 153, 0.10) 0%, transparent 40%),
            radial-gradient(circle at 50% 75%, rgba(245, 166, 35, 0.08) 0%, transparent 45%),
            radial-gradient(circle at 15% 75%, rgba(34, 211, 238, 0.07) 0%, transparent 40%);
        animation: desktopAmbient 25s ease-in-out infinite alternate;
        pointer-events: none;
    }

    body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
        background-size: 32px 32px;
        pointer-events: none;
    }

    @keyframes desktopAmbient {
        0% { transform: rotate(0deg) scale(1); opacity: 1; }
        50% { transform: rotate(3deg) scale(1.05); opacity: 0.85; }
        100% { transform: rotate(-2deg) scale(1); opacity: 1; }
    }

    /* ========== PHONE FRAME ========== */
    #skyjo-game {
        width: 375px !important;
        height: 812px !important;
        max-height: 85vh !important;
        max-width: calc(85vh * 0.462) !important;
        min-height: 550px !important;
        position: relative !important;
        overflow: hidden !important;
        overflow: clip !important;
        flex-shrink: 0 !important;
        border-radius: 44px !important;
        border: 3px solid #2a2a3e !important;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.05),
            0 4px 8px rgba(0, 0, 0, 0.3),
            0 12px 40px rgba(0, 0, 0, 0.5),
            0 30px 80px rgba(0, 0, 0, 0.3),
            0 0 120px rgba(99, 102, 241, 0.06);
        transform: translateZ(0);
        contain: layout style paint;
        z-index: 1;
    }

    /* No status bar or notch - clean look */
    #skyjo-game::before,
    #skyjo-game::after {
        display: none !important;
        content: none !important;
    }

    /* ========== CONTAINMENT: ALL position:fixed -> absolute ========== */

    .modal {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    .modal-overlay {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
    }

    .modal-backdrop,
    .skyjo-modal-backdrop {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
    }

    .skyjo-modal {
        position: absolute !important;
    }

    .skyjo-reconnect-modal {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
    }

    .skyjo-deal-overlay {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
    }

    .connection-status {
        position: absolute !important;
    }

    .skyjo-reconnecting-overlay {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
    }

    .quick-chat-btn {
        position: absolute !important;
    }
    .quick-chat {
        position: absolute !important;
        max-width: calc(100% - 24px) !important;
        max-height: calc(100% - 80px) !important;
    }
    .quick-chat-grid {
        max-height: calc(100% - 160px) !important;
    }

    .skyjo-toasts {
        position: absolute !important;
    }

    .reaction-bubble {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .login__modal {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
    }

    .diag-toast {
        position: absolute !important;
    }

    .flying-card {
        position: absolute !important;
    }
    .opponent-held-card {
        position: absolute !important;
    }

    .countdown-overlay {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
    }

    .connection-overlay,
    .reconnect-overlay {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
    }

    .landscape-block-overlay,
    #landscape-block {
        display: none !important;
    }

    /* ========== VIEWPORT UNITS -> RELATIVE UNITS ========== */

    /* Container - no extra padding (no status bar) */
    .skyjo-container {
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        padding-top: 0 !important;
        box-sizing: border-box !important;
    }

    #skyjo-game > .skyjo-container {
        height: 100% !important;
        min-height: 100% !important;
    }

    /* Screens - core overflow fix */
    .skyjo-screen {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* ========== LOBBY - no scroll fix ========== */
    .lobby-screen,
    .skyjo-lobby,
    #lobby-screen,
    #screen-lobby {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Lobby inner layout: make everything fit */
    .lobby__content {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    /* Player card area - compact */
    .lobby__player-card,
    .lobby__player {
        flex-shrink: 1 !important;
        min-height: 0 !important;
    }

    /* Hero button - shrink to fit */
    .lobby__hero {
        flex: 0 1 auto !important;
        max-height: 30% !important;
        min-height: 60px !important;
        padding-bottom: 4px !important;
    }
    .lobby__hero-img {
        max-height: 100% !important;
        max-width: 75% !important;
        object-fit: contain !important;
    }

    /* Bot row, divider, join row - compact */
    .lobby__bot-row {
        flex-shrink: 0 !important;
        padding: 4px 0 !important;
    }
    .lobby__divider {
        flex-shrink: 0 !important;
        margin: 4px 0 !important;
        padding: 0 !important;
    }
    .lobby__join-row {
        flex-shrink: 0 !important;
        padding: 4px 0 !important;
    }

    /* Action buttons row - compact */
    .lobby__action-btns {
        flex-shrink: 0 !important;
        padding: 4px 0 !important;
        gap: 8px !important;
    }

    /* Nav bar at bottom - compact */
    .lobby__nav,
    .lobby__bottom-nav {
        flex-shrink: 0 !important;
        padding: 4px 0 !important;
    }

    /* Dailies section - compact */
    .skyjo-dailies {
        flex-shrink: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        max-height: 120px !important;
    }

    /* ========== GAME SCREEN ========== */
    .game-screen,
    .skyjo-game-screen,
    .game-board,
    #game-screen,
    #screen-game {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* ========== MENU SCREENS ========== */
    .menu-screen,
    .profile-screen,
    .rules-screen,
    .shop-screen,
    .friends-screen,
    .leaderboard-screen,
    .achievements-screen {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* ========== SETTINGS SCREEN - contained ========== */
    .settings-screen,
    #screen-settings {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    /* Settings sub-menus / dropdowns - constrain within phone */
    .settings-screen select,
    .settings-screen .dropdown,
    .settings-screen .select-wrapper,
    .settings-screen .settings-dropdown {
        max-width: 100% !important;
        position: relative !important;
    }

    /* Theme picker / color picker modals in settings */
    .theme-picker,
    .color-picker,
    .theme-modal,
    .settings-modal,
    .bg-picker,
    .bg-selector {
        position: absolute !important;
        max-height: 80% !important;
        overflow-y: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: calc(100% - 32px) !important;
    }

    /* Settings section groups - scroll if needed */
    .settings__content,
    .settings__sections,
    .settings-content {
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* ========== LOGIN SCREEN ========== */
    .login-screen,
    #login-screen,
    #screen-login {
        min-height: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    /* ========== CHAT SCREENS ========== */
    .unified-chat-screen,
    .chat-screen,
    .chat-detail-screen,
    .message-detail-screen,
    .mailbox-screen,
    .send-message-screen {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    /* ========== OTHER SCREENS ========== */
    .diagnostics-screen,
    #diagnostics-screen {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
    }

    .waiting-screen,
    #waiting-screen {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    /* ========== CATCH-ALL ========== */
    #skyjo-game [style*="position: fixed"],
    #skyjo-game [style*="position:fixed"] {
        position: absolute !important;
    }

    #skyjo-game [style*="100vh"],
    #skyjo-game [style*="100dvh"] {
        height: 100% !important;
    }

    #skyjo-game > *,
    #skyjo-game > * > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #skyjo-game img,
    #skyjo-game canvas,
    #skyjo-game video,
    #skyjo-game svg,
    #skyjo-game .card,
    #skyjo-game .skyjo-card {
        max-width: none !important;
    }

    .landscape-block-overlay {
        display: none !important;
    }
}

/* ========== LARGER DESKTOP ========== */
@media (min-width: 1440px) {
    #skyjo-game {
        width: 410px !important;
        height: 890px !important;
        max-height: 88vh !important;
        max-width: calc(88vh * 0.462) !important;
        border-radius: 48px !important;
    }
}

/* ========== TABLET ========== */
@media (min-width: 768px) and (max-width: 1023px) {
    #skyjo-game {
        max-width: 480px !important;
        margin: 0 auto !important;
    }
}