#tic-tac-toe-game {
  /* Define variables */
  --board-size: 320px;
  --board-border-width: 3px;
  --board-border-color: #333;
  --board-border: var(--board-border-width) solid var(--board-border-color);

  /* Player Selector */
  #player-selector {
    --leaderboard-color: #ccc;
    --wins-size: 48px;

    position: relative;
    border: var(--board-border-width) solid var(--leaderboard-color);
    border-radius: 8px;
    padding-block: 16px;
    margin: auto;
    justify-content: center;
    align-items: center;
    width: var(--board-size);
    display: flex;
  }

  /* Wins Box */
  #player-selector .wins-box {
    align-items: center;
    background-color: white;
    border-radius: 50%;
    border: var(--board-border);
    border-color: var(--leaderboard-color);
    display: flex;
    height: var(--wins-size);
    justify-content: center;
    position: absolute;
    width: var(--wins-size);
  }

  /* Wins Box Span */
  #player-selector .wins-box span {
    font-size: 1.5rem;
  }

  /* Player Wins */
  #player-selector .player-wins {
    left: calc(-1 * (var(--wins-size) / 2) - var(--board-border-width));
  }

  /* Player Opponent Wins */
  #player-selector .player-opponent-wins {
    right: calc(-1 * (var(--wins-size) / 2) - var(--board-border-width));
  }

  /* Player Mark */
  #player-mark {
    font-size: 32px;
    width: 78px;
    padding: 8px 0;
    border: none;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4=) no-repeat 95% 50% #f3f3f3;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
  }

  /* Opponent Mark */
  #opponent-mark {
    font-size: 32px;
    border: none;
    width: 78px;
    text-align: center;
  }

  /* Game Status */
  #game-status {
    margin: auto;
    padding-block: 16px;
    justify-content: center;
    width: var(--board-size);
    display: flex;
  }

  /* Tic Tac Toe Board */
  #tic-tac-toe-board {
    width: var(--board-size);
    height: var(--board-size);
    border-collapse: collapse;  /* Eliminates the space between cell borders */
    margin: auto;  /* Center the table on the page */
  }

  /* Board Row */
  #tic-tac-toe-board .board-row {
    height: 33.33%;  /* Each row takes 1/3 of the table height */
  }

  /* Board Cell */
  #tic-tac-toe-board .board-cell {
    border: var(--board-border);
    width: 33.33%;  /* Each cell takes 1/3 of the table width */
    text-align: center; /* Center the content horizontally */
    font-size: 48px;  /* Larger font size for readability */
    cursor: pointer;  /* Cursor hint for clickable areas */
    vertical-align: middle;  /* Centers content vertically */
    transition: background-color 0.4s;  /* Smooth background color transition for hover effect */
  }

  /* Board Cell Hover */
  #tic-tac-toe-board .board-cell[data-content=""]:hover {
    background-color: #f0f0f0;  /* Light gray background on hover for interactivity */
  }
}