/* =============================================================
   GAME: Chinese Checkers
   ============================================================= */
.board-chinesecheckers {
  --cc-glow: #ff9de2;
  width: min(100%, 520px);
  padding: 4px; border-radius: 18px; background: #12081f;
  box-shadow: 0 0 0 2px var(--cc-glow), 0 0 26px rgba(255, 157, 226, .32);
}
.board-chinesecheckers svg { display: block; width: 100%; height: auto; touch-action: manipulation; overflow: visible; }

/* the star: lacquered plum board with a neon rim */
.cc-star { fill: url(#cc-wood); stroke: #6b3a8c; stroke-width: 2; stroke-linejoin: round; }
.cc-star-glow { fill: none; stroke: var(--cc-glow); stroke-width: 5; stroke-linejoin: round; opacity: .55; filter: blur(3px); }
.cc-hexline { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.cc-camp { fill-opacity: .07; stroke: none; transition: fill-opacity .25s; }
.cc-camp.used { fill-opacity: .16; }
.cc-camp.goal { fill-opacity: .12; }
.cc-camp.used.active { fill-opacity: .34; }
.cc-camp.c0 { fill: #ff3d5f; } .cc-camp.c1 { fill: #ffc21f; } .cc-camp.c2 { fill: #22d36a; }
.cc-camp.c3 { fill: #3d8bff; } .cc-camp.c4 { fill: #a95cff; } .cc-camp.c5 { fill: #ff7a2b; }

/* holes */
.cc-hole { cursor: default; outline: none; }
.cc-hit { fill: transparent; }
.cc-pit { fill: url(#cc-pit); stroke: rgba(255, 255, 255, .1); stroke-width: .8; }
.cc-ring { fill: none; stroke: transparent; stroke-width: 2.2; pointer-events: none; }
.cc-hole:focus-visible .cc-ring { stroke: var(--focus); stroke-width: 2.6; }
.cc-play .cc-hole.can, .cc-play .cc-hole.dest, .cc-play .cc-hole.sel { cursor: pointer; }
.cc-play .cc-hole.can:hover .cc-ring { stroke: rgba(255, 255, 255, .55); }

/* reachable holes: a glowing ring in the mover's colour (dimmer when it needs hops) */
.cc-hole.dest .cc-pit { fill: #2b1640; }
.cc-hole.dest .cc-ring { stroke-dasharray: none; animation: cc-pulse 1.1s ease-in-out infinite alternate; }
.cc-hole.dest.far .cc-ring { stroke-dasharray: 3 2.4; }
.cc-hole.dest:hover .cc-ring, .cc-hole.dest:focus-visible .cc-ring { stroke-width: 3.4; }
.cc-hole.dest.c0 .cc-ring { stroke: #ff6b85; } .cc-hole.dest.c1 .cc-ring { stroke: #ffd65a; } .cc-hole.dest.c2 .cc-ring { stroke: #5dff9a; }
.cc-hole.dest.c3 .cc-ring { stroke: #7ab3ff; } .cc-hole.dest.c4 .cc-ring { stroke: #c99bff; } .cc-hole.dest.c5 .cc-ring { stroke: #ffa16b; }
@keyframes cc-pulse { from { opacity: .55; } to { opacity: 1; } }

/* hop path preview + last move trail */
.cc-path, .cc-last { fill: none; pointer-events: none; stroke-linecap: round; stroke-linejoin: round; }
.cc-path.on { stroke: #fff; stroke-width: 2.4; stroke-dasharray: 2 5; opacity: .9; }
.cc-last { stroke-width: 3; opacity: .35; }
.cc-last.c0 { stroke: #ff3d5f; } .cc-last.c1 { stroke: #ffc21f; } .cc-last.c2 { stroke: #22d36a; }
.cc-last.c3 { stroke: #3d8bff; } .cc-last.c4 { stroke: #a95cff; } .cc-last.c5 { stroke: #ff7a2b; }

/* marbles: glossy gems that glide hop by hop */
.cc-marbles { pointer-events: none; }
.cc-m { transition: transform .17s cubic-bezier(.3, .7, .4, 1); }
.cc-shadow { fill: rgba(0, 0, 0, .55); }
.cc-body { stroke-width: .9; }
.cc-core { opacity: .45; }
.cc-shine { fill: #fff; opacity: .78; }
.cc-spark { fill: #fff; opacity: .5; }
.cc-m.sel .cc-body { stroke: #fff; stroke-width: 2.4; }
.cc-m.sel { filter: drop-shadow(0 0 5px rgba(255, 255, 255, .85)); }
.cc-m.moving { filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .5)); }
.cc-m.moving .cc-shadow { opacity: .4; }
@media (prefers-reduced-motion: reduce) { .cc-m { transition: none; } .cc-hole.dest .cc-ring { animation: none; } }

/* status chips */
.cc-chips { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cc-sc { padding: 3px 10px; }
.cc-msg { flex-basis: 100%; }
.cc-dot.c0 { background: #ff3d5f; } .cc-dot.c1 { background: #ffc21f; } .cc-dot.c2 { background: #22d36a; }
.cc-dot.c3 { background: #3d8bff; } .cc-dot.c4 { background: #a95cff; } .cc-dot.c5 { background: #ff7a2b; }
@media (max-width: 600px) {
  .cc-sc { padding: 2px 8px; gap: 4px; }
  .cc-chips.many .cc-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}