/* unified-overlay-styles.css - CSS for Unified Pause/Interruption Overlay */

/* ========== CSS VARIABLES FOR POSITIONING ========== */
:root {
    /* DESKTOP: Pause Screen Elements */
    --pause-overlay-vertical-offset-desktop: -15%; /* ✅ Move up by 15% */
    --pause-label-size-desktop: 72px;
    --nback-info-size-desktop: 36px;
    --press-space-size-desktop: 28px;
    --exit-button-padding-desktop: 18px 64px;
    --pause-content-gap-desktop: 20px;

    /* MOBILE: Pause Screen Elements */
    --pause-overlay-vertical-offset-mobile: -15%; /* ✅ Move up by 15% */
    --pause-label-size-mobile: 56px;
    --nback-info-size-mobile: 28px;
    --press-space-size-mobile: 24px;
    --exit-button-padding-mobile: 16px 48px;
    --pause-content-gap-mobile: 15px;

    /* DESKTOP: Trial Progress */
    --trial-progress-bottom-desktop: 250px; /* ✅ Was 200px, moved up by 50px */

    /* MOBILE: Trial Progress */
    --trial-progress-bottom-mobile: 280px; /* ✅ Higher on mobile for more space */
}

/* ========== BASE OVERLAY CONTAINER ========== */

.unified-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000; /* Above training container (z-index: 1) */
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
    pointer-events: none; /* ✅ CRITICAL: Overlay is transparent to clicks */
    /* Child elements with pointer-events: auto will still be clickable! */
}

/* ========== STATE-SPECIFIC BACKGROUNDS ========== */

/* State 1: FIRST_START - Transparent background (no overlay effect) */
.unified-overlay.state-first-start {
    background: transparent;
    /* pointer-events inherited from base (none) */
}

.unified-overlay.state-first-start .unified-overlay-content {
    pointer-events: auto !important; /* ✅ Content is clickable despite parent: none */
}

/* State 2: INTERRUPTION (between trials) - Transparent background */
.unified-overlay.state-interruption {
    background: transparent;
    /* pointer-events inherited from base (none) */
}

.unified-overlay.state-interruption .unified-overlay-content {
    pointer-events: auto !important; /* ✅ Content is clickable despite parent: none */
}

/* State 3: RESULTS (after trial) - Transparent background (results have own background) */
.unified-overlay.state-results {
    background: transparent;
    /* pointer-events inherited from base (none) */
}

.unified-overlay.state-results .unified-overlay-content {
    pointer-events: auto !important; /* ✅ Content is clickable despite parent: none */
}

/* State 4: PAUSED (manual pause) - Semi-transparent black overlay */
.unified-overlay.state-paused {
    background: rgba(0, 0, 0, 0.92); /* ✅ Dark overlay - light-colored elements highly visible */
    /* pointer-events inherited from base (none) - clicks go through background too */
}

.unified-overlay.state-paused .unified-overlay-content {
    pointer-events: auto !important; /* ✅ Content is clickable despite parent: none */
}

/* State 5: SESSION_END - Transparent background (results have own background) */
.unified-overlay.state-session-end {
    background: transparent;
    /* pointer-events inherited from base (none) */
}

.unified-overlay.state-session-end .unified-overlay-content {
    pointer-events: auto !important; /* ✅ Content is clickable despite parent: none */
}

/* ========== CONTENT CONTAINER (GRID LAYOUT) ========== */

.unified-overlay-content {
    display: grid;
    grid-template-rows: auto auto 1fr auto auto auto;
    grid-template-areas:
        "pause-label"       /* PAUSED text (only State 4) */
        "nback-info"        /* N-Back level display */
        "results"           /* Accuracy/stats display */
        "press-space"       /* Press P to continue */
        "exit-button"       /* EXIT button */
        "mobile-buttons";   /* Mobile resume buttons (pause only) */
    gap: var(--pause-content-gap-desktop);
    max-width: 800px;
    width: 90%;
    margin: auto;
    padding: 40px 20px;
    text-align: center;
    /* ✅ DESKTOP: Move content up by 15% */
    transform: translateY(var(--pause-overlay-vertical-offset-desktop));
}

