body {
    font-family: Roboto, Arial;
    text-align: center;
}

.board-container {
    display: flex;
    justify-content: center;
}

#board {
    width: 90vw;                /* Shrinks on mobile */
    max-width: 630px;           /* Prevent stretching on large screens */
    aspect-ratio: 7 / 6;        /* Keeps perfect board shape */
    background-color: blue;
    border: 10px solid navy; 
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 8px;
    padding: 8px;
    box-sizing: border-box;
}

.tile {
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 50%;
    border: 5px solid navy;
}

.red-piece {
    background-color: red;
}

.yellow-piece {
    background-color: yellow;
}

.back-button {
  background-color: lightpink;
  display: inline-block;
  font-family: Roboto, Arial;
  font-size: 28px;
  position: fixed;
  left: 20px;
  top: 20px;
  padding: 5px;
  background-color: rgb(240, 240, 240);
  border-width: 2px;
  border-radius: 20px;
  border-style: solid;
  border-color: rgb(88, 87, 87);
  cursor: pointer;

}