/* =============================================================
   GAME: Nine Men's Morris
   ============================================================= */
.board-morris { --mm-glow: #a96bff; width: min(100%, 440px); display: flex; flex-direction: column; gap: 8px; }
.mm-svg {
  display: block; width: 100%; height: auto; border-radius: 18px;
  background: radial-gradient(circle at 50% 45%, #2a0b1d, #12061a 75%);
  box-shadow: 0 0 0 2px var(--mm-glow), 0 0 26px rgba(169, 107, 255, .35);
}
.mm-lines rect, .mm-lines line { fill: none; stroke: var(--mm-glow); stroke-width: 3; stroke-linecap: round; opacity: .8; }
/* mills: a glowing bar under the three pieces; the one just formed flares up */
.mm-mill { stroke-width: 10; stroke-linecap: round; opacity: .5; }
.mm-mill.p1 { stroke: #fff6d8; filter: drop-shadow(0 0 4px rgba(255, 210, 63, .8)); }
.mm-mill.p2 { stroke: #3df5ff; filter: drop-shadow(0 0 4px rgba(61, 245, 255, .8)); }
.mm-mill.fresh { opacity: .85; stroke-dasharray: 1; stroke-dashoffset: 1; animation: mm-mill-draw .35s ease-out forwards, mm-mill-glow .7s ease-in-out .35s 4 alternate; }
@keyframes mm-mill-draw { to { stroke-dashoffset: 0; } }
@keyframes mm-mill-glow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 0; opacity: .45; stroke-width: 14; } }
@media (prefers-reduced-motion: reduce) { .mm-mill.fresh { stroke-dashoffset: 0; } }

.mm-pt { cursor: default; outline: none; -webkit-tap-highlight-color: transparent; }
.mm-pt.legal, .mm-pt.movable, .mm-pt.removable, .mm-pt.sel { cursor: pointer; }
.mm-hit { fill: transparent; stroke: none; }
.mm-node { fill: #ff98a2; transform-box: fill-box; transform-origin: center; transition: transform .15s, fill .15s; }
.mm-ring { fill: none; stroke: transparent; stroke-width: 3; }
.mm-piece, .mm-shadow, .mm-top, .mm-shine { opacity: 0; pointer-events: none; }
.mm-piece, .mm-top { transform-box: fill-box; transform-origin: center; }
.mm-x { fill: none; stroke: transparent; stroke-width: 3; stroke-linecap: round; }
.mm-pt.p1 .mm-node, .mm-pt.p2 .mm-node { opacity: 0; }
/* pieces: turned discs with a raised rim, recessed top and a glint */
.mm-pt.p1 .mm-piece, .mm-pt.p2 .mm-piece, .mm-pt.p1 .mm-top, .mm-pt.p2 .mm-top { opacity: 1; }
.mm-pt.p1 .mm-shadow, .mm-pt.p2 .mm-shadow { opacity: 1; fill: rgba(0, 0, 0, .55); }
.mm-pt.p1 .mm-shine, .mm-pt.p2 .mm-shine { opacity: .8; fill: #fff; }
.mm-pt.p2 .mm-shine { opacity: .35; }
.mm-pt.p1 .mm-piece { fill: url(#mm-body1); stroke: #fff; stroke-width: 1; }
.mm-pt.p2 .mm-piece { fill: url(#mm-body2); stroke: #3df5ff; stroke-width: 2.2; }
.mm-pt.p1 .mm-top { fill: url(#mm-top1); stroke: rgba(90, 70, 120, .35); stroke-width: 1.4; }
.mm-pt.p2 .mm-top { fill: url(#mm-top2); stroke: rgba(61, 245, 255, .45); stroke-width: 1.2; }

.mm-pt.legal .mm-node { fill: #fff; transform: scale(1.35); }
.mm-pt.legal .mm-ring { stroke: rgba(255, 255, 255, .35); stroke-dasharray: 4 5; }
.mm-pt.legal:hover .mm-ring { stroke: #fff; }
.mm-pt.movable .mm-ring { stroke: rgba(255, 210, 63, .7); stroke-dasharray: 5 4; }
.mm-pt.movable:hover .mm-ring, .mm-pt.sel .mm-ring { stroke: var(--t-gold); stroke-dasharray: none; stroke-width: 4; filter: drop-shadow(0 0 5px var(--t-gold)); }
.mm-pt.removable .mm-ring { stroke: var(--t-red); stroke-width: 4; stroke-dasharray: none; animation: mmpulse .8s ease-in-out infinite alternate; }
.mm-pt.removable:hover .mm-x { stroke: var(--t-red); }
.mm-pt.last .mm-ring { stroke: var(--accent); stroke-width: 3; stroke-dasharray: none; }
.mm-pt.last .mm-piece, .mm-pt.last .mm-top { animation: mmpop .28s cubic-bezier(.3, 1.5, .5, 1); }
.mm-pt.last-from .mm-node { fill: var(--accent); transform: scale(1.6); }
.mm-pt.taken .mm-x { stroke: var(--t-red); opacity: .8; animation: mm-x .4s ease-out .25s both; }
/* removed piece: flashes red, swells and fades away */
.mm-pt.taken .mm-piece { animation: mm-gone .55s ease-in forwards; stroke: var(--t-red); stroke-width: 3; }
.mm-pt.taken.gone1 .mm-piece { fill: url(#mm-body1); }
.mm-pt.taken.gone2 .mm-piece { fill: url(#mm-body2); }
@keyframes mm-gone { 0% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 6px var(--t-red)); } 100% { opacity: 0; transform: scale(1.7); filter: drop-shadow(0 0 0 var(--t-red)); } }
@keyframes mm-x { from { opacity: 0; } }
.mm-pt.taken .mm-node { opacity: 0; }
.mm-pt:focus-visible .mm-hit { stroke: var(--focus); stroke-width: 3; }
@keyframes mmpulse { to { opacity: .4; } }
@keyframes mmpop { from { transform: scale(.4); } }

.mm-tray { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; min-height: 16px; }
.mm-tray i, .mm-dot { display: inline-block; width: 15px; height: 15px; border-radius: 50%; flex: none; }
.mm-tray i.p1, .mm-dot.p1 { background: radial-gradient(circle at 50% 50%, #fff 0 32%, #d9d3e6 36%, #f4f1fa 44%, #c3bbd3 80%, #8f86a6 100%); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.mm-tray i.p2, .mm-dot.p2 { background: radial-gradient(circle at 50% 50%, #34304a 0 32%, #0c0a12 36%, #2b2738 46%, #0d0b13 85%); box-shadow: 0 0 0 1.5px #3df5ff, 0 2px 3px rgba(0, 0, 0, .5); }
.statusbar .mm-dot { width: 16px; height: 16px; }