/* mobile-landscape-customizable.css - Landscape Layout with Portrait Logic */
/* Same positioning logic as Portrait, just different positions and button sizes */

/* ========== CSS VARIABLEN FÜR LANDSCAPE ========== */
:root {
    /* ========== CROSS POSITION (LANDSCAPE) ========== */
    /* Kreuz in der Mitte des Bildschirms für Landscape */
    --cross-x-landscape: 50%;
    --cross-y-landscape: 50%;

    /* ========== SQUARE POSITIONS (LANDSCAPE) ========== */
    /* Offset from cross center to square center */
    /* For 90px squares: ±100px spacing (90px + 10px gap) */

    /* Row 0 (Top) */
    --square-0-offset-x-landscape: -100px;  /* Top-Left */
    --square-0-offset-y-landscape: -100px;

    --square-1-offset-x-landscape: 0px;     /* Top-Center */
    --square-1-offset-y-landscape: -100px;

    --square-2-offset-x-landscape: 100px;   /* Top-Right */
    --square-2-offset-y-landscape: -100px;

    /* Row 1 (Middle) */
    --square-3-offset-x-landscape: -100px;  /* Middle-Left */
    --square-3-offset-y-landscape: 0px;

    --square-4-offset-x-landscape: 0px;     /* Middle-Center (same as cross) */
    --square-4-offset-y-landscape: 0px;

    --square-5-offset-x-landscape: 100px;   /* Middle-Right */
    --square-5-offset-y-landscape: 0px;

    /* Row 2 (Bottom) */
    --square-6-offset-x-landscape: -100px;  /* Bottom-Left */
    --square-6-offset-y-landscape: 100px;

    --square-7-offset-x-landscape: 0px;     /* Bottom-Center */
    --square-7-offset-y-landscape: 100px;

    --square-8-offset-x-landscape: 100px;   /* Bottom-Right */
    --square-8-offset-y-landscape: 100px;

    /* ========== ANDROID BUTTONS (Referenz: nback - Kopie (20)) ========== */
    /* Position Button (Links, volle Höhe) */
    --landscape-position-btn-width: 120px;
    --landscape-position-btn-margin-left: 8px;
    --landscape-position-btn-margin-top: 8px;
    --landscape-position-btn-margin-bottom: 8px;

    /* Color Button (Rechts oben) */
    --landscape-color-btn-width: 120px;
    --landscape-color-btn-height: 200px;
    --landscape-color-btn-margin-right: 8px;
    --landscape-color-btn-margin-top: 8px;

    /* Audio Button (Rechts unten) */
    --landscape-audio-btn-width: 120px;
    --landscape-audio-btn-margin-right: 8px;
    --landscape-audio-btn-margin-top: 4px;  /* Abstand zu Color */
    --landscape-audio-btn-margin-bottom: 8px;
}

/* ========== LANDSCAPE MODE DETECTION ========== */
/* Höhere max-width (1366px) um sicherzustellen, dass auch beim Wechsel Portrait->Landscape
   die Mobile-Version bleibt (z.B. 768px Portrait wird zu 1024px Landscape) */