/* ========== GRID AREAS ========== */

.unified-pause-label {
    grid-area: pause-label;
}

.unified-nback-info {
    grid-area: nback-info;
}

.unified-results-display {
    grid-area: results;
}

.unified-press-space-text {
    grid-area: press-space;
}

.unified-exit-button {
    grid-area: exit-button;
    justify-self: center; /* Center button horizontally */
    align-self: center; /* Center button vertically */
    margin: 0 auto; /* Additional centering */
}

/* ========== INDIVIDUAL ELEMENTS ========== */

/* Pause Label (PAUSED text) */
.unified-pause-label {
    font-size: var(--pause-label-size-desktop);
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 8px;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    /* ✅ REMOVED: animation: pulse 2s ease-in-out infinite; */
}

/* ✅ REMOVED: pulse animation keyframes
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}
*/

/* N-Back Level Info */
.unified-nback-info {
    font-size: var(--nback-info-size-desktop);
    font-weight: bold;
    color: #04AA6D;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.state-paused .unified-nback-info {
    color: #ffffff; /* White in paused state */
    font-size: var(--press-space-size-desktop);
}

/* Results Display */
.unified-results-display {
    background: #000000;
    color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    min-height: 150px; /* Prevent layout shift */
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.unified-results-text {
    font-size: 24px;
    line-height: 1.6;
}

.unified-results-text br {
    display: block;
    content: "";
    margin-top: 10px;
}

/* Press Space Text */
.unified-press-space-text {
    font-size: 32px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    padding: 20px;
}

.state-first-start .unified-press-space-text,
.state-interruption .unified-press-space-text {
    color: #04AA6D; /* Green for non-paused states */
}

.state-paused .unified-press-space-text {
    color: #ffffff; /* White for paused state */
    font-size: var(--press-space-size-desktop);
}

.state-session-end .unified-press-space-text {
    color: #04AA6D; /* Green for end screen */
}

/* EXIT Button */
.unified-exit-button {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.unified-exit-button:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.unified-exit-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Small EXIT button (States: INTERRUPTION, RESULTS) */
.exit-button-small {
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 16px;
}

/* Large EXIT button (States: PAUSED, SESSION_END) */
.exit-button-large {
    display: block;
    padding: 0;
    border-radius: 5px;
    font-size: 18px; /* ✅ Increased from 16px */
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    width: 140px; /* ✅ Increased from 100px */
    height: 42px; /* ✅ Increased from 30px */
    box-sizing: border-box;
    margin: 0 auto;
    /* ✅ Larger size for better visibility */
}

/* ========== DESKTOP/MOBILE SPECIFIC ELEMENTS ========== */

/* Desktop EXIT button - hidden on mobile */
.desktop-only-exit {
    display: block; /* Visible by default (desktop) */
}

/* Mobile buttons - hidden by default */
.mobile-resume-buttons {
    pointer-events: auto !important; /* Container clickable */
    display: none !important; /* Hidden by default, controlled by JavaScript */
    position: fixed !important; /* Fixed positioning, same as trial indicators */
    bottom: 50px !important; /* Directly above trial indicators (at bottom: 8px) */
    left: 50% !important;
    transform: translateX(-50%) !important;
    flex-direction: column;
    gap: 8px;
    width: 90%;
    max-width: 400px;
    z-index: 5100 !important; /* Above everything */
}

.mock-android-btn-row {
    display: flex;
    gap: 10px;
}

.mock-android-btn {
    pointer-events: auto !important; /* Always clickable */
    font-family: Arial, sans-serif;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s ease;

    /* Same colors as original Android buttons */
    background-color: rgba(198, 198, 198, 0.5);
    border: 1px solid rgba(174, 174, 174, 0.5);
    color: #7C7A7A;
    border-radius: 3px;

    /* Same dimensions as original */
    height: 48px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mock-android-btn:active {
    background-color: rgba(205, 205, 205, 0.5);
    border-color: rgba(205, 205, 205, 0.2);
    transform: scale(0.98);
}

/* Fullscreen, EXIT, and Continue buttons (equal width) */
.mock-android-btn-fullscreen,
.mock-android-btn-exit,
.mock-android-btn-continue {
    flex: 1;
}

/* ✅ Fullscreen button - Blue tint */
.mock-android-btn-fullscreen {
    background-color: rgba(100, 150, 220, 0.5);
    border: 1px solid rgba(70, 120, 190, 0.5);
}

.mock-android-btn-fullscreen:active {
    background-color: rgba(110, 160, 230, 0.5);
}

/* ✅ EXIT button - Red tint */
.mock-android-btn-exit {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
    border: 1px solid #991b1b !important;
    color: #ffffff !important;
}

.mock-android-btn-exit:active {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%) !important;
}

/* ✅ Continue button - Green tint */
.mock-android-btn-continue {
    background-color: rgba(100, 200, 130, 0.5);
    border: 1px solid rgba(70, 170, 100, 0.5);
}

.mock-android-btn-continue:active {
    background-color: rgba(110, 210, 140, 0.5);
}

/* ========== RESPONSIVE DESIGN ========== */

/* Tablet */
@media (max-width: 768px) {
    .unified-overlay-content {
        max-width: 600px;
        padding: 30px 15px;
        gap: var(--pause-content-gap-mobile);
        /* ✅ MOBILE: Move content up by 15% */
        transform: translateY(var(--pause-overlay-vertical-offset-mobile));
    }

    .unified-pause-label {
        font-size: var(--pause-label-size-mobile);
        letter-spacing: 6px;
    }

    .unified-nback-info {
        font-size: var(--nback-info-size-mobile);
    }

    /* ✅ MOBILE: Optimized results display */
    .unified-results-display {
        max-width: 90vw !important;
        max-height: 60vh !important;
        padding: 15px !important;
        overflow-y: auto !important;
    }

    .unified-results-text {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    .unified-press-space-text {
        font-size: var(--press-space-size-mobile);
        line-height: 1.5 !important;
    }

    .state-paused .unified-press-space-text {
        font-size: var(--press-space-size-mobile);
    }

    .exit-button-small {
        padding: 10px 24px;
        font-size: 14px;
    }

    .exit-button-large {
        padding: var(--exit-button-padding-mobile);
        font-size: 20px;
    }

    /* ✅ MOBILE: Hide desktop EXIT button */
    .desktop-only-exit {
        display: none !important;
    }

    /* ✅ MOBILE: Buttons controlled by JavaScript, not CSS states */
}

/* Mobile */
@media (max-width: 480px) {
    .unified-overlay-content {
        max-width: 100%;
        padding: 20px 10px;
        gap: 10px;
    }

    .unified-pause-label {
        font-size: 40px;
        letter-spacing: 4px;
    }

    .unified-nback-info {
        font-size: 22px;
    }

    .unified-results-display {
        padding: 20px;
        min-height: 100px;
    }

    .unified-results-text {
        font-size: 16px;
    }

    .unified-press-space-text {
        font-size: 18px;
        padding: 15px;
    }

    .exit-button-small {
        padding: 8px 20px;
        font-size: 12px;
    }

    .exit-button-large {
        padding: 14px 40px;
        font-size: 18px;
    }
}

/* ========== TRANSITIONS & ANIMATIONS ========== */

/* Smooth fade for element visibility */
.unified-overlay-content > * {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* Hidden elements */
.unified-overlay-content > [style*="display: none"] {
    opacity: 0;
    pointer-events: none;
}

/* Visible elements */
.unified-overlay-content > [style*="display: block"] {
    opacity: 1;
    pointer-events: auto;
}

/* ========== ACCESSIBILITY ========== */

/* Focus outline for keyboard navigation */
.unified-exit-button:focus {
    outline: 3px solid #04AA6D;
    outline-offset: 4px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .unified-overlay,
    .unified-overlay-content > *,
    .unified-exit-button {
        transition: none;
        animation: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .unified-pause-label,
    .unified-press-space-text {
        text-shadow: none;
    }

    .unified-exit-button {
        border: 2px solid #ffffff;
    }
}