/* The Nine men's morris board and stones, shared by games/morris.html and the profile preview.
   The look comes from CSS variables set by js/shared/morris-look.js:
   --mm-bg, --mm-line, --stone-white, --stone-black, --sw-rim, --sb-rim, and .m3d (3D stones).
   The points are buttons placed on a 7x7 grid over the lines (an SVG). */
.mboard{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1;background:var(--mm-bg,#d9b27a);border-radius:10px;box-shadow:0 4px 18px rgba(0,0,0,.4);touch-action:manipulation;user-select:none;-webkit-user-select:none;container-type:inline-size}
.mm-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mm-lines line{stroke:var(--mm-line,#5a3a1b);stroke-width:.06;stroke-linecap:square}
.mpt{position:absolute;width:11.5cqw;height:11.5cqw;translate:-50% -50%;border:0;padding:0;margin:0;background:none;border-radius:50%;cursor:pointer}
.mpt::before{content:'';position:absolute;inset:38%;border-radius:50%;background:var(--mm-line,#5a3a1b)}
.mpt:focus-visible{outline:3px solid var(--blue);outline-offset:-2px;z-index:3}

.mpt .stone{position:absolute;inset:6%;border-radius:50%;pointer-events:none;transform:scale(0);transition:transform .12s}
.mpt.w .stone,.mpt.b .stone{transform:scale(1)}
.mpt.w .stone{background:var(--stone-white,#f2efe6);box-shadow:0 0 0 1.5px var(--sw-rim,rgba(0,0,0,.45)),0 3px 0 rgba(0,0,0,.35)}
.mpt.b .stone{background:var(--stone-black,#1c1c1c);box-shadow:0 0 0 1.5px var(--sb-rim,rgba(255,255,255,.55)),0 3px 0 rgba(0,0,0,.35)}

/* 3D stones (reward for a win on Medium): round, polished stones with a shadow */
.m3d .mpt.w .stone{background:radial-gradient(circle at 38% 32%,#fff 0,var(--stone-white,#f2efe6) 45%,color-mix(in srgb,var(--stone-white,#f2efe6),#000 30%) 100%);box-shadow:0 0 0 1px var(--sw-rim),1px 1.2cqw 1.4cqw rgba(0,0,0,.5)}
.m3d .mpt.b .stone{background:radial-gradient(circle at 38% 32%,color-mix(in srgb,var(--stone-black,#1c1c1c),#fff 40%) 0,var(--stone-black,#1c1c1c) 50%,color-mix(in srgb,var(--stone-black,#1c1c1c),#000 45%) 100%);box-shadow:0 0 0 1px var(--sb-rim),1px 1.2cqw 1.4cqw rgba(0,0,0,.5)}

/* Stones in a mill get a ring; the chosen stone, where it can go, what may be taken, the last turn */
.mpt.mill .stone::after{content:'';position:absolute;inset:22%;border-radius:50%;border:2px solid var(--accent,#f0a500);opacity:.9}
.mpt.sel .stone{box-shadow:0 0 0 3px var(--green),0 3px 0 rgba(0,0,0,.35)}
.mpt.src::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px rgba(255,235,59,.8);pointer-events:none}
.mboard.mine .mpt.to::after{content:'';position:absolute;inset:30%;border-radius:50%;background:rgba(76,175,80,.75);box-shadow:0 0 0 2px rgba(0,0,0,.25);pointer-events:none}
.mboard.mine .mpt.take .stone{outline:3px dashed #e53935;outline-offset:2px;cursor:pointer}
.mpt.take{cursor:crosshair}
.mpt.from::after{content:'';position:absolute;inset:18%;border-radius:50%;border:2px dashed rgba(229,57,53,.7);pointer-events:none}
.mpt.last .stone{box-shadow:0 0 0 3px rgba(229,57,53,.85),0 3px 0 rgba(0,0,0,.35)}
.mpt.pending .stone{opacity:.6}
.mpt.gone::after{content:'';position:absolute;inset:8%;border-radius:50%;border:3px solid #e53935;animation:mm-gone .7s ease forwards;pointer-events:none}
@keyframes mm-gone{0%{transform:scale(1);opacity:1}100%{transform:scale(1.6);opacity:0}}
.mpt.moving{z-index:3}
@media (prefers-reduced-motion:reduce){.mpt .stone{transition:none}.mpt.gone::after{animation:none;opacity:0}}