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

:root {
  --title-color: var(--color-halma);
  --halma-deep: #143d4c;
  --halma-ice: #d6edf0;
  --halma-frost: #7cc9cf;
  --halma-aurora: #ce82d9;
  --halma-rim: #b9e4df;
  --halma-board-bg: #1a5967;
}

.halma-board[data-visual-theme='arcade'] {
  --halma-deep: #3a1230;
  --halma-rim: #ff8de5;
  --halma-board-bg: #59104a;
}

.halma-board[data-visual-theme='midnight'] {
  --halma-deep: #0e2338;
  --halma-rim: #8fd8fb;
  --halma-board-bg: #0f3252;
}

.halma-board[data-visual-theme='daylight'] {
  --halma-deep: #6a4bc4;
  --halma-rim: #ede4ff;
  --halma-board-bg: #a689ea;
}

.halma-board[data-visual-theme='amber'] {
  --halma-deep: #3a2506;
  --halma-rim: #ffd98a;
  --halma-board-bg: #5c3d0d;
}

.halma-board {
  display: grid;
  grid-template-columns: repeat(var(--halma-size, 8), 1fr);
  grid-template-rows: repeat(var(--halma-size, 8), minmax(0, 1fr));
  gap: clamp(0.1rem, 0.35vw, 0.26rem);
  aspect-ratio: 1;
  place-content: center;
  padding: clamp(0.38rem, 1.1vw, 0.75rem);
  background:
    radial-gradient(circle at 18% 14%, rgb(211 253 250 / 28%), transparent 28%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 8%) 0 1px, transparent 1px 0.5rem),
    var(--halma-board-bg);
  border: 0.18rem solid var(--halma-rim);
  border-radius: 0.9rem;
  box-shadow:
    0 0.8rem 1.5rem rgb(5 25 34 / 48%),
    inset 0 0 0 0.14rem rgb(232 255 252 / 18%);
}

.halma-cell {
  position: relative;
  min-height: 0;
  aspect-ratio: auto;
  border: 0.1rem solid rgb(196 245 241 / 25%);
  border-radius: 0.28rem;
  background:
    radial-gradient(circle at 31% 25%, rgb(230 255 253 / 23%), transparent 42%),
    linear-gradient(135deg, #47808a, var(--halma-deep));
  cursor: pointer;
  transition:
    background 0.12s ease,
    box-shadow 0.12s ease;
}

.halma-cell:disabled {
  cursor: default;
}

/* Pegs: a filled disc centred in the cell. */
.halma-cell.is-seat-0::after,
.halma-cell.is-seat-1::after {
  content: '';
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  box-shadow:
    inset 0 -0.18rem 0.25rem rgb(5 39 50 / 36%),
    0 0.12rem 0.22rem rgb(2 23 32 / 26%);
}
.halma-cell.is-seat-0::after {
  background:
    radial-gradient(circle at 34% 25%, rgb(255 255 255 / 72%) 0 9%, transparent 10%),
    radial-gradient(circle, #b8f0ed, var(--halma-frost) 63%, #367985);
}
.halma-cell.is-seat-1::after {
  background:
    radial-gradient(circle at 34% 25%, rgb(255 233 252 / 65%) 0 9%, transparent 10%),
    radial-gradient(circle, #eeadf1, var(--halma-aurora) 63%, #76477f);
}

.halma-cell.is-selected {
  box-shadow: inset 0 0 0 0.18rem #f5e6a6;
}
.halma-cell.is-target {
  background:
    radial-gradient(circle at 50% 50%, rgb(247 231 165 / 34%) 0 17%, transparent 19%),
    linear-gradient(135deg, #5b94a0, var(--halma-deep));
}

.halma-cell:not(:disabled):hover,
.halma-cell:not(:disabled):focus-visible {
  outline: 0.12rem solid var(--halma-rim);
  outline-offset: -0.12rem;
}

@media (min-width: 768px) and (max-height: 520px) {
  .halma-board {
    width: 100%;
    margin-inline: auto;
  }
}