body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.game-container {
    aspect-ratio: 4/3;
    max-height: 80vh;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .game-container {
        aspect-ratio: 1/1;
        height: 80vh;
    }
}

html {
    scroll-behavior: smooth;
}

a {
    transition: all 0.2s ease;
}

.hover\:shadow-lg:hover {
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

section {
    transition: all 0.3s ease;
}

.dark {
    transition: background-color 0.3s ease, color 0.3s ease;
}

:focus {
    outline: 2px solid var(--apple-blue);
    outline-offset: 2px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

section {
    animation: fadeIn 0.5s ease-out;
}