/* styles.css */

/* Hide scrollbar for sim area but allow scroll */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Custom Checkbox styles are handled via Tailwind peer classes usually, 
   but since we used basic inputs, let's ensure they match the theme. */

/* Focus overrides for "Focus Visibility" mode */
body.force-focus-rings *:focus {
    outline: 4px solid #F43F5E !important;
    /* Rose-500 accent */
    outline-offset: 2px !important;
}

/* Keyboard Only Mode */
body.keyboard-only #sim-content {
    pointer-events: none;
    /* Disable all mouse interactions */
}

/* Allow scrolling still, but elements are unclickable */
body.keyboard-only #sim-container {
    pointer-events: auto;
    cursor: not-allowed;
}

/* Motor Impairment (Tremors) Mode */
/* Simulates difficulty aiming the mouse by adding an unpredictable CSS animation to the entire container or cursor.
   We will shake the entire #sim-content container rapidly but slightly, causing target sizes to be effectively smaller.
*/
@keyframes tremor {
    0% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-2px, 2px);
    }

    20% {
        transform: translate(3px, -1px);
    }

    30% {
        transform: translate(-1px, -3px);
    }

    40% {
        transform: translate(2px, 2px);
    }

    50% {
        transform: translate(-3px, 0);
    }

    60% {
        transform: translate(1px, 3px);
    }

    70% {
        transform: translate(0, -2px);
    }

    80% {
        transform: translate(2px, -1px);
    }

    90% {
        transform: translate(-2px, 3px);
    }

    100% {
        transform: translate(1px, -2px);
    }
}

body.motor-impairment #sim-content {
    /* Fast, jittery animation */
    animation: tremor 0.3s infinite linear;
}

body.motor-impairment #sim-container {
    cursor: crosshair;
    /* Make cursor less helpful than pointer */
}

/* Modal Animation */
.modal-show {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.modal-show>div {
    transform: scale(1) !important;
}