/* MOBILE MODAL FIX - Make ALL modals non-blocking for maximum addiction */

/* Core principle: pointer-events: none on overlays, pointer-events: auto ONLY on buttons */

/* Mystery Unlock Modal - NON-BLOCKING VERSION */
.mystery-unlock-modal {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    pointer-events: none !important;  /* CRITICAL: Allow clicks to pass through */
    animation: unlockFadeIn 0.5s ease-out;
}

.mystery-unlock-content {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.95) 0%, rgba(124, 58, 237, 0.95) 100%);
    border: 3px solid #8B5CF6;
    border-radius: 25px;
    padding: 30px 40px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(139, 92, 246, 0.6);
    backdrop-filter: blur(10px);
    pointer-events: auto;  /* Content can be clicked if needed */
}

.mystery-unlock-icon {
    font-size: 72px;
    margin-bottom: 15px;
    animation: unlockBounce 0.6s ease-out;
}

.mystery-unlock-title {
    font-size: 28px;
    font-weight: 900;
    color: white;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.mystery-unlock-reward {
    font-size: 20px;
    color: #E9D5FF;
    font-weight: 700;
    margin-bottom: 8px;
}

.mystery-unlock-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.mystery-unlock-modal.fading {
    animation: unlockFadeOut 0.5s ease-out forwards;
}

@keyframes unlockFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes unlockFadeOut {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px) scale(0.8);
    }
}

@keyframes unlockBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Phantom Rival - Mobile Positioning */
.phantom-rival {
    pointer-events: none !important;  /* Non-blocking */
}

.phantom-rival * {
    pointer-events: auto;  /* Allow interaction with rival UI if needed */
}

/* Mystery Unlocks Container - Mobile Positioning */
.mystery-unlocks-container {
    pointer-events: none !important;  /* Non-blocking */
}

.mystery-unlocks-container * {
    pointer-events: auto;  /* Allow scrolling */
}

/* Near-Miss Overlay - NON-BLOCKING */
.near-miss-overlay {
    pointer-events: none !important;  /* CRITICAL: Let clicks through */
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    /* Phantom Rival - Move to bottom on mobile */
    .phantom-rival {
        top: auto;
        bottom: 80px;
        left: 10px;
        right: auto;
        min-width: 180px;
        padding: 12px 15px;
        font-size: 13px;
    }

    .rival-header {
        font-size: 9px;
    }

    .rival-name {
        font-size: 14px !important;
    }

    .rival-points {
        font-size: 13px !important;
    }

    .rival-diff {
        font-size: 11px !important;
    }

    /* Mystery Unlocks - Move to top on mobile, compact */
    .mystery-unlocks-container {
        top: 60px;
        right: 10px;
        left: auto;
        max-width: 200px;
        padding: 10px;
        max-height: 300px;
        font-size: 12px;
    }

    .mystery-header {
        font-size: 11px;
        margin-bottom: 10px;
    }

    .mystery-item {
        padding: 8px;
        margin-bottom: 8px;
        gap: 8px;
    }

    .mystery-icon {
        font-size: 20px;
        min-width: 25px;
    }

    .mystery-title {
        font-size: 11px;
    }

    .mystery-threshold {
        font-size: 9px;
    }

    /* Mystery Unlock Modal - Smaller on mobile */
    .mystery-unlock-modal {
        top: 25%;
    }

    .mystery-unlock-content {
        padding: 25px 30px;
        margin: 0 20px;
    }

    .mystery-unlock-icon {
        font-size: 56px;
    }

    .mystery-unlock-title {
        font-size: 22px;
    }

    .mystery-unlock-reward {
        font-size: 16px;
    }

    .mystery-unlock-subtitle {
        font-size: 12px;
    }

    /* Near-Miss Overlay - Adjust for mobile */
    .near-miss-overlay {
        padding: 0 15px;
    }

    .near-miss-content {
        padding: 30px 25px;
    }

    .near-miss-emoji {
        font-size: 56px;
    }

    .near-miss-percentage {
        font-size: 48px;
    }

    .near-miss-message {
        font-size: 20px;
    }

    .near-miss-taunt {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    /* Extra small screens - even more compact */
    .phantom-rival {
        bottom: 70px;
        left: 5px;
        min-width: 160px;
        padding: 10px 12px;
        font-size: 12px;
    }

    .mystery-unlocks-container {
        top: 50px;
        right: 5px;
        max-width: 180px;
        padding: 8px;
        max-height: 250px;
    }

    .mystery-unlock-content {
        padding: 20px 25px;
        margin: 0 15px;
    }
}

/* Celebration Display - NON-BLOCKING FIX */
.celebration-display {
    pointer-events: none !important;
}

.celebration-display .celebration-dismiss,
.celebration-display button {
    pointer-events: auto !important;  /* Only buttons clickable */
}

/* Prestige Modal - Make dismissable but non-blocking to button */
.prestige-modal {
    pointer-events: none !important;
}

.prestige-modal .prestige-modal-content {
    pointer-events: auto;  /* Content and buttons clickable */
}

/* Streak Warning - Non-blocking */
.streak-warning-popup {
    pointer-events: none !important;
}

.streak-warning-popup .streak-popup-content {
    pointer-events: auto;
}

/* Achievement Popup - Non-blocking */
.achievement-popup {
    pointer-events: none !important;
}

.achievement-popup .achievement-content {
    pointer-events: auto;
}

/* Warning Modal - Non-blocking */
.warning-modal {
    pointer-events: none !important;
}

.warning-modal .warning-content {
    pointer-events: auto;
}

/* Stats Modal - Non-blocking */
.stats-modal {
    pointer-events: none !important;
}

.stats-modal .stats-modal-content {
    pointer-events: auto;
}

/* Global Rule: ALL overlays are non-blocking by default */
[class*="overlay"],
[class*="modal"],
[class*="popup"] {
    pointer-events: none !important;
}

/* But their content and buttons ARE clickable */
[class*="overlay"] [class*="content"],
[class*="modal"] [class*="content"],
[class*="popup"] [class*="content"],
[class*="overlay"] button,
[class*="modal"] button,
[class*="popup"] button {
    pointer-events: auto !important;
}

/* CRITICAL: The main button must ALWAYS be clickable */
#theButton,
.dopamine-button {
    pointer-events: auto !important;
    z-index: 1 !important;  /* Stay below modals but always clickable */
}