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

/* =============================================================================
   Achi — a carved wooden board rather than a flat panel: the lattice reads as
   grooves cut into timber, each node a drilled socket, and pieces are smooth
   light bead vs. dark wood stones instead of flat colour discs.
   ========================================================================== */

:root {
  --title-color: var(--color-achi);
  --achi-line: #d9c397;
  --achi-wood: #6b4423;
  --achi-wood-dark: #4a2d15;
  --achi-socket: #2c1b0d;
}

.achi-board[data-visual-theme='arcade'] {
  --achi-line: #ff8fd8;
  --achi-wood: #5a1f4a;
  --achi-wood-dark: #300f26;
  --achi-socket: #170a12;
}

.achi-board[data-visual-theme='midnight'] {
  --achi-line: #9db8d8;
  --achi-wood: #223449;
  --achi-wood-dark: #10192a;
  --achi-socket: #0a0f1a;
}

.achi-board[data-visual-theme='daylight'] {
  --achi-line: #ffe3a8;
  --achi-wood: #8a5a2c;
  --achi-wood-dark: #5c3a1a;
  --achi-socket: #2c1c0d;
}

.achi-board[data-visual-theme='amber'] {
  --achi-line: #ffcf8a;
  --achi-wood: #6b3f14;
  --achi-wood-dark: #40250c;
  --achi-socket: #1f1206;
}

.achi-lattice {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 10%;
  background:
    repeating-linear-gradient(95deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 12px),
    linear-gradient(155deg, var(--achi-wood), var(--achi-wood-dark));
  border: 3px solid color-mix(in srgb, black 30%, var(--achi-wood-dark));
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    var(--shadow);
}

/* Lattice lines: carved grooves (a soft shadow twin under the bright stroke). */
.achi-lines {
  position: absolute;
  inset: 10%;
  width: 80%;
  height: 80%;
}
.achi-lines line {
  stroke: var(--achi-line);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5));
  opacity: 0.85;
}

.achi-point {
  position: absolute;
  width: 20%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

/* An empty node: a drilled socket recessed into the wood. */
.achi-point::after {
  content: '';
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, var(--achi-socket), #150c05);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Seat 0: a pale bone/shell bead. */
.achi-point.is-seat-0::after {
  background: radial-gradient(circle at 35% 28%, #fdf6e3, #d8c48f 65%, #a98c54);
  box-shadow:
    inset 0 -3px 4px rgba(0, 0, 0, 0.25),
    0 2px 2px rgba(0, 0, 0, 0.4);
}
/* Seat 1: a dark polished wood stone. */
.achi-point.is-seat-1::after {
  background: radial-gradient(circle at 35% 28%, #6b4a2a, #2e1c0d 70%, #1a0f06);
  box-shadow:
    inset 0 -3px 4px rgba(0, 0, 0, 0.4),
    0 2px 2px rgba(0, 0, 0, 0.4);
}

.achi-point.is-selected {
  border-color: var(--white-color);
}
.achi-point.is-target::after {
  background: radial-gradient(
    circle at 45% 40%,
    color-mix(in srgb, var(--color-achi) 55%, var(--achi-socket)),
    var(--achi-socket)
  );
}
.achi-point:disabled {
  cursor: default;
}