.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; }
}

*{box-sizing:border-box}body{margin:0;padding:12px;background:#fff8ed;color:#24454c;font-family:system-ui,sans-serif}.container{max-width:800px;margin:0 auto;text-align:center}.container p{line-height:1.5}h1{font-size:32px}h2{font-size:21px}h3{font-size:19px;min-height:2.7em}.board{border-spacing:0;margin:18px auto}.board button{font:800 clamp(16px,5vw,32px) system-ui;color:#fff;border-color:#385d6a;cursor:pointer}.board button:focus-visible,#reset-four:focus-visible{outline:3px solid #b33361;outline-offset:2px}#reset-four{font:700 16px system-ui;border:2px solid #246970;background:#dff9ed;padding:12px 20px;border-radius:12px;min-height:48px;cursor:pointer}