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

/* =============================================================================
   Yoté — a carved savanna-wood board rather than a flat grid: sun-bleached
   timber cells inside a dark carved frame, with the two sides cast as pale
   cowrie shells vs. dark polished seeds instead of plain colour discs.
   ========================================================================== */

:root {
  --title-color: var(--color-yote);
  --yote-wood: #c99a55;
  --yote-wood-dark: #8a6431;
  --yote-frame: #4a2f14;
}

.yote-board[data-visual-theme='arcade'] {
  --yote-wood: #c261a5;
  --yote-wood-dark: #7a2f5f;
  --yote-frame: #370a2b;
}

.yote-board[data-visual-theme='midnight'] {
  --yote-wood: #4a86ac;
  --yote-wood-dark: #235272;
  --yote-frame: #0e2438;
}

.yote-board[data-visual-theme='daylight'] {
  --yote-wood: #b39ae8;
  --yote-wood-dark: #7a5cc9;
  --yote-frame: #3c2670;
}

.yote-board[data-visual-theme='amber'] {
  --yote-wood: #d19a3d;
  --yote-wood-dark: #93611a;
  --yote-frame: #402506;
}

.yote-board {
  display: grid;
  grid-template-columns: repeat(var(--yote-cols, 6), 1fr);
  grid-template-rows: repeat(var(--yote-rows, 5), 1fr);
  gap: 4px;
  /* Landscape board (6×5): grow into the shell's free height, aspect-ratio derives
     the width. No per-game dvh cap — it over-subtracted the reserve and left a gap. */
  flex: 1 1 auto;
  min-height: 0;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: calc(var(--yote-cols, 6) / var(--yote-rows, 5));
  place-content: center;
  padding: var(--spacing-sm);
  background: var(--yote-frame);
  border: 3px solid color-mix(in srgb, black 30%, var(--yote-frame));
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    var(--shadow);
}

.yote-cell {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, black 25%, var(--yote-wood-dark));
  border-radius: var(--border-radius-sm);
  background:
    repeating-linear-gradient(100deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 7px),
    linear-gradient(155deg, var(--yote-wood), var(--yote-wood-dark));
  cursor: pointer;
  transition:
    background 0.12s ease,
    box-shadow 0.12s ease;
}

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

/* Seat 0: a pale cowrie shell. Seat 1: a dark polished seed. */
.yote-cell.is-seat-0::after,
.yote-cell.is-seat-1::after {
  content: '';
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  box-shadow:
    inset 0 -3px 4px rgba(0, 0, 0, 0.3),
    0 2px 2px rgba(0, 0, 0, 0.4);
}
.yote-cell.is-seat-0::after {
  background: radial-gradient(circle at 35% 28%, #fdf6e3, #d8c48f 65%, #a98c54);
}
.yote-cell.is-seat-1::after {
  background: radial-gradient(circle at 35% 28%, #5a3a1e, #2c1a0c 70%, #180d05);
}

.yote-cell.is-selected {
  box-shadow: 0 0 0 3px var(--color-yote) inset;
}
.yote-cell.is-target {
  background: color-mix(in srgb, var(--color-yote) 30%, var(--yote-wood));
}
/* Bonus-removal candidates pulse with the danger colour. */
.yote-cell.is-removal {
  box-shadow: 0 0 0 3px var(--danger) inset;
}