.ot-board {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 3px; background: #1f7a4d; padding: 6px; border-radius: 12px;
  width: max-content; margin: 0 auto; max-width: 100%;
}
.ot-cell {
  width: 38px; height: 38px; min-width: 38px; min-height: 38px;
  background: #2a9d63; border-radius: 6px; cursor: pointer; position: relative;
  display: grid; place-items: center;
}
.ot-cell .disc {
  width: 78%; height: 78%; border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.ot-cell .disc.b { background: radial-gradient(circle at 35% 30%, #555, #000); }
.ot-cell .disc.w { background: radial-gradient(circle at 35% 30%, #fff, #cfcfcf); }
.ot-cell .hint {
  width: 30%; height: 30%; border-radius: 50%; background: rgba(255,255,255,.55);
}
.ot-cell.valid:hover { box-shadow: inset 0 0 0 3px var(--sun); }
@media (max-width: 380px) {
  .ot-cell { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
}