/* ----- Chess Formatting ----- */

:root {
  --Main: hsl(322, 68%, 32%);
  --Secondary: hsl(52, 85%, 85%);
  --Hover: hsl(232, 65%, 60%);
}

/* Dark Mode */

@media (prefers-color-scheme: dark){
  :root{
  --BG-Heavy: hsl(0 0 15%);
  --BG: hsl(0 0 20%);
  --BG-Light: hsl(0 0 25%);
  --Text: hsl(0 0 95%);
  --Text-Muted: hsl(0 0 70%);
  }
}

/* --- Chess Board & Animation Controls --- */

#boards-container-HOR {
    display: flex;             /* Horizontal layout */
    flex-wrap: wrap;           /* Boards wrap to next line if needed */
    gap: 0.5em;                /* Space between boards */
    width: 100%;               /* Fill parent container */
    justify-content: center;   /* Center boards horizontally */
    box-sizing: border-box;    /* Include padding/gap in width calculations */
}

.chessboard {
    flex: 1 1 200px;           /* Grow/shrink, start at 200px width */
    max-width: 25%;            /* Maximum 4 boards in a row */
}

        @media (max-width: 800px) {
            .chessboard {
                flex: 1 1 50%;         /* Two boards per row */
                max-width: 40%;        /* Remove previous max-width */
            }
        }

        @media (max-width: 400px) {
            .chessboard {
                flex: 1 1 80%;
                max-width: 40%;        /* Remove previous max-width */ 
            }
        }

#controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

button {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    background: var(--Main);
    color: var(--Text);
    cursor: pointer;
}

button:hover {
    background: var(--Hover);
}

button:active {
    transform: translateY(1px);
}


/* --- Disclaimers --- */

.disclaimers{
  padding-left: 3em;
}
.disclaimers li{
  margin-bottom: 16px;
  font-weight: bold;
}