.pattern-grid {
  border-collapse: collapse;
  display: inline-block;
  margin: 1em 0;
  border: 2px solid var(--darkgray);
  background-color: var(--light);
}

.pattern-cell {
  border: 1px solid var(--gray);
  padding: 0;
  text-align: center;
  vertical-align: middle;
  font-size: 1.2em;
  position: relative;
}

.pattern-cell.pattern-green {
  background-color: #4caf50;
  color: white;
}

.pattern-cell.pattern-black {
  background-color: #212121;
  color: white;
}

.pattern-cell.pattern-white {
  background-color: var(--light);
}

.pattern-cell.pattern-empty {
  background-color: transparent;
}

.pattern-cell.pattern-arrow-up,
.pattern-cell.pattern-arrow-down,
.pattern-cell.pattern-arrow-left,
.pattern-cell.pattern-arrow-right,
.pattern-cell.pattern-arrow-up-right,
.pattern-cell.pattern-arrow-down-right,
.pattern-cell.pattern-arrow-down-left,
.pattern-cell.pattern-arrow-up-left {
  background-color: #ff9800;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
}

.pattern-cell.pattern-arrow-up {
  background-color: #ff9800;
}

.pattern-cell.pattern-arrow-down {
  background-color: #ff9800;
}

.pattern-cell.pattern-arrow-left {
  background-color: #ff9800;
}

.pattern-cell.pattern-arrow-right {
  background-color: #ff9800;
}

/* Dark mode support */
.dark .pattern-grid {
  border-color: var(--darkgray);
}

.dark .pattern-cell {
  border-color: var(--gray);
}

.dark .pattern-cell.pattern-white {
  background-color: var(--light);
}

.dark .pattern-cell.pattern-empty {
  background-color: transparent;
}