@import url('../global.css');

:root {
  --title-color: var(--color-ataxx);
  --ataxx-soil: #21352d;
  --ataxx-moss: #456d45;
  --ataxx-spore: #e2aa4e;
  --ataxx-lichen: #6ec4a0;
  --ataxx-rim: #b28f50;
}

.ataxx-board[data-visual-theme='arcade'] {
  --ataxx-soil: #2b0f2c;
  --ataxx-moss: #4a1f4a;
  --ataxx-rim: #e660b2;
}

.ataxx-board[data-visual-theme='midnight'] {
  --ataxx-soil: #101a24;
  --ataxx-moss: #223349;
  --ataxx-rim: #91a9c4;
}

.ataxx-board[data-visual-theme='daylight'] {
  --ataxx-soil: #2c2010;
  --ataxx-moss: #4d3d20;
  --ataxx-rim: #d4a754;
}

.ataxx-board[data-visual-theme='amber'] {
  --ataxx-soil: #201404;
  --ataxx-moss: #3d2a08;
  --ataxx-rim: #e5a836;
}

.ataxx-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(7, minmax(0, 1fr));
  aspect-ratio: 1;
  container-type: inline-size;
  gap: clamp(0.1rem, 0.35vw, 0.26rem);
  padding: clamp(0.38rem, 1.1vw, 0.75rem);
  background:
    radial-gradient(circle at 20% 16%, rgb(137 191 131 / 18%), transparent 31%),
    repeating-linear-gradient(45deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 0.55rem), #16241e;
  border: 0.18rem solid var(--ataxx-rim);
  border-radius: 0.9rem;
  box-shadow:
    0 0.8rem 1.5rem rgb(4 18 10 / 48%),
    inset 0 0 0 0.14rem rgb(236 199 120 / 14%);
}

.ataxx-cell {
  min-width: 0;
  min-height: 0;
  border: 0.1rem solid rgb(141 184 113 / 18%);
  border-radius: 0.3rem;
  background:
    radial-gradient(circle at 30% 25%, rgb(179 218 141 / 13%), transparent 42%),
    linear-gradient(135deg, var(--ataxx-moss), var(--ataxx-soil));
  color: var(--text-color);
  font: inherit;
  font-size: clamp(0.9rem, 7cqw, 3rem);
  cursor: pointer;
  text-shadow: 0 0.1em 0 rgb(0 0 0 / 25%);
  transition:
    filter 0.14s ease,
    transform 0.14s ease;
}

.ataxx-cell.is-seat-0 {
  color: var(--ataxx-spore);
  text-shadow:
    0 0 0.24em rgb(231 177 78 / 48%),
    0 0.1em 0 #725026;
}

.ataxx-cell.is-seat-1 {
  color: var(--ataxx-lichen);
  text-shadow:
    0 0 0.24em rgb(110 196 160 / 44%),
    0 0.1em 0 #295848;
}

.ataxx-cell.is-selected,
.ataxx-cell.is-legal {
  box-shadow: inset 0 0 0 0.15rem var(--ataxx-spore);
}

.ataxx-cell.is-legal {
  background:
    radial-gradient(circle at 50% 50%, rgb(231 177 78 / 25%) 0 18%, transparent 20%),
    linear-gradient(135deg, #587a4b, var(--ataxx-soil));
}

.ataxx-cell:not(:disabled):hover,
.ataxx-cell:not(:disabled):focus-visible {
  filter: brightness(1.18);
  outline: 0.12rem solid var(--ataxx-rim);
  outline-offset: -0.12rem;
  transform: scale(1.025);
}