/* =============================================================
   GAME: Halma
   ============================================================= */
.board-halma {
  --hm-glow: #d4ff5c;
  width: min(100%, 560px);
  padding: 4px; border-radius: 14px; background: #0b1408;
  box-shadow: 0 0 0 2px var(--hm-glow), 0 0 26px rgba(212, 255, 92, .28);
}
.board-halma svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.hm-frame { fill: #2b1d0e; }
.hm-tile.l { fill: #d9c79b; }
.hm-tile.d { fill: #b89f6c; }
.hm-tint { fill: transparent; pointer-events: none; }
.hm-sq.camp.c0 .hm-tint { fill: rgba(255, 61, 95, .2); }
.hm-sq.camp.c1 .hm-tint { fill: rgba(34, 211, 106, .2); }
.hm-sq.camp.c2 .hm-tint { fill: rgba(61, 139, 255, .2); }
.hm-sq.camp.c3 .hm-tint { fill: rgba(255, 194, 31, .24); }
.hm-camp { fill: none; stroke-width: 2.4; stroke-linecap: square; pointer-events: none; }
.hm-camp.c0 { stroke: #e0193f; } .hm-camp.c1 { stroke: #0f9e4c; } .hm-camp.c2 { stroke: #1e63d6; } .hm-camp.c3 { stroke: #d99a00; }

.hm-sq { cursor: default; outline: none; }
.hm-ring { fill: none; stroke: transparent; stroke-width: 2.4; pointer-events: none; }
.hm-sq:focus-visible .hm-tile { stroke: #6b2cff; stroke-width: 2.4; }
.hm-play .hm-sq.can, .hm-play .hm-sq.dest, .hm-play .hm-sq.sel { cursor: pointer; }
.hm-play .hm-sq.can:hover .hm-tint { fill: rgba(255, 255, 255, .25); }
.hm-sq.sel .hm-tint { fill: rgba(212, 255, 92, .6); }

/* reachable squares: a dot + ring in a bright lime, dashed when it needs several hops */
.hm-sq.dest .hm-tint { fill: rgba(120, 200, 20, .28); }
.hm-sq.dest .hm-ring { stroke: #3c7a00; fill: rgba(212, 255, 92, .55); animation: hm-pulse 1s ease-in-out infinite alternate; }
.hm-sq.dest.far .hm-ring { stroke-dasharray: 3 2.6; fill: rgba(212, 255, 92, .3); }
.hm-sq.dest:hover .hm-ring, .hm-sq.dest:focus-visible .hm-ring { stroke-width: 3.4; }
@keyframes hm-pulse { from { opacity: .6; } to { opacity: 1; } }

.hm-path, .hm-last { fill: none; pointer-events: none; stroke-linecap: round; stroke-linejoin: round; }
.hm-path.on { stroke: #1d2a00; stroke-width: 2.4; stroke-dasharray: 2 5; }
.hm-last { stroke-width: 3; opacity: .45; }
.hm-last.c0 { stroke: #e0193f; } .hm-last.c1 { stroke: #0f9e4c; } .hm-last.c2 { stroke: #1e63d6; } .hm-last.c3 { stroke: #d99a00; }

.hm-pieces { pointer-events: none; }
.hm-p { transition: transform .17s cubic-bezier(.3, .7, .4, 1); }
.hm-shadow { fill: rgba(30, 15, 0, .45); }
.hm-shine { fill: #fff; opacity: .85; }
.hm-p.sel { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff); }
.hm-p.moving { filter: drop-shadow(0 5px 3px rgba(0, 0, 0, .45)); }
@media (prefers-reduced-motion: reduce) { .hm-p { transition: none; } .hm-sq.dest .hm-ring { animation: none; } }

.hm-chips { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.hm-sc { padding: 3px 10px; }
.hm-msg { flex-basis: 100%; }
.hm-dot.c0 { background: #ff3d5f; } .hm-dot.c1 { background: #22d36a; } .hm-dot.c2 { background: #3d8bff; } .hm-dot.c3 { background: #ffc21f; }
@media (max-width: 600px) { .hm-sc { padding: 2px 8px; gap: 4px; } }