.board button {
  width: 100px;
  height: 100px;
  background-color: gray;
  border-radius: 50%;
  border: 4px solid black; /*this gets rid of bootstrap shadow*/
  margin: 1px;
}

/* GENERAL SUPERGROK 2026-10-04: phone fit. Seven 100px buttons need 714px, so cap each chip at a
   seventh of the screen. The game logic reads and sets background-color only, so sizes are free to change. */
.board { margin: 0 auto; }
.board td { padding: 0; }
.board button {
  width: min(100px, calc((100vw - 44px) / 7 - 2px));
  height: min(100px, calc((100vw - 44px) / 7 - 2px));
  border-width: min(4px, 0.6vw + 1px);
}
@media (max-width: 600px) {
  .container h1 { font-size: 28px; }
  .container h2 { font-size: 20px; }
  .container h3 { font-size: 18px; }
}