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

:root {
  --title-color: var(--color-baghchal);
  --baghchal-felt: #314148;
  --baghchal-felt-2: #53656a;
  --baghchal-line: rgb(232 215 175 / 70%);
  --baghchal-sand: #e7c985;
  --baghchal-tiger: #c97531;
}

/* Color theme overrides (see src/shared/ui/visualTheme.ts): recolor the felt/line/sand,
   leave --baghchal-tiger (piece color) alone. Authentic (no attribute) keeps the above. */
.baghchal-lattice[data-visual-theme='arcade'] {
  --baghchal-felt: #2a0f38;
  --baghchal-felt-2: #4a1a5e;
  --baghchal-line: rgb(255 178 235 / 70%);
  --baghchal-sand: #ff4fd8;
}

.baghchal-lattice[data-visual-theme='midnight'] {
  --baghchal-felt: #0d1b2e;
  --baghchal-felt-2: #1c3654;
  --baghchal-line: rgb(159 228 255 / 70%);
  --baghchal-sand: #38bdf8;
}

.baghchal-lattice[data-visual-theme='daylight'] {
  --baghchal-felt: #ded6f7;
  --baghchal-felt-2: #efe9ff;
  --baghchal-line: rgb(90 60 150 / 55%);
  --baghchal-sand: #7c3aed;
}

.baghchal-lattice[data-visual-theme='amber'] {
  --baghchal-felt: #2e1c06;
  --baghchal-felt-2: #4d3210;
  --baghchal-line: rgb(255 225 163 / 70%);
  --baghchal-sand: #fbbf24;
}

/* The board is a square felt with a small inset so edge points aren't clipped. */
.baghchal-lattice {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 8%;
  background:
    radial-gradient(circle at 24% 16%, rgb(230 242 226 / 15%), transparent 28%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 0.65rem),
    radial-gradient(circle at 30% 20%, var(--baghchal-felt-2), var(--baghchal-felt));
  border: 0.22rem solid var(--baghchal-sand);
  border-radius: 0.85rem;
  box-shadow:
    0 0.8rem 1.5rem rgb(8 17 19 / 48%),
    inset 0 0 0 0.14rem rgb(238 219 175 / 15%);
}

/* SVG connection lines fill the inset play area. */
.baghchal-lines {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
}
.baghchal-lines line {
  stroke: var(--baghchal-line);
  /* With non-scaling-stroke the width is in device pixels, so use a real width. */
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

/* Point buttons sit at lattice intersections (left/top set inline as %, mapped into
   the same 8%–92% inset as the SVG lines). */
.baghchal-point {
  position: absolute;
  width: 11%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.baghchal-point::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: transparent;
}
.baghchal-point.is-goat::after {
  background:
    radial-gradient(circle at 35% 27%, #fff 0 10%, transparent 11%),
    radial-gradient(circle, #f8f0dc, #bea982 70%);
  box-shadow:
    inset 0 -0.15rem 0.25rem rgb(65 46 29 / 38%),
    0 0.12rem 0.2rem rgb(0 0 0 / 30%);
}
.baghchal-point.is-tiger::after {
  inset: 8%;
  background:
    repeating-linear-gradient(
      120deg,
      transparent 0 18%,
      rgb(62 34 20 / 72%) 19% 27%,
      transparent 28% 45%
    ),
    radial-gradient(circle at 34% 25%, #ffd68a 0 9%, transparent 10%),
    radial-gradient(circle, #e99b47, var(--baghchal-tiger) 68%);
  box-shadow:
    inset 0 -0.18rem 0.28rem rgb(61 31 17 / 52%),
    0 0.14rem 0.24rem rgb(0 0 0 / 38%);
}

.baghchal-point.is-selected {
  border-color: var(--baghchal-sand);
  box-shadow: 0 0 0 0.12rem rgb(239 214 145 / 36%);
}
.baghchal-point.is-target::after {
  background: rgb(239 214 145 / 70%);
  inset: 30%;
  box-shadow: 0 0 0.5rem rgb(239 214 145 / 70%);
}
.baghchal-point:disabled {
  cursor: default;
}