.page{--mm-paper: #F4EFE4;--mm-mill: #C3261C;--mm-mill-soft: rgba(195, 38, 28, .2)}.board-wrap{display:flex;justify-content:center}.mm{--pad: 30px;position:relative;width:100%;max-width:clamp(300px,calc(100vh - 230px),480px);aspect-ratio:1;background:var(--mm-paper);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);user-select:none;-webkit-user-select:none}.mm-grid{position:absolute;inset:var(--pad);color:var(--color-text)}.mm-lines{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible}.mm-point{position:absolute;width:48px;height:48px;transform:translate(-50%,-50%);border:0;padding:0;background:transparent;border-radius:50%;display:flex;align-items:center;justify-content:center;touch-action:manipulation}.mm-point:before{content:"";width:12px;height:12px;border-radius:50%;background:var(--color-text);position:absolute}.mm-point.last:before{background:var(--color-accent);width:16px;height:16px}.mm-point.taken:before{background:var(--mm-mill-soft);border:2px solid var(--mm-mill);width:20px;height:20px}.mm-point.selected{outline:3px solid var(--color-accent);outline-offset:-3px}.mm-point:focus-visible{outline:3px solid var(--color-focus);outline-offset:0;z-index:2}.mm--locked .mm-point{cursor:default}.mm-piece{width:38px;height:38px;border-radius:50%;box-sizing:border-box;position:relative;z-index:1;box-shadow:0 2px 3px #231c1659}.mm-piece--light{background:var(--piece-light-fill);border:4px solid var(--piece-light-ring)}.mm-piece--dark{background:var(--piece-dark-fill);border:4px solid var(--piece-dark-ring)}.mm-point.movable .mm-piece{box-shadow:0 0 0 3px var(--color-accent),0 2px 3px #231c1659}.mm-point.last .mm-piece{box-shadow:0 0 0 3px var(--color-accent-soft),0 2px 3px #231c1659}.mm-point.movable.last .mm-piece{box-shadow:0 0 0 3px var(--color-accent),0 2px 3px #231c1659}.mm-piece.pop{animation:rh-pop .22s var(--ease) both}.mm-piece.mill{--color-accent: var(--mm-mill);animation:rh-blink .35s var(--ease) .22s 2}.mm-piece.pop.mill{animation:rh-pop .22s var(--ease) both,rh-blink .35s var(--ease) .22s 2}.mm-piece.gone{pointer-events:none;animation:mm-gone .7s var(--ease) forwards}@media (prefers-reduced-motion: reduce){.mm-piece.mill{box-shadow:0 0 0 4px var(--mm-mill),0 2px 3px #231c1659}}.gone--light{background:var(--piece-light-fill);border:4px solid var(--piece-light-ring)}.gone--dark{background:var(--piece-dark-fill);border:4px solid var(--piece-dark-ring)}@keyframes mm-gone{0%,50%,to{box-shadow:0 0 0 0 transparent}25%,75%{box-shadow:0 0 0 4px var(--mm-mill)}85%{opacity:1;transform:none}to{opacity:0;transform:scale(.5)}}.legal-dot{width:16px;height:16px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 4px var(--color-accent-soft);position:absolute;z-index:1}@media (max-width: 420px){.mm{--pad: 24px;border-radius:var(--radius-md)}.mm-point{width:44px;height:44px}.mm-piece{width:34px;height:34px;border-width:3px}.mm-point.movable .mm-piece{box-shadow:0 0 0 2px var(--color-accent),0 2px 3px #231c1659}}
