/* =========================
     BASE & GLOBAL STYLES
     ========================= */

:root {
    --color-primary: #6c5ce7;
    --color-primary-dark: #5849c7;
}

/* 1. Global Box Sizing */
html {
    box-sizing: border-box;
    color-scheme: light;
}

/* 2. Body Layout */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 100vh;
    margin: 0;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
}

/* 3. Links */
a {
    color: inherit;
    text-decoration: none;
}

/* 4. Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 5. Buttons */
button {
    font-family: inherit;
}

/* 6. Utility Classes */
.hidden {
    display: none !important;
}

/* 7. Accessible Focus Styles (shared, but cell/game-specific in game.css) */
button:focus,
[tabindex]:focus,
a:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
    transition: outline 0.2s, box-shadow 0.2s;
}

/* Respect OS-level reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Hide scrollbars on mobile for body and main containers */

@media (max-width: 767px) {
    body {
        display: block;
        min-height: 100vh;
        margin: 0;
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none;    /* Firefox */
    }
    body::-webkit-scrollbar,
    .container::-webkit-scrollbar,
    #game-board-container::-webkit-scrollbar {
        display: none;
    }
}