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

:root {
  --Main: hsl(352, 60%, 30%);
  --Secondary: hsl(302, 85%, 85%);
  --Hover: hsl(90, 65%, 60%);

  --BG-Heavy: hsl(0 0 80%);
  --BG: hsl(0 0 85%);
  --BG-Light: hsl(0 0 90%);
  --Text: hsl(0 0 5%);
  --Text-Muted: hsl(0 0 30%);
}

/* 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%);

  /* Makes link text legible */
  main a:not(.button-link):not(.button-home) {
    color: var(--Secondary); 
  }
  main a:not(.button-link):not(.button-home):hover {
    color: var(--Hover);
  }
  }
}

/* --- 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;
}