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

:root {
  --title-color: var(--color-chinese-checkers);
  --cc-ink: #122636;
  --cc-ink-deep: #08151f;
  --cc-ink-top: #244757;
  --cc-line: rgb(197 231 235 / 58%);
  --cc-rim: #d3b46a;
  --cc-inset: 7%;
}

.cc-board[data-visual-theme='arcade'] {
  --cc-ink: #341a3d;
  --cc-ink-deep: #1a0a20;
  --cc-ink-top: #5a2a63;
  --cc-line: rgb(255 214 245 / 58%);
  --cc-rim: #ff4fd8;
}

.cc-board[data-visual-theme='midnight'] {
  --cc-ink: #10263a;
  --cc-ink-deep: #060f1a;
  --cc-ink-top: #1c3b57;
  --cc-line: rgb(186 230 253 / 58%);
  --cc-rim: #38bdf8;
}

.cc-board[data-visual-theme='daylight'] {
  --cc-ink: #2c2154;
  --cc-ink-deep: #17122d;
  --cc-ink-top: #453382;
  --cc-line: rgb(237 233 254 / 58%);
  --cc-rim: #a78bfa;
}

.cc-board[data-visual-theme='amber'] {
  --cc-ink: #3a2810;
  --cc-ink-deep: #1c1206;
  --cc-ink-top: #5c3f19;
  --cc-line: rgb(253 230 138 / 58%);
  --cc-rim: #fbbf24;
}

/* ── Board container ────────────────────────────────────────────────────────── */

.cc-board {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, rgb(72 126 139 / 38%), transparent 42%),
    repeating-radial-gradient(circle at 50% 48%, transparent 0 4.7%, rgb(190 224 220 / 5%) 4.8% 5%),
    linear-gradient(145deg, var(--cc-ink-top), var(--cc-ink) 55%, var(--cc-ink-deep));
  border: 0.2rem solid var(--cc-rim);
  border-radius: 1rem;
  box-shadow:
    0 1.1rem 2.4rem rgb(2 10 17 / 48%),
    inset 0 0 0 0.2rem rgb(239 221 164 / 35%),
    inset 0 0 2.4rem rgb(1 12 20 / 58%);
}

.cc-board::before,
.cc-board::after {
  position: absolute;
  z-index: -1;
  content: '';
  pointer-events: none;
}

.cc-board::before {
  inset: 3.5%;
  border: 1px solid rgb(234 213 152 / 35%);
  border-radius: 50%;
  box-shadow: 0 0 0 0.35rem rgb(9 30 42 / 42%);
}

.cc-board::after {
  inset: 10%;
  border: 1px dashed rgb(212 230 203 / 20%);
  border-radius: 50%;
}

/* ── SVG lines layer ────────────────────────────────────────────────────────── */

.cc-lines {
  position: absolute;
  inset: var(--cc-inset);
  width: calc(100% - (var(--cc-inset) * 2));
  height: calc(100% - (var(--cc-inset) * 2));
  pointer-events: none;
  filter: drop-shadow(0 0 0.16rem rgb(221 243 225 / 20%));
}

.cc-lines line {
  stroke: var(--cc-line);
  stroke-width: 0.34;
  stroke-linecap: round;
}

/* ── Points layer ───────────────────────────────────────────────────────────── */

.cc-points {
  position: absolute;
  inset: var(--cc-inset);
}

/* ── Cell buttons ───────────────────────────────────────────────────────────── */

.cc-cell {
  position: absolute;
  width: 7.1%;
  height: 7.1%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 0.14rem solid transparent;
  cursor: pointer;
  box-shadow:
    inset 0.12rem 0.15rem 0.25rem rgb(255 255 255 / 28%),
    inset -0.18rem -0.22rem 0.3rem rgb(0 0 0 / 30%);
  transition:
    filter 0.12s,
    border-color 0.12s,
    transform 0.1s;
}

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

.cc-cell.is-empty {
  background: radial-gradient(circle at 35% 30%, rgb(157 207 205 / 38%), rgb(21 58 69 / 85%) 70%);
  border-color: rgb(212 237 224 / 28%);
}

.cc-cell.is-empty:not(:disabled):hover {
  filter: brightness(1.35);
}

.cc-cell.is-seat-0 {
  background: radial-gradient(circle at 32% 25%, #c7f5ff, #3d9ae3 32%, #13519b 77%);
  border-color: #8bd8f5;
}

.cc-cell.is-seat-1 {
  background: radial-gradient(circle at 32% 25%, #ffd0c4, #ee6755 32%, #a72932 77%);
  border-color: #ffad9d;
}

.cc-cell.is-seat-2 {
  background: radial-gradient(circle at 32% 25%, #dcffd5, #61c871 32%, #16704f 77%);
  border-color: #b5efa5;
}

.cc-cell.is-seat-3 {
  background: radial-gradient(circle at 32% 25%, #fff5bc, #e6bd3f 32%, #a76818 77%);
  border-color: #f8df85;
}

.cc-cell.is-seat-4 {
  background: radial-gradient(circle at 32% 25%, #f0d6ff, #bd70e9 32%, #6d358f 77%);
  border-color: #e3b4fc;
}

.cc-cell.is-seat-5 {
  background: radial-gradient(circle at 32% 25%, #ffe1b3, #ed9543 32%, #a84a1c 77%);
  border-color: #ffc77d;
}

/* Selected piece */
.cc-cell.is-selected {
  border-color: #fff4be !important;
  box-shadow:
    0 0 0 0.2rem rgb(255 236 159 / 85%),
    0 0 1rem rgb(255 208 92 / 64%);
  transform: translate(-50%, -50%) scale(1.15);
}

/* Valid move destination */
.cc-cell.is-valid {
  border-color: #fff0a4;
  box-shadow:
    0 0 0 0.14rem rgb(255 231 139 / 80%),
    0 0 0.75rem rgb(255 204 79 / 58%);
}

.cc-cell.is-valid.is-empty {
  background: radial-gradient(circle at 35% 30%, #fff7bc, #b88b2d 42%, #315662 80%);
}