/* ========================================
   EINFACHE GRID POSITIONEN - OHNE VARIABLEN
   3x3 Grid um Fixation Cross
   Square: 90x90px, Gap: 10px
   ======================================== */

/* Hide inline control buttons during active training (controlled by JS) */
#inlineControlButtons.training-active {
    display: none !important;
}

/* ✅ Ensure buttons are above pause overlay (z-index 3000) */
#inlineControlButtons {
    z-index: 9999 !important;
}

/* Mobile Portrait: Cross bei 50%, 25% */
@media (max-width: 768px) and (orientation: portrait) {
    /* Squares auf 90x90px setzen */
    .grid-rect,
    .center-rect {
        width: 90px !important;
        height: 90px !important;
    }

    .center-rect-container {
        width: 96px !important;
        height: 96px !important;
    }

    .fixation-cross {
        left: 50% !important;
        top: 25% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Row 0 - Top */
    .pos-0 { left: calc(50% - 145px) !important; top: calc(25% - 145px) !important; }
    .pos-1 { left: calc(50% - 45px) !important;  top: calc(25% - 145px) !important; }
    .pos-2 { left: calc(50% + 55px) !important;  top: calc(25% - 145px) !important; }

    /* Row 1 - Middle */
    .pos-3 { left: calc(50% - 145px) !important; top: calc(25% - 45px) !important; }
    .pos-4 { left: calc(50% - 45px) !important;  top: calc(25% - 45px) !important; }
    .pos-5 { left: calc(50% + 55px) !important;  top: calc(25% - 45px) !important; }

    /* Row 2 - Bottom */
    .pos-6 { left: calc(50% - 145px) !important; top: calc(25% + 55px) !important; }
    .pos-7 { left: calc(50% - 45px) !important;  top: calc(25% + 55px) !important; }
    .pos-8 { left: calc(50% + 55px) !important;  top: calc(25% + 55px) !important; }

    /* ✅ Trial Progress - positioned above inline buttons */
    .trial-progress {
        position: fixed !important;
        bottom: 280px !important; /* Above inline buttons (200px + 50px height + gap) */
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 3100 !important; /* Above inline buttons to ensure visibility */
        max-width: 350px !important;
    }

    /* Scale down trial indicators for mobile */
    .trial-indicator {
        width: 15px !important;
        height: 10px !important;
        border-radius: 2px !important;
    }

    /* Show inline control buttons on mobile portrait - above position buttons */
    #inlineControlButtons:not(.training-active) {
        display: flex !important;
        bottom: 200px !important; /* Above position buttons (50px + 110px height + gap) */
    }
}

/* Mobile Landscape: Cross bei 50%, 50% */
@media (max-width: 1366px) and (orientation: landscape) {
    /* Squares auf 90x90px setzen */
    .grid-rect,
    .center-rect {
        width: 90px !important;
        height: 90px !important;
    }

    .center-rect-container {
        width: 96px !important;
        height: 96px !important;
    }

    .fixation-cross {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Row 0 - Top */
    .pos-0 { left: calc(50% - 145px) !important; top: calc(50% - 145px) !important; }
    .pos-1 { left: calc(50% - 45px) !important;  top: calc(50% - 145px) !important; }
    .pos-2 { left: calc(50% + 55px) !important;  top: calc(50% - 145px) !important; }

    /* Row 1 - Middle */
    .pos-3 { left: calc(50% - 145px) !important; top: calc(50% - 45px) !important; }
    .pos-4 { left: calc(50% - 45px) !important;  top: calc(50% - 45px) !important; }
    .pos-5 { left: calc(50% + 55px) !important;  top: calc(50% - 45px) !important; }

    /* Row 2 - Bottom */
    .pos-6 { left: calc(50% - 145px) !important; top: calc(50% + 55px) !important; }
    .pos-7 { left: calc(50% - 45px) !important;  top: calc(50% + 55px) !important; }
    .pos-8 { left: calc(50% + 55px) !important;  top: calc(50% + 55px) !important; }

    /* Show inline control buttons on mobile landscape */
    #inlineControlButtons:not(.training-active) {
        display: flex !important;
    }
}

/* Hide inline control buttons on desktop (default) */
@media (min-width: 769px) and (orientation: portrait),
       (min-width: 1367px) {
    #inlineControlButtons {
        display: none !important;
    }
}

/* ✅ Hide desktop exit button on mobile */
@media (max-width: 1366px) {
    .unified-exit-button {
        display: none !important;
    }
}