.game-info {
    margin: 2rem;
    text-align: center;
    color: var(--color-text);
    letter-spacing: var(--letter-space);
}

.simon-board {
    /* margin-top: 2.5rem; */
    position: relative;
    width: min(380px, calc(100vw - 3rem));
    aspect-ratio: 1;
}

@keyframes shake {

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

    15% {
        transform: translateX(-8px) rotate(-1deg);
    }

    30% {
        transform: translateX(8px) rotate(1deg);
    }

    45% {
        transform: translateX(-6px);
    }

    60% {
        transform: translateX(6px);
    }

    75% {
        transform: translateX(-3px);
    }
}

.simon-board.shake {
    animation: shake 0.5s ease-in-out;
}

.play-btn {
    position: absolute;
    width: calc(50% - 6px);
    height: calc(50% - 6px);
    cursor: pointer;
    border: none;
    outline: none;
    transition: filter var(--transition-game), transform var(--transition-game), box-shadow var(--transition-game);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.play-btn.disabled {
    cursor: default;
    pointer-events: none;
}

.green {
    top: 0;
    left: 0;
    background: var(--green-dim);
    box-shadow: var(--shadow-btn);
    border-top-left-radius: var(--r-outer);
    border-top-right-radius: var(--r-inner);
    border-bottom-right-radius: var(--r-inner);
    border-bottom-left-radius: var(--r-inner);
}

.green.lit {
    background: var(--green-lit);
    box-shadow: 0 0 40px var(--green-glow), 0 0 80px rgba(34, 221, 68, 0.3), inset 0 2px 8px rgba(255, 255, 255, 0.2);
    filter: brightness(1.2);
}

.red {
    top: 0;
    right: 0;
    background-color: var(--red-dim);
    box-shadow: var(--shadow-btn);
    border-top-left-radius: var(--r-inner);
    border-top-right-radius: var(--r-outer);
    border-bottom-right-radius: var(--r-inner);
    border-bottom-left-radius: var(--r-inner);
}

.red.lit {
    background: var(--red-lit);
    box-shadow: 0 0 40px var(--red-glow), 0 0 80px rgba(255, 51, 51, 0.3), inset 0 2px 8px rgba(255, 255, 255, 0.2);
    filter: brightness(1.2);
}

.yellow {
    bottom: 0;
    left: 0;
    background-color: var(--yellow-dim);
    box-shadow: var(--shadow-btn);
    border-top-left-radius: var(--r-inner);
    border-top-right-radius: var(--r-inner);
    border-bottom-right-radius: var(--r-inner);
    border-bottom-left-radius: var(--r-outer);
}

.yellow.lit {
    background: var(--yellow-lit);
    box-shadow: 0 0 40px var(--yellow-glow), 0 0 80px rgba(255, 221, 0, 0.3), inset 0 2px 8px rgba(255, 255, 255, 0.2);
    filter: brightness(1.1);
}

.blue {
    bottom: 0;
    right: 0;
    background: var(--blue-dim);
    box-shadow: var(--shadow-btn);
    border-top-left-radius: var(--r-inner);
    border-top-right-radius: var(--r-inner);
    border-bottom-right-radius: var(--r-outer);
    border-bottom-left-radius: var(--r-inner);
}

.blue.lit {
    background: var(--blue-lit);
    box-shadow: 0 0 40px var(--blue-glow), 0 0 80px rgba(51, 136, 255, 0.3), inset 0 2px 8px rgba(255, 255, 255, 0.2);
    filter: brightness(1.2);
}


.board-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28%;
    height: 28%;
    background: var(--color-bg);
    border-radius: 50%;
    z-index: 1;
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 6px var(--color-surface), inset 0 2px 8px rgba(0, 0, 0, 0.5);

}

.round {
    font-family: var(--font-game);
    color: var(--color-text-faint);

}


.error {
    background: var(--red-lit);
    box-shadow: 0 0 40px var(--red-glow), 0 0 80px rgba(255, 51, 51, 0.3), inset 0 2px 8px rgba(255, 255, 255, 0.2);
    filter: brightness(1.2);
}