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

:root {
  --title-color: var(--color-nim);
  --nim-table: #2c1c12;
  --nim-table-dark: #201209;
  --nim-cloth: rgb(0 0 0 / 25%);
  --nim-shaft: #e8d3a8;
  --nim-shaft-shadow: #b9915a;
  --nim-tip: #c2410c;
  --nim-tip-spent: #57534e;
}

/* A fireside table of matchsticks laid out heap by heap, rather than plain
   counters on a card. */
.nim-board {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background:
    radial-gradient(ellipse at 50% 20%, rgb(194 65 12 / 12%), transparent 55%),
    repeating-linear-gradient(90deg, var(--nim-table) 0 2.2rem, var(--nim-table-dark) 2.2rem 2.4rem);
  border: 1px solid var(--nim-table-dark);
  border-radius: var(--border-radius-lg);
  box-shadow: inset 0 0 3rem var(--nim-cloth);
}
.nim-board[data-visual-theme='arcade'] {
  --nim-table: #4a1739;
  --nim-table-dark: #2c0e22;
}
.nim-board[data-visual-theme='midnight'] {
  --nim-table: #1a2c3d;
  --nim-table-dark: #101c28;
}
.nim-board[data-visual-theme='daylight'] {
  --nim-table: #3c2a54;
  --nim-table-dark: #241934;
}
.nim-board[data-visual-theme='amber'] {
  --nim-table: #3d2a12;
  --nim-table-dark: #26190a;
}

.nim-heap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: var(--spacing-sm);
  min-height: 3.5rem;
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid rgb(0 0 0 / 25%);
}

.nim-token {
  width: clamp(0.4rem, 1.6vw, 0.6rem);
  height: clamp(2rem, 7vw, 3rem);
  border: none;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    var(--nim-tip) 0%,
    var(--nim-tip) 16%,
    var(--nim-shaft) 22%,
    var(--nim-shaft-shadow) 100%
  );
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition:
    transform 0.12s ease,
    opacity 0.12s ease;
}

.nim-token:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.05);
}

.nim-token:disabled {
  cursor: default;
  opacity: 0.55;
  background: linear-gradient(
    180deg,
    var(--nim-tip-spent) 0%,
    var(--nim-tip-spent) 16%,
    var(--nim-shaft) 22%,
    var(--nim-shaft-shadow) 100%
  );
}