@media (max-width: 1366px) and (orientation: landscape) {

    /* ========== TRAINING CONTAINER ========== */
    .training-container {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ========== ANDROID BUTTONS ========== */

    /* ✅ Container sichtbar machen (wird im Desktop versteckt) */
    .training-controls-android {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important; /* Container nicht klickbar, aber Buttons schon */
        z-index: 5000 !important; /* ✅ FIX: Match desktop z-index to prevent overlay conflicts */
    }

    /* Position Button - Links, volle Höhe */
    .android-btn-position {
        position: fixed !important;
        left: var(--landscape-position-btn-margin-left) !important;
        top: var(--landscape-position-btn-margin-top) !important;
        bottom: var(--landscape-position-btn-margin-bottom) !important;
        width: var(--landscape-position-btn-width) !important;
        height: auto !important;

        pointer-events: auto !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        /* Android-Style grau */
        background-color: rgba(198, 198, 198, 0.5) !important;
        border: 1px solid rgba(174, 174, 174, 0.5) !important;
        color: #7C7A7A !important;
        font-size: 16px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        border-radius: 3px !important;
        cursor: pointer !important;

        /* Flexbox für Text-Zentrierung */
        align-items: center;
        justify-content: center;
        flex-direction: column;

        /* ✅ FIX: Raised z-index to stay above overlays (3000) */
        z-index: 5000 !important;
    }

    /* Color Button - Rechts oben */
    .android-btn-color {
        position: fixed !important;
        right: var(--landscape-color-btn-margin-right) !important;
        top: var(--landscape-color-btn-margin-top) !important;
        width: var(--landscape-color-btn-width) !important;
        height: var(--landscape-color-btn-height) !important;

        pointer-events: auto !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        /* Android-Style grau */
        background-color: rgba(198, 198, 198, 0.5) !important;
        border: 1px solid rgba(174, 174, 174, 0.5) !important;
        color: #7C7A7A !important;
        font-size: 16px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        border-radius: 3px !important;
        cursor: pointer !important;

        /* Flexbox für Text-Zentrierung */
        align-items: center;
        justify-content: center;
        flex-direction: column;

        /* ✅ FIX: Raised z-index to stay above overlays (3000) */
        z-index: 5000 !important;
    }

    /* Audio Button - Rechts unten, unter Color Button */
    .android-btn-audio {
        position: fixed !important;
        right: var(--landscape-audio-btn-margin-right) !important;
        top: calc(var(--landscape-color-btn-margin-top) + var(--landscape-color-btn-height) + var(--landscape-audio-btn-margin-top)) !important;
        bottom: var(--landscape-audio-btn-margin-bottom) !important;
        width: var(--landscape-audio-btn-width) !important;
        height: auto !important;

        pointer-events: auto !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        /* Android-Style grau */
        background-color: rgba(198, 198, 198, 0.5) !important;
        border: 1px solid rgba(174, 174, 174, 0.5) !important;
        color: #7C7A7A !important;
        font-size: 16px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        border-radius: 3px !important;
        cursor: pointer !important;

        /* Flexbox für Text-Zentrierung */
        align-items: center;
        justify-content: center;
        flex-direction: column;

        /* ✅ FIX: Raised z-index to stay above overlays (3000) */
        z-index: 5000 !important;
    }

    /* Button States */
    .android-btn-position.disabled,
    .android-btn-color.disabled,
    .android-btn-audio.disabled {
        opacity: 0.3 !important;
        pointer-events: none !important;
    }

    .android-btn-position.enabled,
    .android-btn-color.enabled,
    .android-btn-audio.enabled {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* ========== GRID SQUARES (ABSOLUTE POSITIONING LIKE PORTRAIT) ========== */

    /* Grid rectangles - 90px squares */
    .grid-rect {
        position: absolute !important;
        width: 90px !important;
        height: 90px !important;
        /* ✅ REMOVED: background-color: transparent - let main CSS and color classes handle it */
        /* Position squares: Use var(--square-color) from main CSS */
        /* Color squares: Use .color-red, .color-blue, etc. classes from main CSS */
        border: 3px solid #1e1e1e !important;
        transition: background-color 0.2s ease !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* Center rectangle (for color mode) */
    .center-rect {
        position: absolute !important;
        width: 90px !important;
        height: 90px !important;
        /* ✅ REMOVED: background-color: transparent - caused color classes to be overridden */
        /* background-color is set by .color-red, .color-blue, etc. classes from main CSS */
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* ========== FIXATION CROSS ========== */
    /* Kreuz in der Mitte des Bildschirms */
    .fixation-cross {
        position: absolute !important;
        left: var(--cross-x-landscape) !important;
        top: var(--cross-y-landscape) !important;
        transform: translate(-50%, -50%) !important;
        z-index: 20 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* ========== SQUARE POSITIONS (RELATIVE TO CROSS) ========== */
    /* Formula: square-left = cross-x-landscape + offset-x-landscape - 45px (half of 90px) */
    /* Formula: square-top = cross-y-landscape + offset-y-landscape - 45px (half of 90px) */

    .pos-0 {
        left: calc(var(--cross-x-landscape) + var(--square-0-offset-x-landscape) - 45px) !important;
        top: calc(var(--cross-y-landscape) + var(--square-0-offset-y-landscape) - 45px) !important;
    }
    .pos-1 {
        left: calc(var(--cross-x-landscape) + var(--square-1-offset-x-landscape) - 45px) !important;
        top: calc(var(--cross-y-landscape) + var(--square-1-offset-y-landscape) - 45px) !important;
    }
    .pos-2 {
        left: calc(var(--cross-x-landscape) + var(--square-2-offset-x-landscape) - 45px) !important;
        top: calc(var(--cross-y-landscape) + var(--square-2-offset-y-landscape) - 45px) !important;
    }
    .pos-3 {
        left: calc(var(--cross-x-landscape) + var(--square-3-offset-x-landscape) - 45px) !important;
        top: calc(var(--cross-y-landscape) + var(--square-3-offset-y-landscape) - 45px) !important;
    }
    .pos-4 {
        left: calc(var(--cross-x-landscape) + var(--square-4-offset-x-landscape) - 45px) !important;
        top: calc(var(--cross-y-landscape) + var(--square-4-offset-y-landscape) - 45px) !important;
    }
    .pos-5 {
        left: calc(var(--cross-x-landscape) + var(--square-5-offset-x-landscape) - 45px) !important;
        top: calc(var(--cross-y-landscape) + var(--square-5-offset-y-landscape) - 45px) !important;
    }
    .pos-6 {
        left: calc(var(--cross-x-landscape) + var(--square-6-offset-x-landscape) - 45px) !important;
        top: calc(var(--cross-y-landscape) + var(--square-6-offset-y-landscape) - 45px) !important;
    }
    .pos-7 {
        left: calc(var(--cross-x-landscape) + var(--square-7-offset-x-landscape) - 45px) !important;
        top: calc(var(--cross-y-landscape) + var(--square-7-offset-y-landscape) - 45px) !important;
    }
    .pos-8 {
        left: calc(var(--cross-x-landscape) + var(--square-8-offset-x-landscape) - 45px) !important;
        top: calc(var(--cross-y-landscape) + var(--square-8-offset-y-landscape) - 45px) !important;
    }

    /* ========== UI ELEMENTS ========== */

    /* N-Back Display - TAUSCH mit PAUSE: Jetzt groß und zentral */
    .nback-display {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 36px !important;
        letter-spacing: 3px !important;
        z-index: 3100 !important;
    }

    .nback-text {
        font-size: 36px !important;
        letter-spacing: 3px !important;
        padding: 4px 8px !important;
    }

    /* Trial Progress Indicators - unten zentriert */
    .trial-progress {
        position: fixed !important;
        bottom: 8px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        gap: 4px !important;
        z-index: 3100 !important;
    }

    .trial-indicator {
        width: 10px !important;
        height: 10px !important;
        border-radius: 2px !important;
    }

    /* Manual Text - versteckt in Landscape */
    .manual-text {
        display: none !important;
    }

    /* ========== PAUSE OVERLAY ========== */
    .unified-overlay {
        width: 100vw !important;
        height: 100vh !important;
    }

    .unified-overlay.state-paused {
        background: rgba(0, 0, 0, 0.95) !important;
    }

    .unified-overlay-content {
        transform: translateY(0) !important;
        padding: 15px !important;
        gap: 8px !important;
        max-width: 90% !important;
    }

    /* PAUSE - In der Mitte */
    .unified-pause-label {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 48px !important;
        letter-spacing: 8px !important;
        z-index: 3100 !important;
    }

    /* N-Back Info - Über PAUSE mit großem Font */
    .unified-nback-info {
        position: fixed !important;
        top: calc(50% - 60px) !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 36px !important;
        letter-spacing: 4px !important;
        z-index: 3100 !important;
    }

    .unified-press-space-text {
        font-size: 14px !important;
        padding: 8px !important;
    }

    .unified-results-display {
        padding: 15px !important;
        min-height: 80px !important;
        max-height: 250px !important;
    }

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

    /* Mobile Resume Buttons - Container verstecken, Buttons einzeln positionieren */
    .mobile-resume-buttons {
        display: contents !important; /* Buttons escapieren aus Container */
    }

    /* Pause-Buttons: Alle drei nebeneinander, zentriert als Gruppe */
    /* Gesamtbreite: 3 × 110px + 2 × 20px Gap = 370px */

    /* FULLSCREEN Button - Links */
    .mock-android-btn-fullscreen {
        position: fixed !important;
        top: calc(50% + 80px) !important;
        left: calc(50% - 185px) !important;
        width: 110px !important;
        height: 45px !important;
        font-size: 14px !important;
        z-index: 3100 !important;
    }

    /* EXIT Button - Mitte (nebeneinander mit anderen) */
    .unified-exit-button {
        display: block !important;
        position: fixed !important;
        top: calc(50% + 80px) !important;
        left: calc(50% - 55px) !important;
        width: 110px !important;
        height: 45px !important;
        font-size: 14px !important;
        z-index: 3100 !important;
        /* ✅ Grid deaktivieren - fixed positioning verwenden */
        grid-area: unset !important;
        justify-self: unset !important;
        align-self: unset !important;
        margin: 0 !important;
        transform: none !important;
        /* ✅ ROT: Explizite rote Farbe im Landscape */
        background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
        color: #ffffff !important;
        border: none !important;
    }

    /* CONTINUE Button - Rechts */
    .mock-android-btn-continue {
        position: fixed !important;
        top: calc(50% + 80px) !important;
        left: calc(50% + 75px) !important;
        width: 110px !important;
        height: 45px !important;
        font-size: 14px !important;
        z-index: 3100 !important;
    }

    /* Control Button */
    .training-controls {
        position: fixed !important;
        bottom: 8px !important;
        right: 8px !important;
        z-index: 3100 !important;
    }

    .control-btn {
        width: 70px !important;
        height: 30px !important;
        font-size: 11px !important;
    }

    /* ========== VERSTECKTE ELEMENTE ========== */
    .button_click_training_sound_off,
    .button_click_training_orientation,
    .button_click_training_mode,
    .button_click_training_style,
    .button_click_training_size,
    .button_click_training_grid,
    .button_click_training_fade {
        display: none !important;
    }

    /* ✅ main-window visibility controlled by JavaScript - no !important override */
}

/* ========== FORCE LANDSCAPE MODE (Unabhängig von Device-Orientation) ========== */
/* Wenn body.force-landscape Klasse gesetzt ist, wende Landscape-Layout an auch in Portrait */
body.force-landscape .training-container {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
}

body.force-landscape .training-controls-android {
    display: block !important;
}

body.force-landscape .android-btn-position,
body.force-landscape .android-btn-color,
body.force-landscape .android-btn-audio {
    /* Landscape button positions even if device is in portrait */
    position: fixed !important;
    display: flex !important;
}

/* Hide keyboard-only settings on mobile */
@media (max-width: 768px) {
    .keyboard-only {
        display: none !important;
    }
}