/* Copyright © 2025 Your Name. All Rights Reserved. */

body {
    font-family: 'Roboto Mono', monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s;
}

/* --- Light Mode --- */
.light body {
    background-color: #f4f4f5;
    /* zinc-100 */
}

.light .neo-shadow {
    box-shadow: 4px 4px 0px #18181b;
    /* zinc-900 */
}

.light .neo-shadow-sm {
    box-shadow: 2px 2px 0px #18181b;
}

.light .btn-push:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #18181b;
}

.light .btn-push:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px #18181b;
}

.light .border-strong {
    border: 2px solid #18181b;
}

.light .modal-border {
    border: 4px solid #18181b;
}

/* --- Dark Mode --- */
.dark body {
    background-color: #18181b;
    /* zinc-900 */
}

.dark .text-main {
    color: #f4f4f5;
}

.dark .text-subtle {
    color: #a1a1aa;
}

.dark .bg-main {
    background-color: #27272a;
}

.dark .neo-shadow {
    box-shadow: 4px 4px 0px #e4e4e7;
    /* zinc-200 */
}

.dark .neo-shadow-sm {
    box-shadow: 2px 2px 0px #e4e4e7;
}

.dark .btn-push:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #e4e4e7;
}

.dark .btn-push:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px #e4e4e7;
}

.dark .border-strong {
    border: 2px solid #e4e4e7;
}

.dark .modal-border {
    border: 4px solid #e4e4e7;
}

/* --- Grid & Cells --- */
.grid-container {
    display: grid;
    gap: 0.75rem;
}

.grid-cell {
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: all 0.1s ease-out;
}

.grid-cell.correct {
    animation: flash-correct 0.3s forwards;
    cursor: default;
    pointer-events: none;
}

@keyframes flash-correct {
    0% {
        background-color: #a3e635;
    }

    /* lime-400 */
    50% {
        background-color: #a3e635;
        transform: translate(4px, 4px);
        box-shadow: 0 0 0;
    }

    100% {
        background-color: #d4d4d8;
        transform: translate(4px, 4px);
        box-shadow: 0 0 0;
        opacity: 0.5;
    }
}

.dark .grid-cell.correct {
    animation: flash-correct-dark 0.3s forwards;
}

@keyframes flash-correct-dark {
    0% {
        background-color: #a3e635;
    }

    /* lime-400 */
    50% {
        background-color: #a3e635;
        transform: translate(4px, 4px);
        box-shadow: 0 0 0;
    }

    100% {
        background-color: #52525b;
        transform: translate(4px, 4px);
        box-shadow: 0 0 0;
        opacity: 0.5;
    }
}

.grid-cell.incorrect {
    animation: shake-incorrect 0.4s;
    background-color: #f43f5e;
    color: #fff;
}

@keyframes shake-incorrect {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

.grid-cell {
    font-size: 1.5rem;
}

@media (min-width: 768px) {
    .grid-cell {
        font-size: 2rem;
    }
}

.modal-enter {
    opacity: 0;
}

.modal-enter .modal-content {
    opacity: 0;
    transform: scale(0.95);
}

.modal-leave {
    opacity: 1;
}

.modal-leave .modal-content {
    opacity: 1;
    transform: scale(1);
}