website

website/src/styles/demos/othello.css (2570B)

---

/* othello-mcts: the board, with each move shaded by how much the search tried it */

/* The board in the theme's colours: squares like the computer's modules, ruled
   between, and discs like its LEDs, white lit in the theme's text colour and black
   unlit (swapped round in light themes, so black stays the dark one). Legal moves
   are small dots in --dim, over 3:1 on the felt in every theme; the last disc
   played has a red dot, and the search's candidate moves are ghost white discs,
   more solid the more it tried them. */
.oth {
  --felt: color-mix(in srgb, var(--bg) 92%, var(--fg));
  --felt-line: var(--rule);
  --disc-dark: light-dark(var(--fg), color-mix(in oklch, var(--bg) 55%, #000));
  --disc-light: light-dark(color-mix(in oklch, var(--bg) 35%, #fff), var(--fg));
  display: grid;
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: 1px;
  width: min(100%, 336px);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--faint);
  background: var(--felt-line);
}

.oth-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 1px;
}

.oth-cell {
  position: relative;
  background: var(--felt);
  cursor: default;
}

/* lift the focused square over its neighbours, which would otherwise cover
   the parts of its ring that reach into them */
.oth-cell:focus-visible {
  z-index: 2;
}

.oth-cell.legal {
  cursor: pointer;
}

.oth-cell.legal::after {
  content: "";
  position: absolute;
  inset: 42%;
  border-radius: 50%;
  background: var(--dim);
}

@media (hover: hover) {
  .oth-cell.legal:hover::after {
    inset: 13%;
    background: color-mix(in srgb, var(--disc-dark) 55%, transparent);
    box-shadow: inset 0 0 0 1px var(--faint);
  }
}

.oth-cell .disc {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
}

.oth-cell .disc.b {
  background: var(--disc-dark);
  box-shadow: inset 0 0 0 1px light-dark(transparent, var(--faint));
}

.oth-cell .disc.w {
  background: var(--disc-light);
  box-shadow: inset 0 0 0 1px light-dark(var(--faint), transparent);
}

.oth-cell.last .disc::after {
  content: "";
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: var(--red);
}

.oth-cell .heat {
  position: absolute;
  inset: 13%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in oklch, var(--disc-light) var(--hp, 0%), transparent);
  color: var(--disc-dark);
  font-size: 10px;
  font-weight: 600;
}

.oth-cell .heat:empty {
  background: none;
}

.oth-count {
  font-variant-numeric: tabular-nums;
}